From d2b156defea4a9fa5796a8df93c778aec4e7e345 Mon Sep 17 00:00:00 2001
From: Norbert de Langen <ndelangen@me.com>
Date: Wed, 9 Aug 2023 23:10:49 +0200
Subject: [PATCH 01/48] add bottom slot to sidebar

---
 code/lib/types/src/modules/addons.ts          | 19 +++++++-
 code/ui/components/src/new/Button/Button.tsx  |  3 +-
 .../components/sidebar/Sidebar.stories.tsx    | 46 ++++++++++++++++++-
 .../src/components/sidebar/Sidebar.tsx        | 35 +++++++++++---
 code/ui/manager/src/containers/sidebar.tsx    |  4 +-
 5 files changed, 97 insertions(+), 10 deletions(-)

diff --git a/code/lib/types/src/modules/addons.ts b/code/lib/types/src/modules/addons.ts
index 4735d41614f6..fbe621eccf03 100644
--- a/code/lib/types/src/modules/addons.ts
+++ b/code/lib/types/src/modules/addons.ts
@@ -444,15 +444,27 @@ export interface Addon_WrapperType {
     }>
   >;
 }
+export interface Addon_BottomType {
+  type: Addon_TypesEnum.experimental_BOTTOM;
+  /**
+   * The unique id of the tool.
+   */
+  id: string;
+  /**
+   * A React.FunctionComponent.
+   */
+  render: FCWithoutChildren;
+}
 
 type Addon_TypeBaseNames = Exclude<
   Addon_TypesEnum,
-  Addon_TypesEnum.PREVIEW | Addon_TypesEnum.experimental_PAGE
+  Addon_TypesEnum.PREVIEW | Addon_TypesEnum.experimental_PAGE | Addon_TypesEnum.experimental_BOTTOM
 >;
 
 export interface Addon_TypesMapping extends Record<Addon_TypeBaseNames, Addon_BaseType> {
   [Addon_TypesEnum.PREVIEW]: Addon_WrapperType;
   [Addon_TypesEnum.experimental_PAGE]: Addon_PageType;
+  [Addon_TypesEnum.experimental_BOTTOM]: Addon_BottomType;
 }
 
 export type Addon_Loader<API> = (api: API) => void;
