@soulbatical/tetra-dev-toolkit 1.20.21 → 1.20.23

package/bin/tetra-init.js

@@ -442,8 +442,8 @@ async function initCi(config, options) {
   // Detect project structure
   const hasBackend = existsSync(join(projectRoot, 'backend/package.json'))
   const hasFrontend = existsSync(join(projectRoot, 'frontend/package.json'))
-  const hasMigrations = existsSync(join(projectRoot, 'backend/supabase/migrations')) ||
-    existsSync(join(projectRoot, 'supabase/migrations'))
+  const hasMigrations = existsSync(join(projectRoot, 'supabase/migrations')) ||
+    existsSync(join(projectRoot, 'backend/supabase/migrations'))
 
   let workspaces
   if (hasBackend && hasFrontend) {
@@ -488,6 +488,31 @@ ${withLines.join('\n')}
 `
 
   writeIfMissing(join(workflowDir, 'quality.yml'), workflowContent, options)
+
+  // Deploy Migrations workflow (only if supabase migrations exist)
+  if (hasMigrations) {
+    const deployContent = `name: Deploy Migrations
+
+on:
+  push:
+    branches: [main]
+    paths:
+      - 'supabase/migrations/**'
+
+jobs:
+  deploy:
+    uses: mralbertzwolle/tetra/.github/workflows/deploy-migrations.yml@main
+    secrets: inherit
+`
+    writeIfMissing(join(workflowDir, 'deploy-migrations.yml'), deployContent, options)
+  }
+
+  // Ensure supabase/migrations/ directory exists at root
+  const migrationsDir = join(projectRoot, 'supabase/migrations')
+  if (!existsSync(migrationsDir)) {
+    mkdirSync(migrationsDir, { recursive: true })
+    console.log(`  📁 Created supabase/migrations/`)
+  }
 }
 
 function checkCompleteness() {
@@ -529,8 +554,9 @@ function checkCompleteness() {
     { path: 'frontend/next.config.ts', category: 'frontend', required: true },
     { path: 'frontend/src/app/layout.tsx', category: 'frontend', required: true },
 
-    // Database
-    { path: 'supabase/migrations', category: 'database', required: false },
+    // Database & CI
+    { path: 'supabase/migrations', category: 'database', required: true },
+    { path: '.github/workflows/deploy-migrations.yml', category: 'database', required: false },
   ]
 
   let currentCategory = ''

package/bin/tetra-style-audit.js

@@ -0,0 +1,86 @@
+#!/usr/bin/env node
+
+/**
+ * Tetra Style Compliance — detect styling drift in consumer projects.
+ *
+ * Scans frontend source files and checks for hardcoded layout dimensions,
+ * raw Tailwind color classes, hex colors, custom card patterns, and other
+ * things Tetra already solves via PageContainer, AppShell theme config, and
+ * CSS tokens (--tetra-bg, --tetra-text, --tetra-border, --tetra-accent, etc.).
+ *
+ * Usage:
+ *   tetra-style-audit                          # Audit current project
+ *   tetra-style-audit --path /path/to/project  # Audit specific project
+ *   tetra-style-audit --json                   # JSON output for CI
+ *   tetra-style-audit --ci                     # GitHub Actions annotations
+ *   tetra-style-audit --strict                 # Fail on warnings too
+ *   tetra-style-audit --fix-hint               # Show suggested fix per violation
+ *   tetra-style-audit --files "src/**\/*.tsx"  # Restrict to specific files
+ *
+ * Exit codes:
+ *   0 = clean (no critical violations)
+ *   1 = critical violations found (or any if --strict)
+ */
+
+import { program } from 'commander'
+import chalk from 'chalk'
+import {
+  runStyleComplianceAudit,
+  formatReport,
+  formatReportJSON,
+  formatCIAnnotations,
+} from '../lib/audits/style-compliance-audit.js'
+
+program
+  .name('tetra-style-audit')
+  .description('Detect styling drift from the Tetra design system')
+  .version('1.0.0')
+  .option('--path <dir>', 'Project root directory (default: cwd)')
+  .option('--json', 'JSON output for CI')
+  .option('--ci', 'GitHub Actions annotations for failures')
+  .option('--strict', 'Fail on any violation including warnings (default: only critical)')
+  .option('--fix-hint', 'Show suggested fix for each violation')
+  .option('--files <glob>', 'Restrict scan to specific files (glob pattern)')
+  .action(async (options) => {
+    try {
+      const projectRoot = options.path || process.cwd()
+
+      if (!options.json) {
+        console.log(chalk.gray('\n  Scanning for style drift...'))
+      }
+
+      const report = await runStyleComplianceAudit(projectRoot, {
+        filesGlob: options.files,
+      })
+
+      // Output
+      if (options.json) {
+        console.log(formatReportJSON(report))
+      } else {
+        console.log(formatReport(report, chalk, { fixHint: options.fixHint }))
+
+        if (options.ci) {
+          const annotations = formatCIAnnotations(report)
+          if (annotations) {
+            console.log(annotations)
+          }
+        }
+      }
+
+      // Exit code
+      const { summary } = report
+      if (options.strict) {
+        process.exit(summary.totalCritical > 0 || summary.totalWarnings > 0 ? 1 : 0)
+      } else {
+        process.exit(summary.totalCritical > 0 ? 1 : 0)
+      }
+    } catch (err) {
+      console.error(chalk.red(`\n  ERROR: ${err.message}\n`))
+      if (!options.json) {
+        console.error(chalk.gray(`  ${err.stack}`))
+      }
+      process.exit(1)
+    }
+  })
+
+program.parse()

package/lib/audits/style-compliance-audit.js

@@ -0,0 +1,528 @@
+/**
+ * Style Compliance Audit — scans a Tetra consumer project for styling drift.
+ *
+ * Detects hardcoded layout dimensions, raw Tailwind color classes, hex colors,
+ * custom card patterns, and other things Tetra already solves via PageContainer,
+ * AppShell theme config, and CSS tokens (--tetra-bg, --tetra-text, etc.).
+ */
+
+import { readFileSync, existsSync } from 'fs'
+import { join, relative } from 'path'
+import { glob } from 'glob'
+
+// ============================================================================
+// CONSTANTS
+// ============================================================================
+
+/** Files under these paths get relaxed rules (only critical #3 and #4). */
+const RELAXED_PATTERNS = [
+  /\/(auth)\//,
+  /\/\(auth\)\//,
+  /\/invite\//,
+  /\/onboarding\//,
+]
+
+/** Files under these paths are skipped entirely. */
+const SKIP_PATTERNS = [
+  /\/marketing\//,
+  /\/public\//,
+  /\/landing\//,
+]
+
+// ============================================================================
+// RULE DEFINITIONS
+// ============================================================================
+
+/** CRITICAL violations block CI. */
+const CRITICAL_RULES = [
+  {
+    id: 'hardcoded-page-width',
+    label: 'hardcoded page width',
+    fixHint: 'Use AppShell config.layout.pageMaxWidth or fullWidthPaths instead',
+    pageOnly: true,
+    check(line) {
+      // max-w-* in className
+      if (/className\s*=/.test(line) && /\bmax-w-(xs|sm|md|lg|xl|2xl|3xl|4xl|5xl|6xl|7xl|full|screen-\S+)\b/.test(line)) {
+        return line.match(/\bmax-w-(xs|sm|md|lg|xl|2xl|3xl|4xl|5xl|6xl|7xl|full|screen-\S+)\b/)?.[0] ?? 'max-w-*'
+      }
+      // container mx-auto in className
+      if (/className\s*=/.test(line) && /\bcontainer\b/.test(line) && /\bmx-auto\b/.test(line)) {
+        return 'container mx-auto'
+      }
+      return null
+    },
+  },
+  {
+    id: 'hardcoded-page-padding',
+    label: 'hardcoded page padding',
+    fixHint: 'Use AppShell config.layout.pagePadding preset instead',
+    pageOnly: true,
+    check(line) {
+      if (/className\s*=/.test(line) && /\b(p|px|py|pt|pb|pl|pr)-\d+\b/.test(line)) {
+        return line.match(/\b(p|px|py|pt|pb|pl|pr)-\d+\b/)?.[0] ?? 'p-*'
+      }
+      return null
+    },
+  },
+  {
+    id: 'hardcoded-hex-color',
+    label: 'hardcoded hex color',
+    fixHint: 'Use CSS token var(--tetra-accent) / var(--tetra-bg) etc., or set via AppShell theme config',
+    check(line) {
+      // Skip tetra-style-audit-disable-next-line handled upstream
+      // Inline style attr with hex
+      if (/style\s*=/.test(line) && /#[0-9a-fA-F]{3,8}\b/.test(line)) {
+        return line.match(/#[0-9a-fA-F]{3,8}\b/)?.[0] ?? '#hex'
+      }
+      // Tailwind arbitrary hex [#...]
+      if (/\[#[0-9a-fA-F]{3,8}\]/.test(line)) {
+        return line.match(/\[#[0-9a-fA-F]{3,8}\]/)?.[0] ?? '[#hex]'
+      }
+      return null
+    },
+  },
+  {
+    id: 'raw-tailwind-colors',
+    label: 'raw Tailwind color class',
+    fixHint: 'Replace with token classes (bg-background, text-foreground, border-border) or var(--tetra-*) tokens',
+    check(line) {
+      // Whitelist: transparent, current, inherit
+      const COLOR_NAMES = [
+        'white', 'black',
+        'gray', 'slate', 'zinc', 'neutral', 'stone',
+        'red', 'orange', 'amber', 'yellow', 'lime', 'green', 'emerald',
+        'teal', 'cyan', 'sky', 'blue', 'indigo', 'violet', 'purple',
+        'fuchsia', 'pink', 'rose',
+      ]
+      const colorRe = new RegExp(
+        `\\b(bg|text|border)-(${COLOR_NAMES.join('|')})-(\\d{2,3}|\\d{3}|\\d{2})\\b|\\b(bg|text|border)-(white|black)\\b`
+      )
+      // Must appear in className context
+      if (/className\s*=|class\s*=/.test(line) && colorRe.test(line)) {
+        const m = line.match(colorRe)
+        return m?.[0] ?? 'raw color class'
+      }
+      return null
+    },
+  },
+  {
+    id: 'custom-globals-override',
+    label: 'custom CSS color system overriding Tetra tokens',
+    fixHint: 'Set theme via AppShell theme prop; only override tokens in :root { --tetra-accent-subtle: ... } style',
+    cssOnly: true,
+    check(line, ctx) {
+      // Flag when defining core color variables outside the expected Tetra override pattern
+      const tetraVars = /--tetra-(accent|bg|text|border|bg-subtle)|--background\b|--foreground\b|--primary\b|--card\b/
+      if (tetraVars.test(line) && /:\s/.test(line)) {
+        // Allow if inside :root or html.dark (checked by context flag)
+        if (ctx && ctx.insideRootBlock) return null
+        return line.match(tetraVars)?.[0] ?? '--tetra-*'
+      }
+      return null
+    },
+  },
+  {
+    id: 'custom-card-classes',
+    label: 'hand-rolled card pattern',
+    fixHint: 'Use AutoCard or Card from @soulbatical/tetra-ui instead',
+    check(line) {
+      // rounded-xl border bg-card shadow or rounded-lg border border-gray-*
+      if (/className\s*=/.test(line)) {
+        if (/\brounded-(xl|lg|2xl)\b/.test(line) && /\bborder\b/.test(line) && /\b(shadow|bg-card|bg-white)\b/.test(line)) {
+          return 'rounded-* border bg-card/bg-white shadow'
+        }
+        if (/\brounded-(xl|lg)\b/.test(line) && /\bborder\b/.test(line) && /border-(gray|slate|zinc|neutral)-\d+/.test(line)) {
+          return 'rounded-* border border-gray-*'
+        }
+      }
+      return null
+    },
+  },
+]
+
+/** WARNING violations are reported but don't block CI by default. */
+const WARNING_RULES = [
+  {
+    id: 'inline-style-attr',
+    label: 'inline style attribute',
+    fixHint: 'Prefer className; if needed use var(--tetra-*) tokens in style props',
+    check(line) {
+      if (/style\s*=\s*\{\{/.test(line)) {
+        // Allow var(--tetra-*) usage
+        if (/var\(--tetra-/.test(line)) return null
+        return 'style={{ ... }}'
+      }
+      return null
+    },
+  },
+  {
+    id: 'hex-in-css',
+    label: 'hex color in CSS outside :root/html.dark',
+    fixHint: 'Move hex values into :root or html.dark CSS token blocks',
+    cssOnly: true,
+    check(line, ctx) {
+      if (ctx && ctx.insideRootBlock) return null
+      if (/#[0-9a-fA-F]{3,8}\b/.test(line) && /:\s/.test(line)) {
+        return line.match(/#[0-9a-fA-F]{3,8}\b/)?.[0] ?? '#hex'
+      }
+      return null
+    },
+  },
+  {
+    id: 'duplicate-page-header',
+    label: 'custom page header (use PageHeader from tetra-ui)',
+    fixHint: 'Import PageHeader from @soulbatical/tetra-ui',
+    check(line) {
+      if (/<h1\b[^>]*className\s*=[^>]*\btext-(2xl|3xl|4xl)\b[^>]*\bfont-bold\b/.test(line) ||
+          /<h1\b[^>]*className\s*=[^>]*\bfont-bold\b[^>]*\btext-(2xl|3xl|4xl)\b/.test(line)) {
+        return '<h1 className="text-2xl font-bold ...">'
+      }
+      return null
+    },
+  },
+]
+
+// ============================================================================
+// HELPERS
+// ============================================================================
+
+function isRelaxedPath(filePath) {
+  return RELAXED_PATTERNS.some((p) => p.test(filePath))
+}
+
+function isSkippedPath(filePath) {
+  return SKIP_PATTERNS.some((p) => p.test(filePath))
+}
+
+function isPageFile(filePath) {
+  return /app\/.*\/(page|layout)\.(tsx|jsx)$/.test(filePath)
+}
+
+function isCssFile(filePath) {
+  return /\.(css)$/.test(filePath)
+}
+
+/**
+ * Load extra whitelist entries from .tetra-style-whitelist.json in project root.
+ */
+function loadProjectWhitelist(projectRoot) {
+  const path = join(projectRoot, '.tetra-style-whitelist.json')
+  if (!existsSync(path)) return []
+  try {
+    const raw = readFileSync(path, 'utf-8')
+    return JSON.parse(raw).styleWhitelist || []
+  } catch {
+    return []
+  }
+}
+
+function isWhitelisted(filePath, projectWhitelist) {
+  for (const entry of projectWhitelist) {
+    const prefix = entry.path.replace(/\/\*\*$/, '').replace(/\/\*$/, '')
+    if (filePath.includes(prefix)) return true
+  }
+  return false
+}
+
+// ============================================================================
+// FILE SCANNER
+// ============================================================================
+
+async function scanFiles(projectRoot, filesGlob) {
+  if (filesGlob) {
+    return await glob(filesGlob, { cwd: projectRoot, ignore: ['**/node_modules/**', '**/.next/**', '**/dist/**', '**/build/**'] })
+  }
+
+  const patterns = [
+    'frontend/src/**/*.tsx',
+    'frontend/src/**/*.jsx',
+    'frontend/src/**/*.ts',
+    'frontend/src/**/*.js',
+    'frontend/src/**/*.css',
+  ]
+
+  const files = []
+  for (const pattern of patterns) {
+    const found = await glob(pattern, {
+      cwd: projectRoot,
+      ignore: ['**/node_modules/**', '**/.next/**', '**/dist/**', '**/build/**'],
+    })
+    files.push(...found)
+  }
+  return [...new Set(files)]
+}
+
+// ============================================================================
+// LINE-BY-LINE AUDIT
+// ============================================================================
+
+/**
+ * Track :root / html.dark block context for CSS files.
+ */
+function buildCssContext(lines, lineIndex) {
+  // Walk backwards to find if we're inside a :root or html.dark block
+  let braceDepth = 0
+  let insideRootBlock = false
+  for (let i = lineIndex; i >= 0; i--) {
+    const l = lines[i]
+    for (const ch of [...l].reverse()) {
+      if (ch === '}') braceDepth++
+      if (ch === '{') {
+        if (braceDepth === 0) {
+          // This opening brace owns us — check selector
+          if (/:root\b|html\.dark\b/.test(lines[i])) {
+            insideRootBlock = true
+          }
+          break
+        }
+        braceDepth--
+      }
+    }
+    if (braceDepth === 0 && insideRootBlock !== undefined) break
+  }
+  return { insideRootBlock }
+}
+
+/**
+ * Audit the content of a single file. Returns array of findings.
+ * Each finding: { id, label, severity, line, lineNumber, match, fixHint }
+ */
+function auditFileContent(content, filePath, relaxed) {
+  const findings = []
+  const lines = content.split('\n')
+  const css = isCssFile(filePath)
+  const page = isPageFile(filePath)
+
+  for (let i = 0; i < lines.length; i++) {
+    const line = lines[i]
+    const lineNumber = i + 1
+
+    // Disable comment check
+    if (i > 0 && /tetra-style-audit-disable-next-line/.test(lines[i - 1])) continue
+    if (/tetra-style-audit-disable-next-line/.test(line)) continue
+
+    const ctx = css ? buildCssContext(lines, i) : null
+
+    // Determine which rules apply
+    const criticalRules = CRITICAL_RULES.filter((r) => {
+      if (r.cssOnly && !css) return false
+      if (!r.cssOnly && css) return false
+      if (r.pageOnly && !page) return false
+      if (relaxed && r.pageOnly) return false // skip layout rules for relaxed paths
+      return true
+    })
+
+    const warningRules = WARNING_RULES.filter((r) => {
+      if (r.cssOnly && !css) return false
+      if (!r.cssOnly && css) return false
+      if (relaxed) return false // skip warnings for relaxed paths
+      return true
+    })
+
+    for (const rule of criticalRules) {
+      const match = rule.check(line, ctx)
+      if (match) {
+        findings.push({
+          id: rule.id,
+          label: rule.label,
+          severity: 'critical',
+          line: line.trim(),
+          lineNumber,
+          match,
+          fixHint: rule.fixHint,
+        })
+      }
+    }
+
+    for (const rule of warningRules) {
+      const match = rule.check(line, ctx)
+      if (match) {
+        findings.push({
+          id: rule.id,
+          label: rule.label,
+          severity: 'warning',
+          line: line.trim(),
+          lineNumber,
+          match,
+          fixHint: rule.fixHint,
+        })
+      }
+    }
+  }
+
+  return findings
+}
+
+// ============================================================================
+// MAIN AUDIT
+// ============================================================================
+
+/**
+ * Run the full style compliance audit.
+ *
+ * @param {string} projectRoot
+ * @param {{ filesGlob?: string }} options
+ * @returns {Promise<{ results: FileResult[], summary: Summary }>}
+ */
+export async function runStyleComplianceAudit(projectRoot, options = {}) {
+  const projectWhitelist = loadProjectWhitelist(projectRoot)
+  const allFiles = await scanFiles(projectRoot, options.filesGlob)
+
+  const results = []
+
+  for (const filePath of allFiles.sort()) {
+    if (isSkippedPath(filePath) || isWhitelisted(filePath, projectWhitelist)) {
+      results.push({
+        file: filePath,
+        status: 'skipped',
+        reason: isSkippedPath(filePath) ? 'marketing/public path' : 'whitelisted',
+        findings: [],
+      })
+      continue
+    }
+
+    const relaxed = isRelaxedPath(filePath)
+    const fullPath = join(projectRoot, filePath)
+    let content = ''
+    try {
+      content = readFileSync(fullPath, 'utf-8')
+    } catch {
+      results.push({ file: filePath, status: 'error', reason: 'could not read file', findings: [] })
+      continue
+    }
+
+    const findings = auditFileContent(content, filePath, relaxed)
+    const criticalCount = findings.filter((f) => f.severity === 'critical').length
+    const warningCount = findings.filter((f) => f.severity === 'warning').length
+
+    let status
+    if (criticalCount > 0) {
+      status = 'violation'
+    } else if (warningCount > 0) {
+      status = 'warning'
+    } else {
+      status = 'clean'
+    }
+
+    results.push({ file: filePath, status, reason: null, findings })
+  }
+
+  // Summary
+  const scanned = results.filter((r) => r.status !== 'skipped' && r.status !== 'error')
+  const totalCritical = scanned.reduce((n, r) => n + r.findings.filter((f) => f.severity === 'critical').length, 0)
+  const totalWarnings = scanned.reduce((n, r) => n + r.findings.filter((f) => f.severity === 'warning').length, 0)
+  const filesWithViolations = scanned.filter((r) => r.status === 'violation').length
+  const filesWithWarnings = scanned.filter((r) => r.status === 'warning').length
+  const cleanFiles = scanned.filter((r) => r.status === 'clean').length
+
+  return {
+    results,
+    summary: {
+      filesScanned: scanned.length,
+      filesSkipped: results.filter((r) => r.status === 'skipped').length,
+      filesWithViolations,
+      filesWithWarnings,
+      cleanFiles,
+      totalCritical,
+      totalWarnings,
+    },
+  }
+}
+
+// ============================================================================
+// FORMATTERS
+// ============================================================================
+
+/**
+ * Format the report as pretty terminal output.
+ *
+ * @param {object} report
+ * @param {object} chalk
+ * @param {{ fixHint?: boolean }} options
+ */
+export function formatReport(report, chalk, options = {}) {
+  const lines = []
+  const { results, summary } = report
+
+  lines.push('')
+  lines.push(chalk.blue.bold('  Style Compliance Audit'))
+  lines.push(chalk.blue('  ' + '═'.repeat(24)))
+  lines.push('')
+
+  // Only print files that have findings
+  const filesWithFindings = results.filter(
+    (r) => r.status === 'violation' || r.status === 'warning'
+  )
+
+  if (filesWithFindings.length === 0) {
+    lines.push(chalk.green('  No style violations found.'))
+  }
+
+  for (const r of filesWithFindings) {
+    lines.push(chalk.white.bold(`  ${r.file}`))
+
+    for (const f of r.findings) {
+      const icon = f.severity === 'critical' ? chalk.red('    ✗') : chalk.yellow('    ⚠')
+      const idStr = f.severity === 'critical'
+        ? chalk.red(f.id)
+        : chalk.yellow(f.id)
+      lines.push(`${icon} ${idStr} ${chalk.gray(`(line ${f.lineNumber})`)}`)
+      lines.push(chalk.gray(`        ${f.match}`))
+      if (options.fixHint && f.fixHint) {
+        lines.push(chalk.cyan(`        → ${f.fixHint}`))
+      }
+    }
+
+    lines.push('')
+  }
+
+  lines.push(chalk.gray('  ' + '─'.repeat(39)))
+  lines.push(
+    chalk.white(
+      `  ${summary.filesScanned} files scanned · ` +
+      chalk.red.bold(`${summary.totalCritical} critical`) +
+      ` · ` +
+      chalk.yellow(`${summary.totalWarnings} warnings`)
+    )
+  )
+  lines.push('')
+
+  if (summary.totalCritical > 0) {
+    lines.push(
+      chalk.red.bold(
+        `  ✗ ${summary.totalCritical} critical violation${summary.totalCritical > 1 ? 's' : ''} found. Fix before merging.`
+      )
+    )
+    lines.push('')
+  } else {
+    lines.push(chalk.green.bold('  All files pass critical style checks.'))
+    lines.push('')
+  }
+
+  return lines.join('\n')
+}
+
+/**
+ * Format the report as JSON.
+ */
+export function formatReportJSON(report) {
+  return JSON.stringify(report, null, 2)
+}
+
+/**
+ * Output GitHub Actions annotations for violations.
+ */
+export function formatCIAnnotations(report) {
+  const annotations = []
+
+  for (const r of report.results) {
+    for (const f of r.findings) {
+      const level = f.severity === 'critical' ? 'error' : 'warning'
+      annotations.push(
+        `::${level} file=${r.file},line=${f.lineNumber},title=Style Compliance ${f.id}::${f.match} — ${f.fixHint || f.label}`
+      )
+    }
+  }
+
+  return annotations.join('\n')
+}