docs: installation guide for react package (#354)

* docs: installation guide for react package
* docs: update top-level readme to include react and nuxt example app, minor corrections in contributing guide and pull request template

Author: colinscz

.github/PULL_REQUEST_TEMPLATE.MD

@@ -25,7 +25,7 @@ https://github.com/six-group/six-webcomponents/blob/dev/.github/CONTRIBUTING.md#
 
 <!-- Describe your changes in detail -->
 <!-- Why is this change required? What problem does it solve? -->
-<!-- If it resolves an open issue, please link to the issue here. For example "Resolves #1337" -->
+<!-- If it resolves an open issue, please link to the issue here. For example, "Resolves #1337" -->
 
 ### 📝 Checklist
 

.github/contributing.md

@@ -65,8 +65,8 @@ guidelines:
 
 ## Development Setup
 
-You will need [Node.js](https://nodejs.org) **version 16+**, and
-[NPM](https://www.npmjs.com/package/npm) **version 8**.
+You will need [Node.js](https://nodejs.org) **version 22+**, and
+[NPM](https://www.npmjs.com/package/npm) **version 10.9.x**.
 
 After cloning the repository, run in root directory:
 

README.md

@@ -38,6 +38,8 @@ There are example apps for Angular, Plain Javascript, Vue and React. You can fin
 | `examples/angular`             | Angular demo app showing some components and features of the ui-library  |
 | `examples/js`                  | Plain JS demo app showing some components and features the of ui-library |
 | `examples/vue`                 | Vue demo app showing some components and features of the ui-library      |
+| `examples/react`               | React demo app showing some components and features of the ui-library    |
+| `examples/nuxt`                | Nuxt demo app showing some components and features of the ui-library     |
 | `docs`                         | API documentation built with VitePress                                   |
 
 ## Credits

docs/.vitepress/config.mts

@@ -53,6 +53,7 @@ export default withMermaid({
               items: [
                 { text: 'Angular', link: '/guide/angular' },
                 { text: 'Vue', link: '/guide/vue' },
+                { text: 'React', link: '/guide/react' },
               ],
             },
             {

docs/guide/react.md

@@ -0,0 +1,78 @@
+# React
+
+We offer a
+[dedicated npm package for React](https://www.npmjs.com/package/@six-group/ui-library-react) to
+simplify the use of our web components. Find detailed steps in this guide to learn how to use it.
+
+For more detailed usage examples, check the
+[React demo](https://six-group.github.io/six-webcomponents/demo/react) and its
+[source code](https://github.com/six-group/six-webcomponents/tree/main/examples/react).
+
+## Setup
+
+This installation guide assumes you are using [Vite](https://vitejs.dev/) as your build tool and
+[React Router](https://reactrouter.com/) as your dedicated React framework.
+
+1. Install both the web components and React library:
+
+   ```bash
+   npm install @six-group/ui-library
+   npm install @six-group/ui-library-react
+   ```
+
+2. In your main.tsx file, import the styles:
+
+   ```ts
+   import '@six-group/ui-library/dist/ui-library/ui-library.css';
+   ```
+
+## Using the Components
+
+The components can be used just like any other React component.
+
+1. Import the component with an import statement like this
+
+   ```ts
+   import { SixMenuItem } from '@six-group/ui-library-react';
+   ```
+
+2. Use it in the template
+
+   ```html
+   <SixMenuItem value="logout">Logout</SixMenuItem>
+   ```
+
+## Router
+
+If you are using `react-router` and want to use `NavLink` attributes on the web components
+
+```ts
+import { NavLink } from 'react-router';
+```
+
+You can then use `router-link` on any component from the library like this:
+
+```ts
+const getLinkClassName = ({ isActive }: { isActive: boolean }) =>
+  `${styles[isActive ? 'active-link' : 'link']}`;
+```
+
+```html
+<NavLink to={'/'} className={getLinkClassName}>
+  <SixSidebarItemGroup name="Home" icon="home" />
+</NavLink>
+```
+
+## Forms
+
+If you want to use the web components in a form, you can check out the example in the React example
+app. We are not using any form library, but there are some good form libraries out there. Following
+a list of libraries, you can check out and which we recommend as a starting point:
+
+- [react-hook-form](https://react-hook-form.com/)
+- [tanstack-form](https://tanstack.com/form/latest/docs/overview)
+
+### Error Message Translations
+
+For proper translation, set the lang attribute on the `html` element. Languages available are `en`,
+`de`, `it`, and `fr`.

docs/index.md

@@ -16,6 +16,9 @@ hero:
     - theme: alt
       text: Vue Example
       link: https://six-group.github.io/six-webcomponents/demo/vue
+    - theme: alt
+      text: React Example (experimental)
+      link: https://six-group.github.io/six-webcomponents/demo/react
 features:
   - title: Agnostic
     details: