build: bump Storybook to v8

Author: matijs

.ncurc.major.cjs

@@ -2,6 +2,6 @@ const minorConfig = require('./.ncurc.minor.cjs');
 
 module.exports = {
   ...minorConfig,
-  reject: [...minorConfig.reject, 'storybook', '@storybook/*', 'eslint'],
+  reject: [...minorConfig.reject, 'eslint'],
   target: 'latest',
 };

packages/storybook/config/ParametersArgsDecorator.tsx

@@ -0,0 +1,11 @@
+import type { Decorator } from '@storybook/react';
+
+export const ParametersArgsDecorator: Decorator = (Story, context) => {
+  context.parameters['args'] = context.args;
+
+  return (
+    <div className="example-theme">
+      <Story />
+    </div>
+  );
+};

packages/storybook/config/main.ts

@@ -0,0 +1,20 @@
+import type { StorybookConfig } from '@storybook/react-vite';
+
+const config: StorybookConfig = {
+  stories: ['../src/**/*stories.@(js|jsx|ts|tsx)', '../src/**/*.mdx'],
+  addons: ['@storybook/addon-a11y', '@storybook/addon-docs', '@storybook/addon-viewport'],
+  framework: {
+    name: '@storybook/react-vite',
+    options: {},
+  },
+  core: {
+    disableTelemetry: true,
+    disableWhatsNewNotifications: true,
+  },
+  docs: {
+    autodocs: 'tag',
+  },
+  staticDirs: ['../../../proprietary/assets/src'],
+};
+
+export default config;

packages/storybook/config/main.tsx

@@ -0,0 +1,17 @@
+import '@example/design-tokens/dist/index.css';
+import '@example/font/src/index.scss';
+import { defineCustomElements } from '@example/web-components-stencil/loader/index.js';
+import type { Preview } from '@storybook/react';
+import { ParametersArgsDecorator } from './ParametersArgsDecorator';
+
+defineCustomElements();
+
+const preview: Preview = {
+  parameters: {
+    controls: { expanded: false },
+    options: { panelPosition: 'right' },
+  },
+  decorators: [ParametersArgsDecorator],
+};
+
+export default preview;

packages/storybook/config/preview.ts

@@ -19,45 +19,27 @@
     "storybook": "storybook dev --config-dir config/ --port 6006"
   },
   "devDependencies": {
-    "@babel/core": "7.24.4",
-    "@babel/preset-env": "7.24.4",
-    "@babel/preset-react": "7.24.1",
-    "@babel/preset-typescript": "7.24.1",
-    "@etchteam/storybook-addon-status": "4.2.4",
     "@example/assets": "workspace:*",
     "@example/components-css": "workspace:*",
     "@example/design-tokens": "workspace:*",
     "@example/font": "workspace:*",
     "@example/web-components-react": "workspace:*",
     "@example/web-components-stencil": "workspace:*",
-    "@storybook/addon-a11y": "7.6.17",
-    "@storybook/addon-actions": "7.6.17",
-    "@storybook/addon-docs": "7.6.17",
-    "@storybook/addon-interactions": "7.6.17",
-    "@storybook/addon-links": "7.6.17",
-    "@storybook/addon-viewport": "7.6.17",
-    "@storybook/preset-scss": "1.0.3",
-    "@storybook/react": "7.6.17",
-    "@storybook/react-vite": "7.6.17",
-    "@storybook/react-webpack5": "7.6.17",
-    "@storybook/testing-library": "0.2.2",
+    "@storybook/addon-a11y": "8.0.9",
+    "@storybook/addon-actions": "8.0.9",
+    "@storybook/addon-docs": "8.0.9",
+    "@storybook/addon-interactions": "8.0.9",
+    "@storybook/addon-links": "8.0.9",
+    "@storybook/addon-viewport": "8.0.9",
+    "@storybook/react": "8.0.9",
+    "@storybook/react-vite": "8.0.9",
     "@types/react": "18.2.75",
     "@types/react-dom": "18.2.24",
-    "@vitejs/plugin-react": "4.2.1",
-    "babel-loader": "9.1.3",
-    "css-loader": "7.1.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "require-from-string": "2.0.2",
     "rimraf": "5.0.5",
-    "sass": "1.74.1",
-    "sass-loader": "14.1.1",
-    "storybook": "7.6.17",
-    "style-loader": "4.0.0",
+    "storybook": "8.0.9",
     "typescript": "5.4.4",
-    "vite": "5.2.8",
-    "vite-plugin-html": "3.2.2",
-    "vite-plugin-markdown": "2.2.0",
-    "webpack": "5.91.0"
+    "vite": "5.2.10"
   }
 }

packages/storybook/config/preview.tsx

@@ -5,6 +5,6 @@
     "skipLibCheck": true
   },
   "extends": "../../tsconfig.json",
-  "include": ["config/**/*.ts", "config/**/*.tsx", "src/**/*.ts", "src/**/*.tsx", "vite.config.ts"],
+  "include": ["config/**/*.ts", "config/**/*.tsx", "src/**/*.ts", "src/**/*.tsx"],
   "exclude": ["**/node_modules/*"]
 }