@react-fabric/form 1.0.0-beta.0

package/src/input/Checkbox.tsx

@@ -0,0 +1,165 @@
+/*
+ * 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 { CoreIcons, Icon } from "@react-fabric/core";
+import { type RefProp } from "@react-fabric/core/dist/types/types";
+import classNames from "classnames";
+import {
+  useCallback,
+  useDeferredValue,
+  useEffect,
+  useMemo,
+  useState,
+  type ChangeEvent,
+} from "react";
+import { ErrorIcon } from "../internal/ErrorIcon";
+
+export interface CheckboxProps extends RefProp<HTMLInputElement> {
+  /**
+   * checkbox label
+   */
+  label?: JSX.Element | string;
+  /**
+   * checked
+   */
+  checked?: boolean;
+  /**
+   * value
+   */
+  value?: string | number;
+  /**
+   * on checked change
+   */
+  onChange?: (checked: boolean | string | number) => void;
+
+  /**
+   * disabled input
+   */
+  disabled?: boolean;
+  /**
+   * invalid value input
+   */
+  invalid?: boolean;
+  /**
+   * error message
+   */
+  error?: string;
+
+  /**
+   * field width
+   */
+  width?: number | string;
+
+  /**
+   * cutom checkbox icon
+   */
+  icon?: string;
+  /**
+   * cutom checkbox checked icon
+   */
+  iconChecked?: string;
+
+  name?: string;
+}
+
+export const Checkbox = ({
+  ref,
+  label,
+  value,
+  name,
+  checked,
+  invalid,
+  disabled,
+  error,
+  width,
+  icon,
+  iconChecked,
+  onChange,
+  ...rest
+}: CheckboxProps) => {
+  const [actualValue, setActualValue] = useState(false);
+  const deferred = useDeferredValue(!!checked);
+
+  const iconOn = useMemo(
+    () => iconChecked ?? icon ?? CoreIcons.checkboxOn,
+    [icon, iconChecked],
+  );
+  const iconOff = useMemo(() => icon ?? CoreIcons.checkboxOff, [icon]);
+
+  useEffect(() => {
+    setActualValue(deferred);
+  }, [deferred]);
+
+  const handleChange = useCallback(
+    (e?: ChangeEvent<HTMLInputElement>) => {
+      setActualValue(e?.target.checked ?? false);
+      onChange?.(e?.target.checked ?? false);
+    },
+    [onChange, value],
+  );
+
+  return (
+    <label
+      className={classNames(
+        invalid ? "ring-danger-500" : "ring-primary-500",
+        disabled
+          ? "opacity-50 cursor-not-allowed"
+          : " opacity-85 hover:opacity-100 cursor-pointer",
+        "inline-flex gap-1 py-1 items-center relative rounded ring-offset-2 has-[:focus-visible]:ring-1",
+      )}
+      style={{ width }}
+    >
+      <input
+        className={classNames(
+          "appearance-none absolute opacity-0 inset-0 bg-transparent border-none outline-none ring-0",
+        )}
+        aria-invalid={invalid}
+        aria-disabled={disabled}
+        disabled={disabled}
+        aria-errormessage={error}
+        type="checkbox"
+        ref={ref}
+        size={1}
+        tabIndex={0}
+        name={name}
+        autoComplete="off"
+        checked={actualValue}
+        onChange={handleChange}
+        {...rest}
+      />
+      <Icon
+        className={classNames(
+          "p-0.5",
+          actualValue && icon && !iconChecked && "bg-primary-500 text-white",
+        )}
+        size="1.25em"
+        color={invalid ? "danger" : "primary"}
+        icon={actualValue ? iconOn : iconOff}
+      />
+      <ErrorIcon invalid={invalid} error={error} />
+      {label && (
+        <span className="flex-initial leading-none truncate">{label}</span>
+      )}
+    </label>
+  );
+};

package/src/input/ColorInput.tsx

