New release

.github/workflows/deploy-storybook.yml

@@ -6,29 +6,30 @@ on:
 
 jobs:
   build-component:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout
-        uses: actions/[email protected]
-
-      - name: Build
-        run: npm ci
-
-  deploy-storybook:
     runs-on: ubuntu-latest
     permissions:
       contents: read
       pages: write
       id-token: write
-
     steps:
-      - name: Checkout
-        uses: actions/[email protected]
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+      - name: npm ci
+        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: "packages/stencil-library/storybook-static"
 
-      - name: Deploy Storybook to GitHub Pages
-        uses: bitovi/github-actions-storybook-to-github-pages@v1.0.3
+      - name: Deploy to GitHub Pages
+        uses: actions/deploy-pages@v4
         with:
-          path: storybook-static
-          build_command: |
-            npm run build
-            npm run build-storybook
+          token: ${{ github.token }}

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

@@ -11,10 +11,10 @@ jobs:
   build:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v4.1.7
+      - uses: actions/checkout@v4
       - uses: actions/setup-node@v4
         with:
-          node-version: 16
+          node-version: 20
       - run: npm ci
 
   publish-gpr:
@@ -24,12 +24,13 @@ jobs:
       contents: read
       packages: write
     steps:
-      - uses: actions/checkout@v4.1.7
+      - uses: actions/checkout@v4
       - uses: actions/setup-node@v4
         with:
-          node-version: 16
+          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

@@ -19,3 +19,4 @@ jobs:
         with:
           node-version: ${{ matrix.node }}
       - run: npm ci
+      - run: npx lerna run build

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

@@ -8,13 +8,13 @@ jobs:
   publish-npm:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v4.1.7
+      - uses: actions/checkout@v4
       - uses: actions/setup-node@v4
         with:
-          node-version: 19
+          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

.prettierignore

@@ -1,7 +1,9 @@
 # Ignore artifacts:
-.stencil
-.storybook
-dist
-loader
-node_modules
-www
+/src/index.html
+/www/
+/node_modules/
+/dist/
+/loader/
+/.storybook/
+/.stencil/
+/storybook-static/

CODE_OF_CONDUCT.md

@@ -3,7 +3,7 @@
 ## Our Pledge
 
 In the interest of fostering an open and welcoming environment, we as
-contributors and maintainers pledge to making participation in our project and
+contributors and maintainers pledge to make participation in our project and
 our community a harassment-free experience for everyone, regardless of age, body
 size, disability, ethnicity, gender identity and expression, level of experience,
 education, socio-economic status, nationality, personal appearance, race,
@@ -14,21 +14,21 @@ religion, or sexual identity and orientation.
 Examples of behavior that contributes to creating a positive environment
 include:
 
-* Using welcoming and inclusive language
-* Being respectful of differing viewpoints and experiences
-* Gracefully accepting constructive criticism
-* Focusing on what is best for the community
-* Showing empathy towards other community members
+- Using welcoming and inclusive language
+- Being respectful of differing viewpoints and experiences
+- Gracefully accepting constructive criticism
+- Focusing on what is best for the community
+- Showing empathy towards other community members
 
 Examples of unacceptable behavior by participants include:
 
-* The use of sexualized language or imagery and unwelcome sexual attention or
+- The use of sexualized language or imagery and unwelcome sexual attention or
   advances
-* Trolling, insulting/derogatory comments, and personal or political attacks
-* Public or private harassment
-* Publishing others' private information, such as a physical or electronic
+- Trolling, insulting/derogatory comments, and personal or political attacks
+- Public or private harassment
+- Publishing others' private information, such as a physical or electronic
   address, without explicit permission
-* Other conduct which could reasonably be considered inappropriate in a
+- Other conduct which could reasonably be considered inappropriate in a
   professional setting
 
 ## Our Responsibilities
@@ -56,8 +56,8 @@ further defined and clarified by project maintainers.
 
 Instances of abusive, harassing, or otherwise unacceptable behavior may be
 reported by contacting the project team at {{ email }}. All
-complaints will be reviewed and investigated and will result in a response that
-is deemed necessary and appropriate to the circumstances. The project team is
+complaints will be reviewed and investigated and will result in a response deemed necessary and appropriate to the
+circumstances. The project team is
 obligated to maintain confidentiality with regard to the reporter of an incident.
 Further details of specific enforcement policies may be posted separately.
 

CONTRIBUTING.md

@@ -8,7 +8,8 @@ Please note we have a code of conduct, please follow it in all your interactions
 ## Pull Request Process
 
 1. Ensure any install or build dependencies are removed before the end of the layer when doing a build.
-2. State in the Pull Request details of changes to the interface, this includes new environment variables, exposed ports, useful file locations and container parameters.
+2. State in the Pull Request details of changes to the interface, this includes new environment variables, exposed
+   ports, useful file locations and container parameters.
 3. Pull Requests are merged after successful review of at least one of the project owners.
 
 ## Code of Conduct
@@ -81,4 +82,5 @@ This Code of Conduct is adapted from the [Contributor Covenant][homepage], versi
 available at [http://contributor-covenant.org/version/1/4][version]
 
 [homepage]: http://contributor-covenant.org
+
 [version]: http://contributor-covenant.org/version/1/4/

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.
@@ -14,12 +16,12 @@ By default, it is set to 1, which means that it will only render the first level
 You can prohibit unfolding of the component by setting the `current-level-of-subcomponents` to the same value as
 the `level-of-subcomponents` property.
 
-To use the component, import the [npm-package](https://www.npmjs.com/package/@kit-data-manager/pid-component) via [unpkg](https://unpkg.com/):
+To use the component, import the [npm-package](https://www.npmjs.com/package/@kit-data-manager/pid-component)
+via [unpkg](https://unpkg.com/):
 
 ```html
-
 <head>
-  <script type='module' src='https://unpkg.com/@kit-data-manager/pid-component'></script>
+  <script type="module" src="https://unpkg.com/@kit-data-manager/pid-component"></script>
 </head>
 ```
 
@@ -33,7 +35,7 @@ Then, you can use this component like this:
 
 ```html
 
-<pid-component value='21.T11981/be908bd1-e049-4d35-975e-8e27d40117e6'></pid-component>
+<pid-component value="21.T11981/be908bd1-e049-4d35-975e-8e27d40117e6"></pid-component>
 ```
 
 You can try this web component in the [demo](https://kit-data-manager.github.io/pid-component).
@@ -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"
+}