@shohojdhara/atomix 0.1.17 → 0.1.18

package/src/lib/composables/useRiver.ts

@@ -0,0 +1,205 @@
+import { ReactNode } from 'react';
+import { RIVER } from '../constants/components';
+
+/**
+ * River content column interface
+ */
+export interface RiverContentColumn {
+  /**
+   * Column type (title or text)
+   */
+  type: 'title' | 'text';
+
+  /**
+   * Content for the column
+   */
+  content: ReactNode;
+}
+
+/**
+ * River properties interface
+ */
+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
+   */
+  contentWidth?: string;
+}
+
+/**
+ * River hook result interface
+ */
+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
+   */
+  textContent: string[];
+}
+
+/**
+ * Hook for River component functionality
+ * @param initialProps - Initial river props
+ * @returns River methods and state
+ */
+export function useRiver(initialProps?: Partial<RiverProps>): UseRiverResult {
+  const defaultProps: Partial<RiverProps> = {
+    center: false,
+    breakout: false,
+    reverse: false,
+    imageAlt: 'Image',
+    showOverlay: true,
+    ...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 || [];
+
+  /**
+   * Generate river class names based on props
+   * @param baseClassName - Additional class names
+   * @returns Combined class names string
+   */
+  const generateRiverClassNames = (baseClassName: string = ''): string => {
+    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);
+    }
+
+    if (baseClassName) {
+      classes.push(baseClassName);
+    }
+
+    return classes.join(' ');
+  };
+
+  /**
+   * Generate content class names
+   */
+  const generateContentClass = (): string => {
+    return RIVER.SELECTORS.CONTENT.replace('.', '');
+  };
+
+  /**
+   * Generate visual/image class names
+   */
+  const generateVisualClass = (): string => {
+    return RIVER.SELECTORS.VISUAL.replace('.', '');
+  };
+
+  return {
+    generateRiverClassNames,
+    generateContentClass,
+    generateVisualClass,
+    hasBackgroundImage,
+    hasForegroundImage,
+    textContent,
+  };
+}

package/src/lib/composables/useSelect.ts

