autoforma 1.0.1 → 1.0.4

package/package.json

@@ -1,7 +1,21 @@
 {
   "name": "autoforma",
+  "version": "1.0.4",
+  "description": "AutoForma is a dynamic form builder based on Mantine and React",
+  "main": "./dist/index.cjs.js",
+  "module": "./dist/index.es.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.es.js",
+      "require": "./dist/index.cjs.js",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "files": [
+    "dist"
+  ],
   "type": "module",
-  "version": "1.0.1",
   "homepage": "http://sajinael98.github.io/AutoForma",
   "scripts": {
     "dev": "vite",
@@ -19,8 +33,7 @@
     "storybook": "storybook dev -p 6006",
     "storybook:build": "storybook build",
     "predeploy": "npm run build-storybook",
-    "deploy-storybook": "gh-pages -d storybook-static",
-    "build-storybook": "build-storybook"
+    "deploy-storybook": "gh-pages -d storybook-static"
   },
   "dependencies": {
     "@mantine/core": "7.17.5",
@@ -30,64 +43,16 @@
     "dayjs": "^1.11.13",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
-    "react-router-dom": "^7.4.0",
-    "vite-plugin-dts": "^4.5.3"
+    "react-router-dom": "^7.4.0"
   },
   "devDependencies": {
-    "@chromatic-com/storybook": "^3.2.6",
-    "@eslint/js": "^9.23.0",
-    "@ianvs/prettier-plugin-sort-imports": "^4.4.1",
-    "@storybook/addon-essentials": "^8.6.12",
-    "@storybook/addon-onboarding": "^8.6.12",
-    "@storybook/blocks": "^8.6.12",
-    "@storybook/experimental-addon-test": "^8.6.12",
-    "@storybook/react": "^8.6.8",
-    "@storybook/react-vite": "^8.6.8",
-    "@storybook/test": "^8.6.12",
-    "@testing-library/dom": "^10.4.0",
-    "@testing-library/jest-dom": "^6.6.3",
-    "@testing-library/react": "^16.2.0",
-    "@testing-library/user-event": "^14.6.1",
-    "@types/node": "^22.13.11",
-    "@types/react": "^19.0.12",
-    "@types/react-dom": "^19.0.4",
     "@vitejs/plugin-react": "^4.3.4",
-    "@vitest/browser": "^3.1.2",
-    "@vitest/coverage-v8": "^3.1.2",
-    "eslint": "^9.23.0",
-    "eslint-config-mantine": "^4.0.3",
-    "eslint-plugin-jsx-a11y": "^6.10.2",
-    "eslint-plugin-react": "^7.37.4",
-    "eslint-plugin-storybook": "^0.12.0",
-    "gh-pages": "^6.3.0",
-    "identity-obj-proxy": "^3.0.0",
-    "jsdom": "^26.0.0",
-    "playwright": "^1.52.0",
-    "postcss": "^8.5.3",
-    "postcss-preset-mantine": "1.17.0",
-    "postcss-simple-vars": "^7.0.1",
-    "prettier": "^3.5.3",
-    "prop-types": "^15.8.1",
-    "storybook": "^8.6.8",
-    "storybook-dark-mode": "^4.0.2",
-    "stylelint": "^16.16.0",
-    "stylelint-config-standard-scss": "^14.0.0",
-    "typescript": "^5.8.2",
-    "typescript-eslint": "^8.27.0",
     "vite": "^6.2.2",
+    "vite-plugin-dts": "^4.5.3",
+    "typescript": "^5.8.2",
     "vite-tsconfig-paths": "^5.1.4",
-    "vitest": "^3.0.9"
-  },
-  "packageManager": "yarn@4.9.1",
-  "eslintConfig": {
-    "extends": [
-      "plugin:storybook/recommended"
-    ]
+    "@types/react": "^19.0.12",
+    "@types/react-dom": "^19.0.4"
   },
-  "files": [
-    "dist",
-    "src/components",
-    "src/types",
-    "README.md"
-  ]
-}
+  "packageManager": "yarn@4.9.1"
+}

package/dist/test-utils/index.d.ts

@@ -1,4 +0,0 @@
-import { default as userEvent } from '@testing-library/user-event';
-export * from '@testing-library/react';
-export { render } from './render';
-export { userEvent };

package/dist/test-utils/render.d.ts

@@ -1 +0,0 @@
-export declare function render(ui: React.ReactNode): import('@testing-library/react').RenderResult<typeof import("@testing-library/dom/types/queries"), HTMLElement, HTMLElement>;

package/src/components/AutoForm.tsx

