@react-fabric/form 1.0.0-beta.0

package/src/input/Textarea.tsx

@@ -0,0 +1,127 @@
+/*
+ * 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";
+import {
+  useCallback,
+  useDeferredValue,
+  useEffect,
+  useRef,
+  useState,
+  type ChangeEvent,
+} from "react";
+import { InputWrapper } from "../internal/InputWrapper";
+import { type InputProps } from "../types";
+
+export interface TextareaProps
+  extends Omit<InputProps, "onEnterPressed">,
+    RefProp<HTMLTextAreaElement> {
+  /**
+   * textarae rows
+   */
+  rows?: number;
+  /**
+   * maximum rows
+   */
+  maxRows?: number;
+  /**
+   * increment rows on value change
+   */
+  variableRows?: boolean;
+}
+
+export const Textarea = ({
+  ref,
+  value,
+  name,
+  invalid,
+  readOnly,
+  disabled,
+  required,
+  placeholder,
+  autoFocus,
+  rows = 5,
+  maxRows = 12,
+  variableRows,
+  onChange,
+  ...rest
+}: TextareaProps) => {
+  const [actualValue, setActualValue] = useState("");
+  const [fixedRows, setFixedRows] = useState(rows);
+  const deferred = useDeferredValue(value);
+  const wrapperRef = useRef(null);
+
+  useEffect(() => {
+    setActualValue(deferred ?? "");
+  }, [deferred]);
+
+  const handleChange = useCallback(
+    (e?: ChangeEvent<HTMLTextAreaElement>) => {
+      const value = e?.target.value;
+      setActualValue(value ?? "");
+      onChange?.(value ?? undefined);
+    },
+    [onChange],
+  );
+
+  useEffect(() => {
+    if (variableRows) {
+      const lines = actualValue?.split("\n").length ?? 1;
+      setFixedRows(Math.max(rows, Math.min(maxRows, lines)));
+    } else {
+      setFixedRows(rows);
+    }
+  }, [actualValue, variableRows, rows, maxRows]);
+
+  return (
+    <InputWrapper
+      showClear={!!actualValue}
+      onClear={handleChange}
+      invalid={invalid}
+      readOnly={readOnly}
+      disabled={disabled}
+      required={required}
+      wrapperRef={wrapperRef}
+      textarea
+      {...rest}
+    >
+      <textarea
+        className="appearance-none self-stretch bg-transparent py-1 px-2 flex-1 border-none outline-none ring-0 min-h-20 resize-none"
+        aria-invalid={invalid}
+        aria-disabled={disabled}
+        aria-readonly={readOnly}
+        placeholder={placeholder}
+        disabled={disabled}
+        readOnly={readOnly}
+        rows={fixedRows}
+        data-testid={name}
+        name={name}
+        ref={ref}
+        autoComplete="off"
+        {...{ autoFocus }}
+        value={actualValue}
+        onChange={handleChange}
+      />
+    </InputWrapper>
+  );
+};

package/src/internal/ErrorIcon.tsx

