From 7b7eec88229cb72b62505c0706934117933b06b3 Mon Sep 17 00:00:00 2001 From: storybook-bot <32066757+storybook-bot@users.noreply.github.com> Date: Sat, 28 Sep 2024 11:46:37 +0000 Subject: [PATCH 1/7] Update ./docs/versions/next.json for v8.4.0-alpha.2 --- docs/versions/next.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/versions/next.json b/docs/versions/next.json index 9963ff265181..29a63859284a 100644 --- a/docs/versions/next.json +++ b/docs/versions/next.json @@ -1 +1 @@ -{"version":"8.4.0-alpha.0","info":{"plain":""}} +{"version":"8.4.0-alpha.2","info":{"plain":"- CLI: Don't add `@storybook/addon-links` by default - [#29177](https://github.com/storybookjs/storybook/pull/29177), thanks @tobiasdiez!\n- Core: Make `prettier` an optional peer dependency - [#29223](https://github.com/storybookjs/storybook/pull/29223), thanks @JReinhold!\n- Core: Remove `handlebars` usage - [#29208](https://github.com/storybookjs/storybook/pull/29208), thanks @ndelangen!\n- Core: Replace `lodash` with `es-toolkit` - [#28981](https://github.com/storybookjs/storybook/pull/28981), thanks @ndelangen!\n- UI: Use production-mode `react` in manager - [#29197](https://github.com/storybookjs/storybook/pull/29197), thanks @ndelangen!"}} From 1524f72133a7e4ffc487fe55592d57baf6f253ce Mon Sep 17 00:00:00 2001 From: storybook-bot <32066757+storybook-bot@users.noreply.github.com> Date: Wed, 2 Oct 2024 01:56:36 +0000 Subject: [PATCH 2/7] Update ./docs/versions/next.json for v8.4.0-alpha.3 --- docs/versions/next.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/versions/next.json b/docs/versions/next.json index 29a63859284a..eb05e2df02ca 100644 --- a/docs/versions/next.json +++ b/docs/versions/next.json @@ -1 +1 @@ -{"version":"8.4.0-alpha.2","info":{"plain":"- CLI: Don't add `@storybook/addon-links` by default - [#29177](https://github.com/storybookjs/storybook/pull/29177), thanks @tobiasdiez!\n- Core: Make `prettier` an optional peer dependency - [#29223](https://github.com/storybookjs/storybook/pull/29223), thanks @JReinhold!\n- Core: Remove `handlebars` usage - [#29208](https://github.com/storybookjs/storybook/pull/29208), thanks @ndelangen!\n- Core: Replace `lodash` with `es-toolkit` - [#28981](https://github.com/storybookjs/storybook/pull/28981), thanks @ndelangen!\n- UI: Use production-mode `react` in manager - [#29197](https://github.com/storybookjs/storybook/pull/29197), thanks @ndelangen!"}} +{"version":"8.4.0-alpha.3","info":{"plain":"- CLI: Migrate from `chalk` to `picocolors` - [#28262](https://github.com/storybookjs/storybook/pull/28262), thanks @43081j!\n- Core: Migrate from `qs` to `picoquery` - [#28315](https://github.com/storybookjs/storybook/pull/28315), thanks @43081j!\n- UI: Brand image css class conflict causes image to resize on hot reloads - [#29129](https://github.com/storybookjs/storybook/pull/29129), thanks @ShreySinha02!"}} From 60e5186f0abfe4f6d53aa4355258460c0f6cdb33 Mon Sep 17 00:00:00 2001 From: jonniebigodes Date: Mon, 30 Sep 2024 18:55:11 +0100 Subject: [PATCH 3/7] Merge pull request #29245 from JavanPoirier/patch-1 Docs: NextJs framework fix viteFinal link (cherry picked from commit 8d0e714457632c397da6c41cb1d841a9a1c13c0a) --- docs/get-started/frameworks/nextjs.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/get-started/frameworks/nextjs.mdx b/docs/get-started/frameworks/nextjs.mdx index 597522f03020..14e2c3e55294 100644 --- a/docs/get-started/frameworks/nextjs.mdx +++ b/docs/get-started/frameworks/nextjs.mdx @@ -107,7 +107,7 @@ Storybook for Next.js is a [framework](../../contribute/framework.mdx) that make {/* prettier-ignore-end */} - If your Storybook configuration contains custom Webpack operations in [`webpackFinal`](../../api/main-config/main-config-webpack-final.mdx), you will likely need to create equivalents in [`viteFinal`]((../../api/main-config/main-config-vite-final.mdx)). + If your Storybook configuration contains custom Webpack operations in [`webpackFinal`](../../api/main-config/main-config-webpack-final.mdx), you will likely need to create equivalents in [`viteFinal`](../../api/main-config/main-config-vite-final.mdx). Finally, if you were using Storybook plugins to integrate with Next.js, those are no longer necessary when using this framework and can be removed: From d0e70ad2def49885bacfbed0adc0a7d9d3e8d118 Mon Sep 17 00:00:00 2001 From: jonniebigodes Date: Wed, 2 Oct 2024 15:13:17 +0100 Subject: [PATCH 4/7] Merge pull request #29231 from pedrosousa13/next Docs: FIx Vitest Workspace snippet (cherry picked from commit 5aaf034ef697962863ba72b419d482925b3e1f76) --- docs/_snippets/vitest-plugin-vitest-workspace.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/_snippets/vitest-plugin-vitest-workspace.md b/docs/_snippets/vitest-plugin-vitest-workspace.md index 909815ddc47e..1e2db2169e16 100644 --- a/docs/_snippets/vitest-plugin-vitest-workspace.md +++ b/docs/_snippets/vitest-plugin-vitest-workspace.md @@ -8,7 +8,6 @@ export default defineWorkspace([ // This is the path to your existing Vitest config file './vitest.config.ts', { - name: 'storybook', // This is the path to your existing Vite config file extends: './vite.config.ts', plugins: [ @@ -20,6 +19,7 @@ export default defineWorkspace([ // storybookNextjsPlugin(), ], test: { + name: 'storybook', // Glob pattern to find story files include: ['src/**/*.stories.?(m)[jt]s?(x)'], // Enable browser mode @@ -51,7 +51,6 @@ export default defineWorkspace([ // This is the path to your existing Vitest config file './vitest.config.ts', { - name: 'storybook', // This is the path to your existing Vite config file extends: './vite.config.ts', plugins: [ @@ -63,6 +62,7 @@ export default defineWorkspace([ storybookVuePlugin(), ], test: { + name: 'storybook', // Glob pattern to find story files include: ['src/**/*.stories.?(m)[jt]s?(x)'], // Enable browser mode @@ -95,7 +95,6 @@ export default defineWorkspace([ // This is the path to your existing Vitest config file './vitest.config.ts', { - name: 'storybook', // This is the path to your existing Vite config file extends: './vite.config.ts', plugins: [ @@ -107,6 +106,7 @@ export default defineWorkspace([ // storybookSveltekitPlugin(), ], test: { + name: 'storybook', // Glob pattern to find story files include: ['src/**/*.stories.?(m)[jt]s?(x)'], // Enable browser mode From 3f917b1a47ea40dbbb5751a2000de3a76bc7a5d7 Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Wed, 2 Oct 2024 17:43:54 +0200 Subject: [PATCH 5/7] Merge pull request #29250 from storybookjs/shilman/29244-vitest-renamed-exports Vitest plugin: Fix renamed export stories (cherry picked from commit ed00bc5769280ffef4f1538f943b96d8e28d1fc3) --- code/core/src/csf-tools/CsfFile.test.ts | 5 +++ code/core/src/csf-tools/CsfFile.ts | 3 ++ .../vitest-plugin/transformer.test.ts | 34 +++++++++++++++++++ .../csf-tools/vitest-plugin/transformer.ts | 7 ++-- 4 files changed, 47 insertions(+), 2 deletions(-) diff --git a/code/core/src/csf-tools/CsfFile.test.ts b/code/core/src/csf-tools/CsfFile.test.ts index 18d441e666b8..d7194edcdf2e 100644 --- a/code/core/src/csf-tools/CsfFile.test.ts +++ b/code/core/src/csf-tools/CsfFile.test.ts @@ -81,6 +81,7 @@ describe('CsfFile', () => { stories: - id: foo-bar--a name: A + localName: A parameters: __id: foo-bar--a __stats: @@ -94,6 +95,7 @@ describe('CsfFile', () => { moduleMock: false - id: foo-bar--b name: B + localName: B parameters: __id: foo-bar--b __stats: @@ -790,6 +792,7 @@ describe('CsfFile', () => { stories: - id: foo-bar--a name: A + localName: default __stats: play: false render: false @@ -801,6 +804,7 @@ describe('CsfFile', () => { moduleMock: false - id: foo-bar--b name: B + localName: B __stats: play: false render: false @@ -878,6 +882,7 @@ describe('CsfFile', () => { stories: - id: foo-bar--a name: A + localName: A parameters: __id: foo-bar--a __stats: diff --git a/code/core/src/csf-tools/CsfFile.ts b/code/core/src/csf-tools/CsfFile.ts index d9859da5cecb..d1cafb31bb64 100644 --- a/code/core/src/csf-tools/CsfFile.ts +++ b/code/core/src/csf-tools/CsfFile.ts @@ -190,6 +190,7 @@ export interface StaticMeta export interface StaticStory extends Pick { id: string; + localName?: string; __stats: IndexInputStats; } @@ -488,6 +489,7 @@ export class CsfFile { node.specifiers.forEach((specifier) => { if (t.isExportSpecifier(specifier) && t.isIdentifier(specifier.exported)) { const { name: exportName } = specifier.exported; + const { name: localName } = specifier.local; const decl = t.isProgram(parent) ? findVarInitialization(specifier.local.name, parent) : specifier.local; @@ -515,6 +517,7 @@ export class CsfFile { self._stories[exportName] = { id: 'FIXME', name: exportName, + localName, parameters: {}, __stats: {}, }; diff --git a/code/core/src/csf-tools/vitest-plugin/transformer.test.ts b/code/core/src/csf-tools/vitest-plugin/transformer.test.ts index 84d9ac273718..5b030ac19c73 100644 --- a/code/core/src/csf-tools/vitest-plugin/transformer.test.ts +++ b/code/core/src/csf-tools/vitest-plugin/transformer.test.ts @@ -296,6 +296,40 @@ describe('transformer', () => { `); }); + it('should add test statement to const declared renamed exported stories', async () => { + const code = ` + export default {}; + const Primary = { + args: { + label: 'Primary Button', + }, + }; + + export { Primary as PrimaryStory }; + `; + + const result = await transform({ code }); + + expect(result.code).toMatchInlineSnapshot(` + import { test as _test, expect as _expect } from "vitest"; + import { testStory as _testStory } from "@storybook/experimental-addon-test/internal/test-utils"; + const _meta = { + title: "automatic/calculated/title" + }; + export default _meta; + const Primary = { + args: { + label: 'Primary Button' + } + }; + export { Primary as PrimaryStory }; + const _isRunningFromThisFile = import.meta.url.includes(globalThis.__vitest_worker__.filepath ?? _expect.getState().testPath); + if (_isRunningFromThisFile) { + _test("PrimaryStory", _testStory("PrimaryStory", Primary, _meta, [])); + } + `); + }); + it('should add tests for multiple stories', async () => { const code = ` export default {}; diff --git a/code/core/src/csf-tools/vitest-plugin/transformer.ts b/code/core/src/csf-tools/vitest-plugin/transformer.ts index 778ea752f1d0..677235975cb1 100644 --- a/code/core/src/csf-tools/vitest-plugin/transformer.ts +++ b/code/core/src/csf-tools/vitest-plugin/transformer.ts @@ -201,10 +201,12 @@ export async function vitestTransform({ ast.program.body.push(isRunningFromThisFileDeclaration); const getTestStatementForStory = ({ + localName, exportName, testTitle, node, }: { + localName: string; exportName: string; testTitle: string; node: t.Node; @@ -215,7 +217,7 @@ export async function vitestTransform({ t.stringLiteral(testTitle), t.callExpression(testStoryId, [ t.stringLiteral(exportName), - t.identifier(exportName), + t.identifier(localName), t.identifier(metaExportName), skipTagsId, ]), @@ -241,9 +243,10 @@ export async function vitestTransform({ return; } + const localName = parsed._stories[exportName].localName ?? exportName; // use the story's name as the test title for vitest, and fallback to exportName const testTitle = parsed._stories[exportName].name ?? exportName; - return getTestStatementForStory({ testTitle, exportName, node }); + return getTestStatementForStory({ testTitle, localName, exportName, node }); }) .filter((st) => !!st) as t.ExpressionStatement[]; From e1d04009c1dd6eabee6f83fe911d4f939f1632ae Mon Sep 17 00:00:00 2001 From: storybook-bot <32066757+storybook-bot@users.noreply.github.com> Date: Thu, 3 Oct 2024 22:32:02 +0000 Subject: [PATCH 6/7] Write changelog for 8.3.5 [skip ci] --- CHANGELOG.md | 5 +++++ code/package.json | 3 ++- docs/versions/latest.json | 2 +- 3 files changed, 8 insertions(+), 2 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index dd75af133731..f3e13bedee71 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,8 @@ +## 8.3.5 + +- CLI: Update the React Native init to include v8 dependencies - [#29273](https://github.com/storybookjs/storybook/pull/29273), thanks @dannyhw! +- Vitest plugin: Fix renamed export stories - [#29250](https://github.com/storybookjs/storybook/pull/29250), thanks @shilman! + ## 8.3.4 - Addon Test: Support story name as test description - [#29147](https://github.com/storybookjs/storybook/pull/29147), thanks @InfiniteXyy! diff --git a/code/package.json b/code/package.json index 49dc1b6faf52..36e157b92956 100644 --- a/code/package.json +++ b/code/package.json @@ -295,5 +295,6 @@ "Dependency Upgrades" ] ] - } + }, + "deferredNextVersion": "8.3.5" } diff --git a/docs/versions/latest.json b/docs/versions/latest.json index 9d5e8bbe13fc..ee1ed3dee503 100644 --- a/docs/versions/latest.json +++ b/docs/versions/latest.json @@ -1 +1 @@ -{"version":"8.3.4","info":{"plain":"- Addon Test: Support story name as test description - [#29147](https://github.com/storybookjs/storybook/pull/29147), thanks @InfiniteXyy!\n- Addon-Interactions: Use ansi-to-html for colored test errors - [#29110](https://github.com/storybookjs/storybook/pull/29110), thanks @kasperpeulen!"}} +{"version":"8.3.5","info":{"plain":"- CLI: Update the React Native init to include v8 dependencies - [#29273](https://github.com/storybookjs/storybook/pull/29273), thanks @dannyhw!\n- Vitest plugin: Fix renamed export stories - [#29250](https://github.com/storybookjs/storybook/pull/29250), thanks @shilman!"}} From b5af0c8dded079825d738829300970777d3ac2f5 Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Fri, 4 Oct 2024 06:29:34 +0800 Subject: [PATCH 7/7] Merge pull request #29273 from storybookjs/dannyhw/feat/rnv8-update-create-generator CLI: Update the React Native init to include v8 dependencies (cherry picked from commit 39882072605d3090718fb8c7ee852f22e858d479) --- .../src/generators/REACT_NATIVE/index.ts | 11 ++++++++--- code/lib/create-storybook/src/initiate.ts | 9 ++++++--- 2 files changed, 14 insertions(+), 6 deletions(-) diff --git a/code/lib/create-storybook/src/generators/REACT_NATIVE/index.ts b/code/lib/create-storybook/src/generators/REACT_NATIVE/index.ts index a1fb9be5ad79..cd89b38a16b0 100644 --- a/code/lib/create-storybook/src/generators/REACT_NATIVE/index.ts +++ b/code/lib/create-storybook/src/generators/REACT_NATIVE/index.ts @@ -14,15 +14,19 @@ const generator = async ( const reactVersion = packageJson.dependencies.react; - const controlsPeerDependencies = [ + const peerDependencies = [ 'react-native-safe-area-context', '@react-native-async-storage/async-storage', '@react-native-community/datetimepicker', '@react-native-community/slider', + 'react-native-reanimated', + 'react-native-gesture-handler', + '@gorhom/bottom-sheet', + 'react-native-svg', ].filter((dep) => !packageJson.dependencies[dep] && !packageJson.devDependencies[dep]); const packagesToResolve = [ - ...controlsPeerDependencies, + ...peerDependencies, '@storybook/addon-ondevice-controls', '@storybook/addon-ondevice-actions', '@storybook/react-native', @@ -57,7 +61,8 @@ const generator = async ( await copyTemplateFiles({ packageManager, renderer: 'react-native', - language: SupportedLanguage.TYPESCRIPT_3_8, + // this value for language is not used since we only ship the ts template. This means we just fallback to @storybook/react-native/template/cli. + language: SupportedLanguage.TYPESCRIPT_4_9, destination: storybookConfigFolder, }); }; diff --git a/code/lib/create-storybook/src/initiate.ts b/code/lib/create-storybook/src/initiate.ts index 787e16288cc2..4edd48b6a186 100644 --- a/code/lib/create-storybook/src/initiate.ts +++ b/code/lib/create-storybook/src/initiate.ts @@ -356,10 +356,13 @@ export async function doInitiate(options: CommandOptions): Promise< ${chalk.inverse(' ' + "export {default} from './.storybook';" + ' ')} - 2. Enable transformer.unstable_allowRequireContext in your metro config + 2. Wrap your metro config with the withStorybook enhancer function like this: - For a more detailed guide go to: - ${chalk.cyan('https://github.com/storybookjs/react-native#existing-project')} + ${chalk.inverse(' ' + "const withStorybook = require('@storybook/react-native/metro/withStorybook');" + ' ')} + ${chalk.inverse(' ' + 'module.exports = withStorybook(defaultConfig);' + ' ')} + + For more details go to: + ${chalk.cyan('https://github.com/storybookjs/react-native#getting-started')} Then to run your Storybook, type: