@pattern-stack/frontend-patterns 0.1.2 → 0.2.0-alpha.0

package/src/templates/ComponentShowcaseTemplate.tsx

@@ -1,173 +0,0 @@
-import React from 'react';
-import { Card } from '../atoms/ui/card';
-import { ShowcaseSection } from '../molecules/layout';
-
-interface PrimaryComponentSection {
-  title: string;
-  description: string;
-  badge: {
-    text: string;
-    variant?: 'status' | 'category';
-    status?: 'success' | 'warning' | 'error' | 'info' | 'neutral';
-    category?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
-    size?: 'sm' | 'md' | 'lg';
-  };
-  children: React.ReactNode;
-}
-
-interface ComposedExampleSection {
-  title: string;
-  description: string;
-  badge?: {
-    text: string;
-    variant?: 'status' | 'category';
-    status?: 'success' | 'warning' | 'error' | 'info' | 'neutral';
-    category?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
-    size?: 'sm' | 'md' | 'lg';
-  };
-  children: React.ReactNode;
-  category?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
-}
-
-interface ComponentShowcaseTemplateProps {
-  /** Category for overall theming */
-  category: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
-  /** Page title */
-  title: string;
-  /** Page description */
-  description: string;
-  /** Primary component section - core component with basic variants */
-  primaryComponent: PrimaryComponentSection;
-  /** Optional composed examples - complex usage patterns and real-world scenarios */
-  composedExamples?: {
-    title: string;
-    description: string;
-    sections: ComposedExampleSection[];
-  };
-  /** Optional ephemeral examples - inline customized components */
-  ephemeralExamples?: {
-    title: string;
-    description: string;
-    sections: ComposedExampleSection[];
-  };
-  /** Additional content that doesn't fit the primary/composed pattern */
-  additionalSections?: React.ReactNode;
-}
-
-export const ComponentShowcaseTemplate: React.FC<ComponentShowcaseTemplateProps> = ({
-  category,
-  title,
-  description,
-  primaryComponent,
-  composedExamples,
-  ephemeralExamples,
-  additionalSections
-}) => {
-  return (
-    <div className="space-y-8">
-      {/* Page Header */}
-      <div className="space-y-2 mb-8">
-        <h2 className="text-2xl font-bold text-foreground">{title}</h2>
-        <p className="text-muted-foreground">{description}</p>
-      </div>
-
-      {/* Primary Component Section */}
-      <Card className="p-6" category={category}>
-        <ShowcaseSection
-          title={primaryComponent.title}
-          description={primaryComponent.description}
-          badge={primaryComponent.badge}
-        >
-          {primaryComponent.children}
-        </ShowcaseSection>
-      </Card>
-
-      {/* Composed Examples Section */}
-      {composedExamples && (
-        <div className="space-y-6">
-          {/* Composed Examples Header */}
-          <div className="space-y-2 mt-12 mb-8">
-            <h3 className="text-xl font-bold text-foreground">{composedExamples.title}</h3>
-            <p className="text-muted-foreground">{composedExamples.description}</p>
-          </div>
-
-          {/* Composed Example Sections */}
-          <div className="grid gap-6">
-            {composedExamples.sections.map((section, index) => (
-              <Card 
-                key={index} 
-                className="p-6" 
-                category={section.category || category}
-              >
-                {section.badge ? (
-                  <ShowcaseSection
-                    title={section.title}
-                    description={section.description}
-                    badge={section.badge}
-                  >
-                    {section.children}
-                  </ShowcaseSection>
-                ) : (
-                  <div className="space-y-6">
-                    <div className="space-y-4">
-                      <h4 className="text-lg font-medium">{section.title}</h4>
-                      <p className="text-sm text-muted-foreground">{section.description}</p>
-                    </div>
-                    <div>{section.children}</div>
-                  </div>
-                )}
-              </Card>
-            ))}
-          </div>
-        </div>
-      )}
-
-      {/* Ephemeral Examples Section */}
-      {ephemeralExamples && (
-        <div className="space-y-6">
-          {/* Ephemeral Examples Header */}
-          <div className="space-y-2 mt-12 mb-8">
-            <h3 className="text-xl font-bold text-foreground">{ephemeralExamples.title}</h3>
-            <p className="text-muted-foreground">{ephemeralExamples.description}</p>
-          </div>
-
-          {/* Ephemeral Example Sections */}
-          <div className="grid gap-6">
-            {ephemeralExamples.sections.map((section, index) => (
-              <Card 
-                key={index} 
-                className="p-6" 
-                category={section.category || category}
-              >
-                {section.badge ? (
-                  <ShowcaseSection
-                    title={section.title}
-                    description={section.description}
-                    badge={section.badge}
-                  >
-                    {section.children}
-                  </ShowcaseSection>
-                ) : (
-                  <div className="space-y-6">
-                    <div className="space-y-4">
-                      <h4 className="text-lg font-medium">{section.title}</h4>
-                      <p className="text-sm text-muted-foreground">{section.description}</p>
-                    </div>
-                    <div>{section.children}</div>
-                  </div>
-                )}
-              </Card>
-            ))}
-          </div>
-        </div>
-      )}
-
-      {/* Additional Sections */}
-      {additionalSections && (
-        <div className="space-y-6">
-          {additionalSections}
-        </div>
-      )}
-    </div>
-  );
-};

package/src/templates/DashboardTemplate.tsx

