Skip to content

Commit 25e6443

Browse files
MarcusNotheisMarcusNotheis
authored
feat: update @ui5/webcomponents to ~1.11.0 (#4254)
1 parent effa70e commit 25e6443

File tree

44 files changed

+535
-551
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

44 files changed

+535
-551
lines changed

‎package.json

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@
1919
"test": "yarn test:prepare && yarn test:cypress && yarn test:jest",
2020
"clean": "tsc --build --clean && lerna run clean",
2121
"clean:check-bundle-size": "yarn clean && rimraf node_modules",
22-
"prettier:all": "prettier --write --config ./prettier.config.cjs \"packages/**/*.{js,jsx,ts,tsx,mdx}\"",
22+
"prettier:all": "prettier --write --config ./prettier.config.cjs \"packages/**/*.{js,jsx,ts,tsx,mdx,json}\"",
2323
"lint": "eslint packages --ext .ts,.tsx",
2424
"lerna:version-dryrun": "lerna version --conventional-graduate --no-git-tag-version --no-push",
2525
"create-webcomponents-wrapper": "node --experimental-json-modules ./packages/main/scripts/create-web-components-wrapper.mjs && node --experimental-json-modules ./scripts/generate-theming-parameters.js",
@@ -33,9 +33,9 @@
3333
"@storybook/addon-essentials": "7.0.0-beta.59",
3434
"@storybook/react": "7.0.0-beta.59",
3535
"@storybook/theming": "7.0.0-beta.59",
36-
"@ui5/webcomponents": "1.10.5",
37-
"@ui5/webcomponents-fiori": "1.10.5",
38-
"@ui5/webcomponents-icons": "1.10.5",
36+
"@ui5/webcomponents": "1.11.0",
37+
"@ui5/webcomponents-fiori": "1.11.0",
38+
"@ui5/webcomponents-icons": "1.11.0",
3939
"react": "18.2.0",
4040
"react-dom": "18.2.0",
4141
"remark-gfm": "^3.0.1",
@@ -59,7 +59,7 @@
5959
"@types/react-dom": "^18.0.0",
6060
"@typescript-eslint/eslint-plugin": "^5.51.0",
6161
"@typescript-eslint/parser": "^5.51.0",
62-
"@ui5/webcomponents-tools": "1.10.5",
62+
"@ui5/webcomponents-tools": "1.11.0",
6363
"@vitejs/plugin-react": "^3.1.0",
6464
"chromatic": "^6.5.3",
6565
"cypress": "^12.1.0",

‎packages/base/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@
1919
},
2020
"peerDependencies": {
2121
"@types/react": "*",
22-
"@ui5/webcomponents-base": "~1.10.3",
22+
"@ui5/webcomponents-base": "~1.11.0",
2323
"react": "^16.14.0 || ^17.0.0 || ^18.0.0"
2424
},
2525
"peerDependenciesMeta": {

‎packages/cra-template-seed/template.json

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
{
22
"package": {
33
"dependencies": {
4-
"@ui5/webcomponents": "~1.10.3",
5-
"@ui5/webcomponents-fiori": "~1.10.3",
6-
"@ui5/webcomponents-icons": "~1.10.3",
4+
"@ui5/webcomponents": "~1.11.0",
5+
"@ui5/webcomponents-fiori": "~1.11.0",
6+
"@ui5/webcomponents-icons": "~1.11.0",
77
"@ui5/webcomponents-react": "latest",
88
"axios": "^0.27.2",
99
"formik": "^2.2.9",

‎packages/cra-template/template.json

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
{
22
"package": {
33
"dependencies": {
4-
"@ui5/webcomponents": "~1.10.3",
5-
"@ui5/webcomponents-fiori": "~1.10.3",
6-
"@ui5/webcomponents-icons": "~1.10.3",
4+
"@ui5/webcomponents": "~1.11.0",
5+
"@ui5/webcomponents-fiori": "~1.11.0",
6+
"@ui5/webcomponents-icons": "~1.11.0",
77
"@ui5/webcomponents-react": "latest",
88
"@testing-library/jest-dom": "^5.16.4",
99
"@testing-library/react": "^13.1.1",

‎packages/main/package.json

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -34,10 +34,10 @@
3434
"peerDependencies": {
3535
"@types/react": "*",
3636
"@types/react-dom": "*",
37-
"@ui5/webcomponents": "~1.10.3",
38-
"@ui5/webcomponents-base": "~1.10.3",
39-
"@ui5/webcomponents-fiori": "~1.10.3",
40-
"@ui5/webcomponents-icons": "~1.10.3",
37+
"@ui5/webcomponents": "~1.11.0",
38+
"@ui5/webcomponents-base": "~1.11.0",
39+
"@ui5/webcomponents-fiori": "~1.11.0",
40+
"@ui5/webcomponents-icons": "~1.11.0",
4141
"react": "^16.14.0 || ^17.0.0 || ^18.0.0",
4242
"react-dom": "^16.14.0 || ^17.0.0 || ^18.0.0"
4343
},

‎packages/main/scripts/create-web-components-wrapper.mjs

Lines changed: 11 additions & 92 deletions
Original file line numberDiff line numberDiff line change
@@ -12,19 +12,15 @@ import {
1212
KNOWN_EVENTS,
1313
PRIVATE_COMPONENTS
1414
} from '../../../scripts/web-component-wrappers/config.js';
15-
import {
16-
renderComponentWrapper,
17-
renderStory,
18-
renderTest
19-
} from '../../../scripts/web-component-wrappers/templates/index.js';
15+
import { createDocumentation, createStory } from '../../../scripts/web-component-wrappers/StoryFactory.js';
16+
import { renderComponentWrapper, renderTest } from '../../../scripts/web-component-wrappers/templates/index.js';
2017
import * as Utils from '../../../scripts/web-component-wrappers/utils.js';
2118
import {
2219
formatDemoDescription,
2320
getDomRefGetters,
2421
getDomRefMethods,
2522
getDomRefObjects
2623
} from '../../../scripts/web-component-wrappers/utils.js';
27-
import versionInfo from '../../../scripts/web-component-wrappers/version-info.json' assert { type: 'json' };
2824

2925
// To only create a single component, replace "false" with the component (module) name
3026
// or execute the following command: "yarn create-webcomponents-wrapper [name]"
@@ -339,83 +335,6 @@ const createWebComponentWrapper = async (
339335
});
340336
};
341337

342-
const createWebComponentDemo = (componentSpec, componentProps, hasDescription) => {
343-
const componentName = componentSpec.module;
344-
const enumImports = [];
345-
const selectArgTypes = [];
346-
const args = [];
347-
const customArgTypes = [];
348-
349-
console.warn(`Story created for ${componentName}!\nPlease remember to add the story to an existing group.`);
350-
351-
const additionalComponentDocs = componentSpec.hasOwnProperty('appenddocs') ? componentSpec.appenddocs.split(' ') : [];
352-
const additionalComponentImports = componentSpec.hasOwnProperty('appenddocs')
353-
? [`import { ${componentSpec.appenddocs.replaceAll(' ', ', ')} } from '../..';`]
354-
: [];
355-
356-
componentProps.forEach((prop) => {
357-
if (prop.importStatement && prop.importStatement !== `import { ReactNode } from 'react';`) {
358-
enumImports.push(prop.importStatement);
359-
}
360-
if (componentSpec.module === 'Icon' && prop.name === 'name') {
361-
enumImports.push(`import "@ui5/webcomponents-icons/dist/employee.js";`);
362-
args.push(`name: 'employee'`);
363-
}
364-
if (prop.name === 'primaryCalendarType') {
365-
enumImports.push(`import "@ui5/webcomponents-localization/dist/features/calendar/Gregorian.js";`);
366-
enumImports.push(`import "@ui5/webcomponents-localization/dist/features/calendar/Buddhist.js";`);
367-
enumImports.push(`import "@ui5/webcomponents-localization/dist/features/calendar/Islamic.js";`);
368-
enumImports.push(`import "@ui5/webcomponents-localization/dist/features/calendar/Japanese.js";`);
369-
enumImports.push(`import "@ui5/webcomponents-localization/dist/features/calendar/Persian.js";`);
370-
}
371-
if (prop.name === 'moreColors') {
372-
enumImports.push(`import '@ui5/webcomponents/dist/features/ColorPaletteMoreColors.js';`);
373-
}
374-
if (prop.name === 'children') {
375-
if (
376-
prop.description.includes(
377-
'Аlthough this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design.'
378-
)
379-
) {
380-
args.push(`children: "${componentName} Text"`);
381-
customArgTypes.push(`children: {control: 'text'}`);
382-
} else {
383-
customArgTypes.push(`children: {control: {disable:true}}`);
384-
}
385-
} else if (prop.name === 'icon') {
386-
enumImports.push(`import "@ui5/webcomponents-icons/dist/employee.js";`);
387-
enumImports.push(`import { Icon } from '@ui5/webcomponents-react/dist/Icon';`);
388-
if (prop.tsType === 'string') {
389-
args.push(`icon: 'employee'`);
390-
}
391-
if (prop.tsType.includes('ReactNode')) {
392-
customArgTypes.push(`icon: {control: {disable: true}}`);
393-
args.push(`icon: <Icon name="employee" />`);
394-
}
395-
} else if (prop.tsType.includes('ReactNode') || prop.tsType === 'unknown') {
396-
customArgTypes.push(`${prop.name}: {control: {disable:true}}`);
397-
}
398-
if (prop.isEnum) {
399-
const type = prop.tsType.split(' ')[0];
400-
selectArgTypes.push(`${prop.name}: ${type}`);
401-
const defaultValue = prop.defaultValue ? `.${prop.defaultValue.replace(/['"]/g, '')}` : '';
402-
args.push(`${prop.name}: ${type}${defaultValue}`);
403-
}
404-
});
405-
enumImports.push(`import { CSSProperties, Ref } from 'react';`);
406-
return `${renderStory({
407-
name: componentName,
408-
since: versionInfo[componentSpec.since],
409-
imports: [...enumImports, ...additionalComponentImports],
410-
additionalComponentDocs,
411-
selectArgTypes,
412-
customArgTypes,
413-
args,
414-
methods: componentSpec.methods?.filter((item) => item.visibility === 'public') ?? [],
415-
hasDescription
416-
})}`;
417-
};
418-
419338
const assignComponentPropertiesToMaps = (componentSpec, { properties, slots, events, methods }) => {
420339
(componentSpec.properties || []).forEach((prop) => {
421340
if (!properties.has(prop.name)) {
@@ -766,7 +685,10 @@ allWebComponents
766685
if (publicProperties.length) {
767686
fs.writeFileSync(
768687
path.join(webComponentFolderPath, `${componentSpec.module}DomRef.json`),
769-
JSON.stringify(publicProperties, null, 2)
688+
prettier.format(JSON.stringify(publicProperties), {
689+
...Utils.prettierConfig,
690+
parser: 'json'
691+
})
770692
);
771693
let hasMethodsTable = false;
772694
if (fs.existsSync(path.join(webComponentFolderPath, `${componentSpec.module}.stories.mdx`))) {
@@ -787,17 +709,14 @@ allWebComponents
787709
}
788710
}
789711
// create story file (demo)
712+
790713
if (
791714
CREATE_SINGLE_COMPONENT === componentSpec.module ||
792-
!fs.existsSync(path.join(webComponentFolderPath, `${componentSpec.module}.stories.mdx`))
715+
(!fs.existsSync(path.join(webComponentFolderPath, `${componentSpec.module}.stories.mdx`)) &&
716+
!fs.existsSync(path.join(webComponentFolderPath, `${componentSpec.module}.stories.tsx`)))
793717
) {
794-
const webComponentDemo = createWebComponentDemo(
795-
componentSpec,
796-
allComponentProperties,
797-
description,
798-
!!formattedDescription
799-
);
800-
fs.writeFileSync(path.join(webComponentFolderPath, `${componentSpec.module}.stories.mdx`), webComponentDemo);
718+
await createStory(componentSpec, allComponentProperties);
719+
await createDocumentation(componentSpec, allComponentProperties, description);
801720
}
802721
}
803722
}

‎packages/main/src/enums/PopupAccessibleRole.ts

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
// Generated file - do not change manually!
2+
3+
import PopupAccessibleRole from '@ui5/webcomponents/dist/types/PopupAccessibleRole.js';
4+
5+
export { PopupAccessibleRole };

‎packages/main/src/enums/index.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,7 @@ export * from './PanelAccessibleRole';
5454
export * from './PopoverHorizontalAlign';
5555
export * from './PopoverPlacementType';
5656
export * from './PopoverVerticalAlign';
57+
export * from './PopupAccessibleRole';
5758
export * from './Priority';
5859
export * from './SemanticColor';
5960
export * from './SideContentFallDown';

‎packages/main/src/webComponents/BarcodeScannerDialog/BarcodeScannerDialogDomRef.json

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,5 @@
11
[
2-
{
3-
"name": "close",
4-
"visibility": "public",
5-
"description": "Closes the dialog and the scan session."
6-
},
2+
{ "name": "close", "visibility": "public", "description": "Closes the dialog and the scan session." },
73
{
84
"name": "show",
95
"visibility": "public",

‎packages/main/src/webComponents/Button/Button.mdx

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import { Canvas, Markdown, Meta } from '@storybook/blocks';
2+
import { ControlsWithNote, DocsHeader, DomRefTable, Footer } from '@sb/components';
3+
import Description from './ButtonDescription.md?raw';
4+
import ButtonDomRef from './ButtonDomRef.json';
5+
import * as ComponentStories from './Button.stories';
6+
7+
<Meta of={ComponentStories} />
8+
9+
<DocsHeader />
10+
11+
<br />
12+
13+
## Example
14+
15+
<Canvas of={ComponentStories.Default} />
16+
17+
## Properties
18+
19+
<ControlsWithNote of={ComponentStories.Default} />
20+
21+
<Markdown>{Description}</Markdown>
22+
23+
<DomRefTable rows={ButtonDomRef} />
24+
25+
<Footer />

‎packages/main/src/webComponents/Button/Button.stories.mdx

Lines changed: 0 additions & 44 deletions
This file was deleted.

‎packages/main/src/webComponents/Button/Button.stories.tsx

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import type { Meta, StoryObj } from '@storybook/react';
2+
import employeeIcon from '@ui5/webcomponents-icons/dist/employee.js';
3+
import { ButtonDesign } from '../../enums';
4+
import { Button } from './index.js';
5+
6+
const meta = {
7+
title: 'Inputs / Button',
8+
component: Button,
9+
argTypes: {
10+
children: { control: 'text' }
11+
},
12+
args: {
13+
design: ButtonDesign.Default,
14+
icon: employeeIcon,
15+
children: 'Button Text'
16+
}
17+
} satisfies Meta<typeof Button>;
18+
19+
export default meta;
20+
type Story = StoryObj<typeof meta>;
21+
22+
export const Default: Story = {};

‎packages/main/src/webComponents/Carousel/CarouselDomRef.json

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,7 @@
44
"visibility": "public",
55
"since": "1.0.0-rc.15",
66
"parameters": [
7-
{
8-
"name": "itemIndex",
9-
"type": "Integer",
10-
"optional": false,
11-
"description": "The index of the target page"
12-
}
7+
{ "name": "itemIndex", "type": "Integer", "optional": false, "description": "The index of the target page" }
138
],
149
"description": "Changes the currently displayed page."
1510
}

‎packages/main/src/webComponents/ColorPalettePopover/ColorPalettePopoverDomRef.json

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,9 +12,7 @@
1212
}
1313
],
1414
"description": "Shows the ColorPalettePopover. <b>Note:</b> The method is deprecated and will be removed in future, use <code>showAt</code> instead.",
15-
"deprecated": {
16-
"text": "The method is deprecated in favour of <code>showAt</code>."
17-
}
15+
"deprecated": { "text": "The method is deprecated in favour of <code>showAt</code>." }
1816
},
1917
{
2018
"name": "showAt",

‎packages/main/src/webComponents/ComboBox/index.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ interface ComboBoxAttributes {
2525
*/
2626
disabled?: boolean;
2727
/**
28-
* Defines the filter type of the component. Available options are: `StartsWithPerTerm`, `StartsWith` and `Contains`.
28+
* Defines the filter type of the component. Available options are: `StartsWithPerTerm`, `StartsWith`, `Contains` and `None`.
2929
*/
3030
filter?: string;
3131
/**

0 commit comments

Comments
 (0)