@rokkit/cli 1.0.0-next.145 → 1.0.0-next.146

package/dist/src/skin.d.ts

@@ -0,0 +1,51 @@
+/**
+ * Generate a skin scaffold object with all token keys set to default color names.
+ * @returns {Record<string, string>}
+ */
+export function generateSkinScaffold(): Record<string, string>;
+/**
+ * Add a new skin entry to a config object (pure, no side effects).
+ * @param {Record<string, unknown>} config
+ * @param {string} name
+ * @returns {Record<string, unknown>}
+ */
+export function addSkinToConfig(config: Record<string, unknown>, name: string): Record<string, unknown>;
+/**
+ * Serialize a rokkit config back to a JS module string.
+ * @param {Record<string, unknown>} config
+ * @returns {string}
+ */
+export function serializeConfig(config: Record<string, unknown>): string;
+/**
+ * List all skins defined in rokkit.config.js.
+ * @param {{
+ *   readConfig?: () => Record<string, unknown>,
+ *   cwd?: string
+ * }} adapters
+ */
+export function runSkinList(adapters?: {
+    readConfig?: () => Record<string, unknown>;
+    cwd?: string;
+}): Promise<void>;
+/**
+ * Create a new skin entry in rokkit.config.js.
+ * @param {string} name
+ * @param {{
+ *   readConfig?: () => Record<string, unknown>,
+ *   writeConfig?: (config: Record<string, unknown>) => void,
+ *   cwd?: string
+ * }} adapters
+ */
+export function runSkinCreate(name: string, adapters?: {
+    readConfig?: () => Record<string, unknown>;
+    writeConfig?: (config: Record<string, unknown>) => void;
+    cwd?: string;
+}): Promise<void>;
+/**
+ * CLI entry point for `rokkit skin` subcommands.
+ * @param {string} sub — 'list' | 'create'
+ * @param {{ name?: string }} opts
+ */
+export function skin(sub: string, opts?: {
+    name?: string;
+}): Promise<void>;

package/dist/src/theme.d.ts

@@ -0,0 +1,48 @@
+/**
+ * Generate a full CSS theme stub for the given style name.
+ * Produces one `[data-style='<name>']` block per component.
+ * @param {string} name
+ * @returns {string}
+ */
+export function generateThemeStub(name: string): string;
+/**
+ * List all theme styles defined in rokkit.config.js plus any custom CSS files in src/themes/.
+ * @param {{
+ *   readConfig?: () => Record<string, unknown>,
+ *   listFiles?: (dir: string) => string[],
+ *   cwd?: string
+ * }} adapters
+ */
+export function runThemeList(adapters?: {
+    readConfig?: () => Record<string, unknown>;
+    listFiles?: (dir: string) => string[];
+    cwd?: string;
+}): Promise<void>;
+/**
+ * Create a new custom theme CSS stub at src/themes/<name>.css.
+ * @param {string} name
+ * @param {{
+ *   writeFile?: (path: string, content: string) => void,
+ *   exists?: (path: string) => boolean,
+ *   mkdir?: (dir: string) => void,
+ *   cwd?: string
+ * }} adapters
+ */
+export function runThemeCreate(name: string, adapters?: {
+    writeFile?: (path: string, content: string) => void;
+    exists?: (path: string) => boolean;
+    mkdir?: (dir: string) => void;
+    cwd?: string;
+}): Promise<void>;
+/**
+ * CLI entry point for `rokkit theme` subcommands.
+ * @param {string} sub — 'list' | 'create'
+ * @param {{ name?: string }} opts
+ */
+export function theme(sub: string, opts?: {
+    name?: string;
+}): Promise<void>;
+/**
+ * All component names that ship with Rokkit — one CSS block will be generated for each.
+ */
+export const THEME_COMPONENTS: string[];

package/dist/src/upgrade.d.ts

