@zohodesk/library-platform 1.0.0-exp.1

package/.eslintrc.js

@@ -0,0 +1,31 @@
+const { rulesConfig, plugins, extendPlugins } = require('@zohodesk/codestandard-validator'); //no i18n
+const path = require('path');
+
+module.exports = {
+  env: {
+    browser: true,
+    es2021: true
+  },
+  extends: extendPlugins,
+  parser: '@typescript-eslint/parser',
+  parserOptions: {
+    project: path.resolve(process.cwd(), 'old-tsconfig.json'), // ts config file get from running directory
+    ecmaFeatures: {
+      jsx: true
+    },
+    ecmaVersion: 12,
+    sourceType: 'module'
+  },
+  plugins: plugins,
+  ignorePatterns: [
+    'node_modules/',
+    '**/__tests__/*.spec.js',
+    '**/index.js',
+    '**/index.ts',
+    'src/library/dot/**',
+    'src/platform/widgets/**',
+    'src/platform/data-broker/**',
+    'src/**/gateways/**'
+  ],
+  overrides: rulesConfig
+};

package/.prettierignore

@@ -0,0 +1 @@
+node_modules

package/.prettierrc

@@ -0,0 +1,12 @@
+{
+  "printWidth": 150,
+  "tabWidth": 2,
+  "useTabs": false,
+  "semi": true,
+  "singleQuote": true,
+  "jsxSingleQuote": true,
+  "trailingComma": "none",
+  "bracketSpacing": true,
+  "arrowParens": "avoid",
+  "endOfLine": "lf"
+}

package/README.md

@@ -0,0 +1,21 @@
+### Path Alias Configuring
+
+To configure your Path Alias, follow these steps:
+
+1. Make sure you have the latest version of `@zohodesk/react-cli` installed (v1.1.23).
+
+2. Configure path aliases by adding the following code to `react-cli.config.js`:
+
+```js
+alias: {
+    "@cc": "./src/cc"
+}
+```
+3. Configure path aliases by adding the following code to `jsconfig.json`
+```json
+"paths": {
+    "@cc/*": ["./src/cc/*"],
+    "@list-selection/*": ["./src/library/behaviours/list-selection/*"]
+}
+```
+---

package/arch-rules/README.md

@@ -0,0 +1,23 @@
+# Linting Process for Architecture Rules
+
+# Architectural Rules
+
+1.Outer layer methods or object not used in inner layer
+2.Platform folder objects or method does not import in library folder  
+3.File and Folder naming conversion rule
+
+- Filename (Pascal Case) Example : LifeCycleAction.ts, Component.ts
+- Folder Name (Spinal Case) Example : event-mapper, framework, json-schema-validator/
+
+### Example
+
+When a rule is violated, the linter produces an output error message:
+
+error no-OuterLayer-used-InnerLayer-frameworks: src/platform/registrar/adapters/gateways/RegistrarFactory.js → src/platform/registrar/frameworks/data-store/redux-store/store.js
+error no-OuterLayer-used-InnerLayer-adapters: src/platform/registrar/adapters/gateways/RegistrarFactory.js → src/platform/registrar/frameworks/data-store/redux-store/store.js
+
+Explanation :
+
+Error Type: The type of rule being violated (no-OuterLayer-used-InnerLayer-frameworks or no-OuterLayer-used-InnerLayer-adapters).
+Source File: The file where the violation originates (src/platform/registrar/adapters/gateways/RegistrarFactory.js).
+Target File: The file that is incorrectly imported (src/platform/registrar/frameworks/data-store/redux-store/store.js).

package/arch-rules/index.js

@@ -0,0 +1,16 @@
+const {
+  noOuterLayerUsedInnerLayer_adapters,
+  noOuterLayerUsedInnerLayer_entities,
+  noOuterLayerUsedInnerLayer_usecases,
+  noOuterLayerUsedInnerLayer_frameworks
+} = require('./rules-config/NoOuterLayerUsedInnerLayer');
+const {
+  noPlatformDependOnLibrary
+} = require('./rules-config/IndependentFolder');
+module.exports = {
+  noPlatformDependOnLibrary,
+  noOuterLayerUsedInnerLayer_frameworks,
+  noOuterLayerUsedInnerLayer_adapters,
+  noOuterLayerUsedInnerLayer_entities,
+  noOuterLayerUsedInnerLayer_usecases
+};

