@sanity/ui 4.0.0-static.9 → 5.0.0-alpha.1

package/src/cli/detect.test.ts

@@ -0,0 +1,191 @@
+import {mkdirSync, mkdtempSync, rmSync, writeFileSync} from 'node:fs'
+import {tmpdir} from 'node:os'
+import {join} from 'node:path'
+
+import {afterEach, beforeEach, describe, expect, it} from 'vitest'
+
+import {
+  detect,
+  detectEntry,
+  detectFramework,
+  detectPackageManager,
+  isLegacyUiVersion,
+} from './detect.js'
+import {writeInstalledUiVersion} from './test-utils.js'
+
+describe('detectPackageManager', () => {
+  let dir: string
+  beforeEach(() => {
+    dir = mkdtempSync(join(tmpdir(), 'sui-pm-'))
+  })
+  afterEach(() => {
+    rmSync(dir, {recursive: true, force: true})
+  })
+
+  it('reads lockfiles', () => {
+    writeFileSync(join(dir, 'pnpm-lock.yaml'), '')
+    expect(detectPackageManager(dir)).toBe('pnpm')
+  })
+
+  it('falls back to the packageManager field, then npm', () => {
+    writeFileSync(join(dir, 'package.json'), JSON.stringify({packageManager: 'yarn@4.0.0'}))
+    expect(detectPackageManager(dir)).toBe('yarn')
+    writeFileSync(join(dir, 'package.json'), JSON.stringify({}))
+    expect(detectPackageManager(dir)).toBe('npm')
+  })
+})
+
+describe('detectFramework', () => {
+  let dir: string
+  beforeEach(() => {
+    dir = mkdtempSync(join(tmpdir(), 'sui-fw-'))
+  })
+  afterEach(() => {
+    rmSync(dir, {recursive: true, force: true})
+  })
+
+  function pkg(deps: Record<string, string>): void {
+    writeFileSync(join(dir, 'package.json'), JSON.stringify({dependencies: deps}))
+  }
+
+  it('distinguishes Next App Router from Pages', () => {
+    pkg({next: '16.0.0'})
+    mkdirSync(join(dir, 'app'))
+    expect(detectFramework(dir)).toBe('next-app')
+
+    rmSync(join(dir, 'app'), {recursive: true})
+    mkdirSync(join(dir, 'pages'))
+    expect(detectFramework(dir)).toBe('next-pages')
+  })
+
+  it('detects react-router, remix, astro, vite, and the react fallback', () => {
+    pkg({'@react-router/dev': '7.0.0', 'react-router': '7.0.0'})
+    expect(detectFramework(dir)).toBe('react-router')
+
+    pkg({'@remix-run/react': '2.0.0'})
+    expect(detectFramework(dir)).toBe('remix')
+
+    pkg({astro: '4.0.0'})
+    expect(detectFramework(dir)).toBe('astro')
+
+    pkg({vite: '8.0.0'})
+    expect(detectFramework(dir)).toBe('vite')
+
+    pkg({react: '19.2.0'})
+    expect(detectFramework(dir)).toBe('react')
+  })
+})
+
+describe('detectEntry', () => {
+  let dir: string
+  beforeEach(() => {
+    dir = mkdtempSync(join(tmpdir(), 'sui-entry-'))
+  })
+  afterEach(() => {
+    rmSync(dir, {recursive: true, force: true})
+  })
+
+  it('returns the existing entry when present', () => {
+    mkdirSync(join(dir, 'src'))
+    writeFileSync(join(dir, 'src/main.tsx'), '')
+    expect(detectEntry(dir, 'vite')).toEqual({entry: 'src/main.tsx', exists: true})
+  })
+
+  it('returns the canonical default when absent', () => {
+    expect(detectEntry(dir, 'next-app')).toEqual({entry: 'app/layout.tsx', exists: false})
+  })
+})
+
+describe('detect typescript flag', () => {
+  let dir: string
+  beforeEach(() => {
+    dir = mkdtempSync(join(tmpdir(), 'sui-ts-'))
+  })
+  afterEach(() => {
+    rmSync(dir, {recursive: true, force: true})
+  })
+
+  it('does not infer TypeScript from a guessed entry that does not exist', () => {
+    writeFileSync(join(dir, 'package.json'), JSON.stringify({dependencies: {react: '19.2.0'}}))
+    // No tsconfig, no typescript dep, and the .tsx entry is only a fallback guess.
+    expect(detect(dir).typescript).toBe(false)
+  })
+
+  it('infers TypeScript when the resolved entry file actually exists', () => {
+    mkdirSync(join(dir, 'src'))
+    writeFileSync(join(dir, 'src/main.tsx'), '')
+    writeFileSync(join(dir, 'package.json'), JSON.stringify({devDependencies: {vite: '8.0.0'}}))
+    expect(detect(dir).typescript).toBe(true)
+  })
+})
+
+describe('isLegacyUiVersion', () => {
+  it('treats majors 1–4 as legacy and 5+ as v5', () => {
+    expect(isLegacyUiVersion('3.5.1')).toBe(true)
+    expect(isLegacyUiVersion('5.0.0-alpha.1')).toBe(false)
+    expect(isLegacyUiVersion('5.0.0')).toBe(false)
+  })
+})
+
+describe('detect ui install', () => {
+  let dir: string
+  beforeEach(() => {
+    dir = mkdtempSync(join(tmpdir(), 'sui-ui-install-'))
+  })
+  afterEach(() => {
+    rmSync(dir, {recursive: true, force: true})
+  })
+
+  it('detects a declared pre-v5 range', () => {
+    writeFileSync(
+      join(dir, 'package.json'),
+      JSON.stringify({dependencies: {'@sanity/ui': '^3.5.1'}}),
+    )
+    expect(detect(dir).legacyInstall).toBe('^3.5.1')
+  })
+
+  it('detects an installed pre-v5 version', () => {
+    writeFileSync(join(dir, 'package.json'), JSON.stringify({dependencies: {}}))
+    writeInstalledUiVersion(dir, '3.5.1')
+    expect(detect(dir).legacyInstall).toBe('3.5.1')
+  })
+
+  it('detects a v5 npm alias alongside legacy @sanity/ui', () => {
+    writeFileSync(
+      join(dir, 'package.json'),
+      JSON.stringify({dependencies: {'ui5': 'npm:@sanity/ui@5', '@sanity/ui': '^3.5.1'}}),
+    )
+    const result = detect(dir)
+    expect(result.aliasedInstall).toBe('ui5')
+    expect(result.legacyInstall).toBe('^3.5.1')
+  })
+
+  it('detects a versioned v5 npm alias', () => {
+    writeFileSync(
+      join(dir, 'package.json'),
+      JSON.stringify({dependencies: {ui5: 'npm:@sanity/ui@5.0.0-alpha.1'}}),
+    )
+    expect(detect(dir).aliasedInstall).toBe('ui5')
+  })
+
+  it('detects the alpha dist-tag npm alias', () => {
+    writeFileSync(
+      join(dir, 'package.json'),
+      JSON.stringify({dependencies: {ui5: 'npm:@sanity/ui@alpha'}}),
+    )
+    expect(detect(dir).aliasedInstall).toBe('ui5')
+  })
+
+  it('does not detect uninstalled ui as legacy or alias', () => {
+    writeFileSync(join(dir, 'package.json'), JSON.stringify({dependencies: {react: '19.2.0'}}))
+    expect(detect(dir).legacyInstall).toBeNull()
+    expect(detect(dir).aliasedInstall).toBeNull()
+  })
+
+  it('does not detect installed v5 as legacy or alias', () => {
+    writeFileSync(join(dir, 'package.json'), JSON.stringify({dependencies: {}}))
+    writeInstalledUiVersion(dir, '5.0.0-alpha.1')
+    expect(detect(dir).legacyInstall).toBeNull()
+    expect(detect(dir).aliasedInstall).toBeNull()
+  })
+})

