diff --git a/docs/faq.md b/docs/faq.md
index 4dd9e124450f..b459660a03e7 100644
--- a/docs/faq.md
+++ b/docs/faq.md
@@ -426,7 +426,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.
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<typeof App>;
 
-const Template: ComponentStory<typeof App> = () => <App />;
+const Template: ComponentStoryFn<typeof App> = () => <App />;
 
 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<typeof ButtonGroup>;
 
-const Template: ComponentStory<typeof ButtonGroup> = (args) => <ButtonGroup {...args} />;
+const Template: ComponentStoryFn<typeof ButtonGroup> = (args) => <ButtonGroup {...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<typeof Button>;
 
-export const Basic: ComponentStory<typeof Button> = () => <Button label="Hello" onClick={action('clicked')} />;
+export const Basic: ComponentStoryFn<typeof Button> = () => <Button label="Hello" onClick={action('clicked')} />;
 ```
\ No newline at end of file
diff --git a/docs/snippets/react/button-story-decorator.story-function-ts.ts.mdx b/docs/snippets/react/button-story-decorator.story-function-ts.ts.mdx
index 507a41844ceb..af0d5e457e06 100644
--- a/docs/snippets/react/button-story-decorator.story-function-ts.ts.mdx
+++ b/docs/snippets/react/button-story-decorator.story-function-ts.ts.mdx
@@ -3,7 +3,7 @@
 
 import React from 'react';
 
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import type { ComponentStoryFn, ComponentMeta } from '@storybook/react';
 
 export default {
   /* 👇 The title prop is optional.
@@ -14,7 +14,7 @@ export default {
   component: Button,
 } as ComponentMeta<typeof Button>;
 
-const Template: ComponentStory<typeof Button> = (args) => <Button {...args} />;
+const Template: ComponentStoryFn<typeof Button> = (args) => <Button {...args} />;
 
 export const Primary = Template.bind({});
 Primary.decorators = [(Story) => <div style={{ margin: '3em' }}>{Story()}</div>];
diff --git a/docs/snippets/react/button-story-decorator.ts.mdx b/docs/snippets/react/button-story-decorator.ts.mdx
index 48ed75e585e6..4ff57779f04b 100644
--- a/docs/snippets/react/button-story-decorator.ts.mdx
+++ b/docs/snippets/react/button-story-decorator.ts.mdx
@@ -3,7 +3,7 @@
 
 import React from 'react';
 
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import type { ComponentStoryFn, ComponentMeta } from '@storybook/react';
 
 export default {
   /* 👇 The title prop is optional.
@@ -14,7 +14,7 @@ export default {
   component: Button,
 } as ComponentMeta<typeof Button>;
 
-const Template: ComponentStory<typeof Button> = (args) => <Button {...args} />;
+const Template: ComponentStoryFn<typeof Button> = (args) => <Button {...args} />;
 
 export const Primary = Template.bind({});
 Primary.decorators = [
diff --git a/docs/snippets/react/button-story-default-docs-code.ts.mdx b/docs/snippets/react/button-story-default-docs-code.ts.mdx
index 13abf6e69b8a..bd6f1dc8c549 100644
--- a/docs/snippets/react/button-story-default-docs-code.ts.mdx
+++ b/docs/snippets/react/button-story-default-docs-code.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';
 
@@ -25,7 +25,7 @@ export default {
   },
 } as ComponentMeta<typeof Button>;
 
-export const ExampleStory: ComponentStory<typeof Button> = (args) => {
+export const ExampleStory: ComponentStoryFn<typeof Button> = (args) => {
   //👇 Destructure the label from the args object
   const { label } = args;
 
diff --git a/docs/snippets/react/button-story-rename-story.ts.mdx b/docs/snippets/react/button-story-rename-story.ts.mdx
index 368c94a2a84b..d762a2b424e6 100644
--- a/docs/snippets/react/button-story-rename-story.ts.mdx
+++ b/docs/snippets/react/button-story-rename-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 { Button } from './Button';
 
@@ -16,6 +16,6 @@ export default {
   component: Button,
 } as ComponentMeta<typeof Button>;
 
-export const Primary: ComponentStory<typeof Button> = () => <Button primary label="Button"/>;
+export const Primary: ComponentStoryFn<typeof Button> = () => <Button primary label="Button"/>;
 Primary.storyName = 'I am the primary';
 ```
\ No newline at end of file
diff --git a/docs/snippets/react/button-story-using-args.ts.mdx b/docs/snippets/react/button-story-using-args.ts.mdx
index 60590f4dfe21..2f6086beacc2 100644
--- a/docs/snippets/react/button-story-using-args.ts.mdx
+++ b/docs/snippets/react/button-story-using-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 } from './Button';
 
@@ -17,7 +17,7 @@ export default {
 } as ComponentMeta<typeof Button>;
 
 //👇 We create a “template” of how args map to rendering
-const Template: ComponentStory<typeof Button> = (args) => <Button {...args} />;
+const Template: ComponentStoryFn<typeof Button> = (args) => <Button {...args} />;
 
 //👇 Each story then reuses that template
 export const Primary = Template.bind({});
diff --git a/docs/snippets/react/button-story-with-addon-example.ts.mdx b/docs/snippets/react/button-story-with-addon-example.ts.mdx
index 8c1fd7d10081..63f7deb8eed9 100644
--- a/docs/snippets/react/button-story-with-addon-example.ts.mdx
+++ b/docs/snippets/react/button-story-with-addon-example.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';
 
@@ -22,5 +22,5 @@ export default {
   },
 } as ComponentMeta<typeof Button>;
 
-const Basic: ComponentStory<typeof Button> = () => <Button>hello</Button>;
+const Basic: ComponentStoryFn<typeof Button> = () => <Button>hello</Button>;
 ```
\ 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<typeof Button>;
 
 //👇 We create a “template” of how args map to rendering
-const Template: ComponentStory<typeof Button> = (args) => <Button {...args} />;
+const Template: ComponentStoryFn<typeof Button> = (args) => <Button {...args} />;
 
 export const Primary = Template.bind({});
 
diff --git a/docs/snippets/react/button-story-with-emojis.ts.mdx b/docs/snippets/react/button-story-with-emojis.ts.mdx
index 67c84733adf7..dc44839e4766 100644
--- a/docs/snippets/react/button-story-with-emojis.ts.mdx
+++ b/docs/snippets/react/button-story-with-emojis.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';
 
@@ -16,15 +16,15 @@ export default {
   component: Button,
 } as ComponentMeta<typeof Button>;
 
-export const Primary: ComponentStory<typeof Button> = () => (
+export const Primary: ComponentStoryFn<typeof Button> = () => (
   <Button backgroundColor="#ff0" label="Button" />
 );
 
-export const Secondary: ComponentStory<typeof Button> = () => (
+export const Secondary: ComponentStoryFn<typeof Button> = () => (
   <Button backgroundColor="#ff0" label="😄👍😍💯" />
 );
 
-export const Tertiary: ComponentStory<typeof Button> = () => (
+export const Tertiary: ComponentStoryFn<typeof Button> = () => (
   <Button backgroundColor="#ff0" label="📚📕📈🤓" />
 );
 ```
\ No newline at end of file
diff --git a/docs/snippets/react/button-story.ts.mdx b/docs/snippets/react/button-story.ts.mdx
index 50a95e304e45..de79f8324d82 100644
--- a/docs/snippets/react/button-story.ts.mdx
+++ b/docs/snippets/react/button-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 { Button } from './Button';
 
@@ -16,5 +16,5 @@ export default {
   component: Button,
 } as ComponentMeta<typeof Button>;
 
-export const Primary: ComponentStory<typeof Button> = () => <Button primary>Button</Button>;
+export const Primary: ComponentStoryFn<typeof Button> = () => <Button primary>Button</Button>;
 ```
\ 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<typeof Checkbox>;
 
-export const allCheckboxes: ComponentStory<typeof Checkbox> = () => (
+export const allCheckboxes: ComponentStoryFn<typeof Checkbox> = () => (
   <form>
     <Checkbox id="Unchecked" label="Unchecked" />
     <Checkbox id="Checked" label="Checked" checked />
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<typeof YourComponent>;
 
-const Template: ComponentStory<typeof YourComponent> = ({ propertyA, propertyB, ...rest }) => {
+const Template: ComponentStoryFn<typeof YourComponent> = ({ 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<typeof YourComponent>;
 
 // More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
-const Template: ComponentStory<typeof MyComponent> = () => <MyComponent />;
+const Template: ComponentStoryFn<typeof MyComponent> = () => <MyComponent />;
 
 export const Example = Template.bind({});
 Example.parameters = {
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<typeof Button>;
 
 
-const Template: ComponentStory<typeof Button> = (args) => <Button {...args} />;
+const Template: ComponentStoryFn<typeof Button> = (args) => <Button {...args} />;
 
 // This is an accessible story
 export const Accessible = Template.bind({});
diff --git a/docs/snippets/react/list-story-expanded.ts.mdx b/docs/snippets/react/list-story-expanded.ts.mdx
index 78f814a4add9..94937dcafdfa 100644
--- a/docs/snippets/react/list-story-expanded.ts.mdx
+++ b/docs/snippets/react/list-story-expanded.ts.mdx
@@ -3,7 +3,7 @@
 
 import React from 'react';
 
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import type { ComponentStoryFn, ComponentMeta } from '@storybook/react';
 
 import { List } from './List';
 import { ListItem } from './ListItem';
@@ -17,15 +17,15 @@ export default {
   component: List,
 } as ComponentMeta<typeof List>;
 
-export const Empty: ComponentStory<typeof List> = (args) => <List {...args} />;
+export const Empty: ComponentStoryFn<typeof List> = (args) => <List {...args} />;
 
-export const OneItem: ComponentStory<typeof List> = (args) => (
+export const OneItem: ComponentStoryFn<typeof List> = (args) => (
   <List {...args}>
     <ListItem />
   </List>
 );
 
-export const ManyItems: ComponentStory<typeof List> = (args) => (
+export const ManyItems: ComponentStoryFn<typeof List> = (args) => (
   <List {...args}>
     <ListItem />
     <ListItem />
diff --git a/docs/snippets/react/list-story-reuse-data.ts.mdx b/docs/snippets/react/list-story-reuse-data.ts.mdx
index 231dfa5662e9..b569b5179a81 100644
--- a/docs/snippets/react/list-story-reuse-data.ts.mdx
+++ b/docs/snippets/react/list-story-reuse-data.ts.mdx
@@ -3,7 +3,7 @@
 
 import React from 'react';
 
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import type { ComponentStoryFn, ComponentMeta } from '@storybook/react';
 
 import { List } from './List';
 import { ListItem } from './ListItem';
@@ -20,7 +20,7 @@ export default {
   component: List,
 } as ComponentMeta<typeof List>;
 
-export const ManyItems: ComponentStory<typeof List> = (args) => (
+export const ManyItems: ComponentStoryFn<typeof List> = (args) => (
   <List {...args}>
     <Selected {...ListItemStories.Selected.args} />
     <Unselected {...ListItemStories.Unselected.args} />
diff --git a/docs/snippets/react/list-story-starter.ts.mdx b/docs/snippets/react/list-story-starter.ts.mdx
index 608c8383fc68..bfa895ead697 100644
--- a/docs/snippets/react/list-story-starter.ts.mdx
+++ b/docs/snippets/react/list-story-starter.ts.mdx
@@ -3,7 +3,7 @@
 
 import React from 'react';
 
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import type { ComponentStoryFn, ComponentMeta } from '@storybook/react';
 
 import { List } from './List';
 
@@ -17,5 +17,5 @@ export default {
 } as ComponentMeta<typeof List>;
 
 //👇 Always an empty list, not super interesting
-const Template: ComponentStory<typeof List> = (args) => <List {...args} />;
+const Template: ComponentStoryFn<typeof List> = (args) => <List {...args} />;
 ```
\ No newline at end of file
diff --git a/docs/snippets/react/list-story-template.ts.mdx b/docs/snippets/react/list-story-template.ts.mdx
index b8b8e736411d..9887cb195560 100644
--- a/docs/snippets/react/list-story-template.ts.mdx
+++ b/docs/snippets/react/list-story-template.ts.mdx
@@ -3,7 +3,7 @@
 
 import React from 'react';
 
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import type { ComponentStoryFn, ComponentMeta } from '@storybook/react';
 
 import { List } from './List';
 import { ListItem } from './ListItem';
@@ -20,7 +20,7 @@ export default {
   component: List,
 } as ComponentMeta<typeof List>;
 
