@react-fabric/form 1.0.0-beta.9 → 1.0.2

package/src/hooks/useFormBuilder.tsx

@@ -21,38 +21,44 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
+import { yupResolver } from "@hookform/resolvers/yup";
+import { EmptyContent } from "@react-fabric/core";
 import { isEmpty, isNil, yup } from "@react-fabric/utilities";
 import { Fragment, useMemo } from "react";
 import { FormField } from "../builder/FormField";
-import { type FormSchema } from "../types/schema";
+import { type BaseSelectProps } from "../types";
+import { DATA_TYPES, type FormSchema, type SchemaDef } from "../types/schema";
 import { type UploadHandler } from "./useFileUploader";
 
-const makeYupField = (field: FormSchema) => {
-  let yupField: AnyObject = yup.string();
-  if (field.datatype === "schema") {
-    const child: yup.ObjectShape = Object.fromEntries(
-      field.schema.map((field) => [field.id, makeYupField(field)]),
-    );
+function makeYupField(field: SchemaDef) {
+  let yupField: yup.Schema = yup.string().trim();
+  if (field.datatype === DATA_TYPES.SCHEMA) {
+    const child: yup.ObjectShape = Object.fromEntries(field.schema.map((field) => [field.id, makeYupField(field)]));
     yupField = yup.object(child);
   }
-  if (field.datatype === "boolean") yupField = yup.boolean();
-  if (
-    field.datatype === "decimal" ||
-    field.datatype === "number" ||
-    field.datatype === "range"
-  ) {
-    yupField = yup.number();
-    !isNil(field.min) && (yupField = yupField.min(field.min));
-    !isNil(field.max) && (yupField = yupField.max(field.max));
+  if (field.datatype === DATA_TYPES.BOOL) {
+    yupField = yup.boolean();
+    if (field.required)
+      yupField = yupField.test({
+        test: (value: boolean) => !!value,
+      });
+  }
+  if (field.datatype === DATA_TYPES.NUMBER || field.datatype === DATA_TYPES.RANGE) {
+    let numberField = yup.number();
+    if (!isNil(field.min)) numberField = numberField.min(field.min);
+    if (!isNil(field.max)) numberField = numberField.max(field.max);
 
-    if (field.datatype === "range") yupField = yup.array(yupField);
+    if (field.datatype === DATA_TYPES.RANGE) yupField = yup.array(numberField);
+    else yupField = numberField;
   }
-  if (field.datatype === "string") {
-    field.options && (yupField = yupField.oneOf(field.options));
-    field.regex && (yupField = yupField.matches(new RegExp(field.regex)));
+  if (field.datatype === DATA_TYPES.STRING) {
+    let stringField = yup.string().trim();
+    if (field.options && !field.allowCustom) stringField = stringField.oneOf(field.options);
+    if (field.regex) stringField = stringField.matches(new RegExp(field.regex));
+    yupField = stringField;
   }
 
-  if (field.datatype === "file") {
+  if (field.datatype === DATA_TYPES.FILE) {
     yupField = yup
       .object({
         filename: yup.string().required(),
@@ -71,46 +77,77 @@ const makeYupField = (field: FormSchema) => {
     }
   }
 
-  if (field.required) {
-    yupField = yupField.required();
-  }
-
   if (field.multiple) {
-    yupField = yup.array(yupField);
-    field.required && (yupField = yupField.required().min(1));
+    let arrayField = yup.array(yupField);
+    if (field.required) arrayField = arrayField.required().min(1);
+    yupField = arrayField;
+  } else {
+    if (field.required) {
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+      yupField = yupField.required();
+    }
   }
 
   return yupField.label(field.label);
-};
+}
 
-export const useFormBuilder = (
-  schema: FormSchema[],
+/**
+ * useFormBuilder hook to create a form definition based on a schema.
+ * It generates a Yup validation schema and a form definition component.
+ *
+ * @param {FormSchema} schema - The schema defining the form fields.
+ * @param {Object} options - Optional parameters for the form builder.
+ * @returns An object containing the form definition and the Yup validation schema.
+ *
+ * @example
+ * ```jsx
+ * const { formDef, schemaDef } = useFormBuilder(schema, {
+ *   prefix: "form",
+ *   inline: true,
+ *   fileUrl: (path) => `/files/${path}`,
+ *   uploadHandler: async (file) => {
+ *    // handle file upload
+ *   },
+ *  optionLists: {
+ *    // define option lists for select fields
+ *  }
+ * * });
+ * <FormBuilder
+ *   schema={schemaDef}
+ *   onSubmit={(data) => console.log(data)}
+ * >
+ *   {formDef}
+ * </FormBuilder>
+ * ```
+ */
+export function useFormBuilder<T extends AnyObject = string>(
+  schema: FormSchema,
   options: {
     prefix?: string;
     inline?: boolean;
     fileUrl?: (path: string) => string;
     uploadHandler?: UploadHandler;
+    optionLists?: KeyValue<BaseSelectProps<T>>;
   } = {},
-) => {
-  const filteredSchema = useMemo(
-    () => schema.filter?.((schm) => !!schm.id) ?? [],
-    [schema],
-  );
-  const schemaDef = yup.object(
-    Object.fromEntries(
-      filteredSchema.map((field) => [field.id, makeYupField(field)]),
-    ),
+) {
+  const filteredSchema = useMemo(() => schema.filter?.((schm) => !!schm.id) ?? [], [schema]);
+  const schemaDef = useMemo(
+    () => yup.object(Object.fromEntries(filteredSchema.map((field) => [field.id, makeYupField(field)]))),
+    [filteredSchema],
   );
 
+  const resolver = useMemo(() => yupResolver(schemaDef), [schemaDef]);
+
   const formDef = (
     <Fragment>
       {filteredSchema.map((field, idx) => (
         <div className="mb-4" key={field.id}>
-          {field.datatype === "schema" ? null : (
+          {field.datatype === DATA_TYPES.SCHEMA ? null : (
             <FormField
               {...field}
               autoFocus={idx === 0}
               fileUrl={options.fileUrl}
+              optionLists={options.optionLists}
               uploadHandler={options.uploadHandler}
               inline={options.inline}
               prefix={options.prefix}
@@ -118,11 +155,13 @@ export const useFormBuilder = (
           )}
         </div>
       ))}
+      {filteredSchema.length === 0 && <EmptyContent message="No schema defined" />}
     </Fragment>
   );
 
   return {
     formDef,
+    resolver,
     schemaDef,
   };
-};
+}

package/src/i18n/{ar.json → ar/form.json}

@@ -1,17 +1,18 @@
 {
   "addArray": "اضافة عنصر",
   "password": {
-    "show": "عرض كلمة المرور",
-    "hide": "اخفاء كلمة المرور"
+    "hide": "اخفاء كلمة المرور",
+    "show": "عرض كلمة المرور"
   },
   "select": {
+    "createOption": "إنشاء خيار جديد ل ",
     "emptyList": "لا توجد خيارات متاحة",
-    "notFound": "لم يتم العثور على خيارات ل ",
-    "createOption": "إنشاء خيار جديد ل "
+    "notFound": "لم يتم العثور على خيارات ل "
   },
   "yup": {
     "arrayMax": "{{label}} حدد ما يصل {{max}} غرض",
     "arrayMin": "{{label}} اختر على الأقل {{min}} غرض",
+    "empty": "{{label}} يجب ألا يكون فارغًا",
     "invalid": "{{label}} نوع بيانات غير صالح",
     "invalidType": "{{label}} غير صالح",
     "numberMax": "{{label}} الحد الأقصى {{max}}",

package/src/i18n/{en.json → en/form.json}

@@ -1,19 +1,19 @@
 {
   "addArray": "Add Item",
   "password": {
-    "show": "Show password",
-    "hide": "Hide password"
+    "hide": "Hide password",
+    "show": "Show password"
   },
   "select": {
+    "createOption": "Create new option for <0>{{query}}</0>",
     "emptyList": "No options available",
-    "notFound": "No options found for <0>{{query}}</0>",
-    "createOption": "Create new option for <0>{{query}}</0>"
+    "notFound": "No options found for <0>{{query}}</0>"
   },
   "yup": {
     "arrayMax": "{{label}} must contain upto {{max}} item",
     "arrayMin": "{{label}} must contain atleast {{min}} item",
-    "invalid": "{{label}} invalid",
     "empty": "{{label}} must not be empty",
+    "invalid": "{{label}} invalid",
     "invalidType": "{{label}} invalid datatype",
     "numberMax": "{{label}} maximum {{max}}",
     "numberMin": "{{label}} minimum {{min}}",

package/src/i18n/index.ts

@@ -22,7 +22,7 @@
  */
 
 import { addTranslationBundle } from "@react-fabric/core";
-import ar from "./ar.json";
-import en from "./en.json";
+import ar from "./ar/form.json";
+import en from "./en/form.json";
 
 addTranslationBundle("form", { en, ar });

package/src/index.ts

@@ -1,40 +1,49 @@
-/*
+/**
  * React Fabric
- * @version: 1.0.0
+ * @version 1.0.0
+ * @license MIT
+ * @copyright 2024 Adarsh Pastakia
  *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
  *
- * The MIT License (MIT)
- * Copyright (c) 2024 Adarsh Pastakia
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
  *
- * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
- * and associated documentation files (the "Software"), to deal in the Software without restriction,
- * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
- * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
- * subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in all copies or substantial
- * portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
- * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
- * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
- * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
  */
 
+export const FORM_PACKAGE = "@react-fabric/form";
+export const FORM_VERSION = "1.0.1";
+
 import "./i18n";
 
+// FORM
 export { Controller } from "./form/Controller";
 export { Form, type FormRef } from "./form/Form";
+export { useForm } from "./form/useForm";
 
+// HOOKS
 export { useFileUploader } from "./hooks/useFileUploader";
 export { useFormBuilder } from "./hooks/useFormBuilder";
 
-export { type FormSchema } from "./types/schema";
-
+// INPUT FIELDS
 export { ArrayInput } from "./input/ArrayInput";
+export { AvatarInput } from "./input/AvatarInput";
 export { Checkbox } from "./input/Checkbox";
 export { ColorInput } from "./input/ColorInput";
 export { ColorPicker } from "./input/ColorPicker";
+export { DateInput } from "./input/DateInput";
 export { Field } from "./input/Field";
 export { FileInput } from "./input/File";
 export { HiddenInput } from "./input/Hidden";
@@ -43,12 +52,17 @@ export { Number } from "./input/Number";
 export { Password } from "./input/Password";
 export { Radio } from "./input/Radio";
 export { RadioGroup } from "./input/RadioGroup";
-export { Range } from "./input/Range";
+export { RangeSlider } from "./input/RangeSlider";
 export { Search } from "./input/Search";
 export { Slider } from "./input/Slider";
 export { Switch } from "./input/Switch";
 export { Textarea } from "./input/Textarea";
+
+// SELECT FIELDS
 export { AutoComplete } from "./select/AutoComplete";
 export { DualList } from "./select/DualList";
 export { List } from "./select/List";
 export { Select } from "./select/Select";
+
+export { SchemaEditor } from "./builder/SchemaEditor";
+export { DATA_TYPES, SCHEMA_CUSTOM_LIST, type FormSchema, type SchemaDef } from "./types/schema";