@shohojdhara/atomix 0.1.30 → 0.2.1

package/src/components/Hero/Hero.tsx

@@ -0,0 +1,175 @@
+import React, { CSSProperties, useEffect } from 'react';
+import { HeroProps, HeroAlignment } from '../../lib/types/components';
+import { useHero } from '../../lib/composables/useHero';
+import { HERO } from '../../lib/constants/components';
+
+export const Hero: React.FC<HeroProps> = ({
+  title,
+  subtitle,
+  text,
+  imageSrc,
+  imageAlt = 'Hero image',
+  alignment = 'left',
+  backgroundImageSrc,
+  showOverlay = true,
+  fullViewportHeight = false,
+  actions,
+  imageColSize = 7,
+  contentColSize = 5,
+  contentWidth,
+  className = '',
+  parallax = false,
+  parallaxIntensity = 0.5,
+  videoBackground,
+  videoOptions = {
+    autoplay: true,
+    loop: true,
+    muted: true,
+  },
+}) => {
+  const {
+    generateHeroClassNames,
+    generateImageColClass,
+    generateContentColClass,
+    hasBackgroundImage,
+    hasForegroundImage,
+    useGridLayout,
+    heroRef,
+    videoRef,
+  } = useHero({
+    alignment,
+    imageColSize,
+    contentColSize,
+    imageSrc,
+    backgroundImageSrc,
+    showOverlay,
+    fullViewportHeight,
+    contentWidth,
+    parallax,
+    parallaxIntensity,
+    videoBackground,
+  });
+
+  // Create custom style for hero element with content width if provided
+  const heroStyle: React.CSSProperties | undefined = contentWidth
+    ? ({
+        '--atomix-hero-content-width': contentWidth,
+      } as React.CSSProperties)
+    : undefined;
+
+  const renderVideoBackground = () => {
+    if (!videoBackground) return null;
+
+    const { autoplay, loop, muted, posterUrl } = videoOptions;
+
+    return (
+      <video
+        ref={videoRef}
+        className="c-hero__video"
+        autoPlay={autoplay}
+        loop={loop}
+        muted={muted}
+        playsInline
+        poster={posterUrl}
+      >
+        <source src={videoBackground} type={`video/${videoBackground.split('.').pop() || 'mp4'}`} />
+        Your browser does not support the video tag.
+      </video>
+    );
+  };
+
+  const renderBackground = () => {
+    if (!hasBackgroundImage && !videoBackground) return null;
+
+    return (
+      <div className={HERO.SELECTORS.BG.replace('.', '')}>
+        {backgroundImageSrc && (
+          <img
+            src={backgroundImageSrc}
+            alt="Background"
+            className={HERO.SELECTORS.BG_IMAGE.replace('.', '')}
+          />
+        )}
+        {renderVideoBackground()}
+        {showOverlay && <div className={HERO.SELECTORS.OVERLAY.replace('.', '')}></div>}
+      </div>
+    );
+  };
+
+  const renderContent = () => (
+    <div className={HERO.SELECTORS.CONTENT.replace('.', '')}>
+      {subtitle && <p className={HERO.SELECTORS.SUBTITLE.replace('.', '')}>{subtitle}</p>}
+      <h1 className={HERO.SELECTORS.TITLE.replace('.', '')}>{title}</h1>
+      {text && <p className={HERO.SELECTORS.TEXT.replace('.', '')}>{text}</p>}
+      {actions && <div className={HERO.SELECTORS.ACTIONS.replace('.', '')}>{actions}</div>}
+    </div>
+  );
+
+  const renderForegroundImage = () => {
+    if (!hasForegroundImage) return null;
+
+    if (alignment === 'center') {
+      return (
+        <div className={HERO.SELECTORS.IMAGE_WRAPPER.replace('.', '')}>
+          <img src={imageSrc} alt={imageAlt} className={HERO.SELECTORS.IMAGE.replace('.', '')} />
+        </div>
+      );
+    }
+
+    return (
+      <div className={generateImageColClass()}>
+        <img src={imageSrc} alt={imageAlt} className={HERO.SELECTORS.IMAGE.replace('.', '')} />
+      </div>
+    );
+  };
+
+  const renderGridContent = () => {
+    // For left-aligned content, render content first then image
+    if (alignment === 'left') {
+      return (
+        <>
+          <div className={generateContentColClass()}>{renderContent()}</div>
+          {renderForegroundImage()}
+        </>
+      );
+    }
+
+    // For right-aligned or default, render image first then content
+    return (
+      <>
+        {renderForegroundImage()}
+        <div className={generateContentColClass()}>{renderContent()}</div>
+      </>
+    );
+  };
+
+  return (
+    <div
+      ref={heroRef}
+      className={generateHeroClassNames(className)}
+      style={heroStyle}
+      data-parallax={parallax ? 'true' : undefined}
+      data-parallax-intensity={parallax ? parallaxIntensity : undefined}
+    >
+      {renderBackground()}
+      <div className={`${HERO.SELECTORS.CONTAINER.replace('.', '')} o-container`}>
+        {useGridLayout ? (
+          <div className={`${HERO.SELECTORS.GRID.replace('.', '')} o-grid`}>
+            {renderGridContent()}
+          </div>
+        ) : (
+          <>
+            {renderContent()}
+            {renderForegroundImage()}
+          </>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export type { HeroProps };
+
+Hero.displayName = 'Hero';
+
+export default Hero;

package/src/components/Hero/index.ts

@@ -0,0 +1,6 @@
+import { Hero } from './Hero';
+import type { HeroProps } from './Hero';
+
+export { Hero };
+export type { HeroProps };
+export default Hero;

package/src/components/Icon/Icon.tsx

@@ -0,0 +1,87 @@
+import * as PhosphorIcons from '@phosphor-icons/react';
+import React from '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
+export 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

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

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

@@ -0,0 +1,122 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import React from 'react';
+import { List } from './List';
+import { ListGroup } from './ListGroup';
+
+const meta = {
+  title: 'Components/List',
+  component: List,
+  parameters: {
+    layout: 'centered',
+  },
+  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

@@ -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,35 @@
+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) => {
+        const childProps = child.props as any;
+        return React.cloneElement(child as React.ReactElement<any>, {
+          key: index,
+          variant: childProps?.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,160 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { useState } from 'react';
+import { MessageItem } from '../../lib/types/components';
+import { Messages } from './Messages';
+
+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.',
+      },
+    },
+  },
+  argTypes: {
+    messages: { control: 'object' },
+    width: { control: 'text' },
+    bodyHeight: { control: 'text' },
+
+    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.',
+      },
+    },
+  },
+};