@shohojdhara/atomix 0.3.3 → 0.3.4

package/src/lib/config/index.ts

@@ -0,0 +1,275 @@
+/**
+ * Atomix Configuration System
+ * 
+ * Tailwind-like configuration for customizing the Atomix Design System.
+ * 
+ * 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;
+    };
+}
+
+/**
+ * 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;
+    
+    /** 
+     * 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 loader functions
+export { loadAtomixConfig, resolveConfigPath } from './loader';
+
+export default AtomixConfig;

package/src/lib/config/loader.ts

@@ -0,0 +1,105 @@
+/**
+ * Atomix Config Loader
+ * 
+ * Helper functions to load atomix.config.ts from external projects.
+ * Similar to how Tailwind loads tailwind.config.js
+ */
+
+import type { AtomixConfig } from './index';
+
+/**
+ * Load Atomix configuration from project root
+ * 
+ * Attempts to load atomix.config.ts from the current working directory.
+ * Falls back to default config if file doesn't exist.
+ * 
+ * @param options - Loader options
+ * @returns Loaded configuration or default
+ * 
+ * @example
+ * ```typescript
+ * import { loadAtomixConfig } from '@shohojdhara/atomix/config';
+ * 
+ * const config = loadAtomixConfig();
+ * const theme = createThemeFromConfig(config);
+ * ```
+ */
+export function loadAtomixConfig(
+    options: {
+        /** Custom config path (default: 'atomix.config.ts') */
+        configPath?: string;
+        /** Whether to throw error if config not found (default: false) */
+        required?: boolean;
+    } = {}
+): AtomixConfig {
+    const { configPath = 'atomix.config.ts', required = false } = options;
+
+    // Default config
+    const defaultConfig: AtomixConfig = {
+        prefix: 'atomix',
+        theme: {
+            extend: {},
+        },
+    };
+
+    // In browser environments, config loading is not supported
+    if (typeof window !== 'undefined') {
+        if (required) {
+            throw new Error('Config loading not supported in browser environment');
+        }
+        return defaultConfig;
+    }
+
+    // Try to load config file
+    try {
+        // Use dynamic import for ESM compatibility
+        const configModule = require(configPath);
+        const config = configModule.default || configModule;
+        
+        // Validate it's an AtomixConfig
+        if (config && typeof config === 'object') {
+            return config as AtomixConfig;
+        }
+        
+        throw new Error('Invalid config format');
+    } catch (error: any) {
+        if (required) {
+            throw new Error(`Failed to load config from ${configPath}: ${error.message}`);
+        }
+        
+        // Return default config if not required
+        return defaultConfig;
+    }
+}
+
+/**
+ * Resolve config path
+ * 
+ * Finds atomix.config.ts in the project, checking common locations.
+ */
+export function resolveConfigPath(): string | null {
+    if (typeof process === 'undefined' || !process.cwd) {
+        return null;
+    }
+
+    const fs = require('fs');
+    const path = require('path');
+    
+    const cwd = process.cwd();
+    const possiblePaths = [
+        path.join(cwd, 'atomix.config.ts'),
+        path.join(cwd, 'atomix.config.js'),
+        path.join(cwd, 'atomix.config.mjs'),
+    ];
+
+    for (const configPath of possiblePaths) {
+        if (fs.existsSync(configPath)) {
+            return configPath;
+        }
+    }
+
+    return null;
+}
+
+export default loadAtomixConfig;
+

package/src/lib/index.ts

@@ -23,3 +23,4 @@ export * from './utils/componentUtils';
 export * from './theme';
 export * from './patterns';
 export * from './hooks';
+export * from './config';

package/src/lib/theme/composeTheme.ts

