WIP: CSF factories

code/.storybook/preview.tsx

@@ -17,6 +17,7 @@ import {
 import { DocsContext } from '@storybook/blocks';
 import { global } from '@storybook/global';
 import type { Decorator, Loader, ReactRenderer } from '@storybook/react';
+import { defineConfig } from '@storybook/react/preview';
 
 import { DocsPageWrapper } from '../lib/blocks/src/components';
 import { isChromatic } from './isChromatic';
@@ -361,3 +362,9 @@ export const parameters = {
 };
 
 export const tags = ['test', 'vitest', '!a11ytest'];
+
+export const config = defineConfig({
+  parameters,
+  tags,
+  decorators,
+});

code/addons/test/src/vitest-plugin/test-utils.ts

@@ -27,11 +27,12 @@ export const testStory = (
   return async (context: TestContext & TaskContext & { story: ComposedStoryFn }) => {
     const composedStory = composeStory(
       story,
-      meta,
+      'isCSFFactory' in story ? (meta as any).annotations : meta,
       { initialGlobals: (await getInitialGlobals?.()) ?? {} },
       undefined,
       exportName
     );
+
     if (composedStory === undefined || skipTags?.some((tag) => composedStory.tags.includes(tag))) {
       context.skip();
     }

code/builders/builder-vite/src/codegen-modern-iframe-script.ts

@@ -14,7 +14,7 @@ export async function generateModernIframeScriptCode(options: Options, projectRo
     [],
     options
   );
-  const previewAnnotationURLs = [...previewAnnotations, previewOrConfigFile]
+  const [previewFileUrl, ...previewAnnotationURLs] = [...previewAnnotations, previewOrConfigFile]
     .filter(Boolean)
     .map((path) => processPreviewAnnotation(path, projectRoot));
 
@@ -23,14 +23,23 @@ export async function generateModernIframeScriptCode(options: Options, projectRo
   // modules are provided, the rest are null.  We can just re-import everything again in that case.
   const getPreviewAnnotationsFunction = `
   const getProjectAnnotations = async (hmrPreviewAnnotationModules = []) => {
+    const preview = await import('${previewFileUrl}');
+    const csfFactoryPreview = Object.values(preview).find(module => {
+      return 'isCSFFactoryPreview' in module
+    });
+
+    if (csfFactoryPreview) {
+      return csfFactoryPreview.annotations;
+    }
+
     const configs = await Promise.all([${previewAnnotationURLs
       .map(
         (previewAnnotation, index) =>
           // Prefer the updated module from an HMR update, otherwise import the original module
           `hmrPreviewAnnotationModules[${index}] ?? import('${previewAnnotation}')`
       )
       .join(',\n')}])
-    return composeConfigs(configs);
+    return composeConfigs([...configs, preview]);
   }`;
 
   // eslint-disable-next-line @typescript-eslint/no-shadow

code/builders/builder-webpack5/templates/virtualModuleModernEntry.js

@@ -5,7 +5,21 @@ import { global } from '@storybook/global';
 
 import { importFn } from '{{storiesFilename}}';
 
-const getProjectAnnotations = () => composeConfigs(['{{previewAnnotations_requires}}']);
+const getProjectAnnotations = () => {
+  const previewAnnotations = ['{{previewAnnotations_requires}}'];
+  // the last one in this array is the user preview
+  const preview = previewAnnotations[previewAnnotations.length - 1];
+
+  const csfFactoryPreview = Object.values(preview).find((module) => {
+    return 'isCSFFactoryPreview' in module;
+  });
+
+  if (csfFactoryPreview) {
+    return csfFactoryPreview.annotations;
+  }
+
+  return composeConfigs(previewAnnotations);
+};
 
 const channel = createBrowserChannel({ page: 'preview' });
 addons.setChannel(channel);

code/core/src/components/components/Button/Button.stories.tsx

@@ -2,18 +2,17 @@ import type { ReactNode } from 'react';
 import React from 'react';
 
 import { FaceHappyIcon } from '@storybook/icons';
-import type { Meta, StoryObj } from '@storybook/react';
 
+import { config } from '../../../../../.storybook/preview';
 import { Button } from './Button';
 
-const meta = {
+// eslint-disable-next-line storybook/default-exports
+const meta = config.meta({
+  id: 'button-component',
   title: 'Button',
   component: Button,
   args: { children: 'Button' },
-} satisfies Meta<typeof Button>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
+});
 
 const Stack = ({ children }: { children: ReactNode }) => (
   <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>{children}</div>
@@ -23,9 +22,9 @@ const Row = ({ children }: { children: ReactNode }) => (
   <div style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}>{children}</div>
 );
 
-export const Base: Story = {};
+export const Base = meta.story({});
 
-export const Variants: Story = {
+export const Variants = meta.story({
   render: (args) => (
     <Stack>
       <Row>
@@ -63,125 +62,125 @@ export const Variants: Story = {
       </Row>
     </Stack>
   ),
-};
-
-export const Active: Story = {
-  args: {
-    active: true,
-    children: (
-      <>
-        <FaceHappyIcon />
-        Button
-      </>
-    ),
-  },
-  render: (args) => (
-    <Row>
-      <Button variant="solid" {...args} />
-      <Button variant="outline" {...args} />
-      <Button variant="ghost" {...args} />
-    </Row>
-  ),
-};
-
-export const WithIcon: Story = {
-  args: {
-    children: (
-      <>
-        <FaceHappyIcon />
-        Button
-      </>
-    ),
-  },
-  render: (args) => (
-    <Row>
-      <Button variant="solid" {...args} />
-      <Button variant="outline" {...args} />
-      <Button variant="ghost" {...args} />
-    </Row>
-  ),
-};
-
-export const IconOnly: Story = {
-  args: {
-    children: <FaceHappyIcon />,
-    padding: 'small',
-  },
-  render: (args) => (
-    <Row>
-      <Button variant="solid" {...args} />
-      <Button variant="outline" {...args} />
-      <Button variant="ghost" {...args} />
-    </Row>
-  ),
-};
+});
 
-export const Sizes: Story = {
-  render: () => (
-    <Row>
-      <Button size="small">Small Button</Button>
-      <Button size="medium">Medium Button</Button>
-    </Row>
-  ),
-};
-
-export const Disabled: Story = {
-  args: {
-    disabled: true,
-    children: 'Disabled Button',
-  },
-};
-
-export const WithHref: Story = {
-  render: () => (
-    <Row>
-      <Button onClick={() => console.log('Hello')}>I am a button using onClick</Button>
-      <Button asChild>
-        <a href="https://storybook.js.org/">I am an anchor using Href</a>
-      </Button>
-    </Row>
-  ),
-};
-
-export const Animated: Story = {
-  args: {
-    variant: 'outline',
-  },
-  render: (args) => (
-    <Stack>
-      <Row>
-        <Button animation="glow" {...args}>
-          Button
-        </Button>
-        <Button animation="jiggle" {...args}>
-          Button
-        </Button>
-        <Button animation="rotate360" {...args}>
-          Button
-        </Button>
-      </Row>
-      <Row>
-        <Button animation="glow" {...args}>
-          <FaceHappyIcon /> Button
-        </Button>
-        <Button animation="jiggle" {...args}>
-          <FaceHappyIcon /> Button
-        </Button>
-        <Button animation="rotate360" {...args}>
-          <FaceHappyIcon /> Button
-        </Button>
-      </Row>
-      <Row>
-        <Button animation="glow" padding="small" {...args}>
-          <FaceHappyIcon />
-        </Button>
-        <Button animation="jiggle" padding="small" {...args}>
-          <FaceHappyIcon />
-        </Button>
-        <Button animation="rotate360" padding="small" {...args}>
-          <FaceHappyIcon />
-        </Button>
-      </Row>
-    </Stack>
-  ),
-};
+// export const Active: Story = {
+//   args: {
+//     active: true,
+//     children: (
+//       <>
+//         <FaceHappyIcon />
+//         Button
+//       </>
+//     ),
+//   },
+//   render: (args) => (
+//     <Row>
+//       <Button variant="solid" {...args} />
+//       <Button variant="outline" {...args} />
+//       <Button variant="ghost" {...args} />
+//     </Row>
+//   ),
+// };
+//
+// export const WithIcon: Story = {
+//   args: {
+//     children: (
+//       <>
+//         <FaceHappyIcon />
+//         Button
+//       </>
+//     ),
+//   },
+//   render: (args) => (
+//     <Row>
+//       <Button variant="solid" {...args} />
+//       <Button variant="outline" {...args} />
+//       <Button variant="ghost" {...args} />
+//     </Row>
+//   ),
+// };
+//
+// export const IconOnly: Story = {
+//   args: {
+//     children: <FaceHappyIcon />,
+//     padding: 'small',
+//   },
+//   render: (args) => (
+//     <Row>
+//       <Button variant="solid" {...args} />
+//       <Button variant="outline" {...args} />
+//       <Button variant="ghost" {...args} />
+//     </Row>
+//   ),
+// };
+//
+// export const Sizes: Story = {
+//   render: () => (
+//     <Row>
+//       <Button size="small">Small Button</Button>
+//       <Button size="medium">Medium Button</Button>
+//     </Row>
+//   ),
+// };
+//
+// export const Disabled: Story = {
+//   args: {
+//     disabled: true,
+//     children: 'Disabled Button',
+//   },
+// };
+//
+// export const WithHref: Story = {
+//   render: () => (
+//     <Row>
+//       <Button onClick={() => console.log('Hello')}>I am a button using onClick</Button>
+//       <Button asChild>
+//         <a href="https://storybook.js.org/">I am an anchor using Href</a>
+//       </Button>
+//     </Row>
+//   ),
+// };
+//
+// export const Animated: Story = {
+//   args: {
+//     variant: 'outline',
+//   },
+//   render: (args) => (
+//     <Stack>
+//       <Row>
+//         <Button animation="glow" {...args}>
+//           Button
+//         </Button>
+//         <Button animation="jiggle" {...args}>
+//           Button
+//         </Button>
+//         <Button animation="rotate360" {...args}>
+//           Button
+//         </Button>
+//       </Row>
+//       <Row>
+//         <Button animation="glow" {...args}>
+//           <FaceHappyIcon /> Button
+//         </Button>
+//         <Button animation="jiggle" {...args}>
+//           <FaceHappyIcon /> Button
+//         </Button>
+//         <Button animation="rotate360" {...args}>
+//           <FaceHappyIcon /> Button
+//         </Button>
+//       </Row>
+//       <Row>
+//         <Button animation="glow" padding="small" {...args}>
+//           <FaceHappyIcon />
+//         </Button>
+//         <Button animation="jiggle" padding="small" {...args}>
+//           <FaceHappyIcon />
+//         </Button>
+//         <Button animation="rotate360" padding="small" {...args}>
+//           <FaceHappyIcon />
+//         </Button>
+//       </Row>
+//     </Stack>
+//   ),
+// };