valknar/pastel-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: correct API integration and complete missing features

Browse Source 
Fix API response format mismatches and implement all remaining features:

**API Integration Fixes:**
- Fix ManipulationPanel to use `colors` instead of `results` from API responses
- Fix gradient endpoint to use `gradient` array from API response
- Fix color blindness simulator to use correct field names (`input`/`output` vs `original`/`simulated`)
- Fix text color optimizer request field (`backgrounds` vs `background_colors`)
- Fix method name casing: `simulateColorBlindness` (capital B)
- Add palette generation endpoint integration

**Type Definition Updates:**
- Update GradientData to match API structure with `gradient` array
- Update ColorBlindnessData to use `colors` with `input`/`output`/`difference_percentage`
- Update TextColorData to use `colors` with `textcolor`/`wcag_aa`/`wcag_aaa` fields
- Add PaletteGenerateRequest and PaletteGenerateData types

**Completed Features:**
- Harmony Palettes: Now uses dedicated `/palettes/generate` API endpoint
  - Simplified from 80 lines of manual color theory to single API call
  - Supports 6 harmony types: monochromatic, analogous, complementary, split-complementary, triadic, tetradic
- Text Color Optimizer: Full implementation with WCAG compliance checking
  - Automatic black/white text color selection
  - Live preview with contrast ratios
  - AA/AAA compliance indicators
- Color Blindness Simulator: Fixed and working
  - Shows difference percentage for each simulation
  - Side-by-side comparison view
- Gradient Creator: Fixed to use correct API response structure
- Batch Operations: Fixed to extract output colors correctly

**UI Improvements:**
- Enable all accessibility tool cards (remove "Coming Soon" badges)
- Enable harmony palettes card
- Add safety check for gradient state to prevent undefined errors

All features now fully functional and properly integrated with Pastel API.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
valknarness
2025-11-07 14:33:38 +01:00
parent cb3fcdd806
commit 93889ab9bd
11 changed files with 314 additions and 112 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
app/accessibility/colorblind/page.tsx
View File

