Component Lab

"use client";

import { Maximize2Icon, Minimize2Icon, X } from "lucide-react";
import { AnimatePresence, motion } from "motion/react";
import * as React from "react";
import { Button } from "@/components/ui/button";
import {
  Dialog,
  DialogBackdrop,
  DialogClose,
  DialogHeader,
  DialogPopup,
  DialogPortal,
  DialogTitle,
  DialogTrigger,
  DialogViewport,
} from "@/components/ui/dialog";
import { ScrollArea } from "@/components/ui/scroll-area";

export function ExpandableDialog() {
  const [open, setOpen] = React.useState(false);
  const [isExpanded, setIsExpanded] = React.useState(false);

  return (
    <Dialog onOpenChange={setOpen} open={open}>
      <DialogTrigger render={<Button variant="glow">Open Dialog</Button>} />
      <AnimatePresence>
        {open && (
          <DialogPortal keepMounted>
            <DialogBackdrop />
            <DialogViewport className="fixed inset-0 flex items-center justify-center p-4 sm:p-6">
              <DialogPopup
                render={
                  <motion.div
                    animate={{
                      height: isExpanded ? "75vh" : "50vh",
                      maxWidth: isExpanded ? "56rem" : "40rem",
                      opacity: 1,
                      scale: 1,
                    }}
                    className="relative flex flex-col overflow-hidden rounded-md border bg-background shadow-lg"
                    exit={{ opacity: 0, scale: 0.95 }}
                    initial={{
                      height: "50vh",
                      maxWidth: "40rem",
                      opacity: 0,
                      scale: 0.95,
                    }}
                    layout
                    style={{
                      maxHeight: "90dvh",
                      width: "95vw",
                    }}
                    transition={{
                      bounce: 0,
                      damping: 30,
                      duration: 0.3,
                      stiffness: 300,
                      type: "spring",
                    }}
                  >
                    <DialogHeader className="flex flex-row items-center justify-between border-b p-2 sm:p-4">
                      <DialogTitle>Expandable Dialog</DialogTitle>
                      <div className="flex items-center gap-2">
                        <Button
                          onClick={() => setIsExpanded(!isExpanded)}
                          size="icon-sm"
                          title={isExpanded ? "Collapse" : "Expand"}
                          variant="ghost"
                        >
                          {isExpanded ? (
                            <Minimize2Icon className="size-4" />
                          ) : (
                            <Maximize2Icon className="size-4" />
                          )}
                          <span className="sr-only">Toggle expand</span>
                        </Button>
                        <DialogClose
                          render={
                            <Button size="icon-sm" variant="ghost">
                              <X className="size-4" />
                              <span className="sr-only">Close dialog</span>
                            </Button>
                          }
                          title="Close"
                        />
                      </div>
                    </DialogHeader>
                    <ScrollArea className="pr-1 min-h-0" gradientScrollFade>
                      <div className="space-y-4 p-2 sm:p-4">
                        {Array.from({ length: 30 }).map((_, i) => (
                          <div
                            className="flex items-center gap-4 rounded-md border border-border/50 h-26 bg-card p-3"
                            key={i}
                          >
                            <div className="h-10 w-10 shrink-0 rounded-full bg-muted" />
                            <div className="space-y-4">
                              <div className="h-6 w-24 sm:w-48 bg-muted rounded-md" />
                              <div className="h-6 w-32 sm:w-72 bg-muted rounded-md" />
                            </div>
                          </div>
                        ))}
                      </div>
                    </ScrollArea>
                  </motion.div>
                }
              />
            </DialogViewport>
          </DialogPortal>
        )}
      </AnimatePresence>
    </Dialog>
  );
}

"use client";

import type { DialogRootActions } from "@base-ui/react/dialog";
import { PlusIcon, X } from "lucide-react";
import { AnimatePresence, LayoutGroup, motion } from "motion/react";
import { useRef, useState } from "react";
import { Button } from "@/components/ui/button";
import {
  Dialog,
  DialogBackdrop,
  DialogClose,
  DialogPopup,
  DialogPortal,
  DialogTitle,
  DialogViewport,
} from "@/components/ui/dialog";
import { ScrollArea } from "@/components/ui/scroll-area";

