@catchdrift/cli 0.1.16 → 0.1.18

package/package.json

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

package/scripts/drift-sync.mjs

@@ -20,7 +20,7 @@
  * will skip the "Open in Storybook" link for that component.
  */
 
-import { readFileSync, writeFileSync, readdirSync } from 'fs'
+import { readFileSync, writeFileSync, readdirSync, existsSync } from 'fs'
 import { join, resolve } from 'path'
 import { fileURLToPath } from 'url'
 
@@ -29,13 +29,26 @@ const ROOT  = resolve(__dir, '..')
 
 // ─── Read config ─────────────────────────────────────────────────────────────
 
-const configPath = join(ROOT, 'src/ds-coverage/config.ts')
+// Check drift.config.ts at cwd first (created by npx catchdrift init),
+// then fall back to the legacy monorepo path.
+const cwd = process.cwd()
+const configCandidates = [
+  join(cwd, 'drift.config.ts'),
+  join(cwd, 'src/ds-coverage/config.ts'),
+  join(ROOT, 'src/ds-coverage/config.ts'),
+]
+const configPath = configCandidates.find(p => existsSync(p))
 let configSrc
 
+if (!configPath) {
+  console.error('[drift-sync] No drift.config.ts found. Run `npx catchdrift init` first.')
+  process.exit(1)
+}
+
 try {
   configSrc = readFileSync(configPath, 'utf8')
 } catch {
-  console.error('[drift-sync] Could not read src/ds-coverage/config.ts. Make sure you\'re running this from the project root.')
+  console.error(`[drift-sync] Could not read ${configPath}`)
   process.exit(1)
 }
 
@@ -46,15 +59,34 @@ const dsPackages = pkgMatch
   : []
 
 if (dsPackages.length === 0) {
-  console.log(`
-[drift-sync] No dsPackages found in config.ts.
+  // Check if the user has a Figma or Storybook setup instead
+  const hasFigma = configSrc.includes('figmaFileKey') || configSrc.includes('figmaFiles')
+  const hasStorybook = configSrc.includes('storybookUrl')
 
-Add this to src/ds-coverage/config.ts:
+  if (hasFigma || hasStorybook) {
+    console.log(`
+[drift-sync] Your DS is connected via ${[hasFigma && 'Figma', hasStorybook && 'Storybook'].filter(Boolean).join(' + ')}, not an npm package.
+
+To populate your component registry:
+${hasFigma   ? '  Figma:     open Claude Code and run /drift-sync figma' : ''}
+${hasStorybook ? '  Storybook: make sure Storybook is running, then re-run npx catchdrift sync --storybook' : ''}
+
+catchdrift sync (this command) is for scanning imports from a DS npm package.
+To use it, add dsPackages to drift.config.ts:
 
   dsPackages: ['@your/component-library'],
+`.trim())
+  } else {
+    console.log(`
+[drift-sync] No dsPackages found in drift.config.ts.
 
-Then run npm run drift-sync again.
-  `.trim())
+Add this to drift.config.ts:
+
+  dsPackages: ['@your/component-library'],
+
+Then run npx catchdrift sync again.
+`.trim())
+  }
   process.exit(0)
 }
 
