@sanity/ui 4.2.0 → 5.0.0-alpha.10

package/src/cli/install.ts

@@ -0,0 +1,108 @@
+import {spawnSync} from 'node:child_process'
+import process from 'node:process'
+
+import {isPackageInstalled, PACKAGE_NAME} from './detect.js'
+import {readSelfPackage} from './selfPackage.js'
+import type {PackageManager} from './types.js'
+
+const ICONS = '@sanity/icons'
+const DEV_FLAG: Record<PackageManager, string> = {
+  npm: '--save-dev',
+  pnpm: '-D',
+  yarn: '-D',
+  bun: '-d',
+}
+
+export interface InstallResult {
+  ok: boolean
+  command: string
+  args: string[]
+  reason?: 'spawn' | 'exit'
+  message?: string
+  status?: number | null
+}
+
+/** Strips range operators to the exact floor version, e.g. "^3.7.4" -> "3.7.4". */
+function exactFromRange(range: string | undefined): string | null {
+  if (typeof range !== 'string') return null
+  const match = range.match(/\d+\.\d+\.\d+(?:-[\w.]+)?/)
+  return match ? match[0] : null
+}
+
+/**
+ * Builds the exact specs to install from this package's own manifest: the
+ * package at its shipped version, and icons at the version it declares in
+ * dependencies. Nothing here is invented.
+ *
+ * Icons is already a dependency, so the package manager installs it either way.
+ * It is listed explicitly because apps import icons directly to pass to
+ * components (`import {AddIcon} from '@sanity/icons/Add'`, then
+ * `<Button iconStart={AddIcon} />`), and under pnpm an import that
+ * isn't in the app's own package.json doesn't resolve. Dependencies the app
+ * never imports itself (react-refractor, clsx) are left to the package manager.
+ * React/react-dom are peers that belong to the host app, so they are left out
+ * too (the prereq check verifies them).
+ */
+export function resolveInstallSpecs(): string[] {
+  const self = readSelfPackage()
+  const deps = self.dependencies ?? {}
+
+  const specs = [`${PACKAGE_NAME}@${self.version ?? 'latest'}`]
+
+  const iconsVersion = exactFromRange(deps[ICONS])
+  specs.push(iconsVersion ? `${ICONS}@${iconsVersion}` : ICONS)
+
+  return specs
+}
+
+/**
+ * The React type packages a TypeScript project needs to type-check JSX and the
+ * component props. Only the ones not already installed are returned, pinned to
+ * the project's React major (defaulting to the supported React 19).
+ */
+export function resolveTypeSpecs(cwd: string, {reactMajor = 19} = {}): string[] {
+  const major = Number.isInteger(reactMajor) ? reactMajor : 19
+  return ['@types/react', '@types/react-dom']
+    .filter((name) => !isPackageInstalled(cwd, name))
+    .map((name) => `${name}@^${major}`)
+}
+
+export function installCommand(
+  packageManager: PackageManager,
+  specs: string[],
+  {dev = false} = {},
+): {command: string; args: string[]} {
+  const verb = packageManager === 'npm' ? 'install' : 'add'
+  const flags = dev ? [DEV_FLAG[packageManager]] : []
+  return {command: packageManager, args: [verb, ...flags, ...specs]}
+}
+
+/**
+ * Runs the install with inherited stdio. Returns a structured result so the
+ * caller can explain a peer-dependency conflict in plain language instead of
+ * failing silently.
+ */
+export function runInstall(
+  cwd: string,
+  packageManager: PackageManager,
+  specs: string[],
+  {dev = false} = {},
+): InstallResult {
+  const {command, args} = installCommand(packageManager, specs, {dev})
+  // On Windows the package managers are .cmd shims, and spawning them without a
+  // shell throws (ENOENT, or EINVAL since the Node .cmd security fix). The args
+  // are package specs we build ourselves, so there is nothing to escape.
+  const result = spawnSync(command, args, {
+    cwd,
+    stdio: 'inherit',
+    shell: process.platform === 'win32',
+  })
+
+  if (result.error) {
+    return {ok: false, reason: 'spawn', message: result.error.message, command, args}
+  }
+  if (result.status !== 0) {
+    return {ok: false, reason: 'exit', status: result.status, command, args}
+  }
+  return {ok: true, command, args}
+}

package/src/cli/log.ts

