Merge pull request #23638 from joaonunomota/story-ts-parse

CSF-tools: Parse stories using typescript keywords 'satisfies' and 'as'
storybookjs · Jul 28, 2023 · 39ef76c · 39ef76c
2 parents d8d8cac + 8783f96
commit 39ef76c
Show file tree

Hide file tree

Showing 2 changed files with 57 additions and 13 deletions.
diff --git a/code/lib/csf-tools/src/CsfFile.test.ts b/code/lib/csf-tools/src/CsfFile.test.ts
@@ -228,21 +228,57 @@ describe('CsfFile', () => {
       expect(
         parse(
           dedent`
-          import type { Meta, StoryFn } from '@storybook/react';
+          import type { Meta, StoryFn, StoryObj } from '@storybook/react';
           type PropTypes = {};
-          export default { title: 'foo/bar/baz' } as Meta<PropTypes>;
-          export const A: StoryFn<PropTypes> = () => <>A</>;
-          export const B: StoryFn<PropTypes> = () => <>B</>;
-        `
+          export default { title: 'foo/bar' } satisfies Meta<PropTypes>;
+          export const A = { name: 'AA' } satisfies StoryObj<PropTypes>;
+          export const B = ((args) => {}) satisfies StoryFn<PropTypes>;
+        `,
+          true
         )
       ).toMatchInlineSnapshot(`
         meta:
-          title: foo/bar/baz
+          title: foo/bar
         stories:
-          - id: foo-bar-baz--a
-            name: A
-          - id: foo-bar-baz--b
+          - id: foo-bar--a
+            name: AA
+            parameters:
+              __isArgsStory: true
+              __id: foo-bar--a
+          - id: foo-bar--b
             name: B
+            parameters:
+              __isArgsStory: true
+              __id: foo-bar--b
+      `);
+    });
+
+    it('typescript as', () => {
+      expect(
+        parse(
+          dedent`
+          import type { Meta, StoryFn, StoryObj } from '@storybook/react';
+          type PropTypes = {};
+          export default { title: 'foo/bar' } as Meta<PropTypes>;
+          export const A = { name: 'AA' } as StoryObj<PropTypes>;
+          export const B = ((args) => {}) as StoryFn<PropTypes>;
+        `,
+          true
+        )
+      ).toMatchInlineSnapshot(`
+        meta:
+          title: foo/bar
+        stories:
+          - id: foo-bar--a
+            name: AA
+            parameters:
+              __isArgsStory: true
+              __id: foo-bar--a
+          - id: foo-bar--b
+            name: B
+            parameters:
+              __isArgsStory: true
+              __id: foo-bar--b
       `);
     });
 

diff --git a/code/lib/csf-tools/src/CsfFile.ts b/code/lib/csf-tools/src/CsfFile.ts
@@ -317,12 +317,21 @@ export class CsfFile {
                 } else {
                   self._storyAnnotations[exportName] = {};
                 }
+                let storyNode;
+                if (t.isVariableDeclarator(decl)) {
+                  storyNode =
+                    t.isTSAsExpression(decl.init) || t.isTSSatisfiesExpression(decl.init)
+                      ? decl.init.expression
+                      : decl.init;
+                } else {
+                  storyNode = decl;
+                }
                 let parameters;
-                if (t.isVariableDeclarator(decl) && t.isObjectExpression(decl.init)) {
+                if (t.isObjectExpression(storyNode)) {
                   // eslint-disable-next-line @typescript-eslint/naming-convention
                   let __isArgsStory = true; // assume default render is an args story
                   // CSF3 object export
-                  (decl.init.properties as t.ObjectProperty[]).forEach((p) => {
+                  (storyNode.properties as t.ObjectProperty[]).forEach((p) => {
                     if (t.isIdentifier(p.key)) {
                       if (p.key.name === 'render') {
                         __isArgsStory = isArgsStory(p.value as t.Expression, parent, self);
@@ -338,11 +347,10 @@ export class CsfFile {
                   });
                   parameters = { __isArgsStory };
                 } else {
-                  const fn = t.isVariableDeclarator(decl) ? decl.init : decl;
                   parameters = {
                     // __id: toId(self._meta.title, name),
                     // FIXME: Template.bind({});
-                    __isArgsStory: isArgsStory(fn as t.Node, parent, self),
+                    __isArgsStory: isArgsStory(storyNode as t.Node, parent, self),
                   };
                 }
                 self._stories[exportName] = {