Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

CSF: Deprecate duplicate titles rather than forbid them #11476

Merged
merged 3 commits into from
Jul 9, 2020
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
48 changes: 24 additions & 24 deletions MIGRATION.md
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,6 @@
- [Removed renderCurrentStory event](#removed-rendercurrentstory-event)
- [Removed hierarchy separators](#removed-hierarchy-separators)
- [Client API changes](#client-api-changes)
- [Removed support for duplicate kinds](#removed-support-for-duplicate-kinds)
- [Removed Legacy Story APIs](#removed-legacy-story-apis)
- [Can no longer add decorators/parameters after stories](#can-no-longer-add-decoratorsparameters-after-stories)
- [Changed Parameter Handling](#changed-parameter-handling)
Expand All @@ -43,6 +42,7 @@
- [Deprecated addParameters and addDecorator](#deprecated-addparameters-and-adddecorator)
- [Deprecated clearDecorators](#deprecated-cleardecorators)
- [Deprecated configure](#deprecated-configure)
- [Deprecated support for duplicate kinds](#deprecated-support-for-duplicate-kinds)
- [From version 5.2.x to 5.3.x](#from-version-52x-to-53x)
- [To main.js configuration](#to-mainjs-configuration)
- [Using main.js](#using-mainjs)
Expand Down Expand Up @@ -401,29 +401,6 @@ addons.setConfig({

### Client API changes

#### Removed support for duplicate kinds

In 6.0 we removed the ability to split a kind's (component's) stories into multiple files because it was causing issues in hot module reloading (HMR).

If you had N stories that contained `export default { title: 'foo/bar' }` (or the MDX equivalent `<Meta title="foo/bar">`), Storybook will now throw the error `Duplicate title '${kindName}' used in multiple files`.

To split a component's stories into multiple files, e.g. for the `foo/bar` example above:

- Create a single file with the `export default { title: 'foo/bar' }` export, which is the primary file
- Comment out or delete the default export from the other files
- Re-export the stories from the other files in the primary file

So the primary example might look like:

```js
export default { title: 'foo/bar' };
export * from './Bar1.stories'
export * from './Bar2.stories'
export * from './Bar3.stories'

export const SomeStory = () => ...;
```

#### Removed Legacy Story APIs

In 6.0 we removed a set of APIs from the underlying `StoryStore` (which wasn't publicly accessible):
Expand Down Expand Up @@ -724,6 +701,29 @@ module.exports = {
};
```

#### Deprecated support for duplicate kinds

In 6.0 we deprecated the ability to split a kind's (component's) stories into multiple files because it was causing issues in hot module reloading (HMR). It will likely be removed completely in 7.0.

If you had N stories that contained `export default { title: 'foo/bar' }` (or the MDX equivalent `<Meta title="foo/bar">`), Storybook will now raise the warning `Duplicate title '${kindName}' used in multiple files`.

To split a component's stories into multiple files, e.g. for the `foo/bar` example above:

- Create a single file with the `export default { title: 'foo/bar' }` export, which is the primary file
- Comment out or delete the default export from the other files
- Re-export the stories from the other files in the primary file

So the primary example might look like:

```js
export default { title: 'foo/bar' };
export * from './Bar1.stories'
export * from './Bar2.stories'
export * from './Bar3.stories'

export const SomeStory = () => ...;
```

## From version 5.2.x to 5.3.x

### To main.js configuration
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -9,4 +9,4 @@ import { Button } from '@storybook/react/demo';
// component: Button,
// };

export const basic = () => <Button>Basic</Button>;
export const Basic = () => <Button>Basic</Button>;
Original file line number Diff line number Diff line change
@@ -1,10 +1,12 @@
import { Meta, Story } from '@storybook/addon-docs/blocks';
import * as stories from './csf-with-mdx-docs.stories';
import { Basic } from './csf-with-mdx-docs.stories';

<Meta title="Addons/Docs/csf-with-mdx-docs" />

# Button

I can define a story with the function imported from CSF:

<Story name="basic">{stories.basic}</Story>
<Story name="Basic button">
<Basic />
</Story>
19 changes: 12 additions & 7 deletions lib/core/src/client/preview/loadCsf.ts
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,17 @@ const deprecatedStoryAnnotationWarning = deprecate(
`
);

const duplicateKindWarning = deprecate(
(kindName: string) => {
logger.warn(`Duplicate title: '${kindName}'`);
shilman marked this conversation as resolved.
Show resolved Hide resolved
},
dedent`
Duplicate title used in multiple files; use unique titles or a primary file for a component with re-exported stories.

https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated-support-for-duplicate-kinds
`
);

let previousExports = new Map<any, string>();
const loadStories = (
loadable: Loadable,
Expand Down Expand Up @@ -111,13 +122,7 @@ const loadStories = (
} = meta;

if (loadedKinds.has(kindName)) {
throw new Error(
dedent`
Duplicate title '${kindName}' used in multiple files; use unique titles or a primary file for '${kindName}' with re-exported stories.

https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#removed-support-for-duplicate-kinds
`
);
duplicateKindWarning(kindName);
}
loadedKinds.add(kindName);

Expand Down