create-warlock 5.34.2 → 5.35.0

package/templates/design-system/src/web/design-system/components/email-input.tsx

@@ -0,0 +1,22 @@
+import { Input } from "web/components/ui/input";
+import { useControl } from "../hooks/use-control";
+import type { ControlProps } from "../types/control-props";
+import FieldFrame from "./field-frame";
+
+export default function EmailInput(props: ControlProps) {
+  const field = useControl(props, "email");
+  return (
+    <FieldFrame {...props} error={field.error}>
+      <Input
+        {...field.binding}
+        type="email"
+        value={typeof field.value === "string" ? field.value : ""}
+        onChange={(event) => field.changeValue(event.target.value)}
+        placeholder={props.placeholder}
+        readOnly={props.readOnly}
+        autoComplete={props.autoComplete}
+        dir={props.dir}
+      />
+    </FieldFrame>
+  );
+}

package/templates/design-system/src/web/design-system/components/field-frame.tsx

@@ -0,0 +1,36 @@
+import type { ReactNode } from "react";
+import { Label } from "web/components/ui/label";
+import type { ControlProps } from "../types/control-props";
+
+export default function FieldFrame({
+  id,
+  label,
+  hint,
+  error,
+  children,
+  dir,
+  className,
+}: Pick<ControlProps, "id" | "label" | "hint" | "error" | "dir" | "className"> & {
+  children: ReactNode;
+}) {
+  return (
+    <div dir={dir} className={className ?? "grid gap-2 text-start"}>
+      {label != null ? (
+        <Label id={`${id}-label`} htmlFor={id}>
+          {label}
+        </Label>
+      ) : null}
+      {children}
+      {hint ? (
+        <p id={`${id}-hint`} className="text-sm text-muted-foreground">
+          {hint}
+        </p>
+      ) : null}
+      {error ? (
+        <p id={`${id}-error`} role="alert" className="text-sm text-destructive">
+          {error}
+        </p>
+      ) : null}
+    </div>
+  );
+}

package/templates/design-system/src/web/design-system/components/file-input.tsx

@@ -0,0 +1,24 @@
+import { Input } from "web/components/ui/input";
+import { useFileControl } from "../hooks/use-file-control";
+import type { ControlProps } from "../types/control-props";
+import FieldFrame from "./field-frame";
+
+export default function FileInput(props: ControlProps) {
+  const field = useFileControl(props);
+  return (
+    <FieldFrame {...props} error={field.error}>
+      <Input
+        {...field.binding}
+        type="file"
+        disabled={field.disabled || props.readOnly}
+        accept={props.accept}
+        multiple={props.multiple}
+        onChange={(event) =>
+          field.changeValue(
+            props.multiple ? Array.from(event.target.files ?? []) : (event.target.files?.[0] ?? ""),
+          )
+        }
+      />
+    </FieldFrame>
+  );
+}

package/templates/design-system/src/web/design-system/components/multi-select-input.tsx

