@shohojdhara/atomix 0.3.14 → 0.4.0

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

@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
+import { fn } from '@storybook/test';
 import { useState } from 'react';
 import { ColorModeToggle, type ColorMode } from './ColorModeToggle';
 import { Moon, Sun } from '@phosphor-icons/react';
@@ -10,33 +11,132 @@ const meta = {
     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.',
+        component: `
+# ColorModeToggle
+
+## Overview
+
+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.
+
+## Features
+
+- Automatic detection of system preference
+- Local storage persistence
+- Multiple size options
+- Customizable icons
+- Accessible design
+- Controlled/uncontrolled modes
+
+## Accessibility
+
+- Keyboard support: Toggle can be activated using Space or Enter keys
+- Screen reader: Announces current mode and change events
+- ARIA support: Proper roles and properties for assistive technologies
+- Focus management: Maintains visible focus indicator
+
+## Usage Examples
+
+### Basic Usage
+
+\`\`\`tsx
+<ColorModeToggle />
+\`\`\`
+
+### Controlled Mode
+
+\`\`\`tsx
+<ColorModeToggle value={mode} onChange={setMode} />
+\`\`\`
+
+## API Reference
+
+### Props
+
+| Prop | Type | Default | Description |
+| ---- | ---- | ------- | ----------- |
+| size | 'sm' \\| 'md' \\| 'lg' | 'md' | Size variant of the toggle |
+| disabled | boolean | false | Whether the toggle is disabled |
+| showTooltip | boolean | false | Whether to show tooltip on hover |
+| disableStorage | boolean | false | Whether to disable localStorage persistence |
+| disableSystemPreference | boolean | false | Whether to disable system preference detection |
+| value | 'light' \\| 'dark' \\| 'system' | - | Controlled value of the toggle |
+| onChange | (mode: ColorMode) => void | - | Callback when mode changes |
+| lightIcon | ReactNode | Default sun icon | Custom icon for light mode |
+| darkIcon | ReactNode | Default moon icon | Custom icon for dark mode |
+        `,
       },
     },
   },
   tags: ['autodocs'],
   argTypes: {
     size: {
-      control: 'select',
+      control: { type: 'select' },
       options: ['sm', 'md', 'lg'],
       description: 'Size variant',
+      table: {
+        type: { summary: '"sm" | "md" | "lg"' },
+        defaultValue: { summary: 'md' },
+      },
     },
     disabled: {
       control: 'boolean',
       description: 'Disable the toggle',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: false },
+      },
     },
     showTooltip: {
       control: 'boolean',
       description: 'Show tooltip on hover',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: false },
+      },
     },
     disableStorage: {
       control: 'boolean',
       description: 'Disable localStorage persistence',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: false },
+      },
     },
     disableSystemPreference: {
       control: 'boolean',
       description: 'Disable system preference detection',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: false },
+      },
+    },
+    value: {
+      control: { type: 'radio', options: ['light', 'dark', 'system'] },
+      description: 'Controlled value of the toggle',
+      table: {
+        type: { summary: '"light" | "dark" | "system"' },
+        defaultValue: { summary: '-' },
+      },
+    },
+    onChange: {
+      action: 'mode changed',
+      description: 'Callback when mode changes',
+    },
+    lightIcon: {
+      control: 'object',
+      description: 'Custom icon for light mode',
+      table: {
+        type: { summary: 'ReactNode' },
+        defaultValue: { summary: 'Default sun icon' },
+      },
+    },
+    darkIcon: {
+      control: 'object',
+      description: 'Custom icon for dark mode',
+      table: {
+        type: { summary: 'ReactNode' },
+        defaultValue: { summary: 'Default moon icon' },
+      },
     },
   },
 } satisfies Meta<typeof ColorModeToggle>;
