docs: update main docs (#205)

Author: droshev

apps/documentation/src/app/stories/main/avatar.stories.ts

@@ -1,21 +1,11 @@
 import { Meta, StoryObj, moduleMetadata } from '@storybook/angular';
-import {
-  Ui5WebcomponentsModule,
-  AvatarComponent,
-} from '@ui5/webcomponents-ngx';
-import { extractArgTypes } from '../../arg-type-tools';
+import { Ui5WebcomponentsModule } from '@ui5/webcomponents-ngx';
+import { AvatarComponent,} from '@ui5/webcomponents-ngx/main/avatar';
+import { extractArgTypes, extractDescription } from '../../arg-type-tools';
 
-const description = `### Overview
+const description = `
 
-An image-like component 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.
-
-<br><br> <h3>Keyboard Handling</h3>
-
-<ul> <li>[SPACE, ENTER, RETURN] - Fires the <code>click</code> event if the <code>interactive</code> property is set to true.</li> <li>[SHIFT] - If [SPACE] is pressed, pressing [SHIFT] releases the component without triggering the click event.</li> </ul> <br><br>
-
-<h3>ES6 Module Import</h3>
+<h3>Module Import</h3>
 
 <code>import { AvatarComponent } from "@ui5/webcomponents-ngx/main/avatar";</code>`;
 export default {
@@ -30,7 +20,7 @@ export default {
     docs: {
       extractArgTypes,
       description: {
-        component: description,
+        component: extractDescription('AvatarComponent', AvatarComponent, description),
       },
     },
   },

apps/documentation/src/app/stories/main/avatargroup.stories.ts

@@ -1,29 +1,13 @@
 import { Meta, StoryObj, moduleMetadata } from '@storybook/angular';
-import {
-  Ui5WebcomponentsModule,
-  AvatarGroupComponent,
-} from '@ui5/webcomponents-ngx';
-import { extractArgTypes } from '../../arg-type-tools';
+import { Ui5WebcomponentsModule } from '@ui5/webcomponents-ngx';
+import { AvatarGroupComponent } from '@ui5/webcomponents-ngx/main/avatar-group';
+import { extractArgTypes, extractDescription } from '../../arg-type-tools';
 
-const description = `### Overview
+const description = `
 
-Displays a group of avatars arranged horizontally. It is useful to visually showcase a group of related avatars, such as, project team members or employees.
+<h3>Module Import</h3>
 
-The component allows you to display the avatars in different sizes, depending on your use case.
-
-The <code>AvatarGroup</code> component has two group types: <ul> <li><code>Group</code> type: The avatars are displayed as partially overlapped on top of each other and the entire group has one click/tap area.</li> <li><code>Individual</code> type: The avatars are displayed side-by-side and each avatar has its own click/tap area.</li> </ul>
-
-<h3>Responsive Behavior</h3>
-
-When the available space is less than the width required to display all avatars, an overflow visualization appears as a button placed at the end with the same shape and size as the avatars. The visualization displays the number of avatars that have overflowed and are not currently visible.
-
-<h3>Usage</h3>
-
-Use the <code>AvatarGroup</code> if: <ul> <li>You want to display a group of avatars.</li> <li>You want to display several avatars which have something in common.</li> </ul>
-
-Do not use the <code>AvatarGroup</code> if: <ul> <li>You want to display a single avatar.</li> <li>You want to display a gallery for simple images.</li> <li>You want to use it for other visual content than avatars.</li> </ul>
-
-<h3>Keyboard Handling</h3> The component provides advanced keyboard handling. When focused, the user can use the following keyboard shortcuts in order to perform a navigation: <br> - <code>type</code> Individual: <br> <ul> <li>[TAB] - Move focus to the overflow button</li> <li>[LEFT] - Navigate one avatar to the left</li> <li>[RIGHT] - Navigate one avatar to the right</li> <li>[HOME] - Navigate to the first avatar</li> <li>[END] - Navigate to the last avatar</li> <li>[SPACE],[ENTER],[RETURN] - Trigger <code>ui5-click</code> event</li> </ul> <br> - <code>type</code> Group: <br> <ul> <li>[TAB] - Move focus to the next interactive element after the component</li> <li>[SPACE],[ENTER],[RETURN] - Trigger <code>ui5-click</code> event</li> </ul> <br>`;
+<code>import { AvatarGroupComponent } from "@ui5/webcomponents-ngx/main/avatar-group";</code>`;
 export default {
   title: 'UI5 Web Components / Main / AvatarGroup',
   component: AvatarGroupComponent,
@@ -36,7 +20,7 @@ export default {
     docs: {
       extractArgTypes,
       description: {
-        component: description,
+        component: extractDescription('AvatarGroupComponent', AvatarGroupComponent, description),
       },
     },
   },

apps/documentation/src/app/stories/main/bar.stories.ts

@@ -1,30 +1,11 @@
 import { Meta, StoryObj, moduleMetadata } from '@storybook/angular';
-import { Ui5WebcomponentsModule, BarComponent } from '@ui5/webcomponents-ngx';
-import { extractArgTypes } from '../../arg-type-tools';
+import { Ui5WebcomponentsModule } from '@ui5/webcomponents-ngx';
+import { BarComponent } from '@ui5/webcomponents-ngx/main/bar';
+import { extractArgTypes, extractDescription } from '../../arg-type-tools';
 
 const description = `
-### Overview 
-The Bar is a container which is primarily used to hold titles, buttons and input elements and its design and functionality is the basis for page headers and footers. The component consists of three areas to hold its content - startContent slot, default slot and endContent slot. It has the capability to center content, such as a title, while having other components on the left and right side.
 
-### Usage
-
-With the use of the design property, you can set the style of the Bar to appear designed like a Header, Subheader, Footer and FloatingFooter. <br> <b>Note:</b> Do not place a Bar inside another Bar or inside any bar-like component. Doing so may cause unpredictable behavior.
-
-### Responsive Behavior
-
-The default slot will be centered in the available space between the startContent and the endContent areas, therefore it might not always be centered in the entire bar.
-
-### CSS Shadow Parts
-
-<ui5-link target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/CSS/::part">CSS Shadow Parts</ui5-link> allow developers to style elements inside the Shadow DOM. <br> The <code>ui5-bar</code> exposes the following CSS Shadow Parts: <ul> <li>bar - Used to style the wrapper of the content of the component</li> </ul>
-
-### Keyboard Handling
-
-#### Fast Navigation 
-
-This component provides a build in fast navigation group which can be used via <code>F6 / Shift + F6</code> or <code> Ctrl + Alt(Option) + Down / Ctrl + Alt(Option) + Up</code>. In order to use this functionality, you need to import the following module: <code>import "@ui5/webcomponents-base/dist/features/F6Navigation.js"</code> <br><br>
-
-### ES6 Module Import
+### Module Import
 
 <code>import { BarComponent } from "@ui5/webcomponents-ngx/main/bar";</code>`;
 export default {
@@ -39,7 +20,7 @@ export default {
     docs: {
       extractArgTypes,
       description: {
-        component: description,
+        component: extractDescription('BarComponent', BarComponent, description),
       },
     },
   },

apps/documentation/src/app/stories/main/breadcrumbs-item.stories.ts

@@ -0,0 +1,41 @@
+import { Meta, StoryObj, moduleMetadata } from '@storybook/angular';
+import { Ui5WebcomponentsModule } from '@ui5/webcomponents-ngx';
+import { BreadcrumbsItemComponent } from '@ui5/webcomponents-ngx/main/breadcrumbs-item';
+import { extractArgTypes, extractDescription } from '../../arg-type-tools';
+
+const description = `
+
+### Module Import
+
+<code>import { BreadcrumbsItemComponent } from "@ui5/webcomponents-ngx/main/breadcrumbs-item";</code>
+`;
+
+export default {
+  title: 'UI5 Web Components / Main / Breadcrumbs / BreadcrumbsItem',
+  component: BreadcrumbsItemComponent,
+  decorators: [
+    moduleMetadata({
+      imports: [
+        Ui5WebcomponentsModule,
+        BreadcrumbsItemComponent
+      ],
+    }),
+  ],
+  parameters: {
+    docs: {
+      extractArgTypes,
+      description: {
+        component: extractDescription( 'BreadcrumbsItemComponent', BreadcrumbsItemComponent, description),
+      },
+    },
+  },
+} as Meta;
+
+
+export const BreadcrumbsItem: StoryObj<BreadcrumbsItemComponent> = {
+	render: (args) => ({
+	  props: args,
+	  template: `
+	  `,
+	}),
+  };

apps/documentation/src/app/stories/main/breadcrumbs.stories.ts

@@ -1,13 +1,13 @@
 import { Meta, StoryObj, moduleMetadata } from '@storybook/angular';
-import {
-  Ui5WebcomponentsModule,
-  BreadcrumbsComponent,
-} from '@ui5/webcomponents-ngx';
-import { extractArgTypes } from '../../arg-type-tools';
+import { Ui5WebcomponentsModule } from '@ui5/webcomponents-ngx';
+import { BreadcrumbsComponent } from '@ui5/webcomponents-ngx/main/breadcrumbs';
+import { extractArgTypes, extractDescription } from '../../arg-type-tools';
 
-const description = `### Overview Enables users to navigate between items by providing a list of links to previous steps in the user's navigation path. It helps the user to be aware of their location within the application and allows faster navigation. <br><br> The last three steps can be accessed as links directly, while the remaining links prior to them are available in a drop-down menu. <br><br> You can choose the type of separator to be used from a number of predefined options.
+const description = `
 
-<h3>Keyboard Handling</h3> The <code>ui5-breadcrumbs</code> provides advanced keyboard handling. <br> <ul> <li>[F4, ALT+UP, ALT+DOWN, SPACE, ENTER] - If the dropdown arrow is focused - opens/closes the drop-down.</li> <li>[SPACE, ENTER] - Activates the focused item and triggers the <code>item-click</code> event.</li> <li>[ESC] - Closes the drop-down.</li> <li>[LEFT] - If the drop-down is closed - navigates one item to the left.</li> <li>[RIGHT] - If the drop-down is closed - navigates one item to the right.</li> <li>[UP] - If the drop-down is open - moves focus to the next item.</li> <li>[DOWN] - If the drop-down is open - moves focus to the previous item.</li> <li>[HOME] - Navigates to the first item.</li> <li>[END] - Navigates to the last item.</li> </ul> <br>`;
+<h3>Module Import</h3>
+
+<code>import { BreadcrumbsComponent } from "@ui5/webcomponents-ngx/main/breadcrumbs";</code>`;
 export default {
   title: 'UI5 Web Components / Main / Breadcrumbs',
   component: BreadcrumbsComponent,
@@ -20,7 +20,7 @@ export default {
     docs: {
       extractArgTypes,
       description: {
-        component: description,
+        component: extractDescription('BreadcrumbsComponent', BreadcrumbsComponent, description)
       },
     },
   },

apps/documentation/src/app/stories/main/busyindicator.stories.ts

@@ -1,21 +1,11 @@
 import { Meta, StoryObj, moduleMetadata } from '@storybook/angular';
-import {
-  Ui5WebcomponentsModule,
-  BusyIndicatorComponent,
-} from '@ui5/webcomponents-ngx';
-import { extractArgTypes } from '../../arg-type-tools';
+import { Ui5WebcomponentsModule } from '@ui5/webcomponents-ngx';
+import { BusyIndicatorComponent } from '@ui5/webcomponents-ngx/main/busy-indicator';
+import { extractArgTypes, extractDescription } from '../../arg-type-tools';
 
-const description = `### Overview
+const description = `
 
-The <code>ui5-busy-indicator</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. It displays 3 dots and each dot expands and shrinks at a different rate, resulting in a cascading flow of animation.
-
-<h3>Usage</h3> For the <code>ui5-busy-indicator</code> you can define the size, the text and whether it is shown or hidden. In order to hide it, use the "active" property. <br><br> In order to show busy state over an HTML element, simply nest the HTML element in a <code>ui5-busy-indicator</code> instance. <br> <b>Note:</b> Since <code>ui5-busy-indicator</code> has <code>display: inline-block;</code> by default and no width of its own, whenever you need to wrap a block-level element, you should set <code>display: block</code> to the busy indicator as well.
-
-<h4>When to use:</h4> <ul> <li>The user needs to be able to cancel the operation.</li> <li>Only part of the application or a particular component is affected.</li> </ul>
-
-<h4>When not to use:</h4> <ul> <li>The operation takes less than one second.</li> <li>You need to block the screen and prevent the user from starting another activity.</li> <li>Do not show multiple busy indicators at once.</li> </ul>
-
-<h3>ES6 Module Import</h3>
+<h3>Module Import</h3>
 
 <code>import { BusyIndicatorComponent } from "@ui5/webcomponents-ngx/main/busy-indicator";</code>`;
 export default {
@@ -30,7 +20,7 @@ export default {
     docs: {
       extractArgTypes,
       description: {
-        component: description,
+        component: extractDescription('BusyIndicatorComponent', BusyIndicatorComponent, description),
       },
     },
   },

apps/documentation/src/app/stories/main/button-badge.stories.ts

@@ -0,0 +1,41 @@
+import { Meta, StoryObj, moduleMetadata } from '@storybook/angular';
+import { Ui5WebcomponentsModule } from '@ui5/webcomponents-ngx';
+import { ButtonBadgeComponent } from '@ui5/webcomponents-ngx/main/button-badge';
+import { extractArgTypes, extractDescription } from '../../arg-type-tools';
+
+const description = `
+
+### Module Import
+
+<code>import { ButtonBadgeComponent } from "@ui5/webcomponents-ngx/main/button-badge";</code>
+`;
+
+export default {
+  title: 'UI5 Web Components / Main / Button / ButtonBadge',
+  component: ButtonBadgeComponent,
+  decorators: [
+    moduleMetadata({
+      imports: [
+        Ui5WebcomponentsModule,
+        ButtonBadgeComponent
+      ],
+    }),
+  ],
+  parameters: {
+    docs: {
+      extractArgTypes,
+      description: {
+        component: extractDescription( 'ButtonBadgeComponent', ButtonBadgeComponent, description),
+      },
+    },
+  },
+} as Meta;
+
+
+export const ButtonBadge: StoryObj<ButtonBadgeComponent> = {
+	render: (args) => ({
+	  props: args,
+	  template: `
+	  `,
+	}),
+  };

apps/documentation/src/app/stories/main/button.stories.ts

@@ -1,23 +1,11 @@
 import { Meta, StoryObj, moduleMetadata } from '@storybook/angular';
-import {
-  Ui5WebcomponentsModule,
-  ButtonComponent,
-} from '@ui5/webcomponents-ngx';
-import { extractArgTypes } from '../../arg-type-tools';
+import { Ui5WebcomponentsModule } from '@ui5/webcomponents-ngx';
+import { ButtonComponent } from '@ui5/webcomponents-ngx/main/button';
+import { extractArgTypes, extractDescription } from '../../arg-type-tools';
 
-const description = `### Overview
+const description = `
 
-The <code>ui5-button</code> component represents a simple push button. It enables users to trigger actions by clicking or tapping the <code>ui5-button</code>, or by pressing certain keyboard keys, such as Enter.
-
-<h3>Usage</h3>
-
-For the <code>ui5-button</code> UI, you can define text, icon, or both. You can also specify whether the text or the icon is displayed first. <br><br> You can choose from a set of predefined types that offer different styling to correspond to the triggered action. <br><br> You can set the <code>ui5-button</code> as enabled or disabled. An enabled <code>ui5-button</code> can be pressed by clicking or tapping it. The button changes its style to provide visual feedback to the user that it is pressed or hovered over with the mouse cursor. A disabled <code>ui5-button</code> appears inactive and cannot be pressed.
-
-<h3>CSS Shadow Parts</h3>
-
-<ui5-link target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/CSS/::part">CSS Shadow Parts</ui5-link> allow developers to style elements inside the Shadow DOM. <br> The <code>ui5-button</code> exposes the following CSS Shadow Parts: <ul> <li>button - Used to style the native button element</li> </ul>
-
-<h3>ES6 Module Import</h3>
+<h3>Module Import</h3>
 
 <code>import { ButtonComponent } from "@ui5/webcomponents-ngx/main/button";</code>`;
 export default {
@@ -32,7 +20,7 @@ export default {
     docs: {
       extractArgTypes,
       description: {
-        component: description,
+        component: extractDescription('ButtonComponent', ButtonComponent, description),
       },
     },
   },

apps/documentation/src/app/stories/main/calendar-date-range.stories.ts

@@ -0,0 +1,41 @@
+import { Meta, StoryObj, moduleMetadata } from '@storybook/angular';
+import { Ui5WebcomponentsModule } from '@ui5/webcomponents-ngx';
+import { CalendarDateRangeComponent } from '@ui5/webcomponents-ngx/main/calendar-date-range';
+import { extractArgTypes, extractDescription } from '../../arg-type-tools';
+
+const description = `
+
+### Module Import
+
+<code>import { CalendarDateRangeComponent } from "@ui5/webcomponents-ngx/main/calendar-date-range";</code>
+`;
+
+export default {
+  title: 'UI5 Web Components / Main / Calendar / CalendarDateRange',
+  component: CalendarDateRangeComponent,
+  decorators: [
+    moduleMetadata({
+      imports: [
+        Ui5WebcomponentsModule,
+        CalendarDateRangeComponent
+      ],
+    }),
+  ],
+  parameters: {
+    docs: {
+      extractArgTypes,
+      description: {
+        component: extractDescription( 'CalendarDateRangeComponent', CalendarDateRangeComponent, description),
+      },
+    },
+  },
+} as Meta;
+
+
+export const CalendarDateRange: StoryObj<CalendarDateRangeComponent> = {
+	render: (args) => ({
+	  props: args,
+	  template: `
+	  `,
+	}),
+  };