@@ -0,0 +1,94 @@
+import { Button } from "web/components/ui/button";
+import { Input } from "web/components/ui/input";
+import { Popover, PopoverContent, PopoverTrigger } from "web/components/ui/popover";
+import { useSelectControl } from "../hooks/use-select-control";
+import type { SelectProps } from "../types/control-props";
+import FieldFrame from "./field-frame";
+
+export default function MultiSelectInput(props: SelectProps) {
+  const field = useSelectControl(props, true);
+  return (
+    <FieldFrame {...props} error={field.error}>
+      <Popover open={field.open} onOpenChange={field.setOpen}>
+        <PopoverTrigger asChild>
+          <Button
+            {...field.binding}
+            type="button"
+            variant="outline"
+            disabled={field.disabled || props.readOnly}
+            aria-labelledby={`${props.id}-label ${props.id}-value`}
+            aria-haspopup="dialog"
+            aria-controls={`${props.id}-dialog`}
+          >
+            <span id={`${props.id}-value`}>
+              {props.options
+                .filter((option) => field.selected.includes(option.value))
+                .map((option) => option.label)
+                .join(", ") ||
+                props.placeholder ||
+                "Choose"}
+            </span>
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent
+          id={`${props.id}-dialog`}
+          dir={props.dir}
+          align="start"
+          aria-labelledby={`${props.id}-label`}
+          onCloseAutoFocus={field.onBlur}
+        >
+          <Input
+            id={`${props.id}-search`}
+            role="combobox"
+            aria-label={props.searchLabel ?? "Search options"}
+            aria-expanded={field.open}
+            aria-controls={`${props.id}-listbox`}
+            aria-autocomplete="list"
+            aria-activedescendant={
+              field.activeOption
+                ? `${props.id}-option-${encodeURIComponent(field.activeOption.value)}`
+                : undefined
+            }
+            value={field.search}
+            onChange={(event) => field.setSearch(event.target.value)}
+            onKeyDown={field.onKeyDown}
+          />
+          <div
+            id={`${props.id}-listbox`}
+            role="listbox"
+            aria-labelledby={`${props.id}-label`}
+            aria-multiselectable={true}
+            className="max-h-60 overflow-auto py-2"
+          >
+            {field.filtered.map((option) => (
+              <Button
+                key={option.value}
+                id={`${props.id}-option-${encodeURIComponent(option.value)}`}
+                type="button"
+                role="option"
+                tabIndex={-1}
+                aria-selected={field.selected.includes(option.value)}
+                aria-disabled={option.disabled}
+                disabled={option.disabled}
+                variant="ghost"
+                className="w-full justify-start aria-selected:bg-accent data-[active=true]:ring-2 data-[active=true]:ring-ring"
+                data-active={field.activeOption === option}
+                onMouseDown={(event) => event.preventDefault()}
+                onClick={() => field.select(option.value)}
+              >
+                {field.selected.includes(option.value) ? "✓ " : ""}
+                {option.label}
+              </Button>
+            ))}
+          </div>
+          {field.filtered.length === 0 ? (
+            <p role="status">{props.emptyLabel ?? "No options found"}</p>
+          ) : null}
+          <Button type="button" variant="ghost" onClick={field.clear}>
+            {props.clearLabel ?? "Clear"}
+          </Button>
+        </PopoverContent>
+      </Popover>
+    </FieldFrame>
+  );
+}

package/templates/design-system/src/web/design-system/components/password-input.tsx

@@ -0,0 +1,22 @@
+import { Input } from "web/components/ui/input";
+import { useControl } from "../hooks/use-control";
+import type { ControlProps } from "../types/control-props";
+import FieldFrame from "./field-frame";
+
+export default function PasswordInput(props: ControlProps) {
+  const field = useControl(props, "password");
+  return (
+    <FieldFrame {...props} error={field.error}>
+      <Input
+        {...field.binding}
+        type="password"
+        value={typeof field.value === "string" ? field.value : ""}
+        onChange={(event) => field.changeValue(event.target.value)}
+        placeholder={props.placeholder}
+        readOnly={props.readOnly}
+        autoComplete={props.autoComplete}
+        dir={props.dir}
+      />
+    </FieldFrame>
+  );
+}

package/templates/design-system/src/web/design-system/components/radio-input.tsx

@@ -0,0 +1,41 @@
+import { RadioGroup, RadioGroupItem } from "web/components/ui/radio-group";
+import { Label } from "web/components/ui/label";
+import { useControl } from "../hooks/use-control";
+import type { RadioProps } from "../types/control-props";
+import FieldFrame from "./field-frame";
+
+export default function RadioInput(props: RadioProps) {
+  // Register the group once as a scalar; individual Radix items own keyboard focus.
+  const field = useControl(props);
+  return (
+    <FieldFrame {...props} error={field.error}>
+      <RadioGroup
+        {...field.binding}
+        ref={(element) => {
+          field.visibleElementRef.current = element;
+        }}
+        dir={props.dir}
+        disabled={field.disabled || props.readOnly}
+        value={typeof field.value === "string" ? field.value : ""}
+        onValueChange={field.changeValue}
+        aria-labelledby={`${props.id}-label`}
+      >
+        {props.options.map((option) => (
+          <div key={option.value} className="flex items-center gap-2">
+            <RadioGroupItem
+              ref={
+                option === props.options.find((item) => !item.disabled) ? field.inputRef : undefined
+              }
+              id={`${props.id}-option-${encodeURIComponent(option.value)}`}
+              value={option.value}
+              disabled={option.disabled}
+            />
+            <Label htmlFor={`${props.id}-option-${encodeURIComponent(option.value)}`}>
+              {option.label}
+            </Label>
+          </div>
+        ))}
+      </RadioGroup>
+    </FieldFrame>
+  );
+}

