popeye-cli 1.4.7 → 1.6.0

package/src/generators/templates/website-config.ts

@@ -0,0 +1,444 @@
+/**
+ * Website configuration templates (non-content)
+ * Package configs, build tools, Docker, vitest, and env declarations
+ */
+
+/**
+ * Generate Next.js package.json
+ */
+export function generateWebsitePackageJson(projectName: string): string {
+  return `{
+  "name": "${projectName}-website",
+  "version": "1.0.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev -p 3001",
+    "build": "next build",
+    "start": "next start -p 3001",
+    "lint": "next lint",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "next": "^14.1.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "lucide-react": "^0.312.0",
+    "clsx": "^2.1.0",
+    "tailwind-merge": "^2.2.0"
+  },
+  "devDependencies": {
+    "@types/node": "^20.11.0",
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
+    "autoprefixer": "^10.4.17",
+    "postcss": "^8.4.33",
+    "tailwindcss": "^3.4.1",
+    "typescript": "^5.3.3",
+    "@testing-library/react": "^14.1.2",
+    "@vitejs/plugin-react": "^4.2.1",
+    "vitest": "^1.2.0",
+    "jsdom": "^24.0.0"
+  }
+}
+`;
+}
+
+/**
+ * Generate Next.js config
+ */
+export function generateNextConfig(): string {
+  return `/** @type {import('next').NextConfig} */
+const nextConfig = {
+  // Enable React Strict Mode for better development
+  reactStrictMode: true,
+
+  // Image optimization
+  images: {
+    domains: [],
+    formats: ['image/avif', 'image/webp'],
+  },
+
+  // Disable x-powered-by header
+  poweredByHeader: false,
+
+  // Trailing slash config
+  trailingSlash: false,
+
+  // Headers for security
+  async headers() {
+    return [
+      {
+        source: '/:path*',
+        headers: [
+          {
+            key: 'X-DNS-Prefetch-Control',
+            value: 'on',
+          },
+          {
+            key: 'X-Content-Type-Options',
+            value: 'nosniff',
+          },
+        ],
+      },
+    ];
+  },
+};
+
+module.exports = nextConfig;
+`;
+}
+
+/**
+ * Generate website tsconfig.json
+ */
+export function generateWebsiteTsconfig(): string {
+  return `{
+  "compilerOptions": {
+    "target": "ES2017",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}
+`;
+}
+
+/**
+ * Options for generating the Tailwind config
+ */
+export interface TailwindConfigOptions {
+  /** Primary brand color (hex) to generate color scale from */
+  primaryColor?: string;
+  /** Whether to import workspace design-tokens preset */
+  workspaceMode?: boolean;
+  /** Project name (for workspace preset import path) */
+  projectName?: string;
+}
+
+/**
+ * Generate Tailwind config for website
+ *
+ * @param options - Optional configuration for brand colors and workspace mode
+ * @returns Tailwind config source code
+ */
+export function generateWebsiteTailwindConfig(options?: TailwindConfigOptions): string {
+  const colorScale = options?.primaryColor
+    ? generateInlineColorScale(options.primaryColor)
+    : defaultColorScale();
+
+  const presetImport = options?.workspaceMode && options?.projectName
+    ? `import designPreset from '@${options.projectName}/design-tokens/tailwind';\n`
+    : '';
+
+  const presetsBlock = options?.workspaceMode && options?.projectName
+    ? `  presets: [designPreset],\n`
+    : '';
+
+  return `import type { Config } from 'tailwindcss';
+${presetImport}
+const config: Config = {
+${presetsBlock}  content: [
+    './src/pages/**/*.{js,ts,jsx,tsx,mdx}',
+    './src/components/**/*.{js,ts,jsx,tsx,mdx}',
+    './src/app/**/*.{js,ts,jsx,tsx,mdx}',
+  ],
+  theme: {
+    extend: {
+      colors: {
+        primary: {
+${colorScale}
+        },
+        background: 'hsl(var(--background))',
+        foreground: 'hsl(var(--foreground))',
+        muted: {
+          DEFAULT: 'hsl(var(--muted))',
+          foreground: 'hsl(var(--muted-foreground))',
+        },
+        accent: {
+          DEFAULT: 'hsl(var(--accent))',
+          foreground: 'hsl(var(--accent-foreground))',
+        },
+        card: {
+          DEFAULT: 'hsl(var(--card))',
+          foreground: 'hsl(var(--card-foreground))',
+        },
+        border: 'hsl(var(--border))',
+        ring: 'hsl(var(--ring))',
+      },
+      fontFamily: {
+        sans: ['var(--font-inter)', 'system-ui', 'sans-serif'],
+      },
+      borderColor: {
+        DEFAULT: 'hsl(var(--border))',
+      },
+      borderRadius: {
+        lg: 'var(--radius)',
+        md: 'calc(var(--radius) - 2px)',
+        sm: 'calc(var(--radius) - 4px)',
+      },
+      keyframes: {
+        fadeIn: {
+          '0%': { opacity: '0' },
+          '100%': { opacity: '1' },
+        },
+        slideUp: {
+          '0%': { opacity: '0', transform: 'translateY(20px)' },
+          '100%': { opacity: '1', transform: 'translateY(0)' },
+        },
+      },
+      animation: {
+        fadeIn: 'fadeIn 0.5s ease-out',
+        slideUp: 'slideUp 0.5s ease-out',
+      },
+    },
+  },
+  plugins: [],
+};
+
+export default config;
+`;
+}
+
+/**
+ * Generate inline color scale entries from a hex color
+ */
+function generateInlineColorScale(hex: string): string {
+  const rgb = hexToRgb(hex);
+  if (!rgb) return defaultColorScale();
+
+  const hsl = rgbToHsl(rgb.r, rgb.g, rgb.b);
+  const stops = [
+    { key: '50', lightness: 0.95 },
+    { key: '100', lightness: 0.90 },
+    { key: '200', lightness: 0.80 },
+    { key: '300', lightness: 0.68 },
+    { key: '400', lightness: 0.56 },
+    { key: '500', lightness: 0.48 },
+    { key: '600', lightness: 0.40 },
+    { key: '700', lightness: 0.32 },
+    { key: '800', lightness: 0.24 },
+    { key: '900', lightness: 0.15 },
+  ];
+
+  return stops
+    .map(stop => `          ${stop.key}: '${hslToHex(hsl.h, hsl.s, stop.lightness)}',`)
+    .join('\n');
+}
+
+function defaultColorScale(): string {
+  return `          50: '#f0f9ff',
+          100: '#e0f2fe',
+          200: '#bae6fd',
+          300: '#7dd3fc',
+          400: '#38bdf8',
+          500: '#0ea5e9',
+          600: '#0284c7',
+          700: '#0369a1',
+          800: '#075985',
+          900: '#0c4a6e',`;
+}
+
+// --- Color conversion helpers (inline to avoid circular deps) ---
+
+function hexToRgb(hex: string): { r: number; g: number; b: number } | null {
+  const cleaned = hex.replace(/^#/, '');
+  if (cleaned.length !== 6) return null;
+  const r = parseInt(cleaned.substring(0, 2), 16);
+  const g = parseInt(cleaned.substring(2, 4), 16);
+  const b = parseInt(cleaned.substring(4, 6), 16);
+  if (isNaN(r) || isNaN(g) || isNaN(b)) return null;
+  return { r, g, b };
+}
+
+function rgbToHsl(r: number, g: number, b: number): { h: number; s: number; l: number } {
+  const rn = r / 255;
+  const gn = g / 255;
+  const bn = b / 255;
+  const max = Math.max(rn, gn, bn);
+  const min = Math.min(rn, gn, bn);
+  const l = (max + min) / 2;
+  let h = 0;
+  let s = 0;
+  if (max !== min) {
+    const d = max - min;
+    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+    if (max === rn) h = ((gn - bn) / d + (gn < bn ? 6 : 0)) / 6;
+    else if (max === gn) h = ((bn - rn) / d + 2) / 6;
+    else h = ((rn - gn) / d + 4) / 6;
+  }
+  return { h, s, l };
+}
+
+function hslToHex(h: number, s: number, l: number): string {
+  const hue2rgb = (p: number, q: number, t: number): number => {
+    let tn = t;
+    if (tn < 0) tn += 1;
+    if (tn > 1) tn -= 1;
+    if (tn < 1 / 6) return p + (q - p) * 6 * tn;
+    if (tn < 1 / 2) return q;
+    if (tn < 2 / 3) return p + (q - p) * (2 / 3 - tn) * 6;
+    return p;
+  };
+  let r: number, g: number, b: number;
+  if (s === 0) {
+    r = g = b = l;
+  } else {
+    const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+    const p = 2 * l - q;
+    r = hue2rgb(p, q, h + 1 / 3);
+    g = hue2rgb(p, q, h);
+    b = hue2rgb(p, q, h - 1 / 3);
+  }
+  const toHex = (n: number): string => {
+    const val = Math.round(n * 255).toString(16);
+    return val.length === 1 ? '0' + val : val;
+  };
+  return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
+}
+
+/**
+ * Generate PostCSS config for website
+ */
+export function generateWebsitePostcssConfig(): string {
+  return `module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};
+`;
+}
+
+/**
+ * Generate website Dockerfile
+ */
+export function generateWebsiteDockerfile(): string {
+  return `# Build stage
+FROM node:20-alpine AS builder
+
+WORKDIR /app
+
+# Copy package files
+COPY package*.json ./
+
+# Install dependencies
+RUN npm ci
+
+# Copy source
+COPY . .
+
+# Build
+RUN npm run build
+
+# Production stage
+FROM node:20-alpine AS runner
+
+WORKDIR /app
+
+ENV NODE_ENV=production
+ENV NEXT_TELEMETRY_DISABLED=1
+
+# Create non-root user
+RUN addgroup --system --gid 1001 nodejs
+RUN adduser --system --uid 1001 nextjs
+
+# Copy built assets
+COPY --from=builder /app/public ./public
+COPY --from=builder /app/.next/standalone ./
+COPY --from=builder /app/.next/static ./.next/static
+
+USER nextjs
+
+EXPOSE 3000
+
+ENV PORT=3000
+ENV HOSTNAME="0.0.0.0"
+
+CMD ["node", "server.js"]
+`;
+}
+
+/**
+ * Generate vitest config for website
+ */
+export function generateWebsiteVitestConfig(): string {
+  return `import { defineConfig } from 'vitest/config';
+import react from '@vitejs/plugin-react';
+import path from 'path';
+
+export default defineConfig({
+  plugins: [react()],
+  test: {
+    environment: 'jsdom',
+    include: ['**/*.test.{ts,tsx}'],
+    globals: true,
+    setupFiles: ['./tests/setup.ts'],
+  },
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, './src'),
+    },
+  },
+});
+`;
+}
+
+/**
+ * Generate vitest setup for website
+ */
+export function generateWebsiteVitestSetup(): string {
+  return `import '@testing-library/jest-dom';
+
+// Mock next/navigation
+vi.mock('next/navigation', () => ({
+  useRouter: () => ({
+    push: vi.fn(),
+    replace: vi.fn(),
+    prefetch: vi.fn(),
+  }),
+  useSearchParams: () => new URLSearchParams(),
+  usePathname: () => '/',
+}));
+
+// Mock next/image
+vi.mock('next/image', () => ({
+  default: (props: Record<string, unknown>) => {
+    // eslint-disable-next-line @next/next/no-img-element, jsx-a11y/alt-text
+    return <img {...props} />;
+  },
+}));
+`;
+}
+
+/**
+ * Generate Next.js environment declaration
+ */
+export function generateWebsiteNextEnv(): string {
+  return `/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.
+`;
+}