feat(WebComponents): Update to v1.0.0-rc.5

packages/main/package.json

@@ -14,15 +14,17 @@
   "license": "Apache-2.0",
   "private": false,
   "sideEffects": [
-    "@ui5/webcomponents/dist/icons/*"
+    "@ui5/webcomponents-icons/dist/icons/*"
   ],
   "scripts": {
     "generateWebComponents": "ts-node -O '{\"module\": \"commonjs\"}' -r esm ./scripts/wrapperGeneration/index.js --onlyStopForMerge",
     "build": "webpack --config ./scripts/wrapperGeneration/webpack.config.js",
     "postbuild": "rollup -c rollup.config.js"
   },
   "dependencies": {
-    "@ui5/webcomponents": "1.0.0-rc.4",
+    "@ui5/webcomponents": "1.0.0-rc.5",
+    "@ui5/webcomponents-fiori": "^1.0.0-rc.5",
+    "@ui5/webcomponents-icons": "^1.0.0-rc.5",
     "@ui5/webcomponents-react-base": "0.7.0-rc.1",
     "lodash.debounce": "^4.0.8",
     "react-content-loader": "^4.3.2",

packages/main/scripts/wrapperGeneration/parseComponentNames.js

@@ -2,22 +2,9 @@ const fs = require('fs');
 const path = require('path');
 const PATHS = require('../../../../config/paths');
 
-// create list of modules
-const webComponentsModulePath = path.resolve(PATHS.nodeModules, '@ui5', 'webcomponents', 'dist');
-let files = fs
-  .readdirSync(webComponentsModulePath)
-  .filter((file) => file.endsWith('.js'))
-  .map((file) => path.basename(file, '.js'));
-
-const appDirectory = fs.realpathSync(process.cwd());
-const folderName = path.resolve(appDirectory, 'scripts', 'wrapperGeneration', 'json');
-
-if (!fs.existsSync(folderName)) {
-  fs.mkdirSync(folderName);
-}
-
 const PRIVATE_COMPONENTS = [
   'CalendarHeader',
+  'DefaultTheme',
   'DayPicker',
   'ListItem',
   'ListItemBase',
@@ -29,7 +16,26 @@ const PRIVATE_COMPONENTS = [
   'YearPicker'
 ];
 
-files = files.filter((file) => !PRIVATE_COMPONENTS.includes(file));
-console.log(files);
+const appDirectory = fs.realpathSync(process.cwd());
+const folderName = path.resolve(appDirectory, 'scripts', 'wrapperGeneration', 'json');
+
+if (!fs.existsSync(folderName)) {
+  fs.mkdirSync(folderName);
+}
 
-fs.writeFileSync(path.resolve(folderName, 'modules.json'), JSON.stringify(files));
+// create list of modules
+const webComponentsModulePath = path.resolve(PATHS.nodeModules, '@ui5', 'webcomponents', 'dist');
+const standardWebComponents = fs
+  .readdirSync(webComponentsModulePath)
+  .filter((file) => file.endsWith('.js'))
+  .map((file) => path.basename(file, '.js'))
+  .filter((file) => !PRIVATE_COMPONENTS.includes(file));
+fs.writeFileSync(path.resolve(folderName, 'webcomponents.json'), JSON.stringify(standardWebComponents));
+
+const fioriWebComponentsFolder = path.resolve(PATHS.nodeModules, '@ui5', 'webcomponents-fiori', 'dist');
+const fioriWebComponents = fs
+  .readdirSync(fioriWebComponentsFolder)
+  .filter((file) => file.endsWith('.js'))
+  .map((file) => path.basename(file, '.js'))
+  .filter((file) => !PRIVATE_COMPONENTS.includes(file));
+fs.writeFileSync(path.resolve(folderName, 'webcomponents-fiori.json'), JSON.stringify(fioriWebComponents));

packages/main/scripts/wrapperGeneration/puppeteerScript.js

@@ -1,23 +1,34 @@
 import { generateTypings } from './generateTypingsWeb';
 
-const modules = require('./json/modules');
+const modules = require('./json/webcomponents');
+const fioriWebComponents = require('./json/webcomponents-fiori');
+
+const createAndLogDto = (componentName, module) => {
+  const WebComponent = module.default;
+  if (WebComponent && WebComponent.getMetadata) {
+    const metadata = WebComponent.getMetadata().metadata;
+    const dto = {
+      componentName,
+      metadata,
+      typings: generateTypings(metadata)
+    };
+    console.log(JSON.stringify(dto));
+  }
+};
 
 modules.forEach((moduleName) => {
   import(
     /* webpackMode: "eager" */
     '@ui5/webcomponents/dist/' + moduleName
   ).then((module) => {
-    const WebComponent = module.default;
-    if (WebComponent && WebComponent.getMetadata) {
-      const metadata = WebComponent.getMetadata().metadata;
-      const dto = {
-        componentName: moduleName,
-        metadata,
-        typings: generateTypings(metadata)
-      };
-      console.log(JSON.stringify(dto));
-    }
+    createAndLogDto(moduleName, module);
+  });
+});
+fioriWebComponents.forEach((moduleName) => {
+  import(
+    /* webpackMode: "eager" */
+    '@ui5/webcomponents-fiori/dist/' + moduleName
+  ).then((module) => {
+    createAndLogDto(moduleName, module);
   });
 });
-
-console.log(modules);

packages/main/scripts/wrapperGeneration/steps/createDemo.js

@@ -42,7 +42,7 @@ function getKnownNumber(key, meta) {
 }
 
 const knownStrings = {
-  icon: "'sap-icon://add'"
+  icon: "'add'"
 };
 
 function getStringValue(key, meta) {

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

@@ -92,25 +92,25 @@ export const ColumnHeaderModal: FC<ColumnHeaderModalProperties> = (props) => {
     >
       <List onItemClick={handleSort}>
         {showSort && (
-          <StandardListItem type={ListItemTypes.Active} icon={'sap-icon://sort-ascending'} data-sort={'asc'}>
+          <StandardListItem type={ListItemTypes.Active} icon={'sort-ascending'} data-sort={'asc'}>
             Sort Ascending
           </StandardListItem>
         )}
         {showSort && (
-          <StandardListItem type={ListItemTypes.Active} icon={'sap-icon://sort-descending'} data-sort={'desc'}>
+          <StandardListItem type={ListItemTypes.Active} icon={'sort-descending'} data-sort={'desc'}>
             Sort Descending
           </StandardListItem>
         )}
         {showFilter && !column.isGrouped && (
           <CustomListItem type={ListItemTypes.Inactive}>
             <FlexBox alignItems={FlexBoxAlignItems.Center} style={{ padding: '0px 1rem' }}>
-              <Icon src="sap-icon://filter" style={{ paddingRight: '1rem' }} />
+              <Icon name="filter" style={{ paddingRight: '1rem' }} />
               <Filter column={column} />
             </FlexBox>
           </CustomListItem>
         )}
         {showGroup && (
-          <StandardListItem type={ListItemTypes.Active} icon="sap-icon://group-2" data-sort={'group'}>
+          <StandardListItem type={ListItemTypes.Active} icon="group-2" data-sort={'group'}>
             {column.isGrouped ? 'Ungroup' : 'Group'}
           </StandardListItem>
         )}

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

@@ -7,10 +7,10 @@ import { JSSTheme } from '../../../interfaces/JSSTheme';
 import { Resizer } from './Resizer';
 import { ColumnType } from '../types/ColumnType';
 import { ColumnHeaderModal } from './ColumnHeaderModal';
-import '@ui5/webcomponents/dist/icons/filter';
-import '@ui5/webcomponents/dist/icons/group-2';
-import '@ui5/webcomponents/dist/icons/sort-descending';
-import '@ui5/webcomponents/dist/icons/sort-ascending';
+import '@ui5/webcomponents-icons/dist/icons/filter';
+import '@ui5/webcomponents-icons/dist/icons/group-2';
+import '@ui5/webcomponents-icons/dist/icons/sort-descending';
+import '@ui5/webcomponents-icons/dist/icons/sort-ascending';
 
 export interface ColumnHeaderProps {
   id: string;
@@ -101,9 +101,9 @@ export const ColumnHeader: FC<ColumnHeaderProps> = (props) => {
 
     const classNames = StyleClassHelper.of(classes.header);
 
-    const sortingIcon = column.isSorted ? <Icon src={desc ? 'sort-descending' : 'sort-ascending'} /> : null;
-    const filterIcon = isFiltered ? <Icon src="sap-icon://filter" /> : null;
-    const groupingIcon = column.isGrouped ? <Icon src="sap-icon://group-2" /> : null;
+    const sortingIcon = column.isSorted ? <Icon name={desc ? 'sort-descending' : 'sort-ascending'} /> : null;
+    const filterIcon = isFiltered ? <Icon name="filter" /> : null;
+    const groupingIcon = column.isGrouped ? <Icon name="group-2" /> : null;
 
     return (
       <div className={classNames.valueOf()}>