@shohojdhara/atomix 0.3.9 → 0.3.11

package/package.json

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

package/src/lib/config/index.ts

@@ -192,7 +192,7 @@ export interface AtomixConfig {
      * Example: prefix: 'myapp' → --myapp-primary instead of --atomix-primary
      */
     prefix?: string;
-    
+
     /** 
      * Theme customization (Tailwind-like)
      * 
@@ -207,7 +207,7 @@ export interface AtomixConfig {
          * Your values will override or extend the base tokens.
          */
         extend?: ThemeTokens;
-        
+
         /** 
          * Override the default tokens entirely (advanced)
          * 
@@ -215,7 +215,7 @@ export interface AtomixConfig {
          * Most users should use `extend` instead.
          */
         tokens?: ThemeTokens;
-        
+
         /** 
          * Register custom themes (optional)
          * 
@@ -223,7 +223,7 @@ export interface AtomixConfig {
          */
         themes?: Record<string, ThemeDefinition>;
     };
-    
+
     // Internal configurations (for library development only)
     // These are not needed for external developers
     /** @internal Build configuration (internal use only) */
@@ -270,6 +270,6 @@ export function defineConfig(config: AtomixConfig): AtomixConfig {
 }
 
 // Export loader functions
-export { loadAtomixConfig, resolveConfigPath } from './loader';
+// Loader functions removed to prevent bundling Node.js modules in browser
 
 export default AtomixConfig;

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

@@ -4,7 +4,7 @@
  * Exports for theme configuration loading and validation
  */
 
