@dartech/arsenal-ui 0.0.1 → 0.0.3

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

@@ -1,68 +0,0 @@
-import TextField from '@mui/material/TextField';
-import { TimePicker } from '@mui/x-date-pickers/TimePicker';
-
-import { format as dateFnsFormat, isValid, parse } from 'date-fns';
-import { useEffect, useState } from 'react';
-import { useController, useFormContext } from 'react-hook-form';
-import { TIME_DEFAULT_FORMAT } from '../../../interfaces';
-
-type Props = {
-  name: string;
-  label?: string;
-  format?: string;
-  required?: boolean;
-};
-
-const TimeValueField = ({ name, label, format = TIME_DEFAULT_FORMAT, required = false }: Props) => {
-  const { control, setError, clearErrors } = useFormContext();
-  const {
-    field: { ref, onChange, value },
-    fieldState: { error },
-  } = useController({ control, name, rules: { required: required && 'Required field' } });
-
-  const [fieldValue, setFieldValue] = useState(null);
-
-  useEffect(() => {
-    if (value && format) {
-      let parsedValue = parse(value, format, new Date());
-
-      if (!isValid(parsedValue)) {
-        parsedValue = parse(value, 'HH:mm:ss.SSS', new Date());
-      }
-
-      setFieldValue(parsedValue);
-    }
-  }, [value, format]);
-
-  const handleChange = (date: Date) => {
-    setFieldValue(date);
-    onChange(isValid(date) ? dateFnsFormat(date, format) : date);
-  };
-
-  const onError = (err) => {
-    if (err) {
-      setError(name, { type: 'custom', message: 'Incorrect date format' });
-    } else {
-      clearErrors(name);
-    }
-  };
-
-  return (
-    <TimePicker
-      clearable
-      mask=""
-      inputRef={ref}
-      label={label}
-      ampm={false}
-      value={fieldValue}
-      inputFormat={format}
-      onError={onError}
-      onChange={handleChange}
-      renderInput={(props) => (
-        <TextField {...props} fullWidth size="small" variant="outlined" error={!!error} helperText={error?.message} />
-      )}
-    />
-  );
-};
-
-export default TimeValueField;

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

@@ -1,63 +0,0 @@
-import { PropertiesArrayType, PropertyType } from '../../../interfaces';
-import { Control } from 'react-hook-form';
-import { DefinitionFiller } from '../../Definition';
-import { ControlInput, ControlNumberInput } from '../../Forms';
-import BooleanValueField from './BooleanValueField';
-import DateTimeValueField from './DateTimeValueField';
-import DateValueField from './DateValueField';
-import JsonValueField from './JsonValueField';
-import StringValueField from './StringValueField';
-import TimeValueField from './TimeValueField';
-
-export type ValueComponentProps = {
-  control: Control;
-  propertyType: PropertyType;
-  name: string;
-  label: string;
-  required: boolean;
-  format?: string;
-  restrictedValues?: string[];
-  properties?: PropertiesArrayType;
-};
-
-const ValueComponent = ({
-  propertyType,
-  control,
-  name,
-  label,
-  required,
-  format,
-  restrictedValues,
-  properties,
-}: ValueComponentProps) => {
-  switch (propertyType) {
-    case PropertyType.BIG_DECIMAL:
-    case PropertyType.FLOAT:
-    case PropertyType.DOUBLE:
-      return <ControlNumberInput decimal control={control} name={name} label={label} required={required} />;
-    case PropertyType.INTEGER:
-    case PropertyType.BIG_INTEGER:
-    case PropertyType.LONG:
-      return <ControlNumberInput control={control} name={name} label={label} required={required} />;
-    case PropertyType.BOOLEAN:
-      return <BooleanValueField name={name} label={label} />;
-    case PropertyType.DATE:
-      return <DateValueField name={name} label={label} format={format} required={required} />;
-    case PropertyType.TIME:
-      return <TimeValueField name={name} label={label} format={format} required={required} />;
-    case PropertyType.DATE_TIME:
-      return <DateTimeValueField name={name} label={label} format={format} required={required} />;
-    case PropertyType.JSON:
-      return <JsonValueField name={name} label={label} required={required} />;
-    case PropertyType.STRING:
-      return <StringValueField name={name} label={label} required={required} restrictedValues={restrictedValues} />;
-    case PropertyType.ENTITY_REFERENCE:
-      return <ControlInput name={name} control={control} label={label} required={required} />;
-    case PropertyType.ENTITY:
-      return <DefinitionFiller dataFieldName={name} properties={properties} />;
-    default:
-      return null;
-  }
-};
-
-export default ValueComponent;

