feat: update @ui5/webcomponents to 1.0.0-rc.10

package.json

@@ -30,9 +30,9 @@
     "@storybook/cli": "6.0.28",
     "@storybook/react": "6.0.28",
     "@storybook/theming": "6.0.28",
-    "@ui5/webcomponents": "1.0.0-rc.9",
-    "@ui5/webcomponents-fiori": "1.0.0-rc.9",
-    "@ui5/webcomponents-icons": "1.0.0-rc.9",
+    "@ui5/webcomponents": "1.0.0-rc.10",
+    "@ui5/webcomponents-fiori": "1.0.0-rc.10",
+    "@ui5/webcomponents-icons": "1.0.0-rc.10",
     "react": "17.0.1",
     "react-dom": "17.0.1",
     "react-syntax-highlighter": "^15.2.1",
@@ -62,7 +62,7 @@
     "@types/react-dom": "^16.9.6",
     "@typescript-eslint/eslint-plugin": "^4.4.0",
     "@typescript-eslint/parser": "^4.4.0",
-    "@ui5/webcomponents-tools": "^1.0.0-rc.9",
+    "@ui5/webcomponents-tools": "1.0.0-rc.10",
     "babel-loader": "^8.1.0",
     "chalk": "^4.0.0",
     "dedent": "^0.7.0",
@@ -92,6 +92,7 @@
     "rollup": "^2.23.0",
     "rollup-plugin-terser": "^7.0.2",
     "targz": "^1.0.1",
+    "turndown": "^7.0.0",
     "typescript": "^4.0.3"
   },
   "resolutions": {

packages/base/package.json

@@ -33,7 +33,7 @@
     "smoothscroll-polyfill": "0.4.4"
   },
   "peerDependencies": {
-    "@ui5/webcomponents-base": "1.0.0-rc.9",
+    "@ui5/webcomponents-base": "0.26.0",
     "react": "^16.8.0 || ^17.0.0",
     "react-jss": "^10.0.4"
   },

packages/charts/package.json

@@ -26,8 +26,8 @@
     "recharts": "2.0.0-beta.8"
   },
   "peerDependencies": {
-    "@ui5/webcomponents-react": "^0.11.0",
-    "@ui5/webcomponents-react-base": "^0.11.0",
+    "@ui5/webcomponents-react": "^0.12.0",
+    "@ui5/webcomponents-react-base": "^0.12.0",
     "react": "^16.8.0 || ^17.0.0",
     "react-jss": "^10.0.4"
   },

packages/cra-template-seed/template.json

