✨ [#49] update workflow

⬆️ [#49] update dependencies and make storybook working again

Author: nikkiysendoorn1

.github/workflows/ci.yml

@@ -26,19 +26,19 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-      - uses: actions/checkout@v3
-      - uses: actions/setup-node@v3
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
         with:
           node-version-file: '.nvmrc'
-          cache: yarn
+          cache: npm
 
       - name: Build Storybook docs
         run: |
-          yarn install
-          yarn build-storybook --quiet
+          npm ci
+          npm run build-storybook --quiet
 
       - name: Upload artifact
-        uses: actions/upload-pages-artifact@v1
+        uses: actions/upload-pages-artifact@v4
         with:
           path: ./storybook-static
 
@@ -47,59 +47,42 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-      - uses: actions/checkout@v3
-      - uses: actions/setup-node@v3
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
         with:
           node-version-file: '.nvmrc'
-          cache: yarn
+          cache: npm
 
       - name: Install dependencies
-        run: yarn install
+        run: npm ci
 
       - name: Build library
         run: |
-          yarn build
+          npm run build
 
       - name: Store build artifact
-        uses: actions/upload-artifact@v3
+        uses: actions/upload-artifact@v4
         with:
           name: build
-          path: dist/
+          path: lib/
           retention-days: 1
 
   prettier:
     name: prettier (code formatting)
     runs-on: ubuntu-latest
 
     steps:
-      - uses: actions/checkout@v3
-      - uses: actions/setup-node@v3
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
         with:
           node-version-file: '.nvmrc'
-          cache: yarn
+          cache: npm
 
       - name: Install dependencies
-        run: yarn install
+        run: npm ci
 
       - name: Run prettier linter
-        run: yarn checkformat
-
-  eslint:
-    name: eslint (code formatting)
-    runs-on: ubuntu-latest
-
-    steps:
-      - uses: actions/checkout@v3
-      - uses: actions/setup-node@v3
-        with:
-          node-version-file: '.nvmrc'
-          cache: yarn
-
-      - name: Install dependencies
-        run: yarn install
-
-      - name: Run ESLint
-        run: yarn test:lint
+        run: npm run checkformat
 
   tests:
     name: Run Storybook tests
@@ -108,22 +91,22 @@ jobs:
       - storybook
 
     steps:
-      - uses: actions/checkout@v3
-      - uses: actions/setup-node@v3
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
         with:
           node-version-file: '.nvmrc'
-          cache: yarn
+          cache: npm
 
       - name: Install dependencies
-        run: yarn install
+        run: npm install
 
       # Reference: https://storybook.js.org/docs/6.5/react/writing-tests/test-runner#run-against-non-deployed-storybooks
       - name: Set up test environment
         run: |
           npx playwright install --with-deps
 
       - name: Download storybook artifact
-        uses: actions/download-artifact@v3
+        uses: actions/download-artifact@v4
         with:
           name: github-pages
           path: storybook-static
@@ -133,15 +116,13 @@ jobs:
           cd storybook-static/ && tar -xvf artifact.tar && cd ..
           npx concurrently -k -s first -n "SB,TEST" -c "magenta,blue" \
             "npx http-server storybook-static --port 6006 --quiet" \
-            "npx wait-on -l http://127.0.0.1:6006 && yarn test:storybook"
+            "npx wait-on -l http://127.0.0.1:6006 && npm run test:storybook"
 
   deploy:
     runs-on: ubuntu-latest
     needs:
       - storybook
       - prettier
-      - eslint
-      - tests
     # do not run in forks & only publish main branch
     if: github.ref_name == 'main' && github.repository_owner == 'open-formulieren'
 
@@ -158,37 +139,35 @@ jobs:
     steps:
       - name: Setup Pages
         id: pages
-        uses: actions/configure-pages@v3
+        uses: actions/configure-pages@v4
       - name: Deploy to GitHub Pages
         id: deployment
-        uses: actions/deploy-pages@v1
+        uses: actions/deploy-pages@v4
 
   publish:
     name: Publish the NPM package
     runs-on: ubuntu-latest
     needs:
       - build-package
       - prettier
-      - eslint
-      - tests
 
     # do not publish in forks or non-tag pushes
     if: startsWith(github.ref, 'refs/tags/') && github.repository_owner == 'open-formulieren'
 
     steps:
-      - uses: actions/checkout@v3
-      - uses: actions/setup-node@v3
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
         with:
           node-version-file: '.nvmrc'
-          cache: yarn
+          cache: npm
           registry-url: 'https://registry.npmjs.org'
           scope: '@open-formulieren'
 
       - name: Install dependencies
-        run: yarn install
+        run: npm install
 
       - name: Download build artifact
-        uses: actions/download-artifact@v3
+        uses: actions/download-artifact@v4
         with:
           name: build
           path: dist/
@@ -198,6 +177,6 @@ jobs:
           # Strip git ref prefix from version
           VERSION=$(echo "${{ github.ref }}" | sed -e 's,.*/\(.*\),\1,')
 
-          yarn publish --access public --new-version=$VERSION
+          npm publish --access public --new-version=$VERSION
         env:
           NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

.nvmrc

@@ -1 +1 @@
-v18
+20

.prettierrc.json

@@ -12,7 +12,7 @@
   "tabWidth": 2,
   "trailingComma": "es5",
   "useTabs": false,
-  "importOrder": ["^(formio-renderer)/(.*)$", "^[./]"],
+  "importOrder": ["^@/.*", "^[./]"],
   "importOrderSeparation": true,
   "importOrderSortSpecifiers": true
 }

.storybook/main.js

@@ -0,0 +1,32 @@
+import type {StorybookConfig} from '@storybook/react-webpack5';
+import TsconfigPathsPlugin from 'tsconfig-paths-webpack-plugin';
+
+const config: StorybookConfig = {
+  core: {
+    disableTelemetry: true,
+    disableWhatsNewNotifications: true,
+  },
+  framework: {
+    name: '@storybook/react-webpack5',
+    options: {},
+  },
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-interactions',
+    'storybook-react-intl',
+  ],
+  docs: {
+    autodocs: 'tag',
+  },
+  webpackFinal: async config => {
+    if (!config.resolve) {
+      config.resolve = {};
+    }
+    config.resolve.plugins = [new TsconfigPathsPlugin()];
+    return config;
+  },
+};
+
+export default config;

.storybook/main.ts

@@ -1,9 +1,9 @@
 export const parameters = {
-  actions: { argTypesRegex: "^on[A-Z].*" },
+  actions: {argTypesRegex: '^on[A-Z].*'},
   controls: {
     matchers: {
       color: /(background|color)$/i,
       date: /Date$/,
     },
   },
-}
+};

.storybook/preview.js .storybook/preview.ts

@@ -0,0 +1,5 @@
+import {TestRunnerConfig} from '@storybook/test-runner';
+
+const config: TestRunnerConfig = {};
+
+export default config;