@shohojdhara/atomix 0.1.30 → 0.2.1

package/src/lib/composables/index.ts

@@ -0,0 +1,63 @@
+// Button composables
+export * from './useButton';
+
+// Accordion composables
+export * from './useAccordion';
+
+// Badge composables
+export * from './useBadge';
+
+// Hero composables
+export * from './useHero';
+
+// River composables
+export * from './useRiver';
+
+// Spinner composables
+export * from './useSpinner';
+
+// Navbar composables
+export * from './useNavbar';
+
+// SideMenu composables
+export * from './useSideMenu';
+
+// EdgePanel composables
+export * from './useEdgePanel';
+
+// Todo composables
+export * from './useTodo';
+
+// Form composables
+export * from './useCheckbox';
+export * from './useForm';
+export * from './useFormGroup';
+export * from './useInput';
+export * from './useRadio';
+export * from './useSelect';
+export * from './useTextarea';
+
+// Export other composables as needed
+
+// New composables
+export * from './useBreadcrumb';
+export * from './useCard';
+export * from './useDataTable';
+export * from './useModal';
+export * from './usePagination';
+export * from './useSlider';
+
+// Chart composables - simplified
+export * from './useChartData';
+export * from './useChartScale';
+export * from './useChartInteraction';
+
+// Legacy chart composables (deprecated)
+export * from './useLineChart';
+export * from './useBarChart';
+export * from './usePieChart';
+
+// Theme composables
+
+// Block composables
+export * from './useBlock';

package/src/lib/composables/useAccordion.ts

@@ -0,0 +1,129 @@
+import { AccordionProps, AccordionState, IconPosition, ElementRefs } from '../types/components';
+import { useState, useEffect, useRef } from 'react';
+import { ACCORDION } from '../constants/components';
+
+/**
+ * Accordion functionality hook result
+ */
+interface UseAccordionResult {
+  /** Current accordion state */
+  state: AccordionState;
+  /** Toggle the accordion open/closed */
+  toggle: () => void;
+  /** Update the panel height based on content */
+  updatePanelHeight: () => void;
+  /** Reference to the panel element */
+  panelRef: React.RefObject<HTMLDivElement | null>;
+  /** Reference to the content element */
+  contentRef: React.RefObject<HTMLDivElement | null>;
+  /** Generate accordion class names based on state */
+  generateClassNames: (baseClassName?: string) => string;
+  /** Generate header class names */
+  generateHeaderClassNames: () => string;
+}
+
+/**
+ * Accordion functionality hook
+ * @param initialProps - Initial accordion properties
+ * @returns Accordion state and methods
+ */
+export function useAccordion(
+  initialProps?: Partial<AccordionProps> & {
+    isOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+  }
+): UseAccordionResult {
+  // Default accordion properties
+  const defaultProps: Partial<AccordionProps> & {
+    isOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+  } = {
+    defaultOpen: false,
+    disabled: false,
+    iconPosition: 'right' as IconPosition,
+    ...initialProps,
+  };
+
+  // Controlled/uncontrolled open state
+  const isControlled = typeof defaultProps.isOpen === 'boolean';
+  const [internalOpen, setInternalOpen] = useState(defaultProps.defaultOpen || false);
+  const isOpen = isControlled ? defaultProps.isOpen! : internalOpen;
+
+  const [panelHeight, setPanelHeight] = useState<string>(isOpen ? 'auto' : '0px');
+
+  const panelRef = useRef<HTMLDivElement>(null);
+  const contentRef = useRef<HTMLDivElement>(null);
+
+  /**
+   * Toggle accordion open/closed state
+   */
+  const toggle = (): void => {
+    if (!defaultProps.disabled) {
+      if (isControlled) {
+        defaultProps.onOpenChange && defaultProps.onOpenChange(!isOpen);
+      } else {
+        setInternalOpen(prev => !prev);
+      }
+    }
+  };
+
+  /**
+   * Update panel height based on content
+   */
+  const updatePanelHeight = (): void => {
+    if (contentRef.current && panelRef.current) {
+      const height = isOpen ? `${contentRef.current.clientHeight}px` : '0px';
+      panelRef.current.style.setProperty(ACCORDION.CSS_VARS.PANEL_HEIGHT, height);
+      setPanelHeight(height);
+    }
+  };
+
+  /**
+   * Effect to update panel height when open state changes
+   */
+  useEffect(() => {
+    updatePanelHeight();
+  }, [isOpen]);
+
+  /**
+   * Effect to handle window resize and update panel height
+   */
+  useEffect(() => {
+    const handleResize = (): void => {
+      if (isOpen) {
+        updatePanelHeight();
+      }
+    };
+
+    window.addEventListener('resize', handleResize);
+    return () => window.removeEventListener('resize', handleResize);
+  }, [isOpen]);
+
+  /**
+   * Generate accordion class names based on state
+   */
+  const generateClassNames = (baseClassName: string = ''): string => {
+    const openClass = isOpen ? ACCORDION.CLASSES.IS_OPEN : '';
+    const disabledClass = defaultProps.disabled ? ACCORDION.CLASSES.IS_DISABLED : '';
+    return `c-accordion ${openClass} ${disabledClass} ${baseClassName}`.trim();
+  };
+
+  /**
+   * Generate header class names
+   */
+  const generateHeaderClassNames = (): string => {
+    const iconPositionClass =
+      defaultProps.iconPosition === 'left' ? 'c-accordion__header--icon-left' : '';
+    return `c-accordion__header ${iconPositionClass}`.trim();
+  };
+
+  return {
+    state: { isOpen, panelHeight },
+    toggle,
+    updatePanelHeight,
+    panelRef,
+    contentRef,
+    generateClassNames,
+    generateHeaderClassNames,
+  };
+}