@@ -0,0 +1,157 @@
+/*
+ * 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 { CoreIcons, Dropdown, 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";
+import {
+  startTransition,
+  useCallback,
+  useDeferredValue,
+  useEffect,
+  useState,
+} from "react";
+import { type InputProps } from "../types";
+import { ColorPicker, type ColorProps } from "./ColorPicker";
+
+export interface ColorInputProps extends InputProps, ColorProps, RefProp {
+  /**
+   * show eydrop picker
+   */
+  showPicker?: boolean;
+}
+
+export const ColorInput = ({
+  ref,
+  required,
+  disabled,
+  allowClear,
+  invalid,
+  error,
+  value,
+  showPicker,
+  defaultColor = "",
+  decorateEnd,
+  decorateStart,
+  onChange,
+  // @ts-expect-error ignore
+  noOutline,
+  ...rest
+}: ColorInputProps) => {
+  const [actualValue, setActualValue] = useState("");
+  const deferred = useDeferredValue(value ?? defaultColor);
+
+  useEffect(() => {
+    setActualValue(deferred ?? "");
+  }, [deferred]);
+
+  const handleChange = useCallback(
+    (e?: string) => {
+      setActualValue(e ?? defaultColor);
+      onChange != null && startTransition(() => onChange(e));
+    },
+    [onChange],
+  );
+
+  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",
+      )}
+    >
+      {decorateStart && (
+        <div
+          className={classNames(
+            "text-muted leading-none flex-content",
+            isString(decorateStart) && "px-2",
+          )}
+        >
+          {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>
+      {!disabled && showPicker && (
+        <Icon
+          icon={CoreIcons.colorPicker}
+          onClick={() =>
+            (window as AnyObject).EyeDropper &&
+            new (window as AnyObject).EyeDropper()
+              .open()
+              .then((resp: AnyObject) => handleChange(resp.sRGBHex))
+          }
+        />
+      )}
+      {decorateEnd && (
+        <div
+          className={classNames(
+            "text-muted leading-none flex-content",
+            isString(decorateEnd) && "px-2",
+          )}
+        >
+          {decorateEnd}
+        </div>
+      )}
+      {!disabled && allowClear && actualValue !== defaultColor && (
+        <Icon
+          icon={CoreIcons.close}
+          onClick={() => handleChange()}
+          className={classNames(
+            "text-tint-500 hover:text-tint-700 p-[0.25em] flex-content",
+          )}
+        />
+      )}
+    </div>
+  );
+};

package/src/input/ColorPicker.module.css

@@ -0,0 +1,51 @@
+/*
+ * 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.
+ */
+
+@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;
+
+      padding: 0 4px !important;
+      line-height: 2;
+    }
+
+    & label {
+      @apply !text-base;
+    }
+
+    & :global(.flexbox-fix) {
+      @apply !border-t-muted justify-center;
+
+      & > div > div {
+        @apply text-center;
+      }
+
+      & span > div {
+        box-shadow: 0 0 1px 1px theme(borderColor.base) inset !important;
+      }
+    }
+  }
+}

package/src/input/ColorPicker.tsx

