@shohojdhara/atomix 0.1.17 → 0.1.18

package/src/components/Callout/scripts/CalloutInteractions.ts

@@ -0,0 +1,350 @@
+/**
+ * Class for handling callout interactions
+ */
+export class CalloutInteractions {
+  private static instances: Map<string, CalloutInteractions> = new Map();
+  private element: HTMLElement;
+  private id: string;
+  private autoHideTimeout: number | null = null;
+  private config: {
+    autoHide: boolean;
+    autoHideDelay: number;
+    onClose?: () => void;
+    position?: ToastPosition;
+  };
+
+  /**
+   * Available toast positions
+   */
+  public static ToastPositions = {
+    TOP_RIGHT: 'top-right',
+    TOP_LEFT: 'top-left',
+    TOP_CENTER: 'top-center',
+    BOTTOM_RIGHT: 'bottom-right',
+    BOTTOM_LEFT: 'bottom-left',
+    BOTTOM_CENTER: 'bottom-center',
+  } as const;
+
+  /**
+   * Create a new CalloutInteractions instance
+   * @param element - The callout element
+   * @param options - Configuration options
+   */
+  constructor(
+    element: HTMLElement,
+    options: {
+      autoHide?: boolean;
+      autoHideDelay?: number;
+      onClose?: () => void;
+      position?: ToastPosition;
+    } = {}
+  ) {
+    this.element = element;
+    this.id = element.id || `callout-${Math.random().toString(36).substring(2, 9)}`;
+
+    if (!element.id) {
+      element.id = this.id;
+    }
+
+    this.config = {
+      autoHide: options.autoHide ?? false,
+      autoHideDelay: options.autoHideDelay ?? 5000, // Default 5 seconds
+      onClose: options.onClose,
+      position: options.position ?? CalloutInteractions.ToastPositions.TOP_RIGHT,
+    };
+
+    this._initialize();
+    CalloutInteractions.instances.set(this.id, this);
+  }
+
+  /**
+   * Initialize the callout interactions
+   */
+  private _initialize(): void {
+    // Add hover pause functionality for toast callouts
+    if (this.element.classList.contains('c-callout--toast')) {
+      this.element.addEventListener('mouseenter', this._pauseAutoHide.bind(this));
+      this.element.addEventListener('mouseleave', this._resumeAutoHide.bind(this));
+
+      // Add keyboard support for toast callouts
+      this.element.addEventListener('keydown', this._handleKeyDown.bind(this));
+
+      // Make sure toast is focusable
+      if (this.element.tabIndex < 0) {
+        this.element.tabIndex = 0;
+      }
+    }
+
+    // Set up auto-hide if configured
+    if (this.config.autoHide) {
+      this._startAutoHideTimer();
+    }
+  }
+
+  /**
+   * Handle keyboard events
+   */
+  private _handleKeyDown(event: KeyboardEvent): void {
+    // Close on Escape key
+    if (event.key === 'Escape') {
+      this.close();
+      event.preventDefault();
+    }
+  }
+
+  /**
+   * Start the auto-hide timer
+   */
+  private _startAutoHideTimer(): void {
+    if (this.autoHideTimeout) {
+      clearTimeout(this.autoHideTimeout);
+    }
+
+    this.autoHideTimeout = window.setTimeout(() => {
+      this.close();
+    }, this.config.autoHideDelay);
+  }
+
+  /**
+   * Pause the auto-hide timer (on hover)
+   */
+  private _pauseAutoHide(): void {
+    if (this.autoHideTimeout) {
+      clearTimeout(this.autoHideTimeout);
+      this.autoHideTimeout = null;
+    }
+  }
+
+  /**
+   * Resume the auto-hide timer (on mouse leave)
+   */
+  private _resumeAutoHide(): void {
+    if (this.config.autoHide) {
+      this._startAutoHideTimer();
+    }
+  }
+
+  /**
+   * Close the callout
+   */
+  public close(): void {
+    this.element.classList.add('is-hide');
+
+    // Remove from DOM after animation completes
+    setTimeout(() => {
+      if (this.element.parentNode) {
+        this.element.parentNode.removeChild(this.element);
+        CalloutInteractions.instances.delete(this.id);
+
+        if (this.config.onClose) {
+          this.config.onClose();
+        }
+
+        // Dispatch custom event
+        document.dispatchEvent(
+          new CustomEvent('atomix:callout:closed', {
+            detail: { id: this.id },
+          })
+        );
+      }
+    }, 300); // Match the transition duration in CSS
+  }
+
+  /**
+   * Clean up event listeners
+   */
+  public destroy(): void {
+    if (this.autoHideTimeout) {
+      clearTimeout(this.autoHideTimeout);
+    }
+
+    this.element.removeEventListener('mouseenter', this._pauseAutoHide.bind(this));
+    this.element.removeEventListener('mouseleave', this._resumeAutoHide.bind(this));
+    this.element.removeEventListener('keydown', this._handleKeyDown.bind(this));
+
+    CalloutInteractions.instances.delete(this.id);
+  }
+
+  /**
+   * Get the toast container for a specific position
+   */
+  private static _getToastContainer(
+    position: ToastPosition = CalloutInteractions.ToastPositions.TOP_RIGHT
+  ): HTMLElement {
+    const containerId = `atomix-toast-container-${position}`;
+    let container = document.getElementById(containerId);
+
+    if (!container) {
+      container = document.createElement('div');
+      container.id = containerId;
+      container.className = `c-callout-container c-callout-container--${position}`;
+      container.setAttribute('aria-live', 'polite');
+      container.setAttribute('role', 'status');
+      document.body.appendChild(container);
+
+      // Apply positioning styles
+      container.style.position = 'fixed';
+      container.style.zIndex = '9999';
+      container.style.display = 'flex';
+      container.style.flexDirection = 'column';
+      container.style.gap = '8px';
+
+      // Position the container based on position value
+      switch (position) {
+        case CalloutInteractions.ToastPositions.TOP_RIGHT:
+          container.style.top = '20px';
+          container.style.right = '20px';
+          container.style.alignItems = 'flex-end';
+          break;
+        case CalloutInteractions.ToastPositions.TOP_LEFT:
+          container.style.top = '20px';
+          container.style.left = '20px';
+          container.style.alignItems = 'flex-start';
+          break;
+        case CalloutInteractions.ToastPositions.TOP_CENTER:
+          container.style.top = '20px';
+          container.style.left = '50%';
+          container.style.transform = 'translateX(-50%)';
+          container.style.alignItems = 'center';
+          break;
+        case CalloutInteractions.ToastPositions.BOTTOM_RIGHT:
+          container.style.bottom = '20px';
+          container.style.right = '20px';
+          container.style.alignItems = 'flex-end';
+          break;
+        case CalloutInteractions.ToastPositions.BOTTOM_LEFT:
+          container.style.bottom = '20px';
+          container.style.left = '20px';
+          container.style.alignItems = 'flex-start';
+          break;
+        case CalloutInteractions.ToastPositions.BOTTOM_CENTER:
+          container.style.bottom = '20px';
+          container.style.left = '50%';
+          container.style.transform = 'translateX(-50%)';
+          container.style.alignItems = 'center';
+          break;
+      }
+    }
+
+    return container;
+  }
+
+  /**
+   * Create a toast notification
+   * @param options - Toast options
+   */
+  public static createToast(options: {
+    title: string;
+    content?: string;
+    variant?: string;
+    icon?: string;
+    autoHide?: boolean;
+    autoHideDelay?: number;
+    onClose?: () => void;
+    position?: ToastPosition;
+  }): CalloutInteractions {
+    // Get the appropriate toast container
+    const position = options.position || CalloutInteractions.ToastPositions.TOP_RIGHT;
+    const toastContainer = this._getToastContainer(position);
+
+    // Create toast element
+    const toast = document.createElement('div');
+    toast.className = `c-callout c-callout--toast ${options.variant ? `c-callout--${options.variant}` : 'c-callout--primary'}`;
+    toast.id = `toast-${Math.random().toString(36).substring(2, 9)}`;
+    toast.setAttribute('role', 'alert');
+    toast.setAttribute('aria-live', 'assertive');
+    toast.tabIndex = 0; // Make focusable
+
+    // Create toast content
+    let iconHtml = '';
+    if (options.icon) {
+      iconHtml = `<div class="c-callout__icon">${options.icon}</div>`;
+    }
+
+    toast.innerHTML = `
+      <div class="c-callout__content">
+        ${iconHtml}
+        <div class="c-callout__message">
+          <div class="c-callout__title">${options.title}</div>
+          ${options.content ? `<div class="c-callout__text">${options.content}</div>` : ''}
+        </div>
+      </div>
+      <button class="c-callout__close-btn" aria-label="Close">
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path d="M18 6L6 18M6 6L18 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+        </svg>
+      </button>
+    `;
+
+    // Add to container
+    toastContainer.appendChild(toast);
+
+    // Initialize interactions
+    const interaction = new CalloutInteractions(toast, {
+      autoHide: options.autoHide ?? true,
+      autoHideDelay: options.autoHideDelay ?? 5000,
+      onClose: options.onClose,
+      position,
+    });
+
+    // Add close button event listener
+    const closeButton = toast.querySelector('.c-callout__close-btn');
+    if (closeButton) {
+      closeButton.addEventListener('click', () => interaction.close());
+    }
+
+    // Focus the toast for accessibility
+    setTimeout(() => toast.focus(), 100);
+
+    return interaction;
+  }
+
+  /**
+   * Initialize all callout elements on the page
+   */
+  public static initializeAll(
+    options: {
+      autoHide?: boolean;
+      autoHideDelay?: number;
+      onClose?: () => void;
+    } = {}
+  ): CalloutInteractions[] {
+    const interactions: CalloutInteractions[] = [];
+    const elements = document.querySelectorAll('.c-callout');
+
+    elements.forEach(element => {
+      if (!CalloutInteractions.instances.has((element as HTMLElement).id)) {
+        interactions.push(new CalloutInteractions(element as HTMLElement, options));
+      }
+    });
+
+    return interactions;
+  }
+
+  /**
+   * Clear all toast notifications
+   */
+  public static clearAllToasts(): void {
+    // Get all toast containers
+    const containers = document.querySelectorAll('[id^="atomix-toast-container-"]');
+
+    containers.forEach(container => {
+      const toasts = container.querySelectorAll('.c-callout--toast');
+      toasts.forEach(toast => {
+        const id = (toast as HTMLElement).id;
+        const instance = CalloutInteractions.instances.get(id);
+
+        if (instance) {
+          instance.close();
+        } else {
+          // If no instance, remove directly
+          container.removeChild(toast);
+        }
+      });
+    });
+  }
+}
+
+// Type for toast positions
+type ToastPosition =
+  (typeof CalloutInteractions.ToastPositions)[keyof typeof CalloutInteractions.ToastPositions];

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

