diff --git a/.gitignore b/.gitignore index 5566d8c5705..a9b6496fcf5 100644 --- a/.gitignore +++ b/.gitignore @@ -29,3 +29,5 @@ packages/*/src/generated/ cypress/downloads .nx + +debug-storybook.log diff --git a/.storybook/components/ArgTypesWithNote.tsx b/.storybook/components/ArgTypesWithNote.tsx index 47c5ed23ab5..8cd3ff27716 100644 --- a/.storybook/components/ArgTypesWithNote.tsx +++ b/.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['of']; } export function ArgTypesWithNote(props: ComponentProps & ArgTypesWithNotePropTypes) { - const { hideHTMLPropsNote, noteText, isHeading, ...rest } = props; + const { hideHTMLPropsNote, noteText, isHeading, metaOf, ...rest } = props; if (hideHTMLPropsNote) { return ( <> - + ); } @@ -36,7 +40,7 @@ export function ArgTypesWithNote(props: ComponentProps & ArgTyp {noteText ?? 'This component supports all HTML attributes.'} - + ); } diff --git a/.storybook/components/CommandsAndQueries.tsx b/.storybook/components/CommandsAndQueries.tsx index bdc0f55b101..46981eca916 100644 --- a/.storybook/components/CommandsAndQueries.tsx +++ b/.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'; diff --git a/.storybook/components/ControlsWithNote.tsx b/.storybook/components/ControlsWithNote.tsx index da33100219e..9f8aba243f9 100644 --- a/.storybook/components/ControlsWithNote.tsx +++ b/.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 & Contro )} - + ); } diff --git a/.storybook/components/DocsHeader.tsx b/.storybook/components/DocsHeader.tsx index 73261c6c501..78b4bbde7f8 100644 --- a/.storybook/components/DocsHeader.tsx +++ b/.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['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 - + {supportsClipboardApi && (