@hobui/viui-cli

CLI cho iNET Design System — quản lý themes, tokens, và config trong consumer projects.

Package: @hobui/viui-cli | Binary: viui

Cài đặt

pnpm add -D @hobui/viui-cli
# hoặc global:
npm link  # từ packages/cli/

Commands

| Command | Mô tả | |---------|-------| | viui init | Tạo viui.config.ts + .viui-lock.json, chọn theme (6 themes), style format | | viui sync | Sync themes/tokens SCSS từ CLI bundle vào consumer project | | viui update | Check npm registry cho updates, apply + tự prompt sync | | viui theme list | Liệt kê themes khả dụng, đánh dấu active | | viui theme switch <name> | Chuyển theme, update config + lock file | | viui theme preview <name> | Xem CSS custom properties của theme | | viui doctor | Health check: config, tokens, themes, lock file integrity | | viui docs | Mở Storybook docs trong browser | | viui docs --api | Mở VitePress API docs | | viui audit | Audit component usage: Vi* adoption, icon patterns, accessibility |

Quick Start

# 1. Init project
viui init

# 2. Theo hướng dẫn setup:
#    pnpm add @hobui/viui vuetify @mdi/font @tabler/icons-vue

# 3. Sync theme files
viui sync --apply

# 4. Check health
viui doctor

Config File

viui init tạo viui.config.ts:

import type { ViuiConfig } from '@hobui/viui-cli'

export default {
  theme: 'minimalist-2',
  tokens: '@hobui/tokens',
  styleImport: 'scss',
  outputDir: 'src/assets/styles/viui/',
  vuetifyIntegration: true,
} satisfies ViuiConfig

Themes

6 themes khả dụng:

| Theme | Style | |-------|-------| | neo-brutalism | Bold, chunky borders, high contrast | | minimalist-2 | Stripe-like, clean, subtle (iNET DNA) | | material | Material Design 3 | | minimalist | Ultra-minimal | | glassmorphism | Frosted glass effects | | bento-grid | Grid-based layout |

Icons

Hỗ trợ 2 icon sets qua Vuetify:

<!-- MDI (font-based) -->
<v-icon icon="mdi-home" />

<!-- Tabler (SVG, khuyến nghị) -->
<v-icon icon="tabler:home" />

Cấu hình Tabler trong vuetify.ts:

import { tabler } from '@hobui/viui/iconsets/tabler'
import { mdi } from 'vuetify/iconsets/mdi'

createVuetify({
  icons: { defaultSet: 'mdi', sets: { mdi, tabler } }
})

Init Options

| Option | Mô tả | |--------|-------| | --dry-run | Chỉ hiển thị, không ghi file |

Sync Options

| Option | Mô tả | |--------|-------| | --diff | Chỉ hiện diff, không apply | | --dry-run | Simulate, không ghi file | | --apply | Apply changes |

Update Options

| Option | Mô tả | |--------|-------| | --diff | Chỉ hiện available updates | | --dry-run | Simulate update | | --apply | Apply updates + prompt sync |

Build

cd packages/cli
pnpm build

Chạy tsc + copy-assets.mjs (copy viui-conf + themes SCSS vào dist/assets/).

Local Development

# Build + link global
cd packages/cli && pnpm build && npm link

# Tại consumer project
npm link @hobui/viui-cli
viui init