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

Author: Lukas742

.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>(