migrate to pnpm and full esm

.github/workflows/gh-pages-preview.yaml

@@ -12,10 +12,10 @@ jobs:
             group: ${{ github.workflow }}-${{ github.ref }}
         steps:
             - name: ⬇️ Checkout repo
-              uses: actions/checkout@v3
+              uses: actions/checkout@v4
 
             - name: ⎔ Setup node
-              uses: actions/setup-node@v3
+              uses: actions/setup-node@v4
               with:
                   node-version: 20
 

.github/workflows/gh-pages.yaml

@@ -17,10 +17,10 @@ jobs:
             group: ${{ github.workflow }}-${{ github.ref }}
         steps:
             - name: ⬇️ Checkout repo
-              uses: actions/checkout@v3
+              uses: actions/checkout@v4
 
             - name: ⎔ Setup node
-              uses: actions/setup-node@v3
+              uses: actions/setup-node@v4
               with:
                   node-version: 20
 

.github/workflows/main-ci.yaml

@@ -12,9 +12,9 @@ jobs:
         runs-on: ubuntu-latest
         steps:
             - name: ⬇️ Checkout repo
-              uses: actions/checkout@v3
+              uses: actions/checkout@v4
 
-            - uses: actionsx/prettier@v2
+            - uses: actionsx/prettier@v3
               with:
                   # prettier CLI arguments.
                   args: --check .
@@ -31,26 +31,31 @@ jobs:
             TURBO_TEAM: ${{ secrets.TURBO_TEAM }}
         steps:
             - name: 🛑 Cancel Previous Runs
-              uses: styfle/cancel-workflow-action@0.9.1
+              uses: styfle/cancel-workflow-action@0.12.1
 
             - name: ⬇️ Checkout repo
-              uses: actions/checkout@v3
+              uses: actions/checkout@v4
 
             - name: ⎔ Setup node
-              uses: actions/setup-node@v3
+              uses: actions/setup-node@v4
               with:
                   node-version: ${{ matrix.node }}
 
+            - name: ⎔ Set up pnpm
+              uses: pnpm/action-setup@v4
+              with:
+                  version: 9.4.0
+
             - name: 📥 Download deps
               run: |
                   echo ::group::..:: Mono Repo Tests ::..
-                  yarn
+                  pnpm install
                   echo ::endgroup::
 
             - name: 🏄 Run the tests
               run: |
                   echo ::group::..:: Mono Repo Tests ::..
-                  yarn test
+                  pnpm run test
                   echo ::endgroup::
 
     builds:
@@ -65,20 +70,20 @@ jobs:
             TURBO_TEAM: ${{ secrets.TURBO_TEAM }}
         steps:
             - name: 🛑 Cancel Previous Runs
-              uses: styfle/cancel-workflow-action@0.9.1
+              uses: styfle/cancel-workflow-action@0.12.1
 
             - name: ⬇️ Checkout repo
-              uses: actions/checkout@v3
+              uses: actions/checkout@v4
 
             - name: ⎔ Setup node
-              uses: actions/setup-node@v3
+              uses: actions/setup-node@v4
               with:
                   node-version: ${{ matrix.node }}
 
             - name: 📥 Download deps and builds folder by folder
               run: |
                   rm -f package.json
-                  rm -f yarn.lock
+                  rm -f pnpm-lock.yaml
                   rm -rf node_modules
                   for COMPONENT in `ls components`; do
                       if [ -d "components/${COMPONENT}" ]; then
@@ -94,18 +99,18 @@ jobs:
         needs: [lint, test, builds]
         steps:
             - name: 🛑 Cancel Previous Runs
-              uses: styfle/[email protected]
+              uses: styfle/[email protected]
+
+            - name: ⬇️ Checkout repo
+              uses: actions/checkout@v4
 
             - name: ⎔ Setup node
-              uses: actions/setup-node@v3
+              uses: actions/setup-node@v4
               with:
                   node-version: 20
 
