@shohojdhara/atomix 0.1.30 → 0.2.2

package/src/lib/composables/useFormGroup.ts

@@ -0,0 +1,51 @@
+import { FormGroupProps } from '../types/components';
+import { FORM_GROUP } from '../constants/components';
+
+/**
+ * Form Group state and functionality
+ * @param initialProps - Initial form group properties
+ * @returns Form Group state and methods
+ */
+export function useFormGroup(initialProps?: Partial<FormGroupProps>) {
+  // Default form group properties
+  const defaultProps: Partial<FormGroupProps> = {
+    size: 'md',
+    disabled: false,
+    invalid: false,
+    valid: false,
+    ...initialProps,
+  };
+
+  /**
+   * Generate form group class based on properties
+   * @param props - Form group properties
+   * @returns Class string
+   */
+  const generateFormGroupClass = (props: Partial<FormGroupProps>): string => {
+    const {
+      size = defaultProps.size,
+      disabled = defaultProps.disabled,
+      invalid = defaultProps.invalid,
+      valid = defaultProps.valid,
+      className = '',
+    } = props;
+
+    const sizeClass =
+      size === 'md' ? '' : size === 'sm' ? FORM_GROUP.CLASSES.SMALL : FORM_GROUP.CLASSES.LARGE;
+
+    const validationClass = invalid
+      ? FORM_GROUP.CLASSES.INVALID
+      : valid
+        ? FORM_GROUP.CLASSES.VALID
+        : '';
+
+    const disabledClass = disabled ? FORM_GROUP.CLASSES.DISABLED : '';
+
+    return `${FORM_GROUP.CLASSES.BASE} ${sizeClass} ${validationClass} ${disabledClass} ${className}`.trim();
+  };
+
+  return {
+    defaultProps,
+    generateFormGroupClass,
+  };
+}

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 | null>;
+
+  /**
+   * Reference to the video element
+   */
+  videoRef: React.RefObject<HTMLVideoElement | null>;
+
+  /**
+   * 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/useLineChart.ts

@@ -0,0 +1,319 @@
+import { useCallback, useMemo, useState } from 'react';
+import { ChartDataPoint, ChartDataset } from '../types/components';
+
+/**
+ * Line chart specific options
+ */
+export interface LineChartOptions {
+  /**
+   * Whether to show area fill under the line
+   */
+  showArea?: boolean;
+
+  /**
+   * Whether to show data points
+   */
+  showDataPoints?: boolean;
+
+  /**
+   * Whether to use smooth curves
+   */
+  smooth?: boolean;
+
+  /**
+   * Curve tension (0-1)
+   */
+  tension?: number;
+
+  /**
+   * Fill opacity for area charts
+   */
+  fillOpacity?: number;
+
+  /**
+   * Whether to use gradient fills
+   */
+  useGradient?: boolean;
+
+  /**
+   * Gradient direction
+   */
+  gradientDirection?: 'horizontal' | 'vertical';
+
+  /**
+   * Line width in pixels
+   */
+  lineWidth?: number;
+
+  /**
+   * Point radius in pixels
+   */
+  pointRadius?: number;
+
+  /**
+   * Whether to show point labels
+   */
+  showPointLabels?: boolean;
+
+  /**
+   * Whether to enable zoom functionality
+   */
+  enableZoom?: boolean;
+
+  /**
+   * Whether to enable pan functionality
+   */
+  enablePan?: boolean;
+
+  /**
+   * Whether to show crosshair
+   */
+  showCrosshair?: boolean;
+
+  /**
+   * Whether to enable keyboard navigation
+   */
+  enableKeyboardNavigation?: boolean;
+
+  /**
+   * Whether to show trend lines
+   */
+  showTrendLines?: boolean;
+
+  /**
+   * Whether to show moving averages
+   */
+  showMovingAverages?: boolean;
+
+  /**
+   * Moving average periods
+   */
+  movingAveragePeriods?: number[];
+
+  /**
+   * Whether to enable real-time updates
+   */
+  enableRealTime?: boolean;
+
+  /**
+   * Real-time update interval in milliseconds
+   */
+  realTimeInterval?: number;
+
+  /**
+   * Maximum number of data points for performance
+   */
+  maxDataPoints?: number;
+
+  /**
+   * Whether to enable data decimation
+   */
+  enableDecimation?: boolean;
+}
+
+/**
+ * Hook for line chart functionality
+ */
+export function useLineChart(datasets: ChartDataset[], options: LineChartOptions = {}) {
+  const [zoomLevel, setZoomLevel] = useState(1);
+  const [panOffset, setPanOffset] = useState({ x: 0, y: 0 });
+  const [hoveredPoint, setHoveredPoint] = useState<{
+    datasetIndex: number;
+    pointIndex: number;
+    x: number;
+    y: number;
+  } | null>(null);
+
+  // Calculate moving averages
+  const calculateMovingAverage = useCallback((data: ChartDataPoint[], period: number) => {
+    const result: ChartDataPoint[] = [];
+
+    for (let i = period - 1; i < data.length; i++) {
+      const sum = data.slice(i - period + 1, i + 1).reduce((acc, point) => acc + point.value, 0);
+      const average = sum / period;
+
+      const dataPoint = data[i];
+      if (dataPoint) {
+        result.push({
+          label: dataPoint.label,
+          value: average,
+          color: 'rgba(255, 255, 255, 0.5)',
+        });
+      }
+    }
+
+    return result;
+  }, []);
+
+  // Calculate trend line using linear regression
+  const calculateTrendLine = useCallback((data: ChartDataPoint[]): (ChartDataPoint | null)[] => {
+    const n = data.length;
+    if (n < 2) return data.map((): null => null);
+
+    const xSum = data.reduce((sum, _, i) => sum + i, 0);
+    const ySum = data.reduce((sum, point) => sum + point.value, 0);
+    const xySum = data.reduce((sum, point, i) => sum + i * point.value, 0);
+    const x2Sum = data.reduce((sum, _, i) => sum + i * i, 0);
+
+    const slope = (n * xySum - xSum * ySum) / (n * x2Sum - xSum * xSum);
+    const intercept = (ySum - slope * xSum) / n;
+
+    return data.map((point, i) => ({
+      label: point.label,
+      value: slope * i + intercept,
+      color: 'rgba(255, 255, 255, 0.3)',
+    }));
+  }, []);
+
+  // Generate SVG path for smooth curves
+  const generateSmoothPath = useCallback(
+    (points: Array<{ x: number; y: number }>, tension = 0.4) => {
+      if (points.length < 2) return '';
+
+      const controlPoints = points.map((point, i) => {
+        if (i === 0 || i === points.length - 1) {
+          return { cp1x: point.x, cp1y: point.y, cp2x: point.x, cp2y: point.y };
+        }
+
+        const prev = points[i - 1];
+        const next = points[i + 1];
+        if (!prev || !next) {
+          return { cp1x: point.x, cp1y: point.y, cp2x: point.x, cp2y: point.y };
+        }
+        const dx = next.x - prev.x;
+        const dy = next.y - prev.y;
+
+        return {
+          cp1x: point.x - dx * tension,
+          cp1y: point.y - dy * tension,
+          cp2x: point.x + dx * tension,
+          cp2y: point.y + dy * tension,
+        };
+      });
+
+      const firstPoint = points[0];
+      if (!firstPoint) return '';
+      let path = `M ${firstPoint.x},${firstPoint.y}`;
+
+      for (let i = 1; i < points.length; i++) {
+        const cp = controlPoints[i - 1];
+        const currentControlPoint = controlPoints[i];
+        const currentPoint = points[i];
+
+        if (!cp || !currentControlPoint || !currentPoint) continue;
+
+        path += ` C ${cp.cp2x},${cp.cp2y} ${currentControlPoint.cp1x},${currentControlPoint.cp1y} ${currentPoint.x},${currentPoint.y}`;
+      }
+
+      return path;
+    },
+    []
+  );
+
+  // Zoom handlers
+  const handleZoom = useCallback(
+    (delta: number, centerX: number, centerY: number) => {
+      if (!options.enableZoom) return;
+
+      const zoomFactor = delta > 0 ? 0.9 : 1.1;
+      const newZoomLevel = Math.max(0.1, Math.min(10, zoomLevel * zoomFactor));
+
+      setZoomLevel(newZoomLevel);
+
+      // Adjust pan offset to zoom towards center
+      const zoomRatio = newZoomLevel / zoomLevel;
+      setPanOffset(prev => ({
+        x: centerX - (centerX - prev.x) * zoomRatio,
+        y: centerY - (centerY - prev.y) * zoomRatio,
+      }));
+    },
+    [zoomLevel, options.enableZoom]
+  );
+
+  // Pan handlers
+  const handlePan = useCallback(
+    (deltaX: number, deltaY: number) => {
+      if (!options.enablePan) return;
+
+      setPanOffset(prev => ({
+        x: prev.x + deltaX,
+        y: prev.y + deltaY,
+      }));
+    },
+    [options.enablePan]
+  );
+
+  // Reset view
+  const resetView = useCallback(() => {
+    setZoomLevel(1);
+    setPanOffset({ x: 0, y: 0 });
+  }, []);
+
+  // Point hover handlers
+  const handlePointHover = useCallback(
+    (datasetIndex: number, pointIndex: number, x: number, y: number) => {
+      setHoveredPoint({ datasetIndex, pointIndex, x, y });
+    },
+    []
+  );
+
+  const handlePointLeave = useCallback(() => {
+    setHoveredPoint(null);
+  }, []);
+
+  // Process datasets with additional data
+  const processedDatasets = useMemo(() => {
+    return datasets.map(dataset => {
+      const processed = { ...dataset } as any;
+
+      // Add moving averages if enabled
+      if (options.showMovingAverages && options.movingAveragePeriods) {
+        processed.movingAverages = options.movingAveragePeriods.map(period => ({
+          period,
+          data: calculateMovingAverage(dataset.data, period),
+        }));
+      }
+
+      // Add trend line if enabled
+      if (options.showTrendLines) {
+        processed.trendLine = calculateTrendLine(dataset.data);
+      }
+
+      return processed;
+    });
+  }, [
+    datasets,
+    options.showMovingAverages,
+    options.movingAveragePeriods,
+    options.showTrendLines,
+    calculateMovingAverage,
+    calculateTrendLine,
+  ]);
+
+  return {
+    // State
+    zoomLevel,
+    panOffset,
+    hoveredPoint,
+
+    // Data
+    processedDatasets,
+
+    // Handlers
+    handleZoom,
+    handlePan,
+    resetView,
+    handlePointHover,
+    handlePointLeave,
+
+    // Utilities
+    calculateMovingAverage,
+    calculateTrendLine,
+    generateSmoothPath,
+
+    // State setters
+    setZoomLevel,
+    setPanOffset,
+    setHoveredPoint,
+  };
+}