@zohodesk/library-platform 1.0.0-exp.1

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,155 @@
+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/library/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/library/src/index.html

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="utf-8" />
+    <title>Library Examples</title>
+  </head>
+  <style>
+    body, html, #root {
+      height: 100%;
+      width: 100%;
+      margin: 0
+    }
+  </style>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>

package/examples/library/src/index.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import AppContainer from './common/AppContainer';
+import UIProvider from './common/UIProvider';
+
+ReactDOM.render(
+    <UIProvider>
+        <AppContainer />
+    </UIProvider>,
+  document.getElementById('root')
+);

package/examples/library/src/table-list/AllFieldsList.js

@@ -0,0 +1,20 @@
+import React, { Component } from 'react';
+import { TableList } from '@zohodesk/library-platform/es/library';
+import { data } from './data/all_fields';
+
+export default class AllFieldsList extends Component {
+  constructor(props) {
+    super(props);
+  }
+  
+  render() {
+    return (
+      <div style={{ height: '100%' }}>
+        <TableList
+          isLoading={false}
+          data={data}
+        />
+      </div>
+    );
+  }
+}