@zohodesk/library-platform 1.0.0-exp.1 → 1.0.0-exp.3

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

@@ -1,24 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import UIProvider from './common/UIProvider';
-import AppContainer from './AppContainer';
-
-ReactDOM.render(
-  <UIProvider>
-    <AppContainer />
-    <div id='deskParent' style={{ display: 'none' }}></div>
-    <style>
-      {`
-body, html {
-    margin: 0;
-    padding: 0;
-    height: 100%
-}
-#root, #react {
-    height: 100%
-}
-`}
-      </style>
-  </UIProvider>,
-  document.getElementById('react')
-);

package/examples/desk-app/src/module/ModuleListContainer.js

@@ -1,52 +0,0 @@
-/* eslint-disable react/prop-types */
-import React, { Component } from 'react';
-import { ComponentRegistry } from '@zohodesk/library-platform/es/library';
-import DeleteRecordIcon from '../DeleteRecordIcon';
-import TableConnected from './TableConnected';
-import { rowActions } from '../actions/RowActions';
-import { apiHeaders } from '../apiHeaders';
-
-ComponentRegistry.register('NewCheckboxField', <input type='checkbox' />);
-ComponentRegistry.register('DeleteRecordIcon', DeleteRecordIcon);
-
-const uiMapping = {
-  fields: {
-    cf_admin: 'NewCheckboxField'
-  }
-};
-
-const selectionConfig = {
-  isEnabled: true,
-  maxSelectionCount: 10,
-  limitExceedAlertMessage: 'Max records selected'
-};
-
-export default class ModuleListContainer extends Component {
-  render() {
-    const { orgId, moduleName, viewId, departmentId, orgName, departmentName, moduleSanitatedName } = this.props;
-
-    const filter = {
-      viewId,
-      orgId,
-      departmentId
-    };
-    const pageContext = {
-      orgName,
-      departmentName,
-      moduleSanitatedName
-    };
-
-    return (
-      <TableConnected
-        moduleName={moduleName}
-        rowActions={rowActions}
-        filter={filter}
-        pageContext={pageContext}
-        uiMapping={uiMapping}
-        limit={25}
-        selectionConfig={selectionConfig}
-        headers={apiHeaders}
-      />
-    );
-  }
-}

package/examples/desk-app/src/module/TableConnected.js

@@ -1,25 +0,0 @@
-import { TableConnectedFactory } from '@zohodesk/library-platform/es/desk-frameworks';
-
-const TableConnected = TableConnectedFactory.create({
-  name: 'ModuleTable',
-  eventHandlers: {
-    TEST_Delete_Check: (event, api) => {
-      const { payload } = event.action;
-      api.zlist.deleteRecords([payload.recordId]);
-    },
-    'AGENT_PROFILE#SIGNAL_GO': (event, api) => {
-      const { payload } = event.action;
-      api.zlist.updateRecord(payload.recordId, { cf: { cf_signal: 'Go' } });
-    },
-    'AGENT_PROFILE#SIGNAL_WAIT': (event, api) => {
-      const { payload } = event.action;
-      api.zlist.updateRecord(payload.recordId, { cf: { cf_signal: 'Wait' } });
-    },
-    'AGENT_PROFILE#SIGNAL_STOP': (event, api) => {
-      const { payload } = event.action;
-      api.zlist.updateRecord(payload.recordId, { cf: { cf_signal: 'Stop' } });
-    }
-  }
-});
-
-export default TableConnected;

package/examples/desk-app/src/non-module/support-email-address/SupportEmailAddress.js

@@ -1,58 +0,0 @@
-/* eslint-disable react/prop-types */
-import React, { Component } from 'react';
-import { TableConnectedFactory } from '@zohodesk/library-platform/es/desk-frameworks';
-import { ComponentRegistry } from '@zohodesk/library-platform/es/library';
-import dataBroker from './data-broker';
-
-import { EditAction } from '../../actions/EditAction';
-import { DeleteAction } from '../../actions/DeleteAction';
-import { apiHeaders } from '../../apiHeaders';
-import SupportEmailAddressEmptyState from './empty-state/SupportEmailAddressEmptyState';
-
-const rowActions = [EditAction, DeleteAction];
-
-const SupportEmailAddressConnected = TableConnectedFactory.create({
-  name: 'SupportEmailAddress',
-  dataBroker
-});
-
-ComponentRegistry.register('SupportEmailAddressEmptyState', SupportEmailAddressEmptyState);
-const uiMapping = {
-  fields: {
-    isMailFetching: 'SwitchField'
-  },
-  emptyState: 'SupportEmailAddressEmptyState'
-};
-
-export default class SupportEmailAddress extends Component {
-  render() {
-    const { orgId, moduleName, viewId, departmentId, orgName, departmentName, moduleSanitatedName } = this.props;
-
-    const filter = {
-      viewId,
-      orgName,
-      orgId,
-      departmentId
-    };
-    const pageContext = {
-      orgName,
-      departmentName,
-      moduleSanitatedName
-    };
-
-    return (
-      <div>
-        <h1>Support Email Address</h1>
-        <SupportEmailAddressConnected
-          moduleName={moduleName}
-          rowActions={rowActions}
-          filter={filter}
-          pageContext={pageContext}
-          uiMapping={uiMapping}
-          limit={25}
-          headers={apiHeaders}
-        />
-      </div>
-    );
-  }
-}

