feat: enhance wrapper script to support component description and ui5-tag replacement

Author: Lukas742

packages/main/scripts/create-web-components-wrapper.js

@@ -1,3 +1,5 @@
 import { NotificationOverflowAction } from '../webComponents/NotificationOverflowAction';
+import type { NotificationOverflowActionPropTypes } from '../webComponents/NotificationOverflowAction';
 
 export { NotificationOverflowAction };
+export type { NotificationOverflowActionPropTypes };

packages/main/src/lib/NotificationOverflowAction.ts

@@ -1,22 +1,22 @@
+import { withWebComponent, WithWebComponentPropTypes } from '@ui5/webcomponents-react/lib/withWebComponent';
+import '@ui5/webcomponents/dist/Avatar';
+import { FC } from 'react';
 import { AvatarBackgroundColor } from '@ui5/webcomponents-react/lib/AvatarBackgroundColor';
 import { AvatarFitType } from '@ui5/webcomponents-react/lib/AvatarFitType';
 import { AvatarShape } from '@ui5/webcomponents-react/lib/AvatarShape';
 import { AvatarSize } from '@ui5/webcomponents-react/lib/AvatarSize';
-import { withWebComponent, WithWebComponentPropTypes } from '@ui5/webcomponents-react/lib/withWebComponent';
-import '@ui5/webcomponents/dist/Avatar';
-import { FC } from 'react';
 
 export interface AvatarPropTypes extends WithWebComponentPropTypes {
   /**
-   * Defines the text alternative of the <code>ui5-avatar</code>. If not provided a default text alternative will be set, if present.
+   * Defines the text alternative of the <code>Avatar</code>. If not provided a default text alternative will be set, if present.
    */
   accessibleName?: string;
   /**
    * Defines the background color of the desired image. <br><br> Available options are: <ul> <li><code>Accent1</code></li> <li><code>Accent2</code></li> <li><code>Accent3</code></li> <li><code>Accent4</code></li> <li><code>Accent5</code></li> <li><code>Accent6</code></li> <li><code>Accent7</code></li> <li><code>Accent8</code></li> <li><code>Accent9</code></li> <li><code>Accent10</code></li> <li><code>Placeholder</code></li> <ul>
    */
   backgroundColor?: AvatarBackgroundColor;
   /**
-   * Defines the name of the UI5 Icon, that would be displayed. <br> <b>Note:</b> If <code>image</code> is set, the property would be ignored. <br> <b>Note:</b> You should import the desired icon first, then use its name as "icon". <br><br> import "@ui5/webcomponents-icons/dist/icons/{icon_name}.js" <br> <pre>&lt;ui5-avatar icon-src="employee"></pre><br/><br/>
+   * Defines the name of the UI5 Icon, that would be displayed. <br> <b>Note:</b> If <code>image</code> is set, the property would be ignored. <br> <b>Note:</b> You should import the desired icon first, then use its name as "icon". <br><br> import "@ui5/webcomponents-icons/dist/icons/{icon_name}.js" <br> <pre>&lt;Avatar icon-src="employee"></pre><br/><br/>
    *
    * See all the available icons in the <ui5-link target="_blank" href="https://openui5.hana.ondemand.com/test-resources/sap/m/demokit/iconExplorer/webapp/index.html" class="api-table-content-cell-link">Icon Explorer</ui5-link>.
    */
@@ -30,22 +30,26 @@ export interface AvatarPropTypes extends WithWebComponentPropTypes {
    */
   imageFitType?: AvatarFitType;
   /**
-   * Defines the displayed initials. <br> Up to two Latin letters can be displayed as initials in a <code>ui5-avatar</code>.
+   * Defines the displayed initials. <br> Up to two Latin letters can be displayed as initials in a <code>Avatar</code>.
    */
   initials?: string;
   /**
-   * Defines the shape of the <code>ui5-avatar</code>. <br><br> Available options are: <ul> <li><code>Circle</code></li> <li><code>Square</code></li> <ul>
+   * Defines the shape of the <code>Avatar</code>. <br><br> Available options are: <ul> <li><code>Circle</code></li> <li><code>Square</code></li> <ul>
    */
   shape?: AvatarShape;
   /**
-   * Defines predefined size of the <code>ui5-avatar</code>. <br><br> Available options are: <ul> <li><code>XS</code></li> <li><code>S</code></li> <li><code>M</code></li> <li><code>L</code></li> <li><code>XL</code></li> <ul>
+   * Defines predefined size of the <code>Avatar</code>. <br><br> Available options are: <ul> <li><code>XS</code></li> <li><code>S</code></li> <li><code>M</code></li> <li><code>L</code></li> <li><code>XL</code></li> <ul>
    */
   size?: AvatarSize;
 }
 
 /**
- * <a href="https://sap.github.io/ui5-webcomponents/playground/components/Avatar" target="_blank">UI5 Web Components Playground</a>
- */
+     * An image-like control that has different display options for representing images and icons in different shapes and
+sizes, depending on the use case. The shape can be circular or square. There are several predefined sizes, as well as an
+option to set a custom size.
+     
+     * <a href="https://sap.github.io/ui5-webcomponents/playground/components/Avatar" target="_blank">UI5 Web Components Playground</a>
+     */
 const Avatar: FC<AvatarPropTypes> = withWebComponent<AvatarPropTypes>(
   'ui5-avatar',
   ['accessibleName', 'backgroundColor', 'icon', 'image', 'imageFitType', 'initials', 'shape', 'size'],

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

@@ -1,25 +1,30 @@
 import { withWebComponent, WithWebComponentPropTypes } from '@ui5/webcomponents-react/lib/withWebComponent';
 import '@ui5/webcomponents/dist/Badge';
-import { FC, ReactNode } from 'react';
+import { FC } from 'react';
+import { ReactNode } from 'react';
 
 export interface BadgePropTypes extends WithWebComponentPropTypes {
   /**
-   * Defines the color scheme of the <code>ui5-badge</code>. There are 10 predefined schemes. Each scheme applies different values for the <code>background-color</code> and <code>border-color</code>. To use one you can set a number from <code>"1"</code> to <code>"10"</code>. The <code>colorScheme</code> <code>"1"</code> will be set by default. <br><br> <b>Note:</b> Color schemes have no visual representation in High Contrast Black (sap_belize_hcb) theme.
+   * Defines the color scheme of the <code>Badge</code>. There are 10 predefined schemes. Each scheme applies different values for the <code>background-color</code> and <code>border-color</code>. To use one you can set a number from <code>"1"</code> to <code>"10"</code>. The <code>colorScheme</code> <code>"1"</code> will be set by default. <br><br> <b>Note:</b> Color schemes have no visual representation in High Contrast Black (sap_belize_hcb) theme.
    */
   colorScheme?: string;
   /**
-   * Defines the text of the <code>ui5-badge</code>. <br><b>Note:</b> Аlthough this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design.
+   * Defines the text of the <code>Badge</code>. <br><b>Note:</b> Аlthough this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design.
    */
   children?: ReactNode | ReactNode[];
   /**
-   * Defines the <code>ui5-icon</code> to be displayed in the <code>ui5-badge</code>.
+   * Defines the <code>Icon</code> to be displayed in the <code>Badge</code>.
    */
   icon?: ReactNode | ReactNode[];
 }
 
 /**
- * <a href="https://sap.github.io/ui5-webcomponents/playground/components/Badge" target="_blank">UI5 Web Components Playground</a>
- */
+     * The <code>Badge</code> is a small non-interactive component which contains text information and color chosen from a list
+of predefined color schemes. It serves the purpose to attract the user attention to some piece of information (state,
+quantity, condition, etc.).
+     
+     * <a href="https://sap.github.io/ui5-webcomponents/playground/components/Badge" target="_blank">UI5 Web Components Playground</a>
+     */
 const Badge: FC<BadgePropTypes> = withWebComponent<BadgePropTypes>('ui5-badge', ['colorScheme'], [], ['icon'], []);
 
 Badge.displayName = 'Badge';

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

@@ -1,30 +1,34 @@
-import { BusyIndicatorSize } from '@ui5/webcomponents-react/lib/BusyIndicatorSize';
 import { withWebComponent, WithWebComponentPropTypes } from '@ui5/webcomponents-react/lib/withWebComponent';
 import '@ui5/webcomponents/dist/BusyIndicator';
-import { FC, ReactNode } from 'react';
+import { FC } from 'react';
+import { BusyIndicatorSize } from '@ui5/webcomponents-react/lib/BusyIndicatorSize';
+import { ReactNode } from 'react';
 
 export interface BusyIndicatorPropTypes extends WithWebComponentPropTypes {
   /**
    * Defines if the busy indicator is visible on the screen. By default it is not.
    */
   active?: boolean;
   /**
-   * Defines the size of the <code>ui5-busyindicator</code>. <br><br> <b>Note:</b> Available options are "Small", "Medium", and "Large".
+   * Defines the size of the <code>BusyIndicator</code>. <br><br> <b>Note:</b> Available options are "Small", "Medium", and "Large".
    */
   size?: BusyIndicatorSize;
   /**
    * Defines text to be displayed below the busy indicator. It can be used to inform the user of the current operation.
    */
   text?: string;
   /**
-   * Determines the content over which the <code>ui5-busyindicator</code> will appear.
+   * Determines the content over which the <code>BusyIndicator</code> will appear.
    */
   children?: ReactNode | ReactNode[];
 }
 
 /**
- * <a href="https://sap.github.io/ui5-webcomponents/playground/components/BusyIndicator" target="_blank">UI5 Web Components Playground</a>
- */
+     * The <code>BusyIndicator</code> signals that some operation is going on and that the user must wait. It does not block
+the current UI screen so other operations could be triggered in parallel.
+     
+     * <a href="https://sap.github.io/ui5-webcomponents/playground/components/BusyIndicator" target="_blank">UI5 Web Components Playground</a>
+     */
 const BusyIndicator: FC<BusyIndicatorPropTypes> = withWebComponent<BusyIndicatorPropTypes>(
   'ui5-busyindicator',
   ['size', 'text'],

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

@@ -1,44 +1,48 @@
-import { ButtonDesign } from '@ui5/webcomponents-react/lib/ButtonDesign';
 import { withWebComponent, WithWebComponentPropTypes } from '@ui5/webcomponents-react/lib/withWebComponent';
 import '@ui5/webcomponents/dist/Button';
-import { FC, ReactNode } from 'react';
+import { FC } from 'react';
+import { ButtonDesign } from '@ui5/webcomponents-react/lib/ButtonDesign';
+import { ReactNode } from 'react';
 
 export interface ButtonPropTypes extends Omit<WithWebComponentPropTypes, 'onClick'> {
   /**
-   * Defines the <code>ui5-button</code> design. <br><br> <b>Note:</b> Available options are "Default", "Emphasized", "Positive", "Negative", and "Transparent".
+   * Defines the <code>Button</code> design. <br><br> <b>Note:</b> Available options are "Default", "Emphasized", "Positive", "Negative", and "Transparent".
    */
   design?: ButtonDesign;
   /**
-   * Defines whether the <code>ui5-button</code> is disabled (default is set to <code>false</code>). A disabled <code>ui5-button</code> can't be pressed or focused, and it is not in the tab chain.
+   * Defines whether the <code>Button</code> is disabled (default is set to <code>false</code>). A disabled <code>Button</code> can't be pressed or focused, and it is not in the tab chain.
    */
   disabled?: boolean;
   /**
-   * Defines the icon to be displayed as graphical element within the <code>ui5-button</code>. The SAP-icons font provides numerous options. <br><br> Example: <br> <pre>ui5-button icon="palette"</pre><br/><br/>
+   * Defines the icon to be displayed as graphical element within the <code>Button</code>. The SAP-icons font provides numerous options. <br><br> Example: <br> <pre>Button icon="palette"</pre><br/><br/>
    *
    * See all the available icons in the <ui5-link target="_blank" href="https://openui5.hana.ondemand.com/test-resources/sap/m/demokit/iconExplorer/webapp/index.html" class="api-table-content-cell-link">Icon Explorer</ui5-link>.
    */
   icon?: string;
   /**
-   * Defines whether the icon should be displayed after the <code>ui5-button</code> text.
+   * Defines whether the icon should be displayed after the <code>Button</code> text.
    */
   iconEnd?: boolean;
   /**
-   * When set to <code>true</code>, the <code>ui5-button</code> will automatically submit the nearest form element upon <code>press</code>. <br><br> <b>Important:</b> For the <code>submits</code> property to have effect, you must add the following import to your project: <code>import "@ui5/webcomponents/dist/features/InputElementsFormSupport.js";</code>
+   * When set to <code>true</code>, the <code>Button</code> will automatically submit the nearest form element upon <code>press</code>. <br><br> <b>Important:</b> For the <code>submits</code> property to have effect, you must add the following import to your project: <code>import "@ui5/webcomponents/dist/features/InputElementsFormSupport.js";</code>
    */
   submits?: boolean;
   /**
-   * Defines the text of the <code>ui5-button</code>. <br><br> <b>Note:</b> Аlthough this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design.
+   * Defines the text of the <code>Button</code>. <br><br> <b>Note:</b> Аlthough this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design.
    */
   children?: ReactNode | ReactNode[];
   /**
-   * Fired when the <code>ui5-button</code> is activated either with a mouse/tap or by using the Enter or Space key. <br><br> <b>Note:</b> The event will not be fired if the <code>disabled</code> property is set to <code>true</code>.
+   * Fired when the <code>Button</code> is activated either with a mouse/tap or by using the Enter or Space key. <br><br> <b>Note:</b> The event will not be fired if the <code>disabled</code> property is set to <code>true</code>.
    */
   onClick?: (event: CustomEvent<{}>) => void;
 }
 
 /**
- * <a href="https://sap.github.io/ui5-webcomponents/playground/components/Button" target="_blank">UI5 Web Components Playground</a>
- */
+     * The <code>Button</code> component represents a simple push button. It enables users to trigger actions by clicking or
+tapping the <code>Button</code>, or by pressing certain keyboard keys, such as Enter.
+     
+     * <a href="https://sap.github.io/ui5-webcomponents/playground/components/Button" target="_blank">UI5 Web Components Playground</a>
+     */
 const Button: FC<ButtonPropTypes> = withWebComponent<ButtonPropTypes>(
   'ui5-button',
   ['design', 'icon'],

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

@@ -1,7 +1,7 @@
-import { CalendarType } from '@ui5/webcomponents-react/lib/CalendarType';
 import { withWebComponent, WithWebComponentPropTypes } from '@ui5/webcomponents-react/lib/withWebComponent';
 import '@ui5/webcomponents/dist/Calendar';
 import { FC } from 'react';
+import { CalendarType } from '@ui5/webcomponents-react/lib/CalendarType';
 
 export interface CalendarPropTypes extends WithWebComponentPropTypes {
   /**
@@ -19,7 +19,7 @@ export interface CalendarPropTypes extends WithWebComponentPropTypes {
    */
   minDate?: string;
   /**
-   * Defines the calendar type used for display. If not defined, the calendar type of the global configuration is used. Available options are: "Gregorian", "Islamic", "Japanese", "Buddhist" and "Persian".
+   * Defines the calendar type used for display. If not defined, the calendar type of the global configuration is used. Available options are: "Gregorian", "Islamic", "Japanese", "Buddhist" and "Persian".<br/><b>Note:</b> Calendar types other than Gregorian must be imported manually:<br /><code>import "@ui5/webcomponents-localization/dist/features/calendar/{primaryCalendarType}.js";</code>
    */
   primaryCalendarType?: CalendarType;
   /**
@@ -37,8 +37,11 @@ export interface CalendarPropTypes extends WithWebComponentPropTypes {
 }
 
 /**
- * <a href="https://sap.github.io/ui5-webcomponents/playground/components/Calendar" target="_blank">UI5 Web Components Playground</a>
- */
+     * The <code>Calendar</code> can be used standale to display the years, months, weeks and days, but the main purpose of the
+<code>Calendar</code> is to be used within a <code>DatePicker</code>
+     
+     * <a href="https://sap.github.io/ui5-webcomponents/playground/components/Calendar" target="_blank">UI5 Web Components Playground</a>
+     */
 const Calendar: FC<CalendarPropTypes> = withWebComponent<CalendarPropTypes>(
   'ui5-calendar',
   ['maxDate', 'minDate', 'primaryCalendarType', 'selectedDates', 'timestamp'],

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

@@ -1,22 +1,23 @@
 import { withWebComponent, WithWebComponentPropTypes } from '@ui5/webcomponents-react/lib/withWebComponent';
 import '@ui5/webcomponents/dist/Card';
-import { FC, ReactNode } from 'react';
+import { FC } from 'react';
+import { ReactNode } from 'react';
 
 export interface CardPropTypes extends WithWebComponentPropTypes {
   /**
-   * Defines if the <code>ui5-card</code> header would be interactive, e.g gets hover effect, gets focused and <code>headerPress</code> event is fired, when it is pressed.
+   * Defines if the <code>Card</code> header would be interactive, e.g gets hover effect, gets focused and <code>headerPress</code> event is fired, when it is pressed.
    */
   headerInteractive?: boolean;
   /**
-   * Defines the title displayed in the <code>ui5-card</code> header.
+   * Defines the title displayed in the <code>Card</code> header.
    */
   heading?: string;
   /**
-   * Defines the status displayed in the <code>ui5-card</code> header. <br><br> <b>Note:</b> If the <code>action</code> slot is set, the <code>status</code> will not be displayed, you can either have <code>action</code>, or <code>status</code>.
+   * Defines the status displayed in the <code>Card</code> header. <br><br> <b>Note:</b> If the <code>action</code> slot is set, the <code>status</code> will not be displayed, you can either have <code>action</code>, or <code>status</code>.
    */
   status?: string;
   /**
-   * Defines the subheading displayed in the <code>ui5-card</code> header.
+   * Defines the subheading displayed in the <code>Card</code> header.
    */
   subheading?: string;
   /**
@@ -28,18 +29,23 @@ export interface CardPropTypes extends WithWebComponentPropTypes {
    */
   avatar?: ReactNode | ReactNode[];
   /**
-   * Defines the content of the <code>ui5-card</code>.
+   * Defines the content of the <code>Card</code>.
    */
   children?: ReactNode | ReactNode[];
   /**
-   * Fired when the <code>ui5-card</code> header is activated by mouse/tap or by using the Enter or Space key. <br><br> <b>Note:</b> The event would be fired only if the <code>headerInteractive</code> property is set to true.
+   * Fired when the <code>Card</code> header is activated by mouse/tap or by using the Enter or Space key. <br><br> <b>Note:</b> The event would be fired only if the <code>headerInteractive</code> property is set to true.
    */
   onHeaderClick?: (event: CustomEvent<{}>) => void;
 }
 
 /**
- * <a href="https://sap.github.io/ui5-webcomponents/playground/components/Card" target="_blank">UI5 Web Components Playground</a>
- */
+     * The <code>Card</code> is a component that represents information in the form of a tile with separate header and content
+areas. The content area of a <code>Card</code> can be arbitrary HTML content. The header can be used through several
+properties, such as: <code>heading</code>, <code>subheading</code>, <code>status</code> and two slots:
+<code>avatar</code> and <code>action</code>.
+     
+     * <a href="https://sap.github.io/ui5-webcomponents/playground/components/Card" target="_blank">UI5 Web Components Playground</a>
+     */
 const Card: FC<CardPropTypes> = withWebComponent<CardPropTypes>(
   'ui5-card',
   ['heading', 'status', 'subheading'],