@catchdrift/cli 0.1.7 → 0.1.9

package/package.json

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

package/src/commands/init.mjs

@@ -130,39 +130,84 @@ export async function init(argv) {
   }
 
   // ── Step 3a: Figma ───────────────────────────────────────────────────────────
-  let figmaFileKey, figmaToken, figmaWIPPages
+  // figmaFiles: [{ key: string, wipPages?: string[] }]
+  let figmaToken
+  const figmaFiles = []
+
   if (sources.includes('figma')) {
-    figmaFileKey = await p.text({
-      message: 'Figma file key',
-      placeholder: 'Found in figma.com/design/THIS_KEY/...  (paste just the key)',
-      validate: v => (!v?.trim() ? 'Required — paste the key from your Figma URL' : undefined),
-    })
-    if (p.isCancel(figmaFileKey)) { p.cancel('Setup cancelled.'); process.exit(EXIT_CANCELED) }
-    figmaFileKey = figmaFileKey?.trim() || undefined
+    // Token — ask once, reused for all files
+    console.log('')
+    p.log.step('Create a Figma access token — takes about 60 seconds:')
+    console.log(`
+  1. Open ${pc.cyan('figma.com')} → click your avatar (top-left) → ${pc.bold('Settings')}
+  2. Go to the ${pc.bold('Security')} tab → click ${pc.bold('Generate new token')}
+  3. Give it a name (e.g. "Drift") and set an expiry
+  4. Enable these scopes:
+       ${pc.green('✓')} File content       → ${pc.bold('Read only')}
+       ${pc.green('✓')} File comments      → ${pc.bold('Write')}
+       ${pc.green('✓')} File variables     → ${pc.bold('Read only')}
+  5. Click ${pc.bold('Generate token')} and copy it — ${pc.yellow("you won't be able to see it again")}
+`)
 
     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.',
+      message: 'Paste your Figma token here',
+      placeholder: 'figd_...',
+      hint: 'Stored in your local FIGMA_API_TOKEN env var — never committed to git',
+      validate: v => (!v?.trim() ? 'Required — paste the token you just generated' : 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
+    // Loop: add one file at a time
+    let addingFiles = true
+    while (addingFiles) {
+      const fileLabel = figmaFiles.length === 0 ? 'Paste your Figma file URL (or just the file key)' : 'Add another Figma file URL (or key)'
+      const figmaInput = await p.text({
+        message: fileLabel,
+        placeholder: 'https://www.figma.com/design/ABC123.../My-Design-File',
+        hint: figmaFiles.length === 0
+          ? 'Open your Figma file in a browser and copy the full URL from the address bar'
+          : 'Add files for each area where DS components live (e.g. Core DS, Icons, Patterns)',
+        validate: v => (!v?.trim() ? 'Required' : undefined),
+      })
+      if (p.isCancel(figmaInput)) { p.cancel('Setup cancelled.'); process.exit(EXIT_CANCELED) }
+
+      let fileKey = extractFigmaFileKey(figmaInput.trim())
+      if (!fileKey) {
+        p.log.warn(`Could not extract a file key — using as-is.`)
+        fileKey = figmaInput.trim()
       }
+
+      // Fetch pages for this file
+      let wipPages
+      if (figmaToken) {
+        spinner.start('Connecting to Figma...')
+        const pages = await fetchFigmaPages(fileKey, figmaToken)
+        spinner.stop(pages
+          ? pc.green(`Connected ✓  Found ${pages.length} pages`)
+          : pc.yellow('Could not reach Figma — skipping page selection for this file.')
+        )
+
+        if (pages?.length) {
+          const selected = await p.multiselect({
+            message: 'Which pages in this file hold in-progress / not-yet-ready components?',
+            options: pages.map(name => ({ value: name, label: name })),
+            required: false,
+          })
+          if (p.isCancel(selected)) { p.cancel('Setup cancelled.'); process.exit(EXIT_CANCELED) }
+          wipPages = Array.isArray(selected) && selected.length ? selected : undefined
+        }
+      }
+
+      figmaFiles.push({ key: fileKey, wipPages })
+
+      // Ask whether to add another
+      const another = await p.confirm({
+        message: `${figmaFiles.length} file${figmaFiles.length > 1 ? 's' : ''} added. Add another Figma file?`,
+        initialValue: false,
+      })
+      if (p.isCancel(another)) { p.cancel('Setup cancelled.'); process.exit(EXIT_CANCELED) }
+      addingFiles = another
     }
   }
 
@@ -245,8 +290,7 @@ export async function init(argv) {
   writeDriftConfig(cwd, {
     storybookUrl:  storybookUrl || (storybook.found ? storybook.url : undefined),
     chromaticUrl,
-    figmaFileKey,
-    figmaWIPPages,
+    figmaFiles:    figmaFiles.length ? figmaFiles : undefined,
     dsPackages,
     threshold:     Number(threshold) || 80,
     components,
@@ -259,7 +303,7 @@ export async function init(argv) {
     tools:        Array.isArray(aiToolsSelected) ? aiToolsSelected : [],
     components,
     storybookUrl: storybookUrl || '',
-    figmaFileKey,
+    figmaFiles:   figmaFiles.length ? figmaFiles : undefined,
   })
   spinner.stop(`Written: ${rulesFiles.join(', ')}`)
 
@@ -331,7 +375,7 @@ ${pc.dim('Docs: https://catchdrift.ai  ·  Issues: https://github.com/dyoon92/de
     console.log('')
   }
 
-  if (figmaFileKey) {
+  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('')
   }
@@ -339,6 +383,12 @@ ${pc.dim('Docs: https://catchdrift.ai  ·  Issues: https://github.com/dyoon92/de
 
 // ── Helpers ───────────────────────────────────────────────────────────────────
 
+function extractFigmaFileKey(input) {
+  // Matches: figma.com/design/KEY/... or figma.com/file/KEY/...
+  const match = input.match(/figma\.com\/(?:design|file)\/([a-zA-Z0-9]+)/)
+  return match ? match[1] : null
+}
+
 async function fetchFigmaPages(fileKey, token) {
   try {
     const res = await fetch(`https://api.figma.com/v1/files/${fileKey}?depth=1`, {

package/src/lib/writers.mjs

@@ -10,21 +10,38 @@ import { findAppEntry } from './detect.mjs'
 
 // ── drift.config.ts ───────────────────────────────────────────────────────────
 
-export function writeDriftConfig(cwd, { storybookUrl, chromaticUrl, figmaFileKey, figmaWIPPages, dsPackages, threshold, components }) {
+export function writeDriftConfig(cwd, { storybookUrl, chromaticUrl, figmaFiles, dsPackages, threshold, components }) {
   const registry = buildComponentRegistry(components)
 
   const dsPackagesLine = dsPackages?.length
     ? `  dsPackages: [${dsPackages.map(p => `'${p}'`).join(', ')}],`
     : null
 
+  // Build figmaFiles block — single file gets a compact shape, multiple get an array
+  let figmaFilesBlock = null
+  if (figmaFiles?.length === 1) {
+    const f = figmaFiles[0]
+    figmaFilesBlock = `  figmaFileKey: '${f.key}',`
+    if (f.wipPages?.length) {
+      figmaFilesBlock += `\n  figmaWIPPages: [${f.wipPages.map(p => `'${p}'`).join(', ')}], // components on these pages are drafts — not added to registry`
+    }
+  } else if (figmaFiles?.length > 1) {
+    const entries = figmaFiles.map(f => {
+      const wipLine = f.wipPages?.length
+        ? `, wipPages: [${f.wipPages.map(p => `'${p}'`).join(', ')}]`
+        : ''
+      return `    { key: '${f.key}'${wipLine} },`
+    }).join('\n')
+    figmaFilesBlock = `  figmaFiles: [\n${entries}\n  ],`
+  }
+
   const lines = [
     `import type { DesignDriftConfig } from '@catchdrift/overlay'`,
     ``,
     `const config: DesignDriftConfig = {`,
     storybookUrl ? `  storybookUrl: '${storybookUrl}',` : null,
     chromaticUrl ? `  chromaticUrl: '${chromaticUrl}',` : null,
-    figmaFileKey ? `  figmaFileKey: '${figmaFileKey}',` : null,
-    figmaWIPPages?.length ? `  figmaWIPPages: [${figmaWIPPages.map(p => `'${p}'`).join(', ')}], // components on these pages are drafts — not added to registry` : null,
+    figmaFilesBlock,
     `  threshold: ${threshold},`,
     dsPackagesLine,
     `  components: {`,
@@ -61,12 +78,15 @@ function buildComponentTable(components, storybookUrl) {
   ].join('\n')
 }
 
-function buildAIRulesContent(components, storybookUrl, figmaFileKey) {
+function buildAIRulesContent(components, storybookUrl, figmaFiles) {
+  const figmaLines = figmaFiles?.length
+    ? figmaFiles.map(f => `- Figma: https://figma.com/design/${f.key}`).join('\n') + '\n'
+    : ''
   return `# Design System Rules
 
 ## Source of truth
 - Storybook: ${storybookUrl}
-${figmaFileKey ? `- Figma: https://figma.com/design/${figmaFileKey}\n` : ''}- Tokens: src/tokens/variables.css — use CSS variables only
+${figmaLines}- Tokens: src/tokens/variables.css — use CSS variables only
 
 ## The #1 rule: never invent UI from scratch
 Only use components from the table below. If a component you need is missing:
@@ -110,8 +130,8 @@ ${buildComponentTable(components, storybookUrl)}
 `
 }
 
-export function writeAIRulesFiles(cwd, { tools, components, storybookUrl, figmaFileKey }) {
-  const content = buildAIRulesContent(components, storybookUrl, figmaFileKey)
+export function writeAIRulesFiles(cwd, { tools, components, storybookUrl, figmaFiles }) {
+  const content = buildAIRulesContent(components, storybookUrl, figmaFiles)
   const written = []
 
   const toolFileMap = {