export function MorphingDialog() {
  const [isOpen, setIsOpen] = useState(false);
  const [activeItem, setActiveItem] = useState<(typeof ITEMS)[0] | null>(null);

  const actionsRef = useRef<DialogRootActions>({
    close: () => {},
    unmount: () => {},
  });

  const handleOpen = (item: (typeof ITEMS)[0]) => {
    setActiveItem(item);
    setIsOpen(true);
  };

  const handleClose = (open: boolean) => {
    setIsOpen(open);
  };

  return (
    <div>
      <LayoutGroup>
        <ScrollArea
          className="w-screen whitespace-nowrap container"
          noScrollBar
        >
          <div className="flex gap-2 md:gap-6 lg:gap-10 mx-auto">
            {ITEMS.map((item) => (
              <motion.button
                className="relative group flex flex-col cursor-pointer bg-muted hover:bg-muted/80 transition-colors flex-1 size-64 lg:size-80 rounded focus-visible:outline focus-visible:outline-ring focus-visible:ring-4 focus-visible:ring-ring/10"
                key={item.id}
                layoutId={`card-container-${item.id}`}
                onClick={() => handleOpen(item)}
                style={{
                  opacity: activeItem?.id === item.id && isOpen ? 0 : 1,
                  pointerEvents:
                    activeItem?.id === item.id && isOpen ? "none" : "auto",
                }}
              >
                <div className="relative h-48 w-full overflow-hidden rounded rounded-b-none">
                  <motion.div
                    className="w-full h-full"
                    layoutId={`image-container-${item.id}`}
                  >
                    <img
                      alt={item.title}
                      className="h-full w-full object-cover dark:brightness-20 dark:grayscale-25"
                      height={500}
                      src={item.image}
                      width={500}
                    />
                  </motion.div>
                </div>
                <div className="flex flex-1 p-4 justify-between items-center rounded rounded-t-none">
                  <motion.h3
                    className="text-lg font-semibold"
                    layoutId={`title-${item.id}`}
                    transition={{ duration: 0.2 }}
                  >
                    {item.title}
                  </motion.h3>

                  <PlusIcon className="group-hover:text-foreground text-muted-foreground transition-all" />
                </div>
              </motion.button>
            ))}
          </div>
        </ScrollArea>
        <Dialog
          actionsRef={actionsRef}
          onOpenChange={handleClose}
          open={isOpen}
        >
          <AnimatePresence mode="popLayout">
            {isOpen && activeItem && (
              <DialogPortal keepMounted>
                <DialogBackdrop />
                <DialogViewport
                  className="grid place-items-center p-4 pt-32"
                  hidden={false}
                >
                  <DialogPopup
                    className="relative w-full max-w-4xl flex flex-col overflow-hidden rounded"
                    hidden={false}
                    render={
                      <motion.div
                        layoutId={`card-container-${activeItem.id}`}
                        onLayoutAnimationComplete={() => {
                          if (!isOpen) {
                            actionsRef.current?.unmount();
                            setTimeout(() => setActiveItem(null), 50);
                          }
                        }}
                      />
                    }
                  >
                    <ScrollArea className="h-[calc(100vh-4rem)]" noScrollBar>
                      <motion.div
                        animate={{ opacity: 1 }}
                        className="flex flex-col h-full pb-[10vh]"
                        exit={{ opacity: 0 }}
                        initial={{ opacity: 0 }}
                        transition={{
                          duration: 0.15,
                        }}
                      >
                        <div className="relative h-64 sm:h-96 w-full shrink-0 overflow-hidden">
                          <motion.div
                            className="w-full h-full"
                            layoutId={`image-container-${activeItem.id}`}
                          >
                            <img
                              alt={activeItem.title}
                              className="h-full w-full object-cover dark:brightness-20 dark:grayscale-25"
                              height={500}
                              src={activeItem.image}
                              width={500}
                            />
                          </motion.div>
                        </div>

                        <div className="flex flex-col p-4 sm:p-8 justify-start text-left space-y-6">
                          <DialogTitle
                            className="text-3xl sm:text-4xl md:text-5xl xl:text-6xl font-bold"
                            render={
                              <motion.h2 layoutId={`title-${activeItem.id}`}>
                                {activeItem.title}
                              </motion.h2>
                            }
                          />
                          <motion.div
                            animate={{ opacity: 1, y: 0 }}
                            initial={{ opacity: 0, y: 10 }}
                            transition={{ delay: 0.2 }}
                          >
                            {activeItem.content}
                          </motion.div>
                        </div>

                        <DialogClose
                          className="absolute right-4 top-4 z-20"
                          render={
                            <Button
                              className="rounded-full shadow-lg"
                              size="icon"
                              variant="secondary"
                            >
                              <X size={16} />
                            </Button>
                          }
                        />
                      </motion.div>
                    </ScrollArea>
                  </DialogPopup>
                </DialogViewport>
              </DialogPortal>
            )}
          </AnimatePresence>
        </Dialog>
      </LayoutGroup>
    </div>
  );
}