-export { loadThemeConfig, clearConfigCache, getCachedConfig, reloadThemeConfig } from './loader';
+// Loader exports removed
 export { validateConfig } from './validator';
 export type {
   ConfigLoaderOptions,

package/src/lib/theme/core/createTheme.ts

@@ -66,47 +66,18 @@ export function createTheme(
 
   // Determine tokens based on input
   let tokens: Partial<DesignTokens>;
-  
+
   if (!input) {
-    // Check if we're in a browser environment
-    if (typeof window !== 'undefined') {
-      throw new ThemeError(
-        'No input provided and config loading is not available in browser environment. Please provide tokens explicitly or use Node.js/SSR environment.',
-        ThemeErrorCode.CONFIG_LOAD_FAILED,
-        { environment: 'browser' }
-      );
-    }
-    
-    // Load from config when no input provided
-    let loadThemeFromConfigSync: any;
-    let loadAtomixConfig: any;
-    
-    try {
-      const configLoaderModule = require('../config/configLoader');
-      const loaderModule = require('../../config/loader');
-      
-      loadThemeFromConfigSync = configLoaderModule.loadThemeFromConfigSync;
-      loadAtomixConfig = loaderModule.loadAtomixConfig;
-      
-      tokens = loadThemeFromConfigSync();
-      
-      // Get prefix from config if needed
-      if (!options?.prefix) {
-        try {
-          const config = loadAtomixConfig({ configPath: 'atomix.config.ts', required: false });
-          options = { ...options, prefix: config?.prefix || 'atomix' };
-        } catch (error) {
-          // If config loading fails, use default prefix
-          options = { ...options, prefix: 'atomix' };
-        }
-      }
-    } catch (error) {
-      throw new ThemeError(
-        'No input provided and config loading is not available in this environment. Please provide tokens explicitly.',
-        ThemeErrorCode.CONFIG_LOAD_FAILED,
-        { error: error instanceof Error ? error.message : String(error) }
-      );
+    // Auto-loading config from file system is removed for browser compatibility.
+    // If no input is provided, we return an empty theme (using defaults only) or user must provide tokens.
+    // This allows createTheme to be isomorphic.
+
+    // Warn in development if no input provided
+    if (process.env.NODE_ENV !== 'production' && typeof window !== 'undefined') {
+      console.warn('Atomix: createTheme() called without tokens. Using default tokens only.');
     }
+
+    tokens = {};
   } else {
     // Validate input tokens structure
     if (typeof input !== 'object' || input === null || Array.isArray(input)) {
@@ -116,7 +87,7 @@ export function createTheme(
         { inputType: typeof input }
       );
     }
-    
+
     // Use DesignTokens directly
     tokens = input;
   }

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

@@ -18,8 +18,5 @@ export {
 
 export { generateCSSVariables as generateCSSVariablesFromTheme } from './generateCSSVariables';
 
-export {
-  saveCSSFile,
-  saveCSSFileSync,
-} from './cssFile';
+
 

package/src/lib/theme/index.ts

@@ -29,7 +29,7 @@ export { createTheme } from './core';
 export { deepMerge, mergeTheme, extendTheme } from './core';
 
 // Simplified Theme Registry
-export { 
+export {
   createThemeRegistry,
   registerTheme,
   unregisterTheme,
@@ -46,7 +46,7 @@ export {
 // ============================================================================
 
 import { injectCSS, removeCSS, isCSSInjected } from './utils/injectCSS';
-import { saveCSSFile, saveCSSFileSync } from './generators/cssFile';
+// File saving utilities removed to prevent bundling Node.js modules in browser
 
 /**
  * Inject theme CSS into DOM
@@ -62,12 +62,7 @@ export function removeTheme(id: string = 'atomix-theme'): void {
   removeCSS(id);
 }
 
-/**
- * Save theme to CSS file
- */
-export async function saveTheme(css: string, filePath: string): Promise<void> {
-  await saveCSSFile(css, filePath);
-}
+
 
 // ============================================================================
 // Token Utilities
@@ -113,14 +108,7 @@ export {
 export { injectCSS, removeCSS, isCSSInjected } from './utils/injectCSS';
 
 
-// ============================================================================
-// Config Loader
-// ============================================================================
-
-export {
-  loadThemeFromConfig,
-  loadThemeFromConfigSync,
-} from './config/configLoader';
+// Config loader removed to prevent bundling Node.js modules in browser
 
 // ============================================================================
 // React Integration

package/src/lib/theme/runtime/ThemeProvider.tsx

@@ -86,22 +86,7 @@ export const ThemeProvider: React.FC<ThemeProviderProps> = ({
       return defaultTheme;
     }
 
-    // Try to load from atomix.config.ts as fallback, but only in Node.js/SSR environments
-    if (typeof window === 'undefined') {
-      try {
-        // Dynamically import the config loader to avoid bundling issues in browser
-        // eslint-disable-next-line @typescript-eslint/no-var-requires
-        const { loadThemeFromConfigSync } = require('../config/configLoader');
-
-        const configTokens = loadThemeFromConfigSync();
-        if (configTokens && Object.keys(configTokens).length > 0) {
-          // For simplicity, we'll treat config tokens as a special theme name
-          return 'config-theme';
-        }
-      } catch (error) {
-        // Failed to load theme from config, using default
-      }
-    }
+
 
     // Default fallback
     return 'default';

package/src/lib/config/loader.ts

@@ -1,147 +0,0 @@
-/**
- * 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';
- * import { createTheme } from '@shohojdhara/atomix/theme';
- * 
- * const config = loadAtomixConfig();
- * const theme = createTheme(config.theme?.tokens || {});
- * ```
- */
-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('loadAtomixConfig: Not available in browser environment. Config loading requires Node.js/SSR 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.
- * Returns null in browser environments where file system access is not available.
- * 
- * This function is designed to work in Node.js environments only.
- * In browser builds, it will always return null without attempting to access Node.js modules.
- * 
- * @internal This function uses Node.js modules and should not be called in browser environments.
- */
-export function resolveConfigPath(): string | null {
-    // Early return for browser environments - prevents any Node.js module access
-    // This check happens before any require() calls, preventing bundlers from analyzing them
-    if (typeof window !== 'undefined' || typeof process === 'undefined' || !process.cwd) {
-        return null;
-    }
-
-    // Only attempt to load Node.js modules in Node.js runtime
-    // Use a lazy-loading pattern that prevents static analysis by bundlers
-    try {
-        // Create a function that only executes in Node.js runtime
-        // Use string-based module names to prevent static analysis by bundlers
-        const loadNodeModules = () => {
-            // These requires are only executed at runtime in Node.js environments
-            // They are marked as external in Rollup config and should not be bundled
-            // Using string concatenation and computed property access to prevent static analysis
-            if (typeof require === 'undefined') {
-                return null;
-            }
-            
-            // Use a try-catch wrapper to safely access require
-            try {
-                // Build module names dynamically to prevent static analysis
-                const moduleNames: [string, string] = ['f' + 's', 'p' + 'a' + 't' + 'h'];
-                // eslint-disable-next-line @typescript-eslint/no-require-imports, @typescript-eslint/no-var-requires
-                const fs = require(moduleNames[0]);
-                // eslint-disable-next-line @typescript-eslint/no-require-imports, @typescript-eslint/no-var-requires
-                const path = require(moduleNames[1]);
-                return { fs, path };
-            } catch {
-                return null;
-            }
-        };
-
-        const modules = loadNodeModules();
-        if (!modules) {
-            return null;
-        }
-
-        const { fs, path } = modules;
-        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;
-            }
-        }
-    } catch (error) {
-        // Silently fail in browser environments or when modules are unavailable
-        return null;
-    }
-
-    return null;
-}
-
-export default loadAtomixConfig;

package/src/lib/theme/config/__tests__/configLoader.test.ts

@@ -1,207 +0,0 @@
-/**
- * Config Loader Tests
- * 
- * Tests for automatic config loading from atomix.config.ts
- */
-
-import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
-import { loadThemeFromConfigSync, loadThemeFromConfig } from '../configLoader';
-import { createTheme } from '../../core/createTheme';
-import type { DesignTokens } from '../../tokens/tokens';
-
-describe('Config Loader', () => {
-  beforeEach(() => {
-    // Clear any cached configs
-    vi.clearAllMocks();
-  });
-
-  afterEach(() => {
-    vi.restoreAllMocks();
-  });
-
-  describe('loadThemeFromConfigSync', () => {
-    it('should return empty object in browser environment', () => {
-      // Mock window object
-      const originalWindow = global.window;
-      // @ts-expect-error - intentionally setting window for test
-      global.window = {};
-
-      const result = loadThemeFromConfigSync();
-      expect(result).toEqual({});
-
-      // Restore
-      global.window = originalWindow;
-    });
-
-    it('should handle missing config file gracefully', () => {
-      // In Node.js environment, if config doesn't exist, should return empty object
-      const result = loadThemeFromConfigSync('non-existent-config.ts');
-      expect(result).toEqual({});
-    });
-  });
-
-  describe('loadThemeFromConfig', () => {
-    it('should return empty object in browser environment', async () => {
-      // Mock window object
-      const originalWindow = global.window;
-      // @ts-expect-error - intentionally setting window for test
-      global.window = {};
-
-      const result = await loadThemeFromConfig();
-      expect(result).toEqual({});
-
-      // Restore
-      global.window = originalWindow;
-    });
-
-    it('should handle missing config file gracefully', async () => {
-      const result = await loadThemeFromConfig('non-existent-config.ts');
-      expect(result).toEqual({});
-    });
-  });
-
-  describe('Token Flattening', () => {
-    it('should correctly map simple color strings', () => {
-      // This tests the internal flattenConfigTokens function indirectly
-      // by checking that createTheme can handle config structure
-      const mockConfig = {
-        theme: {
-          extend: {
-            colors: {
-              primary: '#7AFFD7',
-              secondary: '#FF5733',
-            },
-          },
-        },
-      };
-
-      // Since we can't directly test the private function,
-      // we test through createTheme which uses it
-      // This is an integration test
-      expect(typeof createTheme).toBe('function');
-    });
-
-    it('should correctly map palette color objects', () => {
-      const mockConfig = {
-        theme: {
-          extend: {
-            colors: {
-              primary: {
-                main: '#7AFFD7',
-                light: '#B3FFE9',
-                dark: '#00E6C3',
-              },
-            },
-          },
-        },
-      };
-
-      // Integration test through createTheme
-      expect(typeof createTheme).toBe('function');
-    });
-
-    it('should correctly map color scales', () => {
-      const mockConfig = {
-        theme: {
-          extend: {
-            colors: {
-              primary: {
-                1: '#f0f9ff',
-                6: '#3b82f6',
-                10: '#1e3a8a',
-              },
-            },
-          },
-        },
-      };
-
-      // Integration test
-      expect(typeof createTheme).toBe('function');
-    });
-
-    it('should correctly map spacing tokens', () => {
-      const mockConfig = {
-        theme: {
-          extend: {
-            spacing: {
-              '4': '1rem',
-              '8': '2rem',
-            },
-          },
-        },
-      };
-
-      // Integration test
-      expect(typeof createTheme).toBe('function');
-    });
-
-    it('should correctly map typography tokens', () => {
-      const mockConfig = {
-        theme: {
-          extend: {
-            typography: {
-              fontFamilies: {
-                sans: ['Inter', 'sans-serif'],
-              },
-              fontSizes: {
-                '2xl': '1.5rem',
-              },
-            },
-          },
-        },
-      };
-
-      // Integration test
-      expect(typeof createTheme).toBe('function');
-    });
-  });
-});
-
-describe('createTheme with Config Loading', () => {
-  it('should work without input (will use defaults if config not available)', () => {
-    // createTheme() should work even if config is not available
-    // It will fall back to default tokens
-    const css = createTheme();
-    
-    expect(typeof css).toBe('string');
-    expect(css).toContain(':root');
-    expect(css).toContain('--atomix');
-  });
-
-  it('should accept DesignTokens input', () => {
-    const tokens: Partial<DesignTokens> = {
-      'primary': '#7AFFD7',
-      'spacing-4': '1rem',
-    };
-
-    const css = createTheme(tokens);
-    
-    expect(typeof css).toBe('string');
-    expect(css).toContain('--atomix-primary');
-    expect(css).toContain('#7AFFD7');
-  });
-
-  it('should respect prefix option', () => {
-    const tokens: Partial<DesignTokens> = {
-      'primary': '#7AFFD7',
-    };
-
-    const css = createTheme(tokens, { prefix: 'myapp' });
-    
-    expect(css).toContain('--myapp-primary');
-    expect(css).not.toContain('--atomix-primary');
-  });
-
-  it('should respect selector option', () => {
-    const tokens: Partial<DesignTokens> = {
-      'primary': '#7AFFD7',
-    };
-
-    const css = createTheme(tokens, { selector: '[data-theme="dark"]' });
-    
-    expect(css).toContain('[data-theme="dark"]');
-    expect(css).not.toContain(':root');
-  });
-});
-
-

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

@@ -1,113 +0,0 @@
-
-/**
- * Theme Configuration Loader
- *
- * Provides functions to load theme configurations from atomix.config.ts
- * Includes both sync and async versions, with automatic fallbacks
- */
-
-import type { DesignTokens } from '../tokens/tokens';
-import { createTokens } from '../tokens/tokens';
-import { loadAtomixConfig as loadAtomixConfigStatic } from '../../config/loader';
-
-/**
- * Load theme from config file (synchronous, Node.js only)
- * @param configPath - Path to config file (default: atomix.config.ts)
- * @returns DesignTokens from theme configuration
- * @throws Error if config loading is not available in browser environment
- */
-export function loadThemeFromConfigSync(options?: { configPath?: string; required?: boolean }): DesignTokens {
-  // Check if we're in a browser environment
-  if (typeof window !== 'undefined') {
-    throw new Error('loadThemeFromConfigSync: Not available in browser environment. Config loading requires Node.js/SSR environment.');
-  }
-
-  // Use static import - the function handles browser environment checks internally
-  let config;
-  
-  try {
-    config = loadAtomixConfigStatic({
-      configPath: options?.configPath || 'atomix.config.ts',
-      required: options?.required !== false,
-    });
-  } catch (error) {
-    if (options?.required !== false) {
-      throw new Error('Config loader module not available');
-    }
-    // Return empty tokens if config is not required
-    return createTokens({});
-  }
-
-  if (!config?.theme) {
-    return createTokens({});
-  }
-
-  // Extract tokens from config.theme structure
-  // config.theme can have: { extend?: ThemeTokens, tokens?: ThemeTokens, themes?: ... }
-  // We need to extract the actual DesignTokens (flat structure)
-  const themeConfig = config.theme;
-  
-  // Check if theme is directly a flat object (DesignTokens format)
-  // This handles the case where config.theme might be passed as DesignTokens directly
-  if (themeConfig && typeof themeConfig === 'object' && !('extend' in themeConfig) && !('tokens' in themeConfig) && !('themes' in themeConfig)) {
-    // It's likely already a flat DesignTokens object
-    return createTokens(themeConfig as Partial<DesignTokens>);
-  }
-  
-  // If theme has nested structure (extend/tokens/themes), we can't directly use it
-  // Return empty tokens - the theme system will use defaults
-  // TODO: Add proper conversion from ThemeTokens to DesignTokens if needed
-  return createTokens({});
-}
-
-/**
- * Load theme from config file (asynchronous)
- * @param configPath - Path to config file (default: atomix.config.ts)
- * @returns Promise resolving to DesignTokens from theme configuration
- */
-export async function loadThemeFromConfig(options?: { configPath?: string; required?: boolean }): Promise<DesignTokens> {
-  // Check if we're in a browser environment
-  if (typeof window !== 'undefined') {
-    throw new Error('loadThemeFromConfig: Not available in browser environment. Config loading requires Node.js/SSR environment.');
-  }
-
-  // Use static import with runtime check
-  // The function will handle browser environment checks internally
-  let config;
-  
-  try {
-    // loadAtomixConfig is synchronous, not async
-    config = loadAtomixConfigStatic({
-      configPath: options?.configPath || 'atomix.config.ts',
-      required: options?.required !== false,
-    });
-  } catch (error) {
-    if (options?.required !== false) {
-      throw new Error('Config loader module not available');
-    }
-    // Return empty tokens if config is not required
-    return createTokens({});
-  }
-
-  if (!config?.theme) {
-    return createTokens({});
-  }
-
-  // Extract tokens from config.theme structure
-  // config.theme can have: { extend?: ThemeTokens, tokens?: ThemeTokens, themes?: ... }
-  // We need to extract the actual DesignTokens (flat structure)
-  const themeConfig = config.theme;
-  
-  // Check if theme is directly a flat object (DesignTokens format)
-  // This handles the case where config.theme might be passed as DesignTokens directly
-  if (themeConfig && typeof themeConfig === 'object' && !('extend' in themeConfig) && !('tokens' in themeConfig) && !('themes' in themeConfig)) {
-    // It's likely already a flat DesignTokens object
-    return createTokens(themeConfig as Partial<DesignTokens>);
-  }
-  
-  // If theme has nested structure (extend/tokens/themes), we can't directly use it
-  // Return empty tokens - the theme system will use defaults
-  // TODO: Add proper conversion from ThemeTokens to DesignTokens if needed
-  return createTokens({});
-}
-