create-nexst-monorepo 0.1.0

package/template/apps/web/src/components/input/input-otp.tsx

@@ -0,0 +1,184 @@
+"use client";
+
+import type { KeyboardEvent, Ref } from "react";
+import { useId, useRef, useState } from "react";
+import { cn } from "@/lib/utils";
+
+type InputOTPProps = {
+  containerClassName?: string;
+  disabled?: boolean;
+  error?: string;
+  hint?: string;
+  label?: string;
+  length?: number;
+  onChange: (value: string) => void;
+  onComplete?: (value: string) => void;
+  ref?: Ref<HTMLInputElement>;
+  value: string;
+};
+
+const FRAME_BASE =
+  "relative flex h-14 w-12 items-center justify-center rounded-lg border bg-background transition-[border-color,box-shadow] duration-150 dark:bg-input/20";
+const INPUT_BASE =
+  "absolute inset-0 w-full bg-transparent text-center text-2xl font-bold text-foreground outline-none focus-visible:outline-none";
+
+const FRAME_STATE = {
+  default: "border-input shadow-xs",
+  disabled: "cursor-not-allowed border-input bg-muted/50 shadow-none dark:bg-muted/30",
+  error: "border-destructive/60 shadow-xs",
+  errorFocused: "border-destructive ring-2 ring-destructive/20 shadow-xs",
+  focused: "border-ring ring-2 ring-ring/25 shadow-xs",
+} as const;
+
+function getFrameState(disabled?: boolean, hasError?: boolean, isFocused?: boolean) {
+  if (disabled) return "disabled";
+  if (hasError) return isFocused ? "errorFocused" : "error";
+  if (isFocused) return "focused";
+  return "default";
+}
+
+function InputOTP(props: InputOTPProps) {
+  const {
+    containerClassName,
+    disabled,
+    error,
+    hint,
+    label,
+    length = 6,
+    onChange,
+    onComplete,
+    value,
+  } = props;
+
+  const [focusedIndex, setFocusedIndex] = useState<null | number>(null);
+  const inputRefs = useRef<(HTMLInputElement | null)[]>([]);
+  const generatedId = useId();
+
+  const hasError = Boolean(error);
+  const values = value.padEnd(length, "").split("").slice(0, length);
+
+  const inputId = `${generatedId}-otp`;
+
+  const describedBy =
+    [hasError && `${inputId}-error`, hint && !hasError && `${inputId}-hint`]
+      .filter(Boolean)
+      .join(" ") || undefined;
+
+  const handleChange = (index: number, digit: string) => {
+    if (disabled) {
+      return;
+    }
+
+    const sanitized = digit.replace(/\D/g, "").slice(-1);
+
+    const newValues = [...values];
+    newValues[index] = sanitized;
+    const newValue = newValues.join("").replace(/ /g, "");
+
+    onChange(newValue);
+
+    if (sanitized && index < length - 1) {
+      inputRefs.current[index + 1]?.focus();
+    }
+
+    if (sanitized && index === length - 1 && newValue.length === length) {
+      onComplete?.(newValue);
+    }
+  };
+
+  const handleKeyDown = (index: number, e: KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === "Backspace" && !values[index] && index > 0) {
+      inputRefs.current[index - 1]?.focus();
+    } else if (e.key === "ArrowLeft" && index > 0) {
+      e.preventDefault();
+      inputRefs.current[index - 1]?.focus();
+    } else if (e.key === "ArrowRight" && index < length - 1) {
+      e.preventDefault();
+      inputRefs.current[index + 1]?.focus();
+    } else if (e.key >= "0" && e.key <= "9" && values[index]) {
+      e.preventDefault();
+      handleChange(index, e.key);
+    }
+  };
+
+  const handlePaste = (e: React.ClipboardEvent<HTMLInputElement>) => {
+    e.preventDefault();
+    const pastedData = e.clipboardData.getData("text").replace(/\D/g, "").slice(0, length);
+    onChange(pastedData);
+
+    const nextIndex = Math.min(pastedData.length, length - 1);
+    inputRefs.current[nextIndex]?.focus();
+
+    if (pastedData.length === length) {
+      onComplete?.(pastedData);
+    }
+  };
+
+  return (
+    <fieldset
+      className={cn(
+        "text-foreground/90 flex flex-col gap-y-1.5 text-sm",
+        disabled && "opacity-70",
+        containerClassName,
+      )}
+    >
+      {label && (
+        <label className="ml-0.5 font-medium" htmlFor={`${inputId}-0`}>
+          {label}
+        </label>
+      )}
+
+      <div className="flex justify-center gap-2">
+        {Array.from({ length }).map((_, index) => {
+          const isFocused = focusedIndex === index;
+          const state = getFrameState(disabled, hasError, isFocused);
+
+          return (
+            // eslint-disable-next-line react/no-array-index-key
+            <div className="relative" key={index}>
+              <div className={cn(FRAME_BASE, FRAME_STATE[state], "overflow-hidden")}>
+                <input
+                  aria-describedby={describedBy}
+                  aria-invalid={hasError}
+                  aria-label={`Digit ${index + 1}`}
+                  autoComplete="one-time-code"
+                  className={cn(INPUT_BASE, disabled && "cursor-not-allowed")}
+                  disabled={disabled}
+                  id={`${inputId}-${index}`}
+                  inputMode="numeric"
+                  maxLength={1}
+                  onBlur={() => setFocusedIndex(null)}
+                  onChange={(e) => handleChange(index, e.target.value)}
+                  onFocus={() => setFocusedIndex(index)}
+                  onKeyDown={(e) => handleKeyDown(index, e)}
+                  onPaste={index === 0 ? handlePaste : undefined}
+                  pattern="[0-9]*"
+                  ref={(el) => {
+                    inputRefs.current[index] = el;
+                  }}
+                  type="text"
+                  value={values[index] || ""}
+                />
+              </div>
+            </div>
+          );
+        })}
+      </div>
+
+      {hasError && error && (
+        <p className="text-destructive ml-0.5 text-xs font-medium" id={`${inputId}-error`}>
+          {error}
+        </p>
+      )}
+      {!hasError && hint && (
+        <p className="text-muted-foreground ml-0.5 text-xs" id={`${inputId}-hint`}>
+          {hint}
+        </p>
+      )}
+    </fieldset>
+  );
+}
+
+InputOTP.displayName = "InputOTP";
+
+export { InputOTP };

