@dartech/arsenal-ui 0.0.1 → 0.0.3

package/src/lib/Property/ViewProperty/ViewProperty.tsx

@@ -1,52 +0,0 @@
-import Box from '@material-ui/core/Box';
-import Typography from '@material-ui/core/Typography';
-import Accordion from '@material-ui/core/Accordion';
-import AccordionSummary from '@material-ui/core/AccordionSummary';
-import AccordionDetails from '@material-ui/core/AccordionDetails';
-import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
-import PropertyDataTable from './PropertyDataTable';
-import EntityPropertiesView from './EntityPropertiesView';
-
-import { useEffect, useState } from 'react';
-import { propertiesObjectToArray } from '../../../utils';
-import { PropertiesObjectType, PropertyType, PropertyUnion } from '../../../interfaces';
-
-type Props = {
-  property: PropertyUnion;
-  parentNames?: string[];
-  defaultExpanded?: boolean;
-};
-
-export const ViewProperty = ({ property, parentNames = [], defaultExpanded = true }: Props) => {
-  const [expanded, setExpanded] = useState(true);
-
-  useEffect(() => {
-    setExpanded(defaultExpanded);
-  }, [defaultExpanded]);
-
-  return (
-    <Accordion
-      elevation={3}
-      style={{ backgroundColor: parentNames.length % 2 === 1 ? '#f1f1f1' : '#fff' }}
-      expanded={expanded}
-      onChange={() => setExpanded((prevState) => !prevState)}
-    >
-      <AccordionSummary expandIcon={<ExpandMoreIcon />}>
-        <Typography style={{ wordBreak: 'break-word', fontWeight: '600' }}>{property.name}</Typography>
-      </AccordionSummary>
-      <AccordionDetails>
-        <Box width="100%">
-          <PropertyDataTable property={property} />
-          {property.propertyType === PropertyType.ENTITY && (
-            <EntityPropertiesView
-              properties={propertiesObjectToArray(property.properties as PropertiesObjectType)}
-              parentNames={[...parentNames, property.name]}
-            />
-          )}
-        </Box>
-      </AccordionDetails>
-    </Accordion>
-  );
-};
-
-export default ViewProperty;

package/src/lib/Status/Status.tsx

@@ -1,15 +0,0 @@
-import useStyles from './styles';
-import cn from 'classnames';
-
-type Props = {
-  text: string;
-  status?: 'default' | 'success';
-};
-
-export const Status = ({ text, status = 'default' }: Props) => {
-  const classes = useStyles();
-
-  return <div className={cn(classes.root, { [status]: true })}>{text}</div>;
-};
-
-export default Status;

package/src/lib/Status/styles.ts

@@ -1,14 +0,0 @@
-import { makeStyles } from '@material-ui/core';
-
-export default makeStyles({
-  root: {
-    backgroundColor: '#eee',
-    fontSize: '14px',
-    padding: '0 4px',
-    borderRadius: '10px',
-
-    '&.success': {
-      backgroundColor: '#a9dfa9',
-    },
-  },
-});

package/src/lib/Table/Table.tsx

@@ -1,116 +0,0 @@
-import React from 'react';
-import TablePagination from './TablePagination';
-import TableColumnMenu from './TableColumnMenu';
-
-import useTableQueryPagination from './useTableQueryPagination';
-import useTableQuerySorting from './useTableQuerySorting';
-import usePagination from './usePagination';
-import { DataGrid, GridCellParams, GridColumns, GridFeatureMode, GridRowsProp } from '@mui/x-data-grid';
-import useStyles from './styles';
-import Box from '@material-ui/core/Box';
-
-/**
- * This interface is referencing the [[Table]] component props.
- * @category Common UI components
- */
-export interface TableProps {
-  /**
-   * Data loading state
-   */
-  loading?: boolean;
-  /**
-   * Table columns
-   */
-  columns: GridColumns;
-  /**
-   * Table rows
-   */
-  rows: GridRowsProp;
-  /**
-   * Rows count to display
-   */
-  rowCount: number;
-  disableMargin?: boolean;
-  /**
-   * Data display mode.
-   * Values: `client` | `server`;
-   * Default: `server`
-   */
-  mode?: GridFeatureMode;
-  /**
-   * Page size. Default `10`
-   */
-  initialPageSize?: number;
-  /**
-   * On cell click handler function
-   * ```typescript
-   * (params: GridCellParams, event: React.MouseEvent) => void;
-   * ```
-   */
-  onCellClick?: (params: GridCellParams, event: React.MouseEvent) => void;
-  pagination?: boolean;
-}
-
-/**
- * Main data display component. MUI DataGrid used
- * @category Common UI components
- */
-export const Table = ({
-  columns,
-  rows,
-  rowCount,
-  loading,
-  disableMargin,
-  mode = 'server',
-  initialPageSize = 10,
-  pagination = true,
-  onCellClick,
-}: TableProps) => {
-  const classes = useStyles();
-
-  const { page, size, onPageChange, onSizeChange } = useTableQueryPagination({ mode });
-  const { onColumnHeaderClick, getSortedColumns } = useTableQuerySorting();
-
-  const { pageSize, handlePageSizeChange } = usePagination(initialPageSize);
-
-  const tableProps = {
-    sortingMode: mode,
-    paginationMode: mode,
-    pageSize: mode === 'server' ? size : pagination ? pageSize : rowCount,
-    onPageSizeChange: mode === 'server' ? onSizeChange : handlePageSizeChange,
-    components: {
-      Pagination: TablePagination,
-    },
-  };
-
-  if (mode === 'server') {
-    tableProps['sortModel'] = [];
-    tableProps['onColumnHeaderClick'] = onColumnHeaderClick;
-    tableProps['page'] = page;
-    tableProps['onPageChange'] = onPageChange;
-    tableProps.components['ColumnMenu'] = TableColumnMenu;
-  }
-
-  return (
-    <Box mt={disableMargin ? 0 : 2}>
-      <DataGrid
-        autoHeight
-        hideFooterPagination={!pagination}
-        hideFooter={!pagination}
-        disableSelectionOnClick
-        showColumnRightBorder
-        showCellRightBorder
-        className={classes.root}
-        loading={loading}
-        rows={rows}
-        columns={getSortedColumns(columns)}
-        rowCount={rowCount}
-        rowsPerPageOptions={[10, 20, 50, 100]}
-        onCellClick={onCellClick}
-        {...tableProps}
-      />
-    </Box>
-  );
-};
-
-export default Table;

package/src/lib/Table/TableColumnMenu.tsx

@@ -1,12 +0,0 @@
-import React from 'react';
-import { GridColumnMenuContainer, GridFilterMenuItem } from '@mui/x-data-grid';
-
-const TableColumnMenu = ({ hideMenu, currentColumn, onUnsort, ...rest }: any) => {
-  return (
-    <GridColumnMenuContainer hideMenu={hideMenu} currentColumn={currentColumn} {...rest}>
-      <GridFilterMenuItem onClick={hideMenu} column={currentColumn} />
-    </GridColumnMenuContainer>
-  );
-};
-
-export default TableColumnMenu;

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;