@shohojdhara/atomix 0.1.16 → 0.1.17

package/src/components/Messages/Messages.tsx

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

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

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

@@ -1,52 +0,0 @@
-import { Messages, MessagesOptions, MessageItem } from './index';
-import * as MessagesInteractions from './componentInteractions';
-
-// Create a type for the Messages namespace
-interface MessagesNamespace {
-  Messages: typeof Messages;
-  initializeMessages: typeof MessagesInteractions.initializeMessages;
-  initializeAllMessages: typeof MessagesInteractions.initializeAllMessages;
-  addMessage: typeof MessagesInteractions.addMessage;
-  clearMessages: typeof MessagesInteractions.clearMessages;
-  enableMessages: typeof MessagesInteractions.enableMessages;
-  disableMessages: typeof MessagesInteractions.disableMessages;
-  onMessageSend: typeof MessagesInteractions.onMessageSend;
-  onNewMessage: typeof MessagesInteractions.onNewMessage;
-}
-
-// Skip TypeScript declaration for window.Atomix to avoid linter issues
-// and just use runtime checks and casting
-
-// Initialize global namespace
-if (typeof window !== 'undefined') {
-  if (!(window as any).Atomix) {
-    (window as any).Atomix = {};
-  }
-
-  // Add Messages namespace
-  const messagesNamespace: MessagesNamespace = {
-    Messages,
-    initializeMessages: MessagesInteractions.initializeMessages,
-    initializeAllMessages: MessagesInteractions.initializeAllMessages,
-    addMessage: MessagesInteractions.addMessage,
-    clearMessages: MessagesInteractions.clearMessages,
-    enableMessages: MessagesInteractions.enableMessages,
-    disableMessages: MessagesInteractions.disableMessages,
-    onMessageSend: MessagesInteractions.onMessageSend,
-    onNewMessage: MessagesInteractions.onNewMessage,
-  };
-
-  (window as any).Atomix.Messages = messagesNamespace;
-
-  // Auto-initialize on DOMContentLoaded
-  document.addEventListener('DOMContentLoaded', () => {
-    MessagesInteractions.initializeAllMessages();
-  });
-}
-
-export {
-  Messages,
-  type MessagesOptions,
-  type MessageItem,
-  MessagesInteractions
-}; 

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

@@ -1,137 +0,0 @@
-import { Messages, MessagesOptions, MessageItem } from './index';
-
-/**
- * Initialize a Messages component on a specific element
- * @param selector - CSS selector or DOM element
- * @param options - Component options
- * @returns Messages instance
- */
-export const initializeMessages = (
-  selector: string | HTMLElement,
-  options: MessagesOptions = {}
-): Messages => {
-  return new Messages(selector, options);
-};
-
-/**
- * Initialize all Messages components on the page
- * @param options - Default options for all instances
- * @returns Array of Messages instances
- */
-export const initializeAllMessages = (options: MessagesOptions = {}): Messages[] => {
-  return Messages.initializeAll(options);
-};
-
-/**
- * Add a message to a Messages component
- * @param messagesInstance - Messages instance or selector
- * @param message - Message data
- */
-export const addMessage = (
-  messagesInstance: Messages | string,
-  message: MessageItem
-): void => {
-  const instance = typeof messagesInstance === 'string'
-    ? new Messages(messagesInstance)
-    : messagesInstance;
-    
-  instance.addMessage(message);
-};
-
-/**
- * Clear all messages from a Messages component
- * @param messagesInstance - Messages instance or selector
- */
-export const clearMessages = (messagesInstance: Messages | string): void => {
-  const instance = typeof messagesInstance === 'string'
-    ? new Messages(messagesInstance)
-    : messagesInstance;
-    
-  instance.clearMessages();
-};
-
-/**
- * Enable a Messages component
- * @param messagesInstance - Messages instance or selector
- */
-export const enableMessages = (messagesInstance: Messages | string): void => {
-  const instance = typeof messagesInstance === 'string'
-    ? new Messages(messagesInstance)
-    : messagesInstance;
-    
-  instance.enable();
-};
-
-/**
- * Disable a Messages component
- * @param messagesInstance - Messages instance or selector
- */
-export const disableMessages = (messagesInstance: Messages | string): void => {
-  const instance = typeof messagesInstance === 'string'
-    ? new Messages(messagesInstance)
-    : messagesInstance;
-    
-  instance.disable();
-};
-
-/**
- * Listen for message send events
- * @param messagesInstance - Messages instance or selector
- * @param callback - Callback function to execute when a message is sent
- * @returns Cleanup function
- */
-export const onMessageSend = (
-  messagesInstance: Messages | string,
-  callback: (text: string) => void
-): () => void => {
-  const element = typeof messagesInstance === 'string'
-    ? document.querySelector(messagesInstance) as HTMLElement
-    : messagesInstance.$element;
-    
-  if (!element) {
-    throw new Error('Messages element not found');
-  }
-  
-  const handler = (event: Event) => {
-    const customEvent = event as CustomEvent;
-    callback(customEvent.detail.text);
-  };
-  
-  element.addEventListener('messages:send', handler);
-  
-  // Return cleanup function
-  return () => {
-    element.removeEventListener('messages:send', handler);
-  };
-};
-
-/**
- * Listen for new message events
- * @param messagesInstance - Messages instance or selector
- * @param callback - Callback function to execute when a new message is added
- * @returns Cleanup function
- */
-export const onNewMessage = (
-  messagesInstance: Messages | string,
-  callback: (message: MessageItem) => void
-): () => void => {
-  const element = typeof messagesInstance === 'string'
-    ? document.querySelector(messagesInstance) as HTMLElement
-    : messagesInstance.$element;
-    
-  if (!element) {
-    throw new Error('Messages element not found');
-  }
-  
-  const handler = (event: Event) => {
-    const customEvent = event as CustomEvent;
-    callback(customEvent.detail.message);
-  };
-  
-  element.addEventListener('messages:new', handler);
-  
-  // Return cleanup function
-  return () => {
-    element.removeEventListener('messages:new', handler);
-  };
-};