@zohodesk/library-platform 1.0.0-exp.1

package/src/cc/table-list/Properties.ts

@@ -0,0 +1,430 @@
+import Properties from '../component/properties';
+import SelectionConfigSchema from '@bc/list-selection/Properties';
+import ResizerConfigSchema from '@bc/table-column-resizer/Properties';
+import SortOrder from '@bc/sort-by/SortOrderEnum';
+
+const TableListProperties: Properties = {
+  isLoading: {
+    required: true,
+    typeMetadata: {
+      schema: {
+        type: 'boolean'
+      }
+    },
+    defaultValue: false
+  },
+  emptyStateUiType: {
+    required: false,
+    typeMetadata: {
+      schema: {
+        type: 'string'
+      }
+    },
+    defaultValue: ''
+  },
+  hasRowActions: {
+    required: false,
+    defaultValue: false,
+    typeMetadata: {
+      schema: {
+        type: 'boolean'
+      }
+    }
+  },
+  isFlexibleColumns: {
+    required: false,
+    defaultValue: false,
+    typeMetadata: {
+      schema: {
+        type: 'boolean'
+      }
+    }
+  },
+  resizerConfig: {
+    required: false,
+    defaultValue: {
+      isEnabled: false,
+      minWidth: 120,
+      maxWidth: 1000
+    },
+    typeMetadata: {
+      schema: ResizerConfigSchema
+    }
+  },
+  selectionConfig: {
+    required: false,
+    defaultValue: {
+      isEnabled: false,
+      maxSelectionCount: 50,
+      limitExceedAlertMessage: 'Max records selected'
+    },
+    typeMetadata: {
+      schema: SelectionConfigSchema
+    }
+  },
+  data: {
+    required: true,
+    defaultValue: { headers: [], rows: [] },
+    typeMetadata: {
+      schema: {
+        $schema: 'http://json-schema.org/draft-07/schema#',
+        definitions: {
+          Schema: {
+            type: 'object',
+            properties: {
+              type: {}
+            }
+          },
+          PayloadProperties: {
+            type: 'object',
+            properties: {
+              name: {
+                type: 'string'
+              },
+              label: {
+                type: 'string'
+              },
+              typeMetadata: {
+                type: 'object',
+                properties: {
+                  schema: {
+                    $ref: '#/definitions/Schema'
+                  }
+                }
+              }
+            },
+            required: ['name', 'typeMetadata']
+          },
+          Payload: {
+            type: 'object',
+            additionalProperties: {
+              $ref: '#/definitions/PayloadProperties'
+            }
+          },
+          DeclarativeAction: {
+            type: 'object',
+            properties: {
+              name: {
+                type: 'string'
+              },
+              label: {
+                type: 'string'
+              },
+              buttonType: {
+                defaultValue: 'primary',
+                type: 'string',
+                enum: ['primary', 'danger']
+              },
+              icon: {
+                type: 'string'
+              },
+              actionName: {
+                type: 'string'
+              },
+              actionPayload: {
+                $ref: '#/definitions/Payload'
+              },
+              metaData: {},
+              description: {
+                type: 'string'
+              }
+            },
+            required: ['name', 'label', 'buttonType', 'icon']
+          },
+          HeaderMeta: {
+            type: 'object',
+            properties: {
+              id: {
+                type: 'string'
+              },
+              text: {
+                type: 'string'
+              },
+              sortable: {
+                defaultValue: false,
+                type: 'boolean'
+              },
+              size: {
+                defaultValue: 'medium',
+                type: 'string',
+                enum: ['xsmall', 'small', 'medium', 'large', 'xlarge']
+              },
+              alignment: {
+                defaultValue: 'left',
+                type: 'string',
+                enum: ['left', 'center', 'right']
+              }
+            },
+            required: ['id', 'text', 'sortable', 'size', 'alignment']
+          },
+          Text: {
+            type: 'object',
+            properties: {
+              type: {
+                type: 'string',
+                const: 'Text'
+              },
+              text: {
+                type: 'string'
+              },
+              weight: {
+                type: 'string',
+                enum: ['light', 'regular', 'semibold', 'bold']
+              },
+              tooltip: {
+                type: 'string'
+              }
+            },
+            required: ['type', 'text']
+          },
+          Link: {
+            type: 'object',
+            properties: {
+              type: {
+                type: 'string',
+                const: 'Link'
+              },
+              href: {
+                type: 'string'
+              },
+              opensNewTab: {
+                type: 'boolean',
+                defaultValue: false
+              },
+              label: {
+                type: 'string'
+              },
+              variant: {
+                type: 'string',
+                enum: ['primary', 'secondary']
+              }
+            },
+            required: ['type', 'href', 'variant', 'opensNewTab', 'label']
+          },
+          CheckBox: {
+            type: 'object',
+            properties: {
+              type: {
+                type: 'string',
+                const: 'CheckBox'
+              },
+              checked: {
+                defaultValue: false,
+                type: 'boolean'
+              },
+              disabled: {
+                defaultValue: false,
+                type: 'boolean'
+              },
+              readonly: {
+                defaultValue: false,
+                type: 'boolean'
+              },
+              label: {
+                type: 'string'
+              },
+              tooltip: {
+                type: 'string'
+              }
+            },
+            required: ['type', 'checked', 'label']
+          },
+          Switch: {
+            type: 'object',
+            properties: {
+              type: {
+                type: 'string',
+                const: 'Switch'
+              },
+              checked: {
+                defaultValue: false,
+                type: 'boolean'
+              },
+              size: {
+                type: 'string',
+                enum: ['small', 'medium']
+              },
+              disabled: {
+                defaultValue: false,
+                type: 'boolean'
+              },
+              tooltip: {
+                type: 'string'
+              }
+            },
+            required: ['type', 'checked', 'size']
+          },
+          Email: {
+            type: 'object',
+            properties: {
+              type: {
+                type: 'string',
+                const: 'Email'
+              },
+              email: {
+                type: 'string'
+              }
+            },
+            required: ['type', 'email']
+          },
+          Avatar: {
+            type: 'object',
+            properties: {
+              type: {
+                type: 'string',
+                const: 'Avatar'
+              },
+              imageSrc: {
+                type: 'string'
+              },
+              name: {
+                type: 'string'
+              },
+              label: {
+                type: 'string'
+              },
+              size: {
+                type: 'string',
+                enum: ['xsmall', 'small', 'medium', 'large', 'xlarge']
+              },
+              tooltip: {
+                type: 'string'
+              }
+            },
+            required: ['type', 'name', 'size']
+          },
+          HighlightedValue: {
+            type: 'object',
+            properties: {
+              type: {
+                type: 'string',
+                const: 'StatusBox'
+              },
+              text: {
+                type: 'string'
+              },
+              color: {
+                defaultValue: 'grey',
+                type: 'string',
+                enum: ['grey', 'red', 'orange', 'green', 'blue']
+              },
+              tooltip: {
+                type: 'string'
+              }
+            },
+            required: ['type', 'text', 'color']
+          },
+          Tags: {
+            type: 'object',
+            properties: {
+              type: {
+                type: 'string',
+                const: 'Tags'
+              },
+              title: {
+                type: 'string'
+              },
+              tags: {
+                type: 'array'
+              }
+            },
+            required: ['type', 'tags']
+          },
+          Cell: {
+            anyOf: [
+              {
+                $ref: '#/definitions/Text'
+              },
+              {
+                $ref: '#/definitions/Link'
+              },
+              {
+                $ref: '#/definitions/CheckBox'
+              },
+              {
+                $ref: '#/definitions/Switch'
+              },
+              {
+                $ref: '#/definitions/Email'
+              },
+              {
+                $ref: '#/definitions/Avatar'
+              },
+              {
+                $ref: '#/definitions/Tags'
+              },
+              {
+                $ref: '#/definitions/HighlightedValue'
+              }
+            ]
+          }
+        },
+        type: 'object',
+        properties: {
+          data: {
+            type: 'object',
+            properties: {
+              headers: {
+                type: 'array',
+                items: {
+                  $ref: '#/definitions/HeaderMeta'
+                }
+              },
+              rows: {
+                type: 'array',
+                items: {
+                  type: 'object',
+                  properties: {
+                    id: {
+                      type: 'string'
+                    },
+                    columns: {
+                      type: 'array',
+                      items: {
+                        $ref: '#/definitions/Cell'
+                      }
+                    },
+                    rowActions: {
+                      defaultValue: [],
+                      type: 'array',
+                      items: {
+                        $ref: '#/definitions/DeclarativeAction'
+                      }
+                    },
+                    clickAction: {
+                      $ref: '#/definitions/DeclarativeAction'
+                    }
+                  },
+                  required: ['id', 'columns', 'rowActions', 'clickAction']
+                }
+              }
+            },
+            required: ['headers', 'rows']
+          }
+        }
+      }
+    }
+  },
+  sortBy: {
+    required: false,
+    defaultValue: {
+      id: '',
+      type: 'none'
+    },
+    typeMetadata: {
+      schema: {
+        id: {
+          required: true,
+          type: 'string'
+        },
+        order: {
+          type: 'string',
+          enum: Object.values(SortOrder),
+          defaultValue: 'none'
+        }
+      }
+    }
+  }
+};
+
+export default TableListProperties;

