@dartech/arsenal-ui 0.0.1

package/src/lib/Table/TablePagination.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import Box from '@material-ui/core/Box';
+import Pagination from '@material-ui/lab/Pagination';
+import MuiTablePagination from '@material-ui/core/TablePagination';
+import {
+  gridPageCountSelector,
+  gridPageSelector,
+  gridRowCountSelector,
+  gridPageSizeSelector,
+  useGridApiContext,
+  useGridSelector,
+} from '@mui/x-data-grid';
+
+const TablePagination = () => {
+  const apiRef = useGridApiContext();
+  const page = useGridSelector(apiRef, gridPageSelector);
+  const pageCount = useGridSelector(apiRef, gridPageCountSelector);
+  const rowCount = useGridSelector(apiRef, gridRowCountSelector);
+  const pageSize = useGridSelector(apiRef, gridPageSizeSelector);
+
+  const onPageChange = (value) => apiRef.current.setPage(value);
+  const onRowsPerPageChange = (event: React.ChangeEvent<HTMLInputElement>) =>
+    apiRef.current.setPageSize(parseInt(event.target.value, 10));
+
+  return (
+    <Box px={2} display="flex" alignItems="center">
+      <MuiTablePagination
+        component="div"
+        page={page}
+        count={rowCount}
+        rowsPerPage={pageSize}
+        rowsPerPageOptions={[10, 20, 50, 100]}
+        onPageChange={(event, value) => onPageChange(value)}
+        onRowsPerPageChange={onRowsPerPageChange}
+        ActionsComponent={() => <></>}
+      />
+      <Pagination count={pageCount} page={page + 1} onChange={(event, value) => onPageChange(value - 1)} />
+    </Box>
+  );
+};
+
+export default TablePagination;

package/src/lib/Table/index.ts

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

package/src/lib/Table/styles.ts

@@ -0,0 +1,59 @@
+import { makeStyles } from '@material-ui/core/styles';
+
+export default makeStyles({
+  root: {
+    width: '100%',
+
+    '& .MuiDataGrid-virtualScrollerContent': {
+      height: 'auto !important',
+      minHeight: '56px !important',
+    },
+
+    '& .MuiDataGrid-virtualScrollerRenderZone': {
+      position: 'static',
+    },
+
+    '& .MuiDataGrid-renderingZone': {
+      maxHeight: 'none !important',
+    },
+
+    '& .MuiDataGrid-cell': {
+      maxHeight: 'none !important',
+      lineHeight: 'unset !important',
+      whiteSpace: 'normal !important',
+      textOverflow: 'ellipsis',
+      wordBreak: 'break-all',
+
+      '& .MuiDataGrid-actionsCell': {
+        width: '100%',
+        gridGap: '4px',
+        flexWrap: 'wrap',
+
+        '& > button[aria-label="more"]': {
+          marginLeft: 'auto',
+        },
+      },
+    },
+
+    '& .MuiDataGrid-row': {
+      maxHeight: 'none !important',
+    },
+
+    '& .Sorted': {
+      '& .MuiDataGrid-iconButtonContainer': {
+        visibility: 'visible',
+        width: 'auto',
+
+        '& svg': {
+          opacity: '1 !important',
+        },
+      },
+
+      '&.--desc': {
+        '& svg': {
+          transform: 'rotate(180deg)',
+        },
+      },
+    },
+  },
+});

package/src/lib/Table/usePagination.ts

@@ -0,0 +1,15 @@
+import { useEffect, useState } from 'react';
+
+const usePagination = (initialPageSize?: number) => {
+  const [pageSize, setPageSize] = useState(10);
+
+  useEffect(() => {
+    setPageSize(initialPageSize);
+  }, [initialPageSize]);
+
+  const handlePageSizeChange = (size) => setPageSize(size);
+
+  return { pageSize, handlePageSizeChange };
+};
+
+export default usePagination;

package/src/lib/Table/useTableQueryPagination.ts

