@nons-dev/uikit 0.1.6 → 0.1.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nons-dev/uikit",
-  "version": "0.1.6",
+  "version": "0.1.8",
   "license": "BUSL-1.1",
   "type": "module",
   "main": "./dist/index.js",
@@ -19,8 +19,11 @@
   },
   "files": [
     "dist",
+    "core/config",
     "generated/components.json",
+    "locales",
     "scripts/cli.mjs",
+    "scripts/vite-plugin-nons-config.ts",
     "readme.md"
   ],
   "exports": {
@@ -32,13 +35,17 @@
     "./style.css": {
       "import": "./dist/index.css",
       "default": "./dist/index.css"
+    },
+    "./plugin": {
+      "types": "./scripts/vite-plugin-nons-config.ts",
+      "import": "./scripts/vite-plugin-nons-config.ts",
+      "default": "./scripts/vite-plugin-nons-config.ts"
     }
   },
   "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 +55,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

@@ -2,50 +2,55 @@
 
 Schema-driven UI component library for the Nons platform — Vue 3, TypeScript, token-based design system.
 
-## Architecture
+## Installation
 
-```
-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)
+```bash
+npm install @nons-dev/uikit
 ```
 
 ## Quick Start
 
 ```bash
-# Install
-npm install @nons-dev/uikit
-
-# Generate config file in your project root
+# Generate config in your project root
 npx @nons-dev/uikit init
 
-# Edit nons.config.yaml to customize theme, tokens, locale, direction, font
+# Edit nons.config.yaml
+```
 
-# Use in your app
-import { bootstrapRegistry, loadConfig } from '@nons-dev/uikit'
+```ts
+import { bootstrapRegistry } from '@nons-dev/uikit'
 import '@nons-dev/uikit/style.css'
 ```
 
-### Development (UI Kit only)
+For token/theme/font customization, use the Nons Vite plugin in your project:
 
-```bash
-npm install
-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
+```ts
+// vite.config.ts
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import { nonsConfigPlugin } from '@nons-dev/uikit/plugin'
+
+export default defineConfig({
+  plugins: [vue(), nonsConfigPlugin()],
+})
+```
+
+## Architecture
+
+```
+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)
+design-system/         CSS reset, global styles, token defaults (shipped in dist/)
+plugins/               i18n, direction, permissions
+adapters/              Data provider layer (mock API, storage abstraction)
+locales/               Persian (fa) and English (en) translation JSON files
+scripts/               CLI tool (nons) and Vite plugin
 ```
 
 ## Config System
 
-The `nons.config.yaml` file at your project root is the **single source of truth**:
+`nons.config.yaml` at your project root is the **single source of truth**:
 
 ```yaml
 theme:
@@ -72,13 +77,11 @@ tokens:
     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:
@@ -89,61 +92,70 @@ theme-mappings:
     --text-primary: var(--color-text-default)
 ```
 
-Run `npx @nons-dev/uikit generate` to regenerate CSS variables from your config.
-
 ## CLI Commands
 
 ```bash
-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 init              # Create nons.config.yaml + locales/ in project root
+npx @nons-dev/uikit validate          # Validate nons.config.yaml structure
 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
 ```
 
-## Customizing Colors & Tokens
+## Customizing Tokens & Theme
 
-Edit `nons.config.yaml` in your project root, then regenerate:
-
-```bash
-npx @nons-dev/uikit generate
-```
+The default design tokens are built into `dist/index.css`. To override them:
 
-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:
+1. Edit `nons.config.yaml` with your custom token values
+2. Use the **Nons Vite plugin** to generate custom CSS at build time:
 
 ```ts
-import '@nons-dev/uikit/style.css'
-import './generated/tokens.css'
-import './generated/theme.css'
+// vite.config.ts
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import { nonsConfigPlugin } from '@nons-dev/uikit/plugin'
+
+export default defineConfig({
+  plugins: [vue(), nonsConfigPlugin()],
+})
 ```
 
-The generated CSS uses `:root` / `[data-theme="dark"]` blocks — your custom values override the defaults with the same specificity.
+The plugin creates virtual modules (`virtual:nons-config` for JS access, `virtual:nons-config:style` for CSS overrides). Custom token values are injected with the same specificity as defaults.
 
-All visual values in the uikit reference CSS custom properties (`var(--color-primary)`), so changing a token in YAML propagates to every component.
+All visual values in the uikit reference CSS custom properties (`var(--color-primary)`), so changing a token propagates to every component.
 
-## Documentation
+## Development (UI Kit only)
 
-| Resource | Description |
-|----------|-------------|
-| [Style Guide](docs/STYLE-GUIDE.md) | Token-driven design, layout isolation, flat UI, component conventions |
-| [Component Contracts](docs/component-contracts/) | Single source of truth for all component APIs, schemas, and states |
+```bash
+npm install
+npm run dev           # Start Vite dev server (playground app)
+npm run build         # Type-check + library build + copy fonts
+npm run preview       # Preview production playground build
+```
 
 ## Key Conventions
 
