@databricks/design-system 2.0.8 → 2.0.9

package/CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## 2.0.9 (2026-09-17T22:38:05Z)
+
+- No consumer-facing changes.
+
 ## 2.0.8 (2026-09-17T22:25:31Z)
 
 ### Added

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@databricks/design-system",
-  "version": "2.0.8",
+  "version": "2.0.9",
   "description": "DuBois Design System",
   "keywords": [],
   "license": "ISC",
@@ -56,6 +56,7 @@
     "/AGENTS.md",
     "/CHANGELOG.md",
     "/setup.mjs",
+    "/scaffold-agents.md",
     "dist",
     "dist-types",
     "test-utils",

package/scaffold-agents.md

@@ -0,0 +1,3 @@
+Use `@databricks/design-system` for design guidance and UI components.
+
+@node_modules/@databricks/design-system/AGENTS.md

package/setup.mjs

@@ -92,7 +92,11 @@ function ask(rl, question) {
 // Runs a command with inherited stdio so the canonical scaffolder's own prompts/output reach the
 // user directly. Exits the process on failure rather than half-finishing a setup.
 function run(command, commandArgs, cwd) {
-  const result = spawnSync(command, commandArgs, { cwd, stdio: 'inherit', shell: false });
+  // Quiet npm to errors only, inherited by every npm/npx child (our installs and the
+  // sub-scaffolders' internal ones): the deprecation and ERESOLVE peer warnings they print are
+  // noise here. Non-npm tools ignore this var.
+  const env = { ...process.env, npm_config_loglevel: 'error' };
+  const result = spawnSync(command, commandArgs, { cwd, stdio: 'inherit', shell: false, env });
   if (result.status !== 0) {
     fail(`\`${command} ${commandArgs.join(' ')}\` failed (exit ${result.status}).`);
   }
@@ -224,7 +228,11 @@ function scaffoldVite(name) {
   console.log(`\n> Scaffolding a Vite + React + TypeScript project via ${VITE_SCAFFOLDER}…\n`);
   // npx runs the already-`create-`-prefixed package directly (unlike `npm create`, which would
   // prepend a second `create-`), matching how the Next path invokes create-next-app.
-  run('npx', [VITE_SCAFFOLDER, name, '--template', 'react-ts']);
+  // Force create-vite fully non-interactive — this CLI is run by non-engineers, so its own mode
+  // prompt should be the only question. --template picks React+TS and --eslint answers the
+  // linter question; --no-interactive suppresses any remaining prompt and --no-immediate keeps
+  // create-vite from installing/starting a dev server ahead of our own install steps.
+  run('npx', [VITE_SCAFFOLDER, name, '--template', 'react-ts', '--eslint', '--no-interactive', '--no-immediate']);
 
   const dir = path.resolve(process.cwd(), name);
   const pm = detectPackageManager(dir);
@@ -261,10 +269,55 @@ function scaffoldVite(name) {
   ensureCssDeclaration(dir, 'vite');
   configureViteEmotion(dir);
   addTsconfigJsxImportSource(path.join(dir, 'tsconfig.app.json'));
+  removeViteDemoFiles(dir);
+  writeAgentInstructions(dir);
 
   printDone(name, pm, 'vite');
 }
 
+// create-vite ships a demo splash page (App.css, a styled default index.css, and the Vite/React
+// logo + hero assets). We render our own empty App and rely on dbui's global styles, so delete
+// the demo files to leave a genuinely blank project. Our main.tsx imports none of them.
+function removeViteDemoFiles(dir) {
+  for (const rel of ['src/App.css', 'src/index.css', 'src/assets']) {
+    fs.rmSync(path.join(dir, rel), { recursive: true, force: true });
+  }
+}
+
+// Writes agent instructions into the generated project so AI coding agents build UI from dbui
+// components. AGENTS.md holds the guidance (its body ships beside this script); CLAUDE.md just
+// imports it, because Claude Code only auto-loads CLAUDE.md, not AGENTS.md. Neither overwrites an
+// existing file — an existing project may already carry its own. Returns whether it wrote AGENTS.md.
+function writeAgentInstructions(dir) {
+  let wroteAgents = false;
+  const agentsPath = path.join(dir, 'AGENTS.md');
+  if (!fs.existsSync(agentsPath)) {
+    const body = readScaffoldAgents();
+    if (body === undefined) return false;
+    writeFileEnsuringDir(agentsPath, body);
+    wroteAgents = true;
+  }
+
+  // One source of truth: Claude Code follows this import, other agents read AGENTS.md directly.
+  const claudePath = path.join(dir, 'CLAUDE.md');
+  if (!fs.existsSync(claudePath)) writeFileEnsuringDir(claudePath, '@AGENTS.md\n');
+
+  return wroteAgents;
+}
+
+// The AGENTS.md body ships beside this script (copied from npm_publishing/ at publish time) so it
+// can be edited without touching the CLI. A missing file means a packaging problem — skip the agent
+// docs rather than abort a scaffold that has already installed successfully.
+function readScaffoldAgents() {
+  try {
+    const templatePath = path.join(path.dirname(fileURLToPath(import.meta.url)), 'scaffold-agents.md');
+    return fs.readFileSync(templatePath, 'utf8');
+  } catch {
+    console.warn('> Skipping AGENTS.md/CLAUDE.md (bundled scaffold-agents.md not found).');
+    return undefined;
+  }
+}
+
 // create-vite's react plugin drives the JSX transform, so the Emotion `css` prop needs its
 // jsxImportSource option — the runtime half of the Emotion setup (the tsconfig half is separate).
 function configureViteEmotion(dir) {
@@ -344,6 +397,7 @@ function scaffoldNext(name) {
   configureNextEmotion(dir);
   addTsconfigJsxImportSource(path.join(dir, 'tsconfig.json'));
   writeVercelReadme(dir, name);
+  writeAgentInstructions(dir);
 
   printDone(name, pm, 'next');
 }
@@ -419,6 +473,9 @@ function addToExisting(dir) {
   if (entry && addImports(entry, CSS_IMPORTS)) {
     console.log(`> Added the dbui CSS imports to ${path.relative(dir, entry)}`);
   }
+  if (writeAgentInstructions(dir)) {
+    console.log('> Added AGENTS.md instructing agents to use @databricks/design-system for UI');
+  }
   printManualInstructions(detected.type);
 }
 
@@ -478,17 +535,7 @@ function sampleBody() {
 }
 
 function viteAppFile() {
-  return [
-    "import { Button, Typography, useDesignSystemTheme } from '@databricks/design-system';",
-    '',
-    'export function App() {',
-    '  const { theme } = useDesignSystemTheme();',
-    '  return (',
-    sampleBody(),
-    '  );',
-    '}',
-    '',
-  ].join('\n');
+  return ['// Build your app here.', 'export function App() {', '  return null;', '}', ''].join('\n');
 }
 
 // The client-only module Next loads with ssr:false: it owns the DesignSystemProvider and the
@@ -544,27 +591,33 @@ async function promptMode(rl) {
 async function main() {
   const args = parseArgs(process.argv.slice(2));
 
+  // Collect every interactive answer first, then close readline before shelling out. While the
+  // interface is open it holds the TTY in raw mode, which passes through to the scaffolders (and
+  // to any dev server they'd start), so Ctrl+C would never reach them. Closing it restores the
+  // normal terminal so child processes handle their own signals.
   const rl = readline.createInterface({ input: process.stdin, output: process.stdout });
+  let mode;
+  let name;
   try {
-    const mode = args.mode ?? (await promptMode(rl));
+    mode = args.mode ?? (await promptMode(rl));
     if (!mode || !['vite', 'next', 'existing'].includes(mode)) fail('Please choose 1, 2, or 3.');
-
-    if (mode === 'existing') {
-      addToExisting(process.cwd());
-      return;
-    }
-
-    const name = args.name || (await ask(rl, `\nProject name (new directory): `));
-    if (!name) fail('A project name is required.');
-    if (fs.existsSync(path.resolve(process.cwd(), name))) {
-      fail(`\`${name}\` already exists here. Choose a name that isn't taken.`);
+    if (mode !== 'existing') {
+      name = args.name || (await ask(rl, `\nProject name (new directory): `));
+      if (!name) fail('A project name is required.');
     }
-
-    if (mode === 'vite') scaffoldVite(name);
-    else scaffoldNext(name);
   } finally {
     rl.close();
   }
+
+  if (mode === 'existing') {
+    addToExisting(process.cwd());
+    return;
+  }
+  if (fs.existsSync(path.resolve(process.cwd(), name))) {
+    fail(`\`${name}\` already exists here. Choose a name that isn't taken.`);
+  }
+  if (mode === 'vite') scaffoldVite(name);
+  else scaffoldNext(name);
 }
 
 // A bin is symlinked into node_modules/.bin, so compare realpaths (not the raw argv path) to tell