@@ -0,0 +1,49 @@
+import { useEffect, useMemo } from 'react';
+import { useLocation, useHistory } from 'react-router-dom';
+import { GridFeatureMode } from '@mui/x-data-grid';
+
+interface Props {
+  mode: GridFeatureMode;
+}
+
+export const useTableQueryPagination = ({ mode }: Props) => {
+  const history = useHistory();
+  const { search, state } = useLocation();
+  const queryParams = useMemo(() => new URLSearchParams(search), [search]);
+
+  const page = +queryParams.get('page') || 0;
+  const size = +queryParams.get('size') || 10;
+
+  const onPageChange = (newPage: number) => {
+    queryParams.set('page', `${newPage}`);
+    history.replace({ pathname: history.location.pathname, search: queryParams.toString() });
+  };
+
+  const onSizeChange = (count: number) => {
+    queryParams.set('size', `${count}`);
+    history.replace({ pathname: history.location.pathname, search: queryParams.toString() });
+  };
+
+  useEffect(() => {
+    if (mode === 'server') {
+      if (!queryParams.has('page')) {
+        queryParams.set('page', '0');
+      }
+
+      if (!queryParams.has('size')) {
+        queryParams.set('size', `10`);
+      }
+
+      history.replace({ pathname: history.location.pathname, search: queryParams.toString() }, state);
+    }
+  }, [search, mode]);
+
+  return {
+    page,
+    size,
+    onPageChange,
+    onSizeChange,
+  };
+};
+
+export default useTableQueryPagination;

package/src/lib/Table/useTableQuerySorting.ts

@@ -0,0 +1,52 @@
+import { useMemo } from 'react';
+import { useHistory, useLocation } from 'react-router-dom';
+import { GridColumnHeaderParams, GridColumns } from '@mui/x-data-grid';
+
+export const useTableQuerySorting = () => {
+  const history = useHistory();
+  const { search, state } = useLocation();
+
+  const queryParams = useMemo(() => new URLSearchParams(search), [search]);
+  const sortParams = queryParams.getAll('sort').map((param) => param.split(','));
+
+  const onColumnHeaderClick = ({ field }: GridColumnHeaderParams) => {
+    let keyFound = false;
+
+    const sortValues = queryParams.getAll('sort');
+    queryParams.delete('sort');
+
+    sortValues.forEach((sortValue) => {
+      const [key, sort] = sortValue.split(',');
+      if (key === field) {
+        keyFound = true;
+        if (sort === 'asc') {
+          queryParams.append('sort', `${key},desc`);
+        }
+      } else {
+        queryParams.append('sort', `${key},${sort}`);
+      }
+    });
+
+    if (!keyFound) {
+      queryParams.append('sort', `${field},asc`);
+    }
+
+    history.replace({ pathname: history.location.pathname, search: queryParams.toString() }, state);
+  };
+
+  const getSortedColumns = (columns: GridColumns): GridColumns => {
+    return columns.map((column) => {
+      const columnSort = sortParams.find((param) => param[0] === column.field);
+      if (columnSort) {
+        column.headerClassName = `Sorted --${columnSort[1]} `;
+      } else {
+        column.headerClassName = '';
+      }
+      return column;
+    });
+  };
+
+  return { onColumnHeaderClick, getSortedColumns };
+};
+
+export default useTableQuerySorting;

package/src/lib/Tabs/RouteTabs.tsx

@@ -0,0 +1,54 @@
+import { useMemo } from 'react';
+import Box from '@material-ui/core/Box';
+import Paper from '@material-ui/core/Paper';
+import Tab from '@material-ui/core/Tab';
+import Tabs from '@material-ui/core/Tabs';
+import TabPanel from './TabPanel';
+
+import { useHistory, useLocation } from 'react-router-dom';
+
+interface RouteTab {
+  name: string;
+  label: string;
+  component: React.ReactElement;
+}
+
+interface Props {
+  tabs: RouteTab[];
+}
+
+export const RouteTabs = (props: Props) => {
+  const { tabs } = props;
+
+  const history = useHistory();
+  const location = useLocation();
+
+  const queryParams = useMemo(() => new URLSearchParams(location.search), [location.search]);
+  const value = queryParams.get('tab');
+
+  const handleChange = (event, newValue: string) => {
+    queryParams.set('tab', newValue);
+    history.replace({ pathname: history.location.pathname, search: queryParams.toString() });
+  };
+
+  return (
+    <Box>
+      <Paper>
+        <Tabs value={value || tabs[0]?.name} indicatorColor="primary" textColor="primary" onChange={handleChange}>
+          {tabs.map((tab) => (
+            <Tab key={tab.name} value={tab.name} label={tab.label} />
+          ))}
+        </Tabs>
+      </Paper>
+      <Box mt={2}>
+        {tabs.map((tab) => (
+          <TabPanel key={tab.name} value={value || tabs[0]?.name} index={tab.name}>
+            {tab.component}
+          </TabPanel>
+        ))}
+      </Box>
+    </Box>
+  );
+};
+
+export default RouteTabs;

