@leanspec/ui 0.2.14 → 0.2.15-dev.21025278490

package/src/components/shared/ColorPicker.tsx

@@ -1,68 +0,0 @@
-import { useState } from 'react';
-import { Button, Popover, PopoverContent, PopoverTrigger } from '@leanspec/ui-components';
-import { cn } from '../../lib/utils';
-import { useTranslation } from 'react-i18next';
-
-const PROJECT_COLORS = [
-  '#ef4444',
-  '#f97316',
-  '#eab308',
-  '#22c55e',
-  '#14b8a6',
-  '#3b82f6',
-  '#6366f1',
-  '#8b5cf6',
-  '#d946ef',
-  '#ec4899',
-  '#6b7280',
-  '#78716c',
-];
-
-interface ColorPickerProps {
-  value?: string | null;
-  onChange: (color: string) => void;
-  disabled?: boolean;
-}
-
-export function ColorPicker({ value, onChange, disabled }: ColorPickerProps) {
-  const [open, setOpen] = useState(false);
-  const { t } = useTranslation('common');
-
-  return (
-    <Popover open={open} onOpenChange={setOpen}>
-      <PopoverTrigger asChild>
-        <Button
-          variant="outline"
-          size="sm"
-          className="h-8 w-8 p-0"
-          disabled={disabled}
-          aria-label={t('colorPicker.pickColor')}
-        >
-          <div
-            className="h-4 w-4 rounded-full border"
-            style={{ backgroundColor: value || '#666' }}
-          />
-        </Button>
-      </PopoverTrigger>
-      <PopoverContent className="w-[200px] p-3" align="start">
-        <div className="grid grid-cols-6 gap-2">
-          {PROJECT_COLORS.map((color) => (
-            <button
-              key={color}
-              className={cn(
-                'h-6 w-6 rounded-full border-2 transition-transform hover:scale-110',
-                value === color ? 'border-primary' : 'border-transparent'
-              )}
-              style={{ backgroundColor: color }}
-              onClick={() => {
-                onChange(color);
-                setOpen(false);
-              }}
-              aria-label={t('colorPicker.selectColor', { color })}
-            />
-          ))}
-        </div>
-      </PopoverContent>
-    </Popover>
-  );
-}

package/src/components/shared/EmptyState.tsx

@@ -1,35 +0,0 @@
-import type { LucideIcon } from 'lucide-react';
-import { Card, CardContent, Button } from '@leanspec/ui-components';
-import { cn } from '../../lib/utils';
-import type { ReactNode } from 'react';
-
-interface EmptyStateProps {
-  icon: LucideIcon;
-  title: string;
-  description?: string;
-  actions?: ReactNode;
-  className?: string;
-  tone?: 'muted' | 'error';
-}
-
-export function EmptyState({ icon: Icon, title, description, actions, className, tone = 'muted' }: EmptyStateProps) {
-  return (
-    <Card className={cn('border-dashed', className)}>
-      <CardContent className="py-10 text-center space-y-3">
-        <div className="flex justify-center">
-          <Button
-            size="icon"
-            variant={tone === 'error' ? 'destructive' : 'secondary'}
-            className="h-10 w-10 rounded-full"
-            aria-label={title}
-          >
-            <Icon className="h-5 w-5" />
-          </Button>
-        </div>
-        <div className="text-lg font-semibold">{title}</div>
-        {description && <p className="text-sm text-muted-foreground max-w-xl mx-auto">{description}</p>}
-        {actions && <div className="flex justify-center gap-2 flex-wrap pt-1">{actions}</div>}
-      </CardContent>
-    </Card>
-  );
-}

package/src/components/shared/ErrorBoundary.tsx

