fix some type and lint errors

.vscode/settings.json

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

code/manager/ui/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/manager/ui/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/manager/ui/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/manager/ui/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/manager/ui/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/manager/ui/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/manager/ui/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/manager/ui/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/manager/ui/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/manager/ui/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/manager/ui/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/manager/ui/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/manager/ui/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/manager/ui/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/manager/ui/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/manager/ui/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/manager/ui/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/manager/ui/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/manager/ui/src/components/sidebar/Menu.stories.tsx

@@ -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/manager/ui/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/manager/ui/src/containers/menu.tsx

@@ -39,7 +39,7 @@ const Shortcut: FC<{ keys: string[] }> = ({ keys }) => (
 );
 
 export const useMenu = (
-  api: API,
+  api: Omit<API, 'releaseNotesVersion'> & { releaseNotesVersion: () => string | undefined },
   showToolbar: boolean,
   isFullscreen: boolean,
   showPanel: boolean,

code/manager/ui/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/manager/ui/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 {

code/manager/ui/src/settings/about.tsx

@@ -1,7 +1,7 @@
 import React, { Fragment, FC } from 'react';
 import semver from 'semver';
 import { styled } from '@storybook/theming';
-import { State } from '@storybook/api';
+import type { State } from '@storybook/api';
 import Markdown from 'markdown-to-jsx';
 
 import { StorybookIcon, SyntaxHighlighter, Link, DocumentWrapper } from '@storybook/components';

code/manager/ui/src/settings/about_page.tsx

@@ -1,6 +1,6 @@
 import React, { Component, FC } from 'react';
 
-import { API, useStorybookApi } from '@storybook/api';
+import { type API, useStorybookApi } from '@storybook/api';
 
 import { AboutScreen } from './about';
 

code/package.json

@@ -81,7 +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": "cd manager && ../lib/cli/bin/index.js dev --port 6006 --no-manager-cache",
+    "storybook:ui": "./lib/cli/bin/index.js dev --port 6006 --config-dir ./manager/.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",