@dartech/arsenal-ui 0.0.1 → 0.0.2

package/src/lib/Table/TablePagination.tsx

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

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

package/src/lib/Table/styles.ts

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

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

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

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

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

@@ -1,42 +0,0 @@
-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/TemplateContent/ExpressionDecorator.tsx

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

package/src/lib/TemplateContent/TemplateContentEditor.tsx

@@ -1,144 +0,0 @@
-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/utils/common.ts

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

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

@@ -1,41 +0,0 @@
-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 };
-};
-