Enable auto-title for non-storyStoreV7

storybookjs · Feb 17, 2022 · c89b67d · c89b67d
1 parent 0fa3956
commit c89b67d
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 6 deletions.
diff --git a/packages/example-react/.storybook/main.js b/packages/example-react/.storybook/main.js
@@ -6,7 +6,7 @@ module.exports = {
     builder: 'storybook-builder-vite',
   },
   features: {
-    storyStoreV7: true,
+    storyStoreV7: false,
   },
   async viteFinal(config, { configType }) {
     // customize the Vite config here

diff --git a/packages/example-react/stories/Button.stories.jsx b/packages/example-react/stories/Button.stories.jsx
@@ -1,7 +1,6 @@
 import { Button } from './Button';
 
 export default {
-  title: 'Example/Button',
   component: Button,
   argTypes: {
     backgroundColor: { control: 'color' },

diff --git a/packages/storybook-builder-vite/input/iframe.html b/packages/storybook-builder-vite/input/iframe.html
@@ -11,6 +11,7 @@
       window.FRAMEWORK_OPTIONS = '[FRAMEWORK_OPTIONS HERE]';
       window.CHANNEL_OPTIONS = '[CHANNEL_OPTIONS HERE]';
       window.FEATURES = '[FEATURES HERE]';
+      window.STORIES = '[STORIES HERE]';
       window.SERVER_CHANNEL_URL = '[SERVER_CHANNEL_URL HERE]';
 
       // We do this so that "module && module.hot" etc. in Storybook source code

diff --git a/packages/storybook-builder-vite/transform-iframe-html.ts b/packages/storybook-builder-vite/transform-iframe-html.ts
@@ -1,17 +1,23 @@
+import { normalizeStories } from '@storybook/core-common';
 import type { CoreConfig } from '@storybook/core-common';
 import type { ExtendedOptions } from './types';
 
 export type PreviewHtml = string | undefined;
 
-export async function transformIframeHtml(
-  html: string,
-  { configType, features, framework, presets, serverChannelUrl, title }: ExtendedOptions
-) {
+export async function transformIframeHtml(html: string, options: ExtendedOptions) {
+  const { configType, features, framework, presets, serverChannelUrl, title } = options;
   const headHtmlSnippet = await presets.apply<PreviewHtml>('previewHead');
   const bodyHtmlSnippet = await presets.apply<PreviewHtml>('previewBody');
   const logLevel = await presets.apply('logLevel', undefined);
   const frameworkOptions = await presets.apply(`${framework}Options`, {});
   const coreOptions = await presets.apply<CoreConfig>('core');
+  const stories = normalizeStories(await options.presets.apply('stories', [], options), {
+    configDir: options.configDir,
+    workingDir: process.cwd(),
+  }).map((specifier) => ({
+    ...specifier,
+    importPathMatcher: specifier.importPathMatcher.source,
+  }));
 
   return html
     .replace('<!-- [TITLE HERE] -->', title || 'Storybook')
@@ -23,6 +29,7 @@ export async function transformIframeHtml(
       JSON.stringify(coreOptions && coreOptions.channelOptions ? coreOptions.channelOptions : {})
     )
     .replace(`'[FEATURES HERE]'`, JSON.stringify(features || {}))
+    .replace(`'[STORIES HERE]'`, JSON.stringify(stories || {}))
     .replace(`'[SERVER_CHANNEL_URL HERE]'`, JSON.stringify(serverChannelUrl))
     .replace('<!-- [HEAD HTML SNIPPET HERE] -->', headHtmlSnippet || '')
     .replace('<!-- [BODY HTML SNIPPET HERE] -->', bodyHtmlSnippet || '');