@shohojdhara/atomix 0.1.16 → 0.1.18

package/src/components/Icon/Icon.tsx

@@ -5,34 +5,37 @@ export type IconSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 export type IconWeight = 'thin' | 'light' | 'regular' | 'bold' | 'fill' | 'duotone';
 
 // We need to filter out non-icon exports from the Phosphor package
-type PhosphorIconsType = Exclude<keyof typeof PhosphorIcons, 'Icon' | 'IconContext' | 'IconBase' | 'IconProps' | 'createIcon' | 'default' | 'SSR'>;
+type PhosphorIconsType = Exclude<
+  keyof typeof PhosphorIcons,
+  'Icon' | 'IconContext' | 'IconBase' | 'IconProps' | 'createIcon' | 'default' | 'SSR'
+>;
 
 export interface IconProps {
   /**
    * Icon name from Phosphor Icons
    */
   name: PhosphorIconsType;
-  
+
   /**
    * Icon size
    */
   size?: IconSize | number;
-  
+
   /**
    * Icon weight/style
    */
   weight?: IconWeight;
-  
+
   /**
    * Icon color
    */
   color?: string;
-  
+
   /**
    * Additional CSS class names
    */
   className?: string;
-  
+
   /**
    * Alt text for accessibility
    */
@@ -45,7 +48,7 @@ const sizeMap: Record<IconSize, number> = {
   sm: 20,
   md: 24,
   lg: 32,
-  xl: 40
+  xl: 40,
 };
 
 /**
@@ -57,33 +60,28 @@ export const Icon: React.FC<IconProps> = ({
   weight = 'regular',
   color,
   className = '',
-  alt
+  alt,
 }) => {
   // Get the icon component from Phosphor
   const IconComponent = PhosphorIcons[name] as React.FC<
     PhosphorIcons.IconProps & { ref?: React.Ref<SVGSVGElement> }
   >;
-  
+
   if (!IconComponent) {
     console.warn(`Icon "${name}" not found in Phosphor Icons`);
     return null;
   }
-  
+
   // Convert string size to pixel value if needed
   const pixelSize = typeof size === 'string' ? sizeMap[size as IconSize] || 24 : size;
-  
+
   return (
     <span className={`c-icon c-icon--${size} ${className}`} aria-hidden={!alt} title={alt}>
-      <IconComponent
-        size={pixelSize}
-        weight={weight}
-        color={color}
-        aria-label={alt}
-      />
+      <IconComponent size={pixelSize} weight={weight} color={color} aria-label={alt} />
     </span>
   );
 };
 
 Icon.displayName = 'Icon';
 
-export default Icon;
+export default Icon;

package/src/components/Icon/index.ts

@@ -1,2 +1,2 @@
 export { Icon, type IconProps, type IconSize, type IconWeight } from './Icon';
-export { default } from './Icon'; 
+export { default } from './Icon';

package/src/components/List/List.stories.tsx

@@ -40,9 +40,7 @@ const ListItem = ({ children }: { children: React.ReactNode }) => <span>{childre
 const ListItems = ({ variant }: { variant: string }) => (
   <>
     {ITEMS.map((item, index) => (
-      <ListItem key={index}>
-        {variant === 'number' ? `${index + 1}. ${item}` : item}
-      </ListItem>
+      <ListItem key={index}>{variant === 'number' ? `${index + 1}. ${item}` : item}</ListItem>
     ))}
   </>
 );

package/src/components/List/List.tsx

@@ -9,18 +9,16 @@ export const List: React.FC<ListProps> = ({
   ...props
 }) => {
   // Generate CSS classes
-  const listClasses = [
-    LIST.BASE_CLASS,
-    variant !== 'default' && `c-list--${variant}`,
-    className,
-  ].filter(Boolean).join(' ');
+  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) => {
+      {React.Children.map(children, child => {
         if (React.isValidElement(child)) {
           return <li className="c-list__item">{child}</li>;
         }
@@ -30,10 +28,8 @@ export const List: React.FC<ListProps> = ({
   );
 };
 
-
-
-export type { ListProps  };
+export type { ListProps };
 
 List.displayName = 'List';
 
-export default List;
+export default List;

package/src/components/List/ListGroup.tsx

@@ -14,7 +14,7 @@ export const ListGroup: React.FC<ListGroupProps> = ({
 
   // Get valid List children
   const validLists = React.Children.toArray(children).filter(
-    (child) => React.isValidElement(child) && child.type === List
+    child => React.isValidElement(child) && child.type === List
   ) as React.ReactElement[];
 
   return (

package/src/components/List/index.ts

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

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

@@ -10,9 +10,10 @@ const meta: Meta<typeof Messages> = {
     layout: 'centered',
     docs: {
       description: {
-        component: 'Messages component for displaying chat conversations with support for text messages, images, and file attachments.'
-      }
-    }
+        component:
+          'Messages component for displaying chat conversations with support for text messages, images, and file attachments.',
+      },
+    },
   },
   tags: ['autodocs'],
   argTypes: {
@@ -36,18 +37,20 @@ export const Default: Story = {
     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',
+    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.',
+        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.',
+        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,
       },
@@ -68,7 +71,7 @@ export const Default: Story = {
       },
       {
         id: '5',
-        text: 'Sure, I\'ll be there',
+        text: "Sure, I'll be there",
         time: '12:18 AM',
         isSelf: true,
       },
@@ -96,8 +99,10 @@ export const EmptyChat: Story = {
     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',
+    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: [],
   },
 };
@@ -111,10 +116,9 @@ export const DisabledChat: Story = {
 
 // Interactive example with state management
 export const Interactive: StoryObj<typeof Messages> = {
-  render: (args) => {
-    // eslint-disable-next-line react-hooks/rules-of-hooks
+  render: args => {
     const [messages, setMessages] = useState<MessageItem[]>(args.messages || []);
-    
+
     const handleSendMessage = (text: string) => {
       const newMessage: MessageItem = {
         id: `msg-${Date.now()}`,
@@ -122,24 +126,20 @@ export const Interactive: StoryObj<typeof Messages> = {
         time: new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }),
         isSelf: true,
       };
-      
+
       setMessages([...messages, newMessage]);
     };
-    
-    return (
-      <Messages
-        {...args}
-        messages={messages}
-        onSendMessage={handleSendMessage}
-      />
-    );
+
+    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',
+    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',
@@ -153,8 +153,9 @@ export const Interactive: StoryObj<typeof Messages> = {
   parameters: {
     docs: {
       description: {
-        story: 'An interactive example where you can send messages and see them appear in the chat.'
-      }
-    }
-  }
-}; 
+        story:
+          'An interactive example where you can send messages and see them appear in the chat.',
+      },
+    },
+  },
+};

package/src/components/Messages/Messages.tsx

@@ -21,19 +21,16 @@ export const Messages: React.FC<MessagesProps> = ({
   disabled = false,
   id,
 }) => {
-  const {
-    inputValue,
-    handleInputChange,
-    handleSubmit,
-    handleKeyDown
-  } = useMessages({ onSendMessage });
-  
+  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 
+    <div
       className={`${MESSAGES.CLASSES.BASE} ${disabled ? 'is-disabled' : ''} ${className}`}
       style={{ '--atomix-messages-width': width } as React.CSSProperties}
       id={messagesId}
@@ -41,17 +38,21 @@ export const Messages: React.FC<MessagesProps> = ({
       role="log"
       aria-live="polite"
     >
-      <div 
+      <div
         className={MESSAGES.CLASSES.BODY}
-        style={bodyHeight ? { '--atomix-messages-body-height': bodyHeight } as React.CSSProperties : undefined}
+        style={
+          bodyHeight
+            ? ({ '--atomix-messages-body-height': bodyHeight } as React.CSSProperties)
+            : undefined
+        }
       >
-        {messages.map((message) => (
-          <div 
-            key={message.id} 
+        {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 
+            <Avatar
               src={message.isSelf ? selfAvatar : otherAvatar}
               size="xl"
               circle
@@ -62,7 +63,7 @@ export const Messages: React.FC<MessagesProps> = ({
               {!message.isSelf && otherName && (
                 <div className={MESSAGES.CLASSES.NAME}>{otherName}</div>
               )}
-              
+
               {message.text && (
                 <div className={MESSAGES.CLASSES.TEXT}>
                   {message.text}
@@ -71,18 +72,18 @@ export const Messages: React.FC<MessagesProps> = ({
                   </span>
                 </div>
               )}
-              
+
               {message.image && (
-                <img 
-                  className={MESSAGES.CLASSES.IMAGE} 
-                  src={message.image} 
-                  alt="Message attachment" 
+                <img
+                  className={MESSAGES.CLASSES.IMAGE}
+                  src={message.image}
+                  alt="Message attachment"
                   loading="lazy"
                 />
               )}
-              
+
               {message.file && (
-                <div 
+                <div
                   className={MESSAGES.CLASSES.FILE}
                   aria-label={`File attachment: ${message.file.name}, size: ${message.file.size}`}
                 >
@@ -99,9 +100,9 @@ export const Messages: React.FC<MessagesProps> = ({
           </div>
         ))}
       </div>
-      
-      <form 
-        className={MESSAGES.CLASSES.FORM} 
+
+      <form
+        className={MESSAGES.CLASSES.FORM}
         onSubmit={handleSubmit}
         aria-label="Message input form"
       >
@@ -121,47 +122,51 @@ export const Messages: React.FC<MessagesProps> = ({
             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>
+            <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" 
+        <button
+          type="submit"
           className={MESSAGES.CLASSES.SUBMIT}
           aria-label="Send message"
           disabled={disabled}
         >
-          <Icon name="PaperPlaneTilt" aria-hidden="true" size={24}/>
+          <Icon name="PaperPlaneTilt" aria-hidden="true" size={24} />
         </button>
       </form>
     </div>
   );
 };
 
-export type { MessagesProps  };
+export type { MessagesProps };
 
 Messages.displayName = 'Messages';
 
-export default Messages;
+export default Messages;

package/src/components/Messages/index.ts

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

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

@@ -44,9 +44,4 @@ if (typeof window !== 'undefined') {
   });
 }
 
-export {
-  Messages,
-  type MessagesOptions,
-  type MessageItem,
-  MessagesInteractions
-}; 
+export { Messages, type MessagesOptions, type MessageItem, MessagesInteractions };

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

@@ -27,14 +27,10 @@ export const initializeAllMessages = (options: MessagesOptions = {}): Messages[]
  * @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;
-    
+export const addMessage = (messagesInstance: Messages | string, message: MessageItem): void => {
+  const instance =
+    typeof messagesInstance === 'string' ? new Messages(messagesInstance) : messagesInstance;
+
   instance.addMessage(message);
 };
 
@@ -43,10 +39,9 @@ export const addMessage = (
  * @param messagesInstance - Messages instance or selector
  */
 export const clearMessages = (messagesInstance: Messages | string): void => {
-  const instance = typeof messagesInstance === 'string'
-    ? new Messages(messagesInstance)
-    : messagesInstance;
-    
+  const instance =
+    typeof messagesInstance === 'string' ? new Messages(messagesInstance) : messagesInstance;
+
   instance.clearMessages();
 };
 
@@ -55,10 +50,9 @@ export const clearMessages = (messagesInstance: Messages | string): void => {
  * @param messagesInstance - Messages instance or selector
  */
 export const enableMessages = (messagesInstance: Messages | string): void => {
-  const instance = typeof messagesInstance === 'string'
-    ? new Messages(messagesInstance)
-    : messagesInstance;
-    
+  const instance =
+    typeof messagesInstance === 'string' ? new Messages(messagesInstance) : messagesInstance;
+
   instance.enable();
 };
 
@@ -67,10 +61,9 @@ export const enableMessages = (messagesInstance: Messages | string): void => {
  * @param messagesInstance - Messages instance or selector
  */
 export const disableMessages = (messagesInstance: Messages | string): void => {
-  const instance = typeof messagesInstance === 'string'
-    ? new Messages(messagesInstance)
-    : messagesInstance;
-    
+  const instance =
+    typeof messagesInstance === 'string' ? new Messages(messagesInstance) : messagesInstance;
+
   instance.disable();
 };
 
@@ -83,22 +76,23 @@ export const disableMessages = (messagesInstance: Messages | string): void => {
 export const onMessageSend = (
   messagesInstance: Messages | string,
   callback: (text: string) => void
-): () => void => {
-  const element = typeof messagesInstance === 'string'
-    ? document.querySelector(messagesInstance) as HTMLElement
-    : messagesInstance.$element;
-    
+): (() => 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);
@@ -114,24 +108,25 @@ export const onMessageSend = (
 export const onNewMessage = (
   messagesInstance: Messages | string,
   callback: (message: MessageItem) => void
-): () => void => {
-  const element = typeof messagesInstance === 'string'
-    ? document.querySelector(messagesInstance) as HTMLElement
-    : messagesInstance.$element;
-    
+): (() => 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);
   };
-}; 
+};