Merge pull request #11476 from storybookjs/11108-deprecate-duplicate-…

…kinds

CSF: Deprecate duplicate titles rather than forbid them

MIGRATION.md

@@ -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)
@@ -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)
@@ -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):
@@ -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

examples/official-storybook/stories/addon-docs/csf-with-mdx-docs.stories.js

@@ -9,4 +9,4 @@ import { Button } from '@storybook/react/demo';
 // component: Button,
 // };
 
-export const basic = () => <Button>Basic</Button>;
+export const Basic = () => <Button>Basic</Button>;

examples/official-storybook/stories/addon-docs/csf-with-mdx-docs.stories.mdx

@@ -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>

lib/core/src/client/preview/loadCsf.ts

@@ -16,6 +16,17 @@ const deprecatedStoryAnnotationWarning = deprecate(
 `
 );
 
+const duplicateKindWarning = deprecate(
+ (kindName: string) => {
+ logger.warn(`Duplicate title: '${kindName}'`);
+ },
+ 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,
@@ -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);