@shohojdhara/atomix 0.1.26 → 0.1.28

package/src/lib/composables/useRiver.ts

@@ -1,205 +0,0 @@
-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

@@ -1,52 +0,0 @@
-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

@@ -1,197 +0,0 @@
-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

@@ -1,42 +0,0 @@
-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

@@ -1,55 +0,0 @@
-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

@@ -1,141 +0,0 @@
-import { useState } from 'react';
-import { TodoItem, TodoProps } from '../types/components';
-import { generateUUID } from '../utils';
-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: generateUUID(),
-      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,
-  };
-}