Merge pull request #18519 from storybookjs/future/SB-444-examples

type all the things for examples main & frameworks and presets

docs/faq.md

@@ -16,8 +16,11 @@ module.exports = {
   addons: [
     /* ... */
   ],
-  angularOptions: {
-    enableIvy: false,
+  framework: {
+    name: '@storybook/angular',
+    options: {
+      enableIvy: false,
+    }
   },
 };
 ```
@@ -73,8 +76,11 @@ FAST_REFRESH=true
 
 ```js
 module.exports = {
-  reactOptions: {
-    fastRefresh: true,
+  framework: {
+    name: '@storybook/react-webpack5',
+    options: {
+      fastRefresh: true,
+    },
   },
 };
 ```
@@ -91,8 +97,11 @@ You can opt-out from the new React Root API by setting the following property in
 
 ```js
 module.exports = {
-  reactOptions: {
-    legacyRootApi: true,
+  framework: {
+    name: '@storybook/react-webpack5',
+    options: {
+      legacyRootApi: true,
+    },
   },
 };
 ```

docs/snippets/common/storybook-vite-builder-svelte-plugin.js.mdx

@@ -13,12 +13,15 @@ module.exports = {
     // Customize the Vite config here
     return config;
   },
-  svelteOptions: {
-    preprocess: preprocess({
-      typescript: true,
-      postcss: true,
-      sourceMap: true,
-    }),
+  framework:{
+    name: '@storybook/svelte-webpack5', 
+    options: {
+      preprocess: preprocess({
+        typescript: true,
+        postcss: true,
+        sourceMap: true,
+      }),
+    },
   },
 };
 ```

examples/angular-cli/.storybook/main.js → examples/angular-cli/.storybook/main.ts

@@ -1,4 +1,4 @@
-module.exports = {
+const mainConfig: import('@storybook/angular/types').StorybookConfig = {
   stories: ['../src/stories/**/*.stories.@(ts|tsx|js|jsx|mdx)'],
   logLevel: 'debug',
   addons: [
@@ -50,3 +50,4 @@ module.exports = {
     },
   },
 };
+module.exports = mainConfig;

examples/cra-kitchen-sink/.storybook/main.js → examples/cra-kitchen-sink/.storybook/main.ts

@@ -1,6 +1,8 @@
+import type { StorybookConfig } from '@storybook/react-webpack5/types';
+
 const path = require('path');
 
-module.exports = {
+const mainConfig: StorybookConfig = {
   stories: ['../src/stories/**/*.stories.@(ts|tsx|js|jsx|mdx)'],
   logLevel: 'debug',
   addons: [
@@ -17,13 +19,18 @@ module.exports = {
     '@storybook/addon-a11y',
     '@storybook/addon-jest',
   ],
+  // add monorepo root as a valid directory to import modules from
   webpackFinal: (config) => {
-    // add monorepo root as a valid directory to import modules from
-    config.resolve.plugins.forEach((p) => {
-      if (Array.isArray(p.appSrcs)) {
-        p.appSrcs.push(path.join(__dirname, '..', '..', '..'));
-      }
-    });
+    const resolvePlugins = config.resolve?.plugins;
+    if (Array.isArray(resolvePlugins)) {
+      resolvePlugins.forEach((p) => {
+        // @ts-ignore
+        const appSrcs = p.appSrcs as unknown as string[];
+        if (Array.isArray(appSrcs)) {
+          appSrcs.push(path.join(__dirname, '..', '..', '..'));
+        }
+      });
+    }
     return config;
   },
   core: {
@@ -40,3 +47,5 @@ module.exports = {
     options: { fastRefresh: true },
   },
 };
+
+module.exports = mainConfig;

examples/cra-ts-essentials/.storybook/main.ts

@@ -14,13 +14,18 @@ const mainConfig: StorybookConfig = {
     },
   ],
   logLevel: 'debug',
-  webpackFinal: async (config) => {
-    // add monorepo root as a valid directory to import modules from
-    config.resolve?.plugins?.forEach((p: any) => {
-      if (Array.isArray(p.appSrcs)) {
-        p.appSrcs.push(path.join(__dirname, '..', '..', '..'));
-      }
-    });
+  // add monorepo root as a valid directory to import modules from
+  webpackFinal: (config) => {
+    const resolvePlugins = config.resolve?.plugins;
+    if (Array.isArray(resolvePlugins)) {
+      resolvePlugins.forEach((p) => {
+        // @ts-ignore
+        const appSrcs = p.appSrcs as unknown as string[];
+        if (Array.isArray(appSrcs)) {
+          appSrcs.push(path.join(__dirname, '..', '..', '..'));
+        }
+      });
+    }
     return config;
   },
   core: {
@@ -34,4 +39,5 @@ const mainConfig: StorybookConfig = {
   },
   framework: '@storybook/react-webpack5',
 };
+
 module.exports = mainConfig;

examples/cra-ts-kitchen-sink/.storybook/main.ts

@@ -1,8 +1,8 @@
-import type { Configuration } from 'webpack';
+import type { StorybookConfig } from '@storybook/react-webpack5/types';
 
 const path = require('path');
 
-module.exports = {
+const mainConfig: StorybookConfig = {
   stories: ['../src/components', '../src/stories'],
   logLevel: 'debug',
   addons: [
@@ -14,15 +14,18 @@ module.exports = {
     './localAddon/manager.tsx',
     './localAddon/preset.ts',
   ],
-  webpackFinal: (config: Configuration) => {
-    // add monorepo root as a valid directory to import modules from
-    config.resolve.plugins.forEach((p) => {
-      // @ts-ignore
-      if (Array.isArray(p.appSrcs)) {
+  // add monorepo root as a valid directory to import modules from
+  webpackFinal: (config) => {
+    const resolvePlugins = config.resolve?.plugins;
+    if (Array.isArray(resolvePlugins)) {
+      resolvePlugins.forEach((p) => {
         // @ts-ignore
-        p.appSrcs.push(path.join(__dirname, '..', '..', '..'));
-      }
-    });
+        const appSrcs = p.appSrcs as unknown as string[];
+        if (Array.isArray(appSrcs)) {
+          appSrcs.push(path.join(__dirname, '..', '..', '..'));
+        }
+      });
+    }
     return config;
   },
   core: {
@@ -36,3 +39,5 @@ module.exports = {
   },
   framework: '@storybook/react-webpack5',
 };
+
+module.exports = mainConfig;

examples/html-kitchen-sink/.storybook/main.js → examples/html-kitchen-sink/.storybook/main.ts

@@ -1,4 +1,6 @@
-module.exports = {
+import type { StorybookConfig } from '@storybook/html-webpack5/types';
+
+const mainConfig: StorybookConfig = {
   // this dirname is because we run tests from project root
   stories: ['../stories/**/*.stories.@(ts|tsx|js|jsx|mdx)'],
   logLevel: 'debug',
@@ -41,3 +43,5 @@ module.exports = {
   // },
   framework: '@storybook/html-webpack5',
 };
+
+module.exports = mainConfig;

examples/preact-kitchen-sink/.storybook/main.js → examples/preact-kitchen-sink/.storybook/main.ts

@@ -1,6 +1,8 @@
+import type { StorybookConfig } from '@storybook/preact-webpack5/types';
+
 const path = require('path');
 
-module.exports = {
+const mainConfig: StorybookConfig = {
   stories: ['../src/stories/**/*.stories.@(ts|tsx|js|jsx|mdx)'],
   logLevel: 'debug',
   addons: [
@@ -13,12 +15,18 @@ module.exports = {
     '@storybook/addon-a11y',
   ],
   webpackFinal: (config) => {
-    config.module.rules.push({
+    const rules = config.module?.rules || [];
+    rules.push({
       test: [/\.stories\.js$/],
       use: [require.resolve('@storybook/source-loader')],
       include: [path.resolve(__dirname, '../src')],
       enforce: 'pre',
     });
+
+    // eslint-disable-next-line no-param-reassign
+    config.module = config.module || {};
+    // eslint-disable-next-line no-param-reassign
+    config.module.rules = rules;
     return config;
   },
   core: {
@@ -32,3 +40,5 @@ module.exports = {
   },
   framework: '@storybook/preact-webpack5',
 };
+
+module.exports = mainConfig;

examples/react-ts/.storybook/main.ts

@@ -44,12 +44,5 @@ const config: StorybookConfig = {
     breakingChangesV7: true,
   },
   framework: '@storybook/react-webpack5',
-  // core: (c: any = {}) => {
-  //   return {
-  //     channelOptions: { allowFunction: false, maxDepth: 10 },
-  //     disableTelemetry: true,
-  //     ...c,
-  //   };
-  // },
 };
 module.exports = config;

examples/server-kitchen-sink/.storybook/main.js → examples/server-kitchen-sink/.storybook/main.ts

@@ -1,4 +1,6 @@
-module.exports = {
+import type { StorybookConfig } from '@storybook/server-webpack5/types';
+
+const mainConfig: StorybookConfig = {
   stories: ['../stories/**/*.stories.@(json|yaml|yml)'],
   logLevel: 'debug',
   addons: [
@@ -17,3 +19,5 @@ module.exports = {
   },
   framework: '@storybook/server-webpack5',
 };
+
+module.exports = mainConfig;

examples/svelte-kitchen-sink/.storybook/main.js → examples/svelte-kitchen-sink/.storybook/main.ts

@@ -1,13 +1,9 @@
-const sveltePreprocess = require('svelte-preprocess');
-
 const path = require('path');
+const sveltePreprocess = require('svelte-preprocess');
 
-module.exports = {
+const mainConfig: import('@storybook/svelte-webpack5/types').StorybookConfig = {
   stories: ['../src/stories/**/*.stories.@(ts|tsx|js|jsx||mdx|svelte)'],
   logLevel: 'debug',
-  svelteOptions: {
-    preprocess: sveltePreprocess(),
-  },
   addons: [
     '@storybook/addon-storysource',
     '@storybook/addon-actions',
@@ -25,12 +21,19 @@ module.exports = {
     '@storybook/addon-a11y',
   ],
   webpackFinal: async (config) => {
-    config.module.rules.push({
+    const rules = config.module?.rules || [];
+    rules.push({
       test: [/\.stories\.js$/, /index\.js$/],
       use: [require.resolve('@storybook/source-loader')],
       include: [path.resolve(__dirname, '../src')],
       enforce: 'pre',
     });
+
+    // eslint-disable-next-line no-param-reassign
+    config.module = config.module || {};
+    // eslint-disable-next-line no-param-reassign
+    config.module.rules = rules;
+
     return config;
   },
   core: {
@@ -41,5 +44,12 @@ module.exports = {
   features: {
     breakingChangesV7: true,
   },
-  framework: '@storybook/svelte-webpack5',
+  framework: {
+    name: '@storybook/svelte-webpack5',
+    options: {
+      preprocess: sveltePreprocess(),
+    },
+  },
 };
+
+module.exports = mainConfig;

examples/svelte-kitchen-sink/tsconfig.json

@@ -5,7 +5,8 @@
     "module": "ES2020",
     "esModuleInterop": true,
     "skipLibCheck": true,
-    "strict": true
+    "strict": true,
+    "moduleResolution": "Node"
   },
   "include": [
     "src/*"

examples/vue-3-cli/.storybook/main.js → examples/vue-3-cli/.storybook/main.ts

@@ -1,4 +1,6 @@
-module.exports = {
+import type { StorybookConfig } from '@storybook/vue3-webpack5/types';
+
+const mainConfig: StorybookConfig = {
   stories: ['../src/**/*.stories.@(ts|tsx|js|jsx|mdx)'],
   addons: [
     '@storybook/addon-links',
@@ -7,9 +9,9 @@ module.exports = {
   ],
   core: {
     disableTelemetry: true,
-  },
-  features: {
     channelOptions: { allowFunction: false, maxDepth: 10 },
   },
   framework: '@storybook/vue3-webpack5',
 };
+
+module.exports = mainConfig;

examples/vue-cli/.storybook/main.js → examples/vue-cli/.storybook/main.ts

@@ -1,4 +1,6 @@
-module.exports = {
+import type { StorybookConfig } from '@storybook/vue-webpack5/types';
+
+const mainConfig: StorybookConfig = {
   stories: ['../src/**/*.stories.@(ts|tsx|js|jsx|mdx)'],
   logLevel: 'debug',
   addons: [
@@ -18,3 +20,5 @@ module.exports = {
   },
   framework: '@storybook/vue-webpack5',
 };
+
+module.exports = mainConfig;

examples/vue-kitchen-sink/.storybook/main.js → examples/vue-kitchen-sink/.storybook/main.ts

@@ -1,4 +1,6 @@
-module.exports = {
+import type { StorybookConfig } from '@storybook/vue-webpack5/types';
+
+const mainConfig: StorybookConfig = {
   stories: ['../src/stories/**/*.stories.@(ts|tsx|js|jsx|mdx)'],
   logLevel: 'debug',
   addons: [
@@ -17,8 +19,7 @@ module.exports = {
     disableTelemetry: true,
   },
   staticDirs: ['../public'],
-  features: {
-    channelOptions: { allowFunction: false, maxDepth: 10 },
-  },
   framework: '@storybook/vue-webpack5',
 };
+
+module.exports = mainConfig;

frameworks/angular/src/types.ts

@@ -8,7 +8,7 @@ import type {
   TypescriptOptions as TypescriptOptionsBuilder,
 } from '@storybook/builder-webpack5';
 
-type FrameworkName = '@storybook/react-webpack5';
+type FrameworkName = '@storybook/angular';
 type BuilderName = '@storybook/builder-webpack5';
 
 export type FrameworkOptions = AngularOptions & {

frameworks/angular/types.d.ts

@@ -0,0 +1 @@
+export * from './dist/types/index.d';

frameworks/html-webpack5/src/index.ts

@@ -1 +1,2 @@
 export * from '@storybook/html';
+export * from './types';

frameworks/html-webpack5/types.d.ts

@@ -0,0 +1 @@
+export * from './dist/types/index.d';