Merge branch 'next' into yann/storyshots-migration-warn

storybookjs · Jan 3, 2024 · 52a7e36 · 52a7e36
2 parents ea26963 + a54da8f
commit 52a7e36
Show file tree

Hide file tree

Showing 37 changed files with 188 additions and 337 deletions.
diff --git a/MIGRATION.md b/MIGRATION.md
@@ -1,6 +1,7 @@
 <h1>Migration</h1>
 
 - [From version 7.x to 8.0.0](#from-version-7x-to-800)
+  - [Framework specific vite plugins have to be explicitly added](#framework-specific-vite-plugins-have-to-be-explicitly-added)  
   - [Implicit actions can not be used during rendering (for example in the play function)](#implicit-actions-can-not-be-used-during-rendering-for-example-in-the-play-function)
   - [Core changes](#core-changes)
     - [Dropping support for Node.js 16](#dropping-support-for-nodejs-16)
@@ -10,12 +11,19 @@
     - [UI layout state has changed shape](#ui-layout-state-has-changed-shape)
     - [New UI and props for Button and IconButton components](#new-ui-and-props-for-button-and-iconbutton-components)
     - [Icons is deprecated](#icons-is-deprecated)
-    - [React-docgen component analysis by default](#react-docgen-component-analysis-by-default)
     - [Removed postinstall](#removed-postinstall)
     - [Removed stories.json](#removed-storiesjson)
   - [Framework-specific changes](#framework-specific-changes)
-    - [Angular: Drop support for Angular \< 15](#angular-drop-support-for-angular--15)
-    - [Next.js: Drop support for version \< 13.5](#nextjs-drop-support-for-version--135)
+    - [React](#react)
+      - [`react-docgen` component analysis by default](#react-docgen-component-analysis-by-default)
+    - [Next.js](#nextjs)
+      - [Require Next.js 13.5 and up](#require-nextjs-135-and-up)
+    - [Angular](#angular)
+      - [Require Angular 15 and up](#require-angular-15-and-up)
+    - [Svelte](#svelte)
+      - [Require Svelte 4 and up](#require-svelte-4-and-up)
+  - [Deprecations which are now removed](#deprecations-which-are-now-removed)
+    - [--use-npm flag in storybook CLI](#--use-npm-flag-in-storybook-cli)
 - [From version 7.5.0 to 7.6.0](#from-version-750-to-760)
     - [CommonJS with Vite is deprecated](#commonjs-with-vite-is-deprecated)
     - [Using implicit actions during rendering is deprecated](#using-implicit-actions-during-rendering-is-deprecated)
@@ -331,6 +339,21 @@
 
 ## From version 7.x to 8.0.0
 
+### Framework-specific Vite plugins have to be explicitly added
+
+In Storybook 7, we would automatically add frameworks-specific Vite plugins, e.g. `@vitejs/plugin-react` if not installed.
+In Storybook 8 those plugins have to be added explicitly in the user's `vite.config.ts`:
+
+```ts
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()],
+});
+```
+
 ### Implicit actions can not be used during rendering (for example in the play function)
 
 In Storybook 7, we inferred if the component accepts any action props,
@@ -456,7 +479,21 @@ The `IconButton` doesn't have any deprecated props but it now uses the new `Butt
 
 In Storybook 8.0 we are introducing a new icon library available with `@storybook/icons`. We are deprecating the `Icons` component in `@storybook/components` and recommend that addon creators and Storybook maintainers use the new `@storybook/icons` component instead.
 
-#### React-docgen component analysis by default
+#### Removed postinstall
+
+We removed the `@storybook/postinstall` package, which provided some utilities for addons to programmatically modify user configuration files on install. This package was years out of date, so this should be a non-disruptive change. If your addon used the package, you can view the old source code [here](https://github.com/storybookjs/storybook/tree/release-7-5/code/lib/postinstall) and adapt it into your addon.
+
+#### Removed stories.json
+
+In addition to the built storybook, `storybook build` generates two files, `index.json` and `stories.json`, that list out the contents of the Storybook. `stories.json` is a legacy format and we included it for backwards compatibility. As of 8.0 we no longer build `stories.json` by default, and we will remove it completely in 9.0.
+
+In the meantime if you have code that relies on `stories.json`, you can find code that transforms the "v4" `index.json` to the "v3" `stories.json` format (and their respective TS types): https://github.com/storybookjs/storybook/blob/release-7-5/code/lib/core-server/src/utils/stories-json.ts#L71-L91
+
+### Framework-specific changes
+
+#### React
+
+##### `react-docgen` component analysis by default
 
 In Storybook 7, we used `react-docgen-typescript` to analyze React component props and auto-generate controls. In Storybook 8, we have moved to `react-docgen` as the new default. `react-docgen` is dramatically more efficient, shaving seconds off of dev startup times. However, it only analyzes basic TypeScript constructs.
 
@@ -472,25 +509,29 @@ export default {
 
 For more information see: https://storybook.js.org/docs/react/api/main-config-typescript#reactdocgen
 
-#### Removed postinstall
+#### Next.js
 
-We removed the `@storybook/postinstall` package, which provided some utilities for addons to programmatically modify user configuration files on install. This package was years out of date, so this should be a non-disruptive change. If your addon used the package, you can view the old source code [here](https://github.com/storybookjs/storybook/tree/release-7-5/code/lib/postinstall) and adapt it into your addon.
+##### Require Next.js 13.5 and up
 
-#### Removed stories.json
+Starting in 8.0, Storybook requires Next.js 13.5 and up.
 
-In addition to the built storybook, `storybook build` generates two files, `index.json` and `stories.json`, that list out the contents of the Storybook. `stories.json` is a legacy format and we included it for backwards compatibility. As of 8.0 we no longer build `stories.json` by default, and we will remove it completely in 9.0.
+#### Angular
 
-In the meantime if you have code that relies on `stories.json`, you can find code that transforms the "v4" `index.json` to the "v3" `stories.json` format (and their respective TS types): https://github.com/storybookjs/storybook/blob/release-7-5/code/lib/core-server/src/utils/stories-json.ts#L71-L91
+##### Require Angular 15 and up
 
-### Framework-specific changes
+Starting in 8.0, Storybook requires Angular 15 and up.
+
+#### Svelte
+
+##### Require Svelte 4 and up
 
-#### Angular: Drop support for Angular \< 15
+Starting in 8.0, Storybook requires Svelte 4 and up.
 
-Starting in 8.0, we drop support for Angular < 15
+### Deprecations which are now removed
 
-#### Next.js: Drop support for version \< 13.5
+#### --use-npm flag in storybook CLI
 
-Starting in 8.0, we drop support for Next.js < 13.5.
+The `--use-npm` is now removed. Use `--package-manager=npm` instead. [More info here](#cli-option---use-npm-deprecated).
 
 ## From version 7.5.0 to 7.6.0
 

diff --git a/code/.eslintrc.js b/code/.eslintrc.js
@@ -39,6 +39,18 @@ module.exports = {
         allowIndexSignaturePropertyAccess: true,
       },
     ],
+    '@typescript-eslint/no-restricted-imports': [
+      'error',
+      {
+        paths: [
+          {
+            name: 'vite',
+            message: 'Please dynamically import from vite instead, to force the use of ESM',
+            allowTypeImports: true,
+          },
+        ],
+      },
+    ],
   },
   overrides: [
     {

diff --git a/code/addons/essentials/package.json b/code/addons/essentials/package.json
@@ -43,6 +43,7 @@
     "./outline/manager": "./dist/outline/manager.js",
     "./toolbars/manager": "./dist/toolbars/manager.js",
     "./viewport/manager": "./dist/viewport/manager.js",
+    "./viewport/preview": "./dist/viewport/preview.js",
     "./package.json": "./package.json"
   },
   "main": "dist/index.js",
@@ -102,7 +103,8 @@
       "./src/docs/preview.ts",
       "./src/highlight/preview.ts",
       "./src/measure/preview.ts",
-      "./src/outline/preview.ts"
+      "./src/outline/preview.ts",
+      "./src/viewport/preview.ts"
     ]
   },
   "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae17"

diff --git a/code/addons/essentials/src/viewport/preview.ts b/code/addons/essentials/src/viewport/preview.ts
@@ -0,0 +1,2 @@
+// @ts-expect-error (no types needed for this)
+export * from '@storybook/addon-viewport/preview';
diff --git a/code/addons/viewport/package.json b/code/addons/viewport/package.json
@@ -29,6 +29,7 @@
       "require": "./dist/index.js",
       "import": "./dist/index.mjs"
     },
+    "./preview": "./dist/preview.js",
     "./manager": "./dist/manager.js",
     "./package.json": "./package.json"
   },
@@ -72,6 +73,9 @@
     ],
     "managerEntries": [
       "./src/manager.tsx"
+    ],
+    "previewEntries": [
+      "./src/preview.ts"
     ]
   },
   "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae17",

diff --git a/code/addons/viewport/preview.js b/code/addons/viewport/preview.js
@@ -0,0 +1 @@
+export { globals } from './dist/preview';
diff --git a/code/addons/viewport/src/Tool.tsx b/code/addons/viewport/src/Tool.tsx
@@ -6,10 +6,10 @@ import { styled, Global, type Theme, withTheme } from '@storybook/theming';
 
 import { IconButton, WithTooltip, TooltipLinkList } from '@storybook/components';
 
-import { useStorybookApi, useParameter, useAddonState } from '@storybook/manager-api';
+import { useStorybookApi, useParameter, useGlobals } from '@storybook/manager-api';
 import { GrowIcon, TransferIcon } from '@storybook/icons';
 import { registerShortcuts } from './shortcuts';
-import { PARAM_KEY, ADDON_ID } from './constants';
+import { PARAM_KEY } from './constants';
 import { MINIMAL_VIEWPORTS } from './defaults';
 import type { ViewportAddonParameter, ViewportMap, ViewportStyles, Styles } from './models';
 
@@ -35,19 +35,21 @@ const responsiveViewport: ViewportItem = {
 
 const baseViewports: ViewportItem[] = [responsiveViewport];
 
-const toLinks = memoize(50)((list: ViewportItem[], active: LinkBase, set, state, close): Link[] => {
-  return list
-    .filter((i) => i.id !== responsiveViewport.id || active.id !== i.id)
-    .map((i) => {
-      return {
-        ...i,
-        onClick: () => {
-          set({ ...state, selected: i.id });
-          close();
-        },
-      };
-    });
-});
+const toLinks = memoize(50)(
+  (list: ViewportItem[], active: LinkBase, updateGlobals, close): Link[] => {
+    return list
+      .filter((i) => i.id !== responsiveViewport.id || active.id !== i.id)
+      .map((i) => {
+        return {
+          ...i,
+          onClick: () => {
+            updateGlobals({ viewport: i.id });
+            close();
+          },
+        };
+      });
+  }
+);
 
 interface LinkBase {
   id: string;
@@ -95,11 +97,6 @@ const IconButtonLabel = styled.div(({ theme }) => ({
   marginLeft: 10,
 }));
 
-interface ViewportToolState {
-  isRotated: boolean;
-  selected: string | null;
-}
-
 const getStyles = (
   prevStyles: ViewportStyles | undefined,
   styles: Styles,
@@ -115,51 +112,53 @@ const getStyles = (
 
 export const ViewportTool: FC = memo(
   withTheme(({ theme }: { theme: Theme }) => {
+    const [globals, updateGlobals] = useGlobals();
+
     const {
       viewports = MINIMAL_VIEWPORTS,
-      defaultOrientation = 'portrait',
-      defaultViewport = responsiveViewport.id,
+      defaultOrientation,
+      defaultViewport,
       disable,
     } = useParameter<ViewportAddonParameter>(PARAM_KEY, {});
-    const [state, setState] = useAddonState<ViewportToolState>(ADDON_ID, {
-      selected: defaultViewport,
-      isRotated: defaultOrientation === 'landscape',
-    });
 
     const list = toList(viewports);
     const api = useStorybookApi();
     const [isTooltipVisible, setIsTooltipVisible] = useState(false);
 
-    if (!list.find((i) => i.id === defaultViewport)) {
+    if (defaultViewport && !list.find((i) => i.id === defaultViewport)) {
       // eslint-disable-next-line no-console
       console.warn(
         `Cannot find "defaultViewport" of "${defaultViewport}" in addon-viewport configs, please check the "viewports" setting in the configuration.`
       );
     }
 
     useEffect(() => {
-      registerShortcuts(api, setState, Object.keys(viewports));
-    }, [viewports]);
+      registerShortcuts(api, globals, updateGlobals, Object.keys(viewports));
+    }, [viewports, globals.viewport]);
 
     useEffect(() => {
-      setState({
-        selected:
-          defaultViewport ||
-          (state.selected && viewports[state.selected] ? state.selected : responsiveViewport.id),
-        isRotated: defaultOrientation === 'landscape',
-      });
-    }, [defaultOrientation, defaultViewport]);
+      const defaultRotated = defaultOrientation === 'landscape';
+
+      if (
+        (defaultViewport && globals.viewport !== defaultViewport) ||
+        (defaultOrientation && globals.viewportRotated !== defaultRotated)
+      ) {
+        updateGlobals({
+          viewport: defaultViewport,
+          viewportRotated: defaultRotated,
+        });
+      }
+    }, [defaultOrientation, defaultViewport, globals, updateGlobals]);
 
-    const { selected, isRotated } = state;
     const item =
-      list.find((i) => i.id === selected) ||
+      list.find((i) => i.id === globals.viewport) ||
       list.find((i) => i.id === defaultViewport) ||
       list.find((i) => i.default) ||
       responsiveViewport;
 
     const ref = useRef<ViewportStyles>();
 
-    const styles = getStyles(ref.current, item.styles, isRotated);
+    const styles = getStyles(ref.current, item.styles, globals.viewportRotated);
 
     useEffect(() => {
       ref.current = styles;
@@ -174,7 +173,7 @@ export const ViewportTool: FC = memo(
         <WithTooltip
           placement="top"
           tooltip={({ onHide }) => (
-            <TooltipLinkList links={toLinks(list, item, setState, state, onHide)} />
+            <TooltipLinkList links={toLinks(list, item, updateGlobals, onHide)} />
           )}
           closeOnOutsideClick
           onVisibleChange={setIsTooltipVisible}
@@ -184,13 +183,13 @@ export const ViewportTool: FC = memo(
             title="Change the size of the preview"
             active={isTooltipVisible || !!styles}
             onDoubleClick={() => {
-              setState({ ...state, selected: responsiveViewport.id });
+              updateGlobals({ viewport: responsiveViewport.id });
             }}
           >
             <GrowIcon />
             {styles ? (
               <IconButtonLabel>
-                {isRotated ? `${item.title} (L)` : `${item.title} (P)`}
+                {globals.viewportRotated ? `${item.title} (L)` : `${item.title} (P)`}
               </IconButtonLabel>
             ) : null}
           </IconButtonWithLabel>
@@ -215,7 +214,7 @@ export const ViewportTool: FC = memo(
               key="viewport-rotate"
               title="Rotate viewport"
               onClick={() => {
-                setState({ ...state, isRotated: !isRotated });
+                updateGlobals({ viewportRotated: !globals.viewportRotated });
               }}
             >
               <TransferIcon />

diff --git a/code/addons/viewport/src/preview.ts b/code/addons/viewport/src/preview.ts
@@ -0,0 +1 @@
+export const globals = { viewport: 'reset', viewportRotated: false };