@@ -1,201 +0,0 @@
-import React, { useCallback, useEffect, useMemo } from 'react';
-import { createFormContext, FormValidateInput } from '@mantine/form';
-import { useDebouncedCallback } from '@mantine/hooks';
-import { FieldRenderCustomRender } from '@/types/custom-render';
-import { FieldSchema, FieldType } from '@/types/field';
-import FieldRender from './FieldRender';
-
-
-export interface AutoFormProps {
-  values?: Record<string, any>;
-  schema: FieldSchema[];
-  onSubmit: (values: Record<string, any>) => void;
-  container: (Form: React.ReactNode, onSubmit: VoidFunction, readOnly?: true) => React.ReactNode;
-  fieldContainer?: (field: React.ReactNode, fieldSchema: FieldSchema) => React.ReactNode;
-  customRender?: FieldRenderCustomRender;
-  validate?: FormValidateInput<Record<string, any>>;
-  readOnly?: true;
-  onFieldChange?: (name: string, value: any, values: Record<string, any>) => Record<string, any>;
-}
-
-const [FormProvider, _, useForm] = createFormContext<Record<string, any>>();
-
-const getDefaultValueForField = (type: FieldType): any => {
-  switch (type) {
-    case 'number':
-      return 0;
-    case 'array':
-      return [];
-    case 'check':
-      return false;
-    case 'object':
-      return {};
-    case 'select':
-    case 'date':
-    case 'datetime':
-      return null;
-    default:
-      return '';
-  }
-};
-
-const generateInitialValues = (schema: FieldSchema[]): Record<string, any> => {
-  const result: Record<string, any> = {};
-
-  for (const field of schema) {
-    if (field.type === 'object' && field.fields) {
-      result[field.name] = generateInitialValues(field.fields);
-    } else {
-      result[field.name] = field.initialValue ?? getDefaultValueForField(field.type);
-    }
-  }
-
-  return result;
-};
-
-const isValueEmpty = (value: any): boolean => {
-  return (
-    value === null ||
-    value === undefined ||
-    (typeof value === 'string' && value.trim() === '') ||
-    (Array.isArray(value) && value.length === 0)
-  );
-};
-
-export const validateRequiredFields = (
-  schema: FieldSchema[],
-  values: Record<string, any>,
-  parentPath = ''
-): Record<string, string> => {
-  const errors: Record<string, string> = {};
-
-  for (const field of schema) {
-    const fullName = parentPath ? `${parentPath}.${field.name}` : field.name;
-    const fieldValue = values?.[field.name];
-
-    if (field.type === 'object') {
-      Object.assign(errors, validateRequiredFields(field.fields, fieldValue || {}, fullName));
-    } else if (field.type === 'array') {
-      if (field.required && (!Array.isArray(fieldValue) || fieldValue.length === 0)) {
-        errors[fullName] = field.name + ' is required';
-        continue;
-      }
-
-      if (Array.isArray(fieldValue)) {
-        fieldValue.forEach((item, index) => {
-          Object.assign(errors, validateRequiredFields(field.fields, item, `${fullName}.${index}`));
-        });
-      }
-    } else if (field.required && isValueEmpty(fieldValue)) {
-      errors[fullName] = field.name + ' is required';
-    }
-  }
-
-  return errors;
-};
-
-function buildErrorObject(flatErrors) {
-  const error = {};
-
-  Object.entries(flatErrors).forEach(([key, value]) => {
-    const keys = key.split('.');
-    let curr: Record<string, string> = error;
-
-    keys.forEach((subKey, index) => {
-      const isLast = index === keys.length - 1;
-      const nextKey = keys[index + 1];
-
-      if (isLast) {
-        curr[subKey] = value;
-      } else {
-        if (!(subKey in curr)) {
-          curr[subKey] = {};
-        }
-        curr = curr[subKey];
-      }
-    });
-  });
-
-  return error;
-}
-
-const AutoForm: React.FC<AutoFormProps> = ({
-  onSubmit,
-  schema,
-  container,
-  fieldContainer,
-  customRender,
-  validate,
-  readOnly,
-  values,
-  onFieldChange,
-}) => {
-  const form = useForm({
-    mode: 'uncontrolled',
-    initialValues: generateInitialValues(schema),
-    validate,
-  });
-
-  const formValues = useMemo(() => form.getValues(), [form.getValues()]);
-
-  const onChange = useDebouncedCallback((name: string, value: any) => {
-    form.setFieldValue(name, value);
-    if (onFieldChange) {
-      const updates = onFieldChange(name, value, formValues);
-      form.setValues(updates);
-    }
-  }, 0);
-
-  const getFieldError = useCallback(
-    (type: FieldType, name: string) => {
-      const errors = form.errors;
-
-      if (type === 'object' || type === 'array') {
-        return buildErrorObject(errors)[name];
-      }
-
-      return errors[name];
-    },
-    [form.errors]
-  );
-
-  const handleSubmit = useCallback(() => {
-    const currentValues = form.getValues();
-    const errors = validateRequiredFields(schema, currentValues);
-
-    if (Object.keys(errors).length > 0) {
-      form.setErrors(errors);
-      return;
-    }
-
-    form.onSubmit(onSubmit)();
-  }, [form, onSubmit, schema]);
-
-  useEffect(() => {
-    if (values) {
-      form.initialize(values);
-    }
-  }, [values]);
-
-  const content = (
-    <FormProvider form={form}>
-      {schema.map((field, index) => (
-        <FieldRender
-          key={index}
-          field={field}
-          formValues={formValues}
-          value={formValues[field.name]}
-          error={getFieldError(field.type, field.name)}
-          onChange={onChange}
-          fieldContainer={fieldContainer}
-          customRender={customRender}
-          readOnly={field.readOnly || readOnly}
-        />
-      ))}
-    </FormProvider>
-  );
-
-  return container(content, handleSubmit, readOnly);
-};
-
-export default AutoForm;

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;