Use csf-tools in csf factory codemod

storybookjs · Jan 17, 2025 · 4f56d4f · 4f56d4f
1 parent c5e36fc
commit 4f56d4f
Show file tree

Hide file tree

Showing 3 changed files with 212 additions and 179 deletions.
diff --git a/code/core/src/csf-tools/CsfFile.ts b/code/core/src/csf-tools/CsfFile.ts
@@ -4,6 +4,7 @@ import { readFile, writeFile } from 'node:fs/promises';
 import {
   BabelFileClass,
   type GeneratorOptions,
+  type NodePath,
   type RecastOptions,
   babelParse,
   generate,
@@ -255,10 +256,14 @@ export class CsfFile {
 
   _storyExports: Record<string, t.VariableDeclarator | t.FunctionDeclaration> = {};
 
+  _storyPaths: Record<string, NodePath<t.ExportNamedDeclaration>> = {};
+
   _metaStatement: t.Statement | undefined;
 
   _metaNode: t.Expression | undefined;
 
+  _metaPath: NodePath<t.ExportDefaultDeclaration> | undefined;
+
   _metaVariableName: string | undefined;
 
   _metaIsFactory: boolean | undefined;
@@ -466,10 +471,13 @@ export class CsfFile {
               self._options.fileName
             );
           }
+
+          self._metaPath = path;
         },
       },
       ExportNamedDeclaration: {
-        enter({ node, parent }) {
+        enter(path) {
+          const { node, parent } = path;
           let declarations;
           if (t.isVariableDeclaration(node.declaration)) {
             declarations = node.declaration.declarations.filter((d) => t.isVariableDeclarator(d));
@@ -487,6 +495,7 @@ export class CsfFile {
                   return;
                 }
                 self._storyExports[exportName] = decl;
+                self._storyPaths[exportName] = path;
                 self._storyStatements[exportName] = node;
                 let name = storyNameFromExport(exportName);
                 if (self._storyAnnotations[exportName]) {
@@ -611,6 +620,7 @@ export class CsfFile {
                 } else {
                   self._storyAnnotations[exportName] = {};
                   self._storyStatements[exportName] = decl;
+                  self._storyPaths[exportName] = path;
                   self._stories[exportName] = {
                     id: 'FIXME',
                     name: exportName,

diff --git a/code/lib/codemod/src/transforms/__tests__/csf-3-to-4.test.ts b/code/lib/codemod/src/transforms/__tests__/csf-3-to-4.test.ts
@@ -21,10 +21,9 @@ describe('csf-3-to-4', () => {
           export default meta;
         `)
       ).resolves.toMatchInlineSnapshot(`
-        import { config } from "#.storybook/preview";
-        const meta = config.meta({
-          title: 'Component'
-        });
+        import { config } from '#.storybook/preview';
+
+        const meta = config.meta({ title: 'Component' });
       `);
     });
 
@@ -34,9 +33,10 @@ describe('csf-3-to-4', () => {
           export default { title: 'Component' };
         `)
       ).resolves.toMatchInlineSnapshot(`
-        import { config } from "#.storybook/preview";
+        import { config } from '#.storybook/preview';
+
         const meta = config.meta({
-          title: 'Component'
+          title: 'Component',
         });
       `);
     });
@@ -48,10 +48,9 @@ describe('csf-3-to-4', () => {
           export default componentMeta;
         `)
       ).resolves.toMatchInlineSnapshot(`
-        import { config } from "#.storybook/preview";
-        const meta = config.meta({
-          title: 'Component'
-        });
+        import { config } from '#.storybook/preview';
+
+        const meta = config.meta({ title: 'Component' });
       `);
     });
 
@@ -66,15 +65,12 @@ describe('csf-3-to-4', () => {
           };
         `)
       ).resolves.toMatchInlineSnapshot(`
-        import { config } from "#.storybook/preview";
-        const meta = config.meta({
-          title: 'Component'
-        });
+        import { config } from '#.storybook/preview';
+
+        const meta = config.meta({ title: 'Component' });
         export const A = meta.story({
-          args: {
-            primary: true
-          },
-          render: args => <Component {...args} />
+          args: { primary: true },
+          render: (args) => <Component {...args} />,
         });
       `);
     });
@@ -91,15 +87,12 @@ describe('csf-3-to-4', () => {
           };
         `)
       ).resolves.toMatchInlineSnapshot(`
-        import { decorators, config } from "#.storybook/preview";
-        const meta = config.meta({
-          title: 'Component'
-        });
+        import { config, decorators } from '#.storybook/preview';
+
+        const meta = config.meta({ title: 'Component' });
         export const A = meta.story({
-          args: {
-            primary: true
-          },
-          render: args => <Component {...args} />
+          args: { primary: true },
+          render: (args) => <Component {...args} />,
         });
       `);
     });
@@ -119,17 +112,14 @@ describe('csf-3-to-4', () => {
     `;
     it('meta satisfies syntax', async () => {
       await expect(transform(metaSatisfies)).resolves.toMatchInlineSnapshot(`
-        import { config } from "#.storybook/preview";
-        import { Meta, StoryObj as CSF3 } from '@storybook/react';
+        import { config } from '#.storybook/preview';
+
         import { ComponentProps } from './Component';
-        const meta = config.meta({
-          title: 'Component',
-          component: Component
-        });
+
+        const meta = config.meta({ title: 'Component', component: Component });
+
         export const A = meta.story({
-          args: {
-            primary: true
-          }
+          args: { primary: true },
         });
       `);
     });
@@ -147,17 +137,14 @@ describe('csf-3-to-4', () => {
     `;
     it('meta as syntax', async () => {
       await expect(transform(metaAs)).resolves.toMatchInlineSnapshot(`
-        import { config } from "#.storybook/preview";
-        import { Meta, StoryObj as CSF3 } from '@storybook/react';
+        import { config } from '#.storybook/preview';
+
         import { ComponentProps } from './Component';
-        const meta = config.meta({
-          title: 'Component',
-          component: Component
-        });
+
+        const meta = config.meta({ title: 'Component', component: Component });
+
         export const A = meta.story({
-          args: {
-            primary: true
-          }
+          args: { primary: true },
         });
       `);
     });
@@ -175,17 +162,14 @@ describe('csf-3-to-4', () => {
     `;
     it('story satisfies syntax', async () => {
       await expect(transform(storySatisfies)).resolves.toMatchInlineSnapshot(`
-        import { config } from "#.storybook/preview";
-        import { Meta, StoryObj as CSF3 } from '@storybook/react';
+        import { config } from '#.storybook/preview';
+
         import { ComponentProps } from './Component';
-        const meta = config.meta({
-          title: 'Component',
-          component: Component
-        });
+
+        const meta = config.meta({ title: 'Component', component: Component });
+
         export const A = meta.story({
-          args: {
-            primary: true
-          }
+          args: { primary: true },
         });
       `);
     });
@@ -203,17 +187,14 @@ describe('csf-3-to-4', () => {
     `;
     it('story as syntax', async () => {
       await expect(transform(storyAs)).resolves.toMatchInlineSnapshot(`
-        import { config } from "#.storybook/preview";
-        import { Meta, StoryObj as CSF3 } from '@storybook/react';
+        import { config } from '#.storybook/preview';
+
         import { ComponentProps } from './Component';
-        const meta = config.meta({
-          title: 'Component',
-          component: Component
-        });
+
+        const meta = config.meta({ title: 'Component', component: Component });
+
         export const A = meta.story({
-          args: {
-            primary: true
-          }
+          args: { primary: true },
         });
       `);
     });