diff --git a/addons/interactions/src/Panel.stories.tsx b/addons/interactions/src/Panel.stories.tsx index cc6f37afdd09..bd84731ab1b3 100644 --- a/addons/interactions/src/Panel.stories.tsx +++ b/addons/interactions/src/Panel.stories.tsx @@ -1,6 +1,6 @@ import React from 'react'; import { action } from '@storybook/addon-actions'; -import { ComponentStoryObj, ComponentMeta } from '@storybook/react'; +import type { ComponentStoryObj, ComponentMeta } from '@storybook/react'; import { CallStates } from '@storybook/instrumenter'; import { styled } from '@storybook/theming'; diff --git a/addons/jest/README.md b/addons/jest/README.md index ab5046b2813b..b5648a499705 100644 --- a/addons/jest/README.md +++ b/addons/jest/README.md @@ -221,7 +221,7 @@ export const decorators = [ Finally, in your story, you'll need to include the following: ```ts -import { Meta, Story } from '@storybook/angular/types-6-0'; +import type { Meta, StoryFn } from '@storybook/angular'; import MyComponent from './MyComponent.component'; @@ -230,7 +230,7 @@ export default { title: 'MyComponent', } as Meta; -const Template: Story = (args: MyComponent) => ({ +const Template: StoryFn = (args: MyComponent) => ({ props: args, }); diff --git a/docs/faq.md b/docs/faq.md index cc1dec1ca45a..85b048280be9 100644 --- a/docs/faq.md +++ b/docs/faq.md @@ -16,8 +16,11 @@ module.exports = { addons: [ /* ... */ ], - angularOptions: { - enableIvy: false, + framework: { + name: '@storybook/angular', + options: { + enableIvy: false, + } }, }; ``` @@ -73,8 +76,11 @@ FAST_REFRESH=true ```js module.exports = { - reactOptions: { - fastRefresh: true, + framework: { + name: '@storybook/react-webpack5', + options: { + fastRefresh: true, + }, }, }; ``` @@ -91,8 +97,11 @@ You can opt-out from the new React Root API by setting the following property in ```js module.exports = { - reactOptions: { - legacyRootApi: true, + framework: { + name: '@storybook/react-webpack5', + options: { + legacyRootApi: true, + }, }, }; ``` @@ -410,7 +419,7 @@ We're aware that the default Typescript story construct might seem outdated and // Button.stories.ts | tsx import React from 'react'; -import { ComponentStory, ComponentMeta } from '@storybook/react'; +import type { ComponentStory, ComponentMeta } from '@storybook/react'; const StoryMeta: ComponentMeta = { /* πŸ‘‡ The title prop is optional. diff --git a/docs/snippets/angular/app-story-with-mock.ts.mdx b/docs/snippets/angular/app-story-with-mock.ts.mdx index c59e28fba4c0..b9e8fb23193d 100644 --- a/docs/snippets/angular/app-story-with-mock.ts.mdx +++ b/docs/snippets/angular/app-story-with-mock.ts.mdx @@ -1,7 +1,7 @@ ```ts // App.stories.ts -import { Meta, Story } from '@storybook/angular'; +import type { Meta, StoryFn } from '@storybook/angular'; import { AppComponent } from './app.component'; @@ -14,7 +14,7 @@ export default { component: AppComponent, } as Meta; -const Template: Story = () => ({ +const Template: StoryFn = () => ({ props: {}, }); diff --git a/docs/snippets/angular/button-group-story.ts.mdx b/docs/snippets/angular/button-group-story.ts.mdx index ef7332db0db7..ab6acb5aed3a 100644 --- a/docs/snippets/angular/button-group-story.ts.mdx +++ b/docs/snippets/angular/button-group-story.ts.mdx @@ -1,7 +1,7 @@ ```ts // ButtonGroup.stories.ts -import { Meta, moduleMetadata, Story } from '@storybook/angular'; +import { Meta, moduleMetadata, StoryFn } from '@storybook/angular'; import { CommonModule } from '@angular/common'; @@ -26,7 +26,7 @@ export default { ], } as Meta; -const Template: Story = (args) => ({ +const Template: StoryFn = (args) => ({ props: args, }); diff --git a/docs/snippets/angular/button-story-click-handler-args.ts.mdx b/docs/snippets/angular/button-story-click-handler-args.ts.mdx index 024ee79c92a6..c672aaeb1ae5 100644 --- a/docs/snippets/angular/button-story-click-handler-args.ts.mdx +++ b/docs/snippets/angular/button-story-click-handler-args.ts.mdx @@ -1,7 +1,7 @@ ```ts // Button.stories.ts -import { Meta, Story } from '@storybook/angular'; +import type { Meta, StoryFn } from '@storybook/angular'; import { action } from '@storybook/addon-actions'; @@ -16,7 +16,7 @@ export default { component: Button, } as Meta; -export const Text: Story = ({ label, onClick }) => ({ +export const Text: StoryFn = ({ label, onClick }) => ({ props: { label, onClick, diff --git a/docs/snippets/angular/button-story-click-handler-simplificated.ts.mdx b/docs/snippets/angular/button-story-click-handler-simplificated.ts.mdx index 7cb711badc7c..b3a72e56b530 100644 --- a/docs/snippets/angular/button-story-click-handler-simplificated.ts.mdx +++ b/docs/snippets/angular/button-story-click-handler-simplificated.ts.mdx @@ -1,7 +1,7 @@ ```ts // Button.stories.ts -import { Meta, Story } from '@storybook/angular'; +import type { Meta, StoryFn } from '@storybook/angular'; import { Button } from './button.component'; @@ -14,7 +14,7 @@ export default { component: Button, } as Meta; -export const Text: Story = (args) => ({ +export const Text: StoryFn = (args) => ({ props: args, }); ``` \ No newline at end of file diff --git a/docs/snippets/angular/button-story-click-handler.ts.mdx b/docs/snippets/angular/button-story-click-handler.ts.mdx index 603e95d0fb45..9f895908991e 100644 --- a/docs/snippets/angular/button-story-click-handler.ts.mdx +++ b/docs/snippets/angular/button-story-click-handler.ts.mdx @@ -1,7 +1,7 @@ ```ts // Button.stories.ts -import { Meta, Story } from '@storybook/angular'; +import type { Meta, StoryFn } from '@storybook/angular'; import { Button } from './button.component'; @@ -16,7 +16,7 @@ export default { component: Button, } as Meta; -export const Text: Story = () => ({ +export const Text: StoryFn = () => ({ props: { text: 'Hello Button', onClick: action('clicked'), diff --git a/docs/snippets/angular/button-story-component-args-primary.ts.mdx b/docs/snippets/angular/button-story-component-args-primary.ts.mdx index 882b9c223c73..0bbcfc742fb9 100644 --- a/docs/snippets/angular/button-story-component-args-primary.ts.mdx +++ b/docs/snippets/angular/button-story-component-args-primary.ts.mdx @@ -1,7 +1,7 @@ ```ts // Button.stories.ts -import { Meta } from '@storybook/angular'; +import type { Meta } from '@storybook/angular'; import { Button } from './button.component'; diff --git a/docs/snippets/angular/button-story-default-docs-code.ts.mdx b/docs/snippets/angular/button-story-default-docs-code.ts.mdx index a064635bd5dd..befabf5f3050 100644 --- a/docs/snippets/angular/button-story-default-docs-code.ts.mdx +++ b/docs/snippets/angular/button-story-default-docs-code.ts.mdx @@ -1,7 +1,7 @@ ```ts // Button.stories.ts -import { Meta, Story } from '@storybook/angular'; +import type { Meta, StoryFn } from '@storybook/angular'; import { Button } from './button.component'; @@ -24,7 +24,7 @@ const someFunction = (someValue: string) => { }; -export const ExampleStory: Story = (args) => { +export const ExampleStory: StoryFn = (args) => { //πŸ‘‡ Destructure the label from the args object const { label } = args; diff --git a/docs/snippets/angular/button-story-default-export-with-component.ts.mdx b/docs/snippets/angular/button-story-default-export-with-component.ts.mdx index a725407344c8..09feca9b3ee8 100644 --- a/docs/snippets/angular/button-story-default-export-with-component.ts.mdx +++ b/docs/snippets/angular/button-story-default-export-with-component.ts.mdx @@ -1,7 +1,7 @@ ```ts // Button.stories.ts -import { Meta } from '@storybook/angular'; +import type { Meta } from '@storybook/angular'; import { Button } from './button.component'; diff --git a/docs/snippets/angular/button-story-rename-story.ts.mdx b/docs/snippets/angular/button-story-rename-story.ts.mdx index cc7e47168605..561b056805b6 100644 --- a/docs/snippets/angular/button-story-rename-story.ts.mdx +++ b/docs/snippets/angular/button-story-rename-story.ts.mdx @@ -1,7 +1,7 @@ ```ts // Button.stories.ts -import { Meta, Story } from '@storybook/angular'; +import type { Meta, StoryFn } from '@storybook/angular'; import { Button } from './button.component'; @@ -15,7 +15,7 @@ export default { } as Meta; -export const Primary: Story = () => ({ +export const Primary: StoryFn = () => ({ props: { label: 'Button', primary: true, diff --git a/docs/snippets/angular/button-story-using-args.ts.mdx b/docs/snippets/angular/button-story-using-args.ts.mdx index 33be6ec6ac21..3a3f543fc064 100644 --- a/docs/snippets/angular/button-story-using-args.ts.mdx +++ b/docs/snippets/angular/button-story-using-args.ts.mdx @@ -1,7 +1,7 @@ ```ts // Button.stories.ts -import { Meta, Story } from '@storybook/angular'; +import type { Meta, StoryFn } from '@storybook/angular'; import { Button } from './button.component'; @@ -16,7 +16,7 @@ export default { //πŸ‘‡ We create a β€œtemplate” of how args map to rendering -const Template: Story = (args) => ({ +const Template: StoryFn = (args) => ({ props: args, }); diff --git a/docs/snippets/angular/button-story-with-addon-example.ts.mdx b/docs/snippets/angular/button-story-with-addon-example.ts.mdx index a1809a0ee0bf..8065a4b857a8 100644 --- a/docs/snippets/angular/button-story-with-addon-example.ts.mdx +++ b/docs/snippets/angular/button-story-with-addon-example.ts.mdx @@ -1,7 +1,7 @@ ```ts // Button.stories.ts -import { Meta, Story } from '@storybook/angular'; +import type { Meta, StoryFn } from '@storybook/angular'; import { Button } from './button.component'; @@ -20,7 +20,7 @@ export default { }, } as Meta; -export const Basic: Story = () => ({ +export const Basic: StoryFn = () => ({ template: `hello`, }); ``` \ No newline at end of file diff --git a/docs/snippets/angular/button-story-with-args.ts.mdx b/docs/snippets/angular/button-story-with-args.ts.mdx index 9397f8fcbb9b..cc8cf2395209 100644 --- a/docs/snippets/angular/button-story-with-args.ts.mdx +++ b/docs/snippets/angular/button-story-with-args.ts.mdx @@ -1,7 +1,7 @@ ```ts // Button.stories.ts -import { Meta, Story } from '@storybook/angular/'; +import type { Meta, StoryFn } from '@storybook/angular/'; import { Button } from './button.component'; @@ -15,7 +15,7 @@ export default { } as Meta; //πŸ‘‡ We create a β€œtemplate” of how args map to rendering -const Template: Story = (args) => ({ +const Template: StoryFn = (args) => ({ props: args, }); diff --git a/docs/snippets/angular/button-story-with-blue-args.ts.mdx b/docs/snippets/angular/button-story-with-blue-args.ts.mdx index 0883da9d428e..0ae9a376895e 100644 --- a/docs/snippets/angular/button-story-with-blue-args.ts.mdx +++ b/docs/snippets/angular/button-story-with-blue-args.ts.mdx @@ -1,7 +1,7 @@ ```ts // Button.stories.ts -import { Meta } from '@storybook/angular'; +import type { Meta } from '@storybook/angular'; import { Button } from './button.component'; diff --git a/docs/snippets/angular/button-story-with-emojis.ts.mdx b/docs/snippets/angular/button-story-with-emojis.ts.mdx index ce4c5a05ed10..8d45732b413b 100644 --- a/docs/snippets/angular/button-story-with-emojis.ts.mdx +++ b/docs/snippets/angular/button-story-with-emojis.ts.mdx @@ -1,7 +1,7 @@ ```ts // Button.stories.ts -import { Meta, Story } from '@storybook/angular'; +import type { Meta, StoryFn } from '@storybook/angular'; import { Button } from './button.component'; @@ -14,7 +14,7 @@ export default { component: Button, }; -export const Primary: Story = () => ({ +export const Primary: StoryFn = () => ({ props: { label: 'Button', backgroundColor: '#ff0', @@ -22,14 +22,14 @@ export const Primary: Story = () => ({ }); -export const Secondary: Story = () => ({ +export const Secondary: StoryFn = () => ({ props: { label: 'πŸ˜„πŸ‘πŸ˜πŸ’―', backgroundColor: '#ff0', }, }); -export const Tertiary: Story = () => ({ +export const Tertiary: StoryFn = () => ({ props: { label: 'πŸ“šπŸ“•πŸ“ˆπŸ€“', backgroundColor: '#ff0', diff --git a/docs/snippets/angular/button-story.ts.mdx b/docs/snippets/angular/button-story.ts.mdx index 6caf51790495..2d760058a545 100644 --- a/docs/snippets/angular/button-story.ts.mdx +++ b/docs/snippets/angular/button-story.ts.mdx @@ -1,7 +1,7 @@ ```ts // Button.stories.ts -import { Meta, Story } from '@storybook/angular'; +import type { Meta, StoryFn } from '@storybook/angular'; import { Button } from './button.component'; @@ -14,7 +14,7 @@ export default { component: Button, } as Meta; -export const Primary: Story = () => ({ +export const Primary: StoryFn = () => ({ props: { label: 'Button', primary: true, diff --git a/docs/snippets/angular/checkbox-story-csf.ts.mdx b/docs/snippets/angular/checkbox-story-csf.ts.mdx index 482aa27c18f4..07df03b0f028 100644 --- a/docs/snippets/angular/checkbox-story-csf.ts.mdx +++ b/docs/snippets/angular/checkbox-story-csf.ts.mdx @@ -1,7 +1,7 @@ ```ts // Checkbox.stories.ts -import { Meta, Story } from '@storybook/angular'; +import type { Meta, StoryFn } from '@storybook/angular'; import { Checkbox } from './Checkbox.component'; @@ -14,7 +14,7 @@ export default { component: Checkbox, } as Meta; -export const allCheckboxes: Story = () => ({ +export const allCheckboxes: StoryFn = () => ({ template: `
diff --git a/docs/snippets/angular/component-story-custom-args-icons.ts.mdx b/docs/snippets/angular/component-story-custom-args-icons.ts.mdx index e9a754c9d482..a2db4b2b85c9 100644 --- a/docs/snippets/angular/component-story-custom-args-icons.ts.mdx +++ b/docs/snippets/angular/component-story-custom-args-icons.ts.mdx @@ -1,7 +1,7 @@ ```ts // Icon.stories.ts -import { Story, Meta } from '@storybook/angular/types-6-0'; +import type { Meta, StoryFn } from '@storybook/angular'; import Icon from './icon.component'; diff --git a/docs/snippets/angular/component-story-figma-integration.ts.mdx b/docs/snippets/angular/component-story-figma-integration.ts.mdx index eb0e2565f611..e7f3260a3ba6 100644 --- a/docs/snippets/angular/component-story-figma-integration.ts.mdx +++ b/docs/snippets/angular/component-story-figma-integration.ts.mdx @@ -1,7 +1,7 @@ ```ts // MyComponent.stories.ts -import { Story, Meta } from '@storybook/angular/'; +import type { Meta, StoryFn } from '@storybook/angular'; import { withDesign } from 'storybook-addon-designs'; @@ -15,7 +15,7 @@ export default { } as Meta; // More on component templates: https://storybook.js.org/docs/angular/writing-stories/introduction#using-args -const Template: Story = () => ({ +const Template: StoryFn = () => ({ props: {}, }); diff --git a/docs/snippets/angular/component-story-static-asset-cdn.ts.mdx b/docs/snippets/angular/component-story-static-asset-cdn.ts.mdx index 7fb6fa7d8e31..4c4ca886fbcf 100644 --- a/docs/snippets/angular/component-story-static-asset-cdn.ts.mdx +++ b/docs/snippets/angular/component-story-static-asset-cdn.ts.mdx @@ -1,7 +1,7 @@ ```ts // MyComponent.stories.ts -import { Meta, Story } from '@storybook/angular'; +import type { Meta, StoryFn } from '@storybook/angular'; import { MyComponent } from './MyComponent.component'; @@ -15,7 +15,7 @@ export default { } as Meta; -export const WithAnImage: Story = () => ({ +export const WithAnImage: StoryFn = () => ({ props: { src: 'https://place-hold.it/350x150', alt: 'My CDN placeholder', diff --git a/docs/snippets/angular/component-story-static-asset-with-import.ts.mdx b/docs/snippets/angular/component-story-static-asset-with-import.ts.mdx index c8b078d1ce2f..9d199ddb688e 100644 --- a/docs/snippets/angular/component-story-static-asset-with-import.ts.mdx +++ b/docs/snippets/angular/component-story-static-asset-with-import.ts.mdx @@ -1,7 +1,7 @@ ```ts // MyComponent.stories.ts -import { Meta, Story } from '@storybook/angular'; +import type { Meta, StoryFn } from '@storybook/angular'; import { MyComponent } from './MyComponent.component'; @@ -21,7 +21,7 @@ const image = { alt: 'my image', }; -export const WithAnImage: Story () => ({ +export const WithAnImage: StoryFn () => ({ template: `{{alt}}`, props: { src: image.src, diff --git a/docs/snippets/angular/component-story-static-asset-without-import.ts.mdx b/docs/snippets/angular/component-story-static-asset-without-import.ts.mdx index 04357f1f4557..3418520c367b 100644 --- a/docs/snippets/angular/component-story-static-asset-without-import.ts.mdx +++ b/docs/snippets/angular/component-story-static-asset-without-import.ts.mdx @@ -1,7 +1,7 @@ ```ts // MyComponent.stories.ts -import {Β Meta, Story } from '@storybook/angular'; +import type {Β Meta, StoryFn } from '@storybook/angular'; import { MyComponent } from './MyComponent.component'; @@ -15,7 +15,7 @@ export default { } as Meta; // Assume image.png is located in the "public" directory. -export const WithAnImage: Story = () => ({ +export const WithAnImage: StoryFn = () => ({ props: { src: '/image.png', alt: 'my image', diff --git a/docs/snippets/angular/component-story-with-accessibility.ts.mdx b/docs/snippets/angular/component-story-with-accessibility.ts.mdx index 751934b3ea15..a7d30f3315f0 100644 --- a/docs/snippets/angular/component-story-with-accessibility.ts.mdx +++ b/docs/snippets/angular/component-story-with-accessibility.ts.mdx @@ -1,7 +1,7 @@ ```ts // Button.stories.ts -import { Meta, Story } from '@storybook/angular'; +import type { Meta, StoryFn } from '@storybook/angular'; import { Button } from './Button.component'; @@ -16,17 +16,17 @@ export default { }, } as Meta; -const Template: Story = (args) => ({ +const Template: StoryFn = (args) => ({ props: args, }); -export const Accessible: Story = Template.bind({}); +export const Accessible: StoryFn = Template.bind({}); Accessible.args = { primary: false, label: 'Button', }; -export const Inaccessible: Story = Template.bind({}); +export const Inaccessible: StoryFn = Template.bind({}); Inaccessible.args = { ...Accessible.args, backgroundColor: 'red', diff --git a/docs/snippets/angular/documentscreen-story-msw-graphql-query.ts.mdx b/docs/snippets/angular/documentscreen-story-msw-graphql-query.ts.mdx index 13f45f9fcfe4..61ca1f0badf7 100644 --- a/docs/snippets/angular/documentscreen-story-msw-graphql-query.ts.mdx +++ b/docs/snippets/angular/documentscreen-story-msw-graphql-query.ts.mdx @@ -1,12 +1,10 @@ ```ts // YourPage.stories.ts -import { Meta, Story } from '@storybook/angular'; - import { CommonModule } from '@angular/common'; import { HttpClientModule } from '@angular/common/http'; -import { Meta, moduleMetadata, Story } from '@storybook/angular'; +import { Meta, moduleMetadata, StoryFn } from '@storybook/angular'; import { graphql } from 'msw'; @@ -81,7 +79,7 @@ const TestData = { ], }; -const PageTemplate: Story = () => ({ +const PageTemplate: StoryFn = () => ({ props: {}, }); diff --git a/docs/snippets/angular/documentscreen-story-msw-rest-request.ts.mdx b/docs/snippets/angular/documentscreen-story-msw-rest-request.ts.mdx index b322e273b2b2..a906adbc06aa 100644 --- a/docs/snippets/angular/documentscreen-story-msw-rest-request.ts.mdx +++ b/docs/snippets/angular/documentscreen-story-msw-rest-request.ts.mdx @@ -1,12 +1,10 @@ ```ts // YourPage.stories.ts -import { Meta, Story } from '@storybook/angular'; - import { CommonModule } from '@angular/common'; import { HttpClientModule } from '@angular/common/http'; -import { Meta, moduleMetadata, Story } from '@storybook/angular'; +import { Meta, moduleMetadata, StoryFn } from '@storybook/angular'; import { rest } from 'msw'; @@ -79,7 +77,7 @@ const TestData = { ], }; -const PageTemplate: Story = () => ({ +const PageTemplate: StoryFn = () => ({ props: {}, }); diff --git a/docs/snippets/angular/list-story-starter.ts.mdx b/docs/snippets/angular/list-story-starter.ts.mdx index d325679ad9e3..f611681d6b23 100644 --- a/docs/snippets/angular/list-story-starter.ts.mdx +++ b/docs/snippets/angular/list-story-starter.ts.mdx @@ -1,7 +1,7 @@ ```ts // List.stories.ts -import { Story, Meta, moduleMetadata } from '@storybook/angular'; +import { Meta, StoryFn, moduleMetadata } from '@storybook/angular'; import { CommonModule } from '@angular/common'; @@ -22,7 +22,7 @@ export default { } as Meta; // Always an empty list, not super interesting -const Template: Story = (args) => ({ +const Template: StoryFn = (args) => ({ props: args, template: ``, }); diff --git a/docs/snippets/angular/list-story-with-subcomponents.ts.mdx b/docs/snippets/angular/list-story-with-subcomponents.ts.mdx index 459bf8791a68..d56a8761723f 100644 --- a/docs/snippets/angular/list-story-with-subcomponents.ts.mdx +++ b/docs/snippets/angular/list-story-with-subcomponents.ts.mdx @@ -1,7 +1,7 @@ ```ts // List.stories.ts -import { Meta, moduleMetadata, Story } from '@storybook/angular'; +import { Meta, moduleMetadata, StoryFn } from '@storybook/angular'; import { CommonModule } from '@angular/common'; @@ -24,13 +24,13 @@ export default { ], } as Meta; -export const Empty: Story = () => ({ +export const Empty: StoryFn = () => ({ props: { args, }, }); -export const OneItem: Story = () => ({ +export const OneItem: StoryFn = () => ({ props: { args, }, diff --git a/docs/snippets/angular/login-form-with-play-function.ts.mdx b/docs/snippets/angular/login-form-with-play-function.ts.mdx index 48df0db4da3c..3f53071ec04d 100644 --- a/docs/snippets/angular/login-form-with-play-function.ts.mdx +++ b/docs/snippets/angular/login-form-with-play-function.ts.mdx @@ -1,7 +1,7 @@ ```ts // LoginForm.stories.ts -import { Meta, Story } from '@storybook/angular'; +import type { Meta, StoryFn } from '@storybook/angular'; import { userEvent, within } from '@storybook/testing-library'; @@ -18,13 +18,13 @@ export default { component: LoginForm, } as Meta; -const Template: Story = (args) => ({ +const Template: StoryFn = (args) => ({ props: args, }); -export const EmptyForm: Story = Template.bind({}); +export const EmptyForm: StoryFn = Template.bind({}); -export const FilledForm: Story = Template.bind({}); +export const FilledForm: StoryFn = Template.bind({}); FilledForm.play = async ({ canvasElement }) => { // Starts querying the component from its root element const canvas = within(canvasElement); diff --git a/docs/snippets/angular/my-component-play-function-composition.ts.mdx b/docs/snippets/angular/my-component-play-function-composition.ts.mdx index 818de2f6f011..1c53ca4281de 100644 --- a/docs/snippets/angular/my-component-play-function-composition.ts.mdx +++ b/docs/snippets/angular/my-component-play-function-composition.ts.mdx @@ -1,7 +1,7 @@ ```ts // MyComponent.stories.ts -import { Meta, Story } from '@storybook/angular'; +import type { Meta, StoryFn } from '@storybook/angular'; import { screen, userEvent } from '@storybook/testing-library'; @@ -16,21 +16,21 @@ export default { component: MyComponent, } as Meta; -const Template: Story = (args) => ({ +const Template: StoryFn = (args) => ({ props: args, }); -export const FirstStory: Story = Template.bind({}); +export const FirstStory: StoryFn = Template.bind({}); FirstStory.play = async () => { userEvent.type(screen.getByTestId('an-element'), 'example-value'); }; -export const SecondStory: Story = Template.bind({}); +export const SecondStory: StoryFn = Template.bind({}); SecondStory.play = async () => { await userEvent.type(screen.getByTestId('other-element'), 'another value'); }; -export const CombinedStories: Story = Template.bind({}); +export const CombinedStories: StoryFn = Template.bind({}); CombinedStories.play = async () => { // Runs the FirstStory and Second story play function before running this story's play function await FirstStory.play(); diff --git a/docs/snippets/angular/my-component-play-function-waitfor.ts.mdx b/docs/snippets/angular/my-component-play-function-waitfor.ts.mdx index bb8cfebfc317..189c583d7888 100644 --- a/docs/snippets/angular/my-component-play-function-waitfor.ts.mdx +++ b/docs/snippets/angular/my-component-play-function-waitfor.ts.mdx @@ -1,7 +1,7 @@ ```ts // MyComponent.stories.ts -import { Meta, Story } from '@storybook/angular'; +import type { Meta, StoryFn } from '@storybook/angular'; import { screen, userEvent, waitFor } from '@storybook/testing-library'; @@ -17,11 +17,11 @@ export default { } as Meta; -const Template: Story = (args) => ({ +const Template: StoryFn = (args) => ({ props: args, }); -export const ExampleAsyncStory: Story = Template.bind({}); +export const ExampleAsyncStory: StoryFn = Template.bind({}); ExampleAsyncStory.play = async () => { const Input = screen.getByLabelText('Username', { selector: 'input', diff --git a/docs/snippets/angular/my-component-play-function-with-canvas.ts.mdx b/docs/snippets/angular/my-component-play-function-with-canvas.ts.mdx index 1cfc409bb7cc..75be6383fa92 100644 --- a/docs/snippets/angular/my-component-play-function-with-canvas.ts.mdx +++ b/docs/snippets/angular/my-component-play-function-with-canvas.ts.mdx @@ -1,7 +1,7 @@ ```ts // MyComponent.stories.ts -import { Meta, Story } from '@storybook/angular'; +import type { Meta, StoryFn } from '@storybook/angular'; import { getByRole, userEvent, within } from '@storybook/testing-library'; @@ -16,11 +16,11 @@ export default { component: MyComponent, } as Meta; -const Template: Story = (args) => ({ +const Template: StoryFn = (args) => ({ props: args, }); -export const ExampleStory: Story = Template.bind({}); +export const ExampleStory: StoryFn = Template.bind({}); ExampleStory.play = async ({ canvasElement }) => { // Assigns canvas to the component root element const canvas = within(canvasElement); diff --git a/docs/snippets/angular/my-component-play-function-with-clickevent.ts.mdx b/docs/snippets/angular/my-component-play-function-with-clickevent.ts.mdx index 87dc0d2f1c74..1a5bb79ddbab 100644 --- a/docs/snippets/angular/my-component-play-function-with-clickevent.ts.mdx +++ b/docs/snippets/angular/my-component-play-function-with-clickevent.ts.mdx @@ -1,7 +1,7 @@ ```ts // MyComponent.stories.ts -import { Meta, Story } from '@storybook/angular'; +import type { Meta, StoryFn } from '@storybook/angular'; import { fireEvent, screen, userEvent } from '@storybook/testing-library'; @@ -16,17 +16,17 @@ export default { component: MyComponent, } as Meta; -const Template: Story = (args) => ({ +const Template: StoryFn = (args) => ({ props: args, }); -export const ClickExample: Story = Template.bind({}); +export const ClickExample: StoryFn = Template.bind({}); ClickExample.play = async () => { // See https://storybook.js.org/docs/angular/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel await userEvent.click(screen.getByRole('button')); }; -export const FireEventExample: Story = Template.bind({}); +export const FireEventExample: StoryFn = Template.bind({}); FireEventExample.play = async () => { // See https://storybook.js.org/docs/angular/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel await fireEvent.click(screen.getByTestId('data-testid')); diff --git a/docs/snippets/angular/my-component-play-function-with-delay.ts.mdx b/docs/snippets/angular/my-component-play-function-with-delay.ts.mdx index 084f43dd360d..179f49008583 100644 --- a/docs/snippets/angular/my-component-play-function-with-delay.ts.mdx +++ b/docs/snippets/angular/my-component-play-function-with-delay.ts.mdx @@ -1,7 +1,7 @@ ```ts // MyComponent.stories.ts -import { Meta, Story } from '@storybook/angular'; +import type { Meta, StoryFn } from '@storybook/angular'; import { screen, userEvent } from '@storybook/testing-library'; @@ -16,11 +16,11 @@ export default { component: MyComponent, } as Meta; -const Template: Story = (args) => ({ +const Template: StoryFn = (args) => ({ props: args, }); -export const DelayedStory: Story = Template.bind({}); +export const DelayedStory: StoryFn = Template.bind({}); DelayedStory.play = () => { const exampleElement= screen.getByLabelText('example-element'); // The delay option set the amount of milliseconds between characters being typed diff --git a/docs/snippets/angular/my-component-play-function-with-selectevent.ts.mdx b/docs/snippets/angular/my-component-play-function-with-selectevent.ts.mdx index d88755a5cb1c..e6f9c2b3f5d4 100644 --- a/docs/snippets/angular/my-component-play-function-with-selectevent.ts.mdx +++ b/docs/snippets/angular/my-component-play-function-with-selectevent.ts.mdx @@ -1,7 +1,7 @@ ```ts // MyComponent.stories.ts -import { Meta, Story } from '@storybook/angular'; +import type { Meta, StoryFn } from '@storybook/angular'; import { screen, userEvent } from '@storybook/testing-library'; @@ -21,11 +21,11 @@ function sleep(ms: number) { return new Promise((resolve) => setTimeout(resolve, ms)); } -const Template: Story = (args) => ({ +const Template: StoryFn = (args) => ({ props: args, }); -export const ExampleChangeEvent: Story = Template.bind({}); +export const ExampleChangeEvent: StoryFn = Template.bind({}); ExampleChangeEvent.play = async () => { const select = screen.getByRole('listbox'); diff --git a/docs/snippets/angular/my-component-story-basic-and-props.ts.mdx b/docs/snippets/angular/my-component-story-basic-and-props.ts.mdx index 4d212e54bec1..1627cb107ac4 100644 --- a/docs/snippets/angular/my-component-story-basic-and-props.ts.mdx +++ b/docs/snippets/angular/my-component-story-basic-and-props.ts.mdx @@ -1,7 +1,7 @@ ```ts // MyComponent.stories.ts -import { Meta, Story } from '@storybook/angular'; +import type { Meta, StoryFn } from '@storybook/angular'; import { MyComponent } from './MyComponent.component'; @@ -15,11 +15,11 @@ export default { } as Meta; -export const Default: Story = () => ({ +export const Default: StoryFn = () => ({ props: {}, }); -export const WithProp: Story = () => ({ +export const WithProp: StoryFn = () => ({ props: { prop: 'value', }, diff --git a/docs/snippets/angular/my-component-story-configure-viewports.ts.mdx b/docs/snippets/angular/my-component-story-configure-viewports.ts.mdx index 31b17240aaee..32a1b278f3f0 100644 --- a/docs/snippets/angular/my-component-story-configure-viewports.ts.mdx +++ b/docs/snippets/angular/my-component-story-configure-viewports.ts.mdx @@ -1,7 +1,7 @@ ```ts // MyComponent.stories.ts -import { Meta, Story } from '@storybook/angular'; +import type { Meta, StoryFn } from '@storybook/angular'; import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport'; @@ -26,7 +26,7 @@ export default { }, } as Meta; -export const MyStory: Story = () => ({ +export const MyStory: StoryFn = () => ({ template: '', }); ``` \ No newline at end of file diff --git a/docs/snippets/angular/my-component-story-use-globaltype.ts.mdx b/docs/snippets/angular/my-component-story-use-globaltype.ts.mdx index c0f5e90f1954..861abb7a806d 100644 --- a/docs/snippets/angular/my-component-story-use-globaltype.ts.mdx +++ b/docs/snippets/angular/my-component-story-use-globaltype.ts.mdx @@ -1,7 +1,7 @@ ```ts // MyComponent.stories.ts -import { Meta } from '@storybook/angular'; +import type { Meta, StoryFn } from '@storybook/angular'; import { MyComponent } from './MyComponent.component'; @@ -29,7 +29,7 @@ const getCaptionForLocale = (locale) => { } }; -export const StoryWithLocale = (args, { globals: { locale } }) => { +export const StoryWithLocale: StoryFn = (args, { globals: { locale } }) => { const caption = getCaptionForLocale(locale); return { template: `

${caption}

`, diff --git a/docs/snippets/angular/my-component-with-env-variables.ts.mdx b/docs/snippets/angular/my-component-with-env-variables.ts.mdx index 46a610aeab4f..e61d92bc5ce8 100644 --- a/docs/snippets/angular/my-component-with-env-variables.ts.mdx +++ b/docs/snippets/angular/my-component-with-env-variables.ts.mdx @@ -1,7 +1,7 @@ ```ts // MyComponent.stories.ts -import { Meta, Story } from '@storybook/angular'; +import type { Meta, StoryFn } from '@storybook/angular'; import { MyComponent } from './MyComponent.component'; @@ -14,7 +14,7 @@ export default { component: MyComponent, } as Meta; -const Template: Story = (args) => ({ +const Template: StoryFn = (args) => ({ props: args, }); diff --git a/docs/snippets/angular/page-story-slots.ts.mdx b/docs/snippets/angular/page-story-slots.ts.mdx index 4a59a2b1b5f7..9f28386be9d2 100644 --- a/docs/snippets/angular/page-story-slots.ts.mdx +++ b/docs/snippets/angular/page-story-slots.ts.mdx @@ -1,7 +1,7 @@ ```ts // Page.stories.ts -import { Meta, Story } from '@storybook/angular'; +import type { Meta, StoryFn } from '@storybook/angular'; import { Page } from './page.component'; @@ -15,7 +15,7 @@ export default { } as Meta; -const Template: Story = (args) => ({ +const Template: StoryFn = (args) => ({ props: args, template: ` diff --git a/docs/snippets/angular/page-story.ts.mdx b/docs/snippets/angular/page-story.ts.mdx index b10dacff8340..9b34f4467133 100644 --- a/docs/snippets/angular/page-story.ts.mdx +++ b/docs/snippets/angular/page-story.ts.mdx @@ -1,7 +1,7 @@ ```ts // Page.stories.ts -import { Meta, moduleMetadata, Story } from '@storybook/angular'; +import { Meta, moduleMetadata, StoryFn } from '@storybook/angular'; import { CommonModule } from '@angular/common'; @@ -27,7 +27,7 @@ export default { ], } as Meta; -const Template: Story = (args) => ({ +const Template: StoryFn = (args) => ({ props: args, }); diff --git a/docs/snippets/angular/register-component-with-play-function.ts.mdx b/docs/snippets/angular/register-component-with-play-function.ts.mdx index 39f62fd79993..64fc2f4cf8dc 100644 --- a/docs/snippets/angular/register-component-with-play-function.ts.mdx +++ b/docs/snippets/angular/register-component-with-play-function.ts.mdx @@ -1,7 +1,7 @@ ```ts // RegistrationForm.stories.ts -import { Meta, Story } from '@storybook/angular'; +import type { Meta, StoryFn } from '@storybook/angular'; import { screen, userEvent } from '@storybook/testing-library'; @@ -16,11 +16,11 @@ export default { component: RegistrationForm, } as Meta; -const Template: Story = (args) => ({ +const Template: StoryFn = (args) => ({ props: args, }); -export const FilledForm: Story = Template.bind({}); +export const FilledForm: StoryFn = Template.bind({}); FilledForm.play = async () => { const emailInput = screen.getByLabelText('email', { selector: 'input', diff --git a/docs/snippets/angular/storybook-addon-a11y-disable.ts.mdx b/docs/snippets/angular/storybook-addon-a11y-disable.ts.mdx index 7b3aec3f59d2..ca86a28704f0 100644 --- a/docs/snippets/angular/storybook-addon-a11y-disable.ts.mdx +++ b/docs/snippets/angular/storybook-addon-a11y-disable.ts.mdx @@ -1,7 +1,7 @@ ```ts // MyComponent.stories.ts -import { Meta, Story } from '@storybook/angular'; +import type { Meta, StoryFn } from '@storybook/angular'; import { MyComponent } from './MyComponent.component'; @@ -14,7 +14,7 @@ export default { component: MyComponent, } as Meta; -const Template: Story = () => ({}); +const Template: StoryFn = () => ({}); export const NonA11yStory = Template.bind({}); NonA11yStory.parameters = { diff --git a/docs/snippets/angular/storybook-addon-a11y-story-config.ts.mdx b/docs/snippets/angular/storybook-addon-a11y-story-config.ts.mdx index 9b434d8a6506..f03016e01938 100644 --- a/docs/snippets/angular/storybook-addon-a11y-story-config.ts.mdx +++ b/docs/snippets/angular/storybook-addon-a11y-story-config.ts.mdx @@ -1,7 +1,7 @@ ```ts // MyComponent.stories.ts -import { Meta, Story } from '@storybook/angular'; +import type { Meta, StoryFn } from '@storybook/angular'; import { MyComponent } from './MyComponent.component'; @@ -14,7 +14,7 @@ export default { component: MyComponent, } as Meta; -const Template: Story = () => ({}); +const Template: StoryFn = () => ({}); export const ExampleStory = Template.bind({}); ExampleStory.parameters = { diff --git a/docs/snippets/angular/table-story-fully-customize-controls.ts.mdx b/docs/snippets/angular/table-story-fully-customize-controls.ts.mdx index 17982a224f13..f04ec2bf0192 100644 --- a/docs/snippets/angular/table-story-fully-customize-controls.ts.mdx +++ b/docs/snippets/angular/table-story-fully-customize-controls.ts.mdx @@ -1,7 +1,7 @@ ```ts // Table.stories.ts -import { Meta, Story } from '@storybook/angular', +import type { Meta, StoryFn } from '@storybook/angular', import { Table } from './Table.component'; @@ -14,7 +14,7 @@ export default { component: Table, } as Meta; -const TableStory: Story = (args) => ({ +const TableStory: StoryFn = (args) => ({ props: args, template: ` diff --git a/docs/snippets/angular/your-component.ts.mdx b/docs/snippets/angular/your-component.ts.mdx index e33f39347f74..e362952952e7 100644 --- a/docs/snippets/angular/your-component.ts.mdx +++ b/docs/snippets/angular/your-component.ts.mdx @@ -1,7 +1,7 @@ ```ts // YourComponent.stories.ts -import { Meta, Story } from '@storybook/angular'; +import type { Meta, StoryFn } from '@storybook/angular'; import { YourComponent } from './your.component'; @@ -17,7 +17,7 @@ export default { } as Meta; //πŸ‘‡ We create a β€œtemplate” of how args map to rendering -const Template: Story = (args) => ({ +const Template: StoryFn = (args) => ({ props:args, }); diff --git a/docs/snippets/common/button-group-story-subcomponents.ts.mdx b/docs/snippets/common/button-group-story-subcomponents.ts.mdx index 1b5a6f33bc13..88e5e7e9b5f2 100644 --- a/docs/snippets/common/button-group-story-subcomponents.ts.mdx +++ b/docs/snippets/common/button-group-story-subcomponents.ts.mdx @@ -1,7 +1,7 @@ ```ts // ButtonGroup.stories.ts|tsx -import { Meta } from '@storybook/react'; +import type { Meta } from '@storybook/react'; import { Button, ButtonGroup } from './ButtonGroup'; diff --git a/docs/snippets/common/button-story-remix-docspage.ts.mdx b/docs/snippets/common/button-story-remix-docspage.ts.mdx index 8ba8b9b1cb30..97d758f1250a 100644 --- a/docs/snippets/common/button-story-remix-docspage.ts.mdx +++ b/docs/snippets/common/button-story-remix-docspage.ts.mdx @@ -3,7 +3,7 @@ import React from 'react'; -import { Meta } from '@storybook/react'; +import type { Meta } from '@storybook/react'; import { Title, diff --git a/docs/snippets/common/storybook-vite-builder-svelte-plugin.js.mdx b/docs/snippets/common/storybook-vite-builder-svelte-plugin.js.mdx index 3ec43e4e035e..8d4a2eeda43a 100644 --- a/docs/snippets/common/storybook-vite-builder-svelte-plugin.js.mdx +++ b/docs/snippets/common/storybook-vite-builder-svelte-plugin.js.mdx @@ -13,12 +13,15 @@ module.exports = { // Customize the Vite config here return config; }, - svelteOptions: { - preprocess: preprocess({ - typescript: true, - postcss: true, - sourceMap: true, - }), + framework:{ + name: '@storybook/svelte-webpack5', + options: { + preprocess: preprocess({ + typescript: true, + postcss: true, + sourceMap: true, + }), + }, }, }; ``` \ No newline at end of file diff --git a/docs/snippets/html/button-story-with-args.ts.mdx b/docs/snippets/html/button-story-with-args.ts.mdx index 9b75446177ee..462d6247e018 100644 --- a/docs/snippets/html/button-story-with-args.ts.mdx +++ b/docs/snippets/html/button-story-with-args.ts.mdx @@ -1,7 +1,7 @@ ```ts // Button.stories.ts -import { Meta, StoryFn } from '@storybook/html'; +import type { Meta, StoryFn } from '@storybook/html'; type ButtonArgs = { primary: boolean; diff --git a/docs/snippets/react/app-story-with-mock.ts.mdx b/docs/snippets/react/app-story-with-mock.ts.mdx index 1613c6f8a3e9..61e01fd388bc 100644 --- a/docs/snippets/react/app-story-with-mock.ts.mdx +++ b/docs/snippets/react/app-story-with-mock.ts.mdx @@ -3,7 +3,7 @@ import React from 'react'; -import { ComponentStory, ComponentMeta } from '@storybook/react'; +import type { ComponentStoryFn, ComponentMeta } from '@storybook/react'; import App from './App'; @@ -16,7 +16,7 @@ export default { component: App, } as ComponentMeta; -const Template: ComponentStory = () => ; +const Template: ComponentStoryFn = () => ; export const Success = Template.bind({}); Success.parameters = { diff --git a/docs/snippets/react/button-group-story.ts.mdx b/docs/snippets/react/button-group-story.ts.mdx index 8b25518eb4a9..24c24e512a40 100644 --- a/docs/snippets/react/button-group-story.ts.mdx +++ b/docs/snippets/react/button-group-story.ts.mdx @@ -3,7 +3,7 @@ import React from 'react'; -import { ComponentStory, ComponentMeta } from '@storybook/react'; +import type { ComponentStoryFn, ComponentMeta } from '@storybook/react'; import { ButtonGroup } from '../ButtonGroup'; @@ -19,7 +19,7 @@ export default { component: ButtonGroup, } as ComponentMeta; -const Template: ComponentStory = (args) => ; +const Template: ComponentStoryFn = (args) => ; export const Pair = Template.bind({}); Pair.args = { diff --git a/docs/snippets/react/button-story-click-handler.ts.mdx b/docs/snippets/react/button-story-click-handler.ts.mdx index 89909a04e4ff..febf5a55461c 100644 --- a/docs/snippets/react/button-story-click-handler.ts.mdx +++ b/docs/snippets/react/button-story-click-handler.ts.mdx @@ -3,7 +3,7 @@ import React from 'react'; -import { ComponentStory, ComponentMeta } from '@storybook/react'; +import type { ComponentStoryFn, ComponentMeta } from '@storybook/react'; import { action } from '@storybook/addon-actions'; @@ -18,5 +18,5 @@ export default { component: Button, } as ComponentMeta; -export const Basic: ComponentStory = () => ; +const Basic: ComponentStoryFn = () => ; ``` \ No newline at end of file diff --git a/docs/snippets/react/button-story-with-args.ts.mdx b/docs/snippets/react/button-story-with-args.ts.mdx index 76b502fa348d..0d42716af396 100644 --- a/docs/snippets/react/button-story-with-args.ts.mdx +++ b/docs/snippets/react/button-story-with-args.ts.mdx @@ -3,7 +3,7 @@ import React from 'react'; -import { ComponentStory, ComponentMeta } from '@storybook/react'; +import type { ComponentStoryFn, ComponentMeta } from '@storybook/react'; import { Button, ButtonProps } from './Button'; @@ -17,7 +17,7 @@ export default { } as ComponentMeta; //πŸ‘‡ We create a β€œtemplate” of how args map to rendering -const Template: ComponentStory = (args) => ; +export const Primary: ComponentStoryFn = () => ; ``` \ No newline at end of file diff --git a/docs/snippets/react/checkbox-story-csf.ts.mdx b/docs/snippets/react/checkbox-story-csf.ts.mdx index 503a2f991320..7ee4746026e6 100644 --- a/docs/snippets/react/checkbox-story-csf.ts.mdx +++ b/docs/snippets/react/checkbox-story-csf.ts.mdx @@ -3,7 +3,7 @@ import React from 'react'; -import { ComponentMeta, ComponentStory } from '@storybook/react'; +import { ComponentMeta, ComponentStoryFn } from '@storybook/react'; import { Checkbox } from './Checkbox'; @@ -16,7 +16,7 @@ export default { component: Checkbox, } as ComponentMeta; -export const allCheckboxes: ComponentStory = () => ( +export const allCheckboxes: ComponentStoryFn = () => ( diff --git a/docs/snippets/react/component-story-custom-args-complex.ts.mdx b/docs/snippets/react/component-story-custom-args-complex.ts.mdx index be64e1f14af5..2b21fdd2335f 100644 --- a/docs/snippets/react/component-story-custom-args-complex.ts.mdx +++ b/docs/snippets/react/component-story-custom-args-complex.ts.mdx @@ -3,7 +3,7 @@ import React from 'react'; -import { ComponentStory, ComponentMeta } from '@storybook/react'; +import type { ComponentStoryFn, ComponentMeta } from '@storybook/react'; import { YourComponent } from './your-component'; @@ -30,7 +30,7 @@ export default { }, } as ComponentMeta; -const Template: ComponentStory = ({ propertyA, propertyB, ...rest }) => { +const Template: ComponentStoryFn = ({ propertyA, propertyB, ...rest }) => { //πŸ‘‡ Assigns the result from the function to a variable const someFunctionResult = someFunction(propertyA, propertyB); diff --git a/docs/snippets/react/component-story-figma-integration.ts.mdx b/docs/snippets/react/component-story-figma-integration.ts.mdx index 1b54ea82e143..9d350e571fef 100644 --- a/docs/snippets/react/component-story-figma-integration.ts.mdx +++ b/docs/snippets/react/component-story-figma-integration.ts.mdx @@ -3,7 +3,7 @@ import React from 'react'; -import { ComponentStory, ComponentMeta } from '@storybook/react'; +import type { ComponentStoryFn, ComponentMeta } from '@storybook/react'; import { withDesign } from 'storybook-addon-designs'; @@ -17,7 +17,7 @@ export default { } as ComponentMeta; // More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args -const Template: ComponentStory = () => ; +const Template: ComponentStoryFn = () => ; export const Example = Template.bind({}); Example.parameters = { diff --git a/docs/snippets/react/component-story-static-asset-cdn.ts.mdx b/docs/snippets/react/component-story-static-asset-cdn.ts.mdx index 902c61d9baca..06d45318315a 100644 --- a/docs/snippets/react/component-story-static-asset-cdn.ts.mdx +++ b/docs/snippets/react/component-story-static-asset-cdn.ts.mdx @@ -3,7 +3,7 @@ import React from 'react'; -import { Meta } from '@storybook/react'; +import type { Meta } from '@storybook/react'; export default { /* πŸ‘‡ The title prop is optional. diff --git a/docs/snippets/react/component-story-static-asset-with-import.ts.mdx b/docs/snippets/react/component-story-static-asset-with-import.ts.mdx index 4d5665e7cf05..878bdb17c531 100644 --- a/docs/snippets/react/component-story-static-asset-with-import.ts.mdx +++ b/docs/snippets/react/component-story-static-asset-with-import.ts.mdx @@ -5,7 +5,7 @@ import React from 'react'; import imageFile from './static/image.png'; -import { Meta } from '@storybook/react'; +import type { Meta, StoryFn } from '@storybook/react'; export default { /* πŸ‘‡ The title prop is optional. @@ -20,5 +20,5 @@ const image = { alt: 'my image', }; -export const WithAnImage = () => {image.alt}; +export const WithAnImage: StoryFn = () => {image.alt}; ``` \ No newline at end of file diff --git a/docs/snippets/react/component-story-static-asset-without-import.ts.mdx b/docs/snippets/react/component-story-static-asset-without-import.ts.mdx index 4f47a7c9718d..3fcb02ec908e 100644 --- a/docs/snippets/react/component-story-static-asset-without-import.ts.mdx +++ b/docs/snippets/react/component-story-static-asset-without-import.ts.mdx @@ -5,7 +5,7 @@ import React from 'react'; import imageFile from './static/image.png'; -import { Meta } from '@storybook/react'; +import type { Meta, StoryFn } from '@storybook/react'; export default { /* πŸ‘‡ The title prop is optional. @@ -20,5 +20,5 @@ const image = { alt: 'my image', }; // Assume image.png is located in the "public" directory. -export const WithAnImage = () => my image; +export const WithAnImage: StoryFn = () => my image; ``` \ No newline at end of file diff --git a/docs/snippets/react/component-story-with-accessibility.ts.mdx b/docs/snippets/react/component-story-with-accessibility.ts.mdx index 84fd419b4457..3112d36e2c3c 100644 --- a/docs/snippets/react/component-story-with-accessibility.ts.mdx +++ b/docs/snippets/react/component-story-with-accessibility.ts.mdx @@ -3,7 +3,7 @@ import React from 'react'; -import { ComponentStory, ComponentMeta } from '@storybook/react'; +import type { ComponentStoryFn, ComponentMeta } from '@storybook/react'; import { Button } from './Button'; @@ -19,7 +19,7 @@ export default { } as ComponentMeta; -const Template: ComponentStory = (args) => `, props: { onClick: action('On click'), @@ -36,7 +36,7 @@ export const StoryTemplate: Story = () => ({ }); StoryTemplate.storyName = 'Story with template'; -export const ComponentOutputWithArgsTypes: Story = (args) => ({ +export const ComponentOutputWithArgsTypes: StoryFn = (args) => ({ props: { text: 'Button πŸ₯', ...args, diff --git a/examples/angular-cli/src/stories/addons/backgrounds/addon-background.stories.ts b/examples/angular-cli/src/stories/addons/backgrounds/addon-background.stories.ts index 22989c53aa2d..fcf5527877df 100644 --- a/examples/angular-cli/src/stories/addons/backgrounds/addon-background.stories.ts +++ b/examples/angular-cli/src/stories/addons/backgrounds/addon-background.stories.ts @@ -1,4 +1,4 @@ -import { Story, Meta } from '@storybook/angular'; +import type { Meta, StoryFn } from '@storybook/angular'; import { Button } from '../../angular-demo'; export default { @@ -15,11 +15,11 @@ export default { }, } as Meta; -export const WithComponent: Story = () => ({ +export const WithComponent: StoryFn = () => ({ props: { text: 'Button' }, }); -export const WithTemplate: Story = () => ({ +export const WithTemplate: StoryFn = () => ({ template: ``, props: { text: 'Button' }, }); diff --git a/examples/angular-cli/src/stories/addons/controls/addon-controls.stories.ts b/examples/angular-cli/src/stories/addons/controls/addon-controls.stories.ts index 4b26dfa5722b..843cc17bcbbe 100644 --- a/examples/angular-cli/src/stories/addons/controls/addon-controls.stories.ts +++ b/examples/angular-cli/src/stories/addons/controls/addon-controls.stories.ts @@ -1,4 +1,4 @@ -import { Story, Meta } from '@storybook/angular'; +import type { Meta, StoryFn } from '@storybook/angular'; import { DocButtonComponent, ISomeInterface } from '../docs/doc-button/doc-button.component'; export default { @@ -6,7 +6,7 @@ export default { component: DocButtonComponent, } as Meta; -const Template: Story = (args) => ({ +const Template: StoryFn = (args) => ({ props: args, }); diff --git a/examples/angular-cli/src/stories/addons/interactions/addon-interactions.stories.ts b/examples/angular-cli/src/stories/addons/interactions/addon-interactions.stories.ts index 15e6c8a92573..8df23091dc82 100644 --- a/examples/angular-cli/src/stories/addons/interactions/addon-interactions.stories.ts +++ b/examples/angular-cli/src/stories/addons/interactions/addon-interactions.stories.ts @@ -1,6 +1,6 @@ import { CommonModule } from '@angular/common'; import { FormsModule } from '@angular/forms'; -import { Story, Meta, moduleMetadata } from '@storybook/angular'; +import { StoryFn, Meta, moduleMetadata } from '@storybook/angular'; import { expect } from '@storybook/jest'; import { within, userEvent, waitFor } from '@storybook/testing-library'; @@ -16,13 +16,13 @@ export default { ], } as Meta; -const Template: Story = (args) => ({ +const Template: StoryFn = (args) => ({ props: args, }); -export const Standard: Story = Template.bind({}); +export const Standard: StoryFn = Template.bind({}); -export const Filled: Story = Template.bind({}); +export const Filled: StoryFn = Template.bind({}); Filled.play = async ({ canvasElement }) => { const canvas = within(canvasElement); const heroName = canvas.getByRole('textbox', { @@ -39,7 +39,7 @@ Filled.play = async ({ canvasElement }) => { await userEvent.selectOptions(heroPower, 'Weather Changer'); }; -export const InvalidFields: Story = Template.bind({}); +export const InvalidFields: StoryFn = Template.bind({}); InvalidFields.play = async (context) => { await Filled.play(context); @@ -59,7 +59,7 @@ InvalidFields.play = async (context) => { await userEvent.selectOptions(heroPower, ''); }; -export const Submitted: Story = Template.bind({}); +export const Submitted: StoryFn = Template.bind({}); Submitted.play = async (context) => { await Filled.play(context); @@ -78,7 +78,7 @@ Submitted.play = async (context) => { }); }; -export const SubmittedAndEditedAfter: Story = Template.bind({}); +export const SubmittedAndEditedAfter: StoryFn = Template.bind({}); SubmittedAndEditedAfter.play = async (context) => { await Submitted.play(context); diff --git a/examples/angular-cli/src/stories/addons/toolbars/locales/locales.stories.ts b/examples/angular-cli/src/stories/addons/toolbars/locales/locales.stories.ts index 4c3812d5ada2..310d318ec7e5 100644 --- a/examples/angular-cli/src/stories/addons/toolbars/locales/locales.stories.ts +++ b/examples/angular-cli/src/stories/addons/toolbars/locales/locales.stories.ts @@ -1,7 +1,6 @@ import type { DecoratorFunction } from '@storybook/addons'; import { moduleMetadata } from '@storybook/angular'; -import type { Meta } from '@storybook/angular'; -import type { Story } from '@storybook/angular/types-6-0'; +import type { Meta, StoryFn } from '@storybook/angular'; import { TranslatePipe } from './translate.pipe'; import { DEFAULT_LOCALE } from './translate.service'; @@ -36,7 +35,7 @@ export default { decorators: [withLocaleProvider, moduleMetadata({ declarations: [TranslatePipe] })], } as Meta; -export const WithAngularService: Story = (_args, { globals: { locale } }) => { +export const WithAngularService: StoryFn = (_args, { globals: { locale } }) => { return { template: ` Your locale is {{ locale }}
diff --git a/examples/angular-cli/src/stories/basics/angular-forms/customControlValueAccessor/custom-cva-component.stories.ts b/examples/angular-cli/src/stories/basics/angular-forms/customControlValueAccessor/custom-cva-component.stories.ts index d3532b3c443c..d438e2cc08a5 100644 --- a/examples/angular-cli/src/stories/basics/angular-forms/customControlValueAccessor/custom-cva-component.stories.ts +++ b/examples/angular-cli/src/stories/basics/angular-forms/customControlValueAccessor/custom-cva-component.stories.ts @@ -1,6 +1,6 @@ import { FormsModule } from '@angular/forms'; import { action } from '@storybook/addon-actions'; -import { moduleMetadata, Meta, Story } from '@storybook/angular'; +import { moduleMetadata, Meta, StoryFn } from '@storybook/angular'; import { CustomCvaComponent } from './custom-cva.component'; export default { @@ -18,7 +18,7 @@ export default { ], } as Meta; -export const SimpleInput: Story = () => ({ +export const SimpleInput: StoryFn = () => ({ props: { ngModel: 'Type anything', ngModelChange: action('ngModelChange'), diff --git a/examples/angular-cli/src/stories/basics/component-with-enums/enums.component.stories.ts b/examples/angular-cli/src/stories/basics/component-with-enums/enums.component.stories.ts index f0af610db335..0a5774b3a525 100644 --- a/examples/angular-cli/src/stories/basics/component-with-enums/enums.component.stories.ts +++ b/examples/angular-cli/src/stories/basics/component-with-enums/enums.component.stories.ts @@ -1,4 +1,4 @@ -import { Story, Meta } from '@storybook/angular'; +import type { Meta, StoryFn } from '@storybook/angular'; import { EnumsComponent, EnumNumeric, @@ -11,7 +11,7 @@ export default { component: EnumsComponent, } as Meta; -export const Basic: Story = (args) => ({ +export const Basic: StoryFn = (args) => ({ props: args, }); Basic.args = { diff --git a/examples/angular-cli/src/stories/basics/component-with-ng-content/ng-content-about-parent.stories.ts b/examples/angular-cli/src/stories/basics/component-with-ng-content/ng-content-about-parent.stories.ts index 14f8fd06a02c..6978b39c44dc 100644 --- a/examples/angular-cli/src/stories/basics/component-with-ng-content/ng-content-about-parent.stories.ts +++ b/examples/angular-cli/src/stories/basics/component-with-ng-content/ng-content-about-parent.stories.ts @@ -1,7 +1,7 @@ import { Component, Input } from '@angular/core'; import { componentWrapperDecorator, moduleMetadata } from '@storybook/angular'; -import { Story, Meta } from '@storybook/angular/types-6-0'; +import type { Meta, StoryFn } from '@storybook/angular'; @Component({ selector: 'sb-button', @@ -38,13 +38,13 @@ export default { // By default storybook uses the default export component if no template or component is defined in the story // So Storybook nests the component twice because it is first added by the componentWrapperDecorator. -export const AlwaysDefineTemplateOrComponent: Story = () => ({}); +export const AlwaysDefineTemplateOrComponent: StoryFn = () => ({}); -export const EmptyButton: Story = () => ({ +export const EmptyButton: StoryFn = () => ({ template: '', }); -export const WithDynamicContentAndArgs: Story = (args) => ({ +export const WithDynamicContentAndArgs: StoryFn = (args) => ({ template: `${args.content}`, }); WithDynamicContentAndArgs.argTypes = { @@ -52,7 +52,7 @@ WithDynamicContentAndArgs.argTypes = { }; WithDynamicContentAndArgs.args = { content: 'My button text' }; -export const InH1: Story = () => ({ +export const InH1: StoryFn = () => ({ template: 'My button in h1', }); InH1.decorators = [componentWrapperDecorator((story) => `

${story}

`)]; @@ -74,7 +74,7 @@ class SbEmojiComponent { emoji = 'πŸ‘Ύ'; } -export const WithComponent: Story = () => ({ +export const WithComponent: StoryFn = () => ({ // Override the default component // It is therefore necessary to manually declare the parent component with moduleMetadata component: SbEmojiComponent, @@ -85,7 +85,7 @@ WithComponent.decorators = [ }), ]; -export const WithComponentAndArgs: Story = (args) => { +export const WithComponentAndArgs: StoryFn = (args) => { return { props: args, component: SbEmojiComponent, diff --git a/examples/angular-cli/src/stories/basics/component-with-ng-content/ng-content-simple.stories.ts b/examples/angular-cli/src/stories/basics/component-with-ng-content/ng-content-simple.stories.ts index e0660cebc33c..ee684e74c191 100644 --- a/examples/angular-cli/src/stories/basics/component-with-ng-content/ng-content-simple.stories.ts +++ b/examples/angular-cli/src/stories/basics/component-with-ng-content/ng-content-simple.stories.ts @@ -1,6 +1,6 @@ import { Component } from '@angular/core'; -import { Story, Meta } from '@storybook/angular/types-6-0'; +import type { Meta, StoryFn } from '@storybook/angular/'; @Component({ selector: 'storybook-with-ng-content', @@ -14,13 +14,13 @@ export default { component: WithNgContentComponent, } as Meta; -export const OnlyComponent: Story = () => ({}); +export const OnlyComponent: StoryFn = () => ({}); -export const Default: Story = () => ({ +export const Default: StoryFn = () => ({ template: `

This is rendered in ng-content

`, }); -export const WithDynamicContentAndArgs: Story = (args) => ({ +export const WithDynamicContentAndArgs: StoryFn = (args) => ({ template: `

${args.content}

`, }); WithDynamicContentAndArgs.argTypes = { diff --git a/examples/angular-cli/src/stories/basics/component-with-ng-on-destroy/component-with-on-destroy.stories.ts b/examples/angular-cli/src/stories/basics/component-with-ng-on-destroy/component-with-on-destroy.stories.ts index d883d872b973..6e12aae1c444 100644 --- a/examples/angular-cli/src/stories/basics/component-with-ng-on-destroy/component-with-on-destroy.stories.ts +++ b/examples/angular-cli/src/stories/basics/component-with-ng-on-destroy/component-with-on-destroy.stories.ts @@ -1,5 +1,5 @@ import { Component, OnDestroy, OnInit } from '@angular/core'; -import { Story, Meta } from '@storybook/angular'; +import type { Meta, StoryFn } from '@storybook/angular'; @Component({ selector: 'on-destroy', @@ -37,6 +37,6 @@ export default { }, } as Meta; -export const SimpleComponent: Story = () => ({ +export const SimpleComponent: StoryFn = () => ({ component: OnDestroyComponent, }); diff --git a/examples/angular-cli/src/stories/basics/component-with-on-push/on-push.stories.ts b/examples/angular-cli/src/stories/basics/component-with-on-push/on-push.stories.ts index e88ab5c97c2c..b39e3adb75c0 100644 --- a/examples/angular-cli/src/stories/basics/component-with-on-push/on-push.stories.ts +++ b/examples/angular-cli/src/stories/basics/component-with-on-push/on-push.stories.ts @@ -1,4 +1,4 @@ -import { Meta, Story } from '@storybook/angular'; +import { Meta, StoryFn } from '@storybook/angular'; import { OnPushBoxComponent } from './on-push-box.component'; export default { @@ -14,7 +14,7 @@ export default { }, } as Meta; -export const ClassSpecifiedComponentWithOnPushAndArgs: Story = (args) => ({ +export const ClassSpecifiedComponentWithOnPushAndArgs: StoryFn = (args) => ({ props: args, }); ClassSpecifiedComponentWithOnPushAndArgs.storyName = diff --git a/examples/angular-cli/src/stories/basics/component-with-pipe/custom-pipes.stories.ts b/examples/angular-cli/src/stories/basics/component-with-pipe/custom-pipes.stories.ts index f8c4343737d8..95602e0d7800 100644 --- a/examples/angular-cli/src/stories/basics/component-with-pipe/custom-pipes.stories.ts +++ b/examples/angular-cli/src/stories/basics/component-with-pipe/custom-pipes.stories.ts @@ -1,4 +1,4 @@ -import { Meta, moduleMetadata, Story } from '@storybook/angular'; +import { Meta, moduleMetadata, StoryFn } from '@storybook/angular'; import { CustomPipePipe } from './custom.pipe'; import { WithPipeComponent } from './with-pipe.component'; @@ -13,13 +13,13 @@ export default { ], } as Meta; -export const Simple: Story = () => ({ +export const Simple: StoryFn = () => ({ props: { field: 'foobar', }, }); -export const WithArgsStory: Story = (args) => ({ +export const WithArgsStory: StoryFn = (args) => ({ props: args, }); WithArgsStory.storyName = 'With args'; diff --git a/examples/angular-cli/src/stories/basics/component-without-selector/without-selector-ng-component-outlet.stories.ts b/examples/angular-cli/src/stories/basics/component-without-selector/without-selector-ng-component-outlet.stories.ts index c6ed164e5b16..b082edf4f23c 100644 --- a/examples/angular-cli/src/stories/basics/component-without-selector/without-selector-ng-component-outlet.stories.ts +++ b/examples/angular-cli/src/stories/basics/component-without-selector/without-selector-ng-component-outlet.stories.ts @@ -1,5 +1,5 @@ import { Component, Injector, Input, OnInit, Type } from '@angular/core'; -import { componentWrapperDecorator, moduleMetadata, Story, Meta } from '@storybook/angular'; +import { componentWrapperDecorator, moduleMetadata, StoryFn, Meta } from '@storybook/angular'; import { WithoutSelectorComponent, WITHOUT_SELECTOR_DATA } from './without-selector.component'; export default { @@ -52,7 +52,7 @@ class NgComponentOutletWrapperComponent implements OnInit { // Live changing of args by controls does not work at the moment. When changing args storybook does not fully // reload and therefore does not take into account the change of provider. -export const WithCustomNgComponentOutletWrapper: Story = (args) => ({ +export const WithCustomNgComponentOutletWrapper: StoryFn = (args) => ({ props: args, }); WithCustomNgComponentOutletWrapper.storyName = 'Custom wrapper *NgComponentOutlet'; diff --git a/examples/angular-cli/src/stories/basics/component-without-selector/without-selector-ng-factory-resolver.stories.ts b/examples/angular-cli/src/stories/basics/component-without-selector/without-selector-ng-factory-resolver.stories.ts index e583d2735651..bea49c9a82d1 100644 --- a/examples/angular-cli/src/stories/basics/component-without-selector/without-selector-ng-factory-resolver.stories.ts +++ b/examples/angular-cli/src/stories/basics/component-without-selector/without-selector-ng-factory-resolver.stories.ts @@ -7,7 +7,7 @@ import { ViewChild, ViewContainerRef, } from '@angular/core'; -import { componentWrapperDecorator, moduleMetadata, Story, Meta } from '@storybook/angular'; +import { componentWrapperDecorator, moduleMetadata, StoryFn, Meta } from '@storybook/angular'; import { WithoutSelectorComponent } from './without-selector.component'; @@ -52,7 +52,7 @@ class ComponentFactoryWrapperComponent implements AfterViewInit { // Live changing of args by controls does not work at the moment. When changing args storybook does not fully // reload and therefore does not take into account the change of provider. -export const WithComponentFactoryResolver: Story = (args) => ({ +export const WithComponentFactoryResolver: StoryFn = (args) => ({ props: args, }); WithComponentFactoryResolver.storyName = 'Custom wrapper ComponentFactoryResolver'; diff --git a/examples/angular-cli/src/stories/basics/component-without-selector/without-selector.stories.ts b/examples/angular-cli/src/stories/basics/component-without-selector/without-selector.stories.ts index 148920200322..d0660093f45d 100644 --- a/examples/angular-cli/src/stories/basics/component-without-selector/without-selector.stories.ts +++ b/examples/angular-cli/src/stories/basics/component-without-selector/without-selector.stories.ts @@ -1,4 +1,4 @@ -import { moduleMetadata, Story, Meta } from '@storybook/angular'; +import { moduleMetadata, StoryFn, Meta } from '@storybook/angular'; import { WithoutSelectorComponent, WITHOUT_SELECTOR_DATA } from './without-selector.component'; export default { @@ -11,11 +11,11 @@ export default { ], } as Meta; -export const SimpleComponent: Story = () => ({}); +export const SimpleComponent: StoryFn = () => ({}); // Live changing of args by controls does not work for now. When changing args storybook does not fully // reload and therefore does not take into account the change of provider. -export const WithInjectionTokenAndArgs: Story = (args) => ({ +export const WithInjectionTokenAndArgs: StoryFn = (args) => ({ props: args, moduleMetadata: { providers: [ diff --git a/examples/angular-cli/src/stories/basics/ng-module/import-module-for-root.stories.ts b/examples/angular-cli/src/stories/basics/ng-module/import-module-for-root.stories.ts index de90f39bc485..835d295059d3 100644 --- a/examples/angular-cli/src/stories/basics/ng-module/import-module-for-root.stories.ts +++ b/examples/angular-cli/src/stories/basics/ng-module/import-module-for-root.stories.ts @@ -1,4 +1,4 @@ -import { moduleMetadata, Story, Meta } from '@storybook/angular'; +import { moduleMetadata, StoryFn, Meta } from '@storybook/angular'; import { ChipsModule } from './angular-src/chips.module'; import { ChipsGroupComponent } from './angular-src/chips-group.component'; import { CHIP_COLOR } from './angular-src/chip-color.token'; @@ -29,7 +29,7 @@ export default { }, } as Meta; -const Template = (): Story => (args) => ({ +const Template = (): StoryFn => (args) => ({ props: args, }); diff --git a/examples/angular-cli/src/stories/basics/ng-module/import-module.stories.ts b/examples/angular-cli/src/stories/basics/ng-module/import-module.stories.ts index eaadf5c0499c..3de0e32eb5b2 100644 --- a/examples/angular-cli/src/stories/basics/ng-module/import-module.stories.ts +++ b/examples/angular-cli/src/stories/basics/ng-module/import-module.stories.ts @@ -1,4 +1,4 @@ -import { moduleMetadata, Story, Meta } from '@storybook/angular'; +import { moduleMetadata, StoryFn, Meta } from '@storybook/angular'; import { ChipsModule } from './angular-src/chips.module'; import { ChipsGroupComponent } from './angular-src/chips-group.component'; import { ChipComponent } from './angular-src/chip.component'; @@ -12,7 +12,7 @@ export default { ], } as Meta; -export const ChipsGroup: Story = (args) => ({ +export const ChipsGroup: StoryFn = (args) => ({ component: ChipsGroupComponent, props: args, }); @@ -33,7 +33,7 @@ ChipsGroup.argTypes = { removeAllChipsClick: { action: 'Remove all chips clicked' }, }; -export const Chip: Story = (args) => ({ +export const Chip: StoryFn = (args) => ({ component: ChipComponent, props: args, }); diff --git a/examples/angular-cli/src/stories/core/moduleMetadata/in-export-default.stories.ts b/examples/angular-cli/src/stories/core/moduleMetadata/in-export-default.stories.ts index aa6e01e8a900..ad05fd12f07a 100644 --- a/examples/angular-cli/src/stories/core/moduleMetadata/in-export-default.stories.ts +++ b/examples/angular-cli/src/stories/core/moduleMetadata/in-export-default.stories.ts @@ -1,4 +1,4 @@ -import { moduleMetadata, Story, Meta } from '@storybook/angular'; +import { moduleMetadata, StoryFn, Meta } from '@storybook/angular'; import { TokenComponent, ITEMS, DEFAULT_NAME } from './angular-src/token.component'; export default { @@ -21,7 +21,7 @@ export default { ], } as Meta; -export const Story1: Story = () => ({ +export const Story1: StoryFn = () => ({ template: ``, props: { name: 'Prop Name', @@ -30,7 +30,7 @@ export const Story1: Story = () => ({ Story1.storyName = 'Story 1'; -export const Story2: Story = () => ({ +export const Story2: StoryFn = () => ({ template: ``, }); diff --git a/examples/angular-cli/src/stories/core/moduleMetadata/in-stories.stories.ts b/examples/angular-cli/src/stories/core/moduleMetadata/in-stories.stories.ts index bfd46f2bd9a9..22bb6a8c4ba4 100644 --- a/examples/angular-cli/src/stories/core/moduleMetadata/in-stories.stories.ts +++ b/examples/angular-cli/src/stories/core/moduleMetadata/in-stories.stories.ts @@ -1,11 +1,11 @@ -import { Meta, Story } from '@storybook/angular'; +import type { Meta, StoryFn } from '@storybook/angular'; import { TokenComponent, ITEMS, DEFAULT_NAME } from './angular-src/token.component'; export default { title: 'Core / ModuleMetadata / In stories', } as Meta; -export const Individual1: Story = () => ({ +export const Individual1: StoryFn = () => ({ template: ``, props: { name: 'Prop Name', @@ -24,7 +24,7 @@ export const Individual1: Story = () => ({ Individual1.storyName = 'Individual 1'; -export const Individual2: Story = () => ({ +export const Individual2: StoryFn = () => ({ template: ``, moduleMetadata: { imports: [], diff --git a/examples/angular-cli/src/stories/core/moduleMetadata/merge-default-and-story.stories.ts b/examples/angular-cli/src/stories/core/moduleMetadata/merge-default-and-story.stories.ts index b14ca16572cc..81fe10181801 100644 --- a/examples/angular-cli/src/stories/core/moduleMetadata/merge-default-and-story.stories.ts +++ b/examples/angular-cli/src/stories/core/moduleMetadata/merge-default-and-story.stories.ts @@ -1,4 +1,4 @@ -import { moduleMetadata, Meta, Story } from '@storybook/angular'; +import { moduleMetadata, Meta, StoryFn } from '@storybook/angular'; import { TokenComponent, ITEMS, DEFAULT_NAME } from './angular-src/token.component'; import { CustomPipePipe } from './angular-src/custom.pipe'; @@ -21,7 +21,7 @@ export default { ], } as Meta; -export const MergeWithDefaultModuleMetadata: Story = () => ({ +export const MergeWithDefaultModuleMetadata: StoryFn = () => ({ template: ``, props: { name: 'Prop Name', diff --git a/examples/angular-cli/src/stories/core/parameters/all-parameters.stories.ts b/examples/angular-cli/src/stories/core/parameters/all-parameters.stories.ts index 844af329ca9a..40f34ceafcd0 100644 --- a/examples/angular-cli/src/stories/core/parameters/all-parameters.stories.ts +++ b/examples/angular-cli/src/stories/core/parameters/all-parameters.stories.ts @@ -1,5 +1,5 @@ import { addParameters } from '@storybook/angular'; -import { Story, Meta } from '@storybook/angular/types-6-0'; +import type { Meta, StoryFn } from '@storybook/angular'; import { Button } from '../../angular-demo'; const globalParameter = 'globalParameter'; @@ -15,7 +15,7 @@ export default { }, } as Meta; -export const PassedToStory: Story = (_args, { parameters: { fileName, ...parameters } }) => ({ +export const PassedToStory: StoryFn = (_args, { parameters: { fileName, ...parameters } }) => ({ component: Button, props: { text: `Parameters are ${JSON.stringify(parameters, null, 2)}`, diff --git a/examples/angular-cli/src/stories/core/parameters/bootstrap-options.stories.ts b/examples/angular-cli/src/stories/core/parameters/bootstrap-options.stories.ts index b8327d995f42..dfe3115f9951 100644 --- a/examples/angular-cli/src/stories/core/parameters/bootstrap-options.stories.ts +++ b/examples/angular-cli/src/stories/core/parameters/bootstrap-options.stories.ts @@ -1,4 +1,4 @@ -import { Meta, Story } from '@storybook/angular/types-6-0'; +import type { Meta, StoryFn } from '@storybook/angular'; import { Component } from '@angular/core'; @Component({ @@ -19,4 +19,4 @@ export default { component: ComponentWithWhitespace, } as Meta; -export const WithPreserveWhitespaces: Story = (_args) => ({}); +export const WithPreserveWhitespaces: StoryFn = (_args) => ({}); diff --git a/examples/angular-cli/src/stories/core/parameters/layout.parameters.stories.ts b/examples/angular-cli/src/stories/core/parameters/layout.parameters.stories.ts index 0aba95b03f35..4bdc282a8167 100644 --- a/examples/angular-cli/src/stories/core/parameters/layout.parameters.stories.ts +++ b/examples/angular-cli/src/stories/core/parameters/layout.parameters.stories.ts @@ -1,4 +1,4 @@ -import { Story, Meta } from '@storybook/angular'; +import type { Meta, StoryFn } from '@storybook/angular'; import { Button } from '../../angular-demo'; export default { @@ -6,26 +6,26 @@ export default { component: Button, } as Meta; -export const Default: Story = () => ({ +export const Default: StoryFn = () => ({ props: { text: 'Button' }, }); -export const Fullscreen: Story = () => ({ +export const Fullscreen: StoryFn = () => ({ template: `
`, }); Fullscreen.parameters = { layout: 'fullscreen' }; -export const Centered: Story = () => ({ +export const Centered: StoryFn = () => ({ props: { text: 'Button' }, }); Centered.parameters = { layout: 'centered' }; -export const Padded: Story = () => ({ +export const Padded: StoryFn = () => ({ props: { text: 'Button' }, }); Padded.parameters = { layout: 'padded' }; -export const None: Story = () => ({ +export const None: StoryFn = () => ({ props: { text: 'Button' }, }); None.parameters = { layout: 'none' }; diff --git a/examples/angular-cli/src/stories/core/styles/story-styles.stories.ts b/examples/angular-cli/src/stories/core/styles/story-styles.stories.ts index e87bafcd1712..2d3d7f08737e 100644 --- a/examples/angular-cli/src/stories/core/styles/story-styles.stories.ts +++ b/examples/angular-cli/src/stories/core/styles/story-styles.stories.ts @@ -1,4 +1,4 @@ -import { Meta, moduleMetadata, Story } from '@storybook/angular'; +import { Meta, moduleMetadata, StoryFn } from '@storybook/angular'; import { action } from '@storybook/addon-actions'; import { Button } from '../../angular-demo'; @@ -11,7 +11,7 @@ export default { ], } as Meta; -export const TemplateStory: Story = () => ({ +export const TemplateStory: StoryFn = () => ({ template: ``, props: { text: 'Button with custom styles', @@ -28,7 +28,7 @@ export const TemplateStory: Story = () => ({ }); TemplateStory.storyName = 'With story template'; -export const WithArgsStory: Story = (args) => ({ +export const WithArgsStory: StoryFn = (args) => ({ template: ``, props: args, styles: [ diff --git a/examples/angular-cli/src/stories/from-cli/Button.stories.ts b/examples/angular-cli/src/stories/from-cli/Button.stories.ts index 948fd68f493d..1a4d6894f9a7 100644 --- a/examples/angular-cli/src/stories/from-cli/Button.stories.ts +++ b/examples/angular-cli/src/stories/from-cli/Button.stories.ts @@ -1,5 +1,4 @@ -// also exported from '@storybook/angular' if you can deal with breaking changes in 6.1 -import { Story, Meta } from '@storybook/angular/types-6-0'; +import type { Meta, StoryFn } from '@storybook/angular'; import Button from './button.component'; // More on default export: https://storybook.js.org/docs/angular/writing-stories/introduction#default-export @@ -13,7 +12,7 @@ export default { } as Meta; // More on component templates: https://storybook.js.org/docs/angular/writing-stories/introduction#using-args -const Template: Story', props: Object.keys(argTypes), diff --git a/examples/vue-kitchen-sink/.storybook/main.js b/examples/vue-kitchen-sink/.storybook/main.ts similarity index 82% rename from examples/vue-kitchen-sink/.storybook/main.js rename to examples/vue-kitchen-sink/.storybook/main.ts index 8db72845c548..556fbafb4515 100644 --- a/examples/vue-kitchen-sink/.storybook/main.js +++ b/examples/vue-kitchen-sink/.storybook/main.ts @@ -1,4 +1,6 @@ -module.exports = { +import type { StorybookConfig } from '@storybook/vue-webpack5'; + +const mainConfig: StorybookConfig = { stories: ['../src/stories/**/*.stories.@(ts|tsx|js|jsx|mdx)'], logLevel: 'debug', addons: [ @@ -18,8 +20,7 @@ module.exports = { disableTelemetry: true, }, staticDirs: ['../public'], - features: { - channelOptions: { allowFunction: false, maxDepth: 10 }, - }, framework: '@storybook/vue-webpack5', }; + +module.exports = mainConfig; diff --git a/examples/web-components-kitchen-sink/src/stories/addons/a11y/addon-a11y.stories.ts b/examples/web-components-kitchen-sink/src/stories/addons/a11y/addon-a11y.stories.ts index 28c3206317e7..6490e0f36ca9 100644 --- a/examples/web-components-kitchen-sink/src/stories/addons/a11y/addon-a11y.stories.ts +++ b/examples/web-components-kitchen-sink/src/stories/addons/a11y/addon-a11y.stories.ts @@ -1,5 +1,5 @@ import { html } from 'lit'; -import type { Story, Meta } from '@storybook/web-components'; +import type { Meta, StoryFn } from '@storybook/web-components'; const text = 'Testing the a11y addon'; @@ -10,14 +10,14 @@ export default { }, } as Meta; -export const Default: Story = () => html``; -export const Label: Story = () => html``; -export const Disabled: Story = () => html``; -export const InvalidContrast: Story = () => html` +export const Default: StoryFn = () => html``; +export const Label: StoryFn = () => html``; +export const Disabled: StoryFn = () => html``; +export const InvalidContrast: StoryFn = () => html` `; -export const DelayedRender: Story = () => { +export const DelayedRender: StoryFn = () => { const div = document.createElement('div'); setTimeout(() => { div.innerHTML = ``; diff --git a/examples/web-components-kitchen-sink/src/stories/addons/actions/addon-actions.stories.ts b/examples/web-components-kitchen-sink/src/stories/addons/actions/addon-actions.stories.ts index 631996fca308..c8824ed641b5 100644 --- a/examples/web-components-kitchen-sink/src/stories/addons/actions/addon-actions.stories.ts +++ b/examples/web-components-kitchen-sink/src/stories/addons/actions/addon-actions.stories.ts @@ -1,11 +1,11 @@ import { html } from 'lit'; -import type { Story, Meta } from '@storybook/web-components'; +import type { Meta, StoryFn } from '@storybook/web-components'; export default { title: 'Addons / Actions', } as Meta; -const Template: Story = () => html``; +const Template: StoryFn = () => html``; export const Story1 = Template.bind({}); Story1.storyName = 'Simple `click` handler'; diff --git a/examples/web-components-kitchen-sink/src/stories/addons/background/addon-background.stories.ts b/examples/web-components-kitchen-sink/src/stories/addons/background/addon-background.stories.ts index b0c62c6af02b..b799994ee2ad 100644 --- a/examples/web-components-kitchen-sink/src/stories/addons/background/addon-background.stories.ts +++ b/examples/web-components-kitchen-sink/src/stories/addons/background/addon-background.stories.ts @@ -1,5 +1,5 @@ import { html } from 'lit'; -import type { Story, Meta } from '@storybook/web-components'; +import type { Meta, StoryFn } from '@storybook/web-components'; export default { title: 'Addons / Backgrounds', @@ -14,7 +14,7 @@ export default { }, } as Meta; -const Template: Story = () => html``; +const Template: StoryFn = () => html``; export const Default = Template.bind({}); diff --git a/examples/web-components-kitchen-sink/src/stories/addons/controls/addon-controls.stories.ts b/examples/web-components-kitchen-sink/src/stories/addons/controls/addon-controls.stories.ts index 32246ac26cd4..e7f3009ecb09 100644 --- a/examples/web-components-kitchen-sink/src/stories/addons/controls/addon-controls.stories.ts +++ b/examples/web-components-kitchen-sink/src/stories/addons/controls/addon-controls.stories.ts @@ -1,5 +1,5 @@ import { html } from 'lit'; -import type { Story, Meta } from '@storybook/web-components'; +import type { Meta, StoryFn } from '@storybook/web-components'; import '../../../components/sb-button'; export default { @@ -15,7 +15,7 @@ export default { }, } as Meta; -const Template: Story = ({ primary, backgroundColor, size, label, sbButtonClickHandler }) => +const Template: StoryFn = ({ primary, backgroundColor, size, label, sbButtonClickHandler }) => html` html`
Click docs tab to see basic docs
`; +export const Basic: StoryFn = () => html`
Click docs tab to see basic docs
`; -export const NoDocs: Story = () => html`
Click docs tab to see no docs error
`; +export const NoDocs: StoryFn = () => html`
Click docs tab to see no docs error
`; NoDocs.parameters = { docs: { page: null } }; -export const LargerThanPreview: Story = () => +export const LargerThanPreview: StoryFn = () => html`
HUGE
`; -export const MdxOverride: Story = () => html`
Click docs tab to see MDX-overridden docs
`; +export const MdxOverride: StoryFn = () => + html`
Click docs tab to see MDX-overridden docs
`; MdxOverride.parameters = { docs: { page: mdxNotes }, }; -export const InlineOverride: Story = () => +export const InlineOverride: StoryFn = () => html`
Click docs tab to see JSX-overridden docs
`; InlineOverride.parameters = { docs: { page: () => html`
Hello docs
` }, }; -export const DocsDisable: Story = () => html`
This story shouldn't show up in DocsPage
`; +export const DocsDisable: StoryFn = () => html`
This story shouldn't show up in DocsPage
`; DocsDisable.parameters = { docs: { disable: true }, }; diff --git a/examples/web-components-kitchen-sink/src/stories/addons/interactions/addon-interactions.stories.ts b/examples/web-components-kitchen-sink/src/stories/addons/interactions/addon-interactions.stories.ts index befe8301cdda..74bdf58d4b44 100644 --- a/examples/web-components-kitchen-sink/src/stories/addons/interactions/addon-interactions.stories.ts +++ b/examples/web-components-kitchen-sink/src/stories/addons/interactions/addon-interactions.stories.ts @@ -1,5 +1,5 @@ import { html } from 'lit'; -import { Meta, Story } from '@storybook/web-components'; +import type { Meta, StoryFn } from '@storybook/web-components'; import { expect } from '@storybook/jest'; import { within, userEvent } from '@storybook/testing-library'; @@ -11,7 +11,7 @@ export default { component: 'sb-counter', } as Meta; -const Template: Story = () => html``; +const Template: StoryFn = () => html``; export const Default = Template.bind({}); diff --git a/examples/web-components-kitchen-sink/src/stories/addons/toolbars/addon-toolbars.stories.ts b/examples/web-components-kitchen-sink/src/stories/addons/toolbars/addon-toolbars.stories.ts index 1611d33b9cfd..dd8b6deb5d37 100644 --- a/examples/web-components-kitchen-sink/src/stories/addons/toolbars/addon-toolbars.stories.ts +++ b/examples/web-components-kitchen-sink/src/stories/addons/toolbars/addon-toolbars.stories.ts @@ -1,5 +1,5 @@ import { html } from 'lit'; -import { Story, Meta } from '@storybook/web-components'; +import type { Meta, StoryFn } from '@storybook/web-components'; export default { title: 'Addons / Toolbars', @@ -21,6 +21,6 @@ const getCaptionForLocale = (locale: string) => { } }; -export const Locale: Story = (args, { globals: { locale } }) => { +export const Locale: StoryFn = (args, { globals: { locale } }) => { return html`
Your locale is '${locale}', so I say: ${getCaptionForLocale(locale)}
`; }; diff --git a/examples/web-components-kitchen-sink/src/stories/addons/viewport/addon-viewport.stories.ts b/examples/web-components-kitchen-sink/src/stories/addons/viewport/addon-viewport.stories.ts index 0cb8f2969a90..6cd00ede64a3 100644 --- a/examples/web-components-kitchen-sink/src/stories/addons/viewport/addon-viewport.stories.ts +++ b/examples/web-components-kitchen-sink/src/stories/addons/viewport/addon-viewport.stories.ts @@ -1,5 +1,5 @@ import { html } from 'lit'; -import { Story, Meta } from '@storybook/web-components'; +import type { Meta, StoryFn } from '@storybook/web-components'; import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport'; export default { @@ -11,7 +11,7 @@ export default { }, } as Meta; -const Template: Story<{ title: string }> = (args) => html`

${args.title}

`; +const Template: StoryFn<{ title: string }> = (args) => html`

${args.title}

`; export const Default = Template.bind({}); Default.args = { diff --git a/examples/web-components-kitchen-sink/src/stories/issues/11831-unknown-component.stories.ts b/examples/web-components-kitchen-sink/src/stories/issues/11831-unknown-component.stories.ts index 8fe7b52a9ca3..21d44a53fd78 100644 --- a/examples/web-components-kitchen-sink/src/stories/issues/11831-unknown-component.stories.ts +++ b/examples/web-components-kitchen-sink/src/stories/issues/11831-unknown-component.stories.ts @@ -1,12 +1,12 @@ import { html } from 'lit'; -import { Story, Meta } from '@storybook/web-components'; +import type { Meta, StoryFn } from '@storybook/web-components'; export default { title: 'Issues / 11831 Unknown component', component: 'unknown-component', } as Meta; -const Template: Story = ({ backSide, header, rows }) => +const Template: StoryFn = ({ backSide, header, rows }) => html` A simple card ({ component: AppComponent });\` or \`\`\` - export const Primary: Story = () => ({}); + export const Primary: StoryFn = () => ({}); Primary.parameters = { component: AppComponent }; \`\`\` Read more at diff --git a/frameworks/angular/src/client/preview/angular-beta/StorybookProvider.ts b/frameworks/angular/src/client/angular-beta/StorybookProvider.ts similarity index 100% rename from frameworks/angular/src/client/preview/angular-beta/StorybookProvider.ts rename to frameworks/angular/src/client/angular-beta/StorybookProvider.ts diff --git a/frameworks/angular/src/client/preview/angular-beta/StorybookWrapperComponent.ts b/frameworks/angular/src/client/angular-beta/StorybookWrapperComponent.ts similarity index 100% rename from frameworks/angular/src/client/preview/angular-beta/StorybookWrapperComponent.ts rename to frameworks/angular/src/client/angular-beta/StorybookWrapperComponent.ts diff --git a/frameworks/angular/src/client/preview/angular-beta/__testfixtures__/input.component.ts b/frameworks/angular/src/client/angular-beta/__testfixtures__/input.component.ts similarity index 100% rename from frameworks/angular/src/client/preview/angular-beta/__testfixtures__/input.component.ts rename to frameworks/angular/src/client/angular-beta/__testfixtures__/input.component.ts diff --git a/frameworks/angular/src/client/preview/angular-beta/utils/NgComponentAnalyzer.test.ts b/frameworks/angular/src/client/angular-beta/utils/NgComponentAnalyzer.test.ts similarity index 100% rename from frameworks/angular/src/client/preview/angular-beta/utils/NgComponentAnalyzer.test.ts rename to frameworks/angular/src/client/angular-beta/utils/NgComponentAnalyzer.test.ts diff --git a/frameworks/angular/src/client/preview/angular-beta/utils/NgComponentAnalyzer.ts b/frameworks/angular/src/client/angular-beta/utils/NgComponentAnalyzer.ts similarity index 100% rename from frameworks/angular/src/client/preview/angular-beta/utils/NgComponentAnalyzer.ts rename to frameworks/angular/src/client/angular-beta/utils/NgComponentAnalyzer.ts diff --git a/frameworks/angular/src/client/preview/angular-beta/utils/NgModulesAnalyzer.test.ts b/frameworks/angular/src/client/angular-beta/utils/NgModulesAnalyzer.test.ts similarity index 100% rename from frameworks/angular/src/client/preview/angular-beta/utils/NgModulesAnalyzer.test.ts rename to frameworks/angular/src/client/angular-beta/utils/NgModulesAnalyzer.test.ts diff --git a/frameworks/angular/src/client/preview/angular-beta/utils/NgModulesAnalyzer.ts b/frameworks/angular/src/client/angular-beta/utils/NgModulesAnalyzer.ts similarity index 100% rename from frameworks/angular/src/client/preview/angular-beta/utils/NgModulesAnalyzer.ts rename to frameworks/angular/src/client/angular-beta/utils/NgModulesAnalyzer.ts diff --git a/frameworks/angular/src/client/preview/angular/components/app.component.ts b/frameworks/angular/src/client/angular/app.component.ts similarity index 97% rename from frameworks/angular/src/client/preview/angular/components/app.component.ts rename to frameworks/angular/src/client/angular/app.component.ts index f4e6c0f60d66..11ed45f4a8cd 100644 --- a/frameworks/angular/src/client/preview/angular/components/app.component.ts +++ b/frameworks/angular/src/client/angular/app.component.ts @@ -18,8 +18,8 @@ import { } from '@angular/core'; import { Observable, Subscription } from 'rxjs'; import { first } from 'rxjs/operators'; -import { STORY } from '../app.token'; -import { StoryFnAngularReturnType, ICollection } from '../../types'; +import { STORY } from './app.token'; +import { StoryFnAngularReturnType, ICollection } from '../types'; @Component({ selector: 'storybook-dynamic-app-root', diff --git a/frameworks/angular/src/client/preview/angular/app.token.ts b/frameworks/angular/src/client/angular/app.token.ts similarity index 100% rename from frameworks/angular/src/client/preview/angular/app.token.ts rename to frameworks/angular/src/client/angular/app.token.ts diff --git a/frameworks/angular/src/client/preview/angular/helpers.ts b/frameworks/angular/src/client/angular/helpers.ts similarity index 96% rename from frameworks/angular/src/client/preview/angular/helpers.ts rename to frameworks/angular/src/client/angular/helpers.ts index 20a55edcbf92..21ca577b7fc8 100644 --- a/frameworks/angular/src/client/preview/angular/helpers.ts +++ b/frameworks/angular/src/client/angular/helpers.ts @@ -6,10 +6,9 @@ import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { BrowserModule } from '@angular/platform-browser'; import { Observable, ReplaySubject, Subscriber } from 'rxjs'; import type { PartialStoryFn } from '@storybook/csf'; -import { AppComponent } from './components/app.component'; +import { AppComponent } from './app.component'; import { STORY } from './app.token'; -import type { NgModuleMetadata, StoryFnAngularReturnType } from '../types'; -import type { AngularFramework } from '../types-6-0'; +import type { NgModuleMetadata, StoryFnAngularReturnType, AngularFramework } from '../types'; const { document } = global; diff --git a/frameworks/angular/src/client/preview/config.ts b/frameworks/angular/src/client/config.ts similarity index 66% rename from frameworks/angular/src/client/preview/config.ts rename to frameworks/angular/src/client/config.ts index 4f80f0321317..109dd3b09104 100644 --- a/frameworks/angular/src/client/preview/config.ts +++ b/frameworks/angular/src/client/config.ts @@ -3,4 +3,4 @@ import './globals'; export { render, renderToDOM } from './render'; export { decorateStory } from './decorateStory'; -export const parameters = { framework: 'angular' }; +export const parameters = { framework: 'angular' as const }; diff --git a/frameworks/angular/src/client/preview/decorateStory.test.ts b/frameworks/angular/src/client/decorateStory.test.ts similarity index 100% rename from frameworks/angular/src/client/preview/decorateStory.test.ts rename to frameworks/angular/src/client/decorateStory.test.ts diff --git a/frameworks/angular/src/client/preview/decorateStory.ts b/frameworks/angular/src/client/decorateStory.ts similarity index 97% rename from frameworks/angular/src/client/preview/decorateStory.ts rename to frameworks/angular/src/client/decorateStory.ts index 410ffec07f24..21f38704b647 100644 --- a/frameworks/angular/src/client/preview/decorateStory.ts +++ b/frameworks/angular/src/client/decorateStory.ts @@ -2,7 +2,7 @@ import type { DecoratorFunction, LegacyStoryFn, StoryContext } from '@storybook/ import { sanitizeStoryContextUpdate } from '@storybook/store'; import { computesTemplateFromComponent } from './angular-beta/ComputesTemplateFromComponent'; -import type { AngularFramework } from './types-6-0'; +import type { AngularFramework } from './types'; export default function decorateStory( mainStoryFn: LegacyStoryFn, diff --git a/frameworks/angular/src/client/preview/decorators.test.ts b/frameworks/angular/src/client/decorators.test.ts similarity index 100% rename from frameworks/angular/src/client/preview/decorators.test.ts rename to frameworks/angular/src/client/decorators.test.ts diff --git a/frameworks/angular/src/client/preview/decorators.ts b/frameworks/angular/src/client/decorators.ts similarity index 94% rename from frameworks/angular/src/client/preview/decorators.ts rename to frameworks/angular/src/client/decorators.ts index d5eeffe6c57e..edbf5bc8a757 100644 --- a/frameworks/angular/src/client/preview/decorators.ts +++ b/frameworks/angular/src/client/decorators.ts @@ -3,8 +3,7 @@ import type { Type } from '@angular/core'; import type { DecoratorFunction, StoryContext } from '@storybook/csf'; import { computesTemplateFromComponent } from './angular-beta/ComputesTemplateFromComponent'; import { isComponent } from './angular-beta/utils/NgComponentAnalyzer'; -import type { ICollection, NgModuleMetadata } from './types'; -import type { AngularFramework } from './types-6-0'; +import type { ICollection, NgModuleMetadata, AngularFramework } from './types'; // We use `any` here as the default type rather than `Args` because we need something that is // castable to any component-specific args type when the user is being careful. diff --git a/frameworks/angular/src/client/docs/sourceDecorator.ts b/frameworks/angular/src/client/docs/sourceDecorator.ts index 9b4f5841e871..4a36d8725869 100644 --- a/frameworks/angular/src/client/docs/sourceDecorator.ts +++ b/frameworks/angular/src/client/docs/sourceDecorator.ts @@ -1,7 +1,7 @@ import { addons, useEffect } from '@storybook/addons'; import type { PartialStoryFn } from '@storybook/csf'; import { SNIPPET_RENDERED, SourceType } from '@storybook/docs-tools'; -import { StoryContext, AngularFramework } from '..'; +import { StoryContext, AngularFramework } from '../types'; import { computesTemplateSourceFromComponent } from '../../renderer'; export const skipSourceRender = (context: StoryContext) => { diff --git a/frameworks/angular/src/client/preview/angular-polyfills.ts b/frameworks/angular/src/client/globals.ts similarity index 95% rename from frameworks/angular/src/client/preview/angular-polyfills.ts rename to frameworks/angular/src/client/globals.ts index c417d81683dd..e6e55cbf924d 100644 --- a/frameworks/angular/src/client/preview/angular-polyfills.ts +++ b/frameworks/angular/src/client/globals.ts @@ -1,3 +1,5 @@ +import global from 'global'; + /** * This file includes polyfills needed by Angular and is loaded before the app. * You can add your own extra polyfills to this file. @@ -65,3 +67,7 @@ import 'zone.js/dist/zone'; // Included with Angular CLI. * Need to import at least one locale-data with intl. */ // import 'intl/locale-data/jsonp/en'; + +const { window: globalWindow } = global; + +globalWindow.STORYBOOK_ENV = 'angular'; diff --git a/frameworks/angular/src/client/index.ts b/frameworks/angular/src/client/index.ts index 57214c9ce8c4..f74d4e1b213b 100644 --- a/frameworks/angular/src/client/index.ts +++ b/frameworks/angular/src/client/index.ts @@ -1,19 +1,11 @@ -export { - storiesOf, - setAddon, - addDecorator, - addParameters, - configure, - getStorybook, - forceReRender, - raw, -} from './preview'; +import './globals'; -export * from './preview/types-6-0'; +export * from './public-api'; +export * from './public-types'; -export type { StoryFnAngularReturnType as IStory } from './preview/types'; +export type { StoryFnAngularReturnType as IStory } from './types'; -export { moduleMetadata, componentWrapperDecorator } from './preview/decorators'; +export { moduleMetadata, componentWrapperDecorator } from './decorators'; // optimization: stop HMR propagation in webpack module?.hot?.decline(); diff --git a/frameworks/angular/src/client/preview/globals.ts b/frameworks/angular/src/client/preview/globals.ts deleted file mode 100644 index 002a0bc61209..000000000000 --- a/frameworks/angular/src/client/preview/globals.ts +++ /dev/null @@ -1,7 +0,0 @@ -import global from 'global'; - -import './angular-polyfills'; - -const { window: globalWindow } = global; - -globalWindow.STORYBOOK_ENV = 'angular'; diff --git a/frameworks/angular/src/client/preview/types-7-0.ts b/frameworks/angular/src/client/preview/types-7-0.ts deleted file mode 100644 index 2af743156fb7..000000000000 --- a/frameworks/angular/src/client/preview/types-7-0.ts +++ /dev/null @@ -1,13 +0,0 @@ -import type { Args } from '@storybook/csf'; -import type { StoryObj } from './types-6-0'; - -export type { StoryFn, StoryObj, Meta } from './types-6-0'; - -// NOTE these types are reversed from the way they are in types-6-0 and types-6-3 - -/** - * Story function that represents a CSFv3 component example. - * - * @see [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports) - */ -export type Story = StoryObj; diff --git a/frameworks/angular/src/client/preview/index.ts b/frameworks/angular/src/client/public-api.ts similarity index 88% rename from frameworks/angular/src/client/preview/index.ts rename to frameworks/angular/src/client/public-api.ts index 1ed481f70050..2cf0593a9dd8 100644 --- a/frameworks/angular/src/client/preview/index.ts +++ b/frameworks/angular/src/client/public-api.ts @@ -1,13 +1,13 @@ /* eslint-disable prefer-destructuring */ import type { ClientStoryApi, Loadable } from '@storybook/addons'; import { start } from '@storybook/core-client'; -import './globals'; import { renderToDOM, render } from './render'; import decorateStory from './decorateStory'; -import type { IStorybookSection } from './types'; -import type { AngularFramework } from './types-6-0'; +import type { IStorybookSection, AngularFramework } from './types'; -const framework = 'angular'; +export * from './public-types'; + +const FRAMEWORK = 'angular'; interface ClientApi extends ClientStoryApi { setAddon(addon: any): void; @@ -23,11 +23,11 @@ const api = start(renderToDOM, { decorateStory, render }); export const storiesOf: ClientApi['storiesOf'] = (kind, m) => { return (api.clientApi.storiesOf(kind, m) as ReturnType).addParameters({ - framework, + framework: FRAMEWORK, }); }; -export const configure: ClientApi['configure'] = (...args) => api.configure(framework, ...args); +export const configure: ClientApi['configure'] = (...args) => api.configure(FRAMEWORK, ...args); export const addDecorator: ClientApi['addDecorator'] = api.clientApi .addDecorator as ClientApi['addDecorator']; export const addParameters: ClientApi['addParameters'] = api.clientApi diff --git a/frameworks/angular/src/client/preview/types-6-0.ts b/frameworks/angular/src/client/public-types.ts similarity index 58% rename from frameworks/angular/src/client/preview/types-6-0.ts rename to frameworks/angular/src/client/public-types.ts index 7e4372d14490..27409d4841a0 100644 --- a/frameworks/angular/src/client/preview/types-6-0.ts +++ b/frameworks/angular/src/client/public-types.ts @@ -1,21 +1,13 @@ import type { Args, - Parameters as DefaultParameters, - StoryContext as DefaultStoryContext, ComponentAnnotations, StoryAnnotations, AnnotatedStoryFn, } from '@storybook/csf'; - -import type { StoryFnAngularReturnType } from './types'; +import { AngularFramework } from './types'; export type { Args, ArgTypes } from '@storybook/csf'; -export type AngularFramework = { - component: any; - storyResult: StoryFnAngularReturnType; -}; - /** * Metadata to configure the stories for a component. * @@ -38,19 +30,8 @@ export type StoryFn = AnnotatedStoryFn; export type StoryObj = StoryAnnotations; /** - * Story function that represents a CSFv2 component example. + * Story function that represents a CSFv3 component example. * * @see [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports) - * - * NOTE that in Storybook 7.0, this type will be renamed to `StoryFn` and replaced by the current `StoryObj` type. - * */ -export type Story = StoryFn; - -export type Parameters = DefaultParameters & { - /** Uses legacy angular rendering engine that use dynamic component */ - angularLegacyRendering?: boolean; - bootstrapModuleOptions?: unknown; -}; - -export type StoryContext = DefaultStoryContext & { parameters: Parameters }; +export type Story = StoryObj; diff --git a/frameworks/angular/src/client/preview/render.ts b/frameworks/angular/src/client/render.ts similarity index 94% rename from frameworks/angular/src/client/preview/render.ts rename to frameworks/angular/src/client/render.ts index fc1427ded470..9517d29f17f1 100644 --- a/frameworks/angular/src/client/preview/render.ts +++ b/frameworks/angular/src/client/render.ts @@ -2,7 +2,7 @@ import type { RenderContext } from '@storybook/store'; import type { ArgsStoryFn } from '@storybook/csf'; import { renderNgApp } from './angular/helpers'; -import type { AngularFramework } from './types-6-0'; +import type { AngularFramework } from './types'; import { RendererFactory } from './angular-beta/RendererFactory'; diff --git a/frameworks/angular/src/client/preview/types.ts b/frameworks/angular/src/client/types.ts similarity index 61% rename from frameworks/angular/src/client/preview/types.ts rename to frameworks/angular/src/client/types.ts index 1ce3b4294c37..a681720310f0 100644 --- a/frameworks/angular/src/client/preview/types.ts +++ b/frameworks/angular/src/client/types.ts @@ -1,3 +1,8 @@ +import type { + Parameters as DefaultParameters, + StoryContext as DefaultStoryContext, +} from '@storybook/csf'; + export interface NgModuleMetadata { declarations?: any[]; entryComponents?: any[]; @@ -30,3 +35,16 @@ export interface StoryFnAngularReturnType { styles?: string[]; userDefinedTemplate?: boolean; } + +export type AngularFramework = { + component: any; + storyResult: StoryFnAngularReturnType; +}; + +export type Parameters = DefaultParameters & { + /** Uses legacy angular rendering engine that use dynamic component */ + angularLegacyRendering?: boolean; + bootstrapModuleOptions?: unknown; +}; + +export type StoryContext = DefaultStoryContext & { parameters: Parameters }; diff --git a/frameworks/angular/src/index.ts b/frameworks/angular/src/index.ts index 5d7d9ee1f033..92f1fac0da0f 100644 --- a/frameworks/angular/src/index.ts +++ b/frameworks/angular/src/index.ts @@ -1,4 +1,4 @@ -export * from './client'; +export * from './client/index'; export * from './types'; /* diff --git a/frameworks/angular/src/preset.ts b/frameworks/angular/src/preset.ts index 0aa9bc0af645..cac9e5702f9b 100644 --- a/frameworks/angular/src/preset.ts +++ b/frameworks/angular/src/preset.ts @@ -1,30 +1,34 @@ import path from 'path'; +import type { PresetProperty } from '@storybook/core-common'; import { StorybookConfig } from './types'; -export const previewAnnotations: StorybookConfig['previewAnnotations'] = (entries = []) => [ - ...entries, - require.resolve('./client/preview/config'), -]; - -export const addons: StorybookConfig['addons'] = [ +export const addons: PresetProperty<'addons', StorybookConfig> = [ require.resolve('./server/framework-preset-angular'), require.resolve('./server/framework-preset-angular-cli'), require.resolve('./server/framework-preset-angular-ivy'), require.resolve('./server/framework-preset-angular-docs'), ]; -export const core = async (config: StorybookConfig['core']) => { +export const previewAnnotations: StorybookConfig['previewAnnotations'] = (entries = []) => [ + ...entries, + require.resolve('./client/config'), +]; + +export const core: PresetProperty<'core', StorybookConfig> = async (config, options) => { + const framework = await options.presets.apply('framework'); + return { ...config, - builder: path.dirname( - require.resolve(path.join('@storybook/builder-webpack5', 'package.json')) - ), + builder: { + name: path.dirname( + require.resolve(path.join('@storybook/builder-webpack5', 'package.json')) + ) as '@storybook/builder-webpack5', + options: typeof framework === 'string' ? {} : framework.options.builder || {}, + }, }; }; -export const typescript = async ( - config: StorybookConfig['typescript'] -): Promise => { +export const typescript: PresetProperty<'typescript', StorybookConfig> = async (config) => { return { ...config, skipBabel: true, diff --git a/frameworks/angular/src/renderer.ts b/frameworks/angular/src/renderer.ts index 8f2b6a154dca..3216885b6574 100644 --- a/frameworks/angular/src/renderer.ts +++ b/frameworks/angular/src/renderer.ts @@ -1,4 +1,4 @@ -export { computesTemplateSourceFromComponent } from './client/preview/angular-beta/ComputesTemplateFromComponent'; -export { rendererFactory } from './client/preview/render'; -export { AbstractRenderer } from './client/preview/angular-beta/AbstractRenderer'; -export { getStorybookModuleMetadata } from './client/preview/angular-beta/StorybookModule'; +export { computesTemplateSourceFromComponent } from './client/angular-beta/ComputesTemplateFromComponent'; +export { rendererFactory } from './client/render'; +export { AbstractRenderer } from './client/angular-beta/AbstractRenderer'; +export { getStorybookModuleMetadata } from './client/angular-beta/StorybookModule'; diff --git a/frameworks/angular/src/types.ts b/frameworks/angular/src/types.ts index a7dca6ee1ce0..26d68a283a57 100644 --- a/frameworks/angular/src/types.ts +++ b/frameworks/angular/src/types.ts @@ -1,17 +1,49 @@ -import type { StorybookConfig as BaseConfig } from '@storybook/core-common'; +import type { + StorybookConfig as StorybookConfigBase, + TypescriptOptions as TypescriptOptionsReact, +} from '@storybook/core-webpack'; +import type { + StorybookConfigWebpack, + BuilderOptions, + TypescriptOptions as TypescriptOptionsBuilder, +} from '@storybook/builder-webpack5'; -export interface AngularOptions { - enableIvy: boolean; -} +type FrameworkName = '@storybook/angular'; +type BuilderName = '@storybook/builder-webpack5'; -/** - * The interface for Storybook configuration in `main.ts` files. - */ -export interface StorybookConfig extends BaseConfig { +export type FrameworkOptions = AngularOptions & { + builder?: BuilderOptions; +}; + +type StorybookConfigFramework = { framework: - | string + | FrameworkName | { - name: '@storybook/angular'; - options: AngularOptions; + name: FrameworkName; + options: FrameworkOptions; }; + core?: StorybookConfigBase['core'] & { + builder?: + | BuilderName + | { + name: BuilderName; + options: BuilderOptions; + }; + }; + typescript?: Partial & + StorybookConfigBase['typescript']; +}; + +/** + * The interface for Storybook configuration in `main.ts` files. + */ +export type StorybookConfig = Omit< + StorybookConfigBase, + keyof StorybookConfigWebpack | keyof StorybookConfigFramework +> & + StorybookConfigWebpack & + StorybookConfigFramework; + +export interface AngularOptions { + enableIvy: boolean; } diff --git a/frameworks/angular/types-6-0.d.ts b/frameworks/angular/types-6-0.d.ts deleted file mode 100644 index 408fe71eecba..000000000000 --- a/frameworks/angular/types-6-0.d.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './dist/types/client/preview/types-6-0.d'; diff --git a/frameworks/angular/types-7-0.d.ts b/frameworks/angular/types-7-0.d.ts deleted file mode 100644 index e3503ed86e68..000000000000 --- a/frameworks/angular/types-7-0.d.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './dist/types/client/preview/types-7-0.d'; diff --git a/frameworks/ember/src/client/preview/config.ts b/frameworks/ember/src/client/preview/config.ts index 062428c585d0..113dbbe3ba73 100644 --- a/frameworks/ember/src/client/preview/config.ts +++ b/frameworks/ember/src/client/preview/config.ts @@ -1,3 +1,3 @@ export { renderToDOM } from './render'; -export const parameters = { framework: 'ember' }; +export const parameters = { framework: 'ember' as const }; diff --git a/frameworks/ember/src/client/preview/index.ts b/frameworks/ember/src/client/preview/index.ts index f6d08aa98d7b..b5c61e5a1561 100644 --- a/frameworks/ember/src/client/preview/index.ts +++ b/frameworks/ember/src/client/preview/index.ts @@ -8,9 +8,9 @@ const { configure: coreConfigure, clientApi, forceReRender } = start(renderToDOM export const { setAddon, addDecorator, addParameters, clearDecorators, getStorybook, raw } = clientApi; -const framework = 'ember'; +const FRAMEWORK = 'ember'; export const storiesOf = (kind: string, m: any) => - clientApi.storiesOf(kind, m).addParameters({ framework }); -export const configure = (loadable: any, m: any) => coreConfigure(framework, loadable, m); + clientApi.storiesOf(kind, m).addParameters({ framework: FRAMEWORK }); +export const configure = (loadable: any, m: any) => coreConfigure(FRAMEWORK, loadable, m); export { forceReRender }; diff --git a/frameworks/ember/src/preset.ts b/frameworks/ember/src/preset.ts index 576a6101279e..422f2a750758 100644 --- a/frameworks/ember/src/preset.ts +++ b/frameworks/ember/src/preset.ts @@ -1,13 +1,22 @@ -import type { StorybookConfig } from '@storybook/core-common'; +import path from 'path'; +import type { PresetProperty } from '@storybook/core-common'; +import type { StorybookConfig } from './types'; -export const addons: StorybookConfig['addons'] = [ +export const addons: PresetProperty<'addons', StorybookConfig> = [ require.resolve('./server/framework-preset-babel-ember'), require.resolve('./server/framework-preset-ember-docs'), ]; -export const core = async (config: StorybookConfig['core']) => { +export const core: PresetProperty<'core', StorybookConfig> = async (config, options) => { + const framework = await options.presets.apply('framework'); + return { ...config, - builder: require.resolve('@storybook/builder-webpack5'), + builder: { + name: path.dirname( + require.resolve(path.join('@storybook/builder-webpack5', 'package.json')) + ) as '@storybook/builder-webpack5', + options: typeof framework === 'string' ? {} : framework.options.builder || {}, + }, }; }; diff --git a/frameworks/ember/src/types.ts b/frameworks/ember/src/types.ts new file mode 100644 index 000000000000..e75995bf27a7 --- /dev/null +++ b/frameworks/ember/src/types.ts @@ -0,0 +1,45 @@ +import type { + StorybookConfig as StorybookConfigBase, + TypescriptOptions as TypescriptOptionsReact, +} from '@storybook/core-webpack'; +import type { + StorybookConfigWebpack, + BuilderOptions, + TypescriptOptions as TypescriptOptionsBuilder, +} from '@storybook/builder-webpack5'; + +type FrameworkName = '@storybook/ember-webpack5'; +type BuilderName = '@storybook/builder-webpack5'; + +export type FrameworkOptions = { + builder?: BuilderOptions; +}; + +type StorybookConfigFramework = { + framework: + | FrameworkName + | { + name: FrameworkName; + options: FrameworkOptions; + }; + core?: StorybookConfigBase['core'] & { + builder?: + | BuilderName + | { + name: BuilderName; + options: BuilderOptions; + }; + }; + typescript?: Partial & + StorybookConfigBase['typescript']; +}; + +/** + * The interface for Storybook configuration in `main.ts` files. + */ +export type StorybookConfig = Omit< + StorybookConfigBase, + keyof StorybookConfigWebpack | keyof StorybookConfigFramework +> & + StorybookConfigWebpack & + StorybookConfigFramework; diff --git a/frameworks/html-webpack5/src/index.ts b/frameworks/html-webpack5/src/index.ts index 512c806bd022..a5fd712c4ce5 100644 --- a/frameworks/html-webpack5/src/index.ts +++ b/frameworks/html-webpack5/src/index.ts @@ -1 +1,2 @@ export * from '@storybook/html'; +export * from './types'; diff --git a/frameworks/html-webpack5/src/preset.ts b/frameworks/html-webpack5/src/preset.ts index db11d82a2235..8bec5e5d2428 100644 --- a/frameworks/html-webpack5/src/preset.ts +++ b/frameworks/html-webpack5/src/preset.ts @@ -1,13 +1,22 @@ -import type { StorybookConfig } from '@storybook/core-common'; +import path from 'path'; +import type { PresetProperty } from '@storybook/core-common'; +import type { StorybookConfig } from './types'; -export const addons: StorybookConfig['addons'] = [ - '@storybook/preset-html-webpack', - '@storybook/html', +export const addons: PresetProperty<'addons', StorybookConfig> = [ + path.dirname(require.resolve(path.join('@storybook/preset-html-webpack', 'package.json'))), + path.dirname(require.resolve(path.join('@storybook/html', 'package.json'))), ]; -export const core = async (config: StorybookConfig['core']) => { +export const core: PresetProperty<'core', StorybookConfig> = async (config, options) => { + const framework = await options.presets.apply('framework'); + return { ...config, - builder: require.resolve('@storybook/builder-webpack5'), + builder: { + name: path.dirname( + require.resolve(path.join('@storybook/builder-webpack5', 'package.json')) + ) as '@storybook/builder-webpack5', + options: typeof framework === 'string' ? {} : framework.options.builder || {}, + }, }; }; diff --git a/frameworks/html-webpack5/src/types.ts b/frameworks/html-webpack5/src/types.ts new file mode 100644 index 000000000000..2360ef4ac9e6 --- /dev/null +++ b/frameworks/html-webpack5/src/types.ts @@ -0,0 +1,45 @@ +import type { + StorybookConfig as StorybookConfigBase, + TypescriptOptions as TypescriptOptionsReact, +} from '@storybook/preset-html-webpack'; +import type { + StorybookConfigWebpack, + BuilderOptions, + TypescriptOptions as TypescriptOptionsBuilder, +} from '@storybook/builder-webpack5'; + +type FrameworkName = '@storybook/html-webpack5'; +type BuilderName = '@storybook/builder-webpack5'; + +export type FrameworkOptions = { + builder?: BuilderOptions; +}; + +type StorybookConfigFramework = { + framework: + | FrameworkName + | { + name: FrameworkName; + options: FrameworkOptions; + }; + core?: StorybookConfigBase['core'] & { + builder?: + | BuilderName + | { + name: BuilderName; + options: BuilderOptions; + }; + }; + typescript?: Partial & + StorybookConfigBase['typescript']; +}; + +/** + * The interface for Storybook configuration in `main.ts` files. + */ +export type StorybookConfig = Omit< + StorybookConfigBase, + keyof StorybookConfigWebpack | keyof StorybookConfigFramework +> & + StorybookConfigWebpack & + StorybookConfigFramework; diff --git a/frameworks/html-webpack5/types-7-0.d.ts b/frameworks/html-webpack5/types-7-0.d.ts deleted file mode 100644 index e3503ed86e68..000000000000 --- a/frameworks/html-webpack5/types-7-0.d.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './dist/types/client/preview/types-7-0.d'; diff --git a/frameworks/preact-webpack5/src/index.ts b/frameworks/preact-webpack5/src/index.ts index 6b5d05231731..6a07f64e6833 100644 --- a/frameworks/preact-webpack5/src/index.ts +++ b/frameworks/preact-webpack5/src/index.ts @@ -1 +1,2 @@ export * from '@storybook/preact'; +export * from './types'; diff --git a/frameworks/preact-webpack5/src/preset.ts b/frameworks/preact-webpack5/src/preset.ts index 051cf6499c74..82aee136ba32 100644 --- a/frameworks/preact-webpack5/src/preset.ts +++ b/frameworks/preact-webpack5/src/preset.ts @@ -1,13 +1,22 @@ -import type { StorybookConfig } from '@storybook/core-common'; +import path from 'path'; +import type { PresetProperty } from '@storybook/core-common'; +import type { StorybookConfig } from './types'; -export const addons: StorybookConfig['addons'] = [ - '@storybook/preset-preact-webpack', - '@storybook/preact', +export const addons: PresetProperty<'addons', StorybookConfig> = [ + path.dirname(require.resolve(path.join('@storybook/preset-preact-webpack', 'package.json'))), + path.dirname(require.resolve(path.join('@storybook/preact', 'package.json'))), ]; -export const core = async (config: StorybookConfig['core']) => { +export const core: PresetProperty<'core', StorybookConfig> = async (config, options) => { + const framework = await options.presets.apply('framework'); + return { ...config, - builder: require.resolve('@storybook/builder-webpack5'), + builder: { + name: path.dirname( + require.resolve(path.join('@storybook/builder-webpack5', 'package.json')) + ) as '@storybook/builder-webpack5', + options: typeof framework === 'string' ? {} : framework.options.builder || {}, + }, }; }; diff --git a/frameworks/preact-webpack5/src/types.ts b/frameworks/preact-webpack5/src/types.ts new file mode 100644 index 000000000000..2d66b8576166 --- /dev/null +++ b/frameworks/preact-webpack5/src/types.ts @@ -0,0 +1,45 @@ +import type { + StorybookConfig as StorybookConfigBase, + TypescriptOptions as TypescriptOptionsReact, +} from '@storybook/preset-preact-webpack'; +import type { + StorybookConfigWebpack, + BuilderOptions, + TypescriptOptions as TypescriptOptionsBuilder, +} from '@storybook/builder-webpack5'; + +type FrameworkName = '@storybook/preact-webpack5'; +type BuilderName = '@storybook/builder-webpack5'; + +export type FrameworkOptions = { + builder?: BuilderOptions; +}; + +type StorybookConfigFramework = { + framework: + | FrameworkName + | { + name: FrameworkName; + options: FrameworkOptions; + }; + core?: StorybookConfigBase['core'] & { + builder?: + | BuilderName + | { + name: BuilderName; + options: BuilderOptions; + }; + }; + typescript?: Partial & + StorybookConfigBase['typescript']; +}; + +/** + * The interface for Storybook configuration in `main.ts` files. + */ +export type StorybookConfig = Omit< + StorybookConfigBase, + keyof StorybookConfigWebpack | keyof StorybookConfigFramework +> & + StorybookConfigWebpack & + StorybookConfigFramework; diff --git a/frameworks/preact-webpack5/types-6-0.d.ts b/frameworks/preact-webpack5/types-6-0.d.ts deleted file mode 100644 index 408fe71eecba..000000000000 --- a/frameworks/preact-webpack5/types-6-0.d.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './dist/types/client/preview/types-6-0.d'; diff --git a/frameworks/preact-webpack5/types-7-0.d.ts b/frameworks/preact-webpack5/types-7-0.d.ts deleted file mode 100644 index e3503ed86e68..000000000000 --- a/frameworks/preact-webpack5/types-7-0.d.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './dist/types/client/preview/types-7-0.d'; diff --git a/frameworks/react-webpack5/src/preset.ts b/frameworks/react-webpack5/src/preset.ts index 67f02b764f90..2d45fcac0e4b 100644 --- a/frameworks/react-webpack5/src/preset.ts +++ b/frameworks/react-webpack5/src/preset.ts @@ -1,17 +1,23 @@ -import type { StorybookConfig } from '@storybook/preset-react-webpack'; import path from 'path'; +import type { PresetProperty } from '@storybook/core-common'; +import type { StorybookConfig } from './types'; -export const addons: StorybookConfig['addons'] = [ +export const addons: PresetProperty<'addons', StorybookConfig> = [ path.dirname(require.resolve(path.join('@storybook/preset-react-webpack', 'package.json'))), path.dirname(require.resolve(path.join('@storybook/react', 'package.json'))), ]; -export const core = async (config: StorybookConfig['core']) => { +export const core: PresetProperty<'core', StorybookConfig> = async (config, options) => { + const framework = await options.presets.apply('framework'); + return { ...config, - builder: path.dirname( - require.resolve(path.join('@storybook/builder-webpack5', 'package.json')) - ), + builder: { + name: path.dirname( + require.resolve(path.join('@storybook/builder-webpack5', 'package.json')) + ) as '@storybook/builder-webpack5', + options: typeof framework === 'string' ? {} : framework.options.builder || {}, + }, }; }; diff --git a/frameworks/react-webpack5/src/types.ts b/frameworks/react-webpack5/src/types.ts index da42bb496949..7e50ef23aba4 100644 --- a/frameworks/react-webpack5/src/types.ts +++ b/frameworks/react-webpack5/src/types.ts @@ -1,49 +1,46 @@ -import type ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin'; -import type { Configuration } from 'webpack'; +import type { + ReactOptions, + StorybookConfig as StorybookConfigBase, + TypescriptOptions as TypescriptOptionsReact, +} from '@storybook/preset-react-webpack'; +import type { + StorybookConfigWebpack, + BuilderOptions, + TypescriptOptions as TypescriptOptionsBuilder, +} from '@storybook/builder-webpack5'; -import type { StorybookConfig as BaseStorybookConfig } from '@storybook/preset-react-webpack'; +type FrameworkName = '@storybook/react-webpack5'; +type BuilderName = '@storybook/builder-webpack5'; -export type { BuilderResult } from '@storybook/preset-react-webpack'; - -/** - * Options for TypeScript usage within Storybook. - */ -export type TypescriptOptions = BaseStorybookConfig['typescript'] & { - /** - * Configures `fork-ts-checker-webpack-plugin` - */ - checkOptions: ForkTsCheckerWebpackPlugin['options']; +export type FrameworkOptions = ReactOptions & { + builder?: BuilderOptions; }; -export interface StorybookTypescriptConfig { - typescript?: Partial; -} - -export interface ReactOptions { - fastRefresh?: boolean; - strictMode?: boolean; - /** - * Use React's legacy root API to mount components - * @description - * React has introduced a new root API with React 18.x to enable a whole set of new features (e.g. concurrent features) - * If this flag is true, the legacy Root API is used to mount components to make it easier to migrate step by step to React 18. - * @default false - */ - legacyRootApi?: boolean; -} - -export interface StorybookReactConfig { +type StorybookConfigFramework = { framework: - | string + | FrameworkName | { - name: '@storybook/react-webpack5'; - options: ReactOptions; + name: FrameworkName; + options: FrameworkOptions; }; -} + core?: StorybookConfigBase['core'] & { + builder?: + | BuilderName + | { + name: BuilderName; + options: BuilderOptions; + }; + }; + typescript?: Partial & + StorybookConfigBase['typescript']; +}; /** * The interface for Storybook configuration in `main.ts` files. */ -export type StorybookConfig = BaseStorybookConfig & - StorybookReactConfig & - StorybookTypescriptConfig; +export type StorybookConfig = Omit< + StorybookConfigBase, + keyof StorybookConfigWebpack | keyof StorybookConfigFramework +> & + StorybookConfigWebpack & + StorybookConfigFramework; diff --git a/frameworks/react-webpack5/types-6-0.d.ts b/frameworks/react-webpack5/types-6-0.d.ts deleted file mode 100644 index 408fe71eecba..000000000000 --- a/frameworks/react-webpack5/types-6-0.d.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './dist/types/client/preview/types-6-0.d'; diff --git a/frameworks/react-webpack5/types-7-0.d.ts b/frameworks/react-webpack5/types-7-0.d.ts deleted file mode 100644 index e3503ed86e68..000000000000 --- a/frameworks/react-webpack5/types-7-0.d.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './dist/types/client/preview/types-7-0.d'; diff --git a/frameworks/react-webpack5/types.d.ts b/frameworks/react-webpack5/types.d.ts deleted file mode 100644 index b74be4c5a234..000000000000 --- a/frameworks/react-webpack5/types.d.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './dist/types/index.d'; diff --git a/frameworks/server-webpack5/src/index.ts b/frameworks/server-webpack5/src/index.ts index 39e64100851f..098058fdbc0e 100644 --- a/frameworks/server-webpack5/src/index.ts +++ b/frameworks/server-webpack5/src/index.ts @@ -1 +1,2 @@ export * from '@storybook/server'; +export * from './types'; diff --git a/frameworks/server-webpack5/src/preset.ts b/frameworks/server-webpack5/src/preset.ts index 83f04f5bf4ed..d65800229c43 100644 --- a/frameworks/server-webpack5/src/preset.ts +++ b/frameworks/server-webpack5/src/preset.ts @@ -1,13 +1,22 @@ -import type { StorybookConfig } from '@storybook/core-common'; +import path from 'path'; +import type { PresetProperty } from '@storybook/core-common'; +import type { StorybookConfig } from './types'; -export const addons: StorybookConfig['addons'] = [ - '@storybook/preset-server-webpack', - '@storybook/server', +export const addons: PresetProperty<'addons', StorybookConfig> = [ + path.dirname(require.resolve(path.join('@storybook/preset-server-webpack', 'package.json'))), + path.dirname(require.resolve(path.join('@storybook/server', 'package.json'))), ]; -export const core = async (config: StorybookConfig['core']) => { +export const core: PresetProperty<'core', StorybookConfig> = async (config, options) => { + const framework = await options.presets.apply('framework'); + return { ...config, - builder: require.resolve('@storybook/builder-webpack5'), + builder: { + name: path.dirname( + require.resolve(path.join('@storybook/builder-webpack5', 'package.json')) + ) as '@storybook/builder-webpack5', + options: typeof framework === 'string' ? {} : framework.options.builder || {}, + }, }; }; diff --git a/frameworks/server-webpack5/src/types.ts b/frameworks/server-webpack5/src/types.ts new file mode 100644 index 000000000000..63ecb28ab897 --- /dev/null +++ b/frameworks/server-webpack5/src/types.ts @@ -0,0 +1,45 @@ +import type { + StorybookConfig as StorybookConfigBase, + TypescriptOptions as TypescriptOptionsReact, +} from '@storybook/preset-server-webpack'; +import type { + StorybookConfigWebpack, + BuilderOptions, + TypescriptOptions as TypescriptOptionsBuilder, +} from '@storybook/builder-webpack5'; + +type FrameworkName = '@storybook/server-webpack5'; +type BuilderName = '@storybook/builder-webpack5'; + +export type FrameworkOptions = { + builder?: BuilderOptions; +}; + +type StorybookConfigFramework = { + framework: + | FrameworkName + | { + name: FrameworkName; + options: FrameworkOptions; + }; + core?: StorybookConfigBase['core'] & { + builder?: + | BuilderName + | { + name: BuilderName; + options: BuilderOptions; + }; + }; + typescript?: Partial & + StorybookConfigBase['typescript']; +}; + +/** + * The interface for Storybook configuration in `main.ts` files. + */ +export type StorybookConfig = Omit< + StorybookConfigBase, + keyof StorybookConfigWebpack | keyof StorybookConfigFramework +> & + StorybookConfigWebpack & + StorybookConfigFramework; diff --git a/frameworks/svelte-webpack5/src/index.ts b/frameworks/svelte-webpack5/src/index.ts index 8c3b8d3c0b7b..07de4359ae11 100644 --- a/frameworks/svelte-webpack5/src/index.ts +++ b/frameworks/svelte-webpack5/src/index.ts @@ -1 +1,2 @@ export * from '@storybook/svelte'; +export * from './types'; diff --git a/frameworks/svelte-webpack5/src/preset.ts b/frameworks/svelte-webpack5/src/preset.ts index bc7fd8430897..28a722442e99 100644 --- a/frameworks/svelte-webpack5/src/preset.ts +++ b/frameworks/svelte-webpack5/src/preset.ts @@ -1,13 +1,22 @@ -import type { StorybookConfig } from '@storybook/core-common'; +import path from 'path'; +import type { PresetProperty } from '@storybook/core-common'; +import type { StorybookConfig } from './types'; -export const addons: StorybookConfig['addons'] = [ - '@storybook/preset-svelte-webpack', - '@storybook/svelte', +export const addons: PresetProperty<'addons', StorybookConfig> = [ + path.dirname(require.resolve(path.join('@storybook/preset-svelte-webpack', 'package.json'))), + path.dirname(require.resolve(path.join('@storybook/svelte', 'package.json'))), ]; -export const core = async (config: StorybookConfig['core']) => { +export const core: PresetProperty<'core', StorybookConfig> = async (config, options) => { + const framework = await options.presets.apply('framework'); + return { ...config, - builder: require.resolve('@storybook/builder-webpack5'), + builder: { + name: path.dirname( + require.resolve(path.join('@storybook/builder-webpack5', 'package.json')) + ) as '@storybook/builder-webpack5', + options: typeof framework === 'string' ? {} : framework.options.builder || {}, + }, }; }; diff --git a/frameworks/svelte-webpack5/src/types.ts b/frameworks/svelte-webpack5/src/types.ts new file mode 100644 index 000000000000..d5c0578faa32 --- /dev/null +++ b/frameworks/svelte-webpack5/src/types.ts @@ -0,0 +1,46 @@ +import type { + SvelteOptions, + StorybookConfig as StorybookConfigBase, + TypescriptOptions as TypescriptOptionsReact, +} from '@storybook/preset-svelte-webpack'; +import type { + StorybookConfigWebpack, + BuilderOptions, + TypescriptOptions as TypescriptOptionsBuilder, +} from '@storybook/builder-webpack5'; + +type FrameworkName = '@storybook/svelte-webpack5'; +type BuilderName = '@storybook/builder-webpack5'; + +export type FrameworkOptions = SvelteOptions & { + builder?: BuilderOptions; +}; + +type StorybookConfigFramework = { + framework: + | FrameworkName + | { + name: FrameworkName; + options: FrameworkOptions; + }; + core?: StorybookConfigBase['core'] & { + builder?: + | BuilderName + | { + name: BuilderName; + options: BuilderOptions; + }; + }; + typescript?: Partial & + StorybookConfigBase['typescript']; +}; + +/** + * The interface for Storybook configuration in `main.ts` files. + */ +export type StorybookConfig = Omit< + StorybookConfigBase, + keyof StorybookConfigWebpack | keyof StorybookConfigFramework +> & + StorybookConfigWebpack & + StorybookConfigFramework; diff --git a/frameworks/vue-webpack5/src/index.ts b/frameworks/vue-webpack5/src/index.ts index 12ce4f50a71a..e9de1f241dd5 100644 --- a/frameworks/vue-webpack5/src/index.ts +++ b/frameworks/vue-webpack5/src/index.ts @@ -1 +1,2 @@ export * from '@storybook/vue'; +export * from './types'; diff --git a/frameworks/vue-webpack5/src/preset.ts b/frameworks/vue-webpack5/src/preset.ts index 7c1ad1aa9ec4..07ee35af0511 100644 --- a/frameworks/vue-webpack5/src/preset.ts +++ b/frameworks/vue-webpack5/src/preset.ts @@ -1,14 +1,23 @@ -import type { StorybookConfig } from '@storybook/core-common'; +import path from 'path'; +import type { PresetProperty } from '@storybook/core-common'; +import type { StorybookConfig } from './types'; -export const addons: StorybookConfig['addons'] = [ - '@storybook/preset-vue-webpack', - '@storybook/vue', +export const addons: PresetProperty<'addons', StorybookConfig> = [ + path.dirname(require.resolve(path.join('@storybook/preset-vue-webpack', 'package.json'))), + path.dirname(require.resolve(path.join('@storybook/vue', 'package.json'))), ]; -export const core = async (config: StorybookConfig['core']) => { +export const core: PresetProperty<'core', StorybookConfig> = async (config, options) => { + const framework = await options.presets.apply('framework'); + return { ...config, - builder: require.resolve('@storybook/builder-webpack5'), + builder: { + name: path.dirname( + require.resolve(path.join('@storybook/builder-webpack5', 'package.json')) + ) as '@storybook/builder-webpack5', + options: typeof framework === 'string' ? {} : framework.options.builder || {}, + }, }; }; diff --git a/frameworks/vue-webpack5/src/types.ts b/frameworks/vue-webpack5/src/types.ts new file mode 100644 index 000000000000..7a1c993d8791 --- /dev/null +++ b/frameworks/vue-webpack5/src/types.ts @@ -0,0 +1,45 @@ +import type { + StorybookConfig as StorybookConfigBase, + TypescriptOptions as TypescriptOptionsReact, +} from '@storybook/preset-vue-webpack'; +import type { + StorybookConfigWebpack, + BuilderOptions, + TypescriptOptions as TypescriptOptionsBuilder, +} from '@storybook/builder-webpack5'; + +type FrameworkName = '@storybook/vue-webpack5'; +type BuilderName = '@storybook/builder-webpack5'; + +export type FrameworkOptions = { + builder?: BuilderOptions; +}; + +type StorybookConfigFramework = { + framework: + | FrameworkName + | { + name: FrameworkName; + options: FrameworkOptions; + }; + core?: StorybookConfigBase['core'] & { + builder?: + | BuilderName + | { + name: BuilderName; + options: BuilderOptions; + }; + }; + typescript?: Partial & + StorybookConfigBase['typescript']; +}; + +/** + * The interface for Storybook configuration in `main.ts` files. + */ +export type StorybookConfig = Omit< + StorybookConfigBase, + keyof StorybookConfigWebpack | keyof StorybookConfigFramework +> & + StorybookConfigWebpack & + StorybookConfigFramework; diff --git a/frameworks/vue-webpack5/types-6-0.d.ts b/frameworks/vue-webpack5/types-6-0.d.ts deleted file mode 100644 index 408fe71eecba..000000000000 --- a/frameworks/vue-webpack5/types-6-0.d.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './dist/types/client/preview/types-6-0.d'; diff --git a/frameworks/vue-webpack5/types-7-0.d.ts b/frameworks/vue-webpack5/types-7-0.d.ts deleted file mode 100644 index e3503ed86e68..000000000000 --- a/frameworks/vue-webpack5/types-7-0.d.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './dist/types/client/preview/types-7-0.d'; diff --git a/frameworks/vue3-webpack5/src/index.ts b/frameworks/vue3-webpack5/src/index.ts index cf9a0c07e407..034adb8b02a6 100644 --- a/frameworks/vue3-webpack5/src/index.ts +++ b/frameworks/vue3-webpack5/src/index.ts @@ -1 +1,2 @@ export * from '@storybook/vue3'; +export * from './types'; diff --git a/frameworks/vue3-webpack5/src/preset.ts b/frameworks/vue3-webpack5/src/preset.ts index f4aa25353a41..7babf251a76d 100644 --- a/frameworks/vue3-webpack5/src/preset.ts +++ b/frameworks/vue3-webpack5/src/preset.ts @@ -1,13 +1,22 @@ -import type { StorybookConfig } from '@storybook/core-common'; +import path from 'path'; +import type { PresetProperty } from '@storybook/core-common'; +import type { StorybookConfig } from './types'; -export const addons: StorybookConfig['addons'] = [ - '@storybook/preset-vue3-webpack', - '@storybook/vue3', +export const addons: PresetProperty<'addons', StorybookConfig> = [ + path.dirname(require.resolve(path.join('@storybook/preset-vue3-webpack', 'package.json'))), + path.dirname(require.resolve(path.join('@storybook/vue3', 'package.json'))), ]; -export const core = async (config: StorybookConfig['core']) => { +export const core: PresetProperty<'core', StorybookConfig> = async (config, options) => { + const framework = await options.presets.apply('framework'); + return { ...config, - builder: require.resolve('@storybook/builder-webpack5'), + builder: { + name: path.dirname( + require.resolve(path.join('@storybook/builder-webpack5', 'package.json')) + ) as '@storybook/builder-webpack5', + options: typeof framework === 'string' ? {} : framework.options.builder || {}, + }, }; }; diff --git a/frameworks/vue3-webpack5/src/types.ts b/frameworks/vue3-webpack5/src/types.ts new file mode 100644 index 000000000000..bdae08526600 --- /dev/null +++ b/frameworks/vue3-webpack5/src/types.ts @@ -0,0 +1,45 @@ +import type { + StorybookConfig as StorybookConfigBase, + TypescriptOptions as TypescriptOptionsReact, +} from '@storybook/preset-vue3-webpack'; +import type { + StorybookConfigWebpack, + BuilderOptions, + TypescriptOptions as TypescriptOptionsBuilder, +} from '@storybook/builder-webpack5'; + +type FrameworkName = '@storybook/vue3-webpack5'; +type BuilderName = '@storybook/builder-webpack5'; + +export type FrameworkOptions = { + builder?: BuilderOptions; +}; + +type StorybookConfigFramework = { + framework: + | FrameworkName + | { + name: FrameworkName; + options: FrameworkOptions; + }; + core?: StorybookConfigBase['core'] & { + builder?: + | BuilderName + | { + name: BuilderName; + options: BuilderOptions; + }; + }; + typescript?: Partial & + StorybookConfigBase['typescript']; +}; + +/** + * The interface for Storybook configuration in `main.ts` files. + */ +export type StorybookConfig = Omit< + StorybookConfigBase, + keyof StorybookConfigWebpack | keyof StorybookConfigFramework +> & + StorybookConfigWebpack & + StorybookConfigFramework; diff --git a/frameworks/vue3-webpack5/types-6-0.d.ts b/frameworks/vue3-webpack5/types-6-0.d.ts deleted file mode 100644 index 408fe71eecba..000000000000 --- a/frameworks/vue3-webpack5/types-6-0.d.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './dist/types/client/preview/types-6-0.d'; diff --git a/frameworks/vue3-webpack5/types-7-0.d.ts b/frameworks/vue3-webpack5/types-7-0.d.ts deleted file mode 100644 index e3503ed86e68..000000000000 --- a/frameworks/vue3-webpack5/types-7-0.d.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './dist/types/client/preview/types-7-0.d'; diff --git a/frameworks/web-components-webpack5/src/index.ts b/frameworks/web-components-webpack5/src/index.ts index 9d1e091abcc8..538d3b3a6d67 100644 --- a/frameworks/web-components-webpack5/src/index.ts +++ b/frameworks/web-components-webpack5/src/index.ts @@ -1 +1,2 @@ export * from '@storybook/web-components'; +export * from './types'; diff --git a/frameworks/web-components-webpack5/src/preset.ts b/frameworks/web-components-webpack5/src/preset.ts index 493946ec636d..310c48ec7aec 100644 --- a/frameworks/web-components-webpack5/src/preset.ts +++ b/frameworks/web-components-webpack5/src/preset.ts @@ -1,13 +1,24 @@ +import path from 'path'; +import type { PresetProperty } from '@storybook/core-common'; import type { StorybookConfig } from './types'; -export const addons: StorybookConfig['addons'] = [ - '@storybook/preset-web-components-webpack', - '@storybook/web-components', +export const addons: PresetProperty<'addons', StorybookConfig> = [ + path.dirname( + require.resolve(path.join('@storybook/preset-web-components-webpack', 'package.json')) + ), + path.dirname(require.resolve(path.join('@storybook/web-components', 'package.json'))), ]; -export const core = async (config: StorybookConfig['core']) => { +export const core: PresetProperty<'core', StorybookConfig> = async (config, options) => { + const framework = await options.presets.apply('framework'); + return { ...config, - builder: require.resolve('@storybook/builder-webpack5'), + builder: { + name: path.dirname( + require.resolve(path.join('@storybook/builder-webpack5', 'package.json')) + ) as '@storybook/builder-webpack5', + options: typeof framework === 'string' ? {} : framework.options.builder || {}, + }, }; }; diff --git a/frameworks/web-components-webpack5/src/types.ts b/frameworks/web-components-webpack5/src/types.ts index 6ff16fef86bd..d39175fa711f 100644 --- a/frameworks/web-components-webpack5/src/types.ts +++ b/frameworks/web-components-webpack5/src/types.ts @@ -1,10 +1,45 @@ -import type { Configuration } from 'webpack'; +import type { + StorybookConfig as StorybookConfigBase, + TypescriptOptions as TypescriptOptionsWebComponents, +} from '@storybook/preset-web-components-webpack'; +import type { + BuilderOptions, + StorybookConfigWebpack, + TypescriptOptions as TypescriptOptionsBuilder, +} from '@storybook/builder-webpack5'; -import type { StorybookConfig as BaseStorybookConfig } from '@storybook/preset-web-components-webpack'; +type FrameworkName = '@storybook/react-webpack5'; +type BuilderName = '@storybook/builder-webpack5'; -export type { BuilderResult } from '@storybook/preset-web-components-webpack'; +export type FrameworkOptions = { + builder?: BuilderOptions; +}; + +type StorybookConfigFramework = { + framework: + | FrameworkName + | { + name: FrameworkName; + options: FrameworkOptions; + }; + core?: StorybookConfigBase['core'] & { + builder?: + | BuilderName + | { + name: BuilderName; + options: BuilderOptions; + }; + }; + typescript?: Partial & + StorybookConfigBase['typescript']; +}; /** * The interface for Storybook configuration in `main.ts` files. */ -export type StorybookConfig = BaseStorybookConfig; +export type StorybookConfig = Omit< + StorybookConfigBase, + keyof StorybookConfigWebpack | keyof StorybookConfigFramework +> & + StorybookConfigWebpack & + StorybookConfigFramework; diff --git a/frameworks/web-components-webpack5/types-6-0.d.ts b/frameworks/web-components-webpack5/types-6-0.d.ts deleted file mode 100644 index 408fe71eecba..000000000000 --- a/frameworks/web-components-webpack5/types-6-0.d.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './dist/types/client/preview/types-6-0.d'; diff --git a/frameworks/web-components-webpack5/types-7-0.d.ts b/frameworks/web-components-webpack5/types-7-0.d.ts deleted file mode 100644 index e3503ed86e68..000000000000 --- a/frameworks/web-components-webpack5/types-7-0.d.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './dist/types/client/preview/types-7-0.d'; diff --git a/lib/addons/src/types.ts b/lib/addons/src/types.ts index 0b518cff7310..98597a91a875 100644 --- a/lib/addons/src/types.ts +++ b/lib/addons/src/types.ts @@ -76,6 +76,8 @@ export type StorySortParameter = StorySortComparator | StorySortObjectParameter; export type StorySortComparatorV7 = Comparator; export type StorySortParameterV7 = StorySortComparatorV7 | StorySortObjectParameter; +// TODO: remove all these types, they belong in the renderer and csf-package + export interface OptionsParameter extends Object { storySort?: StorySortParameter; theme?: { @@ -94,7 +96,8 @@ export interface Parameters { [key: string]: any; } -export type StoryContext = StoryContextForFramework; +export type StoryContext = + StoryContextForFramework; export type StoryContextUpdate = Partial; type ReturnTypeFramework = { component: any; storyResult: ReturnType }; diff --git a/lib/builder-webpack5/src/preview/base-webpack.config.ts b/lib/builder-webpack5/src/preview/base-webpack.config.ts index 6a85c2a67112..26e871ca0c20 100644 --- a/lib/builder-webpack5/src/preview/base-webpack.config.ts +++ b/lib/builder-webpack5/src/preview/base-webpack.config.ts @@ -1,6 +1,7 @@ import { logger } from '@storybook/node-logger'; -import type { Options, CoreConfig, Webpack5BuilderConfig } from '@storybook/core-common'; +import type { Options, CoreConfig } from '@storybook/core-common'; import type { Configuration } from 'webpack'; +import type { BuilderOptions } from '../types'; export async function createDefaultWebpackConfig( storybookBaseConfig: Configuration, @@ -45,7 +46,10 @@ export async function createDefaultWebpackConfig( const isProd = storybookBaseConfig.mode !== 'development'; const coreOptions = await options.presets.apply('core'); - const builderOptions = (coreOptions.builder as Webpack5BuilderConfig)?.options || {}; + const builderOptions: BuilderOptions = + typeof coreOptions.builder === 'string' + ? {} + : coreOptions.builder?.options || ({} as BuilderOptions); const cacheConfig = builderOptions.fsCache ? { cache: { type: 'filesystem' as const } } : {}; const lazyCompilationConfig = builderOptions.lazyCompilation && !isProd ? { lazyCompilation: { entries: false } } : {}; diff --git a/lib/builder-webpack5/src/preview/iframe-webpack.config.ts b/lib/builder-webpack5/src/preview/iframe-webpack.config.ts index 5c69b8565bc4..118328be96e8 100644 --- a/lib/builder-webpack5/src/preview/iframe-webpack.config.ts +++ b/lib/builder-webpack5/src/preview/iframe-webpack.config.ts @@ -9,7 +9,7 @@ import TerserWebpackPlugin from 'terser-webpack-plugin'; import VirtualModulePlugin from 'webpack-virtual-modules'; import ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin'; -import type { Options, CoreConfig, Webpack5BuilderConfig } from '@storybook/core-common'; +import type { Options, CoreConfig } from '@storybook/core-common'; import { stringifyProcessEnvs, handlebars, @@ -19,7 +19,7 @@ import { loadPreviewOrConfigFile, } from '@storybook/core-common'; import { toRequireContextString, toImportFn } from '@storybook/core-webpack'; -import type { TypescriptOptions } from '../types'; +import type { BuilderOptions, TypescriptOptions } from '../types'; import { createBabelLoader } from './babel-loader-preview'; const storybookPaths: Record = { @@ -85,6 +85,8 @@ export default async ( const bodyHtmlSnippet = await presets.apply('previewBody'); const template = await presets.apply('previewMainTemplate'); const coreOptions = await presets.apply('core'); + const builderOptions: BuilderOptions = + typeof coreOptions.builder === 'string' ? {} : coreOptions.builder?.options || {}; const configs = [ ...(await presets.apply('config', [], options)), @@ -102,8 +104,7 @@ export default async ( const storiesFilename = 'storybook-stories.js'; const storiesPath = path.resolve(path.join(workingDir, storiesFilename)); - const needPipelinedImport = - !!(coreOptions.builder as Webpack5BuilderConfig).options?.lazyCompilation && !isProd; + const needPipelinedImport = !!builderOptions.lazyCompilation && !isProd; virtualModuleMapping[storiesPath] = toImportFn(stories, { needPipelinedImport }); const configEntryPath = path.resolve(path.join(workingDir, 'storybook-config-entry.js')); virtualModuleMapping[configEntryPath] = handlebars( @@ -206,7 +207,7 @@ export default async ( CONFIG_TYPE: configType, LOGLEVEL: logLevel, FRAMEWORK_OPTIONS: frameworkOptions, - CHANNEL_OPTIONS: coreOptions?.channelOptions, + CHANNEL_OPTIONS: coreOptions.channelOptions, FEATURES: features, PREVIEW_URL: previewUrl, STORIES: stories.map((specifier) => ({ diff --git a/lib/builder-webpack5/src/types.ts b/lib/builder-webpack5/src/types.ts index 69b7e67ea8e4..6b13b02adf99 100644 --- a/lib/builder-webpack5/src/types.ts +++ b/lib/builder-webpack5/src/types.ts @@ -1,36 +1,25 @@ -import type ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin'; -import type { PluginOptions } from '@storybook/react-docgen-typescript-plugin'; import type { Configuration, Stats } from 'webpack'; import type { Options, - TypescriptOptions as BaseTypescriptOptions, - BuilderResult as BaseBuilderResult, -} from '@storybook/core-common'; + BuilderResult as BuilderResultBase, + StorybookConfig, +} from '@storybook/core-webpack'; + +import type ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin'; + +type TypeScriptOptionsBase = Required['typescript']; /** * Options for TypeScript usage within Storybook. */ -export interface TypescriptOptions extends BaseTypescriptOptions { +export interface TypescriptOptions extends TypeScriptOptionsBase { /** * Configures `fork-ts-checker-webpack-plugin` */ checkOptions?: ForkTsCheckerWebpackPlugin['options']; - /** - * Sets the type of Docgen when working with React and TypeScript - * - * @default `'react-docgen-typescript'` - */ - reactDocgen: 'react-docgen-typescript' | 'react-docgen' | false; - /** - * Configures `react-docgen-typescript-plugin` - * - * @default - * @see https://github.com/storybookjs/storybook/blob/next/lib/builder-webpack5/src/config/defaults.js#L4-L6 - */ - reactDocgenTypescriptOptions: PluginOptions; } -export interface StorybookWebpackConfig { +export interface StorybookConfigWebpack extends Pick { /** * Modify or return a custom Webpack config after the Storybook's default configuration * has run (mostly used by addons). @@ -46,6 +35,11 @@ export interface StorybookWebpackConfig { ) => Configuration | Promise; } -export interface BuilderResult extends BaseBuilderResult { +export type BuilderOptions = { + fsCache?: boolean; + lazyCompilation?: boolean; +}; + +export interface BuilderResult extends BuilderResultBase { stats?: Stats; } diff --git a/lib/cli/src/frameworks/angular/Button.stories.ts b/lib/cli/src/frameworks/angular/Button.stories.ts index 948fd68f493d..8a83fd736fc3 100644 --- a/lib/cli/src/frameworks/angular/Button.stories.ts +++ b/lib/cli/src/frameworks/angular/Button.stories.ts @@ -1,5 +1,5 @@ // also exported from '@storybook/angular' if you can deal with breaking changes in 6.1 -import { Story, Meta } from '@storybook/angular/types-6-0'; +import type { Meta, StoryFn } from '@storybook/angular'; import Button from './button.component'; // More on default export: https://storybook.js.org/docs/angular/writing-stories/introduction#default-export @@ -13,7 +13,7 @@ export default { } as Meta; // More on component templates: https://storybook.js.org/docs/angular/writing-stories/introduction#using-args -const Template: Story