@pattern-stack/frontend-patterns 0.0.6 → 0.1.0

package/src/pages/ComponentShowcase/PalettesShowcase.tsx

@@ -1,207 +0,0 @@
-import React from 'react';
-import { ComponentShowcaseTemplate } from '../../templates';
-import { ColorSwatch } from '../../atoms/composed';
-
-export const PalettesShowcase: React.FC = () => {
-  return (
-    <ComponentShowcaseTemplate
-      category={2}
-      title="Color System & Palettes"
-      description="Complete color system including individual color swatches and predefined palette combinations for data visualization and interface design."
-      primaryComponent={{
-        title: "ColorSwatch Component",
-        description: "Individual color swatch component for displaying colors with names, labels, and interactive features.",
-        badge: {
-          text: "Business Component",
-          variant: "category",
-          category: 2
-        },
-        children: (
-          <div className="space-y-6">
-            {/* Basic Color Swatches */}
-            <div className="space-y-4">
-              <h4 className="text-base font-medium">Basic Swatches</h4>
-              <div className="grid grid-cols-4 gap-4">
-                <ColorSwatch
-                  color="hsl(var(--category-1))"
-                  name="Blue"
-                  label="Primary"
-                  interactive
-                />
-                <ColorSwatch
-                  color="hsl(var(--category-2))"
-                  name="Teal"
-                  label="Secondary"
-                  interactive
-                />
-                <ColorSwatch
-                  color="hsl(var(--status-success))"
-                  name="Success"
-                  label="Status"
-                  interactive
-                />
-                <ColorSwatch
-                  color="hsl(var(--status-error))"
-                  name="Error"
-                  label="Status"
-                  interactive
-                />
-              </div>
-            </div>
-
-            {/* Size Variants */}
-            <div className="space-y-4">
-              <h4 className="text-base font-medium">Size Variants</h4>
-              <div className="flex items-end gap-4">
-                <ColorSwatch
-                  color="hsl(var(--category-3))"
-                  name="Small"
-                  size="sm"
-                  interactive
-                />
-                <ColorSwatch
-                  color="hsl(var(--category-3))"
-                  name="Medium"
-                  size="md"
-                  interactive
-                />
-                <ColorSwatch
-                  color="hsl(var(--category-3))"
-                  name="Large"
-                  size="lg"
-                  interactive
-                />
-              </div>
-            </div>
-
-            {/* Interactive States */}
-            <div className="space-y-4">
-              <h4 className="text-base font-medium">Interactive States</h4>
-              <div className="grid grid-cols-4 gap-4">
-                <ColorSwatch
-                  color="hsl(var(--category-4))"
-                  name="Static"
-                  label="Default state"
-                />
-                <ColorSwatch
-                  color="hsl(var(--category-4))"
-                  name="Hover"
-                  label="Hover effects"
-                  interactive
-                />
-                <ColorSwatch
-                  color="hsl(var(--category-4))"
-                  name="Clickable"
-                  label="Click handlers"
-                  interactive
-                  onClick={() => alert('Swatch clicked!')}
-                />
-                <ColorSwatch
-                  color="hsl(var(--category-4))"
-                  name="Selected"
-                  label="Active state"
-                  interactive
-                  className="ring-2 ring-category-4"
-                />
-              </div>
-            </div>
-          </div>
-        )
-      }}
-      composedExamples={{
-        title: "Color Palettes & Combinations",
-        description: "Predefined color palettes and systematic color combinations for data visualization and interface design.",
-        sections: [
-          {
-            title: "Category Colors",
-            description: "Primary colors for categorizing different types of data, models, and content sections.",
-            badge: {
-              text: "Data Classification",
-              variant: "category",
-              category: 1
-            },
-            category: 1,
-            children: (
-              <div className="grid grid-cols-4 md:grid-cols-8 gap-4">
-                {[
-                  { num: 1, name: 'Blue', usage: 'Primary data' },
-                  { num: 2, name: 'Teal', usage: 'Models' },
-                  { num: 3, name: 'Orange', usage: 'Tests' },
-                  { num: 4, name: 'Purple', usage: 'Sources' },
-                  { num: 5, name: 'Pink', usage: 'Analytics' },
-                  { num: 6, name: 'Green', usage: 'Jobs' },
-                  { num: 7, name: 'Yellow', usage: 'Documentation' },
-                  { num: 8, name: 'Red', usage: 'Issues' }
-                ].map(category => (
-                  <ColorSwatch
-                    key={category.num}
-                    color={`hsl(var(--category-${category.num}))`}
-                    name={category.name}
-                    label={category.usage}
-                    interactive
-                  />
-                ))}
-              </div>
-            )
-          },
-          {
-            title: "Category Palette",
-            description: "Complete 8-color palette for data categorization with excellent contrast and accessibility.",
-            badge: {
-              text: "8 Colors",
-              variant: "category",
-              category: 6
-            },
-            category: 2,
-            children: (
-              <div className="flex gap-1 rounded overflow-hidden border border-border">
-                {[1, 2, 3, 4, 5, 6, 7, 8].map(num => (
-                  <div 
-                    key={num}
-                    className="flex-1 h-24 group relative cursor-pointer"
-                    style={{ backgroundColor: `hsl(var(--category-${num}))` }}
-                  >
-                    <div className="absolute inset-0 bg-black/0 group-hover:bg-black/10 flex items-center justify-center">
-                      <span className="text-white font-medium opacity-0 group-hover:opacity-100 transition-opacity">
-                        {num}
-                      </span>
-                    </div>
-                  </div>
-                ))}
-              </div>
-            )
-          },
-          {
-            title: "Status Colors",
-            description: "Semantic colors for indicating status, health, and operational states across the system.",
-            badge: {
-              text: "System States",
-              variant: "status",
-              status: "success"
-            },
-            category: 2,
-            children: (
-              <div className="grid grid-cols-5 gap-4">
-                {[
-                  { name: 'Success', usage: 'Completed', cssVar: '--status-success' },
-                  { name: 'Warning', usage: 'Attention', cssVar: '--status-warning' },
-                  { name: 'Error', usage: 'Failed', cssVar: '--status-error' },
-                  { name: 'Info', usage: 'Information', cssVar: '--status-info' },
-                  { name: 'Neutral', usage: 'Pending', cssVar: '--status-neutral' }
-                ].map(color => (
-                  <ColorSwatch
-                    key={color.name}
-                    color={`hsl(var(${color.cssVar}))`}
-                    name={color.name}
-                    label={color.usage}
-                    interactive
-                  />
-                ))}
-              </div>
-            )
-          }
-        ]
-      }}
-    />
-  );
-};