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