@shohojdhara/atomix 0.1.16 → 0.1.17

package/src/components/Hero/scripts/index.ts

@@ -1,145 +0,0 @@
-import { HERO } from '../../../lib/constants/components';
-
-/**
- * HeroOptions interface for the vanilla JS implementation
- */
-export interface HeroOptions {
-  backgroundImage?: string;
-  overlay?: boolean;
-  overlayOpacity?: number;
-  fullHeight?: boolean;
-  centered?: boolean;
-  className?: string;
-}
-
-/**
- * HeroInstance interface
- */
-export interface HeroInstance {
-  init(): void;
-  destroy(): void;
-}
-
-/**
- * Default options for the Hero component
- */
-const DEFAULT_OPTIONS: HeroOptions = {
-  overlay: true,
-  overlayOpacity: 0.5,
-  fullHeight: false,
-  centered: false
-};
-
-/**
- * Hero Class - Vanilla JS implementation
- */
-export class Hero implements HeroInstance {
-  private element: HTMLElement;
-  private options: HeroOptions;
-
-  /**
-   * Constructor
-   * @param element - DOM element or selector
-   * @param options - Configuration options
-   */
-  constructor(element: string | HTMLElement, options: HeroOptions = {}) {
-    // Get element reference
-    this.element = typeof element === 'string'
-      ? document.querySelector(element) as HTMLElement
-      : element;
-    
-    if (!this.element) {
-      throw new Error('Hero: Element not found');
-    }
-    
-    // Merge default options with provided options
-    this.options = { ...DEFAULT_OPTIONS, ...options };
-    
-    // Initialize the component
-    this.init();
-  }
-
-  /**
-   * Initialize the hero component
-   */
-  public init(): void {
-    // Apply classes and styles based on options
-    if (this.options.fullHeight) {
-      this.element.classList.add('c-hero--full-height');
-    }
-    
-    if (this.options.centered) {
-      this.element.classList.add('c-hero--centered');
-    }
-    
-    if (this.options.className) {
-      this.element.classList.add(this.options.className);
-    }
-    
-    if (this.options.backgroundImage) {
-      this.element.style.backgroundImage = `url(${this.options.backgroundImage})`;
-    }
-    
-    // Set up overlay if needed
-    if (this.options.overlay) {
-      const overlay = document.createElement('div');
-      overlay.className = 'c-hero__overlay';
-      
-      if (this.options.overlayOpacity !== undefined) {
-        overlay.style.opacity = this.options.overlayOpacity.toString();
-      }
-      
-      this.element.appendChild(overlay);
-    }
-  }
-
-  /**
-   * Destroy the hero component
-   */
-  public destroy(): void {
-    // Remove added classes
-    this.element.classList.remove('c-hero--full-height');
-    this.element.classList.remove('c-hero--centered');
-    
-    if (this.options.className) {
-      this.element.classList.remove(this.options.className);
-    }
-    
-    // Remove background image
-    if (this.options.backgroundImage) {
-      this.element.style.backgroundImage = '';
-    }
-    
-    // Remove overlay
-    const overlay = this.element.querySelector('.c-hero__overlay');
-    if (overlay) {
-      this.element.removeChild(overlay);
-    }
-  }
-
-  /**
-   * Initialize all hero components in the document
-   */
-  public static initializeAll(selector = '[data-component="hero"]'): Hero[] {
-    const elements = document.querySelectorAll(selector);
-    return Array.from(elements).map(element => {
-      return new Hero(element as HTMLElement);
-    });
-  }
-}
-
-/**
- * Initialize all hero components in the document
- */
-export function initHeroes(): void {
-  Hero.initializeAll();
-}
-
-// Automatically initialize heroes when the DOM is ready
-if (typeof document !== 'undefined') {
-  if (document.readyState === 'loading') {
-    document.addEventListener('DOMContentLoaded', initHeroes);
-  } else {
-    initHeroes();
-  }
-} 

package/src/components/Icon/Icon.tsx

