Creating a separate files for just CSF Stories

Question

My current storybook file looks like the following:

Button.stories.js:

import { Button } from './Button';

export default {
  title: 'Example/Button',
  component: Button,
  tags: ['autodocs'],
  argTypes: {
    backgroundColor: { control: 'color' },
  },
};

export const Primary = {
  args: {
    primary: true,
    label: 'Button',
  },
};

export const Secondary = {
  args: {
    label: 'Button',
  },
};

export const Large = {
  args: {
    size: 'large',
    label: 'Button',
  },
};

export const Small = {
  args: {
    size: 'small',
    label: 'Button',
  },
};

How can I create a separate file for just my Stories and then import it into my Button.stories.js file? I'm trying to do something like the below. Storybook does not work when I try this, because when I run storybook, no stories are created.

Button.examples.js:

import { Button } from './Button';

export const Primary = {
  args: {
    primary: true,
    label: 'Button',
  },
};

export const Secondary = {
  args: {
    label: 'Button',
  },
};

export const Large = {
  args: {
    size: 'large',
    label: 'Button',
  },
};

export const Small = {
  args: {
    size: 'small',
    label: 'Button',
  },
};

Button.stories.js:

import { Button } from './Button';
export * from './Button.examples';

export default {
  title: 'Example/Button',
  component: Button,
  tags: ['autodocs'],
  argTypes: {
    backgroundColor: { control: 'color' },
  },
};

To Reproduce: Go to this repo / branch, run npm install, and then npm run storybook.

Answer 1

In v7 of storybook, you need to export stories as the following:

export { Primary, Secondary, Large, Small } from './Button.examples';

Please see here for further detail.