@dartech/arsenal-ui 0.0.1

package/src/lib/Property/UpsertProperty/PropertyAdditionalFields/StringPropertyFields.tsx

@@ -0,0 +1,98 @@
+import Grid from '@material-ui/core/Grid';
+import Chip from '@material-ui/core/Chip';
+import Box from '@material-ui/core/Box';
+import Typography from '@material-ui/core/Typography';
+import TextField from '@material-ui/core/TextField';
+import IconButton from '@material-ui/core/IconButton';
+import AddIcon from '@material-ui/icons/Add';
+
+import { useFormContext, useWatch } from 'react-hook-form';
+import { removeArrayItem } from '../../../../utils';
+import { useCallback, useMemo, useState } from 'react';
+
+type Props = {
+  propertyFieldName: string;
+};
+
+const StringPropertyFields = ({ propertyFieldName }: Props) => {
+  const fieldName = useMemo(() => `${propertyFieldName}.restrictedValues`, [propertyFieldName]);
+
+  const { control, setValue, getValues } = useFormContext();
+  const restrictedValues = useWatch({
+    control,
+    name: fieldName,
+    defaultValue: getValues(`${propertyFieldName}.restrictedValues`) || [],
+  });
+
+  const [inputValue, setInputValue] = useState('');
+  const [error, setError] = useState('');
+
+  const handleDelete = useCallback(
+    (index) => {
+      setValue(fieldName, removeArrayItem(restrictedValues, index));
+    },
+    [restrictedValues, fieldName, setValue]
+  );
+
+  const handleAddValue = () => {
+    if (inputValue) {
+      setValue(fieldName, [...restrictedValues, inputValue]);
+      setInputValue('');
+    }
+  };
+
+  const handleInputChange = (e) => {
+    const { value } = e.target;
+    setInputValue(value);
+
+    if (restrictedValues.includes(value)) {
+      setError('This value already exists');
+    } else {
+      setError('');
+    }
+  };
+
+  const handleKeyDown = (e) => {
+    if (e.key === 'Enter') {
+      handleAddValue();
+    }
+  };
+
+  return (
+    <>
+      <Grid item>
+        <Typography variant="h6">Restricted Values</Typography>
+      </Grid>
+      <Grid item>
+        <Box display="flex" gridGap={8} flexWrap="wrap">
+          {restrictedValues?.map((value, index) => (
+            <Chip key={index} variant="outlined" label={value} onDelete={() => handleDelete(index)} />
+          ))}
+        </Box>
+      </Grid>
+      <Grid item>
+        <TextField
+          fullWidth
+          variant="outlined"
+          size="small"
+          label="Add restricted value"
+          value={inputValue}
+          onChange={handleInputChange}
+          error={!!error}
+          helperText={error}
+          name="restrictedValues"
+          inputProps={{ onKeyDown: handleKeyDown }}
+          InputProps={{
+            endAdornment: (
+              <IconButton size="small" onClick={handleAddValue} disabled={!!error}>
+                <AddIcon />
+              </IconButton>
+            ),
+          }}
+        />
+      </Grid>
+    </>
+  );
+};
+
+export default StringPropertyFields;

package/src/lib/Property/UpsertProperty/PropertyAdditionalFields/index.ts

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

package/src/lib/Property/UpsertProperty/index.ts

@@ -0,0 +1,2 @@
+export * from './CreatePropertiesList';
+export * from './CreatePropertyFormFields';

package/src/lib/Property/UpsertProperty/useCustomFields.ts

@@ -0,0 +1,22 @@
+import { useMemo } from 'react';
+import { CustomPropertyFieldProps } from '../../../interfaces';
+
+const useCustomFields = (customPropertyFields: CustomPropertyFieldProps[]) => {
+  const customCheckboxes = useMemo(() => {
+    if (customPropertyFields.length) {
+      return customPropertyFields.filter((field) => field.type === 'checkbox');
+    }
+    return [];
+  }, [customPropertyFields]);
+
+  const customFields = useMemo(() => {
+    if (customPropertyFields.length) {
+      return customPropertyFields.filter((field) => field.type !== 'checkbox');
+    }
+    return [];
+  }, [customPropertyFields]);
+
+  return { customCheckboxes, customFields };
+};
+
+export default useCustomFields;

