@shohojdhara/atomix 0.3.15 → 0.4.0

package/src/components/Button/Button.test.tsx

@@ -8,100 +8,116 @@ expect.extend(toHaveNoViolations);
 
 // Mock AtomixGlass component
 vi.mock('../AtomixGlass/AtomixGlass', () => ({
-    AtomixGlass: ({ children, ...props }: any) => (
-        <div data-testid="atomix-glass" data-glass-props={JSON.stringify(props)}>
-            {children}
-        </div>
-    ),
+  AtomixGlass: ({ children, ...props }: any) => (
+    <div data-testid="atomix-glass" data-glass-props={JSON.stringify(props)}>
+      {children}
+    </div>
+  ),
 }));
 
 describe('Button Component', () => {
-    it('renders correctly with label', () => {
-        render(<Button label="Click Me" />);
-        expect(screen.getByRole('button', { name: /click me/i })).toBeInTheDocument();
-    });
+  it('renders correctly with label', () => {
+    render(<Button label="Click Me" />);
+    expect(screen.getByRole('button', { name: /click me/i })).toBeInTheDocument();
+  });
 
-    it('renders correctly with children', () => {
-        render(<Button>Click Me</Button>);
-        expect(screen.getByRole('button', { name: /click me/i })).toBeInTheDocument();
-    });
+  it('renders correctly with children', () => {
+    render(<Button>Click Me</Button>);
+    expect(screen.getByRole('button', { name: /click me/i })).toBeInTheDocument();
+  });
 
-    it('handles onClick event', () => {
-        const handleClick = vi.fn();
-        render(<Button onClick={handleClick}>Click Me</Button>);
-        fireEvent.click(screen.getByRole('button'));
-        expect(handleClick).toHaveBeenCalledTimes(1);
-    });
+  it('handles onClick event', () => {
+    const handleClick = vi.fn();
+    render(<Button onClick={handleClick}>Click Me</Button>);
+    fireEvent.click(screen.getByRole('button'));
+    expect(handleClick).toHaveBeenCalledTimes(1);
+  });
 
-    it('does not fire onClick when disabled', () => {
-        const handleClick = vi.fn();
-        render(<Button disabled onClick={handleClick}>Click Me</Button>);
-        const button = screen.getByRole('button');
-        expect(button).toBeDisabled();
-        fireEvent.click(button);
-        expect(handleClick).not.toHaveBeenCalled();
-    });
+  it('does not fire onClick when disabled', () => {
+    const handleClick = vi.fn();
+    render(
+      <Button disabled onClick={handleClick}>
+        Click Me
+      </Button>
+    );
+    const button = screen.getByRole('button');
+    expect(button).toBeDisabled();
+    fireEvent.click(button);
+    expect(handleClick).not.toHaveBeenCalled();
+  });
 
-    it('renders loading state correctly', () => {
-        render(<Button loading>Submit</Button>);
-        const button = screen.getByRole('button');
-        // It should be disabled or aria-disabled
-        expect(button).toHaveAttribute('aria-busy', 'true');
-        // Check for spinner (implementation detail: spinner usually has specific class or role)
-        // Based on Button.tsx: <span className="...spinner...">...</span>
-        // Let's look for the spinner component or class if we can't find by role
-        // Or check if text is still there.
-        expect(screen.getByText('Submit')).toBeInTheDocument();
-    });
+  it('renders loading state correctly', () => {
+    render(<Button loading>Submit</Button>);
+    const button = screen.getByRole('button');
+    // It should be disabled or aria-disabled
+    expect(button).toHaveAttribute('aria-busy', 'true');
+    // Check for spinner (implementation detail: spinner usually has specific class or role)
+    // Based on Button.tsx: <span className="...spinner...">...</span>
+    // Let's look for the spinner component or class if we can't find by role
+    // Or check if text is still there.
+    expect(screen.getByText('Submit')).toBeInTheDocument();
+  });
 
-    it('replaces text with loadingText when loading', () => {
-        render(<Button loading loadingText="Processing...">Submit</Button>);
-        expect(screen.queryByText('Submit')).not.toBeInTheDocument();
-        expect(screen.getByText('Processing...')).toBeInTheDocument();
-    });
+  it('replaces text with loadingText when loading', () => {
+    render(
+      <Button loading loadingText="Processing...">
+        Submit
+      </Button>
+    );
+    expect(screen.queryByText('Submit')).not.toBeInTheDocument();
+    expect(screen.getByText('Processing...')).toBeInTheDocument();
+  });
 
-    it('renders as a link when href is provided', () => {
-        render(<Button href="/home">Home</Button>);
-        const link = screen.getByRole('link', { name: /home/i });
-        expect(link).toHaveAttribute('href', '/home');
-    });
+  it('renders as a link when href is provided', () => {
+    render(<Button href="/home">Home</Button>);
+    const link = screen.getByRole('link', { name: /home/i });
+    expect(link).toHaveAttribute('href', '/home');
+  });
 
-    it('renders as disabled link when disabled and href provided', () => {
-        // Current implementation might be buggy here, let's see
-        render(<Button href="/home" disabled>Home</Button>);
-        const link = screen.queryByRole('link');
-        const button = screen.queryByRole('button');
+  it('renders as disabled link when disabled and href provided', () => {
+    // Current implementation might be buggy here, let's see
+    render(
+      <Button href="/home" disabled>
+        Home
+      </Button>
+    );
+    const link = screen.queryByRole('link');
+    const button = screen.queryByRole('button');
 
-        // If it renders as button when disabled (which logic suggested), then:
-        if (button) {
-             expect(button).toBeDisabled();
-        } else if (link) {
-             expect(link).toHaveAttribute('aria-disabled', 'true');
-             // Should not navigate
-        }
-    });
+    // If it renders as button when disabled (which logic suggested), then:
+    if (button) {
+      expect(button).toBeDisabled();
+    } else if (link) {
+      expect(link).toHaveAttribute('aria-disabled', 'true');
+      // Should not navigate
+    }
+  });
 
-    it('forwards ref', () => {
-        const ref = React.createRef<HTMLButtonElement>();
-        render(<Button ref={ref}>Ref Button</Button>);
-        expect(ref.current).toBeInstanceOf(HTMLButtonElement);
-    });
+  it('forwards ref', () => {
+    const ref = React.createRef<HTMLButtonElement>();
+    render(<Button ref={ref}>Ref Button</Button>);
+    expect(ref.current).toBeInstanceOf(HTMLButtonElement);
+  });
 
-    it('handles iconOnly correctly with aria-label', () => {
-        render(<Button iconOnly icon={<span>Icon</span>} aria-label="Icon Button" />);
-        expect(screen.getByLabelText('Icon Button')).toBeInTheDocument();
-    });
+  it('handles iconOnly correctly with aria-label', () => {
+    render(<Button iconOnly icon={<span>Icon</span>} aria-label="Icon Button" />);
+    expect(screen.getByLabelText('Icon Button')).toBeInTheDocument();
+  });
 
-    it('does not render [object Object] as aria-label when children is an element', () => {
-        const { container } = render(<Button iconOnly icon={<span>Icon</span>}><span>Text</span></Button>);
-        const button = screen.getByRole('button');
-        // aria-label should probably be undefined or empty, or extracted text, but definitely not "[object Object]"
-        expect(button.getAttribute('aria-label')).not.toBe('[object Object]');
-    });
+  it('does not render [object Object] as aria-label when children is an element', () => {
+    const { container } = render(
+      <Button iconOnly icon={<span>Icon</span>}>
+        <span>Text</span>
+      </Button>
+    );
+    const button = screen.getByRole('button');
+    // aria-label should probably be undefined or empty, or extracted text, but definitely not "[object Object]"
+    expect(button.getAttribute('aria-label')).not.toBe('[object Object]');
+  });
 
-    it('should have no accessibility violations', async () => {
-        const { container } = render(<Button>Accessible Button</Button>);
-        const results = await axe(container);
-        expect(results).toHaveNoViolations();
-    });
+  it('should have no accessibility violations', async () => {
+    const { container } = render(<Button>Accessible Button</Button>);
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
 });

package/src/components/Button/Button.tsx

@@ -65,13 +65,19 @@ export const Button = React.memo(
       const shouldRenderAsLink = Boolean(href && !isDisabled);
 
       // Resolve icon element - support both icon (ReactNode) and iconName (string)
-      const iconElement = iconName ? <Icon name={iconName as PhosphorIconsType} size={iconSize} /> : icon;
+      const iconElement = iconName ? (
+        <Icon name={iconName as PhosphorIconsType} size={iconSize} />
+      ) : (
+        icon
+      );
 
       const buttonClass = [
         BUTTON.BASE_CLASS,
         ThemeNaming.variantClass(THEME_NAMING.BUTTON_PREFIX, variant),
         size !== 'md' ? ThemeNaming.sizeClass(THEME_NAMING.BUTTON_PREFIX, size) : '',
-        iconOnly ? ThemeNaming.stateClass(THEME_NAMING.BUTTON_PREFIX, THEME_NAMING.ICON_ELEMENT) : '',
+        iconOnly
+          ? ThemeNaming.stateClass(THEME_NAMING.BUTTON_PREFIX, THEME_NAMING.ICON_ELEMENT)
+          : '',
         rounded ? ThemeNaming.stateClass(THEME_NAMING.BUTTON_PREFIX, 'rounded') : '',
         isDisabled ? ThemeNaming.stateClass(THEME_NAMING.BUTTON_PREFIX, 'disabled') : '',
         glass ? ThemeNaming.stateClass(THEME_NAMING.BUTTON_PREFIX, 'glass') : '',
@@ -134,30 +140,60 @@ export const Button = React.memo(
       const spinnerSize = size === 'sm' ? 'sm' : size === 'lg' ? 'md' : 'sm';
 
       // Safe Aria Label
-      const safeAriaLabel = ariaLabel || (iconOnly ? (typeof label === 'string' ? label : (typeof children === 'string' ? children : undefined)) : undefined);
+      const safeAriaLabel =
+        ariaLabel ||
+        (iconOnly
+          ? typeof label === 'string'
+            ? label
+            : typeof children === 'string'
+              ? children
+              : undefined
+          : undefined);
 
       // Button content with icon positioning
       const buttonContent = (
         <>
           {loading && (
-            <span className={ThemeNaming.bemClass(THEME_NAMING.BUTTON_PREFIX, THEME_NAMING.SPINNER_ELEMENT)} aria-hidden="true">
+            <span
+              className={ThemeNaming.bemClass(
+                THEME_NAMING.BUTTON_PREFIX,
+                THEME_NAMING.SPINNER_ELEMENT
+              )}
+              aria-hidden="true"
+            >
               <Spinner
                 size={spinnerSize}
                 variant={
-                  variant === 'link' || (typeof variant === 'string' && variant.startsWith('outline-'))
+                  variant === 'link' ||
+                  (typeof variant === 'string' && variant.startsWith('outline-'))
                     ? 'primary'
-                    : (variant === 'danger' ? 'error' : (variant as any))
+                    : variant === 'danger'
+                      ? 'error'
+                      : (variant as any)
                 }
               />
             </span>
           )}
           {iconElement && !loading && (
-            <span className={ThemeNaming.bemClass(THEME_NAMING.BUTTON_PREFIX, THEME_NAMING.ICON_ELEMENT)} aria-hidden="true">
+            <span
+              className={ThemeNaming.bemClass(
+                THEME_NAMING.BUTTON_PREFIX,
+                THEME_NAMING.ICON_ELEMENT
+              )}
+              aria-hidden="true"
+            >
               {iconElement}
             </span>
           )}
           {!iconOnly && buttonText && (
-            <span className={ThemeNaming.bemClass(THEME_NAMING.BUTTON_PREFIX, THEME_NAMING.LABEL_ELEMENT)}>{buttonText}</span>
+            <span
+              className={ThemeNaming.bemClass(
+                THEME_NAMING.BUTTON_PREFIX,
+                THEME_NAMING.LABEL_ELEMENT
+              )}
+            >
+              {buttonText}
+            </span>
           )}
         </>
       );
@@ -175,7 +211,7 @@ export const Button = React.memo(
         'aria-describedby': ariaDescribedBy,
         'aria-expanded': ariaExpanded,
         'aria-controls': ariaControls,
-        tabIndex: tabIndex !== undefined ? tabIndex : (isDisabled ? -1 : 0),
+        tabIndex: tabIndex !== undefined ? tabIndex : isDisabled ? -1 : 0,
         style,
         ...props,
       };
@@ -195,11 +231,7 @@ export const Button = React.memo(
             rel: target === '_blank' ? 'noopener noreferrer' : undefined,
           };
 
-          content = (
-            <LinkComp {...linkProps}>
-              {buttonContent}
-            </LinkComp>
-          );
+          content = <LinkComp {...linkProps}>{buttonContent}</LinkComp>;
         } else {
           // Fallback to regular anchor tag
           content = (

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

@@ -38,7 +38,6 @@ const sampleButtonTitles = {
   filters: ['All', 'Active', 'Completed'],
 };
 
-
 // ============================================================================
 // META CONFIGURATION
 // ============================================================================
@@ -198,7 +197,7 @@ export const GroupWithIcons: Story = {
         <path d="M12 8v4M12 16h.01" />
       </svg>
     );
-    
+
     return (
       <ButtonGroup>
         <Button label="First" icon={<Icon />} variant="primary" />
@@ -216,15 +215,15 @@ export const GroupWithIcons: Story = {
 export const InFormIntegration: Story = {
   render: () => (
     <form className="u-flex u-flex-col u-gap-4">
-      <input 
-        type="text" 
-        placeholder="Username" 
-        className="u-p-2 u-mb-2 u-border u-border-gray-300 u-rounded u-w-full" 
+      <input
+        type="text"
+        placeholder="Username"
+        className="u-p-2 u-mb-2 u-border u-border-gray-300 u-rounded u-w-full"
       />
-      <input 
-        type="password" 
-        placeholder="Password" 
-        className="u-p-2 u-mb-2 u-border u-border-gray-300 u-rounded u-w-full" 
+      <input
+        type="password"
+        placeholder="Password"
+        className="u-p-2 u-mb-2 u-border u-border-gray-300 u-rounded u-w-full"
       />
       <ButtonGroup className="u-justify-end">
         <Button label="Cancel" variant="secondary" />
@@ -258,7 +257,7 @@ export const WithOtherComponents: Story = {
           <Button label="Inactive" variant="outline-primary" />
         </ButtonGroup>
       </div>
-      
+
       <div className="u-flex u-justify-between u-items-center">
         <div className="u-text-sm u-text-gray-600">Showing 1-10 of 42 results</div>
         <ButtonGroup>
@@ -278,24 +277,24 @@ export const ResponsiveButtonGroup: Story = {
   render: () => (
     <div className="u-w-full">
       <ButtonGroup className="u-flex-col md:u-flex-row u-gap-0">
-        <Button 
-          label="Home" 
-          variant="outline-primary" 
+        <Button
+          label="Home"
+          variant="outline-primary"
           className="u-w-full md:u-w-auto u-rounded-none md:u-rounded-l md:u-rounded-r-none"
         />
-        <Button 
-          label="About" 
-          variant="outline-primary" 
+        <Button
+          label="About"
+          variant="outline-primary"
           className="u-w-full md:u-w-auto u-rounded-none"
         />
-        <Button 
-          label="Services" 
-          variant="outline-primary" 
+        <Button
+          label="Services"
+          variant="outline-primary"
           className="u-w-full md:u-w-auto u-rounded-none"
         />
-        <Button 
-          label="Contact" 
-          variant="outline-primary" 
+        <Button
+          label="Contact"
+          variant="outline-primary"
           className="u-w-full md:u-w-auto u-rounded-none md:u-rounded-r md:u-rounded-l-none"
         />
       </ButtonGroup>
@@ -410,17 +409,17 @@ export const VerticalLayout: Story = {
 export const WithKeyboardNavigation: Story = {
   render: () => {
     const [activeIndex, setActiveIndex] = useState(0);
-    
+
     const buttons = [
-      { label: "Button 1", variant: "primary" },
-      { label: "Button 2", variant: "secondary" },
-      { label: "Button 3", variant: "outline-primary" },
-      { label: "Button 4", variant: "success" },
+      { label: 'Button 1', variant: 'primary' },
+      { label: 'Button 2', variant: 'secondary' },
+      { label: 'Button 3', variant: 'outline-primary' },
+      { label: 'Button 4', variant: 'success' },
     ];
 
     const handleKeyDown = (index: number, e: React.KeyboardEvent) => {
       let newIndex = index;
-      
+
       switch (e.key) {
         case 'ArrowRight':
         case 'ArrowDown':
@@ -439,7 +438,7 @@ export const WithKeyboardNavigation: Story = {
         default:
           return;
       }
-      
+
       e.preventDefault();
       setActiveIndex(newIndex);
     };
@@ -454,7 +453,13 @@ export const WithKeyboardNavigation: Story = {
               variant={btn.variant}
               active={activeIndex === idx}
               onKeyDown={(e: React.KeyboardEvent) => handleKeyDown(idx, e)}
-              className={idx === 0 ? 'u-rounded-r-none' : idx === buttons.length - 1 ? 'u-rounded-l-none' : 'u-rounded-none'}
+              className={
+                idx === 0
+                  ? 'u-rounded-r-none'
+                  : idx === buttons.length - 1
+                    ? 'u-rounded-l-none'
+                    : 'u-rounded-none'
+              }
             />
           ))}
         </div>
@@ -468,4 +473,4 @@ export const WithKeyboardNavigation: Story = {
       },
     },
   },
-};
+};

package/src/components/Button/ButtonGroup.tsx

@@ -5,10 +5,10 @@ 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>
@@ -26,12 +26,7 @@ export const ButtonGroup: React.FC<ButtonGroupProps> = ({
   role = 'group',
 }) => {
   // Generate CSS classes
-  const buttonGroupClasses = [
-    BUTTON_GROUP.CLASSES.BASE,
-    className,
-  ]
-    .filter(Boolean)
-    .join(' ');
+  const buttonGroupClasses = [BUTTON_GROUP.CLASSES.BASE, className].filter(Boolean).join(' ');
 
   // Get valid Button children
   const buttonChildren = Children.toArray(children).filter(
@@ -39,12 +34,7 @@ export const ButtonGroup: React.FC<ButtonGroupProps> = ({
   );
 
   return (
-    <div
-      className={buttonGroupClasses}
-      style={style}
-      role={role}
-      aria-label={ariaLabel}
-    >
+    <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
@@ -64,4 +54,3 @@ export type { ButtonGroupProps };
 ButtonGroup.displayName = 'ButtonGroup';
 
 export default ButtonGroup;
-