feat(create-wrappers): document supported slot types & deep-link to UI5WC component docs

.gitignore

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

package.json

@@ -21,10 +21,10 @@
     "prettier:all": "prettier --write --config ./prettier.config.js \"**/*\"",
     "lint": "eslint .",
     "lerna:version-dryrun": "lerna version --conventional-graduate --no-git-tag-version --no-push",
-    "wrappers:main": "node packages/cli/dist/bin/index.js create-wrappers --packageName @ui5/webcomponents --out ./packages/main/src/webComponents --additionalComponentNote 'This is a UI5 Web Component! [Repository](https://github.com/UI5/webcomponents) | [Documentation](https://ui5.github.io/webcomponents/)'",
-    "wrappers:fiori": "node packages/cli/dist/bin/index.js create-wrappers --packageName @ui5/webcomponents-fiori --out ./packages/main/src/webComponents --additionalComponentNote 'This is a UI5 Web Component! [Repository](https://github.com/UI5/webcomponents) | [Documentation](https://ui5.github.io/webcomponents/)'",
-    "wrappers:compat": "WITH_WEB_COMPONENT_IMPORT_PATH='@ui5/webcomponents-react-base/withWebComponent' node packages/cli/dist/bin/index.js create-wrappers --packageName @ui5/webcomponents-compat --out ./packages/compat/src/components --additionalComponentNote 'This is a UI5 Web Component! [Repository](https://github.com/UI5/webcomponents) | [Documentation](https://ui5.github.io/webcomponents/)' && prettier --log-level silent --write ./packages/compat/src/components",
-    "wrappers:ai": "node packages/cli/dist/bin/index.js create-wrappers --packageName @ui5/webcomponents-ai --out ./packages/ai/src/components --additionalComponentNote 'This is a UI5 Web Component! [Repository](https://github.com/UI5/webcomponents) | [Documentation](https://ui5.github.io/webcomponents/)' && prettier --log-level silent --write ./packages/ai/src/components",
+    "wrappers:main": "WITH_WEB_COMPONENT_DOCS_LINK='true' node packages/cli/dist/bin/index.js create-wrappers --packageName @ui5/webcomponents --out ./packages/main/src/webComponents",
+    "wrappers:fiori": "WITH_WEB_COMPONENT_DOCS_LINK='true' node packages/cli/dist/bin/index.js create-wrappers --packageName @ui5/webcomponents-fiori --out ./packages/main/src/webComponents",
+    "wrappers:compat": "WITH_WEB_COMPONENT_DOCS_LINK='true' WITH_WEB_COMPONENT_IMPORT_PATH='@ui5/webcomponents-react-base/withWebComponent' node packages/cli/dist/bin/index.js create-wrappers --packageName @ui5/webcomponents-compat --out ./packages/compat/src/components && prettier --log-level silent --write ./packages/compat/src/components",
+    "wrappers:ai": "WITH_WEB_COMPONENT_DOCS_LINK='true' node packages/cli/dist/bin/index.js create-wrappers --packageName @ui5/webcomponents-ai --out ./packages/ai/src/components && prettier --log-level silent --write ./packages/ai/src/components",
     "create-webcomponents-wrapper": "(cd packages/cli && tsc) && yarn run wrappers:main && yarn run wrappers:fiori && prettier --log-level silent --write ./packages/main/src/webComponents && eslint --fix ./packages/main/src/webComponents/*/index.tsx && yarn run sb:prepare-cem",
     "create-webcomponents-wrapper-compat": "(cd packages/cli && tsc) && yarn run wrappers:compat && yarn run sb:prepare-cem && eslint --fix ./packages/compat/src/components/*/index.tsx",
     "create-webcomponents-wrapper-ai": "(cd packages/cli && tsc) && yarn run wrappers:ai && yarn run sb:prepare-cem && eslint --fix ./packages/ai/src/components/*/index.tsx",

packages/ai/src/components/Button/index.tsx

@@ -71,6 +71,8 @@ interface ButtonPropTypes
    * Defines the available states of the component.
    * **Note:** Although this slot accepts HTML Elements, it is strongly recommended that
    * you only use `ButtonState` components in order to preserve the intended design.
