Files
pastel-ui/lib/api/queries.ts
valknarness 93889ab9bd fix: correct API integration and complete missing features
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>
2025-11-07 14:33:38 +01:00

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;
},
});
};