@shohojdhara/atomix 0.3.5 → 0.3.7

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

@@ -0,0 +1,95 @@
+
+/**
+ * Theme Configuration Loader
+ *
+ * Provides functions to load theme configurations from atomix.config.ts
+ * Includes both sync and async versions, with automatic fallbacks
+ */
+
+import type { Theme } from '../types';
+import type { DesignTokens } from '../tokens/tokens';
+import { createTokens } from '../tokens/tokens';
+import { themeToDesignTokens, createDesignTokensFromTheme } from '../adapters/themeAdapter';
+
+/**
+ * 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 dynamic import to load the config loader
+  // This allows bundlers to handle external dependencies properly
+  let loadAtomixConfig: any;
+  
+  try {
+    // eslint-disable-next-line @typescript-eslint/no-var-requires
+    const { loadAtomixConfig: loader } = require('../../config/loader');
+    loadAtomixConfig = loader;
+  } catch (error) {
+    if (options?.required !== false) {
+      throw new Error('Config loader module not available');
+    }
+    // Return empty tokens if config is not required
+    return createTokens({});
+  }
+
+  const config = loadAtomixConfig({
+    configPath: options?.configPath || 'atomix.config.ts',
+    required: options?.required !== false,
+  });
+
+  if (!config?.theme) {
+    return createTokens({});
+  }
+
+  if (isThemeObject(config.theme)) {
+    return createDesignTokensFromTheme(config.theme);
+  }
+
+  return createTokens(config.theme);
+}
+
+/**
+ * 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.');
+  }
+
+  // Dynamic import for config loader
+  const { loadAtomixConfig } = await import('../../config/loader');
+  
+  const config = await loadAtomixConfig({
+    configPath: options?.configPath || 'atomix.config.ts',
+    required: options?.required !== false,
+  });
+
+  if (!config?.theme) {
+    return createTokens({});
+  }
+
+  if (isThemeObject(config.theme)) {
+    return createDesignTokensFromTheme(config.theme);
+  }
+
+  return createTokens(config.theme);
+}
+
+/**
+ * Check if the provided object is a Theme object
+ * @param theme - Object to check
+ * @returns True if the object is a Theme object, false otherwise
+ */
+function isThemeObject(theme: any): theme is Theme {
+  return typeof theme === 'object' && theme !== null;
+}

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

@@ -1,7 +1,7 @@
 /**
  * Theme Configuration Loader
  * 
- * Loads and validates the theme configuration from theme.config.ts
+ * Loads and validates the theme configuration from atomix.config.ts
  */
 
 import type {
@@ -10,12 +10,9 @@ import type {
   ConfigValidationResult,
 } from './types';
 import { validateConfig } from './validator';
-import { ThemeError, ThemeErrorCode, getLogger } from '../errors';
+import { ThemeError, ThemeErrorCode, getLogger } from '../errors/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,
@@ -24,7 +21,7 @@ import {
   DEFAULT_BUILD_OUTPUT_DIR,
   DEFAULT_SASS_CONFIG,
   ENV_DEFAULTS,
-} from '../constants';
+} from '../constants/constants';
 
 /**
  * Cache for loaded configuration
@@ -37,7 +34,7 @@ let cachedConfig: LoadedThemeConfig | null = null;
 const logger = getLogger();
 
 /**
- * Load theme configuration from theme.config.ts
+ * Load theme configuration from atomix.config.ts
  * 
  * @param options - Loader options
  * @returns Loaded and validated theme configuration
@@ -92,36 +89,26 @@ export function loadThemeConfig(
     let configModule: ConfigModule;
 
     // Try require (Node.js/CommonJS)
+    // Use process.cwd() to resolve config path - avoids bundling issues with relative paths
     try {
-      // Try relative path first
-      try {
-        configModule = nodeRequire(DEFAULT_CONFIG_RELATIVE_PATH) as ConfigModule;
-      } catch {
-        // 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');
+      const path = nodeRequire('path') as typeof import('path');
+      const fs = nodeRequire('fs') as typeof import('fs');
 
-          let configFilePath = path.resolve(process.cwd(), configPath);
+      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 atomix.config.ts not found at the root, use the default path
+      if (!fs.existsSync(configFilePath) && configPath === DEFAULT_ATOMIX_CONFIG_PATH) {
+        configFilePath = path.resolve(process.cwd(), DEFAULT_ATOMIX_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}`);
-          }
+      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}`);
       }
     } catch (requireError) {
       const errorMessage = requireError instanceof Error
@@ -136,36 +123,30 @@ export function loadThemeConfig(
 
     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 };
-    }
+    // Process the AtomixConfig structure
+    const processedConfig: LoadedThemeConfig = {
+      themes: rawConfig.theme?.themes || {},
+      build: rawConfig.build || {},
+      runtime: rawConfig.runtime || {},
+      integration: rawConfig.integration || {},
+      dependencies: rawConfig.dependencies || {},
+      validated: false, // Will be set after validation
+      // Store tokens for generator
+      __tokens: rawConfig.theme?.tokens,
+      __extend: rawConfig.theme?.extend,
+    };
 
     // Apply environment-specific overrides
-    processedConfig = applyEnvOverrides(processedConfig, env);
+    const finalConfig = applyEnvOverrides(processedConfig, env);
 
     // Validate if requested
     let validationResult: ConfigValidationResult | null = null;
     if (validate) {
-      validationResult = validateConfig(processedConfig);
+      validationResult = validateConfig(finalConfig);
     }
 
     config = {
-      ...processedConfig,
+      ...finalConfig,
       validated: validate,
       errors: validationResult?.errors,
       warnings: validationResult?.warnings,
@@ -212,6 +193,8 @@ export function loadThemeConfig(
       validated: false,
       errors: [`Failed to load config: ${error instanceof Error ? error.message : String(error)}`],
       warnings: [],
+      __tokens: {},
+      __extend: {},
     };
   }
 
@@ -307,4 +290,4 @@ export function reloadThemeConfig(
 ): LoadedThemeConfig {
   clearConfigCache();
   return loadThemeConfig(options);
-}
+}

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

@@ -18,7 +18,7 @@ import type {
  * Configuration loader options
  */
 export interface ConfigLoaderOptions {
-  /** Path to theme config file (default: 'theme.config.ts') */
+  /** Path to theme config file (default: 'atomix.config.ts') */
   configPath?: string;
   /** Enable validation */
   validate?: boolean;
@@ -109,4 +109,4 @@ export type {
   BuildConfig,
   RuntimeConfig,
   IntegrationConfig,
-};
+};

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

