@pattern-stack/frontend-patterns 0.0.3 → 0.0.4

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

@@ -0,0 +1,181 @@
+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

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

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

@@ -0,0 +1,90 @@
+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

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