autoforma 1.0.35 → 1.0.37

package/src/components/FieldRender.tsx

@@ -1,217 +0,0 @@
-import React, { useMemo } from 'react';
-import { Fieldset, Text } from '@mantine/core';
-import { FieldRenderCustomRender } from '@/types/custom-render';
-import { ArrayFieldOptions, FieldSchema } from '@/types/field';
-import ArrayField from './fields/ArrayField';
-import CheckField from './fields/CheckField';
-import DateField from './fields/DateField';
-import DateTimeField from './fields/DateTimeField';
-import NumberField from './fields/NumberField';
-import ObjectField from './fields/ObjectField';
-import SelectField from './fields/SelectField';
-import TextAreaField from './fields/TextAreaField';
-import TextField from './fields/TextField';
-import TimeField from './fields/TimeField';
-
-interface FieldRenderProps {
-  field: FieldSchema;
-  value: any;
-  error?: React.ReactNode | Record<string, React.ReactNode>;
-  onChange: (name: string, value: any) => void;
-  formValues: Record<string, any>;
-  fieldContainer?: (field: React.ReactNode, fieldSchema: FieldSchema) => React.ReactNode;
-  customRender?: FieldRenderCustomRender;
-  readOnly?: true;
-}
-
-export function getArrayOptions(
-  name: string,
-  onChange: (name: string, value: any) => void,
-  value: Record<string, any>[]
-): ArrayFieldOptions {
-  return {
-    addElement: (val) => {
-      onChange(name, [...value, val]);
-    },
-    replaceElement: (index, val) => {
-      const newValue = value.map((row, i) => (i === index ? val : row));
-      onChange(name, newValue);
-    },
-    removeElement: (index) => {
-      onChange(
-        name,
-        value.filter((_, i) => i !== index)
-      );
-    },
-  };
-}
-
-const FieldRender: React.FC<FieldRenderProps> = ({
-  field,
-  value,
-  error,
-  onChange,
-  formValues,
-  fieldContainer = (field) => <>{field}</>,
-  customRender,
-  readOnly,
-}) => {
-  const isVisible = useMemo(() => {
-    return typeof field.visible === 'function'
-      ? field.visible(formValues)
-      : field.visible !== false;
-  }, [field.visible, formValues]);
-
-  const isDisabled = useMemo(() => {
-    return typeof field.disabled === 'function'
-      ? field.disabled(formValues)
-      : field.disabled === true;
-  }, [field.disabled, formValues]);
-
-  const arrayOptions = useMemo(() => {
-    if (field.type !== 'array') {
-      return undefined;
-    }
-    return getArrayOptions(field.name, onChange, value);
-  }, [field.type, field.name, onChange, value]);
-
-  const customField = useMemo(() => {
-    return customRender?.(
-      field,
-      value,
-      error,
-      onChange,
-      formValues,
-      arrayOptions,
-      readOnly || field.readOnly
-    );
-  }, [
-    customRender,
-    field,
-    value,
-    error,
-    onChange,
-    formValues,
-    arrayOptions,
-    readOnly,
-    field.readOnly,
-  ]);
-
-  if (!isVisible) {
-    return null;
-  }
-
-  if (customField) {
-    return customField;
-  }
-
-  const renderField = () => {
-    switch (field.type) {
-      case 'text':
-        return (
-          <TextField
-            name={field.name}
-            value={value as string}
-            onChange={onChange}
-            readOnly={readOnly}
-          />
-        );
-      case 'number':
-        return (
-          <NumberField
-            name={field.name}
-            value={value as number}
-            onChange={onChange}
-            readOnly={readOnly}
-          />
-        );
-      case 'object':
-        return (
-          <ObjectField
-            name={field.name}
-            onChange={onChange}
-            value={value}
-            fields={field.fields ?? []}
-            formValues={formValues}
-            error={error as Record<string, React.ReactNode>}
-            readOnly={readOnly}
-          />
-        );
-      case 'array':
-        return (
-          <ArrayField
-            name={field.name}
-            onChange={onChange}
-            value={value}
-            fields={field.fields as FieldSchema[]}
-            options={arrayOptions!}
-            error={error as Record<string, React.ReactNode>}
-            readOnly={readOnly}
-          />
-        );
-      case 'check':
-        return (
-          <CheckField
-            name={field.name}
-            value={value as boolean}
-            onChange={onChange}
-            readOnly={readOnly}
-            label={field.label}
-          />
-        );
-      case 'select':
-        return (
-          <SelectField
-            name={field.name}
-            value={value}
-            onChange={onChange}
-            readOnly={readOnly}
-            data={field.data as { label: string; value: string }[]}
-          />
-        );
-      case 'textarea':
-        return (
-          <TextAreaField name={field.name} value={value} onChange={onChange} readOnly={readOnly} />
-        );
-      case 'date':
-        return (
-          <DateField name={field.name} value={value} onChange={onChange} readOnly={readOnly} />
-        );
-      case 'datetime':
-        return (
-          <DateTimeField name={field.name} value={value} onChange={onChange} readOnly={readOnly} />
-        );
-      case 'time':
-        return (
-          <TimeField name={field.name} value={value} onChange={onChange} readOnly={readOnly} />
-        );
-
-      default:
-        return null;
-    }
-  };
-
-  const content = (
-    <Fieldset
-      legend={field.type === 'check' ? undefined : field.label}
-      variant="unstyled"
-      disabled={isDisabled || readOnly}
-      styles={{
-        legend: {
-          fontWeight: 500,
-        },
-      }}
-    >
-      {renderField()}
-      {!['object', 'array'].includes(field.type) && typeof error === 'string' && (
-        <Text c="red" fz="sm" fw={500}>
-          {error}
-        </Text>
-      )}
-    </Fieldset>
-  );
-
-  return fieldContainer(content, field);
-};
-
-export default FieldRender;