package/templates/design-system/src/web/design-system/components/select-input.tsx

@@ -0,0 +1,94 @@
+import { Button } from "web/components/ui/button";
+import { Input } from "web/components/ui/input";
+import { Popover, PopoverContent, PopoverTrigger } from "web/components/ui/popover";
+import { useSelectControl } from "../hooks/use-select-control";
+import type { SelectProps } from "../types/control-props";
+import FieldFrame from "./field-frame";
+
+export default function SelectInput(props: SelectProps) {
+  const field = useSelectControl(props, false);
+  return (
+    <FieldFrame {...props} error={field.error}>
+      <Popover open={field.open} onOpenChange={field.setOpen}>
+        <PopoverTrigger asChild>
+          <Button
+            {...field.binding}
+            type="button"
+            variant="outline"
+            disabled={field.disabled || props.readOnly}
+            aria-labelledby={`${props.id}-label ${props.id}-value`}
+            aria-haspopup="dialog"
+            aria-controls={`${props.id}-dialog`}
+          >
+            <span id={`${props.id}-value`}>
+              {props.options
+                .filter((option) => field.selected.includes(option.value))
+                .map((option) => option.label)
+                .join(", ") ||
+                props.placeholder ||
+                "Choose"}
+            </span>
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent
+          id={`${props.id}-dialog`}
+          dir={props.dir}
+          align="start"
+          aria-labelledby={`${props.id}-label`}
+          onCloseAutoFocus={field.onBlur}
+        >
+          <Input
+            id={`${props.id}-search`}
+            role="combobox"
+            aria-label={props.searchLabel ?? "Search options"}
+            aria-expanded={field.open}
+            aria-controls={`${props.id}-listbox`}
+            aria-autocomplete="list"
+            aria-activedescendant={
+              field.activeOption
+                ? `${props.id}-option-${encodeURIComponent(field.activeOption.value)}`
+                : undefined
+            }
+            value={field.search}
+            onChange={(event) => field.setSearch(event.target.value)}
+            onKeyDown={field.onKeyDown}
+          />
+          <div
+            id={`${props.id}-listbox`}
+            role="listbox"
+            aria-labelledby={`${props.id}-label`}
+            aria-multiselectable={false}
+            className="max-h-60 overflow-auto py-2"
+          >
+            {field.filtered.map((option) => (
+              <Button
+                key={option.value}
+                id={`${props.id}-option-${encodeURIComponent(option.value)}`}
+                type="button"
+                role="option"
+                tabIndex={-1}
+                aria-selected={field.selected.includes(option.value)}
+                aria-disabled={option.disabled}
+                disabled={option.disabled}
+                variant="ghost"
+                className="w-full justify-start aria-selected:bg-accent data-[active=true]:ring-2 data-[active=true]:ring-ring"
+                data-active={field.activeOption === option}
+                onMouseDown={(event) => event.preventDefault()}
+                onClick={() => field.select(option.value)}
+              >
+                {field.selected.includes(option.value) ? "✓ " : ""}
+                {option.label}
+              </Button>
+            ))}
+          </div>
+          {field.filtered.length === 0 ? (
+            <p role="status">{props.emptyLabel ?? "No options found"}</p>
+          ) : null}
+          <Button type="button" variant="ghost" onClick={field.clear}>
+            {props.clearLabel ?? "Clear"}
+          </Button>
+        </PopoverContent>
+      </Popover>
+    </FieldFrame>
+  );
+}

