@shohojdhara/atomix 0.2.7 → 0.2.8

package/src/components/Card/Card.stories.tsx

@@ -19,9 +19,29 @@ const meta: Meta<typeof Card> = {
     image: { control: 'text' },
     imageAlt: { control: 'text' },
     footer: { control: 'text' },
+    size: {
+      control: 'select',
+      options: ['sm', 'md', 'lg'],
+    },
+    variant: {
+      control: 'select',
+      options: ['primary', 'secondary', 'success', 'error', 'warning', 'info', 'light', 'dark'],
+    },
+    appearance: {
+      control: 'select',
+      options: ['filled', 'outlined', 'ghost', 'elevated'],
+    },
+    elevation: {
+      control: 'select',
+      options: ['none', 'sm', 'md', 'lg', 'xl'],
+    },
     row: { control: 'boolean' },
     flat: { control: 'boolean' },
     active: { control: 'boolean' },
+    disabled: { control: 'boolean' },
+    loading: { control: 'boolean' },
+    selected: { control: 'boolean' },
+    interactive: { control: 'boolean' },
     className: { control: 'text' },
   },
 };
@@ -806,3 +826,185 @@ export const GlassCardLayouts: Story = {
     </div>
   ),
 };
+
+// Size Variants
+export const SizeVariants: Story = {
+  render: () => (
+    <div style={{ display: 'flex', gap: '1rem', flexWrap: 'wrap' }}>
+      <Card
+        size="sm"
+        title="Small Card"
+        text="This is a small card with compact spacing."
+        actions={<button className="c-btn c-btn--primary c-btn--sm">Action</button>}
+      />
+      <Card
+        size="md"
+        title="Medium Card"
+        text="This is a medium card with default spacing."
+        actions={<button className="c-btn c-btn--primary c-btn--sm">Action</button>}
+      />
+      <Card
+        size="lg"
+        title="Large Card"
+        text="This is a large card with spacious padding."
+        actions={<button className="c-btn c-btn--primary c-btn--sm">Action</button>}
+      />
+    </div>
+  ),
+};
+
+// Color Variants
+export const ColorVariants: Story = {
+  render: () => (
+    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(250px, 1fr))', gap: '1rem' }}>
+      <Card variant="primary" title="Primary Card" text="Primary variant card." />
+      <Card variant="secondary" title="Secondary Card" text="Secondary variant card." />
+      <Card variant="success" title="Success Card" text="Success variant card." />
+      <Card variant="error" title="Error Card" text="Error variant card." />
+      <Card variant="warning" title="Warning Card" text="Warning variant card." />
+      <Card variant="info" title="Info Card" text="Info variant card." />
+      <Card variant="light" title="Light Card" text="Light variant card." />
+      <Card variant="dark" title="Dark Card" text="Dark variant card." />
+    </div>
+  ),
+};
+
+// Appearance Variants
+export const AppearanceVariants: Story = {
+  render: () => (
+    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(250px, 1fr))', gap: '1rem' }}>
+      <Card appearance="filled" variant="primary" title="Filled Card" text="Filled appearance with solid background." />
+      <Card appearance="outlined" variant="primary" title="Outlined Card" text="Outlined appearance with border only." />
+      <Card appearance="ghost" variant="primary" title="Ghost Card" text="Ghost appearance with minimal styling." />
+      <Card appearance="elevated" variant="primary" title="Elevated Card" text="Elevated appearance with shadow." />
+    </div>
+  ),
+};
+
+// Elevation Levels
+export const ElevationLevels: Story = {
+  render: () => (
+    <div style={{ display: 'flex', gap: '1rem', flexWrap: 'wrap' }}>
+      <Card elevation="none" title="No Elevation" text="Card with no shadow." />
+      <Card elevation="sm" title="Small Elevation" text="Card with small shadow." />
+      <Card elevation="md" title="Medium Elevation" text="Card with medium shadow." />
+      <Card elevation="lg" title="Large Elevation" text="Card with large shadow." />
+      <Card elevation="xl" title="Extra Large Elevation" text="Card with extra large shadow." />
+    </div>
+  ),
+};
+
+// Disabled State
+export const Disabled: Story = {
+  args: {
+    title: 'Disabled Card',
+    text: 'This card is disabled and cannot be interacted with.',
+    disabled: true,
+    actions: (
+      <React.Fragment>
+        <button className="c-btn c-btn--primary c-btn--sm">Action</button>
+      </React.Fragment>
+    ),
+  },
+};
+
+// Loading State
+export const Loading: Story = {
+  args: {
+    title: 'Loading Card',
+    text: 'This card is in a loading state.',
+    loading: true,
+    actions: (
+      <React.Fragment>
+        <button className="c-btn c-btn--primary c-btn--sm">Action</button>
+      </React.Fragment>
+    ),
+  },
+};
+
+// Selected State
+export const Selected: Story = {
+  args: {
+    title: 'Selected Card',
+    text: 'This card is in a selected state.',
+    selected: true,
+    variant: 'primary',
+  },
+};
+
+// Interactive Card
+export const Interactive: Story = {
+  args: {
+    title: 'Interactive Card',
+    text: 'This card is interactive and responds to hover and click.',
+    interactive: true,
+    onClick: () => alert('Interactive card clicked!'),
+    variant: 'primary',
+    elevation: 'md',
+  },
+};
+
+// Link Card
+export const LinkCard: Story = {
+  args: {
+    title: 'Link Card',
+    text: 'This card acts as a link. Click to navigate.',
+    href: 'https://example.com',
+    target: '_blank',
+    variant: 'primary',
+    interactive: true,
+  },
+};
+
+// Comprehensive Example
+export const Comprehensive: Story = {
+  render: () => (
+    <Container>
+      <Grid>
+        <GridCol sm={6} lg={4}>
+          <Card
+            size="lg"
+            variant="primary"
+            appearance="elevated"
+            elevation="lg"
+            title="Premium Feature"
+            text="This is a comprehensive card example with all new features enabled."
+            image="https://placehold.co/400x200"
+            imageAlt="Feature image"
+            interactive
+            onClick={() => alert('Card clicked!')}
+            actions={
+              <React.Fragment>
+                <button className="c-btn c-btn--primary c-btn--sm">Get Started</button>
+                <button className="c-btn c-btn--outline-primary c-btn--sm">Learn More</button>
+              </React.Fragment>
+            }
+          />
+        </GridCol>
+        <GridCol sm={6} lg={4}>
+          <Card
+            size="md"
+            variant="success"
+            appearance="outlined"
+            elevation="md"
+            title="Success Card"
+            text="This card uses the success variant with outlined appearance."
+            selected
+            actions={<button className="c-btn c-btn--success c-btn--sm">Action</button>}
+          />
+        </GridCol>
+        <GridCol sm={6} lg={4}>
+          <Card
+            size="sm"
+            variant="error"
+            appearance="ghost"
+            title="Error Card"
+            text="This is a small error card with ghost appearance."
+            disabled
+            actions={<button className="c-btn c-btn--error c-btn--sm">Action</button>}
+          />
+        </GridCol>
+      </Grid>
+    </Container>
+  ),
+};

