Skip to content

Commit 9e4dbbf

Browse files
Lukas742Lukas742
authored
docs: migrate stories to mdx format (#711)
* refactor Avatar story to mdx * remove Avatar tsx story * Add the possibility to the webcomponents-react wrapper script to only create a single component * refactor Badge story * refactor Button story * webcomponents-react script supports icon import of Icon * refactor Icon * refactor Input main description + story * refactor Label story * refactor Link story * refactor RatingIndicator prop description + story * refactor Switch main description + story * refactor Title story * refactor ToggleButton prop description + story * refactor TextArea story * add missing declaration to webcomponents-react wrapper script #689
1 parent 7b03340 commit 9e4dbbf

28 files changed

+699
-430
lines changed

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

Lines changed: 53 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,9 @@ console.warn(
55
'Currently there are two tag-names missing or faulty: "ui5-notification-overflow-action" and "ui5-timeline-item"\n These have to be adjusted manually!\n'
66
);
77

8+
// To only create a single component, add the component (module) name here:
9+
const CREATE_SINGLE_COMPONENT = false;
10+
811
const mainWebComponentsSpec = require('@ui5/webcomponents/dist/api.json');
912
const fioriWebComponentsSpec = require('@ui5/webcomponents-fiori/dist/api.json');
1013
const dedent = require('dedent');
@@ -461,6 +464,10 @@ const createWebComponentDemo = (componentSpec, componentProps, description) => {
461464
if (prop.importStatement && prop.importStatement !== `import { ReactNode } from 'react';`) {
462465
enumImports.push(prop.importStatement);
463466
}
467+
if (componentSpec.module === 'Icon' && prop.name === 'name') {
468+
enumImports.push(`import "@ui5/webcomponents-icons/dist/icons/employee.js";`);
469+
args.push(`name: 'employee'`);
470+
}
464471
if (prop.name === 'primaryCalendarType') {
465472
enumImports.push(`import "@ui5/webcomponents-localization/dist/features/calendar/Gregorian.js";`);
466473
enumImports.push(`import "@ui5/webcomponents-localization/dist/features/calendar/Buddhist.js";`);
@@ -732,59 +739,61 @@ resolvedWebComponents.forEach((componentSpec) => {
732739
};
733740

734741
const [mainDescription, description = ''] = formatDescription();
742+
if (CREATE_SINGLE_COMPONENT === componentSpec.module || !CREATE_SINGLE_COMPONENT) {
743+
const webComponentWrapper = createWebComponentWrapper(
744+
componentSpec.module,
745+
componentSpec.tagname,
746+
mainDescription,
747+
propTypes,
748+
uniqueAdditionalImports,
749+
defaultProps,
750+
(componentSpec.properties || [])
751+
.filter(filterNonPublicAttributes)
752+
.filter(({ type }) => type !== 'boolean' && type !== 'Boolean')
753+
.map(({ name }) => name),
754+
(componentSpec.properties || [])
755+
.filter(filterNonPublicAttributes)
756+
.filter(({ type }) => type === 'boolean' || type === 'Boolean')
757+
.map(({ name }) => name),
758+
(componentSpec.slots || []).filter(filterNonPublicAttributes).map(({ name }) => name),
759+
(componentSpec.events || []).filter(filterNonPublicAttributes).map(({ name }) => name)
760+
);
735761

736-
const webComponentWrapper = createWebComponentWrapper(
737-
componentSpec.module,
738-
componentSpec.tagname,
739-
mainDescription,
740-
propTypes,
741-
uniqueAdditionalImports,
742-
defaultProps,
743-
(componentSpec.properties || [])
744-
.filter(filterNonPublicAttributes)
745-
.filter(({ type }) => type !== 'boolean' && type !== 'Boolean')
746-
.map(({ name }) => name),
747-
(componentSpec.properties || [])
748-
.filter(filterNonPublicAttributes)
749-
.filter(({ type }) => type === 'boolean' || type === 'Boolean')
750-
.map(({ name }) => name),
751-
(componentSpec.slots || []).filter(filterNonPublicAttributes).map(({ name }) => name),
752-
(componentSpec.events || []).filter(filterNonPublicAttributes).map(({ name }) => name)
753-
);
754-
755-
// check if folder exists and create it if necessary
756-
const webComponentFolderPath = path.join(WEB_COMPONENTS_ROOT_DIR, componentSpec.module);
757-
if (!fs.existsSync(webComponentFolderPath)) {
758-
fs.mkdirSync(webComponentFolderPath);
759-
}
762+
// check if folder exists and create it if necessary
763+
const webComponentFolderPath = path.join(WEB_COMPONENTS_ROOT_DIR, componentSpec.module);
764+
if (!fs.existsSync(webComponentFolderPath)) {
765+
fs.mkdirSync(webComponentFolderPath);
766+
}
760767

761-
fs.writeFileSync(path.join(webComponentFolderPath, 'index.tsx'), webComponentWrapper);
768+
fs.writeFileSync(path.join(webComponentFolderPath, 'index.tsx'), webComponentWrapper);
762769

763-
// create lib export
764-
const libContent = prettier.format(
765-
`
770+
// create lib export
771+
const libContent = prettier.format(
772+
`
766773
import { ${componentSpec.module} } from '../webComponents/${componentSpec.module}';
767774
import type { ${componentSpec.module}PropTypes } from '../webComponents/${componentSpec.module}';
768775
769776
export { ${componentSpec.module} };
770777
export type { ${componentSpec.module}PropTypes };`,
771-
prettierConfig
772-
);
773-
fs.writeFileSync(path.join(LIB_DIR, `${componentSpec.module}.ts`), libContent);
778+
prettierConfig
779+
);
780+
fs.writeFileSync(path.join(LIB_DIR, `${componentSpec.module}.ts`), libContent);
774781

775-
// create test
776-
if (!fs.existsSync(path.join(webComponentFolderPath, `${componentSpec.module}.test.tsx`))) {
777-
const webComponentTest = createWebComponentTest(componentSpec.module);
778-
fs.writeFileSync(path.join(webComponentFolderPath, `${componentSpec.module}.test.tsx`), webComponentTest);
779-
}
782+
// create test
783+
if (!fs.existsSync(path.join(webComponentFolderPath, `${componentSpec.module}.test.tsx`))) {
784+
const webComponentTest = createWebComponentTest(componentSpec.module);
785+
fs.writeFileSync(path.join(webComponentFolderPath, `${componentSpec.module}.test.tsx`), webComponentTest);
786+
}
780787

781-
// create demo
782-
if (
783-
!fs.existsSync(path.join(webComponentFolderPath, `${componentSpec.module}.stories.tsx`)) &&
784-
!fs.existsSync(path.join(webComponentFolderPath, `${componentSpec.module}.stories.mdx`)) &&
785-
!COMPONENTS_WITHOUT_DEMOS.has(componentSpec.module)
786-
) {
787-
const webComponentDemo = createWebComponentDemo(componentSpec, allComponentProperties, description);
788-
fs.writeFileSync(path.join(webComponentFolderPath, `${componentSpec.module}.stories.mdx`), webComponentDemo);
788+
// create demo
789+
if (
790+
CREATE_SINGLE_COMPONENT === componentSpec.module ||
791+
(!fs.existsSync(path.join(webComponentFolderPath, `${componentSpec.module}.stories.tsx`)) &&
792+
!fs.existsSync(path.join(webComponentFolderPath, `${componentSpec.module}.stories.mdx`)) &&
793+
!COMPONENTS_WITHOUT_DEMOS.has(componentSpec.module))
794+
) {
795+
const webComponentDemo = createWebComponentDemo(componentSpec, allComponentProperties, description);
796+
fs.writeFileSync(path.join(webComponentFolderPath, `${componentSpec.module}.stories.mdx`), webComponentDemo);
797+
}
789798
}
790799
});

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

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs/blocks';
2+
import { Avatar } from '@ui5/webcomponents-react/lib/Avatar';
3+
import { AvatarBackgroundColor } from '@ui5/webcomponents-react/lib/AvatarBackgroundColor';
4+
import '@ui5/webcomponents-icons/dist/icons/employee.js';
5+
import { Icon } from '@ui5/webcomponents-react/lib/Icon';
6+
import { AvatarFitType } from '@ui5/webcomponents-react/lib/AvatarFitType';
7+
import { AvatarShape } from '@ui5/webcomponents-react/lib/AvatarShape';
8+
import { AvatarSize } from '@ui5/webcomponents-react/lib/AvatarSize';
9+
import { CSSProperties, Ref } from 'react';
10+
11+
import { createSelectArgTypes } from '@shared/stories/createSelectArgTypes';
12+
import { DocsHeader } from '@shared/stories/DocsHeader';
13+
14+
<Meta
15+
title="UI5 Web Components / Avatar"
16+
component={Avatar}
17+
argTypes={{
18+
...createSelectArgTypes({
19+
backgroundColor: AvatarBackgroundColor,
20+
imageFitType: AvatarFitType,
21+
shape: AvatarShape,
22+
size: AvatarSize
23+
}),
24+
slot: { control: { disable: true } },
25+
ref: { control: { disable: true } },
26+
style: {
27+
type: CSSProperties,
28+
description:
29+
'Element style which will be appended to the most outer element of a component. Use this prop carefully, some css properties might break the component.'
30+
},
31+
className: {
32+
type: 'string',
33+
description:
34+
'CSS Class Name which will be appended to the most outer element of a component. Use this prop carefully, overwriting CSS rules might break the component.'
35+
},
36+
tooltip: { type: 'string', description: 'A tooltip which will be shown on hover' }
37+
}}
38+
args={{
39+
backgroundColor: AvatarBackgroundColor.Accent6,
40+
icon: 'employee',
41+
imageFitType: AvatarFitType.Cover,
42+
shape: AvatarShape.Circle,
43+
size: AvatarSize.S,
44+
style: {},
45+
className: '',
46+
tooltip: '',
47+
slot: '',
48+
ref: null
49+
}}
50+
/>
51+
52+
<DocsHeader />
53+
54+
<Canvas>
55+
<Story name="Default">
56+
{(args) => {
57+
return <Avatar {...args} />;
58+
}}
59+
</Story>
60+
</Canvas>
61+
62+
<ArgsTable story="." />

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

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

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

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs/blocks';
2+
import { Badge } from '@ui5/webcomponents-react/lib/Badge';
3+
import '@ui5/webcomponents-icons/dist/icons/employee.js';
4+
import { Icon } from '@ui5/webcomponents-react/lib/Icon';
5+
import { CSSProperties, Ref } from 'react';
6+
7+
import { createSelectArgTypes } from '@shared/stories/createSelectArgTypes';
8+
import { DocsHeader } from '@shared/stories/DocsHeader';
9+
10+
<Meta
11+
title="UI5 Web Components / Badge"
12+
component={Badge}
13+
argTypes={{
14+
...createSelectArgTypes({}),
15+
children: { control: 'text' },
16+
icon: { control: { disable: true } },
17+
slot: { control: { disable: true } },
18+
ref: { control: { disable: true } },
19+
style: {
20+
type: CSSProperties,
21+
description:
22+
'Element style which will be appended to the most outer element of a component. Use this prop carefully, some css properties might break the component.'
23+
},
24+
className: {
25+
type: 'string',
26+
description:
27+
'CSS Class Name which will be appended to the most outer element of a component. Use this prop carefully, overwriting CSS rules might break the component.'
28+
},
29+
tooltip: { type: 'string', description: 'A tooltip which will be shown on hover' }
30+
}}
31+
args={{
32+
children: 'Badge Text',
33+
icon: <Icon name="employee" />,
34+
style: {},
35+
className: '',
36+
tooltip: '',
37+
slot: '',
38+
ref: null
39+
}}
40+
/>
41+
42+
<DocsHeader />
43+
44+
<Canvas>
45+
<Story name="Default">
46+
{(args) => {
47+
return <Badge {...args} />;
48+
}}
49+
</Story>
50+
</Canvas>
51+
52+
<ArgsTable story="." />
53+
<div style={{fontFamily:'var(--sapFontFamily)', fontSize:'var(--sapFontSize)', color:'var(--sapTextColor)'}}>
54+
<h3>Usage Guidelines</h3>
55+
<ul>
56+
<li>If the text is longer than the width of the component, it doesn’t wrap, it shows ellipsis.</li>
57+
<li>
58+
When truncated, the full text is not visible, therefore, it’s recommended to make more space for longer texts to be
59+
fully displayed.
60+
</li>
61+
<li>Colors are not semantic and have no visual representation in High Contrast Black (sap_belize_hcb) theme.</li>
62+
</ul>
63+
</div>

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

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

0 commit comments

Comments
 (0)