@shohojdhara/atomix 0.1.17 → 0.1.18

package/src/components/Card/ElevationCard.tsx

@@ -0,0 +1,47 @@
+import React, { RefObject } from 'react';
+import Card from './Card';
+import { useCard } from '../../lib/composables/useCard';
+import { ElevationCardProps } from '../../lib/types/components';
+
+export const ElevationCard: React.FC<ElevationCardProps> = ({
+  elevationClass = 'is-elevated',
+  className = '',
+  children,
+  onClick,
+  ...props
+}) => {
+  const { getCardProps } = useCard({
+    elevationEffect: true,
+    elevationClass,
+    clickable: Boolean(onClick),
+    onClick: onClick as (event: React.MouseEvent) => void,
+    focusEffect: true,
+  });
+
+  const cardProps = getCardProps();
+
+  return (
+    <div
+      className={`${className} ${cardProps.className}`}
+      ref={cardProps.ref}
+      tabIndex={cardProps.tabIndex}
+      role={cardProps.role}
+      onMouseEnter={cardProps.onMouseEnter}
+      onMouseLeave={cardProps.onMouseLeave}
+      onFocus={cardProps.onFocus}
+      onBlur={cardProps.onBlur}
+      onClick={cardProps.onClick as unknown as React.MouseEventHandler<HTMLDivElement>}
+      onKeyDown={cardProps.onKeyDown as unknown as React.KeyboardEventHandler<HTMLDivElement>}
+    >
+      <Card {...props} className="" onClick={undefined}>
+        {children}
+      </Card>
+    </div>
+  );
+};
+
+export type { ElevationCardProps };
+
+ElevationCard.displayName = 'ElevationCard';
+
+export default ElevationCard;

package/src/components/Card/index.ts

@@ -0,0 +1,15 @@
+/**
+ * Card component module
+ *
+ * This module exports the Card component and its variants.
+ * Types and hooks are defined in the lib directory.
+ */
+
+// Export the main Card component
+export { default as Card } from './Card';
+
+// Export the ElevationCard variant
+export { default as ElevationCard } from './ElevationCard';
+
+// Default export for the main Card component
+export { default } from './Card';

package/src/components/Card/scripts/bundle.ts

@@ -0,0 +1,30 @@
+/**
+ * Card Component Bundle
+ *
+ * This module bundles the Card component and its interactions for use in vanilla JS projects.
+ * It exposes the Card class and utility functions to the global Atomix namespace.
+ */
+
+import Card from './index';
+import {
+  applyHoverEffect,
+  applyFocusEffect,
+  makeCardClickable,
+  initializeAllCards,
+  applyElevationEffect,
+  applyFlipEffect,
+} from './cardInteractions';
+
+// Initialize global namespace if not exists
+window.Atomix = window.Atomix || {};
+
+// Add Card to global namespace
+window.Atomix.Card = Card;
+window.Atomix.applyCardHoverEffect = applyHoverEffect;
+window.Atomix.applyCardFocusEffect = applyFocusEffect;
+window.Atomix.makeCardClickable = makeCardClickable;
+window.Atomix.initializeAllCards = initializeAllCards;
+window.Atomix.applyCardElevationEffect = applyElevationEffect;
+window.Atomix.applyCardFlipEffect = applyFlipEffect;
+
+export default Card;

package/src/components/Card/scripts/cardInteractions.ts

