Merge branch 'next' into 22176-csf-tools-strict-ts

MIGRATION.md

@@ -2814,7 +2814,7 @@ To help you upgrade your stories, we've created a codemod:
 npx @storybook/cli@latest migrate csf-hoist-story-annotations --glob="**/*.stories.js"
 ```
 
-For more information, [see the documentation](https://github.com/storybookjs/storybook/blob/next/lib/codemod/README.md#csf-hoist-story-annotations).
+For more information, [see the documentation](https://github.com/storybookjs/storybook/blob/next/code/lib/codemod/README.md#csf-hoist-story-annotations).
 
 ### Zero config typescript
 
@@ -2868,7 +2868,7 @@ npm install core-js@^3.0.1 --save-dev
 
 ### Args passed as first argument to story
 
-Starting in 6.0, the first argument to a story function is an [Args object](https://storybook.js.org/docs/react/api/csf#args-story-inputs). In 5.3 and earlier, the first argument was a [StoryContext](https://github.com/storybookjs/storybook/blob/next/lib/addons/src/types.ts#L49-L61), and that context is now passed as the second argument by default.
+Starting in 6.0, the first argument to a story function is an [Args object](https://storybook.js.org/docs/react/api/csf#args-story-inputs). In 5.3 and earlier, the first argument was a [StoryContext](https://github.com/storybookjs/storybook/blob/release/5.3/lib/addons/src/types.ts#L24-L31), and that context is now passed as the second argument by default.
 
 This breaking change only affects you if your stories actually use the context, which is not common. If you have any stories that use the context, you can either (1) update your stories, or (2) set a flag to opt-out of new behavior.
 
@@ -3102,7 +3102,7 @@ The story store no longer emits `renderCurrentStory`/`RENDER_CURRENT_STORY` to t
 
 We've removed the ability to specify the hierarchy separators (how you control the grouping of story kinds in the sidebar). From Storybook 6.0 we have a single separator `/`, which cannot be configured.
 
-If you are currently using custom separators, we encourage you to migrate to using `/` as the sole separator. If you are using `|` or `.` as a separator currently, we provide a codemod, [`upgrade-hierarchy-separators`](https://github.com/storybookjs/storybook/blob/next/lib/codemod/README.md#upgrade-hierarchy-separators), that can be used to rename your components. **Note: the codemod will not work for `.mdx` components, you will need to make the changes by hand.**
+If you are currently using custom separators, we encourage you to migrate to using `/` as the sole separator. If you are using `|` or `.` as a separator currently, we provide a codemod, [`upgrade-hierarchy-separators`](https://github.com/storybookjs/storybook/blob/next/code/lib/codemod/README.md#upgrade-hierarchy-separators), that can be used to rename your components. **Note: the codemod will not work for `.mdx` components, you will need to make the changes by hand.**
 
 ```
 npx sb@latest migrate upgrade-hierarchy-separators --glob="*/**/*.stories.@(tsx|jsx|ts|js)"
@@ -3593,7 +3593,7 @@ Addon-docs configuration gets simpler in 5.3. In 5.2, each framework had its own
 
 We've deprecated the ability to specify the hierarchy separators (how you control the grouping of story kinds in the sidebar). From Storybook 6.0 we will have a single separator `/`, which cannot be configured.
 
