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

package/src/types/schema.ts

@@ -21,80 +21,137 @@
  * 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 { ChildNode } from "@react-fabric/core/dist/types/types";
+import { type DateLike } from "@react-fabric/date";
+
+export enum DATA_TYPES {
+  TEXT = "text",
+  COLOR = "color",
+  BOOL = "bool",
+  DATE = "date",
+  DATETIME = "datetime",
+  STRING = "string",
+  NUMBER = "number",
+  RANGE = "range",
+  FILE = "file",
+  AVATAR = "avatar",
+  SCHEMA = "schema",
+}
+
+export const SCHEMA_CUSTOM_LIST = "--CUSTOM--";
+
+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 | DATA_TYPES.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[];
+
+export interface SchemaEditorProps {
+  /**
+   * default form schema
+   */
+  schemaDef: FormSchema;
+  /**
+   * is dynamic schema (allow add/remove)
+   */
+  dynamic?: boolean;
+  /**
+   * acceptable list of data types
+   */
+  acceptableTypes?: DATA_TYPES[];
+
+  /**
+   * available option lists in application
+   */
+  optionLists?: string[];
+
+  /**
+   * footer actions
+   */
+
+  children?: ChildNode | Array<ChildNode>;
+
+  onChange?: (schema: FormSchema) => void;
+  onSubmit?: (schema: FormSchema) => void;
+}

package/src/utils/eventHandlers.ts

@@ -23,26 +23,27 @@
 
 /* istanbul ignore file */
 
-import { debounce } from "@react-fabric/utilities";
+import { useFloatingTree } from "@floating-ui/react";
+import { useDebounce } from "@react-fabric/core";
 import { type KeyboardEvent, type MouseEvent } from "react";
 
 /** ***************** common handler for enter press *******************/
