@shohojdhara/atomix 0.3.4 → 0.3.6

package/src/components/Upload/Upload.stories.tsx

@@ -1,22 +1,25 @@
-import { Meta, StoryFn } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 import React, { useState } from 'react';
 import { Upload } from './Upload';
+import { SIZES } from '../../lib/constants/components';
 
-export default {
+const meta = {
   title: 'Components/Upload',
   component: Upload,
   parameters: {
+    layout: 'centered',
     docs: {
       description: {
         component:
-          'A modern file upload component with drag & drop functionality, progress tracking, and multiple size variants.',
+          'The Upload component provides a modern file upload interface with drag & drop functionality, progress tracking, file preview, and validation. It supports single and multiple file uploads, custom file size limits, and provides visual feedback throughout the upload process. Ideal for forms requiring file attachments or media uploads.',
       },
     },
   },
+  tags: ['autodocs'],
   argTypes: {
     size: {
       control: { type: 'select' },
-      options: ['sm', 'md', 'lg'],
+      options: SIZES,
       defaultValue: 'md',
       description: 'Size variant of the upload component',
     },
@@ -56,33 +59,37 @@ export default {
       description: 'Helper text displayed below the button',
     },
   },
-} as Meta<typeof Upload>;
+} satisfies Meta<typeof Upload>;
 
-const Template: StoryFn<typeof Upload> = args => (
-  <div style={{ padding: '30px', maxWidth: '600px' }}>
-    <Upload {...args} />
-  </div>
-);
+export default meta;
+type Story = StoryObj<typeof meta>;
 
 // Default upload component
