@shohojdhara/atomix 0.2.7 → 0.2.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shohojdhara/atomix",
-  "version": "0.2.7",
+  "version": "0.2.8",
   "description": "Atomix Design System - A modern component library for web applications",
   "type": "module",
   "sideEffects": false,

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

@@ -56,6 +56,35 @@ const meta = {
       control: { type: 'boolean' },
       description: 'Apply glass morphism effect to the button',
     },
+    loading: {
+      control: 'boolean',
+      description: 'Whether the button is in a loading state',
+    },
+    loadingText: {
+      control: 'text',
+      description: 'Custom text to display during loading',
+    },
+    fullWidth: {
+      control: 'boolean',
+      description: 'Whether the button should take full width',
+    },
+    block: {
+      control: 'boolean',
+      description: 'Whether the button should be block-level',
+    },
+    active: {
+      control: 'boolean',
+      description: 'Whether the button is in active state',
+    },
+    selected: {
+      control: 'boolean',
+      description: 'Whether the button is selected',
+    },
+    iconPosition: {
+      control: { type: 'select' },
+      options: ['start', 'end'],
+      description: 'Position of the icon',
+    },
   },
 } satisfies Meta<typeof Button>;
 
@@ -1161,3 +1190,148 @@ export const GlassStatesShowcase: Story = {
     </div>
   ),
 };
+
+// Loading State
+export const Loading: Story = {
+  args: {
+    label: 'Save',
+    variant: 'primary',
+    loading: true,
+  },
+};
+
+export const LoadingWithText: Story = {
+  args: {
+    label: 'Save',
+    variant: 'primary',
+    loading: true,
+    loadingText: 'Saving...',
+  },
+};
+
+export const LoadingStates: Story = {
+  render: () => (
+    <div style={{ display: 'flex', gap: '1rem', flexWrap: 'wrap' }}>
+      <Button label="Loading Primary" variant="primary" loading />
+      <Button label="Loading Secondary" variant="secondary" loading />
+      <Button label="Saving..." variant="success" loading loadingText="Saving..." />
+      <Button label="Deleting..." variant="error" loading loadingText="Deleting..." />
+    </div>
+  ),
+};
+
+// Full Width
+export const FullWidth: Story = {
+  args: {
+    label: 'Full Width Button',
+    variant: 'primary',
+    fullWidth: true,
+  },
+};
+
+export const FullWidthButtons: Story = {
+  render: () => (
+    <div style={{ width: '400px', display: 'flex', flexDirection: 'column', gap: '1rem' }}>
+      <Button label="Full Width Primary" variant="primary" fullWidth />
+      <Button label="Full Width Secondary" variant="secondary" fullWidth />
+      <Button label="Full Width Loading" variant="success" fullWidth loading />
+    </div>
+  ),
+};
+
+// Block
+export const Block: Story = {
+  args: {
+    label: 'Block Button',
+    variant: 'primary',
+    block: true,
+  },
+};
+
+// Icon Positioning
+export const IconStart: Story = {
+  args: {
+    label: 'Icon Start',
+    variant: 'primary',
+    icon: <Icon />,
+    iconPosition: 'start',
+  },
+};
+
+export const IconEnd: Story = {
+  args: {
+    label: 'Icon End',
+    variant: 'primary',
+    icon: <Icon />,
+    iconPosition: 'end',
+  },
+};
+
+export const IconPositions: Story = {
+  render: () => (
+    <div style={{ display: 'flex', gap: '1rem', flexWrap: 'wrap' }}>
+      <Button label="Icon Start" variant="primary" icon={<Icon />} iconPosition="start" />
+      <Button label="Icon End" variant="secondary" icon={<Icon />} iconPosition="end" />
+      <Button label="Loading Start" variant="success" loading iconPosition="start" />
+    </div>
+  ),
+};
+
+// Active State
+export const Active: Story = {
+  args: {
+    label: 'Active Button',
+    variant: 'primary',
+    active: true,
+  },
+};
+
+// Selected State
+export const Selected: Story = {
+  args: {
+    label: 'Selected Button',
+    variant: 'primary',
+    selected: true,
+  },
+};
+
+// Comprehensive Example
+export const Comprehensive: Story = {
+  render: () => (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '2rem', maxWidth: '600px' }}>
+      <div>
+        <h3 style={{ marginBottom: '1rem' }}>Loading States</h3>
+        <div style={{ display: 'flex', gap: '1rem', flexWrap: 'wrap' }}>
+          <Button label="Save" variant="primary" loading />
+          <Button label="Delete" variant="error" loading loadingText="Deleting..." />
+        </div>
+      </div>
+
+      <div>
+        <h3 style={{ marginBottom: '1rem' }}>Layout Variants</h3>
+        <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
+          <Button label="Full Width Button" variant="primary" fullWidth />
+          <Button label="Block Button" variant="secondary" block />
+        </div>
+      </div>
+
+      <div>
+        <h3 style={{ marginBottom: '1rem' }}>Icon Positioning</h3>
+        <div style={{ display: 'flex', gap: '1rem', flexWrap: 'wrap' }}>
+          <Button label="Icon Start" variant="primary" icon={<Icon />} iconPosition="start" />
+          <Button label="Icon End" variant="secondary" icon={<Icon />} iconPosition="end" />
+        </div>
+      </div>
+
+      <div>
+        <h3 style={{ marginBottom: '1rem' }}>States</h3>
+        <div style={{ display: 'flex', gap: '1rem', flexWrap: 'wrap' }}>
+          <Button label="Active" variant="primary" active />
+          <Button label="Selected" variant="success" selected />
+          <Button label="Loading" variant="info" loading />
+          <Button label="Disabled" variant="warning" disabled />
+        </div>
+      </div>
+    </div>
+  ),
+};