@@ -0,0 +1,79 @@
+import process from 'node:process'
+import readline from 'node:readline/promises'
+
+// Colorize only a real terminal, and honor the NO_COLOR convention (https://no-color.org).
+const noColor = process.env['NO_COLOR'] !== undefined
+const supportsColor = process.stdout.isTTY && !noColor
+
+function paint(code: string, text: string): string {
+  if (!supportsColor) return text
+  return `\u001b[${code}m${text}\u001b[0m`
+}
+
+export const color = {
+  bold: (t: string) => paint('1', t),
+  dim: (t: string) => paint('2', t),
+  red: (t: string) => paint('31', t),
+  green: (t: string) => paint('32', t),
+  yellow: (t: string) => paint('33', t),
+  blue: (t: string) => paint('34', t),
+  cyan: (t: string) => paint('36', t),
+}
+
+export function info(message: string): void {
+  process.stdout.write(`${message}\n`)
+}
+
+export function step(message: string): void {
+  process.stdout.write(`${color.cyan('›')} ${message}\n`)
+}
+
+export function success(message: string): void {
+  process.stdout.write(`${color.green('✓')} ${message}\n`)
+}
+
+export function warn(message: string): void {
+  process.stdout.write(`${color.yellow('!')} ${message}\n`)
+}
+
+export function fail(message: string): void {
+  process.stdout.write(`${color.red('✗')} ${message}\n`)
+}
+
+/** Real errors (unexpected exceptions) go to stderr; report output uses fail(). */
+export function errorLine(message: string): void {
+  // Gate color on stderr (where this writes), not stdout, so a redirected stderr
+  // doesn't receive ANSI codes while stdout is still a TTY.
+  const mark = process.stderr.isTTY && !noColor ? '\u001b[31m✗\u001b[0m' : '✗'
+  process.stderr.write(`${mark} ${message}\n`)
+}
+
+export function heading(message: string): void {
+  process.stdout.write(`\n${color.bold(message)}\n`)
+}
+
+interface ConfirmOptions {
+  defaultValue?: boolean
+  assumeYes?: boolean
+}
+
+/**
+ * Ask a yes/no question. In non-interactive contexts (no TTY) it resolves to
+ * the provided default so CI and agents never block.
+ */
+export async function confirm(question: string, options: ConfirmOptions = {}): Promise<boolean> {
+  const {defaultValue = true, assumeYes = false} = options
+  if (assumeYes || !process.stdin.isTTY) return defaultValue
+
+  const rl = readline.createInterface({input: process.stdin, output: process.stdout})
+  try {
+    const hint = defaultValue ? 'Y/n' : 'y/N'
+    const answer = (await rl.question(`${question} ${color.dim(`(${hint})`)} `))
+      .trim()
+      .toLowerCase()
+    if (answer === '') return defaultValue
+    return answer === 'y' || answer === 'yes'
+  } finally {
+    rl.close()
+  }
+}

package/src/cli/selfPackage.ts

@@ -0,0 +1,14 @@
+import {readFileSync} from 'node:fs'
+
+import type {PackageJson} from './types.js'
+
+/**
+ * Reads this package's own package.json so the CLI installs the exact version
+ * it ships with and the real declared ranges, never invented ones. The path is
+ * two levels up from both src/cli (dev) and dist/cli (published), which both
+ * resolve to the package root.
+ */
+export function readSelfPackage(): PackageJson {
+  const url = new URL('../../package.json', import.meta.url)
+  return JSON.parse(readFileSync(url, 'utf8')) as PackageJson
+}

package/src/cli/styles.test.ts