@@ -0,0 +1,61 @@
+/*
+ * 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, Tooltip } from "@react-fabric/core";
+import { isString } from "@react-fabric/utilities";
+import { useTranslation } from "react-i18next";
+
+export const ErrorIcon = ({ error = "", invalid }: KeyValue) => {
+  const { t } = useTranslation();
+
+  return (
+    invalid && (
+      <Tooltip
+        content={
+          isString(error)
+            ? `${error}`
+            : (t(
+                error?.key,
+                error.values
+                  ? {
+                      ...error?.values,
+                      label: t(
+                        error.values?.label ?? "form:badkey",
+                        error.values?.path,
+                      ),
+                    }
+                  : {},
+              ) as string)
+        }
+        placement="bottom"
+        color="danger"
+      >
+        <Icon
+          className="flex-content first:ms-2 self-center"
+          color="danger"
+          icon={CoreIcons.alert}
+        />
+      </Tooltip>
+    )
+  );
+};

package/src/internal/Field.module.css

@@ -0,0 +1,139 @@
+/*
+ * 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 {
+  .fieldWrapper {
+    /* later */
+  }
+}
+
+@layer var {
+  .inputWrapper {
+    &::after {
+      inset-inline: 50%;
+      transition: all 300ms;
+      transition-delay: 100ms;
+    }
+
+    & .decorate:has([data-ref="button"]) {
+      display: flex;
+      align-self: stretch;
+    }
+
+    &:has(input[disabled], textarea[disabled]) {
+      cursor: not-allowed;
+      background-color: theme(colors.tint.50);
+
+      & input,
+      & textarea {
+        cursor: not-allowed;
+      }
+    }
+
+    &:focus-within,
+    &:has([data-open="true"]) {
+      z-index: 1;
+      background-color: var(--fabric-input-focus);
+      outline-color: var(--primary);
+
+      &:not(:has([aria-readonly="true"]:not([hidden])))::after {
+        inset-inline: 0;
+      }
+    }
+
+    &:global(.fixed) {
+      box-shadow: 0 0 2rem 0.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) {
+      /* stylelint-disable-next-line font-family-no-missing-generic-family-keyword */
+      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) {
+      &,
+      & > div,
+      & > [role="button"],
+      & > [data-ref="button"] > [role="button"] {
+        border-start-start-radius: 0;
+        border-end-start-radius: 0;
+      }
+    }
+
+    > :not(:last-child) {
+      &,
+      & > div,
+      & > [role="button"],
+      & > [data-ref="button"] > [role="button"] {
+        border-start-end-radius: 0;
+        border-end-end-radius: 0;
+      }
+    }
+  }
+}

package/src/internal/FieldWrapper.tsx

