chore: add storybook

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

@@ -115,7 +115,7 @@ The above example includes only the `indeterminate`, `checked` properties in the
 
 
 ## Documentation
-The documentation for each component is automatically produced using the `custom-elements.json` file. Additionally, there is an `argTypes.ts` file located beside each `.stories.ts` file. It is generated during build time and contains extra properties that enhance the documentation beyond what is available in the `custom-elements.json` file. This file should not be edited directly, as it can only be modified by the `packages/playground/build-scripts-storybook/samples-prepare.js` script.
+The documentation for each component is automatically produced using the `custom-elements.json` file. Additionally, there is an `argTypes.ts` file located beside each `.stories.ts` file. It is generated during build time and contains extra properties that enhance the documentation beyond what is available in the `custom-elements.json` file. This file should not be edited directly, as it can only be modified by the `packages/playground/build-scripts-storybook/samples-prepare.ts` script.
 
 ### Docs page
 Every story has a `docs` page in the storybook's sidebar. Usually, this page is generated automatically by storybook but it can be customized by adding a `docs` property to the story parameters. 

packages/playground/.storybook/args/enhanceArgTypes.ts

@@ -25,6 +25,14 @@ export const enhanceArgTypes = <TRenderer extends Renderer>(
           ) as typeof userArgTypes)
         : userArgTypes;
 
+    Object.keys(withExtractedTypes)
+    .filter(key => key.startsWith("_ui5"))
+    .forEach(argType => {
+        withExtractedTypes[argType].name = withExtractedTypes[argType].name.replace("_ui5", "");
+
+        withExtractedTypes[argType].control = "text"
+    })
+
     // enhance descriptions
     enhanceArgTypesDescriptions(withExtractedTypes);
     return withExtractedTypes;

packages/playground/.storybook/args/enhancers/description/event/EventDescriptionRenderer.tsx

@@ -7,7 +7,7 @@ export class EventDescriptionRenderer implements IDescriptionRenderer {
             <React.Fragment key={p.name}>
                 <b><code>{p.name}</code></b>
                 <ul>
-                    <li><b>type:</b> {p.type}</li>
+                    <li><b>type:</b> {p.type.text}</li>
                     <li><b>description:</b> {p.description}</li>
                 </ul>
             </React.Fragment>

packages/playground/.storybook/args/enhancers/description/method/MethodDescriptionRenderer.tsx

@@ -8,7 +8,7 @@ export class MethodDescriptionRenderer implements IDescriptionRenderer {
             <React.Fragment key={p.name}>
                 <b><code>{p.name}</code></b>
                 <ul>
-                    <li><b>type:</b> {p.type}</li>
+                    <li><b>type:</b> {p.type.text}</li>
                     <li><b>description:</b> {p.description}</li>
                 </ul>
             </React.Fragment>
@@ -31,7 +31,7 @@ export class MethodDescriptionRenderer implements IDescriptionRenderer {
             <>
                 <p><b>Return Value:</b></p>
                 <ul>
-                    <li><b>type:</b> {returnValue?.type}</li>
+                    <li><b>type:</b> {returnValue?.type?.text}</li>
                     <li><b>description:</b> {returnValue?.description}</li>
                 </ul>
             </>

packages/playground/.storybook/args/types.ts

@@ -8,13 +8,17 @@ export interface IArgTypeEnhancer {
 }
 
 export type ReturnValue = {
-    type: string;
+    type: {
+        text: string,
+    };
     description: string;
 };
 
 export type Parameter = {
     name: string;
-    type: string;
+    type: {
+        text: string
+    };
     description: string;
 };
 

packages/playground/build-scripts-storybook/parse-manifest.js

@@ -28,26 +28,33 @@ const EXCLUDE_LIST = [
 ];
 
 const loadManifest = () => {
-    try {
-        const customElementsMain = require("@ui5/webcomponents/custom-elements.json");
-        const customElementsFiori = require("@ui5/webcomponents-fiori/custom-elements.json");
+    let customElementsMain = {};
+    let customElementsFiori = {};
+    let customElementsBase = {};
 
-        return {
-            customElementsMain,
-            customElementsFiori,
-        };
+    try {
+        customElementsMain = require("@ui5/webcomponents/custom-elements.json");
     } catch (error) {
-        console.log("Error while loading manifests. Did you run 'yarn build'?");
+        console.error("Did you run `yarn build` for packages/main?")
+    }
 
-        if (process.env.NODE_ENV !== "production") {
-            return {
-                customElementsMain: {},
-                customElementsFiori: {},
-            };
-        }
+    try {
+        customElementsFiori = require("@ui5/webcomponents-fiori/custom-elements.json");
+    } catch (error) {
+        console.error("Did you run `yarn build` for packages/main?")
+    }
 
-        throw error;
+    try {
+        customElementsBase = require("@ui5/webcomponents-base/custom-elements.json");
+    } catch (error) {
+        console.error("Did you run `yarn build` for packages/main?")
     }
+
+    return {
+        customElementsMain,
+        customElementsFiori,
+        customElementsBase,
+    };
 };
 
 const parseMembers = (members) => {
@@ -56,10 +63,6 @@ const parseMembers = (members) => {
         if (EXCLUDE_LIST.indexOf(member.name) > -1) {
             return;
         }
-        if (member.kind === "method") {
-            // change kind to property as Storybook does not show methods from the custom-elements.json
-            member.kind = "field";
-        }
         parsed.push(member);
     });
     return parsed;
@@ -76,6 +79,15 @@ const parseModule = (module) => {
         if (declaration.members) {
             declaration.members = parseMembers(declaration.members);
         }
+        // Storybook remove slots/css parts/properties/events with duplicate names so we add suffix to css parts in order to avoid duplicates.
+        // It can't happen to slots and properties since you can't have duplicate accessors.
+        if (declaration.cssParts) {
+            declaration.cssParts.forEach(part => {
+                if (!part.name.startsWith("_ui5") ) {
+                    part.name = `_ui5${part.name}`;
+                }
+            });
+        }
 
         return declaration;
     });
@@ -117,7 +129,7 @@ const flattenAPIsHierarchicalStructure = module => {
 }
 
 const mergeClassMembers = (declaration, superclassDeclaration) => {
-    const props = ["members", "slots", "events"];
+    const props = ["members", "slots", "events", "cssParts"];
 
     props.forEach(prop => {
         if (declaration[prop]?.length) {
@@ -139,11 +151,11 @@ const mergeArraysWithoutDuplicates = (currentValues, newValue) => {
 }
 
 
-const { customElementsMain, customElementsFiori } = loadManifest();
-const customElements = mergeManifests(customElementsMain, customElementsFiori );
+const { customElementsMain, customElementsFiori, customElementsBase } = loadManifest();
+let customElements = mergeManifests(mergeManifests(customElementsMain, customElementsFiori), customElementsBase );
 const processedDeclarations = new Map();
 
-customElements.modules.forEach(flattenAPIsHierarchicalStructure)
+customElements.modules?.forEach(flattenAPIsHierarchicalStructure);
 
 fs.writeFileSync(
     path.join(__dirname, "../.storybook/custom-elements.json"),