package/src/components/Card/Card.tsx

@@ -1,96 +1,267 @@
-import React, { forwardRef, Ref } from 'react';
+import React, { forwardRef, useCallback, useMemo } from 'react';
 import { CARD } from '../../lib/constants/components';
 import { CardProps } from '../../lib/types/components';
 import { AtomixGlass } from '../AtomixGlass/AtomixGlass';
 
-export const Card = forwardRef<HTMLDivElement, CardProps>(
-  (
-    {
-      header,
-      image,
-      imageAlt = '',
-      title,
-      text,
-      actions,
-      icon,
-      footer,
-      row = false,
-      flat = false,
-      active = false,
-      className = '',
-      children,
-      onClick,
-      style,
-      glass,
-      ...rest
-    },
-    ref
-  ) => {
-    const cardClasses = [
-      CARD.CLASSES.BASE,
-      row ? CARD.CLASSES.ROW : '',
-      flat ? CARD.CLASSES.FLAT : '',
-      active ? CARD.CLASSES.ACTIVE : '',
-      className,
-    ]
-      .filter(Boolean)
-      .join(' ');
-
-    const cardContent = (
-      <>
-        {(image || icon || header) && (
-          <div className={CARD.SELECTORS.HEADER.substring(1)}>
-            {header}
-            {image && (
-              <img src={image} alt={imageAlt} className={CARD.SELECTORS.IMAGE.substring(1)} />
-            )}
+export const Card = React.memo(
+  forwardRef<HTMLDivElement | HTMLAnchorElement, CardProps>(
+      (
+      {
+        // Variants
+        size = 'md',
+        variant = 'primary',
+        appearance = 'filled',
+        elevation = 'none',
+        // Layout
+        row = false,
+        flat = false,
+        // States
+        active = false,
+        disabled = false,
+        loading = false,
+        selected = false,
+        interactive = false,
+        // Content
+        header,
+        image,
+        imageAlt = '',
+        title,
+        text,
+        actions,
+        icon,
+        footer,
+        children,
+        // Interaction
+        onClick,
+        onHover,
+        onFocus,
+        href,
+        target,
+        // Glass
+        glass,
+        // Accessibility
+        role,
+        ariaLabel,
+        ariaDescribedBy,
+        tabIndex,
+        // Styling
+        className = '',
+        style,
+        ...rest
+      },
+      ref
+    ) => {
+      // Determine if card is clickable/interactive
+      const isClickable = Boolean(onClick || href || interactive);
+      const isDisabled = disabled || loading;
+
+      // Build CSS classes using BEM methodology
+      const cardClasses = useMemo(
+        () =>
+          [
+            CARD.CLASSES.BASE,
+            // Size modifiers
+            size === 'sm' ? CARD.CLASSES.SM : '',
+            size === 'md' ? CARD.CLASSES.MD : '',
+            size === 'lg' ? CARD.CLASSES.LG : '',
+            // Variant modifiers (will be handled in SCSS with @each)
+            variant ? `c-card--${variant}` : '',
+            // Appearance modifiers
+            appearance === 'filled' ? CARD.CLASSES.FILLED : '',
+            appearance === 'outlined' ? CARD.CLASSES.OUTLINED : '',
+            appearance === 'ghost' ? CARD.CLASSES.GHOST : '',
+            appearance === 'elevated' ? CARD.CLASSES.ELEVATED : '',
+            // Elevation modifiers
+            elevation === 'none' ? CARD.CLASSES.ELEVATION_NONE : '',
+            elevation === 'sm' ? CARD.CLASSES.ELEVATION_SM : '',
+            elevation === 'md' ? CARD.CLASSES.ELEVATION_MD : '',
+            elevation === 'lg' ? CARD.CLASSES.ELEVATION_LG : '',
+            elevation === 'xl' ? CARD.CLASSES.ELEVATION_XL : '',
+            // Layout modifiers
+            row ? CARD.CLASSES.ROW : '',
+            flat ? CARD.CLASSES.FLAT : '',
+            // State modifiers
+            active ? CARD.CLASSES.ACTIVE : '',
+            disabled ? CARD.CLASSES.DISABLED : '',
+            loading ? CARD.CLASSES.LOADING : '',
+            selected ? CARD.CLASSES.SELECTED : '',
+            interactive || isClickable ? CARD.CLASSES.INTERACTIVE : '',
+            glass ? CARD.CLASSES.GLASS : '',
+            className,
+          ]
+            .filter(Boolean)
+            .join(' '),
+        [size, variant, appearance, elevation, row, flat, active, disabled, loading, selected, interactive, isClickable, glass, className]
+      );
+
+      // Determine ARIA role
+      const cardRole = useMemo(() => {
+        if (role) return role;
+        if (href) return 'link';
+        if (isClickable) return 'button';
+        return 'article';
+      }, [role, href, isClickable]);
+
+      // Handle click events
+      const handleClick = useCallback(
+        (event: React.MouseEvent<HTMLDivElement | HTMLAnchorElement>) => {
+          if (isDisabled) {
+            event.preventDefault();
+            return;
+          }
+          onClick?.(event);
+        },
+        [isDisabled, onClick]
+      );
+
+      // Handle keyboard events for accessibility
+      const handleKeyDown = useCallback(
+        (event: React.KeyboardEvent<HTMLDivElement | HTMLAnchorElement>) => {
+          if (isDisabled) {
+            event.preventDefault();
+            return;
+          }
+
+          // Enter or Space activates clickable cards
+          if (isClickable && (event.key === 'Enter' || event.key === ' ')) {
+            event.preventDefault();
+            if (onClick) {
+              onClick(event as unknown as React.MouseEvent<HTMLDivElement | HTMLAnchorElement>);
+            }
+            // If href is provided, the anchor will handle navigation
+          }
+        },
+        [isDisabled, isClickable, onClick]
+      );
+
+      // Handle hover events
+      const handleMouseEnter = useCallback(
+        (event: React.MouseEvent<HTMLDivElement | HTMLAnchorElement>) => {
+          if (!isDisabled) {
+            onHover?.(event);
+          }
+        },
+        [isDisabled, onHover]
+      );
+
+      // Handle focus events
+      const handleFocusEvent = useCallback(
+        (event: React.FocusEvent<HTMLDivElement | HTMLAnchorElement>) => {
+          if (!isDisabled) {
+            onFocus?.(event);
+          }
+        },
+        [isDisabled, onFocus]
+      );
+
+      // Determine tab index
+      const effectiveTabIndex = useMemo(() => {
+        if (tabIndex !== undefined) return tabIndex;
+        if (isDisabled) return -1;
+        if (isClickable) return 0;
+        return undefined;
+      }, [tabIndex, isDisabled, isClickable]);
 
-            {icon && <div className={CARD.SELECTORS.ICON.substring(1)}>{icon}</div>}
-          </div>
-        )}
+      // Card content structure
+      const cardContent = useMemo(
+        () => (
+          <>
+            {loading && (
+              <div className="c-card__loading" aria-label="Loading">
+                <div className="c-card__spinner" />
+              </div>
+            )}
 
-        <div className={CARD.SELECTORS.BODY.substring(1)}>
-          {title && <h3 className={CARD.SELECTORS.TITLE.substring(1)}>{title}</h3>}
+            {(image || icon || header) && (
+              <div className={CARD.SELECTORS.HEADER.substring(1)}>
+                {header}
+                {image && (
+                  <img
+                    src={image}
+                    alt={imageAlt}
+                    className={CARD.SELECTORS.IMAGE.substring(1)}
+                    loading="lazy"
+                  />
+                )}
+                {icon && <div className={CARD.SELECTORS.ICON.substring(1)}>{icon}</div>}
+              </div>
+            )}
 
-          {text && <p className={CARD.SELECTORS.TEXT.substring(1)}>{text}</p>}
+            <div className={CARD.SELECTORS.BODY.substring(1)}>
+              {title && <h3 className={CARD.SELECTORS.TITLE.substring(1)}>{title}</h3>}
+              {text && <p className={CARD.SELECTORS.TEXT.substring(1)}>{text}</p>}
+              {children}
+            </div>
 
-          {children}
-        </div>
+            {actions && <div className={CARD.SELECTORS.ACTIONS.substring(1)}>{actions}</div>}
 
-        {actions && <div className={CARD.SELECTORS.ACTIONS.substring(1)}>{actions}</div>}
+            {footer && <div className={CARD.SELECTORS.FOOTER.substring(1)}>{footer}</div>}
+          </>
+        ),
+        [loading, image, imageAlt, icon, header, title, text, children, actions, footer]
+      );
 
-        {footer && <div className={CARD.SELECTORS.FOOTER.substring(1)}>{footer}</div>}
-      </>
-    );
+      // Common props for both div and anchor
+      const commonProps = {
+        ref: ref as React.Ref<HTMLDivElement | HTMLAnchorElement>,
+        className: cardClasses,
+        style,
+        role: cardRole,
+        'aria-label': ariaLabel,
+        'aria-describedby': ariaDescribedBy,
+        'aria-disabled': isDisabled ? true : undefined,
+        tabIndex: effectiveTabIndex,
+        onClick: isClickable ? handleClick : undefined,
+        onKeyDown: isClickable ? handleKeyDown : undefined,
+        onMouseEnter: onHover ? handleMouseEnter : undefined,
+        onFocus: onFocus ? handleFocusEvent : undefined,
+        ...rest,
+      };
 
-    if (glass) {
-      const glassProps = glass === true ? {} : glass;
-      return (
-        <AtomixGlass {...{ ...glassProps, elasticity: 0 }}>
-          {' '}
-          <div
-            ref={ref}
-            className={cardClasses + ' c-card--glass'}
-            onClick={onClick}
-            {...rest}
-            style={{ ...style }}
+      // Render as anchor if href is provided
+      if (href && !isDisabled) {
+        const anchorElement = (
+          <a
+            {...commonProps}
+            href={href}
+            target={target}
+            rel={target === '_blank' ? 'noopener noreferrer' : undefined}
           >
             {cardContent}
-          </div>
-        </AtomixGlass>
-      );
-    }
+          </a>
+        );
 
-    return (
-      <div ref={ref} className={cardClasses} onClick={onClick} {...rest} style={{ ...style }}>
-        {cardContent}
-      </div>
-    );
-  }
-);
+        if (glass) {
+          const glassProps = glass === true ? {} : glass;
+          return (
+            <AtomixGlass {...{ ...glassProps, elasticity: 0 }}>
+              {anchorElement}
+            </AtomixGlass>
+          );
+        }
 
-export type { CardProps };
+        return anchorElement;
+      }
+
+      // Render as div
+      const divElement = <div {...commonProps}>{cardContent}</div>;
+
+      if (glass) {
+        const glassProps = glass === true ? {} : glass;
+        return (
+          <AtomixGlass {...{ ...glassProps, elasticity: 0 }}>
+            {divElement}
+          </AtomixGlass>
+        );
+      }
+
+      return divElement;
+    }
+  )
+);
 
 Card.displayName = 'Card';
 
+export type { CardProps };
+
 export default Card;