@shohojdhara/atomix 0.1.16 → 0.1.17

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

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

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

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

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

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