package/templates/design-system/src/web/design-system/components/submit-button.tsx

@@ -0,0 +1,20 @@
+import { Button } from "web/components/ui/button";
+import { useSubmitControl } from "../hooks/use-submit-control";
+import type { ControlProps } from "../types/control-props";
+import FieldFrame from "./field-frame";
+
+export default function SubmitButton(props: ControlProps) {
+  const field = useSubmitControl(props);
+  return (
+    <FieldFrame {...props} label={null} error={field.error}>
+      <Button
+        {...field.binding}
+        type="submit"
+        disabled={field.disabled}
+        aria-busy={field.isSubmitting}
+      >
+        {props.label}
+      </Button>
+    </FieldFrame>
+  );
+}

package/templates/design-system/src/web/design-system/components/switch-input.tsx

@@ -0,0 +1,19 @@
+import { Switch } from "web/components/ui/switch";
+import { useControl } from "../hooks/use-control";
+import type { CheckProps } from "../types/control-props";
+import FieldFrame from "./field-frame";
+
+export default function SwitchInput(props: CheckProps) {
+  const field = useControl(props, "checkbox");
+  return (
+    <FieldFrame {...props} error={field.error}>
+      <Switch
+        {...field.binding}
+        disabled={field.disabled || props.readOnly}
+        checked={Boolean(field.checked)}
+        onCheckedChange={(checked) => field.setChecked(checked === true)}
+        aria-labelledby={`${props.id}-label`}
+      />
+    </FieldFrame>
+  );
+}

package/templates/design-system/src/web/design-system/components/text-input.tsx

@@ -0,0 +1,22 @@
+import { Input } from "web/components/ui/input";
+import { useControl } from "../hooks/use-control";
+import type { ControlProps } from "../types/control-props";
+import FieldFrame from "./field-frame";
+
+export default function TextInput(props: ControlProps) {
+  const field = useControl(props, "text");
+  return (
+    <FieldFrame {...props} error={field.error}>
+      <Input
+        {...field.binding}
+        type="text"
+        value={typeof field.value === "string" ? field.value : ""}
+        onChange={(event) => field.changeValue(event.target.value)}
+        placeholder={props.placeholder}
+        readOnly={props.readOnly}
+        autoComplete={props.autoComplete}
+        dir={props.dir}
+      />
+    </FieldFrame>
+  );
+}

package/templates/design-system/src/web/design-system/components/textarea-input.tsx

@@ -0,0 +1,22 @@
+import { Textarea } from "web/components/ui/textarea";
+import { useControl } from "../hooks/use-control";
+import type { ControlProps } from "../types/control-props";
+import FieldFrame from "./field-frame";
+
+export default function TextareaInput(props: ControlProps) {
+  const field = useControl(props, "textarea");
+  return (
+    <FieldFrame {...props} error={field.error}>
+      <Textarea
+        {...field.binding}
+        rows={props.rows}
+        value={typeof field.value === "string" ? field.value : ""}
+        onChange={(event) => field.changeValue(event.target.value)}
+        placeholder={props.placeholder}
+        readOnly={props.readOnly}
+        autoComplete={props.autoComplete}
+        dir={props.dir}
+      />
+    </FieldFrame>
+  );
+}

package/templates/design-system/src/web/design-system/components/time-picker-input.tsx

@@ -0,0 +1,22 @@
+import { Input } from "web/components/ui/input";
+import { useControl } from "../hooks/use-control";
+import type { ControlProps } from "../types/control-props";
+import FieldFrame from "./field-frame";
+
+export default function TimePickerInput(props: ControlProps) {
+  const field = useControl(props, "time");
+  return (
+    <FieldFrame {...props} error={field.error}>
+      <Input
+        {...field.binding}
+        type="time"
+        value={typeof field.value === "string" ? field.value : ""}
+        onChange={(event) => field.changeValue(event.target.value)}
+        placeholder={props.placeholder}
+        readOnly={props.readOnly}
+        autoComplete={props.autoComplete}
+        dir={props.dir}
+      />
+    </FieldFrame>
+  );
+}