@@ -1,79 +0,0 @@
-import { type ReactNode } from 'react';
-import { ErrorBoundary as ReactErrorBoundary } from 'react-error-boundary';
-import { AlertTriangle } from 'lucide-react';
-import { Button } from '@leanspec/ui-components';
-import { EmptyState } from './EmptyState';
-import i18n from '../../lib/i18n';
-
-interface Props {
-  children: ReactNode;
-  title?: string;
-  message?: string;
-  onReset?: () => void;
-  /**
-   * When this value changes, the boundary resets its error state.
-   * This lets us recover on navigation without remounting the whole subtree.
-   */
-  resetKey?: unknown;
-}
-
-interface FallbackProps {
-  error: Error;
-  resetErrorBoundary: () => void;
-  title?: string;
-  message?: string;
-}
-
-/**
- * ErrorBoundary wrapper using react-error-boundary library.
- * Provides a hook-friendly API while using a class component internally.
- */
-function ErrorFallback({ error, resetErrorBoundary, title, message }: FallbackProps) {
-  // Use i18n.t directly with fallbacks to avoid hook issues
-  const fallbackTitle = i18n.t?.('pageError.title', { ns: 'errors', defaultValue: 'Something went wrong' }) || 'Something went wrong';
-  const fallbackMessage = i18n.t?.('pageError.description', { ns: 'errors', defaultValue: 'An unexpected error occurred. Please try again.' }) || 'An unexpected error occurred. Please try again.';
-  const retryLabel = i18n.t?.('actions.retry', { ns: 'common', defaultValue: 'Try again' }) || 'Try again';
-  const reloadLabel = i18n.t?.('actions.refresh', { ns: 'common', defaultValue: 'Reload' }) || 'Reload';
-
-  return (
-    <EmptyState
-      icon={AlertTriangle}
-      title={title || fallbackTitle}
-      description={message || error?.message || fallbackMessage}
-      tone="error"
-      actions={(
-        <>
-          <Button size="sm" onClick={resetErrorBoundary}>
-            {retryLabel}
-          </Button>
-          <Button size="sm" variant="outline" onClick={() => window.location.reload()}>
-            {reloadLabel}
-          </Button>
-        </>
-      )}
-    />
-  );
-}
-
-export function ErrorBoundary({ children, title, message, onReset, resetKey }: Props) {
-  const handleReset = () => {
-    onReset?.();
-  };
-
-  const handleError = (error: Error, errorInfo: { componentStack?: string | null }) => {
-    console.error('UI error captured', error, errorInfo);
-  };
-
-  return (
-    <ReactErrorBoundary
-      FallbackComponent={(props) => (
-        <ErrorFallback {...props} title={title} message={message} />
-      )}
-      onReset={handleReset}
-      onError={handleError}
-      resetKeys={[resetKey]}
-    >
-      {children}
-    </ReactErrorBoundary>
-  );
-}

package/src/components/shared/PageHeader.tsx

@@ -1,23 +0,0 @@
-import type { ReactNode } from 'react';
-
-interface PageHeaderProps {
-  title: ReactNode;
-  description?: ReactNode;
-  actions?: ReactNode;
-}
-
-export function PageHeader({ title, description, actions }: PageHeaderProps) {
-  return (
-    <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
-      <div>
-        <h1 className="text-3xl sm:text-4xl font-bold tracking-tight">{title}</h1>
-        {description ? (
-          <p className="text-muted-foreground mt-2">{description}</p>
-        ) : null}
-      </div>
-      {actions ? (
-        <div className="flex flex-wrap items-center gap-2 sm:pt-1">{actions}</div>
-      ) : null}
-    </div>
-  );
-}

package/src/components/shared/PageTransition.tsx

@@ -1,40 +0,0 @@
-import { useEffect, useState, type ReactNode } from 'react';
-import { useLocation } from 'react-router-dom';
-import { cn } from '../../lib/utils';
-
-interface PageTransitionProps {
-  className?: string;
-  children: ReactNode;
-}
-
-export function PageTransition({ className, children }: PageTransitionProps) {
-  const location = useLocation();
-  const [visible, setVisible] = useState(false);
-
-  useEffect(() => {
-    let raf1 = 0;
-    let raf2 = 0;
-
-    raf1 = window.requestAnimationFrame(() => {
-      setVisible(false);
-      raf2 = window.requestAnimationFrame(() => setVisible(true));
-    });
-
-    return () => {
-      window.cancelAnimationFrame(raf1);
-      window.cancelAnimationFrame(raf2);
-    };
-  }, [location.pathname]);
-
-  return (
-    <div
-      className={cn(
-        className,
-        'transition-all duration-200 ease-out',
-        visible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-2'
-      )}
-    >
-      {children}
-    </div>
-  );
-}

package/src/components/shared/ProjectAvatar.tsx

