@leanspec/ui 0.2.14 → 0.2.15

package/src/components/spec-detail/MarkdownRenderer.tsx

@@ -1,47 +0,0 @@
-import ReactMarkdown from 'react-markdown';
-import remarkGfm from 'remark-gfm';
-import rehypeSlug from 'rehype-slug';
-import { MermaidDiagram } from '../MermaidDiagram';
-import type { ComponentPropsWithoutRef } from 'react';
-import type { Components } from 'react-markdown';
-
-function useMarkdownComponents(): Components {
-  return {
-    code({ className, children, ...props }: ComponentPropsWithoutRef<'code'>) {
-      const inline = !className?.includes('language-');
-      const match = /language-(\w+)/.exec(className || '');
-      const language = match ? match[1] : null;
-      const code = String(children).replace(/\n$/, '');
-
-      if (!inline && language === 'mermaid') {
-        return <MermaidDiagram chart={code} className="my-4" />;
-      }
-
-      return (
-        <code className={className} {...props}>
-          {children}
-        </code>
-      );
-    },
-  };
-}
-
-interface MarkdownRendererProps {
-  content: string;
-}
-
-export function MarkdownRenderer({ content }: MarkdownRendererProps) {
-  const markdownComponents = useMarkdownComponents();
-
-  return (
-    <article className="prose prose-sm sm:prose-base dark:prose-invert max-w-none">
-      <ReactMarkdown
-        remarkPlugins={[remarkGfm]}
-        rehypePlugins={[rehypeSlug]}
-        components={markdownComponents}
-      >
-        {content}
-      </ReactMarkdown>
-    </article>
-  );
-}

package/src/components/spec-detail/TableOfContents.tsx

