@dartech/arsenal-ui 1.2.4 → 1.2.6

package/src/utils/dem.ts

@@ -0,0 +1,431 @@
+import {
+  PropertyType,
+  EntityTypeProperty,
+  PropertiesArrayType,
+  PropertyUnion,
+  PropertiesObjectType,
+  PropertyFillType,
+} from '../interfaces';
+import { sortArrayOfObjects } from './common';
+import { format } from 'date-fns';
+
+export const isPropertyValueEmpty = (value: unknown): boolean => {
+  if (value || value === 0 || value === false) {
+    return false;
+  }
+  return true;
+};
+
+const formatPropertyValue = (
+  propertyType: PropertyType,
+  value: unknown,
+  params?: {
+    formatText?: string;
+    properties?: PropertiesArrayType;
+  }
+) => {
+  if ((value === null || value === undefined) && propertyType !== PropertyType.BOOLEAN) {
+    return null;
+  }
+  let parsedValue: unknown = value;
+
+  switch (propertyType) {
+    case PropertyType.BOOLEAN:
+      if (value) {
+        parsedValue = true;
+      } else {
+        parsedValue = false;
+      }
+      break;
+    case PropertyType.INTEGER:
+    case PropertyType.BIG_INTEGER:
+    case PropertyType.BIG_DECIMAL:
+    case PropertyType.FLOAT:
+    case PropertyType.LONG:
+    case PropertyType.DOUBLE:
+      parsedValue = Number(value);
+      break;
+    case PropertyType.DATE:
+    case PropertyType.DATE_TIME:
+    case PropertyType.TIME:
+      parsedValue = format(new Date(value.toString()), params.formatText);
+      break;
+    case PropertyType.JSON:
+    case PropertyType.ANY:
+      try {
+        if (typeof value !== 'string') {
+          parsedValue = JSON.stringify(value);
+        }
+        parsedValue = JSON.parse(parsedValue as string);
+      } catch (e) {
+        console.log(e);
+        parsedValue = null;
+      }
+      break;
+    case PropertyType.ENTITY:
+      parsedValue = formatDefinitionData(params.properties, value);
+      break;
+    default:
+      break;
+  }
+
+  return parsedValue;
+};
+
+export const formatDefinitionData = (properties: PropertiesArrayType<unknown>, data: unknown) => {
+  if (data) {
+    const formattedData = {};
+
+    properties.forEach((property) => {
+      const { key, propertyType } = property;
+      const value = data[key];
+
+      if (Array.isArray(value)) {
+        formattedData[key] = value.map((val) =>
+          formatPropertyValue(propertyType, val, {
+            formatText: property['format'],
+            properties: property['properties'],
+          })
+        );
+      } else {
+        formattedData[key] = formatPropertyValue(propertyType, value, {
+          formatText: property['format'],
+          properties: property['properties'],
+        });
+      }
+    });
+
+    return formattedData;
+  }
+  return null;
+};
+
+const getPropertyValue = (property: PropertyUnion & { [key: string]: unknown }, isGlobalParameter: boolean) => {
+  const valueObject = {};
+  let value;
+  let key = '';
+
+  if (isGlobalParameter) {
+    if (property.isMultiple) {
+      key = 'values';
+      value = property['value'];
+    } else {
+      key = 'value';
+      value = property['value'];
+    }
+  } else {
+    if (property.isMultiple) {
+      key = 'defaultValues';
+      value = property['defaultValue'];
+    } else {
+      key = 'defaultValue';
+      value = property['defaultValue'];
+    }
+  }
+
+  if (Array.isArray(value)) {
+    valueObject[key] = value.map((val) =>
+      formatPropertyValue(property.propertyType, val, {
+        formatText: property['format'] as string,
+        properties: property['properties'] as PropertiesArrayType,
+      })
+    );
+  } else {
+    valueObject[key] = formatPropertyValue(property.propertyType, value, {
+      formatText: property['format'] as string,
+      properties: property['properties'] as PropertiesArrayType,
+    });
+  }
+
+  return valueObject;
+};
+
+export const propertiesArrayToObject = (properties, isGlobalParameter?: boolean): PropertiesObjectType<any> => {
+  const propertiesObject = {};
+
+  properties.forEach((property) => {
+    const { key, name, isRequired, isMultiple, sortOrder, isEnabled, uiSettings, validationNode } = property;
+    const propertyType =
+      typeof property.propertyType === 'string' ? property.propertyType : property.propertyType.value;
+
+    const resultProperty = {
+      name,
+      propertyType,
+      isRequired,
+      isMultiple,
+      sortOrder,
+      isEnabled,
+      validationNode,
+      uiSettings,
+      ...getPropertyValue({ ...property, propertyType }, isGlobalParameter),
+    };
+
+    if ('isViewableInList' in property) {
+      resultProperty['isViewableInList'] = property.isViewableInList;
+    }
+
+    if (uiSettings) {
+      try {
+        resultProperty.uiSettings = JSON.parse(uiSettings);
+      } catch (e) {
+        console.log(e);
+      }
+    } else {
+      resultProperty.uiSettings = null;
+    }
+
+    if (propertyType === PropertyType.BIG_DECIMAL) {
+      resultProperty['precisionScale'] = property.precisionScale;
+      resultProperty['roundingMode'] = property.roundingMode;
+    }
+
+    if (
+      propertyType === PropertyType.DATE ||
+      propertyType === PropertyType.TIME ||
+      propertyType === PropertyType.DATE_TIME
+    ) {
+      resultProperty['format'] = property.format;
+    }
+
+    if (propertyType === PropertyType.STRING) {
+      resultProperty['restrictedValues'] = property.restrictedValues;
+    }
+
+    if (propertyType === PropertyType.ENTITY_REFERENCE) {
+      resultProperty['definitionCode'] = property.definitionCode;
+      resultProperty['definitionVersion'] = property.definitionVersion;
+      resultProperty['labelPropertyCode'] = property.labelPropertyCode;
+      resultProperty['valuePropertyCode'] = property.valuePropertyCode;
+    }
+
+    if (propertyType === PropertyType.ENTITY) {
+      resultProperty['properties'] = propertiesArrayToObject(property.properties, isGlobalParameter);
+    }
+
+    propertiesObject[key] = resultProperty;
+  });
+
+  return propertiesObject;
+};
+
+export function propertiesObjectToArray(properties, fields?: { [key: string]: unknown }) {
+  return Object.keys(properties)
+    .map((key) => {
+      const propObj = { key, ...properties[key], ...(fields ? fields : {}) };
+      if (propObj['propertyType'] === PropertyType.ENTITY) {
+        propObj['properties'] = propertiesObjectToArray(propObj['properties'], fields);
+      }
+
+      if (propObj['propertyType'] === PropertyType.JSON) {
+        try {
+          if (propObj.defaultValue == null) {
+            propObj.defaultValue = '';
+          } else {
+            propObj.defaultValue = JSON.stringify(propObj.defaultValue, null, 2);
+          }
+        } catch (error) {
+          propObj.defaultValue = '';
+        }
+      }
+
+      if (propObj['uiSettings']) {
+        try {
+          propObj.uiSettings = JSON.stringify(propObj.uiSettings, null, 2);
+        } catch (error) {
+          propObj.uiSettings = '';
+        }
+      }
+
+      if (propObj['isMultiple']) {
+        if ('defaultValues' in propObj) {
+          propObj['defaultValue'] = propObj.defaultValues;
+        }
+        if ('values' in propObj) {
+          propObj['value'] = propObj.values;
+        }
+      }
+
+      return propObj;
+    })
+    .sort((a, b) => sortArrayOfObjects(a, b, 'sortOrder'));
+}
+
+export const getDemPropertyDateFormat = (defaultFormat: string, propertyFormat: string) => {
+  if (propertyFormat) {
+    try {
+      const correctFormat = propertyFormat.replace(/Z/g, 'XXX');
+      format(new Date(), correctFormat);
+      return correctFormat;
+    } catch (e) {
+      console.error('Incorrect format', e);
+      return defaultFormat;
+    }
+  }
+  return defaultFormat;
+};
+
+export const getEntityStarterValue = (property: EntityTypeProperty) => {
+  let properties: PropertiesArrayType = [];
+  if (Array.isArray(property.properties)) {
+    properties = property.properties;
+  } else {
+    properties = propertiesObjectToArray(property.properties);
+  }
+
+  return properties.reduce((value, property) => {
+    const result = JSON.parse(JSON.stringify(value));
+    if (property.propertyType === PropertyType.ENTITY) {
+      result[property.key] = getEntityStarterValue(property);
+    } else {
+      result[property.key] = property.propertyType;
+    }
+    return result;
+  }, {});
+};
+
+export const getMultiplePropertyFillOptions = ({
+  propertyType,
+  useExpression,
+  required,
+}: {
+  propertyType: PropertyType;
+  required: boolean;
+  useExpression?: boolean;
+}): { value: PropertyFillType; label: string; sortOrder: number }[] => {
+  let options: { value: PropertyFillType; label: string; sortOrder: number }[] = [
+    {
+      value: 'widget',
+      label: 'Fill array (widget)',
+      sortOrder: 1,
+    },
+  ];
+
+  if (!required) {
+    options.push({
+      value: 'null',
+      label: 'NULL',
+      sortOrder: 0,
+    });
+  }
+
+  if (useExpression) {
+    if (
+      propertyType === PropertyType.JSON ||
+      propertyType === PropertyType.ENTITY ||
+      propertyType === PropertyType.ANY
+    ) {
+      options.push({ value: 'expression', label: 'Expression (JSON editor)', sortOrder: 3 });
+    } else {
+      options.push({
+        value: 'expression',
+        label: 'Expression',
+        sortOrder: 3,
+      });
+    }
+  }
+
+  if (propertyType === PropertyType.JSON || propertyType === PropertyType.ANY || propertyType === PropertyType.ENTITY) {
+    options.push({
+      value: 'json_valid',
+      label: 'JSON editor',
+      sortOrder: 2,
+    });
+  }
+
+  options = options.sort((a, b) => sortArrayOfObjects(a, b, 'sortOrder'));
+  return options;
+};
+
+export const getSinglePropertyFillOptions = ({
+  propertyType,
+  useExpression,
+  required,
+}: {
+  propertyType: PropertyType;
+  required: boolean;
+  useExpression?: boolean;
+}): { value: PropertyFillType; label: string; sortOrder: number }[] => {
+  let options: { value: PropertyFillType; label: string; sortOrder: number }[] = [
+    {
+      value: 'widget',
+      label: 'Widget',
+      sortOrder: 1,
+    },
+  ];
+
+  if (!required) {
+    options.push({
+      value: 'null',
+      label: 'NULL',
+      sortOrder: 0,
+    });
+  }
+
+  if (useExpression) {
+    if (
+      propertyType === PropertyType.JSON ||
+      propertyType === PropertyType.ENTITY ||
+      propertyType === PropertyType.ANY
+    ) {
+      options.push({ value: 'expression', label: 'Expression (JSON editor)', sortOrder: 3 });
+    } else {
+      options.push({
+        value: 'expression',
+        label: 'Expression',
+        sortOrder: 3,
+      });
+    }
+  }
+
+  if (propertyType === PropertyType.JSON) {
+    options.push({
+      value: 'dem_builder',
+      label: 'DEM Builder',
+      sortOrder: 2,
+    });
+  }
+
+  // WIDGET LABEL SET
+  switch (propertyType) {
+    case PropertyType.STRING:
+      options[0].label = 'Text input';
+      break;
+    case PropertyType.INTEGER:
+    case PropertyType.BIG_INTEGER:
+    case PropertyType.BIG_DECIMAL:
+    case PropertyType.FLOAT:
+    case PropertyType.LONG:
+    case PropertyType.DOUBLE:
+      options[0].label = 'Number input';
+      break;
+    case PropertyType.BOOLEAN:
+      options[0].label = 'Switch';
+      break;
+    case PropertyType.ENTITY_REFERENCE:
+      options[0].label = 'Entity reference fields';
+      break;
+    case PropertyType.JSON:
+      options[0].label = 'JSON editor';
+      break;
+    case PropertyType.DATE:
+      options[0].label = 'Date picker';
+      options.push({ value: 'string', label: 'Text input', sortOrder: 2 });
+      break;
+    case PropertyType.DATE_TIME:
+      options[0].label = 'Date & Time picker';
+      options.push({ value: 'string', label: 'Text input', sortOrder: 2 });
+      break;
+    case PropertyType.TIME:
+      options[0].label = 'Time picker';
+      options.push({ value: 'string', label: 'Text input', sortOrder: 2 });
+      break;
+    case PropertyType.ANY:
+      options[0].label = 'Textarea';
+      break;
+    default:
+      break;
+  }
+
+  options = options.sort((a, b) => sortArrayOfObjects(a, b, 'sortOrder'));
+  return options;
+};