package/template/apps/web/src/components/input/input.stories.tsx

@@ -0,0 +1,35 @@
+import type { Meta, StoryObj } from "@storybook/nextjs-vite";
+import { expect, userEvent, within } from "storybook/test";
+import { withContainer } from "~sb/decorators";
+import { Input } from "./input";
+
+const meta = {
+  args: { label: "Email", placeholder: "you@example.com", type: "email" },
+  component: Input,
+  decorators: [withContainer()],
+  tags: ["autodocs"],
+} satisfies Meta<typeof Input>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const WithError: Story = {
+  args: { error: "Enter a valid email address." },
+  play: async ({ canvasElement }) => {
+    await expect(within(canvasElement).getByLabelText("Email")).toHaveAttribute(
+      "aria-invalid",
+      "true",
+    );
+  },
+};
+
+export const Password: Story = {
+  args: { label: "Password", placeholder: "", type: "password" },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await userEvent.click(canvas.getByRole("button", { name: "Show password" }));
+    await expect(canvas.getByLabelText("Password")).toHaveAttribute("type", "text");
+  },
+};

package/template/apps/web/src/components/input/input.tsx

@@ -0,0 +1,180 @@
+"use client";
+
+import { Eye, EyeOff } from "lucide-react";
+import { useTranslations } from "next-intl";
+import type { InputHTMLAttributes, ReactNode, Ref } from "react";
+import { useId, useState } from "react";
+import { cn } from "@/lib/utils";
+
+type InputProps = Omit<InputHTMLAttributes<HTMLInputElement>, "size"> & {
+  containerClassName?: string;
+  error?: string;
+  frameClassName?: string;
+  hint?: string;
+  isSuccess?: boolean;
+  label?: string;
+  leadingIcon?: ReactNode;
+  ref?: Ref<HTMLInputElement>;
+  size?: "md" | "sm";
+  trailingIcon?: ReactNode;
+};
+
+const FRAME_BASE =
+  "flex w-full items-center gap-2.5 rounded-xl border bg-card transition-[border-color,box-shadow] duration-150";
+const FRAME_SIZE = { md: "h-11 px-3.5", sm: "h-9 px-3" } as const;
+const INPUT_BASE =
+  "h-full min-w-0 flex-1 bg-transparent text-foreground outline-none placeholder:text-muted-foreground/60 focus-visible:outline-none [-webkit-tap-highlight-color:transparent]";
+const INPUT_SIZE = { md: "text-base", sm: "text-sm" } as const;
+
+type FrameState = keyof typeof FRAME_STATE;
+
+const FRAME_STATE = {
+  default:
+    "border-input shadow-xs focus-within:border-ring focus-within:ring-2 focus-within:ring-ring/25",
+  disabled: "cursor-not-allowed border-input bg-muted/50 shadow-none dark:bg-muted/30",
+  error:
+    "border-destructive/60 shadow-xs focus-within:border-destructive focus-within:ring-2 focus-within:ring-destructive/20",
+  success:
+    "border-emerald-500/50 shadow-xs focus-within:border-emerald-500 focus-within:ring-2 focus-within:ring-emerald-500/20",
+} as const;
+
+function getDescribedBy(inputId: string, hasError: boolean, hasSuccess: boolean, hint?: string) {
+  return (
+    [
+      hasError && `${inputId}-error`,
+      hasSuccess && `${inputId}-success`,
+      hint && !hasError && `${inputId}-hint`,
+    ]
+      .filter(Boolean)
+      .join(" ") || undefined
+  );
+}
+
+function getFrameState(disabled?: boolean, hasError?: boolean, hasSuccess?: boolean): FrameState {
+  if (disabled) return "disabled";
+  if (hasError) return "error";
+  if (hasSuccess) return "success";
+  return "default";
+}
+
+function Input(props: InputProps) {
+  const {
+    className,
+    containerClassName,
+    disabled,
+    error,
+    frameClassName,
+    hint,
+    id,
+    isSuccess,
+    label,
+    leadingIcon,
+    ref,
+    size = "md",
+    trailingIcon,
+    type,
+    ...inputProps
+  } = props;
+
+  const [showPassword, setShowPassword] = useState(false);
+  const generatedId = useId();
+
+  const isPasswordInput = type === "password";
+  const inputId = id ?? `${generatedId}-input`;
+  const hasError = Boolean(error);
+  const hasSuccess = isSuccess && !hasError;
+
+  const describedBy = getDescribedBy(inputId, hasError, Boolean(hasSuccess), hint);
+  const state = getFrameState(disabled, hasError, Boolean(hasSuccess));
+
+  return (
+    <fieldset
+      className={cn(
+        "text-foreground/90 flex flex-col gap-y-1.5 text-sm",
+        disabled && "opacity-70",
+        containerClassName,
+      )}
+    >
+      {label && (
+        <label className="ml-0.5 text-sm font-medium" htmlFor={inputId}>
+          {label}
+        </label>
+      )}
+
+      <div className={cn(FRAME_BASE, FRAME_SIZE[size], FRAME_STATE[state], frameClassName)}>
+        {leadingIcon && (
+          <span
+            aria-hidden
+            className={cn(
+              "text-muted-foreground pointer-events-none shrink-0",
+              hasError && "text-destructive/70",
+            )}
+          >
+            {leadingIcon}
+          </span>
+        )}
+
+        <input
+          {...inputProps}
+          aria-describedby={describedBy}
+          aria-invalid={hasError}
+          className={cn(INPUT_BASE, INPUT_SIZE[size], disabled && "cursor-not-allowed", className)}
+          disabled={disabled}
+          id={inputId}
+          ref={ref}
+          type={isPasswordInput && showPassword ? "text" : type}
+        />
+
+        {isPasswordInput ? (
+          <PasswordToggle
+            disabled={disabled}
+            onToggle={() => setShowPassword(!showPassword)}
+            visible={showPassword}
+          />
+        ) : (
+          trailingIcon && <span className="text-muted-foreground shrink-0">{trailingIcon}</span>
+        )}
+      </div>
+
+      {hasError && error && (
+        <p className="text-destructive ml-0.5 text-xs font-medium" id={`${inputId}-error`}>
+          {error}
+        </p>
+      )}
+      {!hasError && hint && (
+        <p className="text-muted-foreground ml-0.5 text-xs" id={`${inputId}-hint`}>
+          {hint}
+        </p>
+      )}
+    </fieldset>
+  );
+}
+
+function PasswordToggle({
+  disabled,
+  onToggle,
+  visible,
+}: Readonly<{ disabled?: boolean; onToggle: () => void; visible: boolean }>) {
+  const t = useTranslations("Common.a11y");
+  const label = visible ? t("hidePassword") : t("showPassword");
+
+  return (
+    <button
+      aria-label={label}
+      className={cn(
+        "text-muted-foreground hover:text-foreground shrink-0 cursor-pointer transition-colors",
+        disabled && "cursor-not-allowed",
+      )}
+      disabled={disabled}
+      onClick={onToggle}
+      title={label}
+      type="button"
+    >
+      {visible ? <EyeOff className="size-4.5" /> : <Eye className="size-4.5" />}
+    </button>
+  );
+}
+
+Input.displayName = "Input";
+
+export { Input };