Tuesday, 21 March 2023

Creating a separate files for just CSF Stories

My current storybook file looks like the following:

text.stories.ts:

import type { Meta, StoryObj } from '@storybook/react';
import { Text } from './Text';

const meta: Meta<typeof Text> = {
  component: Text,
  tags: ['autodocs'],
  title: 'Foundations/Typography',
};
export default meta;

type Story = StoryObj<typeof Text>;

export const Default: Story = {};

export const Heading1: Story = {
  args: {
    type: 'h1',
  },
};

How can I create a separate file for just my Stories and then import it into my text.stories.tsx file? I'm trying to do something like the below. Storybook does not work when I try this.

text.examples.ts:

import type { StoryObj } from '@storybook/react';
import { Text } from './Text';

type Story = StoryObj<typeof Text>;

export const Default: Story = {};

export const Heading1: Story = {
  args: {
    type: 'h1',
  },
};

text.stories.ts:

import type { Meta } from '@storybook/react';
import { Text } from './Text';
import * from './text.examples';

const meta: Meta<typeof Text> = {
  component: Text,
  tags: ['autodocs'],
  title: 'Foundations/Typography',
};
export default meta;


from Creating a separate files for just CSF Stories

No comments:

Post a Comment