@dartech/arsenal-ui 0.0.1 → 0.0.3

package/src/lib/JsonPathPicker/PropertyStep.tsx

@@ -1,74 +0,0 @@
-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 { EntityTypeProperty, PropertiesArrayType, PropertyType } from '../../interfaces';
-import { makeStyles } from '@material-ui/core/styles';
-
-type Props = {
-  properties: PropertiesArrayType;
-  parentKey?: string;
-  activePath: string;
-  prefix?: string;
-  onClick: (path: string) => void;
-};
-
-const useStyles = makeStyles(() => ({
-  propertyStepLabel: {
-    '&:hover': {
-      fontWeight: '600',
-      cursor: 'pointer',
-    },
-  },
-}));
-
-const PropertyStep = ({ properties, parentKey = '', activePath = '', prefix = '', onClick }: Props) => {
-  const classes = useStyles();
-
-  const handleClick = (path: string) => {
-    if (prefix) {
-      onClick(`${prefix}.${path}`);
-    } else {
-      onClick(path);
-    }
-  };
-
-  return (
-    <Stepper orientation="vertical" onClick={(event) => event.stopPropagation()}>
-      {properties.map((property) => {
-        const fullPropertyPath = parentKey ? `${parentKey}.${property.key}` : property.key;
-        let propertyType;
-        if (typeof property.propertyType === 'string') {
-          propertyType = property.propertyType;
-        } else {
-          propertyType = property.propertyType['value'];
-        }
-        return (
-          <Step expanded key={property.key} onClick={() => handleClick(fullPropertyPath)}>
-            <StepLabel StepIconProps={{ icon: '', completed: false, active: activePath === fullPropertyPath }}>
-              <div className={classes.propertyStepLabel}>
-                {property.name} - {property.key} - {propertyType}
-              </div>
-            </StepLabel>
-            <StepContent>
-              <div>
-                {propertyType === PropertyType.ENTITY && (
-                  <PropertyStep
-                    key={property.key}
-                    onClick={onClick}
-                    activePath={activePath}
-                    properties={(property as EntityTypeProperty).properties as PropertiesArrayType}
-                    parentKey={fullPropertyPath}
-                  />
-                )}
-              </div>
-            </StepContent>
-          </Step>
-        );
-      })}
-    </Stepper>
-  );
-};
-
-export default PropertyStep;

package/src/lib/JsonView/JsonView.tsx

@@ -1,43 +0,0 @@
-import { useMemo } from 'react';
-import AceEditor from 'react-ace';
-import 'ace-builds/src-noconflict/ace';
-import 'ace-builds/src-noconflict/mode-json';
-
-type Props = {
-  value: unknown;
-  height?: string;
-};
-
-export const JsonView = ({ value, height = '200px' }: Props) => {
-  const stringValue = useMemo(() => {
-    if (typeof value === 'string') {
-      return value;
-    } else if (typeof value === 'object') {
-      try {
-        return JSON.stringify(value, null, '\t');
-      } catch (error) {
-        return 'Failed to parse JSON';
-      }
-    }
-    return null;
-  }, [value]);
-
-  return (
-    <AceEditor
-      readOnly
-      value={stringValue}
-      mode="json"
-      width="100%"
-      height={height}
-      fontSize="16"
-      setOptions={{
-        enableSnippets: false,
-        copyWithEmptySelection: true,
-        showLineNumbers: true,
-        tabSize: 2,
-      }}
-    />
-  );
-};
-
-export default JsonView;

package/src/lib/Loader/Loader.tsx

@@ -1,41 +0,0 @@
-import Box from "@material-ui/core/Box";
-import CircularProgress from "@material-ui/core/CircularProgress";
-
-/**
- * This interface is referencing the [[Loader]] component props.
- * @category Common UI components
- */
-export interface LoaderProps {
-  /**
-   * Background transparency flag. Default: `rgba(255, 255, 255, .3)`
-   */
-  transparent?: boolean;
-  /**
-   * CSS `position` property. Default: `absolute`
-   */
-  position?: string;
-}
-/**
- * Loader screen component. Used in the data loading process
- * @category Common UI components
- */
-export const Loader = ({ transparent, position }: LoaderProps) => {
-  return (
-    <Box
-      position={position ?? 'absolute'}
-      top={0}
-      left={0}
-      width="100%"
-      height="100%"
-      display="flex"
-      alignItems="center"
-      justifyContent="center"
-      bgcolor={transparent ? 'none' : 'rgba(255, 255, 255, .3)'}
-      zIndex={10}
-    >
-      <CircularProgress />
-    </Box>
-  )
-}
-
-export default Loader;