@@ -0,0 +1,18 @@
+/**
+ * Callout component bundle for vanilla JS usage
+ */
+import { Callout, CalloutInteractions } from './index';
+
+// Export to global namespace when included directly via script tag
+if (typeof window !== 'undefined') {
+  // Create Atomix namespace if it doesn't exist
+  window.Atomix = window.Atomix || {};
+
+  // Add Callout to Atomix namespace
+  // @ts-ignore - Ignore type mismatch between React component and vanilla JS class
+  window.Atomix.Callout = Callout;
+  window.Atomix.CalloutInteractions = CalloutInteractions;
+}
+
+// Export for module usage
+export { Callout, CalloutInteractions };

package/src/components/Callout/scripts/index.ts

@@ -0,0 +1,130 @@
+import { CalloutInteractions } from './CalloutInteractions';
+
+/**
+ * Callout component class for vanilla JS implementation
+ */
+export class Callout {
+  private element: HTMLElement;
+  private closeButton: HTMLElement | null;
+  private config: {
+    onClose?: () => void;
+  };
+
+  /**
+   * Create a new Callout instance
+   * @param element - The callout element
+   * @param options - Configuration options
+   */
+  constructor(element: HTMLElement, options: { onClose?: () => void } = {}) {
+    this.element = element;
+    this.closeButton = element.querySelector('.c-callout__close-btn');
+    this.config = {
+      onClose: options.onClose,
+    };
+
+    this._initialize();
+  }
+
+  /**
+   * Initialize the callout component
+   */
+  private _initialize(): void {
+    if (this.closeButton) {
+      this.closeButton.addEventListener('click', this._handleClose.bind(this));
+    }
+  }
+
+  /**
+   * Handle close button click
+   */
+  private _handleClose(): void {
+    this.close();
+
+    if (this.config.onClose) {
+      this.config.onClose();
+    }
+
+    // Dispatch custom event
+    this.element.dispatchEvent(
+      new CustomEvent('atomix:callout:close', {
+        bubbles: true,
+      })
+    );
+  }
+
+  /**
+   * Close the callout
+   */
+  public close(): void {
+    this.element.classList.add('is-hide');
+
+    // Remove from DOM after animation completes
+    setTimeout(() => {
+      if (this.element.parentNode) {
+        this.element.parentNode.removeChild(this.element);
+      }
+    }, 300); // Match the transition duration in CSS
+  }
+
+  /**
+   * Show the callout
+   */
+  public show(): void {
+    this.element.classList.remove('is-hide');
+  }
+
+  /**
+   * Update callout content
+   * @param options - Content options
+   */
+  public update(options: { title?: string; content?: string; variant?: string }): void {
+    const titleElement = this.element.querySelector('.c-callout__title');
+    const contentElement = this.element.querySelector('.c-callout__text');
+
+    if (options.title && titleElement) {
+      titleElement.textContent = options.title;
+    }
+
+    if (options.content && contentElement) {
+      contentElement.textContent = options.content;
+    }
+
+    if (options.variant) {
+      // Remove existing variant classes
+      const variantClasses = Array.from(this.element.classList).filter(
+        cls =>
+          cls.startsWith('c-callout--') && !['c-callout--oneline', 'c-callout--toast'].includes(cls)
+      );
+
+      variantClasses.forEach(cls => this.element.classList.remove(cls));
+
+      // Add new variant class
+      this.element.classList.add(`c-callout--${options.variant}`);
+    }
+  }
+
+  /**
+   * Clean up event listeners
+   */
+  public destroy(): void {
+    if (this.closeButton) {
+      this.closeButton.removeEventListener('click', this._handleClose.bind(this));
+    }
+  }
+
+  /**
+   * Initialize all callout elements on the page
+   */
+  public static initializeAll(options: { onClose?: () => void } = {}): Callout[] {
+    const callouts: Callout[] = [];
+    const elements = document.querySelectorAll('.c-callout');
+
+    elements.forEach(element => {
+      callouts.push(new Callout(element as HTMLElement, options));
+    });
+
+    return callouts;
+  }
+}
+
+export { CalloutInteractions };

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

