feat(storybook): upgrade to v9

- change the way we hide stories to the documented method as per Storybook docs

Author: nineteen88

.storybook/main.ts

@@ -40,8 +40,6 @@ const config: StorybookConfig = {
 
   addons: [
     "@storybook/addon-a11y",
-    "@storybook/addon-actions",
-    "@storybook/addon-controls",
     {
       name: "@storybook/addon-docs",
       options: {
@@ -52,11 +50,7 @@ const config: StorybookConfig = {
         },
       },
     },
-    "@storybook/addon-interactions",
     "storybook-addon-pseudo-states",
-    "@storybook/addon-essentials",
-    "@storybook/addon-toolbars",
-    "@storybook/addon-viewport",
     "@chromatic-com/storybook",
   ],
 

.storybook/manager.ts

@@ -1,8 +1,8 @@
-import { addons, types } from "@storybook/manager-api";
+import { addons, types } from "storybook/manager-api";
 import sageTheme from "./sage-docs-theme";
 import { ADDON_ID, TOOL_ID } from "./version-picker/constants";
 import { VersionPicker } from "./version-picker";
-import { API_PreparedIndexEntry, API_StatusObject } from "@storybook/types";
+import { API_PreparedIndexEntry } from "storybook/internal/types";
 
 const useVersionPicker = process.env.USE_VERSION_PICKER === "true";
 
@@ -20,15 +20,4 @@ if (useVersionPicker) {
 addons.setConfig({
   theme: sageTheme,
   panelPosition: "bottom",
-  sidebar: {
-    filters: {
-      patterns: (
-        item: API_PreparedIndexEntry & {
-          status: Record<string, API_StatusObject | null>;
-        },
-      ): boolean => {
-        return !(item.tags ?? []).includes("hideInSidebar");
-      },
-    },
-  },
 });

.storybook/preview.ts

@@ -1,5 +1,5 @@
-import { Preview } from "@storybook/react";
-import { configure } from "@storybook/test";
+import { Preview } from "@storybook/react-vite";
+import { configure } from "storybook/test";
 
 import "../src/style/fonts.css";
 

.storybook/sage-docs-theme.ts

@@ -1,4 +1,4 @@
-import { create } from "@storybook/theming/create";
+import { create } from "storybook/theming/create";
 
 export default create({
   base: "light",

.storybook/sage-storybook-theme.ts

@@ -1,4 +1,4 @@
-import { create } from "@storybook/theming/create";
+import { create } from "storybook/theming/create";
 
 export default create({
   base: "light",

.storybook/utils/partial-action.ts

@@ -1,4 +1,4 @@
-import { action } from "@storybook/addon-actions";
+import { action } from "storybook/actions";
 import React from "react";
 
 function partialAction(actionName: string) {
@@ -7,7 +7,7 @@ function partialAction(actionName: string) {
       typeof eventObj === "string"
         ? { view: undefined }
         : { ...eventObj, view: undefined },
-      ...args
+      ...args,
     );
   };
 }

.storybook/utils/styled-system-props.ts

@@ -1,4 +1,4 @@
-import { ArgTypes } from "@storybook/react";
+import { ArgTypes } from "@storybook/react-vite";
 import {
   SpaceProps,
   LayoutProps,
@@ -77,7 +77,7 @@ type Props = {
 };
 
 const generateStyledSystemMarginProps = (
-  defaults: StyledSystemDefaults
+  defaults: StyledSystemDefaults,
 ): ArgTypes[] => {
   return [
     {
@@ -843,7 +843,7 @@ const generateStyledSystemGridProps = (defaults: StyledSystemDefaults) => {
 };
 
 const generateStyledSystemBackgroundProps = (
-  defaults: StyledSystemDefaults
+  defaults: StyledSystemDefaults,
 ) => {
   return [
     {
@@ -994,13 +994,13 @@ const generateStyledSystemPositionProps = (defaults: StyledSystemDefaults) => {
 
 const filterProps = (
   props: Record<string, unknown>[],
-  excludes: string[] = []
+  excludes: string[] = [],
 ) => props.filter((prop) => !excludes.includes(Object.keys(prop)[0]));
 
 const generateStyledSystemProps = (
   props: StyledSystemProps,
   defaults?: StyledSystemDefaults,
-  excludes?: string[]
+  excludes?: string[],
 ): ArgTypes<StyledSystemProps> => {
   const {
     spacing,
@@ -1019,67 +1019,76 @@ const generateStyledSystemProps = (
   if (spacing) {
     Object.assign(
       result,
-      ...filterProps(generateStyledSystemSpacingProps(defaults || {}), excludes)
+      ...filterProps(
+        generateStyledSystemSpacingProps(defaults || {}),
+        excludes,
+      ),
     );
   }
   if (margin) {
     Object.assign(
       result,
-      ...filterProps(generateStyledSystemMarginProps(defaults || {}), excludes)
+      ...filterProps(generateStyledSystemMarginProps(defaults || {}), excludes),
     );
   }
   if (padding) {
     Object.assign(
       result,
-      ...filterProps(generateStyledSystemPaddingProps(defaults || {}), excludes)
+      ...filterProps(
+        generateStyledSystemPaddingProps(defaults || {}),
+        excludes,
+      ),
     );
   }
   if (color) {
     Object.assign(
       result,
-      ...filterProps(generateStyledSystemColorProps(defaults || {}), excludes)
+      ...filterProps(generateStyledSystemColorProps(defaults || {}), excludes),
     );
   }
   if (layout) {
     Object.assign(
       result,
-      ...filterProps(generateStyledSystemLayoutProps(defaults || {}), excludes)
+      ...filterProps(generateStyledSystemLayoutProps(defaults || {}), excludes),
     );
   }
   if (width) {
     Object.assign(
       result,
-      ...filterProps(generateStyledSystemWidthProps(defaults || {}), excludes)
+      ...filterProps(generateStyledSystemWidthProps(defaults || {}), excludes),
     );
   }
   if (flexBox) {
     Object.assign(
       result,
-      ...filterProps(generateStyledSystemFlexBoxProps(defaults || {}), excludes)
+      ...filterProps(
+        generateStyledSystemFlexBoxProps(defaults || {}),
+        excludes,
+      ),
     );
   }
   if (grid) {
     Object.assign(
       result,
-      ...filterProps(generateStyledSystemGridProps(defaults || {}), excludes)
+      ...filterProps(generateStyledSystemGridProps(defaults || {}), excludes),
     );
   }
   if (background) {
     Object.assign(
       result,
       ...filterProps(
         generateStyledSystemBackgroundProps(defaults || {}),
-        excludes
-      )
+        excludes,
+      ),
     );
   }
   if (position) {
     Object.assign(
       result,
       ...filterProps(
         generateStyledSystemPositionProps(defaults || {}),
-        excludes
-      )
+        excludes,
+      ),
     );
   }
 

.storybook/version-picker/index.tsx

@@ -4,15 +4,15 @@ import {
   WithTooltip,
   TooltipLinkList,
   TooltipLinkListLink,
-} from "@storybook/components";
+} from "storybook/internal/components";
 import compareBuild from "semver/functions/compare-build";
 
 import { TOOL_ID } from "./constants";
 import fetchData from "./fetch-data";
 
 const getDisplayedItems = (
   versions: Record<string, string>,
-  onClick: TooltipLinkListLink["onClick"]
+  onClick: TooltipLinkListLink["onClick"],
 ) => {
   let formattedVersions: TooltipLinkListLink[] = [];
 
@@ -36,7 +36,7 @@ const getDisplayedItems = (
 
 export const VersionPicker = () => {
   const [versions, setVersions] = useState<Record<string, string> | undefined>(
-    undefined
+    undefined,
   );
   const [currentVersion, setCurrentVersion] = useState("Latest");
 

.storybook/with-global-styles.tsx

@@ -1,4 +1,4 @@
-import { Decorator } from "@storybook/react";
+import { Decorator } from "@storybook/react-vite";
 import React from "react";
 import GlobalStyle from "../src/style/global-style";
 

.storybook/with-locale-selector.tsx

@@ -1,12 +1,12 @@
 import React from "react";
-import { Decorator } from "@storybook/react";
+import { Decorator } from "@storybook/react-vite";
 import I18nProvider from "../src/components/i18n-provider";
 import { enGB, deDE, enCA, enUS, esES, frCA, frFR } from "../src/locales";
 
 const withLocaleSelector: Decorator = (Story, context) => {
   const selectedLocale =
     [enGB, deDE, enCA, enUS, esES, frCA, frFR].find(
-      ({ locale }) => locale?.() === context.globals.locale
+      ({ locale }) => locale?.() === context.globals.locale,
     ) || enGB;
 
   return (