@zohodesk/library-platform 1.0.0-exp.1

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

@@ -0,0 +1,19 @@
+
+export const EditAction = {
+  uiType: 'ActionIcon',
+  properties: {
+    label: 'Edit',
+    icon: 'ZD-GN-edit'
+  },
+  eventMapping: [
+    {
+      id: '12123123',
+      action: {
+        id: '123454',
+        dispatchType: 'NAVIGATION'
+      },
+      payloadMapping: '{ "url": "/agent/{{orgName}}/{{departmentName}}/{{moduleSanitatedName}}/edit/{{recordId}}" }',
+      eventType: 'ACTION_ICON#CLICKED'
+    }
+  ]
+};

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

@@ -0,0 +1,18 @@
+export const GoSignalAction = {
+  uiType: 'ActionIcon',
+  properties: {
+    label: 'GoSignal',
+    icon: 'ZD-TK-flag'
+  },
+  eventMapping: [
+    {
+      id: '12ss',
+      action: {
+        id: '122sa32',
+        dispatchType: 'AGENT_PROFILE#SIGNAL_GO'
+      },
+      payloadMapping: '{ "recordId": "{{recordId}}" }',
+      eventType: 'ACTION_ICON#CLICKED'
+    }
+  ]
+};

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

@@ -0,0 +1,7 @@
+import { EditAction } from './EditAction';
+import { DeleteAction } from './DeleteAction';
+import { GoSignalAction } from './GoSignalAction';
+import { WaitSignalAction } from './WaitSignalAction';
+import { StopSignalAction } from './StopSignalAction';
+
+export const rowActions = [GoSignalAction, WaitSignalAction, StopSignalAction, EditAction, DeleteAction];

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

@@ -0,0 +1,19 @@
+export const StopSignalAction = {
+  uiType: 'ActionIcon',
+  properties: {
+    label: 'StopSignal',
+    // icon: 'ZD-CB-pause'
+    icon: 'ZD-game04'
+  },
+  eventMapping: [
+    {
+      id: '12ss',
+      action: {
+        id: '122sa32',
+        dispatchType: 'AGENT_PROFILE#SIGNAL_STOP'
+      },
+      payloadMapping: '{ "recordId": "{{recordId}}" }',
+      eventType: 'ACTION_ICON#CLICKED'
+    }
+  ]
+};

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

@@ -0,0 +1,18 @@
+export const WaitSignalAction = {
+  uiType: 'ActionIcon',
+  properties: {
+    label: 'WaitSignal',
+    icon: 'ZD-TK-sandClock'
+  },
+  eventMapping: [
+    {
+      id: '12ss',
+      action: {
+        id: '3',
+        dispatchType: 'ZLIST#RECORD_UPDATE'
+      },
+      payloadMapping: '{ "recordId": "{{recordId}}", "record": { "cf": { "cf_signal": "Wait" } } }',
+      eventType: 'ACTION_ICON#CLICKED'
+    }
+  ]
+};

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

@@ -0,0 +1,12 @@
+export const apiHeaders = {
+  orgid: `${currentOrg.id}`,
+  'x-zcsrf-token': `crmcsrfparam=${getCookieValue('crmcsr')}`
+};
+
+function getCookieValue(name) {
+  const regex = new RegExp(`(^| )${name}=([^;]+)`);
+  const match = document.cookie.match(regex);
+  if (match) {
+    return match[2];
+  }
+}

package/examples/desk-app/src/common/UIProvider.js

