popeye-cli 1.4.7 → 1.6.0

package/src/generators/all.ts

@@ -9,6 +9,13 @@ import type { ProjectSpec, WorkspaceConfig } from '../types/project.js';
 import type { GenerationResult } from './python.js';
 import { generateFullstackProject } from './fullstack.js';
 import { generateWebsiteProject } from './website.js';
+import type { WebsiteContentContext } from './website-context.js';
+import { buildWebsiteContext, validateWebsiteContext } from './website-context.js';
+import {
+  generateDesignTokensPackage as generateDesignTokensPackageImpl,
+  generateUiPackage as generateUiPackageImpl,
+} from './shared-packages.js';
+import type { BrandColorOptions } from './shared-packages.js';
 
 /**
  * Options for all project generation
@@ -17,6 +24,8 @@ export interface AllGeneratorOptions {
   skipWebsite?: boolean;
   skipSharedPackages?: boolean;
   includeExamples?: boolean;
+  /** Content context from user docs for populating website templates */
+  contentContext?: WebsiteContentContext;
 }
 
 /**
@@ -341,346 +350,25 @@ Generated by [Popeye CLI](https://github.com/popeye-cli/popeye)
 
 /**
  * Generate design tokens package
+ * Delegates to shared-packages.ts with optional brand color passthrough
  */
