@exxatdesignux/ui 0.1.0 → 0.2.7

package/template/components/question-bank-new-folder-sheet.tsx

@@ -0,0 +1,248 @@
+"use client"
+
+/**
+ * Shared “new folder” floating sheet (same shell as Export) — used by OS folder grid and column panel.
+ */
+
+import * as React from "react"
+import { Button } from "@/components/ui/button"
+import { Shortcut } from "@/components/ui/dropdown-menu"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import { Sheet, SheetContent, SheetTitle } from "@/components/ui/sheet"
+import { Tip } from "@/components/ui/tip"
+import { Kbd, KbdGroup } from "@/components/ui/kbd"
+import { cn } from "@/lib/utils"
+import {
+  QUESTION_BANK_FOLDER_COLOR_STYLES,
+  QUESTION_BANK_FOLDER_ICON_OPTIONS,
+  type QuestionBankFolderColorKey,
+} from "@/lib/mock/question-bank-folders"
+import { OsFolderGlyph } from "@/components/data-views/os-folder-glyph"
+
+const COLOR_OPTIONS: QuestionBankFolderColorKey[] = [
+  "brand",
+  "success",
+  "warning",
+  "destructive",
+  "muted",
+  "chart1",
+  "chart2",
+  "chart3",
+]
+
+function FolderTilePreview({
+  name,
+  colorKey,
+  icon,
+  className,
+}: {
+  name: string
+  colorKey: QuestionBankFolderColorKey
+  icon: string
+  className?: string
+}) {
+  const display = name.trim() || "Untitled"
+  return (
+    <div
+      className={cn(
+        "flex flex-col items-center gap-4 rounded-2xl border border-border/80 bg-muted/20 p-6 shadow-sm",
+        className,
+      )}
+    >
+      <OsFolderGlyph
+        colorKey={colorKey}
+        icon={icon}
+        size="lg"
+        decorative={false}
+        label={`Folder preview: ${display}`}
+      />
+      <p className="line-clamp-2 min-h-[2.5rem] w-full text-center text-sm font-medium text-foreground">
+        {display}
+      </p>
+    </div>
+  )
+}
+
+export interface QuestionBankNewFolderSheetProps {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  /** Parent folder id for the new folder (`null` = top level). */
+  parentFolderId: string | null
+  /** Replaces default helper copy under the title. */
+  descriptionText?: string
+  /** When provided, the sheet is in "customize" mode with these initial values. */
+  customizingFolder?: {
+    name: string
+    icon: string
+    colorKey: QuestionBankFolderColorKey
+    parentId: string | null
+  } | null
+  onCreated: (folder: {
+    name: string
+    icon: string
+    colorKey: QuestionBankFolderColorKey
+    parentId: string | null
+  }) => void
+}
+
+export function QuestionBankNewFolderSheet({
+  open,
+  onOpenChange,
+  parentFolderId,
+  customizingFolder,
+  descriptionText = "Name, color, and icon update the preview. The folder is created in the location shown in the breadcrumb above the grid.",
+  onCreated,
+}: QuestionBankNewFolderSheetProps) {
+  const [draft, setDraft] = React.useState<{
+    name: string
+    colorKey: QuestionBankFolderColorKey
+    icon: string
+  }>({ name: "Untitled", colorKey: "brand", icon: "fa-folder" })
+
+  React.useEffect(() => {
+    if (open) {
+      if (customizingFolder) {
+        setDraft({ name: customizingFolder.name, colorKey: customizingFolder.colorKey, icon: customizingFolder.icon })
+      } else {
+        setDraft({ name: "Untitled", colorKey: "brand", icon: "fa-folder" })
+      }
+    }
+  }, [open, customizingFolder])
+
+  const createDisabled = !draft.name.trim()
+
+  function commit() {
+    const v = draft.name.trim()
+    if (!v) return
+    onCreated({
+      name: v,
+      icon: draft.icon,
+      colorKey: draft.colorKey,
+      parentId: parentFolderId,
+    })
+    onOpenChange(false)
+  }
+
+  return (
+    <Sheet open={open} onOpenChange={onOpenChange}>
+      <SheetContent
+        data-slot="new-folder-drawer"
+        side="right"
+        showCloseButton={false}
+        showOverlay={false}
+        className="z-[60] flex w-full max-w-md flex-col gap-0 overflow-hidden rounded-xl border border-border p-0 shadow-xl sm:max-w-md"
+        style={{ top: "0.5rem", bottom: "0.5rem", right: "0.5rem", height: "calc(100vh - 1rem)" }}
+      >
+        {open ? (
+          <>
+            <Shortcut keys="Enter" onInvoke={() => !createDisabled && commit()} />
+            <Shortcut keys="Esc" onInvoke={() => onOpenChange(false)} />
+
+            <div className="flex items-center justify-between gap-3 px-4 pt-5 pb-6">
+              <SheetTitle className="text-base font-semibold leading-tight">
+                {customizingFolder ? "Customize Folder" : "New folder"}
+              </SheetTitle>
+              <Tip label="Close" side="bottom">
+                <Button
+                  type="button"
+                  variant="ghost"
+                  size="icon-sm"
+                  aria-label="Close"
+                  onClick={() => onOpenChange(false)}
+                >
+                  <i className="fa-light fa-xmark text-[13px]" aria-hidden="true" />
+                </Button>
+              </Tip>
+            </div>
+
+            <div className="flex min-h-0 flex-1 flex-col gap-6 overflow-y-auto px-4 pb-4 pt-2">
+              <div className="flex flex-col items-center gap-4">
+                <FolderTilePreview
+                  name={draft.name}
+                  colorKey={draft.colorKey}
+                  icon={draft.icon}
+                  className="w-full max-w-[280px]"
+                />
+                <div className="w-full max-w-[280px] space-y-2">
+                  <Label htmlFor="new-folder-name-shared">Folder name</Label>
+                  <Input
+                    id="new-folder-name-shared"
+                    value={draft.name}
+                    onChange={e => setDraft(d => ({ ...d, name: e.target.value }))}
+                    autoComplete="off"
+                    aria-describedby="new-folder-panel-desc new-folder-name-hint-shared"
+                    aria-invalid={createDisabled}
+                  />
+                  <p id="new-folder-name-hint-shared" className="text-sm text-muted-foreground">
+                    Shown under the folder icon in the grid or column.
+                  </p>
+                </div>
+              </div>
+
+              <div>
+                <p className="mb-2 text-xs font-medium text-muted-foreground">Color</p>
+                <div className="flex flex-wrap gap-2">
+                  {COLOR_OPTIONS.map(c => (
+                    <button
+                      key={c}
+                      type="button"
+                      aria-label={`Color ${c}`}
+                      aria-pressed={draft.colorKey === c}
+                      className={cn(
+                        "size-10 rounded-xl border-2 transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                        QUESTION_BANK_FOLDER_COLOR_STYLES[c].tile,
+                        draft.colorKey === c
+                          ? "ring-2 ring-ring"
+                          : "border-transparent opacity-85 hover:opacity-100",
+                      )}
+                      onClick={() => setDraft(d => ({ ...d, colorKey: c }))}
+                    />
+                  ))}
+                </div>
+              </div>
+
+              <div>
+                <p className="mb-2 text-xs font-medium text-muted-foreground">Icon</p>
+                <div className="grid max-h-48 grid-cols-5 gap-2 overflow-y-auto rounded-xl border border-border p-3">
+                  {QUESTION_BANK_FOLDER_ICON_OPTIONS.map(ic => (
+                    <button
+                      key={ic}
+                      type="button"
+                      aria-label={`Icon ${ic.replace(/^fa-/, "").replace(/-/g, " ")}`}
+                      aria-pressed={draft.icon === ic}
+                      className={cn(
+                        "flex size-10 items-center justify-center rounded-lg border text-sm transition-colors",
+                        draft.icon === ic
+                          ? "border-brand bg-brand/10 text-brand"
+                          : "border-transparent hover:bg-muted",
+                      )}
+                      onClick={() => setDraft(d => ({ ...d, icon: ic }))}
+                    >
+                      <i className={cn("fa-light", ic)} aria-hidden="true" />
+                    </button>
+                  ))}
+                </div>
+              </div>
+            </div>
+
+            <div className="mt-auto flex flex-row flex-wrap justify-end gap-2 border-t border-border px-4 py-4">
+              <Button type="button" variant="outline" onClick={() => onOpenChange(false)}>
+                Cancel
+                <KbdGroup className="ms-1.5">
+                  <Kbd variant="bare">Esc</Kbd>
+                </KbdGroup>
+              </Button>
+              <Button type="button" disabled={createDisabled} onClick={commit}>
+                {customizingFolder ? "Update folder" : "Create folder"}
+                <KbdGroup className="ms-1.5">
+                  <Kbd variant="bare">⏎</Kbd>
+                </KbdGroup>
+              </Button>
+            </div>
+          </>
+        ) : null}
+      </SheetContent>
+    </Sheet>
+  )
+}