package/src/cli/detect.ts

@@ -0,0 +1,205 @@
+import {existsSync, readFileSync} from 'node:fs'
+import {join} from 'node:path'
+
+import type {
+  Detected,
+  EntryInfo,
+  Framework,
+  PackageJson,
+  PackageManager,
+  ReactInfo,
+} from './types.js'
+import {parseVersion} from './versions.js'
+
+export const PACKAGE_NAME = '@sanity/ui'
+
+export const LEGACY_COEXISTENCE_HINT =
+  'To add v5 alongside an existing @sanity/ui install, use a package alias — see the README section "For apps using Sanity UI v3".'
+
+/**
+ * Framework ids map 1:1 to the `framework` field written into sanity-ui.json.
+ * Each carries the ordered list of candidate entry files where the stylesheet
+ * import belongs.
+ */
+const FRAMEWORK_ENTRIES: Record<Framework, string[]> = {
+  'next-app': ['app/layout.tsx', 'app/layout.jsx', 'src/app/layout.tsx', 'src/app/layout.jsx'],
+  'next-pages': ['pages/_app.tsx', 'pages/_app.jsx', 'src/pages/_app.tsx', 'src/pages/_app.jsx'],
+  'react-router': ['app/root.tsx', 'app/root.jsx'],
+  'remix': ['app/root.tsx', 'app/root.jsx'],
+  'vite': ['src/main.tsx', 'src/main.jsx', 'src/main.ts'],
+  'astro': [],
+  'react': ['src/index.tsx', 'src/main.tsx', 'src/index.jsx', 'src/main.jsx'],
+}
+
+export function readPackageJson(cwd: string): PackageJson | null {
+  const file = join(cwd, 'package.json')
+  if (!existsSync(file)) return null
+  try {
+    return JSON.parse(readFileSync(file, 'utf8')) as PackageJson
+  } catch {
+    return null
+  }
+}
+
+export function allDeps(pkg: PackageJson | null): Record<string, string | undefined> {
+  if (!pkg) return {}
+  return {...pkg.dependencies, ...pkg.devDependencies, ...pkg.peerDependencies}
+}
+
+export function detectPackageManager(cwd: string): PackageManager {
+  if (existsSync(join(cwd, 'bun.lockb')) || existsSync(join(cwd, 'bun.lock'))) return 'bun'
+  if (existsSync(join(cwd, 'pnpm-lock.yaml'))) return 'pnpm'
+  if (existsSync(join(cwd, 'yarn.lock'))) return 'yarn'
+  if (existsSync(join(cwd, 'package-lock.json'))) return 'npm'
+
+  const declared = readPackageJson(cwd)?.packageManager
+  if (typeof declared === 'string') {
+    const name = declared.split('@')[0]
+    if (name === 'pnpm' || name === 'yarn' || name === 'npm' || name === 'bun') return name
+  }
+  return 'npm'
+}
+
+export function detectFramework(
+  cwd: string,
+  pkg: PackageJson | null = readPackageJson(cwd),
+): Framework {
+  const deps = allDeps(pkg)
+  const has = (name: string): boolean => Boolean(deps[name])
+  const dir = (relative: string): boolean => existsSync(join(cwd, relative))
+
+  if (has('next')) {
+    if (dir('app') || dir('src/app')) return 'next-app'
+    if (dir('pages') || dir('src/pages')) return 'next-pages'
+    return 'next-app'
+  }
+  if (has('@remix-run/react') || has('@remix-run/dev')) return 'remix'
+  if (has('@react-router/dev') || has('react-router')) return 'react-router'
+  if (has('astro')) return 'astro'
+  if (has('vite')) return 'vite'
+  return 'react'
+}
+
+export function detectTypeScript(
+  cwd: string,
+  pkg: PackageJson | null = readPackageJson(cwd),
+): boolean {
+  return existsSync(join(cwd, 'tsconfig.json')) || Boolean(allDeps(pkg)['typescript'])
+}
+
+/**
+ * Returns the first existing candidate entry file, otherwise the first
+ * candidate as the place to create one. Astro has no fixed entry, so we look
+ * for a layout component.
+ */
+export function detectEntry(cwd: string, framework: Framework): EntryInfo {
+  if (framework === 'astro') return detectAstroLayout(cwd)
+
+  const candidates = FRAMEWORK_ENTRIES[framework]
+  const existing = candidates.find((rel) => existsSync(join(cwd, rel)))
+  return {entry: existing ?? candidates[0] ?? 'src/index.tsx', exists: Boolean(existing)}
+}
+
+function detectAstroLayout(cwd: string): EntryInfo {
+  const candidates = [
+    'src/layouts/Layout.astro',
+    'src/layouts/BaseLayout.astro',
+    'src/layouts/index.astro',
+    'src/pages/index.astro',
+  ]
+  const existing = candidates.find((rel) => existsSync(join(cwd, rel)))
+  return {entry: existing ?? candidates[0] ?? 'src/layouts/Layout.astro', exists: Boolean(existing)}
+}
+
+/**
+ * Resolves the installed React version from node_modules, falling back to the
+ * declared range in package.json (carets/tildes stripped).
+ */
+export function detectReactVersion(
+  cwd: string,
+  pkg: PackageJson | null = readPackageJson(cwd),
+): ReactInfo {
+  const installed = readInstalledVersion(cwd, 'react')
+  if (installed) return {version: installed, source: 'installed'}
+
+  const declared = allDeps(pkg)['react']
+  if (typeof declared === 'string') {
+    return {version: declared.replace(/^[\^~>=<\s]+/, ''), source: 'declared'}
+  }
+  return {version: null, source: 'missing'}
+}
+
+function readInstalledVersion(cwd: string, name: string): string | null {
+  const file = join(cwd, 'node_modules', name, 'package.json')
+  if (!existsSync(file)) return null
+  try {
+    const pkg = JSON.parse(readFileSync(file, 'utf8')) as PackageJson
+    return pkg.version ?? null
+  } catch {
+    return null
+  }
+}
+
+export function isPackageInstalled(cwd: string, name: string): boolean {
+  return existsSync(join(cwd, 'node_modules', name, 'package.json'))
+}
+
+export function readInstalledPackageVersion(cwd: string, name: string): string | null {
+  return readInstalledVersion(cwd, name)
+}
+
+export function isLegacyUiVersion(version: unknown): boolean {
+  const major = parseVersion(version)?.[0]
+  return major !== undefined && major < 5
+}
+
+function detectAliasedInstall(deps: Record<string, string | undefined>): string | null {
+  for (const [name, spec] of Object.entries(deps)) {
+    if (typeof spec === 'string' && /^npm:@sanity\/ui@(5(?:\..*)?|alpha)$/.test(spec)) return name
+  }
+  return null
+}
+
+/** Reads the major from a declared range, skipping workspace/catalog/link specs. */
+function declaredMajor(spec: string | undefined): number | null {
+  if (typeof spec !== 'string') return null
+  if (/^(workspace:|catalog:|link:|file:)/.test(spec)) return null
+
+  const npmAlias = spec.match(/^npm:@sanity\/ui@(\d+)/)
+  if (npmAlias) return Number(npmAlias[1])
+
+  return parseVersion(spec.replace(/^[\^~>=<\s]+/, ''))?.[0] ?? null
+}
+
+function detectLegacyInstall(cwd: string, deps: Record<string, string | undefined>): string | null {
+  const installed = readInstalledPackageVersion(cwd, PACKAGE_NAME)
+  if (installed && isLegacyUiVersion(installed)) {
+    return installed
+  }
+
+  const declared = deps[PACKAGE_NAME]
+  const major = declaredMajor(declared)
+  if (major !== null && major < 5) {
+    return declared ?? 'unknown'
+  }
+
+  return null
+}
+
+export function detect(cwd: string): Detected {
+  const pkg = readPackageJson(cwd)
+  const deps = allDeps(pkg)
+  const framework = detectFramework(cwd, pkg)
+  const entry = detectEntry(cwd, framework)
+  const typescript = detectTypeScript(cwd, pkg) || (entry.exists && /\.tsx?$/.test(entry.entry))
+  return {
+    pkg,
+    packageManager: detectPackageManager(cwd),
+    framework,
+    typescript,
+    ...entry,
+    react: detectReactVersion(cwd, pkg),
+    aliasedInstall: detectAliasedInstall(deps),
+    legacyInstall: detectLegacyInstall(cwd, deps),
+  }
+}

