@shohojdhara/atomix 0.1.16 → 0.1.18

package/src/lib/composables/useRiver.ts

@@ -9,7 +9,7 @@ export interface RiverContentColumn {
    * Column type (title or text)
    */
   type: 'title' | 'text';
-  
+
   /**
    * Content for the column
    */
@@ -24,62 +24,62 @@ export interface RiverProps {
    * Title of the river section
    */
   title?: ReactNode;
-  
+
   /**
    * Text content (can be a string or array of paragraphs)
    */
   text?: string | string[];
-  
+
   /**
    * Action buttons/links
    */
   actions?: ReactNode;
-  
+
   /**
    * Image source URL
    */
   imageSrc?: string;
-  
+
   /**
    * Image alt text
    */
   imageAlt?: string;
-  
+
   /**
    * Whether to use the center layout
    */
   center?: boolean;
-  
+
   /**
    * Whether to use the breakout layout
    */
   breakout?: boolean;
-  
+
   /**
    * Whether to use the reverse layout (image on right)
    */
   reverse?: boolean;
-  
+
   /**
    * Use content columns instead of simple title/text structure
    */
   contentColumns?: RiverContentColumn[];
-  
+
   /**
    * Additional CSS class
    */
   className?: string;
-  
+
   /**
    * Background image source
    */
   backgroundImageSrc?: string;
-  
+
   /**
    * Whether to show the background overlay
    */
   showOverlay?: boolean;
-  
+
   /**
    * Custom width for the river content
    */
@@ -94,27 +94,27 @@ interface UseRiverResult {
    * Generate river class names based on props
    */
   generateRiverClassNames: (baseClassName?: string) => string;
-  
+
   /**
    * Generate content class names
    */
   generateContentClass: () => string;
-  
+
   /**
    * Generate visual/image class names
    */
   generateVisualClass: () => string;
-  
+
   /**
    * Determine if the river has a background image
    */
   hasBackgroundImage: boolean;
-  
+
   /**
    * Determine if the river has a foreground image
    */
   hasForegroundImage: boolean;
-  
+
   /**
    * Convert text to array if it's a string
    */
@@ -133,25 +133,24 @@ export function useRiver(initialProps?: Partial<RiverProps>): UseRiverResult {
     reverse: false,
     imageAlt: 'Image',
     showOverlay: true,
-    ...initialProps
+    ...initialProps,
   };
 
   /**
    * Check if the river has a background image
    */
   const hasBackgroundImage = !!defaultProps.backgroundImageSrc;
-  
+
   /**
    * Check if the river has a foreground image
    */
   const hasForegroundImage = !!defaultProps.imageSrc;
-  
+
   /**
    * Convert text to array if it's a string
    */
-  const textContent = typeof defaultProps.text === 'string' 
-    ? [defaultProps.text] 
-    : defaultProps.text || [];
+  const textContent =
+    typeof defaultProps.text === 'string' ? [defaultProps.text] : defaultProps.text || [];
 
   /**
    * Generate river class names based on props
@@ -159,19 +158,17 @@ export function useRiver(initialProps?: Partial<RiverProps>): UseRiverResult {
    * @returns Combined class names string
    */
   const generateRiverClassNames = (baseClassName: string = ''): string => {
-    const classes = [
-      RIVER.SELECTORS.RIVER.replace('.', '')
-    ];
+    const classes = [RIVER.SELECTORS.RIVER.replace('.', '')];
 
     // Add layout classes
     if (defaultProps.center) {
       classes.push(RIVER.CLASSES.CENTER);
     }
-    
+
     if (defaultProps.breakout) {
       classes.push(RIVER.CLASSES.BREAKOUT);
     }
-    
+
     if (defaultProps.reverse) {
       classes.push(RIVER.CLASSES.REVERSE);
     }
@@ -203,6 +200,6 @@ export function useRiver(initialProps?: Partial<RiverProps>): UseRiverResult {
     generateVisualClass,
     hasBackgroundImage,
     hasForegroundImage,
-    textContent
+    textContent,
   };
-} 
+}

package/src/lib/composables/useSelect.ts

@@ -13,7 +13,7 @@ export function useSelect(initialProps?: Partial<SelectProps>) {
     disabled: false,
     invalid: false,
     valid: false,
-    ...initialProps
+    ...initialProps,
   };
 
   /**
@@ -30,19 +30,18 @@ export function useSelect(initialProps?: Partial<SelectProps>) {
       className = '',
     } = props;
 
-    const sizeClass = size === 'md' ? '' : (
-      size === 'sm' ? SELECT.CLASSES.SMALL : SELECT.CLASSES.LARGE
-    );
-    
+    const sizeClass =
+      size === 'md' ? '' : size === 'sm' ? SELECT.CLASSES.SMALL : SELECT.CLASSES.LARGE;
+
     let validationClass = '';
     if (invalid) {
       validationClass = SELECT.CLASSES.INVALID;
     } else if (valid) {
       validationClass = SELECT.CLASSES.VALID;
     }
-    
+
     const disabledClass = disabled ? SELECT.CLASSES.DISABLED : '';
-    
+
     return `${SELECT.CLASSES.BASE} ${sizeClass} ${validationClass} ${disabledClass} ${className}`.trim();
   };
 
@@ -50,4 +49,4 @@ export function useSelect(initialProps?: Partial<SelectProps>) {
     defaultProps,
     generateSelectClass,
   };
-} 
+}

package/src/lib/composables/useSideMenu.ts

@@ -0,0 +1,197 @@
+import { useState, useEffect, useRef } from 'react';
+import { SideMenuProps, SideMenuItemProps } from '../types/components';
+import { SIDE_MENU } from '../constants/components';
+
+/**
+ * SideMenu state and functionality
+ * @param initialProps - Initial side menu properties
+ * @returns SideMenu state and methods
+ */
+export function useSideMenu(initialProps?: Partial<SideMenuProps>) {
+  // Default side menu properties
+  const defaultProps: Partial<SideMenuProps> = {
+    collapsible: true,
+    isOpen: false,
+    ...initialProps,
+  };
+
+  // Local open state for when not controlled externally
+  const [isOpenState, setIsOpenState] = useState(defaultProps.isOpen || false);
+
+  // Refs for managing responsive behavior
+  const wrapperRef = useRef<HTMLDivElement>(null);
+  const innerRef = useRef<HTMLDivElement>(null);
+
+  // Update local state when external state changes
+  useEffect(() => {
+    if (typeof defaultProps.isOpen !== 'undefined') {
+      setIsOpenState(defaultProps.isOpen);
+    }
+  }, [defaultProps.isOpen]);
+
+  // Handle responsive behavior - auto-open on desktop, controlled on mobile
+  useEffect(() => {
+    const handleResize = () => {
+      const isMobile = window.innerWidth < 768; // MD breakpoint
+
+      if (!isMobile && defaultProps.collapsible) {
+        // Auto-open on desktop
+        if (typeof defaultProps.onToggle === 'function') {
+          defaultProps.onToggle(true);
+        } else {
+          setIsOpenState(true);
+        }
+
+        // Reset wrapper height on desktop
+        if (wrapperRef.current) {
+          wrapperRef.current.style.height = 'auto';
+        }
+      } else if (isMobile && wrapperRef.current && innerRef.current) {
+        // Set proper height for mobile animation
+        const currentOpen =
+          typeof defaultProps.isOpen !== 'undefined' ? defaultProps.isOpen : isOpenState;
+        if (currentOpen) {
+          wrapperRef.current.style.height = `${innerRef.current.scrollHeight}px`;
+        } else {
+          wrapperRef.current.style.height = '0px';
+        }
+      }
+    };
+
+    handleResize(); // Initial call
+    window.addEventListener('resize', handleResize);
+
+    return () => {
+      window.removeEventListener('resize', handleResize);
+    };
+  }, [defaultProps.collapsible, defaultProps.isOpen, defaultProps.onToggle, isOpenState]);
+
+  // Update wrapper height when open state changes on mobile
+  useEffect(() => {
+    const isMobile = window.innerWidth < 768;
+
+    if (isMobile && wrapperRef.current && innerRef.current && defaultProps.collapsible) {
+      const currentOpen =
+        typeof defaultProps.isOpen !== 'undefined' ? defaultProps.isOpen : isOpenState;
+
+      if (currentOpen) {
+        wrapperRef.current.style.height = `${innerRef.current.scrollHeight}px`;
+      } else {
+        wrapperRef.current.style.height = '0px';
+      }
+    }
+  }, [defaultProps.isOpen, isOpenState, defaultProps.collapsible]);
+
+  /**
+   * Generate side menu class based on properties
+   * @param props - Side menu properties
+   * @returns Class string
+   */
+  const generateSideMenuClass = (props: Partial<SideMenuProps & { isOpen?: boolean }>): string => {
+    const { className = '', isOpen = false } = props;
+
+    const openClass = isOpen ? SIDE_MENU.CLASSES.IS_OPEN : '';
+
+    return `${SIDE_MENU.CLASSES.BASE} ${openClass} ${className}`.trim();
+  };
+
+  /**
+   * Generate wrapper class
+   * @returns Class string
+   */
+  const generateWrapperClass = (): string => {
+    return SIDE_MENU.CLASSES.WRAPPER;
+  };
+
+  /**
+   * Handle toggle click
+   */
+  const handleToggle = () => {
+    if (defaultProps.disabled) return;
+
+    const newState =
+      typeof defaultProps.isOpen !== 'undefined' ? !defaultProps.isOpen : !isOpenState;
+
+    if (typeof defaultProps.onToggle === 'function') {
+      // Controlled component
+      defaultProps.onToggle(newState);
+    } else {
+      // Uncontrolled component
+      setIsOpenState(newState);
+    }
+  };
+
+  /**
+   * Get current open state
+   * @returns Current open state
+   */
+  const getCurrentOpenState = (): boolean => {
+    return typeof defaultProps.isOpen !== 'undefined' ? defaultProps.isOpen : isOpenState;
+  };
+
+  return {
+    defaultProps,
+    isOpenState: getCurrentOpenState(),
+    wrapperRef,
+    innerRef,
+    generateSideMenuClass,
+    generateWrapperClass,
+    handleToggle,
+    getCurrentOpenState,
+  };
+}
+
+/**
+ * SideMenuItem state and functionality
+ * @param initialProps - Initial side menu item properties
+ * @returns SideMenuItem state and methods
+ */
+export function useSideMenuItem(initialProps?: Partial<SideMenuItemProps>) {
+  // Default side menu item properties
+  const defaultProps: Partial<SideMenuItemProps> = {
+    active: false,
+    disabled: false,
+    ...initialProps,
+  };
+
+  /**
+   * Generate side menu item class based on properties
+   * @returns Class string
+   */
+  const generateSideMenuItemClass = (): string => {
+    const {
+      active = defaultProps.active,
+      disabled = defaultProps.disabled,
+      className = '',
+    } = defaultProps;
+
+    const activeClass = active ? SIDE_MENU.CLASSES.ACTIVE : '';
+    const disabledClass = disabled ? SIDE_MENU.CLASSES.DISABLED : '';
+
+    return `${SIDE_MENU.CLASSES.LINK} ${activeClass} ${disabledClass} ${className}`.trim();
+  };
+
+  /**
+   * Handle side menu item click with disabled check
+   * @param handler - Click handler function
+   * @returns Function that respects disabled state
+   */
+  const handleClick = (handler?: (event: React.MouseEvent) => void) => {
+    return (e: React.MouseEvent) => {
+      if (defaultProps.disabled) {
+        e.preventDefault();
+        return;
+      }
+
+      if (handler) {
+        handler(e);
+      }
+    };
+  };
+
+  return {
+    defaultProps,
+    generateSideMenuItemClass,
+    handleClick,
+  };
+}

package/src/lib/composables/useSpinner.ts

@@ -11,7 +11,7 @@ export function useSpinner(initialProps?: Partial<SpinnerProps>) {
     variant: 'primary',
     size: 'md',
     fullscreen: false,
-    ...initialProps
+    ...initialProps,
   };
 
   /**
@@ -31,7 +31,7 @@ export function useSpinner(initialProps?: Partial<SpinnerProps>) {
     const variantClass = variant ? `${baseClass}--${variant}` : '';
     const sizeClass = size !== 'md' ? `${baseClass}--${size}` : '';
     const fullscreenClass = fullscreen ? `${baseClass}--fullscreen` : '';
-    
+
     return `${baseClass} ${variantClass} ${sizeClass} ${fullscreenClass} ${className}`.trim();
   };
 
@@ -39,4 +39,4 @@ export function useSpinner(initialProps?: Partial<SpinnerProps>) {
     defaultProps,
     generateSpinnerClass,
   };
-} 
+}

package/src/lib/composables/useTextarea.ts

@@ -13,7 +13,7 @@ export function useTextarea(initialProps?: Partial<TextareaProps>) {
     disabled: false,
     invalid: false,
     valid: false,
-    ...initialProps
+    ...initialProps,
   };
 
   /**
@@ -31,21 +31,20 @@ export function useTextarea(initialProps?: Partial<TextareaProps>) {
       className = '',
     } = props;
 
-    const sizeClass = size === 'md' ? '' : (
-      size === 'sm' ? TEXTAREA.CLASSES.SMALL : TEXTAREA.CLASSES.LARGE
-    );
-    
+    const sizeClass =
+      size === 'md' ? '' : size === 'sm' ? TEXTAREA.CLASSES.SMALL : TEXTAREA.CLASSES.LARGE;
+
     const variantClass = variant ? `c-input--${variant}` : '';
-    
+
     let validationClass = '';
     if (invalid) {
       validationClass = TEXTAREA.CLASSES.INVALID;
     } else if (valid) {
       validationClass = TEXTAREA.CLASSES.VALID;
     }
-    
+
     const disabledClass = disabled ? TEXTAREA.CLASSES.DISABLED : '';
-    
+
     return `${TEXTAREA.CLASSES.BASE} ${sizeClass} ${variantClass} ${validationClass} ${disabledClass} ${className}`.trim();
   };
 
@@ -53,4 +52,4 @@ export function useTextarea(initialProps?: Partial<TextareaProps>) {
     defaultProps,
     generateTextareaClass,
   };
-} 
+}

package/src/lib/composables/useTodo.ts

@@ -17,7 +17,7 @@ export function useTodo(initialProps?: Partial<TodoProps>) {
     size: 'md',
     placeholder: 'Add a new todo',
     showCompleted: true,
-    ...initialProps
+    ...initialProps,
   };
 
   // State
@@ -30,15 +30,11 @@ export function useTodo(initialProps?: Partial<TodoProps>) {
    * @returns Class string for the todo component
    */
   const generateTodoClasses = (props: Partial<TodoProps>): string => {
-    const {
-      size = defaultProps.size,
-      className = '',
-      disabled = false
-    } = props;
+    const { size = defaultProps.size, className = '', disabled = false } = props;
 
     const sizeClass = size === 'md' ? '' : `c-todo--${size}`;
     const disabledClass = disabled ? 'c-todo--disabled' : '';
-    
+
     return `${TODO.CLASSES.BASE} ${sizeClass} ${disabledClass} ${className}`.trim();
   };
 
@@ -59,13 +55,13 @@ export function useTodo(initialProps?: Partial<TodoProps>) {
    */
   const addTodo = (text: string): TodoItem | null => {
     if (!text.trim()) return null;
-    
+
     const newItem: TodoItem = {
       id: uuidv4(),
       text: text.trim(),
-      completed: false
+      completed: false,
     };
-    
+
     setItems(prevItems => [...prevItems, newItem]);
     setInputText('');
     return newItem;
@@ -78,7 +74,7 @@ export function useTodo(initialProps?: Partial<TodoProps>) {
    */
   const toggleTodo = (id: string): TodoItem | null => {
     let updatedItem: TodoItem | null = null;
-    
+
     setItems(prevItems => {
       return prevItems.map(item => {
         if (item.id === id) {
@@ -88,7 +84,7 @@ export function useTodo(initialProps?: Partial<TodoProps>) {
         return item;
       });
     });
-    
+
     return updatedItem;
   };
 
@@ -99,9 +95,9 @@ export function useTodo(initialProps?: Partial<TodoProps>) {
    */
   const deleteTodo = (id: string): boolean => {
     const initialLength = items.length;
-    
+
     setItems(prevItems => prevItems.filter(item => item.id !== id));
-    
+
     return items.length !== initialLength;
   };
 
@@ -113,9 +109,9 @@ export function useTodo(initialProps?: Partial<TodoProps>) {
   const handleSubmit = (event: React.FormEvent, onAddTodo?: (text: string) => void) => {
     event.preventDefault();
     if (!inputText.trim()) return;
-    
+
     const newItem = addTodo(inputText);
-    
+
     if (newItem && onAddTodo) {
       onAddTodo(newItem.text);
     }
@@ -141,6 +137,6 @@ export function useTodo(initialProps?: Partial<TodoProps>) {
     handleSubmit,
     generateTodoClasses,
     generateItemClasses,
-    getFilteredItems
+    getFilteredItems,
   };
-} 
+}