@shohojdhara/atomix 0.3.4 → 0.3.6

package/src/components/Button/ButtonGroup.stories.tsx

@@ -0,0 +1,315 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { ButtonGroup } from './ButtonGroup';
+import { Button } from './Button';
+import { SIZES } from '../../lib/constants/components';
+
+const meta = {
+  title: 'Components/ButtonGroup',
+  component: ButtonGroup,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component:
+          'The ButtonGroup component groups multiple buttons together, creating a visually connected set of buttons with proper border radius handling. Buttons in a group share borders and have rounded corners only on the outer edges.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    className: {
+      control: 'text',
+      description: 'Additional CSS class names',
+    },
+    'aria-label': {
+      control: 'text',
+      description: 'ARIA label for accessibility',
+    },
+    role: {
+      control: 'text',
+      description: 'ARIA role for the button group',
+    },
+  },
+} satisfies Meta<typeof ButtonGroup>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// Basic Button Groups
+export const Basic: Story = {
+  render: () => (
+    <ButtonGroup>
+      <Button label="Left" />
+      <Button label="Middle" />
+      <Button label="Right" />
+    </ButtonGroup>
+  ),
+};
+
+export const TwoButtons: Story = {
+  render: () => (
+    <ButtonGroup>
+      <Button label="Cancel" variant="secondary" />
+      <Button label="Save" variant="primary" />
+    </ButtonGroup>
+  ),
+};
+
+export const ThreeButtons: Story = {
+  render: () => (
+    <ButtonGroup>
+      <Button label="Previous" variant="secondary" />
+      <Button label="Next" variant="primary" />
+      <Button label="Finish" variant="success" />
+    </ButtonGroup>
+  ),
+};
+
+// Variant Combinations
+export const PrimaryGroup: Story = {
+  render: () => (
+    <ButtonGroup>
+      <Button label="One" variant="primary" />
+      <Button label="Two" variant="primary" />
+      <Button label="Three" variant="primary" />
+    </ButtonGroup>
+  ),
+};
+
+export const SecondaryGroup: Story = {
+  render: () => (
+    <ButtonGroup>
+      <Button label="One" variant="secondary" />
+      <Button label="Two" variant="secondary" />
+      <Button label="Three" variant="secondary" />
+    </ButtonGroup>
+  ),
+};
+
+export const OutlineGroup: Story = {
+  render: () => (
+    <ButtonGroup>
+      <Button label="One" variant="outline-primary" />
+      <Button label="Two" variant="outline-primary" />
+      <Button label="Three" variant="outline-primary" />
+    </ButtonGroup>
+  ),
+};
+
+export const MixedVariants: Story = {
+  render: () => (
+    <ButtonGroup>
+      <Button label="Cancel" variant="secondary" />
+      <Button label="Save Draft" variant="outline-primary" />
+      <Button label="Publish" variant="primary" />
+    </ButtonGroup>
+  ),
+};
+
+// Size Variants
+export const SmallSize: Story = {
+  render: () => (
+    <ButtonGroup>
+      <Button label="Small" size="sm" />
+      <Button label="Buttons" size="sm" />
+      <Button label="Group" size="sm" />
+    </ButtonGroup>
+  ),
+};
+
+export const MediumSize: Story = {
+  render: () => (
+    <ButtonGroup>
+      <Button label="Medium" size="md" />
+      <Button label="Buttons" size="md" />
+      <Button label="Group" size="md" />
+    </ButtonGroup>
+  ),
+};
+
+export const LargeSize: Story = {
+  render: () => (
+    <ButtonGroup>
+      <Button label="Large" size="lg" />
+      <Button label="Buttons" size="lg" />
+      <Button label="Group" size="lg" />
+    </ButtonGroup>
+  ),
+};
+
+// With Icons
+export const WithIcons: Story = {
+  render: () => (
+    <ButtonGroup>
+      <Button label="Previous" iconName="ArrowLeft" iconPosition="start" />
+      <Button label="Next" iconName="ArrowRight" iconPosition="end" />
+    </ButtonGroup>
+  ),
+};
+
+export const IconOnly: Story = {
+  render: () => (
+    <ButtonGroup>
+      <Button iconName="CaretLeft" iconOnly ariaLabel="Previous" />
+      <Button iconName="CaretRight" iconOnly ariaLabel="Next" />
+    </ButtonGroup>
+  ),
+};
+
+// States
+export const WithDisabled: Story = {
+  render: () => (
+    <ButtonGroup>
+      <Button label="Enabled" />
+      <Button label="Disabled" disabled />
+      <Button label="Enabled" />
+    </ButtonGroup>
+  ),
+};
+
+export const WithLoading: Story = {
+  render: () => (
+    <ButtonGroup>
+      <Button label="Normal" />
+      <Button label="Loading" loading />
+      <Button label="Normal" />
+    </ButtonGroup>
+  ),
+};
+
+export const WithActive: Story = {
+  render: () => (
+    <ButtonGroup>
+      <Button label="Inactive" />
+      <Button label="Active" active />
+      <Button label="Inactive" />
+    </ButtonGroup>
+  ),
+};
+
+export const WithSelected: Story = {
+  render: () => (
+    <ButtonGroup>
+      <Button label="Option 1" selected />
+      <Button label="Option 2" />
+      <Button label="Option 3" />
+    </ButtonGroup>
+  ),
+};
+
+// Action Examples
+export const ActionButtons: Story = {
+  render: () => (
+    <ButtonGroup>
+      <Button label="Delete" variant="danger" />
+      <Button label="Edit" variant="warning" />
+      <Button label="View" variant="info" />
+    </ButtonGroup>
+  ),
+};
+
+export const NavigationButtons: Story = {
+  render: () => (
+    <ButtonGroup>
+      <Button label="First" variant="outline-secondary" />
+      <Button label="Previous" variant="outline-secondary" />
+      <Button label="Next" variant="outline-secondary" />
+      <Button label="Last" variant="outline-secondary" />
+    </ButtonGroup>
+  ),
+};
+
+export const FilterButtons: Story = {
+  render: () => (
+    <ButtonGroup>
+      <Button label="All" selected />
+      <Button label="Active" />
+      <Button label="Completed" />
+    </ButtonGroup>
+  ),
+};
+
+// Multiple Groups
+export const MultipleGroups: Story = {
+  render: () => (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
+      <ButtonGroup>
+        <Button label="Group 1 - Button 1" />
+        <Button label="Group 1 - Button 2" />
+        <Button label="Group 1 - Button 3" />
+      </ButtonGroup>
+      <ButtonGroup>
+        <Button label="Group 2 - Button 1" variant="secondary" />
+        <Button label="Group 2 - Button 2" variant="secondary" />
+      </ButtonGroup>
+    </div>
+  ),
+};
+
+// Accessibility
+export const WithAriaLabel: Story = {
+  render: () => (
+    <ButtonGroup aria-label="Navigation controls">
+      <Button label="Previous" />
+      <Button label="Next" />
+    </ButtonGroup>
+  ),
+};
+
+// Custom Styling
+export const CustomClassName: Story = {
+  render: () => (
+    <ButtonGroup className="custom-button-group">
+      <Button label="Custom" />
+      <Button label="Styled" />
+      <Button label="Group" />
+    </ButtonGroup>
+  ),
+};
+
+// Edge Cases
+export const SingleButton: Story = {
+  render: () => (
+    <ButtonGroup>
+      <Button label="Single Button" />
+    </ButtonGroup>
+  ),
+};
+
+export const ManyButtons: Story = {
+  render: () => (
+    <ButtonGroup>
+      <Button label="1" />
+      <Button label="2" />
+      <Button label="3" />
+      <Button label="4" />
+      <Button label="5" />
+      <Button label="6" />
+    </ButtonGroup>
+  ),
+};
+
+// Rounded Buttons
+export const RoundedButtons: Story = {
+  render: () => (
+    <ButtonGroup>
+      <Button label="Rounded" rounded />
+      <Button label="Buttons" rounded />
+      <Button label="Group" rounded />
+    </ButtonGroup>
+  ),
+};
+
+// Full Width
+export const FullWidth: Story = {
+  render: () => (
+    <div style={{ width: '100%', maxWidth: '600px' }}>
+      <ButtonGroup>
+        <Button label="Full" fullWidth />
+        <Button label="Width" fullWidth />
+        <Button label="Group" fullWidth />
+      </ButtonGroup>
+    </div>
+  ),
+};
+

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/Card/ElevationCard.tsx

@@ -24,7 +24,7 @@ export const ElevationCard: React.FC<ElevationCardProps> = ({
   return (
     <div
       className={`${className} ${cardProps.className}`}
-      ref={cardProps.ref}
+      ref={cardProps.ref as React.LegacyRef<HTMLDivElement>}
       style={style}
       tabIndex={cardProps.tabIndex}
       role={cardProps.role}