@shohojdhara/atomix 0.1.30 → 0.2.1

package/src/components/Messages/Messages.tsx

@@ -0,0 +1,172 @@
+import React from 'react';
+import { Icon } from '../Icon/Icon';
+import { Avatar } from '../Avatar/Avatar';
+import { MESSAGES } from '../../lib/constants/components';
+import { MessagesProps } from '../../lib/types/components';
+import { useMessages } from '../../lib/composables/useMessages';
+
+/**
+ * Messages component for displaying a chat interface with messages, images, and file attachments
+ */
+export const Messages: React.FC<MessagesProps> = ({
+  messages = [],
+  otherAvatar,
+  selfAvatar,
+  otherName,
+  width = '100%',
+  onSendMessage,
+  placeholder = 'Type a message',
+  className = '',
+  bodyHeight,
+  disabled = false,
+  id,
+}) => {
+  const { inputValue, handleInputChange, handleSubmit, handleKeyDown } = useMessages({
+    onSendMessage,
+  });
+
+  // Generate unique ID for accessibility
+  const messagesId = id || `messages-${Math.random().toString(36).substr(2, 9)}`;
+  const inputId = `${messagesId}-input`;
+
+  return (
+    <div
+      className={`${MESSAGES.CLASSES.BASE} ${disabled ? 'is-disabled' : ''} ${className}`}
+      style={{ '--atomix-messages-width': width } as React.CSSProperties}
+      id={messagesId}
+      aria-label="Chat messages"
+      role="log"
+      aria-live="polite"
+    >
+      <div
+        className={MESSAGES.CLASSES.BODY}
+        style={
+          bodyHeight
+            ? ({ '--atomix-messages-body-height': bodyHeight } as React.CSSProperties)
+            : undefined
+        }
+      >
+        {messages.map(message => (
+          <div
+            key={message.id}
+            className={`${MESSAGES.CLASSES.CONTENT} ${message.isSelf ? MESSAGES.CLASSES.CONTENT_SELF : ''}`}
+            aria-label={`${message.isSelf ? 'You' : otherName || 'Other person'} sent a message at ${message.time}`}
+          >
+            <Avatar
+              src={message.isSelf ? selfAvatar : otherAvatar}
+              size="xl"
+              circle
+              className={MESSAGES.CLASSES.AVATAR}
+              alt={message.isSelf ? 'Your avatar' : `${otherName || 'Other person'}'s avatar`}
+            />
+            <div className={MESSAGES.CLASSES.ITEMS}>
+              {!message.isSelf && otherName && (
+                <div className={MESSAGES.CLASSES.NAME}>{otherName}</div>
+              )}
+
+              {message.text && (
+                <div className={MESSAGES.CLASSES.TEXT}>
+                  {message.text}
+                  <span className={MESSAGES.CLASSES.TIME} aria-label={`Sent at ${message.time}`}>
+                    {message.time}
+                  </span>
+                </div>
+              )}
+
+              {message.image && (
+                <img
+                  className={MESSAGES.CLASSES.IMAGE}
+                  src={message.image}
+                  alt="Message attachment"
+                  loading="lazy"
+                />
+              )}
+
+              {message.file && (
+                <div
+                  className={MESSAGES.CLASSES.FILE}
+                  aria-label={`File attachment: ${message.file.name}, size: ${message.file.size}`}
+                >
+                  <span className={MESSAGES.CLASSES.FILE_ICON}>
+                    <Icon name="File" aria-hidden="true" />
+                  </span>
+                  <div className={MESSAGES.CLASSES.FILE_DETAILS}>
+                    <div className={MESSAGES.CLASSES.FILE_NAME}>{message.file.name}</div>
+                    <div className={MESSAGES.CLASSES.FILE_SIZE}>{message.file.size}</div>
+                  </div>
+                </div>
+              )}
+            </div>
+          </div>
+        ))}
+      </div>
+
+      <form
+        className={MESSAGES.CLASSES.FORM}
+        onSubmit={handleSubmit}
+        aria-label="Message input form"
+      >
+        <div className={MESSAGES.CLASSES.INPUT_GROUP}>
+          <label htmlFor={inputId} className="u-visually-hidden">
+            Type a message
+          </label>
+          <input
+            id={inputId}
+            type="text"
+            className={MESSAGES.CLASSES.INPUT}
+            placeholder={placeholder}
+            value={inputValue}
+            onChange={handleInputChange}
+            onKeyDown={handleKeyDown}
+            disabled={disabled}
+            aria-label="Message input"
+          />
+          <div className={MESSAGES.CLASSES.OPTIONS} aria-label="Message options">
+            <button
+              type="button"
+              className={MESSAGES.CLASSES.OPTION}
+              aria-label="Attach file"
+              disabled={disabled}
+            >
+              <Icon
+                name="PaperclipHorizontal"
+                aria-hidden="true"
+                className={MESSAGES.CLASSES.OPTION_ICON}
+              />
+            </button>
+            <button
+              type="button"
+              className={MESSAGES.CLASSES.OPTION}
+              aria-label="Attach image"
+              disabled={disabled}
+            >
+              <Icon name="Image" aria-hidden="true" className={MESSAGES.CLASSES.OPTION_ICON} />
+            </button>
+            <button
+              type="button"
+              className={MESSAGES.CLASSES.OPTION}
+              aria-label="Insert link"
+              disabled={disabled}
+            >
+              <Icon name="Link" aria-hidden="true" className={MESSAGES.CLASSES.OPTION_ICON} />
+            </button>
+          </div>
+        </div>
+        <button
+          type="submit"
+          className={MESSAGES.CLASSES.SUBMIT}
+          aria-label="Send message"
+          disabled={disabled}
+        >
+          <Icon name="PaperPlaneTilt" aria-hidden="true" size={24} />
+        </button>
+      </form>
+    </div>
+  );
+};
+
+export type { MessagesProps };
+
+Messages.displayName = 'Messages';
+
+export default Messages;

