add supported node note

Author: Lukas742

.gitignore

@@ -31,3 +31,5 @@ cypress/downloads
 .nx
 
 debug-storybook.log
+
+.vscode

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

@@ -81,6 +81,23 @@ export class PropTypesRenderer extends AbstractRenderer {
           }
         }
 
+        const slotType = slot._ui5type;
+        if (slotType) {
+          let slotElementType: string = 'unknown';
+          const slotReferences = slot._ui5type?.references;
+          if (slotReferences?.length) {
+            const types = new Set<string>([]);
+            slotReferences.forEach((slotRef) => {
+              types.add(slotRef.name);
+            });
+            slotElementType = [...types].join(', ');
+          } else if (slotType.text) {
+            slotElementType = slotType.text.match(/^Array<([^>]+)>$/)?.[1] ?? slotType.text;
+          }
+          descriptionParts.push(` *`);
+          descriptionParts.push(` * __Supported Node Type/s:__ \`${slotElementType}\``);
+        }
+
         return `/**\n${descriptionParts.join('\n')}\n */\n${snakeCaseToCamelCase(slot.name)}?: ${
           isDefaultSlot ? 'ReactNode | ReactNode[]' : 'UI5WCSlotsNode'
         }`;

packages/main/src/webComponents/Avatar/index.tsx

@@ -131,6 +131,8 @@ interface AvatarPropTypes
    * Learn more about it [here](https://ui5.github.io/webcomponents-react/v2/?path=/docs/knowledge-base-handling-slots--docs).
    *
    * **Note:** Available since [v1.7.0](https://github.com/UI5/webcomponents/releases/tag/v1.7.0) of **@ui5/webcomponents**.
+   *
+   * __Supported Node Type/s:__ `HTMLElement`
    */
   badge?: UI5WCSlotsNode;
 
@@ -141,6 +143,8 @@ interface AvatarPropTypes
    * `ui5-avatar:not(:defined) {`<br/>
    * &nbsp;&nbsp;&nbsp;&nbsp;`visibility: hidden;`<br/>
    * `}`
+   *
+   * __Supported Node Type/s:__ `HTMLElement`
    */
   children?: ReactNode | ReactNode[];
   /**

packages/main/src/webComponents/AvatarGroup/index.tsx

@@ -72,6 +72,8 @@ interface AvatarGroupPropTypes
    *
    * Moreover, if you use avatars with "Square" shape, there will be visual inconsistency
    * as the built-in overflow action has "Circle" shape.
+   *
+   * __Supported Node Type/s:__ `IAvatarGroupItem`
    */
   children?: ReactNode | ReactNode[];
 
@@ -87,6 +89,8 @@ interface AvatarGroupPropTypes
    *
    * __Note:__ When passing a custom React component to this prop, you have to make sure your component reads the `slot` prop and appends it to the most outer element of your component.
    * Learn more about it [here](https://ui5.github.io/webcomponents-react/v2/?path=/docs/knowledge-base-handling-slots--docs).
+   *
+   * __Supported Node Type/s:__ `IButton`
    */
   overflowButton?: UI5WCSlotsNode;
   /**

packages/main/src/webComponents/Bar/index.tsx

@@ -36,6 +36,8 @@ interface BarPropTypes
     Omit<CommonProps, keyof BarAttributes | 'children' | 'endContent' | 'startContent'> {
   /**
    * Defines the content in the middle of the bar.
+   *
+   * __Supported Node Type/s:__ `HTMLElement`
    */
   children?: ReactNode | ReactNode[];
 
@@ -47,6 +49,8 @@ interface BarPropTypes
    *
    * __Note:__ When passing a custom React component to this prop, you have to make sure your component reads the `slot` prop and appends it to the most outer element of your component.
    * Learn more about it [here](https://ui5.github.io/webcomponents-react/v2/?path=/docs/knowledge-base-handling-slots--docs).
+   *
+   * __Supported Node Type/s:__ `HTMLElement`
    */
   endContent?: UI5WCSlotsNode;
 
@@ -58,6 +62,8 @@ interface BarPropTypes
    *
    * __Note:__ When passing a custom React component to this prop, you have to make sure your component reads the `slot` prop and appends it to the most outer element of your component.
    * Learn more about it [here](https://ui5.github.io/webcomponents-react/v2/?path=/docs/knowledge-base-handling-slots--docs).
+   *
+   * __Supported Node Type/s:__ `HTMLElement`
    */
   startContent?: UI5WCSlotsNode;
 }

packages/main/src/webComponents/BarcodeScannerDialog/index.tsx

@@ -43,6 +43,8 @@ interface BarcodeScannerDialogPropTypes
    * Learn more about it [here](https://ui5.github.io/webcomponents-react/v2/?path=/docs/knowledge-base-handling-slots--docs).
    *
    * **Note:** Available since [v2.4.0](https://github.com/UI5/webcomponents/releases/tag/v2.4.0) of **@ui5/webcomponents-fiori**.
+   *
+   * __Supported Node Type/s:__ `HTMLElement`
    */
   footer?: UI5WCSlotsNode;
 
@@ -59,6 +61,8 @@ interface BarcodeScannerDialogPropTypes
    * Learn more about it [here](https://ui5.github.io/webcomponents-react/v2/?path=/docs/knowledge-base-handling-slots--docs).
    *
    * **Note:** Available since [v2.4.0](https://github.com/UI5/webcomponents/releases/tag/v2.4.0) of **@ui5/webcomponents-fiori**.
+   *
+   * __Supported Node Type/s:__ `HTMLElement`
    */
   header?: UI5WCSlotsNode;
   /**

packages/main/src/webComponents/Breadcrumbs/index.tsx

@@ -35,6 +35,8 @@ interface BreadcrumbsPropTypes
    * Defines the component items.
    *
    * **Note:** Use the `BreadcrumbsItem` component to define the desired items.
+   *
+   * __Supported Node Type/s:__ `BreadcrumbsItem`
    */
   children?: ReactNode | ReactNode[];
   /**

packages/main/src/webComponents/BreadcrumbsItem/index.tsx

@@ -46,6 +46,8 @@ interface BreadcrumbsItemPropTypes
    * Defines the text of the component.
    *
    * **Note:** Although this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design.
+   *
+   * __Supported Node Type/s:__ `Node`
    */
   children?: ReactNode | ReactNode[];
 }

packages/main/src/webComponents/BusyIndicator/index.tsx

@@ -46,6 +46,8 @@ interface BusyIndicatorPropTypes
     Omit<CommonProps, keyof BusyIndicatorAttributes | 'children'> {
   /**
    * Determines the content over which the component will appear.
+   *
+   * __Supported Node Type/s:__ `Node`
    */
   children?: ReactNode | ReactNode[];
 }

packages/main/src/webComponents/Button/index.tsx

@@ -162,13 +162,17 @@ interface ButtonPropTypes
    * Learn more about it [here](https://ui5.github.io/webcomponents-react/v2/?path=/docs/knowledge-base-handling-slots--docs).
    *
    * **Note:** Available since [v2.7.0](https://github.com/UI5/webcomponents/releases/tag/v2.7.0) of **@ui5/webcomponents**.
+   *
+   * __Supported Node Type/s:__ `ButtonBadge`
    */
   badge?: UI5WCSlotsNode;
 
   /**
    * Defines the text of the component.
    *
    * **Note:** Although this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design.
+   *
+   * __Supported Node Type/s:__ `Node`
    */
   children?: ReactNode | ReactNode[];
   /**