package/src/cli/doctor.test.ts

@@ -0,0 +1,52 @@
+import {mkdtempSync, rmSync, writeFileSync} from 'node:fs'
+import {tmpdir} from 'node:os'
+import {join} from 'node:path'
+
+import {afterEach, beforeEach, describe, expect, it, vi} from 'vitest'
+
+import * as checks from './checks.js'
+import {runDoctor} from './doctor.js'
+import {writeInstalledUiVersion} from './test-utils.js'
+
+describe('runDoctor', () => {
+  let dir: string
+  let output: string
+
+  beforeEach(() => {
+    dir = mkdtempSync(join(tmpdir(), 'sui-doctor-'))
+    output = ''
+    vi.spyOn(process.stdout, 'write').mockImplementation((chunk) => {
+      output += String(chunk)
+      return true
+    })
+  })
+
+  afterEach(() => {
+    rmSync(dir, {recursive: true, force: true})
+    vi.restoreAllMocks()
+  })
+
+  it('warns and skips checks when @sanity/ui is pre-v5', () => {
+    writeFileSync(join(dir, 'package.json'), JSON.stringify({dependencies: {}}))
+    writeInstalledUiVersion(dir, '3.5.1')
+    const collectChecks = vi.spyOn(checks, 'collectChecks')
+
+    expect(runDoctor({cwd: dir})).toBe(0)
+    expect(output).toMatch(/@sanity\/ui@\^?3\.5\.1 \(pre-v5\)/)
+    expect(output).toMatch(/doctor checks v5 installs only/)
+    expect(collectChecks).not.toHaveBeenCalled()
+  })
+
+  it('warns and skips checks when v5 is installed under an alias', () => {
+    writeFileSync(
+      join(dir, 'package.json'),
+      JSON.stringify({dependencies: {ui5: 'npm:@sanity/ui@alpha'}}),
+    )
+    const collectChecks = vi.spyOn(checks, 'collectChecks')
+
+    expect(runDoctor({cwd: dir})).toBe(0)
+    expect(output).toMatch(/alias "ui5"/)
+    expect(output).toMatch(/doctor checks direct @sanity\/ui v5 installs only/)
+    expect(collectChecks).not.toHaveBeenCalled()
+  })
+})

