@react-fabric/form 1.0.0-beta.4 → 1.0.0-beta.41

package/src/hooks/useFormBuilder.tsx

@@ -21,38 +21,47 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
+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 makeYupField = (field: SchemaDef) => {
+  let yupField: AnyObject = 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 === DATA_TYPES.BOOL) {
+    yupField = yup.boolean();
+    if (field.required)
+      yupField = yupField.test({
+        test: (value: boolean) => !!value,
+      });
+  }
   if (
-    field.datatype === "decimal" ||
-    field.datatype === "number" ||
-    field.datatype === "range"
+    field.datatype === DATA_TYPES.NUMBER ||
+    field.datatype === DATA_TYPES.RANGE
   ) {
     yupField = yup.number();
     !isNil(field.min) && (yupField = yupField.min(field.min));
     !isNil(field.max) && (yupField = yupField.max(field.max));
 
-    if (field.datatype === "range") yupField = yup.array(yupField);
+    if (field.datatype === DATA_TYPES.RANGE) yupField = yup.array(yupField);
   }
-  if (field.datatype === "string") {
-    field.options && (yupField = yupField.oneOf(field.options));
+  if (field.datatype === DATA_TYPES.STRING) {
+    field.options &&
+      !field.allowCustom &&
+      (yupField = yupField.oneOf(field.options));
     field.regex && (yupField = yupField.matches(new RegExp(field.regex)));
   }
 
-  if (field.datatype === "file") {
+  if (field.datatype === DATA_TYPES.FILE) {
     yupField = yup
       .object({
         filename: yup.string().required(),
@@ -83,13 +92,14 @@ const makeYupField = (field: FormSchema) => {
   return yupField.label(field.label);
 };
 
-export const useFormBuilder = (
-  schema: FormSchema[],
+export const 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(
@@ -106,11 +116,12 @@ export const useFormBuilder = (
     <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,6 +129,9 @@ export const useFormBuilder = (
           )}
         </div>
       ))}
+      {filteredSchema.length === 0 && (
+        <EmptyContent message="No schema defined" />
+      )}
     </Fragment>
   );
 

package/src/index.ts

@@ -26,15 +26,23 @@ import "./i18n";
 export { Controller } from "./form/Controller";
 export { Form, type FormRef } from "./form/Form";
 
+export { SchemaEditor } from "./builder/SchemaEditor";
+
 export { useFileUploader } from "./hooks/useFileUploader";
 export { useFormBuilder } from "./hooks/useFormBuilder";
 
-export { type FormSchema } from "./types/schema";
+export {
+  DATA_TYPES,
+  SCHEMA_CUSTOM_LIST,
+  type FormSchema,
+  type SchemaDef,
+} from "./types/schema";
 
 export { ArrayInput } from "./input/ArrayInput";
 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,7 +51,7 @@ 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";

package/src/input/ArrayInput.tsx

@@ -23,26 +23,31 @@
 
 import { DndContext, type DragEndEvent } from "@dnd-kit/core";
 import { SortableContext, useSortable } from "@dnd-kit/sortable";
-import { Button, CoreIcons, Icon, Tooltip } from "@react-fabric/core";
+import {
+  Button,
+  cloneChildren,
+  CoreIcons,
+  Icon,
+  Tooltip,
+} from "@react-fabric/core";
 import { isString } from "@react-fabric/utilities";
 import classNames from "classnames";
 import {
-  Children,
   cloneElement,
   useCallback,
   useImperativeHandle,
   useMemo,
   type PropsWithChildren,
   type ReactNode,
-  type RefObject,
+  type Ref,
 } from "react";
 import { useFieldArray, useFormContext } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 import { FieldWrapper } from "../internal/FieldWrapper";
-import classes from "./ArrayInput.module.css";
 
 import { restrictToVerticalAxis } from "@dnd-kit/modifiers";
 import { CSS } from "@dnd-kit/utilities";
+
 export interface ArrayInputProps {
   /**
    * input label
@@ -77,6 +82,10 @@ export interface ArrayInputProps {
    * minimum required length
    */
   minItems?: number;
+  /**
+   * maximum length
+   */
+  maxItems?: number;
   /**
    * field name to focus on add
    */
@@ -92,11 +101,12 @@ export interface ArrayInputProps {
    * add item button label
    */
   addLabel?: string;
+  buttonPosition?: "top" | "bottom" | "both";
   /**
    * fixed length list
    */
   fixedList?: boolean;
-  arrayRef?: RefObject<{
+  arrayRef?: Ref<{
     addItem: (item: AnyObject) => void;
     removeItem: (idx: number) => void;
   }>;
@@ -104,6 +114,19 @@ export interface ArrayInputProps {
    * Add item
    */
   onAdd?: () => AnyObject;
+
+  /**
+   * field width
+   */
+  width?: number | string;
+  /**
+   * inline label and input
+   */
+  inline?: boolean;
+  /**
+   * label width for inline
+   */
+  labelWidth?: string;
 }
 
 export const ArrayInput = ({
@@ -112,12 +135,14 @@ export const ArrayInput = ({
   addLabel,
   fixedList,
   focusName = "",
+  buttonPosition = "bottom",
   onAdd,
   arrayRef,
   enableSorting,
   disabled = false,
   readOnly = false,
   minItems = 0,
+  maxItems = Number.MAX_SAFE_INTEGER,
   ...rest
 }: ArrayInputProps) => {
   const { t } = useTranslation("form");
@@ -227,9 +252,55 @@ export const ArrayInput = ({
   // @ts-expect-error ignore
   SortableItem.displayName = "SortableItem";
 
+  const addButton = useMemo(
+    () => (
+      <div className="flex justify-end">
+        <Tooltip
+          color="danger-200"
+          content={
+            isString(error)
+              ? `${error}`
+              : (t(
+                  error?.key,
+                  error?.values
+                    ? {
+                        ...error?.values,
+                        label: t(
+                          error.values?.label ?? "form:badkey",
+                          error.values?.path,
+                        ),
+                      }
+                    : {},
+                ) as string)
+          }
+        >
+          <Button
+            size="sm"
+            aria-label="Add item"
+            icon={CoreIcons.insert}
+            onClick={() => handleAdd(onAdd?.())}
+            data-invalid={!!error}
+            disabled={!!disabled || readOnly || fields.length > maxItems}
+            className={classNames("fabric-addButton", "me-10")}
+          >
+            {addLabel ?? t("addArray")}
+          </Button>
+        </Tooltip>
+      </div>
+    ),
+    [error, fields, handleAdd, disabled, readOnly, addLabel, maxItems],
+  );
+
   return (
-    <div className={classes.arrayInput}>
-      <FieldWrapper {...rest}>
+    <div className={"fabric-arrayInput"}>
+      <FieldWrapper
+        {...rest}
+        appendLabel={
+          <div className="-me-2">
+            {!fixedList && onAdd && buttonPosition !== "bottom" && addButton}
+          </div>
+        }
+      >
         <Wrapper>
           {fields.map((item, index) => (
             <SortableItem
@@ -242,7 +313,7 @@ export const ArrayInput = ({
                     index,
                     name: `${name}.${index}`,
                   })
-                : Children.map(children, (child: AnyObject) =>
+                : cloneChildren(children, (child: AnyObject) =>
                     cloneElement(
                       child,
                       Object.assign(
@@ -279,40 +350,7 @@ export const ArrayInput = ({
           ))}
         </Wrapper>
       </FieldWrapper>
-      {!fixedList && onAdd && (
-        <div className="flex justify-end">
-          <Tooltip
-            color="danger"
-            content={
-              isString(error)
-                ? `${error}`
-                : (t(
-                    error?.key,
-                    error?.values
-                      ? {
-                          ...error?.values,
-                          label: t(
-                            error.values?.label ?? "form:badkey",
-                            error.values?.path,
-                          ),
-                        }
-                      : {},
-                  ) as string)
-            }
-          >
-            <Button
-              aria-label="Add item"
-              icon={CoreIcons.insert}
-              onClick={() => handleAdd(onAdd())}
-              data-invalid={!!error}
-              disabled={!!disabled || readOnly}
-              className={classNames(classes.addButton, "me-10")}
-            >
-              {addLabel ?? t("addArray")}
-            </Button>
-          </Tooltip>
-        </div>
-      )}
+      {!fixedList && onAdd && buttonPosition !== "top" && addButton}
     </div>
   );
 };

package/src/input/AvatarInput.tsx

@@ -99,7 +99,7 @@ export const AvatarInput = ({
     <div className="flex flex-nowrap items-end">
       <div className="inline-block leading-none rounded-full relative outline overflow-hidden">
         <Avatar name="temp" size={size} avatar={base64} />
-        <div className="absolute inset-x-0 bottom-0 cursor-pointer bg-opacity-20 hover:bg-opacity-50 bg-black text-white text-xs text-center py-1">
+        <div className="absolute inset-x-0 bottom-0 cursor-pointer bg-black/20 hover:bg-black/50 text-white text-xs text-center py-1">
           <span>Edit</span>
           <input
             type="file"

package/src/input/Checkbox.tsx

@@ -34,7 +34,7 @@ import {
 } from "react";
 import { ErrorIcon } from "../internal/ErrorIcon";
 
-export interface CheckboxProps extends RefProp<HTMLInputElement> {
+interface CheckboxProps extends RefProp<HTMLInputElement> {
   /**
    * checkbox label
    */
@@ -50,8 +50,7 @@ export interface CheckboxProps extends RefProp<HTMLInputElement> {
   /**
    * on checked change
    */
-  onChange?: (checked: boolean | string | number) => void;
-
+  onChange?: (checked: boolean) => void;
   /**
    * disabled input
    */
@@ -94,6 +93,8 @@ export const Checkbox = ({
   width,
   icon,
   iconChecked,
+  // @ts-expect-error ignore
+  required,
   onChange,
   ...rest
 }: CheckboxProps) => {
@@ -150,7 +151,7 @@ export const Checkbox = ({
       <Icon
         className={classNames(
           "p-0.5",
-          actualValue && icon && !iconChecked && "bg-primary-500 text-white",
+          actualValue && icon && !iconChecked && "bg-primary-500 text-white!",
         )}
         size="1.25em"
         color={invalid ? "danger" : "primary"}

package/src/input/ColorInput.tsx

@@ -21,7 +21,19 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import { CoreIcons, Dropdown, Icon } from "@react-fabric/core";
+import {
+  arrow,
+  autoUpdate,
+  flip,
+  FloatingArrow,
+  offset,
+  shift,
+  useClick,
+  useDismiss,
+  useFloating,
+  useInteractions,
+} from "@floating-ui/react";
+import { CoreIcons, Icon } from "@react-fabric/core";
 import { type RefProp } from "@react-fabric/core/dist/types/types";
 import { isString } from "@react-fabric/utilities";
 import classNames from "classnames";
@@ -30,12 +42,16 @@ import {
   useCallback,
   useDeferredValue,
   useEffect,
+  useRef,
   useState,
 } from "react";
 import { type InputProps } from "../types";
 import { ColorPicker, type ColorProps } from "./ColorPicker";
 
-export interface ColorInputProps extends InputProps, ColorProps, RefProp {
+export interface ColorInputProps
+  extends InputProps,
+    Omit<ColorProps, "onChange">,
+    RefProp {
   /**
    * show eydrop picker
    */
@@ -69,17 +85,49 @@ export const ColorInput = ({
   const handleChange = useCallback(
     (e?: string) => {
       setActualValue(e ?? defaultColor);
-      onChange != null && startTransition(() => onChange(e));
+      onChange != null && startTransition(() => onChange(e ?? null));
     },
     [onChange],
   );
 
+  const arrowRef = useRef(null);
+  const [isOpen, setIsOpen] = useState(false);
+  const { refs, floatingStyles, context } = useFloating({
+    open: isOpen,
+    onOpenChange: (open, _, reason) => {
+      if (reason === "reference-press") return;
+      setIsOpen(open);
+    },
+    strategy: "fixed",
+    placement: "bottom",
+    whileElementsMounted: autoUpdate,
+    middleware: [
+      shift({ padding: 8 }),
+      flip(),
+      offset(9),
+      arrow({
+        element: arrowRef,
+      }),
+    ],
+  });
+  const click = useClick(context, {
+    enabled: !disabled,
+  });
+  const dismiss = useDismiss(context, {
+    referencePress: true,
+  });
+
+  const { getReferenceProps, getFloatingProps } = useInteractions([
+    dismiss,
+    click,
+  ]);
+
   return (
     <div
       className={classNames(
         "flex-content min-h-[1.5em] min-w-[3.5em] self-stretch flex items-center outline-tint-200 rounded",
         !disabled && "bg-base",
-        !noOutline && "bg-[var(--fabric-input)] outline overflow-hidden",
+        !noOutline && "bg-(--fabric-input) outline overflow-hidden",
       )}
     >
       {decorateStart && (
@@ -92,36 +140,56 @@ export const ColorInput = ({
           {decorateStart}
         </div>
       )}
-      <Dropdown showArrow disabled={disabled}>
-        <button data-ref="button" className="flex-1 flex items-center">
-          <div
-            role="none"
-            className="h-[1.5em] min-w-[1.5em] flex-1 flex items-center justify-center self-stretch cursor-pointer m-[0.25em] rounded outline outline-tint-100"
-            style={{
-              backgroundColor: actualValue,
-              opacity: disabled ? 0.65 : 1,
-              pointerEvents: disabled ? "none" : undefined,
-            }}
-            onClick={(e) =>
-              (e.currentTarget.nextElementSibling as HTMLElement)?.focus()
-            }
-          >
-            {!actualValue && (
-              <Icon
-                size="md"
-                className="text-muted"
-                icon={CoreIcons.colorSwatch}
-              />
-            )}
-          </div>
-        </button>
-        <ColorPicker
-          {...rest}
-          onChange={handleChange}
-          defaultColor={defaultColor}
-          value={actualValue}
-        />
-      </Dropdown>
+      <button
+        data-ref="button"
+        className="flex-1 flex items-center"
+        ref={refs.setReference}
+        {...getReferenceProps()}
+        data-inner-clickable="true"
+        data-dropdown-open={isOpen ? true : undefined}
+      >
+        <div
+          role="none"
+          className="h-[1.5em] min-w-[1.5em] flex-1 flex items-center justify-center self-stretch cursor-pointer m-[0.25em] rounded outline outline-tint-100"
+          style={{
+            backgroundColor: actualValue,
+            opacity: disabled ? 0.65 : 1,
+            pointerEvents: disabled ? "none" : undefined,
+          }}
+        >
+          {!actualValue && (
+            <Icon
+              size="md"
+              className="text-muted"
+              icon={CoreIcons.colorSwatch}
+            />
+          )}
+        </div>
+      </button>
+      {isOpen && (
+        <div
+          ref={refs.setFloating}
+          style={{
+            zIndex: "var(--z-popover)",
+            ...floatingStyles,
+          }}
+          data-ref="dropdownBody"
+          {...getFloatingProps()}
+        >
+          <ColorPicker
+            {...rest}
+            onChange={handleChange}
+            defaultColor={defaultColor}
+            value={actualValue}
+          />
+          <FloatingArrow
+            ref={arrowRef}
+            context={context}
+            strokeWidth={0.5}
+            className="fill-base stroke-muted"
+          />
+        </div>
+      )}
       {!disabled && showPicker && (
         <Icon
           icon={CoreIcons.colorPicker}

package/src/input/ColorPicker.tsx

@@ -32,7 +32,6 @@ import {
   type FC,
 } from "react";
 import { SketchPicker } from "react-color";
-import classes from "./ColorPicker.module.css";
 
 export interface ColorProps {
   /**
@@ -130,17 +129,14 @@ export const ColorPicker: FC<ColorProps> = memo(
     return (
       <SketchPicker
         width="16rem"
-        className={classes.colorPicker}
+        className={"fabric-colorPicker"}
         styles={
           {
             default: {
               hue: {
-                borderRadius: "99px",
                 boxShadow: "0 0 1px 1px var(--color-shadow)",
               },
               alpha: {
-                height: "1rem",
-                borderRadius: "99px",
                 backgroundColor: "var(--fabric-bg)",
                 boxShadow: "0 0 1px 1px var(--color-shadow)",
               },
@@ -158,36 +154,6 @@ export const ColorPicker: FC<ColorProps> = memo(
                 boxShadow:
                   "0 0 0 1px var(--color-shadow), 0 0 8px var(--fabric-shadow)",
               },
-              Alpha: {
-                alpha: {
-                  paddingRight: "calc(1rem - 2px)",
-                },
-                slider: {
-                  width: "calc(1rem - 2px)",
-                  borderRadius: "99px",
-                  height: "calc(1rem - 2px)",
-                  transform: "none",
-                },
-              },
-              Hue: {
-                hue: {
-                  paddingRight: "calc(1rem - 2px)",
-                },
-                slider: {
-                  width: "calc(1rem - 2px)",
-                  borderRadius: "99px",
-                  height: "calc(1rem - 2px)",
-                  transform: "none",
-                },
-              },
-              Saturation: {
-                circle: {
-                  width: "0.5rem",
-                  borderRadius: "99px",
-                  height: "0.5rem",
-                  transform: "translate(-0.25rem, -0.25rem)",
-                },
-              },
               checkboard: {
                 white: "transparent",
                 black: "red",