@dartech/arsenal-ui 0.0.1

package/.babelrc

@@ -0,0 +1,12 @@
+{
+  "presets": [
+    [
+      "@nrwl/react/babel",
+      {
+        "runtime": "automatic",
+        "useBuiltIns": "usage"
+      }
+    ]
+  ],
+  "plugins": []
+}

package/.eslintrc.json

@@ -0,0 +1,22 @@
+{
+  "extends": ["plugin:@nrwl/nx/react", "../../.eslintrc.json"],
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "parserOptions": {
+        "sourceType": "module",
+        "allowImportExportEverywhere": true
+      },
+      "rules": {}
+    },
+    {
+      "files": ["*.ts", "*.tsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.js", "*.jsx"],
+      "rules": {}
+    }
+  ]
+}

package/README.md

@@ -0,0 +1,7 @@
+# arsenal-ui
+
+This library was generated with [Nx](https://nx.dev).
+
+## Running unit tests
+
+Run `nx test arsenal-ui` to execute the unit tests via [Jest](https://jestjs.io).

package/index.ts

@@ -0,0 +1,3 @@
+export * from './src/interfaces';
+export * from './src/lib';
+export * from './src/utils';

package/jest.config.js

@@ -0,0 +1,9 @@
+module.exports = {
+  displayName: 'arsenal-ui',
+  preset: '../../jest.preset.js',
+  transform: {
+    '^.+\\.[tj]sx?$': 'babel-jest',
+  },
+  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
+  coverageDirectory: '../../coverage/libs/arsenal-ui',
+};

package/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "@dartech/arsenal-ui",
+  "version": "0.0.1",
+  "author": "DAR",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
+  },
+  "license": "ISC",
+  "dependencies": {
+    "react": "17.0.2",
+    "react-hook-form": "^7.5.2",
+    "@mui/x-date-pickers": "^5.0.0-alpha.0",
+    "date-fns": "^2.22.1",
+    "react-ace": "^10.1.0",
+    "ace-builds": "^1.5.3",
+    "react-router-dom": "5.3.0",
+    "react-toastify": "^8.2.0",
+    "classnames": "^2.3.1",
+    "mui-rte": "^1.29.0"
+  }
+}

package/project.json

@@ -0,0 +1,69 @@
+{
+  "root": "libs/arsenal-ui",
+  "sourceRoot": "libs/arsenal-ui/src",
+  "projectType": "library",
+  "tags": [],
+  "targets": {
+    "build": {
+      "executor": "@nrwl/web:rollup",
+      "outputs": ["{options.outputPath}"],
+      "options": {
+        "outputPath": "dist/libs/arsenal-ui",
+        "tsConfig": "libs/arsenal-ui/tsconfig.lib.json",
+        "project": "libs/arsenal-ui/package.json",
+        "entryFile": "libs/arsenal-ui/index.ts",        
+        "rollupConfig": "libs/arsenal-ui/rollup.config",
+        "external": [
+          "react",
+          "react/jsx-runtime",
+          "axios",
+          "url-join",
+          "dmn-js",
+          "jspdf",
+          "canvg",
+          "react-toastify",
+          "react-router-dom",
+          "@material-ui/core",
+          "@material-ui/icons",
+          "@material-ui/lab",
+          "@material-ui/pickers",
+          "@material-ui/core/styles",
+          "@mui/material",
+          "@mui/x-date-pickers",
+          "@mui/x-data-grid",
+          "classnames",
+          "react-hook-form",
+          "ace-builds",
+          "react-ace",
+          "date-fns",
+          "uuid",
+          "tslib",
+          "mui-rte"
+        ],
+        "compiler": "babel",
+        "assets": [
+          {
+            "glob": "libs/arsenal-ui/README.md",
+            "input": ".",
+            "output": "."
+          }
+        ]
+      }
+    },
+    "lint": {
+      "executor": "@nrwl/linter:eslint",
+      "outputs": ["{options.outputFile}"],
+      "options": {
+        "lintFilePatterns": ["libs/arsenal-ui/**/*.{ts,tsx,js,jsx}"]
+      }
+    },
+    "test": {
+      "executor": "@nrwl/jest:jest",
+      "outputs": ["coverage/libs/arsenal-ui"],
+      "options": {
+        "jestConfig": "libs/arsenal-ui/jest.config.js",
+        "passWithNoTests": true
+      }
+    }
+  }
+}

