Merge pull request #18504 from storybookjs/future/SB-444

TypeScript: Re-structure types for frameworks and presets

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';
 

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<MyComponent> = (args: MyComponent) => ({
+const Template: StoryFn<MyComponent> = (args: MyComponent) => ({
   props: args,
 });
 

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<typeof Button> = {
   /* 👇 The title prop is optional.

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: {},
 });
 

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,
 });
 

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,

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,
 });
 ```

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'),

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';
 

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;
 

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';
 

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,

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,
 });
 

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: `<app-button>hello</<app-button>`,
 });
 ```

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,
 });
 

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';
 

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,22 +14,22 @@ export default {
   component: Button,
 };
 
-export const Primary: Story = () => ({
+export const Primary: StoryFn = () => ({
   props: {
     label: 'Button',
     backgroundColor: '#ff0',
   },
 });
 
 
-export const Secondary: Story = () => ({
+export const Secondary: StoryFn = () => ({
   props: {
     label: '😄👍😍💯',
     backgroundColor: '#ff0',
   },
 });
 
-export const Tertiary: Story = () => ({
+export const Tertiary: StoryFn = () => ({
   props: {
     label: '📚📕📈🤓',
     backgroundColor: '#ff0',

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,

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: `
     <form>
       <Checkbox id="Unchecked" label="Unchecked" />

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';
 

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: {},
 });