@@ -2,13 +2,13 @@
   "package": {
     "dependencies": {
       "@testing-library/jest-dom": "^5.11.4",
-      "@testing-library/react": "^10.4.9",
-      "@testing-library/user-event": "^12.1.4",
-      "@ui5/webcomponents": "1.0.0-rc.9",
-      "@ui5/webcomponents-fiori": "1.0.0-rc.9",
-      "@ui5/webcomponents-icons": "1.0.0-rc.9",
-      "@ui5/webcomponents-react": "^0.11.0",
-      "@ui5/webcomponents-react-base": "^0.11.0",
+      "@testing-library/react": "^11.1.0",
+      "@testing-library/user-event": "^12.1.10",
+      "@ui5/webcomponents": "1.0.0-rc.10",
+      "@ui5/webcomponents-fiori": "1.0.0-rc.10",
+      "@ui5/webcomponents-icons": "1.0.0-rc.10",
+      "@ui5/webcomponents-react": "^0.12.0",
+      "@ui5/webcomponents-react-base": "^0.12.0",
       "axios": "^0.20.0",
       "husky": "^4.2.5",
       "i18next": "^19.7.0",

packages/cra-template/template.json

@@ -1,13 +1,13 @@
 {
   "package": {
     "dependencies": {
-      "@ui5/webcomponents": "1.0.0-rc.9",
-      "@ui5/webcomponents-fiori": "1.0.0-rc.9",
-      "@ui5/webcomponents-icons": "1.0.0-rc.9",
-      "@ui5/webcomponents-react": "^0.11.0",
-      "@testing-library/react": "^9.3.2",
-      "@testing-library/jest-dom": "^4.2.4",
-      "@testing-library/user-event": "^7.1.2",
+      "@ui5/webcomponents": "1.0.0-rc.10",
+      "@ui5/webcomponents-fiori": "1.0.0-rc.10",
+      "@ui5/webcomponents-icons": "1.0.0-rc.10",
+      "@ui5/webcomponents-react": "^0.12.0",
+      "@testing-library/jest-dom": "^5.11.4",
+      "@testing-library/react": "^11.1.0",
+      "@testing-library/user-event": "^12.1.10",
       "jest-environment-jsdom-sixteen": "^1.0.3"
     },
     "scripts": {

packages/main/package.json

@@ -14,7 +14,7 @@
   "author": "SAP SE (https://www.sap.com)",
   "license": "Apache-2.0",
   "sideEffects": [
-    "@ui5/webcomponents-icons/dist/icons/*",
+    "@ui5/webcomponents-icons/dist/*",
     "@ui5/webcomponents/dist/*",
     "@ui5/webcomponents-fiori/dist/*",
     "./dist/Assets.js",
@@ -41,10 +41,10 @@
     "react-virtual": "2.3.1"
   },
   "peerDependencies": {
-    "@ui5/webcomponents": "1.0.0-rc.9",
-    "@ui5/webcomponents-base": "1.0.0-rc.9",
-    "@ui5/webcomponents-fiori": "1.0.0-rc.9",
-    "@ui5/webcomponents-icons": "1.0.0-rc.9",
+    "@ui5/webcomponents": "1.0.0-rc.10",
+    "@ui5/webcomponents-base": "0.26.0",
+    "@ui5/webcomponents-fiori": "1.0.0-rc.10",
+    "@ui5/webcomponents-icons": "1.0.0-rc.10",
     "react": "^16.8.0 || ^17.0.0",
     "react-dom": "^16.8.0 || ^17.0.0"
   },

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

@@ -1,16 +1,4 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
-
-//TODO:
-console.warn(
-  '----------------------\nCurrently there are two tag-names missing or faulty: "ui5-notification-overflow-action" and "ui5-timeline-item"\nThese have to be adjusted manually!\n----------------------'
-);
-
-// To only create a single component, replace "false" with the component (module) name
-// or execute the following command: "yarn create-webcomponents-wrapper [name]"
-const CREATE_SINGLE_COMPONENT = process.argv[2] || false;
-
-const EXCLUDE_LIST = ['NotificationListItem'];
-
 import mainWebComponentsSpec from '@ui5/webcomponents/dist/api.json';
 import fioriWebComponentsSpec from '@ui5/webcomponents-fiori/dist/api.json';
 import dedent from 'dedent';
@@ -19,6 +7,19 @@ import prettierConfigRaw from '../../../prettier.config.cjs';
 import path from 'path';
 import PATHS from '../../../config/paths.js';
 import fs from 'fs';
+import TurndownService from 'turndown';
+
+const turndownService = new TurndownService({
+  headingStyle: 'atx',
+  codeBlockStyle: 'fenced'
+});
+turndownService.keep(['ui5-link']);
+
+// To only create a single component, replace "false" with the component (module) name
+// or execute the following command: "yarn create-webcomponents-wrapper [name]"
+const CREATE_SINGLE_COMPONENT = process.argv[2] || false;
+
+const EXCLUDE_LIST = ['NotificationListItem'];
 
 const prettierConfig = {
   ...prettierConfigRaw,
@@ -102,26 +103,44 @@ COMPONENTS_WITHOUT_DEMOS.add('SideNavigationSubItem');
 COMPONENTS_WITHOUT_DEMOS.add('SuggestionItem');
 COMPONENTS_WITHOUT_DEMOS.add('UploadCollectionItem');
 COMPONENTS_WITHOUT_DEMOS.add('NotificationOverflowAction');
+COMPONENTS_WITHOUT_DEMOS.add('WizardStep');
 
 const componentsFromFioriPackage = new Set(fioriWebComponentsSpec.symbols.map((componentSpec) => componentSpec.module));
 
+const allWebComponents = [
+  ...mainWebComponentsSpec.symbols.filter((spec) => !spec.module.startsWith('types/')),
+  ...fioriWebComponentsSpec.symbols.filter((spec) => !spec.module.startsWith('types/'))
+];
+
+const htmlTagToModuleNameMap = new Map();
+for (const spec of allWebComponents) {
+  htmlTagToModuleNameMap.set(spec.tagname, spec.module);
+}
+
 const capitalizeFirstLetter = (s) => s.charAt(0).toUpperCase() + s.slice(1);
 const snakeToCamel = (str) => str.replace(/([-_]\w)/g, (g) => g[1].toUpperCase());
 const filterNonPublicAttributes = (prop) =>
   prop.visibility === 'public' && prop.readonly !== 'true' && prop.static !== true;
 
 const replaceTagNameWithModuleName = (description) => {
+  let parsedDescription = description.replace(/(ui5-[\w-]+)/g, (fullMatch, tag, ...args) => {
+    if (tag === 'ui5-link') return tag;
+    return htmlTagToModuleNameMap.get(tag);
+  });
+
+  parsedDescription = parsedDescription.replace(/`ui5-link/g, `\`${htmlTagToModuleNameMap.get('ui5-link')}`);
+
   // replace all tag occurrences in description with module name
-  [...description.matchAll(new RegExp(`<code>ui5-`, 'g'))].forEach(() => {
+  [...parsedDescription.matchAll(new RegExp(`<code>ui5-`, 'g'))].forEach(() => {
     const start = description.indexOf(`<code>ui5-`) + 6;
     const end = description.indexOf(`</code>`, start);
     const tagName = description.slice(start, end);
-    const webComponentWithTagName = allWebComponents.find((item) => item.tagname === tagName);
-    if (webComponentWithTagName) {
-      description = description.replace(webComponentWithTagName.tagname, webComponentWithTagName.module);
+    if (htmlTagToModuleNameMap.has(tagName)) {
+      description = description.replace(tagName, htmlTagToModuleNameMap.get(tagName));
     }
   });
-  return description;
+
+  return parsedDescription;
 };
 
 const getTypeScriptTypeForProperty = (property) => {
@@ -407,31 +426,45 @@ const createWebComponentWrapper = (
   }
   let componentDescription;
   try {
-    componentDescription = prettier
-      .format(description, {
-        ...prettierConfigRaw,
-        parser: 'html'
-      })
-      .replace(/\s\s+/g, ' ');
+    componentDescription = turndownService.turndown(description).replace(/\n/g, '\n * ');
   } catch (e) {
     console.warn(
       `----------------------\nHeader description of ${name} couldn't be generated. \nThere is probably a syntax error in the associated description that can't be fixed automatically.\n----------------------`
     );
     componentDescription = '';
   }
+
+  const regularImports = importStatements
+    .filter((imp) => !imp.includes("from 'react'"))
+    .sort((a, b) => {
+      const importNameA = /import \{ (\w+) \}/.exec(a)[1];
+      const importNameB = /import \{ (\w+) \}/.exec(b)[1];
+      return importNameA.localeCompare(importNameB);
+    });
+  const reactImports = [
+    'FC',
+    ...importStatements
+      .filter((imp) => imp.includes("from 'react'"))
+      .map((imp) => {
+        const match = /import \{ (\w+) \}/.exec(imp);
+        return match[1];
+      })
+  ].sort((a, b) => a.localeCompare(b));
+
   return prettier.format(
     `
+    ${regularImports.join('\n')}
     import { withWebComponent, WithWebComponentPropTypes } from '@ui5/webcomponents-react/lib/withWebComponent';
     import '@ui5/webcomponents${componentsFromFioriPackage.has(name) ? '-fiori' : ''}/dist/${name}';
-    import { FC } from 'react';
-    ${importStatements.join('\n')}
+    import { ${reactImports.join(', ')} } from 'react';
 
     export interface ${name}PropTypes extends ${tsExtendsStatement} {
       ${types.join('\n')}
     }
 
     /**
      * ${componentDescription}     
+     * 
      * <a href="https://sap.github.io/ui5-webcomponents/playground/components/${name}" target="_blank">UI5 Web Components Playground</a>
      */
     const ${name}: FC<${name}PropTypes> = withWebComponent<${name}PropTypes>(
@@ -494,7 +527,7 @@ const createWebComponentDemo = (componentSpec, componentProps, description) => {
       enumImports.push(prop.importStatement);
     }
     if (componentSpec.module === 'Icon' && prop.name === 'name') {
-      enumImports.push(`import "@ui5/webcomponents-icons/dist/icons/employee.js";`);
+      enumImports.push(`import "@ui5/webcomponents-icons/dist/employee.js";`);
       args.push(`name: 'employee'`);
     }
     if (prop.name === 'primaryCalendarType') {
@@ -516,7 +549,7 @@ const createWebComponentDemo = (componentSpec, componentProps, description) => {
         customArgTypes.push(`children: {control: {disable:true}}`);
       }
     } else if (prop.name === 'icon') {
-      enumImports.push(`import "@ui5/webcomponents-icons/dist/icons/employee.js";`);
+      enumImports.push(`import "@ui5/webcomponents-icons/dist/employee.js";`);
       enumImports.push(`import { Icon } from '@ui5/webcomponents-react/lib/Icon';`);
       if (prop.tsType === 'string') {
         args.push(`icon: 'employee'`);
@@ -613,11 +646,6 @@ const createWebComponentDemo = (componentSpec, componentProps, description) => {
   )}${formattedDescription}`;
 };
 
-const allWebComponents = [
-  ...mainWebComponentsSpec.symbols.filter((spec) => !spec.module.startsWith('types/')),
-  ...fioriWebComponentsSpec.symbols.filter((spec) => !spec.module.startsWith('types/'))
-];
-
 const assignComponentPropertiesToMaps = (componentSpec, { properties, slots, events }) => {
   (componentSpec.properties || []).forEach((prop) => {
     if (!properties.has(prop.name)) {
@@ -699,10 +727,9 @@ resolvedWebComponents.forEach((componentSpec) => {
         if (!componentSpec.tagname) {
           return property.description || '';
         }
-        let formattedDescription = (property.description || '')
-          .replace(/\n\n<br><br> /g, '<br/><br/>\n  *\n  * ')
-          .replace(/\n\n/g, '<br/><br/>\n  *\n  * ')
-          .replace(new RegExp(componentSpec.tagname, 'g'), `${componentSpec.module}`);
+        let formattedDescription = turndownService
+          .turndown((property.description || '').trim())
+          .replace(/\n/g, '\n   * ');
 
         const customDescriptionReplace = CUSTOM_DESCRIPTION_REPLACE[componentSpec.module];
         if (customDescriptionReplace && customDescriptionReplace[property.name]) {
@@ -746,7 +773,9 @@ resolvedWebComponents.forEach((componentSpec) => {
       importStatements.push(...eventParameters.importStatements);
       propTypes.push(dedent`
       /**
-       * ${replaceTagNameWithModuleName(eventSpec.description)}
+       * ${replaceTagNameWithModuleName(
+         turndownService.turndown((eventSpec.description || '').trim()).replace(/\n/g, '\n   * ')
+       )}
        */
        on${capitalizeFirstLetter(snakeToCamel(eventSpec.name))}?: ${eventParameters.tsType};
       `);

packages/main/src/components/AnalyticalCard/AnalyticalCard.stories.mdx

@@ -1,7 +1,7 @@
 import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs/blocks';
 import { createSelectArgTypes } from '@shared/stories/createSelectArgTypes';
 import { DocsHeader } from '@shared/stories/DocsHeader';
-import '@ui5/webcomponents-icons/dist/icons/person-placeholder.js';
+import '@ui5/webcomponents-icons/dist/person-placeholder.js';
 import { AnalyticalCard } from '@ui5/webcomponents-react/lib/AnalyticalCard';
 import { AnalyticalCardHeader } from '@ui5/webcomponents-react/lib/AnalyticalCardHeader';
 import { DeviationIndicator } from '@ui5/webcomponents-react/lib/DeviationIndicator';

packages/main/src/components/AnalyticalTable/AnalyticalTable.stories.mdx

@@ -6,9 +6,9 @@ import { TableSelectionBehavior } from '@ui5/webcomponents-react/lib/TableSelect
 import { TableSelectionMode } from '@ui5/webcomponents-react/lib/TableSelectionMode';
 import generateData from './demo/generateData';
 import { DocsHeader } from '@shared/stories/DocsHeader';
-import '@ui5/webcomponents-icons/dist/icons/delete';
-import '@ui5/webcomponents-icons/dist/icons/edit';
-import '@ui5/webcomponents-icons/dist/icons/settings';
+import '@ui5/webcomponents-icons/dist/delete';
+import '@ui5/webcomponents-icons/dist/edit';
+import '@ui5/webcomponents-icons/dist/settings';
 import { Button } from '@ui5/webcomponents-react/lib/Button';
 import { FlexBox } from '@ui5/webcomponents-react/lib/FlexBox';
 import { TextAlign } from '@ui5/webcomponents-react/lib/TextAlign';

packages/main/src/components/AnalyticalTable/ColumnHeader/ColumnHeaderModal.tsx

@@ -1,4 +1,4 @@
-import '@ui5/webcomponents-icons/dist/icons/decline';
+import '@ui5/webcomponents-icons/dist/decline';
 import { useI18nText } from '@ui5/webcomponents-react-base/lib/hooks';
 import { ThemingParameters } from '@ui5/webcomponents-react-base/lib/ThemingParameters';
 import { enrichEventWithDetails } from '@ui5/webcomponents-react-base/lib/Utils';

packages/main/src/components/AnalyticalTable/ColumnHeader/index.tsx

@@ -1,8 +1,8 @@
 import { getRTL } from '@ui5/webcomponents-base/dist/config/RTL';
-import '@ui5/webcomponents-icons/dist/icons/filter';
-import '@ui5/webcomponents-icons/dist/icons/group-2';
-import '@ui5/webcomponents-icons/dist/icons/sort-ascending';
-import '@ui5/webcomponents-icons/dist/icons/sort-descending';
+import '@ui5/webcomponents-icons/dist/filter';
+import '@ui5/webcomponents-icons/dist/group-2';
+import '@ui5/webcomponents-icons/dist/sort-ascending';
+import '@ui5/webcomponents-icons/dist/sort-descending';
 import { createComponentStyles } from '@ui5/webcomponents-react-base/lib/createComponentStyles';
 import { ThemingParameters } from '@ui5/webcomponents-react-base/lib/ThemingParameters';
 import { Icon } from '@ui5/webcomponents-react/lib/Icon';

packages/main/src/components/AnalyticalTable/TableBody/VirtualTableBody.tsx

@@ -1,5 +1,5 @@
-import '@ui5/webcomponents-icons/dist/icons/navigation-down-arrow';
-import '@ui5/webcomponents-icons/dist/icons/navigation-right-arrow';
+import '@ui5/webcomponents-icons/dist/navigation-down-arrow';
+import '@ui5/webcomponents-icons/dist/navigation-right-arrow';
 import { useConsolidatedRef } from '@ui5/webcomponents-react-base/lib/useConsolidatedRef';
 import React, { MutableRefObject, useCallback, useRef } from 'react';
 import { useVirtual } from 'react-virtual';

packages/main/src/components/Bar/Bar.stories.mdx

@@ -6,7 +6,7 @@ import { Input } from '@ui5/webcomponents-react/lib/Input';
 import { Link } from '@ui5/webcomponents-react/lib/Link';
 import { ButtonDesign } from '@ui5/webcomponents-react/lib/ButtonDesign';
 import { Title } from '@ui5/webcomponents-react/lib/Title';
-import '@ui5/webcomponents-icons/dist/icons/nav-back.js';
+import '@ui5/webcomponents-icons/dist/nav-back.js';
 import { createSelectArgTypes } from '@shared/stories/createSelectArgTypes';
 import { DocsHeader } from '@shared/stories/DocsHeader';
 import { DocsCommonProps } from '@shared/stories/DocsCommonProps';

packages/main/src/components/DynamicPage/DynamicPage.stories.mdx

@@ -1,9 +1,9 @@
 import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs/blocks';
 import { DocsHeader } from '@shared/stories/DocsHeader';
-import '@ui5/webcomponents-icons/dist/icons/action';
-import '@ui5/webcomponents-icons/dist/icons/full-screen';
-import '@ui5/webcomponents-icons/dist/icons/exit-full-screen';
-import '@ui5/webcomponents-icons/dist/icons/decline';
+import '@ui5/webcomponents-icons/dist/action';
+import '@ui5/webcomponents-icons/dist/full-screen';
+import '@ui5/webcomponents-icons/dist/exit-full-screen';
+import '@ui5/webcomponents-icons/dist/decline';
 import { Title } from '@ui5/webcomponents-react/lib/Title';
 import { Label } from '@ui5/webcomponents-react/lib/Label';
 import { Breadcrumbs } from '@ui5/webcomponents-react/lib/Breadcrumbs';

packages/main/src/components/DynamicPage/DynamicPage.test.tsx

@@ -9,10 +9,10 @@ import React from 'react';
 import { DynamicPageTitle } from '@ui5/webcomponents-react/lib/DynamicPageTitle';
 import { DynamicPageHeader } from '@ui5/webcomponents-react/lib/DynamicPageHeader';
 import { DynamicPage } from '@ui5/webcomponents-react/lib/DynamicPage';
-import '@ui5/webcomponents-icons/dist/icons/action';
-import '@ui5/webcomponents-icons/dist/icons/full-screen';
-import '@ui5/webcomponents-icons/dist/icons/exit-full-screen';
-import '@ui5/webcomponents-icons/dist/icons/decline';
+import '@ui5/webcomponents-icons/dist/action';
+import '@ui5/webcomponents-icons/dist/full-screen';
+import '@ui5/webcomponents-icons/dist/exit-full-screen';
+import '@ui5/webcomponents-icons/dist/decline';
 import { ButtonDesign } from '@ui5/webcomponents-react/lib/ButtonDesign';
 import { Badge } from '@ui5/webcomponents-react/lib/Badge';
 import { Form } from '@ui5/webcomponents-react/lib/Form';