package/src/lib/Property/PropertyWidget/PropertyWidget.tsx

@@ -1,167 +0,0 @@
-import Box from '@material-ui/core/Box';
-import Select from '@material-ui/core/Select';
-import MenuItem from '@material-ui/core/MenuItem';
-import FormControl from '@material-ui/core/FormControl';
-import InputLabel from '@material-ui/core/InputLabel';
-import Typography from '@material-ui/core/Typography';
-import { ControlAceEditor, ControlInput } from '../../Forms';
-import PropertyValue from '../PropertyValueField/PropertyValue';
-import { WidgetDefinitionFiller } from '../../Definition';
-
-import { useEffect, useMemo, useState } from 'react';
-import { useController, useFormContext, useWatch } from 'react-hook-form';
-import { getEntityStarterValue, isExpression } from '../../../utils';
-
-import { PropertyType, PropertyUnion } from '../../../interfaces';
-
-type Props = {
-  property: PropertyUnion;
-  nullable?: boolean;
-  name: string;
-};
-
-type InputType = 'expression' | 'widget' | 'null' | 'string';
-
-const getInputTypes = (propertyType: PropertyType, nullable: boolean): { value: InputType; label: string }[] => {
-  const options: { value: InputType; label: string }[] = [
-    {
-      value: 'widget',
-      label: 'Widget',
-    },
-    {
-      value: 'expression',
-      label: 'Expression',
-    },
-  ];
-
-  if (nullable) {
-    options.push({
-      value: 'null',
-      label: 'NULL',
-    });
-  }
-
-  switch (propertyType) {
-    case PropertyType.STRING:
-      options[0].label = 'Text input';
-      break;
-    case PropertyType.INTEGER:
-    case PropertyType.BIG_INTEGER:
-    case PropertyType.BIG_DECIMAL:
-    case PropertyType.FLOAT:
-    case PropertyType.LONG:
-    case PropertyType.DOUBLE:
-      options[0].label = 'Number input';
-      break;
-    case PropertyType.BOOLEAN:
-      options[0].label = 'Checkbox';
-      break;
-    case PropertyType.ENTITY_REFERENCE:
-      options[0].label = 'Entity reference fields';
-      break;
-    case PropertyType.JSON:
-      options[0].label = 'JSON';
-      break;
-    case PropertyType.DATE:
-      options[0].label = 'Date';
-      options.push({ value: 'string', label: 'Text input' });
-      break;
-    case PropertyType.DATE_TIME:
-      options[0].label = 'Date time';
-      options.push({ value: 'string', label: 'Text input' });
-      break;
-    case PropertyType.TIME:
-      options[0].label = 'Time';
-      options.push({ value: 'string', label: 'Text input' });
-      break;
-    default:
-      break;
-  }
-
-  return options;
-};
-
-export const PropertyWidget = ({ property, name = '', nullable = false }: Props) => {
-  const { control, setValue } = useFormContext();
-  const {
-    fieldState: { error },
-  } = useController({ name });
-  const value = useWatch({ control, name });
-
-  const [inputType, setInputType] = useState<InputType>('widget');
-
-  const inputOptions = useMemo(
-    () => getInputTypes(property.propertyType, nullable && !property.isRequired),
-    [property, nullable]
-  );
-
-  const handleInputTypeChange = (event: React.ChangeEvent<{ value: InputType }>) => {
-    setInputType(event.target.value);
-  };
-
-  useEffect(() => {
-    if (value && !inputType) {
-      if (value === null && nullable && !property.isRequired) {
-        setInputType('null');
-      } else if (isExpression(inputType)) {
-        setInputType('expression');
-      } else {
-        setInputType('widget');
-      }
-    }
-  }, [value, inputType, property.isRequired, nullable]);
-
-  useEffect(() => {
-    if (!value && inputType === 'expression' && property.propertyType === PropertyType.ENTITY) {
-      setValue(name, JSON.stringify(getEntityStarterValue(property), null, 2));
-    }
-  }, [value, inputType, property.propertyType]);
-
-  return (
-    <>
-      {inputOptions.length ? (
-        <>
-          <Box mb={2}>
-            <FormControl fullWidth size="small" variant="outlined">
-              <InputLabel htmlFor="type-select">Input type</InputLabel>
-              <Select labelId="type-select" label="Input type" value={inputType} onChange={handleInputTypeChange}>
-                {inputOptions.map((option) => (
-                  <MenuItem key={option.value} value={option.value}>
-                    {option.label}
-                  </MenuItem>
-                ))}
-              </Select>
-            </FormControl>
-          </Box>
-          {inputType ? (
-            <>
-              {inputType === 'widget' &&
-                (property.propertyType === PropertyType.ENTITY ? (
-                  <WidgetDefinitionFiller dataFieldName={name} properties={property.properties} nullable={nullable} />
-                ) : (
-                  <PropertyValue name={name} property={property} label={property.name} />
-                ))}
-              {inputType === 'expression' &&
-                (property.propertyType === PropertyType.ENTITY || property.propertyType === PropertyType.JSON ? (
-                  <ControlAceEditor
-                      required
-                      mode="json"
-                      fontSize={14}
-                      validateJson={false}
-                      control={control}
-                      name={name}
-                    />
-                ) : (
-                  <ControlInput required name={name} control={control} label="Expression" />
-                ))}
-              {inputType === 'string' && <ControlInput required name={name} control={control} label={'Text input'} />}
-            </>
-          ) : null}
-        </>
-      ) : null}
-      {error && <Typography color="secondary">{error.message}</Typography>}
-    </>
-  );
-};
-
-export default PropertyWidget;

