@nons-dev/uikit 0.1.7 → 0.1.8

package/core/config/index.ts

@@ -0,0 +1,76 @@
+import type { NonsConfig, RawConfig } from './types'
+import { validateConfig } from './validator'
+import type { ValidationResult } from './validator'
+
+export type { NonsConfig, RawConfig, ValidationResult }
+export { generateFullCSS } from './parser'
+
+let _config: NonsConfig | null = null
+let _rawConfig: RawConfig | null = null
+
+export function createConfig(overrides?: Partial<NonsConfig>): NonsConfig {
+  return {
+    theme: { preset: 'nons' },
+    brand: { name: 'Nons' },
+    direction: { default: 'rtl' },
+    locale: { default: 'fa', supported: ['fa', 'en'] },
+    font: { fa: { family: 'IRANSansX' }, en: { family: 'Satoshi' } },
+    ...overrides,
+  }
+}
+
+export function loadConfig(config: NonsConfig) {
+  _config = config
+}
+
+export function loadRawConfig(config: RawConfig) {
+  _rawConfig = config
+  _config = {
+    theme: config.theme,
+    brand: config.brand,
+    direction: config.direction,
+    locale: config.locale,
+    font: config.font,
+  }
+}
+
+export function getConfig(): NonsConfig {
+  if (!_config) {
+    throw new Error('Config not loaded. Call loadConfig() first.')
+  }
+  return _config
+}
+
+export function getRawConfig(): RawConfig {
+  if (!_rawConfig) {
+    throw new Error('Raw config not loaded. Call loadRawConfig() first.')
+  }
+  return _rawConfig
+}
+
+export function validateNonsConfig(config: unknown): ValidationResult {
+  return validateConfig(config)
+}
+
+export function getThemePreset(): string {
+  return getConfig().theme.preset
+}
+
+export function getDirection(): 'rtl' | 'ltr' {
+  return getConfig().direction.default as 'rtl' | 'ltr'
+}
+
+export function getDefaultLocale(): string {
+  return getConfig().locale.default
+}
+
+export function getSupportedLocales(): string[] {
+  return getConfig().locale.supported
+}
+
+export function getFontFamily(locale: string): string {
+  const fonts = getConfig().font
+  if (locale === 'fa' && fonts.fa?.family) return fonts.fa.family
+  if (fonts.en?.family) return fonts.en.family
+  return 'IRANSansX'
+}

package/core/config/parser.ts

@@ -0,0 +1,112 @@
+import type { RawConfig } from './types'
+
+function writeTokenBlock(tokens: Record<string, string>, indent: string): string {
+  return Object.entries(tokens || {})
+    .map(([k, v]) => `${indent}${k}: ${v};`)
+    .join('\n')
+}
+
+function generateFontCSS(config: RawConfig): string {
+  const faces = config.font?.faces
+  if (!faces || !faces.length) return ''
+  return faces.map(face =>
+    `@font-face {
+  font-family: '${face.family}';
+  src: url('./font/${face.src.split('/').pop()}') format('${face.format}');
+  font-weight: ${face.weight};
+  font-style: normal;
+  font-display: swap;
+}`
+  ).join('\n\n') + '\n\n'
+}
+
+export function generateTokensCSS(config: RawConfig): string {
+  const lines: string[] = []
+  const fonts = generateFontCSS(config)
+  if (fonts) lines.push(fonts)
+
+  const t = config.tokens
+  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('')
+  }
+
+  const flatSections: [string, string][] = [
+    ['spacing', 'Spacing'],
+    ['typography', 'Typography'],
+    ['radius', 'Border Radius'],
+    ['z-index', 'Z-Index'],
+    ['opacity', 'Opacity'],
+    ['button', 'Button'],
+    ['alert', 'Alert'],
+  ]
+  for (const [section, label] of flatSections) {
+    const tokens = (t as any)[section] as Record<string, string> | undefined
+    if (!tokens || !Object.keys(tokens).length) continue
+    lines.push(`/* ${label} */`)
+    lines.push(':root {')
+    lines.push(writeTokenBlock(tokens, '  '))
+    lines.push('}')
+    lines.push('')
+  }
+
+  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')
+}
+
+export function generateThemeCSS(config: RawConfig): string {
+  const m = config['theme-mappings']
+  if (!m) return ''
+
+  const lines: string[] = []
+  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')
+}
+
+export function generateFullCSS(config: RawConfig): string {
+  const parts: string[] = []
+  const tokens = generateTokensCSS(config)
+  if (tokens) parts.push(tokens)
+  const theme = generateThemeCSS(config)
+  if (theme) parts.push(theme)
+  return parts.join('\n')
+}

