@shohojdhara/atomix 0.4.0 → 0.4.2

package/src/components/Hero/Hero.stories.tsx

@@ -279,6 +279,43 @@ export const BasicUsage: Story = {
   },
 };
 
+/**
+ * Hero using Compound Component Pattern
+ */
+export const CompoundUsage: Story = {
+  render: (args) => (
+    <Hero {...args}>
+      <Hero.Content>
+        <Hero.Title level="h1">Compound Component Pattern</Hero.Title>
+        <Hero.Subtitle>Fully Customizable Structure</Hero.Subtitle>
+        <Hero.Text>
+          This example demonstrates the new Compound Component pattern, allowing full control over the internal structure of the Hero component.
+        </Hero.Text>
+        <Hero.Actions>
+          <Button variant="primary" className="u-mr-3">
+            Get Started
+          </Button>
+          <Button variant="outline">Learn More</Button>
+        </Hero.Actions>
+      </Hero.Content>
+    </Hero>
+  ),
+  args: {
+    fullViewportHeight: true,
+    alignment: 'center',
+    backgroundImageSrc: 'https://picsum.photos/id/1015/1920/1080',
+    title: '', // Ignored but kept for types
+    showOverlay: true,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Using the Compound Component pattern for maximum flexibility.',
+      },
+    },
+  },
+};
+
 export const WithImage: Story = {
   args: {
     title: 'Beautiful Interfaces',
@@ -396,7 +433,7 @@ export const WithCustomGlassEffect: Story = {
       blurAmount: -0.1,
       saturation: 130,
       aberrationIntensity: 0,
-      cornerRadius: 45,
+      borderRadius: 45,
       mode: 'standard',
       elasticity: 0.2,
       onClick: () => {
@@ -874,7 +911,7 @@ export const PremiumShowcase: Story = {
       blurAmount: 2,
       saturation: 150,
       aberrationIntensity: 0.5,
-      cornerRadius: 20,
+      borderRadius: 20,
       overLight: true,
       mode: 'standard',
     },

package/src/components/Hero/Hero.test.tsx

@@ -0,0 +1,142 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { describe, it, expect, vi } from 'vitest';
+import Hero from './Hero';
+
+// Mock AtomixGlass component
+vi.mock('../AtomixGlass/AtomixGlass', () => ({
+  AtomixGlass: ({ children, className }: any) => (
+    <div data-testid="atomix-glass" className={className}>
+      {children}
+    </div>
+  ),
+}));
+
+describe('Hero Component', () => {
+  describe('Monolithic Usage', () => {
+    it('renders title and subtitle correctly', () => {
+      render(<Hero title="Test Title" subtitle="Test Subtitle" />);
+
+      expect(screen.getByText('Test Title')).toBeInTheDocument();
+      expect(screen.getByText('Test Subtitle')).toBeInTheDocument();
+    });
+
+    it('renders text content correctly', () => {
+      render(<Hero title="Title" text="Test Description" />);
+
+      expect(screen.getByText('Test Description')).toBeInTheDocument();
+    });
+
+    it('renders background image correctly', () => {
+      const bgSrc = 'test-bg.jpg';
+      render(<Hero title="Title" backgroundImageSrc={bgSrc} />);
+
+      const bgImage = screen.getByAltText('Background');
+      expect(bgImage).toBeInTheDocument();
+      expect(bgImage).toHaveAttribute('src', bgSrc);
+    });
+
+    it('renders foreground image correctly', () => {
+      const imgSrc = 'test-img.jpg';
+      render(<Hero title="Title" imageSrc={imgSrc} imageAlt="Foreground Image" />);
+
+      const image = screen.getByAltText('Foreground Image');
+      expect(image).toBeInTheDocument();
+      expect(image).toHaveAttribute('src', imgSrc);
+    });
+
+    it('renders actions correctly', () => {
+      render(
+        <Hero
+          title="Title"
+          actions={<button>Click Me</button>}
+        />
+      );
+
+      expect(screen.getByText('Click Me')).toBeInTheDocument();
+    });
+
+    it('renders children correctly', () => {
+      render(
+        <Hero title="Title">
+          <div data-testid="child-content">Child Content</div>
+        </Hero>
+      );
+
+      expect(screen.getByTestId('child-content')).toBeInTheDocument();
+    });
+  });
+
+  describe('Compound Component Usage', () => {
+    it('renders Hero.Title, Hero.Subtitle, Hero.Text correctly', () => {
+      render(
+        <Hero title="">
+          <Hero.Content>
+            <Hero.Title>Compound Title</Hero.Title>
+            <Hero.Subtitle>Compound Subtitle</Hero.Subtitle>
+            <Hero.Text>Compound Text</Hero.Text>
+          </Hero.Content>
+        </Hero>
+      );
+
+      expect(screen.getByText('Compound Title')).toBeInTheDocument();
+      expect(screen.getByText('Compound Title').tagName).toBe('H1');
+      expect(screen.getByText('Compound Subtitle')).toBeInTheDocument();
+      expect(screen.getByText('Compound Text')).toBeInTheDocument();
+    });
+
+    it('renders Hero.Actions correctly', () => {
+      render(
+        <Hero title="">
+          <Hero.Content>
+            <Hero.Actions>
+              <button>Action</button>
+            </Hero.Actions>
+          </Hero.Content>
+        </Hero>
+      );
+
+      expect(screen.getByText('Action')).toBeInTheDocument();
+    });
+
+    it('renders Hero.Image correctly', () => {
+      render(
+        <Hero title="">
+          <Hero.Image src="compound-img.jpg" alt="Compound Image" />
+        </Hero>
+      );
+
+      const img = screen.getByAltText('Compound Image');
+      expect(img).toBeInTheDocument();
+      expect(img).toHaveAttribute('src', 'compound-img.jpg');
+    });
+
+    it('renders Hero.Background via backgroundElement prop', () => {
+      render(
+        <Hero
+          title="Title"
+          backgroundElement={<Hero.Background src="bg.jpg" data-testid="custom-bg" />}
+        />
+      );
+
+      const bg = screen.getByTestId('custom-bg');
+      expect(bg).toBeInTheDocument();
+      // Verify it renders the image inside
+      const img = screen.getByAltText('Background');
+      expect(img).toHaveAttribute('src', 'bg.jpg');
+    });
+
+    it('Hero.Content supports glass prop', () => {
+      render(
+        <Hero title="">
+          <Hero.Content glass>
+             Glass Content
+          </Hero.Content>
+        </Hero>
+      );
+
+      expect(screen.getByTestId('atomix-glass')).toBeInTheDocument();
+      expect(screen.getByText('Glass Content')).toBeInTheDocument();
+    });
+  });
+});

package/src/components/Hero/Hero.tsx

@@ -1,10 +1,139 @@
-import React, { CSSProperties, useEffect } from 'react';
-import { HeroProps, HeroAlignment } from '../../lib/types/components';
+import React, { CSSProperties, useEffect, ReactNode } from 'react';
+import { HeroProps, HeroAlignment, AtomixGlassProps } from '../../lib/types/components';
 import { useHero } from '../../lib/composables/useHero';
 import { HERO } from '../../lib/constants/components';
 import { AtomixGlass } from '../AtomixGlass/AtomixGlass';
 
-export const Hero: React.FC<HeroProps> = ({
+// Subcomponents
+export interface HeroTitleProps extends React.HTMLAttributes<HTMLHeadingElement> {
+  level?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'div';
+}
+
+const HeroTitle = ({ children, className, level = 'h1', ...props }: HeroTitleProps) => {
+  const Tag = level as any;
+  return (
+    <Tag className={`${HERO.SELECTORS.TITLE.replace('.', '')} ${className || ''}`.trim()} {...props}>
+      {children}
+    </Tag>
+  );
+};
+
+const HeroSubtitle = ({ children, className, ...props }: React.HTMLAttributes<HTMLParagraphElement>) => {
+  return (
+    <p className={`${HERO.SELECTORS.SUBTITLE.replace('.', '')} ${className || ''}`.trim()} {...props}>
+      {children}
+    </p>
+  );
+};
+
+const HeroText = ({ children, className, ...props }: React.HTMLAttributes<HTMLParagraphElement>) => {
+  return (
+    <p className={`${HERO.SELECTORS.TEXT.replace('.', '')} ${className || ''}`.trim()} {...props}>
+      {children}
+    </p>
+  );
+};
+
+const HeroActions = ({ children, className, ...props }: React.HTMLAttributes<HTMLDivElement>) => {
+  return (
+    <div className={`${HERO.SELECTORS.ACTIONS.replace('.', '')} ${className || ''}`.trim()} {...props}>
+      {children}
+    </div>
+  );
+};
+
+export interface HeroContentProps extends React.HTMLAttributes<HTMLDivElement> {
+  glass?: AtomixGlassProps | boolean;
+}
+
+const HeroContent = ({ children, className, style, glass, ...props }: HeroContentProps) => {
+  const contentClass = `${HERO.SELECTORS.CONTENT.replace('.', '')} ${className || ''}`.trim();
+
+  if (glass) {
+    const glassProps = typeof glass === 'boolean' ? {
+      displacementScale: 60,
+      blurAmount: 3,
+      saturation: 180,
+      aberrationIntensity: 0,
+      borderRadius: 8,
+      overLight: false,
+      mode: 'standard' as const,
+    } : glass;
+
+    return (
+      <div className={contentClass} style={style} {...props}>
+        <AtomixGlass {...glassProps}>
+          <div className="u-p-4">
+            {children}
+          </div>
+        </AtomixGlass>
+      </div>
+    );
+  }
+
+  return (
+    <div className={contentClass} style={style} {...props}>
+      {children}
+    </div>
+  );
+};
+
+export interface HeroImageProps extends React.ImgHTMLAttributes<HTMLImageElement> {
+  wrapperClassName?: string;
+  wrapperStyle?: React.CSSProperties;
+}
+
+const HeroImage = ({
+  src,
+  alt = '',
+  className,
+  wrapperClassName,
+  wrapperStyle,
+  ...props
+}: HeroImageProps) => {
+  return (
+    <div
+      className={`${HERO.SELECTORS.IMAGE_WRAPPER.replace('.', '')} ${wrapperClassName || ''}`.trim()}
+      style={wrapperStyle}
+    >
+      <img
+        src={src}
+        alt={alt}
+        className={`${HERO.SELECTORS.IMAGE.replace('.', '')} ${className || ''}`.trim()}
+        {...props}
+      />
+    </div>
+  );
+};
+
+const HeroBackground = ({ className, style, src, children, ...props }: React.HTMLAttributes<HTMLDivElement> & { src?: string }) => {
+  return (
+    <div
+      className={`${HERO.SELECTORS.BG.replace('.', '')} ${className || ''}`.trim()}
+      style={style}
+      {...props}
+    >
+      {src && (
+         <img
+            src={src}
+            alt="Background"
+            className={HERO.SELECTORS.BG_IMAGE.replace('.', '')}
+          />
+      )}
+      {children}
+    </div>
+  );
+};
+
+export const Hero: React.FC<HeroProps> & {
+  Title: typeof HeroTitle;
+  Subtitle: typeof HeroSubtitle;
+  Text: typeof HeroText;
+  Actions: typeof HeroActions;
+  Content: typeof HeroContent;
+  Image: typeof HeroImage;
+  Background: typeof HeroBackground;
+} = ({
   title,
   subtitle,
   text,
@@ -38,6 +167,7 @@ export const Hero: React.FC<HeroProps> = ({
   headingLevel = 'h1',
   reverseOnMobile = false,
   parts,
+  backgroundElement,
   ...rest
 }: HeroProps) => {
   // Define dynamic heading tag
@@ -259,7 +389,7 @@ export const Hero: React.FC<HeroProps> = ({
               blurAmount={3}
               saturation={180}
               aberrationIntensity={0}
-              cornerRadius={8}
+              borderRadius={8}
               overLight={false}
               mode="standard"
             >
@@ -421,6 +551,7 @@ export const Hero: React.FC<HeroProps> = ({
       data-parallax-intensity={parallax ? parallaxIntensity : undefined}
       {...rest}
     >
+      {backgroundElement}
       {renderBackground()}
       <div
         className={`${HERO.SELECTORS.CONTAINER.replace('.', '')} o-container ${parts?.container?.className || ''}`.trim()}
@@ -451,6 +582,14 @@ export const Hero: React.FC<HeroProps> = ({
   );
 };
 
+Hero.Title = HeroTitle;
+Hero.Subtitle = HeroSubtitle;
+Hero.Text = HeroText;
+Hero.Actions = HeroActions;
+Hero.Content = HeroContent;
+Hero.Image = HeroImage;
+Hero.Background = HeroBackground;
+
 export type { HeroProps };
 
 Hero.displayName = 'Hero';

package/src/components/List/List.test.tsx

@@ -0,0 +1,62 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { describe, it, expect } from 'vitest';
+import { List } from './List';
+
+describe('List Component', () => {
+  it('renders legacy items wrapped in li', () => {
+    render(
+      <List>
+        <span>Item 1</span>
+        <span>Item 2</span>
+      </List>
+    );
+
+    const listItems = screen.getAllByRole('listitem');
+    expect(listItems).toHaveLength(2);
+    expect(listItems[0]).toHaveTextContent('Item 1');
+    expect(listItems[0]).toHaveClass('c-list__item');
+  });
+
+  it('renders List.Item components directly', () => {
+    render(
+      <List>
+        <List.Item>Item 1</List.Item>
+        <List.Item className="custom-class">Item 2</List.Item>
+      </List>
+    );
+
+    const listItems = screen.getAllByRole('listitem');
+    expect(listItems).toHaveLength(2);
+    expect(listItems[0]).toHaveTextContent('Item 1');
+    expect(listItems[0]).toHaveClass('c-list__item');
+    expect(listItems[1]).toHaveTextContent('Item 2');
+    expect(listItems[1]).toHaveClass('c-list__item');
+    expect(listItems[1]).toHaveClass('custom-class');
+  });
+
+  it('renders mixed content correctly', () => {
+    render(
+      <List>
+        <List.Item>Compound Item</List.Item>
+        <span>Legacy Item</span>
+      </List>
+    );
+
+    const listItems = screen.getAllByRole('listitem');
+    expect(listItems).toHaveLength(2);
+    expect(listItems[0]).toHaveTextContent('Compound Item');
+    expect(listItems[1]).toHaveTextContent('Legacy Item');
+  });
+
+  it('renders ordered list when variant is number', () => {
+    render(
+      <List variant="number">
+        <List.Item>Item 1</List.Item>
+      </List>
+    );
+
+    const list = screen.getByRole('list');
+    expect(list.tagName).toBe('OL');
+  });
+});

package/src/components/List/List.tsx

@@ -1,9 +1,16 @@
 import React, { memo } from 'react';
 import { ListProps } from '../../lib/types/components';
 import { LIST } from '../../lib/constants/components';
+import { ListItem } from './ListItem';
 
-export const List: React.FC<ListProps> = memo(
-  ({ children, variant = 'default', className = '', style, ...props }) => {
+export type { ListProps };
+
+export type ListComponent = React.FC<ListProps> & {
+  Item: typeof ListItem;
+};
+
+export const List: ListComponent = memo(
+  ({ children, variant = 'default', className = '', style, ...props }: ListProps) => {
     // Generate CSS classes
     const listClasses = [LIST.BASE_CLASS, variant !== 'default' && `c-list--${variant}`, className]
       .filter(Boolean)
@@ -16,6 +23,11 @@ export const List: React.FC<ListProps> = memo(
       <ListElement className={listClasses} style={style} {...props}>
         {React.Children.map(children, child => {
           if (React.isValidElement(child)) {
+            // Check if child is a ListItem
+            if (child.type === ListItem) {
+              return child;
+            }
+            // Legacy behavior: wrap in li
             return <li className="c-list__item">{child}</li>;
           }
           return <li className="c-list__item">{child}</li>;
@@ -23,10 +35,9 @@ export const List: React.FC<ListProps> = memo(
       </ListElement>
     );
   }
-);
-
-export type { ListProps };
+) as unknown as ListComponent;
 
 List.displayName = 'List';
+List.Item = ListItem;
 
 export default List;

package/src/components/List/ListItem.tsx

@@ -0,0 +1,20 @@
+import React, { forwardRef } from 'react';
+import { LIST } from '../../lib/constants/components';
+
+export interface ListItemProps extends React.LiHTMLAttributes<HTMLLIElement> {
+  children?: React.ReactNode;
+}
+
+export const ListItem = forwardRef<HTMLLIElement, ListItemProps>(
+  ({ children, className = '', ...props }, ref) => {
+    return (
+      <li ref={ref} className={`${LIST.ITEM_CLASS} ${className}`.trim()} {...props}>
+        {children}
+      </li>
+    );
+  }
+);
+
+ListItem.displayName = 'ListItem';
+
+export default ListItem;

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

@@ -192,7 +192,7 @@ export const GlassCustom: Story = {
     glass: {
       displacementScale: 30,
       blurAmount: 0,
-      cornerRadius: 16,
+      borderRadius: 16,
       elasticity: 0,
     },
   },

package/src/components/Messages/Messages.tsx

@@ -35,7 +35,7 @@ export const Messages: React.FC<MessagesProps> = ({
   // Default glass settings for messages
   const defaultGlassProps = {
     displacementScale: 150,
-    cornerRadius: 12,
+    borderRadius: 12,
     elasticity: 0,
     aberrationIntensity: 2,
   };
@@ -185,7 +185,7 @@ export const Messages: React.FC<MessagesProps> = ({
         <AtomixGlass {...glassProps}>
           <div
             className="c-messages__glass-content"
-            style={{ borderRadius: glassProps.cornerRadius }}
+            style={{ borderRadius: glassProps.borderRadius }}
           >
             {messagesContent}
           </div>

package/src/components/Modal/Modal.stories.tsx

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { fn } from '@storybook/test';
 import { useState } from 'react';
 import type { AtomixGlassProps } from '../../lib/types/components';
-import Modal from './Modal';
+import { Modal } from './Modal';
 
 // Helper type for glass props in stories (without children requirement)
 type GlassProps = boolean | Omit<AtomixGlassProps, 'children'>;
@@ -31,6 +31,7 @@ Modal displays content in a focused overlay dialog. It provides a way to present
 - Header and footer sections
 - Accessible design
 - Responsive behavior
+- **Compound Component Pattern** (new)
 
 ## Accessibility
 
@@ -53,6 +54,20 @@ Modal displays content in a focused overlay dialog. It provides a way to present
 </Modal>
 \`\`\`
 
+### Compound Component Usage
+
+\`\`\`tsx
+<Modal isOpen={isOpen} onOpenChange={setIsOpen}>
+  <Modal.Header closeButton title="Custom Header" />
+  <Modal.Body>
+    <p>Flexible body content</p>
+  </Modal.Body>
+  <Modal.Footer>
+    <button>Action</button>
+  </Modal.Footer>
+</Modal>
+\`\`\`
+
 ### With Glass Effect
 
 \`\`\`tsx
@@ -284,6 +299,55 @@ export const WithGlassEffect: Story = {
   },
 };
 
+export const CompoundUsage: Story = {
+  render: args => {
+    const [isOpen, setIsOpen] = useState(false);
+
+    return (
+      <>
+        <div
+          className="c-btn c-btn--primary"
+          onClick={() => setIsOpen(true)}
+          style={{ cursor: 'pointer', padding: '8px 16px', display: 'inline-block' }}
+        >
+          Open Compound Modal
+        </div>
+
+        <Modal
+          {...args}
+          isOpen={isOpen}
+          onOpenChange={setIsOpen}
+        >
+          <Modal.Header
+            title="Compound Component Pattern"
+            subtitle="Fully customizable header"
+            closeButton
+          />
+          <Modal.Body>
+            <p>
+              This modal uses the Compound Component pattern (Modal.Header, Modal.Body, Modal.Footer).
+              This allows for greater flexibility in content arrangement.
+            </p>
+            <div style={{ marginTop: '1rem', padding: '1rem', background: '#f5f5f5', borderRadius: '4px' }}>
+              Custom content structure inside Body
+            </div>
+          </Modal.Body>
+          <Modal.Footer>
+             <button className="c-btn c-btn--outline-secondary" onClick={() => setIsOpen(false)}>Custom Footer Button</button>
+          </Modal.Footer>
+        </Modal>
+      </>
+    );
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Demonstrates the Compound Component usage pattern.',
+      },
+    },
+  },
+};
+
 /**
  * Small size modal variant.
  */
@@ -525,7 +589,7 @@ export const GlassModalCustom: Story = {
               blurAmount: 3,
               saturation: 200,
               aberrationIntensity: 2,
-              cornerRadius: 20,
+              borderRadius: 20,
               mode: 'polar',
             } as GlassProps
           }