package/src/components/fields/ArrayField.tsx

@@ -1,59 +0,0 @@
-import React, { Fragment } from 'react';
-import { Button, Text } from '@mantine/core';
-import { BaseFieldProps, FieldSchema } from '@/types/field';
-import FieldRender from '../FieldRender';
-
-
-interface ArrayFieldProps extends BaseFieldProps<Record<string, any>[]> {
-  fields: FieldSchema[];
-  options: {
-    addElement: (val: Record<string, any>) => void;
-    replaceElement: (index: number, val: Record<string, any>) => void;
-    removeElement: (index: number) => void;
-  };
-  error?: Record<string, React.ReactNode>;
-}
-
-const ArrayField: React.FC<ArrayFieldProps> = (props) => {
-  const { fields, options, value, error = {}, name: parentName, readOnly } = props;
-
-  const content = value.map((row, rowIndex) => {
-    const onChange = (name: string, value: any) => {
-      row[name] = value;
-      options.replaceElement(rowIndex, row);
-    };
-    return fields.map((field, index) => {
-      return (
-        <Fragment key={index}>
-          <FieldRender
-            field={field}
-            formValues={row}
-            onChange={onChange}
-            value={row[field.name]}
-            error={field.name in (error[rowIndex] ?? {}) ? error[rowIndex][field.name] : undefined}
-            readOnly={readOnly}
-          />
-          {!readOnly && <Button onClick={() => options.removeElement(rowIndex)}>Remove</Button>}
-        </Fragment>
-      );
-    });
-  });
-
-  return (
-    <>
-      {typeof error === 'string' && (
-        <Text c="red" fz="sm" fw={500}>
-          {error}
-        </Text>
-      )}
-      {content}
-      {!readOnly && (
-        <Button display="block" onClick={() => options.addElement({})}>
-          Add
-        </Button>
-      )}
-    </>
-  );
-};
-
-export default ArrayField;

package/src/components/fields/CheckField.tsx

@@ -1,23 +0,0 @@
-import React from 'react';
-import { Checkbox } from '@mantine/core';
-import { BaseFieldProps } from '@/types/field';
-
-interface CheckFieldProps extends BaseFieldProps<boolean> {
-  label: string;
-}
-
-const CheckField: React.FC<CheckFieldProps> = (props) => {
-  const { name, onChange, value, readOnly, label } = props;
-
-  return (
-    <Checkbox
-      name={name}
-      checked={value}
-      readOnly={readOnly}
-      onChange={(e) => onChange(name, e.target.checked)}
-      label={label}
-    />
-  );
-};
-
-export default CheckField;

package/src/components/fields/DateField.tsx

