@leanspec/ui 0.2.13 → 0.2.15-dev.21022397862

package/src/components/dashboard/ActivityItem.tsx

@@ -1,36 +0,0 @@
-import { Link } from 'react-router-dom';
-import type { DashboardSpec } from './SpecListItem';
-import { formatRelativeTime } from '../../lib/date-utils';
-import { useTranslation } from 'react-i18next';
-
-interface ActivityItemProps {
-  spec: DashboardSpec;
-  action: string;
-  time: Date | string | null;
-  basePath?: string;
-}
-
-export function ActivityItem({ spec, action, time, basePath = '/projects/default' }: ActivityItemProps) {
-  const displayTitle = spec.title || spec.specName;
-  const specUrl = `${basePath}/specs/${spec.specName}`;
-  const { i18n } = useTranslation('common');
-  const relativeTime = formatRelativeTime(time, i18n.language);
-
-  return (
-    <div className="flex items-start gap-3 py-2">
-      <div className="w-2 h-2 rounded-full bg-primary mt-2 shrink-0" />
-      <div className="flex-1 min-w-0">
-        <p className="text-sm">
-          <Link to={specUrl} className="font-medium hover:underline" title={spec.specName}>
-            {spec.specNumber && `#${spec.specNumber.toString().padStart(3, '0')} `}
-            {displayTitle}
-          </Link>{' '}
-          <span className="text-muted-foreground">{action}</span>
-        </p>
-        <p className="text-xs text-muted-foreground mt-0.5">
-          {relativeTime}
-        </p>
-      </div>
-    </div>
-  );
-}

package/src/components/dashboard/DashboardClient.tsx

