@shohojdhara/atomix 0.3.5 → 0.3.6

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/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;
 

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;

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[] = [];

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;

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/DatePicker/DatePicker.stories.tsx

@@ -1,37 +1,46 @@
-import { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 import { useState } from 'react';
 import DatePicker from './DatePicker';
 import { DateRange } from './types';
 import { formatDateRange } from './utils';
+import { SIZES } from '../../lib/constants/components';
 
-const meta: Meta<typeof DatePicker> = {
+const meta = {
   title: 'Components/DatePicker',
   component: DatePicker,
   parameters: {
     layout: 'padded',
+    docs: {
+      description: {
+        component:
+          'The DatePicker component provides a user-friendly interface for selecting dates or date ranges. It supports single date selection, date range selection, custom date formatting, and various display options. DatePickers are essential for forms requiring date input and provide calendar-based selection with keyboard navigation.',
+      },
+    },
   },
+  tags: ['autodocs'],
   argTypes: {
-    value: { control: 'date' },
-    startDate: { control: 'date' },
-    endDate: { control: 'date' },
+    value: { control: 'date', description: 'Selected date value' },
+    startDate: { control: 'date', description: 'Start date for range selection' },
+    endDate: { control: 'date', description: 'End date for range selection' },
     selectionMode: {
       control: { type: 'radio' },
       options: ['single', 'range'],
       description: 'Selection mode - single date or date range',
     },
-    minDate: { control: 'date' },
-    maxDate: { control: 'date' },
-    format: { control: 'text' },
-    placeholder: { control: 'text' },
-    disabled: { control: 'boolean' },
-    readOnly: { control: 'boolean' },
-    clearable: { control: 'boolean' },
-    showTodayButton: { control: 'boolean' },
-    showWeekNumbers: { control: 'boolean' },
-    inline: { control: 'boolean' },
+    minDate: { control: 'date', description: 'Minimum selectable date' },
+    maxDate: { control: 'date', description: 'Maximum selectable date' },
+    format: { control: 'text', description: 'Date format string' },
+    placeholder: { control: 'text', description: 'Placeholder text' },
+    disabled: { control: 'boolean', description: 'Whether the date picker is disabled' },
+    readOnly: { control: 'boolean', description: 'Whether the date picker is read-only' },
+    clearable: { control: 'boolean', description: 'Whether the date can be cleared' },
+    showTodayButton: { control: 'boolean', description: 'Whether to show a "Today" button' },
+    showWeekNumbers: { control: 'boolean', description: 'Whether to show week numbers' },
+    inline: { control: 'boolean', description: 'Whether to display inline (always visible)' },
     size: {
       control: { type: 'select' },
-      options: ['sm', 'md', 'lg'],
+      options: SIZES,
+      description: 'Size of the date picker',
     },
     placement: {
       control: { type: 'select' },
@@ -51,11 +60,10 @@ const meta: Meta<typeof DatePicker> = {
       description: 'Apply glass morphism effect to the calendar dropdown',
     },
   },
-};
+} satisfies Meta<typeof DatePicker>;
 
 export default meta;
-
-type Story = StoryObj<typeof DatePicker>;
+type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
   args: {

package/src/components/Dropdown/Dropdown.stories.tsx

@@ -1,10 +1,11 @@
-import { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 import React, { useState } from 'react';
 import { ThemeColor } from '../../lib/types/components';
 import { Icon } from '../Icon';
 import { Dropdown, DropdownDivider, DropdownHeader, DropdownItem } from './index';
+import { THEME_COLORS } from '../../lib/constants/components';
 
-const meta: Meta<typeof Dropdown> = {
+const meta = {
   title: 'Components/Dropdown',
   component: Dropdown,
   parameters: {
@@ -12,13 +13,14 @@ const meta: Meta<typeof Dropdown> = {
     docs: {
       description: {
         component:
-          'Dropdown component with a toggleable menu. The dropdown menu appears on click or hover, depending on the trigger prop.',
+          'The Dropdown component provides a toggleable menu that appears relative to a trigger element. It supports multiple placement options, click or hover triggers, and can include dividers, headers, and icons. Dropdowns are ideal for navigation menus, action menus, or any context where options need to be revealed on demand.',
       },
     },
   },
+  tags: ['autodocs'],
   argTypes: {
     placement: {
-      control: 'select',
+      control: { type: 'select' },
       options: [
         'bottom-start',
         'bottom-end',
@@ -32,23 +34,13 @@ const meta: Meta<typeof Dropdown> = {
       description: 'The placement of the dropdown menu relative to the trigger element',
     },
     trigger: {
-      control: 'radio',
+      control: { type: 'radio' },
       options: ['click', 'hover'],
       description: 'How the dropdown is triggered - by click or hover',
     },
     variant: {
-      control: 'select',
-      options: [
-        'primary',
-        'secondary',
-        'tertiary',
-        'success',
-        'info',
-        'warning',
-        'error',
-        'light',
-        'dark',
-      ],
+      control: { type: 'select' },
+      options: THEME_COLORS,
       description: 'The color variant of the dropdown',
     },
     minWidth: {
@@ -72,10 +64,10 @@ const meta: Meta<typeof Dropdown> = {
       description: 'Enable glass morphism effect',
     },
   },
-};
+} satisfies Meta<typeof Dropdown>;
 
 export default meta;
-type Story = StoryObj<typeof Dropdown>;
+type Story = StoryObj<typeof meta>;
 
 /**
  * Interactive dropdown component that can be used in Storybook

package/src/components/EdgePanel/EdgePanel.stories.tsx

@@ -17,6 +17,7 @@ const meta = {
       },
     },
   },
+  tags: ['autodocs'],
   argTypes: {
     position: {
       control: { type: 'select' },

package/src/components/Footer/Footer.stories.tsx

@@ -3,8 +3,9 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { Footer } from './Footer';
 import { FooterSection } from './FooterSection';
 import { FooterLink } from './FooterLink';
+import { THEME_COLORS, SIZES } from '../../lib/constants/components';
 
-const meta: Meta<typeof Footer> = {
+const meta = {
   title: 'Components/Footer',
   component: Footer,
   parameters: {
@@ -12,10 +13,11 @@ const meta: Meta<typeof Footer> = {
     docs: {
       description: {
         component:
-          'A modern, comprehensive footer component with enhanced visual effects, accessibility features, responsive design, and multiple layout variants. Features include design token integration, improved hover effects, modern gradients, and comprehensive accessibility support following Atomix design patterns.',
+          'The Footer component provides a comprehensive footer section for websites with multiple layout variants, sections, links, and optional features like newsletter signup and back-to-top buttons. Footers support various color variants, sizes, and can be sticky. Essential for site navigation, branding, and additional information display.',
       },
     },
   },
+  tags: ['autodocs'],
   argTypes: {
     layout: {
       control: 'select',
@@ -24,12 +26,12 @@ const meta: Meta<typeof Footer> = {
     },
     variant: {
       control: 'select',
-      options: ['primary', 'secondary', 'success', 'info', 'warning', 'error', 'light', 'dark'],
+      options: THEME_COLORS,
       description: 'Color variant',
     },
     size: {
       control: 'select',
-      options: ['sm', 'md', 'lg'],
+      options: SIZES,
       description: 'Size variant',
     },
     showNewsletter: {
@@ -49,10 +51,10 @@ const meta: Meta<typeof Footer> = {
       description: 'Whether footer should be sticky',
     },
   },
-};
+} satisfies Meta<typeof Footer>;
 
 export default meta;
-type Story = StoryObj<typeof Footer>;
+type Story = StoryObj<typeof meta>;
 
 // Sample social links
 const sampleSocialLinks = [

package/src/components/Footer/FooterLink.tsx

@@ -49,8 +49,15 @@ export const FooterLink = forwardRef<HTMLAnchorElement, FooterLinkProps>(
 
     if (LinkComponent) {
       const Component = LinkComponent as React.ComponentType<any>;
+      // Only pass href if the link is not disabled and href exists
+      const componentProps = {
+        ref,
+        ...(href && !disabled ? { to: href } : {}),
+        ...linkProps,
+      };
+      
       return (
-        <Component ref={ref} to={href} {...linkProps}>
+        <Component {...componentProps}>
           {icon && <span className="c-footer__link-icon">{icon}</span>}
           <span className="c-footer__link-text">{children}</span>
           {external && <span className="c-footer__link-external">↗</span>}
@@ -70,4 +77,4 @@ export const FooterLink = forwardRef<HTMLAnchorElement, FooterLinkProps>(
 
 FooterLink.displayName = 'FooterLink';
 
-export default FooterLink;
+export default FooterLink;

package/src/components/Form/Checkbox.stories.tsx

@@ -6,7 +6,14 @@ const meta = {
   component: Checkbox,
   parameters: {
     layout: 'centered',
+    docs: {
+      description: {
+        component:
+          'The Checkbox component allows users to select one or more options from a set. It supports checked, unchecked, and indeterminate states, and can be used in forms or as standalone controls. Checkboxes provide clear visual feedback and support keyboard navigation.',
+      },
+    },
   },
+  tags: ['autodocs'],
   argTypes: {
     label: {
       control: 'text',

package/src/components/Form/Form.stories.tsx

@@ -18,7 +18,14 @@ const meta = {
   component: Form,
   parameters: {
     layout: 'centered',
+    docs: {
+      description: {
+        component:
+          'The Form component provides a semantic HTML form wrapper with enhanced functionality. It supports form validation, submission handling, and can be disabled as a whole. Forms work seamlessly with FormGroup and all form input components to create complete, accessible form experiences.',
+      },
+    },
   },
+  tags: ['autodocs'],
   argTypes: {
     disabled: {
       control: 'boolean',

package/src/components/Form/FormGroup.stories.tsx

@@ -5,13 +5,21 @@ import { Input } from './Input';
 import { Radio } from './Radio';
 import { Select } from './Select';
 import { Textarea } from './Textarea';
+import { SIZES } from '../../lib/constants/components';
 
 const meta = {
   title: 'Components/Form/FormGroup',
   component: FormGroup,
   parameters: {
     layout: 'centered',
+    docs: {
+      description: {
+        component:
+          'The FormGroup component provides a structured wrapper for form fields, including labels, inputs, helper text, and error messages. It ensures proper accessibility, consistent spacing, and validation state display. FormGroups are essential for creating well-organized and accessible forms.',
+      },
+    },
   },
+  tags: ['autodocs'],
   argTypes: {
     label: {
       control: 'text',
@@ -39,7 +47,7 @@ const meta = {
     },
     size: {
       control: { type: 'select' },
-      options: ['sm', 'md', 'lg'],
+      options: SIZES,
       description: 'Size variant',
     },
   },