-export const Default = Template.bind({});
-Default.args = {
-  size: 'md',
-  title: 'Drag and Drop files here',
-  supportedFilesText: 'Files supported: PDF, XSLS, JPEG, PNG, Scanner',
-  buttonText: 'Choose File',
-  helperText: 'Maximum size: 5MB',
-};
-Default.parameters = {
-  docs: {
-    description: {
-      story: 'The default upload component with medium size and standard styling.',
+export const Default: Story = {
+  render: args => (
+    <div style={{ padding: '30px', maxWidth: '600px' }}>
+      <Upload {...args} />
+    </div>
+  ),
+  args: {
+    size: 'md',
+    title: 'Drag and Drop files here',
+    supportedFilesText: 'Files supported: PDF, XSLS, JPEG, PNG, Scanner',
+    buttonText: 'Choose File',
+    helperText: 'Maximum size: 5MB',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'The default upload component with medium size and standard styling.',
+      },
     },
   },
 };
 
 // Size Variants
-export const SizeVariants: StoryFn<typeof Upload> = () => (
+export const SizeVariants: Story = {
+  render: () => (
   <div style={{ padding: '30px' }}>
     <div style={{ marginBottom: '40px' }}>
       <h3 style={{ marginBottom: '20px', fontSize: '18px', fontWeight: '600' }}>Small Size</h3>
@@ -125,25 +132,36 @@ export const SizeVariants: StoryFn<typeof Upload> = () => (
       </div>
     </div>
   </div>
-);
-SizeVariants.parameters = {
-  docs: {
-    description: {
-      story: 'Upload component in different sizes: small (sm), medium (md), and large (lg).',
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Upload component in different sizes: small (sm), medium (md), and large (lg).',
+      },
     },
   },
 };
 
 // Disabled state
-export const Disabled = Template.bind({});
-Disabled.args = {
-  ...Default.args,
-  disabled: true,
-};
-Disabled.parameters = {
-  docs: {
-    description: {
-      story: 'Upload component in disabled state with reduced opacity and no interactions.',
+export const Disabled: Story = {
+  render: args => (
+    <div style={{ padding: '30px', maxWidth: '600px' }}>
+      <Upload {...args} />
+    </div>
+  ),
+  args: {
+    size: 'md',
+    title: 'Drag and Drop files here',
+    supportedFilesText: 'Files supported: PDF, XSLS, JPEG, PNG, Scanner',
+    buttonText: 'Choose File',
+    helperText: 'Maximum size: 5MB',
+    disabled: true,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Upload component in disabled state with reduced opacity and no interactions.',
+      },
     },
   },
 };
@@ -299,54 +317,71 @@ const WithStateControls: React.FC = () => {
   );
 };
 
-export const WithControls: StoryFn<typeof Upload> = () => <WithStateControls />;
-WithControls.parameters = {
-  docs: {
-    description: {
-      story:
-        'Interactive example showing different upload states: default, uploading with progress, success, and error states.',
+export const WithControls: Story = {
+  render: () => <WithStateControls />,
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Interactive example showing different upload states: default, uploading with progress, success, and error states.',
+      },
     },
   },
 };
 
 // Custom Icon
-export const CustomIcon = Template.bind({});
-CustomIcon.args = {
-  ...Default.args,
-  icon: <i className="icon-lux-upload-cloud"></i>,
-  title: 'Upload your documents',
-  supportedFilesText: 'Drag files here or click to browse',
-};
-CustomIcon.parameters = {
-  docs: {
-    description: {
-      story: 'Upload component with a custom icon and personalized text content.',
+export const CustomIcon: Story = {
+  render: args => (
+    <div style={{ padding: '30px', maxWidth: '600px' }}>
+      <Upload {...args} />
+    </div>
+  ),
+  args: {
+    size: 'md',
+    title: 'Upload your documents',
+    supportedFilesText: 'Drag files here or click to browse',
+    buttonText: 'Choose File',
+    helperText: 'Maximum size: 5MB',
+    icon: <i className="icon-lux-upload-cloud"></i>,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Upload component with a custom icon and personalized text content.',
+      },
     },
   },
 };
 
 // Multiple file upload
-export const MultipleFiles = Template.bind({});
-MultipleFiles.args = {
-  ...Default.args,
-  multiple: true,
-  buttonText: 'Choose Files',
-  title: 'Upload multiple files',
-  supportedFilesText: 'Select multiple files at once',
-  helperText: 'Maximum size: 5MB per file',
-};
-MultipleFiles.parameters = {
-  docs: {
-    description: {
-      story: 'Upload component configured to accept multiple files at once.',
+export const MultipleFiles: Story = {
+  render: args => (
+    <div style={{ padding: '30px', maxWidth: '600px' }}>
+      <Upload {...args} />
+    </div>
+  ),
+  args: {
+    size: 'md',
+    multiple: true,
+    buttonText: 'Choose Files',
+    title: 'Upload multiple files',
+    supportedFilesText: 'Select multiple files at once',
+    helperText: 'Maximum size: 5MB per file',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Upload component configured to accept multiple files at once.',
+      },
     },
   },
 };
 
 // Drag and Drop Demo
-export const DragDropDemo: StoryFn<typeof Upload> = () => {
-  const [dragState, setDragState] = useState<'idle' | 'dragging'>('idle');
-  const [uploadedFiles, setUploadedFiles] = useState<string[]>([]);
+export const DragDropDemo: Story = {
+  render: () => {
+    const [dragState, setDragState] = useState<'idle' | 'dragging'>('idle');
+    const [uploadedFiles, setUploadedFiles] = useState<string[]>([]);
 
   const handleFileSelect = (files: File[]) => {
     const fileNames = files.map(file => file.name);
@@ -415,20 +450,22 @@ export const DragDropDemo: StoryFn<typeof Upload> = () => {
         </div>
       )}
     </div>
-  );
-};
-DragDropDemo.parameters = {
-  docs: {
-    description: {
-      story:
-        'Interactive demonstration of drag & drop functionality with visual feedback and file tracking.',
+    );
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Interactive demonstration of drag & drop functionality with visual feedback and file tracking.',
+      },
     },
   },
 };
 
 // Different File Types
-export const FileTypeRestrictions: StoryFn<typeof Upload> = () => (
-  <div style={{ padding: '30px' }}>
+export const FileTypeRestrictions: Story = {
+  render: () => (
+    <div style={{ padding: '30px' }}>
     <div style={{ marginBottom: '40px' }}>
       <h3 style={{ marginBottom: '20px', fontSize: '18px', fontWeight: '600' }}>Images Only</h3>
       <div style={{ maxWidth: '500px' }}>
@@ -462,11 +499,12 @@ export const FileTypeRestrictions: StoryFn<typeof Upload> = () => (
       </div>
     </div>
   </div>
-);
-FileTypeRestrictions.parameters = {
-  docs: {
-    description: {
-      story: 'Upload components configured for specific file types with appropriate messaging.',
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Upload components configured for specific file types with appropriate messaging.',
+      },
     },
   },
 };

package/src/components/VideoPlayer/VideoPlayer.stories.tsx

@@ -9,10 +9,10 @@
  * @component VideoPlayer
  */
 
-import { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { fn } from '@storybook/test';
 import { useState, useEffect, useCallback, useMemo, useRef } from 'react';
 import React from 'react';
-import { fn } from '@storybook/test';
 import { VideoPlayerProps } from '../../lib/types/components';
 import { VideoPlayer } from './VideoPlayer';
 import type { RefObject } from 'react';
@@ -23,31 +23,15 @@ import type { RefObject } from 'react';
  * This defines the component's metadata, documentation, and controls
  * for the Storybook interface.
  */
-const meta: Meta<typeof VideoPlayer> = {
+const meta = {
   title: 'Components/VideoPlayer',
   component: VideoPlayer,
   parameters: {
     layout: 'centered',
     docs: {
       description: {
-        component: `
-# VideoPlayer Component
-
-An advanced, modern video player with comprehensive features, accessibility support, and optional glass morphism effects. Supports both regular video files and YouTube embeds with seamless integration.
-
-## Key Features
+        component: `The VideoPlayer component provides an advanced, modern video player with comprehensive features including custom controls, YouTube integration, glass morphism effects, and full accessibility support. It supports both regular video files and YouTube embeds with seamless auto-detection and provides a rich, interactive viewing experience.
 
-### 🎥 **Dual Video Support**
-- **Regular Videos**: Native HTML5 video with custom controls
-- **YouTube Integration**: Seamless YouTube embedding with auto-detection
-
-### ✨ **Glass Morphism Effects**
-- **Configurable Glass Overlay**: Optional frosted glass effects with AtomixGlass integration
-- **Custom Content Support**: Interactive overlays and call-to-action elements
-- **Multiple Glass Modes**: Standard, polar, prominent, and shader effects
-
-### 🎛️ **Advanced Controls**
-- **Custom UI**: Modern, responsive control interface
 - **Quality Selection**: Multiple video resolution options
 - **Playback Speed**: Adjustable speed controls (0.25x to 4x)
 - **Subtitle Support**: Multi-language subtitle tracks with WebVTT
@@ -69,8 +53,7 @@ An advanced, modern video player with comprehensive features, accessibility supp
 ### 📱 **Multi-Platform**
 - **Cross-Browser**: Works on all modern browsers
 - **Mobile Optimized**: Touch-friendly controls and responsive layout
-- **Performance**: Optimized for smooth playback and effects
-        `,
+- **Performance**: Optimized for smooth playback and effects`,
       },
     },
   },
@@ -164,10 +147,10 @@ An advanced, modern video player with comprehensive features, accessibility supp
       description: 'Additional CSS class names',
     },
   },
-};
+} satisfies Meta<typeof VideoPlayer>;
 
 export default meta;
-type Story = StoryObj<VideoPlayerProps>;
+type Story = StoryObj<typeof meta>;
 
 /**
  * Background Wrapper Component

package/src/components/index.ts

@@ -1,5 +1,6 @@
 export type { SliderProps, VideoPlayerProps } from '../lib/types/components';
-export { default as Accordion, type AccordionProps } from './Accordion/Accordion';
+export { default as Accordion } from './Accordion/Accordion';
+export type { AccordionProps } from '../lib/types/components';
 export { default as AtomixLogo, type AtomixLogoProps } from './AtomixLogo/AtomixLogo';
 export { default as AtomixGlass, type AtomixGlassProps } from './AtomixGlass';
 export { default as Avatar, type AvatarProps } from './Avatar/Avatar';
@@ -8,6 +9,7 @@ export { default as Badge, type BadgeProps } from './Badge/Badge';
 export { default as Block, type BlockProps } from './Block';
 export { default as Breadcrumb, type BreadcrumbProps } from './Breadcrumb/Breadcrumb';
 export { default as Button, type ButtonProps } from './Button/Button';
+export { default as ButtonGroup, type ButtonGroupProps } from './Button/ButtonGroup';
 export { default as Callout, type CalloutProps } from './Callout/Callout';
 export { default as Card, type CardProps } from './Card/Card';
 // Card sub-components
@@ -37,7 +39,7 @@ export {
   type BubbleDataPoint,
   type CandlestickChartProps,
   type CandlestickDataPoint,
-  type ChartProps,
+  // ChartProps exported separately from lib/types/components to avoid conflict
   type DonutChartProps,
   type FunnelChartProps,
   type FunnelDataPoint,
@@ -56,6 +58,8 @@ export {
   type WaterfallChartProps,
   type WaterfallDataPoint,
 } from './Chart';
+// Export ChartProps from lib/types/components to avoid duplicate export conflict
+export type { ChartProps } from '../lib/types/components';
 export {
   default as ColorModeToggle,
   type ColorModeToggleProps,

package/src/layouts/MasonryGrid/MasonryGrid.tsx

@@ -374,7 +374,7 @@ export const MasonryGrid = forwardRef<HTMLDivElement, MasonryGridProps>(
           const position = positions[index];
           if (!position) {
             return (
-              <div key={item.id} ref={item.ref} style={{ opacity: 0, position: 'absolute' }}>
+              <div key={item.id} ref={item.ref as React.LegacyRef<HTMLDivElement>} style={{ opacity: 0, position: 'absolute' }}>
                 {item.element}
               </div>
             );
@@ -382,7 +382,7 @@ export const MasonryGrid = forwardRef<HTMLDivElement, MasonryGridProps>(
           return (
             <div
               key={item.id}
-              ref={item.ref}
+              ref={item.ref as React.LegacyRef<HTMLDivElement>}
               className="o-masonry-grid__item"
               style={{
                 position: 'absolute',

package/src/lib/composables/useAtomixGlass.ts

@@ -1037,10 +1037,9 @@ export function useAtomixGlass({
     [onClick]
   );
 
-  // No-op handler for backward compatibility (mouse tracking now handled by shared tracker)
+  // Mouse tracking is now handled by shared global tracker
   const handleMouseMove = useCallback((_e: MouseEvent) => {
-    // Mouse tracking is now handled by shared global tracker
-    // This handler is kept for backward compatibility with existing code
+    // Mouse tracking handled by shared global tracker
   }, []);
 
   return {

package/src/lib/composables/useChartPerformance.ts

@@ -70,35 +70,33 @@ export function useChartPerformance() {
       height: number,
       padding: { top: number; right: number; bottom: number; left: number }
     ) => {
-      return useMemo(() => {
-        if (!datasets.length) return null;
-
-        const innerWidth = width - padding.left - padding.right;
-        const innerHeight = height - padding.top - padding.bottom;
-
-        // Calculate bounds efficiently
-        const allValues = datasets.flatMap(dataset => dataset.data.map(d => d.value));
-        const minValue = Math.min(...allValues);
-        const maxValue = Math.max(...allValues);
-        const valueRange = maxValue - minValue;
-
-        // Pre-calculate scale functions for better performance
-        const xScale = (i: number, dataLength: number) =>
-          padding.left + (i / (dataLength - 1)) * innerWidth;
-
-        const yScale = (value: number) =>
-          padding.top + innerHeight - ((value - minValue) / valueRange) * innerHeight;
-
-        return {
-          xScale,
-          yScale,
-          minValue,
-          maxValue,
-          valueRange,
-          innerWidth,
-          innerHeight,
-        };
-      }, [datasets, width, height, padding.top, padding.right, padding.bottom, padding.left]);
+      if (!datasets.length) return null;
+
+      const innerWidth = width - padding.left - padding.right;
+      const innerHeight = height - padding.top - padding.bottom;
+
+      // Calculate bounds efficiently
+      const allValues = datasets.flatMap(dataset => dataset.data.map(d => d.value));
+      const minValue = Math.min(...allValues);
+      const maxValue = Math.max(...allValues);
+      const valueRange = maxValue - minValue;
+
+      // Pre-calculate scale functions for better performance
+      const xScale = (i: number, dataLength: number) =>
+        padding.left + (i / (dataLength - 1)) * innerWidth;
+
+      const yScale = (value: number) =>
+        padding.top + innerHeight - ((value - minValue) / valueRange) * innerHeight;
+
+      return {
+        xScale,
+        yScale,
+        minValue,
+        maxValue,
+        valueRange,
+        innerWidth,
+        innerHeight,
+      };
     },
     []
   );
@@ -113,47 +111,65 @@ export function useChartPerformance() {
       viewportEnd: number,
       bufferSize: number = 50
     ) => {
-      return useMemo(() => {
-        if (data.length <= 1000) {
-          // No virtualization needed for small datasets
-          return {
-            visibleData: data,
-            startIndex: 0,
-            endIndex: data.length - 1,
-            isVirtualized: false,
-          };
-        }
-
-        const start = Math.max(0, viewportStart - bufferSize);
-        const end = Math.min(data.length - 1, viewportEnd + bufferSize);
-
+      if (data.length <= 1000) {
+        // No virtualization needed for small datasets
         return {
-          visibleData: data.slice(start, end + 1),
-          startIndex: start,
-          endIndex: end,
-          isVirtualized: true,
-          totalLength: data.length,
+          visibleData: data,
+          startIndex: 0,
+          endIndex: data.length - 1,
+          isVirtualized: false,
         };
-      }, [data, viewportStart, viewportEnd, bufferSize]);
+      }
+
+      const start = Math.max(0, viewportStart - bufferSize);
+      const end = Math.min(data.length - 1, viewportEnd + bufferSize);
+
+      return {
+        visibleData: data.slice(start, end + 1),
+        startIndex: start,
+        endIndex: end,
+        isVirtualized: true,
+        totalLength: data.length,
+      };
     },
     []
   );
 
   /**
    * Debounced data updates for real-time charts
+   * Returns a debounced function that maintains timeout state across calls
+   * Uses a closure to maintain state - each call to useDebouncedUpdates creates
+   * a new debounced function with its own persistent timeout state
    */
   const useDebouncedUpdates = useCallback((updateFunction: () => void, delay: number = 100) => {
-    const timeoutRef = useRef<NodeJS.Timeout | null>(null);
-
-    return useCallback(() => {
-      if (timeoutRef.current) {
-        clearTimeout(timeoutRef.current);
+    // Use a closure variable to maintain timeout state across multiple calls to the returned function
+    // This variable is created once when useDebouncedUpdates is called and persists
+    // across all invocations of the returned debounced function
+    let timeoutId: NodeJS.Timeout | null = null;
+
+    const debouncedFn: (() => void) & { cancel: () => void } = () => {
+      // Clear any existing timeout before setting a new one
+      if (timeoutId !== null) {
+        clearTimeout(timeoutId);
+        timeoutId = null;
       }
 
-      timeoutRef.current = setTimeout(() => {
+      // Set new timeout and store the ID
+      timeoutId = setTimeout(() => {
         updateFunction();
+        timeoutId = null;
       }, delay);
-    }, [updateFunction, delay]);
+    };
+
+    // Add cleanup method to cancel pending debounced calls
+    debouncedFn.cancel = () => {
+      if (timeoutId !== null) {
+        clearTimeout(timeoutId);
+        timeoutId = null;
+      }
+    };
+
+    return debouncedFn;
   }, []);
 
   /**
@@ -192,32 +208,40 @@ export function useChartPerformance() {
 
   /**
    * Optimized animation frame handling
+   * Returns animation control functions that maintain state across calls
+   * Uses closures to maintain state - each call to useAnimationFrame creates
+   * a new animation controller with its own persistent state
    */
   const useAnimationFrame = useCallback((callback: () => void) => {
-    const requestRef = useRef<number | null>(null);
-    const previousTimeRef = useRef<number | null>(null);
-
-    const animate = useCallback(
-      (time: number) => {
-        if (previousTimeRef.current !== undefined) {
-          const deltaTime = time - (previousTimeRef.current || 0);
-          callback();
-        }
-        previousTimeRef.current = time;
-        requestRef.current = requestAnimationFrame(animate);
-      },
-      [callback]
-    );
-
-    const startAnimation = useCallback(() => {
-      requestRef.current = requestAnimationFrame(animate);
-    }, [animate]);
+    // Use closure variables to maintain animation state across multiple calls
+    // These variables are created once when useAnimationFrame is called and persist
+    // across all invocations of the returned animation control functions
+    let requestId: number | null = null;
+    let previousTime: number | null = null;
+
+    const animate = (time: number) => {
+      if (previousTime !== null && previousTime !== undefined) {
+        const deltaTime = time - previousTime;
+        callback();
+      }
+      previousTime = time;
+      requestId = requestAnimationFrame(animate);
+    };
+
+    const startAnimation = () => {
+      // Only start if not already running
+      if (requestId === null) {
+        requestId = requestAnimationFrame(animate);
+      }
+    };
 
-    const stopAnimation = useCallback(() => {
-      if (requestRef.current) {
-        cancelAnimationFrame(requestRef.current);
+    const stopAnimation = () => {
+      if (requestId !== null) {
+        cancelAnimationFrame(requestId);
+        requestId = null;
       }
-    }, []);
+      previousTime = null;
+    };
 
     return { startAnimation, stopAnimation };
   }, []);