-export function generateDesignTokensPackage(projectName: string): {
+export function generateDesignTokensPackage(
+  projectName: string,
+  brandColors?: BrandColorOptions
+): {
   files: Array<{ path: string; content: string }>;
 } {
-  return {
-    files: [
-      {
-        path: 'package.json',
-        content: JSON.stringify(
-          {
-            name: `@${projectName}/design-tokens`,
-            version: '1.0.0',
-            type: 'module',
-            main: './dist/index.js',
-            types: './dist/index.d.ts',
-            exports: {
-              '.': './dist/index.js',
-              './tailwind': './dist/tailwind-preset.js',
-            },
-            scripts: {
-              build: 'tsc',
-              dev: 'tsc --watch',
-            },
-            devDependencies: {
-              typescript: '^5.3.3',
-            },
-          },
-          null,
-          2
-        ),
-      },
-      {
-        path: 'tsconfig.json',
-        content: JSON.stringify(
-          {
-            compilerOptions: {
-              target: 'ES2020',
-              module: 'ESNext',
-              moduleResolution: 'bundler',
-              declaration: true,
-              outDir: './dist',
-              strict: true,
-              esModuleInterop: true,
-              skipLibCheck: true,
-            },
-            include: ['src'],
-          },
-          null,
-          2
-        ),
-      },
-      {
-        path: 'src/index.ts',
-        content: `/**
- * Design tokens for ${projectName}
- */
-
-export * from './colors.js';
-export * from './typography.js';
-`,
-      },
-      {
-        path: 'src/colors.ts',
-        content: `/**
- * Color palette
- */
-
-export const colors = {
-  primary: {
-    50: '#f0f9ff',
-    100: '#e0f2fe',
-    200: '#bae6fd',
-    300: '#7dd3fc',
-    400: '#38bdf8',
-    500: '#0ea5e9',
-    600: '#0284c7',
-    700: '#0369a1',
-    800: '#075985',
-    900: '#0c4a6e',
-  },
-  secondary: {
-    50: '#f8fafc',
-    100: '#f1f5f9',
-    200: '#e2e8f0',
-    300: '#cbd5e1',
-    400: '#94a3b8',
-    500: '#64748b',
-    600: '#475569',
-    700: '#334155',
-    800: '#1e293b',
-    900: '#0f172a',
-  },
-} as const;
-
-export type ColorScale = typeof colors.primary;
-export type Colors = typeof colors;
-`,
-      },
-      {
-        path: 'src/typography.ts',
-        content: `/**
- * Typography settings
- */
-
-export const typography = {
-  fontFamily: {
-    sans: ['Inter', 'system-ui', 'sans-serif'],
-    mono: ['JetBrains Mono', 'Fira Code', 'monospace'],
-  },
-  fontSize: {
-    xs: ['0.75rem', { lineHeight: '1rem' }],
-    sm: ['0.875rem', { lineHeight: '1.25rem' }],
-    base: ['1rem', { lineHeight: '1.5rem' }],
-    lg: ['1.125rem', { lineHeight: '1.75rem' }],
-    xl: ['1.25rem', { lineHeight: '1.75rem' }],
-    '2xl': ['1.5rem', { lineHeight: '2rem' }],
-    '3xl': ['1.875rem', { lineHeight: '2.25rem' }],
-    '4xl': ['2.25rem', { lineHeight: '2.5rem' }],
-    '5xl': ['3rem', { lineHeight: '1' }],
-    '6xl': ['3.75rem', { lineHeight: '1' }],
-  },
-} as const;
-
-export type Typography = typeof typography;
-`,
-      },
-      {
-        path: 'src/tailwind-preset.ts',
-        content: `/**
- * Tailwind CSS preset with design tokens
- */
-
-import { colors } from './colors.js';
-import { typography } from './typography.js';
-
-export const preset = {
-  theme: {
-    extend: {
-      colors,
-      fontFamily: typography.fontFamily,
-      fontSize: typography.fontSize,
-    },
-  },
-};
-
-export default preset;
-`,
-      },
-    ],
-  };
+  return generateDesignTokensPackageImpl(projectName, brandColors);
 }
 
 /**
  * Generate UI components package
+ * Delegates to shared-packages.ts
  */
 export function generateUiPackage(projectName: string): {
   files: Array<{ path: string; content: string }>;
 } {
-  return {
-    files: [
-      {
-        path: 'package.json',
-        content: JSON.stringify(
-          {
-            name: `@${projectName}/ui`,
-            version: '1.0.0',
-            type: 'module',
-            main: './dist/index.js',
-            types: './dist/index.d.ts',
-            exports: {
-              '.': './dist/index.js',
-              './button': './dist/button.js',
-              './card': './dist/card.js',
-            },
-            scripts: {
-              build: 'tsc',
-              dev: 'tsc --watch',
-            },
-            dependencies: {
-              clsx: '^2.1.0',
-              'tailwind-merge': '^2.2.0',
-            },
-            peerDependencies: {
-              react: '>=18.0.0',
-              'react-dom': '>=18.0.0',
-            },
-            devDependencies: {
-              '@types/react': '^18.2.0',
-              '@types/react-dom': '^18.2.0',
-              typescript: '^5.3.3',
-            },
-          },
-          null,
-          2
-        ),
-      },
-      {
-        path: 'tsconfig.json',
-        content: JSON.stringify(
-          {
-            compilerOptions: {
-              target: 'ES2020',
-              module: 'ESNext',
-              moduleResolution: 'bundler',
-              declaration: true,
-              outDir: './dist',
-              strict: true,
-              esModuleInterop: true,
-              skipLibCheck: true,
-              jsx: 'react-jsx',
-            },
-            include: ['src'],
-          },
-          null,
-          2
-        ),
-      },
-      {
-        path: 'src/index.ts',
-        content: `/**
- * Shared UI components for ${projectName}
- */
-
-export * from './button.js';
-export * from './card.js';
-export * from './utils.js';
-`,
-      },
-      {
-        path: 'src/utils.ts',
-        content: `import { clsx, type ClassValue } from 'clsx';
-import { twMerge } from 'tailwind-merge';
-
-export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs));
-}
-`,
-      },
-      {
-        path: 'src/button.tsx',
-        content: `import * as React from 'react';
-import { cn } from './utils.js';
-
-export interface ButtonProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-  variant?: 'primary' | 'secondary' | 'outline' | 'ghost';
-  size?: 'sm' | 'md' | 'lg';
-}
-
-export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, variant = 'primary', size = 'md', ...props }, ref) => {
-    return (
-      <button
-        className={cn(
-          'inline-flex items-center justify-center rounded-md font-medium transition-colors',
-          'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2',
-          'disabled:pointer-events-none disabled:opacity-50',
-          {
-            // Variants
-            'bg-primary-600 text-white hover:bg-primary-500': variant === 'primary',
-            'bg-secondary-100 text-secondary-900 hover:bg-secondary-200': variant === 'secondary',
-            'border border-secondary-300 bg-transparent hover:bg-secondary-50': variant === 'outline',
-            'bg-transparent hover:bg-secondary-100': variant === 'ghost',
-            // Sizes
-            'h-8 px-3 text-sm': size === 'sm',
-            'h-10 px-4 text-sm': size === 'md',
-            'h-12 px-6 text-base': size === 'lg',
-          },
-          className
-        )}
-        ref={ref}
-        {...props}
-      />
-    );
-  }
-);
-
-Button.displayName = 'Button';
-`,
-      },
-      {
-        path: 'src/card.tsx',
-        content: `import * as React from 'react';
-import { cn } from './utils.js';
-
-export interface CardProps extends React.HTMLAttributes<HTMLDivElement> {}
-
-export const Card = React.forwardRef<HTMLDivElement, CardProps>(
-  ({ className, ...props }, ref) => (
-    <div
-      ref={ref}
-      className={cn(
-        'rounded-lg border border-secondary-200 bg-white shadow-sm',
-        className
-      )}
-      {...props}
-    />
-  )
-);
-
-Card.displayName = 'Card';
-
-export const CardHeader = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cn('flex flex-col space-y-1.5 p-6', className)}
-    {...props}
-  />
-));
-
-CardHeader.displayName = 'CardHeader';
-
-export const CardTitle = React.forwardRef<
-  HTMLParagraphElement,
-  React.HTMLAttributes<HTMLHeadingElement>
->(({ className, ...props }, ref) => (
-  <h3
-    ref={ref}
-    className={cn('text-lg font-semibold leading-none tracking-tight', className)}
-    {...props}
-  />
-));
-
-CardTitle.displayName = 'CardTitle';
-
-export const CardContent = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
-  <div ref={ref} className={cn('p-6 pt-0', className)} {...props} />
-));
-
-CardContent.displayName = 'CardContent';
-`,
-      },
-    ],
-  };
+  return generateUiPackageImpl(projectName);
 }
 
 /**
@@ -692,7 +380,8 @@ CardContent.displayName = 'CardContent';
  */
 export async function generateAllProject(
   spec: ProjectSpec,
-  outputDir: string
+  outputDir: string,
+  options: AllGeneratorOptions = {}
 ): Promise<GenerationResult> {
   const projectName = spec.name || 'my-project';
   const projectDir = path.join(outputDir, projectName);
@@ -707,6 +396,30 @@ export async function generateAllProject(
     await ensureDir(path.join(projectDir, 'packages', 'contracts'));
     await ensureDir(path.join(projectDir, '.popeye'));
 
+    // Auto-build content context if not provided
+    let contentContext = options.contentContext;
+    let contextWarning: string | undefined;
+    if (!contentContext) {
+      try {
+        contentContext = await buildWebsiteContext(projectDir, projectName);
+      } catch (e) {
+        contextWarning = e instanceof Error ? e.message : 'Unknown error building website context';
+        // Proceed with defaults, but warning is logged below
+      }
+    }
+    if (contextWarning) {
+      // Log warning so user sees it, but don't block generation
+      console.warn(`[website-context] Warning: ${contextWarning}`);
+    }
+
+    // Soft validation: log quality issues without blocking monorepo generation
+    if (contentContext) {
+      const validation = validateWebsiteContext(contentContext, projectName);
+      for (const issue of [...validation.issues, ...validation.warnings]) {
+        console.warn(`[website-context] ${issue}`);
+      }
+    }
+
     // Generate fullstack first (creates apps/frontend and apps/backend)
     const fullstackResult = await generateFullstackProject(spec, outputDir);
     if (!fullstackResult.success) {
@@ -720,6 +433,7 @@ export async function generateAllProject(
       workspaceMode: true,
       skipDocker: false, // Website needs its own Dockerfile
       skipReadme: false,
+      contentContext: contentContext,
     });
     if (!websiteResult.success) {
       return {
@@ -729,8 +443,11 @@ export async function generateAllProject(
     }
     filesCreated.push(...websiteResult.filesCreated);
 
-    // Generate shared packages
-    const designTokens = generateDesignTokensPackage(projectName);
+    // Generate shared packages (pass brand colors if available)
+    const brandColors: BrandColorOptions | undefined = contentContext?.brand?.primaryColor
+      ? { primaryColor: contentContext.brand.primaryColor }
+      : undefined;
+    const designTokens = generateDesignTokensPackage(projectName, brandColors);
     for (const file of designTokens.files) {
       const filePath = path.join(projectDir, 'packages', 'design-tokens', file.path);
       await ensureDir(path.dirname(filePath));