@exxatdesignux/ui 0.2.18 → 0.3.0

package/template/components/data-views/os-folder-glyph.tsx

@@ -1,129 +1 @@
-"use client"
-
-/**
- * Windows 11–style folder art (Icons8) + optional FA glyph on the pocket.
- * Static asset: `public/folders/icons8-folder-windows-11.svg`
- */
-
-import * as React from "react"
-import { cn } from "@/lib/utils"
-import type { QuestionBankFolderColorKey } from "@/lib/mock/question-bank-folders"
-
-/** Served from `apps/web/public/folders/` (copied from Icons8 “folder windows 11 color”). */
-export const OS_FOLDER_GLYPH_SRC = "/folders/icons8-folder-windows-11.svg"
-
-/** Subtle hue tweak so “color” choice still reads on the shared yellow asset. */
-const COLOR_TINT_FILTER: Record<QuestionBankFolderColorKey, string> = {
-  brand: "hue-rotate(-42deg) saturate(1.25) brightness(0.97)",
-  success: "hue-rotate(82deg) saturate(1.2) brightness(0.95)",
-  warning: "hue-rotate(-5deg) saturate(1.35) brightness(1.02)",
-  destructive: "hue-rotate(300deg) saturate(1.15) brightness(0.92)",
-  muted: "saturate(0.15) brightness(1.08)",
-  chart1: "hue-rotate(200deg) saturate(1.2) brightness(0.96)",
-  chart2: "hue-rotate(95deg) saturate(1.15) brightness(0.96)",
-  chart3: "hue-rotate(265deg) saturate(1.2) brightness(0.96)",
-}
-
-const SIZE_MAP = {
-  /** Compact — folder inspector / column headers (matches ~36px row height). */
-  xs: "h-9 w-[2.6rem]",
-  sm: "h-[3.35rem] w-[3.85rem]",
-  md: "h-[4.6rem] w-[5.25rem]",
-  lg: "h-[6.5rem] w-[7.25rem]",
-}
-
-const ICON_TEXT: Record<keyof typeof SIZE_MAP, string> = {
-  xs: "text-[13px] leading-none",
-  sm: "text-lg",
-  md: "text-2xl",
-  lg: "text-4xl",
-}
-
-/** Darker version of each folder color for punched icon appearance. */
-const ICON_COLOR: Record<QuestionBankFolderColorKey, string> = {
-  brand: "text-orange-800 dark:text-orange-600",
-  success: "text-emerald-800 dark:text-emerald-600",
-  warning: "text-amber-800 dark:text-amber-600",
-  destructive: "text-red-800 dark:text-red-600",
-  muted: "text-slate-600 dark:text-slate-400",
-  chart1: "text-blue-800 dark:text-blue-600",
-  chart2: "text-lime-800 dark:text-lime-600",
-  chart3: "text-purple-800 dark:text-purple-600",
-}
-
-export interface OsFolderGlyphProps {
-  colorKey: QuestionBankFolderColorKey
-  /** Font Awesome icon classes without weight (e.g. `fa-stethoscope`). */
-  icon: string
-  size?: keyof typeof SIZE_MAP
-  className?: string
-  variant?: "solid" | "outline"
-  /**
-   * When false, exposes `role="img"` + `aria-label` (use with a short label, e.g. sheet preview).
-   * When true (default), hides the glyph from AT — parent control should name the action.
-   */
-  decorative?: boolean
-  /** Required when `decorative={false}` */
-  label?: string
-}
-
-export function OsFolderGlyph({
-  colorKey,
-  icon,
-  size = "md",
-  className,
-  variant = "solid",
-  decorative = true,
-  label,
-}: OsFolderGlyphProps) {
-  const outline = variant === "outline"
-  const tint = COLOR_TINT_FILTER[colorKey]
-
-  return (
-    <div
-      className={cn(
-        "group relative shrink-0 select-none transition-[transform,box-shadow] duration-200 ease-out",
-        "hover:z-[1] hover:scale-105 motion-reduce:transform-none motion-reduce:hover:scale-100",
-        SIZE_MAP[size],
-        className,
-      )}
-      role={!decorative && label ? "img" : undefined}
-      aria-label={!decorative ? label : undefined}
-      aria-hidden={decorative ? true : undefined}
-    >
-      {/* Static SVG — `next/image` can't optimize SVGs without
-          `dangerouslyAllowSVG`, so we stay on plain <img> but add the same
-          loading/decoding hints `next/image` would. Folder grids render many
-          of these at once; lazy-loading lets the browser skip off-screen
-          glyphs until they scroll near the viewport. */}
-      {/* eslint-disable-next-line @next/next/no-img-element -- SVG; next/image can't optimize without dangerouslyAllowSVG */}
-      <img
-        src={OS_FOLDER_GLYPH_SRC}
-        alt=""
-        width={240}
-        height={240}
-        draggable={false}
-        loading="lazy"
-        decoding="async"
-        className={cn(
-          "h-full w-full object-contain",
-          "transition-[filter] duration-200",
-          outline && "opacity-75 saturate-[0.65]",
-        )}
-        style={outline ? undefined : { filter: tint }}
-      />
-      <span
-        className={cn(
-          "pointer-events-none absolute inset-0 flex items-center justify-center",
-          size === "xs" ? "translate-y-[0.18rem]" : "translate-y-[0.35rem]",
-          ICON_TEXT[size],
-          outline
-            ? "text-muted-foreground"
-            : cn(ICON_COLOR[colorKey], "opacity-100"),
-        )}
-      >
-        <i className={cn("fa-solid", icon)} aria-hidden="true" />
-      </span>
-    </div>
-  )
-}
+export * from "@exxatdesignux/ui/components/data-views/os-folder-glyph"

