Merge remote-tracking branch 'origin/next' into tom/sb-878-cleanup-de…

…-duplicate-storybooktypes

CHANGELOG.md

@@ -1,3 +1,25 @@
+## 7.0.0-alpha.54 (November 25, 2022)
+
+#### Bug Fixes
+
+-   Vite: Support environment variables in viteFinal define config [#19905](https://github.com/storybooks/storybook/pull/19905)
+
+#### Maintenance
+
+-   Build: split `lib/addons` into manager & preview part, move code to `manager-api` [#19952](https://github.com/storybooks/storybook/pull/19952)
+-   TypeScript: Satisfy stricter compilerOption rules [#19953](https://github.com/storybooks/storybook/pull/19953)
+-   API: Rename `api` to `manager-api` [#19944](https://github.com/storybooks/storybook/pull/19944)
+-   API: Add `preview-api` package [#19749](https://github.com/storybooks/storybook/pull/19749)
+
+#### Build
+
+-   Build: Improve security in Github actions [#19949](https://github.com/storybooks/storybook/pull/19949)
+
+#### Dependencies
+
+-   NextJS: Add Next13 peer dependency [#19932](https://github.com/storybooks/storybook/pull/19932)
+
+
 ## 7.0.0-alpha.53 (November 24, 2022)
 
 #### Bug Fixes

code/.eslintrc.js

@@ -13,6 +13,12 @@ module.exports = {
     'eslint-comments/disable-enable-pair': ['error', { allowWholeFile: true }],
     'react-hooks/rules-of-hooks': 'off',
     'jest/no-done-callback': 'off',
+    '@typescript-eslint/dot-notation': [
+      'error',
+      {
+        allowIndexSignaturePropertyAccess: true,
+      },
+    ],
   },
   overrides: [
     {

code/.yarnrc.yml

@@ -23,6 +23,8 @@ plugins:
     spec: '@yarnpkg/plugin-typescript'
   - path: ../.yarn/plugins/@yarnpkg/plugin-interactive-tools.cjs
     spec: '@yarnpkg/plugin-interactive-tools'
+  - path: ../.yarn/plugins/@yarnpkg/plugin-workspace-tools.cjs
+    spec: '@yarnpkg/plugin-workspace-tools'
 
 unsafeHttpWhitelist:
   - localhost

code/addons/a11y/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-a11y",
-  "version": "7.0.0-alpha.53",
+  "version": "7.0.0-alpha.54",
   "description": "Test component compliance with web accessibility standards",
   "keywords": [
     "a11y",
@@ -62,16 +62,15 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/addon-highlight": "7.0.0-alpha.53",
-    "@storybook/addons": "7.0.0-alpha.53",
-    "@storybook/channels": "7.0.0-alpha.53",
-    "@storybook/client-logger": "7.0.0-alpha.53",
-    "@storybook/components": "7.0.0-alpha.53",
-    "@storybook/core-events": "7.0.0-alpha.53",
-    "@storybook/manager-api": "7.0.0-alpha.53",
-    "@storybook/preview-api": "7.0.0-alpha.53",
-    "@storybook/theming": "7.0.0-alpha.53",
-    "@storybook/types": "7.0.0-alpha.53",
+    "@storybook/addon-highlight": "7.0.0-alpha.54",
+    "@storybook/channels": "7.0.0-alpha.54",
+    "@storybook/client-logger": "7.0.0-alpha.54",
+    "@storybook/components": "7.0.0-alpha.54",
+    "@storybook/core-events": "7.0.0-alpha.54",
+    "@storybook/manager-api": "7.0.0-alpha.54",
+    "@storybook/preview-api": "7.0.0-alpha.54",
+    "@storybook/theming": "7.0.0-alpha.54",
+    "@storybook/types": "7.0.0-alpha.54",
     "axe-core": "^4.2.0",
     "global": "^4.4.0",
     "lodash": "^4.17.21",
@@ -103,7 +102,7 @@
       "./src/preview.tsx"
     ]
   },
-  "gitHead": "fd1cf81615a5ddac3369e7bb567a1a43081fdc23",
+  "gitHead": "91177d4e27daec556a24ae6223c3cbe17a998d9b",
   "storybook": {
     "displayName": "Accessibility",
     "icon": "https://user-images.githubusercontent.com/263385/101991665-47042f80-3c7c-11eb-8f00-64b5a18f498a.png",

code/addons/a11y/src/manager.test.tsx

@@ -1,13 +1,11 @@
-import { addons } from '@storybook/addons';
 import * as api from '@storybook/manager-api';
 import { PANEL_ID } from './constants';
 import './manager';
 
 jest.mock('@storybook/manager-api');
-jest.mock('@storybook/addons');
 const mockedApi = api as unknown as jest.Mocked<api.API>;
 mockedApi.getAddonState = jest.fn();
-const mockedAddons = addons as jest.Mocked<typeof addons>;
+const mockedAddons = api.addons as jest.Mocked<typeof api.addons>;
 const registrationImpl = mockedAddons.register.mock.calls[0][1];
 
 describe('A11yManager', () => {

code/addons/a11y/src/manager.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { addons, types } from '@storybook/addons';
+import { addons, types } from '@storybook/manager-api';
 import { ADDON_ID, PANEL_ID, PARAM_KEY } from './constants';
 import { VisionSimulator } from './components/VisionSimulator';
 import { A11YPanel } from './components/A11YPanel';

code/addons/actions/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-actions",
-  "version": "7.0.0-alpha.53",
+  "version": "7.0.0-alpha.54",
   "description": "Get UI feedback when an action is performed on an interactive element",
   "keywords": [
     "storybook",
@@ -76,14 +76,13 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/addons": "7.0.0-alpha.53",
-    "@storybook/client-logger": "7.0.0-alpha.53",
-    "@storybook/components": "7.0.0-alpha.53",
-    "@storybook/core-events": "7.0.0-alpha.53",
-    "@storybook/manager-api": "7.0.0-alpha.53",
-    "@storybook/preview-api": "7.0.0-alpha.53",
-    "@storybook/theming": "7.0.0-alpha.53",
-    "@storybook/types": "7.0.0-alpha.53",
+    "@storybook/client-logger": "7.0.0-alpha.54",
+    "@storybook/components": "7.0.0-alpha.54",
+    "@storybook/core-events": "7.0.0-alpha.54",
+    "@storybook/manager-api": "7.0.0-alpha.54",
+    "@storybook/preview-api": "7.0.0-alpha.54",
+    "@storybook/theming": "7.0.0-alpha.54",
+    "@storybook/types": "7.0.0-alpha.54",
     "dequal": "^2.0.2",
     "global": "^4.4.0",
     "lodash": "^4.17.21",
@@ -121,7 +120,7 @@
       "./src/preview.ts"
     ]
   },
-  "gitHead": "fd1cf81615a5ddac3369e7bb567a1a43081fdc23",
+  "gitHead": "91177d4e27daec556a24ae6223c3cbe17a998d9b",
   "storybook": {
     "displayName": "Actions",
     "unsupportedFrameworks": [

code/addons/actions/src/addArgsHelpers.ts

@@ -50,11 +50,13 @@ export const addActionsFromArgTypes: ArgsEnhancer<Renderer> = (context) => {
     return {};
   }
 
-  const argTypesWithAction = Object.entries(argTypes).filter(([name, argType]) => !!argType.action);
+  const argTypesWithAction = Object.entries(argTypes).filter(
+    ([name, argType]) => !!argType['action']
+  );
 
   return argTypesWithAction.reduce((acc, [name, argType]) => {
     if (isInInitialArgs(name, initialArgs)) {
-      acc[name] = action(typeof argType.action === 'string' ? argType.action : name);
+      acc[name] = action(typeof argType['action'] === 'string' ? argType['action'] : name);
     }
     return acc;
   }, {} as Args);

code/addons/actions/src/components/ActionLogger/index.tsx

@@ -20,7 +20,7 @@ export const Wrapper = styled(UnstyledWrapped)({
 });
 
 interface InspectorProps {
-  theme: Theme;
+  theme: Theme & { addonActionsTheme?: string };
   sortObjectKeys: boolean;
   showNonenumerable: boolean;
   name: any;

code/addons/actions/src/containers/ActionLogger/index.tsx

@@ -36,15 +36,15 @@ export default class ActionLogger extends Component<ActionLoggerProps, ActionLog
     this.state = { actions: [] };
   }
 
-  componentDidMount() {
+  override componentDidMount() {
     this.mounted = true;
     const { api } = this.props;
 
     api.on(EVENT_ID, this.addAction);
     api.on(STORY_CHANGED, this.handleStoryChange);
   }
 
-  componentWillUnmount() {
+  override componentWillUnmount() {
     this.mounted = false;
     const { api } = this.props;
 
@@ -79,7 +79,7 @@ export default class ActionLogger extends Component<ActionLoggerProps, ActionLog
     this.setState({ actions: [] });
   };
 
-  render() {
+  override render() {
     const { actions = [] } = this.state;
     const { active } = this.props;
     const props = {

code/addons/actions/src/decorator.ts

@@ -56,8 +56,8 @@ export const withActions = makeDecorator({
   parameterName: PARAM_KEY,
   skipIfNoParametersOrOptions: true,
   wrapper: (getStory, context, { parameters }) => {
-    if (parameters?.handles) {
-      applyEventHandlers(actions, ...parameters.handles);
+    if (parameters?.['handles']) {
+      applyEventHandlers(actions, ...parameters['handles']);
     }
 
     return getStory(context);

code/addons/actions/src/manager.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import { addons, types } from '@storybook/addons';
+import { addons, types } from '@storybook/manager-api';
 import { STORY_CHANGED } from '@storybook/core-events';
 import ActionLogger from './containers/ActionLogger';
 import { ADDON_ID, EVENT_ID, PANEL_ID, PARAM_KEY } from './constants';

code/addons/backgrounds/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-backgrounds",
-  "version": "7.0.0-alpha.53",
+  "version": "7.0.0-alpha.54",
   "description": "Switch backgrounds to view components in different settings",
   "keywords": [
     "addon",
@@ -75,14 +75,13 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/addons": "7.0.0-alpha.53",
-    "@storybook/client-logger": "7.0.0-alpha.53",
-    "@storybook/components": "7.0.0-alpha.53",
-    "@storybook/core-events": "7.0.0-alpha.53",
-    "@storybook/manager-api": "7.0.0-alpha.53",
-    "@storybook/preview-api": "7.0.0-alpha.53",
-    "@storybook/theming": "7.0.0-alpha.53",
-    "@storybook/types": "7.0.0-alpha.53",
+    "@storybook/client-logger": "7.0.0-alpha.54",
+    "@storybook/components": "7.0.0-alpha.54",
+    "@storybook/core-events": "7.0.0-alpha.54",
+    "@storybook/manager-api": "7.0.0-alpha.54",
+    "@storybook/preview-api": "7.0.0-alpha.54",
+    "@storybook/theming": "7.0.0-alpha.54",
+    "@storybook/types": "7.0.0-alpha.54",
     "global": "^4.4.0",
     "memoizerific": "^1.11.3",
     "ts-dedent": "^2.0.0"
@@ -112,7 +111,7 @@
       "./src/preview.tsx"
     ]
   },
-  "gitHead": "fd1cf81615a5ddac3369e7bb567a1a43081fdc23",
+  "gitHead": "91177d4e27daec556a24ae6223c3cbe17a998d9b",
   "storybook": {
     "displayName": "Backgrounds",
     "icon": "https://user-images.githubusercontent.com/263385/101991667-479cc600-3c7c-11eb-96d3-410e936252e7.png",

code/addons/backgrounds/src/manager.tsx

@@ -1,5 +1,5 @@
 import React, { Fragment } from 'react';
-import { addons, types } from '@storybook/addons';
+import { addons, types } from '@storybook/manager-api';
 
 import { ADDON_ID } from './constants';
 import { BackgroundSelector } from './containers/BackgroundSelector';

code/addons/controls/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-controls",
-  "version": "7.0.0-alpha.53",
+  "version": "7.0.0-alpha.54",
   "description": "Interact with component inputs dynamically in the Storybook UI",
   "keywords": [
     "addon",
@@ -67,16 +67,15 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/addons": "7.0.0-alpha.53",
-    "@storybook/blocks": "7.0.0-alpha.53",
-    "@storybook/client-logger": "7.0.0-alpha.53",
-    "@storybook/components": "7.0.0-alpha.53",
-    "@storybook/core-common": "7.0.0-alpha.53",
-    "@storybook/manager-api": "7.0.0-alpha.53",
-    "@storybook/node-logger": "7.0.0-alpha.53",
-    "@storybook/preview-api": "7.0.0-alpha.53",
-    "@storybook/theming": "7.0.0-alpha.53",
-    "@storybook/types": "7.0.0-alpha.53",
+    "@storybook/blocks": "7.0.0-alpha.54",
+    "@storybook/client-logger": "7.0.0-alpha.54",
+    "@storybook/components": "7.0.0-alpha.54",
+    "@storybook/core-common": "7.0.0-alpha.54",
+    "@storybook/manager-api": "7.0.0-alpha.54",
+    "@storybook/node-logger": "7.0.0-alpha.54",
+    "@storybook/preview-api": "7.0.0-alpha.54",
+    "@storybook/theming": "7.0.0-alpha.54",
+    "@storybook/types": "7.0.0-alpha.54",
     "lodash": "^4.17.21",
     "ts-dedent": "^2.0.0"
   },
@@ -102,7 +101,7 @@
     ],
     "platform": "browser"
   },
-  "gitHead": "fd1cf81615a5ddac3369e7bb567a1a43081fdc23",
+  "gitHead": "91177d4e27daec556a24ae6223c3cbe17a998d9b",
   "storybook": {
     "displayName": "Controls",
     "icon": "https://user-images.githubusercontent.com/263385/101991669-479cc600-3c7c-11eb-93d9-38b67e8371f2.png",

code/addons/controls/src/manager.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
-import { addons, types } from '@storybook/addons';
+import { addons, types, type API, useArgTypes } from '@storybook/manager-api';
 import { AddonPanel } from '@storybook/components';
-import { type API, useArgTypes } from '@storybook/manager-api';
 import { ControlsPanel } from './ControlsPanel';
 import { ADDON_ID, PARAM_KEY } from './constants';
 

code/addons/docs/docs/multiframework.md

@@ -113,7 +113,7 @@ This dynamic rendering is framework-specific, meaning it needs a custom implemen
 Let's take a look at the React framework implementation of `dynamic` snippets as a reference for implementing this feature in other frameworks:
 
 ```tsx
-import { addons, StoryContext } from '@storybook/addons';
+import { addons, StoryContext } from '@storybook/preview-api';
 import { SNIPPET_RENDERED } from '../../shared';
 
 export const jsxDecorator = (storyFn: any, context: StoryContext) => {

code/addons/docs/docs/theming.md

@@ -14,7 +14,7 @@ Storybook theming is the **recommended way** to theme your docs. Docs uses the s
 Supposing you have a Storybook theme defined for the main UI in `.storybook/manager.js`:
 
 ```js
-import { addons } from '@storybook/addons';
+import { addons } from '@storybook/manager-api';
 // or a custom theme
 import { themes } from '@storybook/theming';
 

code/addons/docs/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-docs",
-  "version": "7.0.0-alpha.53",
+  "version": "7.0.0-alpha.54",
   "description": "Document component usage and properties in Markdown",
   "keywords": [
     "addon",
@@ -87,16 +87,16 @@
     "@babel/plugin-transform-react-jsx": "^7.19.0",
     "@jest/transform": "^29.3.1",
     "@mdx-js/react": "^2.1.5",
-    "@storybook/blocks": "7.0.0-alpha.53",
-    "@storybook/components": "7.0.0-alpha.53",
-    "@storybook/csf-plugin": "7.0.0-alpha.53",
-    "@storybook/csf-tools": "7.0.0-alpha.53",
+    "@storybook/blocks": "7.0.0-alpha.54",
+    "@storybook/components": "7.0.0-alpha.54",
+    "@storybook/csf-plugin": "7.0.0-alpha.54",
+    "@storybook/csf-tools": "7.0.0-alpha.54",
     "@storybook/mdx2-csf": "next",
-    "@storybook/node-logger": "7.0.0-alpha.53",
-    "@storybook/postinstall": "7.0.0-alpha.53",
-    "@storybook/preview-api": "7.0.0-alpha.53",
-    "@storybook/theming": "7.0.0-alpha.53",
-    "@storybook/types": "7.0.0-alpha.53",
+    "@storybook/node-logger": "7.0.0-alpha.54",
+    "@storybook/postinstall": "7.0.0-alpha.54",
+    "@storybook/preview-api": "7.0.0-alpha.54",
+    "@storybook/theming": "7.0.0-alpha.54",
+    "@storybook/types": "7.0.0-alpha.54",
     "fs-extra": "^9.0.1",
     "global": "^4.4.0",
     "remark-external-links": "^8.0.0",
@@ -129,7 +129,7 @@
       "./src/preview.ts"
     ]
   },
-  "gitHead": "fd1cf81615a5ddac3369e7bb567a1a43081fdc23",
+  "gitHead": "91177d4e27daec556a24ae6223c3cbe17a998d9b",
   "storybook": {
     "displayName": "Docs",
     "icon": "https://user-images.githubusercontent.com/263385/101991672-48355c80-3c7c-11eb-82d9-95fa12438f64.png",