@@ -185,7 +185,6 @@ export function createThemeVariants(baseTheme: ThemeOptions): {
             ...baseTheme.palette,
             background: {
                 default: '#121212',
-                paper: '#1E1E1E',
                 subtle: '#2A2A2A',
                 ...baseTheme.palette?.background,
             },
@@ -304,7 +303,6 @@ export function createThemePreset(
                 secondary: { main: '#FFFFFF' },
                 background: {
                     default: '#FFFFFF',
-                    paper: '#F5F5F5',
                     subtle: '#FAFAFA',
                 },
             },
@@ -319,7 +317,6 @@ export function createThemePreset(
                 secondary: { main: '#FF5733' },
                 background: {
                     default: '#FAFAFA',
-                    paper: '#FFFFFF',
                     subtle: '#F5F5F5',
                 },
             },
@@ -334,7 +331,6 @@ export function createThemePreset(
                 secondary: { main: '#DC004E' },
                 background: {
                     default: '#FFFFFF',
-                    paper: '#F5F5F5',
                     subtle: '#EEEEEE',
                 },
             },
@@ -349,7 +345,6 @@ export function createThemePreset(
                 secondary: { main: '#4ECDC4' },
                 background: {
                     default: '#FFF8F0',
-                    paper: '#FFFFFF',
                     subtle: '#FFF0E0',
                 },
             },

package/src/lib/theme/config/index.ts

@@ -11,7 +11,7 @@ export type {
   LoadedThemeConfig,
   ConfigValidationResult,
   ThemeMetadata,
-  ThemeConfig,
+  AtomixConfig,
   ThemeDefinition,
   CSSThemeDefinition,
   JSThemeDefinition,

package/src/lib/theme/config/loader.ts

@@ -13,7 +13,9 @@ import { validateConfig } from './validator';
 import { ThemeError, ThemeErrorCode, getLogger } from '../errors';
 import {
   DEFAULT_CONFIG_PATH,
+  DEFAULT_ATOMIX_CONFIG_PATH,
   DEFAULT_CONFIG_RELATIVE_PATH,
+  DEFAULT_LEGACY_CONFIG_RELATIVE_PATH,
   DEFAULT_BASE_PATH,
   DEFAULT_STORAGE_KEY,
   DEFAULT_DATA_ATTRIBUTE,
@@ -50,7 +52,7 @@ export function loadThemeConfig(
   options: ConfigLoaderOptions = {}
 ): LoadedThemeConfig {
   const {
-    configPath = DEFAULT_CONFIG_PATH,
+    configPath = DEFAULT_ATOMIX_CONFIG_PATH,
     validate = true,
     env = typeof process !== 'undefined' && process.env ? (process.env.NODE_ENV === 'production' ? 'production' : 'development') : 'development',
   } = options;
@@ -62,67 +64,99 @@ export function loadThemeConfig(
 
   // Try to load config dynamically
   let config: LoadedThemeConfig;
-  
+
   try {
-    // In browser/Vite environment, we can't load theme.config.ts dynamically
-    // This is expected and we'll use the fallback config
+    // In browser/Vite environment, we can't load config dynamically
     if (typeof window !== 'undefined') {
       throw new Error('Theme config loading not supported in browser environment');
     }
-    
-    // In Node.js/bundler environment, try require (CommonJS) first
-    // Check if we're in a browser environment first
-    if (typeof window !== 'undefined' || typeof require === 'undefined') {
-      throw new Error('Theme config loading not supported in browser environment');
+
+    // In ESM environments, require might be undefined.
+    let nodeRequire: any;
+    try {
+      nodeRequire = require;
+    } catch {
+      // require is not defined
     }
-    
-    // Type for theme config module
-    interface ThemeConfigModule {
-      default?: LoadedThemeConfig;
+
+    if (!nodeRequire) {
+      throw new Error('Theme config loading not supported in this environment (require is undefined)');
+    }
+
+    // Type for config module
+    interface ConfigModule {
+      default?: any;
       [key: string]: unknown;
     }
-    
-    let themeConfigModule: ThemeConfigModule;
-    
-    // Try require (Node.js/CommonJS) - works in Node.js environments
+
+    let configModule: ConfigModule;
+
+    // Try require (Node.js/CommonJS)
     try {
-      // Try relative path first (for build tools)
+      // Try relative path first
       try {
-        themeConfigModule = require(DEFAULT_CONFIG_RELATIVE_PATH) as ThemeConfigModule;
+        configModule = nodeRequire(DEFAULT_CONFIG_RELATIVE_PATH) as ConfigModule;
       } catch {
-        // If relative path fails, try to resolve from process.cwd()
-        const path = require('path') as typeof import('path');
-        const fs = require('fs') as typeof import('fs');
-        const configFilePath = path.resolve(process.cwd(), configPath);
-        
-        // Check if file exists
-        if (fs.existsSync(configFilePath)) {
-          // Delete from cache to force reload
-          const resolvedPath = require.resolve(configFilePath);
-          if (require.cache && require.cache[resolvedPath]) {
-            delete require.cache[resolvedPath];
+        // Try fallback to legacy relative path
+        try {
+          configModule = nodeRequire(DEFAULT_LEGACY_CONFIG_RELATIVE_PATH) as ConfigModule;
+        } catch {
+          // If relative paths fail, try to resolve from process.cwd()
+          const path = nodeRequire('path') as typeof import('path');
+          const fs = nodeRequire('fs') as typeof import('fs');
+
+          let configFilePath = path.resolve(process.cwd(), configPath);
+
+          // Fallback if atomix.config.ts not found
+          if (!fs.existsSync(configFilePath) && configPath === DEFAULT_ATOMIX_CONFIG_PATH) {
+            configFilePath = path.resolve(process.cwd(), DEFAULT_CONFIG_PATH);
+          }
+
+          if (fs.existsSync(configFilePath)) {
+            const resolvedPath = nodeRequire.resolve(configFilePath);
+            if (nodeRequire.cache && nodeRequire.cache[resolvedPath]) {
+              delete nodeRequire.cache[resolvedPath];
+            }
+            configModule = nodeRequire(configFilePath) as ConfigModule;
+          } else {
+            throw new Error(`Config file not found: ${configFilePath}`);
           }
-          themeConfigModule = require(configFilePath) as ThemeConfigModule;
-        } else {
-          throw new Error(`Config file not found: ${configFilePath}`);
         }
       }
     } catch (requireError) {
-      // If require fails, throw to fall through to error handling
-      const errorMessage = requireError instanceof Error 
-        ? requireError.message 
+      const errorMessage = requireError instanceof Error
+        ? requireError.message
         : String(requireError);
       throw new ThemeError(
-        `Cannot load theme config: ${errorMessage}`,
+        `Cannot load config: ${errorMessage}`,
         ThemeErrorCode.CONFIG_LOAD_FAILED,
         { configPath, error: errorMessage }
       );
     }
-    
-    const rawConfig = (themeConfigModule.default || themeConfigModule) as LoadedThemeConfig;
+
+    const rawConfig = configModule.default || configModule;
+
+    // Handle new AtomixConfig structure vs legacy ThemeConfig
+    let processedConfig: any;
+    if (rawConfig.theme && (rawConfig.theme.themes || rawConfig.theme.tokens || rawConfig.theme.extend)) {
+      // New AtomixConfig structure
+      processedConfig = {
+        themes: rawConfig.theme.themes || {},
+        build: rawConfig.build || {},
+        runtime: rawConfig.runtime || {},
+        integration: rawConfig.integration || {},
+        dependencies: rawConfig.dependencies || {},
+        // Store tokens for generator
+        __tokens: rawConfig.theme.tokens,
+        __extend: rawConfig.theme.extend,
+      };
+    } else {
+      // Legacy ThemeConfig structure
+      processedConfig = { ...rawConfig };
+    }
 
     // Apply environment-specific overrides
-    const processedConfig = applyEnvOverrides(rawConfig, env);
+    processedConfig = applyEnvOverrides(processedConfig, env);
 
     // Validate if requested
     let validationResult: ConfigValidationResult | null = null;
@@ -143,7 +177,7 @@ export function loadThemeConfig(
       configPath,
       error: errorMessage,
     });
-    
+
     config = {
       themes: {},
       build: {

package/src/lib/theme/config/types.ts

@@ -5,14 +5,14 @@
  */
 
 import type {
-  ThemeConfig,
-  ThemeDefinition,
-  CSSThemeDefinition,
-  JSThemeDefinition,
+  AtomixConfig,
   BuildConfig,
   RuntimeConfig,
   IntegrationConfig,
-} from '../../../../theme.config';
+  ThemeDefinition,
+  CSSThemeDefinition,
+  JSThemeDefinition,
+} from '../../config';
 
 /**
  * Configuration loader options
@@ -29,13 +29,27 @@ export interface ConfigLoaderOptions {
 /**
  * Loaded and validated theme configuration
  */
-export interface LoadedThemeConfig extends ThemeConfig {
+export interface LoadedThemeConfig {
+  /** Registered themes */
+  themes: Record<string, ThemeDefinition>;
+  /** Build configuration */
+  build: BuildConfig;
+  /** Runtime configuration */
+  runtime: RuntimeConfig;
+  /** Integration settings */
+  integration: IntegrationConfig;
+  /** Theme dependencies mapping */
+  dependencies: Record<string, string[]>;
   /** Whether config was validated */
   validated: boolean;
   /** Validation errors (if any) */
   errors?: string[];
   /** Validation warnings (if any) */
   warnings?: string[];
+  /** Internal tokens (for generator) */
+  __tokens?: any;
+  /** Internal extensions (for generator) */
+  __extend?: any;
 }
 
 /**
@@ -88,7 +102,7 @@ export interface ConfigValidationResult {
 }
 
 export type {
-  ThemeConfig,
+  AtomixConfig,
   ThemeDefinition,
   CSSThemeDefinition,
   JSThemeDefinition,

package/src/lib/theme/config/validator.ts

@@ -5,7 +5,7 @@
  */
 
 import type {
-  ThemeConfig,
+  AtomixConfig,
   ThemeDefinition,
   CSSThemeDefinition,
   JSThemeDefinition,

package/src/lib/theme/constants.ts

@@ -54,14 +54,24 @@ export const CSS_EXTENSIONS = {
 } as const;
 
 /**
- * Default config file path
+ * Default Atomix config file path
+ */
+export const DEFAULT_ATOMIX_CONFIG_PATH = 'atomix.config.ts';
+
+/**
+ * Default config file path (legacy)
  */
 export const DEFAULT_CONFIG_PATH = 'theme.config.ts';
 
 /**
  * Default config file path (relative)
  */
-export const DEFAULT_CONFIG_RELATIVE_PATH = '../../../../theme.config';
+export const DEFAULT_CONFIG_RELATIVE_PATH = '../../../../atomix.config';
+
+/**
+ * Default legacy config file path (relative)
+ */
+export const DEFAULT_LEGACY_CONFIG_RELATIVE_PATH = '../../../../theme.config';
 
 /**
  * Validation thresholds