@shohojdhara/atomix 0.1.27 → 0.1.28

package/src/lib/composables/useHero.ts

@@ -1,250 +0,0 @@
-import { useEffect, useRef } from 'react';
-import { HeroProps, HeroAlignment } from '../types/components';
-import { HERO } from '../constants/components';
-
-/**
- * Hero hook result interface
- */
-interface UseHeroResult {
-  /**
-   * Generate hero class names based on props
-   */
-  generateHeroClassNames: (baseClassName?: string) => string;
-
-  /**
-   * Generate image column class based on size
-   */
-  generateImageColClass: (size?: number) => string;
-
-  /**
-   * Generate content column class based on size
-   */
-  generateContentColClass: (size?: number) => string;
-
-  /**
-   * Determine if the hero has a background image
-   */
-  hasBackgroundImage: boolean;
-
-  /**
-   * Determine if the hero has a foreground image
-   */
-  hasForegroundImage: boolean;
-
-  /**
-   * Determine if content should be displayed in a grid
-   */
-  useGridLayout: boolean;
-
-  /**
-   * Reference to the hero element
-   */
-  heroRef: React.RefObject<HTMLDivElement>;
-
-  /**
-   * Reference to the video element
-   */
-  videoRef: React.RefObject<HTMLVideoElement>;
-
-  /**
-   * Apply parallax effect
-   */
-  applyParallaxEffect: (element: HTMLElement, intensity: number) => void;
-
-  /**
-   * Remove parallax effect
-   */
-  removeParallaxEffect: (element: HTMLElement) => void;
-}
-
-/**
- * Hook for Hero component functionality
- * @param initialProps - Initial hero props
- * @returns Hero methods
- */
-export function useHero(initialProps?: Partial<HeroProps>): UseHeroResult {
-  const heroRef = useRef<HTMLDivElement>(null);
-  const videoRef = useRef<HTMLVideoElement>(null);
-  const parallaxHandlerRef = useRef<((event: Event) => void) | null>(null);
-
-  const defaultProps: Partial<HeroProps> = {
-    alignment: 'left',
-    imageColSize: 7,
-    contentColSize: 5,
-    imageAlt: 'Hero image',
-    showOverlay: true,
-    fullViewportHeight: false,
-    contentWidth: undefined,
-    parallax: false,
-    parallaxIntensity: 0.5,
-    ...initialProps,
-  };
-
-  /**
-   * Check if the hero has a background image
-   */
-  const hasBackgroundImage = !!defaultProps.backgroundImageSrc;
-
-  /**
-   * Check if the hero has a foreground image
-   */
-  const hasForegroundImage = !!defaultProps.imageSrc;
-
-  /**
-   * Check if content should be displayed in a grid
-   */
-  const useGridLayout = hasForegroundImage && defaultProps.alignment !== 'center';
-
-  /**
-   * Apply parallax effect to hero background
-   */
-  const applyParallaxEffect = (element: HTMLElement, intensity: number = 0.5): void => {
-    if (!element) return;
-
-    // Ensure intensity is between 0 and 1
-    const safeIntensity = Math.max(0, Math.min(1, intensity));
-
-    // Add parallax class
-    element.classList.add('c-hero--parallax');
-
-    // Handle scroll event
-    const handleScroll = (): void => {
-      const scrollPosition = window.pageYOffset;
-      const offset = scrollPosition * safeIntensity;
-
-      // Apply transform to background
-      const bgElement = element.querySelector(HERO.SELECTORS.BG);
-      if (bgElement) {
-        (bgElement as HTMLElement).style.transform = `translateY(${offset}px)`;
-      }
-    };
-
-    // Store the handler for cleanup
-    parallaxHandlerRef.current = handleScroll;
-
-    // Add event listener
-    window.addEventListener('scroll', handleScroll);
-
-    // Initial call
-    handleScroll();
-  };
-
-  /**
-   * Remove parallax effect from hero
-   */
-  const removeParallaxEffect = (element: HTMLElement): void => {
-    if (!element) return;
-
-    // Remove class
-    element.classList.remove('c-hero--parallax');
-
-    // Remove transform
-    const bgElement = element.querySelector(HERO.SELECTORS.BG);
-    if (bgElement) {
-      (bgElement as HTMLElement).style.transform = '';
-    }
-
-    // Remove event listener
-    if (parallaxHandlerRef.current) {
-      window.removeEventListener('scroll', parallaxHandlerRef.current);
-      parallaxHandlerRef.current = null;
-    }
-  };
-
-  // Apply parallax effect if enabled
-  useEffect(() => {
-    const heroElement = heroRef.current;
-
-    if (heroElement && defaultProps.parallax && hasBackgroundImage) {
-      applyParallaxEffect(heroElement, defaultProps.parallaxIntensity);
-    }
-
-    return () => {
-      if (heroElement && parallaxHandlerRef.current) {
-        removeParallaxEffect(heroElement);
-      }
-    };
-  }, [defaultProps.parallax, defaultProps.parallaxIntensity, hasBackgroundImage]);
-
-  /**
-   * Generate hero class names based on props
-   * @param baseClassName - Additional class names
-   * @returns Combined class names string
-   */
-  const generateHeroClassNames = (baseClassName: string = ''): string => {
-    const classes = [HERO.SELECTORS.HERO.replace('.', '')];
-
-    // Add alignment class
-    if (defaultProps.alignment === 'center') {
-      classes.push(HERO.CLASSES.CENTER);
-    } else if (defaultProps.alignment === 'right') {
-      classes.push(HERO.CLASSES.RIGHT);
-    } else if (defaultProps.alignment === 'left') {
-      classes.push(HERO.CLASSES.LEFT);
-    }
-
-    // Add full viewport height class if needed
-    if (defaultProps.fullViewportHeight) {
-      classes.push(HERO.CLASSES.FULL_VH);
-    }
-
-    // Add parallax class if enabled
-    if (defaultProps.parallax) {
-      classes.push('c-hero--parallax');
-    }
-
-    // Add video background class if provided
-    if (defaultProps.videoBackground) {
-      classes.push('c-hero--video');
-    }
-
-    if (baseClassName) {
-      classes.push(baseClassName);
-    }
-
-    return classes.join(' ');
-  };
-
-  /**
-   * Determine content column order based on alignment
-   */
-  const contentFirst = defaultProps.alignment === 'left';
-
-  /**
-   * Generate image column class based on size
-   * @param size - Column size (1-12)
-   * @returns Column class
-   */
-  const generateImageColClass = (size: number = defaultProps.imageColSize || 7): string => {
-    const classes = [`o-grid__col o-grid__col--md-${size}`];
-
-    // Add responsive margin if needed for mobile view
-    if (defaultProps.alignment === 'left') {
-      classes.push('u-mt-5 u-mt-md-0');
-    }
-
-    return classes.join(' ');
-  };
-
-  /**
-   * Generate content column class based on size
-   * @param size - Column size (1-12)
-   * @returns Column class
-   */
-  const generateContentColClass = (size: number = defaultProps.contentColSize || 5): string => {
-    return `o-grid__col o-grid__col--md-${size}`;
-  };
-
-  return {
-    generateHeroClassNames,
-    generateImageColClass,
-    generateContentColClass,
-    hasBackgroundImage,
-    hasForegroundImage,
-    useGridLayout,
-    heroRef,
-    videoRef,
-    applyParallaxEffect,
-    removeParallaxEffect,
-  };
-}

