feat: React support

[berezovskyi]

The key piece of the React integration of the oslc-selection-webcomponent is a custom React hook that maps the lifecycle of the standard WebComponent (+events specific to oslc-selection-webcomponent ) into React: src/hooks/useOslcSelection.js https://github.com/OSLC/olsc-selection-utils/pull/2/files#diff-e10d1fd0ed3f0b921e031caa5a56b119e20957829e7ec18454fe5b392c8c3652

Also, for plain HTML+JS page, replaces copied vendor directory with a Vite build to produce a single JS bundle.

Produced with Cursor assistance.

[berezovskyi]

You can build locally with npm i && npm run react:demo:dev

[Copilot]

Pull Request Overview

This PR introduces React support for the OSLC Selection WebComponent by creating a comprehensive React integration demo and updating the build system. The key additions include a custom React hook useOslcSelection that bridges WebComponent lifecycle and React state management, along with demo applications showcasing various integration patterns and styling themes.

• Custom React hook (useOslcSelection) providing seamless WebComponent integration with React state management
• React demo application with comprehensive examples and theming showcases
• Updated Vite-based build system replacing copied vendor dependencies
• Workspace configuration for better monorepo management

Reviewed Changes

Copilot reviewed 22 out of 24 changed files in this pull request and generated 4 comments.

Show a summary per file

File	Description
src/oslc-selection-react-demo/src/hooks/useOslcSelection.js	Core React hook implementing WebComponent lifecycle integration
src/oslc-selection-react-demo/src/App.jsx	Main React demo application with component integration examples
src/oslc-selection-react-demo/package.json	React demo dependencies and build configuration
src/oslc-selection-demo/demo.js	Updated vanilla JS demo using workspace dependencies
package.json	Root workspace configuration with new demo build scripts

[Copilot]

The escapeHtml function creates a DOM element for escaping, which could be inefficient and potentially unsafe. Consider using a dedicated HTML escaping library or React's built-in XSS protection by rendering the text directly without dangerouslySetInnerHTML.

Suggested change

	const escapeHtml = (text) => {
	const div = document.createElement('div')
	div.textContent = text
	return div.innerHTML
	}
	// Removed escapeHtml function as React's built-in XSS protection will be used.

[Copilot]

Using escapeHtml and then rendering the result is unnecessary in React. React automatically escapes text content when rendered as children, making the manual escaping redundant and potentially introducing bugs if the escaped content is later used with dangerouslySetInnerHTML.

Suggested change

	<h6 className="mb-1">{escapeHtml(resource['oslc:label'])}</h6>
	<div className="resource-url">{escapeHtml(resource['rdf:resource'])}</div>
	<h6 className="mb-1">{resource['oslc:label']}</h6>
	<div className="resource-url">{resource['rdf:resource']}</div>