@@ -44,13 +144,18 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-// Default Color Mode Toggle
-export const Default: Story = {
+export const BasicUsage: Story = {
   args: {},
+  parameters: {
+    docs: {
+      description: {
+        story: 'Default Color Mode Toggle with automatic system preference detection.',
+      },
+    },
+  },
 };
 
-// Size Variants
-export const Sizes: Story = {
+export const AllSizes: Story = {
   render: () => (
     <div style={{ display: 'flex', gap: '1rem', alignItems: 'center' }}>
       <ColorModeToggle size="sm" />
@@ -58,17 +163,29 @@ export const Sizes: Story = {
       <ColorModeToggle size="lg" />
     </div>
   ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Color Mode Toggle in all available sizes.',
+      },
+    },
+  },
 };
 
-// Disabled State
-export const Disabled: Story = {
+export const DisabledState: Story = {
   args: {
     disabled: true,
   },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Disabled state of the Color Mode Toggle.',
+      },
+    },
+  },
 };
 
-// Controlled Mode
-export const Controlled: Story = {
+export const ControlledMode: Story = {
   render: () => {
     const [mode, setMode] = useState<ColorMode>('light');
     return (
@@ -81,9 +198,15 @@ export const Controlled: Story = {
       </div>
     );
   },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Controlled mode example with external state management.',
+      },
+    },
+  },
 };
 
-// Custom Icons
 export const CustomIcons: Story = {
   render: () => (
     <ColorModeToggle
@@ -91,71 +214,34 @@ export const CustomIcons: Story = {
       darkIcon={<Sun size={24} weight="fill" />}
     />
   ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Color Mode Toggle with custom icons.',
+      },
+    },
+  },
 };
 
