Merge pull request #311 from craquet/react-wrapper

Restructure as monorepo and automatically generate react-wrapper

Author: maximiliani

.github/workflows/deploy-storybook.yml

@@ -20,12 +20,14 @@ jobs:
         run: npm ci
       - name: Build component
         run: npm run build
+        working-directory: packages/stencil-library
       - name: Build Storybook
         run: npm run build-storybook
+        working-directory: packages/stencil-library
       - name: Upload Storybook to GitHub Pages
         uses: actions/upload-pages-artifact@v3
         with:
-          path: "storybook-static"
+          path: "packages/stencil-library/storybook-static"
 
       - name: Deploy to GitHub Pages
         uses: actions/deploy-pages@v4

.github/workflows/github-npm-publish.yml

@@ -30,6 +30,7 @@ jobs:
           node-version: 20
           registry-url: https://npm.pkg.github.com/
       - run: npm ci
-      - run: npm publish
+      - run: npx lerna run build
+      - run: npx lerna publish from-package
         env:
           NODE_AUTH_TOKEN: ${{secrets.GITHUB_TOKEN}}

.github/workflows/npm-ci.yml

@@ -0,0 +1,22 @@
+name: NPM Clean Install
+
+on:
+  push:
+    branches: [ main, dev ]
+  pull_request:
+    branches: [ main, dev ]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        # Use both LTS releases and latest one for tests
+        node: [ 16, 18, 20 ]
+    steps:
+      - uses: actions/[email protected]
+      - uses: actions/setup-node@v4
+        with:
+          node-version: ${{ matrix.node }}
+      - run: npm ci
+      - run: npx lerna run build

.github/workflows/real-npm-publish.yml

@@ -14,7 +14,7 @@ jobs:
           node-version: 20
           registry-url: https://registry.npmjs.org/
       - run: npm clean-install
-      - run: npm run build
-      - run: npm publish --access public
+      - run: npx lerna run build
+      - run: npx lerna publish from-package
         env:
           NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}

.gitignore

@@ -1,3 +1,4 @@
+hydrate/
 dist/
 www/
 loader/
@@ -155,3 +156,5 @@ fabric.properties
 !.idea/runConfigurations
 
 # End of https://www.toptal.com/developers/gitignore/api/macos,webstorm+all,storybookjs
+
+.nx

.pre-commit-config.yaml

@@ -7,7 +7,7 @@ repos:
       - id: trailing-whitespace
       - id: check-yaml
       - id: check-added-large-files
-  - repo: https://github.com/Materials-Data-Science-and-Informatics/somesy
-    rev: "v0.4.2"
-    hooks:
-      - id: somesy
+#  - repo: https://github.com/Materials-Data-Science-and-Informatics/somesy
+#    rev: "v0.4.2"
+#    hooks:
+#      - id: somesy

README.md

@@ -6,6 +6,8 @@ The `pid-component` is an easily extensible web component that can be used to di
 identifiers in a user-friendly way.
 It is easily extensible to support other identifier types.
 
+> A [React wrapper]() is also available
+
 The `pid-component` dynamically renders a component based on the value of the `value` property.
 Depending on the value, it decides which component to render, what priority to give it, and what props to pass to it.
 It also renders itself recursively for all its children when unfolded.
@@ -42,24 +44,41 @@ You can try this web component in the [demo](https://kit-data-manager.github.io/
 
 There are detailed docs for the `pid-component` component
 available [in the Storybook](https://kit-data-manager.github.io/pid-component) and in
-the [source code](src/components/pid-component/readme.md).
+the [source code](packages/stencil-library/src/components/pid-component/readme.md).
 
 **Please notice that you must use the hyphenated version of an attribute when using the component directly in HTML (
 e.g. `currentLevelOfSubcomponents` -> `current-level-of-subcomponents`).
 When using inside Stencil or with JSX/TSX syntax, you must use the camelCase version.**
 
+## Monorepo
+
+This is a monorepo containing the following packages:
+
+ - stencil-library (@kit-data-manager/pid-component)
+ - react-library (@kit-data-manager/react-pid-component)
+
+[Lerna](https://lerna.js.org) is used for managing and building the packages (but you can also do it manually). To use, install Lerna:
+
+    npm install --global lerna
+
+and then use it to build the packages:
+
+    lerna run build
+
+It will make sure to build the packages in the correct order.
+
 ## How to run when developing
 
 1. Clone the repo
 2. Run `npm install`
 
-For running storybook in dev mode, run these commands in separate terminals:
+For running storybook in dev mode, navigate to `packages/stencil-library` and run these commands in separate terminals:
 
 - `npm run buildWatch`
 - `npm run storybook`
 
 Attention: Do **NOT** run `npm run start`. It will cause the storybook to not work properly.
-If you did run `npm run start`, delete the following folders and run `npm install` again:
+If you did run `npm run start`, delete the following folders (in `packages/stencil-library`) and run `npm install` again:
 
 - `node_modules`
 - `www`

lerna.json

@@ -0,0 +1,4 @@
+{
+  "$schema": "node_modules/lerna/schemas/lerna-schema.json",
+  "version": "independent"
+}