@@ -0,0 +1,153 @@
+import React from 'react';
+import AppContainer from '@zohodesk/components/es/AppContainer/AppContainer';
+import { Container } from '@zohodesk/components/es/Layout';
+import './docstyle.module.css';
+
+/* component pkg - default mode & themes */
+import '@zohodesk/components/assets/Appearance/light/themes/blue/blue_CTA_LightTheme.module.css';
+import '@zohodesk/components/assets/Appearance/light/themes/blue/blue_CTA_LightModifyCategory.module.css';
+import '@zohodesk/components/assets/Appearance/light/themes/green/green_CTA_LightTheme.module.css';
+import '@zohodesk/components/assets/Appearance/light/themes/green/green_CTA_LightModifyCategory.module.css';
+import '@zohodesk/components/assets/Appearance/light/themes/orange/orange_CTA_LightTheme.module.css';
+import '@zohodesk/components/assets/Appearance/light/themes/orange/orange_CTA_LightModifyCategory.module.css';
+import '@zohodesk/components/assets/Appearance/light/themes/red/red_CTA_LightTheme.module.css';
+import '@zohodesk/components/assets/Appearance/light/themes/red/red_CTA_LightModifyCategory.module.css';
+import '@zohodesk/components/assets/Appearance/light/themes/yellow/yellow_CTA_LightTheme.module.css';
+import '@zohodesk/components/assets/Appearance/light/themes/yellow/yellow_CTA_LightModifyCategory.module.css';
+import '@zohodesk/components/assets/Appearance/light/themes/blue/blue_ComponentTheme_LightTheme.module.css';
+import '@zohodesk/components/assets/Appearance/light/themes/green/green_ComponentTheme_LightTheme.module.css';
+import '@zohodesk/components/assets/Appearance/light/themes/orange/orange_ComponentTheme_LightTheme.module.css';
+import '@zohodesk/components/assets/Appearance/light/themes/red/red_ComponentTheme_LightTheme.module.css';
+import '@zohodesk/components/assets/Appearance/light/themes/yellow/yellow_ComponentTheme_LightTheme.module.css';
+import '@zohodesk/components/assets/Appearance/light/mode/Component_LightMode.module.css';
+import '@zohodesk/components/assets/Contrast/lightContrastLightness.module.css';
+/* component pkg - dark mode & themes */
+import '@zohodesk/components/assets/Appearance/dark/themes/blue/blue_CTA_DarkTheme.module.css';
+import '@zohodesk/components/assets/Appearance/dark/themes/blue/blue_CTA_DarkModifyCategory.module.css';
+import '@zohodesk/components/assets/Appearance/dark/themes/green/green_CTA_DarkTheme.module.css';
+import '@zohodesk/components/assets/Appearance/dark/themes/green/green_CTA_DarkModifyCategory.module.css';
+import '@zohodesk/components/assets/Appearance/dark/themes/orange/orange_CTA_DarkTheme.module.css';
+import '@zohodesk/components/assets/Appearance/dark/themes/orange/orange_CTA_DarkModifyCategory.module.css';
+import '@zohodesk/components/assets/Appearance/dark/themes/red/red_CTA_DarkTheme.module.css';
+import '@zohodesk/components/assets/Appearance/dark/themes/red/red_CTA_DarkModifyCategory.module.css';
+import '@zohodesk/components/assets/Appearance/dark/themes/yellow/yellow_CTA_DarkTheme.module.css';
+import '@zohodesk/components/assets/Appearance/dark/themes/yellow/yellow_CTA_DarkModifyCategory.module.css';
+import '@zohodesk/components/assets/Appearance/dark/themes/blue/blue_ComponentTheme_DarkTheme.module.css';
+import '@zohodesk/components/assets/Appearance/dark/themes/green/green_ComponentTheme_DarkTheme.module.css';
+import '@zohodesk/components/assets/Appearance/dark/themes/orange/orange_ComponentTheme_DarkTheme.module.css';
+import '@zohodesk/components/assets/Appearance/dark/themes/red/red_ComponentTheme_DarkTheme.module.css';
+import '@zohodesk/components/assets/Appearance/dark/themes/yellow/yellow_ComponentTheme_DarkTheme.module.css';
+import '@zohodesk/components/assets/Appearance/dark/mode/Component_DarkMode.module.css';
+import '@zohodesk/components/assets/Contrast/darkContrastLightness.module.css';
+/* component pkg - pure dark mode & themes */
+import '@zohodesk/components/assets/Appearance/pureDark/themes/blue/blue_CTA_PureDarkTheme.module.css';
+import '@zohodesk/components/assets/Appearance/pureDark/themes/blue/blue_CTA_PureDarkModifyCategory.module.css';
+import '@zohodesk/components/assets/Appearance/pureDark/themes/green/green_CTA_PureDarkTheme.module.css';
+import '@zohodesk/components/assets/Appearance/pureDark/themes/green/green_CTA_PureDarkModifyCategory.module.css';
+import '@zohodesk/components/assets/Appearance/pureDark/themes/orange/orange_CTA_PureDarkTheme.module.css';
+import '@zohodesk/components/assets/Appearance/pureDark/themes/orange/orange_CTA_PureDarkModifyCategory.module.css';
+import '@zohodesk/components/assets/Appearance/pureDark/themes/red/red_CTA_PureDarkTheme.module.css';
+import '@zohodesk/components/assets/Appearance/pureDark/themes/red/red_CTA_PureDarkModifyCategory.module.css';
+import '@zohodesk/components/assets/Appearance/pureDark/themes/yellow/yellow_CTA_PureDarkTheme.module.css';
+import '@zohodesk/components/assets/Appearance/pureDark/themes/yellow/yellow_CTA_PureDarkModifyCategory.module.css';
+import '@zohodesk/components/assets/Appearance/pureDark/themes/blue/blue_ComponentTheme_PureDarkTheme.module.css';
+import '@zohodesk/components/assets/Appearance/pureDark/themes/green/green_ComponentTheme_PureDarkTheme.module.css';
+import '@zohodesk/components/assets/Appearance/pureDark/themes/orange/orange_ComponentTheme_PureDarkTheme.module.css';
+import '@zohodesk/components/assets/Appearance/pureDark/themes/red/red_ComponentTheme_PureDarkTheme.module.css';
+import '@zohodesk/components/assets/Appearance/pureDark/themes/yellow/yellow_ComponentTheme_PureDarkTheme.module.css';
+import '@zohodesk/components/assets/Appearance/pureDark/mode/Component_PureDarkMode.module.css';
+import '@zohodesk/components/assets/Contrast/pureDarkContrastLightness.module.css';
+/* svg pkg - default mode & themes */
+import '@zohodesk/svg/assets/Appearance/light/themes/blue/blue_SVGTheme_LightTheme.module.css';
+import '@zohodesk/svg/assets/Appearance/light/themes/green/green_SVGTheme_LightTheme.module.css';
+import '@zohodesk/svg/assets/Appearance/light/themes/orange/orange_SVGTheme_LightTheme.module.css';
+import '@zohodesk/svg/assets/Appearance/light/themes/red/red_SVGTheme_LightTheme.module.css';
+import '@zohodesk/svg/assets/Appearance/light/themes/yellow/yellow_SVGTheme_LightTheme.module.css';
+import '@zohodesk/svg/assets/Appearance/light/mode/SVG_LightMode.module.css';
+/* svg pkg - dark mode & themes */
+import '@zohodesk/svg/assets/Appearance/dark/themes/blue/blue_SVGTheme_DarkTheme.module.css';
+import '@zohodesk/svg/assets/Appearance/dark/themes/green/green_SVGTheme_DarkTheme.module.css';
+import '@zohodesk/svg/assets/Appearance/dark/themes/orange/orange_SVGTheme_DarkTheme.module.css';
+import '@zohodesk/svg/assets/Appearance/dark/themes/red/red_SVGTheme_DarkTheme.module.css';
+import '@zohodesk/svg/assets/Appearance/dark/themes/yellow/yellow_SVGTheme_DarkTheme.module.css';
+import '@zohodesk/svg/assets/Appearance/dark/mode/SVG_DarkMode.module.css';
+/* svg pkg - pure dark mode & themes */
+import '@zohodesk/svg/assets/Appearance/pureDark/themes/blue/blue_SVGTheme_PureDarkTheme.module.css';
+import '@zohodesk/svg/assets/Appearance/pureDark/themes/green/green_SVGTheme_PureDarkTheme.module.css';
+import '@zohodesk/svg/assets/Appearance/pureDark/themes/orange/orange_SVGTheme_PureDarkTheme.module.css';
+import '@zohodesk/svg/assets/Appearance/pureDark/themes/red/red_SVGTheme_PureDarkTheme.module.css';
+import '@zohodesk/svg/assets/Appearance/pureDark/themes/yellow/yellow_SVGTheme_PureDarkTheme.module.css';
+import '@zohodesk/svg/assets/Appearance/pureDark/mode/SVG_PureDarkMode.module.css';
+/* dot pkg - default mode & themes */
+import '@zohodesk/dot/assets/Appearance/light/themes/blue/blue_DotTheme_LightTheme.module.css';
+import '@zohodesk/dot/assets/Appearance/light/themes/green/green_DotTheme_LightTheme.module.css';
+import '@zohodesk/dot/assets/Appearance/light/themes/orange/orange_DotTheme_LightTheme.module.css';
+import '@zohodesk/dot/assets/Appearance/light/themes/red/red_DotTheme_LightTheme.module.css';
+import '@zohodesk/dot/assets/Appearance/light/themes/yellow/yellow_DotTheme_LightTheme.module.css';
+import '@zohodesk/dot/assets/Appearance/light/mode/Dot_LightMode.module.css';
+/* dot pkg - dark mode & themes */
+import '@zohodesk/dot/assets/Appearance/dark/themes/blue/blue_DotTheme_DarkTheme.module.css';
+import '@zohodesk/dot/assets/Appearance/dark/themes/green/green_DotTheme_DarkTheme.module.css';
+import '@zohodesk/dot/assets/Appearance/dark/themes/orange/orange_DotTheme_DarkTheme.module.css';
+import '@zohodesk/dot/assets/Appearance/dark/themes/red/red_DotTheme_DarkTheme.module.css';
+import '@zohodesk/dot/assets/Appearance/dark/themes/yellow/yellow_DotTheme_DarkTheme.module.css';
+import '@zohodesk/dot/assets/Appearance/dark/mode/Dot_DarkMode.module.css';
+/* dot pkg - pure dark mode & themes */
+import '@zohodesk/dot/assets/Appearance/pureDark/themes/blue/blue_DotTheme_PureDarkTheme.module.css';
+import '@zohodesk/dot/assets/Appearance/pureDark/themes/green/green_DotTheme_PureDarkTheme.module.css';
+import '@zohodesk/dot/assets/Appearance/pureDark/themes/orange/orange_DotTheme_PureDarkTheme.module.css';
+import '@zohodesk/dot/assets/Appearance/pureDark/themes/red/red_DotTheme_PureDarkTheme.module.css';
+import '@zohodesk/dot/assets/Appearance/pureDark/themes/yellow/yellow_DotTheme_PureDarkTheme.module.css';
+import '@zohodesk/dot/assets/Appearance/pureDark/mode/Dot_PureDarkMode.module.css';
+
+// ------------  -------------
+/* desk Components default mode & theme css */
+import '@zohodesk-private/desk-components/assets/Appearance/light/themes/blue/blue_deskComponentsTheme_LightTheme.module.css';
+import '@zohodesk-private/desk-components/assets/Appearance/light/themes/green/green_deskComponentsTheme_LightTheme.module.css';
+import '@zohodesk-private/desk-components/assets/Appearance/light/themes/orange/orange_deskComponentsTheme_LightTheme.module.css';
+import '@zohodesk-private/desk-components/assets/Appearance/light/themes/red/red_deskComponentsTheme_LightTheme.module.css';
+import '@zohodesk-private/desk-components/assets/Appearance/light/themes/yellow/yellow_deskComponentsTheme_LightTheme.module.css';
+import '@zohodesk-private/desk-components/assets/Appearance/light/mode/deskComponents_LightMode.module.css';
+
+/* desk Components dark mode & theme css */
+import '@zohodesk-private/desk-components/assets/Appearance/dark/themes/blue/blue_deskComponentsTheme_DarkTheme.module.css';
+import '@zohodesk-private/desk-components/assets/Appearance/dark/themes/green/green_deskComponentsTheme_DarkTheme.module.css';
+import '@zohodesk-private/desk-components/assets/Appearance/dark/themes/orange/orange_deskComponentsTheme_DarkTheme.module.css';
+import '@zohodesk-private/desk-components/assets/Appearance/dark/themes/red/red_deskComponentsTheme_DarkTheme.module.css';
+import '@zohodesk-private/desk-components/assets/Appearance/dark/themes/yellow/yellow_deskComponentsTheme_DarkTheme.module.css';
+import '@zohodesk-private/desk-components/assets/Appearance/dark/mode/deskComponents_DarkMode.module.css';
+
+// /* desk Components pure dark mode & theme css */
+import '@zohodesk-private/desk-components/assets/Appearance/pureDark/themes/blue/blue_deskComponentsTheme_PureDarkTheme.module.css';
+import '@zohodesk-private/desk-components/assets/Appearance/pureDark/themes/green/green_deskComponentsTheme_PureDarkTheme.module.css';
+import '@zohodesk-private/desk-components/assets/Appearance/pureDark/themes/orange/orange_deskComponentsTheme_PureDarkTheme.module.css';
+import '@zohodesk-private/desk-components/assets/Appearance/pureDark/themes/red/red_deskComponentsTheme_PureDarkTheme.module.css';
+import '@zohodesk-private/desk-components/assets/Appearance/pureDark/themes/yellow/yellow_deskComponentsTheme_PureDarkTheme.module.css';
+import '@zohodesk-private/desk-components/assets/Appearance/pureDark/mode/deskComponents_PureDarkMode.module.css';
+
+import LibraryContext from '@zohodesk/components/es/Provider/LibraryContextInit';
+import { setGlobalIdPrefix } from '@zohodesk/components/es/Provider/IdProvider';
+// import * as componentsData from '@zohodesk-private/desk-components';
+// componentsData.packagePrefix = '@zohodesk-private/desk-components';
+import PropTypes from 'prop-types';
+
+export default class UIProvider extends React.Component {
+  render() {
+    return (
+      <LibraryContext.Provider value={{ isReducedMotion: false, direction: 'ltr' }}>
+        <AppContainer
+          customProps={{
+            ExtraProps: { 'data-mode': 'light', 'data-theme': 'blue' }
+          }}
+          className='controlpanel'
+        >
+          <Container scroll='vertical'>{this.props.children}</Container>
+        </AppContainer>
+      </LibraryContext.Provider>
+    );
+  }
+}
+
+UIProvider.propTypes = {
+  children: PropTypes.node
+};

