From 949c687d8691314d5985c7ce94a263b3a2e870d0 Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Sun, 3 Nov 2024 23:40:14 +0800 Subject: [PATCH 001/101] React Native Web Vite: WIP framework, sandboxes, and CLI integration --- code/core/src/cli/detect.ts | 2 + code/core/src/cli/project_types.ts | 1 + code/core/src/common/versions.ts | 1 + code/core/src/types/modules/frameworks.ts | 1 + .../react-native-web-vite/README.md | 3 + .../react-native-web-vite/package.json | 88 +++ .../react-native-web-vite/preset.js | 1 + .../react-native-web-vite/project.json | 8 + .../react-native-web-vite/src/index.ts | 1 + .../react-native-web-vite/src/preset.ts | 90 +++ .../react-native-web-vite/src/types.ts | 68 +++ .../react-native-web-vite/tsconfig.json | 11 + .../react-native-web-vite/vitest.config.ts | 10 + .../cli-storybook/src/sandbox-templates.ts | 23 + .../src/generators/REACT_NATIVE_WEB/index.ts | 28 + code/lib/create-storybook/src/initiate.ts | 7 + code/yarn.lock | 568 +++++++++++++++++- scripts/sandbox/generate.ts | 2 + scripts/tasks/sandbox-parts.ts | 2 + 19 files changed, 914 insertions(+), 1 deletion(-) create mode 100644 code/frameworks/react-native-web-vite/README.md create mode 100644 code/frameworks/react-native-web-vite/package.json create mode 100644 code/frameworks/react-native-web-vite/preset.js create mode 100644 code/frameworks/react-native-web-vite/project.json create mode 100644 code/frameworks/react-native-web-vite/src/index.ts create mode 100644 code/frameworks/react-native-web-vite/src/preset.ts create mode 100644 code/frameworks/react-native-web-vite/src/types.ts create mode 100644 code/frameworks/react-native-web-vite/tsconfig.json create mode 100644 code/frameworks/react-native-web-vite/vitest.config.ts create mode 100644 code/lib/create-storybook/src/generators/REACT_NATIVE_WEB/index.ts diff --git a/code/core/src/cli/detect.ts b/code/core/src/cli/detect.ts index 09ef8cae02c..5b50abee430 100644 --- a/code/core/src/cli/detect.ts +++ b/code/core/src/cli/detect.ts @@ -130,6 +130,8 @@ export async function detectBuilder(packageManager: JsPackageManager, projectTyp // Fallback to Vite or Webpack based on project type switch (projectType) { + case ProjectType.REACT_NATIVE_WEB: + return CoreBuilder.Vite; case ProjectType.REACT_SCRIPTS: case ProjectType.ANGULAR: case ProjectType.REACT_NATIVE: // technically react native doesn't use webpack, we just want to set something diff --git a/code/core/src/cli/project_types.ts b/code/core/src/cli/project_types.ts index 5d7d4a4d3ea..25148d2bc08 100644 --- a/code/core/src/cli/project_types.ts +++ b/code/core/src/cli/project_types.ts @@ -47,6 +47,7 @@ export enum ProjectType { REACT = 'REACT', REACT_SCRIPTS = 'REACT_SCRIPTS', REACT_NATIVE = 'REACT_NATIVE', + REACT_NATIVE_WEB = 'REACT_NATIVE_WEB', REACT_PROJECT = 'REACT_PROJECT', WEBPACK_REACT = 'WEBPACK_REACT', NEXTJS = 'NEXTJS', diff --git a/code/core/src/common/versions.ts b/code/core/src/common/versions.ts index 68001af0ed4..a3fcf098d3a 100644 --- a/code/core/src/common/versions.ts +++ b/code/core/src/common/versions.ts @@ -48,6 +48,7 @@ export default { '@storybook/nextjs': '8.5.0-alpha.2', '@storybook/preact-vite': '8.5.0-alpha.2', '@storybook/preact-webpack5': '8.5.0-alpha.2', + '@storybook/react-native-web-vite': '8.5.0-alpha.2', '@storybook/react-vite': '8.5.0-alpha.2', '@storybook/react-webpack5': '8.5.0-alpha.2', '@storybook/server-webpack5': '8.5.0-alpha.2', diff --git a/code/core/src/types/modules/frameworks.ts b/code/core/src/types/modules/frameworks.ts index 2f2028db810..e3e1b6383a7 100644 --- a/code/core/src/types/modules/frameworks.ts +++ b/code/core/src/types/modules/frameworks.ts @@ -8,6 +8,7 @@ export type SupportedFrameworks = | 'nextjs' | 'preact-vite' | 'preact-webpack5' + | 'react-native-web-vite' | 'react-vite' | 'react-webpack5' | 'server-webpack5' diff --git a/code/frameworks/react-native-web-vite/README.md b/code/frameworks/react-native-web-vite/README.md new file mode 100644 index 00000000000..c6b6e6abf0a --- /dev/null +++ b/code/frameworks/react-native-web-vite/README.md @@ -0,0 +1,3 @@ +# Storybook for React & Vite + +See [documentation](https://storybook.js.org/docs/get-started/frameworks/react-vite?renderer=react) for installation instructions, usage examples, APIs, and more. diff --git a/code/frameworks/react-native-web-vite/package.json b/code/frameworks/react-native-web-vite/package.json new file mode 100644 index 00000000000..0c9d3ee7a36 --- /dev/null +++ b/code/frameworks/react-native-web-vite/package.json @@ -0,0 +1,88 @@ +{ + "name": "@storybook/react-native-web-vite", + "version": "8.5.0-alpha.2", + "description": "Develop react-native components an isolated web environment with hot reloading.", + "keywords": [ + "storybook" + ], + "homepage": "https://github.com/storybookjs/storybook/tree/next/code/frameworks/react-native-web-vite", + "bugs": { + "url": "https://github.com/storybookjs/storybook/issues" + }, + "repository": { + "type": "git", + "url": "https://github.com/storybookjs/storybook.git", + "directory": "code/frameworks/react-native-web-vite" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/storybook" + }, + "license": "MIT", + "exports": { + ".": { + "types": "./dist/index.d.ts", + "node": "./dist/index.js", + "import": "./dist/index.mjs", + "require": "./dist/index.js" + }, + "./preset": { + "types": "./dist/preset.d.ts", + "require": "./dist/preset.js" + }, + "./package.json": "./package.json" + }, + "main": "dist/index.js", + "module": "dist/index.mjs", + "types": "dist/index.d.ts", + "files": [ + "dist/**/*", + "template/cli/**/*", + "README.md", + "*.js", + "*.d.ts", + "!src/**/*" + ], + "scripts": { + "check": "jiti ../../../scripts/prepare/check.ts", + "prep": "jiti ../../../scripts/prepare/bundle.ts" + }, + "dependencies": { + "@joshwooding/vite-plugin-react-docgen-typescript": "0.3.0", + "@rollup/pluginutils": "^5.0.2", + "@storybook/builder-vite": "workspace:*", + "@storybook/react": "workspace:*", + "@vitejs/plugin-react": "^4.3.2", + "find-up": "^5.0.0", + "magic-string": "^0.30.0", + "react-docgen": "^7.0.0", + "resolve": "^1.22.8", + "tsconfig-paths": "^4.2.0", + "vite": "^4.0.0 || ^5.0.0" + }, + "devDependencies": { + "@types/node": "^22.0.0", + "typescript": "^5.3.2" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta", + "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta", + "react-native": ">=0.74.5", + "react-native-web": "^0.19.12", + "storybook": "workspace:^" + }, + "engines": { + "node": ">=18.0.0" + }, + "publishConfig": { + "access": "public" + }, + "bundler": { + "entries": [ + "./src/index.ts", + "./src/preset.ts" + ], + "platform": "node" + }, + "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae16" +} diff --git a/code/frameworks/react-native-web-vite/preset.js b/code/frameworks/react-native-web-vite/preset.js new file mode 100644 index 00000000000..a83f95279e7 --- /dev/null +++ b/code/frameworks/react-native-web-vite/preset.js @@ -0,0 +1 @@ +module.exports = require('./dist/preset'); diff --git a/code/frameworks/react-native-web-vite/project.json b/code/frameworks/react-native-web-vite/project.json new file mode 100644 index 00000000000..219e9c00077 --- /dev/null +++ b/code/frameworks/react-native-web-vite/project.json @@ -0,0 +1,8 @@ +{ + "name": "react-native-web-vite", + "$schema": "../../node_modules/nx/schemas/project-schema.json", + "projectType": "library", + "targets": { + "build": {} + } +} diff --git a/code/frameworks/react-native-web-vite/src/index.ts b/code/frameworks/react-native-web-vite/src/index.ts new file mode 100644 index 00000000000..1855ad61a70 --- /dev/null +++ b/code/frameworks/react-native-web-vite/src/index.ts @@ -0,0 +1 @@ +export type { FrameworkOptions, StorybookConfig } from './types'; diff --git a/code/frameworks/react-native-web-vite/src/preset.ts b/code/frameworks/react-native-web-vite/src/preset.ts new file mode 100644 index 00000000000..d1eba924044 --- /dev/null +++ b/code/frameworks/react-native-web-vite/src/preset.ts @@ -0,0 +1,90 @@ +import { hasVitePlugins } from '@storybook/builder-vite'; + +import type { BabelOptions, Options as ReactOptions } from '@vitejs/plugin-react'; +import react from '@vitejs/plugin-react'; +import type { Plugin } from 'vite'; + +import type { FrameworkOptions, StorybookConfig } from './types'; + +function reactNativeWeb( + reactOptions: Omit & { babel?: BabelOptions } +): Plugin { + const plugin: Plugin = { + name: 'vite:react-native-web', + enforce: 'pre', + config(_userConfig, env) { + return { + plugins: [ + react({ + jsxRuntime: 'automatic', + ...reactOptions, + }), + ], + define: { + // reanimated support + 'global.__x': {}, + _frameTimestamp: undefined, + _WORKLET: false, + __DEV__: `${env.mode === 'development'}`, + 'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || env.mode), + }, + optimizeDeps: { + include: [], + esbuildOptions: { + jsx: 'transform', + resolveExtensions: [ + '.web.js', + '.web.ts', + '.web.tsx', + '.js', + '.jsx', + '.json', + '.ts', + '.tsx', + '.mjs', + ], + loader: { + '.js': 'jsx', + }, + }, + }, + resolve: { + extensions: [ + '.web.js', + '.web.ts', + '.web.tsx', + '.js', + '.jsx', + '.json', + '.ts', + '.tsx', + '.mjs', + ], + alias: { + 'react-native': 'react-native-web', + }, + }, + }; + }, + }; + + return plugin; +} + +export const viteFinal: StorybookConfig['viteFinal'] = async (config, options) => { + const { pluginReactOptions = {} } = + await options.presets.apply('frameworkOptions'); + + const { plugins = [] } = config; + + if (!(await hasVitePlugins(plugins, ['vite:react-native-web']))) { + plugins.push(reactNativeWeb(pluginReactOptions)); + } + + return config; +}; + +export const core = { + builder: '@storybook/builder-vite', + renderer: '@storybook/react', +}; diff --git a/code/frameworks/react-native-web-vite/src/types.ts b/code/frameworks/react-native-web-vite/src/types.ts new file mode 100644 index 00000000000..c0831eb0648 --- /dev/null +++ b/code/frameworks/react-native-web-vite/src/types.ts @@ -0,0 +1,68 @@ +import type { + CompatibleString, + StorybookConfig as StorybookConfigBase, + TypescriptOptions as TypescriptOptionsBase, +} from 'storybook/internal/types'; + +import type { BuilderOptions, StorybookConfigVite } from '@storybook/builder-vite'; + +import type docgenTypescript from '@joshwooding/vite-plugin-react-docgen-typescript'; +import type { BabelOptions, Options as ReactOptions } from '@vitejs/plugin-react'; + +type FrameworkName = CompatibleString<'@storybook/react-native-web-vite'>; +type BuilderName = CompatibleString<'@storybook/builder-vite'>; + +export type FrameworkOptions = { + builder?: BuilderOptions; + strictMode?: boolean; + /** + * Use React's legacy root API to mount components + * + * React has introduced a new root API with React 18.x to enable a whole set of new features (e.g. + * concurrent features) If this flag is true, the legacy Root API is used to mount components to + * make it easier to migrate step by step to React 18. + * + * @default false + */ + legacyRootApi?: boolean; + + pluginReactOptions?: Omit & { babel?: BabelOptions }; +}; + +type StorybookConfigFramework = { + framework: + | FrameworkName + | { + name: FrameworkName; + options: FrameworkOptions; + }; + core?: StorybookConfigBase['core'] & { + builder?: + | BuilderName + | { + name: BuilderName; + options: BuilderOptions; + }; + }; +}; + +type TypescriptOptions = TypescriptOptionsBase & { + /** + * Sets the type of Docgen when working with React and TypeScript + * + * @default `'react-docgen'` + */ + reactDocgen: 'react-docgen-typescript' | 'react-docgen' | false; + /** Configures `@joshwooding/vite-plugin-react-docgen-typescript` */ + reactDocgenTypescriptOptions: Parameters[0]; +}; + +/** The interface for Storybook configuration in `main.ts` files. */ +export type StorybookConfig = Omit< + StorybookConfigBase, + keyof StorybookConfigVite | keyof StorybookConfigFramework | 'typescript' +> & + StorybookConfigVite & + StorybookConfigFramework & { + typescript?: Partial; + }; diff --git a/code/frameworks/react-native-web-vite/tsconfig.json b/code/frameworks/react-native-web-vite/tsconfig.json new file mode 100644 index 00000000000..c749496d9a6 --- /dev/null +++ b/code/frameworks/react-native-web-vite/tsconfig.json @@ -0,0 +1,11 @@ +{ + "compilerOptions": { + "baseUrl": ".", + "paths": { + "storybook/internal/*": ["../../lib/cli/core/*"] + }, + "rootDir": "./src" + }, + "extends": "../../tsconfig.json", + "include": ["src/**/*"] +} diff --git a/code/frameworks/react-native-web-vite/vitest.config.ts b/code/frameworks/react-native-web-vite/vitest.config.ts new file mode 100644 index 00000000000..7420176b2e4 --- /dev/null +++ b/code/frameworks/react-native-web-vite/vitest.config.ts @@ -0,0 +1,10 @@ +import { defineConfig, mergeConfig } from 'vitest/config'; + +import { vitestCommonConfig } from '../../vitest.workspace'; + +export default mergeConfig( + vitestCommonConfig, + defineConfig({ + // Add custom config here + }) +); diff --git a/code/lib/cli-storybook/src/sandbox-templates.ts b/code/lib/cli-storybook/src/sandbox-templates.ts index b474937769f..f4684cef8e5 100644 --- a/code/lib/cli-storybook/src/sandbox-templates.ts +++ b/code/lib/cli-storybook/src/sandbox-templates.ts @@ -592,6 +592,29 @@ const baseTemplates = { builder: '@storybook/builder-webpack5', }, }, + 'react-native-web-vite/expo-ts': { + name: 'React Native Expo Latest (Vite | TypeScript)', + script: 'npx create-expo-app -y {{beforeDir}}', + inDevelopment: true, + expected: { + framework: '@storybook/react-native-web-vite', + renderer: '@storybook/react', + builder: '@storybook/builder-vite', + }, + skipTasks: ['bench'], + }, + 'react-native-web-vite/rn-cli-ts': { + name: 'React Native CLI Latest (Vite | TypeScript)', + script: + 'npx @react-native-community/cli@latest init --install-pods=false --directory={{beforeDir}} rnapp', + inDevelopment: true, + expected: { + framework: '@storybook/react-native-web-vite', + renderer: '@storybook/react', + builder: '@storybook/builder-vite', + }, + skipTasks: ['bench'], + }, } satisfies Record; /** diff --git a/code/lib/create-storybook/src/generators/REACT_NATIVE_WEB/index.ts b/code/lib/create-storybook/src/generators/REACT_NATIVE_WEB/index.ts new file mode 100644 index 00000000000..721987d4666 --- /dev/null +++ b/code/lib/create-storybook/src/generators/REACT_NATIVE_WEB/index.ts @@ -0,0 +1,28 @@ +import { detectLanguage } from 'storybook/internal/cli'; +import { SupportedLanguage } from 'storybook/internal/cli'; + +import { baseGenerator } from '../baseGenerator'; +import type { Generator } from '../types'; + +const generator: Generator = async (packageManager, npmOptions, options) => { + // Add prop-types dependency if not using TypeScript + const language = await detectLanguage(packageManager); + const extraPackages = ['vite']; + if (language === SupportedLanguage.JAVASCRIPT) { + extraPackages.push('prop-types'); + } + + await baseGenerator( + packageManager, + npmOptions, + options, + 'react', + { + extraPackages, + extraAddons: [`@storybook/addon-onboarding`], + }, + 'react-native-web-vite' + ); +}; + +export default generator; diff --git a/code/lib/create-storybook/src/initiate.ts b/code/lib/create-storybook/src/initiate.ts index 868834a1e14..6c1c6559d26 100644 --- a/code/lib/create-storybook/src/initiate.ts +++ b/code/lib/create-storybook/src/initiate.ts @@ -31,6 +31,7 @@ import preactGenerator from './generators/PREACT'; import qwikGenerator from './generators/QWIK'; import reactGenerator from './generators/REACT'; import reactNativeGenerator from './generators/REACT_NATIVE'; +import reactNativeWebGenerator from './generators/REACT_NATIVE_WEB'; import reactScriptsGenerator from './generators/REACT_SCRIPTS'; import serverGenerator from './generators/SERVER'; import solidGenerator from './generators/SOLID'; @@ -84,6 +85,12 @@ const installStorybook = async ( ); } + case ProjectType.REACT_NATIVE_WEB: { + return reactNativeWebGenerator(packageManager, npmOptions, generatorOptions).then( + commandLog('Adding Storybook support to your "React Native" app') + ); + } + case ProjectType.QWIK: { return qwikGenerator(packageManager, npmOptions, generatorOptions).then( commandLog('Adding Storybook support to your "Qwik" app') diff --git a/code/yarn.lock b/code/yarn.lock index 272933533d6..c6134557544 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -377,6 +377,17 @@ __metadata: languageName: node linkType: hard +"@babel/code-frame@npm:^7.25.9, @babel/code-frame@npm:^7.26.0": + version: 7.26.2 + resolution: "@babel/code-frame@npm:7.26.2" + dependencies: + "@babel/helper-validator-identifier": "npm:^7.25.9" + js-tokens: "npm:^4.0.0" + picocolors: "npm:^1.0.0" + checksum: 10c0/7d79621a6849183c415486af99b1a20b84737e8c11cd55b6544f688c51ce1fd710e6d869c3dd21232023da272a79b91efb3e83b5bc2dc65c1187c5fcd1b72ea8 + languageName: node + linkType: hard + "@babel/compat-data@npm:^7.22.6, @babel/compat-data@npm:^7.23.5, @babel/compat-data@npm:^7.24.4, @babel/compat-data@npm:^7.25.2": version: 7.25.2 resolution: "@babel/compat-data@npm:7.25.2" @@ -384,6 +395,13 @@ __metadata: languageName: node linkType: hard +"@babel/compat-data@npm:^7.25.9": + version: 7.26.2 + resolution: "@babel/compat-data@npm:7.26.2" + checksum: 10c0/c9b5f3724828d17f728a778f9d66c19b55c018d0d76de6d731178cca64f182c22b71400a73bf2b65dcc4fcfe52b630088a94d5902911b54206aa90e3ffe07d12 + languageName: node + linkType: hard + "@babel/core@npm:7.23.9": version: 7.23.9 resolution: "@babel/core@npm:7.23.9" @@ -453,6 +471,29 @@ __metadata: languageName: node linkType: hard +"@babel/core@npm:^7.25.2": + version: 7.26.0 + resolution: "@babel/core@npm:7.26.0" + dependencies: + "@ampproject/remapping": "npm:^2.2.0" + "@babel/code-frame": "npm:^7.26.0" + "@babel/generator": "npm:^7.26.0" + "@babel/helper-compilation-targets": "npm:^7.25.9" + "@babel/helper-module-transforms": "npm:^7.26.0" + "@babel/helpers": "npm:^7.26.0" + "@babel/parser": "npm:^7.26.0" + "@babel/template": "npm:^7.25.9" + "@babel/traverse": "npm:^7.25.9" + "@babel/types": "npm:^7.26.0" + convert-source-map: "npm:^2.0.0" + debug: "npm:^4.1.0" + gensync: "npm:^1.0.0-beta.2" + json5: "npm:^2.2.3" + semver: "npm:^6.3.1" + checksum: 10c0/91de73a7ff5c4049fbc747930aa039300e4d2670c2a91f5aa622f1b4868600fc89b01b6278385fbcd46f9574186fa3d9b376a9e7538e50f8d118ec13cfbcb63e + languageName: node + linkType: hard + "@babel/generator@npm:7.17.7": version: 7.17.7 resolution: "@babel/generator@npm:7.17.7" @@ -488,6 +529,19 @@ __metadata: languageName: node linkType: hard +"@babel/generator@npm:^7.25.9, @babel/generator@npm:^7.26.0": + version: 7.26.2 + resolution: "@babel/generator@npm:7.26.2" + dependencies: + "@babel/parser": "npm:^7.26.2" + "@babel/types": "npm:^7.26.0" + "@jridgewell/gen-mapping": "npm:^0.3.5" + "@jridgewell/trace-mapping": "npm:^0.3.25" + jsesc: "npm:^3.0.2" + checksum: 10c0/167ebce8977142f5012fad6bd91da51ac52bcd752f2261a54b7ab605d928aebe57e21636cdd2a9c7757e552652c68d9fcb5d40b06fcb66e02d9ee7526e118a5c + languageName: node + linkType: hard + "@babel/helper-annotate-as-pure@npm:7.22.5": version: 7.22.5 resolution: "@babel/helper-annotate-as-pure@npm:7.22.5" @@ -529,6 +583,19 @@ __metadata: languageName: node linkType: hard +"@babel/helper-compilation-targets@npm:^7.25.9": + version: 7.25.9 + resolution: "@babel/helper-compilation-targets@npm:7.25.9" + dependencies: + "@babel/compat-data": "npm:^7.25.9" + "@babel/helper-validator-option": "npm:^7.25.9" + browserslist: "npm:^4.24.0" + lru-cache: "npm:^5.1.1" + semver: "npm:^6.3.1" + checksum: 10c0/a6b26a1e4222e69ef8e62ee19374308f060b007828bc11c65025ecc9e814aba21ff2175d6d3f8bf53c863edd728ee8f94ba7870f8f90a37d39552ad9933a8aaa + languageName: node + linkType: hard + "@babel/helper-create-class-features-plugin@npm:^7.18.6, @babel/helper-create-class-features-plugin@npm:^7.21.0, @babel/helper-create-class-features-plugin@npm:^7.24.0, @babel/helper-create-class-features-plugin@npm:^7.24.7": version: 7.24.7 resolution: "@babel/helper-create-class-features-plugin@npm:7.24.7" @@ -639,6 +706,16 @@ __metadata: languageName: node linkType: hard +"@babel/helper-module-imports@npm:^7.25.9": + version: 7.25.9 + resolution: "@babel/helper-module-imports@npm:7.25.9" + dependencies: + "@babel/traverse": "npm:^7.25.9" + "@babel/types": "npm:^7.25.9" + checksum: 10c0/078d3c2b45d1f97ffe6bb47f61961be4785d2342a4156d8b42c92ee4e1b7b9e365655dd6cb25329e8fe1a675c91eeac7e3d04f0c518b67e417e29d6e27b6aa70 + languageName: node + linkType: hard + "@babel/helper-module-transforms@npm:^7.23.3, @babel/helper-module-transforms@npm:^7.24.7, @babel/helper-module-transforms@npm:^7.25.2": version: 7.25.2 resolution: "@babel/helper-module-transforms@npm:7.25.2" @@ -653,6 +730,19 @@ __metadata: languageName: node linkType: hard +"@babel/helper-module-transforms@npm:^7.26.0": + version: 7.26.0 + resolution: "@babel/helper-module-transforms@npm:7.26.0" + dependencies: + "@babel/helper-module-imports": "npm:^7.25.9" + "@babel/helper-validator-identifier": "npm:^7.25.9" + "@babel/traverse": "npm:^7.25.9" + peerDependencies: + "@babel/core": ^7.0.0 + checksum: 10c0/ee111b68a5933481d76633dad9cdab30c41df4479f0e5e1cc4756dc9447c1afd2c9473b5ba006362e35b17f4ebddd5fca090233bef8dfc84dca9d9127e56ec3a + languageName: node + linkType: hard + "@babel/helper-optimise-call-expression@npm:^7.24.7": version: 7.24.7 resolution: "@babel/helper-optimise-call-expression@npm:7.24.7" @@ -669,6 +759,13 @@ __metadata: languageName: node linkType: hard +"@babel/helper-plugin-utils@npm:^7.25.9": + version: 7.25.9 + resolution: "@babel/helper-plugin-utils@npm:7.25.9" + checksum: 10c0/483066a1ba36ff16c0116cd24f93de05de746a603a777cd695ac7a1b034928a65a4ecb35f255761ca56626435d7abdb73219eba196f9aa83b6c3c3169325599d + languageName: node + linkType: hard + "@babel/helper-remap-async-to-generator@npm:^7.22.20, @babel/helper-remap-async-to-generator@npm:^7.24.7": version: 7.24.7 resolution: "@babel/helper-remap-async-to-generator@npm:7.24.7" @@ -740,6 +837,13 @@ __metadata: languageName: node linkType: hard +"@babel/helper-string-parser@npm:^7.25.9": + version: 7.25.9 + resolution: "@babel/helper-string-parser@npm:7.25.9" + checksum: 10c0/7244b45d8e65f6b4338a6a68a8556f2cb161b782343e97281a5f2b9b93e420cad0d9f5773a59d79f61d0c448913d06f6a2358a87f2e203cf112e3c5b53522ee6 + languageName: node + linkType: hard + "@babel/helper-validator-identifier@npm:^7.16.7, @babel/helper-validator-identifier@npm:^7.24.7": version: 7.24.7 resolution: "@babel/helper-validator-identifier@npm:7.24.7" @@ -747,6 +851,13 @@ __metadata: languageName: node linkType: hard +"@babel/helper-validator-identifier@npm:^7.25.9": + version: 7.25.9 + resolution: "@babel/helper-validator-identifier@npm:7.25.9" + checksum: 10c0/4fc6f830177b7b7e887ad3277ddb3b91d81e6c4a24151540d9d1023e8dc6b1c0505f0f0628ae653601eb4388a8db45c1c14b2c07a9173837aef7e4116456259d + languageName: node + linkType: hard + "@babel/helper-validator-option@npm:^7.22.15, @babel/helper-validator-option@npm:^7.23.5, @babel/helper-validator-option@npm:^7.24.8": version: 7.24.8 resolution: "@babel/helper-validator-option@npm:7.24.8" @@ -754,6 +865,13 @@ __metadata: languageName: node linkType: hard +"@babel/helper-validator-option@npm:^7.25.9": + version: 7.25.9 + resolution: "@babel/helper-validator-option@npm:7.25.9" + checksum: 10c0/27fb195d14c7dcb07f14e58fe77c44eea19a6a40a74472ec05c441478fa0bb49fa1c32b2d64be7a38870ee48ef6601bdebe98d512f0253aea0b39756c4014f3e + languageName: node + linkType: hard + "@babel/helper-wrap-function@npm:^7.24.7": version: 7.24.7 resolution: "@babel/helper-wrap-function@npm:7.24.7" @@ -776,6 +894,16 @@ __metadata: languageName: node linkType: hard +"@babel/helpers@npm:^7.26.0": + version: 7.26.0 + resolution: "@babel/helpers@npm:7.26.0" + dependencies: + "@babel/template": "npm:^7.25.9" + "@babel/types": "npm:^7.26.0" + checksum: 10c0/343333cced6946fe46617690a1d0789346960910225ce359021a88a60a65bc0d791f0c5d240c0ed46cf8cc63b5fd7df52734ff14e43b9c32feae2b61b1647097 + languageName: node + linkType: hard + "@babel/highlight@npm:^7.24.7": version: 7.24.7 resolution: "@babel/highlight@npm:7.24.7" @@ -799,6 +927,17 @@ __metadata: languageName: node linkType: hard +"@babel/parser@npm:^7.25.9, @babel/parser@npm:^7.26.0, @babel/parser@npm:^7.26.2": + version: 7.26.2 + resolution: "@babel/parser@npm:7.26.2" + dependencies: + "@babel/types": "npm:^7.26.0" + bin: + parser: ./bin/babel-parser.js + checksum: 10c0/751a743087b3a9172a7599f1421830d44c38f065ef781588d2bfb1c98f9b461719a226feb13c868d7a284783eee120c88ea522593118f2668f46ebfb1105c4d7 + languageName: node + linkType: hard + "@babel/plugin-bugfix-firefox-class-in-computed-class-key@npm:^7.24.4": version: 7.24.4 resolution: "@babel/plugin-bugfix-firefox-class-in-computed-class-key@npm:7.24.4" @@ -1722,6 +1861,17 @@ __metadata: languageName: node linkType: hard +"@babel/plugin-transform-react-jsx-self@npm:^7.24.7": + version: 7.25.9 + resolution: "@babel/plugin-transform-react-jsx-self@npm:7.25.9" + dependencies: + "@babel/helper-plugin-utils": "npm:^7.25.9" + peerDependencies: + "@babel/core": ^7.0.0-0 + checksum: 10c0/ce0e289f6af93d7c4dc6b385512199c5bb138ae61507b4d5117ba88b6a6b5092f704f1bdf80080b7d69b1b8c36649f2a0b250e8198667d4d30c08bbb1546bd99 + languageName: node + linkType: hard + "@babel/plugin-transform-react-jsx-source@npm:^7.19.6": version: 7.22.5 resolution: "@babel/plugin-transform-react-jsx-source@npm:7.22.5" @@ -1733,6 +1883,17 @@ __metadata: languageName: node linkType: hard +"@babel/plugin-transform-react-jsx-source@npm:^7.24.7": + version: 7.25.9 + resolution: "@babel/plugin-transform-react-jsx-source@npm:7.25.9" + dependencies: + "@babel/helper-plugin-utils": "npm:^7.25.9" + peerDependencies: + "@babel/core": ^7.0.0-0 + checksum: 10c0/fc9ee08efc9be7cbd2cc6788bbf92579adf3cab37912481f1b915221be3d22b0613b5b36a721df5f4c0ab65efe8582fcf8673caab83e6e1ce4cc04ceebf57dfa + languageName: node + linkType: hard + "@babel/plugin-transform-react-jsx@npm:^7.22.5, @babel/plugin-transform-react-jsx@npm:^7.23.4": version: 7.23.4 resolution: "@babel/plugin-transform-react-jsx@npm:7.23.4" @@ -2258,6 +2419,17 @@ __metadata: languageName: node linkType: hard +"@babel/template@npm:^7.25.9": + version: 7.25.9 + resolution: "@babel/template@npm:7.25.9" + dependencies: + "@babel/code-frame": "npm:^7.25.9" + "@babel/parser": "npm:^7.25.9" + "@babel/types": "npm:^7.25.9" + checksum: 10c0/ebe677273f96a36c92cc15b7aa7b11cc8bc8a3bb7a01d55b2125baca8f19cae94ff3ce15f1b1880fb8437f3a690d9f89d4e91f16fc1dc4d3eb66226d128983ab + languageName: node + linkType: hard + "@babel/traverse@npm:7.23.2": version: 7.23.2 resolution: "@babel/traverse@npm:7.23.2" @@ -2291,6 +2463,21 @@ __metadata: languageName: node linkType: hard +"@babel/traverse@npm:^7.25.9": + version: 7.25.9 + resolution: "@babel/traverse@npm:7.25.9" + dependencies: + "@babel/code-frame": "npm:^7.25.9" + "@babel/generator": "npm:^7.25.9" + "@babel/parser": "npm:^7.25.9" + "@babel/template": "npm:^7.25.9" + "@babel/types": "npm:^7.25.9" + debug: "npm:^4.3.1" + globals: "npm:^11.1.0" + checksum: 10c0/e90be586a714da4adb80e6cb6a3c5cfcaa9b28148abdafb065e34cc109676fc3db22cf98cd2b2fff66ffb9b50c0ef882cab0f466b6844be0f6c637b82719bba1 + languageName: node + linkType: hard + "@babel/types@npm:7.17.0": version: 7.17.0 resolution: "@babel/types@npm:7.17.0" @@ -2312,6 +2499,16 @@ __metadata: languageName: node linkType: hard +"@babel/types@npm:^7.25.9, @babel/types@npm:^7.26.0": + version: 7.26.0 + resolution: "@babel/types@npm:7.26.0" + dependencies: + "@babel/helper-string-parser": "npm:^7.25.9" + "@babel/helper-validator-identifier": "npm:^7.25.9" + checksum: 10c0/b694f41ad1597127e16024d766c33a641508aad037abd08d0d1f73af753e1119fa03b4a107d04b5f92cc19c095a594660547ae9bead1db2299212d644b0a5cb8 + languageName: node + linkType: hard + "@base2/pretty-print-object@npm:1.0.1": version: 1.0.1 resolution: "@base2/pretty-print-object@npm:1.0.1" @@ -5153,6 +5350,13 @@ __metadata: languageName: node linkType: hard +"@rollup/rollup-android-arm-eabi@npm:4.24.3": + version: 4.24.3 + resolution: "@rollup/rollup-android-arm-eabi@npm:4.24.3" + conditions: os=android & cpu=arm + languageName: node + linkType: hard + "@rollup/rollup-android-arm-eabi@npm:4.9.1": version: 4.9.1 resolution: "@rollup/rollup-android-arm-eabi@npm:4.9.1" @@ -5160,6 +5364,13 @@ __metadata: languageName: node linkType: hard +"@rollup/rollup-android-arm64@npm:4.24.3": + version: 4.24.3 + resolution: "@rollup/rollup-android-arm64@npm:4.24.3" + conditions: os=android & cpu=arm64 + languageName: node + linkType: hard + "@rollup/rollup-android-arm64@npm:4.9.1": version: 4.9.1 resolution: "@rollup/rollup-android-arm64@npm:4.9.1" @@ -5167,6 +5378,13 @@ __metadata: languageName: node linkType: hard +"@rollup/rollup-darwin-arm64@npm:4.24.3": + version: 4.24.3 + resolution: "@rollup/rollup-darwin-arm64@npm:4.24.3" + conditions: os=darwin & cpu=arm64 + languageName: node + linkType: hard + "@rollup/rollup-darwin-arm64@npm:4.9.1": version: 4.9.1 resolution: "@rollup/rollup-darwin-arm64@npm:4.9.1" @@ -5174,6 +5392,13 @@ __metadata: languageName: node linkType: hard +"@rollup/rollup-darwin-x64@npm:4.24.3": + version: 4.24.3 + resolution: "@rollup/rollup-darwin-x64@npm:4.24.3" + conditions: os=darwin & cpu=x64 + languageName: node + linkType: hard + "@rollup/rollup-darwin-x64@npm:4.9.1": version: 4.9.1 resolution: "@rollup/rollup-darwin-x64@npm:4.9.1" @@ -5181,6 +5406,27 @@ __metadata: languageName: node linkType: hard +"@rollup/rollup-freebsd-arm64@npm:4.24.3": + version: 4.24.3 + resolution: "@rollup/rollup-freebsd-arm64@npm:4.24.3" + conditions: os=freebsd & cpu=arm64 + languageName: node + linkType: hard + +"@rollup/rollup-freebsd-x64@npm:4.24.3": + version: 4.24.3 + resolution: "@rollup/rollup-freebsd-x64@npm:4.24.3" + conditions: os=freebsd & cpu=x64 + languageName: node + linkType: hard + +"@rollup/rollup-linux-arm-gnueabihf@npm:4.24.3": + version: 4.24.3 + resolution: "@rollup/rollup-linux-arm-gnueabihf@npm:4.24.3" + conditions: os=linux & cpu=arm & libc=glibc + languageName: node + linkType: hard + "@rollup/rollup-linux-arm-gnueabihf@npm:4.9.1": version: 4.9.1 resolution: "@rollup/rollup-linux-arm-gnueabihf@npm:4.9.1" @@ -5188,6 +5434,20 @@ __metadata: languageName: node linkType: hard +"@rollup/rollup-linux-arm-musleabihf@npm:4.24.3": + version: 4.24.3 + resolution: "@rollup/rollup-linux-arm-musleabihf@npm:4.24.3" + conditions: os=linux & cpu=arm & libc=musl + languageName: node + linkType: hard + +"@rollup/rollup-linux-arm64-gnu@npm:4.24.3": + version: 4.24.3 + resolution: "@rollup/rollup-linux-arm64-gnu@npm:4.24.3" + conditions: os=linux & cpu=arm64 & libc=glibc + languageName: node + linkType: hard + "@rollup/rollup-linux-arm64-gnu@npm:4.9.1": version: 4.9.1 resolution: "@rollup/rollup-linux-arm64-gnu@npm:4.9.1" @@ -5195,6 +5455,13 @@ __metadata: languageName: node linkType: hard +"@rollup/rollup-linux-arm64-musl@npm:4.24.3": + version: 4.24.3 + resolution: "@rollup/rollup-linux-arm64-musl@npm:4.24.3" + conditions: os=linux & cpu=arm64 & libc=musl + languageName: node + linkType: hard + "@rollup/rollup-linux-arm64-musl@npm:4.9.1": version: 4.9.1 resolution: "@rollup/rollup-linux-arm64-musl@npm:4.9.1" @@ -5202,6 +5469,20 @@ __metadata: languageName: node linkType: hard +"@rollup/rollup-linux-powerpc64le-gnu@npm:4.24.3": + version: 4.24.3 + resolution: "@rollup/rollup-linux-powerpc64le-gnu@npm:4.24.3" + conditions: os=linux & cpu=ppc64 & libc=glibc + languageName: node + linkType: hard + +"@rollup/rollup-linux-riscv64-gnu@npm:4.24.3": + version: 4.24.3 + resolution: "@rollup/rollup-linux-riscv64-gnu@npm:4.24.3" + conditions: os=linux & cpu=riscv64 & libc=glibc + languageName: node + linkType: hard + "@rollup/rollup-linux-riscv64-gnu@npm:4.9.1": version: 4.9.1 resolution: "@rollup/rollup-linux-riscv64-gnu@npm:4.9.1" @@ -5209,6 +5490,20 @@ __metadata: languageName: node linkType: hard +"@rollup/rollup-linux-s390x-gnu@npm:4.24.3": + version: 4.24.3 + resolution: "@rollup/rollup-linux-s390x-gnu@npm:4.24.3" + conditions: os=linux & cpu=s390x & libc=glibc + languageName: node + linkType: hard + +"@rollup/rollup-linux-x64-gnu@npm:4.24.3": + version: 4.24.3 + resolution: "@rollup/rollup-linux-x64-gnu@npm:4.24.3" + conditions: os=linux & cpu=x64 & libc=glibc + languageName: node + linkType: hard + "@rollup/rollup-linux-x64-gnu@npm:4.9.1": version: 4.9.1 resolution: "@rollup/rollup-linux-x64-gnu@npm:4.9.1" @@ -5216,6 +5511,13 @@ __metadata: languageName: node linkType: hard +"@rollup/rollup-linux-x64-musl@npm:4.24.3": + version: 4.24.3 + resolution: "@rollup/rollup-linux-x64-musl@npm:4.24.3" + conditions: os=linux & cpu=x64 & libc=musl + languageName: node + linkType: hard + "@rollup/rollup-linux-x64-musl@npm:4.9.1": version: 4.9.1 resolution: "@rollup/rollup-linux-x64-musl@npm:4.9.1" @@ -5223,6 +5525,13 @@ __metadata: languageName: node linkType: hard +"@rollup/rollup-win32-arm64-msvc@npm:4.24.3": + version: 4.24.3 + resolution: "@rollup/rollup-win32-arm64-msvc@npm:4.24.3" + conditions: os=win32 & cpu=arm64 + languageName: node + linkType: hard + "@rollup/rollup-win32-arm64-msvc@npm:4.9.1": version: 4.9.1 resolution: "@rollup/rollup-win32-arm64-msvc@npm:4.9.1" @@ -5230,6 +5539,13 @@ __metadata: languageName: node linkType: hard +"@rollup/rollup-win32-ia32-msvc@npm:4.24.3": + version: 4.24.3 + resolution: "@rollup/rollup-win32-ia32-msvc@npm:4.24.3" + conditions: os=win32 & cpu=ia32 + languageName: node + linkType: hard + "@rollup/rollup-win32-ia32-msvc@npm:4.9.1": version: 4.9.1 resolution: "@rollup/rollup-win32-ia32-msvc@npm:4.9.1" @@ -5237,6 +5553,13 @@ __metadata: languageName: node linkType: hard +"@rollup/rollup-win32-x64-msvc@npm:4.24.3": + version: 4.24.3 + resolution: "@rollup/rollup-win32-x64-msvc@npm:4.24.3" + conditions: os=win32 & cpu=x64 + languageName: node + linkType: hard + "@rollup/rollup-win32-x64-msvc@npm:4.9.1": version: 4.9.1 resolution: "@rollup/rollup-win32-x64-msvc@npm:4.9.1" @@ -6742,6 +7065,32 @@ __metadata: languageName: unknown linkType: soft +"@storybook/react-native-web-vite@workspace:frameworks/react-native-web-vite": + version: 0.0.0-use.local + resolution: "@storybook/react-native-web-vite@workspace:frameworks/react-native-web-vite" + dependencies: + "@joshwooding/vite-plugin-react-docgen-typescript": "npm:0.3.0" + "@rollup/pluginutils": "npm:^5.0.2" + "@storybook/builder-vite": "workspace:*" + "@storybook/react": "workspace:*" + "@types/node": "npm:^22.0.0" + "@vitejs/plugin-react": "npm:^4.3.2" + find-up: "npm:^5.0.0" + magic-string: "npm:^0.30.0" + react-docgen: "npm:^7.0.0" + resolve: "npm:^1.22.8" + tsconfig-paths: "npm:^4.2.0" + typescript: "npm:^5.3.2" + vite: "npm:^4.0.0 || ^5.0.0" + peerDependencies: + react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta + react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta + react-native: ">=0.74.5" + react-native-web: ^0.19.12 + storybook: "workspace:^" + languageName: unknown + linkType: soft + "@storybook/react-vite@workspace:*, @storybook/react-vite@workspace:frameworks/react-vite": version: 0.0.0-use.local resolution: "@storybook/react-vite@workspace:frameworks/react-vite" @@ -7605,7 +7954,7 @@ __metadata: languageName: node linkType: hard -"@types/babel__core@npm:*, @types/babel__core@npm:^7, @types/babel__core@npm:^7.18.0": +"@types/babel__core@npm:*, @types/babel__core@npm:^7, @types/babel__core@npm:^7.18.0, @types/babel__core@npm:^7.20.5": version: 7.20.5 resolution: "@types/babel__core@npm:7.20.5" dependencies: @@ -7835,6 +8184,13 @@ __metadata: languageName: node linkType: hard +"@types/estree@npm:1.0.6": + version: 1.0.6 + resolution: "@types/estree@npm:1.0.6" + checksum: 10c0/cdfd751f6f9065442cd40957c07fd80361c962869aa853c1c2fd03e101af8b9389d8ff4955a43a6fcfa223dd387a089937f95be0f3eec21ca527039fd2d9859a + languageName: node + linkType: hard + "@types/estree@npm:^0.0.51": version: 0.0.51 resolution: "@types/estree@npm:0.0.51" @@ -8766,6 +9122,21 @@ __metadata: languageName: node linkType: hard +"@vitejs/plugin-react@npm:^4.3.2": + version: 4.3.3 + resolution: "@vitejs/plugin-react@npm:4.3.3" + dependencies: + "@babel/core": "npm:^7.25.2" + "@babel/plugin-transform-react-jsx-self": "npm:^7.24.7" + "@babel/plugin-transform-react-jsx-source": "npm:^7.24.7" + "@types/babel__core": "npm:^7.20.5" + react-refresh: "npm:^0.14.2" + peerDependencies: + vite: ^4.2.0 || ^5.0.0 + checksum: 10c0/b370c25fb47bb96f0cc51f3aadbbcfce54e40f95a4de67cf932e5ec526f139648da703725c6ea2c71a1b525eb3dd6e3e8ff877da143627cd2575de5ec4f00aa3 + languageName: node + linkType: hard + "@vitejs/plugin-vue@npm:^4.4.0": version: 4.5.2 resolution: "@vitejs/plugin-vue@npm:4.5.2" @@ -11274,6 +11645,20 @@ __metadata: languageName: node linkType: hard +"browserslist@npm:^4.24.0": + version: 4.24.2 + resolution: "browserslist@npm:4.24.2" + dependencies: + caniuse-lite: "npm:^1.0.30001669" + electron-to-chromium: "npm:^1.5.41" + node-releases: "npm:^2.0.18" + update-browserslist-db: "npm:^1.1.1" + bin: + browserslist: cli.js + checksum: 10c0/d747c9fb65ed7b4f1abcae4959405707ed9a7b835639f8a9ba0da2911995a6ab9b0648fd05baf2a4d4e3cf7f9fdbad56d3753f91881e365992c1d49c8d88ff7a + languageName: node + linkType: hard + "buffer-crc32@npm:^0.2.5": version: 0.2.13 resolution: "buffer-crc32@npm:0.2.13" @@ -11534,6 +11919,13 @@ __metadata: languageName: node linkType: hard +"caniuse-lite@npm:^1.0.30001669": + version: 1.0.30001677 + resolution: "caniuse-lite@npm:1.0.30001677" + checksum: 10c0/22b4aa738b213b5d0bc820c26ba23fa265ca90a5c59776e1a686b9ab6fff9120d0825fd920c0a601a4b65056ef40d01548405feb95c8dd6083255f50c71a0864 + languageName: node + linkType: hard + "case-sensitive-paths-webpack-plugin@npm:^2.4.0": version: 2.4.0 resolution: "case-sensitive-paths-webpack-plugin@npm:2.4.0" @@ -13598,6 +13990,13 @@ __metadata: languageName: node linkType: hard +"electron-to-chromium@npm:^1.5.41": + version: 1.5.50 + resolution: "electron-to-chromium@npm:1.5.50" + checksum: 10c0/8b77b18ae833bfe2173e346ac33b8d66b5b5acf0cf5de65df9799f4d482334c938aa0950e4d01391d5fab8994f46c0e9059f4517843e7b8d861f9b0c49eb4c5d + languageName: node + linkType: hard + "elliptic@npm:^6.5.3, elliptic@npm:^6.5.4": version: 6.5.4 resolution: "elliptic@npm:6.5.4" @@ -14265,6 +14664,13 @@ __metadata: languageName: node linkType: hard +"escalade@npm:^3.2.0": + version: 3.2.0 + resolution: "escalade@npm:3.2.0" + checksum: 10c0/ced4dd3a78e15897ed3be74e635110bbf3b08877b0a41be50dcb325ee0e0b5f65fc2d50e9845194d7c4633f327e2e1c6cce00a71b617c5673df0374201d67f65 + languageName: node + linkType: hard + "escape-html@npm:~1.0.3": version: 1.0.3 resolution: "escape-html@npm:1.0.3" @@ -18540,6 +18946,15 @@ __metadata: languageName: node linkType: hard +"jsesc@npm:^3.0.2": + version: 3.0.2 + resolution: "jsesc@npm:3.0.2" + bin: + jsesc: bin/jsesc + checksum: 10c0/ef22148f9e793180b14d8a145ee6f9f60f301abf443288117b4b6c53d0ecd58354898dc506ccbb553a5f7827965cd38bc5fb726575aae93c5e8915e2de8290e1 + languageName: node + linkType: hard + "jsesc@npm:~0.5.0": version: 0.5.0 resolution: "jsesc@npm:0.5.0" @@ -23102,6 +23517,17 @@ __metadata: languageName: node linkType: hard +"postcss@npm:^8.4.43": + version: 8.4.47 + resolution: "postcss@npm:8.4.47" + dependencies: + nanoid: "npm:^3.3.7" + picocolors: "npm:^1.1.0" + source-map-js: "npm:^1.2.1" + checksum: 10c0/929f68b5081b7202709456532cee2a145c1843d391508c5a09de2517e8c4791638f71dd63b1898dba6712f8839d7a6da046c72a5e44c162e908f5911f57b5f44 + languageName: node + linkType: hard + "preact@npm:^10.5.13": version: 10.19.3 resolution: "preact@npm:10.19.3" @@ -23975,6 +24401,13 @@ __metadata: languageName: node linkType: hard +"react-refresh@npm:^0.14.2": + version: 0.14.2 + resolution: "react-refresh@npm:0.14.2" + checksum: 10c0/875b72ef56b147a131e33f2abd6ec059d1989854b3ff438898e4f9310bfcc73acff709445b7ba843318a953cb9424bcc2c05af2b3d80011cee28f25aef3e2ebb + languageName: node + linkType: hard + "react-remove-scroll-bar@npm:^2.3.3": version: 2.3.5 resolution: "react-remove-scroll-bar@npm:2.3.5" @@ -25167,6 +25600,75 @@ __metadata: languageName: node linkType: hard +"rollup@npm:^4.20.0": + version: 4.24.3 + resolution: "rollup@npm:4.24.3" + dependencies: + "@rollup/rollup-android-arm-eabi": "npm:4.24.3" + "@rollup/rollup-android-arm64": "npm:4.24.3" + "@rollup/rollup-darwin-arm64": "npm:4.24.3" + "@rollup/rollup-darwin-x64": "npm:4.24.3" + "@rollup/rollup-freebsd-arm64": "npm:4.24.3" + "@rollup/rollup-freebsd-x64": "npm:4.24.3" + "@rollup/rollup-linux-arm-gnueabihf": "npm:4.24.3" + "@rollup/rollup-linux-arm-musleabihf": "npm:4.24.3" + "@rollup/rollup-linux-arm64-gnu": "npm:4.24.3" + "@rollup/rollup-linux-arm64-musl": "npm:4.24.3" + "@rollup/rollup-linux-powerpc64le-gnu": "npm:4.24.3" + "@rollup/rollup-linux-riscv64-gnu": "npm:4.24.3" + "@rollup/rollup-linux-s390x-gnu": "npm:4.24.3" + "@rollup/rollup-linux-x64-gnu": "npm:4.24.3" + "@rollup/rollup-linux-x64-musl": "npm:4.24.3" + "@rollup/rollup-win32-arm64-msvc": "npm:4.24.3" + "@rollup/rollup-win32-ia32-msvc": "npm:4.24.3" + "@rollup/rollup-win32-x64-msvc": "npm:4.24.3" + "@types/estree": "npm:1.0.6" + fsevents: "npm:~2.3.2" + dependenciesMeta: + "@rollup/rollup-android-arm-eabi": + optional: true + "@rollup/rollup-android-arm64": + optional: true + "@rollup/rollup-darwin-arm64": + optional: true + "@rollup/rollup-darwin-x64": + optional: true + "@rollup/rollup-freebsd-arm64": + optional: true + "@rollup/rollup-freebsd-x64": + optional: true + "@rollup/rollup-linux-arm-gnueabihf": + optional: true + "@rollup/rollup-linux-arm-musleabihf": + optional: true + "@rollup/rollup-linux-arm64-gnu": + optional: true + "@rollup/rollup-linux-arm64-musl": + optional: true + "@rollup/rollup-linux-powerpc64le-gnu": + optional: true + "@rollup/rollup-linux-riscv64-gnu": + optional: true + "@rollup/rollup-linux-s390x-gnu": + optional: true + "@rollup/rollup-linux-x64-gnu": + optional: true + "@rollup/rollup-linux-x64-musl": + optional: true + "@rollup/rollup-win32-arm64-msvc": + optional: true + "@rollup/rollup-win32-ia32-msvc": + optional: true + "@rollup/rollup-win32-x64-msvc": + optional: true + fsevents: + optional: true + bin: + rollup: dist/bin/rollup + checksum: 10c0/32425475db7a0bcb8937f92488ee8e48f7adaff711b5b5c52d86d37114c9f21fe756e21a91312d12d30da146d33d8478a11dfeb6249dbecc54fbfcc78da46005 + languageName: node + linkType: hard + "rsvp@npm:^3.0.14, rsvp@npm:^3.0.18": version: 3.6.2 resolution: "rsvp@npm:3.6.2" @@ -26014,6 +26516,13 @@ __metadata: languageName: node linkType: hard +"source-map-js@npm:^1.2.1": + version: 1.2.1 + resolution: "source-map-js@npm:1.2.1" + checksum: 10c0/7bda1fc4c197e3c6ff17de1b8b2c20e60af81b63a52cb32ec5a5d67a20a7d42651e2cb34ebe93833c5a2a084377e17455854fee3e21e7925c64a51b6a52b0faf + languageName: node + linkType: hard + "source-map-loader@npm:5.0.0": version: 5.0.0 resolution: "source-map-loader@npm:5.0.0" @@ -28182,6 +28691,20 @@ __metadata: languageName: node linkType: hard +"update-browserslist-db@npm:^1.1.1": + version: 1.1.1 + resolution: "update-browserslist-db@npm:1.1.1" + dependencies: + escalade: "npm:^3.2.0" + picocolors: "npm:^1.1.0" + peerDependencies: + browserslist: ">= 4.21.0" + bin: + update-browserslist-db: cli.js + checksum: 10c0/536a2979adda2b4be81b07e311bd2f3ad5e978690987956bc5f514130ad50cac87cd22c710b686d79731e00fbee8ef43efe5fcd72baa241045209195d43dcc80 + languageName: node + linkType: hard + "uri-js@npm:^4.2.2": version: 4.4.1 resolution: "uri-js@npm:4.4.1" @@ -28621,6 +29144,49 @@ __metadata: languageName: node linkType: hard +"vite@npm:^4.0.0 || ^5.0.0": + version: 5.4.10 + resolution: "vite@npm:5.4.10" + dependencies: + esbuild: "npm:^0.21.3" + fsevents: "npm:~2.3.3" + postcss: "npm:^8.4.43" + rollup: "npm:^4.20.0" + peerDependencies: + "@types/node": ^18.0.0 || >=20.0.0 + less: "*" + lightningcss: ^1.21.0 + sass: "*" + sass-embedded: "*" + stylus: "*" + sugarss: "*" + terser: ^5.4.0 + dependenciesMeta: + fsevents: + optional: true + peerDependenciesMeta: + "@types/node": + optional: true + less: + optional: true + lightningcss: + optional: true + sass: + optional: true + sass-embedded: + optional: true + stylus: + optional: true + sugarss: + optional: true + terser: + optional: true + bin: + vite: bin/vite.js + checksum: 10c0/4ef4807d2fd166a920de244dbcec791ba8a903b017a7d8e9f9b4ac40d23f8152c1100610583d08f542b47ca617a0505cfc5f8407377d610599d58296996691ed + languageName: node + linkType: hard + "vite@npm:^4.0.0, vite@npm:^4.0.4": version: 4.5.1 resolution: "vite@npm:4.5.1" diff --git a/scripts/sandbox/generate.ts b/scripts/sandbox/generate.ts index db3d3ce02f2..1c561845369 100755 --- a/scripts/sandbox/generate.ts +++ b/scripts/sandbox/generate.ts @@ -189,6 +189,8 @@ const runGenerators = async ( flags = ['--type html']; } else if (expected.renderer === '@storybook/server') { flags = ['--type server']; + } else if (expected.framework === '@storybook/react-native-web-vite') { + flags = ['--type react_native_web']; } const time = process.hrtime(); diff --git a/scripts/tasks/sandbox-parts.ts b/scripts/tasks/sandbox-parts.ts index 7123357ae93..4f8dd85ecc4 100644 --- a/scripts/tasks/sandbox-parts.ts +++ b/scripts/tasks/sandbox-parts.ts @@ -138,6 +138,8 @@ export const init: Task['run'] = async ( extra = { type: 'html' }; } else if (template.expected.renderer === '@storybook/server') { extra = { type: 'server' }; + } else if (template.expected.framework === '@storybook/react-native-web-vite') { + extra = { type: 'react_native_web' }; } await executeCLIStep(steps.init, { From 59c10e8c8d3f5051d3385e6e5a5c3d6e8669a0d1 Mon Sep 17 00:00:00 2001 From: Daniel Williams Date: Sun, 3 Nov 2024 17:29:43 +0000 Subject: [PATCH 002/101] feat: add template files --- .../react-native-web-vite/package.json | 6 +- .../template/cli/.eslintrc.json | 6 + .../template/cli/ts-3-8/Button.stories.tsx | 45 +++++ .../template/cli/ts-3-8/Button.tsx | 123 +++++++++++++ .../template/cli/ts-3-8/Header.stories.tsx | 27 +++ .../template/cli/ts-3-8/Header.tsx | 82 +++++++++ .../template/cli/ts-3-8/Page.stories.tsx | 19 ++ .../template/cli/ts-3-8/Page.tsx | 167 ++++++++++++++++++ .../template/cli/ts-4-9/Button.stories.tsx | 45 +++++ .../template/cli/ts-4-9/Button.tsx | 123 +++++++++++++ .../template/cli/ts-4-9/Header.stories.tsx | 27 +++ .../template/cli/ts-4-9/Header.tsx | 80 +++++++++ .../template/cli/ts-4-9/Page.stories.tsx | 15 ++ .../template/cli/ts-4-9/Page.tsx | 159 +++++++++++++++++ .../src/generators/baseGenerator.ts | 2 +- 15 files changed, 922 insertions(+), 4 deletions(-) create mode 100644 code/frameworks/react-native-web-vite/template/cli/.eslintrc.json create mode 100644 code/frameworks/react-native-web-vite/template/cli/ts-3-8/Button.stories.tsx create mode 100644 code/frameworks/react-native-web-vite/template/cli/ts-3-8/Button.tsx create mode 100644 code/frameworks/react-native-web-vite/template/cli/ts-3-8/Header.stories.tsx create mode 100644 code/frameworks/react-native-web-vite/template/cli/ts-3-8/Header.tsx create mode 100644 code/frameworks/react-native-web-vite/template/cli/ts-3-8/Page.stories.tsx create mode 100644 code/frameworks/react-native-web-vite/template/cli/ts-3-8/Page.tsx create mode 100644 code/frameworks/react-native-web-vite/template/cli/ts-4-9/Button.stories.tsx create mode 100644 code/frameworks/react-native-web-vite/template/cli/ts-4-9/Button.tsx create mode 100644 code/frameworks/react-native-web-vite/template/cli/ts-4-9/Header.stories.tsx create mode 100644 code/frameworks/react-native-web-vite/template/cli/ts-4-9/Header.tsx create mode 100644 code/frameworks/react-native-web-vite/template/cli/ts-4-9/Page.stories.tsx create mode 100644 code/frameworks/react-native-web-vite/template/cli/ts-4-9/Page.tsx diff --git a/code/frameworks/react-native-web-vite/package.json b/code/frameworks/react-native-web-vite/package.json index 0c9d3ee7a36..ea71b798d29 100644 --- a/code/frameworks/react-native-web-vite/package.json +++ b/code/frameworks/react-native-web-vite/package.json @@ -57,8 +57,7 @@ "magic-string": "^0.30.0", "react-docgen": "^7.0.0", "resolve": "^1.22.8", - "tsconfig-paths": "^4.2.0", - "vite": "^4.0.0 || ^5.0.0" + "tsconfig-paths": "^4.2.0" }, "devDependencies": { "@types/node": "^22.0.0", @@ -69,7 +68,8 @@ "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta", "react-native": ">=0.74.5", "react-native-web": "^0.19.12", - "storybook": "workspace:^" + "storybook": "workspace:^", + "vite": "^4.0.0 || ^5.0.0" }, "engines": { "node": ">=18.0.0" diff --git a/code/frameworks/react-native-web-vite/template/cli/.eslintrc.json b/code/frameworks/react-native-web-vite/template/cli/.eslintrc.json new file mode 100644 index 00000000000..012842ba7b2 --- /dev/null +++ b/code/frameworks/react-native-web-vite/template/cli/.eslintrc.json @@ -0,0 +1,6 @@ +{ + "rules": { + "import/extensions": "off", + "react/no-unknown-property": "off" + } +} diff --git a/code/frameworks/react-native-web-vite/template/cli/ts-3-8/Button.stories.tsx b/code/frameworks/react-native-web-vite/template/cli/ts-3-8/Button.stories.tsx new file mode 100644 index 00000000000..b9d1f594317 --- /dev/null +++ b/code/frameworks/react-native-web-vite/template/cli/ts-3-8/Button.stories.tsx @@ -0,0 +1,45 @@ +import type { Meta, StoryObj } from '@storybook/react'; +import { View } from 'react-native'; +import { Button } from './Button'; + +const meta: Meta = { + component: Button, + decorators: [ + (Story) => ( + + + + ), + ], +}; + +export default meta; + +type Story = StoryObj; + +export const Primary: Story = { + args: { + primary: true, + label: 'Button', + }, +}; + +export const Secondary: Story = { + args: { + label: 'Button', + }, +}; + +export const Large: Story = { + args: { + size: 'large', + label: 'Button', + }, +}; + +export const Small: Story = { + args: { + size: 'small', + label: 'Button', + }, +}; diff --git a/code/frameworks/react-native-web-vite/template/cli/ts-3-8/Button.tsx b/code/frameworks/react-native-web-vite/template/cli/ts-3-8/Button.tsx new file mode 100644 index 00000000000..5ca6dffb1b0 --- /dev/null +++ b/code/frameworks/react-native-web-vite/template/cli/ts-3-8/Button.tsx @@ -0,0 +1,123 @@ +import { + StyleSheet, + StyleProp, + ViewStyle, + TouchableOpacity, + Text, + View, +} from 'react-native'; + +export interface ButtonProps { + /** + * Is this the principal call to action on the page? + */ + primary?: boolean; + /** + * What background color to use + */ + backgroundColor?: string; + /** + * How large should the button be? + */ + size?: 'small' | 'medium' | 'large'; + /** + * Button contents + */ + label: string; + /** + * Optional click handler + */ + onPress?: () => void; + style?: StyleProp; +} + +/** + * Primary UI component for user interaction + */ +export const Button = ({ + primary = false, + size = 'medium', + backgroundColor, + label, + style, + onPress, +}: ButtonProps) => { + const modeStyle = primary ? styles.primary : styles.secondary; + const textModeStyle = primary ? styles.primaryText : styles.secondaryText; + + const sizeStyle = styles[size]; + const textSizeStyle = textSizeStyles[size]; + + return ( + + + {label} + + + ); +}; + +const styles = StyleSheet.create({ + button: { + borderWidth: 0, + borderRadius: 48, + }, + buttonText: { + fontWeight: '700', + lineHeight: 1, + }, + primary: { + backgroundColor: '#1ea7fd', + }, + primaryText: { + color: 'white', + }, + secondary: { + backgroundColor: 'transparent', + borderColor: 'rgba(0, 0, 0, 0.15)', + borderWidth: 1, + }, + secondaryText: { + color: '#333', + }, + small: { + paddingVertical: 10, + paddingHorizontal: 16, + }, + smallText: { + fontSize: 12, + }, + medium: { + paddingVertical: 11, + paddingHorizontal: 20, + }, + mediumText: { + fontSize: 14, + }, + large: { + paddingVertical: 12, + paddingHorizontal: 24, + }, + largeText: { + fontSize: 16, + }, +}); + +const textSizeStyles = { + small: styles.smallText, + medium: styles.mediumText, + large: styles.largeText, +}; diff --git a/code/frameworks/react-native-web-vite/template/cli/ts-3-8/Header.stories.tsx b/code/frameworks/react-native-web-vite/template/cli/ts-3-8/Header.stories.tsx new file mode 100644 index 00000000000..0781c62ea63 --- /dev/null +++ b/code/frameworks/react-native-web-vite/template/cli/ts-3-8/Header.stories.tsx @@ -0,0 +1,27 @@ +import { Meta, StoryObj } from '@storybook/react'; +import { Header } from './Header'; + +const meta: Meta = { + component: Header, +}; + +export default meta; + +type Story = StoryObj; + +export const LoggedIn: Story = { + args: { + user: {}, + onLogin: () => {}, + onLogout: () => {}, + onCreateAccount: () => {}, + }, +}; + +export const LoggedOut: Story = { + args: { + onLogin: () => {}, + onLogout: () => {}, + onCreateAccount: () => {}, + }, +}; diff --git a/code/frameworks/react-native-web-vite/template/cli/ts-3-8/Header.tsx b/code/frameworks/react-native-web-vite/template/cli/ts-3-8/Header.tsx new file mode 100644 index 00000000000..34ab15d11e6 --- /dev/null +++ b/code/frameworks/react-native-web-vite/template/cli/ts-3-8/Header.tsx @@ -0,0 +1,82 @@ +import { Button } from './Button'; +import { View, Text, StyleSheet } from 'react-native'; + +export type HeaderProps = { + user?: {}; + onLogin: () => void; + onLogout: () => void; + onCreateAccount: () => void; +}; + +export const Header = ({ + user, + onLogin, + onLogout, + onCreateAccount, +}: HeaderProps) => ( + + + + Acme + + + + {user ? ( + + } + center={state.running ? 'Running...' : 'Run tests'} + onClick={onClick} + /> + ); }; addons.register(ADDON_ID, (api) => { @@ -107,17 +145,12 @@ addons.register(ADDON_ID, (api) => { watchable: true, name: 'Component tests', - contextMenu: ({ context, state }) => { + contextMenu: ({ context, state }, { ListItem }) => { if (context.type === 'docs') { return null; } - return ( -
- Testing {state?.progress?.percentageCompleted} {state.running ? '!' : '?'} -
- ); - // return ; + return ; }, title: ({ crashed, failed }) => crashed || failed ? 'Component tests failed' : 'Component tests', @@ -207,20 +240,20 @@ addons.register(ADDON_ID, (api) => { }>); } + const filter = ({ state }: Combo) => { + return { + storyId: state.storyId, + }; + }; + addons.add(PANEL_ID, { type: types.PANEL, title: Title, match: ({ viewMode }) => viewMode === 'story', render: ({ active }) => { - const newLocal = useCallback(({ state }: Combo) => { - return { - storyId: state.storyId, - }; - }, []); - return ( - {({ storyId }) => } + {({ storyId }) => } ); }, diff --git a/code/core/src/components/components/tooltip/TooltipLinkList.tsx b/code/core/src/components/components/tooltip/TooltipLinkList.tsx index c18fe5476d9..4fa393ee372 100644 --- a/code/core/src/components/components/tooltip/TooltipLinkList.tsx +++ b/code/core/src/components/components/tooltip/TooltipLinkList.tsx @@ -15,7 +15,8 @@ const List = styled.div( }, ({ theme }) => ({ borderRadius: theme.appBorderRadius + 2, - }) + }), + ({ theme }) => (theme.base === 'dark' ? { background: theme.background.content } : {}) ); const Group = styled.div(({ theme }) => ({ diff --git a/code/core/src/manager/components/sidebar/Tree.tsx b/code/core/src/manager/components/sidebar/Tree.tsx index dd76352d34e..8275f585d87 100644 --- a/code/core/src/manager/components/sidebar/Tree.tsx +++ b/code/core/src/manager/components/sidebar/Tree.tsx @@ -1,7 +1,13 @@ import type { ComponentProps, FC, MutableRefObject } from 'react'; import React, { useCallback, useMemo, useRef, useState } from 'react'; -import { Button, IconButton, TooltipLinkList, WithTooltip } from '@storybook/core/components'; +import { + Button, + IconButton, + ListItem, + TooltipLinkList, + WithTooltip, +} from '@storybook/core/components'; import { styled, useTheme } from '@storybook/core/theming'; import { type API_HashEntry, @@ -176,6 +182,10 @@ const StatusIconMap = { unknown: null, }; +const ContextMenu = { + ListItem, +}; + const statusOrder: API_StatusValue[] = ['success', 'error', 'warn', 'pending', 'unknown']; const Node = React.memo(function Node({ @@ -746,7 +756,7 @@ function generateTestProviderLinks(testProviders: TestProviders, context: API_Ha return null; } - const content = e.contextMenu?.({ context, state }); + const content = e.contextMenu?.({ context, state }, ContextMenu); if (!content) { return null; diff --git a/code/core/src/types/modules/addons.ts b/code/core/src/types/modules/addons.ts index 1be2e09126e..18c7a6c1f83 100644 --- a/code/core/src/types/modules/addons.ts +++ b/code/core/src/types/modules/addons.ts @@ -1,6 +1,7 @@ /* eslint-disable @typescript-eslint/naming-convention */ import type { FC, PropsWithChildren, ReactElement, ReactNode } from 'react'; +import type { ListItem } from '../../components'; import type { TestingModuleProgressReportProgress } from '../../core-events'; import type { Addon, StoryEntry } from '../../manager-api'; import type { RenderData as RouterData } from '../../router/types'; @@ -476,10 +477,13 @@ export interface Addon_TestProviderType< name: string; title: (state: Addon_TestProviderState
) => ReactNode; description: (state: Addon_TestProviderState
) => ReactNode; - contextMenu?: (options: { - context: API_HashEntry; - state: Addon_TestProviderState
; - }) => ReactNode; + contextMenu?: ( + options: { + context: API_HashEntry; + state: Addon_TestProviderState
; + }, + components: { ListItem: typeof ListItem } + ) => ReactNode; mapStatusUpdate?: ( state: Addon_TestProviderState
) => API_StatusUpdate | ((state: API_StatusState) => API_StatusUpdate); From 7bfc2add3dcc3fb9d552b5dbb6ee82ae8174173e Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Tue, 12 Nov 2024 15:00:38 +0100 Subject: [PATCH 016/101] cleanup --- code/.storybook/manager.tsx | 47 ------------------------------------- 1 file changed, 47 deletions(-) diff --git a/code/.storybook/manager.tsx b/code/.storybook/manager.tsx index 5b6650ba4d7..1a06234f6e2 100644 --- a/code/.storybook/manager.tsx +++ b/code/.storybook/manager.tsx @@ -1,10 +1,4 @@ -import React, { useEffect, useState } from 'react'; - -import { IconButton } from 'storybook/internal/components'; import { addons } from 'storybook/internal/manager-api'; -import { Addon_TypesEnum } from 'storybook/internal/types'; - -import { AdminIcon } from '@storybook/icons'; import { startCase } from 'es-toolkit/compat'; @@ -13,44 +7,3 @@ addons.setConfig({ renderLabel: ({ name, type }) => (type === 'story' ? name : startCase(name)), }, }); - -// // TEMP, to demo new api -// addons.add('my-addon', { -// type: Addon_TypesEnum.experimental_CONTEXT, -// render(props) { -// console.log({ props }); - -// if (props.entry.type === 'docs') { -// return null; -// } - -// return
My Test
; -// }, -// }); - -// TEMP, to set status once, to have the status bullet show up -addons.register('my-addon', (api) => { - addons.add('my-addon2', { - type: Addon_TypesEnum.TOOL, - title: 'My Addon 2', - render() { - return ( - { - const x = api.getCurrentStoryData(); - api.experimental_updateStatus('my-addon', { - [x.id]: { - description: 'This is a test', - status: 'error', - title: 'Test', - data: { foo: 'bar' }, - }, - }); - }} - > - - - ); - }, - }); -}); From 15e0f2cce57fe2da1abdfda9cf899b0ff6494efc Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Tue, 12 Nov 2024 15:01:23 +0100 Subject: [PATCH 017/101] cleanup --- code/addons/test/src/manager.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/addons/test/src/manager.tsx b/code/addons/test/src/manager.tsx index 08aa2ca7425..59a7962162d 100644 --- a/code/addons/test/src/manager.tsx +++ b/code/addons/test/src/manager.tsx @@ -17,6 +17,7 @@ import { useAddonState, useStorybookApi, } from 'storybook/internal/manager-api'; +import { useTheme } from 'storybook/internal/theming'; import { type API_HashEntry, type API_StatusObject, @@ -27,7 +28,6 @@ import { } from 'storybook/internal/types'; import { PlayIcon } from '@storybook/icons'; -import { useTheme } from '@storybook/theming'; import { Panel } from './Panel'; import { GlobalErrorModal } from './components/GlobalErrorModal'; From 9faaa5925f8393f97122776616a408438d861b31 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Tue, 12 Nov 2024 15:10:22 +0100 Subject: [PATCH 018/101] cleanup --- code/core/src/manager-api/modules/addons.ts | 1 - code/core/src/types/modules/addons.ts | 3 --- 2 files changed, 4 deletions(-) diff --git a/code/core/src/manager-api/modules/addons.ts b/code/core/src/manager-api/modules/addons.ts index 50a2379c14e..16a35fcfc9a 100644 --- a/code/core/src/manager-api/modules/addons.ts +++ b/code/core/src/manager-api/modules/addons.ts @@ -28,7 +28,6 @@ export interface SubAPI { getElements: < T extends | Addon_Types - | Addon_TypesEnum.experimental_CONTEXT | Addon_TypesEnum.experimental_PAGE | Addon_TypesEnum.experimental_SIDEBAR_BOTTOM | Addon_TypesEnum.experimental_TEST_PROVIDER diff --git a/code/core/src/types/modules/addons.ts b/code/core/src/types/modules/addons.ts index 18c7a6c1f83..ebacb981b9b 100644 --- a/code/core/src/types/modules/addons.ts +++ b/code/core/src/types/modules/addons.ts @@ -510,7 +510,6 @@ export type Addon_TestProviderState
Date: Tue, 12 Nov 2024 16:04:44 +0100 Subject: [PATCH 019/101] fixes --- .../components/sidebar/Refs.stories.tsx | 13 ++++++- .../components/sidebar/Sidebar.stories.tsx | 1 + .../sidebar/SidebarBottom.stories.tsx | 35 +++++++++++++++++-- .../components/sidebar/SidebarBottom.tsx | 2 +- .../components/sidebar/Tree.stories.tsx | 25 +++++++++++-- 5 files changed, 70 insertions(+), 6 deletions(-) diff --git a/code/core/src/manager/components/sidebar/Refs.stories.tsx b/code/core/src/manager/components/sidebar/Refs.stories.tsx index a26cad976dc..a042970bead 100644 --- a/code/core/src/manager/components/sidebar/Refs.stories.tsx +++ b/code/core/src/manager/components/sidebar/Refs.stories.tsx @@ -1,5 +1,7 @@ import React from 'react'; +import { fn } from '@storybook/test'; + import { ManagerContext } from '@storybook/core/manager-api'; import { standardData as standardHeaderData } from './Heading.stories'; @@ -8,6 +10,15 @@ import { Ref } from './Refs'; import { mockDataset } from './mockdata'; import type { RefType } from './types'; +const managerContext = { + state: { docsOptions: {}, testProviders: {} }, + api: { + on: fn().mockName('api::on'), + off: fn().mockName('api::off'), + getElements: fn(() => ({})), + }, +} as any; + export default { component: Ref, title: 'Sidebar/Refs', @@ -16,7 +27,7 @@ export default { globals: { sb_theme: 'side-by-side' }, decorators: [ (storyFn: any) => ( - + {storyFn()} diff --git a/code/core/src/manager/components/sidebar/Sidebar.stories.tsx b/code/core/src/manager/components/sidebar/Sidebar.stories.tsx index dcc6b06096c..53f22957f17 100644 --- a/code/core/src/manager/components/sidebar/Sidebar.stories.tsx +++ b/code/core/src/manager/components/sidebar/Sidebar.stories.tsx @@ -33,6 +33,7 @@ const managerContext: any = { autodocs: 'tag', docsMode: false, }, + testProviders: {}, }, api: { emit: fn().mockName('api::emit'), diff --git a/code/core/src/manager/components/sidebar/SidebarBottom.stories.tsx b/code/core/src/manager/components/sidebar/SidebarBottom.stories.tsx index 8d7d2c42f48..4e611ddd31a 100644 --- a/code/core/src/manager/components/sidebar/SidebarBottom.stories.tsx +++ b/code/core/src/manager/components/sidebar/SidebarBottom.stories.tsx @@ -1,14 +1,40 @@ +import React from 'react'; + import { Addon_TypesEnum } from '@storybook/core/types'; +import type { Meta } from '@storybook/react/*'; import { fn } from '@storybook/test'; +import { type API, ManagerContext } from '@storybook/core/manager-api'; + import { SidebarBottomBase } from './SidebarBottom'; +const managerContext: any = { + state: { + docsOptions: { + defaultName: 'Docs', + autodocs: 'tag', + docsMode: false, + }, + testProviders: {}, + }, + api: { + on: fn().mockName('api::on'), + off: fn().mockName('api::off'), + getElements: fn(() => ({})), + updateTestproviderState: fn(), + }, +}; + export default { component: SidebarBottomBase, args: { isDevelopment: true, + api: { + on: fn(), + off: fn(), clearNotification: fn(), + updateTestproviderState: fn(), emit: fn(), experimental_setFilter: fn(), getChannel: fn(), @@ -29,9 +55,14 @@ export default { runnable: true, }, })), - }, + } as any as API, }, -}; + decorators: [ + (storyFn) => ( + {storyFn()} + ), + ], +} as Meta; export const Errors = { args: { diff --git a/code/core/src/manager/components/sidebar/SidebarBottom.tsx b/code/core/src/manager/components/sidebar/SidebarBottom.tsx index b7a329df934..9bddc0f1269 100644 --- a/code/core/src/manager/components/sidebar/SidebarBottom.tsx +++ b/code/core/src/manager/components/sidebar/SidebarBottom.tsx @@ -190,7 +190,7 @@ export const SidebarBottomBase = ({ }; }, [api, testProviders, updateTestProvider, clearState]); - const testProvidersArray = Object.values(testProviders); + const testProvidersArray = Object.values(testProviders || {}); if (!hasWarnings && !hasErrors && !testProvidersArray.length && !notifications.length) { return null; } diff --git a/code/core/src/manager/components/sidebar/Tree.stories.tsx b/code/core/src/manager/components/sidebar/Tree.stories.tsx index a8f3a227b2d..fec1ec64805 100644 --- a/code/core/src/manager/components/sidebar/Tree.stories.tsx +++ b/code/core/src/manager/components/sidebar/Tree.stories.tsx @@ -2,9 +2,9 @@ import React, { useState } from 'react'; import type { Meta, StoryObj } from '@storybook/react'; -import { expect, within } from '@storybook/test'; +import { expect, fn, within } from '@storybook/test'; -import type { ComponentEntry, IndexHash } from '@storybook/core/manager-api'; +import { type ComponentEntry, type IndexHash, ManagerContext } from '@storybook/core/manager-api'; import { action } from '@storybook/addon-actions'; @@ -12,6 +12,22 @@ import { DEFAULT_REF_ID } from './Sidebar'; import { Tree } from './Tree'; import { index } from './mockdata.large'; +const managerContext: any = { + state: { + docsOptions: { + defaultName: 'Docs', + autodocs: 'tag', + docsMode: false, + }, + testProviders: {}, + }, + api: { + on: fn().mockName('api::on'), + off: fn().mockName('api::off'), + getElements: fn(() => ({})), + }, +}; + const meta = { component: Tree, title: 'Sidebar/Tree', @@ -35,6 +51,11 @@ const meta = { }, chromatic: { viewports: [380] }, }, + decorators: [ + (storyFn) => ( + {storyFn()} + ), + ], } as Meta; export default meta; From 9d4eae2cfb55f2fe801702fa3246a1cbeb64ce68 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Wed, 13 Nov 2024 10:20:12 +0100 Subject: [PATCH 020/101] remove contextMenu from test addon until it's ready for primetime --- code/addons/test/src/manager.tsx | 13 +++++++------ .../modules/experimental_testmodule.ts | 15 ++++++++++++--- 2 files changed, 19 insertions(+), 9 deletions(-) diff --git a/code/addons/test/src/manager.tsx b/code/addons/test/src/manager.tsx index 59a7962162d..727b421cc42 100644 --- a/code/addons/test/src/manager.tsx +++ b/code/addons/test/src/manager.tsx @@ -145,13 +145,14 @@ addons.register(ADDON_ID, (api) => { watchable: true, name: 'Component tests', - contextMenu: ({ context, state }, { ListItem }) => { - if (context.type === 'docs') { - return null; - } + // disabled for now + // contextMenu: ({ context, state }, { ListItem }) => { + // if (context.type === 'docs') { + // return null; + // } - return ; - }, + // return ; + // }, title: ({ crashed, failed }) => crashed || failed ? 'Component tests failed' : 'Component tests', description: ({ failed, running, watching, progress, crashed, error }) => { diff --git a/code/core/src/manager-api/modules/experimental_testmodule.ts b/code/core/src/manager-api/modules/experimental_testmodule.ts index ed46e454be4..c7fb7eeec78 100644 --- a/code/core/src/manager-api/modules/experimental_testmodule.ts +++ b/code/core/src/manager-api/modules/experimental_testmodule.ts @@ -26,11 +26,15 @@ const initialTestProviderState: TestProviderState = { crashed: false, }; +interface RunOptions { + selection?: string[]; +} + export type SubAPI = { getTestproviderState(id: string): TestProviderState | undefined; updateTestproviderState(id: TestProviderId, update: Partial): void; clearTestproviderState(id: TestProviderId): void; - runTestprovider(id: TestProviderId): void; + runTestprovider(id: TestProviderId, options?: RunOptions): void; cancelTestprovider(id: TestProviderId): void; }; @@ -75,8 +79,13 @@ export const init: ModuleFn = ({ store, fullAPI }) => { { persistence: 'session' } ); }, - runTestprovider(id) { - fullAPI.emit(TESTING_MODULE_RUN_ALL_REQUEST, { providerId: id }); + runTestprovider(id, options) { + if (options?.selection) { + const listOfFiles = []; + // fullAPI.emit(TESTING_MODULE_RUN_REQUEST, { providerId: id, selection: [] }); + } else { + fullAPI.emit(TESTING_MODULE_RUN_ALL_REQUEST, { providerId: id }); + } return () => api.cancelTestprovider(id); }, From 7ad41a75b18e34672277124cf8a0c80816748c00 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Wed, 13 Nov 2024 12:05:10 +0100 Subject: [PATCH 021/101] improvements --- code/addons/test/src/manager.tsx | 3 +- .../components/tooltip/TooltipLinkList.tsx | 3 +- .../modules/experimental_testmodule.ts | 34 ++++++++++++------- .../src/manager/components/sidebar/Tree.tsx | 16 ++++----- 4 files changed, 30 insertions(+), 26 deletions(-) diff --git a/code/addons/test/src/manager.tsx b/code/addons/test/src/manager.tsx index 727b421cc42..00d9bb32d03 100644 --- a/code/addons/test/src/manager.tsx +++ b/code/addons/test/src/manager.tsx @@ -109,8 +109,7 @@ const ContextMenuItem: FC<{ const onClick = useCallback( (event: SyntheticEvent) => { event.stopPropagation(); - // TODO - actually send along a sub-set based on `context` to test. - api.getChannel().emit(TESTING_MODULE_RUN_ALL_REQUEST, { providerId: TEST_PROVIDER_ID }); + api.runTestprovider(TEST_PROVIDER_ID, { selection: [context.id] }); }, [api] ); diff --git a/code/core/src/components/components/tooltip/TooltipLinkList.tsx b/code/core/src/components/components/tooltip/TooltipLinkList.tsx index 4fa393ee372..844a4ed228b 100644 --- a/code/core/src/components/components/tooltip/TooltipLinkList.tsx +++ b/code/core/src/components/components/tooltip/TooltipLinkList.tsx @@ -42,7 +42,6 @@ export type Link = CustomLink | NormalLink; */ interface CustomLink { id: string; - icon?: any; content: ReactNode; } @@ -68,7 +67,7 @@ export interface TooltipLinkListProps extends ComponentProps { export const TooltipLinkList = ({ links, LinkWrapper, ...props }: TooltipLinkListProps) => { const groups = Array.isArray(links[0]) ? (links as Link[][]) : [links as Link[]]; - const isIndented = groups.some((group) => group.some((link) => link.icon)); + const isIndented = groups.some((group) => group.some((link) => 'icon' in link && link.icon)); return ( {groups diff --git a/code/core/src/manager-api/modules/experimental_testmodule.ts b/code/core/src/manager-api/modules/experimental_testmodule.ts index c7fb7eeec78..b9b2185590c 100644 --- a/code/core/src/manager-api/modules/experimental_testmodule.ts +++ b/code/core/src/manager-api/modules/experimental_testmodule.ts @@ -14,8 +14,6 @@ export type SubState = { testProviders: TestProviders; }; -const STORAGE_KEY = '@storybook/manager/test-providers'; - const initialTestProviderState: TestProviderState = { details: {} as { [key: string]: any }, cancellable: false, @@ -39,15 +37,8 @@ export type SubAPI = { }; export const init: ModuleFn = ({ store, fullAPI }) => { - let sessionState: TestProviders = {}; - try { - sessionState = JSON.parse(sessionStorage.getItem(STORAGE_KEY) || '{}'); - } catch (_) { - // - } - const state: SubState = { - testProviders: sessionState, + testProviders: store.getState().testProviders, }; const api: SubAPI = { @@ -81,7 +72,17 @@ export const init: ModuleFn = ({ store, fullAPI }) => { }, runTestprovider(id, options) { if (options?.selection) { - const listOfFiles = []; + const listOfFiles: string[] = []; + + // TODO: get actual list and emit, this notification is for development purposes + fullAPI.addNotification({ + id: 'testing-module', + + content: { + headline: 'Running tests', + subHeadline: `Running tests for ${listOfFiles} stories`, + }, + }); // fullAPI.emit(TESTING_MODULE_RUN_REQUEST, { providerId: id, selection: [] }); } else { fullAPI.emit(TESTING_MODULE_RUN_ALL_REQUEST, { providerId: id }); @@ -96,9 +97,16 @@ export const init: ModuleFn = ({ store, fullAPI }) => { }; const initModule = async () => { - const initialState = Object.fromEntries( + const initialState: TestProviders = Object.fromEntries( Object.entries(fullAPI.getElements(Addon_TypesEnum.experimental_TEST_PROVIDER)).map( - ([id, config]) => [id, { ...config, ...initialTestProviderState, ...sessionState[id] }] + ([id, config]) => [ + id, + { + ...config, + ...initialTestProviderState, + ...state.testProviders[id], + } as TestProviders[0], + ] ) ); diff --git a/code/core/src/manager/components/sidebar/Tree.tsx b/code/core/src/manager/components/sidebar/Tree.tsx index 8275f585d87..a4fe88248f1 100644 --- a/code/core/src/manager/components/sidebar/Tree.tsx +++ b/code/core/src/manager/components/sidebar/Tree.tsx @@ -1,4 +1,4 @@ -import type { ComponentProps, FC, MutableRefObject } from 'react'; +import type { ComponentProps, FC, MutableRefObject, SyntheticEvent } from 'react'; import React, { useCallback, useMemo, useRef, useState } from 'react'; import { @@ -445,7 +445,7 @@ const useContextMenu = (context: API_HashEntry, links: Link[], api: API) => { onMouseLeave: () => { setIsItemHovered(false); }, - onOpen: (event: any) => { + onOpen: (event: SyntheticEvent) => { event.stopPropagation(); setIsOpen(true); }, @@ -470,8 +470,8 @@ const useContextMenu = (context: API_HashEntry, links: Link[], api: API) => { closeOnOutsideClick onClick={handlers.onOpen} placement="bottom-end" - onVisibleChange={(visisble) => { - if (!visisble) { + onVisibleChange={(visible) => { + if (!visible) { handlers.onClose(); } else { setIsOpen(true); @@ -749,21 +749,19 @@ export const Tree = React.memo<{ function generateTestProviderLinks(testProviders: TestProviders, context: API_HashEntry): Link[] { return Object.entries(testProviders) - .map(([k, e]) => { - const state = e; - + .map(([testProviderId, state]) => { if (!state) { return null; } - const content = e.contextMenu?.({ context, state }, ContextMenu); + const content = state.contextMenu?.({ context, state }, ContextMenu); if (!content) { return null; } return { - id: k, + id: testProviderId, content, }; }) From 4ea557eaeb3ba37bead8f1b3f1cbde3ee286385c Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Wed, 13 Nov 2024 12:23:00 +0100 Subject: [PATCH 022/101] fix build race condition --- code/core/scripts/helpers/generateTypesFiles.ts | 6 ++++++ code/core/scripts/prep.ts | 1 - 2 files changed, 6 insertions(+), 1 deletion(-) diff --git a/code/core/scripts/helpers/generateTypesFiles.ts b/code/core/scripts/helpers/generateTypesFiles.ts index fd7a7eff789..e3a46d3567b 100644 --- a/code/core/scripts/helpers/generateTypesFiles.ts +++ b/code/core/scripts/helpers/generateTypesFiles.ts @@ -3,6 +3,7 @@ import { join, relative } from 'node:path'; import { spawn } from '../../../../scripts/prepare/tools'; import { limit, picocolors, process } from '../../../../scripts/prepare/tools'; import type { getEntries } from '../entries'; +import { modifyThemeTypes } from './modifyThemeTypes'; export async function generateTypesFiles( entries: ReturnType, @@ -70,6 +71,11 @@ export async function generateTypesFiles( process.exit(dtsProcess.exitCode || 1); } else { console.log('Generated types for', picocolors.cyan(relative(cwd, dtsEntries[index]))); + + if (dtsEntries[index].includes('src/theming.index.ts')) { + console.log('Modifying theme types'); + await modifyThemeTypes(); + } } }); }) diff --git a/code/core/scripts/prep.ts b/code/core/scripts/prep.ts index f8726e79df4..4d81c65b1d7 100644 --- a/code/core/scripts/prep.ts +++ b/code/core/scripts/prep.ts @@ -66,7 +66,6 @@ async function run() { await generateTypesMapperFiles(entries); await modifyThemeTypes(); await generateTypesFiles(entries, isOptimized, cwd); - await modifyThemeTypes(); }) ); From 74972a78e39bbd4d891739d8d5362c3e23d51590 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Wed, 13 Nov 2024 13:09:33 +0100 Subject: [PATCH 023/101] refactor --- .../components/sidebar/ContextMenu.tsx | 114 ++++++++++++++++ .../manager/components/sidebar/Sidebar.tsx | 1 - .../src/manager/components/sidebar/Tree.tsx | 123 ++---------------- 3 files changed, 123 insertions(+), 115 deletions(-) create mode 100644 code/core/src/manager/components/sidebar/ContextMenu.tsx diff --git a/code/core/src/manager/components/sidebar/ContextMenu.tsx b/code/core/src/manager/components/sidebar/ContextMenu.tsx new file mode 100644 index 00000000000..7d965005497 --- /dev/null +++ b/code/core/src/manager/components/sidebar/ContextMenu.tsx @@ -0,0 +1,114 @@ +import type { ComponentProps, FC, SyntheticEvent } from 'react'; +import React, { useMemo, useState } from 'react'; + +import { TooltipLinkList, WithTooltip } from '@storybook/core/components'; +import { type API_HashEntry, Addon_TypesEnum } from '@storybook/core/types'; +import { EllipsisIcon } from '@storybook/icons'; + +import { type TestProviders } from '@storybook/core/core-events'; +import { useStorybookState } from '@storybook/core/manager-api'; +import type { API } from '@storybook/core/manager-api'; + +import type { Link } from '../../../components/components/tooltip/TooltipLinkList'; +import { StatusButton } from './StatusButton'; +import type { ExcludesNull } from './Tree'; +import { ContextMenu } from './Tree'; + +export const useContextMenu = (context: API_HashEntry, links: Link[], api: API) => { + const [isItemHovered, setIsItemHovered] = useState(false); + const [isOpen, setIsOpen] = useState(false); + + const handlers = useMemo(() => { + return { + onMouseEnter: () => { + setIsItemHovered(true); + }, + onMouseLeave: () => { + setIsItemHovered(false); + }, + onOpen: (event: SyntheticEvent) => { + event.stopPropagation(); + setIsOpen(true); + }, + onClose: () => { + setIsOpen(false); + }, + }; + }, []); + + return useMemo(() => { + const testProviders = api.getElements( + Addon_TypesEnum.experimental_TEST_PROVIDER + ) as any as TestProviders; + const providerLinks = generateTestProviderLinks(testProviders, context); + const shouldDisplayLinks = + (isItemHovered || isOpen) && (providerLinks.length > 0 || links.length > 0); + return { + onMouseEnter: handlers.onMouseEnter, + onMouseLeave: handlers.onMouseLeave, + node: shouldDisplayLinks ? ( + { + if (!visible) { + handlers.onClose(); + } else { + setIsOpen(true); + } + }} + tooltip={({ onHide }) => ( + + )} + > + + + + + ) : null, + }; + }, [api, context, handlers, isItemHovered, isOpen, links]); +}; + +/** + * This component re-subscribes to storybook's core state, hence the Live prefix. It is used to + * render the context menu for the sidebar. it self is a tooltip link list that renders the links + * provided to it. In addition to the links, it also renders the test providers. + */ +const LiveContextMenu: FC<{ context: API_HashEntry } & ComponentProps> = ({ + context, + links, + ...rest +}) => { + const { testProviders } = useStorybookState(); + const providerLinks: Link[] = generateTestProviderLinks(testProviders, context); + const groups = Array.isArray(links[0]) ? (links as Link[][]) : [links as Link[]]; + const all = groups.concat([providerLinks]); + + return ; +}; + +export function generateTestProviderLinks( + testProviders: TestProviders, + context: API_HashEntry +): Link[] { + return Object.entries(testProviders) + .map(([testProviderId, state]) => { + if (!state) { + return null; + } + + const content = state.contextMenu?.({ context, state }, ContextMenu); + + if (!content) { + return null; + } + + return { + id: testProviderId, + content, + }; + }) + .filter(Boolean as any as ExcludesNull); +} diff --git a/code/core/src/manager/components/sidebar/Sidebar.tsx b/code/core/src/manager/components/sidebar/Sidebar.tsx index bb3be73f425..d4784cc8c56 100644 --- a/code/core/src/manager/components/sidebar/Sidebar.tsx +++ b/code/core/src/manager/components/sidebar/Sidebar.tsx @@ -24,7 +24,6 @@ import { Search } from './Search'; import { SearchResults } from './SearchResults'; import { SidebarBottom } from './SidebarBottom'; import { TagsFilter } from './TagsFilter'; -import { TEST_PROVIDER_ID } from './Tree'; import type { CombinedDataset, Selection } from './types'; import { useLastViewed } from './useLastViewed'; diff --git a/code/core/src/manager/components/sidebar/Tree.tsx b/code/core/src/manager/components/sidebar/Tree.tsx index a4fe88248f1..599d7046697 100644 --- a/code/core/src/manager/components/sidebar/Tree.tsx +++ b/code/core/src/manager/components/sidebar/Tree.tsx @@ -1,23 +1,11 @@ -import type { ComponentProps, FC, MutableRefObject, SyntheticEvent } from 'react'; -import React, { useCallback, useMemo, useRef, useState } from 'react'; +import type { ComponentProps, FC, MutableRefObject } from 'react'; +import React, { useCallback, useMemo, useRef } from 'react'; -import { - Button, - IconButton, - ListItem, - TooltipLinkList, - WithTooltip, -} from '@storybook/core/components'; +import { Button, IconButton, ListItem } from '@storybook/core/components'; import { styled, useTheme } from '@storybook/core/theming'; -import { - type API_HashEntry, - type API_StatusValue, - Addon_TypesEnum, - type StoryId, -} from '@storybook/core/types'; +import { type API_HashEntry, type API_StatusValue, type StoryId } from '@storybook/core/types'; import { CollapseIcon as CollapseIconSvg, - EllipsisIcon, ExpandAltIcon, StatusFailIcon, StatusPassIcon, @@ -25,8 +13,8 @@ import { SyncIcon, } from '@storybook/icons'; -import { PRELOAD_ENTRIES, type TestProviders } from '@storybook/core/core-events'; -import { useStorybookApi, useStorybookState } from '@storybook/core/manager-api'; +import { PRELOAD_ENTRIES } from '@storybook/core/core-events'; +import { useStorybookApi } from '@storybook/core/manager-api'; import type { API, ComponentEntry, @@ -48,6 +36,7 @@ import { isStoryHoistable, } from '../../utils/tree'; import { useLayout } from '../layout/LayoutProvider'; +import { useContextMenu } from './ContextMenu'; import { IconSymbols, UseSymbol } from './IconSymbols'; import { StatusButton } from './StatusButton'; import { StatusContext, useStatusSummary } from './StatusContext'; @@ -57,10 +46,7 @@ import type { Highlight, Item } from './types'; import type { ExpandAction, ExpandedState } from './useExpanded'; import { useExpanded } from './useExpanded'; -export const TEST_ADDON_ID = 'storybook/test'; -export const TEST_PROVIDER_ID = `${TEST_ADDON_ID}/test-provider`; - -type ExcludesNull = (x: T | null) => x is T; +export type ExcludesNull = (x: T | null) => x is T; const Container = styled.div<{ hasOrphans: boolean }>((props) => ({ marginTop: props.hasOrphans ? 20 : 0, @@ -182,7 +168,7 @@ const StatusIconMap = { unknown: null, }; -const ContextMenu = { +export const ContextMenu = { ListItem, }; @@ -433,76 +419,6 @@ const Node = React.memo(function Node({ return null; }); -const useContextMenu = (context: API_HashEntry, links: Link[], api: API) => { - const [isItemHovered, setIsItemHovered] = useState(false); - const [isOpen, setIsOpen] = useState(false); - - const handlers = useMemo(() => { - return { - onMouseEnter: () => { - setIsItemHovered(true); - }, - onMouseLeave: () => { - setIsItemHovered(false); - }, - onOpen: (event: SyntheticEvent) => { - event.stopPropagation(); - setIsOpen(true); - }, - onClose: () => { - setIsOpen(false); - }, - }; - }, []); - - return useMemo(() => { - const testProviders = api.getElements( - Addon_TypesEnum.experimental_TEST_PROVIDER - ) as any as TestProviders; - const providerLinks = generateTestProviderLinks(testProviders, context); - const shouldDisplayLinks = - (isItemHovered || isOpen) && (providerLinks.length > 0 || links.length > 0); - return { - onMouseEnter: handlers.onMouseEnter, - onMouseLeave: handlers.onMouseLeave, - node: shouldDisplayLinks ? ( - { - if (!visible) { - handlers.onClose(); - } else { - setIsOpen(true); - } - }} - tooltip={({ onHide }) => ( - - )} - > - - - - - ) : null, - }; - }, [api, context, handlers, isItemHovered, isOpen, links]); -}; - -const LiveContextMenu: FC<{ context: API_HashEntry } & ComponentProps> = ({ - context, - links, - ...rest -}) => { - const { testProviders } = useStorybookState(); - const providerLinks: Link[] = generateTestProviderLinks(testProviders, context); - const groups = Array.isArray(links[0]) ? (links as Link[][]) : [links as Link[]]; - const all = groups.concat([providerLinks]); - - return ; -}; - const Root = React.memo(function Root({ setExpanded, isFullyExpanded, @@ -746,24 +662,3 @@ export const Tree = React.memo<{ ); }); - -function generateTestProviderLinks(testProviders: TestProviders, context: API_HashEntry): Link[] { - return Object.entries(testProviders) - .map(([testProviderId, state]) => { - if (!state) { - return null; - } - - const content = state.contextMenu?.({ context, state }, ContextMenu); - - if (!content) { - return null; - } - - return { - id: testProviderId, - content, - }; - }) - .filter(Boolean as any as ExcludesNull); -} From cab4b71a11cf66f2d55846919ab6ebdbbc5354d9 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Wed, 13 Nov 2024 13:21:20 +0100 Subject: [PATCH 024/101] fixing the core prep script race condition --- code/core/package.json | 32 +++++++++---------- code/core/scripts/entries.ts | 5 +-- .../scripts/helpers/generateTypesFiles.ts | 2 +- code/core/scripts/helpers/modifyThemeTypes.ts | 2 +- 4 files changed, 21 insertions(+), 20 deletions(-) diff --git a/code/core/package.json b/code/core/package.json index 9418fe77621..6c3df123a48 100644 --- a/code/core/package.json +++ b/code/core/package.json @@ -37,6 +37,16 @@ "import": "./dist/client-logger/index.js", "require": "./dist/client-logger/index.cjs" }, + "./theming": { + "types": "./dist/theming/index.d.ts", + "import": "./dist/theming/index.js", + "require": "./dist/theming/index.cjs" + }, + "./theming/create": { + "types": "./dist/theming/create.d.ts", + "import": "./dist/theming/create.js", + "require": "./dist/theming/create.cjs" + }, "./core-server": { "types": "./dist/core-server/index.d.ts", "import": "./dist/core-server/index.js", @@ -122,16 +132,6 @@ "import": "./dist/components/index.js", "require": "./dist/components/index.cjs" }, - "./theming": { - "types": "./dist/theming/index.d.ts", - "import": "./dist/theming/index.js", - "require": "./dist/theming/index.cjs" - }, - "./theming/create": { - "types": "./dist/theming/create.d.ts", - "import": "./dist/theming/create.js", - "require": "./dist/theming/create.cjs" - }, "./docs-tools": { "types": "./dist/docs-tools/index.d.ts", "import": "./dist/docs-tools/index.js", @@ -183,6 +183,12 @@ "client-logger": [ "./dist/client-logger/index.d.ts" ], + "theming": [ + "./dist/theming/index.d.ts" + ], + "theming/create": [ + "./dist/theming/create.d.ts" + ], "core-server": [ "./dist/core-server/index.d.ts" ], @@ -237,12 +243,6 @@ "components": [ "./dist/components/index.d.ts" ], - "theming": [ - "./dist/theming/index.d.ts" - ], - "theming/create": [ - "./dist/theming/create.d.ts" - ], "docs-tools": [ "./dist/docs-tools/index.d.ts" ], diff --git a/code/core/scripts/entries.ts b/code/core/scripts/entries.ts index e3b78e48399..bcd1d1b9457 100644 --- a/code/core/scripts/entries.ts +++ b/code/core/scripts/entries.ts @@ -9,6 +9,9 @@ export const getEntries = (cwd: string) => { define('src/node-logger/index.ts', ['node'], true), define('src/client-logger/index.ts', ['browser', 'node'], true), + define('src/theming/index.ts', ['browser', 'node'], true, ['react']), + define('src/theming/create.ts', ['browser', 'node'], true, ['react']), + define('src/core-server/index.ts', ['node'], true), define('src/core-server/presets/common-preset.ts', ['node'], false), define('src/core-server/presets/common-manager.ts', ['browser'], false), @@ -35,8 +38,6 @@ export const getEntries = (cwd: string) => { ['react', 'react-dom'], ['prettier'] // the syntax highlighter uses prettier/standalone to format the code ), - define('src/theming/index.ts', ['browser', 'node'], true, ['react']), - define('src/theming/create.ts', ['browser', 'node'], true, ['react']), define('src/docs-tools/index.ts', ['browser', 'node'], true), define('src/manager/globals-module-info.ts', ['node'], true), diff --git a/code/core/scripts/helpers/generateTypesFiles.ts b/code/core/scripts/helpers/generateTypesFiles.ts index e3a46d3567b..4c04a20d41c 100644 --- a/code/core/scripts/helpers/generateTypesFiles.ts +++ b/code/core/scripts/helpers/generateTypesFiles.ts @@ -72,7 +72,7 @@ export async function generateTypesFiles( } else { console.log('Generated types for', picocolors.cyan(relative(cwd, dtsEntries[index]))); - if (dtsEntries[index].includes('src/theming.index.ts')) { + if (dtsEntries[index].includes('src/theming/index')) { console.log('Modifying theme types'); await modifyThemeTypes(); } diff --git a/code/core/scripts/helpers/modifyThemeTypes.ts b/code/core/scripts/helpers/modifyThemeTypes.ts index 5b35ca6be32..1751e4f8947 100644 --- a/code/core/scripts/helpers/modifyThemeTypes.ts +++ b/code/core/scripts/helpers/modifyThemeTypes.ts @@ -14,7 +14,7 @@ export async function modifyThemeTypes() { const contents = await readFile(target, 'utf-8'); const footer = contents.includes('// auto generated file') - ? `export { StorybookTheme as Theme } from '../src/index';` + ? `export { StorybookTheme as Theme } from '../../src/index';` : dedent` interface Theme extends StorybookTheme {} export type { Theme }; From 17b28903ce12df982d437acd95a16fdb604f1cd3 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Wed, 13 Nov 2024 13:22:58 +0100 Subject: [PATCH 025/101] fix for dev-mode --- code/core/scripts/helpers/modifyThemeTypes.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/core/scripts/helpers/modifyThemeTypes.ts b/code/core/scripts/helpers/modifyThemeTypes.ts index 1751e4f8947..85d78a2cb07 100644 --- a/code/core/scripts/helpers/modifyThemeTypes.ts +++ b/code/core/scripts/helpers/modifyThemeTypes.ts @@ -14,7 +14,7 @@ export async function modifyThemeTypes() { const contents = await readFile(target, 'utf-8'); const footer = contents.includes('// auto generated file') - ? `export { StorybookTheme as Theme } from '../../src/index';` + ? `export { StorybookTheme as Theme } from '../../src/theming/index';` : dedent` interface Theme extends StorybookTheme {} export type { Theme }; From 76687a738af352402a2d5cea16413b5baa664dc2 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Wed, 13 Nov 2024 13:31:37 +0100 Subject: [PATCH 026/101] move components into components dir --- .../test/src/components/ContextMenuItem.tsx | 44 +++++++++++ .../test/src/{ => components}/Panel.test.ts | 0 .../test/src/{ => components}/Panel.tsx | 4 +- code/addons/test/src/components/Title.tsx | 23 ++++++ code/addons/test/src/manager.tsx | 77 ++----------------- 5 files changed, 74 insertions(+), 74 deletions(-) create mode 100644 code/addons/test/src/components/ContextMenuItem.tsx rename code/addons/test/src/{ => components}/Panel.test.ts (100%) rename code/addons/test/src/{ => components}/Panel.tsx (98%) create mode 100644 code/addons/test/src/components/Title.tsx diff --git a/code/addons/test/src/components/ContextMenuItem.tsx b/code/addons/test/src/components/ContextMenuItem.tsx new file mode 100644 index 00000000000..ec455ab0c3c --- /dev/null +++ b/code/addons/test/src/components/ContextMenuItem.tsx @@ -0,0 +1,44 @@ +import React, { type FC, type SyntheticEvent, useCallback } from 'react'; + +import { Button, type ListItem } from 'storybook/internal/components'; +import { useStorybookApi } from 'storybook/internal/manager-api'; +import { useTheme } from 'storybook/internal/theming'; +import { type API_HashEntry, type Addon_TestProviderState } from 'storybook/internal/types'; + +import { PlayIcon } from '@storybook/icons'; + +import { TEST_PROVIDER_ID } from '../constants'; +import type { TestResult } from '../node/reporter'; + +const ContextMenuItem: FC<{ + context: API_HashEntry; + state: Addon_TestProviderState<{ + testResults: TestResult[]; + }>; + ListItem: typeof ListItem; +}> = ({ context, state, ListItem }) => { + const api = useStorybookApi(); + + const onClick = useCallback( + (event: SyntheticEvent) => { + event.stopPropagation(); + api.runTestprovider(TEST_PROVIDER_ID, { selection: [context.id] }); + }, + [api] + ); + + const theme = useTheme(); + + return ( + + + + } + center={state.running ? 'Running...' : 'Run tests'} + onClick={onClick} + /> + ); +}; diff --git a/code/addons/test/src/Panel.test.ts b/code/addons/test/src/components/Panel.test.ts similarity index 100% rename from code/addons/test/src/Panel.test.ts rename to code/addons/test/src/components/Panel.test.ts diff --git a/code/addons/test/src/Panel.tsx b/code/addons/test/src/components/Panel.tsx similarity index 98% rename from code/addons/test/src/Panel.tsx rename to code/addons/test/src/components/Panel.tsx index 0cc93575b35..584872bad8c 100644 --- a/code/addons/test/src/Panel.tsx +++ b/code/addons/test/src/components/Panel.tsx @@ -19,8 +19,8 @@ import { global } from '@storybook/global'; import { type Call, CallStates, EVENTS, type LogItem } from '@storybook/instrumenter'; import type { API_StatusValue } from '@storybook/types'; -import { InteractionsPanel } from './components/InteractionsPanel'; -import { ADDON_ID, TEST_PROVIDER_ID } from './constants'; +import { ADDON_ID, TEST_PROVIDER_ID } from '../constants'; +import { InteractionsPanel } from './InteractionsPanel'; interface Interaction extends Call { status: Call['status']; diff --git a/code/addons/test/src/components/Title.tsx b/code/addons/test/src/components/Title.tsx new file mode 100644 index 00000000000..2e7c063f4e4 --- /dev/null +++ b/code/addons/test/src/components/Title.tsx @@ -0,0 +1,23 @@ +import React from 'react'; + +import { Badge, Spaced } from 'storybook/internal/components'; +import { useAddonState } from 'storybook/internal/manager-api'; + +import { ADDON_ID } from '../constants'; + +export function Title() { + const [addonState = {}] = useAddonState(ADDON_ID); + const { hasException, interactionsCount } = addonState as any; + + return ( +
+ + Component tests + {interactionsCount && !hasException ? ( + {interactionsCount} + ) : null} + {hasException ? {interactionsCount} : null} + +
+ ); +} diff --git a/code/addons/test/src/manager.tsx b/code/addons/test/src/manager.tsx index 00d9bb32d03..2120dc0fd93 100644 --- a/code/addons/test/src/manager.tsx +++ b/code/addons/test/src/manager.tsx @@ -1,56 +1,22 @@ -import React, { type FC, type SyntheticEvent, useCallback, useEffect, useState } from 'react'; +import React, { useEffect, useState } from 'react'; -import { - AddonPanel, - Badge, - Button, - Link as LinkComponent, - type ListItem, - Spaced, -} from 'storybook/internal/components'; +import { AddonPanel, Link as LinkComponent } from 'storybook/internal/components'; import { TESTING_MODULE_RUN_ALL_REQUEST } from 'storybook/internal/core-events'; import type { Combo } from 'storybook/internal/manager-api'; +import { Consumer, addons, types } from 'storybook/internal/manager-api'; import { - Consumer, - addons, - types, - useAddonState, - useStorybookApi, -} from 'storybook/internal/manager-api'; -import { useTheme } from 'storybook/internal/theming'; -import { - type API_HashEntry, type API_StatusObject, type API_StatusValue, - type Addon_TestProviderState, type Addon_TestProviderType, Addon_TypesEnum, } from 'storybook/internal/types'; -import { PlayIcon } from '@storybook/icons'; - -import { Panel } from './Panel'; import { GlobalErrorModal } from './components/GlobalErrorModal'; +import { Panel } from './components/Panel'; +import { Title } from './components/Title'; import { ADDON_ID, PANEL_ID, TEST_PROVIDER_ID } from './constants'; import type { TestResult } from './node/reporter'; -function Title() { - const [addonState = {}] = useAddonState(ADDON_ID); - const { hasException, interactionsCount } = addonState as any; - - return ( -
- - Component tests - {interactionsCount && !hasException ? ( - {interactionsCount} - ) : null} - {hasException ? {interactionsCount} : null} - -
- ); -} - const statusMap: Record = { failed: 'error', passed: 'success', @@ -97,39 +63,6 @@ const RelativeTime = ({ timestamp, testCount }: { timestamp: Date; testCount: nu ); }; -const ContextMenuItem: FC<{ - context: API_HashEntry; - state: Addon_TestProviderState<{ - testResults: TestResult[]; - }>; - ListItem: typeof ListItem; -}> = ({ context, state, ListItem }) => { - const api = useStorybookApi(); - - const onClick = useCallback( - (event: SyntheticEvent) => { - event.stopPropagation(); - api.runTestprovider(TEST_PROVIDER_ID, { selection: [context.id] }); - }, - [api] - ); - - const theme = useTheme(); - - return ( - - - - } - center={state.running ? 'Running...' : 'Run tests'} - onClick={onClick} - /> - ); -}; - addons.register(ADDON_ID, (api) => { const storybookBuilder = (globalThis as any).STORYBOOK_BUILDER || ''; if (storybookBuilder.includes('vite')) { From 0a0c36bc230819e20f787e80beec0cb931c28666 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Wed, 13 Nov 2024 13:42:36 +0100 Subject: [PATCH 027/101] renames --- .../test/src/components/ContextMenuItem.tsx | 9 ++++--- code/addons/test/src/manager.tsx | 19 +++++++++------ .../modules/experimental_testmodule.ts | 24 +++++++++---------- 3 files changed, 30 insertions(+), 22 deletions(-) diff --git a/code/addons/test/src/components/ContextMenuItem.tsx b/code/addons/test/src/components/ContextMenuItem.tsx index ec455ab0c3c..0fe8cd2b688 100644 --- a/code/addons/test/src/components/ContextMenuItem.tsx +++ b/code/addons/test/src/components/ContextMenuItem.tsx @@ -1,4 +1,4 @@ -import React, { type FC, type SyntheticEvent, useCallback } from 'react'; +import React, { type FC, type SyntheticEvent, useCallback, useRef } from 'react'; import { Button, type ListItem } from 'storybook/internal/components'; import { useStorybookApi } from 'storybook/internal/manager-api'; @@ -10,7 +10,7 @@ import { PlayIcon } from '@storybook/icons'; import { TEST_PROVIDER_ID } from '../constants'; import type { TestResult } from '../node/reporter'; -const ContextMenuItem: FC<{ +export const ContextMenuItem: FC<{ context: API_HashEntry; state: Addon_TestProviderState<{ testResults: TestResult[]; @@ -18,11 +18,14 @@ const ContextMenuItem: FC<{ ListItem: typeof ListItem; }> = ({ context, state, ListItem }) => { const api = useStorybookApi(); + const id = useRef(context.id); + + id.current = context.id; const onClick = useCallback( (event: SyntheticEvent) => { event.stopPropagation(); - api.runTestprovider(TEST_PROVIDER_ID, { selection: [context.id] }); + api.runTestProvider(TEST_PROVIDER_ID, { selection: [id.current] }); }, [api] ); diff --git a/code/addons/test/src/manager.tsx b/code/addons/test/src/manager.tsx index 2120dc0fd93..2ed1da40ee9 100644 --- a/code/addons/test/src/manager.tsx +++ b/code/addons/test/src/manager.tsx @@ -11,6 +11,7 @@ import { Addon_TypesEnum, } from 'storybook/internal/types'; +import { ContextMenuItem } from './components/ContextMenuItem'; import { GlobalErrorModal } from './components/GlobalErrorModal'; import { Panel } from './components/Panel'; import { Title } from './components/Title'; @@ -77,14 +78,18 @@ addons.register(ADDON_ID, (api) => { watchable: true, name: 'Component tests', - // disabled for now - // contextMenu: ({ context, state }, { ListItem }) => { - // if (context.type === 'docs') { - // return null; - // } + contextMenu: ({ context, state }, { ListItem }) => { + if (context.type === 'docs') { + return null; + } - // return ; - // }, + // TODO: remove this... right now: always returns false, to disable the feature + if ('true') { + return false; + } + + return ; + }, title: ({ crashed, failed }) => crashed || failed ? 'Component tests failed' : 'Component tests', description: ({ failed, running, watching, progress, crashed, error }) => { diff --git a/code/core/src/manager-api/modules/experimental_testmodule.ts b/code/core/src/manager-api/modules/experimental_testmodule.ts index b9b2185590c..8f2a45f3aae 100644 --- a/code/core/src/manager-api/modules/experimental_testmodule.ts +++ b/code/core/src/manager-api/modules/experimental_testmodule.ts @@ -29,11 +29,11 @@ interface RunOptions { } export type SubAPI = { - getTestproviderState(id: string): TestProviderState | undefined; - updateTestproviderState(id: TestProviderId, update: Partial): void; - clearTestproviderState(id: TestProviderId): void; - runTestprovider(id: TestProviderId, options?: RunOptions): void; - cancelTestprovider(id: TestProviderId): void; + getTestProviderState(id: string): TestProviderState | undefined; + updateTestProviderState(id: TestProviderId, update: Partial): void; + clearTestProviderState(id: TestProviderId): void; + runTestProvider(id: TestProviderId, options?: RunOptions): void; + cancelTestProvider(id: TestProviderId): void; }; export const init: ModuleFn = ({ store, fullAPI }) => { @@ -42,12 +42,12 @@ export const init: ModuleFn = ({ store, fullAPI }) => { }; const api: SubAPI = { - getTestproviderState(id) { + getTestProviderState(id) { const { testProviders } = store.getState(); return testProviders?.[id]; }, - updateTestproviderState(id, update) { + updateTestProviderState(id, update) { return store.setState( ({ testProviders }) => { return { testProviders: { ...testProviders, [id]: { ...testProviders[id], ...update } } }; @@ -55,7 +55,7 @@ export const init: ModuleFn = ({ store, fullAPI }) => { { persistence: 'session' } ); }, - clearTestproviderState(id) { + clearTestProviderState(id) { const update = { cancelling: false, running: true, @@ -70,7 +70,7 @@ export const init: ModuleFn = ({ store, fullAPI }) => { { persistence: 'session' } ); }, - runTestprovider(id, options) { + runTestProvider(id, options) { if (options?.selection) { const listOfFiles: string[] = []; @@ -88,10 +88,10 @@ export const init: ModuleFn = ({ store, fullAPI }) => { fullAPI.emit(TESTING_MODULE_RUN_ALL_REQUEST, { providerId: id }); } - return () => api.cancelTestprovider(id); + return () => api.cancelTestProvider(id); }, - cancelTestprovider(id) { - api.updateTestproviderState(id, { cancelling: true }); + cancelTestProvider(id) { + api.updateTestProviderState(id, { cancelling: true }); fullAPI.emit(TESTING_MODULE_CANCEL_TEST_RUN_REQUEST, { providerId: id }); }, }; From 4d8c845c9b7d2fa867d586797ca7b3290f128adf Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Wed, 13 Nov 2024 17:05:49 +0100 Subject: [PATCH 028/101] fixes --- .../src/manager/components/sidebar/Menu.tsx | 29 ++++--------------- .../components/sidebar/RefIndicator.tsx | 3 +- 2 files changed, 8 insertions(+), 24 deletions(-) diff --git a/code/core/src/manager/components/sidebar/Menu.tsx b/code/core/src/manager/components/sidebar/Menu.tsx index 583a2b98261..3abca4ce2ff 100644 --- a/code/core/src/manager/components/sidebar/Menu.tsx +++ b/code/core/src/manager/components/sidebar/Menu.tsx @@ -1,7 +1,7 @@ import type { ComponentProps, FC } from 'react'; -import React, { useMemo, useState } from 'react'; +import React, { useState } from 'react'; -import type { Button, TooltipLinkListLink } from '@storybook/core/components'; +import type { Button } from '@storybook/core/components'; import { IconButton, TooltipLinkList, WithTooltip } from '@storybook/core/components'; import { styled } from '@storybook/core/theming'; import { CloseIcon, CogIcon } from '@storybook/icons'; @@ -55,28 +55,11 @@ const MenuButtonGroup = styled.div({ gap: 4, }); -type ClickHandler = TooltipLinkListLink['onClick']; - const SidebarMenuList: FC<{ menu: MenuList; - onHide: () => void; -}> = ({ menu, onHide }) => { - const links = useMemo( - () => - menu.map((group) => - group.map(({ onClick, ...rest }) => ({ - ...rest, - onClick: ((event, item) => { - if (onClick) { - onClick(event, item); - } - onHide(); - }) as ClickHandler, - })) - ), - [menu, onHide] - ); - return ; + onClick: () => void; +}> = ({ menu, onClick }) => { + return ; }; export interface SidebarMenuProps { @@ -118,7 +101,7 @@ export const SidebarMenu: FC = ({ menu, isHighlighted, onClick } + tooltip={({ onHide }) => } onVisibleChange={setIsTooltipVisible} > ; } From 4d4bc9478b64a7b946b247c77ce718db492fada1 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Thu, 14 Nov 2024 08:59:19 +0100 Subject: [PATCH 029/101] fix tooltip not hiding after click in the sidebar gear menu --- code/core/src/manager/components/sidebar/Menu.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/core/src/manager/components/sidebar/Menu.tsx b/code/core/src/manager/components/sidebar/Menu.tsx index 3abca4ce2ff..aef385c2de1 100644 --- a/code/core/src/manager/components/sidebar/Menu.tsx +++ b/code/core/src/manager/components/sidebar/Menu.tsx @@ -59,7 +59,7 @@ const SidebarMenuList: FC<{ menu: MenuList; onClick: () => void; }> = ({ menu, onClick }) => { - return ; + return ; }; export interface SidebarMenuProps { From c0e6967d36c324fb1ba07529b5ace9eb3b55cb6c Mon Sep 17 00:00:00 2001 From: Radovenchyk Date: Thu, 14 Nov 2024 11:48:43 +0200 Subject: [PATCH 030/101] Docs: README Made some amendments to the documentation --- README.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index 5a49d36e82d..aea220e8b1d 100644 --- a/README.md +++ b/README.md @@ -36,7 +36,7 @@ Sponsors on Open Collective - + Official Twitter Handle @@ -68,8 +68,8 @@ Storybook is a frontend workshop for building UI components and pages in isolati - 👥 [Community](#community) - 👏 [Contributing](#contributing) - 👨‍💻 [Development scripts](#development-scripts) - - 💵 [Backers](#backers) - 💸 [Sponsors](#sponsors) + - 💵 [Backers](#backers) - :memo: [License](#license) ## Getting Started @@ -156,7 +156,7 @@ If you're looking for material to use in your Storybook presentation, such as lo ## Community -- Tweeting via [@storybookjs](https://twitter.com/storybookjs) +- Tweeting via [@storybookjs](https://x.com/storybookjs) - Blogging at [storybook.js.org](https://storybook.js.org/blog/) and [Medium](https://medium.com/storybookjs) - Chatting on [Discord](https://discord.gg/storybook) - Videos and streams at [YouTube](https://www.youtube.com/channel/UCr7Quur3eIyA_oe8FNYexfg) From d99f0e6d274ea38a2f03168047872618e6d1af37 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Thu, 14 Nov 2024 11:10:13 +0100 Subject: [PATCH 031/101] fixes --- .../components/sidebar/SidebarBottom.stories.tsx | 6 +++--- .../src/manager/components/sidebar/SidebarBottom.tsx | 12 ++++++------ 2 files changed, 9 insertions(+), 9 deletions(-) diff --git a/code/core/src/manager/components/sidebar/SidebarBottom.stories.tsx b/code/core/src/manager/components/sidebar/SidebarBottom.stories.tsx index 4e611ddd31a..e8b3f506de8 100644 --- a/code/core/src/manager/components/sidebar/SidebarBottom.stories.tsx +++ b/code/core/src/manager/components/sidebar/SidebarBottom.stories.tsx @@ -1,7 +1,7 @@ import React from 'react'; import { Addon_TypesEnum } from '@storybook/core/types'; -import type { Meta } from '@storybook/react/*'; +import type { Meta } from '@storybook/react'; import { fn } from '@storybook/test'; import { type API, ManagerContext } from '@storybook/core/manager-api'; @@ -21,7 +21,7 @@ const managerContext: any = { on: fn().mockName('api::on'), off: fn().mockName('api::off'), getElements: fn(() => ({})), - updateTestproviderState: fn(), + updateTestProviderState: fn(), }, }; @@ -34,7 +34,7 @@ export default { on: fn(), off: fn(), clearNotification: fn(), - updateTestproviderState: fn(), + updateTestProviderState: fn(), emit: fn(), experimental_setFilter: fn(), getChannel: fn(), diff --git a/code/core/src/manager/components/sidebar/SidebarBottom.tsx b/code/core/src/manager/components/sidebar/SidebarBottom.tsx index 9bddc0f1269..f3b48fb550f 100644 --- a/code/core/src/manager/components/sidebar/SidebarBottom.tsx +++ b/code/core/src/manager/components/sidebar/SidebarBottom.tsx @@ -106,10 +106,10 @@ export const SidebarBottomBase = ({ const [warningsActive, setWarningsActive] = useState(false); const { testProviders } = useStorybookState(); const { - updateTestproviderState: updateTestProvider, - clearTestproviderState, - runTestprovider: onRunTests, - cancelTestprovider: onCancelTests, + updateTestProviderState: updateTestProvider, + clearTestProviderState, + runTestProvider: onRunTests, + cancelTestProvider: onCancelTests, } = useStorybookApi(); const [errorsActive, setErrorsActive] = useState(false); @@ -124,12 +124,12 @@ export const SidebarBottomBase = ({ const clearState = useCallback( ({ providerId }: { providerId: TestProviderId }) => { - clearTestproviderState(providerId); + clearTestProviderState(providerId); api.experimental_updateStatus(providerId, (state = {}) => Object.fromEntries(Object.keys(state).map((key) => [key, null])) ); }, - [api, clearTestproviderState] + [api, clearTestProviderState] ); const onSetWatchMode = useCallback( From 350cee78b9d2434f05c2ab357bc3d878ff0ddeec Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Thu, 14 Nov 2024 11:40:03 +0100 Subject: [PATCH 032/101] fix initial state --- code/core/src/manager-api/modules/experimental_testmodule.ts | 4 ++-- code/core/src/manager/components/sidebar/SidebarBottom.tsx | 1 + 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/code/core/src/manager-api/modules/experimental_testmodule.ts b/code/core/src/manager-api/modules/experimental_testmodule.ts index 8f2a45f3aae..375ca4c59f1 100644 --- a/code/core/src/manager-api/modules/experimental_testmodule.ts +++ b/code/core/src/manager-api/modules/experimental_testmodule.ts @@ -38,7 +38,7 @@ export type SubAPI = { export const init: ModuleFn = ({ store, fullAPI }) => { const state: SubState = { - testProviders: store.getState().testProviders, + testProviders: store.getState().testProviders || {}, }; const api: SubAPI = { @@ -104,7 +104,7 @@ export const init: ModuleFn = ({ store, fullAPI }) => { { ...config, ...initialTestProviderState, - ...state.testProviders[id], + ...(state?.testProviders?.[id] || {}), } as TestProviders[0], ] ) diff --git a/code/core/src/manager/components/sidebar/SidebarBottom.tsx b/code/core/src/manager/components/sidebar/SidebarBottom.tsx index f3b48fb550f..3668efde215 100644 --- a/code/core/src/manager/components/sidebar/SidebarBottom.tsx +++ b/code/core/src/manager/components/sidebar/SidebarBottom.tsx @@ -105,6 +105,7 @@ export const SidebarBottomBase = ({ const wrapperRef = useRef(null); const [warningsActive, setWarningsActive] = useState(false); const { testProviders } = useStorybookState(); + const { updateTestProviderState: updateTestProvider, clearTestProviderState, From d23899ed06efdbb53f5db8e4273a929860624639 Mon Sep 17 00:00:00 2001 From: Gert Hengeveld Date: Thu, 14 Nov 2024 11:43:32 +0100 Subject: [PATCH 033/101] Replace test provider title and description with render function --- code/addons/test/src/manager.tsx | 119 ++++++++++++++---- .../modules/experimental_testmodule.ts | 6 + .../components/sidebar/LegacyRender.tsx | 89 +++++++++++++ .../components/sidebar/SidebarBottom.tsx | 50 +++----- .../sidebar/TestingModule.stories.tsx | 36 ++++-- .../components/sidebar/TestingModule.tsx | 108 ++-------------- code/core/src/types/modules/addons.ts | 10 +- 7 files changed, 253 insertions(+), 165 deletions(-) create mode 100644 code/core/src/manager/components/sidebar/LegacyRender.tsx diff --git a/code/addons/test/src/manager.tsx b/code/addons/test/src/manager.tsx index 2ed1da40ee9..81bdd2830a0 100644 --- a/code/addons/test/src/manager.tsx +++ b/code/addons/test/src/manager.tsx @@ -1,9 +1,10 @@ import React, { useEffect, useState } from 'react'; -import { AddonPanel, Link as LinkComponent } from 'storybook/internal/components'; +import { AddonPanel, Button, Link as LinkComponent } from 'storybook/internal/components'; import { TESTING_MODULE_RUN_ALL_REQUEST } from 'storybook/internal/core-events'; import type { Combo } from 'storybook/internal/manager-api'; import { Consumer, addons, types } from 'storybook/internal/manager-api'; +import { styled } from 'storybook/internal/theming'; import { type API_StatusObject, type API_StatusValue, @@ -11,10 +12,11 @@ import { Addon_TypesEnum, } from 'storybook/internal/types'; +import { EyeIcon, PlayHollowIcon, StopAltHollowIcon } from '@storybook/icons'; + import { ContextMenuItem } from './components/ContextMenuItem'; import { GlobalErrorModal } from './components/GlobalErrorModal'; import { Panel } from './components/Panel'; -import { Title } from './components/Title'; import { ADDON_ID, PANEL_ID, TEST_PROVIDER_ID } from './constants'; import type { TestResult } from './node/reporter'; @@ -64,6 +66,28 @@ const RelativeTime = ({ timestamp, testCount }: { timestamp: Date; testCount: nu ); }; +const Info = styled.div({ + display: 'flex', + flexDirection: 'column', + marginLeft: 6, +}); + +const Title = styled.div<{ crashed?: boolean }>(({ crashed, theme }) => ({ + fontSize: theme.typography.size.s1, + fontWeight: crashed ? 'bold' : 'normal', + color: crashed ? theme.color.negativeText : theme.color.defaultText, +})); + +const Description = styled.div(({ theme }) => ({ + fontSize: theme.typography.size.s1, + color: theme.barTextColor, +})); + +const Actions = styled.div({ + display: 'flex', + gap: 6, +}); + addons.register(ADDON_ID, (api) => { const storybookBuilder = (globalThis as any).STORYBOOK_BUILDER || ''; if (storybookBuilder.includes('vite')) { @@ -76,37 +100,36 @@ addons.register(ADDON_ID, (api) => { type: Addon_TypesEnum.experimental_TEST_PROVIDER, runnable: true, watchable: true, - name: 'Component tests', + contextMenu: ({ context, state }, { ListItem }) => { if (context.type === 'docs') { return null; } // TODO: remove this... right now: always returns false, to disable the feature - if ('true') { + if (Date.now()) { return false; } return ; }, - title: ({ crashed, failed }) => - crashed || failed ? 'Component tests failed' : 'Component tests', - description: ({ failed, running, watching, progress, crashed, error }) => { + + render: (state) => { const [isModalOpen, setIsModalOpen] = useState(false); - const errorMessage = error?.message; + const title = state.crashed || state.failed ? 'Component tests failed' : 'Component tests'; + const errorMessage = state.error?.message; + let description: string | React.ReactNode = 'Not run'; - let message: string | React.ReactNode = 'Not run'; - - if (running) { - message = progress - ? `Testing... ${progress.numPassedTests}/${progress.numTotalTests}` + if (state.running) { + description = state.progress + ? `Testing... ${state.progress.numPassedTests}/${state.progress.numTotalTests}` : 'Starting...'; - } else if (failed && !errorMessage) { - message = ''; - } else if (crashed || (failed && errorMessage)) { - message = ( + } else if (state.failed && !errorMessage) { + description = ''; + } else if (state.crashed || (state.failed && errorMessage)) { + description = ( <> { setIsModalOpen(true); }} > - {error?.name || 'View full error'} + {state.error?.name || 'View full error'} ); - } else if (progress?.finishedAt) { - message = ( + } else if (state.progress?.finishedAt) { + description = ( ); - } else if (watching) { - message = 'Watching for file changes'; + } else if (state.watching) { + description = 'Watching for file changes'; } return ( <> - {message} + + + {title} + + {description} + + + + {state.watchable && ( + + )} + {state.runnable && ( + <> + {state.running && state.cancellable ? ( + + ) : ( + + )} + + )} + + ): void; clearTestProviderState(id: TestProviderId): void; runTestProvider(id: TestProviderId, options?: RunOptions): void; + setTestProviderWatchMode(id: TestProviderId, watchMode: boolean): void; cancelTestProvider(id: TestProviderId): void; }; @@ -90,6 +92,10 @@ export const init: ModuleFn = ({ store, fullAPI }) => { return () => api.cancelTestProvider(id); }, + setTestProviderWatchMode(id, watchMode) { + api.updateTestProviderState(id, { watching: watchMode }); + fullAPI.emit(TESTING_MODULE_WATCH_MODE_REQUEST, { providerId: id, watchMode }); + }, cancelTestProvider(id) { api.updateTestProviderState(id, { cancelling: true }); fullAPI.emit(TESTING_MODULE_CANCEL_TEST_RUN_REQUEST, { providerId: id }); diff --git a/code/core/src/manager/components/sidebar/LegacyRender.tsx b/code/core/src/manager/components/sidebar/LegacyRender.tsx new file mode 100644 index 00000000000..da5eaef2982 --- /dev/null +++ b/code/core/src/manager/components/sidebar/LegacyRender.tsx @@ -0,0 +1,89 @@ +import React from 'react'; + +import { Button } from '@storybook/core/components'; +import { styled } from '@storybook/core/theming'; +import { EyeIcon, PlayHollowIcon, StopAltHollowIcon } from '@storybook/icons'; + +import type { TestProviders } from '@storybook/core/core-events'; +import { useStorybookApi } from '@storybook/core/manager-api'; + +const Info = styled.div({ + display: 'flex', + flexDirection: 'column', + marginLeft: 6, +}); + +const Actions = styled.div({ + display: 'flex', + gap: 6, +}); + +const TitleWrapper = styled.div<{ crashed?: boolean }>(({ crashed, theme }) => ({ + fontSize: theme.typography.size.s1, + fontWeight: crashed ? 'bold' : 'normal', + color: crashed ? theme.color.negativeText : theme.color.defaultText, +})); + +const DescriptionWrapper = styled.div(({ theme }) => ({ + fontSize: theme.typography.size.s1, + color: theme.barTextColor, +})); + +export const LegacyRender = ({ ...state }: TestProviders[keyof TestProviders]) => { + const Description = state.description!; + const Title = state.title!; + const api = useStorybookApi(); + + return ( + <> + + + + </TitleWrapper> + <DescriptionWrapper id="testing-module-description"> + <Description {...state} /> + </DescriptionWrapper> + </Info> + + <Actions> + {state.watchable && ( + <Button + aria-label={`${state.watching ? 'Disable' : 'Enable'} watch mode for ${name}`} + variant="ghost" + padding="small" + active={state.watching} + onClick={() => api.onSetWatchMode(state.id, !state.watching)} + disabled={state.crashed || state.running} + > + <EyeIcon /> + </Button> + )} + {state.runnable && ( + <> + {state.running && state.cancellable ? ( + <Button + aria-label={`Stop ${name}`} + variant="ghost" + padding="small" + onClick={() => api.onCancelTests(state.id)} + disabled={state.cancelling} + > + <StopAltHollowIcon /> + </Button> + ) : ( + <Button + aria-label={`Start ${state.name}`} + variant="ghost" + padding="small" + onClick={() => api.onRunTests(state.id)} + disabled={state.crashed || state.running} + > + <PlayHollowIcon /> + </Button> + )} + </> + )} + </Actions> + </> + ); +}; diff --git a/code/core/src/manager/components/sidebar/SidebarBottom.tsx b/code/core/src/manager/components/sidebar/SidebarBottom.tsx index 3668efde215..9dfb6d4e72d 100644 --- a/code/core/src/manager/components/sidebar/SidebarBottom.tsx +++ b/code/core/src/manager/components/sidebar/SidebarBottom.tsx @@ -104,15 +104,8 @@ export const SidebarBottomBase = ({ const spacerRef = useRef<HTMLDivElement | null>(null); const wrapperRef = useRef<HTMLDivElement | null>(null); const [warningsActive, setWarningsActive] = useState(false); - const { testProviders } = useStorybookState(); - - const { - updateTestProviderState: updateTestProvider, - clearTestProviderState, - runTestProvider: onRunTests, - cancelTestProvider: onCancelTests, - } = useStorybookApi(); const [errorsActive, setErrorsActive] = useState(false); + const { testProviders } = useStorybookState(); const warnings = Object.values(status).filter((statusByAddonId) => Object.values(statusByAddonId).some((value) => value?.status === 'warn') @@ -123,24 +116,6 @@ export const SidebarBottomBase = ({ const hasWarnings = warnings.length > 0; const hasErrors = errors.length > 0; - const clearState = useCallback( - ({ providerId }: { providerId: TestProviderId }) => { - clearTestProviderState(providerId); - api.experimental_updateStatus(providerId, (state = {}) => - Object.fromEntries(Object.keys(state).map((key) => [key, null])) - ); - }, - [api, clearTestProviderState] - ); - - const onSetWatchMode = useCallback( - (providerId: string, watchMode: boolean) => { - updateTestProvider(providerId, { watching: watchMode }); - api.emit(TESTING_MODULE_WATCH_MODE_REQUEST, { providerId, watchMode }); - }, - [api, updateTestProvider] - ); - useEffect(() => { const spacer = spacerRef.current; const wrapper = wrapperRef.current; @@ -162,15 +137,27 @@ export const SidebarBottomBase = ({ useEffect(() => { const onCrashReport = ({ providerId, ...details }: TestingModuleCrashReportPayload) => { - updateTestProvider(providerId, { details, running: false, crashed: true, watching: false }); + api.updateTestProvider(providerId, { + details, + running: false, + crashed: true, + watching: false, + }); + }; + + const clearState = ({ providerId }: { providerId: TestProviderId }) => { + api.clearTestProviderState(providerId); + api.experimental_updateStatus(providerId, (state = {}) => + Object.fromEntries(Object.keys(state).map((key) => [key, null])) + ); }; const onProgressReport = ({ providerId, ...result }: TestingModuleProgressReportPayload) => { if (result.status === 'failed') { - updateTestProvider(providerId, { ...result, running: false, failed: true }); + api.updateTestProvider(providerId, { ...result, running: false, failed: true }); } else { const update = { ...result, running: result.status === 'pending' }; - updateTestProvider(providerId, update); + api.updateTestProvider(providerId, update); const { mapStatusUpdate, ...state } = testProviders[providerId]; const statusUpdate = mapStatusUpdate?.({ ...state, ...update }); @@ -189,7 +176,7 @@ export const SidebarBottomBase = ({ api.off(TESTING_MODULE_PROGRESS_REPORT, onProgressReport); api.off(TESTING_MODULE_RUN_ALL_REQUEST, clearState); }; - }, [api, testProviders, updateTestProvider, clearState]); + }, [api, testProviders]); const testProvidersArray = Object.values(testProviders || {}); if (!hasWarnings && !hasErrors && !testProvidersArray.length && !notifications.length) { @@ -210,9 +197,6 @@ export const SidebarBottomBase = ({ warningCount: warnings.length, warningsActive, setWarningsActive, - onRunTests, - onCancelTests, - onSetWatchMode, }} /> )} diff --git a/code/core/src/manager/components/sidebar/TestingModule.stories.tsx b/code/core/src/manager/components/sidebar/TestingModule.stories.tsx index bd24177ebef..03ad13051bb 100644 --- a/code/core/src/manager/components/sidebar/TestingModule.stories.tsx +++ b/code/core/src/manager/components/sidebar/TestingModule.stories.tsx @@ -23,8 +23,13 @@ const testProviders: TestProviders[keyof TestProviders][] = [ type: Addon_TypesEnum.experimental_TEST_PROVIDER, id: 'component-tests', name: 'Component tests', - title: () => 'Component tests', - description: () => 'Ran 2 seconds ago', + render: () => ( + <> + Component tests + <br /> + Ran 2 seconds ago + </> + ), runnable: true, watchable: true, ...baseState, @@ -33,8 +38,13 @@ const testProviders: TestProviders[keyof TestProviders][] = [ type: Addon_TypesEnum.experimental_TEST_PROVIDER, id: 'visual-tests', name: 'Visual tests', - title: () => 'Visual tests', - description: () => 'Not run', + render: () => ( + <> + Visual tests + <br /> + Not run + </> + ), runnable: true, ...baseState, }, @@ -42,8 +52,13 @@ const testProviders: TestProviders[keyof TestProviders][] = [ type: Addon_TypesEnum.experimental_TEST_PROVIDER, id: 'linting', name: 'Linting', - title: () => 'Linting', - description: () => 'Watching for changes', + render: () => ( + <> + Linting + <br /> + Watching for changes + </> + ), ...baseState, watching: true, }, @@ -180,8 +195,13 @@ export const Crashed: Story = { testProviders: [ { ...testProviders[0], - title: () => "Component tests didn't complete", - description: () => 'Problems!', + render: () => ( + <> + Component tests didn't complete + <br /> + Problems! + </> + ), crashed: true, }, ...testProviders.slice(1), diff --git a/code/core/src/manager/components/sidebar/TestingModule.tsx b/code/core/src/manager/components/sidebar/TestingModule.tsx index 510fdc24212..740fc91f7f5 100644 --- a/code/core/src/manager/components/sidebar/TestingModule.tsx +++ b/code/core/src/manager/components/sidebar/TestingModule.tsx @@ -2,17 +2,13 @@ import React, { type SyntheticEvent, useEffect, useRef, useState } from 'react'; import { Button, TooltipNote } from '@storybook/core/components'; import { keyframes, styled } from '@storybook/core/theming'; -import { - ChevronSmallUpIcon, - EyeIcon, - PlayAllHollowIcon, - PlayHollowIcon, - StopAltHollowIcon, -} from '@storybook/icons'; +import { ChevronSmallUpIcon, PlayAllHollowIcon } from '@storybook/icons'; import type { TestProviders } from '@storybook/core/core-events'; import { WithTooltip } from '../../../components/components/tooltip/WithTooltip'; +import { useStorybookApi } from '../../../manager-api'; +import { LegacyRender } from './LegacyRender'; const DEFAULT_HEIGHT = 500; @@ -148,43 +144,6 @@ const TestProvider = styled.div({ gap: 6, }); -const Info = styled.div({ - display: 'flex', - flexDirection: 'column', - marginLeft: 6, -}); - -const Actions = styled.div({ - display: 'flex', - gap: 6, -}); - -const TitleWrapper = styled.div<{ crashed?: boolean }>(({ crashed, theme }) => ({ - fontSize: theme.typography.size.s1, - fontWeight: crashed ? 'bold' : 'normal', - color: crashed ? theme.color.negativeText : theme.color.defaultText, -})); - -const DescriptionWrapper = styled.div(({ theme }) => ({ - fontSize: theme.typography.size.s1, - color: theme.barTextColor, -})); - -const DynamicInfo = ({ state }: { state: TestProviders[keyof TestProviders] }) => { - const Description = state.description; - const Title = state.title; - return ( - <Info> - <TitleWrapper crashed={state.crashed} id="testing-module-title"> - <Title {...state} /> - </TitleWrapper> - <DescriptionWrapper id="testing-module-description"> - <Description {...state} /> - </DescriptionWrapper> - </Info> - ); -}; - interface TestingModuleProps { testProviders: TestProviders[keyof TestProviders][]; errorCount: number; @@ -193,9 +152,6 @@ interface TestingModuleProps { warningCount: number; warningsActive: boolean; setWarningsActive: (active: boolean) => void; - onRunTests: (providerId: string) => void; - onCancelTests: (providerId: string) => void; - onSetWatchMode: (providerId: string, watchMode: boolean) => void; } export const TestingModule = ({ @@ -206,10 +162,8 @@ export const TestingModule = ({ warningCount, warningsActive, setWarningsActive, - onRunTests, - onCancelTests, - onSetWatchMode, }: TestingModuleProps) => { + const api = useStorybookApi(); const contentRef = useRef<HTMLDivElement>(null); const [collapsed, setCollapsed] = useState(false); const [maxHeight, setMaxHeight] = useState(DEFAULT_HEIGHT); @@ -243,50 +197,14 @@ export const TestingModule = ({ }} > <Content ref={contentRef}> - {testProviders.map((state) => ( - <TestProvider key={state.id} data-module-id={state.id}> - <DynamicInfo state={state} /> - <Actions> - {state.watchable && ( - <Button - aria-label={`${state.watching ? 'Disable' : 'Enable'} watch mode for ${state.name}`} - variant="ghost" - padding="small" - active={state.watching} - onClick={() => onSetWatchMode(state.id, !state.watching)} - disabled={state.crashed || state.running} - > - <EyeIcon /> - </Button> - )} - {state.runnable && ( - <> - {state.running && state.cancellable ? ( - <Button - aria-label={`Stop ${state.name}`} - variant="ghost" - padding="small" - onClick={() => onCancelTests(state.id)} - disabled={state.cancelling} - > - <StopAltHollowIcon /> - </Button> - ) : ( - <Button - aria-label={`Start ${state.name}`} - variant="ghost" - padding="small" - onClick={() => onRunTests(state.id)} - disabled={state.crashed || state.running} - > - <PlayHollowIcon /> - </Button> - )} - </> - )} - </Actions> - </TestProvider> - ))} + {testProviders.map((state) => { + const { render: Render } = state; + return ( + <TestProvider key={state.id} data-module-id={state.id}> + {Render ? <Render {...state} /> : <LegacyRender {...state} />} + </TestProvider> + ); + })} </Content> </Collapsible> @@ -299,7 +217,7 @@ export const TestingModule = ({ e.stopPropagation(); testProviders .filter((state) => !state.crashed && !state.running && state.runnable) - .forEach(({ id }) => onRunTests(id)); + .forEach(({ id }) => api.onRunTests(id)); }} disabled={running} > diff --git a/code/core/src/types/modules/addons.ts b/code/core/src/types/modules/addons.ts index ebacb981b9b..4fb2de2f289 100644 --- a/code/core/src/types/modules/addons.ts +++ b/code/core/src/types/modules/addons.ts @@ -2,8 +2,7 @@ import type { FC, PropsWithChildren, ReactElement, ReactNode } from 'react'; import type { ListItem } from '../../components'; -import type { TestingModuleProgressReportProgress } from '../../core-events'; -import type { Addon, StoryEntry } from '../../manager-api'; +import type { TestProviderConfig, TestingModuleProgressReportProgress } from '../../core-events'; import type { RenderData as RouterData } from '../../router/types'; import type { ThemeVars } from '../../theming/types'; import type { API_SidebarOptions } from './api'; @@ -475,8 +474,11 @@ export interface Addon_TestProviderType< /** The unique id of the test provider. */ id: string; name: string; - title: (state: Addon_TestProviderState<Details>) => ReactNode; - description: (state: Addon_TestProviderState<Details>) => ReactNode; + /** @deprecated Use render instead */ + title?: (state: TestProviderConfig & Addon_TestProviderState<Details>) => ReactNode; + /** @deprecated Use render instead */ + description?: (state: TestProviderConfig & Addon_TestProviderState<Details>) => ReactNode; + render?: (state: TestProviderConfig & Addon_TestProviderState<Details>) => ReactNode; contextMenu?: ( options: { context: API_HashEntry; From 4582440514eba84dee0214c065a8f4f7d10a9ac6 Mon Sep 17 00:00:00 2001 From: Gert Hengeveld <info@ghengeveld.nl> Date: Thu, 14 Nov 2024 11:58:29 +0100 Subject: [PATCH 034/101] Fix story mocks and api call --- .../components/sidebar/TestingModule.stories.tsx | 16 +++++++++++++--- .../manager/components/sidebar/TestingModule.tsx | 2 +- 2 files changed, 14 insertions(+), 4 deletions(-) diff --git a/code/core/src/manager/components/sidebar/TestingModule.stories.tsx b/code/core/src/manager/components/sidebar/TestingModule.stories.tsx index 03ad13051bb..3278254c3b1 100644 --- a/code/core/src/manager/components/sidebar/TestingModule.stories.tsx +++ b/code/core/src/manager/components/sidebar/TestingModule.stories.tsx @@ -6,6 +6,7 @@ import { fn, userEvent } from '@storybook/test'; import type { TestProviders } from '@storybook/core/core-events'; +import { ManagerContext } from '../../../manager-api'; import { TestingModule } from './TestingModule'; const baseState = { @@ -64,6 +65,15 @@ const testProviders: TestProviders[keyof TestProviders][] = [ }, ]; +const managerContext: any = { + api: { + runTestProvider: fn().mockName('api::runTestProvider'), + cancelTestProvider: fn().mockName('api::cancelTestProvider'), + updateTestProviderState: fn().mockName('api::updateTestProviderState'), + setTestProviderWatchMode: fn().mockName('api::setTestProviderWatchMode'), + }, +}; + const meta = { component: TestingModule, args: { @@ -74,11 +84,11 @@ const meta = { warningCount: 0, warningsActive: false, setWarningsActive: fn(), - onRunTests: fn(), - onCancelTests: fn(), - onSetWatchMode: fn(), }, decorators: [ + (storyFn) => ( + <ManagerContext.Provider value={managerContext}>{storyFn()}</ManagerContext.Provider> + ), (StoryFn) => ( <div style={{ maxWidth: 232 }}> <StoryFn /> diff --git a/code/core/src/manager/components/sidebar/TestingModule.tsx b/code/core/src/manager/components/sidebar/TestingModule.tsx index 740fc91f7f5..2b3ef24f17a 100644 --- a/code/core/src/manager/components/sidebar/TestingModule.tsx +++ b/code/core/src/manager/components/sidebar/TestingModule.tsx @@ -217,7 +217,7 @@ export const TestingModule = ({ e.stopPropagation(); testProviders .filter((state) => !state.crashed && !state.running && state.runnable) - .forEach(({ id }) => api.onRunTests(id)); + .forEach(({ id }) => api.runTestProvider(id)); }} disabled={running} > From 6c411d4f5bb3adf64efb65d69794666f9c8561bf Mon Sep 17 00:00:00 2001 From: Norbert de Langen <ndelangen@me.com> Date: Thu, 14 Nov 2024 13:52:18 +0100 Subject: [PATCH 035/101] fix condition hooks rendering bug --- code/core/src/manager/components/sidebar/Tree.tsx | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/code/core/src/manager/components/sidebar/Tree.tsx b/code/core/src/manager/components/sidebar/Tree.tsx index 599d7046697..f4e33af457f 100644 --- a/code/core/src/manager/components/sidebar/Tree.tsx +++ b/code/core/src/manager/components/sidebar/Tree.tsx @@ -617,6 +617,10 @@ export const Tree = React.memo<{ const isDisplayed = !item.parent || ancestry[itemId].every((a: string) => expanded[a]); + if (isDisplayed === false) { + return null; + } + return ( <Node api={api} From 011b854e3e0b2f6f8e22540cec38eb090cacf097 Mon Sep 17 00:00:00 2001 From: Norbert de Langen <ndelangen@me.com> Date: Thu, 14 Nov 2024 13:53:04 +0100 Subject: [PATCH 036/101] fix bug with persisting state with function --- code/core/src/manager-api/lib/store-setup.ts | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/code/core/src/manager-api/lib/store-setup.ts b/code/core/src/manager-api/lib/store-setup.ts index 291898bede0..9928ae09c8f 100644 --- a/code/core/src/manager-api/lib/store-setup.ts +++ b/code/core/src/manager-api/lib/store-setup.ts @@ -4,8 +4,13 @@ import { parse, stringify } from 'telejson'; // setting up the store, overriding set and get to use telejson export default (_: any) => { _.fn('set', function (key: string, data: object) { - // @ts-expect-error('this' implicitly has type 'any') - return _.set(this._area, this._in(key), stringify(data, { maxDepth: 50 })); + return _.set( + // @ts-expect-error('this' implicitly has type 'any') + this._area, + // @ts-expect-error('this' implicitly has type 'any') + this._in(key), + stringify(data, { maxDepth: 50, allowFunction: false }) + ); }); _.fn('get', function (key: string, alt: string) { // @ts-expect-error('this' implicitly has type 'any') From 1c8538707c694e0112ba1d149ed09cac5b33302b Mon Sep 17 00:00:00 2001 From: Norbert de Langen <ndelangen@me.com> Date: Thu, 14 Nov 2024 14:20:23 +0100 Subject: [PATCH 037/101] use correct title component in panel --- code/addons/test/src/manager.tsx | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/code/addons/test/src/manager.tsx b/code/addons/test/src/manager.tsx index 81bdd2830a0..751e1bac7ab 100644 --- a/code/addons/test/src/manager.tsx +++ b/code/addons/test/src/manager.tsx @@ -17,6 +17,7 @@ import { EyeIcon, PlayHollowIcon, StopAltHollowIcon } from '@storybook/icons'; import { ContextMenuItem } from './components/ContextMenuItem'; import { GlobalErrorModal } from './components/GlobalErrorModal'; import { Panel } from './components/Panel'; +import { Title } from './components/Title'; import { ADDON_ID, PANEL_ID, TEST_PROVIDER_ID } from './constants'; import type { TestResult } from './node/reporter'; @@ -72,7 +73,7 @@ const Info = styled.div({ marginLeft: 6, }); -const Title = styled.div<{ crashed?: boolean }>(({ crashed, theme }) => ({ +const Title2 = styled.div<{ crashed?: boolean }>(({ crashed, theme }) => ({ fontSize: theme.typography.size.s1, fontWeight: crashed ? 'bold' : 'normal', color: crashed ? theme.color.negativeText : theme.color.defaultText, @@ -155,9 +156,9 @@ addons.register(ADDON_ID, (api) => { return ( <> <Info> - <Title crashed={state.crashed} id="testing-module-title"> + <Title2 crashed={state.crashed} id="testing-module-title"> {title} - + {description} @@ -255,7 +256,7 @@ addons.register(ADDON_ID, (api) => { addons.add(PANEL_ID, { type: types.PANEL, - title: Title, + title: () => , match: ({ viewMode }) => viewMode === 'story', render: ({ active }) => { return ( From f8cbd83381bc02c7898d34f8f5b9e23a11311695 Mon Sep 17 00:00:00 2001 From: Norbert de Langen <ndelangen@me.com> Date: Thu, 14 Nov 2024 14:27:07 +0100 Subject: [PATCH 038/101] fix --- code/core/src/manager/components/sidebar/SidebarBottom.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/code/core/src/manager/components/sidebar/SidebarBottom.tsx b/code/core/src/manager/components/sidebar/SidebarBottom.tsx index 9dfb6d4e72d..9eea4a4855b 100644 --- a/code/core/src/manager/components/sidebar/SidebarBottom.tsx +++ b/code/core/src/manager/components/sidebar/SidebarBottom.tsx @@ -137,7 +137,7 @@ export const SidebarBottomBase = ({ useEffect(() => { const onCrashReport = ({ providerId, ...details }: TestingModuleCrashReportPayload) => { - api.updateTestProvider(providerId, { + api.updateTestProviderState(providerId, { details, running: false, crashed: true, @@ -154,10 +154,10 @@ export const SidebarBottomBase = ({ const onProgressReport = ({ providerId, ...result }: TestingModuleProgressReportPayload) => { if (result.status === 'failed') { - api.updateTestProvider(providerId, { ...result, running: false, failed: true }); + api.updateTestProviderState(providerId, { ...result, running: false, failed: true }); } else { const update = { ...result, running: result.status === 'pending' }; - api.updateTestProvider(providerId, update); + api.updateTestProviderState(providerId, update); const { mapStatusUpdate, ...state } = testProviders[providerId]; const statusUpdate = mapStatusUpdate?.({ ...state, ...update }); From a35701d292d371c53abb5b9ea4eb1e02ab8b10b4 Mon Sep 17 00:00:00 2001 From: Norbert de Langen <ndelangen@me.com> Date: Thu, 14 Nov 2024 14:32:18 +0100 Subject: [PATCH 039/101] fixes --- code/addons/test/src/manager.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/code/addons/test/src/manager.tsx b/code/addons/test/src/manager.tsx index 751e1bac7ab..ed8a3053f2f 100644 --- a/code/addons/test/src/manager.tsx +++ b/code/addons/test/src/manager.tsx @@ -169,7 +169,7 @@ addons.register(ADDON_ID, (api) => { variant="ghost" padding="small" active={state.watching} - onClick={() => api.onSetWatchMode(state.id, !state.watching)} + onClick={() => api.setTestProviderWatchMode(state.id, !state.watching)} disabled={state.crashed || state.running} > <EyeIcon /> @@ -182,7 +182,7 @@ addons.register(ADDON_ID, (api) => { aria-label={`Stop ${state.name}`} variant="ghost" padding="small" - onClick={() => api.onCancelTests(state.id)} + onClick={() => api.cancelTestProvider(state.id)} disabled={state.cancelling} > <StopAltHollowIcon /> @@ -192,7 +192,7 @@ addons.register(ADDON_ID, (api) => { aria-label={`Start ${state.name}`} variant="ghost" padding="small" - onClick={() => api.onRunTests(state.id)} + onClick={() => api.runTestProvider(state.id)} disabled={state.crashed || state.running} > <PlayHollowIcon /> From 166aeb6d2de3735d8bdc5d1999dbcf2645d5d19a Mon Sep 17 00:00:00 2001 From: Norbert de Langen <ndelangen@me.com> Date: Thu, 14 Nov 2024 14:44:21 +0100 Subject: [PATCH 040/101] fix api method renames --- code/core/src/manager/components/sidebar/LegacyRender.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/code/core/src/manager/components/sidebar/LegacyRender.tsx b/code/core/src/manager/components/sidebar/LegacyRender.tsx index da5eaef2982..f0e74f46021 100644 --- a/code/core/src/manager/components/sidebar/LegacyRender.tsx +++ b/code/core/src/manager/components/sidebar/LegacyRender.tsx @@ -52,7 +52,7 @@ export const LegacyRender = ({ ...state }: TestProviders[keyof TestProviders]) = variant="ghost" padding="small" active={state.watching} - onClick={() => api.onSetWatchMode(state.id, !state.watching)} + onClick={() => api.setTestProviderWatchMode(state.id, !state.watching)} disabled={state.crashed || state.running} > <EyeIcon /> @@ -65,7 +65,7 @@ export const LegacyRender = ({ ...state }: TestProviders[keyof TestProviders]) = aria-label={`Stop ${name}`} variant="ghost" padding="small" - onClick={() => api.onCancelTests(state.id)} + onClick={() => api.cancelTestProvider(state.id)} disabled={state.cancelling} > <StopAltHollowIcon /> @@ -75,7 +75,7 @@ export const LegacyRender = ({ ...state }: TestProviders[keyof TestProviders]) = aria-label={`Start ${state.name}`} variant="ghost" padding="small" - onClick={() => api.onRunTests(state.id)} + onClick={() => api.runTestProvider(state.id)} disabled={state.crashed || state.running} > <PlayHollowIcon /> From dfc147ad4711f89ecf4fa9f8619aede41e9c0dae Mon Sep 17 00:00:00 2001 From: Jeppe Reinhold <jeppe@reinhold.is> Date: Thu, 14 Nov 2024 15:49:26 +0100 Subject: [PATCH 041/101] send specific stories when running from context menu --- .../test/src/components/ContextMenuItem.tsx | 2 +- .../addons/test/src/node/test-manager.test.ts | 4 - .../src/core-events/data/testing-module.ts | 6 +- .../modules/experimental_testmodule.ts | 109 +++++++++++++++--- 4 files changed, 96 insertions(+), 25 deletions(-) diff --git a/code/addons/test/src/components/ContextMenuItem.tsx b/code/addons/test/src/components/ContextMenuItem.tsx index 0fe8cd2b688..ff7eb58619d 100644 --- a/code/addons/test/src/components/ContextMenuItem.tsx +++ b/code/addons/test/src/components/ContextMenuItem.tsx @@ -25,7 +25,7 @@ export const ContextMenuItem: FC<{ const onClick = useCallback( (event: SyntheticEvent) => { event.stopPropagation(); - api.runTestProvider(TEST_PROVIDER_ID, { selection: [id.current] }); + api.runTestProvider(TEST_PROVIDER_ID, { entryId: id.current }); }, [api] ); diff --git a/code/addons/test/src/node/test-manager.test.ts b/code/addons/test/src/node/test-manager.test.ts index 415c9bbc7bb..32a404cfc38 100644 --- a/code/addons/test/src/node/test-manager.test.ts +++ b/code/addons/test/src/node/test-manager.test.ts @@ -84,12 +84,10 @@ describe('TestManager', () => { { stories: [], importPath: 'path/to/file', - componentPath: 'path/to/component', }, { stories: [], importPath: 'path/to/another/file', - componentPath: 'path/to/another/component', }, ], }); @@ -107,7 +105,6 @@ describe('TestManager', () => { { stories: [], importPath: 'path/to/unknown/file', - componentPath: 'path/to/unknown/component', }, ], }); @@ -119,7 +116,6 @@ describe('TestManager', () => { { stories: [], importPath: 'path/to/file', - componentPath: 'path/to/component', }, ], }); diff --git a/code/core/src/core-events/data/testing-module.ts b/code/core/src/core-events/data/testing-module.ts index 93d7d4545c8..ee483364d93 100644 --- a/code/core/src/core-events/data/testing-module.ts +++ b/code/core/src/core-events/data/testing-module.ts @@ -8,7 +8,7 @@ export type TestProviderState = Addon_TestProviderState; export type TestProviders = Record<TestProviderId, TestProviderConfig & TestProviderState>; -export type TestingModuleRunRequestStories = { +export type TestingModuleRunRequestStory = { id: string; // button--primary name: string; // Primary }; @@ -16,9 +16,9 @@ export type TestingModuleRunRequestStories = { export type TestingModuleRunRequestPayload = { providerId: TestProviderId; payload: { - stories: TestingModuleRunRequestStories[]; importPath: string; // ./.../button.stories.tsx - componentPath: string; // ./.../button.tsx + stories?: TestingModuleRunRequestStory[]; + componentPath?: string; // ./.../button.tsx }[]; }; diff --git a/code/core/src/manager-api/modules/experimental_testmodule.ts b/code/core/src/manager-api/modules/experimental_testmodule.ts index e5d46b703a7..caa9826d369 100644 --- a/code/core/src/manager-api/modules/experimental_testmodule.ts +++ b/code/core/src/manager-api/modules/experimental_testmodule.ts @@ -1,12 +1,15 @@ -import { Addon_TypesEnum } from '@storybook/core/types'; +import { type API_StoryEntry, Addon_TypesEnum, type StoryId } from '@storybook/core/types'; import { TESTING_MODULE_CANCEL_TEST_RUN_REQUEST, TESTING_MODULE_RUN_ALL_REQUEST, + TESTING_MODULE_RUN_REQUEST, TESTING_MODULE_WATCH_MODE_REQUEST, type TestProviderId, type TestProviderState, type TestProviders, + type TestingModuleRunAllRequestPayload, + type TestingModuleRunRequestPayload, } from '@storybook/core/core-events'; import type { ModuleFn } from '../lib/types'; @@ -26,7 +29,7 @@ const initialTestProviderState: TestProviderState = { }; interface RunOptions { - selection?: string[]; + entryId?: StoryId; } export type SubAPI = { @@ -73,23 +76,95 @@ export const init: ModuleFn = ({ store, fullAPI }) => { ); }, runTestProvider(id, options) { - if (options?.selection) { - const listOfFiles: string[] = []; - - // TODO: get actual list and emit, this notification is for development purposes - fullAPI.addNotification({ - id: 'testing-module', - - content: { - headline: 'Running tests', - subHeadline: `Running tests for ${listOfFiles} stories`, - }, - }); - // fullAPI.emit(TESTING_MODULE_RUN_REQUEST, { providerId: id, selection: [] }); - } else { - fullAPI.emit(TESTING_MODULE_RUN_ALL_REQUEST, { providerId: id }); + console.log('LOG: runTestProvider', id, options); + if (!options?.entryId) { + console.log('LOG: runTestProvider: no entryId, running all tests'); + const payload: TestingModuleRunAllRequestPayload = { providerId: id }; + fullAPI.emit(TESTING_MODULE_RUN_ALL_REQUEST, payload); + return () => api.cancelTestProvider(id); } + const index = store.getState().index; + if (!index) { + throw new Error('no index?'); + } + + const entry = index[options.entryId]; + + if (!entry) { + throw new Error('no entry?'); + } + + if (entry.type === 'story') { + console.log('LOG: runTestProvider: running single story', entry); + const payload: TestingModuleRunRequestPayload = { + providerId: id, + payload: [ + { + importPath: entry.importPath, + stories: [ + { + id: entry.id, + name: entry.name, + }, + ], + }, + ], + }; + fullAPI.emit(TESTING_MODULE_RUN_REQUEST, payload); + return () => api.cancelTestProvider(id); + } + + const payloads = new Set<TestingModuleRunRequestPayload['payload'][0]>(); + + const findComponents = (entryId: StoryId) => { + const foundEntry = index[entryId]; + console.log(`Processing entry: ${entryId}`, foundEntry); + switch (foundEntry.type) { + case 'component': + console.log(`Adding component entry: ${entryId}`); + const firstStoryId = foundEntry.children.find( + (childId) => index[childId].type === 'story' + ); + if (!firstStoryId) { + // TODO: can this happen? docs only in a component or something? + throw new Error('No story found for component?'); + } + payloads.add({ importPath: (index[firstStoryId] as API_StoryEntry).importPath }); + return; + case 'story': { + // this really shouldn't happen because we don't visit components' children. + // unless groups can have stories directly? + console.log(`Adding story entry: ${entryId}`); + payloads.add({ + importPath: foundEntry.importPath, + stories: [ + { + id: foundEntry.id, + name: foundEntry.name, + }, + ], + }); + return; + } + case 'docs': { + return; + } + default: + console.log(`Processing children of entry: ${entryId}`); + foundEntry.children.forEach(findComponents); + } + }; + console.log(`Starting to find components for entryId:`, options.entryId); + findComponents(options.entryId); + + const payload: TestingModuleRunRequestPayload = { + providerId: id, + payload: Array.from(payloads), + }; + console.log('LOG: payload', payload); + fullAPI.emit(TESTING_MODULE_RUN_REQUEST, payload); + return () => api.cancelTestProvider(id); }, setTestProviderWatchMode(id, watchMode) { From e5e4499e974fde4448da22b9bcae298b55394d26 Mon Sep 17 00:00:00 2001 From: Jeppe Reinhold <jeppe@reinhold.is> Date: Thu, 14 Nov 2024 16:51:25 +0100 Subject: [PATCH 042/101] set testNamePattern from story names --- code/addons/test/src/node/vitest-manager.ts | 29 +++++++++++++++++++++ 1 file changed, 29 insertions(+) diff --git a/code/addons/test/src/node/vitest-manager.ts b/code/addons/test/src/node/vitest-manager.ts index ab31e1fc769..f69f065aa42 100644 --- a/code/addons/test/src/node/vitest-manager.ts +++ b/code/addons/test/src/node/vitest-manager.ts @@ -58,6 +58,7 @@ export class VitestManager { if (!this.vitest) { await this.startVitest(); } + this.resetTestNamePattern(); const storybookTests = await this.getStorybookTestSpecs(); for (const storybookTest of storybookTests) { @@ -87,6 +88,7 @@ export class VitestManager { if (!this.vitest) { await this.startVitest(); } + this.resetTestNamePattern(); // This list contains all the test files (story files) that need to be run // based on the test files that are passed in the tests array @@ -96,6 +98,8 @@ export class VitestManager { const storybookTests = await this.getStorybookTestSpecs(); + const filteredStoryNames: string[] = []; + for (const storybookTest of storybookTests) { const match = testPayload.find((test) => { const absoluteImportPath = path.join(process.cwd(), test.importPath); @@ -107,12 +111,29 @@ export class VitestManager { this.updateLastChanged(storybookTest.moduleId); } + if (match.stories?.length) { + filteredStoryNames.push(...match.stories.map((story) => story.name)); + } testList.push(storybookTest); } } await this.cancelCurrentRun(); + + if (filteredStoryNames.length > 0) { + // temporarily set the test name pattern to only run the selected stories + // converting a list of story names to a single regex pattern + // ie. ['My Story', 'Other Story'] => /^(My Story|Other Story)$/ + const testNamePattern = new RegExp( + `^(${filteredStoryNames + .map((name) => name.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')) + .join('|')})$` + ); + this.vitest!.configOverride.testNamePattern = testNamePattern; + } + await this.vitest!.runFiles(testList, true); + this.resetTestNamePattern(); } async cancelCurrentRun() { @@ -173,6 +194,7 @@ export class VitestManager { if (!this.vitest) { return; } + this.resetTestNamePattern(); const globTestFiles = await this.vitest.globTestSpecs(); const testGraphs = await Promise.all( @@ -219,6 +241,7 @@ export class VitestManager { } async setupWatchers() { + this.resetTestNamePattern(); this.vitest?.server?.watcher.removeAllListeners('change'); this.vitest?.server?.watcher.removeAllListeners('add'); this.vitest?.server?.watcher.on('change', this.runAffectedTestsAfterChange.bind(this)); @@ -226,6 +249,12 @@ export class VitestManager { this.registerVitestConfigListener(); } + resetTestNamePattern() { + if (this.vitest) { + this.vitest.configOverride.testNamePattern = undefined; + } + } + isStorybookProject(project: TestProject | WorkspaceProject) { // eslint-disable-next-line no-underscore-dangle return !!project.config.env?.__STORYBOOK_URL__; From 81473552ba2a2f821c4dcfaeb840180d7d327c0c Mon Sep 17 00:00:00 2001 From: Jeppe Reinhold <jeppe@reinhold.is> Date: Thu, 14 Nov 2024 22:39:49 +0100 Subject: [PATCH 043/101] update test run message, allow canceling --- .../test/src/components/ContextMenuItem.tsx | 22 ++++++++++++------- .../modules/experimental_testmodule.ts | 11 +++++----- 2 files changed, 20 insertions(+), 13 deletions(-) diff --git a/code/addons/test/src/components/ContextMenuItem.tsx b/code/addons/test/src/components/ContextMenuItem.tsx index ff7eb58619d..082d05e0a4c 100644 --- a/code/addons/test/src/components/ContextMenuItem.tsx +++ b/code/addons/test/src/components/ContextMenuItem.tsx @@ -5,7 +5,7 @@ import { useStorybookApi } from 'storybook/internal/manager-api'; import { useTheme } from 'storybook/internal/theming'; import { type API_HashEntry, type Addon_TestProviderState } from 'storybook/internal/types'; -import { PlayIcon } from '@storybook/icons'; +import { PlayHollowIcon, PlayIcon, StopAltHollowIcon } from '@storybook/icons'; import { TEST_PROVIDER_ID } from '../constants'; import type { TestResult } from '../node/reporter'; @@ -19,29 +19,35 @@ export const ContextMenuItem: FC<{ }> = ({ context, state, ListItem }) => { const api = useStorybookApi(); const id = useRef(context.id); + const cancelRun = useRef<() => void>(); + + const Icon = state.running ? StopAltHollowIcon : PlayHollowIcon; id.current = context.id; const onClick = useCallback( (event: SyntheticEvent) => { event.stopPropagation(); - api.runTestProvider(TEST_PROVIDER_ID, { entryId: id.current }); + if (state.running) { + cancelRun.current?.(); + return; + } else { + cancelRun.current = api.runTestProvider(TEST_PROVIDER_ID, { entryId: id.current }); + } }, - [api] + [api, state.running] ); const theme = useTheme(); return ( <ListItem - title={'Component tests'} + title={'Run local tests'} right={ - <Button variant="ghost" padding="small" disabled={state.crashed || state.running}> - <PlayIcon fill={theme.barTextColor} /> + <Button onClick={onClick} variant="ghost" padding="small" disabled={state.crashed}> + <Icon fill={theme.barTextColor} /> </Button> } - center={state.running ? 'Running...' : 'Run tests'} - onClick={onClick} /> ); }; diff --git a/code/core/src/manager-api/modules/experimental_testmodule.ts b/code/core/src/manager-api/modules/experimental_testmodule.ts index caa9826d369..b16956be7a8 100644 --- a/code/core/src/manager-api/modules/experimental_testmodule.ts +++ b/code/core/src/manager-api/modules/experimental_testmodule.ts @@ -36,7 +36,7 @@ export type SubAPI = { getTestProviderState(id: string): TestProviderState | undefined; updateTestProviderState(id: TestProviderId, update: Partial<TestProviderState>): void; clearTestProviderState(id: TestProviderId): void; - runTestProvider(id: TestProviderId, options?: RunOptions): void; + runTestProvider(id: TestProviderId, options?: RunOptions): () => void; setTestProviderWatchMode(id: TestProviderId, watchMode: boolean): void; cancelTestProvider(id: TestProviderId): void; }; @@ -127,14 +127,15 @@ export const init: ModuleFn = ({ store, fullAPI }) => { (childId) => index[childId].type === 'story' ); if (!firstStoryId) { - // TODO: can this happen? docs only in a component or something? - throw new Error('No story found for component?'); + // happens when there are only docs in the component + return; } payloads.add({ importPath: (index[firstStoryId] as API_StoryEntry).importPath }); return; case 'story': { - // this really shouldn't happen because we don't visit components' children. - // unless groups can have stories directly? + // this shouldn't happen because we don't visit components' children. + // so we never get to a story directly. + // unless groups can have direct stories without components? console.log(`Adding story entry: ${entryId}`); payloads.add({ importPath: foundEntry.importPath, From 7e43ecd708d5d76f7473df35b89cf5728b2c5a7d Mon Sep 17 00:00:00 2001 From: Jeppe Reinhold <jeppe@reinhold.is> Date: Thu, 14 Nov 2024 23:00:38 +0100 Subject: [PATCH 044/101] use root cancelTestProvider function --- code/addons/test/src/components/ContextMenuItem.tsx | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/code/addons/test/src/components/ContextMenuItem.tsx b/code/addons/test/src/components/ContextMenuItem.tsx index 082d05e0a4c..7a7cc7b1575 100644 --- a/code/addons/test/src/components/ContextMenuItem.tsx +++ b/code/addons/test/src/components/ContextMenuItem.tsx @@ -19,7 +19,6 @@ export const ContextMenuItem: FC<{ }> = ({ context, state, ListItem }) => { const api = useStorybookApi(); const id = useRef(context.id); - const cancelRun = useRef<() => void>(); const Icon = state.running ? StopAltHollowIcon : PlayHollowIcon; @@ -29,10 +28,9 @@ export const ContextMenuItem: FC<{ (event: SyntheticEvent) => { event.stopPropagation(); if (state.running) { - cancelRun.current?.(); - return; + api.cancelTestProvider(TEST_PROVIDER_ID); } else { - cancelRun.current = api.runTestProvider(TEST_PROVIDER_ID, { entryId: id.current }); + api.runTestProvider(TEST_PROVIDER_ID, { entryId: id.current }); } }, [api, state.running] From 70ac1bcece03965d509bfaa6d1001899b12490ac Mon Sep 17 00:00:00 2001 From: storybook-bot <32066757+storybook-bot@users.noreply.github.com> Date: Fri, 15 Nov 2024 08:45:34 +0000 Subject: [PATCH 045/101] Write changelog for 8.5.0-alpha.5 [skip ci] --- CHANGELOG.prerelease.md | 7 +++++++ code/package.json | 3 ++- docs/versions/next.json | 2 +- 3 files changed, 10 insertions(+), 2 deletions(-) diff --git a/CHANGELOG.prerelease.md b/CHANGELOG.prerelease.md index 29827f7c8cf..0b09a2a6f71 100644 --- a/CHANGELOG.prerelease.md +++ b/CHANGELOG.prerelease.md @@ -1,3 +1,10 @@ +## 8.5.0-alpha.5 + +- Addon Test: Only optimize react deps if applicable in vitest-plugin - [#29617](https://github.com/storybookjs/storybook/pull/29617), thanks @yannbf! +- Addon Test: Optimize internal dependencies - [#29595](https://github.com/storybookjs/storybook/pull/29595), thanks @yannbf! +- CLI: Fix init help for `storybook` command - [#29480](https://github.com/storybookjs/storybook/pull/29480), thanks @toothlessdev! +- Composition: Fix composed story search - [#29453](https://github.com/storybookjs/storybook/pull/29453), thanks @jsingh0026! + ## 8.5.0-alpha.4 - Next.js: Add support for Next 15 - [#29587](https://github.com/storybookjs/storybook/pull/29587), thanks @yannbf! diff --git a/code/package.json b/code/package.json index 9d90dce863a..e10802edfb6 100644 --- a/code/package.json +++ b/code/package.json @@ -293,5 +293,6 @@ "Dependency Upgrades" ] ] - } + }, + "deferredNextVersion": "8.5.0-alpha.5" } diff --git a/docs/versions/next.json b/docs/versions/next.json index 61e79e389a3..13e6d855b1e 100644 --- a/docs/versions/next.json +++ b/docs/versions/next.json @@ -1 +1 @@ -{"version":"8.5.0-alpha.4","info":{"plain":"- Next.js: Add support for Next 15 - [#29587](https://github.com/storybookjs/storybook/pull/29587), thanks @yannbf!\n- UI: Add Yarn to About Section - [#29225](https://github.com/storybookjs/storybook/pull/29225), thanks @grantwforsythe!"}} +{"version":"8.5.0-alpha.5","info":{"plain":"- Addon Test: Only optimize react deps if applicable in vitest-plugin - [#29617](https://github.com/storybookjs/storybook/pull/29617), thanks @yannbf!\n- Addon Test: Optimize internal dependencies - [#29595](https://github.com/storybookjs/storybook/pull/29595), thanks @yannbf!\n- CLI: Fix init help for `storybook` command - [#29480](https://github.com/storybookjs/storybook/pull/29480), thanks @toothlessdev!\n- Composition: Fix composed story search - [#29453](https://github.com/storybookjs/storybook/pull/29453), thanks @jsingh0026!"}} From c912e0e26faec8c37228da6fb10450a683ecc54c Mon Sep 17 00:00:00 2001 From: Norbert de Langen <ndelangen@me.com> Date: Fri, 15 Nov 2024 12:37:04 +0100 Subject: [PATCH 046/101] do not depend on mouseLeave event, as it's often missed when user quickly moves their mouse around --- .../components/sidebar/ContextMenu.tsx | 33 +++++++++++-------- .../src/manager/components/sidebar/Tree.tsx | 10 ++++-- 2 files changed, 28 insertions(+), 15 deletions(-) diff --git a/code/core/src/manager/components/sidebar/ContextMenu.tsx b/code/core/src/manager/components/sidebar/ContextMenu.tsx index 7d965005497..b09ce7909e8 100644 --- a/code/core/src/manager/components/sidebar/ContextMenu.tsx +++ b/code/core/src/manager/components/sidebar/ContextMenu.tsx @@ -15,16 +15,13 @@ import type { ExcludesNull } from './Tree'; import { ContextMenu } from './Tree'; export const useContextMenu = (context: API_HashEntry, links: Link[], api: API) => { - const [isItemHovered, setIsItemHovered] = useState(false); + const [hoverCount, setHoverCount] = useState(0); const [isOpen, setIsOpen] = useState(false); const handlers = useMemo(() => { return { onMouseEnter: () => { - setIsItemHovered(true); - }, - onMouseLeave: () => { - setIsItemHovered(false); + setHoverCount((c) => c + 1); }, onOpen: (event: SyntheticEvent) => { event.stopPropagation(); @@ -36,17 +33,23 @@ export const useContextMenu = (context: API_HashEntry, links: Link[], api: API) }; }, []); - return useMemo(() => { + const providerLinks = useMemo(() => { const testProviders = api.getElements( Addon_TypesEnum.experimental_TEST_PROVIDER ) as any as TestProviders; - const providerLinks = generateTestProviderLinks(testProviders, context); - const shouldDisplayLinks = - (isItemHovered || isOpen) && (providerLinks.length > 0 || links.length > 0); + + if (hoverCount) { + return generateTestProviderLinks(testProviders, context); + } + return []; + }, [api, context, hoverCount]); + + return useMemo(() => { + const rendered = providerLinks.length > 0 || links.length > 0; + const forceDisplay = isOpen; return { onMouseEnter: handlers.onMouseEnter, - onMouseLeave: handlers.onMouseLeave, - node: shouldDisplayLinks ? ( + node: rendered ? ( <WithTooltip closeOnOutsideClick onClick={handlers.onOpen} @@ -62,13 +65,17 @@ export const useContextMenu = (context: API_HashEntry, links: Link[], api: API) <LiveContextMenu context={context} links={links} onClick={onHide} /> )} > - <StatusButton type="button" status={'pending'}> + <StatusButton + type="button" + status={'pending'} + data-displayed={forceDisplay ? 'on' : 'off'} + > <EllipsisIcon /> </StatusButton> </WithTooltip> ) : null, }; - }, [api, context, handlers, isItemHovered, isOpen, links]); + }, [context, handlers, isOpen, links, providerLinks.length]); }; /** diff --git a/code/core/src/manager/components/sidebar/Tree.tsx b/code/core/src/manager/components/sidebar/Tree.tsx index f4e33af457f..7de14d18caa 100644 --- a/code/core/src/manager/components/sidebar/Tree.tsx +++ b/code/core/src/manager/components/sidebar/Tree.tsx @@ -85,6 +85,14 @@ export const LeafNodeStyleWrapper = styled.div(({ theme }) => ({ outline: 'none', }, + '& [data-displayed="off"]': { + visibility: 'hidden', + }, + + '&:hover [data-displayed="off"]': { + visibility: 'visible', + }, + '&[data-selected="true"]': { color: theme.color.lightest, background: theme.color.secondary, @@ -275,7 +283,6 @@ const Node = React.memo<NodeProps>(function Node({ data-nodetype={item.type === 'docs' ? 'document' : 'story'} data-highlightable={isDisplayed} onMouseEnter={contextMenu.onMouseEnter} - onMouseLeave={contextMenu.onMouseLeave} > <LeafNode // @ts-expect-error (non strict) @@ -373,7 +380,6 @@ const Node = React.memo<NodeProps>(function Node({ data-nodetype={item.type} data-highlightable={isDisplayed} onMouseEnter={contextMenu.onMouseEnter} - onMouseLeave={contextMenu.onMouseLeave} > <BranchNode id={id} From 9e841f8a4ac07b4df89b5f76e053fd1ab8cdcd36 Mon Sep 17 00:00:00 2001 From: Norbert de Langen <ndelangen@me.com> Date: Fri, 15 Nov 2024 12:42:51 +0100 Subject: [PATCH 047/101] simplify, add comment for clarity --- .../manager/components/sidebar/ContextMenu.tsx | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/code/core/src/manager/components/sidebar/ContextMenu.tsx b/code/core/src/manager/components/sidebar/ContextMenu.tsx index b09ce7909e8..d78d0451d8f 100644 --- a/code/core/src/manager/components/sidebar/ContextMenu.tsx +++ b/code/core/src/manager/components/sidebar/ContextMenu.tsx @@ -33,6 +33,10 @@ export const useContextMenu = (context: API_HashEntry, links: Link[], api: API) }; }, []); + /** + * Calculate the providerLinks whenever the user mouses over the container. We use an incrementer, + * instead of a simple boolean to ensure that the links are recalculated + */ const providerLinks = useMemo(() => { const testProviders = api.getElements( Addon_TypesEnum.experimental_TEST_PROVIDER @@ -44,12 +48,12 @@ export const useContextMenu = (context: API_HashEntry, links: Link[], api: API) return []; }, [api, context, hoverCount]); + const isRendered = providerLinks.length > 0 || links.length > 0; + return useMemo(() => { - const rendered = providerLinks.length > 0 || links.length > 0; - const forceDisplay = isOpen; return { onMouseEnter: handlers.onMouseEnter, - node: rendered ? ( + node: isRendered ? ( <WithTooltip closeOnOutsideClick onClick={handlers.onOpen} @@ -65,17 +69,13 @@ export const useContextMenu = (context: API_HashEntry, links: Link[], api: API) <LiveContextMenu context={context} links={links} onClick={onHide} /> )} > - <StatusButton - type="button" - status={'pending'} - data-displayed={forceDisplay ? 'on' : 'off'} - > + <StatusButton type="button" status={'pending'} data-displayed={isOpen ? 'on' : 'off'}> <EllipsisIcon /> </StatusButton> </WithTooltip> ) : null, }; - }, [context, handlers, isOpen, links, providerLinks.length]); + }, [context, handlers, isOpen, isRendered, links]); }; /** From 3a2415b120a3c90632c1bc2b5878d67aadb2a0e4 Mon Sep 17 00:00:00 2001 From: Norbert de Langen <ndelangen@me.com> Date: Fri, 15 Nov 2024 15:29:06 +0100 Subject: [PATCH 048/101] ensure the status icons are visible again, but hidden during hover --- code/addons/test/src/RelativeTime.tsx | 24 +++++++ .../test/src/components/ContextMenuItem.tsx | 67 ++++++++++++++++--- code/addons/test/src/manager.tsx | 24 +------ .../components/sidebar/ContextMenu.tsx | 4 +- .../src/manager/components/sidebar/Tree.tsx | 48 +++++++------ 5 files changed, 112 insertions(+), 55 deletions(-) create mode 100644 code/addons/test/src/RelativeTime.tsx diff --git a/code/addons/test/src/RelativeTime.tsx b/code/addons/test/src/RelativeTime.tsx new file mode 100644 index 00000000000..9225b29fe2c --- /dev/null +++ b/code/addons/test/src/RelativeTime.tsx @@ -0,0 +1,24 @@ +import { useEffect, useState } from 'react'; + +import { getRelativeTimeString } from './manager'; + +export const RelativeTime = ({ timestamp, testCount }: { timestamp: Date; testCount: number }) => { + const [relativeTimeString, setRelativeTimeString] = useState(null); + + useEffect(() => { + if (timestamp) { + setRelativeTimeString(getRelativeTimeString(timestamp).replace(/^now$/, 'just now')); + + const interval = setInterval(() => { + setRelativeTimeString(getRelativeTimeString(timestamp).replace(/^now$/, 'just now')); + }, 10000); + + return () => clearInterval(interval); + } + }, [timestamp]); + + return ( + relativeTimeString && + `Ran ${testCount} ${testCount === 1 ? 'test' : 'tests'} ${relativeTimeString}` + ); +}; diff --git a/code/addons/test/src/components/ContextMenuItem.tsx b/code/addons/test/src/components/ContextMenuItem.tsx index 7a7cc7b1575..7640c0018bb 100644 --- a/code/addons/test/src/components/ContextMenuItem.tsx +++ b/code/addons/test/src/components/ContextMenuItem.tsx @@ -1,12 +1,20 @@ -import React, { type FC, type SyntheticEvent, useCallback, useRef } from 'react'; +import React, { + type FC, + type SyntheticEvent, + useCallback, + useEffect, + useRef, + useState, +} from 'react'; import { Button, type ListItem } from 'storybook/internal/components'; import { useStorybookApi } from 'storybook/internal/manager-api'; import { useTheme } from 'storybook/internal/theming'; import { type API_HashEntry, type Addon_TestProviderState } from 'storybook/internal/types'; -import { PlayHollowIcon, PlayIcon, StopAltHollowIcon } from '@storybook/icons'; +import { PlayHollowIcon, StopAltHollowIcon } from '@storybook/icons'; +import { RelativeTime } from '../RelativeTime'; import { TEST_PROVIDER_ID } from '../constants'; import type { TestResult } from '../node/reporter'; @@ -18,14 +26,20 @@ export const ContextMenuItem: FC<{ ListItem: typeof ListItem; }> = ({ context, state, ListItem }) => { const api = useStorybookApi(); + const [isDisabled, setDisabled] = useState(false); + const id = useRef(context.id); + id.current = context.id; const Icon = state.running ? StopAltHollowIcon : PlayHollowIcon; - id.current = context.id; + useEffect(() => { + setDisabled(false); + }, [state.running]); const onClick = useCallback( (event: SyntheticEvent) => { + setDisabled(true); event.stopPropagation(); if (state.running) { api.cancelTestProvider(TEST_PROVIDER_ID); @@ -38,14 +52,45 @@ export const ContextMenuItem: FC<{ const theme = useTheme(); + const title = state.crashed || state.failed ? 'Component tests failed' : 'Component tests'; + const errorMessage = state.error?.message; + let description: string | React.ReactNode = 'Not run'; + + if (state.running) { + description = state.progress + ? `Testing... ${state.progress.numPassedTests}/${state.progress.numTotalTests}` + : 'Starting...'; + } else if (state.failed && !errorMessage) { + description = ''; + } else if (state.crashed || (state.failed && errorMessage)) { + description = 'An error occured'; + } else if (state.progress?.finishedAt) { + description = ( + <RelativeTime + timestamp={new Date(state.progress.finishedAt)} + testCount={state.progress.numTotalTests} + /> + ); + } else if (state.watching) { + description = 'Watching for file changes'; + } + return ( - <ListItem - title={'Run local tests'} - right={ - <Button onClick={onClick} variant="ghost" padding="small" disabled={state.crashed}> - <Icon fill={theme.barTextColor} /> - </Button> - } - /> + <div onClick={(event) => event.stopPropagation()}> + <ListItem + title={title} + center={description} + right={ + <Button + onClick={onClick} + variant="ghost" + padding="small" + disabled={state.crashed || isDisabled} + > + <Icon fill={theme.barTextColor} /> + </Button> + } + /> + </div> ); }; diff --git a/code/addons/test/src/manager.tsx b/code/addons/test/src/manager.tsx index ed8a3053f2f..9a3d9312fd3 100644 --- a/code/addons/test/src/manager.tsx +++ b/code/addons/test/src/manager.tsx @@ -1,4 +1,4 @@ -import React, { useEffect, useState } from 'react'; +import React, { useState } from 'react'; import { AddonPanel, Button, Link as LinkComponent } from 'storybook/internal/components'; import { TESTING_MODULE_RUN_ALL_REQUEST } from 'storybook/internal/core-events'; @@ -14,6 +14,7 @@ import { import { EyeIcon, PlayHollowIcon, StopAltHollowIcon } from '@storybook/icons'; +import { RelativeTime } from './RelativeTime'; import { ContextMenuItem } from './components/ContextMenuItem'; import { GlobalErrorModal } from './components/GlobalErrorModal'; import { Panel } from './components/Panel'; @@ -46,27 +47,6 @@ export function getRelativeTimeString(date: Date): string { return rtf.format(Math.floor(delta / divisor), units[unitIndex]); } -const RelativeTime = ({ timestamp, testCount }: { timestamp: Date; testCount: number }) => { - const [relativeTimeString, setRelativeTimeString] = useState(null); - - useEffect(() => { - if (timestamp) { - setRelativeTimeString(getRelativeTimeString(timestamp).replace(/^now$/, 'just now')); - - const interval = setInterval(() => { - setRelativeTimeString(getRelativeTimeString(timestamp).replace(/^now$/, 'just now')); - }, 10000); - - return () => clearInterval(interval); - } - }, [timestamp]); - - return ( - relativeTimeString && - `Ran ${testCount} ${testCount === 1 ? 'test' : 'tests'} ${relativeTimeString}` - ); -}; - const Info = styled.div({ display: 'flex', flexDirection: 'column', diff --git a/code/core/src/manager/components/sidebar/ContextMenu.tsx b/code/core/src/manager/components/sidebar/ContextMenu.tsx index d78d0451d8f..3348da2657b 100644 --- a/code/core/src/manager/components/sidebar/ContextMenu.tsx +++ b/code/core/src/manager/components/sidebar/ContextMenu.tsx @@ -55,8 +55,8 @@ export const useContextMenu = (context: API_HashEntry, links: Link[], api: API) onMouseEnter: handlers.onMouseEnter, node: isRendered ? ( <WithTooltip + data-displayed={isOpen ? 'on' : 'off'} closeOnOutsideClick - onClick={handlers.onOpen} placement="bottom-end" onVisibleChange={(visible) => { if (!visible) { @@ -69,7 +69,7 @@ export const useContextMenu = (context: API_HashEntry, links: Link[], api: API) <LiveContextMenu context={context} links={links} onClick={onHide} /> )} > - <StatusButton type="button" status={'pending'} data-displayed={isOpen ? 'on' : 'off'}> + <StatusButton type="button" status={'pending'}> <EllipsisIcon /> </StatusButton> </WithTooltip> diff --git a/code/core/src/manager/components/sidebar/Tree.tsx b/code/core/src/manager/components/sidebar/Tree.tsx index 7de14d18caa..38f1e744911 100644 --- a/code/core/src/manager/components/sidebar/Tree.tsx +++ b/code/core/src/manager/components/sidebar/Tree.tsx @@ -93,6 +93,14 @@ export const LeafNodeStyleWrapper = styled.div(({ theme }) => ({ visibility: 'visible', }, + '& [data-displayed="on"] + *': { + display: 'none', + }, + + '&:hover [data-displayed="off"] + *': { + display: 'none', + }, + '&[data-selected="true"]': { color: theme.color.lightest, background: theme.color.secondary, @@ -308,18 +316,18 @@ const Node = React.memo<NodeProps>(function Node({ <a href="#storybook-preview-wrapper">Skip to canvas</a> </SkipToContentLink> )} - {contextMenu.node || - (icon ? ( - <StatusButton - aria-label={`Test status: ${statusValue}`} - role="status" - type="button" - status={statusValue} - selectedItem={isSelected} - > - {icon} - </StatusButton> - ) : null)} + {contextMenu.node} + {icon ? ( + <StatusButton + aria-label={`Test status: ${statusValue}`} + role="status" + type="button" + status={statusValue} + selectedItem={isSelected} + > + {icon} + </StatusButton> + ) : null} </LeafNodeStyleWrapper> ); } @@ -410,14 +418,14 @@ const Node = React.memo<NodeProps>(function Node({ {(item.renderLabel as (i: typeof item, api: API) => React.ReactNode)?.(item, api) || item.name} </BranchNode> - {contextMenu.node || - (['error', 'warn'].includes(itemStatus) && ( - <StatusButton type="button" status={itemStatus}> - <svg key="icon" viewBox="0 0 6 6" width="6" height="6" type="dot"> - <UseSymbol type="dot" /> - </svg> - </StatusButton> - ))} + {contextMenu.node} + {['error', 'warn'].includes(itemStatus) && ( + <StatusButton type="button" status={itemStatus}> + <svg key="icon" viewBox="0 0 6 6" width="6" height="6" type="dot"> + <UseSymbol type="dot" /> + </svg> + </StatusButton> + )} </LeafNodeStyleWrapper> ); } From 699056479df934891eacc7021d76eb48eff1d4f2 Mon Sep 17 00:00:00 2001 From: Yann Braga <yannbf@gmail.com> Date: Fri, 15 Nov 2024 15:37:30 +0100 Subject: [PATCH 049/101] CLI: Disable corepack auto pin behavior --- .../src/common/js-package-manager/JsPackageManagerFactory.ts | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/code/core/src/common/js-package-manager/JsPackageManagerFactory.ts b/code/core/src/common/js-package-manager/JsPackageManagerFactory.ts index fcd05790605..3f31adbb1c9 100644 --- a/code/core/src/common/js-package-manager/JsPackageManagerFactory.ts +++ b/code/core/src/common/js-package-manager/JsPackageManagerFactory.ts @@ -141,6 +141,7 @@ function hasNPM(cwd?: string) { env: { ...process.env, COREPACK_ENABLE_STRICT: '0', + COREPACK_ENABLE_AUTO_PIN: '0', }, }); return npmVersionCommand.status === 0; @@ -153,6 +154,7 @@ function hasBun(cwd?: string) { env: { ...process.env, COREPACK_ENABLE_STRICT: '0', + COREPACK_ENABLE_AUTO_PIN: '0', }, }); return pnpmVersionCommand.status === 0; @@ -165,6 +167,7 @@ function hasPNPM(cwd?: string) { env: { ...process.env, COREPACK_ENABLE_STRICT: '0', + COREPACK_ENABLE_AUTO_PIN: '0', }, }); return pnpmVersionCommand.status === 0; @@ -177,6 +180,7 @@ function getYarnVersion(cwd?: string): 1 | 2 | undefined { env: { ...process.env, COREPACK_ENABLE_STRICT: '0', + COREPACK_ENABLE_AUTO_PIN: '0', }, }); From 938c90097263a8aa9541e3b67e838e179e2f8b7c Mon Sep 17 00:00:00 2001 From: Shrey Sudhir <shrey.somaiya@gmail.com> Date: Sat, 16 Nov 2024 15:52:17 +1100 Subject: [PATCH 050/101] Improve clarity of Vite Framework limitations for test-addon --- docs/writing-tests/test-addon.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/writing-tests/test-addon.mdx b/docs/writing-tests/test-addon.mdx index c75e43a8e59..fbf331c69dd 100644 --- a/docs/writing-tests/test-addon.mdx +++ b/docs/writing-tests/test-addon.mdx @@ -36,7 +36,7 @@ If a test fails, it will be marked as such in the sidebar and you can click on t Before installing, make sure your project meets the following requirements: - Storybook ≥ 8.4 -- A Storybook framework that uses Vite (e.g. [`vue3-vite`](../get-started/frameworks/vue3-vite.mdx)), or the [Storybook Next.js framework](../get-started/frameworks/nextjs.mdx) +- A Storybook framework that uses Vite (e.g. [`vue3-vite`](../get-started/frameworks/vue3-vite.mdx), [`react-vite`](../get-started/frameworks/react-vite.mdx), etc.), or the [Storybook Next.js framework](../get-started/frameworks/nextjs.mdx) - Vitest ≥ 2.1 - If you're not using Vitest, it will be installed and configured for you when you install the addon - For Next.js projects From 973306909ff3af0fb77409074a56fb0f05c89c42 Mon Sep 17 00:00:00 2001 From: Shrey Sudhir <shrey.somaiya@gmail.com> Date: Sat, 16 Nov 2024 16:24:01 +1100 Subject: [PATCH 051/101] Clean up RESOLUTIONS.md --- RESOLUTIONS.md | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/RESOLUTIONS.md b/RESOLUTIONS.md index 4e2a64960ed..c89dd7ff96d 100644 --- a/RESOLUTIONS.md +++ b/RESOLUTIONS.md @@ -2,10 +2,6 @@ This file keeps track of any resolutions or exact versions specified in any `package.json` file. Resolutions are used to specify a specific version of a package to be used, even if a different version is specified as a dependency of another package. -## code/renderers/svelte/package.json +## path/to/package.json -svelte-check@3.4.6 (bug: 3.5.x): Type issues - -## code/ui/components/package.json - -overlayscrollbars@2.2.1 (bug: 2.3.x): The Scrollbar doesn't disappear anymore by default. It might has something to do with the `scrollbars.autoHideSuspend` option, which was introduced in 2.3.0. https://github.com/KingSora/OverlayScrollbars/blob/master/packages/overlayscrollbars/CHANGELOG.md#230 \ No newline at end of file +example-library@3.4.6 (bug: 3.5.x): Pinned as there is a bug in version 3.5.x that prevents foo from doing bar. From b87b71015a2d1280af9786bc80f0712d3d2b7d9f Mon Sep 17 00:00:00 2001 From: storybook-bot <32066757+storybook-bot@users.noreply.github.com> Date: Sat, 16 Nov 2024 06:18:51 +0000 Subject: [PATCH 052/101] Bump version from "8.5.0-alpha.4" to "8.5.0-alpha.5" [skip ci] --- code/addons/a11y/package.json | 2 +- code/addons/actions/package.json | 2 +- code/addons/backgrounds/package.json | 2 +- code/addons/controls/package.json | 2 +- code/addons/docs/package.json | 2 +- code/addons/essentials/package.json | 2 +- code/addons/gfm/package.json | 2 +- code/addons/highlight/package.json | 2 +- code/addons/interactions/package.json | 2 +- code/addons/jest/package.json | 2 +- code/addons/links/package.json | 2 +- code/addons/measure/package.json | 2 +- code/addons/onboarding/package.json | 2 +- code/addons/outline/package.json | 2 +- code/addons/storysource/package.json | 2 +- code/addons/test/package.json | 2 +- code/addons/themes/package.json | 2 +- code/addons/toolbars/package.json | 2 +- code/addons/viewport/package.json | 2 +- code/builders/builder-vite/package.json | 2 +- code/builders/builder-webpack5/package.json | 2 +- code/core/package.json | 2 +- code/core/src/common/versions.ts | 168 +++++++++--------- code/core/src/manager-api/version.ts | 2 +- code/deprecated/builder-manager/package.json | 2 +- code/deprecated/channels/package.json | 2 +- code/deprecated/client-logger/package.json | 2 +- code/deprecated/components/package.json | 2 +- code/deprecated/core-common/package.json | 2 +- code/deprecated/core-events/package.json | 2 +- code/deprecated/core-server/package.json | 2 +- code/deprecated/csf-tools/package.json | 2 +- code/deprecated/docs-tools/package.json | 2 +- code/deprecated/manager-api/package.json | 2 +- code/deprecated/manager/package.json | 2 +- code/deprecated/node-logger/package.json | 2 +- code/deprecated/preview-api/package.json | 2 +- code/deprecated/preview/package.json | 2 +- code/deprecated/router/package.json | 2 +- code/deprecated/telemetry/package.json | 2 +- code/deprecated/theming/package.json | 2 +- code/deprecated/types/package.json | 2 +- code/frameworks/angular/package.json | 2 +- code/frameworks/ember/package.json | 2 +- .../experimental-nextjs-vite/package.json | 2 +- code/frameworks/html-vite/package.json | 2 +- code/frameworks/html-webpack5/package.json | 2 +- code/frameworks/nextjs/package.json | 2 +- code/frameworks/preact-vite/package.json | 2 +- code/frameworks/preact-webpack5/package.json | 2 +- code/frameworks/react-vite/package.json | 2 +- code/frameworks/react-webpack5/package.json | 2 +- code/frameworks/server-webpack5/package.json | 2 +- code/frameworks/svelte-vite/package.json | 2 +- code/frameworks/svelte-webpack5/package.json | 2 +- code/frameworks/sveltekit/package.json | 2 +- code/frameworks/vue3-vite/package.json | 2 +- code/frameworks/vue3-webpack5/package.json | 2 +- .../web-components-vite/package.json | 2 +- .../web-components-webpack5/package.json | 2 +- code/lib/blocks/package.json | 2 +- code/lib/cli-sb/package.json | 2 +- code/lib/cli-storybook/package.json | 2 +- code/lib/cli/package.json | 2 +- code/lib/codemod/package.json | 2 +- code/lib/core-webpack/package.json | 2 +- code/lib/create-storybook/package.json | 2 +- code/lib/csf-plugin/package.json | 2 +- code/lib/instrumenter/package.json | 2 +- code/lib/react-dom-shim/package.json | 2 +- code/lib/source-loader/package.json | 2 +- code/lib/test/package.json | 2 +- code/package.json | 5 +- code/presets/create-react-app/package.json | 2 +- code/presets/html-webpack/package.json | 2 +- code/presets/preact-webpack/package.json | 2 +- code/presets/react-webpack/package.json | 2 +- code/presets/server-webpack/package.json | 2 +- code/presets/svelte-webpack/package.json | 2 +- code/presets/vue3-webpack/package.json | 2 +- code/renderers/html/package.json | 2 +- code/renderers/preact/package.json | 2 +- code/renderers/react/package.json | 2 +- code/renderers/server/package.json | 2 +- code/renderers/svelte/package.json | 2 +- code/renderers/vue3/package.json | 2 +- code/renderers/web-components/package.json | 2 +- 87 files changed, 171 insertions(+), 172 deletions(-) diff --git a/code/addons/a11y/package.json b/code/addons/a11y/package.json index f2255f27646..d02355c2300 100644 --- a/code/addons/a11y/package.json +++ b/code/addons/a11y/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-a11y", - "version": "8.5.0-alpha.4", + "version": "8.5.0-alpha.5", "description": "Test component compliance with web accessibility standards", "keywords": [ "a11y", diff --git a/code/addons/actions/package.json b/code/addons/actions/package.json index eb68f20956a..cad431b9129 100644 --- a/code/addons/actions/package.json +++ b/code/addons/actions/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-actions", - "version": "8.5.0-alpha.4", + "version": "8.5.0-alpha.5", "description": "Get UI feedback when an action is performed on an interactive element", "keywords": [ "storybook", diff --git a/code/addons/backgrounds/package.json b/code/addons/backgrounds/package.json index 324301ba10c..7616d2bfc7f 100644 --- a/code/addons/backgrounds/package.json +++ b/code/addons/backgrounds/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-backgrounds", - "version": "8.5.0-alpha.4", + "version": "8.5.0-alpha.5", "description": "Switch backgrounds to view components in different settings", "keywords": [ "addon", diff --git a/code/addons/controls/package.json b/code/addons/controls/package.json index 7735f5a65c6..24b1f8f4060 100644 --- a/code/addons/controls/package.json +++ b/code/addons/controls/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-controls", - "version": "8.5.0-alpha.4", + "version": "8.5.0-alpha.5", "description": "Interact with component inputs dynamically in the Storybook UI", "keywords": [ "addon", diff --git a/code/addons/docs/package.json b/code/addons/docs/package.json index 53c2aace7a3..301bf78226a 100644 --- a/code/addons/docs/package.json +++ b/code/addons/docs/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-docs", - "version": "8.5.0-alpha.4", + "version": "8.5.0-alpha.5", "description": "Document component usage and properties in Markdown", "keywords": [ "addon", diff --git a/code/addons/essentials/package.json b/code/addons/essentials/package.json index eb6fe4fecee..47cbd864ebd 100644 --- a/code/addons/essentials/package.json +++ b/code/addons/essentials/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-essentials", - "version": "8.5.0-alpha.4", + "version": "8.5.0-alpha.5", "description": "Curated addons to bring out the best of Storybook", "keywords": [ "addon", diff --git a/code/addons/gfm/package.json b/code/addons/gfm/package.json index 3c8f1f3752b..98dcc357d94 100644 --- a/code/addons/gfm/package.json +++ b/code/addons/gfm/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-mdx-gfm", - "version": "8.5.0-alpha.4", + "version": "8.5.0-alpha.5", "description": "GitHub Flavored Markdown in Storybook", "keywords": [ "addon", diff --git a/code/addons/highlight/package.json b/code/addons/highlight/package.json index f1c2a43d4f8..e8f144d7fe4 100644 --- a/code/addons/highlight/package.json +++ b/code/addons/highlight/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-highlight", - "version": "8.5.0-alpha.4", + "version": "8.5.0-alpha.5", "description": "Highlight DOM nodes within your stories", "keywords": [ "storybook-addons", diff --git a/code/addons/interactions/package.json b/code/addons/interactions/package.json index 1b856080c8b..1a985a6f04d 100644 --- a/code/addons/interactions/package.json +++ b/code/addons/interactions/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-interactions", - "version": "8.5.0-alpha.4", + "version": "8.5.0-alpha.5", "description": "Automate, test and debug user interactions", "keywords": [ "storybook-addons", diff --git a/code/addons/jest/package.json b/code/addons/jest/package.json index 9ce8e6de8c9..ae99902e13e 100644 --- a/code/addons/jest/package.json +++ b/code/addons/jest/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-jest", - "version": "8.5.0-alpha.4", + "version": "8.5.0-alpha.5", "description": "React storybook addon that show component jest report", "keywords": [ "addon", diff --git a/code/addons/links/package.json b/code/addons/links/package.json index 38b9f5565bd..3eb9dedaad7 100644 --- a/code/addons/links/package.json +++ b/code/addons/links/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-links", - "version": "8.5.0-alpha.4", + "version": "8.5.0-alpha.5", "description": "Link stories together to build demos and prototypes with your UI components", "keywords": [ "storybook-addons", diff --git a/code/addons/measure/package.json b/code/addons/measure/package.json index 5b9b1563147..189e1d92c0d 100644 --- a/code/addons/measure/package.json +++ b/code/addons/measure/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-measure", - "version": "8.5.0-alpha.4", + "version": "8.5.0-alpha.5", "description": "Inspect layouts by visualizing the box model", "keywords": [ "storybook-addons", diff --git a/code/addons/onboarding/package.json b/code/addons/onboarding/package.json index b7b93484379..a394da48297 100644 --- a/code/addons/onboarding/package.json +++ b/code/addons/onboarding/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-onboarding", - "version": "8.5.0-alpha.4", + "version": "8.5.0-alpha.5", "description": "Storybook Addon Onboarding - Introduces a new onboarding experience", "keywords": [ "storybook-addons", diff --git a/code/addons/outline/package.json b/code/addons/outline/package.json index 3d875f435dc..6527c5cabbb 100644 --- a/code/addons/outline/package.json +++ b/code/addons/outline/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-outline", - "version": "8.5.0-alpha.4", + "version": "8.5.0-alpha.5", "description": "Outline all elements with CSS to help with layout placement and alignment", "keywords": [ "storybook-addons", diff --git a/code/addons/storysource/package.json b/code/addons/storysource/package.json index 265ea0e97e8..4201373cb37 100644 --- a/code/addons/storysource/package.json +++ b/code/addons/storysource/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-storysource", - "version": "8.5.0-alpha.4", + "version": "8.5.0-alpha.5", "description": "View a story’s source code to see how it works and paste into your app", "keywords": [ "addon", diff --git a/code/addons/test/package.json b/code/addons/test/package.json index 162999ba772..4a6639d2341 100644 --- a/code/addons/test/package.json +++ b/code/addons/test/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/experimental-addon-test", - "version": "8.5.0-alpha.4", + "version": "8.5.0-alpha.5", "description": "Integrate Vitest with Storybook", "keywords": [ "storybook-addons", diff --git a/code/addons/themes/package.json b/code/addons/themes/package.json index dd3050c07fb..acf30892844 100644 --- a/code/addons/themes/package.json +++ b/code/addons/themes/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-themes", - "version": "8.5.0-alpha.4", + "version": "8.5.0-alpha.5", "description": "Switch between multiple themes for you components in Storybook", "keywords": [ "css", diff --git a/code/addons/toolbars/package.json b/code/addons/toolbars/package.json index 7192da5dfe5..2dfbed3a597 100644 --- a/code/addons/toolbars/package.json +++ b/code/addons/toolbars/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-toolbars", - "version": "8.5.0-alpha.4", + "version": "8.5.0-alpha.5", "description": "Create your own toolbar items that control story rendering", "keywords": [ "addon", diff --git a/code/addons/viewport/package.json b/code/addons/viewport/package.json index 25d096cc207..8d2114cba00 100644 --- a/code/addons/viewport/package.json +++ b/code/addons/viewport/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-viewport", - "version": "8.5.0-alpha.4", + "version": "8.5.0-alpha.5", "description": "Build responsive components by adjusting Storybook’s viewport size and orientation", "keywords": [ "addon", diff --git a/code/builders/builder-vite/package.json b/code/builders/builder-vite/package.json index 203d1a2ed75..8735e716e6d 100644 --- a/code/builders/builder-vite/package.json +++ b/code/builders/builder-vite/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/builder-vite", - "version": "8.5.0-alpha.4", + "version": "8.5.0-alpha.5", "description": "A plugin to run and build Storybooks with Vite", "homepage": "https://github.com/storybookjs/storybook/tree/next/code/builders/builder-vite/#readme", "bugs": { diff --git a/code/builders/builder-webpack5/package.json b/code/builders/builder-webpack5/package.json index 5a28ef68119..de12052c9fc 100644 --- a/code/builders/builder-webpack5/package.json +++ b/code/builders/builder-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/builder-webpack5", - "version": "8.5.0-alpha.4", + "version": "8.5.0-alpha.5", "description": "Storybook framework-agnostic API", "keywords": [ "storybook" diff --git a/code/core/package.json b/code/core/package.json index 9418fe77621..5d48686c251 100644 --- a/code/core/package.json +++ b/code/core/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/core", - "version": "8.5.0-alpha.4", + "version": "8.5.0-alpha.5", "description": "Storybook framework-agnostic API", "keywords": [ "storybook" diff --git a/code/core/src/common/versions.ts b/code/core/src/common/versions.ts index c171c67cf16..0d8645592db 100644 --- a/code/core/src/common/versions.ts +++ b/code/core/src/common/versions.ts @@ -1,87 +1,87 @@ // auto generated file, do not edit export default { - '@storybook/addon-a11y': '8.5.0-alpha.4', - '@storybook/addon-actions': '8.5.0-alpha.4', - '@storybook/addon-backgrounds': '8.5.0-alpha.4', - '@storybook/addon-controls': '8.5.0-alpha.4', - '@storybook/addon-docs': '8.5.0-alpha.4', - '@storybook/addon-essentials': '8.5.0-alpha.4', - '@storybook/addon-mdx-gfm': '8.5.0-alpha.4', - '@storybook/addon-highlight': '8.5.0-alpha.4', - '@storybook/addon-interactions': '8.5.0-alpha.4', - '@storybook/addon-jest': '8.5.0-alpha.4', - '@storybook/addon-links': '8.5.0-alpha.4', - '@storybook/addon-measure': '8.5.0-alpha.4', - '@storybook/addon-onboarding': '8.5.0-alpha.4', - '@storybook/addon-outline': '8.5.0-alpha.4', - '@storybook/addon-storysource': '8.5.0-alpha.4', - '@storybook/experimental-addon-test': '8.5.0-alpha.4', - '@storybook/addon-themes': '8.5.0-alpha.4', - '@storybook/addon-toolbars': '8.5.0-alpha.4', - '@storybook/addon-viewport': '8.5.0-alpha.4', - '@storybook/builder-vite': '8.5.0-alpha.4', - '@storybook/builder-webpack5': '8.5.0-alpha.4', - '@storybook/core': '8.5.0-alpha.4', - '@storybook/builder-manager': '8.5.0-alpha.4', - '@storybook/channels': '8.5.0-alpha.4', - '@storybook/client-logger': '8.5.0-alpha.4', - '@storybook/components': '8.5.0-alpha.4', - '@storybook/core-common': '8.5.0-alpha.4', - '@storybook/core-events': '8.5.0-alpha.4', - '@storybook/core-server': '8.5.0-alpha.4', - '@storybook/csf-tools': '8.5.0-alpha.4', - '@storybook/docs-tools': '8.5.0-alpha.4', - '@storybook/manager': '8.5.0-alpha.4', - '@storybook/manager-api': '8.5.0-alpha.4', - '@storybook/node-logger': '8.5.0-alpha.4', - '@storybook/preview': '8.5.0-alpha.4', - '@storybook/preview-api': '8.5.0-alpha.4', - '@storybook/router': '8.5.0-alpha.4', - '@storybook/telemetry': '8.5.0-alpha.4', - '@storybook/theming': '8.5.0-alpha.4', - '@storybook/types': '8.5.0-alpha.4', - '@storybook/angular': '8.5.0-alpha.4', - '@storybook/ember': '8.5.0-alpha.4', - '@storybook/experimental-nextjs-vite': '8.5.0-alpha.4', - '@storybook/html-vite': '8.5.0-alpha.4', - '@storybook/html-webpack5': '8.5.0-alpha.4', - '@storybook/nextjs': '8.5.0-alpha.4', - '@storybook/preact-vite': '8.5.0-alpha.4', - '@storybook/preact-webpack5': '8.5.0-alpha.4', - '@storybook/react-vite': '8.5.0-alpha.4', - '@storybook/react-webpack5': '8.5.0-alpha.4', - '@storybook/server-webpack5': '8.5.0-alpha.4', - '@storybook/svelte-vite': '8.5.0-alpha.4', - '@storybook/svelte-webpack5': '8.5.0-alpha.4', - '@storybook/sveltekit': '8.5.0-alpha.4', - '@storybook/vue3-vite': '8.5.0-alpha.4', - '@storybook/vue3-webpack5': '8.5.0-alpha.4', - '@storybook/web-components-vite': '8.5.0-alpha.4', - '@storybook/web-components-webpack5': '8.5.0-alpha.4', - '@storybook/blocks': '8.5.0-alpha.4', - storybook: '8.5.0-alpha.4', - sb: '8.5.0-alpha.4', - '@storybook/cli': '8.5.0-alpha.4', - '@storybook/codemod': '8.5.0-alpha.4', - '@storybook/core-webpack': '8.5.0-alpha.4', - 'create-storybook': '8.5.0-alpha.4', - '@storybook/csf-plugin': '8.5.0-alpha.4', - '@storybook/instrumenter': '8.5.0-alpha.4', - '@storybook/react-dom-shim': '8.5.0-alpha.4', - '@storybook/source-loader': '8.5.0-alpha.4', - '@storybook/test': '8.5.0-alpha.4', - '@storybook/preset-create-react-app': '8.5.0-alpha.4', - '@storybook/preset-html-webpack': '8.5.0-alpha.4', - '@storybook/preset-preact-webpack': '8.5.0-alpha.4', - '@storybook/preset-react-webpack': '8.5.0-alpha.4', - '@storybook/preset-server-webpack': '8.5.0-alpha.4', - '@storybook/preset-svelte-webpack': '8.5.0-alpha.4', - '@storybook/preset-vue3-webpack': '8.5.0-alpha.4', - '@storybook/html': '8.5.0-alpha.4', - '@storybook/preact': '8.5.0-alpha.4', - '@storybook/react': '8.5.0-alpha.4', - '@storybook/server': '8.5.0-alpha.4', - '@storybook/svelte': '8.5.0-alpha.4', - '@storybook/vue3': '8.5.0-alpha.4', - '@storybook/web-components': '8.5.0-alpha.4', + '@storybook/addon-a11y': '8.5.0-alpha.5', + '@storybook/addon-actions': '8.5.0-alpha.5', + '@storybook/addon-backgrounds': '8.5.0-alpha.5', + '@storybook/addon-controls': '8.5.0-alpha.5', + '@storybook/addon-docs': '8.5.0-alpha.5', + '@storybook/addon-essentials': '8.5.0-alpha.5', + '@storybook/addon-mdx-gfm': '8.5.0-alpha.5', + '@storybook/addon-highlight': '8.5.0-alpha.5', + '@storybook/addon-interactions': '8.5.0-alpha.5', + '@storybook/addon-jest': '8.5.0-alpha.5', + '@storybook/addon-links': '8.5.0-alpha.5', + '@storybook/addon-measure': '8.5.0-alpha.5', + '@storybook/addon-onboarding': '8.5.0-alpha.5', + '@storybook/addon-outline': '8.5.0-alpha.5', + '@storybook/addon-storysource': '8.5.0-alpha.5', + '@storybook/experimental-addon-test': '8.5.0-alpha.5', + '@storybook/addon-themes': '8.5.0-alpha.5', + '@storybook/addon-toolbars': '8.5.0-alpha.5', + '@storybook/addon-viewport': '8.5.0-alpha.5', + '@storybook/builder-vite': '8.5.0-alpha.5', + '@storybook/builder-webpack5': '8.5.0-alpha.5', + '@storybook/core': '8.5.0-alpha.5', + '@storybook/builder-manager': '8.5.0-alpha.5', + '@storybook/channels': '8.5.0-alpha.5', + '@storybook/client-logger': '8.5.0-alpha.5', + '@storybook/components': '8.5.0-alpha.5', + '@storybook/core-common': '8.5.0-alpha.5', + '@storybook/core-events': '8.5.0-alpha.5', + '@storybook/core-server': '8.5.0-alpha.5', + '@storybook/csf-tools': '8.5.0-alpha.5', + '@storybook/docs-tools': '8.5.0-alpha.5', + '@storybook/manager': '8.5.0-alpha.5', + '@storybook/manager-api': '8.5.0-alpha.5', + '@storybook/node-logger': '8.5.0-alpha.5', + '@storybook/preview': '8.5.0-alpha.5', + '@storybook/preview-api': '8.5.0-alpha.5', + '@storybook/router': '8.5.0-alpha.5', + '@storybook/telemetry': '8.5.0-alpha.5', + '@storybook/theming': '8.5.0-alpha.5', + '@storybook/types': '8.5.0-alpha.5', + '@storybook/angular': '8.5.0-alpha.5', + '@storybook/ember': '8.5.0-alpha.5', + '@storybook/experimental-nextjs-vite': '8.5.0-alpha.5', + '@storybook/html-vite': '8.5.0-alpha.5', + '@storybook/html-webpack5': '8.5.0-alpha.5', + '@storybook/nextjs': '8.5.0-alpha.5', + '@storybook/preact-vite': '8.5.0-alpha.5', + '@storybook/preact-webpack5': '8.5.0-alpha.5', + '@storybook/react-vite': '8.5.0-alpha.5', + '@storybook/react-webpack5': '8.5.0-alpha.5', + '@storybook/server-webpack5': '8.5.0-alpha.5', + '@storybook/svelte-vite': '8.5.0-alpha.5', + '@storybook/svelte-webpack5': '8.5.0-alpha.5', + '@storybook/sveltekit': '8.5.0-alpha.5', + '@storybook/vue3-vite': '8.5.0-alpha.5', + '@storybook/vue3-webpack5': '8.5.0-alpha.5', + '@storybook/web-components-vite': '8.5.0-alpha.5', + '@storybook/web-components-webpack5': '8.5.0-alpha.5', + '@storybook/blocks': '8.5.0-alpha.5', + storybook: '8.5.0-alpha.5', + sb: '8.5.0-alpha.5', + '@storybook/cli': '8.5.0-alpha.5', + '@storybook/codemod': '8.5.0-alpha.5', + '@storybook/core-webpack': '8.5.0-alpha.5', + 'create-storybook': '8.5.0-alpha.5', + '@storybook/csf-plugin': '8.5.0-alpha.5', + '@storybook/instrumenter': '8.5.0-alpha.5', + '@storybook/react-dom-shim': '8.5.0-alpha.5', + '@storybook/source-loader': '8.5.0-alpha.5', + '@storybook/test': '8.5.0-alpha.5', + '@storybook/preset-create-react-app': '8.5.0-alpha.5', + '@storybook/preset-html-webpack': '8.5.0-alpha.5', + '@storybook/preset-preact-webpack': '8.5.0-alpha.5', + '@storybook/preset-react-webpack': '8.5.0-alpha.5', + '@storybook/preset-server-webpack': '8.5.0-alpha.5', + '@storybook/preset-svelte-webpack': '8.5.0-alpha.5', + '@storybook/preset-vue3-webpack': '8.5.0-alpha.5', + '@storybook/html': '8.5.0-alpha.5', + '@storybook/preact': '8.5.0-alpha.5', + '@storybook/react': '8.5.0-alpha.5', + '@storybook/server': '8.5.0-alpha.5', + '@storybook/svelte': '8.5.0-alpha.5', + '@storybook/vue3': '8.5.0-alpha.5', + '@storybook/web-components': '8.5.0-alpha.5', }; diff --git a/code/core/src/manager-api/version.ts b/code/core/src/manager-api/version.ts index 676a915225d..febb7e45dbf 100644 --- a/code/core/src/manager-api/version.ts +++ b/code/core/src/manager-api/version.ts @@ -1 +1 @@ -export const version = '8.5.0-alpha.4'; +export const version = '8.5.0-alpha.5'; diff --git a/code/deprecated/builder-manager/package.json b/code/deprecated/builder-manager/package.json index 99cf7b69f5a..9c3fbb7b42e 100644 --- a/code/deprecated/builder-manager/package.json +++ b/code/deprecated/builder-manager/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/builder-manager", - "version": "8.5.0-alpha.4", + "version": "8.5.0-alpha.5", "description": "Storybook manager builder", "keywords": [ "storybook" diff --git a/code/deprecated/channels/package.json b/code/deprecated/channels/package.json index 73e90def601..3eacb724e66 100644 --- a/code/deprecated/channels/package.json +++ b/code/deprecated/channels/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/channels", - "version": "8.5.0-alpha.4", + "version": "8.5.0-alpha.5", "description": "", "keywords": [ "storybook" diff --git a/code/deprecated/client-logger/package.json b/code/deprecated/client-logger/package.json index 5c50ce5f2fc..9c798bf2ca9 100644 --- a/code/deprecated/client-logger/package.json +++ b/code/deprecated/client-logger/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/client-logger", - "version": "8.5.0-alpha.4", + "version": "8.5.0-alpha.5", "description": "", "keywords": [ "storybook" diff --git a/code/deprecated/components/package.json b/code/deprecated/components/package.json index 3eb77ebc45f..ecb071ea61e 100644 --- a/code/deprecated/components/package.json +++ b/code/deprecated/components/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/components", - "version": "8.5.0-alpha.4", + "version": "8.5.0-alpha.5", "description": "Core Storybook Components", "keywords": [ "storybook" diff --git a/code/deprecated/core-common/package.json b/code/deprecated/core-common/package.json index 25870e6f68d..8b638a061d3 100644 --- a/code/deprecated/core-common/package.json +++ b/code/deprecated/core-common/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/core-common", - "version": "8.5.0-alpha.4", + "version": "8.5.0-alpha.5", "description": "Storybook framework-agnostic API", "keywords": [ "storybook" diff --git a/code/deprecated/core-events/package.json b/code/deprecated/core-events/package.json index 1b030979338..10a8c3fa093 100644 --- a/code/deprecated/core-events/package.json +++ b/code/deprecated/core-events/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/core-events", - "version": "8.5.0-alpha.4", + "version": "8.5.0-alpha.5", "description": "Event names used in storybook core", "keywords": [ "storybook" diff --git a/code/deprecated/core-server/package.json b/code/deprecated/core-server/package.json index 9b2314f3b93..7e59f7d2755 100644 --- a/code/deprecated/core-server/package.json +++ b/code/deprecated/core-server/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/core-server", - "version": "8.5.0-alpha.4", + "version": "8.5.0-alpha.5", "description": "Storybook framework-agnostic API", "keywords": [ "storybook" diff --git a/code/deprecated/csf-tools/package.json b/code/deprecated/csf-tools/package.json index 6498825c996..96200310983 100644 --- a/code/deprecated/csf-tools/package.json +++ b/code/deprecated/csf-tools/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/csf-tools", - "version": "8.5.0-alpha.4", + "version": "8.5.0-alpha.5", "description": "Parse and manipulate CSF and Storybook config files", "keywords": [ "storybook" diff --git a/code/deprecated/docs-tools/package.json b/code/deprecated/docs-tools/package.json index 9c222c71f92..8bdf3ca12be 100644 --- a/code/deprecated/docs-tools/package.json +++ b/code/deprecated/docs-tools/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/docs-tools", - "version": "8.5.0-alpha.4", + "version": "8.5.0-alpha.5", "description": "Shared utility functions for frameworks to implement docs", "keywords": [ "storybook" diff --git a/code/deprecated/manager-api/package.json b/code/deprecated/manager-api/package.json index b8622c287b5..ce8a5a5535a 100644 --- a/code/deprecated/manager-api/package.json +++ b/code/deprecated/manager-api/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/manager-api", - "version": "8.5.0-alpha.4", + "version": "8.5.0-alpha.5", "description": "Core Storybook Manager API & Context", "keywords": [ "storybook" diff --git a/code/deprecated/manager/package.json b/code/deprecated/manager/package.json index 6e14f0bf656..1b48f69f238 100644 --- a/code/deprecated/manager/package.json +++ b/code/deprecated/manager/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/manager", - "version": "8.5.0-alpha.4", + "version": "8.5.0-alpha.5", "description": "Core Storybook UI", "keywords": [ "storybook" diff --git a/code/deprecated/node-logger/package.json b/code/deprecated/node-logger/package.json index 75cc334b42e..58df94c5a5d 100644 --- a/code/deprecated/node-logger/package.json +++ b/code/deprecated/node-logger/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/node-logger", - "version": "8.5.0-alpha.4", + "version": "8.5.0-alpha.5", "description": "", "keywords": [ "storybook" diff --git a/code/deprecated/preview-api/package.json b/code/deprecated/preview-api/package.json index b431d7a5019..c3e0ecec2ea 100644 --- a/code/deprecated/preview-api/package.json +++ b/code/deprecated/preview-api/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preview-api", - "version": "8.5.0-alpha.4", + "version": "8.5.0-alpha.5", "description": "", "keywords": [ "storybook" diff --git a/code/deprecated/preview/package.json b/code/deprecated/preview/package.json index d790273912d..672e88b6624 100644 --- a/code/deprecated/preview/package.json +++ b/code/deprecated/preview/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preview", - "version": "8.5.0-alpha.4", + "version": "8.5.0-alpha.5", "description": "", "keywords": [ "storybook" diff --git a/code/deprecated/router/package.json b/code/deprecated/router/package.json index d15920b95b2..f83ff057d18 100644 --- a/code/deprecated/router/package.json +++ b/code/deprecated/router/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/router", - "version": "8.5.0-alpha.4", + "version": "8.5.0-alpha.5", "description": "Core Storybook Router", "keywords": [ "storybook" diff --git a/code/deprecated/telemetry/package.json b/code/deprecated/telemetry/package.json index 31af77e8952..f47e45db81e 100644 --- a/code/deprecated/telemetry/package.json +++ b/code/deprecated/telemetry/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/telemetry", - "version": "8.5.0-alpha.4", + "version": "8.5.0-alpha.5", "description": "Telemetry logging for crash reports and usage statistics", "keywords": [ "storybook" diff --git a/code/deprecated/theming/package.json b/code/deprecated/theming/package.json index 3ed18f3becc..343c829930a 100644 --- a/code/deprecated/theming/package.json +++ b/code/deprecated/theming/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/theming", - "version": "8.5.0-alpha.4", + "version": "8.5.0-alpha.5", "description": "Core Storybook Components", "keywords": [ "storybook" diff --git a/code/deprecated/types/package.json b/code/deprecated/types/package.json index 1c632ef6aa9..a8f24826c94 100644 --- a/code/deprecated/types/package.json +++ b/code/deprecated/types/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/types", - "version": "8.5.0-alpha.4", + "version": "8.5.0-alpha.5", "description": "Core Storybook TS Types", "keywords": [ "storybook" diff --git a/code/frameworks/angular/package.json b/code/frameworks/angular/package.json index 6856b48e156..e55efba3a14 100644 --- a/code/frameworks/angular/package.json +++ b/code/frameworks/angular/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/angular", - "version": "8.5.0-alpha.4", + "version": "8.5.0-alpha.5", "description": "Storybook for Angular: Develop Angular components in isolation with hot reloading.", "keywords": [ "storybook", diff --git a/code/frameworks/ember/package.json b/code/frameworks/ember/package.json index 57ff0c9433f..3dba5c39315 100644 --- a/code/frameworks/ember/package.json +++ b/code/frameworks/ember/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/ember", - "version": "8.5.0-alpha.4", + "version": "8.5.0-alpha.5", "description": "Storybook for Ember: Develop Ember Component in isolation with Hot Reloading.", "homepage": "https://github.com/storybookjs/storybook/tree/next/code/frameworks/ember", "bugs": { diff --git a/code/frameworks/experimental-nextjs-vite/package.json b/code/frameworks/experimental-nextjs-vite/package.json index b345971f51f..b7ee9fe02f5 100644 --- a/code/frameworks/experimental-nextjs-vite/package.json +++ b/code/frameworks/experimental-nextjs-vite/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/experimental-nextjs-vite", - "version": "8.5.0-alpha.4", + "version": "8.5.0-alpha.5", "description": "Storybook for Next.js and Vite", "keywords": [ "storybook", diff --git a/code/frameworks/html-vite/package.json b/code/frameworks/html-vite/package.json index ba9564a778a..02e6cc39701 100644 --- a/code/frameworks/html-vite/package.json +++ b/code/frameworks/html-vite/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/html-vite", - "version": "8.5.0-alpha.4", + "version": "8.5.0-alpha.5", "description": "Storybook for HTML and Vite: Develop HTML in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/html-webpack5/package.json b/code/frameworks/html-webpack5/package.json index daf023d269b..1d02e06695d 100644 --- a/code/frameworks/html-webpack5/package.json +++ b/code/frameworks/html-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/html-webpack5", - "version": "8.5.0-alpha.4", + "version": "8.5.0-alpha.5", "description": "Storybook for HTML: View HTML snippets in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/nextjs/package.json b/code/frameworks/nextjs/package.json index 90c7ef2f369..fbb3748e70c 100644 --- a/code/frameworks/nextjs/package.json +++ b/code/frameworks/nextjs/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/nextjs", - "version": "8.5.0-alpha.4", + "version": "8.5.0-alpha.5", "description": "Storybook for Next.js", "keywords": [ "storybook", diff --git a/code/frameworks/preact-vite/package.json b/code/frameworks/preact-vite/package.json index 01b2943adb3..19bdff40cdc 100644 --- a/code/frameworks/preact-vite/package.json +++ b/code/frameworks/preact-vite/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preact-vite", - "version": "8.5.0-alpha.4", + "version": "8.5.0-alpha.5", "description": "Storybook for Preact and Vite: Develop Preact components in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/preact-webpack5/package.json b/code/frameworks/preact-webpack5/package.json index 80359a42448..4e849040fe9 100644 --- a/code/frameworks/preact-webpack5/package.json +++ b/code/frameworks/preact-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preact-webpack5", - "version": "8.5.0-alpha.4", + "version": "8.5.0-alpha.5", "description": "Storybook for Preact: Develop Preact Component in isolation.", "keywords": [ "storybook" diff --git a/code/frameworks/react-vite/package.json b/code/frameworks/react-vite/package.json index 970753fceb0..e1e3d3e6f60 100644 --- a/code/frameworks/react-vite/package.json +++ b/code/frameworks/react-vite/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/react-vite", - "version": "8.5.0-alpha.4", + "version": "8.5.0-alpha.5", "description": "Storybook for React and Vite: Develop React components in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/react-webpack5/package.json b/code/frameworks/react-webpack5/package.json index 8fa48857147..f2771dea4da 100644 --- a/code/frameworks/react-webpack5/package.json +++ b/code/frameworks/react-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/react-webpack5", - "version": "8.5.0-alpha.4", + "version": "8.5.0-alpha.5", "description": "Storybook for React: Develop React Component in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/server-webpack5/package.json b/code/frameworks/server-webpack5/package.json index ba201ec98b4..de5240830e5 100644 --- a/code/frameworks/server-webpack5/package.json +++ b/code/frameworks/server-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/server-webpack5", - "version": "8.5.0-alpha.4", + "version": "8.5.0-alpha.5", "description": "Storybook for Server: View HTML snippets from a server in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/svelte-vite/package.json b/code/frameworks/svelte-vite/package.json index e4effcacd28..28e01c6c4b7 100644 --- a/code/frameworks/svelte-vite/package.json +++ b/code/frameworks/svelte-vite/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/svelte-vite", - "version": "8.5.0-alpha.4", + "version": "8.5.0-alpha.5", "description": "Storybook for Svelte and Vite: Develop Svelte components in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/svelte-webpack5/package.json b/code/frameworks/svelte-webpack5/package.json index c64dd2bdf3d..6f794008a8b 100644 --- a/code/frameworks/svelte-webpack5/package.json +++ b/code/frameworks/svelte-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/svelte-webpack5", - "version": "8.5.0-alpha.4", + "version": "8.5.0-alpha.5", "description": "Storybook for Svelte: Develop Svelte Component in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/sveltekit/package.json b/code/frameworks/sveltekit/package.json index 43035a49c68..e25957e7564 100644 --- a/code/frameworks/sveltekit/package.json +++ b/code/frameworks/sveltekit/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/sveltekit", - "version": "8.5.0-alpha.4", + "version": "8.5.0-alpha.5", "description": "Storybook for SvelteKit", "keywords": [ "storybook", diff --git a/code/frameworks/vue3-vite/package.json b/code/frameworks/vue3-vite/package.json index 1331b0f5d38..135244234c0 100644 --- a/code/frameworks/vue3-vite/package.json +++ b/code/frameworks/vue3-vite/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/vue3-vite", - "version": "8.5.0-alpha.4", + "version": "8.5.0-alpha.5", "description": "Storybook for Vue3 and Vite: Develop Vue3 components in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/vue3-webpack5/package.json b/code/frameworks/vue3-webpack5/package.json index 8ba910ad648..60eaf28db9a 100644 --- a/code/frameworks/vue3-webpack5/package.json +++ b/code/frameworks/vue3-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/vue3-webpack5", - "version": "8.5.0-alpha.4", + "version": "8.5.0-alpha.5", "description": "Storybook for Vue 3: Develop Vue 3 Components in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/web-components-vite/package.json b/code/frameworks/web-components-vite/package.json index 64de9b35e08..c6fdc46e45d 100644 --- a/code/frameworks/web-components-vite/package.json +++ b/code/frameworks/web-components-vite/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/web-components-vite", - "version": "8.5.0-alpha.4", + "version": "8.5.0-alpha.5", "description": "Storybook for web-components and Vite: Develop Web Components in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/web-components-webpack5/package.json b/code/frameworks/web-components-webpack5/package.json index b7b61e4e6bc..6bcd4934e9d 100644 --- a/code/frameworks/web-components-webpack5/package.json +++ b/code/frameworks/web-components-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/web-components-webpack5", - "version": "8.5.0-alpha.4", + "version": "8.5.0-alpha.5", "description": "Storybook for web-components: View web components snippets in isolation with Hot Reloading.", "keywords": [ "lit", diff --git a/code/lib/blocks/package.json b/code/lib/blocks/package.json index 3d943cff978..7b80cd964f1 100644 --- a/code/lib/blocks/package.json +++ b/code/lib/blocks/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/blocks", - "version": "8.5.0-alpha.4", + "version": "8.5.0-alpha.5", "description": "Storybook Doc Blocks", "keywords": [ "storybook" diff --git a/code/lib/cli-sb/package.json b/code/lib/cli-sb/package.json index a7a38e91e16..ee0ba499899 100644 --- a/code/lib/cli-sb/package.json +++ b/code/lib/cli-sb/package.json @@ -1,6 +1,6 @@ { "name": "sb", - "version": "8.5.0-alpha.4", + "version": "8.5.0-alpha.5", "description": "Storybook CLI", "keywords": [ "storybook" diff --git a/code/lib/cli-storybook/package.json b/code/lib/cli-storybook/package.json index 34da5e61ee2..7d48dae7c3e 100644 --- a/code/lib/cli-storybook/package.json +++ b/code/lib/cli-storybook/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/cli", - "version": "8.5.0-alpha.4", + "version": "8.5.0-alpha.5", "description": "Storybook CLI", "keywords": [ "storybook" diff --git a/code/lib/cli/package.json b/code/lib/cli/package.json index 9882b1629d8..16cb412dd2b 100644 --- a/code/lib/cli/package.json +++ b/code/lib/cli/package.json @@ -1,6 +1,6 @@ { "name": "storybook", - "version": "8.5.0-alpha.4", + "version": "8.5.0-alpha.5", "description": "Storybook's CLI - install, dev, build, upgrade, and more", "keywords": [ "cli", diff --git a/code/lib/codemod/package.json b/code/lib/codemod/package.json index 3017ffc5639..d52676c8a54 100644 --- a/code/lib/codemod/package.json +++ b/code/lib/codemod/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/codemod", - "version": "8.5.0-alpha.4", + "version": "8.5.0-alpha.5", "description": "A collection of codemod scripts written with JSCodeshift", "keywords": [ "storybook" diff --git a/code/lib/core-webpack/package.json b/code/lib/core-webpack/package.json index 37a4f36d1cc..c70a175fca9 100644 --- a/code/lib/core-webpack/package.json +++ b/code/lib/core-webpack/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/core-webpack", - "version": "8.5.0-alpha.4", + "version": "8.5.0-alpha.5", "description": "Storybook framework-agnostic API", "keywords": [ "storybook" diff --git a/code/lib/create-storybook/package.json b/code/lib/create-storybook/package.json index 8b823420f67..4dd3aa01efe 100644 --- a/code/lib/create-storybook/package.json +++ b/code/lib/create-storybook/package.json @@ -1,6 +1,6 @@ { "name": "create-storybook", - "version": "8.5.0-alpha.4", + "version": "8.5.0-alpha.5", "description": "Initialize Storybook into your project", "homepage": "https://github.com/storybookjs/storybook/tree/next/code/lib/create-storybook", "bugs": { diff --git a/code/lib/csf-plugin/package.json b/code/lib/csf-plugin/package.json index 6a79843d9aa..9b87763fbe6 100644 --- a/code/lib/csf-plugin/package.json +++ b/code/lib/csf-plugin/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/csf-plugin", - "version": "8.5.0-alpha.4", + "version": "8.5.0-alpha.5", "description": "Enrich CSF files via static analysis", "keywords": [ "storybook" diff --git a/code/lib/instrumenter/package.json b/code/lib/instrumenter/package.json index c1a2d9f5a71..bda21c3fae8 100644 --- a/code/lib/instrumenter/package.json +++ b/code/lib/instrumenter/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/instrumenter", - "version": "8.5.0-alpha.4", + "version": "8.5.0-alpha.5", "description": "", "keywords": [ "storybook" diff --git a/code/lib/react-dom-shim/package.json b/code/lib/react-dom-shim/package.json index ebf6e88f463..30791faf318 100644 --- a/code/lib/react-dom-shim/package.json +++ b/code/lib/react-dom-shim/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/react-dom-shim", - "version": "8.5.0-alpha.4", + "version": "8.5.0-alpha.5", "description": "", "keywords": [ "storybook" diff --git a/code/lib/source-loader/package.json b/code/lib/source-loader/package.json index 35cca231410..14585186deb 100644 --- a/code/lib/source-loader/package.json +++ b/code/lib/source-loader/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/source-loader", - "version": "8.5.0-alpha.4", + "version": "8.5.0-alpha.5", "description": "Source loader", "keywords": [ "lib", diff --git a/code/lib/test/package.json b/code/lib/test/package.json index eec37808cf1..63f0f751a15 100644 --- a/code/lib/test/package.json +++ b/code/lib/test/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/test", - "version": "8.5.0-alpha.4", + "version": "8.5.0-alpha.5", "description": "", "keywords": [ "storybook" diff --git a/code/package.json b/code/package.json index e10802edfb6..4777bbb0cb0 100644 --- a/code/package.json +++ b/code/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/root", - "version": "8.5.0-alpha.4", + "version": "8.5.0-alpha.5", "private": true, "description": "Storybook root", "homepage": "https://storybook.js.org/", @@ -293,6 +293,5 @@ "Dependency Upgrades" ] ] - }, - "deferredNextVersion": "8.5.0-alpha.5" + } } diff --git a/code/presets/create-react-app/package.json b/code/presets/create-react-app/package.json index eadaad9d6b5..1f91f091664 100644 --- a/code/presets/create-react-app/package.json +++ b/code/presets/create-react-app/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preset-create-react-app", - "version": "8.5.0-alpha.4", + "version": "8.5.0-alpha.5", "description": "Storybook for Create React App preset", "keywords": [ "storybook" diff --git a/code/presets/html-webpack/package.json b/code/presets/html-webpack/package.json index 1d6645f70c5..53fc9f04854 100644 --- a/code/presets/html-webpack/package.json +++ b/code/presets/html-webpack/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preset-html-webpack", - "version": "8.5.0-alpha.4", + "version": "8.5.0-alpha.5", "description": "Storybook for HTML: View HTML snippets in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/presets/preact-webpack/package.json b/code/presets/preact-webpack/package.json index e5695ff0a6b..fb9c63dafce 100644 --- a/code/presets/preact-webpack/package.json +++ b/code/presets/preact-webpack/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preset-preact-webpack", - "version": "8.5.0-alpha.4", + "version": "8.5.0-alpha.5", "description": "Storybook for Preact: Develop Preact Component in isolation.", "keywords": [ "storybook" diff --git a/code/presets/react-webpack/package.json b/code/presets/react-webpack/package.json index 83c568f8409..4394c48e6ca 100644 --- a/code/presets/react-webpack/package.json +++ b/code/presets/react-webpack/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preset-react-webpack", - "version": "8.5.0-alpha.4", + "version": "8.5.0-alpha.5", "description": "Storybook for React: Develop React Component in isolation with Hot Reloading", "keywords": [ "storybook" diff --git a/code/presets/server-webpack/package.json b/code/presets/server-webpack/package.json index 8a916f04d98..7435fe28e24 100644 --- a/code/presets/server-webpack/package.json +++ b/code/presets/server-webpack/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preset-server-webpack", - "version": "8.5.0-alpha.4", + "version": "8.5.0-alpha.5", "description": "Storybook for Server: View HTML snippets from a server in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/presets/svelte-webpack/package.json b/code/presets/svelte-webpack/package.json index c8b71217dd8..e588e50fe2f 100644 --- a/code/presets/svelte-webpack/package.json +++ b/code/presets/svelte-webpack/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preset-svelte-webpack", - "version": "8.5.0-alpha.4", + "version": "8.5.0-alpha.5", "description": "Storybook for Svelte: Develop Svelte Component in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/presets/vue3-webpack/package.json b/code/presets/vue3-webpack/package.json index bc454ee7622..dbc4327b6a8 100644 --- a/code/presets/vue3-webpack/package.json +++ b/code/presets/vue3-webpack/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preset-vue3-webpack", - "version": "8.5.0-alpha.4", + "version": "8.5.0-alpha.5", "description": "Storybook for Vue 3: Develop Vue 3 Components in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/renderers/html/package.json b/code/renderers/html/package.json index a24feb3115c..1056fd29e28 100644 --- a/code/renderers/html/package.json +++ b/code/renderers/html/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/html", - "version": "8.5.0-alpha.4", + "version": "8.5.0-alpha.5", "description": "Storybook HTML renderer", "keywords": [ "storybook" diff --git a/code/renderers/preact/package.json b/code/renderers/preact/package.json index 318f2752abc..94a9b413e3b 100644 --- a/code/renderers/preact/package.json +++ b/code/renderers/preact/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preact", - "version": "8.5.0-alpha.4", + "version": "8.5.0-alpha.5", "description": "Storybook Preact renderer", "keywords": [ "storybook" diff --git a/code/renderers/react/package.json b/code/renderers/react/package.json index db0202f8156..fcd2743ea5b 100644 --- a/code/renderers/react/package.json +++ b/code/renderers/react/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/react", - "version": "8.5.0-alpha.4", + "version": "8.5.0-alpha.5", "description": "Storybook React renderer", "keywords": [ "storybook" diff --git a/code/renderers/server/package.json b/code/renderers/server/package.json index 5106386a3ea..ac510645df5 100644 --- a/code/renderers/server/package.json +++ b/code/renderers/server/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/server", - "version": "8.5.0-alpha.4", + "version": "8.5.0-alpha.5", "description": "Storybook Server renderer", "keywords": [ "storybook" diff --git a/code/renderers/svelte/package.json b/code/renderers/svelte/package.json index 9b455e59039..86b11f8be62 100644 --- a/code/renderers/svelte/package.json +++ b/code/renderers/svelte/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/svelte", - "version": "8.5.0-alpha.4", + "version": "8.5.0-alpha.5", "description": "Storybook Svelte renderer", "keywords": [ "storybook" diff --git a/code/renderers/vue3/package.json b/code/renderers/vue3/package.json index cc5088e06d6..f97c9823469 100644 --- a/code/renderers/vue3/package.json +++ b/code/renderers/vue3/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/vue3", - "version": "8.5.0-alpha.4", + "version": "8.5.0-alpha.5", "description": "Storybook Vue 3 renderer", "keywords": [ "storybook" diff --git a/code/renderers/web-components/package.json b/code/renderers/web-components/package.json index 979ea166053..ebf13b0cd95 100644 --- a/code/renderers/web-components/package.json +++ b/code/renderers/web-components/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/web-components", - "version": "8.5.0-alpha.4", + "version": "8.5.0-alpha.5", "description": "Storybook web-components renderer", "keywords": [ "lit", From bb359ef00096c51bc18edaad054e53dd14c3ded6 Mon Sep 17 00:00:00 2001 From: Michael Shilman <shilman@users.noreply.github.com> Date: Sat, 16 Nov 2024 14:59:09 +0800 Subject: [PATCH 053/101] React-native-web: Add framework docs --- .../react-native-web-vite-add-framework.md | 25 +++ .../react-native-web-vite-install.md | 11 ++ .../frameworks/react-native-web-vite.mdx | 153 ++++++++++++++++++ docs/get-started/frameworks/svelte-vite.mdx | 2 +- .../frameworks/svelte-webpack5.mdx | 2 +- docs/get-started/frameworks/sveltekit.mdx | 2 +- docs/get-started/frameworks/vue3-vite.mdx | 2 +- docs/get-started/frameworks/vue3-webpack5.mdx | 2 +- .../frameworks/web-components-vite.mdx | 2 +- .../frameworks/web-components-webpack5.mdx | 2 +- 10 files changed, 196 insertions(+), 7 deletions(-) create mode 100644 docs/_snippets/react-native-web-vite-add-framework.md create mode 100644 docs/_snippets/react-native-web-vite-install.md create mode 100644 docs/get-started/frameworks/react-native-web-vite.mdx diff --git a/docs/_snippets/react-native-web-vite-add-framework.md b/docs/_snippets/react-native-web-vite-add-framework.md new file mode 100644 index 00000000000..da512fc9a27 --- /dev/null +++ b/docs/_snippets/react-native-web-vite-add-framework.md @@ -0,0 +1,25 @@ +```js filename=".storybook/main.js" renderer="react-native-web" language="js" +export default { + addons: [ + // '@storybook/addon-react-native-web', 👈 Remove this + ], + // ... + // framework: '@storybook/react-webpack5', 👈 Remove this + framework: '@storybook/react-native-web-vite', // 👈 Add this +}; +``` + +```ts filename=".storybook/main.ts" renderer="react-native-web" language="ts" +import { StorybookConfig } from '@storybook/react-native-web-vite'; + +const config: StorybookConfig = { + addons: [ + // '@storybook/addon-react-native-web', 👈 Remove this + ], + // ... + // framework: '@storybook/react-webpack5', 👈 Remove this + framework: '@storybook/react-native-web-vite', // 👈 Add this +}; + +export default config; +``` diff --git a/docs/_snippets/react-native-web-vite-install.md b/docs/_snippets/react-native-web-vite-install.md new file mode 100644 index 00000000000..719993c04e7 --- /dev/null +++ b/docs/_snippets/react-native-web-vite-install.md @@ -0,0 +1,11 @@ +```shell renderer="react-native-web" language="js" packageManager="npm" +npm install --save-dev @storybook/react-native-web-vite vite +``` + +```shell renderer="react-native-web" language="js" packageManager="pnpm" +pnpm add --save-dev @storybook/react-native-web-vite vite +``` + +```shell renderer="react-native-web" language="js" packageManager="yarn" +yarn add --dev @storybook/react-native-web-vite vite +``` diff --git a/docs/get-started/frameworks/react-native-web-vite.mdx b/docs/get-started/frameworks/react-native-web-vite.mdx new file mode 100644 index 00000000000..a663847af77 --- /dev/null +++ b/docs/get-started/frameworks/react-native-web-vite.mdx @@ -0,0 +1,153 @@ +--- +title: Storybook for React Native Web +sidebar: + order: 5 + title: React Native Web +--- + +Storybook for React Native Web is a [framework](../../contribute/framework.mdx) that makes it easy to develop and test UI components in isolation for [React Native](https://reactnative.dev/) applications. It uses [Vite](https://vitejs.dev/) to build your components for web browsers. The framework includes: + +* ⚛️ React Native components +* 📱 Mobile emulation in the browser +* 🧑‍💻 Shareable on the web +* 🪄 Zero confg +* 💫 and more! + +<If notRenderer={'react-native-web'}> + <Callout variant="info"> + Storybook for React Native Web is only supported in [React Native](?renderer=react-native-web) projects. + </Callout> + + {/* End non-supported renderers */} +</If> + +<If renderer={'react-native-web'}> + <Callout variant="info"> + In addition to React Native Web, Storybook also supports on-device [React Native](https://github.com/storybookjs/react-native) development. If you're not sure what's right for you, read our [comparison](#react-native-vs-react-native-web). + </Callout> + + ## Requirements + + * React-Native ≥ 0.72 + * React-Native-Web ≥ 0.19 + * Storybook ≥ 8.5 + + ## Getting started + + ### In a project without Storybook + + Follow the prompts after running this command in your React project's root directory: + + {/* prettier-ignore-start */} + + <CodeSnippets path="init-command.md" /> + + {/* prettier-ignore-end */} + + [More on getting started with Storybook.](../install.mdx) + + ### In a project with Storybook `addon-react-native-web` + + The [React Native Web addon](https://github.com/storybookjs/addon-react-native-web), `@storybook/addon-react-native-web` was Webpack-based precursor the React Native Web Vite framework `@storybook/react-native-web-vite`. + + If you're using the addon, you should migrate to the framework, which is faster, more stable, maintained, and better documented. You can migrate to the framework by following the steps below. + + This framework is designed to work with Storybook 8.5+. If you’re not already using 8.5, upgrade with this command: + + {/* prettier-ignore-start */} + + <CodeSnippets path="storybook-upgrade.md" /> + + {/* prettier-ignore-end */} + + Then, install the framework and its peer dependencies: + + {/* prettier-ignore-start */} + + <CodeSnippets path="react-native-web-vite-install.md" /> + + {/* prettier-ignore-end */} + + Then, update your `.storybook/main.js|ts` to change the framework property and remove the `@storybook/addon-react-native-web` addon: + + {/* prettier-ignore-start */} + + <CodeSnippets path="react-vite-add-framework.md" /> + + {/* prettier-ignore-end */} + + Finally, you can manually remove `@storybook/react-webpack5` and `@storybook/addon-react-native-web` as project dependencies in `package.json`. + + ### In a project with Storybook `react-native` + + [Storybook for React Native](https://github.com/storybookjs/react-native) is a framework that runs in a simulator or on your mobile device. + + It's possible to run React Native Web alongside React Native, but we are still working on a seamless integration. In the mantime, we recommend running one or the other. If you're not sure what's right for you, read our [comparison](#react-native-vs-react-native-web). + + ## Run the Setup Wizard + + If all goes well, you should see a setup wizard that will help you get started with Storybook introducing you to the main concepts and features, including how the UI is organized, how to write your first story, and how to test your components' response to various inputs utilizing [controls](../../essentials/controls.mdx). + + ![Storybook onboarding](../../_assets/get-started/example-onboarding-wizard.png) + + If you skipped the wizard, you can always run it again by adding the `?path=/onboarding` query parameter to the URL of your Storybook instance, provided that the example stories are still available. + + ## API + + ### Options + + You can pass an options object for additional configuration if needed: + + ```ts + // .storybook/main.ts + import type { StorybookConfig } from '@storybook/react-native-web-vite'; + + const config: StorybookConfig = { + framework: { + name: '@storybook/react-native-web-vite', + options: { + // ... + }, + }, + }; + + export default config; + ``` + + #### `builder` + + Type: `Record<string, any>` + + Configure options for the [framework's builder](../../api/main-config/main-config-framework.mdx#optionsbuilder). For this framework, available options can be found in the [Vite builder docs](../../builders/vite.mdx). + + ## React Native vs React Native Web + + If you’re building React Native (RN) components, Storybook has two options: Native and Web. + + Both options provide a catalog of your stories that hot refreshes as you edit the code in your favorite editor. + + [Image: native + web] + + However, their implementations are quite different: + + - **Native** runs inside your RN app. It’s high fidelity but has a limited feature set. + - **Web** displays your RN components in the browser. It’s based on Storybook for Web, which is feature rich and mature. + + So, which option is right for you? + + **Native.** You should choose Native if you want: + + - **Native features.** Your components rely on device-specific features like native modules. Native runs in your actual app, in-simulator or on-device, and provides full fidelity. Web uses `react-native-web`, which works for most components but has [limitations](https://necolas.github.io/react-native-web/docs/react-native-compatibility/). + - **Mobile publication.** You want to share your Storybook on-device as part of a test build, or embedded inside your application. + + **Web.** You should choose Web if you want: + + - [**Sharing](https://storybook.js.org/docs/sharing).** Publish to the web and share with your team or publicly. + - [**Documentation](https://storybook.js.org/docs/writing-docs). A**uto-generated component docs or rich markdown docs in MDX. + - [**Testing**](https://storybook.js.org/docs/writing-tests). Component, visual, and a11y tests for your components. + - [**Addons**](https://storybook.js.org/docs/essentials). 500+ addons that improve development, documentation, testing, and integration with other tools. + + **Both.** It’s also possible to use both options together. However, this increases Storybook’s install footprint and requires more work to configure. Therefore, we recommend choosing one option to start and then extending it once you have something working. + {/* End supported renderers */} +</If> + diff --git a/docs/get-started/frameworks/svelte-vite.mdx b/docs/get-started/frameworks/svelte-vite.mdx index 91c76a67089..eb6c05d50c2 100644 --- a/docs/get-started/frameworks/svelte-vite.mdx +++ b/docs/get-started/frameworks/svelte-vite.mdx @@ -1,7 +1,7 @@ --- title: Storybook for Svelte & Vite sidebar: - order: 6 + order: 7 title: Svelte & Vite --- diff --git a/docs/get-started/frameworks/svelte-webpack5.mdx b/docs/get-started/frameworks/svelte-webpack5.mdx index 8c3f78ddc2b..61a54f33b57 100644 --- a/docs/get-started/frameworks/svelte-webpack5.mdx +++ b/docs/get-started/frameworks/svelte-webpack5.mdx @@ -1,7 +1,7 @@ --- title: Storybook for Svelte & Webpack sidebar: - order: 7 + order: 8 title: Svelte & Webpack --- diff --git a/docs/get-started/frameworks/sveltekit.mdx b/docs/get-started/frameworks/sveltekit.mdx index 3480bdb4b8f..c79a5437958 100644 --- a/docs/get-started/frameworks/sveltekit.mdx +++ b/docs/get-started/frameworks/sveltekit.mdx @@ -1,7 +1,7 @@ --- title: Storybook for SvelteKit sidebar: - order: 5 + order: 6 title: SvelteKit --- diff --git a/docs/get-started/frameworks/vue3-vite.mdx b/docs/get-started/frameworks/vue3-vite.mdx index 5aa98fad96c..0a3cdc03c67 100644 --- a/docs/get-started/frameworks/vue3-vite.mdx +++ b/docs/get-started/frameworks/vue3-vite.mdx @@ -1,7 +1,7 @@ --- title: Storybook for Vue & Vite sidebar: - order: 8 + order: 9 title: Vue & Vite --- diff --git a/docs/get-started/frameworks/vue3-webpack5.mdx b/docs/get-started/frameworks/vue3-webpack5.mdx index a9f7f900720..7cd27d45764 100644 --- a/docs/get-started/frameworks/vue3-webpack5.mdx +++ b/docs/get-started/frameworks/vue3-webpack5.mdx @@ -1,7 +1,7 @@ --- title: Storybook for Vue & Webpack sidebar: - order: 9 + order: 10 title: Vue & Webpack --- diff --git a/docs/get-started/frameworks/web-components-vite.mdx b/docs/get-started/frameworks/web-components-vite.mdx index 82f0c730fcb..165be914c41 100644 --- a/docs/get-started/frameworks/web-components-vite.mdx +++ b/docs/get-started/frameworks/web-components-vite.mdx @@ -1,7 +1,7 @@ --- title: Storybook for Web components & Vite sidebar: - order: 10 + order: 11 title: Web components & Vite --- diff --git a/docs/get-started/frameworks/web-components-webpack5.mdx b/docs/get-started/frameworks/web-components-webpack5.mdx index a9e56ef0cce..4b39b0327a9 100644 --- a/docs/get-started/frameworks/web-components-webpack5.mdx +++ b/docs/get-started/frameworks/web-components-webpack5.mdx @@ -1,7 +1,7 @@ --- title: Storybook for Web components & Webpack sidebar: - order: 11 + order: 12 title: Web components & Webpack --- From 3204bec0da9f726a73b3a5ece354c6f0f711e686 Mon Sep 17 00:00:00 2001 From: Michael Shilman <shilman@users.noreply.github.com> Date: Sat, 16 Nov 2024 22:28:12 +0800 Subject: [PATCH 054/101] RNW-Vite: Try to add docgen --- code/frameworks/react-native-web-vite/package.json | 1 + code/frameworks/react-native-web-vite/src/preset.ts | 11 +++++------ code/lib/cli-storybook/src/sandbox-templates.ts | 2 +- .../src/generators/REACT_NATIVE_WEB/index.ts | 2 +- code/yarn.lock | 1 + 5 files changed, 9 insertions(+), 8 deletions(-) diff --git a/code/frameworks/react-native-web-vite/package.json b/code/frameworks/react-native-web-vite/package.json index 77657f98794..130e54dcff7 100644 --- a/code/frameworks/react-native-web-vite/package.json +++ b/code/frameworks/react-native-web-vite/package.json @@ -52,6 +52,7 @@ "@rollup/pluginutils": "^5.0.2", "@storybook/builder-vite": "workspace:*", "@storybook/react": "workspace:*", + "@storybook/react-vite": "workspace:*", "@vitejs/plugin-react": "^4.3.2", "find-up": "^5.0.0", "magic-string": "^0.30.0", diff --git a/code/frameworks/react-native-web-vite/src/preset.ts b/code/frameworks/react-native-web-vite/src/preset.ts index a8e278eab0d..85db4f7e014 100644 --- a/code/frameworks/react-native-web-vite/src/preset.ts +++ b/code/frameworks/react-native-web-vite/src/preset.ts @@ -1,4 +1,4 @@ -import { hasVitePlugins } from '@storybook/builder-vite'; +import { viteFinal as reactViteFinal } from '@storybook/react-vite/preset'; import type { BabelOptions, Options as ReactOptions } from '@vitejs/plugin-react'; import react from '@vitejs/plugin-react'; @@ -66,10 +66,10 @@ export const viteFinal: StorybookConfig['viteFinal'] = async (config, options) = const { pluginReactOptions = {} } = await options.presets.apply<FrameworkOptions>('frameworkOptions'); - const { plugins = [] } = config; + const reactConfig = await reactViteFinal(config, options); + const { plugins = [] } = reactConfig; - // if (!(await hasVitePlugins(plugins, ['vite:react-native-web']))) { - plugins.push( + plugins.unshift( react({ babel: { babelrc: false, @@ -80,9 +80,8 @@ export const viteFinal: StorybookConfig['viteFinal'] = async (config, options) = }) ); plugins.push(reactNativeWeb(pluginReactOptions)); - //} - return config; + return reactConfig; }; export const core = { diff --git a/code/lib/cli-storybook/src/sandbox-templates.ts b/code/lib/cli-storybook/src/sandbox-templates.ts index e84563d8cec..30a389fe8e1 100644 --- a/code/lib/cli-storybook/src/sandbox-templates.ts +++ b/code/lib/cli-storybook/src/sandbox-templates.ts @@ -614,7 +614,7 @@ const baseTemplates = { name: 'React Native CLI Latest (Vite | TypeScript)', script: 'npx @react-native-community/cli@latest init --install-pods=false --directory={{beforeDir}} rnapp', - inDevelopment: true, + inDevelopment: false, expected: { framework: '@storybook/react-native-web-vite', renderer: '@storybook/react', diff --git a/code/lib/create-storybook/src/generators/REACT_NATIVE_WEB/index.ts b/code/lib/create-storybook/src/generators/REACT_NATIVE_WEB/index.ts index 721987d4666..e102ee3f63c 100644 --- a/code/lib/create-storybook/src/generators/REACT_NATIVE_WEB/index.ts +++ b/code/lib/create-storybook/src/generators/REACT_NATIVE_WEB/index.ts @@ -7,7 +7,7 @@ import type { Generator } from '../types'; const generator: Generator = async (packageManager, npmOptions, options) => { // Add prop-types dependency if not using TypeScript const language = await detectLanguage(packageManager); - const extraPackages = ['vite']; + const extraPackages = ['vite', 'react-native-web']; if (language === SupportedLanguage.JAVASCRIPT) { extraPackages.push('prop-types'); } diff --git a/code/yarn.lock b/code/yarn.lock index da4e689bace..aef791b79ee 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -6925,6 +6925,7 @@ __metadata: "@rollup/pluginutils": "npm:^5.0.2" "@storybook/builder-vite": "workspace:*" "@storybook/react": "workspace:*" + "@storybook/react-vite": "workspace:*" "@types/node": "npm:^22.0.0" "@vitejs/plugin-react": "npm:^4.3.2" find-up: "npm:^5.0.0" From c92aa93aa22040d9df0fbb8380d8a12498aec91d Mon Sep 17 00:00:00 2001 From: Michael Shilman <shilman@users.noreply.github.com> Date: Sat, 16 Nov 2024 22:53:56 +0800 Subject: [PATCH 055/101] Fix TS error --- code/frameworks/react-native-web-vite/src/preset.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/code/frameworks/react-native-web-vite/src/preset.ts b/code/frameworks/react-native-web-vite/src/preset.ts index 85db4f7e014..e7a4a902bfd 100644 --- a/code/frameworks/react-native-web-vite/src/preset.ts +++ b/code/frameworks/react-native-web-vite/src/preset.ts @@ -1,3 +1,4 @@ +// @ts-expect-error FIXME import { viteFinal as reactViteFinal } from '@storybook/react-vite/preset'; import type { BabelOptions, Options as ReactOptions } from '@vitejs/plugin-react'; From cc9b1b2f79743f68d3a5d557542243f482045bc4 Mon Sep 17 00:00:00 2001 From: Michael Shilman <shilman@users.noreply.github.com> Date: Sat, 16 Nov 2024 23:41:29 +0800 Subject: [PATCH 056/101] RNW-Vite: Add JS stories, autodocs --- .../template/cli/js/Button.jsx | 109 ++++++++++++ .../template/cli/js/Button.stories.jsx | 45 +++++ .../template/cli/js/Header.jsx | 75 ++++++++ .../template/cli/js/Header.stories.jsx | 26 +++ .../template/cli/js/Page.jsx | 164 ++++++++++++++++++ .../template/cli/js/Page.stories.jsx | 16 ++ .../template/cli/ts-3-8/Button.stories.tsx | 2 + .../template/cli/ts-3-8/Button.tsx | 2 - .../template/cli/ts-3-8/Header.stories.tsx | 2 + .../template/cli/ts-4-9/Button.stories.tsx | 2 + .../template/cli/ts-4-9/Header.stories.tsx | 2 + 11 files changed, 443 insertions(+), 2 deletions(-) create mode 100644 code/frameworks/react-native-web-vite/template/cli/js/Button.jsx create mode 100644 code/frameworks/react-native-web-vite/template/cli/js/Button.stories.jsx create mode 100644 code/frameworks/react-native-web-vite/template/cli/js/Header.jsx create mode 100644 code/frameworks/react-native-web-vite/template/cli/js/Header.stories.jsx create mode 100644 code/frameworks/react-native-web-vite/template/cli/js/Page.jsx create mode 100644 code/frameworks/react-native-web-vite/template/cli/js/Page.stories.jsx diff --git a/code/frameworks/react-native-web-vite/template/cli/js/Button.jsx b/code/frameworks/react-native-web-vite/template/cli/js/Button.jsx new file mode 100644 index 00000000000..4d87b6e2c4e --- /dev/null +++ b/code/frameworks/react-native-web-vite/template/cli/js/Button.jsx @@ -0,0 +1,109 @@ +import PropTypes from 'prop-types'; +import { StyleSheet, Text, TouchableOpacity, View } from 'react-native'; + +/** Primary UI component for user interaction */ +export const Button = ({ + primary = false, + size = 'medium', + backgroundColor, + label, + style, + onPress, +}) => { + const modeStyle = primary ? styles.primary : styles.secondary; + const textModeStyle = primary ? styles.primaryText : styles.secondaryText; + + const sizeStyle = styles[size]; + const textSizeStyle = textSizeStyles[size]; + + return ( + <TouchableOpacity accessibilityRole="button" activeOpacity={0.6} onPress={onPress}> + <View + style={[ + styles.button, + modeStyle, + sizeStyle, + style, + !!backgroundColor && { backgroundColor }, + { borderColor: 'black' }, + ]} + > + <Text style={[textModeStyle, textSizeStyle]}>{label}</Text> + </View> + </TouchableOpacity> + ); +}; + +const styles = StyleSheet.create({ + button: { + borderWidth: 0, + borderRadius: 48, + }, + buttonText: { + fontWeight: '700', + lineHeight: 1, + }, + primary: { + backgroundColor: '#1ea7fd', + }, + primaryText: { + color: 'white', + }, + secondary: { + backgroundColor: 'transparent', + borderColor: 'rgba(0, 0, 0, 0.15)', + borderWidth: 1, + }, + secondaryText: { + color: '#333', + }, + small: { + paddingVertical: 10, + paddingHorizontal: 16, + }, + smallText: { + fontSize: 12, + }, + medium: { + paddingVertical: 11, + paddingHorizontal: 20, + }, + mediumText: { + fontSize: 14, + }, + large: { + paddingVertical: 12, + paddingHorizontal: 24, + }, + largeText: { + fontSize: 16, + }, +}); + +const textSizeStyles = { + small: styles.smallText, + medium: styles.mediumText, + large: styles.largeText, +}; + +Button.propTypes = { + /** Is this the principal call to action on the page? */ + primary: PropTypes.bool, + /** What background color to use */ + backgroundColor: PropTypes.string, + /** How large should the button be? */ + size: PropTypes.oneOf(['small', 'medium', 'large']), + /** Button contents */ + label: PropTypes.string.isRequired, + /** Optional click handler */ + onPress: PropTypes.func, + /** Optional extra styles */ + style: PropTypes.object, +}; + +Button.defaultProps = { + backgroundColor: null, + primary: false, + size: 'medium', + onClick: undefined, +}; diff --git a/code/frameworks/react-native-web-vite/template/cli/js/Button.stories.jsx b/code/frameworks/react-native-web-vite/template/cli/js/Button.stories.jsx new file mode 100644 index 00000000000..f25e767a888 --- /dev/null +++ b/code/frameworks/react-native-web-vite/template/cli/js/Button.stories.jsx @@ -0,0 +1,45 @@ +import { View } from 'react-native'; + +import { Button } from './Button'; + +const meta = { + component: Button, + decorators: [ + (Story) => ( + <View style={{ flex: 1, alignItems: 'flex-start' }}> + <Story /> + </View> + ), + ], + // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs + tags: ['autodocs'], +}; + +export default meta; + +export const Primary = { + args: { + primary: true, + label: 'Button', + }, +}; + +export const Secondary = { + args: { + label: 'Button', + }, +}; + +export const Large = { + args: { + size: 'large', + label: 'Button', + }, +}; + +export const Small = { + args: { + size: 'small', + label: 'Button', + }, +}; diff --git a/code/frameworks/react-native-web-vite/template/cli/js/Header.jsx b/code/frameworks/react-native-web-vite/template/cli/js/Header.jsx new file mode 100644 index 00000000000..9c5093f261a --- /dev/null +++ b/code/frameworks/react-native-web-vite/template/cli/js/Header.jsx @@ -0,0 +1,75 @@ +import PropTypes from 'prop-types'; +import { StyleSheet, Text, View } from 'react-native'; + +import { Button } from './Button'; + +export const Header = ({ user, onLogin, onLogout, onCreateAccount }) => ( + <View> + <View style={styles.wrapper}> + <View style={styles.logoContainer}> + <Text style={styles.h1}>Acme</Text> + </View> + + <View style={styles.buttonContainer}> + {user ? ( + <Button style={styles.button} size="small" onPress={onLogout} label="Log out" /> + ) : ( + <> + <Button style={styles.button} size="small" onPress={onLogin} label="Log in" /> + + <Button + style={styles.button} + primary + size="small" + onPress={onCreateAccount} + label="Sign up" + /> + </> + )} + </View> + </View> + </View> +); + +const styles = StyleSheet.create({ + wrapper: { + borderBottomWidth: 1, + borderBottomColor: 'rgba(0, 0, 0, 0.1)', + paddingVertical: 15, + paddingHorizontal: 20, + flexDirection: 'row', + justifyContent: 'space-between', + }, + h1: { + fontWeight: '900', + fontSize: 20, + marginTop: 6, + marginBottom: 6, + marginLeft: 10, + color: 'black', + alignSelf: 'flex-start', + }, + logoContainer: { + flexDirection: 'row', + alignItems: 'center', + }, + button: { + marginLeft: 10, + }, + buttonContainer: { + flexDirection: 'row', + }, +}); + +Header.propTypes = { + user: PropTypes.shape({ + name: PropTypes.string.isRequired, + }), + onLogin: PropTypes.func.isRequired, + onLogout: PropTypes.func.isRequired, + onCreateAccount: PropTypes.func.isRequired, +}; + +Header.defaultProps = { + user: null, +}; diff --git a/code/frameworks/react-native-web-vite/template/cli/js/Header.stories.jsx b/code/frameworks/react-native-web-vite/template/cli/js/Header.stories.jsx new file mode 100644 index 00000000000..7b2ae23f1c3 --- /dev/null +++ b/code/frameworks/react-native-web-vite/template/cli/js/Header.stories.jsx @@ -0,0 +1,26 @@ +import { Header } from './Header'; + +const meta = { + component: Header, + // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs + tags: ['autodocs'], +}; + +export default meta; + +export const LoggedIn = { + args: { + user: {}, + onLogin: () => {}, + onLogout: () => {}, + onCreateAccount: () => {}, + }, +}; + +export const LoggedOut = { + args: { + onLogin: () => {}, + onLogout: () => {}, + onCreateAccount: () => {}, + }, +}; diff --git a/code/frameworks/react-native-web-vite/template/cli/js/Page.jsx b/code/frameworks/react-native-web-vite/template/cli/js/Page.jsx new file mode 100644 index 00000000000..17a93b6dce0 --- /dev/null +++ b/code/frameworks/react-native-web-vite/template/cli/js/Page.jsx @@ -0,0 +1,164 @@ +import { Linking, StyleSheet, Text, View } from 'react-native'; + +import { Header } from './Header'; + +export const Page = ({ user, onLogin, onLogout, onCreateAccount }) => ( + <View> + <Header user={user} onLogin={onLogin} onLogout={onLogout} onCreateAccount={onCreateAccount} /> + + <View style={styles.section}> + <Text role="heading" style={styles.h2}> + Pages in Storybook + </Text> + + <Text style={styles.p}> + We recommend building UIs with a{' '} + <Text + style={[styles.a, { fontWeight: 'bold' }]} + role="link" + onPress={() => { + Linking.openURL('https://componentdriven.org'); + }} + > + <Text>component-driven</Text> + </Text>{' '} + process starting with atomic components and ending with pages. + </Text> + + <Text style={styles.p}> + Render pages with mock data. This makes it easy to build and review page states without + needing to navigate to them in your app. Here are some handy patterns for managing page data + in Storybook: + </Text> + + <View> + <View> + Use a higher-level connected component. Storybook helps you compose such data from the + "args" of child component stories + </View> + + <View> + Assemble data in the page component from your services. You can mock these services out + using Storybook. + </View> + </View> + + <Text style={styles.p}> + Get a guided tutorial on component-driven development at{' '} + <Text + style={styles.a} + role="link" + onPress={() => { + Linking.openURL('https://storybook.js.org/tutorials/'); + }} + > + Storybook tutorials + </Text> + . Read more in the{' '} + <Text + style={styles.a} + role="link" + onPress={() => { + Linking.openURL('https://storybook.js.org/docs'); + }} + > + docs + </Text> + . + </Text> + + <View style={styles.tipWrapper}> + <View style={styles.tip}> + <Text style={styles.tipText}>Tip </Text> + </View> + + <Text>Adjust the width of the canvas with the </Text> + + <Text>Viewports addon in the toolbar</Text> + </View> + </View> + </View> +); + +const styles = StyleSheet.create({ + section: { + fontFamily: "'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif", + fontSize: 14, + lineHeight: 24, + paddingVertical: 48, + paddingHorizontal: 20, + marginHorizontal: 'auto', + maxWidth: 600, + color: '#333', + }, + + h2: { + fontWeight: '900', + fontSize: 32, + lineHeight: 1, + marginBottom: 4, + }, + + p: { + marginVertical: 16, + marginHorizontal: 0, + }, + + a: { + color: '#1ea7fd', + }, + + ul: { + paddingLeft: 30, + marginVertical: 16, + }, + + li: { + marginBottom: 8, + }, + + tip: { + alignSelf: 'flex-start', + borderRadius: 16, + backgroundColor: '#e7fdd8', + paddingVertical: 4, + paddingHorizontal: 12, + marginRight: 10, + marginBottom: 4, + }, + tipText: { + fontSize: 11, + lineHeight: 12, + fontWeight: '700', + color: '#66bf3c', + }, + + tipWrapper: { + fontSize: 13, + lineHeight: 20, + marginTop: 40, + marginBottom: 40, + flexDirection: 'row', + flexWrap: 'wrap', + }, + + tipWrapperSvg: { + height: 12, + width: 12, + marginRight: 4, + marginTop: 3, + }, +}); + +Page.propTypes = { + user: PropTypes.shape({ + name: PropTypes.string.isRequired, + }), + onLogin: PropTypes.func.isRequired, + onLogout: PropTypes.func.isRequired, + onCreateAccount: PropTypes.func.isRequired, +}; + +Page.defaultProps = { + user: null, +}; diff --git a/code/frameworks/react-native-web-vite/template/cli/js/Page.stories.jsx b/code/frameworks/react-native-web-vite/template/cli/js/Page.stories.jsx new file mode 100644 index 00000000000..46fff4d2f8c --- /dev/null +++ b/code/frameworks/react-native-web-vite/template/cli/js/Page.stories.jsx @@ -0,0 +1,16 @@ +import * as HeaderStories from './Header.stories'; +import { Page } from './Page'; + +const meta = { + component: Page, +}; + +export default meta; + +export const LoggedIn = { + args: HeaderStories.LoggedIn.args, +}; + +export const LoggedOut = { + args: HeaderStories.LoggedOut.args, +}; diff --git a/code/frameworks/react-native-web-vite/template/cli/ts-3-8/Button.stories.tsx b/code/frameworks/react-native-web-vite/template/cli/ts-3-8/Button.stories.tsx index 902da8bc16c..53294a3a95e 100644 --- a/code/frameworks/react-native-web-vite/template/cli/ts-3-8/Button.stories.tsx +++ b/code/frameworks/react-native-web-vite/template/cli/ts-3-8/Button.stories.tsx @@ -13,6 +13,8 @@ const meta: Meta<typeof Button> = { </View> ), ], + // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs + tags: ['autodocs'], }; export default meta; diff --git a/code/frameworks/react-native-web-vite/template/cli/ts-3-8/Button.tsx b/code/frameworks/react-native-web-vite/template/cli/ts-3-8/Button.tsx index ed17e64a3d2..3e389596d4d 100644 --- a/code/frameworks/react-native-web-vite/template/cli/ts-3-8/Button.tsx +++ b/code/frameworks/react-native-web-vite/template/cli/ts-3-8/Button.tsx @@ -12,7 +12,6 @@ export interface ButtonProps { label: string; /** Optional click handler */ onPress?: () => void; - style?: StyleProp<ViewStyle>; } /** Primary UI component for user interaction */ @@ -21,7 +20,6 @@ export const Button = ({ size = 'medium', backgroundColor, label, - style, onPress, }: ButtonProps) => { const modeStyle = primary ? styles.primary : styles.secondary; diff --git a/code/frameworks/react-native-web-vite/template/cli/ts-3-8/Header.stories.tsx b/code/frameworks/react-native-web-vite/template/cli/ts-3-8/Header.stories.tsx index 278897025b9..c7107eb5db4 100644 --- a/code/frameworks/react-native-web-vite/template/cli/ts-3-8/Header.stories.tsx +++ b/code/frameworks/react-native-web-vite/template/cli/ts-3-8/Header.stories.tsx @@ -4,6 +4,8 @@ import { Header } from './Header'; const meta: Meta<typeof Header> = { component: Header, + // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs + tags: ['autodocs'], }; export default meta; diff --git a/code/frameworks/react-native-web-vite/template/cli/ts-4-9/Button.stories.tsx b/code/frameworks/react-native-web-vite/template/cli/ts-4-9/Button.stories.tsx index d435dd60ee1..a57e9131120 100644 --- a/code/frameworks/react-native-web-vite/template/cli/ts-4-9/Button.stories.tsx +++ b/code/frameworks/react-native-web-vite/template/cli/ts-4-9/Button.stories.tsx @@ -13,6 +13,8 @@ const meta = { </View> ), ], + // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs + tags: ['autodocs'], } satisfies Meta<typeof Button>; export default meta; diff --git a/code/frameworks/react-native-web-vite/template/cli/ts-4-9/Header.stories.tsx b/code/frameworks/react-native-web-vite/template/cli/ts-4-9/Header.stories.tsx index ae1046f7928..b38ce8b96d2 100644 --- a/code/frameworks/react-native-web-vite/template/cli/ts-4-9/Header.stories.tsx +++ b/code/frameworks/react-native-web-vite/template/cli/ts-4-9/Header.stories.tsx @@ -4,6 +4,8 @@ import { Header } from './Header'; const meta = { component: Header, + // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs + tags: ['autodocs'], } satisfies Meta<typeof Header>; export default meta; From 654e0ede23881d9fd2cc5a0b8008d48f1d446741 Mon Sep 17 00:00:00 2001 From: Michael Shilman <shilman@users.noreply.github.com> Date: Sat, 16 Nov 2024 23:50:41 +0800 Subject: [PATCH 057/101] RNW-Vite: Fix framwork misinfo --- docs/get-started/frameworks/react-native-web-vite.mdx | 1 - 1 file changed, 1 deletion(-) diff --git a/docs/get-started/frameworks/react-native-web-vite.mdx b/docs/get-started/frameworks/react-native-web-vite.mdx index a663847af77..15a0149947b 100644 --- a/docs/get-started/frameworks/react-native-web-vite.mdx +++ b/docs/get-started/frameworks/react-native-web-vite.mdx @@ -8,7 +8,6 @@ sidebar: Storybook for React Native Web is a [framework](../../contribute/framework.mdx) that makes it easy to develop and test UI components in isolation for [React Native](https://reactnative.dev/) applications. It uses [Vite](https://vitejs.dev/) to build your components for web browsers. The framework includes: * ⚛️ React Native components -* 📱 Mobile emulation in the browser * 🧑‍💻 Shareable on the web * 🪄 Zero confg * 💫 and more! From 85d1d2a8264d5c40a6c021dbf6e98fca59326567 Mon Sep 17 00:00:00 2001 From: Michael Shilman <shilman@users.noreply.github.com> Date: Sun, 17 Nov 2024 13:55:12 +0800 Subject: [PATCH 058/101] CLI: Fix qwik init --- code/lib/create-storybook/src/generators/baseGenerator.ts | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/code/lib/create-storybook/src/generators/baseGenerator.ts b/code/lib/create-storybook/src/generators/baseGenerator.ts index 4ba6db064da..c402f8f8422 100644 --- a/code/lib/create-storybook/src/generators/baseGenerator.ts +++ b/code/lib/create-storybook/src/generators/baseGenerator.ts @@ -244,12 +244,7 @@ export async function baseGenerator( ...extraAddonsToInstall, ].filter(Boolean); - // TODO: migrate template stories in solid and qwik to use @storybook/test - if (['qwik'].includes(rendererId)) { - addonPackages.push('@storybook/testing-library'); - } else { - addonPackages.push('@storybook/test'); - } + addonPackages.push('@storybook/test'); if (hasInteractiveStories(rendererId)) { addons.push('@storybook/addon-interactions'); From 3efc79648793738eeb312216c7fa2409b32b45ad Mon Sep 17 00:00:00 2001 From: Michael Shilman <shilman@users.noreply.github.com> Date: Sun, 17 Nov 2024 14:51:23 +0800 Subject: [PATCH 059/101] RNW-Vite: Add note about RN CLI sandbox --- code/lib/cli-storybook/src/sandbox-templates.ts | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/code/lib/cli-storybook/src/sandbox-templates.ts b/code/lib/cli-storybook/src/sandbox-templates.ts index 515fbf4bec9..5b407ac14b7 100644 --- a/code/lib/cli-storybook/src/sandbox-templates.ts +++ b/code/lib/cli-storybook/src/sandbox-templates.ts @@ -612,10 +612,17 @@ const baseTemplates = { skipTasks: ['bench', 'vitest-integration'], }, 'react-native-web-vite/rn-cli-ts': { + // NOTE: create-expo-app installs React 18.2.0. But yarn portal + // expects 18.3.1 (dunno why). Therefore to run this in dev you + // must either: + // - edit the sandbox package.json to depend on react 18.3.1, OR + // - build/run the sandbox in --no-link mode, which is fine + // + // Users & CI won't see this limitation because they are not using + // yarn portals. name: 'React Native CLI Latest (Vite | TypeScript)', script: 'npx @react-native-community/cli@latest init --install-pods=false --directory={{beforeDir}} rnapp', - inDevelopment: false, expected: { framework: '@storybook/react-native-web-vite', renderer: '@storybook/react', From 907fe38fe3d875212100315650cef3e1f08364c7 Mon Sep 17 00:00:00 2001 From: Michael Shilman <shilman@users.noreply.github.com> Date: Sun, 17 Nov 2024 15:15:50 +0800 Subject: [PATCH 060/101] RNW-Vite: Clean up unnecessary CSS --- code/core/src/cli/helpers.ts | 16 ++++++++-------- .../src/generators/REACT_NATIVE_WEB/index.ts | 11 +++++++++-- 2 files changed, 17 insertions(+), 10 deletions(-) diff --git a/code/core/src/cli/helpers.ts b/code/core/src/cli/helpers.ts index 010622a7476..27e91f001ac 100644 --- a/code/core/src/cli/helpers.ts +++ b/code/core/src/cli/helpers.ts @@ -194,6 +194,13 @@ export async function getVersionSafe(packageManager: JsPackageManager, packageNa return undefined; } +export const cliStoriesTargetPath = async () => { + if (existsSync('./src')) { + return './src/stories'; + } + return './stories'; +}; + export async function copyTemplateFiles({ packageManager, renderer, @@ -253,14 +260,7 @@ export async function copyTemplateFiles({ throw new Error(`Unsupported renderer: ${renderer} (${baseDir})`); }; - const targetPath = async () => { - if (existsSync('./src')) { - return './src/stories'; - } - return './stories'; - }; - - const destinationPath = destination ?? (await targetPath()); + const destinationPath = destination ?? (await cliStoriesTargetPath()); if (commonAssetsDir) { await cp(commonAssetsDir, destinationPath, { recursive: true, diff --git a/code/lib/create-storybook/src/generators/REACT_NATIVE_WEB/index.ts b/code/lib/create-storybook/src/generators/REACT_NATIVE_WEB/index.ts index e102ee3f63c..f0c1a14076c 100644 --- a/code/lib/create-storybook/src/generators/REACT_NATIVE_WEB/index.ts +++ b/code/lib/create-storybook/src/generators/REACT_NATIVE_WEB/index.ts @@ -1,5 +1,7 @@ -import { detectLanguage } from 'storybook/internal/cli'; -import { SupportedLanguage } from 'storybook/internal/cli'; +import { readdir, rm } from 'node:fs/promises'; +import { join } from 'node:path'; + +import { SupportedLanguage, cliStoriesTargetPath, detectLanguage } from 'storybook/internal/cli'; import { baseGenerator } from '../baseGenerator'; import type { Generator } from '../types'; @@ -23,6 +25,11 @@ const generator: Generator = async (packageManager, npmOptions, options) => { }, 'react-native-web-vite' ); + + // Remove CSS files automatically copeied by baseGenerator + const targetPath = await cliStoriesTargetPath(); + const cssFiles = (await readdir(targetPath)).filter((f) => f.endsWith('.css')); + await Promise.all(cssFiles.map((f) => rm(join(targetPath, f)))); }; export default generator; From 4fb8b02c693f8be5b43c2f8bf67417f9fc025b47 Mon Sep 17 00:00:00 2001 From: Michael Shilman <shilman@users.noreply.github.com> Date: Sun, 17 Nov 2024 15:39:36 +0800 Subject: [PATCH 061/101] RNW-Vite: Test sandboxes --- code/lib/cli-storybook/src/sandbox-templates.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/code/lib/cli-storybook/src/sandbox-templates.ts b/code/lib/cli-storybook/src/sandbox-templates.ts index 5b407ac14b7..cd287fd0010 100644 --- a/code/lib/cli-storybook/src/sandbox-templates.ts +++ b/code/lib/cli-storybook/src/sandbox-templates.ts @@ -797,6 +797,8 @@ export const normal: TemplateKey[] = [ 'bench/react-vite-default-ts-test-build', 'bench/react-webpack-18-ts-test-build', 'ember/default-js', + 'react-native-web-vite/expo-ts', + 'react-native-web-vite/rn-cli-ts', ]; export const merged: TemplateKey[] = [ From ee7b69fead7d45de3b94245068e3c38eca4f0ef0 Mon Sep 17 00:00:00 2001 From: Michael Shilman <shilman@users.noreply.github.com> Date: Sun, 17 Nov 2024 16:15:49 +0800 Subject: [PATCH 062/101] Tweak RNW CI --- .circleci/config.yml | 10 +- code/e2e-tests/addon-actions.spec.ts | 4 + code/e2e-tests/addon-controls.spec.ts | 3 + code/e2e-tests/addon-docs.spec.ts | 1 + code/e2e-tests/addon-interactions.spec.ts | 4 + .../template/cli/js/Button.stories.jsx | 5 + .../template/cli/js/Header.jsx | 13 +- .../template/cli/js/Header.stories.jsx | 5 +- .../template/cli/js/Page.jsx | 154 +++++++++--------- .../template/cli/js/Page.stories.jsx | 19 ++- .../template/cli/ts-3-8/Button.stories.tsx | 4 + .../template/cli/ts-3-8/Header.stories.tsx | 5 +- .../template/cli/ts-3-8/Header.tsx | 12 +- .../template/cli/ts-3-8/Page.stories.tsx | 18 +- .../template/cli/ts-3-8/Page.tsx | 148 +++++++++-------- .../template/cli/ts-4-9/Button.stories.tsx | 4 + .../template/cli/ts-4-9/Header.stories.tsx | 5 +- .../template/cli/ts-4-9/Header.tsx | 12 +- .../template/cli/ts-4-9/Page.stories.tsx | 18 +- .../template/cli/ts-4-9/Page.tsx | 142 ++++++++-------- .../cli-storybook/src/sandbox-templates.ts | 8 +- 21 files changed, 344 insertions(+), 250 deletions(-) diff --git a/.circleci/config.yml b/.circleci/config.yml index 5e7b5f1f1e0..d89b0e26057 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -980,22 +980,22 @@ workflows: requires: - build - create-sandboxes: - parallelism: 37 + parallelism: 38 requires: - build # - smoke-test-sandboxes: # disabled for now # requires: # - create-sandboxes - build-sandboxes: - parallelism: 37 + parallelism: 38 requires: - create-sandboxes - chromatic-sandboxes: - parallelism: 34 + parallelism: 35 requires: - build-sandboxes - e2e-production: - parallelism: 32 + parallelism: 33 requires: - build-sandboxes - e2e-dev: @@ -1003,7 +1003,7 @@ workflows: requires: - create-sandboxes - test-runner-production: - parallelism: 32 + parallelism: 33 requires: - build-sandboxes - vitest-integration: diff --git a/code/e2e-tests/addon-actions.spec.ts b/code/e2e-tests/addon-actions.spec.ts index 861a392070b..f049cbe3060 100644 --- a/code/e2e-tests/addon-actions.spec.ts +++ b/code/e2e-tests/addon-actions.spec.ts @@ -12,6 +12,10 @@ test.describe('addon-actions', () => { templateName.includes('svelte') && templateName.includes('prerelease'), 'Svelte 5 prerelase does not support automatic actions with our current example components yet' ); + test.skip( + templateName.includes('react-native-web'), + 'React Native uses onPress rather than onClick' + ); await page.goto(storybookUrl); const sbPage = new SbPage(page, expect); sbPage.waitUntilLoaded(); diff --git a/code/e2e-tests/addon-controls.spec.ts b/code/e2e-tests/addon-controls.spec.ts index 23909fd707d..6ba84552b81 100644 --- a/code/e2e-tests/addon-controls.spec.ts +++ b/code/e2e-tests/addon-controls.spec.ts @@ -4,9 +4,12 @@ import process from 'process'; import { SbPage } from './util'; const storybookUrl = process.env.STORYBOOK_URL || 'http://localhost:8001'; +const templateName = process.env.STORYBOOK_TEMPLATE_NAME || ''; test.describe('addon-controls', () => { test('should change component when changing controls', async ({ page }) => { + test.skip(templateName.includes('react-native-web'), 'React Native CSS behaves differently'); + await page.goto(storybookUrl); const sbPage = new SbPage(page, expect); await sbPage.waitUntilLoaded(); diff --git a/code/e2e-tests/addon-docs.spec.ts b/code/e2e-tests/addon-docs.spec.ts index 99b22d1d2e8..54c046a8aec 100644 --- a/code/e2e-tests/addon-docs.spec.ts +++ b/code/e2e-tests/addon-docs.spec.ts @@ -123,6 +123,7 @@ test.describe('addon-docs', () => { // - template: https://638db567ed97c3fb3e21cc22-ulhjwkqzzj.chromatic.com/?path=/docs/addons-docs-docspage-basic--docs // - real: https://638db567ed97c3fb3e21cc22-ulhjwkqzzj.chromatic.com/?path=/docs/example-button--docs 'lit-vite', + 'react-native-web', ]; test.skip( new RegExp(`^${skipped.join('|')}`, 'i').test(`${templateName}`), diff --git a/code/e2e-tests/addon-interactions.spec.ts b/code/e2e-tests/addon-interactions.spec.ts index b5a703e2d1e..b1cb9ea9884 100644 --- a/code/e2e-tests/addon-interactions.spec.ts +++ b/code/e2e-tests/addon-interactions.spec.ts @@ -23,6 +23,10 @@ test.describe('addon-interactions', () => { /^(lit)/i.test(`${templateName}`), `Skipping ${templateName}, which does not support addon-interactions` ); + test.skip( + templateName.includes('react-native-web'), + 'React Native does not use className locators' + ); const sbPage = new SbPage(page, expect); diff --git a/code/frameworks/react-native-web-vite/template/cli/js/Button.stories.jsx b/code/frameworks/react-native-web-vite/template/cli/js/Button.stories.jsx index f25e767a888..b7136fd8ae6 100644 --- a/code/frameworks/react-native-web-vite/template/cli/js/Button.stories.jsx +++ b/code/frameworks/react-native-web-vite/template/cli/js/Button.stories.jsx @@ -1,8 +1,11 @@ +import { fn } from '@storybook/test'; + import { View } from 'react-native'; import { Button } from './Button'; const meta = { + title: 'Example/Button', component: Button, decorators: [ (Story) => ( @@ -13,6 +16,8 @@ const meta = { ], // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs tags: ['autodocs'], + // Use `fn` to spy on the onPress arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args + args: { onPress: fn() }, }; export default meta; diff --git a/code/frameworks/react-native-web-vite/template/cli/js/Header.jsx b/code/frameworks/react-native-web-vite/template/cli/js/Header.jsx index 9c5093f261a..ebc34b85ea4 100644 --- a/code/frameworks/react-native-web-vite/template/cli/js/Header.jsx +++ b/code/frameworks/react-native-web-vite/template/cli/js/Header.jsx @@ -12,11 +12,16 @@ export const Header = ({ user, onLogin, onLogout, onCreateAccount }) => ( <View style={styles.buttonContainer}> {user ? ( - <Button style={styles.button} size="small" onPress={onLogout} label="Log out" /> + <> + <> + <Text>Welcome, </Text> + <Text style={styles.userName}>{user.name}!</Text> + </> + <Button style={styles.button} size="small" onPress={onLogout} label="Log out" /> + </> ) : ( <> <Button style={styles.button} size="small" onPress={onLogin} label="Log in" /> - <Button style={styles.button} primary @@ -58,6 +63,10 @@ const styles = StyleSheet.create({ }, buttonContainer: { flexDirection: 'row', + alignItems: 'center', + }, + userName: { + fontWeight: '700', }, }); diff --git a/code/frameworks/react-native-web-vite/template/cli/js/Header.stories.jsx b/code/frameworks/react-native-web-vite/template/cli/js/Header.stories.jsx index 7b2ae23f1c3..97da8bee0de 100644 --- a/code/frameworks/react-native-web-vite/template/cli/js/Header.stories.jsx +++ b/code/frameworks/react-native-web-vite/template/cli/js/Header.stories.jsx @@ -1,6 +1,7 @@ import { Header } from './Header'; const meta = { + title: 'Example/Header', component: Header, // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs tags: ['autodocs'], @@ -10,7 +11,9 @@ export default meta; export const LoggedIn = { args: { - user: {}, + user: { + name: 'Jane Doe', + }, onLogin: () => {}, onLogout: () => {}, onCreateAccount: () => {}, diff --git a/code/frameworks/react-native-web-vite/template/cli/js/Page.jsx b/code/frameworks/react-native-web-vite/template/cli/js/Page.jsx index 17a93b6dce0..81aa45a0a7b 100644 --- a/code/frameworks/react-native-web-vite/template/cli/js/Page.jsx +++ b/code/frameworks/react-native-web-vite/template/cli/js/Page.jsx @@ -1,84 +1,95 @@ +import { useState } from 'react'; + import { Linking, StyleSheet, Text, View } from 'react-native'; import { Header } from './Header'; -export const Page = ({ user, onLogin, onLogout, onCreateAccount }) => ( - <View> - <Header user={user} onLogin={onLogin} onLogout={onLogout} onCreateAccount={onCreateAccount} /> +export const Page = () => { + const [user, setUser] = useState(); - <View style={styles.section}> - <Text role="heading" style={styles.h2}> - Pages in Storybook - </Text> + return ( + <View> + <Header + user={user} + onLogin={() => setUser({ name: 'Jane Doe' })} + onLogout={() => setUser(undefined)} + onCreateAccount={() => setUser({ name: 'Jane Doe' })} + /> - <Text style={styles.p}> - We recommend building UIs with a{' '} - <Text - style={[styles.a, { fontWeight: 'bold' }]} - role="link" - onPress={() => { - Linking.openURL('https://componentdriven.org'); - }} - > - <Text>component-driven</Text> - </Text>{' '} - process starting with atomic components and ending with pages. - </Text> + <View style={styles.section}> + <Text role="heading" style={styles.h2}> + Pages in Storybook + </Text> - <Text style={styles.p}> - Render pages with mock data. This makes it easy to build and review page states without - needing to navigate to them in your app. Here are some handy patterns for managing page data - in Storybook: - </Text> + <Text style={styles.p}> + We recommend building UIs with a{' '} + <Text + style={[styles.a, { fontWeight: 'bold' }]} + role="link" + onPress={() => { + Linking.openURL('https://componentdriven.org'); + }} + > + <Text>component-driven</Text> + </Text>{' '} + process starting with atomic components and ending with pages. + </Text> - <View> - <View> - Use a higher-level connected component. Storybook helps you compose such data from the - "args" of child component stories - </View> + <Text style={styles.p}> + Render pages with mock data. This makes it easy to build and review page states without + needing to navigate to them in your app. Here are some handy patterns for managing page + data in Storybook: + </Text> <View> - Assemble data in the page component from your services. You can mock these services out - using Storybook. - </View> - </View> + <View> + Use a higher-level connected component. Storybook helps you compose such data from the + "args" of child component stories + </View> - <Text style={styles.p}> - Get a guided tutorial on component-driven development at{' '} - <Text - style={styles.a} - role="link" - onPress={() => { - Linking.openURL('https://storybook.js.org/tutorials/'); - }} - > - Storybook tutorials - </Text> - . Read more in the{' '} - <Text - style={styles.a} - role="link" - onPress={() => { - Linking.openURL('https://storybook.js.org/docs'); - }} - > - docs - </Text> - . - </Text> - - <View style={styles.tipWrapper}> - <View style={styles.tip}> - <Text style={styles.tipText}>Tip </Text> + <View> + Assemble data in the page component from your services. You can mock these services out + using Storybook. + </View> </View> - <Text>Adjust the width of the canvas with the </Text> + <Text style={styles.p}> + Get a guided tutorial on component-driven development at{' '} + <Text + style={styles.a} + role="link" + onPress={() => { + Linking.openURL('https://storybook.js.org/tutorials/'); + }} + > + Storybook tutorials + </Text> + . Read more in the{' '} + <Text + style={styles.a} + role="link" + onPress={() => { + Linking.openURL('https://storybook.js.org/docs'); + }} + > + docs + </Text> + . + </Text> - <Text>Viewports addon in the toolbar</Text> + <View style={styles.tipWrapper}> + <View style={styles.tip}> + <Text style={styles.tipText}>Tip </Text> + </View> + + <Text>Adjust the width of the canvas with the </Text> + + <Text>Viewports addon in the toolbar</Text> + </View> </View> </View> - </View> -); + ); +}; const styles = StyleSheet.create({ section: { @@ -149,16 +160,3 @@ const styles = StyleSheet.create({ marginTop: 3, }, }); - -Page.propTypes = { - user: PropTypes.shape({ - name: PropTypes.string.isRequired, - }), - onLogin: PropTypes.func.isRequired, - onLogout: PropTypes.func.isRequired, - onCreateAccount: PropTypes.func.isRequired, -}; - -Page.defaultProps = { - user: null, -}; diff --git a/code/frameworks/react-native-web-vite/template/cli/js/Page.stories.jsx b/code/frameworks/react-native-web-vite/template/cli/js/Page.stories.jsx index 46fff4d2f8c..249647fce86 100644 --- a/code/frameworks/react-native-web-vite/template/cli/js/Page.stories.jsx +++ b/code/frameworks/react-native-web-vite/template/cli/js/Page.stories.jsx @@ -1,16 +1,25 @@ -import * as HeaderStories from './Header.stories'; +import { expect, userEvent, within } from '@storybook/test'; + import { Page } from './Page'; const meta = { + title: 'Example/Page', component: Page, }; export default meta; export const LoggedIn = { - args: HeaderStories.LoggedIn.args, + play: async ({ canvasElement }) => { + const canvas = within(canvasElement); + const loginButton = canvas.getByRole('button', { name: /Log in/i }); + await expect(loginButton).toBeInTheDocument(); + await userEvent.click(loginButton); + // FIXME: await expect(loginButton).not.toBeInTheDocument(); + + const logoutButton = canvas.getByRole('button', { name: /Log out/i }); + await expect(logoutButton).toBeInTheDocument(); + }, }; -export const LoggedOut = { - args: HeaderStories.LoggedOut.args, -}; +export const LoggedOut = {}; diff --git a/code/frameworks/react-native-web-vite/template/cli/ts-3-8/Button.stories.tsx b/code/frameworks/react-native-web-vite/template/cli/ts-3-8/Button.stories.tsx index 53294a3a95e..77d371d5118 100644 --- a/code/frameworks/react-native-web-vite/template/cli/ts-3-8/Button.stories.tsx +++ b/code/frameworks/react-native-web-vite/template/cli/ts-3-8/Button.stories.tsx @@ -1,10 +1,12 @@ import type { Meta, StoryObj } from '@storybook/react'; +import { fn } from '@storybook/test'; import { View } from 'react-native'; import { Button } from './Button'; const meta: Meta<typeof Button> = { + title: 'Example/Button', component: Button, decorators: [ (Story) => ( @@ -15,6 +17,8 @@ const meta: Meta<typeof Button> = { ], // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs tags: ['autodocs'], + // Use `fn` to spy on the onPress arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args + args: { onPress: fn() }, }; export default meta; diff --git a/code/frameworks/react-native-web-vite/template/cli/ts-3-8/Header.stories.tsx b/code/frameworks/react-native-web-vite/template/cli/ts-3-8/Header.stories.tsx index c7107eb5db4..65b1ecf9a01 100644 --- a/code/frameworks/react-native-web-vite/template/cli/ts-3-8/Header.stories.tsx +++ b/code/frameworks/react-native-web-vite/template/cli/ts-3-8/Header.stories.tsx @@ -3,6 +3,7 @@ import type { Meta, StoryObj } from '@storybook/react'; import { Header } from './Header'; const meta: Meta<typeof Header> = { + title: 'Example/Header', component: Header, // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs tags: ['autodocs'], @@ -14,7 +15,9 @@ type Story = StoryObj<typeof meta>; export const LoggedIn: Story = { args: { - user: {}, + user: { + name: 'Jane Doe', + }, onLogin: () => {}, onLogout: () => {}, onCreateAccount: () => {}, diff --git a/code/frameworks/react-native-web-vite/template/cli/ts-3-8/Header.tsx b/code/frameworks/react-native-web-vite/template/cli/ts-3-8/Header.tsx index 5a54d24b4bf..0304209832f 100644 --- a/code/frameworks/react-native-web-vite/template/cli/ts-3-8/Header.tsx +++ b/code/frameworks/react-native-web-vite/template/cli/ts-3-8/Header.tsx @@ -18,7 +18,13 @@ export const Header = ({ user, onLogin, onLogout, onCreateAccount }: HeaderProps <View style={styles.buttonContainer}> {user ? ( - <Button style={styles.button} size="small" onPress={onLogout} label="Log out" /> + <> + <> + <Text>Welcome, </Text> + <Text style={styles.userName}>{user.name}!</Text> + </> + <Button style={styles.button} size="small" onPress={onLogout} label="Log out" /> + </> ) : ( <> <Button style={styles.button} size="small" onPress={onLogin} label="Log in" /> @@ -64,5 +70,9 @@ const styles = StyleSheet.create({ }, buttonContainer: { flexDirection: 'row', + alignItems: 'center', + }, + userName: { + fontWeight: '700', }, }); diff --git a/code/frameworks/react-native-web-vite/template/cli/ts-3-8/Page.stories.tsx b/code/frameworks/react-native-web-vite/template/cli/ts-3-8/Page.stories.tsx index 8ca8726918f..96468b31d19 100644 --- a/code/frameworks/react-native-web-vite/template/cli/ts-3-8/Page.stories.tsx +++ b/code/frameworks/react-native-web-vite/template/cli/ts-3-8/Page.stories.tsx @@ -1,9 +1,10 @@ import type { Meta, StoryObj } from '@storybook/react'; +import { expect, userEvent, within } from '@storybook/test'; -import * as HeaderStories from './Header.stories'; import { Page } from './Page'; const meta: Meta<typeof Page> = { + title: 'Example/Page', component: Page, }; @@ -12,9 +13,16 @@ export default meta; type Story = StoryObj<typeof meta>; export const LoggedIn: Story = { - args: HeaderStories.LoggedIn.args, + play: async ({ canvasElement }) => { + const canvas = within(canvasElement); + const loginButton = canvas.getByRole('button', { name: /Log in/i }); + await expect(loginButton).toBeInTheDocument(); + await userEvent.click(loginButton); + // FIXME: await expect(loginButton).not.toBeInTheDocument(); + + const logoutButton = canvas.getByRole('button', { name: /Log out/i }); + await expect(logoutButton).toBeInTheDocument(); + }, }; -export const LoggedOut: Story = { - args: HeaderStories.LoggedOut.args, -}; +export const LoggedOut: Story = {}; diff --git a/code/frameworks/react-native-web-vite/template/cli/ts-3-8/Page.tsx b/code/frameworks/react-native-web-vite/template/cli/ts-3-8/Page.tsx index 8431cb5a7fa..81aa45a0a7b 100644 --- a/code/frameworks/react-native-web-vite/template/cli/ts-3-8/Page.tsx +++ b/code/frameworks/react-native-web-vite/template/cli/ts-3-8/Page.tsx @@ -1,91 +1,95 @@ +import { useState } from 'react'; + import { Linking, StyleSheet, Text, View } from 'react-native'; import { Header } from './Header'; -export type PageProps = { - user?: {}; - onLogin: () => void; - onLogout: () => void; - onCreateAccount: () => void; -}; +export const Page = () => { + const [user, setUser] = useState(); -export const Page = ({ user, onLogin, onLogout, onCreateAccount }: PageProps) => ( - <View> - <Header user={user} onLogin={onLogin} onLogout={onLogout} onCreateAccount={onCreateAccount} /> + return ( + <View> + <Header + user={user} + onLogin={() => setUser({ name: 'Jane Doe' })} + onLogout={() => setUser(undefined)} + onCreateAccount={() => setUser({ name: 'Jane Doe' })} + /> - <View style={styles.section}> - <Text role="heading" style={styles.h2}> - Pages in Storybook - </Text> + <View style={styles.section}> + <Text role="heading" style={styles.h2}> + Pages in Storybook + </Text> - <Text style={styles.p}> - We recommend building UIs with a{' '} - <Text - style={[styles.a, { fontWeight: 'bold' }]} - role="link" - onPress={() => { - Linking.openURL('https://componentdriven.org'); - }} - > - <Text>component-driven</Text> - </Text>{' '} - process starting with atomic components and ending with pages. - </Text> + <Text style={styles.p}> + We recommend building UIs with a{' '} + <Text + style={[styles.a, { fontWeight: 'bold' }]} + role="link" + onPress={() => { + Linking.openURL('https://componentdriven.org'); + }} + > + <Text>component-driven</Text> + </Text>{' '} + process starting with atomic components and ending with pages. + </Text> - <Text style={styles.p}> - Render pages with mock data. This makes it easy to build and review page states without - needing to navigate to them in your app. Here are some handy patterns for managing page data - in Storybook: - </Text> - - <View> - <View> - Use a higher-level connected component. Storybook helps you compose such data from the - "args" of child component stories - </View> + <Text style={styles.p}> + Render pages with mock data. This makes it easy to build and review page states without + needing to navigate to them in your app. Here are some handy patterns for managing page + data in Storybook: + </Text> <View> - Assemble data in the page component from your services. You can mock these services out - using Storybook. - </View> - </View> + <View> + Use a higher-level connected component. Storybook helps you compose such data from the + "args" of child component stories + </View> - <Text style={styles.p}> - Get a guided tutorial on component-driven development at{' '} - <Text - style={styles.a} - role="link" - onPress={() => { - Linking.openURL('https://storybook.js.org/tutorials/'); - }} - > - Storybook tutorials - </Text> - . Read more in the{' '} - <Text - style={styles.a} - role="link" - onPress={() => { - Linking.openURL('https://storybook.js.org/docs'); - }} - > - docs - </Text> - . - </Text> - - <View style={styles.tipWrapper}> - <View style={styles.tip}> - <Text style={styles.tipText}>Tip </Text> + <View> + Assemble data in the page component from your services. You can mock these services out + using Storybook. + </View> </View> - <Text>Adjust the width of the canvas with the </Text> + <Text style={styles.p}> + Get a guided tutorial on component-driven development at{' '} + <Text + style={styles.a} + role="link" + onPress={() => { + Linking.openURL('https://storybook.js.org/tutorials/'); + }} + > + Storybook tutorials + </Text> + . Read more in the{' '} + <Text + style={styles.a} + role="link" + onPress={() => { + Linking.openURL('https://storybook.js.org/docs'); + }} + > + docs + </Text> + . + </Text> - <Text>Viewports addon in the toolbar</Text> + <View style={styles.tipWrapper}> + <View style={styles.tip}> + <Text style={styles.tipText}>Tip </Text> + </View> + + <Text>Adjust the width of the canvas with the </Text> + + <Text>Viewports addon in the toolbar</Text> + </View> </View> </View> - </View> -); + ); +}; const styles = StyleSheet.create({ section: { diff --git a/code/frameworks/react-native-web-vite/template/cli/ts-4-9/Button.stories.tsx b/code/frameworks/react-native-web-vite/template/cli/ts-4-9/Button.stories.tsx index a57e9131120..8e655fbfe26 100644 --- a/code/frameworks/react-native-web-vite/template/cli/ts-4-9/Button.stories.tsx +++ b/code/frameworks/react-native-web-vite/template/cli/ts-4-9/Button.stories.tsx @@ -1,10 +1,12 @@ import type { Meta, StoryObj } from '@storybook/react'; +import { fn } from '@storybook/test'; import { View } from 'react-native'; import { Button } from './Button'; const meta = { + title: 'Example/Button', component: Button, decorators: [ (Story) => ( @@ -15,6 +17,8 @@ const meta = { ], // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs tags: ['autodocs'], + // Use `fn` to spy on the onPress arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args + args: { onPress: fn() }, } satisfies Meta<typeof Button>; export default meta; diff --git a/code/frameworks/react-native-web-vite/template/cli/ts-4-9/Header.stories.tsx b/code/frameworks/react-native-web-vite/template/cli/ts-4-9/Header.stories.tsx index b38ce8b96d2..029f040b039 100644 --- a/code/frameworks/react-native-web-vite/template/cli/ts-4-9/Header.stories.tsx +++ b/code/frameworks/react-native-web-vite/template/cli/ts-4-9/Header.stories.tsx @@ -3,6 +3,7 @@ import type { Meta, StoryObj } from '@storybook/react'; import { Header } from './Header'; const meta = { + title: 'Example/Header', component: Header, // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs tags: ['autodocs'], @@ -14,7 +15,9 @@ type Story = StoryObj<typeof meta>; export const LoggedIn: Story = { args: { - user: {}, + user: { + name: 'Jane Doe', + }, onLogin: () => {}, onLogout: () => {}, onCreateAccount: () => {}, diff --git a/code/frameworks/react-native-web-vite/template/cli/ts-4-9/Header.tsx b/code/frameworks/react-native-web-vite/template/cli/ts-4-9/Header.tsx index 36f641edf28..4f8fcf7b8c4 100644 --- a/code/frameworks/react-native-web-vite/template/cli/ts-4-9/Header.tsx +++ b/code/frameworks/react-native-web-vite/template/cli/ts-4-9/Header.tsx @@ -17,7 +17,13 @@ export const Header = ({ user, onLogin, onLogout, onCreateAccount }: HeaderProps </View> <View style={styles.buttonContainer}> {user ? ( - <Button style={styles.button} size="small" onPress={onLogout} label="Log out" /> + <> + <> + <Text>Welcome, </Text> + <Text style={styles.userName}>{user.name}!</Text> + </> + <Button style={styles.button} size="small" onPress={onLogout} label="Log out" /> + </> ) : ( <> <Button style={styles.button} size="small" onPress={onLogin} label="Log in" /> @@ -62,5 +68,9 @@ const styles = StyleSheet.create({ }, buttonContainer: { flexDirection: 'row', + alignItems: 'center', + }, + userName: { + fontWeight: '700', }, }); diff --git a/code/frameworks/react-native-web-vite/template/cli/ts-4-9/Page.stories.tsx b/code/frameworks/react-native-web-vite/template/cli/ts-4-9/Page.stories.tsx index 6b3ef87c672..5a5db7ff268 100644 --- a/code/frameworks/react-native-web-vite/template/cli/ts-4-9/Page.stories.tsx +++ b/code/frameworks/react-native-web-vite/template/cli/ts-4-9/Page.stories.tsx @@ -1,16 +1,24 @@ import type { Meta } from '@storybook/react'; +import { expect, userEvent, within } from '@storybook/test'; -import * as HeaderStories from './Header.stories'; import { Page } from './Page'; export default { + title: 'Example/Page', component: Page, } as Meta<typeof Page>; export const LoggedIn = { - args: HeaderStories.LoggedIn.args, + play: async ({ canvasElement }) => { + const canvas = within(canvasElement); + const loginButton = canvas.getByRole('button', { name: /Log in/i }); + await expect(loginButton).toBeInTheDocument(); + await userEvent.click(loginButton); + // FIXME: await expect(loginButton).not.toBeInTheDocument(); + + const logoutButton = canvas.getByRole('button', { name: /Log out/i }); + await expect(logoutButton).toBeInTheDocument(); + }, }; -export const LoggedOut = { - args: HeaderStories.LoggedOut.args, -}; +export const LoggedOut = {}; diff --git a/code/frameworks/react-native-web-vite/template/cli/ts-4-9/Page.tsx b/code/frameworks/react-native-web-vite/template/cli/ts-4-9/Page.tsx index dac6794e2b8..44ca0103eca 100644 --- a/code/frameworks/react-native-web-vite/template/cli/ts-4-9/Page.tsx +++ b/code/frameworks/react-native-web-vite/template/cli/ts-4-9/Page.tsx @@ -1,83 +1,87 @@ +import { useState } from 'react'; + import { Linking, StyleSheet, Text, View } from 'react-native'; import { Header } from './Header'; -export type PageProps = { - user?: {}; - onLogin: () => void; - onLogout: () => void; - onCreateAccount: () => void; -}; +export const Page = () => { + const [user, setUser] = useState(); -export const Page = ({ user, onLogin, onLogout, onCreateAccount }: PageProps) => ( - <View> - <Header user={user} onLogin={onLogin} onLogout={onLogout} onCreateAccount={onCreateAccount} /> + return ( + <View> + <Header + user={user} + onLogin={() => setUser({ name: 'Jane Doe' })} + onLogout={() => setUser(undefined)} + onCreateAccount={() => setUser({ name: 'Jane Doe' })} + /> - <View style={styles.section}> - <Text role="heading" style={styles.h2}> - Pages in Storybook - </Text> - <Text style={styles.p}> - We recommend building UIs with a{' '} - <Text - style={[styles.a, { fontWeight: 'bold' }]} - role="link" - onPress={() => { - Linking.openURL('https://componentdriven.org'); - }} - > - <Text>component-driven</Text> - </Text>{' '} - process starting with atomic components and ending with pages. - </Text> - <Text style={styles.p}> - Render pages with mock data. This makes it easy to build and review page states without - needing to navigate to them in your app. Here are some handy patterns for managing page data - in Storybook: - </Text> - <View> - <View> - Use a higher-level connected component. Storybook helps you compose such data from the - "args" of child component stories - </View> - <View> - Assemble data in the page component from your services. You can mock these services out - using Storybook. - </View> - </View> - <Text style={styles.p}> - Get a guided tutorial on component-driven development at{' '} - <Text - style={styles.a} - role="link" - onPress={() => { - Linking.openURL('https://storybook.js.org/tutorials/'); - }} - > - Storybook tutorials + <View style={styles.section}> + <Text role="heading" style={styles.h2}> + Pages in Storybook </Text> - . Read more in the{' '} - <Text - style={styles.a} - role="link" - onPress={() => { - Linking.openURL('https://storybook.js.org/docs'); - }} - > - docs + <Text style={styles.p}> + We recommend building UIs with a{' '} + <Text + style={[styles.a, { fontWeight: 'bold' }]} + role="link" + onPress={() => { + Linking.openURL('https://componentdriven.org'); + }} + > + <Text>component-driven</Text> + </Text>{' '} + process starting with atomic components and ending with pages. </Text> - . - </Text> - <View style={styles.tipWrapper}> - <View style={styles.tip}> - <Text style={styles.tipText}>Tip </Text> + <Text style={styles.p}> + Render pages with mock data. This makes it easy to build and review page states without + needing to navigate to them in your app. Here are some handy patterns for managing page + data in Storybook: + </Text> + <View> + <View> + Use a higher-level connected component. Storybook helps you compose such data from the + "args" of child component stories + </View> + <View> + Assemble data in the page component from your services. You can mock these services out + using Storybook. + </View> + </View> + <Text style={styles.p}> + Get a guided tutorial on component-driven development at{' '} + <Text + style={styles.a} + role="link" + onPress={() => { + Linking.openURL('https://storybook.js.org/tutorials/'); + }} + > + Storybook tutorials + </Text> + . Read more in the{' '} + <Text + style={styles.a} + role="link" + onPress={() => { + Linking.openURL('https://storybook.js.org/docs'); + }} + > + docs + </Text> + . + </Text> + <View style={styles.tipWrapper}> + <View style={styles.tip}> + <Text style={styles.tipText}>Tip </Text> + </View> + <Text>Adjust the width of the canvas with the </Text> + <Text>Viewports addon in the toolbar</Text> </View> - <Text>Adjust the width of the canvas with the </Text> - <Text>Viewports addon in the toolbar</Text> </View> </View> - </View> -); + ); +}; const styles = StyleSheet.create({ section: { diff --git a/code/lib/cli-storybook/src/sandbox-templates.ts b/code/lib/cli-storybook/src/sandbox-templates.ts index cd287fd0010..d9d304b517a 100644 --- a/code/lib/cli-storybook/src/sandbox-templates.ts +++ b/code/lib/cli-storybook/src/sandbox-templates.ts @@ -609,7 +609,7 @@ const baseTemplates = { renderer: '@storybook/react', builder: '@storybook/builder-vite', }, - skipTasks: ['bench', 'vitest-integration'], + skipTasks: ['e2e-tests-dev', 'bench', 'vitest-integration'], }, 'react-native-web-vite/rn-cli-ts': { // NOTE: create-expo-app installs React 18.2.0. But yarn portal @@ -628,7 +628,7 @@ const baseTemplates = { renderer: '@storybook/react', builder: '@storybook/builder-vite', }, - skipTasks: ['bench', 'vitest-integration'], + skipTasks: ['e2e-tests-dev', 'bench', 'vitest-integration'], }, } satisfies Record<string, BaseTemplates>; @@ -797,8 +797,6 @@ export const normal: TemplateKey[] = [ 'bench/react-vite-default-ts-test-build', 'bench/react-webpack-18-ts-test-build', 'ember/default-js', - 'react-native-web-vite/expo-ts', - 'react-native-web-vite/rn-cli-ts', ]; export const merged: TemplateKey[] = [ @@ -831,6 +829,8 @@ export const daily: TemplateKey[] = [ 'html-vite/default-js', 'internal/react16-webpack', 'internal/react18-webpack-babel', + 'react-native-web-vite/expo-ts', + // 'react-native-web-vite/rn-cli-ts', ]; export const templatesByCadence = { normal, merged, daily }; From e85c72384eac8527cc5a0fdef1ba378bb8dd2abc Mon Sep 17 00:00:00 2001 From: Michael Shilman <shilman@users.noreply.github.com> Date: Sun, 17 Nov 2024 23:49:29 +0800 Subject: [PATCH 063/101] Update README.md --- code/frameworks/react-native-web-vite/README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/code/frameworks/react-native-web-vite/README.md b/code/frameworks/react-native-web-vite/README.md index c6b6e6abf0a..5bdae8f819c 100644 --- a/code/frameworks/react-native-web-vite/README.md +++ b/code/frameworks/react-native-web-vite/README.md @@ -1,3 +1,3 @@ -# Storybook for React & Vite +# Storybook for React Native Web & Vite -See [documentation](https://storybook.js.org/docs/get-started/frameworks/react-vite?renderer=react) for installation instructions, usage examples, APIs, and more. +See [documentation](https://storybook.js.org/docs/get-started/frameworks/react-native-web-vite?renderer=react-native-web) for installation instructions, usage examples, APIs, and more. From fb477fd8f56a2a3b9cab60da632ac6818017f67b Mon Sep 17 00:00:00 2001 From: jonniebigodes <joaocontadesenvolvimento@gmail.com> Date: Sun, 17 Nov 2024 20:11:13 +0000 Subject: [PATCH 064/101] Documentation polish --- .../react-native-web-vite-add-framework.md | 14 ++- .../frameworks/react-native-web-vite.mdx | 95 ++++++++++--------- 2 files changed, 54 insertions(+), 55 deletions(-) diff --git a/docs/_snippets/react-native-web-vite-add-framework.md b/docs/_snippets/react-native-web-vite-add-framework.md index da512fc9a27..afe03d4844a 100644 --- a/docs/_snippets/react-native-web-vite-add-framework.md +++ b/docs/_snippets/react-native-web-vite-add-framework.md @@ -1,11 +1,10 @@ ```js filename=".storybook/main.js" renderer="react-native-web" language="js" export default { addons: [ - // '@storybook/addon-react-native-web', 👈 Remove this + '@storybook/addon-react-native-web', // 👈 Remove the addon ], - // ... - // framework: '@storybook/react-webpack5', 👈 Remove this - framework: '@storybook/react-native-web-vite', // 👈 Add this + // Replace @storybook/react-webpack5 with the Vite framework + framework: '@storybook/react-native-web-vite', }; ``` @@ -14,11 +13,10 @@ import { StorybookConfig } from '@storybook/react-native-web-vite'; const config: StorybookConfig = { addons: [ - // '@storybook/addon-react-native-web', 👈 Remove this + '@storybook/addon-react-native-web', // 👈 Remove the addon ], - // ... - // framework: '@storybook/react-webpack5', 👈 Remove this - framework: '@storybook/react-native-web-vite', // 👈 Add this + // Replace @storybook/react-webpack5 with the Vite framework + framework: '@storybook/react-native-web-vite', }; export default config; diff --git a/docs/get-started/frameworks/react-native-web-vite.mdx b/docs/get-started/frameworks/react-native-web-vite.mdx index 15a0149947b..19324dda5c4 100644 --- a/docs/get-started/frameworks/react-native-web-vite.mdx +++ b/docs/get-started/frameworks/react-native-web-vite.mdx @@ -9,10 +9,10 @@ Storybook for React Native Web is a [framework](../../contribute/framework.mdx) * ⚛️ React Native components * 🧑‍💻 Shareable on the web -* 🪄 Zero confg +* 🪄 Zero config * 💫 and more! -<If notRenderer={'react-native-web'}> +<If notRenderer="react-native-web"> <Callout variant="info"> Storybook for React Native Web is only supported in [React Native](?renderer=react-native-web) projects. </Callout> @@ -20,9 +20,9 @@ Storybook for React Native Web is a [framework](../../contribute/framework.mdx) {/* End non-supported renderers */} </If> -<If renderer={'react-native-web'}> +<If renderer="react-native-web"> <Callout variant="info"> - In addition to React Native Web, Storybook also supports on-device [React Native](https://github.com/storybookjs/react-native) development. If you're not sure what's right for you, read our [comparison](#react-native-vs-react-native-web). + In addition to React Native Web, Storybook supports on-device [React Native](https://github.com/storybookjs/react-native) development. If you're unsure what's right for you, read our [comparison](#react-native-vs-react-native-web). </Callout> ## Requirements @@ -35,7 +35,7 @@ Storybook for React Native Web is a [framework](../../contribute/framework.mdx) ### In a project without Storybook - Follow the prompts after running this command in your React project's root directory: + Follow the prompts after running this command in your React Native project's root directory: {/* prettier-ignore-start */} @@ -47,19 +47,21 @@ Storybook for React Native Web is a [framework](../../contribute/framework.mdx) ### In a project with Storybook `addon-react-native-web` - The [React Native Web addon](https://github.com/storybookjs/addon-react-native-web), `@storybook/addon-react-native-web` was Webpack-based precursor the React Native Web Vite framework `@storybook/react-native-web-vite`. + The [React Native Web addon](https://github.com/storybookjs/addon-react-native-web) was a Webpack-based precursor to the React Native Web Vite framework (i.e., `@storybook/react-native-web-vite`). If you're using the addon, you should migrate to the framework, which is faster, more stable, maintained, and better documented. To do so, follow the steps below. - If you're using the addon, you should migrate to the framework, which is faster, more stable, maintained, and better documented. You can migrate to the framework by following the steps below. + Run the following command to upgrade Storybook to the latest version: - This framework is designed to work with Storybook 8.5+. If you’re not already using 8.5, upgrade with this command: - {/* prettier-ignore-start */} <CodeSnippets path="storybook-upgrade.md" /> {/* prettier-ignore-end */} - Then, install the framework and its peer dependencies: + <Callout variant="info"> + This framework is designed to work with Storybook 8.5 and above for the best experience. We won't be able to provide support if you're using an older Storybook version. + </Callout> + + Install the framework and its peer dependencies: {/* prettier-ignore-start */} @@ -67,38 +69,64 @@ Storybook for React Native Web is a [framework](../../contribute/framework.mdx) {/* prettier-ignore-end */} - Then, update your `.storybook/main.js|ts` to change the framework property and remove the `@storybook/addon-react-native-web` addon: + Update your `.storybook/main.js|ts` to change the framework property and remove the `@storybook/addon-react-native-web` addon: {/* prettier-ignore-start */} - <CodeSnippets path="react-vite-add-framework.md" /> + <CodeSnippets path="react-native-web-vite-add-framework.md" /> {/* prettier-ignore-end */} - Finally, you can manually remove `@storybook/react-webpack5` and `@storybook/addon-react-native-web` as project dependencies in `package.json`. + Finally, remove the addon and similar packages (i.e., `@storybook/react-webpack5` and `@storybook/addon-react-native-web`) from your project. ### In a project with Storybook `react-native` - [Storybook for React Native](https://github.com/storybookjs/react-native) is a framework that runs in a simulator or on your mobile device. - - It's possible to run React Native Web alongside React Native, but we are still working on a seamless integration. In the mantime, we recommend running one or the other. If you're not sure what's right for you, read our [comparison](#react-native-vs-react-native-web). + [Storybook for React Native](https://github.com/storybookjs/react-native) is a framework that runs in a simulator or on your mobile device. It's possible to run React Native Web alongside React Native, but we are still working on a seamless integration. In the meantime, we recommend running one or the other. If you need help figuring out what's right for you, read our [comparison](#react-native-vs-react-native-web). ## Run the Setup Wizard - If all goes well, you should see a setup wizard that will help you get started with Storybook introducing you to the main concepts and features, including how the UI is organized, how to write your first story, and how to test your components' response to various inputs utilizing [controls](../../essentials/controls.mdx). + If all goes well, you should see a setup wizard that will help you get started with Storybook. The wizard will introduce you to the main concepts and features, including how the UI is organized, how to write your first story, and how to test your components' response to various inputs utilizing [controls](../../essentials/controls.mdx). ![Storybook onboarding](../../_assets/get-started/example-onboarding-wizard.png) If you skipped the wizard, you can always run it again by adding the `?path=/onboarding` query parameter to the URL of your Storybook instance, provided that the example stories are still available. + ## React Native vs React Native Web + + If you’re building React Native (RN) components, Storybook has two options: Native and Web. + + Both options provide a catalog of your stories that hot refreshes as you edit the code in your favorite editor. However, their implementations are quite different: + + - **Native** - Runs inside your React Native application. It’s high-fidelity but has a limited feature set. + - **Web** - Displays your React Native components in the browser. It’s based on Storybook for Web, which is feature-rich and mature. + + {/* TODO: Don't forget about this image, otherwise remove it */} + + {/* [Image: native + web] */} + + So, which option is right for you? + + **Native.** You should choose this option if you want: + + - **Native features** - Your components rely on device-specific features like native modules. It runs in your actual application, in-simulator, or on-device and provides full fidelity. The web version uses `react-native-web`, which works for most components but has [limitations](https://necolas.github.io/react-native-web/docs/react-native-compatibility/). + - **Mobile publication** - You want to share your Storybook on-device as part of a test build or embedded inside your application. + + **Web.** You should choose this option if you want: + + - [**Sharing**](../../sharing/publish-storybook.mdx) - Publish to the web and share with your team or publicly. + - [**Documentation**](../../writing-docs/index.mdx) - Auto-generated component docs or rich markdown docs in MDX. + - [**Testing**](../../writing-tests/index.mdx) - Component, visual, and a11y tests for your components. + - [**Addons**](https://storybook.js.org/addons) - 500+ addons that improve development, documentation, testing, and integration with other tools. + + **Both.** It’s also possible to use both options together. However, this increases Storybook’s install footprint and requires more work to configure. Therefore, we recommend choosing one option to start and extending it once you have something working. + ## API ### Options You can pass an options object for additional configuration if needed: - ```ts - // .storybook/main.ts + ```ts title=".storybook/main.ts" import type { StorybookConfig } from '@storybook/react-native-web-vite'; const config: StorybookConfig = { @@ -119,34 +147,7 @@ Storybook for React Native Web is a [framework](../../contribute/framework.mdx) Configure options for the [framework's builder](../../api/main-config/main-config-framework.mdx#optionsbuilder). For this framework, available options can be found in the [Vite builder docs](../../builders/vite.mdx). - ## React Native vs React Native Web - - If you’re building React Native (RN) components, Storybook has two options: Native and Web. - - Both options provide a catalog of your stories that hot refreshes as you edit the code in your favorite editor. - - [Image: native + web] - - However, their implementations are quite different: - - - **Native** runs inside your RN app. It’s high fidelity but has a limited feature set. - - **Web** displays your RN components in the browser. It’s based on Storybook for Web, which is feature rich and mature. - - So, which option is right for you? - - **Native.** You should choose Native if you want: - - - **Native features.** Your components rely on device-specific features like native modules. Native runs in your actual app, in-simulator or on-device, and provides full fidelity. Web uses `react-native-web`, which works for most components but has [limitations](https://necolas.github.io/react-native-web/docs/react-native-compatibility/). - - **Mobile publication.** You want to share your Storybook on-device as part of a test build, or embedded inside your application. - - **Web.** You should choose Web if you want: - - - [**Sharing](https://storybook.js.org/docs/sharing).** Publish to the web and share with your team or publicly. - - [**Documentation](https://storybook.js.org/docs/writing-docs). A**uto-generated component docs or rich markdown docs in MDX. - - [**Testing**](https://storybook.js.org/docs/writing-tests). Component, visual, and a11y tests for your components. - - [**Addons**](https://storybook.js.org/docs/essentials). 500+ addons that improve development, documentation, testing, and integration with other tools. - - **Both.** It’s also possible to use both options together. However, this increases Storybook’s install footprint and requires more work to configure. Therefore, we recommend choosing one option to start and then extending it once you have something working. + {/* End supported renderers */} </If> From b07a464a8dc3d0672adbefc886caae2aac8c6b92 Mon Sep 17 00:00:00 2001 From: Michael Shilman <shilman@users.noreply.github.com> Date: Mon, 18 Nov 2024 17:42:44 +0800 Subject: [PATCH 065/101] RNW-Vite: Clean up types/dependencies --- .../react-native-web-vite/package.json | 10 +-- .../react-native-web-vite/src/types.ts | 62 +++---------------- code/yarn.lock | 6 -- 3 files changed, 11 insertions(+), 67 deletions(-) diff --git a/code/frameworks/react-native-web-vite/package.json b/code/frameworks/react-native-web-vite/package.json index 55d531370c9..8fb49dd2eb6 100644 --- a/code/frameworks/react-native-web-vite/package.json +++ b/code/frameworks/react-native-web-vite/package.json @@ -49,16 +49,10 @@ }, "dependencies": { "@joshwooding/vite-plugin-react-docgen-typescript": "0.3.0", - "@rollup/pluginutils": "^5.0.2", "@storybook/builder-vite": "workspace:*", "@storybook/react": "workspace:*", "@storybook/react-vite": "workspace:*", - "@vitejs/plugin-react": "^4.3.2", - "find-up": "^5.0.0", - "magic-string": "^0.30.0", - "react-docgen": "^7.0.0", - "resolve": "^1.22.8", - "tsconfig-paths": "^4.2.0" + "@vitejs/plugin-react": "^4.3.2" }, "devDependencies": { "@types/node": "^22.0.0", @@ -70,7 +64,7 @@ "react-native": ">=0.74.5", "react-native-web": "^0.19.12", "storybook": "workspace:^", - "vite": "^4.0.0 || ^5.0.0" + "vite": "^5.0.0" }, "engines": { "node": ">=18.0.0" diff --git a/code/frameworks/react-native-web-vite/src/types.ts b/code/frameworks/react-native-web-vite/src/types.ts index c0831eb0648..c82c79771a1 100644 --- a/code/frameworks/react-native-web-vite/src/types.ts +++ b/code/frameworks/react-native-web-vite/src/types.ts @@ -1,68 +1,24 @@ +import type { CompatibleString } from 'storybook/internal/types'; + import type { - CompatibleString, + FrameworkOptions as FrameworkOptionsBase, StorybookConfig as StorybookConfigBase, - TypescriptOptions as TypescriptOptionsBase, -} from 'storybook/internal/types'; +} from '@storybook/react-vite'; -import type { BuilderOptions, StorybookConfigVite } from '@storybook/builder-vite'; - -import type docgenTypescript from '@joshwooding/vite-plugin-react-docgen-typescript'; import type { BabelOptions, Options as ReactOptions } from '@vitejs/plugin-react'; -type FrameworkName = CompatibleString<'@storybook/react-native-web-vite'>; -type BuilderName = CompatibleString<'@storybook/builder-vite'>; - -export type FrameworkOptions = { - builder?: BuilderOptions; - strictMode?: boolean; - /** - * Use React's legacy root API to mount components - * - * React has introduced a new root API with React 18.x to enable a whole set of new features (e.g. - * concurrent features) If this flag is true, the legacy Root API is used to mount components to - * make it easier to migrate step by step to React 18. - * - * @default false - */ - legacyRootApi?: boolean; - +export type FrameworkOptions = FrameworkOptionsBase & { pluginReactOptions?: Omit<ReactOptions, 'babel'> & { babel?: BabelOptions }; }; -type StorybookConfigFramework = { +type FrameworkName = CompatibleString<'@storybook/react-native-web-vite'>; + +/** The interface for Storybook configuration in `main.ts` files. */ +export type StorybookConfig = Omit<StorybookConfigBase, 'framework'> & { framework: | FrameworkName | { name: FrameworkName; options: FrameworkOptions; }; - core?: StorybookConfigBase['core'] & { - builder?: - | BuilderName - | { - name: BuilderName; - options: BuilderOptions; - }; - }; }; - -type TypescriptOptions = TypescriptOptionsBase & { - /** - * Sets the type of Docgen when working with React and TypeScript - * - * @default `'react-docgen'` - */ - reactDocgen: 'react-docgen-typescript' | 'react-docgen' | false; - /** Configures `@joshwooding/vite-plugin-react-docgen-typescript` */ - reactDocgenTypescriptOptions: Parameters<typeof docgenTypescript>[0]; -}; - -/** The interface for Storybook configuration in `main.ts` files. */ -export type StorybookConfig = Omit< - StorybookConfigBase, - keyof StorybookConfigVite | keyof StorybookConfigFramework | 'typescript' -> & - StorybookConfigVite & - StorybookConfigFramework & { - typescript?: Partial<TypescriptOptions>; - }; diff --git a/code/yarn.lock b/code/yarn.lock index a0e3b47b42e..c3f676b05aa 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -7176,17 +7176,11 @@ __metadata: resolution: "@storybook/react-native-web-vite@workspace:frameworks/react-native-web-vite" dependencies: "@joshwooding/vite-plugin-react-docgen-typescript": "npm:0.3.0" - "@rollup/pluginutils": "npm:^5.0.2" "@storybook/builder-vite": "workspace:*" "@storybook/react": "workspace:*" "@storybook/react-vite": "workspace:*" "@types/node": "npm:^22.0.0" "@vitejs/plugin-react": "npm:^4.3.2" - find-up: "npm:^5.0.0" - magic-string: "npm:^0.30.0" - react-docgen: "npm:^7.0.0" - resolve: "npm:^1.22.8" - tsconfig-paths: "npm:^4.2.0" typescript: "npm:^5.3.2" peerDependencies: react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta From 38c6859c3c91a3bd481349efcee30e2bd5f99ee3 Mon Sep 17 00:00:00 2001 From: Michael Shilman <shilman@users.noreply.github.com> Date: Mon, 18 Nov 2024 18:18:07 +0800 Subject: [PATCH 066/101] Update yarn.lock --- code/yarn.lock | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/yarn.lock b/code/yarn.lock index c3f676b05aa..ecaf4c1cb52 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -7188,7 +7188,7 @@ __metadata: react-native: ">=0.74.5" react-native-web: ^0.19.12 storybook: "workspace:^" - vite: ^4.0.0 || ^5.0.0 + vite: ^5.0.0 languageName: unknown linkType: soft From 5811cdba48cf924b188b43b4d8bcf23aed32479f Mon Sep 17 00:00:00 2001 From: Jeppe Reinhold <jeppe@reinhold.is> Date: Mon, 18 Nov 2024 11:25:06 +0100 Subject: [PATCH 067/101] fix duplicate keys in stories --- .../ArgsTable/ArgsTable.stories.tsx | 26 +++++++++++-------- .../blocks/src/examples/Button.stories.tsx | 1 + 2 files changed, 16 insertions(+), 11 deletions(-) diff --git a/code/lib/blocks/src/components/ArgsTable/ArgsTable.stories.tsx b/code/lib/blocks/src/components/ArgsTable/ArgsTable.stories.tsx index ab867ff74b5..8d44e5f7cb4 100644 --- a/code/lib/blocks/src/components/ArgsTable/ArgsTable.stories.tsx +++ b/code/lib/blocks/src/components/ArgsTable/ArgsTable.stories.tsx @@ -90,10 +90,14 @@ export const SectionsAndSubsections = { export const SubsectionsOnly = { args: { rows: { - a: { ...stringType, table: { ...stringType.table, ...componentSubsection } }, + a: { ...stringType, key: 'stringA', table: { ...stringType.table, ...componentSubsection } }, b: { ...numberType, table: { ...stringType.table, ...componentSubsection } }, - c: { ...stringType, table: { ...stringType.table, ...componentSubsection } }, - d: { ...stringType, table: { ...stringType.table, ...htmlElementSubsection } }, + c: { ...stringType, key: 'stringB', table: { ...stringType.table, ...componentSubsection } }, + d: { + ...stringType, + key: 'stringC', + table: { ...stringType.table, ...htmlElementSubsection }, + }, }, }, }; @@ -106,14 +110,14 @@ export const AllControls = { color: ArgRow.Color.args.row, date: ArgRow.Date.args.row, string: ArgRow.String.args.row, - number: ArgRow.Number.args.row, - range: ArgRow.Number.args.row, - radio: ArgRow.Radio.args.row, - inlineRadio: ArgRow.InlineRadio.args.row, - check: ArgRow.Check.args.row, - inlineCheck: ArgRow.InlineCheck.args.row, - select: ArgRow.Select.args.row, - multiSelect: ArgRow.MultiSelect.args.row, + number: { ...ArgRow.Number.args.row, key: 'number' }, + range: { ...ArgRow.Number.args.row, key: 'range' }, + radio: { ...ArgRow.Radio.args.row, key: 'radio' }, + inlineRadio: { ...ArgRow.InlineRadio.args.row, key: 'inlineRadio' }, + check: { ...ArgRow.Check.args.row, key: 'check' }, + inlineCheck: { ...ArgRow.InlineCheck.args.row, key: 'inlineCheck' }, + select: { ...ArgRow.Select.args.row, key: 'select' }, + multiSelect: { ...ArgRow.MultiSelect.args.row, key: 'multiSelect' }, object: ArgRow.ObjectOf.args.row, func: ArgRow.Func.args.row, }, diff --git a/code/lib/blocks/src/examples/Button.stories.tsx b/code/lib/blocks/src/examples/Button.stories.tsx index 31f28a568c5..c22d141f541 100644 --- a/code/lib/blocks/src/examples/Button.stories.tsx +++ b/code/lib/blocks/src/examples/Button.stories.tsx @@ -137,4 +137,5 @@ export const ErrorStory: Story = { parameters: { chromatic: { disable: true }, }, + tags: ['!test', '!vitest'], }; From 7454f3c3a71ea225b706af58797e79be31487188 Mon Sep 17 00:00:00 2001 From: Jeppe Reinhold <jeppe@reinhold.is> Date: Mon, 18 Nov 2024 11:27:18 +0100 Subject: [PATCH 068/101] properly disable docs context loader in PS --- code/.storybook/preview.tsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/code/.storybook/preview.tsx b/code/.storybook/preview.tsx index 60135ac5a8c..fac0c9bdb2b 100644 --- a/code/.storybook/preview.tsx +++ b/code/.storybook/preview.tsx @@ -117,8 +117,8 @@ const ThemedSetRoot = () => { }; // eslint-disable-next-line no-underscore-dangle -const preview = (window as any).__STORYBOOK_PREVIEW__ as PreviewWeb<ReactRenderer>; -const channel = (window as any).__STORYBOOK_ADDONS_CHANNEL__ as Channel; +const preview = (window as any).__STORYBOOK_PREVIEW__ as PreviewWeb<ReactRenderer> | undefined; +const channel = (window as any).__STORYBOOK_ADDONS_CHANNEL__ as Channel | undefined; export const loaders = [ /** * This loader adds a DocsContext to the story, which is required for the most Blocks to work. A @@ -133,9 +133,9 @@ export const loaders = [ * The DocsContext will then be added via the decorator below. */ async ({ parameters: { relativeCsfPaths, attached = true } }) => { - // TODO bring a better way to skip tests when running as part of the vitest plugin instead of __STORYBOOK_URL__ - // eslint-disable-next-line no-underscore-dangle - if (!relativeCsfPaths || (import.meta as any).env?.__STORYBOOK_URL__) { + // __STORYBOOK_PREVIEW__ and __STORYBOOK_ADDONS_CHANNEL__ is set in the PreviewWeb constructor + // which isn't loaded in portable stories/vitest + if (!relativeCsfPaths || !preview || !channel) { return {}; } const csfFiles = await Promise.all( From 2b254b7c08118eeb89156a108cac2b49a181b4bf Mon Sep 17 00:00:00 2001 From: Jeppe Reinhold <jeppe@reinhold.is> Date: Mon, 18 Nov 2024 11:32:53 +0100 Subject: [PATCH 069/101] add testNamePattern to vitest mock --- code/addons/test/src/node/test-manager.test.ts | 3 +++ 1 file changed, 3 insertions(+) diff --git a/code/addons/test/src/node/test-manager.test.ts b/code/addons/test/src/node/test-manager.test.ts index 32a404cfc38..20763641d21 100644 --- a/code/addons/test/src/node/test-manager.test.ts +++ b/code/addons/test/src/node/test-manager.test.ts @@ -17,6 +17,9 @@ const vitest = vi.hoisted(() => ({ cancelCurrentRun: vi.fn(), globTestSpecs: vi.fn(), getModuleProjects: vi.fn(() => []), + configOverride: { + testNamePattern: undefined, + }, })); vi.mock('vitest/node', () => ({ From ec28fa2bfa7677fe291b8dbe0844379e81672c70 Mon Sep 17 00:00:00 2001 From: Norbert de Langen <ndelangen@me.com> Date: Mon, 18 Nov 2024 11:52:49 +0100 Subject: [PATCH 070/101] fix sidebarbottom story --- .../sidebar/SidebarBottom.stories.tsx | 37 +++++++++---------- 1 file changed, 18 insertions(+), 19 deletions(-) diff --git a/code/core/src/manager/components/sidebar/SidebarBottom.stories.tsx b/code/core/src/manager/components/sidebar/SidebarBottom.stories.tsx index e8b3f506de8..444f0c185db 100644 --- a/code/core/src/manager/components/sidebar/SidebarBottom.stories.tsx +++ b/code/core/src/manager/components/sidebar/SidebarBottom.stories.tsx @@ -15,12 +15,27 @@ const managerContext: any = { autodocs: 'tag', docsMode: false, }, - testProviders: {}, + testProviders: { + 'component-tests': { + type: Addon_TypesEnum.experimental_TEST_PROVIDER, + id: 'component-tests', + title: () => 'Component tests', + description: () => 'Ran 2 seconds ago', + runnable: true, + watchable: true, + }, + 'visual-tests': { + type: Addon_TypesEnum.experimental_TEST_PROVIDER, + id: 'visual-tests', + title: () => 'Visual tests', + description: () => 'Not run', + runnable: true, + }, + }, }, api: { on: fn().mockName('api::on'), off: fn().mockName('api::off'), - getElements: fn(() => ({})), updateTestProviderState: fn(), }, }; @@ -38,23 +53,7 @@ export default { emit: fn(), experimental_setFilter: fn(), getChannel: fn(), - getElements: fn(() => ({ - 'component-tests': { - type: Addon_TypesEnum.experimental_TEST_PROVIDER, - id: 'component-tests', - title: () => 'Component tests', - description: () => 'Ran 2 seconds ago', - runnable: true, - watchable: true, - }, - 'visual-tests': { - type: Addon_TypesEnum.experimental_TEST_PROVIDER, - id: 'visual-tests', - title: () => 'Visual tests', - description: () => 'Not run', - runnable: true, - }, - })), + getElements: fn(() => ({})), } as any as API, }, decorators: [ From 158e30d7f29873f3bfe383fb42591dbca9d0ef80 Mon Sep 17 00:00:00 2001 From: Yann Braga <yannbf@gmail.com> Date: Tue, 12 Nov 2024 17:07:58 +0100 Subject: [PATCH 071/101] wip --- .../experimental-nextjs-vite/package.json | 4 +- .../compatibility/compatibility-map.ts | 46 +++++ .../compatibility/draft-mode.compat.ts | 2 + .../redirect-status-code.compat.ts | 6 + .../compatibility/segment.compat.ts | 8 + .../src/export-mocks/headers/index.ts | 7 +- .../template/stories/Head.stories.tsx | 6 +- .../template/stories/ImageLegacy.stories.tsx | 12 +- .../template/stories/Link.stories.tsx | 6 +- .../template/stories/Navigation.stories.tsx | 2 +- .../template/stories/NextHeader.stories.tsx | 6 +- .../template/stories/NextHeader.tsx | 22 ++- .../template/stories/RSC.jsx | 7 - .../{RSC.stories.jsx => RSC.stories.tsx} | 17 +- .../template/stories/RSC.tsx | 7 + .../stories/ServerActions.stories.tsx | 10 +- .../template/stories/ServerActions.tsx | 6 +- ...dJsx.stories.jsx => StyledJsx.stories.tsx} | 6 +- .../nextjs/src/export-mocks/headers/index.ts | 1 - .../cli-storybook/src/sandbox-templates.ts | 26 ++- code/yarn.lock | 162 +----------------- 21 files changed, 159 insertions(+), 210 deletions(-) create mode 100644 code/frameworks/experimental-nextjs-vite/src/export-mocks/compatibility/compatibility-map.ts create mode 100644 code/frameworks/experimental-nextjs-vite/src/export-mocks/compatibility/draft-mode.compat.ts create mode 100644 code/frameworks/experimental-nextjs-vite/src/export-mocks/compatibility/redirect-status-code.compat.ts create mode 100644 code/frameworks/experimental-nextjs-vite/src/export-mocks/compatibility/segment.compat.ts delete mode 100644 code/frameworks/experimental-nextjs-vite/template/stories/RSC.jsx rename code/frameworks/experimental-nextjs-vite/template/stories/{RSC.stories.jsx => RSC.stories.tsx} (60%) create mode 100644 code/frameworks/experimental-nextjs-vite/template/stories/RSC.tsx rename code/frameworks/experimental-nextjs-vite/template/stories/{StyledJsx.stories.jsx => StyledJsx.stories.tsx} (66%) diff --git a/code/frameworks/experimental-nextjs-vite/package.json b/code/frameworks/experimental-nextjs-vite/package.json index b7ee9fe02f5..d7437ff0fb9 100644 --- a/code/frameworks/experimental-nextjs-vite/package.json +++ b/code/frameworks/experimental-nextjs-vite/package.json @@ -103,12 +103,12 @@ }, "devDependencies": { "@types/node": "^18.0.0", - "next": "^14.2.5", + "next": "^15.0.3", "typescript": "^5.3.2" }, "peerDependencies": { "@storybook/test": "workspace:*", - "next": "^14.1.0", + "next": "^14.1.0 || ^15.0.0", "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta", "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta", "storybook": "workspace:^", diff --git a/code/frameworks/experimental-nextjs-vite/src/export-mocks/compatibility/compatibility-map.ts b/code/frameworks/experimental-nextjs-vite/src/export-mocks/compatibility/compatibility-map.ts new file mode 100644 index 00000000000..4cfb5e92f0b --- /dev/null +++ b/code/frameworks/experimental-nextjs-vite/src/export-mocks/compatibility/compatibility-map.ts @@ -0,0 +1,46 @@ +import semver from 'semver'; +import type { Configuration as WebpackConfig } from 'webpack'; + +import { addScopedAlias, getNextjsVersion, setAlias } from '../utils'; + +const mapping: Record<string, Record<string, string | boolean>> = { + '<14.1.0': { + // https://github.com/vercel/next.js/blob/v14.1.0/packages/next/src/shared/lib/segment.ts + 'next/dist/shared/lib/segment': '@storybook/nextjs/dist/compatibility/segment.compat', + }, + '<14.0.4': { + // https://github.com/vercel/next.js/blob/v14.0.4/packages/next/src/client/components/redirect-status-code.ts + 'next/dist/client/components/redirect-status-code': + '@storybook/nextjs/dist/compatibility/redirect-status-code.compat', + }, + '<15.0.0': { + 'next/dist/server/request/headers': 'next/dist/client/components/headers', + // this path only exists from Next 15 onwards + 'next/dist/server/request/draft-mode': '@storybook/nextjs/dist/compatibility/draft-mode.compat', + }, +}; + +export const getCompatibilityAliases = () => { + const version = getNextjsVersion(); + const result: Record<string, string> = {}; + + Object.keys(mapping).forEach((key) => { + if (semver.intersects(version, key)) { + Object.assign(result, mapping[key]); + } + }); + + return result; +}; + +export const configureCompatibilityAliases = (baseConfig: WebpackConfig): void => { + const aliases = getCompatibilityAliases(); + + Object.entries(aliases).forEach(([name, alias]) => { + if (typeof alias === 'string') { + addScopedAlias(baseConfig, name, alias); + } else { + setAlias(baseConfig, name, alias); + } + }); +}; diff --git a/code/frameworks/experimental-nextjs-vite/src/export-mocks/compatibility/draft-mode.compat.ts b/code/frameworks/experimental-nextjs-vite/src/export-mocks/compatibility/draft-mode.compat.ts new file mode 100644 index 00000000000..0304cb48455 --- /dev/null +++ b/code/frameworks/experimental-nextjs-vite/src/export-mocks/compatibility/draft-mode.compat.ts @@ -0,0 +1,2 @@ +// Compatibility for Next 14 +export { draftMode } from 'next/dist/client/components/headers'; diff --git a/code/frameworks/experimental-nextjs-vite/src/export-mocks/compatibility/redirect-status-code.compat.ts b/code/frameworks/experimental-nextjs-vite/src/export-mocks/compatibility/redirect-status-code.compat.ts new file mode 100644 index 00000000000..cf2adb9e284 --- /dev/null +++ b/code/frameworks/experimental-nextjs-vite/src/export-mocks/compatibility/redirect-status-code.compat.ts @@ -0,0 +1,6 @@ +// Compatibility for Next 13 +export enum RedirectStatusCode { + SeeOther = 303, + TemporaryRedirect = 307, + PermanentRedirect = 308, +} diff --git a/code/frameworks/experimental-nextjs-vite/src/export-mocks/compatibility/segment.compat.ts b/code/frameworks/experimental-nextjs-vite/src/export-mocks/compatibility/segment.compat.ts new file mode 100644 index 00000000000..98c195030f5 --- /dev/null +++ b/code/frameworks/experimental-nextjs-vite/src/export-mocks/compatibility/segment.compat.ts @@ -0,0 +1,8 @@ +// Compatibility for Next 13 +// from https://github.com/vercel/next.js/blob/606f9ff7903b58da51aa043bfe71cd7b6ea306fd/packages/next/src/shared/lib/segment.ts#L4 +export function isGroupSegment(segment: string) { + return segment[0] === '(' && segment.endsWith(')'); +} + +export const PAGE_SEGMENT_KEY = '__PAGE__'; +export const DEFAULT_SEGMENT_KEY = '__DEFAULT__'; diff --git a/code/frameworks/experimental-nextjs-vite/src/export-mocks/headers/index.ts b/code/frameworks/experimental-nextjs-vite/src/export-mocks/headers/index.ts index 1797d4ccaf5..1c903963ba2 100644 --- a/code/frameworks/experimental-nextjs-vite/src/export-mocks/headers/index.ts +++ b/code/frameworks/experimental-nextjs-vite/src/export-mocks/headers/index.ts @@ -1,14 +1,15 @@ import { fn } from '@storybook/test'; -import * as originalHeaders from 'next/dist/client/components/headers'; +import { draftMode as originalDraftMode } from 'next/dist/server/request/draft-mode'; +import * as headers from 'next/dist/server/request/headers'; // re-exports of the actual module -export * from 'next/dist/client/components/headers'; +export * from 'next/dist/server/request/headers'; // mock utilities/overrides (as of Next v14.2.0) export { headers } from './headers'; export { cookies } from './cookies'; // passthrough mocks - keep original implementation but allow for spying -const draftMode = fn(originalHeaders.draftMode).mockName('draftMode'); +const draftMode = fn(originalDraftMode ?? (headers as any).draftMode).mockName('draftMode'); export { draftMode }; diff --git a/code/frameworks/experimental-nextjs-vite/template/stories/Head.stories.tsx b/code/frameworks/experimental-nextjs-vite/template/stories/Head.stories.tsx index db1b747bf78..0d344078868 100644 --- a/code/frameworks/experimental-nextjs-vite/template/stories/Head.stories.tsx +++ b/code/frameworks/experimental-nextjs-vite/template/stories/Head.stories.tsx @@ -33,8 +33,8 @@ export const Default: Story = { play: async () => { await waitFor(() => expect(document.title).toEqual('Next.js Head Title')); await expect(document.querySelectorAll('meta[property="og:title"]')).toHaveLength(1); - await expect((document.querySelector('meta[property="og:title"]') as any).content).toEqual( - 'My new title' - ); + await expect( + (document.querySelector('meta[property="og:title"]') as HTMLMetaElement)?.content + ).toEqual('My new title'); }, }; diff --git a/code/frameworks/experimental-nextjs-vite/template/stories/ImageLegacy.stories.tsx b/code/frameworks/experimental-nextjs-vite/template/stories/ImageLegacy.stories.tsx index 61e61b916cb..5e8852c2fb3 100644 --- a/code/frameworks/experimental-nextjs-vite/template/stories/ImageLegacy.stories.tsx +++ b/code/frameworks/experimental-nextjs-vite/template/stories/ImageLegacy.stories.tsx @@ -1,5 +1,7 @@ import React from 'react'; +import type { Meta, StoryObj } from '@storybook/react'; + import Image from 'next/legacy/image'; import Accessibility from '../../assets/accessibility.svg'; @@ -10,17 +12,19 @@ export default { src: Accessibility, alt: 'Accessibility', }, -}; +} as Meta<typeof Image>; -export const Default = {}; +type Story = StoryObj<typeof Image>; -export const BlurredPlaceholder = { +export const Default: Story = {}; + +export const BlurredPlaceholder: Story = { args: { placeholder: 'blur', }, }; -export const BlurredAbsolutePlaceholder = { +export const BlurredAbsolutePlaceholder: Story = { args: { src: 'https://storybook.js.org/images/placeholders/50x50.png', width: 50, diff --git a/code/frameworks/experimental-nextjs-vite/template/stories/Link.stories.tsx b/code/frameworks/experimental-nextjs-vite/template/stories/Link.stories.tsx index 7c1aa2073ab..d071539c57a 100644 --- a/code/frameworks/experimental-nextjs-vite/template/stories/Link.stories.tsx +++ b/code/frameworks/experimental-nextjs-vite/template/stories/Link.stories.tsx @@ -76,9 +76,11 @@ export default { component: Component, } as Meta<typeof Component>; -export const Default: StoryObj<typeof Component> = {}; +type Story = StoryObj<typeof Component>; -export const InAppDir: StoryObj<typeof Component> = { +export const Default: Story = {}; + +export const InAppDir: Story = { parameters: { nextjs: { appDirectory: true, diff --git a/code/frameworks/experimental-nextjs-vite/template/stories/Navigation.stories.tsx b/code/frameworks/experimental-nextjs-vite/template/stories/Navigation.stories.tsx index d50ed5174d2..4b9b49904de 100644 --- a/code/frameworks/experimental-nextjs-vite/template/stories/Navigation.stories.tsx +++ b/code/frameworks/experimental-nextjs-vite/template/stories/Navigation.stories.tsx @@ -109,7 +109,7 @@ export default { }, } as Meta<typeof Component>; -export const Default: StoryObj<typeof Component> = { +export const Default: Story = { play: async ({ canvasElement, step }) => { const canvas = within(canvasElement); const routerMock = getRouter(); diff --git a/code/frameworks/experimental-nextjs-vite/template/stories/NextHeader.stories.tsx b/code/frameworks/experimental-nextjs-vite/template/stories/NextHeader.stories.tsx index 178aea8c3ac..1d31006f63e 100644 --- a/code/frameworks/experimental-nextjs-vite/template/stories/NextHeader.stories.tsx +++ b/code/frameworks/experimental-nextjs-vite/template/stories/NextHeader.stories.tsx @@ -8,7 +8,11 @@ import NextHeader from './NextHeader'; export default { component: NextHeader, - parameters: { react: { rsc: true } }, + parameters: { + react: { + rsc: true, + }, + }, } as Meta<typeof NextHeader>; type Story = StoryObj<typeof NextHeader>; diff --git a/code/frameworks/experimental-nextjs-vite/template/stories/NextHeader.tsx b/code/frameworks/experimental-nextjs-vite/template/stories/NextHeader.tsx index 6189f84baa6..eca7197ed79 100644 --- a/code/frameworks/experimental-nextjs-vite/template/stories/NextHeader.tsx +++ b/code/frameworks/experimental-nextjs-vite/template/stories/NextHeader.tsx @@ -5,25 +5,23 @@ import { cookies, headers } from 'next/headers'; export default async function Component() { async function handleClick() { 'use server'; - cookies().set('user-id', 'encrypted-id'); + (await cookies()).set('user-id', 'encrypted-id'); } return ( <> <h3>Cookies:</h3> - {cookies() - .getAll() - .map(({ name, value }) => { - return ( - <p key={name} style={{ display: 'flex', flexDirection: 'row', gap: 8 }}> - <strong>Name:</strong> <span>{name}</span> - <strong>Value:</strong> <span>{value}</span> - </p> - ); - })} + {(await cookies()).getAll().map(({ name, value }) => { + return ( + <p key={name} style={{ display: 'flex', flexDirection: 'row', gap: 8 }}> + <strong>Name:</strong> <span>{name}</span> + <strong>Value:</strong> <span>{value}</span> + </p> + ); + })} <h3>Headers:</h3> - {Array.from(headers().entries()).map(([name, value]: [string, string]) => { + {Array.from((await headers()).entries()).map(([name, value]: [string, string]) => { return ( <p key={name} style={{ display: 'flex', flexDirection: 'row', gap: 8 }}> <strong>Name:</strong> <span>{name}</span> diff --git a/code/frameworks/experimental-nextjs-vite/template/stories/RSC.jsx b/code/frameworks/experimental-nextjs-vite/template/stories/RSC.jsx deleted file mode 100644 index a5771a6a920..00000000000 --- a/code/frameworks/experimental-nextjs-vite/template/stories/RSC.jsx +++ /dev/null @@ -1,7 +0,0 @@ -import React from 'react'; - -import 'server-only'; - -export const RSC = async ({ label }) => <>RSC {label}</>; - -export const Nested = async ({ children }) => <>Nested {children}</>; diff --git a/code/frameworks/experimental-nextjs-vite/template/stories/RSC.stories.jsx b/code/frameworks/experimental-nextjs-vite/template/stories/RSC.stories.tsx similarity index 60% rename from code/frameworks/experimental-nextjs-vite/template/stories/RSC.stories.jsx rename to code/frameworks/experimental-nextjs-vite/template/stories/RSC.stories.tsx index f5520448bd6..f0db3625b4f 100644 --- a/code/frameworks/experimental-nextjs-vite/template/stories/RSC.stories.jsx +++ b/code/frameworks/experimental-nextjs-vite/template/stories/RSC.stories.tsx @@ -1,5 +1,8 @@ +/* eslint-disable local-rules/no-uncategorized-errors */ import React from 'react'; +import type { Meta, StoryObj } from '@storybook/react'; + import { Nested, RSC } from './RSC'; export default { @@ -10,11 +13,13 @@ export default { rsc: true, }, }, -}; +} as Meta<typeof RSC>; -export const Default = {}; +type Story = StoryObj<typeof RSC>; -export const DisableRSC = { +export const Default: Story = {}; + +export const DisableRSC: Story = { tags: ['!test'], parameters: { chromatic: { disable: true }, @@ -22,8 +27,8 @@ export const DisableRSC = { }, }; -export const Error = { - tags: ['!test', '!vitest'], +export const Errored: Story = { + tags: ['!test'], parameters: { chromatic: { disable: true }, }, @@ -32,7 +37,7 @@ export const Error = { }, }; -export const NestedRSC = { +export const NestedRSC: Story = { render: (args) => ( <Nested> <RSC {...args} /> diff --git a/code/frameworks/experimental-nextjs-vite/template/stories/RSC.tsx b/code/frameworks/experimental-nextjs-vite/template/stories/RSC.tsx new file mode 100644 index 00000000000..24655728ff4 --- /dev/null +++ b/code/frameworks/experimental-nextjs-vite/template/stories/RSC.tsx @@ -0,0 +1,7 @@ +import React from 'react'; + +import 'server-only'; + +export const RSC = async ({ label }: { label: string }) => <>RSC {label}</>; + +export const Nested = async ({ children }: any) => <>Nested {children}</>; diff --git a/code/frameworks/experimental-nextjs-vite/template/stories/ServerActions.stories.tsx b/code/frameworks/experimental-nextjs-vite/template/stories/ServerActions.stories.tsx index 944bc42d866..0844293c34f 100644 --- a/code/frameworks/experimental-nextjs-vite/template/stories/ServerActions.stories.tsx +++ b/code/frameworks/experimental-nextjs-vite/template/stories/ServerActions.stories.tsx @@ -59,7 +59,9 @@ export default { }, } as Meta<typeof Component>; -export const ProtectedWhileLoggedOut: StoryObj<typeof Component> = { +type Story = StoryObj<typeof Component>; + +export const ProtectedWhileLoggedOut: Story = { play: async ({ canvasElement }) => { const canvas = within(canvasElement); await userEvent.click(canvas.getByText('Access protected route')); @@ -71,7 +73,7 @@ export const ProtectedWhileLoggedOut: StoryObj<typeof Component> = { }, }; -export const ProtectedWhileLoggedIn: StoryObj<typeof Component> = { +export const ProtectedWhileLoggedIn: Story = { beforeEach() { cookies().set('user', 'storybookjs'); }, @@ -87,7 +89,7 @@ export const ProtectedWhileLoggedIn: StoryObj<typeof Component> = { }, }; -export const Logout: StoryObj<typeof Component> = { +export const Logout: Story = { beforeEach() { cookies().set('user', 'storybookjs'); }, @@ -103,7 +105,7 @@ export const Logout: StoryObj<typeof Component> = { }, }; -export const Login: StoryObj<typeof Component> = { +export const Login: Story = { play: async ({ canvasElement }) => { const canvas = within(canvasElement); await userEvent.click(canvas.getByText('Login')); diff --git a/code/frameworks/experimental-nextjs-vite/template/stories/ServerActions.tsx b/code/frameworks/experimental-nextjs-vite/template/stories/ServerActions.tsx index 5e1b3c7227d..6244f78d247 100644 --- a/code/frameworks/experimental-nextjs-vite/template/stories/ServerActions.tsx +++ b/code/frameworks/experimental-nextjs-vite/template/stories/ServerActions.tsx @@ -5,7 +5,7 @@ import { cookies } from 'next/headers'; import { redirect } from 'next/navigation'; export async function accessRoute() { - const user = cookies().get('user'); + const user = (await cookies()).get('user'); if (!user) { redirect('/'); @@ -16,13 +16,13 @@ export async function accessRoute() { } export async function logout() { - cookies().delete('user'); + (await cookies()).delete('user'); revalidatePath('/'); redirect('/'); } export async function login() { - cookies().set('user', 'storybookjs'); + (await cookies()).set('user', 'storybookjs'); revalidatePath('/'); redirect('/'); } diff --git a/code/frameworks/experimental-nextjs-vite/template/stories/StyledJsx.stories.jsx b/code/frameworks/experimental-nextjs-vite/template/stories/StyledJsx.stories.tsx similarity index 66% rename from code/frameworks/experimental-nextjs-vite/template/stories/StyledJsx.stories.jsx rename to code/frameworks/experimental-nextjs-vite/template/stories/StyledJsx.stories.tsx index 5a0c586e232..31adea42456 100644 --- a/code/frameworks/experimental-nextjs-vite/template/stories/StyledJsx.stories.jsx +++ b/code/frameworks/experimental-nextjs-vite/template/stories/StyledJsx.stories.tsx @@ -1,5 +1,7 @@ import React from 'react'; +import type { Meta, StoryObj } from '@storybook/react'; + const Component = () => ( <div> <style jsx>{` @@ -15,6 +17,6 @@ const Component = () => ( export default { component: Component, -}; +} as Meta<typeof Component>; -export const Default = {}; +export const Default: StoryObj<typeof Component> = {}; diff --git a/code/frameworks/nextjs/src/export-mocks/headers/index.ts b/code/frameworks/nextjs/src/export-mocks/headers/index.ts index 099107fa88c..1c903963ba2 100644 --- a/code/frameworks/nextjs/src/export-mocks/headers/index.ts +++ b/code/frameworks/nextjs/src/export-mocks/headers/index.ts @@ -1,6 +1,5 @@ import { fn } from '@storybook/test'; -// This export won't exist in Next.js 14 but it's safe because we ignore it in Webpack when applicable import { draftMode as originalDraftMode } from 'next/dist/server/request/draft-mode'; import * as headers from 'next/dist/server/request/headers'; diff --git a/code/lib/cli-storybook/src/sandbox-templates.ts b/code/lib/cli-storybook/src/sandbox-templates.ts index b38c583ef8d..a43c3d83745 100644 --- a/code/lib/cli-storybook/src/sandbox-templates.ts +++ b/code/lib/cli-storybook/src/sandbox-templates.ts @@ -208,7 +208,7 @@ const baseTemplates = { }, skipTasks: ['e2e-tests-dev', 'bench', 'vitest-integration'], }, - 'experimental-nextjs-vite/default-ts': { + 'experimental-nextjs-vite/14-ts': { name: 'Next.js Latest (Vite | TypeScript)', script: 'npx create-next-app@^14 {{beforeDir}} --eslint --tailwind --app --import-alias="@/*" --src-dir', @@ -229,6 +229,30 @@ const baseTemplates = { 'prop-types', ], }, + inDevelopment: true, + skipTasks: ['e2e-tests-dev', 'bench'], + }, + 'experimental-nextjs-vite/default-ts': { + name: 'Next.js Latest (Vite | TypeScript)', + script: + 'npx create-next-app {{beforeDir}} --eslint --tailwind --app --import-alias="@/*" --src-dir', + expected: { + framework: '@storybook/experimental-nextjs-vite', + renderer: '@storybook/react', + builder: '@storybook/builder-vite', + }, + modifications: { + mainConfig: { + framework: '@storybook/experimental-nextjs-vite', + features: { experimentalRSC: true }, + }, + extraDependencies: [ + 'server-only', + '@storybook/experimental-nextjs-vite', + 'vite', + 'prop-types', + ], + }, skipTasks: ['e2e-tests-dev', 'bench'], }, 'react-vite/default-js': { diff --git a/code/yarn.lock b/code/yarn.lock index ab06414c85c..38f40e9ba45 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -4092,13 +4092,6 @@ __metadata: languageName: node linkType: hard -"@next/env@npm:14.2.17": - version: 14.2.17 - resolution: "@next/env@npm:14.2.17" - checksum: 10c0/181998dfe06275a7f43c56847bfbc4c521a10bd0e4a223b5b0fa1f73c24b0a993daa7ee736b82cbc3a6b64b13d965f7452dd4fc47f0a99909a1aa150862f5b1e - languageName: node - linkType: hard - "@next/env@npm:15.0.3": version: 15.0.3 resolution: "@next/env@npm:15.0.3" @@ -4113,13 +4106,6 @@ __metadata: languageName: node linkType: hard -"@next/swc-darwin-arm64@npm:14.2.17": - version: 14.2.17 - resolution: "@next/swc-darwin-arm64@npm:14.2.17" - conditions: os=darwin & cpu=arm64 - languageName: node - linkType: hard - "@next/swc-darwin-arm64@npm:15.0.3": version: 15.0.3 resolution: "@next/swc-darwin-arm64@npm:15.0.3" @@ -4127,13 +4113,6 @@ __metadata: languageName: node linkType: hard -"@next/swc-darwin-x64@npm:14.2.17": - version: 14.2.17 - resolution: "@next/swc-darwin-x64@npm:14.2.17" - conditions: os=darwin & cpu=x64 - languageName: node - linkType: hard - "@next/swc-darwin-x64@npm:15.0.3": version: 15.0.3 resolution: "@next/swc-darwin-x64@npm:15.0.3" @@ -4141,13 +4120,6 @@ __metadata: languageName: node linkType: hard -"@next/swc-linux-arm64-gnu@npm:14.2.17": - version: 14.2.17 - resolution: "@next/swc-linux-arm64-gnu@npm:14.2.17" - conditions: os=linux & cpu=arm64 & libc=glibc - languageName: node - linkType: hard - "@next/swc-linux-arm64-gnu@npm:15.0.3": version: 15.0.3 resolution: "@next/swc-linux-arm64-gnu@npm:15.0.3" @@ -4155,13 +4127,6 @@ __metadata: languageName: node linkType: hard -"@next/swc-linux-arm64-musl@npm:14.2.17": - version: 14.2.17 - resolution: "@next/swc-linux-arm64-musl@npm:14.2.17" - conditions: os=linux & cpu=arm64 & libc=musl - languageName: node - linkType: hard - "@next/swc-linux-arm64-musl@npm:15.0.3": version: 15.0.3 resolution: "@next/swc-linux-arm64-musl@npm:15.0.3" @@ -4169,13 +4134,6 @@ __metadata: languageName: node linkType: hard -"@next/swc-linux-x64-gnu@npm:14.2.17": - version: 14.2.17 - resolution: "@next/swc-linux-x64-gnu@npm:14.2.17" - conditions: os=linux & cpu=x64 & libc=glibc - languageName: node - linkType: hard - "@next/swc-linux-x64-gnu@npm:15.0.3": version: 15.0.3 resolution: "@next/swc-linux-x64-gnu@npm:15.0.3" @@ -4183,13 +4141,6 @@ __metadata: languageName: node linkType: hard -"@next/swc-linux-x64-musl@npm:14.2.17": - version: 14.2.17 - resolution: "@next/swc-linux-x64-musl@npm:14.2.17" - conditions: os=linux & cpu=x64 & libc=musl - languageName: node - linkType: hard - "@next/swc-linux-x64-musl@npm:15.0.3": version: 15.0.3 resolution: "@next/swc-linux-x64-musl@npm:15.0.3" @@ -4197,13 +4148,6 @@ __metadata: languageName: node linkType: hard -"@next/swc-win32-arm64-msvc@npm:14.2.17": - version: 14.2.17 - resolution: "@next/swc-win32-arm64-msvc@npm:14.2.17" - conditions: os=win32 & cpu=arm64 - languageName: node - linkType: hard - "@next/swc-win32-arm64-msvc@npm:15.0.3": version: 15.0.3 resolution: "@next/swc-win32-arm64-msvc@npm:15.0.3" @@ -4211,20 +4155,6 @@ __metadata: languageName: node linkType: hard -"@next/swc-win32-ia32-msvc@npm:14.2.17": - version: 14.2.17 - resolution: "@next/swc-win32-ia32-msvc@npm:14.2.17" - conditions: os=win32 & cpu=ia32 - languageName: node - linkType: hard - -"@next/swc-win32-x64-msvc@npm:14.2.17": - version: 14.2.17 - resolution: "@next/swc-win32-x64-msvc@npm:14.2.17" - conditions: os=win32 & cpu=x64 - languageName: node - linkType: hard - "@next/swc-win32-x64-msvc@npm:15.0.3": version: 15.0.3 resolution: "@next/swc-win32-x64-msvc@npm:15.0.3" @@ -6548,14 +6478,14 @@ __metadata: "@storybook/react": "workspace:*" "@storybook/test": "workspace:*" "@types/node": "npm:^18.0.0" - next: "npm:^14.2.5" + next: "npm:^15.0.3" sharp: "npm:^0.33.3" styled-jsx: "npm:5.1.6" typescript: "npm:^5.3.2" vite-plugin-storybook-nextjs: "npm:^1.0.11" peerDependencies: "@storybook/test": "workspace:*" - next: ^14.1.0 + next: ^14.1.0 || ^15.0.0 react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta storybook: "workspace:^" @@ -7597,7 +7527,7 @@ __metadata: languageName: node linkType: hard -"@swc/counter@npm:0.1.3, @swc/counter@npm:^0.1.3": +"@swc/counter@npm:0.1.3": version: 0.1.3 resolution: "@swc/counter@npm:0.1.3" checksum: 10c0/8424f60f6bf8694cfd2a9bca45845bce29f26105cda8cf19cdb9fd3e78dc6338699e4db77a89ae449260bafa1cc6bec307e81e7fb96dbf7dcfce0eea55151356 @@ -7613,16 +7543,6 @@ __metadata: languageName: node linkType: hard -"@swc/helpers@npm:0.5.5": - version: 0.5.5 - resolution: "@swc/helpers@npm:0.5.5" - dependencies: - "@swc/counter": "npm:^0.1.3" - tslib: "npm:^2.4.0" - checksum: 10c0/21a9b9cfe7e00865f9c9f3eb4c1cc5b397143464f7abee76a2c5366e591e06b0155b5aac93fe8269ef8d548df253f6fd931e9ddfc0fd12efd405f90f45506e7d - languageName: node - linkType: hard - "@swc/helpers@npm:~0.5.0": version: 0.5.6 resolution: "@swc/helpers@npm:0.5.6" @@ -16724,7 +16644,7 @@ __metadata: languageName: node linkType: hard -"graceful-fs@npm:^4.1.11, graceful-fs@npm:^4.1.2, graceful-fs@npm:^4.1.3, graceful-fs@npm:^4.1.6, graceful-fs@npm:^4.2.0, graceful-fs@npm:^4.2.11, graceful-fs@npm:^4.2.4, graceful-fs@npm:^4.2.6, graceful-fs@npm:^4.2.9": +"graceful-fs@npm:^4.1.11, graceful-fs@npm:^4.1.2, graceful-fs@npm:^4.1.3, graceful-fs@npm:^4.1.6, graceful-fs@npm:^4.2.0, graceful-fs@npm:^4.2.4, graceful-fs@npm:^4.2.6, graceful-fs@npm:^4.2.9": version: 4.2.11 resolution: "graceful-fs@npm:4.2.11" checksum: 10c0/386d011a553e02bc594ac2ca0bd6d9e4c22d7fa8cfbfc448a6d148c59ea881b092db9dbe3547ae4b88e55f1b01f7c4a2ecc53b310c042793e63aa44cf6c257f2 @@ -21530,64 +21450,6 @@ __metadata: languageName: node linkType: hard -"next@npm:^14.2.5": - version: 14.2.17 - resolution: "next@npm:14.2.17" - dependencies: - "@next/env": "npm:14.2.17" - "@next/swc-darwin-arm64": "npm:14.2.17" - "@next/swc-darwin-x64": "npm:14.2.17" - "@next/swc-linux-arm64-gnu": "npm:14.2.17" - "@next/swc-linux-arm64-musl": "npm:14.2.17" - "@next/swc-linux-x64-gnu": "npm:14.2.17" - "@next/swc-linux-x64-musl": "npm:14.2.17" - "@next/swc-win32-arm64-msvc": "npm:14.2.17" - "@next/swc-win32-ia32-msvc": "npm:14.2.17" - "@next/swc-win32-x64-msvc": "npm:14.2.17" - "@swc/helpers": "npm:0.5.5" - busboy: "npm:1.6.0" - caniuse-lite: "npm:^1.0.30001579" - graceful-fs: "npm:^4.2.11" - postcss: "npm:8.4.31" - styled-jsx: "npm:5.1.1" - peerDependencies: - "@opentelemetry/api": ^1.1.0 - "@playwright/test": ^1.41.2 - react: ^18.2.0 - react-dom: ^18.2.0 - sass: ^1.3.0 - dependenciesMeta: - "@next/swc-darwin-arm64": - optional: true - "@next/swc-darwin-x64": - optional: true - "@next/swc-linux-arm64-gnu": - optional: true - "@next/swc-linux-arm64-musl": - optional: true - "@next/swc-linux-x64-gnu": - optional: true - "@next/swc-linux-x64-musl": - optional: true - "@next/swc-win32-arm64-msvc": - optional: true - "@next/swc-win32-ia32-msvc": - optional: true - "@next/swc-win32-x64-msvc": - optional: true - peerDependenciesMeta: - "@opentelemetry/api": - optional: true - "@playwright/test": - optional: true - sass: - optional: true - bin: - next: dist/bin/next - checksum: 10c0/ee350c1de7709da9a240752ebb8f56e0a01bbeae43177a43a463dd1d4ed071c414899afb3ff2d4228e38afa4029f0e0f0b56d9939b0f4a1bf383f77f32ec5ad9 - languageName: node - linkType: hard - "next@npm:^15.0.3": version: 15.0.3 resolution: "next@npm:15.0.3" @@ -27020,22 +26882,6 @@ __metadata: languageName: node linkType: hard -"styled-jsx@npm:5.1.1": - version: 5.1.1 - resolution: "styled-jsx@npm:5.1.1" - dependencies: - client-only: "npm:0.0.1" - peerDependencies: - react: ">= 16.8.0 || 17.x.x || ^18.0.0-0" - peerDependenciesMeta: - "@babel/core": - optional: true - babel-plugin-macros: - optional: true - checksum: 10c0/42655cdadfa5388f8a48bb282d6b450df7d7b8cf066ac37038bd0499d3c9f084815ebd9ff9dfa12a218fd4441338851db79603498d7557207009c1cf4d609835 - languageName: node - linkType: hard - "styled-jsx@npm:5.1.6, styled-jsx@npm:^5.1.6": version: 5.1.6 resolution: "styled-jsx@npm:5.1.6" From 300192c595ff93c45e87047e6d7a2ff91f29743d Mon Sep 17 00:00:00 2001 From: storybook-bot <32066757+storybook-bot@users.noreply.github.com> Date: Mon, 18 Nov 2024 12:26:54 +0000 Subject: [PATCH 072/101] Write changelog for 8.5.0-alpha.6 [skip ci] --- CHANGELOG.prerelease.md | 5 +++++ code/package.json | 3 ++- docs/versions/next.json | 2 +- 3 files changed, 8 insertions(+), 2 deletions(-) diff --git a/CHANGELOG.prerelease.md b/CHANGELOG.prerelease.md index 0b09a2a6f71..c470d2578b9 100644 --- a/CHANGELOG.prerelease.md +++ b/CHANGELOG.prerelease.md @@ -1,3 +1,8 @@ +## 8.5.0-alpha.6 + +- CLI: Fix qwik init - [#29632](https://github.com/storybookjs/storybook/pull/29632), thanks @shilman! +- React Native Web: Add framework, CLI integration, sandboxes - [#29520](https://github.com/storybookjs/storybook/pull/29520), thanks @shilman! + ## 8.5.0-alpha.5 - Addon Test: Only optimize react deps if applicable in vitest-plugin - [#29617](https://github.com/storybookjs/storybook/pull/29617), thanks @yannbf! diff --git a/code/package.json b/code/package.json index e541f4b94e4..7bb97653cb6 100644 --- a/code/package.json +++ b/code/package.json @@ -293,5 +293,6 @@ "Dependency Upgrades" ] ] - } + }, + "deferredNextVersion": "8.5.0-alpha.6" } diff --git a/docs/versions/next.json b/docs/versions/next.json index 13e6d855b1e..5759d745349 100644 --- a/docs/versions/next.json +++ b/docs/versions/next.json @@ -1 +1 @@ -{"version":"8.5.0-alpha.5","info":{"plain":"- Addon Test: Only optimize react deps if applicable in vitest-plugin - [#29617](https://github.com/storybookjs/storybook/pull/29617), thanks @yannbf!\n- Addon Test: Optimize internal dependencies - [#29595](https://github.com/storybookjs/storybook/pull/29595), thanks @yannbf!\n- CLI: Fix init help for `storybook` command - [#29480](https://github.com/storybookjs/storybook/pull/29480), thanks @toothlessdev!\n- Composition: Fix composed story search - [#29453](https://github.com/storybookjs/storybook/pull/29453), thanks @jsingh0026!"}} +{"version":"8.5.0-alpha.6","info":{"plain":"- CLI: Fix qwik init - [#29632](https://github.com/storybookjs/storybook/pull/29632), thanks @shilman!\n- React Native Web: Add framework, CLI integration, sandboxes - [#29520](https://github.com/storybookjs/storybook/pull/29520), thanks @shilman!"}} From 56952c73d0b6663593f8ea38e99fb5f909186fe2 Mon Sep 17 00:00:00 2001 From: storybook-bot <32066757+storybook-bot@users.noreply.github.com> Date: Mon, 18 Nov 2024 13:22:44 +0000 Subject: [PATCH 073/101] Bump version from "8.5.0-alpha.5" to "8.5.0-alpha.6" [skip ci] --- code/addons/a11y/package.json | 2 +- code/addons/actions/package.json | 2 +- code/addons/backgrounds/package.json | 2 +- code/addons/controls/package.json | 2 +- code/addons/docs/package.json | 2 +- code/addons/essentials/package.json | 2 +- code/addons/gfm/package.json | 2 +- code/addons/highlight/package.json | 2 +- code/addons/interactions/package.json | 2 +- code/addons/jest/package.json | 2 +- code/addons/links/package.json | 2 +- code/addons/measure/package.json | 2 +- code/addons/onboarding/package.json | 2 +- code/addons/outline/package.json | 2 +- code/addons/storysource/package.json | 2 +- code/addons/test/package.json | 2 +- code/addons/themes/package.json | 2 +- code/addons/toolbars/package.json | 2 +- code/addons/viewport/package.json | 2 +- code/builders/builder-vite/package.json | 2 +- code/builders/builder-webpack5/package.json | 2 +- code/core/package.json | 2 +- code/core/src/common/versions.ts | 170 +++++++++--------- code/core/src/manager-api/version.ts | 2 +- code/deprecated/builder-manager/package.json | 2 +- code/deprecated/channels/package.json | 2 +- code/deprecated/client-logger/package.json | 2 +- code/deprecated/components/package.json | 2 +- code/deprecated/core-common/package.json | 2 +- code/deprecated/core-events/package.json | 2 +- code/deprecated/core-server/package.json | 2 +- code/deprecated/csf-tools/package.json | 2 +- code/deprecated/docs-tools/package.json | 2 +- code/deprecated/manager-api/package.json | 2 +- code/deprecated/manager/package.json | 2 +- code/deprecated/node-logger/package.json | 2 +- code/deprecated/preview-api/package.json | 2 +- code/deprecated/preview/package.json | 2 +- code/deprecated/router/package.json | 2 +- code/deprecated/telemetry/package.json | 2 +- code/deprecated/theming/package.json | 2 +- code/deprecated/types/package.json | 2 +- code/frameworks/angular/package.json | 2 +- code/frameworks/ember/package.json | 2 +- .../experimental-nextjs-vite/package.json | 2 +- code/frameworks/html-vite/package.json | 2 +- code/frameworks/html-webpack5/package.json | 2 +- code/frameworks/nextjs/package.json | 2 +- code/frameworks/preact-vite/package.json | 2 +- code/frameworks/preact-webpack5/package.json | 2 +- .../react-native-web-vite/package.json | 2 +- code/frameworks/react-vite/package.json | 2 +- code/frameworks/react-webpack5/package.json | 2 +- code/frameworks/server-webpack5/package.json | 2 +- code/frameworks/svelte-vite/package.json | 2 +- code/frameworks/svelte-webpack5/package.json | 2 +- code/frameworks/sveltekit/package.json | 2 +- code/frameworks/vue3-vite/package.json | 2 +- code/frameworks/vue3-webpack5/package.json | 2 +- .../web-components-vite/package.json | 2 +- .../web-components-webpack5/package.json | 2 +- code/lib/blocks/package.json | 2 +- code/lib/cli-sb/package.json | 2 +- code/lib/cli-storybook/package.json | 2 +- code/lib/cli/package.json | 2 +- code/lib/codemod/package.json | 2 +- code/lib/core-webpack/package.json | 2 +- code/lib/create-storybook/package.json | 2 +- code/lib/csf-plugin/package.json | 2 +- code/lib/instrumenter/package.json | 2 +- code/lib/react-dom-shim/package.json | 2 +- code/lib/source-loader/package.json | 2 +- code/lib/test/package.json | 2 +- code/package.json | 5 +- code/presets/create-react-app/package.json | 2 +- code/presets/html-webpack/package.json | 2 +- code/presets/preact-webpack/package.json | 2 +- code/presets/react-webpack/package.json | 2 +- code/presets/server-webpack/package.json | 2 +- code/presets/svelte-webpack/package.json | 2 +- code/presets/vue3-webpack/package.json | 2 +- code/renderers/html/package.json | 2 +- code/renderers/preact/package.json | 2 +- code/renderers/react/package.json | 2 +- code/renderers/server/package.json | 2 +- code/renderers/svelte/package.json | 2 +- code/renderers/vue3/package.json | 2 +- code/renderers/web-components/package.json | 2 +- 88 files changed, 173 insertions(+), 174 deletions(-) diff --git a/code/addons/a11y/package.json b/code/addons/a11y/package.json index d02355c2300..7f84361171a 100644 --- a/code/addons/a11y/package.json +++ b/code/addons/a11y/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-a11y", - "version": "8.5.0-alpha.5", + "version": "8.5.0-alpha.6", "description": "Test component compliance with web accessibility standards", "keywords": [ "a11y", diff --git a/code/addons/actions/package.json b/code/addons/actions/package.json index cad431b9129..f14d5e57843 100644 --- a/code/addons/actions/package.json +++ b/code/addons/actions/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-actions", - "version": "8.5.0-alpha.5", + "version": "8.5.0-alpha.6", "description": "Get UI feedback when an action is performed on an interactive element", "keywords": [ "storybook", diff --git a/code/addons/backgrounds/package.json b/code/addons/backgrounds/package.json index 7616d2bfc7f..bebc497f9ee 100644 --- a/code/addons/backgrounds/package.json +++ b/code/addons/backgrounds/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-backgrounds", - "version": "8.5.0-alpha.5", + "version": "8.5.0-alpha.6", "description": "Switch backgrounds to view components in different settings", "keywords": [ "addon", diff --git a/code/addons/controls/package.json b/code/addons/controls/package.json index 24b1f8f4060..e46861c63db 100644 --- a/code/addons/controls/package.json +++ b/code/addons/controls/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-controls", - "version": "8.5.0-alpha.5", + "version": "8.5.0-alpha.6", "description": "Interact with component inputs dynamically in the Storybook UI", "keywords": [ "addon", diff --git a/code/addons/docs/package.json b/code/addons/docs/package.json index 301bf78226a..4cbcdcf2ab6 100644 --- a/code/addons/docs/package.json +++ b/code/addons/docs/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-docs", - "version": "8.5.0-alpha.5", + "version": "8.5.0-alpha.6", "description": "Document component usage and properties in Markdown", "keywords": [ "addon", diff --git a/code/addons/essentials/package.json b/code/addons/essentials/package.json index 47cbd864ebd..bd7167e6404 100644 --- a/code/addons/essentials/package.json +++ b/code/addons/essentials/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-essentials", - "version": "8.5.0-alpha.5", + "version": "8.5.0-alpha.6", "description": "Curated addons to bring out the best of Storybook", "keywords": [ "addon", diff --git a/code/addons/gfm/package.json b/code/addons/gfm/package.json index 98dcc357d94..df31e4ba438 100644 --- a/code/addons/gfm/package.json +++ b/code/addons/gfm/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-mdx-gfm", - "version": "8.5.0-alpha.5", + "version": "8.5.0-alpha.6", "description": "GitHub Flavored Markdown in Storybook", "keywords": [ "addon", diff --git a/code/addons/highlight/package.json b/code/addons/highlight/package.json index e8f144d7fe4..ae72dc5aec0 100644 --- a/code/addons/highlight/package.json +++ b/code/addons/highlight/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-highlight", - "version": "8.5.0-alpha.5", + "version": "8.5.0-alpha.6", "description": "Highlight DOM nodes within your stories", "keywords": [ "storybook-addons", diff --git a/code/addons/interactions/package.json b/code/addons/interactions/package.json index 1a985a6f04d..3b921f7f5b7 100644 --- a/code/addons/interactions/package.json +++ b/code/addons/interactions/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-interactions", - "version": "8.5.0-alpha.5", + "version": "8.5.0-alpha.6", "description": "Automate, test and debug user interactions", "keywords": [ "storybook-addons", diff --git a/code/addons/jest/package.json b/code/addons/jest/package.json index ae99902e13e..560ddee4a89 100644 --- a/code/addons/jest/package.json +++ b/code/addons/jest/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-jest", - "version": "8.5.0-alpha.5", + "version": "8.5.0-alpha.6", "description": "React storybook addon that show component jest report", "keywords": [ "addon", diff --git a/code/addons/links/package.json b/code/addons/links/package.json index 3eb9dedaad7..5c958a3a2d0 100644 --- a/code/addons/links/package.json +++ b/code/addons/links/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-links", - "version": "8.5.0-alpha.5", + "version": "8.5.0-alpha.6", "description": "Link stories together to build demos and prototypes with your UI components", "keywords": [ "storybook-addons", diff --git a/code/addons/measure/package.json b/code/addons/measure/package.json index 189e1d92c0d..31879b8ecdf 100644 --- a/code/addons/measure/package.json +++ b/code/addons/measure/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-measure", - "version": "8.5.0-alpha.5", + "version": "8.5.0-alpha.6", "description": "Inspect layouts by visualizing the box model", "keywords": [ "storybook-addons", diff --git a/code/addons/onboarding/package.json b/code/addons/onboarding/package.json index a394da48297..c3742e92167 100644 --- a/code/addons/onboarding/package.json +++ b/code/addons/onboarding/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-onboarding", - "version": "8.5.0-alpha.5", + "version": "8.5.0-alpha.6", "description": "Storybook Addon Onboarding - Introduces a new onboarding experience", "keywords": [ "storybook-addons", diff --git a/code/addons/outline/package.json b/code/addons/outline/package.json index 6527c5cabbb..1ad8dd9259e 100644 --- a/code/addons/outline/package.json +++ b/code/addons/outline/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-outline", - "version": "8.5.0-alpha.5", + "version": "8.5.0-alpha.6", "description": "Outline all elements with CSS to help with layout placement and alignment", "keywords": [ "storybook-addons", diff --git a/code/addons/storysource/package.json b/code/addons/storysource/package.json index 4201373cb37..a2dd11c1844 100644 --- a/code/addons/storysource/package.json +++ b/code/addons/storysource/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-storysource", - "version": "8.5.0-alpha.5", + "version": "8.5.0-alpha.6", "description": "View a story’s source code to see how it works and paste into your app", "keywords": [ "addon", diff --git a/code/addons/test/package.json b/code/addons/test/package.json index 4a6639d2341..4be82e299b3 100644 --- a/code/addons/test/package.json +++ b/code/addons/test/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/experimental-addon-test", - "version": "8.5.0-alpha.5", + "version": "8.5.0-alpha.6", "description": "Integrate Vitest with Storybook", "keywords": [ "storybook-addons", diff --git a/code/addons/themes/package.json b/code/addons/themes/package.json index acf30892844..6b61c3a76e1 100644 --- a/code/addons/themes/package.json +++ b/code/addons/themes/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-themes", - "version": "8.5.0-alpha.5", + "version": "8.5.0-alpha.6", "description": "Switch between multiple themes for you components in Storybook", "keywords": [ "css", diff --git a/code/addons/toolbars/package.json b/code/addons/toolbars/package.json index 2dfbed3a597..bb932487b79 100644 --- a/code/addons/toolbars/package.json +++ b/code/addons/toolbars/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-toolbars", - "version": "8.5.0-alpha.5", + "version": "8.5.0-alpha.6", "description": "Create your own toolbar items that control story rendering", "keywords": [ "addon", diff --git a/code/addons/viewport/package.json b/code/addons/viewport/package.json index 8d2114cba00..ad514cc741f 100644 --- a/code/addons/viewport/package.json +++ b/code/addons/viewport/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-viewport", - "version": "8.5.0-alpha.5", + "version": "8.5.0-alpha.6", "description": "Build responsive components by adjusting Storybook’s viewport size and orientation", "keywords": [ "addon", diff --git a/code/builders/builder-vite/package.json b/code/builders/builder-vite/package.json index 8735e716e6d..22e3de20038 100644 --- a/code/builders/builder-vite/package.json +++ b/code/builders/builder-vite/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/builder-vite", - "version": "8.5.0-alpha.5", + "version": "8.5.0-alpha.6", "description": "A plugin to run and build Storybooks with Vite", "homepage": "https://github.com/storybookjs/storybook/tree/next/code/builders/builder-vite/#readme", "bugs": { diff --git a/code/builders/builder-webpack5/package.json b/code/builders/builder-webpack5/package.json index de12052c9fc..8375c5aba70 100644 --- a/code/builders/builder-webpack5/package.json +++ b/code/builders/builder-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/builder-webpack5", - "version": "8.5.0-alpha.5", + "version": "8.5.0-alpha.6", "description": "Storybook framework-agnostic API", "keywords": [ "storybook" diff --git a/code/core/package.json b/code/core/package.json index 5d48686c251..9dfa9757c1f 100644 --- a/code/core/package.json +++ b/code/core/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/core", - "version": "8.5.0-alpha.5", + "version": "8.5.0-alpha.6", "description": "Storybook framework-agnostic API", "keywords": [ "storybook" diff --git a/code/core/src/common/versions.ts b/code/core/src/common/versions.ts index 493d40295bc..b22c4a9ec00 100644 --- a/code/core/src/common/versions.ts +++ b/code/core/src/common/versions.ts @@ -1,88 +1,88 @@ // auto generated file, do not edit export default { - '@storybook/addon-a11y': '8.5.0-alpha.5', - '@storybook/addon-actions': '8.5.0-alpha.5', - '@storybook/addon-backgrounds': '8.5.0-alpha.5', - '@storybook/addon-controls': '8.5.0-alpha.5', - '@storybook/addon-docs': '8.5.0-alpha.5', - '@storybook/addon-essentials': '8.5.0-alpha.5', - '@storybook/addon-mdx-gfm': '8.5.0-alpha.5', - '@storybook/addon-highlight': '8.5.0-alpha.5', - '@storybook/addon-interactions': '8.5.0-alpha.5', - '@storybook/addon-jest': '8.5.0-alpha.5', - '@storybook/addon-links': '8.5.0-alpha.5', - '@storybook/addon-measure': '8.5.0-alpha.5', - '@storybook/addon-onboarding': '8.5.0-alpha.5', - '@storybook/addon-outline': '8.5.0-alpha.5', - '@storybook/addon-storysource': '8.5.0-alpha.5', - '@storybook/experimental-addon-test': '8.5.0-alpha.5', - '@storybook/addon-themes': '8.5.0-alpha.5', - '@storybook/addon-toolbars': '8.5.0-alpha.5', - '@storybook/addon-viewport': '8.5.0-alpha.5', - '@storybook/builder-vite': '8.5.0-alpha.5', - '@storybook/builder-webpack5': '8.5.0-alpha.5', - '@storybook/core': '8.5.0-alpha.5', - '@storybook/builder-manager': '8.5.0-alpha.5', - '@storybook/channels': '8.5.0-alpha.5', - '@storybook/client-logger': '8.5.0-alpha.5', - '@storybook/components': '8.5.0-alpha.5', - '@storybook/core-common': '8.5.0-alpha.5', - '@storybook/core-events': '8.5.0-alpha.5', - '@storybook/core-server': '8.5.0-alpha.5', - '@storybook/csf-tools': '8.5.0-alpha.5', - '@storybook/docs-tools': '8.5.0-alpha.5', - '@storybook/manager': '8.5.0-alpha.5', - '@storybook/manager-api': '8.5.0-alpha.5', - '@storybook/node-logger': '8.5.0-alpha.5', - '@storybook/preview': '8.5.0-alpha.5', - '@storybook/preview-api': '8.5.0-alpha.5', - '@storybook/router': '8.5.0-alpha.5', - '@storybook/telemetry': '8.5.0-alpha.5', - '@storybook/theming': '8.5.0-alpha.5', - '@storybook/types': '8.5.0-alpha.5', - '@storybook/angular': '8.5.0-alpha.5', - '@storybook/ember': '8.5.0-alpha.5', - '@storybook/experimental-nextjs-vite': '8.5.0-alpha.5', - '@storybook/html-vite': '8.5.0-alpha.5', - '@storybook/html-webpack5': '8.5.0-alpha.5', - '@storybook/nextjs': '8.5.0-alpha.5', - '@storybook/preact-vite': '8.5.0-alpha.5', - '@storybook/preact-webpack5': '8.5.0-alpha.5', - '@storybook/react-native-web-vite': '8.5.0-alpha.5', - '@storybook/react-vite': '8.5.0-alpha.5', - '@storybook/react-webpack5': '8.5.0-alpha.5', - '@storybook/server-webpack5': '8.5.0-alpha.5', - '@storybook/svelte-vite': '8.5.0-alpha.5', - '@storybook/svelte-webpack5': '8.5.0-alpha.5', - '@storybook/sveltekit': '8.5.0-alpha.5', - '@storybook/vue3-vite': '8.5.0-alpha.5', - '@storybook/vue3-webpack5': '8.5.0-alpha.5', - '@storybook/web-components-vite': '8.5.0-alpha.5', - '@storybook/web-components-webpack5': '8.5.0-alpha.5', - '@storybook/blocks': '8.5.0-alpha.5', - storybook: '8.5.0-alpha.5', - sb: '8.5.0-alpha.5', - '@storybook/cli': '8.5.0-alpha.5', - '@storybook/codemod': '8.5.0-alpha.5', - '@storybook/core-webpack': '8.5.0-alpha.5', - 'create-storybook': '8.5.0-alpha.5', - '@storybook/csf-plugin': '8.5.0-alpha.5', - '@storybook/instrumenter': '8.5.0-alpha.5', - '@storybook/react-dom-shim': '8.5.0-alpha.5', - '@storybook/source-loader': '8.5.0-alpha.5', - '@storybook/test': '8.5.0-alpha.5', - '@storybook/preset-create-react-app': '8.5.0-alpha.5', - '@storybook/preset-html-webpack': '8.5.0-alpha.5', - '@storybook/preset-preact-webpack': '8.5.0-alpha.5', - '@storybook/preset-react-webpack': '8.5.0-alpha.5', - '@storybook/preset-server-webpack': '8.5.0-alpha.5', - '@storybook/preset-svelte-webpack': '8.5.0-alpha.5', - '@storybook/preset-vue3-webpack': '8.5.0-alpha.5', - '@storybook/html': '8.5.0-alpha.5', - '@storybook/preact': '8.5.0-alpha.5', - '@storybook/react': '8.5.0-alpha.5', - '@storybook/server': '8.5.0-alpha.5', - '@storybook/svelte': '8.5.0-alpha.5', - '@storybook/vue3': '8.5.0-alpha.5', - '@storybook/web-components': '8.5.0-alpha.5', + '@storybook/addon-a11y': '8.5.0-alpha.6', + '@storybook/addon-actions': '8.5.0-alpha.6', + '@storybook/addon-backgrounds': '8.5.0-alpha.6', + '@storybook/addon-controls': '8.5.0-alpha.6', + '@storybook/addon-docs': '8.5.0-alpha.6', + '@storybook/addon-essentials': '8.5.0-alpha.6', + '@storybook/addon-mdx-gfm': '8.5.0-alpha.6', + '@storybook/addon-highlight': '8.5.0-alpha.6', + '@storybook/addon-interactions': '8.5.0-alpha.6', + '@storybook/addon-jest': '8.5.0-alpha.6', + '@storybook/addon-links': '8.5.0-alpha.6', + '@storybook/addon-measure': '8.5.0-alpha.6', + '@storybook/addon-onboarding': '8.5.0-alpha.6', + '@storybook/addon-outline': '8.5.0-alpha.6', + '@storybook/addon-storysource': '8.5.0-alpha.6', + '@storybook/experimental-addon-test': '8.5.0-alpha.6', + '@storybook/addon-themes': '8.5.0-alpha.6', + '@storybook/addon-toolbars': '8.5.0-alpha.6', + '@storybook/addon-viewport': '8.5.0-alpha.6', + '@storybook/builder-vite': '8.5.0-alpha.6', + '@storybook/builder-webpack5': '8.5.0-alpha.6', + '@storybook/core': '8.5.0-alpha.6', + '@storybook/builder-manager': '8.5.0-alpha.6', + '@storybook/channels': '8.5.0-alpha.6', + '@storybook/client-logger': '8.5.0-alpha.6', + '@storybook/components': '8.5.0-alpha.6', + '@storybook/core-common': '8.5.0-alpha.6', + '@storybook/core-events': '8.5.0-alpha.6', + '@storybook/core-server': '8.5.0-alpha.6', + '@storybook/csf-tools': '8.5.0-alpha.6', + '@storybook/docs-tools': '8.5.0-alpha.6', + '@storybook/manager': '8.5.0-alpha.6', + '@storybook/manager-api': '8.5.0-alpha.6', + '@storybook/node-logger': '8.5.0-alpha.6', + '@storybook/preview': '8.5.0-alpha.6', + '@storybook/preview-api': '8.5.0-alpha.6', + '@storybook/router': '8.5.0-alpha.6', + '@storybook/telemetry': '8.5.0-alpha.6', + '@storybook/theming': '8.5.0-alpha.6', + '@storybook/types': '8.5.0-alpha.6', + '@storybook/angular': '8.5.0-alpha.6', + '@storybook/ember': '8.5.0-alpha.6', + '@storybook/experimental-nextjs-vite': '8.5.0-alpha.6', + '@storybook/html-vite': '8.5.0-alpha.6', + '@storybook/html-webpack5': '8.5.0-alpha.6', + '@storybook/nextjs': '8.5.0-alpha.6', + '@storybook/preact-vite': '8.5.0-alpha.6', + '@storybook/preact-webpack5': '8.5.0-alpha.6', + '@storybook/react-native-web-vite': '8.5.0-alpha.6', + '@storybook/react-vite': '8.5.0-alpha.6', + '@storybook/react-webpack5': '8.5.0-alpha.6', + '@storybook/server-webpack5': '8.5.0-alpha.6', + '@storybook/svelte-vite': '8.5.0-alpha.6', + '@storybook/svelte-webpack5': '8.5.0-alpha.6', + '@storybook/sveltekit': '8.5.0-alpha.6', + '@storybook/vue3-vite': '8.5.0-alpha.6', + '@storybook/vue3-webpack5': '8.5.0-alpha.6', + '@storybook/web-components-vite': '8.5.0-alpha.6', + '@storybook/web-components-webpack5': '8.5.0-alpha.6', + '@storybook/blocks': '8.5.0-alpha.6', + storybook: '8.5.0-alpha.6', + sb: '8.5.0-alpha.6', + '@storybook/cli': '8.5.0-alpha.6', + '@storybook/codemod': '8.5.0-alpha.6', + '@storybook/core-webpack': '8.5.0-alpha.6', + 'create-storybook': '8.5.0-alpha.6', + '@storybook/csf-plugin': '8.5.0-alpha.6', + '@storybook/instrumenter': '8.5.0-alpha.6', + '@storybook/react-dom-shim': '8.5.0-alpha.6', + '@storybook/source-loader': '8.5.0-alpha.6', + '@storybook/test': '8.5.0-alpha.6', + '@storybook/preset-create-react-app': '8.5.0-alpha.6', + '@storybook/preset-html-webpack': '8.5.0-alpha.6', + '@storybook/preset-preact-webpack': '8.5.0-alpha.6', + '@storybook/preset-react-webpack': '8.5.0-alpha.6', + '@storybook/preset-server-webpack': '8.5.0-alpha.6', + '@storybook/preset-svelte-webpack': '8.5.0-alpha.6', + '@storybook/preset-vue3-webpack': '8.5.0-alpha.6', + '@storybook/html': '8.5.0-alpha.6', + '@storybook/preact': '8.5.0-alpha.6', + '@storybook/react': '8.5.0-alpha.6', + '@storybook/server': '8.5.0-alpha.6', + '@storybook/svelte': '8.5.0-alpha.6', + '@storybook/vue3': '8.5.0-alpha.6', + '@storybook/web-components': '8.5.0-alpha.6', }; diff --git a/code/core/src/manager-api/version.ts b/code/core/src/manager-api/version.ts index febb7e45dbf..9885e98760a 100644 --- a/code/core/src/manager-api/version.ts +++ b/code/core/src/manager-api/version.ts @@ -1 +1 @@ -export const version = '8.5.0-alpha.5'; +export const version = '8.5.0-alpha.6'; diff --git a/code/deprecated/builder-manager/package.json b/code/deprecated/builder-manager/package.json index 9c3fbb7b42e..5c0f02b7602 100644 --- a/code/deprecated/builder-manager/package.json +++ b/code/deprecated/builder-manager/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/builder-manager", - "version": "8.5.0-alpha.5", + "version": "8.5.0-alpha.6", "description": "Storybook manager builder", "keywords": [ "storybook" diff --git a/code/deprecated/channels/package.json b/code/deprecated/channels/package.json index 3eacb724e66..011737363dd 100644 --- a/code/deprecated/channels/package.json +++ b/code/deprecated/channels/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/channels", - "version": "8.5.0-alpha.5", + "version": "8.5.0-alpha.6", "description": "", "keywords": [ "storybook" diff --git a/code/deprecated/client-logger/package.json b/code/deprecated/client-logger/package.json index 9c798bf2ca9..dd66c185706 100644 --- a/code/deprecated/client-logger/package.json +++ b/code/deprecated/client-logger/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/client-logger", - "version": "8.5.0-alpha.5", + "version": "8.5.0-alpha.6", "description": "", "keywords": [ "storybook" diff --git a/code/deprecated/components/package.json b/code/deprecated/components/package.json index ecb071ea61e..ac3f6f5a5b7 100644 --- a/code/deprecated/components/package.json +++ b/code/deprecated/components/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/components", - "version": "8.5.0-alpha.5", + "version": "8.5.0-alpha.6", "description": "Core Storybook Components", "keywords": [ "storybook" diff --git a/code/deprecated/core-common/package.json b/code/deprecated/core-common/package.json index 8b638a061d3..8fc25554d21 100644 --- a/code/deprecated/core-common/package.json +++ b/code/deprecated/core-common/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/core-common", - "version": "8.5.0-alpha.5", + "version": "8.5.0-alpha.6", "description": "Storybook framework-agnostic API", "keywords": [ "storybook" diff --git a/code/deprecated/core-events/package.json b/code/deprecated/core-events/package.json index 10a8c3fa093..92a8081fd16 100644 --- a/code/deprecated/core-events/package.json +++ b/code/deprecated/core-events/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/core-events", - "version": "8.5.0-alpha.5", + "version": "8.5.0-alpha.6", "description": "Event names used in storybook core", "keywords": [ "storybook" diff --git a/code/deprecated/core-server/package.json b/code/deprecated/core-server/package.json index 7e59f7d2755..4bdb1aa5068 100644 --- a/code/deprecated/core-server/package.json +++ b/code/deprecated/core-server/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/core-server", - "version": "8.5.0-alpha.5", + "version": "8.5.0-alpha.6", "description": "Storybook framework-agnostic API", "keywords": [ "storybook" diff --git a/code/deprecated/csf-tools/package.json b/code/deprecated/csf-tools/package.json index 96200310983..1d23fae6dce 100644 --- a/code/deprecated/csf-tools/package.json +++ b/code/deprecated/csf-tools/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/csf-tools", - "version": "8.5.0-alpha.5", + "version": "8.5.0-alpha.6", "description": "Parse and manipulate CSF and Storybook config files", "keywords": [ "storybook" diff --git a/code/deprecated/docs-tools/package.json b/code/deprecated/docs-tools/package.json index 8bdf3ca12be..4794a66339a 100644 --- a/code/deprecated/docs-tools/package.json +++ b/code/deprecated/docs-tools/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/docs-tools", - "version": "8.5.0-alpha.5", + "version": "8.5.0-alpha.6", "description": "Shared utility functions for frameworks to implement docs", "keywords": [ "storybook" diff --git a/code/deprecated/manager-api/package.json b/code/deprecated/manager-api/package.json index ce8a5a5535a..6c122cc047a 100644 --- a/code/deprecated/manager-api/package.json +++ b/code/deprecated/manager-api/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/manager-api", - "version": "8.5.0-alpha.5", + "version": "8.5.0-alpha.6", "description": "Core Storybook Manager API & Context", "keywords": [ "storybook" diff --git a/code/deprecated/manager/package.json b/code/deprecated/manager/package.json index 1b48f69f238..b3198f2fed1 100644 --- a/code/deprecated/manager/package.json +++ b/code/deprecated/manager/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/manager", - "version": "8.5.0-alpha.5", + "version": "8.5.0-alpha.6", "description": "Core Storybook UI", "keywords": [ "storybook" diff --git a/code/deprecated/node-logger/package.json b/code/deprecated/node-logger/package.json index 58df94c5a5d..a00ac6cba86 100644 --- a/code/deprecated/node-logger/package.json +++ b/code/deprecated/node-logger/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/node-logger", - "version": "8.5.0-alpha.5", + "version": "8.5.0-alpha.6", "description": "", "keywords": [ "storybook" diff --git a/code/deprecated/preview-api/package.json b/code/deprecated/preview-api/package.json index c3e0ecec2ea..7b6344e9243 100644 --- a/code/deprecated/preview-api/package.json +++ b/code/deprecated/preview-api/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preview-api", - "version": "8.5.0-alpha.5", + "version": "8.5.0-alpha.6", "description": "", "keywords": [ "storybook" diff --git a/code/deprecated/preview/package.json b/code/deprecated/preview/package.json index 672e88b6624..bcc679f7c7c 100644 --- a/code/deprecated/preview/package.json +++ b/code/deprecated/preview/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preview", - "version": "8.5.0-alpha.5", + "version": "8.5.0-alpha.6", "description": "", "keywords": [ "storybook" diff --git a/code/deprecated/router/package.json b/code/deprecated/router/package.json index f83ff057d18..55c08302482 100644 --- a/code/deprecated/router/package.json +++ b/code/deprecated/router/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/router", - "version": "8.5.0-alpha.5", + "version": "8.5.0-alpha.6", "description": "Core Storybook Router", "keywords": [ "storybook" diff --git a/code/deprecated/telemetry/package.json b/code/deprecated/telemetry/package.json index f47e45db81e..c0017ed169b 100644 --- a/code/deprecated/telemetry/package.json +++ b/code/deprecated/telemetry/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/telemetry", - "version": "8.5.0-alpha.5", + "version": "8.5.0-alpha.6", "description": "Telemetry logging for crash reports and usage statistics", "keywords": [ "storybook" diff --git a/code/deprecated/theming/package.json b/code/deprecated/theming/package.json index 343c829930a..5d78c240576 100644 --- a/code/deprecated/theming/package.json +++ b/code/deprecated/theming/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/theming", - "version": "8.5.0-alpha.5", + "version": "8.5.0-alpha.6", "description": "Core Storybook Components", "keywords": [ "storybook" diff --git a/code/deprecated/types/package.json b/code/deprecated/types/package.json index a8f24826c94..7b112c6c6bb 100644 --- a/code/deprecated/types/package.json +++ b/code/deprecated/types/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/types", - "version": "8.5.0-alpha.5", + "version": "8.5.0-alpha.6", "description": "Core Storybook TS Types", "keywords": [ "storybook" diff --git a/code/frameworks/angular/package.json b/code/frameworks/angular/package.json index e55efba3a14..72732ddb55f 100644 --- a/code/frameworks/angular/package.json +++ b/code/frameworks/angular/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/angular", - "version": "8.5.0-alpha.5", + "version": "8.5.0-alpha.6", "description": "Storybook for Angular: Develop Angular components in isolation with hot reloading.", "keywords": [ "storybook", diff --git a/code/frameworks/ember/package.json b/code/frameworks/ember/package.json index 3dba5c39315..01e64d4a86a 100644 --- a/code/frameworks/ember/package.json +++ b/code/frameworks/ember/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/ember", - "version": "8.5.0-alpha.5", + "version": "8.5.0-alpha.6", "description": "Storybook for Ember: Develop Ember Component in isolation with Hot Reloading.", "homepage": "https://github.com/storybookjs/storybook/tree/next/code/frameworks/ember", "bugs": { diff --git a/code/frameworks/experimental-nextjs-vite/package.json b/code/frameworks/experimental-nextjs-vite/package.json index b7ee9fe02f5..4d7ae6ccbd7 100644 --- a/code/frameworks/experimental-nextjs-vite/package.json +++ b/code/frameworks/experimental-nextjs-vite/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/experimental-nextjs-vite", - "version": "8.5.0-alpha.5", + "version": "8.5.0-alpha.6", "description": "Storybook for Next.js and Vite", "keywords": [ "storybook", diff --git a/code/frameworks/html-vite/package.json b/code/frameworks/html-vite/package.json index 02e6cc39701..186de8a9a06 100644 --- a/code/frameworks/html-vite/package.json +++ b/code/frameworks/html-vite/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/html-vite", - "version": "8.5.0-alpha.5", + "version": "8.5.0-alpha.6", "description": "Storybook for HTML and Vite: Develop HTML in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/html-webpack5/package.json b/code/frameworks/html-webpack5/package.json index 1d02e06695d..2b6847574d6 100644 --- a/code/frameworks/html-webpack5/package.json +++ b/code/frameworks/html-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/html-webpack5", - "version": "8.5.0-alpha.5", + "version": "8.5.0-alpha.6", "description": "Storybook for HTML: View HTML snippets in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/nextjs/package.json b/code/frameworks/nextjs/package.json index fbb3748e70c..9a6d0862d4e 100644 --- a/code/frameworks/nextjs/package.json +++ b/code/frameworks/nextjs/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/nextjs", - "version": "8.5.0-alpha.5", + "version": "8.5.0-alpha.6", "description": "Storybook for Next.js", "keywords": [ "storybook", diff --git a/code/frameworks/preact-vite/package.json b/code/frameworks/preact-vite/package.json index 19bdff40cdc..16c7d0d0413 100644 --- a/code/frameworks/preact-vite/package.json +++ b/code/frameworks/preact-vite/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preact-vite", - "version": "8.5.0-alpha.5", + "version": "8.5.0-alpha.6", "description": "Storybook for Preact and Vite: Develop Preact components in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/preact-webpack5/package.json b/code/frameworks/preact-webpack5/package.json index 4e849040fe9..8b737c4b77a 100644 --- a/code/frameworks/preact-webpack5/package.json +++ b/code/frameworks/preact-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preact-webpack5", - "version": "8.5.0-alpha.5", + "version": "8.5.0-alpha.6", "description": "Storybook for Preact: Develop Preact Component in isolation.", "keywords": [ "storybook" diff --git a/code/frameworks/react-native-web-vite/package.json b/code/frameworks/react-native-web-vite/package.json index 8fb49dd2eb6..dac160b4bcd 100644 --- a/code/frameworks/react-native-web-vite/package.json +++ b/code/frameworks/react-native-web-vite/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/react-native-web-vite", - "version": "8.5.0-alpha.5", + "version": "8.5.0-alpha.6", "description": "Develop react-native components an isolated web environment with hot reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/react-vite/package.json b/code/frameworks/react-vite/package.json index e1e3d3e6f60..440defbff76 100644 --- a/code/frameworks/react-vite/package.json +++ b/code/frameworks/react-vite/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/react-vite", - "version": "8.5.0-alpha.5", + "version": "8.5.0-alpha.6", "description": "Storybook for React and Vite: Develop React components in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/react-webpack5/package.json b/code/frameworks/react-webpack5/package.json index f2771dea4da..3776d0adcd7 100644 --- a/code/frameworks/react-webpack5/package.json +++ b/code/frameworks/react-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/react-webpack5", - "version": "8.5.0-alpha.5", + "version": "8.5.0-alpha.6", "description": "Storybook for React: Develop React Component in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/server-webpack5/package.json b/code/frameworks/server-webpack5/package.json index de5240830e5..b9d1fda5e94 100644 --- a/code/frameworks/server-webpack5/package.json +++ b/code/frameworks/server-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/server-webpack5", - "version": "8.5.0-alpha.5", + "version": "8.5.0-alpha.6", "description": "Storybook for Server: View HTML snippets from a server in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/svelte-vite/package.json b/code/frameworks/svelte-vite/package.json index 28e01c6c4b7..d9c01fab3e6 100644 --- a/code/frameworks/svelte-vite/package.json +++ b/code/frameworks/svelte-vite/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/svelte-vite", - "version": "8.5.0-alpha.5", + "version": "8.5.0-alpha.6", "description": "Storybook for Svelte and Vite: Develop Svelte components in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/svelte-webpack5/package.json b/code/frameworks/svelte-webpack5/package.json index 6f794008a8b..cc3e3a0cdbb 100644 --- a/code/frameworks/svelte-webpack5/package.json +++ b/code/frameworks/svelte-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/svelte-webpack5", - "version": "8.5.0-alpha.5", + "version": "8.5.0-alpha.6", "description": "Storybook for Svelte: Develop Svelte Component in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/sveltekit/package.json b/code/frameworks/sveltekit/package.json index e25957e7564..a4be4962f70 100644 --- a/code/frameworks/sveltekit/package.json +++ b/code/frameworks/sveltekit/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/sveltekit", - "version": "8.5.0-alpha.5", + "version": "8.5.0-alpha.6", "description": "Storybook for SvelteKit", "keywords": [ "storybook", diff --git a/code/frameworks/vue3-vite/package.json b/code/frameworks/vue3-vite/package.json index 135244234c0..48545c2b449 100644 --- a/code/frameworks/vue3-vite/package.json +++ b/code/frameworks/vue3-vite/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/vue3-vite", - "version": "8.5.0-alpha.5", + "version": "8.5.0-alpha.6", "description": "Storybook for Vue3 and Vite: Develop Vue3 components in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/vue3-webpack5/package.json b/code/frameworks/vue3-webpack5/package.json index 60eaf28db9a..07a20587899 100644 --- a/code/frameworks/vue3-webpack5/package.json +++ b/code/frameworks/vue3-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/vue3-webpack5", - "version": "8.5.0-alpha.5", + "version": "8.5.0-alpha.6", "description": "Storybook for Vue 3: Develop Vue 3 Components in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/web-components-vite/package.json b/code/frameworks/web-components-vite/package.json index c6fdc46e45d..17f63875e7b 100644 --- a/code/frameworks/web-components-vite/package.json +++ b/code/frameworks/web-components-vite/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/web-components-vite", - "version": "8.5.0-alpha.5", + "version": "8.5.0-alpha.6", "description": "Storybook for web-components and Vite: Develop Web Components in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/web-components-webpack5/package.json b/code/frameworks/web-components-webpack5/package.json index 6bcd4934e9d..3bf79b6b3d5 100644 --- a/code/frameworks/web-components-webpack5/package.json +++ b/code/frameworks/web-components-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/web-components-webpack5", - "version": "8.5.0-alpha.5", + "version": "8.5.0-alpha.6", "description": "Storybook for web-components: View web components snippets in isolation with Hot Reloading.", "keywords": [ "lit", diff --git a/code/lib/blocks/package.json b/code/lib/blocks/package.json index 7b80cd964f1..12d2051d741 100644 --- a/code/lib/blocks/package.json +++ b/code/lib/blocks/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/blocks", - "version": "8.5.0-alpha.5", + "version": "8.5.0-alpha.6", "description": "Storybook Doc Blocks", "keywords": [ "storybook" diff --git a/code/lib/cli-sb/package.json b/code/lib/cli-sb/package.json index ee0ba499899..acce3f60501 100644 --- a/code/lib/cli-sb/package.json +++ b/code/lib/cli-sb/package.json @@ -1,6 +1,6 @@ { "name": "sb", - "version": "8.5.0-alpha.5", + "version": "8.5.0-alpha.6", "description": "Storybook CLI", "keywords": [ "storybook" diff --git a/code/lib/cli-storybook/package.json b/code/lib/cli-storybook/package.json index 7d48dae7c3e..74d7a05e15d 100644 --- a/code/lib/cli-storybook/package.json +++ b/code/lib/cli-storybook/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/cli", - "version": "8.5.0-alpha.5", + "version": "8.5.0-alpha.6", "description": "Storybook CLI", "keywords": [ "storybook" diff --git a/code/lib/cli/package.json b/code/lib/cli/package.json index 16cb412dd2b..f925bd087b2 100644 --- a/code/lib/cli/package.json +++ b/code/lib/cli/package.json @@ -1,6 +1,6 @@ { "name": "storybook", - "version": "8.5.0-alpha.5", + "version": "8.5.0-alpha.6", "description": "Storybook's CLI - install, dev, build, upgrade, and more", "keywords": [ "cli", diff --git a/code/lib/codemod/package.json b/code/lib/codemod/package.json index d52676c8a54..f24d5674f1d 100644 --- a/code/lib/codemod/package.json +++ b/code/lib/codemod/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/codemod", - "version": "8.5.0-alpha.5", + "version": "8.5.0-alpha.6", "description": "A collection of codemod scripts written with JSCodeshift", "keywords": [ "storybook" diff --git a/code/lib/core-webpack/package.json b/code/lib/core-webpack/package.json index c70a175fca9..7ba143ba76c 100644 --- a/code/lib/core-webpack/package.json +++ b/code/lib/core-webpack/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/core-webpack", - "version": "8.5.0-alpha.5", + "version": "8.5.0-alpha.6", "description": "Storybook framework-agnostic API", "keywords": [ "storybook" diff --git a/code/lib/create-storybook/package.json b/code/lib/create-storybook/package.json index 4dd3aa01efe..4aabf513416 100644 --- a/code/lib/create-storybook/package.json +++ b/code/lib/create-storybook/package.json @@ -1,6 +1,6 @@ { "name": "create-storybook", - "version": "8.5.0-alpha.5", + "version": "8.5.0-alpha.6", "description": "Initialize Storybook into your project", "homepage": "https://github.com/storybookjs/storybook/tree/next/code/lib/create-storybook", "bugs": { diff --git a/code/lib/csf-plugin/package.json b/code/lib/csf-plugin/package.json index 9b87763fbe6..b42db5784cd 100644 --- a/code/lib/csf-plugin/package.json +++ b/code/lib/csf-plugin/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/csf-plugin", - "version": "8.5.0-alpha.5", + "version": "8.5.0-alpha.6", "description": "Enrich CSF files via static analysis", "keywords": [ "storybook" diff --git a/code/lib/instrumenter/package.json b/code/lib/instrumenter/package.json index bda21c3fae8..71da1cd39cf 100644 --- a/code/lib/instrumenter/package.json +++ b/code/lib/instrumenter/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/instrumenter", - "version": "8.5.0-alpha.5", + "version": "8.5.0-alpha.6", "description": "", "keywords": [ "storybook" diff --git a/code/lib/react-dom-shim/package.json b/code/lib/react-dom-shim/package.json index 30791faf318..82b22e60366 100644 --- a/code/lib/react-dom-shim/package.json +++ b/code/lib/react-dom-shim/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/react-dom-shim", - "version": "8.5.0-alpha.5", + "version": "8.5.0-alpha.6", "description": "", "keywords": [ "storybook" diff --git a/code/lib/source-loader/package.json b/code/lib/source-loader/package.json index 14585186deb..6c6c36c8503 100644 --- a/code/lib/source-loader/package.json +++ b/code/lib/source-loader/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/source-loader", - "version": "8.5.0-alpha.5", + "version": "8.5.0-alpha.6", "description": "Source loader", "keywords": [ "lib", diff --git a/code/lib/test/package.json b/code/lib/test/package.json index 63f0f751a15..62d3358335e 100644 --- a/code/lib/test/package.json +++ b/code/lib/test/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/test", - "version": "8.5.0-alpha.5", + "version": "8.5.0-alpha.6", "description": "", "keywords": [ "storybook" diff --git a/code/package.json b/code/package.json index 7bb97653cb6..ad0559b1ba1 100644 --- a/code/package.json +++ b/code/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/root", - "version": "8.5.0-alpha.5", + "version": "8.5.0-alpha.6", "private": true, "description": "Storybook root", "homepage": "https://storybook.js.org/", @@ -293,6 +293,5 @@ "Dependency Upgrades" ] ] - }, - "deferredNextVersion": "8.5.0-alpha.6" + } } diff --git a/code/presets/create-react-app/package.json b/code/presets/create-react-app/package.json index 1f91f091664..11b3a32f3a5 100644 --- a/code/presets/create-react-app/package.json +++ b/code/presets/create-react-app/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preset-create-react-app", - "version": "8.5.0-alpha.5", + "version": "8.5.0-alpha.6", "description": "Storybook for Create React App preset", "keywords": [ "storybook" diff --git a/code/presets/html-webpack/package.json b/code/presets/html-webpack/package.json index 53fc9f04854..f3417cf69c2 100644 --- a/code/presets/html-webpack/package.json +++ b/code/presets/html-webpack/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preset-html-webpack", - "version": "8.5.0-alpha.5", + "version": "8.5.0-alpha.6", "description": "Storybook for HTML: View HTML snippets in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/presets/preact-webpack/package.json b/code/presets/preact-webpack/package.json index fb9c63dafce..f637b8f7a12 100644 --- a/code/presets/preact-webpack/package.json +++ b/code/presets/preact-webpack/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preset-preact-webpack", - "version": "8.5.0-alpha.5", + "version": "8.5.0-alpha.6", "description": "Storybook for Preact: Develop Preact Component in isolation.", "keywords": [ "storybook" diff --git a/code/presets/react-webpack/package.json b/code/presets/react-webpack/package.json index 4394c48e6ca..20e1b82e8cd 100644 --- a/code/presets/react-webpack/package.json +++ b/code/presets/react-webpack/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preset-react-webpack", - "version": "8.5.0-alpha.5", + "version": "8.5.0-alpha.6", "description": "Storybook for React: Develop React Component in isolation with Hot Reloading", "keywords": [ "storybook" diff --git a/code/presets/server-webpack/package.json b/code/presets/server-webpack/package.json index 7435fe28e24..12aeb285318 100644 --- a/code/presets/server-webpack/package.json +++ b/code/presets/server-webpack/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preset-server-webpack", - "version": "8.5.0-alpha.5", + "version": "8.5.0-alpha.6", "description": "Storybook for Server: View HTML snippets from a server in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/presets/svelte-webpack/package.json b/code/presets/svelte-webpack/package.json index e588e50fe2f..d49e9829082 100644 --- a/code/presets/svelte-webpack/package.json +++ b/code/presets/svelte-webpack/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preset-svelte-webpack", - "version": "8.5.0-alpha.5", + "version": "8.5.0-alpha.6", "description": "Storybook for Svelte: Develop Svelte Component in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/presets/vue3-webpack/package.json b/code/presets/vue3-webpack/package.json index dbc4327b6a8..636bcc89fe7 100644 --- a/code/presets/vue3-webpack/package.json +++ b/code/presets/vue3-webpack/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preset-vue3-webpack", - "version": "8.5.0-alpha.5", + "version": "8.5.0-alpha.6", "description": "Storybook for Vue 3: Develop Vue 3 Components in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/renderers/html/package.json b/code/renderers/html/package.json index 1056fd29e28..ff6f4710590 100644 --- a/code/renderers/html/package.json +++ b/code/renderers/html/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/html", - "version": "8.5.0-alpha.5", + "version": "8.5.0-alpha.6", "description": "Storybook HTML renderer", "keywords": [ "storybook" diff --git a/code/renderers/preact/package.json b/code/renderers/preact/package.json index 94a9b413e3b..b4878053273 100644 --- a/code/renderers/preact/package.json +++ b/code/renderers/preact/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preact", - "version": "8.5.0-alpha.5", + "version": "8.5.0-alpha.6", "description": "Storybook Preact renderer", "keywords": [ "storybook" diff --git a/code/renderers/react/package.json b/code/renderers/react/package.json index fcd2743ea5b..122722424ab 100644 --- a/code/renderers/react/package.json +++ b/code/renderers/react/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/react", - "version": "8.5.0-alpha.5", + "version": "8.5.0-alpha.6", "description": "Storybook React renderer", "keywords": [ "storybook" diff --git a/code/renderers/server/package.json b/code/renderers/server/package.json index ac510645df5..48f1dcce4be 100644 --- a/code/renderers/server/package.json +++ b/code/renderers/server/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/server", - "version": "8.5.0-alpha.5", + "version": "8.5.0-alpha.6", "description": "Storybook Server renderer", "keywords": [ "storybook" diff --git a/code/renderers/svelte/package.json b/code/renderers/svelte/package.json index 86b11f8be62..da3aa086a60 100644 --- a/code/renderers/svelte/package.json +++ b/code/renderers/svelte/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/svelte", - "version": "8.5.0-alpha.5", + "version": "8.5.0-alpha.6", "description": "Storybook Svelte renderer", "keywords": [ "storybook" diff --git a/code/renderers/vue3/package.json b/code/renderers/vue3/package.json index f97c9823469..23df8233538 100644 --- a/code/renderers/vue3/package.json +++ b/code/renderers/vue3/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/vue3", - "version": "8.5.0-alpha.5", + "version": "8.5.0-alpha.6", "description": "Storybook Vue 3 renderer", "keywords": [ "storybook" diff --git a/code/renderers/web-components/package.json b/code/renderers/web-components/package.json index ebf13b0cd95..aa866f7ff91 100644 --- a/code/renderers/web-components/package.json +++ b/code/renderers/web-components/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/web-components", - "version": "8.5.0-alpha.5", + "version": "8.5.0-alpha.6", "description": "Storybook web-components renderer", "keywords": [ "lit", From dbdd73a470a12243d1a0990f9bc3acfca26f6202 Mon Sep 17 00:00:00 2001 From: Norbert de Langen <ndelangen@me.com> Date: Mon, 18 Nov 2024 14:24:15 +0100 Subject: [PATCH 074/101] move stories into the same index ancestor --- .../src/manager/components/sidebar/FileSearchList.stories.tsx | 1 + .../components/sidebar/FileSearchListSkeleton.stories.tsx | 1 + .../src/manager/components/sidebar/FileSearchModal.stories.tsx | 1 + code/core/src/manager/components/sidebar/FilterToggle.stories.ts | 1 + code/core/src/manager/components/sidebar/IconSymbols.stories.tsx | 1 + .../src/manager/components/sidebar/SidebarBottom.stories.tsx | 1 + code/core/src/manager/components/sidebar/TagsFilter.stories.tsx | 1 + .../src/manager/components/sidebar/TagsFilterPanel.stories.tsx | 1 + .../src/manager/components/sidebar/TestingModule.stories.tsx | 1 + 9 files changed, 9 insertions(+) diff --git a/code/core/src/manager/components/sidebar/FileSearchList.stories.tsx b/code/core/src/manager/components/sidebar/FileSearchList.stories.tsx index 2c5ec140ee8..7388bf3cb4a 100644 --- a/code/core/src/manager/components/sidebar/FileSearchList.stories.tsx +++ b/code/core/src/manager/components/sidebar/FileSearchList.stories.tsx @@ -5,6 +5,7 @@ import { FileSearchList } from './FileSearchList'; const meta = { component: FileSearchList, + title: 'Sidebar/FileSearchList', args: { onNewStory: fn(), }, diff --git a/code/core/src/manager/components/sidebar/FileSearchListSkeleton.stories.tsx b/code/core/src/manager/components/sidebar/FileSearchListSkeleton.stories.tsx index eaeaca9c0f7..d8d38eeb688 100644 --- a/code/core/src/manager/components/sidebar/FileSearchListSkeleton.stories.tsx +++ b/code/core/src/manager/components/sidebar/FileSearchListSkeleton.stories.tsx @@ -4,6 +4,7 @@ import { FileSearchListLoadingSkeleton } from './FileSearchListSkeleton'; const meta = { component: FileSearchListLoadingSkeleton, + title: 'Sidebar/FileSearchListLoadingSkeleton', } satisfies Meta<typeof FileSearchListLoadingSkeleton>; export default meta; diff --git a/code/core/src/manager/components/sidebar/FileSearchModal.stories.tsx b/code/core/src/manager/components/sidebar/FileSearchModal.stories.tsx index a2a10005b88..c9e1790ef11 100644 --- a/code/core/src/manager/components/sidebar/FileSearchModal.stories.tsx +++ b/code/core/src/manager/components/sidebar/FileSearchModal.stories.tsx @@ -8,6 +8,7 @@ import { FileSearchModal } from './FileSearchModal'; const meta = { component: FileSearchModal, + title: 'Sidebar/FileSearchModal', args: { open: true, setError: fn(), diff --git a/code/core/src/manager/components/sidebar/FilterToggle.stories.ts b/code/core/src/manager/components/sidebar/FilterToggle.stories.ts index 6710af80c37..075b8c94dc9 100644 --- a/code/core/src/manager/components/sidebar/FilterToggle.stories.ts +++ b/code/core/src/manager/components/sidebar/FilterToggle.stories.ts @@ -4,6 +4,7 @@ import { FilterToggle } from './FilterToggle'; export default { component: FilterToggle, + title: 'Sidebar/FilterToggle', args: { active: false, onClick: fn(), diff --git a/code/core/src/manager/components/sidebar/IconSymbols.stories.tsx b/code/core/src/manager/components/sidebar/IconSymbols.stories.tsx index 76136230d3d..143c08932d3 100644 --- a/code/core/src/manager/components/sidebar/IconSymbols.stories.tsx +++ b/code/core/src/manager/components/sidebar/IconSymbols.stories.tsx @@ -4,6 +4,7 @@ import { IconSymbols } from './IconSymbols'; const meta = { component: IconSymbols, + title: 'Sidebar/IconSymbols', } satisfies Meta<typeof IconSymbols>; export default meta; diff --git a/code/core/src/manager/components/sidebar/SidebarBottom.stories.tsx b/code/core/src/manager/components/sidebar/SidebarBottom.stories.tsx index 444f0c185db..e09d0cafb62 100644 --- a/code/core/src/manager/components/sidebar/SidebarBottom.stories.tsx +++ b/code/core/src/manager/components/sidebar/SidebarBottom.stories.tsx @@ -42,6 +42,7 @@ const managerContext: any = { export default { component: SidebarBottomBase, + title: 'Sidebar/SidebarBottom', args: { isDevelopment: true, diff --git a/code/core/src/manager/components/sidebar/TagsFilter.stories.tsx b/code/core/src/manager/components/sidebar/TagsFilter.stories.tsx index 4050986a91f..89236acda68 100644 --- a/code/core/src/manager/components/sidebar/TagsFilter.stories.tsx +++ b/code/core/src/manager/components/sidebar/TagsFilter.stories.tsx @@ -5,6 +5,7 @@ import { TagsFilter } from './TagsFilter'; const meta = { component: TagsFilter, + title: 'Sidebar/TagsFilter', tags: ['haha'], args: { api: { diff --git a/code/core/src/manager/components/sidebar/TagsFilterPanel.stories.tsx b/code/core/src/manager/components/sidebar/TagsFilterPanel.stories.tsx index 999c5f3fdb0..0602d0ed7a4 100644 --- a/code/core/src/manager/components/sidebar/TagsFilterPanel.stories.tsx +++ b/code/core/src/manager/components/sidebar/TagsFilterPanel.stories.tsx @@ -5,6 +5,7 @@ import { TagsFilterPanel } from './TagsFilterPanel'; const meta = { component: TagsFilterPanel, + title: 'Sidebar/TagsFilterPanel', args: { toggleTag: fn(), api: { diff --git a/code/core/src/manager/components/sidebar/TestingModule.stories.tsx b/code/core/src/manager/components/sidebar/TestingModule.stories.tsx index 3278254c3b1..3ad57e354c1 100644 --- a/code/core/src/manager/components/sidebar/TestingModule.stories.tsx +++ b/code/core/src/manager/components/sidebar/TestingModule.stories.tsx @@ -76,6 +76,7 @@ const managerContext: any = { const meta = { component: TestingModule, + title: 'Sidebar/TestingModule', args: { testProviders, errorCount: 0, From 28730641a68d318d2c7d333e744b1401703890c8 Mon Sep 17 00:00:00 2001 From: Jeppe Reinhold <jeppe@reinhold.is> Date: Mon, 18 Nov 2024 14:58:23 +0100 Subject: [PATCH 075/101] enable addon-test context menu --- code/addons/test/src/manager.tsx | 5 ----- code/core/src/manager-api/modules/experimental_testmodule.ts | 3 +-- 2 files changed, 1 insertion(+), 7 deletions(-) diff --git a/code/addons/test/src/manager.tsx b/code/addons/test/src/manager.tsx index 9a3d9312fd3..db31ac1f287 100644 --- a/code/addons/test/src/manager.tsx +++ b/code/addons/test/src/manager.tsx @@ -88,11 +88,6 @@ addons.register(ADDON_ID, (api) => { return null; } - // TODO: remove this... right now: always returns false, to disable the feature - if (Date.now()) { - return false; - } - return <ContextMenuItem context={context} state={state} ListItem={ListItem} />; }, diff --git a/code/core/src/manager-api/modules/experimental_testmodule.ts b/code/core/src/manager-api/modules/experimental_testmodule.ts index b16956be7a8..7eb6203e972 100644 --- a/code/core/src/manager-api/modules/experimental_testmodule.ts +++ b/code/core/src/manager-api/modules/experimental_testmodule.ts @@ -41,7 +41,7 @@ export type SubAPI = { cancelTestProvider(id: TestProviderId): void; }; -export const init: ModuleFn = ({ store, fullAPI }) => { +export const init: ModuleFn<SubAPI, SubState> = ({ store, fullAPI }) => { const state: SubState = { testProviders: store.getState().testProviders || {}, }; @@ -194,6 +194,5 @@ export const init: ModuleFn = ({ store, fullAPI }) => { store.setState({ testProviders: initialState }, { persistence: 'session' }); }; - return { init: initModule, state, api }; }; From 3d70d51a52a729d206362ab4fd82de2a683415db Mon Sep 17 00:00:00 2001 From: Norbert de Langen <ndelangen@me.com> Date: Mon, 18 Nov 2024 15:52:26 +0100 Subject: [PATCH 076/101] rename testproviders to testProviders & move RelativeTime component --- code/addons/test/src/components/ContextMenuItem.tsx | 2 +- code/addons/test/src/{ => components}/RelativeTime.tsx | 2 +- code/addons/test/src/manager.tsx | 2 +- code/core/src/manager-api/root.tsx | 8 ++++---- 4 files changed, 7 insertions(+), 7 deletions(-) rename code/addons/test/src/{ => components}/RelativeTime.tsx (93%) diff --git a/code/addons/test/src/components/ContextMenuItem.tsx b/code/addons/test/src/components/ContextMenuItem.tsx index 7640c0018bb..8cece6004c5 100644 --- a/code/addons/test/src/components/ContextMenuItem.tsx +++ b/code/addons/test/src/components/ContextMenuItem.tsx @@ -14,9 +14,9 @@ import { type API_HashEntry, type Addon_TestProviderState } from 'storybook/inte import { PlayHollowIcon, StopAltHollowIcon } from '@storybook/icons'; -import { RelativeTime } from '../RelativeTime'; import { TEST_PROVIDER_ID } from '../constants'; import type { TestResult } from '../node/reporter'; +import { RelativeTime } from './RelativeTime'; export const ContextMenuItem: FC<{ context: API_HashEntry; diff --git a/code/addons/test/src/RelativeTime.tsx b/code/addons/test/src/components/RelativeTime.tsx similarity index 93% rename from code/addons/test/src/RelativeTime.tsx rename to code/addons/test/src/components/RelativeTime.tsx index 9225b29fe2c..d643960b06e 100644 --- a/code/addons/test/src/RelativeTime.tsx +++ b/code/addons/test/src/components/RelativeTime.tsx @@ -1,6 +1,6 @@ import { useEffect, useState } from 'react'; -import { getRelativeTimeString } from './manager'; +import { getRelativeTimeString } from '../manager'; export const RelativeTime = ({ timestamp, testCount }: { timestamp: Date; testCount: number }) => { const [relativeTimeString, setRelativeTimeString] = useState(null); diff --git a/code/addons/test/src/manager.tsx b/code/addons/test/src/manager.tsx index 9a3d9312fd3..618d9a0aa19 100644 --- a/code/addons/test/src/manager.tsx +++ b/code/addons/test/src/manager.tsx @@ -14,10 +14,10 @@ import { import { EyeIcon, PlayHollowIcon, StopAltHollowIcon } from '@storybook/icons'; -import { RelativeTime } from './RelativeTime'; import { ContextMenuItem } from './components/ContextMenuItem'; import { GlobalErrorModal } from './components/GlobalErrorModal'; import { Panel } from './components/Panel'; +import { RelativeTime } from './components/RelativeTime'; import { Title } from './components/Title'; import { ADDON_ID, PANEL_ID, TEST_PROVIDER_ID } from './constants'; import type { TestResult } from './node/reporter'; diff --git a/code/core/src/manager-api/root.tsx b/code/core/src/manager-api/root.tsx index a314e9372eb..c2784329ab8 100644 --- a/code/core/src/manager-api/root.tsx +++ b/code/core/src/manager-api/root.tsx @@ -50,7 +50,7 @@ import { noArrayMerge } from './lib/merge'; import type { ModuleFn } from './lib/types'; import * as addons from './modules/addons'; import * as channel from './modules/channel'; -import * as testproviders from './modules/experimental_testmodule'; +import * as testProviders from './modules/experimental_testmodule'; import * as globals from './modules/globals'; import * as layout from './modules/layout'; import * as notifications from './modules/notifications'; @@ -80,7 +80,7 @@ export type State = layout.SubState & stories.SubState & refs.SubState & notifications.SubState & - testproviders.SubState & + testProviders.SubState & version.SubState & url.SubState & shortcuts.SubState & @@ -100,7 +100,7 @@ export type API = addons.SubAPI & globals.SubAPI & layout.SubAPI & notifications.SubAPI & - testproviders.SubAPI & + testProviders.SubAPI & shortcuts.SubAPI & settings.SubAPI & version.SubAPI & @@ -181,7 +181,7 @@ class ManagerProvider extends Component<ManagerProviderProps, State> { addons, layout, notifications, - testproviders, + testProviders, settings, shortcuts, stories, From adf61801704e3a99e09fa133caec28d7aba19729 Mon Sep 17 00:00:00 2001 From: Norbert de Langen <ndelangen@me.com> Date: Mon, 18 Nov 2024 16:18:51 +0100 Subject: [PATCH 077/101] add interaction component test --- .../components/sidebar/ContextMenu.tsx | 1 + .../components/sidebar/Tree.stories.tsx | 77 ++++++++++++++++++- 2 files changed, 75 insertions(+), 3 deletions(-) diff --git a/code/core/src/manager/components/sidebar/ContextMenu.tsx b/code/core/src/manager/components/sidebar/ContextMenu.tsx index 3348da2657b..8134ac10757 100644 --- a/code/core/src/manager/components/sidebar/ContextMenu.tsx +++ b/code/core/src/manager/components/sidebar/ContextMenu.tsx @@ -58,6 +58,7 @@ export const useContextMenu = (context: API_HashEntry, links: Link[], api: API) data-displayed={isOpen ? 'on' : 'off'} closeOnOutsideClick placement="bottom-end" + data-testid="context-menu" onVisibleChange={(visible) => { if (!visible) { handlers.onClose(); diff --git a/code/core/src/manager/components/sidebar/Tree.stories.tsx b/code/core/src/manager/components/sidebar/Tree.stories.tsx index fec1ec64805..38a35e16be3 100644 --- a/code/core/src/manager/components/sidebar/Tree.stories.tsx +++ b/code/core/src/manager/components/sidebar/Tree.stories.tsx @@ -2,7 +2,7 @@ import React, { useState } from 'react'; import type { Meta, StoryObj } from '@storybook/react'; -import { expect, fn, within } from '@storybook/test'; +import { expect, fn, userEvent, within } from '@storybook/test'; import { type ComponentEntry, type IndexHash, ManagerContext } from '@storybook/core/manager-api'; @@ -19,12 +19,45 @@ const managerContext: any = { autodocs: 'tag', docsMode: false, }, - testProviders: {}, + testProviders: { + 'component-tests': { + type: 'experimental_TEST_PROVIDER', + id: 'component-tests', + render: () => 'Component tests', + contextMenu: () => <div>TEST_PROVIDER_CONTEXT_CONTENT</div>, + runnable: true, + watchable: true, + }, + 'visual-tests': { + type: 'experimental_TEST_PROVIDER', + id: 'visual-tests', + render: () => 'Visual tests', + contextMenu: () => null, + runnable: true, + }, + }, }, api: { on: fn().mockName('api::on'), off: fn().mockName('api::off'), - getElements: fn(() => ({})), + emit: fn().mockName('api::emit'), + getElements: fn(() => ({ + 'component-tests': { + type: 'experimental_TEST_PROVIDER', + id: 'component-tests', + render: () => 'Component tests', + contextMenu: () => <div>TEST_PROVIDER_CONTEXT_CONTENT</div>, + runnable: true, + watchable: true, + }, + 'visual-tests': { + type: 'experimental_TEST_PROVIDER', + id: 'visual-tests', + render: () => 'Visual tests', + contextMenu: () => null, + runnable: true, + }, + })), }, }; @@ -254,3 +287,41 @@ export const SkipToCanvasLinkFocused: Story = { await expect(link).toBeVisible(); }, }; + +// SkipToCanvas Link only shows on desktop widths +export const WithContextContent: Story = { + ...DocsOnlySingleStoryComponents, + parameters: { + chromatic: { viewports: [1280] }, + viewport: { + options: { + desktop: { + name: 'Desktop', + styles: { + width: '100%', + height: '100%', + }, + }, + }, + }, + }, + globals: { + viewport: { value: 'desktop' }, + }, + play: async ({ canvasElement }) => { + const screen = await within(canvasElement); + + const link = await screen.findByText('TooltipBuildList'); + await userEvent.hover(link); + + const contextButton = await screen.findByTestId('context-menu'); + await userEvent.click(contextButton); + + const body = await within(document.body); + + const tooltip = await body.findByTestId('tooltip'); + + await expect(tooltip).toBeVisible(); + expect(tooltip).toHaveTextContent('TEST_PROVIDER_CONTEXT_CONTENT'); + }, +}; From b6d53915cfaefde1d9c27952f449f26c74575f99 Mon Sep 17 00:00:00 2001 From: Michael Shilman <shilman@users.noreply.github.com> Date: Tue, 19 Nov 2024 01:16:50 +0800 Subject: [PATCH 078/101] RNW-Vite: Integrate with experimental-addon-test --- code/addons/test/src/postinstall.ts | 15 +++++++++++++-- .../react-native-web-vite/package.json | 8 +++++++- .../react-native-web-vite/src/preset.ts | 7 ++----- .../react-native-web-vite/src/vite-plugin.ts | 16 ++++++++++++++++ 4 files changed, 38 insertions(+), 8 deletions(-) create mode 100644 code/frameworks/react-native-web-vite/src/vite-plugin.ts diff --git a/code/addons/test/src/postinstall.ts b/code/addons/test/src/postinstall.ts index 90595b0e15d..fd9364250a2 100644 --- a/code/addons/test/src/postinstall.ts +++ b/code/addons/test/src/postinstall.ts @@ -453,6 +453,12 @@ const getVitestPluginInfo = (framework: string) => { frameworkPluginCall = 'storybookVuePlugin()'; } + if (framework === '@storybook/react-native-web-vite') { + frameworkPluginImport = + "import { storybookReactNativeWeb } from '@storybook/react-native-web-vite/vite-plugin';"; + frameworkPluginCall = 'storybookReactNativeWeb()'; + } + // spaces for file identation frameworkPluginImport = `\n${frameworkPluginImport}`; frameworkPluginDocs = frameworkPluginDocs ? `\n ${frameworkPluginDocs}` : ''; @@ -491,14 +497,19 @@ async function getStorybookInfo({ configDir, packageManager: pkgMgr }: Postinsta } const builderPackageJson = await fs.readFile( - `${typeof builder === 'string' ? builder : builder.name}/package.json`, + require.resolve( + path.join(typeof builder === 'string' ? builder : builder.name, 'package.json') + ), 'utf8' ); const builderPackageName = JSON.parse(builderPackageJson).name; let rendererPackageName: string | undefined; if (renderer) { - const rendererPackageJson = await fs.readFile(`${renderer}/package.json`, 'utf8'); + const rendererPackageJson = await fs.readFile( + require.resolve(path.join(renderer, 'package.json')), + 'utf8' + ); rendererPackageName = JSON.parse(rendererPackageJson).name; } diff --git a/code/frameworks/react-native-web-vite/package.json b/code/frameworks/react-native-web-vite/package.json index dac160b4bcd..2531f61a685 100644 --- a/code/frameworks/react-native-web-vite/package.json +++ b/code/frameworks/react-native-web-vite/package.json @@ -30,6 +30,11 @@ "types": "./dist/preset.d.ts", "require": "./dist/preset.js" }, + "./vite-plugin": { + "types": "./dist/vite-plugin.d.ts", + "import": "./dist/vite-plugin.mjs", + "require": "./dist/vite-plugin.js" + }, "./package.json": "./package.json" }, "main": "dist/index.js", @@ -75,7 +80,8 @@ "bundler": { "entries": [ "./src/index.ts", - "./src/preset.ts" + "./src/preset.ts", + "./src/vite-plugin.ts" ], "platform": "node" }, diff --git a/code/frameworks/react-native-web-vite/src/preset.ts b/code/frameworks/react-native-web-vite/src/preset.ts index e7a4a902bfd..852d69af2ce 100644 --- a/code/frameworks/react-native-web-vite/src/preset.ts +++ b/code/frameworks/react-native-web-vite/src/preset.ts @@ -1,15 +1,12 @@ // @ts-expect-error FIXME import { viteFinal as reactViteFinal } from '@storybook/react-vite/preset'; -import type { BabelOptions, Options as ReactOptions } from '@vitejs/plugin-react'; import react from '@vitejs/plugin-react'; import type { PluginOption } from 'vite'; import type { FrameworkOptions, StorybookConfig } from './types'; -function reactNativeWeb( - reactOptions: Omit<ReactOptions, 'babel'> & { babel?: BabelOptions } -): PluginOption { +export function reactNativeWeb(): PluginOption { return { name: 'vite:react-native-web', config(_userConfig, env) { @@ -80,7 +77,7 @@ export const viteFinal: StorybookConfig['viteFinal'] = async (config, options) = ...pluginReactOptions, }) ); - plugins.push(reactNativeWeb(pluginReactOptions)); + plugins.push(reactNativeWeb()); return reactConfig; }; diff --git a/code/frameworks/react-native-web-vite/src/vite-plugin.ts b/code/frameworks/react-native-web-vite/src/vite-plugin.ts new file mode 100644 index 00000000000..9b162509fef --- /dev/null +++ b/code/frameworks/react-native-web-vite/src/vite-plugin.ts @@ -0,0 +1,16 @@ +import react from '@vitejs/plugin-react'; + +import { reactNativeWeb } from './preset'; + +export const storybookReactNativeWeb = () => { + return [ + react({ + babel: { + babelrc: false, + configFile: false, + }, + jsxRuntime: 'automatic', + }), + reactNativeWeb(), + ]; +}; From 6ebbbacdd754772d526f771c8ed0970a37577ffb Mon Sep 17 00:00:00 2001 From: storybook-bot <32066757+storybook-bot@users.noreply.github.com> Date: Mon, 18 Nov 2024 18:12:16 +0000 Subject: [PATCH 079/101] Write changelog for 8.5.0-alpha.7 [skip ci] --- CHANGELOG.prerelease.md | 5 +++++ code/package.json | 3 ++- docs/versions/next.json | 2 +- 3 files changed, 8 insertions(+), 2 deletions(-) diff --git a/CHANGELOG.prerelease.md b/CHANGELOG.prerelease.md index c470d2578b9..e4c62d11412 100644 --- a/CHANGELOG.prerelease.md +++ b/CHANGELOG.prerelease.md @@ -1,3 +1,8 @@ +## 8.5.0-alpha.7 + +- CLI: Disable corepack auto pin behavior - [#29627](https://github.com/storybookjs/storybook/pull/29627), thanks @yannbf! +- RNW-Vite: Integrate with experimental-addon-test - [#29645](https://github.com/storybookjs/storybook/pull/29645), thanks @shilman! + ## 8.5.0-alpha.6 - CLI: Fix qwik init - [#29632](https://github.com/storybookjs/storybook/pull/29632), thanks @shilman! diff --git a/code/package.json b/code/package.json index ad0559b1ba1..3835aa20f9d 100644 --- a/code/package.json +++ b/code/package.json @@ -293,5 +293,6 @@ "Dependency Upgrades" ] ] - } + }, + "deferredNextVersion": "8.5.0-alpha.7" } diff --git a/docs/versions/next.json b/docs/versions/next.json index 5759d745349..0b082399cc7 100644 --- a/docs/versions/next.json +++ b/docs/versions/next.json @@ -1 +1 @@ -{"version":"8.5.0-alpha.6","info":{"plain":"- CLI: Fix qwik init - [#29632](https://github.com/storybookjs/storybook/pull/29632), thanks @shilman!\n- React Native Web: Add framework, CLI integration, sandboxes - [#29520](https://github.com/storybookjs/storybook/pull/29520), thanks @shilman!"}} +{"version":"8.5.0-alpha.7","info":{"plain":"- CLI: Disable corepack auto pin behavior - [#29627](https://github.com/storybookjs/storybook/pull/29627), thanks @yannbf!\n- RNW-Vite: Integrate with experimental-addon-test - [#29645](https://github.com/storybookjs/storybook/pull/29645), thanks @shilman!"}} From 1b724597e8a1f65754abc08e1d429cc0974b89b6 Mon Sep 17 00:00:00 2001 From: Yann Braga <yannbf@gmail.com> Date: Mon, 18 Nov 2024 22:15:56 +0100 Subject: [PATCH 080/101] use updated vite plugin --- .../experimental-nextjs-vite/package.json | 5 +- .../compatibility/compatibility-map.ts | 46 ------------------- .../compatibility/draft-mode.compat.ts | 2 +- .../redirect-status-code.compat.ts | 6 --- .../compatibility/segment.compat.ts | 8 ---- .../src/routing/app-router-provider.tsx | 5 +- .../src/compatibility/draft-mode.compat.ts | 2 +- code/yarn.lock | 27 ++++------- 8 files changed, 19 insertions(+), 82 deletions(-) delete mode 100644 code/frameworks/experimental-nextjs-vite/src/export-mocks/compatibility/compatibility-map.ts delete mode 100644 code/frameworks/experimental-nextjs-vite/src/export-mocks/compatibility/redirect-status-code.compat.ts delete mode 100644 code/frameworks/experimental-nextjs-vite/src/export-mocks/compatibility/segment.compat.ts diff --git a/code/frameworks/experimental-nextjs-vite/package.json b/code/frameworks/experimental-nextjs-vite/package.json index d7437ff0fb9..b57c3f5bf75 100644 --- a/code/frameworks/experimental-nextjs-vite/package.json +++ b/code/frameworks/experimental-nextjs-vite/package.json @@ -99,7 +99,7 @@ "@storybook/react": "workspace:*", "@storybook/test": "workspace:*", "styled-jsx": "5.1.6", - "vite-plugin-storybook-nextjs": "^1.0.11" + "vite-plugin-storybook-nextjs": "1.1.0--canary.27.65f1124.0" }, "devDependencies": { "@types/node": "^18.0.0", @@ -141,7 +141,8 @@ "./src/images/decorator.tsx" ], "externals": [ - "sb-original/image-context" + "sb-original/image-context", + "sb-original/default-loader" ], "platform": "node" }, diff --git a/code/frameworks/experimental-nextjs-vite/src/export-mocks/compatibility/compatibility-map.ts b/code/frameworks/experimental-nextjs-vite/src/export-mocks/compatibility/compatibility-map.ts deleted file mode 100644 index 4cfb5e92f0b..00000000000 --- a/code/frameworks/experimental-nextjs-vite/src/export-mocks/compatibility/compatibility-map.ts +++ /dev/null @@ -1,46 +0,0 @@ -import semver from 'semver'; -import type { Configuration as WebpackConfig } from 'webpack'; - -import { addScopedAlias, getNextjsVersion, setAlias } from '../utils'; - -const mapping: Record<string, Record<string, string | boolean>> = { - '<14.1.0': { - // https://github.com/vercel/next.js/blob/v14.1.0/packages/next/src/shared/lib/segment.ts - 'next/dist/shared/lib/segment': '@storybook/nextjs/dist/compatibility/segment.compat', - }, - '<14.0.4': { - // https://github.com/vercel/next.js/blob/v14.0.4/packages/next/src/client/components/redirect-status-code.ts - 'next/dist/client/components/redirect-status-code': - '@storybook/nextjs/dist/compatibility/redirect-status-code.compat', - }, - '<15.0.0': { - 'next/dist/server/request/headers': 'next/dist/client/components/headers', - // this path only exists from Next 15 onwards - 'next/dist/server/request/draft-mode': '@storybook/nextjs/dist/compatibility/draft-mode.compat', - }, -}; - -export const getCompatibilityAliases = () => { - const version = getNextjsVersion(); - const result: Record<string, string> = {}; - - Object.keys(mapping).forEach((key) => { - if (semver.intersects(version, key)) { - Object.assign(result, mapping[key]); - } - }); - - return result; -}; - -export const configureCompatibilityAliases = (baseConfig: WebpackConfig): void => { - const aliases = getCompatibilityAliases(); - - Object.entries(aliases).forEach(([name, alias]) => { - if (typeof alias === 'string') { - addScopedAlias(baseConfig, name, alias); - } else { - setAlias(baseConfig, name, alias); - } - }); -}; diff --git a/code/frameworks/experimental-nextjs-vite/src/export-mocks/compatibility/draft-mode.compat.ts b/code/frameworks/experimental-nextjs-vite/src/export-mocks/compatibility/draft-mode.compat.ts index 0304cb48455..cdcaf63bbf1 100644 --- a/code/frameworks/experimental-nextjs-vite/src/export-mocks/compatibility/draft-mode.compat.ts +++ b/code/frameworks/experimental-nextjs-vite/src/export-mocks/compatibility/draft-mode.compat.ts @@ -1,2 +1,2 @@ -// Compatibility for Next 14 +// @ts-expect-error Compatibility for Next 14 export { draftMode } from 'next/dist/client/components/headers'; diff --git a/code/frameworks/experimental-nextjs-vite/src/export-mocks/compatibility/redirect-status-code.compat.ts b/code/frameworks/experimental-nextjs-vite/src/export-mocks/compatibility/redirect-status-code.compat.ts deleted file mode 100644 index cf2adb9e284..00000000000 --- a/code/frameworks/experimental-nextjs-vite/src/export-mocks/compatibility/redirect-status-code.compat.ts +++ /dev/null @@ -1,6 +0,0 @@ -// Compatibility for Next 13 -export enum RedirectStatusCode { - SeeOther = 303, - TemporaryRedirect = 307, - PermanentRedirect = 308, -} diff --git a/code/frameworks/experimental-nextjs-vite/src/export-mocks/compatibility/segment.compat.ts b/code/frameworks/experimental-nextjs-vite/src/export-mocks/compatibility/segment.compat.ts deleted file mode 100644 index 98c195030f5..00000000000 --- a/code/frameworks/experimental-nextjs-vite/src/export-mocks/compatibility/segment.compat.ts +++ /dev/null @@ -1,8 +0,0 @@ -// Compatibility for Next 13 -// from https://github.com/vercel/next.js/blob/606f9ff7903b58da51aa043bfe71cd7b6ea306fd/packages/next/src/shared/lib/segment.ts#L4 -export function isGroupSegment(segment: string) { - return segment[0] === '(' && segment.endsWith(')'); -} - -export const PAGE_SEGMENT_KEY = '__PAGE__'; -export const DEFAULT_SEGMENT_KEY = '__DEFAULT__'; diff --git a/code/frameworks/experimental-nextjs-vite/src/routing/app-router-provider.tsx b/code/frameworks/experimental-nextjs-vite/src/routing/app-router-provider.tsx index 99269e56907..68e01381948 100644 --- a/code/frameworks/experimental-nextjs-vite/src/routing/app-router-provider.tsx +++ b/code/frameworks/experimental-nextjs-vite/src/routing/app-router-provider.tsx @@ -18,11 +18,14 @@ import { PathnameContext, SearchParamsContext, } from 'next/dist/shared/lib/hooks-client-context.shared-runtime'; -import { type Params } from 'next/dist/shared/lib/router/utils/route-matcher'; import { PAGE_SEGMENT_KEY } from 'next/dist/shared/lib/segment'; import type { RouteParams } from './types'; +// Using an inline type so we can support Next 14 and lower +// from https://github.com/vercel/next.js/blob/v15.0.3/packages/next/src/server/request/params.ts#L25 +type Params = Record<string, string | Array<string> | undefined>; + type AppRouterProviderProps = { routeParams: RouteParams; }; diff --git a/code/frameworks/nextjs/src/compatibility/draft-mode.compat.ts b/code/frameworks/nextjs/src/compatibility/draft-mode.compat.ts index 0304cb48455..cdcaf63bbf1 100644 --- a/code/frameworks/nextjs/src/compatibility/draft-mode.compat.ts +++ b/code/frameworks/nextjs/src/compatibility/draft-mode.compat.ts @@ -1,2 +1,2 @@ -// Compatibility for Next 14 +// @ts-expect-error Compatibility for Next 14 export { draftMode } from 'next/dist/client/components/headers'; diff --git a/code/yarn.lock b/code/yarn.lock index 38f40e9ba45..09d9fefa214 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -4092,20 +4092,13 @@ __metadata: languageName: node linkType: hard -"@next/env@npm:15.0.3": +"@next/env@npm:15.0.3, @next/env@npm:^15.0.3": version: 15.0.3 resolution: "@next/env@npm:15.0.3" checksum: 10c0/63582fed80d6a28fff102c935095da71fd57ddf6b5f5d564e85ebdefdeb93298f7f7cf7d813c75b460c6627106717ea959b4c232939e7abb97d73d8b8467d4cd languageName: node linkType: hard -"@next/env@npm:^14.2.5": - version: 14.2.5 - resolution: "@next/env@npm:14.2.5" - checksum: 10c0/63d8b88ac450b3c37940a9e2119a63a1074aca89908574ade6157a8aa295275dcb3ac5f69e00883fc55d0f12963b73b74e87ba32a5768a489f9609c6be57b699 - languageName: node - linkType: hard - "@next/swc-darwin-arm64@npm:15.0.3": version: 15.0.3 resolution: "@next/swc-darwin-arm64@npm:15.0.3" @@ -6482,7 +6475,7 @@ __metadata: sharp: "npm:^0.33.3" styled-jsx: "npm:5.1.6" typescript: "npm:^5.3.2" - vite-plugin-storybook-nextjs: "npm:^1.0.11" + vite-plugin-storybook-nextjs: "npm:1.1.0--canary.27.65f1124.0" peerDependencies: "@storybook/test": "workspace:*" next: ^14.1.0 || ^15.0.0 @@ -28798,25 +28791,25 @@ __metadata: languageName: node linkType: hard -"vite-plugin-storybook-nextjs@npm:^1.0.11": - version: 1.0.11 - resolution: "vite-plugin-storybook-nextjs@npm:1.0.11" +"vite-plugin-storybook-nextjs@npm:1.1.0--canary.27.65f1124.0": + version: 1.1.0--canary.27.65f1124.0 + resolution: "vite-plugin-storybook-nextjs@npm:1.1.0--canary.27.65f1124.0" dependencies: - "@next/env": "npm:^14.2.5" + "@next/env": "npm:^15.0.3" image-size: "npm:^1.1.1" magic-string: "npm:^0.30.11" module-alias: "npm:^2.2.3" sharp: "npm:^0.33.4" ts-dedent: "npm:^2.2.0" peerDependencies: - "@storybook/test": ^8.3.0-alpha.3 - next: ^14.1.0 - storybook: ^8.3.0-alpha.3 + "@storybook/test": ^8.3.0 + next: ^14.1.0 || ^15.0.0 + storybook: ^8.3.0 vite: ^5.0.0 dependenciesMeta: sharp: optional: true - checksum: 10c0/9652b76c13a682b688d9a4f617b1a66263f25f395a99af8e258bedef4f3b3ce1c856ec1ff66cc0359d6aedc96adee9750fd6b0432514dd575ad7896cd1de70df + checksum: 10c0/be22526b7471522a7a12f3302cf802708899a977d105317c7339f86aa4e6c25cbe3df37f983bef2c5875fda987daa7388171b78d0184ac7e000fbd180e1629bc languageName: node linkType: hard From bebc9dbd236fecb854cdc1328661411a869d7b56 Mon Sep 17 00:00:00 2001 From: storybook-bot <32066757+storybook-bot@users.noreply.github.com> Date: Tue, 19 Nov 2024 00:41:34 +0000 Subject: [PATCH 081/101] Bump version from "8.5.0-alpha.6" to "8.5.0-alpha.7" [skip ci] --- code/addons/a11y/package.json | 2 +- code/addons/actions/package.json | 2 +- code/addons/backgrounds/package.json | 2 +- code/addons/controls/package.json | 2 +- code/addons/docs/package.json | 2 +- code/addons/essentials/package.json | 2 +- code/addons/gfm/package.json | 2 +- code/addons/highlight/package.json | 2 +- code/addons/interactions/package.json | 2 +- code/addons/jest/package.json | 2 +- code/addons/links/package.json | 2 +- code/addons/measure/package.json | 2 +- code/addons/onboarding/package.json | 2 +- code/addons/outline/package.json | 2 +- code/addons/storysource/package.json | 2 +- code/addons/test/package.json | 2 +- code/addons/themes/package.json | 2 +- code/addons/toolbars/package.json | 2 +- code/addons/viewport/package.json | 2 +- code/builders/builder-vite/package.json | 2 +- code/builders/builder-webpack5/package.json | 2 +- code/core/package.json | 2 +- code/core/src/common/versions.ts | 170 +++++++++--------- code/core/src/manager-api/version.ts | 2 +- code/deprecated/builder-manager/package.json | 2 +- code/deprecated/channels/package.json | 2 +- code/deprecated/client-logger/package.json | 2 +- code/deprecated/components/package.json | 2 +- code/deprecated/core-common/package.json | 2 +- code/deprecated/core-events/package.json | 2 +- code/deprecated/core-server/package.json | 2 +- code/deprecated/csf-tools/package.json | 2 +- code/deprecated/docs-tools/package.json | 2 +- code/deprecated/manager-api/package.json | 2 +- code/deprecated/manager/package.json | 2 +- code/deprecated/node-logger/package.json | 2 +- code/deprecated/preview-api/package.json | 2 +- code/deprecated/preview/package.json | 2 +- code/deprecated/router/package.json | 2 +- code/deprecated/telemetry/package.json | 2 +- code/deprecated/theming/package.json | 2 +- code/deprecated/types/package.json | 2 +- code/frameworks/angular/package.json | 2 +- code/frameworks/ember/package.json | 2 +- .../experimental-nextjs-vite/package.json | 2 +- code/frameworks/html-vite/package.json | 2 +- code/frameworks/html-webpack5/package.json | 2 +- code/frameworks/nextjs/package.json | 2 +- code/frameworks/preact-vite/package.json | 2 +- code/frameworks/preact-webpack5/package.json | 2 +- .../react-native-web-vite/package.json | 2 +- code/frameworks/react-vite/package.json | 2 +- code/frameworks/react-webpack5/package.json | 2 +- code/frameworks/server-webpack5/package.json | 2 +- code/frameworks/svelte-vite/package.json | 2 +- code/frameworks/svelte-webpack5/package.json | 2 +- code/frameworks/sveltekit/package.json | 2 +- code/frameworks/vue3-vite/package.json | 2 +- code/frameworks/vue3-webpack5/package.json | 2 +- .../web-components-vite/package.json | 2 +- .../web-components-webpack5/package.json | 2 +- code/lib/blocks/package.json | 2 +- code/lib/cli-sb/package.json | 2 +- code/lib/cli-storybook/package.json | 2 +- code/lib/cli/package.json | 2 +- code/lib/codemod/package.json | 2 +- code/lib/core-webpack/package.json | 2 +- code/lib/create-storybook/package.json | 2 +- code/lib/csf-plugin/package.json | 2 +- code/lib/instrumenter/package.json | 2 +- code/lib/react-dom-shim/package.json | 2 +- code/lib/source-loader/package.json | 2 +- code/lib/test/package.json | 2 +- code/package.json | 5 +- code/presets/create-react-app/package.json | 2 +- code/presets/html-webpack/package.json | 2 +- code/presets/preact-webpack/package.json | 2 +- code/presets/react-webpack/package.json | 2 +- code/presets/server-webpack/package.json | 2 +- code/presets/svelte-webpack/package.json | 2 +- code/presets/vue3-webpack/package.json | 2 +- code/renderers/html/package.json | 2 +- code/renderers/preact/package.json | 2 +- code/renderers/react/package.json | 2 +- code/renderers/server/package.json | 2 +- code/renderers/svelte/package.json | 2 +- code/renderers/vue3/package.json | 2 +- code/renderers/web-components/package.json | 2 +- 88 files changed, 173 insertions(+), 174 deletions(-) diff --git a/code/addons/a11y/package.json b/code/addons/a11y/package.json index 7f84361171a..9e90ce8e478 100644 --- a/code/addons/a11y/package.json +++ b/code/addons/a11y/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-a11y", - "version": "8.5.0-alpha.6", + "version": "8.5.0-alpha.7", "description": "Test component compliance with web accessibility standards", "keywords": [ "a11y", diff --git a/code/addons/actions/package.json b/code/addons/actions/package.json index f14d5e57843..9fe85e34cab 100644 --- a/code/addons/actions/package.json +++ b/code/addons/actions/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-actions", - "version": "8.5.0-alpha.6", + "version": "8.5.0-alpha.7", "description": "Get UI feedback when an action is performed on an interactive element", "keywords": [ "storybook", diff --git a/code/addons/backgrounds/package.json b/code/addons/backgrounds/package.json index bebc497f9ee..26ed6cb549b 100644 --- a/code/addons/backgrounds/package.json +++ b/code/addons/backgrounds/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-backgrounds", - "version": "8.5.0-alpha.6", + "version": "8.5.0-alpha.7", "description": "Switch backgrounds to view components in different settings", "keywords": [ "addon", diff --git a/code/addons/controls/package.json b/code/addons/controls/package.json index e46861c63db..53bd24c8351 100644 --- a/code/addons/controls/package.json +++ b/code/addons/controls/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-controls", - "version": "8.5.0-alpha.6", + "version": "8.5.0-alpha.7", "description": "Interact with component inputs dynamically in the Storybook UI", "keywords": [ "addon", diff --git a/code/addons/docs/package.json b/code/addons/docs/package.json index 4cbcdcf2ab6..3f198e8d8ba 100644 --- a/code/addons/docs/package.json +++ b/code/addons/docs/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-docs", - "version": "8.5.0-alpha.6", + "version": "8.5.0-alpha.7", "description": "Document component usage and properties in Markdown", "keywords": [ "addon", diff --git a/code/addons/essentials/package.json b/code/addons/essentials/package.json index bd7167e6404..dc8544e574a 100644 --- a/code/addons/essentials/package.json +++ b/code/addons/essentials/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-essentials", - "version": "8.5.0-alpha.6", + "version": "8.5.0-alpha.7", "description": "Curated addons to bring out the best of Storybook", "keywords": [ "addon", diff --git a/code/addons/gfm/package.json b/code/addons/gfm/package.json index df31e4ba438..761b09d0cef 100644 --- a/code/addons/gfm/package.json +++ b/code/addons/gfm/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-mdx-gfm", - "version": "8.5.0-alpha.6", + "version": "8.5.0-alpha.7", "description": "GitHub Flavored Markdown in Storybook", "keywords": [ "addon", diff --git a/code/addons/highlight/package.json b/code/addons/highlight/package.json index ae72dc5aec0..8de45ba2cbe 100644 --- a/code/addons/highlight/package.json +++ b/code/addons/highlight/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-highlight", - "version": "8.5.0-alpha.6", + "version": "8.5.0-alpha.7", "description": "Highlight DOM nodes within your stories", "keywords": [ "storybook-addons", diff --git a/code/addons/interactions/package.json b/code/addons/interactions/package.json index 3b921f7f5b7..95f0ff32310 100644 --- a/code/addons/interactions/package.json +++ b/code/addons/interactions/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-interactions", - "version": "8.5.0-alpha.6", + "version": "8.5.0-alpha.7", "description": "Automate, test and debug user interactions", "keywords": [ "storybook-addons", diff --git a/code/addons/jest/package.json b/code/addons/jest/package.json index 560ddee4a89..8675850d12b 100644 --- a/code/addons/jest/package.json +++ b/code/addons/jest/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-jest", - "version": "8.5.0-alpha.6", + "version": "8.5.0-alpha.7", "description": "React storybook addon that show component jest report", "keywords": [ "addon", diff --git a/code/addons/links/package.json b/code/addons/links/package.json index 5c958a3a2d0..f3d8ed00c24 100644 --- a/code/addons/links/package.json +++ b/code/addons/links/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-links", - "version": "8.5.0-alpha.6", + "version": "8.5.0-alpha.7", "description": "Link stories together to build demos and prototypes with your UI components", "keywords": [ "storybook-addons", diff --git a/code/addons/measure/package.json b/code/addons/measure/package.json index 31879b8ecdf..a15ebfe69f4 100644 --- a/code/addons/measure/package.json +++ b/code/addons/measure/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-measure", - "version": "8.5.0-alpha.6", + "version": "8.5.0-alpha.7", "description": "Inspect layouts by visualizing the box model", "keywords": [ "storybook-addons", diff --git a/code/addons/onboarding/package.json b/code/addons/onboarding/package.json index c3742e92167..d2e5e932546 100644 --- a/code/addons/onboarding/package.json +++ b/code/addons/onboarding/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-onboarding", - "version": "8.5.0-alpha.6", + "version": "8.5.0-alpha.7", "description": "Storybook Addon Onboarding - Introduces a new onboarding experience", "keywords": [ "storybook-addons", diff --git a/code/addons/outline/package.json b/code/addons/outline/package.json index 1ad8dd9259e..9fac1cd9aac 100644 --- a/code/addons/outline/package.json +++ b/code/addons/outline/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-outline", - "version": "8.5.0-alpha.6", + "version": "8.5.0-alpha.7", "description": "Outline all elements with CSS to help with layout placement and alignment", "keywords": [ "storybook-addons", diff --git a/code/addons/storysource/package.json b/code/addons/storysource/package.json index a2dd11c1844..b35c3e84fbe 100644 --- a/code/addons/storysource/package.json +++ b/code/addons/storysource/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-storysource", - "version": "8.5.0-alpha.6", + "version": "8.5.0-alpha.7", "description": "View a story’s source code to see how it works and paste into your app", "keywords": [ "addon", diff --git a/code/addons/test/package.json b/code/addons/test/package.json index 4be82e299b3..26951265827 100644 --- a/code/addons/test/package.json +++ b/code/addons/test/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/experimental-addon-test", - "version": "8.5.0-alpha.6", + "version": "8.5.0-alpha.7", "description": "Integrate Vitest with Storybook", "keywords": [ "storybook-addons", diff --git a/code/addons/themes/package.json b/code/addons/themes/package.json index 6b61c3a76e1..04c1dff0ba9 100644 --- a/code/addons/themes/package.json +++ b/code/addons/themes/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-themes", - "version": "8.5.0-alpha.6", + "version": "8.5.0-alpha.7", "description": "Switch between multiple themes for you components in Storybook", "keywords": [ "css", diff --git a/code/addons/toolbars/package.json b/code/addons/toolbars/package.json index bb932487b79..937814df42b 100644 --- a/code/addons/toolbars/package.json +++ b/code/addons/toolbars/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-toolbars", - "version": "8.5.0-alpha.6", + "version": "8.5.0-alpha.7", "description": "Create your own toolbar items that control story rendering", "keywords": [ "addon", diff --git a/code/addons/viewport/package.json b/code/addons/viewport/package.json index ad514cc741f..137c07f1be3 100644 --- a/code/addons/viewport/package.json +++ b/code/addons/viewport/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-viewport", - "version": "8.5.0-alpha.6", + "version": "8.5.0-alpha.7", "description": "Build responsive components by adjusting Storybook’s viewport size and orientation", "keywords": [ "addon", diff --git a/code/builders/builder-vite/package.json b/code/builders/builder-vite/package.json index 22e3de20038..6d9f03ef6ef 100644 --- a/code/builders/builder-vite/package.json +++ b/code/builders/builder-vite/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/builder-vite", - "version": "8.5.0-alpha.6", + "version": "8.5.0-alpha.7", "description": "A plugin to run and build Storybooks with Vite", "homepage": "https://github.com/storybookjs/storybook/tree/next/code/builders/builder-vite/#readme", "bugs": { diff --git a/code/builders/builder-webpack5/package.json b/code/builders/builder-webpack5/package.json index 8375c5aba70..4c8a37ba117 100644 --- a/code/builders/builder-webpack5/package.json +++ b/code/builders/builder-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/builder-webpack5", - "version": "8.5.0-alpha.6", + "version": "8.5.0-alpha.7", "description": "Storybook framework-agnostic API", "keywords": [ "storybook" diff --git a/code/core/package.json b/code/core/package.json index 9dfa9757c1f..87b3adc18de 100644 --- a/code/core/package.json +++ b/code/core/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/core", - "version": "8.5.0-alpha.6", + "version": "8.5.0-alpha.7", "description": "Storybook framework-agnostic API", "keywords": [ "storybook" diff --git a/code/core/src/common/versions.ts b/code/core/src/common/versions.ts index b22c4a9ec00..7630843312f 100644 --- a/code/core/src/common/versions.ts +++ b/code/core/src/common/versions.ts @@ -1,88 +1,88 @@ // auto generated file, do not edit export default { - '@storybook/addon-a11y': '8.5.0-alpha.6', - '@storybook/addon-actions': '8.5.0-alpha.6', - '@storybook/addon-backgrounds': '8.5.0-alpha.6', - '@storybook/addon-controls': '8.5.0-alpha.6', - '@storybook/addon-docs': '8.5.0-alpha.6', - '@storybook/addon-essentials': '8.5.0-alpha.6', - '@storybook/addon-mdx-gfm': '8.5.0-alpha.6', - '@storybook/addon-highlight': '8.5.0-alpha.6', - '@storybook/addon-interactions': '8.5.0-alpha.6', - '@storybook/addon-jest': '8.5.0-alpha.6', - '@storybook/addon-links': '8.5.0-alpha.6', - '@storybook/addon-measure': '8.5.0-alpha.6', - '@storybook/addon-onboarding': '8.5.0-alpha.6', - '@storybook/addon-outline': '8.5.0-alpha.6', - '@storybook/addon-storysource': '8.5.0-alpha.6', - '@storybook/experimental-addon-test': '8.5.0-alpha.6', - '@storybook/addon-themes': '8.5.0-alpha.6', - '@storybook/addon-toolbars': '8.5.0-alpha.6', - '@storybook/addon-viewport': '8.5.0-alpha.6', - '@storybook/builder-vite': '8.5.0-alpha.6', - '@storybook/builder-webpack5': '8.5.0-alpha.6', - '@storybook/core': '8.5.0-alpha.6', - '@storybook/builder-manager': '8.5.0-alpha.6', - '@storybook/channels': '8.5.0-alpha.6', - '@storybook/client-logger': '8.5.0-alpha.6', - '@storybook/components': '8.5.0-alpha.6', - '@storybook/core-common': '8.5.0-alpha.6', - '@storybook/core-events': '8.5.0-alpha.6', - '@storybook/core-server': '8.5.0-alpha.6', - '@storybook/csf-tools': '8.5.0-alpha.6', - '@storybook/docs-tools': '8.5.0-alpha.6', - '@storybook/manager': '8.5.0-alpha.6', - '@storybook/manager-api': '8.5.0-alpha.6', - '@storybook/node-logger': '8.5.0-alpha.6', - '@storybook/preview': '8.5.0-alpha.6', - '@storybook/preview-api': '8.5.0-alpha.6', - '@storybook/router': '8.5.0-alpha.6', - '@storybook/telemetry': '8.5.0-alpha.6', - '@storybook/theming': '8.5.0-alpha.6', - '@storybook/types': '8.5.0-alpha.6', - '@storybook/angular': '8.5.0-alpha.6', - '@storybook/ember': '8.5.0-alpha.6', - '@storybook/experimental-nextjs-vite': '8.5.0-alpha.6', - '@storybook/html-vite': '8.5.0-alpha.6', - '@storybook/html-webpack5': '8.5.0-alpha.6', - '@storybook/nextjs': '8.5.0-alpha.6', - '@storybook/preact-vite': '8.5.0-alpha.6', - '@storybook/preact-webpack5': '8.5.0-alpha.6', - '@storybook/react-native-web-vite': '8.5.0-alpha.6', - '@storybook/react-vite': '8.5.0-alpha.6', - '@storybook/react-webpack5': '8.5.0-alpha.6', - '@storybook/server-webpack5': '8.5.0-alpha.6', - '@storybook/svelte-vite': '8.5.0-alpha.6', - '@storybook/svelte-webpack5': '8.5.0-alpha.6', - '@storybook/sveltekit': '8.5.0-alpha.6', - '@storybook/vue3-vite': '8.5.0-alpha.6', - '@storybook/vue3-webpack5': '8.5.0-alpha.6', - '@storybook/web-components-vite': '8.5.0-alpha.6', - '@storybook/web-components-webpack5': '8.5.0-alpha.6', - '@storybook/blocks': '8.5.0-alpha.6', - storybook: '8.5.0-alpha.6', - sb: '8.5.0-alpha.6', - '@storybook/cli': '8.5.0-alpha.6', - '@storybook/codemod': '8.5.0-alpha.6', - '@storybook/core-webpack': '8.5.0-alpha.6', - 'create-storybook': '8.5.0-alpha.6', - '@storybook/csf-plugin': '8.5.0-alpha.6', - '@storybook/instrumenter': '8.5.0-alpha.6', - '@storybook/react-dom-shim': '8.5.0-alpha.6', - '@storybook/source-loader': '8.5.0-alpha.6', - '@storybook/test': '8.5.0-alpha.6', - '@storybook/preset-create-react-app': '8.5.0-alpha.6', - '@storybook/preset-html-webpack': '8.5.0-alpha.6', - '@storybook/preset-preact-webpack': '8.5.0-alpha.6', - '@storybook/preset-react-webpack': '8.5.0-alpha.6', - '@storybook/preset-server-webpack': '8.5.0-alpha.6', - '@storybook/preset-svelte-webpack': '8.5.0-alpha.6', - '@storybook/preset-vue3-webpack': '8.5.0-alpha.6', - '@storybook/html': '8.5.0-alpha.6', - '@storybook/preact': '8.5.0-alpha.6', - '@storybook/react': '8.5.0-alpha.6', - '@storybook/server': '8.5.0-alpha.6', - '@storybook/svelte': '8.5.0-alpha.6', - '@storybook/vue3': '8.5.0-alpha.6', - '@storybook/web-components': '8.5.0-alpha.6', + '@storybook/addon-a11y': '8.5.0-alpha.7', + '@storybook/addon-actions': '8.5.0-alpha.7', + '@storybook/addon-backgrounds': '8.5.0-alpha.7', + '@storybook/addon-controls': '8.5.0-alpha.7', + '@storybook/addon-docs': '8.5.0-alpha.7', + '@storybook/addon-essentials': '8.5.0-alpha.7', + '@storybook/addon-mdx-gfm': '8.5.0-alpha.7', + '@storybook/addon-highlight': '8.5.0-alpha.7', + '@storybook/addon-interactions': '8.5.0-alpha.7', + '@storybook/addon-jest': '8.5.0-alpha.7', + '@storybook/addon-links': '8.5.0-alpha.7', + '@storybook/addon-measure': '8.5.0-alpha.7', + '@storybook/addon-onboarding': '8.5.0-alpha.7', + '@storybook/addon-outline': '8.5.0-alpha.7', + '@storybook/addon-storysource': '8.5.0-alpha.7', + '@storybook/experimental-addon-test': '8.5.0-alpha.7', + '@storybook/addon-themes': '8.5.0-alpha.7', + '@storybook/addon-toolbars': '8.5.0-alpha.7', + '@storybook/addon-viewport': '8.5.0-alpha.7', + '@storybook/builder-vite': '8.5.0-alpha.7', + '@storybook/builder-webpack5': '8.5.0-alpha.7', + '@storybook/core': '8.5.0-alpha.7', + '@storybook/builder-manager': '8.5.0-alpha.7', + '@storybook/channels': '8.5.0-alpha.7', + '@storybook/client-logger': '8.5.0-alpha.7', + '@storybook/components': '8.5.0-alpha.7', + '@storybook/core-common': '8.5.0-alpha.7', + '@storybook/core-events': '8.5.0-alpha.7', + '@storybook/core-server': '8.5.0-alpha.7', + '@storybook/csf-tools': '8.5.0-alpha.7', + '@storybook/docs-tools': '8.5.0-alpha.7', + '@storybook/manager': '8.5.0-alpha.7', + '@storybook/manager-api': '8.5.0-alpha.7', + '@storybook/node-logger': '8.5.0-alpha.7', + '@storybook/preview': '8.5.0-alpha.7', + '@storybook/preview-api': '8.5.0-alpha.7', + '@storybook/router': '8.5.0-alpha.7', + '@storybook/telemetry': '8.5.0-alpha.7', + '@storybook/theming': '8.5.0-alpha.7', + '@storybook/types': '8.5.0-alpha.7', + '@storybook/angular': '8.5.0-alpha.7', + '@storybook/ember': '8.5.0-alpha.7', + '@storybook/experimental-nextjs-vite': '8.5.0-alpha.7', + '@storybook/html-vite': '8.5.0-alpha.7', + '@storybook/html-webpack5': '8.5.0-alpha.7', + '@storybook/nextjs': '8.5.0-alpha.7', + '@storybook/preact-vite': '8.5.0-alpha.7', + '@storybook/preact-webpack5': '8.5.0-alpha.7', + '@storybook/react-native-web-vite': '8.5.0-alpha.7', + '@storybook/react-vite': '8.5.0-alpha.7', + '@storybook/react-webpack5': '8.5.0-alpha.7', + '@storybook/server-webpack5': '8.5.0-alpha.7', + '@storybook/svelte-vite': '8.5.0-alpha.7', + '@storybook/svelte-webpack5': '8.5.0-alpha.7', + '@storybook/sveltekit': '8.5.0-alpha.7', + '@storybook/vue3-vite': '8.5.0-alpha.7', + '@storybook/vue3-webpack5': '8.5.0-alpha.7', + '@storybook/web-components-vite': '8.5.0-alpha.7', + '@storybook/web-components-webpack5': '8.5.0-alpha.7', + '@storybook/blocks': '8.5.0-alpha.7', + storybook: '8.5.0-alpha.7', + sb: '8.5.0-alpha.7', + '@storybook/cli': '8.5.0-alpha.7', + '@storybook/codemod': '8.5.0-alpha.7', + '@storybook/core-webpack': '8.5.0-alpha.7', + 'create-storybook': '8.5.0-alpha.7', + '@storybook/csf-plugin': '8.5.0-alpha.7', + '@storybook/instrumenter': '8.5.0-alpha.7', + '@storybook/react-dom-shim': '8.5.0-alpha.7', + '@storybook/source-loader': '8.5.0-alpha.7', + '@storybook/test': '8.5.0-alpha.7', + '@storybook/preset-create-react-app': '8.5.0-alpha.7', + '@storybook/preset-html-webpack': '8.5.0-alpha.7', + '@storybook/preset-preact-webpack': '8.5.0-alpha.7', + '@storybook/preset-react-webpack': '8.5.0-alpha.7', + '@storybook/preset-server-webpack': '8.5.0-alpha.7', + '@storybook/preset-svelte-webpack': '8.5.0-alpha.7', + '@storybook/preset-vue3-webpack': '8.5.0-alpha.7', + '@storybook/html': '8.5.0-alpha.7', + '@storybook/preact': '8.5.0-alpha.7', + '@storybook/react': '8.5.0-alpha.7', + '@storybook/server': '8.5.0-alpha.7', + '@storybook/svelte': '8.5.0-alpha.7', + '@storybook/vue3': '8.5.0-alpha.7', + '@storybook/web-components': '8.5.0-alpha.7', }; diff --git a/code/core/src/manager-api/version.ts b/code/core/src/manager-api/version.ts index 9885e98760a..eeb704a7061 100644 --- a/code/core/src/manager-api/version.ts +++ b/code/core/src/manager-api/version.ts @@ -1 +1 @@ -export const version = '8.5.0-alpha.6'; +export const version = '8.5.0-alpha.7'; diff --git a/code/deprecated/builder-manager/package.json b/code/deprecated/builder-manager/package.json index 5c0f02b7602..71d78355abf 100644 --- a/code/deprecated/builder-manager/package.json +++ b/code/deprecated/builder-manager/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/builder-manager", - "version": "8.5.0-alpha.6", + "version": "8.5.0-alpha.7", "description": "Storybook manager builder", "keywords": [ "storybook" diff --git a/code/deprecated/channels/package.json b/code/deprecated/channels/package.json index 011737363dd..76a3d91b525 100644 --- a/code/deprecated/channels/package.json +++ b/code/deprecated/channels/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/channels", - "version": "8.5.0-alpha.6", + "version": "8.5.0-alpha.7", "description": "", "keywords": [ "storybook" diff --git a/code/deprecated/client-logger/package.json b/code/deprecated/client-logger/package.json index dd66c185706..d55f1bbf1c2 100644 --- a/code/deprecated/client-logger/package.json +++ b/code/deprecated/client-logger/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/client-logger", - "version": "8.5.0-alpha.6", + "version": "8.5.0-alpha.7", "description": "", "keywords": [ "storybook" diff --git a/code/deprecated/components/package.json b/code/deprecated/components/package.json index ac3f6f5a5b7..5344f1fca62 100644 --- a/code/deprecated/components/package.json +++ b/code/deprecated/components/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/components", - "version": "8.5.0-alpha.6", + "version": "8.5.0-alpha.7", "description": "Core Storybook Components", "keywords": [ "storybook" diff --git a/code/deprecated/core-common/package.json b/code/deprecated/core-common/package.json index 8fc25554d21..084a67917c8 100644 --- a/code/deprecated/core-common/package.json +++ b/code/deprecated/core-common/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/core-common", - "version": "8.5.0-alpha.6", + "version": "8.5.0-alpha.7", "description": "Storybook framework-agnostic API", "keywords": [ "storybook" diff --git a/code/deprecated/core-events/package.json b/code/deprecated/core-events/package.json index 92a8081fd16..d745017f5ab 100644 --- a/code/deprecated/core-events/package.json +++ b/code/deprecated/core-events/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/core-events", - "version": "8.5.0-alpha.6", + "version": "8.5.0-alpha.7", "description": "Event names used in storybook core", "keywords": [ "storybook" diff --git a/code/deprecated/core-server/package.json b/code/deprecated/core-server/package.json index 4bdb1aa5068..ea380aef9f2 100644 --- a/code/deprecated/core-server/package.json +++ b/code/deprecated/core-server/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/core-server", - "version": "8.5.0-alpha.6", + "version": "8.5.0-alpha.7", "description": "Storybook framework-agnostic API", "keywords": [ "storybook" diff --git a/code/deprecated/csf-tools/package.json b/code/deprecated/csf-tools/package.json index 1d23fae6dce..da1ea4faa69 100644 --- a/code/deprecated/csf-tools/package.json +++ b/code/deprecated/csf-tools/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/csf-tools", - "version": "8.5.0-alpha.6", + "version": "8.5.0-alpha.7", "description": "Parse and manipulate CSF and Storybook config files", "keywords": [ "storybook" diff --git a/code/deprecated/docs-tools/package.json b/code/deprecated/docs-tools/package.json index 4794a66339a..3a9c029ab02 100644 --- a/code/deprecated/docs-tools/package.json +++ b/code/deprecated/docs-tools/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/docs-tools", - "version": "8.5.0-alpha.6", + "version": "8.5.0-alpha.7", "description": "Shared utility functions for frameworks to implement docs", "keywords": [ "storybook" diff --git a/code/deprecated/manager-api/package.json b/code/deprecated/manager-api/package.json index 6c122cc047a..b0d99649037 100644 --- a/code/deprecated/manager-api/package.json +++ b/code/deprecated/manager-api/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/manager-api", - "version": "8.5.0-alpha.6", + "version": "8.5.0-alpha.7", "description": "Core Storybook Manager API & Context", "keywords": [ "storybook" diff --git a/code/deprecated/manager/package.json b/code/deprecated/manager/package.json index b3198f2fed1..26c16417abd 100644 --- a/code/deprecated/manager/package.json +++ b/code/deprecated/manager/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/manager", - "version": "8.5.0-alpha.6", + "version": "8.5.0-alpha.7", "description": "Core Storybook UI", "keywords": [ "storybook" diff --git a/code/deprecated/node-logger/package.json b/code/deprecated/node-logger/package.json index a00ac6cba86..a38b11922c7 100644 --- a/code/deprecated/node-logger/package.json +++ b/code/deprecated/node-logger/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/node-logger", - "version": "8.5.0-alpha.6", + "version": "8.5.0-alpha.7", "description": "", "keywords": [ "storybook" diff --git a/code/deprecated/preview-api/package.json b/code/deprecated/preview-api/package.json index 7b6344e9243..876eb85f60e 100644 --- a/code/deprecated/preview-api/package.json +++ b/code/deprecated/preview-api/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preview-api", - "version": "8.5.0-alpha.6", + "version": "8.5.0-alpha.7", "description": "", "keywords": [ "storybook" diff --git a/code/deprecated/preview/package.json b/code/deprecated/preview/package.json index bcc679f7c7c..8dc77fd1279 100644 --- a/code/deprecated/preview/package.json +++ b/code/deprecated/preview/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preview", - "version": "8.5.0-alpha.6", + "version": "8.5.0-alpha.7", "description": "", "keywords": [ "storybook" diff --git a/code/deprecated/router/package.json b/code/deprecated/router/package.json index 55c08302482..db9a02a6f9a 100644 --- a/code/deprecated/router/package.json +++ b/code/deprecated/router/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/router", - "version": "8.5.0-alpha.6", + "version": "8.5.0-alpha.7", "description": "Core Storybook Router", "keywords": [ "storybook" diff --git a/code/deprecated/telemetry/package.json b/code/deprecated/telemetry/package.json index c0017ed169b..f40842c3e32 100644 --- a/code/deprecated/telemetry/package.json +++ b/code/deprecated/telemetry/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/telemetry", - "version": "8.5.0-alpha.6", + "version": "8.5.0-alpha.7", "description": "Telemetry logging for crash reports and usage statistics", "keywords": [ "storybook" diff --git a/code/deprecated/theming/package.json b/code/deprecated/theming/package.json index 5d78c240576..efe96320e68 100644 --- a/code/deprecated/theming/package.json +++ b/code/deprecated/theming/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/theming", - "version": "8.5.0-alpha.6", + "version": "8.5.0-alpha.7", "description": "Core Storybook Components", "keywords": [ "storybook" diff --git a/code/deprecated/types/package.json b/code/deprecated/types/package.json index 7b112c6c6bb..af23546c32a 100644 --- a/code/deprecated/types/package.json +++ b/code/deprecated/types/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/types", - "version": "8.5.0-alpha.6", + "version": "8.5.0-alpha.7", "description": "Core Storybook TS Types", "keywords": [ "storybook" diff --git a/code/frameworks/angular/package.json b/code/frameworks/angular/package.json index 72732ddb55f..775ccf58bbd 100644 --- a/code/frameworks/angular/package.json +++ b/code/frameworks/angular/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/angular", - "version": "8.5.0-alpha.6", + "version": "8.5.0-alpha.7", "description": "Storybook for Angular: Develop Angular components in isolation with hot reloading.", "keywords": [ "storybook", diff --git a/code/frameworks/ember/package.json b/code/frameworks/ember/package.json index 01e64d4a86a..48882062f5c 100644 --- a/code/frameworks/ember/package.json +++ b/code/frameworks/ember/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/ember", - "version": "8.5.0-alpha.6", + "version": "8.5.0-alpha.7", "description": "Storybook for Ember: Develop Ember Component in isolation with Hot Reloading.", "homepage": "https://github.com/storybookjs/storybook/tree/next/code/frameworks/ember", "bugs": { diff --git a/code/frameworks/experimental-nextjs-vite/package.json b/code/frameworks/experimental-nextjs-vite/package.json index 4d7ae6ccbd7..13c7047a216 100644 --- a/code/frameworks/experimental-nextjs-vite/package.json +++ b/code/frameworks/experimental-nextjs-vite/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/experimental-nextjs-vite", - "version": "8.5.0-alpha.6", + "version": "8.5.0-alpha.7", "description": "Storybook for Next.js and Vite", "keywords": [ "storybook", diff --git a/code/frameworks/html-vite/package.json b/code/frameworks/html-vite/package.json index 186de8a9a06..de3f489d429 100644 --- a/code/frameworks/html-vite/package.json +++ b/code/frameworks/html-vite/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/html-vite", - "version": "8.5.0-alpha.6", + "version": "8.5.0-alpha.7", "description": "Storybook for HTML and Vite: Develop HTML in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/html-webpack5/package.json b/code/frameworks/html-webpack5/package.json index 2b6847574d6..f50cebca911 100644 --- a/code/frameworks/html-webpack5/package.json +++ b/code/frameworks/html-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/html-webpack5", - "version": "8.5.0-alpha.6", + "version": "8.5.0-alpha.7", "description": "Storybook for HTML: View HTML snippets in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/nextjs/package.json b/code/frameworks/nextjs/package.json index 9a6d0862d4e..32eb98b31d5 100644 --- a/code/frameworks/nextjs/package.json +++ b/code/frameworks/nextjs/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/nextjs", - "version": "8.5.0-alpha.6", + "version": "8.5.0-alpha.7", "description": "Storybook for Next.js", "keywords": [ "storybook", diff --git a/code/frameworks/preact-vite/package.json b/code/frameworks/preact-vite/package.json index 16c7d0d0413..27d01ba6108 100644 --- a/code/frameworks/preact-vite/package.json +++ b/code/frameworks/preact-vite/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preact-vite", - "version": "8.5.0-alpha.6", + "version": "8.5.0-alpha.7", "description": "Storybook for Preact and Vite: Develop Preact components in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/preact-webpack5/package.json b/code/frameworks/preact-webpack5/package.json index 8b737c4b77a..95f66606ad6 100644 --- a/code/frameworks/preact-webpack5/package.json +++ b/code/frameworks/preact-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preact-webpack5", - "version": "8.5.0-alpha.6", + "version": "8.5.0-alpha.7", "description": "Storybook for Preact: Develop Preact Component in isolation.", "keywords": [ "storybook" diff --git a/code/frameworks/react-native-web-vite/package.json b/code/frameworks/react-native-web-vite/package.json index 2531f61a685..d6de0b7e481 100644 --- a/code/frameworks/react-native-web-vite/package.json +++ b/code/frameworks/react-native-web-vite/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/react-native-web-vite", - "version": "8.5.0-alpha.6", + "version": "8.5.0-alpha.7", "description": "Develop react-native components an isolated web environment with hot reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/react-vite/package.json b/code/frameworks/react-vite/package.json index 440defbff76..eb0883cd8ba 100644 --- a/code/frameworks/react-vite/package.json +++ b/code/frameworks/react-vite/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/react-vite", - "version": "8.5.0-alpha.6", + "version": "8.5.0-alpha.7", "description": "Storybook for React and Vite: Develop React components in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/react-webpack5/package.json b/code/frameworks/react-webpack5/package.json index 3776d0adcd7..2a3b788f555 100644 --- a/code/frameworks/react-webpack5/package.json +++ b/code/frameworks/react-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/react-webpack5", - "version": "8.5.0-alpha.6", + "version": "8.5.0-alpha.7", "description": "Storybook for React: Develop React Component in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/server-webpack5/package.json b/code/frameworks/server-webpack5/package.json index b9d1fda5e94..b1908756dba 100644 --- a/code/frameworks/server-webpack5/package.json +++ b/code/frameworks/server-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/server-webpack5", - "version": "8.5.0-alpha.6", + "version": "8.5.0-alpha.7", "description": "Storybook for Server: View HTML snippets from a server in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/svelte-vite/package.json b/code/frameworks/svelte-vite/package.json index d9c01fab3e6..28db8d6a8ba 100644 --- a/code/frameworks/svelte-vite/package.json +++ b/code/frameworks/svelte-vite/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/svelte-vite", - "version": "8.5.0-alpha.6", + "version": "8.5.0-alpha.7", "description": "Storybook for Svelte and Vite: Develop Svelte components in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/svelte-webpack5/package.json b/code/frameworks/svelte-webpack5/package.json index cc3e3a0cdbb..45844e1cca1 100644 --- a/code/frameworks/svelte-webpack5/package.json +++ b/code/frameworks/svelte-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/svelte-webpack5", - "version": "8.5.0-alpha.6", + "version": "8.5.0-alpha.7", "description": "Storybook for Svelte: Develop Svelte Component in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/sveltekit/package.json b/code/frameworks/sveltekit/package.json index a4be4962f70..50c2be36bf1 100644 --- a/code/frameworks/sveltekit/package.json +++ b/code/frameworks/sveltekit/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/sveltekit", - "version": "8.5.0-alpha.6", + "version": "8.5.0-alpha.7", "description": "Storybook for SvelteKit", "keywords": [ "storybook", diff --git a/code/frameworks/vue3-vite/package.json b/code/frameworks/vue3-vite/package.json index 48545c2b449..af419c4e9ea 100644 --- a/code/frameworks/vue3-vite/package.json +++ b/code/frameworks/vue3-vite/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/vue3-vite", - "version": "8.5.0-alpha.6", + "version": "8.5.0-alpha.7", "description": "Storybook for Vue3 and Vite: Develop Vue3 components in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/vue3-webpack5/package.json b/code/frameworks/vue3-webpack5/package.json index 07a20587899..baaf0d3871e 100644 --- a/code/frameworks/vue3-webpack5/package.json +++ b/code/frameworks/vue3-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/vue3-webpack5", - "version": "8.5.0-alpha.6", + "version": "8.5.0-alpha.7", "description": "Storybook for Vue 3: Develop Vue 3 Components in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/web-components-vite/package.json b/code/frameworks/web-components-vite/package.json index 17f63875e7b..5ddb6a7dbc8 100644 --- a/code/frameworks/web-components-vite/package.json +++ b/code/frameworks/web-components-vite/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/web-components-vite", - "version": "8.5.0-alpha.6", + "version": "8.5.0-alpha.7", "description": "Storybook for web-components and Vite: Develop Web Components in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/web-components-webpack5/package.json b/code/frameworks/web-components-webpack5/package.json index 3bf79b6b3d5..31a32108f4f 100644 --- a/code/frameworks/web-components-webpack5/package.json +++ b/code/frameworks/web-components-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/web-components-webpack5", - "version": "8.5.0-alpha.6", + "version": "8.5.0-alpha.7", "description": "Storybook for web-components: View web components snippets in isolation with Hot Reloading.", "keywords": [ "lit", diff --git a/code/lib/blocks/package.json b/code/lib/blocks/package.json index 12d2051d741..8d65c9b03ec 100644 --- a/code/lib/blocks/package.json +++ b/code/lib/blocks/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/blocks", - "version": "8.5.0-alpha.6", + "version": "8.5.0-alpha.7", "description": "Storybook Doc Blocks", "keywords": [ "storybook" diff --git a/code/lib/cli-sb/package.json b/code/lib/cli-sb/package.json index acce3f60501..8c484134960 100644 --- a/code/lib/cli-sb/package.json +++ b/code/lib/cli-sb/package.json @@ -1,6 +1,6 @@ { "name": "sb", - "version": "8.5.0-alpha.6", + "version": "8.5.0-alpha.7", "description": "Storybook CLI", "keywords": [ "storybook" diff --git a/code/lib/cli-storybook/package.json b/code/lib/cli-storybook/package.json index 74d7a05e15d..0af14e48849 100644 --- a/code/lib/cli-storybook/package.json +++ b/code/lib/cli-storybook/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/cli", - "version": "8.5.0-alpha.6", + "version": "8.5.0-alpha.7", "description": "Storybook CLI", "keywords": [ "storybook" diff --git a/code/lib/cli/package.json b/code/lib/cli/package.json index f925bd087b2..5b17f7e29b4 100644 --- a/code/lib/cli/package.json +++ b/code/lib/cli/package.json @@ -1,6 +1,6 @@ { "name": "storybook", - "version": "8.5.0-alpha.6", + "version": "8.5.0-alpha.7", "description": "Storybook's CLI - install, dev, build, upgrade, and more", "keywords": [ "cli", diff --git a/code/lib/codemod/package.json b/code/lib/codemod/package.json index f24d5674f1d..5313cd7738d 100644 --- a/code/lib/codemod/package.json +++ b/code/lib/codemod/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/codemod", - "version": "8.5.0-alpha.6", + "version": "8.5.0-alpha.7", "description": "A collection of codemod scripts written with JSCodeshift", "keywords": [ "storybook" diff --git a/code/lib/core-webpack/package.json b/code/lib/core-webpack/package.json index 7ba143ba76c..594a5b64389 100644 --- a/code/lib/core-webpack/package.json +++ b/code/lib/core-webpack/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/core-webpack", - "version": "8.5.0-alpha.6", + "version": "8.5.0-alpha.7", "description": "Storybook framework-agnostic API", "keywords": [ "storybook" diff --git a/code/lib/create-storybook/package.json b/code/lib/create-storybook/package.json index 4aabf513416..0bd460f8a4c 100644 --- a/code/lib/create-storybook/package.json +++ b/code/lib/create-storybook/package.json @@ -1,6 +1,6 @@ { "name": "create-storybook", - "version": "8.5.0-alpha.6", + "version": "8.5.0-alpha.7", "description": "Initialize Storybook into your project", "homepage": "https://github.com/storybookjs/storybook/tree/next/code/lib/create-storybook", "bugs": { diff --git a/code/lib/csf-plugin/package.json b/code/lib/csf-plugin/package.json index b42db5784cd..976a24a898a 100644 --- a/code/lib/csf-plugin/package.json +++ b/code/lib/csf-plugin/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/csf-plugin", - "version": "8.5.0-alpha.6", + "version": "8.5.0-alpha.7", "description": "Enrich CSF files via static analysis", "keywords": [ "storybook" diff --git a/code/lib/instrumenter/package.json b/code/lib/instrumenter/package.json index 71da1cd39cf..7af99d61770 100644 --- a/code/lib/instrumenter/package.json +++ b/code/lib/instrumenter/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/instrumenter", - "version": "8.5.0-alpha.6", + "version": "8.5.0-alpha.7", "description": "", "keywords": [ "storybook" diff --git a/code/lib/react-dom-shim/package.json b/code/lib/react-dom-shim/package.json index 82b22e60366..bde501fc191 100644 --- a/code/lib/react-dom-shim/package.json +++ b/code/lib/react-dom-shim/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/react-dom-shim", - "version": "8.5.0-alpha.6", + "version": "8.5.0-alpha.7", "description": "", "keywords": [ "storybook" diff --git a/code/lib/source-loader/package.json b/code/lib/source-loader/package.json index 6c6c36c8503..fb2b1ae82de 100644 --- a/code/lib/source-loader/package.json +++ b/code/lib/source-loader/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/source-loader", - "version": "8.5.0-alpha.6", + "version": "8.5.0-alpha.7", "description": "Source loader", "keywords": [ "lib", diff --git a/code/lib/test/package.json b/code/lib/test/package.json index 62d3358335e..0687aeb32c8 100644 --- a/code/lib/test/package.json +++ b/code/lib/test/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/test", - "version": "8.5.0-alpha.6", + "version": "8.5.0-alpha.7", "description": "", "keywords": [ "storybook" diff --git a/code/package.json b/code/package.json index 3835aa20f9d..cc5b14104d8 100644 --- a/code/package.json +++ b/code/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/root", - "version": "8.5.0-alpha.6", + "version": "8.5.0-alpha.7", "private": true, "description": "Storybook root", "homepage": "https://storybook.js.org/", @@ -293,6 +293,5 @@ "Dependency Upgrades" ] ] - }, - "deferredNextVersion": "8.5.0-alpha.7" + } } diff --git a/code/presets/create-react-app/package.json b/code/presets/create-react-app/package.json index 11b3a32f3a5..81af4550773 100644 --- a/code/presets/create-react-app/package.json +++ b/code/presets/create-react-app/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preset-create-react-app", - "version": "8.5.0-alpha.6", + "version": "8.5.0-alpha.7", "description": "Storybook for Create React App preset", "keywords": [ "storybook" diff --git a/code/presets/html-webpack/package.json b/code/presets/html-webpack/package.json index f3417cf69c2..6c09e460eda 100644 --- a/code/presets/html-webpack/package.json +++ b/code/presets/html-webpack/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preset-html-webpack", - "version": "8.5.0-alpha.6", + "version": "8.5.0-alpha.7", "description": "Storybook for HTML: View HTML snippets in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/presets/preact-webpack/package.json b/code/presets/preact-webpack/package.json index f637b8f7a12..e10ef59f0b7 100644 --- a/code/presets/preact-webpack/package.json +++ b/code/presets/preact-webpack/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preset-preact-webpack", - "version": "8.5.0-alpha.6", + "version": "8.5.0-alpha.7", "description": "Storybook for Preact: Develop Preact Component in isolation.", "keywords": [ "storybook" diff --git a/code/presets/react-webpack/package.json b/code/presets/react-webpack/package.json index 20e1b82e8cd..4c8b1dea531 100644 --- a/code/presets/react-webpack/package.json +++ b/code/presets/react-webpack/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preset-react-webpack", - "version": "8.5.0-alpha.6", + "version": "8.5.0-alpha.7", "description": "Storybook for React: Develop React Component in isolation with Hot Reloading", "keywords": [ "storybook" diff --git a/code/presets/server-webpack/package.json b/code/presets/server-webpack/package.json index 12aeb285318..30530aba228 100644 --- a/code/presets/server-webpack/package.json +++ b/code/presets/server-webpack/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preset-server-webpack", - "version": "8.5.0-alpha.6", + "version": "8.5.0-alpha.7", "description": "Storybook for Server: View HTML snippets from a server in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/presets/svelte-webpack/package.json b/code/presets/svelte-webpack/package.json index d49e9829082..d8adcaf6895 100644 --- a/code/presets/svelte-webpack/package.json +++ b/code/presets/svelte-webpack/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preset-svelte-webpack", - "version": "8.5.0-alpha.6", + "version": "8.5.0-alpha.7", "description": "Storybook for Svelte: Develop Svelte Component in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/presets/vue3-webpack/package.json b/code/presets/vue3-webpack/package.json index 636bcc89fe7..b43b38b6d64 100644 --- a/code/presets/vue3-webpack/package.json +++ b/code/presets/vue3-webpack/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preset-vue3-webpack", - "version": "8.5.0-alpha.6", + "version": "8.5.0-alpha.7", "description": "Storybook for Vue 3: Develop Vue 3 Components in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/renderers/html/package.json b/code/renderers/html/package.json index ff6f4710590..df2b8c8bf83 100644 --- a/code/renderers/html/package.json +++ b/code/renderers/html/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/html", - "version": "8.5.0-alpha.6", + "version": "8.5.0-alpha.7", "description": "Storybook HTML renderer", "keywords": [ "storybook" diff --git a/code/renderers/preact/package.json b/code/renderers/preact/package.json index b4878053273..6a04f653df6 100644 --- a/code/renderers/preact/package.json +++ b/code/renderers/preact/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preact", - "version": "8.5.0-alpha.6", + "version": "8.5.0-alpha.7", "description": "Storybook Preact renderer", "keywords": [ "storybook" diff --git a/code/renderers/react/package.json b/code/renderers/react/package.json index 122722424ab..2a94e89d449 100644 --- a/code/renderers/react/package.json +++ b/code/renderers/react/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/react", - "version": "8.5.0-alpha.6", + "version": "8.5.0-alpha.7", "description": "Storybook React renderer", "keywords": [ "storybook" diff --git a/code/renderers/server/package.json b/code/renderers/server/package.json index 48f1dcce4be..cc8d6e1145c 100644 --- a/code/renderers/server/package.json +++ b/code/renderers/server/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/server", - "version": "8.5.0-alpha.6", + "version": "8.5.0-alpha.7", "description": "Storybook Server renderer", "keywords": [ "storybook" diff --git a/code/renderers/svelte/package.json b/code/renderers/svelte/package.json index da3aa086a60..48f9135404b 100644 --- a/code/renderers/svelte/package.json +++ b/code/renderers/svelte/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/svelte", - "version": "8.5.0-alpha.6", + "version": "8.5.0-alpha.7", "description": "Storybook Svelte renderer", "keywords": [ "storybook" diff --git a/code/renderers/vue3/package.json b/code/renderers/vue3/package.json index 23df8233538..9d6ead5f33d 100644 --- a/code/renderers/vue3/package.json +++ b/code/renderers/vue3/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/vue3", - "version": "8.5.0-alpha.6", + "version": "8.5.0-alpha.7", "description": "Storybook Vue 3 renderer", "keywords": [ "storybook" diff --git a/code/renderers/web-components/package.json b/code/renderers/web-components/package.json index aa866f7ff91..77b1518c0c5 100644 --- a/code/renderers/web-components/package.json +++ b/code/renderers/web-components/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/web-components", - "version": "8.5.0-alpha.6", + "version": "8.5.0-alpha.7", "description": "Storybook web-components renderer", "keywords": [ "lit", From dd9ed96ee6c43e7a15fa5d1543057ea8cc8e0f00 Mon Sep 17 00:00:00 2001 From: Yann Braga <yannbf@gmail.com> Date: Tue, 19 Nov 2024 09:06:04 +0100 Subject: [PATCH 082/101] skip certain stories in vitest integration --- .../experimental-nextjs-vite/template/stories/RSC.stories.tsx | 2 +- code/frameworks/nextjs/template/stories/RSC.stories.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/code/frameworks/experimental-nextjs-vite/template/stories/RSC.stories.tsx b/code/frameworks/experimental-nextjs-vite/template/stories/RSC.stories.tsx index f0db3625b4f..655a5f1a93e 100644 --- a/code/frameworks/experimental-nextjs-vite/template/stories/RSC.stories.tsx +++ b/code/frameworks/experimental-nextjs-vite/template/stories/RSC.stories.tsx @@ -28,7 +28,7 @@ export const DisableRSC: Story = { }; export const Errored: Story = { - tags: ['!test'], + tags: ['!test', '!vitest'], parameters: { chromatic: { disable: true }, }, diff --git a/code/frameworks/nextjs/template/stories/RSC.stories.tsx b/code/frameworks/nextjs/template/stories/RSC.stories.tsx index f0db3625b4f..655a5f1a93e 100644 --- a/code/frameworks/nextjs/template/stories/RSC.stories.tsx +++ b/code/frameworks/nextjs/template/stories/RSC.stories.tsx @@ -28,7 +28,7 @@ export const DisableRSC: Story = { }; export const Errored: Story = { - tags: ['!test'], + tags: ['!test', '!vitest'], parameters: { chromatic: { disable: true }, }, From ac49cf16ca95dc5db7569d475ab0edd64b432eb9 Mon Sep 17 00:00:00 2001 From: Jeppe Reinhold <jeppe@reinhold.is> Date: Tue, 19 Nov 2024 10:41:40 +0100 Subject: [PATCH 083/101] cleanup --- .../test/src/components/ContextMenuItem.tsx | 7 ++++++- .../components/{Title.tsx => PanelTitle.tsx} | 2 +- code/addons/test/src/manager.tsx | 10 +++++----- .../modules/experimental_testmodule.ts | 20 ++++--------------- 4 files changed, 16 insertions(+), 23 deletions(-) rename code/addons/test/src/components/{Title.tsx => PanelTitle.tsx} (95%) diff --git a/code/addons/test/src/components/ContextMenuItem.tsx b/code/addons/test/src/components/ContextMenuItem.tsx index 8cece6004c5..5cc6b58297a 100644 --- a/code/addons/test/src/components/ContextMenuItem.tsx +++ b/code/addons/test/src/components/ContextMenuItem.tsx @@ -76,7 +76,12 @@ export const ContextMenuItem: FC<{ } return ( - <div onClick={(event) => event.stopPropagation()}> + <div + onClick={(event) => { + // stopPropagation to prevent the parent from closing the context menu, which is the default behavior onClick + event.stopPropagation(); + }} + > <ListItem title={title} center={description} diff --git a/code/addons/test/src/components/Title.tsx b/code/addons/test/src/components/PanelTitle.tsx similarity index 95% rename from code/addons/test/src/components/Title.tsx rename to code/addons/test/src/components/PanelTitle.tsx index 2e7c063f4e4..4ef1ddedd30 100644 --- a/code/addons/test/src/components/Title.tsx +++ b/code/addons/test/src/components/PanelTitle.tsx @@ -5,7 +5,7 @@ import { useAddonState } from 'storybook/internal/manager-api'; import { ADDON_ID } from '../constants'; -export function Title() { +export function PanelTitle() { const [addonState = {}] = useAddonState(ADDON_ID); const { hasException, interactionsCount } = addonState as any; diff --git a/code/addons/test/src/manager.tsx b/code/addons/test/src/manager.tsx index fadef63f49e..7294cedfdf8 100644 --- a/code/addons/test/src/manager.tsx +++ b/code/addons/test/src/manager.tsx @@ -17,8 +17,8 @@ import { EyeIcon, PlayHollowIcon, StopAltHollowIcon } from '@storybook/icons'; import { ContextMenuItem } from './components/ContextMenuItem'; import { GlobalErrorModal } from './components/GlobalErrorModal'; import { Panel } from './components/Panel'; +import { PanelTitle } from './components/PanelTitle'; import { RelativeTime } from './components/RelativeTime'; -import { Title } from './components/Title'; import { ADDON_ID, PANEL_ID, TEST_PROVIDER_ID } from './constants'; import type { TestResult } from './node/reporter'; @@ -53,7 +53,7 @@ const Info = styled.div({ marginLeft: 6, }); -const Title2 = styled.div<{ crashed?: boolean }>(({ crashed, theme }) => ({ +const SidebarContextMenuTitle = styled.div<{ crashed?: boolean }>(({ crashed, theme }) => ({ fontSize: theme.typography.size.s1, fontWeight: crashed ? 'bold' : 'normal', color: crashed ? theme.color.negativeText : theme.color.defaultText, @@ -131,9 +131,9 @@ addons.register(ADDON_ID, (api) => { return ( <> <Info> - <Title2 crashed={state.crashed} id="testing-module-title"> + <SidebarContextMenuTitle crashed={state.crashed} id="testing-module-title"> {title} - </Title2> + </SidebarContextMenuTitle> <Description id="testing-module-description">{description}</Description> </Info> @@ -231,7 +231,7 @@ addons.register(ADDON_ID, (api) => { addons.add(PANEL_ID, { type: types.PANEL, - title: () => <Title />, + title: () => <PanelTitle />, match: ({ viewMode }) => viewMode === 'story', render: ({ active }) => { return ( diff --git a/code/core/src/manager-api/modules/experimental_testmodule.ts b/code/core/src/manager-api/modules/experimental_testmodule.ts index 7eb6203e972..54bfdc437da 100644 --- a/code/core/src/manager-api/modules/experimental_testmodule.ts +++ b/code/core/src/manager-api/modules/experimental_testmodule.ts @@ -12,6 +12,8 @@ import { type TestingModuleRunRequestPayload, } from '@storybook/core/core-events'; +import invariant from 'tiny-invariant'; + import type { ModuleFn } from '../lib/types'; export type SubState = { @@ -76,27 +78,20 @@ export const init: ModuleFn<SubAPI, SubState> = ({ store, fullAPI }) => { ); }, runTestProvider(id, options) { - console.log('LOG: runTestProvider', id, options); if (!options?.entryId) { - console.log('LOG: runTestProvider: no entryId, running all tests'); const payload: TestingModuleRunAllRequestPayload = { providerId: id }; fullAPI.emit(TESTING_MODULE_RUN_ALL_REQUEST, payload); return () => api.cancelTestProvider(id); } const index = store.getState().index; - if (!index) { - throw new Error('no index?'); - } + invariant(index, 'The index is currently unavailable'); const entry = index[options.entryId]; - if (!entry) { - throw new Error('no entry?'); - } + invariant(entry, `No entry found in the index for id '${options.entryId}'`); if (entry.type === 'story') { - console.log('LOG: runTestProvider: running single story', entry); const payload: TestingModuleRunRequestPayload = { providerId: id, payload: [ @@ -119,10 +114,8 @@ export const init: ModuleFn<SubAPI, SubState> = ({ store, fullAPI }) => { const findComponents = (entryId: StoryId) => { const foundEntry = index[entryId]; - console.log(`Processing entry: ${entryId}`, foundEntry); switch (foundEntry.type) { case 'component': - console.log(`Adding component entry: ${entryId}`); const firstStoryId = foundEntry.children.find( (childId) => index[childId].type === 'story' ); @@ -135,8 +128,6 @@ export const init: ModuleFn<SubAPI, SubState> = ({ store, fullAPI }) => { case 'story': { // this shouldn't happen because we don't visit components' children. // so we never get to a story directly. - // unless groups can have direct stories without components? - console.log(`Adding story entry: ${entryId}`); payloads.add({ importPath: foundEntry.importPath, stories: [ @@ -152,18 +143,15 @@ export const init: ModuleFn<SubAPI, SubState> = ({ store, fullAPI }) => { return; } default: - console.log(`Processing children of entry: ${entryId}`); foundEntry.children.forEach(findComponents); } }; - console.log(`Starting to find components for entryId:`, options.entryId); findComponents(options.entryId); const payload: TestingModuleRunRequestPayload = { providerId: id, payload: Array.from(payloads), }; - console.log('LOG: payload', payload); fullAPI.emit(TESTING_MODULE_RUN_REQUEST, payload); return () => api.cancelTestProvider(id); From fe2cec75e1a73bdade071ca52aef95ac4b06affe Mon Sep 17 00:00:00 2001 From: Jeppe Reinhold <jeppe@reinhold.is> Date: Tue, 19 Nov 2024 10:43:39 +0100 Subject: [PATCH 084/101] rename contextMenu > sidebarContextMenu in addon API --- code/addons/test/src/manager.tsx | 2 +- code/core/src/manager/components/sidebar/ContextMenu.tsx | 3 +-- code/core/src/manager/components/sidebar/Tree.stories.tsx | 8 ++++---- code/core/src/types/modules/addons.ts | 2 +- 4 files changed, 7 insertions(+), 8 deletions(-) diff --git a/code/addons/test/src/manager.tsx b/code/addons/test/src/manager.tsx index 7294cedfdf8..b53f4bdfb1d 100644 --- a/code/addons/test/src/manager.tsx +++ b/code/addons/test/src/manager.tsx @@ -83,7 +83,7 @@ addons.register(ADDON_ID, (api) => { watchable: true, name: 'Component tests', - contextMenu: ({ context, state }, { ListItem }) => { + sidebarContextMenu: ({ context, state }, { ListItem }) => { if (context.type === 'docs') { return null; } diff --git a/code/core/src/manager/components/sidebar/ContextMenu.tsx b/code/core/src/manager/components/sidebar/ContextMenu.tsx index 8134ac10757..76118ffc871 100644 --- a/code/core/src/manager/components/sidebar/ContextMenu.tsx +++ b/code/core/src/manager/components/sidebar/ContextMenu.tsx @@ -106,8 +106,7 @@ export function generateTestProviderLinks( if (!state) { return null; } - - const content = state.contextMenu?.({ context, state }, ContextMenu); + const content = state.sidebarContextMenu?.({ context, state }, ContextMenu); if (!content) { return null; diff --git a/code/core/src/manager/components/sidebar/Tree.stories.tsx b/code/core/src/manager/components/sidebar/Tree.stories.tsx index 38a35e16be3..baadd2e60fe 100644 --- a/code/core/src/manager/components/sidebar/Tree.stories.tsx +++ b/code/core/src/manager/components/sidebar/Tree.stories.tsx @@ -24,7 +24,7 @@ const managerContext: any = { type: 'experimental_TEST_PROVIDER', id: 'component-tests', render: () => 'Component tests', - contextMenu: () => <div>TEST_PROVIDER_CONTEXT_CONTENT</div>, + sidebarContextMenu: () => <div>TEST_PROVIDER_CONTEXT_CONTENT</div>, runnable: true, watchable: true, }, @@ -32,7 +32,7 @@ const managerContext: any = { type: 'experimental_TEST_PROVIDER', id: 'visual-tests', render: () => 'Visual tests', - contextMenu: () => null, + sidebarContextMenu: () => null, runnable: true, }, }, @@ -46,7 +46,7 @@ const managerContext: any = { type: 'experimental_TEST_PROVIDER', id: 'component-tests', render: () => 'Component tests', - contextMenu: () => <div>TEST_PROVIDER_CONTEXT_CONTENT</div>, + sidebarContextMenu: () => <div>TEST_PROVIDER_CONTEXT_CONTENT</div>, runnable: true, watchable: true, }, @@ -54,7 +54,7 @@ const managerContext: any = { type: 'experimental_TEST_PROVIDER', id: 'visual-tests', render: () => 'Visual tests', - contextMenu: () => null, + sidebarContextMenu: () => null, runnable: true, }, })), diff --git a/code/core/src/types/modules/addons.ts b/code/core/src/types/modules/addons.ts index 4fb2de2f289..d01563530bb 100644 --- a/code/core/src/types/modules/addons.ts +++ b/code/core/src/types/modules/addons.ts @@ -479,7 +479,7 @@ export interface Addon_TestProviderType< /** @deprecated Use render instead */ description?: (state: TestProviderConfig & Addon_TestProviderState<Details>) => ReactNode; render?: (state: TestProviderConfig & Addon_TestProviderState<Details>) => ReactNode; - contextMenu?: ( + sidebarContextMenu?: ( options: { context: API_HashEntry; state: Addon_TestProviderState<Details>; From b6aa053ce5a39aee81b5ca73efcb16dc2341827a Mon Sep 17 00:00:00 2001 From: Jeppe Reinhold <jeppe@reinhold.is> Date: Tue, 19 Nov 2024 11:13:13 +0100 Subject: [PATCH 085/101] hide context menu from test-less stories --- code/addons/test/src/manager.tsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/code/addons/test/src/manager.tsx b/code/addons/test/src/manager.tsx index b53f4bdfb1d..9b560cdd8ce 100644 --- a/code/addons/test/src/manager.tsx +++ b/code/addons/test/src/manager.tsx @@ -87,6 +87,9 @@ addons.register(ADDON_ID, (api) => { if (context.type === 'docs') { return null; } + if (context.type === 'story' && !context.tags.includes('test')) { + return null; + } return <ContextMenuItem context={context} state={state} ListItem={ListItem} />; }, From f771bdffa68d8988934d3d96429f4658aea2d3f4 Mon Sep 17 00:00:00 2001 From: Jeppe Reinhold <jeppe@reinhold.is> Date: Tue, 19 Nov 2024 11:13:22 +0100 Subject: [PATCH 086/101] fix React key warning --- .../src/components/components/tooltip/TooltipLinkList.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/code/core/src/components/components/tooltip/TooltipLinkList.tsx b/code/core/src/components/components/tooltip/TooltipLinkList.tsx index 844a4ed228b..91e86eae71a 100644 --- a/code/core/src/components/components/tooltip/TooltipLinkList.tsx +++ b/code/core/src/components/components/tooltip/TooltipLinkList.tsx @@ -1,5 +1,5 @@ import type { ComponentProps, ReactNode, SyntheticEvent } from 'react'; -import React, { useCallback } from 'react'; +import React, { Fragment, useCallback } from 'react'; import { styled } from '@storybook/core/theming'; @@ -77,7 +77,7 @@ export const TooltipLinkList = ({ links, LinkWrapper, ...props }: TooltipLinkLis <Group key={group.map((link) => link.id).join(`~${index}~`)}> {group.map((link) => { if ('content' in link) { - return link.content; + return <Fragment key={link.id}>{link.content}</Fragment>; } return ( <Item key={link.id} isIndented={isIndented} LinkWrapper={LinkWrapper} {...link} /> From 48a7a5171166ffb6ef4e01b96203864e4b374971 Mon Sep 17 00:00:00 2001 From: storybook-bot <32066757+storybook-bot@users.noreply.github.com> Date: Tue, 19 Nov 2024 12:37:53 +0000 Subject: [PATCH 087/101] Write changelog for 8.5.0-alpha.8 [skip ci] --- CHANGELOG.prerelease.md | 4 ++++ code/package.json | 3 ++- docs/versions/next.json | 2 +- 3 files changed, 7 insertions(+), 2 deletions(-) diff --git a/CHANGELOG.prerelease.md b/CHANGELOG.prerelease.md index e4c62d11412..6d1fd43a835 100644 --- a/CHANGELOG.prerelease.md +++ b/CHANGELOG.prerelease.md @@ -1,3 +1,7 @@ +## 8.5.0-alpha.8 + +- UI: Sidebar context menu addon API - [#29557](https://github.com/storybookjs/storybook/pull/29557), thanks @ndelangen! + ## 8.5.0-alpha.7 - CLI: Disable corepack auto pin behavior - [#29627](https://github.com/storybookjs/storybook/pull/29627), thanks @yannbf! diff --git a/code/package.json b/code/package.json index cc5b14104d8..723ab1c6d24 100644 --- a/code/package.json +++ b/code/package.json @@ -293,5 +293,6 @@ "Dependency Upgrades" ] ] - } + }, + "deferredNextVersion": "8.5.0-alpha.8" } diff --git a/docs/versions/next.json b/docs/versions/next.json index 0b082399cc7..29da365254a 100644 --- a/docs/versions/next.json +++ b/docs/versions/next.json @@ -1 +1 @@ -{"version":"8.5.0-alpha.7","info":{"plain":"- CLI: Disable corepack auto pin behavior - [#29627](https://github.com/storybookjs/storybook/pull/29627), thanks @yannbf!\n- RNW-Vite: Integrate with experimental-addon-test - [#29645](https://github.com/storybookjs/storybook/pull/29645), thanks @shilman!"}} +{"version":"8.5.0-alpha.8","info":{"plain":"- UI: Sidebar context menu addon API - [#29557](https://github.com/storybookjs/storybook/pull/29557), thanks @ndelangen!"}} From 7704a1e3126ef7d3e27f9a9463b7746e49a55e57 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Leosvel=20P=C3=A9rez=20Espinosa?= <leosvel.perez.espinosa@gmail.com> Date: Tue, 19 Nov 2024 15:37:42 +0100 Subject: [PATCH 088/101] Angular: Support v19 --- code/frameworks/angular/package.json | 22 +++++++++---------- .../custom-pipes.stories.ts | 2 -- .../basics/component-with-pipe/custom.pipe.ts | 1 + .../with-pipe.component.ts | 1 + .../ng-module/angular-src/chip-text.pipe.ts | 1 + .../ng-module/angular-src/chip.component.ts | 1 + .../angular-src/chips-group.component.ts | 1 + .../ng-module/import-module-chip.stories.ts | 2 -- .../import-module-for-root.stories.ts | 2 -- .../basics/ng-module/import-module.stories.ts | 2 -- code/yarn.lock | 22 +++++++++---------- 11 files changed, 27 insertions(+), 30 deletions(-) diff --git a/code/frameworks/angular/package.json b/code/frameworks/angular/package.json index 775ccf58bbd..6ebca5e1677 100644 --- a/code/frameworks/angular/package.json +++ b/code/frameworks/angular/package.json @@ -81,17 +81,17 @@ "zone.js": "^0.14.2" }, "peerDependencies": { - "@angular-devkit/architect": ">=0.1500.0 < 0.1900.0", - "@angular-devkit/build-angular": ">=15.0.0 < 19.0.0", - "@angular-devkit/core": ">=15.0.0 < 19.0.0", - "@angular/cli": ">=15.0.0 < 19.0.0", - "@angular/common": ">=15.0.0 < 19.0.0", - "@angular/compiler": ">=15.0.0 < 19.0.0", - "@angular/compiler-cli": ">=15.0.0 < 19.0.0", - "@angular/core": ">=15.0.0 < 19.0.0", - "@angular/forms": ">=15.0.0 < 19.0.0", - "@angular/platform-browser": ">=15.0.0 < 19.0.0", - "@angular/platform-browser-dynamic": ">=15.0.0 < 19.0.0", + "@angular-devkit/architect": ">=0.1500.0 < 0.2000.0", + "@angular-devkit/build-angular": ">=15.0.0 < 20.0.0", + "@angular-devkit/core": ">=15.0.0 < 20.0.0", + "@angular/cli": ">=15.0.0 < 20.0.0", + "@angular/common": ">=15.0.0 < 20.0.0", + "@angular/compiler": ">=15.0.0 < 20.0.0", + "@angular/compiler-cli": ">=15.0.0 < 20.0.0", + "@angular/core": ">=15.0.0 < 20.0.0", + "@angular/forms": ">=15.0.0 < 20.0.0", + "@angular/platform-browser": ">=15.0.0 < 20.0.0", + "@angular/platform-browser-dynamic": ">=15.0.0 < 20.0.0", "rxjs": "^6.0.0 || ^7.4.0", "storybook": "workspace:^", "typescript": "^4.0.0 || ^5.0.0", diff --git a/code/frameworks/angular/template/stories/basics/component-with-pipe/custom-pipes.stories.ts b/code/frameworks/angular/template/stories/basics/component-with-pipe/custom-pipes.stories.ts index 1c83974691d..9a4a8e53c57 100644 --- a/code/frameworks/angular/template/stories/basics/component-with-pipe/custom-pipes.stories.ts +++ b/code/frameworks/angular/template/stories/basics/component-with-pipe/custom-pipes.stories.ts @@ -11,8 +11,6 @@ const meta: Meta<WithPipeComponent> = { declarations: [CustomPipePipe], }), ], - tags: ['!test', '!vitest'], - parameters: { chromatic: { disable: true } }, }; export default meta; diff --git a/code/frameworks/angular/template/stories/basics/component-with-pipe/custom.pipe.ts b/code/frameworks/angular/template/stories/basics/component-with-pipe/custom.pipe.ts index 0038bd60924..e588751b936 100644 --- a/code/frameworks/angular/template/stories/basics/component-with-pipe/custom.pipe.ts +++ b/code/frameworks/angular/template/stories/basics/component-with-pipe/custom.pipe.ts @@ -1,6 +1,7 @@ import { PipeTransform, Pipe } from '@angular/core'; @Pipe({ + standalone: false, name: 'customPipe', }) export class CustomPipePipe implements PipeTransform { diff --git a/code/frameworks/angular/template/stories/basics/component-with-pipe/with-pipe.component.ts b/code/frameworks/angular/template/stories/basics/component-with-pipe/with-pipe.component.ts index 4582170ecf7..12ec8217164 100644 --- a/code/frameworks/angular/template/stories/basics/component-with-pipe/with-pipe.component.ts +++ b/code/frameworks/angular/template/stories/basics/component-with-pipe/with-pipe.component.ts @@ -1,6 +1,7 @@ import { Component, Input } from '@angular/core'; @Component({ + standalone: false, selector: 'storybook-with-pipe', template: ` <h1>{{ field | customPipe }}</h1> `, }) diff --git a/code/frameworks/angular/template/stories/basics/ng-module/angular-src/chip-text.pipe.ts b/code/frameworks/angular/template/stories/basics/ng-module/angular-src/chip-text.pipe.ts index 0d628239d07..9c6f1745063 100644 --- a/code/frameworks/angular/template/stories/basics/ng-module/angular-src/chip-text.pipe.ts +++ b/code/frameworks/angular/template/stories/basics/ng-module/angular-src/chip-text.pipe.ts @@ -1,6 +1,7 @@ import { PipeTransform, Pipe } from '@angular/core'; @Pipe({ + standalone: false, name: 'chipText', }) export class ChipTextPipe implements PipeTransform { diff --git a/code/frameworks/angular/template/stories/basics/ng-module/angular-src/chip.component.ts b/code/frameworks/angular/template/stories/basics/ng-module/angular-src/chip.component.ts index 52546084465..7804fe73fbd 100644 --- a/code/frameworks/angular/template/stories/basics/ng-module/angular-src/chip.component.ts +++ b/code/frameworks/angular/template/stories/basics/ng-module/angular-src/chip.component.ts @@ -2,6 +2,7 @@ import { Component, Input, Output, EventEmitter, Inject, HostBinding } from '@an import { CHIP_COLOR } from './chip-color.token'; @Component({ + standalone: false, selector: 'storybook-chip', template: ` <span class="text">{{ displayText | chipText }}</span> diff --git a/code/frameworks/angular/template/stories/basics/ng-module/angular-src/chips-group.component.ts b/code/frameworks/angular/template/stories/basics/ng-module/angular-src/chips-group.component.ts index 98131407a01..fa56aca4886 100644 --- a/code/frameworks/angular/template/stories/basics/ng-module/angular-src/chips-group.component.ts +++ b/code/frameworks/angular/template/stories/basics/ng-module/angular-src/chips-group.component.ts @@ -1,6 +1,7 @@ import { Component, Input, Output, EventEmitter } from '@angular/core'; @Component({ + standalone: false, selector: 'storybook-chips-group', template: ` <storybook-chip diff --git a/code/frameworks/angular/template/stories/basics/ng-module/import-module-chip.stories.ts b/code/frameworks/angular/template/stories/basics/ng-module/import-module-chip.stories.ts index c31db80a8df..e1a53bb49cf 100644 --- a/code/frameworks/angular/template/stories/basics/ng-module/import-module-chip.stories.ts +++ b/code/frameworks/angular/template/stories/basics/ng-module/import-module-chip.stories.ts @@ -10,8 +10,6 @@ const meta: Meta<ChipComponent> = { imports: [ChipsModule], }), ], - tags: ['!test', '!vitest'], - parameters: { chromatic: { disable: true } }, }; export default meta; diff --git a/code/frameworks/angular/template/stories/basics/ng-module/import-module-for-root.stories.ts b/code/frameworks/angular/template/stories/basics/ng-module/import-module-for-root.stories.ts index f3768cc7d3d..73ef9915d43 100644 --- a/code/frameworks/angular/template/stories/basics/ng-module/import-module-for-root.stories.ts +++ b/code/frameworks/angular/template/stories/basics/ng-module/import-module-for-root.stories.ts @@ -28,8 +28,6 @@ const meta: Meta<ChipsGroupComponent> = { removeChipClick: { action: 'Remove chip' }, removeAllChipsClick: { action: 'Remove all chips clicked' }, }, - tags: ['!test', '!vitest'], - parameters: { chromatic: { disable: true } }, }; export default meta; diff --git a/code/frameworks/angular/template/stories/basics/ng-module/import-module.stories.ts b/code/frameworks/angular/template/stories/basics/ng-module/import-module.stories.ts index e13c48a4338..b82541424db 100644 --- a/code/frameworks/angular/template/stories/basics/ng-module/import-module.stories.ts +++ b/code/frameworks/angular/template/stories/basics/ng-module/import-module.stories.ts @@ -11,8 +11,6 @@ const meta: Meta<ChipsGroupComponent> = { imports: [ChipsModule], }), ], - tags: ['!test', '!vitest'], - parameters: { chromatic: { disable: true } }, }; export default meta; diff --git a/code/yarn.lock b/code/yarn.lock index ecaf4c1cb52..71e20471afb 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -6145,17 +6145,17 @@ __metadata: webpack: "npm:5" zone.js: "npm:^0.14.2" peerDependencies: - "@angular-devkit/architect": ">=0.1500.0 < 0.1900.0" - "@angular-devkit/build-angular": ">=15.0.0 < 19.0.0" - "@angular-devkit/core": ">=15.0.0 < 19.0.0" - "@angular/cli": ">=15.0.0 < 19.0.0" - "@angular/common": ">=15.0.0 < 19.0.0" - "@angular/compiler": ">=15.0.0 < 19.0.0" - "@angular/compiler-cli": ">=15.0.0 < 19.0.0" - "@angular/core": ">=15.0.0 < 19.0.0" - "@angular/forms": ">=15.0.0 < 19.0.0" - "@angular/platform-browser": ">=15.0.0 < 19.0.0" - "@angular/platform-browser-dynamic": ">=15.0.0 < 19.0.0" + "@angular-devkit/architect": ">=0.1500.0 < 0.2000.0" + "@angular-devkit/build-angular": ">=15.0.0 < 20.0.0" + "@angular-devkit/core": ">=15.0.0 < 20.0.0" + "@angular/cli": ">=15.0.0 < 20.0.0" + "@angular/common": ">=15.0.0 < 20.0.0" + "@angular/compiler": ">=15.0.0 < 20.0.0" + "@angular/compiler-cli": ">=15.0.0 < 20.0.0" + "@angular/core": ">=15.0.0 < 20.0.0" + "@angular/forms": ">=15.0.0 < 20.0.0" + "@angular/platform-browser": ">=15.0.0 < 20.0.0" + "@angular/platform-browser-dynamic": ">=15.0.0 < 20.0.0" rxjs: ^6.0.0 || ^7.4.0 storybook: "workspace:^" typescript: ^4.0.0 || ^5.0.0 From e8ba1c2496d7a3d866a0627f7589a6a8d7da2c30 Mon Sep 17 00:00:00 2001 From: Jeppe Reinhold <jeppe@reinhold.is> Date: Tue, 19 Nov 2024 15:50:07 +0100 Subject: [PATCH 089/101] fix manager-api imports in manager --- code/core/src/manager/components/sidebar/StatusContext.tsx | 3 ++- .../src/manager/components/sidebar/TestingModule.stories.tsx | 2 +- code/core/src/manager/components/sidebar/TestingModule.tsx | 4 ++-- code/core/src/manager/settings/defaultShortcuts.tsx | 2 +- 4 files changed, 6 insertions(+), 5 deletions(-) diff --git a/code/core/src/manager/components/sidebar/StatusContext.tsx b/code/core/src/manager/components/sidebar/StatusContext.tsx index d143a3db9be..45d57611693 100644 --- a/code/core/src/manager/components/sidebar/StatusContext.tsx +++ b/code/core/src/manager/components/sidebar/StatusContext.tsx @@ -2,7 +2,8 @@ import { createContext, useContext } from 'react'; import type { API_StatusObject, API_StatusState, API_StatusValue, StoryId } from '@storybook/types'; -import type { StoriesHash } from '../../../manager-api'; +import type { StoriesHash } from '@storybook/core/manager-api'; + import type { Item } from '../../container/Sidebar'; import { getDescendantIds } from '../../utils/tree'; diff --git a/code/core/src/manager/components/sidebar/TestingModule.stories.tsx b/code/core/src/manager/components/sidebar/TestingModule.stories.tsx index 3ad57e354c1..a13e4ccbad5 100644 --- a/code/core/src/manager/components/sidebar/TestingModule.stories.tsx +++ b/code/core/src/manager/components/sidebar/TestingModule.stories.tsx @@ -5,8 +5,8 @@ import type { Meta, StoryObj } from '@storybook/react'; import { fn, userEvent } from '@storybook/test'; import type { TestProviders } from '@storybook/core/core-events'; +import { ManagerContext } from '@storybook/core/manager-api'; -import { ManagerContext } from '../../../manager-api'; import { TestingModule } from './TestingModule'; const baseState = { diff --git a/code/core/src/manager/components/sidebar/TestingModule.tsx b/code/core/src/manager/components/sidebar/TestingModule.tsx index 2b3ef24f17a..a28a338857b 100644 --- a/code/core/src/manager/components/sidebar/TestingModule.tsx +++ b/code/core/src/manager/components/sidebar/TestingModule.tsx @@ -1,13 +1,13 @@ import React, { type SyntheticEvent, useEffect, useRef, useState } from 'react'; import { Button, TooltipNote } from '@storybook/core/components'; +import { WithTooltip } from '@storybook/core/components'; import { keyframes, styled } from '@storybook/core/theming'; import { ChevronSmallUpIcon, PlayAllHollowIcon } from '@storybook/icons'; import type { TestProviders } from '@storybook/core/core-events'; +import { useStorybookApi } from '@storybook/core/manager-api'; -import { WithTooltip } from '../../../components/components/tooltip/WithTooltip'; -import { useStorybookApi } from '../../../manager-api'; import { LegacyRender } from './LegacyRender'; const DEFAULT_HEIGHT = 500; diff --git a/code/core/src/manager/settings/defaultShortcuts.tsx b/code/core/src/manager/settings/defaultShortcuts.tsx index 525d85decb7..ed8ad0fd913 100644 --- a/code/core/src/manager/settings/defaultShortcuts.tsx +++ b/code/core/src/manager/settings/defaultShortcuts.tsx @@ -1,4 +1,4 @@ -import type { State } from '../../manager-api/root'; +import type { State } from '@storybook/core/manager-api'; export const defaultShortcuts: State['shortcuts'] = { fullScreen: ['F'], From 7f1b3837851da9cbb8cc374c5a1847126f51ca61 Mon Sep 17 00:00:00 2001 From: storybook-bot <32066757+storybook-bot@users.noreply.github.com> Date: Tue, 19 Nov 2024 15:00:07 +0000 Subject: [PATCH 090/101] Bump version from "8.5.0-alpha.7" to "8.5.0-alpha.8" [skip ci] --- code/addons/a11y/package.json | 2 +- code/addons/actions/package.json | 2 +- code/addons/backgrounds/package.json | 2 +- code/addons/controls/package.json | 2 +- code/addons/docs/package.json | 2 +- code/addons/essentials/package.json | 2 +- code/addons/gfm/package.json | 2 +- code/addons/highlight/package.json | 2 +- code/addons/interactions/package.json | 2 +- code/addons/jest/package.json | 2 +- code/addons/links/package.json | 2 +- code/addons/measure/package.json | 2 +- code/addons/onboarding/package.json | 2 +- code/addons/outline/package.json | 2 +- code/addons/storysource/package.json | 2 +- code/addons/test/package.json | 2 +- code/addons/themes/package.json | 2 +- code/addons/toolbars/package.json | 2 +- code/addons/viewport/package.json | 2 +- code/builders/builder-vite/package.json | 2 +- code/builders/builder-webpack5/package.json | 2 +- code/core/package.json | 2 +- code/core/src/common/versions.ts | 170 +++++++++--------- code/core/src/manager-api/version.ts | 2 +- code/deprecated/builder-manager/package.json | 2 +- code/deprecated/channels/package.json | 2 +- code/deprecated/client-logger/package.json | 2 +- code/deprecated/components/package.json | 2 +- code/deprecated/core-common/package.json | 2 +- code/deprecated/core-events/package.json | 2 +- code/deprecated/core-server/package.json | 2 +- code/deprecated/csf-tools/package.json | 2 +- code/deprecated/docs-tools/package.json | 2 +- code/deprecated/manager-api/package.json | 2 +- code/deprecated/manager/package.json | 2 +- code/deprecated/node-logger/package.json | 2 +- code/deprecated/preview-api/package.json | 2 +- code/deprecated/preview/package.json | 2 +- code/deprecated/router/package.json | 2 +- code/deprecated/telemetry/package.json | 2 +- code/deprecated/theming/package.json | 2 +- code/deprecated/types/package.json | 2 +- code/frameworks/angular/package.json | 2 +- code/frameworks/ember/package.json | 2 +- .../experimental-nextjs-vite/package.json | 2 +- code/frameworks/html-vite/package.json | 2 +- code/frameworks/html-webpack5/package.json | 2 +- code/frameworks/nextjs/package.json | 2 +- code/frameworks/preact-vite/package.json | 2 +- code/frameworks/preact-webpack5/package.json | 2 +- .../react-native-web-vite/package.json | 2 +- code/frameworks/react-vite/package.json | 2 +- code/frameworks/react-webpack5/package.json | 2 +- code/frameworks/server-webpack5/package.json | 2 +- code/frameworks/svelte-vite/package.json | 2 +- code/frameworks/svelte-webpack5/package.json | 2 +- code/frameworks/sveltekit/package.json | 2 +- code/frameworks/vue3-vite/package.json | 2 +- code/frameworks/vue3-webpack5/package.json | 2 +- .../web-components-vite/package.json | 2 +- .../web-components-webpack5/package.json | 2 +- code/lib/blocks/package.json | 2 +- code/lib/cli-sb/package.json | 2 +- code/lib/cli-storybook/package.json | 2 +- code/lib/cli/package.json | 2 +- code/lib/codemod/package.json | 2 +- code/lib/core-webpack/package.json | 2 +- code/lib/create-storybook/package.json | 2 +- code/lib/csf-plugin/package.json | 2 +- code/lib/instrumenter/package.json | 2 +- code/lib/react-dom-shim/package.json | 2 +- code/lib/source-loader/package.json | 2 +- code/lib/test/package.json | 2 +- code/package.json | 5 +- code/presets/create-react-app/package.json | 2 +- code/presets/html-webpack/package.json | 2 +- code/presets/preact-webpack/package.json | 2 +- code/presets/react-webpack/package.json | 2 +- code/presets/server-webpack/package.json | 2 +- code/presets/svelte-webpack/package.json | 2 +- code/presets/vue3-webpack/package.json | 2 +- code/renderers/html/package.json | 2 +- code/renderers/preact/package.json | 2 +- code/renderers/react/package.json | 2 +- code/renderers/server/package.json | 2 +- code/renderers/svelte/package.json | 2 +- code/renderers/vue3/package.json | 2 +- code/renderers/web-components/package.json | 2 +- 88 files changed, 173 insertions(+), 174 deletions(-) diff --git a/code/addons/a11y/package.json b/code/addons/a11y/package.json index 9e90ce8e478..9b0e1752f5b 100644 --- a/code/addons/a11y/package.json +++ b/code/addons/a11y/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-a11y", - "version": "8.5.0-alpha.7", + "version": "8.5.0-alpha.8", "description": "Test component compliance with web accessibility standards", "keywords": [ "a11y", diff --git a/code/addons/actions/package.json b/code/addons/actions/package.json index 9fe85e34cab..f7dc9c5f8b6 100644 --- a/code/addons/actions/package.json +++ b/code/addons/actions/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-actions", - "version": "8.5.0-alpha.7", + "version": "8.5.0-alpha.8", "description": "Get UI feedback when an action is performed on an interactive element", "keywords": [ "storybook", diff --git a/code/addons/backgrounds/package.json b/code/addons/backgrounds/package.json index 26ed6cb549b..a9b37754cb0 100644 --- a/code/addons/backgrounds/package.json +++ b/code/addons/backgrounds/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-backgrounds", - "version": "8.5.0-alpha.7", + "version": "8.5.0-alpha.8", "description": "Switch backgrounds to view components in different settings", "keywords": [ "addon", diff --git a/code/addons/controls/package.json b/code/addons/controls/package.json index 53bd24c8351..de3e0bbe460 100644 --- a/code/addons/controls/package.json +++ b/code/addons/controls/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-controls", - "version": "8.5.0-alpha.7", + "version": "8.5.0-alpha.8", "description": "Interact with component inputs dynamically in the Storybook UI", "keywords": [ "addon", diff --git a/code/addons/docs/package.json b/code/addons/docs/package.json index 3f198e8d8ba..57d480ec24d 100644 --- a/code/addons/docs/package.json +++ b/code/addons/docs/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-docs", - "version": "8.5.0-alpha.7", + "version": "8.5.0-alpha.8", "description": "Document component usage and properties in Markdown", "keywords": [ "addon", diff --git a/code/addons/essentials/package.json b/code/addons/essentials/package.json index dc8544e574a..5e17b43265d 100644 --- a/code/addons/essentials/package.json +++ b/code/addons/essentials/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-essentials", - "version": "8.5.0-alpha.7", + "version": "8.5.0-alpha.8", "description": "Curated addons to bring out the best of Storybook", "keywords": [ "addon", diff --git a/code/addons/gfm/package.json b/code/addons/gfm/package.json index 761b09d0cef..8903e18fc14 100644 --- a/code/addons/gfm/package.json +++ b/code/addons/gfm/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-mdx-gfm", - "version": "8.5.0-alpha.7", + "version": "8.5.0-alpha.8", "description": "GitHub Flavored Markdown in Storybook", "keywords": [ "addon", diff --git a/code/addons/highlight/package.json b/code/addons/highlight/package.json index 8de45ba2cbe..7abffb394d7 100644 --- a/code/addons/highlight/package.json +++ b/code/addons/highlight/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-highlight", - "version": "8.5.0-alpha.7", + "version": "8.5.0-alpha.8", "description": "Highlight DOM nodes within your stories", "keywords": [ "storybook-addons", diff --git a/code/addons/interactions/package.json b/code/addons/interactions/package.json index 95f0ff32310..b985f9c65ea 100644 --- a/code/addons/interactions/package.json +++ b/code/addons/interactions/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-interactions", - "version": "8.5.0-alpha.7", + "version": "8.5.0-alpha.8", "description": "Automate, test and debug user interactions", "keywords": [ "storybook-addons", diff --git a/code/addons/jest/package.json b/code/addons/jest/package.json index 8675850d12b..f1ef7bcb191 100644 --- a/code/addons/jest/package.json +++ b/code/addons/jest/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-jest", - "version": "8.5.0-alpha.7", + "version": "8.5.0-alpha.8", "description": "React storybook addon that show component jest report", "keywords": [ "addon", diff --git a/code/addons/links/package.json b/code/addons/links/package.json index f3d8ed00c24..ec75e70fb95 100644 --- a/code/addons/links/package.json +++ b/code/addons/links/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-links", - "version": "8.5.0-alpha.7", + "version": "8.5.0-alpha.8", "description": "Link stories together to build demos and prototypes with your UI components", "keywords": [ "storybook-addons", diff --git a/code/addons/measure/package.json b/code/addons/measure/package.json index a15ebfe69f4..b1c0c3d4a43 100644 --- a/code/addons/measure/package.json +++ b/code/addons/measure/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-measure", - "version": "8.5.0-alpha.7", + "version": "8.5.0-alpha.8", "description": "Inspect layouts by visualizing the box model", "keywords": [ "storybook-addons", diff --git a/code/addons/onboarding/package.json b/code/addons/onboarding/package.json index d2e5e932546..61640d6b615 100644 --- a/code/addons/onboarding/package.json +++ b/code/addons/onboarding/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-onboarding", - "version": "8.5.0-alpha.7", + "version": "8.5.0-alpha.8", "description": "Storybook Addon Onboarding - Introduces a new onboarding experience", "keywords": [ "storybook-addons", diff --git a/code/addons/outline/package.json b/code/addons/outline/package.json index 9fac1cd9aac..a9f0c28c776 100644 --- a/code/addons/outline/package.json +++ b/code/addons/outline/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-outline", - "version": "8.5.0-alpha.7", + "version": "8.5.0-alpha.8", "description": "Outline all elements with CSS to help with layout placement and alignment", "keywords": [ "storybook-addons", diff --git a/code/addons/storysource/package.json b/code/addons/storysource/package.json index b35c3e84fbe..1ba98ec1fa9 100644 --- a/code/addons/storysource/package.json +++ b/code/addons/storysource/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-storysource", - "version": "8.5.0-alpha.7", + "version": "8.5.0-alpha.8", "description": "View a story’s source code to see how it works and paste into your app", "keywords": [ "addon", diff --git a/code/addons/test/package.json b/code/addons/test/package.json index 26951265827..3d8bbaaa090 100644 --- a/code/addons/test/package.json +++ b/code/addons/test/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/experimental-addon-test", - "version": "8.5.0-alpha.7", + "version": "8.5.0-alpha.8", "description": "Integrate Vitest with Storybook", "keywords": [ "storybook-addons", diff --git a/code/addons/themes/package.json b/code/addons/themes/package.json index 04c1dff0ba9..292ee5d5541 100644 --- a/code/addons/themes/package.json +++ b/code/addons/themes/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-themes", - "version": "8.5.0-alpha.7", + "version": "8.5.0-alpha.8", "description": "Switch between multiple themes for you components in Storybook", "keywords": [ "css", diff --git a/code/addons/toolbars/package.json b/code/addons/toolbars/package.json index 937814df42b..9ff619cd6c8 100644 --- a/code/addons/toolbars/package.json +++ b/code/addons/toolbars/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-toolbars", - "version": "8.5.0-alpha.7", + "version": "8.5.0-alpha.8", "description": "Create your own toolbar items that control story rendering", "keywords": [ "addon", diff --git a/code/addons/viewport/package.json b/code/addons/viewport/package.json index 137c07f1be3..a44ed617f93 100644 --- a/code/addons/viewport/package.json +++ b/code/addons/viewport/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-viewport", - "version": "8.5.0-alpha.7", + "version": "8.5.0-alpha.8", "description": "Build responsive components by adjusting Storybook’s viewport size and orientation", "keywords": [ "addon", diff --git a/code/builders/builder-vite/package.json b/code/builders/builder-vite/package.json index 6d9f03ef6ef..57334f28c3b 100644 --- a/code/builders/builder-vite/package.json +++ b/code/builders/builder-vite/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/builder-vite", - "version": "8.5.0-alpha.7", + "version": "8.5.0-alpha.8", "description": "A plugin to run and build Storybooks with Vite", "homepage": "https://github.com/storybookjs/storybook/tree/next/code/builders/builder-vite/#readme", "bugs": { diff --git a/code/builders/builder-webpack5/package.json b/code/builders/builder-webpack5/package.json index 4c8a37ba117..941e1d4c456 100644 --- a/code/builders/builder-webpack5/package.json +++ b/code/builders/builder-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/builder-webpack5", - "version": "8.5.0-alpha.7", + "version": "8.5.0-alpha.8", "description": "Storybook framework-agnostic API", "keywords": [ "storybook" diff --git a/code/core/package.json b/code/core/package.json index 24795c3204d..3419f147ccd 100644 --- a/code/core/package.json +++ b/code/core/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/core", - "version": "8.5.0-alpha.7", + "version": "8.5.0-alpha.8", "description": "Storybook framework-agnostic API", "keywords": [ "storybook" diff --git a/code/core/src/common/versions.ts b/code/core/src/common/versions.ts index 7630843312f..22cf40518f4 100644 --- a/code/core/src/common/versions.ts +++ b/code/core/src/common/versions.ts @@ -1,88 +1,88 @@ // auto generated file, do not edit export default { - '@storybook/addon-a11y': '8.5.0-alpha.7', - '@storybook/addon-actions': '8.5.0-alpha.7', - '@storybook/addon-backgrounds': '8.5.0-alpha.7', - '@storybook/addon-controls': '8.5.0-alpha.7', - '@storybook/addon-docs': '8.5.0-alpha.7', - '@storybook/addon-essentials': '8.5.0-alpha.7', - '@storybook/addon-mdx-gfm': '8.5.0-alpha.7', - '@storybook/addon-highlight': '8.5.0-alpha.7', - '@storybook/addon-interactions': '8.5.0-alpha.7', - '@storybook/addon-jest': '8.5.0-alpha.7', - '@storybook/addon-links': '8.5.0-alpha.7', - '@storybook/addon-measure': '8.5.0-alpha.7', - '@storybook/addon-onboarding': '8.5.0-alpha.7', - '@storybook/addon-outline': '8.5.0-alpha.7', - '@storybook/addon-storysource': '8.5.0-alpha.7', - '@storybook/experimental-addon-test': '8.5.0-alpha.7', - '@storybook/addon-themes': '8.5.0-alpha.7', - '@storybook/addon-toolbars': '8.5.0-alpha.7', - '@storybook/addon-viewport': '8.5.0-alpha.7', - '@storybook/builder-vite': '8.5.0-alpha.7', - '@storybook/builder-webpack5': '8.5.0-alpha.7', - '@storybook/core': '8.5.0-alpha.7', - '@storybook/builder-manager': '8.5.0-alpha.7', - '@storybook/channels': '8.5.0-alpha.7', - '@storybook/client-logger': '8.5.0-alpha.7', - '@storybook/components': '8.5.0-alpha.7', - '@storybook/core-common': '8.5.0-alpha.7', - '@storybook/core-events': '8.5.0-alpha.7', - '@storybook/core-server': '8.5.0-alpha.7', - '@storybook/csf-tools': '8.5.0-alpha.7', - '@storybook/docs-tools': '8.5.0-alpha.7', - '@storybook/manager': '8.5.0-alpha.7', - '@storybook/manager-api': '8.5.0-alpha.7', - '@storybook/node-logger': '8.5.0-alpha.7', - '@storybook/preview': '8.5.0-alpha.7', - '@storybook/preview-api': '8.5.0-alpha.7', - '@storybook/router': '8.5.0-alpha.7', - '@storybook/telemetry': '8.5.0-alpha.7', - '@storybook/theming': '8.5.0-alpha.7', - '@storybook/types': '8.5.0-alpha.7', - '@storybook/angular': '8.5.0-alpha.7', - '@storybook/ember': '8.5.0-alpha.7', - '@storybook/experimental-nextjs-vite': '8.5.0-alpha.7', - '@storybook/html-vite': '8.5.0-alpha.7', - '@storybook/html-webpack5': '8.5.0-alpha.7', - '@storybook/nextjs': '8.5.0-alpha.7', - '@storybook/preact-vite': '8.5.0-alpha.7', - '@storybook/preact-webpack5': '8.5.0-alpha.7', - '@storybook/react-native-web-vite': '8.5.0-alpha.7', - '@storybook/react-vite': '8.5.0-alpha.7', - '@storybook/react-webpack5': '8.5.0-alpha.7', - '@storybook/server-webpack5': '8.5.0-alpha.7', - '@storybook/svelte-vite': '8.5.0-alpha.7', - '@storybook/svelte-webpack5': '8.5.0-alpha.7', - '@storybook/sveltekit': '8.5.0-alpha.7', - '@storybook/vue3-vite': '8.5.0-alpha.7', - '@storybook/vue3-webpack5': '8.5.0-alpha.7', - '@storybook/web-components-vite': '8.5.0-alpha.7', - '@storybook/web-components-webpack5': '8.5.0-alpha.7', - '@storybook/blocks': '8.5.0-alpha.7', - storybook: '8.5.0-alpha.7', - sb: '8.5.0-alpha.7', - '@storybook/cli': '8.5.0-alpha.7', - '@storybook/codemod': '8.5.0-alpha.7', - '@storybook/core-webpack': '8.5.0-alpha.7', - 'create-storybook': '8.5.0-alpha.7', - '@storybook/csf-plugin': '8.5.0-alpha.7', - '@storybook/instrumenter': '8.5.0-alpha.7', - '@storybook/react-dom-shim': '8.5.0-alpha.7', - '@storybook/source-loader': '8.5.0-alpha.7', - '@storybook/test': '8.5.0-alpha.7', - '@storybook/preset-create-react-app': '8.5.0-alpha.7', - '@storybook/preset-html-webpack': '8.5.0-alpha.7', - '@storybook/preset-preact-webpack': '8.5.0-alpha.7', - '@storybook/preset-react-webpack': '8.5.0-alpha.7', - '@storybook/preset-server-webpack': '8.5.0-alpha.7', - '@storybook/preset-svelte-webpack': '8.5.0-alpha.7', - '@storybook/preset-vue3-webpack': '8.5.0-alpha.7', - '@storybook/html': '8.5.0-alpha.7', - '@storybook/preact': '8.5.0-alpha.7', - '@storybook/react': '8.5.0-alpha.7', - '@storybook/server': '8.5.0-alpha.7', - '@storybook/svelte': '8.5.0-alpha.7', - '@storybook/vue3': '8.5.0-alpha.7', - '@storybook/web-components': '8.5.0-alpha.7', + '@storybook/addon-a11y': '8.5.0-alpha.8', + '@storybook/addon-actions': '8.5.0-alpha.8', + '@storybook/addon-backgrounds': '8.5.0-alpha.8', + '@storybook/addon-controls': '8.5.0-alpha.8', + '@storybook/addon-docs': '8.5.0-alpha.8', + '@storybook/addon-essentials': '8.5.0-alpha.8', + '@storybook/addon-mdx-gfm': '8.5.0-alpha.8', + '@storybook/addon-highlight': '8.5.0-alpha.8', + '@storybook/addon-interactions': '8.5.0-alpha.8', + '@storybook/addon-jest': '8.5.0-alpha.8', + '@storybook/addon-links': '8.5.0-alpha.8', + '@storybook/addon-measure': '8.5.0-alpha.8', + '@storybook/addon-onboarding': '8.5.0-alpha.8', + '@storybook/addon-outline': '8.5.0-alpha.8', + '@storybook/addon-storysource': '8.5.0-alpha.8', + '@storybook/experimental-addon-test': '8.5.0-alpha.8', + '@storybook/addon-themes': '8.5.0-alpha.8', + '@storybook/addon-toolbars': '8.5.0-alpha.8', + '@storybook/addon-viewport': '8.5.0-alpha.8', + '@storybook/builder-vite': '8.5.0-alpha.8', + '@storybook/builder-webpack5': '8.5.0-alpha.8', + '@storybook/core': '8.5.0-alpha.8', + '@storybook/builder-manager': '8.5.0-alpha.8', + '@storybook/channels': '8.5.0-alpha.8', + '@storybook/client-logger': '8.5.0-alpha.8', + '@storybook/components': '8.5.0-alpha.8', + '@storybook/core-common': '8.5.0-alpha.8', + '@storybook/core-events': '8.5.0-alpha.8', + '@storybook/core-server': '8.5.0-alpha.8', + '@storybook/csf-tools': '8.5.0-alpha.8', + '@storybook/docs-tools': '8.5.0-alpha.8', + '@storybook/manager': '8.5.0-alpha.8', + '@storybook/manager-api': '8.5.0-alpha.8', + '@storybook/node-logger': '8.5.0-alpha.8', + '@storybook/preview': '8.5.0-alpha.8', + '@storybook/preview-api': '8.5.0-alpha.8', + '@storybook/router': '8.5.0-alpha.8', + '@storybook/telemetry': '8.5.0-alpha.8', + '@storybook/theming': '8.5.0-alpha.8', + '@storybook/types': '8.5.0-alpha.8', + '@storybook/angular': '8.5.0-alpha.8', + '@storybook/ember': '8.5.0-alpha.8', + '@storybook/experimental-nextjs-vite': '8.5.0-alpha.8', + '@storybook/html-vite': '8.5.0-alpha.8', + '@storybook/html-webpack5': '8.5.0-alpha.8', + '@storybook/nextjs': '8.5.0-alpha.8', + '@storybook/preact-vite': '8.5.0-alpha.8', + '@storybook/preact-webpack5': '8.5.0-alpha.8', + '@storybook/react-native-web-vite': '8.5.0-alpha.8', + '@storybook/react-vite': '8.5.0-alpha.8', + '@storybook/react-webpack5': '8.5.0-alpha.8', + '@storybook/server-webpack5': '8.5.0-alpha.8', + '@storybook/svelte-vite': '8.5.0-alpha.8', + '@storybook/svelte-webpack5': '8.5.0-alpha.8', + '@storybook/sveltekit': '8.5.0-alpha.8', + '@storybook/vue3-vite': '8.5.0-alpha.8', + '@storybook/vue3-webpack5': '8.5.0-alpha.8', + '@storybook/web-components-vite': '8.5.0-alpha.8', + '@storybook/web-components-webpack5': '8.5.0-alpha.8', + '@storybook/blocks': '8.5.0-alpha.8', + storybook: '8.5.0-alpha.8', + sb: '8.5.0-alpha.8', + '@storybook/cli': '8.5.0-alpha.8', + '@storybook/codemod': '8.5.0-alpha.8', + '@storybook/core-webpack': '8.5.0-alpha.8', + 'create-storybook': '8.5.0-alpha.8', + '@storybook/csf-plugin': '8.5.0-alpha.8', + '@storybook/instrumenter': '8.5.0-alpha.8', + '@storybook/react-dom-shim': '8.5.0-alpha.8', + '@storybook/source-loader': '8.5.0-alpha.8', + '@storybook/test': '8.5.0-alpha.8', + '@storybook/preset-create-react-app': '8.5.0-alpha.8', + '@storybook/preset-html-webpack': '8.5.0-alpha.8', + '@storybook/preset-preact-webpack': '8.5.0-alpha.8', + '@storybook/preset-react-webpack': '8.5.0-alpha.8', + '@storybook/preset-server-webpack': '8.5.0-alpha.8', + '@storybook/preset-svelte-webpack': '8.5.0-alpha.8', + '@storybook/preset-vue3-webpack': '8.5.0-alpha.8', + '@storybook/html': '8.5.0-alpha.8', + '@storybook/preact': '8.5.0-alpha.8', + '@storybook/react': '8.5.0-alpha.8', + '@storybook/server': '8.5.0-alpha.8', + '@storybook/svelte': '8.5.0-alpha.8', + '@storybook/vue3': '8.5.0-alpha.8', + '@storybook/web-components': '8.5.0-alpha.8', }; diff --git a/code/core/src/manager-api/version.ts b/code/core/src/manager-api/version.ts index eeb704a7061..87c4a8b133c 100644 --- a/code/core/src/manager-api/version.ts +++ b/code/core/src/manager-api/version.ts @@ -1 +1 @@ -export const version = '8.5.0-alpha.7'; +export const version = '8.5.0-alpha.8'; diff --git a/code/deprecated/builder-manager/package.json b/code/deprecated/builder-manager/package.json index 71d78355abf..b9a76834269 100644 --- a/code/deprecated/builder-manager/package.json +++ b/code/deprecated/builder-manager/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/builder-manager", - "version": "8.5.0-alpha.7", + "version": "8.5.0-alpha.8", "description": "Storybook manager builder", "keywords": [ "storybook" diff --git a/code/deprecated/channels/package.json b/code/deprecated/channels/package.json index 76a3d91b525..de6ce827a59 100644 --- a/code/deprecated/channels/package.json +++ b/code/deprecated/channels/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/channels", - "version": "8.5.0-alpha.7", + "version": "8.5.0-alpha.8", "description": "", "keywords": [ "storybook" diff --git a/code/deprecated/client-logger/package.json b/code/deprecated/client-logger/package.json index d55f1bbf1c2..87bb4bcf91c 100644 --- a/code/deprecated/client-logger/package.json +++ b/code/deprecated/client-logger/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/client-logger", - "version": "8.5.0-alpha.7", + "version": "8.5.0-alpha.8", "description": "", "keywords": [ "storybook" diff --git a/code/deprecated/components/package.json b/code/deprecated/components/package.json index 5344f1fca62..6576755915a 100644 --- a/code/deprecated/components/package.json +++ b/code/deprecated/components/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/components", - "version": "8.5.0-alpha.7", + "version": "8.5.0-alpha.8", "description": "Core Storybook Components", "keywords": [ "storybook" diff --git a/code/deprecated/core-common/package.json b/code/deprecated/core-common/package.json index 084a67917c8..d02744e7c73 100644 --- a/code/deprecated/core-common/package.json +++ b/code/deprecated/core-common/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/core-common", - "version": "8.5.0-alpha.7", + "version": "8.5.0-alpha.8", "description": "Storybook framework-agnostic API", "keywords": [ "storybook" diff --git a/code/deprecated/core-events/package.json b/code/deprecated/core-events/package.json index d745017f5ab..54c9b0d33b1 100644 --- a/code/deprecated/core-events/package.json +++ b/code/deprecated/core-events/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/core-events", - "version": "8.5.0-alpha.7", + "version": "8.5.0-alpha.8", "description": "Event names used in storybook core", "keywords": [ "storybook" diff --git a/code/deprecated/core-server/package.json b/code/deprecated/core-server/package.json index ea380aef9f2..f1fdff38c9e 100644 --- a/code/deprecated/core-server/package.json +++ b/code/deprecated/core-server/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/core-server", - "version": "8.5.0-alpha.7", + "version": "8.5.0-alpha.8", "description": "Storybook framework-agnostic API", "keywords": [ "storybook" diff --git a/code/deprecated/csf-tools/package.json b/code/deprecated/csf-tools/package.json index da1ea4faa69..94fbab6da4a 100644 --- a/code/deprecated/csf-tools/package.json +++ b/code/deprecated/csf-tools/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/csf-tools", - "version": "8.5.0-alpha.7", + "version": "8.5.0-alpha.8", "description": "Parse and manipulate CSF and Storybook config files", "keywords": [ "storybook" diff --git a/code/deprecated/docs-tools/package.json b/code/deprecated/docs-tools/package.json index 3a9c029ab02..722c801f2ba 100644 --- a/code/deprecated/docs-tools/package.json +++ b/code/deprecated/docs-tools/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/docs-tools", - "version": "8.5.0-alpha.7", + "version": "8.5.0-alpha.8", "description": "Shared utility functions for frameworks to implement docs", "keywords": [ "storybook" diff --git a/code/deprecated/manager-api/package.json b/code/deprecated/manager-api/package.json index b0d99649037..dfdb0d08394 100644 --- a/code/deprecated/manager-api/package.json +++ b/code/deprecated/manager-api/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/manager-api", - "version": "8.5.0-alpha.7", + "version": "8.5.0-alpha.8", "description": "Core Storybook Manager API & Context", "keywords": [ "storybook" diff --git a/code/deprecated/manager/package.json b/code/deprecated/manager/package.json index 26c16417abd..004740adb11 100644 --- a/code/deprecated/manager/package.json +++ b/code/deprecated/manager/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/manager", - "version": "8.5.0-alpha.7", + "version": "8.5.0-alpha.8", "description": "Core Storybook UI", "keywords": [ "storybook" diff --git a/code/deprecated/node-logger/package.json b/code/deprecated/node-logger/package.json index a38b11922c7..767d1f63d5e 100644 --- a/code/deprecated/node-logger/package.json +++ b/code/deprecated/node-logger/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/node-logger", - "version": "8.5.0-alpha.7", + "version": "8.5.0-alpha.8", "description": "", "keywords": [ "storybook" diff --git a/code/deprecated/preview-api/package.json b/code/deprecated/preview-api/package.json index 876eb85f60e..9dc2f6c8391 100644 --- a/code/deprecated/preview-api/package.json +++ b/code/deprecated/preview-api/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preview-api", - "version": "8.5.0-alpha.7", + "version": "8.5.0-alpha.8", "description": "", "keywords": [ "storybook" diff --git a/code/deprecated/preview/package.json b/code/deprecated/preview/package.json index 8dc77fd1279..d949d521b21 100644 --- a/code/deprecated/preview/package.json +++ b/code/deprecated/preview/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preview", - "version": "8.5.0-alpha.7", + "version": "8.5.0-alpha.8", "description": "", "keywords": [ "storybook" diff --git a/code/deprecated/router/package.json b/code/deprecated/router/package.json index db9a02a6f9a..8cd72453e39 100644 --- a/code/deprecated/router/package.json +++ b/code/deprecated/router/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/router", - "version": "8.5.0-alpha.7", + "version": "8.5.0-alpha.8", "description": "Core Storybook Router", "keywords": [ "storybook" diff --git a/code/deprecated/telemetry/package.json b/code/deprecated/telemetry/package.json index f40842c3e32..66f603b75af 100644 --- a/code/deprecated/telemetry/package.json +++ b/code/deprecated/telemetry/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/telemetry", - "version": "8.5.0-alpha.7", + "version": "8.5.0-alpha.8", "description": "Telemetry logging for crash reports and usage statistics", "keywords": [ "storybook" diff --git a/code/deprecated/theming/package.json b/code/deprecated/theming/package.json index efe96320e68..fa9ba0ec786 100644 --- a/code/deprecated/theming/package.json +++ b/code/deprecated/theming/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/theming", - "version": "8.5.0-alpha.7", + "version": "8.5.0-alpha.8", "description": "Core Storybook Components", "keywords": [ "storybook" diff --git a/code/deprecated/types/package.json b/code/deprecated/types/package.json index af23546c32a..e2617b65873 100644 --- a/code/deprecated/types/package.json +++ b/code/deprecated/types/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/types", - "version": "8.5.0-alpha.7", + "version": "8.5.0-alpha.8", "description": "Core Storybook TS Types", "keywords": [ "storybook" diff --git a/code/frameworks/angular/package.json b/code/frameworks/angular/package.json index 775ccf58bbd..81871eace9c 100644 --- a/code/frameworks/angular/package.json +++ b/code/frameworks/angular/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/angular", - "version": "8.5.0-alpha.7", + "version": "8.5.0-alpha.8", "description": "Storybook for Angular: Develop Angular components in isolation with hot reloading.", "keywords": [ "storybook", diff --git a/code/frameworks/ember/package.json b/code/frameworks/ember/package.json index 48882062f5c..22f33eb8e08 100644 --- a/code/frameworks/ember/package.json +++ b/code/frameworks/ember/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/ember", - "version": "8.5.0-alpha.7", + "version": "8.5.0-alpha.8", "description": "Storybook for Ember: Develop Ember Component in isolation with Hot Reloading.", "homepage": "https://github.com/storybookjs/storybook/tree/next/code/frameworks/ember", "bugs": { diff --git a/code/frameworks/experimental-nextjs-vite/package.json b/code/frameworks/experimental-nextjs-vite/package.json index 13c7047a216..8853f392f4d 100644 --- a/code/frameworks/experimental-nextjs-vite/package.json +++ b/code/frameworks/experimental-nextjs-vite/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/experimental-nextjs-vite", - "version": "8.5.0-alpha.7", + "version": "8.5.0-alpha.8", "description": "Storybook for Next.js and Vite", "keywords": [ "storybook", diff --git a/code/frameworks/html-vite/package.json b/code/frameworks/html-vite/package.json index de3f489d429..672a6b2580f 100644 --- a/code/frameworks/html-vite/package.json +++ b/code/frameworks/html-vite/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/html-vite", - "version": "8.5.0-alpha.7", + "version": "8.5.0-alpha.8", "description": "Storybook for HTML and Vite: Develop HTML in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/html-webpack5/package.json b/code/frameworks/html-webpack5/package.json index f50cebca911..e1fa17c1bc1 100644 --- a/code/frameworks/html-webpack5/package.json +++ b/code/frameworks/html-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/html-webpack5", - "version": "8.5.0-alpha.7", + "version": "8.5.0-alpha.8", "description": "Storybook for HTML: View HTML snippets in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/nextjs/package.json b/code/frameworks/nextjs/package.json index 32eb98b31d5..13c0666819d 100644 --- a/code/frameworks/nextjs/package.json +++ b/code/frameworks/nextjs/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/nextjs", - "version": "8.5.0-alpha.7", + "version": "8.5.0-alpha.8", "description": "Storybook for Next.js", "keywords": [ "storybook", diff --git a/code/frameworks/preact-vite/package.json b/code/frameworks/preact-vite/package.json index 27d01ba6108..8572761019d 100644 --- a/code/frameworks/preact-vite/package.json +++ b/code/frameworks/preact-vite/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preact-vite", - "version": "8.5.0-alpha.7", + "version": "8.5.0-alpha.8", "description": "Storybook for Preact and Vite: Develop Preact components in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/preact-webpack5/package.json b/code/frameworks/preact-webpack5/package.json index 95f66606ad6..c0b474f97a9 100644 --- a/code/frameworks/preact-webpack5/package.json +++ b/code/frameworks/preact-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preact-webpack5", - "version": "8.5.0-alpha.7", + "version": "8.5.0-alpha.8", "description": "Storybook for Preact: Develop Preact Component in isolation.", "keywords": [ "storybook" diff --git a/code/frameworks/react-native-web-vite/package.json b/code/frameworks/react-native-web-vite/package.json index d6de0b7e481..f999cb9f496 100644 --- a/code/frameworks/react-native-web-vite/package.json +++ b/code/frameworks/react-native-web-vite/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/react-native-web-vite", - "version": "8.5.0-alpha.7", + "version": "8.5.0-alpha.8", "description": "Develop react-native components an isolated web environment with hot reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/react-vite/package.json b/code/frameworks/react-vite/package.json index eb0883cd8ba..aca9b4b63bb 100644 --- a/code/frameworks/react-vite/package.json +++ b/code/frameworks/react-vite/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/react-vite", - "version": "8.5.0-alpha.7", + "version": "8.5.0-alpha.8", "description": "Storybook for React and Vite: Develop React components in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/react-webpack5/package.json b/code/frameworks/react-webpack5/package.json index 2a3b788f555..4d82cae66c6 100644 --- a/code/frameworks/react-webpack5/package.json +++ b/code/frameworks/react-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/react-webpack5", - "version": "8.5.0-alpha.7", + "version": "8.5.0-alpha.8", "description": "Storybook for React: Develop React Component in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/server-webpack5/package.json b/code/frameworks/server-webpack5/package.json index b1908756dba..25c8f064184 100644 --- a/code/frameworks/server-webpack5/package.json +++ b/code/frameworks/server-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/server-webpack5", - "version": "8.5.0-alpha.7", + "version": "8.5.0-alpha.8", "description": "Storybook for Server: View HTML snippets from a server in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/svelte-vite/package.json b/code/frameworks/svelte-vite/package.json index 28db8d6a8ba..40faa7b0711 100644 --- a/code/frameworks/svelte-vite/package.json +++ b/code/frameworks/svelte-vite/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/svelte-vite", - "version": "8.5.0-alpha.7", + "version": "8.5.0-alpha.8", "description": "Storybook for Svelte and Vite: Develop Svelte components in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/svelte-webpack5/package.json b/code/frameworks/svelte-webpack5/package.json index 45844e1cca1..131975fc986 100644 --- a/code/frameworks/svelte-webpack5/package.json +++ b/code/frameworks/svelte-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/svelte-webpack5", - "version": "8.5.0-alpha.7", + "version": "8.5.0-alpha.8", "description": "Storybook for Svelte: Develop Svelte Component in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/sveltekit/package.json b/code/frameworks/sveltekit/package.json index 50c2be36bf1..8f25401fac4 100644 --- a/code/frameworks/sveltekit/package.json +++ b/code/frameworks/sveltekit/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/sveltekit", - "version": "8.5.0-alpha.7", + "version": "8.5.0-alpha.8", "description": "Storybook for SvelteKit", "keywords": [ "storybook", diff --git a/code/frameworks/vue3-vite/package.json b/code/frameworks/vue3-vite/package.json index af419c4e9ea..fd6871a7de2 100644 --- a/code/frameworks/vue3-vite/package.json +++ b/code/frameworks/vue3-vite/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/vue3-vite", - "version": "8.5.0-alpha.7", + "version": "8.5.0-alpha.8", "description": "Storybook for Vue3 and Vite: Develop Vue3 components in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/vue3-webpack5/package.json b/code/frameworks/vue3-webpack5/package.json index baaf0d3871e..f4f4e4e9f90 100644 --- a/code/frameworks/vue3-webpack5/package.json +++ b/code/frameworks/vue3-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/vue3-webpack5", - "version": "8.5.0-alpha.7", + "version": "8.5.0-alpha.8", "description": "Storybook for Vue 3: Develop Vue 3 Components in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/web-components-vite/package.json b/code/frameworks/web-components-vite/package.json index 5ddb6a7dbc8..b9be1852fdf 100644 --- a/code/frameworks/web-components-vite/package.json +++ b/code/frameworks/web-components-vite/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/web-components-vite", - "version": "8.5.0-alpha.7", + "version": "8.5.0-alpha.8", "description": "Storybook for web-components and Vite: Develop Web Components in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/web-components-webpack5/package.json b/code/frameworks/web-components-webpack5/package.json index 31a32108f4f..8c0a1e7e14a 100644 --- a/code/frameworks/web-components-webpack5/package.json +++ b/code/frameworks/web-components-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/web-components-webpack5", - "version": "8.5.0-alpha.7", + "version": "8.5.0-alpha.8", "description": "Storybook for web-components: View web components snippets in isolation with Hot Reloading.", "keywords": [ "lit", diff --git a/code/lib/blocks/package.json b/code/lib/blocks/package.json index 8d65c9b03ec..35f4cd6af38 100644 --- a/code/lib/blocks/package.json +++ b/code/lib/blocks/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/blocks", - "version": "8.5.0-alpha.7", + "version": "8.5.0-alpha.8", "description": "Storybook Doc Blocks", "keywords": [ "storybook" diff --git a/code/lib/cli-sb/package.json b/code/lib/cli-sb/package.json index 8c484134960..cee11678940 100644 --- a/code/lib/cli-sb/package.json +++ b/code/lib/cli-sb/package.json @@ -1,6 +1,6 @@ { "name": "sb", - "version": "8.5.0-alpha.7", + "version": "8.5.0-alpha.8", "description": "Storybook CLI", "keywords": [ "storybook" diff --git a/code/lib/cli-storybook/package.json b/code/lib/cli-storybook/package.json index 0af14e48849..6adf193e115 100644 --- a/code/lib/cli-storybook/package.json +++ b/code/lib/cli-storybook/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/cli", - "version": "8.5.0-alpha.7", + "version": "8.5.0-alpha.8", "description": "Storybook CLI", "keywords": [ "storybook" diff --git a/code/lib/cli/package.json b/code/lib/cli/package.json index 5b17f7e29b4..7b7cfcc4225 100644 --- a/code/lib/cli/package.json +++ b/code/lib/cli/package.json @@ -1,6 +1,6 @@ { "name": "storybook", - "version": "8.5.0-alpha.7", + "version": "8.5.0-alpha.8", "description": "Storybook's CLI - install, dev, build, upgrade, and more", "keywords": [ "cli", diff --git a/code/lib/codemod/package.json b/code/lib/codemod/package.json index 5313cd7738d..c9450106d52 100644 --- a/code/lib/codemod/package.json +++ b/code/lib/codemod/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/codemod", - "version": "8.5.0-alpha.7", + "version": "8.5.0-alpha.8", "description": "A collection of codemod scripts written with JSCodeshift", "keywords": [ "storybook" diff --git a/code/lib/core-webpack/package.json b/code/lib/core-webpack/package.json index 594a5b64389..4771c1769ec 100644 --- a/code/lib/core-webpack/package.json +++ b/code/lib/core-webpack/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/core-webpack", - "version": "8.5.0-alpha.7", + "version": "8.5.0-alpha.8", "description": "Storybook framework-agnostic API", "keywords": [ "storybook" diff --git a/code/lib/create-storybook/package.json b/code/lib/create-storybook/package.json index 0bd460f8a4c..6f259e11da5 100644 --- a/code/lib/create-storybook/package.json +++ b/code/lib/create-storybook/package.json @@ -1,6 +1,6 @@ { "name": "create-storybook", - "version": "8.5.0-alpha.7", + "version": "8.5.0-alpha.8", "description": "Initialize Storybook into your project", "homepage": "https://github.com/storybookjs/storybook/tree/next/code/lib/create-storybook", "bugs": { diff --git a/code/lib/csf-plugin/package.json b/code/lib/csf-plugin/package.json index 976a24a898a..037e1639df0 100644 --- a/code/lib/csf-plugin/package.json +++ b/code/lib/csf-plugin/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/csf-plugin", - "version": "8.5.0-alpha.7", + "version": "8.5.0-alpha.8", "description": "Enrich CSF files via static analysis", "keywords": [ "storybook" diff --git a/code/lib/instrumenter/package.json b/code/lib/instrumenter/package.json index 7af99d61770..9b91945f92b 100644 --- a/code/lib/instrumenter/package.json +++ b/code/lib/instrumenter/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/instrumenter", - "version": "8.5.0-alpha.7", + "version": "8.5.0-alpha.8", "description": "", "keywords": [ "storybook" diff --git a/code/lib/react-dom-shim/package.json b/code/lib/react-dom-shim/package.json index bde501fc191..e1ecc776145 100644 --- a/code/lib/react-dom-shim/package.json +++ b/code/lib/react-dom-shim/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/react-dom-shim", - "version": "8.5.0-alpha.7", + "version": "8.5.0-alpha.8", "description": "", "keywords": [ "storybook" diff --git a/code/lib/source-loader/package.json b/code/lib/source-loader/package.json index fb2b1ae82de..bb461168744 100644 --- a/code/lib/source-loader/package.json +++ b/code/lib/source-loader/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/source-loader", - "version": "8.5.0-alpha.7", + "version": "8.5.0-alpha.8", "description": "Source loader", "keywords": [ "lib", diff --git a/code/lib/test/package.json b/code/lib/test/package.json index 0687aeb32c8..7837874e92d 100644 --- a/code/lib/test/package.json +++ b/code/lib/test/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/test", - "version": "8.5.0-alpha.7", + "version": "8.5.0-alpha.8", "description": "", "keywords": [ "storybook" diff --git a/code/package.json b/code/package.json index 723ab1c6d24..6a57557f1f6 100644 --- a/code/package.json +++ b/code/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/root", - "version": "8.5.0-alpha.7", + "version": "8.5.0-alpha.8", "private": true, "description": "Storybook root", "homepage": "https://storybook.js.org/", @@ -293,6 +293,5 @@ "Dependency Upgrades" ] ] - }, - "deferredNextVersion": "8.5.0-alpha.8" + } } diff --git a/code/presets/create-react-app/package.json b/code/presets/create-react-app/package.json index 81af4550773..90bb1067a73 100644 --- a/code/presets/create-react-app/package.json +++ b/code/presets/create-react-app/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preset-create-react-app", - "version": "8.5.0-alpha.7", + "version": "8.5.0-alpha.8", "description": "Storybook for Create React App preset", "keywords": [ "storybook" diff --git a/code/presets/html-webpack/package.json b/code/presets/html-webpack/package.json index 6c09e460eda..3061754c759 100644 --- a/code/presets/html-webpack/package.json +++ b/code/presets/html-webpack/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preset-html-webpack", - "version": "8.5.0-alpha.7", + "version": "8.5.0-alpha.8", "description": "Storybook for HTML: View HTML snippets in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/presets/preact-webpack/package.json b/code/presets/preact-webpack/package.json index e10ef59f0b7..beb24e945f6 100644 --- a/code/presets/preact-webpack/package.json +++ b/code/presets/preact-webpack/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preset-preact-webpack", - "version": "8.5.0-alpha.7", + "version": "8.5.0-alpha.8", "description": "Storybook for Preact: Develop Preact Component in isolation.", "keywords": [ "storybook" diff --git a/code/presets/react-webpack/package.json b/code/presets/react-webpack/package.json index 4c8b1dea531..cb5b4305111 100644 --- a/code/presets/react-webpack/package.json +++ b/code/presets/react-webpack/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preset-react-webpack", - "version": "8.5.0-alpha.7", + "version": "8.5.0-alpha.8", "description": "Storybook for React: Develop React Component in isolation with Hot Reloading", "keywords": [ "storybook" diff --git a/code/presets/server-webpack/package.json b/code/presets/server-webpack/package.json index 30530aba228..7c991914bdb 100644 --- a/code/presets/server-webpack/package.json +++ b/code/presets/server-webpack/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preset-server-webpack", - "version": "8.5.0-alpha.7", + "version": "8.5.0-alpha.8", "description": "Storybook for Server: View HTML snippets from a server in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/presets/svelte-webpack/package.json b/code/presets/svelte-webpack/package.json index d8adcaf6895..a195df8a23e 100644 --- a/code/presets/svelte-webpack/package.json +++ b/code/presets/svelte-webpack/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preset-svelte-webpack", - "version": "8.5.0-alpha.7", + "version": "8.5.0-alpha.8", "description": "Storybook for Svelte: Develop Svelte Component in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/presets/vue3-webpack/package.json b/code/presets/vue3-webpack/package.json index b43b38b6d64..6b4246fe2c9 100644 --- a/code/presets/vue3-webpack/package.json +++ b/code/presets/vue3-webpack/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preset-vue3-webpack", - "version": "8.5.0-alpha.7", + "version": "8.5.0-alpha.8", "description": "Storybook for Vue 3: Develop Vue 3 Components in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/renderers/html/package.json b/code/renderers/html/package.json index df2b8c8bf83..dcd3a9a9f09 100644 --- a/code/renderers/html/package.json +++ b/code/renderers/html/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/html", - "version": "8.5.0-alpha.7", + "version": "8.5.0-alpha.8", "description": "Storybook HTML renderer", "keywords": [ "storybook" diff --git a/code/renderers/preact/package.json b/code/renderers/preact/package.json index 6a04f653df6..0d985e22d04 100644 --- a/code/renderers/preact/package.json +++ b/code/renderers/preact/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preact", - "version": "8.5.0-alpha.7", + "version": "8.5.0-alpha.8", "description": "Storybook Preact renderer", "keywords": [ "storybook" diff --git a/code/renderers/react/package.json b/code/renderers/react/package.json index 2a94e89d449..acd4391271d 100644 --- a/code/renderers/react/package.json +++ b/code/renderers/react/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/react", - "version": "8.5.0-alpha.7", + "version": "8.5.0-alpha.8", "description": "Storybook React renderer", "keywords": [ "storybook" diff --git a/code/renderers/server/package.json b/code/renderers/server/package.json index cc8d6e1145c..70f2abbc0c3 100644 --- a/code/renderers/server/package.json +++ b/code/renderers/server/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/server", - "version": "8.5.0-alpha.7", + "version": "8.5.0-alpha.8", "description": "Storybook Server renderer", "keywords": [ "storybook" diff --git a/code/renderers/svelte/package.json b/code/renderers/svelte/package.json index 48f9135404b..43a693d7f58 100644 --- a/code/renderers/svelte/package.json +++ b/code/renderers/svelte/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/svelte", - "version": "8.5.0-alpha.7", + "version": "8.5.0-alpha.8", "description": "Storybook Svelte renderer", "keywords": [ "storybook" diff --git a/code/renderers/vue3/package.json b/code/renderers/vue3/package.json index 9d6ead5f33d..384e934a37f 100644 --- a/code/renderers/vue3/package.json +++ b/code/renderers/vue3/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/vue3", - "version": "8.5.0-alpha.7", + "version": "8.5.0-alpha.8", "description": "Storybook Vue 3 renderer", "keywords": [ "storybook" diff --git a/code/renderers/web-components/package.json b/code/renderers/web-components/package.json index 77b1518c0c5..bae93a66429 100644 --- a/code/renderers/web-components/package.json +++ b/code/renderers/web-components/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/web-components", - "version": "8.5.0-alpha.7", + "version": "8.5.0-alpha.8", "description": "Storybook web-components renderer", "keywords": [ "lit", From e762e5dfc503fd87301cf2459324e155b1d02343 Mon Sep 17 00:00:00 2001 From: Yann Braga <yannbf@gmail.com> Date: Tue, 19 Nov 2024 16:27:24 +0100 Subject: [PATCH 091/101] update vitest plugin version --- code/frameworks/experimental-nextjs-vite/package.json | 2 +- code/yarn.lock | 10 +++++----- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/code/frameworks/experimental-nextjs-vite/package.json b/code/frameworks/experimental-nextjs-vite/package.json index b57c3f5bf75..e2d1384e237 100644 --- a/code/frameworks/experimental-nextjs-vite/package.json +++ b/code/frameworks/experimental-nextjs-vite/package.json @@ -99,7 +99,7 @@ "@storybook/react": "workspace:*", "@storybook/test": "workspace:*", "styled-jsx": "5.1.6", - "vite-plugin-storybook-nextjs": "1.1.0--canary.27.65f1124.0" + "vite-plugin-storybook-nextjs": "^1.1.0" }, "devDependencies": { "@types/node": "^18.0.0", diff --git a/code/yarn.lock b/code/yarn.lock index 09d9fefa214..45663fd3d6a 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -6475,7 +6475,7 @@ __metadata: sharp: "npm:^0.33.3" styled-jsx: "npm:5.1.6" typescript: "npm:^5.3.2" - vite-plugin-storybook-nextjs: "npm:1.1.0--canary.27.65f1124.0" + vite-plugin-storybook-nextjs: "npm:^1.1.0" peerDependencies: "@storybook/test": "workspace:*" next: ^14.1.0 || ^15.0.0 @@ -28791,9 +28791,9 @@ __metadata: languageName: node linkType: hard -"vite-plugin-storybook-nextjs@npm:1.1.0--canary.27.65f1124.0": - version: 1.1.0--canary.27.65f1124.0 - resolution: "vite-plugin-storybook-nextjs@npm:1.1.0--canary.27.65f1124.0" +"vite-plugin-storybook-nextjs@npm:^1.1.0": + version: 1.1.0 + resolution: "vite-plugin-storybook-nextjs@npm:1.1.0" dependencies: "@next/env": "npm:^15.0.3" image-size: "npm:^1.1.1" @@ -28809,7 +28809,7 @@ __metadata: dependenciesMeta: sharp: optional: true - checksum: 10c0/be22526b7471522a7a12f3302cf802708899a977d105317c7339f86aa4e6c25cbe3df37f983bef2c5875fda987daa7388171b78d0184ac7e000fbd180e1629bc + checksum: 10c0/02761e1074e62a46b30fc5e13b1c7a3bf6047a5736ac17de8e33376a6cff2b1118a48a95d195ddfd37b1e7a55f6eb3385677da9b4d713189c2b68b9f9843906d languageName: node linkType: hard From f01516d668cb5b18b1b9bf64d177756bf8964456 Mon Sep 17 00:00:00 2001 From: Yann Braga <yannbf@gmail.com> Date: Tue, 19 Nov 2024 17:46:06 +0100 Subject: [PATCH 092/101] make mountinplay story more resilient --- code/lib/test/template/stories/mount-in-play.stories.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/code/lib/test/template/stories/mount-in-play.stories.ts b/code/lib/test/template/stories/mount-in-play.stories.ts index c7acb7dce68..0c87263ba48 100644 --- a/code/lib/test/template/stories/mount-in-play.stories.ts +++ b/code/lib/test/template/stories/mount-in-play.stories.ts @@ -32,7 +32,8 @@ export const MountInPlay = { await mount(); console.log('6 - [after mount]'); await userEvent.click(getByRole(canvasElement, 'button')); - await expect(mocked(console.log).mock.calls).toEqual([ + const allLogs = mocked(console.log).mock.calls.filter(([message]) => /^\d+ - /.test(message)); + await expect(allLogs).toEqual([ ['1 - [from loaders]'], ['2 - [from meta beforeEach]'], ['3 - [from story beforeEach]'], From ac4635c90f4328e4d0c5d7f847be01e1adff1415 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Leosvel=20P=C3=A9rez=20Espinosa?= <leosvel.perez.espinosa@gmail.com> Date: Tue, 19 Nov 2024 18:59:19 +0100 Subject: [PATCH 093/101] test: set explicit `standalone: false` --- code/frameworks/angular/template/components/button.component.ts | 1 + code/frameworks/angular/template/components/form.component.ts | 1 + code/frameworks/angular/template/components/html.component.ts | 1 + code/frameworks/angular/template/components/pre.component.ts | 1 + .../stories/argTypes/doc-button/doc-button.component.ts | 1 + .../stories/argTypes/doc-directive/doc-directive.directive.ts | 1 + .../angular/template/stories/argTypes/doc-pipe/doc-pipe.pipe.ts | 1 + .../customControlValueAccessor/custom-cva.component.ts | 1 + .../attribute-selector.component.ts | 1 + .../class-selector.component.ts | 1 + .../multiple-selector.component.ts | 2 ++ .../stories/basics/component-with-enums/enums.component.ts | 1 + .../basics/component-with-inheritance/base-button.component.ts | 1 + .../basics/component-with-inheritance/icon-button.component.ts | 1 + .../ng-content-about-parent.stories.ts | 1 + .../component-with-ng-content/ng-content-simple.stories.ts | 1 + .../component-with-on-destroy.stories.ts | 1 + .../basics/component-with-on-push/on-push-box.component.ts | 1 + .../stories/basics/component-with-provider/di.component.ts | 1 + .../stories/basics/component-with-style/styled.component.ts | 1 + .../without-selector-ng-component-outlet.stories.ts | 1 + .../component-without-selector/without-selector.component.ts | 1 + code/frameworks/angular/template/stories/button.component.ts | 1 + .../decorators/componentWrapperDecorator/child.component.ts | 1 + .../decorators/componentWrapperDecorator/parent.component.ts | 1 + .../stories/core/moduleMetadata/angular-src/custom.pipe.ts | 1 + .../angular-src/open-close-component/open-close.component.ts | 1 + .../core/moduleMetadata/angular-src/service.component.ts | 1 + .../stories/core/moduleMetadata/angular-src/token.component.ts | 1 + .../stories/core/parameters/bootstrap-options.stories.ts | 1 + .../stories_angular-cli-default-ts/signal/button.component.ts | 1 + .../stories_angular-cli-prerelease/signal/button.component.ts | 1 + 32 files changed, 33 insertions(+) diff --git a/code/frameworks/angular/template/components/button.component.ts b/code/frameworks/angular/template/components/button.component.ts index 7a0fc8e8408..4407ead9b05 100644 --- a/code/frameworks/angular/template/components/button.component.ts +++ b/code/frameworks/angular/template/components/button.component.ts @@ -1,6 +1,7 @@ import { Component, Input, Output, EventEmitter } from '@angular/core'; @Component({ + standalone: false, // Needs to be a different name to the CLI template button selector: 'storybook-framework-button', template: ` <button diff --git a/code/frameworks/angular/template/components/form.component.ts b/code/frameworks/angular/template/components/form.component.ts index 697aef1d68d..272e79eebf7 100644 --- a/code/frameworks/angular/template/components/form.component.ts +++ b/code/frameworks/angular/template/components/form.component.ts @@ -1,6 +1,7 @@ import { Component, Output, EventEmitter } from '@angular/core'; @Component({ + standalone: false, selector: 'storybook-form', template: ` <form id="interaction-test-form" (submit)="handleSubmit($event)"> diff --git a/code/frameworks/angular/template/components/html.component.ts b/code/frameworks/angular/template/components/html.component.ts index 7efcf9770e6..fc3e8235387 100644 --- a/code/frameworks/angular/template/components/html.component.ts +++ b/code/frameworks/angular/template/components/html.component.ts @@ -2,6 +2,7 @@ import { Component, Input } from '@angular/core'; import { DomSanitizer } from '@angular/platform-browser'; @Component({ + standalone: false, selector: 'storybook-html', template: `<div [innerHTML]="safeContent"></div>`, }) diff --git a/code/frameworks/angular/template/components/pre.component.ts b/code/frameworks/angular/template/components/pre.component.ts index df714c93693..0fdecbec545 100644 --- a/code/frameworks/angular/template/components/pre.component.ts +++ b/code/frameworks/angular/template/components/pre.component.ts @@ -1,6 +1,7 @@ import { Component, Input } from '@angular/core'; @Component({ + standalone: false, selector: 'storybook-pre', template: `<pre data-testid="pre" [ngStyle]="style">{{ finalText }}</pre>`, }) diff --git a/code/frameworks/angular/template/stories/argTypes/doc-button/doc-button.component.ts b/code/frameworks/angular/template/stories/argTypes/doc-button/doc-button.component.ts index 503dc358e22..37852f7fe2e 100644 --- a/code/frameworks/angular/template/stories/argTypes/doc-button/doc-button.component.ts +++ b/code/frameworks/angular/template/stories/argTypes/doc-button/doc-button.component.ts @@ -38,6 +38,7 @@ export enum ButtonAccent { * @html <span class="badge">aaa</span> */ @Component({ + standalone: false, selector: 'my-button', templateUrl: './doc-button.component.html', styleUrls: ['./doc-button.component.scss'], diff --git a/code/frameworks/angular/template/stories/argTypes/doc-directive/doc-directive.directive.ts b/code/frameworks/angular/template/stories/argTypes/doc-directive/doc-directive.directive.ts index 566ad55a992..66c4b668152 100644 --- a/code/frameworks/angular/template/stories/argTypes/doc-directive/doc-directive.directive.ts +++ b/code/frameworks/angular/template/stories/argTypes/doc-directive/doc-directive.directive.ts @@ -2,6 +2,7 @@ import { ElementRef, AfterViewInit, Directive, Input } from '@angular/core'; /** This is an Angular Directive example that has a Prop Table. */ @Directive({ + standalone: false, selector: '[docDirective]', }) export class DocDirective implements AfterViewInit { diff --git a/code/frameworks/angular/template/stories/argTypes/doc-pipe/doc-pipe.pipe.ts b/code/frameworks/angular/template/stories/argTypes/doc-pipe/doc-pipe.pipe.ts index 2964a6ef68c..2bf9539e935 100644 --- a/code/frameworks/angular/template/stories/argTypes/doc-pipe/doc-pipe.pipe.ts +++ b/code/frameworks/angular/template/stories/argTypes/doc-pipe/doc-pipe.pipe.ts @@ -2,6 +2,7 @@ import { PipeTransform, Pipe } from '@angular/core'; /** This is an Angular Pipe example that has a Prop Table. */ @Pipe({ + standalone: false, name: 'docPipe', }) export class DocPipe implements PipeTransform { diff --git a/code/frameworks/angular/template/stories/basics/angular-forms/customControlValueAccessor/custom-cva.component.ts b/code/frameworks/angular/template/stories/basics/angular-forms/customControlValueAccessor/custom-cva.component.ts index cf05f53fff5..00a23c4fe74 100644 --- a/code/frameworks/angular/template/stories/basics/angular-forms/customControlValueAccessor/custom-cva.component.ts +++ b/code/frameworks/angular/template/stories/basics/angular-forms/customControlValueAccessor/custom-cva.component.ts @@ -4,6 +4,7 @@ import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'; const NOOP = () => {}; @Component({ + standalone: false, selector: 'storybook-custom-cva-component', template: ` <div>{{ value }}</div> <input type="text" [(ngModel)]="value" /> `, diff --git a/code/frameworks/angular/template/stories/basics/component-with-complex-selectors/attribute-selector.component.ts b/code/frameworks/angular/template/stories/basics/component-with-complex-selectors/attribute-selector.component.ts index 3b1eebacb1b..6a3f6215b15 100644 --- a/code/frameworks/angular/template/stories/basics/component-with-complex-selectors/attribute-selector.component.ts +++ b/code/frameworks/angular/template/stories/basics/component-with-complex-selectors/attribute-selector.component.ts @@ -1,6 +1,7 @@ import { ComponentFactoryResolver, ElementRef, Component } from '@angular/core'; @Component({ + standalone: false, selector: 'storybook-attribute-selector[foo=bar]', template: `<h3>Attribute selector</h3> Selector: {{ selectors }} <br /> diff --git a/code/frameworks/angular/template/stories/basics/component-with-complex-selectors/class-selector.component.ts b/code/frameworks/angular/template/stories/basics/component-with-complex-selectors/class-selector.component.ts index b1fa65859db..2c60a3488b7 100644 --- a/code/frameworks/angular/template/stories/basics/component-with-complex-selectors/class-selector.component.ts +++ b/code/frameworks/angular/template/stories/basics/component-with-complex-selectors/class-selector.component.ts @@ -1,6 +1,7 @@ import { ComponentFactoryResolver, ElementRef, Component } from '@angular/core'; @Component({ + standalone: false, selector: 'storybook-class-selector.foo, storybook-class-selector.bar', template: `<h3>Class selector</h3> Selector: {{ selectors }} <br /> diff --git a/code/frameworks/angular/template/stories/basics/component-with-complex-selectors/multiple-selector.component.ts b/code/frameworks/angular/template/stories/basics/component-with-complex-selectors/multiple-selector.component.ts index 5a12fc7ffe5..255d4d51a68 100644 --- a/code/frameworks/angular/template/stories/basics/component-with-complex-selectors/multiple-selector.component.ts +++ b/code/frameworks/angular/template/stories/basics/component-with-complex-selectors/multiple-selector.component.ts @@ -1,6 +1,7 @@ import { ComponentFactoryResolver, ElementRef, Component } from '@angular/core'; @Component({ + standalone: false, selector: 'storybook-multiple-selector, storybook-multiple-selector2', template: `<h3>Multiple selector</h3> Selector: {{ selectors }} <br /> @@ -22,6 +23,7 @@ export class MultipleSelectorComponent { } @Component({ + standalone: false, selector: 'storybook-button, button[foo], .button[foo], button[baz]', template: `<h3>Multiple selector</h3> Selector: {{ selectors }} <br /> diff --git a/code/frameworks/angular/template/stories/basics/component-with-enums/enums.component.ts b/code/frameworks/angular/template/stories/basics/component-with-enums/enums.component.ts index 492f575b69f..171e4ff51d0 100644 --- a/code/frameworks/angular/template/stories/basics/component-with-enums/enums.component.ts +++ b/code/frameworks/angular/template/stories/basics/component-with-enums/enums.component.ts @@ -2,6 +2,7 @@ import { Component, Input } from '@angular/core'; /** This component is used for testing the various forms of enum types */ @Component({ + standalone: false, selector: 'app-enums', templateUrl: './enums.component.html', }) diff --git a/code/frameworks/angular/template/stories/basics/component-with-inheritance/base-button.component.ts b/code/frameworks/angular/template/stories/basics/component-with-inheritance/base-button.component.ts index 0cd694506d5..b1d8111cef2 100644 --- a/code/frameworks/angular/template/stories/basics/component-with-inheritance/base-button.component.ts +++ b/code/frameworks/angular/template/stories/basics/component-with-inheritance/base-button.component.ts @@ -1,6 +1,7 @@ import { Component, Input } from '@angular/core'; @Component({ + standalone: false, selector: `storybook-base-button`, template: ` <button>{{ label }}</button> `, }) diff --git a/code/frameworks/angular/template/stories/basics/component-with-inheritance/icon-button.component.ts b/code/frameworks/angular/template/stories/basics/component-with-inheritance/icon-button.component.ts index 3994a3de2a9..4dfc63e09c8 100644 --- a/code/frameworks/angular/template/stories/basics/component-with-inheritance/icon-button.component.ts +++ b/code/frameworks/angular/template/stories/basics/component-with-inheritance/icon-button.component.ts @@ -2,6 +2,7 @@ import { Component, Input } from '@angular/core'; import { BaseButtonComponent } from './base-button.component'; @Component({ + standalone: false, selector: `storybook-icon-button`, template: ` <button>{{ label }} - {{ icon }}</button> `, }) diff --git a/code/frameworks/angular/template/stories/basics/component-with-ng-content/ng-content-about-parent.stories.ts b/code/frameworks/angular/template/stories/basics/component-with-ng-content/ng-content-about-parent.stories.ts index f8185f8eb80..9f54986c6cc 100644 --- a/code/frameworks/angular/template/stories/basics/component-with-ng-content/ng-content-about-parent.stories.ts +++ b/code/frameworks/angular/template/stories/basics/component-with-ng-content/ng-content-about-parent.stories.ts @@ -2,6 +2,7 @@ import { Component, Input } from '@angular/core'; import { componentWrapperDecorator, Meta, StoryObj } from '@storybook/angular'; @Component({ + standalone: false, selector: 'sb-button', template: `<button [style.background-color]="color"><ng-content></ng-content></button>`, styles: [ diff --git a/code/frameworks/angular/template/stories/basics/component-with-ng-content/ng-content-simple.stories.ts b/code/frameworks/angular/template/stories/basics/component-with-ng-content/ng-content-simple.stories.ts index cc6bd1ccf6e..775a895aa5d 100644 --- a/code/frameworks/angular/template/stories/basics/component-with-ng-content/ng-content-simple.stories.ts +++ b/code/frameworks/angular/template/stories/basics/component-with-ng-content/ng-content-simple.stories.ts @@ -3,6 +3,7 @@ import { Component } from '@angular/core'; import { Meta, StoryObj } from '@storybook/angular'; @Component({ + standalone: false, selector: 'storybook-with-ng-content', template: `Content value: <div style="color: #1e88e5"><ng-content></ng-content></div>`, diff --git a/code/frameworks/angular/template/stories/basics/component-with-ng-on-destroy/component-with-on-destroy.stories.ts b/code/frameworks/angular/template/stories/basics/component-with-ng-on-destroy/component-with-on-destroy.stories.ts index 24edd068f7f..8ccc180b991 100644 --- a/code/frameworks/angular/template/stories/basics/component-with-ng-on-destroy/component-with-on-destroy.stories.ts +++ b/code/frameworks/angular/template/stories/basics/component-with-ng-on-destroy/component-with-on-destroy.stories.ts @@ -2,6 +2,7 @@ import { OnDestroy, OnInit, Component } from '@angular/core'; import { Meta, StoryObj } from '@storybook/angular'; @Component({ + standalone: false, selector: 'on-destroy', template: `Current time: {{ time }} <br /> 📝 The current time in console should no longer display after a change of story`, diff --git a/code/frameworks/angular/template/stories/basics/component-with-on-push/on-push-box.component.ts b/code/frameworks/angular/template/stories/basics/component-with-on-push/on-push-box.component.ts index b6bf293f1b0..9d8a86aa67f 100644 --- a/code/frameworks/angular/template/stories/basics/component-with-on-push/on-push-box.component.ts +++ b/code/frameworks/angular/template/stories/basics/component-with-on-push/on-push-box.component.ts @@ -1,6 +1,7 @@ import { Component, Input, ChangeDetectionStrategy, HostBinding } from '@angular/core'; @Component({ + standalone: false, selector: 'storybook-on-push-box', template: ` Word of the day: {{ word }} `, styles: [ diff --git a/code/frameworks/angular/template/stories/basics/component-with-provider/di.component.ts b/code/frameworks/angular/template/stories/basics/component-with-provider/di.component.ts index e3e8a28ac18..c840bf64a4a 100644 --- a/code/frameworks/angular/template/stories/basics/component-with-provider/di.component.ts +++ b/code/frameworks/angular/template/stories/basics/component-with-provider/di.component.ts @@ -4,6 +4,7 @@ import { stringify } from 'telejson'; export const TEST_TOKEN = new InjectionToken<string>('test'); @Component({ + standalone: false, selector: 'storybook-di-component', templateUrl: './di.component.html', providers: [{ provide: TEST_TOKEN, useValue: 123 }], diff --git a/code/frameworks/angular/template/stories/basics/component-with-style/styled.component.ts b/code/frameworks/angular/template/stories/basics/component-with-style/styled.component.ts index 6cdb0a9a627..63ac3c56b07 100644 --- a/code/frameworks/angular/template/stories/basics/component-with-style/styled.component.ts +++ b/code/frameworks/angular/template/stories/basics/component-with-style/styled.component.ts @@ -1,6 +1,7 @@ import { Component } from '@angular/core'; @Component({ + standalone: false, selector: 'storybook-styled-component', templateUrl: './styled.component.html', styleUrls: ['./styled.component.css', './styled.component.scss'], diff --git a/code/frameworks/angular/template/stories/basics/component-without-selector/without-selector-ng-component-outlet.stories.ts b/code/frameworks/angular/template/stories/basics/component-without-selector/without-selector-ng-component-outlet.stories.ts index 5518e437763..64347d989fc 100644 --- a/code/frameworks/angular/template/stories/basics/component-without-selector/without-selector-ng-component-outlet.stories.ts +++ b/code/frameworks/angular/template/stories/basics/component-without-selector/without-selector-ng-component-outlet.stories.ts @@ -19,6 +19,7 @@ type Story = StoryObj<WithoutSelectorComponent>; // Advanced example with custom *ngComponentOutlet @Component({ + standalone: false, selector: 'ng-component-outlet-wrapper', template: `<ng-container *ngComponentOutlet="componentOutlet; injector: componentInjector; content: componentContent" diff --git a/code/frameworks/angular/template/stories/basics/component-without-selector/without-selector.component.ts b/code/frameworks/angular/template/stories/basics/component-without-selector/without-selector.component.ts index 6e9ed12eff3..9d0b0d42869 100644 --- a/code/frameworks/angular/template/stories/basics/component-without-selector/without-selector.component.ts +++ b/code/frameworks/angular/template/stories/basics/component-without-selector/without-selector.component.ts @@ -5,6 +5,7 @@ export const WITHOUT_SELECTOR_DATA = new InjectionToken<{ color: string; name: s ); @Component({ + standalone: false, template: `My name in color : <div [style.color]="color">{{ name }}</div> <ng-content></ng-content> <ng-content></ng-content>`, diff --git a/code/frameworks/angular/template/stories/button.component.ts b/code/frameworks/angular/template/stories/button.component.ts index 3617f8c5993..0d675ad1a60 100644 --- a/code/frameworks/angular/template/stories/button.component.ts +++ b/code/frameworks/angular/template/stories/button.component.ts @@ -1,6 +1,7 @@ import { Component, Input, Output, EventEmitter } from '@angular/core'; @Component({ + standalone: false, selector: 'storybook-button-component', template: ` <button (click)="onClick.emit($event)">{{ text }}</button> `, styles: [ diff --git a/code/frameworks/angular/template/stories/core/decorators/componentWrapperDecorator/child.component.ts b/code/frameworks/angular/template/stories/core/decorators/componentWrapperDecorator/child.component.ts index 5caf5db9cb2..3ac601cf8e8 100644 --- a/code/frameworks/angular/template/stories/core/decorators/componentWrapperDecorator/child.component.ts +++ b/code/frameworks/angular/template/stories/core/decorators/componentWrapperDecorator/child.component.ts @@ -1,6 +1,7 @@ import { Component, Input, Output, EventEmitter } from '@angular/core'; @Component({ + standalone: false, selector: 'child-component', template: ` Child<br /> diff --git a/code/frameworks/angular/template/stories/core/decorators/componentWrapperDecorator/parent.component.ts b/code/frameworks/angular/template/stories/core/decorators/componentWrapperDecorator/parent.component.ts index 20a4447636b..b32984ebb99 100644 --- a/code/frameworks/angular/template/stories/core/decorators/componentWrapperDecorator/parent.component.ts +++ b/code/frameworks/angular/template/stories/core/decorators/componentWrapperDecorator/parent.component.ts @@ -1,6 +1,7 @@ import { Component, Input, Output, EventEmitter } from '@angular/core'; @Component({ + standalone: false, selector: 'parent-component', template: ` Parent<br /> diff --git a/code/frameworks/angular/template/stories/core/moduleMetadata/angular-src/custom.pipe.ts b/code/frameworks/angular/template/stories/core/moduleMetadata/angular-src/custom.pipe.ts index 0038bd60924..e588751b936 100644 --- a/code/frameworks/angular/template/stories/core/moduleMetadata/angular-src/custom.pipe.ts +++ b/code/frameworks/angular/template/stories/core/moduleMetadata/angular-src/custom.pipe.ts @@ -1,6 +1,7 @@ import { PipeTransform, Pipe } from '@angular/core'; @Pipe({ + standalone: false, name: 'customPipe', }) export class CustomPipePipe implements PipeTransform { diff --git a/code/frameworks/angular/template/stories/core/moduleMetadata/angular-src/open-close-component/open-close.component.ts b/code/frameworks/angular/template/stories/core/moduleMetadata/angular-src/open-close-component/open-close.component.ts index db630db4d4b..4982f166e2a 100644 --- a/code/frameworks/angular/template/stories/core/moduleMetadata/angular-src/open-close-component/open-close.component.ts +++ b/code/frameworks/angular/template/stories/core/moduleMetadata/angular-src/open-close-component/open-close.component.ts @@ -2,6 +2,7 @@ import { Component } from '@angular/core'; import { trigger, state, style, transition, animate } from '@angular/animations'; @Component({ + standalone: false, selector: 'app-open-close', animations: [ trigger('openClose', [ diff --git a/code/frameworks/angular/template/stories/core/moduleMetadata/angular-src/service.component.ts b/code/frameworks/angular/template/stories/core/moduleMetadata/angular-src/service.component.ts index 6e84cb43044..736c6cbff92 100644 --- a/code/frameworks/angular/template/stories/core/moduleMetadata/angular-src/service.component.ts +++ b/code/frameworks/angular/template/stories/core/moduleMetadata/angular-src/service.component.ts @@ -2,6 +2,7 @@ import { OnInit, Component, Input } from '@angular/core'; import { DummyService } from './dummy.service'; @Component({ + standalone: false, selector: 'storybook-simple-service-component', template: `<p>{{ name }}:</p> <ul> diff --git a/code/frameworks/angular/template/stories/core/moduleMetadata/angular-src/token.component.ts b/code/frameworks/angular/template/stories/core/moduleMetadata/angular-src/token.component.ts index 8268bceaf3c..df1c85925aa 100644 --- a/code/frameworks/angular/template/stories/core/moduleMetadata/angular-src/token.component.ts +++ b/code/frameworks/angular/template/stories/core/moduleMetadata/angular-src/token.component.ts @@ -4,6 +4,7 @@ export const ITEMS = new InjectionToken<string[]>('TokenComponent.Items'); export const DEFAULT_NAME = new InjectionToken<string>('TokenComponent.DefaultName'); @Component({ + standalone: false, selector: 'storybook-simple-token-component', template: ` <h3>{{ name }}</h3> diff --git a/code/frameworks/angular/template/stories/core/parameters/bootstrap-options.stories.ts b/code/frameworks/angular/template/stories/core/parameters/bootstrap-options.stories.ts index f3cebdb807a..b5c4d1d9725 100644 --- a/code/frameworks/angular/template/stories/core/parameters/bootstrap-options.stories.ts +++ b/code/frameworks/angular/template/stories/core/parameters/bootstrap-options.stories.ts @@ -2,6 +2,7 @@ import { Meta, StoryObj } from '@storybook/angular'; import { Component } from '@angular/core'; @Component({ + standalone: false, selector: 'component-with-whitespace', preserveWhitespaces: true, template: ` <div> diff --git a/code/frameworks/angular/template/stories_angular-cli-default-ts/signal/button.component.ts b/code/frameworks/angular/template/stories_angular-cli-default-ts/signal/button.component.ts index a471debefaf..d0513056aea 100644 --- a/code/frameworks/angular/template/stories_angular-cli-default-ts/signal/button.component.ts +++ b/code/frameworks/angular/template/stories_angular-cli-default-ts/signal/button.component.ts @@ -1,6 +1,7 @@ import { Component, Input, input, output } from '@angular/core'; @Component({ + standalone: false, // Needs to be a different name to the CLI template button selector: 'storybook-signal-button', template: ` <button diff --git a/code/frameworks/angular/template/stories_angular-cli-prerelease/signal/button.component.ts b/code/frameworks/angular/template/stories_angular-cli-prerelease/signal/button.component.ts index a471debefaf..d0513056aea 100644 --- a/code/frameworks/angular/template/stories_angular-cli-prerelease/signal/button.component.ts +++ b/code/frameworks/angular/template/stories_angular-cli-prerelease/signal/button.component.ts @@ -1,6 +1,7 @@ import { Component, Input, input, output } from '@angular/core'; @Component({ + standalone: false, // Needs to be a different name to the CLI template button selector: 'storybook-signal-button', template: ` <button From 8173350f7bc5ecc64a73b5e1eeee891d3661fd89 Mon Sep 17 00:00:00 2001 From: Yann Braga <yannbf@gmail.com> Date: Tue, 19 Nov 2024 19:10:57 +0100 Subject: [PATCH 094/101] fix parallelism --- .circleci/config.yml | 38 ++++++++-------- .../cli-storybook/src/sandbox-templates.ts | 4 +- scripts/get-template.ts | 45 ++++++++++--------- 3 files changed, 47 insertions(+), 40 deletions(-) diff --git a/.circleci/config.yml b/.circleci/config.yml index 5e7b5f1f1e0..69a497aa058 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -826,19 +826,19 @@ workflows: requires: - unit-tests - create-sandboxes: - parallelism: 14 + parallelism: 15 requires: - build - build-sandboxes: - parallelism: 14 + parallelism: 15 requires: - create-sandboxes - chromatic-sandboxes: - parallelism: 11 + parallelism: 12 requires: - build-sandboxes - e2e-production: - parallelism: 9 + parallelism: 10 requires: - build-sandboxes - e2e-dev: @@ -846,11 +846,11 @@ workflows: requires: - create-sandboxes - test-runner-production: - parallelism: 9 + parallelism: 10 requires: - build-sandboxes - vitest-integration: - parallelism: 5 + parallelism: 6 requires: - create-sandboxes - bench-sandboxes: @@ -904,31 +904,31 @@ workflows: requires: - unit-tests - create-sandboxes: - parallelism: 20 + parallelism: 21 requires: - build - build-sandboxes: - parallelism: 20 + parallelism: 21 requires: - create-sandboxes - chromatic-sandboxes: - parallelism: 17 + parallelism: 18 requires: - build-sandboxes - e2e-production: - parallelism: 15 + parallelism: 16 requires: - build-sandboxes - e2e-dev: - parallelism: 2 + parallelism: 3 requires: - create-sandboxes - test-runner-production: - parallelism: 15 + parallelism: 16 requires: - build-sandboxes - vitest-integration: - parallelism: 5 + parallelism: 6 requires: - create-sandboxes - test-portable-stories: @@ -980,22 +980,22 @@ workflows: requires: - build - create-sandboxes: - parallelism: 37 + parallelism: 39 requires: - build # - smoke-test-sandboxes: # disabled for now # requires: # - create-sandboxes - build-sandboxes: - parallelism: 37 + parallelism: 39 requires: - create-sandboxes - chromatic-sandboxes: - parallelism: 34 + parallelism: 36 requires: - build-sandboxes - e2e-production: - parallelism: 32 + parallelism: 33 requires: - build-sandboxes - e2e-dev: @@ -1003,11 +1003,11 @@ workflows: requires: - create-sandboxes - test-runner-production: - parallelism: 32 + parallelism: 34 requires: - build-sandboxes - vitest-integration: - parallelism: 11 + parallelism: 12 requires: - create-sandboxes - test-portable-stories: diff --git a/code/lib/cli-storybook/src/sandbox-templates.ts b/code/lib/cli-storybook/src/sandbox-templates.ts index a43c3d83745..f22278b12e4 100644 --- a/code/lib/cli-storybook/src/sandbox-templates.ts +++ b/code/lib/cli-storybook/src/sandbox-templates.ts @@ -235,7 +235,7 @@ const baseTemplates = { 'experimental-nextjs-vite/default-ts': { name: 'Next.js Latest (Vite | TypeScript)', script: - 'npx create-next-app {{beforeDir}} --eslint --tailwind --app --import-alias="@/*" --src-dir', + 'npx create-next-app {{beforeDir}} --eslint --tailwind --app --import-alias="@/*" --src-dir --typescript --no-turbopack', expected: { framework: '@storybook/experimental-nextjs-vite', renderer: '@storybook/react', @@ -253,6 +253,8 @@ const baseTemplates = { 'prop-types', ], }, + // TODO: Remove this as soon as sandboxes are updated. This way we can test a Next 15 project. + inDevelopment: true, skipTasks: ['e2e-tests-dev', 'bench'], }, 'react-vite/default-js': { diff --git a/scripts/get-template.ts b/scripts/get-template.ts index cb351eab041..4eca8e16070 100644 --- a/scripts/get-template.ts +++ b/scripts/get-template.ts @@ -54,10 +54,7 @@ export async function getTemplate( potentialTemplateKeys = potentialTemplateKeys.filter((t) => { const currentTemplate = allTemplates[t] as Template; - return ( - currentTemplate.inDevelopment !== true && - !currentTemplate.skipTasks?.includes(scriptName as SkippableTask) - ); + return !currentTemplate.skipTasks?.includes(scriptName as SkippableTask); }); if (potentialTemplateKeys.length !== total) { @@ -114,10 +111,7 @@ async function checkParallelism(cadence?: Cadence, scriptName?: TaskKey) { const templateKeysPerScript = potentialTemplateKeys.filter((t) => { const currentTemplate = allTemplates[t] as Template; - return ( - currentTemplate.inDevelopment !== true && - !currentTemplate.skipTasks?.includes(script as SkippableTask) - ); + return !currentTemplate.skipTasks?.includes(script as SkippableTask); }); const workflowJobsRaw: (string | { [key: string]: any })[] = data.workflows[cad].jobs; const workflowJobs = workflowJobsRaw @@ -148,6 +142,29 @@ async function checkParallelism(cadence?: Cadence, scriptName?: TaskKey) { }); }); + const inDevelopmentTemplates = Object.entries(allTemplates) + .filter(([_, t]) => t.inDevelopment) + .map(([k]) => k); + + if (inDevelopmentTemplates.length > 0) { + summary.push( + `\n\n👇 Some templates are flagged to be in development. Please review if they should still contain this flag:\n\n${inDevelopmentTemplates + .map((k) => { + const includedInCadence = cadences.find((c) => + templatesByCadence[c]?.includes(k as TemplateKey) + ); + + return `- ${k} ${includedInCadence ? `(included in ${includedInCadence})` : '(not part of any cadence)'}`; + }) + .sort((a, b) => (a.includes('included') && !b.includes('included') ? -1 : 1)) + .join('\n')}` + ); + + summary.push( + '\n💡 If a template in this list is part of any cadence, please consider removing the `inDevelopment` flag if applicable. If the template is not in any cadence for a long time, please consider checking it to see if it still works, and see if it still makes sense to have it in the sandbox generation.' + ); + } + if (isIncorrect) { summary.unshift( 'The parellism count is incorrect for some jobs in .circleci/config.yml, you have to update them:' @@ -157,18 +174,6 @@ async function checkParallelism(cadence?: Cadence, scriptName?: TaskKey) { summary.unshift('✅ The parallelism count is correct for all jobs in .circleci/config.yml:'); console.log(summary.concat('\n').join('\n')); } - - const inDevelopmentTemplates = Object.entries(allTemplates) - .filter(([_, t]) => t.inDevelopment) - .map(([k]) => k); - - if (inDevelopmentTemplates.length > 0) { - console.log( - `👇 Some templates were skipped as they are flagged to be in development. Please review if they should still contain this flag:\n${inDevelopmentTemplates - .map((k) => `- ${k}`) - .join('\n')}` - ); - } } type RunOptions = { cadence?: Cadence; task?: TaskKey; check: boolean }; From 1f47b6821ed451ac826ac753392795052d9e3d05 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Leosvel=20P=C3=A9rez=20Espinosa?= <leosvel.perez.espinosa@gmail.com> Date: Tue, 19 Nov 2024 19:21:15 +0100 Subject: [PATCH 095/101] test: make before-each story more resilient --- code/lib/test/template/stories/before-each.stories.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/code/lib/test/template/stories/before-each.stories.ts b/code/lib/test/template/stories/before-each.stories.ts index 79c31874c81..12aad1818af 100644 --- a/code/lib/test/template/stories/before-each.stories.ts +++ b/code/lib/test/template/stories/before-each.stories.ts @@ -32,7 +32,8 @@ export const BeforeEachOrder = { async play({ canvasElement }: any) { await userEvent.click(getByRole(canvasElement, 'button')); - await expect(mocked(console.log).mock.calls).toEqual([ + const allLogs = mocked(console.log).mock.calls.filter(([message]) => /^\d+ - /.test(message)); + await expect(allLogs).toEqual([ ['1 - [from loaders]'], ['2 - [from meta beforeEach]'], ['3 - [from story beforeEach]'], From 6a1bbc47aeda37b398d249a16580e8f8f964ace1 Mon Sep 17 00:00:00 2001 From: Yann Braga <yannbf@gmail.com> Date: Tue, 19 Nov 2024 19:48:10 +0100 Subject: [PATCH 096/101] Revert "fix parallelism" This reverts commit 8173350f7bc5ecc64a73b5e1eeee891d3661fd89. --- .circleci/config.yml | 38 ++++++++-------- .../cli-storybook/src/sandbox-templates.ts | 4 +- scripts/get-template.ts | 45 +++++++++---------- 3 files changed, 40 insertions(+), 47 deletions(-) diff --git a/.circleci/config.yml b/.circleci/config.yml index 69a497aa058..5e7b5f1f1e0 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -826,19 +826,19 @@ workflows: requires: - unit-tests - create-sandboxes: - parallelism: 15 + parallelism: 14 requires: - build - build-sandboxes: - parallelism: 15 + parallelism: 14 requires: - create-sandboxes - chromatic-sandboxes: - parallelism: 12 + parallelism: 11 requires: - build-sandboxes - e2e-production: - parallelism: 10 + parallelism: 9 requires: - build-sandboxes - e2e-dev: @@ -846,11 +846,11 @@ workflows: requires: - create-sandboxes - test-runner-production: - parallelism: 10 + parallelism: 9 requires: - build-sandboxes - vitest-integration: - parallelism: 6 + parallelism: 5 requires: - create-sandboxes - bench-sandboxes: @@ -904,31 +904,31 @@ workflows: requires: - unit-tests - create-sandboxes: - parallelism: 21 + parallelism: 20 requires: - build - build-sandboxes: - parallelism: 21 + parallelism: 20 requires: - create-sandboxes - chromatic-sandboxes: - parallelism: 18 + parallelism: 17 requires: - build-sandboxes - e2e-production: - parallelism: 16 + parallelism: 15 requires: - build-sandboxes - e2e-dev: - parallelism: 3 + parallelism: 2 requires: - create-sandboxes - test-runner-production: - parallelism: 16 + parallelism: 15 requires: - build-sandboxes - vitest-integration: - parallelism: 6 + parallelism: 5 requires: - create-sandboxes - test-portable-stories: @@ -980,22 +980,22 @@ workflows: requires: - build - create-sandboxes: - parallelism: 39 + parallelism: 37 requires: - build # - smoke-test-sandboxes: # disabled for now # requires: # - create-sandboxes - build-sandboxes: - parallelism: 39 + parallelism: 37 requires: - create-sandboxes - chromatic-sandboxes: - parallelism: 36 + parallelism: 34 requires: - build-sandboxes - e2e-production: - parallelism: 33 + parallelism: 32 requires: - build-sandboxes - e2e-dev: @@ -1003,11 +1003,11 @@ workflows: requires: - create-sandboxes - test-runner-production: - parallelism: 34 + parallelism: 32 requires: - build-sandboxes - vitest-integration: - parallelism: 12 + parallelism: 11 requires: - create-sandboxes - test-portable-stories: diff --git a/code/lib/cli-storybook/src/sandbox-templates.ts b/code/lib/cli-storybook/src/sandbox-templates.ts index f22278b12e4..a43c3d83745 100644 --- a/code/lib/cli-storybook/src/sandbox-templates.ts +++ b/code/lib/cli-storybook/src/sandbox-templates.ts @@ -235,7 +235,7 @@ const baseTemplates = { 'experimental-nextjs-vite/default-ts': { name: 'Next.js Latest (Vite | TypeScript)', script: - 'npx create-next-app {{beforeDir}} --eslint --tailwind --app --import-alias="@/*" --src-dir --typescript --no-turbopack', + 'npx create-next-app {{beforeDir}} --eslint --tailwind --app --import-alias="@/*" --src-dir', expected: { framework: '@storybook/experimental-nextjs-vite', renderer: '@storybook/react', @@ -253,8 +253,6 @@ const baseTemplates = { 'prop-types', ], }, - // TODO: Remove this as soon as sandboxes are updated. This way we can test a Next 15 project. - inDevelopment: true, skipTasks: ['e2e-tests-dev', 'bench'], }, 'react-vite/default-js': { diff --git a/scripts/get-template.ts b/scripts/get-template.ts index 4eca8e16070..cb351eab041 100644 --- a/scripts/get-template.ts +++ b/scripts/get-template.ts @@ -54,7 +54,10 @@ export async function getTemplate( potentialTemplateKeys = potentialTemplateKeys.filter((t) => { const currentTemplate = allTemplates[t] as Template; - return !currentTemplate.skipTasks?.includes(scriptName as SkippableTask); + return ( + currentTemplate.inDevelopment !== true && + !currentTemplate.skipTasks?.includes(scriptName as SkippableTask) + ); }); if (potentialTemplateKeys.length !== total) { @@ -111,7 +114,10 @@ async function checkParallelism(cadence?: Cadence, scriptName?: TaskKey) { const templateKeysPerScript = potentialTemplateKeys.filter((t) => { const currentTemplate = allTemplates[t] as Template; - return !currentTemplate.skipTasks?.includes(script as SkippableTask); + return ( + currentTemplate.inDevelopment !== true && + !currentTemplate.skipTasks?.includes(script as SkippableTask) + ); }); const workflowJobsRaw: (string | { [key: string]: any })[] = data.workflows[cad].jobs; const workflowJobs = workflowJobsRaw @@ -142,29 +148,6 @@ async function checkParallelism(cadence?: Cadence, scriptName?: TaskKey) { }); }); - const inDevelopmentTemplates = Object.entries(allTemplates) - .filter(([_, t]) => t.inDevelopment) - .map(([k]) => k); - - if (inDevelopmentTemplates.length > 0) { - summary.push( - `\n\n👇 Some templates are flagged to be in development. Please review if they should still contain this flag:\n\n${inDevelopmentTemplates - .map((k) => { - const includedInCadence = cadences.find((c) => - templatesByCadence[c]?.includes(k as TemplateKey) - ); - - return `- ${k} ${includedInCadence ? `(included in ${includedInCadence})` : '(not part of any cadence)'}`; - }) - .sort((a, b) => (a.includes('included') && !b.includes('included') ? -1 : 1)) - .join('\n')}` - ); - - summary.push( - '\n💡 If a template in this list is part of any cadence, please consider removing the `inDevelopment` flag if applicable. If the template is not in any cadence for a long time, please consider checking it to see if it still works, and see if it still makes sense to have it in the sandbox generation.' - ); - } - if (isIncorrect) { summary.unshift( 'The parellism count is incorrect for some jobs in .circleci/config.yml, you have to update them:' @@ -174,6 +157,18 @@ async function checkParallelism(cadence?: Cadence, scriptName?: TaskKey) { summary.unshift('✅ The parallelism count is correct for all jobs in .circleci/config.yml:'); console.log(summary.concat('\n').join('\n')); } + + const inDevelopmentTemplates = Object.entries(allTemplates) + .filter(([_, t]) => t.inDevelopment) + .map(([k]) => k); + + if (inDevelopmentTemplates.length > 0) { + console.log( + `👇 Some templates were skipped as they are flagged to be in development. Please review if they should still contain this flag:\n${inDevelopmentTemplates + .map((k) => `- ${k}`) + .join('\n')}` + ); + } } type RunOptions = { cadence?: Cadence; task?: TaskKey; check: boolean }; From d2caf67841a5b810d3251e025050fb470a97a5a8 Mon Sep 17 00:00:00 2001 From: storybook-bot <32066757+storybook-bot@users.noreply.github.com> Date: Wed, 20 Nov 2024 10:21:34 +0000 Subject: [PATCH 097/101] Write changelog for 8.5.0-alpha.9 [skip ci] --- CHANGELOG.prerelease.md | 6 ++++++ code/package.json | 3 ++- docs/versions/next.json | 2 +- 3 files changed, 9 insertions(+), 2 deletions(-) diff --git a/CHANGELOG.prerelease.md b/CHANGELOG.prerelease.md index 6d1fd43a835..f6a864c632a 100644 --- a/CHANGELOG.prerelease.md +++ b/CHANGELOG.prerelease.md @@ -1,3 +1,9 @@ +## 8.5.0-alpha.9 + +- Angular: Support v19 - [#29659](https://github.com/storybookjs/storybook/pull/29659), thanks @leosvelperez! +- Manager: Fix size regression - [#29660](https://github.com/storybookjs/storybook/pull/29660), thanks @JReinhold! +- Nextjs-Vite: Add Next.js 15 support - [#29640](https://github.com/storybookjs/storybook/pull/29640), thanks @yannbf! + ## 8.5.0-alpha.8 - UI: Sidebar context menu addon API - [#29557](https://github.com/storybookjs/storybook/pull/29557), thanks @ndelangen! diff --git a/code/package.json b/code/package.json index 6a57557f1f6..05681ec868f 100644 --- a/code/package.json +++ b/code/package.json @@ -293,5 +293,6 @@ "Dependency Upgrades" ] ] - } + }, + "deferredNextVersion": "8.5.0-alpha.9" } diff --git a/docs/versions/next.json b/docs/versions/next.json index 29da365254a..a1c6f3916a4 100644 --- a/docs/versions/next.json +++ b/docs/versions/next.json @@ -1 +1 @@ -{"version":"8.5.0-alpha.8","info":{"plain":"- UI: Sidebar context menu addon API - [#29557](https://github.com/storybookjs/storybook/pull/29557), thanks @ndelangen!"}} +{"version":"8.5.0-alpha.9","info":{"plain":"- Angular: Support v19 - [#29659](https://github.com/storybookjs/storybook/pull/29659), thanks @leosvelperez!\n- Manager: Fix size regression - [#29660](https://github.com/storybookjs/storybook/pull/29660), thanks @JReinhold!\n- Nextjs-Vite: Add Next.js 15 support - [#29640](https://github.com/storybookjs/storybook/pull/29640), thanks @yannbf!"}} From c9f6fa23727672263276dee7401fc4405b9c6692 Mon Sep 17 00:00:00 2001 From: storybook-bot <32066757+storybook-bot@users.noreply.github.com> Date: Wed, 20 Nov 2024 13:53:24 +0000 Subject: [PATCH 098/101] Bump version from "8.5.0-alpha.8" to "8.5.0-alpha.9" [skip ci] --- code/addons/a11y/package.json | 2 +- code/addons/actions/package.json | 2 +- code/addons/backgrounds/package.json | 2 +- code/addons/controls/package.json | 2 +- code/addons/docs/package.json | 2 +- code/addons/essentials/package.json | 2 +- code/addons/gfm/package.json | 2 +- code/addons/highlight/package.json | 2 +- code/addons/interactions/package.json | 2 +- code/addons/jest/package.json | 2 +- code/addons/links/package.json | 2 +- code/addons/measure/package.json | 2 +- code/addons/onboarding/package.json | 2 +- code/addons/outline/package.json | 2 +- code/addons/storysource/package.json | 2 +- code/addons/test/package.json | 2 +- code/addons/themes/package.json | 2 +- code/addons/toolbars/package.json | 2 +- code/addons/viewport/package.json | 2 +- code/builders/builder-vite/package.json | 2 +- code/builders/builder-webpack5/package.json | 2 +- code/core/package.json | 2 +- code/core/src/common/versions.ts | 170 +++++++++--------- code/core/src/manager-api/version.ts | 2 +- code/deprecated/builder-manager/package.json | 2 +- code/deprecated/channels/package.json | 2 +- code/deprecated/client-logger/package.json | 2 +- code/deprecated/components/package.json | 2 +- code/deprecated/core-common/package.json | 2 +- code/deprecated/core-events/package.json | 2 +- code/deprecated/core-server/package.json | 2 +- code/deprecated/csf-tools/package.json | 2 +- code/deprecated/docs-tools/package.json | 2 +- code/deprecated/manager-api/package.json | 2 +- code/deprecated/manager/package.json | 2 +- code/deprecated/node-logger/package.json | 2 +- code/deprecated/preview-api/package.json | 2 +- code/deprecated/preview/package.json | 2 +- code/deprecated/router/package.json | 2 +- code/deprecated/telemetry/package.json | 2 +- code/deprecated/theming/package.json | 2 +- code/deprecated/types/package.json | 2 +- code/frameworks/angular/package.json | 2 +- code/frameworks/ember/package.json | 2 +- .../experimental-nextjs-vite/package.json | 2 +- code/frameworks/html-vite/package.json | 2 +- code/frameworks/html-webpack5/package.json | 2 +- code/frameworks/nextjs/package.json | 2 +- code/frameworks/preact-vite/package.json | 2 +- code/frameworks/preact-webpack5/package.json | 2 +- .../react-native-web-vite/package.json | 2 +- code/frameworks/react-vite/package.json | 2 +- code/frameworks/react-webpack5/package.json | 2 +- code/frameworks/server-webpack5/package.json | 2 +- code/frameworks/svelte-vite/package.json | 2 +- code/frameworks/svelte-webpack5/package.json | 2 +- code/frameworks/sveltekit/package.json | 2 +- code/frameworks/vue3-vite/package.json | 2 +- code/frameworks/vue3-webpack5/package.json | 2 +- .../web-components-vite/package.json | 2 +- .../web-components-webpack5/package.json | 2 +- code/lib/blocks/package.json | 2 +- code/lib/cli-sb/package.json | 2 +- code/lib/cli-storybook/package.json | 2 +- code/lib/cli/package.json | 2 +- code/lib/codemod/package.json | 2 +- code/lib/core-webpack/package.json | 2 +- code/lib/create-storybook/package.json | 2 +- code/lib/csf-plugin/package.json | 2 +- code/lib/instrumenter/package.json | 2 +- code/lib/react-dom-shim/package.json | 2 +- code/lib/source-loader/package.json | 2 +- code/lib/test/package.json | 2 +- code/package.json | 5 +- code/presets/create-react-app/package.json | 2 +- code/presets/html-webpack/package.json | 2 +- code/presets/preact-webpack/package.json | 2 +- code/presets/react-webpack/package.json | 2 +- code/presets/server-webpack/package.json | 2 +- code/presets/svelte-webpack/package.json | 2 +- code/presets/vue3-webpack/package.json | 2 +- code/renderers/html/package.json | 2 +- code/renderers/preact/package.json | 2 +- code/renderers/react/package.json | 2 +- code/renderers/server/package.json | 2 +- code/renderers/svelte/package.json | 2 +- code/renderers/vue3/package.json | 2 +- code/renderers/web-components/package.json | 2 +- 88 files changed, 173 insertions(+), 174 deletions(-) diff --git a/code/addons/a11y/package.json b/code/addons/a11y/package.json index 9b0e1752f5b..cc864f7596b 100644 --- a/code/addons/a11y/package.json +++ b/code/addons/a11y/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-a11y", - "version": "8.5.0-alpha.8", + "version": "8.5.0-alpha.9", "description": "Test component compliance with web accessibility standards", "keywords": [ "a11y", diff --git a/code/addons/actions/package.json b/code/addons/actions/package.json index f7dc9c5f8b6..6f34f597a30 100644 --- a/code/addons/actions/package.json +++ b/code/addons/actions/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-actions", - "version": "8.5.0-alpha.8", + "version": "8.5.0-alpha.9", "description": "Get UI feedback when an action is performed on an interactive element", "keywords": [ "storybook", diff --git a/code/addons/backgrounds/package.json b/code/addons/backgrounds/package.json index a9b37754cb0..bd79719aa2f 100644 --- a/code/addons/backgrounds/package.json +++ b/code/addons/backgrounds/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-backgrounds", - "version": "8.5.0-alpha.8", + "version": "8.5.0-alpha.9", "description": "Switch backgrounds to view components in different settings", "keywords": [ "addon", diff --git a/code/addons/controls/package.json b/code/addons/controls/package.json index de3e0bbe460..2a35fb0c4a1 100644 --- a/code/addons/controls/package.json +++ b/code/addons/controls/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-controls", - "version": "8.5.0-alpha.8", + "version": "8.5.0-alpha.9", "description": "Interact with component inputs dynamically in the Storybook UI", "keywords": [ "addon", diff --git a/code/addons/docs/package.json b/code/addons/docs/package.json index 57d480ec24d..8878b6f416c 100644 --- a/code/addons/docs/package.json +++ b/code/addons/docs/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-docs", - "version": "8.5.0-alpha.8", + "version": "8.5.0-alpha.9", "description": "Document component usage and properties in Markdown", "keywords": [ "addon", diff --git a/code/addons/essentials/package.json b/code/addons/essentials/package.json index 5e17b43265d..5248276fdc9 100644 --- a/code/addons/essentials/package.json +++ b/code/addons/essentials/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-essentials", - "version": "8.5.0-alpha.8", + "version": "8.5.0-alpha.9", "description": "Curated addons to bring out the best of Storybook", "keywords": [ "addon", diff --git a/code/addons/gfm/package.json b/code/addons/gfm/package.json index 8903e18fc14..55a711d1c52 100644 --- a/code/addons/gfm/package.json +++ b/code/addons/gfm/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-mdx-gfm", - "version": "8.5.0-alpha.8", + "version": "8.5.0-alpha.9", "description": "GitHub Flavored Markdown in Storybook", "keywords": [ "addon", diff --git a/code/addons/highlight/package.json b/code/addons/highlight/package.json index 7abffb394d7..b38bb440c31 100644 --- a/code/addons/highlight/package.json +++ b/code/addons/highlight/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-highlight", - "version": "8.5.0-alpha.8", + "version": "8.5.0-alpha.9", "description": "Highlight DOM nodes within your stories", "keywords": [ "storybook-addons", diff --git a/code/addons/interactions/package.json b/code/addons/interactions/package.json index b985f9c65ea..3909abab254 100644 --- a/code/addons/interactions/package.json +++ b/code/addons/interactions/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-interactions", - "version": "8.5.0-alpha.8", + "version": "8.5.0-alpha.9", "description": "Automate, test and debug user interactions", "keywords": [ "storybook-addons", diff --git a/code/addons/jest/package.json b/code/addons/jest/package.json index f1ef7bcb191..cec71d6eeb1 100644 --- a/code/addons/jest/package.json +++ b/code/addons/jest/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-jest", - "version": "8.5.0-alpha.8", + "version": "8.5.0-alpha.9", "description": "React storybook addon that show component jest report", "keywords": [ "addon", diff --git a/code/addons/links/package.json b/code/addons/links/package.json index ec75e70fb95..1a7cf92ba74 100644 --- a/code/addons/links/package.json +++ b/code/addons/links/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-links", - "version": "8.5.0-alpha.8", + "version": "8.5.0-alpha.9", "description": "Link stories together to build demos and prototypes with your UI components", "keywords": [ "storybook-addons", diff --git a/code/addons/measure/package.json b/code/addons/measure/package.json index b1c0c3d4a43..4a537173a2c 100644 --- a/code/addons/measure/package.json +++ b/code/addons/measure/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-measure", - "version": "8.5.0-alpha.8", + "version": "8.5.0-alpha.9", "description": "Inspect layouts by visualizing the box model", "keywords": [ "storybook-addons", diff --git a/code/addons/onboarding/package.json b/code/addons/onboarding/package.json index 61640d6b615..5248c5408ec 100644 --- a/code/addons/onboarding/package.json +++ b/code/addons/onboarding/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-onboarding", - "version": "8.5.0-alpha.8", + "version": "8.5.0-alpha.9", "description": "Storybook Addon Onboarding - Introduces a new onboarding experience", "keywords": [ "storybook-addons", diff --git a/code/addons/outline/package.json b/code/addons/outline/package.json index a9f0c28c776..94aa5fd0507 100644 --- a/code/addons/outline/package.json +++ b/code/addons/outline/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-outline", - "version": "8.5.0-alpha.8", + "version": "8.5.0-alpha.9", "description": "Outline all elements with CSS to help with layout placement and alignment", "keywords": [ "storybook-addons", diff --git a/code/addons/storysource/package.json b/code/addons/storysource/package.json index 1ba98ec1fa9..17b3e6fdb07 100644 --- a/code/addons/storysource/package.json +++ b/code/addons/storysource/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-storysource", - "version": "8.5.0-alpha.8", + "version": "8.5.0-alpha.9", "description": "View a story’s source code to see how it works and paste into your app", "keywords": [ "addon", diff --git a/code/addons/test/package.json b/code/addons/test/package.json index 3d8bbaaa090..bd911f2f5b9 100644 --- a/code/addons/test/package.json +++ b/code/addons/test/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/experimental-addon-test", - "version": "8.5.0-alpha.8", + "version": "8.5.0-alpha.9", "description": "Integrate Vitest with Storybook", "keywords": [ "storybook-addons", diff --git a/code/addons/themes/package.json b/code/addons/themes/package.json index 292ee5d5541..674cd25f319 100644 --- a/code/addons/themes/package.json +++ b/code/addons/themes/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-themes", - "version": "8.5.0-alpha.8", + "version": "8.5.0-alpha.9", "description": "Switch between multiple themes for you components in Storybook", "keywords": [ "css", diff --git a/code/addons/toolbars/package.json b/code/addons/toolbars/package.json index 9ff619cd6c8..56eb5b0a54f 100644 --- a/code/addons/toolbars/package.json +++ b/code/addons/toolbars/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-toolbars", - "version": "8.5.0-alpha.8", + "version": "8.5.0-alpha.9", "description": "Create your own toolbar items that control story rendering", "keywords": [ "addon", diff --git a/code/addons/viewport/package.json b/code/addons/viewport/package.json index a44ed617f93..532e1c51b62 100644 --- a/code/addons/viewport/package.json +++ b/code/addons/viewport/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-viewport", - "version": "8.5.0-alpha.8", + "version": "8.5.0-alpha.9", "description": "Build responsive components by adjusting Storybook’s viewport size and orientation", "keywords": [ "addon", diff --git a/code/builders/builder-vite/package.json b/code/builders/builder-vite/package.json index 57334f28c3b..c6c5c148643 100644 --- a/code/builders/builder-vite/package.json +++ b/code/builders/builder-vite/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/builder-vite", - "version": "8.5.0-alpha.8", + "version": "8.5.0-alpha.9", "description": "A plugin to run and build Storybooks with Vite", "homepage": "https://github.com/storybookjs/storybook/tree/next/code/builders/builder-vite/#readme", "bugs": { diff --git a/code/builders/builder-webpack5/package.json b/code/builders/builder-webpack5/package.json index 941e1d4c456..b9be6bf71c5 100644 --- a/code/builders/builder-webpack5/package.json +++ b/code/builders/builder-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/builder-webpack5", - "version": "8.5.0-alpha.8", + "version": "8.5.0-alpha.9", "description": "Storybook framework-agnostic API", "keywords": [ "storybook" diff --git a/code/core/package.json b/code/core/package.json index 3419f147ccd..d153d0298f7 100644 --- a/code/core/package.json +++ b/code/core/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/core", - "version": "8.5.0-alpha.8", + "version": "8.5.0-alpha.9", "description": "Storybook framework-agnostic API", "keywords": [ "storybook" diff --git a/code/core/src/common/versions.ts b/code/core/src/common/versions.ts index 22cf40518f4..258be8826ab 100644 --- a/code/core/src/common/versions.ts +++ b/code/core/src/common/versions.ts @@ -1,88 +1,88 @@ // auto generated file, do not edit export default { - '@storybook/addon-a11y': '8.5.0-alpha.8', - '@storybook/addon-actions': '8.5.0-alpha.8', - '@storybook/addon-backgrounds': '8.5.0-alpha.8', - '@storybook/addon-controls': '8.5.0-alpha.8', - '@storybook/addon-docs': '8.5.0-alpha.8', - '@storybook/addon-essentials': '8.5.0-alpha.8', - '@storybook/addon-mdx-gfm': '8.5.0-alpha.8', - '@storybook/addon-highlight': '8.5.0-alpha.8', - '@storybook/addon-interactions': '8.5.0-alpha.8', - '@storybook/addon-jest': '8.5.0-alpha.8', - '@storybook/addon-links': '8.5.0-alpha.8', - '@storybook/addon-measure': '8.5.0-alpha.8', - '@storybook/addon-onboarding': '8.5.0-alpha.8', - '@storybook/addon-outline': '8.5.0-alpha.8', - '@storybook/addon-storysource': '8.5.0-alpha.8', - '@storybook/experimental-addon-test': '8.5.0-alpha.8', - '@storybook/addon-themes': '8.5.0-alpha.8', - '@storybook/addon-toolbars': '8.5.0-alpha.8', - '@storybook/addon-viewport': '8.5.0-alpha.8', - '@storybook/builder-vite': '8.5.0-alpha.8', - '@storybook/builder-webpack5': '8.5.0-alpha.8', - '@storybook/core': '8.5.0-alpha.8', - '@storybook/builder-manager': '8.5.0-alpha.8', - '@storybook/channels': '8.5.0-alpha.8', - '@storybook/client-logger': '8.5.0-alpha.8', - '@storybook/components': '8.5.0-alpha.8', - '@storybook/core-common': '8.5.0-alpha.8', - '@storybook/core-events': '8.5.0-alpha.8', - '@storybook/core-server': '8.5.0-alpha.8', - '@storybook/csf-tools': '8.5.0-alpha.8', - '@storybook/docs-tools': '8.5.0-alpha.8', - '@storybook/manager': '8.5.0-alpha.8', - '@storybook/manager-api': '8.5.0-alpha.8', - '@storybook/node-logger': '8.5.0-alpha.8', - '@storybook/preview': '8.5.0-alpha.8', - '@storybook/preview-api': '8.5.0-alpha.8', - '@storybook/router': '8.5.0-alpha.8', - '@storybook/telemetry': '8.5.0-alpha.8', - '@storybook/theming': '8.5.0-alpha.8', - '@storybook/types': '8.5.0-alpha.8', - '@storybook/angular': '8.5.0-alpha.8', - '@storybook/ember': '8.5.0-alpha.8', - '@storybook/experimental-nextjs-vite': '8.5.0-alpha.8', - '@storybook/html-vite': '8.5.0-alpha.8', - '@storybook/html-webpack5': '8.5.0-alpha.8', - '@storybook/nextjs': '8.5.0-alpha.8', - '@storybook/preact-vite': '8.5.0-alpha.8', - '@storybook/preact-webpack5': '8.5.0-alpha.8', - '@storybook/react-native-web-vite': '8.5.0-alpha.8', - '@storybook/react-vite': '8.5.0-alpha.8', - '@storybook/react-webpack5': '8.5.0-alpha.8', - '@storybook/server-webpack5': '8.5.0-alpha.8', - '@storybook/svelte-vite': '8.5.0-alpha.8', - '@storybook/svelte-webpack5': '8.5.0-alpha.8', - '@storybook/sveltekit': '8.5.0-alpha.8', - '@storybook/vue3-vite': '8.5.0-alpha.8', - '@storybook/vue3-webpack5': '8.5.0-alpha.8', - '@storybook/web-components-vite': '8.5.0-alpha.8', - '@storybook/web-components-webpack5': '8.5.0-alpha.8', - '@storybook/blocks': '8.5.0-alpha.8', - storybook: '8.5.0-alpha.8', - sb: '8.5.0-alpha.8', - '@storybook/cli': '8.5.0-alpha.8', - '@storybook/codemod': '8.5.0-alpha.8', - '@storybook/core-webpack': '8.5.0-alpha.8', - 'create-storybook': '8.5.0-alpha.8', - '@storybook/csf-plugin': '8.5.0-alpha.8', - '@storybook/instrumenter': '8.5.0-alpha.8', - '@storybook/react-dom-shim': '8.5.0-alpha.8', - '@storybook/source-loader': '8.5.0-alpha.8', - '@storybook/test': '8.5.0-alpha.8', - '@storybook/preset-create-react-app': '8.5.0-alpha.8', - '@storybook/preset-html-webpack': '8.5.0-alpha.8', - '@storybook/preset-preact-webpack': '8.5.0-alpha.8', - '@storybook/preset-react-webpack': '8.5.0-alpha.8', - '@storybook/preset-server-webpack': '8.5.0-alpha.8', - '@storybook/preset-svelte-webpack': '8.5.0-alpha.8', - '@storybook/preset-vue3-webpack': '8.5.0-alpha.8', - '@storybook/html': '8.5.0-alpha.8', - '@storybook/preact': '8.5.0-alpha.8', - '@storybook/react': '8.5.0-alpha.8', - '@storybook/server': '8.5.0-alpha.8', - '@storybook/svelte': '8.5.0-alpha.8', - '@storybook/vue3': '8.5.0-alpha.8', - '@storybook/web-components': '8.5.0-alpha.8', + '@storybook/addon-a11y': '8.5.0-alpha.9', + '@storybook/addon-actions': '8.5.0-alpha.9', + '@storybook/addon-backgrounds': '8.5.0-alpha.9', + '@storybook/addon-controls': '8.5.0-alpha.9', + '@storybook/addon-docs': '8.5.0-alpha.9', + '@storybook/addon-essentials': '8.5.0-alpha.9', + '@storybook/addon-mdx-gfm': '8.5.0-alpha.9', + '@storybook/addon-highlight': '8.5.0-alpha.9', + '@storybook/addon-interactions': '8.5.0-alpha.9', + '@storybook/addon-jest': '8.5.0-alpha.9', + '@storybook/addon-links': '8.5.0-alpha.9', + '@storybook/addon-measure': '8.5.0-alpha.9', + '@storybook/addon-onboarding': '8.5.0-alpha.9', + '@storybook/addon-outline': '8.5.0-alpha.9', + '@storybook/addon-storysource': '8.5.0-alpha.9', + '@storybook/experimental-addon-test': '8.5.0-alpha.9', + '@storybook/addon-themes': '8.5.0-alpha.9', + '@storybook/addon-toolbars': '8.5.0-alpha.9', + '@storybook/addon-viewport': '8.5.0-alpha.9', + '@storybook/builder-vite': '8.5.0-alpha.9', + '@storybook/builder-webpack5': '8.5.0-alpha.9', + '@storybook/core': '8.5.0-alpha.9', + '@storybook/builder-manager': '8.5.0-alpha.9', + '@storybook/channels': '8.5.0-alpha.9', + '@storybook/client-logger': '8.5.0-alpha.9', + '@storybook/components': '8.5.0-alpha.9', + '@storybook/core-common': '8.5.0-alpha.9', + '@storybook/core-events': '8.5.0-alpha.9', + '@storybook/core-server': '8.5.0-alpha.9', + '@storybook/csf-tools': '8.5.0-alpha.9', + '@storybook/docs-tools': '8.5.0-alpha.9', + '@storybook/manager': '8.5.0-alpha.9', + '@storybook/manager-api': '8.5.0-alpha.9', + '@storybook/node-logger': '8.5.0-alpha.9', + '@storybook/preview': '8.5.0-alpha.9', + '@storybook/preview-api': '8.5.0-alpha.9', + '@storybook/router': '8.5.0-alpha.9', + '@storybook/telemetry': '8.5.0-alpha.9', + '@storybook/theming': '8.5.0-alpha.9', + '@storybook/types': '8.5.0-alpha.9', + '@storybook/angular': '8.5.0-alpha.9', + '@storybook/ember': '8.5.0-alpha.9', + '@storybook/experimental-nextjs-vite': '8.5.0-alpha.9', + '@storybook/html-vite': '8.5.0-alpha.9', + '@storybook/html-webpack5': '8.5.0-alpha.9', + '@storybook/nextjs': '8.5.0-alpha.9', + '@storybook/preact-vite': '8.5.0-alpha.9', + '@storybook/preact-webpack5': '8.5.0-alpha.9', + '@storybook/react-native-web-vite': '8.5.0-alpha.9', + '@storybook/react-vite': '8.5.0-alpha.9', + '@storybook/react-webpack5': '8.5.0-alpha.9', + '@storybook/server-webpack5': '8.5.0-alpha.9', + '@storybook/svelte-vite': '8.5.0-alpha.9', + '@storybook/svelte-webpack5': '8.5.0-alpha.9', + '@storybook/sveltekit': '8.5.0-alpha.9', + '@storybook/vue3-vite': '8.5.0-alpha.9', + '@storybook/vue3-webpack5': '8.5.0-alpha.9', + '@storybook/web-components-vite': '8.5.0-alpha.9', + '@storybook/web-components-webpack5': '8.5.0-alpha.9', + '@storybook/blocks': '8.5.0-alpha.9', + storybook: '8.5.0-alpha.9', + sb: '8.5.0-alpha.9', + '@storybook/cli': '8.5.0-alpha.9', + '@storybook/codemod': '8.5.0-alpha.9', + '@storybook/core-webpack': '8.5.0-alpha.9', + 'create-storybook': '8.5.0-alpha.9', + '@storybook/csf-plugin': '8.5.0-alpha.9', + '@storybook/instrumenter': '8.5.0-alpha.9', + '@storybook/react-dom-shim': '8.5.0-alpha.9', + '@storybook/source-loader': '8.5.0-alpha.9', + '@storybook/test': '8.5.0-alpha.9', + '@storybook/preset-create-react-app': '8.5.0-alpha.9', + '@storybook/preset-html-webpack': '8.5.0-alpha.9', + '@storybook/preset-preact-webpack': '8.5.0-alpha.9', + '@storybook/preset-react-webpack': '8.5.0-alpha.9', + '@storybook/preset-server-webpack': '8.5.0-alpha.9', + '@storybook/preset-svelte-webpack': '8.5.0-alpha.9', + '@storybook/preset-vue3-webpack': '8.5.0-alpha.9', + '@storybook/html': '8.5.0-alpha.9', + '@storybook/preact': '8.5.0-alpha.9', + '@storybook/react': '8.5.0-alpha.9', + '@storybook/server': '8.5.0-alpha.9', + '@storybook/svelte': '8.5.0-alpha.9', + '@storybook/vue3': '8.5.0-alpha.9', + '@storybook/web-components': '8.5.0-alpha.9', }; diff --git a/code/core/src/manager-api/version.ts b/code/core/src/manager-api/version.ts index 87c4a8b133c..ba2a058cadf 100644 --- a/code/core/src/manager-api/version.ts +++ b/code/core/src/manager-api/version.ts @@ -1 +1 @@ -export const version = '8.5.0-alpha.8'; +export const version = '8.5.0-alpha.9'; diff --git a/code/deprecated/builder-manager/package.json b/code/deprecated/builder-manager/package.json index b9a76834269..d370813df25 100644 --- a/code/deprecated/builder-manager/package.json +++ b/code/deprecated/builder-manager/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/builder-manager", - "version": "8.5.0-alpha.8", + "version": "8.5.0-alpha.9", "description": "Storybook manager builder", "keywords": [ "storybook" diff --git a/code/deprecated/channels/package.json b/code/deprecated/channels/package.json index de6ce827a59..224ce4c13b2 100644 --- a/code/deprecated/channels/package.json +++ b/code/deprecated/channels/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/channels", - "version": "8.5.0-alpha.8", + "version": "8.5.0-alpha.9", "description": "", "keywords": [ "storybook" diff --git a/code/deprecated/client-logger/package.json b/code/deprecated/client-logger/package.json index 87bb4bcf91c..41f75524624 100644 --- a/code/deprecated/client-logger/package.json +++ b/code/deprecated/client-logger/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/client-logger", - "version": "8.5.0-alpha.8", + "version": "8.5.0-alpha.9", "description": "", "keywords": [ "storybook" diff --git a/code/deprecated/components/package.json b/code/deprecated/components/package.json index 6576755915a..a33e474cb28 100644 --- a/code/deprecated/components/package.json +++ b/code/deprecated/components/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/components", - "version": "8.5.0-alpha.8", + "version": "8.5.0-alpha.9", "description": "Core Storybook Components", "keywords": [ "storybook" diff --git a/code/deprecated/core-common/package.json b/code/deprecated/core-common/package.json index d02744e7c73..f7e22ab490a 100644 --- a/code/deprecated/core-common/package.json +++ b/code/deprecated/core-common/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/core-common", - "version": "8.5.0-alpha.8", + "version": "8.5.0-alpha.9", "description": "Storybook framework-agnostic API", "keywords": [ "storybook" diff --git a/code/deprecated/core-events/package.json b/code/deprecated/core-events/package.json index 54c9b0d33b1..96c4a38ff00 100644 --- a/code/deprecated/core-events/package.json +++ b/code/deprecated/core-events/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/core-events", - "version": "8.5.0-alpha.8", + "version": "8.5.0-alpha.9", "description": "Event names used in storybook core", "keywords": [ "storybook" diff --git a/code/deprecated/core-server/package.json b/code/deprecated/core-server/package.json index f1fdff38c9e..6ccd1629db5 100644 --- a/code/deprecated/core-server/package.json +++ b/code/deprecated/core-server/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/core-server", - "version": "8.5.0-alpha.8", + "version": "8.5.0-alpha.9", "description": "Storybook framework-agnostic API", "keywords": [ "storybook" diff --git a/code/deprecated/csf-tools/package.json b/code/deprecated/csf-tools/package.json index 94fbab6da4a..5f2cc75e078 100644 --- a/code/deprecated/csf-tools/package.json +++ b/code/deprecated/csf-tools/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/csf-tools", - "version": "8.5.0-alpha.8", + "version": "8.5.0-alpha.9", "description": "Parse and manipulate CSF and Storybook config files", "keywords": [ "storybook" diff --git a/code/deprecated/docs-tools/package.json b/code/deprecated/docs-tools/package.json index 722c801f2ba..a8b6388c42d 100644 --- a/code/deprecated/docs-tools/package.json +++ b/code/deprecated/docs-tools/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/docs-tools", - "version": "8.5.0-alpha.8", + "version": "8.5.0-alpha.9", "description": "Shared utility functions for frameworks to implement docs", "keywords": [ "storybook" diff --git a/code/deprecated/manager-api/package.json b/code/deprecated/manager-api/package.json index dfdb0d08394..3479949b5df 100644 --- a/code/deprecated/manager-api/package.json +++ b/code/deprecated/manager-api/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/manager-api", - "version": "8.5.0-alpha.8", + "version": "8.5.0-alpha.9", "description": "Core Storybook Manager API & Context", "keywords": [ "storybook" diff --git a/code/deprecated/manager/package.json b/code/deprecated/manager/package.json index 004740adb11..91aff5e3800 100644 --- a/code/deprecated/manager/package.json +++ b/code/deprecated/manager/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/manager", - "version": "8.5.0-alpha.8", + "version": "8.5.0-alpha.9", "description": "Core Storybook UI", "keywords": [ "storybook" diff --git a/code/deprecated/node-logger/package.json b/code/deprecated/node-logger/package.json index 767d1f63d5e..1f27c5232bf 100644 --- a/code/deprecated/node-logger/package.json +++ b/code/deprecated/node-logger/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/node-logger", - "version": "8.5.0-alpha.8", + "version": "8.5.0-alpha.9", "description": "", "keywords": [ "storybook" diff --git a/code/deprecated/preview-api/package.json b/code/deprecated/preview-api/package.json index 9dc2f6c8391..4190bcb1bed 100644 --- a/code/deprecated/preview-api/package.json +++ b/code/deprecated/preview-api/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preview-api", - "version": "8.5.0-alpha.8", + "version": "8.5.0-alpha.9", "description": "", "keywords": [ "storybook" diff --git a/code/deprecated/preview/package.json b/code/deprecated/preview/package.json index d949d521b21..0c9183932ae 100644 --- a/code/deprecated/preview/package.json +++ b/code/deprecated/preview/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preview", - "version": "8.5.0-alpha.8", + "version": "8.5.0-alpha.9", "description": "", "keywords": [ "storybook" diff --git a/code/deprecated/router/package.json b/code/deprecated/router/package.json index 8cd72453e39..8d352580d46 100644 --- a/code/deprecated/router/package.json +++ b/code/deprecated/router/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/router", - "version": "8.5.0-alpha.8", + "version": "8.5.0-alpha.9", "description": "Core Storybook Router", "keywords": [ "storybook" diff --git a/code/deprecated/telemetry/package.json b/code/deprecated/telemetry/package.json index 66f603b75af..234029e5684 100644 --- a/code/deprecated/telemetry/package.json +++ b/code/deprecated/telemetry/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/telemetry", - "version": "8.5.0-alpha.8", + "version": "8.5.0-alpha.9", "description": "Telemetry logging for crash reports and usage statistics", "keywords": [ "storybook" diff --git a/code/deprecated/theming/package.json b/code/deprecated/theming/package.json index fa9ba0ec786..fced4556bd2 100644 --- a/code/deprecated/theming/package.json +++ b/code/deprecated/theming/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/theming", - "version": "8.5.0-alpha.8", + "version": "8.5.0-alpha.9", "description": "Core Storybook Components", "keywords": [ "storybook" diff --git a/code/deprecated/types/package.json b/code/deprecated/types/package.json index e2617b65873..73c8998f613 100644 --- a/code/deprecated/types/package.json +++ b/code/deprecated/types/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/types", - "version": "8.5.0-alpha.8", + "version": "8.5.0-alpha.9", "description": "Core Storybook TS Types", "keywords": [ "storybook" diff --git a/code/frameworks/angular/package.json b/code/frameworks/angular/package.json index b6ec4287e31..21473029f2b 100644 --- a/code/frameworks/angular/package.json +++ b/code/frameworks/angular/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/angular", - "version": "8.5.0-alpha.8", + "version": "8.5.0-alpha.9", "description": "Storybook for Angular: Develop Angular components in isolation with hot reloading.", "keywords": [ "storybook", diff --git a/code/frameworks/ember/package.json b/code/frameworks/ember/package.json index 22f33eb8e08..e0a8648d7fd 100644 --- a/code/frameworks/ember/package.json +++ b/code/frameworks/ember/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/ember", - "version": "8.5.0-alpha.8", + "version": "8.5.0-alpha.9", "description": "Storybook for Ember: Develop Ember Component in isolation with Hot Reloading.", "homepage": "https://github.com/storybookjs/storybook/tree/next/code/frameworks/ember", "bugs": { diff --git a/code/frameworks/experimental-nextjs-vite/package.json b/code/frameworks/experimental-nextjs-vite/package.json index 3bbe5e17cb0..726a8a528f7 100644 --- a/code/frameworks/experimental-nextjs-vite/package.json +++ b/code/frameworks/experimental-nextjs-vite/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/experimental-nextjs-vite", - "version": "8.5.0-alpha.8", + "version": "8.5.0-alpha.9", "description": "Storybook for Next.js and Vite", "keywords": [ "storybook", diff --git a/code/frameworks/html-vite/package.json b/code/frameworks/html-vite/package.json index 672a6b2580f..7327b9bb81f 100644 --- a/code/frameworks/html-vite/package.json +++ b/code/frameworks/html-vite/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/html-vite", - "version": "8.5.0-alpha.8", + "version": "8.5.0-alpha.9", "description": "Storybook for HTML and Vite: Develop HTML in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/html-webpack5/package.json b/code/frameworks/html-webpack5/package.json index e1fa17c1bc1..846f2836b48 100644 --- a/code/frameworks/html-webpack5/package.json +++ b/code/frameworks/html-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/html-webpack5", - "version": "8.5.0-alpha.8", + "version": "8.5.0-alpha.9", "description": "Storybook for HTML: View HTML snippets in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/nextjs/package.json b/code/frameworks/nextjs/package.json index 13c0666819d..5ca3cfa53d9 100644 --- a/code/frameworks/nextjs/package.json +++ b/code/frameworks/nextjs/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/nextjs", - "version": "8.5.0-alpha.8", + "version": "8.5.0-alpha.9", "description": "Storybook for Next.js", "keywords": [ "storybook", diff --git a/code/frameworks/preact-vite/package.json b/code/frameworks/preact-vite/package.json index 8572761019d..4f480099b8c 100644 --- a/code/frameworks/preact-vite/package.json +++ b/code/frameworks/preact-vite/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preact-vite", - "version": "8.5.0-alpha.8", + "version": "8.5.0-alpha.9", "description": "Storybook for Preact and Vite: Develop Preact components in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/preact-webpack5/package.json b/code/frameworks/preact-webpack5/package.json index c0b474f97a9..7f3194a9fca 100644 --- a/code/frameworks/preact-webpack5/package.json +++ b/code/frameworks/preact-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preact-webpack5", - "version": "8.5.0-alpha.8", + "version": "8.5.0-alpha.9", "description": "Storybook for Preact: Develop Preact Component in isolation.", "keywords": [ "storybook" diff --git a/code/frameworks/react-native-web-vite/package.json b/code/frameworks/react-native-web-vite/package.json index f999cb9f496..5a33c114fca 100644 --- a/code/frameworks/react-native-web-vite/package.json +++ b/code/frameworks/react-native-web-vite/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/react-native-web-vite", - "version": "8.5.0-alpha.8", + "version": "8.5.0-alpha.9", "description": "Develop react-native components an isolated web environment with hot reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/react-vite/package.json b/code/frameworks/react-vite/package.json index aca9b4b63bb..f8d5185b1ff 100644 --- a/code/frameworks/react-vite/package.json +++ b/code/frameworks/react-vite/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/react-vite", - "version": "8.5.0-alpha.8", + "version": "8.5.0-alpha.9", "description": "Storybook for React and Vite: Develop React components in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/react-webpack5/package.json b/code/frameworks/react-webpack5/package.json index 4d82cae66c6..c2e42598c78 100644 --- a/code/frameworks/react-webpack5/package.json +++ b/code/frameworks/react-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/react-webpack5", - "version": "8.5.0-alpha.8", + "version": "8.5.0-alpha.9", "description": "Storybook for React: Develop React Component in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/server-webpack5/package.json b/code/frameworks/server-webpack5/package.json index 25c8f064184..1040303b62b 100644 --- a/code/frameworks/server-webpack5/package.json +++ b/code/frameworks/server-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/server-webpack5", - "version": "8.5.0-alpha.8", + "version": "8.5.0-alpha.9", "description": "Storybook for Server: View HTML snippets from a server in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/svelte-vite/package.json b/code/frameworks/svelte-vite/package.json index 40faa7b0711..ae99c394f3e 100644 --- a/code/frameworks/svelte-vite/package.json +++ b/code/frameworks/svelte-vite/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/svelte-vite", - "version": "8.5.0-alpha.8", + "version": "8.5.0-alpha.9", "description": "Storybook for Svelte and Vite: Develop Svelte components in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/svelte-webpack5/package.json b/code/frameworks/svelte-webpack5/package.json index 131975fc986..caf84218a69 100644 --- a/code/frameworks/svelte-webpack5/package.json +++ b/code/frameworks/svelte-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/svelte-webpack5", - "version": "8.5.0-alpha.8", + "version": "8.5.0-alpha.9", "description": "Storybook for Svelte: Develop Svelte Component in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/sveltekit/package.json b/code/frameworks/sveltekit/package.json index 8f25401fac4..96db76bff0b 100644 --- a/code/frameworks/sveltekit/package.json +++ b/code/frameworks/sveltekit/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/sveltekit", - "version": "8.5.0-alpha.8", + "version": "8.5.0-alpha.9", "description": "Storybook for SvelteKit", "keywords": [ "storybook", diff --git a/code/frameworks/vue3-vite/package.json b/code/frameworks/vue3-vite/package.json index fd6871a7de2..c8cd454ddf3 100644 --- a/code/frameworks/vue3-vite/package.json +++ b/code/frameworks/vue3-vite/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/vue3-vite", - "version": "8.5.0-alpha.8", + "version": "8.5.0-alpha.9", "description": "Storybook for Vue3 and Vite: Develop Vue3 components in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/vue3-webpack5/package.json b/code/frameworks/vue3-webpack5/package.json index f4f4e4e9f90..ac79f082d03 100644 --- a/code/frameworks/vue3-webpack5/package.json +++ b/code/frameworks/vue3-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/vue3-webpack5", - "version": "8.5.0-alpha.8", + "version": "8.5.0-alpha.9", "description": "Storybook for Vue 3: Develop Vue 3 Components in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/web-components-vite/package.json b/code/frameworks/web-components-vite/package.json index b9be1852fdf..c375e74c6e0 100644 --- a/code/frameworks/web-components-vite/package.json +++ b/code/frameworks/web-components-vite/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/web-components-vite", - "version": "8.5.0-alpha.8", + "version": "8.5.0-alpha.9", "description": "Storybook for web-components and Vite: Develop Web Components in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/web-components-webpack5/package.json b/code/frameworks/web-components-webpack5/package.json index 8c0a1e7e14a..0a66af1f2ab 100644 --- a/code/frameworks/web-components-webpack5/package.json +++ b/code/frameworks/web-components-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/web-components-webpack5", - "version": "8.5.0-alpha.8", + "version": "8.5.0-alpha.9", "description": "Storybook for web-components: View web components snippets in isolation with Hot Reloading.", "keywords": [ "lit", diff --git a/code/lib/blocks/package.json b/code/lib/blocks/package.json index 35f4cd6af38..bd5f91b21a1 100644 --- a/code/lib/blocks/package.json +++ b/code/lib/blocks/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/blocks", - "version": "8.5.0-alpha.8", + "version": "8.5.0-alpha.9", "description": "Storybook Doc Blocks", "keywords": [ "storybook" diff --git a/code/lib/cli-sb/package.json b/code/lib/cli-sb/package.json index cee11678940..09f7f512722 100644 --- a/code/lib/cli-sb/package.json +++ b/code/lib/cli-sb/package.json @@ -1,6 +1,6 @@ { "name": "sb", - "version": "8.5.0-alpha.8", + "version": "8.5.0-alpha.9", "description": "Storybook CLI", "keywords": [ "storybook" diff --git a/code/lib/cli-storybook/package.json b/code/lib/cli-storybook/package.json index 6adf193e115..0701874b042 100644 --- a/code/lib/cli-storybook/package.json +++ b/code/lib/cli-storybook/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/cli", - "version": "8.5.0-alpha.8", + "version": "8.5.0-alpha.9", "description": "Storybook CLI", "keywords": [ "storybook" diff --git a/code/lib/cli/package.json b/code/lib/cli/package.json index 7b7cfcc4225..9ef950febec 100644 --- a/code/lib/cli/package.json +++ b/code/lib/cli/package.json @@ -1,6 +1,6 @@ { "name": "storybook", - "version": "8.5.0-alpha.8", + "version": "8.5.0-alpha.9", "description": "Storybook's CLI - install, dev, build, upgrade, and more", "keywords": [ "cli", diff --git a/code/lib/codemod/package.json b/code/lib/codemod/package.json index c9450106d52..b46a1571a1a 100644 --- a/code/lib/codemod/package.json +++ b/code/lib/codemod/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/codemod", - "version": "8.5.0-alpha.8", + "version": "8.5.0-alpha.9", "description": "A collection of codemod scripts written with JSCodeshift", "keywords": [ "storybook" diff --git a/code/lib/core-webpack/package.json b/code/lib/core-webpack/package.json index 4771c1769ec..c8be4f91143 100644 --- a/code/lib/core-webpack/package.json +++ b/code/lib/core-webpack/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/core-webpack", - "version": "8.5.0-alpha.8", + "version": "8.5.0-alpha.9", "description": "Storybook framework-agnostic API", "keywords": [ "storybook" diff --git a/code/lib/create-storybook/package.json b/code/lib/create-storybook/package.json index 6f259e11da5..84b18f5c90b 100644 --- a/code/lib/create-storybook/package.json +++ b/code/lib/create-storybook/package.json @@ -1,6 +1,6 @@ { "name": "create-storybook", - "version": "8.5.0-alpha.8", + "version": "8.5.0-alpha.9", "description": "Initialize Storybook into your project", "homepage": "https://github.com/storybookjs/storybook/tree/next/code/lib/create-storybook", "bugs": { diff --git a/code/lib/csf-plugin/package.json b/code/lib/csf-plugin/package.json index 037e1639df0..3de891423f1 100644 --- a/code/lib/csf-plugin/package.json +++ b/code/lib/csf-plugin/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/csf-plugin", - "version": "8.5.0-alpha.8", + "version": "8.5.0-alpha.9", "description": "Enrich CSF files via static analysis", "keywords": [ "storybook" diff --git a/code/lib/instrumenter/package.json b/code/lib/instrumenter/package.json index 9b91945f92b..3f0ed6801f9 100644 --- a/code/lib/instrumenter/package.json +++ b/code/lib/instrumenter/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/instrumenter", - "version": "8.5.0-alpha.8", + "version": "8.5.0-alpha.9", "description": "", "keywords": [ "storybook" diff --git a/code/lib/react-dom-shim/package.json b/code/lib/react-dom-shim/package.json index e1ecc776145..d5a857f2de4 100644 --- a/code/lib/react-dom-shim/package.json +++ b/code/lib/react-dom-shim/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/react-dom-shim", - "version": "8.5.0-alpha.8", + "version": "8.5.0-alpha.9", "description": "", "keywords": [ "storybook" diff --git a/code/lib/source-loader/package.json b/code/lib/source-loader/package.json index bb461168744..9bb61d0651d 100644 --- a/code/lib/source-loader/package.json +++ b/code/lib/source-loader/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/source-loader", - "version": "8.5.0-alpha.8", + "version": "8.5.0-alpha.9", "description": "Source loader", "keywords": [ "lib", diff --git a/code/lib/test/package.json b/code/lib/test/package.json index 7837874e92d..bfef0287c1e 100644 --- a/code/lib/test/package.json +++ b/code/lib/test/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/test", - "version": "8.5.0-alpha.8", + "version": "8.5.0-alpha.9", "description": "", "keywords": [ "storybook" diff --git a/code/package.json b/code/package.json index 05681ec868f..b02435b3c87 100644 --- a/code/package.json +++ b/code/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/root", - "version": "8.5.0-alpha.8", + "version": "8.5.0-alpha.9", "private": true, "description": "Storybook root", "homepage": "https://storybook.js.org/", @@ -293,6 +293,5 @@ "Dependency Upgrades" ] ] - }, - "deferredNextVersion": "8.5.0-alpha.9" + } } diff --git a/code/presets/create-react-app/package.json b/code/presets/create-react-app/package.json index 90bb1067a73..3bc2110291e 100644 --- a/code/presets/create-react-app/package.json +++ b/code/presets/create-react-app/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preset-create-react-app", - "version": "8.5.0-alpha.8", + "version": "8.5.0-alpha.9", "description": "Storybook for Create React App preset", "keywords": [ "storybook" diff --git a/code/presets/html-webpack/package.json b/code/presets/html-webpack/package.json index 3061754c759..c8745bfed66 100644 --- a/code/presets/html-webpack/package.json +++ b/code/presets/html-webpack/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preset-html-webpack", - "version": "8.5.0-alpha.8", + "version": "8.5.0-alpha.9", "description": "Storybook for HTML: View HTML snippets in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/presets/preact-webpack/package.json b/code/presets/preact-webpack/package.json index beb24e945f6..b01af4ad5c6 100644 --- a/code/presets/preact-webpack/package.json +++ b/code/presets/preact-webpack/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preset-preact-webpack", - "version": "8.5.0-alpha.8", + "version": "8.5.0-alpha.9", "description": "Storybook for Preact: Develop Preact Component in isolation.", "keywords": [ "storybook" diff --git a/code/presets/react-webpack/package.json b/code/presets/react-webpack/package.json index cb5b4305111..f6011f77426 100644 --- a/code/presets/react-webpack/package.json +++ b/code/presets/react-webpack/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preset-react-webpack", - "version": "8.5.0-alpha.8", + "version": "8.5.0-alpha.9", "description": "Storybook for React: Develop React Component in isolation with Hot Reloading", "keywords": [ "storybook" diff --git a/code/presets/server-webpack/package.json b/code/presets/server-webpack/package.json index 7c991914bdb..ac69d0df9b2 100644 --- a/code/presets/server-webpack/package.json +++ b/code/presets/server-webpack/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preset-server-webpack", - "version": "8.5.0-alpha.8", + "version": "8.5.0-alpha.9", "description": "Storybook for Server: View HTML snippets from a server in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/presets/svelte-webpack/package.json b/code/presets/svelte-webpack/package.json index a195df8a23e..34dd41e0242 100644 --- a/code/presets/svelte-webpack/package.json +++ b/code/presets/svelte-webpack/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preset-svelte-webpack", - "version": "8.5.0-alpha.8", + "version": "8.5.0-alpha.9", "description": "Storybook for Svelte: Develop Svelte Component in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/presets/vue3-webpack/package.json b/code/presets/vue3-webpack/package.json index 6b4246fe2c9..9b2cb6bc889 100644 --- a/code/presets/vue3-webpack/package.json +++ b/code/presets/vue3-webpack/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preset-vue3-webpack", - "version": "8.5.0-alpha.8", + "version": "8.5.0-alpha.9", "description": "Storybook for Vue 3: Develop Vue 3 Components in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/renderers/html/package.json b/code/renderers/html/package.json index dcd3a9a9f09..3e8a5741ee8 100644 --- a/code/renderers/html/package.json +++ b/code/renderers/html/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/html", - "version": "8.5.0-alpha.8", + "version": "8.5.0-alpha.9", "description": "Storybook HTML renderer", "keywords": [ "storybook" diff --git a/code/renderers/preact/package.json b/code/renderers/preact/package.json index 0d985e22d04..7e8ee829ac6 100644 --- a/code/renderers/preact/package.json +++ b/code/renderers/preact/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preact", - "version": "8.5.0-alpha.8", + "version": "8.5.0-alpha.9", "description": "Storybook Preact renderer", "keywords": [ "storybook" diff --git a/code/renderers/react/package.json b/code/renderers/react/package.json index acd4391271d..457120de881 100644 --- a/code/renderers/react/package.json +++ b/code/renderers/react/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/react", - "version": "8.5.0-alpha.8", + "version": "8.5.0-alpha.9", "description": "Storybook React renderer", "keywords": [ "storybook" diff --git a/code/renderers/server/package.json b/code/renderers/server/package.json index 70f2abbc0c3..8700e76fb5c 100644 --- a/code/renderers/server/package.json +++ b/code/renderers/server/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/server", - "version": "8.5.0-alpha.8", + "version": "8.5.0-alpha.9", "description": "Storybook Server renderer", "keywords": [ "storybook" diff --git a/code/renderers/svelte/package.json b/code/renderers/svelte/package.json index 43a693d7f58..a8e655cf4b8 100644 --- a/code/renderers/svelte/package.json +++ b/code/renderers/svelte/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/svelte", - "version": "8.5.0-alpha.8", + "version": "8.5.0-alpha.9", "description": "Storybook Svelte renderer", "keywords": [ "storybook" diff --git a/code/renderers/vue3/package.json b/code/renderers/vue3/package.json index 384e934a37f..7ed92ef0f7e 100644 --- a/code/renderers/vue3/package.json +++ b/code/renderers/vue3/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/vue3", - "version": "8.5.0-alpha.8", + "version": "8.5.0-alpha.9", "description": "Storybook Vue 3 renderer", "keywords": [ "storybook" diff --git a/code/renderers/web-components/package.json b/code/renderers/web-components/package.json index bae93a66429..e6c724f7438 100644 --- a/code/renderers/web-components/package.json +++ b/code/renderers/web-components/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/web-components", - "version": "8.5.0-alpha.8", + "version": "8.5.0-alpha.9", "description": "Storybook web-components renderer", "keywords": [ "lit", From 80905a22c78f7853c72255b11b3af5e095a83aaf Mon Sep 17 00:00:00 2001 From: storybook-bot <32066757+storybook-bot@users.noreply.github.com> Date: Wed, 20 Nov 2024 15:38:21 +0000 Subject: [PATCH 099/101] Update CHANGELOG.md for v8.4.5 [skip ci] --- CHANGELOG.md | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index eb9f0de30cd..e836b81e7ad 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,10 @@ +## 8.4.5 + +- Angular: Support v19 - [#29659](https://github.com/storybookjs/storybook/pull/29659), thanks @leosvelperez! +- CLI: Disable corepack auto pin behavior - [#29627](https://github.com/storybookjs/storybook/pull/29627), thanks @yannbf! +- CLI: Fix qwik init - [#29632](https://github.com/storybookjs/storybook/pull/29632), thanks @shilman! +- Nextjs-Vite: Add Next.js 15 support - [#29640](https://github.com/storybookjs/storybook/pull/29640), thanks @yannbf! + ## 8.4.4 - Addon Test: Only optimize react deps if applicable in vitest-plugin - [#29617](https://github.com/storybookjs/storybook/pull/29617), thanks @yannbf! From 1c9f923dc79f5e06c84820c5cfe275a767304dbe Mon Sep 17 00:00:00 2001 From: Ingo <ingo.wagner@totvs.com> Date: Wed, 20 Nov 2024 20:39:07 -0500 Subject: [PATCH 100/101] fix: isStandalone defaults to true if angular >= 19 --- .../client/angular-beta/utils/PropertyExtractor.ts | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/code/frameworks/angular/src/client/angular-beta/utils/PropertyExtractor.ts b/code/frameworks/angular/src/client/angular-beta/utils/PropertyExtractor.ts index dc12b820879..1859bb9ca24 100644 --- a/code/frameworks/angular/src/client/angular-beta/utils/PropertyExtractor.ts +++ b/code/frameworks/angular/src/client/angular-beta/utils/PropertyExtractor.ts @@ -11,6 +11,7 @@ import { Provider, ɵReflectionCapabilities as ReflectionCapabilities, importProvidersFrom, + VERSION, } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { @@ -176,15 +177,20 @@ export class PropertyExtractor implements NgModuleMetadata { const isDeclarable = isComponent || isDirective || isPipe; // Check if the hierarchically lowest Component or Directive decorator (the only relevant for importing dependencies) is standalone. - const isStandalone = !!( + + let isStandalone = (isComponent || isDirective) && [...decorators] .reverse() // reflectionCapabilities returns decorators in a hierarchically top-down order .find( (d) => this.isDecoratorInstanceOf(d, 'Component') || this.isDecoratorInstanceOf(d, 'Directive') - )?.standalone - ); + )?.standalone; + + //Starting in Angular 19 the default (in case it's undefined) value for standalone is true + if (isStandalone === undefined) { + isStandalone = !!(VERSION.major && Number(VERSION.major) >= 19); + } return { isDeclarable, isStandalone }; }; From 13e54a028b9a4005142b113693e839218ca9c612 Mon Sep 17 00:00:00 2001 From: Yann Braga <yannbf@gmail.com> Date: Thu, 21 Nov 2024 09:12:35 +0100 Subject: [PATCH 101/101] Addon Test: Use pathe for better windows support --- code/addons/test/package.json | 1 + code/addons/test/src/node/boot-test-runner.ts | 2 +- .../addons/test/src/node/test-manager.test.ts | 2 +- code/addons/test/src/node/vitest-manager.ts | 2 +- code/addons/test/src/postinstall.ts | 33 ++++++++++--------- code/addons/test/src/preset.ts | 2 +- code/addons/test/src/vitest-plugin/index.ts | 4 +-- code/yarn.lock | 1 + 8 files changed, 25 insertions(+), 22 deletions(-) diff --git a/code/addons/test/package.json b/code/addons/test/package.json index bd911f2f5b9..53d896c6e20 100644 --- a/code/addons/test/package.json +++ b/code/addons/test/package.json @@ -98,6 +98,7 @@ "execa": "^8.0.1", "find-up": "^7.0.0", "formik": "^2.2.9", + "pathe": "^1.1.2", "picocolors": "^1.1.0", "react": "^18.2.0", "react-dom": "^18.2.0", diff --git a/code/addons/test/src/node/boot-test-runner.ts b/code/addons/test/src/node/boot-test-runner.ts index 032be588b10..4acc4995919 100644 --- a/code/addons/test/src/node/boot-test-runner.ts +++ b/code/addons/test/src/node/boot-test-runner.ts @@ -1,5 +1,4 @@ import { type ChildProcess } from 'node:child_process'; -import { join } from 'node:path'; import type { Channel } from 'storybook/internal/channels'; import { @@ -13,6 +12,7 @@ import { // eslint-disable-next-line depend/ban-dependencies import { execaNode } from 'execa'; +import { join } from 'pathe'; import { TEST_PROVIDER_ID } from '../constants'; import { log } from '../logger'; diff --git a/code/addons/test/src/node/test-manager.test.ts b/code/addons/test/src/node/test-manager.test.ts index 20763641d21..826d71a877b 100644 --- a/code/addons/test/src/node/test-manager.test.ts +++ b/code/addons/test/src/node/test-manager.test.ts @@ -3,7 +3,7 @@ import { createVitest } from 'vitest/node'; import { Channel, type ChannelTransport } from '@storybook/core/channels'; -import path from 'path'; +import path from 'pathe'; import { TEST_PROVIDER_ID } from '../constants'; import { TestManager } from './test-manager'; diff --git a/code/addons/test/src/node/vitest-manager.ts b/code/addons/test/src/node/vitest-manager.ts index f69f065aa42..4441a66371f 100644 --- a/code/addons/test/src/node/vitest-manager.ts +++ b/code/addons/test/src/node/vitest-manager.ts @@ -1,11 +1,11 @@ import { existsSync } from 'node:fs'; -import path, { normalize } from 'node:path'; import type { TestProject, TestSpecification, Vitest, WorkspaceProject } from 'vitest/node'; import type { Channel } from 'storybook/internal/channels'; import type { TestingModuleRunRequestPayload } from 'storybook/internal/core-events'; +import path, { normalize } from 'pathe'; import slash from 'slash'; import { log } from '../logger'; diff --git a/code/addons/test/src/postinstall.ts b/code/addons/test/src/postinstall.ts index fd9364250a2..f6772f7691c 100644 --- a/code/addons/test/src/postinstall.ts +++ b/code/addons/test/src/postinstall.ts @@ -1,8 +1,6 @@ import { existsSync } from 'node:fs'; import * as fs from 'node:fs/promises'; import { writeFile } from 'node:fs/promises'; -import { dirname, join, relative } from 'node:path'; -import * as path from 'node:path'; import { JsPackageManagerFactory, @@ -16,6 +14,7 @@ import { colors, logger } from 'storybook/internal/node-logger'; // eslint-disable-next-line depend/ban-dependencies import { execa } from 'execa'; import { findUp } from 'find-up'; +import { dirname, extname, join, relative, resolve } from 'pathe'; import picocolors from 'picocolors'; import prompts from 'prompts'; import { coerce, satisfies } from 'semver'; @@ -27,7 +26,8 @@ import { printError, printInfo, printSuccess, step } from './postinstall-logger' const ADDON_NAME = '@storybook/experimental-addon-test' as const; const EXTENSIONS = ['.js', '.jsx', '.ts', '.tsx', '.cts', '.mts', '.cjs', '.mjs'] as const; -const findFile = async (basename: string) => findUp(EXTENSIONS.map((ext) => basename + ext)); +const findFile = async (basename: string, extraExtensions: string[] = []) => + findUp([...EXTENSIONS, ...extraExtensions].map((ext) => basename + ext)); export default async function postInstall(options: PostinstallOptions) { printSuccess( @@ -244,7 +244,10 @@ export default async function postInstall(options: PostinstallOptions) { args: ['playwright', 'install', 'chromium', '--with-deps'], }); - const vitestSetupFile = path.resolve(options.configDir, 'vitest.setup.ts'); + const fileExtension = + allDeps['typescript'] || (await findFile('tsconfig', ['.json'])) ? 'ts' : 'js'; + + const vitestSetupFile = resolve(options.configDir, `vitest.setup.${fileExtension}`); if (existsSync(vitestSetupFile)) { printError( '🚨 Oh no!', @@ -264,9 +267,9 @@ export default async function postInstall(options: PostinstallOptions) { logger.plain(`${step} Creating a Vitest setup file for Storybook:`); logger.plain(colors.gray(` ${vitestSetupFile}`)); - const previewExists = EXTENSIONS.map((ext) => - path.resolve(options.configDir, `preview${ext}`) - ).some((config) => existsSync(config)); + const previewExists = EXTENSIONS.map((ext) => resolve(options.configDir, `preview${ext}`)).some( + (config) => existsSync(config) + ); await writeFile( vitestSetupFile, @@ -331,10 +334,10 @@ export default async function postInstall(options: PostinstallOptions) { if (rootConfig) { // If there's an existing config, we create a workspace file so we can run Storybook tests alongside. - const extname = path.extname(rootConfig); - const browserWorkspaceFile = path.resolve(dirname(rootConfig), `vitest.workspace${extname}`); + const extension = extname(rootConfig); + const browserWorkspaceFile = resolve(dirname(rootConfig), `vitest.workspace${extension}`); // to be set in vitest config - const vitestSetupFilePath = path.relative(path.dirname(browserWorkspaceFile), vitestSetupFile); + const vitestSetupFilePath = relative(dirname(browserWorkspaceFile), vitestSetupFile); logger.line(1); logger.plain(`${step} Creating a Vitest project workspace file:`); @@ -373,9 +376,9 @@ export default async function postInstall(options: PostinstallOptions) { ); } else { // If there's no existing Vitest/Vite config, we create a new Vitest config file. - const newVitestConfigFile = path.resolve('vitest.config.ts'); + const newVitestConfigFile = resolve(`vitest.config.${fileExtension}`); // to be set in vitest config - const vitestSetupFilePath = path.relative(path.dirname(newVitestConfigFile), vitestSetupFile); + const vitestSetupFilePath = relative(dirname(newVitestConfigFile), vitestSetupFile); logger.line(1); logger.plain(`${step} Creating a Vitest project config file:`); @@ -497,9 +500,7 @@ async function getStorybookInfo({ configDir, packageManager: pkgMgr }: Postinsta } const builderPackageJson = await fs.readFile( - require.resolve( - path.join(typeof builder === 'string' ? builder : builder.name, 'package.json') - ), + require.resolve(join(typeof builder === 'string' ? builder : builder.name, 'package.json')), 'utf8' ); const builderPackageName = JSON.parse(builderPackageJson).name; @@ -507,7 +508,7 @@ async function getStorybookInfo({ configDir, packageManager: pkgMgr }: Postinsta let rendererPackageName: string | undefined; if (renderer) { const rendererPackageJson = await fs.readFile( - require.resolve(path.join(renderer, 'package.json')), + require.resolve(join(renderer, 'package.json')), 'utf8' ); rendererPackageName = JSON.parse(rendererPackageJson).name; diff --git a/code/addons/test/src/preset.ts b/code/addons/test/src/preset.ts index 685a56e2baf..41808c55d21 100644 --- a/code/addons/test/src/preset.ts +++ b/code/addons/test/src/preset.ts @@ -1,5 +1,4 @@ import { readFileSync } from 'node:fs'; -import { isAbsolute, join } from 'node:path'; import type { Channel } from 'storybook/internal/channels'; import { checkAddonOrder, getFrameworkName, serverRequire } from 'storybook/internal/common'; @@ -11,6 +10,7 @@ import { import { oneWayHash, telemetry } from 'storybook/internal/telemetry'; import type { Options, PresetProperty, StoryId } from 'storybook/internal/types'; +import { isAbsolute, join } from 'pathe'; import picocolors from 'picocolors'; import { dedent } from 'ts-dedent'; diff --git a/code/addons/test/src/vitest-plugin/index.ts b/code/addons/test/src/vitest-plugin/index.ts index 968b0e65614..ac2c65b4f86 100644 --- a/code/addons/test/src/vitest-plugin/index.ts +++ b/code/addons/test/src/vitest-plugin/index.ts @@ -1,6 +1,4 @@ /* eslint-disable no-underscore-dangle */ -import { join, resolve } from 'node:path'; - import type { Plugin } from 'vitest/config'; import { @@ -12,6 +10,8 @@ import { readConfig, vitestTransform } from 'storybook/internal/csf-tools'; import { MainFileMissingError } from 'storybook/internal/server-errors'; import type { StoriesEntry } from 'storybook/internal/types'; +import { join, resolve } from 'pathe'; + import type { InternalOptions, UserOptions } from './types'; const defaultOptions: UserOptions = { diff --git a/code/yarn.lock b/code/yarn.lock index fcf45a9df6f..107c541a4cd 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -6612,6 +6612,7 @@ __metadata: execa: "npm:^8.0.1" find-up: "npm:^7.0.0" formik: "npm:^2.2.9" + pathe: "npm:^1.1.2" picocolors: "npm:^1.1.0" polished: "npm:^4.2.2" prompts: "npm:^2.4.0"