Merge pull request #67 from /issues/64-upgrade-to-storybook-7.3.2

Issues/64 upgrade to storybook 7.3.2

.babelrc.json

@@ -0,0 +1,17 @@
+{
+  "sourceType": "unambiguous",
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "targets": {
+          "chrome": 100,
+          "safari": 15,
+          "firefox": 91
+        }
+      }
+    ],
+    "@babel/preset-react"
+  ],
+  "plugins": []
+}

.github/workflows/chromatic.yml

@@ -11,14 +11,10 @@ jobs:
     # The list of steps that the action will go through
     steps:
       - uses: actions/checkout@v1
-      - name: Use Node.js 18.17.0
-        uses: actions/setup-node@v1
-        with:
-          node-version: 18.17.0
-      - run: yarn
-        #👇 Adds Chromatic as a step in the workflow
-      - uses: chromaui/action@v1
-        # Options required for Chromatic's GitHub Action
+      - name: Install dependencies
+        run: npm install
+      - name: Publish to Chromatic
+        uses: chromaui/action@v1
         with:
           #👇 Chromatic projectToken, see https://storybook.js.org/tutorials/design-systems-for-developers/react/en/review/ to obtain it
           projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}

.github/workflows/push.yml

@@ -12,7 +12,7 @@ jobs:
     # The operating system it will run on
     runs-on: ubuntu-latest
     # This check needs to be in place to prevent a publish loop with auto and github actions
-    if: "!contains(github.event.head_commit.message, 'ci skip') && !contains(github.event.head_commit.message, 'skip ci')"
+    if: '!contains(github.event.head_commit.message, "ci skip") && !contains(github.event.head_commit.message, "skip ci")'
     # The list of steps that the action will go through
     steps:
       - uses: actions/checkout@v2
@@ -26,15 +26,17 @@ jobs:
         uses: actions/cache@v1
         with:
           path: node_modules
-          key: yarn-deps-${{ hashFiles('yarn.lock') }}
+          # package-lock.json is used for npm ci
+          key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
           restore-keys: |
-            yarn-deps-${{ hashFiles('yarn.lock') }}
+            ${{ runner.os }}-node-
       - name: Create Release
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           #👇 npm token, see https://storybook.js.org/tutorials/design-systems-for-developers/react/en/distribute/ to obtain it
           NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
         run: |
-          yarn install --frozen-lockfile
-          yarn build
-          yarn release
+          npm install -g @storybook/cli
+          npm install
+          npm run build
+          npm run release

.storybook/main.js

@@ -1,37 +1,22 @@
-const path = require('path')
-
-module.exports = {
-  core: {
-    builder: 'webpack5'
-  },
-  stories: ['../src/**/*.stories.@(js|jsx|ts|tsx|mdx)'],
+/** @type { import('@storybook/react-vite').StorybookConfig } */
+const config = {
+  stories: [
+    '../src/stories/**/*.mdx',
+    '../src/stories/**/*.stories.@(js|jsx|mjs|ts|tsx)'
+  ],
   addons: [
-    {
-      name: '@storybook/addon-docs',
-      options: {
-        configureJSX: true,
-        babelOptions: {},
-        sourceLoaderOptions: null,
-        transcludeMarkdown: true
-      }
-    },
     '@storybook/addon-links',
     '@storybook/addon-essentials',
-    '@storybook/addon-interactions'
+    '@storybook/addon-onboarding',
+    '@storybook/addon-interactions',
+    '@storybook/addon-styling'
   ],
-  framework: '@storybook/react',
-  features: {
-    interactionsDebugger: true
+  framework: {
+    name: '@storybook/react-vite',
+    options: {}
   },
-  webpackFinal: async (config) => {
-    // Make whatever fine-grained changes you need
-    config.module.rules.push({
-      test: /\.scss$/,
-      use: ['style-loader', 'css-loader', 'sass-loader'],
-      include: path.resolve(__dirname, '../src')
-    })
-
-    // Return the altered config
-    return config
+  docs: {
+    autodocs: 'tag'
   }
 }
+export default config

.storybook/preview.js

@@ -1,9 +1,14 @@
-export const parameters = {
-  actions: { argTypesRegex: '^on[A-Z].*' },
-  controls: {
-    matchers: {
-      color: /(background|color)$/i,
-      date: /Date$/
+/** @type { import('@storybook/react').Preview } */
+const preview = {
+  parameters: {
+    actions: { argTypesRegex: '^on[A-Z].*' },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/
+      }
     }
   }
 }
+
+export default preview