package/src/cc/table-list/behaviour-properties/ResizerConfig.ts

@@ -0,0 +1,18 @@
+export default {
+  type: "object",
+  properties: {
+    isEnabled: {
+      type: "boolean",
+      defaultValue: false
+    },
+    minWidth: {
+      type: "number",
+      defaultValue: 120
+    },
+    maxWidth: {
+      type: "number",
+      defaultValue: 1000
+    }
+  },
+  required: ["isEnabled"]
+}

package/src/cc/table-list/behaviour-properties/SelectionConfig.ts

@@ -0,0 +1,17 @@
+export default {
+  type: "object",
+  properties: {
+    isEnabled: {
+      type: "boolean",
+      defaultValue: false
+    },
+    maxSelectionCount: {
+      type: "number",
+      defaultValue: 50
+    },
+    limitExceedAlertMessage: {
+      type: "string",
+      defaultValue: "Max records selected"
+    }
+  }
+}

package/src/cc/table-list/behaviour-properties/SortByConfig.ts

@@ -0,0 +1,15 @@
+import SortOrder from '@bc/sort-by/SortOrderEnum';
+
+export default {
+  type: 'object',
+  properties: {
+    id: {
+      type: 'string'
+    },
+    type: {
+      type: 'string',
+      enum: Object.values(SortOrder),
+      defaultValue: SortOrder.NONE
+    }
+  }
+};