@@ -0,0 +1,107 @@
+import React from 'react';
+import { Meta, StoryObj } from '@storybook/react';
+import { Card, ElevationCard } from './index';
+
+const meta: Meta<typeof Card> = {
+  title: 'Components/Card',
+  component: Card,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    header: { control: 'text' },
+    title: { control: 'text' },
+    text: { control: 'text' },
+    image: { control: 'text' },
+    imageAlt: { control: 'text' },
+    footer: { control: 'text' },
+    row: { control: 'boolean' },
+    flat: { control: 'boolean' },
+    active: { control: 'boolean' },
+    className: { control: 'text' },
+    onClick: { action: 'clicked' },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Card>;
+
+// Basic Card
+export const Basic: Story = {
+  args: {
+    title: 'Card Title',
+    text: 'This is a basic card with title and text content.',
+    className: 'custom-card',
+  },
+};
+
+// Card with Image
+export const WithImage: Story = {
+  args: {
+    title: 'Card with Image',
+    text: 'This card includes an image above the content.',
+    image: 'https://placehold.co/600x400',
+    imageAlt: 'Placeholder image',
+  },
+};
+
+// Card with Actions
+export const WithActions: Story = {
+  args: {
+    title: 'Card with Actions',
+    text: 'This card includes buttons at the bottom.',
+    actions: (
+      <React.Fragment>
+        <button className="c-btn c-btn--primary c-btn--sm">Learn More</button>
+        <button className="c-btn c-btn--secondary c-btn--sm">Cancel</button>
+      </React.Fragment>
+    ),
+  },
+};
+
+// Row Card
+export const Row: Story = {
+  args: {
+    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
+export const Flat: Story = {
+  args: {
+    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
+export const Clickable: Story = {
+  args: {
+    title: 'Clickable Card',
+    text: 'Click me! This card has an onClick handler attached.',
+    onClick: () => alert('Card clicked!'),
+  },
+};
+
+// Elevation Card
+export const WithElevation: Story = {
+  render: args => (
+    <div style={{ padding: '20px', width: '300px' }}>
+      <ElevationCard {...args} />
+    </div>
+  ),
+  args: {
+    title: 'Elevation Effect Card',
+    text: 'Hover over this card to see an elevation effect.',
+    image: 'https://picsum.photos/id/0/712/500',
+    imageAlt: 'Placeholder',
+  },
+};

package/src/components/Card/Card.tsx

@@ -0,0 +1,69 @@
+import React, { forwardRef, Ref } from 'react';
+import { CARD } from '../../lib/constants/components';
+import { CardProps } from '../../lib/types/components';
+
+export const Card = forwardRef<HTMLDivElement, CardProps>(
+  (
+    {
+      header,
+      image,
+      imageAlt = '',
+      title,
+      text,
+      actions,
+      icon,
+      footer,
+      row = false,
+      flat = false,
+      active = false,
+      className = '',
+      children,
+      onClick,
+      ...rest
+    },
+    ref
+  ) => {
+    const cardClasses = [
+      CARD.CLASSES.BASE,
+      row ? CARD.CLASSES.ROW : '',
+      flat ? CARD.CLASSES.FLAT : '',
+      active ? CARD.CLASSES.ACTIVE : '',
+      className,
+    ]
+      .filter(Boolean)
+      .join(' ');
+
+    return (
+      <div ref={ref} className={cardClasses} onClick={onClick} {...rest}>
+        {(image || icon || header) && (
+          <div className={CARD.SELECTORS.HEADER.substring(1)}>
+            {header}
+            {image && (
+              <img src={image} alt={imageAlt} className={CARD.SELECTORS.IMAGE.substring(1)} />
+            )}
+
+            {icon && <div className={CARD.SELECTORS.ICON.substring(1)}>{icon}</div>}
+          </div>
+        )}
+
+        <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>
+
+        {actions && <div className={CARD.SELECTORS.ACTIONS.substring(1)}>{actions}</div>}
+
+        {footer && <div className={CARD.SELECTORS.FOOTER.substring(1)}>{footer}</div>}
+      </div>
+    );
+  }
+);
+
+export type { CardProps };
+
+Card.displayName = 'Card';
+
+export default Card;