package/examples/desk-app/src/non-module/support-email-address/constants.js

@@ -1 +0,0 @@
-export const MOCK_API_DOMAIN = (desk_urls.tpStaticDomain).slice(0, -1);

package/examples/desk-app/src/non-module/support-email-address/data-broker/http-template/getAvailableFields.js

@@ -1,22 +0,0 @@
-import { MOCK_API_DOMAIN } from '../../constants';
-
-let getAvailableFields = {
-  name: 'availableFields',
-  api: MOCK_API_DOMAIN + '/api/v1/support-email-address/availableFields',
-  parameters: `{
-        "departmentId":"{{departmentId}}"
-    }`,
-  type: 'GET',
-  transformer: res => res.fields,
-  properties: {
-    departmentId: {
-      required: true,
-      typeMetadata: {
-        schema: {
-          type: 'string'
-        }
-      }
-    }
-  }
-};
-export default getAvailableFields;

package/examples/desk-app/src/non-module/support-email-address/data-broker/http-template/getRecords.js

@@ -1,64 +0,0 @@
-const getDepartmentName = departmentId => {
-  const department = window.departments?.find(department => department.id === departmentId);
-  return department ? department.name : '';
-};
-
-const getRecords = {
-  name: 'records',
-  api: `/supportapi/zd/{{orgName}}/api/v1/supportEmailAddress`,
-  parameters: `{
-        "departmentId": "{{departmentId}}",
-        "from":{{from}},
-        "limit":{{limit}}
-    }`,
-  type: 'GET',
-  transformer: data => {
-    const newData = data.data.map(record => {
-      const { createdTime, createdBy, modifiedTime, modifiedBy } = record;
-      return {
-        ...record,
-        modifiedBy: modifiedBy ? modifiedBy : createdBy,
-        modifiedTime: modifiedTime ? modifiedTime : createdTime,
-        departmentId: getDepartmentName(record.departmentId)
-      };
-    });
-    return newData;
-  },
-  properties: {
-    orgName: {
-      required: true,
-      typeMetadata: {
-        schema: {
-          type: 'string'
-        }
-      }
-    },
-    departmentId: {
-      required: true,
-      typeMetadata: {
-        schema: {
-          type: 'string'
-        }
-      }
-    },
-    from: {
-      required: false,
-      defaultValue: 1,
-      typeMetadata: {
-        schema: {
-          type: 'number'
-        }
-      }
-    },
-    limit: {
-      required: false,
-      defaultValue: 20,
-      typeMetadata: {
-        schema: {
-          type: 'number'
-        }
-      }
-    }
-  }
-};
-export default getRecords;

package/examples/desk-app/src/non-module/support-email-address/data-broker/http-template/getSelectedFields.js

@@ -1,27 +0,0 @@
-import { MOCK_API_DOMAIN } from '../../constants';
-
-let getSelectedFields = {
-  name: 'selectedFields',
-  api: MOCK_API_DOMAIN + '/api/v1/support-email-address/selectedFields',
-
-  parameters: `{
-        "departmentId": "{{departmentId}}",
-        "module": "{{moduleName}}"
-    }`,
-  type: 'GET',
-
-  transformer: res => res.fields,
-
-  properties: {
-    departmentId: {
-      required: true,
-      defaultValue: 1,
-      typeMetadata: {
-        schema: {
-          type: 'number'
-        }
-      }
-    }
-  }
-};
-export default getSelectedFields;

package/examples/desk-app/src/non-module/support-email-address/data-broker/index.js

@@ -1,13 +0,0 @@
-// import createRecord from "../../record/frameworks/createRecord";
-import getRecords from './http-template/getRecords';
-import getAvailableFields from './http-template/getAvailableFields';
-import getSelectedFields from './http-template/getSelectedFields';
-
-const record = {
-  httpTemplates: {
-    getRecords,
-    getAvailableFields,
-    getSelectedFields
-  }
-};
-export default record;

