@shohojdhara/atomix 0.3.5 → 0.3.7

package/src/components/Button/ButtonGroup.tsx

@@ -0,0 +1,67 @@
+import React, { Children, cloneElement, isValidElement } from 'react';
+import { ButtonGroupProps, ButtonProps } from '../../lib/types/components';
+import { BUTTON_GROUP } from '../../lib/constants/components';
+import { Button } from './Button';
+
+/**
+ * ButtonGroup - A component for grouping buttons together
+ * 
+ * Groups buttons together with proper border radius handling and spacing.
+ * The buttons will be visually connected with shared borders.
+ * 
+ * @example
+ * ```tsx
+ * <ButtonGroup>
+ *   <Button label="Left" />
+ *   <Button label="Middle" />
+ *   <Button label="Right" />
+ * </ButtonGroup>
+ * ```
+ */
+export const ButtonGroup: React.FC<ButtonGroupProps> = ({
+  children,
+  className = '',
+  style,
+  'aria-label': ariaLabel,
+  role = 'group',
+}) => {
+  // Generate CSS classes
+  const buttonGroupClasses = [
+    BUTTON_GROUP.CLASSES.BASE,
+    className,
+  ]
+    .filter(Boolean)
+    .join(' ');
+
+  // Get valid Button children
+  const buttonChildren = Children.toArray(children).filter(
+    child => isValidElement(child) && child.type === Button
+  );
+
+  return (
+    <div
+      className={buttonGroupClasses}
+      style={style}
+      role={role}
+      aria-label={ariaLabel}
+    >
+      {buttonChildren.map((child, index) => {
+        if (isValidElement<ButtonProps>(child)) {
+          // Clone the Button element to ensure proper styling
+          return cloneElement(child, {
+            key: index,
+            ...child.props,
+          });
+        }
+        return null;
+      })}
+    </div>
+  );
+};
+
+export type { ButtonGroupProps };
+
+ButtonGroup.displayName = 'ButtonGroup';
+
+export default ButtonGroup;
+

package/src/components/Button/index.ts

@@ -1,3 +1,5 @@
 export { Button } from './Button';
 export { default } from './Button';
 export type { ButtonProps } from './Button';
+export { ButtonGroup } from './ButtonGroup';
+export type { ButtonGroupProps } from './ButtonGroup';

package/src/components/Callout/Callout.stories.tsx

@@ -1,9 +1,10 @@
 import React, { useEffect, useState } from 'react';