package/src/lib/Tabs/TabPanel.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+
+/**
+ * This interface is referencing the [[TabPanel]] component props.
+ * @category Common UI components
+ */
+export interface TabPanelProps {
+  /**
+   * Active tab value
+   */
+  value: number | string;
+  /**
+   * Index of current panel
+   */
+  index: number | string;
+  /**
+   * Rendered children component
+   */
+  children: React.ReactElement;
+}
+
+/**
+ * Tab panel component. Used with tabs component
+ * @category Common UI components
+ */
+export const TabPanel = (props: TabPanelProps) => {
+  const { children, value, index, ...other } = props;
+
+  return (
+    <div
+      role="tabpanel"
+      hidden={value !== index}
+      id={`simple-tabpanel-${index}`}
+      aria-labelledby={`simple-tab-${index}`}
+      {...other}
+    >
+      {value === index ? children : null}
+    </div>
+  );
+};
+
+export default TabPanel;

package/src/lib/Tabs/index.ts

@@ -0,0 +1,2 @@
+export * from './TabPanel';
+export * from './RouteTabs';

package/src/lib/TemplateContent/ExpressionDecorator.tsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+const ExpressionDecorator = ({ children }) => {
+  return <span style={{ backgroundColor: '#e4ecff' }}>{children}</span>;
+};
+
+export default ExpressionDecorator;

package/src/lib/TemplateContent/TemplateContentEditor.tsx

@@ -0,0 +1,144 @@
+import MUIRichTextEditor from 'mui-rte';
+import { createTheme, ThemeProvider } from '@material-ui/core/styles';
+import { ContentState, EditorState, Modifier, convertFromHTML, convertToRaw } from 'draft-js';
+import FunctionsIcon from '@material-ui/icons/Functions';
+import Typography from '@material-ui/core/Typography';
+import ExpressionDecorator from './ExpressionDecorator';
+import { JsonPathPicker } from '../JsonPathPicker';
+
+import { useEffect, useState } from 'react';
+// import { stateToHTML } from 'draft-js-export-html';
+import { useToggle } from '../../utils';
+import { JsonPathPickerProperties, PropertiesArrayType } from '../../interfaces';
+import { useController, useFormContext } from 'react-hook-form';
+
+type Props = {
+  fieldName: string;
+  getProperties?: () => JsonPathPickerProperties;
+  initialText?: string;
+};
+
+const defaultTheme = createTheme();
+
+Object.assign(defaultTheme, {
+  overrides: {
+    MUIRichTextEditor: {
+      root: {
+        marginTop: 20,
+        width: '100%',
+        border: '1px solid gray',
+        padding: '8px',
+      },
+      editor: {
+        minHeight: '300px',
+      },
+      toolbar: {
+        backgroundColor: '#eee',
+      },
+    },
+  },
+});
+
+export const TemplateContentEditor = ({ fieldName, getProperties, initialText }: Props) => {
+  const { control, setValue, clearErrors } = useFormContext();
+  const {
+    fieldState: { error },
+  } = useController({
+    control,
+    name: fieldName,
+    rules: {
+      required: 'Please, fill content',
+    },
+  });
+
+  const defaultContent = convertToRaw(EditorState.createEmpty().getCurrentContent());
+  const { open: jsonPathPickerOpen, onOpen: onJsonPathPickerOpen, onClose: onJsonPathPickerClose } = useToggle();
+
+  const [content, setContent] = useState(JSON.stringify(defaultContent));
+  const [properties, setProperties] = useState<
+    {
+      properties: PropertiesArrayType;
+      pathPrefix: string;
+      title: string;
+    }[]
+  >([]);
+  const [editorState, setEditorState] = useState<EditorState>(null);
+
+  useEffect(() => {
+    if (initialText) {
+      const contentState = convertFromHTML(initialText);
+      const state =
+        contentState && ContentState.createFromBlockArray(contentState.contentBlocks, contentState.entityMap);
+      setContent(JSON.stringify(convertToRaw(state)));
+    }
+  }, [initialText]);
+
+  const handleChange = (state: EditorState) => {
+    const currentContentState = state.getCurrentContent();
+    const selectionState = state.getSelection();
+    EditorState.push(state, Modifier.replaceText(currentContentState, selectionState, ''), 'remove-range');
+
+    const isEmpty = !state.getCurrentContent().hasText();
+    const content = currentContentState.getPlainText();
+    // stateToHTML(currentContentState);
+
+    setValue(fieldName, !isEmpty ? content : '');
+    clearErrors(fieldName);
+  };
+
+  const handleJsonPathPickerClick = (eState) => {
+    setEditorState(eState);
+    setProperties(getProperties());
+    onJsonPathPickerOpen();
+  };
+
+  const handleJsonPathPaste = (jsonPath: string) => {
+    const currentContentState = editorState.getCurrentContent();
+    const selectionState = editorState.getSelection();
+
+    const state = EditorState.push(
+      editorState,
+      Modifier.insertText(currentContentState, selectionState, jsonPath),
+      'insert-characters'
+    ).getCurrentContent();
+
+    setContent(JSON.stringify(convertToRaw(state)));
+    onJsonPathPickerClose();
+  };
+
+  return (
+    <ThemeProvider theme={defaultTheme}>
+      <MUIRichTextEditor
+        defaultValue={content}
+        label="Start here..."
+        controls={['title', 'bold', 'italic', 'strikethrough', 'numberList', 'bulletList', 'code', 'jsonPathPicker']}
+        onChange={handleChange}
+        customControls={[
+          {
+            name: 'jsonPathPicker',
+            icon: <FunctionsIcon />,
+            type: 'callback',
+            onClick: handleJsonPathPickerClick,
+          },
+        ]}
+        decorators={[
+          {
+            component: ExpressionDecorator,
+            regex: /\$\([^\s]*\)/g,
+          },
+        ]}
+      />
+      <Typography color="secondary">{error?.message}</Typography>
+      {jsonPathPickerOpen && (
+        <JsonPathPicker
+          open={jsonPathPickerOpen}
+          properties={properties}
+          onClose={onJsonPathPickerClose}
+          onPaste={handleJsonPathPaste}
+        />
+      )}
+    </ThemeProvider>
+  );
+};
+
+export default TemplateContentEditor;

