@shohojdhara/atomix 0.3.3 → 0.3.5

package/src/lib/config/loader.ts

@@ -0,0 +1,147 @@
+/**
+ * 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.
+ * 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/hooks/index.ts

@@ -8,7 +8,6 @@ export {
   useComponentCustomization,
   useComponentDefaultProps,
   useMergedProps,
-  mergeClassNames,
   applyCSSVarsToStyle,
 } from './useComponentCustomization';
 

package/src/lib/hooks/useComponentCustomization.ts

@@ -11,6 +11,7 @@ import type { ComponentPartsMap } from '../types/partProps';
 import type { ComponentCSSVariables } from '../constants/cssVariables';
 import { mergeCSSVars } from '../theme/cssVariableMapper';
 import { mergePartStyles } from '../types/partProps';
+import { mergeClassNames } from '../utils/componentUtils';
 
 /**
  * Component names that support customization
@@ -22,7 +23,9 @@ export type ComponentName = keyof ComponentPartsMap;
  */
 export interface CustomizableComponentProps<T extends ComponentName> {
   /** CSS variable overrides */
-  cssVars?: Partial<Record<ComponentCSSVariables[T], string | number>>;
+  cssVars?: T extends keyof ComponentCSSVariables 
+    ? Partial<Record<ComponentCSSVariables[T], string | number>>
+    : Record<string, string | number>;
   /** Part-based styling */
   parts?: ComponentPartsMap[T];
   /** Additional className */
@@ -72,17 +75,17 @@ export function useComponentCustomization<T extends ComponentName>(
 
   // Merge CSS variables
   const cssVars = useMemo(() => {
-    const themeVars = theme?.components?.[component]?.cssVars || {};
+    const themeVars = (theme as any)?.components?.[component]?.cssVars || {};
     const propVars = props.cssVars || {};
     return mergeCSSVars(themeVars, propVars as any);
   }, [theme, component, props.cssVars]);
 
   // Merge parts
   const parts = useMemo(() => {
-    const themeParts = theme?.components?.[component]?.parts || {};
-    const propParts = props.parts || {};
+    const themeParts = (theme as any)?.components?.[component]?.parts || {};
+    const propParts = (props.parts || {}) as Record<string, any>;
     
-    const merged: any = {};
+    const merged: Record<string, any> = {};
     const allPartNames = new Set([
       ...Object.keys(themeParts),
       ...Object.keys(propParts),
@@ -100,7 +103,7 @@ export function useComponentCustomization<T extends ComponentName>(
 
   // Merge className
   const className = useMemo(() => {
-    const themeClassName = theme?.components?.[component]?.className || '';
+    const themeClassName = (theme as any)?.components?.[component]?.className || '';
     const propClassName = props.className || '';
     return [themeClassName, propClassName].filter(Boolean).join(' ');
   }, [theme, component, props.className]);
@@ -136,7 +139,7 @@ export function useComponentDefaultProps<T extends ComponentName>(
   const { theme } = useTheme();
   
   return useMemo(() => {
-    return theme?.components?.[component]?.defaultProps || {};
+    return (theme as any)?.components?.[component]?.defaultProps || {};
   }, [theme, component]);
 }
 
@@ -152,13 +155,6 @@ export function useMergedProps<T extends Record<string, any>>(
   }, [defaultProps, props]);
 }
 
-/**
- * Utility to create className from parts
- */
-export function mergeClassNames(...classNames: Array<string | undefined | null | false>): string {
-  return classNames.filter(Boolean).join(' ');
-}
-
 /**
  * Utility to apply CSS variables to style object
  */

package/src/lib/hooks/usePerformanceMonitor.ts

@@ -0,0 +1,149 @@
+/**
+ * Performance Monitoring Hook
+ * 
+ * Tracks component render times and re-render counts
+ * for performance analysis and optimization
+ */
+
+import { useEffect, useRef } from 'react';
+
+export interface PerformanceMetrics {
+  /**
+   * Component name
+   */
+  componentName: string;
+  /**
+   * Number of renders
+   */
+  renderCount: number;
+  /**
+   * Average render time in milliseconds
+   */
+  averageRenderTime: number;
+  /**
+   * Total render time in milliseconds
+   */
+  totalRenderTime: number;
+  /**
+   * Maximum render time in milliseconds
+   */
+  maxRenderTime: number;
+  /**
+   * Minimum render time in milliseconds
+   */
+  minRenderTime: number;
+}
+
+/**
+ * Options for performance monitoring
+ */
+export interface UsePerformanceMonitorOptions {
+  /**
+   * Component name to track
+   */
+  componentName: string;
+  /**
+   * Whether to log metrics to console (development only)
+   */
+  logToConsole?: boolean;
+  /**
+   * Threshold in milliseconds to warn about slow renders
+   */
+  warnThreshold?: number;
+  /**
+   * Callback to report metrics (e.g., to analytics)
+   */
+  onMetrics?: (metrics: PerformanceMetrics) => void;
+}
+
+/**
+ * Hook to monitor component performance
+ * 
+ * @param options - Performance monitoring options
+ * @returns Performance metrics
+ * 
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   usePerformanceMonitor({
+ *     componentName: 'MyComponent',
+ *     warnThreshold: 16, // Warn if render takes > 16ms (1 frame)
+ *   });
+ *   
+ *   return <div>Content</div>;
+ * }
+ * ```
+ */
+export function usePerformanceMonitor(options: UsePerformanceMonitorOptions) {
+  const {
+    componentName,
+    logToConsole = process.env.NODE_ENV === 'development',
+    warnThreshold = 16,
+    onMetrics,
+  } = options;
+
+  const metricsRef = useRef<PerformanceMetrics>({
+    componentName,
+    renderCount: 0,
+    averageRenderTime: 0,
+    totalRenderTime: 0,
+    maxRenderTime: 0,
+    minRenderTime: Infinity,
+  });
+
+  const renderStartRef = useRef<number>(0);
+
+  useEffect(() => {
+    // Start timing the render
+    renderStartRef.current = performance.now();
+  });
+
+  useEffect(() => {
+    // Calculate render time
+    const renderTime = performance.now() - renderStartRef.current;
+    const metrics = metricsRef.current;
+
+    // Update metrics
+    metrics.renderCount += 1;
+    metrics.totalRenderTime += renderTime;
+    metrics.averageRenderTime = metrics.totalRenderTime / metrics.renderCount;
+    metrics.maxRenderTime = Math.max(metrics.maxRenderTime, renderTime);
+    metrics.minRenderTime = Math.min(metrics.minRenderTime, renderTime);
+
+    // Warn if render is slow
+    if (renderTime > warnThreshold && logToConsole) {
+      console.warn(
+        `[Performance] ${componentName} render took ${renderTime.toFixed(2)}ms ` +
+        `(threshold: ${warnThreshold}ms)`
+      );
+    }
+
+    // Log metrics in development
+    if (logToConsole && metrics.renderCount % 10 === 0) {
+      console.log(`[Performance] ${componentName} metrics:`, {
+        renderCount: metrics.renderCount,
+        averageRenderTime: metrics.averageRenderTime.toFixed(2) + 'ms',
+        maxRenderTime: metrics.maxRenderTime.toFixed(2) + 'ms',
+        minRenderTime: metrics.minRenderTime.toFixed(2) + 'ms',
+      });
+    }
+
+    // Report metrics via callback
+    if (onMetrics) {
+      onMetrics({ ...metrics });
+    }
+  });
+
+  return metricsRef.current;
+}
+
+/**
+ * Get all performance metrics for all monitored components
+ * (useful for debugging and analytics)
+ */
+export function getPerformanceMetrics(): PerformanceMetrics[] {
+  // This would need to be implemented with a global store
+  // For now, this is a placeholder
+  return [];
+}
+

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/patterns/index.ts

@@ -11,7 +11,7 @@ export {
   createSlotComponent,
   useSlot,
   createSlotProps,
-} from './slots.tsx';
+} from './slots';
 
 export type {
   SlotProps,
@@ -32,4 +32,4 @@ export type {
   DropdownRootSlotProps,
   DropdownToggleSlotProps,
   DropdownMenuSlotProps,
-} from './slots.tsx';
+} from './slots';

package/src/lib/patterns/slots.tsx

@@ -59,7 +59,7 @@ export function renderSlot<T>(
     // Priority 2: component
     if (slotObj.component) {
       const Component = slotObj.component;
-      return <Component {...props} />;
+      return <Component {...(props as any)} />;
     }
 
     // Priority 3: children
@@ -133,7 +133,7 @@ export function createSlotComponent<T>(
       return <Element {...(props as any)}>{children}</Element>;
     }
 
-    const Component = defaultElement;
+    const Component = defaultElement as React.ComponentType<any>;
     return <Component {...slotProps}>{children}</Component>;
   };
 }

package/src/lib/theme/composeTheme.ts

@@ -33,7 +33,7 @@ export function deepMerge<T extends Record<string, any>>(...objects: Partial<T>[
         if (!source) continue;
 
         for (const key in source) {
-            if (!source.hasOwnProperty(key)) continue;
+            if (!Object.prototype.hasOwnProperty.call(source, key)) continue;
 
             const targetValue = result[key];
             const sourceValue = source[key];
@@ -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: {