@@ -0,0 +1,51 @@
+/**
+ * Extract @rokkit/* packages from a parsed package.json object.
+ * @param {Record<string, unknown>} pkgJson
+ * @returns {{ name: string, current: string }[]}
+ */
+export function getRokkitPackages(pkgJson: Record<string, unknown>): {
+    name: string;
+    current: string;
+}[];
+/**
+ * Detect the package manager from lockfile presence.
+ * @param {string[]} lockfiles — list of lockfile names that exist in cwd
+ * @returns {'bun' | 'pnpm' | 'yarn' | 'npm'}
+ */
+export function detectPackageManager(lockfiles: string[]): "bun" | "pnpm" | "yarn" | "npm";
+/**
+ * Build the install command for the given package manager.
+ * @param {'bun' | 'pnpm' | 'yarn' | 'npm'} pm
+ * @param {string[]} packages — package specs like `@rokkit/ui@1.2.3`
+ * @returns {{ bin: string, args: string[] }}
+ */
+export function buildInstallCommand(pm: "bun" | "pnpm" | "yarn" | "npm", packages: string[]): {
+    bin: string;
+    args: string[];
+};
+/**
+ * Run upgrade check and optionally apply it.
+ *
+ * @param {{ apply?: boolean }} opts
+ * @param {{
+ *   readFile?: (p: string) => string,
+ *   exists?: (p: string) => boolean,
+ *   fetchVersion?: (name: string) => string | null,
+ *   runInstall?: (bin: string, args: string[]) => void
+ * }} adapters — injectable for testing
+ */
+export function runUpgrade(opts?: {
+    apply?: boolean;
+}, adapters?: {
+    readFile?: (p: string) => string;
+    exists?: (p: string) => boolean;
+    fetchVersion?: (name: string) => string | null;
+    runInstall?: (bin: string, args: string[]) => void;
+}): void;
+/**
+ * CLI entry point for `rokkit upgrade`
+ * @param {{ apply?: boolean }} opts
+ */
+export function upgrade(opts?: {
+    apply?: boolean;
+}): void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rokkit/cli",
-  "version": "1.0.0-next.145",
+  "version": "1.0.0-next.146",
   "description": "Command line utilities for icon bundling and conversion.",
   "repository": {
     "type": "git",

package/src/doctor.js

@@ -150,8 +150,14 @@ function applyPatchHtml(cwd, label) {
 
 /** @type {Record<string, (cwd: string, label: string) => boolean|void>} */
 const FIX_HANDLERS = {
-	'generate-config': (cwd, label) => { applyGenerateConfig(cwd, label); return true },
-	'patch-css': (cwd, label) => { applyPatchCss(cwd, label); return true },
+	'generate-config': (cwd, label) => {
+		applyGenerateConfig(cwd, label)
+		return true
+	},
+	'patch-css': (cwd, label) => {
+		applyPatchCss(cwd, label)
+		return true
+	},
 	'patch-html': (cwd, label) => applyPatchHtml(cwd, label)
 }
 

package/src/index.js

@@ -70,4 +70,47 @@ prog
 		await doctor(opts)
 	})
 
+prog
+	.command('upgrade')
+	.describe('Check for @rokkit/* package updates and optionally install them')
+	.option('--apply', 'Install available upgrades')
+	.action(async (opts) => {
+		const { upgrade } = await import('./upgrade.js')
+		upgrade(opts)
+	})
+
+prog
+	.command('skin list')
+	.describe('List all skins defined in rokkit.config.js')
+	.action(async () => {
+		const { skin } = await import('./skin.js')
+		await skin('list')
+	})
+
+prog
+	.command('skin create')
+	.describe('Scaffold a new skin entry in rokkit.config.js')
+	.option('--name', 'Skin name')
+	.action(async (opts) => {
+		const { skin } = await import('./skin.js')
+		await skin('create', opts)
+	})
+
+prog
+	.command('theme list')
+	.describe('List built-in and custom themes')
+	.action(async () => {
+		const { theme } = await import('./theme.js')
+		await theme('list')
+	})
+
+prog
+	.command('theme create')
+	.describe('Scaffold a new custom theme CSS file')
+	.option('--name', 'Theme name')
+	.action(async (opts) => {
+		const { theme } = await import('./theme.js')
+		await theme('create', opts)
+	})
+
 prog.parse(process.argv)