package/src/utils/hooks.ts

@@ -0,0 +1,41 @@
+import { useEffect, useRef, useState } from 'react';
+
+export function useDebounce(func: (args?: any) => void, delay: number) {
+  const timer = useRef<any>();
+
+  useEffect(() => {
+    return () => {
+      if (!timer.current) return;
+      clearTimeout(timer.current);
+    };
+  }, []);
+
+  const debounceFunction = (...args) => {
+    clearTimeout(timer.current);
+    timer.current = setTimeout(() => {
+      func(...args);
+    }, delay);
+  };
+
+  return debounceFunction;
+}
+
+
+export const useToggle = () => {
+  const [open, setOpen] = useState(false);
+
+  const toggle = () => {
+    setOpen((prevState) => !prevState);
+  };
+
+  const onClose = () => {
+    setOpen(false);
+  };
+
+  const onOpen = () => {
+    setOpen(true);
+  };
+
+  return { open, toggle, onClose, onOpen };
+};
+

package/src/utils/{index.d.ts → index.ts}

@@ -1,5 +1,5 @@
-export * from './common';
-export * from './ui-utils';
-export * from './hooks';
-export * from './validators';
-export * from './dem';
+export * from './common';
+export * from './ui-utils';
+export * from './hooks';
+export * from './validators';
+export * from './dem';

