@nons-dev/uikit 0.1.6 → 0.1.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nons-dev/uikit",
-  "version": "0.1.6",
+  "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/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