package/src/lib/composables/useInput.ts

@@ -1,58 +0,0 @@
-import { InputProps, ThemeColor } from '../types/components';
-import { INPUT } from '../constants/components';
-
-/**
- * Input state and functionality
- * @param initialProps - Initial input properties
- * @returns Input state and methods
- */
-export function useInput(initialProps?: Partial<InputProps>) {
-  // Default input properties
-  const defaultProps: Partial<InputProps> = {
-    size: 'md',
-    disabled: false,
-    invalid: false,
-    valid: false,
-    ...initialProps,
-  };
-
-  /**
-   * Generate input class based on properties
-   * @param props - Input properties
-   * @returns Class string
-   */
-  const generateInputClass = (props: Partial<InputProps> & { type?: string }): string => {
-    const {
-      size = defaultProps.size,
-      variant = defaultProps.variant,
-      disabled = defaultProps.disabled,
-      invalid = defaultProps.invalid,
-      valid = defaultProps.valid,
-      className = '',
-      type,
-    } = props;
-
-    const sizeClass =
-      size === 'md' ? '' : size === 'sm' ? INPUT.CLASSES.SMALL : INPUT.CLASSES.LARGE;
-
-    const variantClass = variant ? `c-input--${variant}` : '';
-
-    const textareaClass = type === 'textarea' ? 'c-input--textarea' : '';
-
-    let validationClass = '';
-    if (invalid) {
-      validationClass = INPUT.CLASSES.INVALID;
-    } else if (valid) {
-      validationClass = INPUT.CLASSES.VALID;
-    }
-
-    const disabledClass = disabled ? INPUT.CLASSES.DISABLED : '';
-
-    return `${INPUT.CLASSES.BASE} ${sizeClass} ${variantClass} ${textareaClass} ${validationClass} ${disabledClass} ${className}`.trim();
-  };
-
-  return {
-    defaultProps,
-    generateInputClass,
-  };
-}