package/arch-rules/rules-config/IndependentFolder.js

@@ -0,0 +1,13 @@
+const noPlatformDependOnLibrary = {
+  name: 'no-Platform-Depend-Library',
+  severity: 'error',
+  comment: 'platform code should not import on library',
+  from: { path: 'src/library/.*/.+' },
+  to: {
+    path: 'src/platform/.*/.+'
+  }
+};
+
+module.exports = {
+  noPlatformDependOnLibrary
+};

package/arch-rules/rules-config/NoOuterLayerUsedInnerLayer.js

@@ -0,0 +1,60 @@
+const message ='The outer layer can depend on the inner layer, but the inner layer cannot depend on the outer layer';
+const { createRuleConfig } =  require('./RuleConfig')
+
+const dependencyLayer = {
+  entities: {
+    from: '^src/(library|platform)/.*/entities/.+',
+    to: '^src/(library|platform)/.*/(usecases|frameworks|adapters)/.*/.+'
+  },
+  usecases: {
+    from: '^src/(library|platform)/.*/usecases/.*/.+',
+    to: '^src/(library|platform)/.*/(frameworks|adapters)/.*/.+'
+  },
+  adapters: {
+    from: '^src/(library|platform)/.*/adapters/.*/.+',
+    to: '^(src/(library|platform)/.*/frameworks/.*/.+)'
+  },
+  framework: {
+    from: '^src/(library|platform)/.*/(adapters|entities|usecases)/.*',
+    to: '^src/(library|platform)/.*/frameworks/.*'
+  }
+};
+
+const noOuterLayerUsedInnerLayer_entities = createRuleConfig(
+  'no-OuterLayer-used-InnerLayer-entities',
+  'error',
+  message,
+  dependencyLayer.entities.from,
+  dependencyLayer.entities.to
+);
+
+const noOuterLayerUsedInnerLayer_usecases = createRuleConfig(
+  'no-OuterLayer-used-InnerLayer-usecase',
+  'error',
+  message,
+  dependencyLayer.usecases.from,
+  dependencyLayer.usecases.to
+);
+
+const noOuterLayerUsedInnerLayer_adapters = createRuleConfig(
+  'no-OuterLayer-used-InnerLayer-adapters',
+  'error',
+  message,
+  dependencyLayer.adapters.from,
+  dependencyLayer.adapters.to
+);
+
+const noOuterLayerUsedInnerLayer_frameworks = createRuleConfig(
+  'no-OuterLayer-used-InnerLayer-frameworks',
+  'error',
+  message,
+  dependencyLayer.framework.from,
+  dependencyLayer.framework.to
+);
+
+module.exports = {
+  noOuterLayerUsedInnerLayer_frameworks,
+  noOuterLayerUsedInnerLayer_adapters,
+  noOuterLayerUsedInnerLayer_entities,
+  noOuterLayerUsedInnerLayer_usecases
+};

package/arch-rules/rules-config/RuleConfig.js

@@ -0,0 +1,13 @@
+function createRuleConfig(name, severity, message, fromPath, toPath) {
+  return {
+    name,
+    severity: severity,
+    comment: message,
+    from: { path: fromPath },
+    to: { path: toPath }
+  };
+}
+
+module.exports = {
+  createRuleConfig
+};

package/examples/desk-app/mockapi/apiMappings.js

@@ -0,0 +1,5 @@
+const supportEmailAddress = require('./list/support-email-address/apis');
+
+const apiMappings = [...supportEmailAddress];
+
+exports.apiMappings = apiMappings;

package/examples/desk-app/mockapi/fileResponseStrategy.js

@@ -0,0 +1,9 @@
+const { getAbsoluteFilePath } = require('./getAbsoluteFilePath');
+const { getFilePath } = require('./getFilePath');
+
+module.exports = function(req, res, filePathOrCallback) {
+  const filePath = getFilePath(filePathOrCallback, req, res);
+  const absolutePath = getAbsoluteFilePath(filePath);
+  res.sendFile(absolutePath);
+}
+

