@leanspec/ui 0.2.7 → 0.2.9-dev.20251205030455

package/.next/standalone/packages/ui/dist/standalone/packages/web/src/components/spec-sidebar.tsx

@@ -1,127 +0,0 @@
-"use client"
-
-import * as React from "react"
-import Link from "next/link"
-import { FileText, Search, ChevronLeft, ChevronRight } from "lucide-react"
-import { Input } from "@/components/ui/input"
-import { Button } from "@/components/ui/button"
-import { StatusBadge } from "@/components/status-badge"
-import { cn } from "@/lib/utils"
-
-interface Spec {
-  id: string
-  specNumber: number | null
-  title: string | null
-  specName: string
-  status: string | null
-  priority: string | null
-}
-
-interface SpecSidebarProps {
-  specs: Spec[]
-  currentSpecId: string
-}
-
-export function SpecSidebar({ specs, currentSpecId }: SpecSidebarProps) {
-  const [collapsed, setCollapsed] = React.useState(false)
-  const [searchQuery, setSearchQuery] = React.useState("")
-
-  const filteredSpecs = React.useMemo(() => {
-    if (!searchQuery) return specs
-    const query = searchQuery.toLowerCase()
-    return specs.filter(
-      (spec) =>
-        spec.title?.toLowerCase().includes(query) ||
-        spec.specName.toLowerCase().includes(query) ||
-        spec.specNumber?.toString().includes(query)
-    )
-  }, [specs, searchQuery])
-
-  if (collapsed) {
-    return (
-      <div className="sticky top-14 h-[calc(100vh-3.5rem)] w-12 border-r bg-background flex flex-col items-center py-4">
-        <Button
-          variant="ghost"
-          size="sm"
-          onClick={() => setCollapsed(false)}
-          className="h-8 w-8 p-0"
-        >
-          <ChevronRight className="h-4 w-4" />
-          <span className="sr-only">Expand sidebar</span>
-        </Button>
-      </div>
-    )
-  }
-
-  return (
-    <aside className="sticky top-14 h-[calc(100vh-3.5rem)] w-64 border-r bg-background flex flex-col">
-      <div className="p-4 border-b flex items-center justify-between">
-        <h2 className="font-semibold text-sm">All Specs</h2>
-        <Button
-          variant="ghost"
-          size="sm"
-          onClick={() => setCollapsed(true)}
-          className="h-8 w-8 p-0"
-        >
-          <ChevronLeft className="h-4 w-4" />
-          <span className="sr-only">Collapse sidebar</span>
-        </Button>
-      </div>
-
-      <div className="p-4 border-b">
-        <div className="relative">
-          <Search className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
-          <Input
-            placeholder="Search specs..."
-            value={searchQuery}
-            onChange={(e) => setSearchQuery(e.target.value)}
-            className="pl-8 h-9"
-          />
-        </div>
-      </div>
-
-      <div className="flex-1 overflow-y-auto">
-        <div className="p-2">
-          {filteredSpecs.length === 0 ? (
-            <div className="text-center py-8 text-sm text-muted-foreground">
-              No specs found
-            </div>
-          ) : (
-            filteredSpecs.map((spec) => {
-              const isActive = spec.id === currentSpecId
-              const displayTitle = spec.title || spec.specName
-              
-              return (
-                <Link
-                  key={spec.id}
-                  href={`/specs/${spec.id}`}
-                  className={cn(
-                    "block p-2 rounded-md text-sm transition-colors mb-1",
-                    isActive
-                      ? "bg-accent text-accent-foreground font-medium"
-                      : "hover:bg-accent/50"
-                  )}
-                >
-                  <div className="flex items-start gap-2">
-                    <FileText className="h-4 w-4 mt-0.5 shrink-0" />
-                    <div className="flex-1 min-w-0">
-                      <div className="font-medium truncate">
-                        {spec.specNumber && `#${spec.specNumber} `}
-                        {displayTitle}
-                      </div>
-                      {spec.status && (
-                        <div className="mt-1">
-                          <StatusBadge status={spec.status} />
-                        </div>
-                      )}
-                    </div>
-                  </div>
-                </Link>
-              )
-            })
-          )}
-        </div>
-      </div>
-    </aside>
-  )
-}

package/.next/standalone/packages/ui/dist/standalone/packages/web/src/components/spec-timeline.tsx

