Merge remote-tracking branch 'origin/kasper/csf-factories' into kasper/csf-factories

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/core/src/components/components/Button/Button.stories.tsx

@@ -2,7 +2,6 @@ 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';

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

@@ -679,7 +679,7 @@ export class CsfFile {
             if (t.isImportDeclaration(configParent)) {
               if (isValidPreviewPath(configParent.source.value)) {
                 const metaNode = node.arguments[0] as t.ObjectExpression;
-                self._metaVariableName = callee.object.name;
+                self._metaVariableName = callee.property.name;
                 self._metaIsFactory = true;
                 self._parseMeta(metaNode, self._ast.program);
               } else {

code/core/src/preview-api/modules/store/csf/portable-stories.ts

@@ -275,7 +275,13 @@ export function composeStories<TModule extends Store_CSFExports>(
   globalConfig: ProjectAnnotations<Renderer>,
   composeStoryFn: ComposeStoryFn = defaultComposeStory
 ) {
-  const { default: meta, __esModule, __namedExportsOrder, ...stories } = storiesImport;
+  const { default: metaExport, __esModule, __namedExportsOrder, ...stories } = storiesImport;
+  let meta = metaExport;
+  const firstStory = Object.values(stories)[0] as any;
+  if (!meta && 'isCSFFactory' in firstStory) {
+    meta = firstStory.meta.annotations;
+  }
+
   const composedStories = Object.entries(stories).reduce((storiesMap, [exportsName, story]) => {
     if (!isExportStory(exportsName, meta)) {
       return storiesMap;

code/renderers/react/src/__test__/Button.csf4.stories.tsx

@@ -0,0 +1,288 @@
+import React, { useEffect, useState } from 'react';
+import { createPortal } from 'react-dom';
+
+import { expect, fn, mocked, userEvent, within } from '@storybook/test';
+
+import { action } from '@storybook/addon-actions';
+
+import { defineConfig } from '../preview';
+import { Button } from './Button';
+
+// eslint-disable-next-line storybook/default-exports
+const config = defineConfig({ args: { children: 'TODO: THIS IS NOT WORKING YET' } });
+
+const meta = config.meta({
+  id: 'button-component',
+  title: 'Example/CSF4/Button',
+  component: Button,
+  argTypes: {
+    backgroundColor: { control: 'color' },
+  },
+  args: {},
+});
+
+export const CSF2Secondary = meta.story({
+  render: (args) => {
+    return <Button {...args} />;
+  },
+  args: {
+    children: 'Children coming from story args!',
+    primary: false,
+  },
+});
+
+const getCaptionForLocale = (locale: string) => {
+  switch (locale) {
+    case 'es':
+      return 'Hola!';
+    case 'fr':
+      return 'Bonjour!';
+    case 'kr':
+      return '안녕하세요!';
+    case 'pt':
+      return 'Olá!';
+    case 'en':
+      return 'Hello!';
+    default:
+      return undefined;
+  }
+};
+
+export const CSF2StoryWithLocale = meta.story({
+  render: (args, { globals: { locale } }) => {
+    const caption = getCaptionForLocale(locale);
+    return (
+      <>
+        <p>locale: {locale}</p>
+        <Button>{caption}</Button>
+      </>
+    );
+  },
+  name: 'WithLocale',
+});
+
+export const CSF2StoryWithParamsAndDecorator = meta.story({
+  render: (args: any) => {
+    return <Button {...args} />;
+  },
+  args: {
+    children: 'foo',
+  },
+  parameters: {
+    layout: 'centered',
+  },
+  decorators: (StoryFn) => <StoryFn />,
+});
+
+export const CSF3Primary = meta.story({
+  args: {
+    children: 'foo',
+    size: 'large',
+    primary: true,
+  },
+});
+
+export const CSF3Button = meta.story({
+  args: { children: 'foo' },
+});
+
+export const CSF3ButtonWithRender = meta.story({
+  ...CSF3Button,
+  render: (args: any) => (
+    <div>
+      <p data-testid="custom-render">I am a custom render function</p>
+      <Button {...args} />
+    </div>
+  ),
+});
+
+export const HooksStory = meta.story({
+  render: function Component() {
+    const [isClicked, setClicked] = useState(false);
+    return (
+      <>
+        <input data-testid="input" />
+        <br />
+        <button onClick={() => setClicked(!isClicked)}>
+          I am {isClicked ? 'clicked' : 'not clicked'}
+        </button>
+      </>
+    );
+  },
+  play: async ({ canvasElement, step }) => {
+    const canvas = within(canvasElement);
+    await step('Step label', async () => {
+      const inputEl = canvas.getByTestId('input');
+      const buttonEl = canvas.getByRole('button');
+      await userEvent.click(buttonEl);
+      await userEvent.type(inputEl, 'Hello world!');
+
+      await expect(inputEl).toHaveValue('Hello world!');
+      await expect(buttonEl).toHaveTextContent('I am clicked');
+    });
+  },
+});
+
+export const CSF3InputFieldFilled = meta.story({
+  render: () => {
+    return <input data-testid="input" />;
+  },
+  play: async ({ canvasElement, step }) => {
+    const canvas = within(canvasElement);
+    await step('Step label', async () => {
+      const inputEl = canvas.getByTestId('input');
+      await userEvent.type(inputEl, 'Hello world!');
+      await expect(inputEl).toHaveValue('Hello world!');
+    });
+  },
+});
+
+const mockFn = fn();
+export const LoaderStory = meta.story({
+  args: {
+    mockFn,
+  },
+  loaders: [
+    async () => {
+      mockFn.mockReturnValueOnce('mockFn return value');
+      return {
+        value: 'loaded data',
+      };
+    },
+  ],
+  render: (args: any & { mockFn: (val: string) => string }, { loaded }) => {
+    const data = args.mockFn('render');
+    return (
+      <div>
+        <div data-testid="loaded-data">{loaded.value}</div>
+        <div data-testid="spy-data">{String(data)}</div>
+      </div>
+    );
+  },
+  play: async () => {
+    expect(mockFn).toHaveBeenCalledWith('render');
+  },
+});
+
+export const MountInPlayFunction = meta.story({
+  args: {
+    mockFn: fn(),
+  },
+  play: async ({ args, mount, context }: any) => {
+    // equivalent of loaders
+    const loadedData = await Promise.resolve('loaded data');
+    mocked(args.mockFn).mockReturnValueOnce('mockFn return value');
+    // equivalent of render
+    const data = args.mockFn('render');
+    // TODO refactor this in the mount args PR
+    context.originalStoryFn = () => (
+      <div>
+        <div data-testid="loaded-data">{loadedData}</div>
+        <div data-testid="spy-data">{String(data)}</div>
+      </div>
+    );
+    await mount();
+
+    // equivalent of play
+    expect(args.mockFn).toHaveBeenCalledWith('render');
+  },
+});
+
+export const MountInPlayFunctionThrow = meta.story({
+  play: async () => {
+    throw new Error('Error thrown in play');
+  },
+});
+
+export const WithActionArg = meta.story({
+  args: {
+    someActionArg: action('some-action-arg'),
+  },
+  render: (args: any) => {
+    args.someActionArg('in render');
+    return (
+      <button
+        onClick={() => {
+          args.someActionArg('on click');
+        }}
+      />
+    );
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const buttonEl = await canvas.getByRole('button');
+    await buttonEl.click();
+  },
+});
+
+export const WithActionArgType = meta.story({
+  argTypes: {
+    someActionArg: {
+      action: true,
+    },
+  },
+  render: () => {
+    return <div>nothing</div>;
+  },
+});
+
+export const Modal = meta.story({
+  render: function Component() {
+    const [isModalOpen, setIsModalOpen] = useState(false);
+    const [modalContainer] = useState(() => {
+      const div = document.createElement('div');
+      div.id = 'modal-root';
+      return div;
+    });
+
+    useEffect(() => {
+      document.body.appendChild(modalContainer);
+      return () => {
+        document.body.removeChild(modalContainer);
+      };
+    }, [modalContainer]);
+
+    const handleOpenModal = () => setIsModalOpen(true);
+    const handleCloseModal = () => setIsModalOpen(false);
+
+    const modalContent = isModalOpen
+      ? createPortal(
+          <div
+            role="dialog"
+            style={{
+              position: 'fixed',
+              top: '20%',
+              left: '50%',
+              transform: 'translate(-50%, -20%)',
+              backgroundColor: 'white',
+              padding: '20px',
+              zIndex: 1000,
+              border: '2px solid black',
+              borderRadius: '5px',
+            }}
+          >
+            <div style={{ marginBottom: '10px' }}>
+              <p>This is a modal!</p>
+            </div>
+            <button onClick={handleCloseModal}>Close</button>
+          </div>,
+          modalContainer
+        )
+      : null;
+
+    return (
+      <>
+        <button id="openModalButton" onClick={handleOpenModal}>
+          Open Modal
+        </button>
+        {modalContent}
+      </>
+    );
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const openModalButton = await canvas.getByRole('button', { name: /open modal/i });
+    await userEvent.click(openModalButton);
+    await expect(within(document.body).getByRole('dialog')).toBeInTheDocument();
+  },
+});

code/renderers/react/src/__test__/__snapshots__/portable-stories-factory.test.tsx.snap

@@ -0,0 +1,185 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Renders CSF2Secondary story 1`] = `
+<body>
+  <div>
+    <button
+      class="storybook-button storybook-button--medium storybook-button--secondary"
+      type="button"
+    >
+      Children coming from story args!
+    </button>
+  </div>
+</body>
+`;
+
+exports[`Renders CSF2StoryWithParamsAndDecorator story 1`] = `
+<body>
+  <div>
+    <button
+      class="storybook-button storybook-button--medium storybook-button--secondary"
+      type="button"
+    >
+      foo
+    </button>
+  </div>
+</body>
+`;
+
+exports[`Renders CSF3Button story 1`] = `
+<body>
+  <div>
+    <button
+      class="storybook-button storybook-button--medium storybook-button--secondary"
+      type="button"
+    >
+      foo
+    </button>
+  </div>
+</body>
+`;
+
+exports[`Renders CSF3ButtonWithRender story 1`] = `
+<body>
+  <div>
+    <div>
+      <p
+        data-testid="custom-render"
+      >
+        I am a custom render function
+      </p>
+      <button
+        class="storybook-button storybook-button--medium storybook-button--secondary"
+        type="button"
+      >
+        foo
+      </button>
+    </div>
+  </div>
+</body>
+`;
+
+exports[`Renders CSF3InputFieldFilled story 1`] = `
+<body>
+  <div>
+    <input
+      data-testid="input"
+    />
+  </div>
+</body>
+`;
+
+exports[`Renders CSF3Primary story 1`] = `
+<body>
+  <div>
+    <button
+      class="storybook-button storybook-button--large storybook-button--primary"
+      type="button"
+    >
+      foo
+    </button>
+  </div>
+</body>
+`;
+
+exports[`Renders HooksStory story 1`] = `
+<body>
+  <div>
+    <input
+      data-testid="input"
+    />
+    <br />
+    <button>
+      I am 
+      clicked
+    </button>
+  </div>
+</body>
+`;
+
+exports[`Renders LoaderStory story 1`] = `
+<body>
+  <div>
+    <div>
+      <div
+        data-testid="loaded-data"
+      >
+        loaded data
+      </div>
+      <div
+        data-testid="spy-data"
+      >
+        mockFn return value
+      </div>
+    </div>
+  </div>
+</body>
+`;
+
+exports[`Renders Modal story 1`] = `
+<body>
+  <div>
+    <button
+      id="openModalButton"
+    >
+      Open Modal
+    </button>
+  </div>
+  <div
+    id="modal-root"
+  >
+    <div
+      role="dialog"
+      style="position: fixed; top: 20%; left: 50%; transform: translate(-50%, -20%); background-color: white; padding: 20px; z-index: 1000; border: 2px solid black; border-radius: 5px;"
+    >
+      <div
+        style="margin-bottom: 10px;"
+      >
+        <p>
+          This is a modal!
+        </p>
+      </div>
+      <button>
+        Close
+      </button>
+    </div>
+  </div>
+</body>
+`;
+
+exports[`Renders MountInPlayFunction story 1`] = `
+<body>
+  <div>
+    <div>
+      <div
+        data-testid="loaded-data"
+      >
+        loaded data
+      </div>
+      <div
+        data-testid="spy-data"
+      >
+        mockFn return value
+      </div>
+    </div>
+  </div>
+</body>
+`;
+
+exports[`Renders WithActionArg story 1`] = `
+<body>
+  <div>
+    <button />
+  </div>
+</body>
+`;
+
+exports[`Renders WithActionArgType story 1`] = `
+<body>
+  <div>
+    <div>
+      nothing
+    </div>
+  </div>
+</body>
+`;

code/renderers/react/src/__test__/portable-stories-factory.test.tsx

@@ -0,0 +1,247 @@
+// @vitest-environment happy-dom
+
+/* eslint-disable import/namespace */
+import { cleanup, render, screen } from '@testing-library/react';
+import { afterEach, beforeAll, describe, expect, it, vi } from 'vitest';
+
+import React from 'react';
+
+import { addons } from 'storybook/internal/preview-api';
+
+import type { ProjectAnnotations } from '@storybook/csf';
+import type { Meta, ReactRenderer } from '@storybook/react';
+
+import * as addonActionsPreview from '@storybook/addon-actions/preview';
+
+import { expectTypeOf } from 'expect-type';
+
+import { composeStories, composeStory, setProjectAnnotations } from '..';
+import type { Button } from './Button';
+import * as ButtonStories from './Button.csf4.stories';
+import * as ComponentWithErrorStories from './ComponentWithError.stories';
+
+const HooksStory = composeStory(
+  ButtonStories.HooksStory,
+  ButtonStories.CSF3Primary.meta.annotations
+);
+
+const projectAnnotations = setProjectAnnotations([]);
+
+// example with composeStories, returns an object with all stories composed with args/decorators
+const { CSF3Primary, LoaderStory, MountInPlayFunction, MountInPlayFunctionThrow } =
+  composeStories(ButtonStories);
+const { ThrowsError } = composeStories(ComponentWithErrorStories);
+
+beforeAll(async () => {
+  await projectAnnotations.beforeAll?.();
+});
+
+afterEach(() => {
+  cleanup();
+});
+
+// example with composeStory, returns a single story composed with args/decorators
+const Secondary = composeStory(
+  ButtonStories.CSF2Secondary,
+  ButtonStories.CSF3Primary.meta.annotations
+);
+describe('renders', () => {
+  it('renders primary button', () => {
+    render(<CSF3Primary>Hello world</CSF3Primary>);
+    const buttonElement = screen.getByText(/Hello world/i);
+    expect(buttonElement).not.toBeNull();
+  });
+
+  it('reuses args from composed story', () => {
+    render(<Secondary />);
+    const buttonElement = screen.getByRole('button');
+    expect(buttonElement.textContent).toEqual(Secondary.args.children);
+  });
+
+  it('onclick handler is called', async () => {
+    const onClickSpy = vi.fn();
+    render(<Secondary onClick={onClickSpy} />);
+    const buttonElement = screen.getByRole('button');
+    buttonElement.click();
+    expect(onClickSpy).toHaveBeenCalled();
+  });
+
+  it('reuses args from composeStories', () => {
+    const { getByText } = render(<CSF3Primary />);
+    const buttonElement = getByText(/foo/i);
+    expect(buttonElement).not.toBeNull();
+  });
+
+  it('should throw error when rendering a component with a render error', async () => {
+    await expect(() => ThrowsError.run()).rejects.toThrowError('Error in render');
+  });
+
+  it('should render component mounted in play function', async () => {
+    await MountInPlayFunction.run();
+
+    expect(screen.getByTestId('spy-data').textContent).toEqual('mockFn return value');
+    expect(screen.getByTestId('loaded-data').textContent).toEqual('loaded data');
+  });
+
+  it('should throw an error in play function', () => {
+    expect(() => MountInPlayFunctionThrow.run()).rejects.toThrowError('Error thrown in play');
+  });
+
+  it('should call and compose loaders data', async () => {
+    await LoaderStory.load();
+    const { getByTestId } = render(<LoaderStory />);
+    expect(getByTestId('spy-data').textContent).toEqual('mockFn return value');
+    expect(getByTestId('loaded-data').textContent).toEqual('loaded data');
+    // spy assertions happen in the play function and should work
+    await LoaderStory.run!();
+  });
+});
+
+describe('projectAnnotations', () => {
+  it('renders with default projectAnnotations', () => {
+    setProjectAnnotations([
+      {
+        parameters: { injected: true },
+        globalTypes: {
+          locale: { defaultValue: 'en' },
+        },
+      },
+    ]);
+    const WithEnglishText = composeStory(
+      ButtonStories.CSF2StoryWithLocale,
+      ButtonStories.CSF3Primary.meta.annotations
+    );
+    const { getByText } = render(<WithEnglishText />);
+    const buttonElement = getByText('Hello!');
+    expect(buttonElement).not.toBeNull();
+    expect(WithEnglishText.parameters?.injected).toBe(true);
+  });
+
+  it('renders with custom projectAnnotations via composeStory params', () => {
+    const WithPortugueseText = composeStory(
+      ButtonStories.CSF2StoryWithLocale,
+      ButtonStories.CSF3Primary.meta.annotations,
+      {
+        initialGlobals: { locale: 'pt' },
+      }
+    );
+    const { getByText } = render(<WithPortugueseText />);
+    const buttonElement = getByText('Olá!');
+    expect(buttonElement).not.toBeNull();
+  });
+
+  it('has action arg from argTypes when addon-actions annotations are added', () => {
+    const Story = composeStory(
+      ButtonStories.WithActionArgType,
+      ButtonStories.CSF3Primary.meta.annotations,
+      addonActionsPreview as ProjectAnnotations<ReactRenderer>
+    );
+    expect(Story.args.someActionArg).toHaveProperty('isAction', true);
+  });
+});
+
+describe('CSF3', () => {
+  it('renders with inferred globalRender', () => {
+    const Primary = composeStory(
+      ButtonStories.CSF3Button,
+      ButtonStories.CSF3Primary.meta.annotations
+    );
+
+    render(<Primary>Hello world</Primary>);
+    const buttonElement = screen.getByText(/Hello world/i);
+    expect(buttonElement).not.toBeNull();
+  });
+
+  it('renders with custom render function', () => {
+    const Primary = composeStory(
+      ButtonStories.CSF3ButtonWithRender,
+      ButtonStories.CSF3Primary.meta.annotations
+    );
+
+    render(<Primary />);
+    expect(screen.getByTestId('custom-render')).not.toBeNull();
+  });
+
+  it('renders with play function without canvas element', async () => {
+    const CSF3InputFieldFilled = composeStory(
+      ButtonStories.CSF3InputFieldFilled,
+      ButtonStories.CSF3Primary.meta.annotations
+    );
+    await CSF3InputFieldFilled.run();
+
+    const input = screen.getByTestId('input') as HTMLInputElement;
+    expect(input.value).toEqual('Hello world!');
+  });
+
+  it('renders with play function with canvas element', async () => {
+    const CSF3InputFieldFilled = composeStory(
+      ButtonStories.CSF3InputFieldFilled,
+      ButtonStories.CSF3Primary.meta.annotations
+    );
+
+    const div = document.createElement('div');
+    document.body.appendChild(div);
+
+    await CSF3InputFieldFilled.run({ canvasElement: div });
+
+    const input = screen.getByTestId('input') as HTMLInputElement;
+    expect(input.value).toEqual('Hello world!');
+
+    document.body.removeChild(div);
+  });
+
+  it('renders with hooks', async () => {
+    await HooksStory.run();
+
+    const input = screen.getByTestId('input') as HTMLInputElement;
+    expect(input.value).toEqual('Hello world!');
+  });
+});
+
+// common in addons that need to communicate between manager and preview
+it('should pass with decorators that need addons channel', () => {
+  const PrimaryWithChannels = composeStory(
+    ButtonStories.CSF3Primary,
+    ButtonStories.CSF3Primary.meta.annotations,
+    {
+      decorators: [
+        (StoryFn: any) => {
+          addons.getChannel();
+          return StoryFn();
+        },
+      ],
+    }
+  );
+  render(<PrimaryWithChannels>Hello world</PrimaryWithChannels>);
+  const buttonElement = screen.getByText(/Hello world/i);
+  expect(buttonElement).not.toBeNull();
+});
+
+describe('ComposeStories types', () => {
+  // this file tests Typescript types that's why there are no assertions
+  it('Should support typescript operators', () => {
+    type ComposeStoriesParam = Parameters<typeof composeStories>[0];
+
+    expectTypeOf({
+      ...ButtonStories,
+      default: ButtonStories.CSF3Primary.meta.annotations as Meta<typeof Button>,
+    }).toMatchTypeOf<ComposeStoriesParam>();
+
+    expectTypeOf({
+      ...ButtonStories,
+      default: ButtonStories.CSF3Primary.meta.annotations satisfies Meta<typeof Button>,
+    }).toMatchTypeOf<ComposeStoriesParam>();
+  });
+});
+
+const testCases = Object.values(composeStories(ButtonStories)).map(
+  (Story) => [Story.storyName, Story] as [string, typeof Story]
+);
+it.each(testCases)('Renders %s story', async (_storyName, Story) => {
+  if (_storyName === 'CSF2StoryWithLocale' || _storyName === 'MountInPlayFunctionThrow') {
+    return;
+  }
+
+  await Story.run();
+  expect(document.body).toMatchSnapshot();
+});

code/renderers/react/src/preview.tsx

@@ -59,7 +59,9 @@ class Story<TRenderer extends Renderer, TArgs extends Args> {
     public annotations: StoryAnnotations<TRenderer, TArgs>,
     public meta: Meta<TRenderer, TArgs>,
     public config: PreviewConfig<TRenderer>
-  ) {}
+  ) {
+    Object.assign(this, annotations);
+  }
 
   readonly isCSFFactory = true;
 }