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/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[]; 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: 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/_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 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: 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!"}} diff --git a/docs/versions/next.json b/docs/versions/next.json index 9963ff265181..eb05e2df02ca 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.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!"}}