@shohojdhara/atomix 0.3.6 → 0.3.8

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/DataTable/DataTable.stories.tsx

@@ -253,3 +253,241 @@ export const Interactive: Story = {
     sortable: true,
   },
 };
+
+// Row selection - multiple
+export const RowSelectionMultiple: Story = {
+  render: args => {
+    const [selectedRows, setSelectedRows] = useState<any[]>([]);
+
+    return (
+      <div>
+        <DataTable
+          {...args}
+          selectionMode="multiple"
+          onSelectionChange={(rows, ids) => setSelectedRows(rows)}
+        />
+        {selectedRows.length > 0 && (
+          <div style={{ marginTop: '1rem', padding: '1rem', background: '#f5f5f5', borderRadius: '4px' }}>
+            <strong>Selected: {selectedRows.length} row(s)</strong>
+            <pre style={{ marginTop: '0.5rem', fontSize: '0.875rem' }}>
+              {JSON.stringify(selectedRows.map(r => r.name), null, 2)}
+            </pre>
+          </div>
+        )}
+      </div>
+    );
+  },
+  args: {
+    data: users,
+    columns,
+    sortable: true,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'DataTable with multiple row selection enabled. Select rows using checkboxes.',
+      },
+    },
+  },
+};
+
+// Row selection - single
+export const RowSelectionSingle: Story = {
+  render: args => {
+    const [selectedRow, setSelectedRow] = useState<any>(null);
+
+    return (
+      <div>
+        <DataTable
+          {...args}
+          selectionMode="single"
+          onSelectionChange={(rows) => setSelectedRow(rows[0] || null)}
+        />
+        {selectedRow && (
+          <div style={{ marginTop: '1rem', padding: '1rem', background: '#f5f5f5', borderRadius: '4px' }}>
+            <strong>Selected:</strong>
+            <pre style={{ marginTop: '0.5rem', fontSize: '0.875rem' }}>
+              {JSON.stringify(selectedRow, null, 2)}
+            </pre>
+          </div>
+        )}
+      </div>
+    );
+  },
+  args: {
+    data: users,
+    columns,
+    sortable: true,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'DataTable with single row selection enabled. Select a row using radio buttons.',
+      },
+    },
+  },
+};
+
+// Column-specific filtering
+export const ColumnFilters: Story = {
+  args: {
+    data: users,
+    columns: columns.map(col => ({
+      ...col,
+      filterable: ['name', 'role', 'email'].includes(col.key),
+    })),
+    columnFilters: true,
+    sortable: true,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'DataTable with column-specific filters. Each filterable column has its own filter input.',
+      },
+    },
+  },
+};
+
+// Column resizing
+export const ResizableColumns: Story = {
+  args: {
+    data: users,
+    columns: columns.map(col => ({
+      ...col,
+      resizable: true,
+      minWidth: '100px',
+    })),
+    resizable: true,
+    sortable: true,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'DataTable with resizable columns. Drag the right edge of column headers to resize.',
+      },
+    },
+  },
+};
+
+// Column reordering
+export const ReorderableColumns: Story = {
+  args: {
+    data: users,
+    columns,
+    reorderable: true,
+    sortable: true,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'DataTable with reorderable columns. Drag column headers to reorder them.',
+      },
+    },
+  },
+};
+
+// Column visibility toggle
+export const ColumnVisibility: Story = {
+  args: {
+    data: users,
+    columns,
+    showColumnVisibility: true,
+    sortable: true,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'DataTable with column visibility toggle. Use the Columns button to show/hide columns.',
+      },
+    },
+  },
+};
+
+// Export functionality
+export const Exportable: Story = {
+  args: {
+    data: users,
+    columns,
+    exportable: true,
+    exportFormats: ['csv', 'excel', 'json'],
+    exportFilename: 'users',
+    sortable: true,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'DataTable with export functionality. Export data as CSV, Excel, or JSON.',
+      },
+    },
+  },
+};
+
+// Sticky headers
+export const StickyHeaders: Story = {
+  args: {
+    data: largeDataSet,
+    columns,
+    stickyHeader: true,
+    stickyHeaderOffset: '0px',
+    sortable: true,
+    paginated: true,
+    pageSize: 20,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'DataTable with sticky headers. Headers remain visible when scrolling.',
+      },
+    },
+  },
+};
+
+// All advanced features
+export const AllAdvancedFeatures: Story = {
+  render: args => {
+    const [selectedRows, setSelectedRows] = useState<any[]>([]);
+
+    return (
+      <div>
+        <DataTable
+          {...args}
+          selectionMode="multiple"
+          onSelectionChange={(rows) => setSelectedRows(rows)}
+        />
+        {selectedRows.length > 0 && (
+          <div style={{ marginTop: '1rem', padding: '1rem', background: '#f5f5f5', borderRadius: '4px' }}>
+            <strong>Selected: {selectedRows.length} row(s)</strong>
+          </div>
+        )}
+      </div>
+    );
+  },
+  args: {
+    data: largeDataSet,
+    columns: columns.map(col => ({
+      ...col,
+      filterable: ['name', 'role'].includes(col.key),
+      resizable: true,
+    })),
+    sortable: true,
+    filterable: true,
+    columnFilters: true,
+    paginated: true,
+    pageSize: 10,
+    striped: true,
+    bordered: true,
+    resizable: true,
+    reorderable: true,
+    showColumnVisibility: true,
+    exportable: true,
+    exportFormats: ['csv', 'excel', 'json'],
+    stickyHeader: true,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'DataTable with all advanced features enabled: selection, filtering, resizing, reordering, visibility toggle, export, and sticky headers.',
+      },
+    },
+  },
+};