package/src/lib/Property/ViewPropertiesList/ViewPropertiesList.tsx

@@ -0,0 +1,50 @@
+import Box from '@material-ui/core/Box';
+import Typography from '@material-ui/core/Typography';
+import { ViewProperty } from '../ViewProperty';
+
+import { useMemo } from 'react';
+import { propertiesObjectToArray } from '../../../utils';
+import {
+  EntityDefinitionPropertyArrayType,
+  EntityDefinitionPropertyObjectType,
+  GPBPropertiesArrayType,
+  GPBPropertiesObjectType,
+  PropertiesArrayType,
+  PropertiesObjectType,
+} from '../../../interfaces';
+
+type Props = {
+  properties:
+    | PropertiesObjectType
+    | PropertiesArrayType
+    | GPBPropertiesArrayType
+    | GPBPropertiesObjectType
+    | EntityDefinitionPropertyArrayType
+    | EntityDefinitionPropertyObjectType;
+  expandAll?: boolean;
+};
+
+export const ViewPropertiesList = ({ properties, expandAll = true }: Props) => {
+  const propertiesList = useMemo(() => {
+    if (Array.isArray(properties)) {
+      return properties;
+    } else if (properties) {
+      return propertiesObjectToArray(properties);
+    }
+    return [];
+  }, [properties]);
+
+  return (
+    <Box display="flex" flexDirection="column" gridGap={8}>
+      {propertiesList.length ? (
+        propertiesList.map((property) => (
+          <ViewProperty key={property.key} property={property} defaultExpanded={expandAll} />
+        ))
+      ) : (
+        <Typography>No properties</Typography>
+      )}
+    </Box>
+  );
+};
+
+export default ViewPropertiesList;

package/src/lib/Property/ViewPropertiesList/index.ts

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

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

@@ -0,0 +1,41 @@
+import TreeView from '@material-ui/lab/TreeView';
+import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
+import ChevronRightIcon from '@material-ui/icons/ChevronRight';
+import PropertyItem from './PropertyItem';
+
+import { PropertiesArrayType, PropertyType } from '../../../interfaces';
+import { useMemo } from 'react';
+
+type Props = {
+  properties: PropertiesArrayType;
+  showName?: boolean;
+  showType?: boolean;
+};
+
+const EntityPropertiesShortView = ({ properties = [], showName = false, showType = false }: Props) => {
+  const defaultExpanded = useMemo(() => {
+    const findExpandKeys = (props: PropertiesArrayType) => {
+      return props.reduce((acc, property) => {
+        if (property.propertyType === PropertyType.ENTITY) {
+          return [...acc, property.key, ...findExpandKeys(property.properties as PropertiesArrayType)];
+        }
+        return acc;
+      }, []);
+    };
+    return findExpandKeys(properties);
+  }, [properties]);
+
+  return (
+    <TreeView
+      defaultCollapseIcon={<ExpandMoreIcon />}
+      defaultExpandIcon={<ChevronRightIcon />}
+      defaultExpanded={defaultExpanded}
+    >
+      {properties.map((property) => (
+        <PropertyItem key={property.key} property={property} showName={showName} showType={showType} />
+      ))}
+    </TreeView>
+  );
+};
+
+export default EntityPropertiesShortView;

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

