@shohojdhara/atomix 0.3.15 → 0.4.0

package/src/lib/hooks/useComponentCustomization.ts

@@ -1,6 +1,6 @@
 /**
  * Component Customization Hook
- * 
+ *
  * Merges theme-level component overrides with component-level props
  * for comprehensive customization support.
  */
@@ -23,7 +23,7 @@ export type ComponentName = keyof ComponentPartsMap;
  */
 export interface CustomizableComponentProps<T extends ComponentName> {
   /** CSS variable overrides */
-  cssVars?: T extends keyof ComponentCSSVariables 
+  cssVars?: T extends keyof ComponentCSSVariables
     ? Partial<Record<ComponentCSSVariables[T], string | number>>
     : Record<string, string | number>;
   /** Part-based styling */
@@ -52,13 +52,13 @@ export interface ComponentCustomization<T extends ComponentName> {
 
 /**
  * Hook to merge theme overrides with component props
- * 
+ *
  * @example
  * function Button(props: ButtonProps) {
  *   const customization = useComponentCustomization('Button', props);
- *   
+ *
  *   return (
- *     <button 
+ *     <button
  *       className={customization.className}
  *       style={customization.style}
  *     >
@@ -84,18 +84,12 @@ export function useComponentCustomization<T extends ComponentName>(
   const parts = useMemo(() => {
     const themeParts = (theme as any)?.components?.[component]?.parts || {};
     const propParts = (props.parts || {}) as Record<string, any>;
-    
+
     const merged: Record<string, any> = {};
-    const allPartNames = new Set([
-      ...Object.keys(themeParts),
-      ...Object.keys(propParts),
-    ]);
-
-    allPartNames.forEach((partName) => {
-      merged[partName] = mergePartStyles(
-        themeParts[partName] as any,
-        propParts[partName] as any
-      );
+    const allPartNames = new Set([...Object.keys(themeParts), ...Object.keys(propParts)]);
+
+    allPartNames.forEach(partName => {
+      merged[partName] = mergePartStyles(themeParts[partName] as any, propParts[partName] as any);
     });
 
     return merged as ComponentPartsMap[T];
@@ -137,7 +131,7 @@ export function useComponentDefaultProps<T extends ComponentName>(
   component: T
 ): Record<string, any> {
   const { theme } = useTheme();
-  
+
   return useMemo(() => {
     return (theme as any)?.components?.[component]?.defaultProps || {};
   }, [theme, component]);

package/src/lib/hooks/usePerformanceMonitor.ts

@@ -1,6 +1,6 @@
 /**
  * Performance Monitoring Hook
- * 
+ *
  * Tracks component render times and re-render counts
  * for performance analysis and optimization
  */
@@ -58,10 +58,10 @@ export interface UsePerformanceMonitorOptions {
 
 /**
  * Hook to monitor component performance
- * 
+ *
  * @param options - Performance monitoring options
  * @returns Performance metrics
- * 
+ *
  * @example
  * ```tsx
  * function MyComponent() {
@@ -69,7 +69,7 @@ export interface UsePerformanceMonitorOptions {
  *     componentName: 'MyComponent',
  *     warnThreshold: 16, // Warn if render takes > 16ms (1 frame)
  *   });
- *   
+ *
  *   return <div>Content</div>;
  * }
  * ```
@@ -77,7 +77,7 @@ export interface UsePerformanceMonitorOptions {
 export function usePerformanceMonitor(options: UsePerformanceMonitorOptions) {
   const {
     componentName,
-    logToConsole = (typeof process === 'undefined' || process.env?.NODE_ENV === 'development'),
+    logToConsole = typeof process === 'undefined' || process.env?.NODE_ENV === 'development',
     warnThreshold = 16,
     onMetrics,
   } = options;
@@ -114,7 +114,7 @@ export function usePerformanceMonitor(options: UsePerformanceMonitorOptions) {
     if (renderTime > warnThreshold && logToConsole) {
       console.warn(
         `[Performance] ${componentName} render took ${renderTime.toFixed(2)}ms ` +
-        `(threshold: ${warnThreshold}ms)`
+          `(threshold: ${warnThreshold}ms)`
       );
     }
 
@@ -146,4 +146,3 @@ export function getPerformanceMetrics(): PerformanceMetrics[] {
   // For now, this is a placeholder
   return [];
 }
-

package/src/lib/patterns/__tests__/slots.test.ts

@@ -24,7 +24,7 @@ describe('slots', () => {
     it('should render with component', () => {
       const CustomComponent = ({ text }: { text: string }) =>
         React.createElement('span', null, `Component: ${text}`);
-      
+
       const slot = {
         component: CustomComponent,
       };

package/src/lib/patterns/index.ts

@@ -1,6 +1,6 @@
 /**
  * Pattern System Exports
- * 
+ *
  * Slot and render prop patterns for advanced component customization
  */
 

package/src/lib/patterns/slots.tsx

@@ -1,6 +1,6 @@
 /**
  * Slot Pattern System
- * 
+ *
  * Provides render props and slot-based customization for components.
  * Allows complete control over component rendering and structure.
  */
@@ -21,13 +21,13 @@ export interface SlotProps<T = any> {
 
 /**
  * Render a slot with the given props
- * 
+ *
  * Priority order:
  * 1. render function
  * 2. component
  * 3. children
  * 4. fallback
- * 
+ *
  * @example
  * renderSlot(
  *   { render: (props) => <CustomButton {...props} /> },
@@ -87,11 +87,9 @@ export function isSlot<T>(value: any): value is SlotProps<T> {
  * Merge multiple slot configurations
  * Later slots override earlier ones
  */
-export function mergeSlots<T>(
-  ...slots: Array<SlotProps<T> | undefined>
-): SlotProps<T> | undefined {
+export function mergeSlots<T>(...slots: Array<SlotProps<T> | undefined>): SlotProps<T> | undefined {
   const filtered = slots.filter((s): s is SlotProps<T> => s !== undefined);
-  
+
   if (filtered.length === 0) return undefined;
   if (filtered.length === 1) return filtered[0];
 
@@ -103,10 +101,10 @@ export function mergeSlots<T>(
 
 /**
  * Create a slot wrapper component
- * 
+ *
  * @example
  * const ButtonSlot = createSlotComponent<ButtonSlotProps>('button')
- * 
+ *
  * <ButtonSlot slot={customSlot} {...props}>
  *   Default content
  * </ButtonSlot>
@@ -414,8 +412,5 @@ export function useSlot<T>(
   props: T,
   fallback?: React.ReactNode
 ): React.ReactNode {
-  return React.useMemo(
-    () => renderSlot(slot, props, fallback),
-    [slot, props, fallback]
-  );
+  return React.useMemo(() => renderSlot(slot, props, fallback), [slot, props, fallback]);
 }

package/src/lib/storybook/InteractiveDemo.tsx

@@ -16,13 +16,10 @@ interface InteractiveDemoProps {
   children: React.ReactNode;
 }
 
-export const InteractiveDemo: React.FC<InteractiveDemoProps> = ({
-  controls,
-  children,
-}) => {
+export const InteractiveDemo: React.FC<InteractiveDemoProps> = ({ controls, children }) => {
   const renderControl = (control: ControlOption, index: number) => {
     const baseId = `control-${index}`;
-    
+
     switch (control.type) {
       case 'select':
         return (
@@ -33,10 +30,10 @@ export const InteractiveDemo: React.FC<InteractiveDemoProps> = ({
             <select
               id={baseId}
               value={control.value}
-              onChange={(e) => control.onChange(e.target.value)}
+              onChange={e => control.onChange(e.target.value)}
               className="w-full px-3 py-2 border rounded-lg"
             >
-              {control.options?.map((option) => (
+              {control.options?.map(option => (
                 <option key={option} value={option}>
                   {option}
                 </option>
@@ -44,7 +41,7 @@ export const InteractiveDemo: React.FC<InteractiveDemoProps> = ({
             </select>
           </div>
         );
-        
+
       case 'slider':
         return (
           <div key={baseId} className="mb-4">
@@ -58,12 +55,12 @@ export const InteractiveDemo: React.FC<InteractiveDemoProps> = ({
               max={control.max}
               step={control.step}
               value={control.value}
-              onChange={(e) => control.onChange(Number(e.target.value))}
+              onChange={e => control.onChange(Number(e.target.value))}
               className="w-full"
             />
           </div>
         );
-        
+
       case 'text':
         return (
           <div key={baseId} className="mb-4">
@@ -74,12 +71,12 @@ export const InteractiveDemo: React.FC<InteractiveDemoProps> = ({
               id={baseId}
               type="text"
               value={control.value}
-              onChange={(e) => control.onChange(e.target.value)}
+              onChange={e => control.onChange(e.target.value)}
               className="w-full px-3 py-2 border rounded-lg"
             />
           </div>
         );
-        
+
       case 'checkbox':
         return (
           <div key={baseId} className="mb-4">
@@ -87,14 +84,14 @@ export const InteractiveDemo: React.FC<InteractiveDemoProps> = ({
               <input
                 type="checkbox"
                 checked={control.value}
-                onChange={(e) => control.onChange(e.target.checked)}
+                onChange={e => control.onChange(e.target.checked)}
                 className="rounded"
               />
               <span className="text-sm font-medium">{control.label}</span>
             </label>
           </div>
         );
-        
+
       default:
         return null;
     }
@@ -105,9 +102,7 @@ export const InteractiveDemo: React.FC<InteractiveDemoProps> = ({
       <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 mb-6">
         {controls.map(renderControl)}
       </div>
-      <div className="border-t pt-6">
-        {children}
-      </div>
+      <div className="border-t pt-6">{children}</div>
     </div>
   );
-};
+};

package/src/lib/storybook/PreviewContainer.tsx

@@ -33,4 +33,4 @@ export const PreviewContainer: React.FC<PreviewContainerProps> = ({
       </div>
     </div>
   );
-};
+};

package/src/lib/storybook/VariantsGrid.tsx

@@ -12,10 +12,6 @@ export const VariantsGrid: React.FC<VariantsGridProps> = ({
   gap = 'gap-4',
 }) => {
   const gridClass = `grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-${columns} ${gap}`;
-  
-  return (
-    <div className={gridClass}>
-      {children}
-    </div>
-  );
-};
+
+  return <div className={gridClass}>{children}</div>;
+};

package/src/lib/storybook/index.ts

@@ -1,3 +1,3 @@
 export { PreviewContainer } from './PreviewContainer';
 export { VariantsGrid } from './VariantsGrid';
-export { InteractiveDemo } from './InteractiveDemo';
+export { InteractiveDemo } from './InteractiveDemo';

package/src/lib/theme/adapters/cssVariableMapper.ts

@@ -1,6 +1,6 @@
 /**
  * CSS Variable Mapper
- * 
+ *
  * Utilities for generating and managing CSS custom properties from SCSS tokens
  * and component configurations.
  */
@@ -35,7 +35,7 @@ export interface CSSVariableNamingOptions {
 
 /**
  * Generate CSS variable name from parts
- * 
+ *
  * @example
  * generateCSSVariableName('button', 'bg', { prefix: 'atomix' })
  * // Returns: '--atomix-button-bg'
@@ -45,26 +45,22 @@ export function generateCSSVariableName(
   property: string,
   options: CSSVariableNamingOptions = {}
 ): string {
-  const {
-    prefix = 'atomix',
-    separator = '-',
-    includeComponent = true,
-  } = options;
+  const { prefix = 'atomix', separator = '-', includeComponent = true } = options;
 
   const parts = [prefix];
-  
+
   if (includeComponent) {
     parts.push(component);
   }
-  
+
   parts.push(property);
-  
+
   return `--${parts.join(separator)}`;
 }
 
 /**
  * Generate CSS variables object from configuration
- * 
+ *
  * @example
  * const vars = generateComponentCSSVars({
  *   component: 'button',
@@ -89,11 +85,7 @@ export function generateComponentCSSVars(
   if (parts) {
     Object.entries(parts).forEach(([partName, partProps]) => {
       Object.entries(partProps).forEach(([key, value]) => {
-        const varName = generateCSSVariableName(
-          component,
-          `${partName}-${key}`,
-          options
-        );
+        const varName = generateCSSVariableName(component, `${partName}-${key}`, options);
         vars[varName] = String(value);
       });
     });
@@ -103,11 +95,7 @@ export function generateComponentCSSVars(
   if (states) {
     Object.entries(states).forEach(([stateName, stateProps]) => {
       Object.entries(stateProps).forEach(([key, value]) => {
-        const varName = generateCSSVariableName(
-          component,
-          `${stateName}-${key}`,
-          options
-        );
+        const varName = generateCSSVariableName(component, `${stateName}-${key}`, options);
         vars[varName] = String(value);
       });
     });
@@ -117,11 +105,7 @@ export function generateComponentCSSVars(
   if (variants) {
     Object.entries(variants).forEach(([variantName, variantProps]) => {
       Object.entries(variantProps).forEach(([key, value]) => {
-        const varName = generateCSSVariableName(
-          component,
-          `${variantName}-${key}`,
-          options
-        );
+        const varName = generateCSSVariableName(component, `${variantName}-${key}`, options);
         vars[varName] = String(value);
       });
     });
@@ -132,7 +116,7 @@ export function generateComponentCSSVars(
 
 /**
  * Map SCSS tokens to CSS custom properties
- * 
+ *
  * @example
  * const tokens = { '$primary-color': '#7AFFD7', '$spacing-md': '16px' }
  * const vars = mapSCSSTokensToCSSVars(tokens)
@@ -148,13 +132,13 @@ export function mapSCSSTokensToCSSVars(
   Object.entries(tokens).forEach(([key, value]) => {
     // Remove $ prefix from SCSS variables
     const cleanKey = key.startsWith('$') ? key.slice(1) : key;
-    
+
     // Convert underscores to separators
     const normalizedKey = cleanKey.replace(/_/g, separator);
-    
+
     // Generate variable name
     const varName = `--${prefix}${separator}${normalizedKey}`;
-    
+
     vars[varName] = String(value);
   });
 
@@ -163,74 +147,66 @@ export function mapSCSSTokensToCSSVars(
 
 /**
  * Apply CSS variables to an element
- * 
+ *
  * @param vars - CSS variables to apply
  * @param element - Target element (defaults to document.documentElement)
  */
 export function applyCSSVariables(
-    vars: Record<string, string | number>,
-    element?: HTMLElement
+  vars: Record<string, string | number>,
+  element?: HTMLElement
 ): void {
-    if (typeof window === 'undefined') {
-        return; // SSR safety
-    }
-    
-    const target = element || document.documentElement;
-    Object.entries(vars).forEach(([key, value]) => {
-        target.style.setProperty(key, String(value));
-    });
+  if (typeof window === 'undefined') {
+    return; // SSR safety
+  }
+
+  const target = element || document.documentElement;
+  Object.entries(vars).forEach(([key, value]) => {
+    target.style.setProperty(key, String(value));
+  });
 }
 
 /**
  * Remove CSS variables from an element
- * 
+ *
  * @param varNames - Variable names to remove
  * @param element - Target element (defaults to document.documentElement)
  */
-export function removeCSSVariables(
-    varNames: string[],
-    element?: HTMLElement
-): void {
-    if (typeof window === 'undefined') {
-        return; // SSR safety
-    }
-    
-    const target = element || document.documentElement;
-    varNames.forEach((varName) => {
-        target.style.removeProperty(varName);
-    });
+export function removeCSSVariables(varNames: string[], element?: HTMLElement): void {
+  if (typeof window === 'undefined') {
+    return; // SSR safety
+  }
+
+  const target = element || document.documentElement;
+  varNames.forEach(varName => {
+    target.style.removeProperty(varName);
+  });
 }
 
 /**
  * Get CSS variable value from an element
- * 
+ *
  * @param varName - Variable name to get
  * @param element - Target element (defaults to document.documentElement)
  * @returns Variable value or null if not found
  */
-export function getCSSVariable(
-    varName: string,
-    element?: HTMLElement
-): string | null {
-    if (typeof window === 'undefined') {
-        return null; // SSR safety
-    }
-    
-    const target = element || document.documentElement;
-    return getComputedStyle(target).getPropertyValue(varName).trim() || null;
+export function getCSSVariable(varName: string, element?: HTMLElement): string | null {
+  if (typeof window === 'undefined') {
+    return null; // SSR safety
+  }
+
+  const target = element || document.documentElement;
+  return getComputedStyle(target).getPropertyValue(varName).trim() || null;
 }
 
 /**
  * Convert CSS variable object to inline style object
- * 
+ *
  * @example
  * const vars = { '--atomix-button-bg': '#000' }
  * const style = cssVarsToStyle(vars)
  * // Returns: { '--atomix-button-bg': '#000' } as React.CSSProperties
  */
-export function cssVarsToStyle(
-  vars: Record<string, string | number>
-): React.CSSProperties {
+export function cssVarsToStyle(vars: Record<string, string | number>): React.CSSProperties {
   return Object.entries(vars).reduce((acc, [key, value]) => {
     (acc as any)[key] = typeof value === 'number' ? `${value}px` : value;
     return acc;
@@ -261,15 +237,12 @@ export function isValidCSSVariableName(name: string): boolean {
 
 /**
  * Extract component name from CSS variable name
- * 
+ *
  * @example
  * extractComponentName('--atomix-button-bg')
  * // Returns: 'button'
  */
-export function extractComponentName(
-  varName: string,
-  prefix: string = 'atomix'
-): string | null {
+export function extractComponentName(varName: string, prefix: string = 'atomix'): string | null {
   const regex = new RegExp(`^--${prefix}-([a-z0-9]+)-`);
   const match = varName.match(regex);
   return match ? (match[1] ?? null) : null;

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

@@ -1,12 +1,10 @@
 /**
  * Theme Adapters
- * 
+ *
  * Adapters for working with DesignTokens and CSS variables
  */
 
-export {
-  designTokensToCSSVars,
-} from './themeAdapter';
+export { designTokensToCSSVars } from './themeAdapter';
 
 export {
   generateCSSVariableName,
@@ -21,8 +19,4 @@ export {
   extractComponentName,
 } from './cssVariableMapper';
 
-export type {
-  CSSVariableConfig,
-  CSSVariableNamingOptions,
-} from './cssVariableMapper';
-
+export type { CSSVariableConfig, CSSVariableNamingOptions } from './cssVariableMapper';