@@ -1,218 +0,0 @@
-import { Link } from 'react-router-dom';
-import {
-  Button,
-  Card,
-  CardContent,
-  CardHeader,
-  CardTitle,
-} from '@leanspec/ui-components';
-import {
-  Calendar,
-  CheckCircle2,
-  Clock,
-  FileText,
-  List as ListIcon,
-  PlayCircle,
-  TrendingUp,
-} from 'lucide-react';
-import type { Stats } from '../../types/api';
-import { StatCard } from './StatCard';
-import { SpecListItem, type DashboardSpec } from './SpecListItem';
-import { ActivityItem } from './ActivityItem';
-import { useTranslation } from 'react-i18next';
-
-interface DashboardClientProps {
-  specs: DashboardSpec[];
-  stats: Stats;
-  projectColor?: string;
-  projectName?: string;
-  basePath?: string;
-}
-
-export function DashboardClient({ specs, stats, projectColor, projectName, basePath = '/projects/default' }: DashboardClientProps) {
-  const { t } = useTranslation('common');
-  const inProgressSpecs = specs
-    .filter((spec) => spec.status === 'in-progress')
-    .sort((a, b) => (b.specNumber || 0) - (a.specNumber || 0))
-    .slice(0, 5);
-
-  const plannedSpecs = specs
-    .filter((spec) => spec.status === 'planned')
-    .sort((a, b) => (b.specNumber || 0) - (a.specNumber || 0))
-    .slice(0, 5);
-
-  const recentlyAdded = specs
-    .slice()
-    .sort((a, b) => {
-      if (!a.createdAt) return 1;
-      if (!b.createdAt) return -1;
-      const aTime = new Date(a.createdAt).getTime();
-      const bTime = new Date(b.createdAt).getTime();
-      return bTime - aTime;
-    })
-    .slice(0, 5);
-
-  const recentActivity = specs
-    .filter((spec) => spec.updatedAt)
-    .sort((a, b) => {
-      if (!a.updatedAt) return 1;
-      if (!b.updatedAt) return -1;
-      const aTime = new Date(a.updatedAt).getTime();
-      const bTime = new Date(b.updatedAt).getTime();
-      return bTime - aTime;
-    })
-    .slice(0, 10);
-
-  const statusCounts = stats.specsByStatus.reduce<Record<string, number>>((acc: Record<string, number>, entry: { status: string; count: number }) => {
-    acc[entry.status] = entry.count;
-    return acc;
-  }, {});
-
-  const completeCount = statusCounts['complete'] || 0;
-  const completionRate = stats.completionRate ?? 0;
-
-  return (
-    <div className="min-h-screen bg-background p-4 sm:p-8">
-      <div className="max-w-7xl mx-auto space-y-6 sm:space-y-8">
-        <div>
-          <div className="flex items-center gap-3">
-            {projectColor && (
-              <div
-                className="h-8 w-2 rounded-full shrink-0"
-                style={{ backgroundColor: projectColor }}
-              />
-            )}
-            <div>
-              <h1 className="text-3xl sm:text-4xl font-bold tracking-tight">{t('dashboard.title')}</h1>
-              <p className="text-muted-foreground mt-2">
-                {projectName
-                  ? t('dashboard.subtitleWithProject', { projectName })
-                  : t('dashboard.subtitle')}
-              </p>
-            </div>
-          </div>
-        </div>
-
-        <div className="grid grid-cols-2 lg:grid-cols-4 gap-3 sm:gap-4">
-          <StatCard
-            title={t('dashboard.cards.total')}
-            value={stats.totalSpecs}
-            icon={FileText}
-            iconColor="text-blue-600"
-            gradientFrom="from-blue-500/10"
-          />
-          <StatCard
-            title={t('dashboard.cards.planned')}
-            value={statusCounts['planned'] || 0}
-            icon={Clock}
-            iconColor="text-purple-600"
-            gradientFrom="from-purple-500/10"
-          />
-          <StatCard
-            title={t('dashboard.cards.inProgress')}
-            value={statusCounts['in-progress'] || 0}
-            icon={PlayCircle}
-            iconColor="text-orange-600"
-            gradientFrom="from-orange-500/10"
-          />
-          <StatCard
-            title={t('dashboard.cards.completed')}
-            value={completeCount}
-            icon={CheckCircle2}
-            iconColor="text-green-600"
-            gradientFrom="from-green-500/10"
-            subtext={
-              <span className="flex items-center gap-1">
-                <TrendingUp className="h-3 w-3" />
-                {t('dashboard.cards.completionRate', { rate: completionRate.toFixed(1) })}
-              </span>
-            }
-          />
-        </div>
-
-        <div className="grid grid-cols-1 lg:grid-cols-3 gap-4 sm:gap-6">
-          <Card>
-            <CardHeader>
-              <CardTitle className="text-lg flex items-center gap-2">
-                <Calendar className="h-5 w-5 text-blue-600" />
-                {t('dashboard.recentlyAdded')}
-              </CardTitle>
-            </CardHeader>
-            <CardContent className="space-y-1">
-              {recentlyAdded.slice(0, 5).map((spec) => (
-                <SpecListItem key={spec.id} spec={spec} basePath={basePath} />
-              ))}
-            </CardContent>
-          </Card>
-
-          <Card>
-            <CardHeader>
-              <CardTitle className="text-lg flex items-center gap-2">
-                <Clock className="h-5 w-5 text-purple-600" />
-                {t('dashboard.plannedSection', { count: plannedSpecs.length })}
-              </CardTitle>
-            </CardHeader>
-            <CardContent className="space-y-1">
-              {plannedSpecs.length > 0 ? (
-                plannedSpecs.map((spec) => <SpecListItem key={spec.id} spec={spec} basePath={basePath} />)
-              ) : (
-                <p className="text-sm text-muted-foreground py-4 text-center">{t('dashboard.noPlanned')}</p>
-              )}
-            </CardContent>
-          </Card>
-
-          <Card>
-            <CardHeader>
-              <CardTitle className="text-lg flex items-center gap-2">
-                <PlayCircle className="h-5 w-5 text-orange-600" />
-                {t('dashboard.inProgressSection', { count: inProgressSpecs.length })}
-              </CardTitle>
-            </CardHeader>
-            <CardContent className="space-y-1">
-              {inProgressSpecs.length > 0 ? (
-                inProgressSpecs.map((spec) => <SpecListItem key={spec.id} spec={spec} basePath={basePath} />)
-              ) : (
-                <p className="text-sm text-muted-foreground py-4 text-center">{t('dashboard.noInProgress')}</p>
-              )}
-            </CardContent>
-          </Card>
-        </div>
-
-        <Card>
-          <CardHeader>
-            <CardTitle className="text-lg">{t('dashboard.recentActivity')}</CardTitle>
-          </CardHeader>
-          <CardContent>
-            <div className="border-l-2 border-muted pl-4 space-y-1">
-              {recentActivity.map((spec) => (
-                <ActivityItem key={spec.id} spec={spec} action={t('dashboard.actionUpdated')} time={spec.updatedAt ?? null} basePath={basePath} />
-              ))}
-            </div>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle className="text-lg">{t('dashboard.quickActions')}</CardTitle>
-          </CardHeader>
-          <CardContent>
-            <div className="flex flex-wrap gap-3">
-              <Button asChild>
-                <Link to={`${basePath}/specs`}>
-                  <ListIcon className="h-4 w-4 mr-2" />
-                  {t('dashboard.viewAllSpecs')}
-                </Link>
-              </Button>
-              <Button variant="outline" asChild>
-                <Link to={`${basePath}/stats`}>
-                  <TrendingUp className="h-4 w-4 mr-2" />
-                  {t('dashboard.viewStats')}
-                </Link>
-              </Button>
-            </div>
-          </CardContent>
-        </Card>
-      </div>
-    </div>
-  );
-}

