@react-fabric/form 1.0.0-beta.0

package/src/select/useSelect.tsx

@@ -0,0 +1,413 @@
+/*
+ * React Fabric
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 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 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 { useDebounce } from "@react-fabric/core";
+import {
+  dedupe,
+  EMPTY_ARRAY,
+  groupBy,
+  isArray,
+  matchString,
+} from "@react-fabric/utilities";
+import {
+  useCallback,
+  useDeferredValue,
+  useEffect,
+  useMemo,
+  useReducer,
+  useRef,
+} from "react";
+import { getSelectedValue, makeOption } from "./helpers";
+
+type StateActions =
+  | {
+      type: "open";
+    }
+  | { type: "close" }
+  | {
+      type: "options";
+      options: AnyObject[];
+      query?: string;
+      open?: boolean;
+      setActive?: true;
+    }
+  | { type: "startQuery"; query: string }
+  | { type: "setValue"; value: AnyObject }
+  | { type: "changeValue"; value: AnyObject }
+  | { type: "removeItem"; index?: number }
+  | { type: "active"; index: number | null };
+
+interface State {
+  multiple: boolean;
+  emptyValue: AnyObject;
+  open: boolean;
+  loading: boolean;
+  activeIndex: number | null;
+  selectedIndex: number | null;
+  value: AnyObject;
+  // filter
+  query?: string;
+  // dropdown items
+  items: AnyObject[];
+}
+
+export const useSelect = ({
+  options = EMPTY_ARRAY,
+  value,
+  autoComplete,
+  multiple = false,
+  allowCreate = false,
+  groupProperty = "",
+  valueProperty = "id",
+  labelProperty = "label",
+  createOption = makeOption,
+  matcher,
+  onQuery,
+  onChange,
+  onSelect,
+}: {
+  value?: AnyObject;
+  options?: AnyObject[];
+  multiple?: boolean;
+  allowCreate?: boolean;
+  groupProperty?: AnyObject;
+  valueProperty?: AnyObject;
+  labelProperty?: AnyObject;
+  autoComplete?: boolean;
+  matcher?: (item: AnyObject, query: string) => boolean;
+  createOption?: (query: string) => AnyObject;
+  onQuery?: (query: string) => AnyObject;
+  onSelect?: (item: AnyObject) => void;
+  onChange?: (value: AnyObject) => void;
+}) => {
+  // value state
+  const emptyValue = useMemo(() => (multiple ? [] : ""), [multiple]);
+  const deferred = useDeferredValue(value ?? emptyValue);
+
+  // list items
+  const listRef = useRef<HTMLElement[]>([]);
+  const focusableRef = useRef<HTMLElement>(null);
+  const listContentRef = useRef<AnyObject[]>([]);
+  const optionsRef = useRef<AnyObject[]>([]);
+
+  const macthOption = useCallback(
+    (item: AnyObject, query: string) => {
+      return (
+        matcher?.(item, query) ??
+        matchString(item[labelProperty] ?? item, query)
+      );
+    },
+    [matcher],
+  );
+
+  const fireChange = useCallback(
+    (value: AnyObject) => {
+      setTimeout(() => {
+        onSelect?.(value ?? emptyValue);
+        onChange?.(getSelectedValue(value, emptyValue, valueProperty));
+      }, 50);
+    },
+    [emptyValue, onSelect, onChange],
+  );
+
+  const [state, dispatch] = useReducer(
+    (state: State, action: StateActions) => {
+      if (action.type === "open") {
+        const index = state.items.indexOf(
+          state.multiple ? state.value[0] : state.value,
+        );
+        return {
+          ...state,
+          open: true,
+          activeIndex: index > -1 ? index : null,
+        };
+      }
+      if (action.type === "close") {
+        return { ...state, activeIndex: null, open: false };
+      }
+      if (action.type === "active" && state.open) {
+        if (autoComplete && action.index !== null)
+          state.query = state.items[action.index];
+        return { ...state, activeIndex: action.index };
+      }
+      if (action.type === "setValue") {
+        return {
+          ...state,
+          value: action.value,
+          selectedIndex: state.items.indexOf(
+            state.multiple ? action.value[0] : action.value,
+          ),
+        };
+      }
+      if (action.type === "changeValue") {
+        const newState = {
+          ...state,
+          value: state.emptyValue,
+          activeIndex: null,
+          selectedIndex: autoComplete
+            ? state.multiple
+              ? action.value?.length
+              : 0
+            : state.items.indexOf(action.value),
+        };
+        if (action.value !== undefined) {
+          if (multiple) {
+            const values = [];
+            if (action.value && autoComplete)
+              values.push(...action.value.split(/,\s?/));
+            else if (action.value) values.push(action.value);
+            newState.value = [...state.value];
+            values.forEach((value: AnyObject) => {
+              newState.value = newState.value.includes?.(value)
+                ? newState.value.filter((item: AnyObject) => item !== value)
+                : [...newState.value, value];
+            });
+          } else {
+            newState.value = action.value;
+          }
+        }
+        if (!state.multiple) newState.open = false;
+        fireChange(newState.value);
+        return newState;
+      }
+      if (action.type === "removeItem") {
+        let newValue = state.value;
+
+        if (state.multiple) {
+          newValue = [...newValue];
+          newValue.splice(action.index ?? -1, 1);
+        } else {
+          newValue = "";
+        }
+        fireChange(newValue);
+        return {
+          ...state,
+          value: newValue,
+        };
+      }
+      if (action.type === "startQuery") {
+        return {
+          ...state,
+          loading: true,
+          query: action.query,
+        };
+      }
+      if (action.type === "options") {
+        const newState = {
+          ...state,
+          loading: false,
+          query: action.query,
+        };
+        let optionList = [...action.options];
+        if (autoComplete && action.query !== undefined) {
+          optionList = dedupe([action.query, ...optionList]);
+        }
+        const grouped = groupBy(optionList, groupProperty, "");
+        if (action.open) newState.open = true;
+        newState.items = [];
+        // add new item if allowCreate
+        if (allowCreate && action.query)
+          newState.items.push({
+            ___create___: true,
+            value: createOption(action.query),
+          });
+        Object.entries(grouped).forEach(([key, list]) => {
+          if (key) {
+            newState.items.push({ ___group___: true, label: key });
+          }
+          newState.items.push(...list);
+        });
+        if (action.setActive) {
+          const index = newState.items.findIndex(
+            (opt: AnyObject) => !opt.___group___,
+          );
+          newState.activeIndex = index >= 0 ? index : null;
+        } else {
+          newState.activeIndex = null;
+        }
+        listContentRef.current = newState.items;
+        return newState;
+      }
+      return state;
+    },
+    {
+      multiple,
+      emptyValue,
+      open: false,
+      loading: false,
+      activeIndex: null,
+      selectedIndex: null,
+      value: emptyValue,
+      // filter
+      query: undefined,
+      // dropdown items
+      items: [],
+    },
+  );
+
+  useEffect(() => {
+    if (!multiple) {
+      const newOption =
+        (allowCreate || autoComplete) && deferred
+          ? createOption(deferred)
+          : undefined;
+      const hasValue = options.find(
+        (opt: AnyObject) => (opt[valueProperty] ?? opt) === deferred,
+      );
+      optionsRef.current = options;
+      // if current value missing in list inject it
+      if (!hasValue && newOption) {
+        optionsRef.current = [newOption, ...(options ?? [])];
+      }
+      dispatch({ type: "options", options: optionsRef.current });
+      dispatch({
+        type: "setValue",
+        value: hasValue ?? newOption ?? "",
+      });
+    }
+    if (multiple) {
+      optionsRef.current = [];
+      const value = (deferred ?? []).map((item: AnyObject) => {
+        const newOption =
+          (allowCreate || autoComplete) && item
+            ? createOption(item)
+            : undefined;
+        const hasValue = options.find(
+          (opt: AnyObject) => (opt[valueProperty] ?? opt) === deferred,
+        );
+        if (!hasValue && newOption) {
+          optionsRef.current.push(newOption);
+        }
+        return hasValue ?? newOption ?? "";
+      });
+      optionsRef.current = [...optionsRef.current, ...(options ?? [])];
+      dispatch({ type: "options", options: optionsRef.current });
+      dispatch({
+        type: "setValue",
+        value,
+      });
+    }
+  }, [deferred, options, multiple, allowCreate, autoComplete, createOption]);
+
+  const fireQuery = useDebounce(
+    (query: string) => {
+      void Promise.resolve(onQuery?.(query)).then((options) => {
+        const newOptions = [...options];
+        // if autocomplete inject other filtered options from history
+        if (autoComplete) {
+          newOptions.push(
+            ...optionsRef.current.filter((opt: AnyObject) => {
+              return macthOption?.(opt, query);
+            }),
+          );
+        }
+        dispatch({
+          type: "options",
+          query,
+          options: newOptions,
+          open: true,
+          setActive: true,
+        });
+      });
+    },
+    [onQuery],
+  );
+
+  // handlers
+  const handleQuery = useCallback(
+    (query: string) => {
+      if (!query) {
+        dispatch({ type: "options", query: "", options: optionsRef.current });
+      } else {
+        if (onQuery) {
+          dispatch({ type: "startQuery", query });
+          return fireQuery(query);
+        }
+        dispatch({
+          type: "options",
+          query,
+          open: true,
+          setActive: true,
+          options: optionsRef.current.filter((opt: AnyObject) => {
+            return macthOption?.(opt, query);
+          }),
+        });
+      }
+    },
+    [macthOption, onQuery],
+  );
+
+  const handleChange = useCallback((value?: AnyObject) => {
+    let values = value;
+    if (autoComplete && multiple && value) {
+      values = value.split(/,\s?/);
+    }
+    dispatch({
+      type: "changeValue",
+      value: value?.___create___ ? value.value : value,
+    });
+    if (value?.___create___) {
+      optionsRef.current = [...optionsRef.current, createOption(value.value)];
+    }
+    if (autoComplete) {
+      optionsRef.current = dedupe([
+        ...(isArray(values) ? values : [values]),
+        ...optionsRef.current,
+      ]);
+    }
+    dispatch({ type: "options", options: optionsRef.current });
+  }, []);
+
+  const handleRemove = useCallback((index?: number) => {
+    dispatch({ type: "removeItem", index });
+  }, []);
+
+  const setOpen = useCallback((open: boolean) => {
+    dispatch({ type: open ? "open" : "close" });
+    dispatch({
+      type: "options",
+      query: undefined,
+      options: optionsRef.current,
+    });
+  }, []);
+
+  const setActiveIndex = useCallback((index: number | null) => {
+    dispatch({ type: "active", index });
+  }, []);
+
+  return {
+    state,
+    listRef,
+    focusableRef,
+    listContentRef,
+    handleChange,
+    handleRemove,
+    handleQuery,
+    macthOption,
+    setActiveIndex,
+    setOpen,
+    setItemRef: (index: number, node: HTMLElement) => {
+      listRef.current[index] = node;
+    },
+  };
+};

package/src/types/index.ts

@@ -0,0 +1,203 @@
+/*
+ * React Fabric
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 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 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 { type RefProp } from "@react-fabric/core/dist/types/types";
+
+export interface InputProps<V = string> {
+  /**
+   * value
+   */
+  value?: V;
+  /**
+   * change handler
+   */
+  onChange?: (value?: V) => void;
+  /**
+   * on focus event handler
+   */
+  onFocus?: React.FocusEventHandler;
+  /**
+   * on blur event handler
+   */
+  onBlur?: React.FocusEventHandler;
+  /**
+   * on enter press callback
+   */
+  onEnterPressed?: React.KeyboardEventHandler;
+
+  /**
+   * input name
+   */
+  name?: string;
+  /**
+   * input label
+   */
+  label?: string;
+  /**
+   * input placeholder
+   */
+  placeholder?: string;
+  /**
+   * append to label end
+   */
+  appendLabel?: JSX.Element | string | number | boolean;
+  /**
+   *
+   */
+  decorateStart?: JSX.Element | string | number | boolean;
+  /**
+   *
+   */
+  decorateEnd?: JSX.Element | string | number | boolean;
+  /**
+   * info label at bottom
+   */
+  info?: string;
+
+  /**
+   * required
+   */
+  required?: boolean;
+  /**
+   * disabled input
+   */
+  disabled?: boolean;
+  /**
+   * read-only input
+   */
+  readOnly?: boolean;
+  /**
+   * auto focus when rendered
+   */
+  autoFocus?: boolean;
+  /**
+   * show clear button
+   */
+  allowClear?: boolean;
+  /**
+   * invalid value input
+   */
+  invalid?: boolean;
+  /**
+   * error message
+   */
+  error?: string;
+
+  /**
+   * field width
+   */
+  width?: number | string;
+  /**
+   * inline label and input
+   */
+  inline?: boolean;
+  /**
+   * label width for inline
+   */
+  labelWidth?: string;
+}
+
+export interface BaseSelectProps<T>
+  extends RefProp<HTMLInputElement>,
+    Omit<InputProps, "value" | "onChange"> {
+  /**
+   * list options
+   */
+  options?: T[];
+  /**
+   * group by property name
+   */
+  groupProperty?: keyof T;
+  /**
+   * label property name
+   */
+  labelProperty?: keyof T;
+  /**
+   * value property name
+   */
+  valueProperty?: keyof T;
+  /**
+   * searchable list
+   */
+  searchable?: boolean;
+  /**
+   * allow create item
+   */
+  allowCreate?: boolean;
+  /**
+   * create new item object
+   */
+  createOption?: (query: string) => T;
+  /**
+   * query handler
+   */
+  onQuery?: (query: string) => T[] | Promise<T[]>;
+  /**
+   * item renderer
+   */
+  renderer?: (option: T) => React.ReactNode;
+  /**
+   * item matcher
+   */
+  matcher?: (option: T, query: string) => boolean;
+}
+
+export type SelectProps<T> = BaseSelectProps<T> &
+  (
+    | {
+        /**
+         * is multiple selection
+         */
+        multiple?: never | false;
+        /**
+         * selected value
+         */
+        value?: string;
+        /**
+         * select handler
+         */
+        onSelect?: (option: T) => void;
+        /**
+         * change handler
+         */
+        onChange?: (value?: string) => void;
+      }
+    | {
+        /**
+         * is multiple selection
+         */
+        multiple: true;
+        /**
+         * selected value
+         */
+        value?: string[];
+        /**
+         * select handler
+         */
+        onSelect?: (option: T[]) => void;
+        /**
+         * change handler
+         */
+        onChange?: (value?: string[]) => void;
+      }
+  );