package/examples/desk-app/mockapi/getAbsoluteFilePath.js

@@ -0,0 +1,6 @@
+const path = require('path');
+
+function getAbsoluteFilePath(filePath) {
+  return path.join(__dirname, filePath);
+}
+exports.getAbsoluteFilePath = getAbsoluteFilePath;

package/examples/desk-app/mockapi/getFilePath.js

@@ -0,0 +1,11 @@
+function getFilePath(filePathOrCallback, req, res) {
+  if (typeof filePathOrCallback === 'string') {
+    return filePathOrCallback;
+  }
+
+  if (typeof filePathOrCallback === 'function') {
+    const filePath = filePathOrCallback(req, res);
+    return filePath;
+  }
+}
+exports.getFilePath = getFilePath;

package/examples/desk-app/mockapi/index.js

@@ -0,0 +1,14 @@
+
+const { initialSetup } = require('./initialSetup');
+const { apiMappings } = require('./apiMappings');
+const { responseMapper } = require('./responseMapper');
+
+module.exports = function mockServer(app) {
+  initialSetup(app);
+
+  apiMappings.forEach((obj) => {
+    responseMapper(app, obj);
+  });
+};
+
+

package/examples/desk-app/mockapi/initialSetup.js

@@ -0,0 +1,21 @@
+function initialSetup(app) {
+  app.use('/api/', (req, res, next) => {
+    res.header('Access-Control-Allow-Origin', '*');
+    res.header(
+      'Access-Control-Allow-Methods',
+      'POST, GET, OPTIONS, PATCH, PUT, DELETE'
+    );
+    res.header(
+      'Access-Control-Allow-Headers',
+      'featureflags,orgid,skipplaintextconversion,x-zcsrf-token,Content-Type'
+    );
+    res.setHeader('Content-Type', 'application/json');
+
+    next();
+  });
+
+  app.options('/api/', () => {
+    res.send('done');
+  });
+}
+exports.initialSetup = initialSetup;

package/examples/desk-app/mockapi/jsonResponseStrategy.js

@@ -0,0 +1,6 @@
+function jsonResponseStrategy(req, res, responseHandler) {
+    const data = responseHandler(req, res);
+    res.send(data);
+  }
+  
+  module.exports = jsonResponseStrategy;

package/examples/desk-app/mockapi/list/support-email-address/apis.js

@@ -0,0 +1,27 @@
+const fs = require('fs');
+const path = require('path');
+
+module.exports = [
+  {
+    url: '/api/v1/support-email-address/availableFields',
+    filePath: '/list/support-email-address/availableFields.json'
+  },
+  {
+    url: '/api/v1/support-email-address/selectedFields',
+    // filePath: '/list/support-email-address/selectedFields.json'
+    type: 'JSON',
+    responseHandler: (req, res) => {
+      const { departmentId } = req.query;
+
+      const data = JSON.parse(
+        fs.readFileSync(path.join(__dirname, 'selectedFields.json')).toString()
+      );
+      return {
+        fields:
+          departmentId === 'allDepartment'
+            ? ['departmentId', ...data.fields]
+            : data.fields
+      };
+    }
+  }
+];

package/examples/desk-app/mockapi/list/support-email-address/availableFields.json

