From 3d7f249ab406d2cd152d0c6f9a225b050ed423d8 Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Wed, 19 Jan 2022 10:44:31 +0100 Subject: [PATCH 001/171] feat: add testing utilities in @storybook/store --- lib/store/src/StoryStore.ts | 4 +- lib/store/src/csf/index.ts | 5 + .../src/{ => csf}/normalizeInputTypes.test.ts | 0 .../src/{ => csf}/normalizeInputTypes.ts | 0 .../src/csf/normalizeProjectAnnotations.ts | 22 +++++ .../src/{ => csf}/normalizeStory.test.ts | 0 lib/store/src/{ => csf}/normalizeStory.ts | 2 +- lib/store/src/{ => csf}/prepareStory.test.ts | 2 +- lib/store/src/{ => csf}/prepareStory.ts | 10 +- .../src/{ => csf}/processCSFFile.test.ts | 0 lib/store/src/{ => csf}/processCSFFile.ts | 22 ++--- lib/store/src/csf/testing-utils/index.ts | 99 +++++++++++++++++++ lib/store/src/index.ts | 2 +- 13 files changed, 143 insertions(+), 25 deletions(-) create mode 100644 lib/store/src/csf/index.ts rename lib/store/src/{ => csf}/normalizeInputTypes.test.ts (100%) rename lib/store/src/{ => csf}/normalizeInputTypes.ts (100%) create mode 100644 lib/store/src/csf/normalizeProjectAnnotations.ts rename lib/store/src/{ => csf}/normalizeStory.test.ts (100%) rename lib/store/src/{ => csf}/normalizeStory.ts (97%) rename lib/store/src/{ => csf}/prepareStory.test.ts (99%) rename lib/store/src/{ => csf}/prepareStory.ts (96%) rename lib/store/src/{ => csf}/processCSFFile.test.ts (100%) rename lib/store/src/{ => csf}/processCSFFile.ts (74%) create mode 100644 lib/store/src/csf/testing-utils/index.ts diff --git a/lib/store/src/StoryStore.ts b/lib/store/src/StoryStore.ts index ddfeb57c14c..c1a7e79cf52 100644 --- a/lib/store/src/StoryStore.ts +++ b/lib/store/src/StoryStore.ts @@ -17,8 +17,7 @@ import { SynchronousPromise } from 'synchronous-promise'; import { StoryIndexStore } from './StoryIndexStore'; import { ArgsStore } from './ArgsStore'; import { GlobalsStore } from './GlobalsStore'; -import { processCSFFile } from './processCSFFile'; -import { prepareStory } from './prepareStory'; +import { normalizeInputTypes, processCSFFile, prepareStory } from './csf'; import { CSFFile, ModuleImportFn, @@ -32,7 +31,6 @@ import { V2CompatIndexEntry, } from './types'; import { HooksContext } from './hooks'; -import { normalizeInputTypes } from './normalizeInputTypes'; import { inferArgTypes } from './inferArgTypes'; import { inferControls } from './inferControls'; diff --git a/lib/store/src/csf/index.ts b/lib/store/src/csf/index.ts new file mode 100644 index 00000000000..4e7870ccd0b --- /dev/null +++ b/lib/store/src/csf/index.ts @@ -0,0 +1,5 @@ +export * from './normalizeInputTypes'; +export * from './normalizeStory'; +export * from './processCSFFile'; +export * from './prepareStory'; +export * from './testing-utils'; diff --git a/lib/store/src/normalizeInputTypes.test.ts b/lib/store/src/csf/normalizeInputTypes.test.ts similarity index 100% rename from lib/store/src/normalizeInputTypes.test.ts rename to lib/store/src/csf/normalizeInputTypes.test.ts diff --git a/lib/store/src/normalizeInputTypes.ts b/lib/store/src/csf/normalizeInputTypes.ts similarity index 100% rename from lib/store/src/normalizeInputTypes.ts rename to lib/store/src/csf/normalizeInputTypes.ts diff --git a/lib/store/src/csf/normalizeProjectAnnotations.ts b/lib/store/src/csf/normalizeProjectAnnotations.ts new file mode 100644 index 00000000000..dd3eba96347 --- /dev/null +++ b/lib/store/src/csf/normalizeProjectAnnotations.ts @@ -0,0 +1,22 @@ +import { sanitize, AnyFramework } from '@storybook/csf'; + +import { ModuleExports, NormalizedComponentAnnotations } from '../types'; +import { normalizeInputTypes } from './normalizeInputTypes'; + +export function normalizeProjectAnnotations( + defaultExport: ModuleExports['default'], + title: string = defaultExport.title, + importPath?: string +): NormalizedComponentAnnotations { + const { id, argTypes } = defaultExport; + return { + id: sanitize(id || title), + ...defaultExport, + title, + ...(argTypes && { argTypes: normalizeInputTypes(argTypes) }), + parameters: { + fileName: importPath, + ...defaultExport.parameters, + }, + }; +} diff --git a/lib/store/src/normalizeStory.test.ts b/lib/store/src/csf/normalizeStory.test.ts similarity index 100% rename from lib/store/src/normalizeStory.test.ts rename to lib/store/src/csf/normalizeStory.test.ts diff --git a/lib/store/src/normalizeStory.ts b/lib/store/src/csf/normalizeStory.ts similarity index 97% rename from lib/store/src/normalizeStory.ts rename to lib/store/src/csf/normalizeStory.ts index b0784d5a3c6..1d0f3b93c07 100644 --- a/lib/store/src/normalizeStory.ts +++ b/lib/store/src/csf/normalizeStory.ts @@ -11,7 +11,7 @@ import { import dedent from 'ts-dedent'; import { logger } from '@storybook/client-logger'; import deprecate from 'util-deprecate'; -import { NormalizedStoryAnnotations } from './types'; +import { NormalizedStoryAnnotations } from '../types'; import { normalizeInputTypes } from './normalizeInputTypes'; const deprecatedStoryAnnotation = dedent` diff --git a/lib/store/src/prepareStory.test.ts b/lib/store/src/csf/prepareStory.test.ts similarity index 99% rename from lib/store/src/prepareStory.test.ts rename to lib/store/src/csf/prepareStory.test.ts index 4dd1c7b379c..1400ed1ea49 100644 --- a/lib/store/src/prepareStory.test.ts +++ b/lib/store/src/csf/prepareStory.test.ts @@ -7,7 +7,7 @@ import { SBScalarType, StoryContext, } from '@storybook/csf'; -import { NO_TARGET_NAME } from './args'; +import { NO_TARGET_NAME } from '../args'; import { prepareStory } from './prepareStory'; jest.mock('global', () => ({ diff --git a/lib/store/src/prepareStory.ts b/lib/store/src/csf/prepareStory.ts similarity index 96% rename from lib/store/src/prepareStory.ts rename to lib/store/src/csf/prepareStory.ts index 6547cf95981..16d5919aa57 100644 --- a/lib/store/src/prepareStory.ts +++ b/lib/store/src/csf/prepareStory.ts @@ -18,11 +18,11 @@ import { Story, NormalizedStoryAnnotations, NormalizedProjectAnnotations, -} from './types'; -import { combineParameters } from './parameters'; -import { applyHooks } from './hooks'; -import { defaultDecorateStory } from './decorators'; -import { groupArgsByTarget, NO_TARGET_NAME } from './args'; +} from '../types'; +import { combineParameters } from '../parameters'; +import { applyHooks } from '../hooks'; +import { defaultDecorateStory } from '../decorators'; +import { groupArgsByTarget, NO_TARGET_NAME } from '../args'; const argTypeDefaultValueWarning = deprecate( () => {}, diff --git a/lib/store/src/processCSFFile.test.ts b/lib/store/src/csf/processCSFFile.test.ts similarity index 100% rename from lib/store/src/processCSFFile.test.ts rename to lib/store/src/csf/processCSFFile.test.ts diff --git a/lib/store/src/processCSFFile.ts b/lib/store/src/csf/processCSFFile.ts similarity index 74% rename from lib/store/src/processCSFFile.ts rename to lib/store/src/csf/processCSFFile.ts index dbb5e44a419..0e6d3207553 100644 --- a/lib/store/src/processCSFFile.ts +++ b/lib/store/src/csf/processCSFFile.ts @@ -1,10 +1,10 @@ -import { isExportStory, sanitize, Parameters, AnyFramework, ComponentTitle } from '@storybook/csf'; +import { isExportStory, Parameters, AnyFramework, ComponentTitle } from '@storybook/csf'; import { logger } from '@storybook/client-logger'; -import { ModuleExports, CSFFile, NormalizedComponentAnnotations } from './types'; +import { ModuleExports, CSFFile, NormalizedComponentAnnotations } from '../types'; import { normalizeStory } from './normalizeStory'; -import { normalizeInputTypes } from './normalizeInputTypes'; -import { Path } from '.'; +import { Path } from '..'; +import { normalizeProjectAnnotations } from './normalizeProjectAnnotations'; const checkGlobals = (parameters: Parameters) => { const { globals, globalTypes } = parameters; @@ -40,17 +40,11 @@ export function processCSFFile( ): CSFFile { const { default: defaultExport, __namedExportsOrder, ...namedExports } = moduleExports; - const { id, argTypes } = defaultExport; - const meta: NormalizedComponentAnnotations = { - id: sanitize(id || title), - ...defaultExport, + const meta: NormalizedComponentAnnotations = normalizeProjectAnnotations( + defaultExport, title, - ...(argTypes && { argTypes: normalizeInputTypes(argTypes) }), - parameters: { - fileName: importPath, - ...defaultExport.parameters, - }, - }; + importPath + ); checkDisallowedParameters(meta.parameters); const csfFile: CSFFile = { meta, stories: {} }; diff --git a/lib/store/src/csf/testing-utils/index.ts b/lib/store/src/csf/testing-utils/index.ts new file mode 100644 index 00000000000..7ebeece296b --- /dev/null +++ b/lib/store/src/csf/testing-utils/index.ts @@ -0,0 +1,99 @@ +import { + isExportStory, + AnyFramework, + AnnotatedStoryFn, + ComponentAnnotations, + Args, +} from '@storybook/csf'; + +import { prepareStory } from '../prepareStory'; +import { normalizeStory } from '../normalizeStory'; +import { normalizeProjectAnnotations } from '../normalizeProjectAnnotations'; +import { HooksContext } from '../../hooks'; +import { NormalizedProjectAnnotations } from '../..'; + +if (process.env.NODE_ENV === 'test') { + // eslint-disable-next-line global-require + const { default: addons, mockChannel } = require('@storybook/addons'); + addons.setChannel(mockChannel()); +} + +export type StoryFile = { default: any; __esModule?: boolean; __namedExportsOrder?: any }; + +type Entries = { + [K in keyof T]: [K, T[K]]; +}[keyof T]; +export function objectEntries(t: T): Entries[] { + return Object.entries(t) as any; +} + +export function composeStory< + TFramework extends AnyFramework = AnyFramework, + TArgs extends Args = Args +>( + story: AnnotatedStoryFn, + meta: ComponentAnnotations, + globalConfig: NormalizedProjectAnnotations = {} +) { + if (story === undefined) { + throw new Error('Expected a story but received undefined.'); + } + + const normalizedMeta = normalizeProjectAnnotations(meta); + + const normalizedStory = normalizeStory(story.name, story, normalizedMeta); + + const preparedStory = prepareStory(normalizedStory, normalizedMeta, globalConfig); + + const defaultGlobals = Object.entries(globalConfig.globalTypes || {}).reduce( + (acc, [arg, { defaultValue }]) => { + if (defaultValue) { + acc[arg] = defaultValue; + } + return acc; + }, + {} as Record + ); + + const composedStory = (extraArgs: Partial) => { + const context = { + ...preparedStory, + hooks: new HooksContext(), + globals: defaultGlobals, + args: { ...preparedStory.initialArgs, ...extraArgs }, + } as any; + + return preparedStory.unboundStoryFn(context); + }; + + composedStory.storyName = story.storyName || story.name; + composedStory.args = preparedStory.initialArgs; + composedStory.play = preparedStory.playFunction; + composedStory.parameters = preparedStory.parameters; + + return composedStory; +} + +export function composeStories( + storiesImport: TModule, + globalConfig: NormalizedProjectAnnotations, + composeStoryFn: typeof composeStory +) { + const { default: meta, __esModule, __namedExportsOrder, ...stories } = storiesImport; + const composedStories = objectEntries(stories).reduce((storiesMap, [key, _story]) => { + if (!isExportStory(key as string, meta)) { + return storiesMap; + } + + const storyName = String(key); + const story = _story as any; + story.storyName = storyName; + + const result = Object.assign(storiesMap, { + [key]: composeStoryFn(story, meta, globalConfig), + }); + return result; + }, {}); + + return composedStories; +} diff --git a/lib/store/src/index.ts b/lib/store/src/index.ts index ab63007918c..f3bca023e57 100644 --- a/lib/store/src/index.ts +++ b/lib/store/src/index.ts @@ -1,12 +1,12 @@ export { StoryStore } from './StoryStore'; export { combineParameters } from './parameters'; export { filterArgTypes } from './filterArgTypes'; -export { normalizeInputTypes } from './normalizeInputTypes'; export type { PropDescriptor } from './filterArgTypes'; export { inferControls } from './inferControls'; export * from './types'; +export * from './csf'; export * from './hooks'; export * from './decorators'; export * from './args'; From a3b599dbe263690f79357c6dbfb4bcb896d22223 Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Wed, 19 Jan 2022 10:44:47 +0100 Subject: [PATCH 002/171] feat: add testing utilities in @storybook/react --- app/react/src/client/index.ts | 1 + app/react/src/client/testing/index.ts | 57 +++++++++++++++++++++++++++ app/react/src/client/testing/types.ts | 43 ++++++++++++++++++++ 3 files changed, 101 insertions(+) create mode 100644 app/react/src/client/testing/index.ts create mode 100644 app/react/src/client/testing/types.ts diff --git a/app/react/src/client/index.ts b/app/react/src/client/index.ts index 54de76c8585..141f7e7f43f 100644 --- a/app/react/src/client/index.ts +++ b/app/react/src/client/index.ts @@ -9,6 +9,7 @@ export { raw, forceReRender, } from './preview'; +export * from './testing'; export * from './preview/types-6-3'; diff --git a/app/react/src/client/testing/index.ts b/app/react/src/client/testing/index.ts new file mode 100644 index 00000000000..7ce12904ea0 --- /dev/null +++ b/app/react/src/client/testing/index.ts @@ -0,0 +1,57 @@ +import { + composeStory as originalComposeStory, + composeStories as originalComposeStories, +} from '@storybook/store'; +// eslint-disable-next-line import/no-extraneous-dependencies +import { composeConfigs } from '@storybook/preview-web'; +import type { AnnotatedStoryFn } from '@storybook/csf'; +import { render } from '../preview/render'; + +import type { Meta, ReactFramework } from '../preview/types-6-0'; +import type { StoriesWithPartialProps, GlobalConfig, StoryFile } from './types'; + +const defaultGlobalConfig: GlobalConfig = { + render, +}; + +let globalStorybookConfig = { + ...defaultGlobalConfig, +}; + +/** Function that sets the globalConfig of your storybook. The global config is the preview module of your .storybook folder. + * + * It should be run a single time, so that your global config (e.g. decorators) is applied to your stories when using `composeStories` or `composeStory`. + * + * Example: + *```jsx + * // setup.js (for jest) + * import { setGlobalConfig } from '@storybook/testing-react'; + * import * as globalStorybookConfig from './.storybook/preview'; + * + * setGlobalConfig(globalStorybookConfig); + *``` + * + * @param config - e.g. (import * as globalConfig from '../.storybook/preview') + */ +export function setGlobalConfig(config: GlobalConfig) { + globalStorybookConfig = composeConfigs([defaultGlobalConfig, config]) as GlobalConfig; +} + +export function composeStory( + story: AnnotatedStoryFn, + meta: Meta, + globalConfig: GlobalConfig = globalStorybookConfig +) { + const projectAnnotations = { ...defaultGlobalConfig, ...globalConfig }; + + return originalComposeStory(story, meta, projectAnnotations); +} + +export function composeStories( + storiesImport: TModule, + globalConfig?: GlobalConfig +) { + const composedStories = originalComposeStories(storiesImport, globalConfig, composeStory); + + return (composedStories as unknown) as Omit, keyof StoryFile>; +} diff --git a/app/react/src/client/testing/types.ts b/app/react/src/client/testing/types.ts new file mode 100644 index 00000000000..574495b0177 --- /dev/null +++ b/app/react/src/client/testing/types.ts @@ -0,0 +1,43 @@ +import { NormalizedProjectAnnotations } from '@storybook/store'; +import type { + StoryFn as OriginalStoryFn, + StoryObj, + Meta, + Args, + StoryContext, + ReactFramework, +} from '../preview/types-6-0'; + +/** + * Object representing the preview.ts module + * + * Used in storybook testing utilities. + * @see [Unit testing with Storybook](https://storybook.js.org/docs/react/workflows/unit-testing) + */ +export type GlobalConfig = NormalizedProjectAnnotations; + +export type StoryFile = { default: Meta; __esModule?: boolean; __namedExportsOrder?: any }; + +export type TestingStory = StoryFn | StoryObj; + +export type TestingStoryPlayContext = Partial> & + Pick; + +export type TestingStoryPlayFn = ( + context: TestingStoryPlayContext +) => Promise | void; + +export type StoryFn = OriginalStoryFn & { play: TestingStoryPlayFn }; + +/** + * T represents the whole es module of a stories file. K of T means named exports (basically the Story type) + * 1. pick the keys K of T that have properties that are Story + * 2. infer the actual prop type for each Story + * 3. reconstruct Story with Partial. Story -> Story> + */ +export type StoriesWithPartialProps = any; +// { +// [K in keyof T as T[K] extends TestingStory ? K : never]: T[K] extends TestingStory +// ? StoryFn> +// : unknown; +// }; From f9f5c02697029c38726a914d1aab910cd06271b3 Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Wed, 19 Jan 2022 10:45:13 +0100 Subject: [PATCH 003/171] chore: add tests for testing utilities in cra-ts-essentials --- .../.storybook/{main.js => main.ts} | 0 .../.storybook/{preview.js => preview.tsx} | 17 +- examples/cra-ts-essentials/package.json | 7 +- examples/cra-ts-essentials/src/setupTests.ts | 4 + .../components/AccountForm.stories.tsx | 109 ++++ .../components/AccountForm.test.tsx | 25 + .../testing-react/components/AccountForm.tsx | 552 ++++++++++++++++++ .../components/Button.stories.tsx | 87 +++ .../testing-react/components/Button.test.tsx | 94 +++ .../testing-react/components/Button.tsx | 43 ++ .../__snapshots__/internals.test.tsx.snap | 127 ++++ .../testing-react/components/button.css | 30 + .../components/internals.test.tsx | 112 ++++ examples/cra-ts-essentials/tsconfig.json | 14 +- .../.storybook/{preview.js => preview.tsx} | 0 examples/react-ts/package.json | 1 + examples/react-ts/src/AccountForm.stories.tsx | 55 +- examples/react-ts/src/AccountForm.test.tsx | 24 + yarn.lock | 23 +- 19 files changed, 1294 insertions(+), 30 deletions(-) rename examples/cra-ts-essentials/.storybook/{main.js => main.ts} (100%) rename examples/cra-ts-essentials/.storybook/{preview.js => preview.tsx} (55%) create mode 100644 examples/cra-ts-essentials/src/setupTests.ts create mode 100644 examples/cra-ts-essentials/src/stories/testing-react/components/AccountForm.stories.tsx create mode 100644 examples/cra-ts-essentials/src/stories/testing-react/components/AccountForm.test.tsx create mode 100644 examples/cra-ts-essentials/src/stories/testing-react/components/AccountForm.tsx create mode 100644 examples/cra-ts-essentials/src/stories/testing-react/components/Button.stories.tsx create mode 100644 examples/cra-ts-essentials/src/stories/testing-react/components/Button.test.tsx create mode 100644 examples/cra-ts-essentials/src/stories/testing-react/components/Button.tsx create mode 100644 examples/cra-ts-essentials/src/stories/testing-react/components/__snapshots__/internals.test.tsx.snap create mode 100644 examples/cra-ts-essentials/src/stories/testing-react/components/button.css create mode 100644 examples/cra-ts-essentials/src/stories/testing-react/components/internals.test.tsx rename examples/react-ts/.storybook/{preview.js => preview.tsx} (100%) create mode 100644 examples/react-ts/src/AccountForm.test.tsx diff --git a/examples/cra-ts-essentials/.storybook/main.js b/examples/cra-ts-essentials/.storybook/main.ts similarity index 100% rename from examples/cra-ts-essentials/.storybook/main.js rename to examples/cra-ts-essentials/.storybook/main.ts diff --git a/examples/cra-ts-essentials/.storybook/preview.js b/examples/cra-ts-essentials/.storybook/preview.tsx similarity index 55% rename from examples/cra-ts-essentials/.storybook/preview.js rename to examples/cra-ts-essentials/.storybook/preview.tsx index 305c8eb0be1..54093cc18b6 100644 --- a/examples/cra-ts-essentials/.storybook/preview.js +++ b/examples/cra-ts-essentials/.storybook/preview.tsx @@ -1,14 +1,25 @@ import React from 'react'; +import type { DecoratorFn } from '@storybook/react'; +import { ThemeProvider, convert, themes } from '@storybook/theming'; -export const decorators = [ - (StoryFn, { globals: { locale = 'en' } }) => ( +export const decorators: DecoratorFn[] = [ + (StoryFn, { globals: { locale } }) => ( <> -
{locale}
+
Locale: {locale}
), + (StoryFn) => ( + + + + ), ]; +export const parameters = { + actions: { argTypesRegex: '^on[A-Z].*' }, +}; + export const globalTypes = { locale: { name: 'Locale', diff --git a/examples/cra-ts-essentials/package.json b/examples/cra-ts-essentials/package.json index e00f7dc18c1..4c0059e96b1 100644 --- a/examples/cra-ts-essentials/package.json +++ b/examples/cra-ts-essentials/package.json @@ -8,7 +8,7 @@ "eject": "react-scripts eject", "start": "react-scripts start", "storybook": "start-storybook -p 9009 --no-manager-cache", - "test": "react-scripts test" + "test": "SKIP_PREFLIGHT_CHECK=true react-scripts test" }, "browserslist": { "production": [ @@ -27,6 +27,7 @@ "@types/node": "^14.14.20 || ^16.0.0", "@types/react": "^16.14.2", "@types/react-dom": "16.9.10", + "formik": "2.2.9", "global": "^4.4.0", "react": "16.14.0", "react-dom": "16.14.0", @@ -38,8 +39,12 @@ "@storybook/addon-ie11": "0.0.7--canary.5e87b64.0", "@storybook/addons": "6.5.0-alpha.23", "@storybook/builder-webpack4": "6.5.0-alpha.23", + "@storybook/components": "6.5.0-alpha.23", + "@storybook/jest": "^0.0.5", "@storybook/preset-create-react-app": "^3.1.6", "@storybook/react": "6.5.0-alpha.23", + "@storybook/testing-library": "^0.0.7", + "@storybook/theming": "6.5.0-alpha.23", "webpack": "4" }, "storybook": { diff --git a/examples/cra-ts-essentials/src/setupTests.ts b/examples/cra-ts-essentials/src/setupTests.ts new file mode 100644 index 00000000000..c3f66482a56 --- /dev/null +++ b/examples/cra-ts-essentials/src/setupTests.ts @@ -0,0 +1,4 @@ +import { setGlobalConfig } from '@storybook/react'; +import * as globalStorybookConfig from '../.storybook/preview'; + +setGlobalConfig(globalStorybookConfig); diff --git a/examples/cra-ts-essentials/src/stories/testing-react/components/AccountForm.stories.tsx b/examples/cra-ts-essentials/src/stories/testing-react/components/AccountForm.stories.tsx new file mode 100644 index 00000000000..f3cab5e6d2f --- /dev/null +++ b/examples/cra-ts-essentials/src/stories/testing-react/components/AccountForm.stories.tsx @@ -0,0 +1,109 @@ +/* eslint-disable storybook/await-interactions */ +import React from 'react'; +import type { ComponentMeta, ComponentStoryObj } from '@storybook/react'; +import { userEvent, within } from '@storybook/testing-library'; + +import { AccountForm, AccountFormProps } from './AccountForm'; + +export default { + title: 'CSF3/AccountForm', + component: AccountForm, + parameters: { + layout: 'centered', + }, +} as ComponentMeta; + +type Story = ComponentStoryObj; + +export const Standard: Story = { + args: { passwordVerification: false }, +}; + +export const StandardEmailFilled: Story = { + ...Standard, + play: async ({ canvasElement }) => { + const canvas = within(canvasElement); + await userEvent.type(canvas.getByTestId('email'), 'michael@chromatic.com'); + }, +}; + +export const StandardEmailFailed: Story = { + ...Standard, + play: async ({ canvasElement }) => { + const canvas = within(canvasElement); + await userEvent.type(canvas.getByTestId('email'), 'michael@chromatic.com.com@com'); + await userEvent.type(canvas.getByTestId('password1'), 'testpasswordthatwontfail'); + await userEvent.click(canvas.getByTestId('submit')); + }, +}; + +export const StandardPasswordFailed: Story = { + ...Standard, + play: async (context) => { + const canvas = within(context.canvasElement); + await StandardEmailFilled.play!(context); + await userEvent.type(canvas.getByTestId('password1'), 'asdf'); + await userEvent.click(canvas.getByTestId('submit')); + }, +}; + +export const StandardFailHover: Story = { + ...StandardPasswordFailed, + play: async (context) => { + const canvas = within(context.canvasElement); + await StandardPasswordFailed.play!(context); + await sleep(100); + await userEvent.hover(canvas.getByTestId('password-error-info')); + }, +}; + +export const Verification: Story = { + args: { passwordVerification: true }, +}; + +export const VerificationPasssword1: Story = { + ...Verification, + play: async (context) => { + const canvas = within(context.canvasElement); + await StandardEmailFilled.play!(context); + await userEvent.type(canvas.getByTestId('password1'), 'asdfasdf'); + await userEvent.click(canvas.getByTestId('submit')); + }, +}; + +export const VerificationPasswordMismatch: Story = { + ...Verification, + play: async (context) => { + const canvas = within(context.canvasElement); + await StandardEmailFilled.play!(context); + await userEvent.type(canvas.getByTestId('password1'), 'asdfasdf'); + await userEvent.type(canvas.getByTestId('password2'), 'asdf1234'); + await userEvent.click(canvas.getByTestId('submit')); + }, +}; + +const sleep = (ms: number) => new Promise((r) => setTimeout(r, ms)); + +export const VerificationSuccess: Story = { + ...Verification, + play: async (context) => { + const canvas = within(context.canvasElement); + await StandardEmailFilled.play!(context); + await sleep(1000); + await userEvent.type(canvas.getByTestId('password1'), 'asdfasdf', { delay: 50 }); + await sleep(1000); + await userEvent.type(canvas.getByTestId('password2'), 'asdfasdf', { delay: 50 }); + await sleep(1000); + await userEvent.click(canvas.getByTestId('submit')); + }, +}; + +export const StandardWithRenderFunction: Story = { + ...Standard, + render: (args: AccountFormProps) => ( +
+

This uses a custom render

+ +
+ ), +}; diff --git a/examples/cra-ts-essentials/src/stories/testing-react/components/AccountForm.test.tsx b/examples/cra-ts-essentials/src/stories/testing-react/components/AccountForm.test.tsx new file mode 100644 index 00000000000..a15fe422477 --- /dev/null +++ b/examples/cra-ts-essentials/src/stories/testing-react/components/AccountForm.test.tsx @@ -0,0 +1,25 @@ +import React from 'react'; +import { render, screen } from '@testing-library/react'; + +import { composeStories, composeStory } from '@storybook/react'; + +import * as stories from './AccountForm.stories'; + +const { Standard } = composeStories(stories); + +test('renders form', async () => { + await render(); + expect(screen.getByTestId('email')).not.toBe(null); +}); + +test('fills input from play function', async () => { + // @ts-ignore + const StandardEmailFilled = composeStory(stories.StandardEmailFilled, stories.default); + const { container } = await render(); + + // @ts-ignore + await StandardEmailFilled.play({ canvasElement: container }); + + const emailInput = screen.getByTestId('email') as HTMLInputElement; + expect(emailInput.value).toBe('michael@chromatic.com'); +}); diff --git a/examples/cra-ts-essentials/src/stories/testing-react/components/AccountForm.tsx b/examples/cra-ts-essentials/src/stories/testing-react/components/AccountForm.tsx new file mode 100644 index 00000000000..b646a174143 --- /dev/null +++ b/examples/cra-ts-essentials/src/stories/testing-react/components/AccountForm.tsx @@ -0,0 +1,552 @@ +import React, { FC, HTMLAttributes, useCallback, useState } from 'react'; +import { keyframes, styled } from '@storybook/theming'; +import { + ErrorMessage, + Field as FormikInput, + Form as FormikForm, + Formik, + FormikProps, +} from 'formik'; +import { Icons, WithTooltip } from '@storybook/components'; + +const errorMap = { + email: { + required: { + normal: 'Please enter your email address', + tooltip: + 'We do require an email address and a password as a minimum in order to be able to create an account for you to log in with', + }, + format: { + normal: 'Please enter a correctly formatted email address', + tooltip: + 'Your email address is formatted incorrectly and is not correct - please double check for misspelling', + }, + }, + password: { + required: { + normal: 'Please enter a password', + tooltip: 'A password is requried to create an account', + }, + length: { + normal: 'Please enter a password of minimum 6 characters', + tooltip: + 'For security reasons we enforce a password length of minimum 6 characters - but have no other requirements', + }, + }, + verifiedPassword: { + required: { + normal: 'Please verify your password', + tooltip: + 'Verification of your password is required to ensure no errors in the spelling of the password', + }, + match: { + normal: 'Your passwords do not match', + tooltip: + 'Your verification password has to match your password to make sure you have not misspelled', + }, + }, +}; + +// https://emailregex.com/ +const email99RegExp = new RegExp( + // eslint-disable-next-line no-useless-escape + /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/ +); + +export interface AccountFormResponse { + success: boolean; +} + +export interface AccountFormValues { + email: string; + password: string; +} + +interface FormValues extends AccountFormValues { + verifiedPassword: string; +} + +interface FormErrors { + email?: string; + emailTooltip?: string; + password?: string; + passwordTooltip?: string; + verifiedPassword?: string; + verifiedPasswordTooltip?: string; +} + +export type AccountFormProps = { + passwordVerification?: boolean; + onSubmit?: (values: AccountFormValues) => void; + onTransactionStart?: (values: AccountFormValues) => void; + onTransactionEnd?: (values: AccountFormResponse) => void; +}; + +export const AccountForm: FC = ({ + passwordVerification, + onSubmit, + onTransactionStart, + onTransactionEnd, +}) => { + const [state, setState] = useState({ + transacting: false, + transactionSuccess: false, + transactionFailure: false, + }); + + const handleFormSubmit = useCallback( + async ({ email, password }: FormValues, { setSubmitting, resetForm }) => { + if (onSubmit) { + onSubmit({ email, password }); + } + + if (onTransactionStart) { + onTransactionStart({ email, password }); + } + + setSubmitting(true); + + setState({ + ...state, + transacting: true, + }); + + await new Promise((r) => setTimeout(r, 2100)); + + const success = Math.random() < 1; + + if (onTransactionEnd) { + onTransactionEnd({ success }); + } + + setSubmitting(false); + resetForm({ values: { email: '', password: '', verifiedPassword: '' } }); + + setState({ + ...state, + transacting: false, + transactionSuccess: success === true, + transactionFailure: success === false, + }); + }, + [setState, onTransactionEnd, onTransactionStart] + ); + + return ( + + + + Storybook icon + + + + + + + + <title>Storybook + + + + + + {!state.transactionSuccess && !state.transactionFailure && ( + Create an account to join the Storybook community + )} + + {state.transactionSuccess && !state.transactionFailure && ( + +

+ Everything is perfect. Your account is ready and we should probably get you started! +

+

So why don't you get started then?

+ { + setState({ + transacting: false, + transactionSuccess: false, + transactionFailure: false, + }); + }} + > + Go back + + + )} + {state.transactionFailure && !state.transactionSuccess && ( + +

What a mess, this API is not working

+

+ Someone should probably have a stern talking to about this, but it won't be me - coz + I'm gonna head out into the nice weather +

+ { + setState({ + transacting: false, + transactionSuccess: false, + transactionFailure: false, + }); + }} + > + Go back + + + )} + {!state.transactionSuccess && !state.transactionFailure && ( + { + const errors: FormErrors = {}; + + if (!email) { + errors.email = errorMap.email.required.normal; + errors.emailTooltip = errorMap.email.required.tooltip; + } else { + const validEmail = email.match(email99RegExp); + + if (validEmail === null) { + errors.email = errorMap.email.format.normal; + errors.emailTooltip = errorMap.email.format.tooltip; + } + } + + if (!password) { + errors.password = errorMap.password.required.normal; + errors.passwordTooltip = errorMap.password.required.tooltip; + } else if (password.length < 6) { + errors.password = errorMap.password.length.normal; + errors.passwordTooltip = errorMap.password.length.tooltip; + } + + if (passwordVerification && !verifiedPassword) { + errors.verifiedPassword = errorMap.verifiedPassword.required.normal; + errors.verifiedPasswordTooltip = errorMap.verifiedPassword.required.tooltip; + } else if (passwordVerification && password !== verifiedPassword) { + errors.verifiedPassword = errorMap.verifiedPassword.match.normal; + errors.verifiedPasswordTooltip = errorMap.verifiedPassword.match.tooltip; + } + + return errors; + }} + > + {({ errors: _errors, isSubmitting, dirty }: FormikProps) => { + const errors = _errors as FormErrors; + + return ( +
+ + + + {({ field }: { field: HTMLAttributes }) => ( + <> + + {errors.email && ( + {errors.emailTooltip}} + > + + + + + + )} + + )} + + + + + + {({ field }: { field: HTMLAttributes }) => ( + + )} + + {errors.password && ( + {errors.passwordTooltip}}> + + + + + + )} + + {passwordVerification && ( + + + + {({ field }: { field: HTMLAttributes }) => ( + + )} + + {errors.verifiedPassword && ( + {errors.verifiedPasswordTooltip}} + > + + + + + + )} + + )} + + + Create Account + + + Reset + + +
+ ); + }} + + )} + + + ); +}; + +const Wrapper = styled.section(({ theme }) => ({ + fontFamily: theme.typography.fonts.base, + display: 'flex', + flexDirection: 'column', + alignItems: 'center', + width: 450, + padding: 32, + backgroundColor: theme.background.content, + borderRadius: 7, +})); + +const Brand = styled.div({ + display: 'flex', + alignItems: 'center', + justifyContent: 'center', +}); + +const Title = styled.svg({ + height: 40, + zIndex: 1, + left: -32, + position: 'relative', +}); + +const logoAnimation = keyframes({ + '0': { + transform: 'rotateY(0deg)', + transformOrigin: '50% 5% 0', + }, + '100%': { + transform: 'rotateY(360deg)', + transformOrigin: '50% 5% 0', + }, +}); + +interface LogoProps { + transacting: boolean; +} + +const Logo = styled.svg( + ({ transacting }) => + transacting && { + animation: `${logoAnimation} 1250ms both infinite`, + }, + { height: 40, zIndex: 10, marginLeft: 32 } +); + +const Introduction = styled.p({ + marginTop: 20, + textAlign: 'center', +}); + +const Content = styled.div({ + display: 'flex', + alignItems: 'flex-start', + justifyContent: 'center', + width: 350, + minHeight: 189, + marginTop: 8, +}); + +const Presentation = styled.div({ + textAlign: 'center', +}); + +const Form = styled(FormikForm)({ + width: '100%', + alignSelf: 'flex-start', + '&[aria-disabled="true"]': { + opacity: 0.6, + }, +}); + +const FieldWrapper = styled.div({ + display: 'flex', + flexDirection: 'column', + justifyContent: 'stretch', + marginBottom: 10, +}); + +const Label = styled.label({ + fontSize: 13, + fontWeight: 500, + marginBottom: 6, +}); + +const Input = styled.input(({ theme }) => ({ + fontSize: 14, + color: theme.color.defaultText, + padding: '10px 15px', + borderRadius: 4, + appearance: 'none', + outline: 'none', + border: '0 none', + boxShadow: 'rgb(0 0 0 / 10%) 0px 0px 0px 1px inset', + '&:focus': { + boxShadow: 'rgb(30 167 253) 0px 0px 0px 1px inset', + }, + '&:active': { + boxShadow: 'rgb(30 167 253) 0px 0px 0px 1px inset', + }, + '&[aria-invalid="true"]': { + boxShadow: 'rgb(255 68 0) 0px 0px 0px 1px inset', + }, +})); + +const ErrorWrapper = styled.div({ + display: 'flex', + alignItems: 'flex-start', + fontSize: 11, + marginTop: 6, + cursor: 'help', +}); + +const ErrorIcon = styled(Icons)(({ theme }) => ({ + fill: theme.color.defaultText, + opacity: 0.8, + marginRight: 6, + marginLeft: 2, + marginTop: 1, +})); + +const ErrorTooltip = styled.div(({ theme }) => ({ + fontFamily: theme.typography.fonts.base, + fontSize: 13, + padding: 8, + maxWidth: 350, +})); + +const Actions = styled.div({ + alignSelf: 'stretch', + display: 'flex', + justifyContent: 'space-between', + marginTop: 24, +}); + +const Error = styled(ErrorMessage)({}); + +interface ButtonProps { + dirty?: boolean; +} + +const Button = styled.button({ + backgroundColor: 'transparent', + border: '0 none', + outline: 'none', + appearance: 'none', + fontWeight: 500, + fontSize: 12, + flexBasis: '50%', + cursor: 'pointer', + padding: '11px 16px', + borderRadius: 4, + textTransform: 'uppercase', + '&:focus': { + textDecoration: 'underline', + fontWeight: 700, + }, + '&:active': { + textDecoration: 'underline', + fontWeight: 700, + }, + '&[aria-disabled="true"]': { + cursor: 'default', + }, +}); + +const Submit = styled(Button)(({ theme, dirty }) => ({ + marginRight: 8, + backgroundColor: theme.color.secondary, + color: theme.color.inverseText, + opacity: dirty ? 1 : 0.6, + boxShadow: 'rgb(30 167 253 / 10%) 0 0 0 1px inset', +})); + +const Reset = styled(Button)(({ theme }) => ({ + marginLeft: 8, + boxShadow: 'rgb(30 167 253) 0 0 0 1px inset', + color: theme.color.secondary, +})); diff --git a/examples/cra-ts-essentials/src/stories/testing-react/components/Button.stories.tsx b/examples/cra-ts-essentials/src/stories/testing-react/components/Button.stories.tsx new file mode 100644 index 00000000000..cea434dba36 --- /dev/null +++ b/examples/cra-ts-essentials/src/stories/testing-react/components/Button.stories.tsx @@ -0,0 +1,87 @@ +/* eslint-disable storybook/use-storybook-testing-library */ +import React from 'react'; +import { StoryFn as CSF2Story, StoryObj as CSF3Story, Meta } from '@storybook/react'; +import { screen } from '@testing-library/react'; +import userEvent from '@testing-library/user-event'; + +import { Button, ButtonProps } from './Button'; + +export default { + title: 'Example/Button', + component: Button, + argTypes: { + backgroundColor: { control: 'color' }, + label: { defaultValue: 'Button' }, + }, +} as Meta; + +const Template: CSF2Story = (args) => ; +}; +StoryWithLocale.storyName = 'WithLocale'; + +export const StoryWithParamsAndDecorator: CSF2Story = (args) => { + return + ); +}; diff --git a/examples/cra-ts-essentials/src/stories/testing-react/components/__snapshots__/internals.test.tsx.snap b/examples/cra-ts-essentials/src/stories/testing-react/components/__snapshots__/internals.test.tsx.snap new file mode 100644 index 00000000000..68cf24c2043 --- /dev/null +++ b/examples/cra-ts-essentials/src/stories/testing-react/components/__snapshots__/internals.test.tsx.snap @@ -0,0 +1,127 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Renders CSF3Button story 1`] = ` + +
+
+ Locale: + en +
+ +
+ +`; + +exports[`Renders CSF3ButtonWithRender story 1`] = ` + +
+
+ Locale: + en +
+
+

+ I am a custom render function +

+ +
+
+ +`; + +exports[`Renders InputFieldFilled story 1`] = ` + +
+
+ Locale: + en +
+ +
+ +`; + +exports[`Renders Primary story 1`] = ` + +
+
+ Locale: + en +
+ +
+ +`; + +exports[`Renders Secondary story 1`] = ` + +
+
+ Locale: + en +
+ +
+ +`; + +exports[`Renders StoryWithLocale story 1`] = ` + +
+
+ Locale: + en +
+ +
+ +`; + +exports[`Renders StoryWithParamsAndDecorator story 1`] = ` + +
+
+ Locale: + en +
+ +
+ +`; diff --git a/examples/cra-ts-essentials/src/stories/testing-react/components/button.css b/examples/cra-ts-essentials/src/stories/testing-react/components/button.css new file mode 100644 index 00000000000..dc91dc76370 --- /dev/null +++ b/examples/cra-ts-essentials/src/stories/testing-react/components/button.css @@ -0,0 +1,30 @@ +.storybook-button { + font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; + font-weight: 700; + border: 0; + border-radius: 3em; + cursor: pointer; + display: inline-block; + line-height: 1; +} +.storybook-button--primary { + color: white; + background-color: #1ea7fd; +} +.storybook-button--secondary { + color: #333; + background-color: transparent; + box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset; +} +.storybook-button--small { + font-size: 12px; + padding: 10px 16px; +} +.storybook-button--medium { + font-size: 14px; + padding: 11px 20px; +} +.storybook-button--large { + font-size: 16px; + padding: 12px 24px; +} diff --git a/examples/cra-ts-essentials/src/stories/testing-react/components/internals.test.tsx b/examples/cra-ts-essentials/src/stories/testing-react/components/internals.test.tsx new file mode 100644 index 00000000000..e209c67651a --- /dev/null +++ b/examples/cra-ts-essentials/src/stories/testing-react/components/internals.test.tsx @@ -0,0 +1,112 @@ +/* eslint-disable @typescript-eslint/no-non-null-assertion */ +import React from 'react'; +import addons from '@storybook/addons'; +import { render, screen } from '@testing-library/react'; + +import { composeStories, composeStory } from '@storybook/react'; + +import * as stories from './Button.stories'; + +import * as globalConfig from '../../../../.storybook/preview'; + +const { StoryWithParamsAndDecorator } = composeStories(stories); + +test('returns composed args including default values from argtypes', () => { + expect(StoryWithParamsAndDecorator.args).toEqual({ + ...stories.StoryWithParamsAndDecorator.args, + label: stories.default!.argTypes!.label!.defaultValue, + }); +}); + +test('returns composed parameters from story', () => { + expect(StoryWithParamsAndDecorator.parameters).toEqual( + expect.objectContaining({ + ...stories.StoryWithParamsAndDecorator.parameters, + ...globalConfig.parameters, + }) + ); +}); + +// common in addons that need to communicate between manager and preview +test('should pass with decorators that need addons channel', () => { + // @ts-ignore + const PrimaryWithChannels = composeStory(stories.Primary, stories.default, { + decorators: [ + (StoryFn: any) => { + addons.getChannel(); + return ; + }, + ], + }); + render(Hello world); + const buttonElement = screen.getByText(/Hello world/i); + expect(buttonElement).not.toBeNull(); +}); + +describe('Unsupported formats', () => { + test('should throw error StoryFn.story notation', () => { + const UnsupportedStory = () =>
hello world
; + UnsupportedStory.story = { parameters: {} }; + + const UnsupportedStoryModule: any = { + default: {}, + UnsupportedStory, + }; + + expect(() => { + composeStories(UnsupportedStoryModule); + }).toThrow(); + }); + + test('should throw error with non component stories', () => { + const UnsupportedStoryModule: any = { + default: {}, + UnsupportedStory: 123, + }; + + expect(() => { + composeStories(UnsupportedStoryModule); + }).toThrow(); + }); +}); + +describe('non-story exports', () => { + test('should filter non-story exports with excludeStories', () => { + const StoryModuleWithNonStoryExports = { + default: { + title: 'Some/Component', + excludeStories: /.*Data/, + }, + LegitimateStory: () =>
hello world
, + mockData: {}, + }; + + const result = composeStories(StoryModuleWithNonStoryExports); + expect(Object.keys(result)).not.toContain('mockData'); + }); + + test('should filter non-story exports with includeStories', () => { + const StoryModuleWithNonStoryExports = { + default: { + title: 'Some/Component', + includeStories: /.*Story/, + }, + LegitimateStory: () =>
hello world
, + mockData: {}, + }; + + const result = composeStories(StoryModuleWithNonStoryExports); + expect(Object.keys(result)).not.toContain('mockData'); + }); +}); + +// Batch snapshot testing +const testCases = Object.values(composeStories(stories)).map((Story) => [ + // The ! is necessary in Typescript only, as the property is part of a partial type + Story.storyName!, + Story, +]); +test.each(testCases)('Renders %s story', async (_storyName, Story) => { + const tree = await render(); + expect(tree.baseElement).toMatchSnapshot(); +}); diff --git a/examples/cra-ts-essentials/tsconfig.json b/examples/cra-ts-essentials/tsconfig.json index 450e0014a4e..4e81ac32da5 100644 --- a/examples/cra-ts-essentials/tsconfig.json +++ b/examples/cra-ts-essentials/tsconfig.json @@ -6,7 +6,7 @@ "experimentalDecorators": true, "emitDecoratorMetadata": true, "jsx": "react", - "module": "commonjs", + "module": "esnext", "skipLibCheck": true, "allowSyntheticDefaultImports": true, "esModuleInterop": true, @@ -18,9 +18,17 @@ "lib": [ "es2017", "dom" - ] + ], + "allowJs": true, + "strict": true, + "forceConsistentCasingInFileNames": true, + "noFallthroughCasesInSwitch": true, + "moduleResolution": "node", + "resolveJsonModule": true, + "isolatedModules": true, + "noEmit": true }, "include": [ "src" ] -} \ No newline at end of file +} diff --git a/examples/react-ts/.storybook/preview.js b/examples/react-ts/.storybook/preview.tsx similarity index 100% rename from examples/react-ts/.storybook/preview.js rename to examples/react-ts/.storybook/preview.tsx diff --git a/examples/react-ts/package.json b/examples/react-ts/package.json index 731f86269da..f839df256c2 100644 --- a/examples/react-ts/package.json +++ b/examples/react-ts/package.json @@ -26,6 +26,7 @@ "@storybook/react": "6.5.0-alpha.23", "@storybook/theming": "6.5.0-alpha.23", "@testing-library/dom": "^7.31.2", + "@testing-library/react": "12.1.2", "@testing-library/user-event": "^13.1.9", "@types/babel__preset-env": "^7", "@types/react": "^16.14.2", diff --git a/examples/react-ts/src/AccountForm.stories.tsx b/examples/react-ts/src/AccountForm.stories.tsx index d670d64ee45..1a4806881f0 100644 --- a/examples/react-ts/src/AccountForm.stories.tsx +++ b/examples/react-ts/src/AccountForm.stories.tsx @@ -1,11 +1,12 @@ +/* eslint-disable @typescript-eslint/no-non-null-assertion */ /* eslint-disable storybook/await-interactions */ /* eslint-disable storybook/use-storybook-testing-library */ // @TODO: use addon-interactions and remove the rule disable above import React from 'react'; import { ComponentStoryObj, ComponentMeta } from '@storybook/react'; -import { screen } from '@testing-library/dom'; +import { screen } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; -import { AccountForm } from './AccountForm'; +import { AccountForm, AccountFormProps } from './AccountForm'; export default { // Title not needed due to CSF3 auto-title @@ -20,17 +21,19 @@ export default { // Standard.args = { passwordVerification: false }; // Standard.play = () => userEvent.type(screen.getByTestId('email'), 'michael@chromatic.com'); -export const Standard: ComponentStoryObj = { +type Story = ComponentStoryObj; + +export const Standard: Story = { // render: (args: AccountFormProps) => , args: { passwordVerification: false }, }; -export const StandardEmailFilled = { +export const StandardEmailFilled: Story = { ...Standard, play: () => userEvent.type(screen.getByTestId('email'), 'michael@chromatic.com'), }; -export const StandardEmailFailed = { +export const StandardEmailFailed: Story = { ...Standard, play: async () => { await userEvent.type(screen.getByTestId('email'), 'michael@chromatic.com.com@com'); @@ -39,41 +42,41 @@ export const StandardEmailFailed = { }, }; -export const StandardPasswordFailed = { +export const StandardPasswordFailed: Story = { ...Standard, - play: async () => { - await StandardEmailFilled.play(); + play: async (context) => { + await StandardEmailFilled.play!(context); await userEvent.type(screen.getByTestId('password1'), 'asdf'); await userEvent.click(screen.getByTestId('submit')); }, }; -export const StandardFailHover = { +export const StandardFailHover: Story = { ...StandardPasswordFailed, - play: async () => { - await StandardPasswordFailed.play(); + play: async (context) => { + await StandardPasswordFailed.play!(context); await sleep(100); await userEvent.hover(screen.getByTestId('password-error-info')); }, }; -export const Verification: ComponentStoryObj = { +export const Verification: Story = { args: { passwordVerification: true }, }; -export const VerificationPasssword1 = { +export const VerificationPasssword1: Story = { ...Verification, - play: async () => { - await StandardEmailFilled.play(); + play: async (context) => { + await StandardEmailFilled.play!(context); await userEvent.type(screen.getByTestId('password1'), 'asdfasdf'); await userEvent.click(screen.getByTestId('submit')); }, }; -export const VerificationPasswordMismatch = { +export const VerificationPasswordMismatch: Story = { ...Verification, - play: async () => { - await StandardEmailFilled.play(); + play: async (context) => { + await StandardEmailFilled.play!(context); await userEvent.type(screen.getByTestId('password1'), 'asdfasdf'); await userEvent.type(screen.getByTestId('password2'), 'asdf1234'); await userEvent.click(screen.getByTestId('submit')); @@ -82,10 +85,10 @@ export const VerificationPasswordMismatch = { const sleep = (ms: number) => new Promise((r) => setTimeout(r, ms)); -export const VerificationSuccess = { +export const VerificationSuccess: Story = { ...Verification, - play: async () => { - await StandardEmailFilled.play(); + play: async (context) => { + await StandardEmailFilled.play!(context); await sleep(1000); await userEvent.type(screen.getByTestId('password1'), 'asdfasdf', { delay: 50 }); await sleep(1000); @@ -94,3 +97,13 @@ export const VerificationSuccess = { await userEvent.click(screen.getByTestId('submit')); }, }; + +export const StandardWithRenderFunction: Story = { + ...Standard, + render: (args: AccountFormProps) => ( +
+

This uses a custom render

+ +
+ ), +}; diff --git a/examples/react-ts/src/AccountForm.test.tsx b/examples/react-ts/src/AccountForm.test.tsx new file mode 100644 index 00000000000..863fabe75e0 --- /dev/null +++ b/examples/react-ts/src/AccountForm.test.tsx @@ -0,0 +1,24 @@ +import React from 'react'; +import { render, screen } from '@testing-library/react'; + +import { composeStories, composeStory } from '@storybook/react'; + +import * as stories from './AccountForm.stories'; + +const { Standard } = composeStories(stories); + +test('renders form', async () => { + await render(); +}); + +test('fills input from play function', async () => { + // @ts-ignore + const StandardEmailFilled = composeStory(stories.StandardEmailFilled, stories.default); + const { container } = await render(); + + // @ts-ignore + await StandardEmailFilled.play({ canvasElement: container }); + + const emailInput = screen.getByTestId('email') as HTMLInputElement; + expect(emailInput.value).toBe('michael@chromatic.com'); +}); diff --git a/yarn.lock b/yarn.lock index 1c885aabd8f..3161316ab6d 100644 --- a/yarn.lock +++ b/yarn.lock @@ -7766,6 +7766,7 @@ __metadata: "@storybook/react": 6.5.0-alpha.23 "@storybook/theming": 6.5.0-alpha.23 "@testing-library/dom": ^7.31.2 + "@testing-library/react": 12.1.2 "@testing-library/user-event": ^13.1.9 "@types/babel__preset-env": ^7 "@types/react": ^16.14.2 @@ -9093,7 +9094,7 @@ __metadata: languageName: node linkType: hard -"@testing-library/dom@npm:^8.3.0": +"@testing-library/dom@npm:^8.0.0, @testing-library/dom@npm:^8.3.0": version: 8.11.2 resolution: "@testing-library/dom@npm:8.11.2" dependencies: @@ -9126,6 +9127,19 @@ __metadata: languageName: node linkType: hard +"@testing-library/react@npm:12.1.2": + version: 12.1.2 + resolution: "@testing-library/react@npm:12.1.2" + dependencies: + "@babel/runtime": ^7.12.5 + "@testing-library/dom": ^8.0.0 + peerDependencies: + react: "*" + react-dom: "*" + checksum: c8579252f5f0a23df368253108bbe5b4f26abb9ed5f514746ba6b2ce1a6d09592900526ef6284466af959b50fbb7afa1f37eb2ff629fc91abe70dade3da6cc9a + languageName: node + linkType: hard + "@testing-library/react@npm:^11.2.2": version: 11.2.7 resolution: "@testing-library/react@npm:11.2.7" @@ -17648,12 +17662,17 @@ __metadata: "@storybook/addon-ie11": 0.0.7--canary.5e87b64.0 "@storybook/addons": 6.5.0-alpha.23 "@storybook/builder-webpack4": 6.5.0-alpha.23 + "@storybook/components": 6.5.0-alpha.23 + "@storybook/jest": ^0.0.5 "@storybook/preset-create-react-app": ^3.1.6 "@storybook/react": 6.5.0-alpha.23 + "@storybook/testing-library": ^0.0.7 + "@storybook/theming": 6.5.0-alpha.23 "@types/jest": ^26.0.16 "@types/node": ^14.14.20 || ^16.0.0 "@types/react": ^16.14.2 "@types/react-dom": 16.9.10 + formik: 2.2.9 global: ^4.4.0 react: 16.14.0 react-dom: 16.14.0 @@ -23207,7 +23226,7 @@ __metadata: languageName: node linkType: hard -"formik@npm:^2.2.9": +"formik@npm:2.2.9, formik@npm:^2.2.9": version: 2.2.9 resolution: "formik@npm:2.2.9" dependencies: From d9ac7cb0302c2a4e8f81d28754fca5579ecc0c8c Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Wed, 19 Jan 2022 17:17:04 +0100 Subject: [PATCH 004/171] fix storyStore tests --- lib/store/src/StoryStore.test.ts | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/lib/store/src/StoryStore.test.ts b/lib/store/src/StoryStore.test.ts index 8b882b373f9..ce28c254f1a 100644 --- a/lib/store/src/StoryStore.test.ts +++ b/lib/store/src/StoryStore.test.ts @@ -1,18 +1,18 @@ import { AnyFramework, ProjectAnnotations } from '@storybook/csf'; import global from 'global'; -import { prepareStory } from './prepareStory'; -import { processCSFFile } from './processCSFFile'; +import { prepareStory } from './csf/prepareStory'; +import { processCSFFile } from './csf/processCSFFile'; import { StoryStore } from './StoryStore'; import { StoryIndex } from './types'; import { HooksContext } from './hooks'; // Spy on prepareStory/processCSFFile -jest.mock('./prepareStory', () => ({ - prepareStory: jest.fn(jest.requireActual('./prepareStory').prepareStory), +jest.mock('./csf/prepareStory', () => ({ + prepareStory: jest.fn(jest.requireActual('./csf/prepareStory').prepareStory), })); -jest.mock('./processCSFFile', () => ({ - processCSFFile: jest.fn(jest.requireActual('./processCSFFile').processCSFFile), +jest.mock('./csf/processCSFFile', () => ({ + processCSFFile: jest.fn(jest.requireActual('./csf/processCSFFile').processCSFFile), })); jest.mock('global', () => ({ From 9ccbaacafad5b38985638df7a5fb86e582a3fa55 Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Wed, 19 Jan 2022 17:17:57 +0100 Subject: [PATCH 005/171] improve testing utility types --- app/react/src/client/testing/types.ts | 21 +++++++++++---------- lib/store/src/csf/testing-utils/index.ts | 22 ++++++++++------------ 2 files changed, 21 insertions(+), 22 deletions(-) diff --git a/app/react/src/client/testing/types.ts b/app/react/src/client/testing/types.ts index 574495b0177..ac8d58ce777 100644 --- a/app/react/src/client/testing/types.ts +++ b/app/react/src/client/testing/types.ts @@ -16,9 +16,7 @@ import type { */ export type GlobalConfig = NormalizedProjectAnnotations; -export type StoryFile = { default: Meta; __esModule?: boolean; __namedExportsOrder?: any }; - -export type TestingStory = StoryFn | StoryObj; +export type StoryFile = { default: Meta; __esModule?: boolean; __namedExportsOrder?: any }; export type TestingStoryPlayContext = Partial> & Pick; @@ -29,15 +27,18 @@ export type TestingStoryPlayFn = ( export type StoryFn = OriginalStoryFn & { play: TestingStoryPlayFn }; +export type TestingStory = StoryFn | StoryObj; + /** - * T represents the whole es module of a stories file. K of T means named exports (basically the Story type) + * T represents the whole ES module of a stories file. K of T means named exports (basically the Story type) * 1. pick the keys K of T that have properties that are Story * 2. infer the actual prop type for each Story * 3. reconstruct Story with Partial. Story -> Story> */ -export type StoriesWithPartialProps = any; -// { -// [K in keyof T as T[K] extends TestingStory ? K : never]: T[K] extends TestingStory -// ? StoryFn> -// : unknown; -// }; +export type StoriesWithPartialProps = { + // @TODO once we can use Typescript 4.0 do this to exclude nonStory exports: + // replace [K in keyof TModule] with [K in keyof TModule as TModule[K] extends TestingStory ? K : never] + [K in keyof TModule]: TModule[K] extends TestingStory + ? StoryFn> + : unknown; +}; diff --git a/lib/store/src/csf/testing-utils/index.ts b/lib/store/src/csf/testing-utils/index.ts index 7ebeece296b..bcbcb1f943b 100644 --- a/lib/store/src/csf/testing-utils/index.ts +++ b/lib/store/src/csf/testing-utils/index.ts @@ -4,6 +4,7 @@ import { AnnotatedStoryFn, ComponentAnnotations, Args, + StoryContext, } from '@storybook/csf'; import { prepareStory } from '../prepareStory'; @@ -18,14 +19,11 @@ if (process.env.NODE_ENV === 'test') { addons.setChannel(mockChannel()); } -export type StoryFile = { default: any; __esModule?: boolean; __namedExportsOrder?: any }; - -type Entries = { - [K in keyof T]: [K, T[K]]; -}[keyof T]; -export function objectEntries(t: T): Entries[] { - return Object.entries(t) as any; -} +export type StoryFile = { + default: Record; + __esModule?: boolean; + __namedExportsOrder?: string[]; +}; export function composeStory< TFramework extends AnyFramework = AnyFramework, @@ -56,14 +54,14 @@ export function composeStory< ); const composedStory = (extraArgs: Partial) => { - const context = { + const context: Partial = { ...preparedStory, hooks: new HooksContext(), globals: defaultGlobals, args: { ...preparedStory.initialArgs, ...extraArgs }, - } as any; + }; - return preparedStory.unboundStoryFn(context); + return preparedStory.unboundStoryFn(context as StoryContext); }; composedStory.storyName = story.storyName || story.name; @@ -80,7 +78,7 @@ export function composeStories( composeStoryFn: typeof composeStory ) { const { default: meta, __esModule, __namedExportsOrder, ...stories } = storiesImport; - const composedStories = objectEntries(stories).reduce((storiesMap, [key, _story]) => { + const composedStories = Object.entries(stories).reduce((storiesMap, [key, _story]) => { if (!isExportStory(key as string, meta)) { return storiesMap; } From bef9e354825e7f60d98524ba840d485dfdcd165f Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Wed, 19 Jan 2022 17:18:26 +0100 Subject: [PATCH 006/171] test(store): add tests for testing utils --- lib/store/src/csf/testing-utils/index.test.ts | 67 +++++++++++++++++++ 1 file changed, 67 insertions(+) create mode 100644 lib/store/src/csf/testing-utils/index.test.ts diff --git a/lib/store/src/csf/testing-utils/index.test.ts b/lib/store/src/csf/testing-utils/index.test.ts new file mode 100644 index 00000000000..2eccf6c0b58 --- /dev/null +++ b/lib/store/src/csf/testing-utils/index.test.ts @@ -0,0 +1,67 @@ +import { composeStory, composeStories } from '.'; + +describe('composeStory', () => { + const meta = { + title: 'Button', + parameters: { + firstAddon: true, + }, + args: { + label: 'Hello World', + primary: true, + }, + }; + + test('should return story with composed args and parameters', () => { + const Story = () => {}; + Story.args = { primary: true }; + Story.parameters = { + parameters: { + secondAddon: true, + }, + }; + + const composedStory = composeStory(Story, meta); + expect(composedStory.args).toEqual({ ...Story.args, ...meta.args }); + expect(composedStory.parameters).toEqual( + // why is this erroring in TS? + expect.objectContaining({ ...Story.parameters, ...meta.parameters }) + ); + }); + + test('should throw an error if Story is undefined', () => { + expect(() => { + composeStory(undefined, meta); + }).toThrow(); + }); +}); + +describe('composeStories', () => { + test('should call composeStoryFn with stories', () => { + const composeConfigFn = jest.fn((v) => v); + const module = { + default: { + title: 'Button', + }, + StoryOne: () => {}, + StoryTwo: () => {}, + }; + const globalConfig = {}; + composeStories(module, globalConfig, composeConfigFn); + expect(composeConfigFn).toHaveBeenCalledWith(module.StoryOne, module.default, globalConfig); + expect(composeConfigFn).toHaveBeenCalledWith(module.StoryTwo, module.default, globalConfig); + }); + + test('should not call composeStoryFn for non-story exports', () => { + const composeConfigFn = jest.fn((v) => v); + const module = { + default: { + title: 'Button', + excludeStories: /Data/, + }, + mockData: {}, + }; + composeStories(module, {}, composeConfigFn); + expect(composeConfigFn).not.toHaveBeenCalled(); + }); +}); From 7571c0e55e58552b0baf2e6c95e31c911a807892 Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Wed, 19 Jan 2022 17:33:50 +0100 Subject: [PATCH 007/171] chore: make example stories CSF version more explicit in cra-ts-essentials --- .../components/Button.stories.tsx | 34 +++--- .../testing-react/components/Button.test.tsx | 28 +++-- .../__snapshots__/internals.test.tsx.snap | 110 +++++++++--------- .../components/internals.test.tsx | 14 +-- lib/store/src/csf/testing-utils/index.ts | 1 + 5 files changed, 93 insertions(+), 94 deletions(-) diff --git a/examples/cra-ts-essentials/src/stories/testing-react/components/Button.stories.tsx b/examples/cra-ts-essentials/src/stories/testing-react/components/Button.stories.tsx index cea434dba36..bd5f81fb0d5 100644 --- a/examples/cra-ts-essentials/src/stories/testing-react/components/Button.stories.tsx +++ b/examples/cra-ts-essentials/src/stories/testing-react/components/Button.stories.tsx @@ -17,16 +17,8 @@ export default { const Template: CSF2Story = (args) => ; }; -StoryWithLocale.storyName = 'WithLocale'; +CSF2StoryWithLocale.storyName = 'WithLocale'; -export const StoryWithParamsAndDecorator: CSF2Story = (args) => { +export const CSF2StoryWithParamsAndDecorator: CSF2Story = (args) => { return + + +`; + +exports[`Renders CSF2StoryWithLocale story 1`] = ` + +
+
+ Locale: + en +
+ +
+ +`; + +exports[`Renders CSF2StoryWithParamsAndDecorator story 1`] = ` + +
+
+ Locale: + en +
+ +
+ +`; + exports[`Renders CSF3Button story 1`] = `
@@ -43,7 +96,7 @@ exports[`Renders CSF3ButtonWithRender story 1`] = ` `; -exports[`Renders InputFieldFilled story 1`] = ` +exports[`Renders CSF3InputFieldFilled story 1`] = `
@@ -55,7 +108,7 @@ exports[`Renders InputFieldFilled story 1`] = ` `; -exports[`Renders Primary story 1`] = ` +exports[`Renders CSF3Primary story 1`] = `
@@ -72,56 +125,3 @@ exports[`Renders Primary story 1`] = `
`; - -exports[`Renders Secondary story 1`] = ` - -
-
- Locale: - en -
- -
- -`; - -exports[`Renders StoryWithLocale story 1`] = ` - -
-
- Locale: - en -
- -
- -`; - -exports[`Renders StoryWithParamsAndDecorator story 1`] = ` - -
-
- Locale: - en -
- -
- -`; diff --git a/examples/cra-ts-essentials/src/stories/testing-react/components/internals.test.tsx b/examples/cra-ts-essentials/src/stories/testing-react/components/internals.test.tsx index e209c67651a..9dfda44ecbf 100644 --- a/examples/cra-ts-essentials/src/stories/testing-react/components/internals.test.tsx +++ b/examples/cra-ts-essentials/src/stories/testing-react/components/internals.test.tsx @@ -9,19 +9,19 @@ import * as stories from './Button.stories'; import * as globalConfig from '../../../../.storybook/preview'; -const { StoryWithParamsAndDecorator } = composeStories(stories); +const { CSF2StoryWithParamsAndDecorator } = composeStories(stories); test('returns composed args including default values from argtypes', () => { - expect(StoryWithParamsAndDecorator.args).toEqual({ - ...stories.StoryWithParamsAndDecorator.args, - label: stories.default!.argTypes!.label!.defaultValue, + expect(CSF2StoryWithParamsAndDecorator.args).toEqual({ + ...stories.CSF2StoryWithParamsAndDecorator.args, + label: stories.default.argTypes!.label!.defaultValue, }); }); test('returns composed parameters from story', () => { - expect(StoryWithParamsAndDecorator.parameters).toEqual( + expect(CSF2StoryWithParamsAndDecorator.parameters).toEqual( expect.objectContaining({ - ...stories.StoryWithParamsAndDecorator.parameters, + ...stories.CSF2StoryWithParamsAndDecorator.parameters, ...globalConfig.parameters, }) ); @@ -30,7 +30,7 @@ test('returns composed parameters from story', () => { // common in addons that need to communicate between manager and preview test('should pass with decorators that need addons channel', () => { // @ts-ignore - const PrimaryWithChannels = composeStory(stories.Primary, stories.default, { + const PrimaryWithChannels = composeStory(stories.CSF3Primary, stories.default, { decorators: [ (StoryFn: any) => { addons.getChannel(); diff --git a/lib/store/src/csf/testing-utils/index.ts b/lib/store/src/csf/testing-utils/index.ts index bcbcb1f943b..d11f5ed68bd 100644 --- a/lib/store/src/csf/testing-utils/index.ts +++ b/lib/store/src/csf/testing-utils/index.ts @@ -66,6 +66,7 @@ export function composeStory< composedStory.storyName = story.storyName || story.name; composedStory.args = preparedStory.initialArgs; + // @TODO this should be partial play fn that works by just passing canvasElement composedStory.play = preparedStory.playFunction; composedStory.parameters = preparedStory.parameters; From 4a606b5c2ba457c91a4c10ec5ab24df0516da247 Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Fri, 21 Jan 2022 14:16:00 +0100 Subject: [PATCH 008/171] support csf 2 and csf 3 in testing utilities --- app/react/src/client/testing/index.ts | 5 ++--- lib/store/src/csf/testing-utils/index.ts | 10 +++++++--- 2 files changed, 9 insertions(+), 6 deletions(-) diff --git a/app/react/src/client/testing/index.ts b/app/react/src/client/testing/index.ts index 7ce12904ea0..902a4a40f90 100644 --- a/app/react/src/client/testing/index.ts +++ b/app/react/src/client/testing/index.ts @@ -4,11 +4,10 @@ import { } from '@storybook/store'; // eslint-disable-next-line import/no-extraneous-dependencies import { composeConfigs } from '@storybook/preview-web'; -import type { AnnotatedStoryFn } from '@storybook/csf'; import { render } from '../preview/render'; import type { Meta, ReactFramework } from '../preview/types-6-0'; -import type { StoriesWithPartialProps, GlobalConfig, StoryFile } from './types'; +import type { StoriesWithPartialProps, GlobalConfig, StoryFile, TestingStory } from './types'; const defaultGlobalConfig: GlobalConfig = { render, @@ -38,7 +37,7 @@ export function setGlobalConfig(config: GlobalConfig) { } export function composeStory( - story: AnnotatedStoryFn, + story: TestingStory, meta: Meta, globalConfig: GlobalConfig = globalStorybookConfig ) { diff --git a/lib/store/src/csf/testing-utils/index.ts b/lib/store/src/csf/testing-utils/index.ts index d11f5ed68bd..acdbb1cf984 100644 --- a/lib/store/src/csf/testing-utils/index.ts +++ b/lib/store/src/csf/testing-utils/index.ts @@ -2,6 +2,7 @@ import { isExportStory, AnyFramework, AnnotatedStoryFn, + StoryAnnotations, ComponentAnnotations, Args, StoryContext, @@ -25,11 +26,15 @@ export type StoryFile = { __namedExportsOrder?: string[]; }; +type PartialPlayFn = ( + context: Partial & Pick +) => Promise | void; + export function composeStory< TFramework extends AnyFramework = AnyFramework, TArgs extends Args = Args >( - story: AnnotatedStoryFn, + story: AnnotatedStoryFn | StoryAnnotations, meta: ComponentAnnotations, globalConfig: NormalizedProjectAnnotations = {} ) { @@ -66,8 +71,7 @@ export function composeStory< composedStory.storyName = story.storyName || story.name; composedStory.args = preparedStory.initialArgs; - // @TODO this should be partial play fn that works by just passing canvasElement - composedStory.play = preparedStory.playFunction; + composedStory.play = preparedStory.playFunction as PartialPlayFn; composedStory.parameters = preparedStory.parameters; return composedStory; From 682dfe34d647071385010e373754ce3d4c6fd0b2 Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Fri, 21 Jan 2022 14:25:16 +0100 Subject: [PATCH 009/171] chore(storybook): remove now unnecessary ts-ignores --- .../stories/testing-react/components/AccountForm.test.tsx | 2 -- .../src/stories/testing-react/components/Button.test.tsx | 7 ------- .../stories/testing-react/components/internals.test.tsx | 1 - 3 files changed, 10 deletions(-) diff --git a/examples/cra-ts-essentials/src/stories/testing-react/components/AccountForm.test.tsx b/examples/cra-ts-essentials/src/stories/testing-react/components/AccountForm.test.tsx index a15fe422477..4dd5f7bef31 100644 --- a/examples/cra-ts-essentials/src/stories/testing-react/components/AccountForm.test.tsx +++ b/examples/cra-ts-essentials/src/stories/testing-react/components/AccountForm.test.tsx @@ -13,11 +13,9 @@ test('renders form', async () => { }); test('fills input from play function', async () => { - // @ts-ignore const StandardEmailFilled = composeStory(stories.StandardEmailFilled, stories.default); const { container } = await render(); - // @ts-ignore await StandardEmailFilled.play({ canvasElement: container }); const emailInput = screen.getByTestId('email') as HTMLInputElement; diff --git a/examples/cra-ts-essentials/src/stories/testing-react/components/Button.test.tsx b/examples/cra-ts-essentials/src/stories/testing-react/components/Button.test.tsx index 961ff4576dd..b35aac700fb 100644 --- a/examples/cra-ts-essentials/src/stories/testing-react/components/Button.test.tsx +++ b/examples/cra-ts-essentials/src/stories/testing-react/components/Button.test.tsx @@ -1,5 +1,3 @@ -/* eslint-disable @typescript-eslint/ban-ts-comment */ -/* eslint-disable no-shadow */ import React from 'react'; import { render, screen } from '@testing-library/react'; @@ -50,7 +48,6 @@ describe('GlobalConfig', () => { test('renders with custom globalConfig', () => { const WithPortugueseText = composeStory(stories.CSF2StoryWithLocale, stories.default, { - // @TODO globals should be able to get custom stuff like custom globalTypes. Currently there is a type error globalTypes: { locale: { defaultValue: 'pt' } } as any, }); const { getByText } = render(); @@ -61,7 +58,6 @@ describe('GlobalConfig', () => { describe('CSF3', () => { test('renders with inferred globalRender', () => { - // @ts-ignore const Primary = composeStory(stories.CSF3Button, stories.default); render(Hello world); @@ -70,7 +66,6 @@ describe('CSF3', () => { }); test('renders with custom render function', () => { - // @ts-ignore const Primary = composeStory(stories.CSF3ButtonWithRender, stories.default); render(); @@ -78,12 +73,10 @@ describe('CSF3', () => { }); test('renders with play function', async () => { - // @ts-ignore const CSF3InputFieldFilled = composeStory(stories.CSF3InputFieldFilled, stories.default); const { container } = render(); - // @ts-ignore await CSF3InputFieldFilled.play({ canvasElement: container }); const input = screen.getByRole('textbox') as HTMLInputElement; diff --git a/examples/cra-ts-essentials/src/stories/testing-react/components/internals.test.tsx b/examples/cra-ts-essentials/src/stories/testing-react/components/internals.test.tsx index 9dfda44ecbf..d03cc4e1bdf 100644 --- a/examples/cra-ts-essentials/src/stories/testing-react/components/internals.test.tsx +++ b/examples/cra-ts-essentials/src/stories/testing-react/components/internals.test.tsx @@ -29,7 +29,6 @@ test('returns composed parameters from story', () => { // common in addons that need to communicate between manager and preview test('should pass with decorators that need addons channel', () => { - // @ts-ignore const PrimaryWithChannels = composeStory(stories.CSF3Primary, stories.default, { decorators: [ (StoryFn: any) => { From e12ccb14ca1153139b7c49d3d62bf80cedec7353 Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Fri, 21 Jan 2022 14:57:09 +0100 Subject: [PATCH 010/171] add jsdoc to testing utilities --- app/react/src/client/testing/index.ts | 53 ++++++++++++++++++++++++++- 1 file changed, 52 insertions(+), 1 deletion(-) diff --git a/app/react/src/client/testing/index.ts b/app/react/src/client/testing/index.ts index 902a4a40f90..6ebec57206c 100644 --- a/app/react/src/client/testing/index.ts +++ b/app/react/src/client/testing/index.ts @@ -24,7 +24,7 @@ let globalStorybookConfig = { * Example: *```jsx * // setup.js (for jest) - * import { setGlobalConfig } from '@storybook/testing-react'; + * import { setGlobalConfig } from '@storybook/react'; * import * as globalStorybookConfig from './.storybook/preview'; * * setGlobalConfig(globalStorybookConfig); @@ -36,6 +36,32 @@ export function setGlobalConfig(config: GlobalConfig) { globalStorybookConfig = composeConfigs([defaultGlobalConfig, config]) as GlobalConfig; } +/** + * Function that will receive a story along with meta (e.g. a default export from a .stories file) + * and optionally a globalConfig e.g. (import * from '../.storybook/preview) + * and will return a composed component that has all args/parameters/decorators/etc combined and applied to it. + * + * + * It's very useful for reusing a story in scenarios outside of Storybook like unit testing. + * + * Example: + *```jsx + * import { render } from '@testing-library/react'; + * import { composeStory } from '@storybook/react'; + * import Meta, { Primary as PrimaryStory } from './Button.stories'; + * + * const Primary = composeStory(PrimaryStory, Meta); + * + * test('renders primary button with Hello World', () => { + * const { getByText } = render(Hello world); + * expect(getByText(/Hello world/i)).not.toBeNull(); + * }); + *``` + * + * @param story + * @param meta - e.g. (import Meta from './Button.stories') + * @param [globalConfig] - e.g. (import * as globalConfig from '../.storybook/preview') this can be applied automatically if you use `setGlobalConfig` in your setup files. + */ export function composeStory( story: TestingStory, meta: Meta, @@ -46,6 +72,31 @@ export function composeStory( return originalComposeStory(story, meta, projectAnnotations); } +/** + * Function that will receive a stories import (e.g. `import * as stories from './Button.stories'`) + * and optionally a globalConfig (e.g. `import * from '../.storybook/preview`) + * and will return an object containing all the stories passed, but now as a composed component that has all args/parameters/decorators/etc combined and applied to it. + * + * + * It's very useful for reusing stories in scenarios outside of Storybook like unit testing. + * + * Example: + *```jsx + * import { render } from '@testing-library/react'; + * import { composeStories } from '@storybook/react'; + * import * as stories from './Button.stories'; + * + * const { Primary, Secondary } = composeStories(stories); + * + * test('renders primary button with Hello World', () => { + * const { getByText } = render(Hello world); + * expect(getByText(/Hello world/i)).not.toBeNull(); + * }); + *``` + * + * @param storiesImport - e.g. (import * as stories from './Button.stories') + * @param [globalConfig] - e.g. (import * as globalConfig from '../.storybook/preview') this can be applied automatically if you use `setGlobalConfig` in your setup files. + */ export function composeStories( storiesImport: TModule, globalConfig?: GlobalConfig From 545b473e6b24a12b1c5f9d18d7740f6a9dfa2b78 Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Mon, 24 Jan 2022 12:24:49 +0100 Subject: [PATCH 011/171] refactor(story-store): move normalizeProjectAnnotations to csf --- lib/store/src/StoryStore.ts | 26 +------------ lib/store/src/csf/index.ts | 2 + .../src/csf/normalizeComponentAnnotations.ts | 22 +++++++++++ .../src/csf/normalizeProjectAnnotations.ts | 37 ++++++++++--------- lib/store/src/csf/processCSFFile.ts | 9 ++--- lib/store/src/csf/testing-utils/index.ts | 6 +-- 6 files changed, 51 insertions(+), 51 deletions(-) create mode 100644 lib/store/src/csf/normalizeComponentAnnotations.ts diff --git a/lib/store/src/StoryStore.ts b/lib/store/src/StoryStore.ts index c1a7e79cf52..f46602d2953 100644 --- a/lib/store/src/StoryStore.ts +++ b/lib/store/src/StoryStore.ts @@ -17,7 +17,7 @@ import { SynchronousPromise } from 'synchronous-promise'; import { StoryIndexStore } from './StoryIndexStore'; import { ArgsStore } from './ArgsStore'; import { GlobalsStore } from './GlobalsStore'; -import { normalizeInputTypes, processCSFFile, prepareStory } from './csf'; +import { processCSFFile, prepareStory, normalizeProjectAnnotations } from './csf'; import { CSFFile, ModuleImportFn, @@ -31,35 +31,11 @@ import { V2CompatIndexEntry, } from './types'; import { HooksContext } from './hooks'; -import { inferArgTypes } from './inferArgTypes'; -import { inferControls } from './inferControls'; // TODO -- what are reasonable values for these? const CSF_CACHE_SIZE = 1000; const STORY_CACHE_SIZE = 10000; -function normalizeProjectAnnotations({ - argTypes, - globalTypes, - argTypesEnhancers, - ...annotations -}: ProjectAnnotations): NormalizedProjectAnnotations { - return { - ...(argTypes && { argTypes: normalizeInputTypes(argTypes) }), - ...(globalTypes && { globalTypes: normalizeInputTypes(globalTypes) }), - argTypesEnhancers: [ - ...(argTypesEnhancers || []), - inferArgTypes, - // inferControls technically should only run if the user is using the controls addon, - // and so should be added by a preset there. However, as it seems some code relies on controls - // annotations (in particular the angular implementation's `cleanArgsDecorator`), for backwards - // compatibility reasons, we will leave this in the store until 7.0 - inferControls, - ], - ...annotations, - }; -} - export class StoryStore { storyIndex: StoryIndexStore; diff --git a/lib/store/src/csf/index.ts b/lib/store/src/csf/index.ts index 4e7870ccd0b..eb26845e410 100644 --- a/lib/store/src/csf/index.ts +++ b/lib/store/src/csf/index.ts @@ -2,4 +2,6 @@ export * from './normalizeInputTypes'; export * from './normalizeStory'; export * from './processCSFFile'; export * from './prepareStory'; +export * from './normalizeComponentAnnotations'; +export * from './normalizeProjectAnnotations'; export * from './testing-utils'; diff --git a/lib/store/src/csf/normalizeComponentAnnotations.ts b/lib/store/src/csf/normalizeComponentAnnotations.ts new file mode 100644 index 00000000000..ce3f821ac8e --- /dev/null +++ b/lib/store/src/csf/normalizeComponentAnnotations.ts @@ -0,0 +1,22 @@ +import { sanitize, AnyFramework } from '@storybook/csf'; + +import { ModuleExports, NormalizedComponentAnnotations } from '../types'; +import { normalizeInputTypes } from './normalizeInputTypes'; + +export function normalizeComponentAnnotations( + defaultExport: ModuleExports['default'], + title: string = defaultExport.title, + importPath?: string +): NormalizedComponentAnnotations { + const { id, argTypes } = defaultExport; + return { + id: sanitize(id || title), + ...defaultExport, + title, + ...(argTypes && { argTypes: normalizeInputTypes(argTypes) }), + parameters: { + fileName: importPath, + ...defaultExport.parameters, + }, + }; +} diff --git a/lib/store/src/csf/normalizeProjectAnnotations.ts b/lib/store/src/csf/normalizeProjectAnnotations.ts index dd3eba96347..2b707c03f31 100644 --- a/lib/store/src/csf/normalizeProjectAnnotations.ts +++ b/lib/store/src/csf/normalizeProjectAnnotations.ts @@ -1,22 +1,25 @@ -import { sanitize, AnyFramework } from '@storybook/csf'; +import { AnyFramework, ProjectAnnotations } from '@storybook/csf'; +import { inferControls, NormalizedProjectAnnotations, normalizeInputTypes } from '..'; +import { inferArgTypes } from '../inferArgTypes'; -import { ModuleExports, NormalizedComponentAnnotations } from '../types'; -import { normalizeInputTypes } from './normalizeInputTypes'; - -export function normalizeProjectAnnotations( - defaultExport: ModuleExports['default'], - title: string = defaultExport.title, - importPath?: string -): NormalizedComponentAnnotations { - const { id, argTypes } = defaultExport; +export function normalizeProjectAnnotations({ + argTypes, + globalTypes, + argTypesEnhancers, + ...annotations +}: ProjectAnnotations): NormalizedProjectAnnotations { return { - id: sanitize(id || title), - ...defaultExport, - title, ...(argTypes && { argTypes: normalizeInputTypes(argTypes) }), - parameters: { - fileName: importPath, - ...defaultExport.parameters, - }, + ...(globalTypes && { globalTypes: normalizeInputTypes(globalTypes) }), + argTypesEnhancers: [ + ...(argTypesEnhancers || []), + inferArgTypes, + // inferControls technically should only run if the user is using the controls addon, + // and so should be added by a preset there. However, as it seems some code relies on controls + // annotations (in particular the angular implementation's `cleanArgsDecorator`), for backwards + // compatibility reasons, we will leave this in the store until 7.0 + inferControls, + ], + ...annotations, }; } diff --git a/lib/store/src/csf/processCSFFile.ts b/lib/store/src/csf/processCSFFile.ts index 0e6d3207553..a905f49dc67 100644 --- a/lib/store/src/csf/processCSFFile.ts +++ b/lib/store/src/csf/processCSFFile.ts @@ -4,7 +4,7 @@ import { logger } from '@storybook/client-logger'; import { ModuleExports, CSFFile, NormalizedComponentAnnotations } from '../types'; import { normalizeStory } from './normalizeStory'; import { Path } from '..'; -import { normalizeProjectAnnotations } from './normalizeProjectAnnotations'; +import { normalizeComponentAnnotations } from './normalizeComponentAnnotations'; const checkGlobals = (parameters: Parameters) => { const { globals, globalTypes } = parameters; @@ -40,11 +40,8 @@ export function processCSFFile( ): CSFFile { const { default: defaultExport, __namedExportsOrder, ...namedExports } = moduleExports; - const meta: NormalizedComponentAnnotations = normalizeProjectAnnotations( - defaultExport, - title, - importPath - ); + const meta: NormalizedComponentAnnotations = + normalizeComponentAnnotations(defaultExport, title, importPath); checkDisallowedParameters(meta.parameters); const csfFile: CSFFile = { meta, stories: {} }; diff --git a/lib/store/src/csf/testing-utils/index.ts b/lib/store/src/csf/testing-utils/index.ts index acdbb1cf984..c1c2f4c534f 100644 --- a/lib/store/src/csf/testing-utils/index.ts +++ b/lib/store/src/csf/testing-utils/index.ts @@ -10,9 +10,9 @@ import { import { prepareStory } from '../prepareStory'; import { normalizeStory } from '../normalizeStory'; -import { normalizeProjectAnnotations } from '../normalizeProjectAnnotations'; import { HooksContext } from '../../hooks'; -import { NormalizedProjectAnnotations } from '../..'; +import { normalizeComponentAnnotations } from '../normalizeComponentAnnotations'; +import type { NormalizedProjectAnnotations } from '../../types'; if (process.env.NODE_ENV === 'test') { // eslint-disable-next-line global-require @@ -42,7 +42,7 @@ export function composeStory< throw new Error('Expected a story but received undefined.'); } - const normalizedMeta = normalizeProjectAnnotations(meta); + const normalizedMeta = normalizeComponentAnnotations(meta); const normalizedStory = normalizeStory(story.name, story, normalizedMeta); From 6a8e6859ac07ecb123a751e757b6b150cc438803 Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Mon, 24 Jan 2022 18:12:04 +0100 Subject: [PATCH 012/171] refactor: move setGlobalConfig to storybook/store --- app/react/src/client/testing/index.ts | 39 ++++++++++++------------ app/react/src/client/testing/types.ts | 9 ------ lib/store/src/csf/testing-utils/index.ts | 26 +++++++++++++--- 3 files changed, 41 insertions(+), 33 deletions(-) diff --git a/app/react/src/client/testing/index.ts b/app/react/src/client/testing/index.ts index 6ebec57206c..d92c24728c2 100644 --- a/app/react/src/client/testing/index.ts +++ b/app/react/src/client/testing/index.ts @@ -1,21 +1,13 @@ import { composeStory as originalComposeStory, composeStories as originalComposeStories, + setGlobalConfig as originalSetGlobalConfig, } from '@storybook/store'; -// eslint-disable-next-line import/no-extraneous-dependencies -import { composeConfigs } from '@storybook/preview-web'; +import { ProjectAnnotations } from '@storybook/csf'; + import { render } from '../preview/render'; - import type { Meta, ReactFramework } from '../preview/types-6-0'; -import type { StoriesWithPartialProps, GlobalConfig, StoryFile, TestingStory } from './types'; - -const defaultGlobalConfig: GlobalConfig = { - render, -}; - -let globalStorybookConfig = { - ...defaultGlobalConfig, -}; +import type { StoriesWithPartialProps, StoryFile, TestingStory } from './types'; /** Function that sets the globalConfig of your storybook. The global config is the preview module of your .storybook folder. * @@ -32,10 +24,14 @@ let globalStorybookConfig = { * * @param config - e.g. (import * as globalConfig from '../.storybook/preview') */ -export function setGlobalConfig(config: GlobalConfig) { - globalStorybookConfig = composeConfigs([defaultGlobalConfig, config]) as GlobalConfig; +export function setGlobalConfig(config: ProjectAnnotations) { + originalSetGlobalConfig(config); } +const defaultGlobalConfig: ProjectAnnotations = { + render, +}; + /** * Function that will receive a story along with meta (e.g. a default export from a .stories file) * and optionally a globalConfig e.g. (import * from '../.storybook/preview) @@ -65,11 +61,14 @@ export function setGlobalConfig(config: GlobalConfig) { export function composeStory( story: TestingStory, meta: Meta, - globalConfig: GlobalConfig = globalStorybookConfig + globalConfig?: ProjectAnnotations ) { - const projectAnnotations = { ...defaultGlobalConfig, ...globalConfig }; - - return originalComposeStory(story, meta, projectAnnotations); + return originalComposeStory( + story, + meta, + globalConfig, + defaultGlobalConfig + ); } /** @@ -99,9 +98,9 @@ export function composeStory( */ export function composeStories( storiesImport: TModule, - globalConfig?: GlobalConfig + globalConfig?: ProjectAnnotations ) { const composedStories = originalComposeStories(storiesImport, globalConfig, composeStory); - return (composedStories as unknown) as Omit, keyof StoryFile>; + return composedStories as unknown as Omit, keyof StoryFile>; } diff --git a/app/react/src/client/testing/types.ts b/app/react/src/client/testing/types.ts index ac8d58ce777..4c97e776c26 100644 --- a/app/react/src/client/testing/types.ts +++ b/app/react/src/client/testing/types.ts @@ -1,4 +1,3 @@ -import { NormalizedProjectAnnotations } from '@storybook/store'; import type { StoryFn as OriginalStoryFn, StoryObj, @@ -8,14 +7,6 @@ import type { ReactFramework, } from '../preview/types-6-0'; -/** - * Object representing the preview.ts module - * - * Used in storybook testing utilities. - * @see [Unit testing with Storybook](https://storybook.js.org/docs/react/workflows/unit-testing) - */ -export type GlobalConfig = NormalizedProjectAnnotations; - export type StoryFile = { default: Meta; __esModule?: boolean; __namedExportsOrder?: any }; export type TestingStoryPlayContext = Partial> & diff --git a/lib/store/src/csf/testing-utils/index.ts b/lib/store/src/csf/testing-utils/index.ts index c1c2f4c534f..fdb988e362c 100644 --- a/lib/store/src/csf/testing-utils/index.ts +++ b/lib/store/src/csf/testing-utils/index.ts @@ -4,6 +4,7 @@ import { AnnotatedStoryFn, StoryAnnotations, ComponentAnnotations, + ProjectAnnotations, Args, StoryContext, } from '@storybook/csf'; @@ -12,7 +13,7 @@ import { prepareStory } from '../prepareStory'; import { normalizeStory } from '../normalizeStory'; import { HooksContext } from '../../hooks'; import { normalizeComponentAnnotations } from '../normalizeComponentAnnotations'; -import type { NormalizedProjectAnnotations } from '../../types'; +import { normalizeProjectAnnotations } from '..'; if (process.env.NODE_ENV === 'test') { // eslint-disable-next-line global-require @@ -26,6 +27,14 @@ export type StoryFile = { __namedExportsOrder?: string[]; }; +let GLOBAL_STORYBOOK_CONFIG = {}; + +export function setGlobalConfig( + config: ProjectAnnotations +) { + GLOBAL_STORYBOOK_CONFIG = config; +} + type PartialPlayFn = ( context: Partial & Pick ) => Promise | void; @@ -36,17 +45,26 @@ export function composeStory< >( story: AnnotatedStoryFn | StoryAnnotations, meta: ComponentAnnotations, - globalConfig: NormalizedProjectAnnotations = {} + globalConfig: ProjectAnnotations = GLOBAL_STORYBOOK_CONFIG, + defaultConfig: ProjectAnnotations = {} ) { if (story === undefined) { throw new Error('Expected a story but received undefined.'); } + const projectAnnotations = { ...defaultConfig, ...globalConfig }; + const normalizedMeta = normalizeComponentAnnotations(meta); const normalizedStory = normalizeStory(story.name, story, normalizedMeta); - const preparedStory = prepareStory(normalizedStory, normalizedMeta, globalConfig); + const normalizedProjectAnnotations = normalizeProjectAnnotations(projectAnnotations); + + const preparedStory = prepareStory( + normalizedStory, + normalizedMeta, + normalizedProjectAnnotations + ); const defaultGlobals = Object.entries(globalConfig.globalTypes || {}).reduce( (acc, [arg, { defaultValue }]) => { @@ -79,7 +97,7 @@ export function composeStory< export function composeStories( storiesImport: TModule, - globalConfig: NormalizedProjectAnnotations, + globalConfig: ProjectAnnotations, composeStoryFn: typeof composeStory ) { const { default: meta, __esModule, __namedExportsOrder, ...stories } = storiesImport; From e411f7296a58641b4446e0d34711140b9015061e Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Mon, 24 Jan 2022 18:40:16 +0100 Subject: [PATCH 013/171] refactor: dedupe testing types --- app/react/src/client/testing/index.ts | 17 ++++++++-------- app/react/src/client/testing/types.ts | 23 +++++----------------- lib/store/src/csf/testing-utils/index.ts | 17 +++++----------- lib/store/src/csf/testing-utils/types.ts | 25 ++++++++++++++++++++++++ 4 files changed, 44 insertions(+), 38 deletions(-) create mode 100644 lib/store/src/csf/testing-utils/types.ts diff --git a/app/react/src/client/testing/index.ts b/app/react/src/client/testing/index.ts index d92c24728c2..00e28ba7a25 100644 --- a/app/react/src/client/testing/index.ts +++ b/app/react/src/client/testing/index.ts @@ -2,12 +2,13 @@ import { composeStory as originalComposeStory, composeStories as originalComposeStories, setGlobalConfig as originalSetGlobalConfig, + CSFExports, } from '@storybook/store'; -import { ProjectAnnotations } from '@storybook/csf'; +import { ProjectAnnotations, Args } from '@storybook/csf'; import { render } from '../preview/render'; import type { Meta, ReactFramework } from '../preview/types-6-0'; -import type { StoriesWithPartialProps, StoryFile, TestingStory } from './types'; +import type { StoriesWithPartialProps, TestingStory } from './types'; /** Function that sets the globalConfig of your storybook. The global config is the preview module of your .storybook folder. * @@ -58,12 +59,12 @@ const defaultGlobalConfig: ProjectAnnotations = { * @param meta - e.g. (import Meta from './Button.stories') * @param [globalConfig] - e.g. (import * as globalConfig from '../.storybook/preview') this can be applied automatically if you use `setGlobalConfig` in your setup files. */ -export function composeStory( - story: TestingStory, - meta: Meta, +export function composeStory( + story: TestingStory, + meta: Meta, globalConfig?: ProjectAnnotations ) { - return originalComposeStory( + return originalComposeStory( story, meta, globalConfig, @@ -96,11 +97,11 @@ export function composeStory( * @param storiesImport - e.g. (import * as stories from './Button.stories') * @param [globalConfig] - e.g. (import * as globalConfig from '../.storybook/preview') this can be applied automatically if you use `setGlobalConfig` in your setup files. */ -export function composeStories( +export function composeStories>( storiesImport: TModule, globalConfig?: ProjectAnnotations ) { const composedStories = originalComposeStories(storiesImport, globalConfig, composeStory); - return composedStories as unknown as Omit, keyof StoryFile>; + return composedStories as unknown as Omit, keyof CSFExports>; } diff --git a/app/react/src/client/testing/types.ts b/app/react/src/client/testing/types.ts index 4c97e776c26..f20307e9578 100644 --- a/app/react/src/client/testing/types.ts +++ b/app/react/src/client/testing/types.ts @@ -1,24 +1,11 @@ import type { StoryFn as OriginalStoryFn, - StoryObj, - Meta, - Args, - StoryContext, - ReactFramework, -} from '../preview/types-6-0'; + TestingStory as OriginalTestingStory, +} from '@storybook/store'; +import type { ReactFramework, Args } from '../preview/types-6-0'; -export type StoryFile = { default: Meta; __esModule?: boolean; __namedExportsOrder?: any }; - -export type TestingStoryPlayContext = Partial> & - Pick; - -export type TestingStoryPlayFn = ( - context: TestingStoryPlayContext -) => Promise | void; - -export type StoryFn = OriginalStoryFn & { play: TestingStoryPlayFn }; - -export type TestingStory = StoryFn | StoryObj; +export type TestingStory = OriginalTestingStory; +export type StoryFn = OriginalStoryFn; /** * T represents the whole ES module of a stories file. K of T means named exports (basically the Story type) diff --git a/lib/store/src/csf/testing-utils/index.ts b/lib/store/src/csf/testing-utils/index.ts index fdb988e362c..8137d4a10d2 100644 --- a/lib/store/src/csf/testing-utils/index.ts +++ b/lib/store/src/csf/testing-utils/index.ts @@ -14,6 +14,9 @@ import { normalizeStory } from '../normalizeStory'; import { HooksContext } from '../../hooks'; import { normalizeComponentAnnotations } from '../normalizeComponentAnnotations'; import { normalizeProjectAnnotations } from '..'; +import type { CSFExports, TestingStoryPlayFn } from './types'; + +export * from './types'; if (process.env.NODE_ENV === 'test') { // eslint-disable-next-line global-require @@ -21,12 +24,6 @@ if (process.env.NODE_ENV === 'test') { addons.setChannel(mockChannel()); } -export type StoryFile = { - default: Record; - __esModule?: boolean; - __namedExportsOrder?: string[]; -}; - let GLOBAL_STORYBOOK_CONFIG = {}; export function setGlobalConfig( @@ -35,10 +32,6 @@ export function setGlobalConfig( GLOBAL_STORYBOOK_CONFIG = config; } -type PartialPlayFn = ( - context: Partial & Pick -) => Promise | void; - export function composeStory< TFramework extends AnyFramework = AnyFramework, TArgs extends Args = Args @@ -89,13 +82,13 @@ export function composeStory< composedStory.storyName = story.storyName || story.name; composedStory.args = preparedStory.initialArgs; - composedStory.play = preparedStory.playFunction as PartialPlayFn; + composedStory.play = preparedStory.playFunction as TestingStoryPlayFn; composedStory.parameters = preparedStory.parameters; return composedStory; } -export function composeStories( +export function composeStories( storiesImport: TModule, globalConfig: ProjectAnnotations, composeStoryFn: typeof composeStory diff --git a/lib/store/src/csf/testing-utils/types.ts b/lib/store/src/csf/testing-utils/types.ts new file mode 100644 index 00000000000..4e0f5542582 --- /dev/null +++ b/lib/store/src/csf/testing-utils/types.ts @@ -0,0 +1,25 @@ +import type { + AnyFramework, + AnnotatedStoryFn, + StoryAnnotations, + ComponentAnnotations, + Args, + StoryContext, +} from '@storybook/csf'; + +export type CSFExports = { + default: ComponentAnnotations; + __esModule?: boolean; + __namedExportsOrder?: string[]; +}; + +export type TestingStoryPlayContext = Partial & Pick; + +export type TestingStoryPlayFn = (context: TestingStoryPlayContext) => Promise | void; + +export type StoryFn = + AnnotatedStoryFn & { play: TestingStoryPlayFn }; + +export type TestingStory = + | StoryFn + | StoryAnnotations; From ef0bb7a90218fb62b4ecb9d6e69dead400629551 Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Mon, 24 Jan 2022 18:51:26 +0100 Subject: [PATCH 014/171] refactor: move logic to getValuesFromArgTypes file --- lib/store/src/GlobalsStore.ts | 6 ++---- lib/store/src/csf/getValuesFromArgTypes.ts | 9 +++++++++ lib/store/src/csf/index.ts | 1 + lib/store/src/csf/prepareStory.ts | 12 +++--------- lib/store/src/csf/testing-utils/index.ts | 12 ++---------- 5 files changed, 17 insertions(+), 23 deletions(-) create mode 100644 lib/store/src/csf/getValuesFromArgTypes.ts diff --git a/lib/store/src/GlobalsStore.ts b/lib/store/src/GlobalsStore.ts index 800ed7558e9..4654c71dc2c 100644 --- a/lib/store/src/GlobalsStore.ts +++ b/lib/store/src/GlobalsStore.ts @@ -3,6 +3,7 @@ import dedent from 'ts-dedent'; import { Globals, GlobalTypes } from '@storybook/csf'; import { deepDiff, DEEPLY_EQUAL } from './args'; +import { getValuesFromArgTypes } from './csf/getValuesFromArgTypes'; const setUndeclaredWarning = deprecate( () => {}, @@ -24,10 +25,7 @@ export class GlobalsStore { this.allowedGlobalNames = new Set([...Object.keys(globals), ...Object.keys(globalTypes)]); - const defaultGlobals = Object.entries(globalTypes).reduce((acc, [key, { defaultValue }]) => { - if (defaultValue) acc[key] = defaultValue; - return acc; - }, {} as Globals); + const defaultGlobals: Globals = getValuesFromArgTypes(globalTypes); this.initialGlobals = { ...defaultGlobals, ...globals }; this.globals = this.initialGlobals; diff --git a/lib/store/src/csf/getValuesFromArgTypes.ts b/lib/store/src/csf/getValuesFromArgTypes.ts new file mode 100644 index 00000000000..9a2a7b1aed9 --- /dev/null +++ b/lib/store/src/csf/getValuesFromArgTypes.ts @@ -0,0 +1,9 @@ +import { ArgTypes } from '@storybook/csf'; + +export const getValuesFromArgTypes = (argTypes: ArgTypes = {}) => + Object.entries(argTypes).reduce((acc, [arg, { defaultValue }]) => { + if (typeof defaultValue !== 'undefined') { + acc[arg] = defaultValue; + } + return acc; + }, {} as ArgTypes); diff --git a/lib/store/src/csf/index.ts b/lib/store/src/csf/index.ts index eb26845e410..215f85a9f71 100644 --- a/lib/store/src/csf/index.ts +++ b/lib/store/src/csf/index.ts @@ -4,4 +4,5 @@ export * from './processCSFFile'; export * from './prepareStory'; export * from './normalizeComponentAnnotations'; export * from './normalizeProjectAnnotations'; +export * from './getValuesFromArgTypes'; export * from './testing-utils'; diff --git a/lib/store/src/csf/prepareStory.ts b/lib/store/src/csf/prepareStory.ts index 16d5919aa57..2e704309991 100644 --- a/lib/store/src/csf/prepareStory.ts +++ b/lib/store/src/csf/prepareStory.ts @@ -23,6 +23,7 @@ import { combineParameters } from '../parameters'; import { applyHooks } from '../hooks'; import { defaultDecorateStory } from '../decorators'; import { groupArgsByTarget, NO_TARGET_NAME } from '../args'; +import { getValuesFromArgTypes } from '..'; const argTypeDefaultValueWarning = deprecate( () => {}, @@ -121,15 +122,8 @@ export function prepareStory( // Add argTypes[X].defaultValue to initial args (note this deprecated) // We need to do this *after* the argTypesEnhancers as they may add defaultValues - const defaultArgs: Args = Object.entries(contextForEnhancers.argTypes).reduce( - (acc, [arg, { defaultValue }]) => { - if (typeof defaultValue !== 'undefined') { - acc[arg] = defaultValue; - } - return acc; - }, - {} as Args - ); + const defaultArgs = getValuesFromArgTypes(contextForEnhancers.argTypes); + if (Object.keys(defaultArgs).length > 0) { argTypeDefaultValueWarning(); } diff --git a/lib/store/src/csf/testing-utils/index.ts b/lib/store/src/csf/testing-utils/index.ts index 8137d4a10d2..4769d355f7d 100644 --- a/lib/store/src/csf/testing-utils/index.ts +++ b/lib/store/src/csf/testing-utils/index.ts @@ -13,7 +13,7 @@ import { prepareStory } from '../prepareStory'; import { normalizeStory } from '../normalizeStory'; import { HooksContext } from '../../hooks'; import { normalizeComponentAnnotations } from '../normalizeComponentAnnotations'; -import { normalizeProjectAnnotations } from '..'; +import { getValuesFromArgTypes, normalizeProjectAnnotations } from '..'; import type { CSFExports, TestingStoryPlayFn } from './types'; export * from './types'; @@ -59,15 +59,7 @@ export function composeStory< normalizedProjectAnnotations ); - const defaultGlobals = Object.entries(globalConfig.globalTypes || {}).reduce( - (acc, [arg, { defaultValue }]) => { - if (defaultValue) { - acc[arg] = defaultValue; - } - return acc; - }, - {} as Record - ); + const defaultGlobals = getValuesFromArgTypes(globalConfig.globalTypes); const composedStory = (extraArgs: Partial) => { const context: Partial = { From 800f17db238fa00b55ac9453e4fba33801683ff2 Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Mon, 24 Jan 2022 19:01:08 +0100 Subject: [PATCH 015/171] fix: ensure story has a name before calling composeStory --- .../__snapshots__/internals.test.tsx.snap | 34 +++++++++---------- lib/store/src/csf/testing-utils/index.ts | 26 ++++++++++---- 2 files changed, 36 insertions(+), 24 deletions(-) diff --git a/examples/cra-ts-essentials/src/stories/testing-react/components/__snapshots__/internals.test.tsx.snap b/examples/cra-ts-essentials/src/stories/testing-react/components/__snapshots__/internals.test.tsx.snap index dd0a3d4183f..dc838a93306 100644 --- a/examples/cra-ts-essentials/src/stories/testing-react/components/__snapshots__/internals.test.tsx.snap +++ b/examples/cra-ts-essentials/src/stories/testing-react/components/__snapshots__/internals.test.tsx.snap @@ -18,23 +18,6 @@ exports[`Renders CSF2Secondary story 1`] = ` `; -exports[`Renders CSF2StoryWithLocale story 1`] = ` - -
-
- Locale: - en -
- -
- -`; - exports[`Renders CSF2StoryWithParamsAndDecorator story 1`] = `
@@ -125,3 +108,20 @@ exports[`Renders CSF3Primary story 1`] = `
`; + +exports[`Renders WithLocale story 1`] = ` + +
+
+ Locale: + en +
+ +
+ +`; diff --git a/lib/store/src/csf/testing-utils/index.ts b/lib/store/src/csf/testing-utils/index.ts index 4769d355f7d..b6f7adc3c0d 100644 --- a/lib/store/src/csf/testing-utils/index.ts +++ b/lib/store/src/csf/testing-utils/index.ts @@ -14,7 +14,7 @@ import { normalizeStory } from '../normalizeStory'; import { HooksContext } from '../../hooks'; import { normalizeComponentAnnotations } from '../normalizeComponentAnnotations'; import { getValuesFromArgTypes, normalizeProjectAnnotations } from '..'; -import type { CSFExports, TestingStoryPlayFn } from './types'; +import type { CSFExports, TestingStoryPlayFn, TestingStory } from './types'; export * from './types'; @@ -80,23 +80,35 @@ export function composeStory< return composedStory; } +const getStoryName = (story: TestingStory) => { + if (story.storyName) { + return story.storyName; + } + + if (typeof story !== 'function' && story.name) { + return story.name; + } + + return undefined; +}; + export function composeStories( storiesImport: TModule, globalConfig: ProjectAnnotations, composeStoryFn: typeof composeStory ) { const { default: meta, __esModule, __namedExportsOrder, ...stories } = storiesImport; - const composedStories = Object.entries(stories).reduce((storiesMap, [key, _story]) => { - if (!isExportStory(key as string, meta)) { + const composedStories = Object.entries(stories).reduce((storiesMap, [exportsName, _story]) => { + if (!isExportStory(exportsName as string, meta)) { return storiesMap; } - const storyName = String(key); - const story = _story as any; - story.storyName = storyName; + const story = _story as TestingStory; + // Ensure story name is already set, else use exportsName as fallback. This is important for scenarios like snapshot testing + story.storyName = getStoryName(story) || String(exportsName); const result = Object.assign(storiesMap, { - [key]: composeStoryFn(story, meta, globalConfig), + [exportsName]: composeStoryFn(story, meta, globalConfig), }); return result; }, {}); From 7b7a841842068642ac9c0c1fbb77fee5bad3e54a Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Wed, 26 Jan 2022 09:48:53 +0100 Subject: [PATCH 016/171] feat: support exportsName in composeStory - also rename parameters for better consistency --- app/react/src/client/testing/index.ts | 44 ++++++----- lib/store/src/csf/testing-utils/index.ts | 98 +++++++++++++----------- 2 files changed, 79 insertions(+), 63 deletions(-) diff --git a/app/react/src/client/testing/index.ts b/app/react/src/client/testing/index.ts index 00e28ba7a25..93a5a1b7441 100644 --- a/app/react/src/client/testing/index.ts +++ b/app/react/src/client/testing/index.ts @@ -18,24 +18,25 @@ import type { StoriesWithPartialProps, TestingStory } from './types'; *```jsx * // setup.js (for jest) * import { setGlobalConfig } from '@storybook/react'; - * import * as globalStorybookConfig from './.storybook/preview'; + * import * as projectAnnotations from './.storybook/preview'; * - * setGlobalConfig(globalStorybookConfig); + * setGlobalConfig(projectAnnotations); *``` * - * @param config - e.g. (import * as globalConfig from '../.storybook/preview') + * @param projectAnnotations - e.g. (import * as projectAnnotations from '../.storybook/preview') */ -export function setGlobalConfig(config: ProjectAnnotations) { - originalSetGlobalConfig(config); +export function setGlobalConfig(projectAnnotations: ProjectAnnotations) { + originalSetGlobalConfig(projectAnnotations); } -const defaultGlobalConfig: ProjectAnnotations = { +// This will not be necessary once we have auto preset loading +const defaultProjectAnnotations: ProjectAnnotations = { render, }; /** * Function that will receive a story along with meta (e.g. a default export from a .stories file) - * and optionally a globalConfig e.g. (import * from '../.storybook/preview) + * and optionally projectAnnotations e.g. (import * from '../.storybook/preview) * and will return a composed component that has all args/parameters/decorators/etc combined and applied to it. * * @@ -56,25 +57,28 @@ const defaultGlobalConfig: ProjectAnnotations = { *``` * * @param story - * @param meta - e.g. (import Meta from './Button.stories') - * @param [globalConfig] - e.g. (import * as globalConfig from '../.storybook/preview') this can be applied automatically if you use `setGlobalConfig` in your setup files. + * @param componentAnnotations - e.g. (import Meta from './Button.stories') + * @param [projectAnnotations] - e.g. (import * as projectAnnotations from '../.storybook/preview') this can be applied automatically if you use `setGlobalConfig` in your setup files. + * @param [exportsName] - in case your story does not contain a name and you want it to have a name. */ export function composeStory( story: TestingStory, - meta: Meta, - globalConfig?: ProjectAnnotations + componentAnnotations: Meta, + projectAnnotations?: ProjectAnnotations, + exportsName?: string ) { return originalComposeStory( story, - meta, - globalConfig, - defaultGlobalConfig + componentAnnotations, + projectAnnotations, + defaultProjectAnnotations, + exportsName ); } /** * Function that will receive a stories import (e.g. `import * as stories from './Button.stories'`) - * and optionally a globalConfig (e.g. `import * from '../.storybook/preview`) + * and optionally projectAnnotations (e.g. `import * from '../.storybook/preview`) * and will return an object containing all the stories passed, but now as a composed component that has all args/parameters/decorators/etc combined and applied to it. * * @@ -94,14 +98,14 @@ export function composeStory( * }); *``` * - * @param storiesImport - e.g. (import * as stories from './Button.stories') - * @param [globalConfig] - e.g. (import * as globalConfig from '../.storybook/preview') this can be applied automatically if you use `setGlobalConfig` in your setup files. + * @param csfExports - e.g. (import * as stories from './Button.stories') + * @param [projectAnnotations] - e.g. (import * as projectAnnotations from '../.storybook/preview') this can be applied automatically if you use `setGlobalConfig` in your setup files. */ export function composeStories>( - storiesImport: TModule, - globalConfig?: ProjectAnnotations + csfExports: TModule, + projectAnnotations?: ProjectAnnotations ) { - const composedStories = originalComposeStories(storiesImport, globalConfig, composeStory); + const composedStories = originalComposeStories(csfExports, projectAnnotations, composeStory); return composedStories as unknown as Omit, keyof CSFExports>; } diff --git a/lib/store/src/csf/testing-utils/index.ts b/lib/store/src/csf/testing-utils/index.ts index b6f7adc3c0d..6e64fd05401 100644 --- a/lib/store/src/csf/testing-utils/index.ts +++ b/lib/store/src/csf/testing-utils/index.ts @@ -7,6 +7,7 @@ import { ProjectAnnotations, Args, StoryContext, + Parameters, } from '@storybook/csf'; import { prepareStory } from '../prepareStory'; @@ -14,7 +15,7 @@ import { normalizeStory } from '../normalizeStory'; import { HooksContext } from '../../hooks'; import { normalizeComponentAnnotations } from '../normalizeComponentAnnotations'; import { getValuesFromArgTypes, normalizeProjectAnnotations } from '..'; -import type { CSFExports, TestingStoryPlayFn, TestingStory } from './types'; +import type { CSFExports, TestingStoryPlayFn } from './types'; export * from './types'; @@ -24,91 +25,102 @@ if (process.env.NODE_ENV === 'test') { addons.setChannel(mockChannel()); } -let GLOBAL_STORYBOOK_CONFIG = {}; +let GLOBAL_STORYBOOK_PROJECT_ANNOTATIONS = {}; export function setGlobalConfig( - config: ProjectAnnotations + projectAnnotations: ProjectAnnotations ) { - GLOBAL_STORYBOOK_CONFIG = config; + GLOBAL_STORYBOOK_PROJECT_ANNOTATIONS = projectAnnotations; +} + +interface ComposeStory { + ( + storyAnnotations: AnnotatedStoryFn | StoryAnnotations, + componentAnnotations: ComponentAnnotations, + projectAnnotations: ProjectAnnotations, + exportsName?: string + ): { + (extraArgs: Partial): TFramework['storyResult']; + storyName: string; + args: Args; + play: TestingStoryPlayFn; + parameters: Parameters; + }; } export function composeStory< TFramework extends AnyFramework = AnyFramework, TArgs extends Args = Args >( - story: AnnotatedStoryFn | StoryAnnotations, - meta: ComponentAnnotations, - globalConfig: ProjectAnnotations = GLOBAL_STORYBOOK_CONFIG, - defaultConfig: ProjectAnnotations = {} + storyAnnotations: AnnotatedStoryFn | StoryAnnotations, + componentAnnotations: ComponentAnnotations, + projectAnnotations: ProjectAnnotations = GLOBAL_STORYBOOK_PROJECT_ANNOTATIONS, + defaultConfig: ProjectAnnotations = {}, + exportsName?: string ) { - if (story === undefined) { + if (storyAnnotations === undefined) { throw new Error('Expected a story but received undefined.'); } - const projectAnnotations = { ...defaultConfig, ...globalConfig }; + const normalizedComponentAnnotations = normalizeComponentAnnotations(componentAnnotations); - const normalizedMeta = normalizeComponentAnnotations(meta); + const storyExportsName = + exportsName || + storyAnnotations.storyName || + storyAnnotations.story?.name || + storyAnnotations.name; - const normalizedStory = normalizeStory(story.name, story, normalizedMeta); + const normalizedStory = normalizeStory( + storyExportsName, + storyAnnotations, + normalizedComponentAnnotations + ); - const normalizedProjectAnnotations = normalizeProjectAnnotations(projectAnnotations); + const normalizedProjectAnnotations = normalizeProjectAnnotations({ + ...projectAnnotations, + ...defaultConfig, + }); - const preparedStory = prepareStory( + const story = prepareStory( normalizedStory, - normalizedMeta, + normalizedComponentAnnotations, normalizedProjectAnnotations ); - const defaultGlobals = getValuesFromArgTypes(globalConfig.globalTypes); + const defaultGlobals = getValuesFromArgTypes(projectAnnotations.globalTypes); const composedStory = (extraArgs: Partial) => { const context: Partial = { - ...preparedStory, + ...story, hooks: new HooksContext(), globals: defaultGlobals, - args: { ...preparedStory.initialArgs, ...extraArgs }, + args: { ...story.initialArgs, ...extraArgs }, }; - return preparedStory.unboundStoryFn(context as StoryContext); + return story.unboundStoryFn(context as StoryContext); }; - composedStory.storyName = story.storyName || story.name; - composedStory.args = preparedStory.initialArgs; - composedStory.play = preparedStory.playFunction as TestingStoryPlayFn; - composedStory.parameters = preparedStory.parameters; + composedStory.storyName = storyAnnotations.storyName || storyAnnotations.name; + composedStory.args = story.initialArgs; + composedStory.play = story.playFunction as TestingStoryPlayFn; + composedStory.parameters = story.parameters; return composedStory; } -const getStoryName = (story: TestingStory) => { - if (story.storyName) { - return story.storyName; - } - - if (typeof story !== 'function' && story.name) { - return story.name; - } - - return undefined; -}; - export function composeStories( storiesImport: TModule, globalConfig: ProjectAnnotations, - composeStoryFn: typeof composeStory + composeStoryFn: ComposeStory ) { const { default: meta, __esModule, __namedExportsOrder, ...stories } = storiesImport; - const composedStories = Object.entries(stories).reduce((storiesMap, [exportsName, _story]) => { - if (!isExportStory(exportsName as string, meta)) { + const composedStories = Object.entries(stories).reduce((storiesMap, [exportsName, story]) => { + if (!isExportStory(exportsName, meta)) { return storiesMap; } - const story = _story as TestingStory; - // Ensure story name is already set, else use exportsName as fallback. This is important for scenarios like snapshot testing - story.storyName = getStoryName(story) || String(exportsName); - const result = Object.assign(storiesMap, { - [exportsName]: composeStoryFn(story, meta, globalConfig), + [exportsName]: composeStoryFn(story, meta, globalConfig, exportsName), }); return result; }, {}); From a647db320b2547c1d4b2145dfb318d6836fad0b0 Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Wed, 26 Jan 2022 09:53:18 +0100 Subject: [PATCH 017/171] test: update snapshots --- .../__snapshots__/internals.test.tsx.snap | 182 +++++++++--------- 1 file changed, 91 insertions(+), 91 deletions(-) diff --git a/examples/cra-ts-essentials/src/stories/testing-react/components/__snapshots__/internals.test.tsx.snap b/examples/cra-ts-essentials/src/stories/testing-react/components/__snapshots__/internals.test.tsx.snap index dc838a93306..ff8ed9b7e78 100644 --- a/examples/cra-ts-essentials/src/stories/testing-react/components/__snapshots__/internals.test.tsx.snap +++ b/examples/cra-ts-essentials/src/stories/testing-react/components/__snapshots__/internals.test.tsx.snap @@ -1,23 +1,5 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`Renders CSF2Secondary story 1`] = ` - -
-
- Locale: - en -
- -
- -`; - exports[`Renders CSF2StoryWithParamsAndDecorator story 1`] = `
@@ -36,79 +18,6 @@ exports[`Renders CSF2StoryWithParamsAndDecorator story 1`] = ` `; -exports[`Renders CSF3Button story 1`] = ` - -
-
- Locale: - en -
- -
- -`; - -exports[`Renders CSF3ButtonWithRender story 1`] = ` - -
-
- Locale: - en -
-
-

- I am a custom render function -

- -
-
- -`; - -exports[`Renders CSF3InputFieldFilled story 1`] = ` - -
-
- Locale: - en -
- -
- -`; - -exports[`Renders CSF3Primary story 1`] = ` - -
-
- Locale: - en -
- -
- -`; - exports[`Renders WithLocale story 1`] = `
@@ -125,3 +34,94 @@ exports[`Renders WithLocale story 1`] = `
`; + +exports[`Renders bound Template story 1`] = ` + +
+
+ Locale: + en +
+ +
+ +`; + +exports[`Renders undefined story 1`] = ` + +
+
+ Locale: + en +
+ +
+ +`; + +exports[`Renders undefined story 2`] = ` + +
+
+ Locale: + en +
+
+

+ I am a custom render function +

+ +
+
+ +`; + +exports[`Renders undefined story 3`] = ` + +
+
+ Locale: + en +
+ +
+ +`; + +exports[`Renders undefined story 4`] = ` + +
+
+ Locale: + en +
+ +
+ +`; From 9a2baf2152e5a2025df24f6ef1bf4088f6069c63 Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Mon, 14 Mar 2022 17:26:39 +0800 Subject: [PATCH 018/171] Addon-docs: Add missing regenerator-runtime dep --- addons/docs/package.json | 1 + yarn.lock | 1 + 2 files changed, 2 insertions(+) diff --git a/addons/docs/package.json b/addons/docs/package.json index 905385c403a..10fceb90674 100644 --- a/addons/docs/package.json +++ b/addons/docs/package.json @@ -77,6 +77,7 @@ "fast-deep-equal": "^3.1.3", "global": "^4.4.0", "lodash": "^4.17.21", + "regenerator-runtime": "^0.13.7", "remark-external-links": "^8.0.0", "remark-slug": "^6.0.0", "ts-dedent": "^2.0.0", diff --git a/yarn.lock b/yarn.lock index ad52e10001d..7f956c874ab 100644 --- a/yarn.lock +++ b/yarn.lock @@ -6346,6 +6346,7 @@ __metadata: fast-deep-equal: ^3.1.3 global: ^4.4.0 lodash: ^4.17.21 + regenerator-runtime: ^0.13.7 remark-external-links: ^8.0.0 remark-slug: ^6.0.0 ts-dedent: ^2.0.0 From 7aff6dfbe28e840a73efc8f8b3b0f7ef8976bb1c Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Fri, 18 Mar 2022 10:27:04 +0100 Subject: [PATCH 019/171] rename /register to /manager --- addons/a11y/preset.js | 2 +- addons/a11y/register.js | 2 +- addons/a11y/src/{register.tsx => manager.tsx} | 0 addons/actions/preset.js | 2 +- addons/actions/register.js | 2 +- .../actions/src/{register.tsx => manager.tsx} | 0 addons/backgrounds/preset.js | 2 +- addons/backgrounds/register.js | 2 +- .../src/{register.tsx => manager.tsx} | 0 addons/controls/manager.js | 1 + addons/controls/package.json | 6 +-- addons/controls/preset.js | 2 +- addons/controls/register.js | 3 +- .../src/{register.tsx => manager.tsx} | 0 addons/docs/register.js | 2 +- addons/docs/src/{register.ts => manager.ts} | 0 addons/interactions/package.json | 4 +- addons/interactions/preset.js | 2 +- addons/interactions/register.js | 2 +- .../src/{register.tsx => manager.tsx} | 0 addons/jest/register.js | 2 +- addons/jest/src/{register.tsx => manager.tsx} | 0 addons/links/preset.js | 2 +- addons/links/register.js | 2 +- addons/links/src/{register.ts => manager.ts} | 0 addons/measure/preset.js | 2 +- addons/measure/register.js | 2 +- .../measure/src/{register.tsx => manager.tsx} | 0 addons/outline/preset.js | 2 +- addons/outline/register.js | 2 +- .../outline/src/{register.tsx => manager.tsx} | 0 addons/storysource/preset.js | 2 +- addons/storysource/register.js | 2 +- .../src/{register.tsx => manager.tsx} | 0 addons/toolbars/package.json | 8 ++-- addons/toolbars/preset.js | 2 +- addons/toolbars/register.js | 2 +- .../src/{register.tsx => manager.tsx} | 0 addons/viewport/preset.js | 2 +- addons/viewport/register.js | 2 +- .../src/{register.tsx => manager.tsx} | 0 .../common/args-usage-with-addons.js.mdx | 2 +- .../my-addon-initial-panel-state.js.mdx | 2 +- .../my-addon-preset-implementation.js.mdx | 2 +- .../storybook-addon-change-panel.js.mdx | 2 +- .../storybook-addon-disable-addon.js.mdx | 2 +- ...k-addon-load-external-addons-preset.js.mdx | 2 +- .../storybook-addon-panel-example.js.mdx | 2 +- .../storybook-addon-panel-initial.js.mdx | 2 +- .../storybook-addon-preset-example.js.mdx | 2 +- .../common/storybook-addon-tab-example.js.mdx | 2 +- .../storybook-addon-toolbar-example.js.mdx | 2 +- ...ybook-addons-api-disablequeryparams.js.mdx | 2 +- .../storybook-addons-api-getqueryparam.js.mdx | 2 +- .../storybook-addons-api-geturlstate.js.mdx | 2 +- .../storybook-addons-api-imports.js.mdx | 2 +- .../storybook-addons-api-makedecorator.js.mdx | 2 +- .../common/storybook-addons-api-on.js.mdx | 2 +- .../storybook-addons-api-register.js.mdx | 2 +- ...book-addons-api-selectincurrentkind.js.mdx | 2 +- .../storybook-addons-api-selectstory.js.mdx | 2 +- ...storybook-addons-api-setqueryparams.js.mdx | 2 +- .../storybook-addons-api-useaddonstate.js.mdx | 2 +- .../common/storybook-addons-api-useapi.js.mdx | 2 +- .../storybook-addons-api-usechannel.js.mdx | 2 +- .../storybook-addons-api-useglobal.js.mdx | 2 +- .../storybook-addons-api-useparameter.js.mdx | 2 +- ...rybook-addons-api-usestorybookstate.js.mdx | 2 +- .../storybook-argtypes-with-addon.js.mdx | 2 +- .../storybook-main-register-addon.js.mdx | 2 +- ...-main-register-presets-managerentry.js.mdx | 2 +- .../storybook-main-use-manager-entries.js.mdx | 2 +- ...orybook-storysource-manager-entries.js.mdx | 2 +- .../localAddon/{register.tsx => manager.tsx} | 0 .../cra-ts-kitchen-sink/.storybook/main.ts | 2 +- lib/cli/src/add.test.ts | 46 +++++++++---------- lib/cli/src/add.ts | 4 +- .../template-csf/storybook/addons.js | 6 +-- .../template-csf/storybook/rn-addons.js | 4 +- lib/core-common/src/presets.test.ts | 9 ++++ lib/core-common/src/presets.ts | 20 ++++++-- .../cra-ts-essentials_manager-dev-posix | 12 ++--- .../cra-ts-essentials_manager-prod-posix | 12 ++--- .../html-kitchen-sink_manager-dev-posix | 14 +++--- .../html-kitchen-sink_manager-prod-posix | 14 +++--- .../__snapshots__/vue-3-cli_manager-dev-posix | 18 ++++---- .../vue-3-cli_manager-prod-posix | 18 ++++---- ...-components-kitchen-sink_manager-dev-posix | 18 ++++---- ...components-kitchen-sink_manager-prod-posix | 18 ++++---- 89 files changed, 184 insertions(+), 163 deletions(-) rename addons/a11y/src/{register.tsx => manager.tsx} (100%) rename addons/actions/src/{register.tsx => manager.tsx} (100%) rename addons/backgrounds/src/{register.tsx => manager.tsx} (100%) create mode 100644 addons/controls/manager.js rename addons/controls/src/{register.tsx => manager.tsx} (100%) rename addons/docs/src/{register.ts => manager.ts} (100%) rename addons/interactions/src/{register.tsx => manager.tsx} (100%) rename addons/jest/src/{register.tsx => manager.tsx} (100%) rename addons/links/src/{register.ts => manager.ts} (100%) rename addons/measure/src/{register.tsx => manager.tsx} (100%) rename addons/outline/src/{register.tsx => manager.tsx} (100%) rename addons/storysource/src/{register.tsx => manager.tsx} (100%) rename addons/toolbars/src/{register.tsx => manager.tsx} (100%) rename addons/viewport/src/{register.tsx => manager.tsx} (100%) rename examples/cra-ts-kitchen-sink/.storybook/localAddon/{register.tsx => manager.tsx} (100%) diff --git a/addons/a11y/preset.js b/addons/a11y/preset.js index fc6884de55c..8dbfe7a6083 100644 --- a/addons/a11y/preset.js +++ b/addons/a11y/preset.js @@ -1,5 +1,5 @@ function managerEntries(entry = []) { - return [...entry, require.resolve('./dist/esm/register')]; + return [...entry, require.resolve('./dist/esm/manager')]; } function config(entry = []) { diff --git a/addons/a11y/register.js b/addons/a11y/register.js index f209c0eb370..81964d78c60 100755 --- a/addons/a11y/register.js +++ b/addons/a11y/register.js @@ -1 +1 @@ -require('./dist/esm/register'); +require('./dist/esm/manager'); diff --git a/addons/a11y/src/register.tsx b/addons/a11y/src/manager.tsx similarity index 100% rename from addons/a11y/src/register.tsx rename to addons/a11y/src/manager.tsx diff --git a/addons/actions/preset.js b/addons/actions/preset.js index ba70abe968e..2047730404c 100644 --- a/addons/actions/preset.js +++ b/addons/actions/preset.js @@ -1,5 +1,5 @@ function managerEntries(entry, options) { - return [...entry, require.resolve('./dist/esm/register')]; + return [...entry, require.resolve('./dist/esm/manager')]; } function config(entry = [], { addDecorator = true } = {}) { diff --git a/addons/actions/register.js b/addons/actions/register.js index f209c0eb370..81964d78c60 100644 --- a/addons/actions/register.js +++ b/addons/actions/register.js @@ -1 +1 @@ -require('./dist/esm/register'); +require('./dist/esm/manager'); diff --git a/addons/actions/src/register.tsx b/addons/actions/src/manager.tsx similarity index 100% rename from addons/actions/src/register.tsx rename to addons/actions/src/manager.tsx diff --git a/addons/backgrounds/preset.js b/addons/backgrounds/preset.js index a80aaefb5b3..7a0ed685b00 100644 --- a/addons/backgrounds/preset.js +++ b/addons/backgrounds/preset.js @@ -7,7 +7,7 @@ function config(entry = []) { } function managerEntries(entry = [], options) { - return [...entry, require.resolve('./dist/esm/register')]; + return [...entry, require.resolve('./dist/esm/manager')]; } module.exports = { diff --git a/addons/backgrounds/register.js b/addons/backgrounds/register.js index f209c0eb370..81964d78c60 100644 --- a/addons/backgrounds/register.js +++ b/addons/backgrounds/register.js @@ -1 +1 @@ -require('./dist/esm/register'); +require('./dist/esm/manager'); diff --git a/addons/backgrounds/src/register.tsx b/addons/backgrounds/src/manager.tsx similarity index 100% rename from addons/backgrounds/src/register.tsx rename to addons/backgrounds/src/manager.tsx diff --git a/addons/controls/manager.js b/addons/controls/manager.js new file mode 100644 index 00000000000..4e287d25b15 --- /dev/null +++ b/addons/controls/manager.js @@ -0,0 +1 @@ +import './dist/esm/manager'; diff --git a/addons/controls/package.json b/addons/controls/package.json index df0bac75458..2101dcae8a4 100644 --- a/addons/controls/package.json +++ b/addons/controls/package.json @@ -25,8 +25,8 @@ "url": "https://opencollective.com/storybook" }, "license": "MIT", - "main": "dist/cjs/register.js", - "module": "dist/esm/register.js", + "main": "dist/cjs/manager.js", + "module": "dist/esm/manager.js", "types": "dist/ts3.9/index.d.ts", "typesVersions": { "<3.8": { @@ -74,7 +74,7 @@ "access": "public" }, "gitHead": "5cd3cd92ff4ab3dce81726f0d3913d7077926bee", - "sbmodern": "dist/modern/register.js", + "sbmodern": "dist/modern/manager.js", "storybook": { "displayName": "Controls", "icon": "https://user-images.githubusercontent.com/263385/101991669-479cc600-3c7c-11eb-93d9-38b67e8371f2.png", diff --git a/addons/controls/preset.js b/addons/controls/preset.js index 3dd9b66d3aa..e4d018037bb 100644 --- a/addons/controls/preset.js +++ b/addons/controls/preset.js @@ -2,7 +2,7 @@ function managerEntries(entry = [], options) { // eslint-disable-next-line global-require const { checkDocsLoaded } = require('./dist/cjs/preset/checkDocsLoaded'); checkDocsLoaded(options.configDir); - return [...entry, require.resolve('./dist/esm/register')]; + return [...entry, require.resolve('./dist/esm/manager')]; } module.exports = { managerEntries }; diff --git a/addons/controls/register.js b/addons/controls/register.js index 681a5d09dce..e6fe91b6dd6 100644 --- a/addons/controls/register.js +++ b/addons/controls/register.js @@ -1 +1,2 @@ -import './dist/esm/register'; +// @deprecated - please remove in 7.0 +import './dist/esm/manager'; diff --git a/addons/controls/src/register.tsx b/addons/controls/src/manager.tsx similarity index 100% rename from addons/controls/src/register.tsx rename to addons/controls/src/manager.tsx diff --git a/addons/docs/register.js b/addons/docs/register.js index 980200ade08..afaa5ae8ebd 100644 --- a/addons/docs/register.js +++ b/addons/docs/register.js @@ -1,2 +1,2 @@ /* eslint-disable import/extensions */ -require('./dist/esm/register.js'); +require('./dist/esm/manager.js'); diff --git a/addons/docs/src/register.ts b/addons/docs/src/manager.ts similarity index 100% rename from addons/docs/src/register.ts rename to addons/docs/src/manager.ts diff --git a/addons/interactions/package.json b/addons/interactions/package.json index 7aa41cc8a89..33a8270bed7 100644 --- a/addons/interactions/package.json +++ b/addons/interactions/package.json @@ -21,8 +21,8 @@ "url": "https://opencollective.com/storybook" }, "license": "MIT", - "main": "dist/cjs/register.js", - "module": "dist/esm/register.js", + "main": "dist/cjs/manager.js", + "module": "dist/esm/manager.js", "types": "dist/ts3.9/index.d.ts", "typesVersions": { "<3.8": { diff --git a/addons/interactions/preset.js b/addons/interactions/preset.js index d7d7f8fd24f..aeb3255f85e 100644 --- a/addons/interactions/preset.js +++ b/addons/interactions/preset.js @@ -6,7 +6,7 @@ function managerEntries(entry = [], options) { // eslint-disable-next-line global-require const { checkActionsLoaded } = require('./dist/cjs/preset/checkActionsLoaded'); checkActionsLoaded(options.configDir); - return [...entry, require.resolve('./dist/esm/register')]; + return [...entry, require.resolve('./dist/esm/manager')]; } module.exports = { diff --git a/addons/interactions/register.js b/addons/interactions/register.js index 681a5d09dce..4e287d25b15 100644 --- a/addons/interactions/register.js +++ b/addons/interactions/register.js @@ -1 +1 @@ -import './dist/esm/register'; +import './dist/esm/manager'; diff --git a/addons/interactions/src/register.tsx b/addons/interactions/src/manager.tsx similarity index 100% rename from addons/interactions/src/register.tsx rename to addons/interactions/src/manager.tsx diff --git a/addons/jest/register.js b/addons/jest/register.js index f209c0eb370..81964d78c60 100644 --- a/addons/jest/register.js +++ b/addons/jest/register.js @@ -1 +1 @@ -require('./dist/esm/register'); +require('./dist/esm/manager'); diff --git a/addons/jest/src/register.tsx b/addons/jest/src/manager.tsx similarity index 100% rename from addons/jest/src/register.tsx rename to addons/jest/src/manager.tsx diff --git a/addons/links/preset.js b/addons/links/preset.js index 2b5ed5ac00d..3a98a99189c 100644 --- a/addons/links/preset.js +++ b/addons/links/preset.js @@ -1,5 +1,5 @@ function managerEntries(entry = []) { - return [...entry, require.resolve('./dist/esm/register')]; + return [...entry, require.resolve('./dist/esm/manager')]; } function config(entry = [], { addDecorator = true } = {}) { diff --git a/addons/links/register.js b/addons/links/register.js index f209c0eb370..81964d78c60 100644 --- a/addons/links/register.js +++ b/addons/links/register.js @@ -1 +1 @@ -require('./dist/esm/register'); +require('./dist/esm/manager'); diff --git a/addons/links/src/register.ts b/addons/links/src/manager.ts similarity index 100% rename from addons/links/src/register.ts rename to addons/links/src/manager.ts diff --git a/addons/measure/preset.js b/addons/measure/preset.js index 459bbb650cc..eb939722176 100644 --- a/addons/measure/preset.js +++ b/addons/measure/preset.js @@ -3,7 +3,7 @@ function config(entry = []) { } function managerEntries(entry = [], options) { - return [...entry, require.resolve('./dist/esm/register')]; + return [...entry, require.resolve('./dist/esm/manager')]; } module.exports = { diff --git a/addons/measure/register.js b/addons/measure/register.js index f209c0eb370..81964d78c60 100644 --- a/addons/measure/register.js +++ b/addons/measure/register.js @@ -1 +1 @@ -require('./dist/esm/register'); +require('./dist/esm/manager'); diff --git a/addons/measure/src/register.tsx b/addons/measure/src/manager.tsx similarity index 100% rename from addons/measure/src/register.tsx rename to addons/measure/src/manager.tsx diff --git a/addons/outline/preset.js b/addons/outline/preset.js index 459bbb650cc..eb939722176 100644 --- a/addons/outline/preset.js +++ b/addons/outline/preset.js @@ -3,7 +3,7 @@ function config(entry = []) { } function managerEntries(entry = [], options) { - return [...entry, require.resolve('./dist/esm/register')]; + return [...entry, require.resolve('./dist/esm/manager')]; } module.exports = { diff --git a/addons/outline/register.js b/addons/outline/register.js index f209c0eb370..81964d78c60 100644 --- a/addons/outline/register.js +++ b/addons/outline/register.js @@ -1 +1 @@ -require('./dist/esm/register'); +require('./dist/esm/manager'); diff --git a/addons/outline/src/register.tsx b/addons/outline/src/manager.tsx similarity index 100% rename from addons/outline/src/register.tsx rename to addons/outline/src/manager.tsx diff --git a/addons/storysource/preset.js b/addons/storysource/preset.js index 9a53f8d6822..9ffb6ac993f 100644 --- a/addons/storysource/preset.js +++ b/addons/storysource/preset.js @@ -25,7 +25,7 @@ function webpack(webpackConfig = {}, options = {}) { } function managerEntries(entry = []) { - return [...entry, require.resolve('./dist/esm/register')]; + return [...entry, require.resolve('./dist/esm/manager')]; } module.exports = { webpack, managerEntries }; diff --git a/addons/storysource/register.js b/addons/storysource/register.js index f209c0eb370..81964d78c60 100644 --- a/addons/storysource/register.js +++ b/addons/storysource/register.js @@ -1 +1 @@ -require('./dist/esm/register'); +require('./dist/esm/manager'); diff --git a/addons/storysource/src/register.tsx b/addons/storysource/src/manager.tsx similarity index 100% rename from addons/storysource/src/register.tsx rename to addons/storysource/src/manager.tsx diff --git a/addons/toolbars/package.json b/addons/toolbars/package.json index 9bee5167a19..5445bbe01b3 100644 --- a/addons/toolbars/package.json +++ b/addons/toolbars/package.json @@ -25,9 +25,9 @@ "url": "https://opencollective.com/storybook" }, "license": "MIT", - "main": "dist/cjs/register.js", - "module": "dist/esm/register.js", - "types": "dist/ts3.9/register.d.ts", + "main": "dist/cjs/manager.js", + "module": "dist/esm/manager.js", + "types": "dist/ts3.9/manager.d.ts", "typesVersions": { "<3.8": { "dist/ts3.9/*": [ @@ -68,7 +68,7 @@ "access": "public" }, "gitHead": "5cd3cd92ff4ab3dce81726f0d3913d7077926bee", - "sbmodern": "dist/modern/register.js", + "sbmodern": "dist/modern/manager.js", "storybook": { "displayName": "Toolbars", "icon": "https://user-images.githubusercontent.com/263385/101991677-48cdf300-3c7c-11eb-93b4-19b0e3366959.png", diff --git a/addons/toolbars/preset.js b/addons/toolbars/preset.js index 656f27562a4..90d004664d1 100644 --- a/addons/toolbars/preset.js +++ b/addons/toolbars/preset.js @@ -1,5 +1,5 @@ function managerEntries(entry = []) { - return [...entry, require.resolve('./dist/esm/register')]; + return [...entry, require.resolve('./dist/esm/manager')]; } module.exports = { managerEntries }; diff --git a/addons/toolbars/register.js b/addons/toolbars/register.js index 681a5d09dce..4e287d25b15 100644 --- a/addons/toolbars/register.js +++ b/addons/toolbars/register.js @@ -1 +1 @@ -import './dist/esm/register'; +import './dist/esm/manager'; diff --git a/addons/toolbars/src/register.tsx b/addons/toolbars/src/manager.tsx similarity index 100% rename from addons/toolbars/src/register.tsx rename to addons/toolbars/src/manager.tsx diff --git a/addons/viewport/preset.js b/addons/viewport/preset.js index 656f27562a4..90d004664d1 100644 --- a/addons/viewport/preset.js +++ b/addons/viewport/preset.js @@ -1,5 +1,5 @@ function managerEntries(entry = []) { - return [...entry, require.resolve('./dist/esm/register')]; + return [...entry, require.resolve('./dist/esm/manager')]; } module.exports = { managerEntries }; diff --git a/addons/viewport/register.js b/addons/viewport/register.js index f209c0eb370..81964d78c60 100644 --- a/addons/viewport/register.js +++ b/addons/viewport/register.js @@ -1 +1 @@ -require('./dist/esm/register'); +require('./dist/esm/manager'); diff --git a/addons/viewport/src/register.tsx b/addons/viewport/src/manager.tsx similarity index 100% rename from addons/viewport/src/register.tsx rename to addons/viewport/src/manager.tsx diff --git a/docs/snippets/common/args-usage-with-addons.js.mdx b/docs/snippets/common/args-usage-with-addons.js.mdx index 7c1ccf730ef..77d83335206 100644 --- a/docs/snippets/common/args-usage-with-addons.js.mdx +++ b/docs/snippets/common/args-usage-with-addons.js.mdx @@ -1,5 +1,5 @@ ```js -// your-addon/register.js +// your-addon/manager.js import { useArgs } from '@storybook/api'; diff --git a/docs/snippets/common/my-addon-initial-panel-state.js.mdx b/docs/snippets/common/my-addon-initial-panel-state.js.mdx index 72c6f1e7cb0..8009d61ac4f 100644 --- a/docs/snippets/common/my-addon-initial-panel-state.js.mdx +++ b/docs/snippets/common/my-addon-initial-panel-state.js.mdx @@ -1,5 +1,5 @@ ```js -// /my-addon/src/register.js +// /my-addon/src/manager.js import React from 'react'; diff --git a/docs/snippets/common/my-addon-preset-implementation.js.mdx b/docs/snippets/common/my-addon-preset-implementation.js.mdx index 2f31ec25ac3..6ad7df9ee3f 100644 --- a/docs/snippets/common/my-addon-preset-implementation.js.mdx +++ b/docs/snippets/common/my-addon-preset-implementation.js.mdx @@ -2,7 +2,7 @@ // /my-addon/src/preset.js function managerEntries(entry = []) { - return [...entry, require.resolve("./register")]; //👈 Addon implementation + return [...entry, require.resolve("./manager")]; //👈 Addon implementation } module.exports = { managerEntries } diff --git a/docs/snippets/common/storybook-addon-change-panel.js.mdx b/docs/snippets/common/storybook-addon-change-panel.js.mdx index 8e4794320c1..fc9f821e60c 100644 --- a/docs/snippets/common/storybook-addon-change-panel.js.mdx +++ b/docs/snippets/common/storybook-addon-change-panel.js.mdx @@ -1,5 +1,5 @@ ```js -// /my-addon/src/register.js +// /my-addon/src/manager.js import { useParameter } from '@storybook/api'; diff --git a/docs/snippets/common/storybook-addon-disable-addon.js.mdx b/docs/snippets/common/storybook-addon-disable-addon.js.mdx index b8dc0b43b88..f74d563d536 100644 --- a/docs/snippets/common/storybook-addon-disable-addon.js.mdx +++ b/docs/snippets/common/storybook-addon-disable-addon.js.mdx @@ -1,5 +1,5 @@ ```js -// /my-addon/register.js +// /my-addon/manager.js addons.register(ADDON_ID, () => { addons.add(PANEL_ID, { diff --git a/docs/snippets/common/storybook-addon-load-external-addons-preset.js.mdx b/docs/snippets/common/storybook-addon-load-external-addons-preset.js.mdx index b13c6841ec8..9e2cac6af83 100644 --- a/docs/snippets/common/storybook-addon-load-external-addons-preset.js.mdx +++ b/docs/snippets/common/storybook-addon-load-external-addons-preset.js.mdx @@ -2,7 +2,7 @@ // my-preset/index.js function managerEntries(entry = []) { - return [...entry, require.resolve('my-other-addon/register')]; + return [...entry, require.resolve('my-other-addon/manager')]; } const config = (entry = [], options) => { diff --git a/docs/snippets/common/storybook-addon-panel-example.js.mdx b/docs/snippets/common/storybook-addon-panel-example.js.mdx index 5f3898b61c6..29d8a1ab9d4 100644 --- a/docs/snippets/common/storybook-addon-panel-example.js.mdx +++ b/docs/snippets/common/storybook-addon-panel-example.js.mdx @@ -1,5 +1,5 @@ ```js -// addon-panel/register.js +// addon-panel/manager.js import React from 'react'; diff --git a/docs/snippets/common/storybook-addon-panel-initial.js.mdx b/docs/snippets/common/storybook-addon-panel-initial.js.mdx index fb4b80e7cff..9f9e6b6c05f 100644 --- a/docs/snippets/common/storybook-addon-panel-initial.js.mdx +++ b/docs/snippets/common/storybook-addon-panel-initial.js.mdx @@ -1,5 +1,5 @@ ```js -// .storybook/my-addon/register.js +// .storybook/my-addon/manager.js import React from 'react'; diff --git a/docs/snippets/common/storybook-addon-preset-example.js.mdx b/docs/snippets/common/storybook-addon-preset-example.js.mdx index a23a6ca04f3..db1a7c26b59 100644 --- a/docs/snippets/common/storybook-addon-preset-example.js.mdx +++ b/docs/snippets/common/storybook-addon-preset-example.js.mdx @@ -6,7 +6,7 @@ export function config(entry = []) { } export function managerEntries(entries) { - return [...entries, require.resolve('./register')]; + return [...entries, require.resolve('./manager')]; } export const parameters = { diff --git a/docs/snippets/common/storybook-addon-tab-example.js.mdx b/docs/snippets/common/storybook-addon-tab-example.js.mdx index bbfddd9627c..dcfa1b41f92 100644 --- a/docs/snippets/common/storybook-addon-tab-example.js.mdx +++ b/docs/snippets/common/storybook-addon-tab-example.js.mdx @@ -1,5 +1,5 @@ ```js -// addon-tab/register.js +// addon-tab/manager.js import React from 'react'; diff --git a/docs/snippets/common/storybook-addon-toolbar-example.js.mdx b/docs/snippets/common/storybook-addon-toolbar-example.js.mdx index 37ca2cfb271..869c9df49ad 100644 --- a/docs/snippets/common/storybook-addon-toolbar-example.js.mdx +++ b/docs/snippets/common/storybook-addon-toolbar-example.js.mdx @@ -1,5 +1,5 @@ ```js -// addon-toolbar/register.js +// addon-toolbar/manager.js import React from "react"; diff --git a/docs/snippets/common/storybook-addons-api-disablequeryparams.js.mdx b/docs/snippets/common/storybook-addons-api-disablequeryparams.js.mdx index 415edea16fd..6f5f9e3845a 100644 --- a/docs/snippets/common/storybook-addons-api-disablequeryparams.js.mdx +++ b/docs/snippets/common/storybook-addons-api-disablequeryparams.js.mdx @@ -1,5 +1,5 @@ ```js -// /my-addon/register.js +// /my-addon/manager.js addons.register('my-organisation/my-addon', (api) => { api.setQueryParams({ diff --git a/docs/snippets/common/storybook-addons-api-getqueryparam.js.mdx b/docs/snippets/common/storybook-addons-api-getqueryparam.js.mdx index 76513f99291..0c324ddd0d2 100644 --- a/docs/snippets/common/storybook-addons-api-getqueryparam.js.mdx +++ b/docs/snippets/common/storybook-addons-api-getqueryparam.js.mdx @@ -1,5 +1,5 @@ ```js -// /my-addon/register.js +// /my-addon/manager.js addons.register('my-organisation/my-addon', (api) => { api.getQueryParam('bbc'); diff --git a/docs/snippets/common/storybook-addons-api-geturlstate.js.mdx b/docs/snippets/common/storybook-addons-api-geturlstate.js.mdx index e7e9f13fe83..39321b7f195 100644 --- a/docs/snippets/common/storybook-addons-api-geturlstate.js.mdx +++ b/docs/snippets/common/storybook-addons-api-geturlstate.js.mdx @@ -1,5 +1,5 @@ ```js -// /my-addon/register.js +// /my-addon/manager.js addons.register('my-organisation/my-addon', (api) => { const href = api.getUrlState({ diff --git a/docs/snippets/common/storybook-addons-api-imports.js.mdx b/docs/snippets/common/storybook-addons-api-imports.js.mdx index eb2af57b1a9..e44d88ab048 100644 --- a/docs/snippets/common/storybook-addons-api-imports.js.mdx +++ b/docs/snippets/common/storybook-addons-api-imports.js.mdx @@ -1,5 +1,5 @@ ```js -// .storybook/my-addon/register.js +// .storybook/my-addon/manager.js import { addons } from '@storybook/addons'; ``` \ No newline at end of file diff --git a/docs/snippets/common/storybook-addons-api-makedecorator.js.mdx b/docs/snippets/common/storybook-addons-api-makedecorator.js.mdx index 2f69823954b..3c9617bfa19 100644 --- a/docs/snippets/common/storybook-addons-api-makedecorator.js.mdx +++ b/docs/snippets/common/storybook-addons-api-makedecorator.js.mdx @@ -1,5 +1,5 @@ ```js -// .storybook/my-addon/register.js +// .storybook/my-addon/manager.js import { makeDecorator } from '@storybook/addons'; diff --git a/docs/snippets/common/storybook-addons-api-on.js.mdx b/docs/snippets/common/storybook-addons-api-on.js.mdx index aa2e706c51c..ac86c5e4391 100644 --- a/docs/snippets/common/storybook-addons-api-on.js.mdx +++ b/docs/snippets/common/storybook-addons-api-on.js.mdx @@ -1,5 +1,5 @@ ```js -// /my-addon/register.js +// /my-addon/manager.js addons.register('my-organisation/my-addon', (api) => { api.on('some-event', (eventData) => console.log(eventData)); diff --git a/docs/snippets/common/storybook-addons-api-register.js.mdx b/docs/snippets/common/storybook-addons-api-register.js.mdx index 009b2ea7e66..3c044eebd8c 100644 --- a/docs/snippets/common/storybook-addons-api-register.js.mdx +++ b/docs/snippets/common/storybook-addons-api-register.js.mdx @@ -1,5 +1,5 @@ ```js -// .storybook/my-addon/register.js +// .storybook/my-addon/manager.js import { addons } from '@storybook/addons'; diff --git a/docs/snippets/common/storybook-addons-api-selectincurrentkind.js.mdx b/docs/snippets/common/storybook-addons-api-selectincurrentkind.js.mdx index 24b46cc3191..46c89f25fa4 100644 --- a/docs/snippets/common/storybook-addons-api-selectincurrentkind.js.mdx +++ b/docs/snippets/common/storybook-addons-api-selectincurrentkind.js.mdx @@ -1,5 +1,5 @@ ```js -// /my-addon/register.js +// /my-addon/manager.js addons.register('my-organisation/my-addon', (api) => { api.selectInCurrentKind('Basic'); diff --git a/docs/snippets/common/storybook-addons-api-selectstory.js.mdx b/docs/snippets/common/storybook-addons-api-selectstory.js.mdx index bd1314b7ec4..4af2f91bc3a 100644 --- a/docs/snippets/common/storybook-addons-api-selectstory.js.mdx +++ b/docs/snippets/common/storybook-addons-api-selectstory.js.mdx @@ -1,5 +1,5 @@ ```js -// /my-addon/register.js +// /my-addon/manager.js addons.register('my-organisation/my-addon', (api) => { api.selectStory('Button', 'Basic'); diff --git a/docs/snippets/common/storybook-addons-api-setqueryparams.js.mdx b/docs/snippets/common/storybook-addons-api-setqueryparams.js.mdx index 988482dbd3a..bbfaa727b72 100644 --- a/docs/snippets/common/storybook-addons-api-setqueryparams.js.mdx +++ b/docs/snippets/common/storybook-addons-api-setqueryparams.js.mdx @@ -1,5 +1,5 @@ ```js -// /my-addon/register.js +// /my-addon/manager.js addons.register('my-organisation/my-addon', (api) => { api.setQueryParams({ diff --git a/docs/snippets/common/storybook-addons-api-useaddonstate.js.mdx b/docs/snippets/common/storybook-addons-api-useaddonstate.js.mdx index c0800d6d301..6d6db143ba1 100644 --- a/docs/snippets/common/storybook-addons-api-useaddonstate.js.mdx +++ b/docs/snippets/common/storybook-addons-api-useaddonstate.js.mdx @@ -1,5 +1,5 @@ ```js -// /my-addon/register.js +// /my-addon/manager.js import React from 'react'; diff --git a/docs/snippets/common/storybook-addons-api-useapi.js.mdx b/docs/snippets/common/storybook-addons-api-useapi.js.mdx index f88c1c1524a..f6c05424dc6 100644 --- a/docs/snippets/common/storybook-addons-api-useapi.js.mdx +++ b/docs/snippets/common/storybook-addons-api-useapi.js.mdx @@ -1,5 +1,5 @@ ```js -// /my-addon/register.js +// /my-addon/manager.js import React from 'react'; diff --git a/docs/snippets/common/storybook-addons-api-usechannel.js.mdx b/docs/snippets/common/storybook-addons-api-usechannel.js.mdx index 7184c752dc0..f017c5cfccb 100644 --- a/docs/snippets/common/storybook-addons-api-usechannel.js.mdx +++ b/docs/snippets/common/storybook-addons-api-usechannel.js.mdx @@ -1,5 +1,5 @@ ```js -// /my-addon/register.js +// /my-addon/manager.js import React from 'react'; diff --git a/docs/snippets/common/storybook-addons-api-useglobal.js.mdx b/docs/snippets/common/storybook-addons-api-useglobal.js.mdx index 94f5a8b8331..ad33aef3425 100644 --- a/docs/snippets/common/storybook-addons-api-useglobal.js.mdx +++ b/docs/snippets/common/storybook-addons-api-useglobal.js.mdx @@ -1,5 +1,5 @@ ```js -// /my-addon/register.js +// /my-addon/manager.js import React from 'react'; diff --git a/docs/snippets/common/storybook-addons-api-useparameter.js.mdx b/docs/snippets/common/storybook-addons-api-useparameter.js.mdx index 3c496cbb2a0..fdbc7430178 100644 --- a/docs/snippets/common/storybook-addons-api-useparameter.js.mdx +++ b/docs/snippets/common/storybook-addons-api-useparameter.js.mdx @@ -1,5 +1,5 @@ ```js -// /my-addon/register.js +// /my-addon/manager.js import React from 'react'; diff --git a/docs/snippets/common/storybook-addons-api-usestorybookstate.js.mdx b/docs/snippets/common/storybook-addons-api-usestorybookstate.js.mdx index 62f1605af9f..4e1515a3b6b 100644 --- a/docs/snippets/common/storybook-addons-api-usestorybookstate.js.mdx +++ b/docs/snippets/common/storybook-addons-api-usestorybookstate.js.mdx @@ -1,5 +1,5 @@ ```js -// /my-addon/register.js +// /my-addon/manager.js import React from 'react'; diff --git a/docs/snippets/common/storybook-argtypes-with-addon.js.mdx b/docs/snippets/common/storybook-argtypes-with-addon.js.mdx index 3187d5e6f3a..f34c4859bfb 100644 --- a/docs/snippets/common/storybook-argtypes-with-addon.js.mdx +++ b/docs/snippets/common/storybook-argtypes-with-addon.js.mdx @@ -1,5 +1,5 @@ ```js -// .storybook/my-addon/register.js +// .storybook/my-addon/manager.js import { useArgTypes } from '@storybook/api'; diff --git a/docs/snippets/common/storybook-main-register-addon.js.mdx b/docs/snippets/common/storybook-main-register-addon.js.mdx index 0f587017ee8..675a1d62c08 100644 --- a/docs/snippets/common/storybook-main-register-addon.js.mdx +++ b/docs/snippets/common/storybook-main-register-addon.js.mdx @@ -2,6 +2,6 @@ // .storybook/main.js module.exports = { - addons: ['path/to/register.js'], + addons: ['path/to/manager.js'], }; ``` \ No newline at end of file diff --git a/docs/snippets/common/storybook-main-register-presets-managerentry.js.mdx b/docs/snippets/common/storybook-main-register-presets-managerentry.js.mdx index 4a913b4f8aa..3673c58dd3d 100644 --- a/docs/snippets/common/storybook-main-register-presets-managerentry.js.mdx +++ b/docs/snippets/common/storybook-main-register-presets-managerentry.js.mdx @@ -3,7 +3,7 @@ module.exports = { addons: [ - '@storybook/addon-storysource/register', // A managerEntry registered here, in this case from the storysource addon. + '@storybook/addon-storysource/manager', // A managerEntry registered here, in this case from the storysource addon. '@storybook/addon-docs/preset', // A preset registered here, in this case from the addon-docs addon. ], }; diff --git a/docs/snippets/common/storybook-main-use-manager-entries.js.mdx b/docs/snippets/common/storybook-main-use-manager-entries.js.mdx index 5bbaa228a80..00b2730bf10 100644 --- a/docs/snippets/common/storybook-main-use-manager-entries.js.mdx +++ b/docs/snippets/common/storybook-main-use-manager-entries.js.mdx @@ -2,6 +2,6 @@ // .storybook/main.js module.exports = { - managerEntries: ['@storybook/addon-storysource/register'], + managerEntries: ['@storybook/addon-storysource/manager'], }; ``` \ No newline at end of file diff --git a/docs/snippets/common/storybook-storysource-manager-entries.js.mdx b/docs/snippets/common/storybook-storysource-manager-entries.js.mdx index 5e792ec1d29..4651d56bf56 100644 --- a/docs/snippets/common/storybook-storysource-manager-entries.js.mdx +++ b/docs/snippets/common/storybook-storysource-manager-entries.js.mdx @@ -2,6 +2,6 @@ // storysource/preset.js export function managerEntries(entry = []) { - return [...entry, require.resolve('@storybook/addon-storysource/register')]; + return [...entry, require.resolve('@storybook/addon-storysource/manager')]; } ``` \ No newline at end of file diff --git a/examples/cra-ts-kitchen-sink/.storybook/localAddon/register.tsx b/examples/cra-ts-kitchen-sink/.storybook/localAddon/manager.tsx similarity index 100% rename from examples/cra-ts-kitchen-sink/.storybook/localAddon/register.tsx rename to examples/cra-ts-kitchen-sink/.storybook/localAddon/manager.tsx diff --git a/examples/cra-ts-kitchen-sink/.storybook/main.ts b/examples/cra-ts-kitchen-sink/.storybook/main.ts index 048a7f5cefa..b225f343a8e 100644 --- a/examples/cra-ts-kitchen-sink/.storybook/main.ts +++ b/examples/cra-ts-kitchen-sink/.storybook/main.ts @@ -12,7 +12,7 @@ module.exports = { '@storybook/addon-actions', '@storybook/addon-links', '@storybook/addon-a11y', - './localAddon/register.tsx', + './localAddon/manager.tsx', './localAddon/preset.ts', ], webpackFinal: (config: Configuration) => { diff --git a/lib/cli/src/add.test.ts b/lib/cli/src/add.test.ts index 261c6626b11..d6632443ea4 100644 --- a/lib/cli/src/add.test.ts +++ b/lib/cli/src/add.test.ts @@ -9,13 +9,13 @@ import { describe('addStorybookAddonToFile should correctly register an Storybook addon', () => { test('to an empty array', () => { expect(addStorybookAddonToFile('addon-name', [], true)).toEqual([ - `import '${storybookAddonScope}addon-name/register';`, + `import '${storybookAddonScope}addon-name/manager';`, ]); }); test('to an empty file', () => { expect(addStorybookAddonToFile('addon-name', [''], true)).toEqual([ - `import '${storybookAddonScope}addon-name/register';`, + `import '${storybookAddonScope}addon-name/manager';`, '', ]); }); @@ -25,16 +25,16 @@ describe('addStorybookAddonToFile should correctly register an Storybook addon', addStorybookAddonToFile( 'addon-name', [ - "import '@storybook/addon-actions/register';", - "import '@storybook/addon-links/register';", + "import '@storybook/addon-actions/manager';", + "import '@storybook/addon-links/manager';", '', ], true ) ).toEqual([ - "import '@storybook/addon-actions/register';", - "import '@storybook/addon-links/register';", - `import '${storybookAddonScope}addon-name/register';`, + `import '${storybookAddonScope}addon-name/manager';`, + "import '@storybook/addon-actions/manager';", + "import '@storybook/addon-links/manager';", '', ]); }); @@ -44,8 +44,8 @@ describe('addStorybookAddonToFile should correctly register an Storybook addon', addStorybookAddonToFile( 'addon-name', [ - "import '@storybook/addon-links/register';", - "import '@storybook/addon-actions/register';", + "import '@storybook/addon-links/manager';", + "import '@storybook/addon-actions/manager';", '', '//some other stuff', '', @@ -55,9 +55,9 @@ describe('addStorybookAddonToFile should correctly register an Storybook addon', true ) ).toEqual([ - "import '@storybook/addon-links/register';", - "import '@storybook/addon-actions/register';", - `import '${storybookAddonScope}addon-name/register';`, + `import '${storybookAddonScope}addon-name/manager';`, + "import '@storybook/addon-links/manager';", + "import '@storybook/addon-actions/manager';", '', '//some other stuff', '', @@ -71,17 +71,17 @@ describe('addStorybookAddonToFile should correctly register an Storybook addon', addStorybookAddonToFile( 'addon-name', [ - "import '@storybook/addon-actions/register';", - "import '@storybook/addon-links/register';", - `import '${storybookAddonScope}addon-name/register';`, + "import '@storybook/addon-actions/manager';", + "import '@storybook/addon-links/manager';", + `import '${storybookAddonScope}addon-name/manager';`, '', ], true ) ).toEqual([ - "import '@storybook/addon-actions/register';", - "import '@storybook/addon-links/register';", - `import '${storybookAddonScope}addon-name/register';`, + "import '@storybook/addon-actions/manager';", + "import '@storybook/addon-links/manager';", + `import '${storybookAddonScope}addon-name/manager';`, '', ]); }); @@ -91,16 +91,16 @@ describe('addStorybookAddonToFile should correctly register an Storybook addon', addStorybookAddonToFile( 'addon-name', [ - "import '@storybook/addon-actions/register';", - "import '@storybook/addon-links/register';", + "import '@storybook/addon-actions/manager';", + "import '@storybook/addon-links/manager';", '', ], false ) ).toEqual([ - "import '@storybook/addon-actions/register';", - "import '@storybook/addon-links/register';", - `import 'addon-name/register';`, + `import 'addon-name/manager';`, + "import '@storybook/addon-actions/manager';", + "import '@storybook/addon-links/manager';", '', ]); }); diff --git a/lib/cli/src/add.ts b/lib/cli/src/add.ts index 300a2303966..f6fb63e3787 100644 --- a/lib/cli/src/add.ts +++ b/lib/cli/src/add.ts @@ -79,7 +79,7 @@ export const addStorybookAddonToFile = ( isOfficialAddon: boolean ) => { const addonNameNoTag = addonName.split('@')[0]; - const alreadyRegistered = addonsFile.find((line) => line.includes(`${addonNameNoTag}/register`)); + const alreadyRegistered = addonsFile.find((line) => line.includes(`${addonNameNoTag}/manager`)); if (alreadyRegistered) { return addonsFile; @@ -93,7 +93,7 @@ export const addStorybookAddonToFile = ( return [ ...addonsFile.slice(0, latestImportIndex + 1), - `import '${getPackageName(addonNameNoTag, isOfficialAddon)}/register';`, + `import '${getPackageName(addonNameNoTag, isOfficialAddon)}/manager';`, ...addonsFile.slice(latestImportIndex + 1), ]; }; diff --git a/lib/cli/src/generators/REACT_NATIVE/template-csf/storybook/addons.js b/lib/cli/src/generators/REACT_NATIVE/template-csf/storybook/addons.js index bc646c943eb..c3f195bdf9e 100644 --- a/lib/cli/src/generators/REACT_NATIVE/template-csf/storybook/addons.js +++ b/lib/cli/src/generators/REACT_NATIVE/template-csf/storybook/addons.js @@ -1,3 +1,3 @@ -import '@storybook/addon-actions/register'; -import '@storybook/addon-links/register'; -import '@storybook/addon-knobs/register'; +import '@storybook/addon-actions/manager'; +import '@storybook/addon-links/manager'; +import '@storybook/addon-knobs/manager'; diff --git a/lib/cli/src/generators/REACT_NATIVE/template-csf/storybook/rn-addons.js b/lib/cli/src/generators/REACT_NATIVE/template-csf/storybook/rn-addons.js index 4d30f923173..18ce369c70b 100644 --- a/lib/cli/src/generators/REACT_NATIVE/template-csf/storybook/rn-addons.js +++ b/lib/cli/src/generators/REACT_NATIVE/template-csf/storybook/rn-addons.js @@ -1,2 +1,2 @@ -import '@storybook/addon-ondevice-actions/register'; -import '@storybook/addon-ondevice-knobs/register'; +import '@storybook/addon-ondevice-actions/manager'; +import '@storybook/addon-ondevice-knobs/manager'; diff --git a/lib/core-common/src/presets.test.ts b/lib/core-common/src/presets.test.ts index d9a26cbf12a..eddb92705c1 100644 --- a/lib/core-common/src/presets.test.ts +++ b/lib/core-common/src/presets.test.ts @@ -19,6 +19,7 @@ jest.mock('@storybook/node-logger', () => ({ jest.mock('resolve-from', () => (l: any, name: string) => { const KNOWN_FILES = [ + '@storybook/addon-actions/manager', '@storybook/addon-actions/register', './local/preset', './local/addons', @@ -26,6 +27,7 @@ jest.mock('resolve-from', () => (l: any, name: string) => { '/absolute/addons', '@storybook/addon-docs/preset', '@storybook/addon-essentials', + '@storybook/addon-knobs/manager', '@storybook/addon-knobs/register', '@storybook/addon-notes/register-panel', '@storybook/preset-create-react-app', @@ -392,6 +394,13 @@ describe('resolveAddonName', () => { }); }); + it('should resolve managerEntries from new /manager path', () => { + expect(resolveAddonName({}, '@storybook/addon-actions/manager')).toEqual({ + name: '@storybook/addon-actions/manager', + type: 'managerEntries', + }); + }); + it('should resolve presets', () => { expect(resolveAddonName({}, '@storybook/addon-docs')).toEqual({ name: '@storybook/addon-docs/preset', diff --git a/lib/core-common/src/presets.ts b/lib/core-common/src/presets.ts index fdc8f48da23..9d5b8e3c532 100644 --- a/lib/core-common/src/presets.ts +++ b/lib/core-common/src/presets.ts @@ -45,7 +45,7 @@ function resolvePresetFunction( * Parse an addon into either a managerEntries or a preset. Throw on invalid input. * * Valid inputs: - * - '@storybook/addon-actions/register' + * - '@storybook/addon-actions/manager' * => { type: 'managerEntries', item } * * - '@storybook/addon-docs/preset' @@ -64,7 +64,7 @@ export const resolveAddonName = (configDir: string, name: string) => { path = resolveFrom(configDir, name); } else if (name.startsWith('/')) { path = name; - } else if (name.match(/\/(preset|register(-panel)?)(\.(js|ts|tsx|jsx))?$/)) { + } else if (name.match(/\/(preset|manager|register(-panel)?)(\.(js|ts|tsx|jsx))?$/)) { path = name; } @@ -72,8 +72,10 @@ export const resolveAddonName = (configDir: string, name: string) => { if (path) { return { name: path, - // Accept `register`, `register.js`, `require.resolve('foo/register'), `register-panel` - type: path.match(/register(-panel)?(\.(js|ts|tsx|jsx))?$/) ? 'managerEntries' : 'presets', + // Accept `manager`, `register`, `register.js`, `require.resolve('foo/manager'), `register-panel` + type: path.match(/(manager|register(-panel)?)(\.(js|ts|tsx|jsx))?$/) + ? 'managerEntries' + : 'presets', }; } @@ -85,6 +87,14 @@ export const resolveAddonName = (configDir: string, name: string) => { // eslint-disable-next-line no-empty } catch (err) {} + try { + return { + name: resolveFrom(configDir, `${name}/manager`), + type: 'managerEntries', + }; + // eslint-disable-next-line no-empty + } catch (err) {} + try { return { name: resolveFrom(configDir, `${name}/register`), @@ -118,7 +128,7 @@ const map = return resolveAddonName(configDir, name); } catch (err) { logger.error( - `Addon value should end in /register OR it should be a valid preset https://storybook.js.org/docs/react/addons/writing-presets/\n${item}` + `Addon value should end in /manager or /register OR it should be a valid preset https://storybook.js.org/docs/react/addons/writing-presets/\n${item}` ); } return undefined; diff --git a/lib/core-server/src/__snapshots__/cra-ts-essentials_manager-dev-posix b/lib/core-server/src/__snapshots__/cra-ts-essentials_manager-dev-posix index 51e1c74a02f..25d44f7ba9f 100644 --- a/lib/core-server/src/__snapshots__/cra-ts-essentials_manager-dev-posix +++ b/lib/core-server/src/__snapshots__/cra-ts-essentials_manager-dev-posix @@ -7,12 +7,12 @@ Object { "ROOT/lib/core-client/dist/esm/globals/polyfills.js", "ROOT/lib/core-client/dist/esm/manager/index.js", "ROOT/addons/docs/dist/esm/register", - "ROOT/addons/controls/dist/esm/register.js", - "ROOT/addons/actions/dist/esm/register.js", - "ROOT/addons/backgrounds/dist/esm/register.js", - "ROOT/addons/toolbars/dist/esm/register.js", - "ROOT/addons/measure/dist/esm/register.js", - "ROOT/addons/outline/dist/esm/register.js", + "ROOT/addons/controls/dist/esm/manager.js", + "ROOT/addons/actions/dist/esm/manager.js", + "ROOT/addons/backgrounds/dist/esm/manager.js", + "ROOT/addons/toolbars/dist/esm/manager.js", + "ROOT/addons/measure/dist/esm/manager.js", + "ROOT/addons/outline/dist/esm/manager.js", ], "keys": Array [ "name", diff --git a/lib/core-server/src/__snapshots__/cra-ts-essentials_manager-prod-posix b/lib/core-server/src/__snapshots__/cra-ts-essentials_manager-prod-posix index 28bb2d32108..3a22bab507e 100644 --- a/lib/core-server/src/__snapshots__/cra-ts-essentials_manager-prod-posix +++ b/lib/core-server/src/__snapshots__/cra-ts-essentials_manager-prod-posix @@ -7,12 +7,12 @@ Object { "ROOT/lib/core-client/dist/esm/globals/polyfills.js", "ROOT/lib/core-client/dist/esm/manager/index.js", "ROOT/addons/docs/dist/esm/register", - "ROOT/addons/controls/dist/esm/register.js", - "ROOT/addons/actions/dist/esm/register.js", - "ROOT/addons/backgrounds/dist/esm/register.js", - "ROOT/addons/toolbars/dist/esm/register.js", - "ROOT/addons/measure/dist/esm/register.js", - "ROOT/addons/outline/dist/esm/register.js", + "ROOT/addons/controls/dist/esm/manager.js", + "ROOT/addons/actions/dist/esm/manager.js", + "ROOT/addons/backgrounds/dist/esm/manager.js", + "ROOT/addons/toolbars/dist/esm/manager.js", + "ROOT/addons/measure/dist/esm/manager.js", + "ROOT/addons/outline/dist/esm/manager.js", ], "keys": Array [ "name", diff --git a/lib/core-server/src/__snapshots__/html-kitchen-sink_manager-dev-posix b/lib/core-server/src/__snapshots__/html-kitchen-sink_manager-dev-posix index b0b601e85c6..46efbf91304 100644 --- a/lib/core-server/src/__snapshots__/html-kitchen-sink_manager-dev-posix +++ b/lib/core-server/src/__snapshots__/html-kitchen-sink_manager-dev-posix @@ -6,14 +6,14 @@ Object { "ROOT/lib/core-client/dist/esm/globals/polyfills.js", "ROOT/lib/core-client/dist/esm/manager/index.js", "ROOT/addons/docs/dist/esm/register", - "ROOT/addons/a11y/dist/esm/register.js", - "ROOT/addons/actions/dist/esm/register.js", - "ROOT/addons/backgrounds/dist/esm/register.js", - "ROOT/addons/controls/dist/esm/register.js", + "ROOT/addons/a11y/dist/esm/manager.js", + "ROOT/addons/actions/dist/esm/manager.js", + "ROOT/addons/backgrounds/dist/esm/manager.js", + "ROOT/addons/controls/dist/esm/manager.js", "ROOT/addons/jest/register.js", - "ROOT/addons/links/dist/esm/register.js", - "ROOT/addons/storysource/dist/esm/register.js", - "ROOT/addons/viewport/dist/esm/register.js", + "ROOT/addons/links/dist/esm/manager.js", + "ROOT/addons/storysource/dist/esm/manager.js", + "ROOT/addons/viewport/dist/esm/manager.js", ], "keys": Array [ "name", diff --git a/lib/core-server/src/__snapshots__/html-kitchen-sink_manager-prod-posix b/lib/core-server/src/__snapshots__/html-kitchen-sink_manager-prod-posix index 6b9d055e21b..332adc93069 100644 --- a/lib/core-server/src/__snapshots__/html-kitchen-sink_manager-prod-posix +++ b/lib/core-server/src/__snapshots__/html-kitchen-sink_manager-prod-posix @@ -6,14 +6,14 @@ Object { "ROOT/lib/core-client/dist/esm/globals/polyfills.js", "ROOT/lib/core-client/dist/esm/manager/index.js", "ROOT/addons/docs/dist/esm/register", - "ROOT/addons/a11y/dist/esm/register.js", - "ROOT/addons/actions/dist/esm/register.js", - "ROOT/addons/backgrounds/dist/esm/register.js", - "ROOT/addons/controls/dist/esm/register.js", + "ROOT/addons/a11y/dist/esm/manager.js", + "ROOT/addons/actions/dist/esm/manager.js", + "ROOT/addons/backgrounds/dist/esm/manager.js", + "ROOT/addons/controls/dist/esm/manager.js", "ROOT/addons/jest/register.js", - "ROOT/addons/links/dist/esm/register.js", - "ROOT/addons/storysource/dist/esm/register.js", - "ROOT/addons/viewport/dist/esm/register.js", + "ROOT/addons/links/dist/esm/manager.js", + "ROOT/addons/storysource/dist/esm/manager.js", + "ROOT/addons/viewport/dist/esm/manager.js", ], "keys": Array [ "name", diff --git a/lib/core-server/src/__snapshots__/vue-3-cli_manager-dev-posix b/lib/core-server/src/__snapshots__/vue-3-cli_manager-dev-posix index 891dad8796c..66424706468 100644 --- a/lib/core-server/src/__snapshots__/vue-3-cli_manager-dev-posix +++ b/lib/core-server/src/__snapshots__/vue-3-cli_manager-dev-posix @@ -5,16 +5,16 @@ Object { "entry": Array [ "ROOT/lib/core-client/dist/esm/globals/polyfills.js", "ROOT/lib/core-client/dist/esm/manager/index.js", - "ROOT/addons/links/dist/esm/register.js", + "ROOT/addons/links/dist/esm/manager.js", "ROOT/addons/docs/dist/esm/register", - "ROOT/addons/controls/dist/esm/register.js", - "ROOT/addons/actions/dist/esm/register.js", - "ROOT/addons/backgrounds/dist/esm/register.js", - "ROOT/addons/viewport/dist/esm/register.js", - "ROOT/addons/toolbars/dist/esm/register.js", - "ROOT/addons/measure/dist/esm/register.js", - "ROOT/addons/outline/dist/esm/register.js", - "ROOT/addons/interactions/dist/esm/register.js", + "ROOT/addons/controls/dist/esm/manager.js", + "ROOT/addons/actions/dist/esm/manager.js", + "ROOT/addons/backgrounds/dist/esm/manager.js", + "ROOT/addons/viewport/dist/esm/manager.js", + "ROOT/addons/toolbars/dist/esm/manager.js", + "ROOT/addons/measure/dist/esm/manager.js", + "ROOT/addons/outline/dist/esm/manager.js", + "ROOT/addons/interactions/dist/esm/manager.js", ], "keys": Array [ "name", diff --git a/lib/core-server/src/__snapshots__/vue-3-cli_manager-prod-posix b/lib/core-server/src/__snapshots__/vue-3-cli_manager-prod-posix index 99eb742814c..a4ab1bdd774 100644 --- a/lib/core-server/src/__snapshots__/vue-3-cli_manager-prod-posix +++ b/lib/core-server/src/__snapshots__/vue-3-cli_manager-prod-posix @@ -5,16 +5,16 @@ Object { "entry": Array [ "ROOT/lib/core-client/dist/esm/globals/polyfills.js", "ROOT/lib/core-client/dist/esm/manager/index.js", - "ROOT/addons/links/dist/esm/register.js", + "ROOT/addons/links/dist/esm/manager.js", "ROOT/addons/docs/dist/esm/register", - "ROOT/addons/controls/dist/esm/register.js", - "ROOT/addons/actions/dist/esm/register.js", - "ROOT/addons/backgrounds/dist/esm/register.js", - "ROOT/addons/viewport/dist/esm/register.js", - "ROOT/addons/toolbars/dist/esm/register.js", - "ROOT/addons/measure/dist/esm/register.js", - "ROOT/addons/outline/dist/esm/register.js", - "ROOT/addons/interactions/dist/esm/register.js", + "ROOT/addons/controls/dist/esm/manager.js", + "ROOT/addons/actions/dist/esm/manager.js", + "ROOT/addons/backgrounds/dist/esm/manager.js", + "ROOT/addons/viewport/dist/esm/manager.js", + "ROOT/addons/toolbars/dist/esm/manager.js", + "ROOT/addons/measure/dist/esm/manager.js", + "ROOT/addons/outline/dist/esm/manager.js", + "ROOT/addons/interactions/dist/esm/manager.js", ], "keys": Array [ "name", diff --git a/lib/core-server/src/__snapshots__/web-components-kitchen-sink_manager-dev-posix b/lib/core-server/src/__snapshots__/web-components-kitchen-sink_manager-dev-posix index 1c0d32d308b..aed6bee6237 100644 --- a/lib/core-server/src/__snapshots__/web-components-kitchen-sink_manager-dev-posix +++ b/lib/core-server/src/__snapshots__/web-components-kitchen-sink_manager-dev-posix @@ -6,15 +6,15 @@ Object { "ROOT/lib/core-client/dist/esm/globals/polyfills.js", "ROOT/lib/core-client/dist/esm/manager/index.js", "ROOT/addons/docs/dist/esm/register", - "ROOT/addons/controls/dist/esm/register.js", - "ROOT/addons/a11y/dist/esm/register.js", - "ROOT/addons/actions/dist/esm/register.js", - "ROOT/addons/backgrounds/dist/esm/register.js", - "ROOT/addons/interactions/dist/esm/register.js", - "ROOT/addons/links/dist/esm/register.js", - "ROOT/addons/storysource/dist/esm/register.js", - "ROOT/addons/viewport/dist/esm/register.js", - "ROOT/addons/toolbars/dist/esm/register.js", + "ROOT/addons/controls/dist/esm/manager.js", + "ROOT/addons/a11y/dist/esm/manager.js", + "ROOT/addons/actions/dist/esm/manager.js", + "ROOT/addons/backgrounds/dist/esm/manager.js", + "ROOT/addons/interactions/dist/esm/manager.js", + "ROOT/addons/links/dist/esm/manager.js", + "ROOT/addons/storysource/dist/esm/manager.js", + "ROOT/addons/viewport/dist/esm/manager.js", + "ROOT/addons/toolbars/dist/esm/manager.js", ], "keys": Array [ "name", diff --git a/lib/core-server/src/__snapshots__/web-components-kitchen-sink_manager-prod-posix b/lib/core-server/src/__snapshots__/web-components-kitchen-sink_manager-prod-posix index c090d10a586..74f36faf447 100644 --- a/lib/core-server/src/__snapshots__/web-components-kitchen-sink_manager-prod-posix +++ b/lib/core-server/src/__snapshots__/web-components-kitchen-sink_manager-prod-posix @@ -6,15 +6,15 @@ Object { "ROOT/lib/core-client/dist/esm/globals/polyfills.js", "ROOT/lib/core-client/dist/esm/manager/index.js", "ROOT/addons/docs/dist/esm/register", - "ROOT/addons/controls/dist/esm/register.js", - "ROOT/addons/a11y/dist/esm/register.js", - "ROOT/addons/actions/dist/esm/register.js", - "ROOT/addons/backgrounds/dist/esm/register.js", - "ROOT/addons/interactions/dist/esm/register.js", - "ROOT/addons/links/dist/esm/register.js", - "ROOT/addons/storysource/dist/esm/register.js", - "ROOT/addons/viewport/dist/esm/register.js", - "ROOT/addons/toolbars/dist/esm/register.js", + "ROOT/addons/controls/dist/esm/manager.js", + "ROOT/addons/a11y/dist/esm/manager.js", + "ROOT/addons/actions/dist/esm/manager.js", + "ROOT/addons/backgrounds/dist/esm/manager.js", + "ROOT/addons/interactions/dist/esm/manager.js", + "ROOT/addons/links/dist/esm/manager.js", + "ROOT/addons/storysource/dist/esm/manager.js", + "ROOT/addons/viewport/dist/esm/manager.js", + "ROOT/addons/toolbars/dist/esm/manager.js", ], "keys": Array [ "name", From f5e848353644193d5a4b63e3e1fd1e41d269d2a7 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Fri, 18 Mar 2022 11:47:37 +0100 Subject: [PATCH 020/171] change the presets resolutions so we can have preview & manager files separately replacing a single preset file. --- .../src/preview/iframe-webpack.config.ts | 1 + .../src/preview/iframe-webpack.config.ts | 1 + lib/core-common/src/presets.ts | 54 +++++++++++-------- 3 files changed, 34 insertions(+), 22 deletions(-) diff --git a/lib/builder-webpack4/src/preview/iframe-webpack.config.ts b/lib/builder-webpack4/src/preview/iframe-webpack.config.ts index 66c2fbee4de..6d14bafafa3 100644 --- a/lib/builder-webpack4/src/preview/iframe-webpack.config.ts +++ b/lib/builder-webpack4/src/preview/iframe-webpack.config.ts @@ -81,6 +81,7 @@ export default async (options: Options & Record): Promise): Promise { + try { + return resolveFrom(path, file); + } catch (e) { + return false; + } +}; + function resolvePresetFunction( input: T[] | Function, presetOptions: any, @@ -70,12 +78,17 @@ export const resolveAddonName = (configDir: string, name: string) => { // when user provides full path, we don't need to do anything if (path) { + // Accept `manager`, `manager.js`, `register`, `register.js`, `require.resolve('foo/manager'), `register-panel` + if (path.match(/(manager|register(-panel)?)(\.(js|ts|tsx|jsx))?$/)) { + return { + name: path, + managerEntries: [path], + type: 'virtual', + }; + } return { name: path, - // Accept `manager`, `register`, `register.js`, `require.resolve('foo/manager'), `register-panel` - type: path.match(/(manager|register(-panel)?)(\.(js|ts|tsx|jsx))?$/) - ? 'managerEntries' - : 'presets', + type: 'presets', }; } @@ -87,21 +100,17 @@ export const resolveAddonName = (configDir: string, name: string) => { // eslint-disable-next-line no-empty } catch (err) {} - try { + const managerEntry = + safeResolveFrom(configDir, `${name}/manager`) || safeResolveFrom(configDir, `${name}/register`); + const previewAnnotation = safeResolveFrom(configDir, `${name}/preview`); + if (managerEntry || previewAnnotation) { return { - name: resolveFrom(configDir, `${name}/manager`), - type: 'managerEntries', + name: `${name}_virtual`, + managerEntries: [managerEntry], + previewAnnotations: [previewAnnotation], + type: 'virtual', }; - // eslint-disable-next-line no-empty - } catch (err) {} - - try { - return { - name: resolveFrom(configDir, `${name}/register`), - type: 'managerEntries', - }; - // eslint-disable-next-line no-empty - } catch (err) {} + } return { name: resolveFrom(configDir, name), @@ -117,12 +126,13 @@ const map = const { name } = resolveAddonName(configDir, item.name); return { ...item, name }; } - const { name, type } = resolveAddonName(configDir, item); - if (type === 'managerEntries') { + const { name, managerEntries, previewAnnotations, type } = resolveAddonName(configDir, item); + if (type === 'virtual') { return { - name: `${name}_additionalManagerEntries`, + name, type, - managerEntries: [name], + ...(managerEntries ? { managerEntries } : {}), + ...(previewAnnotations ? { previewAnnotations } : {}), }; } return resolveAddonName(configDir, name); @@ -145,7 +155,7 @@ function interopRequireDefault(filePath: string) { } function getContent(input: any) { - if (input.type === 'managerEntries') { + if (input.type === 'virtual') { const { type, name, ...rest } = input; return rest; } From 7300670586ea57c674ef24e9aa5292e9b180f74f Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Fri, 18 Mar 2022 12:07:15 +0100 Subject: [PATCH 021/171] change background to use new structure --- addons/backgrounds/manager.js | 1 + addons/backgrounds/preset.js | 16 ---------------- addons/backgrounds/preview.js | 1 + addons/backgrounds/register.js | 3 ++- addons/backgrounds/src/decorators/index.ts | 2 -- addons/backgrounds/src/preset/addDecorator.tsx | 3 --- .../src/{preset/addParameter.tsx => preview.tsx} | 4 ++++ 7 files changed, 8 insertions(+), 22 deletions(-) create mode 100644 addons/backgrounds/manager.js delete mode 100644 addons/backgrounds/preset.js create mode 100644 addons/backgrounds/preview.js delete mode 100644 addons/backgrounds/src/decorators/index.ts delete mode 100644 addons/backgrounds/src/preset/addDecorator.tsx rename addons/backgrounds/src/{preset/addParameter.tsx => preview.tsx} (58%) diff --git a/addons/backgrounds/manager.js b/addons/backgrounds/manager.js new file mode 100644 index 00000000000..1c43441b3bf --- /dev/null +++ b/addons/backgrounds/manager.js @@ -0,0 +1 @@ +module.exports = require('./dist/esm/manager'); diff --git a/addons/backgrounds/preset.js b/addons/backgrounds/preset.js deleted file mode 100644 index 7a0ed685b00..00000000000 --- a/addons/backgrounds/preset.js +++ /dev/null @@ -1,16 +0,0 @@ -function config(entry = []) { - return [ - ...entry, - require.resolve('./dist/esm/preset/addDecorator'), - require.resolve('./dist/esm/preset/addParameter'), - ]; -} - -function managerEntries(entry = [], options) { - return [...entry, require.resolve('./dist/esm/manager')]; -} - -module.exports = { - managerEntries, - config, -}; diff --git a/addons/backgrounds/preview.js b/addons/backgrounds/preview.js new file mode 100644 index 00000000000..354c508e47f --- /dev/null +++ b/addons/backgrounds/preview.js @@ -0,0 +1 @@ +module.exports = require('./dist/esm/preview'); diff --git a/addons/backgrounds/register.js b/addons/backgrounds/register.js index 81964d78c60..40e25f84327 100644 --- a/addons/backgrounds/register.js +++ b/addons/backgrounds/register.js @@ -1 +1,2 @@ -require('./dist/esm/manager'); +// TODO add deprecation warning +module.exports = require('./preview'); diff --git a/addons/backgrounds/src/decorators/index.ts b/addons/backgrounds/src/decorators/index.ts deleted file mode 100644 index cf4a2889047..00000000000 --- a/addons/backgrounds/src/decorators/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export * from './withBackground'; -export * from './withGrid'; diff --git a/addons/backgrounds/src/preset/addDecorator.tsx b/addons/backgrounds/src/preset/addDecorator.tsx deleted file mode 100644 index 93ccff63233..00000000000 --- a/addons/backgrounds/src/preset/addDecorator.tsx +++ /dev/null @@ -1,3 +0,0 @@ -import { withGrid, withBackground } from '../decorators'; - -export const decorators = [withGrid, withBackground]; diff --git a/addons/backgrounds/src/preset/addParameter.tsx b/addons/backgrounds/src/preview.tsx similarity index 58% rename from addons/backgrounds/src/preset/addParameter.tsx rename to addons/backgrounds/src/preview.tsx index ceb1d3b4120..cc67d00f631 100644 --- a/addons/backgrounds/src/preset/addParameter.tsx +++ b/addons/backgrounds/src/preview.tsx @@ -1,3 +1,7 @@ +import { withBackground } from './decorators/withBackground'; +import { withGrid } from './decorators/withGrid'; + +export const decorators = [withGrid, withBackground]; export const parameters = { backgrounds: { grid: { From ec8796703953afe5584a02ac802cdb3b3d3e1211 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Fri, 18 Mar 2022 12:17:57 +0100 Subject: [PATCH 022/171] add deprecation message to register file in addon-docs --- addons/backgrounds/register.js | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/addons/backgrounds/register.js b/addons/backgrounds/register.js index 40e25f84327..9f9432e18ea 100644 --- a/addons/backgrounds/register.js +++ b/addons/backgrounds/register.js @@ -1,2 +1,5 @@ -// TODO add deprecation warning -module.exports = require('./preview'); +require('@storybook/client-logger').once.warn( + 'register.js is deprecated see https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated-registerjs' +); + +module.exports = require('./manager'); From 2288a263020bcee60cd75ca470635b15cb69ecdb Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Fri, 18 Mar 2022 12:25:58 +0100 Subject: [PATCH 023/171] change a11y to new structure --- addons/a11y/manager.js | 1 + addons/a11y/preset.js | 13 ------------- addons/a11y/preview.js | 1 + addons/a11y/register.js | 6 +++++- addons/a11y/src/addDecorator.ts | 3 --- addons/a11y/src/preview.tsx | 2 ++ 6 files changed, 9 insertions(+), 17 deletions(-) create mode 100644 addons/a11y/manager.js delete mode 100644 addons/a11y/preset.js create mode 100644 addons/a11y/preview.js delete mode 100644 addons/a11y/src/addDecorator.ts create mode 100644 addons/a11y/src/preview.tsx diff --git a/addons/a11y/manager.js b/addons/a11y/manager.js new file mode 100644 index 00000000000..1c43441b3bf --- /dev/null +++ b/addons/a11y/manager.js @@ -0,0 +1 @@ +module.exports = require('./dist/esm/manager'); diff --git a/addons/a11y/preset.js b/addons/a11y/preset.js deleted file mode 100644 index 8dbfe7a6083..00000000000 --- a/addons/a11y/preset.js +++ /dev/null @@ -1,13 +0,0 @@ -function managerEntries(entry = []) { - return [...entry, require.resolve('./dist/esm/manager')]; -} - -function config(entry = []) { - return [ - ...entry, - require.resolve('./dist/esm/a11yRunner'), - require.resolve('./dist/esm/a11yHighlight'), - ]; -} - -module.exports = { managerEntries, config }; diff --git a/addons/a11y/preview.js b/addons/a11y/preview.js new file mode 100644 index 00000000000..354c508e47f --- /dev/null +++ b/addons/a11y/preview.js @@ -0,0 +1 @@ +module.exports = require('./dist/esm/preview'); diff --git a/addons/a11y/register.js b/addons/a11y/register.js index 81964d78c60..d6603f7c512 100755 --- a/addons/a11y/register.js +++ b/addons/a11y/register.js @@ -1 +1,5 @@ -require('./dist/esm/manager'); +require('@storybook/client-logger').once.warn( + 'register.js is deprecated see https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated-registerjs' +); + +require('./manager'); diff --git a/addons/a11y/src/addDecorator.ts b/addons/a11y/src/addDecorator.ts deleted file mode 100644 index 95dc140b157..00000000000 --- a/addons/a11y/src/addDecorator.ts +++ /dev/null @@ -1,3 +0,0 @@ -import { withA11y } from '.'; - -export const decorators = [withA11y]; diff --git a/addons/a11y/src/preview.tsx b/addons/a11y/src/preview.tsx new file mode 100644 index 00000000000..146feb51f50 --- /dev/null +++ b/addons/a11y/src/preview.tsx @@ -0,0 +1,2 @@ +import './a11yRunner'; +import './a11yHighlight'; From fd79ffb447f00044aa96d95a65b162668175d53d Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Fri, 18 Mar 2022 12:30:24 +0100 Subject: [PATCH 024/171] change addon-actions to new structure --- addons/actions/manager.js | 1 + addons/actions/package.json | 1 + addons/actions/preset.js | 16 ---------------- addons/actions/preview.js | 1 + addons/actions/register.js | 6 +++++- addons/actions/src/preset/preview.tsx | 2 ++ 6 files changed, 10 insertions(+), 17 deletions(-) create mode 100644 addons/actions/manager.js delete mode 100644 addons/actions/preset.js create mode 100644 addons/actions/preview.js create mode 100644 addons/actions/src/preset/preview.tsx diff --git a/addons/actions/manager.js b/addons/actions/manager.js new file mode 100644 index 00000000000..1c43441b3bf --- /dev/null +++ b/addons/actions/manager.js @@ -0,0 +1 @@ +module.exports = require('./dist/esm/manager'); diff --git a/addons/actions/package.json b/addons/actions/package.json index 6730a483519..5934f9dbf81 100644 --- a/addons/actions/package.json +++ b/addons/actions/package.json @@ -43,6 +43,7 @@ "dependencies": { "@storybook/addons": "6.5.0-alpha.49", "@storybook/api": "6.5.0-alpha.49", + "@storybook/client-logger": "6.5.0-alpha.49", "@storybook/components": "6.5.0-alpha.49", "@storybook/core-events": "6.5.0-alpha.49", "@storybook/csf": "0.0.2--canary.87bc651.0", diff --git a/addons/actions/preset.js b/addons/actions/preset.js deleted file mode 100644 index 2047730404c..00000000000 --- a/addons/actions/preset.js +++ /dev/null @@ -1,16 +0,0 @@ -function managerEntries(entry, options) { - return [...entry, require.resolve('./dist/esm/manager')]; -} - -function config(entry = [], { addDecorator = true } = {}) { - const actionConfig = []; - if (addDecorator) { - actionConfig.push(require.resolve('./dist/esm/preset/addDecorator')); - } - return [...entry, ...actionConfig, require.resolve('./dist/esm/preset/addArgs')]; -} - -module.exports = { - managerEntries, - config, -}; diff --git a/addons/actions/preview.js b/addons/actions/preview.js new file mode 100644 index 00000000000..8f96dc01761 --- /dev/null +++ b/addons/actions/preview.js @@ -0,0 +1 @@ +module.exports = require('./dist/esm/preset/preview'); diff --git a/addons/actions/register.js b/addons/actions/register.js index 81964d78c60..d6603f7c512 100644 --- a/addons/actions/register.js +++ b/addons/actions/register.js @@ -1 +1,5 @@ -require('./dist/esm/manager'); +require('@storybook/client-logger').once.warn( + 'register.js is deprecated see https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated-registerjs' +); + +require('./manager'); diff --git a/addons/actions/src/preset/preview.tsx b/addons/actions/src/preset/preview.tsx new file mode 100644 index 00000000000..117c34f7196 --- /dev/null +++ b/addons/actions/src/preset/preview.tsx @@ -0,0 +1,2 @@ +export * from './addDecorator'; +export * from './addArgs'; From ec120addb03d35ce3019bdaaa50ec083a21a7765 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Fri, 18 Mar 2022 12:31:28 +0100 Subject: [PATCH 025/171] change addon-controls to new structure --- addons/controls/preset.js | 8 -------- addons/controls/register.js | 7 +++++-- 2 files changed, 5 insertions(+), 10 deletions(-) delete mode 100644 addons/controls/preset.js diff --git a/addons/controls/preset.js b/addons/controls/preset.js deleted file mode 100644 index e4d018037bb..00000000000 --- a/addons/controls/preset.js +++ /dev/null @@ -1,8 +0,0 @@ -function managerEntries(entry = [], options) { - // eslint-disable-next-line global-require - const { checkDocsLoaded } = require('./dist/cjs/preset/checkDocsLoaded'); - checkDocsLoaded(options.configDir); - return [...entry, require.resolve('./dist/esm/manager')]; -} - -module.exports = { managerEntries }; diff --git a/addons/controls/register.js b/addons/controls/register.js index e6fe91b6dd6..d6603f7c512 100644 --- a/addons/controls/register.js +++ b/addons/controls/register.js @@ -1,2 +1,5 @@ -// @deprecated - please remove in 7.0 -import './dist/esm/manager'; +require('@storybook/client-logger').once.warn( + 'register.js is deprecated see https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated-registerjs' +); + +require('./manager'); From abf1b0bd8dc6f9dd1f622284133c0f7e285ee364 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Fri, 18 Mar 2022 13:08:19 +0100 Subject: [PATCH 026/171] change addon-viewport to new structure --- addons/viewport/manager.js | 1 + addons/viewport/preset.js | 5 ----- addons/viewport/register.js | 6 +++++- 3 files changed, 6 insertions(+), 6 deletions(-) create mode 100644 addons/viewport/manager.js delete mode 100644 addons/viewport/preset.js diff --git a/addons/viewport/manager.js b/addons/viewport/manager.js new file mode 100644 index 00000000000..1c43441b3bf --- /dev/null +++ b/addons/viewport/manager.js @@ -0,0 +1 @@ +module.exports = require('./dist/esm/manager'); diff --git a/addons/viewport/preset.js b/addons/viewport/preset.js deleted file mode 100644 index 90d004664d1..00000000000 --- a/addons/viewport/preset.js +++ /dev/null @@ -1,5 +0,0 @@ -function managerEntries(entry = []) { - return [...entry, require.resolve('./dist/esm/manager')]; -} - -module.exports = { managerEntries }; diff --git a/addons/viewport/register.js b/addons/viewport/register.js index 81964d78c60..d6603f7c512 100644 --- a/addons/viewport/register.js +++ b/addons/viewport/register.js @@ -1 +1,5 @@ -require('./dist/esm/manager'); +require('@storybook/client-logger').once.warn( + 'register.js is deprecated see https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated-registerjs' +); + +require('./manager'); From 5c1ffe79b0ae638934e4694345164faa34688c40 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Fri, 18 Mar 2022 13:08:42 +0100 Subject: [PATCH 027/171] remove unused file --- addons/viewport/src/preview.ts | 1 - 1 file changed, 1 deletion(-) delete mode 100644 addons/viewport/src/preview.ts diff --git a/addons/viewport/src/preview.ts b/addons/viewport/src/preview.ts deleted file mode 100644 index 05f32144967..00000000000 --- a/addons/viewport/src/preview.ts +++ /dev/null @@ -1 +0,0 @@ -export { INITIAL_VIEWPORTS, DEFAULT_VIEWPORT, MINIMAL_VIEWPORTS } from './defaults'; From f1220de0be905efacadfc9d500ad17fd4dc87a1a Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Fri, 18 Mar 2022 13:11:46 +0100 Subject: [PATCH 028/171] change addon-jest to new structure --- addons/jest/manager.js | 1 + addons/jest/package.json | 1 + addons/jest/register.js | 6 +++++- 3 files changed, 7 insertions(+), 1 deletion(-) create mode 100644 addons/jest/manager.js diff --git a/addons/jest/manager.js b/addons/jest/manager.js new file mode 100644 index 00000000000..1c43441b3bf --- /dev/null +++ b/addons/jest/manager.js @@ -0,0 +1 @@ +module.exports = require('./dist/esm/manager'); diff --git a/addons/jest/package.json b/addons/jest/package.json index 4ecc3a4e189..623c1707bae 100644 --- a/addons/jest/package.json +++ b/addons/jest/package.json @@ -49,6 +49,7 @@ "dependencies": { "@storybook/addons": "6.5.0-alpha.49", "@storybook/api": "6.5.0-alpha.49", + "@storybook/client-logger": "6.5.0-alpha.49", "@storybook/components": "6.5.0-alpha.49", "@storybook/core-events": "6.5.0-alpha.49", "@storybook/theming": "6.5.0-alpha.49", diff --git a/addons/jest/register.js b/addons/jest/register.js index 81964d78c60..d6603f7c512 100644 --- a/addons/jest/register.js +++ b/addons/jest/register.js @@ -1 +1,5 @@ -require('./dist/esm/manager'); +require('@storybook/client-logger').once.warn( + 'register.js is deprecated see https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated-registerjs' +); + +require('./manager'); From 0953a47d5bed243f1c7bc9b306678e9bbbb750ed Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Fri, 18 Mar 2022 13:15:22 +0100 Subject: [PATCH 029/171] change addon-toolbars to new structure --- addons/toolbars/manager.js | 1 + addons/toolbars/package.json | 1 + addons/toolbars/preset.js | 5 ----- addons/toolbars/register.js | 6 +++++- 4 files changed, 7 insertions(+), 6 deletions(-) create mode 100644 addons/toolbars/manager.js delete mode 100644 addons/toolbars/preset.js diff --git a/addons/toolbars/manager.js b/addons/toolbars/manager.js new file mode 100644 index 00000000000..1c43441b3bf --- /dev/null +++ b/addons/toolbars/manager.js @@ -0,0 +1 @@ +module.exports = require('./dist/esm/manager'); diff --git a/addons/toolbars/package.json b/addons/toolbars/package.json index 5445bbe01b3..6614f462aa8 100644 --- a/addons/toolbars/package.json +++ b/addons/toolbars/package.json @@ -47,6 +47,7 @@ "dependencies": { "@storybook/addons": "6.5.0-alpha.49", "@storybook/api": "6.5.0-alpha.49", + "@storybook/client-logger": "6.5.0-alpha.49", "@storybook/components": "6.5.0-alpha.49", "@storybook/theming": "6.5.0-alpha.49", "core-js": "^3.8.2", diff --git a/addons/toolbars/preset.js b/addons/toolbars/preset.js deleted file mode 100644 index 90d004664d1..00000000000 --- a/addons/toolbars/preset.js +++ /dev/null @@ -1,5 +0,0 @@ -function managerEntries(entry = []) { - return [...entry, require.resolve('./dist/esm/manager')]; -} - -module.exports = { managerEntries }; diff --git a/addons/toolbars/register.js b/addons/toolbars/register.js index 4e287d25b15..d6603f7c512 100644 --- a/addons/toolbars/register.js +++ b/addons/toolbars/register.js @@ -1 +1,5 @@ -import './dist/esm/manager'; +require('@storybook/client-logger').once.warn( + 'register.js is deprecated see https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated-registerjs' +); + +require('./manager'); From 3de6aa7d824131ed27716decbad1245335e71424 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Fri, 18 Mar 2022 13:24:52 +0100 Subject: [PATCH 030/171] change addon-outline to new structure --- addons/outline/manager.js | 1 + addons/outline/preset.js | 12 ------------ addons/outline/preview.js | 1 + addons/outline/register.js | 6 +++++- .../src/preset/{addDecorator.tsx => preview.tsx} | 0 5 files changed, 7 insertions(+), 13 deletions(-) create mode 100644 addons/outline/manager.js delete mode 100644 addons/outline/preset.js create mode 100644 addons/outline/preview.js rename addons/outline/src/preset/{addDecorator.tsx => preview.tsx} (100%) diff --git a/addons/outline/manager.js b/addons/outline/manager.js new file mode 100644 index 00000000000..1c43441b3bf --- /dev/null +++ b/addons/outline/manager.js @@ -0,0 +1 @@ +module.exports = require('./dist/esm/manager'); diff --git a/addons/outline/preset.js b/addons/outline/preset.js deleted file mode 100644 index eb939722176..00000000000 --- a/addons/outline/preset.js +++ /dev/null @@ -1,12 +0,0 @@ -function config(entry = []) { - return [...entry, require.resolve('./dist/esm/preset/addDecorator')]; -} - -function managerEntries(entry = [], options) { - return [...entry, require.resolve('./dist/esm/manager')]; -} - -module.exports = { - managerEntries, - config, -}; diff --git a/addons/outline/preview.js b/addons/outline/preview.js new file mode 100644 index 00000000000..8f96dc01761 --- /dev/null +++ b/addons/outline/preview.js @@ -0,0 +1 @@ +module.exports = require('./dist/esm/preset/preview'); diff --git a/addons/outline/register.js b/addons/outline/register.js index 81964d78c60..d6603f7c512 100644 --- a/addons/outline/register.js +++ b/addons/outline/register.js @@ -1 +1,5 @@ -require('./dist/esm/manager'); +require('@storybook/client-logger').once.warn( + 'register.js is deprecated see https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated-registerjs' +); + +require('./manager'); diff --git a/addons/outline/src/preset/addDecorator.tsx b/addons/outline/src/preset/preview.tsx similarity index 100% rename from addons/outline/src/preset/addDecorator.tsx rename to addons/outline/src/preset/preview.tsx From 2cbae9aa3963f885d42cb811ae320b009b1853e4 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Fri, 18 Mar 2022 13:32:57 +0100 Subject: [PATCH 031/171] change addon-links to new structure --- addons/links/manager.js | 1 + addons/links/preset.js | 13 --- addons/links/preview.js | 1 + addons/links/register.js | 6 +- addons/links/src/index.ts | 2 +- addons/links/src/preset/addDecorator.ts | 3 - addons/links/src/preview.ts | 92 +------------------ addons/links/src/react/components/link.tsx | 2 +- .../src/{preview.test.ts => utils.test.ts} | 2 +- addons/links/src/utils.ts | 91 ++++++++++++++++++ 10 files changed, 103 insertions(+), 110 deletions(-) create mode 100644 addons/links/manager.js delete mode 100644 addons/links/preset.js create mode 100644 addons/links/preview.js delete mode 100644 addons/links/src/preset/addDecorator.ts rename addons/links/src/{preview.test.ts => utils.test.ts} (97%) create mode 100644 addons/links/src/utils.ts diff --git a/addons/links/manager.js b/addons/links/manager.js new file mode 100644 index 00000000000..1c43441b3bf --- /dev/null +++ b/addons/links/manager.js @@ -0,0 +1 @@ +module.exports = require('./dist/esm/manager'); diff --git a/addons/links/preset.js b/addons/links/preset.js deleted file mode 100644 index 3a98a99189c..00000000000 --- a/addons/links/preset.js +++ /dev/null @@ -1,13 +0,0 @@ -function managerEntries(entry = []) { - return [...entry, require.resolve('./dist/esm/manager')]; -} - -function config(entry = [], { addDecorator = true } = {}) { - const linkConfig = []; - if (addDecorator) { - linkConfig.push(require.resolve('./dist/esm/preset/addDecorator')); - } - return [...entry, ...linkConfig]; -} - -module.exports = { managerEntries, config }; diff --git a/addons/links/preview.js b/addons/links/preview.js new file mode 100644 index 00000000000..354c508e47f --- /dev/null +++ b/addons/links/preview.js @@ -0,0 +1 @@ +module.exports = require('./dist/esm/preview'); diff --git a/addons/links/register.js b/addons/links/register.js index 81964d78c60..d6603f7c512 100644 --- a/addons/links/register.js +++ b/addons/links/register.js @@ -1 +1,5 @@ -require('./dist/esm/manager'); +require('@storybook/client-logger').once.warn( + 'register.js is deprecated see https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated-registerjs' +); + +require('./manager'); diff --git a/addons/links/src/index.ts b/addons/links/src/index.ts index 239fae7ba1a..a41227513de 100644 --- a/addons/links/src/index.ts +++ b/addons/links/src/index.ts @@ -14,7 +14,7 @@ export function LinkTo(): null { return null; } -export { linkTo, hrefTo, withLinks, navigate } from './preview'; +export { linkTo, hrefTo, withLinks, navigate } from './utils'; if (module && module.hot && module.hot.decline) { module.hot.decline(); diff --git a/addons/links/src/preset/addDecorator.ts b/addons/links/src/preset/addDecorator.ts deleted file mode 100644 index ff68743b1a3..00000000000 --- a/addons/links/src/preset/addDecorator.ts +++ /dev/null @@ -1,3 +0,0 @@ -import { withLinks } from '../index'; - -export const decorators = [withLinks]; diff --git a/addons/links/src/preview.ts b/addons/links/src/preview.ts index 3082bedc09b..1527786e81a 100644 --- a/addons/links/src/preview.ts +++ b/addons/links/src/preview.ts @@ -1,91 +1,3 @@ -import global from 'global'; -import qs from 'qs'; -import { addons, makeDecorator } from '@storybook/addons'; -import { STORY_CHANGED, SELECT_STORY } from '@storybook/core-events'; -import type { StoryId, StoryName, ComponentTitle } from '@storybook/csf'; -import { toId } from '@storybook/csf'; -import { PARAM_KEY } from './constants'; +import { withLinks } from './index'; -const { document, HTMLElement } = global; - -interface ParamsId { - storyId: StoryId; -} -interface ParamsCombo { - kind?: ComponentTitle; - story?: StoryName; -} - -export const navigate = (params: ParamsId | ParamsCombo) => - addons.getChannel().emit(SELECT_STORY, params); - -export const hrefTo = (title: ComponentTitle, name: StoryName): Promise => { - return new Promise((resolve) => { - const { location } = document; - const query = qs.parse(location.search, { ignoreQueryPrefix: true }); - const existingId = [].concat(query.id)[0]; - const titleToLink = title || existingId.split('--', 2)[0]; - const id = toId(titleToLink, name); - const url = `${location.origin + location.pathname}?${qs.stringify( - { ...query, id }, - { encode: false } - )}`; - - resolve(url); - }); -}; - -const valueOrCall = (args: string[]) => (value: string | ((...args: string[]) => string)) => - typeof value === 'function' ? value(...args) : value; - -export const linkTo = - (idOrTitle: string, nameInput?: string | ((...args: any[]) => string)) => - (...args: any[]) => { - const resolver = valueOrCall(args); - const title = resolver(idOrTitle); - const name = resolver(nameInput); - - if (title?.match(/--/) && !name) { - navigate({ storyId: title }); - } else { - navigate({ kind: title, story: name }); - } - }; - -const linksListener = (e: Event) => { - const { target } = e; - if (!(target instanceof HTMLElement)) { - return; - } - const element = target as HTMLElement; - const { sbKind: kind, sbStory: story } = element.dataset; - if (kind || story) { - e.preventDefault(); - navigate({ kind, story }); - } -}; - -let hasListener = false; - -const on = () => { - if (!hasListener) { - hasListener = true; - document.addEventListener('click', linksListener); - } -}; -const off = () => { - if (hasListener) { - hasListener = false; - document.removeEventListener('click', linksListener); - } -}; - -export const withLinks = makeDecorator({ - name: 'withLinks', - parameterName: PARAM_KEY, - wrapper: (getStory, context) => { - on(); - addons.getChannel().once(STORY_CHANGED, off); - return getStory(context); - }, -}); +export const decorators = [withLinks]; diff --git a/addons/links/src/react/components/link.tsx b/addons/links/src/react/components/link.tsx index fccca70d04a..aa6207eff75 100644 --- a/addons/links/src/react/components/link.tsx +++ b/addons/links/src/react/components/link.tsx @@ -1,6 +1,6 @@ import React, { MouseEvent, PureComponent, ReactNode } from 'react'; -import { navigate, hrefTo } from '../../preview'; +import { navigate, hrefTo } from '../../utils'; // FIXME: copied from Typography.Link. Code is duplicated to // avoid emotion dependency which breaks React 15.x back-compat diff --git a/addons/links/src/preview.test.ts b/addons/links/src/utils.test.ts similarity index 97% rename from addons/links/src/preview.test.ts rename to addons/links/src/utils.test.ts index f5dd3af355f..fb2126018bf 100644 --- a/addons/links/src/preview.test.ts +++ b/addons/links/src/utils.test.ts @@ -1,7 +1,7 @@ import { addons } from '@storybook/addons'; import { SELECT_STORY } from '@storybook/core-events'; -import { linkTo, hrefTo } from './preview'; +import { linkTo, hrefTo } from './utils'; jest.mock('@storybook/addons'); jest.mock('global', () => ({ diff --git a/addons/links/src/utils.ts b/addons/links/src/utils.ts new file mode 100644 index 00000000000..3082bedc09b --- /dev/null +++ b/addons/links/src/utils.ts @@ -0,0 +1,91 @@ +import global from 'global'; +import qs from 'qs'; +import { addons, makeDecorator } from '@storybook/addons'; +import { STORY_CHANGED, SELECT_STORY } from '@storybook/core-events'; +import type { StoryId, StoryName, ComponentTitle } from '@storybook/csf'; +import { toId } from '@storybook/csf'; +import { PARAM_KEY } from './constants'; + +const { document, HTMLElement } = global; + +interface ParamsId { + storyId: StoryId; +} +interface ParamsCombo { + kind?: ComponentTitle; + story?: StoryName; +} + +export const navigate = (params: ParamsId | ParamsCombo) => + addons.getChannel().emit(SELECT_STORY, params); + +export const hrefTo = (title: ComponentTitle, name: StoryName): Promise => { + return new Promise((resolve) => { + const { location } = document; + const query = qs.parse(location.search, { ignoreQueryPrefix: true }); + const existingId = [].concat(query.id)[0]; + const titleToLink = title || existingId.split('--', 2)[0]; + const id = toId(titleToLink, name); + const url = `${location.origin + location.pathname}?${qs.stringify( + { ...query, id }, + { encode: false } + )}`; + + resolve(url); + }); +}; + +const valueOrCall = (args: string[]) => (value: string | ((...args: string[]) => string)) => + typeof value === 'function' ? value(...args) : value; + +export const linkTo = + (idOrTitle: string, nameInput?: string | ((...args: any[]) => string)) => + (...args: any[]) => { + const resolver = valueOrCall(args); + const title = resolver(idOrTitle); + const name = resolver(nameInput); + + if (title?.match(/--/) && !name) { + navigate({ storyId: title }); + } else { + navigate({ kind: title, story: name }); + } + }; + +const linksListener = (e: Event) => { + const { target } = e; + if (!(target instanceof HTMLElement)) { + return; + } + const element = target as HTMLElement; + const { sbKind: kind, sbStory: story } = element.dataset; + if (kind || story) { + e.preventDefault(); + navigate({ kind, story }); + } +}; + +let hasListener = false; + +const on = () => { + if (!hasListener) { + hasListener = true; + document.addEventListener('click', linksListener); + } +}; +const off = () => { + if (hasListener) { + hasListener = false; + document.removeEventListener('click', linksListener); + } +}; + +export const withLinks = makeDecorator({ + name: 'withLinks', + parameterName: PARAM_KEY, + wrapper: (getStory, context) => { + on(); + addons.getChannel().once(STORY_CHANGED, off); + return getStory(context); + }, +}); From 61bcd00943651d200a2cbe0e1203a615f94c274f Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Fri, 18 Mar 2022 13:33:21 +0100 Subject: [PATCH 032/171] add migration info --- MIGRATION.md | 22 ++++++++++++++++++++++ 1 file changed, 22 insertions(+) diff --git a/MIGRATION.md b/MIGRATION.md index 6b8ea76261e..4711ad4486a 100644 --- a/MIGRATION.md +++ b/MIGRATION.md @@ -1,6 +1,8 @@

Migration

- [From version 6.4.x to 6.5.0](#from-version-64x-to-650) + - [Deprecated register.js](#deprecated-registerjs) + - [Dropped support for addon-actions addDecorators](#dropped-support-for-addon-actions-adddecorators) - [Docs framework refactor for React](#docs-framework-refactor-for-react) - [Opt-in MDX2 support](#opt-in-mdx2-support) - [CSF3 auto-title improvements](#csf3-auto-title-improvements) @@ -196,6 +198,26 @@ ## From version 6.4.x to 6.5.0 +### Deprecated register.js + +In ancient versions of Storybook, addons were registered by referring to `addon-name/register.js`. This is going away in SB7.0. Instead you should just add `addon-name` to the `addons` array in `.storybook/main.js`. + +Before: + +```js +module.exports = { addons: ['my-addon/register.js'] } +``` + +After: + +```js +module.exports = { addons: ['my-addon'] } +``` + +### Dropped support for addon-actions addDecorators + +Prior to SB6.5, `addon-actions` provided an option called `addDecorators`. In SB6.5, decorators are applied always. This is technically a breaking change, so if this affects you please file an issue in Github and we can consider reverting this in a patch release. + ### Docs framework refactor for React SB6.5 moves framework specializations (e.g. ArgType inference, dynamic snippet rendering) out of `@storybook/addon-docs` and into the specific framework packages to which they apply (e.g. `@storybook/react`). From 09ef0ebd1f0398eb933feffa20e503ef9fcd780c Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Fri, 18 Mar 2022 20:35:25 +0800 Subject: [PATCH 033/171] change addon-measure to new preview.js structure --- addons/measure/manager.js | 1 + addons/measure/preset.js | 12 ------------ addons/measure/preview.js | 1 + addons/measure/register.js | 6 +++++- .../src/{preset/addDecorator.tsx => preview.tsx} | 4 ++-- 5 files changed, 9 insertions(+), 15 deletions(-) create mode 100644 addons/measure/manager.js delete mode 100644 addons/measure/preset.js create mode 100644 addons/measure/preview.js rename addons/measure/src/{preset/addDecorator.tsx => preview.tsx} (51%) diff --git a/addons/measure/manager.js b/addons/measure/manager.js new file mode 100644 index 00000000000..1c43441b3bf --- /dev/null +++ b/addons/measure/manager.js @@ -0,0 +1 @@ +module.exports = require('./dist/esm/manager'); diff --git a/addons/measure/preset.js b/addons/measure/preset.js deleted file mode 100644 index eb939722176..00000000000 --- a/addons/measure/preset.js +++ /dev/null @@ -1,12 +0,0 @@ -function config(entry = []) { - return [...entry, require.resolve('./dist/esm/preset/addDecorator')]; -} - -function managerEntries(entry = [], options) { - return [...entry, require.resolve('./dist/esm/manager')]; -} - -module.exports = { - managerEntries, - config, -}; diff --git a/addons/measure/preview.js b/addons/measure/preview.js new file mode 100644 index 00000000000..354c508e47f --- /dev/null +++ b/addons/measure/preview.js @@ -0,0 +1 @@ +module.exports = require('./dist/esm/preview'); diff --git a/addons/measure/register.js b/addons/measure/register.js index 81964d78c60..d6603f7c512 100644 --- a/addons/measure/register.js +++ b/addons/measure/register.js @@ -1 +1,5 @@ -require('./dist/esm/manager'); +require('@storybook/client-logger').once.warn( + 'register.js is deprecated see https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated-registerjs' +); + +require('./manager'); diff --git a/addons/measure/src/preset/addDecorator.tsx b/addons/measure/src/preview.tsx similarity index 51% rename from addons/measure/src/preset/addDecorator.tsx rename to addons/measure/src/preview.tsx index 8aabbd42a2d..c1433b927ef 100644 --- a/addons/measure/src/preset/addDecorator.tsx +++ b/addons/measure/src/preview.tsx @@ -1,5 +1,5 @@ -import { withMeasure } from '../withMeasure'; -import { PARAM_KEY } from '../constants'; +import { withMeasure } from './withMeasure'; +import { PARAM_KEY } from './constants'; export const decorators = [withMeasure]; From 784f773573973954236c98dbbf9b38ffe5ff3342 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Fri, 18 Mar 2022 13:42:00 +0100 Subject: [PATCH 034/171] update test and lockfile --- addons/actions/package.json | 2 +- lib/core-common/src/presets.test.ts | 35 +------------------ .../cra-ts-essentials_manager-dev-posix | 12 +++---- .../cra-ts-essentials_manager-prod-posix | 12 +++---- .../cra-ts-essentials_preview-dev-posix | 6 ---- .../cra-ts-essentials_preview-prod-posix | 6 ---- .../html-kitchen-sink_manager-dev-posix | 14 ++++---- .../html-kitchen-sink_manager-prod-posix | 14 ++++---- .../html-kitchen-sink_preview-dev-posix | 11 +++--- .../html-kitchen-sink_preview-prod-posix | 11 +++--- .../__snapshots__/vue-3-cli_manager-dev-posix | 16 ++++----- .../vue-3-cli_manager-prod-posix | 16 ++++----- .../__snapshots__/vue-3-cli_preview-dev-posix | 8 +---- .../vue-3-cli_preview-prod-posix | 8 +---- ...-components-kitchen-sink_manager-dev-posix | 14 ++++---- ...components-kitchen-sink_manager-prod-posix | 14 ++++---- ...-components-kitchen-sink_preview-dev-posix | 11 +++--- ...components-kitchen-sink_preview-prod-posix | 11 +++--- yarn.lock | 3 ++ 19 files changed, 79 insertions(+), 145 deletions(-) diff --git a/addons/actions/package.json b/addons/actions/package.json index 5934f9dbf81..d8af9721347 100644 --- a/addons/actions/package.json +++ b/addons/actions/package.json @@ -43,7 +43,7 @@ "dependencies": { "@storybook/addons": "6.5.0-alpha.49", "@storybook/api": "6.5.0-alpha.49", - "@storybook/client-logger": "6.5.0-alpha.49", + "@storybook/client-logger": "6.5.0-alpha.49", "@storybook/components": "6.5.0-alpha.49", "@storybook/core-events": "6.5.0-alpha.49", "@storybook/csf": "0.0.2--canary.87bc651.0", diff --git a/lib/core-common/src/presets.test.ts b/lib/core-common/src/presets.test.ts index eddb92705c1..c8cc14391f8 100644 --- a/lib/core-common/src/presets.test.ts +++ b/lib/core-common/src/presets.test.ts @@ -444,40 +444,7 @@ describe('loadPreset', () => { 0, {} ); - expect(loaded).toMatchInlineSnapshot(` - Array [ - Object { - "name": "@storybook/react", - "options": Object {}, - "preset": Object {}, - }, - Object { - "name": "@storybook/preset-typescript", - "options": Object {}, - "preset": Object {}, - }, - Object { - "name": "@storybook/addon-docs/preset", - "options": Object {}, - "preset": Object {}, - }, - Object { - "name": Object { - "addons": Array [ - "@storybook/addon-docs", - ], - "framework": "@storybook/react", - "name": "", - "presets": Array [ - "@storybook/preset-typescript", - ], - "type": "managerEntries", - }, - "options": Object {}, - "preset": Object {}, - }, - ] - `); + expect(loaded).toMatchInlineSnapshot(`Array []`); }); it('should resolve all addons & presets in correct order', () => { diff --git a/lib/core-server/src/__snapshots__/cra-ts-essentials_manager-dev-posix b/lib/core-server/src/__snapshots__/cra-ts-essentials_manager-dev-posix index 25d44f7ba9f..da0d8c3f8fb 100644 --- a/lib/core-server/src/__snapshots__/cra-ts-essentials_manager-dev-posix +++ b/lib/core-server/src/__snapshots__/cra-ts-essentials_manager-dev-posix @@ -7,12 +7,12 @@ Object { "ROOT/lib/core-client/dist/esm/globals/polyfills.js", "ROOT/lib/core-client/dist/esm/manager/index.js", "ROOT/addons/docs/dist/esm/register", - "ROOT/addons/controls/dist/esm/manager.js", - "ROOT/addons/actions/dist/esm/manager.js", - "ROOT/addons/backgrounds/dist/esm/manager.js", - "ROOT/addons/toolbars/dist/esm/manager.js", - "ROOT/addons/measure/dist/esm/manager.js", - "ROOT/addons/outline/dist/esm/manager.js", + "ROOT/addons/controls/register.js", + "ROOT/addons/actions/register.js", + "ROOT/addons/backgrounds/register.js", + "ROOT/addons/toolbars/register.js", + "ROOT/addons/measure/register.js", + "ROOT/addons/outline/register.js", ], "keys": Array [ "name", diff --git a/lib/core-server/src/__snapshots__/cra-ts-essentials_manager-prod-posix b/lib/core-server/src/__snapshots__/cra-ts-essentials_manager-prod-posix index 3a22bab507e..c9f625ad65e 100644 --- a/lib/core-server/src/__snapshots__/cra-ts-essentials_manager-prod-posix +++ b/lib/core-server/src/__snapshots__/cra-ts-essentials_manager-prod-posix @@ -7,12 +7,12 @@ Object { "ROOT/lib/core-client/dist/esm/globals/polyfills.js", "ROOT/lib/core-client/dist/esm/manager/index.js", "ROOT/addons/docs/dist/esm/register", - "ROOT/addons/controls/dist/esm/manager.js", - "ROOT/addons/actions/dist/esm/manager.js", - "ROOT/addons/backgrounds/dist/esm/manager.js", - "ROOT/addons/toolbars/dist/esm/manager.js", - "ROOT/addons/measure/dist/esm/manager.js", - "ROOT/addons/outline/dist/esm/manager.js", + "ROOT/addons/controls/register.js", + "ROOT/addons/actions/register.js", + "ROOT/addons/backgrounds/register.js", + "ROOT/addons/toolbars/register.js", + "ROOT/addons/measure/register.js", + "ROOT/addons/outline/register.js", ], "keys": Array [ "name", diff --git a/lib/core-server/src/__snapshots__/cra-ts-essentials_preview-dev-posix b/lib/core-server/src/__snapshots__/cra-ts-essentials_preview-dev-posix index c0f5cd0fede..781786b1b9b 100644 --- a/lib/core-server/src/__snapshots__/cra-ts-essentials_preview-dev-posix +++ b/lib/core-server/src/__snapshots__/cra-ts-essentials_preview-dev-posix @@ -11,12 +11,6 @@ Object { "ROOT/addons/docs/dist/esm/frameworks/common/config-generated-config-entry.js", "ROOT/app/react/dist/esm/client/docs/config-generated-config-entry.js", "ROOT/app/react/dist/esm/client/preview/config-generated-config-entry.js", - "ROOT/addons/actions/dist/esm/preset/addDecorator.js-generated-config-entry.js", - "ROOT/addons/actions/dist/esm/preset/addArgs.js-generated-config-entry.js", - "ROOT/addons/backgrounds/dist/esm/preset/addDecorator.js-generated-config-entry.js", - "ROOT/addons/backgrounds/dist/esm/preset/addParameter.js-generated-config-entry.js", - "ROOT/addons/measure/dist/esm/preset/addDecorator.js-generated-config-entry.js", - "ROOT/addons/outline/dist/esm/preset/addDecorator.js-generated-config-entry.js", "ROOT/examples/cra-ts-essentials/.storybook/preview.js-generated-config-entry.js", "ROOT/generated-stories-entry.js", ], diff --git a/lib/core-server/src/__snapshots__/cra-ts-essentials_preview-prod-posix b/lib/core-server/src/__snapshots__/cra-ts-essentials_preview-prod-posix index e6371f7c088..874f159b36f 100644 --- a/lib/core-server/src/__snapshots__/cra-ts-essentials_preview-prod-posix +++ b/lib/core-server/src/__snapshots__/cra-ts-essentials_preview-prod-posix @@ -10,12 +10,6 @@ Object { "ROOT/addons/docs/dist/esm/frameworks/common/config-generated-config-entry.js", "ROOT/app/react/dist/esm/client/docs/config-generated-config-entry.js", "ROOT/app/react/dist/esm/client/preview/config-generated-config-entry.js", - "ROOT/addons/actions/dist/esm/preset/addDecorator.js-generated-config-entry.js", - "ROOT/addons/actions/dist/esm/preset/addArgs.js-generated-config-entry.js", - "ROOT/addons/backgrounds/dist/esm/preset/addDecorator.js-generated-config-entry.js", - "ROOT/addons/backgrounds/dist/esm/preset/addParameter.js-generated-config-entry.js", - "ROOT/addons/measure/dist/esm/preset/addDecorator.js-generated-config-entry.js", - "ROOT/addons/outline/dist/esm/preset/addDecorator.js-generated-config-entry.js", "ROOT/examples/cra-ts-essentials/.storybook/preview.js-generated-config-entry.js", "ROOT/generated-stories-entry.js", ], diff --git a/lib/core-server/src/__snapshots__/html-kitchen-sink_manager-dev-posix b/lib/core-server/src/__snapshots__/html-kitchen-sink_manager-dev-posix index 46efbf91304..24661655329 100644 --- a/lib/core-server/src/__snapshots__/html-kitchen-sink_manager-dev-posix +++ b/lib/core-server/src/__snapshots__/html-kitchen-sink_manager-dev-posix @@ -6,14 +6,14 @@ Object { "ROOT/lib/core-client/dist/esm/globals/polyfills.js", "ROOT/lib/core-client/dist/esm/manager/index.js", "ROOT/addons/docs/dist/esm/register", - "ROOT/addons/a11y/dist/esm/manager.js", - "ROOT/addons/actions/dist/esm/manager.js", - "ROOT/addons/backgrounds/dist/esm/manager.js", - "ROOT/addons/controls/dist/esm/manager.js", - "ROOT/addons/jest/register.js", - "ROOT/addons/links/dist/esm/manager.js", + "ROOT/addons/a11y/manager.js", + "ROOT/addons/actions/manager.js", + "ROOT/addons/backgrounds/manager.js", + "ROOT/addons/controls/manager.js", + "ROOT/addons/jest/manager.js", + "ROOT/addons/links/manager.js", "ROOT/addons/storysource/dist/esm/manager.js", - "ROOT/addons/viewport/dist/esm/manager.js", + "ROOT/addons/viewport/manager.js", ], "keys": Array [ "name", diff --git a/lib/core-server/src/__snapshots__/html-kitchen-sink_manager-prod-posix b/lib/core-server/src/__snapshots__/html-kitchen-sink_manager-prod-posix index 332adc93069..92cd15e07c1 100644 --- a/lib/core-server/src/__snapshots__/html-kitchen-sink_manager-prod-posix +++ b/lib/core-server/src/__snapshots__/html-kitchen-sink_manager-prod-posix @@ -6,14 +6,14 @@ Object { "ROOT/lib/core-client/dist/esm/globals/polyfills.js", "ROOT/lib/core-client/dist/esm/manager/index.js", "ROOT/addons/docs/dist/esm/register", - "ROOT/addons/a11y/dist/esm/manager.js", - "ROOT/addons/actions/dist/esm/manager.js", - "ROOT/addons/backgrounds/dist/esm/manager.js", - "ROOT/addons/controls/dist/esm/manager.js", - "ROOT/addons/jest/register.js", - "ROOT/addons/links/dist/esm/manager.js", + "ROOT/addons/a11y/manager.js", + "ROOT/addons/actions/manager.js", + "ROOT/addons/backgrounds/manager.js", + "ROOT/addons/controls/manager.js", + "ROOT/addons/jest/manager.js", + "ROOT/addons/links/manager.js", "ROOT/addons/storysource/dist/esm/manager.js", - "ROOT/addons/viewport/dist/esm/manager.js", + "ROOT/addons/viewport/manager.js", ], "keys": Array [ "name", diff --git a/lib/core-server/src/__snapshots__/html-kitchen-sink_preview-dev-posix b/lib/core-server/src/__snapshots__/html-kitchen-sink_preview-dev-posix index 97d781a3de9..cca26595edd 100644 --- a/lib/core-server/src/__snapshots__/html-kitchen-sink_preview-dev-posix +++ b/lib/core-server/src/__snapshots__/html-kitchen-sink_preview-dev-posix @@ -10,13 +10,10 @@ Object { "ROOT/addons/docs/dist/esm/frameworks/common/config-generated-config-entry.js", "ROOT/app/html/dist/esm/client/preview/config-generated-config-entry.js", "ROOT/app/html/dist/esm/client/docs/config-generated-config-entry.js", - "ROOT/addons/a11y/dist/esm/a11yRunner.js-generated-config-entry.js", - "ROOT/addons/a11y/dist/esm/a11yHighlight.js-generated-config-entry.js", - "ROOT/addons/actions/dist/esm/preset/addDecorator.js-generated-config-entry.js", - "ROOT/addons/actions/dist/esm/preset/addArgs.js-generated-config-entry.js", - "ROOT/addons/backgrounds/dist/esm/preset/addDecorator.js-generated-config-entry.js", - "ROOT/addons/backgrounds/dist/esm/preset/addParameter.js-generated-config-entry.js", - "ROOT/addons/links/dist/esm/preset/addDecorator.js-generated-config-entry.js", + "ROOT/addons/a11y/preview.js-generated-config-entry.js", + "ROOT/addons/actions/preview.js-generated-config-entry.js", + "ROOT/addons/backgrounds/preview.js-generated-config-entry.js", + "ROOT/addons/links/preview.js-generated-config-entry.js", "ROOT/examples/html-kitchen-sink/.storybook/preview.js-generated-config-entry.js", "ROOT/generated-stories-entry.js", ], diff --git a/lib/core-server/src/__snapshots__/html-kitchen-sink_preview-prod-posix b/lib/core-server/src/__snapshots__/html-kitchen-sink_preview-prod-posix index b70aaf53938..e345873a615 100644 --- a/lib/core-server/src/__snapshots__/html-kitchen-sink_preview-prod-posix +++ b/lib/core-server/src/__snapshots__/html-kitchen-sink_preview-prod-posix @@ -9,13 +9,10 @@ Object { "ROOT/addons/docs/dist/esm/frameworks/common/config-generated-config-entry.js", "ROOT/app/html/dist/esm/client/preview/config-generated-config-entry.js", "ROOT/app/html/dist/esm/client/docs/config-generated-config-entry.js", - "ROOT/addons/a11y/dist/esm/a11yRunner.js-generated-config-entry.js", - "ROOT/addons/a11y/dist/esm/a11yHighlight.js-generated-config-entry.js", - "ROOT/addons/actions/dist/esm/preset/addDecorator.js-generated-config-entry.js", - "ROOT/addons/actions/dist/esm/preset/addArgs.js-generated-config-entry.js", - "ROOT/addons/backgrounds/dist/esm/preset/addDecorator.js-generated-config-entry.js", - "ROOT/addons/backgrounds/dist/esm/preset/addParameter.js-generated-config-entry.js", - "ROOT/addons/links/dist/esm/preset/addDecorator.js-generated-config-entry.js", + "ROOT/addons/a11y/preview.js-generated-config-entry.js", + "ROOT/addons/actions/preview.js-generated-config-entry.js", + "ROOT/addons/backgrounds/preview.js-generated-config-entry.js", + "ROOT/addons/links/preview.js-generated-config-entry.js", "ROOT/examples/html-kitchen-sink/.storybook/preview.js-generated-config-entry.js", "ROOT/generated-stories-entry.js", ], diff --git a/lib/core-server/src/__snapshots__/vue-3-cli_manager-dev-posix b/lib/core-server/src/__snapshots__/vue-3-cli_manager-dev-posix index 66424706468..775c501d5b1 100644 --- a/lib/core-server/src/__snapshots__/vue-3-cli_manager-dev-posix +++ b/lib/core-server/src/__snapshots__/vue-3-cli_manager-dev-posix @@ -5,15 +5,15 @@ Object { "entry": Array [ "ROOT/lib/core-client/dist/esm/globals/polyfills.js", "ROOT/lib/core-client/dist/esm/manager/index.js", - "ROOT/addons/links/dist/esm/manager.js", + "ROOT/addons/links/manager.js", "ROOT/addons/docs/dist/esm/register", - "ROOT/addons/controls/dist/esm/manager.js", - "ROOT/addons/actions/dist/esm/manager.js", - "ROOT/addons/backgrounds/dist/esm/manager.js", - "ROOT/addons/viewport/dist/esm/manager.js", - "ROOT/addons/toolbars/dist/esm/manager.js", - "ROOT/addons/measure/dist/esm/manager.js", - "ROOT/addons/outline/dist/esm/manager.js", + "ROOT/addons/controls/register.js", + "ROOT/addons/actions/register.js", + "ROOT/addons/backgrounds/register.js", + "ROOT/addons/viewport/register.js", + "ROOT/addons/toolbars/register.js", + "ROOT/addons/measure/register.js", + "ROOT/addons/outline/register.js", "ROOT/addons/interactions/dist/esm/manager.js", ], "keys": Array [ diff --git a/lib/core-server/src/__snapshots__/vue-3-cli_manager-prod-posix b/lib/core-server/src/__snapshots__/vue-3-cli_manager-prod-posix index a4ab1bdd774..fcdac67026a 100644 --- a/lib/core-server/src/__snapshots__/vue-3-cli_manager-prod-posix +++ b/lib/core-server/src/__snapshots__/vue-3-cli_manager-prod-posix @@ -5,15 +5,15 @@ Object { "entry": Array [ "ROOT/lib/core-client/dist/esm/globals/polyfills.js", "ROOT/lib/core-client/dist/esm/manager/index.js", - "ROOT/addons/links/dist/esm/manager.js", + "ROOT/addons/links/manager.js", "ROOT/addons/docs/dist/esm/register", - "ROOT/addons/controls/dist/esm/manager.js", - "ROOT/addons/actions/dist/esm/manager.js", - "ROOT/addons/backgrounds/dist/esm/manager.js", - "ROOT/addons/viewport/dist/esm/manager.js", - "ROOT/addons/toolbars/dist/esm/manager.js", - "ROOT/addons/measure/dist/esm/manager.js", - "ROOT/addons/outline/dist/esm/manager.js", + "ROOT/addons/controls/register.js", + "ROOT/addons/actions/register.js", + "ROOT/addons/backgrounds/register.js", + "ROOT/addons/viewport/register.js", + "ROOT/addons/toolbars/register.js", + "ROOT/addons/measure/register.js", + "ROOT/addons/outline/register.js", "ROOT/addons/interactions/dist/esm/manager.js", ], "keys": Array [ diff --git a/lib/core-server/src/__snapshots__/vue-3-cli_preview-dev-posix b/lib/core-server/src/__snapshots__/vue-3-cli_preview-dev-posix index fe42332cf78..cacff01b67b 100644 --- a/lib/core-server/src/__snapshots__/vue-3-cli_preview-dev-posix +++ b/lib/core-server/src/__snapshots__/vue-3-cli_preview-dev-posix @@ -10,14 +10,8 @@ Object { "ROOT/addons/docs/dist/esm/frameworks/common/config-generated-config-entry.js", "ROOT/app/vue3/dist/esm/client/preview/config-generated-config-entry.js", "ROOT/app/vue3/dist/esm/client/docs/config-generated-config-entry.js", - "ROOT/addons/links/dist/esm/preset/addDecorator.js-generated-config-entry.js", - "ROOT/addons/actions/dist/esm/preset/addDecorator.js-generated-config-entry.js", - "ROOT/addons/actions/dist/esm/preset/addArgs.js-generated-config-entry.js", - "ROOT/addons/backgrounds/dist/esm/preset/addDecorator.js-generated-config-entry.js", - "ROOT/addons/backgrounds/dist/esm/preset/addParameter.js-generated-config-entry.js", - "ROOT/addons/measure/dist/esm/preset/addDecorator.js-generated-config-entry.js", - "ROOT/addons/outline/dist/esm/preset/addDecorator.js-generated-config-entry.js", "ROOT/addons/interactions/dist/esm/preset/argsEnhancers.js-generated-config-entry.js", + "ROOT/addons/links/preview.js-generated-config-entry.js", "ROOT/examples/vue-3-cli/.storybook/preview.ts-generated-config-entry.js", "ROOT/generated-stories-entry.js", ], diff --git a/lib/core-server/src/__snapshots__/vue-3-cli_preview-prod-posix b/lib/core-server/src/__snapshots__/vue-3-cli_preview-prod-posix index 4792caed2d1..8be428c9664 100644 --- a/lib/core-server/src/__snapshots__/vue-3-cli_preview-prod-posix +++ b/lib/core-server/src/__snapshots__/vue-3-cli_preview-prod-posix @@ -9,14 +9,8 @@ Object { "ROOT/addons/docs/dist/esm/frameworks/common/config-generated-config-entry.js", "ROOT/app/vue3/dist/esm/client/preview/config-generated-config-entry.js", "ROOT/app/vue3/dist/esm/client/docs/config-generated-config-entry.js", - "ROOT/addons/links/dist/esm/preset/addDecorator.js-generated-config-entry.js", - "ROOT/addons/actions/dist/esm/preset/addDecorator.js-generated-config-entry.js", - "ROOT/addons/actions/dist/esm/preset/addArgs.js-generated-config-entry.js", - "ROOT/addons/backgrounds/dist/esm/preset/addDecorator.js-generated-config-entry.js", - "ROOT/addons/backgrounds/dist/esm/preset/addParameter.js-generated-config-entry.js", - "ROOT/addons/measure/dist/esm/preset/addDecorator.js-generated-config-entry.js", - "ROOT/addons/outline/dist/esm/preset/addDecorator.js-generated-config-entry.js", "ROOT/addons/interactions/dist/esm/preset/argsEnhancers.js-generated-config-entry.js", + "ROOT/addons/links/preview.js-generated-config-entry.js", "ROOT/examples/vue-3-cli/.storybook/preview.ts-generated-config-entry.js", "ROOT/generated-stories-entry.js", ], diff --git a/lib/core-server/src/__snapshots__/web-components-kitchen-sink_manager-dev-posix b/lib/core-server/src/__snapshots__/web-components-kitchen-sink_manager-dev-posix index aed6bee6237..a82fffba628 100644 --- a/lib/core-server/src/__snapshots__/web-components-kitchen-sink_manager-dev-posix +++ b/lib/core-server/src/__snapshots__/web-components-kitchen-sink_manager-dev-posix @@ -6,15 +6,15 @@ Object { "ROOT/lib/core-client/dist/esm/globals/polyfills.js", "ROOT/lib/core-client/dist/esm/manager/index.js", "ROOT/addons/docs/dist/esm/register", - "ROOT/addons/controls/dist/esm/manager.js", - "ROOT/addons/a11y/dist/esm/manager.js", - "ROOT/addons/actions/dist/esm/manager.js", - "ROOT/addons/backgrounds/dist/esm/manager.js", + "ROOT/addons/controls/manager.js", + "ROOT/addons/a11y/manager.js", + "ROOT/addons/actions/manager.js", + "ROOT/addons/backgrounds/manager.js", "ROOT/addons/interactions/dist/esm/manager.js", - "ROOT/addons/links/dist/esm/manager.js", + "ROOT/addons/links/manager.js", "ROOT/addons/storysource/dist/esm/manager.js", - "ROOT/addons/viewport/dist/esm/manager.js", - "ROOT/addons/toolbars/dist/esm/manager.js", + "ROOT/addons/viewport/manager.js", + "ROOT/addons/toolbars/manager.js", ], "keys": Array [ "name", diff --git a/lib/core-server/src/__snapshots__/web-components-kitchen-sink_manager-prod-posix b/lib/core-server/src/__snapshots__/web-components-kitchen-sink_manager-prod-posix index 74f36faf447..012d9acdd6e 100644 --- a/lib/core-server/src/__snapshots__/web-components-kitchen-sink_manager-prod-posix +++ b/lib/core-server/src/__snapshots__/web-components-kitchen-sink_manager-prod-posix @@ -6,15 +6,15 @@ Object { "ROOT/lib/core-client/dist/esm/globals/polyfills.js", "ROOT/lib/core-client/dist/esm/manager/index.js", "ROOT/addons/docs/dist/esm/register", - "ROOT/addons/controls/dist/esm/manager.js", - "ROOT/addons/a11y/dist/esm/manager.js", - "ROOT/addons/actions/dist/esm/manager.js", - "ROOT/addons/backgrounds/dist/esm/manager.js", + "ROOT/addons/controls/manager.js", + "ROOT/addons/a11y/manager.js", + "ROOT/addons/actions/manager.js", + "ROOT/addons/backgrounds/manager.js", "ROOT/addons/interactions/dist/esm/manager.js", - "ROOT/addons/links/dist/esm/manager.js", + "ROOT/addons/links/manager.js", "ROOT/addons/storysource/dist/esm/manager.js", - "ROOT/addons/viewport/dist/esm/manager.js", - "ROOT/addons/toolbars/dist/esm/manager.js", + "ROOT/addons/viewport/manager.js", + "ROOT/addons/toolbars/manager.js", ], "keys": Array [ "name", diff --git a/lib/core-server/src/__snapshots__/web-components-kitchen-sink_preview-dev-posix b/lib/core-server/src/__snapshots__/web-components-kitchen-sink_preview-dev-posix index c816a27405c..6bb1223590f 100644 --- a/lib/core-server/src/__snapshots__/web-components-kitchen-sink_preview-dev-posix +++ b/lib/core-server/src/__snapshots__/web-components-kitchen-sink_preview-dev-posix @@ -10,14 +10,11 @@ Object { "ROOT/addons/docs/dist/esm/frameworks/common/config-generated-config-entry.js", "ROOT/app/web-components/dist/esm/client/preview/config-generated-config-entry.js", "ROOT/app/web-components/dist/esm/client/docs/config-generated-config-entry.js", - "ROOT/addons/a11y/dist/esm/a11yRunner.js-generated-config-entry.js", - "ROOT/addons/a11y/dist/esm/a11yHighlight.js-generated-config-entry.js", - "ROOT/addons/actions/dist/esm/preset/addDecorator.js-generated-config-entry.js", - "ROOT/addons/actions/dist/esm/preset/addArgs.js-generated-config-entry.js", - "ROOT/addons/backgrounds/dist/esm/preset/addDecorator.js-generated-config-entry.js", - "ROOT/addons/backgrounds/dist/esm/preset/addParameter.js-generated-config-entry.js", "ROOT/addons/interactions/dist/esm/preset/argsEnhancers.js-generated-config-entry.js", - "ROOT/addons/links/dist/esm/preset/addDecorator.js-generated-config-entry.js", + "ROOT/addons/a11y/preview.js-generated-config-entry.js", + "ROOT/addons/actions/preview.js-generated-config-entry.js", + "ROOT/addons/backgrounds/preview.js-generated-config-entry.js", + "ROOT/addons/links/preview.js-generated-config-entry.js", "ROOT/examples/web-components-kitchen-sink/.storybook/preview.js-generated-config-entry.js", "ROOT/generated-stories-entry.js", ], diff --git a/lib/core-server/src/__snapshots__/web-components-kitchen-sink_preview-prod-posix b/lib/core-server/src/__snapshots__/web-components-kitchen-sink_preview-prod-posix index c7b0fb4ff3e..3fae456f902 100644 --- a/lib/core-server/src/__snapshots__/web-components-kitchen-sink_preview-prod-posix +++ b/lib/core-server/src/__snapshots__/web-components-kitchen-sink_preview-prod-posix @@ -9,14 +9,11 @@ Object { "ROOT/addons/docs/dist/esm/frameworks/common/config-generated-config-entry.js", "ROOT/app/web-components/dist/esm/client/preview/config-generated-config-entry.js", "ROOT/app/web-components/dist/esm/client/docs/config-generated-config-entry.js", - "ROOT/addons/a11y/dist/esm/a11yRunner.js-generated-config-entry.js", - "ROOT/addons/a11y/dist/esm/a11yHighlight.js-generated-config-entry.js", - "ROOT/addons/actions/dist/esm/preset/addDecorator.js-generated-config-entry.js", - "ROOT/addons/actions/dist/esm/preset/addArgs.js-generated-config-entry.js", - "ROOT/addons/backgrounds/dist/esm/preset/addDecorator.js-generated-config-entry.js", - "ROOT/addons/backgrounds/dist/esm/preset/addParameter.js-generated-config-entry.js", "ROOT/addons/interactions/dist/esm/preset/argsEnhancers.js-generated-config-entry.js", - "ROOT/addons/links/dist/esm/preset/addDecorator.js-generated-config-entry.js", + "ROOT/addons/a11y/preview.js-generated-config-entry.js", + "ROOT/addons/actions/preview.js-generated-config-entry.js", + "ROOT/addons/backgrounds/preview.js-generated-config-entry.js", + "ROOT/addons/links/preview.js-generated-config-entry.js", "ROOT/examples/web-components-kitchen-sink/.storybook/preview.js-generated-config-entry.js", "ROOT/generated-stories-entry.js", ], diff --git a/yarn.lock b/yarn.lock index e5c24e26170..9cf75a60687 100644 --- a/yarn.lock +++ b/yarn.lock @@ -6231,6 +6231,7 @@ __metadata: dependencies: "@storybook/addons": 6.5.0-alpha.49 "@storybook/api": 6.5.0-alpha.49 + "@storybook/client-logger": 6.5.0-alpha.49 "@storybook/components": 6.5.0-alpha.49 "@storybook/core-events": 6.5.0-alpha.49 "@storybook/csf": 0.0.2--canary.87bc651.0 @@ -6489,6 +6490,7 @@ __metadata: dependencies: "@storybook/addons": 6.5.0-alpha.49 "@storybook/api": 6.5.0-alpha.49 + "@storybook/client-logger": 6.5.0-alpha.49 "@storybook/components": 6.5.0-alpha.49 "@storybook/core-events": 6.5.0-alpha.49 "@storybook/theming": 6.5.0-alpha.49 @@ -6749,6 +6751,7 @@ __metadata: dependencies: "@storybook/addons": 6.5.0-alpha.49 "@storybook/api": 6.5.0-alpha.49 + "@storybook/client-logger": 6.5.0-alpha.49 "@storybook/components": 6.5.0-alpha.49 "@storybook/theming": 6.5.0-alpha.49 core-js: ^3.8.2 From 0b151868ec09da062b83bf701e69c6b6798dacf4 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Fri, 18 Mar 2022 14:51:18 +0100 Subject: [PATCH 035/171] changes trying to fix the presets loading behavior --- addons/essentials/src/index.ts | 9 +- lib/core-common/src/presets.test.ts | 18 +- lib/core-common/src/presets.ts | 28 +++ .../cra-ts-essentials_manager-dev-posix | 14 +- .../cra-ts-essentials_manager-prod-posix | 14 +- .../cra-ts-essentials_preview-dev-posix | 139 +---------- .../cra-ts-essentials_preview-prod-posix | 139 +---------- .../__snapshots__/vue-3-cli_manager-dev-posix | 16 +- .../vue-3-cli_manager-prod-posix | 16 +- .../__snapshots__/vue-3-cli_preview-dev-posix | 217 +----------------- .../vue-3-cli_preview-prod-posix | 217 +----------------- 11 files changed, 86 insertions(+), 741 deletions(-) diff --git a/addons/essentials/src/index.ts b/addons/essentials/src/index.ts index 7441e9fb916..7b5bc79e374 100644 --- a/addons/essentials/src/index.ts +++ b/addons/essentials/src/index.ts @@ -1,4 +1,4 @@ -import path, { join } from 'path'; +import path, { dirname, join } from 'path'; import { logger } from '@storybook/node-logger'; import { serverRequire } from '@storybook/core-common'; @@ -50,12 +50,7 @@ export function addons(options: PresetOptions = {}) { // as it's done in `lib/core/src/server/presets.js`. .map((addon) => { try { - return require.resolve(join(addon, 'preset')); - // eslint-disable-next-line no-empty - } catch (err) {} - - try { - return require.resolve(join(addon, 'register')); + return dirname(require.resolve(join(addon, 'package.json'))); // eslint-disable-next-line no-empty } catch (err) {} diff --git a/lib/core-common/src/presets.test.ts b/lib/core-common/src/presets.test.ts index c8cc14391f8..40d1e5975f5 100644 --- a/lib/core-common/src/presets.test.ts +++ b/lib/core-common/src/presets.test.ts @@ -390,14 +390,16 @@ describe('resolveAddonName', () => { it('should resolve managerEntries', () => { expect(resolveAddonName({}, '@storybook/addon-actions/register')).toEqual({ name: '@storybook/addon-actions/register', - type: 'managerEntries', + managerEntries: ['@storybook/addon-actions/register'], + type: 'virtual', }); }); it('should resolve managerEntries from new /manager path', () => { expect(resolveAddonName({}, '@storybook/addon-actions/manager')).toEqual({ name: '@storybook/addon-actions/manager', - type: 'managerEntries', + managerEntries: ['@storybook/addon-actions/manager'], + type: 'virtual', }); }); @@ -451,7 +453,7 @@ describe('loadPreset', () => { const loaded = loadPreset( { name: '', - type: 'managerEntries', + type: 'virtual', presets: ['@storybook/preset-typescript'], addons: [ '@storybook/addon-docs', @@ -477,14 +479,14 @@ describe('loadPreset', () => { preset: {}, }, { - name: '@storybook/addon-actions/register_additionalManagerEntries', + name: '@storybook/addon-actions/register', options: {}, preset: { managerEntries: ['@storybook/addon-actions/register'], }, }, { - name: 'addon-foo/register.js_additionalManagerEntries', + name: 'addon-foo/register.js', options: {}, preset: { managerEntries: ['addon-foo/register.js'], @@ -497,14 +499,14 @@ describe('loadPreset', () => { // preset: {}, // }, { - name: 'addon-baz/register.tsx_additionalManagerEntries', + name: 'addon-baz/register.tsx', options: {}, preset: { managerEntries: ['addon-baz/register.tsx'], }, }, { - name: '@storybook/addon-notes/register-panel_additionalManagerEntries', + name: '@storybook/addon-notes/register-panel', options: {}, preset: { managerEntries: ['@storybook/addon-notes/register-panel'], @@ -522,7 +524,7 @@ describe('loadPreset', () => { '@storybook/addon-notes/register-panel', ], name: '', - type: 'managerEntries', + type: 'virtual', }, options: {}, preset: {}, diff --git a/lib/core-common/src/presets.ts b/lib/core-common/src/presets.ts index aba86555fb4..79af59e7106 100644 --- a/lib/core-common/src/presets.ts +++ b/lib/core-common/src/presets.ts @@ -31,6 +31,13 @@ const safeResolveFrom = (path: string, file: string) => { return false; } }; +const safeResolve = (file: string) => { + try { + return require.resolve(file); + } catch (e) { + return false; + } +}; function resolvePresetFunction( input: T[] | Function, @@ -78,6 +85,18 @@ export const resolveAddonName = (configDir: string, name: string) => { // when user provides full path, we don't need to do anything if (path) { + const managerEntry = safeResolve(`${path}/manager`) || safeResolve(`${path}/register`); + const previewAnnotation = safeResolve(`${path}/preview`); + + if (managerEntry || previewAnnotation) { + return { + name: `${path}_virtual`, + managerEntries: [managerEntry], + previewAnnotations: [previewAnnotation], + type: 'virtual', + }; + } + // Accept `manager`, `manager.js`, `register`, `register.js`, `require.resolve('foo/manager'), `register-panel` if (path.match(/(manager|register(-panel)?)(\.(js|ts|tsx|jsx))?$/)) { return { @@ -86,6 +105,15 @@ export const resolveAddonName = (configDir: string, name: string) => { type: 'virtual', }; } + + try { + return { + name: safeResolve(`${name}/preset`), + type: 'presets', + }; + // eslint-disable-next-line no-empty + } catch (err) {} + return { name: path, type: 'presets', diff --git a/lib/core-server/src/__snapshots__/cra-ts-essentials_manager-dev-posix b/lib/core-server/src/__snapshots__/cra-ts-essentials_manager-dev-posix index da0d8c3f8fb..5771b4f2d78 100644 --- a/lib/core-server/src/__snapshots__/cra-ts-essentials_manager-dev-posix +++ b/lib/core-server/src/__snapshots__/cra-ts-essentials_manager-dev-posix @@ -6,13 +6,13 @@ Object { "NODE_MODULES/@storybook/addon-ie11/dist/event-source-polyfill.js", "ROOT/lib/core-client/dist/esm/globals/polyfills.js", "ROOT/lib/core-client/dist/esm/manager/index.js", - "ROOT/addons/docs/dist/esm/register", - "ROOT/addons/controls/register.js", - "ROOT/addons/actions/register.js", - "ROOT/addons/backgrounds/register.js", - "ROOT/addons/toolbars/register.js", - "ROOT/addons/measure/register.js", - "ROOT/addons/outline/register.js", + "ROOT/addons/docs/register.js", + "ROOT/addons/controls/manager.js", + "ROOT/addons/actions/manager.js", + "ROOT/addons/backgrounds/manager.js", + "ROOT/addons/toolbars/manager.js", + "ROOT/addons/measure/manager.js", + "ROOT/addons/outline/manager.js", ], "keys": Array [ "name", diff --git a/lib/core-server/src/__snapshots__/cra-ts-essentials_manager-prod-posix b/lib/core-server/src/__snapshots__/cra-ts-essentials_manager-prod-posix index c9f625ad65e..954e7883545 100644 --- a/lib/core-server/src/__snapshots__/cra-ts-essentials_manager-prod-posix +++ b/lib/core-server/src/__snapshots__/cra-ts-essentials_manager-prod-posix @@ -6,13 +6,13 @@ Object { "NODE_MODULES/@storybook/addon-ie11/dist/event-source-polyfill.js", "ROOT/lib/core-client/dist/esm/globals/polyfills.js", "ROOT/lib/core-client/dist/esm/manager/index.js", - "ROOT/addons/docs/dist/esm/register", - "ROOT/addons/controls/register.js", - "ROOT/addons/actions/register.js", - "ROOT/addons/backgrounds/register.js", - "ROOT/addons/toolbars/register.js", - "ROOT/addons/measure/register.js", - "ROOT/addons/outline/register.js", + "ROOT/addons/docs/register.js", + "ROOT/addons/controls/manager.js", + "ROOT/addons/actions/manager.js", + "ROOT/addons/backgrounds/manager.js", + "ROOT/addons/toolbars/manager.js", + "ROOT/addons/measure/manager.js", + "ROOT/addons/outline/manager.js", ], "keys": Array [ "name", diff --git a/lib/core-server/src/__snapshots__/cra-ts-essentials_preview-dev-posix b/lib/core-server/src/__snapshots__/cra-ts-essentials_preview-dev-posix index 781786b1b9b..91166994578 100644 --- a/lib/core-server/src/__snapshots__/cra-ts-essentials_preview-dev-posix +++ b/lib/core-server/src/__snapshots__/cra-ts-essentials_preview-dev-posix @@ -8,9 +8,12 @@ Object { "NODE_MODULES/webpack-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined", "NODE_MODULES/@storybook/addon-ie11/dist/event-source-polyfill.js", "ROOT/storybook-init-framework-entry.js", - "ROOT/addons/docs/dist/esm/frameworks/common/config-generated-config-entry.js", "ROOT/app/react/dist/esm/client/docs/config-generated-config-entry.js", "ROOT/app/react/dist/esm/client/preview/config-generated-config-entry.js", + "ROOT/addons/actions/preview.js-generated-config-entry.js", + "ROOT/addons/backgrounds/preview.js-generated-config-entry.js", + "ROOT/addons/measure/preview.js-generated-config-entry.js", + "ROOT/addons/outline/preview.js-generated-config-entry.js", "ROOT/examples/cra-ts-essentials/.storybook/preview.js-generated-config-entry.js", "ROOT/generated-stories-entry.js", ], @@ -318,140 +321,6 @@ Object { }, ], }, - Object { - "include": "NODE_MODULES\\\\/acorn-jsx/", - "test": "/\\\\.js$/", - "use": Array [ - Object { - "loader": "NODE_MODULES/babel-loader/lib/index.js", - "options": Object { - "presets": Array [ - Array [ - "NODE_MODULES/@babel/preset-env/lib/index.js", - Object { - "modules": "commonjs", - }, - ], - ], - }, - }, - ], - }, - Object { - "test": "/(stories|story)\\\\.mdx$/", - "use": Array [ - Object { - "loader": "NODE_MODULES/babel-loader/lib/index.js", - "options": Object { - "babelrc": false, - "cacheDirectory": "NODE_MODULES/.cache/storybook/babel", - "configFile": false, - "overrides": Array [ - Object { - "plugins": Array [ - Array [ - "NODE_MODULES/babel-plugin-react-docgen/lib/index.js", - Object { - "DOC_GEN_COLLECTION_NAME": "STORYBOOK_REACT_CLASSES", - }, - ], - ], - "test": "/\\\\.(mjs|jsx?)$/", - }, - ], - "plugins": Array [ - Array [ - "NODE_MODULES/@babel/plugin-transform-react-jsx/lib/index.js", - Object { - "pragma": "React.createElement", - "pragmaFrag": "React.Fragment", - }, - ], - ], - "presets": Array [ - Array [ - "@babel/preset-env", - Object { - "targets": Object { - "ie": "11", - }, - }, - "storybook-addon-ie11", - ], - ], - }, - }, - Object { - "loader": "NODE_MODULES/@storybook/mdx1-csf/loader.js", - }, - ], - }, - Object { - "exclude": "/(stories|story)\\\\.mdx$/", - "test": "/\\\\.mdx$/", - "use": Array [ - Object { - "loader": "NODE_MODULES/babel-loader/lib/index.js", - "options": Object { - "babelrc": false, - "cacheDirectory": "NODE_MODULES/.cache/storybook/babel", - "configFile": false, - "overrides": Array [ - Object { - "plugins": Array [ - Array [ - "NODE_MODULES/babel-plugin-react-docgen/lib/index.js", - Object { - "DOC_GEN_COLLECTION_NAME": "STORYBOOK_REACT_CLASSES", - }, - ], - ], - "test": "/\\\\.(mjs|jsx?)$/", - }, - ], - "plugins": Array [ - Array [ - "NODE_MODULES/@babel/plugin-transform-react-jsx/lib/index.js", - Object { - "pragma": "React.createElement", - "pragmaFrag": "React.Fragment", - }, - ], - ], - "presets": Array [ - Array [ - "@babel/preset-env", - Object { - "targets": Object { - "ie": "11", - }, - }, - "storybook-addon-ie11", - ], - ], - }, - }, - Object { - "loader": "NODE_MODULES/@storybook/mdx1-csf/loader.js", - "options": Object { - "remarkPlugins": Array [ - [Function], - [Function], - ], - "skipCsf": true, - }, - }, - ], - }, - Object { - "enforce": "pre", - "loader": "ROOT/lib/source-loader/dist/cjs/index.js", - "options": Object { - "injectStoryParameters": true, - "inspectLocalDependencies": true, - }, - "test": "/\\\\.(stories|story)\\\\.[tj]sx?$/", - }, ], }, "plugins": Array [ diff --git a/lib/core-server/src/__snapshots__/cra-ts-essentials_preview-prod-posix b/lib/core-server/src/__snapshots__/cra-ts-essentials_preview-prod-posix index 874f159b36f..97402579186 100644 --- a/lib/core-server/src/__snapshots__/cra-ts-essentials_preview-prod-posix +++ b/lib/core-server/src/__snapshots__/cra-ts-essentials_preview-prod-posix @@ -7,9 +7,12 @@ Object { "ROOT/lib/core-client/dist/esm/globals/globals.js", "NODE_MODULES/@storybook/addon-ie11/dist/event-source-polyfill.js", "ROOT/storybook-init-framework-entry.js", - "ROOT/addons/docs/dist/esm/frameworks/common/config-generated-config-entry.js", "ROOT/app/react/dist/esm/client/docs/config-generated-config-entry.js", "ROOT/app/react/dist/esm/client/preview/config-generated-config-entry.js", + "ROOT/addons/actions/preview.js-generated-config-entry.js", + "ROOT/addons/backgrounds/preview.js-generated-config-entry.js", + "ROOT/addons/measure/preview.js-generated-config-entry.js", + "ROOT/addons/outline/preview.js-generated-config-entry.js", "ROOT/examples/cra-ts-essentials/.storybook/preview.js-generated-config-entry.js", "ROOT/generated-stories-entry.js", ], @@ -336,140 +339,6 @@ Object { }, ], }, - Object { - "include": "NODE_MODULES\\\\/acorn-jsx/", - "test": "/\\\\.js$/", - "use": Array [ - Object { - "loader": "NODE_MODULES/babel-loader/lib/index.js", - "options": Object { - "presets": Array [ - Array [ - "NODE_MODULES/@babel/preset-env/lib/index.js", - Object { - "modules": "commonjs", - }, - ], - ], - }, - }, - ], - }, - Object { - "test": "/(stories|story)\\\\.mdx$/", - "use": Array [ - Object { - "loader": "NODE_MODULES/babel-loader/lib/index.js", - "options": Object { - "babelrc": false, - "cacheDirectory": "NODE_MODULES/.cache/storybook/babel", - "configFile": false, - "overrides": Array [ - Object { - "plugins": Array [ - Array [ - "NODE_MODULES/babel-plugin-react-docgen/lib/index.js", - Object { - "DOC_GEN_COLLECTION_NAME": "STORYBOOK_REACT_CLASSES", - }, - ], - ], - "test": "/\\\\.(mjs|jsx?)$/", - }, - ], - "plugins": Array [ - Array [ - "NODE_MODULES/@babel/plugin-transform-react-jsx/lib/index.js", - Object { - "pragma": "React.createElement", - "pragmaFrag": "React.Fragment", - }, - ], - ], - "presets": Array [ - Array [ - "@babel/preset-env", - Object { - "targets": Object { - "ie": "11", - }, - }, - "storybook-addon-ie11", - ], - ], - }, - }, - Object { - "loader": "NODE_MODULES/@storybook/mdx1-csf/loader.js", - }, - ], - }, - Object { - "exclude": "/(stories|story)\\\\.mdx$/", - "test": "/\\\\.mdx$/", - "use": Array [ - Object { - "loader": "NODE_MODULES/babel-loader/lib/index.js", - "options": Object { - "babelrc": false, - "cacheDirectory": "NODE_MODULES/.cache/storybook/babel", - "configFile": false, - "overrides": Array [ - Object { - "plugins": Array [ - Array [ - "NODE_MODULES/babel-plugin-react-docgen/lib/index.js", - Object { - "DOC_GEN_COLLECTION_NAME": "STORYBOOK_REACT_CLASSES", - }, - ], - ], - "test": "/\\\\.(mjs|jsx?)$/", - }, - ], - "plugins": Array [ - Array [ - "NODE_MODULES/@babel/plugin-transform-react-jsx/lib/index.js", - Object { - "pragma": "React.createElement", - "pragmaFrag": "React.Fragment", - }, - ], - ], - "presets": Array [ - Array [ - "@babel/preset-env", - Object { - "targets": Object { - "ie": "11", - }, - }, - "storybook-addon-ie11", - ], - ], - }, - }, - Object { - "loader": "NODE_MODULES/@storybook/mdx1-csf/loader.js", - "options": Object { - "remarkPlugins": Array [ - [Function], - [Function], - ], - "skipCsf": true, - }, - }, - ], - }, - Object { - "enforce": "pre", - "loader": "ROOT/lib/source-loader/dist/cjs/index.js", - "options": Object { - "injectStoryParameters": true, - "inspectLocalDependencies": true, - }, - "test": "/\\\\.(stories|story)\\\\.[tj]sx?$/", - }, ], }, "plugins": Array [ diff --git a/lib/core-server/src/__snapshots__/vue-3-cli_manager-dev-posix b/lib/core-server/src/__snapshots__/vue-3-cli_manager-dev-posix index 775c501d5b1..0022ce46b81 100644 --- a/lib/core-server/src/__snapshots__/vue-3-cli_manager-dev-posix +++ b/lib/core-server/src/__snapshots__/vue-3-cli_manager-dev-posix @@ -6,14 +6,14 @@ Object { "ROOT/lib/core-client/dist/esm/globals/polyfills.js", "ROOT/lib/core-client/dist/esm/manager/index.js", "ROOT/addons/links/manager.js", - "ROOT/addons/docs/dist/esm/register", - "ROOT/addons/controls/register.js", - "ROOT/addons/actions/register.js", - "ROOT/addons/backgrounds/register.js", - "ROOT/addons/viewport/register.js", - "ROOT/addons/toolbars/register.js", - "ROOT/addons/measure/register.js", - "ROOT/addons/outline/register.js", + "ROOT/addons/docs/register.js", + "ROOT/addons/controls/manager.js", + "ROOT/addons/actions/manager.js", + "ROOT/addons/backgrounds/manager.js", + "ROOT/addons/viewport/manager.js", + "ROOT/addons/toolbars/manager.js", + "ROOT/addons/measure/manager.js", + "ROOT/addons/outline/manager.js", "ROOT/addons/interactions/dist/esm/manager.js", ], "keys": Array [ diff --git a/lib/core-server/src/__snapshots__/vue-3-cli_manager-prod-posix b/lib/core-server/src/__snapshots__/vue-3-cli_manager-prod-posix index fcdac67026a..a28ea31a331 100644 --- a/lib/core-server/src/__snapshots__/vue-3-cli_manager-prod-posix +++ b/lib/core-server/src/__snapshots__/vue-3-cli_manager-prod-posix @@ -6,14 +6,14 @@ Object { "ROOT/lib/core-client/dist/esm/globals/polyfills.js", "ROOT/lib/core-client/dist/esm/manager/index.js", "ROOT/addons/links/manager.js", - "ROOT/addons/docs/dist/esm/register", - "ROOT/addons/controls/register.js", - "ROOT/addons/actions/register.js", - "ROOT/addons/backgrounds/register.js", - "ROOT/addons/viewport/register.js", - "ROOT/addons/toolbars/register.js", - "ROOT/addons/measure/register.js", - "ROOT/addons/outline/register.js", + "ROOT/addons/docs/register.js", + "ROOT/addons/controls/manager.js", + "ROOT/addons/actions/manager.js", + "ROOT/addons/backgrounds/manager.js", + "ROOT/addons/viewport/manager.js", + "ROOT/addons/toolbars/manager.js", + "ROOT/addons/measure/manager.js", + "ROOT/addons/outline/manager.js", "ROOT/addons/interactions/dist/esm/manager.js", ], "keys": Array [ diff --git a/lib/core-server/src/__snapshots__/vue-3-cli_preview-dev-posix b/lib/core-server/src/__snapshots__/vue-3-cli_preview-dev-posix index cacff01b67b..6724303aa12 100644 --- a/lib/core-server/src/__snapshots__/vue-3-cli_preview-dev-posix +++ b/lib/core-server/src/__snapshots__/vue-3-cli_preview-dev-posix @@ -7,11 +7,14 @@ Object { "ROOT/lib/core-client/dist/esm/globals/globals.js", "NODE_MODULES/webpack-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined", "ROOT/storybook-init-framework-entry.js", - "ROOT/addons/docs/dist/esm/frameworks/common/config-generated-config-entry.js", "ROOT/app/vue3/dist/esm/client/preview/config-generated-config-entry.js", "ROOT/app/vue3/dist/esm/client/docs/config-generated-config-entry.js", "ROOT/addons/interactions/dist/esm/preset/argsEnhancers.js-generated-config-entry.js", "ROOT/addons/links/preview.js-generated-config-entry.js", + "ROOT/addons/actions/preview.js-generated-config-entry.js", + "ROOT/addons/backgrounds/preview.js-generated-config-entry.js", + "ROOT/addons/measure/preview.js-generated-config-entry.js", + "ROOT/addons/outline/preview.js-generated-config-entry.js", "ROOT/examples/vue-3-cli/.storybook/preview.ts-generated-config-entry.js", "ROOT/generated-stories-entry.js", ], @@ -217,218 +220,6 @@ Object { }, ], }, - Object { - "include": "NODE_MODULES\\\\/acorn-jsx/", - "test": "/\\\\.js$/", - "use": Array [ - Object { - "loader": "NODE_MODULES/babel-loader/lib/index.js", - "options": Object { - "presets": Array [ - Array [ - "NODE_MODULES/@babel/preset-env/lib/index.js", - Object { - "modules": "commonjs", - }, - ], - ], - }, - }, - ], - }, - Object { - "test": "/(stories|story)\\\\.mdx$/", - "use": Array [ - Object { - "loader": "NODE_MODULES/babel-loader/lib/index.js", - "options": Object { - "babelrc": false, - "cacheDirectory": "NODE_MODULES/.cache/storybook/babel", - "configFile": false, - "plugins": Array [ - "NODE_MODULES/@babel/plugin-transform-shorthand-properties/lib/index.js", - "NODE_MODULES/@babel/plugin-transform-block-scoping/lib/index.js", - Array [ - "NODE_MODULES/@babel/plugin-proposal-decorators/lib/index.js", - Object { - "legacy": true, - }, - ], - Array [ - "NODE_MODULES/@babel/plugin-proposal-class-properties/lib/index.js", - Object { - "loose": true, - }, - ], - Array [ - "NODE_MODULES/@babel/plugin-proposal-private-property-in-object/lib/index.js", - Object { - "loose": true, - }, - ], - Array [ - "NODE_MODULES/@babel/plugin-proposal-private-methods/lib/index.js", - Object { - "loose": true, - }, - ], - "NODE_MODULES/@babel/plugin-proposal-export-default-from/lib/index.js", - "NODE_MODULES/@babel/plugin-syntax-dynamic-import/lib/index.js", - Array [ - "NODE_MODULES/@babel/plugin-proposal-object-rest-spread/lib/index.js", - Object { - "loose": true, - "useBuiltIns": true, - }, - ], - "NODE_MODULES/@babel/plugin-transform-classes/lib/index.js", - "NODE_MODULES/@babel/plugin-transform-arrow-functions/lib/index.js", - "NODE_MODULES/@babel/plugin-transform-parameters/lib/index.js", - "NODE_MODULES/@babel/plugin-transform-destructuring/lib/index.js", - "NODE_MODULES/@babel/plugin-transform-spread/lib/index.js", - "NODE_MODULES/@babel/plugin-transform-for-of/lib/index.js", - "NODE_MODULES/babel-plugin-macros/dist/index.js", - "NODE_MODULES/@babel/plugin-proposal-optional-chaining/lib/index.js", - "NODE_MODULES/@babel/plugin-proposal-nullish-coalescing-operator/lib/index.js", - Array [ - "NODE_MODULES/babel-plugin-polyfill-corejs3/lib/index.js", - Object { - "absoluteImports": "NODE_MODULES/core-js/index.js", - "method": "usage-global", - "version": "*", - }, - ], - Array [ - "NODE_MODULES/@babel/plugin-transform-react-jsx/lib/index.js", - Object { - "pragma": "React.createElement", - "pragmaFrag": "React.Fragment", - }, - ], - ], - "presets": Array [ - Array [ - "NODE_MODULES/@babel/preset-env/lib/index.js", - Object { - "loose": true, - "shippedProposals": true, - }, - ], - "NODE_MODULES/@babel/preset-typescript/lib/index.js", - ], - "sourceType": "unambiguous", - }, - }, - Object { - "loader": "NODE_MODULES/@storybook/mdx1-csf/loader.js", - }, - ], - }, - Object { - "exclude": "/(stories|story)\\\\.mdx$/", - "test": "/\\\\.mdx$/", - "use": Array [ - Object { - "loader": "NODE_MODULES/babel-loader/lib/index.js", - "options": Object { - "babelrc": false, - "cacheDirectory": "NODE_MODULES/.cache/storybook/babel", - "configFile": false, - "plugins": Array [ - "NODE_MODULES/@babel/plugin-transform-shorthand-properties/lib/index.js", - "NODE_MODULES/@babel/plugin-transform-block-scoping/lib/index.js", - Array [ - "NODE_MODULES/@babel/plugin-proposal-decorators/lib/index.js", - Object { - "legacy": true, - }, - ], - Array [ - "NODE_MODULES/@babel/plugin-proposal-class-properties/lib/index.js", - Object { - "loose": true, - }, - ], - Array [ - "NODE_MODULES/@babel/plugin-proposal-private-property-in-object/lib/index.js", - Object { - "loose": true, - }, - ], - Array [ - "NODE_MODULES/@babel/plugin-proposal-private-methods/lib/index.js", - Object { - "loose": true, - }, - ], - "NODE_MODULES/@babel/plugin-proposal-export-default-from/lib/index.js", - "NODE_MODULES/@babel/plugin-syntax-dynamic-import/lib/index.js", - Array [ - "NODE_MODULES/@babel/plugin-proposal-object-rest-spread/lib/index.js", - Object { - "loose": true, - "useBuiltIns": true, - }, - ], - "NODE_MODULES/@babel/plugin-transform-classes/lib/index.js", - "NODE_MODULES/@babel/plugin-transform-arrow-functions/lib/index.js", - "NODE_MODULES/@babel/plugin-transform-parameters/lib/index.js", - "NODE_MODULES/@babel/plugin-transform-destructuring/lib/index.js", - "NODE_MODULES/@babel/plugin-transform-spread/lib/index.js", - "NODE_MODULES/@babel/plugin-transform-for-of/lib/index.js", - "NODE_MODULES/babel-plugin-macros/dist/index.js", - "NODE_MODULES/@babel/plugin-proposal-optional-chaining/lib/index.js", - "NODE_MODULES/@babel/plugin-proposal-nullish-coalescing-operator/lib/index.js", - Array [ - "NODE_MODULES/babel-plugin-polyfill-corejs3/lib/index.js", - Object { - "absoluteImports": "NODE_MODULES/core-js/index.js", - "method": "usage-global", - "version": "*", - }, - ], - Array [ - "NODE_MODULES/@babel/plugin-transform-react-jsx/lib/index.js", - Object { - "pragma": "React.createElement", - "pragmaFrag": "React.Fragment", - }, - ], - ], - "presets": Array [ - Array [ - "NODE_MODULES/@babel/preset-env/lib/index.js", - Object { - "loose": true, - "shippedProposals": true, - }, - ], - "NODE_MODULES/@babel/preset-typescript/lib/index.js", - ], - "sourceType": "unambiguous", - }, - }, - Object { - "loader": "NODE_MODULES/@storybook/mdx1-csf/loader.js", - "options": Object { - "remarkPlugins": Array [ - [Function], - [Function], - ], - "skipCsf": true, - }, - }, - ], - }, - Object { - "enforce": "pre", - "loader": "ROOT/lib/source-loader/dist/cjs/index.js", - "options": Object { - "injectStoryParameters": true, - "inspectLocalDependencies": true, - }, - "test": "/\\\\.(stories|story)\\\\.[tj]sx?$/", - }, Object { "sideEffects": true, "test": "/\\\\.css$/", diff --git a/lib/core-server/src/__snapshots__/vue-3-cli_preview-prod-posix b/lib/core-server/src/__snapshots__/vue-3-cli_preview-prod-posix index 8be428c9664..2a09b8995fe 100644 --- a/lib/core-server/src/__snapshots__/vue-3-cli_preview-prod-posix +++ b/lib/core-server/src/__snapshots__/vue-3-cli_preview-prod-posix @@ -6,11 +6,14 @@ Object { "ROOT/lib/core-client/dist/esm/globals/polyfills.js", "ROOT/lib/core-client/dist/esm/globals/globals.js", "ROOT/storybook-init-framework-entry.js", - "ROOT/addons/docs/dist/esm/frameworks/common/config-generated-config-entry.js", "ROOT/app/vue3/dist/esm/client/preview/config-generated-config-entry.js", "ROOT/app/vue3/dist/esm/client/docs/config-generated-config-entry.js", "ROOT/addons/interactions/dist/esm/preset/argsEnhancers.js-generated-config-entry.js", "ROOT/addons/links/preview.js-generated-config-entry.js", + "ROOT/addons/actions/preview.js-generated-config-entry.js", + "ROOT/addons/backgrounds/preview.js-generated-config-entry.js", + "ROOT/addons/measure/preview.js-generated-config-entry.js", + "ROOT/addons/outline/preview.js-generated-config-entry.js", "ROOT/examples/vue-3-cli/.storybook/preview.ts-generated-config-entry.js", "ROOT/generated-stories-entry.js", ], @@ -216,218 +219,6 @@ Object { }, ], }, - Object { - "include": "NODE_MODULES\\\\/acorn-jsx/", - "test": "/\\\\.js$/", - "use": Array [ - Object { - "loader": "NODE_MODULES/babel-loader/lib/index.js", - "options": Object { - "presets": Array [ - Array [ - "NODE_MODULES/@babel/preset-env/lib/index.js", - Object { - "modules": "commonjs", - }, - ], - ], - }, - }, - ], - }, - Object { - "test": "/(stories|story)\\\\.mdx$/", - "use": Array [ - Object { - "loader": "NODE_MODULES/babel-loader/lib/index.js", - "options": Object { - "babelrc": false, - "cacheDirectory": "NODE_MODULES/.cache/storybook/babel", - "configFile": false, - "plugins": Array [ - "NODE_MODULES/@babel/plugin-transform-shorthand-properties/lib/index.js", - "NODE_MODULES/@babel/plugin-transform-block-scoping/lib/index.js", - Array [ - "NODE_MODULES/@babel/plugin-proposal-decorators/lib/index.js", - Object { - "legacy": true, - }, - ], - Array [ - "NODE_MODULES/@babel/plugin-proposal-class-properties/lib/index.js", - Object { - "loose": true, - }, - ], - Array [ - "NODE_MODULES/@babel/plugin-proposal-private-property-in-object/lib/index.js", - Object { - "loose": true, - }, - ], - Array [ - "NODE_MODULES/@babel/plugin-proposal-private-methods/lib/index.js", - Object { - "loose": true, - }, - ], - "NODE_MODULES/@babel/plugin-proposal-export-default-from/lib/index.js", - "NODE_MODULES/@babel/plugin-syntax-dynamic-import/lib/index.js", - Array [ - "NODE_MODULES/@babel/plugin-proposal-object-rest-spread/lib/index.js", - Object { - "loose": true, - "useBuiltIns": true, - }, - ], - "NODE_MODULES/@babel/plugin-transform-classes/lib/index.js", - "NODE_MODULES/@babel/plugin-transform-arrow-functions/lib/index.js", - "NODE_MODULES/@babel/plugin-transform-parameters/lib/index.js", - "NODE_MODULES/@babel/plugin-transform-destructuring/lib/index.js", - "NODE_MODULES/@babel/plugin-transform-spread/lib/index.js", - "NODE_MODULES/@babel/plugin-transform-for-of/lib/index.js", - "NODE_MODULES/babel-plugin-macros/dist/index.js", - "NODE_MODULES/@babel/plugin-proposal-optional-chaining/lib/index.js", - "NODE_MODULES/@babel/plugin-proposal-nullish-coalescing-operator/lib/index.js", - Array [ - "NODE_MODULES/babel-plugin-polyfill-corejs3/lib/index.js", - Object { - "absoluteImports": "NODE_MODULES/core-js/index.js", - "method": "usage-global", - "version": "*", - }, - ], - Array [ - "NODE_MODULES/@babel/plugin-transform-react-jsx/lib/index.js", - Object { - "pragma": "React.createElement", - "pragmaFrag": "React.Fragment", - }, - ], - ], - "presets": Array [ - Array [ - "NODE_MODULES/@babel/preset-env/lib/index.js", - Object { - "loose": true, - "shippedProposals": true, - }, - ], - "NODE_MODULES/@babel/preset-typescript/lib/index.js", - ], - "sourceType": "unambiguous", - }, - }, - Object { - "loader": "NODE_MODULES/@storybook/mdx1-csf/loader.js", - }, - ], - }, - Object { - "exclude": "/(stories|story)\\\\.mdx$/", - "test": "/\\\\.mdx$/", - "use": Array [ - Object { - "loader": "NODE_MODULES/babel-loader/lib/index.js", - "options": Object { - "babelrc": false, - "cacheDirectory": "NODE_MODULES/.cache/storybook/babel", - "configFile": false, - "plugins": Array [ - "NODE_MODULES/@babel/plugin-transform-shorthand-properties/lib/index.js", - "NODE_MODULES/@babel/plugin-transform-block-scoping/lib/index.js", - Array [ - "NODE_MODULES/@babel/plugin-proposal-decorators/lib/index.js", - Object { - "legacy": true, - }, - ], - Array [ - "NODE_MODULES/@babel/plugin-proposal-class-properties/lib/index.js", - Object { - "loose": true, - }, - ], - Array [ - "NODE_MODULES/@babel/plugin-proposal-private-property-in-object/lib/index.js", - Object { - "loose": true, - }, - ], - Array [ - "NODE_MODULES/@babel/plugin-proposal-private-methods/lib/index.js", - Object { - "loose": true, - }, - ], - "NODE_MODULES/@babel/plugin-proposal-export-default-from/lib/index.js", - "NODE_MODULES/@babel/plugin-syntax-dynamic-import/lib/index.js", - Array [ - "NODE_MODULES/@babel/plugin-proposal-object-rest-spread/lib/index.js", - Object { - "loose": true, - "useBuiltIns": true, - }, - ], - "NODE_MODULES/@babel/plugin-transform-classes/lib/index.js", - "NODE_MODULES/@babel/plugin-transform-arrow-functions/lib/index.js", - "NODE_MODULES/@babel/plugin-transform-parameters/lib/index.js", - "NODE_MODULES/@babel/plugin-transform-destructuring/lib/index.js", - "NODE_MODULES/@babel/plugin-transform-spread/lib/index.js", - "NODE_MODULES/@babel/plugin-transform-for-of/lib/index.js", - "NODE_MODULES/babel-plugin-macros/dist/index.js", - "NODE_MODULES/@babel/plugin-proposal-optional-chaining/lib/index.js", - "NODE_MODULES/@babel/plugin-proposal-nullish-coalescing-operator/lib/index.js", - Array [ - "NODE_MODULES/babel-plugin-polyfill-corejs3/lib/index.js", - Object { - "absoluteImports": "NODE_MODULES/core-js/index.js", - "method": "usage-global", - "version": "*", - }, - ], - Array [ - "NODE_MODULES/@babel/plugin-transform-react-jsx/lib/index.js", - Object { - "pragma": "React.createElement", - "pragmaFrag": "React.Fragment", - }, - ], - ], - "presets": Array [ - Array [ - "NODE_MODULES/@babel/preset-env/lib/index.js", - Object { - "loose": true, - "shippedProposals": true, - }, - ], - "NODE_MODULES/@babel/preset-typescript/lib/index.js", - ], - "sourceType": "unambiguous", - }, - }, - Object { - "loader": "NODE_MODULES/@storybook/mdx1-csf/loader.js", - "options": Object { - "remarkPlugins": Array [ - [Function], - [Function], - ], - "skipCsf": true, - }, - }, - ], - }, - Object { - "enforce": "pre", - "loader": "ROOT/lib/source-loader/dist/cjs/index.js", - "options": Object { - "injectStoryParameters": true, - "inspectLocalDependencies": true, - }, - "test": "/\\\\.(stories|story)\\\\.[tj]sx?$/", - }, Object { "sideEffects": true, "test": "/\\\\.css$/", From fe750f3ad5ca92b6655bd4ac9ca93fb97c6866c7 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Fri, 18 Mar 2022 14:57:39 +0100 Subject: [PATCH 036/171] fix trying to resolve something in a safe way when it should instead fail --- lib/core-common/src/presets.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/core-common/src/presets.ts b/lib/core-common/src/presets.ts index 79af59e7106..adf8fe3193f 100644 --- a/lib/core-common/src/presets.ts +++ b/lib/core-common/src/presets.ts @@ -108,7 +108,7 @@ export const resolveAddonName = (configDir: string, name: string) => { try { return { - name: safeResolve(`${name}/preset`), + name: require.resolve(`${name}/preset`), type: 'presets', }; // eslint-disable-next-line no-empty From a2ec44d5fc03da63e844c8a909de1ce0e36a7409 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Fri, 18 Mar 2022 15:20:00 +0100 Subject: [PATCH 037/171] update snapshots and change behavior of presets resolutions code --- addons/docs/preset.js | 2 +- lib/core-common/src/presets.ts | 16 +- .../cra-ts-essentials_manager-dev-posix | 2 +- .../cra-ts-essentials_manager-prod-posix | 2 +- .../cra-ts-essentials_preview-dev-posix | 135 +++++++++++ .../cra-ts-essentials_preview-prod-posix | 135 +++++++++++ .../html-kitchen-sink_manager-dev-posix | 2 +- .../html-kitchen-sink_manager-prod-posix | 2 +- .../__snapshots__/vue-3-cli_manager-dev-posix | 2 +- .../vue-3-cli_manager-prod-posix | 2 +- .../__snapshots__/vue-3-cli_preview-dev-posix | 213 ++++++++++++++++++ .../vue-3-cli_preview-prod-posix | 213 ++++++++++++++++++ ...-components-kitchen-sink_manager-dev-posix | 2 +- ...components-kitchen-sink_manager-prod-posix | 2 +- 14 files changed, 713 insertions(+), 17 deletions(-) diff --git a/addons/docs/preset.js b/addons/docs/preset.js index c318823dc33..44b529b1b7f 100644 --- a/addons/docs/preset.js +++ b/addons/docs/preset.js @@ -2,7 +2,7 @@ const { findDistEsm } = require('@storybook/core-common'); const { webpack } = require('./dist/cjs/frameworks/common/preset'); function managerEntries(entry = [], options) { - return [...entry, findDistEsm(__dirname, 'register')]; + return [...entry, findDistEsm(__dirname, 'manager')]; } function config(entry = [], options = {}) { diff --git a/lib/core-common/src/presets.ts b/lib/core-common/src/presets.ts index adf8fe3193f..c4870811b66 100644 --- a/lib/core-common/src/presets.ts +++ b/lib/core-common/src/presets.ts @@ -85,6 +85,14 @@ export const resolveAddonName = (configDir: string, name: string) => { // when user provides full path, we don't need to do anything if (path) { + try { + return { + name: require.resolve(`${name}/preset`), + type: 'presets', + }; + // eslint-disable-next-line no-empty + } catch (err) {} + const managerEntry = safeResolve(`${path}/manager`) || safeResolve(`${path}/register`); const previewAnnotation = safeResolve(`${path}/preview`); @@ -106,14 +114,6 @@ export const resolveAddonName = (configDir: string, name: string) => { }; } - try { - return { - name: require.resolve(`${name}/preset`), - type: 'presets', - }; - // eslint-disable-next-line no-empty - } catch (err) {} - return { name: path, type: 'presets', diff --git a/lib/core-server/src/__snapshots__/cra-ts-essentials_manager-dev-posix b/lib/core-server/src/__snapshots__/cra-ts-essentials_manager-dev-posix index 5771b4f2d78..0c8b12d3e71 100644 --- a/lib/core-server/src/__snapshots__/cra-ts-essentials_manager-dev-posix +++ b/lib/core-server/src/__snapshots__/cra-ts-essentials_manager-dev-posix @@ -6,7 +6,7 @@ Object { "NODE_MODULES/@storybook/addon-ie11/dist/event-source-polyfill.js", "ROOT/lib/core-client/dist/esm/globals/polyfills.js", "ROOT/lib/core-client/dist/esm/manager/index.js", - "ROOT/addons/docs/register.js", + "ROOT/addons/docs/dist/esm/manager", "ROOT/addons/controls/manager.js", "ROOT/addons/actions/manager.js", "ROOT/addons/backgrounds/manager.js", diff --git a/lib/core-server/src/__snapshots__/cra-ts-essentials_manager-prod-posix b/lib/core-server/src/__snapshots__/cra-ts-essentials_manager-prod-posix index 954e7883545..e136932eb54 100644 --- a/lib/core-server/src/__snapshots__/cra-ts-essentials_manager-prod-posix +++ b/lib/core-server/src/__snapshots__/cra-ts-essentials_manager-prod-posix @@ -6,7 +6,7 @@ Object { "NODE_MODULES/@storybook/addon-ie11/dist/event-source-polyfill.js", "ROOT/lib/core-client/dist/esm/globals/polyfills.js", "ROOT/lib/core-client/dist/esm/manager/index.js", - "ROOT/addons/docs/register.js", + "ROOT/addons/docs/dist/esm/manager", "ROOT/addons/controls/manager.js", "ROOT/addons/actions/manager.js", "ROOT/addons/backgrounds/manager.js", diff --git a/lib/core-server/src/__snapshots__/cra-ts-essentials_preview-dev-posix b/lib/core-server/src/__snapshots__/cra-ts-essentials_preview-dev-posix index 91166994578..9dafbf6628f 100644 --- a/lib/core-server/src/__snapshots__/cra-ts-essentials_preview-dev-posix +++ b/lib/core-server/src/__snapshots__/cra-ts-essentials_preview-dev-posix @@ -8,6 +8,7 @@ Object { "NODE_MODULES/webpack-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined", "NODE_MODULES/@storybook/addon-ie11/dist/event-source-polyfill.js", "ROOT/storybook-init-framework-entry.js", + "ROOT/addons/docs/dist/esm/frameworks/common/config-generated-config-entry.js", "ROOT/app/react/dist/esm/client/docs/config-generated-config-entry.js", "ROOT/app/react/dist/esm/client/preview/config-generated-config-entry.js", "ROOT/addons/actions/preview.js-generated-config-entry.js", @@ -321,6 +322,140 @@ Object { }, ], }, + Object { + "include": "NODE_MODULES\\\\/acorn-jsx/", + "test": "/\\\\.js$/", + "use": Array [ + Object { + "loader": "NODE_MODULES/babel-loader/lib/index.js", + "options": Object { + "presets": Array [ + Array [ + "NODE_MODULES/@babel/preset-env/lib/index.js", + Object { + "modules": "commonjs", + }, + ], + ], + }, + }, + ], + }, + Object { + "test": "/(stories|story)\\\\.mdx$/", + "use": Array [ + Object { + "loader": "NODE_MODULES/babel-loader/lib/index.js", + "options": Object { + "babelrc": false, + "cacheDirectory": "NODE_MODULES/.cache/storybook/babel", + "configFile": false, + "overrides": Array [ + Object { + "plugins": Array [ + Array [ + "NODE_MODULES/babel-plugin-react-docgen/lib/index.js", + Object { + "DOC_GEN_COLLECTION_NAME": "STORYBOOK_REACT_CLASSES", + }, + ], + ], + "test": "/\\\\.(mjs|jsx?)$/", + }, + ], + "plugins": Array [ + Array [ + "NODE_MODULES/@babel/plugin-transform-react-jsx/lib/index.js", + Object { + "pragma": "React.createElement", + "pragmaFrag": "React.Fragment", + }, + ], + ], + "presets": Array [ + Array [ + "@babel/preset-env", + Object { + "targets": Object { + "ie": "11", + }, + }, + "storybook-addon-ie11", + ], + ], + }, + }, + Object { + "loader": "NODE_MODULES/@storybook/mdx1-csf/loader.js", + }, + ], + }, + Object { + "exclude": "/(stories|story)\\\\.mdx$/", + "test": "/\\\\.mdx$/", + "use": Array [ + Object { + "loader": "NODE_MODULES/babel-loader/lib/index.js", + "options": Object { + "babelrc": false, + "cacheDirectory": "NODE_MODULES/.cache/storybook/babel", + "configFile": false, + "overrides": Array [ + Object { + "plugins": Array [ + Array [ + "NODE_MODULES/babel-plugin-react-docgen/lib/index.js", + Object { + "DOC_GEN_COLLECTION_NAME": "STORYBOOK_REACT_CLASSES", + }, + ], + ], + "test": "/\\\\.(mjs|jsx?)$/", + }, + ], + "plugins": Array [ + Array [ + "NODE_MODULES/@babel/plugin-transform-react-jsx/lib/index.js", + Object { + "pragma": "React.createElement", + "pragmaFrag": "React.Fragment", + }, + ], + ], + "presets": Array [ + Array [ + "@babel/preset-env", + Object { + "targets": Object { + "ie": "11", + }, + }, + "storybook-addon-ie11", + ], + ], + }, + }, + Object { + "loader": "NODE_MODULES/@storybook/mdx1-csf/loader.js", + "options": Object { + "remarkPlugins": Array [ + [Function], + [Function], + ], + "skipCsf": true, + }, + }, + ], + }, + Object { + "enforce": "pre", + "loader": "ROOT/lib/source-loader/dist/cjs/index.js", + "options": Object { + "injectStoryParameters": true, + "inspectLocalDependencies": true, + }, + "test": "/\\\\.(stories|story)\\\\.[tj]sx?$/", + }, ], }, "plugins": Array [ diff --git a/lib/core-server/src/__snapshots__/cra-ts-essentials_preview-prod-posix b/lib/core-server/src/__snapshots__/cra-ts-essentials_preview-prod-posix index 97402579186..becf876d2a7 100644 --- a/lib/core-server/src/__snapshots__/cra-ts-essentials_preview-prod-posix +++ b/lib/core-server/src/__snapshots__/cra-ts-essentials_preview-prod-posix @@ -7,6 +7,7 @@ Object { "ROOT/lib/core-client/dist/esm/globals/globals.js", "NODE_MODULES/@storybook/addon-ie11/dist/event-source-polyfill.js", "ROOT/storybook-init-framework-entry.js", + "ROOT/addons/docs/dist/esm/frameworks/common/config-generated-config-entry.js", "ROOT/app/react/dist/esm/client/docs/config-generated-config-entry.js", "ROOT/app/react/dist/esm/client/preview/config-generated-config-entry.js", "ROOT/addons/actions/preview.js-generated-config-entry.js", @@ -339,6 +340,140 @@ Object { }, ], }, + Object { + "include": "NODE_MODULES\\\\/acorn-jsx/", + "test": "/\\\\.js$/", + "use": Array [ + Object { + "loader": "NODE_MODULES/babel-loader/lib/index.js", + "options": Object { + "presets": Array [ + Array [ + "NODE_MODULES/@babel/preset-env/lib/index.js", + Object { + "modules": "commonjs", + }, + ], + ], + }, + }, + ], + }, + Object { + "test": "/(stories|story)\\\\.mdx$/", + "use": Array [ + Object { + "loader": "NODE_MODULES/babel-loader/lib/index.js", + "options": Object { + "babelrc": false, + "cacheDirectory": "NODE_MODULES/.cache/storybook/babel", + "configFile": false, + "overrides": Array [ + Object { + "plugins": Array [ + Array [ + "NODE_MODULES/babel-plugin-react-docgen/lib/index.js", + Object { + "DOC_GEN_COLLECTION_NAME": "STORYBOOK_REACT_CLASSES", + }, + ], + ], + "test": "/\\\\.(mjs|jsx?)$/", + }, + ], + "plugins": Array [ + Array [ + "NODE_MODULES/@babel/plugin-transform-react-jsx/lib/index.js", + Object { + "pragma": "React.createElement", + "pragmaFrag": "React.Fragment", + }, + ], + ], + "presets": Array [ + Array [ + "@babel/preset-env", + Object { + "targets": Object { + "ie": "11", + }, + }, + "storybook-addon-ie11", + ], + ], + }, + }, + Object { + "loader": "NODE_MODULES/@storybook/mdx1-csf/loader.js", + }, + ], + }, + Object { + "exclude": "/(stories|story)\\\\.mdx$/", + "test": "/\\\\.mdx$/", + "use": Array [ + Object { + "loader": "NODE_MODULES/babel-loader/lib/index.js", + "options": Object { + "babelrc": false, + "cacheDirectory": "NODE_MODULES/.cache/storybook/babel", + "configFile": false, + "overrides": Array [ + Object { + "plugins": Array [ + Array [ + "NODE_MODULES/babel-plugin-react-docgen/lib/index.js", + Object { + "DOC_GEN_COLLECTION_NAME": "STORYBOOK_REACT_CLASSES", + }, + ], + ], + "test": "/\\\\.(mjs|jsx?)$/", + }, + ], + "plugins": Array [ + Array [ + "NODE_MODULES/@babel/plugin-transform-react-jsx/lib/index.js", + Object { + "pragma": "React.createElement", + "pragmaFrag": "React.Fragment", + }, + ], + ], + "presets": Array [ + Array [ + "@babel/preset-env", + Object { + "targets": Object { + "ie": "11", + }, + }, + "storybook-addon-ie11", + ], + ], + }, + }, + Object { + "loader": "NODE_MODULES/@storybook/mdx1-csf/loader.js", + "options": Object { + "remarkPlugins": Array [ + [Function], + [Function], + ], + "skipCsf": true, + }, + }, + ], + }, + Object { + "enforce": "pre", + "loader": "ROOT/lib/source-loader/dist/cjs/index.js", + "options": Object { + "injectStoryParameters": true, + "inspectLocalDependencies": true, + }, + "test": "/\\\\.(stories|story)\\\\.[tj]sx?$/", + }, ], }, "plugins": Array [ diff --git a/lib/core-server/src/__snapshots__/html-kitchen-sink_manager-dev-posix b/lib/core-server/src/__snapshots__/html-kitchen-sink_manager-dev-posix index 24661655329..8ec497376fc 100644 --- a/lib/core-server/src/__snapshots__/html-kitchen-sink_manager-dev-posix +++ b/lib/core-server/src/__snapshots__/html-kitchen-sink_manager-dev-posix @@ -5,7 +5,7 @@ Object { "entry": Array [ "ROOT/lib/core-client/dist/esm/globals/polyfills.js", "ROOT/lib/core-client/dist/esm/manager/index.js", - "ROOT/addons/docs/dist/esm/register", + "ROOT/addons/docs/dist/esm/manager", "ROOT/addons/a11y/manager.js", "ROOT/addons/actions/manager.js", "ROOT/addons/backgrounds/manager.js", diff --git a/lib/core-server/src/__snapshots__/html-kitchen-sink_manager-prod-posix b/lib/core-server/src/__snapshots__/html-kitchen-sink_manager-prod-posix index 92cd15e07c1..da5dfc6d7c5 100644 --- a/lib/core-server/src/__snapshots__/html-kitchen-sink_manager-prod-posix +++ b/lib/core-server/src/__snapshots__/html-kitchen-sink_manager-prod-posix @@ -5,7 +5,7 @@ Object { "entry": Array [ "ROOT/lib/core-client/dist/esm/globals/polyfills.js", "ROOT/lib/core-client/dist/esm/manager/index.js", - "ROOT/addons/docs/dist/esm/register", + "ROOT/addons/docs/dist/esm/manager", "ROOT/addons/a11y/manager.js", "ROOT/addons/actions/manager.js", "ROOT/addons/backgrounds/manager.js", diff --git a/lib/core-server/src/__snapshots__/vue-3-cli_manager-dev-posix b/lib/core-server/src/__snapshots__/vue-3-cli_manager-dev-posix index 0022ce46b81..62107770259 100644 --- a/lib/core-server/src/__snapshots__/vue-3-cli_manager-dev-posix +++ b/lib/core-server/src/__snapshots__/vue-3-cli_manager-dev-posix @@ -6,7 +6,7 @@ Object { "ROOT/lib/core-client/dist/esm/globals/polyfills.js", "ROOT/lib/core-client/dist/esm/manager/index.js", "ROOT/addons/links/manager.js", - "ROOT/addons/docs/register.js", + "ROOT/addons/docs/dist/esm/manager", "ROOT/addons/controls/manager.js", "ROOT/addons/actions/manager.js", "ROOT/addons/backgrounds/manager.js", diff --git a/lib/core-server/src/__snapshots__/vue-3-cli_manager-prod-posix b/lib/core-server/src/__snapshots__/vue-3-cli_manager-prod-posix index a28ea31a331..ade62c50525 100644 --- a/lib/core-server/src/__snapshots__/vue-3-cli_manager-prod-posix +++ b/lib/core-server/src/__snapshots__/vue-3-cli_manager-prod-posix @@ -6,7 +6,7 @@ Object { "ROOT/lib/core-client/dist/esm/globals/polyfills.js", "ROOT/lib/core-client/dist/esm/manager/index.js", "ROOT/addons/links/manager.js", - "ROOT/addons/docs/register.js", + "ROOT/addons/docs/dist/esm/manager", "ROOT/addons/controls/manager.js", "ROOT/addons/actions/manager.js", "ROOT/addons/backgrounds/manager.js", diff --git a/lib/core-server/src/__snapshots__/vue-3-cli_preview-dev-posix b/lib/core-server/src/__snapshots__/vue-3-cli_preview-dev-posix index 6724303aa12..162709f0636 100644 --- a/lib/core-server/src/__snapshots__/vue-3-cli_preview-dev-posix +++ b/lib/core-server/src/__snapshots__/vue-3-cli_preview-dev-posix @@ -7,6 +7,7 @@ Object { "ROOT/lib/core-client/dist/esm/globals/globals.js", "NODE_MODULES/webpack-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined", "ROOT/storybook-init-framework-entry.js", + "ROOT/addons/docs/dist/esm/frameworks/common/config-generated-config-entry.js", "ROOT/app/vue3/dist/esm/client/preview/config-generated-config-entry.js", "ROOT/app/vue3/dist/esm/client/docs/config-generated-config-entry.js", "ROOT/addons/interactions/dist/esm/preset/argsEnhancers.js-generated-config-entry.js", @@ -220,6 +221,218 @@ Object { }, ], }, + Object { + "include": "NODE_MODULES\\\\/acorn-jsx/", + "test": "/\\\\.js$/", + "use": Array [ + Object { + "loader": "NODE_MODULES/babel-loader/lib/index.js", + "options": Object { + "presets": Array [ + Array [ + "NODE_MODULES/@babel/preset-env/lib/index.js", + Object { + "modules": "commonjs", + }, + ], + ], + }, + }, + ], + }, + Object { + "test": "/(stories|story)\\\\.mdx$/", + "use": Array [ + Object { + "loader": "NODE_MODULES/babel-loader/lib/index.js", + "options": Object { + "babelrc": false, + "cacheDirectory": "NODE_MODULES/.cache/storybook/babel", + "configFile": false, + "plugins": Array [ + "NODE_MODULES/@babel/plugin-transform-shorthand-properties/lib/index.js", + "NODE_MODULES/@babel/plugin-transform-block-scoping/lib/index.js", + Array [ + "NODE_MODULES/@babel/plugin-proposal-decorators/lib/index.js", + Object { + "legacy": true, + }, + ], + Array [ + "NODE_MODULES/@babel/plugin-proposal-class-properties/lib/index.js", + Object { + "loose": true, + }, + ], + Array [ + "NODE_MODULES/@babel/plugin-proposal-private-property-in-object/lib/index.js", + Object { + "loose": true, + }, + ], + Array [ + "NODE_MODULES/@babel/plugin-proposal-private-methods/lib/index.js", + Object { + "loose": true, + }, + ], + "NODE_MODULES/@babel/plugin-proposal-export-default-from/lib/index.js", + "NODE_MODULES/@babel/plugin-syntax-dynamic-import/lib/index.js", + Array [ + "NODE_MODULES/@babel/plugin-proposal-object-rest-spread/lib/index.js", + Object { + "loose": true, + "useBuiltIns": true, + }, + ], + "NODE_MODULES/@babel/plugin-transform-classes/lib/index.js", + "NODE_MODULES/@babel/plugin-transform-arrow-functions/lib/index.js", + "NODE_MODULES/@babel/plugin-transform-parameters/lib/index.js", + "NODE_MODULES/@babel/plugin-transform-destructuring/lib/index.js", + "NODE_MODULES/@babel/plugin-transform-spread/lib/index.js", + "NODE_MODULES/@babel/plugin-transform-for-of/lib/index.js", + "NODE_MODULES/babel-plugin-macros/dist/index.js", + "NODE_MODULES/@babel/plugin-proposal-optional-chaining/lib/index.js", + "NODE_MODULES/@babel/plugin-proposal-nullish-coalescing-operator/lib/index.js", + Array [ + "NODE_MODULES/babel-plugin-polyfill-corejs3/lib/index.js", + Object { + "absoluteImports": "NODE_MODULES/core-js/index.js", + "method": "usage-global", + "version": "*", + }, + ], + Array [ + "NODE_MODULES/@babel/plugin-transform-react-jsx/lib/index.js", + Object { + "pragma": "React.createElement", + "pragmaFrag": "React.Fragment", + }, + ], + ], + "presets": Array [ + Array [ + "NODE_MODULES/@babel/preset-env/lib/index.js", + Object { + "loose": true, + "shippedProposals": true, + }, + ], + "NODE_MODULES/@babel/preset-typescript/lib/index.js", + ], + "sourceType": "unambiguous", + }, + }, + Object { + "loader": "NODE_MODULES/@storybook/mdx1-csf/loader.js", + }, + ], + }, + Object { + "exclude": "/(stories|story)\\\\.mdx$/", + "test": "/\\\\.mdx$/", + "use": Array [ + Object { + "loader": "NODE_MODULES/babel-loader/lib/index.js", + "options": Object { + "babelrc": false, + "cacheDirectory": "NODE_MODULES/.cache/storybook/babel", + "configFile": false, + "plugins": Array [ + "NODE_MODULES/@babel/plugin-transform-shorthand-properties/lib/index.js", + "NODE_MODULES/@babel/plugin-transform-block-scoping/lib/index.js", + Array [ + "NODE_MODULES/@babel/plugin-proposal-decorators/lib/index.js", + Object { + "legacy": true, + }, + ], + Array [ + "NODE_MODULES/@babel/plugin-proposal-class-properties/lib/index.js", + Object { + "loose": true, + }, + ], + Array [ + "NODE_MODULES/@babel/plugin-proposal-private-property-in-object/lib/index.js", + Object { + "loose": true, + }, + ], + Array [ + "NODE_MODULES/@babel/plugin-proposal-private-methods/lib/index.js", + Object { + "loose": true, + }, + ], + "NODE_MODULES/@babel/plugin-proposal-export-default-from/lib/index.js", + "NODE_MODULES/@babel/plugin-syntax-dynamic-import/lib/index.js", + Array [ + "NODE_MODULES/@babel/plugin-proposal-object-rest-spread/lib/index.js", + Object { + "loose": true, + "useBuiltIns": true, + }, + ], + "NODE_MODULES/@babel/plugin-transform-classes/lib/index.js", + "NODE_MODULES/@babel/plugin-transform-arrow-functions/lib/index.js", + "NODE_MODULES/@babel/plugin-transform-parameters/lib/index.js", + "NODE_MODULES/@babel/plugin-transform-destructuring/lib/index.js", + "NODE_MODULES/@babel/plugin-transform-spread/lib/index.js", + "NODE_MODULES/@babel/plugin-transform-for-of/lib/index.js", + "NODE_MODULES/babel-plugin-macros/dist/index.js", + "NODE_MODULES/@babel/plugin-proposal-optional-chaining/lib/index.js", + "NODE_MODULES/@babel/plugin-proposal-nullish-coalescing-operator/lib/index.js", + Array [ + "NODE_MODULES/babel-plugin-polyfill-corejs3/lib/index.js", + Object { + "absoluteImports": "NODE_MODULES/core-js/index.js", + "method": "usage-global", + "version": "*", + }, + ], + Array [ + "NODE_MODULES/@babel/plugin-transform-react-jsx/lib/index.js", + Object { + "pragma": "React.createElement", + "pragmaFrag": "React.Fragment", + }, + ], + ], + "presets": Array [ + Array [ + "NODE_MODULES/@babel/preset-env/lib/index.js", + Object { + "loose": true, + "shippedProposals": true, + }, + ], + "NODE_MODULES/@babel/preset-typescript/lib/index.js", + ], + "sourceType": "unambiguous", + }, + }, + Object { + "loader": "NODE_MODULES/@storybook/mdx1-csf/loader.js", + "options": Object { + "remarkPlugins": Array [ + [Function], + [Function], + ], + "skipCsf": true, + }, + }, + ], + }, + Object { + "enforce": "pre", + "loader": "ROOT/lib/source-loader/dist/cjs/index.js", + "options": Object { + "injectStoryParameters": true, + "inspectLocalDependencies": true, + }, + "test": "/\\\\.(stories|story)\\\\.[tj]sx?$/", + }, Object { "sideEffects": true, "test": "/\\\\.css$/", diff --git a/lib/core-server/src/__snapshots__/vue-3-cli_preview-prod-posix b/lib/core-server/src/__snapshots__/vue-3-cli_preview-prod-posix index 2a09b8995fe..e414bfb7765 100644 --- a/lib/core-server/src/__snapshots__/vue-3-cli_preview-prod-posix +++ b/lib/core-server/src/__snapshots__/vue-3-cli_preview-prod-posix @@ -6,6 +6,7 @@ Object { "ROOT/lib/core-client/dist/esm/globals/polyfills.js", "ROOT/lib/core-client/dist/esm/globals/globals.js", "ROOT/storybook-init-framework-entry.js", + "ROOT/addons/docs/dist/esm/frameworks/common/config-generated-config-entry.js", "ROOT/app/vue3/dist/esm/client/preview/config-generated-config-entry.js", "ROOT/app/vue3/dist/esm/client/docs/config-generated-config-entry.js", "ROOT/addons/interactions/dist/esm/preset/argsEnhancers.js-generated-config-entry.js", @@ -219,6 +220,218 @@ Object { }, ], }, + Object { + "include": "NODE_MODULES\\\\/acorn-jsx/", + "test": "/\\\\.js$/", + "use": Array [ + Object { + "loader": "NODE_MODULES/babel-loader/lib/index.js", + "options": Object { + "presets": Array [ + Array [ + "NODE_MODULES/@babel/preset-env/lib/index.js", + Object { + "modules": "commonjs", + }, + ], + ], + }, + }, + ], + }, + Object { + "test": "/(stories|story)\\\\.mdx$/", + "use": Array [ + Object { + "loader": "NODE_MODULES/babel-loader/lib/index.js", + "options": Object { + "babelrc": false, + "cacheDirectory": "NODE_MODULES/.cache/storybook/babel", + "configFile": false, + "plugins": Array [ + "NODE_MODULES/@babel/plugin-transform-shorthand-properties/lib/index.js", + "NODE_MODULES/@babel/plugin-transform-block-scoping/lib/index.js", + Array [ + "NODE_MODULES/@babel/plugin-proposal-decorators/lib/index.js", + Object { + "legacy": true, + }, + ], + Array [ + "NODE_MODULES/@babel/plugin-proposal-class-properties/lib/index.js", + Object { + "loose": true, + }, + ], + Array [ + "NODE_MODULES/@babel/plugin-proposal-private-property-in-object/lib/index.js", + Object { + "loose": true, + }, + ], + Array [ + "NODE_MODULES/@babel/plugin-proposal-private-methods/lib/index.js", + Object { + "loose": true, + }, + ], + "NODE_MODULES/@babel/plugin-proposal-export-default-from/lib/index.js", + "NODE_MODULES/@babel/plugin-syntax-dynamic-import/lib/index.js", + Array [ + "NODE_MODULES/@babel/plugin-proposal-object-rest-spread/lib/index.js", + Object { + "loose": true, + "useBuiltIns": true, + }, + ], + "NODE_MODULES/@babel/plugin-transform-classes/lib/index.js", + "NODE_MODULES/@babel/plugin-transform-arrow-functions/lib/index.js", + "NODE_MODULES/@babel/plugin-transform-parameters/lib/index.js", + "NODE_MODULES/@babel/plugin-transform-destructuring/lib/index.js", + "NODE_MODULES/@babel/plugin-transform-spread/lib/index.js", + "NODE_MODULES/@babel/plugin-transform-for-of/lib/index.js", + "NODE_MODULES/babel-plugin-macros/dist/index.js", + "NODE_MODULES/@babel/plugin-proposal-optional-chaining/lib/index.js", + "NODE_MODULES/@babel/plugin-proposal-nullish-coalescing-operator/lib/index.js", + Array [ + "NODE_MODULES/babel-plugin-polyfill-corejs3/lib/index.js", + Object { + "absoluteImports": "NODE_MODULES/core-js/index.js", + "method": "usage-global", + "version": "*", + }, + ], + Array [ + "NODE_MODULES/@babel/plugin-transform-react-jsx/lib/index.js", + Object { + "pragma": "React.createElement", + "pragmaFrag": "React.Fragment", + }, + ], + ], + "presets": Array [ + Array [ + "NODE_MODULES/@babel/preset-env/lib/index.js", + Object { + "loose": true, + "shippedProposals": true, + }, + ], + "NODE_MODULES/@babel/preset-typescript/lib/index.js", + ], + "sourceType": "unambiguous", + }, + }, + Object { + "loader": "NODE_MODULES/@storybook/mdx1-csf/loader.js", + }, + ], + }, + Object { + "exclude": "/(stories|story)\\\\.mdx$/", + "test": "/\\\\.mdx$/", + "use": Array [ + Object { + "loader": "NODE_MODULES/babel-loader/lib/index.js", + "options": Object { + "babelrc": false, + "cacheDirectory": "NODE_MODULES/.cache/storybook/babel", + "configFile": false, + "plugins": Array [ + "NODE_MODULES/@babel/plugin-transform-shorthand-properties/lib/index.js", + "NODE_MODULES/@babel/plugin-transform-block-scoping/lib/index.js", + Array [ + "NODE_MODULES/@babel/plugin-proposal-decorators/lib/index.js", + Object { + "legacy": true, + }, + ], + Array [ + "NODE_MODULES/@babel/plugin-proposal-class-properties/lib/index.js", + Object { + "loose": true, + }, + ], + Array [ + "NODE_MODULES/@babel/plugin-proposal-private-property-in-object/lib/index.js", + Object { + "loose": true, + }, + ], + Array [ + "NODE_MODULES/@babel/plugin-proposal-private-methods/lib/index.js", + Object { + "loose": true, + }, + ], + "NODE_MODULES/@babel/plugin-proposal-export-default-from/lib/index.js", + "NODE_MODULES/@babel/plugin-syntax-dynamic-import/lib/index.js", + Array [ + "NODE_MODULES/@babel/plugin-proposal-object-rest-spread/lib/index.js", + Object { + "loose": true, + "useBuiltIns": true, + }, + ], + "NODE_MODULES/@babel/plugin-transform-classes/lib/index.js", + "NODE_MODULES/@babel/plugin-transform-arrow-functions/lib/index.js", + "NODE_MODULES/@babel/plugin-transform-parameters/lib/index.js", + "NODE_MODULES/@babel/plugin-transform-destructuring/lib/index.js", + "NODE_MODULES/@babel/plugin-transform-spread/lib/index.js", + "NODE_MODULES/@babel/plugin-transform-for-of/lib/index.js", + "NODE_MODULES/babel-plugin-macros/dist/index.js", + "NODE_MODULES/@babel/plugin-proposal-optional-chaining/lib/index.js", + "NODE_MODULES/@babel/plugin-proposal-nullish-coalescing-operator/lib/index.js", + Array [ + "NODE_MODULES/babel-plugin-polyfill-corejs3/lib/index.js", + Object { + "absoluteImports": "NODE_MODULES/core-js/index.js", + "method": "usage-global", + "version": "*", + }, + ], + Array [ + "NODE_MODULES/@babel/plugin-transform-react-jsx/lib/index.js", + Object { + "pragma": "React.createElement", + "pragmaFrag": "React.Fragment", + }, + ], + ], + "presets": Array [ + Array [ + "NODE_MODULES/@babel/preset-env/lib/index.js", + Object { + "loose": true, + "shippedProposals": true, + }, + ], + "NODE_MODULES/@babel/preset-typescript/lib/index.js", + ], + "sourceType": "unambiguous", + }, + }, + Object { + "loader": "NODE_MODULES/@storybook/mdx1-csf/loader.js", + "options": Object { + "remarkPlugins": Array [ + [Function], + [Function], + ], + "skipCsf": true, + }, + }, + ], + }, + Object { + "enforce": "pre", + "loader": "ROOT/lib/source-loader/dist/cjs/index.js", + "options": Object { + "injectStoryParameters": true, + "inspectLocalDependencies": true, + }, + "test": "/\\\\.(stories|story)\\\\.[tj]sx?$/", + }, Object { "sideEffects": true, "test": "/\\\\.css$/", diff --git a/lib/core-server/src/__snapshots__/web-components-kitchen-sink_manager-dev-posix b/lib/core-server/src/__snapshots__/web-components-kitchen-sink_manager-dev-posix index a82fffba628..9e42f671dcb 100644 --- a/lib/core-server/src/__snapshots__/web-components-kitchen-sink_manager-dev-posix +++ b/lib/core-server/src/__snapshots__/web-components-kitchen-sink_manager-dev-posix @@ -5,7 +5,7 @@ Object { "entry": Array [ "ROOT/lib/core-client/dist/esm/globals/polyfills.js", "ROOT/lib/core-client/dist/esm/manager/index.js", - "ROOT/addons/docs/dist/esm/register", + "ROOT/addons/docs/dist/esm/manager", "ROOT/addons/controls/manager.js", "ROOT/addons/a11y/manager.js", "ROOT/addons/actions/manager.js", diff --git a/lib/core-server/src/__snapshots__/web-components-kitchen-sink_manager-prod-posix b/lib/core-server/src/__snapshots__/web-components-kitchen-sink_manager-prod-posix index 012d9acdd6e..1d0aa8234e6 100644 --- a/lib/core-server/src/__snapshots__/web-components-kitchen-sink_manager-prod-posix +++ b/lib/core-server/src/__snapshots__/web-components-kitchen-sink_manager-prod-posix @@ -5,7 +5,7 @@ Object { "entry": Array [ "ROOT/lib/core-client/dist/esm/globals/polyfills.js", "ROOT/lib/core-client/dist/esm/manager/index.js", - "ROOT/addons/docs/dist/esm/register", + "ROOT/addons/docs/dist/esm/manager", "ROOT/addons/controls/manager.js", "ROOT/addons/a11y/manager.js", "ROOT/addons/actions/manager.js", From 7e845e1ee98aa9f4991359cce201b1efe312f90f Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Fri, 18 Mar 2022 15:30:01 +0100 Subject: [PATCH 038/171] fix snapshot --- lib/core-common/src/presets.test.ts | 37 +++++++++++++++++++++++++++-- 1 file changed, 35 insertions(+), 2 deletions(-) diff --git a/lib/core-common/src/presets.test.ts b/lib/core-common/src/presets.test.ts index 40d1e5975f5..42b862b7485 100644 --- a/lib/core-common/src/presets.test.ts +++ b/lib/core-common/src/presets.test.ts @@ -438,7 +438,7 @@ describe('loadPreset', () => { const loaded = loadPreset( { name: '', - type: 'managerEntries', + type: 'virtual', framework: '@storybook/react', presets: ['@storybook/preset-typescript'], addons: ['@storybook/addon-docs'], @@ -446,7 +446,40 @@ describe('loadPreset', () => { 0, {} ); - expect(loaded).toMatchInlineSnapshot(`Array []`); + expect(loaded).toMatchInlineSnapshot(` + Array [ + Object { + "name": "@storybook/react", + "options": Object {}, + "preset": Object {}, + }, + Object { + "name": "@storybook/preset-typescript", + "options": Object {}, + "preset": Object {}, + }, + Object { + "name": "@storybook/addon-docs/preset", + "options": Object {}, + "preset": Object {}, + }, + Object { + "name": Object { + "addons": Array [ + "@storybook/addon-docs", + ], + "framework": "@storybook/react", + "name": "", + "presets": Array [ + "@storybook/preset-typescript", + ], + "type": "virtual", + }, + "options": Object {}, + "preset": Object {}, + }, + ] + `); }); it('should resolve all addons & presets in correct order', () => { From 48efd4e01b6b5b91f4c6fd0cfa978444acfe1a49 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Fri, 18 Mar 2022 15:33:07 +0100 Subject: [PATCH 039/171] fix example in comment --- lib/core-common/src/presets.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/core-common/src/presets.ts b/lib/core-common/src/presets.ts index c4870811b66..37bdf6b3b92 100644 --- a/lib/core-common/src/presets.ts +++ b/lib/core-common/src/presets.ts @@ -61,7 +61,7 @@ function resolvePresetFunction( * * Valid inputs: * - '@storybook/addon-actions/manager' - * => { type: 'managerEntries', item } + * => { type: 'virtual', item } * * - '@storybook/addon-docs/preset' * => { type: 'presets', item } From f333bb14c05b2849d88ced64e94375ceac458753 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Fri, 18 Mar 2022 15:45:22 +0100 Subject: [PATCH 040/171] add babel-loader as a normal dependency --- addons/docs/package.json | 17 +++-------------- addons/docs/src/frameworks/common/preset.ts | 11 +---------- yarn.lock | 4 ---- 3 files changed, 4 insertions(+), 28 deletions(-) diff --git a/addons/docs/package.json b/addons/docs/package.json index 10fceb90674..2f14f5f8b19 100644 --- a/addons/docs/package.json +++ b/addons/docs/package.json @@ -73,6 +73,7 @@ "@storybook/source-loader": "6.5.0-alpha.48", "@storybook/store": "6.5.0-alpha.48", "@storybook/theming": "6.5.0-alpha.48", + "babel-loader": "^8.0.0", "core-js": "^3.8.2", "fast-deep-equal": "^3.1.3", "global": "^4.4.0", @@ -86,23 +87,14 @@ "devDependencies": { "@babel/core": "^7.12.10", "@storybook/mdx2-csf": "canary", - "@types/util-deprecate": "^1.0.0", - "babel-loader": "^8.0.0", - "webpack": "4" + "@types/util-deprecate": "^1.0.0" }, "peerDependencies": { "@storybook/mdx2-csf": "*", "react": "^16.8.0 || ^17.0.0", - "react-dom": "^16.8.0 || ^17.0.0", - "webpack": "*" + "react-dom": "^16.8.0 || ^17.0.0" }, "peerDependenciesMeta": { - "@storybook/builder-webpack4": { - "optional": true - }, - "@storybook/builder-webpack5": { - "optional": true - }, "@storybook/mdx2-csf": { "optional": true }, @@ -111,9 +103,6 @@ }, "react-dom": { "optional": true - }, - "webpack": { - "optional": true } }, "publishConfig": { diff --git a/addons/docs/src/frameworks/common/preset.ts b/addons/docs/src/frameworks/common/preset.ts index ab7f02c1976..ddfd2bc0ebe 100644 --- a/addons/docs/src/frameworks/common/preset.ts +++ b/addons/docs/src/frameworks/common/preset.ts @@ -38,16 +38,7 @@ export async function webpack( typeof createCompiler >[0] */ ) { - const { builder = 'webpack4' } = await options.presets.apply<{ - builder: BuilderConfig; - }>('core', {} as any); - - const builderName = typeof builder === 'string' ? builder : builder.name; - const resolvedBabelLoader = require.resolve('babel-loader', { - paths: builderName.match(/^webpack(4|5)$/) - ? [require.resolve(`@storybook/builder-${builderName}`)] - : [builderName], - }); + const resolvedBabelLoader = require.resolve('babel-loader'); const { module = {} } = webpackConfig; diff --git a/yarn.lock b/yarn.lock index 7f956c874ab..64ef5aed1c7 100644 --- a/yarn.lock +++ b/yarn.lock @@ -6358,10 +6358,6 @@ __metadata: react-dom: ^16.8.0 || ^17.0.0 webpack: "*" peerDependenciesMeta: - "@storybook/builder-webpack4": - optional: true - "@storybook/builder-webpack5": - optional: true "@storybook/mdx2-csf": optional: true react: From 5222fae4142548bf31e9c8e05607d95f8ade21ce Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Fri, 18 Mar 2022 15:46:34 +0100 Subject: [PATCH 041/171] fix lockfile --- yarn.lock | 4 ---- 1 file changed, 4 deletions(-) diff --git a/yarn.lock b/yarn.lock index 64ef5aed1c7..abf19680ff8 100644 --- a/yarn.lock +++ b/yarn.lock @@ -6351,12 +6351,10 @@ __metadata: remark-slug: ^6.0.0 ts-dedent: ^2.0.0 util-deprecate: ^1.0.2 - webpack: 4 peerDependencies: "@storybook/mdx2-csf": "*" react: ^16.8.0 || ^17.0.0 react-dom: ^16.8.0 || ^17.0.0 - webpack: "*" peerDependenciesMeta: "@storybook/mdx2-csf": optional: true @@ -6364,8 +6362,6 @@ __metadata: optional: true react-dom: optional: true - webpack: - optional: true languageName: unknown linkType: soft From 48442bed75fbc1799ee893c593df41799abba88f Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Fri, 18 Mar 2022 23:10:43 +0800 Subject: [PATCH 042/171] Fix viewport main/module/types settings --- addons/viewport/package.json | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/addons/viewport/package.json b/addons/viewport/package.json index 4f78ec04fce..56b31576c20 100644 --- a/addons/viewport/package.json +++ b/addons/viewport/package.json @@ -22,9 +22,9 @@ "url": "https://opencollective.com/storybook" }, "license": "MIT", - "main": "dist/cjs/preview.js", - "module": "dist/esm/preview.js", - "types": "dist/ts3.9/preview.d.ts", + "main": "dist/cjs/manager.js", + "module": "dist/esm/manager.js", + "types": "dist/ts3.9/manager.d.ts", "typesVersions": { "<3.8": { "dist/ts3.9/*": [ From 4c50f40448cbc45dcbbf3435ab158272a3d877ce Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Fri, 18 Mar 2022 16:14:38 +0100 Subject: [PATCH 043/171] Revert "remove unused file" This reverts commit 5c1ffe79b0ae638934e4694345164faa34688c40. --- addons/viewport/src/preview.ts | 1 + 1 file changed, 1 insertion(+) create mode 100644 addons/viewport/src/preview.ts diff --git a/addons/viewport/src/preview.ts b/addons/viewport/src/preview.ts new file mode 100644 index 00000000000..05f32144967 --- /dev/null +++ b/addons/viewport/src/preview.ts @@ -0,0 +1 @@ +export { INITIAL_VIEWPORTS, DEFAULT_VIEWPORT, MINIMAL_VIEWPORTS } from './defaults'; From 62efca6e929407cfbfcbd1c2a738859ab07a0a57 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Fri, 18 Mar 2022 16:15:13 +0100 Subject: [PATCH 044/171] Revert "Fix viewport main/module/types settings" This reverts commit 48442bed75fbc1799ee893c593df41799abba88f. --- addons/viewport/package.json | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/addons/viewport/package.json b/addons/viewport/package.json index 56b31576c20..4f78ec04fce 100644 --- a/addons/viewport/package.json +++ b/addons/viewport/package.json @@ -22,9 +22,9 @@ "url": "https://opencollective.com/storybook" }, "license": "MIT", - "main": "dist/cjs/manager.js", - "module": "dist/esm/manager.js", - "types": "dist/ts3.9/manager.d.ts", + "main": "dist/cjs/preview.js", + "module": "dist/esm/preview.js", + "types": "dist/ts3.9/preview.d.ts", "typesVersions": { "<3.8": { "dist/ts3.9/*": [ From 21aeea05e6e200caf6d54e0e41d1b81664dc48f1 Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Sat, 19 Mar 2022 01:46:34 +0800 Subject: [PATCH 045/171] Fix deepscan --- addons/docs/src/frameworks/common/preset.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/addons/docs/src/frameworks/common/preset.ts b/addons/docs/src/frameworks/common/preset.ts index ddfd2bc0ebe..b6cb10d7e2b 100644 --- a/addons/docs/src/frameworks/common/preset.ts +++ b/addons/docs/src/frameworks/common/preset.ts @@ -3,7 +3,7 @@ import remarkSlug from 'remark-slug'; import remarkExternalLinks from 'remark-external-links'; import global from 'global'; -import type { BuilderConfig, Options } from '@storybook/core-common'; +import type { Options } from '@storybook/core-common'; import { logger } from '@storybook/node-logger'; // for frameworks that are not working with react, we need to configure From 140cc3dae2bf4053ff9acae59278414a29d19db2 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Mon, 21 Mar 2022 09:27:56 +0100 Subject: [PATCH 046/171] swap the spread of values from config & previewAnnotation so the newer comes last --- lib/builder-webpack4/src/preview/iframe-webpack.config.ts | 2 +- lib/builder-webpack5/src/preview/iframe-webpack.config.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/lib/builder-webpack4/src/preview/iframe-webpack.config.ts b/lib/builder-webpack4/src/preview/iframe-webpack.config.ts index 6d14bafafa3..65c60050464 100644 --- a/lib/builder-webpack4/src/preview/iframe-webpack.config.ts +++ b/lib/builder-webpack4/src/preview/iframe-webpack.config.ts @@ -80,8 +80,8 @@ export default async (options: Options & Record): Promise): Promise Date: Mon, 21 Mar 2022 13:51:23 +0100 Subject: [PATCH 047/171] change & simplify & fix the preset resolution --- lib/core-common/src/presets.test.ts | 94 +++++++++--- lib/core-common/src/presets.ts | 139 +++++++----------- lib/core-common/src/utils/safeResolve.ts | 17 +++ .../cra-ts-essentials_manager-dev-posix | 6 + .../cra-ts-essentials_manager-prod-posix | 6 + .../cra-ts-essentials_preview-dev-posix | 6 +- .../cra-ts-essentials_preview-prod-posix | 6 +- .../html-kitchen-sink_manager-dev-posix | 7 + .../html-kitchen-sink_manager-prod-posix | 7 + .../html-kitchen-sink_preview-dev-posix | 6 +- .../html-kitchen-sink_preview-prod-posix | 6 +- .../__snapshots__/vue-3-cli_manager-dev-posix | 8 + .../vue-3-cli_manager-prod-posix | 8 + .../__snapshots__/vue-3-cli_preview-dev-posix | 8 +- .../vue-3-cli_preview-prod-posix | 8 +- ...-components-kitchen-sink_manager-dev-posix | 7 + ...components-kitchen-sink_manager-prod-posix | 7 + ...-components-kitchen-sink_preview-dev-posix | 8 +- ...components-kitchen-sink_preview-prod-posix | 8 +- 19 files changed, 224 insertions(+), 138 deletions(-) create mode 100644 lib/core-common/src/utils/safeResolve.ts diff --git a/lib/core-common/src/presets.test.ts b/lib/core-common/src/presets.test.ts index 42b862b7485..25a28c12d83 100644 --- a/lib/core-common/src/presets.test.ts +++ b/lib/core-common/src/presets.test.ts @@ -17,7 +17,7 @@ jest.mock('@storybook/node-logger', () => ({ }, })); -jest.mock('resolve-from', () => (l: any, name: string) => { +jest.mock('./utils/safeResolve', () => { const KNOWN_FILES = [ '@storybook/addon-actions/manager', '@storybook/addon-actions/register', @@ -25,6 +25,7 @@ jest.mock('resolve-from', () => (l: any, name: string) => { './local/addons', '/absolute/preset', '/absolute/addons', + '@storybook/addon-docs', '@storybook/addon-docs/preset', '@storybook/addon-essentials', '@storybook/addon-knobs/manager', @@ -33,14 +34,29 @@ jest.mock('resolve-from', () => (l: any, name: string) => { '@storybook/preset-create-react-app', '@storybook/preset-typescript', 'addon-bar/preset.js', + 'addon-bar', 'addon-baz/register.js', 'addon-foo/register.js', ]; - if (KNOWN_FILES.includes(name)) { - return name; - } - throw new Error(`cannot resolve ${name}`); + return { + safeResolveFrom: jest.fn((l: any, name: string) => { + if (KNOWN_FILES.includes(name)) { + return name; + } + return undefined; + }), + safeResolve: jest.fn((name: string) => { + if (KNOWN_FILES.includes(name)) { + return name; + } + try { + return require.resolve(name); + } catch (e) { + return undefined; + } + }), + }; }); describe('presets', () => { @@ -404,7 +420,7 @@ describe('resolveAddonName', () => { }); it('should resolve presets', () => { - expect(resolveAddonName({}, '@storybook/addon-docs')).toEqual({ + expect(resolveAddonName({}, '@storybook/addon-docs/preset')).toEqual({ name: '@storybook/addon-docs/preset', type: 'presets', }); @@ -428,7 +444,7 @@ describe('loadPreset', () => { mockPreset('@storybook/addon-docs/preset', {}); mockPreset('@storybook/addon-actions/register', {}); mockPreset('addon-foo/register.js', {}); - mockPreset('addon-bar/preset', {}); + mockPreset('addon-bar', {}); mockPreset('addon-baz/register.js', {}); mockPreset('@storybook/addon-notes/register-panel', {}); @@ -441,7 +457,7 @@ describe('loadPreset', () => { type: 'virtual', framework: '@storybook/react', presets: ['@storybook/preset-typescript'], - addons: ['@storybook/addon-docs'], + addons: ['@storybook/addon-docs/preset'], }, 0, {} @@ -458,6 +474,43 @@ describe('loadPreset', () => { "options": Object {}, "preset": Object {}, }, + Object { + "name": "/Users/me/Projects/Storybook/core/app/react/dist/cjs/server/framework-preset-react.js", + "options": Object {}, + "preset": Object { + "babel": [Function], + "babelDefault": [Function], + "webpackFinal": [Function], + }, + }, + Object { + "name": "/Users/me/Projects/Storybook/core/app/react/dist/cjs/server/framework-preset-cra.js", + "options": Object {}, + "preset": Object { + "webpackFinal": [Function], + }, + }, + Object { + "name": "/Users/me/Projects/Storybook/core/app/react/dist/cjs/server/framework-preset-react-docs.js", + "options": Object {}, + "preset": Object { + "babel": [Function], + "config": [Function], + "webpackFinal": [Function], + }, + }, + Object { + "name": "/Users/me/Projects/Storybook/core/app/react/preset.js", + "options": Object {}, + "preset": Object { + "config": [Function], + }, + }, + Object { + "name": "@storybook/react", + "options": Object {}, + "preset": Object {}, + }, Object { "name": "@storybook/addon-docs/preset", "options": Object {}, @@ -466,7 +519,7 @@ describe('loadPreset', () => { Object { "name": Object { "addons": Array [ - "@storybook/addon-docs", + "@storybook/addon-docs/preset", ], "framework": "@storybook/react", "name": "", @@ -489,11 +542,11 @@ describe('loadPreset', () => { type: 'virtual', presets: ['@storybook/preset-typescript'], addons: [ - '@storybook/addon-docs', + '@storybook/addon-docs/preset', '@storybook/addon-actions/register', 'addon-foo/register.js', 'addon-bar', - 'addon-baz/register.tsx', + 'addon-baz/register.js', '@storybook/addon-notes/register-panel', ], }, @@ -525,17 +578,16 @@ describe('loadPreset', () => { managerEntries: ['addon-foo/register.js'], }, }, - // should be there, but some file mocking problem is causing it to not resolve - // { - // name: 'addon-bar', - // options: {}, - // preset: {}, - // }, { - name: 'addon-baz/register.tsx', + name: 'addon-bar', + options: {}, + preset: {}, + }, + { + name: 'addon-baz/register.js', options: {}, preset: { - managerEntries: ['addon-baz/register.tsx'], + managerEntries: ['addon-baz/register.js'], }, }, { @@ -549,11 +601,11 @@ describe('loadPreset', () => { name: { presets: ['@storybook/preset-typescript'], addons: [ - '@storybook/addon-docs', + '@storybook/addon-docs/preset', '@storybook/addon-actions/register', 'addon-foo/register.js', 'addon-bar', - 'addon-baz/register.tsx', + 'addon-baz/register.js', '@storybook/addon-notes/register-panel', ], name: '', diff --git a/lib/core-common/src/presets.ts b/lib/core-common/src/presets.ts index 37bdf6b3b92..de52105fd99 100644 --- a/lib/core-common/src/presets.ts +++ b/lib/core-common/src/presets.ts @@ -1,7 +1,6 @@ import dedent from 'ts-dedent'; import { resolve } from 'path'; import { logger } from '@storybook/node-logger'; -import resolveFrom from 'resolve-from'; import { CLIOptions, LoadedPreset, @@ -12,6 +11,7 @@ import { } from './types'; import { loadCustomPresets } from './utils/load-custom-presets'; import { serverRequire } from './utils/interpret-require'; +import { safeResolve, safeResolveFrom } from './utils/safeResolve'; const isObject = (val: unknown): val is Record => val != null && typeof val === 'object' && Array.isArray(val) === false; @@ -24,21 +24,6 @@ export function filterPresetsConfig(presetsConfig: PresetConfig[]): PresetConfig }); } -const safeResolveFrom = (path: string, file: string) => { - try { - return resolveFrom(path, file); - } catch (e) { - return false; - } -}; -const safeResolve = (file: string) => { - try { - return require.resolve(file); - } catch (e) { - return false; - } -}; - function resolvePresetFunction( input: T[] | Function, presetOptions: any, @@ -72,77 +57,62 @@ function resolvePresetFunction( * - { name: '@storybook/addon-docs(/preset)?', options: { ... } } * => { type: 'presets', item: { name: '@storybook/addon-docs/preset', options } } */ -export const resolveAddonName = (configDir: string, name: string) => { - let path; +interface ResolvedAddonPreset { + type: 'presets'; + name: string; +} +interface ResolvedAddonVirtual { + type: 'virtual'; + name: string; + managerEntries?: string[]; + previewAnnotations?: string[]; + presets?: string[]; +} - if (name.startsWith('.')) { - path = resolveFrom(configDir, name); - } else if (name.startsWith('/')) { - path = name; - } else if (name.match(/\/(preset|manager|register(-panel)?)(\.(js|ts|tsx|jsx))?$/)) { - path = name; - } - - // when user provides full path, we don't need to do anything - if (path) { - try { - return { - name: require.resolve(`${name}/preset`), - type: 'presets', - }; - // eslint-disable-next-line no-empty - } catch (err) {} - - const managerEntry = safeResolve(`${path}/manager`) || safeResolve(`${path}/register`); - const previewAnnotation = safeResolve(`${path}/preview`); - - if (managerEntry || previewAnnotation) { - return { - name: `${path}_virtual`, - managerEntries: [managerEntry], - previewAnnotations: [previewAnnotation], - type: 'virtual', - }; - } - - // Accept `manager`, `manager.js`, `register`, `register.js`, `require.resolve('foo/manager'), `register-panel` - if (path.match(/(manager|register(-panel)?)(\.(js|ts|tsx|jsx))?$/)) { - return { - name: path, - managerEntries: [path], - type: 'virtual', - }; - } +export const resolveAddonName = ( + configDir: string, + name: string +): ResolvedAddonPreset | ResolvedAddonVirtual => { + const r = name.startsWith('/') ? safeResolve : safeResolveFrom.bind(null, configDir); + const resolved = r(name); + if (name.match(/\/(manager|register(-panel)?)(\.(js|ts|tsx|jsx))?$/)) { return { - name: path, - type: 'presets', - }; - } - - try { - return { - name: resolveFrom(configDir, `${name}/preset`), - type: 'presets', - }; - // eslint-disable-next-line no-empty - } catch (err) {} - - const managerEntry = - safeResolveFrom(configDir, `${name}/manager`) || safeResolveFrom(configDir, `${name}/register`); - const previewAnnotation = safeResolveFrom(configDir, `${name}/preview`); - if (managerEntry || previewAnnotation) { - return { - name: `${name}_virtual`, - managerEntries: [managerEntry], - previewAnnotations: [previewAnnotation], type: 'virtual', + name, + managerEntries: [resolved], + }; + } + if (name.match(/\/(preset)(\.(js|ts|tsx|jsx))?$/)) { + return { + type: 'presets', + name: resolved, + }; + } + + const path = name; + // when user provides full path, we don't need to do anything + const managerFile = safeResolve(`${path}/manager`); + const registerFile = safeResolve(`${path}/register`) || safeResolve(`${path}/register-panel`); + const previewFile = safeResolve(`${path}/preview`); + const presetFile = safeResolve(`${path}/preset`); + + if (managerFile || registerFile || previewFile || presetFile) { + return { + type: 'virtual', + name: path, + // register file is the old way of registering addons + ...(managerFile || registerFile + ? { managerEntries: [managerFile, !presetFile && registerFile].filter(Boolean) } + : {}), + ...(previewFile ? { previewAnnotations: [previewFile] } : {}), + ...(presetFile ? { presets: [presetFile] } : {}), }; } return { - name: resolveFrom(configDir, name), type: 'presets', + name: resolved, }; }; @@ -154,19 +124,10 @@ const map = const { name } = resolveAddonName(configDir, item.name); return { ...item, name }; } - const { name, managerEntries, previewAnnotations, type } = resolveAddonName(configDir, item); - if (type === 'virtual') { - return { - name, - type, - ...(managerEntries ? { managerEntries } : {}), - ...(previewAnnotations ? { previewAnnotations } : {}), - }; - } - return resolveAddonName(configDir, name); + return resolveAddonName(configDir, item); } catch (err) { logger.error( - `Addon value should end in /manager or /register OR it should be a valid preset https://storybook.js.org/docs/react/addons/writing-presets/\n${item}` + `Addon value should end in /manager or /preview or /register OR it should be a valid preset https://storybook.js.org/docs/react/addons/writing-presets/\n${item}` ); } return undefined; diff --git a/lib/core-common/src/utils/safeResolve.ts b/lib/core-common/src/utils/safeResolve.ts new file mode 100644 index 00000000000..a1d5684e45b --- /dev/null +++ b/lib/core-common/src/utils/safeResolve.ts @@ -0,0 +1,17 @@ +import resolveFrom from 'resolve-from'; + +export const safeResolveFrom = (path: string, file: string) => { + try { + return resolveFrom(path, file); + } catch (e) { + return undefined; + } +}; + +export const safeResolve = (file: string) => { + try { + return require.resolve(file); + } catch (e) { + return undefined; + } +}; diff --git a/lib/core-server/src/__snapshots__/cra-ts-essentials_manager-dev-posix b/lib/core-server/src/__snapshots__/cra-ts-essentials_manager-dev-posix index 0c8b12d3e71..a36ef6e6ff2 100644 --- a/lib/core-server/src/__snapshots__/cra-ts-essentials_manager-dev-posix +++ b/lib/core-server/src/__snapshots__/cra-ts-essentials_manager-dev-posix @@ -8,11 +8,17 @@ Object { "ROOT/lib/core-client/dist/esm/manager/index.js", "ROOT/addons/docs/dist/esm/manager", "ROOT/addons/controls/manager.js", + "ROOT/addons/controls/register.js", "ROOT/addons/actions/manager.js", + "ROOT/addons/actions/register.js", "ROOT/addons/backgrounds/manager.js", + "ROOT/addons/backgrounds/register.js", "ROOT/addons/toolbars/manager.js", + "ROOT/addons/toolbars/register.js", "ROOT/addons/measure/manager.js", + "ROOT/addons/measure/register.js", "ROOT/addons/outline/manager.js", + "ROOT/addons/outline/register.js", ], "keys": Array [ "name", diff --git a/lib/core-server/src/__snapshots__/cra-ts-essentials_manager-prod-posix b/lib/core-server/src/__snapshots__/cra-ts-essentials_manager-prod-posix index e136932eb54..786da535d7a 100644 --- a/lib/core-server/src/__snapshots__/cra-ts-essentials_manager-prod-posix +++ b/lib/core-server/src/__snapshots__/cra-ts-essentials_manager-prod-posix @@ -8,11 +8,17 @@ Object { "ROOT/lib/core-client/dist/esm/manager/index.js", "ROOT/addons/docs/dist/esm/manager", "ROOT/addons/controls/manager.js", + "ROOT/addons/controls/register.js", "ROOT/addons/actions/manager.js", + "ROOT/addons/actions/register.js", "ROOT/addons/backgrounds/manager.js", + "ROOT/addons/backgrounds/register.js", "ROOT/addons/toolbars/manager.js", + "ROOT/addons/toolbars/register.js", "ROOT/addons/measure/manager.js", + "ROOT/addons/measure/register.js", "ROOT/addons/outline/manager.js", + "ROOT/addons/outline/register.js", ], "keys": Array [ "name", diff --git a/lib/core-server/src/__snapshots__/cra-ts-essentials_preview-dev-posix b/lib/core-server/src/__snapshots__/cra-ts-essentials_preview-dev-posix index 9dafbf6628f..1bef212e13b 100644 --- a/lib/core-server/src/__snapshots__/cra-ts-essentials_preview-dev-posix +++ b/lib/core-server/src/__snapshots__/cra-ts-essentials_preview-dev-posix @@ -8,13 +8,13 @@ Object { "NODE_MODULES/webpack-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined", "NODE_MODULES/@storybook/addon-ie11/dist/event-source-polyfill.js", "ROOT/storybook-init-framework-entry.js", - "ROOT/addons/docs/dist/esm/frameworks/common/config-generated-config-entry.js", - "ROOT/app/react/dist/esm/client/docs/config-generated-config-entry.js", - "ROOT/app/react/dist/esm/client/preview/config-generated-config-entry.js", "ROOT/addons/actions/preview.js-generated-config-entry.js", "ROOT/addons/backgrounds/preview.js-generated-config-entry.js", "ROOT/addons/measure/preview.js-generated-config-entry.js", "ROOT/addons/outline/preview.js-generated-config-entry.js", + "ROOT/addons/docs/dist/esm/frameworks/common/config-generated-config-entry.js", + "ROOT/app/react/dist/esm/client/docs/config-generated-config-entry.js", + "ROOT/app/react/dist/esm/client/preview/config-generated-config-entry.js", "ROOT/examples/cra-ts-essentials/.storybook/preview.js-generated-config-entry.js", "ROOT/generated-stories-entry.js", ], diff --git a/lib/core-server/src/__snapshots__/cra-ts-essentials_preview-prod-posix b/lib/core-server/src/__snapshots__/cra-ts-essentials_preview-prod-posix index becf876d2a7..b2aef3d488b 100644 --- a/lib/core-server/src/__snapshots__/cra-ts-essentials_preview-prod-posix +++ b/lib/core-server/src/__snapshots__/cra-ts-essentials_preview-prod-posix @@ -7,13 +7,13 @@ Object { "ROOT/lib/core-client/dist/esm/globals/globals.js", "NODE_MODULES/@storybook/addon-ie11/dist/event-source-polyfill.js", "ROOT/storybook-init-framework-entry.js", - "ROOT/addons/docs/dist/esm/frameworks/common/config-generated-config-entry.js", - "ROOT/app/react/dist/esm/client/docs/config-generated-config-entry.js", - "ROOT/app/react/dist/esm/client/preview/config-generated-config-entry.js", "ROOT/addons/actions/preview.js-generated-config-entry.js", "ROOT/addons/backgrounds/preview.js-generated-config-entry.js", "ROOT/addons/measure/preview.js-generated-config-entry.js", "ROOT/addons/outline/preview.js-generated-config-entry.js", + "ROOT/addons/docs/dist/esm/frameworks/common/config-generated-config-entry.js", + "ROOT/app/react/dist/esm/client/docs/config-generated-config-entry.js", + "ROOT/app/react/dist/esm/client/preview/config-generated-config-entry.js", "ROOT/examples/cra-ts-essentials/.storybook/preview.js-generated-config-entry.js", "ROOT/generated-stories-entry.js", ], diff --git a/lib/core-server/src/__snapshots__/html-kitchen-sink_manager-dev-posix b/lib/core-server/src/__snapshots__/html-kitchen-sink_manager-dev-posix index 8ec497376fc..197b1899749 100644 --- a/lib/core-server/src/__snapshots__/html-kitchen-sink_manager-dev-posix +++ b/lib/core-server/src/__snapshots__/html-kitchen-sink_manager-dev-posix @@ -7,13 +7,20 @@ Object { "ROOT/lib/core-client/dist/esm/manager/index.js", "ROOT/addons/docs/dist/esm/manager", "ROOT/addons/a11y/manager.js", + "ROOT/addons/a11y/register.js", "ROOT/addons/actions/manager.js", + "ROOT/addons/actions/register.js", "ROOT/addons/backgrounds/manager.js", + "ROOT/addons/backgrounds/register.js", "ROOT/addons/controls/manager.js", + "ROOT/addons/controls/register.js", "ROOT/addons/jest/manager.js", + "ROOT/addons/jest/register.js", "ROOT/addons/links/manager.js", + "ROOT/addons/links/register.js", "ROOT/addons/storysource/dist/esm/manager.js", "ROOT/addons/viewport/manager.js", + "ROOT/addons/viewport/register.js", ], "keys": Array [ "name", diff --git a/lib/core-server/src/__snapshots__/html-kitchen-sink_manager-prod-posix b/lib/core-server/src/__snapshots__/html-kitchen-sink_manager-prod-posix index da5dfc6d7c5..1110f7a5218 100644 --- a/lib/core-server/src/__snapshots__/html-kitchen-sink_manager-prod-posix +++ b/lib/core-server/src/__snapshots__/html-kitchen-sink_manager-prod-posix @@ -7,13 +7,20 @@ Object { "ROOT/lib/core-client/dist/esm/manager/index.js", "ROOT/addons/docs/dist/esm/manager", "ROOT/addons/a11y/manager.js", + "ROOT/addons/a11y/register.js", "ROOT/addons/actions/manager.js", + "ROOT/addons/actions/register.js", "ROOT/addons/backgrounds/manager.js", + "ROOT/addons/backgrounds/register.js", "ROOT/addons/controls/manager.js", + "ROOT/addons/controls/register.js", "ROOT/addons/jest/manager.js", + "ROOT/addons/jest/register.js", "ROOT/addons/links/manager.js", + "ROOT/addons/links/register.js", "ROOT/addons/storysource/dist/esm/manager.js", "ROOT/addons/viewport/manager.js", + "ROOT/addons/viewport/register.js", ], "keys": Array [ "name", diff --git a/lib/core-server/src/__snapshots__/html-kitchen-sink_preview-dev-posix b/lib/core-server/src/__snapshots__/html-kitchen-sink_preview-dev-posix index cca26595edd..630f4f4a5db 100644 --- a/lib/core-server/src/__snapshots__/html-kitchen-sink_preview-dev-posix +++ b/lib/core-server/src/__snapshots__/html-kitchen-sink_preview-dev-posix @@ -7,13 +7,13 @@ Object { "ROOT/lib/core-client/dist/esm/globals/globals.js", "NODE_MODULES/webpack-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined", "ROOT/storybook-init-framework-entry.js", - "ROOT/addons/docs/dist/esm/frameworks/common/config-generated-config-entry.js", - "ROOT/app/html/dist/esm/client/preview/config-generated-config-entry.js", - "ROOT/app/html/dist/esm/client/docs/config-generated-config-entry.js", "ROOT/addons/a11y/preview.js-generated-config-entry.js", "ROOT/addons/actions/preview.js-generated-config-entry.js", "ROOT/addons/backgrounds/preview.js-generated-config-entry.js", "ROOT/addons/links/preview.js-generated-config-entry.js", + "ROOT/addons/docs/dist/esm/frameworks/common/config-generated-config-entry.js", + "ROOT/app/html/dist/esm/client/preview/config-generated-config-entry.js", + "ROOT/app/html/dist/esm/client/docs/config-generated-config-entry.js", "ROOT/examples/html-kitchen-sink/.storybook/preview.js-generated-config-entry.js", "ROOT/generated-stories-entry.js", ], diff --git a/lib/core-server/src/__snapshots__/html-kitchen-sink_preview-prod-posix b/lib/core-server/src/__snapshots__/html-kitchen-sink_preview-prod-posix index e345873a615..824d6a0adc9 100644 --- a/lib/core-server/src/__snapshots__/html-kitchen-sink_preview-prod-posix +++ b/lib/core-server/src/__snapshots__/html-kitchen-sink_preview-prod-posix @@ -6,13 +6,13 @@ Object { "ROOT/lib/core-client/dist/esm/globals/polyfills.js", "ROOT/lib/core-client/dist/esm/globals/globals.js", "ROOT/storybook-init-framework-entry.js", - "ROOT/addons/docs/dist/esm/frameworks/common/config-generated-config-entry.js", - "ROOT/app/html/dist/esm/client/preview/config-generated-config-entry.js", - "ROOT/app/html/dist/esm/client/docs/config-generated-config-entry.js", "ROOT/addons/a11y/preview.js-generated-config-entry.js", "ROOT/addons/actions/preview.js-generated-config-entry.js", "ROOT/addons/backgrounds/preview.js-generated-config-entry.js", "ROOT/addons/links/preview.js-generated-config-entry.js", + "ROOT/addons/docs/dist/esm/frameworks/common/config-generated-config-entry.js", + "ROOT/app/html/dist/esm/client/preview/config-generated-config-entry.js", + "ROOT/app/html/dist/esm/client/docs/config-generated-config-entry.js", "ROOT/examples/html-kitchen-sink/.storybook/preview.js-generated-config-entry.js", "ROOT/generated-stories-entry.js", ], diff --git a/lib/core-server/src/__snapshots__/vue-3-cli_manager-dev-posix b/lib/core-server/src/__snapshots__/vue-3-cli_manager-dev-posix index 62107770259..3f744a82fff 100644 --- a/lib/core-server/src/__snapshots__/vue-3-cli_manager-dev-posix +++ b/lib/core-server/src/__snapshots__/vue-3-cli_manager-dev-posix @@ -6,14 +6,22 @@ Object { "ROOT/lib/core-client/dist/esm/globals/polyfills.js", "ROOT/lib/core-client/dist/esm/manager/index.js", "ROOT/addons/links/manager.js", + "ROOT/addons/links/register.js", "ROOT/addons/docs/dist/esm/manager", "ROOT/addons/controls/manager.js", + "ROOT/addons/controls/register.js", "ROOT/addons/actions/manager.js", + "ROOT/addons/actions/register.js", "ROOT/addons/backgrounds/manager.js", + "ROOT/addons/backgrounds/register.js", "ROOT/addons/viewport/manager.js", + "ROOT/addons/viewport/register.js", "ROOT/addons/toolbars/manager.js", + "ROOT/addons/toolbars/register.js", "ROOT/addons/measure/manager.js", + "ROOT/addons/measure/register.js", "ROOT/addons/outline/manager.js", + "ROOT/addons/outline/register.js", "ROOT/addons/interactions/dist/esm/manager.js", ], "keys": Array [ diff --git a/lib/core-server/src/__snapshots__/vue-3-cli_manager-prod-posix b/lib/core-server/src/__snapshots__/vue-3-cli_manager-prod-posix index ade62c50525..66e1f6ba17c 100644 --- a/lib/core-server/src/__snapshots__/vue-3-cli_manager-prod-posix +++ b/lib/core-server/src/__snapshots__/vue-3-cli_manager-prod-posix @@ -6,14 +6,22 @@ Object { "ROOT/lib/core-client/dist/esm/globals/polyfills.js", "ROOT/lib/core-client/dist/esm/manager/index.js", "ROOT/addons/links/manager.js", + "ROOT/addons/links/register.js", "ROOT/addons/docs/dist/esm/manager", "ROOT/addons/controls/manager.js", + "ROOT/addons/controls/register.js", "ROOT/addons/actions/manager.js", + "ROOT/addons/actions/register.js", "ROOT/addons/backgrounds/manager.js", + "ROOT/addons/backgrounds/register.js", "ROOT/addons/viewport/manager.js", + "ROOT/addons/viewport/register.js", "ROOT/addons/toolbars/manager.js", + "ROOT/addons/toolbars/register.js", "ROOT/addons/measure/manager.js", + "ROOT/addons/measure/register.js", "ROOT/addons/outline/manager.js", + "ROOT/addons/outline/register.js", "ROOT/addons/interactions/dist/esm/manager.js", ], "keys": Array [ diff --git a/lib/core-server/src/__snapshots__/vue-3-cli_preview-dev-posix b/lib/core-server/src/__snapshots__/vue-3-cli_preview-dev-posix index 162709f0636..bbfceacad44 100644 --- a/lib/core-server/src/__snapshots__/vue-3-cli_preview-dev-posix +++ b/lib/core-server/src/__snapshots__/vue-3-cli_preview-dev-posix @@ -7,15 +7,15 @@ Object { "ROOT/lib/core-client/dist/esm/globals/globals.js", "NODE_MODULES/webpack-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined", "ROOT/storybook-init-framework-entry.js", - "ROOT/addons/docs/dist/esm/frameworks/common/config-generated-config-entry.js", - "ROOT/app/vue3/dist/esm/client/preview/config-generated-config-entry.js", - "ROOT/app/vue3/dist/esm/client/docs/config-generated-config-entry.js", - "ROOT/addons/interactions/dist/esm/preset/argsEnhancers.js-generated-config-entry.js", "ROOT/addons/links/preview.js-generated-config-entry.js", "ROOT/addons/actions/preview.js-generated-config-entry.js", "ROOT/addons/backgrounds/preview.js-generated-config-entry.js", "ROOT/addons/measure/preview.js-generated-config-entry.js", "ROOT/addons/outline/preview.js-generated-config-entry.js", + "ROOT/addons/docs/dist/esm/frameworks/common/config-generated-config-entry.js", + "ROOT/app/vue3/dist/esm/client/preview/config-generated-config-entry.js", + "ROOT/app/vue3/dist/esm/client/docs/config-generated-config-entry.js", + "ROOT/addons/interactions/dist/esm/preset/argsEnhancers.js-generated-config-entry.js", "ROOT/examples/vue-3-cli/.storybook/preview.ts-generated-config-entry.js", "ROOT/generated-stories-entry.js", ], diff --git a/lib/core-server/src/__snapshots__/vue-3-cli_preview-prod-posix b/lib/core-server/src/__snapshots__/vue-3-cli_preview-prod-posix index e414bfb7765..f46a5e4ac8b 100644 --- a/lib/core-server/src/__snapshots__/vue-3-cli_preview-prod-posix +++ b/lib/core-server/src/__snapshots__/vue-3-cli_preview-prod-posix @@ -6,15 +6,15 @@ Object { "ROOT/lib/core-client/dist/esm/globals/polyfills.js", "ROOT/lib/core-client/dist/esm/globals/globals.js", "ROOT/storybook-init-framework-entry.js", - "ROOT/addons/docs/dist/esm/frameworks/common/config-generated-config-entry.js", - "ROOT/app/vue3/dist/esm/client/preview/config-generated-config-entry.js", - "ROOT/app/vue3/dist/esm/client/docs/config-generated-config-entry.js", - "ROOT/addons/interactions/dist/esm/preset/argsEnhancers.js-generated-config-entry.js", "ROOT/addons/links/preview.js-generated-config-entry.js", "ROOT/addons/actions/preview.js-generated-config-entry.js", "ROOT/addons/backgrounds/preview.js-generated-config-entry.js", "ROOT/addons/measure/preview.js-generated-config-entry.js", "ROOT/addons/outline/preview.js-generated-config-entry.js", + "ROOT/addons/docs/dist/esm/frameworks/common/config-generated-config-entry.js", + "ROOT/app/vue3/dist/esm/client/preview/config-generated-config-entry.js", + "ROOT/app/vue3/dist/esm/client/docs/config-generated-config-entry.js", + "ROOT/addons/interactions/dist/esm/preset/argsEnhancers.js-generated-config-entry.js", "ROOT/examples/vue-3-cli/.storybook/preview.ts-generated-config-entry.js", "ROOT/generated-stories-entry.js", ], diff --git a/lib/core-server/src/__snapshots__/web-components-kitchen-sink_manager-dev-posix b/lib/core-server/src/__snapshots__/web-components-kitchen-sink_manager-dev-posix index 9e42f671dcb..5657b085d56 100644 --- a/lib/core-server/src/__snapshots__/web-components-kitchen-sink_manager-dev-posix +++ b/lib/core-server/src/__snapshots__/web-components-kitchen-sink_manager-dev-posix @@ -7,14 +7,21 @@ Object { "ROOT/lib/core-client/dist/esm/manager/index.js", "ROOT/addons/docs/dist/esm/manager", "ROOT/addons/controls/manager.js", + "ROOT/addons/controls/register.js", "ROOT/addons/a11y/manager.js", + "ROOT/addons/a11y/register.js", "ROOT/addons/actions/manager.js", + "ROOT/addons/actions/register.js", "ROOT/addons/backgrounds/manager.js", + "ROOT/addons/backgrounds/register.js", "ROOT/addons/interactions/dist/esm/manager.js", "ROOT/addons/links/manager.js", + "ROOT/addons/links/register.js", "ROOT/addons/storysource/dist/esm/manager.js", "ROOT/addons/viewport/manager.js", + "ROOT/addons/viewport/register.js", "ROOT/addons/toolbars/manager.js", + "ROOT/addons/toolbars/register.js", ], "keys": Array [ "name", diff --git a/lib/core-server/src/__snapshots__/web-components-kitchen-sink_manager-prod-posix b/lib/core-server/src/__snapshots__/web-components-kitchen-sink_manager-prod-posix index 1d0aa8234e6..99207dd738a 100644 --- a/lib/core-server/src/__snapshots__/web-components-kitchen-sink_manager-prod-posix +++ b/lib/core-server/src/__snapshots__/web-components-kitchen-sink_manager-prod-posix @@ -7,14 +7,21 @@ Object { "ROOT/lib/core-client/dist/esm/manager/index.js", "ROOT/addons/docs/dist/esm/manager", "ROOT/addons/controls/manager.js", + "ROOT/addons/controls/register.js", "ROOT/addons/a11y/manager.js", + "ROOT/addons/a11y/register.js", "ROOT/addons/actions/manager.js", + "ROOT/addons/actions/register.js", "ROOT/addons/backgrounds/manager.js", + "ROOT/addons/backgrounds/register.js", "ROOT/addons/interactions/dist/esm/manager.js", "ROOT/addons/links/manager.js", + "ROOT/addons/links/register.js", "ROOT/addons/storysource/dist/esm/manager.js", "ROOT/addons/viewport/manager.js", + "ROOT/addons/viewport/register.js", "ROOT/addons/toolbars/manager.js", + "ROOT/addons/toolbars/register.js", ], "keys": Array [ "name", diff --git a/lib/core-server/src/__snapshots__/web-components-kitchen-sink_preview-dev-posix b/lib/core-server/src/__snapshots__/web-components-kitchen-sink_preview-dev-posix index 6bb1223590f..abc13e52902 100644 --- a/lib/core-server/src/__snapshots__/web-components-kitchen-sink_preview-dev-posix +++ b/lib/core-server/src/__snapshots__/web-components-kitchen-sink_preview-dev-posix @@ -7,14 +7,14 @@ Object { "ROOT/lib/core-client/dist/esm/globals/globals.js", "NODE_MODULES/webpack-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined", "ROOT/storybook-init-framework-entry.js", - "ROOT/addons/docs/dist/esm/frameworks/common/config-generated-config-entry.js", - "ROOT/app/web-components/dist/esm/client/preview/config-generated-config-entry.js", - "ROOT/app/web-components/dist/esm/client/docs/config-generated-config-entry.js", - "ROOT/addons/interactions/dist/esm/preset/argsEnhancers.js-generated-config-entry.js", "ROOT/addons/a11y/preview.js-generated-config-entry.js", "ROOT/addons/actions/preview.js-generated-config-entry.js", "ROOT/addons/backgrounds/preview.js-generated-config-entry.js", "ROOT/addons/links/preview.js-generated-config-entry.js", + "ROOT/addons/docs/dist/esm/frameworks/common/config-generated-config-entry.js", + "ROOT/app/web-components/dist/esm/client/preview/config-generated-config-entry.js", + "ROOT/app/web-components/dist/esm/client/docs/config-generated-config-entry.js", + "ROOT/addons/interactions/dist/esm/preset/argsEnhancers.js-generated-config-entry.js", "ROOT/examples/web-components-kitchen-sink/.storybook/preview.js-generated-config-entry.js", "ROOT/generated-stories-entry.js", ], diff --git a/lib/core-server/src/__snapshots__/web-components-kitchen-sink_preview-prod-posix b/lib/core-server/src/__snapshots__/web-components-kitchen-sink_preview-prod-posix index 3fae456f902..57c63cda457 100644 --- a/lib/core-server/src/__snapshots__/web-components-kitchen-sink_preview-prod-posix +++ b/lib/core-server/src/__snapshots__/web-components-kitchen-sink_preview-prod-posix @@ -6,14 +6,14 @@ Object { "ROOT/lib/core-client/dist/esm/globals/polyfills.js", "ROOT/lib/core-client/dist/esm/globals/globals.js", "ROOT/storybook-init-framework-entry.js", - "ROOT/addons/docs/dist/esm/frameworks/common/config-generated-config-entry.js", - "ROOT/app/web-components/dist/esm/client/preview/config-generated-config-entry.js", - "ROOT/app/web-components/dist/esm/client/docs/config-generated-config-entry.js", - "ROOT/addons/interactions/dist/esm/preset/argsEnhancers.js-generated-config-entry.js", "ROOT/addons/a11y/preview.js-generated-config-entry.js", "ROOT/addons/actions/preview.js-generated-config-entry.js", "ROOT/addons/backgrounds/preview.js-generated-config-entry.js", "ROOT/addons/links/preview.js-generated-config-entry.js", + "ROOT/addons/docs/dist/esm/frameworks/common/config-generated-config-entry.js", + "ROOT/app/web-components/dist/esm/client/preview/config-generated-config-entry.js", + "ROOT/app/web-components/dist/esm/client/docs/config-generated-config-entry.js", + "ROOT/addons/interactions/dist/esm/preset/argsEnhancers.js-generated-config-entry.js", "ROOT/examples/web-components-kitchen-sink/.storybook/preview.js-generated-config-entry.js", "ROOT/generated-stories-entry.js", ], From 633679778b8b8dc8fac8e01f5c9b4cca89733038 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Mon, 21 Mar 2022 15:07:47 +0100 Subject: [PATCH 048/171] fix tests --- lib/core-common/src/presets.test.ts | 39 ++--------------------------- 1 file changed, 2 insertions(+), 37 deletions(-) diff --git a/lib/core-common/src/presets.test.ts b/lib/core-common/src/presets.test.ts index 25a28c12d83..ee2e13ba6f3 100644 --- a/lib/core-common/src/presets.test.ts +++ b/lib/core-common/src/presets.test.ts @@ -19,6 +19,7 @@ jest.mock('@storybook/node-logger', () => ({ jest.mock('./utils/safeResolve', () => { const KNOWN_FILES = [ + '@storybook/react', '@storybook/addon-actions/manager', '@storybook/addon-actions/register', './local/preset', @@ -50,11 +51,7 @@ jest.mock('./utils/safeResolve', () => { if (KNOWN_FILES.includes(name)) { return name; } - try { - return require.resolve(name); - } catch (e) { - return undefined; - } + return undefined; }), }; }); @@ -474,38 +471,6 @@ describe('loadPreset', () => { "options": Object {}, "preset": Object {}, }, - Object { - "name": "/Users/me/Projects/Storybook/core/app/react/dist/cjs/server/framework-preset-react.js", - "options": Object {}, - "preset": Object { - "babel": [Function], - "babelDefault": [Function], - "webpackFinal": [Function], - }, - }, - Object { - "name": "/Users/me/Projects/Storybook/core/app/react/dist/cjs/server/framework-preset-cra.js", - "options": Object {}, - "preset": Object { - "webpackFinal": [Function], - }, - }, - Object { - "name": "/Users/me/Projects/Storybook/core/app/react/dist/cjs/server/framework-preset-react-docs.js", - "options": Object {}, - "preset": Object { - "babel": [Function], - "config": [Function], - "webpackFinal": [Function], - }, - }, - Object { - "name": "/Users/me/Projects/Storybook/core/app/react/preset.js", - "options": Object {}, - "preset": Object { - "config": [Function], - }, - }, Object { "name": "@storybook/react", "options": Object {}, From 657040d32e0e4918077689a7f847cebb697fea05 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Tue, 22 Mar 2022 12:17:00 +0100 Subject: [PATCH 049/171] apply resolveAddon to objects too --- lib/core-common/src/presets.ts | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/lib/core-common/src/presets.ts b/lib/core-common/src/presets.ts index de52105fd99..0af7d0c53dc 100644 --- a/lib/core-common/src/presets.ts +++ b/lib/core-common/src/presets.ts @@ -119,12 +119,10 @@ export const resolveAddonName = ( const map = ({ configDir }: InterPresetOptions) => (item: any) => { + const options = isObject(item) ? item.options || {} : {}; + const name = isObject(item) ? item.name : item; try { - if (isObject(item)) { - const { name } = resolveAddonName(configDir, item.name); - return { ...item, name }; - } - return resolveAddonName(configDir, item); + return { options, ...resolveAddonName(configDir, name) }; } catch (err) { logger.error( `Addon value should end in /manager or /preview or /register OR it should be a valid preset https://storybook.js.org/docs/react/addons/writing-presets/\n${item}` From bc5aa0ef106f346634c0a23d3ccfa5c9e10029ad Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Tue, 22 Mar 2022 13:03:57 +0100 Subject: [PATCH 050/171] improve tests --- lib/core-common/src/presets.test.ts | 19 ++++++++++++++++++- lib/core-common/src/presets.ts | 14 ++++++++++++-- 2 files changed, 30 insertions(+), 3 deletions(-) diff --git a/lib/core-common/src/presets.test.ts b/lib/core-common/src/presets.test.ts index ee2e13ba6f3..ac19e6becbd 100644 --- a/lib/core-common/src/presets.test.ts +++ b/lib/core-common/src/presets.test.ts @@ -27,7 +27,9 @@ jest.mock('./utils/safeResolve', () => { '/absolute/preset', '/absolute/addons', '@storybook/addon-docs', + '@storybook/addon-cool', '@storybook/addon-docs/preset', + '@storybook/addon-interactions/preset', '@storybook/addon-essentials', '@storybook/addon-knobs/manager', '@storybook/addon-knobs/register', @@ -441,7 +443,12 @@ describe('loadPreset', () => { mockPreset('@storybook/addon-docs/preset', {}); mockPreset('@storybook/addon-actions/register', {}); mockPreset('addon-foo/register.js', {}); - mockPreset('addon-bar', {}); + mockPreset('@storybook/addon-cool', {}); + mockPreset('@storybook/addon-interactions/preset', {}); + mockPreset('addon-bar', { + addons: ['@storybook/addon-cool'], + presets: ['@storybook/addon-interactions/preset'], + }); mockPreset('addon-baz/register.js', {}); mockPreset('@storybook/addon-notes/register-panel', {}); @@ -543,6 +550,16 @@ describe('loadPreset', () => { managerEntries: ['addon-foo/register.js'], }, }, + { + name: '@storybook/addon-interactions/preset', + options: {}, + preset: {}, + }, + { + name: '@storybook/addon-cool', + options: {}, + preset: {}, + }, { name: 'addon-bar', options: {}, diff --git a/lib/core-common/src/presets.ts b/lib/core-common/src/presets.ts index 0af7d0c53dc..16cab9827bf 100644 --- a/lib/core-common/src/presets.ts +++ b/lib/core-common/src/presets.ts @@ -97,6 +97,13 @@ export const resolveAddonName = ( const previewFile = safeResolve(`${path}/preview`); const presetFile = safeResolve(`${path}/preset`); + if (!(managerFile || previewFile) && presetFile) { + return { + type: 'presets', + name: presetFile, + }; + } + if (managerFile || registerFile || previewFile || presetFile) { return { type: 'virtual', @@ -119,10 +126,13 @@ export const resolveAddonName = ( const map = ({ configDir }: InterPresetOptions) => (item: any) => { - const options = isObject(item) ? item.options || {} : {}; + const options = isObject(item) ? item.options || undefined : undefined; const name = isObject(item) ? item.name : item; try { - return { options, ...resolveAddonName(configDir, name) }; + return { + ...(options ? { options } : {}), + ...resolveAddonName(configDir, name), + }; } catch (err) { logger.error( `Addon value should end in /manager or /preview or /register OR it should be a valid preset https://storybook.js.org/docs/react/addons/writing-presets/\n${item}` From 4de6affb10f80d9ce846a33d95680c87a7c0ed9a Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Tue, 22 Mar 2022 15:40:58 +0100 Subject: [PATCH 051/171] make builders backwards compatible --- lib/builder-webpack4/src/preview/iframe-webpack.config.ts | 1 - lib/builder-webpack5/src/preview/iframe-webpack.config.ts | 1 - lib/core-server/src/presets/common-preset.ts | 4 ++++ 3 files changed, 4 insertions(+), 2 deletions(-) diff --git a/lib/builder-webpack4/src/preview/iframe-webpack.config.ts b/lib/builder-webpack4/src/preview/iframe-webpack.config.ts index 65c60050464..66c2fbee4de 100644 --- a/lib/builder-webpack4/src/preview/iframe-webpack.config.ts +++ b/lib/builder-webpack4/src/preview/iframe-webpack.config.ts @@ -80,7 +80,6 @@ export default async (options: Options & Record): Promise): Promise ({ }, }); +export const config = async (base: any, options: Options) => { + return [...(await options.presets.apply('previewAnnotations', [], options)), ...base]; +}; + export const features = async (existing: Record) => ({ ...existing, postcss: true, From 83f57c70f485ac71cab1ad8a03369b3ad39e76be Mon Sep 17 00:00:00 2001 From: fbredius-hp Date: Tue, 22 Mar 2022 15:48:47 +0100 Subject: [PATCH 052/171] 17225 Fix date control width in addons panel --- lib/components/src/controls/Date.tsx | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/lib/components/src/controls/Date.tsx b/lib/components/src/controls/Date.tsx index b8ddcebff97..0124cbed5db 100644 --- a/lib/components/src/controls/Date.tsx +++ b/lib/components/src/controls/Date.tsx @@ -52,6 +52,10 @@ const FlexSpaced = styled.div(({ theme }) => ({ }, 'input:first-of-type': { marginLeft: 0, + flexGrow: 4, + }, + 'input:last-of-type': { + flexGrow: 3, }, })); From e40463f4a161384ce9a0b57f8c7db1b4e9443bc1 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Tue, 22 Mar 2022 18:31:40 +0100 Subject: [PATCH 053/171] fix snapshots --- .../src/__snapshots__/cra-ts-essentials_preview-dev-posix | 2 +- .../src/__snapshots__/cra-ts-essentials_preview-prod-posix | 2 +- .../src/__snapshots__/html-kitchen-sink_preview-dev-posix | 2 +- .../src/__snapshots__/html-kitchen-sink_preview-prod-posix | 2 +- lib/core-server/src/__snapshots__/vue-3-cli_preview-dev-posix | 2 +- lib/core-server/src/__snapshots__/vue-3-cli_preview-prod-posix | 2 +- .../__snapshots__/web-components-kitchen-sink_preview-dev-posix | 2 +- .../web-components-kitchen-sink_preview-prod-posix | 2 +- 8 files changed, 8 insertions(+), 8 deletions(-) diff --git a/lib/core-server/src/__snapshots__/cra-ts-essentials_preview-dev-posix b/lib/core-server/src/__snapshots__/cra-ts-essentials_preview-dev-posix index 1bef212e13b..638c4088a72 100644 --- a/lib/core-server/src/__snapshots__/cra-ts-essentials_preview-dev-posix +++ b/lib/core-server/src/__snapshots__/cra-ts-essentials_preview-dev-posix @@ -8,11 +8,11 @@ Object { "NODE_MODULES/webpack-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined", "NODE_MODULES/@storybook/addon-ie11/dist/event-source-polyfill.js", "ROOT/storybook-init-framework-entry.js", + "ROOT/addons/docs/dist/esm/frameworks/common/config-generated-config-entry.js", "ROOT/addons/actions/preview.js-generated-config-entry.js", "ROOT/addons/backgrounds/preview.js-generated-config-entry.js", "ROOT/addons/measure/preview.js-generated-config-entry.js", "ROOT/addons/outline/preview.js-generated-config-entry.js", - "ROOT/addons/docs/dist/esm/frameworks/common/config-generated-config-entry.js", "ROOT/app/react/dist/esm/client/docs/config-generated-config-entry.js", "ROOT/app/react/dist/esm/client/preview/config-generated-config-entry.js", "ROOT/examples/cra-ts-essentials/.storybook/preview.js-generated-config-entry.js", diff --git a/lib/core-server/src/__snapshots__/cra-ts-essentials_preview-prod-posix b/lib/core-server/src/__snapshots__/cra-ts-essentials_preview-prod-posix index b2aef3d488b..31d204b48ff 100644 --- a/lib/core-server/src/__snapshots__/cra-ts-essentials_preview-prod-posix +++ b/lib/core-server/src/__snapshots__/cra-ts-essentials_preview-prod-posix @@ -7,11 +7,11 @@ Object { "ROOT/lib/core-client/dist/esm/globals/globals.js", "NODE_MODULES/@storybook/addon-ie11/dist/event-source-polyfill.js", "ROOT/storybook-init-framework-entry.js", + "ROOT/addons/docs/dist/esm/frameworks/common/config-generated-config-entry.js", "ROOT/addons/actions/preview.js-generated-config-entry.js", "ROOT/addons/backgrounds/preview.js-generated-config-entry.js", "ROOT/addons/measure/preview.js-generated-config-entry.js", "ROOT/addons/outline/preview.js-generated-config-entry.js", - "ROOT/addons/docs/dist/esm/frameworks/common/config-generated-config-entry.js", "ROOT/app/react/dist/esm/client/docs/config-generated-config-entry.js", "ROOT/app/react/dist/esm/client/preview/config-generated-config-entry.js", "ROOT/examples/cra-ts-essentials/.storybook/preview.js-generated-config-entry.js", diff --git a/lib/core-server/src/__snapshots__/html-kitchen-sink_preview-dev-posix b/lib/core-server/src/__snapshots__/html-kitchen-sink_preview-dev-posix index 630f4f4a5db..5ca122ce962 100644 --- a/lib/core-server/src/__snapshots__/html-kitchen-sink_preview-dev-posix +++ b/lib/core-server/src/__snapshots__/html-kitchen-sink_preview-dev-posix @@ -7,11 +7,11 @@ Object { "ROOT/lib/core-client/dist/esm/globals/globals.js", "NODE_MODULES/webpack-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined", "ROOT/storybook-init-framework-entry.js", + "ROOT/addons/docs/dist/esm/frameworks/common/config-generated-config-entry.js", "ROOT/addons/a11y/preview.js-generated-config-entry.js", "ROOT/addons/actions/preview.js-generated-config-entry.js", "ROOT/addons/backgrounds/preview.js-generated-config-entry.js", "ROOT/addons/links/preview.js-generated-config-entry.js", - "ROOT/addons/docs/dist/esm/frameworks/common/config-generated-config-entry.js", "ROOT/app/html/dist/esm/client/preview/config-generated-config-entry.js", "ROOT/app/html/dist/esm/client/docs/config-generated-config-entry.js", "ROOT/examples/html-kitchen-sink/.storybook/preview.js-generated-config-entry.js", diff --git a/lib/core-server/src/__snapshots__/html-kitchen-sink_preview-prod-posix b/lib/core-server/src/__snapshots__/html-kitchen-sink_preview-prod-posix index 824d6a0adc9..543c87ed429 100644 --- a/lib/core-server/src/__snapshots__/html-kitchen-sink_preview-prod-posix +++ b/lib/core-server/src/__snapshots__/html-kitchen-sink_preview-prod-posix @@ -6,11 +6,11 @@ Object { "ROOT/lib/core-client/dist/esm/globals/polyfills.js", "ROOT/lib/core-client/dist/esm/globals/globals.js", "ROOT/storybook-init-framework-entry.js", + "ROOT/addons/docs/dist/esm/frameworks/common/config-generated-config-entry.js", "ROOT/addons/a11y/preview.js-generated-config-entry.js", "ROOT/addons/actions/preview.js-generated-config-entry.js", "ROOT/addons/backgrounds/preview.js-generated-config-entry.js", "ROOT/addons/links/preview.js-generated-config-entry.js", - "ROOT/addons/docs/dist/esm/frameworks/common/config-generated-config-entry.js", "ROOT/app/html/dist/esm/client/preview/config-generated-config-entry.js", "ROOT/app/html/dist/esm/client/docs/config-generated-config-entry.js", "ROOT/examples/html-kitchen-sink/.storybook/preview.js-generated-config-entry.js", diff --git a/lib/core-server/src/__snapshots__/vue-3-cli_preview-dev-posix b/lib/core-server/src/__snapshots__/vue-3-cli_preview-dev-posix index bbfceacad44..5532938a537 100644 --- a/lib/core-server/src/__snapshots__/vue-3-cli_preview-dev-posix +++ b/lib/core-server/src/__snapshots__/vue-3-cli_preview-dev-posix @@ -7,12 +7,12 @@ Object { "ROOT/lib/core-client/dist/esm/globals/globals.js", "NODE_MODULES/webpack-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined", "ROOT/storybook-init-framework-entry.js", + "ROOT/addons/docs/dist/esm/frameworks/common/config-generated-config-entry.js", "ROOT/addons/links/preview.js-generated-config-entry.js", "ROOT/addons/actions/preview.js-generated-config-entry.js", "ROOT/addons/backgrounds/preview.js-generated-config-entry.js", "ROOT/addons/measure/preview.js-generated-config-entry.js", "ROOT/addons/outline/preview.js-generated-config-entry.js", - "ROOT/addons/docs/dist/esm/frameworks/common/config-generated-config-entry.js", "ROOT/app/vue3/dist/esm/client/preview/config-generated-config-entry.js", "ROOT/app/vue3/dist/esm/client/docs/config-generated-config-entry.js", "ROOT/addons/interactions/dist/esm/preset/argsEnhancers.js-generated-config-entry.js", diff --git a/lib/core-server/src/__snapshots__/vue-3-cli_preview-prod-posix b/lib/core-server/src/__snapshots__/vue-3-cli_preview-prod-posix index f46a5e4ac8b..d754c551e5c 100644 --- a/lib/core-server/src/__snapshots__/vue-3-cli_preview-prod-posix +++ b/lib/core-server/src/__snapshots__/vue-3-cli_preview-prod-posix @@ -6,12 +6,12 @@ Object { "ROOT/lib/core-client/dist/esm/globals/polyfills.js", "ROOT/lib/core-client/dist/esm/globals/globals.js", "ROOT/storybook-init-framework-entry.js", + "ROOT/addons/docs/dist/esm/frameworks/common/config-generated-config-entry.js", "ROOT/addons/links/preview.js-generated-config-entry.js", "ROOT/addons/actions/preview.js-generated-config-entry.js", "ROOT/addons/backgrounds/preview.js-generated-config-entry.js", "ROOT/addons/measure/preview.js-generated-config-entry.js", "ROOT/addons/outline/preview.js-generated-config-entry.js", - "ROOT/addons/docs/dist/esm/frameworks/common/config-generated-config-entry.js", "ROOT/app/vue3/dist/esm/client/preview/config-generated-config-entry.js", "ROOT/app/vue3/dist/esm/client/docs/config-generated-config-entry.js", "ROOT/addons/interactions/dist/esm/preset/argsEnhancers.js-generated-config-entry.js", diff --git a/lib/core-server/src/__snapshots__/web-components-kitchen-sink_preview-dev-posix b/lib/core-server/src/__snapshots__/web-components-kitchen-sink_preview-dev-posix index abc13e52902..0873007c475 100644 --- a/lib/core-server/src/__snapshots__/web-components-kitchen-sink_preview-dev-posix +++ b/lib/core-server/src/__snapshots__/web-components-kitchen-sink_preview-dev-posix @@ -7,11 +7,11 @@ Object { "ROOT/lib/core-client/dist/esm/globals/globals.js", "NODE_MODULES/webpack-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined", "ROOT/storybook-init-framework-entry.js", + "ROOT/addons/docs/dist/esm/frameworks/common/config-generated-config-entry.js", "ROOT/addons/a11y/preview.js-generated-config-entry.js", "ROOT/addons/actions/preview.js-generated-config-entry.js", "ROOT/addons/backgrounds/preview.js-generated-config-entry.js", "ROOT/addons/links/preview.js-generated-config-entry.js", - "ROOT/addons/docs/dist/esm/frameworks/common/config-generated-config-entry.js", "ROOT/app/web-components/dist/esm/client/preview/config-generated-config-entry.js", "ROOT/app/web-components/dist/esm/client/docs/config-generated-config-entry.js", "ROOT/addons/interactions/dist/esm/preset/argsEnhancers.js-generated-config-entry.js", diff --git a/lib/core-server/src/__snapshots__/web-components-kitchen-sink_preview-prod-posix b/lib/core-server/src/__snapshots__/web-components-kitchen-sink_preview-prod-posix index 57c63cda457..7f5e7871f4e 100644 --- a/lib/core-server/src/__snapshots__/web-components-kitchen-sink_preview-prod-posix +++ b/lib/core-server/src/__snapshots__/web-components-kitchen-sink_preview-prod-posix @@ -6,11 +6,11 @@ Object { "ROOT/lib/core-client/dist/esm/globals/polyfills.js", "ROOT/lib/core-client/dist/esm/globals/globals.js", "ROOT/storybook-init-framework-entry.js", + "ROOT/addons/docs/dist/esm/frameworks/common/config-generated-config-entry.js", "ROOT/addons/a11y/preview.js-generated-config-entry.js", "ROOT/addons/actions/preview.js-generated-config-entry.js", "ROOT/addons/backgrounds/preview.js-generated-config-entry.js", "ROOT/addons/links/preview.js-generated-config-entry.js", - "ROOT/addons/docs/dist/esm/frameworks/common/config-generated-config-entry.js", "ROOT/app/web-components/dist/esm/client/preview/config-generated-config-entry.js", "ROOT/app/web-components/dist/esm/client/docs/config-generated-config-entry.js", "ROOT/addons/interactions/dist/esm/preset/argsEnhancers.js-generated-config-entry.js", From 14e3d8516aba1eba3bae09a8865a672461d455e2 Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Wed, 23 Mar 2022 03:30:37 +0800 Subject: [PATCH 054/171] clean up addons preview/manager refactor --- addons/a11y/manager.js | 2 +- addons/a11y/preview.js | 2 +- addons/a11y/register.js | 7 ++++--- addons/actions/manager.js | 2 +- addons/actions/preview.js | 2 +- addons/actions/register.js | 7 ++++--- addons/backgrounds/manager.js | 2 +- addons/backgrounds/preview.js | 2 +- addons/backgrounds/register.js | 7 ++++--- addons/controls/register.js | 7 ++++--- addons/jest/manager.js | 2 +- addons/jest/register.js | 7 ++++--- addons/links/manager.js | 2 +- addons/links/preview.js | 2 +- addons/links/register.js | 7 ++++--- addons/measure/manager.js | 2 +- addons/measure/preview.js | 2 +- addons/measure/register.js | 7 ++++--- addons/outline/manager.js | 2 +- addons/outline/preview.js | 2 +- addons/outline/register.js | 7 ++++--- addons/storysource/register.js | 2 +- addons/toolbars/manager.js | 2 +- addons/toolbars/register.js | 7 ++++--- addons/viewport/manager.js | 2 +- addons/viewport/register.js | 7 ++++--- 26 files changed, 56 insertions(+), 46 deletions(-) diff --git a/addons/a11y/manager.js b/addons/a11y/manager.js index 1c43441b3bf..4e287d25b15 100644 --- a/addons/a11y/manager.js +++ b/addons/a11y/manager.js @@ -1 +1 @@ -module.exports = require('./dist/esm/manager'); +import './dist/esm/manager'; diff --git a/addons/a11y/preview.js b/addons/a11y/preview.js index 354c508e47f..e726cab5a1b 100644 --- a/addons/a11y/preview.js +++ b/addons/a11y/preview.js @@ -1 +1 @@ -module.exports = require('./dist/esm/preview'); +export * from './dist/esm/preview'; diff --git a/addons/a11y/register.js b/addons/a11y/register.js index d6603f7c512..2d916bea61a 100755 --- a/addons/a11y/register.js +++ b/addons/a11y/register.js @@ -1,5 +1,6 @@ -require('@storybook/client-logger').once.warn( +import { once } from '@storybook/client-logger'; +import './manager'; + +once.warn( 'register.js is deprecated see https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated-registerjs' ); - -require('./manager'); diff --git a/addons/actions/manager.js b/addons/actions/manager.js index 1c43441b3bf..4e287d25b15 100644 --- a/addons/actions/manager.js +++ b/addons/actions/manager.js @@ -1 +1 @@ -module.exports = require('./dist/esm/manager'); +import './dist/esm/manager'; diff --git a/addons/actions/preview.js b/addons/actions/preview.js index 8f96dc01761..7817e1d278d 100644 --- a/addons/actions/preview.js +++ b/addons/actions/preview.js @@ -1 +1 @@ -module.exports = require('./dist/esm/preset/preview'); +export * from './dist/esm/preset/preview'; diff --git a/addons/actions/register.js b/addons/actions/register.js index d6603f7c512..2d916bea61a 100644 --- a/addons/actions/register.js +++ b/addons/actions/register.js @@ -1,5 +1,6 @@ -require('@storybook/client-logger').once.warn( +import { once } from '@storybook/client-logger'; +import './manager'; + +once.warn( 'register.js is deprecated see https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated-registerjs' ); - -require('./manager'); diff --git a/addons/backgrounds/manager.js b/addons/backgrounds/manager.js index 1c43441b3bf..4e287d25b15 100644 --- a/addons/backgrounds/manager.js +++ b/addons/backgrounds/manager.js @@ -1 +1 @@ -module.exports = require('./dist/esm/manager'); +import './dist/esm/manager'; diff --git a/addons/backgrounds/preview.js b/addons/backgrounds/preview.js index 354c508e47f..e726cab5a1b 100644 --- a/addons/backgrounds/preview.js +++ b/addons/backgrounds/preview.js @@ -1 +1 @@ -module.exports = require('./dist/esm/preview'); +export * from './dist/esm/preview'; diff --git a/addons/backgrounds/register.js b/addons/backgrounds/register.js index 9f9432e18ea..2d916bea61a 100644 --- a/addons/backgrounds/register.js +++ b/addons/backgrounds/register.js @@ -1,5 +1,6 @@ -require('@storybook/client-logger').once.warn( +import { once } from '@storybook/client-logger'; +import './manager'; + +once.warn( 'register.js is deprecated see https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated-registerjs' ); - -module.exports = require('./manager'); diff --git a/addons/controls/register.js b/addons/controls/register.js index d6603f7c512..2d916bea61a 100644 --- a/addons/controls/register.js +++ b/addons/controls/register.js @@ -1,5 +1,6 @@ -require('@storybook/client-logger').once.warn( +import { once } from '@storybook/client-logger'; +import './manager'; + +once.warn( 'register.js is deprecated see https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated-registerjs' ); - -require('./manager'); diff --git a/addons/jest/manager.js b/addons/jest/manager.js index 1c43441b3bf..4e287d25b15 100644 --- a/addons/jest/manager.js +++ b/addons/jest/manager.js @@ -1 +1 @@ -module.exports = require('./dist/esm/manager'); +import './dist/esm/manager'; diff --git a/addons/jest/register.js b/addons/jest/register.js index d6603f7c512..2d916bea61a 100644 --- a/addons/jest/register.js +++ b/addons/jest/register.js @@ -1,5 +1,6 @@ -require('@storybook/client-logger').once.warn( +import { once } from '@storybook/client-logger'; +import './manager'; + +once.warn( 'register.js is deprecated see https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated-registerjs' ); - -require('./manager'); diff --git a/addons/links/manager.js b/addons/links/manager.js index 1c43441b3bf..4e287d25b15 100644 --- a/addons/links/manager.js +++ b/addons/links/manager.js @@ -1 +1 @@ -module.exports = require('./dist/esm/manager'); +import './dist/esm/manager'; diff --git a/addons/links/preview.js b/addons/links/preview.js index 354c508e47f..e726cab5a1b 100644 --- a/addons/links/preview.js +++ b/addons/links/preview.js @@ -1 +1 @@ -module.exports = require('./dist/esm/preview'); +export * from './dist/esm/preview'; diff --git a/addons/links/register.js b/addons/links/register.js index d6603f7c512..2d916bea61a 100644 --- a/addons/links/register.js +++ b/addons/links/register.js @@ -1,5 +1,6 @@ -require('@storybook/client-logger').once.warn( +import { once } from '@storybook/client-logger'; +import './manager'; + +once.warn( 'register.js is deprecated see https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated-registerjs' ); - -require('./manager'); diff --git a/addons/measure/manager.js b/addons/measure/manager.js index 1c43441b3bf..4e287d25b15 100644 --- a/addons/measure/manager.js +++ b/addons/measure/manager.js @@ -1 +1 @@ -module.exports = require('./dist/esm/manager'); +import './dist/esm/manager'; diff --git a/addons/measure/preview.js b/addons/measure/preview.js index 354c508e47f..e726cab5a1b 100644 --- a/addons/measure/preview.js +++ b/addons/measure/preview.js @@ -1 +1 @@ -module.exports = require('./dist/esm/preview'); +export * from './dist/esm/preview'; diff --git a/addons/measure/register.js b/addons/measure/register.js index d6603f7c512..2d916bea61a 100644 --- a/addons/measure/register.js +++ b/addons/measure/register.js @@ -1,5 +1,6 @@ -require('@storybook/client-logger').once.warn( +import { once } from '@storybook/client-logger'; +import './manager'; + +once.warn( 'register.js is deprecated see https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated-registerjs' ); - -require('./manager'); diff --git a/addons/outline/manager.js b/addons/outline/manager.js index 1c43441b3bf..4e287d25b15 100644 --- a/addons/outline/manager.js +++ b/addons/outline/manager.js @@ -1 +1 @@ -module.exports = require('./dist/esm/manager'); +import './dist/esm/manager'; diff --git a/addons/outline/preview.js b/addons/outline/preview.js index 8f96dc01761..7817e1d278d 100644 --- a/addons/outline/preview.js +++ b/addons/outline/preview.js @@ -1 +1 @@ -module.exports = require('./dist/esm/preset/preview'); +export * from './dist/esm/preset/preview'; diff --git a/addons/outline/register.js b/addons/outline/register.js index d6603f7c512..2d916bea61a 100644 --- a/addons/outline/register.js +++ b/addons/outline/register.js @@ -1,5 +1,6 @@ -require('@storybook/client-logger').once.warn( +import { once } from '@storybook/client-logger'; +import './manager'; + +once.warn( 'register.js is deprecated see https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated-registerjs' ); - -require('./manager'); diff --git a/addons/storysource/register.js b/addons/storysource/register.js index 81964d78c60..4e287d25b15 100644 --- a/addons/storysource/register.js +++ b/addons/storysource/register.js @@ -1 +1 @@ -require('./dist/esm/manager'); +import './dist/esm/manager'; diff --git a/addons/toolbars/manager.js b/addons/toolbars/manager.js index 1c43441b3bf..4e287d25b15 100644 --- a/addons/toolbars/manager.js +++ b/addons/toolbars/manager.js @@ -1 +1 @@ -module.exports = require('./dist/esm/manager'); +import './dist/esm/manager'; diff --git a/addons/toolbars/register.js b/addons/toolbars/register.js index d6603f7c512..2d916bea61a 100644 --- a/addons/toolbars/register.js +++ b/addons/toolbars/register.js @@ -1,5 +1,6 @@ -require('@storybook/client-logger').once.warn( +import { once } from '@storybook/client-logger'; +import './manager'; + +once.warn( 'register.js is deprecated see https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated-registerjs' ); - -require('./manager'); diff --git a/addons/viewport/manager.js b/addons/viewport/manager.js index 1c43441b3bf..4e287d25b15 100644 --- a/addons/viewport/manager.js +++ b/addons/viewport/manager.js @@ -1 +1 @@ -module.exports = require('./dist/esm/manager'); +import './dist/esm/manager'; diff --git a/addons/viewport/register.js b/addons/viewport/register.js index d6603f7c512..2d916bea61a 100644 --- a/addons/viewport/register.js +++ b/addons/viewport/register.js @@ -1,5 +1,6 @@ -require('@storybook/client-logger').once.warn( +import { once } from '@storybook/client-logger'; +import './manager'; + +once.warn( 'register.js is deprecated see https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated-registerjs' ); - -require('./manager'); From b94875522b520f1ec048536911bcfd892d35960a Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Wed, 23 Mar 2022 03:32:51 +0800 Subject: [PATCH 055/171] Addon-docs: manager/preview addon refactor --- addons/docs/manager.js | 1 + addons/docs/preset.js | 17 +---------------- addons/docs/preview.js | 1 + addons/docs/register.js | 8 ++++++-- addons/docs/src/frameworks/common/config.ts | 8 -------- .../docs/src/{frameworks/common => }/preset.ts | 0 addons/docs/src/preview.ts | 8 ++++++++ 7 files changed, 17 insertions(+), 26 deletions(-) create mode 100644 addons/docs/manager.js create mode 100644 addons/docs/preview.js delete mode 100644 addons/docs/src/frameworks/common/config.ts rename addons/docs/src/{frameworks/common => }/preset.ts (100%) create mode 100644 addons/docs/src/preview.ts diff --git a/addons/docs/manager.js b/addons/docs/manager.js new file mode 100644 index 00000000000..4e287d25b15 --- /dev/null +++ b/addons/docs/manager.js @@ -0,0 +1 @@ +import './dist/esm/manager'; diff --git a/addons/docs/preset.js b/addons/docs/preset.js index 44b529b1b7f..e45ac5b4cec 100644 --- a/addons/docs/preset.js +++ b/addons/docs/preset.js @@ -1,16 +1 @@ -const { findDistEsm } = require('@storybook/core-common'); -const { webpack } = require('./dist/cjs/frameworks/common/preset'); - -function managerEntries(entry = [], options) { - return [...entry, findDistEsm(__dirname, 'manager')]; -} - -function config(entry = [], options = {}) { - return [findDistEsm(__dirname, 'frameworks/common/config'), ...entry]; -} - -module.exports = { - webpack, - managerEntries, - config, -}; +module.exports = require('./dist/cjs/preset'); diff --git a/addons/docs/preview.js b/addons/docs/preview.js new file mode 100644 index 00000000000..e726cab5a1b --- /dev/null +++ b/addons/docs/preview.js @@ -0,0 +1 @@ +export * from './dist/esm/preview'; diff --git a/addons/docs/register.js b/addons/docs/register.js index afaa5ae8ebd..2d916bea61a 100644 --- a/addons/docs/register.js +++ b/addons/docs/register.js @@ -1,2 +1,6 @@ -/* eslint-disable import/extensions */ -require('./dist/esm/manager.js'); +import { once } from '@storybook/client-logger'; +import './manager'; + +once.warn( + 'register.js is deprecated see https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated-registerjs' +); diff --git a/addons/docs/src/frameworks/common/config.ts b/addons/docs/src/frameworks/common/config.ts deleted file mode 100644 index 20632390005..00000000000 --- a/addons/docs/src/frameworks/common/config.ts +++ /dev/null @@ -1,8 +0,0 @@ -export const parameters = { - docs: { - inlineStories: false, - getContainer: async () => (await import('../../blocks')).DocsContainer, - getPage: async () => (await import('../../blocks')).DocsPage, - iframeHeight: 100, - }, -}; diff --git a/addons/docs/src/frameworks/common/preset.ts b/addons/docs/src/preset.ts similarity index 100% rename from addons/docs/src/frameworks/common/preset.ts rename to addons/docs/src/preset.ts diff --git a/addons/docs/src/preview.ts b/addons/docs/src/preview.ts new file mode 100644 index 00000000000..9f3d9b2d8c1 --- /dev/null +++ b/addons/docs/src/preview.ts @@ -0,0 +1,8 @@ +export const parameters = { + docs: { + inlineStories: false, + getContainer: async () => (await import('./blocks')).DocsContainer, + getPage: async () => (await import('./blocks')).DocsPage, + iframeHeight: 100, + }, +}; From ce6efb79b51f40801d7894f47b39c23a70a6a596 Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Wed, 23 Mar 2022 03:33:11 +0800 Subject: [PATCH 056/171] Addon-interactions: manager/preview addons refactor --- addons/interactions/manager.js | 1 + addons/interactions/package.json | 1 + addons/interactions/preset.js | 13 ++++--------- addons/interactions/preview.js | 1 + addons/interactions/register.js | 7 ++++++- .../src/preset/{argsEnhancers.ts => preview.ts} | 0 yarn.lock | 1 + 7 files changed, 14 insertions(+), 10 deletions(-) create mode 100644 addons/interactions/manager.js create mode 100644 addons/interactions/preview.js rename addons/interactions/src/preset/{argsEnhancers.ts => preview.ts} (100%) diff --git a/addons/interactions/manager.js b/addons/interactions/manager.js new file mode 100644 index 00000000000..4e287d25b15 --- /dev/null +++ b/addons/interactions/manager.js @@ -0,0 +1 @@ +import './dist/esm/manager'; diff --git a/addons/interactions/package.json b/addons/interactions/package.json index 33a8270bed7..5f8a270d96d 100644 --- a/addons/interactions/package.json +++ b/addons/interactions/package.json @@ -43,6 +43,7 @@ "dependencies": { "@storybook/addons": "6.5.0-alpha.49", "@storybook/api": "6.5.0-alpha.49", + "@storybook/client-logger": "6.5.0-alpha.49", "@storybook/components": "6.5.0-alpha.49", "@storybook/core-common": "6.5.0-alpha.49", "@storybook/core-events": "6.5.0-alpha.49", diff --git a/addons/interactions/preset.js b/addons/interactions/preset.js index aeb3255f85e..fb325c5b170 100644 --- a/addons/interactions/preset.js +++ b/addons/interactions/preset.js @@ -1,15 +1,10 @@ -function config(entry = []) { - return [...entry, require.resolve('./dist/esm/preset/argsEnhancers')]; -} +const { checkActionsLoaded } = require('./dist/cjs/preset/checkActionsLoaded'); -function managerEntries(entry = [], options) { - // eslint-disable-next-line global-require - const { checkActionsLoaded } = require('./dist/cjs/preset/checkActionsLoaded'); +function previewAnnotations(entry = [], options) { checkActionsLoaded(options.configDir); - return [...entry, require.resolve('./dist/esm/manager')]; + return entry; } module.exports = { - config, - managerEntries, + previewAnnotations, }; diff --git a/addons/interactions/preview.js b/addons/interactions/preview.js new file mode 100644 index 00000000000..7817e1d278d --- /dev/null +++ b/addons/interactions/preview.js @@ -0,0 +1 @@ +export * from './dist/esm/preset/preview'; diff --git a/addons/interactions/register.js b/addons/interactions/register.js index 4e287d25b15..2d916bea61a 100644 --- a/addons/interactions/register.js +++ b/addons/interactions/register.js @@ -1 +1,6 @@ -import './dist/esm/manager'; +import { once } from '@storybook/client-logger'; +import './manager'; + +once.warn( + 'register.js is deprecated see https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated-registerjs' +); diff --git a/addons/interactions/src/preset/argsEnhancers.ts b/addons/interactions/src/preset/preview.ts similarity index 100% rename from addons/interactions/src/preset/argsEnhancers.ts rename to addons/interactions/src/preset/preview.ts diff --git a/yarn.lock b/yarn.lock index 9cf75a60687..92de508052a 100644 --- a/yarn.lock +++ b/yarn.lock @@ -6459,6 +6459,7 @@ __metadata: dependencies: "@storybook/addons": 6.5.0-alpha.49 "@storybook/api": 6.5.0-alpha.49 + "@storybook/client-logger": 6.5.0-alpha.49 "@storybook/components": 6.5.0-alpha.49 "@storybook/core-common": 6.5.0-alpha.49 "@storybook/core-events": 6.5.0-alpha.49 From 3435932fe6636eb8182188cb2b8a4abb6f622681 Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Wed, 23 Mar 2022 03:44:48 +0800 Subject: [PATCH 057/171] Update snapshots --- .../src/__snapshots__/cra-ts-essentials_manager-dev-posix | 2 +- .../src/__snapshots__/cra-ts-essentials_manager-prod-posix | 2 +- .../src/__snapshots__/cra-ts-essentials_preview-dev-posix | 2 +- .../src/__snapshots__/cra-ts-essentials_preview-prod-posix | 2 +- .../src/__snapshots__/html-kitchen-sink_manager-dev-posix | 2 +- .../src/__snapshots__/html-kitchen-sink_manager-prod-posix | 2 +- .../src/__snapshots__/html-kitchen-sink_preview-dev-posix | 2 +- .../src/__snapshots__/html-kitchen-sink_preview-prod-posix | 2 +- lib/core-server/src/__snapshots__/vue-3-cli_manager-dev-posix | 4 ++-- .../src/__snapshots__/vue-3-cli_manager-prod-posix | 4 ++-- lib/core-server/src/__snapshots__/vue-3-cli_preview-dev-posix | 4 ++-- .../src/__snapshots__/vue-3-cli_preview-prod-posix | 4 ++-- .../web-components-kitchen-sink_manager-dev-posix | 4 ++-- .../web-components-kitchen-sink_manager-prod-posix | 4 ++-- .../web-components-kitchen-sink_preview-dev-posix | 4 ++-- .../web-components-kitchen-sink_preview-prod-posix | 4 ++-- 16 files changed, 24 insertions(+), 24 deletions(-) diff --git a/lib/core-server/src/__snapshots__/cra-ts-essentials_manager-dev-posix b/lib/core-server/src/__snapshots__/cra-ts-essentials_manager-dev-posix index a36ef6e6ff2..d4595ce3ec4 100644 --- a/lib/core-server/src/__snapshots__/cra-ts-essentials_manager-dev-posix +++ b/lib/core-server/src/__snapshots__/cra-ts-essentials_manager-dev-posix @@ -6,7 +6,7 @@ Object { "NODE_MODULES/@storybook/addon-ie11/dist/event-source-polyfill.js", "ROOT/lib/core-client/dist/esm/globals/polyfills.js", "ROOT/lib/core-client/dist/esm/manager/index.js", - "ROOT/addons/docs/dist/esm/manager", + "ROOT/addons/docs/manager.js", "ROOT/addons/controls/manager.js", "ROOT/addons/controls/register.js", "ROOT/addons/actions/manager.js", diff --git a/lib/core-server/src/__snapshots__/cra-ts-essentials_manager-prod-posix b/lib/core-server/src/__snapshots__/cra-ts-essentials_manager-prod-posix index 786da535d7a..19a729b4c6c 100644 --- a/lib/core-server/src/__snapshots__/cra-ts-essentials_manager-prod-posix +++ b/lib/core-server/src/__snapshots__/cra-ts-essentials_manager-prod-posix @@ -6,7 +6,7 @@ Object { "NODE_MODULES/@storybook/addon-ie11/dist/event-source-polyfill.js", "ROOT/lib/core-client/dist/esm/globals/polyfills.js", "ROOT/lib/core-client/dist/esm/manager/index.js", - "ROOT/addons/docs/dist/esm/manager", + "ROOT/addons/docs/manager.js", "ROOT/addons/controls/manager.js", "ROOT/addons/controls/register.js", "ROOT/addons/actions/manager.js", diff --git a/lib/core-server/src/__snapshots__/cra-ts-essentials_preview-dev-posix b/lib/core-server/src/__snapshots__/cra-ts-essentials_preview-dev-posix index 638c4088a72..b176dda51d3 100644 --- a/lib/core-server/src/__snapshots__/cra-ts-essentials_preview-dev-posix +++ b/lib/core-server/src/__snapshots__/cra-ts-essentials_preview-dev-posix @@ -8,7 +8,7 @@ Object { "NODE_MODULES/webpack-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined", "NODE_MODULES/@storybook/addon-ie11/dist/event-source-polyfill.js", "ROOT/storybook-init-framework-entry.js", - "ROOT/addons/docs/dist/esm/frameworks/common/config-generated-config-entry.js", + "ROOT/addons/docs/preview.js-generated-config-entry.js", "ROOT/addons/actions/preview.js-generated-config-entry.js", "ROOT/addons/backgrounds/preview.js-generated-config-entry.js", "ROOT/addons/measure/preview.js-generated-config-entry.js", diff --git a/lib/core-server/src/__snapshots__/cra-ts-essentials_preview-prod-posix b/lib/core-server/src/__snapshots__/cra-ts-essentials_preview-prod-posix index 31d204b48ff..fac25ec22a2 100644 --- a/lib/core-server/src/__snapshots__/cra-ts-essentials_preview-prod-posix +++ b/lib/core-server/src/__snapshots__/cra-ts-essentials_preview-prod-posix @@ -7,7 +7,7 @@ Object { "ROOT/lib/core-client/dist/esm/globals/globals.js", "NODE_MODULES/@storybook/addon-ie11/dist/event-source-polyfill.js", "ROOT/storybook-init-framework-entry.js", - "ROOT/addons/docs/dist/esm/frameworks/common/config-generated-config-entry.js", + "ROOT/addons/docs/preview.js-generated-config-entry.js", "ROOT/addons/actions/preview.js-generated-config-entry.js", "ROOT/addons/backgrounds/preview.js-generated-config-entry.js", "ROOT/addons/measure/preview.js-generated-config-entry.js", diff --git a/lib/core-server/src/__snapshots__/html-kitchen-sink_manager-dev-posix b/lib/core-server/src/__snapshots__/html-kitchen-sink_manager-dev-posix index 197b1899749..ea35099f4de 100644 --- a/lib/core-server/src/__snapshots__/html-kitchen-sink_manager-dev-posix +++ b/lib/core-server/src/__snapshots__/html-kitchen-sink_manager-dev-posix @@ -5,7 +5,7 @@ Object { "entry": Array [ "ROOT/lib/core-client/dist/esm/globals/polyfills.js", "ROOT/lib/core-client/dist/esm/manager/index.js", - "ROOT/addons/docs/dist/esm/manager", + "ROOT/addons/docs/manager.js", "ROOT/addons/a11y/manager.js", "ROOT/addons/a11y/register.js", "ROOT/addons/actions/manager.js", diff --git a/lib/core-server/src/__snapshots__/html-kitchen-sink_manager-prod-posix b/lib/core-server/src/__snapshots__/html-kitchen-sink_manager-prod-posix index 1110f7a5218..f0c8b118dbe 100644 --- a/lib/core-server/src/__snapshots__/html-kitchen-sink_manager-prod-posix +++ b/lib/core-server/src/__snapshots__/html-kitchen-sink_manager-prod-posix @@ -5,7 +5,7 @@ Object { "entry": Array [ "ROOT/lib/core-client/dist/esm/globals/polyfills.js", "ROOT/lib/core-client/dist/esm/manager/index.js", - "ROOT/addons/docs/dist/esm/manager", + "ROOT/addons/docs/manager.js", "ROOT/addons/a11y/manager.js", "ROOT/addons/a11y/register.js", "ROOT/addons/actions/manager.js", diff --git a/lib/core-server/src/__snapshots__/html-kitchen-sink_preview-dev-posix b/lib/core-server/src/__snapshots__/html-kitchen-sink_preview-dev-posix index 5ca122ce962..5d3a3fd02b3 100644 --- a/lib/core-server/src/__snapshots__/html-kitchen-sink_preview-dev-posix +++ b/lib/core-server/src/__snapshots__/html-kitchen-sink_preview-dev-posix @@ -7,7 +7,7 @@ Object { "ROOT/lib/core-client/dist/esm/globals/globals.js", "NODE_MODULES/webpack-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined", "ROOT/storybook-init-framework-entry.js", - "ROOT/addons/docs/dist/esm/frameworks/common/config-generated-config-entry.js", + "ROOT/addons/docs/preview.js-generated-config-entry.js", "ROOT/addons/a11y/preview.js-generated-config-entry.js", "ROOT/addons/actions/preview.js-generated-config-entry.js", "ROOT/addons/backgrounds/preview.js-generated-config-entry.js", diff --git a/lib/core-server/src/__snapshots__/html-kitchen-sink_preview-prod-posix b/lib/core-server/src/__snapshots__/html-kitchen-sink_preview-prod-posix index 543c87ed429..72678b9f8f4 100644 --- a/lib/core-server/src/__snapshots__/html-kitchen-sink_preview-prod-posix +++ b/lib/core-server/src/__snapshots__/html-kitchen-sink_preview-prod-posix @@ -6,7 +6,7 @@ Object { "ROOT/lib/core-client/dist/esm/globals/polyfills.js", "ROOT/lib/core-client/dist/esm/globals/globals.js", "ROOT/storybook-init-framework-entry.js", - "ROOT/addons/docs/dist/esm/frameworks/common/config-generated-config-entry.js", + "ROOT/addons/docs/preview.js-generated-config-entry.js", "ROOT/addons/a11y/preview.js-generated-config-entry.js", "ROOT/addons/actions/preview.js-generated-config-entry.js", "ROOT/addons/backgrounds/preview.js-generated-config-entry.js", diff --git a/lib/core-server/src/__snapshots__/vue-3-cli_manager-dev-posix b/lib/core-server/src/__snapshots__/vue-3-cli_manager-dev-posix index 3f744a82fff..5c55aa8f424 100644 --- a/lib/core-server/src/__snapshots__/vue-3-cli_manager-dev-posix +++ b/lib/core-server/src/__snapshots__/vue-3-cli_manager-dev-posix @@ -7,7 +7,7 @@ Object { "ROOT/lib/core-client/dist/esm/manager/index.js", "ROOT/addons/links/manager.js", "ROOT/addons/links/register.js", - "ROOT/addons/docs/dist/esm/manager", + "ROOT/addons/docs/manager.js", "ROOT/addons/controls/manager.js", "ROOT/addons/controls/register.js", "ROOT/addons/actions/manager.js", @@ -22,7 +22,7 @@ Object { "ROOT/addons/measure/register.js", "ROOT/addons/outline/manager.js", "ROOT/addons/outline/register.js", - "ROOT/addons/interactions/dist/esm/manager.js", + "ROOT/addons/interactions/manager.js", ], "keys": Array [ "name", diff --git a/lib/core-server/src/__snapshots__/vue-3-cli_manager-prod-posix b/lib/core-server/src/__snapshots__/vue-3-cli_manager-prod-posix index 66e1f6ba17c..2c96023c5cc 100644 --- a/lib/core-server/src/__snapshots__/vue-3-cli_manager-prod-posix +++ b/lib/core-server/src/__snapshots__/vue-3-cli_manager-prod-posix @@ -7,7 +7,7 @@ Object { "ROOT/lib/core-client/dist/esm/manager/index.js", "ROOT/addons/links/manager.js", "ROOT/addons/links/register.js", - "ROOT/addons/docs/dist/esm/manager", + "ROOT/addons/docs/manager.js", "ROOT/addons/controls/manager.js", "ROOT/addons/controls/register.js", "ROOT/addons/actions/manager.js", @@ -22,7 +22,7 @@ Object { "ROOT/addons/measure/register.js", "ROOT/addons/outline/manager.js", "ROOT/addons/outline/register.js", - "ROOT/addons/interactions/dist/esm/manager.js", + "ROOT/addons/interactions/manager.js", ], "keys": Array [ "name", diff --git a/lib/core-server/src/__snapshots__/vue-3-cli_preview-dev-posix b/lib/core-server/src/__snapshots__/vue-3-cli_preview-dev-posix index 5532938a537..ebd506ced96 100644 --- a/lib/core-server/src/__snapshots__/vue-3-cli_preview-dev-posix +++ b/lib/core-server/src/__snapshots__/vue-3-cli_preview-dev-posix @@ -7,15 +7,15 @@ Object { "ROOT/lib/core-client/dist/esm/globals/globals.js", "NODE_MODULES/webpack-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined", "ROOT/storybook-init-framework-entry.js", - "ROOT/addons/docs/dist/esm/frameworks/common/config-generated-config-entry.js", "ROOT/addons/links/preview.js-generated-config-entry.js", + "ROOT/addons/docs/preview.js-generated-config-entry.js", "ROOT/addons/actions/preview.js-generated-config-entry.js", "ROOT/addons/backgrounds/preview.js-generated-config-entry.js", "ROOT/addons/measure/preview.js-generated-config-entry.js", "ROOT/addons/outline/preview.js-generated-config-entry.js", + "ROOT/addons/interactions/preview.js-generated-config-entry.js", "ROOT/app/vue3/dist/esm/client/preview/config-generated-config-entry.js", "ROOT/app/vue3/dist/esm/client/docs/config-generated-config-entry.js", - "ROOT/addons/interactions/dist/esm/preset/argsEnhancers.js-generated-config-entry.js", "ROOT/examples/vue-3-cli/.storybook/preview.ts-generated-config-entry.js", "ROOT/generated-stories-entry.js", ], diff --git a/lib/core-server/src/__snapshots__/vue-3-cli_preview-prod-posix b/lib/core-server/src/__snapshots__/vue-3-cli_preview-prod-posix index d754c551e5c..f6c3e181352 100644 --- a/lib/core-server/src/__snapshots__/vue-3-cli_preview-prod-posix +++ b/lib/core-server/src/__snapshots__/vue-3-cli_preview-prod-posix @@ -6,15 +6,15 @@ Object { "ROOT/lib/core-client/dist/esm/globals/polyfills.js", "ROOT/lib/core-client/dist/esm/globals/globals.js", "ROOT/storybook-init-framework-entry.js", - "ROOT/addons/docs/dist/esm/frameworks/common/config-generated-config-entry.js", "ROOT/addons/links/preview.js-generated-config-entry.js", + "ROOT/addons/docs/preview.js-generated-config-entry.js", "ROOT/addons/actions/preview.js-generated-config-entry.js", "ROOT/addons/backgrounds/preview.js-generated-config-entry.js", "ROOT/addons/measure/preview.js-generated-config-entry.js", "ROOT/addons/outline/preview.js-generated-config-entry.js", + "ROOT/addons/interactions/preview.js-generated-config-entry.js", "ROOT/app/vue3/dist/esm/client/preview/config-generated-config-entry.js", "ROOT/app/vue3/dist/esm/client/docs/config-generated-config-entry.js", - "ROOT/addons/interactions/dist/esm/preset/argsEnhancers.js-generated-config-entry.js", "ROOT/examples/vue-3-cli/.storybook/preview.ts-generated-config-entry.js", "ROOT/generated-stories-entry.js", ], diff --git a/lib/core-server/src/__snapshots__/web-components-kitchen-sink_manager-dev-posix b/lib/core-server/src/__snapshots__/web-components-kitchen-sink_manager-dev-posix index 5657b085d56..a500abda4d3 100644 --- a/lib/core-server/src/__snapshots__/web-components-kitchen-sink_manager-dev-posix +++ b/lib/core-server/src/__snapshots__/web-components-kitchen-sink_manager-dev-posix @@ -5,7 +5,7 @@ Object { "entry": Array [ "ROOT/lib/core-client/dist/esm/globals/polyfills.js", "ROOT/lib/core-client/dist/esm/manager/index.js", - "ROOT/addons/docs/dist/esm/manager", + "ROOT/addons/docs/manager.js", "ROOT/addons/controls/manager.js", "ROOT/addons/controls/register.js", "ROOT/addons/a11y/manager.js", @@ -14,7 +14,7 @@ Object { "ROOT/addons/actions/register.js", "ROOT/addons/backgrounds/manager.js", "ROOT/addons/backgrounds/register.js", - "ROOT/addons/interactions/dist/esm/manager.js", + "ROOT/addons/interactions/manager.js", "ROOT/addons/links/manager.js", "ROOT/addons/links/register.js", "ROOT/addons/storysource/dist/esm/manager.js", diff --git a/lib/core-server/src/__snapshots__/web-components-kitchen-sink_manager-prod-posix b/lib/core-server/src/__snapshots__/web-components-kitchen-sink_manager-prod-posix index 99207dd738a..566d60a3f8a 100644 --- a/lib/core-server/src/__snapshots__/web-components-kitchen-sink_manager-prod-posix +++ b/lib/core-server/src/__snapshots__/web-components-kitchen-sink_manager-prod-posix @@ -5,7 +5,7 @@ Object { "entry": Array [ "ROOT/lib/core-client/dist/esm/globals/polyfills.js", "ROOT/lib/core-client/dist/esm/manager/index.js", - "ROOT/addons/docs/dist/esm/manager", + "ROOT/addons/docs/manager.js", "ROOT/addons/controls/manager.js", "ROOT/addons/controls/register.js", "ROOT/addons/a11y/manager.js", @@ -14,7 +14,7 @@ Object { "ROOT/addons/actions/register.js", "ROOT/addons/backgrounds/manager.js", "ROOT/addons/backgrounds/register.js", - "ROOT/addons/interactions/dist/esm/manager.js", + "ROOT/addons/interactions/manager.js", "ROOT/addons/links/manager.js", "ROOT/addons/links/register.js", "ROOT/addons/storysource/dist/esm/manager.js", diff --git a/lib/core-server/src/__snapshots__/web-components-kitchen-sink_preview-dev-posix b/lib/core-server/src/__snapshots__/web-components-kitchen-sink_preview-dev-posix index 0873007c475..3faa6ee6e67 100644 --- a/lib/core-server/src/__snapshots__/web-components-kitchen-sink_preview-dev-posix +++ b/lib/core-server/src/__snapshots__/web-components-kitchen-sink_preview-dev-posix @@ -7,14 +7,14 @@ Object { "ROOT/lib/core-client/dist/esm/globals/globals.js", "NODE_MODULES/webpack-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined", "ROOT/storybook-init-framework-entry.js", - "ROOT/addons/docs/dist/esm/frameworks/common/config-generated-config-entry.js", + "ROOT/addons/docs/preview.js-generated-config-entry.js", "ROOT/addons/a11y/preview.js-generated-config-entry.js", "ROOT/addons/actions/preview.js-generated-config-entry.js", "ROOT/addons/backgrounds/preview.js-generated-config-entry.js", + "ROOT/addons/interactions/preview.js-generated-config-entry.js", "ROOT/addons/links/preview.js-generated-config-entry.js", "ROOT/app/web-components/dist/esm/client/preview/config-generated-config-entry.js", "ROOT/app/web-components/dist/esm/client/docs/config-generated-config-entry.js", - "ROOT/addons/interactions/dist/esm/preset/argsEnhancers.js-generated-config-entry.js", "ROOT/examples/web-components-kitchen-sink/.storybook/preview.js-generated-config-entry.js", "ROOT/generated-stories-entry.js", ], diff --git a/lib/core-server/src/__snapshots__/web-components-kitchen-sink_preview-prod-posix b/lib/core-server/src/__snapshots__/web-components-kitchen-sink_preview-prod-posix index 7f5e7871f4e..7e9a725449d 100644 --- a/lib/core-server/src/__snapshots__/web-components-kitchen-sink_preview-prod-posix +++ b/lib/core-server/src/__snapshots__/web-components-kitchen-sink_preview-prod-posix @@ -6,14 +6,14 @@ Object { "ROOT/lib/core-client/dist/esm/globals/polyfills.js", "ROOT/lib/core-client/dist/esm/globals/globals.js", "ROOT/storybook-init-framework-entry.js", - "ROOT/addons/docs/dist/esm/frameworks/common/config-generated-config-entry.js", + "ROOT/addons/docs/preview.js-generated-config-entry.js", "ROOT/addons/a11y/preview.js-generated-config-entry.js", "ROOT/addons/actions/preview.js-generated-config-entry.js", "ROOT/addons/backgrounds/preview.js-generated-config-entry.js", + "ROOT/addons/interactions/preview.js-generated-config-entry.js", "ROOT/addons/links/preview.js-generated-config-entry.js", "ROOT/app/web-components/dist/esm/client/preview/config-generated-config-entry.js", "ROOT/app/web-components/dist/esm/client/docs/config-generated-config-entry.js", - "ROOT/addons/interactions/dist/esm/preset/argsEnhancers.js-generated-config-entry.js", "ROOT/examples/web-components-kitchen-sink/.storybook/preview.js-generated-config-entry.js", "ROOT/generated-stories-entry.js", ], From d92eff6a3cc40ad782f3a2d37a029ca54bf3d65c Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Wed, 23 Mar 2022 04:03:19 +0800 Subject: [PATCH 058/171] Fix interactions entry --- addons/interactions/package.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/addons/interactions/package.json b/addons/interactions/package.json index 5f8a270d96d..8394cccfba5 100644 --- a/addons/interactions/package.json +++ b/addons/interactions/package.json @@ -21,8 +21,8 @@ "url": "https://opencollective.com/storybook" }, "license": "MIT", - "main": "dist/cjs/manager.js", - "module": "dist/esm/manager.js", + "main": "dist/cjs/index.js", + "module": "dist/esm/index.js", "types": "dist/ts3.9/index.d.ts", "typesVersions": { "<3.8": { From 6e3d51e718eb2e1b4e915b11d608f7ec193e0eca Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Wed, 23 Mar 2022 10:21:19 +0800 Subject: [PATCH 059/171] Switch frameworks to use previewAnnotations --- app/angular/src/server/framework-preset-angular-docs.ts | 2 +- app/angular/src/server/preset.ts | 2 +- app/ember/src/server/framework-preset-babel-ember.ts | 2 +- app/ember/src/server/framework-preset-ember-docs.ts | 2 +- app/html/src/server/framework-preset-html-docs.ts | 2 +- app/html/src/server/framework-preset-html.ts | 2 +- app/preact/src/server/framework-preset-preact.ts | 2 +- app/react/src/server/framework-preset-react-docs.ts | 2 +- app/react/src/server/preset.ts | 2 +- app/server/src/server/framework-preset-server.ts | 2 +- app/svelte/src/server/framework-preset-svelte-docs.ts | 2 +- app/svelte/src/server/framework-preset-svelte.ts | 2 +- app/vue/src/server/framework-preset-vue-docs.ts | 2 +- app/vue/src/server/framework-preset-vue.ts | 2 +- app/vue3/src/server/framework-preset-vue3-docs.ts | 2 +- app/vue3/src/server/framework-preset-vue3.ts | 2 +- .../src/server/framework-preset-web-components-docs.ts | 2 +- .../src/server/framework-preset-web-components.ts | 2 +- 18 files changed, 18 insertions(+), 18 deletions(-) diff --git a/app/angular/src/server/framework-preset-angular-docs.ts b/app/angular/src/server/framework-preset-angular-docs.ts index 314ef6039f3..1c2cac0c15e 100644 --- a/app/angular/src/server/framework-preset-angular-docs.ts +++ b/app/angular/src/server/framework-preset-angular-docs.ts @@ -2,7 +2,7 @@ import path from 'path'; import { StorybookConfig } from '@storybook/core-common'; import { hasDocsOrControls } from '@storybook/docs-tools'; -export const config: StorybookConfig['config'] = (entry = [], options) => { +export const previewAnnotations: StorybookConfig['previewAnnotations'] = (entry = [], options) => { if (!hasDocsOrControls(options)) return entry; return [...entry, path.join(__dirname, '../../../dist/ts3.9/client/docs/config')]; }; diff --git a/app/angular/src/server/preset.ts b/app/angular/src/server/preset.ts index ab7d7dd6305..65dc2fa28dc 100644 --- a/app/angular/src/server/preset.ts +++ b/app/angular/src/server/preset.ts @@ -1,6 +1,6 @@ import type { StorybookConfig } from '@storybook/core-common'; -export const config: StorybookConfig['config'] = (entries = []) => [ +export const previewAnnotations: StorybookConfig['previewAnnotations'] = (entries = []) => [ ...entries, require.resolve('../client/preview/config'), ]; diff --git a/app/ember/src/server/framework-preset-babel-ember.ts b/app/ember/src/server/framework-preset-babel-ember.ts index 85bb723bee7..da857b38fad 100644 --- a/app/ember/src/server/framework-preset-babel-ember.ts +++ b/app/ember/src/server/framework-preset-babel-ember.ts @@ -48,6 +48,6 @@ export function babel(config: TransformOptions, options: Options): TransformOpti }; } -export const config: StorybookConfig['config'] = (entry = []) => { +export const previewAnnotations: StorybookConfig['previewAnnotations'] = (entry = []) => { return [...entry, findDistEsm(__dirname, 'client/preview/config')]; }; diff --git a/app/ember/src/server/framework-preset-ember-docs.ts b/app/ember/src/server/framework-preset-ember-docs.ts index c2e6f69be8f..2cdcc56e7cb 100644 --- a/app/ember/src/server/framework-preset-ember-docs.ts +++ b/app/ember/src/server/framework-preset-ember-docs.ts @@ -2,7 +2,7 @@ import type { StorybookConfig } from '@storybook/core-common'; import { findDistEsm } from '@storybook/core-common'; import { hasDocsOrControls } from '@storybook/docs-tools'; -export const config: StorybookConfig['config'] = (entry = [], options) => { +export const previewAnnotations: StorybookConfig['previewAnnotations'] = (entry = [], options) => { if (!hasDocsOrControls(options)) return entry; return [...entry, findDistEsm(__dirname, 'client/docs/config')]; }; diff --git a/app/html/src/server/framework-preset-html-docs.ts b/app/html/src/server/framework-preset-html-docs.ts index c2e6f69be8f..2cdcc56e7cb 100644 --- a/app/html/src/server/framework-preset-html-docs.ts +++ b/app/html/src/server/framework-preset-html-docs.ts @@ -2,7 +2,7 @@ import type { StorybookConfig } from '@storybook/core-common'; import { findDistEsm } from '@storybook/core-common'; import { hasDocsOrControls } from '@storybook/docs-tools'; -export const config: StorybookConfig['config'] = (entry = [], options) => { +export const previewAnnotations: StorybookConfig['previewAnnotations'] = (entry = [], options) => { if (!hasDocsOrControls(options)) return entry; return [...entry, findDistEsm(__dirname, 'client/docs/config')]; }; diff --git a/app/html/src/server/framework-preset-html.ts b/app/html/src/server/framework-preset-html.ts index 10b69f8fafd..48108689827 100644 --- a/app/html/src/server/framework-preset-html.ts +++ b/app/html/src/server/framework-preset-html.ts @@ -11,6 +11,6 @@ export function webpack(config: Configuration) { return config; } -export const config: StorybookConfig['config'] = (entry = []) => { +export const previewAnnotations: StorybookConfig['previewAnnotations'] = (entry = []) => { return [...entry, findDistEsm(__dirname, 'client/preview/config')]; }; diff --git a/app/preact/src/server/framework-preset-preact.ts b/app/preact/src/server/framework-preset-preact.ts index 034cd1f4f72..9a50492d348 100644 --- a/app/preact/src/server/framework-preset-preact.ts +++ b/app/preact/src/server/framework-preset-preact.ts @@ -29,6 +29,6 @@ export function webpackFinal(config: Configuration): Configuration { }; } -export const config: StorybookConfig['config'] = (entry = []) => { +export const previewAnnotations: StorybookConfig['previewAnnotations'] = (entry = []) => { return [...entry, findDistEsm(__dirname, 'client/preview/config')]; }; diff --git a/app/react/src/server/framework-preset-react-docs.ts b/app/react/src/server/framework-preset-react-docs.ts index 723cf49a9f2..98f9c12145b 100644 --- a/app/react/src/server/framework-preset-react-docs.ts +++ b/app/react/src/server/framework-preset-react-docs.ts @@ -58,7 +58,7 @@ export async function webpackFinal(config: Configuration, options: Options) { }; } -export const config: StorybookConfig['config'] = (entry = [], options) => { +export const previewAnnotations: StorybookConfig['previewAnnotations'] = (entry = [], options) => { if (!hasDocsOrControls(options)) return entry; return [...entry, findDistEsm(__dirname, 'client/docs/config')]; }; diff --git a/app/react/src/server/preset.ts b/app/react/src/server/preset.ts index b0807877e88..87f491ca3ae 100644 --- a/app/react/src/server/preset.ts +++ b/app/react/src/server/preset.ts @@ -1,7 +1,7 @@ import { findDistEsm } from '@storybook/core-common'; import type { StorybookConfig } from '@storybook/core-common'; -export const config: StorybookConfig['config'] = (entries = []) => [ +export const previewAnnotations: StorybookConfig['previewAnnotations'] = (entries = []) => [ ...entries, findDistEsm(__dirname, 'client/preview/config'), ]; diff --git a/app/server/src/server/framework-preset-server.ts b/app/server/src/server/framework-preset-server.ts index ddde3f77f7d..f4f552890b7 100644 --- a/app/server/src/server/framework-preset-server.ts +++ b/app/server/src/server/framework-preset-server.ts @@ -19,6 +19,6 @@ export function webpack(config: Configuration) { return config; } -export const config: StorybookConfig['config'] = (entry = []) => { +export const previewAnnotations: StorybookConfig['previewAnnotations'] = (entry = []) => { return [...entry, findDistEsm(__dirname, 'client/preview/config')]; }; diff --git a/app/svelte/src/server/framework-preset-svelte-docs.ts b/app/svelte/src/server/framework-preset-svelte-docs.ts index ba1a7fee016..4160fc5d40d 100644 --- a/app/svelte/src/server/framework-preset-svelte-docs.ts +++ b/app/svelte/src/server/framework-preset-svelte-docs.ts @@ -17,6 +17,6 @@ export async function webpackFinal(webpackConfig: Configuration, options: Option return webpackConfig; } -export const config: StorybookConfig['config'] = (entry = []) => { +export const previewAnnotations: StorybookConfig['previewAnnotations'] = (entry = []) => { return [...entry, findDistEsm(__dirname, 'client/docs/config')]; }; diff --git a/app/svelte/src/server/framework-preset-svelte.ts b/app/svelte/src/server/framework-preset-svelte.ts index a9bec1dc610..d3e10fbf749 100644 --- a/app/svelte/src/server/framework-preset-svelte.ts +++ b/app/svelte/src/server/framework-preset-svelte.ts @@ -33,6 +33,6 @@ export async function webpack(config: Configuration, options: Options): Promise< }; } -export const config: StorybookConfig['config'] = (entry = []) => { +export const previewAnnotations: StorybookConfig['previewAnnotations'] = (entry = []) => { return [...entry, findDistEsm(__dirname, 'client/preview/config')]; }; diff --git a/app/vue/src/server/framework-preset-vue-docs.ts b/app/vue/src/server/framework-preset-vue-docs.ts index 478196fa0d8..984fa07c49c 100644 --- a/app/vue/src/server/framework-preset-vue-docs.ts +++ b/app/vue/src/server/framework-preset-vue-docs.ts @@ -30,7 +30,7 @@ export function webpackFinal(webpackConfig: any = {}, options: Options) { return webpackConfig; } -export const config: StorybookConfig['config'] = (entry = [], options) => { +export const previewAnnotations: StorybookConfig['previewAnnotations'] = (entry = [], options) => { if (!hasDocsOrControls(options)) return entry; return [...entry, findDistEsm(__dirname, 'client/docs/config')]; }; diff --git a/app/vue/src/server/framework-preset-vue.ts b/app/vue/src/server/framework-preset-vue.ts index 5ca2341d674..8656d8d3506 100644 --- a/app/vue/src/server/framework-preset-vue.ts +++ b/app/vue/src/server/framework-preset-vue.ts @@ -45,6 +45,6 @@ export async function webpack(config: Configuration, { presets }: Options) { return config; } -export const config: StorybookConfig['config'] = (entry = []) => { +export const previewAnnotations: StorybookConfig['previewAnnotations'] = (entry = []) => { return [...entry, findDistEsm(__dirname, 'client/preview/config')]; }; diff --git a/app/vue3/src/server/framework-preset-vue3-docs.ts b/app/vue3/src/server/framework-preset-vue3-docs.ts index 34e755af3f1..b97af76f15f 100644 --- a/app/vue3/src/server/framework-preset-vue3-docs.ts +++ b/app/vue3/src/server/framework-preset-vue3-docs.ts @@ -31,7 +31,7 @@ export function webpackFinal(webpackConfig: any = {}, options: Options) { return webpackConfig; } -export const config: StorybookConfig['config'] = (entry = [], options) => { +export const previewAnnotations: StorybookConfig['previewAnnotations'] = (entry = [], options) => { if (!hasDocsOrControls(options)) return entry; return [...entry, findDistEsm(__dirname, 'client/docs/config')]; }; diff --git a/app/vue3/src/server/framework-preset-vue3.ts b/app/vue3/src/server/framework-preset-vue3.ts index 0db63e4cd19..fb4dc76a288 100644 --- a/app/vue3/src/server/framework-preset-vue3.ts +++ b/app/vue3/src/server/framework-preset-vue3.ts @@ -48,6 +48,6 @@ export function webpack(config: Configuration): Configuration { }; } -export const config: StorybookConfig['config'] = (entry = []) => { +export const previewAnnotations: StorybookConfig['previewAnnotations'] = (entry = []) => { return [...entry, findDistEsm(__dirname, 'client/preview/config')]; }; diff --git a/app/web-components/src/server/framework-preset-web-components-docs.ts b/app/web-components/src/server/framework-preset-web-components-docs.ts index 507496e7407..31ccb922f3f 100644 --- a/app/web-components/src/server/framework-preset-web-components-docs.ts +++ b/app/web-components/src/server/framework-preset-web-components-docs.ts @@ -1,7 +1,7 @@ import { findDistEsm, StorybookConfig } from '@storybook/core-common'; import { hasDocsOrControls } from '@storybook/docs-tools'; -export const config: StorybookConfig['config'] = (entry = [], options) => { +export const previewAnnotations: StorybookConfig['previewAnnotations'] = (entry = [], options) => { if (!hasDocsOrControls(options)) return entry; return [...entry, findDistEsm(__dirname, 'client/docs/config')]; }; diff --git a/app/web-components/src/server/framework-preset-web-components.ts b/app/web-components/src/server/framework-preset-web-components.ts index 44e273ff8f3..19c53742094 100644 --- a/app/web-components/src/server/framework-preset-web-components.ts +++ b/app/web-components/src/server/framework-preset-web-components.ts @@ -41,6 +41,6 @@ export function webpack(config: Configuration, options: Options) { return config; } -export const config: StorybookConfig['config'] = (entry = []) => { +export const previewAnnotations: StorybookConfig['previewAnnotations'] = (entry = []) => { return [...entry, findDistEsm(__dirname, 'client/preview/config')]; }; From c60e104b74604af293111ac1f12153d45786cbe6 Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Wed, 23 Mar 2022 10:37:39 +0800 Subject: [PATCH 060/171] Update snapshots --- .../src/__snapshots__/cra-ts-essentials_preview-dev-posix | 4 ++-- .../src/__snapshots__/cra-ts-essentials_preview-prod-posix | 4 ++-- .../src/__snapshots__/html-kitchen-sink_preview-dev-posix | 4 ++-- .../src/__snapshots__/html-kitchen-sink_preview-prod-posix | 4 ++-- lib/core-server/src/__snapshots__/vue-3-cli_preview-dev-posix | 4 ++-- .../src/__snapshots__/vue-3-cli_preview-prod-posix | 4 ++-- .../web-components-kitchen-sink_preview-dev-posix | 4 ++-- .../web-components-kitchen-sink_preview-prod-posix | 4 ++-- 8 files changed, 16 insertions(+), 16 deletions(-) diff --git a/lib/core-server/src/__snapshots__/cra-ts-essentials_preview-dev-posix b/lib/core-server/src/__snapshots__/cra-ts-essentials_preview-dev-posix index b176dda51d3..d0ace629301 100644 --- a/lib/core-server/src/__snapshots__/cra-ts-essentials_preview-dev-posix +++ b/lib/core-server/src/__snapshots__/cra-ts-essentials_preview-dev-posix @@ -8,13 +8,13 @@ Object { "NODE_MODULES/webpack-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined", "NODE_MODULES/@storybook/addon-ie11/dist/event-source-polyfill.js", "ROOT/storybook-init-framework-entry.js", + "ROOT/app/react/dist/esm/client/docs/config-generated-config-entry.js", + "ROOT/app/react/dist/esm/client/preview/config-generated-config-entry.js", "ROOT/addons/docs/preview.js-generated-config-entry.js", "ROOT/addons/actions/preview.js-generated-config-entry.js", "ROOT/addons/backgrounds/preview.js-generated-config-entry.js", "ROOT/addons/measure/preview.js-generated-config-entry.js", "ROOT/addons/outline/preview.js-generated-config-entry.js", - "ROOT/app/react/dist/esm/client/docs/config-generated-config-entry.js", - "ROOT/app/react/dist/esm/client/preview/config-generated-config-entry.js", "ROOT/examples/cra-ts-essentials/.storybook/preview.js-generated-config-entry.js", "ROOT/generated-stories-entry.js", ], diff --git a/lib/core-server/src/__snapshots__/cra-ts-essentials_preview-prod-posix b/lib/core-server/src/__snapshots__/cra-ts-essentials_preview-prod-posix index fac25ec22a2..19dc8beb34e 100644 --- a/lib/core-server/src/__snapshots__/cra-ts-essentials_preview-prod-posix +++ b/lib/core-server/src/__snapshots__/cra-ts-essentials_preview-prod-posix @@ -7,13 +7,13 @@ Object { "ROOT/lib/core-client/dist/esm/globals/globals.js", "NODE_MODULES/@storybook/addon-ie11/dist/event-source-polyfill.js", "ROOT/storybook-init-framework-entry.js", + "ROOT/app/react/dist/esm/client/docs/config-generated-config-entry.js", + "ROOT/app/react/dist/esm/client/preview/config-generated-config-entry.js", "ROOT/addons/docs/preview.js-generated-config-entry.js", "ROOT/addons/actions/preview.js-generated-config-entry.js", "ROOT/addons/backgrounds/preview.js-generated-config-entry.js", "ROOT/addons/measure/preview.js-generated-config-entry.js", "ROOT/addons/outline/preview.js-generated-config-entry.js", - "ROOT/app/react/dist/esm/client/docs/config-generated-config-entry.js", - "ROOT/app/react/dist/esm/client/preview/config-generated-config-entry.js", "ROOT/examples/cra-ts-essentials/.storybook/preview.js-generated-config-entry.js", "ROOT/generated-stories-entry.js", ], diff --git a/lib/core-server/src/__snapshots__/html-kitchen-sink_preview-dev-posix b/lib/core-server/src/__snapshots__/html-kitchen-sink_preview-dev-posix index 5d3a3fd02b3..fef4e5b1e09 100644 --- a/lib/core-server/src/__snapshots__/html-kitchen-sink_preview-dev-posix +++ b/lib/core-server/src/__snapshots__/html-kitchen-sink_preview-dev-posix @@ -7,13 +7,13 @@ Object { "ROOT/lib/core-client/dist/esm/globals/globals.js", "NODE_MODULES/webpack-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined", "ROOT/storybook-init-framework-entry.js", + "ROOT/app/html/dist/esm/client/preview/config-generated-config-entry.js", + "ROOT/app/html/dist/esm/client/docs/config-generated-config-entry.js", "ROOT/addons/docs/preview.js-generated-config-entry.js", "ROOT/addons/a11y/preview.js-generated-config-entry.js", "ROOT/addons/actions/preview.js-generated-config-entry.js", "ROOT/addons/backgrounds/preview.js-generated-config-entry.js", "ROOT/addons/links/preview.js-generated-config-entry.js", - "ROOT/app/html/dist/esm/client/preview/config-generated-config-entry.js", - "ROOT/app/html/dist/esm/client/docs/config-generated-config-entry.js", "ROOT/examples/html-kitchen-sink/.storybook/preview.js-generated-config-entry.js", "ROOT/generated-stories-entry.js", ], diff --git a/lib/core-server/src/__snapshots__/html-kitchen-sink_preview-prod-posix b/lib/core-server/src/__snapshots__/html-kitchen-sink_preview-prod-posix index 72678b9f8f4..d1c67aacb00 100644 --- a/lib/core-server/src/__snapshots__/html-kitchen-sink_preview-prod-posix +++ b/lib/core-server/src/__snapshots__/html-kitchen-sink_preview-prod-posix @@ -6,13 +6,13 @@ Object { "ROOT/lib/core-client/dist/esm/globals/polyfills.js", "ROOT/lib/core-client/dist/esm/globals/globals.js", "ROOT/storybook-init-framework-entry.js", + "ROOT/app/html/dist/esm/client/preview/config-generated-config-entry.js", + "ROOT/app/html/dist/esm/client/docs/config-generated-config-entry.js", "ROOT/addons/docs/preview.js-generated-config-entry.js", "ROOT/addons/a11y/preview.js-generated-config-entry.js", "ROOT/addons/actions/preview.js-generated-config-entry.js", "ROOT/addons/backgrounds/preview.js-generated-config-entry.js", "ROOT/addons/links/preview.js-generated-config-entry.js", - "ROOT/app/html/dist/esm/client/preview/config-generated-config-entry.js", - "ROOT/app/html/dist/esm/client/docs/config-generated-config-entry.js", "ROOT/examples/html-kitchen-sink/.storybook/preview.js-generated-config-entry.js", "ROOT/generated-stories-entry.js", ], diff --git a/lib/core-server/src/__snapshots__/vue-3-cli_preview-dev-posix b/lib/core-server/src/__snapshots__/vue-3-cli_preview-dev-posix index ebd506ced96..64e4d88c7a9 100644 --- a/lib/core-server/src/__snapshots__/vue-3-cli_preview-dev-posix +++ b/lib/core-server/src/__snapshots__/vue-3-cli_preview-dev-posix @@ -7,6 +7,8 @@ Object { "ROOT/lib/core-client/dist/esm/globals/globals.js", "NODE_MODULES/webpack-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined", "ROOT/storybook-init-framework-entry.js", + "ROOT/app/vue3/dist/esm/client/preview/config-generated-config-entry.js", + "ROOT/app/vue3/dist/esm/client/docs/config-generated-config-entry.js", "ROOT/addons/links/preview.js-generated-config-entry.js", "ROOT/addons/docs/preview.js-generated-config-entry.js", "ROOT/addons/actions/preview.js-generated-config-entry.js", @@ -14,8 +16,6 @@ Object { "ROOT/addons/measure/preview.js-generated-config-entry.js", "ROOT/addons/outline/preview.js-generated-config-entry.js", "ROOT/addons/interactions/preview.js-generated-config-entry.js", - "ROOT/app/vue3/dist/esm/client/preview/config-generated-config-entry.js", - "ROOT/app/vue3/dist/esm/client/docs/config-generated-config-entry.js", "ROOT/examples/vue-3-cli/.storybook/preview.ts-generated-config-entry.js", "ROOT/generated-stories-entry.js", ], diff --git a/lib/core-server/src/__snapshots__/vue-3-cli_preview-prod-posix b/lib/core-server/src/__snapshots__/vue-3-cli_preview-prod-posix index f6c3e181352..9f1c9872be9 100644 --- a/lib/core-server/src/__snapshots__/vue-3-cli_preview-prod-posix +++ b/lib/core-server/src/__snapshots__/vue-3-cli_preview-prod-posix @@ -6,6 +6,8 @@ Object { "ROOT/lib/core-client/dist/esm/globals/polyfills.js", "ROOT/lib/core-client/dist/esm/globals/globals.js", "ROOT/storybook-init-framework-entry.js", + "ROOT/app/vue3/dist/esm/client/preview/config-generated-config-entry.js", + "ROOT/app/vue3/dist/esm/client/docs/config-generated-config-entry.js", "ROOT/addons/links/preview.js-generated-config-entry.js", "ROOT/addons/docs/preview.js-generated-config-entry.js", "ROOT/addons/actions/preview.js-generated-config-entry.js", @@ -13,8 +15,6 @@ Object { "ROOT/addons/measure/preview.js-generated-config-entry.js", "ROOT/addons/outline/preview.js-generated-config-entry.js", "ROOT/addons/interactions/preview.js-generated-config-entry.js", - "ROOT/app/vue3/dist/esm/client/preview/config-generated-config-entry.js", - "ROOT/app/vue3/dist/esm/client/docs/config-generated-config-entry.js", "ROOT/examples/vue-3-cli/.storybook/preview.ts-generated-config-entry.js", "ROOT/generated-stories-entry.js", ], diff --git a/lib/core-server/src/__snapshots__/web-components-kitchen-sink_preview-dev-posix b/lib/core-server/src/__snapshots__/web-components-kitchen-sink_preview-dev-posix index 3faa6ee6e67..12efbe2571e 100644 --- a/lib/core-server/src/__snapshots__/web-components-kitchen-sink_preview-dev-posix +++ b/lib/core-server/src/__snapshots__/web-components-kitchen-sink_preview-dev-posix @@ -7,14 +7,14 @@ Object { "ROOT/lib/core-client/dist/esm/globals/globals.js", "NODE_MODULES/webpack-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined", "ROOT/storybook-init-framework-entry.js", + "ROOT/app/web-components/dist/esm/client/preview/config-generated-config-entry.js", + "ROOT/app/web-components/dist/esm/client/docs/config-generated-config-entry.js", "ROOT/addons/docs/preview.js-generated-config-entry.js", "ROOT/addons/a11y/preview.js-generated-config-entry.js", "ROOT/addons/actions/preview.js-generated-config-entry.js", "ROOT/addons/backgrounds/preview.js-generated-config-entry.js", "ROOT/addons/interactions/preview.js-generated-config-entry.js", "ROOT/addons/links/preview.js-generated-config-entry.js", - "ROOT/app/web-components/dist/esm/client/preview/config-generated-config-entry.js", - "ROOT/app/web-components/dist/esm/client/docs/config-generated-config-entry.js", "ROOT/examples/web-components-kitchen-sink/.storybook/preview.js-generated-config-entry.js", "ROOT/generated-stories-entry.js", ], diff --git a/lib/core-server/src/__snapshots__/web-components-kitchen-sink_preview-prod-posix b/lib/core-server/src/__snapshots__/web-components-kitchen-sink_preview-prod-posix index 7e9a725449d..0a945360994 100644 --- a/lib/core-server/src/__snapshots__/web-components-kitchen-sink_preview-prod-posix +++ b/lib/core-server/src/__snapshots__/web-components-kitchen-sink_preview-prod-posix @@ -6,14 +6,14 @@ Object { "ROOT/lib/core-client/dist/esm/globals/polyfills.js", "ROOT/lib/core-client/dist/esm/globals/globals.js", "ROOT/storybook-init-framework-entry.js", + "ROOT/app/web-components/dist/esm/client/preview/config-generated-config-entry.js", + "ROOT/app/web-components/dist/esm/client/docs/config-generated-config-entry.js", "ROOT/addons/docs/preview.js-generated-config-entry.js", "ROOT/addons/a11y/preview.js-generated-config-entry.js", "ROOT/addons/actions/preview.js-generated-config-entry.js", "ROOT/addons/backgrounds/preview.js-generated-config-entry.js", "ROOT/addons/interactions/preview.js-generated-config-entry.js", "ROOT/addons/links/preview.js-generated-config-entry.js", - "ROOT/app/web-components/dist/esm/client/preview/config-generated-config-entry.js", - "ROOT/app/web-components/dist/esm/client/docs/config-generated-config-entry.js", "ROOT/examples/web-components-kitchen-sink/.storybook/preview.js-generated-config-entry.js", "ROOT/generated-stories-entry.js", ], From 30ee7a78bb8e3fbb063fb779980ded62363753b1 Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Wed, 23 Mar 2022 10:42:45 +0800 Subject: [PATCH 061/171] Ensure options get passed to virtual preset --- lib/core-common/src/presets.ts | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/lib/core-common/src/presets.ts b/lib/core-common/src/presets.ts index 16cab9827bf..319f1a19504 100644 --- a/lib/core-common/src/presets.ts +++ b/lib/core-common/src/presets.ts @@ -66,12 +66,13 @@ interface ResolvedAddonVirtual { name: string; managerEntries?: string[]; previewAnnotations?: string[]; - presets?: string[]; + presets?: (string | { name: string; options?: any })[]; } export const resolveAddonName = ( configDir: string, - name: string + name: string, + options: any ): ResolvedAddonPreset | ResolvedAddonVirtual => { const r = name.startsWith('/') ? safeResolve : safeResolveFrom.bind(null, configDir); const resolved = r(name); @@ -113,7 +114,7 @@ export const resolveAddonName = ( ? { managerEntries: [managerFile, !presetFile && registerFile].filter(Boolean) } : {}), ...(previewFile ? { previewAnnotations: [previewFile] } : {}), - ...(presetFile ? { presets: [presetFile] } : {}), + ...(presetFile ? { presets: [{ name: presetFile, options }] } : {}), }; } @@ -129,9 +130,10 @@ const map = const options = isObject(item) ? item.options || undefined : undefined; const name = isObject(item) ? item.name : item; try { + const resolved = resolveAddonName(configDir, name, options); return { ...(options ? { options } : {}), - ...resolveAddonName(configDir, name), + ...resolved, }; } catch (err) { logger.error( From 966ece81ab5d3226680dcfd4363f1e7b2e9f6e1b Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Wed, 23 Mar 2022 10:51:29 +0800 Subject: [PATCH 062/171] Fix StorybookConfig type --- lib/core-common/src/types.ts | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/lib/core-common/src/types.ts b/lib/core-common/src/types.ts index 371878343cb..b5c78a5cb36 100644 --- a/lib/core-common/src/types.ts +++ b/lib/core-common/src/types.ts @@ -412,6 +412,13 @@ export interface StorybookConfig { /** * Add additional scripts to run in the preview a la `.storybook/preview.js` + * + * @deprecated use `previewAnnotations` or `/preview.js` file instead */ config?: (entries: Entry[], options: Options) => Entry[]; + + /** + * Add additional scripts to run in the preview a la `.storybook/preview.js` + */ + previewAnnotations?: (entries: Entry[], options: Options) => Entry[]; } From 04b4954160a459560633e2dd1ceff90758fb8879 Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Wed, 23 Mar 2022 13:44:17 +0800 Subject: [PATCH 063/171] Fix lockfile --- .../web-components-kitchen-sink/yarn.lock | 310 +++++++++--------- 1 file changed, 155 insertions(+), 155 deletions(-) diff --git a/examples/web-components-kitchen-sink/yarn.lock b/examples/web-components-kitchen-sink/yarn.lock index 879e095c6a8..0bdc897dd80 100644 --- a/examples/web-components-kitchen-sink/yarn.lock +++ b/examples/web-components-kitchen-sink/yarn.lock @@ -2114,14 +2114,14 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/addon-a11y@portal:../../addons/a11y::locator=web-components-kitchen-sink%40workspace%3A." dependencies: - "@storybook/addons": 6.5.0-alpha.47 - "@storybook/api": 6.5.0-alpha.47 - "@storybook/channels": 6.5.0-alpha.47 - "@storybook/client-logger": 6.5.0-alpha.47 - "@storybook/components": 6.5.0-alpha.47 - "@storybook/core-events": 6.5.0-alpha.47 + "@storybook/addons": 6.5.0-alpha.49 + "@storybook/api": 6.5.0-alpha.49 + "@storybook/channels": 6.5.0-alpha.49 + "@storybook/client-logger": 6.5.0-alpha.49 + "@storybook/components": 6.5.0-alpha.49 + "@storybook/core-events": 6.5.0-alpha.49 "@storybook/csf": 0.0.2--canary.87bc651.0 - "@storybook/theming": 6.5.0-alpha.47 + "@storybook/theming": 6.5.0-alpha.49 axe-core: ^4.2.0 core-js: ^3.8.2 global: ^4.4.0 @@ -2145,12 +2145,13 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/addon-actions@portal:../../addons/actions::locator=web-components-kitchen-sink%40workspace%3A." dependencies: - "@storybook/addons": 6.5.0-alpha.47 - "@storybook/api": 6.5.0-alpha.47 - "@storybook/components": 6.5.0-alpha.47 - "@storybook/core-events": 6.5.0-alpha.47 + "@storybook/addons": 6.5.0-alpha.49 + "@storybook/api": 6.5.0-alpha.49 + "@storybook/client-logger": 6.5.0-alpha.49 + "@storybook/components": 6.5.0-alpha.49 + "@storybook/core-events": 6.5.0-alpha.49 "@storybook/csf": 0.0.2--canary.87bc651.0 - "@storybook/theming": 6.5.0-alpha.47 + "@storybook/theming": 6.5.0-alpha.49 core-js: ^3.8.2 fast-deep-equal: ^3.1.3 global: ^4.4.0 @@ -2178,13 +2179,13 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/addon-backgrounds@portal:../../addons/backgrounds::locator=web-components-kitchen-sink%40workspace%3A." dependencies: - "@storybook/addons": 6.5.0-alpha.47 - "@storybook/api": 6.5.0-alpha.47 - "@storybook/client-logger": 6.5.0-alpha.47 - "@storybook/components": 6.5.0-alpha.47 - "@storybook/core-events": 6.5.0-alpha.47 + "@storybook/addons": 6.5.0-alpha.49 + "@storybook/api": 6.5.0-alpha.49 + "@storybook/client-logger": 6.5.0-alpha.49 + "@storybook/components": 6.5.0-alpha.49 + "@storybook/core-events": 6.5.0-alpha.49 "@storybook/csf": 0.0.2--canary.87bc651.0 - "@storybook/theming": 6.5.0-alpha.47 + "@storybook/theming": 6.5.0-alpha.49 core-js: ^3.8.2 global: ^4.4.0 memoizerific: ^1.11.3 @@ -2206,15 +2207,15 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/addon-controls@portal:../../addons/controls::locator=web-components-kitchen-sink%40workspace%3A." dependencies: - "@storybook/addons": 6.5.0-alpha.47 - "@storybook/api": 6.5.0-alpha.47 - "@storybook/client-logger": 6.5.0-alpha.47 - "@storybook/components": 6.5.0-alpha.47 - "@storybook/core-common": 6.5.0-alpha.47 + "@storybook/addons": 6.5.0-alpha.49 + "@storybook/api": 6.5.0-alpha.49 + "@storybook/client-logger": 6.5.0-alpha.49 + "@storybook/components": 6.5.0-alpha.49 + "@storybook/core-common": 6.5.0-alpha.49 "@storybook/csf": 0.0.2--canary.87bc651.0 - "@storybook/node-logger": 6.5.0-alpha.47 - "@storybook/store": 6.5.0-alpha.47 - "@storybook/theming": 6.5.0-alpha.47 + "@storybook/node-logger": 6.5.0-alpha.49 + "@storybook/store": 6.5.0-alpha.49 + "@storybook/theming": 6.5.0-alpha.49 core-js: ^3.8.2 lodash: ^4.17.21 ts-dedent: ^2.0.0 @@ -2237,20 +2238,20 @@ __metadata: "@babel/preset-env": ^7.12.11 "@jest/transform": ^26.6.2 "@mdx-js/react": ^1.6.22 - "@storybook/addons": 6.5.0-alpha.47 - "@storybook/api": 6.5.0-alpha.47 - "@storybook/components": 6.5.0-alpha.47 - "@storybook/core-common": 6.5.0-alpha.47 - "@storybook/core-events": 6.5.0-alpha.47 + "@storybook/addons": 6.5.0-alpha.49 + "@storybook/api": 6.5.0-alpha.49 + "@storybook/components": 6.5.0-alpha.49 + "@storybook/core-common": 6.5.0-alpha.49 + "@storybook/core-events": 6.5.0-alpha.49 "@storybook/csf": 0.0.2--canary.87bc651.0 - "@storybook/docs-tools": 6.5.0-alpha.47 + "@storybook/docs-tools": 6.5.0-alpha.49 "@storybook/mdx1-csf": canary - "@storybook/node-logger": 6.5.0-alpha.47 - "@storybook/postinstall": 6.5.0-alpha.47 - "@storybook/preview-web": 6.5.0-alpha.47 - "@storybook/source-loader": 6.5.0-alpha.47 - "@storybook/store": 6.5.0-alpha.47 - "@storybook/theming": 6.5.0-alpha.47 + "@storybook/node-logger": 6.5.0-alpha.49 + "@storybook/postinstall": 6.5.0-alpha.49 + "@storybook/preview-web": 6.5.0-alpha.49 + "@storybook/source-loader": 6.5.0-alpha.49 + "@storybook/store": 6.5.0-alpha.49 + "@storybook/theming": 6.5.0-alpha.49 core-js: ^3.8.2 fast-deep-equal: ^3.1.3 global: ^4.4.0 @@ -2310,11 +2311,11 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/addon-links@portal:../../addons/links::locator=web-components-kitchen-sink%40workspace%3A." dependencies: - "@storybook/addons": 6.5.0-alpha.47 - "@storybook/client-logger": 6.5.0-alpha.47 - "@storybook/core-events": 6.5.0-alpha.47 + "@storybook/addons": 6.5.0-alpha.49 + "@storybook/client-logger": 6.5.0-alpha.49 + "@storybook/core-events": 6.5.0-alpha.49 "@storybook/csf": 0.0.2--canary.87bc651.0 - "@storybook/router": 6.5.0-alpha.47 + "@storybook/router": 6.5.0-alpha.49 "@types/qs": ^6.9.5 core-js: ^3.8.2 global: ^4.4.0 @@ -2338,12 +2339,12 @@ __metadata: resolution: "@storybook/addon-storyshots@portal:../../addons/storyshots/storyshots-core::locator=web-components-kitchen-sink%40workspace%3A." dependencies: "@jest/transform": ^26.6.2 - "@storybook/addons": 6.5.0-alpha.47 + "@storybook/addons": 6.5.0-alpha.49 "@storybook/babel-plugin-require-context-hook": 1.0.1 - "@storybook/client-api": 6.5.0-alpha.47 - "@storybook/core": 6.5.0-alpha.47 - "@storybook/core-client": 6.5.0-alpha.47 - "@storybook/core-common": 6.5.0-alpha.47 + "@storybook/client-api": 6.5.0-alpha.49 + "@storybook/core": 6.5.0-alpha.49 + "@storybook/core-client": 6.5.0-alpha.49 + "@storybook/core-common": 6.5.0-alpha.49 "@storybook/csf": 0.0.2--canary.87bc651.0 "@types/glob": ^7.1.3 "@types/jest": ^26.0.16 @@ -2413,13 +2414,13 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/addon-storysource@portal:../../addons/storysource::locator=web-components-kitchen-sink%40workspace%3A." dependencies: - "@storybook/addons": 6.5.0-alpha.47 - "@storybook/api": 6.5.0-alpha.47 - "@storybook/client-logger": 6.5.0-alpha.47 - "@storybook/components": 6.5.0-alpha.47 - "@storybook/router": 6.5.0-alpha.47 - "@storybook/source-loader": 6.5.0-alpha.47 - "@storybook/theming": 6.5.0-alpha.47 + "@storybook/addons": 6.5.0-alpha.49 + "@storybook/api": 6.5.0-alpha.49 + "@storybook/client-logger": 6.5.0-alpha.49 + "@storybook/components": 6.5.0-alpha.49 + "@storybook/router": 6.5.0-alpha.49 + "@storybook/source-loader": 6.5.0-alpha.49 + "@storybook/theming": 6.5.0-alpha.49 core-js: ^3.8.2 estraverse: ^5.2.0 loader-utils: ^2.0.0 @@ -2442,12 +2443,12 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/addon-viewport@portal:../../addons/viewport::locator=web-components-kitchen-sink%40workspace%3A." dependencies: - "@storybook/addons": 6.5.0-alpha.47 - "@storybook/api": 6.5.0-alpha.47 - "@storybook/client-logger": 6.5.0-alpha.47 - "@storybook/components": 6.5.0-alpha.47 - "@storybook/core-events": 6.5.0-alpha.47 - "@storybook/theming": 6.5.0-alpha.47 + "@storybook/addons": 6.5.0-alpha.49 + "@storybook/api": 6.5.0-alpha.49 + "@storybook/client-logger": 6.5.0-alpha.49 + "@storybook/components": 6.5.0-alpha.49 + "@storybook/core-events": 6.5.0-alpha.49 + "@storybook/theming": 6.5.0-alpha.49 core-js: ^3.8.2 global: ^4.4.0 memoizerific: ^1.11.3 @@ -2468,13 +2469,13 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/addons@portal:../../lib/addons::locator=web-components-kitchen-sink%40workspace%3A." dependencies: - "@storybook/api": 6.5.0-alpha.47 - "@storybook/channels": 6.5.0-alpha.47 - "@storybook/client-logger": 6.5.0-alpha.47 - "@storybook/core-events": 6.5.0-alpha.47 + "@storybook/api": 6.5.0-alpha.49 + "@storybook/channels": 6.5.0-alpha.49 + "@storybook/client-logger": 6.5.0-alpha.49 + "@storybook/core-events": 6.5.0-alpha.49 "@storybook/csf": 0.0.2--canary.87bc651.0 - "@storybook/router": 6.5.0-alpha.47 - "@storybook/theming": 6.5.0-alpha.47 + "@storybook/router": 6.5.0-alpha.49 + "@storybook/theming": 6.5.0-alpha.49 "@types/webpack-env": ^1.16.0 core-js: ^3.8.2 global: ^4.4.0 @@ -2489,13 +2490,13 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/api@portal:../../lib/api::locator=web-components-kitchen-sink%40workspace%3A." dependencies: - "@storybook/channels": 6.5.0-alpha.47 - "@storybook/client-logger": 6.5.0-alpha.47 - "@storybook/core-events": 6.5.0-alpha.47 + "@storybook/channels": 6.5.0-alpha.49 + "@storybook/client-logger": 6.5.0-alpha.49 + "@storybook/core-events": 6.5.0-alpha.49 "@storybook/csf": 0.0.2--canary.87bc651.0 - "@storybook/router": 6.5.0-alpha.47 + "@storybook/router": 6.5.0-alpha.49 "@storybook/semver": ^7.3.2 - "@storybook/theming": 6.5.0-alpha.47 + "@storybook/theming": 6.5.0-alpha.49 core-js: ^3.8.2 fast-deep-equal: ^3.1.3 global: ^4.4.0 @@ -2524,22 +2525,22 @@ __metadata: resolution: "@storybook/builder-webpack4@portal:../../lib/builder-webpack4::locator=web-components-kitchen-sink%40workspace%3A." dependencies: "@babel/core": ^7.12.10 - "@storybook/addons": 6.5.0-alpha.47 - "@storybook/api": 6.5.0-alpha.47 - "@storybook/channel-postmessage": 6.5.0-alpha.47 - "@storybook/channels": 6.5.0-alpha.47 - "@storybook/client-api": 6.5.0-alpha.47 - "@storybook/client-logger": 6.5.0-alpha.47 - "@storybook/components": 6.5.0-alpha.47 - "@storybook/core-common": 6.5.0-alpha.47 - "@storybook/core-events": 6.5.0-alpha.47 - "@storybook/node-logger": 6.5.0-alpha.47 - "@storybook/preview-web": 6.5.0-alpha.47 - "@storybook/router": 6.5.0-alpha.47 + "@storybook/addons": 6.5.0-alpha.49 + "@storybook/api": 6.5.0-alpha.49 + "@storybook/channel-postmessage": 6.5.0-alpha.49 + "@storybook/channels": 6.5.0-alpha.49 + "@storybook/client-api": 6.5.0-alpha.49 + "@storybook/client-logger": 6.5.0-alpha.49 + "@storybook/components": 6.5.0-alpha.49 + "@storybook/core-common": 6.5.0-alpha.49 + "@storybook/core-events": 6.5.0-alpha.49 + "@storybook/node-logger": 6.5.0-alpha.49 + "@storybook/preview-web": 6.5.0-alpha.49 + "@storybook/router": 6.5.0-alpha.49 "@storybook/semver": ^7.3.2 - "@storybook/store": 6.5.0-alpha.47 - "@storybook/theming": 6.5.0-alpha.47 - "@storybook/ui": 6.5.0-alpha.47 + "@storybook/store": 6.5.0-alpha.49 + "@storybook/theming": 6.5.0-alpha.49 + "@storybook/ui": 6.5.0-alpha.49 "@types/node": ^14.0.10 || ^16.0.0 "@types/webpack": ^4.41.26 autoprefixer: ^9.8.6 @@ -2583,9 +2584,9 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/channel-postmessage@portal:../../lib/channel-postmessage::locator=web-components-kitchen-sink%40workspace%3A." dependencies: - "@storybook/channels": 6.5.0-alpha.47 - "@storybook/client-logger": 6.5.0-alpha.47 - "@storybook/core-events": 6.5.0-alpha.47 + "@storybook/channels": 6.5.0-alpha.49 + "@storybook/client-logger": 6.5.0-alpha.49 + "@storybook/core-events": 6.5.0-alpha.49 core-js: ^3.8.2 global: ^4.4.0 qs: ^6.10.0 @@ -2597,8 +2598,8 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/channel-websocket@portal:../../lib/channel-websocket::locator=web-components-kitchen-sink%40workspace%3A." dependencies: - "@storybook/channels": 6.5.0-alpha.47 - "@storybook/client-logger": 6.5.0-alpha.47 + "@storybook/channels": 6.5.0-alpha.49 + "@storybook/client-logger": 6.5.0-alpha.49 core-js: ^3.8.2 global: ^4.4.0 telejson: ^5.3.3 @@ -2619,13 +2620,13 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/client-api@portal:../../lib/client-api::locator=web-components-kitchen-sink%40workspace%3A." dependencies: - "@storybook/addons": 6.5.0-alpha.47 - "@storybook/channel-postmessage": 6.5.0-alpha.47 - "@storybook/channels": 6.5.0-alpha.47 - "@storybook/client-logger": 6.5.0-alpha.47 - "@storybook/core-events": 6.5.0-alpha.47 + "@storybook/addons": 6.5.0-alpha.49 + "@storybook/channel-postmessage": 6.5.0-alpha.49 + "@storybook/channels": 6.5.0-alpha.49 + "@storybook/client-logger": 6.5.0-alpha.49 + "@storybook/core-events": 6.5.0-alpha.49 "@storybook/csf": 0.0.2--canary.87bc651.0 - "@storybook/store": 6.5.0-alpha.47 + "@storybook/store": 6.5.0-alpha.49 "@types/qs": ^6.9.5 "@types/webpack-env": ^1.16.0 core-js: ^3.8.2 @@ -2658,9 +2659,9 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/components@portal:../../lib/components::locator=web-components-kitchen-sink%40workspace%3A." dependencies: - "@storybook/client-logger": 6.5.0-alpha.47 + "@storybook/client-logger": 6.5.0-alpha.49 "@storybook/csf": 0.0.2--canary.87bc651.0 - "@storybook/theming": 6.5.0-alpha.47 + "@storybook/theming": 6.5.0-alpha.49 core-js: ^3.8.2 regenerator-runtime: ^0.13.7 peerDependencies: @@ -2673,16 +2674,16 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/core-client@portal:../../lib/core-client::locator=web-components-kitchen-sink%40workspace%3A." dependencies: - "@storybook/addons": 6.5.0-alpha.47 - "@storybook/channel-postmessage": 6.5.0-alpha.47 - "@storybook/channel-websocket": 6.5.0-alpha.47 - "@storybook/client-api": 6.5.0-alpha.47 - "@storybook/client-logger": 6.5.0-alpha.47 - "@storybook/core-events": 6.5.0-alpha.47 + "@storybook/addons": 6.5.0-alpha.49 + "@storybook/channel-postmessage": 6.5.0-alpha.49 + "@storybook/channel-websocket": 6.5.0-alpha.49 + "@storybook/client-api": 6.5.0-alpha.49 + "@storybook/client-logger": 6.5.0-alpha.49 + "@storybook/core-events": 6.5.0-alpha.49 "@storybook/csf": 0.0.2--canary.87bc651.0 - "@storybook/preview-web": 6.5.0-alpha.47 - "@storybook/store": 6.5.0-alpha.47 - "@storybook/ui": 6.5.0-alpha.47 + "@storybook/preview-web": 6.5.0-alpha.49 + "@storybook/store": 6.5.0-alpha.49 + "@storybook/ui": 6.5.0-alpha.49 airbnb-js-shims: ^2.2.1 ansi-to-html: ^0.6.11 core-js: ^3.8.2 @@ -2729,7 +2730,7 @@ __metadata: "@babel/preset-react": ^7.12.10 "@babel/preset-typescript": ^7.12.7 "@babel/register": ^7.12.1 - "@storybook/node-logger": 6.5.0-alpha.47 + "@storybook/node-logger": 6.5.0-alpha.49 "@storybook/semver": ^7.3.2 "@types/node": ^14.0.10 || ^16.0.0 "@types/pretty-hrtime": ^1.0.0 @@ -2779,16 +2780,16 @@ __metadata: resolution: "@storybook/core-server@portal:../../lib/core-server::locator=web-components-kitchen-sink%40workspace%3A." dependencies: "@discoveryjs/json-ext": ^0.5.3 - "@storybook/builder-webpack4": 6.5.0-alpha.47 - "@storybook/core-client": 6.5.0-alpha.47 - "@storybook/core-common": 6.5.0-alpha.47 - "@storybook/core-events": 6.5.0-alpha.47 + "@storybook/builder-webpack4": 6.5.0-alpha.49 + "@storybook/core-client": 6.5.0-alpha.49 + "@storybook/core-common": 6.5.0-alpha.49 + "@storybook/core-events": 6.5.0-alpha.49 "@storybook/csf": 0.0.2--canary.87bc651.0 - "@storybook/csf-tools": 6.5.0-alpha.47 - "@storybook/manager-webpack4": 6.5.0-alpha.47 - "@storybook/node-logger": 6.5.0-alpha.47 + "@storybook/csf-tools": 6.5.0-alpha.49 + "@storybook/manager-webpack4": 6.5.0-alpha.49 + "@storybook/node-logger": 6.5.0-alpha.49 "@storybook/semver": ^7.3.2 - "@storybook/store": 6.5.0-alpha.47 + "@storybook/store": 6.5.0-alpha.49 "@types/node": ^14.0.10 || ^16.0.0 "@types/node-fetch": ^2.5.7 "@types/pretty-hrtime": ^1.0.0 @@ -2839,8 +2840,8 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/core@portal:../../lib/core::locator=web-components-kitchen-sink%40workspace%3A." dependencies: - "@storybook/core-client": 6.5.0-alpha.47 - "@storybook/core-server": 6.5.0-alpha.47 + "@storybook/core-client": 6.5.0-alpha.49 + "@storybook/core-server": 6.5.0-alpha.49 peerDependencies: react: ^16.8.0 || ^17.0.0 react-dom: ^16.8.0 || ^17.0.0 @@ -2896,8 +2897,7 @@ __metadata: dependencies: "@babel/core": ^7.12.10 "@storybook/csf": 0.0.2--canary.87bc651.0 - "@storybook/node-logger": 6.5.0-alpha.47 - "@storybook/store": 6.5.0-alpha.47 + "@storybook/store": 6.5.0-alpha.49 core-js: ^3.8.2 doctrine: ^3.0.0 lodash: ^4.17.21 @@ -2912,12 +2912,12 @@ __metadata: "@babel/core": ^7.12.10 "@babel/plugin-transform-template-literals": ^7.12.1 "@babel/preset-react": ^7.12.10 - "@storybook/addons": 6.5.0-alpha.47 - "@storybook/core-client": 6.5.0-alpha.47 - "@storybook/core-common": 6.5.0-alpha.47 - "@storybook/node-logger": 6.5.0-alpha.47 - "@storybook/theming": 6.5.0-alpha.47 - "@storybook/ui": 6.5.0-alpha.47 + "@storybook/addons": 6.5.0-alpha.49 + "@storybook/core-client": 6.5.0-alpha.49 + "@storybook/core-common": 6.5.0-alpha.49 + "@storybook/node-logger": 6.5.0-alpha.49 + "@storybook/theming": 6.5.0-alpha.49 + "@storybook/ui": 6.5.0-alpha.49 "@types/node": ^14.0.10 || ^16.0.0 "@types/webpack": ^4.41.26 babel-loader: ^8.0.0 @@ -2996,12 +2996,12 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/preview-web@portal:../../lib/preview-web::locator=web-components-kitchen-sink%40workspace%3A." dependencies: - "@storybook/addons": 6.5.0-alpha.47 - "@storybook/channel-postmessage": 6.5.0-alpha.47 - "@storybook/client-logger": 6.5.0-alpha.47 - "@storybook/core-events": 6.5.0-alpha.47 + "@storybook/addons": 6.5.0-alpha.49 + "@storybook/channel-postmessage": 6.5.0-alpha.49 + "@storybook/client-logger": 6.5.0-alpha.49 + "@storybook/core-events": 6.5.0-alpha.49 "@storybook/csf": 0.0.2--canary.87bc651.0 - "@storybook/store": 6.5.0-alpha.47 + "@storybook/store": 6.5.0-alpha.49 ansi-to-html: ^0.6.11 core-js: ^3.8.2 global: ^4.4.0 @@ -3022,7 +3022,7 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/router@portal:../../lib/router::locator=web-components-kitchen-sink%40workspace%3A." dependencies: - "@storybook/client-logger": 6.5.0-alpha.47 + "@storybook/client-logger": 6.5.0-alpha.49 core-js: ^3.8.2 regenerator-runtime: ^0.13.7 peerDependencies: @@ -3047,8 +3047,8 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/source-loader@portal:../../lib/source-loader::locator=web-components-kitchen-sink%40workspace%3A." dependencies: - "@storybook/addons": 6.5.0-alpha.47 - "@storybook/client-logger": 6.5.0-alpha.47 + "@storybook/addons": 6.5.0-alpha.49 + "@storybook/client-logger": 6.5.0-alpha.49 "@storybook/csf": 0.0.2--canary.87bc651.0 core-js: ^3.8.2 estraverse: ^5.2.0 @@ -3067,9 +3067,9 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/store@portal:../../lib/store::locator=web-components-kitchen-sink%40workspace%3A." dependencies: - "@storybook/addons": 6.5.0-alpha.47 - "@storybook/client-logger": 6.5.0-alpha.47 - "@storybook/core-events": 6.5.0-alpha.47 + "@storybook/addons": 6.5.0-alpha.49 + "@storybook/client-logger": 6.5.0-alpha.49 + "@storybook/core-events": 6.5.0-alpha.49 "@storybook/csf": 0.0.2--canary.87bc651.0 core-js: ^3.8.2 fast-deep-equal: ^3.1.3 @@ -3092,7 +3092,7 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/theming@portal:../../lib/theming::locator=web-components-kitchen-sink%40workspace%3A." dependencies: - "@storybook/client-logger": 6.5.0-alpha.47 + "@storybook/client-logger": 6.5.0-alpha.49 core-js: ^3.8.2 regenerator-runtime: ^0.13.7 peerDependencies: @@ -3105,15 +3105,15 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/ui@portal:../../lib/ui::locator=web-components-kitchen-sink%40workspace%3A." dependencies: - "@storybook/addons": 6.5.0-alpha.47 - "@storybook/api": 6.5.0-alpha.47 - "@storybook/channels": 6.5.0-alpha.47 - "@storybook/client-logger": 6.5.0-alpha.47 - "@storybook/components": 6.5.0-alpha.47 - "@storybook/core-events": 6.5.0-alpha.47 - "@storybook/router": 6.5.0-alpha.47 + "@storybook/addons": 6.5.0-alpha.49 + "@storybook/api": 6.5.0-alpha.49 + "@storybook/channels": 6.5.0-alpha.49 + "@storybook/client-logger": 6.5.0-alpha.49 + "@storybook/components": 6.5.0-alpha.49 + "@storybook/core-events": 6.5.0-alpha.49 + "@storybook/router": 6.5.0-alpha.49 "@storybook/semver": ^7.3.2 - "@storybook/theming": 6.5.0-alpha.47 + "@storybook/theming": 6.5.0-alpha.49 core-js: ^3.8.2 regenerator-runtime: ^0.13.7 resolve-from: ^5.0.0 @@ -3130,15 +3130,15 @@ __metadata: "@babel/plugin-syntax-dynamic-import": ^7.8.3 "@babel/plugin-syntax-import-meta": ^7.10.4 "@babel/preset-env": ^7.12.11 - "@storybook/addons": 6.5.0-alpha.47 - "@storybook/client-api": 6.5.0-alpha.47 - "@storybook/client-logger": 6.5.0-alpha.47 - "@storybook/core": 6.5.0-alpha.47 - "@storybook/core-common": 6.5.0-alpha.47 + "@storybook/addons": 6.5.0-alpha.49 + "@storybook/client-api": 6.5.0-alpha.49 + "@storybook/client-logger": 6.5.0-alpha.49 + "@storybook/core": 6.5.0-alpha.49 + "@storybook/core-common": 6.5.0-alpha.49 "@storybook/csf": 0.0.2--canary.87bc651.0 - "@storybook/docs-tools": 6.5.0-alpha.47 - "@storybook/preview-web": 6.5.0-alpha.47 - "@storybook/store": 6.5.0-alpha.47 + "@storybook/docs-tools": 6.5.0-alpha.49 + "@storybook/preview-web": 6.5.0-alpha.49 + "@storybook/store": 6.5.0-alpha.49 "@types/node": ^14.14.20 || ^16.0.0 "@types/webpack-env": ^1.16.0 babel-plugin-bundled-import-meta: ^0.3.1 From a4ea8486c79836641523e362093ce7c95594af6f Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Wed, 23 Mar 2022 17:23:50 +0100 Subject: [PATCH 064/171] allow setGlobalConfig to accept array of configurations and compose them --- app/react/src/client/testing/index.ts | 4 +- .../src/__snapshots__/storyshots.test.ts.snap | 373 ++++++++++++++++++ lib/store/package.json | 1 + lib/store/src/csf/testing-utils/index.test.ts | 16 +- lib/store/src/csf/testing-utils/index.ts | 7 +- yarn.lock | 198 +++++++++- 6 files changed, 591 insertions(+), 8 deletions(-) diff --git a/app/react/src/client/testing/index.ts b/app/react/src/client/testing/index.ts index 93a5a1b7441..1667ba9fd3e 100644 --- a/app/react/src/client/testing/index.ts +++ b/app/react/src/client/testing/index.ts @@ -25,7 +25,9 @@ import type { StoriesWithPartialProps, TestingStory } from './types'; * * @param projectAnnotations - e.g. (import * as projectAnnotations from '../.storybook/preview') */ -export function setGlobalConfig(projectAnnotations: ProjectAnnotations) { +export function setGlobalConfig( + projectAnnotations: ProjectAnnotations | ProjectAnnotations[] +) { originalSetGlobalConfig(projectAnnotations); } diff --git a/examples/react-ts/src/__snapshots__/storyshots.test.ts.snap b/examples/react-ts/src/__snapshots__/storyshots.test.ts.snap index 3926326cf9a..e667fd935d9 100644 --- a/examples/react-ts/src/__snapshots__/storyshots.test.ts.snap +++ b/examples/react-ts/src/__snapshots__/storyshots.test.ts.snap @@ -1840,6 +1840,379 @@ exports[`Storyshots Demo/AccountForm Standard Password Failed 1`] = ` `; +exports[`Storyshots Demo/AccountForm Standard With Render Function 1`] = ` +.emotion-15 { + font-family: "Nunito Sans",-apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + width: 450px; + padding: 32px; + background-color: #FFFFFF; + border-radius: 7px; +} + +.emotion-2 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; +} + +.emotion-0 { + height: 40px; + z-index: 10; + margin-left: 32px; +} + +.emotion-1 { + height: 40px; + z-index: 1; + left: -32px; + position: relative; +} + +.emotion-3 { + margin-top: 20px; + text-align: center; +} + +.emotion-14 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: flex-start; + -webkit-box-align: flex-start; + -ms-flex-align: flex-start; + align-items: flex-start; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + width: 350px; + min-height: 189px; + margin-top: 8px; +} + +.emotion-13 { + width: 100%; + -webkit-align-self: flex-start; + -ms-flex-item-align: start; + align-self: flex-start; +} + +.emotion-13[aria-disabled="true"] { + opacity: 0.6; +} + +.emotion-6 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-pack: stretch; + -webkit-justify-content: stretch; + -ms-flex-pack: stretch; + justify-content: stretch; + margin-bottom: 10px; +} + +.emotion-4 { + font-size: 13px; + font-weight: 500; + margin-bottom: 6px; +} + +.emotion-5 { + font-size: 14px; + color: #333333; + padding: 10px 15px; + border-radius: 4px; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + outline: none; + border: 0 none; + box-shadow: rgb(0 0 0 / 10%) 0px 0px 0px 1px inset; +} + +.emotion-5:focus { + box-shadow: rgb(30 167 253) 0px 0px 0px 1px inset; +} + +.emotion-5:active { + box-shadow: rgb(30 167 253) 0px 0px 0px 1px inset; +} + +.emotion-5[aria-invalid="true"] { + box-shadow: rgb(255 68 0) 0px 0px 0px 1px inset; +} + +.emotion-12 { + -webkit-align-self: stretch; + -ms-flex-item-align: stretch; + align-self: stretch; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; + margin-top: 24px; +} + +.emotion-10 { + background-color: transparent; + border: 0 none; + outline: none; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + font-weight: 500; + font-size: 12px; + -webkit-flex-basis: 50%; + -ms-flex-preferred-size: 50%; + flex-basis: 50%; + cursor: pointer; + padding: 11px 16px; + border-radius: 4px; + text-transform: uppercase; + margin-right: 8px; + background-color: #1EA7FD; + color: #FFFFFF; + opacity: 0.6; + box-shadow: rgb(30 167 253 / 10%) 0 0 0 1px inset; +} + +.emotion-10:focus { + -webkit-text-decoration: underline; + text-decoration: underline; + font-weight: 700; +} + +.emotion-10:active { + -webkit-text-decoration: underline; + text-decoration: underline; + font-weight: 700; +} + +.emotion-10[aria-disabled="true"] { + cursor: default; +} + +.emotion-11 { + background-color: transparent; + border: 0 none; + outline: none; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + font-weight: 500; + font-size: 12px; + -webkit-flex-basis: 50%; + -ms-flex-preferred-size: 50%; + flex-basis: 50%; + cursor: pointer; + padding: 11px 16px; + border-radius: 4px; + text-transform: uppercase; + margin-left: 8px; + box-shadow: rgb(30 167 253) 0 0 0 1px inset; + color: #1EA7FD; +} + +.emotion-11:focus { + -webkit-text-decoration: underline; + text-decoration: underline; + font-weight: 700; +} + +.emotion-11:active { + -webkit-text-decoration: underline; + text-decoration: underline; + font-weight: 700; +} + +.emotion-11[aria-disabled="true"] { + cursor: default; +} + +
+

+ This uses a custom render +

+
+
+ + + Storybook icon + + + + + + + + + + Storybook + + + + + +
+

+ Create an account to join the Storybook community +

+
+
+
+ + +
+
+ + +
+
+ + +
+
+
+
+
+`; + exports[`Storyshots Demo/AccountForm Verification 1`] = ` .emotion-18 { font-family: "Nunito Sans",-apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif; diff --git a/lib/store/package.json b/lib/store/package.json index 7f4cd3a4218..a3cbb92c543 100644 --- a/lib/store/package.json +++ b/lib/store/package.json @@ -44,6 +44,7 @@ "@storybook/client-logger": "6.5.0-alpha.50", "@storybook/core-events": "6.5.0-alpha.50", "@storybook/csf": "0.0.2--canary.507502b.0", + "@storybook/preview-web": "6.5.0-alpha.50", "core-js": "^3.8.2", "fast-deep-equal": "^3.1.3", "global": "^4.4.0", diff --git a/lib/store/src/csf/testing-utils/index.test.ts b/lib/store/src/csf/testing-utils/index.test.ts index 2eccf6c0b58..14e2e6deab7 100644 --- a/lib/store/src/csf/testing-utils/index.test.ts +++ b/lib/store/src/csf/testing-utils/index.test.ts @@ -1,5 +1,6 @@ import { composeStory, composeStories } from '.'; +// Most integration tests for this functionality are located under examples/cra-ts-essentials describe('composeStory', () => { const meta = { title: 'Button', @@ -24,7 +25,6 @@ describe('composeStory', () => { const composedStory = composeStory(Story, meta); expect(composedStory.args).toEqual({ ...Story.args, ...meta.args }); expect(composedStory.parameters).toEqual( - // why is this erroring in TS? expect.objectContaining({ ...Story.parameters, ...meta.parameters }) ); }); @@ -48,8 +48,18 @@ describe('composeStories', () => { }; const globalConfig = {}; composeStories(module, globalConfig, composeConfigFn); - expect(composeConfigFn).toHaveBeenCalledWith(module.StoryOne, module.default, globalConfig); - expect(composeConfigFn).toHaveBeenCalledWith(module.StoryTwo, module.default, globalConfig); + expect(composeConfigFn).toHaveBeenCalledWith( + module.StoryOne, + module.default, + globalConfig, + 'StoryOne' + ); + expect(composeConfigFn).toHaveBeenCalledWith( + module.StoryTwo, + module.default, + globalConfig, + 'StoryTwo' + ); }); test('should not call composeStoryFn for non-story exports', () => { diff --git a/lib/store/src/csf/testing-utils/index.ts b/lib/store/src/csf/testing-utils/index.ts index 6e64fd05401..a4d6c2ae935 100644 --- a/lib/store/src/csf/testing-utils/index.ts +++ b/lib/store/src/csf/testing-utils/index.ts @@ -9,6 +9,7 @@ import { StoryContext, Parameters, } from '@storybook/csf'; +import { composeConfigs } from '@storybook/preview-web'; import { prepareStory } from '../prepareStory'; import { normalizeStory } from '../normalizeStory'; @@ -28,9 +29,11 @@ if (process.env.NODE_ENV === 'test') { let GLOBAL_STORYBOOK_PROJECT_ANNOTATIONS = {}; export function setGlobalConfig( - projectAnnotations: ProjectAnnotations + projectAnnotations: ProjectAnnotations | ProjectAnnotations[] ) { - GLOBAL_STORYBOOK_PROJECT_ANNOTATIONS = projectAnnotations; + GLOBAL_STORYBOOK_PROJECT_ANNOTATIONS = Array.isArray(projectAnnotations) + ? composeConfigs(projectAnnotations) + : projectAnnotations; } interface ComposeStory { diff --git a/yarn.lock b/yarn.lock index a8b13ff2314..aa9a9382990 100644 --- a/yarn.lock +++ b/yarn.lock @@ -6833,6 +6833,28 @@ __metadata: languageName: node linkType: hard +"@storybook/addons@npm:6.4.19": + version: 6.4.19 + resolution: "@storybook/addons@npm:6.4.19" + dependencies: + "@storybook/api": 6.4.19 + "@storybook/channels": 6.4.19 + "@storybook/client-logger": 6.4.19 + "@storybook/core-events": 6.4.19 + "@storybook/csf": 0.0.2--canary.87bc651.0 + "@storybook/router": 6.4.19 + "@storybook/theming": 6.4.19 + "@types/webpack-env": ^1.16.0 + core-js: ^3.8.2 + global: ^4.4.0 + regenerator-runtime: ^0.13.7 + peerDependencies: + react: ^16.8.0 || ^17.0.0 + react-dom: ^16.8.0 || ^17.0.0 + checksum: f309622784a965ff7fd2d16f344397eeebaab0006406b6372129f43390a4015c83c16e1e6d32c6ad360517523ec2221ed4f8cac3853984d60f4ab2a3705f2a45 + languageName: node + linkType: hard + "@storybook/angular@6.5.0-alpha.50, @storybook/angular@workspace:*, @storybook/angular@workspace:app/angular": version: 0.0.0-use.local resolution: "@storybook/angular@workspace:app/angular" @@ -6983,6 +7005,34 @@ __metadata: languageName: node linkType: hard +"@storybook/api@npm:6.4.19": + version: 6.4.19 + resolution: "@storybook/api@npm:6.4.19" + dependencies: + "@storybook/channels": 6.4.19 + "@storybook/client-logger": 6.4.19 + "@storybook/core-events": 6.4.19 + "@storybook/csf": 0.0.2--canary.87bc651.0 + "@storybook/router": 6.4.19 + "@storybook/semver": ^7.3.2 + "@storybook/theming": 6.4.19 + core-js: ^3.8.2 + fast-deep-equal: ^3.1.3 + global: ^4.4.0 + lodash: ^4.17.21 + memoizerific: ^1.11.3 + regenerator-runtime: ^0.13.7 + store2: ^2.12.0 + telejson: ^5.3.2 + ts-dedent: ^2.0.0 + util-deprecate: ^1.0.2 + peerDependencies: + react: ^16.8.0 || ^17.0.0 + react-dom: ^16.8.0 || ^17.0.0 + checksum: 77fae2be5269d45d3d30d8364ca35b7b95ffaebe5ae1780275f97c2ebb1b6d9e3fa2a260e82587bbe141feeebac5054e44add36fec19cefe6d058e01ce4810ee + languageName: node + linkType: hard + "@storybook/babel-plugin-require-context-hook@npm:1.0.1": version: 1.0.1 resolution: "@storybook/babel-plugin-require-context-hook@npm:1.0.1" @@ -7125,6 +7175,21 @@ __metadata: languageName: unknown linkType: soft +"@storybook/channel-postmessage@npm:6.4.19": + version: 6.4.19 + resolution: "@storybook/channel-postmessage@npm:6.4.19" + dependencies: + "@storybook/channels": 6.4.19 + "@storybook/client-logger": 6.4.19 + "@storybook/core-events": 6.4.19 + core-js: ^3.8.2 + global: ^4.4.0 + qs: ^6.10.0 + telejson: ^5.3.2 + checksum: ed1dfd996456ccd23246b415db1de228814651ed56692e76ee69f9b0308a6b1b0355d3a3cc7afc3603c2850d3e27ec420e574f55a93e16b08f275eb7e0d8de82 + languageName: node + linkType: hard + "@storybook/channel-websocket@6.5.0-alpha.50, @storybook/channel-websocket@workspace:*, @storybook/channel-websocket@workspace:lib/channel-websocket": version: 0.0.0-use.local resolution: "@storybook/channel-websocket@workspace:lib/channel-websocket" @@ -7158,6 +7223,17 @@ __metadata: languageName: node linkType: hard +"@storybook/channels@npm:6.4.19": + version: 6.4.19 + resolution: "@storybook/channels@npm:6.4.19" + dependencies: + core-js: ^3.8.2 + ts-dedent: ^2.0.0 + util-deprecate: ^1.0.2 + checksum: 14700d23d848f9c06e87650d4d11d764012baa6405b9c7eedb04a9f162660f49233a572f9c6a89c9bbc49ba378895ecf151dfe792fb8e6482a9a0de002d80e4e + languageName: node + linkType: hard + "@storybook/cli@6.5.0-alpha.50, @storybook/cli@workspace:*, @storybook/cli@workspace:lib/cli": version: 0.0.0-use.local resolution: "@storybook/cli@workspace:lib/cli" @@ -7254,6 +7330,16 @@ __metadata: languageName: node linkType: hard +"@storybook/client-logger@npm:6.4.19": + version: 6.4.19 + resolution: "@storybook/client-logger@npm:6.4.19" + dependencies: + core-js: ^3.8.2 + global: ^4.4.0 + checksum: 06e6e463ea05560280fc34faeddfd86475064b1a2eb04c1a1da230f4d761d0aebfbad5ae2978412edece7bac01f47ff09f9620a77936ffe6c9c7e20438a17acf + languageName: node + linkType: hard + "@storybook/codemod@6.5.0-alpha.50, @storybook/codemod@workspace:*, @storybook/codemod@workspace:lib/codemod": version: 0.0.0-use.local resolution: "@storybook/codemod@workspace:lib/codemod" @@ -7434,6 +7520,15 @@ __metadata: languageName: node linkType: hard +"@storybook/core-events@npm:6.4.19": + version: 6.4.19 + resolution: "@storybook/core-events@npm:6.4.19" + dependencies: + core-js: ^3.8.2 + checksum: 574d1fc3adc23ec2a12246898e5f27eaad0592db664f9691dc855dd4ceddcb248d180a389e5c98d69324de2675c818d9cbae67a58d5ed5b6ff4d0e2be0346711 + languageName: node + linkType: hard + "@storybook/core-server@6.5.0-alpha.50, @storybook/core-server@workspace:lib/core-server": version: 0.0.0-use.local resolution: "@storybook/core-server@workspace:lib/core-server" @@ -8076,6 +8171,33 @@ __metadata: languageName: unknown linkType: soft +"@storybook/preview-web@npm:": + version: 6.4.19 + resolution: "@storybook/preview-web@npm:6.4.19" + dependencies: + "@storybook/addons": 6.4.19 + "@storybook/channel-postmessage": 6.4.19 + "@storybook/client-logger": 6.4.19 + "@storybook/core-events": 6.4.19 + "@storybook/csf": 0.0.2--canary.87bc651.0 + "@storybook/store": 6.4.19 + ansi-to-html: ^0.6.11 + core-js: ^3.8.2 + global: ^4.4.0 + lodash: ^4.17.21 + qs: ^6.10.0 + regenerator-runtime: ^0.13.7 + synchronous-promise: ^2.0.15 + ts-dedent: ^2.0.0 + unfetch: ^4.2.0 + util-deprecate: ^1.0.2 + peerDependencies: + react: ^16.8.0 || ^17.0.0 + react-dom: ^16.8.0 || ^17.0.0 + checksum: 7da30e8dd1cf4ec0fa05c6cf655a1a80bf7df22fc94590126aba4d9dbe3822d5b9bb00f3fad2d7bf0ebd323ef45c9da7f4eaee16e2bcc497e9c4be946c0bb00d + languageName: node + linkType: hard + "@storybook/react-docgen-typescript-plugin@npm:1.0.2-canary.6.9d540b91e815f8fc2f8829189deb00553559ff63.0": version: 1.0.2-canary.6.9d540b91e815f8fc2f8829189deb00553559ff63.0 resolution: "@storybook/react-docgen-typescript-plugin@npm:1.0.2-canary.6.9d540b91e815f8fc2f8829189deb00553559ff63.0" @@ -8452,6 +8574,28 @@ __metadata: languageName: node linkType: hard +"@storybook/router@npm:6.4.19": + version: 6.4.19 + resolution: "@storybook/router@npm:6.4.19" + dependencies: + "@storybook/client-logger": 6.4.19 + core-js: ^3.8.2 + fast-deep-equal: ^3.1.3 + global: ^4.4.0 + history: 5.0.0 + lodash: ^4.17.21 + memoizerific: ^1.11.3 + qs: ^6.10.0 + react-router: ^6.0.0 + react-router-dom: ^6.0.0 + ts-dedent: ^2.0.0 + peerDependencies: + react: ^16.8.0 || ^17.0.0 + react-dom: ^16.8.0 || ^17.0.0 + checksum: f998c4752f0f4b7b7243e6ef271e14e6e1bc65f67109940ee4a17393b4c1c0ee50e41ff9f83e6c83d8902cd08fee3a9bb6f225cef868bbbecd968dec00b1e026 + languageName: node + linkType: hard + "@storybook/semver@npm:^7.3.2": version: 7.3.2 resolution: "@storybook/semver@npm:7.3.2" @@ -8525,6 +8669,7 @@ __metadata: "@storybook/client-logger": 6.5.0-alpha.50 "@storybook/core-events": 6.5.0-alpha.50 "@storybook/csf": 0.0.2--canary.507502b.0 + "@storybook/preview-web": "" core-js: ^3.8.2 fast-deep-equal: ^3.1.3 global: ^4.4.0 @@ -8542,6 +8687,32 @@ __metadata: languageName: unknown linkType: soft +"@storybook/store@npm:6.4.19": + version: 6.4.19 + resolution: "@storybook/store@npm:6.4.19" + dependencies: + "@storybook/addons": 6.4.19 + "@storybook/client-logger": 6.4.19 + "@storybook/core-events": 6.4.19 + "@storybook/csf": 0.0.2--canary.87bc651.0 + core-js: ^3.8.2 + fast-deep-equal: ^3.1.3 + global: ^4.4.0 + lodash: ^4.17.21 + memoizerific: ^1.11.3 + regenerator-runtime: ^0.13.7 + slash: ^3.0.0 + stable: ^0.1.8 + synchronous-promise: ^2.0.15 + ts-dedent: ^2.0.0 + util-deprecate: ^1.0.2 + peerDependencies: + react: ^16.8.0 || ^17.0.0 + react-dom: ^16.8.0 || ^17.0.0 + checksum: f194b0943ff10bbceea5135f60d7c8da48420bd32e6ce547be76bf6173e45821deaa1ef4292d1159cf80bc7bd12d0c3dd1145af0e8525d33a408a59e7c25222b + languageName: node + linkType: hard + "@storybook/svelte@6.5.0-alpha.50, @storybook/svelte@workspace:*, @storybook/svelte@workspace:app/svelte": version: 0.0.0-use.local resolution: "@storybook/svelte@workspace:app/svelte" @@ -8652,6 +8823,29 @@ __metadata: languageName: node linkType: hard +"@storybook/theming@npm:6.4.19": + version: 6.4.19 + resolution: "@storybook/theming@npm:6.4.19" + dependencies: + "@emotion/core": ^10.1.1 + "@emotion/is-prop-valid": ^0.8.6 + "@emotion/styled": ^10.0.27 + "@storybook/client-logger": 6.4.19 + core-js: ^3.8.2 + deep-object-diff: ^1.1.0 + emotion-theming: ^10.0.27 + global: ^4.4.0 + memoizerific: ^1.11.3 + polished: ^4.0.5 + resolve-from: ^5.0.0 + ts-dedent: ^2.0.0 + peerDependencies: + react: ^16.8.0 || ^17.0.0 + react-dom: ^16.8.0 || ^17.0.0 + checksum: b28ba28536f3c958a29b07ff451310eb2d03c2d7c0edf98b6033c1de227aea15391d585b82d4cb9b6f670a47872b03b3beb870eee1aec93c7bd27e01e70cc087 + languageName: node + linkType: hard + "@storybook/ui@6.5.0-alpha.50, @storybook/ui@workspace:*, @storybook/ui@workspace:lib/ui": version: 0.0.0-use.local resolution: "@storybook/ui@workspace:lib/ui" @@ -37933,7 +38127,7 @@ __metadata: languageName: node linkType: hard -"react-router-dom@npm:^6.0.0-beta.8": +"react-router-dom@npm:^6.0.0, react-router-dom@npm:^6.0.0-beta.8": version: 6.2.2 resolution: "react-router-dom@npm:6.2.2" dependencies: @@ -37957,7 +38151,7 @@ __metadata: languageName: node linkType: hard -"react-router@npm:6.2.2, react-router@npm:^6.0.0-beta.8": +"react-router@npm:6.2.2, react-router@npm:^6.0.0, react-router@npm:^6.0.0-beta.8": version: 6.2.2 resolution: "react-router@npm:6.2.2" dependencies: From b4c24689fc34129e4ea88d607e4e68cd15ecae45 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Fri, 25 Mar 2022 10:30:57 +0100 Subject: [PATCH 065/171] change some references back to register, and update a few docs --- .../common/my-addon-preset-implementation.js.mdx | 2 +- ...ybook-addon-load-external-addons-preset.js.mdx | 2 +- .../common/storybook-addon-preset-example.js.mdx | 2 +- ...book-main-register-presets-managerentry.js.mdx | 1 - .../storybook-main-use-manager-entries.js.mdx | 2 +- .../storybook-storysource-manager-entries.js.mdx | 4 +--- lib/core-common/src/presets.ts | 15 +++++++++++---- 7 files changed, 16 insertions(+), 12 deletions(-) diff --git a/docs/snippets/common/my-addon-preset-implementation.js.mdx b/docs/snippets/common/my-addon-preset-implementation.js.mdx index 6ad7df9ee3f..2f31ec25ac3 100644 --- a/docs/snippets/common/my-addon-preset-implementation.js.mdx +++ b/docs/snippets/common/my-addon-preset-implementation.js.mdx @@ -2,7 +2,7 @@ // /my-addon/src/preset.js function managerEntries(entry = []) { - return [...entry, require.resolve("./manager")]; //👈 Addon implementation + return [...entry, require.resolve("./register")]; //👈 Addon implementation } module.exports = { managerEntries } diff --git a/docs/snippets/common/storybook-addon-load-external-addons-preset.js.mdx b/docs/snippets/common/storybook-addon-load-external-addons-preset.js.mdx index 9e2cac6af83..b13c6841ec8 100644 --- a/docs/snippets/common/storybook-addon-load-external-addons-preset.js.mdx +++ b/docs/snippets/common/storybook-addon-load-external-addons-preset.js.mdx @@ -2,7 +2,7 @@ // my-preset/index.js function managerEntries(entry = []) { - return [...entry, require.resolve('my-other-addon/manager')]; + return [...entry, require.resolve('my-other-addon/register')]; } const config = (entry = [], options) => { diff --git a/docs/snippets/common/storybook-addon-preset-example.js.mdx b/docs/snippets/common/storybook-addon-preset-example.js.mdx index db1a7c26b59..a23a6ca04f3 100644 --- a/docs/snippets/common/storybook-addon-preset-example.js.mdx +++ b/docs/snippets/common/storybook-addon-preset-example.js.mdx @@ -6,7 +6,7 @@ export function config(entry = []) { } export function managerEntries(entries) { - return [...entries, require.resolve('./manager')]; + return [...entries, require.resolve('./register')]; } export const parameters = { diff --git a/docs/snippets/common/storybook-main-register-presets-managerentry.js.mdx b/docs/snippets/common/storybook-main-register-presets-managerentry.js.mdx index 3673c58dd3d..18fa46acdf1 100644 --- a/docs/snippets/common/storybook-main-register-presets-managerentry.js.mdx +++ b/docs/snippets/common/storybook-main-register-presets-managerentry.js.mdx @@ -3,7 +3,6 @@ module.exports = { addons: [ - '@storybook/addon-storysource/manager', // A managerEntry registered here, in this case from the storysource addon. '@storybook/addon-docs/preset', // A preset registered here, in this case from the addon-docs addon. ], }; diff --git a/docs/snippets/common/storybook-main-use-manager-entries.js.mdx b/docs/snippets/common/storybook-main-use-manager-entries.js.mdx index 00b2730bf10..02479932037 100644 --- a/docs/snippets/common/storybook-main-use-manager-entries.js.mdx +++ b/docs/snippets/common/storybook-main-use-manager-entries.js.mdx @@ -2,6 +2,6 @@ // .storybook/main.js module.exports = { - managerEntries: ['@storybook/addon-storysource/manager'], + managerEntries: ['some-storybook-addon/entry-point.js'], }; ``` \ No newline at end of file diff --git a/docs/snippets/common/storybook-storysource-manager-entries.js.mdx b/docs/snippets/common/storybook-storysource-manager-entries.js.mdx index 4651d56bf56..e9c5dec6d95 100644 --- a/docs/snippets/common/storybook-storysource-manager-entries.js.mdx +++ b/docs/snippets/common/storybook-storysource-manager-entries.js.mdx @@ -1,7 +1,5 @@ ```js // storysource/preset.js -export function managerEntries(entry = []) { - return [...entry, require.resolve('@storybook/addon-storysource/manager')]; -} +/* nothing needed */ ``` \ No newline at end of file diff --git a/lib/core-common/src/presets.ts b/lib/core-common/src/presets.ts index 319f1a19504..268468c8df2 100644 --- a/lib/core-common/src/presets.ts +++ b/lib/core-common/src/presets.ts @@ -106,13 +106,20 @@ export const resolveAddonName = ( } if (managerFile || registerFile || previewFile || presetFile) { + const managerEntries = []; + + if (managerFile) { + managerEntries.push(managerFile); + } + // register file is the old way of registering addons + if (!managerFile && registerFile && !presetFile) { + managerEntries.push(registerFile); + } + return { type: 'virtual', name: path, - // register file is the old way of registering addons - ...(managerFile || registerFile - ? { managerEntries: [managerFile, !presetFile && registerFile].filter(Boolean) } - : {}), + ...(managerEntries.length ? { managerEntries } : {}), ...(previewFile ? { previewAnnotations: [previewFile] } : {}), ...(presetFile ? { presets: [{ name: presetFile, options }] } : {}), }; From 0b9412de5109b7dc4c7a4889a50c210fc6f0a5d4 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Fri, 25 Mar 2022 14:12:12 +0100 Subject: [PATCH 066/171] update snapshots --- .../src/__snapshots__/cra-ts-essentials_manager-dev-posix | 6 ------ .../__snapshots__/cra-ts-essentials_manager-prod-posix | 6 ------ .../src/__snapshots__/html-kitchen-sink_manager-dev-posix | 7 ------- .../__snapshots__/html-kitchen-sink_manager-prod-posix | 7 ------- .../src/__snapshots__/vue-3-cli_manager-dev-posix | 8 -------- .../src/__snapshots__/vue-3-cli_manager-prod-posix | 8 -------- .../web-components-kitchen-sink_manager-dev-posix | 7 ------- .../web-components-kitchen-sink_manager-prod-posix | 7 ------- 8 files changed, 56 deletions(-) diff --git a/lib/core-server/src/__snapshots__/cra-ts-essentials_manager-dev-posix b/lib/core-server/src/__snapshots__/cra-ts-essentials_manager-dev-posix index d4595ce3ec4..1937cd52a90 100644 --- a/lib/core-server/src/__snapshots__/cra-ts-essentials_manager-dev-posix +++ b/lib/core-server/src/__snapshots__/cra-ts-essentials_manager-dev-posix @@ -8,17 +8,11 @@ Object { "ROOT/lib/core-client/dist/esm/manager/index.js", "ROOT/addons/docs/manager.js", "ROOT/addons/controls/manager.js", - "ROOT/addons/controls/register.js", "ROOT/addons/actions/manager.js", - "ROOT/addons/actions/register.js", "ROOT/addons/backgrounds/manager.js", - "ROOT/addons/backgrounds/register.js", "ROOT/addons/toolbars/manager.js", - "ROOT/addons/toolbars/register.js", "ROOT/addons/measure/manager.js", - "ROOT/addons/measure/register.js", "ROOT/addons/outline/manager.js", - "ROOT/addons/outline/register.js", ], "keys": Array [ "name", diff --git a/lib/core-server/src/__snapshots__/cra-ts-essentials_manager-prod-posix b/lib/core-server/src/__snapshots__/cra-ts-essentials_manager-prod-posix index 19a729b4c6c..5327d847d2c 100644 --- a/lib/core-server/src/__snapshots__/cra-ts-essentials_manager-prod-posix +++ b/lib/core-server/src/__snapshots__/cra-ts-essentials_manager-prod-posix @@ -8,17 +8,11 @@ Object { "ROOT/lib/core-client/dist/esm/manager/index.js", "ROOT/addons/docs/manager.js", "ROOT/addons/controls/manager.js", - "ROOT/addons/controls/register.js", "ROOT/addons/actions/manager.js", - "ROOT/addons/actions/register.js", "ROOT/addons/backgrounds/manager.js", - "ROOT/addons/backgrounds/register.js", "ROOT/addons/toolbars/manager.js", - "ROOT/addons/toolbars/register.js", "ROOT/addons/measure/manager.js", - "ROOT/addons/measure/register.js", "ROOT/addons/outline/manager.js", - "ROOT/addons/outline/register.js", ], "keys": Array [ "name", diff --git a/lib/core-server/src/__snapshots__/html-kitchen-sink_manager-dev-posix b/lib/core-server/src/__snapshots__/html-kitchen-sink_manager-dev-posix index ea35099f4de..9fcbeaa6c24 100644 --- a/lib/core-server/src/__snapshots__/html-kitchen-sink_manager-dev-posix +++ b/lib/core-server/src/__snapshots__/html-kitchen-sink_manager-dev-posix @@ -7,20 +7,13 @@ Object { "ROOT/lib/core-client/dist/esm/manager/index.js", "ROOT/addons/docs/manager.js", "ROOT/addons/a11y/manager.js", - "ROOT/addons/a11y/register.js", "ROOT/addons/actions/manager.js", - "ROOT/addons/actions/register.js", "ROOT/addons/backgrounds/manager.js", - "ROOT/addons/backgrounds/register.js", "ROOT/addons/controls/manager.js", - "ROOT/addons/controls/register.js", "ROOT/addons/jest/manager.js", - "ROOT/addons/jest/register.js", "ROOT/addons/links/manager.js", - "ROOT/addons/links/register.js", "ROOT/addons/storysource/dist/esm/manager.js", "ROOT/addons/viewport/manager.js", - "ROOT/addons/viewport/register.js", ], "keys": Array [ "name", diff --git a/lib/core-server/src/__snapshots__/html-kitchen-sink_manager-prod-posix b/lib/core-server/src/__snapshots__/html-kitchen-sink_manager-prod-posix index f0c8b118dbe..348d29de932 100644 --- a/lib/core-server/src/__snapshots__/html-kitchen-sink_manager-prod-posix +++ b/lib/core-server/src/__snapshots__/html-kitchen-sink_manager-prod-posix @@ -7,20 +7,13 @@ Object { "ROOT/lib/core-client/dist/esm/manager/index.js", "ROOT/addons/docs/manager.js", "ROOT/addons/a11y/manager.js", - "ROOT/addons/a11y/register.js", "ROOT/addons/actions/manager.js", - "ROOT/addons/actions/register.js", "ROOT/addons/backgrounds/manager.js", - "ROOT/addons/backgrounds/register.js", "ROOT/addons/controls/manager.js", - "ROOT/addons/controls/register.js", "ROOT/addons/jest/manager.js", - "ROOT/addons/jest/register.js", "ROOT/addons/links/manager.js", - "ROOT/addons/links/register.js", "ROOT/addons/storysource/dist/esm/manager.js", "ROOT/addons/viewport/manager.js", - "ROOT/addons/viewport/register.js", ], "keys": Array [ "name", diff --git a/lib/core-server/src/__snapshots__/vue-3-cli_manager-dev-posix b/lib/core-server/src/__snapshots__/vue-3-cli_manager-dev-posix index 5c55aa8f424..ec8992f0334 100644 --- a/lib/core-server/src/__snapshots__/vue-3-cli_manager-dev-posix +++ b/lib/core-server/src/__snapshots__/vue-3-cli_manager-dev-posix @@ -6,22 +6,14 @@ Object { "ROOT/lib/core-client/dist/esm/globals/polyfills.js", "ROOT/lib/core-client/dist/esm/manager/index.js", "ROOT/addons/links/manager.js", - "ROOT/addons/links/register.js", "ROOT/addons/docs/manager.js", "ROOT/addons/controls/manager.js", - "ROOT/addons/controls/register.js", "ROOT/addons/actions/manager.js", - "ROOT/addons/actions/register.js", "ROOT/addons/backgrounds/manager.js", - "ROOT/addons/backgrounds/register.js", "ROOT/addons/viewport/manager.js", - "ROOT/addons/viewport/register.js", "ROOT/addons/toolbars/manager.js", - "ROOT/addons/toolbars/register.js", "ROOT/addons/measure/manager.js", - "ROOT/addons/measure/register.js", "ROOT/addons/outline/manager.js", - "ROOT/addons/outline/register.js", "ROOT/addons/interactions/manager.js", ], "keys": Array [ diff --git a/lib/core-server/src/__snapshots__/vue-3-cli_manager-prod-posix b/lib/core-server/src/__snapshots__/vue-3-cli_manager-prod-posix index 2c96023c5cc..a686af760a2 100644 --- a/lib/core-server/src/__snapshots__/vue-3-cli_manager-prod-posix +++ b/lib/core-server/src/__snapshots__/vue-3-cli_manager-prod-posix @@ -6,22 +6,14 @@ Object { "ROOT/lib/core-client/dist/esm/globals/polyfills.js", "ROOT/lib/core-client/dist/esm/manager/index.js", "ROOT/addons/links/manager.js", - "ROOT/addons/links/register.js", "ROOT/addons/docs/manager.js", "ROOT/addons/controls/manager.js", - "ROOT/addons/controls/register.js", "ROOT/addons/actions/manager.js", - "ROOT/addons/actions/register.js", "ROOT/addons/backgrounds/manager.js", - "ROOT/addons/backgrounds/register.js", "ROOT/addons/viewport/manager.js", - "ROOT/addons/viewport/register.js", "ROOT/addons/toolbars/manager.js", - "ROOT/addons/toolbars/register.js", "ROOT/addons/measure/manager.js", - "ROOT/addons/measure/register.js", "ROOT/addons/outline/manager.js", - "ROOT/addons/outline/register.js", "ROOT/addons/interactions/manager.js", ], "keys": Array [ diff --git a/lib/core-server/src/__snapshots__/web-components-kitchen-sink_manager-dev-posix b/lib/core-server/src/__snapshots__/web-components-kitchen-sink_manager-dev-posix index a500abda4d3..0676e83166f 100644 --- a/lib/core-server/src/__snapshots__/web-components-kitchen-sink_manager-dev-posix +++ b/lib/core-server/src/__snapshots__/web-components-kitchen-sink_manager-dev-posix @@ -7,21 +7,14 @@ Object { "ROOT/lib/core-client/dist/esm/manager/index.js", "ROOT/addons/docs/manager.js", "ROOT/addons/controls/manager.js", - "ROOT/addons/controls/register.js", "ROOT/addons/a11y/manager.js", - "ROOT/addons/a11y/register.js", "ROOT/addons/actions/manager.js", - "ROOT/addons/actions/register.js", "ROOT/addons/backgrounds/manager.js", - "ROOT/addons/backgrounds/register.js", "ROOT/addons/interactions/manager.js", "ROOT/addons/links/manager.js", - "ROOT/addons/links/register.js", "ROOT/addons/storysource/dist/esm/manager.js", "ROOT/addons/viewport/manager.js", - "ROOT/addons/viewport/register.js", "ROOT/addons/toolbars/manager.js", - "ROOT/addons/toolbars/register.js", ], "keys": Array [ "name", diff --git a/lib/core-server/src/__snapshots__/web-components-kitchen-sink_manager-prod-posix b/lib/core-server/src/__snapshots__/web-components-kitchen-sink_manager-prod-posix index 566d60a3f8a..982723cbc1a 100644 --- a/lib/core-server/src/__snapshots__/web-components-kitchen-sink_manager-prod-posix +++ b/lib/core-server/src/__snapshots__/web-components-kitchen-sink_manager-prod-posix @@ -7,21 +7,14 @@ Object { "ROOT/lib/core-client/dist/esm/manager/index.js", "ROOT/addons/docs/manager.js", "ROOT/addons/controls/manager.js", - "ROOT/addons/controls/register.js", "ROOT/addons/a11y/manager.js", - "ROOT/addons/a11y/register.js", "ROOT/addons/actions/manager.js", - "ROOT/addons/actions/register.js", "ROOT/addons/backgrounds/manager.js", - "ROOT/addons/backgrounds/register.js", "ROOT/addons/interactions/manager.js", "ROOT/addons/links/manager.js", - "ROOT/addons/links/register.js", "ROOT/addons/storysource/dist/esm/manager.js", "ROOT/addons/viewport/manager.js", - "ROOT/addons/viewport/register.js", "ROOT/addons/toolbars/manager.js", - "ROOT/addons/toolbars/register.js", ], "keys": Array [ "name", From 0a427112beabcae625bc2296ea4215ff3cc0227a Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Fri, 25 Mar 2022 14:57:09 +0100 Subject: [PATCH 067/171] bump --- lib/core-common/src/presets.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/lib/core-common/src/presets.ts b/lib/core-common/src/presets.ts index 268468c8df2..24093df1533 100644 --- a/lib/core-common/src/presets.ts +++ b/lib/core-common/src/presets.ts @@ -92,7 +92,8 @@ export const resolveAddonName = ( } const path = name; - // when user provides full path, we don't need to do anything + + // when user provides full path, we don't need to do anything! const managerFile = safeResolve(`${path}/manager`); const registerFile = safeResolve(`${path}/register`) || safeResolve(`${path}/register-panel`); const previewFile = safeResolve(`${path}/preview`); From c8e7a0c30c7384d6e59338abc319d8dedf7608b9 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Fri, 25 Mar 2022 15:59:54 +0100 Subject: [PATCH 068/171] add storybook/csf as alias --- examples/web-components-kitchen-sink/package.json | 1 + 1 file changed, 1 insertion(+) diff --git a/examples/web-components-kitchen-sink/package.json b/examples/web-components-kitchen-sink/package.json index 85c1f0ea5f9..1ef8e3106a5 100644 --- a/examples/web-components-kitchen-sink/package.json +++ b/examples/web-components-kitchen-sink/package.json @@ -39,6 +39,7 @@ "@storybook/core-common": "portal:../../lib/core-common", "@storybook/core-events": "portal:../../lib/core-events", "@storybook/core-server": "portal:../../lib/core-server", + "@storybook/csf": "0.0.2--canary.87bc651.0", "@storybook/csf-tools": "portal:../../lib/csf-tools", "@storybook/docs-tools": "portal:../../lib/docs-tools", "@storybook/jest": "^0.0.5", From c693b4b532c820721b7b2e088492649a692d6c95 Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Mon, 28 Mar 2022 12:24:23 +0200 Subject: [PATCH 069/171] remove unnecessary mock --- lib/store/src/csf/testing-utils/index.ts | 6 ------ 1 file changed, 6 deletions(-) diff --git a/lib/store/src/csf/testing-utils/index.ts b/lib/store/src/csf/testing-utils/index.ts index a4d6c2ae935..16d335e204d 100644 --- a/lib/store/src/csf/testing-utils/index.ts +++ b/lib/store/src/csf/testing-utils/index.ts @@ -20,12 +20,6 @@ import type { CSFExports, TestingStoryPlayFn } from './types'; export * from './types'; -if (process.env.NODE_ENV === 'test') { - // eslint-disable-next-line global-require - const { default: addons, mockChannel } = require('@storybook/addons'); - addons.setChannel(mockChannel()); -} - let GLOBAL_STORYBOOK_PROJECT_ANNOTATIONS = {}; export function setGlobalConfig( From bcf7e4d03a1e58a1862379adbfd98d1be67194e4 Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Mon, 28 Mar 2022 18:24:15 +0200 Subject: [PATCH 070/171] Move composeConfigs logic from preview-web to store --- app/react/src/client/testing/index.ts | 10 +- app/react/src/client/testing/types.ts | 22 -- examples/react-ts/src/AccountForm.test.tsx | 3 +- .../virtualModuleModernEntry.js.handlebars | 3 +- .../virtualModuleModernEntry.js.handlebars | 3 +- lib/core-client/src/preview/start.ts | 3 +- lib/preview-web/src/PreviewWeb.test.ts | 3 +- lib/preview-web/src/PreviewWeb.tsx | 3 +- lib/preview-web/src/index.ts | 1 - lib/preview-web/src/types.ts | 8 +- lib/store/package.json | 1 - .../src/csf}/composeConfigs.test.ts | 0 .../src => store/src/csf}/composeConfigs.ts | 28 ++- lib/store/src/csf/index.ts | 1 + lib/store/src/csf/testing-utils/index.ts | 18 +- lib/store/src/csf/testing-utils/types.ts | 22 +- lib/store/src/types.ts | 5 + yarn.lock | 198 +----------------- 18 files changed, 75 insertions(+), 257 deletions(-) delete mode 100644 app/react/src/client/testing/types.ts rename lib/{preview-web/src => store/src/csf}/composeConfigs.test.ts (100%) rename lib/{preview-web/src => store/src/csf}/composeConfigs.ts (65%) diff --git a/app/react/src/client/testing/index.ts b/app/react/src/client/testing/index.ts index 1667ba9fd3e..28c7a71fabd 100644 --- a/app/react/src/client/testing/index.ts +++ b/app/react/src/client/testing/index.ts @@ -3,12 +3,13 @@ import { composeStories as originalComposeStories, setGlobalConfig as originalSetGlobalConfig, CSFExports, + ComposedStory, + StoriesWithPartialProps, } from '@storybook/store'; import { ProjectAnnotations, Args } from '@storybook/csf'; import { render } from '../preview/render'; import type { Meta, ReactFramework } from '../preview/types-6-0'; -import type { StoriesWithPartialProps, TestingStory } from './types'; /** Function that sets the globalConfig of your storybook. The global config is the preview module of your .storybook folder. * @@ -64,7 +65,7 @@ const defaultProjectAnnotations: ProjectAnnotations = { * @param [exportsName] - in case your story does not contain a name and you want it to have a name. */ export function composeStory( - story: TestingStory, + story: ComposedStory, componentAnnotations: Meta, projectAnnotations?: ProjectAnnotations, exportsName?: string @@ -109,5 +110,8 @@ export function composeStories>( ) { const composedStories = originalComposeStories(csfExports, projectAnnotations, composeStory); - return composedStories as unknown as Omit, keyof CSFExports>; + return composedStories as unknown as Omit< + StoriesWithPartialProps, + keyof CSFExports + >; } diff --git a/app/react/src/client/testing/types.ts b/app/react/src/client/testing/types.ts deleted file mode 100644 index f20307e9578..00000000000 --- a/app/react/src/client/testing/types.ts +++ /dev/null @@ -1,22 +0,0 @@ -import type { - StoryFn as OriginalStoryFn, - TestingStory as OriginalTestingStory, -} from '@storybook/store'; -import type { ReactFramework, Args } from '../preview/types-6-0'; - -export type TestingStory = OriginalTestingStory; -export type StoryFn = OriginalStoryFn; - -/** - * T represents the whole ES module of a stories file. K of T means named exports (basically the Story type) - * 1. pick the keys K of T that have properties that are Story - * 2. infer the actual prop type for each Story - * 3. reconstruct Story with Partial. Story -> Story> - */ -export type StoriesWithPartialProps = { - // @TODO once we can use Typescript 4.0 do this to exclude nonStory exports: - // replace [K in keyof TModule] with [K in keyof TModule as TModule[K] extends TestingStory ? K : never] - [K in keyof TModule]: TModule[K] extends TestingStory - ? StoryFn> - : unknown; -}; diff --git a/examples/react-ts/src/AccountForm.test.tsx b/examples/react-ts/src/AccountForm.test.tsx index 863fabe75e0..4dd5f7bef31 100644 --- a/examples/react-ts/src/AccountForm.test.tsx +++ b/examples/react-ts/src/AccountForm.test.tsx @@ -9,14 +9,13 @@ const { Standard } = composeStories(stories); test('renders form', async () => { await render(); + expect(screen.getByTestId('email')).not.toBe(null); }); test('fills input from play function', async () => { - // @ts-ignore const StandardEmailFilled = composeStory(stories.StandardEmailFilled, stories.default); const { container } = await render(); - // @ts-ignore await StandardEmailFilled.play({ canvasElement: container }); const emailInput = screen.getByTestId('email') as HTMLInputElement; diff --git a/lib/builder-webpack4/templates/virtualModuleModernEntry.js.handlebars b/lib/builder-webpack4/templates/virtualModuleModernEntry.js.handlebars index dfa3f306fa6..9aa88d6d276 100644 --- a/lib/builder-webpack4/templates/virtualModuleModernEntry.js.handlebars +++ b/lib/builder-webpack4/templates/virtualModuleModernEntry.js.handlebars @@ -1,6 +1,7 @@ import global from 'global'; -import { composeConfigs, PreviewWeb } from '@storybook/preview-web'; +import { PreviewWeb } from '@storybook/preview-web'; +import { composeConfigs} from '@storybook/store'; import { ClientApi } from '@storybook/client-api'; import { addons } from '@storybook/addons'; import createPostMessageChannel from '@storybook/channel-postmessage'; diff --git a/lib/builder-webpack5/templates/virtualModuleModernEntry.js.handlebars b/lib/builder-webpack5/templates/virtualModuleModernEntry.js.handlebars index c7b3025c4b7..30df5e4c424 100644 --- a/lib/builder-webpack5/templates/virtualModuleModernEntry.js.handlebars +++ b/lib/builder-webpack5/templates/virtualModuleModernEntry.js.handlebars @@ -1,6 +1,7 @@ import global from 'global'; -import { composeConfigs, PreviewWeb } from '@storybook/preview-web'; +import { PreviewWeb } from '@storybook/preview-web'; +import { composeConfigs } from '@storybook/store'; import { ClientApi } from '@storybook/client-api'; import { addons } from '@storybook/addons'; import createPostMessageChannel from '@storybook/channel-postmessage'; diff --git a/lib/core-client/src/preview/start.ts b/lib/core-client/src/preview/start.ts index 8ce0ec1810a..5c121dce2b6 100644 --- a/lib/core-client/src/preview/start.ts +++ b/lib/core-client/src/preview/start.ts @@ -2,12 +2,11 @@ import global from 'global'; import deprecate from 'util-deprecate'; import { ClientApi } from '@storybook/client-api'; import { PreviewWeb } from '@storybook/preview-web'; -import type { WebProjectAnnotations } from '@storybook/preview-web'; import type { AnyFramework, ArgsStoryFn } from '@storybook/csf'; import createChannel from '@storybook/channel-postmessage'; import { addons } from '@storybook/addons'; import Events from '@storybook/core-events'; -import type { Path } from '@storybook/store'; +import type { Path, WebProjectAnnotations } from '@storybook/store'; import { Loadable } from './types'; import { executeLoadableForChanges } from './executeLoadable'; diff --git a/lib/preview-web/src/PreviewWeb.test.ts b/lib/preview-web/src/PreviewWeb.test.ts index b42e479ba2e..f5436f57b51 100644 --- a/lib/preview-web/src/PreviewWeb.test.ts +++ b/lib/preview-web/src/PreviewWeb.test.ts @@ -5,7 +5,7 @@ import Events, { IGNORED_EXCEPTION } from '@storybook/core-events'; import { logger } from '@storybook/client-logger'; import { addons, mockChannel as createMockChannel } from '@storybook/addons'; import type { AnyFramework } from '@storybook/csf'; -import type { ModuleImportFn } from '@storybook/store'; +import type { ModuleImportFn, WebProjectAnnotations } from '@storybook/store'; import { PreviewWeb } from './PreviewWeb'; import { @@ -22,7 +22,6 @@ import { waitForQuiescence, waitForRenderPhase, } from './PreviewWeb.mockdata'; -import type { WebProjectAnnotations } from './types'; jest.mock('./WebView'); const { history, document } = global; diff --git a/lib/preview-web/src/PreviewWeb.tsx b/lib/preview-web/src/PreviewWeb.tsx index d164eaf6385..a38ee0f2740 100644 --- a/lib/preview-web/src/PreviewWeb.tsx +++ b/lib/preview-web/src/PreviewWeb.tsx @@ -13,10 +13,9 @@ import { StoryStore, StorySpecifier, StoryIndex, + WebProjectAnnotations, } from '@storybook/store'; -import { WebProjectAnnotations } from './types'; - import { UrlStore } from './UrlStore'; import { WebView } from './WebView'; import { PREPARE_ABORTED, StoryRender } from './StoryRender'; diff --git a/lib/preview-web/src/index.ts b/lib/preview-web/src/index.ts index 78f8cd58974..e87ee32cd5e 100644 --- a/lib/preview-web/src/index.ts +++ b/lib/preview-web/src/index.ts @@ -1,6 +1,5 @@ export { PreviewWeb } from './PreviewWeb'; -export { composeConfigs } from './composeConfigs'; export { simulatePageLoad, simulateDOMContentLoaded } from './simulate-pageload'; export * from './types'; diff --git a/lib/preview-web/src/types.ts b/lib/preview-web/src/types.ts index fc4817e30fc..c068a57a815 100644 --- a/lib/preview-web/src/types.ts +++ b/lib/preview-web/src/types.ts @@ -2,20 +2,14 @@ import type { StoryId, StoryName, AnyFramework, - ProjectAnnotations, StoryContextForLoaders, ComponentTitle, Args, Globals, } from '@storybook/csf'; -import type { RenderContext, Story } from '@storybook/store'; +import type { Story } from '@storybook/store'; import { PreviewWeb } from './PreviewWeb'; -export type WebProjectAnnotations = - ProjectAnnotations & { - renderToDOM?: (context: RenderContext, element: Element) => Promise | void; - }; - export interface DocsContextProps { id: StoryId; title: ComponentTitle; diff --git a/lib/store/package.json b/lib/store/package.json index a3cbb92c543..7f4cd3a4218 100644 --- a/lib/store/package.json +++ b/lib/store/package.json @@ -44,7 +44,6 @@ "@storybook/client-logger": "6.5.0-alpha.50", "@storybook/core-events": "6.5.0-alpha.50", "@storybook/csf": "0.0.2--canary.507502b.0", - "@storybook/preview-web": "6.5.0-alpha.50", "core-js": "^3.8.2", "fast-deep-equal": "^3.1.3", "global": "^4.4.0", diff --git a/lib/preview-web/src/composeConfigs.test.ts b/lib/store/src/csf/composeConfigs.test.ts similarity index 100% rename from lib/preview-web/src/composeConfigs.test.ts rename to lib/store/src/csf/composeConfigs.test.ts diff --git a/lib/preview-web/src/composeConfigs.ts b/lib/store/src/csf/composeConfigs.ts similarity index 65% rename from lib/preview-web/src/composeConfigs.ts rename to lib/store/src/csf/composeConfigs.ts index bc426aabc2a..a8e60cbd387 100644 --- a/lib/preview-web/src/composeConfigs.ts +++ b/lib/store/src/csf/composeConfigs.ts @@ -1,21 +1,33 @@ import type { AnyFramework } from '@storybook/csf'; -import { combineParameters } from '@storybook/store'; -import type { ModuleExports } from '@storybook/store'; -import type { WebProjectAnnotations } from './types'; -function getField(moduleExportList: ModuleExports[], field: string): any[] { +import { combineParameters } from '../parameters'; +import type { ModuleExports, WebProjectAnnotations } from '../types'; + +export function getField( + moduleExportList: ModuleExports[], + field: string +): TFieldType | TFieldType[] { return moduleExportList.map((xs) => xs[field]).filter(Boolean); } -function getArrayField(moduleExportList: ModuleExports[], field: string): any[] { - return getField(moduleExportList, field).reduce((a, b) => [...a, ...b], []); +export function getArrayField( + moduleExportList: ModuleExports[], + field: string +): TFieldType[] { + return getField(moduleExportList, field).reduce((a: any, b: any) => [...a, ...b], []); } -function getObjectField(moduleExportList: ModuleExports[], field: string): Record { +export function getObjectField>( + moduleExportList: ModuleExports[], + field: string +): TFieldType { return Object.assign({}, ...getField(moduleExportList, field)); } -function getSingletonField(moduleExportList: ModuleExports[], field: string): any { +export function getSingletonField( + moduleExportList: ModuleExports[], + field: string +): TFieldType { return getField(moduleExportList, field).pop(); } diff --git a/lib/store/src/csf/index.ts b/lib/store/src/csf/index.ts index 215f85a9f71..00cdb73c479 100644 --- a/lib/store/src/csf/index.ts +++ b/lib/store/src/csf/index.ts @@ -5,4 +5,5 @@ export * from './prepareStory'; export * from './normalizeComponentAnnotations'; export * from './normalizeProjectAnnotations'; export * from './getValuesFromArgTypes'; +export * from './composeConfigs'; export * from './testing-utils'; diff --git a/lib/store/src/csf/testing-utils/index.ts b/lib/store/src/csf/testing-utils/index.ts index 16d335e204d..dcdfd7debaf 100644 --- a/lib/store/src/csf/testing-utils/index.ts +++ b/lib/store/src/csf/testing-utils/index.ts @@ -9,14 +9,15 @@ import { StoryContext, Parameters, } from '@storybook/csf'; -import { composeConfigs } from '@storybook/preview-web'; +import { composeConfigs } from '../composeConfigs'; import { prepareStory } from '../prepareStory'; import { normalizeStory } from '../normalizeStory'; import { HooksContext } from '../../hooks'; import { normalizeComponentAnnotations } from '../normalizeComponentAnnotations'; -import { getValuesFromArgTypes, normalizeProjectAnnotations } from '..'; -import type { CSFExports, TestingStoryPlayFn } from './types'; +import { getValuesFromArgTypes } from '../getValuesFromArgTypes'; +import { normalizeProjectAnnotations } from '../normalizeProjectAnnotations'; +import type { CSFExports, ComposedStoryPlayFn } from './types'; export * from './types'; @@ -24,6 +25,13 @@ let GLOBAL_STORYBOOK_PROJECT_ANNOTATIONS = {}; export function setGlobalConfig( projectAnnotations: ProjectAnnotations | ProjectAnnotations[] +) { + // deprecate this + setProjectAnnotations(projectAnnotations); +} + +export function setProjectAnnotations( + projectAnnotations: ProjectAnnotations | ProjectAnnotations[] ) { GLOBAL_STORYBOOK_PROJECT_ANNOTATIONS = Array.isArray(projectAnnotations) ? composeConfigs(projectAnnotations) @@ -40,7 +48,7 @@ interface ComposeStory): TFramework['storyResult']; storyName: string; args: Args; - play: TestingStoryPlayFn; + play: ComposedStoryPlayFn; parameters: Parameters; }; } @@ -99,7 +107,7 @@ export function composeStory< composedStory.storyName = storyAnnotations.storyName || storyAnnotations.name; composedStory.args = story.initialArgs; - composedStory.play = story.playFunction as TestingStoryPlayFn; + composedStory.play = story.playFunction as ComposedStoryPlayFn; composedStory.parameters = story.parameters; return composedStory; diff --git a/lib/store/src/csf/testing-utils/types.ts b/lib/store/src/csf/testing-utils/types.ts index 4e0f5542582..498e091aeda 100644 --- a/lib/store/src/csf/testing-utils/types.ts +++ b/lib/store/src/csf/testing-utils/types.ts @@ -13,13 +13,27 @@ export type CSFExports = { __namedExportsOrder?: string[]; }; -export type TestingStoryPlayContext = Partial & Pick; +export type ComposedStoryPlayContext = Partial & Pick; -export type TestingStoryPlayFn = (context: TestingStoryPlayContext) => Promise | void; +export type ComposedStoryPlayFn = (context: ComposedStoryPlayContext) => Promise | void; export type StoryFn = - AnnotatedStoryFn & { play: TestingStoryPlayFn }; + AnnotatedStoryFn & { play: ComposedStoryPlayFn }; -export type TestingStory = +export type ComposedStory = | StoryFn | StoryAnnotations; + +/** + * T represents the whole ES module of a stories file. K of T means named exports (basically the Story type) + * 1. pick the keys K of T that have properties that are Story + * 2. infer the actual prop type for each Story + * 3. reconstruct Story with Partial. Story -> Story> + */ +export type StoriesWithPartialProps = { + // @TODO once we can use Typescript 4.0 do this to exclude nonStory exports: + // replace [K in keyof TModule] with [K in keyof TModule as TModule[K] extends ComposedStory ? K : never] + [K in keyof TModule]: TModule[K] extends ComposedStory + ? AnnotatedStoryFn> + : unknown; +}; diff --git a/lib/store/src/types.ts b/lib/store/src/types.ts index 98d39ec2b56..cd92d6c1606 100644 --- a/lib/store/src/types.ts +++ b/lib/store/src/types.ts @@ -29,6 +29,11 @@ export type ModuleExports = Record; type PromiseLike = Promise | SynchronousPromise; export type ModuleImportFn = (path: Path) => PromiseLike; +export type WebProjectAnnotations = + ProjectAnnotations & { + renderToDOM?: (context: RenderContext, element: Element) => Promise | void; + }; + export type NormalizedProjectAnnotations = ProjectAnnotations & { argTypes?: StrictArgTypes; diff --git a/yarn.lock b/yarn.lock index aa9a9382990..a8b13ff2314 100644 --- a/yarn.lock +++ b/yarn.lock @@ -6833,28 +6833,6 @@ __metadata: languageName: node linkType: hard -"@storybook/addons@npm:6.4.19": - version: 6.4.19 - resolution: "@storybook/addons@npm:6.4.19" - dependencies: - "@storybook/api": 6.4.19 - "@storybook/channels": 6.4.19 - "@storybook/client-logger": 6.4.19 - "@storybook/core-events": 6.4.19 - "@storybook/csf": 0.0.2--canary.87bc651.0 - "@storybook/router": 6.4.19 - "@storybook/theming": 6.4.19 - "@types/webpack-env": ^1.16.0 - core-js: ^3.8.2 - global: ^4.4.0 - regenerator-runtime: ^0.13.7 - peerDependencies: - react: ^16.8.0 || ^17.0.0 - react-dom: ^16.8.0 || ^17.0.0 - checksum: f309622784a965ff7fd2d16f344397eeebaab0006406b6372129f43390a4015c83c16e1e6d32c6ad360517523ec2221ed4f8cac3853984d60f4ab2a3705f2a45 - languageName: node - linkType: hard - "@storybook/angular@6.5.0-alpha.50, @storybook/angular@workspace:*, @storybook/angular@workspace:app/angular": version: 0.0.0-use.local resolution: "@storybook/angular@workspace:app/angular" @@ -7005,34 +6983,6 @@ __metadata: languageName: node linkType: hard -"@storybook/api@npm:6.4.19": - version: 6.4.19 - resolution: "@storybook/api@npm:6.4.19" - dependencies: - "@storybook/channels": 6.4.19 - "@storybook/client-logger": 6.4.19 - "@storybook/core-events": 6.4.19 - "@storybook/csf": 0.0.2--canary.87bc651.0 - "@storybook/router": 6.4.19 - "@storybook/semver": ^7.3.2 - "@storybook/theming": 6.4.19 - core-js: ^3.8.2 - fast-deep-equal: ^3.1.3 - global: ^4.4.0 - lodash: ^4.17.21 - memoizerific: ^1.11.3 - regenerator-runtime: ^0.13.7 - store2: ^2.12.0 - telejson: ^5.3.2 - ts-dedent: ^2.0.0 - util-deprecate: ^1.0.2 - peerDependencies: - react: ^16.8.0 || ^17.0.0 - react-dom: ^16.8.0 || ^17.0.0 - checksum: 77fae2be5269d45d3d30d8364ca35b7b95ffaebe5ae1780275f97c2ebb1b6d9e3fa2a260e82587bbe141feeebac5054e44add36fec19cefe6d058e01ce4810ee - languageName: node - linkType: hard - "@storybook/babel-plugin-require-context-hook@npm:1.0.1": version: 1.0.1 resolution: "@storybook/babel-plugin-require-context-hook@npm:1.0.1" @@ -7175,21 +7125,6 @@ __metadata: languageName: unknown linkType: soft -"@storybook/channel-postmessage@npm:6.4.19": - version: 6.4.19 - resolution: "@storybook/channel-postmessage@npm:6.4.19" - dependencies: - "@storybook/channels": 6.4.19 - "@storybook/client-logger": 6.4.19 - "@storybook/core-events": 6.4.19 - core-js: ^3.8.2 - global: ^4.4.0 - qs: ^6.10.0 - telejson: ^5.3.2 - checksum: ed1dfd996456ccd23246b415db1de228814651ed56692e76ee69f9b0308a6b1b0355d3a3cc7afc3603c2850d3e27ec420e574f55a93e16b08f275eb7e0d8de82 - languageName: node - linkType: hard - "@storybook/channel-websocket@6.5.0-alpha.50, @storybook/channel-websocket@workspace:*, @storybook/channel-websocket@workspace:lib/channel-websocket": version: 0.0.0-use.local resolution: "@storybook/channel-websocket@workspace:lib/channel-websocket" @@ -7223,17 +7158,6 @@ __metadata: languageName: node linkType: hard -"@storybook/channels@npm:6.4.19": - version: 6.4.19 - resolution: "@storybook/channels@npm:6.4.19" - dependencies: - core-js: ^3.8.2 - ts-dedent: ^2.0.0 - util-deprecate: ^1.0.2 - checksum: 14700d23d848f9c06e87650d4d11d764012baa6405b9c7eedb04a9f162660f49233a572f9c6a89c9bbc49ba378895ecf151dfe792fb8e6482a9a0de002d80e4e - languageName: node - linkType: hard - "@storybook/cli@6.5.0-alpha.50, @storybook/cli@workspace:*, @storybook/cli@workspace:lib/cli": version: 0.0.0-use.local resolution: "@storybook/cli@workspace:lib/cli" @@ -7330,16 +7254,6 @@ __metadata: languageName: node linkType: hard -"@storybook/client-logger@npm:6.4.19": - version: 6.4.19 - resolution: "@storybook/client-logger@npm:6.4.19" - dependencies: - core-js: ^3.8.2 - global: ^4.4.0 - checksum: 06e6e463ea05560280fc34faeddfd86475064b1a2eb04c1a1da230f4d761d0aebfbad5ae2978412edece7bac01f47ff09f9620a77936ffe6c9c7e20438a17acf - languageName: node - linkType: hard - "@storybook/codemod@6.5.0-alpha.50, @storybook/codemod@workspace:*, @storybook/codemod@workspace:lib/codemod": version: 0.0.0-use.local resolution: "@storybook/codemod@workspace:lib/codemod" @@ -7520,15 +7434,6 @@ __metadata: languageName: node linkType: hard -"@storybook/core-events@npm:6.4.19": - version: 6.4.19 - resolution: "@storybook/core-events@npm:6.4.19" - dependencies: - core-js: ^3.8.2 - checksum: 574d1fc3adc23ec2a12246898e5f27eaad0592db664f9691dc855dd4ceddcb248d180a389e5c98d69324de2675c818d9cbae67a58d5ed5b6ff4d0e2be0346711 - languageName: node - linkType: hard - "@storybook/core-server@6.5.0-alpha.50, @storybook/core-server@workspace:lib/core-server": version: 0.0.0-use.local resolution: "@storybook/core-server@workspace:lib/core-server" @@ -8171,33 +8076,6 @@ __metadata: languageName: unknown linkType: soft -"@storybook/preview-web@npm:": - version: 6.4.19 - resolution: "@storybook/preview-web@npm:6.4.19" - dependencies: - "@storybook/addons": 6.4.19 - "@storybook/channel-postmessage": 6.4.19 - "@storybook/client-logger": 6.4.19 - "@storybook/core-events": 6.4.19 - "@storybook/csf": 0.0.2--canary.87bc651.0 - "@storybook/store": 6.4.19 - ansi-to-html: ^0.6.11 - core-js: ^3.8.2 - global: ^4.4.0 - lodash: ^4.17.21 - qs: ^6.10.0 - regenerator-runtime: ^0.13.7 - synchronous-promise: ^2.0.15 - ts-dedent: ^2.0.0 - unfetch: ^4.2.0 - util-deprecate: ^1.0.2 - peerDependencies: - react: ^16.8.0 || ^17.0.0 - react-dom: ^16.8.0 || ^17.0.0 - checksum: 7da30e8dd1cf4ec0fa05c6cf655a1a80bf7df22fc94590126aba4d9dbe3822d5b9bb00f3fad2d7bf0ebd323ef45c9da7f4eaee16e2bcc497e9c4be946c0bb00d - languageName: node - linkType: hard - "@storybook/react-docgen-typescript-plugin@npm:1.0.2-canary.6.9d540b91e815f8fc2f8829189deb00553559ff63.0": version: 1.0.2-canary.6.9d540b91e815f8fc2f8829189deb00553559ff63.0 resolution: "@storybook/react-docgen-typescript-plugin@npm:1.0.2-canary.6.9d540b91e815f8fc2f8829189deb00553559ff63.0" @@ -8574,28 +8452,6 @@ __metadata: languageName: node linkType: hard -"@storybook/router@npm:6.4.19": - version: 6.4.19 - resolution: "@storybook/router@npm:6.4.19" - dependencies: - "@storybook/client-logger": 6.4.19 - core-js: ^3.8.2 - fast-deep-equal: ^3.1.3 - global: ^4.4.0 - history: 5.0.0 - lodash: ^4.17.21 - memoizerific: ^1.11.3 - qs: ^6.10.0 - react-router: ^6.0.0 - react-router-dom: ^6.0.0 - ts-dedent: ^2.0.0 - peerDependencies: - react: ^16.8.0 || ^17.0.0 - react-dom: ^16.8.0 || ^17.0.0 - checksum: f998c4752f0f4b7b7243e6ef271e14e6e1bc65f67109940ee4a17393b4c1c0ee50e41ff9f83e6c83d8902cd08fee3a9bb6f225cef868bbbecd968dec00b1e026 - languageName: node - linkType: hard - "@storybook/semver@npm:^7.3.2": version: 7.3.2 resolution: "@storybook/semver@npm:7.3.2" @@ -8669,7 +8525,6 @@ __metadata: "@storybook/client-logger": 6.5.0-alpha.50 "@storybook/core-events": 6.5.0-alpha.50 "@storybook/csf": 0.0.2--canary.507502b.0 - "@storybook/preview-web": "" core-js: ^3.8.2 fast-deep-equal: ^3.1.3 global: ^4.4.0 @@ -8687,32 +8542,6 @@ __metadata: languageName: unknown linkType: soft -"@storybook/store@npm:6.4.19": - version: 6.4.19 - resolution: "@storybook/store@npm:6.4.19" - dependencies: - "@storybook/addons": 6.4.19 - "@storybook/client-logger": 6.4.19 - "@storybook/core-events": 6.4.19 - "@storybook/csf": 0.0.2--canary.87bc651.0 - core-js: ^3.8.2 - fast-deep-equal: ^3.1.3 - global: ^4.4.0 - lodash: ^4.17.21 - memoizerific: ^1.11.3 - regenerator-runtime: ^0.13.7 - slash: ^3.0.0 - stable: ^0.1.8 - synchronous-promise: ^2.0.15 - ts-dedent: ^2.0.0 - util-deprecate: ^1.0.2 - peerDependencies: - react: ^16.8.0 || ^17.0.0 - react-dom: ^16.8.0 || ^17.0.0 - checksum: f194b0943ff10bbceea5135f60d7c8da48420bd32e6ce547be76bf6173e45821deaa1ef4292d1159cf80bc7bd12d0c3dd1145af0e8525d33a408a59e7c25222b - languageName: node - linkType: hard - "@storybook/svelte@6.5.0-alpha.50, @storybook/svelte@workspace:*, @storybook/svelte@workspace:app/svelte": version: 0.0.0-use.local resolution: "@storybook/svelte@workspace:app/svelte" @@ -8823,29 +8652,6 @@ __metadata: languageName: node linkType: hard -"@storybook/theming@npm:6.4.19": - version: 6.4.19 - resolution: "@storybook/theming@npm:6.4.19" - dependencies: - "@emotion/core": ^10.1.1 - "@emotion/is-prop-valid": ^0.8.6 - "@emotion/styled": ^10.0.27 - "@storybook/client-logger": 6.4.19 - core-js: ^3.8.2 - deep-object-diff: ^1.1.0 - emotion-theming: ^10.0.27 - global: ^4.4.0 - memoizerific: ^1.11.3 - polished: ^4.0.5 - resolve-from: ^5.0.0 - ts-dedent: ^2.0.0 - peerDependencies: - react: ^16.8.0 || ^17.0.0 - react-dom: ^16.8.0 || ^17.0.0 - checksum: b28ba28536f3c958a29b07ff451310eb2d03c2d7c0edf98b6033c1de227aea15391d585b82d4cb9b6f670a47872b03b3beb870eee1aec93c7bd27e01e70cc087 - languageName: node - linkType: hard - "@storybook/ui@6.5.0-alpha.50, @storybook/ui@workspace:*, @storybook/ui@workspace:lib/ui": version: 0.0.0-use.local resolution: "@storybook/ui@workspace:lib/ui" @@ -38127,7 +37933,7 @@ __metadata: languageName: node linkType: hard -"react-router-dom@npm:^6.0.0, react-router-dom@npm:^6.0.0-beta.8": +"react-router-dom@npm:^6.0.0-beta.8": version: 6.2.2 resolution: "react-router-dom@npm:6.2.2" dependencies: @@ -38151,7 +37957,7 @@ __metadata: languageName: node linkType: hard -"react-router@npm:6.2.2, react-router@npm:^6.0.0, react-router@npm:^6.0.0-beta.8": +"react-router@npm:6.2.2, react-router@npm:^6.0.0-beta.8": version: 6.2.2 resolution: "react-router@npm:6.2.2" dependencies: From 7755bd3c847baff84531e32bec7c0b2fe587f6bf Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Mon, 28 Mar 2022 18:35:48 +0200 Subject: [PATCH 071/171] update test and snapshots --- examples/react-ts/src/AccountForm.test.tsx | 23 ------------------- .../cra-ts-essentials_preview-dev-posix | 2 +- .../cra-ts-essentials_preview-prod-posix | 2 +- lib/store/src/csf/testing-utils/index.test.ts | 2 +- 4 files changed, 3 insertions(+), 26 deletions(-) delete mode 100644 examples/react-ts/src/AccountForm.test.tsx diff --git a/examples/react-ts/src/AccountForm.test.tsx b/examples/react-ts/src/AccountForm.test.tsx deleted file mode 100644 index 4dd5f7bef31..00000000000 --- a/examples/react-ts/src/AccountForm.test.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import React from 'react'; -import { render, screen } from '@testing-library/react'; - -import { composeStories, composeStory } from '@storybook/react'; - -import * as stories from './AccountForm.stories'; - -const { Standard } = composeStories(stories); - -test('renders form', async () => { - await render(); - expect(screen.getByTestId('email')).not.toBe(null); -}); - -test('fills input from play function', async () => { - const StandardEmailFilled = composeStory(stories.StandardEmailFilled, stories.default); - const { container } = await render(); - - await StandardEmailFilled.play({ canvasElement: container }); - - const emailInput = screen.getByTestId('email') as HTMLInputElement; - expect(emailInput.value).toBe('michael@chromatic.com'); -}); diff --git a/lib/core-server/src/__snapshots__/cra-ts-essentials_preview-dev-posix b/lib/core-server/src/__snapshots__/cra-ts-essentials_preview-dev-posix index c0f5cd0fede..13630dcfcad 100644 --- a/lib/core-server/src/__snapshots__/cra-ts-essentials_preview-dev-posix +++ b/lib/core-server/src/__snapshots__/cra-ts-essentials_preview-dev-posix @@ -17,7 +17,7 @@ Object { "ROOT/addons/backgrounds/dist/esm/preset/addParameter.js-generated-config-entry.js", "ROOT/addons/measure/dist/esm/preset/addDecorator.js-generated-config-entry.js", "ROOT/addons/outline/dist/esm/preset/addDecorator.js-generated-config-entry.js", - "ROOT/examples/cra-ts-essentials/.storybook/preview.js-generated-config-entry.js", + "ROOT/examples/cra-ts-essentials/.storybook/preview.tsx-generated-config-entry.js", "ROOT/generated-stories-entry.js", ], "keys": Array [ diff --git a/lib/core-server/src/__snapshots__/cra-ts-essentials_preview-prod-posix b/lib/core-server/src/__snapshots__/cra-ts-essentials_preview-prod-posix index e6371f7c088..9f07b584334 100644 --- a/lib/core-server/src/__snapshots__/cra-ts-essentials_preview-prod-posix +++ b/lib/core-server/src/__snapshots__/cra-ts-essentials_preview-prod-posix @@ -16,7 +16,7 @@ Object { "ROOT/addons/backgrounds/dist/esm/preset/addParameter.js-generated-config-entry.js", "ROOT/addons/measure/dist/esm/preset/addDecorator.js-generated-config-entry.js", "ROOT/addons/outline/dist/esm/preset/addDecorator.js-generated-config-entry.js", - "ROOT/examples/cra-ts-essentials/.storybook/preview.js-generated-config-entry.js", + "ROOT/examples/cra-ts-essentials/.storybook/preview.tsx-generated-config-entry.js", "ROOT/generated-stories-entry.js", ], "keys": Array [ diff --git a/lib/store/src/csf/testing-utils/index.test.ts b/lib/store/src/csf/testing-utils/index.test.ts index 14e2e6deab7..514b82b1c0d 100644 --- a/lib/store/src/csf/testing-utils/index.test.ts +++ b/lib/store/src/csf/testing-utils/index.test.ts @@ -1,4 +1,4 @@ -import { composeStory, composeStories } from '.'; +import { composeStory, composeStories } from './index'; // Most integration tests for this functionality are located under examples/cra-ts-essentials describe('composeStory', () => { From 26767e663df9395423fbc5cd89c78379b25e4108 Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Mon, 28 Mar 2022 18:51:19 +0200 Subject: [PATCH 072/171] use exports name as story name as fallback --- .../__snapshots__/internals.test.tsx.snap | 78 +++++++++---------- .../components/internals.test.tsx | 15 +--- lib/store/src/csf/testing-utils/index.ts | 6 +- 3 files changed, 44 insertions(+), 55 deletions(-) diff --git a/examples/cra-ts-essentials/src/stories/testing-react/components/__snapshots__/internals.test.tsx.snap b/examples/cra-ts-essentials/src/stories/testing-react/components/__snapshots__/internals.test.tsx.snap index ff8ed9b7e78..dd0a3d4183f 100644 --- a/examples/cra-ts-essentials/src/stories/testing-react/components/__snapshots__/internals.test.tsx.snap +++ b/examples/cra-ts-essentials/src/stories/testing-react/components/__snapshots__/internals.test.tsx.snap @@ -1,5 +1,40 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP +exports[`Renders CSF2Secondary story 1`] = ` + +
+
+ Locale: + en +
+ +
+ +`; + +exports[`Renders CSF2StoryWithLocale story 1`] = ` + +
+
+ Locale: + en +
+ +
+ +`; + exports[`Renders CSF2StoryWithParamsAndDecorator story 1`] = `
@@ -18,42 +53,7 @@ exports[`Renders CSF2StoryWithParamsAndDecorator story 1`] = ` `; -exports[`Renders WithLocale story 1`] = ` - -
-
- Locale: - en -
- -
- -`; - -exports[`Renders bound Template story 1`] = ` - -
-
- Locale: - en -
- -
- -`; - -exports[`Renders undefined story 1`] = ` +exports[`Renders CSF3Button story 1`] = `
@@ -71,7 +71,7 @@ exports[`Renders undefined story 1`] = ` `; -exports[`Renders undefined story 2`] = ` +exports[`Renders CSF3ButtonWithRender story 1`] = `
@@ -96,7 +96,7 @@ exports[`Renders undefined story 2`] = ` `; -exports[`Renders undefined story 3`] = ` +exports[`Renders CSF3InputFieldFilled story 1`] = `
@@ -108,7 +108,7 @@ exports[`Renders undefined story 3`] = ` `; -exports[`Renders undefined story 4`] = ` +exports[`Renders CSF3Primary story 1`] = `
diff --git a/examples/cra-ts-essentials/src/stories/testing-react/components/internals.test.tsx b/examples/cra-ts-essentials/src/stories/testing-react/components/internals.test.tsx index d03cc4e1bdf..5fbdae1697d 100644 --- a/examples/cra-ts-essentials/src/stories/testing-react/components/internals.test.tsx +++ b/examples/cra-ts-essentials/src/stories/testing-react/components/internals.test.tsx @@ -43,24 +43,13 @@ test('should pass with decorators that need addons channel', () => { }); describe('Unsupported formats', () => { - test('should throw error StoryFn.story notation', () => { + test('should throw error if story is undefined', () => { const UnsupportedStory = () =>
hello world
; UnsupportedStory.story = { parameters: {} }; const UnsupportedStoryModule: any = { default: {}, - UnsupportedStory, - }; - - expect(() => { - composeStories(UnsupportedStoryModule); - }).toThrow(); - }); - - test('should throw error with non component stories', () => { - const UnsupportedStoryModule: any = { - default: {}, - UnsupportedStory: 123, + UnsupportedStory: undefined, }; expect(() => { diff --git a/lib/store/src/csf/testing-utils/index.ts b/lib/store/src/csf/testing-utils/index.ts index dcdfd7debaf..97bad14707f 100644 --- a/lib/store/src/csf/testing-utils/index.ts +++ b/lib/store/src/csf/testing-utils/index.ts @@ -69,14 +69,14 @@ export function composeStory< const normalizedComponentAnnotations = normalizeComponentAnnotations(componentAnnotations); - const storyExportsName = + const storyName = exportsName || storyAnnotations.storyName || storyAnnotations.story?.name || storyAnnotations.name; const normalizedStory = normalizeStory( - storyExportsName, + storyName, storyAnnotations, normalizedComponentAnnotations ); @@ -105,7 +105,7 @@ export function composeStory< return story.unboundStoryFn(context as StoryContext); }; - composedStory.storyName = storyAnnotations.storyName || storyAnnotations.name; + composedStory.storyName = storyName; composedStory.args = story.initialArgs; composedStory.play = story.playFunction as ComposedStoryPlayFn; composedStory.parameters = story.parameters; From ab0e576bbd28a83e01a5e278e6147e3a67a6e313 Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Mon, 28 Mar 2022 18:51:39 +0200 Subject: [PATCH 073/171] add temporary fix for auto title --- lib/store/src/csf/testing-utils/index.ts | 3 +++ 1 file changed, 3 insertions(+) diff --git a/lib/store/src/csf/testing-utils/index.ts b/lib/store/src/csf/testing-utils/index.ts index 97bad14707f..da2f7e3b8af 100644 --- a/lib/store/src/csf/testing-utils/index.ts +++ b/lib/store/src/csf/testing-utils/index.ts @@ -67,6 +67,9 @@ export function composeStory< throw new Error('Expected a story but received undefined.'); } + // @TODO: Support auto title + // eslint-disable-next-line no-param-reassign + componentAnnotations.title = componentAnnotations.title ?? 'ComposedStory'; const normalizedComponentAnnotations = normalizeComponentAnnotations(componentAnnotations); const storyName = From af4e1ab8cf85046173023de1776fe751df39036f Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Mon, 28 Mar 2022 22:26:04 +0200 Subject: [PATCH 074/171] update yarn lock --- yarn.lock | 55 ++++++++----------------------------------------------- 1 file changed, 8 insertions(+), 47 deletions(-) diff --git a/yarn.lock b/yarn.lock index 90f91bb2292..e86d609b218 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1,3 +1,6 @@ +# This file is generated by running "yarn install" inside your project. +# Manual changes might be lost - proceed with caution! + __metadata: version: 5 cacheKey: 8c0 @@ -7230,16 +7233,7 @@ __metadata: languageName: unknown linkType: soft -"@storybook/client-logger@6.5.0-alpha.50, @storybook/client-logger@^6.4.0 || >=6.5.0-0, @storybook/client-logger@workspace:*, @storybook/client-logger@workspace:lib/client-logger": - version: 0.0.0-use.local - resolution: "@storybook/client-logger@workspace:lib/client-logger" - dependencies: - core-js: ^3.8.2 - global: ^4.4.0 - languageName: unknown - linkType: soft - -"@storybook/client-logger@6.5.0-alpha.51, @storybook/client-logger@workspace:*, @storybook/client-logger@workspace:lib/client-logger": +"@storybook/client-logger@6.5.0-alpha.51, @storybook/client-logger@^6.4.0 || >=6.5.0-0, @storybook/client-logger@workspace:*, @storybook/client-logger@workspace:lib/client-logger": version: 0.0.0-use.local resolution: "@storybook/client-logger@workspace:lib/client-logger" dependencies: @@ -7757,19 +7751,7 @@ __metadata: languageName: unknown linkType: soft -"@storybook/instrumenter@6.5.0-alpha.50, @storybook/instrumenter@^6.4.0 || >=6.5.0-0, @storybook/instrumenter@workspace:*, @storybook/instrumenter@workspace:lib/instrumenter": - version: 0.0.0-use.local - resolution: "@storybook/instrumenter@workspace:lib/instrumenter" - dependencies: - "@storybook/addons": 6.5.0-alpha.51 - "@storybook/client-logger": 6.5.0-alpha.51 - "@storybook/core-events": 6.5.0-alpha.51 - core-js: ^3.8.2 - global: ^4.4.0 - languageName: unknown - linkType: soft - -"@storybook/instrumenter@6.5.0-alpha.51, @storybook/instrumenter@workspace:*, @storybook/instrumenter@workspace:lib/instrumenter": +"@storybook/instrumenter@6.5.0-alpha.51, @storybook/instrumenter@^6.4.0 || >=6.5.0-0, @storybook/instrumenter@workspace:*, @storybook/instrumenter@workspace:lib/instrumenter": version: 0.0.0-use.local resolution: "@storybook/instrumenter@workspace:lib/instrumenter" dependencies: @@ -8622,30 +8604,6 @@ __metadata: languageName: node linkType: hard -"@storybook/theming@6.5.0-alpha.50, @storybook/theming@workspace:*, @storybook/theming@workspace:lib/theming": - version: 0.0.0-use.local - resolution: "@storybook/theming@workspace:lib/theming" - dependencies: - "@emotion/core": ^10.3.1 - "@emotion/is-prop-valid": ^0.8.6 - "@emotion/styled": ^10.0.27 - "@storybook/client-logger": 6.5.0-alpha.51 - "@types/node": ^14.14.20 || ^16.0.0 - core-js: ^3.8.2 - deep-object-diff: ^1.1.0 - emotion-theming: ^10.0.27 - global: ^4.4.0 - memoizerific: ^1.11.3 - polished: ^4.0.5 - regenerator-runtime: ^0.13.7 - ts-dedent: ^2.0.0 - ts-node: ^10.4.0 - peerDependencies: - react: ^16.8.0 || ^17.0.0 - react-dom: ^16.8.0 || ^17.0.0 - languageName: unknown - linkType: soft - "@storybook/theming@6.5.0-alpha.51, @storybook/theming@workspace:*, @storybook/theming@workspace:lib/theming": version: 0.0.0-use.local resolution: "@storybook/theming@workspace:lib/theming" @@ -17846,8 +17804,11 @@ __metadata: "@storybook/addon-ie11": 0.0.7--canary.5e87b64.0 "@storybook/addons": 6.5.0-alpha.51 "@storybook/builder-webpack4": 6.5.0-alpha.51 + "@storybook/components": 6.5.0-alpha.51 "@storybook/preset-create-react-app": ^3.1.6 "@storybook/react": 6.5.0-alpha.51 + "@storybook/testing-library": ^0.0.9 + "@storybook/theming": 6.5.0-alpha.51 "@types/jest": ^26.0.16 "@types/node": ^14.14.20 || ^16.0.0 "@types/react": ^16.14.23 From 72bcdf1f3a094cfd32734945f053973dad2dfc35 Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Tue, 29 Mar 2022 08:51:34 +0800 Subject: [PATCH 075/171] Replace setGlobalConfig with setProjectAnnotations --- app/react/src/client/testing/index.ts | 24 ++++++++++++++----- examples/cra-ts-essentials/src/setupTests.ts | 6 ++--- .../components/AccountForm.stories.tsx | 1 - lib/store/src/csf/testing-utils/index.ts | 7 ------ 4 files changed, 21 insertions(+), 17 deletions(-) diff --git a/app/react/src/client/testing/index.ts b/app/react/src/client/testing/index.ts index 28c7a71fabd..8099a10b9ff 100644 --- a/app/react/src/client/testing/index.ts +++ b/app/react/src/client/testing/index.ts @@ -1,12 +1,13 @@ import { composeStory as originalComposeStory, composeStories as originalComposeStories, - setGlobalConfig as originalSetGlobalConfig, + setProjectAnnotations as originalSetProjectAnnotations, CSFExports, ComposedStory, StoriesWithPartialProps, } from '@storybook/store'; import { ProjectAnnotations, Args } from '@storybook/csf'; +import { once } from '@storybook/client-logger'; import { render } from '../preview/render'; import type { Meta, ReactFramework } from '../preview/types-6-0'; @@ -18,18 +19,29 @@ import type { Meta, ReactFramework } from '../preview/types-6-0'; * Example: *```jsx * // setup.js (for jest) - * import { setGlobalConfig } from '@storybook/react'; + * import { setProjectAnnotations } from '@storybook/react'; * import * as projectAnnotations from './.storybook/preview'; * - * setGlobalConfig(projectAnnotations); + * setProjectAnnotations(projectAnnotations); *``` * * @param projectAnnotations - e.g. (import * as projectAnnotations from '../.storybook/preview') */ +export function setProjectAnnotations( + projectAnnotations: ProjectAnnotations | ProjectAnnotations[] +) { + originalSetProjectAnnotations(projectAnnotations); +} + +/** Preserved for users migrating from `@storybook/testing-react`. + * + * @deprecated Use setProjectAnnotations instead + */ export function setGlobalConfig( projectAnnotations: ProjectAnnotations | ProjectAnnotations[] ) { - originalSetGlobalConfig(projectAnnotations); + once.warn(`setGlobalConfig is deprecated. Use setProjectAnnotations instead.`); + setProjectAnnotations(projectAnnotations); } // This will not be necessary once we have auto preset loading @@ -61,7 +73,7 @@ const defaultProjectAnnotations: ProjectAnnotations = { * * @param story * @param componentAnnotations - e.g. (import Meta from './Button.stories') - * @param [projectAnnotations] - e.g. (import * as projectAnnotations from '../.storybook/preview') this can be applied automatically if you use `setGlobalConfig` in your setup files. + * @param [projectAnnotations] - e.g. (import * as projectAnnotations from '../.storybook/preview') this can be applied automatically if you use `setProjectAnnotations` in your setup files. * @param [exportsName] - in case your story does not contain a name and you want it to have a name. */ export function composeStory( @@ -102,7 +114,7 @@ export function composeStory( *``` * * @param csfExports - e.g. (import * as stories from './Button.stories') - * @param [projectAnnotations] - e.g. (import * as projectAnnotations from '../.storybook/preview') this can be applied automatically if you use `setGlobalConfig` in your setup files. + * @param [projectAnnotations] - e.g. (import * as projectAnnotations from '../.storybook/preview') this can be applied automatically if you use `setProjectAnnotations` in your setup files. */ export function composeStories>( csfExports: TModule, diff --git a/examples/cra-ts-essentials/src/setupTests.ts b/examples/cra-ts-essentials/src/setupTests.ts index c3f66482a56..e65a5923ef0 100644 --- a/examples/cra-ts-essentials/src/setupTests.ts +++ b/examples/cra-ts-essentials/src/setupTests.ts @@ -1,4 +1,4 @@ -import { setGlobalConfig } from '@storybook/react'; -import * as globalStorybookConfig from '../.storybook/preview'; +import { setProjectAnnotations } from '@storybook/react'; +import * as projectAnnotations from '../.storybook/preview'; -setGlobalConfig(globalStorybookConfig); +setProjectAnnotations(projectAnnotations); diff --git a/examples/cra-ts-essentials/src/stories/testing-react/components/AccountForm.stories.tsx b/examples/cra-ts-essentials/src/stories/testing-react/components/AccountForm.stories.tsx index f3cab5e6d2f..5b6731f1a92 100644 --- a/examples/cra-ts-essentials/src/stories/testing-react/components/AccountForm.stories.tsx +++ b/examples/cra-ts-essentials/src/stories/testing-react/components/AccountForm.stories.tsx @@ -1,4 +1,3 @@ -/* eslint-disable storybook/await-interactions */ import React from 'react'; import type { ComponentMeta, ComponentStoryObj } from '@storybook/react'; import { userEvent, within } from '@storybook/testing-library'; diff --git a/lib/store/src/csf/testing-utils/index.ts b/lib/store/src/csf/testing-utils/index.ts index da2f7e3b8af..04a7f93594b 100644 --- a/lib/store/src/csf/testing-utils/index.ts +++ b/lib/store/src/csf/testing-utils/index.ts @@ -23,13 +23,6 @@ export * from './types'; let GLOBAL_STORYBOOK_PROJECT_ANNOTATIONS = {}; -export function setGlobalConfig( - projectAnnotations: ProjectAnnotations | ProjectAnnotations[] -) { - // deprecate this - setProjectAnnotations(projectAnnotations); -} - export function setProjectAnnotations( projectAnnotations: ProjectAnnotations | ProjectAnnotations[] ) { From 6a8ec8a836424fcd2e35125c60cb2a65ab127ea4 Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Tue, 29 Mar 2022 08:38:57 +0200 Subject: [PATCH 076/171] fix build errors in cra-ts-essentials --- examples/cra-ts-essentials/.storybook/main.ts | 10 +++++++--- examples/cra-ts-essentials/package.json | 4 ++-- .../testing-react/components/AccountForm.stories.tsx | 4 ++-- 3 files changed, 11 insertions(+), 7 deletions(-) diff --git a/examples/cra-ts-essentials/.storybook/main.ts b/examples/cra-ts-essentials/.storybook/main.ts index 97a4e0a2b0f..4ec79b0ac3f 100644 --- a/examples/cra-ts-essentials/.storybook/main.ts +++ b/examples/cra-ts-essentials/.storybook/main.ts @@ -1,6 +1,8 @@ +import type { StorybookConfig } from '@storybook/react/types'; + const path = require('path'); -module.exports = { +const mainConfig: StorybookConfig = { stories: ['../src/**/*.stories.@(tsx|mdx)'], addons: [ '@storybook/preset-create-react-app', @@ -13,9 +15,9 @@ module.exports = { }, ], logLevel: 'debug', - webpackFinal: (config) => { + webpackFinal: async (config) => { // add monorepo root as a valid directory to import modules from - config.resolve.plugins.forEach((p) => { + config.resolve?.plugins?.forEach((p: any) => { if (Array.isArray(p.appSrcs)) { p.appSrcs.push(path.join(__dirname, '..', '..', '..')); } @@ -30,3 +32,5 @@ module.exports = { buildStoriesJson: true, }, }; + +module.exports = mainConfig; diff --git a/examples/cra-ts-essentials/package.json b/examples/cra-ts-essentials/package.json index 639d18ac5c9..179fee8e51e 100644 --- a/examples/cra-ts-essentials/package.json +++ b/examples/cra-ts-essentials/package.json @@ -23,6 +23,8 @@ ] }, "dependencies": { + "@storybook/components": "6.5.0-alpha.51", + "@storybook/theming": "6.5.0-alpha.51", "@types/jest": "^26.0.16", "@types/node": "^14.14.20 || ^16.0.0", "@types/react": "^16.14.23", @@ -39,11 +41,9 @@ "@storybook/addon-ie11": "0.0.7--canary.5e87b64.0", "@storybook/addons": "6.5.0-alpha.51", "@storybook/builder-webpack4": "6.5.0-alpha.51", - "@storybook/components": "6.5.0-alpha.51", "@storybook/preset-create-react-app": "^3.1.6", "@storybook/react": "6.5.0-alpha.51", "@storybook/testing-library": "^0.0.9", - "@storybook/theming": "6.5.0-alpha.51", "webpack": "4" }, "storybook": { diff --git a/examples/cra-ts-essentials/src/stories/testing-react/components/AccountForm.stories.tsx b/examples/cra-ts-essentials/src/stories/testing-react/components/AccountForm.stories.tsx index 5b6731f1a92..c2953c144d5 100644 --- a/examples/cra-ts-essentials/src/stories/testing-react/components/AccountForm.stories.tsx +++ b/examples/cra-ts-essentials/src/stories/testing-react/components/AccountForm.stories.tsx @@ -14,6 +14,8 @@ export default { type Story = ComponentStoryObj; +const sleep = (ms: number) => new Promise((r) => setTimeout(r, ms)); + export const Standard: Story = { args: { passwordVerification: false }, }; @@ -81,8 +83,6 @@ export const VerificationPasswordMismatch: Story = { }, }; -const sleep = (ms: number) => new Promise((r) => setTimeout(r, ms)); - export const VerificationSuccess: Story = { ...Verification, play: async (context) => { From f20128e6505b503cb4d291c256e378c0796db913 Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Tue, 29 Mar 2022 08:40:16 +0200 Subject: [PATCH 077/171] Update lib/builder-webpack4/templates/virtualModuleModernEntry.js.handlebars Co-authored-by: Tom Coleman --- .../templates/virtualModuleModernEntry.js.handlebars | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/builder-webpack4/templates/virtualModuleModernEntry.js.handlebars b/lib/builder-webpack4/templates/virtualModuleModernEntry.js.handlebars index 9aa88d6d276..73e29368f16 100644 --- a/lib/builder-webpack4/templates/virtualModuleModernEntry.js.handlebars +++ b/lib/builder-webpack4/templates/virtualModuleModernEntry.js.handlebars @@ -1,7 +1,7 @@ import global from 'global'; import { PreviewWeb } from '@storybook/preview-web'; -import { composeConfigs} from '@storybook/store'; +import { composeConfigs } from '@storybook/store'; import { ClientApi } from '@storybook/client-api'; import { addons } from '@storybook/addons'; import createPostMessageChannel from '@storybook/channel-postmessage'; From 8a290f8ce20872f3676331423e9b0b18d23fd550 Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Tue, 29 Mar 2022 09:40:23 +0200 Subject: [PATCH 078/171] fix typescript issues --- .../cra-ts-essentials/src/stories/0-Welcome.stories.tsx | 7 +++++-- .../cra-ts-essentials/src/stories/1-Button.stories.tsx | 5 +++-- .../testing-react/components/AccountForm.stories.tsx | 1 + .../stories/testing-react/components/Button.stories.tsx | 4 ++-- 4 files changed, 11 insertions(+), 6 deletions(-) diff --git a/examples/cra-ts-essentials/src/stories/0-Welcome.stories.tsx b/examples/cra-ts-essentials/src/stories/0-Welcome.stories.tsx index 9920a416e1f..ec39dbbe481 100644 --- a/examples/cra-ts-essentials/src/stories/0-Welcome.stories.tsx +++ b/examples/cra-ts-essentials/src/stories/0-Welcome.stories.tsx @@ -1,12 +1,15 @@ import React from 'react'; import { linkTo } from '@storybook/addon-links'; import { Welcome } from '@storybook/react/demo'; +import type { ComponentMeta, ComponentStory } from '@storybook/react'; export default { title: 'Welcome', component: Welcome, -}; +} as ComponentMeta; -export const ToStorybook = () => ; +export const ToStorybook: ComponentStory = () => ( + +); ToStorybook.storyName = 'to Storybook'; diff --git a/examples/cra-ts-essentials/src/stories/1-Button.stories.tsx b/examples/cra-ts-essentials/src/stories/1-Button.stories.tsx index e952509a901..c3d83e4544a 100644 --- a/examples/cra-ts-essentials/src/stories/1-Button.stories.tsx +++ b/examples/cra-ts-essentials/src/stories/1-Button.stories.tsx @@ -1,13 +1,14 @@ import React from 'react'; import { Button } from '@storybook/react/demo'; +import type { ComponentStory, ComponentMeta } from '@storybook/react'; export default { title: 'Button', component: Button, argTypes: { onClick: { action: 'clicked' } }, -}; +} as ComponentMeta; -const Template = (args: any) =>