@react-fabric/form 1.0.0-beta.8 → 1.0.1

package/src/builder/components/SchemaField.tsx

@@ -0,0 +1,405 @@
+/*
+ * React Fabric
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2025 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 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.
+ */
+
+import { useSortable } from "@dnd-kit/react/sortable";
+import {
+  Button,
+  Collapsable,
+  Content,
+  Footer,
+  Modal,
+  type ModalProps,
+  ToggleButtonGroup,
+  useOverlayService,
+} from "@react-fabric/core";
+import { EMPTY_ARRAY, cn } from "@react-fabric/utilities";
+import { Fragment, type PropsWithChildren, useCallback, useEffect, useState } from "react";
+import { Controller } from "../../form/Controller";
+import { ArrayInput } from "../../input/ArrayInput";
+import { Checkbox } from "../../input/Checkbox";
+import { DateInput } from "../../input/DateInput";
+import { Field } from "../../input/Field";
+import { HiddenInput } from "../../input/Hidden";
+import { Input } from "../../input/Input";
+import { Number } from "../../input/Number";
+import { Select } from "../../select/Select";
+import type { SchemaDef } from "../../types/schema";
+import {
+  DATA_TYPES,
+  type DateSchema,
+  type DefaultSchema,
+  type NumberSchema,
+  SCHEMA_CUSTOM_LIST,
+  type SchemaEditorProps,
+  type StringSchema,
+  type ValueType,
+} from "../../types/schema";
+
+function SortableItem({
+  id,
+  index,
+  dynamic,
+  children,
+  className,
+}: PropsWithChildren<{ id: string; index: number; dynamic: boolean; className: string }>) {
+  const { ref, handleRef, isDragging } = useSortable({ id, index, disabled: !dynamic });
+  if (dynamic) {
+    return (
+      <div className={className} ref={ref}>
+        <div
+          ref={handleRef}
+          className={cn(
+            "invisible group-hover/field:visible my-2 w-4",
+            isDragging ? "cursor-grabbing bg-default" : "cursor-grab",
+          )}
+          style={{
+            backgroundImage: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='4' width='4'%3E%3Ccircle cx='2' cy='2' r='1' fill='%238888' /%3E%3C/svg%3E ")`,
+          }}
+        />
+        {children}
+      </div>
+    );
+  }
+
+  return <div className={className}>{children}</div>;
+}
+
+function OptionModal({ field, ...props }: ModalProps<{ field: string; title?: string }>) {
+  return (
+    <Modal {...props}>
+      <Content>
+        <ArrayInput name={`${field}.options`} onAdd={() => String("")}>
+          <Controller>
+            <Input />
+          </Controller>
+        </ArrayInput>
+      </Content>
+      <Footer flex justify="end" className="sticky bottom-0 border-t bg-default px-6 py-2">
+        <Button variant="link" onClick={props.onClose}>
+          Close
+        </Button>
+      </Footer>
+    </Modal>
+  );
+}
+
+export function SchemaField({
+  id,
+  index,
+  field,
+  fieldId,
+  getModel,
+  onRemove,
+  defaultOpen = true,
+  optionLists = EMPTY_ARRAY,
+  dynamic,
+  onTypeChange,
+  acceptableTypes,
+}: {
+  id: string;
+  index: number;
+  field: string;
+  fieldId: string;
+  defaultOpen?: boolean;
+  onRemove: () => void;
+  getModel: () => SchemaDef;
+  onTypeChange: (val: SchemaDef) => void;
+} & Omit<SchemaEditorProps, "schemaDef" | "onChange">) {
+  const [type, setType] = useState<DATA_TYPES>();
+  const [multiple, setMultiple] = useState(false);
+  const [hasOptions, setHasOptions] = useState(false);
+  const [customOptions, setCustomOptions] = useState(false);
+
+  const [renderOptionModal, openOptionModal] = useOverlayService(OptionModal);
+
+  useEffect(() => {
+    const tmr = setTimeout(() => {
+      const model = getModel();
+      setType(model.datatype);
+      setMultiple(!!model.multiple);
+      if ("optionList" in model) {
+        setHasOptions(!!model.optionList);
+        setCustomOptions(model.optionList === SCHEMA_CUSTOM_LIST);
+      }
+    }, 10);
+
+    return () => {
+      clearTimeout(tmr);
+    };
+    // eslint-disable-next-line @eslint-react/exhaustive-deps
+  }, []);
+
+  const handleTypeChange = useCallback(
+    (type: DATA_TYPES) => {
+      if (type) {
+        const modelRef = getModel();
+        let reset = {
+          datatype: type,
+          id,
+          label: modelRef.label,
+          defaultValue: modelRef.defaultValue,
+          required: modelRef.required,
+          multiple: type === DATA_TYPES.AVATAR ? false : modelRef.multiple,
+          minItems: modelRef.minItems,
+          maxItems: modelRef.maxItems,
+        } as DefaultSchema & ValueType;
+        if (type === DATA_TYPES.STRING) {
+          reset = Object.assign(reset, {
+            optionList: (modelRef as StringSchema).optionList,
+            options: (modelRef as StringSchema).options,
+            regex: (modelRef as StringSchema).regex,
+          } as StringSchema);
+        } else if (type === DATA_TYPES.DATE) {
+          reset = Object.assign(reset, {
+            min: (modelRef as DateSchema).min,
+            max: (modelRef as DateSchema).max,
+          } as DateSchema);
+        } else if (type === DATA_TYPES.NUMBER || type === DATA_TYPES.RANGE) {
+          reset = Object.assign(reset, {
+            min: (modelRef as NumberSchema).min,
+            max: (modelRef as NumberSchema).max,
+            step: (modelRef as NumberSchema).step,
+          } as NumberSchema);
+        }
+        if (type === DATA_TYPES.AVATAR) {
+          setMultiple(false);
+        }
+        onTypeChange(reset);
+        setType(type);
+      }
+    },
+    // eslint-disable-next-line @eslint-react/exhaustive-deps
+    [id],
+  );
+
+  return (
+    <SortableItem id={fieldId} index={index} dynamic={!!dynamic} className="flex flex-nowrap gap-1 group/field">
+      <Collapsable key={fieldId} open={defaultOpen} className="flex-1">
+        <div className="flex flex-nowrap items-center">
+          <span className="flex-1 truncate">{id}</span>
+          {dynamic && (
+            <Button
+              size="sm"
+              color="danger"
+              variant="link"
+              aria-label="Delete"
+              icon="icon-[mdi--trash-can-outline]"
+              onClick={onRemove}
+              className="invisible group-hover/field:visible"
+            />
+          )}
+        </div>
+        <div className="flex flex-col gap-1 pb-4">
+          <Controller name={`${field}.id`}>
+            <HiddenInput hiddenValue={id} />
+          </Controller>
+          <Controller name={`${field}.datatype`}>
+            <Select
+              inline
+              label="Type"
+              placeholder="Data type"
+              options={acceptableTypes ?? EMPTY_ARRAY}
+              onChange={(val) => handleTypeChange(val as unknown as DATA_TYPES)}
+            />
+          </Controller>
+          <Controller name={`${field}.label`}>
+            <Input
+              inline
+              label="Label"
+              allowClear
+              placeholder="Label..."
+              decorateEndShowWhenEmpty
+              decorateEnd={<span className="text-sm text-tint-300 px-1">OPTIONAL</span>}
+            />
+          </Controller>
+          {type === DATA_TYPES.STRING && (
+            <Fragment>
+              <Controller name={`${field}.regex`}>
+                <Input
+                  inline
+                  label="Regex validation"
+                  allowClear
+                  placeholder="Regex value..."
+                  decorateEndShowWhenEmpty
+                  decorateEnd={<span className="text-sm text-tint-300 px-1">OPTIONAL</span>}
+                />
+              </Controller>
+              <Field inline label="Option list">
+                <Controller name={`${field}.optionList`}>
+                  <Select
+                    allowClear
+                    options={[SCHEMA_CUSTOM_LIST, ...optionLists]}
+                    onChange={(v) => setCustomOptions(v === SCHEMA_CUSTOM_LIST)}
+                  />
+                </Controller>
+                {customOptions && (
+                  <Button
+                    icon="icon-[mdi--list-box-outline]"
+                    aria-label="Custom options"
+                    onClick={() => {
+                      void openOptionModal({ field, title: `${id} Options` });
+                    }}
+                  />
+                )}
+              </Field>
+              {renderOptionModal()}
+            </Fragment>
+          )}
+          {type === DATA_TYPES.FILE && (
+            <Fragment>
+              <Controller name={`${field}.accept`}>
+                <Input
+                  inline
+                  label="Accept types"
+                  allowClear
+                  placeholder="Accept value..."
+                  decorateEndShowWhenEmpty
+                  decorateEnd={<span className="text-sm text-tint-300 px-1">OPTIONAL</span>}
+                />
+              </Controller>
+            </Fragment>
+          )}
+          {[DATA_TYPES.NUMBER, DATA_TYPES.RANGE].includes(type as unknown as DATA_TYPES) && (
+            <Fragment>
+              <Controller name={`${field}.min`}>
+                <Number
+                  inline
+                  label="Min value"
+                  allowClear
+                  placeholder="Minimum value..."
+                  decorateEndShowWhenEmpty
+                  decorateEnd={
+                    <span className="text-sm text-tint-300 px-1 absolute inset-e-4 top-1 pointer-events-none">OPTIONAL</span>
+                  }
+                />
+              </Controller>
+              <Controller name={`${field}.max`}>
+                <Number
+                  inline
+                  label="Max value"
+                  allowClear
+                  placeholder="Maximum value..."
+                  decorateEndShowWhenEmpty
+                  decorateEnd={
+                    <span className="text-sm text-tint-300 px-1 absolute inset-e-4 top-1 pointer-events-none">OPTIONAL</span>
+                  }
+                />
+              </Controller>
+              <Controller name={`${field}.step`}>
+                <Number
+                  inline
+                  label="Step value"
+                  allowClear
+                  placeholder="Step value..."
+                  decorateEndShowWhenEmpty
+                  decorateEnd={
+                    <span className="text-sm text-tint-300 px-1 absolute inset-e-4 top-1 pointer-events-none">OPTIONAL</span>
+                  }
+                />
+              </Controller>
+            </Fragment>
+          )}
+          {type === DATA_TYPES.DATE && (
+            <Fragment>
+              <Field inline label="Type" plain>
+                <Controller name={`${field}.type`}>
+                  <ToggleButtonGroup value="" fullWidth className="flex-1">
+                    <Button className="flex-1" value="date">
+                      Date
+                    </Button>
+                    <Button className="flex-1" value="datetime">
+                      Date Time
+                    </Button>
+                  </ToggleButtonGroup>
+                </Controller>
+              </Field>
+              <Controller name={`${field}.min`}>
+                <DateInput
+                  inline
+                  label="Min value"
+                  allowClear
+                  placeholder="Minimum value..."
+                  decorateEndShowWhenEmpty
+                  decorateEnd={<span className="text-sm text-tint-300 px-1">OPTIONAL</span>}
+                />
+              </Controller>
+              <Controller name={`${field}.max`}>
+                <DateInput
+                  inline
+                  label="Max value"
+                  allowClear
+                  placeholder="Maximum value..."
+                  decorateEndShowWhenEmpty
+                  decorateEnd={<span className="text-sm text-tint-300 px-1">OPTIONAL</span>}
+                />
+              </Controller>
+            </Fragment>
+          )}
+          <Field label=" " inline plain>
+            <Controller name={`${field}.required`}>
+              <Checkbox label="Required" />
+            </Controller>
+            {type !== DATA_TYPES.AVATAR && (
+              <Controller name={`${field}.multiple`}>
+                <Checkbox label="Multiple" onChange={setMultiple} />
+              </Controller>
+            )}
+            {hasOptions && (
+              <Controller name={`${field}.allowCustom`}>
+                <Checkbox label="Allow custom value" />
+              </Controller>
+            )}
+          </Field>
+          {multiple && (
+            <Fragment>
+              <Controller name={`${field}.minItems`}>
+                <Number
+                  inline
+                  label="Min items"
+                  allowClear
+                  placeholder="Minimum items..."
+                  decorateEndShowWhenEmpty
+                  decorateEnd={
+                    <span className="text-sm text-tint-300 px-1 absolute inset-e-4 top-1 pointer-events-none">OPTIONAL</span>
+                  }
+                />
+              </Controller>
+              <Controller name={`${field}.maxItems`}>
+                <Number
+                  inline
+                  label="Max items"
+                  allowClear
+                  placeholder="Maximum items..."
+                  decorateEndShowWhenEmpty
+                  decorateEnd={
+                    <span className="text-sm text-tint-300 px-1 absolute inset-e-4 top-1 pointer-events-none">OPTIONAL</span>
+                  }
+                />
+              </Controller>
+            </Fragment>
+          )}
+        </div>
+      </Collapsable>
+    </SortableItem>
+  );
+}

