@pattern-stack/frontend-patterns 0.0.3 → 0.0.4

package/src/templates/ComponentShowcaseTemplate.tsx

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

@@ -0,0 +1,232 @@
+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>
+  );
+};