@catchdrift/cli 0.2.0 → 0.2.2

package/package.json

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

package/src/commands/init.mjs

@@ -85,35 +85,48 @@ export async function init(argv) {
     }
   }
 
-  // ── Step 2: Where does the DS live? ─────────────────────────────────────────
+  // ── Step 2: Do they have a DS at all? ────────────────────────────────────────
   console.log('')
-  p.log.step('Where does your design system live? Select all that apply.')
-  console.log('')
-
-  const dsSources = await p.multiselect({
-    message: 'DS source (you can pick more than one)',
-    options: [
-      { value: 'figma',     label: 'Figma',                           hint: 'components published in a Figma file' },
-      { value: 'storybook', label: 'Storybook',                        hint: 'stories at a URL' },
-      { value: 'package',   label: 'npm package / path',               hint: 'e.g. @acme/ui or ./src/components' },
-      { value: 'fresh',     label: 'No DS yet — bootstrap from scratch', hint: 'pick Material UI, shadcn, Ant Design, etc.' },
-      { value: 'manual',    label: 'I\'ll type component names myself', hint: 'you can always run /drift-sync later' },
-    ],
-    required: false,
+  const hasDS = await p.confirm({
+    message: 'Do you already have a design system?',
+    initialValue: true,
   })
-  if (p.isCancel(dsSources)) { p.cancel('Setup cancelled.'); process.exit(EXIT_CANCELED) }
+  if (p.isCancel(hasDS)) { p.cancel('Setup cancelled.'); process.exit(EXIT_CANCELED) }
 
-  const sources = Array.isArray(dsSources) ? dsSources : []
+  let dsSources = []
+  if (hasDS) {
+    // ── Step 2b: Where does it live? ───────────────────────────────────────────
+    console.log('')
+    p.log.step('Where does your design system live? Select all that apply.')
+    console.log('')
 
-  // ── Step 2b: Bootstrap foundation picker ─────────────────────────────────────
-  // Fires when user picks "No DS yet — bootstrap from scratch"
+    const picked = await p.multiselect({
+      message: 'DS source (you can pick more than one)',
+      options: [
+        { value: 'figma',     label: 'Figma',               hint: 'components published in a Figma file' },
+        { value: 'storybook', label: 'Storybook',            hint: 'stories at a URL' },
+        { value: 'package',   label: 'npm package / path',   hint: 'e.g. @acme/ui or ./src/components' },
+        { value: 'manual',    label: 'Type names manually',  hint: 'you can always run /drift-sync later' },
+      ],
+      required: false,
+    })
+    if (p.isCancel(picked)) { p.cancel('Setup cancelled.'); process.exit(EXIT_CANCELED) }
+    dsSources = Array.isArray(picked) ? picked : []
+  } else {
+    dsSources = ['fresh']
+  }
+
+  const sources = dsSources
+
+  // ── Step 2c: Bootstrap foundation picker ─────────────────────────────────────
+  // Fires when user has no existing DS
   const DS_FOUNDATIONS = [
-    { value: 'shadcn',  label: 'shadcn/ui',       hint: 'Radix + Tailwind — copy-paste components',         pkg: '@radix-ui/react-dialog', install: 'npx shadcn@latest init',                                          docs: 'https://ui.shadcn.com' },
-    { value: 'mui',     label: 'Material UI',      hint: 'Google Material Design — battle-tested ecosystem',  pkg: '@mui/material',          install: 'npm install @mui/material @emotion/react @emotion/styled',          docs: 'https://mui.com/material-ui/' },
-    { value: 'antd',    label: 'Ant Design',       hint: 'Enterprise-grade — rich component set',             pkg: 'antd',                   install: 'npm install antd',                                                 docs: 'https://ant.design/components/overview/' },
-    { value: 'chakra',  label: 'Chakra UI',        hint: 'Accessible, composable — great DX',                pkg: '@chakra-ui/react',       install: 'npm install @chakra-ui/react @emotion/react @emotion/styled framer-motion', docs: 'https://chakra-ui.com/docs/components' },
-    { value: 'radix',   label: 'Radix Themes',     hint: 'Headless primitives + opinionated theme layer',     pkg: '@radix-ui/themes',       install: 'npm install @radix-ui/themes',                                     docs: 'https://www.radix-ui.com/themes' },
-    { value: 'primer',  label: 'Primer (GitHub)',   hint: "GitHub's DS — clean, minimal, production-grade",   pkg: '@primer/react',          install: 'npm install @primer/react styled-components',                      docs: 'https://primer.style/components' },
+    { value: 'shadcn',  label: 'shadcn/ui',       hint: 'Radix + Tailwind — copy-paste components',         pkg: '@radix-ui/react-dialog', install: 'npx shadcn@latest init',                                          installAuto: null,                                                                            docs: 'https://ui.shadcn.com',               figmaCommunity: 'shadcn/ui' },
+    { value: 'mui',     label: 'Material UI',      hint: 'Google Material Design — battle-tested ecosystem',  pkg: '@mui/material',          install: 'npm install @mui/material @emotion/react @emotion/styled',          installAuto: '@mui/material @emotion/react @emotion/styled',                                  docs: 'https://mui.com/material-ui/',        figmaCommunity: 'Material UI MUI' },
+    { value: 'antd',    label: 'Ant Design',       hint: 'Enterprise-grade — rich component set',             pkg: 'antd',                   install: 'npm install antd',                                                 installAuto: 'antd',                                                                          docs: 'https://ant.design/components/overview/', figmaCommunity: 'Ant Design' },
+    { value: 'chakra',  label: 'Chakra UI',        hint: 'Accessible, composable — great DX',                pkg: '@chakra-ui/react',       install: 'npm install @chakra-ui/react @emotion/react @emotion/styled framer-motion', installAuto: '@chakra-ui/react @emotion/react @emotion/styled framer-motion', docs: 'https://chakra-ui.com/docs/components', figmaCommunity: 'Chakra UI' },
+    { value: 'radix',   label: 'Radix Themes',     hint: 'Headless primitives + opinionated theme layer',     pkg: '@radix-ui/themes',       install: 'npm install @radix-ui/themes',                                     installAuto: '@radix-ui/themes',                                                              docs: 'https://www.radix-ui.com/themes',     figmaCommunity: 'Radix Themes' },
+    { value: 'primer',  label: 'Primer (GitHub)',   hint: "GitHub's DS — clean, minimal, production-grade",   pkg: '@primer/react',          install: 'npm install @primer/react styled-components',                      installAuto: '@primer/react styled-components',                                               docs: 'https://primer.style/components',     figmaCommunity: 'GitHub Primer' },
   ]
 
   let chosenFoundation = null
@@ -133,8 +146,59 @@ export async function init(argv) {
     chosenFoundation = DS_FOUNDATIONS.find(f => f.value === foundationChoice)
 
     p.log.success(`${chosenFoundation.label} selected — Drift will track it via dsPackages.`)
-    p.log.info(`Install it now or later:\n  ${pc.bold(chosenFoundation.install)}`)
-    p.log.info(`Docs + live preview: ${pc.cyan(chosenFoundation.docs)}`)
+
+    // ── Auto-install the foundation ─────────────────────────────────────────────
+    if (chosenFoundation.installAuto) {
+      // Non-interactive: npm install — run automatically
+      const doInstall = await p.confirm({
+        message: `Install ${chosenFoundation.label} now? (${chosenFoundation.install})`,
+        initialValue: true,
+      })
+      if (p.isCancel(doInstall)) { p.cancel('Setup cancelled.'); process.exit(EXIT_CANCELED) }
+
+      if (doInstall) {
+        const pkgManager =
+          existsSync(join(cwd, 'pnpm-lock.yaml')) ? 'pnpm add' :
+          existsSync(join(cwd, 'yarn.lock'))      ? 'yarn add' : 'npm install'
+        const installCmd = `${pkgManager} ${chosenFoundation.installAuto}`
+        spinner.start(`Installing ${chosenFoundation.label}...`)
+        try {
+          execSync(installCmd, { cwd, stdio: 'pipe' })
+          spinner.stop(`${chosenFoundation.label} installed ✓`)
+        } catch (err) {
+          const stderr = err.stderr?.toString() || ''
+          if (stderr.includes('EACCES') || stderr.includes('root-owned')) {
+            spinner.stop(pc.yellow(`Permission error — run: sudo chown -R $(id -u):$(id -g) ~/.npm  then re-run catchdrift init`))
+          } else {
+            spinner.stop(pc.yellow(`Install failed — run manually: ${chosenFoundation.install}`))
+          }
+        }
+      }
+    } else {
+      // shadcn is interactive — user must run it themselves
+      p.log.info(`shadcn/ui requires its own interactive setup:\n  ${pc.bold(chosenFoundation.install)}\n  Run this after catchdrift finishes, then run ${pc.bold('npx catchdrift sync')}`)
+    }
+
+    // ── Figma for fresh users ────────────────────────────────────────────────────
+    console.log('')
+    p.log.info(
+      `Want to connect a Figma file? This lets Drift link every component back to its Figma source.\n` +
+      pc.dim(`  ${chosenFoundation.label} has an official Figma community library — great starting point.\n`) +
+      pc.dim(`  1. Go to figma.com/community and search "${chosenFoundation.figmaCommunity}"\n`) +
+      pc.dim(`  2. Click "Open in Figma" to duplicate it to your workspace\n`) +
+      pc.dim(`  3. Paste the file URL below`)
+    )
+
+    const wantFigmaFresh = await p.confirm({
+      message: 'Connect a Figma file now?',
+      initialValue: false,
+    })
+    if (p.isCancel(wantFigmaFresh)) { p.cancel('Setup cancelled.'); process.exit(EXIT_CANCELED) }
+    if (wantFigmaFresh) {
+      sources.push('figma')
+    } else {
+      console.log(pc.dim('  Skipping Figma. Re-run npx catchdrift init later to add it.'))
+    }
   }
 
   // ── Storybook nudge — fire whenever Storybook isn't in the setup ─────────────
@@ -152,14 +216,34 @@ export async function init(argv) {
     if (p.isCancel(setupSB)) { p.cancel('Setup cancelled.'); process.exit(EXIT_CANCELED) }
 
     if (setupSB) {
-      console.log(pc.dim('\n  Running npx storybook@latest init — follow the prompts:\n'))
-      try {
-        // 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 {
-        p.log.warn('Storybook install failed or was cancelled. Run `npx storybook@latest init` manually when ready.')
+      // Detect root-owned npm cache before spawning Storybook
+      const cacheOk = checkNpmCache()
+      if (!cacheOk) {
+        p.log.warn(
+          'npm cache is owned by root — Storybook install will fail.\n' +
+          pc.bold('  Fix it first by running:\n') +
+          `    sudo chown -R $(id -u):$(id -g) ~/.npm\n` +
+          `  Then re-run: ${pc.bold('npx catchdrift init')}`
+        )
+      } else {
+        console.log(pc.dim('\n  Running npx storybook@latest init — follow the prompts:\n'))
+        try {
+          // 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 (err) {
+          const stderr = (err.stderr?.toString() || '') + (err.stdout?.toString() || '')
+          if (stderr.includes('EACCES') || stderr.includes('root-owned')) {
+            p.log.warn(
+              'npm cache permission error.\n' +
+              `  Fix: sudo chown -R $(id -u):$(id -g) ~/.npm\n` +
+              `  Then re-run: npx catchdrift init`
+            )
+          } else {
+            p.log.warn('Storybook install failed or was cancelled. Run `npx storybook@latest init` manually when ready.')
+          }
+        }
       }
     } else {
       p.log.info('Skipping Storybook. Run `npx storybook@latest init` when ready, then re-run `npx catchdrift init`.')
@@ -175,14 +259,33 @@ export async function init(argv) {
     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
+      const cacheOk = checkNpmCache()
+      if (!cacheOk) {
+        p.log.warn(
+          'npm cache is owned by root — Storybook install will fail.\n' +
+          pc.bold('  Fix it first:\n') +
+          `    sudo chown -R $(id -u):$(id -g) ~/.npm\n` +
+          `  Then re-run: ${pc.bold('npx catchdrift init')}`
+        )
         sources.splice(sources.indexOf('storybook'), 1)
+      } else {
+        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 (err) {
+          const stderr = (err.stderr?.toString() || '') + (err.stdout?.toString() || '')
+          if (stderr.includes('EACCES') || stderr.includes('root-owned')) {
+            p.log.warn(
+              'npm cache permission error.\n' +
+              `  Fix: sudo chown -R $(id -u):$(id -g) ~/.npm\n` +
+              `  Then re-run: npx catchdrift init`
+            )
+          } else {
+            p.log.warn('Storybook install failed or was cancelled. Run `npx storybook@latest init` manually when ready.')
+          }
+          sources.splice(sources.indexOf('storybook'), 1)
+        }
       }
     } else {
       // User declined — remove from sources so the URL step is skipped
@@ -481,17 +584,18 @@ ${pc.bold('What was set up:')}
   console.log(`\n${pc.bold('Do this now:')}`)
 
   if (chosenFoundation) {
+    const alreadyInstalled = chosenFoundation.installAuto !== null
     console.log(`
   You chose ${pc.bold(chosenFoundation.label)} as your foundation.
-
+${alreadyInstalled ? '' : `
   ${pc.cyan('1.')} Install it:
-       ${pc.bold(chosenFoundation.install)}
-  ${pc.cyan('2.')} Run: ${pc.bold('npx catchdrift sync')}
+       ${pc.bold(chosenFoundation.install)}`}
+  ${alreadyInstalled ? pc.cyan('1.') : pc.cyan('2.')} Run: ${pc.bold('npx catchdrift sync')}
        Scans your codebase for imports from ${pc.bold(chosenFoundation.pkg)} and registers them.
-  ${pc.cyan('3.')} Run: ${pc.bold('npm run dev')}  →  press ${pc.bold('D')}  →  see live coverage
+  ${alreadyInstalled ? pc.cyan('2.') : pc.cyan('3.')} Run: ${pc.bold('npm run dev')}  →  press ${pc.bold('D')}  →  see live coverage
 
   ${pc.dim('Docs + live preview: ' + chosenFoundation.docs)}
-  ${pc.dim('Figma community library: search "' + chosenFoundation.label + '" at figma.com/community')}
+  ${pc.dim('Figma community library: search "' + chosenFoundation.figmaCommunity + '" at figma.com/community')}
 `)
   } else if (figmaFiles.length > 0 && skillFiles.length > 0) {
     console.log(`
@@ -556,6 +660,18 @@ ${pc.bold('What was set up:')}
 
 // ── Helpers ───────────────────────────────────────────────────────────────────
 
+/** Returns false if the npm cache is root-owned (common after sudo npm install -g) */
+function checkNpmCache() {
+  try {
+    execSync('npm cache verify', { stdio: 'pipe', timeout: 8000 })
+    return true
+  } catch (err) {
+    const msg = (err.stderr?.toString() || '') + (err.stdout?.toString() || '')
+    if (msg.includes('EACCES') || msg.includes('root-owned')) return false
+    return true // other errors are unrelated to ownership
+  }
+}
+
 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]+)/)

package/src/index.mjs

@@ -5,7 +5,7 @@
 
 import pc from 'picocolors'
 
-const VERSION = '0.2.0'
+const VERSION = '0.2.2'
 
 const HELP = `
 ${pc.bold(pc.blue('catchdrift'))} — Design system compliance for teams shipping with AI