@catchdrift/cli 0.1.19 → 0.1.21

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@catchdrift/cli",
-  "version": "0.1.19",
+  "version": "0.1.21",
   "description": "CLI for Drift — install, check, and manage design system coverage for any React app.",
   "keywords": [
     "design-system",

package/src/commands/init.mjs

@@ -31,6 +31,7 @@ import {
 } from '../lib/storybook.mjs'
 import {
   writeDriftConfig,
+  writeEnvLocal,
   writeAIRulesFiles,
   writeClaudeSkills,
   patchAppEntry,
@@ -339,7 +340,9 @@ export async function init(argv) {
     dsPackages,
     threshold:     Number(threshold) || 80,
     components,
+    framework,
   })
+  if (figmaToken) writeEnvLocal(cwd, { figmaToken })
   spinner.stop('drift.config.ts written')
 
   // ── Step 7: Write AI rules files ─────────────────────────────────────────────
@@ -397,67 +400,72 @@ export async function init(argv) {
   console.log('')
   p.outro(pc.green('Drift is set up ✓'))
 
-  // Build next steps dynamically based on what was configured
-  const nextSteps = []
-
-  if (dsPackages?.length) {
-    nextSteps.push(`  ${pc.cyan('npx catchdrift sync')}   Auto-populate registry from ${dsPackages.join(', ')}`)
-  } else if (!sources.includes('storybook') || Object.keys(components).length === 0) {
-    nextSteps.push(`  ${pc.cyan('npx catchdrift sync')}   Auto-populate registry once you have a DS package`)
-  }
+  // ── What was set up (human-readable) ────────────────────────────────────────
+  const patchedShort = patched ? patched.replace(cwd + '/', '').replace(cwd, '') : null
+  console.log(`
+${pc.bold('What was set up:')}
+  ${pc.green('✓')} Overlay added to your app ${patchedShort ? pc.dim('(' + patchedShort + ')') : pc.yellow('— see manual step below')}
+  ${pc.green('✓')} AI rules written ${pc.dim('— your AI tools will use DS components by default')}
+  ${pc.green('✓')} Claude skills added ${pc.dim('— /drift-sync, /drift-scaffold, /drift-context, ...')}
+  ${addCI ? pc.green('✓') + ' GitHub check added ' + pc.dim('— every PR will show a coverage score') : pc.dim('○  GitHub check skipped')}`)
 
-  nextSteps.push(`  ${pc.cyan('npm run dev')}            Start your app, then press ${pc.bold('D')} to open Drift`)
-  nextSteps.push(`  ${pc.cyan('npx catchdrift check')}   Run a coverage scan ${pc.dim('(app must be running)')}`)
-  nextSteps.push(`  ${pc.cyan('git push')}               First PR will show a drift delta comment`)
+  // ── Immediate next step — specific to what was configured ───────────────────
+  console.log(`\n${pc.bold('Do this now:')}`)
 
-  if (!sources.includes('storybook') && !storybook.found) {
-    nextSteps.push(`\n  ${pc.yellow('Storybook not set up')} — run ${pc.bold('npx storybook@latest init')} when ready,`)
-    nextSteps.push(`  then re-run ${pc.bold('npx catchdrift init')} to complete the coverage loop.`)
-  }
+  if (figmaFiles.length > 0 && skillFiles.length > 0) {
+    console.log(`
+  Your components are in Figma. Pull them into the registry now:
 
-  console.log(`
-${pc.bold('What was created:')}
-  drift.config.ts                    ${pc.dim('DS component registry')}
-  ${rulesFiles.map(f => f.padEnd(34)).join('\n  ')}${pc.dim('AI constraints')}
-  ${skillFiles.length ? `.claude/commands/               ${pc.dim('Claude Code skills (/drift-sync, /drift-scaffold, etc.)')}` : ''}
-  ${addCI ? '.github/workflows/drift-check.yml  ' + pc.dim('CI drift check on every PR') : ''}
-  ${patched ? patched.padEnd(34) + pc.dim('DriftOverlay added (dev-only)') : ''}
-
-${pc.bold('Next steps:')}
-${nextSteps.join('\n')}
-
-${pc.bold('Your team\'s daily commands (Claude Code):')}
-  ${pc.blue('/drift-context')}    ${pc.dim('See DS state at a glance — run this first')}
-  ${pc.blue('/drift-prd')}        ${pc.dim('Generate a component inventory for a PRD')}
-  ${pc.blue('/drift-scaffold')}   ${pc.dim('Scaffold a new screen using only DS components')}
-  ${pc.blue('/drift check')}      ${pc.dim('Verify coverage before submitting a PR')}
-  ${pc.blue('/drift-sync')}       ${pc.dim('Re-sync registry after adding DS components')}
-  ${pc.blue('/drift fix <X>')}    ${pc.dim('Migrate a custom component to its DS equivalent')}
-
-${pc.dim('Docs: https://catchdrift.ai  ·  Issues: https://github.com/dyoon92/design-drift/issues')}
+  ${pc.cyan('1.')} Open ${pc.bold('Claude Code')} in this project folder
+  ${pc.cyan('2.')} Run: ${pc.blue('/drift-sync figma')}
+       This reads your Figma file and registers all your DS components.
+  ${pc.cyan('3.')} Run: ${pc.bold('npm run dev')}  →  press ${pc.bold('D')}  →  see live coverage
 `)
+  } else if (sources.includes('storybook') && Object.keys(components).length > 0) {
+    console.log(`
+  Your components were imported from Storybook ✓
 
-  if (!patched) {
-    console.log(`${pc.yellow('Manual step needed')} — add DriftOverlay to your app entry point:
+  ${pc.cyan('1.')} Run: ${pc.bold('npm run dev')}
+  ${pc.cyan('2.')} Press ${pc.bold('D')} to open the Drift overlay — you should see real coverage.
+`)
+  } else if (dsPackages?.length) {
+    console.log(`
+  ${pc.cyan('1.')} Run: ${pc.bold('npx catchdrift sync')}
+       Scans your codebase for imports from ${dsPackages.join(', ')} and registers them.
+  ${pc.cyan('2.')} Run: ${pc.bold('npm run dev')}  →  press ${pc.bold('D')}  →  see live coverage
+`)
+  } else {
+    console.log(`
+  ${pc.cyan('1.')} Run: ${pc.bold('npm run dev')}  →  press ${pc.bold('D')}  →  the overlay opens
+       Coverage will show 0% until you register your DS components.
+  ${pc.cyan('2.')} Add your components to ${pc.bold('drift.config.ts')} or connect a source:
+       • Figma:  re-run ${pc.bold('npx catchdrift init')} and select Figma
+       • npm:    add ${pc.bold('dsPackages')} to drift.config.ts, then run ${pc.bold('npx catchdrift sync')}
 `)
-    console.log(`  ${pc.dim('// src/main.tsx')}`)
-    console.log(`  import { DriftOverlay } from '@catchdrift/overlay'`)
-    console.log(`  import driftConfig from '../drift.config'`)
-    console.log('')
-    console.log(`  ${pc.dim('// Last child in your root render:')}`)
-    console.log(`  {import.meta.env.DEV && <DriftOverlay config={driftConfig} />}`)
-    console.log('')
   }
 
-  if (dsPackages?.length) {
-    console.log(`${pc.blue('Tip:')} Run ${pc.bold('npx catchdrift sync')} to auto-populate your component registry from ${dsPackages.join(', ')}.`)
-    console.log('')
+  // ── Ongoing daily commands ───────────────────────────────────────────────────
+  console.log(`${pc.bold('Daily workflow (Claude Code):')}
+  ${pc.blue('/drift-context')}     Check DS health — run this before starting work
+  ${pc.blue('/drift-scaffold')}    Build a new screen using only DS components
+  ${pc.blue('/drift-sync')}        Update registry after Figma or Storybook changes
+  ${pc.blue('npx catchdrift check')}   Check coverage before submitting a PR
+`)
+
+  if (!sources.includes('storybook') && !storybook.found) {
+    console.log(`${pc.yellow('Note:')} Storybook isn't set up yet. Run ${pc.bold('npx storybook@latest init')} when ready,`)
+    console.log(`  then re-run ${pc.bold('npx catchdrift init')} to complete the coverage loop.\n`)
   }
 
-  if (figmaFiles.length > 0) {
-    console.log(`${pc.blue('Tip:')} Open the Drift overlay (press D), go to Settings, and paste your Figma personal access token to enable Figma component sync.`)
-    console.log('')
+  if (!patchedShort) {
+    console.log(`${pc.yellow('Manual step needed')} — add the overlay to your app entry point:`)
+    console.log(`  import { DriftOverlay } from '@catchdrift/overlay'`)
+    console.log(`  import driftConfig from './drift.config'`)
+    console.log(`  // inside your root render, as the last child:`)
+    console.log(`  {import.meta.env.DEV && <DriftOverlay config={driftConfig} />}\n`)
   }
+
+  console.log(pc.dim('Docs: https://catchdrift.ai  ·  Issues: https://github.com/dyoon92/design-drift/issues'))
 }
 
 // ── Helpers ───────────────────────────────────────────────────────────────────

package/src/lib/writers.mjs

@@ -13,7 +13,7 @@ const __dirname = dirname(fileURLToPath(import.meta.url))
 
 // ── drift.config.ts ───────────────────────────────────────────────────────────
 
-export function writeDriftConfig(cwd, { storybookUrl, chromaticUrl, figmaFiles, dsPackages, threshold, components }) {
+export function writeDriftConfig(cwd, { storybookUrl, chromaticUrl, figmaFiles, dsPackages, threshold, components, framework }) {
   const registry = buildComponentRegistry(components)
 
   const dsPackagesLine = dsPackages?.length
@@ -22,6 +22,7 @@ export function writeDriftConfig(cwd, { storybookUrl, chromaticUrl, figmaFiles,
 
   // Build figmaFiles block — single file gets a compact shape, multiple get an array
   let figmaFilesBlock = null
+  const hasFigma = figmaFiles?.length > 0
   if (figmaFiles?.length === 1) {
     const f = figmaFiles[0]
     figmaFilesBlock = `  figmaFileKey: '${f.key}',`
@@ -38,6 +39,15 @@ export function writeDriftConfig(cwd, { storybookUrl, chromaticUrl, figmaFiles,
     figmaFilesBlock = `  figmaFiles: [\n${entries}\n  ],`
   }
 
+  // Figma token — read from env var at runtime so it's never committed to git
+  let figmaTokenLine = null
+  if (hasFigma) {
+    const envExpr = framework === 'nextjs'
+      ? `process.env.NEXT_PUBLIC_FIGMA_TOKEN`
+      : `import.meta.env.VITE_FIGMA_TOKEN`
+    figmaTokenLine = `  figmaToken: ${envExpr}, // set in .env.local — never commit your token`
+  }
+
   const lines = [
     `import type { DriftConfig } from '@catchdrift/overlay'`,
     ``,
@@ -45,6 +55,7 @@ export function writeDriftConfig(cwd, { storybookUrl, chromaticUrl, figmaFiles,
     storybookUrl ? `  storybookUrl: '${storybookUrl}',` : null,
     chromaticUrl ? `  chromaticUrl: '${chromaticUrl}',` : null,
     figmaFilesBlock,
+    figmaTokenLine,
     `  threshold: ${threshold},`,
     dsPackagesLine,
     `  components: {`,
@@ -60,6 +71,21 @@ export function writeDriftConfig(cwd, { storybookUrl, chromaticUrl, figmaFiles,
   writeFileSync(join(cwd, 'drift.config.ts'), lines, 'utf8')
 }
 
+export function writeEnvLocal(cwd, { figmaToken }) {
+  if (!figmaToken) return
+  const envPath = join(cwd, '.env.local')
+  const line = `VITE_FIGMA_TOKEN=${figmaToken}\nNEXT_PUBLIC_FIGMA_TOKEN=${figmaToken}\n`
+
+  if (existsSync(envPath)) {
+    const existing = readFileSync(envPath, 'utf8')
+    // Don't duplicate if already set
+    if (existing.includes('FIGMA_TOKEN=')) return
+    writeFileSync(envPath, existing.trimEnd() + '\n' + line, 'utf8')
+  } else {
+    writeFileSync(envPath, `# Drift — Figma token (auto-generated by npx catchdrift init)\n${line}`, 'utf8')
+  }
+}
+
 // ── AI rules files ────────────────────────────────────────────────────────────
 
 const COMPONENT_TABLE_START = '<!-- drift:components-start -->'