-            - name: ⬇️ Checkout repo
-              uses: actions/checkout@v3
-
             - name: 📥 Download deps
-              run: yarn install && yarn build
+              run: pnpm install && pnpm run build
 
             - name: 🚀 Sync it!
               env:

Makefile

@@ -25,28 +25,20 @@ clean: ## Clean non-essential files
 			rm -rf components/$${COMPONENT}/dist; \
 			rm -rf components/$${COMPONENT}/build; \
 			rm -f components/$${COMPONENT}/yarn.lock; \
+			rm -f components/$${COMPONENT}/pnpm-lock.yaml; \
 		fi; \
 	done
 
 .PHONY: codeclean
 codeclean: ## Code Clean
-	@yarn prettier --write .
+	@pnpm prettier --write .
 
 .PHONY: tests
 tests: ## Run the tests
 	@echo " ..:: Mono Repo Testing ::.."
 	@yarn test
 	@yarn prettier --check .
 
-.PHONY: bump
-bump: ## Bump all components
-	@for COMPONENT in $(shell ls components); do \
-		if [ -d "components/$${COMPONENT}" ]; then \
-			echo " ..:: Bumping $${COMPONENT} ::.."; \
-			cd components/$${COMPONENT} && yarn bump $(VERSION) && cd - ;\
-		fi; \
-	done
-
 .PHONY: add-component
 add-component: ## Create an empty structure for a new Component
 	@mkdir -p components/$(COMPONENT)

apps/demo/.eslintrc.cjs

@@ -0,0 +1,11 @@
+module.exports = {
+    root: true,
+    env: { browser: true, es2020: true },
+    extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'plugin:react-hooks/recommended'],
+    ignorePatterns: ['dist', '.eslintrc.cjs'],
+    parser: '@typescript-eslint/parser',
+    plugins: ['react-refresh'],
+    rules: {
+        'react-refresh/only-export-components': ['warn', { allowConstantExport: true }],
+    },
+};

apps/demo/.gitignore

@@ -1,26 +1,24 @@
-# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
-
-# dependencies
-/node_modules
-/.pnp
-.pnp.js
-
-# testing
-/coverage
-
-# production
-/build
-
-# misc
-.DS_Store
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
-
+# Logs
+logs
+*.log
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
 
-# we don't want the lock file for this one
-package-lock.json
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

apps/demo/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>Crystallize Libraries Demo App</title>
+    </head>
+    <body>
+        <div id="root"></div>
+        <script type="module" src="/src/main.tsx"></script>
+    </body>
+</html>

apps/demo/package.json