package/templates/design-system/src/web/design-system/hooks/use-calendar-day-button.ts

@@ -0,0 +1,9 @@
+import { useEffect, useRef } from "react";
+
+export function useCalendarDayButton(focused: boolean) {
+  const ref = useRef<HTMLButtonElement>(null);
+  useEffect(() => {
+    if (focused) ref.current?.focus();
+  }, [focused]);
+  return ref;
+}

package/templates/design-system/src/web/design-system/hooks/use-control.ts

@@ -0,0 +1,29 @@
+import { useFormControl } from "@mongez/react-form";
+import type { ControlProps } from "../types/control-props";
+
+/** Explicit ids keep SSR, hydration, portal labels and repeated forms aligned. */
+export function useControl(props: ControlProps, type = "text", multiple = false) {
+  const control = useFormControl(
+    { ...props, type, multiple },
+    { multiple, isCollectable: type === "submit" ? () => false : undefined },
+  );
+  const error = props.error ?? control.error;
+  const describedBy =
+    [props.hint ? `${props.id}-hint` : "", error ? `${props.id}-error` : ""]
+      .filter(Boolean)
+      .join(" ") || undefined;
+  const binding = {
+    id: props.id,
+    name: props.name,
+    disabled: control.disabled,
+    onBlur: control.onBlur,
+    ref: (element: HTMLElement | null) => {
+      control.inputRef.current = element;
+      control.visibleElementRef.current = element;
+    },
+    "aria-invalid": Boolean(error),
+    "aria-required": props.required || undefined,
+    "aria-describedby": describedBy,
+  };
+  return { ...control, error, binding };
+}

package/templates/design-system/src/web/design-system/hooks/use-date-control.ts