package/examples/desk-app/src/non-module/support-email-address/empty-state/EmptyStateView.js

@@ -1,15 +0,0 @@
-import React from 'react';
-import CommonEmptyState from '@zohodesk/dot/es/emptystate/CommonEmptyState/CommonEmptyState';
-import EmptyNoData from '@zohodesk/svg/es/v1/emptystate/version3/EmptyNoData';
-
-export default function EmptyStateView(_, ref) {
-  return (
-    <span ref={ref}>
-      <CommonEmptyState
-        getEmptyState={() => <EmptyNoData />}
-        title='No Support Email address!'
-        description='There are no Support Email address to show here!'
-      />
-    </span>
-  );
-}

package/examples/desk-app/src/non-module/support-email-address/empty-state/SupportEmailAddressEmptyState.js

@@ -1,13 +0,0 @@
-import { createCustomComponent } from '@zohodesk/library-platform/es/library';
-import Properties from '@zohodesk/library-platform/es/cc/empty-state/Properties';
-import EmptyStateView from './EmptyStateView';
-
-const SupportEmailAddressEmptyState = createCustomComponent({
-  name: 'SupportEmailAddressEmptyState',
-  View: EmptyStateView,
-  properties: Properties,
-  events: [],
-  eventHandlers: {}
-});
-
-export default SupportEmailAddressEmptyState;

package/examples/desk-app/src/style.module.css

@@ -1,38 +0,0 @@
-.header {
-    background-color: #2c334d;
-    color: #fff;
-    /* background-color: #ebf0f5;
-    border-bottom: 1px solid #d5dde7; */
-    letter-spacing: 0.1px;
-    height: 48px;
-    padding: 4px 32px;
-    column-gap: 32px;
-}
-
-.label {
-    font-size: 13px;
-    margin-right: 4px
-}
-
-.headerDrop {
-    padding: 6px 10px;
-    border-radius: 4px;
-    border: 1px solid transparent;
-    transition: 200ms;
-    cursor: pointer;
-}
-
-.headerDrop:hover {
-    background-color: rgba(255, 255, 255, 0.1);
-}
-
-.headerDrop.active {
-    border-color: rgba(255, 255, 255, 0.4);
-    background-color: rgba(255, 255, 255, 0.1)
-}
-
-.value {
-    font-size: 14px;
-    font-family: var(--zd_semibold);
-    margin-right: 4px;
-}

package/examples/library/package.json

@@ -1,52 +0,0 @@
-{
-  "name": "@zohodesk/library-examples",
-  "version": "1.0.0",
-  "description": "To know the widgets from module client library team",
-  "main": "es/index.js",
-  "module": "es/index.js",
-  "private": false,
-  "publishConfig": {
-    "access": "public"
-  },
-  "author": "Z Team",
-  "homepage": "https://www.npmjs.com/search?q=@zohodesk",
-  "license": "ISC",
-  "keywords": [
-    "WIDGETS",
-    "ZOHODESK",
-    "ZTEAM",
-    "LIBRARY"
-  ],
-  "scripts": {
-    "download": "react-cli clean ./node_modules ./package-lock.json && npm install",
-    "start": "react-cli start",
-    "mockserver": "react-cli mockserver",
-    "init-uat": "ZDTestingFramework init",
-    "ua-test": "ZDTestingFramework test --mode=prod --headed",
-    "ua-report": "ZDTestingFramework report --port=9009",
-    "codegen": "ZDTestingFramework codegen"
-  },
-  "files": [
-    "es",
-    "!**/__tests__"
-  ],
-  "dependencies": {
-    "@zoho/SecurityJS": "5.0.2",
-    "@zohodesk-private/desk-components": "1.2.0",
-    "@zohodesk/a11y": "2.2.3",
-    "@zohodesk/components": "1.2.39",
-    "@zohodesk/dot": "1.4.18",
-    "@zohodesk/hooks": "2.0.4",
-    "@zohodesk/i18n": "1.0.0-beta.26",
-    "@zohodesk/icons": "1.0.50",
-    "@zohodesk/layout": "3.1.0",
-    "@zohodesk/library-platform": "file:../../",
-    "@zohodesk/redux-modules": "1.2.1",
-    "@zohodesk/svg": "1.1.15",
-    "@zohodesk/utils": "1.3.13",
-    "@zohodesk/variables": "1.0.0-beta.31",
-    "@zohodesk/virtualizer": "1.0.13",
-    "color": "4.2.3",
-    "react-sortable-hoc": "1.11.0"
-  }
-}

package/examples/library/react-cli.config.js