package/src/utils/ui-utils.tsx

@@ -0,0 +1,132 @@
+import Box from '@mui/material/Box';
+import SvgIcon from '@mui/material/SvgIcon';
+import Tooltip from '@mui/material/Tooltip';
+import { CopyButton, Status } from '../lib';
+import { format } from 'date-fns';
+import { StatusVariant } from '../interfaces';
+import JsonTypeCell from '../lib/Table/DataGrid/JsonTypeCell';
+
+export const formatTableRowValue = ({
+  value,
+  canCopy,
+  copyValue,
+  shortId,
+  fullText,
+  textParams: { displayAs = 'text', dateFormat, statusVariant },
+}: {
+  value: any;
+  canCopy?: boolean;
+  copyValue?: string;
+  shortId?: boolean;
+  fullText?: boolean;
+  textParams?: {
+    displayAs?:
+      | 'text'
+      | 'boolean'
+      | 'date'
+      | 'status'
+      | 'json_text'
+      | 'json_code'
+      | 'array'
+      | 'number';
+    dateFormat?: string[];
+    statusVariant?: StatusVariant;
+  };
+}) => {
+  switch (displayAs) {
+    case 'boolean':
+      return value ? (
+        <SvgIcon color="primary" fontSize="small">
+          <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" />
+        </SvgIcon>
+      ) : (
+        <SvgIcon fontSize="small">
+          <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8 0-1.85.63-3.55 1.69-4.9L16.9 18.31C15.55 19.37 13.85 20 12 20zm6.31-3.1L7.1 5.69C8.45 4.63 10.15 4 12 4c4.42 0 8 3.58 8 8 0 1.85-.63 3.55-1.69 4.9z" />
+        </SvgIcon>
+      );
+    case 'date':
+      return value ? (
+        dateFormat ? (
+          <Box>
+            {dateFormat.map((formatString) => (
+              <Box>{format(new Date(value as string), formatString)}</Box>
+            ))}
+          </Box>
+        ) : (
+          <Box>
+            <Box>{format(new Date(value as string), 'dd.MM.yyyy')}</Box>
+            <Box>{format(new Date(value as string), 'HH:mm:ss')}</Box>
+          </Box>
+        )
+      ) : (
+        ''
+      );
+    case 'status':
+      return (
+        <Status
+          text={value as string}
+          status={statusVariant ? statusVariant : 'default'}
+        />
+      );
+    case 'json_text':
+      return <JsonTypeCell value={value} textField />;
+    case 'json_code':
+      return <JsonTypeCell value={value} copyButton />;
+    case 'array':
+      return (
+        <Box>
+          {(value as string[]).map((val, index) => (
+            <Box key={index}>{val}</Box>
+          ))}
+        </Box>
+      );
+    case 'number':
+      return (
+        <Box display="flex" justifyContent="flex-end">
+          <Box>
+            {value.toLocaleString('ru-Ru', { minimumFractionDigits: 2 })}
+          </Box>
+        </Box>
+      );
+    case 'text':
+    default:
+      return value ? (
+        <Box display="flex" alignItems="center" width="100%">
+          {shortId ? (
+            <Tooltip title={value}>
+              <Box mr="auto">
+                {value
+                  ? `${(value as string).slice(0, 6)}...${(
+                      value as string
+                    ).slice(-6)}`
+                  : '...'}
+              </Box>
+            </Tooltip>
+          ) : fullText ? (
+            <Box sx={{ whiteSpace: 'normal' }} title={value}>
+              {typeof value === 'string' ? value : JSON.stringify(value)}
+            </Box>
+          ) : (
+            <Tooltip title={value}>
+              <Box className="MuiDataGrid-cellContent" title={value}>
+                {typeof value === 'string' ? value : JSON.stringify(value)}
+              </Box>
+            </Tooltip>
+          )}
+          {canCopy && (
+            <CopyButton
+              copyText={
+                copyValue
+                  ? typeof copyValue === 'string'
+                    ? copyValue
+                    : JSON.stringify(copyValue)
+                  : value
+              }
+            />
+          )}
+        </Box>
+      ) : (
+        ''
+      );
+  }
+};