package/rollup.config.js

@@ -0,0 +1,135 @@
+/* eslint-disable @typescript-eslint/ban-ts-comment */
+// @ts-nocheck
+
+Object.defineProperty(exports, "__esModule", { value: true });
+const builtins = require('rollup-plugin-node-builtins');
+const resolve = require('@rollup/plugin-node-resolve');
+const json = require('@rollup/plugin-json');
+const terser = require('rollup-plugin-terser');
+const path = require('path');
+// const bpmnlint = require('rollup-plugin-bpmnlint');
+// const minify = require('rollup-plugin-babel-minify');
+const fileExtensions = ['.mjs', '.esm.js', 'cjs', '.js', '.ts', '.tsx', '.json', '.jsx'];
+
+function getRollupOptions(options) {
+  const extraGlobals = {
+    react: 'React',
+    classnames: 'cn',
+    crypto: 'crypto',
+    '@mui/x-data-grid': 'xDataGrid',
+    'react-dom': 'ReactDOM',
+    'react-router-dom': 'ReactRouterDOM',
+    'styled-components': 'styled',
+    '@emotion/react': 'emotionReact',
+    '@emotion/styled': 'emotionStyled',
+    'axios': 'axios',
+    'url-join': 'urlJoin',
+    '@material-ui/core': 'materialUiCore',
+    'react-hook-form': 'reactHookForm',    
+    '@material-ui/core/styles': 'MuiStyles',
+    "@material-ui/icons/DeleteForever": "DeleteForeverIcon",
+    '@material-ui/core/TextField': 'TextField',
+    '@material-ui/core/MenuItem': 'MenuItem',
+    '@material-ui/core/Button': 'Button',
+    '@material-ui/core/Dialog': 'Dialog',
+    '@material-ui/core/DialogActions': 'DialogActions',
+    '@material-ui/core/DialogContent': 'DialogContent',
+    '@material-ui/core/DialogContentText': 'DialogContentText',
+    '@material-ui/core/DialogTitle': 'DialogTitle',
+    '@material-ui/core/Box': 'Box',
+    '@material-ui/core/Grid': 'Grid',
+    '@material-ui/core/Checkbox': 'Checkbox',
+    '@material-ui/core/FormControl': 'FormControl',
+    '@material-ui/core/InputLabel': 'InputLabel',
+    '@material-ui/core/Typography': 'Typography',
+    '@material-ui/core/FormHelperText': 'FormHelperText',
+    '@material-ui/lab/Pagination': 'Pagination',
+    '@material-ui/lab/Autocomplete': 'Autocomplete',    
+    '@mui/x-date-pickers/DatePicker': 'DatePicker',
+    '@mui/x-date-pickers/TimePicker': 'TimePicker',
+    '@mui/x-date-pickers/DateTimePicker': 'DateTimePicker',
+    '@mui/material/TextField': 'MuiTextField',
+    '@material-ui/core/Card': 'Card',
+    '@material-ui/core/CardContent': 'CardContent',
+    '@material-ui/core/TablePagination': 'TablePagination',
+    '@material-ui/icons/CheckCircle': 'CheckCircleIcon',
+    '@material-ui/core/FormControlLabel': 'FormControlLabel',
+    '@material-ui/core/IconButton': 'IconButton',
+    '@material-ui/core/Tooltip': 'Tooltip',
+    '@material-ui/icons/Add': 'AddIcon',
+    '@material-ui/icons/FileCopyOutlined': 'FileCopyOutlined',
+    '@material-ui/core/CircularProgress': 'CircularProgress',
+    '@material-ui/icons/ZoomInOutlined': 'ZoomInIcon',
+    '@material-ui/icons/ZoomOutOutlined': 'ZoomOutIcon',
+    '@material-ui/icons/AspectRatioOutlined': 'AspectRatioOutlinedIcon',
+    '@material-ui/icons/DeleteForeverOutlined': 'DeleteForeverOutlinedIcon',
+    '@material-ui/icons/ReplayOutlined': 'ReplayOutlinedIcon',
+    '@material-ui/icons/Settings': 'SettingsIcon',
+    '@material-ui/icons/Pause': 'PauseIcon',
+    '@material-ui/icons/PlayArrow': 'PlayArrowIcon', 
+    '@material-ui/core/ButtonGroup': 'ButtonGroupIcon',
+    '@material-ui/core/Radio': 'Radio',
+    '@material-ui/core/RadioGroup': 'RadioGroup',
+    '@material-ui/core/List': 'List',
+    '@material-ui/core/ListItem': 'ListItem',
+    '@material-ui/core/ListItemText': 'ListItemText',
+    '@material-ui/core/ListItemSecondaryAction': 'ListItemSecondaryAction',
+    '@material-ui/core/Collapse': 'Collapse',
+    '@material-ui/core/Table': 'MuiTable',
+    '@material-ui/core/TableRow': 'TableRow',
+    '@material-ui/core/TableCell': 'TableCell',
+    '@material-ui/core/TableBody': 'TableBody',
+    '@material-ui/core/TableContainer': 'TableContainer',
+    '@material-ui/core/TableHead': 'TableHead',
+    '@material-ui/icons/Close': 'CloseIcon',    
+    "@material-ui/pickers": 'pickers',    
+    'react-ace': 'AceEditor',
+    'date-fns': 'dateFns',
+    'tslib': 'tslib',
+    'draft-js': 'draftJs',
+    'react-toastify': 'reactToastify',
+    'mui-rte': 'MUIRichTextEditor'
+  };
+  if (Array.isArray(options.output)) {
+    options.output.forEach((o) => {
+      o.globals = Object.assign(Object.assign({}, o.globals), extraGlobals);
+      o.output.compact = true;
+      // o.output.inlineDynamicImports = false;
+    });
+  }
+  else {
+    options.output = Object.assign(Object.assign({}, options.output), {
+      globals: Object.assign(Object.assign({}, options.output.globals), extraGlobals),
+      compact: true,
+      // inlineDynamicImports: false
+    });
+  };
+  
+  
+  options.treeshake = {
+    moduleSideEffects: false,
+  };
+  options.external = (id) => {
+      return !id.startsWith('.') && !path.isAbsolute(id);
+  }
+  
+  options.plugins.push(
+    resolve.nodeResolve({
+      mainFields: ['module', 'browser', 'main'],
+      preferBuiltins: true,
+      extensions: fileExtensions,
+      moduleDirectories: ['dist/libs', 'node_modules'], // IMPORTANT
+    })
+  );
+  options.plugins.push(builtins());
+  options.plugins.push(json());  
+  options.plugins.push(terser.terser());
+  // options.plugins.push(bpmnlint({
+  //   include: '**/.bpmnlintrc',
+  //   exclude: []
+  // }))
+
+  return options;
+}
+
+module.exports = getRollupOptions;