@@ -1,26 +0,0 @@
-import dayjs from 'dayjs';
-import customParseFormat from 'dayjs/plugin/customParseFormat';
-import React from 'react';
-import { DateInput } from '@mantine/dates';
-import { BaseFieldProps } from '@/types/field';
-
-dayjs.extend(customParseFormat);
-
-interface DateFieldProps extends BaseFieldProps<Date> {}
-
-const DateField: React.FC<DateFieldProps> = (props) => {
-  const { name, onChange, value, readOnly } = props;
-
-  return (
-    <DateInput
-      name={name}
-      onChange={(value) => onChange(name, value)}
-      value={value}
-      readOnly={readOnly}
-      valueFormat="YYYY-MM-DD"
-      clearable
-    />
-  );
-};
-
-export default DateField;

package/src/components/fields/DateTimeField.tsx

@@ -1,26 +0,0 @@
-import dayjs from 'dayjs';
-import customParseFormat from 'dayjs/plugin/customParseFormat';
-import React from 'react';
-import { DateTimePicker } from '@mantine/dates';
-import { BaseFieldProps } from '@/types/field';
-
-dayjs.extend(customParseFormat);
-
-interface DateTimeFieldProps extends BaseFieldProps<Date> {}
-
-const DateTimeField: React.FC<DateTimeFieldProps> = (props) => {
-  const { name, onChange, value, readOnly } = props;
-
-  return (
-    <DateTimePicker
-      name={name}
-      onChange={(value) => onChange(name, value)}
-      value={value}
-      readOnly={readOnly}
-      valueFormat="YYYY-MM-DD HH:mm:ss"
-      clearable
-    />
-  );
-};
-
-export default DateTimeField;

package/src/components/fields/NumberField.tsx

@@ -1,20 +0,0 @@
-import React from 'react';
-import { NumberInput } from '@mantine/core';
-import { BaseFieldProps } from '@/types/field';
-
-interface NumberFieldProps extends BaseFieldProps<number> {}
-
-const NumberField: React.FC<NumberFieldProps> = (props) => {
-  const { name, onChange, value, readOnly } = props;
-
-  return (
-    <NumberInput
-      name={name}
-      onChange={(value) => onChange(name, value as number)}
-      value={value}
-      readOnly={readOnly}
-    />
-  );
-};
-
-export default NumberField;

package/src/components/fields/ObjectField.tsx

@@ -1,41 +0,0 @@
-import React from 'react';
-import { BaseFieldProps, FieldSchema } from '@/types/field';
-import FieldRender from '../FieldRender';
-
-
-interface ObjectFieldProps extends BaseFieldProps<Record<string, any>> {
-  fields: FieldSchema[];
-  formValues: Record<string, any>;
-  error?: Record<string, React.ReactNode>;
-}
-
-const ObjectField: React.FC<ObjectFieldProps> = (props) => {
-  const {
-    fields,
-    name: parentName,
-    onChange: onParentChange,
-    value,
-    formValues,
-    error = {},
-    readOnly,
-  } = props;
-
-  const onChange = (name: string, value: any) => {
-    onParentChange(`${parentName}.${name}`, value);
-  };
-
-  const content = fields.map((field, index) => (
-    <FieldRender
-      key={index}
-      field={field}
-      formValues={formValues}
-      onChange={onChange}
-      value={value[field.name]}
-      error={error[field.name]}
-      readOnly={readOnly}
-    />
-  ));
-  return content;
-};
-
-export default ObjectField;

package/src/components/fields/SelectField.tsx

@@ -1,23 +0,0 @@
-import React from 'react';
-import { Select } from '@mantine/core';
-import { BaseFieldProps } from '@/types/field';
-
-interface SelectFieldProps extends BaseFieldProps<string> {
-  data: { label: string; value: string }[];
-}
-
-const SelectField: React.FC<SelectFieldProps> = (props) => {
-  const { data, name, onChange, value, readOnly } = props;
-  return (
-    <Select
-      name={name}
-      data={data}
-      value={value}
-      onChange={(value) => onChange(name, value)}
-      readOnly={readOnly}
-      clearable
-    />
-  );
-};
-
-export default SelectField;

package/src/components/fields/TextAreaField.tsx