@@ -1,107 +0,0 @@
-import * as React from 'react';
-import { Avatar, AvatarFallback, AvatarImage } from '@leanspec/ui-components';
-import { cn } from '../../lib/utils';
-
-interface ProjectAvatarProps {
-  name: string;
-  color?: string | null;
-  icon?: string;
-  size?: 'sm' | 'md' | 'lg' | 'xl';
-  className?: string;
-}
-
-const sizeClasses = {
-  sm: 'h-6 w-6 text-[10px]',
-  md: 'h-8 w-8 text-xs',
-  lg: 'h-10 w-10 text-sm',
-  xl: 'h-12 w-12 text-base',
-};
-
-function getInitials(name: string): string {
-  if (!name) return '??';
-
-  const words = name.trim().split(/\s+/);
-
-  if (words.length >= 2) {
-    return (words[0][0] + words[1][0]).toUpperCase();
-  }
-
-  const word = words[0];
-  return word.length >= 2 ? (word[0] + word[1]).toUpperCase() : word[0].toUpperCase();
-}
-
-function getContrastColor(hexColor?: string): string | undefined {
-  if (!hexColor) return undefined;
-
-  const hex = hexColor.replace('#', '');
-  const r = parseInt(hex.substring(0, 2), 16);
-  const g = parseInt(hex.substring(2, 4), 16);
-  const b = parseInt(hex.substring(4, 6), 16);
-  const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
-
-  return luminance > 0.5 ? '#000000' : '#ffffff';
-}
-
-const AVATAR_COLORS = [
-  '#ef4444', // red-500
-  '#f97316', // orange-500
-  '#f59e0b', // amber-500
-  '#84cc16', // lime-500
-  '#22c55e', // green-500
-  '#10b981', // emerald-500
-  '#06b6d4', // cyan-500
-  '#0ea5e9', // sky-500
-  '#3b82f6', // blue-500
-  '#6366f1', // indigo-500
-  '#8b5cf6', // violet-500
-  '#d946ef', // fuchsia-500
-  '#ec4899', // pink-500
-  '#f43f5e', // rose-500
-  '#78716c', // stone-500
-];
-
-export function getColorForName(name: string): string {
-  if (!name) return 'hsl(var(--primary))';
-
-  let hash = 0;
-  for (let i = 0; i < name.length; i++) {
-    hash = name.charCodeAt(i) + ((hash << 5) - hash);
-  }
-
-  const index = Math.abs(hash % AVATAR_COLORS.length);
-  return AVATAR_COLORS[index];
-}
-
-export function ProjectAvatar({
-  name,
-  color,
-  icon,
-  size = 'md',
-  className,
-}: ProjectAvatarProps) {
-  const initials = React.useMemo(() => getInitials(name), [name]);
-
-  const displayColor = React.useMemo(() => {
-    if (color) return color;
-    return getColorForName(name);
-  }, [color, name]);
-
-  const textColor = React.useMemo(() =>
-    getContrastColor(displayColor?.startsWith('#') ? displayColor : undefined),
-    [displayColor]);
-
-  return (
-    <Avatar className={cn(sizeClasses[size], className)}>
-      {icon && <AvatarImage src={icon} alt={name} />}
-      <AvatarFallback
-        className="font-semibold border"
-        style={{
-          backgroundColor: displayColor,
-          ...(textColor && { color: textColor }),
-        }}
-      >
-        {initials}
-      </AvatarFallback>
-    </Avatar>
-  );
-}

package/src/components/shared/Skeletons.tsx