@@ -0,0 +1,171 @@
+import Card from './index';
+import { CARD } from '../../../lib/constants/components';
+
+/**
+ * Apply hover effect to card
+ * @param card - Card element
+ */
+export function applyHoverEffect(card: HTMLElement): void {
+  const hoverClass = 'is-hovered';
+
+  card.addEventListener('mouseenter', () => {
+    card.classList.add(hoverClass);
+  });
+
+  card.addEventListener('mouseleave', () => {
+    card.classList.remove(hoverClass);
+  });
+}
+
+/**
+ * Apply focus effect to card
+ * @param card - Card element
+ */
+export function applyFocusEffect(card: HTMLElement): void {
+  const focusClass = 'is-focused';
+
+  // Make card focusable if it isn't already
+  if (!card.getAttribute('tabindex')) {
+    card.setAttribute('tabindex', '0');
+  }
+
+  card.addEventListener('focus', () => {
+    card.classList.add(focusClass);
+  });
+
+  card.addEventListener('blur', () => {
+    card.classList.remove(focusClass);
+  });
+}
+
+/**
+ * Make card clickable
+ * @param card - Card element
+ * @param onClick - Click handler
+ */
+export function makeCardClickable(card: HTMLElement, onClick: () => void): void {
+  // Make card focusable if it isn't already
+  if (!card.getAttribute('tabindex')) {
+    card.setAttribute('tabindex', '0');
+  }
+
+  // Add role for accessibility
+  card.setAttribute('role', 'button');
+
+  // Add click handler
+  card.addEventListener('click', onClick);
+
+  // Add keyboard handler for accessibility
+  card.addEventListener('keydown', event => {
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      onClick();
+    }
+  });
+
+  // Add visual feedback
+  applyHoverEffect(card);
+  applyFocusEffect(card);
+}
+
+/**
+ * Apply elevation effect on hover
+ * @param card - Card element
+ * @param elevationClass - CSS class for elevation effect
+ */
+export function applyElevationEffect(card: HTMLElement, elevationClass = 'is-elevated'): void {
+  card.addEventListener('mouseenter', () => {
+    card.classList.add(elevationClass);
+  });
+
+  card.addEventListener('mouseleave', () => {
+    card.classList.remove(elevationClass);
+  });
+}
+
+/**
+ * Apply flip effect to card
+ * @param card - Card element
+ * @param frontSelector - Selector for front side of card
+ * @param backSelector - Selector for back side of card
+ * @param trigger - Trigger type: 'click' or 'hover'
+ */
+export function applyFlipEffect(
+  card: HTMLElement,
+  frontSelector = '.c-card--front',
+  backSelector = '.c-card--back',
+  trigger = 'click'
+): void {
+  const flipClass = 'is-flipped';
+  const frontElement = card.querySelector(frontSelector);
+  const backElement = card.querySelector(backSelector);
+
+  if (!frontElement || !backElement) {
+    console.error('Card flip effect requires both front and back elements');
+    return;
+  }
+
+  // Add necessary styling for flip effect
+  card.style.perspective = '1000px';
+  card.style.transformStyle = 'preserve-3d';
+
+  [frontElement, backElement].forEach(el => {
+    if (el) {
+      (el as HTMLElement).style.backfaceVisibility = 'hidden';
+      (el as HTMLElement).style.position = 'absolute';
+      (el as HTMLElement).style.top = '0';
+      (el as HTMLElement).style.left = '0';
+      (el as HTMLElement).style.width = '100%';
+      (el as HTMLElement).style.height = '100%';
+      (el as HTMLElement).style.transition = 'transform 0.6s';
+    }
+  });
+
+  (backElement as HTMLElement).style.transform = 'rotateY(180deg)';
+
+  if (trigger === 'click') {
+    card.addEventListener('click', () => {
+      card.classList.toggle(flipClass);
+      if (card.classList.contains(flipClass)) {
+        (frontElement as HTMLElement).style.transform = 'rotateY(180deg)';
+        (backElement as HTMLElement).style.transform = 'rotateY(0)';
+      } else {
+        (frontElement as HTMLElement).style.transform = 'rotateY(0)';
+        (backElement as HTMLElement).style.transform = 'rotateY(180deg)';
+      }
+    });
+  } else if (trigger === 'hover') {
+    card.addEventListener('mouseenter', () => {
+      card.classList.add(flipClass);
+      (frontElement as HTMLElement).style.transform = 'rotateY(180deg)';
+      (backElement as HTMLElement).style.transform = 'rotateY(0)';
+    });
+
+    card.addEventListener('mouseleave', () => {
+      card.classList.remove(flipClass);
+      (frontElement as HTMLElement).style.transform = 'rotateY(0)';
+      (backElement as HTMLElement).style.transform = 'rotateY(180deg)';
+    });
+  }
+}
+
+/**
+ * Initialize all cards on the page
+ * @param selector - CSS selector for cards
+ * @returns Array of card instances
+ */
+export function initializeAllCards(selector = '[data-component="card"]'): Card[] {
+  const cardInstances: Card[] = [];
+  const cardElements = document.querySelectorAll<HTMLElement>(selector);
+
+  cardElements.forEach(element => {
+    try {
+      const instance = new Card(element);
+      cardInstances.push(instance);
+    } catch (error) {
+      console.error('Error initializing card:', error);
+    }
+  });
+
+  return cardInstances;
+}

package/src/components/Card/scripts/demo.html