package/src/interfaces/common.ts

@@ -0,0 +1,12 @@
+export enum RoundingMode {
+  UP = 'UP',
+  DOWN = 'DOWN',
+  CEILING = 'CEILING',
+  FLOOR = 'FLOOR',
+  HALF_UP = 'HALF_UP',
+  HALF_DOWN = 'HALF_DOWN',
+  HALF_EVEN = 'HALF_EVEN',
+  UNNECESSARY = 'UNNECESSARY',
+}
+
+

package/src/interfaces/definition.ts

@@ -0,0 +1,143 @@
+import { RoundingMode } from './common';
+
+export enum PropertyType {
+  STRING = 'STRING',
+  INTEGER = 'INTEGER',
+  BIG_INTEGER = 'BIG_INTEGER',
+  BIG_DECIMAL = 'BIG_DECIMAL',
+  FLOAT = 'FLOAT',
+  LONG = 'LONG',
+  DOUBLE = 'DOUBLE',
+  BOOLEAN = 'BOOLEAN',
+  ENTITY_REFERENCE = 'ENTITY_REFERENCE',
+  ENTITY = 'ENTITY',
+  JSON = 'JSON',
+  DATE = 'DATE',
+  TIME = 'TIME',
+  DATE_TIME = 'DATE_TIME',
+}
+
+export interface Definition {
+  code: string;
+  version: number;
+  name: string;
+  properties: PropertiesObjectType;
+}
+
+export type PropertiesObjectType<T = unknown> = Record<string, PropertyUnion & T>;
+export type PropertiesArrayType<T = unknown> = Array<PropertyUnion & T>;
+
+export interface CreateDefinitionType extends Omit<Definition, 'properties'> {
+  properties: PropertiesArrayType;
+}
+export interface UpdateDefinitionType extends Omit<Definition, 'properties'> {
+  properties: PropertiesArrayType;
+}
+
+export interface Property {
+  propertyType: keyof typeof PropertyType | { value: keyof typeof PropertyType };
+  name: string;
+  defaultValue: unknown;
+  defaultValues: unknown[];
+  isRequired: boolean;
+  isMultiple: boolean;
+  sortOrder: number;
+  isEnabled: boolean;
+  uiSettings: unknown;
+  validationNode: unknown;
+  // FRONTEND FIELDS
+  key?: string;
+}
+
+export interface BigDecimalProperty extends Property {
+  propertyType: PropertyType.BIG_DECIMAL;
+  precisionScale: number;
+  roundingMode: keyof typeof RoundingMode;
+}
+
+export interface BigIntegerProperty extends Property {
+  propertyType: PropertyType.BIG_INTEGER;
+}
+
+export interface BooleanProperty extends Property {
+  propertyType: PropertyType.BOOLEAN;
+}
+
+export interface DateProperty extends Property {
+  propertyType: PropertyType.DATE;
+  format: string;
+}
+
+export interface DateTimeProperty extends Property {
+  propertyType: PropertyType.DATE_TIME;
+  format: string;
+}
+
+export interface DoubleProperty extends Property {
+  propertyType: PropertyType.DOUBLE;
+}
+
+export interface EntityTypeProperty extends Property {
+  propertyType: PropertyType.ENTITY;
+  properties: PropertiesObjectType | PropertiesArrayType;
+}
+
+export interface EntityReferenceProperty extends Property {
+  propertyType: PropertyType.ENTITY_REFERENCE;
+  definitionCode: string;
+  definitionVersion: string;
+  labelPropertyCode: string;
+  valuePropertyCode: string;
+}
+
+export interface FloatProperty extends Property {
+  propertyType: PropertyType.FLOAT;
+}
+
+export interface StringProperty extends Property {
+  propertyType: PropertyType.STRING;
+  restrictedValues: string[];
+}
+
+export interface IntegerProperty extends Property {
+  propertyType: PropertyType.INTEGER;
+}
+
+export interface JsonProperty extends Property {
+  propertyType: PropertyType.JSON;
+}
+
+export interface LongProperty extends Property {
+  propertyType: PropertyType.LONG;
+}
+
+export interface TimeProperty extends Property {
+  propertyType: PropertyType.TIME;
+  format: string;
+}
+
+export type PropertyUnion =
+  | BigDecimalProperty
+  | BigIntegerProperty
+  | BooleanProperty
+  | DateProperty
+  | DateTimeProperty
+  | DoubleProperty
+  | EntityTypeProperty
+  | EntityReferenceProperty
+  | FloatProperty
+  | StringProperty
+  | IntegerProperty
+  | JsonProperty
+  | LongProperty
+  | TimeProperty;
+
+export const DATE_DEFAULT_FORMAT = 'yyyy-MM-dd';
+export const TIME_DEFAULT_FORMAT = 'HH:mm:ss';
+export const DATE_TIME_DEFAULT_FORMAT = "yyyy-MM-dd'T'HH:mm:ss.SSSXXX";
+
+export type GPBPropertiesObjectType = PropertiesObjectType<{ value: unknown; values: unknown[] }>;
+export type GPBPropertiesArrayType = PropertiesArrayType<{ value: unknown; values: unknown[] }>;
+
+export type EntityDefinitionPropertyObjectType = PropertiesObjectType<{ isViewableInList: boolean }>;
+export type EntityDefinitionPropertyArrayType = PropertiesArrayType<{ isViewableInList: boolean }>;