-- **Zero-hardcoding** — all visual values via CSS custom properties (`var(--...)`)
+- **Zero-hardcoding** — all visual values via CSS custom properties
 - **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, schema example, and auto-generated metadata (53 components parsed from source)
+- **Schema-driven** — every component has a registry key, contract, and metadata (53 components)
 - **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`)
+- **Flat UI** — no elevation shadows; separation via themed borders
 - **TypeScript strict** — `strict: true`, `noUncheckedIndexedAccess`, `noUnusedLocals`
 
 ## Dependencies
 
-- Vue 3.5 (Composition API, `<script setup lang="ts">`)
+- Vue 3.5 (Composition API)
 - `@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
+- Font files bundled in `dist/font/` (IRANSansX, Satoshi)
+
+## Documentation
+
+| Resource | Description |
+|----------|-------------|
+| [Style Guide](docs/STYLE-GUIDE.md) | Token-driven design, layout isolation, flat UI, component conventions |
+| [Component Contracts](docs/component-contracts/) | Single source of truth for all component APIs, schemas, and states |

package/scripts/cli.mjs

@@ -40,17 +40,6 @@ font:
     family: IRANSansX
   en:
     family: Satoshi
-  # Faces loaded automatically from @nons-dev/uikit/dist/font/
-  # Uncomment and customize src to use your own font files:
-  # faces:
-  #   - family: Satoshi
-  #     weight: 400
-  #     src: fonts/Satoshi-Regular.woff2
-  #     format: woff2
-  #   - family: IRANSansX
-  #     weight: 400
-  #     src: fonts/IRANSansX-Regular.woff
-  #     format: woff
 
 tokens:
   colors:
@@ -204,6 +193,20 @@ theme-mappings:
     --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() {
@@ -231,147 +234,82 @@ function searchComponents(data, query) {
   )
 }
 
