diff --git a/packages/fiori/src/ShellBar.ts b/packages/fiori/src/ShellBar.ts index 9c25c5a9b06d..b5671edcb4d8 100644 --- a/packages/fiori/src/ShellBar.ts +++ b/packages/fiori/src/ShellBar.ts @@ -871,6 +871,7 @@ class ShellBar extends UI5Element { /** * Returns the logo 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 copilot 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 notifications 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 overflow 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 profile 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 product-switch icon DOM ref. * @public + * @default null * @since 1.0.0-rc.16 */ get productSwitchDomRef(): HTMLElement | null { diff --git a/packages/main/src/TextArea.ts b/packages/main/src/TextArea.ts index 81cd6e12c57c..d03f9ad078d9 100644 --- a/packages/main/src/TextArea.ts +++ b/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 diff --git a/packages/playground/.storybook/args/enhancers/description/event/EventDescriptionRenderer.tsx b/packages/playground/.storybook/args/enhancers/description/event/EventDescriptionRenderer.tsx index 4ab4bcbf8521..fae8deca2032 100644 --- a/packages/playground/.storybook/args/enhancers/description/event/EventDescriptionRenderer.tsx +++ b/packages/playground/.storybook/args/enhancers/description/event/EventDescriptionRenderer.tsx @@ -8,7 +8,7 @@ export class EventDescriptionRenderer implements IDescriptionRenderer { {p.name} )); diff --git a/packages/playground/.storybook/args/enhancers/description/method/MethodDescriptionRenderer.tsx b/packages/playground/.storybook/args/enhancers/description/method/MethodDescriptionRenderer.tsx index 1a9b50c7a1fb..e63ac22979ec 100644 --- a/packages/playground/.storybook/args/enhancers/description/method/MethodDescriptionRenderer.tsx +++ b/packages/playground/.storybook/args/enhancers/description/method/MethodDescriptionRenderer.tsx @@ -9,7 +9,7 @@ export class MethodDescriptionRenderer implements IDescriptionRenderer { {p.name} )); @@ -32,7 +32,7 @@ export class MethodDescriptionRenderer implements IDescriptionRenderer {

Return Value:

); diff --git a/packages/playground/build-scripts-storybook/parse-manifest.js b/packages/playground/build-scripts-storybook/parse-manifest.js index 9e35df3a8aea..4e7233f5a588 100644 --- a/packages/playground/build-scripts-storybook/parse-manifest.js +++ b/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,10 +128,10 @@ 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); @@ -121,9 +139,9 @@ const flattenAPIsHierarchicalStructure = module => { } 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); diff --git a/packages/playground/build-scripts-storybook/samples-prepare.ts b/packages/playground/build-scripts-storybook/samples-prepare.ts index 47ead0ffa790..06cb1c644d4b 100644 --- a/packages/playground/build-scripts-storybook/samples-prepare.ts +++ b/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, 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();