torch-glare 2.5.6 → 2.6.0

package/apps/lib/components/Form.tsx

@@ -1,182 +0,0 @@
-"use client";
-
-import * as React from "react";
-import * as LabelPrimitive from "@radix-ui/react-label";
-import { Slot } from "@radix-ui/react-slot";
-import {
-  Controller,
-  FormProvider,
-  useFormContext,
-  type ControllerProps,
-  type FieldPath,
-  type FieldValues,
-} from "react-hook-form";
-
-import { cn } from "../utils/cn";
-import { Label } from "./Label";
-import { Themes } from "../utils/types";
-import { ReactNode } from "react";
-const Form = FormProvider;
-
-type FormFieldContextValue<
-  TFieldValues extends FieldValues = FieldValues,
-  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
-> = {
-  name: TName;
-};
-
-const FormFieldContext = React.createContext<FormFieldContextValue>({} as FormFieldContextValue);
-
-const FormField = <
-  TFieldValues extends FieldValues = FieldValues,
-  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
->({
-  ...props
-}: ControllerProps<TFieldValues, TName>) => {
-  return (
-    <FormFieldContext.Provider value={{ name: props.name }}>
-      <Controller {...props} />
-    </FormFieldContext.Provider>
-  );
-};
-
-const useFormField = () => {
-  const fieldContext = React.useContext(FormFieldContext);
-  const itemContext = React.useContext(FormItemContext);
-  const { getFieldState, formState } = useFormContext();
-
-  const fieldState = getFieldState(fieldContext.name, formState);
-
-  if (!fieldContext) {
-    throw new Error("useFormField should be used within <FormField>");
-  }
-
-  const { id } = itemContext;
-
-  return {
-    id,
-    name: fieldContext.name,
-    formItemId: `${id}-form-item`,
-    formDescriptionId: `${id}-form-item-description`,
-    formMessageId: `${id}-form-item-message`,
-    ...fieldState,
-  };
-};
-
-type FormItemContextValue = {
-  id: string;
-};
-
-const FormItemContext = React.createContext<FormItemContextValue>({} as FormItemContextValue);
-
-const FormItem = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
-  ({ className, ...props }, ref) => {
-    const id = React.useId();
-
-    return (
-      <FormItemContext.Provider value={{ id }}>
-        <div ref={ref} className={cn("space-y-2", className)} {...props} />
-      </FormItemContext.Provider>
-    );
-  },
-);
-FormItem.displayName = "FormItem";
-
-const FormLabel = React.forwardRef<
-  React.ElementRef<typeof LabelPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> & {
-    label?: ReactNode; // main label
-    requiredLabel?: ReactNode; // normal text with required style
-    secondaryLabel?: ReactNode; // normal text with secondary style
-    as?: React.ElementType;
-    asChild?: boolean;
-    size?: "S" | "M" | "L";
-    variant?: "SystemStyle" | "PresentationStyle";
-    theme?: Themes;
-    labelsClassName?: string;
-    labelDirections?: "vertical" | "horizontal";
-    childrenDirections?: "vertical" | "horizontal";
-  }
->(({ className, ...props }, ref) => {
-  const { error, formItemId } = useFormField();
-
-  return (
-    <Label
-      ref={ref}
-      className={cn(error && "text-destructive", className)}
-      htmlFor={formItemId}
-      {...props}
-    />
-  );
-});
-FormLabel.displayName = "FormLabel";
-
-const FormControl = React.forwardRef<
-  React.ElementRef<typeof Slot>,
-  React.ComponentPropsWithoutRef<typeof Slot>
->(({ ...props }, ref) => {
-  const { error, formItemId, formDescriptionId, formMessageId } = useFormField();
-
-  return (
-    <Slot
-      ref={ref}
-      id={formItemId}
-      aria-describedby={!error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`}
-      aria-invalid={!!error}
-      {...props}
-    />
-  );
-});
-FormControl.displayName = "FormControl";
-
-const FormDescription = React.forwardRef<
-  HTMLParagraphElement,
-  React.HTMLAttributes<HTMLParagraphElement>
->(({ className, ...props }, ref) => {
-  const { formDescriptionId } = useFormField();
-
-  return (
-    <p
-      ref={ref}
-      id={formDescriptionId}
-      className={cn("text-[0.8rem] text-muted-foreground", className)}
-      {...props}
-    />
-  );
-});
-FormDescription.displayName = "FormDescription";
-
-const FormMessage = React.forwardRef<
-  HTMLParagraphElement,
-  React.HTMLAttributes<HTMLParagraphElement>
->(({ className, children, ...props }, ref) => {
-  const { error, formMessageId } = useFormField();
-  const body = error ? String(error?.message ?? "") : children;
-
-  if (!body) {
-    return null;
-  }
-
-  return (
-    <p
-      ref={ref}
-      id={formMessageId}
-      className={cn("text-[0.8rem] font-medium text-destructive", className)}
-      {...props}
-    >
-      {body}
-    </p>
-  );
-});
-FormMessage.displayName = "FormMessage";
-
-export {
-  useFormField,
-  Form,
-  FormItem,
-  FormLabel,
-  FormControl,
-  FormDescription,
-  FormMessage,
-  FormField,
-};

package/apps/lib/components/FormBuilder/context.ts

@@ -1,85 +0,0 @@
-"use client";
-
-import { createContext, useContext } from "react";
-
-/**
- * How a field row lays out its label against its control.
- *
- * `"flexible"` is the responsive one: stacked, then label-beside-control once the field row itself
- * is past the container `md` breakpoint. It is what you get by leaving `fieldDirection` unset — and
- * it is assignable so you can ask for it back where something else defaults you away from it, most
- * notably a `FormRenderer` drawer, which pins `"vertical"`.
- */
-export type FieldDirection = "horizontal" | "vertical" | "flexible";
-
-/** Loading flag — drives the Submit spinner and disables inputs. */
-export const LoadingContext = createContext<boolean>(false);
-export const useLoading = () => useContext(LoadingContext);
-
-/**
- * The `<form>`'s `id`. Provided by the FormBuilder root so a `FormBuilder.Submit` rendered
- * **outside** the `<form>` element — the absolute header's action pill, or the drawer header —
- * can still submit it via native `form={id}` association without the caller wiring an id by hand.
- */
-export const FormIdContext = createContext<string | undefined>(undefined);
-export const useFormId = () => useContext(FormIdContext);
-
-/**
- * Field row direction — set via `FormBuilder`'s `fieldDirection` prop. `undefined` (the default)
- * means "don't force one": `FieldSection` then uses its own responsive `flexible` layout, which
- * stacks on small screens and goes two-column at `lg`. Only set this to pin a direction.
- */
-export const DirectionContext = createContext<FieldDirection | undefined>(undefined);
-export const useDirection = () => useContext(DirectionContext);
-
-/**
- * Field chrome mode — how much layout a field draws around its control.
- *
- * - `false` (the default) — the full `FieldSection` row: label, required marker, stacked hint.
- * - `"table"` — a `FormBuilder.Table` cell: no row chrome, errors as a tooltip on the control,
- *   and the control takes the flush table border treatment via `onTable`.
- * - `"bare"` — chrome-less anywhere else, e.g. a `DataViews` filter or config panel: no row and
- *   no stacked hint, but the control keeps its normal standalone border.
- *
- * The two chrome-less modes are deliberately distinct: dropping the label row and taking the
- * table border are different decisions, and only a real table cell wants both.
- */
-export type CellMode = "table" | "bare" | false;
-
-export const CellContext = createContext<CellMode>(false);
-
-/** The raw mode. Prefer `useBare` / `useOnTable` — they express the two real questions. */
-export const useCellMode = () => useContext(CellContext);
-/** True when the field renders without `FieldSection` chrome — `"table"` **or** `"bare"`. */
-export const useBare = () => useContext(CellContext) !== false;
-/** True only inside a `FormBuilder.Table` cell — drives the control's `onTable` border style. */
-export const useOnTable = () => useContext(CellContext) === "table";
-
-/**
- * The "(Required)" tag `FieldShell` prints beside a `required` field's label.
- *
- * LOCAL PATCH (Contact Center): upstream hardcodes the English literal, so a
- * localized app cannot translate it. Defaulting to that literal keeps every
- * existing caller identical; provide the context once near the app root to
- * localize every field at once. Logged in TORCH-GLARE-FEEDBACK.md — re-apply
- * after any `npx torch-glare update`.
- */
-export const RequiredLabelContext = createContext<string>("(Required)");
-export const useRequiredLabel = () => useContext(RequiredLabelContext);
-
-/**
- * Step registry — a `FormRenderer.Step` provides this so the fields rendered inside it can
- * register their `name`, and the stepper validates just those names before advancing. `null`
- * when not inside a stepper.
- *
- * The stepper itself lives in `FormRenderer` — it is chrome. This registry stays here because
- * the *fields* are what register into it (see `fields/FieldShell.tsx`), and FormBuilder must
- * stand alone without FormRenderer installed. FormRenderer's `StepSlot` imports it from here;
- * the dependency never points the other way.
- */
-export interface StepRegistry {
-  register: (name: string) => void;
-  unregister: (name: string) => void;
-}
-export const StepContext = createContext<StepRegistry | null>(null);
-export const useStepRegistry = () => useContext(StepContext);

package/apps/lib/components/FormBuilder/field-kind.ts

@@ -1,28 +0,0 @@
-import React from "react";
-import type { FieldKind } from "./types";
-
-/**
- * The stamp that tells a consumer what a `FormBuilder.*` field produces.
- *
- * A form is normally read by the resolver and the submit handler, both of which know the shape
- * they expect. Some consumers do not: `DataViews.Filters` is handed arbitrary fields as children
- * and has to turn each one's value into a filter — a list, a numeric range, a date range — without
- * being told which is which.
- *
- * The alternative is comparing `element.type` against an imported component, which breaks across
- * duplicated module instances and silently stops matching after a hot reload. A property on the
- * component survives both.
- */
-
-const KEY = "__fieldKind";
-
-export function markFieldKind<T>(component: T, kind: FieldKind): T {
-  (component as Record<string, unknown>)[KEY] = kind;
-  return component;
-}
-
-/** The kind stamped on an element's component, or `undefined` if it is not a marked field. */
-export function fieldKindOf(node: React.ReactNode): FieldKind | undefined {
-  if (!React.isValidElement(node)) return undefined;
-  return (node.type as unknown as Record<string, unknown> | undefined)?.[KEY] as FieldKind | undefined;
-}

package/apps/lib/components/FormBuilder/fields/ChoiceFields.tsx

@@ -1,60 +0,0 @@
-"use client";
-
-import { LabeledCheckBox } from "../../LabeledCheckBox";
-import { RadioGroup } from "../../Radio";
-import { RadioCard } from "../../RadioCard";
-import { useLoading } from "../context";
-import type { CheckboxFieldProps, RadioCardsFieldProps } from "../types";
-import { FieldShell } from "./FieldShell";
-
-/**
- * `FormBuilder.Checkbox` — a single boolean checkbox. The field `label` sits in the
- * normal label column; an optional `subLabel` renders inline beside the checkbox (via
- * the clickable `LabeledCheckBox`).
- */
-export function CheckboxField({ subLabel, ...props }: CheckboxFieldProps) {
-  const loading = useLoading();
-  return (
-    <FieldShell {...props}>
-      {(field) => (
-        <div className="flex w-full items-center ps-2.5">
-          <LabeledCheckBox
-            id={props.name}
-            label={subLabel ?? ""}
-            checked={!!field.value}
-            size="S"
-            onCheckedChange={(checked) => field.onChange(checked === true)}
-            disabled={props.disabled || loading}
-          />
-        </div>
-      )}
-    </FieldShell>
-  );
-}
-
-/** `FormBuilder.RadioCards` — radio options rendered as cards (Glare `RadioCard`). */
-export function RadioCardsField(props: RadioCardsFieldProps) {
-  const loading = useLoading();
-  return (
-    <FieldShell {...props}>
-      {(field) => (
-        <RadioGroup
-          value={field.value ?? ""}
-          onValueChange={field.onChange}
-          className="grid w-full grid-cols-2 gap-3"
-        >
-          {props.options.map((opt) => (
-            <RadioCard
-              key={opt.value}
-              id={`${props.name}-${opt.value}`}
-              value={opt.value}
-              headerLabel={opt.label}
-              description={opt.description}
-              disabled={opt.disabled || props.disabled || loading}
-            />
-          ))}
-        </RadioGroup>
-      )}
-    </FieldShell>
-  );
-}

package/apps/lib/components/FormBuilder/fields/ColorField.tsx

@@ -1,59 +0,0 @@
-"use client";
-
-import { InputField } from "../../InputField";
-import { ColorPicker, CHECKERBOARD } from "../../ColorPicker";
-import { useLoading } from "../context";
-import type { ColorFieldProps } from "../types";
-import { FieldShell } from "./FieldShell";
-
-/**
- * `FormBuilder.Color` — an `InputField` holding the hex text, with a trailing action button that
- * carries the colour itself. That button is the `ColorPicker` trigger: clicking it opens the full
- * palette. Value is a hex string.
- */
-export function ColorField(props: ColorFieldProps) {
-  const loading = useLoading();
-
-  return (
-    <FieldShell {...props}>
-      {(field) => {
-        const value = typeof field.value === "string" ? field.value : "";
-        const disabled = props.disabled || loading;
-        return (
-          // The InputField IS the trigger: ColorPicker detects it as an input (it takes a `value`)
-          // and feeds it the hex, so clicking the field opens the palette.
-          <ColorPicker
-            value={value || undefined}
-            onChange={field.onChange}
-            presets={props.presets}
-            alpha={props.alpha ?? true}
-            disabled={disabled}
-          >
-            <InputField
-              // Explicit — otherwise Radix's trigger `type="button"` would land on the input.
-              type="text"
-              value={value}
-              onChange={(e) => field.onChange(e.target.value)}
-              placeholder={props.placeholder ?? "#000000"}
-              disabled={disabled}
-              className="w-full"
-              // The trailing action button holds the colour itself.
-              childrenSide={
-                <span
-                  aria-hidden
-                  className="block h-[26px] w-[26px] shrink-0 overflow-hidden rounded-[6px] border border-border-presentation-action-primary"
-                  style={CHECKERBOARD}
-                >
-                  <span
-                    className="block h-full w-full"
-                    style={{ backgroundColor: value || "#000000" }}
-                  />
-                </span>
-              }
-            />
-          </ColorPicker>
-        );
-      }}
-    </FieldShell>
-  );
-}

package/apps/lib/components/FormBuilder/fields/CustomField.tsx

@@ -1,11 +0,0 @@
-"use client";
-
-import type { CustomFieldProps } from "../types";
-import { FieldShell } from "./FieldShell";
-
-/** `FormBuilder.Custom` — render any control, keeping the FieldSection + validation wiring. */
-export function CustomField(props: CustomFieldProps) {
-  return (
-    <FieldShell {...props}>{(field, fieldState) => props.render({ field, fieldState })}</FieldShell>
-  );
-}

package/apps/lib/components/FormBuilder/fields/DateField.tsx

@@ -1,32 +0,0 @@
-"use client";
-
-import { DatePicker } from "../../DatePicker";
-import { useOnTable } from "../context";
-import type { DateFieldProps } from "../types";
-import { FieldShell } from "./FieldShell";
-
-/**
- * `FormBuilder.Date` (single) — and, via `mode`/`timePicker`, the presets
- * `.DateRange` (value `{from,to}`), `.DateMultiple` (value `Date[]`), and
- * `.DateTime` (date + time). All back onto the one Glare `DatePicker`.
- */
-export function DateField(props: DateFieldProps) {
-  const onTable = useOnTable();
-
-  return (
-    <FieldShell {...props}>
-      {(field) => (
-        <DatePicker
-          mode={props.mode ?? "single"}
-          timePicker={props.timePicker}
-          dateFormat={props.dateFormat}
-          value={field.value}
-          onTable={onTable}
-          onChange={(e) =>
-            field.onChange((e as unknown as { target: { value: unknown } }).target.value)
-          }
-        />
-      )}
-    </FieldShell>
-  );
-}

package/apps/lib/components/FormBuilder/fields/FieldArray.tsx

@@ -1,74 +0,0 @@
-"use client";
-
-import { useFormContext, useFieldArray, type FieldValues, type ArrayPath } from "react-hook-form";
-
-import { Button } from "../../Button";
-import { Card } from "../../Card";
-import type { FieldArrayProps } from "../types";
-
-/**
- * `FormBuilder.FieldArray` — a repeating list of sub-fields (RHF `useFieldArray`).
- * `children` renders one row's fields; name them `${rowName}.field`.
- */
-export function FieldArray(props: FieldArrayProps) {
-  const form = useFormContext<FieldValues>();
-  const { fields, append, remove } = useFieldArray({
-    control: form.control,
-    name: props.name as ArrayPath<FieldValues>,
-  });
-
-  if (props.hidden) return null;
-
-  const addButton = (
-    <Button
-      type="button"
-      size="S"
-      variant="BorderStyle"
-      onClick={() => append((props.defaultItem ?? {}) as never)}
-    >
-      <i className="ri-add-line" />
-      {props.addLabel ?? "Add"}
-    </Button>
-  );
-
-  return (
-    <section className="grid w-full max-w-[1200px] gap-3 px-[12px] py-[16px]">
-      <div className="flex items-center justify-between">
-        {props.label ? (
-          <span className="typography-body-medium-medium text-content-presentation-global-primary">
-            {props.label}
-          </span>
-        ) : (
-          <span />
-        )}
-        {addButton}
-      </div>
-      {props.description && (
-        <p className="typography-body-small-regular text-content-presentation-global-secondary">
-          {props.description}
-        </p>
-      )}
-
-      <div className="flex flex-col gap-3">
-        {fields.map((f, index) => (
-          <Card key={f.id} className="relative gap-3 pr-8">
-            <button
-              type="button"
-              aria-label="Remove"
-              onClick={() => remove(index)}
-              className="absolute right-2 top-2 inline-flex h-[22px] w-[22px] items-center justify-center rounded-full text-content-presentation-state-negative transition-colors hover:bg-background-presentation-action-hover"
-            >
-              <i className="ri-close-line text-[16px]" />
-            </button>
-            {props.children(`${props.name}.${index}`, index, () => remove(index))}
-          </Card>
-        ))}
-        {fields.length === 0 && (
-          <p className="typography-body-small-regular text-content-presentation-global-secondary">
-            No items yet.
-          </p>
-        )}
-      </div>
-    </section>
-  );
-}