docs: migrate Storybook to v9 (#7466)

This commit also includes:

- Reordering the "Charts" section to appear after the main components.
- ToC on large screens (fixed position) only shows scrollbar when
required

Author: Lukas742

.gitignore

@@ -29,3 +29,5 @@ packages/*/src/generated/
 cypress/downloads
 
 .nx
+
+debug-storybook.log

.storybook/components/ArgTypesWithNote.tsx

@@ -1,5 +1,5 @@
 import { DomRefTable } from '@sb/components/DomRefTable.js';
-import { ArgTypes } from '@storybook/blocks';
+import { ArgTypes, type Controls } from '@storybook/addon-docs/blocks';
 import MessageStripDesign from '@ui5/webcomponents/dist/types/MessageStripDesign.js';
 import { MessageStrip } from '@ui5/webcomponents-react';
 import type { ComponentProps, ReactNode } from 'react';
@@ -17,16 +17,20 @@ interface ArgTypesWithNotePropTypes {
    * If `true` all headings are rendered as `Heading`s instead of `Subheading`s.
    */
   isHeading?: boolean;
+  /**
+   * Story meta module.
+   */
+  metaOf: ComponentProps<typeof Controls>['of'];
 }
 
 export function ArgTypesWithNote(props: ComponentProps<typeof ArgTypes> & ArgTypesWithNotePropTypes) {
-  const { hideHTMLPropsNote, noteText, isHeading, ...rest } = props;
+  const { hideHTMLPropsNote, noteText, isHeading, metaOf, ...rest } = props;
 
   if (hideHTMLPropsNote) {
     return (
       <>
         <ArgTypes {...rest} />
-        <DomRefTable of={rest.of} isSubheading={!isHeading} />
+        <DomRefTable of={rest.of} metaOf={metaOf} isSubheading={!isHeading} />
       </>
     );
   }
@@ -36,7 +40,7 @@ export function ArgTypesWithNote(props: ComponentProps<typeof ArgTypes> & ArgTyp
         {noteText ?? 'This component supports all HTML attributes.'}
       </MessageStrip>
       <ArgTypes {...rest} />
-      <DomRefTable of={rest.of} isSubheading={!isHeading} />
+      <DomRefTable of={rest.of} metaOf={metaOf} isSubheading={!isHeading} />
     </div>
   );
 }

.storybook/components/CommandsAndQueries.tsx

@@ -1,4 +1,4 @@
-import { Heading, Markdown } from '@storybook/blocks';
+import { Heading, Markdown } from '@storybook/addon-docs/blocks';
 import { Tag as WCRTag } from '@ui5/webcomponents-react';
 import dedent from 'dedent';
 import { Fragment } from 'react';

.storybook/components/ControlsWithNote.tsx

@@ -1,4 +1,4 @@
-import { Controls } from '@storybook/blocks';
+import { Controls } from '@storybook/addon-docs/blocks';
 import MessageStripDesign from '@ui5/webcomponents/dist/types/MessageStripDesign.js';
 import { MessageStrip } from '@ui5/webcomponents-react';
 import type { ComponentProps, ReactNode } from 'react';
@@ -26,7 +26,7 @@ export function ControlsWithNote(props: ComponentProps<typeof Controls> & Contro
         </MessageStrip>
       )}
       <Controls {...rest} />
-      <DomRefTable />
+      <DomRefTable of={props.of} />
     </div>
   );
 }

.storybook/components/DocsHeader.tsx

@@ -1,4 +1,5 @@
-import { Description, DocsContext, Subtitle, Title } from '@storybook/addon-docs';
+import type { Controls } from '@storybook/addon-docs/blocks';
+import { Description, Subtitle, Title, useOf } from '@storybook/addon-docs/blocks';
 import ButtonDesign from '@ui5/webcomponents/dist/types/ButtonDesign.js';
 import MessageStripDesign from '@ui5/webcomponents/dist/types/MessageStripDesign.js';
 import copyIcon from '@ui5/webcomponents-icons/dist/copy.js';