-import { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 import { Button } from '../Button/Button';
 import { Callout } from './Callout';
+import { THEME_COLORS } from '../../lib/constants/components';
 
-const meta: Meta<typeof Callout> = {
+const meta = {
   title: 'Components/Callout',
   component: Callout,
   parameters: {
@@ -11,14 +12,15 @@ const meta: Meta<typeof Callout> = {
     docs: {
       description: {
         component:
-          'Callout components are used to display important messages, notifications, or alerts to users. They can be used to provide feedback, warnings, errors, or general information.',
+          'Callout components are used to display important messages, notifications, or alerts to users. They can be used to provide feedback, warnings, errors, or general information. Callouts support multiple variants, can include icons, and can be dismissible.',
       },
     },
   },
+  tags: ['autodocs'],
   argTypes: {
     variant: {
       control: 'select',
-      options: ['primary', 'secondary', 'success', 'info', 'warning', 'error', 'light', 'dark'],
+      options: THEME_COLORS,
       description: 'The color variant of the callout',
       table: {
         defaultValue: { summary: 'primary' },
@@ -86,10 +88,10 @@ const meta: Meta<typeof Callout> = {
       },
     },
   },
-};
+} satisfies Meta<typeof Callout>;
 
 export default meta;
-type Story = StoryObj<typeof Callout>;
+type Story = StoryObj<typeof meta>;
 
 // Icon components for different callout types
 const InfoIcon = () => (

package/src/components/Card/Card.stories.tsx

@@ -1,39 +1,52 @@
-import { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 import React from 'react';
 import { Card, ElevationCard } from './index';
 import { Grid, GridCol } from '../../layouts';
 import { Container } from '../../layouts/';
-
 import Icon from '../Icon';
+import { SIZES, THEME_COLORS } from '../../lib/constants/components';
 
-const meta: Meta<typeof Card> = {
+const meta = {
   title: 'Components/Card',
   component: Card,
   parameters: {
     layout: 'centered',
+    docs: {
+      description: {
+        component:
+          'The Card component provides a flexible container for displaying content with optional headers, images, and footers. Cards are ideal for grouping related information, showcasing products, or presenting content in a structured format. They support multiple variants, sizes, and can be interactive.',
+      },
+    },
   },
+  tags: ['autodocs'],
   argTypes: {
-    header: { control: 'text' },
-    title: { control: 'text' },
-    text: { control: 'text' },
-    image: { control: 'text' },
-    imageAlt: { control: 'text' },
-    footer: { control: 'text' },
+    header: { control: 'text', description: 'Header content for the card' },
+    title: { control: 'text', description: 'Title of the card' },
+    text: { control: 'text', description: 'Main text content of the card' },
+    image: { control: 'text', description: 'Image URL for the card' },
+    imageAlt: { control: 'text', description: 'Alt text for the card image' },
+    footer: { control: 'text', description: 'Footer content for the card' },
     size: {
-      control: 'select',
-      options: ['sm', 'md', 'lg'],
+      control: { type: 'select' },
+      options: SIZES,
+      description: 'Size of the card',
+      defaultValue: 'md',
     },
     variant: {
-      control: 'select',
-      options: ['primary', 'secondary', 'success', 'error', 'warning', 'info', 'light', 'dark'],
+      control: { type: 'select' },
+      options: THEME_COLORS,
+      description: 'Color variant of the card',
+      defaultValue: 'secondary',
     },
     appearance: {
-      control: 'select',
+      control: { type: 'select' },
       options: ['filled', 'outlined', 'ghost', 'elevated'],
+      defaultValue: 'filled',
     },
     elevation: {
-      control: 'select',
+      control: { type: 'select' },
       options: ['none', 'sm', 'md', 'lg', 'xl'],
+      defaultValue: 'none',
     },
     row: { control: 'boolean' },
     flat: { control: 'boolean' },
@@ -42,14 +55,16 @@ const meta: Meta<typeof Card> = {
     loading: { control: 'boolean' },
     selected: { control: 'boolean' },
     interactive: { control: 'boolean' },
-    className: { control: 'text' },
+    className: { control: 'text', description: 'Additional CSS class names' },
   },
-};
+} satisfies Meta<typeof Card>;
 
 export default meta;
-type Story = StoryObj<typeof Card>;
+type Story = StoryObj<typeof meta>;
 
-// Basic Card
+/**
+ * Basic card with title and text content.
+ */
 export const Basic: Story = {
   args: {
     title: 'Card Title',
@@ -58,7 +73,9 @@ export const Basic: Story = {
   },
 };
 
-// Card with Image
+/**
+ * Card with an image displayed above the content.
+ */
 export const WithImage: Story = {
   args: {
     title: 'Card with Image',
@@ -68,7 +85,9 @@ export const WithImage: Story = {
   },
 };
 
-// Card with Actions
+/**
+ * Card with action buttons in the footer.
+ */
 export const WithActions: Story = {
   args: {
     title: 'Card with Actions',
@@ -82,7 +101,9 @@ export const WithActions: Story = {
   },
 };
 
-// Row Card
+/**
+ * Card with horizontal (row) layout - image on the left, content on the right.
+ */
 export const Row: Story = {
   args: {
     title: 'Row Layout Card',
@@ -93,7 +114,9 @@ export const Row: Story = {
   },
 };
 
-// Flat Card
+/**
+ * Flat style card with image extending to the edges.
+ */
 export const Flat: Story = {
   args: {
     title: 'Flat Style Card',
@@ -104,7 +127,9 @@ export const Flat: Story = {
   },
 };
 
-// Clickable Card
+/**
+ * Clickable card with onClick handler.
+ */
 export const Clickable: Story = {
   args: {
     title: 'Clickable Card',
@@ -113,7 +138,9 @@ export const Clickable: Story = {
   },
 };
 
-// Elevation Card
+/**
+ * Card with elevation effect that responds to hover.
+ */
 export const WithElevation: Story = {
   render: args => (
     <div style={{ padding: '20px', width: '300px' }}>
@@ -128,8 +155,17 @@ export const WithElevation: Story = {
   },
 };
 
-// Card with Glass Effect
+/**
+ * Card with glass morphism effect enabled.
+ */
 export const WithGlassEffect: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story: 'Demonstrates a card with glass morphism effect applied, creating a translucent, frosted appearance that works well over colorful backgrounds.',
+      },
+    },
+  },
   render: args => (
     <div
       style={{
@@ -464,8 +500,17 @@ export const GlassModeShader: Story = {
   ),
 };
 
-// All Glass Modes Comparison
+/**
+ * Comparison of all glass morphism modes side by side.
+ */
 export const AllGlassModesComparison: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story: 'Side-by-side comparison of all available glass morphism modes (standard, polar, prominent, shader) to help you choose the right effect for your design.',
+      },
+    },
+  },
   render: () => (
     <div
       style={{
@@ -956,8 +1001,17 @@ export const LinkCard: Story = {
   },
 };
 
-// Comprehensive Example
+/**
+ * Comprehensive example showcasing multiple card features and variants.
+ */
 export const Comprehensive: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story: 'A comprehensive example demonstrating various card features including sizes, variants, appearances, elevations, and states in a grid layout.',
+      },
+    },
+  },
   render: () => (
     <Container>
       <Grid>

package/src/components/Chart/AnimatedChart.tsx

@@ -71,7 +71,6 @@ 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;
 
           if (!chartDatasets.length) return null;

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 (

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(

package/src/components/Chart/BubbleChart.tsx

@@ -112,7 +112,6 @@ const BubbleChart = memo(
       }: 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

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/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) => {