package/core/config/types.ts

@@ -0,0 +1,41 @@
+export interface FontFace {
+  family: string
+  weight: number
+  src: string
+  format: string
+}
+
+export interface NonsConfig {
+  theme: { preset: string }
+  brand: { name: string }
+  direction: { default: string }
+  locale: { default: string; supported: string[] }
+  font: {
+    fa?: { family: string }
+    en?: { family: string }
+  }
+}
+
+export interface RawConfig {
+  theme: { preset: string }
+  brand: { name: string }
+  direction: { default: string }
+  locale: { default: string; supported: string[] }
+  font: {
+    fa?: { family: string }
+    en?: { family: string }
+    faces?: FontFace[]
+  }
+  tokens: {
+    colors: { light: Record<string, string>; dark: Record<string, string> }
+    spacing: Record<string, string>
+    typography: Record<string, string>
+    radius: Record<string, string>
+    shadows: { light: Record<string, string>; dark: Record<string, string> }
+    'z-index': Record<string, string>
+    opacity: Record<string, string>
+    button: Record<string, string>
+    alert: Record<string, string>
+  }
+  'theme-mappings': { light: Record<string, string>; dark: Record<string, string> }
+}

package/core/config/validator.ts

@@ -0,0 +1,68 @@
+export interface ValidationResult {
+  valid: boolean
+  errors: string[]
+  warnings: string[]
+}
+
+export function validateConfig(config: unknown): ValidationResult {
+  const errors: string[] = []
+  const warnings: string[] = []
+
+  if (!config || typeof config !== 'object') {
+    errors.push('Config must be a non-null object')
+    return { valid: false, errors, warnings }
+  }
+
+  const c = config as Record<string, unknown>
+
+  if (!c.theme || typeof c.theme !== 'object') {
+    errors.push('Missing or invalid "theme" section')
+  } else {
+    const theme = c.theme as Record<string, unknown>
+    if (!theme.preset || typeof theme.preset !== 'string') {
+      errors.push('theme.preset must be a non-empty string')
+    }
+  }
+
+  if (!c.brand || typeof c.brand !== 'object') {
+    errors.push('Missing or invalid "brand" section')
+  } else {
+    const brand = c.brand as Record<string, unknown>
+    if (!brand.name || typeof brand.name !== 'string') {
+      errors.push('brand.name must be a non-empty string')
+    }
+  }
+
+  if (!c.direction || typeof c.direction !== 'object') {
+    errors.push('Missing or invalid "direction" section')
+  } else {
+    const dir = c.direction as Record<string, unknown>
+    if (dir.default !== 'rtl' && dir.default !== 'ltr') {
+      errors.push('direction.default must be "rtl" or "ltr"')
+    }
+  }
+
+  if (!c.locale || typeof c.locale !== 'object') {
+    errors.push('Missing or invalid "locale" section')
+  } else {
+    const loc = c.locale as Record<string, unknown>
+    if (!loc.default || typeof loc.default !== 'string') {
+      errors.push('locale.default must be a non-empty string')
+    }
+    if (!Array.isArray(loc.supported) || (loc.supported as unknown[]).length === 0) {
+      errors.push('locale.supported must be a non-empty array')
+    } else if (typeof loc.default === 'string' && !(loc.supported as string[]).includes(loc.default)) {
+      warnings.push('locale.default is not in locale.supported')
+    }
+  }
+
+  if (!c.tokens || typeof c.tokens !== 'object') {
+    errors.push('Missing or invalid "tokens" section')
+  }
+
+  return {
+    valid: errors.length === 0,
+    errors,
+    warnings,
+  }
+}