Merge pull request #2 from noclocks/feature/upgrade-storybook-7-to-8

Author: phoward38

.env.template

@@ -0,0 +1 @@
+BROWSER='chrome-beta'

.storybook/main.js

@@ -0,0 +1,36 @@
+import {StorybookConfig} from '@storybook/react-vite';
+
+const config: StorybookConfig = {
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-onboarding',
+    '@storybook/addon-interactions',
+  ],
+  framework: {
+    name: '@storybook/react-vite',
+    options: {},
+  },
+  // async viteFinal(config) {
+  //   // Add configuration here
+  //   return config;
+  // },
+  core: {
+    disableTelemetry: true,
+  },
+  docs: {
+    autodocs: 'tag',
+    defaultName: 'Documentation',
+  },
+  typescript: {
+    reactDocgen: 'react-docgen',
+    // reactDocgenTypescriptOptions: {
+    //   compilerOptions: {
+    //     allowSyntheticDefaultImports: false,
+    //     esModuleInterop: false,
+    //   },
+    // },
+  },
+};
+export default config;

.storybook/main.ts

@@ -0,0 +1,26 @@
+import {Preview} from '@storybook/react';
+
+const preview: Preview = {
+  parameters: {
+    // NOTE: From migration to Storybook 8 (from 7)
+    //     In Storybook you can write so-called play functions, which are used to render your stories interactively.   │
+    // │   Mocking action args in play functions was done implicitly by analyzing the argTypesRegex.                   │
+    // │                                                                                                               │
+    // │   Since Storybook 8, implicit action args mocking isn't supported anymore.                                    │
+    // │                                                                                                               │
+    // │   Use the following command to check for mocked action usages in your play functions:                         │
+    // │   npx storybook migrate find-implicit-spies --glob="**/*.stories.@(js|jsx|ts|tsx)"                            │
+    // │                                                                                                               │
+    // │   And follow the documentation to migrate your play functions:                                                │
+    // │   https://storybook.js.org/docs/8.0/essentials/actions#via-storybooktest-fn-spy-function
+    // actions: { argTypesRegex: "^on[A-Z].*" },
+    controls: {
+      matchers: {
+        // color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+};
+
+export default preview;

.storybook/preview.js

@@ -3,14 +3,16 @@
   "version": "1.0.0",
   "description": "",
   "main": "index.js",
+  "type": "module",
   "directories": {
     "doc": "docs",
     "test": "tests"
   },
   "scripts": {
     "preinstall": "pnpm dlx only-allow pnpm",
     "test": "echo \"Error: no test specified\" && exit 1",
-    "storybook": "storybook dev -p 6006",
+    "storybook-docs": "storybook dev --docs",
+    "storybook": "BROWSER=process.env.BROWSER storybook dev -p 6006 --disable-telemetry",
     "build-storybook": "storybook build"
   },
   "author": "Jimmy Briggs <[email protected]> (https://github.com/jimbrig)",
@@ -19,17 +21,19 @@
   ],
   "license": "Unlicense",
   "devDependencies": {
-    "@storybook/addon-essentials": "^7.6.17",
-    "@storybook/addon-interactions": "^7.6.17",
-    "@storybook/addon-links": "^7.6.17",
-    "@storybook/addon-onboarding": "^1.0.11",
-    "@storybook/blocks": "^7.6.17",
-    "@storybook/react": "^7.6.17",
-    "@storybook/react-vite": "^7.6.17",
-    "@storybook/test": "^7.6.17",
+    "@storybook/addon-essentials": "^8.0.4",
+    "@storybook/addon-interactions": "^8.0.4",
+    "@storybook/addon-links": "^8.0.4",
+    "@storybook/addon-onboarding": "^8.0.4",
+    "@storybook/blocks": "^8.0.4",
+    "@storybook/react": "^8.0.4",
+    "@storybook/react-vite": "^8.0.4",
+    "@storybook/test": "^8.0.4",
+    "cross-env": "^7.0.3",
+    "prettier": "^3.2.5",
     "prop-types": "^15.8.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "storybook": "^7.6.17"
+    "storybook": "^8.0.4"
   }
 }