@pattern-stack/frontend-patterns 0.0.3 → 0.0.5

package/src/pages/ComponentShowcase/PalettesShowcase.tsx

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