@shohojdhara/atomix 0.5.2 → 0.5.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shohojdhara/atomix",
-  "version": "0.5.2",
+  "version": "0.5.5",
   "description": "Atomix Design System - A modern component library for web applications",
   "type": "module",
   "sideEffects": [

package/scripts/cli/internal/config-loader.js

@@ -1,6 +1,6 @@
 /**
  * Atomix CLI Configuration Loader
- * Supports loading atomix.config.ts and atomix.config.js
+ * Supports loading atomix.config.ts, atomix.config.js and atomix.config.json
  */
 
 import { existsSync } from 'fs';
@@ -9,7 +9,7 @@ import { pathToFileURL } from 'url';
 import { logger } from '../utils/logger.js';
 import { hookManager } from './hooks.js';
 
-export class ConfigLoader {
+class ConfigLoader {
   constructor() {
     this.config = null;
     this.configPath = null;
@@ -23,7 +23,11 @@ export class ConfigLoader {
   async load(projectRoot = process.cwd()) {
     if (this.config) return this.config;
 
-    const configFiles = ['atomix.config.ts', 'atomix.config.js'];
+    const configFiles = [
+      'atomix.config.ts',
+      'atomix.config.js', 
+      'atomix.config.json'
+    ];
     let foundFile = null;
 
     for (const file of configFiles) {
@@ -43,23 +47,29 @@ export class ConfigLoader {
     this.configPath = foundFile;
 
     try {
-      // If it's a TypeScript file, we need to register ts-node
-      if (foundFile.endsWith('.ts')) {
-        // Dynamic import to avoid issues in pure JS environments
-        const { register } = await import('ts-node');
-        register({
-          transpileOnly: true,
-          esm: true,
-          compilerOptions: {
-            module: 'ESNext',
-            target: 'ESNext'
-          }
-        });
-      }
+      // Handle JSON files differently from JS/TS files
+      if (foundFile.endsWith('.json')) {
+        const fs = await import('fs');
+        this.config = JSON.parse(fs.readFileSync(foundFile, 'utf8'));
+      } else {
+        // If it's a TypeScript file, we need to register ts-node
+        if (foundFile.endsWith('.ts')) {
+          // Dynamic import to avoid issues in pure JS environments
+          const { register } = await import('ts-node');
+          register({
+            transpileOnly: true,
+            esm: true,
+            compilerOptions: {
+              module: 'ESNext',
+              target: 'ESNext'
+            }
+          });
+        }
 
-      // Use dynamic import for ESM compatibility
-      const configModule = await import(pathToFileURL(foundFile).href);
-      this.config = configModule.default || configModule;
+        // Use dynamic import for ESM compatibility
+        const configModule = await import(pathToFileURL(foundFile).href);
+        this.config = configModule.default || configModule;
+      }
 
       logger.debug(`Loaded configuration from ${foundFile}`);
 
@@ -159,4 +169,4 @@ export class ConfigLoader {
   }
 }
 
-export const configLoader = new ConfigLoader();
+export const configLoader = new ConfigLoader();

package/src/lib/config/index.ts

@@ -5,367 +5,43 @@
  *
  * External developers can create `atomix.config.ts` in their project root
  * to customize design tokens, similar to Tailwind's tailwind.config.js
- *
- * @example
- * ```typescript
- * // atomix.config.ts (in your project)
- * import { defineConfig } from '@shohojdhara/atomix/config';
- *
- * export default defineConfig({
- *   theme: {
- *     extend: {
- *       colors: {
- *         primary: { main: '#7AFFD7' },
- *       },
- *     },
- *   },
- * });
- * ```
- */
-
-import type { Theme } from '../theme/types';
-
-/**
- * Color Scale (1-10)
- */
-export interface ColorScale {
-  1?: string;
-  2?: string;
-  3?: string;
-  4?: string;
-  5?: string;
-  6?: string;
-  7?: string;
-  8?: string;
-  9?: string;
-  10?: string;
-  [key: string]: string | undefined;
-}
-
-/**
- * Palette Color Options
- */
-export interface PaletteColorOptions {
-  main: string;
-  light?: string;
-  dark?: string;
-  contrastText?: string;
-}
-
-/**
- * Design Tokens Schema (Tailwind-like)
- */
-export interface ThemeTokens {
-  /** Color palette */
-  colors?: Record<string, string | PaletteColorOptions | ColorScale | Record<string, string>>;
-  /** Spacing scale */
-  spacing?: Record<string, string>;
-  /** Border radius scale */
-  borderRadius?: Record<string, string>;
-  /** Typography scale and settings */
-  typography?: {
-    fontFamilies?: Record<string, string>;
-    fontSizes?: Record<string, string>;
-    fontWeights?: Record<string, string | number>;
-    lineHeights?: Record<string, string | number>;
-    letterSpacings?: Record<string, string>;
-  };
-  /** Shadow scale */
-  shadows?: Record<string, string>;
-  /** Z-index scale */
-  zIndex?: Record<string, string | number>;
-  /** Breakpoints scale */
-  breakpoints?: Record<string, string | number>;
-  /** Transitions settings */
-  transitions?: {
-    durations?: Record<string, string>;
-    easings?: Record<string, string>;
-  };
-}
-
-/**
- * CSS Theme Definition
- */
-export interface CSSThemeDefinition {
-  type: 'css';
-  name: string;
-  class?: string;
-  description?: string;
-  author?: string;
-  version?: string;
-  tags?: string[];
-  supportsDarkMode?: boolean;
-  status?: 'stable' | 'beta' | 'experimental' | 'deprecated';
-  a11y?: {
-    contrastTarget?: number;
-    modes?: string[];
-  };
-  color?: string;
-  features?: string[];
-  dependencies?: string[];
-  cssPath?: string;
-}
-
-/**
- * JavaScript Theme Definition
- */
-export interface JSThemeDefinition {
-  type: 'js';
-  name: string;
-  class?: string;
-  description?: string;
-  author?: string;
-  version?: string;
-  tags?: string[];
-  supportsDarkMode?: boolean;
-  status?: 'stable' | 'beta' | 'experimental' | 'deprecated';
-  a11y?: {
-    contrastTarget?: number;
-    modes?: string[];
-  };
-  color?: string;
-  features?: string[];
-  dependencies?: string[];
-  createTheme: () => Theme;
-}
-
-/**
- * Theme Definition (CSS or JS)
- */
-export type ThemeDefinition = CSSThemeDefinition | JSThemeDefinition;
-
-/**
- * Build configuration (migrated from theme.config.ts)
- */
-export interface BuildConfig {
-  output?: {
-    directory?: string;
-    formats?: {
-      expanded?: string;
-      compressed?: string;
-    };
-  };
-  sass?: {
-    style?: 'expanded' | 'compressed';
-    sourceMap?: boolean;
-    loadPaths?: string[];
-  };
-}
-
-/**
- * Runtime configuration (migrated from theme.config.ts)
- */
-export interface RuntimeConfig {
-  basePath?: string;
-  cdnPath?: string | null;
-  preload?: string[];
-  lazy?: boolean;
-  defaultTheme?: string;
-  storageKey?: string;
-  dataAttribute?: string;
-  enablePersistence?: boolean;
-  useMinified?: boolean;
-}
-
-/**
- * Integration settings (migrated from theme.config.ts)
- */
-export interface IntegrationConfig {
-  cssVariables?: Record<string, string>;
-  classNames?: {
-    theme?: string;
-    colorMode?: string;
-  };
-}
-
-/**
- * Plugin Configuration
- */
-export interface PluginConfig {
-  name: string;
-  options?: Record<string, any>;
-}
-
-/**
- * Token Provider Configuration
- */
-export interface TokenProviderConfig {
-  type: 'figma' | 'style-dictionary' | 'w3c' | string;
-  options?: Record<string, any>;
-}
-
-/**
- * Token Engine Configuration
- */
-export interface TokenEngineConfig {
-  providers?: Record<string, TokenProviderConfig>;
-  sync?: {
-    pull?: boolean;
-    push?: boolean;
-    onBuild?: boolean;
-  };
-}
-
-/**
- * CLI component generator defaults (merged before CLI flags; flags win).
- */
-export interface GeneratorConfig {
-  /** Default output directory for generated components */
-  outputPath?: string;
-  /** Override detected framework */
-  framework?: 'react' | 'next' | 'vanilla';
-  /** Per-feature defaults (CLI --no-* flags override) */
-  features?: {
-    storybook?: boolean;
-    hook?: boolean;
-    styles?: boolean;
-    tests?: boolean;
-  };
-  /** Composable hooks directory relative to project root */
-  hookOutputDir?: string;
-  /** Story file: side-effect import for global Atomix styles */
-  storybookCssImport?: string;
-  /** Barrel file strategy for new components */
-  barrel?: 'index' | 'none';
-}
-
-/**
- * Atomix Configuration Interface
- *
- * Tailwind-like configuration for external developers.
- * Focus on theme customization - build/runtime configs are internal only.
  */
-export interface AtomixConfig {
-  /**
-   * CSS variable prefix (default: 'atomix')
-   *
-   * Change this to customize all CSS variable names.
-   * Example: prefix: 'myapp' → --myapp-primary instead of --atomix-primary
-   */
-  prefix?: string;
-
-  /**
-   * Plugins to extend CLI functionality
-   */
-  plugins?: (string | PluginConfig)[];
-
-  /**
-   * Universal Token Engine configuration
-   */
-  tokenEngine?: TokenEngineConfig;
 
-  /**
-   * AI-Assisted Scaffolding configuration
-   */
-  ai?: {
-    /** AI provider (default: 'openai') */
-    provider?: 'openai' | 'anthropic';
-    /** LLM model to use */
-    model?: string;
-    /** API key for the provider */
-    apiKey?: string;
-    /** Temperature for AI creativity (0.0-1.0, default: 0.7) */
-    temperature?: number;
-    /** Maximum tokens per AI response (default: 4000) */
-    maxTokens?: number;
-    /** Rate limiting configuration */
-    rateLimit?: {
-      /** Maximum requests allowed */
-      requests: number;
-      /** Time window in milliseconds */
-      windowMs: number;
-    };
-  };
-
-  /**
-   * Performance & Telemetry (Phase 4)
-   */
-  telemetry?: {
-    /** Enable local telemetry logging (default: false) */
-    enabled?: boolean;
-    /** Output path for telemetry logs (default: '.atomix/telemetry.json') */
-    path?: string;
-    /** Anonymize telemetry data (default: true) */
-    anonymize?: boolean;
-  };
-
-  /**
-   * `atomix generate` defaults (CLI overrides these)
-   */
-  generator?: GeneratorConfig;
-
-  /**
-   * Theme customization (Tailwind-like)
-   *
-   * Use `extend` to add or override design tokens.
-   * Use `tokens` to completely replace the default token system (advanced).
-   */
-  theme?: {
-    /**
-     * Extend the default design tokens
-     *
-     * This is the recommended way to customize Atomix.
-     * Your values will override or extend the base tokens.
-     */
-    extend?: ThemeTokens;
-
-    /**
-     * Override the default tokens entirely (advanced)
-     *
-     * Use with caution - this replaces the entire token system.
-     * Most users should use `extend` instead.
-     */
-    tokens?: ThemeTokens;
-
-    /**
-     * Register custom themes (optional)
-     *
-     * Define CSS or JavaScript themes that can be loaded dynamically.
-     */
-    themes?: Record<string, ThemeDefinition>;
-  };
-
-  // Internal configurations (for library development only)
-  // These are not needed for external developers
-  /** @internal Build configuration (internal use only) */
-  build?: BuildConfig;
-  /** @internal Runtime configuration (internal use only) */
-  runtime?: RuntimeConfig;
-  /** @internal Integration settings (internal use only) */
-  integration?: IntegrationConfig;
-  /** @internal Theme dependencies mapping (internal use only) */
-  dependencies?: Record<string, string[]>;
-}
-
-/**
- * Helper function to define Atomix configuration with type safety
- *
- * @param config - Atomix configuration object
- * @returns The configuration object
- */
-/**
- * Helper function to define Atomix configuration with type safety
- *
- * Similar to Tailwind's defineConfig, provides autocomplete and type checking.
- *
- * @param config - Atomix configuration object
- * @returns The configuration object
- *
- * @example
- * ```typescript
- * import { defineConfig } from '@shohojdhara/atomix/config';
- *
- * export default defineConfig({
- *   theme: {
- *     extend: {
- *       colors: {
- *         primary: { main: '#7AFFD7' },
- *       },
- *     },
- *   },
- * });
- * ```
- */
-export function defineConfig(config: AtomixConfig): AtomixConfig {
-  return config;
-}
+export { 
+  defineConfig,
+  type AtomixConfig,
+  type ThemeTokens,
+  type ThemeDefinition,
+  type CSSThemeDefinition,
+  type JSThemeDefinition,
+  type ColorScale,
+  type PaletteColorOptions,
+  type InteractiveEffectsConfig,
+  type OptimizationConfig,
+  type VisualPolishConfig,
+  type BuildConfig,
+  type RuntimeConfig,
+  type IntegrationConfig,
+  type PluginConfig,
+  type TokenProviderConfig,
+  type TokenEngineConfig,
+  type GeneratorConfig,
+  type DesignTokenCategory,
+  type DesignTokenValue
+} from './types';
+
+// Export the config loader functions
+export { 
+  loadAtomixConfig, 
+  resolveConfigPath 
+} from './loader';
+
+// Export the validator
+export { 
+  validateConfiguration, 
+  printConfigReport,
+  type ValidationResult 
+} from './validator';
+
+// Export convenience functions from the public API
+export { loadConfig, validateConfig } from './public-api';