@khwarizmi/cli 0.3.1 → 0.4.0

package/README.md

@@ -1,107 +1,26 @@
-# 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
+# @khwarizmi/cli
+
+CLI inisialisasi untuk [`@khwarizmi/svelte-ui`](https://www.npmjs.com/package/@khwarizmi/svelte-ui).
+CLI ini tidak menyalin source komponen ke project.
+
+```bash
+npm install @khwarizmi/svelte-ui
+npx @khwarizmi/cli init
+```
+
+`init` menambahkan import stylesheet package ke `src/app.css` atau
+`src/routes/app.css`. Untuk lokasi lain:
+
+```bash
+npx @khwarizmi/cli init --css src/styles/app.css
+```
+
+Perintah ini idempoten: menjalankannya kembali tidak menggandakan import.
+
+Setelah itu, gunakan komponen langsung dari package:
+
+```svelte
+<script lang="ts">
+  import { Button, Card } from '@khwarizmi/svelte-ui';
+</script>
+```

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@khwarizmi/cli",
-  "version": "0.3.1",
-  "description": "CLI buat memasang komponen Khwarizmi UI ke project kamu.",
+  "version": "0.4.0",
+  "description": "Inisialisasi @khwarizmi/svelte-ui di project Svelte.",
   "type": "module",
   "bin": {
     "khwarizmi-ui": "./src/index.js"
@@ -11,6 +11,9 @@
     "README.md",
     "LICENSE"
   ],
+  "scripts": {
+    "test": "node --test"
+  },
   "engines": {
     "node": ">=18"
   },
@@ -19,7 +22,7 @@
     "svelte",
     "ui",
     "components",
-    "tailwind"
+    "init"
   ],
   "license": "MIT",
   "homepage": "https://ui.khwarizmi.co.id"

package/src/index.js

@@ -1,207 +1,53 @@
-#!/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());
-}
+#!/usr/bin/env node
+import { resolve } from 'node:path';
+import { c, die, log } from './util.js';
+import { init } from './init.js';
 
-async function ensureGlobalStyles(styles, opts) {
-	if (!styles) return;
+const VERSION = '1.0.0';
 
-	const styleTarget = join(opts.cwd, styles.target);
-	if (!existsSync(styleTarget) || opts.overwrite) {
-		mkdirSync(dirname(styleTarget), { recursive: true });
-		writeFileSync(styleTarget, styles.content, 'utf8');
-	}
+function usage() {
+	log.plain(`
+  ${c.bold('khwarizmi-ui')} ${c.dim('v' + VERSION)}
 
-	const candidates = ['src/app.css', 'src/routes/app.css'];
-	let appCss = candidates.map((path) => join(opts.cwd, path)).find(existsSync);
+  ${c.dim('Siapkan @khwarizmi/svelte-ui di project Svelte kamu.')}
 
-	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()}`);
-		}
-	}
+  ${c.bold('Perintah')}
+    ${c.orange('init')}              Tambahkan stylesheet global Khwarizmi UI
 
-	const importLine = `@import '$lib/components/khwarizmi-ui/styles.css';`;
-	if (!appCss) {
-		log.warn(`Tambahkan ${importLine} ke stylesheet global aplikasi.`);
-		return;
-	}
+  ${c.bold('Opsi')}
+    --cwd <path>        Jalankan di folder lain
+    --css <path>        Pilih stylesheet global aplikasi
+    --help, --version
 
-	const content = readFileSync(appCss, 'utf8');
-	if (!content.includes(importLine)) writeFileSync(appCss, `${importLine}\n${content}`, 'utf8');
+  ${c.bold('Contoh')}
+    ${c.dim('$')} npm install @khwarizmi/svelte-ui
+    ${c.dim('$')} npx @khwarizmi/cli init
+`);
 }
-
-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 };
+
+function parseArgs(argv) {
+	const opts = { cwd: process.cwd() };
+	const rest = [];
+	for (let i = 0; i < argv.length; i++) {
+		const arg = argv[i];
+		if (arg === '--cwd') opts.cwd = resolve(argv[++i] ?? '.');
+		else if (arg === '--css') opts.css = argv[++i];
+		else if (arg === '--help' || arg === '-h') opts.help = true;
+		else if (arg === '--version' || arg === '-v') opts.version = true;
+		else rest.push(arg);
 	}
+	return { opts, rest };
+}
+
+const { opts, rest } = parseArgs(process.argv.slice(2));
+const [command] = rest;
 
-	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);
+if (opts.version) log.plain(VERSION);
+else if (opts.help || !command) usage();
+else if (command === 'init') {
+	try {
+		init(opts);
+	} catch (error) {
+		die(error.message);
 	}
-	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');
+} else die(`Perintah tidak dikenal: ${command}`, 'jalankan: khwarizmi-ui --help');

package/src/init.js

@@ -0,0 +1,20 @@
+import { existsSync, readFileSync, writeFileSync } from 'node:fs';
+import { join } from 'node:path';
+import { hasPackage, log } from './util.js';
+
+export const STYLE_IMPORT = "@import '@khwarizmi/svelte-ui/styles.css';";
+
+export function init(opts) {
+	if (!hasPackage(opts.cwd, '@khwarizmi/svelte-ui')) {
+		throw new Error('@khwarizmi/svelte-ui belum terpasang. Jalankan package manager untuk memasangnya terlebih dahulu.');
+	}
+
+	const candidates = opts.css ? [opts.css] : ['src/app.css', 'src/routes/app.css'];
+	const relative = candidates.find((file) => existsSync(join(opts.cwd, file)));
+	if (!relative) throw new Error('Stylesheet global tidak ditemukan. Tentukan dengan --css <path>.');
+
+	const target = join(opts.cwd, relative);
+	const content = readFileSync(target, 'utf8');
+	if (!content.includes(STYLE_IMPORT)) writeFileSync(target, `${STYLE_IMPORT}\n${content}`, 'utf8');
+	log.done(`Khwarizmi UI siap di ${relative}`);
+}

package/src/util.js

@@ -1,77 +1,29 @@
-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();
-}
+import { existsSync, readFileSync } from 'node:fs';
+import { join } from 'node:path';
+
+const on = process.stdout.isTTY && !process.env.NO_COLOR;
+const wrap = (code) => (text) => (on ? `\x1b[${code}m${text}\x1b[0m` : text);
+
+export const c = { orange: wrap('38;5;208'), dim: wrap('2'), bold: wrap('1'), red: wrap('31'), green: wrap('32') };
+export const log = {
+	done: (message) => console.log(`${c.green('✔')} ${message}`),
+	error: (message) => console.error(`${c.red('✖')} ${message}`),
+	plain: (message = '') => console.log(message)
+};
+
+export function die(message, hint) {
+	log.error(message);
+	if (hint) log.plain(`  ${c.dim(hint)}`);
+	process.exit(1);
+}
+
+export function hasPackage(cwd, name) {
+	const path = join(cwd, 'package.json');
+	if (!existsSync(path)) return false;
+	try {
+		const pkg = JSON.parse(readFileSync(path, 'utf8'));
+		return Boolean(pkg.dependencies?.[name] || pkg.devDependencies?.[name]);
+	} catch {
+		return false;
+	}
+}

package/src/registry-url.js

@@ -1,5 +0,0 @@
-/**
- * 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';