@@ -506,6 +518,11 @@ export enum Addon_TypesEnum {
    * @unstable
    */
   experimental_PAGE = 'page',
+  /**
+   * This adds items in the bottom of the sidebar.
+   * @unstable
+   */
+  experimental_BOTTOM = 'bottom',
 
   /**
    * @deprecated This property does nothing, and will be removed in Storybook 8.0.
diff --git a/code/ui/components/src/new/Button/Button.tsx b/code/ui/components/src/new/Button/Button.tsx
index f36ea73379d4..c65f4e78aed3 100644
--- a/code/ui/components/src/new/Button/Button.tsx
+++ b/code/ui/components/src/new/Button/Button.tsx
@@ -1,3 +1,4 @@
+import type { ReactNode } from 'react';
 import React, { forwardRef } from 'react';
 import { styled } from '@storybook/theming';
 import { darken, lighten, rgba, transparentize } from 'polished';
@@ -6,7 +7,7 @@ import type { PropsOf } from '../utils/types';
 import { Icon } from '../Icon/Icon';
 
 interface ButtonProps<T extends React.ElementType = React.ElementType> {
-  children: string;
+  children?: ReactNode;
   as?: T;
   size?: 'small' | 'medium';
   variant?: 'solid' | 'outline' | 'ghost';
diff --git a/code/ui/manager/src/components/sidebar/Sidebar.stories.tsx b/code/ui/manager/src/components/sidebar/Sidebar.stories.tsx
index 66fe63fbe43b..412afa5ec389 100644
--- a/code/ui/manager/src/components/sidebar/Sidebar.stories.tsx
+++ b/code/ui/manager/src/components/sidebar/Sidebar.stories.tsx
@@ -1,8 +1,10 @@
 import React from 'react';
 
-import type { IndexHash, State } from 'lib/manager-api/src';
+import type { IndexHash, State } from '@storybook/manager-api';
+import { types } from '@storybook/manager-api';
 import type { StoryObj, Meta } from '@storybook/react';
 import { within, userEvent } from '@storybook/testing-library';
+import { Button } from '@storybook/components/experimental';
 import { Sidebar, DEFAULT_REF_ID } from './Sidebar';
 import { standardData as standardHeaderData } from './Heading.stories';
 import * as ExplorerStories from './Explorer.stories';
@@ -222,3 +224,45 @@ export const Searching: Story = {
     userEvent.type(search, 'B2');
   },
 };
+
+export const Bottom: Story = {
+  args: {
+    previewInitialized: true,
+  },
+  render: (args) => (
+    <Sidebar
+      {...args}
+      menu={menu}
+      index={index as any}
+      storyId={storyId}
+      refId={DEFAULT_REF_ID}
+      refs={{}}
+      status={{}}
+      bottom={[
+        {
+          id: '1',
+          type: types.experimental_BOTTOM,
+          render: () => (
+            <Button variant="outline" icon="FaceHappy">
+              Custom addon A
+            </Button>
+          ),
+        },
+        {
+          id: '2',
+          type: types.experimental_BOTTOM,
+          render: () => (
+            <Button variant="outline" icon="FaceHappy">
+              Custom addon B
+            </Button>
+          ),
+        },
+        {
+          id: '3',
+          type: types.experimental_BOTTOM,
+          render: () => <Button variant="outline" icon="FaceHappy" />,
+        },
+      ]}
+    />
+  ),
+};
diff --git a/code/ui/manager/src/components/sidebar/Sidebar.tsx b/code/ui/manager/src/components/sidebar/Sidebar.tsx
index f8daa49b726a..526b3e2cc356 100644
--- a/code/ui/manager/src/components/sidebar/Sidebar.tsx
+++ b/code/ui/manager/src/components/sidebar/Sidebar.tsx
@@ -4,7 +4,7 @@ import { styled } from '@storybook/theming';
 import { ScrollArea, Spaced } from '@storybook/components';
 import type { State } from '@storybook/manager-api';
 
-import type { API_LoadedRefData } from 'lib/types/src';
+import type { Addon_BottomType, API_LoadedRefData } from '@storybook/types';
 import { Heading } from './Heading';
 
 // eslint-disable-next-line import/no-cycle
@@ -29,10 +29,23 @@ const Container = styled.nav({
   height: '100%',
 });
 
-const StyledSpaced = styled(Spaced)({
-  paddingBottom: '2.5rem',
+const Top = styled(Spaced)({
+  padding: 20,
+  flex: 1,
 });
 
+const Bottom = styled.div(({ theme }) => ({
+  borderTop: `1px solid ${theme.appBorderColor}`,
+  padding: theme.layoutMargin / 2,
+  display: 'flex',
+  flexWrap: 'wrap',
+  gap: theme.layoutMargin / 2,
+
+  '&:empty': {
+    display: 'none',
+  },
+}));
+
 const CustomScrollArea = styled(ScrollArea)({
   '&&&&& .os-scrollbar-handle:before': {
     left: -12,
@@ -40,7 +53,10 @@ const CustomScrollArea = styled(ScrollArea)({
   '&&&&& .os-scrollbar-vertical': {
     right: 5,
   },
-  padding: 20,
+  '& [data-overlayscrollbars-viewport]': {
+    display: 'flex',
+    flexDirection: 'column',
+  },
 });
 
 const Swap = React.memo(function Swap({
@@ -82,6 +98,7 @@ export interface SidebarProps extends API_LoadedRefData {
   refs: State['refs'];
   status: State['status'];
   menu: any[];
+  bottom?: Addon_BottomType[];
   storyId?: string;
   refId?: string;
   menuHighlighted?: boolean;
@@ -96,6 +113,7 @@ export const Sidebar = React.memo(function Sidebar({
   status,
   previewInitialized,
   menu,
+  bottom = [],
   menuHighlighted = false,
   enableShortcuts = true,
   refs = {},
@@ -108,7 +126,7 @@ export const Sidebar = React.memo(function Sidebar({
   return (
     <Container className="container sidebar-container">
       <CustomScrollArea vertical>
-        <StyledSpaced row={1.6}>
+        <Top row={1.6}>
           <Heading
             className="sidebar-header"
             menuHighlighted={menuHighlighted}
@@ -151,7 +169,12 @@ export const Sidebar = React.memo(function Sidebar({
               </Swap>
             )}
           </Search>
-        </StyledSpaced>
+        </Top>
+        <Bottom>
+          {bottom.map(({ id, render: Render }) => (
+            <Render key={id} />
+          ))}
+        </Bottom>
       </CustomScrollArea>
     </Container>
   );
diff --git a/code/ui/manager/src/containers/sidebar.tsx b/code/ui/manager/src/containers/sidebar.tsx
index 7a69446a6e8a..b15134c62d25 100755
--- a/code/ui/manager/src/containers/sidebar.tsx
+++ b/code/ui/manager/src/containers/sidebar.tsx
@@ -1,7 +1,7 @@
 import React, { useMemo } from 'react';
 
 import type { Combo, StoriesHash } from '@storybook/manager-api';
-import { Consumer } from '@storybook/manager-api';
+import { types, Consumer } from '@storybook/manager-api';
 
 import { Sidebar as SidebarComponent } from '../components/sidebar/Sidebar';
 import { useMenu } from './menu';
@@ -65,6 +65,8 @@ const Sidebar = React.memo(function Sideber() {
       );
     }, [originalIndex, filters, status]);
 
+    const bottom = useMemo(() => Object.values(api.getElements(types.experimental_BOTTOM)), []);
+
     return {
       title: name,
       url,

From 0f4e59f3dba7a04dbacedd8cfcd2758c84642d22 Mon Sep 17 00:00:00 2001
From: Norbert de Langen <ndelangen@me.com>
Date: Wed, 9 Aug 2023 23:48:50 +0200
Subject: [PATCH 02/48] add implementation

---
 code/lib/manager-api/src/lib/addons.ts     | 2 ++
 code/ui/.storybook/manager.tsx             | 9 +++++++++
 code/ui/manager/src/containers/sidebar.tsx | 4 +++-
 3 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/code/lib/manager-api/src/lib/addons.ts b/code/lib/manager-api/src/lib/addons.ts
index abaf7101d5a0..682691c1b810 100644
--- a/code/lib/manager-api/src/lib/addons.ts
+++ b/code/lib/manager-api/src/lib/addons.ts
@@ -13,6 +13,7 @@ import type {
   Addon_Types,
   Addon_TypesMapping,
   Addon_WrapperType,
+  Addon_BottomType,
 } from '@storybook/types';
 import { Addon_TypesEnum } from '@storybook/types';
 import { logger } from '@storybook/client-logger';
@@ -141,6 +142,7 @@ export class AddonStore {
     id: string,
     addon:
       | Addon_BaseType
+      | (Omit<Addon_BottomType, 'id'> & DeprecatedAddonWithId)
       | (Omit<Addon_PageType, 'id'> & DeprecatedAddonWithId)
       | (Omit<Addon_WrapperType, 'id'> & DeprecatedAddonWithId)
   ): void {
diff --git a/code/ui/.storybook/manager.tsx b/code/ui/.storybook/manager.tsx
index 8bb469374990..1f8652df077d 100644
--- a/code/ui/.storybook/manager.tsx
+++ b/code/ui/.storybook/manager.tsx
@@ -1,3 +1,4 @@
+import React from 'react';
 import { addons, types } from '@storybook/manager-api';
 import startCase from 'lodash/startCase.js';
 
@@ -9,3 +10,11 @@ addons.setConfig({
     // },
   },
 });
+
+// addons.register('my/design-addon', () => {
+//   addons.add('my/design-addon', {
+//     type: types.experimental_BOTTOM,
+//     id: 'my/design-addon/panel',
+//     render: () => <div>HI</div>,
+//   });
+// });
diff --git a/code/ui/manager/src/containers/sidebar.tsx b/code/ui/manager/src/containers/sidebar.tsx
index b15134c62d25..af442e780cd7 100755
--- a/code/ui/manager/src/containers/sidebar.tsx
+++ b/code/ui/manager/src/containers/sidebar.tsx
@@ -65,7 +65,8 @@ const Sidebar = React.memo(function Sideber() {
       );
     }, [originalIndex, filters, status]);
 
-    const bottom = useMemo(() => Object.values(api.getElements(types.experimental_BOTTOM)), []);
+    const items = api.getElements(types.experimental_BOTTOM);
+    const bottom = useMemo(() => Object.values(items), [items]);
 
     return {
       title: name,
@@ -81,6 +82,7 @@ const Sidebar = React.memo(function Sideber() {
       menu,
       menuHighlighted: whatsNewNotificationsEnabled && api.isWhatsNewUnread(),
       enableShortcuts,
+      bottom,
     };
   };
   return (

From f2b6e0196c50b54d58b9f7dbda7513f5dfe4815f Mon Sep 17 00:00:00 2001
From: Norbert de Langen <ndelangen@me.com>
Date: Thu, 10 Aug 2023 13:27:34 +0200
Subject: [PATCH 03/48] rename to `experimental_SIDEBAR_BOTTOM`

---
 code/lib/types/src/modules/addons.ts                   | 10 ++++++----
 code/ui/.storybook/manager.tsx                         |  2 +-
 .../manager/src/components/sidebar/Sidebar.stories.tsx |  6 +++---
 code/ui/manager/src/containers/sidebar.tsx             |  2 +-
 4 files changed, 11 insertions(+), 9 deletions(-)

diff --git a/code/lib/types/src/modules/addons.ts b/code/lib/types/src/modules/addons.ts
index fbe621eccf03..329df096c4de 100644
--- a/code/lib/types/src/modules/addons.ts
+++ b/code/lib/types/src/modules/addons.ts
@@ -445,7 +445,7 @@ export interface Addon_WrapperType {
   >;
 }
 export interface Addon_BottomType {
-  type: Addon_TypesEnum.experimental_BOTTOM;
+  type: Addon_TypesEnum.experimental_SIDEBAR_BOTTOM;
   /**
    * The unique id of the tool.
    */
@@ -458,13 +458,15 @@ export interface Addon_BottomType {
 
 type Addon_TypeBaseNames = Exclude<
   Addon_TypesEnum,
-  Addon_TypesEnum.PREVIEW | Addon_TypesEnum.experimental_PAGE | Addon_TypesEnum.experimental_BOTTOM
+  | Addon_TypesEnum.PREVIEW
+  | Addon_TypesEnum.experimental_PAGE
+  | Addon_TypesEnum.experimental_SIDEBAR_BOTTOM
 >;
 
 export interface Addon_TypesMapping extends Record<Addon_TypeBaseNames, Addon_BaseType> {
   [Addon_TypesEnum.PREVIEW]: Addon_WrapperType;
   [Addon_TypesEnum.experimental_PAGE]: Addon_PageType;
-  [Addon_TypesEnum.experimental_BOTTOM]: Addon_BottomType;
+  [Addon_TypesEnum.experimental_SIDEBAR_BOTTOM]: Addon_BottomType;
 }
 
 export type Addon_Loader<API> = (api: API) => void;
@@ -522,7 +524,7 @@ export enum Addon_TypesEnum {
    * This adds items in the bottom of the sidebar.
    * @unstable
    */
-  experimental_BOTTOM = 'bottom',
+  experimental_SIDEBAR_BOTTOM = 'sidebar-bottom',
 
   /**
    * @deprecated This property does nothing, and will be removed in Storybook 8.0.
diff --git a/code/ui/.storybook/manager.tsx b/code/ui/.storybook/manager.tsx
index 1f8652df077d..7e2a0dfd4da4 100644
--- a/code/ui/.storybook/manager.tsx
+++ b/code/ui/.storybook/manager.tsx
@@ -13,7 +13,7 @@ addons.setConfig({
 
 // addons.register('my/design-addon', () => {
 //   addons.add('my/design-addon', {
-//     type: types.experimental_BOTTOM,
+//     type: types.experimental_SIDEBAR_BOTTOM,
 //     id: 'my/design-addon/panel',
 //     render: () => <div>HI</div>,
 //   });
diff --git a/code/ui/manager/src/components/sidebar/Sidebar.stories.tsx b/code/ui/manager/src/components/sidebar/Sidebar.stories.tsx
index 412afa5ec389..09dda0f61ec3 100644
--- a/code/ui/manager/src/components/sidebar/Sidebar.stories.tsx
+++ b/code/ui/manager/src/components/sidebar/Sidebar.stories.tsx
@@ -241,7 +241,7 @@ export const Bottom: Story = {
       bottom={[
         {
           id: '1',
-          type: types.experimental_BOTTOM,
+          type: types.experimental_SIDEBAR_BOTTOM,
           render: () => (
             <Button variant="outline" icon="FaceHappy">
               Custom addon A
@@ -250,7 +250,7 @@ export const Bottom: Story = {
         },
         {
           id: '2',
-          type: types.experimental_BOTTOM,
+          type: types.experimental_SIDEBAR_BOTTOM,
           render: () => (
             <Button variant="outline" icon="FaceHappy">
               Custom addon B
@@ -259,7 +259,7 @@ export const Bottom: Story = {
         },
         {
           id: '3',
-          type: types.experimental_BOTTOM,
+          type: types.experimental_SIDEBAR_BOTTOM,
           render: () => <Button variant="outline" icon="FaceHappy" />,
         },
       ]}
diff --git a/code/ui/manager/src/containers/sidebar.tsx b/code/ui/manager/src/containers/sidebar.tsx
index ead954e00386..9098b3bc99ab 100755
--- a/code/ui/manager/src/containers/sidebar.tsx
+++ b/code/ui/manager/src/containers/sidebar.tsx
@@ -66,7 +66,7 @@ const Sidebar = React.memo(function Sideber() {
       return Object.fromEntries(Object.entries(originalIndex).filter(([key]) => filtered.has(key)));
     }, [originalIndex, filters, status]);
 
-    const items = api.getElements(types.experimental_BOTTOM);
+    const items = api.getElements(types.experimental_SIDEBAR_BOTTOM);
     const bottom = useMemo(() => Object.values(items), [items]);
 
     return {

From b28af4dca00d9b08f2445f45d27abafc92b6b835 Mon Sep 17 00:00:00 2001
From: Norbert de Langen <ndelangen@me.com>
Date: Fri, 11 Aug 2023 12:53:54 +0200
Subject: [PATCH 04/48] continue rename

---
 code/lib/manager-api/src/lib/addons.ts             | 4 ++--
 code/lib/types/src/modules/addons.ts               | 4 ++--
 code/ui/manager/src/components/sidebar/Sidebar.tsx | 4 ++--
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/code/lib/manager-api/src/lib/addons.ts b/code/lib/manager-api/src/lib/addons.ts
index 682691c1b810..a7358b873cfb 100644
--- a/code/lib/manager-api/src/lib/addons.ts
+++ b/code/lib/manager-api/src/lib/addons.ts
@@ -13,7 +13,7 @@ import type {
   Addon_Types,
   Addon_TypesMapping,
   Addon_WrapperType,
-  Addon_BottomType,
+  Addon_SidebarBottomType,
 } from '@storybook/types';
 import { Addon_TypesEnum } from '@storybook/types';
 import { logger } from '@storybook/client-logger';
@@ -142,7 +142,7 @@ export class AddonStore {
     id: string,
     addon:
       | Addon_BaseType
-      | (Omit<Addon_BottomType, 'id'> & DeprecatedAddonWithId)
+      | (Omit<Addon_SidebarBottomType, 'id'> & DeprecatedAddonWithId)
       | (Omit<Addon_PageType, 'id'> & DeprecatedAddonWithId)
       | (Omit<Addon_WrapperType, 'id'> & DeprecatedAddonWithId)
   ): void {
diff --git a/code/lib/types/src/modules/addons.ts b/code/lib/types/src/modules/addons.ts
index b49196b5dd79..96c16ada1e79 100644
--- a/code/lib/types/src/modules/addons.ts
+++ b/code/lib/types/src/modules/addons.ts
@@ -448,7 +448,7 @@ export interface Addon_WrapperType {
     }>
   >;
 }
-export interface Addon_BottomType {
+export interface Addon_SidebarBottomType {
   type: Addon_TypesEnum.experimental_SIDEBAR_BOTTOM;
   /**
    * The unique id of the tool.
@@ -470,7 +470,7 @@ type Addon_TypeBaseNames = Exclude<
 export interface Addon_TypesMapping extends Record<Addon_TypeBaseNames, Addon_BaseType> {
   [Addon_TypesEnum.PREVIEW]: Addon_WrapperType;
   [Addon_TypesEnum.experimental_PAGE]: Addon_PageType;
-  [Addon_TypesEnum.experimental_SIDEBAR_BOTTOM]: Addon_BottomType;
+  [Addon_TypesEnum.experimental_SIDEBAR_BOTTOM]: Addon_SidebarBottomType;
 }
 
 export type Addon_Loader<API> = (api: API) => void;
diff --git a/code/ui/manager/src/components/sidebar/Sidebar.tsx b/code/ui/manager/src/components/sidebar/Sidebar.tsx
index 526b3e2cc356..7665fd41ae0a 100644
--- a/code/ui/manager/src/components/sidebar/Sidebar.tsx
+++ b/code/ui/manager/src/components/sidebar/Sidebar.tsx
@@ -4,7 +4,7 @@ import { styled } from '@storybook/theming';
 import { ScrollArea, Spaced } from '@storybook/components';
 import type { State } from '@storybook/manager-api';
 
-import type { Addon_BottomType, API_LoadedRefData } from '@storybook/types';
+import type { Addon_SidebarBottomType, API_LoadedRefData } from '@storybook/types';
 import { Heading } from './Heading';
 
 // eslint-disable-next-line import/no-cycle
@@ -98,7 +98,7 @@ export interface SidebarProps extends API_LoadedRefData {
   refs: State['refs'];
   status: State['status'];
   menu: any[];
-  bottom?: Addon_BottomType[];
+  bottom?: Addon_SidebarBottomType[];
   storyId?: string;
   refId?: string;
   menuHighlighted?: boolean;

From c47ca144a1429f446ac60ac51936ebca7bf40b03 Mon Sep 17 00:00:00 2001
From: Norbert de Langen <ndelangen@me.com>
Date: Fri, 11 Aug 2023 17:15:00 +0200
Subject: [PATCH 05/48] add the new type

---
 code/lib/manager-api/src/lib/addons.ts | 12 ++++++--
 code/lib/types/src/modules/addons.ts   | 41 ++++++++++++++++++++++++--
 2 files changed, 47 insertions(+), 6 deletions(-)

diff --git a/code/lib/manager-api/src/lib/addons.ts b/code/lib/manager-api/src/lib/addons.ts
index a7358b873cfb..1145ab1826f5 100644
--- a/code/lib/manager-api/src/lib/addons.ts
+++ b/code/lib/manager-api/src/lib/addons.ts
@@ -14,6 +14,7 @@ import type {
   Addon_TypesMapping,
   Addon_WrapperType,
   Addon_SidebarBottomType,
+  Addon_SidebarTopType,
 } from '@storybook/types';
 import { Addon_TypesEnum } from '@storybook/types';
 import { logger } from '@storybook/client-logger';
@@ -98,9 +99,13 @@ export class AddonStore {
     this.serverChannel = channel;
   };
 
-  getElements<T extends Addon_Types | Addon_TypesEnum.experimental_PAGE>(
-    type: T
-  ): Addon_Collection<Addon_TypesMapping[T]> {
+  getElements<
+    T extends
+      | Addon_Types
+      | Addon_TypesEnum.experimental_PAGE
+      | Addon_TypesEnum.experimental_SIDEBAR_BOTTOM
+      | Addon_TypesEnum.experimental_SIDEBAR_TOP
+  >(type: T): Addon_Collection<Addon_TypesMapping[T]> {
     if (!this.elements[type]) {
       this.elements[type] = {};
     }
@@ -142,6 +147,7 @@ export class AddonStore {
     id: string,
     addon:
       | Addon_BaseType
+      | (Omit<Addon_SidebarTopType, 'id'> & DeprecatedAddonWithId)
       | (Omit<Addon_SidebarBottomType, 'id'> & DeprecatedAddonWithId)
       | (Omit<Addon_PageType, 'id'> & DeprecatedAddonWithId)
       | (Omit<Addon_WrapperType, 'id'> & DeprecatedAddonWithId)
diff --git a/code/lib/types/src/modules/addons.ts b/code/lib/types/src/modules/addons.ts
index 96c16ada1e79..e5ec1bb2c3f3 100644
--- a/code/lib/types/src/modules/addons.ts
+++ b/code/lib/types/src/modules/addons.ts
@@ -29,7 +29,12 @@ import type {
 } from './csf';
 import type { IndexEntry } from './indexer';
 
-export type Addon_Types = Exclude<Addon_TypesEnum, Addon_TypesEnum.experimental_PAGE>;
+export type Addon_Types = Exclude<
+  Addon_TypesEnum,
+  | Addon_TypesEnum.experimental_PAGE
+  | Addon_TypesEnum.experimental_SIDEBAR_BOTTOM
+  | Addon_TypesEnum.experimental_SIDEBAR_TOP
+>;
 
 export interface Addon_ArgType<TArg = unknown> extends InputType {
   defaultValue?: TArg;
@@ -324,7 +329,12 @@ export type ReactJSXElement = {
   key: any;
 };
 
-export type Addon_Type = Addon_BaseType | Addon_PageType | Addon_WrapperType;
+export type Addon_Type =
+  | Addon_BaseType
+  | Addon_PageType
+  | Addon_WrapperType
+  | Addon_SidebarBottomType
+  | Addon_SidebarTopType;
 export interface Addon_BaseType {
   /**
    * The title of the addon.
@@ -335,7 +345,13 @@ export interface Addon_BaseType {
    * The type of the addon.
    * @example Addon_TypesEnum.PANEL
    */
-  type: Exclude<Addon_Types, Addon_TypesEnum.PREVIEW>;
+  type: Exclude<
+    Addon_Types,
+    | Addon_TypesEnum.PREVIEW
+    | Addon_TypesEnum.experimental_PAGE
+    | Addon_TypesEnum.experimental_SIDEBAR_BOTTOM
+    | Addon_TypesEnum.experimental_SIDEBAR_TOP
+  >;
   /**
    * The unique id of the addon.
    * @warn This will become non-optional in 8.0
@@ -460,17 +476,31 @@ export interface Addon_SidebarBottomType {
   render: FCWithoutChildren;
 }
 
+export interface Addon_SidebarTopType {
+  type: Addon_TypesEnum.experimental_SIDEBAR_TOP;
+  /**
+   * The unique id of the tool.
+   */
+  id: string;
+  /**
+   * A React.FunctionComponent.
+   */
+  render: FCWithoutChildren;
+}
+
 type Addon_TypeBaseNames = Exclude<
   Addon_TypesEnum,
   | Addon_TypesEnum.PREVIEW
   | Addon_TypesEnum.experimental_PAGE
   | Addon_TypesEnum.experimental_SIDEBAR_BOTTOM
+  | Addon_TypesEnum.experimental_SIDEBAR_TOP
 >;
 
 export interface Addon_TypesMapping extends Record<Addon_TypeBaseNames, Addon_BaseType> {
   [Addon_TypesEnum.PREVIEW]: Addon_WrapperType;
   [Addon_TypesEnum.experimental_PAGE]: Addon_PageType;
   [Addon_TypesEnum.experimental_SIDEBAR_BOTTOM]: Addon_SidebarBottomType;
+  [Addon_TypesEnum.experimental_SIDEBAR_TOP]: Addon_SidebarTopType;
 }
 
 export type Addon_Loader<API> = (api: API) => void;
@@ -529,6 +559,11 @@ export enum Addon_TypesEnum {
    * @unstable
    */
   experimental_SIDEBAR_BOTTOM = 'sidebar-bottom',
+  /**
+   * This adds items in the top of the sidebar.
+   * @unstable This will get replaced with a new API in 8.0, use at your own risk.
+   */
+  experimental_SIDEBAR_TOP = 'sidebar-top',
 
   /**
    * @deprecated This property does nothing, and will be removed in Storybook 8.0.

From ce7c1bf92ff17848c44979eba069e94012bb11e8 Mon Sep 17 00:00:00 2001
From: Norbert de Langen <ndelangen@me.com>
Date: Fri, 11 Aug 2023 17:30:32 +0200
Subject: [PATCH 06/48] inject the components into the sidebar top

---
 code/lib/manager-api/src/modules/addons.ts         | 8 +++++++-
 code/ui/manager/src/components/sidebar/Heading.tsx | 6 ++++++
 code/ui/manager/src/components/sidebar/Sidebar.tsx | 9 ++++++++-
 code/ui/manager/src/containers/sidebar.tsx         | 2 ++
 4 files changed, 23 insertions(+), 2 deletions(-)

diff --git a/code/lib/manager-api/src/modules/addons.ts b/code/lib/manager-api/src/modules/addons.ts
index 84fd51d7f206..0e1d69ca39e5 100644
--- a/code/lib/manager-api/src/modules/addons.ts
+++ b/code/lib/manager-api/src/modules/addons.ts
@@ -23,7 +23,13 @@ export interface SubAPI {
    * @param {Addon_Types | Addon_TypesEnum.experimental_PAGE} type - The type of the elements to retrieve.
    * @returns {API_Collection<T>} - A collection of elements of the specified type.
    */
-  getElements: <T extends Addon_Types | Addon_TypesEnum.experimental_PAGE = Addon_Types>(
+  getElements: <
+    T extends
+      | Addon_Types
+      | Addon_TypesEnum.experimental_PAGE
+      | Addon_TypesEnum.experimental_SIDEBAR_BOTTOM
+      | Addon_TypesEnum.experimental_SIDEBAR_TOP = Addon_Types
+  >(
     type: T
   ) => Addon_Collection<Addon_TypesMapping[T]>;
   /**
diff --git a/code/ui/manager/src/components/sidebar/Heading.tsx b/code/ui/manager/src/components/sidebar/Heading.tsx
index 8d11af4374f6..92ea6acebe89 100644
--- a/code/ui/manager/src/components/sidebar/Heading.tsx
+++ b/code/ui/manager/src/components/sidebar/Heading.tsx
@@ -3,6 +3,7 @@ import React from 'react';
 import { styled } from '@storybook/theming';
 import { Button } from '@storybook/components';
 
+import type { Addon_SidebarTopType } from '@storybook/types';
 import { Brand } from './Brand';
 import type { MenuList } from './Menu';
 import { SidebarMenu } from './Menu';
@@ -10,6 +11,7 @@ import { SidebarMenu } from './Menu';
 export interface HeadingProps {
   menuHighlighted?: boolean;
   menu: MenuList;
+  extra: Addon_SidebarTopType[];
   skipLinkHref?: string;
 }
 
@@ -73,6 +75,7 @@ export const Heading: FC<HeadingProps & ComponentProps<typeof HeadingWrapper>> =
   menuHighlighted = false,
   menu,
   skipLinkHref,
+  extra,
   ...props
 }) => {
   return (
@@ -87,6 +90,9 @@ export const Heading: FC<HeadingProps & ComponentProps<typeof HeadingWrapper>> =
         <Brand />
       </BrandArea>
 
+      {extra.map(({ id, render: Render }) => (
+        <Render key={id} />
+      ))}
       <SidebarMenu menu={menu} isHighlighted={menuHighlighted} />
     </HeadingWrapper>
   );
diff --git a/code/ui/manager/src/components/sidebar/Sidebar.tsx b/code/ui/manager/src/components/sidebar/Sidebar.tsx
index 7665fd41ae0a..9931b4d9260b 100644
--- a/code/ui/manager/src/components/sidebar/Sidebar.tsx
+++ b/code/ui/manager/src/components/sidebar/Sidebar.tsx
@@ -4,7 +4,11 @@ import { styled } from '@storybook/theming';
 import { ScrollArea, Spaced } from '@storybook/components';
 import type { State } from '@storybook/manager-api';
 
-import type { Addon_SidebarBottomType, API_LoadedRefData } from '@storybook/types';
+import type {
+  Addon_SidebarBottomType,
+  Addon_SidebarTopType,
+  API_LoadedRefData,
+} from '@storybook/types';
 import { Heading } from './Heading';
 
 // eslint-disable-next-line import/no-cycle
@@ -98,6 +102,7 @@ export interface SidebarProps extends API_LoadedRefData {
   refs: State['refs'];
   status: State['status'];
   menu: any[];
+  extra: Addon_SidebarTopType[];
   bottom?: Addon_SidebarBottomType[];
   storyId?: string;
   refId?: string;
@@ -113,6 +118,7 @@ export const Sidebar = React.memo(function Sidebar({
   status,
   previewInitialized,
   menu,
+  extra,
   bottom = [],
   menuHighlighted = false,
   enableShortcuts = true,
@@ -131,6 +137,7 @@ export const Sidebar = React.memo(function Sidebar({
             className="sidebar-header"
             menuHighlighted={menuHighlighted}
             menu={menu}
+            extra={extra}
             skipLinkHref="#storybook-preview-wrapper"
           />
 
diff --git a/code/ui/manager/src/containers/sidebar.tsx b/code/ui/manager/src/containers/sidebar.tsx
index 9098b3bc99ab..23453945c2af 100755
--- a/code/ui/manager/src/containers/sidebar.tsx
+++ b/code/ui/manager/src/containers/sidebar.tsx
@@ -68,6 +68,7 @@ const Sidebar = React.memo(function Sideber() {
 
     const items = api.getElements(types.experimental_SIDEBAR_BOTTOM);
     const bottom = useMemo(() => Object.values(items), [items]);
+    const top = useMemo(() => Object.values(api.getElements(types.experimental_SIDEBAR_TOP)), []);
 
     return {
       title: name,
@@ -84,6 +85,7 @@ const Sidebar = React.memo(function Sideber() {
       menuHighlighted: whatsNewNotificationsEnabled && api.isWhatsNewUnread(),
       enableShortcuts,
       bottom,
+      extra: top,
     };
   };
   return (

From 913f192455c890e55c4842b89b4b03c4ba8ce73d Mon Sep 17 00:00:00 2001
From: Norbert de Langen <ndelangen@me.com>
Date: Fri, 11 Aug 2023 17:45:37 +0200
Subject: [PATCH 07/48] improve types

---
 code/lib/manager-api/src/lib/addons.ts     |  9 ++++++---
 code/lib/manager-api/src/modules/addons.ts |  7 ++++++-
 code/lib/types/src/modules/addons.ts       | 19 +++++++++++++++----
 3 files changed, 27 insertions(+), 8 deletions(-)

diff --git a/code/lib/manager-api/src/lib/addons.ts b/code/lib/manager-api/src/lib/addons.ts
index a7358b873cfb..d18bd23f2bb5 100644
--- a/code/lib/manager-api/src/lib/addons.ts
+++ b/code/lib/manager-api/src/lib/addons.ts
@@ -98,9 +98,12 @@ export class AddonStore {
     this.serverChannel = channel;
   };
 
-  getElements<T extends Addon_Types | Addon_TypesEnum.experimental_PAGE>(
-    type: T
-  ): Addon_Collection<Addon_TypesMapping[T]> {
+  getElements<
+    T extends
+      | Addon_Types
+      | Addon_TypesEnum.experimental_PAGE
+      | Addon_TypesEnum.experimental_SIDEBAR_BOTTOM
+  >(type: T): Addon_Collection<Addon_TypesMapping[T]> {
     if (!this.elements[type]) {
       this.elements[type] = {};
     }
diff --git a/code/lib/manager-api/src/modules/addons.ts b/code/lib/manager-api/src/modules/addons.ts
index 84fd51d7f206..deddac6bc3f6 100644
--- a/code/lib/manager-api/src/modules/addons.ts
+++ b/code/lib/manager-api/src/modules/addons.ts
@@ -23,7 +23,12 @@ export interface SubAPI {
    * @param {Addon_Types | Addon_TypesEnum.experimental_PAGE} type - The type of the elements to retrieve.
    * @returns {API_Collection<T>} - A collection of elements of the specified type.
    */
-  getElements: <T extends Addon_Types | Addon_TypesEnum.experimental_PAGE = Addon_Types>(
+  getElements: <
+    T extends
+      | Addon_Types
+      | Addon_TypesEnum.experimental_PAGE
+      | Addon_TypesEnum.experimental_SIDEBAR_BOTTOM = Addon_Types
+  >(
     type: T
   ) => Addon_Collection<Addon_TypesMapping[T]>;
   /**
diff --git a/code/lib/types/src/modules/addons.ts b/code/lib/types/src/modules/addons.ts
index 96c16ada1e79..d10a852af3eb 100644
--- a/code/lib/types/src/modules/addons.ts
+++ b/code/lib/types/src/modules/addons.ts
@@ -29,8 +29,10 @@ import type {
 } from './csf';
 import type { IndexEntry } from './indexer';
 
-export type Addon_Types = Exclude<Addon_TypesEnum, Addon_TypesEnum.experimental_PAGE>;
-
+export type Addon_Types = Exclude<
+  Addon_TypesEnum,
+  Addon_TypesEnum.experimental_PAGE | Addon_TypesEnum.experimental_SIDEBAR_BOTTOM
+>;
 export interface Addon_ArgType<TArg = unknown> extends InputType {
   defaultValue?: TArg;
 }
@@ -324,7 +326,11 @@ export type ReactJSXElement = {
   key: any;
 };
 
-export type Addon_Type = Addon_BaseType | Addon_PageType | Addon_WrapperType;
+export type Addon_Type =
+  | Addon_BaseType
+  | Addon_PageType
+  | Addon_WrapperType
+  | Addon_SidebarBottomType;
 export interface Addon_BaseType {
   /**
    * The title of the addon.
@@ -335,7 +341,12 @@ export interface Addon_BaseType {
    * The type of the addon.
    * @example Addon_TypesEnum.PANEL
    */
-  type: Exclude<Addon_Types, Addon_TypesEnum.PREVIEW>;
+  type: Exclude<
+    Addon_Types,
+    | Addon_TypesEnum.PREVIEW
+    | Addon_TypesEnum.experimental_PAGE
+    | Addon_TypesEnum.experimental_SIDEBAR_BOTTOM
+  >;
   /**
    * The unique id of the addon.
    * @warn This will become non-optional in 8.0

From 73bac458c2ed12b8f053756a3f24db73e0e55421 Mon Sep 17 00:00:00 2001
From: jonniebigodes <joaocontadesenvolvimento@gmail.com>
Date: Mon, 14 Aug 2023 23:03:50 +0100
Subject: [PATCH 08/48] Links and snippets updates

---
 docs/addons/addons-api.md                     |  4 +-
 .../solid/button-story.with-hooks.js.mdx      |  2 +-
 .../solid/button-story.with-hooks.ts-4-9.mdx  | 39 +++++++++++++++++++
 .../solid/button-story.with-hooks.ts.mdx      | 39 +++++++++++++++++++
 docs/writing-stories/introduction.md          | 35 ++++++++++++++++-
 5 files changed, 115 insertions(+), 4 deletions(-)
 create mode 100644 docs/snippets/solid/button-story.with-hooks.ts-4-9.mdx
 create mode 100644 docs/snippets/solid/button-story.with-hooks.ts.mdx

diff --git a/docs/addons/addons-api.md b/docs/addons/addons-api.md
index 787bcbe4fdd8..17c05b0a50d5 100644
--- a/docs/addons/addons-api.md
+++ b/docs/addons/addons-api.md
@@ -277,7 +277,7 @@ To help streamline addon development and reduce boilerplate code, the API expose
 
 ### useStorybookState
 
-It allows access to Storybook's internal state. Similar to the [`useglobals`](#useglobals) hook, we recommend optimizing your addon to rely on [`React.memo`](https://reactjs.org/docs/react-api.html#reactmemo), or the following hooks; [`useMemo`](https://reactjs.org/docs/hooks-reference.html#usememo), [`useCallback`](https://reactjs.org/docs/hooks-reference.html#usecallback) to prevent a high volume of re-render cycles.
+It allows access to Storybook's internal state. Similar to the [`useglobals`](#useglobals) hook, we recommend optimizing your addon to rely on [`React.memo`](https://react.dev/reference/react/memo), or the following hooks; [`useMemo`](https://react.dev/reference/react/useMemo), [`useCallback`](https://react.dev/reference/react/useCallback) to prevent a high volume of re-render cycles.
 
 <!-- prettier-ignore-start -->
 
@@ -349,7 +349,7 @@ The `useParameter` retrieves the current story's parameters. If the parameter's
 
 ### useGlobals
 
-Extremely useful hook for addons that rely on Storybook [Globals](../essentials/toolbars-and-globals.md). It allows you to obtain and update `global` values. We also recommend optimizing your addon to rely on [`React.memo`](https://reactjs.org/docs/react-api.html#reactmemo), or the following hooks; [`useMemo`](https://reactjs.org/docs/hooks-reference.html#usememo), [`useCallback`](https://reactjs.org/docs/hooks-reference.html#usecallback) to prevent a high volume of re-render cycles.
+Extremely useful hook for addons that rely on Storybook [Globals](../essentials/toolbars-and-globals.md). It allows you to obtain and update `global` values. We also recommend optimizing your addon to rely on [`React.memo`](https://react.dev/reference/react/memo), or the following hooks; [`useMemo`](https://react.dev/reference/react/useMemo), [`useCallback`](https://react.dev/reference/react/useCallback) to prevent a high volume of re-render cycles.
 
 <!-- prettier-ignore-start -->
 
diff --git a/docs/snippets/solid/button-story.with-hooks.js.mdx b/docs/snippets/solid/button-story.with-hooks.js.mdx
index f9e278a50171..b41881651f14 100644
--- a/docs/snippets/solid/button-story.with-hooks.js.mdx
+++ b/docs/snippets/solid/button-story.with-hooks.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// Button.stories.js|ts|jsx|tsx
+// Button.stories.js|jsx
 
 import { createSignal } from 'solid-js';
 
diff --git a/docs/snippets/solid/button-story.with-hooks.ts-4-9.mdx b/docs/snippets/solid/button-story.with-hooks.ts-4-9.mdx
new file mode 100644
index 000000000000..60422480efc3
--- /dev/null
+++ b/docs/snippets/solid/button-story.with-hooks.ts-4-9.mdx
@@ -0,0 +1,39 @@
+```tsx
+// Button.stories.ts|tsx
+
+import type { Meta, StoryObj } from 'storybook-solidjs';
+
+import { createSignal } from 'solid-js';
+
+import { Button } from './Button';
+
+const meta = {
+  component: Button,
+} satisfies Meta<typeof Button>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/*
+ * Example Button story with Solid Hooks.
+ * See note below related to this example.
+ */
+const ButtonWithHooks = () => {
+  // Sets the hooks for both the label and primary props
+  const [value, setValue] = createSignal('Secondary');
+  const [isPrimary, setIsPrimary] = createSignal(false);
+
+  // Sets a click handler to change the label's value
+  const handleOnChange = () => {
+    if (!isPrimary()) {
+      setIsPrimary(true);
+      setValue('Primary');
+    }
+  };
+  return <Button primary={isPrimary()} onClick={handleOnChange} label={value()} />;
+};
+
+export const Primary = {
+  render: () => <ButtonWithHooks />,
+} satisfies Story;
+```
diff --git a/docs/snippets/solid/button-story.with-hooks.ts.mdx b/docs/snippets/solid/button-story.with-hooks.ts.mdx
new file mode 100644
index 000000000000..9716bb8f535e
--- /dev/null
+++ b/docs/snippets/solid/button-story.with-hooks.ts.mdx
@@ -0,0 +1,39 @@
+```tsx
+// Button.stories.ts|tsx
+
+import type { Meta, StoryObj } from 'storybook-solidjs';
+
+import { createSignal } from 'solid-js';
+
+import { Button } from './Button';
+
+const meta: Meta<typeof Button> = {
+  component: Button,
+};
+
+export default meta;
+type Story = StoryObj<typeof Button>;
+
+/*
+ * Example Button story with Solid Hooks.
+ * See note below related to this example.
+ */
+const ButtonWithHooks = () => {
+  // Sets the hooks for both the label and primary props
+  const [value, setValue] = createSignal('Secondary');
+  const [isPrimary, setIsPrimary] = createSignal(false);
+
+  // Sets a click handler to change the label's value
+  const handleOnChange = () => {
+    if (!isPrimary()) {
+      setIsPrimary(true);
+      setValue('Primary');
+    }
+  };
+  return <Button primary={isPrimary()} onClick={handleOnChange} label={value()} />;
+};
+
+export const Primary: Story = {
+  render: () => <ButtonWithHooks />,
+};
+```
diff --git a/docs/writing-stories/introduction.md b/docs/writing-stories/introduction.md
index 48117452703e..6659a899c778 100644
--- a/docs/writing-stories/introduction.md
+++ b/docs/writing-stories/introduction.md
@@ -80,9 +80,13 @@ Use the _named_ exports of a CSF file to define your component’s stories. We r
 
 <!-- prettier-ignore-end -->
 
+<IfRenderer renderer={['react', 'solid' ]}>
+
+<IfRenderer renderer={'react'}>
+
 #### Working with React Hooks
 
-[React Hooks](https://reactjs.org/docs/hooks-intro.html) are convenient helper methods to create components using a more streamlined approach. You can use them while creating your component's stories if you need them, although you should treat them as an advanced use case. We **recommend** [args](./args.md) as much as possible when writing your own stories. As an example, here’s a story that uses React Hooks to change the button's state :
+[React Hooks](https://react.dev/reference/react) are convenient helper methods to create components using a more streamlined approach. You can use them while creating your component's stories if you need them, although you should treat them as an advanced use case. We **recommend** [args](./args.md) as much as possible when writing your own stories. As an example, here’s a story that uses React Hooks to change the button's state :
 
 <!-- prettier-ignore-start -->
 
@@ -101,6 +105,35 @@ Use the _named_ exports of a CSF file to define your component’s stories. We r
 💡 The recommendation mentioned above also applies to other frameworks, not only React.
 </div>
 
+</IfRenderer>
+
+<IfRenderer renderer={'solid'}>
+
+#### Working with Solid Signals
+
+[Solid Signals](https://www.solidjs.com/docs/latest/api#basic-reactivity) are convenient helper methods to create components using a more streamlined approach. You can use them while creating your component's stories if you need them, although you should treat them as an advanced use case. We **recommend** [args](./args.md) as much as possible when writing your own stories. As an example, here’s a story that uses React Hooks to change the button's state :
+
+<!-- prettier-ignore-start -->
+
+<CodeSnippets
+  paths={[
+    'solid/button-story.with-hooks.js.mdx',
+    'solid/button-story.with-hooks.ts.mdx',
+  ]}
+  usesCsf3
+  csf2Path="writing-stories/introduction#snippet-button-story-with-hooks"
+/>
+
+<!-- prettier-ignore-end -->
+
+<div class="aside">
+💡 The recommendation mentioned above also applies to other frameworks, not only React.
+</div>
+
+</IfRenderer>
+
+</IfRenderer>
+
 ### Rename stories
 
 You can rename any particular story you need. For instance, to give it a more accurate name. Here's how you can change the name of the `Primary` story:

From 49f4707d3004fce1dc10c1b0d97b2b2dc31209c4 Mon Sep 17 00:00:00 2001
From: jonniebigodes <joaocontadesenvolvimento@gmail.com>
Date: Fri, 18 Aug 2023 21:07:47 +0100
Subject: [PATCH 09/48] Clean up docs and snippet files

---
 .../react/button-story.with-hooks.ts-4-9.mdx       |  3 ++-
 docs/snippets/react/button-story.with-hooks.ts.mdx |  5 +++--
 docs/writing-stories/introduction.md               | 14 +++++---------
 3 files changed, 10 insertions(+), 12 deletions(-)

diff --git a/docs/snippets/react/button-story.with-hooks.ts-4-9.mdx b/docs/snippets/react/button-story.with-hooks.ts-4-9.mdx
index e17ee32637c8..bbe75ff837b2 100644
--- a/docs/snippets/react/button-story.with-hooks.ts-4-9.mdx
+++ b/docs/snippets/react/button-story.with-hooks.ts-4-9.mdx
@@ -2,6 +2,7 @@
 // Button.stories.ts|tsx
 
 import React, { useState } from 'react';
+
 import { Meta, StoryObj } from '@storybook/react';
 
 import { Button } from './Button';
@@ -9,8 +10,8 @@ import { Button } from './Button';
 const meta = {
   component: Button,
 } satisfies Meta<typeof Button>;
-export default meta;
 
+export default meta;
 type Story = StoryObj<typeof meta>;
 
 /*
diff --git a/docs/snippets/react/button-story.with-hooks.ts.mdx b/docs/snippets/react/button-story.with-hooks.ts.mdx
index 9c9f93ca87c7..338480ef0749 100644
--- a/docs/snippets/react/button-story.with-hooks.ts.mdx
+++ b/docs/snippets/react/button-story.with-hooks.ts.mdx
@@ -1,7 +1,8 @@
-```js
+```tsx
 // Button.stories.ts|tsx
 
 import React, { useState } from 'react';
+
 import { Meta, StoryObj } from '@storybook/react';
 
 import { Button } from './Button';
@@ -9,8 +10,8 @@ import { Button } from './Button';
 const meta: Meta<typeof Button> = {
   component: Button,
 };
-export default meta;
 
+export default meta;
 type Story = StoryObj<typeof Button>;
 
 /*
diff --git a/docs/writing-stories/introduction.md b/docs/writing-stories/introduction.md
index 6659a899c778..82905a323984 100644
--- a/docs/writing-stories/introduction.md
+++ b/docs/writing-stories/introduction.md
@@ -80,13 +80,11 @@ Use the _named_ exports of a CSF file to define your component’s stories. We r
 
 <!-- prettier-ignore-end -->
 
-<IfRenderer renderer={['react', 'solid' ]}>
-
-<IfRenderer renderer={'react'}>
+<IfRenderer renderer='react'>
 
 #### Working with React Hooks
 
-[React Hooks](https://react.dev/reference/react) are convenient helper methods to create components using a more streamlined approach. You can use them while creating your component's stories if you need them, although you should treat them as an advanced use case. We **recommend** [args](./args.md) as much as possible when writing your own stories. As an example, here’s a story that uses React Hooks to change the button's state :
+[React Hooks](https://react.dev/reference/react) are convenient helper methods to create components using a more streamlined approach. You can use them while creating your component's stories if you need them, although you should treat them as an advanced use case. We **recommend** [args](./args.md) as much as possible when writing your own stories. As an example, here’s a story that uses React Hooks to change the button's state:
 
 <!-- prettier-ignore-start -->
 
@@ -107,11 +105,11 @@ Use the _named_ exports of a CSF file to define your component’s stories. We r
 
 </IfRenderer>
 
-<IfRenderer renderer={'solid'}>
+<IfRenderer renderer='solid'>
 
 #### Working with Solid Signals
 
-[Solid Signals](https://www.solidjs.com/docs/latest/api#basic-reactivity) are convenient helper methods to create components using a more streamlined approach. You can use them while creating your component's stories if you need them, although you should treat them as an advanced use case. We **recommend** [args](./args.md) as much as possible when writing your own stories. As an example, here’s a story that uses React Hooks to change the button's state :
+[Solid Signals](https://www.solidjs.com/docs/latest/api#basic-reactivity) are convenient helper methods to create components using a more streamlined approach. You can use them while creating your component's stories if you need them, although you should treat them as an advanced use case. We **recommend** [args](./args.md) as much as possible when writing your own stories. As an example, here’s a story that uses Solid Signals to change the button's state:
 
 <!-- prettier-ignore-start -->
 
@@ -127,13 +125,11 @@ Use the _named_ exports of a CSF file to define your component’s stories. We r
 <!-- prettier-ignore-end -->
 
 <div class="aside">
-💡 The recommendation mentioned above also applies to other frameworks, not only React.
+💡 The recommendation mentioned above also applies to other frameworks, not only Solid.
 </div>
 
 </IfRenderer>
 
-</IfRenderer>
-
 ### Rename stories
 
 You can rename any particular story you need. For instance, to give it a more accurate name. Here's how you can change the name of the `Primary` story:

From 7a995f24cb4e1dabf0af8e1ac73f8048a4e59c47 Mon Sep 17 00:00:00 2001
From: Yann Braga <yannbf@gmail.com>
Date: Thu, 17 Aug 2023 17:31:40 +0200
Subject: [PATCH 10/48] detect empty projects and provide an error message for
 users

Additionally, improve the base generator when it comes to detecting builders
---
 code/lib/cli/src/detect.ts                    | 28 ++++++----
 code/lib/cli/src/generators/EMBER/index.ts    | 25 ++++++---
 code/lib/cli/src/generators/NEXTJS/index.ts   |  3 +-
 .../cli/src/generators/REACT_SCRIPTS/index.ts | 55 +++++++++++--------
 code/lib/cli/src/generators/SERVER/index.ts   | 13 ++++-
 code/lib/cli/src/generators/SOLID/index.ts    | 10 +++-
 .../lib/cli/src/generators/SVELTEKIT/index.ts | 10 +++-
 code/lib/cli/src/generators/baseGenerator.ts  |  9 ++-
 code/lib/cli/src/generators/types.ts          |  1 +
 code/lib/cli/src/initiate.ts                  | 52 ++++++++++++++----
 code/lib/cli/src/project_types.ts             |  6 +-
 11 files changed, 151 insertions(+), 61 deletions(-)

diff --git a/code/lib/cli/src/detect.ts b/code/lib/cli/src/detect.ts
index c1b9317bc556..b62288bc82e5 100644
--- a/code/lib/cli/src/detect.ts
+++ b/code/lib/cli/src/detect.ts
@@ -15,6 +15,7 @@ import {
 } from './project_types';
 import { commandLog, isNxProject } from './helpers';
 import type { JsPackageManager, PackageJsonWithMaybeDeps } from './js-package-manager';
+import { HandledError } from './HandledError';
 
 const viteConfigFiles = ['vite.config.ts', 'vite.config.js', 'vite.config.mjs'];
 const webpackConfigFiles = ['webpack.config.js'];
@@ -135,16 +136,23 @@ export async function detectBuilder(packageManager: JsPackageManager, projectTyp
       return CoreBuilder.Webpack5;
     default:
       // eslint-disable-next-line no-case-declarations
-      const { builder } = await prompts({
-        type: 'select',
-        name: 'builder',
-        message:
-          'We were not able to detect the right builder for your project. Please select one:',
-        choices: [
-          { title: 'Vite', value: CoreBuilder.Vite },
-          { title: 'Webpack 5', value: CoreBuilder.Webpack5 },
-        ],
-      });
+      const { builder } = await prompts(
+        {
+          type: 'select',
+          name: 'builder',
+          message:
+            '\nWe were not able to detect the right builder for your project. Please select one:',
+          choices: [
+            { title: 'Vite', value: CoreBuilder.Vite },
+            { title: 'Webpack 5', value: CoreBuilder.Webpack5 },
+          ],
+        },
+        {
+          onCancel: () => {
+            throw new HandledError('Canceled by the user');
+          },
+        }
+      );
 
       return builder;
   }
diff --git a/code/lib/cli/src/generators/EMBER/index.ts b/code/lib/cli/src/generators/EMBER/index.ts
index 255409fd7c48..313dcf8691fd 100644
--- a/code/lib/cli/src/generators/EMBER/index.ts
+++ b/code/lib/cli/src/generators/EMBER/index.ts
@@ -1,16 +1,23 @@
+import { CoreBuilder } from '../../project_types';
 import { baseGenerator } from '../baseGenerator';
 import type { Generator } from '../types';
 
 const generator: Generator = async (packageManager, npmOptions, options) => {
-  await baseGenerator(packageManager, npmOptions, options, 'ember', {
-    extraPackages: [
-      // babel-plugin-ember-modules-api-polyfill is a peerDep of @storybook/ember
-      'babel-plugin-ember-modules-api-polyfill',
-      // babel-plugin-htmlbars-inline-precompile is a peerDep of @storybook/ember
-      'babel-plugin-htmlbars-inline-precompile',
-    ],
-    staticDir: 'dist',
-  });
+  await baseGenerator(
+    packageManager,
+    npmOptions,
+    { ...options, builder: CoreBuilder.Webpack5 },
+    'ember',
+    {
+      extraPackages: [
+        // babel-plugin-ember-modules-api-polyfill is a peerDep of @storybook/ember
+        'babel-plugin-ember-modules-api-polyfill',
+        // babel-plugin-htmlbars-inline-precompile is a peerDep of @storybook/ember
+        'babel-plugin-htmlbars-inline-precompile',
+      ],
+      staticDir: 'dist',
+    }
+  );
 };
 
 export default generator;
diff --git a/code/lib/cli/src/generators/NEXTJS/index.ts b/code/lib/cli/src/generators/NEXTJS/index.ts
index ef3afea02d60..2588b387312a 100644
--- a/code/lib/cli/src/generators/NEXTJS/index.ts
+++ b/code/lib/cli/src/generators/NEXTJS/index.ts
@@ -1,3 +1,4 @@
+import { CoreBuilder } from '../../project_types';
 import { baseGenerator } from '../baseGenerator';
 import type { Generator } from '../types';
 
@@ -5,7 +6,7 @@ const generator: Generator = async (packageManager, npmOptions, options) => {
   await baseGenerator(
     packageManager,
     npmOptions,
-    options,
+    { ...options, builder: CoreBuilder.Webpack5 },
     'react',
     {
       extraAddons: ['@storybook/addon-onboarding'],
diff --git a/code/lib/cli/src/generators/REACT_SCRIPTS/index.ts b/code/lib/cli/src/generators/REACT_SCRIPTS/index.ts
index 4059beedec0e..5a0300c25b5a 100644
--- a/code/lib/cli/src/generators/REACT_SCRIPTS/index.ts
+++ b/code/lib/cli/src/generators/REACT_SCRIPTS/index.ts
@@ -26,25 +26,15 @@ const generator: Generator = async (packageManager, npmOptions, options) => {
     : {};
 
   const craVersion = await packageManager.getPackageVersion('react-scripts');
-  const isCra5OrHigher = craVersion && semver.gte(craVersion, '5.0.0');
-  const updatedOptions = isCra5OrHigher ? { ...options, builder: CoreBuilder.Webpack5 } : options;
 
-  const extraPackages = [];
-  if (isCra5OrHigher) {
-    extraPackages.push('webpack');
-    // Miscellaneous dependency used in `babel-preset-react-app` but not listed as dep there
-    extraPackages.push('babel-plugin-named-exports-order');
-    // Miscellaneous dependency to add to be sure Storybook + CRA is working fine with Yarn PnP mode
-    extraPackages.push('prop-types');
+  if (craVersion === null) {
+    throw new Error(dedent`
+      It looks like you're trying to initialize Storybook in a CRA project that does not have react-scripts installed.
+      Please install it and make sure it's of version 5 or higher, which are the versions supported by Storybook 7.0+.
+    `);
   }
 
-  const version = versions['@storybook/preset-create-react-app'];
-  const extraAddons = [
-    `@storybook/preset-create-react-app@${version}`,
-    '@storybook/addon-onboarding',
-  ];
-
-  if (!isCra5OrHigher) {
+  if (!craVersion && semver.gte(craVersion, '5.0.0')) {
     throw new Error(dedent`
       Storybook 7.0+ doesn't support react-scripts@<5.0.0.
 
@@ -52,13 +42,32 @@ const generator: Generator = async (packageManager, npmOptions, options) => {
     `);
   }
 
-  await baseGenerator(packageManager, npmOptions, updatedOptions, 'react', {
-    extraAddons,
-    extraPackages,
-    staticDir: fs.existsSync(path.resolve('./public')) ? 'public' : undefined,
-    skipBabel: true,
-    extraMain,
-  });
+  const extraPackages = [];
+  extraPackages.push('webpack');
+  // Miscellaneous dependency used in `babel-preset-react-app` but not listed as dep there
+  extraPackages.push('babel-plugin-named-exports-order');
+  // Miscellaneous dependency to add to be sure Storybook + CRA is working fine with Yarn PnP mode
+  extraPackages.push('prop-types');
+
+  const version = versions['@storybook/preset-create-react-app'];
+  const extraAddons = [
+    `@storybook/preset-create-react-app@${version}`,
+    '@storybook/addon-onboarding',
+  ];
+
+  await baseGenerator(
+    packageManager,
+    npmOptions,
+    { ...options, builder: CoreBuilder.Webpack5 },
+    'react',
+    {
+      extraAddons,
+      extraPackages,
+      staticDir: fs.existsSync(path.resolve('./public')) ? 'public' : undefined,
+      skipBabel: true,
+      extraMain,
+    }
+  );
 };
 
 export default generator;
diff --git a/code/lib/cli/src/generators/SERVER/index.ts b/code/lib/cli/src/generators/SERVER/index.ts
index 96032e2c88e8..966efee90898 100755
--- a/code/lib/cli/src/generators/SERVER/index.ts
+++ b/code/lib/cli/src/generators/SERVER/index.ts
@@ -1,10 +1,17 @@
+import { CoreBuilder } from '../../project_types';
 import { baseGenerator } from '../baseGenerator';
 import type { Generator } from '../types';
 
 const generator: Generator = async (packageManager, npmOptions, options) => {
-  await baseGenerator(packageManager, npmOptions, options, 'server', {
-    extensions: ['json', 'yaml', 'yml'],
-  });
+  await baseGenerator(
+    packageManager,
+    npmOptions,
+    { ...options, builder: CoreBuilder.Vite },
+    'server',
+    {
+      extensions: ['json', 'yaml', 'yml'],
+    }
+  );
 };
 
 export default generator;
diff --git a/code/lib/cli/src/generators/SOLID/index.ts b/code/lib/cli/src/generators/SOLID/index.ts
index 7dc517f667bb..21347d057682 100644
--- a/code/lib/cli/src/generators/SOLID/index.ts
+++ b/code/lib/cli/src/generators/SOLID/index.ts
@@ -1,8 +1,16 @@
+import { CoreBuilder } from '../../project_types';
 import { baseGenerator } from '../baseGenerator';
 import type { Generator } from '../types';
 
 const generator: Generator = async (packageManager, npmOptions, options) => {
-  await baseGenerator(packageManager, npmOptions, options, 'solid', {}, 'solid');
+  await baseGenerator(
+    packageManager,
+    npmOptions,
+    { ...options, builder: CoreBuilder.Vite },
+    'solid',
+    {},
+    'solid'
+  );
 };
 
 export default generator;
diff --git a/code/lib/cli/src/generators/SVELTEKIT/index.ts b/code/lib/cli/src/generators/SVELTEKIT/index.ts
index 21565e6a45cc..856d1d04c76b 100644
--- a/code/lib/cli/src/generators/SVELTEKIT/index.ts
+++ b/code/lib/cli/src/generators/SVELTEKIT/index.ts
@@ -1,8 +1,16 @@
+import { CoreBuilder } from '../../project_types';
 import { baseGenerator } from '../baseGenerator';
 import type { Generator } from '../types';
 
 const generator: Generator = async (packageManager, npmOptions, options) => {
-  await baseGenerator(packageManager, npmOptions, options, 'svelte', undefined, 'sveltekit');
+  await baseGenerator(
+    packageManager,
+    npmOptions,
+    { ...options, builder: CoreBuilder.Vite },
+    'svelte',
+    undefined,
+    'sveltekit'
+  );
 };
 
 export default generator;
diff --git a/code/lib/cli/src/generators/baseGenerator.ts b/code/lib/cli/src/generators/baseGenerator.ts
index 4ac1cd2f8f6f..ed3988b7bc05 100644
--- a/code/lib/cli/src/generators/baseGenerator.ts
+++ b/code/lib/cli/src/generators/baseGenerator.ts
@@ -17,6 +17,7 @@ import {
   extractEslintInfo,
   suggestESLintPlugin,
 } from '../automigrate/helpers/eslintPlugin';
+import { detectBuilder } from '../detect';
 
 const logger = console;
 
@@ -175,10 +176,11 @@ export async function baseGenerator(
   npmOptions: NpmOptions,
   {
     language,
-    builder = CoreBuilder.Webpack5,
+    builder,
     pnp,
     frameworkPreviewParts,
     yes: skipPrompts,
+    projectType,
   }: GeneratorOptions,
   renderer: SupportedRenderers,
   options: FrameworkOptions = defaultOptions,
@@ -187,6 +189,11 @@ export async function baseGenerator(
   const isStorybookInMonorepository = packageManager.isStorybookInMonorepo();
   const shouldApplyRequireWrapperOnPackageNames = isStorybookInMonorepository || pnp;
 
+  if (!builder) {
+    // eslint-disable-next-line no-param-reassign
+    builder = await detectBuilder(packageManager, projectType);
+  }
+
   const {
     extraAddons: extraAddonPackages,
     extraPackages,
diff --git a/code/lib/cli/src/generators/types.ts b/code/lib/cli/src/generators/types.ts
index c4298cc85529..04d468bf3da1 100644
--- a/code/lib/cli/src/generators/types.ts
+++ b/code/lib/cli/src/generators/types.ts
@@ -8,6 +8,7 @@ export type GeneratorOptions = {
   builder: Builder;
   linkable: boolean;
   pnp: boolean;
+  projectType: ProjectType;
   frameworkPreviewParts?: FrameworkPreviewParts;
   // skip prompting the user
   yes: boolean;
diff --git a/code/lib/cli/src/initiate.ts b/code/lib/cli/src/initiate.ts
index 0b2a75a4a488..2e8d8bccc51f 100644
--- a/code/lib/cli/src/initiate.ts
+++ b/code/lib/cli/src/initiate.ts
@@ -1,3 +1,4 @@
+/* eslint-disable no-param-reassign */
 import type { PackageJson } from 'read-pkg-up';
 import chalk from 'chalk';
 import prompts from 'prompts';
@@ -6,14 +7,9 @@ import { withTelemetry } from '@storybook/core-server';
 
 import dedent from 'ts-dedent';
 import boxen from 'boxen';
+import { readdirSync } from 'fs-extra';
 import { installableProjectTypes, ProjectType } from './project_types';
-import {
-  detect,
-  isStorybookInstantiated,
-  detectLanguage,
-  detectBuilder,
-  detectPnp,
-} from './detect';
+import { detect, isStorybookInstantiated, detectLanguage, detectPnp } from './detect';
 import { commandLog, codeLog, paddedLog } from './helpers';
 import angularGenerator from './generators/ANGULAR';
 import emberGenerator from './generators/EMBER';
@@ -36,7 +32,7 @@ import serverGenerator from './generators/SERVER';
 import type { JsPackageManager } from './js-package-manager';
 import { JsPackageManagerFactory, useNpmWarning } from './js-package-manager';
 import type { NpmOptions } from './NpmOptions';
-import type { CommandOptions } from './generators/types';
+import type { CommandOptions, GeneratorOptions } from './generators/types';
 import { HandledError } from './HandledError';
 
 const logger = console;
@@ -54,12 +50,13 @@ const installStorybook = async <Project extends ProjectType>(
   const language = await detectLanguage(packageManager);
   const pnp = await detectPnp();
 
-  const generatorOptions = {
+  const generatorOptions: GeneratorOptions = {
     language,
-    builder: options.builder || (await detectBuilder(packageManager, projectType)),
+    builder: options.builder,
     linkable: !!options.linkable,
     pnp: pnp || options.usePnp,
     yes: options.yes,
+    projectType: options.type,
   };
 
   const runGenerator: () => Promise<any> = async () => {
@@ -257,6 +254,11 @@ async function doInitiate(
 
     pkgMgr = 'npm';
   }
+
+  const cwdFolderEntries = readdirSync(process.cwd());
+  const isEmptyDir =
+    cwdFolderEntries.length === 0 || cwdFolderEntries.every((entry) => entry.startsWith('.'));
+
   const packageManager = JsPackageManagerFactory.getPackageManager({ force: pkgMgr });
   const welcomeMessage = 'storybook init - the simplest way to add a Storybook to your project.';
   logger.log(chalk.inverse(`\n ${welcomeMessage} \n`));
@@ -268,6 +270,35 @@ async function doInitiate(
     updateCheckInterval: 1000 * 60 * 60, // every hour (we could increase this later on.)
   });
 
+  if (options.force !== true && isEmptyDir) {
+    const emptyDirMessage = dedent`
+      It looks like you're trying to start a new project with Storybook inside of an empty directory. Unfortunately, Storybook doesn't work on empty projects.
+      Storybook needs to be installed into a project that is already set up with a framework. There are many ways to bootstrap an app in a given framework, including:
+
+        📦 Vite CLI for dozens of options: ${chalk.yellowBright(
+          'https://vitejs.dev/guide/#scaffolding-your-first-vite-project'
+        )}
+        📦 Start an Angular Workspace: ${chalk.yellowBright('https://angular.io/cli/new')}
+        📦 Start a React App: ${chalk.yellowBright(
+          'https://react.dev/learn/start-a-new-react-project'
+        )}
+        📦 Start a Vue App: ${chalk.yellowBright('https://vuejs.org/guide/quick-start.html')}
+        📦 Or any other tooling available.
+
+      Once you have setup your new project, please rerun the init command again to successfully install Storybook on your project.
+      For more information about installing Storybook: ${chalk.yellowBright(
+        'https://storybook.js.org/docs'
+      )}
+      
+      Good luck! 🚀
+    `;
+
+    logger.log(
+      boxen(emptyDirMessage, { borderStyle: 'round', padding: 1, borderColor: '#F1618C' })
+    );
+    throw new HandledError('Project was initialized in an empty directory.');
+  }
+
   let projectType: ProjectType;
   const projectTypeProvided = options.type;
   const infoText = projectTypeProvided
@@ -310,7 +341,6 @@ async function doInitiate(
     logger.log();
 
     if (force) {
-      // eslint-disable-next-line no-param-reassign
       options.force = true;
     } else {
       process.exit(0);
diff --git a/code/lib/cli/src/project_types.ts b/code/lib/cli/src/project_types.ts
index 17bc9c27a25d..25c058dee818 100644
--- a/code/lib/cli/src/project_types.ts
+++ b/code/lib/cli/src/project_types.ts
@@ -275,7 +275,11 @@ export const unsupportedTemplate: TemplateConfiguration = {
   },
 };
 
-const notInstallableProjectTypes: ProjectType[] = [ProjectType.UNDETECTED, ProjectType.UNSUPPORTED];
+const notInstallableProjectTypes: ProjectType[] = [
+  ProjectType.UNDETECTED,
+  ProjectType.UNSUPPORTED,
+  ProjectType.NX,
+];
 
 export const installableProjectTypes = Object.values(ProjectType)
   .filter((type) => !notInstallableProjectTypes.includes(type))

From d2db9f201ec6826102281296e940affbe610647a Mon Sep 17 00:00:00 2001
From: Yann Braga <yannbf@gmail.com>
Date: Mon, 21 Aug 2023 08:25:39 +0200
Subject: [PATCH 11/48] update init on empty directory message

---
 code/lib/cli/src/initiate.ts | 69 +++++++++++++++++++++++-------------
 1 file changed, 45 insertions(+), 24 deletions(-)

diff --git a/code/lib/cli/src/initiate.ts b/code/lib/cli/src/initiate.ts
index 2e8d8bccc51f..39e71ef240f9 100644
--- a/code/lib/cli/src/initiate.ts
+++ b/code/lib/cli/src/initiate.ts
@@ -29,7 +29,7 @@ import qwikGenerator from './generators/QWIK';
 import svelteKitGenerator from './generators/SVELTEKIT';
 import solidGenerator from './generators/SOLID';
 import serverGenerator from './generators/SERVER';
-import type { JsPackageManager } from './js-package-manager';
+import type { JsPackageManager, PackageManagerName } from './js-package-manager';
 import { JsPackageManagerFactory, useNpmWarning } from './js-package-manager';
 import type { NpmOptions } from './NpmOptions';
 import type { CommandOptions, GeneratorOptions } from './generators/types';
@@ -236,6 +236,45 @@ const projectTypeInquirer = async (
   process.exit(0);
 };
 
+const getEmptyDirMessage = (packageManagerType: PackageManagerName) => {
+  const generatorCommandsMap = {
+    vite: {
+      npm: 'npm create vite@latest',
+      yarn1: 'yarn create vite',
+      yarn2: 'yarn create vite',
+      pnpm: 'pnpm create vite',
+    },
+    angular: {
+      npm: 'npx -p @angular/cli ng new my-project --package-manager=npm',
+      yarn1: 'npx -p @angular/cli ng new my-project --package-manager=yarn',
+      yarn2: 'npx -p @angular/cli ng new my-project --package-manager=yarn',
+      pnpm: 'npx -p @angular/cli ng new my-project --package-manager=pnpm',
+    },
+  };
+
+  return dedent`
+      Storybook cannot be installed into an empty project. We recommend creating a new project with the following:
+
+      📦 Vite CLI for React/Vue/Web Components => ${chalk.green(
+        generatorCommandsMap.vite[packageManagerType]
+      )}
+      See ${chalk.yellowBright('https://vitejs.dev/guide/#scaffolding-your-first-vite-project')}
+
+      📦 Angular CLI => ${chalk.green(generatorCommandsMap.angular[packageManagerType])}
+      See ${chalk.yellowBright('https://angular.io/cli/new')}
+
+      📦 Any other tooling of your choice
+
+      Once you've created a project, please re-run ${chalk.green(
+        'npx storybook@latest init'
+      )} inside the project root. For more information, see ${chalk.yellowBright(
+    'https://storybook.js.org/docs'
+  )}
+
+      Good luck! 🚀
+    `;
+};
+
 async function doInitiate(
   options: CommandOptions,
   pkg: PackageJson
@@ -271,30 +310,12 @@ async function doInitiate(
   });
 
   if (options.force !== true && isEmptyDir) {
-    const emptyDirMessage = dedent`
-      It looks like you're trying to start a new project with Storybook inside of an empty directory. Unfortunately, Storybook doesn't work on empty projects.
-      Storybook needs to be installed into a project that is already set up with a framework. There are many ways to bootstrap an app in a given framework, including:
-
-        📦 Vite CLI for dozens of options: ${chalk.yellowBright(
-          'https://vitejs.dev/guide/#scaffolding-your-first-vite-project'
-        )}
-        📦 Start an Angular Workspace: ${chalk.yellowBright('https://angular.io/cli/new')}
-        📦 Start a React App: ${chalk.yellowBright(
-          'https://react.dev/learn/start-a-new-react-project'
-        )}
-        📦 Start a Vue App: ${chalk.yellowBright('https://vuejs.org/guide/quick-start.html')}
-        📦 Or any other tooling available.
-
-      Once you have setup your new project, please rerun the init command again to successfully install Storybook on your project.
-      For more information about installing Storybook: ${chalk.yellowBright(
-        'https://storybook.js.org/docs'
-      )}
-      
-      Good luck! 🚀
-    `;
-
     logger.log(
-      boxen(emptyDirMessage, { borderStyle: 'round', padding: 1, borderColor: '#F1618C' })
+      boxen(getEmptyDirMessage(packageManager.type), {
+        borderStyle: 'round',
+        padding: 1,
+        borderColor: '#F1618C',
+      })
     );
     throw new HandledError('Project was initialized in an empty directory.');
   }

From ff7477e3fd735b8b5f8668b1a94ff1e346989141 Mon Sep 17 00:00:00 2001
From: Norbert de Langen <ndelangen@me.com>
Date: Mon, 21 Aug 2023 08:41:35 +0200
Subject: [PATCH 12/48] Revert "Maintenance: Revert "WebpackBuilder: Remove
 need for `react` as peerDependency""

---
 code/builders/builder-webpack5/package.json   | 14 +---------
 .../src/preview/iframe-webpack.config.ts      | 26 +++++++++++++------
 code/yarn.lock                                | 15 ++---------
 3 files changed, 21 insertions(+), 34 deletions(-)

diff --git a/code/builders/builder-webpack5/package.json b/code/builders/builder-webpack5/package.json
index 9d31c809a045..be1dedb5a660 100644
--- a/code/builders/builder-webpack5/package.json
+++ b/code/builders/builder-webpack5/package.json
@@ -56,23 +56,15 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@babel/core": "^7.22.9",
-    "@storybook/addons": "workspace:*",
+    "@babel/core": "^7.22.0",
     "@storybook/channels": "workspace:*",
-    "@storybook/client-api": "workspace:*",
     "@storybook/client-logger": "workspace:*",
-    "@storybook/components": "workspace:*",
     "@storybook/core-common": "workspace:*",
     "@storybook/core-events": "workspace:*",
     "@storybook/core-webpack": "workspace:*",
-    "@storybook/global": "^5.0.0",
-    "@storybook/manager-api": "workspace:*",
     "@storybook/node-logger": "workspace:*",
     "@storybook/preview": "workspace:*",
     "@storybook/preview-api": "workspace:*",
-    "@storybook/router": "workspace:*",
-    "@storybook/store": "workspace:*",
-    "@storybook/theming": "workspace:*",
     "@swc/core": "^1.3.49",
     "@types/node": "^16.0.0",
     "@types/semver": "^7.3.4",
@@ -110,10 +102,6 @@
     "slash": "^5.0.0",
     "typescript": "~4.9.3"
   },
-  "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
-    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
-  },
   "peerDependenciesMeta": {
     "typescript": {
       "optional": true
diff --git a/code/builders/builder-webpack5/src/preview/iframe-webpack.config.ts b/code/builders/builder-webpack5/src/preview/iframe-webpack.config.ts
index c99a1df1da81..704d8fe2b98b 100644
--- a/code/builders/builder-webpack5/src/preview/iframe-webpack.config.ts
+++ b/code/builders/builder-webpack5/src/preview/iframe-webpack.config.ts
@@ -36,19 +36,29 @@ const storybookPaths: Record<string, string> = {
     `@storybook/components`
   )}/dist/experimental`,
   ...[
-    // these packages are not pre-bundled because of react dependencies
+    // these packages are not pre-bundled because of react dependencies.
+    // these are not dependencies of the builder anymore, thus resolving them can fail.
+    // we should remove the aliases in 8.0, I'm not sure why they are here in the first place.
     'components',
     'global',
     'manager-api',
     'router',
     'theming',
-  ].reduce(
-    (acc, sbPackage) => ({
-      ...acc,
-      [`@storybook/${sbPackage}`]: getAbsolutePath(`@storybook/${sbPackage}`),
-    }),
-    {}
-  ),
+  ].reduce((acc, sbPackage) => {
+    let packagePath;
+    try {
+      packagePath = getAbsolutePath(`@storybook/${sbPackage}`);
+    } catch (e) {
+      // ignore
+    }
+    if (packagePath) {
+      return {
+        ...acc,
+        [`@storybook/${sbPackage}`]: getAbsolutePath(`@storybook/${sbPackage}`),
+      };
+    }
+    return acc;
+  }, {}),
   // deprecated, remove in 8.0
   [`@storybook/api`]: getAbsolutePath(`@storybook/manager-api`),
 };
diff --git a/code/yarn.lock b/code/yarn.lock
index a576cddaf7a5..88afaae488c0 100644
--- a/code/yarn.lock
+++ b/code/yarn.lock
@@ -453,7 +453,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/core@npm:^7.11.6, @babel/core@npm:^7.12.0, @babel/core@npm:^7.12.3, @babel/core@npm:^7.13.16, @babel/core@npm:^7.19.6, @babel/core@npm:^7.20.12, @babel/core@npm:^7.22.1, @babel/core@npm:^7.22.9, @babel/core@npm:^7.3.4, @babel/core@npm:^7.7.5":
+"@babel/core@npm:^7.11.6, @babel/core@npm:^7.12.0, @babel/core@npm:^7.12.3, @babel/core@npm:^7.13.16, @babel/core@npm:^7.19.6, @babel/core@npm:^7.20.12, @babel/core@npm:^7.22.0, @babel/core@npm:^7.22.1, @babel/core@npm:^7.22.9, @babel/core@npm:^7.3.4, @babel/core@npm:^7.7.5":
   version: 7.22.9
   resolution: "@babel/core@npm:7.22.9"
   dependencies:
@@ -6466,23 +6466,15 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@storybook/builder-webpack5@workspace:builders/builder-webpack5"
   dependencies:
-    "@babel/core": ^7.22.9
-    "@storybook/addons": "workspace:*"
+    "@babel/core": ^7.22.0
     "@storybook/channels": "workspace:*"
-    "@storybook/client-api": "workspace:*"
     "@storybook/client-logger": "workspace:*"
-    "@storybook/components": "workspace:*"
     "@storybook/core-common": "workspace:*"
     "@storybook/core-events": "workspace:*"
     "@storybook/core-webpack": "workspace:*"
-    "@storybook/global": ^5.0.0
-    "@storybook/manager-api": "workspace:*"
     "@storybook/node-logger": "workspace:*"
     "@storybook/preview": "workspace:*"
     "@storybook/preview-api": "workspace:*"
-    "@storybook/router": "workspace:*"
-    "@storybook/store": "workspace:*"
-    "@storybook/theming": "workspace:*"
     "@swc/core": ^1.3.49
     "@types/node": ^16.0.0
     "@types/pretty-hrtime": ^1.0.0
@@ -6517,9 +6509,6 @@ __metadata:
     webpack-dev-middleware: ^6.1.1
     webpack-hot-middleware: ^2.25.1
     webpack-virtual-modules: ^0.5.0
-  peerDependencies:
-    react: ^16.8.0 || ^17.0.0 || ^18.0.0
-    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
   peerDependenciesMeta:
     typescript:
       optional: true

From 78c2d88695e7fd1b4cc91b7c7c3136e0da2a506f Mon Sep 17 00:00:00 2001
From: Norbert de Langen <ndelangen@me.com>
Date: Mon, 21 Aug 2023 09:22:31 +0200
Subject: [PATCH 13/48] refactor

---
 .../src/preview/iframe-webpack.config.ts      | 64 ++++++++++---------
 1 file changed, 34 insertions(+), 30 deletions(-)

diff --git a/code/builders/builder-webpack5/src/preview/iframe-webpack.config.ts b/code/builders/builder-webpack5/src/preview/iframe-webpack.config.ts
index 704d8fe2b98b..513b3c36849d 100644
--- a/code/builders/builder-webpack5/src/preview/iframe-webpack.config.ts
+++ b/code/builders/builder-webpack5/src/preview/iframe-webpack.config.ts
@@ -29,38 +29,42 @@ import { createBabelLoader, createSWCLoader } from './loaders';
 
 const getAbsolutePath = <I extends string>(input: I): I =>
   dirname(require.resolve(join(input, 'package.json'))) as any;
+const maybeGetAbsolutePath = <I extends string>(input: I): I | false => {
+  try {
+    return getAbsolutePath(input);
+  } catch (e) {
+    return false;
+  }
+};
 
+const managerAPIPath = maybeGetAbsolutePath(`@storybook/manager-api`);
+const componentsPath = maybeGetAbsolutePath(`@storybook/components`);
+const componentsExperimentalPath = componentsPath ? `${componentsPath}/dist/experimental` : false;
+const globalPath = maybeGetAbsolutePath(`@storybook/global`);
+const routerPath = maybeGetAbsolutePath(`@storybook/router`);
+const themingPath = maybeGetAbsolutePath(`@storybook/theming`);
+
+// these packages are not pre-bundled because of react dependencies.
+// these are not dependencies of the builder anymore, thus resolving them can fail.
+// we should remove the aliases in 8.0, I'm not sure why they are here in the first place.
 const storybookPaths: Record<string, string> = {
-  // this is a temporary hack to get webpack to alias this correctly
-  [`@storybook/components/experimental`]: `${getAbsolutePath(
-    `@storybook/components`
-  )}/dist/experimental`,
-  ...[
-    // these packages are not pre-bundled because of react dependencies.
-    // these are not dependencies of the builder anymore, thus resolving them can fail.
-    // we should remove the aliases in 8.0, I'm not sure why they are here in the first place.
-    'components',
-    'global',
-    'manager-api',
-    'router',
-    'theming',
-  ].reduce((acc, sbPackage) => {
-    let packagePath;
-    try {
-      packagePath = getAbsolutePath(`@storybook/${sbPackage}`);
-    } catch (e) {
-      // ignore
-    }
-    if (packagePath) {
-      return {
-        ...acc,
-        [`@storybook/${sbPackage}`]: getAbsolutePath(`@storybook/${sbPackage}`),
-      };
-    }
-    return acc;
-  }, {}),
-  // deprecated, remove in 8.0
-  [`@storybook/api`]: getAbsolutePath(`@storybook/manager-api`),
+  ...(managerAPIPath
+    ? {
+        // deprecated, remove in 8.0
+        [`@storybook/api`]: managerAPIPath,
+        [`@storybook/manager-api`]: managerAPIPath,
+      }
+    : {}),
+  ...(componentsPath
+    ? {
+        // this is a temporary hack to get webpack to alias this correctly
+        [`@storybook/components/experimental`]: componentsExperimentalPath as any,
+        [`@storybook/components`]: componentsPath,
+      }
+    : {}),
+  ...(globalPath ? { [`@storybook/global`]: globalPath } : {}),
+  ...(routerPath ? { [`@storybook/router`]: routerPath } : {}),
+  ...(themingPath ? { [`@storybook/theming`]: themingPath } : {}),
 };
 
 export default async (

From 8ec270848da81ee077d6dab687361b1406c81be5 Mon Sep 17 00:00:00 2001
From: Norbert de Langen <ndelangen@me.com>
Date: Mon, 21 Aug 2023 10:01:35 +0200
Subject: [PATCH 14/48] Update code/ui/.storybook/manager.tsx

Co-authored-by: Yann Braga <yannbf@gmail.com>
---
 code/ui/.storybook/manager.tsx | 8 --------
 1 file changed, 8 deletions(-)

diff --git a/code/ui/.storybook/manager.tsx b/code/ui/.storybook/manager.tsx
index 7e2a0dfd4da4..b3c2e885f331 100644
--- a/code/ui/.storybook/manager.tsx
+++ b/code/ui/.storybook/manager.tsx
@@ -10,11 +10,3 @@ addons.setConfig({
     // },
   },
 });
-
-// addons.register('my/design-addon', () => {
-//   addons.add('my/design-addon', {
-//     type: types.experimental_SIDEBAR_BOTTOM,
-//     id: 'my/design-addon/panel',
-//     render: () => <div>HI</div>,
-//   });
-// });

From 3b11a34a9ec743357850fa2d5664105b6c9b24fe Mon Sep 17 00:00:00 2001
From: Norbert de Langen <ndelangen@me.com>
Date: Mon, 21 Aug 2023 10:39:46 +0200
Subject: [PATCH 15/48] add loading state

---
 code/ui/manager/src/components/sidebar/Sidebar.tsx | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/code/ui/manager/src/components/sidebar/Sidebar.tsx b/code/ui/manager/src/components/sidebar/Sidebar.tsx
index 7665fd41ae0a..54475a1ce108 100644
--- a/code/ui/manager/src/components/sidebar/Sidebar.tsx
+++ b/code/ui/manager/src/components/sidebar/Sidebar.tsx
@@ -170,11 +170,13 @@ export const Sidebar = React.memo(function Sidebar({
             )}
           </Search>
         </Top>
-        <Bottom>
-          {bottom.map(({ id, render: Render }) => (
-            <Render key={id} />
-          ))}
-        </Bottom>
+        {isLoading ? null : (
+          <Bottom>
+            {bottom.map(({ id, render: Render }) => (
+              <Render key={id} />
+            ))}
+          </Bottom>
+        )}
       </CustomScrollArea>
     </Container>
   );

From f866f78678960214624db27ff6bde4f70f3f41b8 Mon Sep 17 00:00:00 2001
From: Norbert de Langen <ndelangen@me.com>
Date: Mon, 21 Aug 2023 14:02:18 +0200
Subject: [PATCH 16/48] force the brand area to not overflow the header

---
 code/ui/manager/src/components/sidebar/Heading.tsx | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/code/ui/manager/src/components/sidebar/Heading.tsx b/code/ui/manager/src/components/sidebar/Heading.tsx
index 92ea6acebe89..c9dd7862a572 100644
--- a/code/ui/manager/src/components/sidebar/Heading.tsx
+++ b/code/ui/manager/src/components/sidebar/Heading.tsx
@@ -25,6 +25,9 @@ const BrandArea = styled.div(({ theme }) => ({
   alignItems: 'center',
   minHeight: 22,
 
+  '& > * > *': {
+    maxWidth: '100%',
+  },
   '& > *': {
     maxWidth: '100%',
     height: 'auto',

From 809114e141070fa945a764372e60d540dc97e4e5 Mon Sep 17 00:00:00 2001
From: Norbert de Langen <ndelangen@me.com>
Date: Mon, 21 Aug 2023 14:09:24 +0200
Subject: [PATCH 17/48] fix stories

---
 .../components/sidebar/Heading.stories.tsx    | 24 ++++++++++---------
 .../src/components/sidebar/Heading.tsx        |  6 ++---
 .../components/sidebar/Sidebar.stories.tsx    | 18 +++++++++++++-
 .../src/components/sidebar/Sidebar.tsx        |  1 +
 4 files changed, 34 insertions(+), 15 deletions(-)

diff --git a/code/ui/manager/src/components/sidebar/Heading.stories.tsx b/code/ui/manager/src/components/sidebar/Heading.stories.tsx
index d86cd02f9825..a79bb82d1e82 100644
--- a/code/ui/manager/src/components/sidebar/Heading.stories.tsx
+++ b/code/ui/manager/src/components/sidebar/Heading.stories.tsx
@@ -27,7 +27,9 @@ const menuItems = [
   { title: 'Menu Item 3', onClick: action('onActivateMenuItem'), id: '3' },
 ];
 
-export const MenuHighlighted: Story = () => <Heading menuHighlighted menu={menuItems} />;
+export const MenuHighlighted: Story = () => (
+  <Heading menuHighlighted menu={menuItems} isLoading={false} extra={[]} />
+);
 
 export const standardData = { menu: menuItems };
 
@@ -45,7 +47,7 @@ export const Standard: Story = () => {
         },
       }}
     >
-      <Heading menu={menuItems} />
+      <Heading menu={menuItems} isLoading={false} extra={[]} />
     </ThemeProvider>
   );
 };
@@ -64,7 +66,7 @@ export const StandardNoLink: Story = () => {
         },
       }}
     >
