@shohojdhara/atomix 0.3.5 → 0.3.7

package/src/components/Button/Button.tsx

@@ -1,10 +1,11 @@
-import React, { ElementType, forwardRef, useCallback, useMemo } from 'react';
+import React, { ElementType, forwardRef, useCallback } from 'react';
 import { useButton } from '../../lib/composables/useButton';
 import { ButtonProps } from '../../lib/types/components';
 import { AtomixGlass } from '../AtomixGlass/AtomixGlass';
 import { Spinner } from '../Spinner/Spinner';
 import { Icon, type PhosphorIconsType } from '../Icon/Icon';
-import { BUTTON } from '../../lib/constants/components';
+import { BUTTON, THEME_NAMING } from '../../lib/constants/components';
+import { ThemeNaming } from '../../lib/utils/themeNaming';
 
 export type ButtonAsProp = {
   as?: ElementType;
@@ -62,13 +63,7 @@ export const Button = React.memo(
       const shouldRenderAsLink = Boolean(href && !isDisabled);
 
       // Resolve icon element - support both icon (ReactNode) and iconName (string)
-      const iconElement = useMemo(() => {
-        if (loading) return null;
-        if (iconName) {
-          return <Icon name={iconName as PhosphorIconsType} size={iconSize} />;
-        }
-        return icon;
-      }, [icon, iconName, iconSize, loading]);
+      const iconElement = iconName ? <Icon name={iconName as PhosphorIconsType} size={iconSize} /> : icon;
 
       const { generateButtonClass, handleClick } = useButton({
         variant,
@@ -83,24 +78,23 @@ export const Button = React.memo(
         selected,
       });
 
-      const buttonClass = useMemo(
-        () =>
-          generateButtonClass({
-            variant,
-            size,
-            disabled: isDisabled,
-            rounded,
-            iconOnly,
-            glass,
-            loading,
-            fullWidth,
-            block,
-            active,
-            selected,
-            className,
-          }),
-        [variant, size, isDisabled, rounded, iconOnly, glass, loading, fullWidth, block, active, selected, className, generateButtonClass]
-      );
+      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) : '',
+        rounded ? ThemeNaming.stateClass(THEME_NAMING.BUTTON_PREFIX, 'rounded') : '',
+        isDisabled ? ThemeNaming.stateClass(THEME_NAMING.BUTTON_PREFIX, 'disabled') : '',
+        glass ? ThemeNaming.stateClass(THEME_NAMING.BUTTON_PREFIX, 'glass') : '',
+        loading ? BUTTON.CLASSES.LOADING : '',
+        fullWidth ? BUTTON.CLASSES.FULL_WIDTH : '',
+        block ? BUTTON.CLASSES.BLOCK : '',
+        active ? BUTTON.CLASSES.ACTIVE : '',
+        selected ? BUTTON.CLASSES.SELECTED : '',
+        className,
+      ]
+        .filter(Boolean)
+        .join(' ');
 
       // Handle click with loading check
       const handleClickEvent = useCallback(
@@ -145,117 +139,76 @@ export const Button = React.memo(
       );
 
       // Determine button text
-      const buttonText = useMemo(() => {
-        if (loading && loadingText) return loadingText;
-        if (loading && !loadingText) return label || children;
-        return label || children;
-      }, [loading, loadingText, label, children]);
+      const buttonText = loading && loadingText ? loadingText : label || children;
 
       // Determine spinner size based on button size
-      const spinnerSize = useMemo(() => {
-        if (size === 'sm') return 'sm';
-        if (size === 'lg') return 'md';
-        return 'sm';
-      }, [size]);
+      const spinnerSize = size === 'sm' ? 'sm' : size === 'lg' ? 'md' : 'sm';
 
       // Button content with icon positioning
-      const buttonContent = useMemo(() => {
-        const iconSpan = iconElement && (
-          <span className={BUTTON.ICON_CLASS} aria-hidden="true">
-            {iconElement}
-          </span>
-        );
-
-        const spinnerElement = loading && (
-          <span className={BUTTON.SPINNER_CLASS} aria-hidden="true">
-            <Spinner
-              size={spinnerSize}
-              variant={
-                variant === 'link' || (typeof variant === 'string' && variant.startsWith('outline-'))
-                  ? 'primary'
-                  : (variant === 'danger' ? 'error' : (variant as any))
-              }
-            />
-          </span>
-        );
-
-        const labelElement = !iconOnly && buttonText && (
-          <span className={BUTTON.LABEL_CLASS}>{buttonText}</span>
-        );
-
-        if (iconPosition === 'end') {
-          return (
-            <>
-              {labelElement}
-              {spinnerElement}
-              {iconSpan}
-            </>
-          );
-        }
-
-        return (
-          <>
-            {spinnerElement}
-            {iconSpan}
-            {labelElement}
-          </>
-        );
-      }, [iconElement, iconPosition, iconOnly, buttonText, loading, spinnerSize, variant]);
+      const buttonContent = (
+        <>
+          {loading && (
+            <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-'))
+                    ? 'primary'
+                    : (variant === 'danger' ? 'error' : (variant as any))
+                }
+              />
+            </span>
+          )}
+          {iconElement && !loading && (
+            <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>
+          )}
+        </>
+      );
 
       // Button props
-      const buttonProps = useMemo(
-        () => ({
-          ref,
-          className: buttonClass,
-          type: Component === 'button' && !shouldRenderAsLink ? type : undefined,
-          onClick: handleClickEvent,
-          onMouseEnter: onHover ? handleMouseEnter : undefined,
-          onFocus: onFocus ? handleFocusEvent : undefined,
-          onBlur: onBlur ? handleBlurEvent : undefined,
-          disabled: isDisabled && Component === 'button' && !shouldRenderAsLink,
-          'aria-disabled': isDisabled,
-          'aria-busy': loading,
-          'aria-label': ariaLabel || (iconOnly ? label || children : undefined),
-          'aria-describedby': ariaDescribedBy,
-          'aria-expanded': ariaExpanded,
-          'aria-controls': ariaControls,
-          tabIndex: tabIndex !== undefined ? tabIndex : (isDisabled ? -1 : 0),
-          style,
-          ...props,
-        }),
-        [
-          ref,
-          buttonClass,
-          Component,
-          type,
-          handleClickEvent,
-          handleMouseEnter,
-          handleFocusEvent,
-          handleBlurEvent,
-          isDisabled,
-          loading,
-          ariaLabel,
-          iconOnly,
-          label,
-          children,
-          ariaDescribedBy,
-          ariaExpanded,
-          ariaControls,
-          tabIndex,
-          style,
-          props,
-        ]
-      );
+      const buttonProps = {
+        ref,
+        className: buttonClass,
+        type: Component === 'button' && !shouldRenderAsLink ? type : undefined,
+        onClick: handleClickEvent,
+        onMouseEnter: onHover ? handleMouseEnter : undefined,
+        onFocus: onFocus ? handleFocusEvent : undefined,
+        onBlur: onBlur ? handleBlurEvent : undefined,
+        disabled: isDisabled && Component === 'button' && !shouldRenderAsLink,
+        'aria-disabled': isDisabled,
+        'aria-busy': loading,
+        'aria-label': ariaLabel || (iconOnly ? label || children : undefined),
+        'aria-describedby': ariaDescribedBy,
+        'aria-expanded': ariaExpanded,
+        'aria-controls': ariaControls,
+        tabIndex: tabIndex !== undefined ? tabIndex : (isDisabled ? -1 : 0),
+        style,
+        ...props,
+      };
+
+      // Default glass props
+      const defaultGlassProps = {
+        displacementScale: 20,
+        blurAmount: 0,
+        saturation: 200,
+        elasticity: 0,
+      };
+      const glassProps = glass === true ? defaultGlassProps : { ...defaultGlassProps, ...glass };
 
       // Render as anchor if href is provided
       if (shouldRenderAsLink) {
         const { ref: _, ...buttonPropsWithoutRef } = buttonProps;
         const anchorButtonProps = {
           ...buttonPropsWithoutRef,
-          type: undefined, 
+          type: undefined,
           disabled: undefined,
         };
-        
+
         // Use custom LinkComponent if provided (e.g., Next.js Link)
         if (LinkComponent) {
           const LinkComp = LinkComponent as React.ComponentType<any>;
@@ -266,25 +219,14 @@ export const Button = React.memo(
             target,
             rel: target === '_blank' ? 'noopener noreferrer' : undefined,
           };
-          
+
           const linkElement = (
             <LinkComp {...linkProps}>
               {buttonContent}
             </LinkComp>
           );
 
-          if (glass) {
-            const defaultGlassProps = {
-              displacementScale: 20,
-              blurAmount: 0,
-              saturation: 200,
-              elasticity: 0,
-            };
-            const glassProps = glass === true ? defaultGlassProps : { ...defaultGlassProps, ...glass };
-            return <AtomixGlass {...glassProps}>{linkElement}</AtomixGlass>;
-          }
-
-          return linkElement;
+          return glass ? <AtomixGlass {...glassProps}>{linkElement}</AtomixGlass> : linkElement;
         }
 
         // Fallback to regular anchor tag
@@ -294,39 +236,15 @@ export const Button = React.memo(
           </a>
         );
 
-        if (glass) {
-          const defaultGlassProps = {
-            displacementScale: 20,
-            blurAmount: 0,
-            saturation: 200,
-            elasticity: 0,
-          };
-          const glassProps = glass === true ? defaultGlassProps : { ...defaultGlassProps, ...glass };
-          return <AtomixGlass {...glassProps}>{anchorElement}</AtomixGlass>;
-        }
-
-        return anchorElement;
+        return glass ? <AtomixGlass {...glassProps}>{anchorElement}</AtomixGlass> : anchorElement;
       }
 
       // Default button rendering
-      if (glass) {
-        const defaultGlassProps = {
-          displacementScale: 20,
-          blurAmount: 0,
-          saturation: 200,
-          elasticity: 0,
-        };
-
-        const glassProps = glass === true ? defaultGlassProps : { ...defaultGlassProps, ...glass };
-
-        return (
-          <AtomixGlass {...glassProps}>
-            <Component {...buttonProps}>{buttonContent}</Component>
-          </AtomixGlass>
-        );
-      }
+      const buttonElement = (
+        <Component {...buttonProps}>{buttonContent}</Component>
+      );
 
-      return <Component {...buttonProps}>{buttonContent}</Component>;
+      return glass ? <AtomixGlass {...glassProps}>{buttonElement}</AtomixGlass> : buttonElement;
     }
   )
 );
@@ -335,4 +253,4 @@ Button.displayName = 'Button';
 
 export type { ButtonProps };
 
-export default Button;
+export default Button;

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