package/src/interfaces/index.ts

@@ -0,0 +1,3 @@
+export * from './definition';
+export * from './ui';
+export * from './common';

package/src/interfaces/ui.ts

@@ -0,0 +1,35 @@
+import { PropertiesArrayType } from './definition';
+
+export interface FilterField {
+  name: string;
+  label: string;
+  type: 'text' | 'select' | 'autocomplete' | 'date' | 'number' | 'date_time';
+  value?: unknown;
+  multiple?: boolean;
+  options?: {
+    value: string;
+    label: string;
+  }[];
+}
+
+export interface Option {
+  value: string;
+  label: string;
+}
+
+export type TableDataType = 'JSON' | 'JSON_text' | 'JSON_copy' | 'copy' | 'boolean' | 'date' | 'status' | 'array';
+
+export type JsonPathPickerProperties = {
+  properties: PropertiesArrayType;
+  pathPrefix: string;
+  title: string;
+}[];
+
+export type CustomPropertyFieldProps = {
+  name: string;
+  label?: string;
+  type: 'text' | 'checkbox' | 'number' | 'select' | 'autocomplete' | 'json';
+  decimal?: boolean;
+  options?: string[] | { value: unknown; label: string }[];
+  required?: boolean;
+};

package/src/lib/Alert/Alert.tsx

