refactor: migrate stories to mdx format

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

@@ -5,6 +5,9 @@ console.warn(
   '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'
 );
 
+// To only create a single component, add the component (module) name here:
+const CREATE_SINGLE_COMPONENT = false;
+
 const mainWebComponentsSpec = require('@ui5/webcomponents/dist/api.json');
 const fioriWebComponentsSpec = require('@ui5/webcomponents-fiori/dist/api.json');
 const dedent = require('dedent');
@@ -461,6 +464,10 @@ const createWebComponentDemo = (componentSpec, componentProps, description) => {
     if (prop.importStatement && prop.importStatement !== `import { ReactNode } from 'react';`) {
       enumImports.push(prop.importStatement);
     }
+    if (componentSpec.module === 'Icon' && prop.name === 'name') {
+      enumImports.push(`import "@ui5/webcomponents-icons/dist/icons/employee.js";`);
+      args.push(`name: 'employee'`);
+    }
     if (prop.name === 'primaryCalendarType') {
       enumImports.push(`import "@ui5/webcomponents-localization/dist/features/calendar/Gregorian.js";`);
       enumImports.push(`import "@ui5/webcomponents-localization/dist/features/calendar/Buddhist.js";`);
@@ -732,59 +739,61 @@ resolvedWebComponents.forEach((componentSpec) => {
   };
 
   const [mainDescription, description = ''] = formatDescription();
+  if (CREATE_SINGLE_COMPONENT === componentSpec.module || !CREATE_SINGLE_COMPONENT) {
+    const webComponentWrapper = createWebComponentWrapper(
+      componentSpec.module,
+      componentSpec.tagname,
+      mainDescription,
+      propTypes,
+      uniqueAdditionalImports,
+      defaultProps,
+      (componentSpec.properties || [])
+        .filter(filterNonPublicAttributes)
+        .filter(({ type }) => type !== 'boolean' && type !== 'Boolean')
+        .map(({ name }) => name),
+      (componentSpec.properties || [])
+        .filter(filterNonPublicAttributes)
+        .filter(({ type }) => type === 'boolean' || type === 'Boolean')
+        .map(({ name }) => name),
+      (componentSpec.slots || []).filter(filterNonPublicAttributes).map(({ name }) => name),
+      (componentSpec.events || []).filter(filterNonPublicAttributes).map(({ name }) => name)
+    );
 
-  const webComponentWrapper = createWebComponentWrapper(
-    componentSpec.module,
-    componentSpec.tagname,
-    mainDescription,
-    propTypes,
-    uniqueAdditionalImports,
-    defaultProps,
-    (componentSpec.properties || [])
-      .filter(filterNonPublicAttributes)
-      .filter(({ type }) => type !== 'boolean' && type !== 'Boolean')
-      .map(({ name }) => name),
-    (componentSpec.properties || [])
-      .filter(filterNonPublicAttributes)
-      .filter(({ type }) => type === 'boolean' || type === 'Boolean')
-      .map(({ name }) => name),
-    (componentSpec.slots || []).filter(filterNonPublicAttributes).map(({ name }) => name),
-    (componentSpec.events || []).filter(filterNonPublicAttributes).map(({ name }) => name)
-  );
-
-  // check if folder exists and create it if necessary
-  const webComponentFolderPath = path.join(WEB_COMPONENTS_ROOT_DIR, componentSpec.module);
-  if (!fs.existsSync(webComponentFolderPath)) {
-    fs.mkdirSync(webComponentFolderPath);
-  }
+    // check if folder exists and create it if necessary
+    const webComponentFolderPath = path.join(WEB_COMPONENTS_ROOT_DIR, componentSpec.module);
+    if (!fs.existsSync(webComponentFolderPath)) {
+      fs.mkdirSync(webComponentFolderPath);
+    }
 
-  fs.writeFileSync(path.join(webComponentFolderPath, 'index.tsx'), webComponentWrapper);
+    fs.writeFileSync(path.join(webComponentFolderPath, 'index.tsx'), webComponentWrapper);
 
-  // create lib export
-  const libContent = prettier.format(
-    `
+    // create lib export
+    const libContent = prettier.format(
+      `
     import { ${componentSpec.module} } from '../webComponents/${componentSpec.module}';
     import type { ${componentSpec.module}PropTypes } from '../webComponents/${componentSpec.module}';
 
     export { ${componentSpec.module} };
     export type { ${componentSpec.module}PropTypes };`,
-    prettierConfig
-  );
-  fs.writeFileSync(path.join(LIB_DIR, `${componentSpec.module}.ts`), libContent);
+      prettierConfig
+    );
+    fs.writeFileSync(path.join(LIB_DIR, `${componentSpec.module}.ts`), libContent);
 
-  // create test
-  if (!fs.existsSync(path.join(webComponentFolderPath, `${componentSpec.module}.test.tsx`))) {
-    const webComponentTest = createWebComponentTest(componentSpec.module);
-    fs.writeFileSync(path.join(webComponentFolderPath, `${componentSpec.module}.test.tsx`), webComponentTest);
-  }
+    // create test
+    if (!fs.existsSync(path.join(webComponentFolderPath, `${componentSpec.module}.test.tsx`))) {
+      const webComponentTest = createWebComponentTest(componentSpec.module);
+      fs.writeFileSync(path.join(webComponentFolderPath, `${componentSpec.module}.test.tsx`), webComponentTest);
+    }
 
-  // create demo
-  if (
-    !fs.existsSync(path.join(webComponentFolderPath, `${componentSpec.module}.stories.tsx`)) &&
-    !fs.existsSync(path.join(webComponentFolderPath, `${componentSpec.module}.stories.mdx`)) &&
-    !COMPONENTS_WITHOUT_DEMOS.has(componentSpec.module)
-  ) {
-    const webComponentDemo = createWebComponentDemo(componentSpec, allComponentProperties, description);
-    fs.writeFileSync(path.join(webComponentFolderPath, `${componentSpec.module}.stories.mdx`), webComponentDemo);
+    // create demo
+    if (
+      CREATE_SINGLE_COMPONENT === componentSpec.module ||
+      (!fs.existsSync(path.join(webComponentFolderPath, `${componentSpec.module}.stories.tsx`)) &&
+        !fs.existsSync(path.join(webComponentFolderPath, `${componentSpec.module}.stories.mdx`)) &&
+        !COMPONENTS_WITHOUT_DEMOS.has(componentSpec.module))
+    ) {
+      const webComponentDemo = createWebComponentDemo(componentSpec, allComponentProperties, description);
+      fs.writeFileSync(path.join(webComponentFolderPath, `${componentSpec.module}.stories.mdx`), webComponentDemo);
+    }
   }
 });

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

@@ -0,0 +1,62 @@
+import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs/blocks';
+import { Avatar } from '@ui5/webcomponents-react/lib/Avatar';
+import { AvatarBackgroundColor } from '@ui5/webcomponents-react/lib/AvatarBackgroundColor';
+import '@ui5/webcomponents-icons/dist/icons/employee.js';
+import { Icon } from '@ui5/webcomponents-react/lib/Icon';
+import { AvatarFitType } from '@ui5/webcomponents-react/lib/AvatarFitType';
+import { AvatarShape } from '@ui5/webcomponents-react/lib/AvatarShape';
+import { AvatarSize } from '@ui5/webcomponents-react/lib/AvatarSize';
+import { CSSProperties, Ref } from 'react';
+
+import { createSelectArgTypes } from '@shared/stories/createSelectArgTypes';
+import { DocsHeader } from '@shared/stories/DocsHeader';
+
+<Meta
+  title="UI5 Web Components / Avatar"
+  component={Avatar}
+  argTypes={{
+    ...createSelectArgTypes({
+      backgroundColor: AvatarBackgroundColor,
+      imageFitType: AvatarFitType,
+      shape: AvatarShape,
+      size: AvatarSize
+    }),
+    slot: { control: { disable: true } },
+    ref: { control: { disable: true } },
+    style: {
+      type: CSSProperties,
+      description:
+        '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.'
+    },
+    className: {
+      type: 'string',
+      description:
+        '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.'
+    },
+    tooltip: { type: 'string', description: 'A tooltip which will be shown on hover' }
+  }}
+  args={{
+    backgroundColor: AvatarBackgroundColor.Accent6,
+    icon: 'employee',
+    imageFitType: AvatarFitType.Cover,
+    shape: AvatarShape.Circle,
+    size: AvatarSize.S,
+    style: {},
+    className: '',
+    tooltip: '',
+    slot: '',
+    ref: null
+  }}
+/>
+
+<DocsHeader />
+
+<Canvas>
+  <Story name="Default">
+    {(args) => {
+      return <Avatar {...args} />;
+    }}
+  </Story>
+</Canvas>
+
+<ArgsTable story="." />

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

@@ -0,0 +1,63 @@
+import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs/blocks';
+import { Badge } from '@ui5/webcomponents-react/lib/Badge';
+import '@ui5/webcomponents-icons/dist/icons/employee.js';
+import { Icon } from '@ui5/webcomponents-react/lib/Icon';
+import { CSSProperties, Ref } from 'react';
+
+import { createSelectArgTypes } from '@shared/stories/createSelectArgTypes';
+import { DocsHeader } from '@shared/stories/DocsHeader';
+
+<Meta
+  title="UI5 Web Components / Badge"
+  component={Badge}
+  argTypes={{
+    ...createSelectArgTypes({}),
+    children: { control: 'text' },
+    icon: { control: { disable: true } },
+    slot: { control: { disable: true } },
+    ref: { control: { disable: true } },
+    style: {
+      type: CSSProperties,
+      description:
+        '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.'
+    },
+    className: {
+      type: 'string',
+      description:
+        '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.'
+    },
+    tooltip: { type: 'string', description: 'A tooltip which will be shown on hover' }
+  }}
+  args={{
+    children: 'Badge Text',
+    icon: <Icon name="employee" />,
+    style: {},
+    className: '',
+    tooltip: '',
+    slot: '',
+    ref: null
+  }}
+/>
+
+<DocsHeader />
+
+<Canvas>
+  <Story name="Default">
+    {(args) => {
+      return <Badge {...args} />;
+    }}
+  </Story>
+</Canvas>
+
+<ArgsTable story="." />
+<div style={{fontFamily:'var(--sapFontFamily)', fontSize:'var(--sapFontSize)', color:'var(--sapTextColor)'}}>
+<h3>Usage Guidelines</h3>
+<ul>
+  <li>If the text is longer than the width of the component, it doesn’t wrap, it shows ellipsis.</li>
+  <li>
+    When truncated, the full text is not visible, therefore, it’s recommended to make more space for longer texts to be
+    fully displayed.
+  </li>
+  <li>Colors are not semantic and have no visual representation in High Contrast Black (sap_belize_hcb) theme.</li>
+</ul>
+</div>