-      <Heading menu={menuItems} />
+      <Heading menu={menuItems} isLoading={false} extra={[]} />
     </ThemeProvider>
   );
 };
@@ -83,7 +85,7 @@ export const LinkAndText: Story = () => {
         },
       }}
     >
-      <Heading menu={menuItems} />
+      <Heading menu={menuItems} isLoading={false} extra={[]} />
     </ThemeProvider>
   );
 };
@@ -102,7 +104,7 @@ export const OnlyText: Story = () => {
         },
       }}
     >
-      <Heading menu={menuItems} />
+      <Heading menu={menuItems} isLoading={false} extra={[]} />
     </ThemeProvider>
   );
 };
@@ -121,7 +123,7 @@ export const LongText: Story = () => {
         },
       }}
     >
-      <Heading menu={menuItems} />
+      <Heading menu={menuItems} isLoading={false} extra={[]} />
     </ThemeProvider>
   );
 };
@@ -140,7 +142,7 @@ export const CustomTitle: Story = () => {
         },
       }}
     >
-      <Heading menu={menuItems} />
+      <Heading menu={menuItems} isLoading={false} extra={[]} />
     </ThemeProvider>
   );
 };
@@ -159,7 +161,7 @@ export const CustomBrandImage: Story = () => {
         },
       }}
     >
