@react-fabric/form 1.0.0-beta.32 → 1.0.0-beta.33

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,18 @@ 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, 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 +46,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/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) => {

package/src/input/DateInput.tsx

@@ -0,0 +1,248 @@
+/*
+ * 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 {
+  arrow,
+  autoUpdate,
+  flip,
+  FloatingArrow,
+  offset,
+  shift,
+  useClick,
+  useDismiss,
+  useFloating,
+  useFocus,
+  useInteractions,
+} from "@floating-ui/react";
+import { type RefProp } from "@react-fabric/core/dist/types/types";
+import { type DateLike, DatePanel, DateUtil } from "@react-fabric/date";
+import { mergeRefs } from "@react-fabric/utilities";
+import {
+  type ChangeEvent,
+  startTransition,
+  useCallback,
+  useDeferredValue,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import { InputWrapper } from "../internal/InputWrapper";
+import { type InputProps } from "../types";
+import { handleEnter } from "../utils";
+import classNames from "classnames";
+
+export interface DateProps
+  extends InputProps<string>,
+    RefProp<HTMLInputElement> {
+  type?: "date" | "datetime";
+  /**
+   * date format
+   */
+  format?: string;
+  /**
+   * minimum value
+   */
+  min?: DateLike;
+  /**
+   * maximum value
+   */
+  max?: DateLike;
+}
+
+export const DateInput = ({
+  ref,
+  name,
+  value,
+  invalid,
+  readOnly,
+  disabled,
+  required,
+  placeholder,
+  autoFocus,
+  error,
+  type = "date",
+  onChange,
+  onEnterPressed,
+  format = "dd/MM/yyyy",
+  min,
+  max,
+  ...rest
+}: DateProps) => {
+  const [actualValue, setActualValue] = useState("");
+  const [inputValue, setInputValue] = useState("");
+  const deferred = useDeferredValue(value);
+
+  const inputFormat = useMemo(
+    () => (type === "datetime" ? "yyyy-MM-dd HH:mm" : "yyyy-MM-dd"),
+    [type],
+  );
+
+  useEffect(() => {
+    setActualValue(deferred ?? "");
+    setInputValue(deferred ? DateUtil.format(deferred, inputFormat) : "");
+  }, [deferred, inputFormat]);
+
+  const handleEnterPressed = useMemo(
+    () => handleEnter(onEnterPressed),
+    [onEnterPressed],
+  );
+
+  const handleChange = useCallback(
+    (e?: ChangeEvent<HTMLInputElement>) => {
+      const value = e?.currentTarget.value;
+      if (value) {
+        const parsed = DateUtil.parseDate(value);
+        setActualValue(parsed?.toISOString?.());
+        setInputValue(DateUtil.format(parsed, inputFormat));
+        onChange != null &&
+          startTransition(() => onChange(parsed?.toISOString?.()));
+      } else {
+        setActualValue("");
+        setInputValue("");
+        onChange != null && startTransition(() => onChange(""));
+      }
+    },
+    [onChange, inputFormat],
+  );
+
+  const handleDateChange = useCallback(
+    (value?: string) => {
+      if (value) {
+        const parsed = DateUtil.parseDate(value);
+        setActualValue(parsed?.toISOString?.());
+        setInputValue(DateUtil.format(parsed, inputFormat));
+        onChange != null &&
+          startTransition(() => onChange(parsed?.toISOString?.()));
+      } else {
+        setActualValue("");
+        setInputValue("");
+        onChange != null && startTransition(() => onChange(""));
+      }
+    },
+    [onChange, inputFormat],
+  );
+
+  const arrowRef = useRef(null);
+  const [isOpen, setIsOpen] = useState(false);
+  const { refs, floatingStyles, context } = useFloating({
+    open: isOpen,
+    onOpenChange: (open, _, reason) => {
+      console.log(reason);
+      if (reason === "reference-press") return;
+      setIsOpen(open);
+    },
+    strategy: "fixed",
+    placement: "bottom-start",
+    whileElementsMounted: autoUpdate,
+    middleware: [
+      shift({ padding: 8 }),
+      flip(),
+      offset(9),
+      arrow({
+        element: arrowRef,
+      }),
+    ],
+  });
+
+  const focus = useFocus(context, {
+    enabled: !disabled,
+  });
+  const click = useClick(context, {
+    enabled: !disabled,
+    toggle: false,
+  });
+  const dismiss = useDismiss(context, {
+    referencePress: true,
+  });
+
+  const { getReferenceProps, getFloatingProps } = useInteractions([
+    dismiss,
+    click,
+    focus,
+  ]);
+
+  return (
+    <InputWrapper
+      showClear={!!actualValue}
+      onClear={handleChange}
+      invalid={invalid}
+      readOnly={readOnly}
+      disabled={disabled}
+      required={required}
+      error={error}
+      {...rest}
+    >
+      <input
+        className={classNames(
+          "appearance-none bg-transparent py-1 px-2 flex-1 border-none outline-none ring-0 peer",
+          !value && "empty",
+        )}
+        aria-invalid={invalid}
+        aria-disabled={disabled}
+        aria-readonly={readOnly}
+        aria-errormessage={error}
+        placeholder={placeholder}
+        disabled={disabled}
+        readOnly={readOnly}
+        data-testid={name}
+        name={name}
+        size={1}
+        type={type === "datetime" ? "datetime-local" : "date"}
+        autoComplete="off"
+        autoFocus={autoFocus}
+        value={inputValue}
+        ref={mergeRefs(ref, refs.setReference)}
+        {...getReferenceProps()}
+        onChange={handleChange}
+        onKeyDown={handleEnterPressed}
+      />
+      {isOpen && (
+        <div
+          ref={refs.setFloating}
+          style={{
+            zIndex: "var(--z-popover)",
+            ...floatingStyles,
+          }}
+          className="shadow-lg bg-base ring-1 ring-tint-100"
+          data-ref="dropdownBody"
+          {...getFloatingProps()}
+        >
+          <DatePanel
+            withTime={type === "datetime"}
+            value={actualValue}
+            max={max}
+            min={min}
+            onChange={handleDateChange}
+          />
+          <FloatingArrow
+            ref={arrowRef}
+            context={context}
+            strokeWidth={0.5}
+            className="fill-base stroke-muted"
+          />
+        </div>
+      )}
+    </InputWrapper>
+  );
+};

