@khwarizmi/cli 0.3.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 UwanGraph
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,107 @@
+# khwarizmi-ui
+
+CLI buat menyalin komponen [Khwarizmi UI](https://ui.khwarizmi.co.id) ke project kamu.
+
+Komponennya bukan library yang kamu import sebagai paket runtime — source file-nya
+disalin ke project supaya bebas kamu ubah. Project tetap membutuhkan Svelte 5,
+Tailwind CSS v4, dan dependency eksternal komponen yang relevan.
+
+## Pakai
+
+Untuk memasang semua komponen dari npm:
+
+```bash
+npx khwarizmi-ui@latest add --all
+```
+
+Perintah di atas membuat file-file berikut di `src/lib/components/khwarizmi-ui/`, mis.:
+
+```text
+src/lib/components/khwarizmi-ui/Button.svelte
+src/lib/components/khwarizmi-ui/Card.svelte
+src/lib/components/khwarizmi-ui/Input.svelte
+src/lib/components/khwarizmi-ui/Select.svelte
+```
+
+Dependency yang dibutuhkan, termasuk `lucide-svelte`, dipasang otomatis.
+CLI juga memasang stylesheet global Khwarizmi UI dan mengimpornya otomatis ke
+`src/app.css` atau `src/routes/app.css`. Jika tidak terdeteksi, CLI meminta path-nya.
+
+Atau pasang komponen tertentu:
+
+```bash
+npx khwarizmi-ui add button
+```
+
+Beberapa sekaligus:
+
+```bash
+npx khwarizmi-ui add button card input select
+```
+
+Semuanya sekaligus:
+
+```bash
+npx khwarizmi-ui add --all
+```
+
+Lihat semua yang tersedia:
+
+```bash
+npx khwarizmi-ui list
+```
+
+## Perintah
+
+| Perintah | Fungsi |
+| --- | --- |
+| `add <komponen...>` | Pasang satu atau beberapa komponen |
+| `add --all` | Pasang semua komponen yang ada di registry |
+| `list` | Daftar komponen yang tersedia |
+
+## Opsi
+
+| Opsi | Fungsi |
+| --- | --- |
+| `--all`, `-a` | Pasang semua komponen yang ada di registry |
+| `--overwrite` | Timpa file yang sudah ada tanpa nanya |
+| `--cwd <path>` | Jalankan di folder lain |
+| `--no-deps` | Jangan pasang dependency npm |
+| `--help`, `--version` | |
+
+## Cara kerjanya
+
+1. Ambil definisi komponen dari registry.
+2. Pasang stylesheet global dan import-nya sekali.
+3. Tulis file ke path tujuannya, mis. `src/lib/components/khwarizmi-ui/Button.svelte`.
+4. Pasang dependency npm yang belum ada, pakai package manager yang terdeteksi
+   dari lockfile project kamu (npm, pnpm, yarn, atau bun).
+
+File yang sudah ada tidak ditimpa diam-diam — kamu akan ditanya dulu, kecuali
+memakai `--overwrite`. Kalau dijalankan bukan di terminal interaktif (mis. CI),
+file yang sudah ada dilewati supaya aman.
+
+## Prasyarat
+
+Komponennya dibuat untuk **Svelte 5** (runes) dan **Tailwind CSS v4**.
+Sebagian komponen memakai `lucide-svelte`; dependency ini dipasang otomatis oleh CLI.
+
+## Catatan versi `npx`
+
+Sesaat setelah rilis baru, registry npm mungkin masih menyebarkan versi terbaru.
+Kalau `npx khwarizmi-ui` masih menjalankan versi lama atau hasilnya belum sesuai,
+coba `@latest`:
+
+```bash
+npx khwarizmi-ui@latest add --all
+```
+
+## Registry sendiri
+
+```bash
+KHWARIZMI_UI_REGISTRY=http://localhost:5173 npx khwarizmi-ui add button
+```
+
+## Lisensi
+
+MIT

package/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "@khwarizmi/cli",
+  "version": "0.3.1",
+  "description": "CLI buat memasang komponen Khwarizmi UI ke project kamu.",
+  "type": "module",
+  "bin": {
+    "khwarizmi-ui": "./src/index.js"
+  },
+  "files": [
+    "src",
+    "README.md",
+    "LICENSE"
+  ],
+  "engines": {
+    "node": ">=18"
+  },
+  "keywords": [
+    "khwarizmi",
+    "svelte",
+    "ui",
+    "components",
+    "tailwind"
+  ],
+  "license": "MIT",
+  "homepage": "https://ui.khwarizmi.co.id"
+}