package/src/lib/Property/UpsertProperty/CreatePropertiesList.tsx

@@ -1,131 +0,0 @@
-import Grid from '@material-ui/core/Grid';
-import Button from '@material-ui/core/Button';
-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 AccordionActions from '@material-ui/core/AccordionActions';
-import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
-import CreatePropertyFormFields from './CreatePropertyFormFields';
-
-import { useCallback, useEffect, useMemo, useRef } from 'react';
-import { useController, useFormContext, useWatch } from 'react-hook-form';
-import { removeArrayItem } from '../../../utils';
-import { CustomPropertyFieldProps } from '../../../interfaces';
-
-type Props = {
-  parentFieldName?: string;
-  hideAddButton?: boolean;
-  focusOnIndex?: number;
-  required?: boolean;
-  entityDefinition?: boolean;
-  globalParameter?: boolean;
-  customPropertyFields?: CustomPropertyFieldProps[];
-};
-
-const defaultPropertyValues = {
-  key: '',
-  propertyType: '',
-  name: '',
-  defaultValue: '',
-  defaultValues: [],
-  isRequired: true,
-  isMultiple: false,
-  sortOrder: 0,
-  isEnabled: true,
-  executeValue: '',
-  uiSettings: '',
-};
-
-export const CreatePropertiesList = ({
-  parentFieldName,
-  hideAddButton,
-  focusOnIndex,
-  required,
-  entityDefinition = false,
-  globalParameter = false,
-  customPropertyFields = [],
-}: Props) => {
-  const fieldName = useMemo(
-    () => (parentFieldName ? `${parentFieldName}.properties` : `properties`),
-    [parentFieldName]
-  );
-
-  const { setValue, clearErrors, control } = useFormContext();
-  const {
-    fieldState: { error },
-  } = useController({ control, name: fieldName, rules: { required: required && 'Please, add properties' } });
-  const properties = useWatch({ control, name: fieldName });
-
-  const refs = useRef([]);
-
-  useEffect(() => {
-    if (typeof focusOnIndex === 'number' && refs.current[focusOnIndex]) {
-      refs.current[focusOnIndex].scrollIntoView({
-        behavior: 'smooth',
-        block: 'start',
-      });
-    }
-  }, [focusOnIndex, refs]);
-
-  const handleAddParameter = useCallback(() => {
-    if (properties) {
-      setValue(`${fieldName}.${properties.length}`, defaultPropertyValues);
-    } else {
-      setValue(fieldName, [defaultPropertyValues]);
-    }
-    clearErrors(fieldName);
-  }, [properties, fieldName]);
-
-  const handleRemoveParameter = useCallback(
-    (index) => {
-      setValue(`${fieldName}`, removeArrayItem(properties, index));
-    },
-    [properties, fieldName]
-  );
-
-  return (
-    <>
-      {error && error.message && (
-        <Grid item sm={12} md={8} lg={6}>
-          <Typography color="secondary">{error.message}</Typography>
-        </Grid>
-      )}
-      {properties &&
-        properties.map((property, index) => (
-          <Grid item key={index} sm={12} md={8} lg={6} innerRef={(ref) => (refs.current[index] = ref)}>
-            <Accordion defaultExpanded elevation={3}>
-              <AccordionSummary expandIcon={<ExpandMoreIcon />}>
-                <Typography color={error && error[index] ? 'secondary' : 'initial'} style={{ wordBreak: 'break-word' }}>
-                  {property.name || `Property ${index + 1}`}
-                </Typography>
-              </AccordionSummary>
-              <AccordionDetails>
-                <CreatePropertyFormFields
-                  propertyFieldName={`${fieldName}.${index}`}
-                  entityDefinition={entityDefinition}
-                  globalParameter={globalParameter}
-                  customPropertyFields={customPropertyFields}
-                />
-              </AccordionDetails>
-              <AccordionActions>
-                <Button variant="contained" size="small" color="secondary" onClick={() => handleRemoveParameter(index)}>
-                  Remove
-                </Button>
-              </AccordionActions>
-            </Accordion>
-          </Grid>
-        ))}
-
-      {!hideAddButton && (
-        <Grid item xs={12}>
-          <Button variant="contained" size="small" color="primary" onClick={handleAddParameter}>
-            Add property
-          </Button>
-        </Grid>
-      )}
-    </>
-  );
-};
-
-export default CreatePropertiesList;