package/src/skin.js

@@ -0,0 +1,151 @@
+/* eslint-disable no-console */
+import { writeFileSync, existsSync } from 'fs'
+import { resolve } from 'path'
+
+const SKIN_TOKEN_DEFAULTS = {
+	primary: 'orange',
+	secondary: 'pink',
+	accent: 'sky',
+	surface: 'slate',
+	success: 'green',
+	warning: 'yellow',
+	danger: 'red',
+	error: 'red',
+	info: 'cyan'
+}
+
+/**
+ * Generate a skin scaffold object with all token keys set to default color names.
+ * @returns {Record<string, string>}
+ */
+export function generateSkinScaffold() {
+	return { ...SKIN_TOKEN_DEFAULTS }
+}
+
+/**
+ * Add a new skin entry to a config object (pure, no side effects).
+ * @param {Record<string, unknown>} config
+ * @param {string} name
+ * @returns {Record<string, unknown>}
+ */
+export function addSkinToConfig(config, name) {
+	const skins = config.skins ?? {}
+	return {
+		...config,
+		skins: { ...skins, [name]: generateSkinScaffold() }
+	}
+}
+
+/**
+ * Serialize a rokkit config back to a JS module string.
+ * @param {Record<string, unknown>} config
+ * @returns {string}
+ */
+export function serializeConfig(config) {
+	return `export default ${JSON.stringify(config, null, 2)}\n`
+}
+
+/**
+ * List all skins defined in rokkit.config.js.
+ * @param {{
+ *   readConfig?: () => Record<string, unknown>,
+ *   cwd?: string
+ * }} adapters
+ */
+export async function runSkinList(adapters = {}) {
+	const config = await loadConfig(adapters)
+	if (!config) return
+	const skins = config.skins ?? {}
+	const names = Object.keys(skins)
+	if (names.length === 0) {
+		console.info('No skins defined in rokkit.config.js.')
+		console.info('Run `rokkit skin create --name <name>` to add one.')
+		return
+	}
+	console.info('Defined skins:\n')
+	for (const name of names) {
+		const tokens = Object.entries(skins[name])
+			.map(([k, v]) => `${k}: ${v}`)
+			.join(', ')
+		console.info(`  ${name}  —  ${tokens}`)
+	}
+}
+
+/**
+ * Create a new skin entry in rokkit.config.js.
+ * @param {string} name
+ * @param {{
+ *   readConfig?: () => Record<string, unknown>,
+ *   writeConfig?: (config: Record<string, unknown>) => void,
+ *   cwd?: string
+ * }} adapters
+ */
+export async function runSkinCreate(name, adapters = {}) {
+	if (!name) {
+		console.error('Usage: rokkit skin create --name <name>')
+		return
+	}
+
+	const config = await loadConfig(adapters)
+	if (!config) return
+
+	if (config.skins?.[name]) {
+		console.warn(`Skin "${name}" already exists in rokkit.config.js.`)
+		return
+	}
+
+	const updated = addSkinToConfig(config, name)
+	await saveConfig(updated, adapters)
+
+	console.info(`Added skin "${name}" to rokkit.config.js`)
+	console.info(
+		`\nCustomize the color tokens in rokkit.config.js → skins.${name}\n` +
+			`Then apply with: <body data-skin="${name}">`
+	)
+}
+
+/**
+ * Load rokkit.config.js using injected adapter or real filesystem.
+ * @param {{ readConfig?: () => Record<string, unknown>, cwd?: string }} adapters
+ * @returns {Promise<Record<string, unknown> | null>}
+ */
+async function loadConfig(adapters) {
+	if (adapters.readConfig) return adapters.readConfig()
+
+	const cwd = adapters.cwd ?? process.cwd()
+	const configPath = resolve(cwd, 'rokkit.config.js')
+	if (!existsSync(configPath)) {
+		console.error('rokkit.config.js not found. Run `rokkit init` first.')
+		return null
+	}
+
+	const { default: config } = await import(`file://${configPath}?t=${Date.now()}`)
+	return config
+}
+
+/**
+ * Write updated config using injected adapter or real filesystem.
+ * @param {Record<string, unknown>} config
+ * @param {{ writeConfig?: (config: Record<string, unknown>) => void, cwd?: string }} adapters
+ */
+async function saveConfig(config, adapters) {
+	if (adapters.writeConfig) {
+		adapters.writeConfig(config)
+		return
+	}
+	const cwd = adapters.cwd ?? process.cwd()
+	writeFileSync(resolve(cwd, 'rokkit.config.js'), serializeConfig(config))
+}
+
+/**
+ * CLI entry point for `rokkit skin` subcommands.
+ * @param {string} sub — 'list' | 'create'
+ * @param {{ name?: string }} opts
+ */
+export async function skin(sub, opts = {}) {
+	if (sub === 'create') {
+		await runSkinCreate(opts.name)
+	} else {
+		await runSkinList()
+	}
+}