package/src/utils/validators.ts

@@ -0,0 +1,14 @@
+import { PropertyType } from '../interfaces';
+
+export const digitsOnly = new RegExp('^[-+]?[0-9]+$');
+export const floatsOnly = new RegExp(/^[-+]?[0-9]*\.?[0-9]+([eE][-+]?[0-9]+)?$/);
+
+export const isExpression = (value: unknown): boolean => {
+  return typeof value === 'string' ? value.includes('$(') : false;
+};
+
+export const isDateType = (propertyType: PropertyType) => {
+  return (
+    propertyType === PropertyType.DATE || propertyType === PropertyType.DATE_TIME || propertyType === PropertyType.TIME
+  );
+};

package/tsconfig.json

@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "module": "ESNext",
+    "jsx": "react-jsx",
+    "allowJs": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "forceConsistentCasingInFileNames": true,    
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    },
+    {
+      "path": "./tsconfig.spec.json"
+    }
+  ],
+  "extends": "../../tsconfig.base.json"
+}

package/tsconfig.lib.json

@@ -0,0 +1,23 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "types": ["node"]
+  },
+  "files": [
+    "../../node_modules/@nrwl/react/typings/cssmodule.d.ts",
+    "../../node_modules/@nrwl/react/typings/image.d.ts"
+  ],
+  "exclude": [
+    "jest.config.ts",
+    "src/**/*.spec.ts",
+    "src/**/*.test.ts",
+    "src/**/*.spec.tsx",
+    "src/**/*.test.tsx",
+    "src/**/*.spec.js",
+    "src/**/*.test.js",
+    "src/**/*.spec.jsx",
+    "src/**/*.test.jsx"
+  ],
+  "include": ["src/**/*.js", "src/**/*.jsx", "src/**/*.ts", "src/**/*.tsx", "src/**/*.d.ts"]
+}

package/tsconfig.spec.json

@@ -0,0 +1,20 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "module": "commonjs",
+    "types": ["jest", "node"]
+  },
+  "include": [
+    "jest.config.ts",
+    "src/**/*.test.ts",
+    "src/**/*.spec.ts",
+    "src/**/*.test.tsx",
+    "src/**/*.spec.tsx",
+    "src/**/*.test.js",
+    "src/**/*.spec.js",
+    "src/**/*.test.jsx",
+    "src/**/*.spec.jsx",
+    "src/**/*.d.ts"
+  ]
+}