@@ -0,0 +1,94 @@
+{
+  "fields": [
+      {
+          "displayLabel": "Department",
+          "isCustomField": false,
+          "i18NLabel": "Department",
+          "isSortable": false,
+          "isVisible": true,
+          "type": "LookUp",
+          "isReadOnly": false,
+          "name": "departmentId",
+          "isEncryptedField": false,
+          "isPHI": false,
+          "id": "144662000002689336",
+          "maxLength": "50",
+          "isMandatory": false
+      },
+      {
+          "displayLabel": "Support Email Address",
+          "isCustomField": false,
+          "i18NLabel": "Support Email Address",
+          "isSortable": false,
+          "isVisible": true,
+          "type": "Email",
+          "isReadOnly": false,
+          "name": "address",
+          "isEncryptedField": false,
+          "isPHI": false,
+          "id": "144662000002691114",
+          "maxLength": "254",
+          "isMandatory": false
+      },
+      {
+          "displayLabel": "Friendly Name",
+          "isCustomField": false,
+          "i18NLabel": "Friendly Name",
+          "isSortable": false,
+          "isVisible": true,
+          "type": "Text",
+          "isReadOnly": false,
+          "name": "friendlyName",
+          "isEncryptedField": false,
+          "isPHI": false,
+          "id": "144662000002689339",
+          "maxLength": "120",
+          "isMandatory": true
+      },
+      {
+          "displayLabel": "Email Fetching",
+          "isCustomField": false,
+          "i18NLabel": "Email Fetching",
+          "isSortable": false,
+          "isVisible": true,
+          "type": "Boolean",
+          "isReadOnly": false,
+          "name": "isMailFetching",
+          "isEncryptedField": false,
+          "isPHI": false,
+          "id": "144662000002691128",
+          "maxLength": "3",
+          "isMandatory": false
+      },
+      {
+          "displayLabel": "Modified By",
+          "isCustomField": false,
+          "i18NLabel": "Modified By",
+          "isSortable": false,
+          "isVisible": true,
+          "type": "LookUp",
+          "isReadOnly": true,
+          "name": "modifiedBy",
+          "isEncryptedField": false,
+          "isPHI": false,
+          "id": "144662000002689348",
+          "maxLength": "25",
+          "isMandatory": false
+      },
+      {
+          "displayLabel": "Modified Time",
+          "isCustomField": false,
+          "i18NLabel": "Modified Time",
+          "isSortable": false,
+          "isVisible": true,
+          "type": "DateTime",
+          "isReadOnly": true,
+          "name": "modifiedTime",
+          "isEncryptedField": false,
+          "isPHI": false,
+          "id": "144662000002689354",
+          "maxLength": "25",
+          "isMandatory": false
+      }
+  ]
+}

package/examples/desk-app/mockapi/list/support-email-address/selectedFields.json

@@ -0,0 +1,3 @@
+{
+  "fields": ["address", "friendlyName", "isMailFetching", "modifiedBy", "modifiedTime"]
+}

package/examples/desk-app/mockapi/responseMapper.js

@@ -0,0 +1,13 @@
+const jsonResponseStrategy = require('./jsonResponseStrategy');
+const fileResponseStrategy = require('./fileResponseStrategy');
+
+function responseMapper(app, obj) {
+  const { url: urlPath, filePath: filePathOrCallback, type, responseHandler } = obj;
+  let strategy = type === 'JSON' ? jsonResponseStrategy : fileResponseStrategy;
+  let handler = filePathOrCallback ? filePathOrCallback : responseHandler;
+  app.get(urlPath, (req, res) => {
+    strategy(req, res, handler);
+  });
+}
+
+exports.responseMapper = responseMapper;

package/examples/desk-app/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "sampleapp",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "clean": "react-cli clean build unittest coverage",
+    "start": "react-cli start",
+    "build": "react-cli build",
+    "test": "npm run clean && react-cli test",
+    "lint": "react-cli lint",
+    "mockserver": "react-cli mockserver"
+  },
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "@zohodesk-private/css-variable-migrator": "^1.0.7",
+    "@zohodesk-private/desk-components": "1.2.0",
+    "@zohodesk-private/node-plugins": "1.1.7",
+    "@zohodesk/a11y": "2.1.2",
+    "@zohodesk/components": "1.2.39",
+    "@zohodesk/datetimejs": "^1.0.0-beta.10",
+    "@zohodesk/dot": "1.4.13",
+    "@zohodesk/hooks": "2.0.4",
+    "@zohodesk/icons": "1.0.33",
+    "@zohodesk/layout": "3.1.0",
+    "@zohodesk/library-platform": "file:../../",
+    "@zohodesk/svg": "1.1.8",
+    "@zohodesk/utils": "1.3.13",
+    "@zohodesk/variables": "1.0.0-beta.31",
+    "@zohodesk/virtualizer": "1.0.13"
+  },
+  "devDependencies": {
+    "body-parser": "^1.19.0",
+    "express-fileupload": "^1.1.5"
+  }
+}