-// ── Generate helpers ──
-
-function writeTokenBlock(tokens, indent) {
-  return Object.entries(tokens || {}).map(([k, v]) => `${indent}${k}: ${v};`).join('\n')
-}
-
-function generateFontCSS(config) {
-  const faces = config.font?.faces
-  if (!faces || !faces.length) return ''
-  const lines = []
-  for (const face of faces) {
-    lines.push('@font-face {')
-    lines.push(`  font-family: '${face.family}';`)
-    lines.push(`  src: url('./${face.src}') format('${face.format}');`)
-    lines.push(`  font-weight: ${face.weight};`)
-    lines.push('  font-style: normal;')
-    lines.push('  font-display: swap;')
-    lines.push('}')
-    lines.push('')
-  }
-  return lines.join('\n')
-}
-
-function generateTokensCSS(config) {
-  const lines = []
-  const fonts = generateFontCSS(config)
-  if (fonts) lines.push(fonts)
-
-  const t = config.tokens || {}
-
-  // Light & dark color schemes
-  const hasLight = t.colors?.light && Object.keys(t.colors.light).length
-  const hasDark = t.colors?.dark && Object.keys(t.colors.dark).length
+// ── Commands ──
 
-  if (hasLight) {
-    lines.push(':root {')
-    lines.push('  color-scheme: light;')
-    lines.push(writeTokenBlock(t.colors.light, '  '))
-    lines.push('}')
-    lines.push('')
+function cmdInit() {
+  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(configDest, DEFAULT_CONFIG, 'utf-8')
+  console.log(`${GREEN}✓${RESET}  nons.config.yaml created`)
 
-  if (hasDark) {
-    lines.push('[data-theme="dark"] {')
-    lines.push('  color-scheme: dark;')
-    lines.push(writeTokenBlock(t.colors.dark, '  '))
-    lines.push('}')
-    lines.push('')
+  const localesDir = path.join(CWD, 'locales')
+  if (!fs.existsSync(localesDir)) {
+    fs.mkdirSync(localesDir, { recursive: true })
+    console.log(`${GREEN}✓${RESET}  locales/ directory created`)
   }
 
-  // Flat token sections (no light/dark split)
-  const flatSections = {
-    spacing: 'Spacing', typography: 'Typography', radius: 'Border Radius',
-    'z-index': 'Z-Index', opacity: 'Opacity', button: 'Button', alert: 'Alert',
-  }
-  for (const [section, label] of Object.entries(flatSections)) {
-    const tokens = t[section]
-    if (!tokens || !Object.keys(tokens).length) continue
-    lines.push(`/* ${label} */`)
-    lines.push(':root {')
-    lines.push(writeTokenBlock(tokens, '  '))
-    lines.push('}')
-    lines.push('')
+  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`)
   }
 
-  // Shadows (light + dark)
-  const hasShadowLight = t.shadows?.light && Object.keys(t.shadows.light).length
-  const hasShadowDark = t.shadows?.dark && Object.keys(t.shadows.dark).length
-  if (hasShadowLight) {
-    lines.push(':root {')
-    lines.push('  color-scheme: light;')
-    lines.push(writeTokenBlock(t.shadows.light, '  '))
-    lines.push('}')
-    lines.push('')
-  }
-  if (hasShadowDark) {
-    lines.push('[data-theme="dark"] {')
-    lines.push('  color-scheme: dark;')
-    lines.push(writeTokenBlock(t.shadows.dark, '  '))
-    lines.push('}')
-    lines.push('')
+  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`)
   }
 
-  return lines.join('\n')
+  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 generateThemeCSS(config) {
-  const m = config['theme-mappings']
-  if (!m) return ''
-  const lines = []
-
-  lines.push(':root {')
-  lines.push('  color-scheme: light;')
-  if (m.light) lines.push(writeTokenBlock(m.light, '  '))
-  lines.push('}')
-
-  lines.push('')
-  lines.push('[data-theme="dark"] {')
-  lines.push('  color-scheme: dark;')
-  if (m.dark) lines.push(writeTokenBlock(m.dark, '  '))
-  lines.push('}')
-
-  return lines.join('\n')
-}
-
-// ── 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() {
+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 })
-
-  // tokens.css
-  const tokensCSS = generateTokensCSS(config)
-  fs.writeFileSync(path.join(generatedDir, 'tokens.css'), tokensCSS, 'utf-8')
-  console.log(`${GREEN}✓${RESET}  generated/tokens.css`)
-
-  // theme.css
-  const themeCSS = generateThemeCSS(config)
-  if (themeCSS) {
-    fs.writeFileSync(path.join(generatedDir, 'theme.css'), themeCSS, 'utf-8')
-    console.log(`${GREEN}✓${RESET}  generated/theme.css`)
-  }
 
-  console.log(`${YELLOW}ℹ${RESET}  Import in your app:\n      import './generated/tokens.css'\n      import './generated/theme.css'`)
+  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)
+  }
 }
 
 function cmdList() {
@@ -493,8 +431,8 @@ 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 tokens.css + theme.css from config`)
+  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`)
@@ -502,7 +440,7 @@ function printHelp() {
   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 generate${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}`)
@@ -516,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

package/scripts/vite-plugin-nons-config.ts

@@ -0,0 +1,76 @@
+import * as fs from 'node:fs'
+import * as path from 'node:path'
+import * as yaml from 'js-yaml'
+import type { Plugin, ResolvedConfig } from 'vite'
+import type { RawConfig } from '../core/config/types'
+import { generateFullCSS } from '../core/config/parser'
+
+const CONFIG_VIRTUAL = 'virtual:nons-config'
+const CONFIG_CSS_VIRTUAL = 'virtual:nons-config:style'
+const RESOLVED_CONFIG_VIRTUAL = '\0' + CONFIG_VIRTUAL
+const RESOLVED_CONFIG_CSS_VIRTUAL = '\0' + CONFIG_CSS_VIRTUAL
+
+let loadedConfig: RawConfig | null = null
+
+export function loadConfigFromYaml(filePath: string): RawConfig {
+  const raw = fs.readFileSync(filePath, 'utf-8')
+  const config = yaml.load(raw) as RawConfig
+  loadedConfig = config
+  return config
+}
+
+export function getLoadedConfig(): RawConfig | null {
+  return loadedConfig
+}
+
+export function nonsConfigPlugin(configPath?: string): Plugin {
+  const resolvedPath = configPath || path.resolve(process.cwd(), 'nons.config.yaml')
+
+  return {
+    name: 'nons-config',
+
+    configResolved(_config: ResolvedConfig) {
+      if (fs.existsSync(resolvedPath)) {
+        loadConfigFromYaml(resolvedPath)
+      }
+    },
+
+    resolveId(id: string) {
+      if (id === CONFIG_VIRTUAL) return RESOLVED_CONFIG_VIRTUAL
+      if (id === CONFIG_CSS_VIRTUAL) return RESOLVED_CONFIG_CSS_VIRTUAL
+      return null
+    },
+
+    load(id: string) {
+      if (id === RESOLVED_CONFIG_VIRTUAL) {
+        if (!loadedConfig) {
+          this.error('nons.config.yaml not found at ' + resolvedPath)
+          return
+        }
+        const runtimeConfig = {
+          theme: loadedConfig.theme,
+          brand: loadedConfig.brand,
+          direction: loadedConfig.direction,
+          locale: loadedConfig.locale,
+          font: {
+            fa: loadedConfig.font?.fa,
+            en: loadedConfig.font?.en,
+          },
+        }
+        return `export const nonsConfig = ${JSON.stringify(runtimeConfig, null, 2)}`
+      }
+
+      if (id === RESOLVED_CONFIG_CSS_VIRTUAL) {
+        if (!loadedConfig) {
+          this.error('nons.config.yaml not found at ' + resolvedPath)
+          return
+        }
+        return generateFullCSS(loadedConfig)
+      }
+
+      return null
+    },
+  }
+}
+
+