@pattern-stack/frontend-patterns 0.0.6 → 0.1.0

package/cli/commands/scaffold.ts

@@ -0,0 +1,224 @@
+/**
+ * Scaffold Command
+ * 
+ * Implementation of the `pattern-stack scaffold` command
+ * 
+ * Part of FRO-15: Component Scaffolding Commands
+ */
+
+import { promises as fs } from 'fs'
+import { join, dirname } from 'path'
+
+interface ScaffoldOptions {
+  template?: string
+  output?: string
+}
+
+export async function scaffoldCommand(type: string, name: string, options: ScaffoldOptions) {
+  console.log(`🏗️  Scaffolding ${type}: ${name}`)
+  
+  switch (type) {
+    case 'component':
+      await scaffoldComponent(name, options)
+      break
+    case 'feature':
+      await scaffoldFeature(name, options)
+      break
+    case 'template':
+      await scaffoldTemplate(name, options)
+      break
+    default:
+      console.error(`❌ Unknown scaffold type: ${type}`)
+      console.log('Available types: component, feature, template')
+      process.exit(1)
+  }
+}
+
+async function scaffoldComponent(name: string, options: ScaffoldOptions) {
+  const outputDir = options.output || `./src/atoms/composed/${name}`
+  
+  const componentContent = `/**
+ * ${name} Component
+ * 
+ * Generated by Pattern-Stack CLI
+ */
+
+import React from 'react'
+import { cn } from '../../utils/utils'
+
+export interface ${name}Props {
+  className?: string
+  children?: React.ReactNode
+}
+
+export function ${name}({ className, children, ...props }: ${name}Props) {
+  return (
+    <div className={cn("", className)} {...props}>
+      {children}
+    </div>
+  )
+}
+
+${name}.displayName = "${name}"`
+
+  const indexContent = `export { ${name} } from './${name}'
+export type { ${name}Props } from './${name}'`
+
+  const testContent = `/**
+ * ${name} Component Tests
+ */
+
+import { render, screen } from '@testing-library/react'
+import { ${name} } from './${name}'
+
+describe('${name}', () => {
+  it('renders children', () => {
+    render(<${name}>Test content</${name}>)
+    expect(screen.getByText('Test content')).toBeInTheDocument()
+  })
+
+  it('applies custom className', () => {
+    const { container } = render(<${name} className="custom-class" />)
+    expect(container.firstChild).toHaveClass('custom-class')
+  })
+})`
+
+  await ensureDir(outputDir)
+  await writeFile(join(outputDir, `${name}.tsx`), componentContent)
+  await writeFile(join(outputDir, 'index.ts'), indexContent)
+  await writeFile(join(outputDir, `${name}.test.tsx`), testContent)
+  
+  console.log(`✅ Component scaffolded: ${outputDir}`)
+}
+
+async function scaffoldFeature(name: string, options: ScaffoldOptions) {
+  const outputDir = options.output || `./src/features/${name.toLowerCase()}`
+  
+  // Feature hook
+  const hookContent = `/**
+ * ${name} Hooks
+ * 
+ * Generated by Pattern-Stack CLI
+ */
+
+import { useState, useEffect } from 'react'
+
+export function use${name}() {
+  const [data, setData] = useState(null)
+  const [loading, setLoading] = useState(false)
+  const [error, setError] = useState<Error | null>(null)
+
+  // Add your logic here
+
+  return {
+    data,
+    loading,
+    error,
+    refetch: () => {
+      // Implement refetch logic
+    }
+  }
+}`
+
+  // Feature component
+  const componentContent = `/**
+ * ${name} Component
+ * 
+ * Generated by Pattern-Stack CLI
+ */
+
+import React from 'react'
+import { use${name} } from '../hooks/use${name}'
+
+export interface ${name}ComponentProps {
+  className?: string
+}
+
+export function ${name}Component({ className }: ${name}ComponentProps) {
+  const { data, loading, error } = use${name}()
+
+  if (loading) return <div>Loading...</div>
+  if (error) return <div>Error: {error.message}</div>
+
+  return (
+    <div className={className}>
+      <h2>${name}</h2>
+      {/* Add your UI here */}
+    </div>
+  )
+}`
+
+  // Feature index
+  const indexContent = `export { use${name} } from './hooks/use${name}'
+export { ${name}Component } from './components/${name}Component'
+export type { ${name}ComponentProps } from './components/${name}Component'`
+
+  await ensureDir(join(outputDir, 'hooks'))
+  await ensureDir(join(outputDir, 'components'))
+  await writeFile(join(outputDir, 'hooks', `use${name}.ts`), hookContent)
+  await writeFile(join(outputDir, 'hooks', 'index.ts'), `export { use${name} } from './use${name}'`)
+  await writeFile(join(outputDir, 'components', `${name}Component.tsx`), componentContent)
+  await writeFile(join(outputDir, 'components', 'index.ts'), `export { ${name}Component } from './${name}Component'`)
+  await writeFile(join(outputDir, 'index.ts'), indexContent)
+  
+  console.log(`✅ Feature scaffolded: ${outputDir}`)
+}
+
+async function scaffoldTemplate(name: string, options: ScaffoldOptions) {
+  const outputDir = options.output || `./src/templates/${name.toLowerCase()}`
+  
+  const templateContent = `/**
+ * ${name} Template
+ * 
+ * Generated by Pattern-Stack CLI
+ */
+
+import React from 'react'
+import { PageTemplate } from '../PageTemplate'
+
+export interface ${name}TemplateProps {
+  title?: string
+  children?: React.ReactNode
+}
+
+export function ${name}Template({ 
+  title = "${name}",
+  children 
+}: ${name}TemplateProps) {
+  return (
+    <PageTemplate>
+      <div className="space-y-6">
+        <header>
+          <h1 className="text-3xl font-bold">{title}</h1>
+        </header>
+        
+        <main>
+          {children}
+        </main>
+      </div>
+    </PageTemplate>
+  )
+}`
+
+  const indexContent = `export { ${name}Template } from './${name}Template'
+export type { ${name}TemplateProps } from './${name}Template'`
+
+  await ensureDir(outputDir)
+  await writeFile(join(outputDir, `${name}Template.tsx`), templateContent)
+  await writeFile(join(outputDir, 'index.ts'), indexContent)
+  
+  console.log(`✅ Template scaffolded: ${outputDir}`)
+}
+
+async function ensureDir(dir: string) {
+  try {
+    await fs.mkdir(dir, { recursive: true })
+  } catch (error) {
+    // Directory might already exist
+  }
+}
+
+async function writeFile(path: string, content: string) {
+  await ensureDir(dirname(path))
+  await fs.writeFile(path, content, 'utf8')
+}