package/examples/desk-app/react-cli.config.js

@@ -0,0 +1,18 @@
+exports.config = {
+  css: {
+    enableRTLSplit: true,
+    templateLabel: '{{--dir}}',
+    disableMiniFiySelector: false,
+    dirVarName: 'document.dir',
+    cssVariableReplacementConfig:
+      './node_modules/@zohodesk-private/css-variable-migrator/es/config/cssVariableReplacementOptions.json'
+  },
+  app: {
+    server: {
+      
+      hasMock: true,
+      disableContextURL: true
+
+    }
+  }
+};

package/examples/desk-app/src/AppContainer.js

@@ -0,0 +1,102 @@
+/* eslint-disable react/prop-types */
+import React, { useState, useMemo, useCallback } from 'react';
+import Flex from '@zohodesk/layout/es/Flex/Flex';
+import ToggleDropDown from '@zohodesk/dot/es/dropdown/ToggleDropDown/ToggleDropDown';
+import RippleEffect from '@zohodesk/components/lib/RippleEffect/RippleEffect';
+import { Icon } from '@zohodesk/icons';
+
+import { useDepartments } from './hooks/useDepartments';
+import { useModules } from './hooks/useModules';
+import { useViews } from './hooks/useViews';
+
+import style from './style.module.css';
+import SupportEmailAddress from './non-module/support-email-address/SupportEmailAddress';
+import ModuleListContainer from './module/ModuleListContainer';
+
+export default function AppContainer() {
+  const orgName = currentOrg.portalName;
+  const orgId = `${currentOrg.id}`;
+
+  const { departments, isLoading: isDepartmentsLoading, departmentId, setDepartmentId } = useDepartments({ orgName, orgId });
+  const { modules, isLoading: isModulesLoading, moduleId: moduleName, setModuleId } = useModules({ orgName, orgId });
+
+  const departmentName = departments?.find(d => d.id === departmentId)?.sanitizedName;
+
+  const moduleOptions = useMemo(() => modules.map(m => ({ id: m.apiKey, text: m.displayLabel })), [modules]);
+  const departmentOptions = useMemo(() => departments.map(d => ({ id: d.id, text: d.name })), [departments]);
+
+  const [isSupportEmail, setIsSupportEmail] = useState(false);
+  const { views, isLoading: isViewsLoading, viewId, setViewId } = useViews({ orgName, orgId, moduleName, departmentId });
+  const viewOptions = useMemo(() => (isSupportEmail ? [] : views.map(v => ({ id: v.id, text: v.name }))), [views]);
+  const isApiLoaded = !isDepartmentsLoading && !isModulesLoading && !isViewsLoading;
+
+  const ModuleContainer = isSupportEmail ? SupportEmailAddress : ModuleListContainer;
+
+  return (
+    <Flex $ui_displayMode='flex' $ui_direction='column' $flag_fullsize>
+      <Flex $ui_displayMode='flex' $ui_alignItems='center' $ui_className={style.header}>
+        {!isModulesLoading && <Select key='Module Name' title='Module' options={moduleOptions} value={moduleName} onChange={setModuleId} />}
+        {!isDepartmentsLoading && (
+          <Select key='Department Name' title='Department' options={departmentOptions} value={departmentId} onChange={setDepartmentId} />
+        )}
+        {!isViewsLoading && <Select key='View Name' title='View' options={viewOptions} value={viewId} onChange={setViewId} />}
+        <button onClick={() => setIsSupportEmail(!isSupportEmail)}>{isSupportEmail ? 'Modules' : 'SupportEmail'}</button>
+      </Flex>
+      <div style={{ flex: '1 1 0%', minHeight: '0' }}>
+        {!isApiLoaded ? (
+          <h1>Loading ...</h1>
+        ) : (
+          <ModuleContainer
+            orgId={orgId}
+            moduleName={moduleName}
+            moduleSanitatedName={moduleName ? modules.find(m => m.apiKey === moduleName)?.sanitizedName || '' : ''}
+            viewId={viewId}
+            departmentId={departmentId}
+            orgName={orgName}
+            departmentName={departmentName}
+          />
+        )}
+      </div>
+    </Flex>
+  );
+}
+
+function Select({ title, options = [], value = '', onChange }) {
+  const selected = options.find(o => o.id === value);
+
+  const handleChange = useCallback(
+    (e, option) => {
+      onChange(option.id);
+    },
+    [onChange]
+  );
+
+  return (
+    <Flex $ui_displayMode='inline' $ui_alignItems='center'>
+      <div className={style.label}>{title} :</div>
+      <ToggleDropDown
+        keyName='text'
+        isArrow={false}
+        boxSize='medium'
+        placeHolderText='Search'
+        selectedId={selected.id}
+        isToggleStateNeeded
+        options={options}
+        isSearch={options.length > 4}
+        boxPosition='bottomRight'
+        onClick={handleChange}
+      >
+        <TargetElement value={selected.text} />
+      </ToggleDropDown>
+    </Flex>
+  );
+}
+
+function TargetElement({ value, isActive }) {
+  return (
+    <Flex $ui_displayMode='inline' $ui_alignItems='baseline' $ui_className={`${style.headerDrop} ${isActive ? style.active : ''}`}>
+      <span className={style.value}>{value}</span>
+      <Icon name='ZD-arrowDownSingle' size='8' isBold />
+    </Flex>
+  );
+}