+   *
+   * __Supported Node Type/s:__ `Array<ButtonState>`
    */
   children?: ReactNode | ReactNode[];
   /**
@@ -114,7 +116,7 @@ interface ButtonPropTypes
  *
  *
  *
- * __Note__: This is a UI5 Web Component! [Repository](https://github.com/UI5/webcomponents) | [Documentation](https://ui5.github.io/webcomponents/)
+ * __Note:__ This is a UI5 Web Component! [Button UI5 Web Component Documentation](https://ui5.github.io/webcomponents/components/ai/Button) | [Repository](https://github.com/UI5/webcomponents)
  *
  * @since [2.0.0](https://github.com/UI5/webcomponents/releases/tag/v2.0.0) of __@ui5/webcomponents-ai__.
  * @experimental The Button and ButtonState web components are availabe since 2.0 under an experimental flag and their API and behaviour are subject to change.

packages/ai/src/components/ButtonState/index.tsx

@@ -62,7 +62,7 @@ interface ButtonStatePropTypes extends ButtonStateAttributes, Omit<CommonProps,
  *
  *
  *
- * __Note__: This is a UI5 Web Component! [Repository](https://github.com/UI5/webcomponents) | [Documentation](https://ui5.github.io/webcomponents/)
+ * __Note:__ This is a UI5 Web Component! [ButtonState UI5 Web Component Documentation](https://ui5.github.io/webcomponents/components/ai/ButtonState) | [Repository](https://github.com/UI5/webcomponents)
  *
  * @since [2.0.0](https://github.com/UI5/webcomponents/releases/tag/v2.0.0) of __@ui5/webcomponents-ai__.
  * @abstract

packages/ai/src/components/PromptInput/index.tsx

@@ -112,6 +112,8 @@ interface PromptInputPropTypes
    * property is set to `true`.
    *
    * **Note:** The `<ui5-suggestion-item>`, `<ui5-suggestion-item-group>` and `ui5-suggestion-item-custom` are recommended to be used as suggestion items.
+   *
+   * __Supported Node Type/s:__ `Array<IInputSuggestionItem>`
    */
   children?: ReactNode | ReactNode[];
 
