Merge remote-tracking branch 'origin/next' into tom/sb-628-properly-document-maintenance-scripts

README.md

@@ -12,12 +12,6 @@
   <a href="https://circleci.com/gh/storybookjs/storybook">
     <img src="https://circleci.com/gh/storybookjs/storybook.svg?style=shield" alt="Build Status on CircleCI" />
   </a>
-  <a href="https://www.codefactor.io/repository/github/storybookjs/storybook">
-    <img src="https://www.codefactor.io/repository/github/storybookjs/storybook/badge" alt="CodeFactor" />
-  </a>
-  <a href="https://snyk.io/test/github/storybookjs/storybook">
-    <img src="https://snyk.io/test/github/storybookjs/storybook/badge.svg" alt="Known Vulnerabilities" />
-  </a>
   <a href="https://codecov.io/gh/storybookjs/storybook">
     <img src="https://codecov.io/gh/storybookjs/storybook/branch/main/graph/badge.svg" alt="codecov" />
   </a>

code/addons/storyshots/storyshots-core/tsconfig.json

@@ -1,7 +1,6 @@
 {
   "extends": "../../../tsconfig.json",
   "compilerOptions": {
-    "experimentalDecorators": true,
     "declaration": true,
     "jsx": "preserve",
     "skipLibCheck": true,

code/examples/vue-cli/tsconfig.json

@@ -6,7 +6,6 @@
     "jsx": "preserve",
     "importHelpers": true,
     "moduleResolution": "node",
-    "experimentalDecorators": true,
     "esModuleInterop": true,
     "allowSyntheticDefaultImports": true,
     "sourceMap": true,

code/frameworks/angular/tsconfig.json

@@ -5,6 +5,8 @@
     "target": "ES2020",
     "module": "CommonJS",
     "lib": ["es2020", "dom"],
+    "experimentalDecorators": true,
+    "emitDecoratorMetadata": true,
     "outDir": "dist",
     "types": ["node"],
     "skipLibCheck": true,

code/frameworks/react-vite/package.json

@@ -60,7 +60,7 @@
     "@storybook/client-api": "7.0.0-alpha.34",
     "@storybook/preview-web": "7.0.0-alpha.34",
     "@storybook/react": "7.0.0-alpha.34",
-    "@vitejs/plugin-react": "^2.0.1",
+    "@vitejs/plugin-react": "^2.0.0",
     "ast-types": "^0.14.2",
     "magic-string": "^0.26.1",
     "react-docgen": "^6.0.0-alpha.3",

code/frameworks/react-vite/src/preset.ts

@@ -1,7 +1,6 @@
 /* eslint-disable global-require */
-import path from 'path';
-import fs from 'fs';
 import type { StorybookConfig, TypescriptOptions } from '@storybook/builder-vite';
+import { hasPlugin, readPackageJson } from './utils';
 
 export const addons: StorybookConfig['addons'] = ['@storybook/react'];
 
@@ -9,25 +8,21 @@ export const core: StorybookConfig['core'] = {
   builder: '@storybook/builder-vite',
 };
 
-function readPackageJson(): Record<string, any> | false {
-  const packageJsonPath = path.resolve('package.json');
-  if (!fs.existsSync(packageJsonPath)) {
-    return false;
-  }
-
-  const jsonContent = fs.readFileSync(packageJsonPath, 'utf8');
-  return JSON.parse(jsonContent);
-}
-
 export const viteFinal: StorybookConfig['viteFinal'] = async (config, { presets }) => {
   const { plugins = [] } = config;
 
+  // Add react plugin if not present
+  if (!hasPlugin(plugins, 'vite:react-babel')) {
+    const { default: react } = await import('@vitejs/plugin-react');
+    plugins.push(react());
+  }
+
+  // Add docgen plugin
   const { reactDocgen, reactDocgenTypescriptOptions } = await presets.apply<any>(
     'typescript',
     {} as TypescriptOptions
   );
   let typescriptPresent;
-
   try {
     const pkgJson = readPackageJson();
     typescriptPresent =
@@ -35,7 +30,6 @@ export const viteFinal: StorybookConfig['viteFinal'] = async (config, { presets
   } catch (e) {
     typescriptPresent = false;
   }
-
   if (reactDocgen === 'react-docgen-typescript' && typescriptPresent) {
     plugins.push(
       require('@joshwooding/vite-plugin-react-docgen-typescript')(reactDocgenTypescriptOptions)

code/frameworks/react-vite/src/utils.ts

@@ -0,0 +1,28 @@
+import path from 'path';
+import fs from 'fs';
+import { PluginOption } from 'vite';
+
+export function readPackageJson(): Record<string, any> | false {
+  const packageJsonPath = path.resolve('package.json');
+  if (!fs.existsSync(packageJsonPath)) {
+    return false;
+  }
+
+  const jsonContent = fs.readFileSync(packageJsonPath, 'utf8');
+  return JSON.parse(jsonContent);
+}
+
+function checkName(plugin: PluginOption, name: string) {
+  return typeof plugin === 'object' && 'name' in plugin && plugin.name === name;
+}
+
+export function hasPlugin(plugins: PluginOption[], name: string) {
+  return Boolean(
+    plugins.find((p): boolean => {
+      if (Array.isArray(p)) {
+        return Boolean(hasPlugin(p, name));
+      }
+      return checkName(p, name);
+    })
+  );
+}

code/frameworks/svelte-vite/src/preset.ts

@@ -1,4 +1,5 @@
 import type { StorybookConfig } from '@storybook/builder-vite';
+import { hasPlugin } from './utils';
 import { svelteDocgen } from './plugins/svelte-docgen';
 
 export const addons: StorybookConfig['addons'] = ['@storybook/svelte'];
@@ -10,6 +11,13 @@ export const core: StorybookConfig['core'] = {
 export const viteFinal: StorybookConfig['viteFinal'] = async (config, { presets }) => {
   const { plugins = [] } = config;
 
+  // Add svelte plugin if not present
+  if (!hasPlugin(plugins, 'vite-plugin-svelte')) {
+    const { svelte } = await import('@sveltejs/vite-plugin-svelte');
+    plugins.push(svelte());
+  }
+
+  // Add docgen plugin
   plugins.push(svelteDocgen(config));
 
   return {

code/frameworks/svelte-vite/src/utils.ts

@@ -0,0 +1,16 @@
+import { PluginOption } from 'vite';
+
+function checkName(plugin: PluginOption, name: string) {
+  return typeof plugin === 'object' && 'name' in plugin && plugin.name === name;
+}
+
+export function hasPlugin(plugins: PluginOption[], name: string) {
+  return Boolean(
+    plugins.find((p): boolean => {
+      if (Array.isArray(p)) {
+        return Boolean(hasPlugin(p, name));
+      }
+      return checkName(p, name);
+    })
+  );
+}

code/frameworks/vue3-vite/package.json

@@ -59,7 +59,7 @@
     "@storybook/core-server": "7.0.0-alpha.34",
     "@storybook/preview-web": "7.0.0-alpha.34",
     "@storybook/vue3": "7.0.0-alpha.34",
-    "@vitejs/plugin-vue": "^3.0.3",
+    "@vitejs/plugin-vue": "^3.0.0",
     "magic-string": "^0.26.1",
     "vite": "^3.1.3",
     "vue-docgen-api": "^4.40.0"

code/frameworks/vue3-vite/src/preset.ts

@@ -1,7 +1,6 @@
-import path from 'path';
-import fs from 'fs';
 import type { StorybookConfig } from '@storybook/builder-vite';
 import { vueDocgen } from './plugins/vue-docgen';
+import { hasPlugin } from './utils';
 
 export const addons: StorybookConfig['addons'] = ['@storybook/vue3'];
 
@@ -9,19 +8,16 @@ export const core: StorybookConfig['core'] = {
   builder: '@storybook/builder-vite',
 };
 
-export function readPackageJson(): Record<string, any> | false {
-  const packageJsonPath = path.resolve('package.json');
-  if (!fs.existsSync(packageJsonPath)) {
-    return false;
-  }
-
-  const jsonContent = fs.readFileSync(packageJsonPath, 'utf8');
-  return JSON.parse(jsonContent);
-}
-
 export const viteFinal: StorybookConfig['viteFinal'] = async (config, { presets }) => {
   const { plugins = [] } = config;
 
+  // Add vue plugin if not present
+  if (!hasPlugin(plugins, 'vite:vue')) {
+    const { default: vue } = await import('@vitejs/plugin-vue');
+    plugins.push(vue());
+  }
+
+  // Add docgen plugin
   plugins.push(vueDocgen());
 
   const updated = {

code/frameworks/vue3-vite/src/utils.ts

@@ -0,0 +1,16 @@
+import { PluginOption } from 'vite';
+
+function checkName(plugin: PluginOption, name: string) {
+  return typeof plugin === 'object' && 'name' in plugin && plugin.name === name;
+}
+
+export function hasPlugin(plugins: PluginOption[], name: string) {
+  return Boolean(
+    plugins.find((p): boolean => {
+      if (Array.isArray(p)) {
+        return Boolean(hasPlugin(p, name));
+      }
+      return checkName(p, name);
+    })
+  );
+}

code/lib/core-common/tsconfig.json

@@ -1,7 +1,6 @@
 {
   "extends": "../../tsconfig.json",
   "compilerOptions": {
-    "emitDecoratorMetadata": false,
     "strict": true
   },
   "include": ["src/**/*"],

code/tsconfig.json

@@ -5,8 +5,6 @@
     "incremental": false,
     "noImplicitAny": true,
     "forceConsistentCasingInFileNames": true,
-    "experimentalDecorators": true,
-    "emitDecoratorMetadata": true,
     "jsx": "react",
     "moduleResolution": "Node",
     "target": "ES2020",

code/yarn.lock

@@ -8486,7 +8486,7 @@ __metadata:
     "@storybook/preview-web": 7.0.0-alpha.34
     "@storybook/react": 7.0.0-alpha.34
     "@types/node": ^14.14.20 || ^16.0.0
-    "@vitejs/plugin-react": ^2.0.1
+    "@vitejs/plugin-react": ^2.0.0
     ast-types: ^0.14.2
     magic-string: ^0.26.1
     react-docgen: ^6.0.0-alpha.3
@@ -9182,7 +9182,7 @@ __metadata:
     "@storybook/preview-web": 7.0.0-alpha.34
     "@storybook/vue3": 7.0.0-alpha.34
     "@types/node": ^14.14.20 || ^16.0.0
-    "@vitejs/plugin-vue": ^3.0.3
+    "@vitejs/plugin-vue": ^3.0.0
     magic-string: ^0.26.1
     typescript: ~4.6.3
     vite: ^3.1.3
@@ -11013,7 +11013,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@vitejs/plugin-react@npm:^2.0.0, @vitejs/plugin-react@npm:^2.0.1":
+"@vitejs/plugin-react@npm:^2.0.0":
   version: 2.1.0
   resolution: "@vitejs/plugin-react@npm:2.1.0"
   dependencies:
@@ -11030,7 +11030,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@vitejs/plugin-vue@npm:^3.0.3":
+"@vitejs/plugin-vue@npm:^3.0.0":
   version: 3.1.0
   resolution: "@vitejs/plugin-vue@npm:3.1.0"
   peerDependencies:
@@ -11040,6 +11040,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@vitejs/plugin-vue@npm:^3.0.3":
+  version: 3.1.2
+  resolution: "@vitejs/plugin-vue@npm:3.1.2"
+  peerDependencies:
+    vite: ^3.0.0
+    vue: ^3.2.25
+  checksum: 53867c9367f1133305e858541a9094a44c5e60d82d0c68d5eb41194dcac01ecd273252786046b3e523d40112374ac7f47558f7b292394a4529355d64b82c04cf
+  languageName: node
+  linkType: hard
+
 "@vue/babel-helper-vue-jsx-merge-props@npm:^1.4.0":
   version: 1.4.0
   resolution: "@vue/babel-helper-vue-jsx-merge-props@npm:1.4.0"

scripts/prepare/bundle.ts

@@ -6,6 +6,7 @@ import { build } from 'tsup';
 import aliasPlugin from 'esbuild-plugin-alias';
 import dedent from 'ts-dedent';
 import { exec } from '../utils/exec';
+import slash from 'slash';
 
 const hasFlag = (flags: string[], name: string) => !!flags.find((s) => s.startsWith(`--${name}`));
 
@@ -54,7 +55,7 @@ const run = async ({ cwd, flags }: { cwd: string; flags: string[] }) => {
   const tsConfigExists = await fs.pathExists(tsConfigPath);
   await Promise.all([
     build({
-      entry: entries.map((e: string) => join(cwd, e)),
+      entry: entries.map((e: string) => slash(join(cwd, e))),
       watch,
       ...(tsConfigExists ? { tsconfig: tsConfigPath } : {}),
       outDir: join(process.cwd(), 'dist'),
@@ -101,7 +102,7 @@ const run = async ({ cwd, flags }: { cwd: string; flags: string[] }) => {
       },
     }),
     build({
-      entry: entries.map((e: string) => join(cwd, e)),
+      entry: entries.map((e: string) => slash(join(cwd, e))),
       watch,
       outDir: join(process.cwd(), 'dist'),
       ...(tsConfigExists ? { tsconfig: tsConfigPath } : {}),

scripts/tasks/chromatic.ts

@@ -8,7 +8,7 @@ export const chromatic: Task = {
     return false;
   },
   async run({ key, sandboxDir, builtSandboxDir, junitFilename }, { dryRun, debug }) {
-    const tokenEnvVarName = `CHROMATIC_TOKEN_${key.toUpperCase().replace(/\/|-/g, '_')}`;
+    const tokenEnvVarName = `CHROMATIC_TOKEN_${key.toUpperCase().replace(/\/|-|\./g, '_')}`;
     const token = process.env[tokenEnvVarName];
 
     await exec(

scripts/tsconfig.json

@@ -1,12 +1,9 @@
 {
   "compileOnSave": false,
-
   "compilerOptions": {
     "baseUrl": ".",
     "incremental": false,
     "noImplicitAny": true,
-    "experimentalDecorators": true,
-    "emitDecoratorMetadata": false,
     "jsx": "react",
     "moduleResolution": "Node",
     "target": "ES2020",
@@ -20,8 +17,6 @@
       "dom",
       "esnext"
     ],
-
-
     "types": [
       "node",
       "jest"
@@ -35,7 +30,9 @@
     "noFallthroughCasesInSwitch": true,
     "resolveJsonModule": true,
     "paths": {
-      "verdaccio": ["./typings.d.ts"]
+      "verdaccio": [
+        "./typings.d.ts"
+      ]
     }
   },
   "exclude": [
@@ -48,7 +45,9 @@
     "**/*.test.ts",
     "**/setup-jest.ts"
   ],
-  "include": ["./**/*"],
+  "include": [
+    "./**/*"
+  ],
   "ts-node": {
     "transpileOnly": true,
     "files": true,
@@ -58,4 +57,4 @@
       ]
     }
   }
-}
+}