Files
pastel-ui/lib/api/queries.ts
valknarness 0ac49c0600 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

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