docs(storybook): seo links

.gitignore

@@ -83,6 +83,7 @@ packages/playground/docs/FAQ.md
 
 # Ignore the generated storybook related files
 packages/playground/_stories/**/*/argTypes.ts
+packages/playground/_stories/**/*/*Overview.mdx
 packages/playground/.storybook/custom-elements.json
 packages/playground/docs/storybook/**/*
 packages/playground/docs/storybook-pages/**/*

docs/6-contributing/04-writing-samples.md

@@ -119,11 +119,6 @@ Every story has a `docs` page in the storybook's sidebar. Usually, this page is
 export default {
     title: "Main/Button",
     component,
-    parameters: {
-        docs: {
-          page: DocsPage({ ...componentInfo, component })
-        },
-    },
     argTypes,
 } as Meta<Button>;
 ```

packages/playground/.storybook/main.ts

@@ -1,7 +1,7 @@
 import remarkGfm from 'remark-gfm';
 
 const config = {
-  stories: ["../docs/**/*.mdx", "../_stories/**/*.stories.@(ts)"],
+  stories: ["../docs/**/*.mdx", "../_stories/**/*.stories.@(ts)", "../_stories/**/*.mdx"],
   staticDirs: [
     { from: "../assets", to: "../assets" }, // from /assets to /dist/assets
     { from: "../docs/storybook-pages", to: "/" }, // from /docs/storybook-pages to /dist/playground
@@ -42,7 +42,7 @@ const config = {
     reactDocgen: 'react-docgen'
   },
   docs: {
-    autodocs: true
+    autodocs: 'tag'
   }
 };
 export default config;

packages/playground/.storybook/preview.ts

@@ -36,13 +36,55 @@ export const parameters: Parameters = {
         .replace(/^\s*[\r\n]/gm, ""),
   },
   options: {
-    storySort: {
-      order: [
-        "Docs",
-        "Main",
-        "Fiori"
-      ],
-    },
+    // @ts-ignore
+    storySort: (a, b) => {
+      // Define the sorting order
+      const sortOrder = {
+        "Docs": 1,
+        "Main": 2,
+        "Fiori": 3,
+      };
+
+      const sortSubOrder = ['Overview', 'Basic'];
+
+      // Function to get the order value for a given category
+      // @ts-ignore
+      function getOrder(category) {
+        // @ts-ignore
+        return sortOrder[category] || 4;
+      }
+
+      // Function to get sub-order for 'Main' and 'Fiori'
+      // @ts-ignore
+      function getSubOrder(title) {
+        let index = sortSubOrder.findIndex(keyword => title.endsWith(keyword));
+        return index === -1 ? sortSubOrder.length : index; // Default sub-order for titles not listed or found at the end
+      }
+
+      const aTitle = `${a.title}/${a.name}`;
+      const bTitle = `${b.title}/${b.name}`;
+
+      const partsA = aTitle.split('/');
+      const partsB = bTitle.split('/');
+
+      // Sort by primary category (Docs, Main, Fiori)
+      const orderA = getOrder(partsA[0]);
+      const orderB = getOrder(partsB[0]);
+      if (orderA !== orderB) {
+        return orderA - orderB;
+      }
+
+      // Within 'Main' and 'Fiori', sort by sub-order
+      if (partsA[0] === 'Main' || partsA[0] === 'Fiori') {
+        const subOrderA = getSubOrder(partsA[2]);
+        const subOrderB = getSubOrder(partsB[2]);
+        if (subOrderA !== subOrderB) {
+          return subOrderA - subOrderB;
+        }
+      }
+
+      return 1;
+    }
   },
 };
 

packages/playground/_stories/fiori/Bar/Bar.stories.ts

@@ -3,25 +3,15 @@ import { ifDefined } from "lit/directives/if-defined.js";
 import { unsafeHTML } from "lit/directives/unsafe-html.js";
 import type { Meta, StoryFn } from "@storybook/web-components";
 
-import argTypes, { componentInfo } from "./argTypes.js";
+import argTypes from "./argTypes.js";
 import type { StoryArgsSlots } from "./argTypes.js";
 import type { UI5StoryArgs } from "../../../types.js";
-
-import { DocsPage } from "../../../.storybook/docs";
-
 import type Bar from "@ui5/webcomponents-fiori/dist/Bar.js";
 import BarDesign from "@ui5/webcomponents-fiori/dist/types/BarDesign.js";
 
-const component = "ui5-bar";
-
 export default {
 	title: "Fiori/Bar",
 	component: "Bar",
-	parameters: {
-		docs: {
-			page: DocsPage({ ...componentInfo, component })
-		},
-	},
 	argTypes,
 } as Meta<Bar>;
 

packages/playground/_stories/fiori/BarcodeScannerDialog/BarcodeScannerDialog.stories.ts

@@ -1,25 +1,15 @@
 import { html } from "lit";
 import type { Meta } from "@storybook/web-components";
 
-import argTypes, { componentInfo } from "./argTypes.js";
+import argTypes from "./argTypes.js";
 import type { StoryArgsSlots } from "./argTypes.js";
 import type { UI5StoryArgs } from "../../../types.js";
-
-import { DocsPage } from "../../../.storybook/docs";
-
 // @ts-ignore
 import type BarcodeScannerDialog from "@ui5/webcomponents-fiori/dist/BarcodeScannerDialog.js";
 
-const component = "ui5-barcode-scanner-dialog";
-
 export default {
     title: "Fiori/Barcode Scanner Dialog",
     component: "BarcodeScannerDialog",
-    parameters: {
-        docs: {
-            page: DocsPage({ ...componentInfo, component }),
-        },
-    },
     argTypes,
 } as Meta<BarcodeScannerDialog>;
 

packages/playground/_stories/fiori/DynamicSideContent/DynamicSideContent.stories.ts

@@ -3,27 +3,17 @@ import { ifDefined } from "lit/directives/if-defined.js";
 import { unsafeHTML } from "lit/directives/unsafe-html.js";
 import type { Meta, StoryFn } from "@storybook/web-components";
 
-import argTypes, { componentInfo } from "./argTypes.js";
+import argTypes from "./argTypes.js";
 import type { StoryArgsSlots } from "./argTypes.js";
 import type { UI5StoryArgs } from "../../../types.js";
-
-import { DocsPage } from "../../../.storybook/docs";
-
 import type DynamicSideContent from "@ui5/webcomponents-fiori/dist/DynamicSideContent.js";
 import SideContentPosition from "@ui5/webcomponents-fiori/dist/types/SideContentPosition.js";
 import SideContentFallDown from "@ui5/webcomponents-fiori/dist/types/SideContentFallDown.js";
 import SideContentVisibility from "@ui5/webcomponents-fiori/dist/types/SideContentVisibility.js";
 
-const component = "ui5-dynamic-side-content";
-
 export default {
     title: "Fiori/DynamicSideContent",
     component: "DynamicSideContent",
-    parameters: {
-        docs: {
-          page: DocsPage({ ...componentInfo, component })
-        },
-    },
     argTypes,
 } as Meta<DynamicSideContent>;
 

packages/playground/_stories/fiori/FlexibleColumnLayout/FlexibleColumnLayout.stories.ts

@@ -3,24 +3,14 @@ import { ifDefined } from "lit/directives/if-defined.js";
 import { unsafeHTML } from "lit/directives/unsafe-html.js";
 import type { Meta } from "@storybook/web-components";
 
-import argTypes, { componentInfo } from "./argTypes.js";
+import argTypes from "./argTypes.js";
 import type { StoryArgsSlots } from "./argTypes.js";
 import type { UI5StoryArgs } from "../../../types.js";
-
-import { DocsPage } from "../../../.storybook/docs";
-
 import type FlexibleColumnLayout from "@ui5/webcomponents-fiori/dist/FlexibleColumnLayout.js";
 
-const component = "ui5-flexible-column-layout";
-
 export default {
   title: "Fiori/Flexible Column Layout",
   component: "FlexibleColumnLayout",
-  parameters: {
-    docs: {
-      page: DocsPage({ ...componentInfo, component })
-    },
-  },
   argTypes,
 } as Meta<FlexibleColumnLayout>;
 

packages/playground/_stories/fiori/IllustratedMessage/IllustratedMessage.stories.ts

@@ -3,25 +3,15 @@ import { ifDefined } from "lit/directives/if-defined.js";
 import { unsafeHTML } from "lit/directives/unsafe-html.js";
 import type { Meta, StoryFn } from "@storybook/web-components";
 
-import argTypes, { componentInfo } from "./argTypes.js";
+import argTypes from "./argTypes.js";
 import type { StoryArgsSlots } from "./argTypes.js";
 import type { UI5StoryArgs } from "../../../types.js";
-
-import { DocsPage } from "../../../.storybook/docs";
-
 import type IllustratedMessage from "@ui5/webcomponents-fiori/dist/IllustratedMessage.js";
 import IllustrationMessageType from "@ui5/webcomponents-fiori/dist/types/IllustrationMessageType.js";
 
-const component = "ui5-illustrated-message";
-
 export default {
     title: "Fiori/Illustrated Message",
     component: "IllustratedMessage",
-    parameters: {
-        docs: {
-            page: DocsPage({ ...componentInfo, component }),
-        },
-    },
     argTypes,
 } as Meta<IllustratedMessage>;
 

packages/playground/_stories/fiori/MediaGallery/MediaGallery.stories.ts

@@ -4,17 +4,12 @@ import { ifDefined } from "lit/directives/if-defined.js";
 import type { Meta, StoryFn } from "@storybook/web-components";
 import type { PartialStoryFn } from "@storybook/types";
 
-import argTypes, { componentInfo } from "./argTypes.js";
+import argTypes from "./argTypes.js";
 import type { StoryArgsSlots } from "./argTypes.js";
 import type { UI5StoryArgs } from "../../../types.js";
-
-import { DocsPage } from "../../../.storybook/docs";
-
 import MediaGallery from "@ui5/webcomponents-fiori/dist/MediaGallery.js";
 import TemplateMediaGalleryTypes from "./TemplateMediaGalleryTypes.js";
 
-const component = "ui5-media-gallery";
-
 const stylesDecorator = (storyFn: PartialStoryFn) => html`
     <style>
         ui5-media-gallery-item:not(:defined) {
@@ -33,11 +28,6 @@ const stylesDecorator = (storyFn: PartialStoryFn) => html`
 export default {
     title: "Fiori/Media Gallery",
     component: "MediaGallery",
-    parameters: {
-        docs: {
-            page: DocsPage({ ...componentInfo, component }),
-        },
-    },
     decorators: [stylesDecorator],
     argTypes,
 } as Meta<MediaGallery>;

packages/playground/_stories/fiori/MediaGallery/MediaGalleryItem/MediaGalleryItem.stories.ts

@@ -4,16 +4,12 @@ import { ifDefined } from "lit/directives/if-defined.js";
 import type { Meta, StoryFn } from "@storybook/web-components";
 import type { PartialStoryFn } from "@storybook/types";
 
-import argTypes, { componentInfo } from "./argTypes.js";
+import argTypes from "./argTypes.js";
 import type { StoryArgsSlots } from "./argTypes.js";
 import type { UI5StoryArgs } from "../../../../types.js";
 
-import { DocsPage } from "../../../../.storybook/docs.js";
-
 import MediaGalleryItem from "@ui5/webcomponents-fiori/dist/MediaGalleryItem.js";
 
-const component = "ui5-media-gallery-item";
-
 const stylesDecorator = (storyFn: PartialStoryFn) => html`
     <style>
         ui5-media-gallery-item:not(:defined) {
@@ -32,11 +28,6 @@ const stylesDecorator = (storyFn: PartialStoryFn) => html`
 export default {
     title: "Fiori/Media Gallery/Media Gallery Item",
     component: "MediaGalleryItem",
-    parameters: {
-        docs: {
-            page: DocsPage({ ...componentInfo, component, showDefaultStoryOnly: true }),
-        }
-    },
     decorators: [stylesDecorator],
     argTypes,
 } as Meta<MediaGalleryItem>;

packages/playground/_stories/fiori/NotificationListGroupItem/NotificationAction/NotificationAction.stories.ts

@@ -2,20 +2,16 @@ import { html } from "lit";
 import { ifDefined } from "lit/directives/if-defined.js";
 import { unsafeHTML } from "lit/directives/unsafe-html.js";
 import type { Meta } from "@storybook/web-components";
-import argTypes, { componentInfo } from "./argTypes.js";
+import argTypes from "./argTypes.js";
 import type { StoryArgsSlots } from "./argTypes.js";
 import type { UI5StoryArgs } from "../../../../types.js";
-import { DocsPage } from "../../../../.storybook/docs.js";
 import type NotificationAction from "@ui5/webcomponents-fiori/dist/NotificationAction.js";
 
-const component = "ui5-notification-action";
-
 export default {
 	title: "Fiori/Notification List Group Item/Notification Action",
 	component: "NotificationAction",
 	parameters: {
 		docs: {
-			page: DocsPage({ ...componentInfo, component, showDefaultStoryOnly: true }),
 			story: {
 				iframeHeight: "470px",
 				inline: false,

packages/playground/_stories/fiori/NotificationListGroupItem/NotificationListGroupItem.stories.ts

@@ -2,21 +2,17 @@ import { html } from "lit";
 import { ifDefined } from "lit/directives/if-defined.js";
 import { unsafeHTML } from "lit/directives/unsafe-html.js";
 import type { Meta, StoryFn } from "@storybook/web-components";
-import argTypes, { componentInfo } from "./argTypes.js";
+import argTypes from "./argTypes.js";
 import type { StoryArgsSlots } from "./argTypes.js";
 import type { UI5StoryArgs } from "../../../types.js";
-import { DocsPage } from "../../../.storybook/docs";
 import type NotificationListGroupItem from "@ui5/webcomponents-fiori/dist/NotificationListGroupItem.js";
 import Priority from "@ui5/webcomponents/dist/types/Priority.js";
 
-const component = "ui5-li-notification-group";
-
 export default {
 	title: "Fiori/Notification List Group Item",
 	component: "NotificationListGroupItem",
 	parameters: {
 		docs: {
-			page: DocsPage({ ...componentInfo, component }),
 			story: {
 				// Opt-out of inline rendering
 				inline: false,