package/src/lib/Property/UpsertProperty/CreatePropertyFormFields.tsx

@@ -1,147 +0,0 @@
-import Grid from '@material-ui/core/Grid';
-import {
-  ControlCheckbox,
-  ControlAutocomplete,
-  ControlNumberInput,
-  ControlAceEditor,
-  ControlDebouncedInput,
-} from '../../Forms';
-import { PropertyAdditionalFields } from './PropertyAdditionalFields';
-import { PropertyValueField } from '../PropertyValueField';
-import CustomPropertyField from './CustomPropertyField';
-
-import { useMemo } from 'react';
-import { useFormContext, useWatch } from 'react-hook-form';
-import useCustomFields from './useCustomFields';
-
-import { CustomPropertyFieldProps, PropertyType } from '../../../interfaces';
-
-type Props = {
-  propertyFieldName: string;
-  entityDefinition?: boolean;
-  globalParameter?: boolean;
-  customPropertyFields?: CustomPropertyFieldProps[];
-};
-
-const propertyTypes = Object.values(PropertyType)
-  .sort((a, b) => a.localeCompare(b))
-  .map((propType) => ({
-    value: propType,
-    label: propType
-      .replace('_', ' ')
-      .toLowerCase()
-      .replace(/(^\w)|([-\s]\w)/g, (c) => c.toUpperCase()),
-  }));
-
-const CreatePropertyFormFields = ({
-  propertyFieldName,
-  entityDefinition = false,
-  globalParameter = false,
-  customPropertyFields = [],
-}: Props) => {
-  const { control, setValue } = useFormContext();
-  const propertyType = useWatch({ control, name: `${propertyFieldName}.propertyType` });
-  const isMultiple = useWatch({ control, name: `${propertyFieldName}.isMultiple` });
-  const isRequired = useWatch({ control, name: `${propertyFieldName}.isRequired` });
-
-  const { customCheckboxes, customFields } = useCustomFields(customPropertyFields);
-
-  const valueLabel = useMemo(() => {
-    let label = globalParameter ? 'Value' : 'Default Value';
-    if (isMultiple) {
-      label += 's';
-    }
-    return label;
-  }, [globalParameter, isMultiple]);
-
-  const handlePropertyTypeChange = (fieldName, value) => {
-    const valueFieldName = `${propertyFieldName}.${globalParameter ? 'value' : 'defaultValue'}`;
-    if (isMultiple) {
-      setValue(valueFieldName, []);
-    } else {
-      setValue(valueFieldName, null);
-    }
-    setValue(fieldName, value);
-  };
-
-  return (
-    <Grid container direction="column" spacing={2}>
-      <Grid item>
-        <ControlDebouncedInput required control={control} name={`${propertyFieldName}.key`} label="Key" />
-      </Grid>
-      <Grid item>
-        <ControlDebouncedInput required control={control} name={`${propertyFieldName}.name`} label="Name" />
-      </Grid>
-      <Grid item>
-        <ControlAutocomplete
-          required
-          control={control}
-          name={`${propertyFieldName}.propertyType`}
-          label="Type"
-          options={propertyTypes}
-          onChange={handlePropertyTypeChange}
-        />
-      </Grid>
-      <Grid item>
-        <ControlNumberInput required control={control} name={`${propertyFieldName}.sortOrder`} label="Sort Order" />
-      </Grid>
-
-      <Grid item>
-        <ControlAceEditor control={control} name={`${propertyFieldName}.uiSettings`} label="UI Settings" validateJson />
-      </Grid>
-      <Grid item>
-        <ControlCheckbox control={control} name={`${propertyFieldName}.isMultiple`} label="Multiple" />
-        <ControlCheckbox control={control} name={`${propertyFieldName}.isEnabled`} label="Enabled" />
-        <ControlCheckbox control={control} name={`${propertyFieldName}.isRequired`} label="Required" />
-        {entityDefinition && (
-          <ControlCheckbox
-            control={control}
-            name={`${propertyFieldName}.isViewableInList`}
-            label="Is viewable in list"
-          />
-        )}
-        {customCheckboxes.length ? (
-          <>
-            {customCheckboxes.map((field, index) => (
-              <ControlCheckbox
-                key={index}
-                control={control}
-                name={`${propertyFieldName}.${field.name}`}
-                label={field.label}
-              />
-            ))}
-          </>
-        ) : null}
-      </Grid>
-      {propertyType && (
-        <>
-          <PropertyAdditionalFields
-            propertyType={typeof propertyType === 'string' ? propertyType : propertyType.value}
-            propertyFieldName={propertyFieldName}
-            globalParameter={globalParameter}
-            entityDefinition={entityDefinition}
-          />
-          <Grid item>
-            <PropertyValueField
-              propertyFieldName={propertyFieldName}
-              name={`${propertyFieldName}.${globalParameter ? 'value' : 'defaultValue'}`}
-              label={valueLabel}
-              required={globalParameter ? isRequired : false}
-            />
-          </Grid>
-        </>
-      )}
-      {customFields.length ? (
-        <>
-          {customFields.map((field, index) => (
-            <Grid item key={index}>
-              <CustomPropertyField {...field} propertyFieldName={propertyFieldName} />
-            </Grid>
-          ))}
-        </>
-      ) : null}
-    </Grid>
-  );
-};
-
-export default CreatePropertyFormFields;