type CardItem = {
  id: string;
  title: string;
  image: string;
  content: React.ReactNode;
};

const ITEMS: CardItem[] = [
  {
    content: (
      <div className="space-y-4 text-muted-foreground leading-relaxed">
        <p>
          Modern development is human + AI. We optimized Lumi UI's structure so
          that AI assistants generate correct, idiomatic code on the first
          attempt.
        </p>
        <ul className="list-disc pl-5 space-y-2">
          <li>
            <strong className="text-foreground">Flat Semantic Exports:</strong>{" "}
            Every component is accessible at the root level, making it easier
            for AI to infer usage and reducing context tokens.
          </li>
          <li>
            <strong className="text-foreground">
              Composites as Living Examples:
            </strong>{" "}
            Our composite components serve as executable documentation.
          </li>
          <li>
            <strong className="text-foreground">Immutable Logic Blocks:</strong>{" "}
            Primitives are stable building blocks. You compose them rather than
            modifying core logic.
          </li>
        </ul>
        <div className="pt-8">
          <h4 className="text-foreground font-semibold mb-4 text-lg">
            Deep Dive: Optimization
          </h4>
          <div className="grid gap-4">
            {Array.from({ length: 3 }).map((_, i) => (
              <div className="bg-muted/50 rounded-lg p-4 space-y-2" key={i}>
                <div className="h-4 w-1/3 bg-muted rounded" />
                <div className="h-20 w-full bg-muted rounded" />
              </div>
            ))}
          </div>
        </div>
      </div>
    ),
    id: "card-1",
    image: "/images/placeholder.svg",
    title: "Discoverable",
  },
  {
    content: (
      <div className="space-y-4 text-muted-foreground leading-relaxed">
        <p>
          Base UI provides the behavioral foundation, but we provide the visual
          consistency. Every component adapts to your needs following a unified
          language.
        </p>
        <ul className="list-disc pl-5 space-y-2">
          <li>
            <strong className="text-foreground">The Utility Pattern:</strong> We
            use utility classes to provide consistent styling across all
            components.
          </li>
          <li>
            <strong className="text-foreground">Global Animation:</strong> All
            interactive elements use globally configured animation utilities for
            cohesive transitions.
          </li>
          <li>
            <strong className="text-foreground">Hit-Test Philosophy:</strong> We
            use pseudo-elements to separate visual highlights from interactive
            containers, creating forgiving, clickable areas.
          </li>
        </ul>
        <div className="pt-8">
          <h4 className="text-foreground font-semibold mb-4 text-lg">
            Design System Specs
          </h4>
          <div className="grid gap-4">
            <div className="aspect-video bg-muted rounded-lg w-full flex items-center justify-center text-muted-foreground">
              Animation Curve Visualization
            </div>
            <div className="aspect-video bg-muted rounded-lg w-full flex items-center justify-center text-muted-foreground">
              Spacing Scale
            </div>
          </div>
        </div>
      </div>
    ),
    id: "card-2",
    image: "/images/placeholder.svg",
    title: "Predictable",
  },
  {
    content: (
      <div className="space-y-4 text-muted-foreground leading-relaxed">
        <p>
          We refuse the false dichotomy between speed and control. Our Dual
          Layer Architecture accommodates both prototyping and polishing modes.
        </p>
        <ul className="list-disc pl-5 space-y-2">
          <li>
            <strong className="text-foreground">Composites = Velocity:</strong>{" "}
            Pre-assembled components that combine structure, styling, and logic
            for MVPs and standard use cases.
          </li>
          <li>
            <strong className="text-foreground">Primitives = Control:</strong>{" "}
            Thin wrappers around Base UI that enforce zero visual layout, giving
            you complete control over DOM structure.
          </li>
          <li>
            <strong className="text-foreground">Mix and Match:</strong> Use
            composites for speed and primitive blocks for unique custom designs
            in the same project.
          </li>
        </ul>
        <div className="pt-8">
          <h4 className="text-foreground font-semibold mb-4 text-lg">
            Component Architecture
          </h4>
          <div className="flex flex-col gap-4">
            <div className="h-32 bg-muted rounded-lg border-2 border-dashed border-muted-foreground/20 flex items-center justify-center">
              Composite Layer
            </div>
            <div className="h-10 text-center text-muted-foreground text-sm">
              ↓ Adapts to ↓
            </div>
            <div className="h-32 bg-muted rounded-lg border-2 border-dashed border-muted-foreground/20 flex items-center justify-center">
              Primitive Layer
            </div>
          </div>
        </div>
      </div>
    ),
    id: "card-3",
    image: "/images/placeholder.svg",
    title: "Composable",
  },
];

