fix(cli): improve description for events & outline experimental components (#6625)

Author: Lukas742

.storybook/components/DocsHeader.module.css

@@ -35,3 +35,17 @@
 .infoTable td[data-import-cell='true'] {
   padding-inline-end: 2.5rem;
 }
+
+.titleRow {
+  padding-block-end: 0.5rem;
+}
+
+.titleRow :global(.sbdocs-title) {
+  margin-bottom: 0;
+}
+
+.experimentalLabel {
+  font-size: var(--sapObjectHeader_Title_SnappedFontSize);
+  margin-inline-start: 0.25rem;
+  align-self: flex-end;
+}

.storybook/components/DocsHeader.tsx

@@ -49,6 +49,7 @@ interface InfoTableProps {
   subComponents?: string[];
   mergeSubComponents?: boolean;
   isChart?: boolean;
+  experimental?: boolean;
 }
 
 export const InfoTable = ({ since, subComponents, mergeSubComponents }: InfoTableProps) => {
@@ -128,11 +129,12 @@ export const InfoTable = ({ since, subComponents, mergeSubComponents }: InfoTabl
   );
 };
 
-export const DocsHeader = ({ since, subComponents, mergeSubComponents, isChart }: InfoTableProps) => {
+export const DocsHeader = ({ since, subComponents, mergeSubComponents, isChart, experimental }: InfoTableProps) => {
   return (
     <ThemeProvider>
-      <FlexBox alignItems={FlexBoxAlignItems.Center}>
+      <FlexBox alignItems={FlexBoxAlignItems.Center} className={classes.titleRow}>
         <Title />
+        {experimental && <Label className={classes.experimentalLabel}>experimental</Label>}
         <span style={{ flexGrow: 1 }} />
         <Links />
       </FlexBox>

.storybook/manager-head.html

@@ -50,6 +50,15 @@
   input:not(:checked) ~ span:first-of-type {
     background-color: transparent !important;
   }
+
+  /*experimental components */
+  #data-display-table::after,
+  #inputs-tokenizer::after,
+  #layouts-floorplans-form::after,
+  #charts-timelinechart::after {
+    content: '(experimental)';
+    overflow: hidden;
+  }
 </style>
 
 <script data-ui5-config type="application/json">

.storybook/preview-head.html

@@ -83,6 +83,27 @@
     position: static;
   }
 
+  /* table in props description (table in ArgsTable) */
+  .docblock-argstable-body table {
+    max-width: 10rem;
+    table-layout: fixed;
+    border-collapse: collapse;
+    border-spacing: 1px;
+    text-align: center;
+  }
+  .docblock-argstable-body table th {
+    background-color: #eceff1;
+    color: #2e3438 !important;
+    border: 1px solid #dededf !important;
+    padding: 0px !important;
+    padding-block: 0.125rem !important;
+  }
+  .docblock-argstable-body table td {
+    border: 1px solid #dededf !important;
+    padding: 0px !important;
+    padding-block: 0.125rem !important;
+  }
+
   /* TODO remove this workaround as soon as https://github.com/storybookjs/storybook/issues/20497 is fixed */
   .docs-story > div > div[scale] {
     min-height: 20px;

packages/charts/src/components/TimelineChart/TimeLineChart.mdx

@@ -6,7 +6,7 @@ import { TimelineChartAnnotation } from './TimelineChartAnnotation';
 
 <Meta of={ComponentStories} />
 
-<DocsHeader isChart since="1.10.0" />
+<DocsHeader isChart since="1.10.0" experimental />
 
 <Canvas of={ComponentStories.Default} />
 

packages/charts/src/components/TimelineChart/TimeLineChart.stories.tsx

@@ -6,7 +6,7 @@ import { TimelineChart } from './TimelineChart.js';
 import { TimelineChartAnnotation } from './TimelineChartAnnotation.js';
 
 const meta = {
-  title: 'TimelineChart (experimental)',
+  title: 'TimelineChart',
   component: TimelineChart,
   argTypes: {
     dataset: {

packages/cli/src/scripts/create-wrappers/ComponentRenderer.ts

@@ -14,6 +14,7 @@ export class ComponentRenderer extends AbstractRenderer {
   private note: string = '';
   private isAbstract: boolean = false;
   private since: string | undefined;
+  private isExperimental: boolean | string | undefined = false;
 
   setAttributes(attrs: CEM.ClassField[]) {
     this.attributes.push(...attrs);
@@ -50,6 +51,11 @@ export class ComponentRenderer extends AbstractRenderer {
     return this;
   }
 
+  setIsExperimental(value?: boolean | string) {
+    this.isExperimental = value;
+    return this;
+  }
+
   prepare(context: WebComponentWrapper) {
     context.exportSet.add(context.componentName);
   }
@@ -64,10 +70,13 @@ export class ComponentRenderer extends AbstractRenderer {
       comment += ` *\n`;
       comment += ` * @since [${this.since}](https://github.com/SAP/ui5-webcomponents/releases/tag/v${this.since}) of __${context.packageName}__.\n`;
     }
-
     if (this.isAbstract) {
       comment += ' * @abstract\n';
     }
+    if (this.isExperimental) {
+      comment += ` * @experimental${typeof this.isExperimental === 'string' ? ` ${this.isExperimental}` : ''}\n`;
+    }
+
     comment += '*/';
 
     const component = dedent`

packages/cli/src/scripts/create-wrappers/PropTypesRenderer.ts

@@ -114,6 +114,15 @@ export class PropTypesRenderer extends AbstractRenderer {
             descriptionParts.push(` * @deprecated`);
           }
         }
+        if (
+          Object.prototype.hasOwnProperty.call(event, '_ui5Bubbles') ||
+          Object.prototype.hasOwnProperty.call(event, '_ui5Cancelable')
+        ) {
+          descriptionParts.push(` *`);
+          descriptionParts.push(`* | cancelable | bubbles |`);
+          descriptionParts.push(`* | :--------: | :-----: |`);
+          descriptionParts.push(`* | ${event._ui5Cancelable ? '✅' : '❌'}|${event._ui5Bubbles ? '✅' : '❌'}|`);
+        }
 
         const domRef = `${context.componentName}DomRef`;
         let eventType = '(event: unknown) => void;';

packages/cli/src/scripts/create-wrappers/main.ts

@@ -66,6 +66,7 @@ export default async function createWrappers(packageName: string, outDir: string
         .setNote(options.additionalComponentNote ?? '')
         .setIsAbstract(declaration._ui5abstract ?? false)
         .setSince(declaration._ui5since)
+        .setIsExperimental(declaration._ui5experimental)
     );
     wrapper.addRenderer(new ExportsRenderer());
 

packages/compat/src/components/Table/index.tsx

@@ -175,18 +175,30 @@ interface TablePropTypes
    * **Note:** The event will be fired if `growing` is set to `Button` or `Scroll`.
    *
    * **Note:** Available since [v2.0.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v2.0.0) of **@ui5/webcomponents-compat**.
+   *
+   * | cancelable | bubbles |
+   * | :--------: | :-----: |
+   * | ❌|✅|
    */
   onLoadMore?: (event: Ui5CustomEvent<TableDomRef>) => void;
 
   /**
    * Fired when `TableColumn` is shown as a pop-in instead of hiding it.
    *
    * **Note:** Available since [v2.0.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v2.0.0) of **@ui5/webcomponents-compat**.
+   *
+   * | cancelable | bubbles |
+   * | :--------: | :-----: |
+   * | ❌|✅|
    */
   onPopinChange?: (event: Ui5CustomEvent<TableDomRef, TablePopinChangeEventDetail>) => void;
 
   /**
    * Fired when a row in `Active` mode is clicked or `Enter` key is pressed.
+   *
+   * | cancelable | bubbles |
+   * | :--------: | :-----: |
+   * | ❌|✅|
    */
   onRowClick?: (event: Ui5CustomEvent<TableDomRef, TableRowClickEventDetail>) => void;
 
@@ -195,6 +207,10 @@ interface TablePropTypes
    * in `SingleSelect` and `MultiSelect` modes.
    *
    * **Note:** Available since [v2.0.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v2.0.0) of **@ui5/webcomponents-compat**.
+   *
+   * | cancelable | bubbles |
+   * | :--------: | :-----: |
+   * | ❌|✅|
    */
   onSelectionChange?: (event: Ui5CustomEvent<TableDomRef, TableSelectionChangeEventDetail>) => void;
 }