package/src/form/Controller.tsx

@@ -21,12 +21,7 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import {
-  Children,
-  cloneElement,
-  isValidElement,
-  type ReactElement,
-} from "react";
+import { Children, cloneElement, isValidElement, type ReactElement } from "react";
 import { Controller as HFController } from "react-hook-form";
 
 export interface ControllerProps {
@@ -35,7 +30,7 @@ export interface ControllerProps {
    */
   name?: string;
   children:
-    | ReactElement
+    | ReactElement<KeyValue>
     | ((props: {
         name: string;
         error?: string;
@@ -46,30 +41,71 @@ export interface ControllerProps {
         disabled?: boolean;
         onBlur: () => void;
         onChange: (value: AnyObject) => void;
-        inputRef?: React.Ref<HTMLInputElement>;
+        ref?: React.Ref<AnyObject>;
       }) => ReactElement);
 }
 
-export const Controller = ({ name, children, ...rest }: ControllerProps) => {
+/**
+ * This component is used to wrap form controls
+ * and provide them with the necessary props and state management.
+ *
+ * It uses the `Controller` component from `react-hook-form`
+ * to manage the form state and validation.
+ *
+ * It accepts a `name` prop to identify the form control,
+ * and a `children` prop which can either be a React element
+ * or a function that receives the necessary props to render the control.
+ *
+ * The component will pass down the following props to the child:
+ * - `name`: the name of the form control
+ * - `error`: any validation error message
+ * - `checked`: whether the control is checked (for checkboxes/radios)
+ * - `value`: the current value of the control
+ * - `invalid`: whether the control is invalid
+ * - `readOnly`: whether the control is read-only (disabled during submission)
+ * - `disabled`: whether the control is disabled
+ * - `onBlur`: function to call when the control loses focus
+ * - `onChange`: function to call when the control value changes
+ * - `ref`: a ref to the control element
+ * * The component also handles the `ref` prop to ensure that it is passed correctly
+ * to the child component, allowing for proper focus management and DOM access.
+ *
+ * @example
+ * ```jsx
+ * <Controller
+ *   name="username"
+ *   children={({ name, error, checked, value, invalid, readOnly, onChange }) => (
+ *     <input
+ *       type="text"
+ *       name={name}
+ *       onChange={onChange}
+ *       readOnly={readOnly}
+ *       aria-invalid={invalid}
+ *       value={value}
+ *     />
+ *   )}
+ * />
+ * ```
+ */
+export function Controller(props: ControllerProps) {
+  const { name, children, ...rest } = props;
   if (!name) throw Error("Form Controller missing `name` prop");
   return (
     <HFController
       name={name}
-      render={({
-        field: { ref, onChange, ...field },
-        fieldState: { error },
-        formState: { isSubmitting },
-      }) =>
-        isValidElement<AnyObject>(children)
-          ? cloneElement(Children.only(children), {
+      render={({ field: { ref, onChange, ...field }, fieldState: { error }, formState: { isSubmitting } }) =>
+        isValidElement(children)
+          ? // eslint-disable-next-line @eslint-react/no-children-only
+            cloneElement(Children.only(children), {
               ...field,
               ...rest,
-              ref: (el: AnyObject) => {
-                el && ref(el);
+              ref: (el: HTMLInputElement) => {
+                if (el) ref(el);
                 try {
-                  if (children.props.ref && "current" in children.props.ref)
-                    children.props.ref.current = el;
-                  if (children.props.ref?.prototype) children.props.ref(el);
+                  // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+                  if (children.props.ref && "current" in children.props.ref) children.props.ref.current = el;
+                  // eslint-disable-next-line @typescript-eslint/no-unsafe-call
+                  if (typeof children.props.ref === "function") children.props.ref(el);
                 } catch (_) {
                   //
                 }
@@ -80,14 +116,15 @@ export const Controller = ({ name, children, ...rest }: ControllerProps) => {
               error: error?.message ?? children.props.error,
               onChange: (v: AnyObject) => {
                 onChange(v);
+                // eslint-disable-next-line @typescript-eslint/no-unsafe-call
                 children.props.onChange?.(v);
               },
             })
           : children({
               ...field,
               ...rest,
-              inputRef: (el: AnyObject) => {
-                el && ref(el);
+              ref: (el: AnyObject) => {
+                if (el) ref(el);
               },
               readOnly: isSubmitting,
               invalid: !!error?.message,
@@ -100,4 +137,4 @@ export const Controller = ({ name, children, ...rest }: ControllerProps) => {
       }
     />
   );
-};
+}