@@ -13,21 +14,14 @@ import {
   ThemeProvider,
 } from '@ui5/webcomponents-react';
 import { clsx } from 'clsx';
-import { useContext } from 'react';
+import type { ComponentProps } from 'react';
 import { useGetSubComponentsOfModule } from '../utils';
 import classes from './DocsHeader.module.css';
 import { GitHubLogo } from './GitHub-Mark';
 import { Import } from './Import';
 import { TableOfContent } from './TableOfContent';
 
-const Links = () => {
-  const docsContext = useContext(DocsContext);
-  const isChart = docsContext.componentStories().at(0).id.startsWith('charts-');
-
-  // const filePath = docsContext.parameters.fileName.replace(/^\.\//, '');
-  // const folderPath = filePath.substr(0, filePath.lastIndexOf('/'));
-
-  // const githubUrl = `https://github.com/SAP/ui5-webcomponents-react/tree/main/${folderPath}`;
+const Links = ({ isChart }: { isChart?: boolean }) => {
   const githubUrl = `https://github.com/SAP/ui5-webcomponents-react`;
 
   const packageName = `@ui5/webcomponents-react${isChart ? '-charts' : ''}`;
@@ -50,14 +44,15 @@ interface InfoTableProps {
   mergeSubComponents?: boolean;
   isChart?: boolean;
   experimental?: boolean;
+  of: ComponentProps<typeof Controls>['of'];
 }
 
-export const InfoTable = ({ since, subComponents, mergeSubComponents }: InfoTableProps) => {
-  const context = useContext(DocsContext);
-  const groups = context.componentStories().at(0).kind.split('/');
-  const moduleName = groups[groups.length - 1].replace('(experimental)', '').trim();
+export const InfoTable = ({ of, since, subComponents, mergeSubComponents }: InfoTableProps) => {
+  const context = useOf<'meta'>(of);
+  const { csfFile, preparedMeta } = context;
+  const moduleName = csfFile.meta.component.displayName;
 
-  const wcSubComponents = useGetSubComponentsOfModule(moduleName.replace('V2', ''));
+  const wcSubComponents = useGetSubComponentsOfModule(moduleName.replace('V2', ''), preparedMeta.tags);
   const subComps = mergeSubComponents
     ? [...(subComponents ?? []), ...(wcSubComponents ?? [])]
     : (subComponents ?? wcSubComponents);
@@ -81,7 +76,7 @@ export const InfoTable = ({ since, subComponents, mergeSubComponents }: InfoTabl
             <Label>Usage</Label>
           </th>
           <td data-import-cell={supportsClipboardApi}>
-            <Import />
+            <Import moduleNames={[moduleName]} componentId={preparedMeta.componentId} />
             {supportsClipboardApi && (
               <Button
                 design={ButtonDesign.Transparent}
@@ -110,7 +105,7 @@ export const InfoTable = ({ since, subComponents, mergeSubComponents }: InfoTabl
               <Label>Subcomponents</Label>
             </th>
             <td data-import-cell={supportsClipboardApi}>
-              <Import moduleNames={subComps} />
+              <Import moduleNames={subComps} componentId={preparedMeta.componentId} />
               {supportsClipboardApi && (
                 <Button
                   design={ButtonDesign.Transparent}
@@ -129,17 +124,17 @@ export const InfoTable = ({ since, subComponents, mergeSubComponents }: InfoTabl
   );
 };
 
-export const DocsHeader = ({ since, subComponents, mergeSubComponents, isChart, experimental }: InfoTableProps) => {
+export const DocsHeader = ({ of, since, subComponents, mergeSubComponents, isChart, experimental }: InfoTableProps) => {
   return (
     <ThemeProvider>
       <FlexBox alignItems={FlexBoxAlignItems.Center} className={classes.titleRow}>
         <Title />
         {experimental && <Label className={classes.experimentalLabel}>experimental</Label>}
         <span style={{ flexGrow: 1 }} />
-        <Links />
+        <Links isChart={isChart} />
       </FlexBox>
       <Subtitle />
-      <InfoTable since={since} subComponents={subComponents} mergeSubComponents={mergeSubComponents} />
+      <InfoTable of={of} since={since} subComponents={subComponents} mergeSubComponents={mergeSubComponents} />
       <TableOfContent />
       <Description />
       {isChart && (

.storybook/components/DomRefTable.tsx

@@ -1,12 +1,12 @@
-import type { ArgTypes } from '@storybook/blocks';
-import { DocsContext, Heading, Subheading } from '@storybook/blocks';
+import type { Controls } from '@storybook/addon-docs/blocks';
+import { Heading, Subheading, useOf } from '@storybook/addon-docs/blocks';
 import TagDesign from '@ui5/webcomponents/dist/types/TagDesign.js';
 import { Tag, Link, MessageStrip, Popover } from '@ui5/webcomponents-react';
 import type * as CEM from '@ui5/webcomponents-tools/lib/cem/types';
 import type { ComponentProps, ReactNode } from 'react';
-import { Fragment, useContext, useRef } from 'react';
+import { Fragment, useRef } from 'react';
 import { createPortal } from 'react-dom';
-import { useGetCem } from '../utils';
+import { useGetCem } from '../utils.js';
 import classes from './DomRefTable.module.css';
 
 export function CodeBlock(props: { children: ReactNode }) {
@@ -51,19 +51,23 @@ function Name(props: CEM.ClassMember) {
 export function DomRefTable({
   of,
   isSubheading,
+  metaOf,
 }: {
-  of?: ComponentProps<typeof ArgTypes>['of'];
+  of: ComponentProps<typeof Controls>['of'];
   isSubheading?: boolean;
+  metaOf?: ComponentProps<typeof Controls>['of'];
 }) {
-  const docsContext = useContext(DocsContext);
-  const storyTags: string[] = docsContext.attachedCSFFile?.meta?.tags;
+  const resolvedOf = useOf<'story' | 'component'>(of);
+  const resolvedMetaOf = useOf<'meta'>(metaOf);
+
+  const { story: storyContext, component: componentContext } = resolvedOf;
+  const storyTags: string[] = storyContext?.tags ?? resolvedMetaOf?.preparedMeta?.tags;
   const cemModuleName = storyTags?.find((tag) => tag.startsWith('cem-module:'));
-  const componentName = of?.displayName ?? docsContext.componentStories().at(0)?.component?.displayName;
+  const componentName = of?.displayName ?? storyContext.component.displayName;
   const popoverRef = useRef(null);
 
-  const knownAttributes = new Set(Object.keys(of?.__docgenInfo?.props ?? docsContext.primaryStory?.argTypes ?? {}));
-  const cem = useGetCem();
-
+  const knownAttributes = new Set(Object.keys(componentContext?.__docgenInfo?.props ?? storyContext.argTypes));
+  const cem = useGetCem(storyTags);
   const moduleName = cemModuleName ? cemModuleName.split(':')[1] : componentName;
 
   const componentMembers =

.storybook/components/Import.tsx

@@ -1,5 +1,4 @@
-import { DocsContext } from '@storybook/addon-docs';
-import { Fragment, useContext } from 'react';
+import { Fragment } from 'react';
 
 interface ImportStatementPropTypes {
   /**
@@ -119,16 +118,14 @@ interface ImportProps {
   /**
    * Names of module/component (e.g. "Button")
    */
-  moduleNames?: ImportStatementPropTypes['moduleNames'];
+  moduleNames: ImportStatementPropTypes['moduleNames'];
+  componentId: string;
 }
 
 export const Import = (props: ImportProps) => {
-  const context = useContext(DocsContext);
-  const isChart = context.componentStories().at(0).id.startsWith('charts-');
-  const isCompat = context.componentStories().at(0).id.startsWith('legacy-');
-  const groups = context.componentStories().at(0).kind.split('/');
-  const module = groups[groups.length - 1].replace('(experimental)', '').trim();
-  const moduleNames = props.moduleNames ?? [module];
+  const { componentId, moduleNames } = props;
+  const isChart = componentId.startsWith('charts-');
+  const isCompat = componentId.startsWith('legacy-');
 
   return (
     <ImportStatement

.storybook/components/TableOfContent.tsx

@@ -1,14 +1,32 @@
-import { useEffect } from 'react';
+import { useCallback, useEffect } from 'react';
 import * as tocbot from 'tocbot';
 import classes from './ToC.module.css';
 
 export function TableOfContent({
   headingSelector = 'h2:not(.noAnchor), h3:not(.noAnchor), h4:not(.noAnchor)',
   onlyDisplaySideNav = false,
+  tocOverflowHeight = 1080,
 }: {
   headingSelector?: string;
   onlyDisplaySideNav?: boolean;
+  tocOverflowHeight?: number;
 }) {
+  const refCallback = useCallback(
+    (node: HTMLDivElement) => {
+      if (node) {
+        if (
+          window.matchMedia('(min-width:1330px)').matches &&
+          window.matchMedia(`(min-height:${tocOverflowHeight}px)`).matches
+        ) {
+          node.style.overflowY = 'hidden';
+        } else {
+          node.style.overflowY = undefined;
+        }
+      }
+    },
+    [tocOverflowHeight],
+  );
+
   useEffect(() => {
     tocbot.init({
       tocSelector: '.js-toc',
@@ -25,13 +43,12 @@ export function TableOfContent({
       tocbot.destroy();
     };
   }, [headingSelector]);
-
   return (
     <>
       <h3 className={`${classes.header} noAnchor`} data-show-small={!onlyDisplaySideNav}>
         Contents
       </h3>
-      <div className={classes.fixedContainer} data-show-small={!onlyDisplaySideNav}>
+      <div ref={refCallback} className={classes.fixedContainer} data-show-small={!onlyDisplaySideNav}>
         <div className={`js-toc ${classes.toc}`} id="toc-container" />
       </div>
     </>

.storybook/components/ToC.module.css

@@ -21,7 +21,6 @@
 .toc :global(.toc-link) {
   font-family: var(--sapFontFamily) !important;
   font-size: var(--sapFontSize) !important;
-  -webkit-font-smoothing: auto;
   line-height: normal;
 }
 
@@ -75,13 +74,14 @@
   .fixedContainer {
     width: 200px;
     position: fixed;
-    top: 75px;
+    top: 38px;
     right: 6px;
     overflow-x: hidden;
     overflow-y: auto;
   }
 
   .toc :global(.toc-list) {
+    margin-block-start: 0;
     padding-inline-start: 1rem;
   }
 
@@ -93,13 +93,13 @@
     width: 4px;
   }
 
-  .toc :global(.toc-list-item) {
-    /*overflow: hidden;*/
-    /*text-overflow: ellipsis;*/
-    /*white-space: nowrap;*/
-  }
-
   .toc :global(.is-active-link)::before {
     background-color: #0a6ed1;
   }
 }
+
+@media (min-width: 1650px) {
+  .fixedContainer {
+    width: 250px;
+  }
+}

.storybook/components/VersionSwitch.tsx

@@ -1,10 +1,10 @@
 /* eslint-disable react-hooks/rules-of-hooks */
 
-import { IconButton } from '@storybook/components';
-import { addons, types } from '@storybook/manager-api';
 import '@ui5/webcomponents/dist/Menu.js';
 import '@ui5/webcomponents/dist/MenuItem.js';
 import * as React from 'react';
+import { IconButton } from 'storybook/internal/components';
+import { addons, types } from 'storybook/manager-api';
 
 const ADDON_ID = 'version-switch';
 const TOOL_ID = `${ADDON_ID}/toolbar`;