torch-glare 2.5.6 → 2.6.0

package/apps/lib/components/FormRenderer/FormDrawer.tsx

@@ -1,250 +0,0 @@
-"use client";
-
-import { ReactNode } from "react";
-
-import {
-  Drawer,
-  DrawerContent,
-  DrawerDescription,
-  DrawerNested,
-  DrawerPanel,
-  DrawerTitle,
-  DrawerNotch,
-  DrawerNotchClose,
-  DrawerNotchDivider,
-  DrawerNotchPill,
-} from "../Drawer";
-import { cn } from "../../utils/cn";
-import { FormHeaderBar, type HeaderVariant } from "./header";
-// Only for vaul's `direction` — every other mirror below is native CSS. See `slideFrom`.
-import { useHtmlDir } from "../../hooks/useHtmlDir";
-
-export interface FormDrawerProps {
-  open: boolean;
-  onOpenChange: (open: boolean) => void;
-  /** The `<FormBuilder>` (or any content) to host inside the drawer. */
-  children: ReactNode;
-  /**
-   * The conclusion panel rendered **beside** the form, outside the drawer's scrollable
-   * body — typically a `<FormSummary>` reading the same hoisted `form`. `FormDrawer` owns
-   * the box around it (full height, shrinkable), which is what lets the panel's own
-   * `h-full` and internal scrolling work. The panel sizes itself — a `FormSummary` is
-   * 228px wide by default — and brings its own (dark) background.
-   */
-  summary?: ReactNode;
-  /** @deprecated Renamed to `summary`. */
-  childrenOutside?: ReactNode;
-  /**
-   * Plain title text (uppercased) in the header's title pill — also the a11y title.
-   * A string, because it renders through the same `HeaderBar` as the page form.
-   */
-  title?: string;
-  /** Badge text in the title pill. Defaults from `variant` (New / Edit / View). */
-  badge?: string;
-  /** Colored badge variant, matching the page form's header. Default `"new"`. */
-  variant?: HeaderVariant;
-  /** Action buttons shown on the right of the drawer header (e.g. a Save submit). */
-  actions?: ReactNode;
-  /**
-   * Shows an "Open in new tab" pill in the notch when provided.
-   *
-   * Prefer `notchActions` (a `FormRenderer.NotchAction` child): the caller owns the label
-   * there, so it needs no second prop to be translatable. Kept for callers that only want
-   * upstream's single built-in action.
-   */
-  onOpenInNewTab?: () => void;
-  /**
-   * Buttons rendered in the notch, authored by the caller.
-   *
-   * LOCAL PATCH (Contact Center): upstream offers only `onOpenInNewTab` with a hardcoded
-   * English label, so a localized app cannot translate it and cannot add a second action.
-   * Passing the button itself solves both. Written as `FormRenderer.NotchAction` children
-   * and lifted here — see `notch-action.tsx`.
-   */
-  notchActions?: ReactNode;
-
-  /**
-   * LOCAL PATCH (Contact Center): the layout knobs `DrawerContent` already has.
-   *
-   * Upstream swallowed every one of them, which is why each non-default drawer in this app was
-   * hand-rolled instead: a two-field form does not want 1048px, a widget gallery is a bottom
-   * sheet, and a detail view brings its own header and scroll container. All optional and all
-   * defaulting to the original behaviour, so existing callers are untouched.
-   */
-
-  /** Which edge it slides from. `"bottom"` is a sheet; the default follows document direction. */
-  side?: "inline-end" | "bottom";
-  /**
-   * vaul `NestedRoot` — REQUIRED when this drawer opens inside another one, or the two Roots
-   * fight over the overlay and the scroll lock. Throws without a parent Drawer in the tree.
-   */
-  nested?: boolean;
-  /** The dark tray frame and the panel's border/inset shadow. Default `true`. */
-  framed?: boolean;
-  /** Skip the `FormHeaderBar` — for a child that draws its own header. */
-  hideHeader?: boolean;
-  /** Skip the padded scroll wrapper — for a child that owns its own padding and scrolling. */
-  bareBody?: boolean;
-  /** sr-only description. vaul warns when a drawer has none. */
-  description?: string;
-  /** Lands on the positioner: width, height, insets. Replaces the default sizing. */
-  wrapperClassName?: string;
-  /** Lands on the tray. */
-  className?: string;
-}
-
-/**
- * A right-anchored Glare drawer for hosting a form. This is a **FormRenderer**
- * concern — `FormBuilder` itself is drawer-unaware (it only displays inputs).
- * Wrap a `<FormBuilder>` in `<FormDrawer>` (and pass `fieldDirection="vertical"`
- * to the form) to show it in a drawer, or let `FormRenderer` do it via
- * `display: "drawer"`.
- *
- * The `wrapperClassName` includes `mt-0 h-auto` to cancel `DrawerContent`'s base
- * bottom-sheet offset (the Glare right-side form-drawer recipe).
- *
- * It owns the arrangement of its two slots: the form goes in a `DrawerPanel` (the light
- * surface), and `summary` sits beside it in the tray with a 6px gutter. The tray itself
- * paints nothing, so each panel brings its own background.
- */
-export function FormDrawer({
-  open,
-  onOpenChange,
-  children,
-  summary,
-  childrenOutside,
-  title = "Form",
-  badge,
-  variant,
-  actions,
-  onOpenInNewTab,
-  notchActions,
-  // LOCAL PATCH (Contact Center) — see the props above.
-  side = "inline-end",
-  nested = false,
-  framed = true,
-  hideHeader = false,
-  bareBody = false,
-  description,
-  wrapperClassName,
-  className,
-}: FormDrawerProps) {
-  const conclusion = summary ?? childrenOutside;
-  const isBottom = side === "bottom";
-  // A drawer inside a drawer must be vaul's NestedRoot, which scales the parent behind it.
-  const Root = nested ? DrawerNested : Drawer;
-
-  // The ONLY thing that still has to know the direction in JS. Everything visual below is
-  // expressed in logical CSS and mirrors itself; but vaul (1.1.2) has no RTL support at all —
-  // it computes an inline `transform: translate3d(±Npx,0,0)` from `direction` and keys its drag
-  // physics off it. An inline transform cannot be overridden from a stylesheet mid-drag, so this
-  // one value must be passed, not styled. Read from <html dir>, so it still follows the document.
-  const slideFrom = useHtmlDir() === "rtl" ? "left" : "right";
-
-  return (
-    <Root open={open} onOpenChange={onOpenChange} direction={isBottom ? "bottom" : slideFrom}>
-      {/* The panel fills the available width (minus the 8px insets), capped at 1048px.
-          `gap-[6px]` is the gutter between the form panel and the conclusion beside it. */}
-      <DrawerContent
-        // Logical: the notch attaches to the inline-start edge, which the browser resolves
-        // to left under LTR and right under RTL. No direction check here.
-        notchSide="start"
-        framed={framed}
-        // `end-2` / `start-auto` are logical insets (inset-inline-*), so the panel parks
-        // against the inline-end edge in either direction — this used to be two hand-written
-        // physical class strings picked by JS.
-        //
-        // LOCAL PATCH (Contact Center): `inset-x-auto` is load-bearing. `DrawerContent` hardcodes
-        // `inset-x-0`, and tailwind-merge's `inset-x` conflict group covers `left`/`right` but NOT
-        // `start`/`end` — so `inset-x-0` survives into the class list and was only losing because
-        // Tailwind v4 happens to emit `start`/`end` later in the cascade. Every caller inherited
-        // that; this stops depending on emit order.
-        wrapperClassName={
-          wrapperClassName ??
-          (isBottom
-            ? "inset-x-0 bottom-0 top-auto mt-0 h-auto w-full"
-            : "top-2 end-2 bottom-2 inset-x-auto start-auto mt-0 h-auto w-[calc(100vw-1rem)] max-w-[1048px]")
-        }
-        className={cn("gap-[6px]", className)}
-        // LOCAL PATCH (Contact Center): a bottom sheet has no notch. The notch is a tab on the
-        // panel's inline-start edge — on a sheet that slides up from below there is no such edge
-        // to hang it from, and it renders as a stray pill floating above the corner.
-        notch={
-          isBottom ? undefined : (
-          <DrawerNotch>
-            <DrawerNotchClose onClick={() => onOpenChange(false)} />
-            {/* Caller-authored notch buttons win; `onOpenInNewTab` is upstream's built-in
-                single action, kept as a fallback for callers that pass no children. */}
-            {notchActions ? (
-              <>
-                <DrawerNotchDivider />
-                {notchActions}
-              </>
-            ) : (
-              onOpenInNewTab && (
-                <>
-                  <DrawerNotchDivider />
-                  <DrawerNotchPill color="Yellow" onClick={onOpenInNewTab}>
-                    Open in new tab
-                    <i className="ri-arrow-right-up-line text-[12px]" />
-                  </DrawerNotchPill>
-                </>
-              )
-            )}
-          </DrawerNotch>
-          )
-        }
-      >
-        {/* `rounded-se-*` is the logical top-inline-end corner: rounded away from the notch,
-            square beneath it, mirrored by the browser rather than by a ternary. */}
-        <DrawerPanel
-          framed={framed}
-          className={cn(
-            "p-0",
-            isBottom ? "rounded-t-[16px]" : "rounded-se-[16px] rounded-b-[16px]",
-          )}
-        >
-          <div className="relative flex min-h-0 flex-1 flex-col">
-            {/* Vaul requires a Drawer.Title for the a11y name; the visible title is the
-                HeaderBar below, so this one is for screen readers only. */}
-            <DrawerTitle className="sr-only">{title}</DrawerTitle>
-            {description && (
-              <DrawerDescription className="sr-only">{description}</DrawerDescription>
-            )}
-
-            {/* The SAME floating header the page form uses, so a form's title looks
-                identical in either surface. */}
-            {!hideHeader && (
-              <FormHeaderBar title={title} label={badge} variant={variant}>
-                {actions}
-              </FormHeaderBar>
-            )}
-
-            {/* pt-[72px] clears the 44px header pill (inset 4px) — same as the page shell. The
-                48px bottom breathing-room goes on an inner wrapper, not the scroll container:
-                FormRenderer's outer element is `h-full`, which would pin it to the content box and
-                swallow the container's own `pb`. On a plain wrapper that `h-full` resolves to the
-                content height, so the padding actually lengthens the scroll. The conclusion panel
-                is a separate sibling, so it keeps its own spacing. */}
-            {/* LOCAL PATCH (Contact Center): `bareBody` hands the body to the child untouched.
-                Without it, a child that already scrolls and already offsets for its own header
-                (a detail view does both) gets a second scroll container and a second 72px of
-                dead space stacked on top of its own. */}
-            {bareBody ? (
-              children
-            ) : (
-              <div className={cn("h-full overflow-y-auto px-3", !hideHeader && "pt-[72px]")}>
-                <div className="pb-[48px]">{children}</div>
-              </div>
-            )}
-          </div>
-        </DrawerPanel>
-
-        {/* `flex min-h-0` so the conclusion stretches to the tray's full height and can
-            still shrink — without `min-h-0` it would grow past the tray instead of
-            scrolling inside it. No `flex-1`: the panel sizes itself. */}
-        {conclusion && <div className="flex min-h-0">{conclusion}</div>}
-      </DrawerContent>
-    </Root>
-  );
-}

