@nons-dev/uikit 0.1.4 → 0.1.6

package/scripts/cli.mjs

@@ -0,0 +1,525 @@
+#!/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 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
+  # 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:
+    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)
+`
+
+// ── 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)
+  )
+}
+
+// ── 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
+
+  if (hasLight) {
+    lines.push(':root {')
+    lines.push('  color-scheme: light;')
+    lines.push(writeTokenBlock(t.colors.light, '  '))
+    lines.push('}')
+    lines.push('')
+  }
+
+  if (hasDark) {
+    lines.push('[data-theme="dark"] {')
+    lines.push('  color-scheme: dark;')
+    lines.push(writeTokenBlock(t.colors.dark, '  '))
+    lines.push('}')
+    lines.push('')
+  }
+
+  // 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('')
+  }
+
+  // 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('')
+  }
+
+  return lines.join('\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() {
+  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'`)
+}
+
+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 tokens.css + theme.css from config`)
+  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 generate${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}\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
+}