package/src/lib/Modals/JsonModalView.tsx

@@ -1,52 +0,0 @@
-import React from 'react';
-import AceEditor from 'react-ace';
-import 'ace-builds/src-noconflict/ace';
-import 'ace-builds/src-noconflict/mode-json';
-import Dialog from '@material-ui/core/Dialog';
-import DialogContent from '@material-ui/core/DialogContent';
-import DialogActions from '@material-ui/core/DialogActions';
-import Button from '@material-ui/core/Button';
-import { CopyButton } from '../Forms';
-
-type Props = {
-  open: boolean;
-  value: string;
-  onClose: () => void;
-};
-
-export const JsonModalView: React.FC<Props> = ({ open, onClose, value }) => {
-  return (
-    <Dialog
-      disableEscapeKeyDown
-      open={open}
-      onClose={onClose}
-      fullWidth
-      maxWidth="md"
-      style={{ width: 800, left: '30%' }}
-    >
-      <DialogContent>
-        <AceEditor
-          readOnly
-          value={value}
-          mode="json"
-          width="100%"
-          fontSize="16"
-          setOptions={{
-            enableSnippets: false,
-            copyWithEmptySelection: true,
-            showLineNumbers: true,
-            tabSize: 2,
-          }}
-        />
-      </DialogContent>
-      <DialogActions>
-        <CopyButton copyText={value} />
-        <Button onClick={onClose} variant="contained" color="secondary">
-          Close
-        </Button>
-      </DialogActions>
-    </Dialog>
-  );
-};
-
-export default JsonModalView;

package/src/lib/Property/PropertyValueField/BooleanValueField.tsx

@@ -1,41 +0,0 @@
-import Switch from '@material-ui/core/Switch';
-import Typography from '@material-ui/core/Typography';
-import FormControlLabel from '@material-ui/core/FormControlLabel';
-import { Controller, useFormContext } from 'react-hook-form';
-
-type Props = {
-  name: string;
-  label?: string;
-};
-
-const BooleanValueField = ({ name, label = '' }: Props) => {
-  const { control } = useFormContext();
-
-  return (
-    <>
-      <Typography>{label}</Typography>
-      <Controller
-        control={control}
-        name={name}
-        render={({ field }) => (
-          <FormControlLabel
-            label={(!!field.value + '').toUpperCase()}
-            control={
-              <Switch
-                color="primary"
-                size="small"
-                onChange={(e) => {
-                  const { checked } = e.target;
-                  field.onChange(checked);
-                }}
-                checked={!!field.value + '' === 'true'}
-              />
-            }
-          />
-        )}
-      />
-    </>
-  );
-};
-
-export default BooleanValueField;

package/src/lib/Property/PropertyValueField/DateTimeValueField.tsx

@@ -1,59 +0,0 @@
-import TextField from '@mui/material/TextField';
-import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';
-
-import { format as dateFnsFormat, isValid } from 'date-fns';
-import { Controller, useFormContext } from 'react-hook-form';
-import { DATE_TIME_DEFAULT_FORMAT } from '../../../interfaces';
-
-type Props = {
-  name: string;
-  label?: string;
-  required?: boolean;
-  format?: string;
-};
-
-const DateTimeValueField = ({ name, label, required = false, format = DATE_TIME_DEFAULT_FORMAT }: Props) => {
-  const { control, setError, clearErrors } = useFormContext();
-
-  const onError = (err) => {
-    if (err) {
-      setError(name, { type: 'custom', message: 'Incorrect date format' });
-    } else {
-      clearErrors(name);
-    }
-  };
-
-  return (
-    <Controller
-      control={control}
-      name={name}
-      rules={{ required: required && 'Required field' }}
-      render={({ field: { ref, value, onChange }, fieldState: { error } }) => (
-        <DateTimePicker
-          clearable
-          ampm={false}
-          inputRef={ref}
-          label={label}
-          value={value || null}
-          inputFormat={format}
-          onError={onError}
-          onChange={(date) => {
-            onChange(isValid(date) ? dateFnsFormat(date, format) : date);
-          }}
-          renderInput={(props) => (
-            <TextField
-              {...props}
-              fullWidth
-              size="small"
-              variant="outlined"
-              error={!!error}
-              helperText={error?.message}
-            />
-          )}
-        />
-      )}
-    />
-  );
-};
-
-export default DateTimeValueField;