package/src/components/dashboard/SpecListItem.tsx

@@ -1,58 +0,0 @@
-import { Link } from 'react-router-dom';
-import { Badge } from '@leanspec/ui-components';
-import { StatusBadge } from '../StatusBadge';
-import { PriorityBadge } from '../PriorityBadge';
-import type { Spec } from '../../types/api';
-
-export type DashboardSpec = Spec;
-
-interface SpecListItemProps {
-  spec: DashboardSpec;
-  basePath?: string;
-}
-
-export function SpecListItem({ spec, basePath = '/projects/default' }: SpecListItemProps) {
-  const displayTitle = spec.title || spec.specName;
-  const specUrl = `${basePath}/specs/${spec.specName}`;
-
-  return (
-    <Link
-      to={specUrl}
-      className="block p-3 rounded-lg hover:bg-accent transition-colors"
-      title={spec.specName}
-    >
-      <div className="flex items-start justify-between gap-2">
-        <div className="flex-1 min-w-0">
-          <div className="flex items-center gap-2 mb-1">
-            {spec.specNumber && (
-              <span className="text-sm font-mono text-muted-foreground shrink-0">
-                #{spec.specNumber.toString().padStart(3, '0')}
-              </span>
-            )}
-            <h4 className="text-sm font-medium truncate">
-              {displayTitle}
-            </h4>
-          </div>
-          {displayTitle !== spec.specName && (
-            <div className="text-xs text-muted-foreground mb-1">
-              {spec.specName}
-            </div>
-          )}
-          {spec.tags && spec.tags.length > 0 && (
-            <div className="flex flex-wrap gap-1">
-              {spec.tags.slice(0, 3).map((tag: string) => (
-                <Badge key={tag} variant="secondary" className="text-xs">
-                  {tag}
-                </Badge>
-              ))}
-            </div>
-          )}
-        </div>
-        <div className="flex flex-col items-end gap-1 shrink-0">
-          {spec.status && <StatusBadge status={spec.status} className="text-[11px]" />}
-          {spec.priority && <PriorityBadge priority={spec.priority} className="text-[11px]" />}
-        </div>
-      </div>
-    </Link>
-  );
-}

package/src/components/dashboard/StatCard.tsx

@@ -1,52 +0,0 @@
-import type { LucideIcon } from 'lucide-react';
-import { Card, CardContent, CardHeader, CardTitle } from '@leanspec/ui-components';
-import { cn } from '../../lib/utils';
-
-interface StatCardProps {
-  title: string;
-  value: number | string;
-  icon: LucideIcon;
-  iconColor?: string;
-  gradientFrom?: string;
-  subtext?: React.ReactNode;
-  className?: string;
-}
-
-export function StatCard({
-  title,
-  value,
-  icon: Icon,
-  iconColor = 'text-primary',
-  gradientFrom,
-  subtext,
-  className,
-}: StatCardProps) {
-  return (
-    <Card className={cn('relative overflow-hidden', className)}>
-      {gradientFrom && (
-        <div
-          className={cn(
-            'absolute inset-0 bg-gradient-to-br to-transparent',
-            gradientFrom
-          )}
-        />
-      )}
-      <CardHeader className="relative pb-3">
-        <div className="flex items-center justify-between">
-          <CardTitle className="text-sm font-medium text-muted-foreground">
-            {title}
-          </CardTitle>
-          <Icon className={cn('h-5 w-5', iconColor)} />
-        </div>
-      </CardHeader>
-      <CardContent className="relative">
-        <div className="text-3xl font-bold">{value}</div>
-        {subtext && (
-          <div className="text-xs text-muted-foreground mt-1">
-            {subtext}
-          </div>
-        )}
-      </CardContent>
-    </Card>
-  );
-}

package/src/components/dependencies/SpecNode.tsx