@@ -0,0 +1,210 @@
+/*
+ * 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 Color from "color";
+import {
+  memo,
+  startTransition,
+  useCallback,
+  useDeferredValue,
+  useEffect,
+  useState,
+  type FC,
+} from "react";
+import { SketchPicker } from "react-color";
+import classes from "./ColorPicker.module.css";
+
+export interface ColorProps {
+  /**
+   * color swatches
+   */
+  swatches?: string[];
+  /**
+   * default color
+   */
+  defaultColor?: string;
+  /**
+   * hide alpha value
+   */
+  hideAlpha?: boolean;
+  /**
+   * color value
+   */
+  value?: string;
+  /**
+   * change handler
+   */
+  onChange?: (color?: string) => void;
+}
+
+const DEFAULT_SWATCHES = [
+  Color("#d7323a").mix(Color("#171a1c"), 0.5).hex(),
+  Color("#ff781c").mix(Color("#171a1c"), 0.5).hex(),
+  Color("#f7b731").mix(Color("#171a1c"), 0.5).hex(),
+  Color("#88ab1b").mix(Color("#171a1c"), 0.5).hex(),
+  Color("#22aa85").mix(Color("#171a1c"), 0.5).hex(),
+  Color("#399bec").mix(Color("#171a1c"), 0.5).hex(),
+  Color("#4862c8").mix(Color("#171a1c"), 0.5).hex(),
+  Color("#aa66cf").mix(Color("#171a1c"), 0.5).hex(),
+  Color("#f43f7b").mix(Color("#171a1c"), 0.5).hex(),
+  Color("#a37f4f").mix(Color("#171a1c"), 0.5).hex(),
+
+  "#d7323a",
+  "#ff781c",
+  "#f7b731",
+  "#88ab1b",
+  "#22aa85",
+  "#399bec",
+  "#4862c8",
+  "#aa66cf",
+  "#f43f7b",
+  "#a37f4f",
+
+  Color("#d7323a").mix(Color("#f1f3f4"), 0.5).hex(),
+  Color("#ff781c").mix(Color("#f1f3f4"), 0.5).hex(),
+  Color("#f7b731").mix(Color("#f1f3f4"), 0.5).hex(),
+  Color("#88ab1b").mix(Color("#f1f3f4"), 0.5).hex(),
+  Color("#22aa85").mix(Color("#f1f3f4"), 0.5).hex(),
+  Color("#399bec").mix(Color("#f1f3f4"), 0.5).hex(),
+  Color("#4862c8").mix(Color("#f1f3f4"), 0.5).hex(),
+  Color("#aa66cf").mix(Color("#f1f3f4"), 0.5).hex(),
+  Color("#f43f7b").mix(Color("#f1f3f4"), 0.5).hex(),
+  Color("#a37f4f").mix(Color("#f1f3f4"), 0.5).hex(),
+
+  "#171a1c",
+  "#2d3439",
+  "#444e55",
+  "#5b6971",
+  "#71838e",
+  "#86959e",
+  "#9ca8b0",
+  "#b8c1c6",
+  "#d5dadd",
+  "#f1f3f4",
+];
+
+// eslint-disable-next-line react/display-name
+export const ColorPicker: FC<ColorProps> = memo(
+  ({
+    value,
+    onChange,
+    hideAlpha,
+    defaultColor = "#fff",
+    swatches = DEFAULT_SWATCHES,
+  }: ColorProps) => {
+    const [actualValue, setActualValue] = useState("");
+    const deferred = useDeferredValue(value ?? defaultColor);
+
+    useEffect(() => {
+      setActualValue(deferred ?? "");
+    }, [deferred]);
+
+    const handleChange = useCallback(
+      (e: string) => {
+        setActualValue(e ?? defaultColor);
+        onChange != null && startTransition(() => onChange(e));
+      },
+      [onChange],
+    );
+
+    return (
+      <SketchPicker
+        width="16rem"
+        className={classes.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)",
+              },
+              color: {
+                boxShadow: "0 0 1px 1px var(--color-shadow)",
+              },
+              saturation: {
+                boxShadow: "0 0 1px 1px var(--color-shadow)",
+              },
+              activeColor: {
+                boxShadow: "0 0 1px 1px var(--color-shadow)",
+              },
+              picker: {
+                backgroundColor: "var(--fabric-bg)",
+                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",
+              },
+            },
+          } as AnyObject
+        }
+        color={actualValue}
+        presetColors={swatches}
+        disableAlpha={hideAlpha}
+        onChange={({ rgb: { a = 1, ...rgb } }) =>
+          setActualValue(Color(rgb).alpha(a)[a < 1 ? "hexa" : "hex"]())
+        }
+        onChangeComplete={({ rgb: { a = 1, ...rgb } }) =>
+          handleChange(Color(rgb).alpha(a)[a < 1 ? "hexa" : "hex"]())
+        }
+      />
+    );
+  },
+);

package/src/input/Field.tsx

@@ -0,0 +1,96 @@
+/*
+ * 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 ChildrenProp,
+  type CssProp,
+} from "@react-fabric/core/dist/types/types";
+import classNames from "classnames";
+import { Children, cloneElement } from "react";
+import classes from "../internal/Field.module.css";
+import { FieldWrapper } from "../internal/FieldWrapper";
+
+export interface FieldProps extends ChildrenProp, CssProp {
+  /**
+   * input label
+   */
+  label?: string;
+  /**
+   * append to label end
+   */
+  appendLabel?: JSX.Element | string | number | boolean;
+  /**
+   * info label at bottom
+   */
+  info?: string;
+
+  /**
+   * required
+   */
+  required?: boolean;
+  /**
+   * hide outline
+   */
+  noOutline?: boolean;
+
+  /**
+   * field width
+   */
+  width?: number | string;
+  /**
+   * inline label and input
+   */
+  inline?: boolean;
+  /**
+   * label width for inline
+   */
+  labelWidth?: string;
+  /**
+   * dont apply bg and outline
+   */
+  plain?: boolean;
+}
+
+export const Field = ({ children, noOutline, plain, ...rest }: FieldProps) => {
+  return (
+    <FieldWrapper {...rest}>
+      <div
+        className={classNames(
+          classes.fieldGroup,
+          !plain && !noOutline && "outline",
+          !plain && "bg-base",
+          "flex flex-nowrap flex-1 rounded",
+        )}
+      >
+        {Children.map(
+          children,
+          (child) =>
+            child &&
+            cloneElement(child as AnyObject, {
+              "data-inner": true,
+            }),
+        )}
+      </div>
+    </FieldWrapper>
+  );
+};