migrate subcomponent DOM properties & shadow parts table

Author: Lukas742

.storybook/components/ArgTypesWithNote.tsx

@@ -1,5 +1,5 @@
 import { DomRefTable } from '@sb/components/DomRefTable.js';
-import { ArgTypes } from '@storybook/addon-docs/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/DomRefTable.tsx

@@ -51,17 +51,22 @@ function Name(props: CEM.ClassMember) {
 export function DomRefTable({
   of,
   isSubheading,
+  metaOf,
 }: {
   of: ComponentProps<typeof Controls>['of'];
   isSubheading?: boolean;
+  metaOf?: ComponentProps<typeof Controls>['of'];
 }) {
-  const { story: storyContext } = useOf<'story'>(of);
-  const storyTags: string[] = storyContext.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 ?? storyContext.component.displayName;
   const popoverRef = useRef(null);
 
-  const knownAttributes = new Set(Object.keys(of?.__docgenInfo?.props ?? storyContext.argTypes));
+  const knownAttributes = new Set(Object.keys(componentContext?.__docgenInfo?.props ?? storyContext.argTypes));
   const cem = useGetCem(storyTags);
   const moduleName = cemModuleName ? cemModuleName.split(':')[1] : componentName;
 

packages/ai/src/components/Button/Button.mdx

@@ -123,7 +123,7 @@ import { excludePropsForAbstract } from '@sb/utils';
 ## ButtonState
 
 <Description of={ButtonState} />
-<ArgTypesWithNote of={ButtonState} hideHTMLPropsNote exclude={excludePropsForAbstract} />
+<ArgTypesWithNote metaOf={ComponentStories} of={ButtonState} hideHTMLPropsNote exclude={excludePropsForAbstract} />
 
 <Footer />
 ```

packages/ai/src/components/PromptInput/PromptInput.mdx

@@ -24,11 +24,11 @@ import { excludePropsForAbstract } from '@sb/utils';
 ## SuggestionItem
 
 <Description of={SuggestionItem} />
-<ArgTypesWithNote hideHTMLPropsNote exclude={excludePropsForAbstract} of={SuggestionItem} />
+<ArgTypesWithNote metaOf={ComponentStories} hideHTMLPropsNote exclude={excludePropsForAbstract} of={SuggestionItem} />
 
 ## SuggestionItemGroup
 
 <Description of={SuggestionItemGroup} />
-<ArgTypesWithNote of={SuggestionItemGroup} hideHTMLPropsNote exclude={excludePropsForAbstract} />
+<ArgTypesWithNote metaOf={ComponentStories} of={SuggestionItemGroup} hideHTMLPropsNote exclude={excludePropsForAbstract} />
 
 <Footer />

packages/compat/src/components/Toolbar/Toolbar.mdx

@@ -238,24 +238,24 @@ const ToolbarComponent = () => {
 
 <Description of={OverflowToolbarButton} />
 
-<ArgTypesWithNote of={OverflowToolbarButton} />
+<ArgTypesWithNote metaOf={ComponentStories} of={OverflowToolbarButton} />
 
 ## OverflowToolbarToggleButton
 
 <Description of={OverflowToolbarToggleButton} />
 
-<ArgTypesWithNote of={OverflowToolbarToggleButton} />
+<ArgTypesWithNote metaOf={ComponentStories} of={OverflowToolbarToggleButton} />
 
 ## ToolbarSpacer
 
 <Description of={ToolbarSpacer} />
 
-<ArgTypesWithNote of={ToolbarSpacer} />
+<ArgTypesWithNote metaOf={ComponentStories} of={ToolbarSpacer} />
 
 ## ToolbarSeparator
 
 <Description of={ToolbarSeparator} />
 
-<ArgTypesWithNote of={ToolbarSeparator} />
+<ArgTypesWithNote metaOf={ComponentStories} of={ToolbarSeparator} />
 
 <Footer />

packages/main/src/components/AnalyticalCardHeader/AnalyticalCardHeader.mdx

@@ -27,6 +27,6 @@ import * as ComponentStories from './AnalyticalCardHeader.stories';
 
 <Description of={NumericSideIndicator} />
 
-<ArgTypesWithNote of={NumericSideIndicator} />
+<ArgTypesWithNote metaOf={ComponentStories} of={NumericSideIndicator} />
 
 <Footer />

packages/main/src/components/FilterBar/FilterBar.mdx

@@ -412,6 +412,6 @@ const handleInput = (event) => {
 ## FilterGroupItem
 
 <Description of={FilterGroupItem} />
-<ArgTypesWithNote of={FilterGroupItem} exclude={['data-index']} />
+<ArgTypesWithNote metaOf={ComponentStories} of={FilterGroupItem} exclude={['data-index']} />
 
 <Footer />

packages/main/src/components/MessageView/MessageView.mdx

@@ -104,12 +104,12 @@ function MyComponent() {
 
 <Description of={MessageItem} />
 
-<ArgTypesWithNote of={MessageItem} />
+<ArgTypesWithNote metaOf={ComponentStories} of={MessageItem} />
 
 ## MessageViewButton
 
 <Description of={MessageViewButton} />
 
-<ArgTypesWithNote of={MessageViewButton} />
+<ArgTypesWithNote metaOf={ComponentStories} of={MessageViewButton} />
 
 <Footer />

packages/main/src/components/ObjectPage/ObjectPage.mdx

@@ -180,24 +180,24 @@ function ObjectPageWithLegacyToolbar(props) {
 
 <Description of={ObjectPageTitle} />
 
-<ArgTypesWithNote of={ObjectPageTitle} />
+<ArgTypesWithNote metaOf={ComponentStories} of={ObjectPageTitle} />
 
 ## ObjectPageHeader
 
 <Description of={ObjectPageHeader} />
 
-<ArgTypesWithNote of={ObjectPageHeader} />
+<ArgTypesWithNote metaOf={ComponentStories} of={ObjectPageHeader} />
 
 ## ObjectPageSection
 
 <Description of={ObjectPageSection} />
 
-<ArgTypesWithNote of={ObjectPageSection} />
+<ArgTypesWithNote metaOf={ComponentStories} of={ObjectPageSection} />
 
 ## ObjectPageSubSection
 
 <Description of={ObjectPageSubSection} />
 
-<ArgTypesWithNote of={ObjectPageSubSection} />
+<ArgTypesWithNote metaOf={ComponentStories} of={ObjectPageSubSection} />
 
 <Footer />

packages/main/src/components/SplitterLayout/SplitterLayout.mdx

@@ -85,6 +85,6 @@ function SplitterLayoutComponent(props) {
 
 <Description of={SplitterElement} />
 
-<ArgTypesWithNote of={SplitterElement} />
+<ArgTypesWithNote metaOf={ComponentStories} of={SplitterElement} />
 
 <Footer />