@@ -1,13 +0,0 @@
-exports.config = {
-  app: {
-    disableES5Transpile: true,
-    context: 'public',
-    server: {
-      mode: "dev-no-warn",
-      disableContextURL: true,
-      httpsCerts: '@zohodesk-private/client_dev_cert'
-    },
-    outputFolder: 'build',
-    enableChunkHash: true
-  }
-};

package/examples/library/src/common/AppContainer.js

@@ -1,62 +0,0 @@
-import React, { useState } from "react";
-import { Flex } from "@zohodesk/layout";
-import { Icon } from "@zohodesk/icons";
-import Typography from '@zohodesk/components/es/v1/Typography/Typography';
-import { pages } from './Pages';
-
-import style from './AppContainer.module.css';
-
-const pagesList = Object.keys(pages);
-
-export default function AppContainer() {
-
-  const [ activePage, setActivePage ] = useState(pagesList[1]);
-  
-  return (
-    <Flex
-      $ui_displayMode='flex'
-      $flag_fullsize
-      $ui_className={style.container}
-    >
-      <Flex
-        $ui_className={style.leftPanel}
-        $flag_shrink={false}
-      >
-        <Typography
-          $ui_size={30}
-          $ui_weight='bold'
-          $ui_className={style.heading}
-        ><Icon name='ZD-TK-book' iconClass={style.headIcon}/> Examples</Typography>
-        { pagesList.map((text, i) => {
-          if(text.startsWith('_heading')) {
-            return (
-              <Typography
-                key={i}
-                $ui_tagName='span'
-                $ui_size={16}
-                $ui_transform='upper'
-                $ui_weight='bold'
-                $ui_className={style.subHeading}
-              >{pages[text]}</Typography>
-            )
-          }
-          return (
-            <Typography
-              key={i}
-              $ui_size={16}
-              $ui_className={`${style.list} ${text === activePage ? style.active : ''}`}
-              $tagAttributes_text={{
-                onClick: () => setActivePage(text)
-              }}
-            >
-              {text}
-            </Typography>
-          )
-        })}
-      </Flex>
-      <Flex $flag_flexible>
-        {pages[activePage]}
-      </Flex>
-    </Flex>
-  );
-}

package/examples/library/src/common/AppContainer.module.css

@@ -1,50 +0,0 @@
-
-.container {
-    /*  */
-}
-
-.leftPanel {
-    background-color: #f6f8fb;
-    width: 240px;
-    overflow-y: auto;
-    padding: 20px 0;
-    border-right: 1px solid #d5dde7
-}
-
-.heading {
-    color: #0a73eb;
-    padding: 0 24px;
-    margin-bottom: 14px;
-}
-
-.headIcon {
-    vertical-align: -4px;
-    font-weight: bold
-}
-
-.subHeading {
-    border-bottom: 2px solid #5a616f;
-    display: inline-block;
-    padding-top: 14px;
-    margin-left: 24px;
-    margin-bottom: 14px
-}
-
-.list {
-    padding: 10px 10px 10px 14px;
-    margin: 0px 10px 10px;
-    border: 1px solid transparent;
-    border-radius: 6px;
-    cursor: pointer;
-}
-
-.list:hover {
-    background-color: #fff;
-    border-color: #d5dde7
-}
-
-.list.active {
-    background-color: #e8f0fa;
-    color: #0a73eb;
-    border-color: #0a73eb
-}

package/examples/library/src/common/Pages.js

@@ -1,28 +0,0 @@
-import React from "react";
-
-import SimpleList from "../table-list/SimpleList";
-import AllFieldsList from "../table-list/AllFieldsList";
-import EmptyList from "../table-list/EmptyList";
-import InitialLoadingList from "../table-list/InitialLoadingList";
-import ItemsInitialLoadingList from "../table-list/ItemsInitialLoadingList";
-import MoreLoadingList from "../table-list/MoreLoadingList";
-import ResizerList from "../table-list/ResizerList";
-import SortableList from "../table-list/SortableList";
-import MassSelectionList from "../table-list/MassSelectionList";
-import FlexibleList from "../table-list/FlexibleList";
-import ListWithoutActions from "../table-list/ListWithoutActions";
-
-export const pages = {
-    '_heading_1': 'Library',
-    'Simple List': <SimpleList />,
-    'All Fields List': <AllFieldsList />,
-    'Empty List': <EmptyList />,
-    'Initial Loading': <InitialLoadingList />,
-    'Loading With Header': <ItemsInitialLoadingList />,
-    'More Loading': <MoreLoadingList />,
-    'Flexible Columns': <FlexibleList />,
-    'Column Resizer': <ResizerList />,
-    'Sortable List': <SortableList />,
-    'List Selection': <MassSelectionList />,
-    'List Without Actions': <ListWithoutActions />
-}