@@ -15,7 +15,7 @@ export default function ColorBlindPage() {
const [colors, setColors] = useState<string[]>(['#ff0099']);
const [blindnessType, setBlindnessType] = useState<ColorBlindnessType>('protanopia');
const [simulations, setSimulations] = useState<
Array<{ original: string; simulated: string }>
Array<{ input: string; output: string; difference_percentage: number }>
>([]);
const simulateMutation = useSimulateColorBlindness();
@@ -26,7 +26,7 @@ export default function ColorBlindPage() {
colors,
type: blindnessType,
});
setSimulations(result.simulations);
setSimulations(result.colors);
toast.success(`Simulated ${blindnessType}`);
} catch (error) {
toast.error('Failed to simulate color blindness');
@@ -169,18 +169,18 @@ export default function ColorBlindPage() {
Original
</p>
<div className="flex items-center gap-3">
<ColorDisplay color={sim.original} size="md" />
<code className="text-sm font-mono">{sim.original}</code>
<ColorDisplay color={sim.input} size="md" />
<code className="text-sm font-mono">{sim.input}</code>
</div>
</div>
<div className="space-y-2">
<p className="text-xs font-medium text-muted-foreground">
As Seen
As Seen ({sim.difference_percentage.toFixed(1)}% difference)
</p>
<div className="flex items-center gap-3">
<ColorDisplay color={sim.simulated} size="md" />
<code className="text-sm font-mono">{sim.simulated}</code>
<ColorDisplay color={sim.output} size="md" />
<code className="text-sm font-mono">{sim.output}</code>
</div>
</div>
</div>

2
app/accessibility/page.tsx
View File

@@ -16,7 +16,6 @@ export default function AccessibilityPage() {
href: '/accessibility/colorblind',
icon: Eye,
features: ['Protanopia', 'Deuteranopia', 'Tritanopia'],
comingSoon: true,
},
{
title: 'Text Color Optimizer',
@@ -24,7 +23,6 @@ export default function AccessibilityPage() {
href: '/accessibility/textcolor',
icon: Palette,
features: ['Automatic optimization', 'WCAG guaranteed', 'Light/dark options'],
comingSoon: true,
},
];

221
app/accessibility/textcolor/page.tsx Normal file
View File

@@ -0,0 +1,221 @@
'use client';
import { useState } from 'react';
import { ColorPicker } from '@/components/color/ColorPicker';
import { ColorDisplay } from '@/components/color/ColorDisplay';
import { Button } from '@/components/ui/button';
import { useTextColor } from '@/lib/api/queries';
import { Loader2, Palette, Plus, X, CheckCircle2, XCircle } from 'lucide-react';
import { toast } from 'sonner';
export default function TextColorPage() {
const [backgrounds, setBackgrounds] = useState<string[]>(['#ff0099']);
const [results, setResults] = useState<
Array<{
background: string;
textcolor: string;
contrast_ratio: number;
wcag_aa: boolean;
wcag_aaa: boolean;
}>
>([]);
const textColorMutation = useTextColor();
const handleOptimize = async () => {
try {
const result = await textColorMutation.mutateAsync({
backgrounds,
});
setResults(result.colors);
toast.success(`Optimized text colors for ${result.colors.length} background(s)`);
} catch (error) {
toast.error('Failed to optimize text colors');
console.error(error);
}
};
const addBackground = () => {
if (backgrounds.length < 10) {
setBackgrounds([...backgrounds, '#000000']);
}
};
const removeBackground = (index: number) => {
if (backgrounds.length > 1) {
setBackgrounds(backgrounds.filter((_, i) => i !== index));
}
};
const updateBackground = (index: number, color: string) => {
const newBackgrounds = [...backgrounds];
newBackgrounds[index] = color;
setBackgrounds(newBackgrounds);
};
return (
<div className="min-h-screen p-8">
<div className="max-w-7xl mx-auto space-y-8">
<div>
<h1 className="text-4xl font-bold mb-2">Text Color Optimizer</h1>
<p className="text-muted-foreground">
Automatically find the best text color (black or white) for any background color
</p>
</div>
<div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
{/* Input */}
<div className="space-y-6">
<div className="p-6 border rounded-lg bg-card">
<div className="flex items-center justify-between mb-4">
<h2 className="text-xl font-semibold">Background Colors</h2>
<Button
onClick={addBackground}
disabled={backgrounds.length >= 10}
variant="outline"
size="sm"
>
<Plus className="h-4 w-4 mr-2" />
Add
</Button>
</div>
<div className="space-y-4">
{backgrounds.map((color, index) => (
<div key={index} className="flex items-center gap-3">
<div className="flex-1">
<ColorPicker
color={color}
onChange={(newColor) => updateBackground(index, newColor)}
/>
</div>
{backgrounds.length > 1 && (
<Button
onClick={() => removeBackground(index)}
variant="ghost"
size="icon"
>
<X className="h-4 w-4" />
</Button>
)}
</div>
))}
</div>
<Button
onClick={handleOptimize}
disabled={textColorMutation.isPending || backgrounds.length === 0}
className="w-full mt-4"
>
{textColorMutation.isPending ? (
<>
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
Optimizing...
</>
) : (
<>
<Palette className="mr-2 h-4 w-4" />
Optimize Text Colors
</>
)}
</Button>
</div>
<div className="p-6 border rounded-lg bg-card bg-blue-50 dark:bg-blue-950/20">
<h3 className="font-semibold mb-2">How it works</h3>
<p className="text-sm text-muted-foreground">
This tool analyzes each background color and automatically selects either black
or white text to ensure maximum readability. The algorithm guarantees WCAG AA
compliance (4.5:1 contrast ratio) for normal text.
</p>
</div>
</div>
{/* Results */}
<div className="space-y-6">
{results.length > 0 ? (
<>
<div className="p-6 border rounded-lg bg-card">
<h2 className="text-xl font-semibold mb-4">Optimized Results</h2>
<div className="space-y-4">
{results.map((result, index) => (
<div
key={index}
className="p-4 border rounded-lg"
style={{ backgroundColor: result.background }}
>
<div className="flex items-center justify-between mb-3">
<div className="flex items-center gap-3">
<ColorDisplay color={result.background} size="sm" />
<code className="text-sm font-mono text-inherit">
{result.background}
</code>
</div>
</div>
<div
className="p-4 rounded border-2"
style={{
backgroundColor: result.background,
color: result.textcolor,
borderColor: result.textcolor,
}}
>
<p className="font-semibold mb-2" style={{ color: result.textcolor }}>
Sample Text Preview
</p>
<p className="text-sm" style={{ color: result.textcolor }}>
The quick brown fox jumps over the lazy dog. This is how your text
will look on this background color.
</p>
</div>
<div className="mt-3 grid grid-cols-2 gap-3 text-sm">
<div>
<span className="text-muted-foreground">Text Color: </span>
<code className="font-mono">{result.textcolor}</code>
</div>
<div>
<span className="text-muted-foreground">Contrast: </span>
<span className="font-medium">
{result.contrast_ratio.toFixed(2)}:1
</span>
</div>
<div className="flex items-center gap-2">
{result.wcag_aa ? (
<CheckCircle2 className="h-4 w-4 text-green-500" />
) : (
<XCircle className="h-4 w-4 text-red-500" />
)}
<span className={result.wcag_aa ? 'text-green-600 dark:text-green-400' : 'text-red-600 dark:text-red-400'}>
WCAG AA
</span>
</div>
<div className="flex items-center gap-2">
{result.wcag_aaa ? (
<CheckCircle2 className="h-4 w-4 text-green-500" />
) : (
<XCircle className="h-4 w-4 text-yellow-500" />
)}
<span className={result.wcag_aaa ? 'text-green-600 dark:text-green-400' : 'text-yellow-600 dark:text-yellow-400'}>
WCAG AAA
</span>
</div>
</div>
</div>
))}
</div>
</div>
</>
) : (
<div className="p-12 border rounded-lg bg-card text-center text-muted-foreground">
<Palette className="h-12 w-12 mx-auto mb-4 opacity-50" />
<p>Add background colors and click Optimize to see results</p>
</div>
)}
</div>
</div>
</div>
</div>
);
}

6
app/batch/page.tsx
View File

@@ -66,8 +66,10 @@ export default function BatchPage() {
break;
}
setOutputColors(result.colors);
toast.success(`Processed ${result.colors.length} colors`);
// Extract output colors from the result
const processed = result.colors.map((c) => c.output);
setOutputColors(processed);
toast.success(`Processed ${processed.length} colors`);
} catch (error) {
toast.error('Failed to process colors');
console.error(error);

6
app/palettes/gradient/page.tsx
View File

@@ -28,8 +28,8 @@ export default function GradientPage() {
count,
colorspace,
});
setGradient(result.colors);
toast.success(`Generated ${result.colors.length} colors`);
setGradient(result.gradient);
toast.success(`Generated ${result.gradient.length} colors`);
} catch (error) {
toast.error('Failed to generate gradient');
}
@@ -156,7 +156,7 @@ export default function GradientPage() {
{/* Preview */}
<div className="space-y-6">
{gradient.length > 0 && (
{gradient && gradient.length > 0 && (
<>
<div className="p-6 border rounded-lg bg-card">
<h2 className="text-xl font-semibold mb-4">Gradient Preview</h2>

86
app/palettes/harmony/page.tsx
View File

@@ -6,7 +6,7 @@ import { PaletteGrid } from '@/components/color/PaletteGrid';
import { ExportMenu } from '@/components/tools/ExportMenu';
import { Button } from '@/components/ui/button';
import { Select } from '@/components/ui/select';
import { useComplement, useRotate } from '@/lib/api/queries';
import { useGeneratePalette } from '@/lib/api/queries';
import { Loader2, Palette } from 'lucide-react';
import { toast } from 'sonner';
@@ -23,83 +23,17 @@ export default function HarmonyPage() {
const [harmonyType, setHarmonyType] = useState<HarmonyType>('complementary');
const [palette, setPalette] = useState<string[]>([]);
const complementMutation = useComplement();
const rotateMutation = useRotate();
const paletteMutation = useGeneratePalette();
const generateHarmony = async () => {
try {
let colors: string[] = [baseColor];
switch (harmonyType) {
case 'monochromatic':
// Base color with lightness variations
colors = [baseColor];
toast.info('Monochromatic harmony uses variations of the base color');
break;
case 'analogous':
// Base + 30° and -30°
const analog1 = await rotateMutation.mutateAsync({
colors: [baseColor],
amount: 30,
});
const analog2 = await rotateMutation.mutateAsync({
colors: [baseColor],
amount: -30,
});
colors = [analog2.colors[0], baseColor, analog1.colors[0]];
break;
case 'complementary':
// Base + opposite (180°)
const complement = await complementMutation.mutateAsync([baseColor]);
colors = [baseColor, complement.colors[0]];
break;
case 'split-complementary':
// Base + 150° and 210° (flanking the complement)
const split1 = await rotateMutation.mutateAsync({
colors: [baseColor],
amount: 150,
});
const split2 = await rotateMutation.mutateAsync({
colors: [baseColor],
amount: 210,
});
colors = [baseColor, split1.colors[0], split2.colors[0]];
break;
case 'triadic':
// Base + 120° and 240° (evenly spaced)
const tri1 = await rotateMutation.mutateAsync({
colors: [baseColor],
amount: 120,
});
const tri2 = await rotateMutation.mutateAsync({
colors: [baseColor],
amount: 240,
});
colors = [baseColor, tri1.colors[0], tri2.colors[0]];
break;
case 'tetradic':
// Base + 90°, 180°, 270° (square)
const tet1 = await rotateMutation.mutateAsync({
colors: [baseColor],
amount: 90,
});
const tet2 = await rotateMutation.mutateAsync({
colors: [baseColor],
amount: 180,
});
const tet3 = await rotateMutation.mutateAsync({
colors: [baseColor],
amount: 270,
});
colors = [baseColor, tet1.colors[0], tet2.colors[0], tet3.colors[0]];
break;
}
const result = await paletteMutation.mutateAsync({
base: baseColor,
scheme: harmonyType,
});
// Combine primary and secondary colors into flat array
const colors = [result.palette.primary, ...result.palette.secondary];
setPalette(colors);
toast.success(`Generated ${harmonyType} harmony palette`);
} catch (error) {
@@ -157,10 +91,10 @@ export default function HarmonyPage() {
<Button
onClick={generateHarmony}
disabled={complementMutation.isPending || rotateMutation.isPending}
disabled={paletteMutation.isPending}
className="w-full"
>
{complementMutation.isPending || rotateMutation.isPending ? (
{paletteMutation.isPending ? (
<>
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
Generating...

1
app/palettes/page.tsx
View File

@@ -23,7 +23,6 @@ export default function PalettesPage() {
href: '/palettes/harmony',
icon: Palette,
features: ['Color theory', 'Multiple schemes', 'Instant generation'],
comingSoon: true,
},
];

24
components/tools/ManipulationPanel.tsx
View File

@@ -38,8 +38,8 @@ export function ManipulationPanel({ color, onColorChange }: ManipulationPanelPro
colors: [color],
amount: lightenAmount,
});
if (result.results[0]) {
onColorChange(result.results[0].output);
if (result.colors[0]) {
onColorChange(result.colors[0].output);
toast.success(`Lightened by ${(lightenAmount * 100).toFixed(0)}%`);
}
} catch (error) {
@@ -53,8 +53,8 @@ export function ManipulationPanel({ color, onColorChange }: ManipulationPanelPro
colors: [color],
amount: darkenAmount,
});
if (result.results[0]) {
onColorChange(result.results[0].output);
if (result.colors[0]) {
onColorChange(result.colors[0].output);
toast.success(`Darkened by ${(darkenAmount * 100).toFixed(0)}%`);
}
} catch (error) {
@@ -68,8 +68,8 @@ export function ManipulationPanel({ color, onColorChange }: ManipulationPanelPro
colors: [color],
amount: saturateAmount,
});
if (result.results[0]) {
onColorChange(result.results[0].output);
if (result.colors[0]) {
onColorChange(result.colors[0].output);
toast.success(`Saturated by ${(saturateAmount * 100).toFixed(0)}%`);
}
} catch (error) {
@@ -83,8 +83,8 @@ export function ManipulationPanel({ color, onColorChange }: ManipulationPanelPro
colors: [color],
amount: desaturateAmount,
});
if (result.results[0]) {
onColorChange(result.results[0].output);
if (result.colors[0]) {
onColorChange(result.colors[0].output);
toast.success(`Desaturated by ${(desaturateAmount * 100).toFixed(0)}%`);
}
} catch (error) {
@@ -98,8 +98,8 @@ export function ManipulationPanel({ color, onColorChange }: ManipulationPanelPro
colors: [color],
amount: rotateAmount,
});
if (result.results[0]) {
onColorChange(result.results[0].output);
if (result.colors[0]) {
onColorChange(result.colors[0].output);
toast.success(`Rotated hue by ${rotateAmount}°`);
}
} catch (error) {
@@ -110,8 +110,8 @@ export function ManipulationPanel({ color, onColorChange }: ManipulationPanelPro
const handleComplement = async () => {
try {
const result = await complementMutation.mutateAsync([color]);
if (result.results[0]) {
onColorChange(result.results[0].output);
if (result.colors[0]) {
onColorChange(result.colors[0].output);
toast.success('Generated complementary color');
}
} catch (error) {

12
lib/api/client.ts
View File

@@ -27,6 +27,8 @@ import type {
NamedColorSearchData,
HealthData,
CapabilitiesData,
PaletteGenerateRequest,
PaletteGenerateData,
} from './types';
export class PastelAPIClient {
@@ -186,7 +188,7 @@ export class PastelAPIClient {
}
// Accessibility
async simulateColorblindness(request: ColorBlindnessRequest): Promise<ApiResponse<ColorBlindnessData>> {
async simulateColorBlindness(request: ColorBlindnessRequest): Promise<ApiResponse<ColorBlindnessData>> {
return this.request<ColorBlindnessData>('/colors/colorblind', {
method: 'POST',
body: JSON.stringify(request),
@@ -226,6 +228,14 @@ export class PastelAPIClient {
method: 'GET',
});
}
// Palette Generation
async generatePalette(request: PaletteGenerateRequest): Promise<ApiResponse<PaletteGenerateData>> {
return this.request<PaletteGenerateData>('/palettes/generate', {
method: 'POST',
body: JSON.stringify(request),
});
}
}
// Export singleton instance

15
lib/api/queries.ts
View File

@@ -18,6 +18,8 @@ import type {
GradientRequest,
GradientData,
ColorBlindnessRequest,
PaletteGenerateRequest,
PaletteGenerateData,
ColorBlindnessData,
TextColorRequest,
TextColorData,
@@ -234,3 +236,16 @@ export const useHealth = () => {
refetchInterval: 60000, // Check every minute
});
};
// Palette Generation
export const useGeneratePalette = () => {
return useMutation({
mutationFn: async (request: PaletteGenerateRequest) => {
const response = await pastelAPI.generatePalette(request);
if (!response.success) {
throw new Error(response.error.message);
}
return response.data;
},
});
};

39
lib/api/types.ts
View File

@@ -114,7 +114,9 @@ export interface ColorManipulationRequest {
}
export interface ColorManipulationData {
results: Array<{
operation?: string;
amount?: number;
colors: Array<{
input: string;
output: string;
}>;
@@ -165,7 +167,10 @@ export interface GradientRequest {
}
export interface GradientData {
colors: string[];
stops: string[];
count: number;
colorspace: string;
gradient: string[];
}
export interface ColorDistanceRequest {
@@ -196,21 +201,25 @@ export interface ColorBlindnessRequest {
}
export interface ColorBlindnessData {
simulations: Array<{
original: string;
simulated: string;
type: string;
colors: Array<{
input: string;
output: string;
difference_percentage: number;
}>;
}
export interface TextColorRequest {
background_colors: string[];
backgrounds: string[];
}
export interface TextColorData {
results: Array<{
colors: Array<{
background: string;
text_color: string;
textcolor: string;
contrast_ratio: number;
wcag_aa: boolean;
wcag_aaa: boolean;
}>;
}
@@ -243,3 +252,17 @@ export interface CapabilitiesData {
distance_metrics: string[];
colorblindness_types: string[];
}
export interface PaletteGenerateRequest {
base: string;
scheme: 'monochromatic' | 'analogous' | 'complementary' | 'split-complementary' | 'triadic' | 'tetradic';
}
export interface PaletteGenerateData {
base: string;
scheme: string;
palette: {
primary: string;
secondary: string[];
};
}