@shohojdhara/atomix 0.1.17 → 0.1.18

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

@@ -0,0 +1,378 @@
+import { MESSAGES } from '../../../lib/constants/components';
+
+/**
+ * Messages component options
+ */
+export interface MessagesOptions {
+  /**
+   * Custom width for the messages container
+   */
+  width?: string;
+
+  /**
+   * Maximum height for the messages body
+   */
+  bodyHeight?: string;
+
+  /**
+   * Placeholder text for the input field
+   */
+  placeholder?: string;
+
+  /**
+   * Callback when a new message is sent
+   */
+  onSendMessage?: (text: string) => void;
+
+  /**
+   * Whether the component is disabled
+   */
+  disabled?: boolean;
+}
+
+/**
+ * Message item data structure
+ */
+export interface MessageItem {
+  id: string;
+  text?: string;
+  image?: string;
+  file?: {
+    name: string;
+    size: string;
+  };
+  time: string;
+  isSelf?: boolean;
+}
+
+/**
+ * Default options for the Messages component
+ */
+const DEFAULT_OPTIONS: MessagesOptions = {
+  width: '100%',
+  bodyHeight: 'calc(100vh - 600px)',
+  placeholder: 'Type a message',
+  disabled: false,
+};
+
+/**
+ * Messages component class
+ */
+export class Messages {
+  private _element: HTMLElement;
+  private $form: HTMLFormElement | null;
+  private $input: HTMLInputElement | null;
+  private $submitButton: HTMLButtonElement | null;
+  private $body: HTMLElement | null;
+  private options: MessagesOptions;
+  private eventHandlers: { [key: string]: EventListener } = {};
+
+  /**
+   * Get the element
+   */
+  get $element(): HTMLElement {
+    return this._element;
+  }
+
+  /**
+   * Create a new Messages instance
+   * @param element - Element selector or HTMLElement
+   * @param options - Component options
+   */
+  constructor(element: string | HTMLElement, options: MessagesOptions = {}) {
+    this._element =
+      typeof element === 'string' ? (document.querySelector(element) as HTMLElement) : element;
+
+    if (!this._element) {
+      throw new Error('Messages element not found');
+    }
+
+    this.options = { ...DEFAULT_OPTIONS, ...options };
+
+    // Cache DOM elements
+    this.$form = this._element.querySelector(MESSAGES.SELECTORS.FORM);
+    this.$input = this._element.querySelector(MESSAGES.SELECTORS.INPUT);
+    this.$submitButton = this._element.querySelector('.c-messages__submit');
+    this.$body = this._element.querySelector(MESSAGES.SELECTORS.BODY);
+
+    this._initialize();
+  }
+
+  /**
+   * Initialize the component
+   */
+  private _initialize(): void {
+    // Apply options
+    if (this.options.width) {
+      this._element.style.setProperty('--atomix-messages-width', this.options.width);
+    }
+
+    if (this.options.bodyHeight && this.$body) {
+      this.$body.style.setProperty('--atomix-messages-body-height', this.options.bodyHeight);
+    }
+
+    if (this.options.placeholder && this.$input) {
+      this.$input.placeholder = this.options.placeholder;
+    }
+
+    if (this.options.disabled) {
+      this._element.classList.add('is-disabled');
+      if (this.$input) this.$input.disabled = true;
+      if (this.$submitButton) this.$submitButton.disabled = true;
+    }
+
+    // Set up event handlers
+    this._setupEventListeners();
+
+    // Scroll to bottom of messages
+    this._scrollToBottom();
+  }
+
+  /**
+   * Set up event listeners
+   */
+  private _setupEventListeners(): void {
+    if (this.$form) {
+      this.eventHandlers.submit = this._handleSubmit.bind(this);
+      this.$form.addEventListener('submit', this.eventHandlers.submit);
+    }
+
+    if (this.$input) {
+      this.eventHandlers.keydown = ((event: Event) => {
+        if (event instanceof KeyboardEvent) {
+          this._handleKeyDown(event);
+        }
+      }) as EventListener;
+
+      this.$input.addEventListener('keydown', this.eventHandlers.keydown);
+    }
+  }
+
+  /**
+   * Handle form submission
+   */
+  private _handleSubmit(event: Event): void {
+    event.preventDefault();
+
+    if (!this.$input || this.options.disabled) return;
+
+    const text = this.$input.value.trim();
+    if (!text) return;
+
+    if (this.options.onSendMessage) {
+      this.options.onSendMessage(text);
+    }
+
+    // Dispatch custom event
+    const customEvent = new CustomEvent('messages:send', {
+      bubbles: true,
+      detail: { text },
+    });
+    this._element.dispatchEvent(customEvent);
+
+    // Clear input
+    this.$input.value = '';
+
+    // Scroll to bottom
+    this._scrollToBottom();
+  }
+
+  /**
+   * Handle key down events
+   */
+  private _handleKeyDown(event: KeyboardEvent): void {
+    // Submit on Enter (without Shift)
+    if (event.key === 'Enter' && !event.shiftKey) {
+      event.preventDefault();
+      if (this.$form) {
+        const submitEvent = new Event('submit', { cancelable: true });
+        this.$form.dispatchEvent(submitEvent);
+      }
+    }
+  }
+
+  /**
+   * Add a new message to the chat
+   */
+  public addMessage(message: MessageItem): void {
+    if (!this.$body) return;
+
+    const messageEl = this._createMessageElement(message);
+    this.$body.appendChild(messageEl);
+
+    // Scroll to bottom
+    this._scrollToBottom();
+
+    // Dispatch custom event
+    const customEvent = new CustomEvent('messages:new', {
+      bubbles: true,
+      detail: { message },
+    });
+    this._element.dispatchEvent(customEvent);
+  }
+
+  /**
+   * Create a message element
+   */
+  private _createMessageElement(message: MessageItem): HTMLElement {
+    const contentEl = document.createElement('div');
+    contentEl.className = `${MESSAGES.CLASSES.CONTENT} ${message.isSelf ? MESSAGES.CLASSES.CONTENT_SELF : ''}`;
+    contentEl.setAttribute(
+      'aria-label',
+      `${message.isSelf ? 'You' : 'Other person'} sent a message at ${message.time}`
+    );
+
+    // Create avatar
+    const avatarEl = document.createElement('div');
+    avatarEl.className = `${MESSAGES.CLASSES.AVATAR} c-avatar c-avatar--xl c-avatar--circle`;
+
+    // Create items container
+    const itemsEl = document.createElement('div');
+    itemsEl.className = MESSAGES.CLASSES.ITEMS;
+
+    // Add text message if present
+    if (message.text) {
+      const textEl = document.createElement('div');
+      textEl.className = MESSAGES.CLASSES.TEXT;
+      textEl.textContent = message.text;
+
+      const timeEl = document.createElement('span');
+      timeEl.className = MESSAGES.CLASSES.TIME;
+      timeEl.textContent = message.time;
+      timeEl.setAttribute('aria-label', `Sent at ${message.time}`);
+
+      textEl.appendChild(timeEl);
+      itemsEl.appendChild(textEl);
+    }
+
+    // Add image if present
+    if (message.image) {
+      const imageEl = document.createElement('img');
+      imageEl.className = MESSAGES.CLASSES.IMAGE;
+      imageEl.src = message.image;
+      imageEl.alt = 'Message attachment';
+      imageEl.setAttribute('loading', 'lazy');
+
+      itemsEl.appendChild(imageEl);
+    }
+
+    // Add file if present
+    if (message.file) {
+      const fileEl = document.createElement('div');
+      fileEl.className = MESSAGES.CLASSES.FILE;
+      fileEl.setAttribute(
+        'aria-label',
+        `File attachment: ${message.file.name}, size: ${message.file.size}`
+      );
+
+      const iconEl = document.createElement('span');
+      iconEl.className = MESSAGES.CLASSES.FILE_ICON;
+      iconEl.innerHTML =
+        '<span class="c-icon c-icon--md " aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"></rect><path d="M200,224H56a8,8,0,0,1-8-8V40a8,8,0,0,1,8-8h96l56,56V216A8,8,0,0,1,200,224Z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></path><polyline points="152 32 152 88 208 88" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></polyline></svg></span>';
+
+      const detailsEl = document.createElement('div');
+      detailsEl.className = MESSAGES.CLASSES.FILE_DETAILS;
+
+      const nameEl = document.createElement('div');
+      nameEl.className = MESSAGES.CLASSES.FILE_NAME;
+      nameEl.textContent = message.file.name;
+
+      const sizeEl = document.createElement('div');
+      sizeEl.className = MESSAGES.CLASSES.FILE_SIZE;
+      sizeEl.textContent = message.file.size;
+
+      detailsEl.appendChild(nameEl);
+      detailsEl.appendChild(sizeEl);
+
+      fileEl.appendChild(iconEl);
+      fileEl.appendChild(detailsEl);
+
+      itemsEl.appendChild(fileEl);
+    }
+
+    contentEl.appendChild(avatarEl);
+    contentEl.appendChild(itemsEl);
+
+    return contentEl;
+  }
+
+  /**
+   * Scroll to the bottom of the messages body
+   */
+  private _scrollToBottom(): void {
+    if (this.$body) {
+      this.$body.scrollTop = this.$body.scrollHeight;
+    }
+  }
+
+  /**
+   * Enable the messages component
+   */
+  public enable(): void {
+    this.options.disabled = false;
+    this._element.classList.remove('is-disabled');
+    if (this.$input) this.$input.disabled = false;
+    if (this.$submitButton) this.$submitButton.disabled = false;
+
+    const optionButtons = this._element.querySelectorAll('.c-messages__option-icon');
+    optionButtons.forEach(button => {
+      if (button instanceof HTMLButtonElement) {
+        button.disabled = false;
+      }
+    });
+  }
+
+  /**
+   * Disable the messages component
+   */
+  public disable(): void {
+    this.options.disabled = true;
+    this._element.classList.add('is-disabled');
+    if (this.$input) this.$input.disabled = true;
+    if (this.$submitButton) this.$submitButton.disabled = true;
+
+    const optionButtons = this._element.querySelectorAll('.c-messages__option-icon');
+    optionButtons.forEach(button => {
+      if (button instanceof HTMLButtonElement) {
+        button.disabled = true;
+      }
+    });
+  }
+
+  /**
+   * Clear all messages
+   */
+  public clearMessages(): void {
+    if (this.$body) {
+      const messages = this.$body.querySelectorAll(MESSAGES.SELECTORS.CONTENT);
+      messages.forEach(message => message.remove());
+    }
+  }
+
+  /**
+   * Destroy the component and clean up event listeners
+   */
+  public destroy(): void {
+    // Remove event listeners
+    if (this.$form && this.eventHandlers.submit) {
+      this.$form.removeEventListener('submit', this.eventHandlers.submit);
+    }
+
+    if (this.$input && this.eventHandlers.keydown) {
+      this.$input.removeEventListener('keydown', this.eventHandlers.keydown);
+    }
+
+    // Clear event handlers
+    this.eventHandlers = {};
+  }
+
+  /**
+   * Initialize all messages components on the page
+   */
+  public static initializeAll(options: MessagesOptions = {}): Messages[] {
+    const elements = document.querySelectorAll(MESSAGES.SELECTORS.MESSAGES);
+    return Array.from(elements).map(element => new Messages(element as HTMLElement, options));
+  }
+}
+
+export default Messages;