@@ -0,0 +1,130 @@
+import {mkdirSync, mkdtempSync, readFileSync, rmSync, writeFileSync} from 'node:fs'
+import {tmpdir} from 'node:os'
+import {join} from 'node:path'
+
+import {afterEach, beforeEach, describe, expect, it} from 'vitest'
+
+import {hasStylesImport, inspectStylesheet, wireStylesheet} from './styles.js'
+
+describe('hasStylesImport', () => {
+  it('matches single and double quoted imports', () => {
+    expect(hasStylesImport(`import '@sanity/ui/styles.css'`)).toBe(true)
+    expect(hasStylesImport(`import "@sanity/ui/styles.css"`)).toBe(true)
+    expect(hasStylesImport(`import './app.css'`)).toBe(false)
+  })
+
+  it('matches a require of the stylesheet', () => {
+    expect(hasStylesImport(`require('@sanity/ui/styles.css')`)).toBe(true)
+  })
+
+  it('ignores a commented-out or string mention of the path', () => {
+    expect(hasStylesImport(`// import '@sanity/ui/styles.css'`)).toBe(false)
+    expect(hasStylesImport(`const note = 'see @sanity/ui/styles.css'`)).toBe(false)
+  })
+})
+
+describe('wireStylesheet', () => {
+  let dir: string
+  beforeEach(() => {
+    dir = mkdtempSync(join(tmpdir(), 'sui-styles-'))
+  })
+  afterEach(() => {
+    rmSync(dir, {recursive: true, force: true})
+  })
+
+  function write(rel: string, content: string): string {
+    const full = join(dir, rel)
+    mkdirSync(join(full, '..'), {recursive: true})
+    writeFileSync(full, content)
+    return full
+  }
+
+  it('inserts after the leading import block', () => {
+    write(
+      'src/main.tsx',
+      `import {createRoot} from 'react-dom/client'\nimport App from './App'\n\ncreateRoot()\n`,
+    )
+    const result = wireStylesheet(dir, 'src/main.tsx')
+    expect(result.wrote).toBe(true)
+    const lines = readFileSync(join(dir, 'src/main.tsx'), 'utf8').split('\n')
+    expect(lines[2]).toBe(`import '@sanity/ui/styles.css'`)
+  })
+
+  it('inserts after a multiline import without splitting it', () => {
+    write(
+      'src/main.tsx',
+      `import {\n  StrictMode,\n  useState,\n} from 'react'\nimport App from './App'\n\ncreateRoot()\n`,
+    )
+    wireStylesheet(dir, 'src/main.tsx')
+    const content = readFileSync(join(dir, 'src/main.tsx'), 'utf8')
+    // The import must land after the whole react import, not between its lines.
+    expect(content).toContain(
+      `} from 'react'\nimport App from './App'\nimport '@sanity/ui/styles.css'`,
+    )
+    expect(content).not.toMatch(/import \{\nimport '@sanity-labs/)
+  })
+
+  it('keeps a leading use-client directive first', () => {
+    write('app/layout.tsx', `'use client'\nimport {x} from 'y'\n`)
+    wireStylesheet(dir, 'app/layout.tsx')
+    const lines = readFileSync(join(dir, 'app/layout.tsx'), 'utf8').split('\n')
+    expect(lines[0]).toBe(`'use client'`)
+    expect(lines.includes(`import '@sanity/ui/styles.css'`)).toBe(true)
+  })
+
+  it('injects into astro frontmatter', () => {
+    write('src/layouts/Layout.astro', `---\nconst {title} = Astro.props\n---\n<html></html>\n`)
+    wireStylesheet(dir, 'src/layouts/Layout.astro')
+    const content = readFileSync(join(dir, 'src/layouts/Layout.astro'), 'utf8')
+    expect(content).toContain(`import '@sanity/ui/styles.css'`)
+    expect(content.indexOf(`import '@sanity/ui/styles.css'`)).toBeLessThan(
+      content.indexOf('<html>'),
+    )
+  })
+
+  it('is idempotent', () => {
+    write('src/main.tsx', `import App from './App'\n`)
+    wireStylesheet(dir, 'src/main.tsx')
+    const second = wireStylesheet(dir, 'src/main.tsx')
+    expect(second.already).toBe(true)
+    expect(second.wrote).toBe(false)
+  })
+
+  it('reports a missing entry instead of throwing', () => {
+    const result = wireStylesheet(dir, 'src/main.tsx')
+    expect(result.missing).toBe(true)
+  })
+})
+
+describe('inspectStylesheet', () => {
+  let dir: string
+  beforeEach(() => {
+    dir = mkdtempSync(join(tmpdir(), 'sui-inspect-'))
+  })
+  afterEach(() => {
+    rmSync(dir, {recursive: true, force: true})
+  })
+
+  it('finds the import in a sibling file when not in the entry', () => {
+    mkdirSync(join(dir, 'src'), {recursive: true})
+    writeFileSync(join(dir, 'src/main.tsx'), `import App from './App'\n`)
+    writeFileSync(join(dir, 'src/App.tsx'), `import '@sanity/ui/styles.css'\n`)
+    const result = inspectStylesheet(dir, 'src/main.tsx')
+    expect(result.imported).toBe(true)
+    expect(result.importedIn).toBe(join('src', 'App.tsx'))
+  })
+
+  it('finds the import in a nested route file', () => {
+    mkdirSync(join(dir, 'app/routes'), {recursive: true})
+    writeFileSync(join(dir, 'app/root.tsx'), `export default function Root() {}\n`)
+    writeFileSync(join(dir, 'app/routes/home.tsx'), `import '@sanity/ui/styles.css'\n`)
+    const result = inspectStylesheet(dir, 'app/root.tsx')
+    expect(result.imported).toBe(true)
+  })
+
+  it('reports missing when absent everywhere', () => {
+    mkdirSync(join(dir, 'src'), {recursive: true})
+    writeFileSync(join(dir, 'src/main.tsx'), `import App from './App'\n`)
+    expect(inspectStylesheet(dir, 'src/main.tsx').imported).toBe(false)
+  })
+})

package/src/cli/styles.ts

@@ -0,0 +1,205 @@
+import {existsSync, readdirSync, readFileSync, statSync, writeFileSync} from 'node:fs'
+import {dirname, join, relative} from 'node:path'
+
+export const STYLES_SPECIFIER = '@sanity/ui/styles.css'
+const IMPORT_LINE = `import '${STYLES_SPECIFIER}'`
+// Match a real import/require of the stylesheet, not a bare mention. A
+// commented-out or string occurrence of the path must not count as "wired",
+// or doctor/init would report success when the import isn't active.
+const SPEC = String.raw`@sanity/ui/styles\.css`
+const PRESENT = new RegExp(
+  String.raw`(?:^|\n)\s*import\s+(?:[^\n'"]*\bfrom\s+)?['"]${SPEC}['"]` +
+    String.raw`|\brequire\(\s*['"]${SPEC}['"]\s*\)`,
+)
+const SOURCE_EXT = /\.[jt]sx?$|\.astro$/
+const SKIP_DIRS = new Set([
+  'node_modules',
+  'dist',
+  'build',
+  '.next',
+  '.react-router',
+  '.git',
+  'out',
+])
+const SOURCE_ROOTS = ['src', 'app', 'pages', 'components']
+const MAX_FILES = 800
+
+export interface StylesheetInfo {
+  entry: string
+  file: string
+  exists: boolean
+  imported: boolean
+  importedIn?: string
+}
+
+export interface WireResult {
+  entry: string
+  file: string
+  imported: boolean
+  wrote: boolean
+  missing?: boolean
+  already?: boolean
+}
+
+export function hasStylesImport(content: string): boolean {
+  return PRESENT.test(content)
+}
+
+function fileImports(file: string): boolean {
+  try {
+    return hasStylesImport(readFileSync(file, 'utf8'))
+  } catch {
+    return false
+  }
+}
+
+/** Bounded recursive walk that returns the first source file importing the stylesheet. */
+function findImportInDir(root: string, budget: {count: number}): string | null {
+  const stack = [root]
+  while (stack.length > 0 && budget.count < MAX_FILES) {
+    const dir = stack.pop()
+    if (dir === undefined) break
+    let entries
+    try {
+      entries = readdirSync(dir, {withFileTypes: true})
+    } catch {
+      continue
+    }
+    for (const entry of entries) {
+      const full = join(dir, entry.name)
+      if (entry.isDirectory()) {
+        if (!SKIP_DIRS.has(entry.name)) stack.push(full)
+      } else if (SOURCE_EXT.test(entry.name)) {
+        budget.count++
+        if (budget.count > MAX_FILES) break
+        if (fileImports(full)) return full
+      }
+    }
+  }
+  return null
+}
+
+/**
+ * Reports whether the stylesheet is imported. The import only needs to exist
+ * once in the module graph, so beyond the prescribed entry we scan the project
+ * source roots (bounded) before reporting it missing. That catches imports
+ * placed in App.tsx, a route file, or a layout component.
+ */
+export function inspectStylesheet(cwd: string, entry: string): StylesheetInfo {
+  const file = join(cwd, entry)
+  const exists = existsSync(file)
+  if (exists && fileImports(file)) return {entry, file, exists, imported: true}
+
+  const budget = {count: 0}
+  const roots = new Set([dirname(entry), ...SOURCE_ROOTS].map((r) => join(cwd, r)))
+  for (const root of Array.from(roots)) {
+    if (!existsSync(root)) continue
+    try {
+      if (!statSync(root).isDirectory()) continue
+    } catch {
+      continue
+    }
+    const found = findImportInDir(root, budget)
+    if (found)
+      return {
+        entry,
+        file,
+        exists,
+        imported: true,
+        importedIn: relative(cwd, found),
+      }
+  }
+
+  return {entry, file, exists, imported: false}
+}
+
+function isDirective(line: string): boolean {
+  const trimmed = line.trim()
+  return /^['"]use (client|server|strict)['"];?$/.test(trimmed)
+}
+
+function isImportLine(line: string): boolean {
+  return /^\s*import\b/.test(line)
+}
+
+/**
+ * True when an import statement finishes on this line: either it ends with a
+ * `from '...'` clause or it is a bare side-effect `import '...'`. Used to find
+ * the real end of an import block so we never split a multiline import.
+ */
+function importStatementEnds(line: string): boolean {
+  const t = line.trim()
+  return /\bfrom\s*['"][^'"]+['"];?\s*$/.test(t) || /^import\s+['"][^'"]+['"];?\s*$/.test(t)
+}
+
+/** Inserts the import into a JS/TS module after any leading directive + import block. */
+function injectIntoModule(content: string): string {
+  const lines = content.split('\n')
+  let insertAt = 0
+
+  while (insertAt < lines.length) {
+    const line = lines[insertAt] ?? ''
+    if (isDirective(line) || line.trim() === '') insertAt++
+    else break
+  }
+
+  // Track the last line that closes an import statement so a multiline import
+  // (`import {\n  a,\n} from 'x'`) is treated as a single unit and we insert
+  // after its closing line, never between its lines.
+  let lastImport = -1
+  let inMultilineImport = false
+  for (let i = insertAt; i < lines.length; i++) {
+    const line = lines[i] ?? ''
+    if (inMultilineImport) {
+      if (importStatementEnds(line)) {
+        inMultilineImport = false
+        lastImport = i
+      }
+      continue
+    }
+    if (isImportLine(line)) {
+      lastImport = i
+      if (!importStatementEnds(line)) inMultilineImport = true
+    } else if (line.trim() !== '' && lastImport !== -1) {
+      break
+    }
+  }
+
+  const at = lastImport === -1 ? insertAt : lastImport + 1
+  lines.splice(at, 0, IMPORT_LINE)
+  return lines.join('\n')
+}
+
+/** Inserts the import inside an Astro frontmatter fence, creating one if absent. */
+function injectIntoAstro(content: string): string {
+  if (content.startsWith('---')) {
+    const end = content.indexOf('\n---', 3)
+    if (end !== -1) {
+      const head = content.slice(0, end)
+      const tail = content.slice(end)
+      return `${head}\n${IMPORT_LINE}${tail}`
+    }
+  }
+  return `---\n${IMPORT_LINE}\n---\n${content}`
+}
+
+export function wireStylesheet(cwd: string, entry: string, {dryRun = false} = {}): WireResult {
+  const file = join(cwd, entry)
+  if (!existsSync(file)) return {entry, file, missing: true, imported: false, wrote: false}
+
+  const content = readFileSync(file, 'utf8')
+  if (hasStylesImport(content)) {
+    return {
+      entry,
+      file,
+      missing: false,
+      imported: true,
+      wrote: false,
+      already: true,
+    }
+  }
+
+  const next = entry.endsWith('.astro') ? injectIntoAstro(content) : injectIntoModule(content)
+  if (!dryRun) writeFileSync(file, next)
+  return {entry, file, missing: false, imported: true, wrote: !dryRun}
+}

package/src/cli/test-utils.ts

@@ -0,0 +1,10 @@
+import {mkdirSync, writeFileSync} from 'node:fs'
+import {join} from 'node:path'
+
+import {PACKAGE_NAME} from './detect.js'
+
+export function writeInstalledUiVersion(dir: string, version: string): void {
+  const root = join(dir, 'node_modules', PACKAGE_NAME)
+  mkdirSync(root, {recursive: true})
+  writeFileSync(join(root, 'package.json'), JSON.stringify({name: PACKAGE_NAME, version}))
+}