package/src/lib/Property/UpsertProperty/CustomPropertyField.tsx

@@ -1,40 +0,0 @@
-import { useMemo } from 'react';
-import { useFormContext } from 'react-hook-form';
-import { CustomPropertyFieldProps } from '../../../interfaces';
-import { ControlAceEditor, ControlAutocomplete, ControlInput, ControlNumberInput, ControlSelect } from '../../Forms';
-
-type Props = CustomPropertyFieldProps & { propertyFieldName: string };
-
-export const CustomPropertyField = ({
-  name,
-  label = '',
-  propertyFieldName,
-  type,
-  decimal = false,
-  options = [],
-  required = false,
-}: Props) => {
-  const { control } = useFormContext();
-  const fieldName = useMemo(() => `${propertyFieldName}.${name}`, [name, propertyFieldName]);
-
-  switch (type) {
-    case 'text':
-      return <ControlInput control={control} name={fieldName} label={label} required={required} />;
-    case 'number':
-      return (
-        <ControlNumberInput control={control} name={fieldName} label={label} decimal={decimal} required={required} />
-      );
-    case 'select':
-      return <ControlSelect control={control} name={fieldName} label={label} options={options} required={required} />;
-    case 'autocomplete':
-      return (
-        <ControlAutocomplete control={control} name={fieldName} label={label} options={options} required={required} />
-      );
-    case 'json':
-      return <ControlAceEditor control={control} name={fieldName} label={label} mode="json" required={required} />;
-    default:
-      return null;
-  }
-};
-
-export default CustomPropertyField;

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

