@shohojdhara/atomix 0.1.27 → 0.1.28

package/src/components/List/List.tsx

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

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

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

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

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

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