package/src/types/schema.ts

@@ -0,0 +1,100 @@
+/*
+ * React Fabric
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 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 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.
+ */
+
+interface BaseSchemaDef {
+  id: string;
+  label: string;
+  datatype: string;
+  required?: boolean;
+  multiple?: boolean;
+  defaultValue?: AnyObject;
+}
+
+interface SchemaDef extends BaseSchemaDef {
+  datatype: "text" | "color";
+}
+
+interface BooleanSchema extends BaseSchemaDef {
+  datatype: "boolean";
+  defaultValue?: boolean;
+}
+
+interface StringSchema extends BaseSchemaDef {
+  datatype: "string";
+  options?: string[];
+  regex?: string;
+  identifierType?: string;
+}
+
+interface RangeSchema extends BaseSchemaDef {
+  datatype: "range";
+  min?: number;
+  max?: number;
+  step?: number;
+  defaultValue?: [number, number];
+}
+
+interface NumberSchema extends BaseSchemaDef {
+  datatype: "number";
+  min?: number;
+  max?: number;
+  step?: number;
+  defaultValue?: number;
+}
+
+interface DecimalSchema extends BaseSchemaDef {
+  datatype: "decimal";
+  min?: number;
+  max?: number;
+  step?: number;
+  defaultValue?: number;
+}
+
+export interface FileSchema extends BaseSchemaDef {
+  datatype: "file";
+  accept?: string;
+}
+
+export interface AvatarSchema extends BaseSchemaDef {
+  datatype: "avatar";
+  multiple?: false;
+}
+
+export type SchemaType =
+  | SchemaDef
+  | BooleanSchema
+  | StringSchema
+  | RangeSchema
+  | NumberSchema
+  | DecimalSchema
+  | FileSchema
+  | AvatarSchema;
+
+export interface ChildSchema extends BaseSchemaDef {
+  datatype: "schema";
+  inline?: boolean;
+  schema: SchemaType[];
+  defaultValue?: never;
+}
+
+export type FormSchema = SchemaType | ChildSchema;