@@ -1,186 +0,0 @@
-/**
- * Timeline component to visualize spec evolution (vertical layout)
- */
-
-import { Clock, PlayCircle, CheckCircle2, Archive, Circle } from 'lucide-react';
-import { formatRelativeTime, formatDuration } from '@/lib/date-utils';
-import { cn } from '@/lib/utils';
-
-interface TimelineEvent {
-  label: string;
-  date: Date | string | number | null | undefined;
-  isActive?: boolean;
-  isFuture?: boolean;
-  icon?: typeof Clock | typeof PlayCircle | typeof CheckCircle2 | typeof Archive | typeof Circle;
-  color?: string;
-}
-
-interface SpecTimelineProps {
-  createdAt: Date | string | number | null | undefined;
-  updatedAt: Date | string | number | null | undefined;
-  completedAt?: Date | string | number | null | undefined;
-  status: string;
-  className?: string;
-}
-
-export function SpecTimeline({ 
-  createdAt, 
-  updatedAt, 
-  completedAt,
-  status,
-  className 
-}: SpecTimelineProps) {
-  const events: TimelineEvent[] = [];
-
-  // Always include created
-  if (createdAt) {
-    events.push({
-      label: 'Created',
-      date: createdAt,
-      isActive: true,
-      isFuture: false,
-      icon: Clock,
-      color: 'text-blue-600',
-    });
-  }
-
-  // Add in-progress
-  if (status === 'in-progress' || status === 'complete' || status === 'archived') {
-    events.push({
-      label: 'In Progress',
-      date: updatedAt || createdAt,
-      isActive: true,
-      isFuture: false,
-      icon: PlayCircle,
-      color: 'text-orange-600',
-    });
-  } else {
-    events.push({
-      label: 'In Progress',
-      date: null,
-      isActive: false,
-      isFuture: true,
-      icon: Circle,
-      color: 'text-muted-foreground',
-    });
-  }
-
-  // Add completed
-  if (status === 'complete' || status === 'archived') {
-    events.push({
-      label: 'Complete',
-      date: completedAt || updatedAt,
-      isActive: true,
-      isFuture: false,
-      icon: CheckCircle2,
-      color: 'text-green-600',
-    });
-  } else {
-    events.push({
-      label: 'Complete',
-      date: null,
-      isActive: false,
-      isFuture: true,
-      icon: Circle,
-      color: 'text-muted-foreground',
-    });
-  }
-
-  // Add archived if status is archived
-  if (status === 'archived') {
-    events.push({
-      label: 'Archived',
-      date: updatedAt,
-      isActive: true,
-      isFuture: false,
-      icon: Archive,
-      color: 'text-gray-600',
-    });
-  }
-
-  if (events.length === 0) return null;
-
-  return (
-    <div className={cn('flex items-start gap-2', className)}>
-      {events.map((event, i) => {
-        const Icon = event.icon;
-        const isLast = i === events.length - 1;
-        const nextEvent = !isLast ? events[i + 1] : null;
-        const duration = event.date && nextEvent?.date && !nextEvent.isFuture
-          ? formatDuration(event.date, nextEvent.date)
-          : '';
-        
-        return (
-          <div key={i} className="flex items-center gap-2 flex-1">
-            {/* Event content */}
-            <div className="flex flex-col items-center gap-1 min-w-0">
-              {/* Icon */}
-              <div
-                className={cn(
-                  "w-8 h-8 rounded-full border-2 bg-background flex items-center justify-center shrink-0",
-                  event.isActive && !event.isFuture
-                    ? "border-primary"
-                    : "border-muted-foreground/40"
-                )}
-              >
-                {Icon && (
-                  <Icon 
-                    className={cn(
-                      "h-4 w-4",
-                      event.isActive && !event.isFuture ? "text-primary" : "text-muted-foreground/60"
-                    )} 
-                  />
-                )}
-              </div>
-              
-              {/* Label */}
-              <div
-                className={cn(
-                  "text-xs font-medium text-center whitespace-nowrap",
-                  event.isActive && !event.isFuture ? "text-foreground" : "text-muted-foreground"
-                )}
-              >
-                {event.label}
-              </div>
-              
-              {/* Date row - reserve space even when pending */}
-              <div className="text-[10px] text-center min-h-[14px]">
-                {event.date && !event.isFuture && (
-                  <span className="text-muted-foreground">{formatRelativeTime(event.date)}</span>
-                )}
-                {!event.date && event.isFuture && (
-                  <span className="text-muted-foreground/70">Awaiting start</span>
-                )}
-                {event.date && event.isFuture && (
-                  <span className="text-muted-foreground/70">Queued</span>
-                )}
-                {!event.date && !event.isFuture && (
-                  <span className="text-muted-foreground/60">Pending update</span>
-                )}
-              </div>
-            </div>
-            
-            {/* Connecting line with duration */}
-            {!isLast && (
-              <div className="flex flex-col items-center flex-1 min-w-4 gap-0.5">
-                <div 
-                  className={cn(
-                    "h-0.5 w-full",
-                    event.isActive && !event.isFuture 
-                      ? "bg-primary" 
-                      : "bg-muted-foreground/40"
-                  )}
-                />
-                {duration && (
-                  <div className="text-[10px] text-muted-foreground font-medium whitespace-nowrap">
-                    {duration}
-                  </div>
-                )}
-              </div>
-            )}
-          </div>
-        );
-      })}
-    </div>
-  );
-}