real-prototypes-skill 0.1.0

package/.claude/skills/real-prototypes-skill/templates/modal-dialog.tsx.template

@@ -0,0 +1,239 @@
+import React from "react";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+  DialogClose,
+} from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { X } from "lucide-react";
+
+interface ModalDialogProps {
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  trigger?: React.ReactNode;
+  title?: string;
+  description?: string;
+  children?: React.ReactNode;
+  footer?: React.ReactNode;
+  showCloseButton?: boolean;
+  size?: "sm" | "md" | "lg" | "xl" | "full";
+  className?: string;
+}
+
+const sizeClasses = {
+  sm: "max-w-sm",
+  md: "max-w-md",
+  lg: "max-w-lg",
+  xl: "max-w-xl",
+  full: "max-w-4xl",
+};
+
+export function ModalDialog({
+  open,
+  onOpenChange,
+  trigger,
+  title = "{/* FEATURE_TITLE */}",
+  description,
+  children,
+  footer,
+  showCloseButton = true,
+  size = "md",
+  className = "",
+}: ModalDialogProps) {
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      {trigger && <DialogTrigger asChild>{trigger}</DialogTrigger>}
+
+      <DialogContent
+        className={`
+          bg-platform-background
+          border-platform-secondary/20
+          text-platform-foreground
+          ${sizeClasses[size]}
+          ${className}
+        `}
+        onOpenAutoFocus={(e) => {
+          // Prevent auto-focus on first focusable element if needed
+          // e.preventDefault();
+        }}
+        onEscapeKeyDown={(e) => {
+          // Handle escape key if needed
+          // e.preventDefault();
+        }}
+      >
+        {showCloseButton && (
+          <DialogClose
+            className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-platform-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-platform-primary focus:ring-offset-2 disabled:pointer-events-none"
+            aria-label="Close dialog"
+          >
+            <X className="h-4 w-4 text-platform-foreground" />
+          </DialogClose>
+        )}
+
+        <DialogHeader>
+          <DialogTitle className="text-lg font-semibold text-platform-foreground">
+            {title}
+          </DialogTitle>
+          {description && (
+            <DialogDescription className="text-platform-foreground/60">
+              {description}
+            </DialogDescription>
+          )}
+        </DialogHeader>
+
+        <div className="py-4">
+          {/* FEATURE_CONTENT */}
+          {children}
+        </div>
+
+        {footer !== undefined ? (
+          footer
+        ) : (
+          <DialogFooter className="gap-2 sm:gap-0">
+            <DialogClose asChild>
+              <Button
+                type="button"
+                variant="outline"
+                className="border-platform-secondary text-platform-foreground hover:bg-platform-secondary/10"
+              >
+                Cancel
+              </Button>
+            </DialogClose>
+            <Button
+              type="button"
+              className="bg-platform-primary text-white hover:bg-platform-primary/90"
+              onClick={() => {
+                // Handle primary action
+                onOpenChange?.(false);
+              }}
+            >
+              Confirm
+            </Button>
+          </DialogFooter>
+        )}
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+// Confirmation dialog variant
+interface ConfirmDialogProps {
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  title?: string;
+  description?: string;
+  confirmText?: string;
+  cancelText?: string;
+  onConfirm?: () => void;
+  onCancel?: () => void;
+  variant?: "default" | "destructive";
+  isLoading?: boolean;
+}
+
+export function ConfirmDialog({
+  open,
+  onOpenChange,
+  title = "Are you sure?",
+  description = "This action cannot be undone.",
+  confirmText = "Confirm",
+  cancelText = "Cancel",
+  onConfirm,
+  onCancel,
+  variant = "default",
+  isLoading = false,
+}: ConfirmDialogProps) {
+  const handleConfirm = () => {
+    onConfirm?.();
+    if (!isLoading) {
+      onOpenChange?.(false);
+    }
+  };
+
+  const handleCancel = () => {
+    onCancel?.();
+    onOpenChange?.(false);
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent
+        className="bg-platform-background border-platform-secondary/20 text-platform-foreground max-w-md"
+        aria-describedby="confirm-dialog-description"
+      >
+        <DialogHeader>
+          <DialogTitle className="text-lg font-semibold text-platform-foreground">
+            {title}
+          </DialogTitle>
+          <DialogDescription
+            id="confirm-dialog-description"
+            className="text-platform-foreground/60"
+          >
+            {description}
+          </DialogDescription>
+        </DialogHeader>
+
+        <DialogFooter className="gap-2 sm:gap-0 mt-4">
+          <Button
+            type="button"
+            variant="outline"
+            onClick={handleCancel}
+            disabled={isLoading}
+            className="border-platform-secondary text-platform-foreground hover:bg-platform-secondary/10"
+          >
+            {cancelText}
+          </Button>
+          <Button
+            type="button"
+            onClick={handleConfirm}
+            disabled={isLoading}
+            className={
+              variant === "destructive"
+                ? "bg-red-600 text-white hover:bg-red-700"
+                : "bg-platform-primary text-white hover:bg-platform-primary/90"
+            }
+          >
+            {isLoading ? "Loading..." : confirmText}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+// Example usage:
+// Basic modal:
+// <ModalDialog
+//   trigger={<Button>Open Modal</Button>}
+//   title="Edit Profile"
+//   description="Make changes to your profile here."
+// >
+//   <div className="space-y-4">
+//     <p>Modal content goes here</p>
+//   </div>
+// </ModalDialog>
+
+// Controlled modal:
+// const [open, setOpen] = useState(false);
+// <ModalDialog
+//   open={open}
+//   onOpenChange={setOpen}
+//   title="Settings"
+// >
+//   <p>Content here</p>
+// </ModalDialog>
+
+// Confirmation dialog:
+// <ConfirmDialog
+//   open={showConfirm}
+//   onOpenChange={setShowConfirm}
+//   title="Delete Item"
+//   description="Are you sure you want to delete this item? This action cannot be undone."
+//   confirmText="Delete"
+//   variant="destructive"
+//   onConfirm={() => handleDelete()}
+// />

package/.claude/skills/real-prototypes-skill/templates/nav-item.tsx.template

@@ -0,0 +1,265 @@
+import React from "react";
+import Link from "next/link";
+import { Button } from "@/components/ui/button";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/components/ui/collapsible";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { ChevronDown, ChevronRight } from "lucide-react";
+
+interface NavItemProps {
+  href?: string;
+  label: string;
+  icon?: React.ReactNode;
+  isActive?: boolean;
+  isCollapsed?: boolean;
+  badge?: string | number;
+  onClick?: () => void;
+  className?: string;
+}
+
+export function NavItem({
+  href,
+  label = "{/* FEATURE_TITLE */}",
+  icon,
+  isActive = false,
+  isCollapsed = false,
+  badge,
+  onClick,
+  className = "",
+}: NavItemProps) {
+  const baseClasses = `
+    w-full flex items-center gap-3 px-3 py-2 rounded-md
+    text-sm font-medium transition-colors
+    focus:outline-none focus-visible:ring-2 focus-visible:ring-platform-primary focus-visible:ring-offset-2
+    ${
+      isActive
+        ? "bg-platform-primary/10 text-platform-primary"
+        : "text-platform-foreground/70 hover:text-platform-foreground hover:bg-platform-secondary/10"
+    }
+    ${className}
+  `;
+
+  const content = (
+    <>
+      {icon && (
+        <span className="flex-shrink-0 w-5 h-5" aria-hidden="true">
+          {icon}
+        </span>
+      )}
+      {!isCollapsed && (
+        <>
+          <span className="flex-1 truncate">{label}</span>
+          {badge !== undefined && (
+            <span
+              className="flex-shrink-0 px-2 py-0.5 text-xs font-medium rounded-full bg-platform-primary/10 text-platform-primary"
+              aria-label={`${badge} items`}
+            >
+              {badge}
+            </span>
+          )}
+        </>
+      )}
+    </>
+  );
+
+  // Wrap in tooltip when collapsed
+  const wrappedContent = isCollapsed ? (
+    <TooltipProvider>
+      <Tooltip delayDuration={0}>
+        <TooltipTrigger asChild>
+          {href ? (
+            <Link
+              href={href}
+              className={baseClasses}
+              aria-current={isActive ? "page" : undefined}
+            >
+              {content}
+            </Link>
+          ) : (
+            <button
+              type="button"
+              className={baseClasses}
+              onClick={onClick}
+              aria-pressed={isActive}
+            >
+              {content}
+            </button>
+          )}
+        </TooltipTrigger>
+        <TooltipContent
+          side="right"
+          className="bg-platform-foreground text-platform-background"
+        >
+          <p>{label}</p>
+        </TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+  ) : href ? (
+    <Link
+      href={href}
+      className={baseClasses}
+      aria-current={isActive ? "page" : undefined}
+    >
+      {content}
+    </Link>
+  ) : (
+    <button
+      type="button"
+      className={baseClasses}
+      onClick={onClick}
+      aria-pressed={isActive}
+    >
+      {content}
+    </button>
+  );
+
+  return wrappedContent;
+}
+
+// Nested navigation group
+interface NavGroupProps {
+  label: string;
+  icon?: React.ReactNode;
+  children: React.ReactNode;
+  defaultOpen?: boolean;
+  isCollapsed?: boolean;
+  className?: string;
+}
+
+export function NavGroup({
+  label = "{/* FEATURE_TITLE */}",
+  icon,
+  children,
+  defaultOpen = false,
+  isCollapsed = false,
+  className = "",
+}: NavGroupProps) {
+  const [isOpen, setIsOpen] = React.useState(defaultOpen);
+
+  if (isCollapsed) {
+    return (
+      <TooltipProvider>
+        <Tooltip delayDuration={0}>
+          <TooltipTrigger asChild>
+            <button
+              type="button"
+              className={`
+                w-full flex items-center justify-center p-2 rounded-md
+                text-platform-foreground/70 hover:text-platform-foreground hover:bg-platform-secondary/10
+                transition-colors
+                ${className}
+              `}
+              onClick={() => setIsOpen(!isOpen)}
+              aria-expanded={isOpen}
+            >
+              {icon && (
+                <span className="w-5 h-5" aria-hidden="true">
+                  {icon}
+                </span>
+              )}
+            </button>
+          </TooltipTrigger>
+          <TooltipContent
+            side="right"
+            className="bg-platform-foreground text-platform-background"
+          >
+            <p>{label}</p>
+          </TooltipContent>
+        </Tooltip>
+      </TooltipProvider>
+    );
+  }
+
+  return (
+    <Collapsible open={isOpen} onOpenChange={setIsOpen} className={className}>
+      <CollapsibleTrigger asChild>
+        <button
+          type="button"
+          className={`
+            w-full flex items-center gap-3 px-3 py-2 rounded-md
+            text-sm font-medium text-platform-foreground/70
+            hover:text-platform-foreground hover:bg-platform-secondary/10
+            transition-colors
+            focus:outline-none focus-visible:ring-2 focus-visible:ring-platform-primary focus-visible:ring-offset-2
+          `}
+          aria-expanded={isOpen}
+        >
+          {icon && (
+            <span className="flex-shrink-0 w-5 h-5" aria-hidden="true">
+              {icon}
+            </span>
+          )}
+          <span className="flex-1 text-left truncate">{label}</span>
+          {isOpen ? (
+            <ChevronDown className="flex-shrink-0 w-4 h-4" aria-hidden="true" />
+          ) : (
+            <ChevronRight className="flex-shrink-0 w-4 h-4" aria-hidden="true" />
+          )}
+        </button>
+      </CollapsibleTrigger>
+      <CollapsibleContent className="pl-4 mt-1 space-y-1">
+        {/* FEATURE_CONTENT */}
+        {children}
+      </CollapsibleContent>
+    </Collapsible>
+  );
+}
+
+// Navigation section with label
+interface NavSectionProps {
+  label?: string;
+  children: React.ReactNode;
+  isCollapsed?: boolean;
+  className?: string;
+}
+
+export function NavSection({
+  label,
+  children,
+  isCollapsed = false,
+  className = "",
+}: NavSectionProps) {
+  return (
+    <nav className={`space-y-1 ${className}`} aria-label={label}>
+      {label && !isCollapsed && (
+        <h3 className="px-3 py-2 text-xs font-semibold uppercase tracking-wider text-platform-foreground/50">
+          {label}
+        </h3>
+      )}
+      {isCollapsed && label && (
+        <div className="h-px mx-3 my-2 bg-platform-secondary/20" aria-hidden="true" />
+      )}
+      {children}
+    </nav>
+  );
+}
+
+// Example usage:
+// Basic navigation:
+// <NavSection label="Main">
+//   <NavItem href="/" label="Dashboard" icon={<HomeIcon />} isActive />
+//   <NavItem href="/analytics" label="Analytics" icon={<ChartIcon />} badge={3} />
+//   <NavItem href="/settings" label="Settings" icon={<SettingsIcon />} />
+// </NavSection>
+
+// Nested navigation:
+// <NavSection label="Content">
+//   <NavGroup label="Products" icon={<BoxIcon />} defaultOpen>
+//     <NavItem href="/products" label="All Products" />
+//     <NavItem href="/products/new" label="Add New" />
+//     <NavItem href="/products/categories" label="Categories" />
+//   </NavGroup>
+// </NavSection>
+
+// Collapsed sidebar:
+// <NavSection isCollapsed={isSidebarCollapsed}>
+//   <NavItem href="/" label="Dashboard" icon={<HomeIcon />} isCollapsed={isSidebarCollapsed} />
+// </NavSection>