@shohojdhara/atomix 0.1.16 → 0.1.17

package/src/components/Card/ElevationCard.tsx

@@ -1,51 +0,0 @@
-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

@@ -1,15 +0,0 @@
-/**
- * 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

@@ -1,30 +0,0 @@
-/**
- * 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

@@ -1,171 +0,0 @@
-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

@@ -1,322 +0,0 @@
-<!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>