package/src/lib/composables/useAmbientMode.ts

@@ -0,0 +1,90 @@
+import { RefObject, useEffect, useRef } from 'react';
+
+export interface UseAmbientModeOptions {
+  videoRef: RefObject<HTMLVideoElement | null>;
+  canvasRef: RefObject<HTMLCanvasElement | null>;
+  enabled: boolean;
+  blur?: number;
+  opacity?: number;
+  scale?: number;
+}
+
+export function useAmbientMode({
+  videoRef,
+  canvasRef,
+  enabled,
+  blur = 60,
+  opacity = 0.6,
+  scale = 1.2,
+}: UseAmbientModeOptions) {
+  const animationFrameRef = useRef<number>(60);
+
+  useEffect(() => {
+    if (!enabled || !videoRef.current || !canvasRef.current) return undefined;
+
+    const video = videoRef.current;
+    const canvas = canvasRef.current;
+    const ctx = canvas.getContext('2d');
+
+    if (!ctx) return undefined;
+
+    const updateAmbientEffect = () => {
+      if (!video || !canvas || !ctx) return;
+
+      // Set canvas size to match container
+      const rect = video.getBoundingClientRect();
+      canvas.width = rect.width * scale;
+      canvas.height = rect.height * scale;
+
+      // Draw video frame to canvas
+      ctx.filter = `blur(${blur}px)`;
+      ctx.globalAlpha = opacity;
+
+      try {
+        ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
+      } catch (e) {
+        // Handle CORS or other drawing errors silently
+      }
+
+      if (enabled) {
+        animationFrameRef.current = requestAnimationFrame(updateAmbientEffect);
+      }
+    };
+
+    // Start ambient effect when video plays
+    const handlePlay = () => {
+      if (enabled) {
+        updateAmbientEffect();
+      }
+    };
+
+    const handlePause = () => {
+      if (animationFrameRef.current) {
+        cancelAnimationFrame(animationFrameRef.current);
+      }
+    };
+
+    video.addEventListener('play', handlePlay);
+    video.addEventListener('pause', handlePause);
+    video.addEventListener('ended', handlePause);
+
+    // Initial setup if video is already playing
+    if (!video.paused) {
+      handlePlay();
+    }
+
+    return () => {
+      video.removeEventListener('play', handlePlay);
+      video.removeEventListener('pause', handlePause);
+      video.removeEventListener('ended', handlePause);
+
+      if (animationFrameRef.current) {
+        cancelAnimationFrame(animationFrameRef.current);
+      }
+    };
+  }, [enabled, blur, opacity, scale, videoRef, canvasRef]);
+
+  return {
+    isActive: enabled,
+  };
+}

