chore: fix some components values and make storybook to work

packages/fiori/src/ShellBar.ts

@@ -871,6 +871,7 @@ class ShellBar extends UI5Element {
 	/**
 	 * Returns the <code>logo</code> DOM ref.
 	 * @public
+	 * @default null
 	 * @since 1.0.0-rc.16
 	 */
 	get logoDomRef(): HTMLElement | null {
@@ -880,6 +881,7 @@ class ShellBar extends UI5Element {
 	/**
 	 * Returns the <code>copilot</code> DOM ref.
 	 * @public
+	 * @default null
 	 * @since 1.0.0-rc.16
 	 */
 	get copilotDomRef(): HTMLElement | null {
@@ -889,6 +891,7 @@ class ShellBar extends UI5Element {
 	/**
 	 * Returns the <code>notifications</code> icon DOM ref.
 	 * @public
+	 * @default null
 	 * @since 1.0.0-rc.16
 	 */
 	get notificationsDomRef(): HTMLElement | null {
@@ -898,6 +901,7 @@ class ShellBar extends UI5Element {
 	/**
 	 * Returns the <code>overflow</code> icon DOM ref.
 	 * @public
+	 * @default null
 	 * @since 1.0.0-rc.16
 	 */
 	get overflowDomRef(): HTMLElement | null {
@@ -907,6 +911,7 @@ class ShellBar extends UI5Element {
 	/**
 	 * Returns the <code>profile</code> icon DOM ref.
 	 * @public
+	 * @default null
 	 * @since 1.0.0-rc.16
 	 */
 	get profileDomRef(): HTMLElement | null {
@@ -916,6 +921,7 @@ class ShellBar extends UI5Element {
 	/**
 	 * Returns the <code>product-switch</code> icon DOM ref.
 	 * @public
+	 * @default null
 	 * @since 1.0.0-rc.16
 	 */
 	get productSwitchDomRef(): HTMLElement | null {

packages/main/src/TextArea.ts

@@ -190,7 +190,7 @@ class TextArea extends UI5Element implements IFormElement {
 	 * @public
 	 */
 	@property({ validator: Integer, defaultValue: null })
-	maxlength?: number;
+	maxlength?: number | null;
 
 	/**
 	 * Determines whether the characters exceeding the maximum allowed character count are visible

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

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

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

@@ -9,7 +9,7 @@ export class MethodDescriptionRenderer implements IDescriptionRenderer {
                 <b><code>{p.name}</code></b>
                 <ul>
                     <li><b>type:</b> {p.type.text}</li>
-                    <li><b>description:</b> {p.description}</li>
+                    {p.description && <li><b>description:</b> {p.description}</li>}
                 </ul>
             </React.Fragment>
         ));
@@ -32,7 +32,7 @@ export class MethodDescriptionRenderer implements IDescriptionRenderer {
                 <p><b>Return Value:</b></p>
                 <ul>
                     <li><b>type:</b> {returnValue?.type?.text}</li>
-                    <li><b>description:</b> {returnValue?.description}</li>
+                    {returnValue?.description && <li><b>description:</b> {returnValue?.description}</li>}
                 </ul>
             </>
         );

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

@@ -6,6 +6,8 @@ const path = require("path");
 
 // The following properties are excluded from the members array as they are not truly public.
 const EXCLUDE_LIST = [
+    "detachComponentStateFinalized",
+    "attachComponentStateFinalized",
     "effectiveDir",
     "isUI5Element",
     "attachInvalidate",
@@ -34,18 +36,30 @@ const loadManifest = () => {
 
     try {
         customElementsMain = require("@ui5/webcomponents/custom-elements.json");
+
+        customElementsMain.modules.forEach(module => {
+            applyPackageToDeclarations(module, "@ui5/webcomponents")
+        })
     } catch (error) {
         console.error("Did you run `yarn build` for packages/main?")
     }
 
     try {
         customElementsFiori = require("@ui5/webcomponents-fiori/custom-elements.json");
+
+        customElementsFiori.modules.forEach(module => {
+            applyPackageToDeclarations(module, "@ui5/webcomponents-fiori")
+        })
     } catch (error) {
         console.error("Did you run `yarn build` for packages/main?")
     }
 
     try {
         customElementsBase = require("@ui5/webcomponents-base/custom-elements.json");
+
+        customElementsBase.modules.forEach(module => {
+            applyPackageToDeclarations(module, "@ui5/webcomponents-base")
+        })
     } catch (error) {
         console.error("Did you run `yarn build` for packages/main?")
     }
@@ -57,6 +71,10 @@ const loadManifest = () => {
     };
 };
 
+const applyPackageToDeclarations = (module, package) => {
+    module?.declarations?.forEach(declaration => (declaration._ui5package = package));
+}
+
 const parseMembers = (members) => {
     const parsed = [];
     members.forEach((member) => {
@@ -83,7 +101,7 @@ const parseModule = (module) => {
         // 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") ) {
+                if (!part.name.startsWith("_ui5")) {
                     part.name = `_ui5${part.name}`;
                 }
             });
@@ -110,20 +128,20 @@ const flattenAPIsHierarchicalStructure = module => {
     const declarations = module.declarations;
 
     declarations.forEach(declaration => {
-        let superclassDeclaration = processedDeclarations.get(declaration.superclass?.name);
+        let superclassDeclaration = processedDeclarations.get(`${declaration.superclass?.package}/${declaration.superclass?.name}`);
 
         if (!superclassDeclaration) {
-            superclassDeclaration = customElements.modules.find(_m => _m.declarations.find(_d => _d.name === declaration.superclass?.name ));
+            superclassDeclaration = customElements.modules.find(_m => _m.declarations.find(_d => _d.name === declaration.superclass?.name && _d._ui5package === declaration.superclass?.package));
 
             if (superclassDeclaration) {
                 flattenAPIsHierarchicalStructure(superclassDeclaration);
             }
         }
 
         if (superclassDeclaration) {
-            processedDeclarations.set(declaration.name, mergeClassMembers(declaration, processedDeclarations.get(declaration.superclass?.name)));
+            processedDeclarations.set(`${declaration._ui5package}/${declaration.name}`, mergeClassMembers(declaration, processedDeclarations.get(`${declaration.superclass?.package}/${declaration.superclass?.name}`)));
         } else {
-            processedDeclarations.set(declaration.name, declaration);
+            processedDeclarations.set(`${declaration._ui5package}/${declaration.name}`, declaration);
         }
     })
 }
@@ -152,7 +170,7 @@ const mergeArraysWithoutDuplicates = (currentValues, newValue) => {
 
 
 const { customElementsMain, customElementsFiori, customElementsBase } = loadManifest();
-let customElements = mergeManifests(mergeManifests(customElementsMain, customElementsFiori), customElementsBase );
+let customElements = mergeManifests(mergeManifests(customElementsMain, customElementsFiori), customElementsBase);
 const processedDeclarations = new Map();
 
 customElements.modules?.forEach(flattenAPIsHierarchicalStructure);

packages/playground/build-scripts-storybook/samples-prepare.ts

@@ -3,7 +3,7 @@ import path from "path";
 import type {
 	ClassDeclaration,
 	CustomElementDeclaration,
-	MySchema,
+	Package,
 	Parameter,
 	Type,
 	ClassField,
@@ -14,7 +14,7 @@ import type {
 	CustomElementMixinDeclaration,
 	MixinDeclaration,
 	VariableDeclaration
-} from "@ui5/webcomponents-tools/lib/cem/types.js";
+} from "@ui5/webcomponents-tools/lib/cem/types-internal";
 
 const STORIES_ROOT_FOLDER_NAME = '../_stories';
 
@@ -59,7 +59,7 @@ type APIData = {
 
 // run the script to generate the argTypes for the stories available in the _stories folder
 const main = async () => {
-	const api: MySchema = JSON.parse((await fs.readFile(`./.storybook/custom-elements.json`)).toString());
+	const api: Package = JSON.parse((await fs.readFile(`./.storybook/custom-elements.json`)).toString());
 
 	// read all directories inside _stories folder and create a list of components
 	const packages = await fs.readdir(path.join(__dirname, STORIES_ROOT_FOLDER_NAME));
@@ -81,7 +81,7 @@ const main = async () => {
 	}
 };
 
-const generateStoryDoc = async (componentPath: string, component: string, api: MySchema, componentPackage: string) => {
+const generateStoryDoc = async (componentPath: string, component: string, api: Package, componentPackage: string) => {
 	console.log(`Generating argTypes for story ${component}`);
 	const apiData = getAPIData(api, component, componentPackage);
 
@@ -98,9 +98,9 @@ export type StoryArgsSlots = {
 }`);
 };
 
-const getAPIData = (api: MySchema, module: string, componentPackage: string): APIData | undefined => {
-	const moduleAPI = api.modules?.find(currModule => currModule.declarations?.find(s => s._ui5reference?.name === module && s._ui5reference?.package === `@ui5/webcomponents${componentPackage !== 'main' ? `-${componentPackage}` : ''}`));
-	const declaration = moduleAPI?.declarations?.find(s => s._ui5reference?.name === module && s._ui5reference?.package === `@ui5/webcomponents${componentPackage !== 'main' ? `-${componentPackage}` : ''}`);
+const getAPIData = (api: Package, module: string, componentPackage: string): APIData | undefined => {
+	const moduleAPI = api.modules?.find(currModule => currModule.declarations?.find(s => s.name === module && s._ui5package === `@ui5/webcomponents${componentPackage !== 'main' ? `-${componentPackage}` : ''}`));
+	const declaration = moduleAPI?.declarations?.find(s => s.name === module && s._ui5package === `@ui5/webcomponents${componentPackage !== 'main' ? `-${componentPackage}` : ''}`);
 
 	if (!declaration) {
 		return;
@@ -111,14 +111,14 @@ const getAPIData = (api: MySchema, module: string, componentPackage: string): AP
 	return {
 		info: {
 			package: `@ui5/webcomponents${componentPackage !== 'main' ? `-${componentPackage}` : ''}`,
-			since: declaration?._ui5since
+			since: (declaration as CustomElementDeclaration)?._ui5since
 		},
 		slotNames: data.slotNames,
 		storyArgsTypes: JSON.stringify(data.args, null, "\t")
 	};
 };
 
-const getArgsTypes = (api: MySchema, moduleAPI: CustomElementDeclaration | ClassDeclaration) => {
+const getArgsTypes = (api: Package, moduleAPI: CustomElementDeclaration | ClassDeclaration) => {
 	let args: ArgsTypes = {};
 	let slotNames: string[] = [];
 
@@ -134,7 +134,7 @@ const getArgsTypes = (api: MySchema, moduleAPI: CustomElementDeclaration | Class
 					}
 
 					for (const s of currModule.declarations) {
-						if (s?._ui5reference?.name === prop.type?.references[0].name && s._ui5reference?.package === prop.type?.references[0].package && s.kind === "enum") {
+						if (s.name === prop.type?.references[0].name && s._ui5package === prop.type?.references[0].package && s.kind === "enum") {
 							typeEnum = s;
 							break;
 						}
@@ -161,6 +161,11 @@ const getArgsTypes = (api: MySchema, moduleAPI: CustomElementDeclaration | Class
 			args[prop.name] = {
 				control: {
 					type: "text"
+				},
+				table: {
+					type: {
+						summary: prop._ui5type?.text
+					}
 				}
 			};
 			slotNames.push(prop.name);
@@ -190,14 +195,17 @@ const getArgsTypes = (api: MySchema, moduleAPI: CustomElementDeclaration | Class
 	// events also have custom descriptions with parameters of their detail objec
 	if (isCustomElementDeclaration(moduleAPI)) {
 		moduleAPI.events?.forEach((prop) => {
-			if (prop.privacy === "public" && prop.params?.length) {
+			if (prop._ui5privacy === "public" && prop._ui5parameters?.length) {
 				args[prop.name] = {
 					description: prop.description,
+					control: {
+						type: false
+					},
 					table: {
 						category: "events",
 					},
 					UI5CustomData: {
-						parameters: prop.params,
+						parameters: prop._ui5parameters,
 					},
 				};
 			}
@@ -219,7 +227,7 @@ const getArgsTypes = (api: MySchema, moduleAPI: CustomElementDeclaration | Class
 		}
 	}
 
-	const referencePackage = moduleAPIBeingExtended?._ui5reference?.package;
+	const referencePackage = moduleAPIBeingExtended?._ui5package;
 
 	if (moduleAPIBeingExtended && referencePackage && packages.includes(referencePackage)) {
 		const { args: nextArgs, slotNames: nextSlotNames } = getArgsTypes(api, moduleAPIBeingExtended as ClassDeclaration);
@@ -234,7 +242,7 @@ const getArgsTypes = (api: MySchema, moduleAPI: CustomElementDeclaration | Class
 };
 
 const findReference = (something: Array<Declaration>, componentName: string, componentPackage: string): Declaration | undefined => {
-	return something.find(s => s._ui5reference?.name === componentName && s._ui5reference?.package === componentPackage)
+	return something.find(s => s.name === componentName && s._ui5package === componentPackage)
 }
 
 main();