Supports for tags in <Meta/>

storybookjs · Aug 30, 2023 · 5c86b26 · 5c86b26
1 parent c68b02c
commit 5c86b26
Show file tree

Hide file tree

Showing 5 changed files with 194 additions and 3 deletions.
diff --git a/src/index.d.ts b/src/index.d.ts
@@ -54,7 +54,24 @@ interface Slots {
 /**
  * Meta.
  */
-export class Meta extends SvelteComponent<BaseMeta<any> & BaseAnnotations<any, DecoratorReturnType>> { }
+export class Meta extends SvelteComponent<
+    BaseMeta<any> & BaseAnnotations<any, DecoratorReturnType> & {
+        /**
+         * Enable the tag 'autodocs'.
+         * 
+         * @see [Automatic documentation](https://storybook.js.org/docs/svelte/writing-docs/autodocs)
+         */
+        autodocs?: boolean;
+        /**
+         * List of tags to add to the stories.
+         * 
+         * It should be a static array of strings.
+         * 
+         * @example
+         *   tags={['autodocs']}
+         */
+        tags?: string[];
+    }> { }
 /**
  * Story.
  */

diff --git a/src/parser/extract-stories.test.ts b/src/parser/extract-stories.test.ts
@@ -229,6 +229,124 @@ describe('extractSource', () => {
       }
     `);
   });
+  test('Add tags autodocs', () => {
+    expect(
+      extractStories(`
+        <script>
+          import { Story, Meta } from '@storybook/addon-svelte-csf';
+        </script>
+
+        <Meta title='test' autodocs/>
+
+        <Story name="Story1">
+          <div>story 1</div>
+        </Story>
+        `)
+    ).toMatchInlineSnapshot(`
+      {
+        "allocatedIds": [
+          "default",
+          "Story",
+          "Meta",
+        ],
+        "meta": {
+          "id": undefined,
+          "tags": [
+            "autodocs",
+          ],
+          "title": "test",
+        },
+        "stories": {
+          "Story1": {
+            "hasArgs": false,
+            "name": "Story1",
+            "source": "<div>story 1</div>",
+            "storyId": "test--story-1",
+            "template": false,
+          },
+        },
+      }
+    `);
+  });
+  test('Add tags', () => {
+    expect(
+      extractStories(`
+        <script>
+          import { Story, Meta } from '@storybook/addon-svelte-csf';
+        </script>
+
+        <Meta title='test' tags={['a','b']}/>
+
+        <Story name="Story1">
+          <div>story 1</div>
+        </Story>
+        `)
+    ).toMatchInlineSnapshot(`
+      {
+        "allocatedIds": [
+          "default",
+          "Story",
+          "Meta",
+        ],
+        "meta": {
+          "id": undefined,
+          "tags": [
+            "a",
+            "b",
+          ],
+          "title": "test",
+        },
+        "stories": {
+          "Story1": {
+            "hasArgs": false,
+            "name": "Story1",
+            "source": "<div>story 1</div>",
+            "storyId": "test--story-1",
+            "template": false,
+          },
+        },
+      }
+    `);
+  });
+  test('Add Only one tag', () => {
+    expect(
+      extractStories(`
+        <script>
+          import { Story, Meta } from '@storybook/addon-svelte-csf';
+        </script>
+
+        <Meta title='test' tags='a'/>
+
+        <Story name="Story1">
+          <div>story 1</div>
+        </Story>
+        `)
+    ).toMatchInlineSnapshot(`
+      {
+        "allocatedIds": [
+          "default",
+          "Story",
+          "Meta",
+        ],
+        "meta": {
+          "id": undefined,
+          "tags": [
+            "a",
+          ],
+          "title": "test",
+        },
+        "stories": {
+          "Story1": {
+            "hasArgs": false,
+            "name": "Story1",
+            "source": "<div>story 1</div>",
+            "storyId": "test--story-1",
+            "template": false,
+          },
+        },
+      }
+    `);
+  });
   test('Duplicate Id', () => {
     expect(
       extractStories(`

diff --git a/src/parser/extract-stories.ts b/src/parser/extract-stories.ts
@@ -17,6 +17,7 @@ interface StoryDef {
 interface MetaDef {
   title?: string;
   id?: string;
+  tags?: string[];
 }
 
 interface StoriesDef {
@@ -44,6 +45,57 @@ function getStaticAttribute(name: string, node: any): string | undefined {
   throw new Error(`Attribute ${name} is not static`);
 }
 
+function getStaticBooleanAttribute(name: string, node: any): boolean | undefined {
+  // extract the attribute
+  const attribute = node.attributes.find(
+    (att: any) => att.type === 'Attribute' && att.name === name
+  );
+
+  if (!attribute) {
+    return undefined;
+  }
+
+  const { value } = attribute;
+
+  // expect the attribute to be static and a boolean
+  if (typeof value === 'boolean') {
+    return value;
+  }
+
+  throw new Error(`Attribute ${name} is not a static boolean`);
+}
+
+function getMetaTags(node: any): string[] {
+
+  const finalTags = getStaticBooleanAttribute('autodocs', node) ? ["autodocs"] : [];
+
+  const tags = node.attributes.find((att: any) => att.type === 'Attribute' && att.name === 'tags');
+  if (tags) {
+    let valid = false;
+
+    const { value } = tags;
+    if (value && value.length === 1 ) {
+      const { type, expression, data } = value[0];
+      if (type === 'Text') {
+        // tags="autodocs"
+        finalTags.push(data);
+        valid = true;
+      } else if (type === 'MustacheTag' && expression.type === 'ArrayExpression') {
+        // tags={["autodocs"]}
+        const { elements } = expression;
+        elements.forEach((e : any) => finalTags.push(e.value));
+        valid = true;
+      }
+    }
+
+    if (!valid) {
+      throw new Error('Attribute tags should be a static string array or a string');
+    }
+  }
+
+  return finalTags;
+}
+
 /**
  * Parse a Svelte component and extract stories.
  * @param component Component Source
@@ -143,6 +195,10 @@ export function extractStories(component: string): StoriesDef {
 
         meta.title = getStaticAttribute('title', node);
         meta.id = getStaticAttribute('id', node);
+        const tags = getMetaTags(node);
+        if (tags.length > 0) {
+          meta.tags = tags;
+        }
       }
     },
   });

diff --git a/src/preset/indexer.ts b/src/preset/indexer.ts
@@ -15,7 +15,7 @@ export async function svelteIndexer(fileName, { makeTitle }) {
   const defs = extractStories(code);
 
   return {
-    meta: { title: makeTitle(defs.meta.title) },
+    meta: { title: makeTitle(defs.meta.title), tags: defs.meta.tags },
     stories: Object.entries(defs.stories)
       .filter(([id, story]) => !story.template)
       .map(([id, story]) => ({

diff --git a/stories/button.stories.svelte b/stories/button.stories.svelte
@@ -9,7 +9,7 @@
   }
 </script>
 
-<Meta title="Button" component={Button}/>
+<Meta title="Button" component={Button} autodocs/>
 
 <Template let:args>
   <Button {...args} on:click={handleClick}>