-const ListTemplate: ComponentStory<typeof ButtonGroup> = (args) => {
+const ListTemplate: ComponentStoryFn<typeof ButtonGroup> = (args) => {
   const { items } = args;
   return (
     <List>
diff --git a/docs/snippets/react/list-story-unchecked.ts.mdx b/docs/snippets/react/list-story-unchecked.ts.mdx
index 07da8038142d..c67fa3df2ac8 100644
--- a/docs/snippets/react/list-story-unchecked.ts.mdx
+++ b/docs/snippets/react/list-story-unchecked.ts.mdx
@@ -3,7 +3,7 @@
 
 import React from 'react';
 
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import type { ComponentStoryFn, ComponentMeta } from '@storybook/react';
 
 import { List } from './List';
 
@@ -19,7 +19,7 @@ export default {
   component: List,
 } as ComponentMeta<typeof List>;
 
-const OneItem: ComponentStory<typeof List> = (args) => (
+const OneItem: ComponentStoryFn<typeof List> = (args) => (
   <List {...args}>
     <Unchecked {...Unchecked.args} />
   </List>
diff --git a/docs/snippets/react/list-story-with-subcomponents.ts.mdx b/docs/snippets/react/list-story-with-subcomponents.ts.mdx
index 5c0b520bf1df..b10b65277c25 100644
--- a/docs/snippets/react/list-story-with-subcomponents.ts.mdx
+++ b/docs/snippets/react/list-story-with-subcomponents.ts.mdx
@@ -3,7 +3,7 @@
 
 import React from 'react';
 
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import type { ComponentStoryFn, ComponentMeta } from '@storybook/react';
 
 import { List } from './List';
 import { ListItem } from './ListItem';
@@ -18,9 +18,9 @@ export default {
   subcomponents: { ListItem }, //👈 Adds the ListItem component as a subcomponent
 } as ComponentMeta<typeof List>;
 
-const Empty: ComponentStory<typeof List> = (args) => <List {...args} />;
+const Empty: ComponentStoryFn<typeof List> = (args) => <List {...args} />;
 
-const OneItem: ComponentStory<typeof List> = (args) =>(
+const OneItem: ComponentStoryFn<typeof List> = (args) =>(
   <List {...args}>
     <ListItem />
   </List>
diff --git a/docs/snippets/react/list-story-with-unchecked-children.ts.mdx b/docs/snippets/react/list-story-with-unchecked-children.ts.mdx
index f77d847ad0dc..2e67d61302ca 100644
--- a/docs/snippets/react/list-story-with-unchecked-children.ts.mdx
+++ b/docs/snippets/react/list-story-with-unchecked-children.ts.mdx
@@ -3,7 +3,7 @@
 
 import React from 'react';
 
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import type { ComponentStoryFn, ComponentMeta } from '@storybook/react';
 
 import { List } from './List';
 
@@ -19,7 +19,7 @@ export default {
   component: List,
 } as ComponentMeta<typeof List>;
 
-const Template: ComponentStory<typeof List> = (args) => <List {...args} />;
+const Template: ComponentStoryFn<typeof List> = (args) => <List {...args} />;
 
 export const OneItem = Template.bind({});
 OneItem.args = {
diff --git a/docs/snippets/react/login-form-with-play-function.ts.mdx b/docs/snippets/react/login-form-with-play-function.ts.mdx
index 05b3e8395739..bc4b8ffe2563 100644
--- a/docs/snippets/react/login-form-with-play-function.ts.mdx
+++ b/docs/snippets/react/login-form-with-play-function.ts.mdx
@@ -3,7 +3,7 @@
 
 import React from 'react';
 
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import type { ComponentStoryFn, ComponentMeta } from '@storybook/react';
 
 import { within, userEvent } from '@storybook/testing-library';
 
@@ -20,7 +20,7 @@ export default {
   component: LoginForm,
 } as ComponentMeta<typeof LoginForm>;
 
-const Template: ComponentStory<typeof LoginForm> = (args) => <LoginForm {...args} />;
+const Template: ComponentStoryFn<typeof LoginForm> = (args) => <LoginForm {...args} />;
 
 export const EmptyForm = Template.bind({});
 
diff --git a/docs/snippets/react/my-component-play-function-alt-queries.ts.mdx b/docs/snippets/react/my-component-play-function-alt-queries.ts.mdx
index 753b76843dce..3d9c4b6ed36c 100644
--- a/docs/snippets/react/my-component-play-function-alt-queries.ts.mdx
+++ b/docs/snippets/react/my-component-play-function-alt-queries.ts.mdx
@@ -3,7 +3,7 @@
 
 import React from 'react';
 
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import type { ComponentStoryFn, ComponentMeta } from '@storybook/react';
 
 import { screen, userEvent } from '@storybook/testing-library';
 
@@ -18,7 +18,7 @@ export default {
   component: MyComponent,
 } as ComponentMeta<typeof MyComponent>;
 
-const Template: ComponentStory<typeof MyComponent> = (args) => <MyComponent {...args} />;
+const Template: ComponentStoryFn<typeof MyComponent> = (args) => <MyComponent {...args} />;
 
 export const ExampleWithRole = Template.bind({});
 ExampleWithRole.play = async () => {
diff --git a/docs/snippets/react/my-component-play-function-composition.ts.mdx b/docs/snippets/react/my-component-play-function-composition.ts.mdx
index 963c4333adb2..5e4d8a3694ab 100644
--- a/docs/snippets/react/my-component-play-function-composition.ts.mdx
+++ b/docs/snippets/react/my-component-play-function-composition.ts.mdx
@@ -3,7 +3,7 @@
 
 import React from 'react';
 
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import type { ComponentStoryFn, ComponentMeta } from '@storybook/react';
 
 import { screen, userEvent } from '@storybook/testing-library';
 
@@ -18,7 +18,7 @@ export default {
   component: MyComponent,
 } as ComponentMeta<typeof MyComponent>;
 
-const Template: ComponentStory<typeof MyComponent> = (args) => <MyComponent {...args} />;
+const Template: ComponentStoryFn<typeof MyComponent> = (args) => <MyComponent {...args} />;
 
 export const FirstStory = Template.bind({});
 FirstStory.play = async () => {
diff --git a/docs/snippets/react/my-component-play-function-waitfor.ts.mdx b/docs/snippets/react/my-component-play-function-waitfor.ts.mdx
index 9244723af719..9d0dab2a717c 100644
--- a/docs/snippets/react/my-component-play-function-waitfor.ts.mdx
+++ b/docs/snippets/react/my-component-play-function-waitfor.ts.mdx
@@ -3,7 +3,7 @@
 
 import React from 'react';
 
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import type { ComponentStoryFn, ComponentMeta } from '@storybook/react';
 
 import { screen, userEvent, waitFor } from '@storybook/testing-library';
 
@@ -18,7 +18,7 @@ export default {
   component: MyComponent,
 } as ComponentMeta<typeof MyComponent>;
 
-const Template: ComponentStory<typeof MyComponent> = (args) => <MyComponent {...args} />;
+const Template: ComponentStoryFn<typeof MyComponent> = (args) => <MyComponent {...args} />;
 
 export const ExampleAsyncStory = Template.bind({});
 ExampleAsyncStory.play = async () => {
diff --git a/docs/snippets/react/my-component-play-function-with-canvas.ts.mdx b/docs/snippets/react/my-component-play-function-with-canvas.ts.mdx
index 30b939abf272..7b7694d3ad57 100644
--- a/docs/snippets/react/my-component-play-function-with-canvas.ts.mdx
+++ b/docs/snippets/react/my-component-play-function-with-canvas.ts.mdx
@@ -3,7 +3,7 @@
 
 import React from 'react';
 
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import type { ComponentStoryFn, ComponentMeta } from '@storybook/react';
 
 import { userEvent, within } from '@storybook/testing-library';
 
@@ -18,7 +18,7 @@ export default {
   component: MyComponent,
 } as ComponentMeta<typeof MyComponent>;
 
-const Template: ComponentStory<typeof MyComponent> = (args) => <MyComponent {...args} />;
+const Template: ComponentStoryFn<typeof MyComponent> = (args) => <MyComponent {...args} />;
 
 export const ExampleStory = Template.bind({});
 ExampleStory.play = async ({ canvasElement }) => {
diff --git a/docs/snippets/react/my-component-play-function-with-clickevent.ts.mdx b/docs/snippets/react/my-component-play-function-with-clickevent.ts.mdx
index 876c1cc32015..f438f5b30a63 100644
--- a/docs/snippets/react/my-component-play-function-with-clickevent.ts.mdx
+++ b/docs/snippets/react/my-component-play-function-with-clickevent.ts.mdx
@@ -3,7 +3,7 @@
 
 import React from 'react';
 
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import type { ComponentStoryFn, ComponentMeta } from '@storybook/react';
 
 import { fireEvent, screen, userEvent } from '@storybook/testing-library';
 
@@ -18,7 +18,7 @@ export default {
   component: MyComponent,
 } as ComponentMeta<typeof MyComponent>;
 
-const Template: ComponentStory<typeof MyComponent> = (args) => <MyComponent {...args} />;
+const Template: ComponentStoryFn<typeof MyComponent> = (args) => <MyComponent {...args} />;
 
 export const ClickExample = Template.bind({});
 ClickExample.play = async () => {
diff --git a/docs/snippets/react/my-component-play-function-with-delay.ts.mdx b/docs/snippets/react/my-component-play-function-with-delay.ts.mdx
index 0d806f32d210..13025561be87 100644
--- a/docs/snippets/react/my-component-play-function-with-delay.ts.mdx
+++ b/docs/snippets/react/my-component-play-function-with-delay.ts.mdx
@@ -3,7 +3,7 @@
 
 import React from 'react';
 
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import type { ComponentStoryFn, ComponentMeta } from '@storybook/react';
 
 import { screen, userEvent } from '@storybook/testing-library';
 
@@ -18,7 +18,7 @@ export default {
   component: MyComponent,
 } as ComponentMeta<typeof MyComponent>;
 
-const Template: ComponentStory<typeof MyComponent> = (args) => <MyComponent {...args} />;
+const Template: ComponentStoryFn<typeof MyComponent> = (args) => <MyComponent {...args} />;
 
 export const DelayedStory = Template.bind({});
 DelayedStory.play = async () => {
diff --git a/docs/snippets/react/my-component-play-function-with-selectevent.ts.mdx b/docs/snippets/react/my-component-play-function-with-selectevent.ts.mdx
index 2bc79c8dd1fa..2003f5bd0191 100644
--- a/docs/snippets/react/my-component-play-function-with-selectevent.ts.mdx
+++ b/docs/snippets/react/my-component-play-function-with-selectevent.ts.mdx
@@ -3,7 +3,7 @@
 
 import React from 'react';
 
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import type { ComponentStoryFn, ComponentMeta } from '@storybook/react';
 
 import { userEvent, screen } from '@storybook/testing-library';
 
@@ -23,7 +23,7 @@ function sleep(ms: number) {
   return new Promise((resolve) => setTimeout(resolve, ms));
 }
 
-const Template: ComponentStory<typeof MyComponent> = (args) => <MyComponent {...args} />;
+const Template: ComponentStoryFn<typeof MyComponent> = (args) => <MyComponent {...args} />;
 
 export const ExampleChangeEvent = Template.bind({});
 ExampleChangeEvent.play = async () => {
diff --git a/docs/snippets/react/my-component-story-basic-and-props.ts.mdx b/docs/snippets/react/my-component-story-basic-and-props.ts.mdx
index 62acb5a7bc20..76e113365734 100644
--- a/docs/snippets/react/my-component-story-basic-and-props.ts.mdx
+++ b/docs/snippets/react/my-component-story-basic-and-props.ts.mdx
@@ -3,7 +3,7 @@
 
 import React from 'react';
 
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import type { ComponentStoryFn, ComponentMeta } from '@storybook/react';
 
 import { MyComponent } from './MyComponent';
 
@@ -16,7 +16,7 @@ export default {
   component: MyComponent,
 } as ComponentMeta<typeof MyComponent>;
 
-export const Basic: ComponentStory<typeof MyComponent> = () => <MyComponent/>;
+export const Basic: ComponentStoryFn<typeof MyComponent> = () => <MyComponent/>;
 
-export const WithProp: ComponentStory<typeof MyComponent> = () => <MyComponent prop="value"/>;
+export const WithProp: ComponentStoryFn<typeof MyComponent> = () => <MyComponent prop="value"/>;
 ```
\ No newline at end of file
diff --git a/docs/snippets/react/my-component-story-configure-viewports.ts.mdx b/docs/snippets/react/my-component-story-configure-viewports.ts.mdx
index 8ab4c0a95185..b767e68aeb8b 100644
--- a/docs/snippets/react/my-component-story-configure-viewports.ts.mdx
+++ b/docs/snippets/react/my-component-story-configure-viewports.ts.mdx
@@ -3,7 +3,7 @@
 
 import React from 'react';
 
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import type { ComponentStoryFn, ComponentMeta } from '@storybook/react';
 
 import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
 
@@ -27,7 +27,7 @@ export default {
   },
 } as ComponentMeta<typeof MyComponent>;
 
-export const MyStory: ComponentStory<typeof MyComponent> = () => <MyComponent />;
+export const MyStory: ComponentStoryFn<typeof MyComponent> = () => <MyComponent />;
 MyStory.parameters = {
   viewport: {
     defaultViewport: 'iphonex',
diff --git a/docs/snippets/react/my-component-story-with-nonstory.ts.mdx b/docs/snippets/react/my-component-story-with-nonstory.ts.mdx
index b3f0a65f7897..6362a1b5133e 100644
--- a/docs/snippets/react/my-component-story-with-nonstory.ts.mdx
+++ b/docs/snippets/react/my-component-story-with-nonstory.ts.mdx
@@ -3,7 +3,7 @@
 
 import React from 'react';
 
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import type { ComponentStoryFn, ComponentMeta } from '@storybook/react';
 
 import { MyComponent } from './MyComponent';
 
@@ -23,7 +23,7 @@ export default {
 export const simpleData = { foo: 1, bar: 'baz' };
 export const complexData = { foo: 1, foobar: { bar: 'baz', baz: someData } };
 
-const Template: ComponentStory<typeof MyComponent> = (args) => <MyComponent {...args} />;
+const Template: ComponentStoryFn<typeof MyComponent> = (args) => <MyComponent {...args} />;
 
 export const SimpleStory = Template.bind({});
 SimpleStory.args = {
diff --git a/docs/snippets/react/my-component-with-env-variables.ts.mdx b/docs/snippets/react/my-component-with-env-variables.ts.mdx
index d92592bccfbe..78be63e0739b 100644
--- a/docs/snippets/react/my-component-with-env-variables.ts.mdx
+++ b/docs/snippets/react/my-component-with-env-variables.ts.mdx
@@ -3,7 +3,7 @@
 
 import React from 'react';
 
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import type { ComponentStoryFn, ComponentMeta } from '@storybook/react';
 
 import { MyComponent } from './MyComponent';
 
@@ -16,7 +16,7 @@ export default {
   component: MyComponent,
 } as ComponentMeta<typeof MyComponent>;
 
-const Template: ComponentStory<typeof MyComponent> = (args) => <MyComponent {...args} />;
+const Template: ComponentStoryFn<typeof MyComponent> = (args) => <MyComponent {...args} />;
 
 export const ExampleStory = Template.bind({});
 ExampleStory.args = {
diff --git a/docs/snippets/react/page-story-slots.ts.mdx b/docs/snippets/react/page-story-slots.ts.mdx
index 46feb98468c5..d759d1029cd5 100644
--- a/docs/snippets/react/page-story-slots.ts.mdx
+++ b/docs/snippets/react/page-story-slots.ts.mdx
@@ -3,7 +3,7 @@
 
 import React from 'react';
 
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import type { ComponentStoryFn, ComponentMeta } from '@storybook/react';
 
 import { Page } from './Page';
 
@@ -16,7 +16,7 @@ export default {
   component: Page,
 } as ComponentMeta<typeof Page>;
 
-const Template: ComponentStory<typeof Page> = (args) => (
+const Template: ComponentStoryFn<typeof Page> = (args) => (
   <Page {...args}>
     <footer>{args.footer}</footer>
   </Page>
diff --git a/docs/snippets/react/page-story-with-args-composition.ts.mdx b/docs/snippets/react/page-story-with-args-composition.ts.mdx
index be960adff652..ef3620c64715 100644
--- a/docs/snippets/react/page-story-with-args-composition.ts.mdx
+++ b/docs/snippets/react/page-story-with-args-composition.ts.mdx
@@ -3,7 +3,7 @@
 
 import React from 'react';
 
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import type { ComponentStoryFn, ComponentMeta } from '@storybook/react';
 
 import { DocumentScreen } from './YourPage';
 
@@ -21,7 +21,7 @@ export default {
 } as ComponentMeta<typeof DocumentScreen>;
 
 
-const Template: ComponentStory<typeof DocumentScreen> = (args) => <DocumentScreen {...args} />;
+const Template: ComponentStoryFn<typeof DocumentScreen> = (args) => <DocumentScreen {...args} />;
 
 export const Simple = Template.bind({});
 Simple.args = {
diff --git a/docs/snippets/react/page-story.ts.mdx b/docs/snippets/react/page-story.ts.mdx
index d1757de939a6..e4fa2b78dceb 100644
--- a/docs/snippets/react/page-story.ts.mdx
+++ b/docs/snippets/react/page-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 { Page } from './Page';
 
@@ -19,7 +19,7 @@ export default {
   component: Page,
 } as ComponentMeta<typeof Page>;
 
-const Template: ComponentStory<typeof Page> = (args) => <Page {...args} />;
+const Template: ComponentStoryFn<typeof Page> = (args) => <Page {...args} />;
 
 export const LoggedIn = Template.bind({});
 LoggedIn.args = {
diff --git a/docs/snippets/react/register-component-with-play-function.ts.mdx b/docs/snippets/react/register-component-with-play-function.ts.mdx
index 31bdad97cb54..5b5172aee6d6 100644
--- a/docs/snippets/react/register-component-with-play-function.ts.mdx
+++ b/docs/snippets/react/register-component-with-play-function.ts.mdx
@@ -3,7 +3,7 @@
 
 import React from 'react';
 
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import type { ComponentStoryFn, ComponentMeta } from '@storybook/react';
 
 import { screen, userEvent } from '@storybook/testing-library';
 
@@ -18,7 +18,7 @@ export default {
   component: RegistrationForm,
 } as ComponentMeta<typeof RegistrationForm>;
 
-const Template: ComponentStory<typeof RegistrationForm> = (args) => <RegistrationForm {...args} />;
+const Template: ComponentStoryFn<typeof RegistrationForm> = (args) => <RegistrationForm {...args} />;
 
 export const FilledForm = Template.bind({});
 FilledForm.play = async () => {
diff --git a/docs/snippets/react/storybook-addon-a11y-disable.ts.mdx b/docs/snippets/react/storybook-addon-a11y-disable.ts.mdx
index 113f6fd5127a..e071b44a0014 100644
--- a/docs/snippets/react/storybook-addon-a11y-disable.ts.mdx
+++ b/docs/snippets/react/storybook-addon-a11y-disable.ts.mdx
@@ -3,7 +3,7 @@
 
 import React from 'react';
 
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import type { ComponentStoryFn, ComponentMeta } from '@storybook/react';
 
 import { MyComponent } from './MyComponent';
 
@@ -16,7 +16,7 @@ export default {
   component: MyComponent,
 } as ComponentMeta<typeof MyComponent>;
 
-const Template: ComponentStory<typeof MyComponent> = () => <MyComponent />;
+const Template: ComponentStoryFn<typeof MyComponent> = () => <MyComponent />;
 
 export const NonA11yStory = Template.bind({});
 NonA11yStory.parameters = {
diff --git a/docs/snippets/react/storybook-addon-a11y-story-config.ts.mdx b/docs/snippets/react/storybook-addon-a11y-story-config.ts.mdx
index 9ae7ea00ea79..707d66105c37 100644
--- a/docs/snippets/react/storybook-addon-a11y-story-config.ts.mdx
+++ b/docs/snippets/react/storybook-addon-a11y-story-config.ts.mdx
@@ -3,7 +3,7 @@
 
 import React from 'react';
 
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import type { ComponentStoryFn, ComponentMeta } from '@storybook/react';
 
 import { MyComponent } from './MyComponent';
 
@@ -16,7 +16,7 @@ export default {
   component: MyComponent,
 } as ComponentMeta<typeof MyComponent>;
 
-const Template: ComponentStory<typeof MyComponent> = () => <MyComponent />;
+const Template: ComponentStoryFn<typeof MyComponent> = () => <MyComponent />;
 
 export const ExampleStory = Template.bind({});
 ExampleStory.parameters = {
diff --git a/docs/snippets/react/your-component.ts.mdx b/docs/snippets/react/your-component.ts.mdx
index cabd3abcb3e7..41279159f0e6 100644
--- a/docs/snippets/react/your-component.ts.mdx
+++ b/docs/snippets/react/your-component.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 './YourComponent';
 
@@ -18,7 +18,7 @@ export default {
 } as ComponentMeta<typeof YourComponent>;
 
 //👇 We create a “template” of how args map to rendering
-const Template: ComponentStory<typeof YourComponent> = (args) => <YourComponent {...args} />;
+const Template: ComponentStoryFn<typeof YourComponent> = (args) => <YourComponent {...args} />;
 
 export const FirstStory = Template.bind({});
 
diff --git a/examples/angular-cli/.storybook/main.ts b/examples/angular-cli/.storybook/main.ts
index bbe31a987a33..c728386d3241 100644
--- a/examples/angular-cli/.storybook/main.ts
+++ b/examples/angular-cli/.storybook/main.ts
@@ -1,4 +1,4 @@
-const mainConfig: import('@storybook/angular/types').StorybookConfig = {
+const mainConfig: import('@storybook/angular').StorybookConfig = {
   stories: ['../src/stories/**/*.stories.@(ts|tsx|js|jsx|mdx)'],
   logLevel: 'debug',
   addons: [
diff --git a/examples/cra-kitchen-sink/.storybook/main.ts b/examples/cra-kitchen-sink/.storybook/main.ts
index 8809f7c45ad4..e8b0f22b4b17 100644
--- a/examples/cra-kitchen-sink/.storybook/main.ts
+++ b/examples/cra-kitchen-sink/.storybook/main.ts
@@ -1,4 +1,4 @@
-import type { StorybookConfig } from '@storybook/react-webpack5/types';
+import type { StorybookConfig } from '@storybook/react-webpack5';
 
 const path = require('path');
 
diff --git a/examples/cra-ts-essentials/.storybook/main.ts b/examples/cra-ts-essentials/.storybook/main.ts
index 0ade83b8345b..01c95af66b35 100644
--- a/examples/cra-ts-essentials/.storybook/main.ts
+++ b/examples/cra-ts-essentials/.storybook/main.ts
@@ -1,4 +1,4 @@
-import type { StorybookConfig } from '@storybook/react-webpack5/types';
+import type { StorybookConfig } from '@storybook/react-webpack5';
 
 const path = require('path');
 
diff --git a/examples/cra-ts-essentials/src/stories/0-Welcome.stories.tsx b/examples/cra-ts-essentials/src/stories/0-Welcome.stories.tsx
index 85cf2831bf31..24295d69c041 100644
--- a/examples/cra-ts-essentials/src/stories/0-Welcome.stories.tsx
+++ b/examples/cra-ts-essentials/src/stories/0-Welcome.stories.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { linkTo } from '@storybook/addon-links';
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { ComponentMeta, ComponentStoryFn } from '@storybook/react';
 import { Welcome } from './react-demo';
 
 export default {
@@ -8,7 +8,7 @@ export default {
   component: Welcome,
 } as ComponentMeta<typeof Welcome>;
 
-export const ToStorybook: ComponentStory<typeof Welcome> = () => (
+export const ToStorybook: ComponentStoryFn<typeof Welcome> = () => (
   <Welcome showApp={linkTo('Button')} />
 );
 
diff --git a/examples/cra-ts-essentials/src/stories/1-Button.stories.tsx b/examples/cra-ts-essentials/src/stories/1-Button.stories.tsx
index c13edd02cedb..6b136cba2314 100644
--- a/examples/cra-ts-essentials/src/stories/1-Button.stories.tsx
+++ b/examples/cra-ts-essentials/src/stories/1-Button.stories.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import type { ComponentStory, ComponentMeta } from '@storybook/react';
+import type { ComponentStoryFn, ComponentMeta } from '@storybook/react';
 import { Button } from './react-demo';
 
 export default {
@@ -8,7 +8,7 @@ export default {
   argTypes: { onClick: { action: 'clicked' } },
 } as ComponentMeta<typeof Button>;
 
-const Template: ComponentStory<typeof Button> = (args) => <Button {...args} />;
+const Template: ComponentStoryFn<typeof Button> = (args) => <Button {...args} />;
 
 export const Text = Template.bind({});
 Text.args = {
diff --git a/examples/cra-ts-essentials/src/stories/Button.stories.tsx b/examples/cra-ts-essentials/src/stories/Button.stories.tsx
index a6ad97180e3c..2f3d9574b300 100644
--- a/examples/cra-ts-essentials/src/stories/Button.stories.tsx
+++ b/examples/cra-ts-essentials/src/stories/Button.stories.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Story, Meta } from '@storybook/react';
+import type { StoryFn, Meta } from '@storybook/react';
 
 import { Button, ButtonProps } from './Button';
 
@@ -12,7 +12,7 @@ export default {
   },
 } as Meta;
 
-const Template: Story<ButtonProps> = (args) => <Button {...args} />;
+const Template: StoryFn<ButtonProps> = (args) => <Button {...args} />;
 
 export const Primary = Template.bind({});
 
diff --git a/examples/cra-ts-kitchen-sink/.storybook/main.ts b/examples/cra-ts-kitchen-sink/.storybook/main.ts
index ab1ada857a95..e5aa1555621b 100644
--- a/examples/cra-ts-kitchen-sink/.storybook/main.ts
+++ b/examples/cra-ts-kitchen-sink/.storybook/main.ts
@@ -1,4 +1,4 @@
-import type { StorybookConfig } from '@storybook/react-webpack5/types';
+import type { StorybookConfig } from '@storybook/react-webpack5';
 
 const path = require('path');
 
diff --git a/examples/external-docs/components/button.stories.tsx b/examples/external-docs/components/button.stories.tsx
index 7005dc92658b..1e9b62081e2e 100644
--- a/examples/external-docs/components/button.stories.tsx
+++ b/examples/external-docs/components/button.stories.tsx
@@ -2,7 +2,7 @@
 /* eslint-disable storybook/use-storybook-testing-library */
 // @TODO: use addon-interactions and remove the rule disable above
 import React from 'react';
-import { Meta, ComponentStory } from '@storybook/react';
+import type { Meta, ComponentStoryFn } from '@storybook/react';
 import { screen } from '@testing-library/dom';
 import userEvent from '@testing-library/user-event';
 import { Button } from './button';
@@ -14,7 +14,7 @@ export default {
   // render: () => <>hohoho</>,
 } as Meta;
 
-export const WithArgs: ComponentStory<typeof Button> = (args) => <Button {...args} />;
+export const WithArgs: ComponentStoryFn<typeof Button> = (args) => <Button {...args} />;
 WithArgs.args = { label: 'With args' };
 
 export const Basic = () => <Button label="Click me" />;
diff --git a/examples/html-kitchen-sink/.storybook/main.ts b/examples/html-kitchen-sink/.storybook/main.ts
index 01ba45ff39c1..a8aba5cd9f31 100644
--- a/examples/html-kitchen-sink/.storybook/main.ts
+++ b/examples/html-kitchen-sink/.storybook/main.ts
@@ -1,4 +1,4 @@
-import type { StorybookConfig } from '@storybook/html-webpack5/types';
+import type { StorybookConfig } from '@storybook/html-webpack5';
 
 const mainConfig: StorybookConfig = {
   // this dirname is because we run tests from project root
diff --git a/examples/official-storybook/main.ts b/examples/official-storybook/main.ts
index d931060beb05..1634bf3e8862 100644
--- a/examples/official-storybook/main.ts
+++ b/examples/official-storybook/main.ts
@@ -1,5 +1,5 @@
 /// <reference types="node" />
-import type { StorybookConfig } from '@storybook/react-webpack5/types';
+import type { StorybookConfig } from '@storybook/react-webpack5';
 
 const config: StorybookConfig = {
   stories: [
diff --git a/examples/official-storybook/stories/demo/typed-button.stories.tsx b/examples/official-storybook/stories/demo/typed-button.stories.tsx
index c5d7a44ee35e..2d8b11414e34 100644
--- a/examples/official-storybook/stories/demo/typed-button.stories.tsx
+++ b/examples/official-storybook/stories/demo/typed-button.stories.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { ComponentMeta, Story, ComponentStory } from '@storybook/react';
+import type { ComponentMeta, StoryFn, ComponentStoryFn } from '@storybook/react';
 import TsButton from '../../components/TsButton';
 
 export default {
@@ -14,7 +14,7 @@ export default {
   ],
 } as ComponentMeta<typeof TsButton>;
 
-const Template: Story = (args) => <TsButton {...args} />;
+const Template: StoryFn = (args) => <TsButton {...args} />;
 
 export const Basic = Template.bind({});
 Basic.args = {
@@ -22,7 +22,7 @@ Basic.args = {
   children: 'basic',
 };
 
-const TypedTemplate: ComponentStory<typeof TsButton> = (args) => <TsButton {...args} />;
+const TypedTemplate: ComponentStoryFn<typeof TsButton> = (args) => <TsButton {...args} />;
 
 export const Typed = TypedTemplate.bind({});
 Typed.args = {
diff --git a/examples/preact-kitchen-sink/.storybook/main.ts b/examples/preact-kitchen-sink/.storybook/main.ts
index 8613ab7478d2..dd8b68f39d00 100644
--- a/examples/preact-kitchen-sink/.storybook/main.ts
+++ b/examples/preact-kitchen-sink/.storybook/main.ts
@@ -1,4 +1,4 @@
-import type { StorybookConfig } from '@storybook/preact-webpack5/types';
+import type { StorybookConfig } from '@storybook/preact-webpack5';
 
 const path = require('path');
 
diff --git a/examples/react-ts/.storybook/main.ts b/examples/react-ts/.storybook/main.ts
index cdc48d554401..bdf1d107d643 100644
--- a/examples/react-ts/.storybook/main.ts
+++ b/examples/react-ts/.storybook/main.ts
@@ -1,4 +1,4 @@
-import type { StorybookConfig } from '@storybook/react-webpack5/types';
+import type { StorybookConfig } from '@storybook/react-webpack5';
 
 const config: StorybookConfig = {
   stories: [
diff --git a/examples/react-ts/src/button.stories.tsx b/examples/react-ts/src/button.stories.tsx
index 9a6162285409..9586792e875d 100644
--- a/examples/react-ts/src/button.stories.tsx
+++ b/examples/react-ts/src/button.stories.tsx
@@ -2,7 +2,7 @@
 /* eslint-disable storybook/use-storybook-testing-library */
 // @TODO: use addon-interactions and remove the rule disable above
 import React from 'react';
-import { Meta, ComponentStory } from '@storybook/react';
+import type { Meta, ComponentStoryFn } from '@storybook/react';
 import { screen } from '@testing-library/dom';
 import userEvent from '@testing-library/user-event';
 import { Button } from './button';
@@ -27,7 +27,7 @@ export default {
   // render: () => <>hohoho</>,
 } as Meta;
 
-export const WithArgs: ComponentStory<typeof Button> = (args) => <Button {...args} />;
+export const WithArgs: ComponentStoryFn<typeof Button> = (args) => <Button {...args} />;
 WithArgs.args = { label: 'With args' };
 
 export const Basic = () => <Button label="Click me" />;
diff --git a/examples/server-kitchen-sink/.storybook/main.ts b/examples/server-kitchen-sink/.storybook/main.ts
index 099561a19828..994af2274338 100644
--- a/examples/server-kitchen-sink/.storybook/main.ts
+++ b/examples/server-kitchen-sink/.storybook/main.ts
@@ -1,4 +1,4 @@
-import type { StorybookConfig } from '@storybook/server-webpack5/types';
+import type { StorybookConfig } from '@storybook/server-webpack5';
 
 const mainConfig: StorybookConfig = {
   stories: ['../stories/**/*.stories.@(json|yaml|yml)'],
diff --git a/examples/svelte-kitchen-sink/.storybook/main.ts b/examples/svelte-kitchen-sink/.storybook/main.ts
index 870b4e643ca3..114c745baf6d 100644
--- a/examples/svelte-kitchen-sink/.storybook/main.ts
+++ b/examples/svelte-kitchen-sink/.storybook/main.ts
@@ -1,7 +1,7 @@
 const path = require('path');
 const sveltePreprocess = require('svelte-preprocess');
 
-const mainConfig: import('@storybook/svelte-webpack5/types').StorybookConfig = {
+const mainConfig: import('@storybook/svelte-webpack5').StorybookConfig = {
   stories: ['../src/stories/**/*.stories.@(ts|tsx|js|jsx||mdx|svelte)'],
   logLevel: 'debug',
   addons: [
diff --git a/examples/vue-3-cli/.storybook/main.ts b/examples/vue-3-cli/.storybook/main.ts
index 886a8324b577..48221e0138e1 100644
--- a/examples/vue-3-cli/.storybook/main.ts
+++ b/examples/vue-3-cli/.storybook/main.ts
@@ -1,4 +1,4 @@
-import type { StorybookConfig } from '@storybook/vue3-webpack5/types';
+import type { StorybookConfig } from '@storybook/vue3-webpack5';
 
 const mainConfig: StorybookConfig = {
   stories: ['../src/**/*.stories.@(ts|tsx|js|jsx|mdx)'],
diff --git a/examples/vue-cli/.storybook/main.ts b/examples/vue-cli/.storybook/main.ts
index 584c25f35618..269706434644 100644
--- a/examples/vue-cli/.storybook/main.ts
+++ b/examples/vue-cli/.storybook/main.ts
@@ -1,4 +1,4 @@
-import type { StorybookConfig } from '@storybook/vue-webpack5/types';
+import type { StorybookConfig } from '@storybook/vue-webpack5';
 
 const mainConfig: StorybookConfig = {
   stories: ['../src/**/*.stories.@(ts|tsx|js|jsx|mdx)'],
diff --git a/examples/vue-kitchen-sink/.storybook/main.ts b/examples/vue-kitchen-sink/.storybook/main.ts
index 77c61ec047bf..3086223c309b 100644
--- a/examples/vue-kitchen-sink/.storybook/main.ts
+++ b/examples/vue-kitchen-sink/.storybook/main.ts
@@ -1,4 +1,4 @@
-import type { StorybookConfig } from '@storybook/vue-webpack5/types';
+import type { StorybookConfig } from '@storybook/vue-webpack5';
 
 const mainConfig: StorybookConfig = {
   stories: ['../src/stories/**/*.stories.@(ts|tsx|js|jsx|mdx)'],
diff --git a/frameworks/angular/src/client/preview/config.ts b/frameworks/angular/src/client/preview/config.ts
index 4f80f0321317..109dd3b09104 100644
--- a/frameworks/angular/src/client/preview/config.ts
+++ b/frameworks/angular/src/client/preview/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/index.ts b/frameworks/angular/src/client/preview/index.ts
index 1ed481f70050..7b2211cb0f42 100644
--- a/frameworks/angular/src/client/preview/index.ts
+++ b/frameworks/angular/src/client/preview/index.ts
@@ -7,7 +7,7 @@ import decorateStory from './decorateStory';
 import type { IStorybookSection } from './types';
 import type { AngularFramework } from './types-6-0';
 
-const framework = 'angular';
+const FRAMEWORK = 'angular';
 
 interface ClientApi extends ClientStoryApi<AngularFramework['storyResult']> {
   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<ClientApi['storiesOf']>).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/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/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/html-webpack5/types.d.ts b/frameworks/html-webpack5/types.d.ts
deleted file mode 100644
index b74be4c5a234..000000000000
--- a/frameworks/html-webpack5/types.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './dist/types/index.d';
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/preact-webpack5/types.d.ts b/frameworks/preact-webpack5/types.d.ts
deleted file mode 100644
index b74be4c5a234..000000000000
--- a/frameworks/preact-webpack5/types.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './dist/types/index.d';
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/types.d.ts b/frameworks/server-webpack5/types.d.ts
deleted file mode 100644
index b74be4c5a234..000000000000
--- a/frameworks/server-webpack5/types.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './dist/types/index.d';
diff --git a/frameworks/svelte-webpack5/types.d.ts b/frameworks/svelte-webpack5/types.d.ts
deleted file mode 100644
index b74be4c5a234..000000000000
--- a/frameworks/svelte-webpack5/types.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './dist/types/index.d';
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/vue-webpack5/types.d.ts b/frameworks/vue-webpack5/types.d.ts
deleted file mode 100644
index b74be4c5a234..000000000000
--- a/frameworks/vue-webpack5/types.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './dist/types/index.d';
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/vue3-webpack5/types.d.ts b/frameworks/vue3-webpack5/types.d.ts
deleted file mode 100644
index b74be4c5a234..000000000000
--- a/frameworks/vue3-webpack5/types.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './dist/types/index.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/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 64a66273db0c..7fdcd61c6a47 100644
--- a/lib/addons/src/types.ts
+++ b/lib/addons/src/types.ts
@@ -64,6 +64,8 @@ export type StorySortParameter = StorySortComparator | StorySortObjectParameter;
 export type StorySortComparatorV7 = Comparator<StoryIndexEntry>;
 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?: {
@@ -82,7 +84,8 @@ export interface Parameters {
   [key: string]: any;
 }
 
-export type StoryContext = StoryContextForFramework<AnyFramework>;
+export type StoryContext<TFramework extends AnyFramework = AnyFramework> =
+  StoryContextForFramework<TFramework>;
 export type StoryContextUpdate = Partial<StoryContext>;
 
 type ReturnTypeFramework<ReturnType> = { component: any; storyResult: ReturnType };
diff --git a/lib/cli/src/frameworks/react/ts/Button.stories.tsx b/lib/cli/src/frameworks/react/ts/Button.stories.tsx
index c331bd485bb5..435f55a9ef58 100644
--- a/lib/cli/src/frameworks/react/ts/Button.stories.tsx
+++ b/lib/cli/src/frameworks/react/ts/Button.stories.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import type { ComponentStoryFn, ComponentMeta } from '@storybook/react';
 
 import { Button } from './Button';
 
@@ -14,7 +14,7 @@ export default {
 } as ComponentMeta<typeof Button>;
 
 // More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
-const Template: ComponentStory<typeof Button> = (args) => <Button {...args} />;
+const Template: ComponentStoryFn<typeof Button> = (args) => <Button {...args} />;
 
 export const Primary = Template.bind({});
 // More on args: https://storybook.js.org/docs/react/writing-stories/args
diff --git a/lib/cli/src/frameworks/react/ts/Header.stories.tsx b/lib/cli/src/frameworks/react/ts/Header.stories.tsx
index 7e9283eaf66a..98f78d07e094 100644
--- a/lib/cli/src/frameworks/react/ts/Header.stories.tsx
+++ b/lib/cli/src/frameworks/react/ts/Header.stories.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import type { ComponentStoryFn, ComponentMeta } from '@storybook/react';
 
 import { Header } from './Header';
 
@@ -12,7 +12,7 @@ export default {
   },
 } as ComponentMeta<typeof Header>;
 
-const Template: ComponentStory<typeof Header> = (args) => <Header {...args} />;
+const Template: ComponentStoryFn<typeof Header> = (args) => <Header {...args} />;
 
 export const LoggedIn = Template.bind({});
 LoggedIn.args = {
diff --git a/lib/cli/src/frameworks/react/ts/Page.stories.tsx b/lib/cli/src/frameworks/react/ts/Page.stories.tsx
index a0ea79fd64e0..921f541e23ac 100644
--- a/lib/cli/src/frameworks/react/ts/Page.stories.tsx
+++ b/lib/cli/src/frameworks/react/ts/Page.stories.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import type { ComponentStoryFn, ComponentMeta } from '@storybook/react';
 import { within, userEvent } from '@storybook/testing-library';
 import { Page } from './Page';
 
@@ -12,7 +12,7 @@ export default {
   },
 } as ComponentMeta<typeof Page>;
 
-const Template: ComponentStory<typeof Page> = (args) => <Page {...args} />;
+const Template: ComponentStoryFn<typeof Page> = (args) => <Page {...args} />;
 
 export const LoggedOut = Template.bind({});
 
diff --git a/lib/core-server/src/index.ts b/lib/core-server/src/index.ts
index 44f79be139af..6762959f8733 100644
--- a/lib/core-server/src/index.ts
+++ b/lib/core-server/src/index.ts
@@ -1,3 +1,6 @@
+// eslint-disable-next-line @typescript-eslint/triple-slash-reference
+/// <reference path="./typings.d.ts" />
+
 import {
   getPreviewHeadTemplate,
   getManagerHeadTemplate,
diff --git a/lib/core-server/typings.d.ts b/lib/core-server/src/typings.d.ts
similarity index 100%
rename from lib/core-server/typings.d.ts
rename to lib/core-server/src/typings.d.ts
diff --git a/lib/core-server/tsconfig.json b/lib/core-server/tsconfig.json
index 4ce2d9a0f15f..7fb789ec3eb1 100644
--- a/lib/core-server/tsconfig.json
+++ b/lib/core-server/tsconfig.json
@@ -3,8 +3,7 @@
   "compilerOptions": {
   },
   "include": [
-    "src/**/*",
-    "typings.d.ts"
+    "src/**/*"
   ],
   "exclude": [
     "src/**.test.ts"
diff --git a/lib/manager-webpack5/prebuilt-manager.d.ts b/lib/manager-webpack5/prebuilt-manager.d.ts
index 344a47e6e1e4..e467f5721ede 100644
--- a/lib/manager-webpack5/prebuilt-manager.d.ts
+++ b/lib/manager-webpack5/prebuilt-manager.d.ts
@@ -1 +1,6 @@
-export * from './dist/types/utils/prebuilt-manager.d';
+import type { Options } from '@storybook/core-common';
+
+export function getPrebuiltDir(options: Options): Promise<string | false>;
+
+export type DEFAULT_ADDONS = string[];
+export type IGNORED_ADDONS = string[];
\ No newline at end of file
diff --git a/lib/ui/src/components/sidebar/Heading.stories.tsx b/lib/ui/src/components/sidebar/Heading.stories.tsx
index 291fe4f8b764..61b53a3a1914 100644
--- a/lib/ui/src/components/sidebar/Heading.stories.tsx
+++ b/lib/ui/src/components/sidebar/Heading.stories.tsx
@@ -1,7 +1,7 @@
 /* eslint-disable storybook/use-storybook-testing-library */
 // @TODO: use addon-interactions and remove the rule disable above
 import React from 'react';
-import type { ComponentStory, ComponentMeta, ComponentStoryObj } from '@storybook/react';
+import type { ComponentMeta, ComponentStoryObj, ComponentStoryFn } from '@storybook/react';
 import { ThemeProvider, useTheme } from '@storybook/theming';
 import type { Theme } from '@storybook/theming';
 import { action } from '@storybook/addon-actions';
@@ -9,7 +9,7 @@ import { screen } from '@testing-library/dom';
 
 import { Heading } from './Heading';
 
-type Story = ComponentStory<typeof Heading>;
+type Story = ComponentStoryFn<typeof Heading>;
 
 export default {
   component: Heading,
diff --git a/renderers/html/src/config.ts b/renderers/html/src/config.ts
index 678ce5de5d38..198fff28d60d 100644
--- a/renderers/html/src/config.ts
+++ b/renderers/html/src/config.ts
@@ -1,5 +1,5 @@
 import { parameters as docsParams } from './docs/config';
 
-export const parameters = { framework: 'html', ...docsParams };
+export const parameters = { framework: 'html' as const, ...docsParams };
 export { decorators } from './docs/config';
-export * from './preview/config';
+export { renderToDOM } from './render';
diff --git a/renderers/html/src/docs/config.ts b/renderers/html/src/docs/config.ts
index f464e45b4b1e..9d33b7a32e1a 100644
--- a/renderers/html/src/docs/config.ts
+++ b/renderers/html/src/docs/config.ts
@@ -6,9 +6,12 @@ export const decorators = [sourceDecorator];
 export const parameters = {
   docs: {
     inlineStories: true,
+    transformSource: undefined as unknown,
     source: {
       type: SourceType.DYNAMIC,
       language: 'html',
+      code: undefined as unknown,
+      excludeDecorators: undefined as unknown,
     },
   },
 };
diff --git a/renderers/html/src/docs/sourceDecorator.test.ts b/renderers/html/src/docs/sourceDecorator.test.ts
index 18e5e3ace141..9d32199cc949 100644
--- a/renderers/html/src/docs/sourceDecorator.test.ts
+++ b/renderers/html/src/docs/sourceDecorator.test.ts
@@ -1,6 +1,7 @@
 import { SNIPPET_RENDERED } from '@storybook/docs-tools';
-import { addons, StoryContext, useEffect } from '@storybook/addons';
+import { addons, useEffect } from '@storybook/addons';
 import { sourceDecorator } from './sourceDecorator';
+import { StoryContext } from '../types';
 
 jest.mock('@storybook/addons');
 const mockedAddons = addons as jest.Mocked<typeof addons>;
@@ -13,21 +14,28 @@ expect.addSnapshotSerializer({
 
 const tick = () => new Promise((r) => setTimeout(r, 0));
 
-const makeContext = (name: string, parameters: any, args: any, extra?: object): StoryContext => ({
-  id: `html-test--${name}`,
-  kind: 'js-text',
-  name,
-  parameters,
-  args,
-  argTypes: {},
-  globals: {},
-  ...extra,
-});
+const makeContext = (name: string, parameters: any, args: any, extra?: object): StoryContext =>
+  ({
+    id: `html-test--${name}`,
+    kind: 'js-text',
+    name,
+    parameters,
+    componentId: '',
+    title: '',
+    story: '',
+    args,
+    argTypes: {},
+    globals: {},
+    initialArgs: {},
+
+    ...extra,
+  } as StoryContext);
 
 describe('sourceDecorator', () => {
   let mockChannel: { on: jest.Mock; emit?: jest.Mock };
   beforeEach(() => {
     mockedAddons.getChannel.mockReset();
+    // @ts-ignore
     mockedUseEffect.mockImplementation((cb) => setTimeout(cb, 0));
 
     mockChannel = { on: jest.fn(), emit: jest.fn() };
diff --git a/renderers/html/src/docs/sourceDecorator.ts b/renderers/html/src/docs/sourceDecorator.ts
index 7862c9cf48e1..609c8913ab64 100644
--- a/renderers/html/src/docs/sourceDecorator.ts
+++ b/renderers/html/src/docs/sourceDecorator.ts
@@ -2,11 +2,12 @@
 /* global window */
 import { SNIPPET_RENDERED, SourceType } from '@storybook/docs-tools';
 import { addons, useEffect } from '@storybook/addons';
-import type { ArgsStoryFn, PartialStoryFn, StoryContext } from '@storybook/csf';
+import type { PartialStoryFn } from '@storybook/csf';
 import dedent from 'ts-dedent';
-import type { HtmlFramework } from '..';
+import { HtmlFramework, StoryContext } from '../types';
+import { StoryFn } from '../public-types';
 
-function skipSourceRender(context: StoryContext<HtmlFramework>) {
+function skipSourceRender(context: StoryContext) {
   const sourceParams = context?.parameters.docs?.source;
   const isArgsStory = context?.parameters.__isArgsStory;
 
@@ -26,18 +27,16 @@ function defaultTransformSource(source: string) {
   return dedent(source);
 }
 
-function applyTransformSource(source: string, context: StoryContext<HtmlFramework>): string {
+function applyTransformSource(source: string, context: StoryContext): string {
   const docs = context.parameters.docs ?? {};
   const transformSource = docs.transformSource ?? defaultTransformSource;
+  // @ts-ignore
   return transformSource(source, context);
 }
 
-export function sourceDecorator(
-  storyFn: PartialStoryFn<HtmlFramework>,
-  context: StoryContext<HtmlFramework>
-) {
+export function sourceDecorator(storyFn: PartialStoryFn<HtmlFramework>, context: StoryContext) {
   const story = context?.parameters.docs?.source?.excludeDecorators
-    ? (context.originalStoryFn as ArgsStoryFn<HtmlFramework>)(context.args, context)
+    ? (context.originalStoryFn as StoryFn)(context.args, context)
     : storyFn();
 
   let source: string | undefined;
diff --git a/renderers/html/src/preview/globals.ts b/renderers/html/src/globals.ts
similarity index 88%
rename from renderers/html/src/preview/globals.ts
rename to renderers/html/src/globals.ts
index ea0caeeef6ad..08091285dab0 100644
--- a/renderers/html/src/preview/globals.ts
+++ b/renderers/html/src/globals.ts
@@ -1,3 +1,4 @@
+// @ts-ignore
 import global from 'global';
 
 const { window: globalWindow } = global;
diff --git a/renderers/html/src/index.ts b/renderers/html/src/index.ts
index 60fb2a70d1a0..6f07e864d3e9 100644
--- a/renderers/html/src/index.ts
+++ b/renderers/html/src/index.ts
@@ -1,15 +1,7 @@
-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';
 
 // optimization: stop HMR propagation in webpack
 module?.hot?.decline();
diff --git a/renderers/html/src/preview/config.ts b/renderers/html/src/preview/config.ts
deleted file mode 100644
index 060cf504b4fe..000000000000
--- a/renderers/html/src/preview/config.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { renderToDOM } from './render';
diff --git a/renderers/html/src/preview/types-7-0.ts b/renderers/html/src/preview/types-7-0.ts
deleted file mode 100644
index d897ad97a81a..000000000000
--- a/renderers/html/src/preview/types-7-0.ts
+++ /dev/null
@@ -1,14 +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<TArgs = Args> = StoryObj<TArgs>;
diff --git a/renderers/html/src/preview/types.ts b/renderers/html/src/preview/types.ts
deleted file mode 100644
index fd3e3d675d83..000000000000
--- a/renderers/html/src/preview/types.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-export type { RenderContext } from '@storybook/core-client';
-
-export type StoryFnHtmlReturnType = string | Node;
-
-export interface IStorybookStory {
-  name: string;
-  render: (context: any) => any;
-}
-
-export interface IStorybookSection {
-  kind: string;
-  stories: IStorybookStory[];
-}
-
-export interface ShowErrorArgs {
-  title: string;
-  description: string;
-}
diff --git a/renderers/html/src/preview/index.ts b/renderers/html/src/public-api.ts
similarity index 87%
rename from renderers/html/src/preview/index.ts
rename to renderers/html/src/public-api.ts
index e9b53f6e222c..00360e68d6ab 100644
--- a/renderers/html/src/preview/index.ts
+++ b/renderers/html/src/public-api.ts
@@ -1,13 +1,11 @@
 /* eslint-disable prefer-destructuring */
 import { start } from '@storybook/core-client';
 import type { ClientStoryApi, Loadable } from '@storybook/addons';
-import { HtmlFramework } from './types-6-0';
+import type { HtmlFramework, IStorybookSection } from './types';
 
-import './globals';
 import { renderToDOM } from './render';
-import type { IStorybookSection } from './types';
 
-const framework = 'html';
+const FRAMEWORK = 'html';
 
 interface ClientApi extends ClientStoryApi<HtmlFramework['storyResult']> {
   setAddon(addon: any): void;
@@ -22,11 +20,11 @@ const api = start(renderToDOM);
 
 export const storiesOf: ClientApi['storiesOf'] = (kind, m) => {
   return (api.clientApi.storiesOf(kind, m) as ReturnType<ClientApi['storiesOf']>).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/renderers/html/src/preview/types-6-0.ts b/renderers/html/src/public-types.ts
similarity index 68%
rename from renderers/html/src/preview/types-6-0.ts
rename to renderers/html/src/public-types.ts
index abc711430c38..eb37793ee8aa 100644
--- a/renderers/html/src/preview/types-6-0.ts
+++ b/renderers/html/src/public-types.ts
@@ -4,15 +4,9 @@ import type {
   StoryAnnotations,
   AnnotatedStoryFn,
 } from '@storybook/csf';
+import { HtmlFramework } from './types';
 
-import type { StoryFnHtmlReturnType } from './types';
-
-export type { Args, ArgTypes, Parameters, StoryContext } from '@storybook/addons';
-
-export type HtmlFramework = {
-  component: HTMLElement;
-  storyResult: StoryFnHtmlReturnType;
-};
+export type { Args, ArgTypes, Parameters } from '@storybook/csf';
 
 /**
  * Metadata to configure the stories for a component.
@@ -35,12 +29,11 @@ export type StoryFn<TArgs = Args> = AnnotatedStoryFn<HtmlFramework, TArgs>;
  */
 export type StoryObj<TArgs = Args> = StoryAnnotations<HtmlFramework, TArgs>;
 
+// NOTE these types are reversed from the way they are in types-6-0 and types-6-3
+
 /**
- * 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<TArgs = Args> = StoryFn<TArgs>;
+export type Story<TArgs = Args> = StoryObj<TArgs>;
diff --git a/renderers/html/src/preview/render.ts b/renderers/html/src/render.ts
similarity index 94%
rename from renderers/html/src/preview/render.ts
rename to renderers/html/src/render.ts
index b7992976c7a8..4221aa74db39 100644
--- a/renderers/html/src/preview/render.ts
+++ b/renderers/html/src/render.ts
@@ -1,9 +1,11 @@
 /* eslint-disable no-param-reassign */
+// @ts-ignore
 import global from 'global';
+
 import dedent from 'ts-dedent';
 import { simulatePageLoad, simulateDOMContentLoaded } from '@storybook/preview-web';
 import type { RenderContext } from '@storybook/store';
-import { HtmlFramework } from './types-6-0';
+import type { HtmlFramework } from './types';
 
 const { Node } = global;
 
diff --git a/renderers/html/src/types.ts b/renderers/html/src/types.ts
new file mode 100644
index 000000000000..3eaccd27a6f9
--- /dev/null
+++ b/renderers/html/src/types.ts
@@ -0,0 +1,30 @@
+import type { StoryContext as DefaultStoryContext } from '@storybook/csf';
+import { parameters } from './config';
+
+export type { RenderContext } from '@storybook/core-client';
+
+export type StoryFnHtmlReturnType = string | Node;
+
+export interface IStorybookStory {
+  name: string;
+  render: (context: any) => any;
+}
+
+export interface IStorybookSection {
+  kind: string;
+  stories: IStorybookStory[];
+}
+
+export interface ShowErrorArgs {
+  title: string;
+  description: string;
+}
+
+export type HtmlFramework = {
+  component: HTMLElement;
+  storyResult: StoryFnHtmlReturnType;
+};
+
+export type StoryContext = DefaultStoryContext<HtmlFramework> & {
+  parameters: DefaultStoryContext<HtmlFramework>['parameters'] & typeof parameters;
+};
diff --git a/renderers/html/src/typings.d.ts b/renderers/html/src/typings.d.ts
deleted file mode 100644
index d8f7c6f660ad..000000000000
--- a/renderers/html/src/typings.d.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-declare module 'global';
-
-// will be provided by the webpack define plugin
-declare var NODE_ENV: string | undefined;
diff --git a/renderers/preact/preview.js b/renderers/preact/preview.js
index ccd5ae5ae416..0d73a0b695f1 100644
--- a/renderers/preact/preview.js
+++ b/renderers/preact/preview.js
@@ -1 +1 @@
-export * from './dist/esm/preview/config';
+export * from './dist/esm/config';
diff --git a/renderers/preact/src/config.ts b/renderers/preact/src/config.ts
new file mode 100644
index 000000000000..7e2023a437d5
--- /dev/null
+++ b/renderers/preact/src/config.ts
@@ -0,0 +1,3 @@
+export { renderToDOM } from './render';
+
+export const parameters = { framework: 'preact' as const };
diff --git a/renderers/preact/src/preview/globals.ts b/renderers/preact/src/globals.ts
similarity index 90%
rename from renderers/preact/src/preview/globals.ts
rename to renderers/preact/src/globals.ts
index eb2e0f63636c..bc0da9131093 100644
--- a/renderers/preact/src/preview/globals.ts
+++ b/renderers/preact/src/globals.ts
@@ -1,3 +1,4 @@
+// @ts-ignore
 import global from 'global';
 
 const { window: globalWindow } = global;
diff --git a/renderers/preact/src/index.ts b/renderers/preact/src/index.ts
index c679ef3a5670..731b8a9a1588 100644
--- a/renderers/preact/src/index.ts
+++ b/renderers/preact/src/index.ts
@@ -1,12 +1,7 @@
-export {
-  storiesOf,
-  setAddon,
-  addDecorator,
-  addParameters,
-  configure,
-  getStorybook,
-  forceReRender,
-  raw,
-} from './preview';
+export * from './globals';
 
-export * from './preview/types-6-0';
+export * from './public-api';
+export * from './public-types';
+
+// optimization: stop HMR propagation in webpack
+module?.hot?.decline();
diff --git a/renderers/preact/src/preview/config.ts b/renderers/preact/src/preview/config.ts
deleted file mode 100644
index 4038e5dbab2a..000000000000
--- a/renderers/preact/src/preview/config.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export { renderToDOM } from './render';
-
-export const parameters = { framework: 'preact' };
diff --git a/renderers/preact/src/preview/types-7-0.ts b/renderers/preact/src/preview/types-7-0.ts
deleted file mode 100644
index d897ad97a81a..000000000000
--- a/renderers/preact/src/preview/types-7-0.ts
+++ /dev/null
@@ -1,14 +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<TArgs = Args> = StoryObj<TArgs>;
diff --git a/renderers/preact/src/preview/index.ts b/renderers/preact/src/public-api.ts
similarity index 87%
rename from renderers/preact/src/preview/index.ts
rename to renderers/preact/src/public-api.ts
index 8e5d4f210faf..01d2dab71a04 100644
--- a/renderers/preact/src/preview/index.ts
+++ b/renderers/preact/src/public-api.ts
@@ -2,10 +2,8 @@
 import { start } from '@storybook/core-client';
 import type { ClientStoryApi, Loadable } from '@storybook/addons';
 
-import './globals';
 import { renderToDOM } from './render';
-import type { IStorybookSection } from './types';
-import type { PreactFramework } from './types-6-0';
+import type { IStorybookSection, PreactFramework } from './types';
 
 export interface ClientApi extends ClientStoryApi<PreactFramework['storyResult']> {
   setAddon(addon: any): void;
@@ -17,16 +15,16 @@ export interface ClientApi extends ClientStoryApi<PreactFramework['storyResult']
   load: (...args: any[]) => void;
 }
 
-const framework = 'preact';
+const FRAMEWORK = 'preact';
 const api = start(renderToDOM);
 
 export const storiesOf: ClientApi['storiesOf'] = (kind, m) => {
   return (api.clientApi.storiesOf(kind, m) as ReturnType<ClientApi['storiesOf']>).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/renderers/preact/src/preview/types-6-0.ts b/renderers/preact/src/public-types.ts
similarity index 71%
rename from renderers/preact/src/preview/types-6-0.ts
rename to renderers/preact/src/public-types.ts
index c98eb9071576..f82e3f821325 100644
--- a/renderers/preact/src/preview/types-6-0.ts
+++ b/renderers/preact/src/public-types.ts
@@ -1,19 +1,13 @@
-import type { AnyComponent } from 'preact';
 import type {
   Args,
   ComponentAnnotations,
   StoryAnnotations,
   AnnotatedStoryFn,
 } from '@storybook/csf';
-import type { StoryFnPreactReturnType } from './types';
+import { PreactFramework } from './types';
 
 export type { Args, ArgTypes, Parameters, StoryContext } from '@storybook/csf';
 
-export type PreactFramework = {
-  component: AnyComponent<any, any>;
-  storyResult: StoryFnPreactReturnType;
-};
-
 /**
  * Metadata to configure the stories for a component.
  *
@@ -36,11 +30,8 @@ export type StoryFn<TArgs = Args> = AnnotatedStoryFn<PreactFramework, TArgs>;
 export type StoryObj<TArgs = Args> = StoryAnnotations<PreactFramework, TArgs>;
 
 /**
- * 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<TArgs = Args> = StoryFn<TArgs>;
+export type Story<TArgs = Args> = StoryObj<TArgs>;
diff --git a/renderers/preact/src/preview/render.tsx b/renderers/preact/src/render.tsx
similarity index 90%
rename from renderers/preact/src/preview/render.tsx
rename to renderers/preact/src/render.tsx
index 22346aba38cb..6137532cd8ea 100644
--- a/renderers/preact/src/preview/render.tsx
+++ b/renderers/preact/src/render.tsx
@@ -1,8 +1,7 @@
 import * as preact from 'preact';
 import dedent from 'ts-dedent';
-import { RenderContext } from '@storybook/store';
-import { StoryFnPreactReturnType } from './types';
-import { PreactFramework } from './types-6-0';
+import type { RenderContext } from '@storybook/store';
+import type { StoryFnPreactReturnType, PreactFramework } from './types';
 
 let renderedStory: Element;
 
diff --git a/renderers/preact/src/preview/types.ts b/renderers/preact/src/types.ts
similarity index 70%
rename from renderers/preact/src/preview/types.ts
rename to renderers/preact/src/types.ts
index 27123115b15a..ac33a1d6e0c9 100644
--- a/renderers/preact/src/preview/types.ts
+++ b/renderers/preact/src/types.ts
@@ -1,3 +1,5 @@
+import type { AnyComponent } from 'preact';
+
 export type { RenderContext } from '@storybook/core-client';
 
 export type StoryFnPreactReturnType = string | Node | preact.JSX.Element;
@@ -16,3 +18,8 @@ export interface IStorybookSection {
   kind: string;
   stories: IStorybookStory[];
 }
+
+export type PreactFramework = {
+  component: AnyComponent<any, any>;
+  storyResult: StoryFnPreactReturnType;
+};
diff --git a/renderers/preact/src/typings.d.ts b/renderers/preact/src/typings.d.ts
deleted file mode 100644
index 2f4eb9cf4fd9..000000000000
--- a/renderers/preact/src/typings.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-declare module 'global';
diff --git a/renderers/react/src/config.ts b/renderers/react/src/config.ts
index 6a2fe62ad226..a9ba6b59eed9 100644
--- a/renderers/react/src/config.ts
+++ b/renderers/react/src/config.ts
@@ -1,5 +1,10 @@
 import { parameters as docsParams } from './docs/config';
 
-export const parameters = { framework: 'react', ...docsParams };
+export const parameters = {
+  framework: 'react',
+  ...docsParams,
+};
+
 export { decorators, argTypesEnhancers } from './docs/config';
-export * from './preview/config';
+
+export { render, renderToDOM } from './render';
diff --git a/renderers/react/src/docs/jsxDecorator.test.tsx b/renderers/react/src/docs/jsxDecorator.test.tsx
index 40eb7c57b74d..b32364cb1e95 100644
--- a/renderers/react/src/docs/jsxDecorator.test.tsx
+++ b/renderers/react/src/docs/jsxDecorator.test.tsx
@@ -1,7 +1,7 @@
 /* eslint-disable jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */
-import React from 'react';
+import React, { createElement, FC, PropsWithChildren } from 'react';
 import PropTypes from 'prop-types';
-import { addons, StoryContext, useEffect } from '@storybook/addons';
+import { addons, useEffect } from '@storybook/addons';
 import { SNIPPET_RENDERED } from '@storybook/docs-tools';
 import { renderJsx, jsxDecorator } from './jsxDecorator';
 
@@ -47,6 +47,7 @@ describe('renderJsx', () => {
   });
   it('large objects', () => {
     const obj = Array.from({ length: 20 }).reduce((acc, _, i) => {
+      // @ts-ignore
       acc[`key_${i}`] = `val_${i}`;
       return acc;
     }, {});
@@ -109,11 +110,14 @@ describe('renderJsx', () => {
   });
 
   it('forwardRef component', () => {
-    const MyExoticComponent = React.forwardRef(function MyExoticComponent(props: any, _ref: any) {
+    const MyExoticComponent = React.forwardRef<PropsWithChildren<{}>>(function MyExoticComponent(
+      props,
+      _ref
+    ) {
       return <div>{props.children}</div>;
     });
 
-    expect(renderJsx(<MyExoticComponent>I'm forwardRef!</MyExoticComponent>, {}))
+    expect(renderJsx(createElement(MyExoticComponent, {}, 'I am forwardRef!'), {}))
       .toMatchInlineSnapshot(`
         <MyExoticComponent>
           I'm forwardRef!
@@ -122,11 +126,11 @@ describe('renderJsx', () => {
   });
 
   it('memo component', () => {
-    const MyMemoComponent = React.memo(function MyMemoComponent(props: any) {
+    const MyMemoComponent: FC = React.memo(function MyMemoComponent(props) {
       return <div>{props.children}</div>;
     });
 
-    expect(renderJsx(<MyMemoComponent>I'm memo!</MyMemoComponent>, {})).toMatchInlineSnapshot(`
+    expect(renderJsx(createElement(MyMemoComponent, {}, 'I am memo!'), {})).toMatchInlineSnapshot(`
       <MyMemoComponent>
         I'm memo!
       </MyMemoComponent>
@@ -169,6 +173,7 @@ describe('jsxDecorator', () => {
   let mockChannel: { on: jest.Mock; emit?: jest.Mock };
   beforeEach(() => {
     mockedAddons.getChannel.mockReset();
+    // @ts-ignore
     mockedUseEffect.mockImplementation((cb) => setTimeout(cb, 0));
 
     mockChannel = { on: jest.fn(), emit: jest.fn() };
@@ -266,7 +271,8 @@ describe('jsxDecorator', () => {
 
   it('renders MDX properly', async () => {
     // FIXME: generate this from actual MDX
-    const mdxElement = {
+    const mdxElement: ReturnType<typeof createElement> = {
+      // @ts-ignore
       type: { displayName: 'MDXCreateElement' },
       props: {
         mdxType: 'div',
diff --git a/renderers/react/src/docs/jsxDecorator.tsx b/renderers/react/src/docs/jsxDecorator.tsx
index fb667a359d36..4f513c7a8376 100644
--- a/renderers/react/src/docs/jsxDecorator.tsx
+++ b/renderers/react/src/docs/jsxDecorator.tsx
@@ -9,7 +9,7 @@ import { StoryContext, ArgsStoryFn, PartialStoryFn } from '@storybook/csf';
 import { SourceType, SNIPPET_RENDERED, getDocgenSection } from '@storybook/docs-tools';
 import { logger } from '@storybook/client-logger';
 
-import { ReactFramework } from '..';
+import { ReactFramework } from '../types';
 
 import { isMemo, isForwardRef } from './lib';
 
@@ -184,7 +184,9 @@ export const jsxDecorator = (
   let jsx = '';
 
   useEffect(() => {
-    if (!skip) channel.emit(SNIPPET_RENDERED, (context || {}).id, jsx);
+    if (!skip) {
+      channel.emit(SNIPPET_RENDERED, (context || {}).id, jsx);
+    }
   });
 
   // We only need to render JSX if the source block is actually going to
diff --git a/renderers/react/src/docs/react-argtypes.stories.tsx b/renderers/react/src/docs/react-argtypes.stories.tsx
index 9a14a0c39f64..c47d886bebb9 100644
--- a/renderers/react/src/docs/react-argtypes.stories.tsx
+++ b/renderers/react/src/docs/react-argtypes.stories.tsx
@@ -1,10 +1,11 @@
 import React, { useState } from 'react';
 import mapValues from 'lodash/mapValues';
 import { ArgsTable } from '@storybook/components';
-import { Args } from '@storybook/api';
+import type { Args } from '@storybook/csf';
 import { inferControls } from '@storybook/store';
 
-import { storiesOf, StoryContext } from '..';
+import { storiesOf } from '../public-api';
+import type { StoryContext } from '../types';
 import { extractArgTypes } from './extractArgTypes';
 
 // FIXME
diff --git a/renderers/react/src/docs/react-properties.test.ts b/renderers/react/src/docs/react-properties.test.ts
index d2cc707ddeda..536a3b141898 100644
--- a/renderers/react/src/docs/react-properties.test.ts
+++ b/renderers/react/src/docs/react-properties.test.ts
@@ -8,7 +8,7 @@ import { inferControls } from '@storybook/store';
 import type { AnyFramework } from '@storybook/csf';
 import { normalizeNewlines } from '@storybook/docs-tools';
 
-import type { StoryContext } from '..';
+import type { StoryContext } from '../types';
 import { extractProps } from './extractProps';
 import { extractArgTypes } from './extractArgTypes';
 
@@ -31,8 +31,8 @@ const transformToModule = (inputCode: string) => {
       ],
     ],
   };
-  const { code } = transformSync(inputCode, options);
-  return normalizeNewlines(code);
+  const { code } = transformSync(inputCode, options) || {};
+  return normalizeNewlines(code || '');
 };
 
 const annotateWithDocgen = (inputPath: string) => {
@@ -41,8 +41,8 @@ const annotateWithDocgen = (inputPath: string) => {
     plugins: ['babel-plugin-react-docgen', '@babel/plugin-proposal-class-properties'],
     babelrc: false,
   };
-  const { code } = transformFileSync(inputPath, options);
-  return normalizeNewlines(code);
+  const { code } = transformFileSync(inputPath, options) || {};
+  return normalizeNewlines(code || '');
 };
 
 describe('react component properties', () => {
diff --git a/renderers/react/src/preview/globals.ts b/renderers/react/src/globals.ts
similarity index 90%
rename from renderers/react/src/preview/globals.ts
rename to renderers/react/src/globals.ts
index c90b74f80103..9e524d8b1022 100644
--- a/renderers/react/src/preview/globals.ts
+++ b/renderers/react/src/globals.ts
@@ -1,3 +1,4 @@
+// @ts-ignore
 import global from 'global';
 
 const { window: globalWindow } = global;
diff --git a/renderers/react/src/index.ts b/renderers/react/src/index.ts
index d8e47c130c28..a1da39cc147e 100644
--- a/renderers/react/src/index.ts
+++ b/renderers/react/src/index.ts
@@ -1,17 +1,9 @@
-export type { DecoratorFn } from './preview';
-export {
-  storiesOf,
-  setAddon,
-  addDecorator,
-  addParameters,
-  configure,
-  getStorybook,
-  raw,
-  forceReRender,
-} from './preview';
-export * from './testing';
+import './globals';
 
-export * from './preview/types-6-3';
+export * from './public-api';
+export * from './public-types';
+
+export * from './testing-api';
 
 // optimization: stop HMR propagation in webpack
 module?.hot?.decline();
diff --git a/renderers/react/src/preview/config.ts b/renderers/react/src/preview/config.ts
deleted file mode 100644
index 990959477289..000000000000
--- a/renderers/react/src/preview/config.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { render, renderToDOM } from './render';
diff --git a/renderers/react/src/preview/types-6-3.ts b/renderers/react/src/preview/types-6-3.ts
deleted file mode 100644
index 85c72920bee1..000000000000
--- a/renderers/react/src/preview/types-6-3.ts
+++ /dev/null
@@ -1,49 +0,0 @@
-import { ComponentProps, JSXElementConstructor } from 'react';
-import type { StoryFn, StoryObj, Story, Meta } from './types-6-0';
-
-export * from './types-6-0';
-
-/**
- * For the common case where a component's stories are simple components that receives args as props:
- *
- * ```tsx
- * export default { ... } as ComponentMeta<typeof Button>;
- * ```
- */
-export type ComponentMeta<T extends keyof JSX.IntrinsicElements | JSXElementConstructor<any>> =
-  Meta<ComponentProps<T>>;
-
-/**
- * For the common case where a (CSFv2) story is a simple component that receives args as props:
- *
- * ```tsx
- * const Template: ComponentStory<typeof Button> = (args) => <Button {...args} />
- * ```
- */
-export type ComponentStoryFn<T extends keyof JSX.IntrinsicElements | JSXElementConstructor<any>> =
-  StoryFn<ComponentProps<T>>;
-
-/**
- * For the common case where a (CSFv3) story is a simple component that receives args as props:
- *
- * ```tsx
- * const MyStory: ComponentStory<typeof Button> = {
- *   args: { buttonArg1: 'val' },
- * }
- * ```
- */
-export type ComponentStoryObj<T extends keyof JSX.IntrinsicElements | JSXElementConstructor<any>> =
-  StoryObj<ComponentProps<T>>;
-
-/**
- * For the common case where a (CSFv2) story is a simple component that receives args as props:
- *
- * ```tsx
- * const Template: ComponentStory<typeof Button> = (args) => <Button {...args} />
- * ```
- *
- * NOTE: this is an alias for `ComponentStoryFn`.
- * In Storybook v7, `ComponentStory` will alias `ComponentStoryObj`
- */
-export type ComponentStory<T extends keyof JSX.IntrinsicElements | JSXElementConstructor<any>> =
-  Story<ComponentProps<T>>;
diff --git a/renderers/react/src/preview/types-7-0.ts b/renderers/react/src/preview/types-7-0.ts
deleted file mode 100644
index dae17648e621..000000000000
--- a/renderers/react/src/preview/types-7-0.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-import type { JSXElementConstructor } from 'react';
-import type { Args } from '@storybook/csf';
-
-import type { StoryObj } from './types-6-0';
-import type { ComponentStoryObj } from './types-6-3';
-
-export type { StoryFn, StoryObj, Meta } from './types-6-0';
-export type { ComponentStoryFn, ComponentStoryObj, ComponentMeta } from './types-6-3';
-
-// 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<TArgs = Args> = StoryObj<TArgs>;
-
-/**
- * For the common case where a (CSFv3) story is a simple component that receives args as props:
- *
- * ```tsx
- * const MyStory: ComponentStory<typeof Button> = {
- *   args: { buttonArg1: 'val' },
- * }
- * ```
- */ export type ComponentStory<T extends keyof JSX.IntrinsicElements | JSXElementConstructor<any>> =
-  ComponentStoryObj<T>;
diff --git a/renderers/react/src/preview/index.test.ts b/renderers/react/src/public-api.test.ts
similarity index 100%
rename from renderers/react/src/preview/index.test.ts
rename to renderers/react/src/public-api.test.ts
diff --git a/renderers/react/src/preview/index.tsx b/renderers/react/src/public-api.tsx
similarity index 84%
rename from renderers/react/src/preview/index.tsx
rename to renderers/react/src/public-api.tsx
index 3222e64207db..651221a468b9 100644
--- a/renderers/react/src/preview/index.tsx
+++ b/renderers/react/src/public-api.tsx
@@ -1,11 +1,9 @@
 /* eslint-disable prefer-destructuring */
 import { start } from '@storybook/core-client';
-import { ClientStoryApi, Loadable } from '@storybook/addons';
+import type { ClientStoryApi, Loadable } from '@storybook/addons';
 
-import './globals';
 import { renderToDOM, render } from './render';
-import { IStorybookSection } from './types';
-import { ReactFramework } from './types-6-0';
+import type { IStorybookSection, ReactFramework } from './types';
 
 interface ClientApi extends ClientStoryApi<ReactFramework['storyResult']> {
   setAddon(addon: any): void;
@@ -15,17 +13,17 @@ interface ClientApi extends ClientStoryApi<ReactFramework['storyResult']> {
   forceReRender(): void;
   raw: () => any; // todo add type
 }
-const framework = 'react';
+const FRAMEWORK = 'react';
 
 const api = start(renderToDOM, { render });
 
 export const storiesOf: ClientApi['storiesOf'] = (kind, m) => {
   return (api.clientApi.storiesOf(kind, m) as ReturnType<ClientApi['storiesOf']>).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 type DecoratorFn = Parameters<typeof addDecorator>[0];
diff --git a/renderers/react/src/public-types.ts b/renderers/react/src/public-types.ts
new file mode 100644
index 000000000000..bf26a71a7787
--- /dev/null
+++ b/renderers/react/src/public-types.ts
@@ -0,0 +1,74 @@
+import { AnnotatedStoryFn, Args, ComponentAnnotations, StoryAnnotations } from '@storybook/csf';
+import { ComponentProps, JSXElementConstructor } from 'react';
+import { ReactFramework } from './types';
+
+type JSXElement = keyof JSX.IntrinsicElements | JSXElementConstructor<any>;
+
+/**
+ * Metadata to configure the stories for a component.
+ *
+ * @see [Default export](https://storybook.js.org/docs/formats/component-story-format/#default-export)
+ */
+export type Meta<TArgs = Args> = ComponentAnnotations<ReactFramework, TArgs>;
+
+/**
+ * Story function that represents a CSFv2 component example.
+ *
+ * @see [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports)
+ */
+export type StoryFn<TArgs = Args> = AnnotatedStoryFn<ReactFramework, TArgs>;
+
+/**
+ * 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 StoryObj<TArgs = Args> = StoryAnnotations<ReactFramework, TArgs>;
+
+/**
+ * For the common case where a component's stories are simple components that receives args as props:
+ *
+ * ```tsx
+ * export default { ... } as ComponentMeta<typeof Button>;
+ * ```
+ */
+export type ComponentMeta<T extends JSXElement> = Meta<ComponentProps<T>>;
+
+/**
+ * For the common case where a (CSFv2) story is a simple component that receives args as props:
+ *
+ * ```tsx
+ * const Template: ComponentStoryFn<typeof Button> = (args) => <Button {...args} />
+ * ```
+ */
+export type ComponentStoryFn<T extends JSXElement> = StoryFn<ComponentProps<T>>;
+
+/**
+ * For the common case where a (CSFv3) story is a simple component that receives args as props:
+ *
+ * ```tsx
+ * const MyStory: ComponentStoryObj<typeof Button> = {
+ *   args: { buttonArg1: 'val' },
+ * }
+ * ```
+ */
+export type ComponentStoryObj<T extends JSXElement> = StoryObj<ComponentProps<T>>;
+
+/**
+
+/**
+ * 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<TArgs = Args> = StoryObj<TArgs>;
+
+/**
+ * For the common case where a (CSFv3) story is a simple component that receives args as props:
+ *
+ * ```tsx
+ * const MyStory: ComponentStory<typeof Button> = {
+ *   args: { buttonArg1: 'val' },
+ * }
+ * ```
+ */ export type ComponentStory<T extends JSXElement> = ComponentStoryObj<T>;
diff --git a/renderers/react/src/preview/render.tsx b/renderers/react/src/render.tsx
similarity index 97%
rename from renderers/react/src/preview/render.tsx
rename to renderers/react/src/render.tsx
index a2ff523d8ffa..f5b2e0152dce 100644
--- a/renderers/react/src/preview/render.tsx
+++ b/renderers/react/src/render.tsx
@@ -1,4 +1,6 @@
+// @ts-ignore
 import global from 'global';
+
 import React, {
   Component as ReactComponent,
   FunctionComponent,
@@ -12,8 +14,7 @@ import type { Root as ReactRoot } from 'react-dom/client';
 import type { RenderContext } from '@storybook/store';
 import { ArgsStoryFn } from '@storybook/csf';
 
-import { StoryContext } from './types';
-import { ReactFramework } from './types-6-0';
+import type { ReactFramework, StoryContext } from './types';
 
 const { FRAMEWORK_OPTIONS } = global;
 
diff --git a/renderers/react/src/testing/index.ts b/renderers/react/src/testing-api.ts
similarity index 95%
rename from renderers/react/src/testing/index.ts
rename to renderers/react/src/testing-api.ts
index 2575028335ee..262b42a49551 100644
--- a/renderers/react/src/testing/index.ts
+++ b/renderers/react/src/testing-api.ts
@@ -2,15 +2,14 @@ import {
   composeStory as originalComposeStory,
   composeStories as originalComposeStories,
   setProjectAnnotations as originalSetProjectAnnotations,
-  CSFExports,
-  ComposedStory,
-  StoriesWithPartialProps,
 } from '@storybook/store';
+import type { CSFExports, ComposedStory, StoriesWithPartialProps } from '@storybook/store';
 import { ProjectAnnotations, Args } from '@storybook/csf';
 import { once } from '@storybook/client-logger';
 
-import { render } from '../preview/render';
-import type { Meta, ReactFramework } from '../preview/types-6-0';
+import { render } from './render';
+import type { Meta } from './public-types';
+import type { ReactFramework } from './types';
 
 /** Function that sets the globalConfig of your storybook. The global config is the preview module of your .storybook folder.
  *
diff --git a/renderers/react/src/preview/types.ts b/renderers/react/src/types.ts
similarity index 71%
rename from renderers/react/src/preview/types.ts
rename to renderers/react/src/types.ts
index af48265c404e..51ab7f4d9fbc 100644
--- a/renderers/react/src/preview/types.ts
+++ b/renderers/react/src/types.ts
@@ -1,8 +1,13 @@
-import { ReactElement } from 'react';
+import type { ComponentType, ReactElement } from 'react';
 
 export type { RenderContext } from '@storybook/store';
 export type { StoryContext } from '@storybook/csf';
 
+export type ReactFramework = {
+  component: ComponentType<any>;
+  storyResult: StoryFnReactReturnType;
+};
+
 export interface ShowErrorArgs {
   title: string;
   description: string;
diff --git a/renderers/react/src/typings.d.ts b/renderers/react/src/typings.d.ts
index cd1929c868b2..add4e0f6696f 100644
--- a/renderers/react/src/typings.d.ts
+++ b/renderers/react/src/typings.d.ts
@@ -1,5 +1,4 @@
 declare module '@storybook/semver';
-declare module 'global';
 
 // TODO: Replace, as soon as @types/react-dom 17.0.14 is used
 // Source: https://github.com/DefinitelyTyped/DefinitelyTyped/blob/fb0f14b7a35cde26ffaa82e7536c062e593e9ae6/types/react-dom/client.d.ts
diff --git a/renderers/server/preview.js b/renderers/server/preview.js
index ccd5ae5ae416..0d73a0b695f1 100644
--- a/renderers/server/preview.js
+++ b/renderers/server/preview.js
@@ -1 +1 @@
-export * from './dist/esm/preview/config';
+export * from './dist/esm/config';
diff --git a/renderers/server/src/config.ts b/renderers/server/src/config.ts
new file mode 100644
index 000000000000..a83857b80d58
--- /dev/null
+++ b/renderers/server/src/config.ts
@@ -0,0 +1,3 @@
+export { render, renderToDOM } from './render';
+
+export const parameters = { framework: 'server' as const };
diff --git a/renderers/server/src/preview/globals.ts b/renderers/server/src/globals.ts
similarity index 88%
rename from renderers/server/src/preview/globals.ts
rename to renderers/server/src/globals.ts
index a8d425b757bb..f2791bf93edf 100644
--- a/renderers/server/src/preview/globals.ts
+++ b/renderers/server/src/globals.ts
@@ -1,3 +1,4 @@
+// @ts-ignore
 import global from 'global';
 
 const { window: globalWindow } = global;
diff --git a/renderers/server/src/index.ts b/renderers/server/src/index.ts
index 0088e1b3ad16..6f07e864d3e9 100644
--- a/renderers/server/src/index.ts
+++ b/renderers/server/src/index.ts
@@ -1,13 +1,7 @@
-export {
-  storiesOf,
-  setAddon,
-  addDecorator,
-  addParameters,
-  configure,
-  getStorybook,
-  forceReRender,
-  raw,
-} from './preview';
+import './globals';
+
+export * from './public-api';
+export * from './public-types';
 
 // optimization: stop HMR propagation in webpack
 module?.hot?.decline();
diff --git a/renderers/server/src/preview/config.ts b/renderers/server/src/preview/config.ts
deleted file mode 100644
index 221ce28653fe..000000000000
--- a/renderers/server/src/preview/config.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export { render, renderToDOM } from './render';
-
-export const parameters = { framework: 'server' };
diff --git a/renderers/server/src/preview/index.ts b/renderers/server/src/public-api.ts
similarity index 90%
rename from renderers/server/src/preview/index.ts
rename to renderers/server/src/public-api.ts
index e9b943cc9e3a..6ff802cad721 100644
--- a/renderers/server/src/preview/index.ts
+++ b/renderers/server/src/public-api.ts
@@ -1,11 +1,10 @@
 import { start } from '@storybook/core-client';
 import type { ClientStoryApi, Loadable } from '@storybook/addons';
 
-import './globals';
 import { renderToDOM, render } from './render';
 import type { IStorybookSection, ServerFramework } from './types';
 
-const framework = 'server';
+const FRAMEWORK = 'server';
 
 interface ClientApi extends ClientStoryApi<ServerFramework['storyResult']> {
   setAddon(addon: any): void;
@@ -20,11 +19,11 @@ const api = start(renderToDOM, { render });
 
 export const storiesOf: ClientApi['storiesOf'] = (kind, m) => {
   return (api.clientApi.storiesOf(kind, m) as ReturnType<ClientApi['storiesOf']>).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, addParameters, clearDecorators, setAddon, getStorybook, raw } =
   api.clientApi;
 
diff --git a/renderers/react/src/preview/types-6-0.ts b/renderers/server/src/public-types.ts
similarity index 57%
rename from renderers/react/src/preview/types-6-0.ts
rename to renderers/server/src/public-types.ts
index 9b573efac5a6..7beaae35903d 100644
--- a/renderers/react/src/preview/types-6-0.ts
+++ b/renderers/server/src/public-types.ts
@@ -1,46 +1,37 @@
-import type { ComponentType } from 'react';
 import type {
   Args,
   ComponentAnnotations,
   StoryAnnotations,
   AnnotatedStoryFn,
 } from '@storybook/csf';
-import type { StoryFnReactReturnType } from './types';
+import { ServerFramework } from './types';
 
 export type { Args, ArgTypes, Parameters, StoryContext } from '@storybook/csf';
 
-export type ReactFramework = {
-  component: ComponentType<any>;
-  storyResult: StoryFnReactReturnType;
-};
-
 /**
  * Metadata to configure the stories for a component.
  *
  * @see [Default export](https://storybook.js.org/docs/formats/component-story-format/#default-export)
  */
-export type Meta<TArgs = Args> = ComponentAnnotations<ReactFramework, TArgs>;
+export type Meta<TArgs = Args> = ComponentAnnotations<ServerFramework, TArgs>;
 
 /**
  * Story function that represents a CSFv2 component example.
  *
  * @see [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports)
  */
-export type StoryFn<TArgs = Args> = AnnotatedStoryFn<ReactFramework, TArgs>;
+export type StoryFn<TArgs = Args> = AnnotatedStoryFn<ServerFramework, TArgs>;
 
 /**
  * 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 StoryObj<TArgs = Args> = StoryAnnotations<ReactFramework, TArgs>;
+export type StoryObj<TArgs = Args> = StoryAnnotations<ServerFramework, TArgs>;
 
 /**
- * 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<TArgs = Args> = StoryFn<TArgs>;
+export type Story<TArgs = Args> = StoryObj<TArgs>;
diff --git a/renderers/server/src/preview/render.ts b/renderers/server/src/render.ts
similarity index 97%
rename from renderers/server/src/preview/render.ts
rename to renderers/server/src/render.ts
index d5824007d10e..2d9935fd3da8 100644
--- a/renderers/server/src/preview/render.ts
+++ b/renderers/server/src/render.ts
@@ -1,9 +1,11 @@
 /* eslint-disable no-param-reassign */
+// @ts-ignore
 import global from 'global';
+
 import dedent from 'ts-dedent';
 import type { RenderContext } from '@storybook/store';
 import { simulatePageLoad, simulateDOMContentLoaded } from '@storybook/preview-web';
-import type { StoryFn, Args, ArgTypes } from '@storybook/csf';
+import type { StoryFn, Args, ArgTypes } from './public-types';
 import type { FetchStoryHtmlType, ServerFramework } from './types';
 
 const { fetch, Node } = global;
diff --git a/renderers/server/src/preview/types.ts b/renderers/server/src/types.ts
similarity index 78%
rename from renderers/server/src/preview/types.ts
rename to renderers/server/src/types.ts
index 49ea0be369ba..63135a374519 100644
--- a/renderers/server/src/preview/types.ts
+++ b/renderers/server/src/types.ts
@@ -1,8 +1,9 @@
-import type { StoryContext } from '@storybook/csf';
+import type { StoryContext as StoryContextBase } from '@storybook/csf';
 
 export type { RenderContext } from '@storybook/core-client';
 
 export type StoryFnServerReturnType = any;
+export type StoryContext = StoryContextBase<ServerFramework>;
 
 export type ServerFramework = {
   component: string;
@@ -13,7 +14,7 @@ export type FetchStoryHtmlType = (
   url: string,
   id: string,
   params: any,
-  context: StoryContext<ServerFramework>
+  context: StoryContext
 ) => Promise<string | Node>;
 
 export interface IStorybookStory {
diff --git a/renderers/server/src/typings.d.ts b/renderers/server/src/typings.d.ts
deleted file mode 100644
index d8f7c6f660ad..000000000000
--- a/renderers/server/src/typings.d.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-declare module 'global';
-
-// will be provided by the webpack define plugin
-declare var NODE_ENV: string | undefined;
diff --git a/renderers/svelte/src/config.ts b/renderers/svelte/src/config.ts
index a31cdced623a..9a610c6ea525 100644
--- a/renderers/svelte/src/config.ts
+++ b/renderers/svelte/src/config.ts
@@ -1,5 +1,7 @@
 import { parameters as docsParams } from './docs/config';
 
-export const parameters = { framework: 'svelte', ...docsParams };
+export const parameters = { framework: 'svelte' as const, ...docsParams };
 export { decorators, argTypesEnhancers } from './docs/config';
-export * from './preview/config';
+
+export { render, renderToDOM } from './render';
+export { decorateStory as applyDecorators } from './decorators';
diff --git a/renderers/svelte/src/preview/decorators.ts b/renderers/svelte/src/decorators.ts
similarity index 100%
rename from renderers/svelte/src/preview/decorators.ts
rename to renderers/svelte/src/decorators.ts
diff --git a/renderers/svelte/src/preview/globals.ts b/renderers/svelte/src/globals.ts
similarity index 88%
rename from renderers/svelte/src/preview/globals.ts
rename to renderers/svelte/src/globals.ts
index a2fb5c9dad10..ef11f3f311d0 100644
--- a/renderers/svelte/src/preview/globals.ts
+++ b/renderers/svelte/src/globals.ts
@@ -1,3 +1,4 @@
+// @ts-ignore
 import global from 'global';
 
 const { window: globalWindow } = global;
diff --git a/renderers/svelte/src/index.ts b/renderers/svelte/src/index.ts
index 0088e1b3ad16..6f07e864d3e9 100644
--- a/renderers/svelte/src/index.ts
+++ b/renderers/svelte/src/index.ts
@@ -1,13 +1,7 @@
-export {
-  storiesOf,
-  setAddon,
-  addDecorator,
-  addParameters,
-  configure,
-  getStorybook,
-  forceReRender,
-  raw,
-} from './preview';
+import './globals';
+
+export * from './public-api';
+export * from './public-types';
 
 // optimization: stop HMR propagation in webpack
 module?.hot?.decline();
diff --git a/renderers/svelte/src/preview/config.ts b/renderers/svelte/src/preview/config.ts
deleted file mode 100644
index 462509286644..000000000000
--- a/renderers/svelte/src/preview/config.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export { render, renderToDOM } from './render';
-export { decorateStory as applyDecorators } from './decorators';
-
-export const parameters = { framework: 'svelte' };
diff --git a/renderers/svelte/src/preview/index.ts b/renderers/svelte/src/public-api.ts
similarity index 79%
rename from renderers/svelte/src/preview/index.ts
rename to renderers/svelte/src/public-api.ts
index aff0d0fd00ea..e452f3496716 100644
--- a/renderers/svelte/src/preview/index.ts
+++ b/renderers/svelte/src/public-api.ts
@@ -1,7 +1,6 @@
 import { start } from '@storybook/core-client';
 import { decorateStory } from './decorators';
 
-import './globals';
 import { render, renderToDOM } from './render';
 
 const {
@@ -16,9 +15,9 @@ const {
 export const { setAddon, addDecorator, addParameters, clearDecorators, getStorybook, raw } =
   clientApi;
 
-const framework = 'svelte';
+const FRAMEWORK = 'svelte';
 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/renderers/svelte/src/public-types.ts b/renderers/svelte/src/public-types.ts
new file mode 100644
index 000000000000..d3d0eb46616b
--- /dev/null
+++ b/renderers/svelte/src/public-types.ts
@@ -0,0 +1,37 @@
+import type {
+  Args,
+  ComponentAnnotations,
+  StoryAnnotations,
+  AnnotatedStoryFn,
+} from '@storybook/csf';
+import { SvelteFramework } from './types';
+
+export type { Args, ArgTypes, Parameters, StoryContext } from '@storybook/csf';
+
+/**
+ * Metadata to configure the stories for a component.
+ *
+ * @see [Default export](https://storybook.js.org/docs/formats/component-story-format/#default-export)
+ */
+export type Meta<TArgs = Args> = ComponentAnnotations<SvelteFramework, TArgs>;
+
+/**
+ * Story function that represents a CSFv2 component example.
+ *
+ * @see [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports)
+ */
+export type StoryFn<TArgs = Args> = AnnotatedStoryFn<SvelteFramework, TArgs>;
+
+/**
+ * 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 StoryObj<TArgs = Args> = StoryAnnotations<SvelteFramework, TArgs>;
+
+/**
+ * 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<TArgs = Args> = StoryObj<TArgs>;
diff --git a/renderers/svelte/src/preview/render.ts b/renderers/svelte/src/render.ts
similarity index 93%
rename from renderers/svelte/src/preview/render.ts
rename to renderers/svelte/src/render.ts
index fcdb0eb121a8..a4341f3b2a35 100644
--- a/renderers/svelte/src/preview/render.ts
+++ b/renderers/svelte/src/render.ts
@@ -1,4 +1,6 @@
+// @ts-ignore
 import global from 'global';
+
 import type { ArgsStoryFn } from '@storybook/csf';
 import type { RenderContext } from '@storybook/store';
 // eslint-disable-next-line import/no-extraneous-dependencies
@@ -23,7 +25,7 @@ export function renderToDOM(
 ) {
   cleanUpPreviousStory();
 
-  const target = document.getElementById('root');
+  const target = domElement || document.getElementById('root');
 
   target.innerHTML = '';
 
diff --git a/renderers/svelte/src/preview/types.ts b/renderers/svelte/src/types.ts
similarity index 77%
rename from renderers/svelte/src/preview/types.ts
rename to renderers/svelte/src/types.ts
index 8ae9557dd749..d4c7d2b2cc32 100644
--- a/renderers/svelte/src/preview/types.ts
+++ b/renderers/svelte/src/types.ts
@@ -1,5 +1,9 @@
+import type { StoryContext as StoryContextBase } from '@storybook/csf';
+
 export type { RenderContext } from '@storybook/core-client';
 
+export type StoryContext = StoryContextBase<SvelteFramework>;
+
 export interface ShowErrorArgs {
   title: string;
   description: string;
diff --git a/renderers/svelte/src/typings.d.ts b/renderers/svelte/src/typings.d.ts
index 153074abe8ca..48e7ba6228fd 100644
--- a/renderers/svelte/src/typings.d.ts
+++ b/renderers/svelte/src/typings.d.ts
@@ -1,4 +1,3 @@
-declare module 'global';
 declare module '@storybook/svelte/templates/SlotDecorator.svelte';
 declare module '@storybook/svelte/templates/PreviewRender.svelte';
 declare module '@storybook/svelte/templates/HOC.svelte';
diff --git a/renderers/vue/src/config.ts b/renderers/vue/src/config.ts
index e96a09ba2452..3eac7029c16e 100644
--- a/renderers/vue/src/config.ts
+++ b/renderers/vue/src/config.ts
@@ -1,5 +1,7 @@
 import { parameters as docsParams } from './docs/config';
 
-export const parameters = { framework: 'vue', ...docsParams };
+export const parameters = { framework: 'vue' as const, ...docsParams };
 export { decorators, argTypesEnhancers } from './docs/config';
-export * from './preview/config';
+
+export { render, renderToDOM } from './render';
+export { decorateStory as applyDecorators } from './decorateStory';
diff --git a/renderers/vue/src/preview/decorateStory.ts b/renderers/vue/src/decorateStory.ts
similarity index 96%
rename from renderers/vue/src/preview/decorateStory.ts
rename to renderers/vue/src/decorateStory.ts
index 490df79b9ea0..735cc1b0c118 100644
--- a/renderers/vue/src/preview/decorateStory.ts
+++ b/renderers/vue/src/decorateStory.ts
@@ -2,8 +2,7 @@ import Vue, { VueConstructor, ComponentOptions } from 'vue';
 import type { DecoratorFunction, StoryContext, LegacyStoryFn } from '@storybook/csf';
 import { sanitizeStoryContextUpdate } from '@storybook/store';
 
-import type { StoryFnVueReturnType } from './types';
-import type { VueFramework } from './types-6-0';
+import type { StoryFnVueReturnType, VueFramework } from './types';
 import { extractProps } from './util';
 import { VALUES } from './render';
 
diff --git a/renderers/vue/src/docs/sourceDecorator.ts b/renderers/vue/src/docs/sourceDecorator.ts
index 339289803d56..f60a76db81c8 100644
--- a/renderers/vue/src/docs/sourceDecorator.ts
+++ b/renderers/vue/src/docs/sourceDecorator.ts
@@ -1,15 +1,14 @@
 /* eslint-disable no-underscore-dangle */
 /* eslint no-underscore-dangle: ["error", { "allow": ["_vnode"] }] */
 
-import type { StoryContext } from '@storybook/csf';
 import { addons } from '@storybook/addons';
 import { logger } from '@storybook/client-logger';
 import type Vue from 'vue';
 
 import { SourceType, SNIPPET_RENDERED } from '@storybook/docs-tools';
-import type { VueFramework } from '../preview/types-6-0';
+import type { StoryContext } from '../types';
 
-export const skipSourceRender = (context: StoryContext<VueFramework>) => {
+export const skipSourceRender = (context: StoryContext) => {
   const sourceParams = context?.parameters.docs?.source;
   const isArgsStory = context?.parameters.__isArgsStory;
 
@@ -23,7 +22,7 @@ export const skipSourceRender = (context: StoryContext<VueFramework>) => {
   return !isArgsStory || sourceParams?.code || sourceParams?.type === SourceType.CODE;
 };
 
-export const sourceDecorator = (storyFn: any, context: StoryContext<VueFramework>) => {
+export const sourceDecorator = (storyFn: any, context: StoryContext) => {
   const story = storyFn();
 
   // See ../react/jsxDecorator.tsx
diff --git a/renderers/vue/src/preview/globals.ts b/renderers/vue/src/globals.ts
similarity index 91%
rename from renderers/vue/src/preview/globals.ts
rename to renderers/vue/src/globals.ts
index 29010d515f81..59cd596fcbee 100644
--- a/renderers/vue/src/preview/globals.ts
+++ b/renderers/vue/src/globals.ts
@@ -1,3 +1,4 @@
+// @ts-ignore
 import global from 'global';
 
 const { window: globalWindow } = global;
diff --git a/renderers/vue/src/index.ts b/renderers/vue/src/index.ts
index 60fb2a70d1a0..6f07e864d3e9 100644
--- a/renderers/vue/src/index.ts
+++ b/renderers/vue/src/index.ts
@@ -1,15 +1,7 @@
-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';
 
 // optimization: stop HMR propagation in webpack
 module?.hot?.decline();
diff --git a/renderers/vue/src/preview/config.ts b/renderers/vue/src/preview/config.ts
deleted file mode 100644
index 759c77b9abeb..000000000000
--- a/renderers/vue/src/preview/config.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export { render, renderToDOM } from './render';
-export { decorateStory as applyDecorators } from './decorateStory';
-
-export const parameters = { framework: 'vue' };
diff --git a/renderers/vue/src/preview/types-7-0.ts b/renderers/vue/src/preview/types-7-0.ts
deleted file mode 100644
index d897ad97a81a..000000000000
--- a/renderers/vue/src/preview/types-7-0.ts
+++ /dev/null
@@ -1,14 +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<TArgs = Args> = StoryObj<TArgs>;
diff --git a/renderers/vue/src/preview/index.ts b/renderers/vue/src/public-api.ts
similarity index 88%
rename from renderers/vue/src/preview/index.ts
rename to renderers/vue/src/public-api.ts
index e8985e883e66..02fa2decbf7b 100644
--- a/renderers/vue/src/preview/index.ts
+++ b/renderers/vue/src/public-api.ts
@@ -2,13 +2,11 @@
 import { start } from '@storybook/core-client';
 import type { ClientStoryApi, Loadable } from '@storybook/addons';
 
-import './globals';
-import type { IStorybookSection } from './types';
-import type { VueFramework } from './types-6-0';
+import type { IStorybookSection, VueFramework } from './types';
 import { renderToDOM, render } from './render';
 import { decorateStory } from './decorateStory';
 
-const framework = 'vue';
+const FRAMEWORK = 'vue';
 
 interface ClientApi extends ClientStoryApi<VueFramework['storyResult']> {
   setAddon(addon: any): void;
@@ -24,11 +22,11 @@ const api = start(renderToDOM, { decorateStory, render });
 
 export const storiesOf: ClientApi['storiesOf'] = (kind, m) => {
   return (api.clientApi.storiesOf(kind, m) as ReturnType<ClientApi['storiesOf']>).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/renderers/vue/src/preview/types-6-0.ts b/renderers/vue/src/public-types.ts
similarity index 68%
rename from renderers/vue/src/preview/types-6-0.ts
rename to renderers/vue/src/public-types.ts
index dcd515791c01..7d1185e6ca6f 100644
--- a/renderers/vue/src/preview/types-6-0.ts
+++ b/renderers/vue/src/public-types.ts
@@ -1,19 +1,13 @@
-import type { Component, AsyncComponent } from 'vue';
 import type {
   Args,
   ComponentAnnotations,
   StoryAnnotations,
   AnnotatedStoryFn,
 } from '@storybook/csf';
-import type { StoryFnVueReturnType } from './types';
+import { VueFramework } from './types';
 
 export type { Args, ArgTypes, Parameters, StoryContext } from '@storybook/csf';
 
-export type VueFramework = {
-  component: Component<any, any, any, any> | AsyncComponent<any, any, any, any>;
-  storyResult: StoryFnVueReturnType;
-};
-
 /**
  * Metadata to configure the stories for a component.
  *
@@ -36,11 +30,8 @@ export type StoryFn<TArgs = Args> = AnnotatedStoryFn<VueFramework, TArgs>;
 export type StoryObj<TArgs = Args> = StoryAnnotations<VueFramework, TArgs>;
 
 /**
- * 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<TArgs = Args> = StoryFn<TArgs>;
+export type Story<TArgs = Args> = StoryObj<TArgs>;
diff --git a/renderers/vue/src/preview/render.ts b/renderers/vue/src/render.ts
similarity index 98%
rename from renderers/vue/src/preview/render.ts
rename to renderers/vue/src/render.ts
index 715073e7c65a..b0c1cca3d713 100644
--- a/renderers/vue/src/preview/render.ts
+++ b/renderers/vue/src/render.ts
@@ -4,7 +4,7 @@ import Vue from 'vue';
 import type { RenderContext } from '@storybook/store';
 import type { ArgsStoryFn } from '@storybook/csf';
 import { CombinedVueInstance } from 'vue/types/vue';
-import type { VueFramework } from './types-6-0';
+import type { VueFramework } from './types';
 
 export const COMPONENT = 'STORYBOOK_COMPONENT';
 export const VALUES = 'STORYBOOK_VALUES';
diff --git a/renderers/vue/src/preview/types.ts b/renderers/vue/src/types.ts
similarity index 55%
rename from renderers/vue/src/preview/types.ts
rename to renderers/vue/src/types.ts
index 1e30ce789344..77f8d3550c6c 100644
--- a/renderers/vue/src/preview/types.ts
+++ b/renderers/vue/src/types.ts
@@ -1,4 +1,5 @@
-import { Component } from 'vue';
+import type { StoryContext as StoryContextBase } from '@storybook/csf';
+import type { Component, AsyncComponent } from 'vue';
 
 export type { RenderContext } from '@storybook/core-client';
 
@@ -10,6 +11,8 @@ export interface ShowErrorArgs {
 // TODO: some vue expert needs to look at this
 export type StoryFnVueReturnType = string | Component;
 
+export type StoryContext = StoryContextBase<VueFramework>;
+
 export interface IStorybookStory {
   name: string;
   render: (context: any) => any;
@@ -19,3 +22,8 @@ export interface IStorybookSection {
   kind: string;
   stories: IStorybookStory[];
 }
+
+export type VueFramework = {
+  component: Component<any, any, any, any> | AsyncComponent<any, any, any, any>;
+  storyResult: StoryFnVueReturnType;
+};
diff --git a/renderers/vue/src/typings.d.ts b/renderers/vue/src/typings.d.ts
deleted file mode 100644
index 2f4eb9cf4fd9..000000000000
--- a/renderers/vue/src/typings.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-declare module 'global';
diff --git a/renderers/vue/src/preview/util.ts b/renderers/vue/src/util.ts
similarity index 100%
rename from renderers/vue/src/preview/util.ts
rename to renderers/vue/src/util.ts
diff --git a/renderers/vue3/src/config.ts b/renderers/vue3/src/config.ts
index a70c17e19b52..68c56ebd1cd4 100644
--- a/renderers/vue3/src/config.ts
+++ b/renderers/vue3/src/config.ts
@@ -1,5 +1,7 @@
 import { parameters as docsParams } from './docs/config';
 
-export const parameters = { framework: 'vue3', ...docsParams };
+export const parameters = { framework: 'vue3' as const, ...docsParams };
 export { argTypesEnhancers } from './docs/config';
-export * from './preview/config';
+
+export { render, renderToDOM } from './render';
+export { decorateStory as applyDecorators } from './decorateStory';
diff --git a/renderers/vue3/src/preview/decorateStory.ts b/renderers/vue3/src/decorateStory.ts
similarity index 97%
rename from renderers/vue3/src/preview/decorateStory.ts
rename to renderers/vue3/src/decorateStory.ts
index 22fc50e6bbf9..7cbbe47b7b90 100644
--- a/renderers/vue3/src/preview/decorateStory.ts
+++ b/renderers/vue3/src/decorateStory.ts
@@ -3,7 +3,7 @@ import { h } from 'vue';
 import type { DecoratorFunction, StoryContext, LegacyStoryFn } from '@storybook/csf';
 import { sanitizeStoryContextUpdate } from '@storybook/store';
 
-import type { VueFramework } from './types-6-0';
+import type { VueFramework } from './types';
 
 /*
   This normalizes a functional component into a render method in ComponentOptions.
diff --git a/renderers/vue3/src/preview/globals.ts b/renderers/vue3/src/globals.ts
similarity index 91%
rename from renderers/vue3/src/preview/globals.ts
rename to renderers/vue3/src/globals.ts
index 33ee3fbb8f91..2e6bd7ad85df 100644
--- a/renderers/vue3/src/preview/globals.ts
+++ b/renderers/vue3/src/globals.ts
@@ -1,3 +1,4 @@
+// @ts-ignore
 import global from 'global';
 
 const { window: globalWindow } = global;
diff --git a/renderers/vue3/src/index.ts b/renderers/vue3/src/index.ts
index 50f31840280e..6f07e864d3e9 100644
--- a/renderers/vue3/src/index.ts
+++ b/renderers/vue3/src/index.ts
@@ -1,16 +1,7 @@
-export {
-  storiesOf,
-  setAddon,
-  addDecorator,
-  addParameters,
-  configure,
-  getStorybook,
-  forceReRender,
-  raw,
-  setup,
-} from './preview';
+import './globals';
 
-export * from './preview/types-6-0';
+export * from './public-api';
+export * from './public-types';
 
 // optimization: stop HMR propagation in webpack
 module?.hot?.decline();
diff --git a/renderers/vue3/src/preview/config.ts b/renderers/vue3/src/preview/config.ts
deleted file mode 100644
index 589efca6a13f..000000000000
--- a/renderers/vue3/src/preview/config.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export { render, renderToDOM } from './render';
-export { decorateStory as applyDecorators } from './decorateStory';
-
-export const parameters = { framework: 'vue3' };
diff --git a/renderers/vue3/src/preview/types-7-0.ts b/renderers/vue3/src/preview/types-7-0.ts
deleted file mode 100644
index d897ad97a81a..000000000000
--- a/renderers/vue3/src/preview/types-7-0.ts
+++ /dev/null
@@ -1,14 +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<TArgs = Args> = StoryObj<TArgs>;
diff --git a/renderers/vue3/src/preview/index.ts b/renderers/vue3/src/public-api.ts
similarity index 86%
rename from renderers/vue3/src/preview/index.ts
rename to renderers/vue3/src/public-api.ts
index 67753955d499..d93bdec4d09a 100644
--- a/renderers/vue3/src/preview/index.ts
+++ b/renderers/vue3/src/public-api.ts
@@ -2,14 +2,12 @@ import type { App } from 'vue';
 import { start } from '@storybook/core-client';
 import type { ClientStoryApi, Loadable } from '@storybook/addons';
 
-import './globals';
-import type { IStorybookSection } from './types';
-import type { VueFramework } from './types-6-0';
+import type { IStorybookSection, VueFramework } from './types';
 import { decorateStory } from './decorateStory';
 
 import { render, renderToDOM } from './render';
 
-const framework = 'vue3';
+const FRAMEWORK = 'vue3';
 
 interface ClientApi extends ClientStoryApi<VueFramework['storyResult']> {
   setAddon(addon: any): void;
@@ -26,11 +24,11 @@ const api = start(renderToDOM, { decorateStory, render });
 
 export const storiesOf: ClientApi['storiesOf'] = (kind, m) => {
   return (api.clientApi.storiesOf(kind, m) as ReturnType<ClientApi['storiesOf']>).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 } = api.clientApi;
 export const { addParameters } = api.clientApi;
 export const { clearDecorators } = api.clientApi;
diff --git a/renderers/vue3/src/preview/types-6-0.ts b/renderers/vue3/src/public-types.ts
similarity index 71%
rename from renderers/vue3/src/preview/types-6-0.ts
rename to renderers/vue3/src/public-types.ts
index 741a1e50fae3..297ae031839a 100644
--- a/renderers/vue3/src/preview/types-6-0.ts
+++ b/renderers/vue3/src/public-types.ts
@@ -1,19 +1,13 @@
-import type { ConcreteComponent } from 'vue';
 import type {
   Args,
   ComponentAnnotations,
   StoryAnnotations,
   AnnotatedStoryFn,
 } from '@storybook/csf';
-import type { StoryFnVueReturnType } from './types';
+import { VueFramework } from './types';
 
 export type { Args, ArgTypes, Parameters, StoryContext } from '@storybook/csf';
 
-export type VueFramework = {
-  component: ConcreteComponent<any>;
-  storyResult: StoryFnVueReturnType;
-};
-
 /**
  * Metadata to configure the stories for a component.
  *
@@ -35,12 +29,11 @@ export type StoryFn<TArgs = Args> = AnnotatedStoryFn<VueFramework, TArgs>;
  */
 export type StoryObj<TArgs = Args> = StoryAnnotations<VueFramework, TArgs>;
 
+// NOTE these types are reversed from the way they are in types-6-0 and types-6-3
+
 /**
- * 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<TArgs = Args> = StoryFn<TArgs>;
+export type Story<TArgs = Args> = StoryObj<TArgs>;
diff --git a/renderers/vue3/src/preview/render.ts b/renderers/vue3/src/render.ts
similarity index 95%
rename from renderers/vue3/src/preview/render.ts
rename to renderers/vue3/src/render.ts
index de0c849feea4..901e4eaa8f22 100644
--- a/renderers/vue3/src/preview/render.ts
+++ b/renderers/vue3/src/render.ts
@@ -3,8 +3,7 @@ import { createApp, h } from 'vue';
 import type { RenderContext } from '@storybook/store';
 import type { ArgsStoryFn } from '@storybook/csf';
 
-import { StoryFnVueReturnType } from './types';
-import { VueFramework } from './types-6-0';
+import { StoryFnVueReturnType, VueFramework } from './types';
 
 export const render: ArgsStoryFn<VueFramework> = (props, context) => {
   const { id, component: Component } = context;
diff --git a/renderers/vue3/src/preview/types.ts b/renderers/vue3/src/types.ts
similarity index 56%
rename from renderers/vue3/src/preview/types.ts
rename to renderers/vue3/src/types.ts
index 979536cd1385..f9b53c2bb266 100644
--- a/renderers/vue3/src/preview/types.ts
+++ b/renderers/vue3/src/types.ts
@@ -1,4 +1,5 @@
-import { ConcreteComponent } from 'vue';
+import type { StoryContext as StoryContextBase } from '@storybook/csf';
+import type { ConcreteComponent } from 'vue';
 
 export type { RenderContext } from '@storybook/core-client';
 
@@ -9,6 +10,8 @@ export interface ShowErrorArgs {
 
 export type StoryFnVueReturnType = ConcreteComponent<any>;
 
+export type StoryContext = StoryContextBase<VueFramework>;
+
 export interface IStorybookStory {
   name: string;
   render: (context: any) => any;
@@ -18,3 +21,8 @@ export interface IStorybookSection {
   kind: string;
   stories: IStorybookStory[];
 }
+
+export type VueFramework = {
+  component: ConcreteComponent<any>;
+  storyResult: StoryFnVueReturnType;
+};
diff --git a/renderers/vue3/src/typings.d.ts b/renderers/vue3/src/typings.d.ts
deleted file mode 100644
index 4dd567187328..000000000000
--- a/renderers/vue3/src/typings.d.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-declare module 'global';
-
-declare module 'vue-loader' {
-  export const VueLoaderPlugin: any
-}
diff --git a/renderers/web-components/src/config.ts b/renderers/web-components/src/config.ts
index c670320afefb..83d74fd4d9d9 100644
--- a/renderers/web-components/src/config.ts
+++ b/renderers/web-components/src/config.ts
@@ -1,5 +1,5 @@
 import { parameters as docsParams } from './docs/config';
 
-export const parameters = { framework: 'web-components', ...docsParams };
+export const parameters = { framework: 'web-components' as const, ...docsParams };
 export { decorators, argTypesEnhancers } from './docs/config';
-export * from './preview/config';
+export { renderToDOM } from './render';
diff --git a/renderers/web-components/src/docs/__testfixtures__/lit-element-demo-card/input.js b/renderers/web-components/src/docs/__testfixtures__/lit-element-demo-card/input.js
index 8ac6852e9117..2856e5980397 100644
--- a/renderers/web-components/src/docs/__testfixtures__/lit-element-demo-card/input.js
+++ b/renderers/web-components/src/docs/__testfixtures__/lit-element-demo-card/input.js
@@ -1,5 +1,7 @@
 /* eslint-disable import/no-unresolved */
+// @ts-ignore
 import global from 'global';
+
 import { LitElement, html, css } from 'lit-element';
 
 const { CustomEvent } = global;
diff --git a/renderers/web-components/src/docs/custom-elements.test.ts b/renderers/web-components/src/docs/custom-elements.test.ts
index 0d19418e7578..6f28b30dbc46 100644
--- a/renderers/web-components/src/docs/custom-elements.test.ts
+++ b/renderers/web-components/src/docs/custom-elements.test.ts
@@ -1,5 +1,7 @@
 /* eslint-disable no-underscore-dangle */
+// @ts-ignore
 import global from 'global';
+
 import { extractArgTypes } from './custom-elements';
 import customElementsManifest from './__testfixtures__/custom-elements.json';
 
diff --git a/renderers/web-components/src/docs/sourceDecorator.test.ts b/renderers/web-components/src/docs/sourceDecorator.test.ts
index 2612be374199..e08f0f3dee55 100644
--- a/renderers/web-components/src/docs/sourceDecorator.test.ts
+++ b/renderers/web-components/src/docs/sourceDecorator.test.ts
@@ -2,7 +2,7 @@ import { html } from 'lit-html';
 import { styleMap } from 'lit-html/directives/style-map';
 import { addons, useEffect } from '@storybook/addons';
 import { SNIPPET_RENDERED } from '@storybook/docs-tools';
-import type { StoryContext, WebComponentsFramework } from '..';
+import type { StoryContext } from '../types';
 import { sourceDecorator } from './sourceDecorator';
 
 jest.mock('@storybook/addons');
@@ -16,12 +16,7 @@ expect.addSnapshotSerializer({
 
 const tick = () => new Promise((r) => setTimeout(r, 0));
 
-const makeContext = (
-  name: string,
-  parameters: any,
-  args: any,
-  extra?: Partial<StoryContext<WebComponentsFramework>>
-) =>
+const makeContext = (name: string, parameters: any, args: any, extra?: Partial<StoryContext>) =>
   ({
     id: `lit-test--${name}`,
     kind: 'js-text',
@@ -31,7 +26,7 @@ const makeContext = (
     argTypes: {},
     globals: {},
     ...extra,
-  } as StoryContext<WebComponentsFramework>);
+  } as StoryContext);
 
 describe('sourceDecorator', () => {
   let mockChannel: { on: jest.Mock; emit?: jest.Mock };
diff --git a/renderers/web-components/src/docs/sourceDecorator.ts b/renderers/web-components/src/docs/sourceDecorator.ts
index 7c0e6d4ee0b2..da298cc94cc8 100644
--- a/renderers/web-components/src/docs/sourceDecorator.ts
+++ b/renderers/web-components/src/docs/sourceDecorator.ts
@@ -5,7 +5,7 @@ import type { ArgsStoryFn, PartialStoryFn, StoryContext } from '@storybook/csf';
 import { addons, useEffect } from '@storybook/addons';
 import { SNIPPET_RENDERED, SourceType } from '@storybook/docs-tools';
 
-import type { WebComponentsFramework } from '..';
+import type { WebComponentsFramework } from '../types';
 
 // Taken from https://github.com/lit/lit/blob/main/packages/lit-html/src/test/test-utils/strip-markers.ts
 const LIT_EXPRESSION_COMMENTS = /<!--\?lit\$[0-9]+\$-->|<!--\??-->/g;
diff --git a/renderers/web-components/src/customElements.ts b/renderers/web-components/src/framework-api.ts
similarity index 100%
rename from renderers/web-components/src/customElements.ts
rename to renderers/web-components/src/framework-api.ts
diff --git a/renderers/web-components/src/preview/globals.ts b/renderers/web-components/src/globals.ts
similarity index 89%
rename from renderers/web-components/src/preview/globals.ts
rename to renderers/web-components/src/globals.ts
index 3a96cebeb784..4fcf455937c1 100644
--- a/renderers/web-components/src/preview/globals.ts
+++ b/renderers/web-components/src/globals.ts
@@ -1,3 +1,4 @@
+// @ts-ignore
 import global from 'global';
 
 const { window: globalWindow } = global;
diff --git a/renderers/web-components/src/index.ts b/renderers/web-components/src/index.ts
index d43a49b2fa31..85a17dca3663 100644
--- a/renderers/web-components/src/index.ts
+++ b/renderers/web-components/src/index.ts
@@ -1,27 +1,13 @@
+// @ts-ignore
 import global from 'global';
 
 const { window, EventSource } = global;
 
-export {
-  storiesOf,
-  setAddon,
-  addDecorator,
-  addParameters,
-  configure,
-  getStorybook,
-  forceReRender,
-  raw,
-} from './preview';
+export * from './globals';
 
-export {
-  getCustomElements,
-  setCustomElements,
-  setCustomElementsManifest,
-  isValidComponent,
-  isValidMetaData,
-} from './customElements';
-
-export * from './preview/types-6-0';
+export * from './public-types';
+export * from './public-api';
+export * from './framework-api';
 
 // TODO: disable HMR and do full page loads because of customElements.define
 if (module && module.hot && module.hot.decline) {
diff --git a/renderers/web-components/src/preview/config.ts b/renderers/web-components/src/preview/config.ts
deleted file mode 100644
index 060cf504b4fe..000000000000
--- a/renderers/web-components/src/preview/config.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { renderToDOM } from './render';
diff --git a/renderers/web-components/src/preview/types-7-0.ts b/renderers/web-components/src/preview/types-7-0.ts
deleted file mode 100644
index d897ad97a81a..000000000000
--- a/renderers/web-components/src/preview/types-7-0.ts
+++ /dev/null
@@ -1,14 +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<TArgs = Args> = StoryObj<TArgs>;
diff --git a/renderers/web-components/src/preview/index.ts b/renderers/web-components/src/public-api.ts
similarity index 86%
rename from renderers/web-components/src/preview/index.ts
rename to renderers/web-components/src/public-api.ts
index 01b39edd05ed..9a9d84af6c41 100644
--- a/renderers/web-components/src/preview/index.ts
+++ b/renderers/web-components/src/public-api.ts
@@ -2,12 +2,10 @@
 import { start } from '@storybook/core-client';
 import type { ClientStoryApi, Loadable } from '@storybook/addons';
 
-import './globals';
 import { renderToDOM } from './render';
-import type { IStorybookSection } from './types';
-import type { WebComponentsFramework } from './types-6-0';
+import type { IStorybookSection, WebComponentsFramework } from './types';
 
-const framework = 'web-components';
+const FRAMEWORK = 'web-components';
 
 interface ClientApi extends ClientStoryApi<WebComponentsFramework['storyResult']> {
   setAddon(addon: any): void;
@@ -22,11 +20,11 @@ const api = start(renderToDOM);
 
 export const storiesOf: ClientApi['storiesOf'] = (kind, m) => {
   return (api.clientApi.storiesOf(kind, m) as ReturnType<ClientApi['storiesOf']>).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/renderers/web-components/src/preview/types-6-0.ts b/renderers/web-components/src/public-types.ts
similarity index 68%
rename from renderers/web-components/src/preview/types-6-0.ts
rename to renderers/web-components/src/public-types.ts
index 901b73c907b7..ba578cc29f0e 100644
--- a/renderers/web-components/src/preview/types-6-0.ts
+++ b/renderers/web-components/src/public-types.ts
@@ -1,17 +1,10 @@
 import type {
-  Args,
   ComponentAnnotations,
   StoryAnnotations,
   AnnotatedStoryFn,
+  Args,
 } from '@storybook/csf';
-import type { StoryFnHtmlReturnType } from './types';
-
-export type { Args, ArgTypes, Parameters, StoryContext } from '@storybook/csf';
-
-export type WebComponentsFramework = {
-  component: string;
-  storyResult: StoryFnHtmlReturnType;
-};
+import { WebComponentsFramework } from './types';
 
 /**
  * Metadata to configure the stories for a component.
@@ -34,12 +27,11 @@ export type StoryFn<TArgs = Args> = AnnotatedStoryFn<WebComponentsFramework, TAr
  */
 export type StoryObj<TArgs = Args> = StoryAnnotations<WebComponentsFramework, TArgs>;
 
+// NOTE these types are reversed from the way they are in types-6-0 and types-6-3
+
 /**
- * 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<TArgs = Args> = StoryFn<TArgs>;
+export type Story<TArgs = Args> = StoryObj<TArgs>;
diff --git a/renderers/web-components/src/preview/render.ts b/renderers/web-components/src/render.ts
similarity index 96%
rename from renderers/web-components/src/preview/render.ts
rename to renderers/web-components/src/render.ts
index b6fda6520950..1cd9cb0d78bb 100644
--- a/renderers/web-components/src/preview/render.ts
+++ b/renderers/web-components/src/render.ts
@@ -1,5 +1,7 @@
 /* eslint-disable no-param-reassign */
+// @ts-ignore
 import global from 'global';
+
 import dedent from 'ts-dedent';
 import { render } from 'lit-html';
 // Keep `.js` extension to avoid issue with Webpack (related to export map?)
@@ -7,7 +9,7 @@ import { render } from 'lit-html';
 import { isTemplateResult } from 'lit-html/directive-helpers.js';
 import { simulatePageLoad, simulateDOMContentLoaded } from '@storybook/preview-web';
 import type { RenderContext } from '@storybook/store';
-import { WebComponentsFramework } from './types-6-0';
+import { WebComponentsFramework } from './types';
 
 const { Node } = global;
 
diff --git a/renderers/web-components/src/preview/types.ts b/renderers/web-components/src/types.ts
similarity index 62%
rename from renderers/web-components/src/preview/types.ts
rename to renderers/web-components/src/types.ts
index 9a886e2b58b6..37f2b15dd6bb 100644
--- a/renderers/web-components/src/preview/types.ts
+++ b/renderers/web-components/src/types.ts
@@ -1,10 +1,15 @@
+import type { StoryContext as StoryContextBase } from '@storybook/csf';
 import type { TemplateResult, SVGTemplateResult } from 'lit-html';
 
-export type { RenderContext } from '@storybook/core-client';
-export type { Args, ArgTypes, Parameters, StoryContext } from '@storybook/addons';
-
 export type StoryFnHtmlReturnType = string | Node | TemplateResult | SVGTemplateResult;
 
+export type StoryContext = StoryContextBase<WebComponentsFramework>;
+
+export type WebComponentsFramework = {
+  component: string;
+  storyResult: StoryFnHtmlReturnType;
+};
+
 export interface IStorybookStory {
   name: string;
   render: (context: any) => any;
diff --git a/renderers/web-components/src/typings.d.ts b/renderers/web-components/src/typings.d.ts
deleted file mode 100644
index d8f7c6f660ad..000000000000
--- a/renderers/web-components/src/typings.d.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-declare module 'global';
-
-// will be provided by the webpack define plugin
-declare var NODE_ENV: string | undefined;