-export const handleEnter = (
-  callback?: (e: KeyboardEvent) => void,
-  {
-    stopPropagation = false,
-    preventDefault = false,
-  }: { stopPropagation?: boolean; preventDefault?: boolean } = {},
-) => {
-  const cbHandle = debounce(callback ?? (() => undefined), 100);
-  return (e: KeyboardEvent) => {
-    if (
-      !e.shiftKey &&
-      !e.altKey &&
-      !e.metaKey &&
-      e.key === "Enter" &&
-      callback
-    ) {
+export function useHandleEnter<T extends HTMLElement = HTMLInputElement>(
+  callback?: (e: KeyboardEvent<T>) => void,
+  { stopPropagation = false, preventDefault = false }: { stopPropagation?: boolean; preventDefault?: boolean } = {},
+) {
+  const cbHandle = useDebounce(callback ?? (() => undefined), [callback], 100);
+  const tree = useFloatingTree();
+  return (e: KeyboardEvent<T>) => {
+    // prevent propagation of event if input within dropdown (work around for floating-ui typeahead)
+    if (tree && e.key !== "Escape") {
+      e?.stopPropagation();
+    }
+    // blur input on escape key press
+    if (e.key === "Escape") {
+      e.currentTarget.blur();
+    }
+    if (!e.shiftKey && !e.altKey && !e.metaKey && e.key === "Enter" && callback) {
       if (stopPropagation) e?.stopPropagation();
       cbHandle(e);
       if (preventDefault) {
@@ -51,22 +52,19 @@ export const handleEnter = (
       }
     }
   };
-};
+}
 
 /** ***************** common handler for mouse primary click *******************/
-export const handleClick = (
+export function handleClick(
   callback?: (e: MouseEvent) => void,
-  {
-    stopPropagation = false,
-    preventDefault = false,
-  }: { stopPropagation?: boolean; preventDefault?: boolean } = {},
-) => {
+  { stopPropagation = false, preventDefault = false }: { stopPropagation?: boolean; preventDefault?: boolean } = {},
+) {
   return (e: MouseEvent) => {
     if (stopPropagation) e?.stopPropagation();
-    (e?.button ?? 0) === 0 && callback?.(e);
+    if ((e?.button ?? 0) === 0) callback?.(e);
     if (preventDefault) {
       e.preventDefault();
       return false;
     }
   };
-};
+}

package/src/utils/getColor.ts

@@ -23,25 +23,26 @@
 
 import { isColor } from "@react-fabric/utilities";
 
-export const getColor = (color?: string) => {
+export function getColor(color?: string) {
   if (color && isColor(color)) {
     return color;
   }
-};
+}
 
-export const getBgClass = (bg: string) => {
+export function getBgClass(bg: string) {
   if (bg && !isColor(bg)) {
     return `bg-${bg}`;
   }
-};
+}
 
-export const getColorClass = (color: string) => {
+export function getColorClass(color: string) {
   if (color && !isColor(color)) {
     return `text-${color}`;
   }
-};
-export const getBorderClass = (color: string) => {
+}
+
+export function getBorderClass(color: string) {
   if (color && !isColor(color)) {
     return `border-${color}`;
   }
-};
+}

package/src/utils/getProps.ts

@@ -0,0 +1,47 @@
+/**
+ * React Fabric
+ * @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 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 { WrapperProps } from "../types";
+
+export function getWrapperProps<T extends WrapperProps & KeyValue>(props: T): WrapperProps {
+  return {
+    appendLabel: props.appendLabel,
+    name: props.name,
+    info: props.info,
+    inline: props.inline,
+    label: props.label,
+    labelWidth: props.labelWidth,
+    required: props.required,
+    disabled: props.disabled,
+    width: props.width,
+    error: props.error,
+    invalid: props.invalid,
+    borderless: props.borderless,
+    decorateEnd: props.decorateEnd,
+    decorateEndHideWhenEmpty: props.decorateEndHideWhenEmpty,
+    decorateEndShowWhenEmpty: props.decorateEndShowWhenEmpty,
+    decorateStart: props.decorateStart,
+  };
+}

package/src/utils/index.ts

@@ -23,3 +23,4 @@
 
 export * from "./eventHandlers";
 export * from "./getColor";
+export * from "./getProps";

package/dist/cjs/input/ArrayInput.module.css

@@ -1 +0,0 @@
-@layer var{.arrayInput{& [data-ref=fieldWrapper]{flex:1 1 0%}& .addButton :global(.buttonInner){color:theme(colors.tint.600);outline:1px dashed theme(colors.tint.600);&[data-invalid=true]{background-color:theme(colors.danger.100);color:theme(colors.danger.600);outline:1px dashed theme(colors.danger.600)}}}}

package/dist/cjs/input/ColorPicker.module.css

@@ -1 +0,0 @@
-@layer comp{.colorPicker{--color-shadow:theme(borderColor.base);& input{@apply bg-base text-base !border !border-solid !rounded-sm !border-base focus:!border-primary !shadow-none;line-height:2;padding:0 4px!important}& label{@apply !text-base}& :global(.flexbox-fix){@apply !border-t-muted justify-center;&>div>div{@apply text-center}& span>div{box-shadow:inset 0 0 1px 1px theme(borderColor.base)!important}}}}

package/dist/cjs/input/File.module.css

@@ -1 +0,0 @@
-@layer comp{.fileInput{&::-webkit-file-upload-button{@apply bg-primary-500 opacity-80 hover:opacity-90 text-white rounded border-none py-0 cursor-pointer}&[aria-invalid=true]::-webkit-file-upload-button{@apply bg-danger-500}&:disabled::-webkit-file-upload-button{@apply bg-muted pointer-events-none}&[readOnly]{@apply pointer-events-none}}}

package/dist/cjs/internal/Field.module.css

@@ -1 +0,0 @@
-@layer comp{}@layer var{.inputWrapper{&:after{inset-inline:50%;transition:all .3s;transition-delay:.1s}& .decorate:has([data-ref=button]){align-self:stretch;display:flex}&:has(input[disabled],textarea[disabled]){background-color:theme(colors.tint.50);cursor:not-allowed;& input,& textarea{cursor:not-allowed}}&:focus-within,&:has([data-open=true]){background-color:var(--fabric-input-focus);outline-color:var(--primary);z-index:1;&:not(:has([aria-readonly=true]:not([hidden]))):after{inset-inline:0}}&:global(.fixed){box-shadow:0 0 2rem .5rem var(--fabric-shadow)}& input,& textarea{max-width:100%}&>input[type=number]+.inputClear{margin-inline:-3rem 2rem}& input::-ms-clear,& select::-ms-clear,& textarea::-ms-clear{display:none}& input[type=search]::-webkit-search-cancel-button{display:none}& input[type=password]:not(:placeholder-shown){font-family:caption;letter-spacing:2px}& input:-webkit-autofill{box-shadow:0 0 0 999em var(--fabric-input) inset;-webkit-text-fill-color:theme(colors.accent.700)}& input:-webkit-autofill:focus{box-shadow:0 0 0 999em var(--fabric-input-focus) inset;-webkit-text-fill-color:theme(colors.accent.700)}&.invalidWrapper{outline-color:theme(colors.danger.500);&:after{background-color:theme(colors.danger.500)}}}.fieldGroup{>*{line-height:1}>:not(:first-child){&,&>[data-ref=button]>[role=button],&>[role=button],&>div{border-end-start-radius:0;border-start-start-radius:0}}>:not(:last-child){&,&>[data-ref=button]>[role=button],&>[role=button],&>div{border-end-end-radius:0;border-start-end-radius:0}}}}

package/dist/esm/input/ArrayInput.module.css

@@ -1 +0,0 @@
-@layer var{.arrayInput{& [data-ref=fieldWrapper]{flex:1 1 0%}& .addButton :global(.buttonInner){color:theme(colors.tint.600);outline:1px dashed theme(colors.tint.600);&[data-invalid=true]{background-color:theme(colors.danger.100);color:theme(colors.danger.600);outline:1px dashed theme(colors.danger.600)}}}}

package/dist/esm/input/ColorPicker.module.css

@@ -1 +0,0 @@
-@layer comp{.colorPicker{--color-shadow:theme(borderColor.base);& input{@apply bg-base text-base !border !border-solid !rounded-sm !border-base focus:!border-primary !shadow-none;line-height:2;padding:0 4px!important}& label{@apply !text-base}& :global(.flexbox-fix){@apply !border-t-muted justify-center;&>div>div{@apply text-center}& span>div{box-shadow:inset 0 0 1px 1px theme(borderColor.base)!important}}}}

package/dist/esm/input/File.module.css

@@ -1 +0,0 @@
-@layer comp{.fileInput{&::-webkit-file-upload-button{@apply bg-primary-500 opacity-80 hover:opacity-90 text-white rounded border-none py-0 cursor-pointer}&[aria-invalid=true]::-webkit-file-upload-button{@apply bg-danger-500}&:disabled::-webkit-file-upload-button{@apply bg-muted pointer-events-none}&[readOnly]{@apply pointer-events-none}}}

package/dist/esm/internal/Field.module.css

@@ -1 +0,0 @@
-@layer comp{}@layer var{.inputWrapper{&:after{inset-inline:50%;transition:all .3s;transition-delay:.1s}& .decorate:has([data-ref=button]){align-self:stretch;display:flex}&:has(input[disabled],textarea[disabled]){background-color:theme(colors.tint.50);cursor:not-allowed;& input,& textarea{cursor:not-allowed}}&:focus-within,&:has([data-open=true]){background-color:var(--fabric-input-focus);outline-color:var(--primary);z-index:1;&:not(:has([aria-readonly=true]:not([hidden]))):after{inset-inline:0}}&:global(.fixed){box-shadow:0 0 2rem .5rem var(--fabric-shadow)}& input,& textarea{max-width:100%}&>input[type=number]+.inputClear{margin-inline:-3rem 2rem}& input::-ms-clear,& select::-ms-clear,& textarea::-ms-clear{display:none}& input[type=search]::-webkit-search-cancel-button{display:none}& input[type=password]:not(:placeholder-shown){font-family:caption;letter-spacing:2px}& input:-webkit-autofill{box-shadow:0 0 0 999em var(--fabric-input) inset;-webkit-text-fill-color:theme(colors.accent.700)}& input:-webkit-autofill:focus{box-shadow:0 0 0 999em var(--fabric-input-focus) inset;-webkit-text-fill-color:theme(colors.accent.700)}&.invalidWrapper{outline-color:theme(colors.danger.500);&:after{background-color:theme(colors.danger.500)}}}.fieldGroup{>*{line-height:1}>:not(:first-child){&,&>[data-ref=button]>[role=button],&>[role=button],&>div{border-end-start-radius:0;border-start-start-radius:0}}>:not(:last-child){&,&>[data-ref=button]>[role=button],&>[role=button],&>div{border-end-end-radius:0;border-start-end-radius:0}}}}