package/src/index.js

@@ -0,0 +1,207 @@
+#!/usr/bin/env node
+import { mkdirSync, writeFileSync, existsSync, readFileSync } from 'node:fs';
+import { dirname, join, resolve } from 'node:path';
+import { spawnSync } from 'node:child_process';
+import { createInterface } from 'node:readline/promises';
+import { REGISTRY_URL } from './registry-url.js';
+import { c, log, die, fetchJson, detectPackageManager, installArgs, missingDeps } from './util.js';
+
+const VERSION = '0.3.1';
+const cwd = process.cwd();
+
+function usage() {
+	log.plain(`
+  ${c.bold('khwarizmi-ui')} ${c.dim('v' + VERSION)}
+
+  ${c.dim('Pasang komponen Khwarizmi UI ke project kamu.')}
+
+  ${c.bold('Perintah')}
+    ${c.orange('add')} <komponen...>   Pasang satu atau beberapa komponen
+    ${c.orange('add')} --all           Pasang semua komponen sekaligus
+    ${c.orange('list')}                Lihat semua komponen yang tersedia
+
+  ${c.bold('Opsi')}
+    --all, -a           Pasang semua komponen yang ada di registry
+    --overwrite         Timpa file yang sudah ada tanpa nanya
+    --cwd <path>        Jalankan di folder lain
+    --no-deps           Jangan pasang dependency npm
+    --help, --version
+
+  ${c.bold('Contoh')}
+    ${c.dim('$')} npx khwarizmi-ui add button
+    ${c.dim('$')} npx khwarizmi-ui add button card input
+    ${c.dim('$')} npx khwarizmi-ui add --all
+`);
+}
+
+function parseArgs(argv) {
+	const opts = { overwrite: false, deps: true, all: false, cwd };
+	const rest = [];
+	for (let i = 0; i < argv.length; i++) {
+		const a = argv[i];
+		if (a === '--overwrite') opts.overwrite = true;
+		else if (a === '--all' || a === '-a') opts.all = true;
+		else if (a === '--no-deps') opts.deps = false;
+		else if (a === '--cwd') opts.cwd = resolve(argv[++i] ?? '.');
+		else if (a === '--help' || a === '-h') opts.help = true;
+		else if (a === '--version' || a === '-v') opts.version = true;
+		else rest.push(a);
+	}
+	return { opts, rest };
+}
+
+async function confirm(question) {
+	// Kalau bukan terminal interaktif (mis. di CI), jangan menggantung — tolak saja.
+	if (!process.stdin.isTTY) return false;
+	const rl = createInterface({ input: process.stdin, output: process.stdout });
+	const answer = await rl.question(`${c.orange('?')} ${question} ${c.dim('(y/N)')} `);
+	rl.close();
+	return /^y(es)?$/i.test(answer.trim());
+}
+
+async function ensureGlobalStyles(styles, opts) {
+	if (!styles) return;
+
+	const styleTarget = join(opts.cwd, styles.target);
+	if (!existsSync(styleTarget) || opts.overwrite) {
+		mkdirSync(dirname(styleTarget), { recursive: true });
+		writeFileSync(styleTarget, styles.content, 'utf8');
+	}
+
+	const candidates = ['src/app.css', 'src/routes/app.css'];
+	let appCss = candidates.map((path) => join(opts.cwd, path)).find(existsSync);
+
+	if (!appCss && process.stdin.isTTY) {
+		const rl = createInterface({ input: process.stdin, output: process.stdout });
+		const answer = await rl.question(`${c.orange('?')} Path stylesheet global aplikasi ${c.dim('(contoh: src/app.css)')} `);
+		rl.close();
+		if (answer.trim()) {
+			const candidate = resolve(opts.cwd, answer.trim());
+			if (existsSync(candidate)) appCss = candidate;
+			else log.warn(`Stylesheet tidak ditemukan: ${answer.trim()}`);
+		}
+	}
+
+	const importLine = `@import '$lib/components/khwarizmi-ui/styles.css';`;
+	if (!appCss) {
+		log.warn(`Tambahkan ${importLine} ke stylesheet global aplikasi.`);
+		return;
+	}
+
+	const content = readFileSync(appCss, 'utf8');
+	if (!content.includes(importLine)) writeFileSync(appCss, `${importLine}\n${content}`, 'utf8');
+}
+
+async function listCommand() {
+	const index = await fetchJson(`${REGISTRY_URL}/r/registry.json`);
+	if (!index) die('Registry tidak ditemukan.', REGISTRY_URL);
+
+	log.plain(`\n  ${c.bold('Komponen tersedia')} ${c.dim(REGISTRY_URL)}\n`);
+	const pad = Math.max(...index.items.map((i) => i.name.length));
+	for (const item of index.items) {
+		log.plain(`  ${c.orange(item.name.padEnd(pad))}  ${c.dim(item.description ?? '')}`);
+	}
+	log.plain(`\n  ${c.dim('Pasang dengan:')} npx khwarizmi-ui add <nama>\n`);
+}
+
+/**
+ * Ambil item yang mau dipasang. Untuk --all cukup sekali request ke indeks,
+ * karena indeksnya sudah memuat isi file tiap komponen.
+ */
+async function resolveItems(names, opts) {
+	if (opts.all) {
+		const index = await fetchJson(`${REGISTRY_URL}/r/registry.json`);
+		if (!index) die('Registry tidak ditemukan.', REGISTRY_URL);
+		log.step(`Mengambil ${c.bold('semua')} komponen (${index.items.length})`);
+		return { items: index.items, globalStyles: index.globalStyles };
+	}
+
+	const items = [];
+	let globalStyles;
+	for (const name of names) {
+		log.step(`Mengambil ${c.bold(name)}`);
+		const item = await fetchJson(`${REGISTRY_URL}/r/${name}.json`);
+		if (!item) {
+			log.error(`Komponen "${name}" tidak ada di registry.`);
+			log.plain(`  ${c.dim('Lihat daftarnya: npx khwarizmi-ui list')}`);
+			continue;
+		}
+		globalStyles ??= item.globalStyles;
+		items.push(item);
+	}
+	return { items, globalStyles };
+}
+
+async function addCommand(names, opts) {
+	if (!names.length && !opts.all) {
+		die('Sebutkan komponen yang mau dipasang.', 'satu: npx khwarizmi-ui add button  |  semua: npx khwarizmi-ui add --all');
+	}
+
+	const written = [];
+	const skipped = [];
+	const deps = new Set();
+
+	const { items, globalStyles } = await resolveItems(names, opts);
+	await ensureGlobalStyles(globalStyles, opts);
+
+	for (const item of items) {
+		for (const dep of item.dependencies ?? []) deps.add(dep);
+
+		for (const file of item.files ?? []) {
+			const target = file.target ?? file.path;
+			const dest = join(opts.cwd, target);
+
+			if (existsSync(dest) && !opts.overwrite) {
+				const ok = await confirm(`${target} sudah ada. Timpa?`);
+				if (!ok) {
+					skipped.push(target);
+					continue;
+				}
+			}
+
+			mkdirSync(dirname(dest), { recursive: true });
+			writeFileSync(dest, file.content, 'utf8');
+			written.push(target);
+		}
+	}
+
+	// Dependency dipasang setelah semua file beres, biar package manager
+	// cuma jalan sekali walau komponen yang dipasang banyak.
+	if (opts.deps && deps.size) {
+		const need = missingDeps(opts.cwd, [...deps]);
+		if (need.length) {
+			const pm = detectPackageManager(opts.cwd);
+			log.step(`Memasang dependency lewat ${c.bold(pm)}: ${need.join(', ')}`);
+			const res = spawnSync(pm, installArgs[pm](need), {
+				cwd: opts.cwd,
+				stdio: 'inherit',
+				shell: process.platform === 'win32'
+			});
+			if (res.status !== 0) log.warn(`Gagal memasang dependency. Pasang manual: ${pm} add ${need.join(' ')}`);
+			else log.done('Dependency terpasang.');
+		} else {
+			log.done('Semua dependency sudah ada.');
+		}
+	}
+
+	log.plain();
+	if (written.length) {
+		log.done(`${written.length} file dibuat:`);
+		for (const f of written) log.plain(`  ${c.dim('•')} ${f}`);
+	}
+	if (skipped.length) {
+		log.warn(`${skipped.length} file dilewati:`);
+		for (const f of skipped) log.plain(`  ${c.dim('•')} ${f}`);
+	}
+	if (!written.length && !skipped.length) die('Tidak ada yang dipasang.');
+	log.plain();
+}
+
+const { opts, rest } = parseArgs(process.argv.slice(2));
+const [command, ...names] = rest;
+
+if (opts.version) log.plain(VERSION);
+else if (opts.help || !command) usage();
+else if (command === 'list') await listCommand();
+else if (command === 'add') await addCommand(names, opts);
+else die(`Perintah tidak dikenal: ${command}`, 'jalankan: npx khwarizmi-ui --help');