package/src/input/Field.tsx

@@ -87,8 +87,9 @@ export const Field = ({
           classes.fieldGroup,
           !plain && !noOutline && "outline",
           !plain && "bg-base",
+          plain && "flex-wrap",
           "flex-1 rounded",
-          !vertical && "flex flex-nowrap",
+          !vertical && "flex",
         )}
       >
         {cloneChildren(children, (child: AnyObject) =>

package/src/input/{Range.tsx → RangeSlider.tsx}

@@ -97,7 +97,7 @@ export interface RangeProps
 /**
  * Number Range input
  */
-export const Range = ({
+export const RangeSlider = ({
   error,
   name,
   value,

package/src/input/Switch.tsx

@@ -102,6 +102,8 @@ export const Switch = ({
   onLabelColor,
   offLabelColor,
   defaultColor,
+  // @ts-expect-error ignore
+  required,
   onChange,
   ...rest
 }: SwitchProps) => {

package/src/internal/Field.module.css

@@ -71,7 +71,7 @@
     }
 
     & > input[type="number"] + .inputClear {
-      margin-inline: -3rem 2rem;
+      margin-inline: -3rem 0;
     }
 
     & input::-ms-clear,
@@ -90,6 +90,17 @@
       letter-spacing: 2px;
     }
 
+    & input[type="date"]::-webkit-calendar-picker-indicator,
+    & input[type="datetime-local"]::-webkit-calendar-picker-indicator {
+      display: none;
+      appearance: none;
+    }
+
+    & input[type="date"]:global(.empty)::-webkit-datetime-edit,
+    & input[type="datetime-local"]:global(.empty)::-webkit-datetime-edit {
+      color: theme(colors.tint.400);
+    }
+
     & input:-webkit-autofill {
       box-shadow: 0 0 0 999em var(--fabric-input) inset;
 

package/src/internal/InputWrapper.tsx

@@ -44,6 +44,8 @@ export const InputWrapper = ({
   showClear,
   decorateStart,
   decorateEnd,
+  decorateEndShowWhenEmpty,
+  decorateEndHideWhenEmpty,
   children,
   onClear,
   noOutline,
@@ -155,6 +157,9 @@ export const InputWrapper = ({
             classes.decorate,
             "text-muted leading-none flex-content",
             isString(decorateEnd) && "px-1",
+            decorateEndHideWhenEmpty && "peer-placeholder-shown:hidden",
+            decorateEndShowWhenEmpty &&
+              "hidden peer-placeholder-shown:inline-block",
           )}
         >
           {decorateEnd}

package/src/types/index.ts

@@ -72,6 +72,8 @@ export interface InputProps<V = string> extends TestProps {
    *
    */
   decorateEnd?: JSX.Element | string | number | boolean;
+  decorateEndShowWhenEmpty?: boolean;
+  decorateEndHideWhenEmpty?: boolean;
   /**
    * info label at bottom
    */
@@ -120,9 +122,7 @@ export interface InputProps<V = string> extends TestProps {
   labelWidth?: string;
 }
 
-export interface BaseSelectProps<T>
-  extends RefProp<HTMLInputElement>,
-    Omit<InputProps, "value" | "onChange"> {
+export interface BaseSelectProps<T extends AnyObject = string> {
   /**
    * list options
    */
@@ -165,7 +165,11 @@ export interface BaseSelectProps<T>
   matcher?: (option: T, query: string) => boolean;
 }
 
-export type SelectProps<T> = BaseSelectProps<T> &
+type BaseSelectType<T> = BaseSelectProps<T> &
+  RefProp<HTMLInputElement> &
+  Omit<InputProps, "value" | "onChange">;
+
+export type SelectProps<T> = BaseSelectType<T> &
   (
     | {
         /**

package/src/types/schema.ts

@@ -21,80 +21,104 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-interface BaseSchemaDef {
+import { type DateLike } from "@react-fabric/date";
+
+export enum DATA_TYPES {
+  TEXT = "text",
+  COLOR = "color",
+  BOOL = "bool",
+  DATE = "date",
+  STRING = "string",
+  NUMBER = "number",
+  RANGE = "range",
+  FILE = "file",
+  AVATAR = "avatar",
+  SCHEMA = "schema",
+}
+
+interface SingleValue {
+  multiple?: false;
+  minItems?: never;
+  maxItems?: never;
+}
+
+interface MultipleValue {
+  multiple: true;
+  minItems?: number;
+  maxItems?: number;
+}
+
+export type ValueType = SingleValue | MultipleValue;
+
+interface BaseSchema {
   id: string;
   label: string;
   datatype: string;
   required?: boolean;
-  multiple?: boolean;
-  defaultValue?: AnyObject;
 }
 
-interface SchemaDef extends BaseSchemaDef {
-  datatype: "text" | "color";
+export interface DefaultSchema extends BaseSchema {
+  datatype: DATA_TYPES.TEXT | DATA_TYPES.COLOR;
 }
 
-interface BooleanSchema extends BaseSchemaDef {
-  datatype: "boolean";
-  defaultValue?: boolean;
+export interface BooleanSchema extends BaseSchema {
+  datatype: DATA_TYPES.BOOL;
 }
 
-interface StringSchema extends BaseSchemaDef {
-  datatype: "string";
-  options?: string[];
+export interface StringSchema extends BaseSchema {
+  datatype: DATA_TYPES.STRING;
   regex?: string;
-  identifierType?: string;
+  options?: string[];
+  optionList?: string;
+  allowCustom?: boolean;
 }
 
-interface RangeSchema extends BaseSchemaDef {
-  datatype: "range";
+export interface RangeSchema extends BaseSchema {
+  datatype: DATA_TYPES.RANGE;
   min?: number;
   max?: number;
   step?: number;
-  defaultValue?: [number, number];
 }
 
-interface NumberSchema extends BaseSchemaDef {
-  datatype: "number";
-  min?: number;
-  max?: number;
-  step?: number;
-  defaultValue?: number;
+export interface DateSchema extends BaseSchema {
+  datatype: DATA_TYPES.DATE;
+  type?: "date" | "datetime";
+  min?: DateLike;
+  max?: DateLike;
 }
 
-interface DecimalSchema extends BaseSchemaDef {
-  datatype: "decimal";
+export interface NumberSchema extends BaseSchema {
+  datatype: DATA_TYPES.NUMBER;
   min?: number;
   max?: number;
   step?: number;
-  defaultValue?: number;
 }
 
-export interface FileSchema extends BaseSchemaDef {
-  datatype: "file";
+export interface FileSchema extends BaseSchema {
+  datatype: DATA_TYPES.FILE;
   accept?: string;
 }
 
-export interface AvatarSchema extends BaseSchemaDef {
-  datatype: "avatar";
+export interface AvatarSchema extends BaseSchema {
+  datatype: DATA_TYPES.AVATAR;
   multiple?: false;
 }
 
 export type SchemaType =
-  | SchemaDef
-  | BooleanSchema
-  | StringSchema
-  | RangeSchema
-  | NumberSchema
-  | DecimalSchema
-  | FileSchema
-  | AvatarSchema;
-
-export interface ChildSchema extends BaseSchemaDef {
-  datatype: "schema";
+  | (DefaultSchema & ValueType)
+  | (BooleanSchema & ValueType)
+  | (StringSchema & ValueType)
+  | (RangeSchema & ValueType)
+  | (DateSchema & ValueType)
+  | (NumberSchema & ValueType)
+  | (FileSchema & ValueType)
+  | (AvatarSchema & ValueType);
+
+export interface ChildSchema extends BaseSchema {
+  datatype: DATA_TYPES.SCHEMA;
   inline?: boolean;
   schema: SchemaType[];
-  defaultValue?: never;
 }
 
-export type FormSchema = SchemaType | ChildSchema;
+export type SchemaDef = SchemaType | (ChildSchema & ValueType);
+export type FormSchema = SchemaDef[];