package/src/lib/Property/PropertyValueField/DateValueField.tsx

@@ -1,59 +0,0 @@
-import TextField from '@mui/material/TextField';
-import { DatePicker } from '@mui/x-date-pickers/DatePicker';
-
-import { format as dateFnsFormat, isValid } from 'date-fns';
-import { Controller, useFormContext } from 'react-hook-form';
-import { DATE_DEFAULT_FORMAT } from '../../../interfaces';
-
-type Props = {
-  name: string;
-  format: string;
-  label?: string;
-  required?: boolean;
-};
-
-const DateValueField = ({ name, label = '', required = false, format = DATE_DEFAULT_FORMAT }: Props) => {
-  const { control, setError, clearErrors } = useFormContext();
-
-  const onError = (err) => {
-    if (err) {
-      setError(name, { type: 'custom', message: 'Incorrect date format' });
-    } else {
-      clearErrors(name);
-    }
-  };
-
-  return (
-    <Controller
-      control={control}
-      name={name}
-      rules={{ required: required && 'Required field' }}
-      render={({ field: { ref, value, onChange }, fieldState: { error } }) => (
-        <DatePicker
-          clearable
-          mask=""
-          label={label}
-          inputRef={ref}
-          inputFormat={format}
-          value={value || null}
-          onError={onError}
-          onChange={(date) => {
-            onChange(isValid(date) ? dateFnsFormat(date, format) : date);
-          }}
-          renderInput={(props) => (
-            <TextField
-              {...props}
-              fullWidth
-              size="small"
-              variant="outlined"
-              error={!!error}
-              helperText={error?.message}
-            />
-          )}
-        />
-      )}
-    />
-  );
-};
-
-export default DateValueField;

package/src/lib/Property/PropertyValueField/EntityValueField.tsx

@@ -1,33 +0,0 @@
-import Step from '@material-ui/core/Step';
-import StepContent from '@material-ui/core/StepContent';
-import StepLabel from '@material-ui/core/StepLabel';
-import Stepper from '@material-ui/core/Stepper';
-import PropertyValue from './PropertyValue';
-
-import { PropertiesArrayType } from '../../../interfaces';
-
-type Props = {
-  label?: string;
-  name?: string;
-  properties: PropertiesArrayType;
-};
-
-const EntityValueField = ({ name, properties }: Props) => {
-  return properties && properties.length ? (
-    <Stepper nonLinear orientation="vertical">
-      {properties.map((property, index) => (
-        <Step expanded key={index}>
-          <StepLabel StepIconProps={{ icon: '', completed: false, active: true }}>
-            {property.name} - {property.key}
-          </StepLabel>
-          <StepContent>
-            <PropertyValue name={`${name}.${property.key}`} property={property} label={property.name} />
-          </StepContent>
-        </Step>
-      ))}
-      <Step />
-    </Stepper>
-  ) : null;
-};
-
-export default EntityValueField;

package/src/lib/Property/PropertyValueField/JsonValueField.tsx

