feat: unify pastel application into single playground and remove standalone pages

2026-02-26 12:07:21 +01:00
parent 225a9ad7fb
commit 061ea1d806
21 changed files with 519 additions and 2127 deletions
--- a/components/layout/AppSidebar.tsx
+++ b/components/layout/AppSidebar.tsx
@@ -48,17 +48,7 @@ const navigation: NavGroup[] = [
      { 
        title: 'Pastel', 
        href: '/pastel', 
-        icon: <PastelIcon className="h-4 w-4" />,
-        items: [
-          { title: 'Harmony Palettes', href: '/pastel/harmony' },
-          { title: 'Distinct Colors', href: '/pastel/distinct' },
-          { title: 'Gradients', href: '/pastel/gradient' },
-          { title: 'Contrast Checker', href: '/pastel/contrast' },
-          { title: 'Color Blindness', href: '/pastel/colorblind' },
-          { title: 'Text Color', href: '/pastel/textcolor' },
-          { title: 'Named Colors', href: '/pastel/names' },
-          { title: 'Batch Operations', href: '/pastel/batch' },
-        ]
+        icon: <PastelIcon className="h-4 w-4" />
      },
      { 
        title: 'Media Converter', 
--- a/components/pastel/ColorPicker.tsx
+++ b/components/pastel/ColorPicker.tsx
@@ -3,6 +3,7 @@
 import { HexColorPicker } from 'react-colorful';
 import { Input } from '@/components/ui/input';
 import { cn } from '@/lib/utils/cn';
+import { hexToRgb } from '@/lib/pastel/utils/color';

 interface ColorPickerProps {
  color: string;
@@ -17,21 +18,38 @@ export function ColorPicker({ color, onChange, className }: ColorPickerProps) {
    onChange(value);
  };

+  // Determine text color based on background brightness
+  const getContrastColor = (hex: string) => {
+    const rgb = hexToRgb(hex);
+    if (!rgb) return 'inherit';
+    const brightness = (rgb.r * 299 + rgb.g * 587 + rgb.b * 114) / 1000;
+    return brightness > 128 ? '#000000' : '#ffffff';
+  };
+
+  const textColor = getContrastColor(color);
+
  return (
-    <div className={cn('space-y-4', className)}>
-      <HexColorPicker color={color} onChange={onChange} className="w-full" />
-      <div className="space-y-2">
-        <label htmlFor="color-input" className="text-sm font-medium">
-          Color Value
-        </label>
-        <Input
-          id="color-input"
-          type="text"
-          value={color}
-          onChange={handleInputChange}
-          placeholder="#ff0099 or rgb(255, 0, 153)"
-          className="font-mono"
-        />
+    <div className={cn('flex flex-col items-center justify-center space-y-4', className)}>
+      <div className="w-full max-w-[200px] space-y-4">
+        <HexColorPicker color={color} onChange={onChange} className="!w-full" />
+        <div className="space-y-2">
+          <label htmlFor="color-input" className="text-sm font-medium">
+            Color Value
+          </label>
+          <Input
+            id="color-input"
+            type="text"
+            value={color}
+            onChange={handleInputChange}
+            placeholder="#ff0099 or rgb(255, 0, 153)"
+            className="font-mono transition-colors duration-200"
+            style={{
+              backgroundColor: color,
+              color: textColor,
+              borderColor: textColor === '#000000' ? 'rgba(0,0,0,0.1)' : 'rgba(255,255,255,0.2)'
+            }}
+          />
+        </div>
      </div>
    </div>
  );
--- a/components/pastel/ExportMenu.tsx
+++ b/components/pastel/ExportMenu.tsx
@@ -8,8 +8,8 @@ import {
  SelectTrigger,
  SelectValue,
 } from '@/components/ui/select';
-import { useState } from 'react';
-import { Download, Copy, Check } from 'lucide-react';
+import { useState, useEffect } from 'react';
+import { Download, Copy, Check, Loader2 } from 'lucide-react';
 import { toast } from 'sonner';
 import {
  exportAsCSS,
@@ -20,6 +20,7 @@ import {
  downloadAsFile,
  type ExportColor,
 } from '@/lib/pastel/utils/export';
+import { pastelAPI } from '@/lib/pastel/api/client';

 interface ExportMenuProps {
  colors: string[];
@@ -27,12 +28,44 @@ interface ExportMenuProps {
 }

 type ExportFormat = 'css' | 'scss' | 'tailwind' | 'json' | 'javascript';
+type ColorSpace = 'hex' | 'rgb' | 'hsl' | 'lab' | 'oklab' | 'lch' | 'oklch';

 export function ExportMenu({ colors, className }: ExportMenuProps) {
  const [format, setFormat] = useState<ExportFormat>('css');
+  const [colorSpace, setColorSpace] = useState<ColorSpace>('hex');
+  const [convertedColors, setConvertedColors] = useState<string[]>(colors);
+  const [isConverting, setIsConverting] = useState(false);
  const [copied, setCopied] = useState(false);

-  const exportColors: ExportColor[] = colors.map((hex) => ({ hex }));
+  useEffect(() => {
+    async function convertColors() {
+      if (colorSpace === 'hex') {
+        setConvertedColors(colors);
+        return;
+      }
+
+      setIsConverting(true);
+      try {
+        const response = await pastelAPI.convertFormat({
+          colors,
+          format: colorSpace,
+        });
+
+        if (response.success) {
+          setConvertedColors(response.data.conversions.map(c => c.output));
+        }
+      } catch (error) {
+        console.error('Failed to convert colors:', error);
+        toast.error('Failed to convert colors to selected space');
+      } finally {
+        setIsConverting(false);
+      }
+    }
+
+    convertColors();
+  }, [colors, colorSpace]);
+
+  const exportColors: ExportColor[] = convertedColors.map((value) => ({ value }));

  const getExportContent = (): string => {
    switch (format) {
@@ -86,33 +119,61 @@ export function ExportMenu({ colors, className }: ExportMenuProps) {
  return (
    <div className={className}>
      <div className="space-y-4">
-        <div>
-          <h3 className="text-sm font-medium mb-2">Export Palette</h3>
-          <Select
-            value={format}
-            onValueChange={(value) => setFormat(value as ExportFormat)}
-          >
-            <SelectTrigger className="w-full">
-              <SelectValue placeholder="Select format" />
-            </SelectTrigger>
-            <SelectContent>
-              <SelectItem value="css">CSS Variables</SelectItem>
-              <SelectItem value="scss">SCSS Variables</SelectItem>
-              <SelectItem value="tailwind">Tailwind Config</SelectItem>
-              <SelectItem value="json">JSON</SelectItem>
-              <SelectItem value="javascript">JavaScript Array</SelectItem>
-            </SelectContent>
-          </Select>
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+          <div className="space-y-2">
+            <h3 className="text-sm font-medium">Export Format</h3>
+            <Select
+              value={format}
+              onValueChange={(value) => setFormat(value as ExportFormat)}
+            >
+              <SelectTrigger className="w-full">
+                <SelectValue placeholder="Select format" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="css">CSS Variables</SelectItem>
+                <SelectItem value="scss">SCSS Variables</SelectItem>
+                <SelectItem value="tailwind">Tailwind Config</SelectItem>
+                <SelectItem value="json">JSON</SelectItem>
+                <SelectItem value="javascript">JavaScript Array</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+
+          <div className="space-y-2">
+            <h3 className="text-sm font-medium">Color Space</h3>
+            <Select
+              value={colorSpace}
+              onValueChange={(value) => setColorSpace(value as ColorSpace)}
+            >
+              <SelectTrigger className="w-full">
+                <SelectValue placeholder="Select space" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="hex">Hex</SelectItem>
+                <SelectItem value="rgb">RGB</SelectItem>
+                <SelectItem value="hsl">HSL</SelectItem>
+                <SelectItem value="lab">Lab</SelectItem>
+                <SelectItem value="oklab">OkLab</SelectItem>
+                <SelectItem value="lch">LCH</SelectItem>
+                <SelectItem value="oklch">OkLCH</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
        </div>

-        <div className="p-4 bg-muted rounded-lg">
+        <div className="p-4 bg-muted rounded-lg relative min-h-[100px]">
+          {isConverting ? (
+            <div className="absolute inset-0 flex items-center justify-center bg-muted/50 backdrop-blur-sm rounded-lg z-10">
+              <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
+            </div>
+          ) : null}
          <pre className="text-xs overflow-x-auto">
            <code>{getExportContent()}</code>
          </pre>
        </div>

-        <div className="flex gap-2">
-          <Button onClick={handleCopy} variant="outline" className="flex-1">
+        <div className="flex gap-2 flex-col md:flex-row">
+          <Button onClick={handleCopy} variant="outline" className="w-full md:flex-1" disabled={isConverting}>
            {copied ? (
              <>
                <Check className="h-4 w-4 mr-2" />
@@ -125,7 +186,7 @@ export function ExportMenu({ colors, className }: ExportMenuProps) {
              </>
            )}
          </Button>
-          <Button onClick={handleDownload} variant="default" className="flex-1">
+          <Button onClick={handleDownload} variant="default" className="w-full md:flex-1" disabled={isConverting}>
            <Download className="h-4 w-4 mr-2" />
            Download
          </Button>