Merge pull request #19465 from storybookjs/jeppe/sb-604-create-a-standalone-storybook-for-our

.circleci/config.yml

@@ -122,6 +122,7 @@ jobs:
             - code/addons
             - code/frameworks
             - code/lib
+            - code/ui
             - code/renderers
             - code/presets
   chromatic:

.vscode/settings.json

@@ -1,3 +1,4 @@
 {
-  "deepscan.enable": true
+  "deepscan.enable": true,
+  "typescript.tsdk": "./code/node_modules/typescript/lib"
 }

code/.eslintrc.js

@@ -26,13 +26,19 @@ module.exports = {
       files: [
         '**/lib/theming/**/*',
         '**/lib/router/**/*',
-        '**/lib/ui/**/*',
+        '**/ui/manager/**/*',
         '**/lib/components/**/*',
       ],
       rules: {
         'import/no-extraneous-dependencies': ['error', { bundledDependencies: false }],
       },
     },
+    {
+      files: ['**/ui/*', '**/ui/.storybook/*'],
+      rules: {
+        'import/no-extraneous-dependencies': ['error', { packageDir: __dirname }],
+      },
+    },
     {
       files: [
         '**/__tests__/**',

code/lib/core-common/src/utils/get-storybook-refs.ts

@@ -26,7 +26,12 @@ export const getAutoRefs = async (options: Options): Promise<Record<string, Ref>
         if (storybook?.url) {
           return { id: name, ...storybook, version };
         }
-      } catch {
+      } catch (error) {
+        if ((error as any).code === 'ERR_PACKAGE_PATH_NOT_EXPORTED') {
+          // silent warning because user can't do anything about it
+          // "package.json" is not part of the package's "exports" field in its package.json
+          return undefined;
+        }
         logger.warn(`unable to find package.json for ${d}`);
         return undefined;
       }

code/lib/core-server/src/__for-testing__/main.ts

@@ -5,7 +5,7 @@ import type { StorybookConfig } from '@storybook/react-webpack5';
 
 const config: StorybookConfig = {
   stories: [
-    '../../lib/ui/src/**/*.stories.@(ts|tsx|js|jsx|mdx)',
+    '../../ui/manager/src/**/*.stories.@(ts|tsx|js|jsx|mdx)',
     '../../lib/components/src/**/*.stories.@(ts|tsx|js|jsx|mdx)',
     './../../addons/docs/**/*.stories.@(ts|tsx|js|jsx|mdx)',
     './../../addons/interactions/**/*.stories.@(ts|tsx|js|jsx|mdx)',

code/lib/ui/src/containers/panel.stories.tsx

@@ -1,13 +0,0 @@
-import React from 'react';
-
-export default {
-  title: 'UI/Addon Panel',
-};
-
-export const AllAddons = () => <div>By default all addon panels are rendered</div>;
-export const FilteredAddons = () => <div>By default all addon panels are rendered</div>;
-
-FilteredAddons.parameters = {
-  a11y: { disable: true },
-  actions: { disable: true },
-};

code/package.json

@@ -41,13 +41,14 @@
     "packages": [
       "addons/*",
       "addons/storyshots/*",
-      "frameworks/*",
-      "renderers/*",
-      "presets/*",
-      "examples-native/*",
       "examples/*",
+      "examples-native/*",
+      "frameworks/*",
       "lib/*",
-      "lib/cli/test/run/*"
+      "lib/cli/test/run/*",
+      "ui/*",
+      "presets/*",
+      "renderers/*"
     ]
   },
   "scripts": {
@@ -80,6 +81,7 @@
     "sandbox": "ts-node ../scripts/sandbox.ts",
     "serve-storybooks": "http-server ./built-storybooks -p 8001",
     "smoketest-storybooks": "cross-env STORYBOOK_DISPLAY_WARNING=true DISPLAY_WARNING=true node -r esm ../scripts/smoketest-storybooks.js",
+    "storybook:ui": "./lib/cli/bin/index.js dev --port 6006 --config-dir ./ui/.storybook --no-manager-cache",
     "test": "NODE_OPTIONS=--max_old_space_size=4096 jest --config ./jest.config.js",
     "test:cli": "npm --prefix lib/cli run test",
     "test:e2e-examples-playwright": "playwright test",
@@ -253,6 +255,7 @@
     "@typescript-eslint/eslint-plugin": "^5.15.0",
     "@typescript-eslint/experimental-utils": "^5.20.0",
     "@typescript-eslint/parser": "^5.15.0",
+    "@vitejs/plugin-react": "^2.1.0",
     "babel-core": "^7.0.0-bridge.0",
     "babel-eslint": "^10.1.0",
     "babel-jest": "^26.6.3",
@@ -284,6 +287,7 @@
     "fs-extra": "^9.0.1",
     "github-release-from-changelog": "^2.1.1",
     "glob": "^7.1.6",
+    "global": "^4.4.0",
     "http-server": "^0.12.3",
     "husky": "^4.3.7",
     "jest": "^26.6.3",
@@ -314,6 +318,7 @@
     "process": "^0.11.10",
     "prompts": "^2.4.0",
     "raf": "^3.4.1",
+    "react": "^16.8.0",
     "read-pkg-up": "^7.0.1",
     "regenerator-runtime": "^0.13.7",
     "remark": "^13.0.0",
@@ -333,6 +338,7 @@
     "tsup": "^6.2.2",
     "typescript": "4.7.4",
     "util": "^0.12.4",
+    "vite": "^3.1.7",
     "wait-on": "^5.2.1",
     "web-component-analyzer": "^1.1.6",
     "webpack": "5",

code/ui/.storybook/main.ts

@@ -0,0 +1,58 @@
+import vitePluginReact from '@vitejs/plugin-react';
+import type { PluginOption } from 'vite';
+import type { StorybookConfig } from '../../frameworks/react-vite/dist';
+
+const config: StorybookConfig = {
+  stories: [
+    '../manager/src/**/*.stories.@(ts|tsx|js|jsx|mdx)',
+    // '../../lib/components/src/**/*.stories.@(js|jsx|ts|tsx|mdx)',
+    // '../../../addons/interactions/**/*.stories.@(ts|tsx|js|jsx|mdx)',
+  ],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-interactions',
+  ],
+  framework: {
+    name: '@storybook/react-vite',
+    options: {},
+  },
+  viteFinal: (config) => {
+    return {
+      ...config,
+      optimizeDeps: {
+        ...config.optimizeDeps,
+        include: [
+          ...(config.optimizeDeps?.include ?? []),
+          'react-element-to-jsx-string',
+          'core-js/modules/es.regexp.flags.js',
+          'react-colorful',
+        ],
+      },
+      /*
+      This might look complex but all we're doing is removing the default set of React Vite plugins
+      and adding them back in, but with the `jsxRuntime: 'classic'` option.
+      TODO: When we've upgraded to React 18 all of this shouldn't be necessary anymore
+      */
+      plugins: [...withoutReactPlugins(config.plugins), vitePluginReact({ jsxRuntime: 'classic' })],
+    };
+  },
+};
+
+// recursively remove all plugins from the React Vite plugin
+const withoutReactPlugins = (plugins: PluginOption[] = []) =>
+  plugins.map((plugin) => {
+    if (Array.isArray(plugin)) {
+      return withoutReactPlugins(plugin);
+    }
+    if (
+      plugin &&
+      'name' in plugin &&
+      ['vite:react-jsx', 'vite:react-babel', 'vite:react-refresh'].includes(plugin.name)
+    ) {
+      return false;
+    }
+    return plugin;
+  });
+
+export default config;

code/ui/.storybook/preview-head.html

@@ -0,0 +1,4 @@
+<script>
+  // eslint-disable-next-line no-undef
+  window.global = window;
+</script>

code/ui/.storybook/preview.jsx

@@ -0,0 +1,248 @@
+import global from 'global';
+import React, { Fragment, useEffect } from 'react';
+import isChromatic from 'chromatic/isChromatic';
+import {
+  Global,
+  ThemeProvider,
+  themes,
+  createReset,
+  convert,
+  styled,
+  useTheme,
+} from '@storybook/theming';
+import { Symbols } from '@storybook/components';
+
+const { document } = global;
+
+const ThemeBlock = styled.div(
+  {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: '50vw',
+    width: '50vw',
+    height: '100vh',
+    bottom: 0,
+    overflow: 'auto',
+    padding: 10,
+  },
+  ({ theme }) => ({
+    background: theme.background.content,
+    color: theme.color.defaultText,
+  }),
+  ({ side }) =>
+    side === 'left'
+      ? {
+          left: 0,
+          right: '50vw',
+        }
+      : {
+          right: 0,
+          left: '50vw',
+        }
+);
+
+const ThemeStack = styled.div(
+  {
+    position: 'relative',
+    minHeight: 'calc(50vh - 15px)',
+  },
+  ({ theme }) => ({
+    background: theme.background.content,
+    color: theme.color.defaultText,
+  })
+);
+
+const PlayFnNotice = styled.div(
+  {
+    position: 'absolute',
+    bottom: '1rem',
+    right: '1rem',
+    border: '1px solid #ccc',
+    borderRadius: '5px',
+    padding: '1rem',
+    fontSize: '12px',
+    '> *': {
+      display: 'block',
+    },
+  },
+  ({ theme }) => ({
+    background: theme.background.content,
+    color: theme.color.defaultText,
+  })
+);
+
+const ThemedSetRoot = () => {
+  const theme = useTheme();
+
+  useEffect(() => {
+    document.body.style.background = theme.background.content;
+    document.body.style.color = theme.color.defaultText;
+    return () => {
+      //
+    };
+  });
+
+  return null;
+};
+
+export const decorators = [
+  (StoryFn, { globals, parameters, playFunction }) => {
+    const defaultTheme = isChromatic() && !playFunction ? 'stacked' : 'light';
+    const theme = globals.theme || parameters.theme || defaultTheme;
+
+    switch (theme) {
+      case 'side-by-side': {
+        return (
+          <Fragment>
+            <Symbols icons={['folder', 'component', 'document', 'bookmarkhollow']} />
+            <ThemeProvider theme={convert(themes.light)}>
+              <Global styles={createReset} />
+            </ThemeProvider>
+            <ThemeProvider theme={convert(themes.light)}>
+              <ThemeBlock side="left" data-side="left">
+                <StoryFn />
+              </ThemeBlock>
+            </ThemeProvider>
+            <ThemeProvider theme={convert(themes.dark)}>
+              <ThemeBlock side="right" data-side="right">
+                <StoryFn />
+              </ThemeBlock>
+            </ThemeProvider>
+          </Fragment>
+        );
+      }
+      case 'stacked': {
+        return (
+          <Fragment>
+            <Symbols icons={['folder', 'component', 'document', 'bookmarkhollow']} />
+            <ThemeProvider theme={convert(themes.light)}>
+              <Global styles={createReset} />
+            </ThemeProvider>
+            <ThemeProvider theme={convert(themes.light)}>
+              <ThemeStack side="left" data-side="left">
+                <StoryFn />
+              </ThemeStack>
+            </ThemeProvider>
+            <ThemeProvider theme={convert(themes.dark)}>
+              <ThemeStack side="right" data-side="right">
+                <StoryFn />
+              </ThemeStack>
+            </ThemeProvider>
+          </Fragment>
+        );
+      }
+      default: {
+        return (
+          <ThemeProvider theme={convert(themes[theme])}>
+            <Symbols icons={['folder', 'component', 'document', 'bookmarkhollow']} />
+            <Global styles={createReset} />
+            <ThemedSetRoot />
+            {!parameters.theme && isChromatic() && playFunction && (
+              <PlayFnNotice>
+                <span>Detected play function.</span>
+                <span>Rendering in a single theme</span>
+              </PlayFnNotice>
+            )}
+            <StoryFn />
+          </ThemeProvider>
+        );
+      }
+    }
+  },
+];
+
+export const parameters = {
+  exportedParameter: 'exportedParameter',
+  actions: { argTypesRegex: '^on.*' },
+  options: {
+    storySort: (a, b) =>
+      a.title === b.title ? 0 : a.id.localeCompare(b.id, undefined, { numeric: true }),
+  },
+  docs: {
+    theme: themes.light,
+  },
+  controls: {
+    presetColors: [
+      { color: '#ff4785', title: 'Coral' },
+      { color: '#1EA7FD', title: 'Ocean' },
+      { color: 'rgb(252, 82, 31)', title: 'Orange' },
+      { color: 'RGBA(255, 174, 0, 0.5)', title: 'Gold' },
+      { color: 'hsl(101, 52%, 49%)', title: 'Green' },
+      { color: 'HSLA(179,65%,53%,0.5)', title: 'Seafoam' },
+      { color: '#6F2CAC', title: 'Purple' },
+      { color: '#2A0481', title: 'Ultraviolet' },
+      { color: 'black' },
+      { color: '#333', title: 'Darkest' },
+      { color: '#444', title: 'Darker' },
+      { color: '#666', title: 'Dark' },
+      { color: '#999', title: 'Mediumdark' },
+      { color: '#ddd', title: 'Medium' },
+      { color: '#EEE', title: 'Mediumlight' },
+      { color: '#F3F3F3', title: 'Light' },
+      { color: '#F8F8F8', title: 'Lighter' },
+      { color: '#FFFFFF', title: 'Lightest' },
+      '#fe4a49',
+      '#FED766',
+      'rgba(0, 159, 183, 1)',
+      'HSLA(240,11%,91%,0.5)',
+      'slategray',
+    ],
+  },
+};
+
+export const globals = {
+  foo: 'fooValue',
+};
+
+export const globalTypes = {
+  foo: { defaultValue: 'fooDefaultValue' },
+  bar: { defaultValue: 'barDefaultValue' },
+  theme: {
+    name: 'Theme',
+    description: 'Global theme for components',
+    toolbar: {
+      icon: 'circlehollow',
+      title: 'Theme',
+      items: [
+        { value: 'light', icon: 'circlehollow', title: 'light' },
+        { value: 'dark', icon: 'circle', title: 'dark' },
+        { value: 'side-by-side', icon: 'sidebar', title: 'side by side' },
+        { value: 'stacked', icon: 'bottombar', title: 'stacked' },
+      ],
+    },
+  },
+  locale: {
+    name: 'Locale',
+    description: 'Internationalization locale',
+    toolbar: {
+      icon: 'globe',
+      shortcuts: {
+        next: {
+          label: 'Go to next language',
+          keys: ['L'],
+        },
+        previous: {
+          label: 'Go to previous language',
+          keys: ['K'],
+        },
+        reset: {
+          label: 'Reset language',
+          keys: ['meta', 'shift', 'L'],
+        },
+      },
+      items: [
+        { title: 'Reset locale', type: 'reset' },
+        { value: 'en', right: '🇺🇸', title: 'English' },
+        { value: 'es', right: '🇪🇸', title: 'Español' },
+        { value: 'zh', right: '🇨🇳', title: '中文' },
+        { value: 'kr', right: '🇰🇷', title: '한국어' },
+      ],
+    },
+  },
+};
+
+export const loaders = [async () => ({ globalValue: 1 })];
+
+export const argTypes = { color: { control: 'color' } };
+export const args = { color: 'red' };

code/ui/manager/package.json

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

code/ui/manager/src/app.tsx

@@ -1,7 +1,7 @@
 import React, { FC, useMemo } from 'react';
 import sizeMe from 'react-sizeme';
 
-import { State } from '@storybook/api';
+import { type State } from '@storybook/api';
 import { Symbols } from '@storybook/components';
 import { Route } from '@storybook/router';
 import { Global, createGlobal, styled } from '@storybook/theming';

code/ui/manager/src/components/layout/app.mockdata.tsx

@@ -1,8 +1,8 @@
 import global from 'global';
 import React, { Component, FC } from 'react';
 import { styled } from '@storybook/theming';
-import { Collection } from '@storybook/addons';
-import { State } from '@storybook/api';
+import type { Collection } from '@storybook/addons';
+import type { State } from '@storybook/api';
 import { Sidebar, SidebarProps } from '../sidebar/Sidebar';
 import Panel from '../panel/panel';
 import { Preview } from '../preview/preview';

code/ui/manager/src/components/layout/container.tsx

@@ -496,7 +496,7 @@ class Layout extends Component<LayoutProps, LayoutState> {
   };
 
   render() {
-    const { children, bounds, options, theme, viewMode, panelCount } = this.props;
+    const { children, bounds, options, viewMode, panelCount } = this.props;
     const { isDragging, resizerNav, resizerPanel } = this.state;
 
     const margin = 0;

code/ui/manager/src/components/layout/desktop.stories.tsx

@@ -15,18 +15,12 @@ export default {
   decorators: [
     ((StoryFn, c) => {
       const mocked = true;
-      const height = 900;
-      const width = 1200;
 
-      if (isChromatic) {
+      if (isChromatic()) {
         store.local.set(`storybook-layout`, {});
       }
 
-      const props = {
-        height,
-        width,
-        ...(mocked ? mockProps : realProps),
-      };
+      const props = mocked ? mockProps : realProps;
 
       return (
         <div style={{ minHeight: 900, minWidth: 1200 }}>

code/ui/manager/src/components/layout/desktop.tsx

@@ -1,6 +1,6 @@
 import React, { Fragment, ComponentType, FC } from 'react';
 
-import { State } from '@storybook/api';
+import type { State } from '@storybook/api';
 import * as S from './container';
 
 export interface DesktopProps {

code/ui/manager/src/components/layout/mobile.tsx

@@ -1,5 +1,5 @@
 import React, { Component, Children, ComponentType, FC, ReactNode } from 'react';
-import { State, ActiveTabs } from '@storybook/api';
+import { type State, ActiveTabs } from '@storybook/api';
 import { styled } from '@storybook/theming';
 
 import { TabButton } from '@storybook/components';

code/ui/manager/src/components/notifications/NotificationItem.tsx

@@ -1,8 +1,8 @@
 import React, { FC, SyntheticEvent } from 'react';
-import { State } from '@storybook/api';
+import { type State } from '@storybook/api';
 import { Link } from '@storybook/router';
 import { styled } from '@storybook/theming';
-import { Icons, IconButton, IconsProps } from '@storybook/components';
+import { Icons, IconButton, type IconsProps } from '@storybook/components';
 import { transparentize } from 'polished';
 
 const DEFAULT_ICON_COLOUR = '#66BF3C' as const;

code/ui/manager/src/components/notifications/NotificationList.stories.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { LocationProvider } from '@storybook/router';
 
 import NotificationList from './NotificationList';
-import itemMeta, * as itemStories from './NotificationItem.stories';
+import itemMeta, * as itemStories from './NotificationItem.stories.jsx';
 
 export default {
   component: NotificationList,

code/ui/manager/src/components/panel/panel.tsx

@@ -2,7 +2,7 @@ import React, { Component, Fragment, ReactElement } from 'react';
 import { shortcutToHumanString } from '@storybook/api/shortcut';
 import { styled } from '@storybook/theming';
 import { Tabs, Icons, IconButton } from '@storybook/components';
-import { State } from '@storybook/api';
+import type { State } from '@storybook/api';
 
 const DesktopOnlyIconButton = styled(IconButton)({
   // Hides full screen icon at mobile breakpoint defined in app.js

code/ui/manager/src/components/preview/preview.mockdata.tsx

@@ -1,5 +1,5 @@
-import { types, Addon } from '@storybook/addons';
-import { API, State } from '@storybook/api';
+import { types, type Addon } from '@storybook/addons';
+import type { API, State } from '@storybook/api';
 import { PreviewProps } from './utils/types';
 
 export const previewProps: PreviewProps = {

code/ui/manager/src/components/preview/preview.tsx

@@ -2,9 +2,9 @@
 import React, { Fragment, useMemo, useEffect, useRef } from 'react';
 import { Helmet } from 'react-helmet-async';
 
-import { API, Consumer, Combo, merge } from '@storybook/api';
+import { type API, Consumer, type Combo, merge } from '@storybook/api';
 import { SET_CURRENT_STORY } from '@storybook/core-events';
-import { addons, types, Addon } from '@storybook/addons';
+import { addons, types, type Addon } from '@storybook/addons';
 
 import { Loader } from '@storybook/components';
 import { Location } from '@storybook/router';

code/ui/manager/src/components/preview/toolbar.tsx

@@ -3,11 +3,11 @@ import React, { Fragment, useMemo, FunctionComponent } from 'react';
 import { styled } from '@storybook/theming';
 
 import { FlexBar, IconButton, Icons, Separator, TabButton, TabBar } from '@storybook/components';
-import { Consumer, Combo, API, State, merge, LeafEntry } from '@storybook/api';
+import { Consumer, type Combo, type API, type State, merge, type LeafEntry } from '@storybook/api';
 import { shortcutToHumanString } from '@storybook/api/shortcut';
-import { addons, Addon, types } from '@storybook/addons';
+import { addons, type Addon, types } from '@storybook/addons';
 
-import { Location, RenderData } from '@storybook/router';
+import { Location, type RenderData } from '@storybook/router';
 import { zoomTool } from './tools/zoom';
 
 import * as S from './utils/components';

code/ui/manager/src/components/preview/tools/addons.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { IconButton, Icons } from '@storybook/components';
-import { Consumer, Combo } from '@storybook/api';
-import { Addon } from '@storybook/addons';
+import { Consumer, type Combo } from '@storybook/api';
+import type { Addon } from '@storybook/addons';
 
 const menuMapper = ({ api, state }: Combo) => ({
   isVisible: state.layout.showPanel,

code/ui/manager/src/components/preview/tools/copy.tsx

@@ -2,8 +2,8 @@ import global from 'global';
 import React from 'react';
 import copy from 'copy-to-clipboard';
 import { getStoryHref, IconButton, Icons } from '@storybook/components';
-import { Consumer, Combo } from '@storybook/api';
-import { Addon } from '@storybook/addons';
+import { Consumer, type Combo } from '@storybook/api';
+import type { Addon } from '@storybook/addons';
 
 const { PREVIEW_URL, document } = global;
 

code/ui/manager/src/components/preview/tools/eject.tsx

@@ -1,8 +1,8 @@
 import global from 'global';
 import React from 'react';
 import { getStoryHref, IconButton, Icons } from '@storybook/components';
-import { Consumer, Combo } from '@storybook/api';
-import { Addon } from '@storybook/addons';
+import { Consumer, type Combo } from '@storybook/api';
+import type { Addon } from '@storybook/addons';
 
 const { PREVIEW_URL } = global;
 

code/ui/manager/src/components/preview/tools/menu.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { IconButton, Icons, Separator } from '@storybook/components';
-import { Consumer, Combo } from '@storybook/api';
-import { Addon } from '@storybook/addons';
+import { Consumer, type Combo } from '@storybook/api';
+import type { Addon } from '@storybook/addons';
 
 const menuMapper = ({ api, state }: Combo) => ({
   isVisible: state.layout.showNav,

code/ui/manager/src/components/preview/tools/remount.tsx

@@ -1,7 +1,7 @@
 import React, { ComponentProps, useState } from 'react';
 import { IconButton, Icons } from '@storybook/components';
-import { Consumer, Combo } from '@storybook/api';
-import { Addon } from '@storybook/addons';
+import { Consumer, type Combo } from '@storybook/api';
+import type { Addon } from '@storybook/addons';
 import { styled } from '@storybook/theming';
 import { FORCE_REMOUNT } from '@storybook/core-events';
 

code/ui/manager/src/components/preview/tools/zoom.tsx

@@ -1,7 +1,7 @@
 import React, { Component, SyntheticEvent, useCallback, MouseEventHandler } from 'react';
 
 import { Icons, IconButton, Separator } from '@storybook/components';
-import { Addon } from '@storybook/addons';
+import type { Addon } from '@storybook/addons';
 
 const initialZoom = 1 as const;
 
@@ -48,30 +48,32 @@ const Zoom = React.memo<{
 
 export { Zoom, ZoomConsumer, ZoomProvider };
 
-const ZoomWrapper = React.memo<{ set: Function; value: number }>(({ set, value }) => {
-  const zoomIn = useCallback(
-    (e: SyntheticEvent) => {
-      e.preventDefault();
-      set(0.8 * value);
-    },
-    [set, value]
-  );
-  const zoomOut = useCallback(
-    (e: SyntheticEvent) => {
-      e.preventDefault();
-      set(1.25 * value);
-    },
-    [set, value]
-  );
-  const reset = useCallback(
-    (e) => {
-      e.preventDefault();
-      set(initialZoom);
-    },
-    [set, initialZoom]
-  );
-  return <Zoom key="zoom" {...{ zoomIn, zoomOut, reset }} />;
-});
+const ZoomWrapper = React.memo<{ set: (zoomLevel: number) => void; value: number }>(
+  ({ set, value }) => {
+    const zoomIn = useCallback(
+      (e: SyntheticEvent) => {
+        e.preventDefault();
+        set(0.8 * value);
+      },
+      [set, value]
+    );
+    const zoomOut = useCallback(
+      (e: SyntheticEvent) => {
+        e.preventDefault();
+        set(1.25 * value);
+      },
+      [set, value]
+    );
+    const reset = useCallback(
+      (e) => {
+        e.preventDefault();
+        set(initialZoom);
+      },
+      [set, initialZoom]
+    );
+    return <Zoom key="zoom" {...{ zoomIn, zoomOut, reset }} />;
+  }
+);
 
 export const zoomTool: Addon = {
   title: 'zoom',

code/ui/manager/src/components/preview/utils/types.tsx

@@ -1,5 +1,5 @@
 import { FunctionComponent, ReactNode } from 'react';
-import { State, API, LeafEntry } from '@storybook/api';
+import type { State, API, LeafEntry } from '@storybook/api';
 import { StoryId } from '@storybook/csf';
 
 export type ViewMode = State['viewMode'];

code/ui/manager/src/components/sidebar/Explorer.stories.tsx

@@ -22,7 +22,7 @@ const selected = {
 
 const simple: Record<string, RefType> = {
   storybook_internal: {
-    title: null,
+    title: undefined,
     id: 'storybook_internal',
     url: 'iframe.html',
     ready: true,

code/ui/manager/src/components/sidebar/Heading.stories.tsx

@@ -79,6 +79,7 @@ export const LinkAndText: Story = () => {
           title: 'My title',
           url: 'https://example.com',
           image: null,
+          target: undefined,
         },
       }}
     >
@@ -97,6 +98,7 @@ export const OnlyText: Story = () => {
           title: 'My title',
           url: null,
           image: null,
+          target: undefined,
         },
       }}
     >
@@ -115,6 +117,7 @@ export const LongText: Story = () => {
           title: 'My title is way to long to actually fit',
           url: null,
           image: null,
+          target: undefined,
         },
       }}
     >
@@ -133,6 +136,7 @@ export const CustomTitle: Story = () => {
           title: '<span style="color:red">My custom title</span>',
           url: null,
           image: null,
+          target: undefined,
         },
       }}
     >
@@ -151,6 +155,7 @@ export const CustomBrandImage: Story = () => {
           title: 'My Title',
           url: 'https://example.com',
           image: 'https://storybook.js.org/images/placeholders/150x22.png',
+          target: undefined,
         },
       }}
     >
@@ -169,6 +174,7 @@ export const CustomBrandImageTall: Story = () => {
           title: 'My Title',
           url: 'https://example.com',
           image: 'https://storybook.js.org/images/placeholders/100x150.png',
+          target: undefined,
         },
       }}
     >
@@ -187,6 +193,7 @@ export const CustomBrandImageUnsizedSVG: Story = () => {
           title: 'My Title',
           url: 'https://example.com',
           image: 'https://s.cdpn.io/91525/potofgold.svg',
+          target: undefined,
         },
       }}
     >
@@ -202,9 +209,10 @@ export const NoBrand: Story = () => {
       theme={{
         ...theme,
         brand: {
-          title: null,
+          title: undefined,
           url: null,
           image: null,
+          target: undefined,
         },
       }}
     >

code/ui/manager/src/components/sidebar/Menu.stories.tsx

@@ -1,7 +1,7 @@
 import { expect } from '@storybook/jest';
 import React, { Fragment, FunctionComponent } from 'react';
 
-import { WithTooltip, TooltipLinkList, Icons } from '@storybook/components';
+import { TooltipLinkList } from '@storybook/components';
 import { styled } from '@storybook/theming';
 import { within, userEvent, screen } from '@storybook/testing-library';
 import { MenuItemIcon, SidebarMenu, ToolbarMenu } from './Menu';
@@ -73,7 +73,6 @@ Expanded.play = async ({ canvasElement }) => {
 export const ExpandedWithoutReleaseNotes = () => {
   const menu = useMenu(
     {
-      // @ts-expect-error (Converted from ts-ignore)
       getShortcutKeys: () => ({}),
       getAddonsShortcuts: () => ({}),
       versionUpdateAvailable: () => false,

code/ui/manager/src/components/sidebar/Menu.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo, useState, ComponentProps, FC } from 'react';
+import React, { useMemo, ComponentProps, FC } from 'react';
 
 import { styled } from '@storybook/theming';
 import { transparentize } from 'polished';

code/ui/manager/src/components/sidebar/__tests__/Sidebar.test.tsx

@@ -28,6 +28,7 @@ const generateStories = ({ title, refId }: { title: string; refId?: string }): S
   const docsId = `${rootId}-${hypenatedComponentName}--docs`;
 
   const storyBase: HashEntry[] = [
+    // @ts-expect-error the missing fields are deprecated and replaced by the type prop
     {
       type: 'root',
       id: rootId,
@@ -37,6 +38,7 @@ const generateStories = ({ title, refId }: { title: string; refId?: string }): S
       children: [componentId],
       startCollapsed: false,
     },
+    // @ts-expect-error the missing fields are deprecated and replaced by the type prop
     {
       type: 'component',
       id: componentId,
@@ -46,6 +48,7 @@ const generateStories = ({ title, refId }: { title: string; refId?: string }): S
       children: [docsId],
       parent: rootId,
     },
+    // @ts-expect-error the missing fields are deprecated and replaced by the type prop
     {
       type: 'docs',
       id: docsId,

code/ui/manager/src/containers/panel.stories.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+
+export default {
+  title: 'UI/Addon Panel',
+};
+
+export const AllAddons = () => <div>By default all addon panels are rendered</div>;
+
+/*
+TODO: this story currently breaks the whole Storybook UI (including the manager).
+Current findings:
+- Only happens when actions below are disabled, not when a11y is.
+- Is related to panels and addon tabs.
+- Commenting out code/lib/components/src/tabs/tabs.tsx#L186 fixes the issue.
+- ... this line: {list.map(({ id, active, render }) => render({ key: id, active }))}
+- The error is most likely the shenanigans we do at code/lib/components/src/tabs/tabs.tsx#childrenToList
+
+export const FilteredAddons = () => <div>By default all addon panels are rendered</div>;
+FilteredAddons.parameters = {
+  a11y: { disable: true },
+  actions: { disable: true },
+};
+*/

code/ui/manager/src/containers/panel.tsx

@@ -1,6 +1,6 @@
 import React, { FC } from 'react';
 import memoize from 'memoizerific';
-import { Consumer, Combo } from '@storybook/api';
+import { Consumer, type Combo } from '@storybook/api';
 
 import AddonPanel from '../components/panel/panel';
 

code/ui/manager/src/settings/SettingsFooter.stories.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { DecoratorFn } from '@storybook/react';
+import type { DecoratorFn } from '@storybook/react';
 import SettingsFooter from './SettingsFooter';
 
 export default {