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

Author: Lukas742

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,12 @@ export class PropTypesRenderer extends AbstractRenderer {
             descriptionParts.push(` * @deprecated`);
           }
         }
+        if (event._ui5Bubbles || 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/main/src/webComponents/Form/Form.mdx

@@ -7,9 +7,7 @@ import * as ComponentStories from './Form.stories';
 
 <Meta of={ComponentStories} />
 
-<DocsHeader since="0.7.0" subComponents={['FormGroup', 'FormItem']} />
-
-**Note:** For more detailed examples of how the form can be used or integrated with other external libraries such as "React Hook Form", you can visit our [knowledge base](?path=/docs/knowledge-base-form-handling--docs).
+<DocsHeader subComponents={['FormGroup', 'FormItem']} />
 
 <br />
 
@@ -33,6 +31,10 @@ import * as ComponentStories from './Form.stories';
 
 <summary>Show Code</summary>
 
+    | cancelable | bubbles |
+    |:----------:|:-------:|
+    |     ✅      |    ❌    |
+
 ```jsx
 const StandardField = ({ editMode, value, inputType = InputType.Text, onInput, ...rest }) => {
   if (editMode) {

packages/main/src/webComponents/Form/Form.stories.tsx

@@ -7,7 +7,7 @@ import { FormItem } from '../FormItem/index.js';
 import { Form } from './index.js';
 
 const meta = {
-  title: 'Layouts & Floorplans / Form',
+  title: 'Layouts & Floorplans / Form (experimental)',
   component: Form,
   argTypes: {
     children: { control: { disable: true } }

packages/main/src/webComponents/Table/Table.stories.tsx

@@ -12,7 +12,7 @@ import { TableSelection } from '../TableSelection/index.js';
 import { Table } from './index.js';
 
 const meta = {
-  title: 'Data Display / Table',
+  title: 'Data Display / Table (experimental)',
   component: Table,
   argTypes: {
     headerRow: { control: { disable: true } },

packages/main/src/webComponents/Tokenizer/Tokenizer.stories.tsx

@@ -7,7 +7,7 @@ import type { TokenizerPropTypes } from './index.js';
 import { Tokenizer } from './index.js';
 
 const meta = {
-  title: 'Inputs / Tokenizer',
+  title: 'Inputs / Tokenizer (experimental)',
   component: Tokenizer,
   args: { style: { width: '250px' } },
   tags: ['package:@ui5/webcomponents']