@@ -4,13 +4,7 @@
  * Validates theme configuration structure and values
  */
 
-import type {
-  AtomixConfig,
-  ThemeDefinition,
-  CSSThemeDefinition,
-  JSThemeDefinition,
-  ConfigValidationResult,
-} from './types';
+import type { ConfigValidationResult } from './types';
 
 /**
  * Validate theme configuration
@@ -37,31 +31,25 @@ export function validateConfig(config: any): ConfigValidationResult {
     warnings.push(...themeErrors.warnings);
   }
 
-  // Validate build config
+  // Validate build config (only if provided)
   if (config.build) {
     const buildErrors = validateBuildConfig(config.build);
     errors.push(...buildErrors.errors);
     warnings.push(...buildErrors.warnings);
-  } else {
-    warnings.push('No build configuration provided, using defaults');
   }
 
-  // Validate runtime config
+  // Validate runtime config (only if provided)
   if (config.runtime) {
     const runtimeErrors = validateRuntimeConfig(config.runtime);
     errors.push(...runtimeErrors.errors);
     warnings.push(...runtimeErrors.warnings);
-  } else {
-    warnings.push('No runtime configuration provided, using defaults');
   }
 
-  // Validate integration config
+  // Validate integration config (only if provided)
   if (config.integration) {
     const integrationErrors = validateIntegrationConfig(config.integration);
     errors.push(...integrationErrors.errors);
     warnings.push(...integrationErrors.warnings);
-  } else {
-    warnings.push('No integration configuration provided, using defaults');
   }
 
   // Validate dependencies
@@ -127,23 +115,9 @@ function validateThemes(themes: Record<string, any>): ConfigValidationResult {
       warnings.push(...jsErrors.warnings);
     }
 
-    // Validate metadata
-    if (theme.version && !isValidSemver(theme.version)) {
-      warnings.push(`Theme "${themeId}" has invalid version format: ${theme.version}`);
-    }
-
-    if (theme.status && !['stable', 'beta', 'experimental', 'deprecated'].includes(theme.status)) {
-      warnings.push(`Theme "${themeId}" has invalid status: ${theme.status}`);
-    }
-
-    // Validate color format
-    if (theme.color && !isValidColor(theme.color)) {
-      warnings.push(`Theme "${themeId}" has invalid color format: ${theme.color}`);
-    }
-
-    // Validate accessibility
-    if (theme.a11y) {
-      if (theme.a11y.contrastTarget && (theme.a11y.contrastTarget < 1 || theme.a11y.contrastTarget > 21)) {
+    // Validate accessibility (only critical checks)
+    if (theme.a11y?.contrastTarget) {
+      if (typeof theme.a11y.contrastTarget !== 'number' || theme.a11y.contrastTarget < 1 || theme.a11y.contrastTarget > 21) {
         warnings.push(`Theme "${themeId}" has invalid contrast target: ${theme.a11y.contrastTarget}`);
       }
     }
@@ -187,23 +161,13 @@ function validateBuildConfig(build: any): ConfigValidationResult {
   const errors: string[] = [];
   const warnings: string[] = [];
 
-  if (!build.output || typeof build.output !== 'object') {
-    errors.push('Build config must have an "output" object');
-  } else {
-    if (!build.output.directory || typeof build.output.directory !== 'string') {
-      errors.push('Build output must have a "directory" string');
-    }
-    if (!build.output.formats || typeof build.output.formats !== 'object') {
-      errors.push('Build output must have a "formats" object');
-    }
+  // Only validate structure if provided
+  if (build.output && typeof build.output !== 'object') {
+    errors.push('Build output must be an object');
   }
 
-  if (!build.sass || typeof build.sass !== 'object') {
-    errors.push('Build config must have a "sass" object');
-  } else {
-    if (build.sass.style && !['expanded', 'compressed', 'compact', 'nested'].includes(build.sass.style)) {
-      warnings.push(`Invalid Sass style: ${build.sass.style}`);
-    }
+  if (build.sass && typeof build.sass !== 'object') {
+    errors.push('Build sass config must be an object');
   }
 
   return { valid: errors.length === 0, errors, warnings };
@@ -242,15 +206,9 @@ function validateIntegrationConfig(integration: any): ConfigValidationResult {
   const errors: string[] = [];
   const warnings: string[] = [];
 
-  if (!integration.classNames || typeof integration.classNames !== 'object') {
-    errors.push('Integration config must have a "classNames" object');
-  } else {
-    if (!integration.classNames.theme || typeof integration.classNames.theme !== 'string') {
-      errors.push('Integration classNames must have a "theme" string');
-    }
-    if (!integration.classNames.colorMode || typeof integration.classNames.colorMode !== 'string') {
-      errors.push('Integration classNames must have a "colorMode" string');
-    }
+  // Only validate structure if provided
+  if (integration.classNames && typeof integration.classNames !== 'object') {
+    errors.push('Integration classNames must be an object');
   }
 
   return { valid: errors.length === 0, errors, warnings };
@@ -290,37 +248,3 @@ function validateDependencies(
   return { valid: errors.length === 0, errors, warnings };
 }
 
-/**
- * Check if string is valid semver
- */
-function isValidSemver(version: string): boolean {
-  const semverRegex = /^\d+\.\d+\.\d+(-[\w.]+)?(\+[\w.]+)?$/;
-  return semverRegex.test(version);
-}
-
-/**
- * Check if string is valid color
- */
-function isValidColor(color: string): boolean {
-  // Hex color
-  if (/^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6})$/.test(color)) {
-    return true;
-  }
-  // RGB/RGBA
-  if (/^rgba?\(/.test(color)) {
-    return true;
-  }
-  // HSL/HSLA
-  if (/^hsla?\(/.test(color)) {
-    return true;
-  }
-  // Named colors (basic check)
-  const namedColors = [
-    'black', 'white', 'red', 'green', 'blue', 'yellow', 'cyan', 'magenta',
-    'transparent', 'currentColor',
-  ];
-  if (namedColors.includes(color.toLowerCase())) {
-    return true;
-  }
-  return false;
-}

package/src/lib/theme/{constants.ts → constants/constants.ts}

@@ -24,14 +24,6 @@ export const DEFAULT_BASE_PATH = '/themes';
  */
 export const DEFAULT_STYLE_ID = 'atomix-js-theme-styles';
 
-/**
- * Default cache configuration
- */
-export const DEFAULT_CACHE_CONFIG = {
-  maxSize: 50,
-  ttl: 0, // No expiration by default
-} as const;
-
 /**
  * Default engine cache configuration
  */
@@ -58,21 +50,11 @@ export const CSS_EXTENSIONS = {
  */
 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 = '../../../../atomix.config';
 
-/**
- * Default legacy config file path (relative)
- */
-export const DEFAULT_LEGACY_CONFIG_RELATIVE_PATH = '../../../../theme.config';
-
 /**
  * Validation thresholds
  */
@@ -139,7 +121,7 @@ export const DEFAULT_ANALYTICS_CONFIG = {
  * Logger default configuration
  */
 export const DEFAULT_LOGGER_CONFIG = {
-  level: process.env.NODE_ENV === 'production' ? 1 : 2, // WARN in prod, INFO in dev
+  level: (typeof process !== 'undefined' && process.env?.NODE_ENV === 'production') ? 1 : 2, // WARN in prod, INFO in dev
   enableConsole: true,
 } as const;
 

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

@@ -0,0 +1,8 @@
+/**
+ * Theme Constants
+ * 
+ * System constants and default values
+ */
+
+export * from './constants';
+