@catchdrift/cli 0.1.5 → 0.1.7

package/package.json

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

package/src/commands/init.mjs

@@ -102,8 +102,35 @@ 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) {
+    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.'
+    )
+    const setupSB = await p.confirm({
+      message: 'Set up Storybook now? (runs npx storybook@latest init)',
+      initialValue: true,
+    })
+    if (p.isCancel(setupSB)) { p.cancel('Setup cancelled.'); process.exit(EXIT_CANCELED) }
+
+    if (setupSB) {
+      spinner.start('Running npx storybook@latest init...')
+      try {
+        execSync('npx storybook@latest init --yes', { cwd, stdio: 'ignore' })
+        spinner.stop('Storybook installed — it will be available at http://localhost:6006')
+        sources.push('storybook')
+      } catch {
+        spinner.stop('Storybook install failed — run `npx storybook@latest init` manually, then re-run `npx catchdrift init`')
+      }
+    } else {
+      p.log.info('Continuing without Storybook. Add it later and re-run `npx catchdrift init` to complete the loop.')
+    }
+  }
+
   // ── Step 3a: Figma ───────────────────────────────────────────────────────────
-  let figmaFileKey, figmaWIPPage
+  let figmaFileKey, figmaToken, figmaWIPPages
   if (sources.includes('figma')) {
     figmaFileKey = await p.text({
       message: 'Figma file key',
@@ -113,13 +140,30 @@ export async function init(argv) {
     if (p.isCancel(figmaFileKey)) { p.cancel('Setup cancelled.'); process.exit(EXIT_CANCELED) }
     figmaFileKey = figmaFileKey?.trim() || undefined
 
-    figmaWIPPage = await p.text({
-      message: 'Which Figma page holds in-progress / not-yet-ready components?',
-      placeholder: '🚧 In Progress  (skip if you don\'t have one)',
-      hint: 'Components on this page will be flagged as drafts, not added to your registry',
+    figmaToken = await p.text({
+      message: 'Figma personal access token',
+      placeholder: 'figd_...  (figma.com → Profile → Settings → Security → Personal access tokens)',
+      hint: 'Used to fetch your real page list. Store in FIGMA_API_TOKEN env var — not committed to git.',
     })
-    if (p.isCancel(figmaWIPPage)) { p.cancel('Setup cancelled.'); process.exit(EXIT_CANCELED) }
-    figmaWIPPage = figmaWIPPage?.trim() || undefined
+    if (p.isCancel(figmaToken)) { p.cancel('Setup cancelled.'); process.exit(EXIT_CANCELED) }
+    figmaToken = figmaToken?.trim() || undefined
+
+    // Fetch actual pages from Figma so the user picks from real names
+    if (figmaToken && figmaFileKey) {
+      spinner.start('Fetching pages from Figma...')
+      const pages = await fetchFigmaPages(figmaFileKey, figmaToken)
+      spinner.stop(pages ? `Found ${pages.length} pages` : 'Could not reach Figma — skipping page selection')
+
+      if (pages?.length) {
+        const selected = await p.multiselect({
+          message: 'Which pages hold in-progress / not-yet-ready components? (drafts — won\'t be added to registry)',
+          options: pages.map(name => ({ value: name, label: name })),
+          required: false,
+        })
+        if (p.isCancel(selected)) { p.cancel('Setup cancelled.'); process.exit(EXIT_CANCELED) }
+        figmaWIPPages = Array.isArray(selected) && selected.length ? selected : undefined
+      }
+    }
   }
 
   // ── Step 3b: Storybook ───────────────────────────────────────────────────────
@@ -202,7 +246,7 @@ export async function init(argv) {
     storybookUrl:  storybookUrl || (storybook.found ? storybook.url : undefined),
     chromaticUrl,
     figmaFileKey,
-    figmaWIPPage,
+    figmaWIPPages,
     dsPackages,
     threshold:     Number(threshold) || 80,
     components,
@@ -292,3 +336,18 @@ ${pc.dim('Docs: https://catchdrift.ai  ·  Issues: https://github.com/dyoon92/de
     console.log('')
   }
 }
+
+// ── Helpers ───────────────────────────────────────────────────────────────────
+
+async function fetchFigmaPages(fileKey, token) {
+  try {
+    const res = await fetch(`https://api.figma.com/v1/files/${fileKey}?depth=1`, {
+      headers: { 'X-Figma-Token': token },
+    })
+    if (!res.ok) return null
+    const data = await res.json()
+    return data.document?.children?.map(page => page.name) ?? null
+  } catch {
+    return null
+  }
+}

package/src/lib/writers.mjs

@@ -10,7 +10,7 @@ import { findAppEntry } from './detect.mjs'
 
 // ── drift.config.ts ───────────────────────────────────────────────────────────
 
-export function writeDriftConfig(cwd, { storybookUrl, chromaticUrl, figmaFileKey, figmaWIPPage, dsPackages, threshold, components }) {
+export function writeDriftConfig(cwd, { storybookUrl, chromaticUrl, figmaFileKey, figmaWIPPages, dsPackages, threshold, components }) {
   const registry = buildComponentRegistry(components)
 
   const dsPackagesLine = dsPackages?.length
@@ -24,7 +24,7 @@ export function writeDriftConfig(cwd, { storybookUrl, chromaticUrl, figmaFileKey
     storybookUrl ? `  storybookUrl: '${storybookUrl}',` : null,
     chromaticUrl ? `  chromaticUrl: '${chromaticUrl}',` : null,
     figmaFileKey ? `  figmaFileKey: '${figmaFileKey}',` : null,
-    figmaWIPPage ? `  figmaWIPPage: '${figmaWIPPage}', // components on this page are drafts — not added to registry` : null,
+    figmaWIPPages?.length ? `  figmaWIPPages: [${figmaWIPPages.map(p => `'${p}'`).join(', ')}], // components on these pages are drafts — not added to registry` : null,
     `  threshold: ${threshold},`,
     dsPackagesLine,
     `  components: {`,