-If you are currently using custom separators, we encourage you to migrate to using `/` as the sole separator. If you are using `|` or `.` as a separator currently, we provide a codemod, [`upgrade-hierarchy-separators`](https://github.com/storybookjs/storybook/blob/next/lib/codemod/README.md#upgrade-hierarchy-separators), that can be used to rename all your components.
+If you are currently using custom separators, we encourage you to migrate to using `/` as the sole separator. If you are using `|` or `.` as a separator currently, we provide a codemod, [`upgrade-hierarchy-separators`](https://github.com/storybookjs/storybook/blob/next/code/lib/codemod/README.md#upgrade-hierarchy-separators), that can be used to rename all your components.
 
 ```
 yarn sb migrate upgrade-hierarchy-separators --glob="*.stories.js"
@@ -4461,7 +4461,7 @@ The new package names are:
 
 If your codebase is small, it's probably doable to replace them by hand (in your codebase and in `package.json`).
 
-But if you have a lot of occurrences in your codebase, you can use a [codemod we created](./lib/codemod) for you.
+But if you have a lot of occurrences in your codebase, you can use a [codemod we created](./code/lib/codemod) for you.
 
 > A codemod makes automatic changed to your app's code.
 

code/addons/a11y/package.json

@@ -18,7 +18,7 @@
   "repository": {
     "type": "git",
     "url": "https://github.com/storybookjs/storybook.git",
-    "directory": "addons/a11y"
+    "directory": "code/addons/a11y"
   },
   "funding": {
     "type": "opencollective",

code/addons/actions/package.json

@@ -14,7 +14,7 @@
   "repository": {
     "type": "git",
     "url": "https://github.com/storybookjs/storybook.git",
-    "directory": "addons/actions"
+    "directory": "code/addons/actions"
   },
   "funding": {
     "type": "opencollective",

code/addons/backgrounds/package.json

@@ -17,7 +17,7 @@
   "repository": {
     "type": "git",
     "url": "https://github.com/storybookjs/storybook.git",
-    "directory": "addons/backgrounds"
+    "directory": "code/addons/backgrounds"
   },
   "funding": {
     "type": "opencollective",

code/addons/backgrounds/src/preview.tsx

@@ -1,8 +1,9 @@
+import type { Addon_DecoratorFunction } from '@storybook/types';
 import { withBackground } from './decorators/withBackground';
 import { withGrid } from './decorators/withGrid';
 import { PARAM_KEY } from './constants';
 
-export const decorators = [withGrid, withBackground];
+export const decorators: Addon_DecoratorFunction[] = [withGrid, withBackground];
 export const parameters = {
   [PARAM_KEY]: {
     grid: {

code/addons/controls/package.json

@@ -18,7 +18,7 @@
   "repository": {
     "type": "git",
     "url": "https://github.com/storybookjs/storybook.git",
-    "directory": "addons/controls"
+    "directory": "code/addons/controls"
   },
   "funding": {
     "type": "opencollective",

code/addons/docs/package.json

@@ -17,7 +17,7 @@
   "repository": {
     "type": "git",
     "url": "https://github.com/storybookjs/storybook.git",
-    "directory": "addons/docs"
+    "directory": "code/addons/docs"
   },
   "funding": {
     "type": "opencollective",

code/addons/docs/src/DocsRenderer.tsx

@@ -48,14 +48,16 @@ export class DocsRenderer<TRenderer extends Renderer> {
         ...docsParameter?.components,
       };
 
+      const TDocs = Docs as typeof Docs<TRenderer>;
+
       return new Promise((resolve, reject) => {
         import('@mdx-js/react')
           .then(({ MDXProvider }) =>
             // We use a `key={}` here to reset the `hasError` state each time we render ErrorBoundary
             renderElement(
               <ErrorBoundary showException={reject} key={Math.random()}>
                 <MDXProvider components={components}>
-                  <Docs context={context} docsParameter={docsParameter} />
+                  <TDocs context={context} docsParameter={docsParameter} />
                 </MDXProvider>
               </ErrorBoundary>,
               element

code/addons/essentials/package.json

@@ -14,7 +14,7 @@
   "repository": {
     "type": "git",
     "url": "https://github.com/storybookjs/storybook.git",
-    "directory": "addons/essentials"
+    "directory": "code/addons/essentials"
   },
   "funding": {
     "type": "opencollective",

code/addons/gfm/package.json

@@ -17,7 +17,7 @@
   "repository": {
     "type": "git",
     "url": "https://github.com/storybookjs/storybook.git",
-    "directory": "addons/gfm"
+    "directory": "code/addons/gfm"
   },
   "funding": {
     "type": "opencollective",

code/addons/highlight/package.json

@@ -15,7 +15,7 @@
   "repository": {
     "type": "git",
     "url": "https://github.com/storybookjs/storybook.git",
-    "directory": "addons/highlight"
+    "directory": "code/addons/highlight"
   },
   "funding": {
     "type": "opencollective",

code/addons/interactions/package.json

@@ -14,7 +14,7 @@
   "repository": {
     "type": "git",
     "url": "https://github.com/storybookjs/storybook.git",
-    "directory": "addons/interactions"
+    "directory": "code/addons/interactions"
   },
   "funding": {
     "type": "opencollective",

code/addons/jest/package.json

@@ -19,7 +19,7 @@
   "repository": {
     "type": "git",
     "url": "https://github.com/storybookjs/storybook.git",
-    "directory": "addons/jest"
+    "directory": "code/addons/jest"
   },
   "funding": {
     "type": "opencollective",

code/addons/links/package.json

@@ -14,7 +14,7 @@
   "repository": {
     "type": "git",
     "url": "https://github.com/storybookjs/storybook.git",
-    "directory": "addons/links"
+    "directory": "code/addons/links"
   },
   "funding": {
     "type": "opencollective",

code/addons/links/src/preview.ts

@@ -1,3 +1,4 @@
+import type { Addon_DecoratorFunction } from '@storybook/types';
 import { withLinks } from './index';
 
-export const decorators = [withLinks];
+export const decorators: Addon_DecoratorFunction[] = [withLinks];

code/addons/measure/package.json

@@ -16,7 +16,7 @@
   "repository": {
     "type": "git",
     "url": "https://github.com/storybookjs/storybook.git",
-    "directory": "addons/measure"
+    "directory": "code/addons/measure"
   },
   "funding": {
     "type": "opencollective",

code/addons/measure/src/preview.tsx

@@ -1,7 +1,8 @@
+import type { Addon_DecoratorFunction } from '@storybook/types';
 import { withMeasure } from './withMeasure';
 import { PARAM_KEY } from './constants';
 
-export const decorators = [withMeasure];
+export const decorators: Addon_DecoratorFunction[] = [withMeasure];
 
 export const globals = {
   [PARAM_KEY]: false,

code/addons/outline/package.json

@@ -19,7 +19,7 @@
   "repository": {
     "type": "git",
     "url": "https://github.com/storybookjs/storybook.git",
-    "directory": "addons/outline"
+    "directory": "code/addons/outline"
   },
   "funding": {
     "type": "opencollective",

code/addons/outline/src/preview.tsx

@@ -1,7 +1,8 @@
+import type { Addon_DecoratorFunction } from '@storybook/types';
 import { withOutline } from './withOutline';
 import { PARAM_KEY } from './constants';
 
-export const decorators = [withOutline];
+export const decorators: Addon_DecoratorFunction[] = [withOutline];
 
 export const globals = {
   [PARAM_KEY]: false,

code/addons/storyshots-core/package.json

@@ -14,7 +14,7 @@
   "repository": {
     "type": "git",
     "url": "https://github.com/storybookjs/storybook.git",
-    "directory": "addons/storyshots-core"
+    "directory": "code/addons/storyshots-core"
   },
   "funding": {
     "type": "opencollective",

code/addons/storyshots-puppeteer/package.json

@@ -13,7 +13,7 @@
   "repository": {
     "type": "git",
     "url": "https://github.com/storybookjs/storybook.git",
-    "directory": "addons/storyshots-puppeteer"
+    "directory": "code/addons/storyshots-puppeteer"
   },
   "funding": {
     "type": "opencollective",

code/addons/storysource/package.json

@@ -14,7 +14,7 @@
   "repository": {
     "type": "git",
     "url": "https://github.com/storybookjs/storybook.git",
-    "directory": "addons/storysource"
+    "directory": "code/addons/storysource"
   },
   "funding": {
     "type": "opencollective",

code/addons/toolbars/package.json

@@ -18,7 +18,7 @@
   "repository": {
     "type": "git",
     "url": "https://github.com/storybookjs/storybook.git",
-    "directory": "addons/toolbars"
+    "directory": "code/addons/toolbars"
   },
   "funding": {
     "type": "opencollective",

code/addons/viewport/package.json

@@ -15,7 +15,7 @@
   "repository": {
     "type": "git",
     "url": "https://github.com/storybookjs/storybook.git",
-    "directory": "addons/viewport"
+    "directory": "code/addons/viewport"
   },
   "funding": {
     "type": "opencollective",

code/frameworks/angular/package.json

@@ -6,14 +6,14 @@
     "storybook",
     "angular"
   ],
-  "homepage": "https://github.com/storybookjs/storybook/tree/main/frameworks/angular",
+  "homepage": "https://github.com/storybookjs/storybook/tree/next/code/frameworks/angular",
   "bugs": {
     "url": "https://github.com/storybookjs/storybook/issues"
   },
   "repository": {
     "type": "git",
     "url": "https://github.com/storybookjs/storybook.git",
-    "directory": "frameworks/angular"
+    "directory": "code/frameworks/angular"
   },
   "funding": {
     "type": "opencollective",

code/frameworks/angular/src/client/docs/sourceDecorator.ts

@@ -38,8 +38,8 @@ export const sourceDecorator = (
 
   useEffect(() => {
     if (toEmit) {
-      const { id, args } = context;
-      channel.emit(SNIPPET_RENDERED, { id, args, source: toEmit, format: 'angular' });
+      const { id, unmappedArgs } = context;
+      channel.emit(SNIPPET_RENDERED, { id, args: unmappedArgs, source: toEmit, format: 'angular' });
     }
   });
 

code/frameworks/ember/package.json

@@ -2,14 +2,14 @@
   "name": "@storybook/ember",
   "version": "7.1.0-alpha.11",
   "description": "Storybook for Ember: Develop Ember Component in isolation with Hot Reloading.",
-  "homepage": "https://github.com/storybookjs/storybook/tree/main/frameworks/ember",
+  "homepage": "https://github.com/storybookjs/storybook/tree/next/code/frameworks/ember",
   "bugs": {
     "url": "https://github.com/storybookjs/storybook/issues"
   },
   "repository": {
     "type": "git",
     "url": "https://github.com/storybookjs/storybook.git",
-    "directory": "frameworks/ember"
+    "directory": "code/frameworks/ember"
   },
   "funding": {
     "type": "opencollective",

code/frameworks/html-vite/package.json

@@ -5,14 +5,14 @@
   "keywords": [
     "storybook"
   ],
-  "homepage": "https://github.com/storybookjs/storybook/tree/main/frameworks/html-vite",
+  "homepage": "https://github.com/storybookjs/storybook/tree/next/code/frameworks/html-vite",
   "bugs": {
     "url": "https://github.com/storybookjs/storybook/issues"
   },
   "repository": {
     "type": "git",
     "url": "https://github.com/storybookjs/storybook.git",
-    "directory": "frameworks/html-vite"
+    "directory": "code/frameworks/html-vite"
   },
   "funding": {
     "type": "opencollective",

code/frameworks/html-webpack5/package.json

@@ -5,14 +5,14 @@
   "keywords": [
     "storybook"
   ],
-  "homepage": "https://github.com/storybookjs/storybook/tree/main/frameworks/html-webpack5",
+  "homepage": "https://github.com/storybookjs/storybook/tree/next/code/frameworks/html-webpack5",
   "bugs": {
     "url": "https://github.com/storybookjs/storybook/issues"
   },
   "repository": {
     "type": "git",
     "url": "https://github.com/storybookjs/storybook.git",
-    "directory": "frameworks/html-webpack5"
+    "directory": "code/frameworks/html-webpack5"
   },
   "funding": {
     "type": "opencollective",

code/frameworks/nextjs/src/preview.tsx

@@ -1,3 +1,4 @@
+import type { Addon_DecoratorFunction } from '@storybook/types';
 import './config/preview';
 import { ImageDecorator } from './images/decorator';
 import { RouterDecorator } from './routing/decorator';
@@ -14,7 +15,7 @@ function addNextHeadCount() {
 
 addNextHeadCount();
 
-export const decorators = [
+export const decorators: Addon_DecoratorFunction<any>[] = [
   StyledJsxDecorator,
   ImageDecorator,
   RouterDecorator,

code/frameworks/preact-vite/package.json

@@ -5,14 +5,14 @@
   "keywords": [
     "storybook"
   ],
-  "homepage": "https://github.com/storybookjs/storybook/tree/main/frameworks/preact-vite",
+  "homepage": "https://github.com/storybookjs/storybook/tree/next/code/frameworks/preact-vite",
   "bugs": {
     "url": "https://github.com/storybookjs/storybook/issues"
   },
   "repository": {
     "type": "git",
     "url": "https://github.com/storybookjs/storybook.git",
-    "directory": "frameworks/preact-vite"
+    "directory": "code/frameworks/preact-vite"
   },
   "funding": {
     "type": "opencollective",

code/frameworks/preact-webpack5/package.json

@@ -5,14 +5,14 @@
   "keywords": [
     "storybook"
   ],
-  "homepage": "https://github.com/storybookjs/storybook/tree/main/frameworks/preact-webpack5",
+  "homepage": "https://github.com/storybookjs/storybook/tree/next/code/frameworks/preact-webpack5",
   "bugs": {
     "url": "https://github.com/storybookjs/storybook/issues"
   },
   "repository": {
     "type": "git",
     "url": "https://github.com/storybookjs/storybook.git",
-    "directory": "frameworks/preact-webpack5"
+    "directory": "code/frameworks/preact-webpack5"
   },
   "funding": {
     "type": "opencollective",