CSF: Fix play-fn tag for methods

Author: shilman

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

@@ -1788,6 +1788,67 @@ describe('CsfFile', () => {
       `);
     });
 
+    it('play method', () => {
+      expect(
+        parse(
+          dedent`
+          export default { title: 'foo/bar' };
+          export const A = {
+            play({ context }) {},
+          };
+        `
+        )
+      ).toMatchInlineSnapshot(`
+        meta:
+          title: foo/bar
+        stories:
+          - id: foo-bar--a
+            name: A
+            __stats:
+              factory: false
+              play: true
+              render: false
+              loaders: false
+              beforeEach: false
+              globals: false
+              tags: false
+              storyFn: false
+              mount: false
+              moduleMock: false
+            tags:
+              - play-fn
+      `);
+    });
+
+    it('meta play method', () => {
+      expect(
+        parse(
+          dedent`
+          export default { title: 'foo/bar', play({ context }) {} };
+          export const A = {};`
+        )
+      ).toMatchInlineSnapshot(`
+        meta:
+          title: foo/bar
+          tags:
+            - play-fn
+        stories:
+          - id: foo-bar--a
+            name: A
+            __stats:
+              factory: false
+              play: true
+              render: false
+              loaders: false
+              beforeEach: false
+              globals: false
+              tags: false
+              storyFn: false
+              mount: false
+              moduleMock: false
+      `);
+    });
+
     it('mount', () => {
       expect(
         parse(

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

@@ -348,7 +348,8 @@ export class CsfFile {
     const meta: StaticMeta = {};
     (declaration.properties as t.ObjectProperty[]).forEach((p) => {
       if (t.isIdentifier(p.key)) {
-        this._metaAnnotations[p.key.name] = p.value;
+        const value = t.isObjectMethod(p) ? p : p.value;
+        this._metaAnnotations[p.key.name] = value;
 
         if (p.key.name === 'title') {
           meta.title = this._parseTitle(p.value);
@@ -598,30 +599,35 @@ export class CsfFile {
                   // CSF3 object export
                   (storyNode.properties as t.ObjectProperty[]).forEach((p) => {
                     if (t.isIdentifier(p.key)) {
-                      if (p.key.name === 'render') {
-                        parameters.__isArgsStory = isArgsStory(
-                          p.value as t.Expression,
-                          parent,
-                          self
-                        );
-                      } else if (p.key.name === 'name' && t.isStringLiteral(p.value)) {
-                        name = p.value.value;
-                      } else if (p.key.name === 'storyName' && t.isStringLiteral(p.value)) {
-                        logger.warn(
-                          `Unexpected usage of "storyName" in "${exportName}". Please use "name" instead.`
-                        );
-                      } else if (p.key.name === 'parameters' && t.isObjectExpression(p.value)) {
-                        const idProperty = p.value.properties.find(
-                          (property) =>
-                            t.isObjectProperty(property) &&
-                            t.isIdentifier(property.key) &&
-                            property.key.name === '__id'
-                        ) as t.ObjectProperty | undefined;
-                        if (idProperty) {
-                          parameters.__id = (idProperty.value as t.StringLiteral).value;
+                      const key = p.key.name;
+                      if (t.isObjectMethod(p)) {
+                        self._storyAnnotations[exportName][key] = p;
+                      } else {
+                        if (p.key.name === 'render') {
+                          parameters.__isArgsStory = isArgsStory(
+                            p.value as t.Expression,
+                            parent,
+                            self
+                          );
+                        } else if (p.key.name === 'name' && t.isStringLiteral(p.value)) {
+                          name = p.value.value;
+                        } else if (p.key.name === 'storyName' && t.isStringLiteral(p.value)) {
+                          logger.warn(
+                            `Unexpected usage of "storyName" in "${exportName}". Please use "name" instead.`
+                          );
+                        } else if (p.key.name === 'parameters' && t.isObjectExpression(p.value)) {
+                          const idProperty = p.value.properties.find(
+                            (property) =>
+                              t.isObjectProperty(property) &&
+                              t.isIdentifier(property.key) &&
+                              property.key.name === '__id'
+                          ) as t.ObjectProperty | undefined;
+                          if (idProperty) {
+                            parameters.__id = (idProperty.value as t.StringLiteral).value;
+                          }
                         }
+                        self._storyAnnotations[exportName][p.key.name] = p.value;
                       }
-                      self._storyAnnotations[exportName][p.key.name] = p.value;
                     }
                   });
                 } else {