@pattern-stack/frontend-patterns 0.0.1 → 0.0.3

package/src/atoms/composed/DetailedCard/DetailedCard.tsx

@@ -1,181 +0,0 @@
-import React from 'react';
-import { Card } from '../../ui/card';
-import { DataBadge } from '../DataBadge/DataBadge';
-import { ArrowRight, TrendingUp, TrendingDown, Minus } from 'lucide-react';
-import { cn } from '../../utils/utils';
-
-export interface DetailedCardProps {
-  title: string;
-  subtitle?: string;
-  description?: string;
-  primaryMetric: {
-    label: string;
-    value: string | number;
-    trend?: {
-      value: number;
-      label?: string;
-    };
-  };
-  secondaryMetrics?: Array<{
-    label: string;
-    value: string | number;
-    status?: 'success' | 'warning' | 'error' | 'info' | 'neutral';
-  }>;
-  tags?: Array<{
-    label: string;
-    category?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
-    status?: 'success' | 'warning' | 'error' | 'info' | 'neutral';
-  }>;
-  category?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
-  icon?: React.ReactNode;
-  onClick?: () => void;
-  className?: string;
-}
-
-export const DetailedCard = ({
-  title,
-  subtitle,
-  description,
-  primaryMetric,
-  secondaryMetrics = [],
-  tags = [],
-  category,
-  icon,
-  onClick,
-  className
-}: DetailedCardProps) => {
-  const getTrendIcon = (trendValue: number) => {
-    if (trendValue > 0) {
-      return <TrendingUp className="w-3 h-3" />;
-    } else if (trendValue < 0) {
-      return <TrendingDown className="w-3 h-3" />;
-    }
-    return <Minus className="w-3 h-3" />;
-  };
-
-  const getTrendColor = (trendValue: number) => {
-    if (trendValue > 0) return 'text-status-success';
-    if (trendValue < 0) return 'text-status-error';
-    return 'text-status-neutral';
-  };
-
-  // We don't need to create category classes manually - let the Card component handle it
-
-  return (
-    <Card 
-      className={cn(
-        "card-container relative overflow-hidden transition-all animate-slide-up",
-        onClick && "cursor-pointer hover:shadow-md hover:scale-[1.01] active:scale-[0.99]",
-        category && `hover:shadow-category-${category}`,
-        "group",
-        className
-      )}
-      category={category} // Pass category directly to Card component
-      data-component-name="DetailedCard"
-      onClick={onClick}
-      role={onClick ? 'button' : undefined}
-      tabIndex={onClick ? 0 : undefined}
-      onKeyDown={onClick ? (e) => {
-        if (e.key === 'Enter' || e.key === ' ') {
-          e.preventDefault();
-          onClick();
-        }
-      } : undefined}
-    >
-      <div className="space-y-4">
-        {/* Header */}
-        <div className="flex items-start justify-between">
-          <div className="flex-1 min-w-0">
-            <div className="flex items-center gap-2 mb-1">
-              <h3 className="text-xl font-bold text-foreground truncate">{title}</h3>
-              {icon && (
-                <div className={cn(
-                  "p-3 rounded-lg flex items-center justify-center flex-shrink-0 transition-colors",
-                  category ? `bg-category-${category}/8 text-category-${category}` : "bg-muted/50 text-muted-foreground"
-                )}>
-                  <div className="scale-110">
-                    {icon}
-                  </div>
-                </div>
-              )}
-            </div>
-            {subtitle && (
-              <p className="text-data-meta text-sm">{subtitle}</p>
-            )}
-          </div>
-          {onClick && (
-            <ArrowRight className="w-4 h-4 text-muted-foreground ml-2 flex-shrink-0 transition-transform group-hover:translate-x-1" data-component-name="DetailedCardArrow" />
-          )}
-        </div>
-
-        {/* Description */}
-        {description && (
-          <p className="text-sm text-muted-foreground leading-relaxed">{description}</p>
-        )}
-
-        {/* Primary Metric */}
-        <div className="space-y-2">
-          <div className="text-data-label text-xs">{primaryMetric.label}</div>
-          <div className="flex items-baseline gap-3">
-            <span className={cn(
-              "text-2xl font-bold transition-all group-hover:scale-105",
-              category ? `text-category-${category}` : "text-foreground"
-            )}>
-              {primaryMetric.value}
-            </span>
-            {primaryMetric.trend && (
-              <div className={cn(
-                "flex items-center gap-1 text-xs",
-                getTrendColor(primaryMetric.trend.value)
-              )}>
-                {getTrendIcon(primaryMetric.trend.value)}
-                <span className="font-medium">
-                  {primaryMetric.trend.value > 0 && '+'}{primaryMetric.trend.value}%
-                </span>
-                {primaryMetric.trend.label && (
-                  <span className="text-data-meta ml-1">{primaryMetric.trend.label}</span>
-                )}
-              </div>
-            )}
-          </div>
-        </div>
-
-        {/* Secondary Metrics */}
-        {secondaryMetrics.length > 0 && (
-          <div className="grid grid-cols-2 gap-3 py-2">
-            {secondaryMetrics.map((metric, index) => (
-              <div key={index} className="space-y-1">
-                <div className="text-data-label text-xs">{metric.label}</div>
-                <div className="flex items-center gap-2">
-                  <span className="text-sm font-semibold text-foreground">{metric.value}</span>
-                  {metric.status && (
-                    <DataBadge variant="status" status={metric.status} size="sm">
-                      {metric.status}
-                    </DataBadge>
-                  )}
-                </div>
-              </div>
-            ))}
-          </div>
-        )}
-
-        {/* Tags */}
-        {tags.length > 0 && (
-          <div className="flex flex-wrap gap-2 pt-2 border-t border-border">
-            {tags.map((tag, index) => (
-              <DataBadge
-                key={index}
-                variant={tag.category ? 'category' : 'status'}
-                category={tag.category}
-                status={tag.status}
-                size="sm"
-              >
-                {tag.label}
-              </DataBadge>
-            ))}
-          </div>
-        )}
-      </div>
-    </Card>
-  );
-};

