@shohojdhara/atomix 0.3.1 → 0.3.3

package/src/lib/hooks/useComponentCustomization.ts

@@ -0,0 +1,175 @@
+/**
+ * Component Customization Hook
+ * 
+ * Merges theme-level component overrides with component-level props
+ * for comprehensive customization support.
+ */
+
+import { useMemo } from 'react';
+import { useTheme } from '../theme/runtime/useTheme';
+import type { ComponentPartsMap } from '../types/partProps';
+import type { ComponentCSSVariables } from '../constants/cssVariables';
+import { mergeCSSVars } from '../theme/cssVariableMapper';
+import { mergePartStyles } from '../types/partProps';
+
+/**
+ * Component names that support customization
+ */
+export type ComponentName = keyof ComponentPartsMap;
+
+/**
+ * Props for a customizable component
+ */
+export interface CustomizableComponentProps<T extends ComponentName> {
+  /** CSS variable overrides */
+  cssVars?: Partial<Record<ComponentCSSVariables[T], string | number>>;
+  /** Part-based styling */
+  parts?: ComponentPartsMap[T];
+  /** Additional className */
+  className?: string;
+  /** Inline styles */
+  style?: React.CSSProperties;
+}
+
+/**
+ * Result of component customization
+ */
+export interface ComponentCustomization<T extends ComponentName> {
+  /** Merged CSS variables */
+  cssVars: Record<string, string | number>;
+  /** Merged part styles */
+  parts: ComponentPartsMap[T];
+  /** Merged className */
+  className: string;
+  /** Merged inline styles */
+  style: React.CSSProperties;
+  /** CSS variable style object for inline application */
+  cssVarStyle: React.CSSProperties;
+}
+
+/**
+ * Hook to merge theme overrides with component props
+ * 
+ * @example
+ * function Button(props: ButtonProps) {
+ *   const customization = useComponentCustomization('Button', props);
+ *   
+ *   return (
+ *     <button 
+ *       className={customization.className}
+ *       style={customization.style}
+ *     >
+ *       {props.children}
+ *     </button>
+ *   );
+ * }
+ */
+export function useComponentCustomization<T extends ComponentName>(
+  component: T,
+  props: CustomizableComponentProps<T>
+): ComponentCustomization<T> {
+  const { theme } = useTheme();
+
+  // Merge CSS variables
+  const cssVars = useMemo(() => {
+    const themeVars = theme?.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 merged: 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];
+  }, [theme, component, props.parts]);
+
+  // Merge className
+  const className = useMemo(() => {
+    const themeClassName = theme?.components?.[component]?.className || '';
+    const propClassName = props.className || '';
+    return [themeClassName, propClassName].filter(Boolean).join(' ');
+  }, [theme, component, props.className]);
+
+  // Merge styles
+  const style = useMemo(() => {
+    return { ...props.style };
+  }, [props.style]);
+
+  // Convert CSS vars to style object
+  const cssVarStyle = useMemo(() => {
+    return Object.entries(cssVars).reduce((acc, [key, value]) => {
+      (acc as any)[key] = typeof value === 'number' ? `${value}px` : value;
+      return acc;
+    }, {} as React.CSSProperties);
+  }, [cssVars]);
+
+  return {
+    cssVars,
+    parts,
+    className,
+    style,
+    cssVarStyle,
+  };
+}
+
+/**
+ * Hook to get default props from theme
+ */
+export function useComponentDefaultProps<T extends ComponentName>(
+  component: T
+): Record<string, any> {
+  const { theme } = useTheme();
+  
+  return useMemo(() => {
+    return theme?.components?.[component]?.defaultProps || {};
+  }, [theme, component]);
+}
+
+/**
+ * Hook to merge default props with provided props
+ */
+export function useMergedProps<T extends Record<string, any>>(
+  defaultProps: T,
+  props: Partial<T>
+): T {
+  return useMemo(() => {
+    return { ...defaultProps, ...props };
+  }, [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
+ */
+export function applyCSSVarsToStyle(
+  cssVars: Record<string, string | number>,
+  baseStyle?: React.CSSProperties
+): React.CSSProperties {
+  const cssVarStyle = Object.entries(cssVars).reduce((acc, [key, value]) => {
+    (acc as any)[key] = typeof value === 'number' ? `${value}px` : value;
+    return acc;
+  }, {} as React.CSSProperties);
+
+  return { ...cssVarStyle, ...baseStyle };
+}

package/src/lib/index.ts

@@ -12,5 +12,14 @@ export const types: typeof typesImport = typesImport;
 export const constants: typeof constantsImport = constantsImport;
 export const theme: typeof themeImport = themeImport;
 
-// Also export theme utilities directly for convenience
+// NEW: Export individual modules for direct imports
+export * from './composables';
+export * from './constants';
+export * from './constants/cssVariables';
+export * from './types';
+export * from './types/partProps';
+export * from './utils';
+export * from './utils/componentUtils';
 export * from './theme';
+export * from './patterns';
+export * from './hooks';

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

@@ -0,0 +1,108 @@
+/**
+ * @vitest-environment jsdom
+ */
+
+import React from 'react';
+import { describe, it, expect } from 'vitest';
+import { renderSlot, isSlot, mergeSlots } from '../slots';
+
+describe('slots', () => {
+  describe('renderSlot', () => {
+    it('should render children directly', () => {
+      const result = renderSlot('Hello World', {});
+      expect(result).toBe('Hello World');
+    });
+
+    it('should render with render function', () => {
+      const slot = {
+        render: (props: { text: string }) => `Rendered: ${props.text}`,
+      };
+      const result = renderSlot(slot, { text: 'Hello' });
+      expect(result).toBe('Rendered: Hello');
+    });
+
+    it('should render with component', () => {
+      const CustomComponent = ({ text }: { text: string }) =>
+        React.createElement('span', null, `Component: ${text}`);
+      
+      const slot = {
+        component: CustomComponent,
+      };
+      const result = renderSlot(slot, { text: 'Hello' });
+      expect(result).toBeDefined();
+    });
+
+    it('should use fallback when slot is undefined', () => {
+      const result = renderSlot(undefined, {}, 'Fallback');
+      expect(result).toBe('Fallback');
+    });
+
+    it('should prioritize render over component', () => {
+      const CustomComponent = () => React.createElement('span', null, 'Component');
+      const slot = {
+        render: () => 'Rendered',
+        component: CustomComponent,
+      };
+      const result = renderSlot(slot, {});
+      expect(result).toBe('Rendered');
+    });
+
+    it('should handle slot with children', () => {
+      const slot = {
+        children: 'Slot Children',
+      };
+      const result = renderSlot(slot, {});
+      expect(result).toBe('Slot Children');
+    });
+  });
+
+  describe('isSlot', () => {
+    it('should identify slot objects', () => {
+      expect(isSlot({ render: () => null })).toBe(true);
+      expect(isSlot({ component: () => null })).toBe(true);
+      expect(isSlot({ children: 'text' })).toBe(true);
+    });
+
+    it('should reject non-slot values', () => {
+      expect(isSlot('string')).toBe(false);
+      expect(isSlot(123)).toBe(false);
+      expect(isSlot(null)).toBe(false);
+      expect(isSlot(undefined)).toBe(false);
+      expect(isSlot({})).toBe(false);
+    });
+  });
+
+  describe('mergeSlots', () => {
+    it('should merge two slot objects', () => {
+      const base = {
+        render: () => 'Base',
+      };
+      const override = {
+        component: () => React.createElement('span', null, 'Override'),
+      };
+      const result = mergeSlots(base, override);
+      expect(result).toEqual(override);
+    });
+
+    it('should return override when base is undefined', () => {
+      const override = {
+        render: () => 'Override',
+      };
+      const result = mergeSlots(undefined, override);
+      expect(result).toEqual(override);
+    });
+
+    it('should return base when override is undefined', () => {
+      const base = {
+        render: () => 'Base',
+      };
+      const result = mergeSlots(base, undefined);
+      expect(result).toEqual(base);
+    });
+
+    it('should return undefined when both are undefined', () => {
+      const result = mergeSlots(undefined, undefined);
+      expect(result).toBeUndefined();
+    });
+  });
+});

package/src/lib/patterns/index.ts

@@ -0,0 +1,35 @@
+/**
+ * Pattern System Exports
+ * 
+ * Slot and render prop patterns for advanced component customization
+ */
+
+export {
+  renderSlot,
+  isSlot,
+  mergeSlots,
+  createSlotComponent,
+  useSlot,
+  createSlotProps,
+} from './slots.tsx';
+
+export type {
+  SlotProps,
+  ButtonRootSlotProps,
+  ButtonIconSlotProps,
+  ButtonLabelSlotProps,
+  ButtonSpinnerSlotProps,
+  CardRootSlotProps,
+  CardHeaderSlotProps,
+  CardBodySlotProps,
+  CardFooterSlotProps,
+  ModalRootSlotProps,
+  ModalBackdropSlotProps,
+  ModalDialogSlotProps,
+  ModalContentSlotProps,
+  InputRootSlotProps,
+  InputElementSlotProps,
+  DropdownRootSlotProps,
+  DropdownToggleSlotProps,
+  DropdownMenuSlotProps,
+} from './slots.tsx';