Files
pastel-ui/lib/api/queries.ts

252 lines
6.3 KiB
TypeScript
Raw Normal View History

feat: implement color playground with interactive picker and info display Add complete color manipulation interface: **Color Components:** - ColorPicker - Interactive hex color picker with text input - Uses react-colorful for visual selection - Manual input support for any color format - Real-time updates - ColorDisplay - Large color preview swatch - Configurable sizes (sm, md, lg, xl) - Optional border styling - Accessible with ARIA labels - ColorInfo - Comprehensive color information display - Shows all formats: Hex, RGB, HSL, Lab, OkLab - Copy to clipboard functionality for each format - Displays brightness, luminance, light/dark type - Shows named color matches **API Integration:** - React Query hooks for all Pastel API endpoints - useColorInfo - Get color information - useConvertFormat - Format conversion - useLighten, useDarken, useSaturate, etc. - Manipulations - useGenerateRandom, useGenerateDistinct, useGenerateGradient - useNamedColors - Cached named colors list - Automatic error handling and loading states **Playground Page (/playground):** - Two-column layout: picker + info - Live color preview with large swatch - Real-time API integration with loading states - Error handling with user-friendly messages - Quick action buttons (ready for implementation) - Responsive grid layout **Features:** - Toast notifications for clipboard copy - Loading spinners during API calls - Error display with helpful messages - Accessible keyboard navigation - Smooth transitions and animations Build successful with playground page rendering! Ready for color manipulation actions. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-07 11:05:23 +01:00
'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,
feat: implement missing features and improvements Add comprehensive feature set and fixes: **Theme Improvements:** - Fix theme flickering by adding blocking script in layout - Prevents FOUC (Flash of Unstyled Content) - Smooth transitions between light and dark modes **Tailwind CSS v4 Migration:** - Convert globals.css to Tailwind CSS v4 format - Use @import "tailwindcss" instead of @tailwind directives - Implement @theme block with OkLCH color space - Add @plugin directives for forms and typography - Use :root and .dark class-based theming - Add all custom animations in CSS - Create postcss.config.mjs with @tailwindcss/postcss **Dev Environment:** - Add .env.local with API on port 3001 - Add dev:api and dev:all scripts to package.json - Create .env for API with port 3001 configuration - Enable running both UI and API simultaneously **New Features Implemented:** 1. **Harmony Palettes** (app/palettes/harmony/page.tsx) - Generate color harmonies based on color theory - Support for 6 harmony types: - Monochromatic - Analogous (±30°) - Complementary (180°) - Split-complementary - Triadic (120° spacing) - Tetradic/Square (90° spacing) - Uses complement and rotate API endpoints - Export harmonies in multiple formats 2. **Color Blindness Simulator** (app/accessibility/colorblind/page.tsx) - Simulate 3 types of color blindness: - Protanopia (red-blind, ~1% males) - Deuteranopia (green-blind, ~1% males) - Tritanopia (blue-blind, rare) - Side-by-side comparison of original vs simulated - Support for multiple colors (up to 10) - Educational information about each type - Accessibility tips and best practices 3. **Batch Operations** (app/batch/page.tsx) - Process up to 100 colors at once - Text input (line-separated or comma-separated) - 5 operations supported: - Lighten/Darken - Saturate/Desaturate - Rotate hue - Adjustable amount slider - Export processed colors - Live validation and color count **API Query Hooks:** - Add useSimulateColorBlindness hook - Add useTextColor hook - Export ColorBlindnessRequest and TextColorRequest types **Files Added:** - postcss.config.mjs - .env.local - ../pastel-api/.env - app/accessibility/colorblind/page.tsx - app/palettes/harmony/page.tsx **Files Modified:** - app/globals.css (Tailwind v4 migration) - app/layout.tsx (theme flicker fix) - app/batch/page.tsx (functional implementation) - lib/api/queries.ts (new hooks) - package.json (dev scripts) - tailwind.config.ts (simplified, CSS-first) All features build successfully and are ready for testing. Development server can now run with API via `pnpm dev:all`. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-07 13:47:16 +01:00
ColorBlindnessRequest,
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
PaletteGenerateRequest,
PaletteGenerateData,
feat: implement missing features and improvements Add comprehensive feature set and fixes: **Theme Improvements:** - Fix theme flickering by adding blocking script in layout - Prevents FOUC (Flash of Unstyled Content) - Smooth transitions between light and dark modes **Tailwind CSS v4 Migration:** - Convert globals.css to Tailwind CSS v4 format - Use @import "tailwindcss" instead of @tailwind directives - Implement @theme block with OkLCH color space - Add @plugin directives for forms and typography - Use :root and .dark class-based theming - Add all custom animations in CSS - Create postcss.config.mjs with @tailwindcss/postcss **Dev Environment:** - Add .env.local with API on port 3001 - Add dev:api and dev:all scripts to package.json - Create .env for API with port 3001 configuration - Enable running both UI and API simultaneously **New Features Implemented:** 1. **Harmony Palettes** (app/palettes/harmony/page.tsx) - Generate color harmonies based on color theory - Support for 6 harmony types: - Monochromatic - Analogous (±30°) - Complementary (180°) - Split-complementary - Triadic (120° spacing) - Tetradic/Square (90° spacing) - Uses complement and rotate API endpoints - Export harmonies in multiple formats 2. **Color Blindness Simulator** (app/accessibility/colorblind/page.tsx) - Simulate 3 types of color blindness: - Protanopia (red-blind, ~1% males) - Deuteranopia (green-blind, ~1% males) - Tritanopia (blue-blind, rare) - Side-by-side comparison of original vs simulated - Support for multiple colors (up to 10) - Educational information about each type - Accessibility tips and best practices 3. **Batch Operations** (app/batch/page.tsx) - Process up to 100 colors at once - Text input (line-separated or comma-separated) - 5 operations supported: - Lighten/Darken - Saturate/Desaturate - Rotate hue - Adjustable amount slider - Export processed colors - Live validation and color count **API Query Hooks:** - Add useSimulateColorBlindness hook - Add useTextColor hook - Export ColorBlindnessRequest and TextColorRequest types **Files Added:** - postcss.config.mjs - .env.local - ../pastel-api/.env - app/accessibility/colorblind/page.tsx - app/palettes/harmony/page.tsx **Files Modified:** - app/globals.css (Tailwind v4 migration) - app/layout.tsx (theme flicker fix) - app/batch/page.tsx (functional implementation) - lib/api/queries.ts (new hooks) - package.json (dev scripts) - tailwind.config.ts (simplified, CSS-first) All features build successfully and are ready for testing. Development server can now run with API via `pnpm dev:all`. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-07 13:47:16 +01:00
ColorBlindnessData,
TextColorRequest,
TextColorData,
feat: implement color playground with interactive picker and info display Add complete color manipulation interface: **Color Components:** - ColorPicker - Interactive hex color picker with text input - Uses react-colorful for visual selection - Manual input support for any color format - Real-time updates - ColorDisplay - Large color preview swatch - Configurable sizes (sm, md, lg, xl) - Optional border styling - Accessible with ARIA labels - ColorInfo - Comprehensive color information display - Shows all formats: Hex, RGB, HSL, Lab, OkLab - Copy to clipboard functionality for each format - Displays brightness, luminance, light/dark type - Shows named color matches **API Integration:** - React Query hooks for all Pastel API endpoints - useColorInfo - Get color information - useConvertFormat - Format conversion - useLighten, useDarken, useSaturate, etc. - Manipulations - useGenerateRandom, useGenerateDistinct, useGenerateGradient - useNamedColors - Cached named colors list - Automatic error handling and loading states **Playground Page (/playground):** - Two-column layout: picker + info - Live color preview with large swatch - Real-time API integration with loading states - Error handling with user-friendly messages - Quick action buttons (ready for implementation) - Responsive grid layout **Features:** - Toast notifications for clipboard copy - Loading spinners during API calls - Error display with helpful messages - Accessible keyboard navigation - Smooth transitions and animations Build successful with playground page rendering! Ready for color manipulation actions. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-07 11:05:23 +01:00
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;
},
});
};
feat: implement missing features and improvements Add comprehensive feature set and fixes: **Theme Improvements:** - Fix theme flickering by adding blocking script in layout - Prevents FOUC (Flash of Unstyled Content) - Smooth transitions between light and dark modes **Tailwind CSS v4 Migration:** - Convert globals.css to Tailwind CSS v4 format - Use @import "tailwindcss" instead of @tailwind directives - Implement @theme block with OkLCH color space - Add @plugin directives for forms and typography - Use :root and .dark class-based theming - Add all custom animations in CSS - Create postcss.config.mjs with @tailwindcss/postcss **Dev Environment:** - Add .env.local with API on port 3001 - Add dev:api and dev:all scripts to package.json - Create .env for API with port 3001 configuration - Enable running both UI and API simultaneously **New Features Implemented:** 1. **Harmony Palettes** (app/palettes/harmony/page.tsx) - Generate color harmonies based on color theory - Support for 6 harmony types: - Monochromatic - Analogous (±30°) - Complementary (180°) - Split-complementary - Triadic (120° spacing) - Tetradic/Square (90° spacing) - Uses complement and rotate API endpoints - Export harmonies in multiple formats 2. **Color Blindness Simulator** (app/accessibility/colorblind/page.tsx) - Simulate 3 types of color blindness: - Protanopia (red-blind, ~1% males) - Deuteranopia (green-blind, ~1% males) - Tritanopia (blue-blind, rare) - Side-by-side comparison of original vs simulated - Support for multiple colors (up to 10) - Educational information about each type - Accessibility tips and best practices 3. **Batch Operations** (app/batch/page.tsx) - Process up to 100 colors at once - Text input (line-separated or comma-separated) - 5 operations supported: - Lighten/Darken - Saturate/Desaturate - Rotate hue - Adjustable amount slider - Export processed colors - Live validation and color count **API Query Hooks:** - Add useSimulateColorBlindness hook - Add useTextColor hook - Export ColorBlindnessRequest and TextColorRequest types **Files Added:** - postcss.config.mjs - .env.local - ../pastel-api/.env - app/accessibility/colorblind/page.tsx - app/palettes/harmony/page.tsx **Files Modified:** - app/globals.css (Tailwind v4 migration) - app/layout.tsx (theme flicker fix) - app/batch/page.tsx (functional implementation) - lib/api/queries.ts (new hooks) - package.json (dev scripts) - tailwind.config.ts (simplified, CSS-first) All features build successfully and are ready for testing. Development server can now run with API via `pnpm dev:all`. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-07 13:47:16 +01:00
// 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;
},
});
};
feat: implement color playground with interactive picker and info display Add complete color manipulation interface: **Color Components:** - ColorPicker - Interactive hex color picker with text input - Uses react-colorful for visual selection - Manual input support for any color format - Real-time updates - ColorDisplay - Large color preview swatch - Configurable sizes (sm, md, lg, xl) - Optional border styling - Accessible with ARIA labels - ColorInfo - Comprehensive color information display - Shows all formats: Hex, RGB, HSL, Lab, OkLab - Copy to clipboard functionality for each format - Displays brightness, luminance, light/dark type - Shows named color matches **API Integration:** - React Query hooks for all Pastel API endpoints - useColorInfo - Get color information - useConvertFormat - Format conversion - useLighten, useDarken, useSaturate, etc. - Manipulations - useGenerateRandom, useGenerateDistinct, useGenerateGradient - useNamedColors - Cached named colors list - Automatic error handling and loading states **Playground Page (/playground):** - Two-column layout: picker + info - Live color preview with large swatch - Real-time API integration with loading states - Error handling with user-friendly messages - Quick action buttons (ready for implementation) - Responsive grid layout **Features:** - Toast notifications for clipboard copy - Loading spinners during API calls - Error display with helpful messages - Accessible keyboard navigation - Smooth transitions and animations Build successful with playground page rendering! Ready for color manipulation actions. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-07 11:05:23 +01:00
// 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
});
};
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
// 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;
},
});
};