package/template/components/data-views/outline-tree-menu.tsx

@@ -1,157 +1 @@
-"use client"
-
-/**
- * Central outline-tree chrome — mirrors shadcn/ui **Sidebar** file-tree structure
- * (`SidebarMenu` → `SidebarMenuItem` + `Collapsible` → `SidebarMenuSub` → rows) without
- * coupling to `useSidebar`.
- *
- * - **`guideLayout="inset"`** — same rhythm as `SidebarMenuSub` (`mx-3.5` + `translate-x-px`).
- * - **`guideLayout="chevronRail"`** — use with **`OutlineTreeCollapsibleContentRail`**: a **`w-6`**
- *   spacer lines up the vertical guide with the **horizontal center** of a **`size-8`** chevron
- *   when the folder row uses **`px-2`** (8px padding + 16px half of 32px chevron hit target).
- *
- * @see packages/ui/src/components/ui/sidebar.tsx — `SidebarMenuSub`, `SidebarMenuSubItem`
- */
-
-import * as React from "react"
-import { CollapsibleContent } from "@/components/ui/collapsible"
-import { cn } from "@/lib/utils"
-
-export type OutlineTreeSurface = "sidebar" | "panel"
-
-export type OutlineTreeGuideLayout = "inset" | "chevronRail"
-
-const outlineTreeSubInsetClass: Record<OutlineTreeSurface, string> = {
-  sidebar:
-    "mx-3.5 flex min-w-0 list-none translate-x-px flex-col gap-1 border-s border-sidebar-border px-2.5 py-0.5 rtl:-translate-x-px",
-  panel:
-    "mx-3.5 flex min-w-0 list-none translate-x-px flex-col gap-1 border-s border-border/60 px-2.5 py-0.5 rtl:-translate-x-px",
-}
-
-const outlineTreeSubChevronRailClass: Record<OutlineTreeSurface, string> = {
-  sidebar:
-    "flex min-w-0 flex-1 list-none flex-col gap-1 border-s border-sidebar-border py-0.5 ps-2.5",
-  panel: "flex min-w-0 flex-1 list-none flex-col gap-1 border-s border-border/60 py-0.5 ps-2.5",
-}
-
-/** Pull row content onto the guide line — matches `SidebarMenuSubButton` horizontal nudge (inset layout only). */
-export const OUTLINE_TREE_SUB_ROW_SHIFT_CLASS = "-translate-x-px rtl:translate-x-px"
-
-/** `CollapsibleContent` row: spacer width = `px-2` (8px) + half of `size-8` chevron (16px) → guide under chevron center. */
-export const OUTLINE_TREE_COLLAPSIBLE_CONTENT_RAIL_CLASS = "flex min-w-0 w-full"
-
-/** Spacer column — keep in sync with folder row `px-2` + `size-8` chevron. */
-export const OUTLINE_TREE_CHEVRON_GUIDE_SPACER_CLASS = "w-6 shrink-0"
-
-/** Wrap `OutlineTreeSub` with `guideLayout="chevronRail"` so the vertical border meets the chevron center. */
-export function OutlineTreeCollapsibleContentRail({
-  className,
-  children,
-  ...props
-}: React.ComponentProps<typeof CollapsibleContent>) {
-  return (
-    <CollapsibleContent
-      className={cn(OUTLINE_TREE_COLLAPSIBLE_CONTENT_RAIL_CLASS, className)}
-      {...props}
-    >
-      <div className={OUTLINE_TREE_CHEVRON_GUIDE_SPACER_CLASS} aria-hidden />
-      {children}
-    </CollapsibleContent>
-  )
-}
-
-/** Nested list under a folder — vertical guide + indent. */
-export function OutlineTreeSub({
-  surface = "panel",
-  guideLayout = "inset",
-  className,
-  ...props
-}: React.ComponentProps<"ul"> & {
-  surface?: OutlineTreeSurface
-  guideLayout?: OutlineTreeGuideLayout
-}) {
-  return (
-    <ul
-      data-slot="outline-tree-sub"
-      data-guide-layout={guideLayout}
-      className={cn(
-        guideLayout === "inset" && outlineTreeSubInsetClass[surface],
-        guideLayout === "chevronRail" && outlineTreeSubChevronRailClass[surface],
-        className,
-      )}
-      {...props}
-    />
-  )
-}
-
-/** Root or nested branch list — matches `SidebarMenu` spacing. */
-export function OutlineTreeMenu({ className, ...props }: React.ComponentProps<"ul">) {
-  return (
-    <ul
-      data-slot="outline-tree-menu"
-      className={cn("flex w-full min-w-0 list-none flex-col gap-0", className)}
-      {...props}
-    />
-  )
-}
-
-/** Expandable folder row wrapper — matches `SidebarMenuItem`. */
-export function OutlineTreeMenuItem({ className, ...props }: React.ComponentProps<"li">) {
-  return (
-    <li
-      data-slot="outline-tree-menu-item"
-      className={cn("group/menu-item relative min-w-0 w-full list-none", className)}
-      {...props}
-    />
-  )
-}
-
-/** Leaf / nested row inside `OutlineTreeSub` — matches `SidebarMenuSubItem`. */
-export function OutlineTreeSubItem({ className, ...props }: React.ComponentProps<"li">) {
-  return (
-    <li
-      data-slot="outline-tree-sub-item"
-      className={cn("group/menu-sub-item relative min-w-0 w-full list-none", className)}
-      {...props}
-    />
-  )
-}
-
-export interface OutlineTreeLeafButtonProps extends React.ComponentProps<"button"> {
-  surface?: OutlineTreeSurface
-  isActive?: boolean
-  /** Inset `OutlineTreeSub` only — nudge like `SidebarMenuSubButton`. Ignored when parent uses `chevronRail`. */
-  subGuideAlign?: boolean
-}
-
-/** Selectable leaf row (file / terminal row) — `SidebarMenuSubButton`–aligned rhythm. */
-export function OutlineTreeLeafButton({
-  surface = "panel",
-  isActive = false,
-  subGuideAlign = false,
-  className,
-  ...props
-}: OutlineTreeLeafButtonProps) {
-  return (
-    <button
-      type="button"
-      data-active={isActive || undefined}
-      className={cn(
-        "flex min-h-8 w-full min-w-0 cursor-pointer select-none items-center gap-2 overflow-hidden rounded-md px-2 text-start text-sm outline-none ring-ring focus-visible:ring-2 focus-visible:ring-inset [&>svg]:size-4 [&>svg]:shrink-0",
-        subGuideAlign && OUTLINE_TREE_SUB_ROW_SHIFT_CLASS,
-        surface === "panel" &&
-          cn(
-            "text-foreground hover:bg-muted/50",
-            isActive && "bg-accent font-medium text-accent-foreground",
-          ),
-        surface === "sidebar" &&
-          cn(
-            "text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
-            isActive && "bg-sidebar-accent font-medium text-sidebar-accent-foreground",
-          ),
-        className,
-      )}
-      {...props}
-    />
-  )
-}
+export * from "@exxatdesignux/ui/components/data-views/outline-tree-menu"

