@shohojdhara/atomix 0.1.16 → 0.1.17

package/src/lib/composables/useRiver.ts

@@ -1,208 +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,53 +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/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,56 +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,146 +0,0 @@
-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
-  };
-}