@@ -1,128 +0,0 @@
-import * as React from 'react';
-import { Handle, Position, type NodeProps } from 'reactflow';
-import { Clock, PlayCircle, CheckCircle2, Archive, AlertCircle, ArrowUp, Minus, ArrowDown } from 'lucide-react';
-import { useTranslation } from 'react-i18next';
-import { cn } from '../../lib/utils';
-import type { SpecNodeData } from './types';
-import {
-  NODE_WIDTH,
-  COMPACT_NODE_WIDTH,
-  toneClasses,
-} from './constants';
-
-const statusIcons = {
-  'planned': Clock,
-  'in-progress': PlayCircle,
-  'complete': CheckCircle2,
-  'archived': Archive,
-};
-
-const priorityIcons = {
-  'critical': AlertCircle,
-  'high': ArrowUp,
-  'medium': Minus,
-  'low': ArrowDown,
-};
-
-export const SpecNode = React.memo(function SpecNode({ data }: NodeProps<SpecNodeData>) {
-  const { t } = useTranslation();
-  const isCompact = data.isCompact;
-  const isSecondary = data.isSecondary;
-  const depthOpacity =
-    data.connectionDepth === 0
-      ? 1
-      : data.connectionDepth === 1
-      ? 0.95
-      : data.connectionDepth === 2
-      ? 0.7
-      : data.isDimmed
-      ? 0.15
-      : 1;
-
-  // Secondary nodes (shown due to critical path) are slightly transparent
-  const baseOpacity = isSecondary ? 0.65 : 1;
-
-  const StatusIcon = statusIcons[data.tone as keyof typeof statusIcons] || Clock;
-  const PriorityIcon = priorityIcons[data.priority as keyof typeof priorityIcons] || Minus;
-
-  return (
-    <div
-      className={cn(
-        'flex flex-col rounded-lg shadow-lg transition-all duration-200',
-        toneClasses[data.tone],
-        data.interactive && 'cursor-pointer hover:scale-105 hover:shadow-xl hover:border-gray-400 dark:hover:border-white/50',
-        data.isFocused && 'ring-2 ring-gray-800 dark:ring-white ring-offset-2 ring-offset-background scale-110 z-50',
-        data.connectionDepth === 1 && 'ring-1 ring-gray-400 dark:ring-white/40',
-        isCompact ? 'px-2 py-1 gap-0.5' : 'px-2.5 py-1.5 gap-0.5',
-        isSecondary ? 'border border-dashed' : 'border-2'
-      )}
-      style={{
-        width: isCompact ? COMPACT_NODE_WIDTH : NODE_WIDTH,
-        opacity: depthOpacity * baseOpacity,
-        transform: data.isDimmed ? 'scale(0.9)' : undefined,
-      }}
-    >
-      <Handle type="target" position={Position.Left} className="opacity-0" />
-      <div className="flex items-center justify-between gap-1">
-        <span className={cn('font-bold', isCompact ? 'text-[9px]' : 'text-[10px]')}>
-          #{data.number.toString().padStart(3, '0')}
-        </span>
-        <div className="flex items-center gap-0.5">
-          {/* Status icon */}
-          <div
-            className={cn(
-              'rounded flex items-center justify-center',
-              isCompact ? 'p-0.5' : 'p-1',
-              data.tone === 'planned' && 'bg-blue-500/30',
-              data.tone === 'in-progress' && 'bg-orange-500/30',
-              data.tone === 'complete' && 'bg-green-500/30',
-              data.tone === 'archived' && 'bg-gray-500/30'
-            )}
-            title={t(`status.${data.tone}`)}
-          >
-            <StatusIcon className={cn(isCompact ? 'h-2 w-2' : 'h-2.5 w-2.5')} />
-          </div>
-          {/* Priority icon */}
-          <div
-            className={cn(
-              'rounded flex items-center justify-center',
-              isCompact ? 'p-0.5' : 'p-1',
-              data.priority === 'critical' && 'bg-red-500/30',
-              data.priority === 'high' && 'bg-orange-500/30',
-              data.priority === 'medium' && 'bg-blue-500/30',
-              data.priority === 'low' && 'bg-gray-500/30'
-            )}
-            title={data.priority ? t(`priority.${data.priority}`) : undefined}
-          >
-            <PriorityIcon className={cn(isCompact ? 'h-2 w-2' : 'h-2.5 w-2.5')} />
-          </div>
-          {/* Level indicator */}
-          {data.connectionDepth !== undefined && data.connectionDepth > 0 && (
-            <span
-              className={cn(
-                'font-medium rounded bg-muted/50 text-muted-foreground',
-                isCompact ? 'text-[7px] px-0.5 py-0.5' : 'text-[8px] px-1 py-0.5'
-              )}
-              title={t('dependenciesPage.graph.levelTitle', { depth: data.connectionDepth })}
-            >
-              {t('dependenciesPage.graph.levelBadge', { depth: data.connectionDepth })}
-            </span>
-          )}
-        </div>
-      </div>
-      <span
-        className={cn('font-medium leading-tight truncate', isCompact ? 'text-[8px]' : 'text-[10px]')}
-        title={data.label}
-      >
-        {isCompact ? data.shortLabel : data.label}
-      </span>
-      <Handle type="source" position={Position.Right} className="opacity-0" />
-    </div>
-  );
-});
-
-SpecNode.displayName = 'SpecNode';
-
-export const nodeTypes = {
-  specNode: SpecNode,
-};