@@ -0,0 +1,52 @@
+import { SelectProps } from '../types/components';
+import { SELECT } from '../constants/components';
+
+/**
+ * Select state and functionality
+ * @param initialProps - Initial select properties
+ * @returns Select state and methods
+ */
+export function useSelect(initialProps?: Partial<SelectProps>) {
+  // Default select properties
+  const defaultProps: Partial<SelectProps> = {
+    size: 'md',
+    disabled: false,
+    invalid: false,
+    valid: false,
+    ...initialProps,
+  };
+
+  /**
+   * Generate select class based on properties
+   * @param props - Select properties
+   * @returns Class string
+   */
+  const generateSelectClass = (props: Partial<SelectProps>): string => {
+    const {
+      size = defaultProps.size,
+      disabled = defaultProps.disabled,
+      invalid = defaultProps.invalid,
+      valid = defaultProps.valid,
+      className = '',
+    } = props;
+
+    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();
+  };
+
+  return {
+    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

@@ -0,0 +1,42 @@
+import { SpinnerProps } from '../types/components';
+
+/**
+ * Spinner state and functionality
+ * @param initialProps - Initial spinner properties
+ * @returns Spinner state and methods
+ */
+export function useSpinner(initialProps?: Partial<SpinnerProps>) {
+  // Default spinner properties
+  const defaultProps: Partial<SpinnerProps> = {
+    variant: 'primary',
+    size: 'md',
+    fullscreen: false,
+    ...initialProps,
+  };
+
+  /**
+   * Generate spinner class based on properties
+   * @param props - Spinner properties
+   * @returns Class string
+   */
+  const generateSpinnerClass = (props: Partial<SpinnerProps>): string => {
+    const {
+      variant = defaultProps.variant,
+      size = defaultProps.size,
+      fullscreen = defaultProps.fullscreen,
+      className = '',
+    } = props;
+
+    const baseClass = 'c-spinner';
+    const variantClass = variant ? `${baseClass}--${variant}` : '';
+    const sizeClass = size !== 'md' ? `${baseClass}--${size}` : '';
+    const fullscreenClass = fullscreen ? `${baseClass}--fullscreen` : '';
+
+    return `${baseClass} ${variantClass} ${sizeClass} ${fullscreenClass} ${className}`.trim();
+  };
+
+  return {
+    defaultProps,
+    generateSpinnerClass,
+  };
+}

package/src/lib/composables/useTextarea.ts

@@ -0,0 +1,55 @@
+import { TextareaProps } from '../types/components';
+import { TEXTAREA } from '../constants/components';
+
+/**
+ * Textarea state and functionality
+ * @param initialProps - Initial textarea properties
+ * @returns Textarea state and methods
+ */
+export function useTextarea(initialProps?: Partial<TextareaProps>) {
+  // Default textarea properties
+  const defaultProps: Partial<TextareaProps> = {
+    size: 'md',
+    disabled: false,
+    invalid: false,
+    valid: false,
+    ...initialProps,
+  };
+
+  /**
+   * Generate textarea class based on properties
+   * @param props - Textarea properties
+   * @returns Class string
+   */
+  const generateTextareaClass = (props: Partial<TextareaProps>): string => {
+    const {
+      size = defaultProps.size,
+      variant = defaultProps.variant,
+      disabled = defaultProps.disabled,
+      invalid = defaultProps.invalid,
+      valid = defaultProps.valid,
+      className = '',
+    } = props;
+
+    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();
+  };
+
+  return {
+    defaultProps,
+    generateTextareaClass,
+  };
+}

package/src/lib/composables/useTodo.ts

@@ -0,0 +1,142 @@
+import { useState } from 'react';
+import { TodoProps, Size } from '../types/components';
+import { TodoItem } from '../../components/Todo/scripts/types';
+import { v4 as uuidv4 } from 'uuid';
+import { TODO, SIZES } from '../constants/components';
+
+/**
+ * Todo composable hook - manages todo items state and operations
+ * @param initialProps - Initial todo properties
+ * @returns Todo state and methods
+ */
+export function useTodo(initialProps?: Partial<TodoProps>) {
+  // Default todo properties
+  const defaultProps: Partial<TodoProps> = {
+    items: [],
+    title: 'Todo List',
+    size: 'md',
+    placeholder: 'Add a new todo',
+    showCompleted: true,
+    ...initialProps,
+  };
+
+  // State
+  const [items, setItems] = useState<TodoItem[]>(defaultProps.items || []);
+  const [inputText, setInputText] = useState<string>('');
+
+  /**
+   * Generate todo classes based on properties
+   * @param props - Todo properties
+   * @returns Class string for the todo component
+   */
+  const generateTodoClasses = (props: Partial<TodoProps>): string => {
+    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();
+  };
+
+  /**
+   * Generate todo item classes based on completion status
+   * @param item - Todo item
+   * @returns Class string for the todo item
+   */
+  const generateItemClasses = (item: TodoItem): string => {
+    const completedClass = item.completed ? TODO.CLASSES.COMPLETED : '';
+    return `${TODO.CLASSES.ITEM} ${completedClass}`.trim();
+  };
+
+  /**
+   * Add a new todo item
+   * @param text - Text for the new todo
+   * @returns The new todo item
+   */
+  const addTodo = (text: string): TodoItem | null => {
+    if (!text.trim()) return null;
+
+    const newItem: TodoItem = {
+      id: uuidv4(),
+      text: text.trim(),
+      completed: false,
+    };
+
+    setItems(prevItems => [...prevItems, newItem]);
+    setInputText('');
+    return newItem;
+  };
+
+  /**
+   * Toggle the completed state of a todo item
+   * @param id - ID of the todo item to toggle
+   * @returns Updated todo item or null if not found
+   */
+  const toggleTodo = (id: string): TodoItem | null => {
+    let updatedItem: TodoItem | null = null;
+
+    setItems(prevItems => {
+      return prevItems.map(item => {
+        if (item.id === id) {
+          updatedItem = { ...item, completed: !item.completed };
+          return updatedItem;
+        }
+        return item;
+      });
+    });
+
+    return updatedItem;
+  };
+
+  /**
+   * Delete a todo item
+   * @param id - ID of the todo item to delete
+   * @returns Boolean indicating successful deletion
+   */
+  const deleteTodo = (id: string): boolean => {
+    const initialLength = items.length;
+
+    setItems(prevItems => prevItems.filter(item => item.id !== id));
+
+    return items.length !== initialLength;
+  };
+
+  /**
+   * Handle form submission for adding a new todo
+   * @param event - Form submit event
+   * @param onAddTodo - Optional callback when a todo is added
+   */
+  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);
+    }
+  };
+
+  /**
+   * Get filtered items based on showCompleted prop
+   * @param showCompleted - Whether to show completed items
+   * @returns Filtered todo items
+   */
+  const getFilteredItems = (showCompleted: boolean = true): TodoItem[] => {
+    if (showCompleted) return items;
+    return items.filter(item => !item.completed);
+  };
+
+  return {
+    items,
+    inputText,
+    setInputText,
+    addTodo,
+    toggleTodo,
+    deleteTodo,
+    handleSubmit,
+    generateTodoClasses,
+    generateItemClasses,
+    getFilteredItems,
+  };
+}