package/examples/desk-app/src/common/docstyle.module.css

@@ -0,0 +1,40 @@
+/* component box-shadow for docs - temp fix */
+:global .controlpanel {
+  /* avatar */
+  --zd_bs_avatar_black: var(--zd_bs_contrast_outline, inset 0px 0px 5px var(--avatar_boxshadow));
+  --zd_bs_avatar_white: var(--zd_bs_contrast_outline, inset 0px 0px 11px var(--avatar_boxshadow));
+
+  /* button */
+  --zd_bs_button_primary: var(--zd_bs_contrast_outline, 0 3px 10px var(--zdt_button_primary_box_shadow));
+  --zd_bs_button_danger: var(--zd_bs_contrast_outline, 0 3px 10px var(--zdt_button_danger_box_shadow));
+
+  /* button group */
+  --zd_bs_buttongroup_footer: var(--zd_bs_contrast_outline, 0 -4px 5px -3px var(--zdt_buttongroup_footer_box_shadow));
+
+  /* dropbox */
+  --zd_bs_dropbox_default: var(--zd_bs_contrast_outline, 4px 3px 30px var(--zdt_dropbox_default_box_shadow));
+  --zd_bs_dropbox_top: var(--zd_bs_contrast_outline, 0 -3px 30px var(--zdt_dropbox_default_box_shadow));
+  --zd_bs_dropbox_left: var(--zd_bs_contrast_outline, -4px 0 30px var(--zdt_dropbox_default_box_shadow));
+  --zd_bs_dropbox_right: var(--zd_bs_contrast_outline, 4px 0 30px var(--zdt_dropbox_default_box_shadow));
+  --zd_bs_dropbox_bottom: var(--zd_bs_contrast_outline, 0 3px 30px var(--zdt_dropbox_default_box_shadow));
+  --zd_bs_dropbox_arrow: var(--zd_bs_contrast_outline, 1px -1px 2px 0 var(--dropbox_arrow_box_shadow_color));
+
+  /* ribbon */
+  --zd_bs_ribbon_default: var(--zd_bs_contrast_outline, 0 5px 10px var(--zdt_ribbon_default_shadow));
+  --zd_bs_ribbon_danger: var(--zd_bs_contrast_outline, 0 5px 10px var(--zdt_ribbon_danger_shadow));
+  --zd_bs_ribbon_primary: var(--zd_bs_contrast_outline, 0 5px 10px var(--zdt_ribbon_primary_shadow));
+  --zd_bs_ribbon_secondary: var(--zd_bs_contrast_outline, 0 5px 10px var(--zdt_ribbon_secondary_shadow));
+  --zd_bs_ribbon_info: var(--zd_bs_contrast_outline, 0 5px 10px var(--zdt_ribbon_info_shadow));
+  --zd_bs_ribbon_dark: var(--zd_bs_contrast_outline, 0 5px 10px var(--zdt_ribbon_dark_shadow));
+
+  /* switch */
+  --zd_bs_switch_default: var(--zd_bs_contrast_outline, 0 1px 4px 0 var(--zdt_switch_circle_shadow));
+
+  /* tabs */
+  --zd_bs_tabs_shadow: var(--zd_bs_contrast_outline, 0 -2px 9px var(--zdt_tabs_alpha_box_shadow));
+}
+
+:global .controlpanel {
+  --lib_a11y_focusScope_focus_border: var(--zdt_a11y_focusScope_focus_border);
+  --lib_a11y_focusScope_focus_bg: var(--zdt_listitem_highlight_bg);
+}