package/src/cli/doctor.ts

@@ -0,0 +1,65 @@
+import {collectChecks} from './checks.js'
+import {detect, LEGACY_COEXISTENCE_HINT, PACKAGE_NAME} from './detect.js'
+import {color, fail, heading, info, success, warn} from './log.js'
+import type {Check, CliOptions} from './types.js'
+
+export function printChecks(checks: Check[]): void {
+  for (const c of checks) {
+    const label = `${color.bold(c.title)}${c.detail ? ` ${color.dim(`— ${c.detail}`)}` : ''}`
+    if (c.status === 'pass') success(label)
+    else if (c.status === 'warn') warn(label)
+    else fail(label)
+
+    if (c.status !== 'pass' && c.fix) {
+      info(`  ${color.dim('fix:')} ${c.fix}`)
+    }
+  }
+}
+
+/** Runs every check and prints it. Returns 1 only when something fails; warnings still pass. */
+export function runDoctor({cwd}: Pick<CliOptions, 'cwd'>): number {
+  const detected = detect(cwd)
+
+  heading('Sanity UI doctor')
+
+  if (detected.aliasedInstall) {
+    warn(
+      `This project installs v5 under the alias "${detected.aliasedInstall}". doctor checks direct @sanity/ui v5 installs only.`,
+    )
+    info(`  ${color.dim('hint:')} ${LEGACY_COEXISTENCE_HINT}`)
+    return 0
+  }
+
+  if (detected.legacyInstall) {
+    warn(
+      `This project has ${PACKAGE_NAME}@${detected.legacyInstall} (pre-v5). doctor checks v5 installs only.`,
+    )
+    info(`  ${color.dim('hint:')} ${LEGACY_COEXISTENCE_HINT}`)
+    return 0
+  }
+
+  const {checks} = collectChecks(cwd)
+  info(
+    color.dim(
+      `framework: ${detected.framework} · package manager: ${detected.packageManager} · entry: ${detected.entry}`,
+    ),
+  )
+  info('')
+
+  printChecks(checks)
+
+  const failed = checks.filter((c) => c.status === 'fail')
+  const warned = checks.filter((c) => c.status === 'warn')
+
+  info('')
+  if (failed.length === 0 && warned.length === 0) {
+    success('Everything looks good.')
+    return 0
+  }
+  if (failed.length === 0) {
+    warn(`${warned.length} warning${warned.length === 1 ? '' : 's'}, no blocking issues.`)
+    return 0
+  }
+  fail(`${failed.length} issue${failed.length === 1 ? '' : 's'} found. See fixes above.`)
+  return 1
+}