package/src/atoms/composed/DetailedCard/index.ts

@@ -1,2 +0,0 @@
-export { DetailedCard } from './DetailedCard';
-export type { DetailedCardProps } from './DetailedCard';

package/src/atoms/composed/EmptyState/EmptyState.tsx

@@ -1,90 +0,0 @@
-import React from 'react';
-import { Button } from '../../ui/button';
-import { cn } from '../../utils/utils';
-import { FileX, Search, AlertCircle, Database } from 'lucide-react';
-
-export interface EmptyStateProps {
-  variant?: 'no-data' | 'no-results' | 'error' | 'loading';
-  title: string;
-  description?: string;
-  icon?: React.ReactNode;
-  action?: {
-    label: string;
-    onClick: () => void;
-  };
-  secondaryAction?: {
-    label: string;
-    onClick: () => void;
-  };
-  className?: string;
-}
-
-const defaultIcons = {
-  'no-data': <Database className="w-12 h-12" />,
-  'no-results': <Search className="w-12 h-12" />,
-  'error': <AlertCircle className="w-12 h-12" />,
-  'loading': <FileX className="w-12 h-12" />,
-};
-
-export const EmptyState = ({
-  variant = 'no-data',
-  title,
-  description,
-  icon,
-  action,
-  secondaryAction,
-  className
-}: EmptyStateProps) => {
-  const displayIcon = icon || defaultIcons[variant];
-
-  return (
-    <div className={cn(
-      "flex flex-col items-center justify-center py-12 px-4 text-center",
-      className
-    )}
-    data-component-name="EmptyState"
-    data-variant={variant}
-    >
-      {/* Icon */}
-      <div className={cn(
-        "mb-4 transition-all",
-        variant === 'no-data' && "text-category-1 opacity-60",
-        variant === 'no-results' && "text-category-2 opacity-60",
-        variant === 'error' && "text-status-error opacity-60",
-        variant === 'loading' && "text-category-3 opacity-60 animate-pulse"
-      )}
-      data-component-name="EmptyStateIcon"
-      >
-        {displayIcon}
-      </div>
-
-      {/* Title */}
-      <h3 className="text-lg font-semibold text-foreground mb-2" data-component-name="EmptyStateTitle">
-        {title}
-      </h3>
-
-      {/* Description */}
-      {description && (
-        <p className="text-muted-foreground max-w-md mb-6" data-component-name="EmptyStateDescription">
-          {description}
-        </p>
-      )}
-
-      {/* Actions */}
-      {(action || secondaryAction) && (
-        <div className="flex flex-col sm:flex-row gap-3" data-component-name="EmptyStateActions">
-          {action && (
-            <Button onClick={action.onClick}>
-              {action.label}
-            </Button>
-          )}
-          {secondaryAction && (
-            <Button variant="outline" onClick={secondaryAction.onClick}>
-              {secondaryAction.label}
-            </Button>
-          )}
-        </div>
-      )}
-    </div>
-  );
-};

package/src/atoms/composed/EmptyState/index.ts

@@ -1 +0,0 @@
-export * from './EmptyState';