@@ -1,89 +0,0 @@
-import React from 'react';
-import * as PhosphorIcons from 'phosphor-react';
-
-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'>;
-
-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
-   */
-  alt?: string;
-}
-
-// Map string sizes to pixel values
-const sizeMap: Record<IconSize, number> = {
-  xs: 16,
-  sm: 20,
-  md: 24,
-  lg: 32,
-  xl: 40
-};
-
-/**
- * Icon component that displays a Phosphor icon
- */
-export const Icon: React.FC<IconProps> = ({
-  name,
-  size = 'md',
-  weight = 'regular',
-  color,
-  className = '',
-  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}
-      />
-    </span>
-  );
-};
-
-Icon.displayName = 'Icon';
-
-export default Icon;

package/src/components/Icon/index.ts

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

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

@@ -1,125 +0,0 @@
-import React from 'react';
-import type { Meta, StoryObj } from '@storybook/react';
-import { List } from './List';
-import { ListGroup } from './ListGroup';
-
-const meta = {
-  title: 'Components/List',
-  component: List,
-  parameters: {
-    layout: 'centered',
-  },
-  tags: ['autodocs'],
-  argTypes: {
-    variant: {
-      control: { type: 'select' },
-      options: ['default', 'dash', 'number', 'text'],
-      description: 'List style variant',
-    },
-    children: {
-      control: { type: 'text' },
-      description: 'List items content',
-    },
-    className: {
-      control: 'text',
-      description: 'Additional CSS class names',
-    },
-  },
-} satisfies Meta<typeof List>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-// Basic list items for reuse
-const ITEMS = ['item 1', 'item 2', 'item 3'];
-
-const sectionStyle = { marginBottom: '16px' };
-const titleStyle = { fontWeight: 'normal', marginBottom: '8px' };
-
-const ListItem = ({ children }: { children: React.ReactNode }) => <span>{children}</span>;
-const ListItems = ({ variant }: { variant: string }) => (
-  <>
-    {ITEMS.map((item, index) => (
-      <ListItem key={index}>
-        {variant === 'number' ? `${index + 1}. ${item}` : item}
-      </ListItem>
-    ))}
-  </>
-);
-
-const createListSection = (title: string, variant: string) => (
-  <div style={sectionStyle}>
-    <h3 style={titleStyle}>{title}</h3>
-    <List variant={variant as any}>
-      <ListItems variant={variant} />
-    </List>
-  </div>
-);
-
-// Basic List example
-export const Basic: Story = {
-  args: {
-    children: ITEMS,
-  },
-};
-
-// List Variants Showcase
-export const VariantsShowcase: Story = {
-  render: () => {
-    return (
-      <div className="u-d-flex u-flex-column u-gap-8">
-        {['Default', 'Dash', 'Number', 'Text'].map((title, index) => {
-          const variant = index === 0 ? 'default' : title.toLowerCase();
-          return createListSection(`${title} List`, variant);
-        })}
-      </div>
-    );
-  },
-};
-
-// ListGroup Showcase
-export const ListGroupShowcase: Story = {
-  render: () => {
-    const listGroupConfig = [
-      { title: 'Standard', compact: false, divided: false },
-      { title: 'Compact', compact: true, divided: false },
-      { title: 'Divided', compact: false, divided: true },
-    ];
-
-    return (
-      <div className="u-d-flex u-flex-column u-gap-8">
-        <div>
-          <h3 style={titleStyle}>Mixed Variants ListGroup</h3>
-          <ListGroup>
-            <List variant="dash">
-              <ListItems variant="dash" />
-            </List>
-            <List variant="number">
-              <ListItems variant="number" />
-            </List>
-            <List variant="text">
-              <ListItems variant="text" />
-            </List>
-          </ListGroup>
-        </div>
-
-        {listGroupConfig.map(({ title, compact, divided }) => (
-          <div key={title}>
-            <h3 style={titleStyle}>{title} ListGroup</h3>
-            <ListGroup>
-              {ITEMS.map((section, idx) => (
-                <List key={idx}>
-                  {[1, 2].map(item => (
-                    <ListItem key={item}>
-                      {`${section.charAt(0).toUpperCase() + section.slice(1)} - item ${item}`}
-                    </ListItem>
-                  ))}
-                </List>
-              ))}
-            </ListGroup>
-          </div>
-        ))}
-      </div>
-    );
-  },
-};

package/src/components/List/List.tsx

@@ -1,39 +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,160 +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) => {
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    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.'
-      }
-    }
-  }
-};