@@ -131,6 +133,8 @@ interface PromptInputPropTypes
    * Learn more about it [here](https://ui5.github.io/webcomponents-react/v2/?path=/docs/knowledge-base-handling-slots--docs).
    *
    * **Note:** Available since [v2.0.0](https://github.com/UI5/webcomponents/releases/tag/v2.0.0) of **@ui5/webcomponents-ai**.
+   *
+   * __Supported Node Type/s:__ `Array<HTMLElement>`
    */
   valueStateMessage?: UI5WCSlotsNode;
   /**
@@ -177,7 +181,7 @@ interface PromptInputPropTypes
  *
  *
  *
- * __Note__: This is a UI5 Web Component! [Repository](https://github.com/UI5/webcomponents) | [Documentation](https://ui5.github.io/webcomponents/)
+ * __Note:__ This is a UI5 Web Component! [PromptInput UI5 Web Component Documentation](https://ui5.github.io/webcomponents/components/ai/PromptInput) | [Repository](https://github.com/UI5/webcomponents)
  * @experimental The **@ui5/webcomponents-ai** package is under development and considered experimental - components' APIs are subject to change.
  */
 const PromptInput = withWebComponent<PromptInputPropTypes, PromptInputDomRef>(

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

@@ -4,6 +4,7 @@ import { sinceFilter, snakeCaseToCamelCase, summaryFormatter } from '../../util/
 import { AbstractRenderer, RenderingPhase } from './AbstractRenderer.js';
 import type { WebComponentWrapper } from './WebComponentWrapper.js';
 
+const WITH_WEB_COMPONENT_DOCS_LINK = process.env.WITH_WEB_COMPONENT_DOCS_LINK ?? 'false';
 export class ComponentRenderer extends AbstractRenderer {
   public phase = RenderingPhase.component;
 
@@ -72,6 +73,18 @@ export class ComponentRenderer extends AbstractRenderer {
     if (this.note) {
       comment += ` * __Note__: ${this.note}\n`;
     }
+    if (WITH_WEB_COMPONENT_DOCS_LINK === 'true') {
+      let ui5wcUrl = 'https://ui5.github.io/webcomponents/components/';
+      if (context.packageName === '@ui5/webcomponents-fiori') {
+        ui5wcUrl += 'fiori/';
+      } else if (context.packageName === '@ui5/webcomponents-ai') {
+        ui5wcUrl += 'ai/';
+      } else if (context.packageName === '@ui5/webcomponents-compat') {
+        ui5wcUrl += 'compat/';
+      }
+      ui5wcUrl += context.componentName;
+      comment += ` * __Note:__ This is a UI5 Web Component! [${context.componentName} UI5 Web Component Documentation](${ui5wcUrl}) | [Repository](https://github.com/UI5/webcomponents)\n`;
+    }
     if (sinceFilter(this.since)) {
       comment += ` *\n`;
       comment += ` * @since [${this.since}](https://github.com/UI5/webcomponents/releases/tag/v${this.since}) of __${context.packageName}__.\n`;

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

@@ -81,6 +81,12 @@ export class PropTypesRenderer extends AbstractRenderer {
           }
         }
 
+        const slotType = slot._ui5type;
+        if (slotType) {
+          descriptionParts.push(` *`);
+          descriptionParts.push(` * __Supported Node Type/s:__ \`${slotType.text ?? 'unknown'}\``);
+        }
+
         return `/**\n${descriptionParts.join('\n')}\n */\n${snakeCaseToCamelCase(slot.name)}?: ${
           isDefaultSlot ? 'ReactNode | ReactNode[]' : 'UI5WCSlotsNode'
         }`;

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

@@ -155,6 +155,8 @@ interface TablePropTypes
    * Defines the component rows.
    *
    * **Note:** Use `TableRow` for the intended design.
+   *
+   * __Supported Node Type/s:__ `Array<ITableRow>`
    */
   children?: ReactNode | ReactNode[];
 
@@ -168,6 +170,8 @@ interface TablePropTypes
    *
    * __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:__ `Array<TableColumn>`
    */
   columns?: UI5WCSlotsNode;
   /**
@@ -269,7 +273,7 @@ interface TablePropTypes
  * - `import "@ui5/webcomponents-compat/dist/TableGroupRow.js";` (`TableGroupRow`)
  * - `import "@ui5/webcomponents-compat/dist/TableCell.js";` (`TableCell`)
  *
- * __Note__: This is a UI5 Web Component! [Repository](https://github.com/UI5/webcomponents) | [Documentation](https://ui5.github.io/webcomponents/)
+ * __Note:__ This is a UI5 Web Component! [Table UI5 Web Component Documentation](https://ui5.github.io/webcomponents/components/compat/Table) | [Repository](https://github.com/UI5/webcomponents)
  * @deprecated Deprecated as of version 2.12.0, use `@ui5/webcomponents/dist/Table.js` instead.
  */
 const Table = withWebComponent<TablePropTypes, TableDomRef>(

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

@@ -16,14 +16,16 @@ interface TableCellDomRef extends Required<TableCellAttributes>, Ui5DomRef {}
 interface TableCellPropTypes extends TableCellAttributes, Omit<CommonProps, 'children'> {
   /**
    * Specifies the content of the component.
+   *
+   * __Supported Node Type/s:__ `Array<HTMLElement> | undefined`
    */
   children?: ReactNode | ReactNode[];
 }
 
 /**
  * The `TableCell` component defines the structure of the data in a single `Table` cell.
  *
- * __Note__: This is a UI5 Web Component! [Repository](https://github.com/UI5/webcomponents) | [Documentation](https://ui5.github.io/webcomponents/)
+ * __Note:__ This is a UI5 Web Component! [TableCell UI5 Web Component Documentation](https://ui5.github.io/webcomponents/components/compat/TableCell) | [Repository](https://github.com/UI5/webcomponents)
  * @deprecated Deprecated as of version 2.12.0, use `@ui5/webcomponents/dist/TableCell.js` instead.
  */
 const TableCell = withWebComponent<TableCellPropTypes, TableCellDomRef>(`ui5-table-cell${tagSuffix}`, [], [], [], []);

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

@@ -56,6 +56,8 @@ interface TableColumnPropTypes
     Omit<CommonProps, keyof TableColumnAttributes | 'children'> {
   /**
    * Defines the content of the column header
+   *
+   * __Supported Node Type/s:__ `Array<Node>`
    */
   children?: ReactNode | ReactNode[];
 }
@@ -64,7 +66,7 @@ interface TableColumnPropTypes
  * The `TableColumn` component allows to define column specific properties that are applied
  * when rendering the `Table` component.
  *
- * __Note__: This is a UI5 Web Component! [Repository](https://github.com/UI5/webcomponents) | [Documentation](https://ui5.github.io/webcomponents/)
+ * __Note:__ This is a UI5 Web Component! [TableColumn UI5 Web Component Documentation](https://ui5.github.io/webcomponents/components/compat/TableColumn) | [Repository](https://github.com/UI5/webcomponents)
  * @deprecated Deprecated as of version 2.12.0, use `@ui5/webcomponents/dist/Table.js` instead.
  */
 const TableColumn = withWebComponent<TableColumnPropTypes, TableColumnDomRef>(

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

@@ -18,14 +18,16 @@ interface TableGroupRowPropTypes extends TableGroupRowAttributes, Omit<CommonPro
    * 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:__ `Array<Node>`
    */
   children?: ReactNode | ReactNode[];
 }
 
 /**
  * The `TableGroupRow` component represents a group row in the `Table`.
  *
- * __Note__: This is a UI5 Web Component! [Repository](https://github.com/UI5/webcomponents) | [Documentation](https://ui5.github.io/webcomponents/)
+ * __Note:__ This is a UI5 Web Component! [TableGroupRow UI5 Web Component Documentation](https://ui5.github.io/webcomponents/components/compat/TableGroupRow) | [Repository](https://github.com/UI5/webcomponents)
  *
  * @since [2.0.0](https://github.com/UI5/webcomponents/releases/tag/v2.0.0) of __@ui5/webcomponents-compat__.
  * @deprecated Deprecated as of version 2.12.0, use `@ui5/webcomponents/dist/Table.js` instead.

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

@@ -46,14 +46,16 @@ interface TableRowPropTypes extends TableRowAttributes, Omit<CommonProps, keyof
    * Defines the cells of the component.
    *
    * **Note:** Use `TableCell` for the intended design.
+   *
+   * __Supported Node Type/s:__ `Array<TableCell>`
    */
   children?: ReactNode | ReactNode[];
 }
 
 /**
  * The `TableRow` component represents a row in the `Table`.
  *
- * __Note__: This is a UI5 Web Component! [Repository](https://github.com/UI5/webcomponents) | [Documentation](https://ui5.github.io/webcomponents/)
+ * __Note:__ This is a UI5 Web Component! [TableRow UI5 Web Component Documentation](https://ui5.github.io/webcomponents/components/compat/TableRow) | [Repository](https://github.com/UI5/webcomponents)
  * @deprecated Deprecated as of version 2.12.0, use `@ui5/webcomponents/dist/TableRow.js` instead.
  */
 const TableRow = withWebComponent<TableRowPropTypes, TableRowDomRef>(

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:__ `Array<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:__ `Array<HTMLElement>`
    */
   children?: ReactNode | ReactNode[];
   /**
@@ -172,7 +176,7 @@ interface AvatarPropTypes
  *
  *
  *
- * __Note__: This is a UI5 Web Component! [Repository](https://github.com/UI5/webcomponents) | [Documentation](https://ui5.github.io/webcomponents/)
+ * __Note:__ This is a UI5 Web Component! [Avatar UI5 Web Component Documentation](https://ui5.github.io/webcomponents/components/Avatar) | [Repository](https://github.com/UI5/webcomponents)
  */
 const Avatar = withWebComponent<AvatarPropTypes, AvatarDomRef>(
   'ui5-avatar',

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:__ `Array<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:__ `Array<IButton>`
    */
   overflowButton?: UI5WCSlotsNode;
   /**
@@ -163,7 +167,7 @@ interface AvatarGroupPropTypes
  * - [Tab] - Move focus to the next interactive element after the component
  * - [Space] / [Enter] or [Return] - Trigger `ui5-click` event
  *
- * __Note__: This is a UI5 Web Component! [Repository](https://github.com/UI5/webcomponents) | [Documentation](https://ui5.github.io/webcomponents/)
+ * __Note:__ This is a UI5 Web Component! [AvatarGroup UI5 Web Component Documentation](https://ui5.github.io/webcomponents/components/AvatarGroup) | [Repository](https://github.com/UI5/webcomponents)
  */
 const AvatarGroup = withWebComponent<AvatarGroupPropTypes, AvatarGroupDomRef>(
   'ui5-avatar-group',

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:__ `Array<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:__ `Array<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:__ `Array<HTMLElement>`
    */
   startContent?: UI5WCSlotsNode;
 }
@@ -86,7 +92,7 @@ interface BarPropTypes
  *
  *
  *
- * __Note__: This is a UI5 Web Component! [Repository](https://github.com/UI5/webcomponents) | [Documentation](https://ui5.github.io/webcomponents/)
+ * __Note:__ This is a UI5 Web Component! [Bar UI5 Web Component Documentation](https://ui5.github.io/webcomponents/components/Bar) | [Repository](https://github.com/UI5/webcomponents)
  */
 const Bar = withWebComponent<BarPropTypes, BarDomRef>(
   'ui5-bar',

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:__ `Array<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:__ `Array<HTMLElement>`
    */
   header?: UI5WCSlotsNode;
   /**
@@ -104,7 +108,7 @@ interface BarcodeScannerDialogPropTypes
  *
  * For a list of supported barcode formats, see the [zxing-js/library](https://github.com/zxing-js/library) documentation.
  *
- * __Note__: This is a UI5 Web Component! [Repository](https://github.com/UI5/webcomponents) | [Documentation](https://ui5.github.io/webcomponents/)
+ * __Note:__ This is a UI5 Web Component! [BarcodeScannerDialog UI5 Web Component Documentation](https://ui5.github.io/webcomponents/components/fiori/BarcodeScannerDialog) | [Repository](https://github.com/UI5/webcomponents)
  */
 const BarcodeScannerDialog = withWebComponent<BarcodeScannerDialogPropTypes, BarcodeScannerDialogDomRef>(
   'ui5-barcode-scanner-dialog',