@@ -0,0 +1,84 @@
+/*
+ * 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 classNames from "classnames";
+import classes from "./Field.module.css";
+
+export const FieldWrapper = ({
+  label,
+  appendLabel,
+  width,
+  labelWidth = 192,
+  inline,
+  info,
+  disabled,
+  required,
+  children,
+  listing,
+  className,
+  "data-inner": isInner,
+}: KeyValue) => {
+  return (
+    <div
+      className={classNames(
+        classes.fieldWrapper,
+        className,
+        inline ? "flex flex-nowrap gap-1" : "block",
+      )}
+      data-ref="fieldWrapper"
+      style={{ width, flexBasis: width }}
+    >
+      {!isInner && (
+        <div
+          className="flex flex-nowrap flex-content gap-1 py-0.5 px-2"
+          style={{ width: inline ? labelWidth : undefined }}
+        >
+          <label
+            role="none"
+            className={classNames(
+              "flex-initial truncate text-sm",
+              disabled && "text-muted",
+            )}
+            onClick={(e) =>
+              e.currentTarget
+                .closest<HTMLElement>('[data-ref="fieldWrapper"]')
+                ?.querySelector<HTMLElement>("input,textarea")
+                ?.focus()
+            }
+          >
+            {label}
+          </label>
+          {required && (
+            <span className="text-danger-500 select-none flex-content text-[10px]">
+              ✽
+            </span>
+          )}
+          {appendLabel && <span className="flex-content">{appendLabel}</span>}
+        </div>
+      )}
+      {children}
+      {listing}
+      {info && <div className="text-sm text-muted flex-content">{info}</div>}
+    </div>
+  );
+};

package/src/internal/InputWrapper.tsx

@@ -0,0 +1,187 @@
+/*
+ * 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 { FloatingPortal } from "@floating-ui/react";
+import { CoreIcons, Icon } from "@react-fabric/core";
+import { isString } from "@react-fabric/utilities";
+import classNames from "classnames";
+import {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  type MouseEvent,
+} from "react";
+import { Fragment } from "react/jsx-runtime";
+import { ErrorIcon } from "./ErrorIcon";
+import classes from "./Field.module.css";
+import { FieldWrapper } from "./FieldWrapper";
+
+export const InputWrapper = ({
+  invalid,
+  error,
+  allowClear,
+  showClear,
+  decorateStart,
+  decorateEnd,
+  children,
+  onClear,
+  noOutline,
+  noBorder,
+  textarea = false,
+  "data-inner": isInner,
+  "data-open": isOpen,
+  // expand autocomplete
+  floatingExpand,
+  wrapperRef,
+  width,
+  ...rest
+}: KeyValue) => {
+  const elRef = useRef<HTMLDivElement>(null);
+  const [isExpanded, setExpanded] = useState(false);
+
+  const Wrapper = useMemo(
+    () => (isInner || !rest.label ? Fragment : FieldWrapper),
+    [isInner, rest.label],
+  );
+  const wrapperProps = useMemo(
+    () => (isInner || !rest.label ? {} : { ...rest, width }),
+    [isInner, rest, width],
+  );
+
+  const handleClear = useCallback(
+    (e: MouseEvent<HTMLDivElement>) => {
+      e.currentTarget.parentElement
+        ?.querySelector<HTMLElement>("input,textarea,button")
+        ?.focus();
+      onClear?.();
+    },
+    [onClear],
+  );
+
+  const doFocus = useCallback(
+    (e: MouseEvent<HTMLDivElement>) => {
+      e.currentTarget.parentElement
+        ?.querySelector<HTMLElement>("input,textarea,button")
+        ?.focus();
+    },
+    [onClear],
+  );
+
+  useEffect(() => {
+    isExpanded &&
+      setTimeout(
+        () => wrapperRef?.current?.querySelector("textarea")?.focus(),
+        50,
+      );
+  }, [isExpanded]);
+
+  const el = (
+    <div
+      role="none"
+      ref={wrapperRef}
+      className={classNames(
+        classes.inputWrapper,
+        invalid && classes.invalidWrapper,
+        !noOutline &&
+          !noBorder &&
+          "bg-[var(--fabric-input)] outline overflow-hidden",
+        "flex flex-nowrap items-center",
+        textarea ? "rounded-capped group" : "rounded",
+        isExpanded
+          ? "fixed inset-4 z-[99]"
+          : floatingExpand
+            ? "absolute inset-x-0"
+            : "relative",
+        !noOutline &&
+          "after:absolute after:bottom-0 after:h-px after:bg-primary-500 after:mx-auto",
+      )}
+      onKeyDown={(e) => e.key === "Escape" && setExpanded(false)}
+    >
+      {decorateStart && (
+        <div
+          onClickCapture={doFocus}
+          className={classNames(
+            classes.decorate,
+            "text-muted leading-none flex-content",
+            isString(decorateStart) && "px-1",
+          )}
+        >
+          {decorateStart}
+        </div>
+      )}
+      <ErrorIcon invalid={invalid} error={error} />
+      {children}
+      {allowClear && showClear && (
+        <Icon
+          icon={CoreIcons.close}
+          onClick={handleClear}
+          className={classNames(
+            "text-tint-500 hover:text-tint-700 p-1 z-1 flex-content",
+            classes.inputClear,
+            textarea && "self-start mt-1 me-1",
+          )}
+        />
+      )}
+      {decorateEnd && (
+        <div
+          onClickCapture={doFocus}
+          className={classNames(
+            classes.decorate,
+            "text-muted leading-none flex-content",
+            isString(decorateEnd) && "px-1",
+          )}
+        >
+          {decorateEnd}
+        </div>
+      )}
+      {textarea && (
+        <Icon
+          onClick={() => setExpanded(!isExpanded)}
+          icon={isExpanded ? CoreIcons.arrowCollapse : CoreIcons.arrowExpand}
+          className="hidden group-hover:block absolute top-0 end-0 bg-base hover:bg-tint-200 p-1 opacity-65 rounded-capped"
+        />
+      )}
+    </div>
+  );
+
+  return (
+    <Wrapper {...wrapperProps}>
+      <div
+        ref={elRef}
+        className="flex-1 relative min-h-8"
+        style={{ width, flexBasis: width }}
+      >
+        {!isExpanded && el}
+        {isExpanded && (
+          <FloatingPortal
+            root={elRef.current?.closest<HTMLElement>(".theme-base")}
+          >
+            {el}
+          </FloatingPortal>
+        )}
+      </div>
+    </Wrapper>
+  );
+};