package/src/theme.js

@@ -0,0 +1,162 @@
+/* eslint-disable no-console */
+import { writeFileSync, existsSync, mkdirSync, readdirSync } from 'fs'
+import { resolve, join } from 'path'
+
+/**
+ * All component names that ship with Rokkit — one CSS block will be generated for each.
+ */
+export const THEME_COMPONENTS = [
+	'button',
+	'card',
+	'connector',
+	'dropdown',
+	'floating-action',
+	'floating-navigation',
+	'grid',
+	'input',
+	'list',
+	'menu',
+	'message',
+	'range',
+	'search-filter',
+	'select',
+	'status-list',
+	'switch',
+	'table',
+	'tabs',
+	'timeline',
+	'toc',
+	'toggle',
+	'toolbar',
+	'tree',
+	'upload-progress',
+	'upload-target'
+]
+
+/**
+ * Generate a full CSS theme stub for the given style name.
+ * Produces one `[data-style='<name>']` block per component.
+ * @param {string} name
+ * @returns {string}
+ */
+export function generateThemeStub(name) {
+	const header = `/* Custom theme: ${name} */
+/* Apply this theme with: <body data-style="${name}"> */
+/* Customize each component block below using CSS custom properties and UnoCSS utilities. */
+/* Reference: https://rokkit.dev/docs/theming */
+
+`
+	const blocks = THEME_COMPONENTS.map((component) => {
+		const selector = `[data-style='${name}'] [data-${component}]`
+		return `${selector} {\n  /* ${component} styles */\n}\n`
+	})
+
+	return header + blocks.join('\n')
+}
+
+/**
+ * List all theme styles defined in rokkit.config.js plus any custom CSS files in src/themes/.
+ * @param {{
+ *   readConfig?: () => Record<string, unknown>,
+ *   listFiles?: (dir: string) => string[],
+ *   cwd?: string
+ * }} adapters
+ */
+export async function runThemeList(adapters = {}) {
+	const config = await loadConfig(adapters)
+	const builtIn = config?.themes ?? []
+
+	const cwd = adapters.cwd ?? process.cwd()
+	const themesDir = resolve(cwd, 'src/themes')
+	const listFiles = adapters.listFiles ?? ((dir) => (existsSync(dir) ? readdirSync(dir) : []))
+	const custom = listFiles(themesDir)
+		.filter((f) => f.endsWith('.css'))
+		.map((f) => f.replace(/\.css$/, ''))
+
+	console.info('Rokkit Themes\n')
+
+	if (builtIn.length > 0) {
+		console.info('  Built-in (from @rokkit/themes):')
+		for (const t of builtIn) console.info(`    ${t}`)
+	}
+	if (custom.length > 0) {
+		console.info('\n  Custom (src/themes/):')
+		for (const t of custom) console.info(`    ${t}`)
+	}
+	if (builtIn.length === 0 && custom.length === 0) {
+		console.info('  No themes found.')
+		console.info('  Run `rokkit theme create --name <name>` to scaffold a custom theme.')
+	}
+}
+
+/**
+ * Create a new custom theme CSS stub at src/themes/<name>.css.
+ * @param {string} name
+ * @param {{
+ *   writeFile?: (path: string, content: string) => void,
+ *   exists?: (path: string) => boolean,
+ *   mkdir?: (dir: string) => void,
+ *   cwd?: string
+ * }} adapters
+ */
+export async function runThemeCreate(name, adapters = {}) {
+	if (!name) {
+		console.error('Usage: rokkit theme create --name <name>')
+		return
+	}
+
+	const cwd = adapters.cwd ?? process.cwd()
+	const writeFile = adapters.writeFile ?? writeFileSync
+	const exists = adapters.exists ?? existsSync
+	const mkdir = adapters.mkdir ?? ((dir) => mkdirSync(dir, { recursive: true }))
+
+	const themesDir = resolve(cwd, 'src/themes')
+	const filePath = join(themesDir, `${name}.css`)
+
+	if (exists(filePath)) {
+		console.warn(`Theme file already exists: src/themes/${name}.css`)
+		return
+	}
+
+	if (!exists(themesDir)) mkdir(themesDir)
+
+	writeFile(filePath, generateThemeStub(name))
+	console.info(`Created src/themes/${name}.css`)
+	console.info(
+		`\nImport it in src/app.css:\n  @import './themes/${name}.css';\n` +
+			`\nApply it: <body data-style="${name}">`
+	)
+}
+
+/**
+ * Load rokkit.config.js using injected adapter or real filesystem.
+ * Returns null (not an error) if config is absent — theme list can still show custom files.
+ * @param {{ readConfig?: () => Record<string, unknown>, cwd?: string }} adapters
+ */
+async function loadConfig(adapters) {
+	if (adapters.readConfig) return adapters.readConfig()
+
+	const cwd = adapters.cwd ?? process.cwd()
+	const configPath = resolve(cwd, 'rokkit.config.js')
+	if (!existsSync(configPath)) return null
+
+	try {
+		const { default: config } = await import(`file://${configPath}?t=${Date.now()}`)
+		return config
+	} catch {
+		return null
+	}
+}
+
+/**
+ * CLI entry point for `rokkit theme` subcommands.
+ * @param {string} sub — 'list' | 'create'
+ * @param {{ name?: string }} opts
+ */
+export async function theme(sub, opts = {}) {
+	if (sub === 'create') {
+		await runThemeCreate(opts.name)
+	} else {
+		await runThemeList()
+	}
+}