package/src/lib/composables/useBadge.ts

@@ -0,0 +1,42 @@
+import { BadgeProps } from '../types/components';
+import { BADGE } from '../constants/components';
+
+/**
+ * Badge state and functionality
+ * @param initialProps - Initial badge properties
+ * @returns Badge state and methods
+ */
+export function useBadge(initialProps?: Partial<BadgeProps>) {
+  // Default badge properties
+  const defaultProps: Partial<BadgeProps> = {
+    variant: 'primary',
+    size: 'md',
+    disabled: false,
+    ...initialProps,
+  };
+
+  /**
+   * Generate badge class based on properties
+   * @param props - Badge properties
+   * @returns Class string
+   */
+  const generateBadgeClass = (props: Partial<BadgeProps>): string => {
+    const {
+      variant = defaultProps.variant,
+      size = defaultProps.size,
+      disabled = defaultProps.disabled,
+      className = '',
+    } = props;
+
+    const sizeClass = size === 'md' ? '' : `${BADGE.SIZE_PREFIX}${size}`;
+    const variantClass = variant ? `${BADGE.VARIANT_PREFIX}${variant}` : '';
+    const disabledClass = disabled ? 'c-badge--disabled' : '';
+
+    return `${BADGE.BASE_CLASS} ${variantClass} ${sizeClass} ${disabledClass} ${className}`.trim();
+  };
+
+  return {
+    defaultProps,
+    generateBadgeClass,
+  };
+}

package/src/lib/composables/useBarChart.ts