@@ -1,184 +0,0 @@
-import { Card, CardContent, CardHeader, Skeleton } from '@leanspec/ui-components';
-
-export function DashboardSkeleton() {
-  return (
-    <div className="space-y-6">
-      <div className="space-y-2">
-        <Skeleton className="h-5 w-24" />
-        <Skeleton className="h-8 w-64" />
-      </div>
-
-      <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
-        {[...Array(4)].map((_, idx) => (
-          <Card key={idx} className="overflow-hidden">
-            <CardContent className="p-4 space-y-3">
-              <Skeleton className="h-4 w-28" />
-              <Skeleton className="h-8 w-20" />
-              <Skeleton className="h-3 w-16" />
-            </CardContent>
-          </Card>
-        ))}
-      </div>
-
-      <div className="grid gap-6 lg:grid-cols-2">
-        <Card>
-          <CardHeader className="pb-2">
-            <Skeleton className="h-5 w-32" />
-          </CardHeader>
-          <CardContent className="space-y-2">
-            {[...Array(5)].map((_, idx) => (
-              <div key={idx} className="space-y-2">
-                <Skeleton className="h-5 w-3/4" />
-                <Skeleton className="h-4 w-1/2" />
-              </div>
-            ))}
-          </CardContent>
-        </Card>
-        <Card>
-          <CardHeader className="pb-2">
-            <Skeleton className="h-5 w-28" />
-          </CardHeader>
-          <CardContent className="space-y-2">
-            {[...Array(4)].map((_, idx) => (
-              <div key={idx} className="space-y-2">
-                <Skeleton className="h-5 w-2/3" />
-                <Skeleton className="h-4 w-1/3" />
-              </div>
-            ))}
-          </CardContent>
-        </Card>
-      </div>
-    </div>
-  );
-}
-
-export function SpecListSkeleton() {
-  return (
-    <div className="space-y-4">
-      {[...Array(5)].map((_, i) => (
-        <Card key={i}>
-          <CardHeader className="pb-3">
-            <div className="flex items-start justify-between gap-4">
-              <div className="space-y-2 flex-1">
-                <Skeleton className="h-6 w-3/4" />
-                <Skeleton className="h-4 w-1/2" />
-              </div>
-              <Skeleton className="h-6 w-20" />
-            </div>
-          </CardHeader>
-          <CardContent>
-            <div className="flex items-center gap-2">
-              <Skeleton className="h-5 w-16" />
-              <Skeleton className="h-5 w-16" />
-              <Skeleton className="h-5 w-16" />
-            </div>
-          </CardContent>
-        </Card>
-      ))}
-    </div>
-  );
-}
-
-export function SpecDetailSkeleton() {
-  return (
-    <div className="container mx-auto py-8 px-4 max-w-6xl">
-      <div className="space-y-6">
-        <Skeleton className="h-5 w-48" />
-        <div className="space-y-3">
-          <Skeleton className="h-10 w-2/3" />
-          <Skeleton className="h-5 w-1/3" />
-        </div>
-        <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
-          {[...Array(4)].map((_, i) => (
-            <Card key={i}>
-              <CardContent className="p-4 space-y-2">
-                <Skeleton className="h-4 w-20" />
-                <Skeleton className="h-6 w-24" />
-              </CardContent>
-            </Card>
-          ))}
-        </div>
-        <Card>
-          <CardContent className="p-6 space-y-4">
-            <Skeleton className="h-8 w-1/3" />
-            <Skeleton className="h-4 w-full" />
-            <Skeleton className="h-4 w-full" />
-            <Skeleton className="h-4 w-3/4" />
-            <div className="py-2" />
-            <Skeleton className="h-8 w-1/4" />
-            <Skeleton className="h-4 w-full" />
-            <Skeleton className="h-4 w-4/5" />
-          </CardContent>
-        </Card>
-      </div>
-    </div>
-  );
-}
-
-export function StatsSkeleton() {
-  return (
-    <div className="space-y-6">
-      <div className="space-y-2">
-        <Skeleton className="h-5 w-24" />
-        <Skeleton className="h-7 w-48" />
-      </div>
-      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
-        {[...Array(4)].map((_, idx) => (
-          <Card key={idx}>
-            <CardHeader className="pb-2">
-              <Skeleton className="h-4 w-20" />
-            </CardHeader>
-            <CardContent className="space-y-2">
-              <Skeleton className="h-8 w-16" />
-              <Skeleton className="h-3 w-20" />
-            </CardContent>
-          </Card>
-        ))}
-      </div>
-      <div className="grid gap-6 md:grid-cols-2">
-        {[...Array(2)].map((_, idx) => (
-          <Card key={idx}>
-            <CardHeader>
-              <Skeleton className="h-5 w-32" />
-            </CardHeader>
-            <CardContent>
-              <Skeleton className="h-[220px] w-full" />
-            </CardContent>
-          </Card>
-        ))}
-      </div>
-    </div>
-  );
-}
-
-export function ContextPageSkeleton() {
-  return (
-    <div className="grid gap-6 lg:grid-cols-[320px_minmax(0,1fr)]">
-      <Card className="h-full">
-        <CardHeader className="space-y-2">
-          <Skeleton className="h-5 w-32" />
-          <Skeleton className="h-9 w-full" />
-        </CardHeader>
-        <CardContent className="space-y-3">
-          {[...Array(6)].map((_, idx) => (
-            <div key={idx} className="space-y-1">
-              <Skeleton className="h-4 w-3/4" />
-              <Skeleton className="h-3 w-1/2" />
-            </div>
-          ))}
-        </CardContent>
-      </Card>
-      <Card>
-        <CardHeader>
-          <Skeleton className="h-6 w-40" />
-        </CardHeader>
-        <CardContent className="space-y-3">
-          <Skeleton className="h-4 w-24" />
-          <Skeleton className="h-4 w-full" />
-          <Skeleton className="h-4 w-full" />
-          <Skeleton className="h-4 w-5/6" />
-        </CardContent>
-      </Card>
-    </div>
-  );
-}

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