"use client";

import {
  CheckCircle2,
  ChevronRight,
  File,
  FileJson,
  FileText,
  Folder,
  FolderOpen,
  Image as ImageIcon,
  Loader2,
} from "lucide-react";
import * as React from "react";
import { cn } from "@/lib/utils";
import { Button } from "@/components/ui/button";
import {
  Collapsible,
  CollapsiblePanel,
  CollapsibleTrigger,
} from "@/components/ui/collapsible";

export type TreeItemType = {
  id: string;
  name: string;
  type: "folder" | "file";
  children?: TreeItemType[];
  icon?: React.ReactNode;
  badge?: string | number | React.ReactNode;
  badgeColor?: "default" | "blue" | "red" | "green";
  isOpen?: boolean;
};

interface TreeItemProps {
  item: TreeItemType;
  depth?: number;
}

function getFileIcon(name: string, customIcon?: React.ReactNode) {
  if (customIcon) return customIcon;
  if (name.endsWith(".tsx") || name.endsWith(".ts"))
    return <FileText className="size-4 text-blue-400" />;
  if (name.endsWith(".css"))
    return <FileText className="size-4 text-sky-300" />;
  if (name.endsWith(".json"))
    return <FileJson className="size-4 text-yellow-400" />;
  if (name.endsWith(".png") || name.endsWith(".jpg"))
    return <ImageIcon className="size-4 text-purple-400" />;
  if (name.endsWith(".md"))
    return <FileText className="size-4 text-gray-400" />;
  return <File className="size-4 text-muted-foreground" />;
}

