@shohojdhara/atomix 0.1.17 → 0.1.18

package/src/lib/composables/useHero.ts

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

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

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

@@ -0,0 +1,110 @@
+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,
+  };
+}