package/src/cc/table-list/behaviour-properties/index.ts

@@ -0,0 +1,3 @@
+export { default as SelectionConfigSchema } from './SelectionConfig';
+export { default as SortByConfigSchema } from './SortByConfig';
+export { default as ResizerConfigSchema } from './ResizerConfig';

package/src/cc/table-list/data-types/Column.ts

@@ -0,0 +1,7 @@
+import { AvatarField, CheckboxField, EmailField, HighlightedValueField, LinkField, SwitchField, TextField } from './fields';
+// NOTE : The below type as of now we just put it as any, but it should be a union of all the fields.
+// type Column = AvatarField | CheckboxField | EmailField | HighlightedValueField | LinkField | SwitchField | TextField;
+
+type Column = any;
+
+export default Column;

package/src/cc/table-list/data-types/Data.ts

@@ -0,0 +1,9 @@
+import Header from "./Header";
+import Row from "./Row";
+
+type Data = {
+  headers: Array<Header>,
+  rows: Array<Row>
+}
+
+export default Data;

package/src/cc/table-list/data-types/Header.ts

@@ -0,0 +1,32 @@
+export enum SortedBy {
+  None = 'none',
+  Ascending = 'ascending',
+  Descending = 'descending'
+}
+
+export enum Size {
+  XSmall = 'xsmall',
+  Small = 'small',
+  Medium = 'medium',
+  Large = 'large',
+  XLarge = 'xlarge'
+}
+
+export enum Alignment {
+  Left = 'left',
+  Center = 'center',
+  Right = 'right'
+}
+
+type Header = {
+  id: string;
+  name: string;
+  text: string;
+  sortable: boolean;
+  sortedBy?: SortedBy;
+  sortTooltip?: string;
+  size: Size;
+  alignment: Alignment;
+};
+
+export default Header;

package/src/cc/table-list/data-types/ResizerConfig.ts

@@ -0,0 +1,7 @@
+type ResizerConfig = {
+  isEnabled: boolean;
+  minWidth: number;
+  maxWidth: number;
+};
+
+export default ResizerConfig;

package/src/cc/table-list/data-types/Row.ts

@@ -0,0 +1,10 @@
+import ActionViewModel from '@library/dot/components/action-location/entities/interfaces/ActionViewModel';
+import Column from './Column';
+
+type Row = {
+  id: string;
+  columns: Array<Column>;
+  rowActions?: Array<ActionViewModel>;
+};
+
+export default Row;