function TreeItem({ item, depth = 0 }: TreeItemProps) {
  const isFolder = item.type === "folder";
  const paddingLeft = depth * 16 + 12;

  const renderBadge = () => {
    if (!item.badge) return null;
    if (React.isValidElement(item.badge)) {
      return <div className="ml-auto flex items-center">{item.badge}</div>;
    }

    const colorStyles = {
      blue: "bg-blue-600 text-white",
      default: "bg-muted text-muted-foreground",
      green: "bg-green-900/50 text-green-200 border border-green-900",
      red: "bg-red-900/50 text-red-200 border border-red-900",
    };

    return (
      <span
        className={cn(
          "ml-auto text-[10px] px-1.5 py-0.5 rounded-full font-medium leading-none",
          colorStyles[item.badgeColor || "default"],
        )}
      >
        {item.badge}
      </span>
    );
  };

  if (isFolder) {
    return (
      <Collapsible className="w-full">
        <CollapsibleTrigger
          render={
            <Button
              className={cn(
                "group flex w-full items-center gap-2 py-1.5 pr-3 text-sm hover:bg-accent/50 text-foreground transition-colors rounded-sm justify-start",
              )}
              style={{ paddingLeft: `${paddingLeft}px` }}
              variant="ghost"
            >
              <ChevronRight className="size-4 text-muted-foreground shrink-0 transition-transform duration-200 group-data-panel-open:rotate-90" />
              <Folder className="size-4 text-blue-500 fill-blue-500/20 group-data-panel-open:hidden" />
              <FolderOpen className="size-4 text-blue-500 fill-blue-500/20 hidden group-data-panel-open:block" />
              <span className="truncate font-medium">{item.name}</span>
              {renderBadge()}
            </Button>
          }
        />
        <CollapsiblePanel className="relative">
          <div
            className="absolute left-0 w-px bg-border/40 h-full"
            style={{ left: `${paddingLeft + 7}px` }}
          />
          {item.children?.map((child) => (
            <TreeItem depth={depth + 1} item={child} key={child.id} />
          ))}
        </CollapsiblePanel>
      </Collapsible>
    );
  }

  return (
    <div
      className="flex items-center gap-2 py-1.5 pr-3 text-sm text-muted-foreground hover:bg-accent/50 hover:text-foreground transition-colors cursor-pointer rounded-sm"
      style={{ paddingLeft: `${paddingLeft + 20}px` }}
    >
      {getFileIcon(item.name, item.icon)}
      <span className="truncate">{item.name}</span>
      {renderBadge()}
    </div>
  );
}

const exampleData: TreeItemType[] = [
  {
    badge: "New",
    children: [
      {
        badge: 9,
        badgeColor: "blue",
        children: [
          {
            children: [
              { id: "button", name: "button.tsx", type: "file" },
              { id: "collapsible", name: "collapsible.tsx", type: "file" },
              {
                badge: "Error",
                badgeColor: "red",
                id: "dialog",
                name: "dialog.tsx",
                type: "file",
              },
            ],
            id: "ui",
            isOpen: true,
            name: "ui",
            type: "folder",
          },
          {
            badge: <CheckCircle2 className="size-3 text-green-500" />,
            id: "header",
            name: "header.tsx",
            type: "file",
          },
          { id: "footer", name: "footer.tsx", type: "file" },
        ],
        id: "components",
        isOpen: true,
        name: "components",
        type: "folder",
      },
      {
        children: [
          { id: "utils", name: "utils.ts", type: "file" },
          {
            icon: (
              <Loader2 className="size-4 animate-spin text-muted-foreground" />
            ),
            id: "hooks",
            name: "hooks.ts",
            type: "file",
          },
        ],
        id: "lib",
        name: "lib",
        type: "folder",
      },
      {
        badge: 2,
        children: [
          { id: "page", name: "page.tsx", type: "file" },
          { id: "layout", name: "layout.tsx", type: "file" },
        ],
        id: "app",
        name: "app",
        type: "folder",
      },
    ],
    id: "src",
    isOpen: true,
    name: "src",
    type: "folder",
  },
  {
    children: [
      {
        children: [{ id: "logo", name: "logo.png", type: "file" }],
        id: "images",
        name: "images",
        type: "folder",
      },
    ],
    id: "public",
    name: "public",
    type: "folder",
  },
  {
    icon: (
      <div className="size-4 text-red-500 font-bold text-[10px] leading-4 text-center">
        npm
      </div>
    ),
    id: "pkg",
    name: "package.json",
    type: "file",
  },
  {
    badge: "Docs",
    badgeColor: "default",
    id: "readme",
    name: "README.md",
    type: "file",
  },
];

export function CollapsibleFileTreeDemo() {
  return (
    <div className="w-full max-w-lg my-12 rounded-lg border bg-background/50 p-2 font-mono text-sm shadow-sm h-full">
      {exampleData.map((item) => (
        <TreeItem item={item} key={item.id} />
      ))}
    </div>
  );
}