@@ -0,0 +1,365 @@
+import { useCallback, useState } from 'react';
+import { ChartDataset } from '../types/components';
+
+/**
+ * Bar chart specific options
+ */
+export interface BarChartOptions {
+  /**
+   * Whether bars are stacked
+   */
+  stacked?: boolean;
+
+  /**
+   * Whether to show values on bars
+   */
+  showValues?: boolean;
+
+  /**
+   * Corner radius for bars
+   */
+  cornerRadius?: number;
+
+  /**
+   * Padding between bar groups
+   */
+  groupPadding?: number;
+
+  /**
+   * Padding between individual bars
+   */
+  barPadding?: number;
+
+  /**
+   * Whether to enable animations
+   */
+  enableAnimations?: boolean;
+
+  /**
+   * Animation duration in milliseconds
+   */
+  animationDuration?: number;
+
+  /**
+   * Animation delay between bars
+   */
+  animationDelay?: number;
+
+  /**
+   * Whether to use gradients
+   */
+  useGradients?: boolean;
+
+  /**
+   * Whether to enable hover effects
+   */
+  enableHoverEffects?: boolean;
+
+  /**
+   * Whether to enable data labels
+   */
+  enableDataLabels?: boolean;
+
+  /**
+   * Data label position
+   */
+  dataLabelPosition?: 'inside' | 'outside' | 'center';
+
+  /**
+   * Value formatter function
+   */
+  valueFormatter?: (value: number) => string;
+
+  /**
+   * Minimum bar height
+   */
+  minBarHeight?: number;
+
+  /**
+   * Maximum bar width
+   */
+  maxBarWidth?: number;
+}
+
+/**
+ * Bar dimensions interface
+ */
+export interface BarDimensions {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+  value: number;
+  datasetIndex: number;
+  pointIndex: number;
+}
+
+/**
+ * Hook for bar chart functionality
+ */
+export function useBarChart(datasets: ChartDataset[], options: BarChartOptions = {}) {
+  const [hoveredBar, setHoveredBar] = useState<{
+    datasetIndex: number;
+    pointIndex: number;
+    x: number;
+    y: number;
+  } | null>(null);
+
+  const [animationProgress, setAnimationProgress] = useState(0);
+  const [isAnimating, setIsAnimating] = useState(false);
+
+  // Calculate bar dimensions
+  const calculateBarDimensions = useCallback(
+    (
+      datasets: ChartDataset[],
+      width: number,
+      height: number,
+      padding = { top: 20, right: 30, bottom: 40, left: 50 },
+      horizontal = false
+    ): BarDimensions[] => {
+      if (!datasets.length) return [];
+
+      const innerWidth = width - padding.left - padding.right;
+      const innerHeight = height - padding.top - padding.bottom;
+      const numCategories = datasets[0]?.data?.length || 0;
+      const numDatasets = datasets.length;
+
+      if (numCategories === 0) return [];
+
+      // Calculate value bounds
+      const allValues = datasets.flatMap(
+        dataset => dataset.data?.map(d => d.value).filter(v => typeof v === 'number') || []
+      );
+      const minValue = Math.min(0, ...allValues);
+      const maxValue = Math.max(...allValues);
+      const valueRange = maxValue - minValue;
+
+      const bars: BarDimensions[] = [];
+      const stackedPositions = Array(numCategories).fill(0);
+
+      datasets.forEach((dataset, datasetIndex) => {
+        dataset.data?.forEach((point, categoryIndex) => {
+          const value = typeof point.value === 'number' ? point.value : 0;
+          if (isNaN(value) || !isFinite(value)) return;
+
+          let barX, barY, barWidth, barHeight;
+
+          if (horizontal) {
+            const categoryHeight = innerHeight / numCategories;
+            const availableHeight = categoryHeight * (1 - (options.groupPadding || 0.2));
+
+            barHeight = options.stacked ? availableHeight : availableHeight / numDatasets;
+            barY =
+              padding.top + categoryIndex * categoryHeight + (categoryHeight - availableHeight) / 2;
+
+            if (!options.stacked) {
+              barY += datasetIndex * barHeight * (1 + (options.barPadding || 0.05));
+            }
+
+            barX = padding.left;
+            barWidth = ((value - minValue) / valueRange) * innerWidth;
+
+            if (options.stacked && datasetIndex > 0) {
+              barX =
+                padding.left +
+                ((stackedPositions[categoryIndex] - minValue) / valueRange) * innerWidth;
+              stackedPositions[categoryIndex] += value;
+            } else if (options.stacked) {
+              stackedPositions[categoryIndex] = value;
+            }
+          } else {
+            const categoryWidth = innerWidth / numCategories;
+            const availableWidth = categoryWidth * (1 - (options.groupPadding || 0.2));
+
+            barWidth = options.stacked ? availableWidth : availableWidth / numDatasets;
+            barX =
+              padding.left + categoryIndex * categoryWidth + (categoryWidth - availableWidth) / 2;
+
+            if (!options.stacked) {
+              barX += datasetIndex * barWidth * (1 + (options.barPadding || 0.05));
+            }
+
+            barHeight = ((value - minValue) / valueRange) * innerHeight;
+            barY = height - padding.bottom - barHeight;
+
+            if (options.stacked && datasetIndex > 0) {
+              const stackedHeight =
+                ((stackedPositions[categoryIndex] - minValue) / valueRange) * innerHeight;
+              barY = height - padding.bottom - stackedHeight - barHeight;
+              stackedPositions[categoryIndex] += value;
+            } else if (options.stacked) {
+              stackedPositions[categoryIndex] = value;
+            }
+          }
+
+          // Apply minimum bar height
+          if (options.minBarHeight && (horizontal ? barWidth : barHeight) < options.minBarHeight) {
+            if (horizontal) {
+              barWidth = options.minBarHeight;
+            } else {
+              barHeight = options.minBarHeight;
+              barY = height - padding.bottom - barHeight;
+            }
+          }
+
+          // Apply maximum bar width
+          if (options.maxBarWidth && (horizontal ? barHeight : barWidth) > options.maxBarWidth) {
+            if (horizontal) {
+              barHeight = options.maxBarWidth;
+              barY =
+                padding.top +
+                categoryIndex * (innerHeight / numCategories) +
+                (innerHeight / numCategories - barHeight) / 2;
+            } else {
+              barWidth = options.maxBarWidth;
+              const categoryWidth = (width - padding.left - padding.right) / numCategories;
+              barX = padding.left + categoryIndex * categoryWidth + (categoryWidth - barWidth) / 2;
+            }
+          }
+
+          bars.push({
+            x: Math.max(barX, 0),
+            y: Math.max(barY, 0),
+            width: Math.max(barWidth, 0),
+            height: Math.max(barHeight, 0),
+            value,
+            datasetIndex,
+            pointIndex: categoryIndex,
+          });
+        });
+      });
+
+      return bars;
+    },
+    [
+      options.stacked,
+      options.groupPadding,
+      options.barPadding,
+      options.minBarHeight,
+      options.maxBarWidth,
+    ]
+  );
+
+  // Animation helpers
+  const startAnimation = useCallback(() => {
+    if (!options.enableAnimations) return;
+
+    setIsAnimating(true);
+    setAnimationProgress(0);
+
+    const duration = options.animationDuration || 1000;
+    const startTime = Date.now();
+
+    const animate = () => {
+      const elapsed = Date.now() - startTime;
+      const progress = Math.min(elapsed / duration, 1);
+
+      // Easing function (ease-out)
+      const easedProgress = 1 - Math.pow(1 - progress, 3);
+      setAnimationProgress(easedProgress);
+
+      if (progress < 1) {
+        requestAnimationFrame(animate);
+      } else {
+        setIsAnimating(false);
+      }
+    };
+
+    requestAnimationFrame(animate);
+  }, [options.enableAnimations, options.animationDuration]);
+
+  // Bar hover handlers
+  const handleBarHover = useCallback(
+    (datasetIndex: number, pointIndex: number, x: number, y: number) => {
+      setHoveredBar({ datasetIndex, pointIndex, x, y });
+    },
+    []
+  );
+
+  const handleBarLeave = useCallback(() => {
+    setHoveredBar(null);
+  }, []);
+
+  // Generate gradient definitions
+  const generateGradients = useCallback(
+    (datasets: ChartDataset[]) => {
+      if (!options.useGradients) return [];
+
+      return datasets.map((dataset, index) => {
+        const baseColor = dataset.color || `var(--atomix-color-${index + 1})`;
+
+        return {
+          id: `bar-gradient-${index}`,
+          stops: [
+            { offset: '0%', color: baseColor, opacity: 0.8 },
+            { offset: '100%', color: baseColor, opacity: 0.4 },
+          ],
+        };
+      });
+    },
+    [options.useGradients]
+  );
+
+  // Format value for display
+  const formatValue = useCallback(
+    (value: number) => {
+      if (options.valueFormatter) {
+        return options.valueFormatter(value);
+      }
+      return value.toString();
+    },
+    [options.valueFormatter]
+  );
+
+  // Calculate data label position
+  const getDataLabelPosition = useCallback(
+    (bar: BarDimensions, horizontal = false) => {
+      const { x, y, width, height } = bar;
+
+      switch (options.dataLabelPosition) {
+        case 'inside':
+          return {
+            x: horizontal ? x + width / 2 : x + width / 2,
+            y: horizontal ? y + height / 2 : y + height / 2,
+          };
+        case 'outside':
+          return {
+            x: horizontal ? x + width + 5 : x + width / 2,
+            y: horizontal ? y + height / 2 : y - 5,
+          };
+        case 'center':
+        default:
+          return {
+            x: x + width / 2,
+            y: y + height / 2,
+          };
+      }
+    },
+    [options.dataLabelPosition]
+  );
+
+  return {
+    // State
+    hoveredBar,
+    animationProgress,
+    isAnimating,
+
+    // Calculations
+    calculateBarDimensions,
+    generateGradients,
+    getDataLabelPosition,
+
+    // Handlers
+    handleBarHover,
+    handleBarLeave,
+    startAnimation,
+
+    // Utilities
+    formatValue,
+
+    // State setters
+    setHoveredBar,
+    setAnimationProgress,
+    setIsAnimating,
+  };
+}