Merge pull request #29261 from storybookjs/version-non-patch-from-8.4…

….0-alpha.3

Release: Prerelease 8.4.0-alpha.4

CHANGELOG.prerelease.md

@@ -1,3 +1,10 @@
+## 8.4.0-alpha.4
+
+- Blocks: Prebundle `es-toolkit` - [#29259](https://github.com/storybookjs/storybook/pull/29259), thanks @JReinhold!
+- CLI: Update the React Native init to include v8 dependencies - [#29273](https://github.com/storybookjs/storybook/pull/29273), thanks @dannyhw!
+- Core: Upgrade `esbuild`, broadening version range - [#29254](https://github.com/storybookjs/storybook/pull/29254), thanks @ndelangen!
+- Vitest plugin: Fix renamed export stories - [#29250](https://github.com/storybookjs/storybook/pull/29250), thanks @shilman!
+
 ## 8.4.0-alpha.3
 
 - CLI: Migrate from `chalk` to `picocolors` - [#28262](https://github.com/storybookjs/storybook/pull/28262), thanks @43081j!

code/core/package.json

@@ -281,7 +281,7 @@
     "@types/express": "^4.17.21",
     "better-opn": "^3.0.2",
     "browser-assert": "^1.2.1",
-    "esbuild": "^0.18.0 || ^0.19.0 || ^0.20.0 || ^0.21.0 || ^0.22.0 || ^0.23.0",
+    "esbuild": "^0.18.0 || ^0.19.0 || ^0.20.0 || ^0.21.0 || ^0.22.0 || ^0.23.0 || ^0.24.0",
     "esbuild-register": "^3.5.0",
     "express": "^4.19.2",
     "jsdoc-type-pratt-parser": "^4.0.0",

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/blocks/package.json

@@ -48,7 +48,6 @@
     "@storybook/icons": "^1.2.10",
     "color-convert": "^2.0.1",
     "dequal": "^2.0.2",
-    "es-toolkit": "^1.21.0",
     "markdown-to-jsx": "^7.4.5",
     "memoizerific": "^1.11.3",
     "polished": "^4.2.2",
@@ -62,6 +61,7 @@
     "@storybook/react": "workspace:*",
     "@storybook/test": "workspace:*",
     "@types/color-convert": "^2.0.0",
+    "es-toolkit": "^1.21.0",
     "tocbot": "^4.20.1"
   },
   "peerDependencies": {

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<
       
       ${picocolors.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:
-      ${picocolors.cyan('https://github.com/storybookjs/react-native#existing-project')}
+      ${picocolors.inverse(' ' + "const withStorybook = require('@storybook/react-native/metro/withStorybook');" + ' ')}
+      ${picocolors.inverse(' ' + 'module.exports = withStorybook(defaultConfig);' + ' ')}
+
+      For more details go to:
+      ${picocolors.cyan('https://github.com/storybookjs/react-native#getting-started')}
       
       Then to run your Storybook, type:
 

code/package.json

@@ -83,7 +83,7 @@
     "@types/babel__traverse@npm:^7.18.0": "patch:@types/babel__traverse@npm%3A7.20.6#~/.yarn/patches/@types-babel__traverse-npm-7.20.6-fac4243243.patch",
     "@types/node": "^22.0.0",
     "@vitest/expect@npm:2.0.5": "patch:@vitest/expect@npm%3A2.0.5#~/.yarn/patches/@vitest-expect-npm-2.0.5-8933466cce.patch",
-    "esbuild": "^0.23.0",
+    "esbuild": "^0.24.0",
     "playwright": "1.46.0",
     "playwright-core": "1.46.0",
     "serialize-javascript": "^3.1.0",
@@ -186,7 +186,7 @@
     "cross-env": "^7.0.3",
     "danger": "^12.3.3",
     "es-toolkit": "^1.21.0",
-    "esbuild": "^0.18.0 || ^0.19.0 || ^0.20.0 || ^0.21.0 || ^0.22.0 || ^0.23.0",
+    "esbuild": "^0.18.0 || ^0.19.0 || ^0.20.0 || ^0.21.0 || ^0.22.0 || ^0.23.0 || ^0.24.0",
     "esbuild-loader": "^4.2.0",
     "esbuild-plugin-alias": "^0.2.1",
     "eslint": "^8.56.0",
@@ -293,5 +293,6 @@
         "Dependency Upgrades"
       ]
     ]
-  }
+  },
+  "deferredNextVersion": "8.4.0-alpha.4"
 }