docs: update to storybook 7 beta (#4155)

Author: MarcusNotheis

.eslintrc.yml

@@ -49,6 +49,7 @@ overrides:
     parserOptions:
       project:
         - './tsconfig.spec.json'
+        - './tsconfig.node.json'
         - './packages/*/tsconfig.json'
     plugins:
       - '@typescript-eslint'

.github/workflows/chromatic.yml

@@ -31,3 +31,4 @@ jobs:
           skip: 'dependabot/**'
         env:
           STORYBOOK_ENV: chromatic
+          NODE_OPTIONS: '--max-old-space-size=4096'

.storybook/components/ControlsWithNote.tsx

@@ -0,0 +1,41 @@
+import { Controls } from '@storybook/blocks';
+import { MessageStrip, MessageStripDesign } from '@ui5/webcomponents-react';
+import React, { ComponentProps, ReactNode, useEffect, useRef } from 'react';
+import { createUseStyles } from 'react-jss';
+
+const useStyles = createUseStyles({
+  tableContainer: {
+    marginTop: '25px',
+    '& table': {
+      marginTop: '0 !important'
+    }
+  },
+  strip: { marginBottom: '10px' }
+});
+
+interface ControlsWithNotePropTypes {
+  hideHTMLPropsNote?: boolean;
+  /**
+   * Customize the text of the note above the table.
+   *
+   * Defaults to: "This component supports all HTML attributes."
+   */
+  noteText?: ReactNode | ReactNode[];
+}
+
+export function ControlsWithNote(props: ComponentProps<typeof Controls> & ControlsWithNotePropTypes) {
+  const { hideHTMLPropsNote, noteText, ...rest } = props;
+  const classes = useStyles();
+
+  if (hideHTMLPropsNote) {
+    return <Controls {...rest} />;
+  }
+  return (
+    <div className={classes.tableContainer}>
+      <MessageStrip design={MessageStripDesign.Information} hideCloseButton className={classes.strip}>
+        {noteText ?? 'This component supports all HTML attributes.'}
+      </MessageStrip>
+      <Controls {...rest} />
+    </div>
+  );
+}

.storybook/components/DocsHeader.tsx

@@ -1,13 +1,13 @@
 import { Description, DocsContext, Subtitle, Title } from '@storybook/addon-docs';
 import { FlexBox, FlexBoxAlignItems, Label, Link, Text } from '@ui5/webcomponents-react';
 import React, { useContext } from 'react';
-import { GitHubLogo } from '../../.storybook/components/GitHub-Mark';
-import { Import } from '../../.storybook/components/Import';
-import { TableOfContent } from '../../.storybook/components/TableOfContent';
+import { GitHubLogo } from './GitHub-Mark';
+import { Import } from './Import';
+import { TableOfContent } from './TableOfContent';
 
 const Links = () => {
   const docsContext = useContext(DocsContext);
-  const isChart = docsContext.id.startsWith('charts-');
+  const isChart = docsContext.componentStories().at(0).id.startsWith('charts-');
 
   // const filePath = docsContext.parameters.fileName.replace(/^\.\//, '');
   // const folderPath = filePath.substr(0, filePath.lastIndexOf('/'));

.storybook/components/DomRefTable.module.css

@@ -0,0 +1,11 @@
+.parameters:not(:last-child) {
+    margin-block-end: 1rem;
+}
+
+.parameterName {
+    font-weight: bold;
+}
+
+.parameterDetails {
+    padding-inline: 1rem;
+}

.storybook/components/DomRefTable.tsx

@@ -0,0 +1,79 @@
+import { Heading } from '@storybook/blocks';
+import React from 'react';
+import classes from './DomRefTable.module.css';
+
+function Name(props) {
+  if (props.returnValue) {
+    return (
+      <>
+        {props.name}({props.parameters?.map((param) => `${param.name}${param.optional ? '?' : ''}`).join(', ')}):{' '}
+        <code>{props.returnValue.type}</code>
+      </>
+    );
+  }
+
+  if (props.readonly) {
+    return `${props.name} (readonly)`;
+  }
+
+  return props.name;
+}
+
+export function DomRefTable({ rows }: { rows: any[] }) {
+  return (
+    <>
+      <Heading>Attributes & Methods</Heading>
+      <p>
+        This component exposes public attributes and methods. You can use them directly on the instance of the
+        component, e.g. by using React Refs.
+      </p>
+      <table>
+        <thead>
+          <tr>
+            <th>Name</th>
+            <th>Parameters</th>
+            <th>Description</th>
+          </tr>
+        </thead>
+        <tbody>
+          {rows.map((row) => {
+            return (
+              <tr key={row.name}>
+                <td>
+                  <b>
+                    <Name {...row} />
+                  </b>
+                </td>
+                <td>
+                  {!!row.parameters ? (
+                    row.parameters.map((parameter) => {
+                      return (
+                        <div key={parameter.name} className={classes.parameters}>
+                          <p className={classes.parameterName}>{parameter.name}</p>
+                          {parameter.description ? (
+                            <p
+                              className={classes.parameterDetails}
+                              dangerouslySetInnerHTML={{ __html: parameter.description }}
+                            />
+                          ) : null}
+                          {parameter.type ? (
+                            <p className={classes.parameterDetails}>
+                              <code>{parameter.type}</code>
+                            </p>
+                          ) : null}
+                        </div>
+                      );
+                    })
+                  ) : (
+                    <>&mdash;</>
+                  )}
+                </td>
+                <td dangerouslySetInnerHTML={{ __html: row.description }}></td>
+              </tr>
+            );
+          })}
+        </tbody>
+      </table>
+    </>
+  );
+}

.storybook/components/Import.tsx

@@ -27,24 +27,24 @@ export const ImportStatement = ({ moduleName, packageName }: ImportStatementProp
       }}
     >
       <code style={{ whiteSpace: 'pre' }}>
-        <span style={{ color: 'rgb(0, 0, 136)' }}>import</span>
-        <span>
+        <span style={{ color: 'rgb(0, 0, 136)', fontSize: '14px' }}>import</span>
+        <span style={{ fontSize: '14px' }}>
           {' '}
           {'{'} {moduleName} {'}'}{' '}
         </span>
-        <span style={{ color: 'rgb(0, 0, 136)' }}>from</span>
+        <span style={{ color: 'rgb(0, 0, 136)', fontSize: '14px' }}>from</span>
         <span> </span>
-        <span style={{ color: 'rgb(0, 136, 0)' }}>{packageName}</span>
-        <span>;</span>
+        <span style={{ color: 'rgb(0, 136, 0)', fontSize: '14px' }}>{packageName}</span>
+        <span style={{ fontSize: '14px' }}>;</span>
       </code>
     </pre>
   );
 };
 
 export const Import = () => {
   const context = useContext(DocsContext);
-  const isChart = context.id.startsWith('charts-');
-  const groups = context.kind.split('/');
+  const isChart = context.componentStories().at(0).id.startsWith('charts-');
+  const groups = context.componentStories().at(0).kind.split('/');
   const moduleName = groups[groups.length - 1].trim();
 
   return (

.storybook/components/TableOfContent.tsx

@@ -1,80 +1,34 @@
-import { createUseStyles } from 'react-jss';
-import { ThemingParameters } from '@ui5/webcomponents-react-base';
 import React, { useEffect } from 'react';
 import tocbot from 'tocbot';
+import classes from './ToC.module.css';
 
-const styles = {
-  header: {
-    width: '100%',
-    borderBottom: '1px solid rgba(0, 0, 0, 0.1)',
-    fontSize: '24px',
-    '@media(min-width:1330px)': {
-      display: 'none'
-    }
-  },
-  fixedContainer: {
-    '@media(min-width:1330px)': {
-      width: '200px',
-      position: 'fixed',
-      top: 75,
-      right: 6,
-      overflow: 'hidden'
-    }
-  },
-  toc: {
-    fontFamily: ThemingParameters.sapFontFamily,
-    fontSize: ThemingParameters.sapFontSize,
-    backgroundColor: 'white',
-    '& *': {
-      textDecorationLine: 'none',
-      listStyle: 'none'
-    },
-    '@media(max-width:1329px)': {
-      borderBottom: '1px solid rgba(0, 0, 0, 0.1)',
-      '& .toc-link': {
-        textShadow: ThemingParameters.sapContent_TextShadow,
-        color: ThemingParameters.sapLinkColor,
-        '&:hover': {
-          color: ThemingParameters.sapLink_Hover_Color
-        },
-        '&:active': {
-          color: ThemingParameters.sapLink_Active_Color
-        }
-      },
-      '& .toc-list-item': {
-        margin: '4px 0'
-      },
-      '& .is-active-link': {
-        fontWeight: 400,
-        '&::before': {
-          content: 'none'
-        }
-      }
-    },
-    '@media(min-width:1330px)': {
-      '& > .toc-list': {
-        paddingLeft: '10px'
-      },
-      '& .toc-list-item': {
-        margin: '4px 0'
-      },
-      '& .toc-link::before': {
-        width: '4px'
-      },
-      '& .is-active-link': {
-        '&::before': {
-          backgroundColor: '#0a6ed1'
-        }
-      }
-    }
-  }
-};
-const useStyles = createUseStyles(styles, { name: 'TableOfContent' });
+function makeIds(headingSelector) {
+  const headings = document.querySelector('.sbdocs-wrapper').querySelectorAll(headingSelector);
+  const headingMap = {};
 
-export const TableOfContent = ({ headingSelector = 'h2.sbdocs-h2, h3.sbdocs-h3, h4.sbdocs-h4' }) => {
-  const classes = useStyles();
+  headings.forEach(function (heading) {
+    const id =
+      heading.id ??
+      heading.textContent
+        .trim()
+        .toLowerCase()
+        .split(' ')
+        .join('-')
+        .replace(/[!@#$%^&*():]/gi, '')
+        .replace(/\//gi, '-');
+    headingMap[id] = !isNaN(headingMap[id]) ? ++headingMap[id] : 0;
+    if (headingMap[id]) {
+      heading.id = id + '-' + headingMap[id];
+    } else {
+      heading.id = id;
+    }
+  });
+}
 
+export function TableOfContent({ headingSelector = 'h2:not(.noAnchor), h3:not(.noAnchor), h4:not(.noAnchor)' }) {
   useEffect(() => {
+    makeIds(headingSelector);
+
     tocbot.init({
       tocSelector: '.js-toc',
       contentSelector: '.sbdocs-wrapper',
@@ -83,20 +37,20 @@ export const TableOfContent = ({ headingSelector = 'h2.sbdocs-h2, h3.sbdocs-h3,
       collapseDepth: 6,
       hasInnerContainers: true
     });
+
     document.querySelectorAll('.toc-link').forEach((x) => x.setAttribute('target', '_self'));
+
     return () => {
       tocbot.destroy();
     };
   }, [headingSelector]);
 
   return (
     <>
-      <h3 className={classes.header}>Contents</h3>
+      <h3 className={`${classes.header} noAnchor`}>Contents</h3>
       <div className={classes.fixedContainer}>
         <div className={`js-toc ${classes.toc}`} id="toc-container" />
       </div>
     </>
   );
-};
-
-TableOfContent.displayName = 'TableOfContent';
+}