package/src/cc/table-list/data-types/RowSelection.ts

@@ -0,0 +1,7 @@
+type RowSelection = {
+  tooltip: string,
+  isSelected: boolean,
+  isSelectable: boolean
+}
+
+export default RowSelection;

package/src/cc/table-list/data-types/SelectionConfig.ts

@@ -0,0 +1,7 @@
+type SelectionConfig = {
+  isEnabled: boolean;
+  maxSelectionCount?: number;
+  limitExceedMessage?: string;
+};
+
+export default SelectionConfig;

package/src/cc/table-list/data-types/fields/AvatarField.ts

@@ -0,0 +1,7 @@
+import AvatarDataType from "../../../avatar/Data";
+
+type AvatarField = {
+  type: "Avatar"
+} & AvatarDataType;
+
+export default AvatarField;

package/src/cc/table-list/data-types/fields/CheckboxField.ts

@@ -0,0 +1,7 @@
+import CheckboxDataType from "../../../checkbox/Data";
+
+type CheckboxField = {
+  type: "Checkbox"
+} & CheckboxDataType;
+
+export default CheckboxField;

package/src/cc/table-list/data-types/fields/EmailField.ts

@@ -0,0 +1,7 @@
+import EmailDataType from "../../../email/Data";
+
+type EmailField = {
+  type: "Email"
+} & EmailDataType;
+
+export default EmailField;

package/src/cc/table-list/data-types/fields/HighlightedValueField.ts

@@ -0,0 +1,7 @@
+import HighlightedValueDataType from "../../../highlighted-value/Data";
+
+type HighlightedValueField = {
+  type: "HighlightedValue"
+} & HighlightedValueDataType;
+
+export default HighlightedValueField;

package/src/cc/table-list/data-types/fields/LinkField.ts

@@ -0,0 +1,7 @@
+import LinkDataType from "../../../link/Data";
+
+type LinkField = {
+  type: "Link"
+} & LinkDataType;
+
+export default LinkField;

package/src/cc/table-list/data-types/fields/SwitchField.ts

@@ -0,0 +1,7 @@
+import SwitchDataType from "../../../switch/Data";
+
+type SwitchField = {
+  type: "Switch"
+} & SwitchDataType;
+
+export default SwitchField;

package/src/cc/table-list/data-types/fields/TagsField.ts

@@ -0,0 +1,7 @@
+import TagsDataType from "../../../tags/Data";
+
+type TagsField = {
+  type: "Tags"
+} & TagsDataType;
+
+export default TagsField;

package/src/cc/table-list/data-types/fields/TextField.ts

@@ -0,0 +1,7 @@
+import TextDataType from "../../../text/Data";
+
+type TextField = {
+  type: "Text"
+} & TextDataType;
+
+export default TextField;

package/src/cc/table-list/data-types/fields/index.ts

@@ -0,0 +1,8 @@
+export { default as AvatarField } from "./AvatarField";
+export { default as CheckboxField } from "./CheckboxField";
+export { default as EmailField } from "./EmailField";
+export { default as HighlightedValueField } from "./HighlightedValueField";
+export { default as LinkField } from "./LinkField";
+export { default as SwitchField } from "./SwitchField";
+export { default as TagsField } from "./TagsField";
+export { default as TextField } from "./TextField";

package/src/cc/table-list/index.ts

@@ -0,0 +1,5 @@
+export { default as TableListProperties } from "./Properties";
+export { default as TableListModel } from "./model";
+export { default as TableListActions } from "./Actions";
+export { default as TableListActionHandlers } from "./ActionHandlers";
+export { default as TableListConstants } from "./Constants";

package/src/cc/table-list/model/HeaderModel.ts

@@ -0,0 +1,15 @@
+export default function HeaderModel({
+  id,
+  text,
+  sortable,
+  size,
+  alignment
+}) {
+  return {
+    id,
+    text,
+    sortable,
+    size,
+    alignment
+  };
+}

package/src/cc/table-list/model/RowModel.ts

@@ -0,0 +1,13 @@
+export default function RowModel({
+  id,
+  columns,
+  rowActions,
+  clickAction
+}) {
+  return {
+    id,
+    columns,
+    rowActions,
+    clickAction
+  };
+}