package/apps/lib/components/FormRenderer/detail.tsx

@@ -1,256 +0,0 @@
-"use client";
-
-import * as React from "react";
-import * as TabsPrimitive from "@radix-ui/react-tabs";
-
-import { cn } from "../../utils/cn";
-import { formBarItemStyles } from "../TabFormItem";
-import { useHtmlDir } from "../../hooks/useHtmlDir";
-import { FormHeaderBar, type HeaderVariant } from "./header";
-
-/**
- * Detail-tabs — a display-only view where a left **sidebar** switches the main area between
- * **`FormRenderer.Section` panels** (a detail page, not a form). It lives on `FormRenderer`
- * (`FormRenderer.Sidebar` / `.Sidebar.Item` / `.Tab`) so `FormBuilder` stays form-only. Built on
- * the same Radix Tabs primitive shadcn uses: the sidebar is the `Tabs.List`, each `Sidebar.Item` a
- * `Tabs.Trigger`, each `Tab` a `Tabs.Content` — so the fixed rail and the panels share tab state.
- */
-
-export interface DetailSidebarProps {
-  children: React.ReactNode;
-}
-
-/**
- * `FormRenderer.Sidebar` — the tab rail, sitting where a `FormRenderer.Stepper`'s nav would.
- * Renders **nothing itself**: the FormRenderer root detects it and places its `Sidebar.Item`
- * children (the tab triggers) into the fixed rail.
- */
-// eslint-disable-next-line @typescript-eslint/no-unused-vars -- children are read by the FormRenderer root
-function DetailSidebarRoot(_props: DetailSidebarProps) {
-  return null;
-}
-(DetailSidebarRoot as unknown as { __isDetailSidebar: boolean }).__isDetailSidebar = true;
-
-export interface DetailSidebarItemProps {
-  /** Ties this row to the `FormRenderer.Tab` of the same `value` — clicking it shows that panel. */
-  value: string;
-  /** Leading icon (e.g. a Remix `<i className="ri-…" />`). */
-  icon?: React.ReactNode;
-  children: React.ReactNode;
-}
-
-/**
- * `FormRenderer.Sidebar.Item` — a rail nav row, rendered as a Radix `Tabs.Trigger` styled with the
- * `TabFormItem` `tree` look. Radix drives the active state (`data-state="active"` → black pill).
- */
-function DetailSidebarItem({ value, icon, children }: DetailSidebarItemProps) {
-  return (
-    <TabsPrimitive.Trigger
-      value={value}
-      className={cn(
-        formBarItemStyles({ componentType: "tree" }),
-        "h-[32px] w-full justify-start gap-2 rounded-[10px] px-[6px] [&_i]:text-[16px]",
-        // Radix sets `data-state` on the trigger; the active tab is the filled (black) pill.
-        "data-[state=active]:bg-background-presentation-tab-topbar-selected data-[state=active]:text-content-presentation-tab-action-selected",
-        "data-[state=active]:hover:bg-background-presentation-tab-topbar-selected data-[state=active]:hover:px-[6px]",
-      )}
-    >
-      {icon}
-      {/* LOCAL PATCH (Contact Center): `text-start`, not `text-left` — otherwise an Arabic label
-          left-aligns inside a right-aligned rail, and `truncate` clips the wrong end. */}
-      <span className="flex-1 truncate text-start typography-body-medium-medium">{children}</span>
-    </TabsPrimitive.Trigger>
-  );
-}
-
-export const DetailSidebar = Object.assign(DetailSidebarRoot, {
-  Item: DetailSidebarItem,
-});
-
-export function isDetailSidebarElement(
-  node: React.ReactNode,
-): node is React.ReactElement<DetailSidebarProps> {
-  return (
-    React.isValidElement(node) &&
-    (node.type as { __isDetailSidebar?: boolean })?.__isDetailSidebar === true
-  );
-}
-
-export interface DetailRowProps {
-  label: React.ReactNode;
-  value: React.ReactNode;
-}
-
-/**
- * `FormRenderer.Row` — a read-only label/value cell for detail content (the display counterpart of a
- * form field). Drop several inside a `FormRenderer.Grid` within a `FormRenderer.Section`.
- */
-export function DetailRow({ label, value }: DetailRowProps) {
-  return (
-    <div className="flex flex-col gap-1">
-      <span className="typography-body-small-regular text-content-presentation-global-secondary">
-        {label}
-      </span>
-      <span className="typography-body-medium-medium text-content-presentation-global-primary">
-        {value}
-      </span>
-    </div>
-  );
-}
-
-export interface DetailGridProps {
-  /** Column count (default 2). */
-  columns?: 1 | 2 | 3;
-  children: React.ReactNode;
-}
-
-const GRID_COLS: Record<NonNullable<DetailGridProps["columns"]>, string> = {
-  1: "grid-cols-1",
-  2: "grid-cols-2",
-  3: "grid-cols-3",
-};
-
-/**
- * `FormRenderer.Grid` — arranges `FormRenderer.Row`s in an equal-column grid spanning the **full
- * section width** (default 2 columns, so cells split in half). Padded so the rows breathe inside a
- * `FormRenderer.Section` (clear of the title badge, roomy row + column spacing).
- */
-export function DetailGrid({ columns = 2, children }: DetailGridProps) {
-  return (
-    <div className={cn("grid w-full gap-x-12 gap-y-5 py-3", GRID_COLS[columns])}>{children}</div>
-  );
-}
-
-export interface DetailTabProps {
-  /** Ties this panel to the `Sidebar.Item` of the same `value`. */
-  value: string;
-  /** The panel body — typically `FormRenderer.Section` display blocks. */
-  children: React.ReactNode;
-}
-
-/**
- * `FormRenderer.Tab` — a content panel shown when its `value` is the active tab. Renders
- * **nothing itself**: the FormRenderer root detects it and mounts it as a Radix `Tabs.Content`
- * (kept mounted, inactive ones hidden).
- */
-// eslint-disable-next-line @typescript-eslint/no-unused-vars -- read by the FormRenderer root
-export function DetailTab(_props: DetailTabProps) {
-  return null;
-}
-(DetailTab as unknown as { __isDetailTab: boolean }).__isDetailTab = true;
-
-export function isDetailTabElement(
-  node: React.ReactNode,
-): node is React.ReactElement<DetailTabProps> {
-  return (
-    React.isValidElement(node) && (node.type as { __isDetailTab?: boolean })?.__isDetailTab === true
-  );
-}
-
-export interface DetailTabsViewProps {
-  header?: { title: string; label?: string; variant?: HeaderVariant };
-  /** Header action buttons (Print / Approve / …). */
-  actions?: React.ReactNode;
-  /** The `FormRenderer.Sidebar` element — its children are the tab triggers. */
-  sidebar: React.ReactElement<DetailSidebarProps>;
-  /** The `FormRenderer.Tab` elements — the content panels. */
-  tabs: React.ReactElement<DetailTabProps>[];
-  className?: string;
-  /**
-   * LOCAL PATCH (Contact Center): the active tab, when the caller owns it. Omit both this and
-   * `onValueChange` to keep the original uncontrolled behaviour (defaults to the first tab).
-   *
-   * Upstream offered no way in, so a detail view could not put its tab in the URL — no
-   * `?tab=audit` deep link, no correct back-navigation, and a reload always bounced the user to
-   * the first tab. That is what this app's `useTabPersistence` provides.
-   */
-  value?: string;
-  /** LOCAL PATCH (Contact Center): fires when a rail item is clicked. See `value`. */
-  onValueChange?: (value: string) => void;
-  /**
-   * LOCAL PATCH (Contact Center): rendered inside a surface that already draws its own card —
-   * a drawer, a panel. Drops the rounded body background so it doesn't double up, and lets the
-   * host own the height instead of filling the viewport.
-   */
-  embedded?: boolean;
-}
-
-/**
- * The detail-tabs surface: the floating header over a fixed left rail (the sidebar) + a scrolling
- * content column showing the active tab. Radix `Tabs.Root` owns the state — uncontrolled and
- * defaulting to the first tab, unless the caller passes `value`/`onValueChange`. The rail matches
- * the stepper's rail position; only the content column scrolls.
- */
-export function DetailTabsView({
-  header,
-  actions,
-  sidebar,
-  tabs,
-  className,
-  value,
-  onValueChange,
-  embedded,
-}: DetailTabsViewProps) {
-  const defaultValue = tabs[0]?.props.value;
-  // Radix treats a defined `value` as controlled, so only pass one of the two — handing it both
-  // logs a warning and pins the tab.
-  const controlled = value !== undefined;
-  // LOCAL PATCH (Contact Center): Radix Tabs defaults to `dir="ltr"` when given neither a `dir`
-  // prop nor a `DirectionProvider`, and it stamps that onto the subtree — which left this whole
-  // detail surface rendering left-to-right on an Arabic page, no matter what `<html dir>` said.
-  // Same fix already applied to `Tabs.tsx` and `TabPage.tsx`.
-  const htmlDir = useHtmlDir();
-
-  return (
-    <TabsPrimitive.Root
-      orientation="vertical"
-      dir={htmlDir}
-      {...(controlled ? { value, onValueChange } : { defaultValue, onValueChange })}
-      className={cn("h-full w-full @container", className)}
-    >
-      {/* Scroll shell — mirrors FormBuilder's: the absolute header floats over the body. */}
-      <div
-        className={cn(
-          "relative isolate flex h-full w-full flex-col overflow-hidden",
-          !embedded && "rounded-2xl bg-background-presentation-body-primary",
-        )}
-      >
-        {header && (
-          <FormHeaderBar title={header.title} label={header.label} variant={header.variant}>
-            {actions}
-          </FormHeaderBar>
-        )}
-
-        <div className="relative z-[1] flex min-h-0 w-full flex-1 flex-row">
-          {/* The fixed rail — the tab list. `pt-[72px]` clears the floating header.
-
-              LOCAL PATCH (Contact Center): `border-e`, not `border-r`. The row is `flex-row`, which
-              is direction-aware, so under `dir="rtl"` the rail moves to the right — a physical
-              right border then lands on the outer screen edge instead of between rail and content,
-              leaving the rail visually detached. */}
-          <TabsPrimitive.List asChild>
-            <aside className="flex h-full w-[216px] shrink-0 flex-col gap-1 overflow-y-auto border-e border-border-presentation-global-primary bg-black-alpha-5 px-2 pb-6 pt-[72px] scrollbar-hide">
-              {sidebar.props.children}
-            </aside>
-          </TabsPrimitive.List>
-
-          {/* The only scrolling region — the active tab's Sections. */}
-          <div className="flex min-h-0 w-full flex-1 flex-col overflow-y-auto px-6 py-6 pt-[72px] scrollbar-hide">
-            <div className="mx-auto flex w-full max-w-[1100px] flex-col gap-4">
-              {tabs.map((panel) => (
-                <TabsPrimitive.Content
-                  key={panel.props.value}
-                  value={panel.props.value}
-                  forceMount
-                  className="flex flex-col gap-4 outline-none data-[state=inactive]:hidden"
-                >
-                  {panel.props.children}
-                </TabsPrimitive.Content>
-              ))}
-            </div>
-          </div>
-        </div>
-      </div>
-    </TabsPrimitive.Root>
-  );
-}