@redbamboo/ui 0.1.1 → 0.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redbamboo/ui",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "description": "RedBamboo design system — tokens, Tailwind theme, and components",
   "type": "module",
   "license": "MIT",

package/src/components/about-dialog.tsx

@@ -0,0 +1,120 @@
+import { cn } from "../utils"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "./dialog"
+import { Badge } from "./badge"
+import { Separator } from "./separator"
+
+export interface AboutApp {
+  name: string
+  version: string
+  description?: string
+  icon?: string
+}
+
+export interface AboutDialogProps {
+  app: AboutApp
+  appGitHub?: string
+  companyGitHub?: string
+  latestVersion?: string
+  open: boolean
+  onOpenChange: (open: boolean) => void
+}
+
+function fmtVersion(v: string) {
+  return v.startsWith("v") ? v : `v${v}`
+}
+
+function AboutDialog({
+  app,
+  appGitHub,
+  companyGitHub,
+  latestVersion,
+  open,
+  onOpenChange,
+}: AboutDialogProps) {
+  const hasUpdate = latestVersion && latestVersion !== app.version
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent data-slot="about-dialog">
+        <DialogHeader>
+          <div className="flex items-center gap-3">
+            {app.icon && (
+              <div className="flex size-10 items-center justify-center rounded-lg bg-primary/10">
+                <i className={cn(app.icon, "text-lg text-primary")} />
+              </div>
+            )}
+            <div>
+              <DialogTitle>{app.name}</DialogTitle>
+              <Badge variant="secondary" className="mt-1.5 text-[0.7rem]">
+                {fmtVersion(app.version)}
+              </Badge>
+            </div>
+          </div>
+          {app.description && (
+            <DialogDescription>{app.description}</DialogDescription>
+          )}
+        </DialogHeader>
+
+        {hasUpdate && (
+          <div className="flex items-center gap-2 rounded-lg border border-accent-teal/30 bg-accent-teal/5 px-3 py-2 text-sm text-accent-teal">
+            <i className="fa-solid fa-circle-up text-xs" />
+            <span>
+              Version <strong>{fmtVersion(latestVersion)}</strong> available
+            </span>
+          </div>
+        )}
+
+        <Separator />
+
+        <div className="space-y-3">
+          <div>
+            <p className="text-sm font-medium">RedBamboo Interactive</p>
+            <p className="text-xs text-muted-foreground">
+              Open-source tools for creators and developers
+            </p>
+          </div>
+
+          {(appGitHub || companyGitHub) && (
+            <div className="flex flex-col gap-1.5">
+              {appGitHub && (
+                <a
+                  href={appGitHub}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="inline-flex items-center gap-2 text-sm text-muted-foreground transition-colors hover:text-foreground"
+                >
+                  <i className="fa-brands fa-github" />
+                  {app.name}
+                </a>
+              )}
+              {companyGitHub && (
+                <a
+                  href={companyGitHub}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="inline-flex items-center gap-2 text-sm text-muted-foreground transition-colors hover:text-foreground"
+                >
+                  <i className="fa-brands fa-github" />
+                  RedBamboo Interactive
+                </a>
+              )}
+            </div>
+          )}
+        </div>
+
+        <DialogFooter showCloseButton>
+          <p className="mr-auto text-xs text-muted-foreground">MIT License</p>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+export { AboutDialog }

package/src/components/feedback-dialog.tsx

@@ -0,0 +1,310 @@
+import * as React from "react"
+import { cn } from "../utils"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "./dialog"
+import { Button } from "./button"
+import { Label } from "./label"
+import { Separator } from "./separator"
+import {
+  Collapsible,
+  CollapsibleTrigger,
+  CollapsibleContent,
+} from "./collapsible"
+
+// ── Types ──────────────────────────────────────────────────────────────
+
+export type FeedbackCategory = "bug" | "feature" | "suggestion"
+
+export interface SystemInfo {
+  appName: string
+  appVersion: string
+  browser: string
+  os: string
+  screenResolution: string
+  currentUrl: string
+  timestamp: string
+  colorScheme: "light" | "dark" | "unknown"
+}
+
+export interface FeedbackSubmission {
+  category: FeedbackCategory
+  description: string
+  systemInfo: SystemInfo
+  customMetadata?: Record<string, string>
+}
+
+export interface FeedbackResult {
+  issueUrl: string
+  title: string
+}
+
+export interface FeedbackDialogProps {
+  app: { name: string; version: string }
+  customMetadata?: Record<string, string>
+  onSubmit: (submission: FeedbackSubmission) => void
+  open: boolean
+  onOpenChange: (open: boolean) => void
+}
+
+export interface FeedbackButtonProps {
+  onClick: () => void
+  className?: string
+  variant?: "menu-item" | "button"
+}
+
+// ── Utilities ──────────────────────────────────────────────────────────
+
+function parseBrowser(ua: string): string {
+  if (ua.includes("Firefox/")) {
+    const match = ua.match(/Firefox\/([\d.]+)/)
+    return `Firefox ${match?.[1] ?? ""}`
+  }
+  if (ua.includes("Edg/")) {
+    const match = ua.match(/Edg\/([\d.]+)/)
+    return `Edge ${match?.[1] ?? ""}`
+  }
+  if (ua.includes("Chrome/")) {
+    const match = ua.match(/Chrome\/([\d.]+)/)
+    return `Chrome ${match?.[1] ?? ""}`
+  }
+  if (ua.includes("Safari/") && !ua.includes("Chrome")) {
+    const match = ua.match(/Version\/([\d.]+)/)
+    return `Safari ${match?.[1] ?? ""}`
+  }
+  return ua.slice(0, 50)
+}
+
+function parseOS(ua: string): string {
+  if (ua.includes("Windows NT 10.0")) return "Windows 10/11"
+  if (ua.includes("Windows NT")) return "Windows"
+  if (ua.includes("Mac OS X")) {
+    const match = ua.match(/Mac OS X ([\d_]+)/)
+    return `macOS ${match?.[1]?.replace(/_/g, ".") ?? ""}`
+  }
+  if (ua.includes("Linux")) return "Linux"
+  if (ua.includes("Android")) return "Android"
+  if (ua.includes("iOS") || ua.includes("iPhone")) return "iOS"
+  return "Unknown"
+}
+
+export function collectSystemInfo(app: { name: string; version: string }): SystemInfo {
+  const ua = typeof navigator !== "undefined" ? navigator.userAgent : "unknown"
+
+  return {
+    appName: app.name,
+    appVersion: app.version,
+    browser: parseBrowser(ua),
+    os: parseOS(ua),
+    screenResolution:
+      typeof screen !== "undefined"
+        ? `${screen.width}x${screen.height}`
+        : "unknown",
+    currentUrl: typeof location !== "undefined" ? location.href : "unknown",
+    timestamp: new Date().toISOString(),
+    colorScheme:
+      typeof document !== "undefined"
+        ? document.documentElement.classList.contains("dark")
+          ? "dark"
+          : "light"
+        : "unknown",
+  }
+}
+
+// ── Components ─────────────────────────────────────────────────────────
+
+const categories: { value: FeedbackCategory; label: string; icon: string }[] = [
+  { value: "bug", label: "Bug", icon: "fa-solid fa-bug" },
+  { value: "feature", label: "Feature", icon: "fa-solid fa-lightbulb" },
+  { value: "suggestion", label: "Suggestion", icon: "fa-solid fa-comment" },
+]
+
+function FeedbackButton({ onClick, className, variant = "button" }: FeedbackButtonProps) {
+  if (variant === "menu-item") {
+    return (
+      <button
+        type="button"
+        data-slot="feedback-button"
+        onClick={onClick}
+        className={cn(
+          "relative flex w-full cursor-pointer select-none items-center gap-2 rounded-md px-2 py-1.5 text-sm outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground",
+          className
+        )}
+      >
+        <i className="fa-solid fa-message size-4 text-center" />
+        Send Feedback
+      </button>
+    )
+  }
+
+  return (
+    <Button
+      variant="ghost"
+      size="sm"
+      data-slot="feedback-button"
+      onClick={onClick}
+      className={className}
+    >
+      <i className="fa-solid fa-message" />
+      Send Feedback
+    </Button>
+  )
+}
+
+function FeedbackDialog({
+  app,
+  customMetadata,
+  onSubmit,
+  open,
+  onOpenChange,
+}: FeedbackDialogProps) {
+  const [category, setCategory] = React.useState<FeedbackCategory>("bug")
+  const [description, setDescription] = React.useState("")
+  const [infoOpen, setInfoOpen] = React.useState(false)
+
+  const systemInfo = React.useMemo(() => collectSystemInfo(app), [app, open])
+
+  React.useEffect(() => {
+    if (open) {
+      setCategory("bug")
+      setDescription("")
+      setInfoOpen(false)
+    }
+  }, [open])
+
+  const canSubmit = description.trim().length > 0
+
+  function handleSubmit(e: React.FormEvent) {
+    e.preventDefault()
+    if (!canSubmit) return
+
+    onSubmit({
+      category,
+      description: description.trim(),
+      systemInfo,
+      customMetadata,
+    })
+
+    onOpenChange(false)
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent data-slot="feedback-dialog" className="sm:max-w-md">
+        <DialogHeader>
+          <div className="flex items-center gap-3">
+            <div className="flex size-10 items-center justify-center rounded-lg bg-primary/10">
+              <i className="fa-solid fa-message text-lg text-primary" />
+            </div>
+            <div>
+              <DialogTitle>Send Feedback</DialogTitle>
+              <DialogDescription>
+                Help us improve {app.name}
+              </DialogDescription>
+            </div>
+          </div>
+        </DialogHeader>
+
+        <form onSubmit={handleSubmit} data-slot="feedback-form" className="space-y-4">
+          <div className="space-y-2">
+            <Label>Category</Label>
+            <div data-slot="feedback-category" className="flex gap-2">
+              {categories.map((cat) => (
+                <button
+                  key={cat.value}
+                  type="button"
+                  onClick={() => setCategory(cat.value)}
+                  className={cn(
+                    "flex flex-1 items-center justify-center gap-2 rounded-lg border px-3 py-2 text-xs font-medium transition-colors",
+                    category === cat.value
+                      ? "border-primary bg-primary/10 text-primary"
+                      : "border-border text-muted-foreground hover:border-primary/50 hover:text-foreground"
+                  )}
+                >
+                  <i className={cn(cat.icon, "text-[10px]")} />
+                  {cat.label}
+                </button>
+              ))}
+            </div>
+          </div>
+
+          <div className="space-y-2">
+            <Label htmlFor="feedback-description">What's on your mind?</Label>
+            <textarea
+              id="feedback-description"
+              data-slot="feedback-description"
+              className="w-full min-h-[120px] rounded-lg border border-input bg-transparent px-2.5 py-2 text-sm transition-colors outline-none resize-y placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 dark:bg-input/30"
+              placeholder={
+                category === "bug"
+                  ? "Describe the issue you encountered..."
+                  : category === "feature"
+                    ? "Describe the feature you'd like to see..."
+                    : "Share your suggestion..."
+              }
+              value={description}
+              onChange={(e) => setDescription(e.target.value)}
+              required
+            />
+          </div>
+
+          <Separator />
+
+          <Collapsible open={infoOpen} onOpenChange={setInfoOpen}>
+            <CollapsibleTrigger className="flex w-full cursor-pointer items-center gap-2 text-xs text-muted-foreground transition-colors hover:text-foreground">
+              <i className={cn("fa-solid fa-chevron-right text-[10px] transition-transform", infoOpen && "rotate-90")} />
+              System info included with submission
+            </CollapsibleTrigger>
+            <CollapsibleContent>
+              <div
+                data-slot="feedback-system-info"
+                className="mt-2 grid grid-cols-[auto_1fr] gap-x-4 gap-y-1 rounded-lg border border-border/50 bg-muted/30 px-3 py-2 text-xs text-muted-foreground"
+              >
+                <span className="font-medium">App</span>
+                <span>{systemInfo.appName} v{systemInfo.appVersion}</span>
+                <span className="font-medium">Browser</span>
+                <span>{systemInfo.browser}</span>
+                <span className="font-medium">OS</span>
+                <span>{systemInfo.os}</span>
+                <span className="font-medium">Screen</span>
+                <span>{systemInfo.screenResolution}</span>
+                <span className="font-medium">Theme</span>
+                <span>{systemInfo.colorScheme}</span>
+                {customMetadata && Object.entries(customMetadata).map(([key, value]) => (
+                  <React.Fragment key={key}>
+                    <span className="font-medium">{key}</span>
+                    <span>{value}</span>
+                  </React.Fragment>
+                ))}
+              </div>
+            </CollapsibleContent>
+          </Collapsible>
+
+          <DialogFooter>
+            <Button
+              type="button"
+              variant="outline"
+              onClick={() => onOpenChange(false)}
+            >
+              Cancel
+            </Button>
+            <Button
+              type="submit"
+              data-slot="feedback-submit"
+              disabled={!canSubmit}
+            >
+              <i className="fa-solid fa-paper-plane" />
+              Send
+            </Button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+export { FeedbackDialog, FeedbackButton }

package/src/components/toast.tsx

@@ -0,0 +1,159 @@
+import * as React from "react"
+import { cn } from "../utils"
+
+// ── Types ──────────────────────────────────────────────────────────────
+
+export type ToastVariant = "default" | "success" | "error" | "loading"
+
+export interface Toast {
+  id: string
+  title: string
+  description?: string
+  variant: ToastVariant
+  duration?: number
+  action?: { label: string; onClick: () => void }
+}
+
+export interface ToastUpdate {
+  title?: string
+  description?: string
+  variant?: ToastVariant
+  duration?: number
+  action?: { label: string; onClick: () => void }
+}
+
+interface ToastContextValue {
+  toast: (toast: Omit<Toast, "id">) => string
+  update: (id: string, update: ToastUpdate) => void
+  dismiss: (id: string) => void
+}
+
+// ── Context ────────────────────────────────────────────────────────────
+
+const ToastContext = React.createContext<ToastContextValue | null>(null)
+
+export function useToast(): ToastContextValue {
+  const ctx = React.useContext(ToastContext)
+  if (!ctx) throw new Error("useToast must be used within a ToastProvider")
+  return ctx
+}
+
+// ── Provider & Renderer ────────────────────────────────────────────────
+
+let idCounter = 0
+
+export function ToastProvider({ children }: { children: React.ReactNode }) {
+  const [toasts, setToasts] = React.useState<Toast[]>([])
+  const timers = React.useRef<Map<string, ReturnType<typeof setTimeout>>>(new Map())
+
+  function scheduleRemoval(id: string, duration: number) {
+    const existing = timers.current.get(id)
+    if (existing) clearTimeout(existing)
+    const timer = setTimeout(() => {
+      setToasts((prev) => prev.filter((t) => t.id !== id))
+      timers.current.delete(id)
+    }, duration)
+    timers.current.set(id, timer)
+  }
+
+  const toast = React.useCallback((t: Omit<Toast, "id">) => {
+    const id = `toast-${++idCounter}`
+    const newToast: Toast = { ...t, id }
+    setToasts((prev) => [...prev, newToast])
+    if (t.variant !== "loading") {
+      scheduleRemoval(id, t.duration ?? 5000)
+    }
+    return id
+  }, [])
+
+  const update = React.useCallback((id: string, u: ToastUpdate) => {
+    setToasts((prev) =>
+      prev.map((t) => (t.id === id ? { ...t, ...u } : t))
+    )
+    if (u.variant && u.variant !== "loading") {
+      scheduleRemoval(id, u.duration ?? 5000)
+    }
+  }, [])
+
+  const dismiss = React.useCallback((id: string) => {
+    setToasts((prev) => prev.filter((t) => t.id !== id))
+    const timer = timers.current.get(id)
+    if (timer) {
+      clearTimeout(timer)
+      timers.current.delete(id)
+    }
+  }, [])
+
+  React.useEffect(() => {
+    return () => {
+      timers.current.forEach((timer) => clearTimeout(timer))
+    }
+  }, [])
+
+  const value = React.useMemo(() => ({ toast, update, dismiss }), [toast, update, dismiss])
+
+  return (
+    <ToastContext.Provider value={value}>
+      {children}
+      <Toaster toasts={toasts} onDismiss={dismiss} />
+    </ToastContext.Provider>
+  )
+}
+
+// ── Toaster (renders toasts) ───────────────────────────────────────────
+
+const variantIcon: Record<ToastVariant, string> = {
+  default: "fa-solid fa-circle-info",
+  success: "fa-solid fa-check",
+  error: "fa-solid fa-triangle-exclamation",
+  loading: "fa-solid fa-spinner fa-spin",
+}
+
+const variantColor: Record<ToastVariant, string> = {
+  default: "text-primary",
+  success: "text-green-500",
+  error: "text-destructive",
+  loading: "text-primary",
+}
+
+function Toaster({ toasts, onDismiss }: { toasts: Toast[]; onDismiss: (id: string) => void }) {
+  if (toasts.length === 0) return null
+
+  return (
+    <div
+      data-slot="toaster"
+      className="fixed bottom-4 right-4 z-[100] flex flex-col gap-2 max-w-sm"
+    >
+      {toasts.map((t) => (
+        <div
+          key={t.id}
+          data-slot="toast"
+          data-variant={t.variant}
+          className="flex items-start gap-3 rounded-lg border border-border bg-popover px-4 py-3 shadow-lg shadow-black/20 animate-in slide-in-from-right-full fade-in duration-200"
+        >
+          <i className={cn(variantIcon[t.variant], variantColor[t.variant], "mt-0.5 text-sm")} />
+          <div className="flex-1 min-w-0">
+            <p className="text-sm font-medium text-foreground">{t.title}</p>
+            {t.description && (
+              <p className="mt-0.5 text-xs text-muted-foreground">{t.description}</p>
+            )}
+            {t.action && (
+              <button
+                onClick={t.action.onClick}
+                className="mt-1.5 text-xs font-medium text-primary hover:underline"
+              >
+                {t.action.label}
+              </button>
+            )}
+          </div>
+          <button
+            onClick={() => onDismiss(t.id)}
+            className="text-muted-foreground hover:text-foreground transition-colors text-xs p-0.5"
+          >
+            <i className="fa-solid fa-xmark" />
+          </button>
+        </div>
+      ))}
+    </div>
+  )
+}

package/src/index.ts

@@ -130,6 +130,13 @@ export {
 
 export { JsonHighlight } from "./components/json-highlight"
 
+export { AboutDialog } from "./components/about-dialog"
+
+export type {
+  AboutApp,
+  AboutDialogProps,
+} from "./components/about-dialog"
+
 export {
   AppHeader,
   AppHeaderBrand,
@@ -139,3 +146,29 @@ export type {
   AppHeaderProps,
   AppHeaderBrandProps,
 } from "./components/app-header"
+
+export {
+  ToastProvider,
+  useToast,
+} from "./components/toast"
+
+export type {
+  Toast,
+  ToastUpdate,
+  ToastVariant,
+} from "./components/toast"
+
+export {
+  FeedbackDialog,
+  FeedbackButton,
+  collectSystemInfo,
+} from "./components/feedback-dialog"
+
+export type {
+  FeedbackCategory,
+  FeedbackSubmission,
+  FeedbackResult,
+  SystemInfo,
+  FeedbackDialogProps,
+  FeedbackButtonProps,
+} from "./components/feedback-dialog"