@@ -163,14 +195,14 @@ const updated = configSrc.replace(
 )
 
 if (updated === configSrc) {
-  console.warn('[drift-sync] Could not locate the components block in config.ts. Make sure it ends with `},` on its own line.')
+  console.warn('[drift-sync] Could not locate the components block in drift.config.ts. Make sure it ends with `},` on its own line.')
   process.exit(1)
 }
 
 writeFileSync(configPath, updated, 'utf8')
 
 console.log(`
-[drift-sync] Done. Updated src/ds-coverage/config.ts with ${sortedNames.length} components.
+[drift-sync] Done. Updated ${configPath.replace(cwd + '/', '')} with ${sortedNames.length} components.
 
 Next steps:
   • If you have a Storybook site, add storyPath values to get "Open in Storybook" links

package/src/commands/check.mjs

@@ -24,13 +24,15 @@ const __dirname = dirname(fileURLToPath(import.meta.url))
 const CHECKER = resolve(__dirname, '../../scripts/drift-check.mjs')
 
 export async function check(argv) {
+  console.log(pc.dim('Scanning running app for DS coverage...'))
+  console.log(pc.dim('Make sure your dev server is running (npm run dev) before this completes.\n'))
+
   // Warn if running via npx (ephemeral cache) — Playwright browser reinstalls on every npx clear
   const isNpx = process.env.npm_execpath?.includes('_npx') || process.argv[1]?.includes('_npx')
   if (isNpx) {
     console.log(pc.dim(
       'Tip: install locally for faster runs and persistent Playwright cache:\n' +
-      '  npm install -D catchdrift\n' +
-      '  npx catchdrift check  (uses local install)\n'
+      '  npm install -D catchdrift\n'
     ))
   }
 

package/src/commands/init.mjs

@@ -102,30 +102,57 @@ export async function init(argv) {
 
   const sources = Array.isArray(dsSources) ? dsSources : []
 
-  // ── Storybook nudge — needed to close the Figma → code loop ─────────────────
-  if (sources.includes('figma') && !sources.includes('storybook') && !storybook.found) {
+  // ── Storybook nudge — fire whenever Storybook isn't in the setup ─────────────
+  const storybookNeeded = !sources.includes('storybook') && !storybook.found
+  if (storybookNeeded && sources.length > 0) {
     p.log.warn(
-      'Storybook is needed to complete the loop.\n' +
-      '  Without it, the overlay has no way to identify which components are from your DS.\n' +
-      '  Figma tells Drift what exists in design — Storybook tells it what exists in code.'
+      'Storybook is needed to close the design → code loop.\n' +
+      '  It lets Drift identify which components are from your DS vs. custom-built.\n' +
+      '  Without it, coverage will show 0% until you manually list components.'
     )
     const setupSB = await p.confirm({
-      message: 'Set up Storybook now? (runs npx storybook@latest init)',
+      message: 'Set up Storybook now?',
       initialValue: true,
     })
     if (p.isCancel(setupSB)) { p.cancel('Setup cancelled.'); process.exit(EXIT_CANCELED) }
 
     if (setupSB) {
-      spinner.start('Running npx storybook@latest init...')
+      console.log(pc.dim('\n  Running npx storybook@latest init — follow the prompts:\n'))
       try {
-        execSync('npx storybook@latest init --yes', { cwd, stdio: 'ignore' })
-        spinner.stop('Storybook installed — it will be available at http://localhost:6006')
+        // Use inherit so the user can interact with Storybook's framework prompts
+        execSync('npx storybook@latest init', { cwd, stdio: 'inherit' })
+        p.log.success('Storybook installed — run `npm run storybook` to start it on :6006')
         sources.push('storybook')
       } catch {
-        spinner.stop('Storybook install failed — run `npx storybook@latest init` manually, then re-run `npx catchdrift init`')
+        p.log.warn('Storybook install failed or was cancelled. Run `npx storybook@latest init` manually when ready.')
       }
     } else {
-      p.log.info('Continuing without Storybook. Add it later and re-run `npx catchdrift init` to complete the loop.')
+      p.log.info('Skipping Storybook. Run `npx storybook@latest init` when ready, then re-run `npx catchdrift init`.')
+    }
+  }
+
+  // ── If user selected Storybook but it wasn't detected, offer to install ──────
+  if (sources.includes('storybook') && !storybook.found) {
+    const installNow = await p.confirm({
+      message: 'Storybook wasn\'t detected in this project. Install it now?',
+      initialValue: true,
+    })
+    if (p.isCancel(installNow)) { p.cancel('Setup cancelled.'); process.exit(EXIT_CANCELED) }
+
+    if (installNow) {
+      console.log(pc.dim('\n  Running npx storybook@latest init — follow the prompts:\n'))
+      try {
+        execSync('npx storybook@latest init', { cwd, stdio: 'inherit' })
+        p.log.success('Storybook installed — run `npm run storybook` to start it on :6006')
+      } catch {
+        p.log.warn('Storybook install failed or was cancelled. Run `npx storybook@latest init` manually when ready.')
+        // Remove storybook from sources so we don't ask for a URL that doesn't exist yet
+        sources.splice(sources.indexOf('storybook'), 1)
+      }
+    } else {
+      // User declined — remove from sources so the URL step is skipped
+      sources.splice(sources.indexOf('storybook'), 1)
+      p.log.info('Skipping Storybook setup. Re-run `npx catchdrift init` after installing it.')
     }
   }
 
@@ -368,9 +395,23 @@ export async function init(argv) {
   console.log('')
   p.outro(pc.green('Drift is set up ✓'))
 
-  const syncHint = dsPackages?.length
-    ? `\n  ${pc.cyan('npx catchdrift sync')}                 Auto-discover components from ${dsPackages.join(', ')}`
-    : ''
+  // 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`)
+  }
+
+  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`)
+
+  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.`)
+  }
 
   console.log(`
 ${pc.bold('What was created:')}
@@ -380,9 +421,7 @@ ${pc.bold('What was created:')}
   ${patched ? patched.padEnd(34) + pc.dim('DriftOverlay added (dev-only)') : ''}
 
 ${pc.bold('Next steps:')}
-  ${pc.cyan('npm run dev')}                          Open your app, press ${pc.bold('D')} to see Drift${syncHint}
-  ${pc.cyan('npx catchdrift check')}                Run a coverage scan (requires running app)
-  ${pc.cyan('git push')}                            First PR will show a drift delta comment
+${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')}

package/src/lib/storybook.mjs

@@ -41,6 +41,9 @@ export async function fetchStorybookComponents(storybookUrl) {
 
 export function buildComponentRegistry(components) {
   return Object.entries(components)
-    .map(([name, meta]) => `    ${name}: { storyPath: '${meta.storyPath}' },`)
+    .map(([name, meta]) => {
+      const entry = meta.storyPath ? `{ storyPath: '${meta.storyPath}' }` : '{}'
+      return `    ${name}: ${entry},`
+    })
     .join('\n')
 }

package/src/lib/writers.mjs

@@ -36,9 +36,9 @@ export function writeDriftConfig(cwd, { storybookUrl, chromaticUrl, figmaFiles,
   }
 
   const lines = [
-    `import type { DesignDriftConfig } from '@catchdrift/overlay'`,
+    `import type { DriftConfig } from '@catchdrift/overlay'`,
     ``,
-    `const config: DesignDriftConfig = {`,
+    `const config: DriftConfig = {`,
     storybookUrl ? `  storybookUrl: '${storybookUrl}',` : null,
     chromaticUrl ? `  chromaticUrl: '${chromaticUrl}',` : null,
     figmaFilesBlock,