@nons-dev/uikit 0.1.4 → 0.1.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nons-dev/uikit",
-  "version": "0.1.4",
+  "version": "0.1.6",
   "license": "BUSL-1.1",
   "type": "module",
   "main": "./dist/index.js",
@@ -14,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": {
     ".": {
@@ -31,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,34 +5,123 @@ 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
+
+brand:
+  name: Nons
+
+direction:
+  default: rtl
+
+locale:
+  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.
+
 ## 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
+```
+
+## 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 |
@@ -43,8 +132,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 +146,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