Merge branch 'main' into feat/recharts-v3

Author: Lukas742

.github/ISSUE_TEMPLATE/documentation.yml

@@ -46,5 +46,4 @@ body:
       description: By submitting this issue, I confirm to follow the recommendation not to disclose any internal or sensitive information.
       options:
         - label: I’m not disclosing any internal or sensitive information.
-    validations:
-      required: true
+          required: true

.github/ISSUE_TEMPLATE/feature-request.yml

@@ -54,5 +54,4 @@ body:
       description: By submitting this issue, I confirm to follow the recommendation not to disclose any internal or sensitive information.
       options:
         - label: I’m not disclosing any internal or sensitive information.
-    validations:
-      required: true
+          required: true

.github/workflows/open-source-security.yml

@@ -16,13 +16,13 @@ jobs:
       - uses: actions/checkout@v4
 
       - name: artifactPrepareVersion
-        uses: SAP/[email protected].0
+        uses: SAP/[email protected].1
         with:
           step-name: artifactPrepareVersion
           flags: --versioningType cloud_noTag
 
       - name: detectExecuteScan
-        uses: SAP/[email protected].0
+        uses: SAP/[email protected].1
         with:
           step-name: detectExecuteScan
           flags: '--token ${{ secrets.DETECT_TOKEN }}'

.github/workflows/release.yml

@@ -13,6 +13,11 @@ on:
         description: 'pre-release'
         required: false
         default: false
+      skip_versioning:
+        type: boolean
+        description: 'Skip lerna version step'
+        required: false
+        default: false
 
 jobs:
   test:
@@ -81,6 +86,7 @@ jobs:
           yarn install --immutable
 
       - name: version
+        if: github.event.inputs.skip_versioning != 'true'
         run: |
           npm config set //registry.npmjs.org/:_authToken=${NODE_AUTH_TOKEN}
 

.gitignore

@@ -26,4 +26,8 @@ packages/main/scripts/wrapperGeneration/json
 packages/main/tmp
 packages/*/src/generated/
 
+cypress/downloads
+
 .nx
+
+debug-storybook.log

.nvmrc

@@ -1 +1 @@
-22.17.0
+22.18.0

.storybook/components/ArgTypesWithNote.tsx

@@ -1,4 +1,5 @@
-import { ArgTypes } from '@storybook/blocks';
+import { DomRefTable } from '@sb/components/DomRefTable.js';
+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';
@@ -12,20 +13,34 @@ interface ArgTypesWithNotePropTypes {
    * Defaults to: "This component supports all HTML attributes."
    */
   noteText?: ReactNode | ReactNode[];
+  /**
+   * 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, ...rest } = props;
+  const { hideHTMLPropsNote, noteText, isHeading, metaOf, ...rest } = props;
 
   if (hideHTMLPropsNote) {
-    return <ArgTypes {...rest} />;
+    return (
+      <>
+        <ArgTypes {...rest} />
+        <DomRefTable of={rest.of} metaOf={metaOf} isSubheading={!isHeading} />
+      </>
+    );
   }
   return (
     <div className={classes.tableContainer}>
       <MessageStrip design={MessageStripDesign.Information} hideCloseButton className={classes.strip}>
         {noteText ?? 'This component supports all HTML attributes.'}
       </MessageStrip>
       <ArgTypes {...rest} />
+      <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 && (