@@ -0,0 +1,48 @@
+import Box from '@material-ui/core/Box';
+import Stepper from '@material-ui/core/Stepper';
+import Step from '@material-ui/core/Step';
+import StepLabel from '@material-ui/core/StepLabel';
+import StepContent from '@material-ui/core/StepContent';
+import Typography from '@material-ui/core/Typography';
+import ViewProperty from './ViewProperty';
+
+import { memo, useMemo } from 'react';
+import { PropertiesArrayType, PropertyType } from '../../../interfaces';
+
+type Props = {
+  properties: PropertiesArrayType;
+  parentNames?: string[];
+};
+
+const EntityPropertiesView = ({ properties, parentNames = [] }: Props) => {
+  const hasProperties = useMemo(() => {
+    let hasProps = false;
+    properties.every((property) => {
+      if (property.propertyType === PropertyType.ENTITY) {
+        hasProps = true;
+        return false;
+      }
+      return true;
+    });
+    return hasProps;
+  }, [properties]);
+
+  return (
+    <Box mt={4}>
+      <Typography variant="h6">Properties</Typography>
+      <Stepper orientation="vertical" style={{ paddingLeft: '4px' }}>
+        {properties.map((property) => (
+          <Step expanded key={property.key}>
+            <StepLabel StepIconProps={{ icon: '', completed: false, active: true }} />
+            <StepContent>
+              <ViewProperty property={property} parentNames={[...parentNames]} defaultExpanded={false} />
+            </StepContent>
+          </Step>
+        ))}
+        {hasProperties && <Step />}
+      </Stepper>
+    </Box>
+  );
+};
+
+export default memo(EntityPropertiesView);

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

@@ -0,0 +1,139 @@
+import Box from '@material-ui/core/Box';
+import Table from '@material-ui/core/Table';
+import TableBody from '@material-ui/core/TableBody';
+import TableRow from '@material-ui/core/TableRow';
+import TableCell from '@material-ui/core/TableCell';
+import Typography from '@material-ui/core/Typography';
+import Chip from '@material-ui/core/Chip';
+import CheckCircleIcon from '@material-ui/icons/CheckCircle';
+
+import { useMemo } from 'react';
+import { PropertyType, PropertyUnion } from '../../../interfaces';
+import { JsonView } from '../../JsonView';
+
+type Props = {
+  property: PropertyUnion;
+};
+
+type ValueDisplayProps = {
+  value: unknown;
+  type: PropertyType;
+};
+
+const labels = {
+  name: 'Name',
+  key: 'Key',
+  propertyType: 'Property Type',
+  defaultValue: 'Default Value',
+  defaultValues: 'Default Values',
+  sortOrder: 'Sort Order',
+  isRequired: 'Required',
+  isMultiple: 'Multiple',
+  isEnabled: 'Enabled',
+  isViewableInList: 'Is Viewable In List',
+  precisionScale: 'Precision Scale',
+  roundingMode: 'Rounding Mode',
+  format: 'Format',
+  definitionCode: 'Definition Code',
+  definitionVersion: 'Definition Version',
+  labelPropertyCode: 'Label Property Code',
+  valuePropertyCode: 'Value Property Code',
+  restrictedValues: 'Restricted Values',
+  value: 'Value',
+  values: 'Values',
+  uiSettings: 'UI Settings',
+};
+
+const ValueDisplay = ({ value, type }: ValueDisplayProps) => {
+  if ((type === PropertyType.JSON || type === PropertyType.ENTITY) && value) {
+    return <JsonView value={value} />;
+  } else {
+    return (
+      <Typography variant="subtitle1" display="inline" style={{ wordBreak: 'break-word' }}>
+        {value === null ? 'null' : value.toString()}
+      </Typography>
+    );
+  }
+};
+
+const formatDiplayValue = (value: unknown, key: string, type: PropertyType) => {
+  switch (key) {
+    case 'isRequired':
+    case 'isMultiple':
+    case 'isEnabled':
+    case 'isViewableInList':
+      return value ? <CheckCircleIcon color="primary" fontSize="small" /> : null;
+    case 'restrictedValues':
+      return value ? (
+        <Box display="flex" flexWrap="wrap" gridGap={4}>
+          {(value as string[]).map((restrictedValue) => (
+            <Chip
+              key={restrictedValue}
+              label={restrictedValue}
+              style={{ wordBreak: 'break-word', maxWidth: '500px' }}
+            />
+          ))}
+        </Box>
+      ) : null;
+    case 'defaultValue':
+    case 'value':
+      return <ValueDisplay value={value} type={type} />;
+    case 'values':
+    case 'defaultValues':
+      if (type === PropertyType.ENTITY || type === PropertyType.JSON) {
+        return <JsonView value={value} />;
+      } else {
+        return (
+          <div>
+            {(value as unknown[]).map((v, index) => (
+              <div key={index}>
+                <ValueDisplay value={v} type={type} />
+              </div>
+            ))}
+          </div>
+        );
+      }
+    case 'uiSettings':
+      return value ? <JsonView value={value} /> : null;
+    default:
+      return (
+        <Typography variant="subtitle1" display="inline" style={{ wordBreak: 'break-word' }}>
+          {value}
+        </Typography>
+      );
+  }
+};
+
+const PropertyDataTable = ({ property }: Props) => {
+  const propertyData = useMemo(() => {
+    if (property) {
+      if (property.isMultiple) {
+        delete property.defaultValue;
+        delete property['value'];
+      } else {
+        delete property.defaultValues;
+        delete property['values'];
+      }
+    }
+    return property;
+  }, [property]);
+
+  return (
+    <Table size="small">
+      <TableBody>
+        {Object.keys(labels).map((key) =>
+          key in propertyData ? (
+            <TableRow key={key}>
+              <TableCell width="30%">
+                <Typography>{labels[key]}</Typography>
+              </TableCell>
+              <TableCell>{formatDiplayValue(propertyData[key], key, propertyData.propertyType)}</TableCell>
+            </TableRow>
+          ) : null
+        )}
+      </TableBody>
+    </Table>
+  );
+};
+
+export default PropertyDataTable;

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