@@ -1,150 +0,0 @@
-import { useMemo, useState } from 'react';
-import { List } from 'lucide-react';
-import {
-  Button,
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-  cn,
-} from '@leanspec/ui-components';
-import { useTranslation } from 'react-i18next';
-import GithubSlugger from 'github-slugger';
-
-interface TOCItem {
-  id: string;
-  text: string;
-  level: number;
-}
-
-/**
- * Extract headings from markdown content
- */
-function extractHeadings(markdown: string): TOCItem[] {
-  if (!markdown) return [];
-
-  const headings: TOCItem[] = [];
-  const lines = markdown.split('\n');
-  let inCodeBlock = false;
-  const slugger = new GithubSlugger();
-
-  for (const line of lines) {
-    // Track code blocks
-    if (line.trim().startsWith('```')) {
-      inCodeBlock = !inCodeBlock;
-      continue;
-    }
-
-    // Skip lines inside code blocks
-    if (inCodeBlock) continue;
-
-    // Match headings (## Heading or ### Heading, skip # H1)
-    const match = line.match(/^(#{2,6})\s+(.+)$/);
-    if (match) {
-      const level = match[1].length;
-      const text = match[2].trim();
-      const id = slugger.slug(text);
-
-      headings.push({ id, text, level });
-    }
-  }
-
-  return headings;
-}
-
-function scrollToHeading(id: string) {
-  const element = document.getElementById(id);
-  if (element) {
-    element.scrollIntoView({ behavior: 'smooth', block: 'start' });
-
-    if (window.history.replaceState) {
-      window.history.replaceState(null, '', `#${id}`);
-    } else {
-      window.location.hash = id;
-    }
-  }
-}
-
-interface TOCListProps {
-  headings: TOCItem[];
-  onHeadingClick: (id: string) => void;
-}
-
-function TOCList({ headings, onHeadingClick }: TOCListProps) {
-  return (
-    <nav className="space-y-1">
-      {headings.map((heading, index) => (
-        <button
-          key={`${heading.id}-${index}`}
-          onClick={() => onHeadingClick(heading.id)}
-          className={cn(
-            'w-full text-left px-2 py-1.5 text-sm rounded-md hover:bg-muted transition-colors flex items-start gap-2 group text-muted-foreground hover:text-foreground',
-            heading.level === 2 && 'font-medium text-foreground',
-            heading.level === 3 && 'pl-6',
-            heading.level === 4 && 'pl-10',
-            heading.level === 5 && 'pl-14',
-            heading.level === 6 && 'pl-18'
-          )}
-        >
-          <span className="flex-1 truncate">{heading.text}</span>
-        </button>
-      ))}
-    </nav>
-  );
-}
-
-interface TableOfContentsProps {
-  content: string;
-}
-
-export function TableOfContentsSidebar({ content }: TableOfContentsProps) {
-  const { t } = useTranslation('common');
-  const headings = useMemo(() => extractHeadings(content), [content]);
-  if (headings.length === 0) return null;
-
-  return (
-    <div className="py-2">
-      <h4 className="mb-4 text-sm font-semibold leading-none tracking-tight px-2">
-        {t('tableOfContents.onThisPage')}
-      </h4>
-      <TOCList headings={headings} onHeadingClick={scrollToHeading} />
-    </div>
-  );
-}
-
-export function TableOfContents({ content }: TableOfContentsProps) {
-  const { t } = useTranslation('common');
-  const [open, setOpen] = useState(false);
-  const headings = useMemo(() => extractHeadings(content), [content]);
-
-  if (headings.length === 0) return null;
-
-  const handleHeadingClick = (id: string) => {
-    setOpen(false);
-    // Small delay to allow dialog to close before scrolling
-    setTimeout(() => {
-      scrollToHeading(id);
-    }, 100);
-  };
-
-  return (
-    <Dialog open={open} onOpenChange={setOpen}>
-      <Button
-        size="icon"
-        aria-haspopup="dialog"
-        aria-expanded={open}
-        onClick={() => setOpen(true)}
-        className="fixed bottom-24 right-6 h-12 w-12 rounded-full shadow-lg z-40 hover:scale-110 transition-transform"
-        aria-label={t('tableOfContents.open')}
-      >
-        <List className="h-5 w-5" />
-      </Button>
-      <DialogContent className="max-w-md max-h-[80vh] overflow-y-auto">
-        <DialogHeader>
-          <DialogTitle>{t('tableOfContents.title')}</DialogTitle>
-        </DialogHeader>
-        <TOCList headings={headings} onHeadingClick={handleHeadingClick} />
-      </DialogContent>
-    </Dialog>
-  );
-}

package/src/components/specs/BoardView.tsx

@@ -1,204 +0,0 @@
-import { useState, useMemo, type DragEvent } from 'react';
-import { Link } from 'react-router-dom';
-import { Clock, PlayCircle, CheckCircle2, Archive } from 'lucide-react';
-import type { Spec } from '../../types/api';
-import { PriorityBadge } from '../PriorityBadge';
-import { cn } from '@leanspec/ui-components';
-import { useTranslation } from 'react-i18next';
-
-type SpecStatus = 'planned' | 'in-progress' | 'complete' | 'archived';
-
-interface BoardViewProps {
-  specs: Spec[];
-  onStatusChange: (spec: Spec, status: SpecStatus) => void;
-  basePath?: string;
-}
-
-const STATUS_CONFIG: Record<SpecStatus, {
-  icon: typeof Clock;
-  titleKey: `status.${string}`;
-  colorClass: string;
-  bgClass: string;
-  borderClass: string;
-}> = {
-  'planned': {
-    icon: Clock,
-    titleKey: 'status.planned',
-    colorClass: 'text-blue-600 dark:text-blue-400',
-    bgClass: 'bg-blue-50 dark:bg-blue-900/20',
-    borderClass: 'border-blue-200 dark:border-blue-800'
-  },
-  'in-progress': {
-    icon: PlayCircle,
-    titleKey: 'status.inProgress',
-    colorClass: 'text-orange-600 dark:text-orange-400',
-    bgClass: 'bg-orange-50 dark:bg-orange-900/20',
-    borderClass: 'border-orange-200 dark:border-orange-800'
-  },
-  'complete': {
-    icon: CheckCircle2,
-    titleKey: 'status.complete',
-    colorClass: 'text-green-600 dark:text-green-400',
-    bgClass: 'bg-green-50 dark:bg-green-900/20',
-    borderClass: 'border-green-200 dark:border-green-800'
-  },
-  'archived': {
-    icon: Archive,
-    titleKey: 'status.archived',
-    colorClass: 'text-gray-600 dark:text-gray-400',
-    bgClass: 'bg-gray-50 dark:bg-gray-900/20',
-    borderClass: 'border-gray-200 dark:border-gray-800'
-  }
-};
-
-export function BoardView({ specs, onStatusChange, basePath = '/projects/default' }: BoardViewProps) {
-  const [draggingId, setDraggingId] = useState<string | null>(null);
-  const [activeDropZone, setActiveDropZone] = useState<SpecStatus | null>(null);
-  const { t } = useTranslation('common');
-
-  const columns = useMemo(() => {
-    const cols: SpecStatus[] = ['planned', 'in-progress', 'complete'];
-    return cols;
-  }, []);
-
-  const specsByStatus = useMemo(() => {
-    const grouped: Record<SpecStatus, Spec[]> = {
-      'planned': [],
-      'in-progress': [],
-      'complete': [],
-      'archived': []
-    };
-
-    specs.forEach((spec) => {
-      const status = spec.status as SpecStatus | null;
-      if (!status) return;
-      grouped[status].push(spec);
-    });
-
-    return grouped;
-  }, [specs]);
-
-  const handleDragStart = (spec: Spec, e: DragEvent<HTMLDivElement>) => {
-    setDraggingId(spec.specName);
-    e.dataTransfer.effectAllowed = 'move';
-    // Set drag image or data if needed
-  };
-
-  const handleDragOver = (status: SpecStatus, e: DragEvent<HTMLDivElement>) => {
-    e.preventDefault();
-    e.dataTransfer.dropEffect = 'move';
-    if (activeDropZone !== status) {
-      setActiveDropZone(status);
-    }
-  };
-
-  const handleDrop = (status: SpecStatus, e: DragEvent<HTMLDivElement>) => {
-    e.preventDefault();
-    setActiveDropZone(null);
-
-    if (draggingId) {
-      const spec = specs.find(s => s.specName === draggingId);
-      if (spec && spec.status !== status) {
-        onStatusChange(spec, status);
-      }
-      setDraggingId(null);
-    }
-  };
-
-  return (
-    <div className="flex flex-col md:flex-row gap-3 sm:gap-4 md:gap-6 h-full pb-2 md:snap-x md:snap-mandatory overflow-y-auto md:overflow-y-hidden md:overflow-x-auto">
-      {columns.map(status => {
-        const config = STATUS_CONFIG[status];
-        const statusSpecs = specsByStatus[status] || [];
-        const Icon = config.icon;
-        const isDropActive = activeDropZone === status;
-
-        return (
-          <div
-            key={status}
-            className={cn(
-              "flex-shrink-0 w-80 flex flex-col rounded-lg bg-secondary/30 border border-transparent transition-colors",
-              isDropActive && "bg-secondary/60 border-primary/50 ring-2 ring-primary/20"
-            )}
-            onDragOver={(e) => handleDragOver(status, e)}
-            onDrop={(e) => handleDrop(status, e)}
-          >
-            {/* Column Header */}
-            <div className={cn(
-              "p-3 flex items-center justify-between border-b sticky top-0 z-5",
-              config.borderClass,
-              config.bgClass,
-              "rounded-t-lg"
-            )}>
-              <div className="flex items-center gap-2">
-                <Icon className={cn("w-4 h-4", config.colorClass)} />
-                <span className={cn("font-medium text-sm", config.colorClass)}>
-                  {t(config.titleKey)}
-                </span>
-                <span className="text-xs px-2 py-0.5 bg-background/50 rounded-full text-muted-foreground">
-                  {statusSpecs.length}
-                </span>
-              </div>
-            </div>
-
-            {/* Column Content */}
-            <div className="flex-1 p-2 overflow-y-auto">
-              <div className="space-y-2">
-                {statusSpecs.map(spec => (
-                  <div
-                    key={spec.specName}
-                    draggable
-                    onDragStart={(e) => handleDragStart(spec, e)}
-                    className={cn(
-                      "bg-background p-4 rounded-xl border shadow-sm cursor-move hover:border-primary/50 transition-all group/card",
-                      draggingId === spec.specName && "opacity-50"
-                    )}
-                  >
-                    <Link to={`${basePath}/specs/${spec.specName}`} className="select-none h-full flex flex-col">
-                      {/* Top: #ID */}
-                      <div className="text-xs text-muted-foreground font-mono mb-1">
-                        #{spec.specNumber || spec.specName.split('-')[0].replace(/^0+/, '')}
-                      </div>
-
-                      {/* Middle: Title & Filename */}
-                      <div className="space-y-1.5 mb-4 flex-1">
-                        <h4 className="font-semibold text-base leading-snug group-hover/card:text-primary transition-colors">
-                          {spec.title || spec.specName}
-                        </h4>
-                        <div className="text-xs text-muted-foreground font-mono truncate">
-                          {spec.specName}
-                        </div>
-                      </div>
-
-                      {/* Bottom: Priority & Tags */}
-                      <div className="flex items-center justify-between gap-2 mt-auto">
-                        {spec.priority && (
-                          <PriorityBadge priority={spec.priority} className="h-6 px-2.5 rounded-md" />
-                        )}
-
-                        {spec.tags && spec.tags.length > 0 && (
-                          <div className="flex flex-wrap gap-1.5 justify-end ml-auto">
-                            {spec.tags.slice(0, 2).map((tag: string) => (
-                              <span key={tag} className="text-[10px] px-2 py-0.5 bg-secondary/30 border border-border/50 rounded-md text-muted-foreground font-mono">
-                                {tag}
-                              </span>
-                            ))}
-                            {spec.tags.length > 2 && (
-                              <span className="text-[10px] px-2 py-0.5 bg-secondary/30 border border-border/50 rounded-md text-muted-foreground font-mono">
-                                +{spec.tags.length - 2}
-                              </span>
-                            )}
-                          </div>
-                        )}
-                      </div>
-                    </Link>
-                  </div>
-                ))}
-              </div>
-            </div>
-          </div>
-        );
-      })}
-    </div>
-  );
-}

package/src/components/specs/ListView.tsx

@@ -1,62 +0,0 @@
-import { Link } from 'react-router-dom';
-import type { Spec } from '../../types/api';
-import { StatusBadge } from '../StatusBadge';
-import { PriorityBadge } from '../PriorityBadge';
-import { useTranslation } from 'react-i18next';
-
-interface ListViewProps {
-  specs: Spec[];
-  basePath?: string;
-}
-
-export function ListView({ specs, basePath = '/projects/default' }: ListViewProps) {
-  const { t } = useTranslation('common');
-
-  if (specs.length === 0) {
-    return (
-      <div className="text-center py-12 text-muted-foreground border rounded-lg bg-secondary/10">
-        {t('specsPage.list.empty')}
-      </div>
-    );
-  }
-
-  return (
-    <div className="h-full overflow-y-auto space-y-2">
-      {specs.map((spec) => (
-        <Link
-          key={spec.specName}
-          to={`${basePath}/specs/${spec.specName}`}
-          className="block p-4 border rounded-lg hover:bg-secondary/50 transition-colors bg-background"
-        >
-          <div className="flex items-start justify-between gap-4">
-            <div className="flex-1 min-w-0">
-              <div className="flex items-center gap-2 mb-1">
-                <span className="text-xs font-mono text-muted-foreground bg-secondary px-1.5 py-0.5 rounded">
-                  {spec.specName.split('-')[0]}
-                </span>
-                <h3 className="font-medium truncate">{spec.title}</h3>
-              </div>
-              <p className="text-sm text-muted-foreground truncate">{spec.specName}</p>
-            </div>
-            <div className="flex gap-2 items-center flex-shrink-0">
-              {spec.status && <StatusBadge status={spec.status} />}
-              {spec.priority && <PriorityBadge priority={spec.priority} />}
-            </div>
-          </div>
-          {spec.tags && spec.tags.length > 0 && (
-            <div className="flex gap-2 mt-3 flex-wrap">
-              {spec.tags.map((tag: string) => (
-                <span
-                  key={tag}
-                  className="text-xs px-2 py-0.5 bg-secondary rounded text-secondary-foreground"
-                >
-                  {tag}
-                </span>
-              ))}
-            </div>
-          )}
-        </Link>
-      ))}
-    </div>
-  );
-}

package/src/components/specs/SpecsFilters.tsx

@@ -1,190 +0,0 @@
-import { Search, Filter, X, Clock, PlayCircle, CheckCircle2, Archive, AlertCircle, ArrowUp, Minus, ArrowDown } from 'lucide-react';
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-  Input,
-  Button,
-} from '@leanspec/ui-components';
-import { useTranslation } from 'react-i18next';
-
-interface SpecsFiltersProps {
-  searchQuery: string;
-  onSearchChange: (query: string) => void;
-  statusFilter: string;
-  onStatusFilterChange: (status: string) => void;
-  priorityFilter: string;
-  onPriorityFilterChange: (priority: string) => void;
-  tagFilter: string;
-  onTagFilterChange: (tag: string) => void;
-  sortBy: string;
-  onSortByChange: (sort: string) => void;
-  uniqueStatuses: string[];
-  uniquePriorities: string[];
-  uniqueTags: string[];
-  onClearFilters: () => void;
-  totalSpecs: number;
-  filteredCount: number;
-}
-
-export function SpecsFilters({
-  searchQuery,
-  onSearchChange,
-  statusFilter,
-  onStatusFilterChange,
-  priorityFilter,
-  onPriorityFilterChange,
-  tagFilter,
-  onTagFilterChange,
-  sortBy,
-  onSortByChange,
-  uniqueStatuses,
-  uniquePriorities,
-  uniqueTags,
-  onClearFilters,
-  totalSpecs,
-  filteredCount,
-}: SpecsFiltersProps) {
-  const { t } = useTranslation('common');
-
-  // Status icons mapping
-  const statusIcons: Record<string, React.ComponentType<{ className?: string }>> = {
-    planned: Clock,
-    'in-progress': PlayCircle,
-    complete: CheckCircle2,
-    archived: Archive,
-  };
-
-  // Priority icons mapping
-  const priorityIcons: Record<string, React.ComponentType<{ className?: string }>> = {
-    critical: AlertCircle,
-    high: ArrowUp,
-    medium: Minus,
-    low: ArrowDown,
-  };
-
-  const statusKeyMap: Record<string, `status.${string}`> = {
-    planned: 'status.planned',
-    'in-progress': 'status.inProgress',
-    complete: 'status.complete',
-    archived: 'status.archived',
-  };
-  const priorityKeyMap: Record<string, `priority.${string}`> = {
-    critical: 'priority.critical',
-    high: 'priority.high',
-    medium: 'priority.medium',
-    low: 'priority.low',
-  };
-
-  const formatStatus = (status: string) => statusKeyMap[status] ? t(statusKeyMap[status]) : status;
-  const formatPriority = (priority: string) => priorityKeyMap[priority] ? t(priorityKeyMap[priority]) : priority;
-  const hasActiveFilters = searchQuery || statusFilter !== 'all' || priorityFilter !== 'all' || tagFilter !== 'all';
-
-  return (
-    <div className="space-y-4">
-      {/* Search Bar */}
-      <div className="relative">
-        <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-muted-foreground" />
-        <Input
-          type="text"
-          placeholder={t('specsPage.searchPlaceholder')}
-          value={searchQuery}
-          onChange={(e) => onSearchChange(e.target.value)}
-          className="w-full pl-10 pr-4 py-2"
-        />
-      </div>
-
-      {/* Filters Row */}
-      <div className="flex flex-wrap gap-3 items-center justify-between">
-        <div className="flex flex-wrap gap-3 items-center">
-          <div className="flex items-center gap-2 text-muted-foreground">
-            <Filter className="w-4 h-4" />
-            <span className="text-sm font-medium">{t('specsNavSidebar.filtersLabel')}</span>
-          </div>
-
-          <Select value={statusFilter} onValueChange={onStatusFilterChange}>
-            <SelectTrigger className="w-[140px]">
-              <SelectValue placeholder={t('specsPage.filters.statusAll')} />
-            </SelectTrigger>
-            <SelectContent>
-              <SelectItem value="all">{t('specsPage.filters.statusAll')}</SelectItem>
-              {uniqueStatuses.map(status => {
-                const StatusIcon = statusIcons[status];
-                return (
-                  <SelectItem key={status} value={status}>
-                    <div className="flex items-center gap-2">
-                      {StatusIcon && <StatusIcon className="h-4 w-4" />}
-                      <span>{formatStatus(status)}</span>
-                    </div>
-                  </SelectItem>
-                );
-              })}
-            </SelectContent>
-          </Select>
-
-          <Select value={priorityFilter} onValueChange={onPriorityFilterChange}>
-            <SelectTrigger className="w-[140px]">
-              <SelectValue placeholder={t('specsPage.filters.priorityAll')} />
-            </SelectTrigger>
-            <SelectContent>
-              <SelectItem value="all">{t('specsPage.filters.priorityAll')}</SelectItem>
-              {uniquePriorities.map(priority => {
-                const PriorityIcon = priorityIcons[priority];
-                return (
-                  <SelectItem key={priority} value={priority}>
-                    <div className="flex items-center gap-2">
-                      {PriorityIcon && <PriorityIcon className="h-4 w-4" />}
-                      <span>{formatPriority(priority)}</span>
-                    </div>
-                  </SelectItem>
-                );
-              })}
-            </SelectContent>
-          </Select>
-
-          <Select value={tagFilter} onValueChange={onTagFilterChange}>
-            <SelectTrigger className="w-[140px]">
-              <SelectValue placeholder={t('specsNavSidebar.select.tag.all')} />
-            </SelectTrigger>
-            <SelectContent>
-              <SelectItem value="all">{t('specsNavSidebar.select.tag.all')}</SelectItem>
-              {uniqueTags.map(tag => (
-                <SelectItem key={tag} value={tag}>{tag}</SelectItem>
-              ))}
-            </SelectContent>
-          </Select>
-
-          <Select value={sortBy} onValueChange={onSortByChange}>
-            <SelectTrigger className="w-[160px]">
-              <SelectValue placeholder={t('specsPage.filters.sort')} />
-            </SelectTrigger>
-            <SelectContent>
-              <SelectItem value="id-desc">{t('specsPage.filters.sortOptions.id-desc')}</SelectItem>
-              <SelectItem value="id-asc">{t('specsPage.filters.sortOptions.id-asc')}</SelectItem>
-              <SelectItem value="updated-desc">{t('specsPage.filters.sortOptions.updated-desc')}</SelectItem>
-              <SelectItem value="title-asc">{t('specsPage.filters.sortOptions.title-asc')}</SelectItem>
-            </SelectContent>
-          </Select>
-
-          {hasActiveFilters && (
-            <Button
-              onClick={onClearFilters}
-              variant="ghost"
-              size="sm"
-              className="h-8 gap-1"
-            >
-              <X className="w-3 h-3" />
-              {t('specsNavSidebar.clearFilters')}
-            </Button>
-          )}
-        </div>
-
-        <div className="text-sm text-muted-foreground">
-          {t('specsPage.filters.filteredCount', { filtered: filteredCount, total: totalSpecs })}
-        </div>
-      </div>
-    </div>
-  );
-}