-
-
Notifications
You must be signed in to change notification settings - Fork 9.1k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch 'next' into tech/refactor-simplified-addons-api
- Loading branch information
Showing
44 changed files
with
2,142 additions
and
175 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,129 @@ | ||
| import { | ||
| composeStory as originalComposeStory, | ||
| composeStories as originalComposeStories, | ||
| 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'; | ||
|
|
||
| /** 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 { setProjectAnnotations } from '@storybook/react'; | ||
| * import * as projectAnnotations from './.storybook/preview'; | ||
| * | ||
| * setProjectAnnotations(projectAnnotations); | ||
| *``` | ||
| * | ||
| * @param projectAnnotations - e.g. (import * as projectAnnotations from '../.storybook/preview') | ||
| */ | ||
| export function setProjectAnnotations( | ||
| projectAnnotations: ProjectAnnotations<ReactFramework> | ProjectAnnotations<ReactFramework>[] | ||
| ) { | ||
| originalSetProjectAnnotations(projectAnnotations); | ||
| } | ||
|
|
||
| /** Preserved for users migrating from `@storybook/testing-react`. | ||
| * | ||
| * @deprecated Use setProjectAnnotations instead | ||
| */ | ||
| export function setGlobalConfig( | ||
| projectAnnotations: ProjectAnnotations<ReactFramework> | ProjectAnnotations<ReactFramework>[] | ||
| ) { | ||
| once.warn(`setGlobalConfig is deprecated. Use setProjectAnnotations instead.`); | ||
| setProjectAnnotations(projectAnnotations); | ||
| } | ||
|
|
||
| // This will not be necessary once we have auto preset loading | ||
| const defaultProjectAnnotations: ProjectAnnotations<ReactFramework> = { | ||
| render, | ||
| }; | ||
|
|
||
| /** | ||
| * Function that will receive a story along with meta (e.g. a default export from a .stories file) | ||
| * 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. | ||
| * | ||
| * | ||
| * 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(<Primary>Hello world</Primary>); | ||
| * expect(getByText(/Hello world/i)).not.toBeNull(); | ||
| * }); | ||
| *``` | ||
| * | ||
| * @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 `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<TArgs = Args>( | ||
| story: ComposedStory<ReactFramework, TArgs>, | ||
| componentAnnotations: Meta<TArgs | any>, | ||
| projectAnnotations?: ProjectAnnotations<ReactFramework>, | ||
| exportsName?: string | ||
| ) { | ||
| return originalComposeStory<ReactFramework, TArgs>( | ||
| story, | ||
| componentAnnotations, | ||
| projectAnnotations, | ||
| defaultProjectAnnotations, | ||
| exportsName | ||
| ); | ||
| } | ||
|
|
||
| /** | ||
| * Function that will receive a stories import (e.g. `import * as stories from './Button.stories'`) | ||
| * 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. | ||
| * | ||
| * | ||
| * 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(<Primary>Hello world</Primary>); | ||
| * expect(getByText(/Hello world/i)).not.toBeNull(); | ||
| * }); | ||
| *``` | ||
| * | ||
| * @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 `setProjectAnnotations` in your setup files. | ||
| */ | ||
| export function composeStories<TModule extends CSFExports<ReactFramework>>( | ||
| csfExports: TModule, | ||
| projectAnnotations?: ProjectAnnotations<ReactFramework> | ||
| ) { | ||
| const composedStories = originalComposeStories(csfExports, projectAnnotations, composeStory); | ||
|
|
||
| return composedStories as unknown as Omit< | ||
| StoriesWithPartialProps<ReactFramework, TModule>, | ||
| keyof CSFExports | ||
| >; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
17 changes: 14 additions & 3 deletions
17
...s/cra-ts-essentials/.storybook/preview.js → .../cra-ts-essentials/.storybook/preview.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,4 @@ | ||
| import { setProjectAnnotations } from '@storybook/react'; | ||
| import * as projectAnnotations from '../.storybook/preview'; | ||
|
|
||
| setProjectAnnotations(projectAnnotations); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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<typeof Welcome>; | ||
|
|
||
| export const ToStorybook = () => <Welcome showApp={linkTo('Button')} />; | ||
| export const ToStorybook: ComponentStory<typeof Welcome> = () => ( | ||
| <Welcome showApp={linkTo('Button')} /> | ||
| ); | ||
|
|
||
| ToStorybook.storyName = 'to Storybook'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.