package/src/cli/index.ts

@@ -0,0 +1,77 @@
+import {resolve} from 'node:path'
+import process from 'node:process'
+import {parseArgs} from 'node:util'
+
+import {runDoctor} from './doctor.js'
+import {runInit} from './init.js'
+import {color, fail, info} from './log.js'
+import {readSelfPackage} from './selfPackage.js'
+
+const HELP = `${color.bold('@sanity/ui')} setup CLI
+
+${color.bold('Usage')}
+  npx @sanity/ui@alpha <command> [options]
+
+${color.bold('Commands')}
+  init      Scaffold a correct Sanity UI install (deps, stylesheet, tsconfig)
+  doctor    Check an existing setup and report fixes
+
+${color.bold('Options')}
+  --dry        Print the plan and exit without changing anything (init)
+  --yes, -y    Accept every prompt with its default (non-interactive)
+  --cwd <dir>  Run against another directory (default: current directory)
+  --version    Print the CLI version
+  --help, -h   Show this help
+`
+
+/**
+ * Parses arguments and dispatches to a command. `parseArgs` runs in strict mode,
+ * so an unknown flag throws from here and is caught by the bin wrapper. Exit
+ * codes: 0 on success or an explicit `--help`, 1 on misuse (no or unknown command).
+ */
+export async function main(argv: string[]): Promise<number> {
+  const {values, positionals} = parseArgs({
+    args: argv,
+    allowPositionals: true,
+    options: {
+      dry: {type: 'boolean', default: false},
+      yes: {type: 'boolean', short: 'y', default: false},
+      cwd: {type: 'string'},
+      version: {type: 'boolean', default: false},
+      help: {type: 'boolean', short: 'h', default: false},
+    },
+  })
+
+  if (values.version) {
+    info(readSelfPackage().version ?? 'unknown')
+    return 0
+  }
+
+  const command = positionals[0]
+
+  if (values.help) {
+    info(HELP)
+    return 0
+  }
+  if (!command) {
+    info(HELP)
+    return 1
+  }
+
+  const options = {
+    dry: values.dry ?? false,
+    yes: values.yes ?? false,
+    cwd: values.cwd ? resolve(process.cwd(), values.cwd) : process.cwd(),
+  }
+
+  switch (command) {
+    case 'init':
+      return runInit(options)
+    case 'doctor':
+      return runDoctor(options)
+    default:
+      fail(`Unknown command: ${command}`)
+      info(HELP)
+      return 1
+  }
+}