@nons-dev/uikit 0.1.3 → 0.1.5

package/package.json

@@ -1,6 +1,7 @@
 {
   "name": "@nons-dev/uikit",
-  "version": "0.1.3",
+  "version": "0.1.5",
+  "license": "BUSL-1.1",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -13,9 +14,14 @@
     "registry": "https://registry.npmjs.org/",
     "access": "public"
   },
+  "bin": {
+    "nons": "scripts/cli.mjs"
+  },
   "files": [
     "dist",
-    "README.md"
+    "generated/components.json",
+    "scripts/cli.mjs",
+    "readme.md"
   ],
   "exports": {
     ".": {
@@ -30,7 +36,7 @@
   },
   "scripts": {
     "dev": "vite",
-    "build": "npm run generate && vue-tsc -b && vite build",
+    "build": "npm run generate && vue-tsc -b && vite build && node scripts/copy-fonts.mjs",
     "preview": "vite preview",
     "generate": "tsx scripts/generate.ts"
   },

package/readme.md

@@ -5,32 +5,80 @@ Schema-driven UI component library for the Nons platform — Vue 3, TypeScript,
 ## Architecture
 
 ```
-core/            Schema types, component registry, schema renderer, runtime context
-ui/              Vue 3 components (primitives, composites, layouts, sections)
-design-system/   CSS custom property tokens, reset, light/dark themes
-playground/      Demo/explorer app for component development and testing
-plugins/         i18n, direction, permissions
-adapters/        Data provider layer (mock API, storage abstraction)
-locales/         Persian (fa) and English (en) translation files
-docs/            Component contracts, style guide, reference
+nons.config.yaml       Single source of truth for theme, tokens, locale, direction, font
+core/                  Schema types, component registry, schema renderer, runtime context
+ui/                    Vue 3 components (primitives, composites, layouts, sections)
+generated/             Auto-generated files from nons.config.yaml (tokens.css, theme.css, config.ts, locales/)
+design-system/         CSS reset, global styles (imports generated/ tokens)
+playground/            Demo/explorer app for component development and testing
+plugins/               i18n, direction, permissions
+adapters/              Data provider layer (mock API, storage abstraction)
+locales/               Persian (fa) and English (en) translation YAML files
+scripts/               CLI tools (generate, init, component discovery)
 ```
 
 ## Quick Start
 
+```bash
+# Install
+npm install @nons-dev/uikit
+
+# Generate config file in your project root
+npx @nons-dev/uikit init
+
+# Edit nons.config.yaml to customize theme, tokens, locale, direction, font
+
+# Use in your app
+import { bootstrapRegistry, loadConfig } from '@nons-dev/uikit'
+import '@nons-dev/uikit/style.css'
+```
+
+### Development (UI Kit only)
+
 ```bash
 npm install
-npm run dev       # Start Vite dev server
-npm run build     # Type-check + production build (vue-tsc -b && vite build)
-npm run preview   # Preview production build
+npm run dev           # Start Vite dev server (playground app)
+npm run build         # Generate tokens + type-check + library build
+npm run generate      # Regenerate CSS/theme from nons.config.yaml
+npm run preview       # Preview production playground build
+```
+
+## Config System
+
+The `nons.config.yaml` file at your project root is the **single source of truth**:
+
+```yaml
+theme:
+  preset: nons          # theme preset (nons, custom)
+
+brand:
+  name: Nons            # brand name
+
+direction:
+  default: rtl          # UI direction (rtl, ltr)
+
+locale:
+  default: fa           # default language
+  supported: [fa, en]   # supported languages
+
+font:
+  fa:
+    family: IRANSansX
+  en:
+    family: Satoshi
 ```
 
+Run `npx @nons-dev/uikit generate` to regenerate CSS variables from your config.
+
 ## CLI Commands
 
 ```bash
-npm run ui -- components:list          # List all discovered UI components
-npm run ui -- component:show <name>    # Show full detail for a component
-npm run ui -- schema <name>            # Show schema JSON for a component
-npm run ui -- components:search <q>    # Search components by name/description
+npx @nons-dev/uikit init              # Create nons.config.yaml in project root
+npx @nons-dev/uikit generate          # Generate CSS from nons.config.yaml
+npx @nons-dev/uikit list              # List all components
+npx @nons-dev/uikit show <name>       # Show component details (props, events, slots)
+npx @nons-dev/uikit schema <name>     # Show schema JSON for a component
+npx @nons-dev/uikit search <query>    # Search components by name or description
 ```
 
 ## Documentation
@@ -43,8 +91,9 @@ npm run ui -- components:search <q>    # Search components by name/description
 ## Key Conventions
 
 - **Zero-hardcoding** — all visual values via CSS custom properties (`var(--...)`)
+- **Config-driven** — theme, tokens, direction, locale all from `nons.config.yaml`
 - **RTL-first** — `<html dir="rtl">`, logical properties (`inset-inline-start`, `margin-inline`)
-- **Schema-driven** — every component has a registry key, contract, and schema example
+- **Schema-driven** — every component has a registry key, contract, schema example, and auto-generated metadata (53 components parsed from source)
 - **modelValue** — all form inputs use `modelValue` prop + `update:modelValue` emit
 - **No external margins** — component spacing via parent layout `gap`
 - **Flat UI** — no elevation shadows; separation via themed borders (`--border-primary`)
@@ -56,3 +105,4 @@ npm run ui -- components:search <q>    # Search components by name/description
 - `@lucide/vue` icons
 - Tabler Icons (CDN)
 - Plain CSS only (no SCSS/Sass)
+- Font files bundled in `dist/font/` (IRANSansX, Satoshi) — loaded via `@font-face` in generated CSS

package/scripts/cli.mjs

@@ -0,0 +1,256 @@
+#!/usr/bin/env node
+
+import fs from 'node:fs'
+import path from 'node:path'
+import { fileURLToPath } from 'node:url'
+import * as yaml from 'js-yaml'
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url))
+const COMPONENTS_JSON = path.join(__dirname, '..', 'generated', 'components.json')
+const CWD = process.cwd()
+
+const RESET = '\x1b[0m'
+const BOLD = '\x1b[1m'
+const DIM = '\x1b[2m'
+const GREEN = '\x1b[32m'
+const CYAN = '\x1b[36m'
+const YELLOW = '\x1b[33m'
+const MAGENTA = '\x1b[35m'
+const WHITE = '\x1b[37m'
+const GRAY = '\x1b[90m'
+const RED = '\x1b[31m'
+const BLUE = '\x1b[34m'
+
+const DEFAULT_CONFIG = `theme:
+  preset: nons
+
+brand:
+  name: Nons
+
+direction:
+  default: rtl
+
+locale:
+  default: fa
+  supported:
+    - fa
+    - en
+
+font:
+  fa:
+    family: IRANSansX
+  en:
+    family: Satoshi
+`
+
+// ── Data ──
+
+function loadComponents() {
+  if (!fs.existsSync(COMPONENTS_JSON)) {
+    console.error(`${RED}✗${RESET} Component metadata not found.`)
+    console.error(`  Expected: ${COMPONENTS_JSON}`)
+    process.exit(1)
+  }
+  return JSON.parse(fs.readFileSync(COMPONENTS_JSON, 'utf-8'))
+}
+
+function findComponent(data, query) {
+  const lower = query.toLowerCase()
+  return data.components.find(c =>
+    c.name.toLowerCase() === lower || c.registryKey === lower
+  )
+}
+
+function searchComponents(data, query) {
+  const lower = query.toLowerCase()
+  return data.components.filter(c =>
+    c.name.toLowerCase().includes(lower) ||
+    c.registryKey.includes(lower) ||
+    (c.description || '').toLowerCase().includes(lower)
+  )
+}
+
+// ── Commands ──
+
+function cmdInit() {
+  const dest = path.join(CWD, 'nons.config.yaml')
+  if (fs.existsSync(dest)) {
+    console.log(`${YELLOW}⚠${RESET}  nons.config.yaml already exists — skipping.`)
+    return
+  }
+  fs.writeFileSync(dest, DEFAULT_CONFIG, 'utf-8')
+  console.log(`${GREEN}✓${RESET}  nons.config.yaml created in`, CWD)
+}
+
+function cmdGenerate() {
+  const configPath = path.join(CWD, 'nons.config.yaml')
+  if (!fs.existsSync(configPath)) {
+    console.error(`${RED}✗${RESET}  nons.config.yaml not found. Run \`nons init\` first.`)
+    process.exit(1)
+  }
+  const raw = fs.readFileSync(configPath, 'utf-8')
+  const config = yaml.load(raw)
+  const generatedDir = path.join(CWD, 'generated')
+  if (!fs.existsSync(generatedDir)) fs.mkdirSync(generatedDir, { recursive: true })
+
+  const lines = [':root {']
+  const sections = ['colors', 'spacing', 'typography', 'radius', 'z-index', 'opacity', 'button', 'alert']
+  for (const section of sections) {
+    const tokens = config.tokens?.[section]
+    if (!tokens) continue
+    for (const [key, val] of Object.entries(tokens)) lines.push(`  ${key}: ${val};`)
+  }
+  lines.push('}')
+  fs.writeFileSync(path.join(generatedDir, 'tokens.css'), lines.join('\n'), 'utf-8')
+  console.log(`${GREEN}✓${RESET}  generated/tokens.css`)
+}
+
+function cmdList() {
+  const data = loadComponents()
+  const grouped = {}
+  for (const c of data.components) {
+    if (!grouped[c.category]) grouped[c.category] = []
+    grouped[c.category].push(c)
+  }
+
+  console.log(`\n${BOLD}${CYAN}Components (${data.components.length})${RESET}\n`)
+  const order = ['primitive', 'layout', 'component', 'section']
+  const labels = { primitive: 'Primitive', layout: 'Layout', component: 'Component', section: 'Section' }
+  const colors = { primitive: GREEN, layout: BLUE, component: CYAN, section: MAGENTA }
+
+  for (const cat of order) {
+    const items = grouped[cat]
+    if (!items || !items.length) continue
+    const color = colors[cat]
+    console.log(`  ${color}${BOLD}── ${labels[cat]} (${items.length})${RESET}\n`)
+    for (const c of items) {
+      const desc = c.description ? `  ${GRAY}${c.description.substring(0, 50)}${c.description.length > 50 ? '…' : ''}${RESET}` : ''
+      console.log(`    ${BOLD}${c.name}${RESET} ${DIM}[${c.registryKey}]${RESET}${desc}`)
+    }
+    console.log('')
+  }
+}
+
+function cmdShow(name) {
+  const data = loadComponents()
+  const comp = findComponent(data, name)
+  if (!comp) {
+    console.log(`\n  ${RED}✗ Component "${name}" not found.${RESET}\n`)
+    const similar = searchComponents(data, name).filter(c => c.name !== name)
+    if (similar.length) {
+      console.log(`  ${YELLOW}Did you mean:${RESET}`)
+      for (const s of similar) console.log(`    • ${s.name} ${DIM}[${s.registryKey}]${RESET}`)
+      console.log('')
+    }
+    process.exit(1)
+  }
+
+  const color = { primitive: GREEN, layout: BLUE, component: CYAN, section: MAGENTA }[comp.category] || CYAN
+  const label = { primitive: 'Primitive', layout: 'Layout', component: 'Component', section: 'Section' }[comp.category] || comp.category
+
+  console.log(`\n${BOLD}${CYAN}${comp.name}${RESET}\n`)
+  console.log(`  ${DIM}Category:${RESET}     ${color}${BOLD}${label}${RESET}`)
+  console.log(`  ${DIM}Registry Key:${RESET} ${comp.registryKey}`)
+  console.log(`  ${DIM}File:${RESET}         ${comp.filePath}`)
+  if (comp.description) console.log(`\n  ${comp.description}\n`)
+
+  if (comp.props.length) {
+    console.log(`  ${BOLD}Props:${RESET}\n`)
+    for (const p of comp.props) {
+      const req = p.required ? `${YELLOW}required${RESET}` : `${DIM}optional${RESET}`
+      console.log(`    ${BOLD}${p.name}${RESET}  ${req}`)
+      console.log(`      ${DIM}type:${RESET} ${CYAN}${p.type}${RESET}`)
+      if (p.allowedValues?.length) console.log(`      ${DIM}allowed:${RESET} ${p.allowedValues.map(v => `${GREEN}'${v}'${RESET}`).join(' | ')}`)
+      if (p.default !== undefined) console.log(`      ${DIM}default:${RESET} ${MAGENTA}${p.default}${RESET}`)
+      if (p.description) console.log(`      ${DIM}desc:${RESET} ${p.description}`)
+      console.log('')
+    }
+  }
+
+  if (comp.events.length) {
+    console.log(`  ${BOLD}Events:${RESET}\n`)
+    for (const e of comp.events) {
+      const payload = e.payload ? `  ${DIM}→ ${e.payload}${RESET}` : ''
+      console.log(`    ${YELLOW}@${e.name}${RESET}${payload}`)
+    }
+    console.log('')
+  }
+
+  if (comp.slots.length) {
+    console.log(`  ${BOLD}Slots:${RESET}\n`)
+    for (const s of comp.slots) console.log(`    ${MAGENTA}#${s.name}${RESET}`)
+    console.log('')
+  }
+
+  if (comp.schemaExample) {
+    console.log(`  ${BOLD}Schema Example:${RESET}\n`)
+    for (const line of comp.schemaExample.split('\n')) console.log(`    ${GRAY}${line}${RESET}`)
+    console.log('')
+  }
+}
+
+function cmdSchema(name) {
+  const data = loadComponents()
+  const comp = findComponent(data, name)
+  if (!comp) {
+    console.log(`\n  ${RED}✗ Component "${name}" not found.${RESET}\n`)
+    process.exit(1)
+  }
+  console.log(`\n${BOLD}${CYAN}Schema: ${comp.name}${RESET}\n`)
+  console.log(comp.schemaExample || JSON.stringify({ type: comp.registryKey, props: {} }, null, 2))
+  console.log('')
+}
+
+function cmdSearch(query) {
+  const data = loadComponents()
+  const matches = searchComponents(data, query)
+  if (!matches.length) {
+    console.log(`\n  ${YELLOW}No components matched "${query}"${RESET}\n`)
+    return
+  }
+  const colors = { primitive: GREEN, layout: BLUE, component: CYAN, section: MAGENTA }
+  const labels = { primitive: 'Primitive', layout: 'Layout', component: 'Component', section: 'Section' }
+  console.log(`\n${BOLD}${CYAN}Search: "${query}"${RESET}  ${DIM}(${matches.length} found)${RESET}\n`)
+  for (const c of matches) {
+    const color = colors[c.category] || CYAN
+    console.log(`  ${BOLD}${c.name}${RESET}  ${color}${labels[c.category] || c.category}${RESET}  ${DIM}[${c.registryKey}]${RESET}`)
+    if (c.description) console.log(`    ${GRAY}${c.description.substring(0, 70)}${c.description.length > 70 ? '…' : ''}${RESET}`)
+  }
+  console.log('')
+}
+
+// ── Help ──
+
+function printHelp() {
+  console.log(`\n${BOLD}${CYAN}Nons UIKit CLI${RESET}\n`)
+  console.log(`${BOLD}Commands:${RESET}\n`)
+  console.log(`  ${GREEN}init${RESET}               Create nons.config.yaml in current directory`)
+  console.log(`  ${GREEN}generate${RESET}           Generate CSS from nons.config.yaml`)
+  console.log(`  ${GREEN}list${RESET}               List all components`)
+  console.log(`  ${GREEN}show${RESET} ${DIM}<name>${RESET}          Show full detail for a component`)
+  console.log(`  ${GREEN}schema${RESET} ${DIM}<name>${RESET}         Show schema JSON for a component`)
+  console.log(`  ${GREEN}search${RESET} ${DIM}<query>${RESET}        Search components by name/description`)
+  console.log(`  ${GREEN}help${RESET}               Show this help\n`)
+  console.log(`${BOLD}Usage:${RESET}\n`)
+  console.log(`  ${DIM}npx @nons-dev/uikit list${RESET}`)
+  console.log(`  ${DIM}npx @nons-dev/uikit show Button${RESET}`)
+  console.log(`  ${DIM}npx @nons-dev/uikit schema Input${RESET}`)
+  console.log(`  ${DIM}npx @nons-dev/uikit search table${RESET}`)
+  console.log(`  ${DIM}npx @nons-dev/uikit init${RESET}`)
+  console.log(`  ${DIM}npx @nons-dev/uikit generate${RESET}\n`)
+}
+
+// ── Main ──
+
+const command = process.argv[2]
+const param = process.argv[3]
+
+switch (command) {
+  case 'init':      cmdInit(); break
+  case 'generate':  cmdGenerate(); break
+  case 'list':      cmdList(); break
+  case 'show':      param ? cmdShow(param) : (console.error(`${RED}✗${RESET} Missing component name.`), process.exit(1)); break
+  case 'schema':    param ? cmdSchema(param) : (console.error(`${RED}✗${RESET} Missing component name.`), process.exit(1)); break
+  case 'search':    param ? cmdSearch(param) : (console.error(`${RED}✗${RESET} Missing search query.`), process.exit(1)); break
+  case '--help': case '-h': case 'help': default: printHelp(); break
+}