@shohojdhara/atomix 0.3.4 → 0.3.6

package/src/components/Chart/AnimatedChart.tsx

@@ -45,6 +45,22 @@ const AnimatedChart = memo(
         }>
       >([]);
 
+      // Animation time tracking - moved outside callback
+      useEffect(() => {
+        const animateFrame = (timestamp: number) => {
+          timeRef.current = timestamp;
+          animationRef.current = requestAnimationFrame(animateFrame);
+        };
+
+        animationRef.current = requestAnimationFrame(animateFrame);
+
+        return () => {
+          if (animationRef.current) {
+            cancelAnimationFrame(animationRef.current);
+          }
+        };
+      }, []);
+
       const renderContent = useCallback(
         ({
           scales,
@@ -55,23 +71,7 @@ const AnimatedChart = memo(
           toolbarState,
           config: renderConfig,
         }: ChartRenderContentParams) => {
-          // Use toolbar state if available, fallback to config for backward compatibility
           const shouldAnimate = toolbarState?.animationsEnabled ?? renderConfig?.animate ?? true;
-          // Animation time tracking
-          useEffect(() => {
-            const animateFrame = (timestamp: number) => {
-              timeRef.current = timestamp;
-              animationRef.current = requestAnimationFrame(animateFrame);
-            };
-
-            animationRef.current = requestAnimationFrame(animateFrame);
-
-            return () => {
-              if (animationRef.current) {
-                cancelAnimationFrame(animationRef.current);
-              }
-            };
-          }, []);
 
           if (!chartDatasets.length) return null;
 
@@ -117,7 +117,7 @@ const AnimatedChart = memo(
 
               case 'area':
               case 'line':
-              default:
+              default: {
                 // Create animated line/area
                 const points = dataset.data.map((point: any, pointIndex: number) => ({
                   x: padding + (pointIndex / (dataset.data.length - 1)) * chartWidth,
@@ -181,6 +181,7 @@ const AnimatedChart = memo(
                   });
                 }
                 break;
+              }
             }
           });
 
@@ -213,7 +214,7 @@ const AnimatedChart = memo(
       return (
         <BaseChart
           ref={ref}
-          type="animated"
+          type="line"
           datasets={datasets}
           config={config}
           renderContent={renderContent}

package/src/components/Chart/AreaChart.tsx

@@ -33,7 +33,6 @@ const AreaChart = memo(
       }: ChartRenderContentParams) => {
         if (!renderedDatasets.length) return null;
 
-        // Use toolbar state if available, fallback to config for backward compatibility
         const showTooltips = toolbarState?.showTooltips ?? renderConfig?.showTooltips ?? true;
 
         return (
@@ -100,7 +99,11 @@ const AreaChart = memo(
             {showTooltips && hoveredPoint && (
               <ChartTooltip
                 dataPoint={
-                  renderedDatasets[hoveredPoint.datasetIndex]?.data?.[hoveredPoint.pointIndex]
+                  renderedDatasets[hoveredPoint.datasetIndex]?.data?.[hoveredPoint.pointIndex] ?? {
+                    label: '',
+                    value: 0,
+                    color: '',
+                  }
                 }
                 datasetLabel={renderedDatasets[hoveredPoint.datasetIndex]?.label}
                 datasetColor={

package/src/components/Chart/BarChart.tsx

@@ -43,7 +43,6 @@ const BarChart = memo(
       }: ChartRenderContentParams) => {
         if (!renderedDatasets.length) return null;
 
-        // Use toolbar state if available, fallback to config for backward compatibility
         const showTooltips = toolbarState?.showTooltips ?? renderConfig?.showTooltips ?? true;
 
         const barDimensions = calculateBarDimensions(
@@ -58,6 +57,7 @@ const BarChart = memo(
           <>
             {barDimensions.map((bar, index) => {
               const dataset = renderedDatasets[bar.datasetIndex];
+              if (!dataset) return null;
               const point = dataset.data?.[bar.pointIndex];
               const color = dataset.color || colors[bar.datasetIndex];
               const isHovered =

package/src/components/Chart/BubbleChart.tsx

@@ -8,7 +8,7 @@ export interface BubbleDataPoint {
   x: number;
   y: number;
   size: number;
-  value?: number;
+  value: number;
   color?: string;
   metadata?: Record<string, any>;
 }
@@ -109,10 +109,9 @@ const BubbleChart = memo(
         hoveredPoint,
         toolbarState,
         config: renderConfig,
-      }: ChartRenderContentParams) => {
+      }: any) => {
         if (!bubbleData.length) return null;
 
-        // Use toolbar state if available, fallback to config for backward compatibility
         const showTooltips = toolbarState?.showTooltips ?? renderConfig?.showTooltips ?? true;
 
         // Calculate bubble sizes based on data
@@ -197,9 +196,10 @@ const BubbleChart = memo(
             {bubbles}
             {showTooltips &&
               hoveredPoint &&
-              hoveredPoint.pointIndex < bubbleData.length && (
+              hoveredPoint.pointIndex < bubbleData.length &&
+              bubbleData[hoveredPoint.pointIndex] && (
                 <ChartTooltip
-                  dataPoint={bubbleData[hoveredPoint.pointIndex]}
+                  dataPoint={bubbleData[hoveredPoint.pointIndex]!}
                   datasetLabel="Bubbles"
                   datasetColor={
                     bubbleData[hoveredPoint.pointIndex]?.color ||
@@ -220,7 +220,7 @@ const BubbleChart = memo(
         <BaseChart
           ref={ref}
           type="bubble"
-          datasets={datasets}
+          datasets={datasets as any}
           config={config}
           renderContent={renderContent}
           onDataPointClick={onDataPointClick}

package/src/components/Chart/CandlestickChart.tsx

@@ -189,7 +189,6 @@ const CandlestickChart = memo(
       }: ChartRenderContentParams) => {
         if (!candlestickData.length) return null;
 
-        // Use toolbar state if available, fallback to config for backward compatibility
         const showTooltips = toolbarState?.showTooltips ?? renderConfig?.showTooltips ?? candlestickOptions.showTooltips ?? true;
 
         const padding = 40;

package/src/components/Chart/Chart.stories.tsx

@@ -30,7 +30,7 @@ import {
   WaterfallChart,
 } from './index';
 
-const meta: Meta<typeof Chart> = {
+const meta = {
   title: 'Components/Chart',
   component: Chart,
   parameters: {
@@ -38,17 +38,15 @@ const meta: Meta<typeof Chart> = {
     docs: {
       description: {
         component:
-          'Modern chart library with 20+ chart types, real-time updates, animations, and advanced interactions.',
-      },
-      source: {
-        code: `<Icon name="Rocket" /> Modern chart library with 20+ chart types, real-time updates, animations, and advanced interactions.`,
+          'The Chart component provides a comprehensive charting library with 20+ chart types including line, bar, pie, area, and more. Charts support real-time data updates, animations, interactive tooltips, and advanced customization options. Ideal for dashboards, analytics, data visualization, and any application requiring graphical data representation.',
       },
     },
   },
-};
+  tags: ['autodocs'],
+} satisfies Meta<typeof Chart>;
 
 export default meta;
-type Story = StoryObj<typeof Chart>;
+type Story = StoryObj<typeof meta>;
 
 // Glass Variant Story
 export const GlassVariant: Story = {

package/src/components/Chart/Chart.tsx

@@ -205,22 +205,6 @@ const Chart = memo(
         panEnabled,
       });
 
-      // Legacy handlers for backward compatibility
-      const handleFullscreen = useCallback(() => {
-        toolbarHandlers.onFullscreen(!toolbarState.isFullscreen);
-      }, [toolbarHandlers, toolbarState.isFullscreen]);
-
-      const handleExport = useCallback(
-        async (format: string) => {
-          await toolbarHandlers.onExport(format);
-        },
-        [toolbarHandlers]
-      );
-
-      const handleRefresh = useCallback(() => {
-        toolbarHandlers.onRefresh();
-      }, [toolbarHandlers]);
-
       // Sync all toolbar state with component state
       useEffect(() => {
         setIsFullscreen(toolbarState.isFullscreen);

package/src/components/Chart/ChartRenderer.tsx

@@ -238,7 +238,7 @@ const ChartRenderer = memo(
           onMouseUp: handleMouseUp,
           onWheel: () => {
             // Wheel handling is done via native event listener (non-passive)
-            // This is kept for API compatibility but not used
+            // Wheel handling is done via native event listener (non-passive)
           },
         }),
         [

package/src/components/Chart/ChartToolbar.tsx

@@ -201,6 +201,7 @@ const ChartToolbar = memo(
             document.removeEventListener('mousedown', handleClickOutside);
           };
         }
+        return undefined;
       }, [showExportMenu, showSettingsMenu]);
 
       // Handle keyboard shortcuts

package/src/components/Chart/DonutChart.tsx

@@ -172,7 +172,6 @@ const DonutChart = memo(
           };
         });
 
-        // Use toolbar state if available, fallback to config for backward compatibility
         const showTooltips = toolbarState?.showTooltips ?? renderConfig?.showTooltips ?? true;
 
         return (

package/src/components/Chart/FunnelChart.tsx

@@ -138,7 +138,6 @@ const FunnelChart = memo(
       }: ChartRenderContentParams) => {
         if (!funnelData.length) return null;
 
-        // Use toolbar state if available, fallback to config for backward compatibility
         const showTooltips = toolbarState?.showTooltips ?? renderConfig?.showTooltips ?? true;
         const shouldAnimate = toolbarState?.animationsEnabled ?? renderConfig?.animate ?? animate;
 
@@ -281,7 +280,7 @@ const FunnelChart = memo(
             <g>{elements}</g>
             {showTooltips && hoveredPoint && funnelData[hoveredPoint.pointIndex] && (
               <ChartTooltip
-                dataPoint={funnelData[hoveredPoint.pointIndex]}
+                dataPoint={funnelData[hoveredPoint.pointIndex]!}
                 datasetLabel="Funnel Data"
                 datasetColor={funnelData[hoveredPoint.pointIndex]?.color || colors[hoveredPoint.pointIndex % colors.length]}
                 position={{

package/src/components/Chart/GaugeChart.tsx

@@ -140,7 +140,6 @@ const GaugeChart = memo(
       }: ChartRenderContentParams) => {
         const width = scales.width;
 
-        // Use toolbar state if available, fallback to config for backward compatibility
         const shouldAnimate = toolbarState?.animationsEnabled ?? renderConfig?.animate ?? animate;
         const height = scales.height;
         const centerX = width / 2;

package/src/components/Chart/HeatmapChart.tsx

@@ -267,7 +267,6 @@ const HeatmapChart = memo(
       }: ChartRenderContentParams) => {
         const { matrix, xLabels, yLabels } = processedData;
 
-        // Use toolbar state if available, fallback to config for backward compatibility
         const showTooltips = toolbarState?.showTooltips ?? renderConfig?.showTooltips ?? true;
         if (!matrix.length) {
           return null;

package/src/components/Chart/LineChart.tsx

@@ -80,7 +80,6 @@ const LineChart = memo(
       }: ChartRenderContentParams) => {
         if (!renderedDatasets.length) return null;
 
-        // Use toolbar state if available, fallback to config for backward compatibility
         const showTooltips = toolbarState?.showTooltips ?? renderConfig?.showTooltips ?? true;
         const shouldAnimate = toolbarState?.animationsEnabled ?? renderConfig?.animate ?? mergedLineOptions.smooth;
 

package/src/components/Chart/MultiAxisChart.tsx

@@ -164,7 +164,6 @@ const MultiAxisChart = memo(
       }: ChartRenderContentParams) => {
         if (!datasets.length) return null;
 
-        // Use toolbar state if available, fallback to config for backward compatibility
         const effectiveShowTooltips = toolbarState?.showTooltips ?? renderConfig?.showTooltips ?? showTooltips ?? true;
         const effectiveShowGrid = toolbarState?.showGrid ?? true; // Grid visibility from toolbar
 

package/src/components/Chart/PieChart.tsx

@@ -73,7 +73,6 @@ const PieChart = memo(
           };
         });
 
-        // Use toolbar state if available, fallback to config for backward compatibility
         const showTooltips = toolbarState?.showTooltips ?? renderConfig?.showTooltips ?? true;
 
         return (

package/src/components/Chart/RadarChart.tsx

@@ -89,7 +89,6 @@ const RadarChart = memo(
       }: ChartRenderContentParams) => {
         if (!renderedDatasets.length) return null;
 
-        // Use toolbar state if available, fallback to config for backward compatibility
         const showTooltips = toolbarState?.showTooltips ?? renderConfig?.showTooltips ?? true;
 
         const centerX = scales.width / 2;
@@ -97,6 +96,7 @@ const RadarChart = memo(
         const radius = Math.min(centerX, centerY) * 0.8;
 
         const firstDataset = renderedDatasets[0];
+        if (!firstDataset) return null;
         const dataPoints = firstDataset.data || [];
         const angleStep = (2 * Math.PI) / dataPoints.length;
 
@@ -195,24 +195,28 @@ const RadarChart = memo(
             points.push({ x, y, value, point: dataset.data[i] });
           }
 
-          if (points.length === 0) return null;
+          if (points.length === 0 || !points[0]) return null;
 
           // Generate path
           let path = '';
           if (smooth && points.length > 2) {
             // For smooth curves, we would implement a more complex algorithm
             // For now, we'll just connect the points with straight lines
-            path = `M ${points[0].x},${points[0].y}`;
+            path = `M ${points[0]!.x},${points[0]!.y}`;
             for (let i = 1; i < points.length; i++) {
-              path += ` L ${points[i].x},${points[i].y}`;
+              if (points[i]) {
+                path += ` L ${points[i]!.x},${points[i]!.y}`;
+              }
             }
-            path += ` L ${points[0].x},${points[0].y} Z`;
+            path += ` L ${points[0]!.x},${points[0]!.y} Z`;
           } else {
-            path = `M ${points[0].x},${points[0].y}`;
+            path = `M ${points[0]!.x},${points[0]!.y}`;
             for (let i = 1; i < points.length; i++) {
-              path += ` L ${points[i].x},${points[i].y}`;
+              if (points[i]) {
+                path += ` L ${points[i]!.x},${points[i]!.y}`;
+              }
             }
-            path += ` L ${points[0].x},${points[0].y} Z`;
+            path += ` L ${points[0]!.x},${points[0]!.y} Z`;
           }
 
           return (
@@ -246,9 +250,11 @@ const RadarChart = memo(
                         r={isHovered ? pointRadius * 1.5 : pointRadius}
                         fill={color}
                         className={`c-chart__radar-point ${isHovered ? 'c-chart__radar-point--hovered' : ''}`}
-                        onClick={() =>
-                          handlers.onDataPointClick?.(point.point, datasetIndex, pointIndex)
-                        }
+                        onClick={() => {
+                          if (point.point) {
+                            handlers.onDataPointClick?.(point.point, datasetIndex, pointIndex);
+                          }
+                        }}
                         onMouseEnter={e => {
                           const rect = e.currentTarget.getBoundingClientRect();
                           handlers.onPointHover(
@@ -276,10 +282,10 @@ const RadarChart = memo(
               {dataPaths}
               {axisLabels}
             </g>
-            {showTooltips && hoveredPoint && (
+            {showTooltips && hoveredPoint && renderedDatasets[hoveredPoint.datasetIndex]?.data?.[hoveredPoint.pointIndex] && (
               <ChartTooltip
                 dataPoint={
-                  renderedDatasets[hoveredPoint.datasetIndex]?.data?.[hoveredPoint.pointIndex]
+                  renderedDatasets[hoveredPoint.datasetIndex]!.data![hoveredPoint.pointIndex]!
                 }
                 datasetLabel={renderedDatasets[hoveredPoint.datasetIndex]?.label}
                 datasetColor={

package/src/components/Chart/ScatterChart.tsx

@@ -52,7 +52,6 @@ const ScatterChart = memo(
       }: ChartRenderContentParams) => {
         if (!renderedDatasets.length) return null;
 
-        // Use toolbar state if available, fallback to config for backward compatibility
         const showTooltips = toolbarState?.showTooltips ?? renderConfig?.showTooltips ?? true;
 
         const points: React.ReactNode[] = [];
@@ -60,7 +59,7 @@ const ScatterChart = memo(
         renderedDatasets.forEach((dataset: ChartDataset, datasetIndex: number) => {
           const color = dataset.color || colors[datasetIndex % colors.length];
 
-          dataset.data?.forEach((point: ScatterDataPoint, pointIndex: number) => {
+          dataset.data?.forEach((point: any, pointIndex: number) => {
             const x =
               point.x !== undefined
                 ? scales.padding.left + (point.x / 100) * scales.innerWidth
@@ -125,10 +124,10 @@ const ScatterChart = memo(
         return (
           <>
             {points}
-            {showTooltips && hoveredPoint && (
+            {showTooltips && hoveredPoint && renderedDatasets[hoveredPoint.datasetIndex]?.data?.[hoveredPoint.pointIndex] && (
               <ChartTooltip
                 dataPoint={
-                  renderedDatasets[hoveredPoint.datasetIndex]?.data?.[hoveredPoint.pointIndex]
+                  renderedDatasets[hoveredPoint.datasetIndex]!.data![hoveredPoint.pointIndex]!
                 }
                 datasetLabel={renderedDatasets[hoveredPoint.datasetIndex]?.label}
                 datasetColor={

package/src/components/Chart/TreemapChart.tsx

@@ -197,7 +197,7 @@ const TreemapChart = memo(
           switch (scheme) {
             case 'category':
               return colors[index % colors.length];
-            case 'depth':
+            case 'depth': {
               const depthColors = [
                 'var(--atomix-blue-9)',
                 'var(--atomix-blue-6)',
@@ -206,6 +206,7 @@ const TreemapChart = memo(
                 'var(--atomix-blue-2)',
               ];
               return depthColors[Math.min(depth, depthColors.length - 1)];
+            }
             case 'value':
               if (data.length > 0) {
                 const maxValue = Math.max(...data.map(d => d.value));

package/src/components/Chart/WaterfallChart.tsx

@@ -129,7 +129,6 @@ const WaterfallChart = memo(
       }: ChartRenderContentParams) => {
         if (!waterfallData.length) return null;
 
-        // Use toolbar state if available, fallback to config for backward compatibility
         const shouldAnimate = toolbarState?.animationsEnabled ?? renderConfig?.animate ?? animate;
 
         const padding = 60;
@@ -409,4 +408,3 @@ const WaterfallChart = memo(
 
 WaterfallChart.displayName = 'WaterfallChart';
 export default WaterfallChart;
-export type { WaterfallChartProps, WaterfallDataPoint };

package/src/components/Chart/types.ts

@@ -289,9 +289,19 @@ export interface ChartProps extends BaseComponentProps {
 
 /**
  * Chart scales interface
- * Imported from useChart for consistency
  */
-export type { ChartScales } from '../../lib/composables/useChart';
+export interface ChartScales {
+  xScale: (index: number, dataLength?: number) => number;
+  yScale: (value: number) => number;
+  minValue: number;
+  maxValue: number;
+  valueRange: number;
+  innerWidth: number;
+  innerHeight: number;
+  width: number;
+  height: number;
+  padding: { top: number; right: number; bottom: number; left: number };
+}
 
 /**
  * Chart interaction state

package/src/components/Chart/utils.ts

@@ -5,7 +5,8 @@
  * @returns Color string
  */
 export const getColorFromScheme = (colorScheme: string[], index: number): string => {
-  return colorScheme[index % colorScheme.length];
+  const color = colorScheme[index % colorScheme.length];
+  return color || colorScheme[0] || '#000000';
 };
 
 /**
@@ -23,12 +24,12 @@ export const getColorFromValue = (
   colorScheme: string[]
 ): string => {
   if (minValue === maxValue) {
-    return colorScheme[0];
+    return colorScheme[0] || '#000000';
   }
 
   const normalized = (value - minValue) / (maxValue - minValue);
   const index = Math.floor(normalized * (colorScheme.length - 1));
-  return colorScheme[index];
+  return colorScheme[index] || colorScheme[0] || '#000000';
 };
 
 /**

package/src/components/ColorModeToggle/ColorModeToggle.stories.tsx

@@ -8,7 +8,14 @@ const meta = {
   component: ColorModeToggle,
   parameters: {
     layout: 'centered',
+    docs: {
+      description: {
+        component:
+          'The ColorModeToggle component provides a user-friendly switch for toggling between light and dark color modes. It automatically detects system preferences, persists user choices, and provides visual feedback. Essential for applications supporting theme customization and accessibility preferences.',
+      },
+    },
   },
+  tags: ['autodocs'],
   argTypes: {
     size: {
       control: 'select',

package/src/components/DataTable/DataTable.stories.tsx

@@ -1,31 +1,38 @@
-import { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 import { useState } from 'react';
 import { DataTableColumn } from '../../lib/types/components';
 import { DataTable } from './DataTable';
 
-const meta: Meta<typeof DataTable> = {
+const meta = {
   title: 'Components/DataTable',
   component: DataTable,
   parameters: {
     layout: 'padded',
+    docs: {
+      description: {
+        component:
+          'The DataTable component provides a powerful and flexible way to display structured data in rows and columns. It supports sorting, filtering, pagination, selection, and various display options. DataTables are ideal for displaying large datasets, user lists, product catalogs, or any tabular information requiring advanced data manipulation.',
+      },
+    },
   },
+  tags: ['autodocs'],
   argTypes: {
-    data: { control: 'object' },
-    columns: { control: 'object' },
-    sortable: { control: 'boolean' },
-    filterable: { control: 'boolean' },
-    paginated: { control: 'boolean' },
-    pageSize: { control: 'number' },
-    striped: { control: 'boolean' },
-    bordered: { control: 'boolean' },
-    dense: { control: 'boolean' },
-    loading: { control: 'boolean' },
-    emptyMessage: { control: 'text' },
-  },
-};
+    data: { control: 'object', description: 'Array of data objects to display' },
+    columns: { control: 'object', description: 'Column definitions for the table' },
+    sortable: { control: 'boolean', description: 'Whether columns are sortable' },
+    filterable: { control: 'boolean', description: 'Whether the table is filterable' },
+    paginated: { control: 'boolean', description: 'Whether to enable pagination' },
+    pageSize: { control: 'number', description: 'Number of rows per page' },
+    striped: { control: 'boolean', description: 'Whether to apply striped row styling' },
+    bordered: { control: 'boolean', description: 'Whether to show table borders' },
+    dense: { control: 'boolean', description: 'Whether to use dense row spacing' },
+    loading: { control: 'boolean', description: 'Whether the table is in loading state' },
+    emptyMessage: { control: 'text', description: 'Message to display when table is empty' },
+  },
+} satisfies Meta<typeof DataTable>;
 
 export default meta;
-type Story = StoryObj<typeof DataTable>;
+type Story = StoryObj<typeof meta>;
 
 // Generate more sample data for better pagination testing
 const generateUsers = (count: number) => {

package/src/components/DataTable/DataTable.tsx

@@ -1,4 +1,4 @@
-import React, { useRef } from 'react';
+import React, { useRef, memo } from 'react';
 import { DataTableProps } from '../../lib/types/components';
 import { useDataTable } from '../../lib/composables/useDataTable';
 import { DATA_TABLE_CLASSES } from '../../lib/constants/components';
@@ -19,7 +19,7 @@ import { Pagination } from '../Pagination/Pagination';
  * />
  * ```
  */
-export const DataTable: React.FC<DataTableProps> = ({
+export const DataTable: React.FC<DataTableProps> = memo(({
   data,
   columns,
   className,
@@ -205,7 +205,7 @@ export const DataTable: React.FC<DataTableProps> = ({
       {renderPagination()}
     </div>
   );
-};
+});
 
 export type { DataTableProps };