package/src/registry-url.js

@@ -0,0 +1,5 @@
+/**
+ * Alamat registry. Bisa ditimpa lewat env var buat nyoba versi lokal:
+ *   KHWARIZMI_UI_REGISTRY=http://localhost:5177 npx khwarizmi-ui add button
+ */
+export const REGISTRY_URL = process.env.KHWARIZMI_UI_REGISTRY ?? 'https://ui.khwarizmi.co.id';

package/src/util.js

@@ -0,0 +1,77 @@
+import { existsSync, readFileSync } from 'node:fs';
+import { join } from 'node:path';
+
+// Warna ANSI dimatikan kalau output-nya bukan terminal (mis. dipipe ke file).
+const on = process.stdout.isTTY && !process.env.NO_COLOR;
+const wrap = (code) => (s) => (on ? `\x1b[${code}m${s}\x1b[0m` : s);
+
+export const c = {
+	orange: wrap('38;5;208'),
+	dim: wrap('2'),
+	bold: wrap('1'),
+	red: wrap('31'),
+	green: wrap('32')
+};
+
+export const log = {
+	step: (m) => console.log(`${c.dim('-')} ${m}`),
+	done: (m) => console.log(`${c.green('✔')} ${m}`),
+	warn: (m) => console.log(`${c.orange('!')} ${m}`),
+	error: (m) => console.error(`${c.red('✖')} ${m}`),
+	plain: (m = '') => console.log(m)
+};
+
+export function die(message, hint) {
+	log.error(message);
+	if (hint) log.plain(`  ${c.dim(hint)}`);
+	process.exit(1);
+}
+
+/**
+ * Deteksi package manager dari lockfile yang ada, biar dependency-nya
+ * dipasang pakai tool yang sama dengan yang dipakai project itu.
+ */
+export function detectPackageManager(cwd) {
+	if (existsSync(join(cwd, 'bun.lock')) || existsSync(join(cwd, 'bun.lockb'))) return 'bun';
+	if (existsSync(join(cwd, 'pnpm-lock.yaml'))) return 'pnpm';
+	if (existsSync(join(cwd, 'yarn.lock'))) return 'yarn';
+	return 'npm';
+}
+
+export const installArgs = {
+	npm: (pkgs) => ['install', ...pkgs],
+	pnpm: (pkgs) => ['add', ...pkgs],
+	yarn: (pkgs) => ['add', ...pkgs],
+	bun: (pkgs) => ['add', ...pkgs]
+};
+
+/** Dependency yang sudah ada di package.json nggak perlu dipasang ulang. */
+export function missingDeps(cwd, deps) {
+	const pkgPath = join(cwd, 'package.json');
+	if (!existsSync(pkgPath)) return deps;
+	try {
+		const pkg = JSON.parse(readFileSync(pkgPath, 'utf8'));
+		const have = { ...pkg.dependencies, ...pkg.devDependencies };
+		// Buang penanda versi ("lucide-svelte@^1.0.0" -> "lucide-svelte"),
+		// termasuk buat paket scoped yang namanya diawali "@".
+		return deps.filter((d) => {
+			const at = d.lastIndexOf('@');
+			const name = at > 0 ? d.slice(0, at) : d;
+			return !have[name];
+		});
+	} catch {
+		return deps;
+	}
+}
+
+export async function fetchJson(url) {
+	let res;
+	try {
+		res = await fetch(url);
+	} catch (err) {
+		die(`Gagal menghubungi registry: ${url}`, err.message);
+	}
+	if (res.status === 404) return null;
+	if (!res.ok) die(`Registry membalas ${res.status} untuk ${url}`);
+	return res.json();
+}