@exxatdesignux/ui 0.2.18 → 0.3.0

package/template/components/leo-insight-indicator.tsx

@@ -227,7 +227,7 @@ export function LeoInsightIndicator({
             {/* Kind + delta chip */}
             <span
               className={cn(
-                "ml-auto inline-flex items-center gap-1 rounded-full border px-2 py-0.5 text-[11px] font-semibold text-foreground",
+                "ms-auto inline-flex items-center gap-1 rounded-full border px-2 py-0.5 text-[11px] font-semibold text-foreground",
                 LEO_TOKENS.softBgClass,
                 LEO_TOKENS.borderClass,
               )}
@@ -353,7 +353,7 @@ export function LeoInsightIndicator({
               <span>Ask Leo</span>
               <AskLeoShortcutKbds
                 variant="bare"
-                className="ml-0.5 hidden sm:inline-flex"
+                className="ms-0.5 hidden sm:inline-flex"
               />
             </Button>
           </div>

package/template/components/new-placement-back-btn.tsx

@@ -17,7 +17,7 @@ export function NewPlacementBackBtn() {
     <Button
       variant="ghost"
       size="sm"
-      className="-ml-2"
+      className="-ms-2"
       onClick={handleBack}
       aria-label="Back to placements list"
     >

package/template/components/new-placement-form.tsx

@@ -32,7 +32,6 @@ import {
 import { zodResolver } from "@hookform/resolvers/zod"
 import { z } from "zod"
 
-import { cn } from "@/lib/utils"
 import { devLog } from "@/lib/dev-log"
 import { formatDateFromDate } from "@/lib/date-filter"
 
@@ -64,9 +63,10 @@ import {
 } from "@/components/ui/select"
 import { RadioGroup, RadioGroupItem, RadioGroupLabel } from "@/components/ui/radio-group"
 import { Card, CardHeader, CardTitle, CardAction, CardContent } from "@/components/ui/card"
-import { Kbd, KbdGroup } from "@/components/ui/kbd"
-import { Shortcut } from "@/components/ui/dropdown-menu"
-import { useModKeyLabel, useAltKeyLabel } from "@/hooks/use-mod-key-label"
+import {
+  NewFocusTemplate,
+  type NewFocusStep,
+} from "@/components/templates/new-focus-template"
 
 // ── Constants ─────────────────────────────────────────────────────────────────
 
@@ -224,82 +224,12 @@ function PhoneMaskedInput({
 
 // ── Step metadata ─────────────────────────────────────────────────────────────
 
-const STEPS = [
-  { id: 1, label: "Student",    icon: "fa-user-graduate"   },
-  { id: 2, label: "Site",       icon: "fa-hospital"        },
-  { id: 3, label: "Schedule",   icon: "fa-calendar-days"   },
-  { id: 4, label: "Supervisor", icon: "fa-user-tie"        },
-  { id: 5, label: "Review",     icon: "fa-clipboard-check" },
-] as const
-
-// Fields validated at each step before advancing
+// Field-validation map keyed by step index (0-based) — passed to `form.trigger` before advance.
 const STEP_FIELDS: Record<number, (keyof PlacementFormValues)[]> = {
-  1: ["firstName", "lastName", "email", "studentId", "program", "cohort"],
-  2: ["site", "department", "siteAddress", "rotation", "creditHours"],
-  3: ["startDate", "endDate", "duration", "hoursPerWeek", "shift", "remoteOption"],
-  4: ["supervisor", "objectives"],
-}
-
-// ── Step indicator ────────────────────────────────────────────────────────────
-
-function StepIndicator({ current }: { current: number }) {
-  return (
-    <nav aria-label="Form steps" className="mb-8">
-      <ol className="flex items-center">
-        {STEPS.map((step, idx) => {
-          const isCompleted = step.id < current
-          const isActive    = step.id === current
-          const isLast      = idx === STEPS.length - 1
-
-          return (
-            <React.Fragment key={step.id}>
-              <li className="flex flex-col items-center gap-1.5 shrink-0">
-                <div
-                  aria-current={isActive ? "step" : undefined}
-                  className={cn(
-                    "flex size-9 items-center justify-center rounded-full border-2 text-xs font-semibold transition-all",
-                    isCompleted && "border-emerald-600 bg-emerald-600 text-white",
-                    isActive    && "border-brand bg-brand/10 text-brand",
-                    !isCompleted && !isActive && "border-border bg-muted/40 text-muted-foreground",
-                  )}
-                >
-                  {isCompleted
-                    ? <i className="fa-light fa-check text-xs" aria-hidden="true" />
-                    : <span>{step.id}</span>
-                  }
-                  <span className="sr-only">
-                    Step {step.id}: {step.label}
-                    {isCompleted ? " (completed)" : isActive ? " (current)" : ""}
-                  </span>
-                </div>
-                <span
-                  className={cn(
-                    "hidden sm:block text-xs whitespace-nowrap",
-                    isActive    && "text-foreground font-medium",
-                    isCompleted && "text-emerald-600 font-medium",
-                    !isCompleted && !isActive && "text-muted-foreground",
-                  )}
-                  aria-hidden="true"
-                >
-                  {step.label}
-                </span>
-              </li>
-
-              {!isLast && (
-                <div
-                  aria-hidden="true"
-                  className={cn(
-                    "flex-1 h-0.5 mx-2 mb-5 rounded-full transition-colors",
-                    step.id < current ? "bg-emerald-600" : "bg-border"
-                  )}
-                />
-              )}
-            </React.Fragment>
-          )
-        })}
-      </ol>
-    </nav>
-  )
+  0: ["firstName", "lastName", "email", "studentId", "program", "cohort"],
+  1: ["site", "department", "siteAddress", "rotation", "creditHours"],
+  2: ["startDate", "endDate", "duration", "hoursPerWeek", "shift", "remoteOption"],
+  3: ["supervisor", "objectives"],
 }
 
 // ── Section heading ───────────────────────────────────────────────────────────
@@ -912,10 +842,9 @@ function Step5({
 // ── Main component ────────────────────────────────────────────────────────────
 
 export function NewPlacementForm() {
-  const router   = useRouter()
-  const [step, setStep]           = React.useState(1)
+  const router = useRouter()
+  const [step, setStep] = React.useState(0)
   const [submitting, setSubmitting] = React.useState(false)
-  const stepHeadingRef = React.useRef<HTMLDivElement>(null)
 
   const form = useForm<PlacementFormValues>({
     resolver: zodResolver(placementSchema) as Resolver<PlacementFormValues>,
@@ -934,134 +863,79 @@ export function NewPlacementForm() {
     },
   })
 
-  // Move focus to the top section heading when step changes (WCAG 2.4.3)
-  React.useEffect(() => {
-    stepHeadingRef.current?.focus()
-  }, [step])
+  const goToStep = React.useCallback((n: number) => setStep(n), [])
 
-  async function handleNext() {
+  const handleNext = React.useCallback(async (): Promise<boolean> => {
     const fields = STEP_FIELDS[step]
-    if (fields) {
-      const ok = await form.trigger(fields)
-      if (!ok) return
-    }
-    setStep(s => Math.min(s + 1, 5))
-    window.scrollTo({ top: 0, behavior: "smooth" })
-  }
-
-  function handleBack() {
-    setStep(s => Math.max(s - 1, 1))
-    window.scrollTo({ top: 0, behavior: "smooth" })
-  }
-
-  function goToStep(n: number) {
-    setStep(n)
-    window.scrollTo({ top: 0, behavior: "smooth" })
-  }
-
-  async function handleSubmit(values: PlacementFormValues) {
+    if (!fields) return true
+    return await form.trigger(fields)
+  }, [form, step])
+
+  const handleSubmit = React.useCallback(async (values: PlacementFormValues) => {
     setSubmitting(true)
     await new Promise(r => setTimeout(r, 1400))
     devLog("New placement:", values)
     setSubmitting(false)
     router.push("/data-list")
-  }
+  }, [router])
+
+  const handleFormSubmit = React.useCallback(
+    () => form.handleSubmit(handleSubmit)(),
+    [form, handleSubmit],
+  )
 
   // `useWatch` is memoization-friendly (returns a stable reactive value)
   // unlike `form.watch()`, which the React Compiler can't memoize safely.
   const formData = useWatch({ control: form.control })
-  const mod = useModKeyLabel()
-  const alt = useAltKeyLabel()
+
+  const steps: NewFocusStep[] = React.useMemo(
+    () => [
+      { id: "student",    label: "Student",    icon: "fa-user-graduate",   render: () => <Step1 /> },
+      { id: "site",       label: "Site",       icon: "fa-hospital",        render: () => <Step2 /> },
+      { id: "schedule",   label: "Schedule",   icon: "fa-calendar-days",   render: () => <Step3 /> },
+      { id: "supervisor", label: "Supervisor", icon: "fa-user-tie",        render: () => <Step4 /> },
+      { id: "review",     label: "Review",     icon: "fa-clipboard-check", render: () => <Step5 data={formData} goToStep={goToStep} /> },
+    ],
+    [formData, goToStep],
+  )
+  const lastIndex = steps.length - 1
 
   return (
     <Form {...form}>
-      {/* Implicit submit only fires on step 5 (Review) — Enter on earlier steps is ignored so the review never auto-closes when users hit Enter inside an input on steps 1–4. */}
+      {/*
+        Implicit submit only fires on the final step (Review) — Enter on earlier steps
+        is ignored so the review never auto-closes when users hit Enter inside an input
+        on steps before the last.
+      */}
+      {/*
+        `<form>` participates in the (app)/layout flex row alongside the sidebar +
+        secondary panel + Ask Leo rail, so it MUST behave like a normal flex column
+        host (flex-1 + min-w-0). Without these classes the form shrinks to its
+        intrinsic content width and the page collapses into a narrow column on the
+        left with the rest of the viewport empty.
+      */}
       <form
         onSubmit={(e) => {
-          if (step !== 5) { e.preventDefault(); return }
+          if (step !== lastIndex) { e.preventDefault(); return }
           form.handleSubmit(handleSubmit)(e)
         }}
         noValidate
         aria-label="New placement form"
+        className="flex min-h-0 min-w-0 flex-1 flex-col"
       >
-        {/* Steps 1–4: ⌘Enter advances. Step 5: ⌘Enter submits — plain Enter is intentionally NOT bound:
-            a global Enter shortcut would fire when focus is on the step container (we focus it for
-            a11y after each step), submitting the form without an explicit submit action — felt like
-            "Review auto-closes". Native Enter on the primary submit button still works. */}
-        {step < 5 && <Shortcut keys="⌘Enter" disabled={submitting} onInvoke={handleNext} />}
-        {step === 5 && <Shortcut keys="⌘Enter" disabled={submitting} onInvoke={() => form.handleSubmit(handleSubmit)()} />}
-        {step > 1 && <Shortcut keys="⌘⌥←" disabled={submitting} onInvoke={handleBack} /> }
-        <StepIndicator current={step} />
-
-        {/* Step content — ref captures focus when step changes */}
-        <div ref={stepHeadingRef} tabIndex={-1} className="outline-none">
-          {step === 1 && <Step1 />}
-          {step === 2 && <Step2 />}
-          {step === 3 && <Step3 />}
-          {step === 4 && <Step4 />}
-          {step === 5 && <Step5 data={formData} goToStep={goToStep} />}
-        </div>
-
-        {/* Navigation — sticky at bottom of scroll container */}
-        <div className="sticky bottom-0 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/80 border-t border-border flex items-center justify-between mt-8 py-4">
-          {/* Progress dots */}
-          <div className="flex items-center gap-1.5" aria-hidden="true">
-            {STEPS.map(s => (
-              <div
-                key={s.id}
-                className={cn(
-                  "rounded-full transition-all h-1.5",
-                  s.id === step  ? "w-6 bg-brand"   :
-                  s.id < step    ? "w-3 bg-brand/40" :
-                                   "w-3 bg-border"
-                )}
-              />
-            ))}
-          </div>
-
-          {/* Back + Next grouped together */}
-          <div className="flex items-center gap-2">
-            <Button
-              type="button"
-              variant="outline"
-              onClick={handleBack}
-              disabled={step === 1 || submitting}
-            >
-              <i className="fa-light fa-arrow-left text-[13px]" aria-hidden="true" />
-              Back
-              <KbdGroup className="ml-1.5">
-                <Kbd variant="bare">{mod}{alt}←</Kbd>
-              </KbdGroup>
-            </Button>
-
-            {step < 5 ? (
-              <Button type="button" onClick={handleNext}>
-                Next
-                <i className="fa-light fa-arrow-right text-[13px]" aria-hidden="true" />
-                <KbdGroup className="ml-1.5">
-                  <Kbd variant="bare">{mod}⏎</Kbd>
-                </KbdGroup>
-              </Button>
-            ) : (
-              <Button type="submit" disabled={submitting} aria-busy={submitting}>
-                {submitting ? (
-                  <>
-                    <i className="fa-light fa-spinner-third fa-spin text-[13px]" aria-hidden="true" />
-                    Creating…
-                  </>
-                ) : (
-                  <>
-                    <i className="fa-light fa-check text-[13px]" aria-hidden="true" />
-                    Create placement
-                    <KbdGroup className="ml-1.5">
-                      <Kbd variant="bare">{mod}⏎</Kbd>
-                    </KbdGroup>
-                  </>
-                )}
-              </Button>
-            )}
-          </div>
-        </div>
+        <NewFocusTemplate
+          variant="workflow"
+          title="New record"
+          description="Multi-step wizard shell (demo fields) — swap the form for your product flow."
+          back={{ href: "/data-list", label: "Back", ariaLabel: "Back to list hub" }}
+          steps={steps}
+          step={step}
+          onStepChange={setStep}
+          onNext={handleNext}
+          onSubmit={handleFormSubmit}
+          submitLabel="Create placement"
+          submitting={submitting}
+        />
       </form>
     </Form>
   )