Bump Storybook to v9

packages/docs/.npmrc

@@ -0,0 +1 @@
+use-node-version=20.19.0

packages/docs/.storybook/addon-container/Tool.tsx

@@ -0,0 +1,41 @@
+import { BoxIcon } from "@storybook/icons"
+// biome-ignore lint/correctness/noUnusedImports: React is used in the render method
+import React, { useCallback, useEffect } from "react"
+import { IconButton } from "storybook/internal/components"
+import { useGlobals, useStorybookApi } from "storybook/manager-api"
+import { ADDON_ID, ADDON_NAME, PARAM_KEY, TOOL_ID } from "./constants"
+
+export const Tool = () => {
+  const [globals, updateGlobals] = useGlobals()
+  const active = globals[PARAM_KEY] === true || globals[PARAM_KEY] === "true"
+  const api = useStorybookApi()
+
+  const toggleContainer = useCallback(
+    () =>
+      updateGlobals({
+        [PARAM_KEY]: !active,
+      }),
+    [updateGlobals, active],
+  )
+
+  useEffect(() => {
+    api.setAddonShortcut(ADDON_ID, {
+      label: "Toggle Container [C]",
+      defaultShortcut: ["C"],
+      actionName: "container",
+      showInMenu: false,
+      action: toggleContainer,
+    })
+  }, [toggleContainer, api])
+
+  return (
+    <IconButton
+      key={TOOL_ID}
+      active={active}
+      title={ADDON_NAME}
+      onClick={toggleContainer}
+    >
+      <BoxIcon />
+    </IconButton>
+  )
+}

packages/docs/.storybook/addon-container/constants.ts

@@ -0,0 +1,4 @@
+export const ADDON_ID = "addon-container"
+export const ADDON_NAME = "Enable <Container />"
+export const TOOL_ID = `${ADDON_ID}/tool`
+export const PARAM_KEY = "containerEnabled"

packages/docs/.storybook/addon-container/manager.tsx

@@ -0,0 +1,14 @@
+// biome-ignore lint/correctness/noUnusedImports: React is used in the render method
+import React from "react"
+import { addons, types } from "storybook/manager-api"
+import { ADDON_ID, ADDON_NAME } from "./constants"
+import { Tool } from "./Tool"
+
+addons.register(ADDON_ID, () => {
+  addons.add(ADDON_ID, {
+    title: ADDON_NAME,
+    type: types.TOOL,
+    match: ({ viewMode }) => !!viewMode?.match(/^(story|docs)$/),
+    render: () => <Tool />,
+  })
+})

packages/docs/.storybook/addon-gh-repository/Tool.tsx