package/src/components/Messages/index.ts

@@ -0,0 +1,3 @@
+export { Messages } from './Messages';
+export { default } from './Messages';
+export type { MessagesProps } from './Messages';

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

@@ -0,0 +1,284 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { useState } from 'react';
+import Modal from './Modal';
+
+const meta: Meta<typeof Modal> = {
+  title: 'Components/Modal',
+  component: Modal,
+  parameters: {
+    layout: 'centered',
+  },
+  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,
+    },
+  },
+};
+
+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>
+    );
+  },
+};

package/src/components/Modal/Modal.tsx

@@ -0,0 +1,198 @@
+import React, { useEffect, useRef, useState, useCallback } from 'react';
+import { ModalProps } from '../../lib/types/components';
+import { MODAL } from '../../lib/constants/components';
+
+/**
+ * Hook for managing modal state
+ */
+function useModal({
+  isOpen: isOpenProp,
+  onOpenChange,
+  onOpen,
+  onClose,
+}: {
+  isOpen?: boolean;
+  onOpenChange?: (isOpen: boolean) => void;
+  onOpen?: () => void;
+  onClose?: () => void;
+} = {}) {
+  // For uncontrolled usage
+  const [isOpenState, setIsOpenState] = useState(false);
+
+  // Determine if we're in controlled or uncontrolled mode
+  const isControlled = isOpenProp !== undefined;
+  const isOpen = isControlled ? !!isOpenProp : isOpenState;
+
+  // Update internal state when prop changes (for controlled mode)
+  useEffect(() => {
+    if (isControlled) {
+      setIsOpenState(!!isOpenProp);
+    }
+  }, [isOpenProp, isControlled]);
+
+  const updateOpen = useCallback(
+    (nextIsOpen: boolean) => {
+      // For uncontrolled mode, update internal state
+      if (!isControlled) {
+        setIsOpenState(nextIsOpen);
+      }
+
+      // Call the change handler in either mode
+      if (onOpenChange) {
+        onOpenChange(nextIsOpen);
+      }
+
+      // Call the specific handler
+      if (nextIsOpen && onOpen) {
+        onOpen();
+      } else if (!nextIsOpen && onClose) {
+        onClose();
+      }
+    },
+    [isControlled, onOpenChange, onOpen, onClose]
+  );
+
+  const open = useCallback(() => {
+    updateOpen(true);
+  }, [updateOpen]);
+
+  const close = useCallback(() => {
+    updateOpen(false);
+  }, [updateOpen]);
+
+  const toggle = useCallback(() => {
+    updateOpen(!isOpen);
+  }, [isOpen, updateOpen]);
+
+  return {
+    isOpen,
+    open,
+    close,
+    toggle,
+  };
+}
+
+/**
+ * Modal component for displaying overlay content
+ */
+export const Modal: React.FC<ModalProps> = ({
+  children,
+  isOpen = false,
+  onOpenChange,
+  onClose,
+  onOpen,
+  title,
+  subtitle,
+  size = 'md',
+  backdrop = true,
+  keyboard = true,
+  className = '',
+  closeButton = true,
+  footer,
+  ...props
+}) => {
+  const modalRef = useRef<HTMLDivElement>(null);
+  const dialogRef = useRef<HTMLDivElement>(null);
+  const backdropRef = useRef<HTMLDivElement>(null);
+
+  const {
+    isOpen: isOpenState,
+    open,
+    close,
+  } = useModal({
+    isOpen,
+    onOpenChange,
+    onClose,
+    onOpen,
+  });
+
+  // Handle keyboard events for Escape key
+  useEffect(() => {
+    if (!keyboard) return undefined;
+
+    const handleKeydown = (event: KeyboardEvent) => {
+      if (event.key === 'Escape' && isOpenState) {
+        close();
+      }
+    };
+
+    document.addEventListener('keydown', handleKeydown);
+    return () => {
+      document.removeEventListener('keydown', handleKeydown);
+    };
+  }, [isOpenState, close, keyboard]);
+
+  // Handle backdrop click
+  const handleBackdropClick = (event: React.MouseEvent<HTMLDivElement>) => {
+    if (backdrop && event.target === event.currentTarget) {
+      close();
+    }
+  };
+
+  // Assemble classes
+  const modalClasses = [
+    'c-modal',
+    isOpenState ? MODAL.CLASSES.IS_OPEN : '',
+    size ? `c-modal--${size}` : '',
+    className,
+  ]
+    .filter(Boolean)
+    .join(' ');
+
+  return (
+    <div
+      ref={modalRef}
+      className={modalClasses}
+      style={{ display: isOpenState ? 'block' : 'none' }}
+      role="dialog"
+      aria-modal="true"
+      aria-hidden={!isOpenState}
+      {...props}
+    >
+      <div ref={backdropRef} className="c-modal__backdrop" onClick={handleBackdropClick} />
+      <div ref={dialogRef} className="c-modal__dialog">
+        <div className="c-modal__content">
+          {(title || closeButton) && (
+            <div className="c-modal__header">
+              <div className="c-modal__header-content">
+                {title && <h3 className="c-modal__title">{title}</h3>}
+                {subtitle && <p className="c-modal__sub">{subtitle}</p>}
+              </div>
+              {closeButton && (
+                <button
+                  type="button"
+                  className="c-modal__close c-btn js-modal-close"
+                  onClick={close}
+                  aria-label="Close modal"
+                >
+                  <svg
+                    width="20"
+                    height="20"
+                    viewBox="0 0 20 20"
+                    fill="none"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M16.0672 15.1828C16.1253 15.2409 16.1713 15.3098 16.2028 15.3857C16.2342 15.4615 16.2504 15.5429 16.2504 15.625C16.2504 15.7071 16.2342 15.7884 16.2028 15.8643C16.1713 15.9402 16.1253 16.0091 16.0672 16.0672C16.0091 16.1252 15.9402 16.1713 15.8643 16.2027C15.7885 16.2342 15.7071 16.2503 15.625 16.2503C15.5429 16.2503 15.4616 16.2342 15.3857 16.2027C15.3098 16.1713 15.2409 16.1252 15.1828 16.0672L10 10.8836L4.8172 16.0672C4.69992 16.1844 4.54086 16.2503 4.37501 16.2503C4.20916 16.2503 4.0501 16.1844 3.93282 16.0672C3.81555 15.9499 3.74966 15.7908 3.74966 15.625C3.74966 15.4591 3.81555 15.3001 3.93282 15.1828L9.11642 9.99998L3.93282 4.81717C3.81555 4.69989 3.74966 4.54083 3.74966 4.37498C3.74966 4.20913 3.81555 4.05007 3.93282 3.93279C4.0501 3.81552 4.20916 3.74963 4.37501 3.74963C4.54086 3.74963 4.69992 3.81552 4.8172 3.93279L10 9.11639L15.1828 3.93279C15.3001 3.81552 15.4592 3.74963 15.625 3.74963C15.7909 3.74963 15.9499 3.81552 16.0672 3.93279C16.1845 4.05007 16.2504 4.20913 16.2504 4.37498C16.2504 4.54083 16.1845 4.69989 16.0672 4.81717L10.8836 9.99998L16.0672 15.1828Z"
+                      fill="#141414"
+                    />
+                  </svg>
+                </button>
+              )}
+            </div>
+          )}
+
+          <div className="c-modal__body">{children}</div>
+
+          {footer && <div className="c-modal__footer">{footer}</div>}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+Modal.displayName = 'Modal';
+
+export type { ModalProps };
+
+export default Modal;