package/template/components/export-drawer.test.tsx

@@ -0,0 +1,71 @@
+/**
+ * ExportDrawer — render smoke tests
+ *
+ * Verify the promoted component renders without throwing and exposes the
+ * correct accessible structure when open. ExportDrawer is fully controlled
+ * (no built-in trigger); it must be wrapped in TooltipProvider.
+ */
+
+import { render, screen } from "@testing-library/react"
+import { describe, expect, it, vi } from "vitest"
+
+import { TooltipProvider } from "@/components/ui/tooltip"
+import { ExportDrawer } from "./export-drawer"
+
+function Wrapper({ children }: { children: React.ReactNode }) {
+  return <TooltipProvider>{children}</TooltipProvider>
+}
+
+describe("ExportDrawer", () => {
+  const noop = vi.fn()
+
+  it("renders without throwing when closed", () => {
+    expect(() =>
+      render(<ExportDrawer open={false} onOpenChange={noop} />, { wrapper: Wrapper }),
+    ).not.toThrow()
+  })
+
+  it("renders the drawer title when open", () => {
+    render(
+      <ExportDrawer open onOpenChange={noop} />,
+      { wrapper: Wrapper },
+    )
+    expect(screen.getByRole("heading", { name: /export/i })).toBeInTheDocument()
+  })
+
+  it("renders the Export submit button when open", () => {
+    render(
+      <ExportDrawer open onOpenChange={noop} />,
+      { wrapper: Wrapper },
+    )
+    const buttons = screen.getAllByRole("button", { name: /export/i })
+    expect(buttons.length).toBeGreaterThan(0)
+  })
+
+  it("renders the Cancel button when open", () => {
+    render(
+      <ExportDrawer open onOpenChange={noop} />,
+      { wrapper: Wrapper },
+    )
+    expect(screen.getByRole("button", { name: /cancel/i })).toBeInTheDocument()
+  })
+
+  it("renders the date range helper text when open", () => {
+    const { baseElement } = render(
+      <ExportDrawer open onOpenChange={noop} />,
+      { wrapper: Wrapper },
+    )
+    // The form shows a date range section — confirmed by looking for the "Date range" label
+    expect(baseElement.textContent).toMatch(/date range/i)
+  })
+
+  it("shows file format options when open", () => {
+    render(
+      <ExportDrawer open onOpenChange={noop} />,
+      { wrapper: Wrapper },
+    )
+    // The format field renders radio tiles — at least one "CSV" label should be visible
+    const csvElements = screen.getAllByText(/csv/i)
+    expect(csvElements.length).toBeGreaterThan(0)
+  })
+})