@@ -1,14 +1,16 @@
-import { A, IconButton, Icons, Separator } from '@storybook/components'
-import React from 'react'
-import { ADDON_NAME, REPOSITORY_URL, TOOL_ID } from './constants'
+import { GithubIcon } from "@storybook/icons"
+// biome-ignore lint/correctness/noUnusedImports: React is used in the render method
+import React from "react"
+import { A, IconButton, Separator } from "storybook/internal/components"
+import { ADDON_NAME, REPOSITORY_URL, TOOL_ID } from "./constants"
 
 export const Tool = () => {
   return (
     <>
       <Separator />
       <IconButton key={TOOL_ID} active={false} title={ADDON_NAME}>
-        <A target='_blank' href={REPOSITORY_URL}>
-          <Icons icon='github' />
+        <A target="_blank" href={REPOSITORY_URL}>
+          <GithubIcon />
           &nbsp;&nbsp;repository
         </A>
       </IconButton>

packages/docs/.storybook/addon-gh-repository/manager.tsx

@@ -1,13 +1,14 @@
-import { addons, types } from '@storybook/addons'
-import React from 'react'
-import { Tool } from './Tool'
-import { ADDON_ID, ADDON_NAME } from './constants'
+// biome-ignore lint/correctness/noUnusedImports: React is used in the render method
+import React from "react"
+import { addons, types } from "storybook/manager-api"
+import { ADDON_ID, ADDON_NAME } from "./constants"
+import { Tool } from "./Tool"
 
 addons.register(ADDON_ID, () => {
   addons.add(ADDON_ID, {
     title: ADDON_NAME,
     type: types.TOOL,
-    match: ({ viewMode }) => !!(viewMode && viewMode.match(/^(story|docs)$/)),
+    match: ({ viewMode }) => !!viewMode?.match(/^(story|docs)$/),
     render: () => <Tool />,
   })
 })

packages/docs/.storybook/addon-version/Tool.tsx

@@ -0,0 +1,22 @@
+// biome-ignore lint/correctness/noUnusedImports: React is used in the render method
+import React from "react"
+import { IconButton, Separator } from "storybook/internal/components"
+import { ADDON_NAME, LINK_URL, TOOL_ID, VERSION } from "./constants"
+
+export const Tool = () => {
+  return (
+    <>
+      <Separator />
+      <IconButton
+        key={TOOL_ID}
+        title={ADDON_NAME}
+        active={false}
+        onClick={() => {
+          window.open(LINK_URL, "_blank")
+        }}
+      >
+        v{VERSION}
+      </IconButton>
+    </>
+  )
+}

packages/docs/.storybook/addon-version/constants.ts

@@ -0,0 +1,8 @@
+export const ADDON_ID = "addon-version"
+export const ADDON_NAME = "Latest version"
+export const TOOL_ID = `${ADDON_ID}/tool`
+export const LINK_URL = "https://github.com/commercelayer/app-elements/releases"
+
+import lernaJson from "../../../../lerna.json" with { type: "json" }
+
+export const VERSION = lernaJson.version

packages/docs/.storybook/addon-version/manager.tsx

@@ -0,0 +1,14 @@
+// biome-ignore lint/correctness/noUnusedImports: React is used in the render method
+import React from "react"
+import { addons, types } from "storybook/manager-api"
+import { ADDON_ID, ADDON_NAME } from "./constants"
+import { Tool } from "./Tool"
+
+addons.register(ADDON_ID, () => {
+  addons.add(ADDON_ID, {
+    title: ADDON_NAME,
+    type: types.TOOL,
+    match: ({ viewMode }) => !!viewMode?.match(/^(story|docs)$/),
+    render: () => <Tool />,
+  })
+})

packages/docs/.storybook/commercelayer.theme.ts

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

packages/docs/.storybook/main.ts

@@ -1,5 +1,6 @@
-import { type StorybookConfig } from '@storybook/react-vite'
-import { resolve } from 'path'
+import { dirname, join, resolve } from "node:path"
+import type { StorybookConfig } from '@storybook/react-vite'
+import remarkGfm from "remark-gfm"
 import { mergeConfig, type UserConfig } from 'vite'
 import tsconfigPaths from 'vite-tsconfig-paths'
 
@@ -19,27 +20,39 @@ const storybookConfig: StorybookConfig = {
   async viteFinal(config) {
     return mergeConfig(config, viteOverrides)
   },
-  stories: ['../stories/**/*.mdx', '../stories/**/*.stories.@(js|jsx|ts|tsx)'],
+  staticDirs: ["../public"],
+  stories: [
+    '../stories/**/*.mdx',
+    '../stories/**/*.stories.@(js|jsx|ts|tsx)'
+  ],
   addons: [
-    '@storybook/addon-links',
-    '@storybook/addon-essentials',
-    '@storybook/addon-interactions',
-    '@storybook/addon-mdx-gfm'
+    getAbsolutePath("@storybook/addon-links"),
+    {
+      name: getAbsolutePath("@storybook/addon-docs"),
+      options: {
+        mdxPluginOptions: {
+          mdxCompileOptions: {
+            remarkPlugins: [remarkGfm],
+          },
+        },
+      },
+    },
+    getAbsolutePath("@storybook/addon-styling-webpack"),
   ],
   // @ts-expect-error This 'managerEntries' exists.
-  managerEntries: [require.resolve('./addon-gh-repository/manager.tsx')],
+  managerEntries: [
+    require.resolve("./addon-container/manager.tsx"),
+    require.resolve("./addon-version/manager.tsx"),
+    require.resolve("./addon-gh-repository/manager.tsx"),
+  ],
   framework: {
-    name: '@storybook/react-vite',
+    name: getAbsolutePath("@storybook/react-vite"),
     options: {}
   },
   core: {
     disableTelemetry: true
   },
-  features: {
-    storyStoreV7: true
-  },
   docs: {
-    autodocs: true,
     docsMode: true
   },
   typescript: {
@@ -63,4 +76,8 @@ const storybookConfig: StorybookConfig = {
   }
 }
 
-module.exports = storybookConfig
+export default storybookConfig
+
+function getAbsolutePath(value: string): any {
+  return dirname(require.resolve(join(value, "package.json")))
+}

packages/docs/.storybook/manager-head.html

@@ -1,3 +1,3 @@
 <meta name="description" content="Official React Components for Commerce Layer applications." key="desc" />
 <link rel="icon" type="image/png" href="https://data.commercelayer.app/assets/images/favicons/favicon-32x32.png" />
-<link rel="stylesheet" href="https://data.commercelayer.app/assets/css/storybook-manager.css" />
+<link rel="stylesheet" href="https://data.commercelayer.app/assets/css/storybook-manager-v8.3.css" />

packages/docs/.storybook/manager.ts

@@ -1,4 +1,4 @@
-import { addons } from '@storybook/manager-api'
+import { addons } from 'storybook/manager-api'
 import commercelayerTheme from './commercelayer.theme'
 
 addons.setConfig({

packages/docs/.storybook/preview-head.html

@@ -3,8 +3,11 @@
   href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap"
   rel="stylesheet"
 />
+<link 
+  href="https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,500;1,500&display=swap" 
+  rel="stylesheet"
+/>
 <link rel="stylesheet" href="storybook-preview.css" />
-<script src="https://cdn.tailwindcss.com"></script>
 <script>
   window.global = window;
 </script>