package/src/lib/TemplateContent/index.ts

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

package/src/lib/index.ts

@@ -0,0 +1,14 @@
+export * from './Alert';
+export * from './Forms';
+export * from './Loader';
+export * from './Table';
+export * from './Tabs';
+export * from './DemPropertyField';
+export * from './Modals';
+export * from './InfoItem';
+export * from './Definition';
+export * from './Property';
+export * from './Status';
+export * from './JsonView';
+export * from './JsonPathPicker';
+export * from './TemplateContent';

package/src/utils/common.ts

@@ -0,0 +1,68 @@
+export const removeArrayItem = (arr: Array<unknown>, index: number) => {
+  const newArr = [...arr];
+  newArr.splice(index, 1);
+  return newArr;
+};
+
+export const validateJson = (value: string): boolean => {
+  try {
+    JSON.parse(value);
+  } catch (error) {
+    return false;
+  }
+  return true;
+};
+
+export function capitalize(str: string): string {
+  return str.replace(/(^\w)|([-\s]\w)/g, (c) => c.toUpperCase());
+}
+
+export const sortArrayOfObjects = (a: any, b: any, key: string, order = 'asc') => {
+  const valueA = a[key];
+  const valueB = b[key];
+
+  if (valueA < valueB) return order === 'asc' ? -1 : 1;
+  if (valueA > valueB) return order === 'asc' ? 1 : -1;
+  return 0;
+};
+
+export const getJsonStringValue = (value: unknown): string => {
+  if (!value) return '';
+  if (typeof value !== 'string') {
+    try {
+      return JSON.stringify(value, null, '\t');
+    } catch (error) {
+      return 'Failed to stringify JSON';
+    }
+  }
+  return value;
+};
+
+export const safeParseJson = (value: string) => {
+  try {
+    return JSON.parse(value);
+  } catch (error) {
+    return null;
+  }
+};
+
+export const deepParseJson = (value: string) => {
+  try {
+    const parsedValue = JSON.parse(value);
+    Object.keys(parsedValue).forEach((key) => {
+      parsedValue[key] = deepParseJson(parsedValue[key]);
+    });
+    return parsedValue;
+  } catch (error) {
+    return value;
+  }
+};
+
+// export const convertArrayToObjectByKey = (array: { [key: string]: string }[], key: string) => {
+//   const obj = {};
+//   array.forEach((el) => {
+//     obj[el[key]] = { ...el };
+//     delete obj[el[key]][key];
+//   });
+//   return obj;
+// };

package/src/utils/dem.ts

@@ -0,0 +1,78 @@
+import { PropertyType, EntityTypeProperty, PropertiesArrayType } from '../interfaces';
+import { sortArrayOfObjects } from './common';
+import { format } from 'date-fns';
+
+export const isExpression = (value: unknown): boolean => {
+  return typeof value === 'string' ? value.startsWith('$') : false;
+};
+
+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 {
+          propObj.defaultValue = JSON.stringify(propObj.defaultValue);
+        } catch (error) {
+          propObj.defaultValue = '';
+        }
+      }
+
+      if (propObj['uiSettings']) {
+        try {
+          propObj.uiSettings = JSON.stringify(propObj.uiSettings);
+        } 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;
+  }, {});
+};

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<NodeJS.Timeout>();
+
+  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.ts

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