@nons-dev/uikit 0.1.5 → 0.1.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nons-dev/uikit",
-  "version": "0.1.5",
+  "version": "0.1.7",
   "license": "BUSL-1.1",
   "type": "module",
   "main": "./dist/index.js",
@@ -20,6 +20,7 @@
   "files": [
     "dist",
     "generated/components.json",
+    "locales",
     "scripts/cli.mjs",
     "readme.md"
   ],
@@ -36,9 +37,8 @@
   },
   "scripts": {
     "dev": "vite",
-    "build": "npm run generate && vue-tsc -b && vite build && node scripts/copy-fonts.mjs",
-    "preview": "vite preview",
-    "generate": "tsx scripts/generate.ts"
+    "build": "vue-tsc -b && vite build && node scripts/copy-fonts.mjs",
+    "preview": "vite preview"
   },
   "peerDependencies": {
     "vue": "^3.5.0"
@@ -48,10 +48,8 @@
     "js-yaml": "^5.1.0"
   },
   "devDependencies": {
-    "@types/js-yaml": "^4.0.9",
     "@types/node": "^26.0.1",
     "@vitejs/plugin-vue": "^5.2.3",
-    "tsx": "^4.22.4",
     "typescript": "~5.7.3",
     "vite": "^6.3.3",
     "vite-plugin-dts": "^5.0.3",

package/readme.md

@@ -49,23 +49,44 @@ The `nons.config.yaml` file at your project root is the **single source of truth
 
 ```yaml
 theme:
-  preset: nons          # theme preset (nons, custom)
+  preset: nons
 
 brand:
-  name: Nons            # brand name
+  name: Nons
 
 direction:
-  default: rtl          # UI direction (rtl, ltr)
+  default: rtl
 
 locale:
-  default: fa           # default language
-  supported: [fa, en]   # supported languages
+  default: fa
+  supported: [fa, en]
 
 font:
   fa:
     family: IRANSansX
   en:
     family: Satoshi
+
+tokens:
+  colors:
+    light:
+      --color-primary: '#9FE870'
+      --color-danger: '#F31260'
+      # ... override any CSS custom property
+    dark:
+      --color-primary: '#9FE870'
+      --color-danger: '#f31260'
+  spacing:
+    --space-4: 16px
+  # ... typography, radius, shadows, z-index, opacity, button, alert
+
+theme-mappings:
+  light:
+    --bg-primary: var(--color-ui-window)
+    --text-primary: var(--color-text-default)
+  dark:
+    --bg-primary: var(--color-ui-window)
+    --text-primary: var(--color-text-default)
 ```
 
 Run `npx @nons-dev/uikit generate` to regenerate CSS variables from your config.
@@ -81,6 +102,26 @@ npx @nons-dev/uikit schema <name>     # Show schema JSON for a component
 npx @nons-dev/uikit search <query>    # Search components by name or description
 ```
 
+## Customizing Colors & Tokens
+
+Edit `nons.config.yaml` in your project root, then regenerate:
+
+```bash
+npx @nons-dev/uikit generate
+```
+
+This produces `generated/tokens.css` (color schemes + all tokens) and `generated/theme.css` (semantic theme mappings). Import them in your app after the uikit CSS:
+
+```ts
+import '@nons-dev/uikit/style.css'
+import './generated/tokens.css'
+import './generated/theme.css'
+```
+
+The generated CSS uses `:root` / `[data-theme="dark"]` blocks — your custom values override the defaults with the same specificity.
+
+All visual values in the uikit reference CSS custom properties (`var(--color-primary)`), so changing a token in YAML propagates to every component.
+
 ## Documentation
 
 | Resource | Description |

package/scripts/cli.mjs

@@ -16,7 +16,6 @@ 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'
@@ -41,8 +40,173 @@ font:
     family: IRANSansX
   en:
     family: Satoshi
+
+tokens:
+  colors:
+    light:
+      --color-text-default: '#37352F'
+      --color-text-grey: '#787774'
+      --color-ui-window: '#FFFFFF'
+      --color-ui-sidebar: '#F7F6F3'
+      --color-ui-hover: rgba(55, 53, 47, 0.08)
+      --color-primary: '#9FE870'
+      --color-primary-bg: rgba(159, 232, 112, 0.15)
+      --color-primary-dark: '#163300'
+      --color-primary-text: var(--color-primary-dark)
+      --color-primary-selected-bg: rgba(159, 232, 112, 0.08)
+      --color-danger: '#F31260'
+      --color-danger-bg: '#FEE7EF'
+      --color-success: '#17C964'
+      --color-success-bg: '#E8FAF0'
+      --color-warning: '#F5A524'
+      --color-warning-bg: '#FEFCE8'
+      --color-secondary: '#7828C8'
+      --color-secondary-bg: '#F2EAFA'
+      --color-info: '#006FEE'
+      --color-info-bg: '#E7F3F8'
+      --color-default: '#11181C'
+      --color-default-bg: '#F4F4F5'
+      --color-border: '#D5D5D2'
+      --color-text-secondary: var(--color-text-grey)
+      --color-white: '#FFFFFF'
+    dark:
+      --color-text-default: '#FFFFFF'
+      --color-text-grey: '#979A9B'
+      --color-ui-window: '#111111'
+      --color-ui-sidebar: '#000000'
+      --color-ui-hover: rgba(255, 255, 255, 0.08)
+      --color-primary: '#9FE870'
+      --color-primary-bg: rgba(159, 232, 112, 0.15)
+      --color-primary-dark: '#163300'
+      --color-primary-text: var(--color-primary-dark)
+      --color-primary-selected-bg: rgba(159, 232, 112, 0.08)
+      --color-danger: '#f31260'
+      --color-danger-bg: '#310413'
+      --color-success: '#17c964'
+      --color-success-bg: '#052814'
+      --color-warning: '#f5a524'
+      --color-warning-bg: '#312107'
+      --color-secondary: '#9353d3'
+      --color-secondary-bg: '#180828'
+      --color-info: '#006fee'
+      --color-info-bg: '#001731'
+      --color-default: '#006fee'
+      --color-default-bg: '#001731'
+      --color-border: '#1D1D1D'
+      --color-text-secondary: var(--color-text-grey)
+      --color-white: '#FFFFFF'
+
+  spacing:
+    --space-0-5: 2px
+    --space-1: 4px
+    --space-2: 8px
+    --space-2-5: 10px
+    --space-3: 12px
+    --space-4: 16px
+    --space-5: 24px
+    --space-6: 32px
+    --space-8: 48px
+    --space-10: 64px
+    --space-3-5: 14px
+    --space-4-5: 18px
+    --border-width: 1px
+    --border-width-lg: 2px
+
+  typography:
+    --font-family: "'IRANSansX', 'Satoshi', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif"
+    --font-family-mono: "'SF Mono', 'Fira Code', 'Fira Mono', 'Roboto Mono', monospace"
+    --font-size-xs: 12px
+    --font-size-sm: 12px
+    --font-size-md: 14px
+    --font-size-lg: 16px
+    --font-size-xl: 18px
+    --font-size-2xl: 24px
+    --font-weight-normal: 400
+    --font-weight-medium: 500
+    --font-weight-bold: 700
+    --line-height-sm: 18px
+    --line-height-md: 22px
+    --line-height-lg: 30px
+
+  radius:
+    --radius-sm: 4px
+    --radius-md: 8px
+    --radius-lg: 12px
+    --radius-xl: 16px
+    --radius-full: 9999px
+
+  shadows:
+    light:
+      --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06)
+      --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.08)
+      --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.1)
+    dark:
+      --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3)
+      --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.35)
+      --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.4)
+
+  z-index:
+    --z-dropdown: 100
+    --z-popover: 90
+    --z-tooltip: 150
+    --z-modal: 1000
+    --z-panel: 200
+
+  opacity:
+    --opacity-disabled: 0.5
+    --opacity-secondary: 0.6
+    --opacity-placeholder: 0.6
+    --opacity-hint: 0.8
+    --opacity-hover: 0.8
+
+  button:
+    --btn-border-radius: 8px
+    --btn-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05)
+    --btn-padding: 10px 16px
+    --btn-font-size: 14px
+    --btn-font-weight: 500
+    --btn-font-family: "'IRANSansX', sans-serif"
+
+  alert:
+    --alert-border-radius: 16px
+    --alert-padding: 12px
+    --alert-gap: 16px
+
+theme-mappings:
+  light:
+    --bg-primary: var(--color-ui-window)
+    --bg-sidebar: var(--color-ui-sidebar)
+    --bg-hover: var(--color-ui-hover)
+    --bg-card: var(--color-ui-window)
+    --text-primary: var(--color-text-default)
+    --text-secondary: var(--color-text-secondary)
+    --border-primary: var(--color-border)
+    --overlay-bg: rgba(0, 0, 0, 0.4)
+  dark:
+    --bg-primary: var(--color-ui-window)
+    --bg-sidebar: var(--color-ui-sidebar)
+    --bg-hover: var(--color-ui-hover)
+    --bg-card: '#161816'
+    --text-primary: var(--color-text-default)
+    --text-secondary: var(--color-text-grey)
+    --border-primary: var(--color-border)
+    --overlay-bg: rgba(0, 0, 0, 0.6)
 `
 
+const LOCALE_FA = JSON.stringify({
+  app: { name: 'نونز', footer: 'پنل مدیریت' },
+  nav: { dashboard: 'داشبورد', users: 'کاربران', stores: 'فروشگاه‌ها', products: 'محصولات', orders: 'سفارشات', chat: 'گفتگو', reports: 'گزارشات', stats: 'آمار', components: 'کامپوننت‌ها' },
+  table: { empty: 'هیچ داده‌ای یافت نشد.' },
+  loading: { text: 'در حال بارگذاری...' },
+}, null, 2)
+
+const LOCALE_EN = JSON.stringify({
+  app: { name: 'Nons', footer: 'Admin Panel' },
+  nav: { dashboard: 'Dashboard', users: 'Users', stores: 'Stores', products: 'Products', orders: 'Orders', chat: 'Chat', reports: 'Reports', stats: 'Stats', components: 'Components' },
+  table: { empty: 'No data found.' },
+  loading: { text: 'Loading...' },
+}, null, 2)
+
 // ── Data ──
 
 function loadComponents() {
@@ -73,36 +237,79 @@ function searchComponents(data, query) {
 // ── Commands ──
 
 function cmdInit() {
-  const dest = path.join(CWD, 'nons.config.yaml')
-  if (fs.existsSync(dest)) {
+  const configDest = path.join(CWD, 'nons.config.yaml')
+  if (fs.existsSync(configDest)) {
     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)
+  fs.writeFileSync(configDest, DEFAULT_CONFIG, 'utf-8')
+  console.log(`${GREEN}✓${RESET}  nons.config.yaml created`)
+
+  const localesDir = path.join(CWD, 'locales')
+  if (!fs.existsSync(localesDir)) {
+    fs.mkdirSync(localesDir, { recursive: true })
+    console.log(`${GREEN}✓${RESET}  locales/ directory created`)
+  }
+
+  const faPath = path.join(localesDir, 'fa.json')
+  if (!fs.existsSync(faPath)) {
+    fs.writeFileSync(faPath, LOCALE_FA, 'utf-8')
+    console.log(`${GREEN}✓${RESET}  locales/fa.json created`)
+  }
+
+  const enPath = path.join(localesDir, 'en.json')
+  if (!fs.existsSync(enPath)) {
+    fs.writeFileSync(enPath, LOCALE_EN, 'utf-8')
+    console.log(`${GREEN}✓${RESET}  locales/en.json created`)
+  }
+
+  console.log(`\n${YELLOW}ℹ${RESET}  Install a Vite plugin or adapter to load config automatically:`)
+  console.log(`      npm install @nons-dev/vite-plugin\n`)
 }
 
-function cmdGenerate() {
+function cmdValidate() {
   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};`)
+
+  try {
+    const raw = fs.readFileSync(configPath, 'utf-8')
+    const config = yaml.load(raw)
+
+    const errors = []
+    const warnings = []
+
+    if (!config || typeof config !== 'object') {
+      errors.push('Config must be a non-null object')
+    } else {
+      const c = config
+      if (!c.theme || !c.theme.preset) errors.push('Missing theme.preset')
+      if (!c.brand || !c.brand.name) errors.push('Missing brand.name')
+      if (!c.direction || (c.direction.default !== 'rtl' && c.direction.default !== 'ltr')) errors.push('direction.default must be "rtl" or "ltr"')
+      if (!c.locale || !c.locale.default) errors.push('Missing locale.default')
+      if (!Array.isArray(c.locale?.supported) || c.locale.supported.length === 0) errors.push('locale.supported must be a non-empty array')
+      if (!c.tokens || typeof c.tokens !== 'object') warnings.push('No tokens section found — using defaults')
+    }
+
+    if (errors.length === 0) {
+      console.log(`\n${GREEN}✓${RESET}  Config is valid\n`)
+    } else {
+      console.log(`\n${RED}✗${RESET}  Config has errors:\n`)
+      for (const e of errors) console.log(`  ${RED}•${RESET} ${e}`)
+      console.log('')
+    }
+    if (warnings.length) {
+      for (const w of warnings) console.log(`  ${YELLOW}•${RESET} ${w}`)
+      console.log('')
+    }
+
+    if (errors.length) process.exit(1)
+  } catch (err) {
+    console.error(`\n${RED}✗${RESET}  Invalid YAML: ${err.message}\n`)
+    process.exit(1)
   }
-  lines.push('}')
-  fs.writeFileSync(path.join(generatedDir, 'tokens.css'), lines.join('\n'), 'utf-8')
-  console.log(`${GREEN}✓${RESET}  generated/tokens.css`)
 }
 
 function cmdList() {
@@ -224,20 +431,20 @@ function cmdSearch(query) {
 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}init${RESET}               Create nons.config.yaml + locales/ in current directory`)
+  console.log(`  ${GREEN}validate${RESET}           Validate 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 init${RESET}`)
+  console.log(`  ${DIM}npx @nons-dev/uikit validate${RESET}`)
   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`)
+  console.log(`  ${DIM}npx @nons-dev/uikit search table${RESET}\n`)
 }
 
 // ── Main ──
@@ -247,7 +454,7 @@ const param = process.argv[3]
 
 switch (command) {
   case 'init':      cmdInit(); break
-  case 'generate':  cmdGenerate(); break
+  case 'validate':  cmdValidate(); 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