@@ -0,0 +1,108 @@
+import React from 'react';
+import Button from '@material-ui/core/Button';
+import Dialog, { DialogProps } from '@material-ui/core/Dialog';
+import DialogActions from '@material-ui/core/DialogActions';
+import DialogContent from '@material-ui/core/DialogContent';
+import DialogContentText from '@material-ui/core/DialogContentText';
+import DialogTitle from '@material-ui/core/DialogTitle';
+import Box from '@material-ui/core/Box';
+import { Loader } from '../Loader';
+
+/**
+ * This interface is referencing the [[AlertDialog]] component props.
+ * @category Common UI components
+ */
+export interface AlertDialogProps {
+  /**
+   * Is dialog open flag
+   */
+  open: boolean;
+  /**
+   * Dialog title
+   */
+  title: string;
+  /**
+   * Dialog description
+   */
+  description?: string;
+  /**
+   * Close button text
+   */
+  closeButtonTitle?: string;
+  /**
+   * Confirm button text
+   */
+  confirmButtonTitle?: string;
+  /**
+   * onClose event handle function
+   */
+  onClose: () => void;
+  /**
+   * onConfirm event handle function
+   */
+  
+  onConfirm?: (values?: any) => void;
+  /**
+   * children components
+   */
+  children?: React.ReactNode;
+  /**
+   * Material UI Dialog component props
+   */
+  dialogProps?: Partial<DialogProps>;
+  loading?: boolean;
+  confirmButtonDisabled?: boolean;
+  maxWidth?: false | "xs" | "sm" | "md" | "lg" | "xl";
+};
+
+/**
+ * Alert dialog component. Used for popup information
+ * @category Common UI components
+ */
+export const AlertDialog = ({
+  open,
+  title,
+  description,
+  closeButtonTitle="Close",
+  onClose,
+  confirmButtonTitle = "Confirm",
+  confirmButtonDisabled = false,
+  onConfirm,
+  children,
+  dialogProps,
+  loading,
+  maxWidth="xs"
+}: AlertDialogProps) => {
+  return (
+    <div>
+      <Dialog
+        open={open}
+        onClose={onClose}
+        aria-labelledby="alert-dialog-title"
+        aria-describedby="alert-dialog-description"
+        fullWidth
+        maxWidth={maxWidth}
+        {...dialogProps}
+      >
+        {loading && <Loader />}
+        <DialogTitle id="alert-dialog-title">{title}</DialogTitle>
+        <DialogContent>
+          { description && <DialogContentText id="alert-dialog-description">{description}</DialogContentText>}          
+          <Box maxWidth="100%" overflow="hidden">{children}</Box>
+        </DialogContent>
+        <DialogActions>
+          <Button onClick={onClose} color="primary" variant="contained">
+            {closeButtonTitle}
+          </Button>
+          {confirmButtonTitle && onConfirm ? (
+            <Button onClick={onConfirm} color="secondary" variant="contained" autoFocus disabled={confirmButtonDisabled}>
+              {confirmButtonTitle}
+            </Button>
+          ) : null}
+        </DialogActions>
+      </Dialog>
+    </div>
+  );
+};
+
+export default AlertDialog;

