@shohojdhara/atomix 0.3.15 → 0.4.1

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 = {
       },
     },
   },
-};
+};

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>
   );
 };

package/src/components/Countdown/Countdown.stories.tsx

@@ -66,8 +66,8 @@ The Countdown component displays a countdown timer to a specified target date. I
   },
   tags: ['autodocs'],
   argTypes: {
-    target: { 
-      control: 'date', 
+    target: {
+      control: 'date',
       description: 'Target date/time for the countdown',
       table: {
         type: { summary: 'Date | number | string' },
@@ -82,16 +82,16 @@ The Countdown component displays a countdown timer to a specified target date. I
         defaultValue: { summary: "['days', 'hours', 'minutes', 'seconds']" },
       },
     },
-    separator: { 
-      control: 'text', 
+    separator: {
+      control: 'text',
       description: 'Separator string',
       table: {
         type: { summary: 'string' },
         defaultValue: { summary: ':' },
       },
     },
-    focused: { 
-      control: 'boolean', 
+    focused: {
+      control: 'boolean',
       description: 'Focused style',
       table: {
         type: { summary: 'boolean' },
@@ -150,4 +150,4 @@ export const CustomSeparator: Story = {
       },
     },
   },
-};
+};

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

@@ -83,88 +83,88 @@ DataTable provides a powerful and flexible way to display structured data in row
   },
   tags: ['autodocs'],
   argTypes: {
-    data: { 
-      control: 'object', 
+    data: {
+      control: 'object',
       description: 'Array of data objects to display',
       table: {
         type: { summary: 'T[]' },
         defaultValue: { summary: '[]' },
       },
     },
-    columns: { 
-      control: 'object', 
+    columns: {
+      control: 'object',
       description: 'Column definitions for the table',
       table: {
         type: { summary: 'DataTableColumn[]' },
         defaultValue: { summary: '[]' },
       },
     },
-    sortable: { 
-      control: 'boolean', 
+    sortable: {
+      control: 'boolean',
       description: 'Whether columns are sortable',
       table: {
         type: { summary: 'boolean' },
         defaultValue: { summary: 'false' },
       },
     },
-    filterable: { 
-      control: 'boolean', 
+    filterable: {
+      control: 'boolean',
       description: 'Whether the table is filterable',
       table: {
         type: { summary: 'boolean' },
         defaultValue: { summary: 'false' },
       },
     },
-    paginated: { 
-      control: 'boolean', 
+    paginated: {
+      control: 'boolean',
       description: 'Whether to enable pagination',
       table: {
         type: { summary: 'boolean' },
         defaultValue: { summary: 'false' },
       },
     },
-    pageSize: { 
-      control: 'number', 
+    pageSize: {
+      control: 'number',
       description: 'Number of rows per page',
       table: {
         type: { summary: 'number' },
         defaultValue: { summary: '10' },
       },
     },
-    striped: { 
-      control: 'boolean', 
+    striped: {
+      control: 'boolean',
       description: 'Whether to apply striped row styling',
       table: {
         type: { summary: 'boolean' },
         defaultValue: { summary: 'false' },
       },
     },
-    bordered: { 
-      control: 'boolean', 
+    bordered: {
+      control: 'boolean',
       description: 'Whether to show table borders',
       table: {
         type: { summary: 'boolean' },
         defaultValue: { summary: 'false' },
       },
     },
-    dense: { 
-      control: 'boolean', 
+    dense: {
+      control: 'boolean',
       description: 'Whether to use dense row spacing',
       table: {
         type: { summary: 'boolean' },
         defaultValue: { summary: 'false' },
       },
     },
-    loading: { 
-      control: 'boolean', 
+    loading: {
+      control: 'boolean',
       description: 'Whether the table is in loading state',
       table: {
         type: { summary: 'boolean' },
         defaultValue: { summary: 'false' },
       },
     },
-    emptyMessage: { 
-      control: 'text', 
+    emptyMessage: {
+      control: 'text',
       description: 'Message to display when table is empty',
       table: {
         type: { summary: 'string' },
@@ -361,7 +361,8 @@ export const WithColumnFilters: Story = {
   parameters: {
     docs: {
       description: {
-        story: 'DataTable with column-specific filters. Each filterable column has its own filter input.',
+        story:
+          'DataTable with column-specific filters. Each filterable column has its own filter input.',
       },
     },
   },
@@ -372,7 +373,7 @@ export const WithColumnFilters: Story = {
 // ========================================
 
 export const WithRowSelectionSingle: Story = {
-  render: (args) => {
+  render: args => {
     const [selectedRow, setSelectedRow] = useState<any>(null);
 
     return (
@@ -382,14 +383,12 @@ export const WithRowSelectionSingle: Story = {
           data={args.data || users}
           columns={args.columns || columns}
           selectionMode="single"
-          onSelectionChange={(rows) => setSelectedRow(rows[0] || null)}
+          onSelectionChange={rows => setSelectedRow(rows[0] || null)}
         />
         {selectedRow && (
           <div className="u-mt-4 u-p-4 u-bg-gray-100 u-rounded u-text-sm">
             <strong>Selected:</strong>
-            <pre className="u-mt-2 u-text-xs">
-              {JSON.stringify(selectedRow, null, 2)}
-            </pre>
+            <pre className="u-mt-2 u-text-xs">{JSON.stringify(selectedRow, null, 2)}</pre>
           </div>
         )}
       </div>
@@ -410,7 +409,7 @@ export const WithRowSelectionSingle: Story = {
 };
 
 export const WithRowSelectionMultiple: Story = {
-  render: (args) => {
+  render: args => {
     const [selectedRows, setSelectedRows] = useState<any[]>([]);
 
     return (
@@ -426,7 +425,11 @@ export const WithRowSelectionMultiple: Story = {
           <div className="u-mt-4 u-p-4 u-bg-gray-100 u-rounded u-text-sm">
             <strong>Selected: {selectedRows.length} row(s)</strong>
             <pre className="u-mt-2 u-text-xs">
-              {JSON.stringify(selectedRows.map(r => r.name), null, 2)}
+              {JSON.stringify(
+                selectedRows.map(r => r.name),
+                null,
+                2
+              )}
             </pre>
           </div>
         )}
@@ -452,7 +455,7 @@ export const WithRowSelectionMultiple: Story = {
 // ========================================
 
 export const WithInteractiveRows: Story = {
-  render: (args) => {
+  render: args => {
     const [selectedUser, setSelectedUser] = useState<any>(null);
 
     const handleRowClick = (row: any) => {
@@ -461,11 +464,11 @@ export const WithInteractiveRows: Story = {
 
     return (
       <div>
-        <DataTable 
-          {...args} 
+        <DataTable
+          {...args}
           data={args.data || users}
           columns={args.columns || columns}
-          onRowClick={handleRowClick} 
+          onRowClick={handleRowClick}
         />
         {selectedUser && (
           <div className="u-mt-4 u-p-4 u-border u-border-gray-300 u-rounded u-bg-white">
@@ -570,7 +573,8 @@ export const WithColumnVisibilityToggle: Story = {
   parameters: {
     docs: {
       description: {
-        story: 'DataTable with column visibility toggle. Use the Columns button to show/hide columns.',
+        story:
+          'DataTable with column visibility toggle. Use the Columns button to show/hide columns.',
       },
     },
   },
@@ -642,7 +646,7 @@ export const CompleteFeatures: Story = {
 };
 
 export const AllAdvancedFeatures: Story = {
-  render: (args) => {
+  render: args => {
     const [selectedRows, setSelectedRows] = useState<any[]>([]);
 
     return (
@@ -652,7 +656,7 @@ export const AllAdvancedFeatures: Story = {
           data={args.data || largeDataSet}
           columns={args.columns || columns}
           selectionMode="multiple"
-          onSelectionChange={(rows) => setSelectedRows(rows)}
+          onSelectionChange={rows => setSelectedRows(rows)}
         />
         {selectedRows.length > 0 && (
           <div className="u-mt-4 u-p-4 u-bg-gray-100 u-rounded">
@@ -686,7 +690,8 @@ export const AllAdvancedFeatures: Story = {
   parameters: {
     docs: {
       description: {
-        story: 'DataTable with all advanced features enabled: selection, filtering, resizing, reordering, visibility toggle, export, and sticky headers.',
+        story:
+          'DataTable with all advanced features enabled: selection, filtering, resizing, reordering, visibility toggle, export, and sticky headers.',
       },
     },
   },