From a01e55460f0363731ccf954f17d0481876fff3fd Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Thu, 9 Jul 2020 15:00:04 +0800 Subject: [PATCH 1/3] CSF: Deprecate duplicate titles rather than forbid it --- MIGRATION.md | 8 ++++---- .../addon-docs/csf-with-mdx-docs.stories.js | 2 +- .../addon-docs/csf-with-mdx-docs.stories.mdx | 6 ++++-- lib/core/src/client/preview/loadCsf.ts | 19 ++++++++++++------- 4 files changed, 21 insertions(+), 14 deletions(-) diff --git a/MIGRATION.md b/MIGRATION.md index bbe6d5c2d8ac..3b192c892753 100644 --- a/MIGRATION.md +++ b/MIGRATION.md @@ -19,7 +19,7 @@ - [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) + - [Deprecated support for duplicate kinds](#deprecated-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) @@ -401,11 +401,11 @@ addons.setConfig({ ### Client API changes -#### Removed support for duplicate kinds +#### Deprecated 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). +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 ``), Storybook will now throw the error `Duplicate title '${kindName}' used in multiple files`. +If you had N stories that contained `export default { title: 'foo/bar' }` (or the MDX equivalent ``), 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: diff --git a/examples/official-storybook/stories/addon-docs/csf-with-mdx-docs.stories.js b/examples/official-storybook/stories/addon-docs/csf-with-mdx-docs.stories.js index a5dab9fb2b7d..3e1f6a0f03ce 100644 --- a/examples/official-storybook/stories/addon-docs/csf-with-mdx-docs.stories.js +++ b/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 = () => ; +export const Basic = () => ; diff --git a/examples/official-storybook/stories/addon-docs/csf-with-mdx-docs.stories.mdx b/examples/official-storybook/stories/addon-docs/csf-with-mdx-docs.stories.mdx index f6418af2eb0c..78ce04dfdbf0 100644 --- a/examples/official-storybook/stories/addon-docs/csf-with-mdx-docs.stories.mdx +++ b/examples/official-storybook/stories/addon-docs/csf-with-mdx-docs.stories.mdx @@ -1,5 +1,5 @@ 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'; @@ -7,4 +7,6 @@ import * as stories from './csf-with-mdx-docs.stories'; I can define a story with the function imported from CSF: -{stories.basic} + + + diff --git a/lib/core/src/client/preview/loadCsf.ts b/lib/core/src/client/preview/loadCsf.ts index 1ab7ee637c51..906f63dc1665 100644 --- a/lib/core/src/client/preview/loadCsf.ts +++ b/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#removed-support-for-duplicate-kinds + ` +); + let previousExports = new Map(); 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); From 7397e5cfa77819819f8f420cdcb554ae5587f6e4 Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Thu, 9 Jul 2020 15:57:10 +0800 Subject: [PATCH 2/3] Update MIGRATION.md --- MIGRATION.md | 48 ++++++++++++++++++++++++------------------------ 1 file changed, 24 insertions(+), 24 deletions(-) diff --git a/MIGRATION.md b/MIGRATION.md index 3b192c892753..9f25925dfb85 100644 --- a/MIGRATION.md +++ b/MIGRATION.md @@ -19,7 +19,6 @@ - [Removed renderCurrentStory event](#removed-rendercurrentstory-event) - [Removed hierarchy separators](#removed-hierarchy-separators) - [Client API changes](#client-api-changes) - - [Deprecated support for duplicate kinds](#deprecated-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 -#### 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 ``), 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 = () => ...; -``` - #### 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 ``), 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 From 1851fc8682f454afc5953e51fd72446c66542b7a Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Thu, 9 Jul 2020 15:58:12 +0800 Subject: [PATCH 3/3] Fix link --- lib/core/src/client/preview/loadCsf.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/core/src/client/preview/loadCsf.ts b/lib/core/src/client/preview/loadCsf.ts index 906f63dc1665..3bd69c91ad3c 100644 --- a/lib/core/src/client/preview/loadCsf.ts +++ b/lib/core/src/client/preview/loadCsf.ts @@ -23,7 +23,7 @@ const duplicateKindWarning = deprecate( 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#removed-support-for-duplicate-kinds + https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated-support-for-duplicate-kinds ` );