@@ -0,0 +1,42 @@
+import { useState } from "react";
+import { useControl } from "./use-control";
+import type { DateProps } from "../types/control-props";
+
+export function calendarDate(date: Date): string {
+  return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, "0")}-${String(date.getDate()).padStart(2, "0")}`;
+}
+export function parseCalendarDate(value: string): Date | undefined {
+  if (!/^\d{4}-\d{2}-\d{2}$/.test(value)) return undefined;
+  const [year = 0, month = 0, day = 0] = value.split("-").map(Number);
+  const date = new Date(0);
+  date.setFullYear(year, month - 1, day);
+  date.setHours(12, 0, 0, 0);
+  return calendarDate(date) === value ? date : undefined;
+}
+export function useDateControl(props: DateProps, withTime = false) {
+  const field = useControl(props);
+  const [open, setOpen] = useState(false);
+  const value = typeof field.value === "string" ? field.value : "";
+  const [datePart = "", time = ""] = value.split("T");
+  return {
+    ...field,
+    open,
+    setOpen,
+    value,
+    time,
+    selected: parseCalendarDate(datePart),
+    select: (date: Date | undefined) => {
+      if (field.disabled || props.readOnly) return;
+      field.changeValue(date ? calendarDate(date) + (withTime ? `T${time || "00:00"}` : "") : "");
+      if (!withTime) setOpen(false);
+    },
+    changeTime: (next: string) => {
+      if (!field.disabled && !props.readOnly)
+        field.changeValue(next && parseCalendarDate(datePart) ? `${datePart}T${next}` : "");
+    },
+    clear: () => {
+      if (!field.disabled && !props.readOnly) field.changeValue("");
+      setOpen(false);
+    },
+  };
+}

package/templates/design-system/src/web/design-system/hooks/use-file-control.ts

@@ -0,0 +1,24 @@
+import { useEffect } from "react";
+import { useControl } from "./use-control";
+import type { ControlProps } from "../types/control-props";
+
+export function useFileControl(props: ControlProps) {
+  const field = useControl(
+    { ...props, value: undefined, defaultValue: props.multiple ? [] : "" },
+    "file",
+    props.multiple,
+  );
+  useEffect(() => {
+    const clear = () => {
+      const input: HTMLInputElement | undefined = field.inputRef.current;
+      if (input) input.value = "";
+    };
+    const reset = field.formControl.onReset(clear);
+    const cleared = field.formControl.onClear(clear);
+    return () => {
+      reset.unsubscribe();
+      cleared.unsubscribe();
+    };
+  }, [field.formControl, field.inputRef]);
+  return field;
+}

package/templates/design-system/src/web/design-system/hooks/use-select-control.ts

@@ -0,0 +1,78 @@
+import { useState, type KeyboardEvent } from "react";
+import { useControl } from "./use-control";
+import type { SelectProps } from "../types/control-props";
+
+export function selectedValues(value: unknown): string[] {
+  return Array.isArray(value)
+    ? value.filter((item): item is string => typeof item === "string")
+    : typeof value === "string" && value !== ""
+      ? [value]
+      : [];
+}
+export function toggleSelection(values: readonly string[], value: string): string[] {
+  return values.includes(value) ? values.filter((item) => item !== value) : [...values, value];
+}
+export function useSelectControl(props: SelectProps, multiple = false) {
+  const field = useControl(props, "text", multiple);
+  const [open, setOpen] = useState(false);
+  const [search, setSearch] = useState("");
+  const [active, setActive] = useState(0);
+  const selected = selectedValues(field.value);
+  const filtered = props.options.filter((option) =>
+    option.label.toLocaleLowerCase().includes(search.toLocaleLowerCase()),
+  );
+  const enabled = filtered.filter((option) => !option.disabled);
+  const activeOption = enabled[Math.min(active, Math.max(0, enabled.length - 1))];
+  const select = (value: string) => {
+    if (field.disabled || props.readOnly) return;
+    field.changeValue(multiple ? toggleSelection(selected, value) : value);
+    if (!multiple) setOpen(false);
+  };
+  const onKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {
+    if (["ArrowDown", "ArrowUp", "Home", "End"].includes(event.key)) {
+      event.preventDefault();
+      const current = activeOption ? enabled.indexOf(activeOption) : 0;
+      const next =
+        event.key === "Home"
+          ? 0
+          : event.key === "End"
+            ? enabled.length - 1
+            : (current + (event.key === "ArrowDown" ? 1 : -1) + enabled.length) %
+              Math.max(1, enabled.length);
+      setActive(Math.max(0, next));
+      const option = enabled[Math.max(0, next)];
+      if (option)
+        document
+          .getElementById(`${props.id}-option-${encodeURIComponent(option.value)}`)
+          ?.scrollIntoView({ block: "nearest" });
+    } else if (
+      (event.key === "Enter" || (multiple && event.key === " " && search === "")) &&
+      activeOption
+    ) {
+      event.preventDefault();
+      select(activeOption.value);
+    }
+  };
+  return {
+    ...field,
+    open,
+    setOpen: (next: boolean) => {
+      setOpen(next && !field.disabled && !props.readOnly);
+      setSearch("");
+      setActive(0);
+    },
+    search,
+    setSearch: (next: string) => {
+      setSearch(next);
+      setActive(0);
+    },
+    selected,
+    filtered,
+    activeOption,
+    select,
+    onKeyDown,
+    clear: () => {
+      if (!field.disabled && !props.readOnly) field.changeValue(multiple ? [] : "");
+    },
+  };
+}

package/templates/design-system/src/web/design-system/hooks/use-submit-control.ts

@@ -0,0 +1,13 @@
+import { useSubmitButton } from "@mongez/react-form";
+import { useControl } from "./use-control";
+import type { ControlProps } from "../types/control-props";
+
+export function useSubmitControl(props: ControlProps) {
+  const field = useControl(props, "submit");
+  const submit = useSubmitButton();
+  return {
+    ...field,
+    disabled: field.disabled || submit.disabled || submit.isSubmitting,
+    isSubmitting: submit.isSubmitting,
+  };
+}