create-aiko 0.1.0

package/template/packages/admin/src/components/admin-ui/timeline.tsx

@@ -0,0 +1,137 @@
+"use client";
+
+import type { ReactNode } from "react";
+import { Check, Circle, Clock3, Info, TriangleAlert, X } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+import { Badge } from "@/components/ui/badge";
+
+export type TimelineItemStatus =
+  | "default"
+  | "success"
+  | "warning"
+  | "danger"
+  | "current"
+  | "muted";
+
+export interface TimelineItem {
+  id: string;
+  title: string;
+  description?: string;
+  timestamp?: string;
+  meta?: ReactNode;
+  content?: ReactNode;
+  status?: TimelineItemStatus;
+  icon?: ReactNode;
+  badge?: string;
+}
+
+export interface TimelineProps {
+  items: TimelineItem[];
+  dense?: boolean;
+  className?: string;
+}
+
+function getTimelineStatusConfig(status: TimelineItemStatus) {
+  switch (status) {
+    case "success":
+      return {
+        dotClassName: "bg-emerald-500 text-white border-emerald-500",
+        lineClassName: "bg-emerald-200",
+        icon: <Check className="size-3.5" />,
+        badgeVariant: "default" as const,
+      };
+    case "warning":
+      return {
+        dotClassName: "bg-amber-500 text-white border-amber-500",
+        lineClassName: "bg-amber-200",
+        icon: <TriangleAlert className="size-3.5" />,
+        badgeVariant: "secondary" as const,
+      };
+    case "danger":
+      return {
+        dotClassName: "bg-destructive text-white border-destructive",
+        lineClassName: "bg-destructive/20",
+        icon: <X className="size-3.5" />,
+        badgeVariant: "destructive" as const,
+      };
+    case "current":
+      return {
+        dotClassName: "bg-primary text-primary-foreground border-primary ring-4 ring-primary/15",
+        lineClassName: "bg-primary/20",
+        icon: <Clock3 className="size-3.5" />,
+        badgeVariant: "secondary" as const,
+      };
+    case "muted":
+      return {
+        dotClassName: "bg-muted text-muted-foreground border-border",
+        lineClassName: "bg-border",
+        icon: <Circle className="size-3.5 fill-current" />,
+        badgeVariant: "outline" as const,
+      };
+    case "default":
+    default:
+      return {
+        dotClassName: "bg-background text-muted-foreground border-border",
+        lineClassName: "bg-border",
+        icon: <Info className="size-3.5" />,
+        badgeVariant: "outline" as const,
+      };
+  }
+}
+
+export function Timeline({ items, dense = false, className }: TimelineProps) {
+  if (items.length === 0) return null;
+
+  return (
+    <div className={cn("flex flex-col", dense ? "gap-4" : "gap-6", className)}>
+      {items.map((item, index) => {
+        const config = getTimelineStatusConfig(item.status ?? "default");
+        const isLast = index === items.length - 1;
+
+        return (
+          <div key={item.id} className="flex gap-3">
+            <div className="relative flex flex-col items-center">
+              <div
+                className={cn(
+                  "relative z-10 flex size-8 items-center justify-center rounded-full border shadow-sm",
+                  config.dotClassName
+                )}
+              >
+                {item.icon ?? config.icon}
+              </div>
+              {!isLast && (
+                <div
+                  className={cn(
+                    "mt-1 h-full min-h-8 w-0.5 rounded-full",
+                    config.lineClassName
+                  )}
+                />
+              )}
+            </div>
+            <div className="min-w-0 flex-1 pb-2">
+              <div className="flex flex-wrap items-start justify-between gap-2">
+                <div className="min-w-0">
+                  <div className="flex flex-wrap items-center gap-2">
+                    <p className="text-sm font-medium text-foreground">{item.title}</p>
+                    {item.badge && <Badge variant={config.badgeVariant}>{item.badge}</Badge>}
+                  </div>
+                  {item.description && (
+                    <p className="mt-1 text-sm text-muted-foreground">{item.description}</p>
+                  )}
+                </div>
+                {item.timestamp && (
+                  <span className="text-xs whitespace-nowrap text-muted-foreground">
+                    {item.timestamp}
+                  </span>
+                )}
+              </div>
+              {item.meta && <div className="mt-2 text-xs text-muted-foreground">{item.meta}</div>}
+              {item.content && <div className="mt-3">{item.content}</div>}
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+}

package/template/packages/admin/src/components/admin-ui/tree-navigator.tsx

@@ -0,0 +1,243 @@
+"use client";
+
+import { useEffect, useMemo, useState, type ReactNode } from "react";
+import { ChevronDown, ChevronRight, FolderTree, Search } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { ScrollArea } from "@/components/ui/scroll-area";
+
+export interface TreeNavigatorNode {
+  id: string;
+  label: string;
+  subtitle?: string;
+  meta?: string;
+  icon?: ReactNode;
+  badge?: string | number;
+  disabled?: boolean;
+  children?: TreeNavigatorNode[];
+}
+
+export interface TreeNavigatorProps {
+  nodes: TreeNavigatorNode[];
+  selectedId?: string;
+  defaultExpandedIds?: string[];
+  onSelect?: (node: TreeNavigatorNode) => void;
+  onExpandedChange?: (expandedIds: string[]) => void;
+  searchable?: boolean;
+  searchPlaceholder?: string;
+  emptyText?: string;
+  className?: string;
+  renderActions?: (node: TreeNavigatorNode) => ReactNode;
+}
+
+function collectExpandableIds(nodes: TreeNavigatorNode[], target = new Set<string>()) {
+  for (const node of nodes) {
+    if (node.children?.length) {
+      target.add(node.id);
+      collectExpandableIds(node.children, target);
+    }
+  }
+
+  return target;
+}
+
+function filterNodes(nodes: TreeNavigatorNode[], keyword: string): TreeNavigatorNode[] {
+  const normalized = keyword.trim().toLowerCase();
+  if (!normalized) return nodes;
+
+  const filtered = nodes
+    .map<TreeNavigatorNode | null>((node) => {
+      const children = node.children ? filterNodes(node.children, normalized) : [];
+      const matched =
+        node.label.toLowerCase().includes(normalized) ||
+        node.subtitle?.toLowerCase().includes(normalized) ||
+        node.meta?.toLowerCase().includes(normalized);
+
+      if (matched || children.length > 0) {
+        return { ...node, children };
+      }
+
+      return null;
+    })
+    .filter((node): node is TreeNavigatorNode => node !== null);
+
+  return filtered;
+}
+
+interface TreeNodeRowProps {
+  node: TreeNavigatorNode;
+  level: number;
+  expandedIds: Set<string>;
+  selectedId?: string;
+  onToggle: (id: string) => void;
+  onSelect?: (node: TreeNavigatorNode) => void;
+  renderActions?: (node: TreeNavigatorNode) => ReactNode;
+}
+
+function TreeNodeRow({
+  node,
+  level,
+  expandedIds,
+  selectedId,
+  onToggle,
+  onSelect,
+  renderActions,
+}: TreeNodeRowProps) {
+  const hasChildren = Boolean(node.children?.length);
+  const expanded = hasChildren && expandedIds.has(node.id);
+  const selected = node.id === selectedId;
+
+  return (
+    <div>
+      <div
+        className={cn(
+          "group flex items-center gap-2 rounded-lg px-2 py-2 text-sm transition-colors",
+          selected ? "bg-primary/10 text-primary" : "hover:bg-muted/60",
+          node.disabled && "cursor-not-allowed opacity-50"
+        )}
+        style={{ paddingLeft: `${level * 16 + 8}px` }}
+      >
+        <Button
+          type="button"
+          variant="ghost"
+          size="icon"
+          className="size-6 shrink-0"
+          onClick={() => hasChildren && onToggle(node.id)}
+          disabled={!hasChildren}
+        >
+          {hasChildren ? (
+            expanded ? <ChevronDown className="size-4" /> : <ChevronRight className="size-4" />
+          ) : (
+            <span className="block size-4" />
+          )}
+        </Button>
+        <button
+          type="button"
+          onClick={() => !node.disabled && onSelect?.(node)}
+          className="flex min-w-0 flex-1 items-center gap-2 text-left"
+          disabled={node.disabled}
+        >
+          <span
+            className={cn(
+              "flex size-8 shrink-0 items-center justify-center rounded-md border bg-background text-muted-foreground",
+              selected && "border-primary/30 bg-primary/5 text-primary"
+            )}
+          >
+            {node.icon ?? <FolderTree className="size-4" />}
+          </span>
+          <span className="min-w-0 flex-1">
+            <span className="block truncate font-medium">{node.label}</span>
+            {(node.subtitle || node.meta) && (
+              <span className="mt-0.5 block truncate text-xs text-muted-foreground">
+                {node.subtitle ?? node.meta}
+              </span>
+            )}
+          </span>
+        </button>
+        {node.badge != null && <Badge variant={selected ? "secondary" : "outline"}>{node.badge}</Badge>}
+        {renderActions && (
+          <div className="opacity-0 transition-opacity group-hover:opacity-100">
+            {renderActions(node)}
+          </div>
+        )}
+      </div>
+      {expanded && node.children && (
+        <div className="mt-1 space-y-1">
+          {node.children.map((child) => (
+            <TreeNodeRow
+              key={child.id}
+              node={child}
+              level={level + 1}
+              expandedIds={expandedIds}
+              selectedId={selectedId}
+              onToggle={onToggle}
+              onSelect={onSelect}
+              renderActions={renderActions}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+export function TreeNavigator({
+  nodes,
+  selectedId,
+  defaultExpandedIds = [],
+  onSelect,
+  onExpandedChange,
+  searchable = true,
+  searchPlaceholder = "搜索节点...",
+  emptyText = "暂无匹配节点",
+  className,
+  renderActions,
+}: TreeNavigatorProps) {
+  const [keyword, setKeyword] = useState("");
+  const [expandedIds, setExpandedIds] = useState<Set<string>>(
+    () => new Set(defaultExpandedIds)
+  );
+
+  const filteredNodes = useMemo(() => filterNodes(nodes, keyword), [nodes, keyword]);
+
+  useEffect(() => {
+    if (!keyword.trim()) return;
+    setExpandedIds(collectExpandableIds(filteredNodes));
+  }, [filteredNodes, keyword]);
+
+  const handleToggle = (id: string) => {
+    setExpandedIds((prev) => {
+      const next = new Set(prev);
+      if (next.has(id)) {
+        next.delete(id);
+      } else {
+        next.add(id);
+      }
+      onExpandedChange?.(Array.from(next));
+      return next;
+    });
+  };
+
+  return (
+    <div className={cn("rounded-xl border border-border bg-card shadow-sm", className)}>
+      {searchable && (
+        <div className="border-b border-border p-3">
+          <div className="relative">
+            <Search className="absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" />
+            <Input
+              value={keyword}
+              onChange={(event) => setKeyword(event.target.value)}
+              placeholder={searchPlaceholder}
+              className="pl-9"
+            />
+          </div>
+        </div>
+      )}
+      <ScrollArea className="max-h-[28rem]">
+        <div className="space-y-1 p-3">
+          {filteredNodes.length > 0 ? (
+            filteredNodes.map((node) => (
+              <TreeNodeRow
+                key={node.id}
+                node={node}
+                level={0}
+                expandedIds={expandedIds}
+                selectedId={selectedId}
+                onToggle={handleToggle}
+                onSelect={onSelect}
+                renderActions={renderActions}
+              />
+            ))
+          ) : (
+            <div className="rounded-lg border border-dashed border-border px-4 py-10 text-center text-sm text-muted-foreground">
+              {emptyText}
+            </div>
+          )}
+        </div>
+      </ScrollArea>
+    </div>
+  );
+}

package/template/packages/admin/src/components/ui/accordion.tsx

@@ -0,0 +1,64 @@
+import * as React from "react";
+import * as AccordionPrimitive from "@radix-ui/react-accordion";
+import { ChevronDownIcon } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+function Accordion({
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Root>) {
+  return <AccordionPrimitive.Root data-slot="accordion" {...props} />;
+}
+
+function AccordionItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Item>) {
+  return (
+    <AccordionPrimitive.Item
+      data-slot="accordion-item"
+      className={cn("border-b last:border-b-0", className)}
+      {...props}
+    />
+  );
+}
+
+function AccordionTrigger({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {
+  return (
+    <AccordionPrimitive.Header className="flex">
+      <AccordionPrimitive.Trigger
+        data-slot="accordion-trigger"
+        className={cn(
+          "focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <ChevronDownIcon className="text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200" />
+      </AccordionPrimitive.Trigger>
+    </AccordionPrimitive.Header>
+  );
+}
+
+function AccordionContent({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Content>) {
+  return (
+    <AccordionPrimitive.Content
+      data-slot="accordion-content"
+      className="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm"
+      {...props}
+    >
+      <div className={cn("pt-0 pb-4", className)}>{children}</div>
+    </AccordionPrimitive.Content>
+  );
+}
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };

package/template/packages/admin/src/components/ui/alert-dialog.tsx

@@ -0,0 +1,157 @@
+"use client";
+
+import * as React from "react";
+import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
+
+import { cn } from "@/lib/utils";
+import { buttonVariants } from "@/components/ui/button";
+
+function AlertDialog({
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {
+  return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />;
+}
+
+function AlertDialogTrigger({
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {
+  return (
+    <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />
+  );
+}
+
+function AlertDialogPortal({
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) {
+  return (
+    <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />
+  );
+}
+
+function AlertDialogOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>) {
+  return (
+    <AlertDialogPrimitive.Overlay
+      data-slot="alert-dialog-overlay"
+      className={cn(
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Content>) {
+  return (
+    <AlertDialogPortal>
+      <AlertDialogOverlay />
+      <AlertDialogPrimitive.Content
+        data-slot="alert-dialog-content"
+        className={cn(
+          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
+          className
+        )}
+        {...props}
+      />
+    </AlertDialogPortal>
+  );
+}
+
+function AlertDialogHeader({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-dialog-header"
+      className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogFooter({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-dialog-footer"
+      className={cn(
+        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {
+  return (
+    <AlertDialogPrimitive.Title
+      data-slot="alert-dialog-title"
+      className={cn("text-lg font-semibold", className)}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {
+  return (
+    <AlertDialogPrimitive.Description
+      data-slot="alert-dialog-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogAction({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Action>) {
+  return (
+    <AlertDialogPrimitive.Action
+      className={cn(buttonVariants(), className)}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogCancel({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Cancel>) {
+  return (
+    <AlertDialogPrimitive.Cancel
+      className={cn(buttonVariants({ variant: "outline" }), className)}
+      {...props}
+    />
+  );
+}
+
+export {
+  AlertDialog,
+  AlertDialogPortal,
+  AlertDialogOverlay,
+  AlertDialogTrigger,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogFooter,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogAction,
+  AlertDialogCancel,
+};

package/template/packages/admin/src/components/ui/alert.tsx

@@ -0,0 +1,66 @@
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+
+const alertVariants = cva(
+  "relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
+  {
+    variants: {
+      variant: {
+        default: "bg-card text-card-foreground",
+        destructive:
+          "text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+);
+
+function Alert({
+  className,
+  variant,
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>) {
+  return (
+    <div
+      data-slot="alert"
+      role="alert"
+      className={cn(alertVariants({ variant }), className)}
+      {...props}
+    />
+  );
+}
+
+function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-title"
+      className={cn(
+        "col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function AlertDescription({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-description"
+      className={cn(
+        "text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Alert, AlertTitle, AlertDescription };

package/template/packages/admin/src/components/ui/aspect-ratio.tsx

@@ -0,0 +1,9 @@
+import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio";
+
+function AspectRatio({
+  ...props
+}: React.ComponentProps<typeof AspectRatioPrimitive.Root>) {
+  return <AspectRatioPrimitive.Root data-slot="aspect-ratio" {...props} />;
+}
+
+export { AspectRatio };