@@ -0,0 +1,322 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Card Component Demo</title>
+  <link rel="stylesheet" href="../../../styles/atomix.css">
+  <style>
+    body {
+      font-family: system-ui, sans-serif;
+      max-width: 1200px;
+      margin: 0 auto;
+      padding: 20px;
+    }
+    
+    .demo-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+      gap: 20px;
+      margin-top: 20px;
+    }
+
+    h1 {
+      margin-bottom: 30px;
+    }
+
+    h2 {
+      margin-top: 40px;
+      margin-bottom: 20px;
+    }
+
+    .demo-btn {
+      display: inline-block;
+      background-color: #0066cc;
+      color: white;
+      padding: 8px 16px;
+      border-radius: 4px;
+      text-decoration: none;
+      margin-right: 8px;
+      margin-bottom: 8px;
+      cursor: pointer;
+      border: none;
+      font-size: 14px;
+    }
+
+    .demo-btn.secondary {
+      background-color: #555555;
+    }
+  </style>
+</head>
+<body>
+  <h1>Card Component Demo</h1>
+
+  <h2>Basic Cards</h2>
+  <div class="demo-grid">
+    <!-- Simple Card with Title and Text -->
+    <div id="card1"></div>
+
+    <!-- Card with Image -->
+    <div id="card2"></div>
+
+    <!-- Card with Icon -->
+    <div id="card3"></div>
+
+    <!-- Card with Actions -->
+    <div id="card4"></div>
+  </div>
+
+  <h2>Card Variants</h2>
+  <div class="demo-grid">
+    <!-- Row Card -->
+    <div id="card-row"></div>
+
+    <!-- Flat Card -->
+    <div id="card-flat"></div>
+
+    <!-- Clickable Card -->
+    <div id="card-clickable"></div>
+  </div>
+
+  <h2>Card with Children Content</h2>
+  <div class="demo-grid">
+    <!-- Card with HTML Children -->
+    <div id="card-with-children"></div>
+    
+    <!-- Card with HTML Element Children -->
+    <div id="card-with-element-children"></div>
+  </div>
+
+  <h2>Interactive Cards</h2>
+  <div class="demo-grid">
+    <!-- Card with Elevation Effect -->
+    <div id="card-elevation"></div>
+    
+    <!-- Flip Card -->
+    <div id="card-flip" style="height: 300px;"></div>
+  </div>
+
+  <h2>Cards from Data Attributes</h2>
+  <div class="demo-grid">
+    <div data-component="card" data-title="Card from Data Attributes" data-text="This card is created using data attributes instead of JavaScript."></div>
+
+    <div data-component="card" data-title="Card with Image" data-text="This card includes an image loaded from data attributes." data-image="https://placehold.co/600x400" data-image-alt="Placeholder"></div>
+
+    <div data-component="card" data-title="Row Style Card" data-text="This card uses the row layout applied via data attributes." data-row="true" data-image="https://placehold.co/300x300" data-image-alt="Placeholder"></div>
+  </div>
+
+  <script type="module">
+    import Card from './index.js';
+    import { applyElevationEffect, applyFlipEffect } from './cardInteractions.js';
+    
+    // Simple Card
+    new Card('#card1', {
+      title: 'Simple Card',
+      text: 'This is a basic card with just a title and some text content.'
+    });
+
+    // Card with Image
+    new Card('#card2', {
+      title: 'Card with Image',
+      text: 'This card includes an image above the content.',
+      image: 'https://placehold.co/600x400',
+      imageAlt: 'Placeholder image'
+    });
+
+    // Card with Icon
+    new Card('#card3', {
+      title: 'Card with Icon',
+      text: 'This card includes an icon to represent the content.',
+      icon: '🚀'
+    });
+
+    // Card with Actions
+    const card4 = document.getElementById('card4');
+    const button1 = document.createElement('button');
+    button1.className = 'demo-btn';
+    button1.textContent = 'Learn More';
+    
+    const button2 = document.createElement('button');
+    button2.className = 'demo-btn secondary';
+    button2.textContent = 'Cancel';
+    
+    new Card(card4, {
+      title: 'Card with Actions',
+      text: 'This card includes buttons at the bottom.',
+      actions: [button1, button2]
+    });
+
+    // Row Card
+    new Card('#card-row', {
+      title: 'Row Layout Card',
+      text: 'This card uses a horizontal layout with the image on the left.',
+      image: 'https://placehold.co/300x300',
+      imageAlt: 'Placeholder',
+      row: true
+    });
+
+    // Flat Card
+    new Card('#card-flat', {
+      title: 'Flat Style Card',
+      text: 'This card uses the flat style with the image extending to the edges.',
+      image: 'https://placehold.co/600x400',
+      imageAlt: 'Placeholder',
+      flat: true
+    });
+
+    // Clickable Card
+    new Card('#card-clickable', {
+      title: 'Clickable Card',
+      text: 'Click me! This card has an onClick handler attached.',
+      onClick: () => {
+        alert('Card clicked!');
+      }
+    });
+
+    // Card with HTML string children
+    new Card('#card-with-children', {
+      title: 'Card with Children Content',
+      children: `
+        <div style="padding: 10px; background-color: #f5f5f5; border-radius: 4px; margin-bottom: 15px;">
+          <h4 style="margin-top: 0;">Custom HTML Content</h4>
+          <p>This card demonstrates the ability to add custom HTML content as children.</p>
+          <ul>
+            <li>List item 1</li>
+            <li>List item 2</li>
+            <li>List item 3</li>
+          </ul>
+        </div>
+      `
+    });
+
+    // Card with HTML Element children
+    const cardWithElementChildren = document.getElementById('card-with-element-children');
+    const customContent = document.createElement('div');
+    customContent.style.padding = '15px';
+    customContent.style.backgroundColor = '#e6f7ff';
+    customContent.style.borderRadius = '4px';
+    
+    const heading = document.createElement('h4');
+    heading.textContent = 'Element Children';
+    heading.style.marginTop = '0';
+    
+    const paragraph = document.createElement('p');
+    paragraph.textContent = 'This card demonstrates adding DOM elements as children.';
+    
+    const progressContainer = document.createElement('div');
+    progressContainer.style.marginTop = '10px';
+    
+    const progressLabel = document.createElement('div');
+    progressLabel.textContent = 'Progress: 75%';
+    progressLabel.style.marginBottom = '5px';
+    
+    const progressBar = document.createElement('div');
+    progressBar.style.height = '8px';
+    progressBar.style.width = '75%';
+    progressBar.style.backgroundColor = '#0066cc';
+    progressBar.style.borderRadius = '4px';
+    
+    progressContainer.appendChild(progressLabel);
+    progressContainer.appendChild(progressBar);
+    
+    customContent.appendChild(heading);
+    customContent.appendChild(paragraph);
+    customContent.appendChild(progressContainer);
+    
+    new Card(cardWithElementChildren, {
+      title: 'Card with Element Children',
+      children: customContent
+    });
+
+    // Card with elevation effect
+    const cardElevation = document.getElementById('card-elevation');
+    const elevationCard = new Card(cardElevation, {
+      title: 'Elevation Effect',
+      text: 'Hover over this card to see an elevation effect.',
+      image: 'https://placehold.co/600x400',
+      imageAlt: 'Placeholder'
+    });
+    
+    // Apply elevation effect
+    applyElevationEffect(cardElevation);
+    
+    // Add some CSS for the elevation effect
+    const style = document.createElement('style');
+    style.textContent = `
+      .is-elevated {
+        transform: translateY(-8px);
+        box-shadow: 0 12px 24px rgba(0,0,0,0.15);
+        transition: all 0.3s ease;
+      }
+      
+      .card {
+        transition: all 0.3s ease;
+        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
+      }
+      
+      .card-front, .card-back {
+        border-radius: 8px;
+        background-color: #fff;
+        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
+      }
+      
+      .is-flipped {
+        transform: rotateY(180deg);
+      }
+    `;
+    document.head.appendChild(style);
+    
+    // Flip Card
+    const cardFlip = document.getElementById('card-flip');
+    
+    // Create front side
+    const frontSide = document.createElement('div');
+    frontSide.className = 'card-front';
+    frontSide.style.padding = '20px';
+    frontSide.style.display = 'flex';
+    frontSide.style.flexDirection = 'column';
+    frontSide.style.alignItems = 'center';
+    frontSide.style.justifyContent = 'center';
+    
+    const frontTitle = document.createElement('h3');
+    frontTitle.textContent = 'Flip Card - Front Side';
+    frontTitle.style.marginBottom = '15px';
+    
+    const frontText = document.createElement('p');
+    frontText.textContent = 'Click this card to see the back side.';
+    
+    frontSide.appendChild(frontTitle);
+    frontSide.appendChild(frontText);
+    
+    // Create back side
+    const backSide = document.createElement('div');
+    backSide.className = 'card-back';
+    backSide.style.padding = '20px';
+    backSide.style.backgroundColor = '#f0f8ff';
+    backSide.style.display = 'flex';
+    backSide.style.flexDirection = 'column';
+    backSide.style.alignItems = 'center';
+    backSide.style.justifyContent = 'center';
+    
+    const backTitle = document.createElement('h3');
+    backTitle.textContent = 'Flip Card - Back Side';
+    backTitle.style.marginBottom = '15px';
+    
+    const backText = document.createElement('p');
+    backText.textContent = 'Click again to flip back to the front.';
+    
+    backSide.appendChild(backTitle);
+    backSide.appendChild(backText);
+    
+    // Add both sides to the card
+    cardFlip.appendChild(frontSide);
+    cardFlip.appendChild(backSide);
+    
+    // Apply flip effect
+    applyFlipEffect(cardFlip);
+
+    // Initialize all cards with data attributes
+    Card.initializeAll();
+  </script>
+</body>
+</html>