package/src/upgrade.js

@@ -0,0 +1,125 @@
+/* eslint-disable no-console */
+import { readFileSync, existsSync } from 'fs'
+import { resolve } from 'path'
+import { execFileSync } from 'child_process'
+
+/**
+ * Extract @rokkit/* packages from a parsed package.json object.
+ * @param {Record<string, unknown>} pkgJson
+ * @returns {{ name: string, current: string }[]}
+ */
+export function getRokkitPackages(pkgJson) {
+	const deps = { ...(pkgJson.dependencies || {}), ...(pkgJson.devDependencies || {}) }
+	return Object.entries(deps)
+		.filter(([name]) => name.startsWith('@rokkit/'))
+		.map(([name, version]) => ({ name, current: String(version).replace(/^[\^~>=<]+/, '') }))
+}
+
+/**
+ * Detect the package manager from lockfile presence.
+ * @param {string[]} lockfiles — list of lockfile names that exist in cwd
+ * @returns {'bun' | 'pnpm' | 'yarn' | 'npm'}
+ */
+export function detectPackageManager(lockfiles) {
+	if (lockfiles.includes('bun.lock') || lockfiles.includes('bun.lockb')) return 'bun'
+	if (lockfiles.includes('pnpm-lock.yaml')) return 'pnpm'
+	if (lockfiles.includes('yarn.lock')) return 'yarn'
+	return 'npm'
+}
+
+/**
+ * Build the install command for the given package manager.
+ * @param {'bun' | 'pnpm' | 'yarn' | 'npm'} pm
+ * @param {string[]} packages — package specs like `@rokkit/ui@1.2.3`
+ * @returns {{ bin: string, args: string[] }}
+ */
+export function buildInstallCommand(pm, packages) {
+	if (pm === 'bun') return { bin: 'bun', args: ['add', ...packages] }
+	if (pm === 'pnpm') return { bin: 'pnpm', args: ['add', ...packages] }
+	if (pm === 'yarn') return { bin: 'yarn', args: ['add', ...packages] }
+	return { bin: 'npm', args: ['install', ...packages] }
+}
+
+/**
+ * Run upgrade check and optionally apply it.
+ *
+ * @param {{ apply?: boolean }} opts
+ * @param {{
+ *   readFile?: (p: string) => string,
+ *   exists?: (p: string) => boolean,
+ *   fetchVersion?: (name: string) => string | null,
+ *   runInstall?: (bin: string, args: string[]) => void
+ * }} adapters — injectable for testing
+ */
+export function runUpgrade(opts = {}, adapters = {}) {
+	const cwd = process.cwd()
+	const readFile = adapters.readFile ?? ((p) => readFileSync(p, 'utf-8'))
+	const exists = adapters.exists ?? ((p) => existsSync(p))
+	const fetchVersion =
+		adapters.fetchVersion ??
+		((name) => {
+			try {
+				return execFileSync('npm', ['view', name, 'version'], { encoding: 'utf-8' }).trim()
+			} catch {
+				return null
+			}
+		})
+	const runInstall =
+		adapters.runInstall ??
+		((bin, args) => execFileSync(bin, args, { stdio: 'inherit' }))
+
+	const pkgPath = resolve(cwd, 'package.json')
+	if (!exists(pkgPath)) {
+		console.error('No package.json found in current directory.')
+		return
+	}
+
+	const pkgJson = JSON.parse(readFile(pkgPath))
+	const packages = getRokkitPackages(pkgJson)
+
+	if (packages.length === 0) {
+		console.info('No @rokkit/* packages found in package.json.')
+		return
+	}
+
+	const LOCKFILES = ['bun.lock', 'bun.lockb', 'pnpm-lock.yaml', 'yarn.lock', 'package-lock.json']
+	const presentLockfiles = LOCKFILES.filter((f) => exists(resolve(cwd, f)))
+	const pm = detectPackageManager(presentLockfiles)
+
+	console.info('Rokkit Upgrade\n')
+
+	const upgrades = []
+	for (const pkg of packages) {
+		const latest = fetchVersion(pkg.name)
+		const upToDate = latest && latest === pkg.current
+		const status = !latest ? '?' : upToDate ? 'up-to-date' : 'outdated'
+		const arrow = latest ? `${pkg.current} → ${latest}` : pkg.current
+		console.info(`  ${status === 'outdated' ? 'OUT' : 'OK '}  ${pkg.name}  ${arrow}`)
+		if (!upToDate && latest) upgrades.push(`${pkg.name}@${latest}`)
+	}
+
+	if (upgrades.length === 0) {
+		console.info('\nAll packages are up to date.')
+		return
+	}
+
+	const { bin, args } = buildInstallCommand(pm, upgrades)
+	const cmdStr = `${bin} ${args.join(' ')}`
+
+	if (opts.apply) {
+		console.info(`\nRunning: ${cmdStr}\n`)
+		runInstall(bin, args)
+		console.info('\nUpgrade complete.')
+	} else {
+		console.info(`\n${upgrades.length} package(s) can be upgraded.`)
+		console.info(`Run with --apply to install, or manually:\n  ${cmdStr}`)
+	}
+}
+
+/**
+ * CLI entry point for `rokkit upgrade`
+ * @param {{ apply?: boolean }} opts
+ */
+export function upgrade(opts = {}) {
+	runUpgrade(opts)
+}