@@ -0,0 +1,46 @@
+import TreeItem from '@material-ui/lab/TreeItem';
+
+import { useMemo } from 'react';
+import { PropertiesArrayType, PropertyType, PropertyUnion } from '../../../interfaces';
+
+type PropertyItemProps = {
+  property: PropertyUnion;
+  showName: boolean;
+  showType: boolean;
+};
+
+const PropertyItem = ({ property, showName, showType }: PropertyItemProps) => {
+  const label = useMemo(() => {
+    let labelText = '';
+
+    if (property) {
+      labelText += `<b>${property.key}</b>`;
+    }
+
+    if (showName) {
+      labelText += ` - ${property.name}`;
+    }
+
+    if (showType) {
+      const type =
+        typeof property.propertyType === 'string'
+          ? property.propertyType
+          : (property.propertyType as { value: string }).value;
+      labelText += ` - ${type}${property.isMultiple ? '[]' : ''}`;
+    }
+
+    return labelText;
+  }, [property.key, property.name, property.propertyType, property.isMultiple, showName, showType]);
+
+  return (
+    <TreeItem nodeId={property.key} label={<div dangerouslySetInnerHTML={{ __html: label }} />}>
+      {property.propertyType === PropertyType.ENTITY
+        ? (property.properties as PropertiesArrayType).map((prop) => (
+            <PropertyItem key={prop.key} property={prop} showName={showName} showType={showType} />
+          ))
+        : null}
+    </TreeItem>
+  );
+};
+
+export default PropertyItem;

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

@@ -0,0 +1,52 @@
+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/Property/ViewProperty/index.ts

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

package/src/lib/Property/index.ts

@@ -0,0 +1,4 @@
+export * from './UpsertProperty';
+export * from './PropertyValueField';
+export * from './ViewProperty';
+export * from './ViewPropertiesList';

package/src/lib/Status/Status.tsx

@@ -0,0 +1,15 @@
+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/index.ts

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

package/src/lib/Status/styles.ts

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

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

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