@shohojdhara/atomix 0.1.17 → 0.1.18

package/src/components/List/List.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import { ListProps } from '../../lib/types/components';
+import { LIST } from '../../lib/constants/components';
+
+export const List: React.FC<ListProps> = ({
+  children,
+  variant = 'default',
+  className = '',
+  ...props
+}) => {
+  // Generate CSS classes
+  const listClasses = [LIST.BASE_CLASS, variant !== 'default' && `c-list--${variant}`, className]
+    .filter(Boolean)
+    .join(' ');
+
+  // Determine the HTML element based on variant
+  const ListElement = ['number', 'text'].includes(variant) ? 'ol' : 'ul';
+
+  return (
+    <ListElement className={listClasses} {...props}>
+      {React.Children.map(children, child => {
+        if (React.isValidElement(child)) {
+          return <li className="c-list__item">{child}</li>;
+        }
+        return <li className="c-list__item">{child}</li>;
+      })}
+    </ListElement>
+  );
+};
+
+export type { ListProps };
+
+List.displayName = 'List';
+
+export default List;

package/src/components/List/ListGroup.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import classNames from 'classnames';
+import { ListGroupProps } from '../../lib/types/components';
+import { LIST_GROUP } from '../../lib/constants/components';
+import { List } from './List';
+
+export const ListGroup: React.FC<ListGroupProps> = ({
+  children,
+  className = '',
+  variant = 'default',
+}) => {
+  // Generate CSS classes
+  const listGroupClasses = classNames(LIST_GROUP.BASE_CLASS, className);
+
+  // Get valid List children
+  const validLists = React.Children.toArray(children).filter(
+    child => React.isValidElement(child) && child.type === List
+  ) as React.ReactElement[];
+
+  return (
+    <div className={listGroupClasses}>
+      {validLists.map((child, index) => {
+        return React.cloneElement(child, {
+          key: index,
+          variant: (child.props as any).variant ?? variant,
+        });
+      })}
+    </div>
+  );
+};
+
+ListGroup.displayName = 'ListGroup';
+
+export default ListGroup;

package/src/components/List/index.ts

@@ -0,0 +1,2 @@
+export { List } from './List';
+export { ListGroup } from './ListGroup';

package/src/components/Messages/Messages.stories.tsx

@@ -0,0 +1,161 @@
+import React, { useState } from 'react';
+import { Meta, StoryObj } from '@storybook/react';
+import { Messages } from './Messages';
+import { MessageItem } from '../../lib/types/components';
+
+const meta: Meta<typeof Messages> = {
+  title: 'Components/Messages',
+  component: Messages,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component:
+          'Messages component for displaying chat conversations with support for text messages, images, and file attachments.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    messages: { control: 'object' },
+    width: { control: 'text' },
+    bodyHeight: { control: 'text' },
+    onSendMessage: { action: 'message sent' },
+    otherName: { control: 'text' },
+    otherAvatar: { control: 'text' },
+    selfAvatar: { control: 'text' },
+    placeholder: { control: 'text' },
+    disabled: { control: 'boolean' },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Messages>;
+
+export const Default: Story = {
+  args: {
+    width: '800px',
+    bodyHeight: '400px',
+    otherName: 'Meghan',
+    otherAvatar:
+      'https://images.unsplash.com/photo-1648074074225-16189e7ad8c9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1935&q=80',
+    selfAvatar:
+      'https://images.unsplash.com/photo-1633332755192-727a05c4013d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1780&q=80',
+    messages: [
+      {
+        id: '1',
+        text: "Hi, I hope you're having a good day.",
+        time: '12:12 AM',
+        isSelf: false,
+      },
+      {
+        id: '2',
+        text: "I'm writing to remind you of your appointment tomorrow at 10 am. Please confirm if you can make it or reschedule if needed.",
+        time: '12:13 AM',
+        isSelf: false,
+      },
+      {
+        id: '3',
+        image: 'https://picsum.photos/g/400/260',
+        time: '12:14 AM',
+        isSelf: false,
+      },
+      {
+        id: '4',
+        file: {
+          name: 'File ABCDE.pdf',
+          size: '1.2 MB',
+        },
+        time: '12:15 AM',
+        isSelf: false,
+      },
+      {
+        id: '5',
+        text: "Sure, I'll be there",
+        time: '12:18 AM',
+        isSelf: true,
+      },
+      {
+        id: '6',
+        file: {
+          name: 'Meeting Notes.pdf',
+          size: '2.4 MB',
+        },
+        time: '12:19 AM',
+        isSelf: true,
+      },
+      {
+        id: '7',
+        image: 'https://picsum.photos/400/260',
+        time: '12:20 AM',
+        isSelf: true,
+      },
+    ],
+  },
+};
+
+export const EmptyChat: Story = {
+  args: {
+    width: '800px',
+    bodyHeight: '400px',
+    otherName: 'Meghan',
+    otherAvatar:
+      'https://images.unsplash.com/photo-1648074074225-16189e7ad8c9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1935&q=80',
+    selfAvatar:
+      'https://images.unsplash.com/photo-1633332755192-727a05c4013d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1780&q=80',
+    messages: [],
+  },
+};
+
+export const DisabledChat: Story = {
+  args: {
+    ...Default.args,
+    disabled: true,
+  },
+};
+
+// Interactive example with state management
+export const Interactive: StoryObj<typeof Messages> = {
+  render: args => {
+    const [messages, setMessages] = useState<MessageItem[]>(args.messages || []);
+
+    const handleSendMessage = (text: string) => {
+      const newMessage: MessageItem = {
+        id: `msg-${Date.now()}`,
+        text,
+        time: new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }),
+        isSelf: true,
+      };
+
+      setMessages([...messages, newMessage]);
+    };
+
+    return <Messages {...args} messages={messages} onSendMessage={handleSendMessage} />;
+  },
+  args: {
+    width: '800px',
+    bodyHeight: '400px',
+    otherName: 'Meghan',
+    otherAvatar:
+      'https://images.unsplash.com/photo-1648074074225-16189e7ad8c9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1935&q=80',
+    selfAvatar:
+      'https://images.unsplash.com/photo-1633332755192-727a05c4013d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1780&q=80',
+    messages: [
+      {
+        id: '1',
+        text: 'Hi there! How can I help you today?',
+        time: '12:00 PM',
+        isSelf: false,
+      },
+    ],
+    placeholder: 'Type your message here...',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'An interactive example where you can send messages and see them appear in the chat.',
+      },
+    },
+  },
+};

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/Messages/scripts/bundle.ts

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

@@ -0,0 +1,132 @@
+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);
+  };
+};