@@ -1,64 +0,0 @@
-import AceEditor from 'react-ace';
-import FormHelperText from '@material-ui/core/FormHelperText';
-import Typography from '@material-ui/core/Typography';
-import { Controller, useFormContext } from 'react-hook-form';
-
-import 'ace-builds/src-noconflict/ace';
-import 'ace-builds/src-noconflict/mode-json';
-
-type Props = {
-  name: string;
-  label?: string;
-  required?: boolean;
-};
-
-const JsonValueField = ({ name, label, required = false }: Props) => {
-  const { control, setError, clearErrors } = useFormContext();
-
-  return (
-    <>
-      <Typography>{label}</Typography>
-      <Controller
-        control={control}
-        name={name}
-        rules={{
-          required: required && 'Required field',
-        }}
-        render={({ field: { value, onChange }, fieldState: { error } }) => (
-          <>
-            <AceEditor
-              value={value && typeof value !== 'string' ? JSON.stringify(value, null, 2) : value}
-              onChange={(value) => {
-                if (!value) {
-                  onChange('');
-                  return null;
-                }
-                try {
-                  clearErrors(name);
-                  const val = JSON.parse(value);
-                  onChange(Array.isArray(val) ? '' : val);
-                } catch (e) {
-                  setError(name, { message: 'Invalid JSON' });
-                  onChange(value);
-                }
-              }}
-              mode="json"
-              width="100%"
-              height="200px"
-              fontSize="16"
-              setOptions={{
-                enableSnippets: false,
-                copyWithEmptySelection: true,
-                showLineNumbers: true,
-                tabSize: 2,
-              }}
-            />
-            {error && <FormHelperText error>{error.message}</FormHelperText>}
-          </>
-        )}
-      />
-    </>
-  );
-};
-
-export default JsonValueField;

package/src/lib/Property/PropertyValueField/PropertyValue.tsx

@@ -1,97 +0,0 @@
-import Box from '@material-ui/core/Box';
-import Grid from '@material-ui/core/Grid';
-import Button from '@material-ui/core/Button';
-import Typography from '@material-ui/core/Typography';
-import IconButton from '@material-ui/core/IconButton';
-import CloseIcon from '@material-ui/icons/Close';
-import ValueComponent, { ValueComponentProps } from './ValueComponent';
-
-import { useCallback, useMemo } from 'react';
-import { useFormContext, useWatch } from 'react-hook-form';
-
-import { PropertyUnion } from '../../../interfaces';
-import { removeArrayItem } from '../../../utils';
-
-type Props = {
-  property: PropertyUnion;
-  name: string;
-  label?: string;
-  required?: boolean | 'byProperty';
-};
-
-const PropertyValue = ({ property, name, label, required = 'byProperty' }: Props) => {
-  const { control, setValue } = useFormContext();
-  const values = useWatch({ control, name });
-
-  const handleDeleteValue = useCallback(
-    (index) => {
-      setValue(name, removeArrayItem(values, index));
-    },
-    [name, values]
-  );
-
-  const handleAddValue = useCallback(() => {
-    if (values && Array.isArray(values)) {
-      setValue(`${name}.${values.length}`, null);
-    } else {
-      setValue(name, [null]);
-    }
-  }, [name, values]);
-
-  const valueComponentProps: ValueComponentProps = useMemo(
-    () => ({
-      control,
-      name,
-      label,
-      required: required === 'byProperty' ? property.isRequired : required,
-      propertyType: typeof property.propertyType === 'string' ? property.propertyType : property.propertyType['value'],
-      format: property['format'],
-      restrictedValues: property['restrictedValues'],
-      properties: property['properties'],
-    }),
-    [
-      name,
-      label,
-      required,
-      property.propertyType,
-      property['format'],
-      property['restrictedValues'],
-      property['properties'],
-    ]
-  );
-
-  return property.isMultiple ? (
-    <Grid item container spacing={2} direction="column">
-        <Grid item>
-          <Typography variant="h6">{label}</Typography>
-        </Grid>
-        {values && Array.isArray(values) ? (
-          <>
-            {values.map((_, index) => (
-              <Grid item key={index}>
-                <Box display="flex" alignItems="center">
-                  <ValueComponent
-                    {...valueComponentProps}
-                    label={`${property.name} (${index})`}
-                    name={`${name}.${index}`}
-                  />
-                  <IconButton size="small" onClick={() => handleDeleteValue(index)}>
-                    <CloseIcon fontSize="small" />
-                  </IconButton>
-                </Box>
-              </Grid>
-            ))}
-          </>
-        ) : null}
-        <Grid item>
-          <Button variant="contained" size="small" color="primary" onClick={handleAddValue}>
-            Add value
-          </Button>
-        </Grid>
-      </Grid>
-  ) : (
-    <ValueComponent {...valueComponentProps} />
-  );
-};
-
-export default PropertyValue;