package/src/components/Modal/Modal.stories.tsx

@@ -0,0 +1,288 @@
+import React, { useState } from 'react';
+import { Meta, StoryObj } from '@storybook/react';
+import Modal from './Modal';
+
+const meta: Meta<typeof Modal> = {
+  title: 'Components/Modal',
+  component: Modal,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: 'select',
+      options: ['sm', 'md', 'lg', 'xl'],
+      description: 'Size of the modal',
+      defaultValue: 'md',
+    },
+    backdrop: {
+      control: 'boolean',
+      description: 'Whether clicking the backdrop closes the modal',
+      defaultValue: true,
+    },
+    keyboard: {
+      control: 'boolean',
+      description: 'Whether pressing Escape key closes the modal',
+      defaultValue: true,
+    },
+    closeButton: {
+      control: 'boolean',
+      description: 'Whether to show the close button',
+      defaultValue: true,
+    },
+    onClose: { action: 'onClose' },
+    onOpen: { action: 'onOpen' },
+    onOpenChange: { action: 'onOpenChange' },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Modal>;
+
+/**
+ * Basic modal example with a button to trigger opening.
+ */
+export const Basic: Story = {
+  render: args => {
+    const [isOpen, setIsOpen] = useState(false);
+
+    return (
+      <>
+        <div
+          className="c-btn c-btn--primary"
+          onClick={() => setIsOpen(true)}
+          style={{ cursor: 'pointer', padding: '8px 16px', display: 'inline-block' }}
+        >
+          Open Modal
+        </div>
+
+        <Modal
+          {...args}
+          isOpen={isOpen}
+          onOpenChange={setIsOpen}
+          title="Title"
+          subtitle="This is some description text. This text is only a placeholder and should be replaced with the actual content of the modal."
+        >
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam auctor, odio vitae
+            faucibus luctus, elit nisi tincidunt justo, in malesuada enim nisl eget nisl.
+            Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis
+            egestas.
+          </p>
+        </Modal>
+      </>
+    );
+  },
+};
+
+/**
+ * Modal with a title, subtitle, and footer actions.
+ */
+export const WithFooter: Story = {
+  render: args => {
+    const [isOpen, setIsOpen] = useState(false);
+
+    return (
+      <>
+        <div
+          className="c-btn c-btn--primary"
+          onClick={() => setIsOpen(true)}
+          style={{ cursor: 'pointer', padding: '8px 16px', display: 'inline-block' }}
+        >
+          Open Modal with Footer
+        </div>
+
+        <Modal
+          {...args}
+          isOpen={isOpen}
+          onOpenChange={setIsOpen}
+          title="Modal with Footer"
+          subtitle="This is some description text. This text is only a placeholder and should be replaced with the actual content of the modal."
+          footer={
+            <>
+              <div
+                className="c-btn c-btn--outline-secondary"
+                onClick={() => setIsOpen(false)}
+                style={{
+                  cursor: 'pointer',
+                  padding: '8px 16px',
+                  display: 'inline-block',
+                  marginRight: '8px',
+                }}
+              >
+                Cancel
+              </div>
+              <div
+                className="c-btn c-btn--primary"
+                onClick={() => {
+                  alert('Action confirmed!');
+                  setIsOpen(false);
+                }}
+                style={{ cursor: 'pointer', padding: '8px 16px', display: 'inline-block' }}
+              >
+                Confirm
+              </div>
+            </>
+          }
+        >
+          <p>This modal has a title, subtitle, and footer with action buttons.</p>
+          <p>The footer is ideal for placing action buttons or other controls.</p>
+        </Modal>
+      </>
+    );
+  },
+};
+
+/**
+ * Small size modal variant.
+ */
+export const Small: Story = {
+  render: args => {
+    const [isOpen, setIsOpen] = useState(false);
+
+    return (
+      <>
+        <div
+          className="c-btn c-btn--primary"
+          onClick={() => setIsOpen(true)}
+          style={{ cursor: 'pointer', padding: '8px 16px', display: 'inline-block' }}
+        >
+          Open Small Modal
+        </div>
+
+        <Modal
+          {...args}
+          isOpen={isOpen}
+          onOpenChange={setIsOpen}
+          title="Small Modal"
+          subtitle="This is some description text."
+          size="sm"
+          footer={
+            <>
+              <div
+                className="c-btn c-btn--outline-secondary"
+                onClick={() => setIsOpen(false)}
+                style={{
+                  cursor: 'pointer',
+                  padding: '8px 16px',
+                  display: 'inline-block',
+                  marginRight: '8px',
+                }}
+              >
+                Cancel
+              </div>
+              <div
+                className="c-btn c-btn--primary"
+                onClick={() => setIsOpen(false)}
+                style={{ cursor: 'pointer', padding: '8px 16px', display: 'inline-block' }}
+              >
+                OK
+              </div>
+            </>
+          }
+        >
+          <img
+            src="https://unsplash.it/g/400/200"
+            alt="Example image"
+            style={{ maxWidth: '100%' }}
+          />
+        </Modal>
+      </>
+    );
+  },
+};
+
+/**
+ * Different size variants of the modal component.
+ */
+export const Sizes: Story = {
+  render: () => {
+    const [size, setSize] = useState<'sm' | 'md' | 'lg' | 'xl'>('md');
+    const [isOpen, setIsOpen] = useState(false);
+
+    return (
+      <div className="u-d-flex u-flex-column u-gap-4">
+        <div className="u-d-flex u-gap-4">
+          <div
+            className={`c-btn ${size === 'sm' ? 'c-btn--primary' : 'c-btn--secondary'}`}
+            onClick={() => {
+              setSize('sm');
+              setIsOpen(true);
+            }}
+            style={{ cursor: 'pointer', padding: '8px 16px', display: 'inline-block' }}
+          >
+            Small Modal
+          </div>
+
+          <div
+            className={`c-btn ${size === 'md' ? 'c-btn--primary' : 'c-btn--secondary'}`}
+            onClick={() => {
+              setSize('md');
+              setIsOpen(true);
+            }}
+            style={{ cursor: 'pointer', padding: '8px 16px', display: 'inline-block' }}
+          >
+            Medium Modal
+          </div>
+
+          <div
+            className={`c-btn ${size === 'lg' ? 'c-btn--primary' : 'c-btn--secondary'}`}
+            onClick={() => {
+              setSize('lg');
+              setIsOpen(true);
+            }}
+            style={{ cursor: 'pointer', padding: '8px 16px', display: 'inline-block' }}
+          >
+            Large Modal
+          </div>
+
+          <div
+            className={`c-btn ${size === 'xl' ? 'c-btn--primary' : 'c-btn--secondary'}`}
+            onClick={() => {
+              setSize('xl');
+              setIsOpen(true);
+            }}
+            style={{ cursor: 'pointer', padding: '8px 16px', display: 'inline-block' }}
+          >
+            Extra Large Modal
+          </div>
+        </div>
+
+        <Modal
+          isOpen={isOpen}
+          onOpenChange={setIsOpen}
+          title={`${size.toUpperCase()} Modal`}
+          subtitle="This modal demonstrates different size variants."
+          size={size}
+          footer={
+            <>
+              <div
+                className="c-btn c-btn--outline-secondary"
+                onClick={() => setIsOpen(false)}
+                style={{
+                  cursor: 'pointer',
+                  padding: '8px 16px',
+                  display: 'inline-block',
+                  marginRight: '8px',
+                }}
+              >
+                Button
+              </div>
+              <div
+                className="c-btn c-btn--primary"
+                onClick={() => setIsOpen(false)}
+                style={{ cursor: 'pointer', padding: '8px 16px', display: 'inline-block' }}
+              >
+                Button
+              </div>
+            </>
+          }
+        >
+          <p>This is a {size.toUpperCase()} sized modal.</p>
+          <p>Modal sizes can be adjusted based on the content needs.</p>
+        </Modal>
+      </div>
+    );
+  },
+};