package/src/components/Button/Button.tsx

@@ -1,7 +1,9 @@
-import { ElementType, forwardRef } from 'react';
+import React, { ElementType, forwardRef, useCallback, useMemo } 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 { BUTTON } from '../../lib/constants/components';
 
 export type ButtonAsProp = {
   as?: ElementType;
@@ -10,85 +12,243 @@ export type ButtonAsProp = {
   [key: string]: any;
 };
 
-export const Button = forwardRef<HTMLButtonElement, ButtonProps & ButtonAsProp>(
-  (
-    {
-      label,
-      children,
-      onClick,
-      variant = 'primary',
-      size = 'md',
-      disabled = false,
-      icon,
-      iconOnly = false,
-      rounded = false,
-      className = '',
-      as: Component = 'button',
-      glass,
-      style,
-      ...props
-    },
-    ref
-  ) => {
-    const { generateButtonClass, handleClick } = useButton({
-      variant,
-      size,
-      disabled,
-      rounded,
-      glass,
-    });
-
-    const buttonClass = generateButtonClass({
-      variant,
-      size,
-      disabled,
-      rounded,
-      iconOnly,
-      glass,
-      className,
-    });
-
-    // Custom styles for glass effect
-    const glassStyles = glass ? {} : {};
-
-    // Handle the case when the button is rendered as a link or another component
-    const buttonProps = {
-      ref,
-      className: buttonClass,
-      onClick: handleClick(onClick),
-      disabled,
-      'aria-disabled': disabled,
-      style: glass ? { ...glassStyles, ...style } : style,
-      ...props,
-    };
-
-    const buttonContent = (
-      <>
-        {icon && <span className="c-btn__icon">{icon}</span>}
-        {!iconOnly && <span className="c-btn__label">{label || children}</span>}
-      </>
-    );
-
-    if (glass) {
-      // Default glass settings for buttons
-      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>
+export const Button = React.memo(
+  forwardRef<HTMLButtonElement, ButtonProps & ButtonAsProp>(
+    (
+      {
+        label,
+        children,
+        onClick,
+        variant = 'primary',
+        size = 'md',
+        disabled = false,
+        loading = false,
+        loadingText,
+        icon,
+        iconPosition = 'start',
+        iconOnly = false,
+        rounded = false,
+        fullWidth = false,
+        block = false,
+        active = false,
+        selected = false,
+        type = 'button',
+        className = '',
+        as: Component = 'button',
+        glass,
+        onHover,
+        onFocus,
+        onBlur,
+        ariaLabel,
+        ariaDescribedBy,
+        ariaExpanded,
+        ariaControls,
+        tabIndex,
+        style,
+        ...props
+      },
+      ref
+    ) => {
+      const isDisabled = disabled || loading;
+
+      const { generateButtonClass, handleClick } = useButton({
+        variant,
+        size,
+        disabled: isDisabled,
+        rounded,
+        glass,
+        loading,
+        fullWidth,
+        block,
+        active,
+        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]
       );
-    }
 
-    return <Component {...buttonProps}>{buttonContent}</Component>;
-  }
+      // Handle click with loading check
+      const handleClickEvent = useCallback(
+        (event: React.MouseEvent<HTMLButtonElement>) => {
+          if (isDisabled) {
+            event.preventDefault();
+            return;
+          }
+          onClick?.(event);
+        },
+        [isDisabled, onClick]
+      );
+
+      // Handle hover
+      const handleMouseEnter = useCallback(
+        (event: React.MouseEvent<HTMLButtonElement>) => {
+          if (!isDisabled) {
+            onHover?.(event);
+          }
+        },
+        [isDisabled, onHover]
+      );
+
+      // Handle focus
+      const handleFocusEvent = useCallback(
+        (event: React.FocusEvent<HTMLButtonElement>) => {
+          if (!isDisabled) {
+            onFocus?.(event);
+          }
+        },
+        [isDisabled, onFocus]
+      );
+
+      // Handle blur
+      const handleBlurEvent = useCallback(
+        (event: React.FocusEvent<HTMLButtonElement>) => {
+          if (!isDisabled) {
+            onBlur?.(event);
+          }
+        },
+        [isDisabled, onBlur]
+      );
+
+      // Determine button text
+      const buttonText = useMemo(() => {
+        if (loading && loadingText) return loadingText;
+        if (loading && !loadingText) return label || children;
+        return label || children;
+      }, [loading, 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]);
+
+      // Button content with icon positioning
+      const buttonContent = useMemo(() => {
+        const iconElement = icon && !loading && (
+          <span className={BUTTON.ICON_CLASS} aria-hidden="true">
+            {icon}
+          </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}
+              {iconElement}
+            </>
+          );
+        }
+
+        return (
+          <>
+            {spinnerElement}
+            {iconElement}
+            {labelElement}
+          </>
+        );
+      }, [icon, iconPosition, iconOnly, buttonText, loading, spinnerSize, variant]);
+
+      // Button props
+      const buttonProps = useMemo(
+        () => ({
+          ref,
+          className: buttonClass,
+          type: Component === 'button' ? type : undefined,
+          onClick: handleClickEvent,
+          onMouseEnter: onHover ? handleMouseEnter : undefined,
+          onFocus: onFocus ? handleFocusEvent : undefined,
+          onBlur: onBlur ? handleBlurEvent : undefined,
+          disabled: isDisabled && Component === 'button',
+          '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,
+        ]
+      );
+
+      if (glass) {
+        // Default glass settings for buttons
+        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>
+        );
+      }
+
+      return <Component {...buttonProps}>{buttonContent}</Component>;
+    }
+  )
 );
 
 Button.displayName = 'Button';