docs: update fiori package API docs (#206)

Author: droshev

apps/documentation/src/app/stories/fiori/barcodescannerdialog.stories.ts

@@ -1,18 +1,14 @@
 import { Meta, StoryObj, moduleMetadata } from '@storybook/angular';
-import {
-  Ui5WebcomponentsModule,
-  BarcodeScannerDialogComponent,
-} from '@ui5/webcomponents-ngx';
-import { extractArgTypes } from '../../arg-type-tools';
+import { Ui5WebcomponentsModule } from '@ui5/webcomponents-ngx';
+import { BarcodeScannerDialogComponent } from '@ui5/webcomponents-ngx/fiori/barcode-scanner-dialog';
+import { extractArgTypes, extractDescription } from '../../arg-type-tools';
 import { CommonModule } from '@angular/common';
 
 const description = `
-### Overview
 
-The <code>BarcodeScannerDialog</code> component provides barcode scanning functionality for all devices that support the <code>MediaDevices.getUserMedia()</code> native API. Opening the dialog launches the device camera and scans for known barcode formats. <br> <br> A <code>scanSuccess</code> event fires whenever a barcode is identified and a <code>scanError</code> event fires when the scan failed (for example, due to missing permisions). <br> <br> Internally, the component uses the zxing-js/library third party OSS.
+###Module Import
 
-For a list of supported barcode formats, see the <ui5-link target="_blank" href="https://github.com/zxing-js/library">zxing-js/library</ui5-link> documentation.
-`;
+<code>import { BarcodeScannerDialogComponent } from '@ui5/webcomponents-ngx/fiori/barcode-scanner-dialog'</code>`;
 
 const meta: Meta<BarcodeScannerDialogComponent> = {
   title: 'UI5 Web Components / Fiori / BarcodeScannerDialog',
@@ -26,7 +22,7 @@ const meta: Meta<BarcodeScannerDialogComponent> = {
     docs: {
       extractArgTypes,
       description: {
-        component: description,
+        component: extractDescription('BarcodeScannerDialog', BarcodeScannerDialogComponent, description),
       },
     },
   },

apps/documentation/src/app/stories/fiori/dynamicpage-header.stories.ts

@@ -0,0 +1,36 @@
+import { Meta, StoryObj, moduleMetadata } from '@storybook/angular';
+import { Ui5WebcomponentsModule } from '@ui5/webcomponents-ngx';
+import { DynamicPageHeaderComponent } from '@ui5/webcomponents-ngx/fiori/dynamic-page-header';
+import { extractArgTypes, extractDescription } from '../../arg-type-tools';
+
+const description = `
+
+###Module Import
+
+<code>import { DynamicPageHeaderComponent } from "@ui5/webcomponents-ngx/fiori/dynamic-page-header";</code>`;
+export default {
+  title: 'UI5 Web Components / Fiori / DynamicPage / DynamicPageHeader',
+  component: DynamicPageHeaderComponent,
+  decorators: [
+    moduleMetadata({
+      imports: [Ui5WebcomponentsModule],
+    }),
+  ],
+  parameters: {
+    docs: {
+      extractArgTypes,
+      description: {
+        component: extractDescription( 'DynamicPageHeaderComponent', DynamicPageHeaderComponent, description),
+      },
+    },
+  },
+} as Meta;
+
+
+export const DynamicPageHeader: StoryObj<DynamicPageHeaderComponent> = {
+	render: (args) => ({
+	  props: args,
+	  template: `
+	  `,
+	}),
+  };

apps/documentation/src/app/stories/fiori/dynamicpage-title.stories.ts

@@ -0,0 +1,36 @@
+import { Meta, StoryObj, moduleMetadata } from '@storybook/angular';
+import { Ui5WebcomponentsModule } from '@ui5/webcomponents-ngx';
+import { DynamicPageTitleComponent } from '@ui5/webcomponents-ngx/fiori/dynamic-page-title';
+import { extractArgTypes, extractDescription } from '../../arg-type-tools';
+
+const description = `
+
+###Module Import
+
+<code>import { DynamicPageTitleComponent } from "@ui5/webcomponents-ngx/fiori/dynamic-page-title";</code>`;
+export default {
+  title: 'UI5 Web Components / Fiori / DynamicPage / DynamicPageTitle',
+  component: DynamicPageTitleComponent,
+  decorators: [
+    moduleMetadata({
+      imports: [Ui5WebcomponentsModule],
+    }),
+  ],
+  parameters: {
+    docs: {
+      extractArgTypes,
+      description: {
+        component: extractDescription( 'DynamicPageTitleComponent', DynamicPageTitleComponent, description),
+      },
+    },
+  },
+} as Meta;
+
+
+export const DynamicPageTitle: StoryObj<DynamicPageTitleComponent> = {
+	render: (args) => ({
+	  props: args,
+	  template: `
+	  `,
+	}),
+  };

apps/documentation/src/app/stories/fiori/dynamicpage.stories.ts

@@ -1,26 +1,13 @@
 import { Meta, StoryObj, moduleMetadata } from '@storybook/angular';
-import {
-  Ui5WebcomponentsModule,
-  DynamicPageComponent,
-} from '@ui5/webcomponents-ngx';
-import { extractArgTypes } from '../../arg-type-tools';
+import { Ui5WebcomponentsModule } from '@ui5/webcomponents-ngx';
+import { DynamicPageComponent } from '@ui5/webcomponents-ngx/fiori/dynamic-page';
+import { extractArgTypes, extractDescription } from '../../arg-type-tools';
 
-const description = `### Overview
+const description = `
 
-A layout component, representing a web page, consisting of a title, header with dynamic behavior, a content area, and an optional floating footer.
+<h3>Module Import</h3>
 
-The component consists of several components:
-
-- DynamicPageTitle - a component, holding the title of the page, the navigation actions, and the content. The displayed content changes based on the current mode of the DynamicPageHeader.
-- DynamicPageHeader - a generic container, which can contain a single layout component and any other HTML elements. The header works in two modes - expanded and snapped, and its behavior can be adjusted with the help of different properties.
-- Content area - a generic container, which can have a single UI5 layout.
-- Footer - positioned at the bottom with a small offset and used for additional actions, the footer floats above the content.
-
-<h3>ES6 Module Import</h3>
-
-<code>import { DynamicPage } from "@ui5/webcomponents-ngx/fiori/dynamic-page";</code>;
-<code>import { DynamicPageTitle } from "@ui5/webcomponents-ngx/fiori/dynamic-page-title";</code>;
-<code>import { DynamicPageHeader } from "@ui5/webcomponents-ngx/fiori/dynamic-page-header";</code>;
+<code>import { DynamicPageComponent } from "@ui5/webcomponents-ngx/fiori/dynamic-page";</code>
 `;
 
 export default {
@@ -35,7 +22,7 @@ export default {
     docs: {
       extractArgTypes,
       description: {
-        component: description,
+        component: extractDescription('DynamicPageComponent', DynamicPageComponent, description),
       },
     },
   },

apps/documentation/src/app/stories/fiori/dynamicsidecontent.stories.ts

@@ -1,45 +1,11 @@
 import { Meta, StoryObj, moduleMetadata } from '@storybook/angular';
-import {
-  Ui5WebcomponentsModule,
-  DynamicSideContentComponent,
-} from '@ui5/webcomponents-ngx';
-import { extractArgTypes } from '../../arg-type-tools';
+import { Ui5WebcomponentsModule } from '@ui5/webcomponents-ngx';
+import { DynamicSideContentComponent } from '@ui5/webcomponents-ngx/fiori/dynamic-side-content';
+import { extractArgTypes, extractDescription } from '../../arg-type-tools';
 
-const description = `### Overview
+const description = `
 
-The DynamicSideContent (<code>ui5-dynamic-side-content</code>) is a layout component that allows additional content to be displayed in a way that flexibly adapts to different screen sizes. The side content appears in a container next to or directly below the main content (it doesn't overlay). When the side content is triggered, the main content becomes narrower (if appearing side-by-side). The side content contains a separate scrollbar when appearing next to the main content.
-
-<h3>Usage</h3>
-
-<i>When to use?</i>
-
-Use this component if you want to display relevant information that is not critical for users to complete a task. Users should have access to all the key functions and critical information in the app even if they do not see the side content. This is important because on smaller screen sizes it may be difficult to display the side content in a way that is easily accessible for the user.
-
-<i>When not to use?</i>
-
-Don't use it if you want to display navigation or critical information that prevents users from completing a task when they have no access to the side content.
-
-<h3>Responsive Behavior</h3>
-
-Screen width > 1440px
-
-<ul><li>Main vs. side content ratio is 75 vs. 25 percent (with a minimum of 320px each).</li> <li>If the application defines a trigger, the side content can be hidden.</li></ul>
-
-Screen width <= 1440px and > 1024px
-
-<ul><li>Main vs. side content ratio is 66.666 vs. 33.333 percent (with a minimum of 320px each). If the side content width falls below 320 px, it automatically slides under the main content, unless the app development team specifies that it should disappear.</li></ul>
-
-Screen width <= 1024px and > 720px
-
-<ul><li>The side content ratio is fixed to 340px, and the main content takes the rest of the width. Only if the <code>sideContentFallDown</code> is set to <code>OnMinimumWidth</code> and screen width is <= 960px and > 720px the side content falls below the main content.</li></ul>
-
-Screen width <= 720px (for example on a mobile device)
-
-<ul><li>In this case, the side content automatically disappears from the screen (unless specified to stay under the content by setting of <code>sideContentVisibility</code> property to <code>AlwaysShow</code>) and can be triggered from a pre-set trigger (specified within the app). When the side content is triggered, it replaces the main content. We recommend that you always place the trigger for the side content in the same location, such as in the app footer.</li></ul>
-
-A special case allows switching the comparison mode between the main and side content. In this case, the screen is split into 50:50 percent for main vs. side content. The responsive behavior of the equal split is the same as in the standard view - the side content disappears on screen widths of less than 720 px and can only be viewed by triggering it.
-
-<h3>ES6 Module Import</h3>
+<h3>Module Import</h3>
 
 <code>import { DynamicSideContentComponent } from "@ui5/webcomponents-ngx/fiori/dynamic-side-content";</code>`;
 const meta: Meta<DynamicSideContentComponent> = {
@@ -54,7 +20,7 @@ const meta: Meta<DynamicSideContentComponent> = {
     docs: {
       extractArgTypes,
       description: {
-        component: description,
+        component: extractDescription('DynamicSideContentComponent', DynamicSideContentComponent, description),
       },
     },
   },

apps/documentation/src/app/stories/fiori/flexiblecolumnlayout.stories.ts

@@ -1,44 +1,26 @@
 import { Meta, StoryObj, moduleMetadata } from '@storybook/angular';
-import {
-  Ui5WebcomponentsModule,
-  FlexibleColumnLayoutComponent,
-} from '@ui5/webcomponents-ngx';
-import { extractArgTypes } from '../../arg-type-tools';
+import { Ui5WebcomponentsModule } from '@ui5/webcomponents-ngx';
+import { FlexibleColumnLayoutComponent } from '@ui5/webcomponents-ngx/fiori/flexible-column-layout';
+import { extractArgTypes, extractDescription } from '../../arg-type-tools';
 
-const description = `### Overview
+const description = `
 
-The <code>FlexibleColumnLayout</code> implements the list-detail-detail paradigm by displaying up to three pages in separate columns. There are several possible layouts that can be changed either with the component API, or by pressing the arrows, displayed between the columns.
-
-<h3>Usage</h3>
-
-Use this component for applications that need to display several logical levels of related information side by side (e.g. list of items, item, sub-item, etc.). The Component is flexible in a sense that the application can focus the user's attention on one particular column.
-
-<h3>Responsive Behavior</h3>
-
-The <code>FlexibleColumnLayout</code> automatically displays the maximum possible number of columns based on <code>layout</code> property and the window size. The component would display 1 column for window size smaller than 599px, up to two columns between 599px and 1023px, and 3 columns for sizes bigger than 1023px.
-
-<br><br> <h3>Keyboard Handling</h3>
-
-<h4>Basic Navigation</h4> <ul> <li>[SPACE, ENTER, RETURN] - If focus is on the layout toggle button (arrow button), once activated, it triggers the associated action (such as expand/collapse the column).</li> <li>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></li> </ul>
-
-<h4>Fast Navigation</h4> 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>
-
-<h3>ES6 Module Import</h3>
+<h3>Module Import</h3>
 
 <code>import { FlexibleColumnLayoutComponent } from "@ui5/webcomponents-ngx/fiori/flexible-column-layout";</code>`;
 export default {
   title: 'UI5 Web Components / Fiori / FlexibleColumnLayout',
   component: FlexibleColumnLayoutComponent,
   decorators: [
     moduleMetadata({
-      imports: [Ui5WebcomponentsModule],
+      imports: [Ui5WebcomponentsModule, FlexibleColumnLayoutComponent],
     }),
   ],
   parameters: {
     docs: {
       extractArgTypes,
       description: {
-        component: description,
+        component: extractDescription('FlexibleColumnLayoutComponent', FlexibleColumnLayoutComponent, description),
       },
     },
   },

apps/documentation/src/app/stories/fiori/illustratedmessage.stories.ts

@@ -1,43 +1,26 @@
 import { Meta, StoryObj, moduleMetadata } from '@storybook/angular';
-import {
-  Ui5WebcomponentsModule,
-  IllustratedMessageComponent,
-} from '@ui5/webcomponents-ngx';
-import { extractArgTypes } from '../../arg-type-tools';
+import { Ui5WebcomponentsModule } from '@ui5/webcomponents-ngx';
+import { IllustratedMessageComponent } from '@ui5/webcomponents-ngx/fiori/illustrated-message';
+import { extractArgTypes, extractDescription } from '../../arg-type-tools';
 
 const description = `
-### Overview 
 
-An IllustratedMessage is a recommended combination of a solution-oriented message, an engaging illustration, and conversational tone to better communicate an empty or a success state than just show a message alone.
-
-Each illustration has default internationalised title and subtitle texts. Also they can be managed with <code>titleText</code> and <code>subtitleText</code> properties.
-
-To display the desired illustration, use the <code>name</code> property, where you can find the list of all available illustrations. <br><br> <b>Note:</b> By default the “BeforeSearch” illustration is loaded. To use other illustrations, make sure you import them in addition, for example: <br> <code>import "@ui5/webcomponents-fiori/dist/illustrations/NoData.js"</code> <br> <b>Note:</b> Illustrations starting with the “Tnt” prefix are part of another illustration set. For example to use the “TntSuccess” illustration, add the following import:: <br> <code>import "@ui5/webcomponents-fiori/dist/illustrations/tnt/Success.js"</code>
-
-### Structure
-
-The IllustratedMessage consists of the following elements, which are displayed below each other in the following order: <br> <ul> <li>Illustration</li> <li>Title</li> <li>Subtitle</li> <li>Actions</li> </ul>
-
-### Usage 
-
-<code>ui5-illustrated-message</code> is meant to be used inside container component, for example a <code>ui5-card</code>, a <code>ui5-dialog</code> or a <code>ui5-page</code>
-
-### ES6 Module Import
+### Module Import
 
 <code>import { IllustratedMessageComponent } from "@ui5/webcomponents-ngx/fiori/illustrated-message";</code>`;
 export default {
   title: 'UI5 Web Components / Fiori / IllustratedMessage',
   component: IllustratedMessageComponent,
   decorators: [
     moduleMetadata({
-      imports: [Ui5WebcomponentsModule],
+      imports: [Ui5WebcomponentsModule, IllustratedMessageComponent],
     }),
   ],
   parameters: {
     docs: {
       extractArgTypes,
       description: {
-        component: description,
+        component: extractDescription('IllustratedMessageComponent' ,IllustratedMessageComponent, description),
       },
     },
   },

apps/documentation/src/app/stories/fiori/mediagallery-item.stories.ts

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

apps/documentation/src/app/stories/fiori/mediagallery.stories.ts

@@ -1,21 +1,13 @@
 import { Meta, StoryObj, moduleMetadata } from '@storybook/angular';
-import {
-  Ui5WebcomponentsModule,
-  MediaGalleryComponent,
-} from '@ui5/webcomponents-ngx';
-import { extractArgTypes } from '../../arg-type-tools';
+import { Ui5WebcomponentsModule } from '@ui5/webcomponents-ngx';
+import { MediaGalleryComponent } from '@ui5/webcomponents-ngx/fiori/media-gallery';
+import { extractArgTypes, extractDescription } from '../../arg-type-tools';
 
-const description = `### Overview
+const description = `
 
-The <code>ui5-media-gallery</code> component allows the user to browse through multimedia items. Currently, the supported items are images and videos. The items should be defined using the <code>ui5-media-gallery-item</code> component.
+<h3>Module Import</h3> 
 
-The items are initially displayed as thumbnails. When the user selects a thumbnail, the corresponding item is displayed in larger size. <br> The component is responsive by default and adjusts the position of the menu with respect to viewport size, but the application is able to further customize the layout via the provided API.
-
-<h3>Keyboard Handling</h3> The <code>ui5-media-gallery</code> provides advanced keyboard handling. <br> When the thumbnails menu is focused the following keyboard shortcuts allow the user to navigate through the thumbnail items: <br>
-
-<ul> <li>[UP/DOWN] - Navigates up and down the items</li> <li>[HOME] - Navigates to first item</li> <li>[END] - Navigates to the last item</li> <li>[SPACE/ENTER] - Select an item</li> </ul> <br>
-
-<h3>ES6 Module Import</h3> <code>import { MediaGalleryComponent } from "@ui5/webcomponents-ngx/fiori/media-gallery";</code>`;
+<code>import { MediaGalleryComponent } from "@ui5/webcomponents-ngx/fiori/media-gallery";</code>`;
 export default {
   title: 'UI5 Web Components / Fiori / MediaGallery',
   component: MediaGalleryComponent,
@@ -28,7 +20,7 @@ export default {
     docs: {
       extractArgTypes,
       description: {
-        component: description,
+        component: extractDescription('MediaGalleryComponent', MediaGalleryComponent, description),
       },
     },
   },