-      <Heading menu={menuItems} />
+      <Heading menu={menuItems} isLoading={false} extra={[]} />
     </ThemeProvider>
   );
 };
@@ -178,7 +180,7 @@ export const CustomBrandImageTall: Story = () => {
         },
       }}
     >
-      <Heading menu={menuItems} />
+      <Heading menu={menuItems} isLoading={false} extra={[]} />
     </ThemeProvider>
   );
 };
@@ -197,7 +199,7 @@ export const CustomBrandImageUnsizedSVG: Story = () => {
         },
       }}
     >
-      <Heading menu={menuItems} />
+      <Heading menu={menuItems} isLoading={false} extra={[]} />
     </ThemeProvider>
   );
 };
@@ -216,7 +218,7 @@ export const NoBrand: Story = () => {
         },
       }}
     >
-      <Heading menu={menuItems} />
+      <Heading menu={menuItems} isLoading={false} extra={[]} />
     </ThemeProvider>
   );
 };
diff --git a/code/ui/manager/src/components/sidebar/Heading.tsx b/code/ui/manager/src/components/sidebar/Heading.tsx
index c9dd7862a572..552e1859af69 100644
--- a/code/ui/manager/src/components/sidebar/Heading.tsx
+++ b/code/ui/manager/src/components/sidebar/Heading.tsx
@@ -13,6 +13,7 @@ export interface HeadingProps {
   menu: MenuList;
   extra: Addon_SidebarTopType[];
   skipLinkHref?: string;
+  isLoading: boolean;
 }
 
 const BrandArea = styled.div(({ theme }) => ({
@@ -79,6 +80,7 @@ export const Heading: FC<HeadingProps & ComponentProps<typeof HeadingWrapper>> =
   menu,
   skipLinkHref,
   extra,
+  isLoading,
   ...props
 }) => {
   return (
@@ -93,9 +95,7 @@ export const Heading: FC<HeadingProps & ComponentProps<typeof HeadingWrapper>> =
         <Brand />
       </BrandArea>
 
-      {extra.map(({ id, render: Render }) => (
-        <Render key={id} />
-      ))}
+      {isLoading ? null : extra.map(({ id, render: Render }) => <Render key={id} />)}
       <SidebarMenu menu={menu} isHighlighted={menuHighlighted} />
     </HeadingWrapper>
   );
diff --git a/code/ui/manager/src/components/sidebar/Sidebar.stories.tsx b/code/ui/manager/src/components/sidebar/Sidebar.stories.tsx
index 09dda0f61ec3..a1a266b55f34 100644
--- a/code/ui/manager/src/components/sidebar/Sidebar.stories.tsx
+++ b/code/ui/manager/src/components/sidebar/Sidebar.stories.tsx
@@ -62,6 +62,7 @@ export const Simple: Story = {
     <Sidebar
       {...args}
       menu={menu}
+      extra={[]}
       index={index as any}
       storyId={storyId}
       refId={DEFAULT_REF_ID}
@@ -74,7 +75,15 @@ export const Simple: Story = {
 export const Loading: Story = {
   args: { previewInitialized: false },
   render: (args) => (
-    <Sidebar {...args} menu={menu} storyId={storyId} refId={DEFAULT_REF_ID} refs={{}} status={{}} />
+    <Sidebar
+      {...args}
+      menu={menu}
+      extra={[]}
+      storyId={storyId}
+      refId={DEFAULT_REF_ID}
+      refs={{}}
+      status={{}}
+    />
   ),
 };
 
@@ -86,6 +95,7 @@ export const Empty: Story = {
     <Sidebar
       {...args}
       menu={menu}
+      extra={[]}
       index={{}}
       storyId={storyId}
       refId={DEFAULT_REF_ID}
@@ -103,6 +113,7 @@ export const IndexError: Story = {
     <Sidebar
       {...args}
       indexError={indexError}
+      extra={[]}
       menu={menu}
       storyId={storyId}
       refId={DEFAULT_REF_ID}
@@ -120,6 +131,7 @@ export const WithRefs: Story = {
     <Sidebar
       {...args}
       menu={menu}
+      extra={[]}
       index={index as any}
       storyId={storyId}
       refId={DEFAULT_REF_ID}
@@ -137,6 +149,7 @@ export const LoadingWithRefs: Story = {
     <Sidebar
       {...args}
       menu={menu}
+      extra={[]}
       storyId={storyId}
       refId={DEFAULT_REF_ID}
       refs={refs}
@@ -153,6 +166,7 @@ export const LoadingWithRefError: Story = {
     <Sidebar
       {...args}
       menu={menu}
+      extra={[]}
       storyId={storyId}
       refId={DEFAULT_REF_ID}
       refs={refsError}
@@ -185,6 +199,7 @@ export const StatusesCollapsed: Story = {
     <Sidebar
       {...args}
       menu={menu}
+      extra={[]}
       index={index as any}
       storyId={storyId}
       refId={DEFAULT_REF_ID}
@@ -233,6 +248,7 @@ export const Bottom: Story = {
     <Sidebar
       {...args}
       menu={menu}
+      extra={[]}
       index={index as any}
       storyId={storyId}
       refId={DEFAULT_REF_ID}
diff --git a/code/ui/manager/src/components/sidebar/Sidebar.tsx b/code/ui/manager/src/components/sidebar/Sidebar.tsx
index 9931b4d9260b..9cc6a978bc9b 100644
--- a/code/ui/manager/src/components/sidebar/Sidebar.tsx
+++ b/code/ui/manager/src/components/sidebar/Sidebar.tsx
@@ -139,6 +139,7 @@ export const Sidebar = React.memo(function Sidebar({
             menu={menu}
             extra={extra}
             skipLinkHref="#storybook-preview-wrapper"
+            isLoading={isLoading}
           />
 
           <Search

From a111e7a4b30600f1638a5a018fda61fa6c7d723a Mon Sep 17 00:00:00 2001
From: Norbert de Langen <ndelangen@me.com>
Date: Mon, 21 Aug 2023 19:42:01 +0200
Subject: [PATCH 18/48] fixes

---
 code/ui/manager/src/components/layout/app.mockdata.tsx |  1 +
 .../manager/src/components/sidebar/Heading.stories.tsx |  7 ++++++-
 .../src/components/sidebar/__tests__/Sidebar.test.tsx  | 10 +++++++++-
 3 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/code/ui/manager/src/components/layout/app.mockdata.tsx b/code/ui/manager/src/components/layout/app.mockdata.tsx
index 1cb665508b7b..f41596303ed7 100644
--- a/code/ui/manager/src/components/layout/app.mockdata.tsx
+++ b/code/ui/manager/src/components/layout/app.mockdata.tsx
@@ -57,6 +57,7 @@ const realSidebarProps: SidebarProps = {
   refs: {},
   status: {},
   previewInitialized: true,
+  extra: [],
 };
 
 const PlaceholderBlock = styled.div(({ color }) => ({
diff --git a/code/ui/manager/src/components/sidebar/Heading.stories.tsx b/code/ui/manager/src/components/sidebar/Heading.stories.tsx
index a79bb82d1e82..b958ebe2e1b1 100644
--- a/code/ui/manager/src/components/sidebar/Heading.stories.tsx
+++ b/code/ui/manager/src/components/sidebar/Heading.stories.tsx
@@ -224,7 +224,12 @@ export const NoBrand: Story = () => {
 };
 
 export const SkipToCanvasLinkFocused: ComponentStoryObj<typeof Heading> = {
-  args: { menu: menuItems, skipLinkHref: '#storybook-preview-wrapper' },
+  args: {
+    menu: menuItems,
+    skipLinkHref: '#storybook-preview-wrapper',
+    extra: [],
+    isLoading: false,
+  },
   parameters: { layout: 'padded', chromatic: { delay: 300 } },
   play: () => {
     // focus each instance for chromatic/storybook's stacked theme
diff --git a/code/ui/manager/src/components/sidebar/__tests__/Sidebar.test.tsx b/code/ui/manager/src/components/sidebar/__tests__/Sidebar.test.tsx
index 26fd8750f301..78ebfb697ac7 100644
--- a/code/ui/manager/src/components/sidebar/__tests__/Sidebar.test.tsx
+++ b/code/ui/manager/src/components/sidebar/__tests__/Sidebar.test.tsx
@@ -16,7 +16,15 @@ const factory = (props: Partial<SidebarProps>): RenderResult => {
 
   return render(
     <ThemeProvider theme={theme}>
-      <Sidebar menu={[]} index={{}} previewInitialized refs={{}} status={{}} {...props} />
+      <Sidebar
+        menu={[]}
+        index={{}}
+        previewInitialized
+        refs={{}}
+        status={{}}
+        extra={[]}
+        {...props}
+      />
     </ThemeProvider>
   );
 };

From cdaae1d467a730a6cc57b61eb0034df98b41160c Mon Sep 17 00:00:00 2001
From: Shaun Lloyd <shaun@chromatic.com>
Date: Mon, 21 Aug 2023 14:56:53 -0400
Subject: [PATCH 19/48] Pass options to postinstall script

---
 code/lib/cli/src/add.ts | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/code/lib/cli/src/add.ts b/code/lib/cli/src/add.ts
index 2b8565085dab..ea9fb458a64a 100644
--- a/code/lib/cli/src/add.ts
+++ b/code/lib/cli/src/add.ts
@@ -10,7 +10,11 @@ import { getStorybookVersion } from './utils';
 
 const logger = console;
 
-const postinstallAddon = async (addonName: string) => {
+interface PostinstallOptions {
+  packageManager: PackageManagerName;
+}
+
+const postinstallAddon = async (addonName: string, options: PostinstallOptions) => {
   try {
     const modulePath = require.resolve(`${addonName}/postinstall`, { paths: [process.cwd()] });
     // eslint-disable-next-line import/no-dynamic-require, global-require
@@ -18,7 +22,7 @@ const postinstallAddon = async (addonName: string) => {
 
     try {
       logger.log(`Running postinstall script for ${addonName}`);
-      await postinstall();
+      await postinstall(options);
     } catch (e) {
       logger.error(`Error running postinstall script for ${addonName}`);
       logger.error(e);
@@ -83,6 +87,6 @@ export async function add(
   await writeConfig(main);
 
   if (!options.skipPostinstall && isStorybookAddon) {
-    await postinstallAddon(addonName);
+    await postinstallAddon(addonName, { packageManager: pkgMgr });
   }
 }

From efd4ed0915f2f180d1908f6f877de6f0b7f0768b Mon Sep 17 00:00:00 2001
From: Shaun Lloyd <shaun@chromatic.com>
Date: Mon, 21 Aug 2023 15:05:51 -0400
Subject: [PATCH 20/48] Add postinstall script for addon-themes

---
 code/addons/themes/postinstall.js | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)
 create mode 100644 code/addons/themes/postinstall.js

diff --git a/code/addons/themes/postinstall.js b/code/addons/themes/postinstall.js
new file mode 100644
index 000000000000..153934afaa71
--- /dev/null
+++ b/code/addons/themes/postinstall.js
@@ -0,0 +1,18 @@
+const { spawn } = require('child_process');
+
+const PACKAGE_MANAGER_TO_COMMAND = {
+    npm: 'npx',
+    yarn1: 'yarn dlx',
+    yarn2: 'yarn dlx',
+    pnpm: 'pnpm dlx',
+}
+
+module.exports = function (options) {
+  const command = PACKAGE_MANAGER_TO_COMMAND[options.packageManager];
+
+  spawn(command, ['@storybook/auto-config', 'themes'], {
+    stdio: "inherit",
+    cwd: process.cwd(),
+  });
+
+}
\ No newline at end of file

From 7f367f7b15896594641be8f51ec2c072765aefb5 Mon Sep 17 00:00:00 2001
From: Yann Braga <yannbf@gmail.com>
Date: Tue, 22 Aug 2023 14:42:43 +0200
Subject: [PATCH 21/48] replace generic errors with categorized ones

---
 .../core-common/src/utils/validate-config.ts  | 28 ++-----
 .../core-events/src/errors/server-errors.ts   | 75 +++++++++++++++++++
 .../core-events/src/errors/storybook-error.ts |  6 +-
 code/lib/core-server/src/build-static.ts      | 11 +--
 .../core-server/src/utils/server-statics.ts   |  9 +--
 5 files changed, 91 insertions(+), 38 deletions(-)

diff --git a/code/lib/core-common/src/utils/validate-config.ts b/code/lib/core-common/src/utils/validate-config.ts
index 3c5d7201724c..39d3f5ff44dc 100644
--- a/code/lib/core-common/src/utils/validate-config.ts
+++ b/code/lib/core-common/src/utils/validate-config.ts
@@ -1,5 +1,9 @@
 import { join } from 'path';
-import { dedent } from 'ts-dedent';
+import {
+  CouldNotEvaluateFrameworkError,
+  MissingFrameworkFieldError,
+  InvalidFrameworkNameError,
+} from '@storybook/core-events/server-errors';
 import { frameworkPackages } from './get-storybook-info';
 
 const renderers = ['html', 'preact', 'react', 'server', 'svelte', 'vue', 'vue3', 'web-components'];
@@ -9,28 +13,15 @@ const rendererNames = [...renderers, ...renderers.map((renderer) => `@storybook/
 export function validateFrameworkName(
   frameworkName: string | undefined
 ): asserts frameworkName is string {
-  const automigrateMessage = `Please run 'npx storybook@next automigrate' to automatically fix your config.
-
-  See the migration guide for more information: 
-  https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#new-framework-api\n`;
-
   // Throw error if there is no framework field
   // TODO: maybe this error should not be thrown if we allow empty Storybooks that only use "refs" for composition
   if (!frameworkName) {
-    throw new Error(dedent`
-      Could not find a 'framework' field in Storybook config.
-
-      ${automigrateMessage}
-    `);
+    throw new MissingFrameworkFieldError();
   }
 
   // Account for legacy scenario where the framework was referring to a renderer
   if (rendererNames.includes(frameworkName)) {
-    throw new Error(dedent`
-      Invalid value of '${frameworkName}' in the 'framework' field of Storybook config.
-
-      ${automigrateMessage}
-    `);
+    throw new InvalidFrameworkNameError({ frameworkName });
   }
 
   // If we know about the framework, we don't need to validate it
@@ -42,9 +33,6 @@ export function validateFrameworkName(
   try {
     require.resolve(join(frameworkName, 'preset'));
   } catch (err) {
-    throw new Error(dedent`
-      Could not evaluate the ${frameworkName} package from the 'framework' field of Storybook config.
-
-      Are you sure it's a valid package and is installed?`);
+    throw new CouldNotEvaluateFrameworkError({ frameworkName });
   }
 }
diff --git a/code/lib/core-events/src/errors/server-errors.ts b/code/lib/core-events/src/errors/server-errors.ts
index 695b4cb09306..f12926d0f4a9 100644
--- a/code/lib/core-events/src/errors/server-errors.ts
+++ b/code/lib/core-events/src/errors/server-errors.ts
@@ -44,3 +44,78 @@ export class NxProjectDetectedError extends StorybookError {
     `;
   }
 }
+
+export class MissingFrameworkFieldError extends StorybookError {
+  readonly category = Category.CORE_COMMON;
+
+  readonly code = 1;
+
+  public readonly documentation =
+    'https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#new-framework-api';
+
+  template() {
+    return dedent`
+      Could not find a 'framework' field in Storybook config.
+
+      Please run 'npx storybook@next automigrate' to automatically fix your config.
+    `;
+  }
+}
+
+export class InvalidFrameworkNameError extends StorybookError {
+  readonly category = Category.CORE_COMMON;
+
+  readonly code = 2;
+
+  public readonly documentation =
+    'https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#new-framework-api';
+
+  constructor(public data: { frameworkName: string }) {
+    super();
+  }
+
+  template() {
+    return dedent`
+      Invalid value of '${this.data.frameworkName}' in the 'framework' field of Storybook config.
+
+      Please run 'npx storybook@next automigrate' to automatically fix your config.
+    `;
+  }
+}
+
+export class CouldNotEvaluateFrameworkError extends StorybookError {
+  readonly category = Category.CORE_COMMON;
+
+  readonly code = 3;
+
+  constructor(public data: { frameworkName: string }) {
+    super();
+  }
+
+  template() {
+    return dedent`
+      Could not evaluate the '${this.data.frameworkName}' package from the 'framework' field of Storybook config.
+
+      Are you sure it's a valid package and is installed?
+    `;
+  }
+}
+
+export class ConflictingStaticDirConfigError extends StorybookError {
+  readonly category = Category.CORE_SERVER;
+
+  readonly code = 1;
+
+  public readonly documentation =
+    'https://storybook.js.org/docs/react/configure/images-and-assets#serving-static-files-via-storybook-configuration';
+
+  template() {
+    return dedent`
+      Storybook encountered a conflict when trying to serve statics. You have configured both:
+      * Storybook's option in the config file: 'staticDirs'
+      * Storybook's (deprecated) CLI flag: '--staticDir' or '-s'
+      
+      Please remove the CLI flag from your storybook script and use only the 'staticDirs' option instead.
+    `;
+  }
+}
diff --git a/code/lib/core-events/src/errors/storybook-error.ts b/code/lib/core-events/src/errors/storybook-error.ts
index 3a0abbf463f5..40158190d93a 100644
--- a/code/lib/core-events/src/errors/storybook-error.ts
+++ b/code/lib/core-events/src/errors/storybook-error.ts
@@ -26,7 +26,7 @@ export abstract class StorybookError extends Error {
    * - If a string, uses the provided URL for documentation (external or FAQ links).
    * - If `false` (default), no documentation link is added.
    */
-  public documentation: boolean | string = false;
+  public documentation: boolean | string | string[] = false;
 
   /**
    * Flag used to easily determine if the error originates from Storybook.
@@ -51,8 +51,10 @@ export abstract class StorybookError extends Error {
       page = `https://storybook.js.org/error/${this.name}`;
     } else if (typeof this.documentation === 'string') {
       page = this.documentation;
+    } else if (Array.isArray(this.documentation)) {
+      page = `\n${this.documentation.map((doc) => `\t- ${doc}`).join('\n')}`;
     }
 
-    return this.template() + (page != null ? `\n\nMore info: ${page}` : '');
+    return this.template() + (page != null ? `\n\nMore info: ${page}\n` : '');
   }
 }
diff --git a/code/lib/core-server/src/build-static.ts b/code/lib/core-server/src/build-static.ts
index 4f22e5c8ec11..2267839dcd5f 100644
--- a/code/lib/core-server/src/build-static.ts
+++ b/code/lib/core-server/src/build-static.ts
@@ -1,9 +1,7 @@
 import chalk from 'chalk';
 import { copy, emptyDir, ensureDir } from 'fs-extra';
 import { dirname, isAbsolute, join, resolve } from 'path';
-import { dedent } from 'ts-dedent';
 import { global } from '@storybook/global';
-
 import { logger } from '@storybook/node-logger';
 import { telemetry, getPrecedingUpgrade } from '@storybook/telemetry';
 import type {
@@ -22,6 +20,7 @@ import {
   normalizeStories,
   resolveAddonName,
 } from '@storybook/core-common';
+import { ConflictingStaticDirConfigError } from '@storybook/core-events/server-errors';
 
 import isEqual from 'lodash/isEqual.js';
 import { outputStats } from './utils/output-stats';
@@ -125,13 +124,7 @@ export async function buildStaticStandalone(options: BuildStaticStandaloneOption
   };
 
   if (options.staticDir && !isEqual(staticDirs, defaultStaticDirs)) {
-    throw new Error(dedent`
-      Conflict when trying to read staticDirs:
-      * Storybook's configuration option: 'staticDirs'
-      * Storybook's CLI flag: '--staticDir' or '-s'
-      
-      Choose one of them, but not both.
-    `);
+    throw new ConflictingStaticDirConfigError();
   }
 
   const effects: Promise<void>[] = [];
diff --git a/code/lib/core-server/src/utils/server-statics.ts b/code/lib/core-server/src/utils/server-statics.ts
index 609384692943..b2d5a5e3cbce 100644
--- a/code/lib/core-server/src/utils/server-statics.ts
+++ b/code/lib/core-server/src/utils/server-statics.ts
@@ -1,6 +1,7 @@
 import { logger } from '@storybook/node-logger';
 import type { Options, StorybookConfig } from '@storybook/types';
 import { getDirectoryFromWorkingDir } from '@storybook/core-common';
+import { ConflictingStaticDirConfigError } from '@storybook/core-events/server-errors';
 import chalk from 'chalk';
 import express from 'express';
 import { pathExists } from 'fs-extra';
@@ -17,13 +18,7 @@ export async function useStatics(router: any, options: Options) {
   const faviconPath = await options.presets.apply<string>('favicon');
 
   if (options.staticDir && !isEqual(staticDirs, defaultStaticDirs)) {
-    throw new Error(dedent`
-      Conflict when trying to read staticDirs:
-      * Storybook's configuration option: 'staticDirs'
-      * Storybook's CLI flag: '--staticDir' or '-s'
-      
-      Choose one of them, but not both.
-    `);
+    throw new ConflictingStaticDirConfigError();
   }
 
   const statics = [

From f577679659ad63db1218701262c315b707e15cec Mon Sep 17 00:00:00 2001
From: Shaun Lloyd <shaun@chromatic.com>
Date: Tue, 22 Aug 2023 08:45:29 -0400
Subject: [PATCH 22/48] Don't add caret if version isn't semver

---
 code/lib/cli/src/add.ts | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/code/lib/cli/src/add.ts b/code/lib/cli/src/add.ts
index ea9fb458a64a..c6e14457ae16 100644
--- a/code/lib/cli/src/add.ts
+++ b/code/lib/cli/src/add.ts
@@ -37,6 +37,8 @@ const getVersionSpecifier = (addon: string) => {
   return groups ? [groups[1], groups[2]] : [addon, undefined];
 };
 
+const isSemVer = (version: string) => /^\d+\.\d+\.\d+(-.*)?$/.test(version);
+
 /**
  * Install the given addon package and add it to main.js
  *
@@ -77,7 +79,7 @@ export async function add(
   const isStorybookAddon = addonName.startsWith('@storybook/');
   const storybookVersion = await getStorybookVersion(packageManager);
   const version = versionSpecifier || (isStorybookAddon ? storybookVersion : latestVersion);
-  const addonWithVersion = `${addonName}@^${version}`;
+  const addonWithVersion = isSemVer(version) ? `${addonName}@^${version}` : `${addonName}@${version}`;
   logger.log(`Installing ${addonWithVersion}`);
   await packageManager.addDependencies({ installAsDevDependencies: true }, [addonWithVersion]);
 

From af502451d213a5bcbdac5d5638712f41b93fd6d1 Mon Sep 17 00:00:00 2001
From: Yann Braga <yannbf@gmail.com>
Date: Tue, 22 Aug 2023 17:09:02 +0200
Subject: [PATCH 23/48] fix test

---
 .../src/errors/storybook-error.test.ts        | 27 ++++++++++++++++---
 1 file changed, 23 insertions(+), 4 deletions(-)

diff --git a/code/lib/core-events/src/errors/storybook-error.test.ts b/code/lib/core-events/src/errors/storybook-error.test.ts
index 328c27a827e4..dc26a50f9679 100644
--- a/code/lib/core-events/src/errors/storybook-error.test.ts
+++ b/code/lib/core-events/src/errors/storybook-error.test.ts
@@ -26,16 +26,35 @@ describe('StorybookError', () => {
     const error = new TestError();
     error.documentation = true;
     const expectedMessage =
-      'This is a test error.\n\nMore info: https://storybook.js.org/error/SB_TEST_CATEGORY_0123';
+      'This is a test error.\n\nMore info: https://storybook.js.org/error/SB_TEST_CATEGORY_0123\n';
     expect(error.message).toBe(expectedMessage);
   });
 
   it('should generate the correct message with external documentation link', () => {
     const error = new TestError();
     error.documentation = 'https://example.com/docs/test-error';
-    const expectedMessage =
-      'This is a test error.\n\nMore info: https://example.com/docs/test-error';
-    expect(error.message).toBe(expectedMessage);
+    expect(error.message).toMatchInlineSnapshot(`
+      "This is a test error.
+
+      More info: https://example.com/docs/test-error
+      "
+    `);
+  });
+
+  it('should generate the correct message with multiple external documentation links', () => {
+    const error = new TestError();
+    error.documentation = [
+      'https://example.com/docs/first-error',
+      'https://example.com/docs/second-error',
+    ];
+    expect(error.message).toMatchInlineSnapshot(`
+      "This is a test error.
+
+      More info: 
+      	- https://example.com/docs/first-error
+      	- https://example.com/docs/second-error
+      "
+    `);
   });
 
   it('should have default documentation value of false', () => {

From ad2d4398a8e1f16dbd8065b67acc75a548efb4f8 Mon Sep 17 00:00:00 2001
From: Yann Braga <yannbf@gmail.com>
Date: Tue, 22 Aug 2023 18:24:10 +0200
Subject: [PATCH 24/48] add override presets for framework presets

---
 code/lib/core-server/package.json                  |  8 +++++++-
 code/lib/core-server/src/build-dev.ts              |  9 +++++++--
 code/lib/core-server/src/build-static.ts           |  9 +++++++--
 .../src/presets/common-override-preset.ts          | 14 ++++++++++++++
 4 files changed, 35 insertions(+), 5 deletions(-)
 create mode 100644 code/lib/core-server/src/presets/common-override-preset.ts

diff --git a/code/lib/core-server/package.json b/code/lib/core-server/package.json
index 305d010bb28f..ac658435f818 100644
--- a/code/lib/core-server/package.json
+++ b/code/lib/core-server/package.json
@@ -36,6 +36,11 @@
       "node": "./dist/presets/common-preset.js",
       "require": "./dist/presets/common-preset.js"
     },
+    "./dist/presets/common-override-preset": {
+      "types": "./dist/presets/common-override-preset.d.ts",
+      "node": "./dist/presets/common-override-preset.js",
+      "require": "./dist/presets/common-override-preset.js"
+    },
     "./public/favicon.svg": "./public/favicon.svg",
     "./package.json": "./package.json"
   },
@@ -119,7 +124,8 @@
     "entries": [
       "./src/index.ts",
       "./src/presets/babel-cache-preset.ts",
-      "./src/presets/common-preset.ts"
+      "./src/presets/common-preset.ts",
+      "./src/presets/common-override-preset.ts"
     ],
     "platform": "node"
   },
diff --git a/code/lib/core-server/src/build-dev.ts b/code/lib/core-server/src/build-dev.ts
index ee045cde1a3d..7785afdee7b7 100644
--- a/code/lib/core-server/src/build-dev.ts
+++ b/code/lib/core-server/src/build-dev.ts
@@ -80,7 +80,9 @@ export async function buildDevStandalone(
   // We hope to remove this in SB8
   let presets = await loadAllPresets({
     corePresets,
-    overridePresets: [],
+    overridePresets: [
+      require.resolve('@storybook/core-server/dist/presets/common-override-preset'),
+    ],
     ...options,
   });
 
@@ -112,7 +114,10 @@ export async function buildDevStandalone(
       ...corePresets,
       require.resolve('@storybook/core-server/dist/presets/babel-cache-preset'),
     ],
-    overridePresets: previewBuilder.overridePresets ?? [],
+    overridePresets: [
+      ...(previewBuilder.overridePresets || []),
+      require.resolve('@storybook/core-server/dist/presets/common-override-preset'),
+    ],
     ...options,
   });
 
diff --git a/code/lib/core-server/src/build-static.ts b/code/lib/core-server/src/build-static.ts
index 4f22e5c8ec11..a9cfcaefbfc4 100644
--- a/code/lib/core-server/src/build-static.ts
+++ b/code/lib/core-server/src/build-static.ts
@@ -85,7 +85,9 @@ export async function buildStaticStandalone(options: BuildStaticStandaloneOption
       require.resolve('@storybook/core-server/dist/presets/common-preset'),
       ...corePresets,
     ],
-    overridePresets: [],
+    overridePresets: [
+      require.resolve('@storybook/core-server/dist/presets/common-override-preset'),
+    ],
     ...options,
   });
 
@@ -103,7 +105,10 @@ export async function buildStaticStandalone(options: BuildStaticStandaloneOption
       ...corePresets,
       require.resolve('@storybook/core-server/dist/presets/babel-cache-preset'),
     ],
-    overridePresets: previewBuilder.overridePresets || [],
+    overridePresets: [
+      ...(previewBuilder.overridePresets || []),
+      require.resolve('@storybook/core-server/dist/presets/common-override-preset'),
+    ],
     ...options,
   });
 
diff --git a/code/lib/core-server/src/presets/common-override-preset.ts b/code/lib/core-server/src/presets/common-override-preset.ts
new file mode 100644
index 000000000000..55a55bb0f117
--- /dev/null
+++ b/code/lib/core-server/src/presets/common-override-preset.ts
@@ -0,0 +1,14 @@
+import type { PresetProperty, StorybookConfig } from '@storybook/types';
+
+export const framework: PresetProperty<'framework', StorybookConfig> = async (config) => {
+  // This will get called with the values from the user's main config, but before
+  // framework preset from framework packages e.g. react-webpack5 gets called.
+  // This means we can add default values to the framework config, before it's requested by other packages.
+  const name = typeof config === 'string' ? config : config?.name;
+  const options = typeof config === 'string' ? {} : config?.options || {};
+
+  return {
+    name,
+    options,
+  };
+};

From a9ecaf76bf3588ea66b196276d57b43d0c6548f7 Mon Sep 17 00:00:00 2001
From: Norbert de Langen <ndelangen@me.com>
Date: Tue, 22 Aug 2023 19:50:07 +0200
Subject: [PATCH 25/48] remove the layout shifts

---
 .../src/components/sidebar/Sidebar.tsx        | 111 ++++++++++--------
 1 file changed, 60 insertions(+), 51 deletions(-)

diff --git a/code/ui/manager/src/components/sidebar/Sidebar.tsx b/code/ui/manager/src/components/sidebar/Sidebar.tsx
index 54475a1ce108..2d86afc04284 100644
--- a/code/ui/manager/src/components/sidebar/Sidebar.tsx
+++ b/code/ui/manager/src/components/sidebar/Sidebar.tsx
@@ -105,6 +105,13 @@ export interface SidebarProps extends API_LoadedRefData {
   enableShortcuts?: boolean;
 }
 
+const TopAndBottom = styled.div({
+  display: 'flex',
+  flexDirection: 'column',
+  flex: 1,
+  minHeight: '100vh',
+});
+
 export const Sidebar = React.memo(function Sidebar({
   storyId = null,
   refId = DEFAULT_REF_ID,
@@ -126,57 +133,59 @@ export const Sidebar = React.memo(function Sidebar({
   return (
     <Container className="container sidebar-container">
       <CustomScrollArea vertical>
-        <Top row={1.6}>
-          <Heading
-            className="sidebar-header"
-            menuHighlighted={menuHighlighted}
-            menu={menu}
-            skipLinkHref="#storybook-preview-wrapper"
-          />
-
-          <Search
-            dataset={dataset}
-            isLoading={isLoading}
-            enableShortcuts={enableShortcuts}
-            {...lastViewedProps}
-          >
-            {({
-              query,
-              results,
-              isBrowsing,
-              closeMenu,
-              getMenuProps,
-              getItemProps,
-              highlightedIndex,
-            }) => (
-              <Swap condition={isBrowsing}>
-                <Explorer
-                  dataset={dataset}
-                  selected={selected}
-                  isLoading={isLoading}
-                  isBrowsing={isBrowsing}
-                />
-                <SearchResults
-                  query={query}
-                  results={results}
-                  closeMenu={closeMenu}
-                  getMenuProps={getMenuProps}
-                  getItemProps={getItemProps}
-                  highlightedIndex={highlightedIndex}
-                  enableShortcuts={enableShortcuts}
-                  isLoading={isLoading}
-                />
-              </Swap>
-            )}
-          </Search>
-        </Top>
-        {isLoading ? null : (
-          <Bottom>
-            {bottom.map(({ id, render: Render }) => (
-              <Render key={id} />
-            ))}
-          </Bottom>
-        )}
+        <TopAndBottom>
+          <Top row={1.6}>
+            <Heading
+              className="sidebar-header"
+              menuHighlighted={menuHighlighted}
+              menu={menu}
+              skipLinkHref="#storybook-preview-wrapper"
+            />
+
+            <Search
+              dataset={dataset}
+              isLoading={isLoading}
+              enableShortcuts={enableShortcuts}
+              {...lastViewedProps}
+            >
+              {({
+                query,
+                results,
+                isBrowsing,
+                closeMenu,
+                getMenuProps,
+                getItemProps,
+                highlightedIndex,
+              }) => (
+                <Swap condition={isBrowsing}>
+                  <Explorer
+                    dataset={dataset}
+                    selected={selected}
+                    isLoading={isLoading}
+                    isBrowsing={isBrowsing}
+                  />
+                  <SearchResults
+                    query={query}
+                    results={results}
+                    closeMenu={closeMenu}
+                    getMenuProps={getMenuProps}
+                    getItemProps={getItemProps}
+                    highlightedIndex={highlightedIndex}
+                    enableShortcuts={enableShortcuts}
+                    isLoading={isLoading}
+                  />
+                </Swap>
+              )}
+            </Search>
+          </Top>
+          {isLoading ? null : (
+            <Bottom>
+              {bottom.map(({ id, render: Render }) => (
+                <Render key={id} />
+              ))}
+            </Bottom>
+          )}
+        </TopAndBottom>
       </CustomScrollArea>
     </Container>
   );

From 4f94222f2aa00096c6a38a693918921b8b587edb Mon Sep 17 00:00:00 2001
From: Norbert de Langen <ndelangen@me.com>
Date: Tue, 22 Aug 2023 20:17:12 +0200
Subject: [PATCH 26/48] no more double error messages

---
 code/lib/node-logger/src/index.ts | 19 ++++++++++++++++++-
 1 file changed, 18 insertions(+), 1 deletion(-)

diff --git a/code/lib/node-logger/src/index.ts b/code/lib/node-logger/src/index.ts
index 09e0f2828783..75d0450b2c07 100644
--- a/code/lib/node-logger/src/index.ts
+++ b/code/lib/node-logger/src/index.ts
@@ -26,12 +26,29 @@ export const logger = {
   line: (count = 1): void => console.log(`${Array(count - 1).fill('\n')}`),
   warn: (message: string): void => npmLog.warn('', message),
   // npmLog supports anything we log, it will just stringify it
-  error: (message: unknown): void => npmLog.error('', message as string),
+  // error: (message: unknown): void => npmLog.error('', message as string),
   trace: ({ message, time }: { message: string; time: [number, number] }): void =>
     npmLog.info('', `${message} (${colors.purple(prettyTime(time))})`),
   setLevel: (level = 'info'): void => {
     npmLog.level = level;
   },
+  error: (message: Error | string): void => {
+    if (npmLog.levels[npmLog.level] < npmLog.levels.error) {
+      let msg: string;
+
+      if (message instanceof Error && message.stack) {
+        msg = message.stack.toString();
+      } else {
+        msg = message.toString();
+      }
+
+      console.log(
+        msg
+          .replaceAll(process.cwd(), '.')
+          .replace(message.toString(), chalk.red(message.toString()))
+      );
+    }
+  },
 };
 
 export { npmLog as instance };

From 2ed74d93b41979f5b4be1411d3ad7a905dcdf838 Mon Sep 17 00:00:00 2001
From: Norbert de Langen <ndelangen@me.com>
Date: Tue, 22 Aug 2023 20:21:20 +0200
Subject: [PATCH 27/48] cleanup

---
 code/lib/node-logger/src/index.ts | 2 --
 1 file changed, 2 deletions(-)

diff --git a/code/lib/node-logger/src/index.ts b/code/lib/node-logger/src/index.ts
index 75d0450b2c07..b839944e20d4 100644
--- a/code/lib/node-logger/src/index.ts
+++ b/code/lib/node-logger/src/index.ts
@@ -25,8 +25,6 @@ export const logger = {
   plain: (message: string): void => console.log(message),
   line: (count = 1): void => console.log(`${Array(count - 1).fill('\n')}`),
   warn: (message: string): void => npmLog.warn('', message),
-  // npmLog supports anything we log, it will just stringify it
-  // error: (message: unknown): void => npmLog.error('', message as string),
   trace: ({ message, time }: { message: string; time: [number, number] }): void =>
     npmLog.info('', `${message} (${colors.purple(prettyTime(time))})`),
   setLevel: (level = 'info'): void => {

From 5ba01b55d56a18ee2d32d6b0c127a2f93e47fdd4 Mon Sep 17 00:00:00 2001
From: Norbert de Langen <ndelangen@me.com>
Date: Tue, 22 Aug 2023 20:46:56 +0200
Subject: [PATCH 28/48] fix tying issue

---
 code/frameworks/angular/src/builders/utils/error-handler.ts | 2 +-
 code/lib/core-server/src/withTelemetry.ts                   | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/code/frameworks/angular/src/builders/utils/error-handler.ts b/code/frameworks/angular/src/builders/utils/error-handler.ts
index f2ff150495cf..2673dbfd0b87 100644
--- a/code/frameworks/angular/src/builders/utils/error-handler.ts
+++ b/code/frameworks/angular/src/builders/utils/error-handler.ts
@@ -12,7 +12,7 @@ export const printErrorDetails = (error: any): void => {
     } else if ((error as any).stats && (error as any).stats.compilation.errors) {
       (error as any).stats.compilation.errors.forEach((e: any) => logger.plain(e));
     } else {
-      logger.error(error as any);
+      logger.error(error);
     }
   } else if (error.compilation?.errors) {
     error.compilation.errors.forEach((e: any) => logger.plain(e));
diff --git a/code/lib/core-server/src/withTelemetry.ts b/code/lib/core-server/src/withTelemetry.ts
index 49b8c6c79699..0baebb8d97cb 100644
--- a/code/lib/core-server/src/withTelemetry.ts
+++ b/code/lib/core-server/src/withTelemetry.ts
@@ -151,7 +151,7 @@ export async function withTelemetry<T>(
 
   try {
     return await run();
-  } catch (error) {
+  } catch (error: any) {
     if (canceled) {
       return undefined;
     }

From b8dbbd2104a74f62044feadfd6c0fa79ee707a62 Mon Sep 17 00:00:00 2001
From: Norbert de Langen <ndelangen@me.com>
Date: Tue, 22 Aug 2023 20:49:42 +0200
Subject: [PATCH 29/48] adjust story so it only shows 1 theme, otherwise it
 doesn't show the bottom

---
 code/ui/manager/src/components/sidebar/Sidebar.stories.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/code/ui/manager/src/components/sidebar/Sidebar.stories.tsx b/code/ui/manager/src/components/sidebar/Sidebar.stories.tsx
index 136e56ba90ac..7d91447d19e4 100644
--- a/code/ui/manager/src/components/sidebar/Sidebar.stories.tsx
+++ b/code/ui/manager/src/components/sidebar/Sidebar.stories.tsx
@@ -229,6 +229,7 @@ export const Bottom: Story = {
   args: {
     previewInitialized: true,
   },
+  parameters: { theme: 'light' },
   render: (args) => (
     <Sidebar
       {...args}

From 7fa28049d35a89c1348087b6731160fee183fa67 Mon Sep 17 00:00:00 2001
From: Norbert de Langen <ndelangen@me.com>
Date: Tue, 22 Aug 2023 21:36:59 +0200
Subject: [PATCH 30/48] fix existing test and add test for errors

---
 code/lib/node-logger/src/index.test.ts | 25 ++++++++++++++++++++++++-
 1 file changed, 24 insertions(+), 1 deletion(-)

diff --git a/code/lib/node-logger/src/index.test.ts b/code/lib/node-logger/src/index.test.ts
index 40188dbc8ceb..475a054e0c9f 100644
--- a/code/lib/node-logger/src/index.test.ts
+++ b/code/lib/node-logger/src/index.test.ts
@@ -1,12 +1,28 @@
 import { info, warn, error } from 'npmlog';
 import { logger } from '.';
 
+globalThis.console = { log: jest.fn() } as any;
+
 jest.mock('npmlog', () => ({
   info: jest.fn(),
   warn: jest.fn(),
   error: jest.fn(),
+  levels: {
+    silly: -Infinity,
+    verbose: 1000,
+    info: 2000,
+    timing: 2500,
+    http: 3000,
+    notice: 3500,
+    warn: 4000,
+    error: 5000,
+    silent: Infinity,
+  },
+  level: 'info',
 }));
 
+//
+
 describe('node-logger', () => {
   it('should have an info method', () => {
     const message = 'information';
@@ -21,6 +37,13 @@ describe('node-logger', () => {
   it('should have an error method', () => {
     const message = 'error message';
     logger.error(message);
-    expect(error).toHaveBeenCalledWith('', message);
+    expect(globalThis.console.log).toHaveBeenCalledWith(expect.stringMatching('message'));
+  });
+  it('should format errors', () => {
+    const message = new Error('A complete disaster');
+    logger.error(message);
+    expect(globalThis.console.log).toHaveBeenCalledWith(
+      expect.stringMatching('A complete disaster')
+    );
   });
 });

From 5c95bffba01f2d5012ccfe540394c88ab9f95b31 Mon Sep 17 00:00:00 2001
From: Norbert de Langen <ndelangen@me.com>
Date: Tue, 22 Aug 2023 21:47:12 +0200
Subject: [PATCH 31/48] cleanup

---
 code/lib/node-logger/src/index.test.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/code/lib/node-logger/src/index.test.ts b/code/lib/node-logger/src/index.test.ts
index 475a054e0c9f..3cda41501ed0 100644
--- a/code/lib/node-logger/src/index.test.ts
+++ b/code/lib/node-logger/src/index.test.ts
@@ -1,4 +1,4 @@
-import { info, warn, error } from 'npmlog';
+import { info, warn } from 'npmlog';
 import { logger } from '.';
 
 globalThis.console = { log: jest.fn() } as any;

From 7e135d22a9fc909aff3b3fe3bb9fe8276feb6ffd Mon Sep 17 00:00:00 2001
From: Norbert de Langen <ndelangen@me.com>
Date: Wed, 23 Aug 2023 11:54:21 +0200
Subject: [PATCH 32/48] Update code/lib/node-logger/src/index.ts

Co-authored-by: Yann Braga <yannbf@gmail.com>
---
 code/lib/node-logger/src/index.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/code/lib/node-logger/src/index.ts b/code/lib/node-logger/src/index.ts
index b839944e20d4..4ca3550cfba2 100644
--- a/code/lib/node-logger/src/index.ts
+++ b/code/lib/node-logger/src/index.ts
@@ -42,8 +42,8 @@ export const logger = {
 
       console.log(
         msg
-          .replaceAll(process.cwd(), '.')
           .replace(message.toString(), chalk.red(message.toString()))
+          .replaceAll(process.cwd(), '.')
       );
     }
   },

From b8ca208271f00917a4b3a76874dfc8e2be9e130f Mon Sep 17 00:00:00 2001
From: Norbert de Langen <ndelangen@me.com>
Date: Wed, 23 Aug 2023 14:34:54 +0200
Subject: [PATCH 33/48] make the footer "sticky" add notice when index is empty
 that this could be caused by filter-functions

---
 .../src/components/sidebar/RefBlocks.tsx      |   1 +
 .../src/components/sidebar/Sidebar.tsx        | 120 ++++++++----------
 2 files changed, 57 insertions(+), 64 deletions(-)

diff --git a/code/ui/manager/src/components/sidebar/RefBlocks.tsx b/code/ui/manager/src/components/sidebar/RefBlocks.tsx
index ddea8ed11aa6..52d1d335a5dd 100644
--- a/code/ui/manager/src/components/sidebar/RefBlocks.tsx
+++ b/code/ui/manager/src/components/sidebar/RefBlocks.tsx
@@ -145,6 +145,7 @@ export const EmptyBlock: FC<any> = ({ isMain }) => (
                   The glob specified in <code>main.js</code> isn't correct.
                 </li>
                 <li>No stories are defined in your story files.</li>
+                <li>You're using filter-functions, and all stories are filtered away.</li>
               </ul>{' '}
             </>
           ) : (
diff --git a/code/ui/manager/src/components/sidebar/Sidebar.tsx b/code/ui/manager/src/components/sidebar/Sidebar.tsx
index 2d86afc04284..2a85018b28c5 100644
--- a/code/ui/manager/src/components/sidebar/Sidebar.tsx
+++ b/code/ui/manager/src/components/sidebar/Sidebar.tsx
@@ -40,6 +40,11 @@ const Bottom = styled.div(({ theme }) => ({
   display: 'flex',
   flexWrap: 'wrap',
   gap: theme.layoutMargin / 2,
+  position: 'absolute',
+  bottom: 0,
+  left: 0,
+  width: '100%',
+  backgroundColor: theme.barBg,
 
   '&:empty': {
     display: 'none',
@@ -53,10 +58,6 @@ const CustomScrollArea = styled(ScrollArea)({
   '&&&&& .os-scrollbar-vertical': {
     right: 5,
   },
-  '& [data-overlayscrollbars-viewport]': {
-    display: 'flex',
-    flexDirection: 'column',
-  },
 });
 
 const Swap = React.memo(function Swap({
@@ -105,13 +106,6 @@ export interface SidebarProps extends API_LoadedRefData {
   enableShortcuts?: boolean;
 }
 
-const TopAndBottom = styled.div({
-  display: 'flex',
-  flexDirection: 'column',
-  flex: 1,
-  minHeight: '100vh',
-});
-
 export const Sidebar = React.memo(function Sidebar({
   storyId = null,
   refId = DEFAULT_REF_ID,
@@ -133,60 +127,58 @@ export const Sidebar = React.memo(function Sidebar({
   return (
     <Container className="container sidebar-container">
       <CustomScrollArea vertical>
-        <TopAndBottom>
-          <Top row={1.6}>
-            <Heading
-              className="sidebar-header"
-              menuHighlighted={menuHighlighted}
-              menu={menu}
-              skipLinkHref="#storybook-preview-wrapper"
-            />
-
-            <Search
-              dataset={dataset}
-              isLoading={isLoading}
-              enableShortcuts={enableShortcuts}
-              {...lastViewedProps}
-            >
-              {({
-                query,
-                results,
-                isBrowsing,
-                closeMenu,
-                getMenuProps,
-                getItemProps,
-                highlightedIndex,
-              }) => (
-                <Swap condition={isBrowsing}>
-                  <Explorer
-                    dataset={dataset}
-                    selected={selected}
-                    isLoading={isLoading}
-                    isBrowsing={isBrowsing}
-                  />
-                  <SearchResults
-                    query={query}
-                    results={results}
-                    closeMenu={closeMenu}
-                    getMenuProps={getMenuProps}
-                    getItemProps={getItemProps}
-                    highlightedIndex={highlightedIndex}
-                    enableShortcuts={enableShortcuts}
-                    isLoading={isLoading}
-                  />
-                </Swap>
-              )}
-            </Search>
-          </Top>
-          {isLoading ? null : (
-            <Bottom>
-              {bottom.map(({ id, render: Render }) => (
-                <Render key={id} />
-              ))}
-            </Bottom>
-          )}
-        </TopAndBottom>
+        <Top row={1.6}>
+          <Heading
+            className="sidebar-header"
+            menuHighlighted={menuHighlighted}
+            menu={menu}
+            skipLinkHref="#storybook-preview-wrapper"
+          />
+
+          <Search
+            dataset={dataset}
+            isLoading={isLoading}
+            enableShortcuts={enableShortcuts}
+            {...lastViewedProps}
+          >
+            {({
+              query,
+              results,
+              isBrowsing,
+              closeMenu,
+              getMenuProps,
+              getItemProps,
+              highlightedIndex,
+            }) => (
+              <Swap condition={isBrowsing}>
+                <Explorer
+                  dataset={dataset}
+                  selected={selected}
+                  isLoading={isLoading}
+                  isBrowsing={isBrowsing}
+                />
+                <SearchResults
+                  query={query}
+                  results={results}
+                  closeMenu={closeMenu}
+                  getMenuProps={getMenuProps}
+                  getItemProps={getItemProps}
+                  highlightedIndex={highlightedIndex}
+                  enableShortcuts={enableShortcuts}
+                  isLoading={isLoading}
+                />
+              </Swap>
+            )}
+          </Search>
+        </Top>
       </CustomScrollArea>
+      {isLoading ? null : (
+        <Bottom>
+          {bottom.map(({ id, render: Render }) => (
+            <Render key={id} />
+          ))}
+        </Bottom>
+      )}
     </Container>
   );
 });

From cb7dc7583e2079937594bbf50e0a275373253950 Mon Sep 17 00:00:00 2001
From: Shaun Lloyd <shaun@chromatic.com>
Date: Wed, 23 Aug 2023 08:43:12 -0400
Subject: [PATCH 34/48] Add postinstall to exports map

---
 code/addons/themes/package.json | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/code/addons/themes/package.json b/code/addons/themes/package.json
index 916b3a433bdd..758b1717486c 100644
--- a/code/addons/themes/package.json
+++ b/code/addons/themes/package.json
@@ -43,7 +43,8 @@
       "require": "./dist/preview.js",
       "import": "./dist/preview.mjs"
     },
-    "./package.json": "./package.json"
+    "./package.json": "./package.json",
+    "./postinstall": "./postinstall.js"
   },
   "main": "dist/index.js",
   "module": "dist/index.mjs",

From 03020880ce4446a044d3eca3a256463eacfb406f Mon Sep 17 00:00:00 2001
From: Norbert de Langen <ndelangen@me.com>
Date: Wed, 23 Aug 2023 16:27:50 +0200
Subject: [PATCH 35/48] fix the scrollbar overlaying the footer

---
 code/ui/manager/src/components/sidebar/Sidebar.tsx | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/code/ui/manager/src/components/sidebar/Sidebar.tsx b/code/ui/manager/src/components/sidebar/Sidebar.tsx
index 2a85018b28c5..507cb6b33235 100644
--- a/code/ui/manager/src/components/sidebar/Sidebar.tsx
+++ b/code/ui/manager/src/components/sidebar/Sidebar.tsx
@@ -27,6 +27,8 @@ const Container = styled.nav({
   right: 0,
   width: '100%',
   height: '100%',
+  display: 'flex',
+  flexDirection: 'column',
 });
 
 const Top = styled(Spaced)({
@@ -40,10 +42,6 @@ const Bottom = styled.div(({ theme }) => ({
   display: 'flex',
   flexWrap: 'wrap',
   gap: theme.layoutMargin / 2,
-  position: 'absolute',
-  bottom: 0,
-  left: 0,
-  width: '100%',
   backgroundColor: theme.barBg,
 
   '&:empty': {

From 937473b54cba39807ca5cbdaf9e9e64f61a89a3a Mon Sep 17 00:00:00 2001
From: Yann Braga <yannbf@gmail.com>
Date: Wed, 23 Aug 2023 16:45:12 +0200
Subject: [PATCH 36/48] fix vue generators

---
 code/lib/cli/src/generators/VUE/index.ts     |  5 ++--
 code/lib/cli/src/generators/VUE3/index.ts    | 10 ++++----
 code/lib/cli/src/generators/baseGenerator.ts | 27 ++++++++++++++++----
 code/lib/cli/src/generators/types.ts         |  6 +++--
 4 files changed, 34 insertions(+), 14 deletions(-)

diff --git a/code/lib/cli/src/generators/VUE/index.ts b/code/lib/cli/src/generators/VUE/index.ts
index 02878a42c112..c1869a539695 100644
--- a/code/lib/cli/src/generators/VUE/index.ts
+++ b/code/lib/cli/src/generators/VUE/index.ts
@@ -3,9 +3,10 @@ import { baseGenerator } from '../baseGenerator';
 import type { Generator } from '../types';
 
 const generator: Generator = async (packageManager, npmOptions, options) => {
-  const extraPackages = options.builder === CoreBuilder.Webpack5 ? ['vue-loader@^15.7.0'] : [];
   await baseGenerator(packageManager, npmOptions, options, 'vue', {
-    extraPackages,
+    extraPackages: async ({ builder }) => {
+      return builder === CoreBuilder.Webpack5 ? ['vue-loader@^15.7.0'] : [];
+    },
   });
 };
 
diff --git a/code/lib/cli/src/generators/VUE3/index.ts b/code/lib/cli/src/generators/VUE3/index.ts
index fa08aa327bdf..63dbddede7b5 100644
--- a/code/lib/cli/src/generators/VUE3/index.ts
+++ b/code/lib/cli/src/generators/VUE3/index.ts
@@ -3,12 +3,12 @@ import { baseGenerator } from '../baseGenerator';
 import type { Generator } from '../types';
 
 const generator: Generator = async (packageManager, npmOptions, options) => {
-  const extraPackages =
-    options.builder === CoreBuilder.Webpack5
-      ? ['vue-loader@^17.0.0', '@vue/compiler-sfc@^3.2.0']
-      : [];
   await baseGenerator(packageManager, npmOptions, options, 'vue3', {
-    extraPackages,
+    extraPackages: async ({ builder }) => {
+      return builder === CoreBuilder.Webpack5
+        ? ['vue-loader@^17.0.0', '@vue/compiler-sfc@^3.2.0']
+        : [];
+    },
   });
 };
 
diff --git a/code/lib/cli/src/generators/baseGenerator.ts b/code/lib/cli/src/generators/baseGenerator.ts
index ed3988b7bc05..48b2f8affd5b 100644
--- a/code/lib/cli/src/generators/baseGenerator.ts
+++ b/code/lib/cli/src/generators/baseGenerator.ts
@@ -226,19 +226,28 @@ export async function baseGenerator(
     shouldApplyRequireWrapperOnPackageNames
   );
 
+  const extraAddonsToInstall =
+    typeof extraAddonPackages === 'function'
+      ? await extraAddonPackages({
+          builder: builder || builderInclude,
+          framework: framework || frameworkInclude,
+        })
+      : extraAddonPackages;
+
   // added to main.js
   const addons = [
     '@storybook/addon-links',
     '@storybook/addon-essentials',
-    ...stripVersions(extraAddonPackages),
-  ];
+    ...stripVersions(extraAddonsToInstall),
+  ].filter(Boolean);
+
   // added to package.json
   const addonPackages = [
     '@storybook/addon-links',
     '@storybook/addon-essentials',
     '@storybook/blocks',
-    ...extraAddonPackages,
-  ];
+    ...extraAddonsToInstall,
+  ].filter(Boolean);
 
   if (hasInteractiveStories(rendererId)) {
     addons.push('@storybook/addon-interactions');
@@ -272,12 +281,20 @@ export async function baseGenerator(
     );
   }
 
+  const extraPackagesToInstall =
+    typeof extraPackages === 'function'
+      ? await extraPackages({
+          builder: builder || builderInclude,
+          framework: framework || frameworkInclude,
+        })
+      : extraPackages;
+
   const allPackages = [
     'storybook',
     getExternalFramework(rendererId) ? undefined : `@storybook/${rendererId}`,
     ...frameworkPackages,
     ...addonPackages,
-    ...extraPackages,
+    ...extraPackagesToInstall,
   ].filter(Boolean);
 
   const packages = [...new Set(allPackages)].filter(
diff --git a/code/lib/cli/src/generators/types.ts b/code/lib/cli/src/generators/types.ts
index 04d468bf3da1..1711505e0bdc 100644
--- a/code/lib/cli/src/generators/types.ts
+++ b/code/lib/cli/src/generators/types.ts
@@ -15,8 +15,10 @@ export type GeneratorOptions = {
 };
 
 export interface FrameworkOptions {
-  extraPackages?: string[];
-  extraAddons?: string[];
+  extraPackages?:
+    | string[]
+    | ((details: { framework: string; builder: string }) => Promise<string[]>);
+  extraAddons?: string[] | ((details: { framework: string; builder: string }) => Promise<string[]>);
   staticDir?: string;
   addScripts?: boolean;
   addMainFile?: boolean;

From 81063546f161b87604861cf2f6ae93f4940d2b7e Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Thu, 24 Aug 2023 09:23:09 +0200
Subject: [PATCH 37/48] Fix #23903

---
 code/ui/components/src/components/tabs/tabs.helpers.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/code/ui/components/src/components/tabs/tabs.helpers.tsx b/code/ui/components/src/components/tabs/tabs.helpers.tsx
index 024765fd5cf3..fe41cc47be91 100644
--- a/code/ui/components/src/components/tabs/tabs.helpers.tsx
+++ b/code/ui/components/src/components/tabs/tabs.helpers.tsx
@@ -29,8 +29,8 @@ export const childrenToList = (children: TabsProps['children']) =>
       const render: FC<Addon_RenderOptions> = (
         typeof content === 'function'
           ? content
-          : ({ active, key }: any) => (
-              <VisuallyHidden key={key} active={active} role="tabpanel">
+          : ({ active }) => (
+              <VisuallyHidden active={active} role="tabpanel">
                 {content}
               </VisuallyHidden>
             )

From 02e058a0d053b83055dc346f0c925231bb591155 Mon Sep 17 00:00:00 2001
From: Norbert de Langen <ndelangen@me.com>
Date: Thu, 24 Aug 2023 10:00:54 +0200
Subject: [PATCH 38/48] do not generate sourcemaps for manager related code,
 not for prebuild preview code

---
 code/builders/builder-manager/src/index.ts | 2 +-
 code/lib/cli/src/dev.ts                    | 2 ++
 code/lib/core-server/src/build-dev.ts      | 2 ++
 scripts/prepare/bundle.ts                  | 2 ++
 scripts/prepare/esm-bundle.ts              | 2 ++
 scripts/prepare/tsc.ts                     | 1 +
 6 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/code/builders/builder-manager/src/index.ts b/code/builders/builder-manager/src/index.ts
index 40e180ada28c..c13f0daa87f1 100644
--- a/code/builders/builder-manager/src/index.ts
+++ b/code/builders/builder-manager/src/index.ts
@@ -72,7 +72,7 @@ export const getConfig: ManagerBuilder['getConfig'] = async (options) => {
     platform: 'browser',
     bundle: true,
     minify: true,
-    sourcemap: true,
+    sourcemap: false,
     conditions: ['browser', 'module', 'default'],
 
     jsxFactory: 'React.createElement',
diff --git a/code/lib/cli/src/dev.ts b/code/lib/cli/src/dev.ts
index 216a15595a73..7cc8dbce60ca 100644
--- a/code/lib/cli/src/dev.ts
+++ b/code/lib/cli/src/dev.ts
@@ -10,6 +10,7 @@ function printError(error: any) {
   npmLog.heading = '';
 
   if (error instanceof Error) {
+    console.log('instanceof Error');
     if ((error as any).error) {
       logger.error((error as any).error);
     } else if ((error as any).stats && (error as any).stats.compilation.errors) {
@@ -18,6 +19,7 @@ function printError(error: any) {
       logger.error(error as any);
     }
   } else if (error.compilation?.errors) {
+    console.log('else');
     error.compilation.errors.forEach((e: any) => logger.plain(e));
   }
 
diff --git a/code/lib/core-server/src/build-dev.ts b/code/lib/core-server/src/build-dev.ts
index 7785afdee7b7..efdb0ff89c0a 100644
--- a/code/lib/core-server/src/build-dev.ts
+++ b/code/lib/core-server/src/build-dev.ts
@@ -157,7 +157,9 @@ export async function buildDevStandalone(
       );
 
     // eslint-disable-next-line no-console
+    console.log('VVVVVV problems VVVVVV');
     console.log(problems.map((p) => p.stack));
+    console.log('^^^^^^ problems ^^^^^^');
     process.exit(problems.length > 0 ? 1 : 0);
   } else {
     const name =
diff --git a/scripts/prepare/bundle.ts b/scripts/prepare/bundle.ts
index ac04fee5af2d..a15f71cd6a34 100755
--- a/scripts/prepare/bundle.ts
+++ b/scripts/prepare/bundle.ts
@@ -88,6 +88,7 @@ const run = async ({ cwd, flags }: { cwd: string; flags: string[] }) => {
         shims: false,
         watch,
         outDir,
+        sourcemap: false,
         format: ['esm'],
         target: ['chrome100', 'safari15', 'firefox91'],
         clean: false,
@@ -119,6 +120,7 @@ const run = async ({ cwd, flags }: { cwd: string; flags: string[] }) => {
         entry: allEntries,
         watch,
         outDir,
+        sourcemap: false,
         format: ['cjs'],
         target: 'node16',
         ...(dtsBuild === 'cjs' ? dtsConfig : {}),
diff --git a/scripts/prepare/esm-bundle.ts b/scripts/prepare/esm-bundle.ts
index 08e039ad6dd2..e75ddc75b679 100755
--- a/scripts/prepare/esm-bundle.ts
+++ b/scripts/prepare/esm-bundle.ts
@@ -75,6 +75,7 @@ const run = async ({ cwd, flags }: { cwd: string; flags: string[] }) => {
         entry: allEntries,
         watch,
         outDir,
+        sourcemap: false,
         format: ['esm'],
         outExtension: () => ({
           js: '.js',
@@ -116,6 +117,7 @@ const run = async ({ cwd, flags }: { cwd: string; flags: string[] }) => {
         entry: allEntries,
         watch,
         outDir,
+        sourcemap: false,
         format: ['cjs'],
         outExtension: () => ({
           js: '.js',
diff --git a/scripts/prepare/tsc.ts b/scripts/prepare/tsc.ts
index 242781a3584d..cc248979ef70 100755
--- a/scripts/prepare/tsc.ts
+++ b/scripts/prepare/tsc.ts
@@ -41,6 +41,7 @@ const run = async ({ cwd, flags }: { cwd: string; flags: string[] }) => {
       outDir: join(process.cwd(), 'dist'),
       target: ts.ScriptTarget.ES2020,
       declaration: true,
+      sourceMap: false,
     }
   );
 

From 556c148ca29ad257bf880f6e163ce2bfdae62ae1 Mon Sep 17 00:00:00 2001
From: Norbert de Langen <ndelangen@me.com>
Date: Thu, 24 Aug 2023 10:21:39 +0200
Subject: [PATCH 39/48] Discard changes to code/lib/cli/src/dev.ts

---
 code/lib/cli/src/dev.ts | 2 --
 1 file changed, 2 deletions(-)

diff --git a/code/lib/cli/src/dev.ts b/code/lib/cli/src/dev.ts
index 7cc8dbce60ca..216a15595a73 100644
--- a/code/lib/cli/src/dev.ts
+++ b/code/lib/cli/src/dev.ts
@@ -10,7 +10,6 @@ function printError(error: any) {
   npmLog.heading = '';
 
   if (error instanceof Error) {
-    console.log('instanceof Error');
     if ((error as any).error) {
       logger.error((error as any).error);
     } else if ((error as any).stats && (error as any).stats.compilation.errors) {
@@ -19,7 +18,6 @@ function printError(error: any) {
       logger.error(error as any);
     }
   } else if (error.compilation?.errors) {
-    console.log('else');
     error.compilation.errors.forEach((e: any) => logger.plain(e));
   }
 

From 279ac58251af45af30885d2e8e71cf4f592f9fbc Mon Sep 17 00:00:00 2001
From: Norbert de Langen <ndelangen@me.com>
Date: Thu, 24 Aug 2023 10:21:43 +0200
Subject: [PATCH 40/48] Discard changes to
 code/lib/core-server/src/build-dev.ts

---
 code/lib/core-server/src/build-dev.ts | 2 --
 1 file changed, 2 deletions(-)

diff --git a/code/lib/core-server/src/build-dev.ts b/code/lib/core-server/src/build-dev.ts
index efdb0ff89c0a..7785afdee7b7 100644
--- a/code/lib/core-server/src/build-dev.ts
+++ b/code/lib/core-server/src/build-dev.ts
@@ -157,9 +157,7 @@ export async function buildDevStandalone(
       );
 
     // eslint-disable-next-line no-console
-    console.log('VVVVVV problems VVVVVV');
     console.log(problems.map((p) => p.stack));
-    console.log('^^^^^^ problems ^^^^^^');
     process.exit(problems.length > 0 ? 1 : 0);
   } else {
     const name =

From 06c554e49f79c63b43524bacf0ce10999cba1f6c Mon Sep 17 00:00:00 2001
From: Norbert de Langen <ndelangen@me.com>
Date: Thu, 24 Aug 2023 13:47:19 +0200
Subject: [PATCH 41/48] add a require.resolve

---
 code/addons/docs/src/preset.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/code/addons/docs/src/preset.ts b/code/addons/docs/src/preset.ts
index 462e990e8e16..09679b71becb 100644
--- a/code/addons/docs/src/preset.ts
+++ b/code/addons/docs/src/preset.ts
@@ -50,7 +50,7 @@ async function webpack(
     skipCsf: true,
     ...mdxPluginOptions,
     mdxCompileOptions: {
-      providerImportSource: '@storybook/addon-docs/mdx-react-shim',
+      providerImportSource: require.resolve('@storybook/addon-docs/dist/shims/mdx-react-shim'),
       ...mdxPluginOptions.mdxCompileOptions,
       remarkPlugins: [remarkSlug, remarkExternalLinks].concat(
         mdxPluginOptions?.mdxCompileOptions?.remarkPlugins ?? []

From c93d6072745fd02e9d95638866197b6aec7b1c48 Mon Sep 17 00:00:00 2001
From: Shaun Lloyd <shaun@chromatic.com>
Date: Thu, 24 Aug 2023 08:50:55 -0400
Subject: [PATCH 42/48] Use SemVer

---
 code/lib/cli/src/add.ts | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/code/lib/cli/src/add.ts b/code/lib/cli/src/add.ts
index c6e14457ae16..c5ddd1b1c995 100644
--- a/code/lib/cli/src/add.ts
+++ b/code/lib/cli/src/add.ts
@@ -1,5 +1,6 @@
 import { getStorybookInfo } from '@storybook/core-common';
 import { readConfig, writeConfig } from '@storybook/csf-tools';
+import SemVer from 'semver';
 
 import {
   JsPackageManagerFactory,
@@ -37,8 +38,6 @@ const getVersionSpecifier = (addon: string) => {
   return groups ? [groups[1], groups[2]] : [addon, undefined];
 };
 
-const isSemVer = (version: string) => /^\d+\.\d+\.\d+(-.*)?$/.test(version);
-
 /**
  * Install the given addon package and add it to main.js
  *
@@ -79,7 +78,9 @@ export async function add(
   const isStorybookAddon = addonName.startsWith('@storybook/');
   const storybookVersion = await getStorybookVersion(packageManager);
   const version = versionSpecifier || (isStorybookAddon ? storybookVersion : latestVersion);
-  const addonWithVersion = isSemVer(version) ? `${addonName}@^${version}` : `${addonName}@${version}`;
+  const addonWithVersion = SemVer.valid(version)
+    ? `${addonName}@^${version}`
+    : `${addonName}@${version}`;
   logger.log(`Installing ${addonWithVersion}`);
   await packageManager.addDependencies({ installAsDevDependencies: true }, [addonWithVersion]);
 

From ad7b476edf0c58fabbe87ad46d1c8223b632e028 Mon Sep 17 00:00:00 2001
From: Norbert de Langen <ndelangen@me.com>
Date: Thu, 24 Aug 2023 16:39:34 +0200
Subject: [PATCH 43/48] add require.resolve around other places as well.

---
 code/addons/essentials/src/docs/preset.ts            | 4 +++-
 code/builders/builder-vite/src/plugins/mdx-plugin.ts | 2 +-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/code/addons/essentials/src/docs/preset.ts b/code/addons/essentials/src/docs/preset.ts
index af022cfece92..805fc5e7b3c3 100644
--- a/code/addons/essentials/src/docs/preset.ts
+++ b/code/addons/essentials/src/docs/preset.ts
@@ -3,6 +3,8 @@ export * from '@storybook/addon-docs/dist/preset';
 
 export const mdxLoaderOptions = async (config: any) => {
   // eslint-disable-next-line no-param-reassign
-  config.mdxCompileOptions.providerImportSource = '@storybook/addon-essentials/docs/mdx-react-shim';
+  config.mdxCompileOptions.providerImportSource = require.resolve(
+    '@storybook/addon-docs/dist/shims/mdx-react-shim'
+  );
   return config;
 };
diff --git a/code/builders/builder-vite/src/plugins/mdx-plugin.ts b/code/builders/builder-vite/src/plugins/mdx-plugin.ts
index 4f50a0b38159..3bbbe2bf6019 100644
--- a/code/builders/builder-vite/src/plugins/mdx-plugin.ts
+++ b/code/builders/builder-vite/src/plugins/mdx-plugin.ts
@@ -33,7 +33,7 @@ export async function mdxPlugin(options: Options): Promise<Plugin> {
       const mdxLoaderOptions = await options.presets.apply('mdxLoaderOptions', {
         ...mdxPluginOptions,
         mdxCompileOptions: {
-          providerImportSource: '@storybook/addon-docs/mdx-react-shim',
+          providerImportSource: require.resolve('@storybook/addon-docs/mdx-react-shim'),
           ...mdxPluginOptions?.mdxCompileOptions,
           remarkPlugins: [remarkSlug, remarkExternalLinks].concat(
             mdxPluginOptions?.mdxCompileOptions?.remarkPlugins ?? []

From 3026181d3aeb3450b0d8c4f4a8fa91e15ef8e5cb Mon Sep 17 00:00:00 2001
From: Norbert de Langen <ndelangen@me.com>
Date: Fri, 25 Aug 2023 11:13:26 +0200
Subject: [PATCH 44/48] pack into a packs directory and publish from there

---
 .gitignore                 |  2 ++
 scripts/run-registry.ts    | 23 +++++++++++++++++++++--
 scripts/utils/constants.ts |  2 ++
 3 files changed, 25 insertions(+), 2 deletions(-)

diff --git a/.gitignore b/.gitignore
index 8630dc138669..29c025aadf26 100644
--- a/.gitignore
+++ b/.gitignore
@@ -50,3 +50,5 @@ code/playwright-results/
 code/playwright-report/
 code/playwright/.cache/
 code/bench-results/
+
+/packs
\ No newline at end of file
diff --git a/scripts/run-registry.ts b/scripts/run-registry.ts
index 34e5e8920920..6735e9811a0b 100755
--- a/scripts/run-registry.ts
+++ b/scripts/run-registry.ts
@@ -7,6 +7,8 @@ import program from 'commander';
 import { runServer, parseConfigFile } from 'verdaccio';
 import pLimit from 'p-limit';
 import type { Server } from 'http';
+import { mkdir } from 'fs/promises';
+import { PACKS_DIRECTORY } from './utils/constants';
 // @ts-expect-error (Converted from ts-ignore)
 import { maxConcurrentTasks } from './utils/concurrency';
 import { listOfPackages } from './utils/list-packages';
@@ -53,12 +55,27 @@ const currentVersion = async () => {
   return version;
 };
 
-const publish = (packages: { name: string; location: string }[], url: string) => {
+const publish = async (packages: { name: string; location: string }[], url: string) => {
   logger.log(`Publishing packages with a concurrency of ${maxConcurrentTasks}`);
 
   const limit = pLimit(maxConcurrentTasks);
   let i = 0;
 
+  /**
+   * We need to "pack" our packages before publishing to npm because our package.json files contain yarn specific version "ranges".
+   * such as "workspace:*"
+   *
+   * We can't publish to npm if the package.json contains these ranges. So with `yarn pack` we create a tarball that we can publish.
+   *
+   * However this bug exists in NPM: https://github.com/npm/cli/issues/4533!
+   * Which causes the NPM CLI to disregard the tarball CLI argument and instead re-create a tarball.
+   * But NPM doesn't replace the yarn version ranges.
+   *
+   * So we create the tarball ourselves and move it to another location on the FS.
+   * Then we change-directory to that directory and publish the tarball from there.
+   */
+  await mkdir(PACKS_DIRECTORY, { recursive: true }).catch(() => {});
+
   return Promise.all(
     packages.map(({ name, location }) =>
       limit(
@@ -70,7 +87,9 @@ const publish = (packages: { name: string; location: string }[], url: string) =>
                 '.'
               )})`
             );
-            const command = `cd ${location} && yarn pack && npm publish ./package.tgz --registry ${url} --force --access restricted --ignore-scripts && rm ./package.tgz`;
+
+            const tarballFilename = `${name.replace('@', '').replace('/', '-')}.tgz`;
+            const command = `cd ${location} && yarn pack --out=${PACKS_DIRECTORY}/${tarballFilename} && cd ${PACKS_DIRECTORY} && npm publish ./${tarballFilename} --registry ${url} --force --access restricted --ignore-scripts`;
             exec(command, (e) => {
               if (e) {
                 rej(e);
diff --git a/scripts/utils/constants.ts b/scripts/utils/constants.ts
index 38cd105e13fc..ba0e506a3fa5 100644
--- a/scripts/utils/constants.ts
+++ b/scripts/utils/constants.ts
@@ -3,7 +3,9 @@ import { join } from 'path';
 export const AFTER_DIR_NAME = 'after-storybook';
 export const BEFORE_DIR_NAME = 'before-storybook';
 
+export const ROOT_DIRECTORY = join(__dirname, '..', '..');
 export const CODE_DIRECTORY = join(__dirname, '..', '..', 'code');
+export const PACKS_DIRECTORY = join(__dirname, '..', '..', 'packs');
 export const REPROS_DIRECTORY = join(__dirname, '..', '..', 'repros');
 export const SANDBOX_DIRECTORY = join(__dirname, '..', '..', 'sandbox');
 export const JUNIT_DIRECTORY = join(__dirname, '..', '..', 'test-results');

From 18436a9e12030ad960d301c1df4d6c663f6bd241 Mon Sep 17 00:00:00 2001
From: Norbert de Langen <ndelangen@me.com>
Date: Fri, 25 Aug 2023 11:35:26 +0200
Subject: [PATCH 45/48] Update scripts/utils/constants.ts

Co-authored-by: Jeppe Reinhold <jeppe@chromatic.com>
---
 scripts/utils/constants.ts | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/scripts/utils/constants.ts b/scripts/utils/constants.ts
index ba0e506a3fa5..d783410d3825 100644
--- a/scripts/utils/constants.ts
+++ b/scripts/utils/constants.ts
@@ -4,11 +4,11 @@ export const AFTER_DIR_NAME = 'after-storybook';
 export const BEFORE_DIR_NAME = 'before-storybook';
 
 export const ROOT_DIRECTORY = join(__dirname, '..', '..');
-export const CODE_DIRECTORY = join(__dirname, '..', '..', 'code');
-export const PACKS_DIRECTORY = join(__dirname, '..', '..', 'packs');
-export const REPROS_DIRECTORY = join(__dirname, '..', '..', 'repros');
-export const SANDBOX_DIRECTORY = join(__dirname, '..', '..', 'sandbox');
-export const JUNIT_DIRECTORY = join(__dirname, '..', '..', 'test-results');
+export const CODE_DIRECTORY = join(ROOT_DIRECTORY, 'code');
+export const PACKS_DIRECTORY = join(ROOT_DIRECTORY, 'packs');
+export const REPROS_DIRECTORY = join(ROOT_DIRECTORY, 'repros');
+export const SANDBOX_DIRECTORY = join(ROOT_DIRECTORY, 'sandbox');
+export const JUNIT_DIRECTORY = join(ROOT_DIRECTORY, 'test-results');
 
 export const LOCAL_REGISTRY_URL = 'http://localhost:6001';
 export const SCRIPT_TIMEOUT = 5 * 60 * 1000;

From 8f1ed079010e8f8a8c7f4b7c088d94e6246ba561 Mon Sep 17 00:00:00 2001
From: Norbert de Langen <ndelangen@me.com>
Date: Fri, 25 Aug 2023 13:35:59 +0200
Subject: [PATCH 46/48] allow mjs files & externalize @storybook/global

---
 code/addons/docs/src/preset.ts                       | 6 +++++-
 code/addons/essentials/src/docs/preset.ts            | 9 ++++++---
 code/builders/builder-vite/src/plugins/mdx-plugin.ts | 6 +++++-
 code/lib/preview/src/globals/runtime.ts              | 2 ++
 code/lib/preview/src/globals/types.ts                | 1 +
 5 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/code/addons/docs/src/preset.ts b/code/addons/docs/src/preset.ts
index 09679b71becb..1931f0bcc32c 100644
--- a/code/addons/docs/src/preset.ts
+++ b/code/addons/docs/src/preset.ts
@@ -1,4 +1,5 @@
 import fs from 'fs-extra';
+import { dirname, join } from 'path';
 import remarkSlug from 'remark-slug';
 import remarkExternalLinks from 'remark-external-links';
 import { dedent } from 'ts-dedent';
@@ -50,7 +51,10 @@ async function webpack(
     skipCsf: true,
     ...mdxPluginOptions,
     mdxCompileOptions: {
-      providerImportSource: require.resolve('@storybook/addon-docs/dist/shims/mdx-react-shim'),
+      providerImportSource: join(
+        dirname(require.resolve('@storybook/addon-docs/package.json')),
+        '/dist/shims/mdx-react-shim'
+      ),
       ...mdxPluginOptions.mdxCompileOptions,
       remarkPlugins: [remarkSlug, remarkExternalLinks].concat(
         mdxPluginOptions?.mdxCompileOptions?.remarkPlugins ?? []
diff --git a/code/addons/essentials/src/docs/preset.ts b/code/addons/essentials/src/docs/preset.ts
index 805fc5e7b3c3..1faed598e0b1 100644
--- a/code/addons/essentials/src/docs/preset.ts
+++ b/code/addons/essentials/src/docs/preset.ts
@@ -1,10 +1,13 @@
-/* eslint-disable import/export */
+import { dirname, join } from 'path';
+
+// eslint-disable-next-line import/export
 export * from '@storybook/addon-docs/dist/preset';
 
 export const mdxLoaderOptions = async (config: any) => {
   // eslint-disable-next-line no-param-reassign
-  config.mdxCompileOptions.providerImportSource = require.resolve(
-    '@storybook/addon-docs/dist/shims/mdx-react-shim'
+  config.mdxCompileOptions.providerImportSource = join(
+    dirname(require.resolve('@storybook/addon-docs/package.json')),
+    '/dist/shims/mdx-react-shim'
   );
   return config;
 };
diff --git a/code/builders/builder-vite/src/plugins/mdx-plugin.ts b/code/builders/builder-vite/src/plugins/mdx-plugin.ts
index 3bbbe2bf6019..8e4b51f16d6e 100644
--- a/code/builders/builder-vite/src/plugins/mdx-plugin.ts
+++ b/code/builders/builder-vite/src/plugins/mdx-plugin.ts
@@ -3,6 +3,7 @@ import type { Plugin } from 'vite';
 import remarkSlug from 'remark-slug';
 import remarkExternalLinks from 'remark-external-links';
 import { createFilter } from 'vite';
+import { dirname, join } from 'path';
 
 const isStorybookMdx = (id: string) => id.endsWith('stories.mdx') || id.endsWith('story.mdx');
 
@@ -33,7 +34,10 @@ export async function mdxPlugin(options: Options): Promise<Plugin> {
       const mdxLoaderOptions = await options.presets.apply('mdxLoaderOptions', {
         ...mdxPluginOptions,
         mdxCompileOptions: {
-          providerImportSource: require.resolve('@storybook/addon-docs/mdx-react-shim'),
+          providerImportSource: join(
+            dirname(require.resolve('@storybook/addon-docs/package.json')),
+            '/dist/shims/mdx-react-shim'
+          ),
           ...mdxPluginOptions?.mdxCompileOptions,
           remarkPlugins: [remarkSlug, remarkExternalLinks].concat(
             mdxPluginOptions?.mdxCompileOptions?.remarkPlugins ?? []
diff --git a/code/lib/preview/src/globals/runtime.ts b/code/lib/preview/src/globals/runtime.ts
index 6aec0edd155c..ad078c4afa8d 100644
--- a/code/lib/preview/src/globals/runtime.ts
+++ b/code/lib/preview/src/globals/runtime.ts
@@ -4,6 +4,7 @@ import * as CHANNELS from '@storybook/channels';
 import * as CLIENT_LOGGER from '@storybook/client-logger';
 import * as CORE_EVENTS from '@storybook/core-events';
 import * as PREVIEW_API from '@storybook/preview-api';
+import * as GLOBAL from '@storybook/global';
 
 // DEPRECATED, remove in 8.0
 import * as ADDONS from '@storybook/preview-api/dist/addons';
@@ -22,6 +23,7 @@ export const values: Required<Record<keyof typeof globals, any>> = {
   '@storybook/client-logger': CLIENT_LOGGER,
   '@storybook/core-events': CORE_EVENTS,
   '@storybook/preview-api': PREVIEW_API,
+  '@storybook/global': GLOBAL,
 
   // DEPRECATED, remove in 8.0
   '@storybook/addons': ADDONS,
diff --git a/code/lib/preview/src/globals/types.ts b/code/lib/preview/src/globals/types.ts
index afd90b8bf564..40ed603cd598 100644
--- a/code/lib/preview/src/globals/types.ts
+++ b/code/lib/preview/src/globals/types.ts
@@ -1,6 +1,7 @@
 // Here we map the name of a module to their NAME in the global scope.
 export const globals = {
   '@storybook/addons': '__STORYBOOK_MODULE_ADDONS__',
+  '@storybook/global': '__STORYBOOK_MODULE_GLOBAL__',
   '@storybook/channel-postmessage': '__STORYBOOK_MODULE_CHANNEL_POSTMESSAGE__', // @deprecated: remove in 8.0
   '@storybook/channel-websocket': '__STORYBOOK_MODULE_CHANNEL_WEBSOCKET__', // @deprecated: remove in 8.0
   '@storybook/channels': '__STORYBOOK_MODULE_CHANNELS__',

From 4d49fbac408d28d453e93eea1ced8f97afefede6 Mon Sep 17 00:00:00 2001
From: Shaun Lloyd <shaun@chromatic.com>
Date: Fri, 25 Aug 2023 08:24:44 -0400
Subject: [PATCH 47/48] Fix linting errors

---
 code/addons/themes/postinstall.js | 17 ++++++++---------
 1 file changed, 8 insertions(+), 9 deletions(-)

diff --git a/code/addons/themes/postinstall.js b/code/addons/themes/postinstall.js
index 153934afaa71..c84a4e88e4b4 100644
--- a/code/addons/themes/postinstall.js
+++ b/code/addons/themes/postinstall.js
@@ -1,18 +1,17 @@
 const { spawn } = require('child_process');
 
 const PACKAGE_MANAGER_TO_COMMAND = {
-    npm: 'npx',
-    yarn1: 'yarn dlx',
-    yarn2: 'yarn dlx',
-    pnpm: 'pnpm dlx',
-}
+  npm: 'npx',
+  yarn1: 'yarn dlx',
+  yarn2: 'yarn dlx',
+  pnpm: 'pnpm dlx',
+};
 
-module.exports = function (options) {
+module.exports = function postinstall(options) {
   const command = PACKAGE_MANAGER_TO_COMMAND[options.packageManager];
 
   spawn(command, ['@storybook/auto-config', 'themes'], {
-    stdio: "inherit",
+    stdio: 'inherit',
     cwd: process.cwd(),
   });
-
-}
\ No newline at end of file
+};

From abbec4e44b9f68e7388b23008c029505abe9ed67 Mon Sep 17 00:00:00 2001
From: storybook-bot <32066757+storybook-bot@users.noreply.github.com>
Date: Fri, 25 Aug 2023 14:59:57 +0000
Subject: [PATCH 48/48] Write changelog for 7.4.0-alpha.2

---
 CHANGELOG.prerelease.md | 14 ++++++++++++++
 code/package.json       |  3 ++-
 docs/versions/next.json |  2 +-
 3 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG.prerelease.md b/CHANGELOG.prerelease.md
index 039c76a34456..c0ecfbb41227 100644
--- a/CHANGELOG.prerelease.md
+++ b/CHANGELOG.prerelease.md
@@ -1,3 +1,17 @@
+## 7.4.0-alpha.2
+
+- Addon-docs: Resolve `mdx-react-shim` & `@storybook/global` correctly - [#23941](https://github.com/storybookjs/storybook/pull/23941), thanks [@ndelangen](https://github.com/ndelangen)!
+- Addons: Fix key is not a prop warning - [#23935](https://github.com/storybookjs/storybook/pull/23935), thanks [@kasperpeulen](https://github.com/kasperpeulen)!
+- CLI: Pass package manager to postinstall - [#23913](https://github.com/storybookjs/storybook/pull/23913), thanks [@Integrayshaun](https://github.com/Integrayshaun)!
+- CLI: Provide guidance for users who try to initialize Storybook on an empty dir - [#23874](https://github.com/storybookjs/storybook/pull/23874), thanks [@yannbf](https://github.com/yannbf)!
+- Logger: Fix double error messages/stack - [#23919](https://github.com/storybookjs/storybook/pull/23919), thanks [@ndelangen](https://github.com/ndelangen)!
+- Maintenance: Categorize server errors - [#23912](https://github.com/storybookjs/storybook/pull/23912), thanks [@yannbf](https://github.com/yannbf)!
+- Maintenance: Remove need for `react` as peerDependency - [#23897](https://github.com/storybookjs/storybook/pull/23897), thanks [@ndelangen](https://github.com/ndelangen)!
+- Maintenance: Remove sourcemaps generation - [#23936](https://github.com/storybookjs/storybook/pull/23936), thanks [@ndelangen](https://github.com/ndelangen)!
+- Preset: Add common preset overrides mechanism - [#23915](https://github.com/storybookjs/storybook/pull/23915), thanks [@yannbf](https://github.com/yannbf)!
+- UI: Add an experimental API for adding sidebar bottom toolbar - [#23778](https://github.com/storybookjs/storybook/pull/23778), thanks [@ndelangen](https://github.com/ndelangen)!
+- UI: Add an experimental API for adding sidebar top toolbar - [#23811](https://github.com/storybookjs/storybook/pull/23811), thanks [@ndelangen](https://github.com/ndelangen)!
+
 ## 7.4.0-alpha.1
 
 - Build: Migrate @storybook/scripts to strict-ts - [#23818](https://github.com/storybookjs/storybook/pull/23818), thanks [@stilt0n](https://github.com/stilt0n)!
diff --git a/code/package.json b/code/package.json
index e7e8f58081c5..3a3fba278a58 100644
--- a/code/package.json
+++ b/code/package.json
@@ -327,5 +327,6 @@
         "Dependency Upgrades"
       ]
     ]
-  }
+  },
+  "deferredNextVersion": "7.4.0-alpha.2"
 }
diff --git a/docs/versions/next.json b/docs/versions/next.json
index 1c94da1365b5..b44395b73796 100644
--- a/docs/versions/next.json
+++ b/docs/versions/next.json
@@ -1 +1 @@
-{"version":"7.4.0-alpha.1","info":{"plain":"- Build: Migrate @storybook/scripts to strict-ts - [#23818](https://github.com/storybookjs/storybook/pull/23818), thanks [@stilt0n](https://github.com/stilt0n)!\n- CLI: Exclude addon-styling from upgrade - [#23841](https://github.com/storybookjs/storybook/pull/23841), thanks [@Integrayshaun](https://github.com/Integrayshaun)!\n- Core: Add error categorization framework - [#23653](https://github.com/storybookjs/storybook/pull/23653), thanks [@yannbf](https://github.com/yannbf)!\n- Core: Fix error thrown if `docs.defaultName` is unset - [#23893](https://github.com/storybookjs/storybook/pull/23893), thanks [@stilt0n](https://github.com/stilt0n)!\n- Core: Fix race-condition relating to `addons.setConfig` - [#23802](https://github.com/storybookjs/storybook/pull/23802), thanks [@ndelangen](https://github.com/ndelangen)!\n- Maintenance: Move filtering of sidebar into the state - [#23911](https://github.com/storybookjs/storybook/pull/23911), thanks [@ndelangen](https://github.com/ndelangen)!\n- Maintenance: Revert \"WebpackBuilder: Remove need for `react` as peerDependency\" - [#23882](https://github.com/storybookjs/storybook/pull/23882), thanks [@vanessayuenn](https://github.com/vanessayuenn)!\n- Manager API: Fix `api.getAddonState`default value - [#23804](https://github.com/storybookjs/storybook/pull/23804), thanks [@sookmax](https://github.com/sookmax)!\n- Publish: Don't distribute src files or unnecessary template files - [#23853](https://github.com/storybookjs/storybook/pull/23853), thanks [@shilman](https://github.com/shilman)!\n- UI: Add an experimental API for adding sidebar filter functions at runtime - [#23722](https://github.com/storybookjs/storybook/pull/23722), thanks [@ndelangen](https://github.com/ndelangen)!\n- UI: Removal of experimental components - [#23907](https://github.com/storybookjs/storybook/pull/23907), thanks [@ndelangen](https://github.com/ndelangen)!\n- Vue3: Add support for  Global Apps install - [#23772](https://github.com/storybookjs/storybook/pull/23772), thanks [@chakAs3](https://github.com/chakAs3)!\n- Vue3: Use slot value directly if it's a string in source decorator - [#23784](https://github.com/storybookjs/storybook/pull/23784), thanks [@nasvillanueva](https://github.com/nasvillanueva)!"}}
+{"version":"7.4.0-alpha.2","info":{"plain":"- Addon-docs: Resolve `mdx-react-shim` & `@storybook/global` correctly - [#23941](https://github.com/storybookjs/storybook/pull/23941), thanks [@ndelangen](https://github.com/ndelangen)!\n- Addons: Fix key is not a prop warning - [#23935](https://github.com/storybookjs/storybook/pull/23935), thanks [@kasperpeulen](https://github.com/kasperpeulen)!\n- CLI: Pass package manager to postinstall - [#23913](https://github.com/storybookjs/storybook/pull/23913), thanks [@Integrayshaun](https://github.com/Integrayshaun)!\n- CLI: Provide guidance for users who try to initialize Storybook on an empty dir - [#23874](https://github.com/storybookjs/storybook/pull/23874), thanks [@yannbf](https://github.com/yannbf)!\n- Logger: Fix double error messages/stack - [#23919](https://github.com/storybookjs/storybook/pull/23919), thanks [@ndelangen](https://github.com/ndelangen)!\n- Maintenance: Categorize server errors - [#23912](https://github.com/storybookjs/storybook/pull/23912), thanks [@yannbf](https://github.com/yannbf)!\n- Maintenance: Remove need for `react` as peerDependency - [#23897](https://github.com/storybookjs/storybook/pull/23897), thanks [@ndelangen](https://github.com/ndelangen)!\n- Maintenance: Remove sourcemaps generation - [#23936](https://github.com/storybookjs/storybook/pull/23936), thanks [@ndelangen](https://github.com/ndelangen)!\n- Preset: Add common preset overrides mechanism - [#23915](https://github.com/storybookjs/storybook/pull/23915), thanks [@yannbf](https://github.com/yannbf)!\n- UI: Add an experimental API for adding sidebar bottom toolbar - [#23778](https://github.com/storybookjs/storybook/pull/23778), thanks [@ndelangen](https://github.com/ndelangen)!\n- UI: Add an experimental API for adding sidebar top toolbar - [#23811](https://github.com/storybookjs/storybook/pull/23811), thanks [@ndelangen](https://github.com/ndelangen)!"}}