package/src/lib/composables/useMessages.ts

@@ -1,77 +0,0 @@
-import { useState } from 'react';
-import { MessageItem } from '../types/components';
-
-interface UseMessagesProps {
-  /**
-   * Initial messages
-   */
-  initialMessages?: MessageItem[];
-
-  /**
-   * Callback when a message is sent
-   */
-  onSendMessage?: (text: string) => void;
-}
-
-interface UseMessagesReturn {
-  /**
-   * Current input value
-   */
-  inputValue: string;
-
-  /**
-   * Set input value
-   */
-  setInputValue: (value: string) => void;
-
-  /**
-   * Handle input change
-   */
-  handleInputChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
-
-  /**
-   * Handle form submission
-   */
-  handleSubmit: (e: React.FormEvent) => void;
-
-  /**
-   * Handle key down events
-   */
-  handleKeyDown: (e: React.KeyboardEvent) => void;
-}
-
-/**
- * Hook for managing Messages component state and behavior
- */
-export const useMessages = ({ onSendMessage }: UseMessagesProps = {}): UseMessagesReturn => {
-  const [inputValue, setInputValue] = useState('');
-
-  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setInputValue(e.target.value);
-  };
-
-  const handleSubmit = (e: React.FormEvent) => {
-    e.preventDefault();
-    if (inputValue.trim() && onSendMessage) {
-      onSendMessage(inputValue.trim());
-      setInputValue('');
-    }
-  };
-
-  const handleKeyDown = (e: React.KeyboardEvent) => {
-    if (e.key === 'Enter' && !e.shiftKey) {
-      e.preventDefault();
-      handleSubmit(e);
-    }
-  };
-
-  return {
-    inputValue,
-    setInputValue,
-    handleInputChange,
-    handleSubmit,
-    handleKeyDown,
-  };
-};
-
-export default useMessages;

package/src/lib/composables/useModal.ts

@@ -1,110 +0,0 @@
-import { useState, useCallback, useEffect } from 'react';
-
-export interface UseModalProps {
-  /**
-   * Whether the modal is open
-   */
-  isOpen?: boolean;
-
-  /**
-   * Callback when modal state changes
-   */
-  onOpenChange?: (isOpen: boolean) => void;
-
-  /**
-   * Callback when modal opens
-   */
-  onOpen?: () => void;
-
-  /**
-   * Callback when modal closes
-   */
-  onClose?: () => void;
-}
-
-export interface UseModalReturn {
-  /**
-   * Current open state
-   */
-  isOpen: boolean;
-
-  /**
-   * Function to open the modal
-   */
-  open: () => void;
-
-  /**
-   * Function to close the modal
-   */
-  close: () => void;
-
-  /**
-   * Function to toggle the modal
-   */
-  toggle: () => void;
-}
-
-/**
- * Hook for managing modal state
- */
-export function useModal({
-  isOpen: isOpenProp,
-  onOpenChange,
-  onOpen,
-  onClose,
-}: UseModalProps = {}): UseModalReturn {
-  // For uncontrolled usage
-  const [isOpenState, setIsOpenState] = useState(false);
-
-  // Determine if we're in controlled or uncontrolled mode
-  const isControlled = isOpenProp !== undefined;
-  const isOpen = isControlled ? !!isOpenProp : isOpenState;
-
-  // Update internal state when prop changes (for controlled mode)
-  useEffect(() => {
-    if (isControlled) {
-      setIsOpenState(!!isOpenProp);
-    }
-  }, [isOpenProp, isControlled]);
-
-  const updateOpen = useCallback(
-    (nextIsOpen: boolean) => {
-      // For uncontrolled mode, update internal state
-      if (!isControlled) {
-        setIsOpenState(nextIsOpen);
-      }
-
-      // Call the change handler in either mode
-      if (onOpenChange) {
-        onOpenChange(nextIsOpen);
-      }
-
-      // Call the specific handler
-      if (nextIsOpen && onOpen) {
-        onOpen();
-      } else if (!nextIsOpen && onClose) {
-        onClose();
-      }
-    },
-    [isControlled, onOpenChange, onOpen, onClose]
-  );
-
-  const open = useCallback(() => {
-    updateOpen(true);
-  }, [updateOpen]);
-
-  const close = useCallback(() => {
-    updateOpen(false);
-  }, [updateOpen]);
-
-  const toggle = useCallback(() => {
-    updateOpen(!isOpen);
-  }, [isOpen, updateOpen]);
-
-  return {
-    isOpen,
-    open,
-    close,
-    toggle,
-  };
-}