Merge pull request #29246 from storybookjs/version-patch-from-8.3.4

Release: Patch 8.3.5

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!

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:

code/core/src/csf-tools/CsfFile.ts

@@ -190,6 +190,7 @@ export interface StaticMeta
 
 export interface StaticStory extends Pick<StoryAnnotations, 'name' | 'parameters' | 'tags'> {
   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: {},
                   };

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 {};

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[];
 

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,
   });
 };

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:
 

code/package.json

@@ -295,5 +295,6 @@
         "Dependency Upgrades"
       ]
     ]
-  }
+  },
+  "deferredNextVersion": "8.3.5"
 }

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

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 */}
 
   <Callout variant="info">
-    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).
   </Callout>
 
   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:

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!"}}

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!"}}