@shohojdhara/atomix 0.3.15 → 0.4.0

package/src/components/Chart/Chart.tsx

@@ -351,57 +351,53 @@ const Chart = memo(
           tabIndex={0}
           {...props}
         >
-            {(title || subtitle || showToolbar) && (
-              <div
-                className={`${CHART.HEADER_CLASS} u-flex u-justify-between u-items-start u-gap-4`}
-              >
-                <div className={`${CHART.HEADER_CONTENT_CLASS} u-flex-1`}>
-                  {title && <h3 className={`${CHART.TITLE_CLASS} u-mb-1`}>{title}</h3>}
-                  {subtitle && <p className={`${CHART.SUBTITLE_CLASS} u-mb-0`}>{subtitle}</p>}
-                </div>
-                {renderToolbar()}
+          {(title || subtitle || showToolbar) && (
+            <div className={`${CHART.HEADER_CLASS} u-flex u-justify-between u-items-start u-gap-4`}>
+              <div className={`${CHART.HEADER_CONTENT_CLASS} u-flex-1`}>
+                {title && <h3 className={`${CHART.TITLE_CLASS} u-mb-1`}>{title}</h3>}
+                {subtitle && <p className={`${CHART.SUBTITLE_CLASS} u-mb-0`}>{subtitle}</p>}
+              </div>
+              {renderToolbar()}
+            </div>
+          )}
+
+          <div className={CHART.CONTENT_CLASS}>
+            {loading && (
+              <div className={CHART.LOADING_CLASS}>
+                <div className={CHART.LOADING_SPINNER_CLASS}></div>
+                <span className={CHART.LOADING_TEXT_CLASS}>
+                  {toolbarState.isExporting
+                    ? 'Exporting chart...'
+                    : toolbarState.isRefreshing
+                      ? 'Refreshing chart...'
+                      : 'Loading chart...'}
+                </span>
               </div>
             )}
 
-            <div className={CHART.CONTENT_CLASS}>
-              {loading && (
-                <div className={CHART.LOADING_CLASS}>
-                  <div className={CHART.LOADING_SPINNER_CLASS}></div>
-                  <span className={CHART.LOADING_TEXT_CLASS}>
-                    {toolbarState.isExporting
-                      ? 'Exporting chart...'
-                      : toolbarState.isRefreshing
-                        ? 'Refreshing chart...'
-                        : 'Loading chart...'}
-                  </span>
+            {error && (
+              <div className={CHART.ERROR_CLASS}>
+                <div className={CHART.ERROR_ICON_CLASS}>⚠</div>
+                <div className={CHART.ERROR_CONTENT_CLASS}>
+                  <div className={CHART.ERROR_MESSAGE_CLASS}>Chart Error</div>
+                  <div className={CHART.ERROR_DETAILS_CLASS}>{error}</div>
                 </div>
-              )}
-
-              {error && (
-                <div className={CHART.ERROR_CLASS}>
-                  <div className={CHART.ERROR_ICON_CLASS}>⚠</div>
-                  <div className={CHART.ERROR_CONTENT_CLASS}>
-                    <div className={CHART.ERROR_MESSAGE_CLASS}>Chart Error</div>
-                    <div className={CHART.ERROR_DETAILS_CLASS}>{error}</div>
-                  </div>
-                </div>
-              )}
-
-              {!loading && !error && !children && (
-                <div className={CHART.EMPTY_CLASS}>
-                  <div className={CHART.EMPTY_ICON_CLASS}>📊</div>
-                  <div className={CHART.EMPTY_MESSAGE_CLASS}>No data available</div>
-                  <div className={CHART.EMPTY_DETAILS_CLASS}>
-                    Add data to your chart to see visualizations
-                  </div>
+              </div>
+            )}
+
+            {!loading && !error && !children && (
+              <div className={CHART.EMPTY_CLASS}>
+                <div className={CHART.EMPTY_ICON_CLASS}>📊</div>
+                <div className={CHART.EMPTY_MESSAGE_CLASS}>No data available</div>
+                <div className={CHART.EMPTY_DETAILS_CLASS}>
+                  Add data to your chart to see visualizations
                 </div>
-              )}
+              </div>
+            )}
 
-              {!loading && !error && children && (
-                <div className={CHART.CANVAS_CLASS}>{children}</div>
-              )}
-            </div>
+            {!loading && !error && children && <div className={CHART.CANVAS_CLASS}>{children}</div>}
           </div>
+        </div>
       );
 
       // Wrap with AtomixGlass if glass is enabled

package/src/components/Chart/ChartRenderer.tsx

@@ -1,4 +1,13 @@
-import { forwardRef, memo, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
+import {
+  forwardRef,
+  memo,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
 import {
   useChart,
   useChartAccessibility,
@@ -88,7 +97,7 @@ const ChartRenderer = memo(
       const svgRef = useRef<SVGSVGElement>(null);
       const containerRef = useRef<HTMLDivElement>(null);
       const [isInitialized, setIsInitialized] = useState(false);
-      
+
       // Responsive dimensions state - initialize with 0 to prevent layout shifts
       const [dimensions, setDimensions] = useState({
         width: 0,
@@ -121,7 +130,7 @@ const ChartRenderer = memo(
         });
 
         // Use ResizeObserver to track container size changes
-        const resizeObserver = new ResizeObserver((entries) => {
+        const resizeObserver = new ResizeObserver(entries => {
           for (const entry of entries) {
             const { width: containerWidth, height: containerHeight } = entry.contentRect;
             if (containerWidth > 0 && containerHeight > 0) {
@@ -274,7 +283,13 @@ const ChartRenderer = memo(
           return null;
         }
 
-        const scales = calculateScales(processedData, dimensions.width, dimensions.height, undefined, config);
+        const scales = calculateScales(
+          processedData,
+          dimensions.width,
+          dimensions.height,
+          undefined,
+          config
+        );
         if (!scales) return null;
 
         const colors = getChartColors(processedData.length).filter(
@@ -289,7 +304,15 @@ const ChartRenderer = memo(
             color: dataset.color || colors[i],
           })),
         };
-      }, [processedData, config, dimensions.width, dimensions.height, isInitialized, calculateScales, getChartColors]);
+      }, [
+        processedData,
+        config,
+        dimensions.width,
+        dimensions.height,
+        isInitialized,
+        calculateScales,
+        getChartColors,
+      ]);
 
       useEffect(() => {
         return () => {
@@ -335,12 +358,12 @@ const ChartRenderer = memo(
       // Don't render until dimensions are initialized to prevent layout shifts
       if (!isInitialized || dimensions.width === 0 || dimensions.height === 0) {
         return (
-          <div 
-            ref={containerRef} 
-            className={CHART.CANVAS_CLASS} 
-            style={{ 
-              width: '100%', 
-              height: '100%', 
+          <div
+            ref={containerRef}
+            className={CHART.CANVAS_CLASS}
+            style={{
+              width: '100%',
+              height: '100%',
               minHeight: '200px',
               display: 'flex',
               alignItems: 'center',
@@ -359,7 +382,11 @@ const ChartRenderer = memo(
 
       return (
         <>
-          <div ref={containerRef} className={CHART.CANVAS_CLASS} style={{ width: '100%', height: '100%' }}>
+          <div
+            ref={containerRef}
+            className={CHART.CANVAS_CLASS}
+            style={{ width: '100%', height: '100%' }}
+          >
             <svg
               ref={svgRef}
               width={svgWidth}

package/src/components/Chart/ChartToolbar.tsx

@@ -569,14 +569,20 @@ const ChartToolbar = memo(
                   onRefresh?.();
                   break;
                 default:
-                  console.warn(`No handler found for action: ${String(action.id).replace(/[\r\n\t]/g, '')}`);
+                  console.warn(
+                    `No handler found for action: ${String(action.id).replace(/[\r\n\t]/g, '')}`
+                  );
               }
             }
           }
         };
 
         const buttonRef =
-          action.id === 'export' ? exportButtonRef : action.id === 'settings' ? settingsButtonRef : null;
+          action.id === 'export'
+            ? exportButtonRef
+            : action.id === 'settings'
+              ? settingsButtonRef
+              : null;
 
         return (
           <button
@@ -589,7 +595,13 @@ const ChartToolbar = memo(
             type="button"
             aria-label={action.label}
             aria-pressed={action.active ? 'true' : 'false'}
-            aria-expanded={action.id === 'export' ? showExportMenu : action.id === 'settings' ? showSettingsMenu : undefined}
+            aria-expanded={
+              action.id === 'export'
+                ? showExportMenu
+                : action.id === 'settings'
+                  ? showSettingsMenu
+                  : undefined
+            }
           >
             <Icon name={action.icon} size="sm" />
             {size === 'lg' && <span className={`${CHART.ACTION_CLASS}-label`}>{action.label}</span>}
@@ -698,14 +710,18 @@ const ChartToolbar = memo(
 
               {/* Info items */}
               {state.zoomLevel !== undefined && (
-                <div className={`${CHART.SETTINGS_MENU_CLASS}-item ${CHART.SETTINGS_MENU_CLASS}-item--info`}>
+                <div
+                  className={`${CHART.SETTINGS_MENU_CLASS}-item ${CHART.SETTINGS_MENU_CLASS}-item--info`}
+                >
                   <span className={`${CHART.SETTINGS_MENU_CLASS}-label`}>Zoom Level</span>
                   <span className={`${CHART.SETTINGS_MENU_CLASS}-value`}>
                     {Math.round((state.zoomLevel || 1) * 100)}%
                   </span>
                 </div>
               )}
-              <div className={`${CHART.SETTINGS_MENU_CLASS}-item ${CHART.SETTINGS_MENU_CLASS}-item--info`}>
+              <div
+                className={`${CHART.SETTINGS_MENU_CLASS}-item ${CHART.SETTINGS_MENU_CLASS}-item--info`}
+              >
                 <span className={`${CHART.SETTINGS_MENU_CLASS}-label`}>Chart Type</span>
                 <span className={`${CHART.SETTINGS_MENU_CLASS}-value`}>{chartType}</span>
               </div>

package/src/components/Chart/DonutChart.tsx

@@ -125,7 +125,7 @@ const DonutChart = memo(
         // Calculate angles for each slice
         const padAngleRad = ((pieOptions.padAngle || 1) * Math.PI) / 180;
         let currentAngle = ((pieOptions.startAngle || 0) * Math.PI) / 180;
-        
+
         const slices = chartData.validDataPoints.map((point, index) => {
           const percentage = point.value / total;
           const sliceAngle = percentage * (2 * Math.PI) - padAngleRad;

package/src/components/Chart/FunnelChart.tsx

@@ -282,7 +282,10 @@ const FunnelChart = memo(
               <ChartTooltip
                 dataPoint={funnelData[hoveredPoint.pointIndex]!}
                 datasetLabel="Funnel Data"
-                datasetColor={funnelData[hoveredPoint.pointIndex]?.color || colors[hoveredPoint.pointIndex % colors.length]}
+                datasetColor={
+                  funnelData[hoveredPoint.pointIndex]?.color ||
+                  colors[hoveredPoint.pointIndex % colors.length]
+                }
                 position={{
                   x: hoveredPoint.clientX,
                   y: hoveredPoint.clientY,

package/src/components/Chart/GaugeChart.tsx

@@ -335,7 +335,9 @@ const GaugeChart = memo(
               d={createArcPath(centerX, centerY, radius, startAngleRad, valueAngle, thickness)}
               fill="var(--atomix-brand-bg-subtle)"
               style={{
-                transition: shouldAnimate ? `all ${animationDuration}ms ${animationEasing}` : 'none',
+                transition: shouldAnimate
+                  ? `all ${animationDuration}ms ${animationEasing}`
+                  : 'none',
               }}
             />
 

package/src/components/Chart/HeatmapChart.tsx

@@ -288,21 +288,28 @@ const HeatmapChart = memo(
             <g>
               {/* Gradient definitions */}
               <defs>
-                {showColorLegend && (() => {
-                  const schemeColors = colorSchemes[colorScale.scheme] || colorSchemes.viridis;
-                  if (!schemeColors || schemeColors.length === 0) return null;
-                  return (
-                    <linearGradient id="heatmap-legend-gradient" x1="0%" y1="100%" x2="0%" y2="0%">
-                      {schemeColors.map((color, i) => (
-                        <stop
-                          key={i}
-                          offset={`${(i / (schemeColors.length - 1)) * 100}%`}
-                          stopColor={color}
-                        />
-                      ))}
-                    </linearGradient>
-                  );
-                })()}
+                {showColorLegend &&
+                  (() => {
+                    const schemeColors = colorSchemes[colorScale.scheme] || colorSchemes.viridis;
+                    if (!schemeColors || schemeColors.length === 0) return null;
+                    return (
+                      <linearGradient
+                        id="heatmap-legend-gradient"
+                        x1="0%"
+                        y1="100%"
+                        x2="0%"
+                        y2="0%"
+                      >
+                        {schemeColors.map((color, i) => (
+                          <stop
+                            key={i}
+                            offset={`${(i / (schemeColors.length - 1)) * 100}%`}
+                            stopColor={color}
+                          />
+                        ))}
+                      </linearGradient>
+                    );
+                  })()}
               </defs>
 
               {/* Grid cells */}
@@ -333,11 +340,15 @@ const HeatmapChart = memo(
                         }}
                         onClick={() => {
                           if (cell) {
-                            handlers.onDataPointClick?.({
-                              ...cell,
-                              label: cell.label || `${cell.x}, ${cell.y}`,
-                              value: cell.value,
-                            } as any, rowIndex, colIndex);
+                            handlers.onDataPointClick?.(
+                              {
+                                ...cell,
+                                label: cell.label || `${cell.x}, ${cell.y}`,
+                                value: cell.value,
+                              } as any,
+                              rowIndex,
+                              colIndex
+                            );
                           }
                         }}
                         onMouseEnter={e => {
@@ -422,23 +433,25 @@ const HeatmapChart = memo(
                 </g>
               )}
             </g>
-            {showTooltips && hoveredPoint && renderedDatasets[hoveredPoint.datasetIndex]?.data?.[hoveredPoint.pointIndex] && (
-              <ChartTooltip
-                dataPoint={
-                  renderedDatasets[hoveredPoint.datasetIndex]!.data![hoveredPoint.pointIndex]!
-                }
-                datasetLabel={renderedDatasets[hoveredPoint.datasetIndex]?.label}
-                datasetColor={
-                  renderedDatasets[hoveredPoint.datasetIndex]?.color ||
-                  colors[hoveredPoint.datasetIndex % colors.length]
-                }
-                position={{
-                  x: hoveredPoint.clientX,
-                  y: hoveredPoint.clientY,
-                }}
-                visible={true}
-              />
-            )}
+            {showTooltips &&
+              hoveredPoint &&
+              renderedDatasets[hoveredPoint.datasetIndex]?.data?.[hoveredPoint.pointIndex] && (
+                <ChartTooltip
+                  dataPoint={
+                    renderedDatasets[hoveredPoint.datasetIndex]!.data![hoveredPoint.pointIndex]!
+                  }
+                  datasetLabel={renderedDatasets[hoveredPoint.datasetIndex]?.label}
+                  datasetColor={
+                    renderedDatasets[hoveredPoint.datasetIndex]?.color ||
+                    colors[hoveredPoint.datasetIndex % colors.length]
+                  }
+                  position={{
+                    x: hoveredPoint.clientX,
+                    y: hoveredPoint.clientY,
+                  }}
+                  visible={true}
+                />
+              )}
           </>
         );
       };

package/src/components/Chart/LineChart.tsx

@@ -81,7 +81,8 @@ const LineChart = memo(
         if (!renderedDatasets.length) return null;
 
         const showTooltips = toolbarState?.showTooltips ?? renderConfig?.showTooltips ?? true;
-        const shouldAnimate = toolbarState?.animationsEnabled ?? renderConfig?.animate ?? mergedLineOptions.smooth;
+        const shouldAnimate =
+          toolbarState?.animationsEnabled ?? renderConfig?.animate ?? mergedLineOptions.smooth;
 
         return (
           <>
@@ -101,7 +102,7 @@ const LineChart = memo(
               // Generate line path - ensure proper SVG path format
               const path = mergedLineOptions.smooth
                 ? generateSmoothPath(points)
-                : `M ${points.map((p) => `${p.x},${p.y}`).join(' L ')}`;
+                : `M ${points.map(p => `${p.x},${p.y}`).join(' L ')}`;
 
               return (
                 <g key={`dataset-${datasetIndex}`}>

package/src/components/Chart/MultiAxisChart.tsx

@@ -164,7 +164,8 @@ const MultiAxisChart = memo(
       }: ChartRenderContentParams) => {
         if (!datasets.length) return null;
 
-        const effectiveShowTooltips = toolbarState?.showTooltips ?? renderConfig?.showTooltips ?? showTooltips ?? true;
+        const effectiveShowTooltips =
+          toolbarState?.showTooltips ?? renderConfig?.showTooltips ?? showTooltips ?? true;
         const effectiveShowGrid = toolbarState?.showGrid ?? true; // Grid visibility from toolbar
 
         const padding = 60;
@@ -221,19 +222,19 @@ const MultiAxisChart = memo(
 
         // Draw grid lines
         if (effectiveShowGrid) {
-        for (let i = 0; i <= 5; i++) {
-          const y = padding + (i / 5) * chartHeight;
-          elements.push(
-            <line
-              key={`grid-${i}`}
-              x1={padding}
-              y1={y}
-              x2={padding + chartWidth}
-              y2={y}
-              className="c-chart__grid"
-            />
-          );
-        }
+          for (let i = 0; i <= 5; i++) {
+            const y = padding + (i / 5) * chartHeight;
+            elements.push(
+              <line
+                key={`grid-${i}`}
+                x1={padding}
+                y1={y}
+                x2={padding + chartWidth}
+                y2={y}
+                className="c-chart__grid"
+              />
+            );
+          }
         }
 
         // Draw datasets
@@ -253,7 +254,7 @@ const MultiAxisChart = memo(
           // Generate line path
           let linePath = '';
           if (points.length > 0) {
-            linePath = `M ${points.map((p) => `${p.x},${p.y}`).join(' L ')}`;
+            linePath = `M ${points.map(p => `${p.x},${p.y}`).join(' L ')}`;
           }
 
           // Draw area under line
@@ -338,7 +339,14 @@ const MultiAxisChart = memo(
 
             elements.push(
               <g key={`legend-${index}`}>
-                <rect x={legendX} y={legendY} width="12" height="12" fill={color} className="c-chart__legend-item-color" />
+                <rect
+                  x={legendX}
+                  y={legendY}
+                  width="12"
+                  height="12"
+                  fill={color}
+                  className="c-chart__legend-item-color"
+                />
                 <text x={legendX + 16} y={legendY + 10} className="c-chart__legend-item-text">
                   {dataset.label}
                 </text>

package/src/components/Chart/RadarChart.tsx

@@ -282,23 +282,25 @@ const RadarChart = memo(
               {dataPaths}
               {axisLabels}
             </g>
-            {showTooltips && hoveredPoint && renderedDatasets[hoveredPoint.datasetIndex]?.data?.[hoveredPoint.pointIndex] && (
-              <ChartTooltip
-                dataPoint={
-                  renderedDatasets[hoveredPoint.datasetIndex]!.data![hoveredPoint.pointIndex]!
-                }
-                datasetLabel={renderedDatasets[hoveredPoint.datasetIndex]?.label}
-                datasetColor={
-                  renderedDatasets[hoveredPoint.datasetIndex]?.color ||
-                  colors[hoveredPoint.datasetIndex]
-                }
-                position={{
-                  x: hoveredPoint.clientX,
-                  y: hoveredPoint.clientY,
-                }}
-                visible={true}
-              />
-            )}
+            {showTooltips &&
+              hoveredPoint &&
+              renderedDatasets[hoveredPoint.datasetIndex]?.data?.[hoveredPoint.pointIndex] && (
+                <ChartTooltip
+                  dataPoint={
+                    renderedDatasets[hoveredPoint.datasetIndex]!.data![hoveredPoint.pointIndex]!
+                  }
+                  datasetLabel={renderedDatasets[hoveredPoint.datasetIndex]?.label}
+                  datasetColor={
+                    renderedDatasets[hoveredPoint.datasetIndex]?.color ||
+                    colors[hoveredPoint.datasetIndex]
+                  }
+                  position={{
+                    x: hoveredPoint.clientX,
+                    y: hoveredPoint.clientY,
+                  }}
+                  visible={true}
+                />
+              )}
           </>
         );
       };

package/src/components/Chart/ScatterChart.tsx

@@ -81,7 +81,10 @@ const ScatterChart = memo(
                   onClick={() => handlers.onDataPointClick?.(point, datasetIndex, pointIndex)}
                   onMouseEnter={e => {
                     if (scatterOptions.enableHoverEffects) {
-                      const newRadius = Math.max(0, (point.size || scatterOptions.pointRadius || 4) * 1.5);
+                      const newRadius = Math.max(
+                        0,
+                        (point.size || scatterOptions.pointRadius || 4) * 1.5
+                      );
                       e.currentTarget.setAttribute('r', String(newRadius));
                     }
                     const rect = e.currentTarget.getBoundingClientRect();
@@ -96,7 +99,10 @@ const ScatterChart = memo(
                   }}
                   onMouseLeave={e => {
                     if (scatterOptions.enableHoverEffects) {
-                      const originalRadius = Math.max(0, point.size || scatterOptions.pointRadius || 4);
+                      const originalRadius = Math.max(
+                        0,
+                        point.size || scatterOptions.pointRadius || 4
+                      );
                       e.currentTarget.setAttribute('r', String(originalRadius));
                     }
                     handlers.onPointLeave();
@@ -104,13 +110,13 @@ const ScatterChart = memo(
                 />
                 {scatterOptions.showLabels && point.label && (
                   <text x={x} y={y - 10} textAnchor="middle" className="c-chart__scatter-label">
-                    {String(point.label).replace(/[<>&"']/g, (char) => {
+                    {String(point.label).replace(/[<>&"']/g, char => {
                       const entities: Record<string, string> = {
                         '<': '&lt;',
                         '>': '&gt;',
                         '&': '&amp;',
                         '"': '&quot;',
-                        "'": '&#x27;'
+                        "'": '&#x27;',
                       };
                       return entities[char] || char;
                     })}
@@ -124,23 +130,25 @@ const ScatterChart = memo(
         return (
           <>
             {points}
-            {showTooltips && hoveredPoint && renderedDatasets[hoveredPoint.datasetIndex]?.data?.[hoveredPoint.pointIndex] && (
-              <ChartTooltip
-                dataPoint={
-                  renderedDatasets[hoveredPoint.datasetIndex]!.data![hoveredPoint.pointIndex]!
-                }
-                datasetLabel={renderedDatasets[hoveredPoint.datasetIndex]?.label}
-                datasetColor={
-                  renderedDatasets[hoveredPoint.datasetIndex]?.color ||
-                  colors[hoveredPoint.datasetIndex]
-                }
-                position={{
-                  x: hoveredPoint.clientX,
-                  y: hoveredPoint.clientY,
-                }}
-                visible={true}
-              />
-            )}
+            {showTooltips &&
+              hoveredPoint &&
+              renderedDatasets[hoveredPoint.datasetIndex]?.data?.[hoveredPoint.pointIndex] && (
+                <ChartTooltip
+                  dataPoint={
+                    renderedDatasets[hoveredPoint.datasetIndex]!.data![hoveredPoint.pointIndex]!
+                  }
+                  datasetLabel={renderedDatasets[hoveredPoint.datasetIndex]?.label}
+                  datasetColor={
+                    renderedDatasets[hoveredPoint.datasetIndex]?.color ||
+                    colors[hoveredPoint.datasetIndex]
+                  }
+                  position={{
+                    x: hoveredPoint.clientX,
+                    y: hoveredPoint.clientY,
+                  }}
+                  visible={true}
+                />
+              )}
           </>
         );
       };

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

@@ -228,7 +228,11 @@ export const WithCallback: Story = {
     const [lastChanged, setLastChanged] = useState<string>('');
     return (
       <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem', alignItems: 'center' }}>
-        <ColorModeToggle onChange={(mode) => setLastChanged(`Mode changed to ${mode} at ${new Date().toLocaleTimeString()}`)} />
+        <ColorModeToggle
+          onChange={mode =>
+            setLastChanged(`Mode changed to ${mode} at ${new Date().toLocaleTimeString()}`)
+          }
+        />
         {lastChanged && <p>Last changed: {lastChanged}</p>}
       </div>
     );
@@ -240,4 +244,4 @@ export const WithCallback: Story = {
       },
     },
   },
-};
+};