package/src/lib/Property/PropertyValueField/PropertyValueField.tsx

@@ -1,86 +0,0 @@
-import Box from '@material-ui/core/Box';
-import Grid from '@material-ui/core/Grid';
-import Button from '@material-ui/core/Button';
-import Typography from '@material-ui/core/Typography';
-import IconButton from '@material-ui/core/IconButton';
-import CloseIcon from '@material-ui/icons/Close';
-import ValueComponent, { ValueComponentProps } from './ValueComponent';
-
-import { useCallback, useEffect, useMemo } from 'react';
-import { useFormContext, useWatch } from 'react-hook-form';
-import { removeArrayItem } from '../../../utils';
-
-type Props = {
-  propertyFieldName: string;
-  name: string;
-  label?: string;
-  required?: boolean;
-};
-
-export const PropertyValueField = ({ propertyFieldName, name, label = '', required }: Props) => {
-  const { control, setValue } = useFormContext();
-
-  const propertyType = useWatch({ control, name: `${propertyFieldName}.propertyType` });
-  const isMultiple = useWatch({ control, name: `${propertyFieldName}.isMultiple` });
-  const format = useWatch({ control, name: `${propertyFieldName}.format` });
-  const restrictedValues = useWatch({ control, name: `${propertyFieldName}.restrictedValues` });
-  const properties = useWatch({ control, name: `${propertyFieldName}.properties` });
-  const values = useWatch({ control, name });
-
-  useEffect(() => {
-    if (isMultiple && !Array.isArray(values)) {
-      setValue(name, [values]);
-    } else if (!isMultiple && Array.isArray(values)) {
-      setValue(name, values[0]);
-    }
-  }, [isMultiple, values, name]);
-
-  const valueComponentProps: ValueComponentProps = useMemo(() => {
-    const typeValue = typeof propertyType === 'string' ? propertyType : propertyType.value;
-    return { control, name, label, required, format, restrictedValues, properties, propertyType: typeValue };
-  }, [propertyType, format, restrictedValues, name, label, required, properties]);
-
-  const handleDeleteValue = useCallback(
-    (index) => {
-      setValue(name, removeArrayItem(values, index));
-    },
-    [name, values]
-  );
-
-  const handleAddValue = useCallback(() => {
-    if (values && Array.isArray(values)) {
-      setValue(`${name}.${values.length}`, null);
-    } else {
-      setValue(name, [null]);
-    }
-  }, [name, values]);
-
-  return isMultiple ? (
-    values && Array.isArray(values) ? (
-      <Grid item container spacing={2} direction="column">
-        <Grid item>
-          <Typography variant="h6">{label}</Typography>
-        </Grid>
-        {values.map((_, index) => (
-          <Grid item key={index}>
-            <Box display="flex" alignItems="center">
-              <ValueComponent {...valueComponentProps} label="" name={`${name}.${index}`} />
-              <IconButton size="small" onClick={() => handleDeleteValue(index)}>
-                <CloseIcon fontSize="small" />
-              </IconButton>
-            </Box>
-          </Grid>
-        ))}
-        <Grid item>
-          <Button variant="contained" size="small" color="primary" onClick={handleAddValue}>
-            Add value
-          </Button>
-        </Grid>
-      </Grid>
-    ) : null
-  ) : (
-    <ValueComponent {...valueComponentProps} />
-  );
-};
-
-export default PropertyValueField;

package/src/lib/Property/PropertyValueField/StringValueField.tsx

@@ -1,21 +0,0 @@
-import { useFormContext, useWatch } from 'react-hook-form';
-import { ControlInput, ControlSelect } from '../../Forms';
-
-type Props = {
-  name: string;
-  label?: string;
-  required?: boolean;
-  restrictedValues?: string[];
-};
-
-const StringValueField = ({ name, label, required = false, restrictedValues }: Props) => {
-  const { control } = useFormContext();
-
-  return Array.isArray(restrictedValues) && restrictedValues.length ? (
-    <ControlSelect required={required} control={control} name={name} label={label} options={restrictedValues} />
-  ) : (
-    <ControlInput required={required} control={control} name={name} label={label} />
-  );
-};
-
-export default StringValueField;