@catchdrift/cli 0.1.22 → 0.2.1

package/package.json

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

package/src/commands/init.mjs

@@ -85,24 +85,70 @@ 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: '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) }
+
+  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('')
+
+    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' },
+  ]
+
+  let chosenFoundation = null
+  if (sources.includes('fresh')) {
+    p.log.info(`No DS yet — let's pick a component foundation to track.`)
+    console.log(pc.dim(`  Preview any of these at their docs before deciding:\n`))
+    DS_FOUNDATIONS.forEach(f => {
+      console.log(`  ${pc.bold(f.label.padEnd(18))} ${pc.dim(f.hint)}`)
+      console.log(`  ${pc.dim(' '.repeat(18) + f.docs)}\n`)
+    })
+
+    const foundationChoice = await p.select({
+      message: 'Which foundation will your team use?',
+      options: DS_FOUNDATIONS.map(f => ({ value: f.value, label: f.label, hint: f.hint })),
+    })
+    if (p.isCancel(foundationChoice)) { p.cancel('Setup cancelled.'); process.exit(EXIT_CANCELED) }
+    chosenFoundation = DS_FOUNDATIONS.find(f => f.value === foundationChoice)
 
-  const sources = Array.isArray(dsSources) ? dsSources : []
+    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)}`)
+  }
 
   // ── Storybook nudge — fire whenever Storybook isn't in the setup ─────────────
   const storybookNeeded = !sources.includes('storybook') && !storybook.found
@@ -329,7 +375,40 @@ export async function init(argv) {
   })
   if (p.isCancel(aiToolsSelected)) { p.cancel('Setup cancelled.'); process.exit(EXIT_CANCELED) }
 
+  // ── Step 5b: Jira integration (optional) ─────────────────────────────────────
+  let jiraBaseUrl, jiraProjectKey
+  const wantJira = await p.confirm({
+    message: 'Connect Jira? (lets the overlay create tickets directly — skip to add later)',
+    initialValue: false,
+  })
+  if (p.isCancel(wantJira)) { p.cancel('Setup cancelled.'); process.exit(EXIT_CANCELED) }
+
+  if (wantJira) {
+    const jiraUrl = await p.text({
+      message: 'Jira base URL',
+      placeholder: 'https://yourcompany.atlassian.net',
+      validate: v => (!v?.trim() ? 'Required' : undefined),
+    })
+    if (p.isCancel(jiraUrl)) { p.cancel('Setup cancelled.'); process.exit(EXIT_CANCELED) }
+    jiraBaseUrl = jiraUrl?.trim().replace(/\/$/, '')
+
+    const jiraKey = await p.text({
+      message: 'Jira project key',
+      placeholder: 'DS',
+      defaultValue: 'DS',
+    })
+    if (p.isCancel(jiraKey)) { p.cancel('Setup cancelled.'); process.exit(EXIT_CANCELED) }
+    jiraProjectKey = jiraKey?.trim() || 'DS'
+
+    p.log.info(`Jira credentials saved to drift.config.ts.\n  Add your API token in the Drift overlay → Settings → Integrations.`)
+  }
+
   // ── Step 6: Write drift.config.ts ────────────────────────────────────────────
+  // If fresh/bootstrap, merge chosenFoundation's package into dsPackages
+  const mergedDsPackages = chosenFoundation
+    ? [chosenFoundation.pkg, ...(dsPackages ?? [])].filter(Boolean)
+    : dsPackages
+
   const components = { ...sbComponents }
 
   spinner.start('Writing drift.config.ts...')
@@ -337,10 +416,12 @@ export async function init(argv) {
     storybookUrl:  storybookUrl || (storybook.found ? storybook.url : undefined),
     chromaticUrl,
     figmaFiles:    figmaFiles.length ? figmaFiles : undefined,
-    dsPackages,
+    dsPackages:    mergedDsPackages,
     threshold:     Number(threshold) || 80,
     components,
     framework,
+    jiraBaseUrl,
+    jiraProjectKey,
   })
   if (figmaToken) writeEnvLocal(cwd, { figmaToken })
   spinner.stop('drift.config.ts written')
@@ -412,7 +493,20 @@ ${pc.bold('What was set up:')}
   // ── Immediate next step — specific to what was configured ───────────────────
   console.log(`\n${pc.bold('Do this now:')}`)
 
-  if (figmaFiles.length > 0 && skillFiles.length > 0) {
+  if (chosenFoundation) {
+    console.log(`
+  You chose ${pc.bold(chosenFoundation.label)} as your foundation.
+
+  ${pc.cyan('1.')} Install it:
+       ${pc.bold(chosenFoundation.install)}
+  ${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
+
+  ${pc.dim('Docs + live preview: ' + chosenFoundation.docs)}
+  ${pc.dim('Figma community library: search "' + chosenFoundation.label + '" at figma.com/community')}
+`)
+  } else if (figmaFiles.length > 0 && skillFiles.length > 0) {
     console.log(`
   Your components are in Figma. Pull them into the registry now:
 
@@ -428,10 +522,10 @@ ${pc.bold('What was set up:')}
   ${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) {
+  } else if (mergedDsPackages?.length) {
     console.log(`
   ${pc.cyan('1.')} Run: ${pc.bold('npx catchdrift sync')}
-       Scans your codebase for imports from ${dsPackages.join(', ')} and registers them.
+       Scans your codebase for imports from ${mergedDsPackages.join(', ')} and registers them.
   ${pc.cyan('2.')} Run: ${pc.bold('npm run dev')}  →  press ${pc.bold('D')}  →  see live coverage
 `)
   } else {
@@ -444,6 +538,11 @@ ${pc.bold('What was set up:')}
 `)
   }
 
+  if (jiraBaseUrl) {
+    console.log(`  ${pc.dim('Jira:')} Connected to ${pc.bold(jiraBaseUrl)} (project: ${pc.bold(jiraProjectKey)})`)
+    console.log(`  ${pc.dim('  → Add your API token in the overlay → Settings → Integrations')}\n`)
+  }
+
   // ── Ongoing daily commands ───────────────────────────────────────────────────
   console.log(`${pc.bold('Daily workflow (Claude Code):')}
   ${pc.blue('/drift-context')}     Check DS health — run this before starting work

package/src/index.mjs

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

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, framework }) {
+export function writeDriftConfig(cwd, { storybookUrl, chromaticUrl, figmaFiles, dsPackages, threshold, components, framework, jiraBaseUrl, jiraProjectKey }) {
   const registry = buildComponentRegistry(components)
 
   const dsPackagesLine = dsPackages?.length
@@ -57,6 +57,8 @@ export function writeDriftConfig(cwd, { storybookUrl, chromaticUrl, figmaFiles,
     chromaticUrl ? `  chromaticUrl: '${chromaticUrl}',` : null,
     figmaFilesBlock,
     figmaTokenLine,
+    jiraBaseUrl     ? `  jiraBaseUrl: '${jiraBaseUrl}',` : null,
+    jiraProjectKey  ? `  jiraProjectKey: '${jiraProjectKey}',` : null,
     `  threshold: ${threshold},`,
     dsPackagesLine,
     `  components: {`,