Add support for autotitle

storybookjs · Sep 1, 2023 · 4d942cf · 4d942cf
1 parent c48e985
commit 4d942cf
Show file tree

Hide file tree

Showing 5 changed files with 11 additions and 22 deletions.
diff --git a/.storybook/main.ts b/.storybook/main.ts
@@ -2,13 +2,16 @@ import type { StorybookConfig } from '@storybook/svelte-vite';
 
 const config: StorybookConfig = {
   framework: '@storybook/svelte-vite',
-  stories: [
-    '../stories/**/*.stories.svelte',
-  ],
+  stories: [{
+      directory: '../stories',
+      files:'**/*.stories.svelte',
+      titlePrefix:'Demo'
+    }],
   addons: [
     '../dist/preset/index.js',
     '@storybook/addon-essentials',
     '@storybook/addon-interactions',
   ],
+
 };
 export default config;
diff --git a/src/parser/extract-stories.test.ts b/src/parser/extract-stories.test.ts
@@ -26,7 +26,6 @@ describe('extractSource', () => {
             "hasArgs": false,
             "name": "MyStory",
             "source": "<div>a story</div>",
-            "storyId": "mystory--my-story",
             "template": false,
           },
         },
@@ -56,7 +55,6 @@ describe('extractSource', () => {
             "hasArgs": false,
             "name": "MyStory",
             "source": "<div>a story</div>",
-            "storyId": "myid--my-id",
             "template": false,
           },
         },
@@ -86,7 +84,6 @@ describe('extractSource', () => {
             "hasArgs": true,
             "name": "MyStory",
             "source": "<div>a story</div>",
-            "storyId": "mystory--my-story",
             "template": false,
           },
         },
@@ -116,7 +113,6 @@ describe('extractSource', () => {
             "hasArgs": false,
             "name": "MyTemplate",
             "source": "<div>a template</div>",
-            "storyId": "mytemplate--my-template",
             "template": true,
           },
         },
@@ -146,7 +142,6 @@ describe('extractSource', () => {
             "hasArgs": false,
             "name": "default",
             "source": "<div>a template</div>",
-            "storyId": "default--default",
             "template": true,
           },
         },
@@ -179,14 +174,12 @@ describe('extractSource', () => {
             "hasArgs": false,
             "name": "Story1",
             "source": "<div>story 1</div>",
-            "storyId": "story1--story-1",
             "template": false,
           },
           "Story2": {
             "hasArgs": false,
             "name": "Story2",
             "source": "<div>story 2</div>",
-            "storyId": "story2--story-2",
             "template": false,
           },
         },
@@ -222,7 +215,6 @@ describe('extractSource', () => {
             "hasArgs": false,
             "name": "Story1",
             "source": "<div>story 1</div>",
-            "storyId": "test--story-1",
             "template": false,
           },
         },
@@ -261,7 +253,6 @@ describe('extractSource', () => {
             "hasArgs": false,
             "name": "Story1",
             "source": "<div>story 1</div>",
-            "storyId": "test--story-1",
             "template": false,
           },
         },
@@ -301,7 +292,6 @@ describe('extractSource', () => {
             "hasArgs": false,
             "name": "Story1",
             "source": "<div>story 1</div>",
-            "storyId": "test--story-1",
             "template": false,
           },
         },
@@ -340,7 +330,6 @@ describe('extractSource', () => {
             "hasArgs": false,
             "name": "Story1",
             "source": "<div>story 1</div>",
-            "storyId": "test--story-1",
             "template": false,
           },
         },
@@ -398,7 +387,6 @@ describe('extractSource', () => {
             "hasArgs": false,
             "name": "Button",
             "source": "<div>a story</div>",
-            "storyId": "button77471352--button-77471352",
             "template": false,
           },
         },

diff --git a/src/parser/extract-stories.ts b/src/parser/extract-stories.ts
@@ -1,13 +1,10 @@
 import * as svelte from 'svelte/compiler';
 import type { Node } from 'estree';
 
-import { storyNameFromExport, toId } from '@storybook/csf';
-
 import dedent from 'dedent';
 import { extractId } from './extract-id.js';
 
 interface StoryDef {
-  storyId: string;
   name: string;
   template: boolean;
   source: string;
@@ -228,7 +225,6 @@ export function extractStories(component: string): StoriesDef {
             source = dedent`${component.substr(start, end - start)}`;
           }
           stories[isTemplate ? `tpl:${id}` : id] = {
-            storyId: toId(meta.id || meta.title || id, storyNameFromExport(id)),
             name,
             template: isTemplate,
             source,

diff --git a/src/preset/indexer.ts b/src/preset/indexer.ts
@@ -3,6 +3,7 @@ import * as svelte from 'svelte/compiler';
 import { extractStories } from '../parser/extract-stories.js';
 import fs from 'fs-extra';
 import { loadSvelteConfig } from '../config-loader.js';
+import { storyNameFromExport, toId } from '@storybook/csf';
 
 export async function svelteIndexer(fileName, { makeTitle }) {
   let code = (await fs.readFile(fileName, 'utf-8')).toString();
@@ -14,12 +15,13 @@ export async function svelteIndexer(fileName, { makeTitle }) {
 
   const defs = extractStories(code);
 
+  const meta = { ...defs.meta, title: makeTitle(defs.meta.title) }
   return {
-    meta: { title: makeTitle(defs.meta.title), tags: defs.meta.tags },
+    meta,
     stories: Object.entries(defs.stories)
       .filter(([id, story]) => !story.template)
       .map(([id, story]) => ({
-        id: story.storyId,
+        id: toId(meta.id || meta.title || id, storyNameFromExport(id)),
         name: story.name,
       })),
   };

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