@@ -1,55 +1,38 @@
 {
-    "name": "@crystallize/demo",
-    "version": "0.1.0",
+    "name": "@crystallize/demo-app",
     "private": true,
-    "homepage": ".",
-    "dependencies": {
-        "@crystallize/js-api-client": "*",
-        "@crystallize/reactjs-components": "*",
-        "@crystallize/reactjs-hooks": "*",
-        "@rehooks/local-storage": "^2.4.4",
-        "@types/node": "^16.11.26",
-        "@types/react": "^17.0.43",
-        "@types/react-dom": "^17.0.14",
-        "bootstrap": "^5.1.3",
-        "react": "^18",
-        "react-bootstrap": "^2.3.1",
-        "react-dom": "^18",
-        "react-icons": "^4.3.1",
-        "react-router-dom": "^6.2.2",
-        "react-scripts": "5.0.0",
-        "react-syntax-highlighter": "^15.5.0",
-        "sass": "^1.49.9",
-        "typescript": "^4.6.3"
-    },
+    "version": "0.0.0",
+    "type": "module",
     "scripts": {
-        "start": "react-scripts start",
-        "build": "react-scripts build; cp build/index.html build/404.html"
-    },
-    "eslintConfig": {
-        "extends": [
-            "react-app"
-        ]
+        "start": "vite",
+        "build": "tsc -b && vite build",
+        "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+        "preview": "vite preview"
     },
-    "browserslist": {
-        "production": [
-            ">0.2%",
-            "not dead",
-            "not op_mini all"
-        ],
-        "development": [
-            "last 1 chrome version",
-            "last 1 firefox version",
-            "last 1 safari version"
-        ]
-    },
-    "overrides": {
-        "autoprefixer": "10.4.5"
+    "dependencies": {
+        "react": "^18.3.1",
+        "react-dom": "^18.3.1",
+        "@crystallize/js-api-client": "workspace:*",
+        "@crystallize/reactjs-components": "workspace:*",
+        "@crystallize/reactjs-hooks": "workspace:*",
+        "@rehooks/local-storage": "^2.4.5",
+        "bootstrap": "^5.3.3",
+        "react-icons": "^4.3.1",
+        "react-bootstrap": "^2.10.4",
+        "react-router-dom": "^6.24.0",
+        "react-syntax-highlighter": "^15.5.0"
     },
     "devDependencies": {
-        "@types/react": "^18",
-        "@types/react-dom": "^18",
-        "@types/react-syntax-highlighter": "^13.5.2",
-        "postcss": "^8.4.12"
+        "@types/react": "^18.3.3",
+        "@types/react-dom": "^18.3.0",
+        "@typescript-eslint/eslint-plugin": "^7.13.1",
+        "@typescript-eslint/parser": "^7.13.1",
+        "@vitejs/plugin-react": "^4.3.1",
+        "eslint": "^8.57.0",
+        "eslint-plugin-react-hooks": "^4.6.2",
+        "eslint-plugin-react-refresh": "^0.4.7",
+        "@types/react-syntax-highlighter": "^15.5.13",
+        "typescript": "^5.2.2",
+        "vite": "^5.3.1"
     }
 }

apps/demo/src/css/app.scss

@@ -1,4 +1,4 @@
-@import '~bootstrap/scss/bootstrap';
+@import 'node_modules/bootstrap/scss/bootstrap';
 @import './variables.scss';
 @import './layout';
 

apps/demo/src/index.tsx → apps/demo/src/main.tsx

@@ -1,19 +1,16 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import ReactDOM from 'react-dom/client';
 import './css/app.scss';
 import App from './App';
 import { BrowserRouter } from 'react-router-dom';
 import { IconContext } from 'react-icons';
 
-console.log(process.env.REACT_APP_BASENAME || 'libraries');
-
-ReactDOM.render(
+ReactDOM.createRoot(document.getElementById('root')!).render(
     <React.StrictMode>
-        <BrowserRouter basename={process.env.REACT_APP_BASENAME || 'libraries'}>
+        <BrowserRouter basename={'libraries'}>
             <IconContext.Provider value={{ className: 'r-icon' }}>
                 <App />
             </IconContext.Provider>
         </BrowserRouter>
     </React.StrictMode>,
-    document.getElementById('root'),
 );

apps/demo/src/routes/reactjs-components/grid.tsx

@@ -2,10 +2,10 @@ import { useCrystallize } from '@crystallize/reactjs-hooks';
 import { catalogueFetcherGraphqlBuilder } from '@crystallize/js-api-client';
 import { Image } from '@crystallize/reactjs-components';
 import { GridRenderer, GridRenderingType } from '@crystallize/reactjs-components';
-import { FC, useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { Code } from '../../components/Code';
 
-export const CrystallizeGrid: FC = () => {
+export const CrystallizeGrid = () => {
     const { state, helpers } = useCrystallize();
     const [grid, setGrid] = useState<any>(null);
     useEffect(() => {
@@ -92,7 +92,7 @@ export const CrystallizeGrid: FC = () => {
     );
 };
 
-const Cell: FC<{ cell: any }> = ({ cell }) => {
+const Cell = ({ cell }: { cell: any }) => {
     if (!cell.item) {
         return null;
     }