package/src/lib/Alert/index.ts

@@ -0,0 +1 @@
+export * from './Alert';

package/src/lib/Definition/CreateDefinition/CreateDefinition.tsx

@@ -0,0 +1,74 @@
+import Box from '@material-ui/core/Box';
+import Grid from '@material-ui/core/Grid';
+import Typography from '@material-ui/core/Typography';
+import { ControlInput, ControlNumberInput } from '../../Forms';
+import CreatePropertiesList from '../../Property/UpsertProperty/CreatePropertiesList';
+
+import { useFormContext } from 'react-hook-form';
+
+type Props = {
+  definitionFieldName?: string;
+  title?: string;
+  hideCodeField?: boolean;
+  hideVersionField?: boolean;
+  hideNameField?: boolean;
+  required?: boolean;
+};
+
+export const CreateDefinition = ({
+  definitionFieldName,
+  title,
+  hideCodeField,
+  hideVersionField,
+  hideNameField,
+  required = false,
+}: Props) => {
+  const { control } = useFormContext();
+
+  return (
+    <Grid container direction="column" spacing={2}>
+      {title && (
+        <Grid item sm={12} md={8} lg={6}>
+          <Box my={2}>
+            <Typography variant="h4">{title}</Typography>
+          </Box>
+        </Grid>
+      )}
+      {!hideNameField && (
+        <Grid item sm={12} md={8} lg={6}>
+          <ControlInput
+            required
+            control={control}
+            name={definitionFieldName ? `${definitionFieldName}.name` : `name`}
+            label="Name"
+          />
+        </Grid>
+      )}
+      {!hideCodeField && (
+        <Grid item sm={12} md={8} lg={6}>
+          <ControlInput
+            required
+            control={control}
+            name={definitionFieldName ? `${definitionFieldName}.code` : `code`}
+            label="Code"
+          />
+        </Grid>
+      )}
+      {!hideVersionField && (
+        <Grid item sm={12} md={8} lg={6}>
+          <ControlNumberInput
+            required
+            control={control}
+            decimal={false}
+            name={definitionFieldName ? `${definitionFieldName}.version` : `version`}
+            label="Version"
+          />
+        </Grid>
+      )}
+
+      <CreatePropertiesList required={required} parentFieldName={definitionFieldName} />
+    </Grid>
+  );
+};
+
+export default CreateDefinition;

package/src/lib/Definition/CreateDefinition/index.ts

@@ -0,0 +1 @@
+export * from './CreateDefinition';