package/examples/desk-app/src/hooks/useDepartments.js

@@ -0,0 +1,18 @@
+import { useState, useEffect } from 'react';
+
+export function useDepartments({ orgName, orgId }) {
+  const [departments, setDepartments] = useState([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [departmentId, setDepartmentId] = useState('');
+
+  useEffect(() => {
+    fetch(`/supportapi/zd/${orgName}/api/v1/departments?isEnabled=true`, { headers: { orgid: orgId } })
+      .then(res => res.json())
+      .then(response => {
+        setDepartments([ ...response.data, { id: 'allDepartment', name: 'All Departments' }]);
+        setDepartmentId(response.data[0].id)
+        setIsLoading(false);
+      });
+  }, []);
+  return { departments, isLoading, departmentId, setDepartmentId };
+}

package/examples/desk-app/src/hooks/useModules.js

@@ -0,0 +1,38 @@
+import { useState, useEffect } from 'react';
+
+const globalModules = modules.modules;
+
+export function useModules({ orgName, orgId }) {
+  const [isLoading, setIsLoading] = useState(true);
+  const [modules, setModules] = useState([]);
+  const [moduleId, setModuleId] = useState('');
+
+  useEffect(() => {
+    fetch(`/zd/${orgName}/api/v1/organizationModules`, {
+      headers: { orgid: orgId },
+      body: null,
+      method: 'GET'
+    })
+      .then(r => r.json())
+      .then(({ data }) => {
+        const modules = globalModules
+          .filter(m => m.isEnabled)
+          .sort((a, b) => {
+            const primaryPreference = ['cm_agents_profiles', 'tasks', 'calls', 'activities', 'events'].reverse();
+
+            const valOf = m => (m.isDeptSpecific ? 1 : 0) + (m.isCustomModule ? 4 : 0) + primaryPreference.indexOf(m.apiKey) * 10;
+
+            const aVal = valOf(a);
+            const bVal = valOf(b);
+            return bVal - aVal;
+          }); //.map(d => d.apiName);
+
+        const moduleId = modules[0].apiKey;
+
+        setModules(modules);
+        setModuleId(moduleId);
+        setIsLoading(false);
+      });
+  }, []);
+  return { modules, isLoading, moduleId, setModuleId };
+}

package/examples/desk-app/src/hooks/useViews.js

@@ -0,0 +1,64 @@
+import { useState, useEffect } from 'react';
+
+export function useViews({ orgName, orgId, moduleName, departmentId }) {
+  const [views, setViews] = useState([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [viewId, setViewId] = useState('');
+
+  useEffect(() => {
+    if (!moduleName || !departmentId) {
+      return;
+    }
+
+    const q = departmentId == 'allDepartment' ? '' : `&departmentId=${departmentId}`;
+    fetch(`/supportapi/zd/${orgName}/api/v1/views?module=${moduleName}${q}`, { headers: { orgid: orgId } })
+      .then(res => res.json())
+      .then(res => {
+        setViews(res.data);
+        setViewId(res.data[0].id);
+        setIsLoading(false);
+      });
+    return () => {
+      setViews([]);
+      setIsLoading(true);
+    };
+  }, [moduleName, departmentId]);
+  return { views, isLoading, viewId, setViewId };
+}
+/*
+
+
+import { useState, useEffect } from 'react';
+
+export function useViews({ orgName, orgId, moduleName, departmentId }) {
+  // const [views, setViews] = useState([]);
+  // const [isLoading, setIsLoading] = useState(true);
+  // const [viewId, setViewId] = useState('');
+
+  const [{ isLoading = true, views = [], viewId = '' }, setState] = useState({});
+
+  function setViewId(viewId) {
+    setState(ps => ({ ...ps, viewId }));
+  }
+
+  useEffect(() => {
+    if (!moduleName || !departmentId) {
+      return;
+    }
+
+    fetch(`/supportapi/zd/${orgName}/api/v1/views?module=${moduleName}&departmentId=${departmentId}`, { headers: { orgid: orgId } })
+      .then(res => res.json())
+      .then(res => {
+        setViews(res.data);
+        setViewId(res.data[0].id);
+        setIsLoading(false);
+      });
+    return () => {
+      setViews([]);
+      setIsLoading(true);
+    };
+  }, [moduleName]);
+  return { views, isLoading, viewId, setViewId };
+}
+
+*/

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

@@ -0,0 +1,11 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Desk Frameworks Examples</title>
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>

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

@@ -0,0 +1,24 @@
+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

@@ -0,0 +1,52 @@
+/* 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

@@ -0,0 +1,25 @@
+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

@@ -0,0 +1,58 @@
+/* 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

@@ -0,0 +1 @@
+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

@@ -0,0 +1,22 @@
+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;