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>
252 lines
6.3 KiB
TypeScript
252 lines
6.3 KiB
TypeScript
'use client';
|
|
|
|
import { useQuery, useMutation, UseQueryOptions } from '@tanstack/react-query';
|
|
import { pastelAPI } from './client';
|
|
import type {
|
|
ColorInfoRequest,
|
|
ColorInfoData,
|
|
ConvertFormatRequest,
|
|
ConvertFormatData,
|
|
ColorManipulationRequest,
|
|
ColorManipulationData,
|
|
ColorMixRequest,
|
|
ColorMixData,
|
|
RandomColorsRequest,
|
|
RandomColorsData,
|
|
DistinctColorsRequest,
|
|
DistinctColorsData,
|
|
GradientRequest,
|
|
GradientData,
|
|
ColorBlindnessRequest,
|
|
PaletteGenerateRequest,
|
|
PaletteGenerateData,
|
|
ColorBlindnessData,
|
|
TextColorRequest,
|
|
TextColorData,
|
|
NamedColorsData,
|
|
HealthData,
|
|
} from './types';
|
|
|
|
// Color Information
|
|
export const useColorInfo = (
|
|
request: ColorInfoRequest,
|
|
options?: Omit<UseQueryOptions<ColorInfoData>, 'queryKey' | 'queryFn'>
|
|
) => {
|
|
return useQuery({
|
|
queryKey: ['colorInfo', request.colors],
|
|
queryFn: async () => {
|
|
const response = await pastelAPI.getColorInfo(request);
|
|
if (!response.success) {
|
|
throw new Error(response.error.message);
|
|
}
|
|
return response.data;
|
|
},
|
|
enabled: request.colors.length > 0 && request.colors.every((c) => c.length > 0),
|
|
...options,
|
|
});
|
|
};
|
|
|
|
// Format Conversion
|
|
export const useConvertFormat = () => {
|
|
return useMutation({
|
|
mutationFn: async (request: ConvertFormatRequest) => {
|
|
const response = await pastelAPI.convertFormat(request);
|
|
if (!response.success) {
|
|
throw new Error(response.error.message);
|
|
}
|
|
return response.data;
|
|
},
|
|
});
|
|
};
|
|
|
|
// Color Manipulation
|
|
export const useLighten = () => {
|
|
return useMutation({
|
|
mutationFn: async (request: ColorManipulationRequest) => {
|
|
const response = await pastelAPI.lighten(request);
|
|
if (!response.success) {
|
|
throw new Error(response.error.message);
|
|
}
|
|
return response.data;
|
|
},
|
|
});
|
|
};
|
|
|
|
export const useDarken = () => {
|
|
return useMutation({
|
|
mutationFn: async (request: ColorManipulationRequest) => {
|
|
const response = await pastelAPI.darken(request);
|
|
if (!response.success) {
|
|
throw new Error(response.error.message);
|
|
}
|
|
return response.data;
|
|
},
|
|
});
|
|
};
|
|
|
|
export const useSaturate = () => {
|
|
return useMutation({
|
|
mutationFn: async (request: ColorManipulationRequest) => {
|
|
const response = await pastelAPI.saturate(request);
|
|
if (!response.success) {
|
|
throw new Error(response.error.message);
|
|
}
|
|
return response.data;
|
|
},
|
|
});
|
|
};
|
|
|
|
export const useDesaturate = () => {
|
|
return useMutation({
|
|
mutationFn: async (request: ColorManipulationRequest) => {
|
|
const response = await pastelAPI.desaturate(request);
|
|
if (!response.success) {
|
|
throw new Error(response.error.message);
|
|
}
|
|
return response.data;
|
|
},
|
|
});
|
|
};
|
|
|
|
export const useRotate = () => {
|
|
return useMutation({
|
|
mutationFn: async (request: ColorManipulationRequest) => {
|
|
const response = await pastelAPI.rotate(request);
|
|
if (!response.success) {
|
|
throw new Error(response.error.message);
|
|
}
|
|
return response.data;
|
|
},
|
|
});
|
|
};
|
|
|
|
export const useComplement = () => {
|
|
return useMutation({
|
|
mutationFn: async (colors: string[]) => {
|
|
const response = await pastelAPI.complement(colors);
|
|
if (!response.success) {
|
|
throw new Error(response.error.message);
|
|
}
|
|
return response.data;
|
|
},
|
|
});
|
|
};
|
|
|
|
export const useMixColors = () => {
|
|
return useMutation({
|
|
mutationFn: async (request: ColorMixRequest) => {
|
|
const response = await pastelAPI.mix(request);
|
|
if (!response.success) {
|
|
throw new Error(response.error.message);
|
|
}
|
|
return response.data;
|
|
},
|
|
});
|
|
};
|
|
|
|
// Color Generation
|
|
export const useGenerateRandom = () => {
|
|
return useMutation({
|
|
mutationFn: async (request: RandomColorsRequest) => {
|
|
const response = await pastelAPI.generateRandom(request);
|
|
if (!response.success) {
|
|
throw new Error(response.error.message);
|
|
}
|
|
return response.data;
|
|
},
|
|
});
|
|
};
|
|
|
|
export const useGenerateDistinct = () => {
|
|
return useMutation({
|
|
mutationFn: async (request: DistinctColorsRequest) => {
|
|
const response = await pastelAPI.generateDistinct(request);
|
|
if (!response.success) {
|
|
throw new Error(response.error.message);
|
|
}
|
|
return response.data;
|
|
},
|
|
});
|
|
};
|
|
|
|
export const useGenerateGradient = () => {
|
|
return useMutation({
|
|
mutationFn: async (request: GradientRequest) => {
|
|
const response = await pastelAPI.generateGradient(request);
|
|
if (!response.success) {
|
|
throw new Error(response.error.message);
|
|
}
|
|
return response.data;
|
|
},
|
|
});
|
|
};
|
|
|
|
// Color Blindness Simulation
|
|
export const useSimulateColorBlindness = () => {
|
|
return useMutation({
|
|
mutationFn: async (request: ColorBlindnessRequest) => {
|
|
const response = await pastelAPI.simulateColorBlindness(request);
|
|
if (!response.success) {
|
|
throw new Error(response.error.message);
|
|
}
|
|
return response.data;
|
|
},
|
|
});
|
|
};
|
|
|
|
// Text Color Optimizer
|
|
export const useTextColor = () => {
|
|
return useMutation({
|
|
mutationFn: async (request: TextColorRequest) => {
|
|
const response = await pastelAPI.getTextColor(request);
|
|
if (!response.success) {
|
|
throw new Error(response.error.message);
|
|
}
|
|
return response.data;
|
|
},
|
|
});
|
|
};
|
|
|
|
// Named Colors
|
|
export const useNamedColors = () => {
|
|
return useQuery({
|
|
queryKey: ['namedColors'],
|
|
queryFn: async () => {
|
|
const response = await pastelAPI.getNamedColors();
|
|
if (!response.success) {
|
|
throw new Error(response.error.message);
|
|
}
|
|
return response.data;
|
|
},
|
|
staleTime: Infinity, // Named colors never change
|
|
});
|
|
};
|
|
|
|
// Health Check
|
|
export const useHealth = () => {
|
|
return useQuery({
|
|
queryKey: ['health'],
|
|
queryFn: async () => {
|
|
const response = await pastelAPI.getHealth();
|
|
if (!response.success) {
|
|
throw new Error(response.error.message);
|
|
}
|
|
return response.data;
|
|
},
|
|
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;
|
|
},
|
|
});
|
|
};
|