-// With Callback
 export const WithCallback: Story = {
   render: () => {
     const [lastChanged, setLastChanged] = useState<string>('');
     return (
       <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem', alignItems: 'center' }}>
         <ColorModeToggle
-          onChange={(mode) => setLastChanged(`Changed to ${mode} at ${new Date().toLocaleTimeString()}`)}
+          onChange={mode =>
+            setLastChanged(`Mode changed to ${mode} at ${new Date().toLocaleTimeString()}`)
+          }
         />
-        {lastChanged && <p style={{ fontSize: '0.875rem' }}>{lastChanged}</p>}
+        {lastChanged && <p>Last changed: {lastChanged}</p>}
       </div>
     );
   },
-};
-
-// Custom Storage Key
-export const CustomStorageKey: Story = {
-  args: {
-    storageKey: 'my-app-theme',
-    dataAttribute: 'data-theme',
-  },
-};
-
-// Without Storage
-export const WithoutStorage: Story = {
-  args: {
-    disableStorage: true,
+  parameters: {
+    docs: {
+      description: {
+        story: 'Color Mode Toggle with change callback.',
+      },
+    },
   },
 };
-
-// Example Usage in Header
-export const InHeader: Story = {
-  render: () => (
-    <div
-      className="u-p-5 u-shadow u-flex u-justify-between u-items-center"
-      style={{ width: '400px', borderRadius: '8px' }}
-    >
-      <span style={{ fontWeight: 600 }}>Toggle Theme</span>
-      <ColorModeToggle />
-    </div>
-  ),
-};
-
-// Multiple Toggles
-export const MultipleToggles: Story = {
-  render: () => (
-    <div style={{ display: 'flex', gap: '2rem' }}>
-      <div style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem', alignItems: 'center' }}>
-        <ColorModeToggle size="sm" />
-        <span style={{ fontSize: '0.75rem' }}>Small</span>
-      </div>
-      <div style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem', alignItems: 'center' }}>
-        <ColorModeToggle size="md" />
-        <span style={{ fontSize: '0.75rem' }}>Medium</span>
-      </div>
-      <div style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem', alignItems: 'center' }}>
-        <ColorModeToggle size="lg" />
-        <span style={{ fontSize: '0.75rem' }}>Large</span>
-      </div>
-      <div style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem', alignItems: 'center' }}>
-        <ColorModeToggle disabled />
-        <span style={{ fontSize: '0.75rem' }}>Disabled</span>
-      </div>
-    </div>
-  ),
-};

package/src/components/ColorModeToggle/ColorModeToggle.tsx

@@ -157,13 +157,25 @@ export const ColorModeToggle: React.FC<ColorModeToggleProps> = ({
   const title = showTooltip ? `Switch to ${nextMode} mode` : undefined;
 
   const defaultLightIcon = (
-    <svg viewBox="0 0 24 24" width={iconSize} height={iconSize} fill="currentColor" aria-hidden="true">
+    <svg
+      viewBox="0 0 24 24"
+      width={iconSize}
+      height={iconSize}
+      fill="currentColor"
+      aria-hidden="true"
+    >
       <path d="M9.37 5.51c-.18.64-.27 1.31-.27 1.99 0 4.08 3.32 7.4 7.4 7.4.68 0 1.35-.09 1.99-.27C17.45 17.19 14.93 19 12 19c-3.86 0-7-3.14-7-7 0-2.93 1.81-5.45 4.37-6.49zM12 3c-4.97 0-9 4.03-9 9s4.03 9 9 9 9-4.03 9-9c0-.46-.04-.92-.1-1.36-.98 1.37-2.58 2.26-4.4 2.26-2.98 0-5.4-2.42-5.4-5.4 0-1.81.89-3.42 2.26-4.4-.44-.06-.9-.1-1.36-.1z" />
     </svg>
   );
 
   const defaultDarkIcon = (
-    <svg viewBox="0 0 24 24" width={iconSize} height={iconSize} fill="currentColor" aria-hidden="true">
+    <svg
+      viewBox="0 0 24 24"
+      width={iconSize}
+      height={iconSize}
+      fill="currentColor"
+      aria-hidden="true"
+    >
       <path d="M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zM2 13h2c.55 0 1-.45 1-1s-.45-1-1-1H2c-.55 0-1 .45-1 1s.45 1 1 1zm18 0h2c.55 0 1-.45 1-1s-.45-1-1-1h-2c-.55 0-1 .45-1 1s.45 1 1 1zM11 2v2c0 .55.45 1 1 1s1-.45 1-1V2c0-.55-.45-1-1-1s-1 .45-1 1zm0 18v2c0 .55.45 1 1 1s1-.45 1-1v-2c0-.55-.45-1-1-1s-1 .45-1 1zM5.99 4.58c-.39-.39-1.03-.39-1.41 0-.39.39-.39 1.03 0 1.41l1.06 1.06c.39.39 1.03.39 1.41 0 .39-.39.39-1.03 0-1.41L5.99 4.58zm12.37 12.37c-.39-.39-1.03-.39-1.41 0-.39.39-.39 1.03 0 1.41l1.06 1.06c.39.39 1.03.39 1.41 0 .39-.39.39-1.03 0-1.41l-1.06-1.06zm1.06-10.96c.39-.39.39-1.03 0-1.41-.39-.39-1.03-.39-1.41 0l-1.06 1.06c-.39.39-.39 1.03 0 1.41.39.39 1.03.39 1.41 0l1.06-1.06zM7.05 18.36c.39-.39.39-1.03 0-1.41-.39-.39-1.03-.39-1.41 0l-1.06 1.06c-.39.39-.39 1.03 0 1.41.39.39 1.03.39 1.41 0l1.06-1.06z" />
     </svg>
   );
@@ -179,7 +191,7 @@ export const ColorModeToggle: React.FC<ColorModeToggleProps> = ({
       title={title}
       style={style}
     >
-      {colorMode === 'light' ? (lightIcon || defaultLightIcon) : (darkIcon || defaultDarkIcon)}
+      {colorMode === 'light' ? lightIcon || defaultLightIcon : darkIcon || defaultDarkIcon}
     </button>
   );
 };