package/examples/desk-app/src/DeleteRecordIcon.js

@@ -0,0 +1,39 @@
+/* eslint-disable react/prop-types */
+import React from 'react';
+import ActionIcon from '@zohodesk-private/desk-components/es/ActionIcon/ActionIcon';
+import { createCustomComponent } from '@zohodesk/library-platform/es/library';
+import { ActionIconConstants, ActionIconProperties } from '@zohodesk/library-platform/es/cc';
+
+function DeleteRecordIconView({ state, helpers }, ref) {
+  const { icon, label, hoverVariant } = state.properties;
+  const { dispatch } = helpers;
+
+  return (
+    <span ref={ref}>
+      <ActionIcon
+        $ui_iconName={icon}
+        $ui_hoverVariant={hoverVariant}
+        $flag_gap
+        $i18n_tooltip={label}
+        $event_onClick={() => {
+          const isOk = confirm('Selected Task will be moved to the recycle bin. \n Con we Proceed with record Delete');
+
+          isOk &&
+            dispatch({
+              type: ActionIconConstants.ACTION_ICON_CLICKED
+            });
+        }}
+      />
+    </span>
+  );
+}
+
+const DeleteRecordIcon = createCustomComponent({
+  name: 'DeleteRecordIcon',
+  View: DeleteRecordIconView,
+  properties: ActionIconProperties,
+  events: [],
+  eventHandlers: {}
+});
+
+export default DeleteRecordIcon;

package/examples/desk-app/src/actions/CustomDeleteAction.js

@@ -0,0 +1,19 @@
+export const CustomDeleteAction = {
+  uiType: 'ActionIcon',
+  properties: {
+    label: 'Custom Delete',
+    icon: 'ZD-close22',
+    hoverVariant: 'danger'
+  },
+  eventMapping: [
+    {
+      id: '12ss',
+      action: {
+        id: '122sa32',
+        dispatchType: 'TEST_Delete_Check'
+      },
+      payloadMapping: '{ "recordId": "{{recordId}}" }',
+      eventType: 'ACTION_ICON#CLICKED'
+    }
+  ]
+};

package/examples/desk-app/src/actions/DeleteAction.js

@@ -0,0 +1,20 @@
+
+export const DeleteAction = {
+  uiType: 'DeleteRecordIcon',
+  properties: {
+    label: 'Delete',
+    icon: 'ZD-GN-delete',
+    hoverVariant: 'danger'
+  },
+  eventMapping: [
+    {
+      id: '34223423',
+      action: {
+        id: '3',
+        dispatchType: 'ZLIST#DELETE_RECORDS'
+      },
+      payloadMapping: '{ "recordIds": ["{{recordId}}"] }',
+      eventType: 'ACTION_ICON#CLICKED'
+    }
+  ]
+};