@@ -1,41 +0,0 @@
-import Grid from '@material-ui/core/Grid';
-import { ControlNumberInput, ControlSelect } from '../../../Forms';
-import { RoundingMode } from '../../../../interfaces';
-
-import { useFormContext } from 'react-hook-form';
-
-type Props = {
-  propertyFieldName: string;
-};
-
-const roundingModes = Object.values(RoundingMode).sort((a, b) => a.localeCompare(b));
-
-const BigDecimalPropertyFields = ({ propertyFieldName }: Props) => {
-  const { control } = useFormContext();
-
-  return (
-    <>
-      <Grid item>
-        <ControlNumberInput
-          required
-          control={control}
-          defaultValue={2}
-          name={`${propertyFieldName}.precisionScale`}
-          label="Precision Scale"
-        />
-      </Grid>
-      <Grid item>
-        <ControlSelect
-          required
-          control={control}
-          name={`${propertyFieldName}.roundingMode`}
-          label="Rounding Mode"
-          defaultValue={RoundingMode.HALF_UP}
-          options={roundingModes}
-        />
-      </Grid>
-    </>
-  );
-};
-
-export default BigDecimalPropertyFields;

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

@@ -1,27 +0,0 @@
-import Grid from '@material-ui/core/Grid';
-import { ControlInput } from '../../../Forms';
-
-import { useFormContext } from 'react-hook-form';
-
-type Props = {
-  propertyFieldName: string;
-  defaultValue?: string;
-};
-
-const DateAdditionalFields = ({ propertyFieldName, defaultValue = '' }: Props) => {
-  const { control } = useFormContext();
-
-  return (
-    <Grid item>
-      <ControlInput
-        required
-        control={control}
-        defaultValue={defaultValue}
-        name={`${propertyFieldName}.format`}
-        label="Format"
-      />
-    </Grid>
-  );
-};
-
-export default DateAdditionalFields;