@@ -1,129 +0,0 @@
-import { Calendar, GitBranch, Tag, User, ExternalLink } from 'lucide-react';
-import { Card, CardContent } from '@leanspec/ui-components';
-import { StatusBadge } from '../StatusBadge';
-import { PriorityBadge } from '../PriorityBadge';
-import { StatusEditor } from '../metadata-editors/StatusEditor';
-import { PriorityEditor } from '../metadata-editors/PriorityEditor';
-import { TagsEditor } from '../metadata-editors/TagsEditor';
-import { formatDate, formatRelativeTime } from '../../lib/date-utils';
-import type { SpecDetail } from '../../types/api';
-import { useTranslation } from 'react-i18next';
-
-interface EditableMetadataProps {
-  spec: SpecDetail;
-  onSpecChange?: (updates: Partial<SpecDetail>) => void;
-}
-
-export function EditableMetadata({ spec, onSpecChange }: EditableMetadataProps) {
-  const created = (spec.metadata?.created_at as string | undefined) || spec.createdAt;
-  const updated = (spec.metadata?.updated_at as string | undefined) || spec.updatedAt;
-  const githubUrl = spec.metadata?.github_url as string | undefined;
-  const assignee = spec.metadata?.assignee as string | undefined;
-  const { t, i18n } = useTranslation('common');
-
-  return (
-    <Card>
-      <CardContent className="pt-6 space-y-4">
-        <dl className="grid grid-cols-2 gap-4">
-          <div>
-            <dt className="text-sm font-medium text-muted-foreground mb-1">{t('specsPage.filters.status')}</dt>
-            <dd className="flex items-center gap-2">
-              {spec.status && <StatusBadge status={spec.status} />}
-              <StatusEditor
-                specName={spec.specName}
-                value={spec.status}
-                onChange={(status) => onSpecChange?.({ status })}
-              />
-            </dd>
-          </div>
-
-          <div>
-            <dt className="text-sm font-medium text-muted-foreground mb-1">{t('specsPage.filters.priority')}</dt>
-            <dd className="flex items-center gap-2">
-              {spec.priority && <PriorityBadge priority={spec.priority} />}
-              <PriorityEditor
-                specName={spec.specName}
-                value={spec.priority}
-                onChange={(priority) => onSpecChange?.({ priority })}
-              />
-            </dd>
-          </div>
-
-          <div>
-            <dt className="text-sm font-medium text-muted-foreground flex items-center gap-2 mb-1">
-              <Calendar className="h-4 w-4" />
-              {t('specDetail.metadata.created')}
-            </dt>
-            <dd className="text-sm">
-              {formatDate(created, i18n.language)}
-              {created && (
-                <span className="text-muted-foreground ml-1">
-                  ({formatRelativeTime(created, i18n.language)})
-                </span>
-              )}
-            </dd>
-          </div>
-
-          <div>
-            <dt className="text-sm font-medium text-muted-foreground flex items-center gap-2 mb-1">
-              <Calendar className="h-4 w-4" />
-              {t('specDetail.metadata.updated')}
-            </dt>
-            <dd className="text-sm">
-              {formatDate(updated, i18n.language)}
-              {updated && (
-                <span className="text-muted-foreground ml-1">
-                  ({formatRelativeTime(updated, i18n.language)})
-                </span>
-              )}
-            </dd>
-          </div>
-
-          {assignee && (
-            <div>
-              <dt className="text-sm font-medium text-muted-foreground flex items-center gap-2 mb-1">
-                <User className="h-4 w-4" />
-                {t('specDetail.metadata.assignee')}
-              </dt>
-              <dd className="text-sm">{assignee}</dd>
-            </div>
-          )}
-
-          <div className={assignee ? '' : 'col-span-2'}>
-            <dt className="text-sm font-medium text-muted-foreground flex items-center gap-2 mb-1">
-              <Tag className="h-4 w-4" />
-              {t('spec.tags')}
-            </dt>
-            <dd>
-              <TagsEditor
-                specName={spec.specName}
-                value={spec.tags}
-                onChange={(tags) => onSpecChange?.({ tags })}
-              />
-            </dd>
-          </div>
-
-          {githubUrl && (
-            <div className="col-span-2">
-              <dt className="text-sm font-medium text-muted-foreground flex items-center gap-2 mb-1">
-                <GitBranch className="h-4 w-4" />
-                {t('specDetail.metadata.source')}
-              </dt>
-              <dd>
-                <a
-                  href={githubUrl}
-                  target="_blank"
-                  rel="noreferrer"
-                  className="text-sm text-primary hover:underline inline-flex items-center gap-1"
-                >
-                  {t('specDetail.metadata.viewOnGitHub')}
-                  <ExternalLink className="h-3.5 w-3.5" />
-                </a>
-              </dd>
-            </div>
-          )}
-        </dl>
-      </CardContent>
-    </Card>
-  );
-}