@@ -1,232 +0,0 @@
-import React from 'react';
-import { cn } from '../atoms/utils/utils';
-import { SectionHeader } from '../molecules/layout/SectionHeader';
-import { Card } from '../atoms/ui/card';
-
-export interface DashboardTemplateProps {
-  /** Page title */
-  title: string;
-  /** Page description */
-  description?: string;
-  /** Header actions */
-  actions?: React.ReactNode;
-  /** Main content */
-  children: React.ReactNode;
-  /** Additional CSS classes */
-  className?: string;
-  /** Category-based styling */
-  category?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
-  /** Whether to show breadcrumbs */
-  showBreadcrumbs?: boolean;
-  /** Breadcrumb items */
-  breadcrumbs?: Array<{ label: string; href?: string }>;
-  /** Page subtitle */
-  subtitle?: string;
-}
-
-export const DashboardTemplate: React.FC<DashboardTemplateProps> = ({
-  title,
-  description,
-  actions,
-  children,
-  className,
-  category = 1,
-  showBreadcrumbs = false,
-  breadcrumbs = [],
-  subtitle
-}) => {
-  return (
-    <div className={cn('flex flex-col min-h-0 flex-1', className)}>
-        {/* Header Section */}
-        <div className="flex-shrink-0 border-b border-border bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
-          <div className="container mx-auto px-6 py-6">
-            {/* Breadcrumbs */}
-            {showBreadcrumbs && breadcrumbs.length > 0 && (
-              <nav className="mb-4">
-                <ol className="flex items-center space-x-2 text-sm">
-                  {breadcrumbs.map((crumb, index) => {
-                    const isLast = index === breadcrumbs.length - 1;
-                    return (
-                      <li key={index} className="flex items-center">
-                        {crumb.href && !isLast ? (
-                          <a
-                            href={crumb.href}
-                            className={cn(
-                              'text-muted-foreground hover:text-foreground transition-colors',
-                              `hover:text-category-${category}`
-                            )}
-                          >
-                            {crumb.label}
-                          </a>
-                        ) : (
-                          <span className={isLast ? `text-category-${category} font-medium` : 'text-muted-foreground'}>
-                            {crumb.label}
-                          </span>
-                        )}
-                        {!isLast && (
-                          <span className="mx-2 text-muted-foreground">/</span>
-                        )}
-                      </li>
-                    );
-                  })}
-                </ol>
-              </nav>
-            )}
-
-            {/* Page Header */}
-            <div className="flex items-start justify-between">
-              <div className="flex-1 min-w-0">
-                <SectionHeader
-                  title={title}
-                  description={description}
-                  subtitle={subtitle}
-                  size="lg"
-                  className="text-left"
-                />
-              </div>
-              
-              {actions && (
-                <div className="ml-6 flex-shrink-0">
-                  {actions}
-                </div>
-              )}
-            </div>
-          </div>
-        </div>
-
-        {/* Main Content */}
-        <div className="flex-1 min-h-0 overflow-auto">
-          <div className="container mx-auto px-6 py-6">
-            {children}
-          </div>
-        </div>
-    </div>
-  );
-};
-
-/**
- * Dashboard Grid Layout Component
- * Provides standardized grid layouts for dashboard content
- */
-export interface DashboardGridProps {
-  /** Grid columns configuration */
-  columns?: 1 | 2 | 3 | 4;
-  /** Gap between grid items */
-  gap?: 'sm' | 'md' | 'lg';
-  /** Grid content */
-  children: React.ReactNode;
-  /** Additional CSS classes */
-  className?: string;
-}
-
-export const DashboardGrid: React.FC<DashboardGridProps> = ({
-  columns = 3,
-  gap = 'md',
-  children,
-  className
-}) => {
-  const columnClasses = {
-    1: 'grid-cols-1',
-    2: 'grid-cols-1 lg:grid-cols-2',
-    3: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3',
-    4: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4'
-  };
-
-  const gapClasses = {
-    sm: 'gap-4',
-    md: 'gap-6',
-    lg: 'gap-8'
-  };
-
-  return (
-    <div
-      className={cn(
-        'grid',
-        columnClasses[columns],
-        gapClasses[gap],
-        className
-      )}
-      data-component-name="DashboardGrid"
-    >
-      {children}
-    </div>
-  );
-};
-
-/**
- * Dashboard Card Component
- * Standardized card component for dashboard content
- */
-export interface DashboardCardProps {
-  /** Card title */
-  title?: string;
-  /** Card description */
-  description?: string;
-  /** Card content */
-  children: React.ReactNode;
-  /** Card actions */
-  actions?: React.ReactNode;
-  /** Additional CSS classes */
-  className?: string;
-  /** Category-based styling */
-  category?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
-  /** Card padding */
-  padding?: 'sm' | 'md' | 'lg';
-}
-
-export const DashboardCard: React.FC<DashboardCardProps> = ({
-  title,
-  description,
-  children,
-  actions,
-  className,
-  category,
-  padding = 'md'
-}) => {
-  const paddingClasses = {
-    sm: 'p-4',
-    md: 'p-6',
-    lg: 'p-8'
-  };
-
-  return (
-    <Card 
-      className={cn(paddingClasses[padding], className)}
-      category={category}
-    >
-      {/* Card Header */}
-      {(title || description || actions) && (
-        <div className="mb-4">
-          <div className="flex items-start justify-between">
-            <div className="flex-1 min-w-0">
-              {title && (
-                <h3 className={cn(
-                  'text-lg font-semibold text-foreground mb-1',
-                  category && `text-category-${category}`
-                )}>
-                  {title}
-                </h3>
-              )}
-              {description && (
-                <p className="text-sm text-muted-foreground">
-                  {description}
-                </p>
-              )}
-            </div>
-            
-            {actions && (
-              <div className="ml-4 flex-shrink-0">
-                {actions}
-              </div>
-            )}
-          </div>
-        </div>
-      )}
-
-      {/* Card Content */}
-      <div>
-        {children}
-      </div>
-    </Card>
-  );
-};