Files
pastel-ui/next.config.ts

35 lines
771 B
TypeScript
Raw Normal View History

feat: initial Next.js 15 implementation with TypeScript and Tailwind CSS 4 Add complete project structure and foundation: **Core Setup:** - Next.js 15.5.6 with App Router and React 19 - TypeScript 5.7 with strict mode - Tailwind CSS 4.1 with custom theme configuration - ESLint and Prettier configuration **Dependencies Installed:** - @tanstack/react-query - Server state management - zustand - Client state management - framer-motion - Animations - lucide-react - Icon library - react-colorful - Color picker component - cmdk - Command palette - sonner - Toast notifications - clsx + tailwind-merge - Class name utilities **Project Structure:** - app/ - Next.js App Router pages - components/ - React components (ui, color, tools, layout, providers) - lib/ - Utilities, API client, hooks, stores, constants - tests/ - Unit and E2E test directories **API Integration:** - Type-safe Pastel API client with all 21 endpoints - Complete TypeScript type definitions for requests/responses - Error handling and response types **UI Components:** - Button component with variants (default, outline, ghost, destructive) - Input component with focus states - Providers wrapper (React Query, Toast) - Root layout with Inter font and metadata **Pages:** - Home page with gradient hero and feature cards - Links to playground and palette generation (pages pending) **Configuration:** - Tailwind with HSL color variables for theming - Dark/light mode CSS variables - Custom animations (fade-in, slide-up, slide-down) - @tailwindcss/forms and @tailwindcss/typography plugins Build successful: 102 kB First Load JS, static generation working. Ready for color components and playground implementation. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-07 10:55:42 +01:00
import type { NextConfig } from 'next';
const nextConfig: NextConfig = {
reactStrictMode: true,
feat: add Docker support with GitHub Actions CI/CD Add comprehensive Docker deployment with automated builds: **Docker Configuration:** - Multi-stage Dockerfile for optimized Next.js production builds - Stage 1: Install dependencies with pnpm - Stage 2: Build application with standalone output - Stage 3: Minimal runtime image with non-root user - Includes health check endpoint - Final image size optimized - .dockerignore for efficient build context - Enable standalone output in next.config.ts for Docker **GitHub Actions Workflow:** - Automated Docker image builds on push to main and tags - Multi-platform support (linux/amd64, linux/arm64) - Push to GitHub Container Registry (ghcr.io) - Smart tagging strategy: - `latest` for main branch - `vX.X.X` for semver tags - `main-SHA` for commit-specific images - Build cache optimization with GitHub Actions cache - Artifact attestation for supply chain security **Docker Compose:** - Combined stack for UI + API - Environment variable configuration - Health checks for both services - Automatic restart policies - Shared network configuration **Documentation:** - Updated README with Docker deployment instructions - Pre-built image usage from GHCR - Docker Compose setup guide - Local build instructions - Available image tags reference **Production Ready:** - Images automatically published to ghcr.io/valknarness/pastel-ui - Supports both x64 and ARM64 architectures - Health checks for container orchestration - Environment-based configuration - Non-root user for security 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-07 14:36:30 +01:00
// Enable standalone output for Docker
output: 'standalone',
feat: initial Next.js 15 implementation with TypeScript and Tailwind CSS 4 Add complete project structure and foundation: **Core Setup:** - Next.js 15.5.6 with App Router and React 19 - TypeScript 5.7 with strict mode - Tailwind CSS 4.1 with custom theme configuration - ESLint and Prettier configuration **Dependencies Installed:** - @tanstack/react-query - Server state management - zustand - Client state management - framer-motion - Animations - lucide-react - Icon library - react-colorful - Color picker component - cmdk - Command palette - sonner - Toast notifications - clsx + tailwind-merge - Class name utilities **Project Structure:** - app/ - Next.js App Router pages - components/ - React components (ui, color, tools, layout, providers) - lib/ - Utilities, API client, hooks, stores, constants - tests/ - Unit and E2E test directories **API Integration:** - Type-safe Pastel API client with all 21 endpoints - Complete TypeScript type definitions for requests/responses - Error handling and response types **UI Components:** - Button component with variants (default, outline, ghost, destructive) - Input component with focus states - Providers wrapper (React Query, Toast) - Root layout with Inter font and metadata **Pages:** - Home page with gradient hero and feature cards - Links to playground and palette generation (pages pending) **Configuration:** - Tailwind with HSL color variables for theming - Dark/light mode CSS variables - Custom animations (fade-in, slide-up, slide-down) - @tailwindcss/forms and @tailwindcss/typography plugins Build successful: 102 kB First Load JS, static generation working. Ready for color components and playground implementation. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-07 10:55:42 +01:00
// React Compiler disabled for now (requires babel-plugin-react-compiler)
// experimental: {
// reactCompiler: true,
// },
// Image optimization
images: {
formats: ['image/avif', 'image/webp'],
},
// Bundle analyzer (conditional)
...(process.env.ANALYZE === 'true' && {
webpack(config) {
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
config.plugins.push(
new BundleAnalyzerPlugin({
analyzerMode: 'static',
openAnalyzer: false,
})
);
return config;
},
}),
};
export default nextConfig;