@@ -1,25 +0,0 @@
-import React from 'react';
-import { Textarea } from '@mantine/core';
-import { BaseFieldProps } from '@/types/field';
-
-interface TextAreaFieldProps extends BaseFieldProps<string> {}
-
-const TextAreaField: React.FC<TextAreaFieldProps> = (props) => {
-  const { name, onChange, value, readOnly } = props;
-
-  return (
-    <Textarea
-      name={name}
-      onChange={(e) => onChange(name, e.target.value)}
-      value={value}
-      readOnly={readOnly}
-      styles={{
-        input: {
-            height: 200
-        }
-      }}
-    />
-  );
-};
-
-export default TextAreaField;

package/src/components/fields/TextField.tsx

@@ -1,20 +0,0 @@
-import React from 'react';
-import { TextInput } from '@mantine/core';
-import { BaseFieldProps } from '@/types/field';
-
-interface TextFieldProps extends BaseFieldProps<string> {}
-
-const TextField: React.FC<TextFieldProps> = (props) => {
-  const { name, onChange, value, readOnly } = props;
-
-  return (
-    <TextInput
-      name={name}
-      onChange={(value) => onChange(name, value.target.value)}
-      value={value}
-      readOnly={readOnly}
-    />
-  );
-};
-
-export default TextField;

package/src/components/fields/TimeField.tsx

@@ -1,32 +0,0 @@
-import React, { useRef } from 'react';
-import { ActionIcon } from '@mantine/core';
-import { TimeInput } from '@mantine/dates';
-import { BaseFieldProps } from '@/types/field';
-
-interface TimeFieldProps extends BaseFieldProps<string> {}
-
-const TimeField: React.FC<TimeFieldProps> = (props) => {
-  const { name, onChange, value, readOnly } = props;
-  
-  const ref = useRef<HTMLInputElement>(null);
-
-  const pickerControl = (
-    <ActionIcon variant="subtle" color="gray" onClick={() => ref.current?.showPicker()}>
-      &#x1F55B;
-    </ActionIcon>
-  );
-
-  return (
-    <TimeInput
-      name={name}
-      onChange={(e) => onChange(name, e.target.value)}
-      value={value}
-      readOnly={readOnly}
-      ref={ref}
-      rightSection={pickerControl}
-      withSeconds
-    />
-  );
-};
-
-export default TimeField;

package/src/types/custom-render.ts

@@ -1,22 +0,0 @@
-// types/custom-render.ts
-import { ArrayFieldOptions, FieldSchema } from './field';
-
-export type FieldRenderCustomRender = (
-  field: FieldSchema,
-  value: any,
-  error: React.ReactNode | Record<string, React.ReactNode>,
-  onChange: (name: string, value: any) => void,
-  formValues: Record<string, any>,
-  options?: ArrayFieldOptions,
-  readOnly?: true
-) => React.ReactNode;
-
-export interface CustomFieldRender {
-  field: FieldSchema;
-  value: any;
-  error: React.ReactNode | Record<string, React.ReactNode>;
-  onChange: (name: string, value: any) => void;
-  formValues: Record<string, any>;
-  options?: ArrayFieldOptions;
-  readOnly?: true;
-}

package/src/types/field.ts

@@ -1,32 +0,0 @@
-export type FieldType = 'text' | 'number' | 'object' | 'array' | 'check' | 'select' | 'textarea' | 'date' | 'datetime' | 'time';
-
-export interface FieldSchema {
-  name: string;
-  type: FieldType;
-  label: string;
-  description?: string;
-  placeholder?: string;
-  extra?: Record<string, any>;
-  disabled?: (values: Record<string, any>) => boolean | boolean;
-  visible?: (values: Record<string, any>) => boolean | boolean;
-  initialValue?: any;
-  required?: true;
-  readOnly?: true;
-  // for object type only
-  fields?: FieldSchema[];
-  // for select type only
-  data?: { label: string; value: string }[];
-}
-
-export interface BaseFieldProps<T> {
-  name: string;
-  value: T;
-  onChange: (name: string, value: T | null) => void;
-  readOnly?: true;
-}
-
-export type ArrayFieldOptions = {
-  addElement: (value: Record<string, any>) => void;
-  replaceElement: (index: number, val: Record<string, any>) => void;
-  removeElement: (index: number) => void;
-};

package/src/types/form.ts

@@ -1,8 +0,0 @@
-import { FieldSchema } from './field';
-
-export interface FormSchema {
-  fields: FieldSchema[];
-  onSubmit?: (values: Record<string, any>) => void;
-  formData?: Record<string, any>;
-  initialValues?: Record<string, any>;
-}