@shohojdhara/atomix 0.4.0 → 0.4.1

package/src/components/Form/Select.tsx

@@ -1,15 +1,20 @@
-import React, { useRef, useEffect, useState, memo } from 'react';
-import { SelectProps } from '../../lib/types/components';
+import React, { useRef, useEffect, useState, memo, useCallback } from 'react';
+import { SelectProps, SelectOption as SelectOptionType } from '../../lib/types/components';
 import { useSelect } from '../../lib/composables';
 import { SELECT } from '../../lib/constants/components';
 import { AtomixGlass } from '../AtomixGlass/AtomixGlass';
+import { SelectContext, SelectOption } from './SelectOption';
+
+export type SelectComponent = React.FC<SelectProps> & {
+  Option: typeof SelectOption;
+};
 
 /**
  * Select - A component for dropdown selection
  */
-export const Select: React.FC<SelectProps> = memo(
+export const Select: SelectComponent = memo(
   ({
-    options = [],
+    options,
     value,
     onChange,
     onBlur,
@@ -28,7 +33,8 @@ export const Select: React.FC<SelectProps> = memo(
     'aria-label': ariaLabel,
     'aria-describedby': ariaDescribedBy,
     glass,
-  }) => {
+    children,
+  }: SelectProps) => {
     const { generateSelectClass } = useSelect({
       size,
       disabled,
@@ -51,17 +57,35 @@ export const Select: React.FC<SelectProps> = memo(
     const bodyRef = useRef<HTMLDivElement>(null);
     const nativeSelectRef = useRef<HTMLSelectElement>(null);
 
+    // State for registered options (Compound mode)
+    const [registeredOptions, setRegisteredOptions] = useState<SelectOptionType[]>([]);
+
+    const registerOption = useCallback((option: SelectOptionType) => {
+      setRegisteredOptions((prev) => {
+        if (prev.some(o => o.value === option.value)) return prev;
+        return [...prev, option];
+      });
+    }, []);
+
+    const unregisterOption = useCallback((value: string) => {
+      setRegisteredOptions((prev) => prev.filter(o => o.value !== value));
+    }, []);
+
+    // Determine active options
+    const hasOptionsProp = options && options.length > 0;
+    const activeOptions = hasOptionsProp ? options : registeredOptions;
+
     // Update selected label when value changes
     useEffect(() => {
       if (value) {
-        const selectedOption = options.find(opt => opt.value === value);
+        const selectedOption = activeOptions.find(opt => opt.value === value);
         if (selectedOption) {
           setSelectedLabel(selectedOption.label);
         }
       } else {
         setSelectedLabel(placeholder);
       }
-    }, [value, options, placeholder]);
+    }, [value, activeOptions, placeholder]);
 
     // Handle click outside to close dropdown
     useEffect(() => {
@@ -93,99 +117,125 @@ export const Select: React.FC<SelectProps> = memo(
     };
 
     // Handle item selection
-    const handleItemClick = (option: { value: string; label: string }) => {
-      setSelectedLabel(option.label);
-      setIsOpen(false);
-      if (bodyRef.current) {
-        bodyRef.current.style.height = '0px';
-      }
+    const handleItemClick = useCallback(
+      (option: { value: string; label: string }) => {
+        setSelectedLabel(option.label);
+        setIsOpen(false);
+        if (bodyRef.current) {
+          bodyRef.current.style.height = '0px';
+        }
 
-      if (nativeSelectRef.current) {
-        nativeSelectRef.current.value = option.value;
-      }
+        if (nativeSelectRef.current) {
+          nativeSelectRef.current.value = option.value;
+        }
 
-      if (onChange) {
-        // Create a synthetic event
-        const event = {
-          target: {
-            name,
-            value: option.value,
-          },
-        } as React.ChangeEvent<HTMLSelectElement>;
-        onChange(event);
-      }
-    };
+        if (onChange) {
+          // Create a synthetic event
+          const event = {
+            target: {
+              name,
+              value: option.value,
+            },
+          } as React.ChangeEvent<HTMLSelectElement>;
+          onChange(event);
+        }
+      },
+      [onChange, name]
+    );
+
+    const onSelect = useCallback(
+      (val: string, label: string) => {
+        handleItemClick({ value: val, label });
+      },
+      [handleItemClick]
+    );
+
+    const contextValue = React.useMemo(
+      () => ({
+        registerOption,
+        unregisterOption,
+        selectedValue: value,
+        onSelect,
+      }),
+      [registerOption, unregisterOption, value, onSelect]
+    );
 
     const selectContent = (
-      <div
-        className={`${selectClass} ${isOpen ? SELECT.CLASSES.IS_OPEN : ''}`}
-        ref={dropdownRef}
-        style={style}
-        aria-expanded={isOpen}
-      >
-        {/* Native select for accessibility and form submission */}
-        <select
-          ref={nativeSelectRef}
-          value={value}
-          onChange={onChange}
-          onBlur={onBlur}
-          onFocus={onFocus}
-          disabled={disabled}
-          required={required}
-          id={id}
-          name={name}
-          multiple={multiple}
-          aria-label={ariaLabel}
-          aria-describedby={ariaDescribedBy}
-          aria-invalid={invalid}
-          style={{ display: 'none' }}
+      <SelectContext.Provider value={contextValue}>
+        <div
+          className={`${selectClass} ${isOpen ? SELECT.CLASSES.IS_OPEN : ''}`}
+          ref={dropdownRef}
+          style={style}
+          aria-expanded={isOpen}
         >
-          {placeholder && (
-            <option value="" disabled>
-              {placeholder}
-            </option>
-          )}
-          {options.map(option => (
-            <option key={option.value} value={option.value} disabled={option.disabled}>
-              {option.label}
-            </option>
-          ))}
-        </select>
-
-        {/* Custom Select UI */}
-        <div className={SELECT.CLASSES.SELECTED} onClick={handleToggle} aria-disabled={disabled}>
-          {selectedLabel}
-        </div>
+          {/* Native select for accessibility and form submission */}
+          <select
+            ref={nativeSelectRef}
+            value={value}
+            onChange={onChange}
+            onBlur={onBlur}
+            onFocus={onFocus}
+            disabled={disabled}
+            required={required}
+            id={id}
+            name={name}
+            multiple={multiple}
+            aria-label={ariaLabel}
+            aria-describedby={ariaDescribedBy}
+            aria-invalid={invalid}
+            style={{ display: 'none' }}
+          >
+            {placeholder && (
+              <option value="" disabled>
+                {placeholder}
+              </option>
+            )}
+            {activeOptions.map(option => (
+              <option key={option.value} value={option.value} disabled={option.disabled}>
+                {option.label}
+              </option>
+            ))}
+          </select>
+
+          {/* Custom Select UI */}
+          <div className={SELECT.CLASSES.SELECTED} onClick={handleToggle} aria-disabled={disabled}>
+            {selectedLabel}
+          </div>
+
+          <i className={`${SELECT.CLASSES.ICON_CARET} ${SELECT.CLASSES.TOGGLE_ICON}`} />
 
-        <i className={`${SELECT.CLASSES.ICON_CARET} ${SELECT.CLASSES.TOGGLE_ICON}`} />
-
-        <div className={SELECT.CLASSES.SELECT_BODY} ref={bodyRef} style={{ height: 0 }}>
-          <div className={SELECT.CLASSES.SELECT_PANEL} ref={panelRef}>
-            <ul className={SELECT.CLASSES.SELECT_ITEMS}>
-              {options.map((option, index) => (
-                <li
-                  key={option.value}
-                  className={SELECT.CLASSES.SELECT_ITEM}
-                  data-value={option.value}
-                  onClick={() => !option.disabled && handleItemClick(option)}
-                >
-                  <label htmlFor={`SelectItem${index}`} className="c-checkbox">
-                    <input
-                      type="checkbox"
-                      id={`SelectItem${index}`}
-                      className="c-checkbox__input c-select__item-input"
-                      checked={value === option.value}
-                      readOnly
-                      disabled={option.disabled}
-                    />
-                    <div className="c-select__item-label">{option.label}</div>
-                  </label>
-                </li>
-              ))}
-            </ul>
+          <div className={SELECT.CLASSES.SELECT_BODY} ref={bodyRef} style={{ height: 0 }}>
+            <div className={SELECT.CLASSES.SELECT_PANEL} ref={panelRef}>
+              <ul className={SELECT.CLASSES.SELECT_ITEMS}>
+                {hasOptionsProp ? (
+                  options.map((option, index) => (
+                    <li
+                      key={option.value}
+                      className={SELECT.CLASSES.SELECT_ITEM}
+                      data-value={option.value}
+                      onClick={() => !option.disabled && handleItemClick(option)}
+                    >
+                      <label htmlFor={`SelectItem${index}`} className="c-checkbox">
+                        <input
+                          type="checkbox"
+                          id={`SelectItem${index}`}
+                          className="c-checkbox__input c-select__item-input"
+                          checked={value === option.value}
+                          readOnly
+                          disabled={option.disabled}
+                        />
+                        <div className="c-select__item-label">{option.label}</div>
+                      </label>
+                    </li>
+                  ))
+                ) : (
+                  children
+                )}
+              </ul>
+            </div>
           </div>
         </div>
-      </div>
+      </SelectContext.Provider>
     );
 
     if (glass) {
@@ -206,10 +256,11 @@ export const Select: React.FC<SelectProps> = memo(
 
     return selectContent;
   }
-);
+) as unknown as SelectComponent;
 
 export type { SelectProps };
 
 Select.displayName = 'Select';
+Select.Option = SelectOption;
 
 export default Select;

package/src/components/Form/SelectOption.tsx

@@ -0,0 +1,88 @@
+import React, { createContext, useContext, useEffect, memo, ReactNode } from 'react';
+import { SelectOption as SelectOptionType } from '../../lib/types/components';
+import { SELECT } from '../../lib/constants/components';
+
+// Context for managing options registration and selection
+export interface SelectContextType {
+  registerOption: (option: SelectOptionType) => void;
+  unregisterOption: (value: string) => void;
+  selectedValue?: string | string[];
+  onSelect: (value: string, label: string) => void;
+}
+
+export const SelectContext = createContext<SelectContextType | null>(null);
+
+export interface SelectOptionProps {
+  value: string;
+  children?: ReactNode;
+  disabled?: boolean;
+  className?: string;
+  style?: React.CSSProperties;
+}
+
+export const SelectOption: React.FC<SelectOptionProps> = memo(
+  ({ value, children, disabled = false, className = '', style }) => {
+    const context = useContext(SelectContext);
+
+    // We assume children is the label if it's a string, or we need a way to get label.
+    // For simplicity, we use children as label for registration if it's a string.
+    const label = typeof children === 'string' ? children : value;
+
+    useEffect(() => {
+      if (context) {
+        context.registerOption({ value, label, disabled });
+        return () => {
+          context.unregisterOption(value);
+        };
+      }
+      return undefined;
+    }, [context, value, label, disabled]);
+
+    if (!context) {
+      console.warn('SelectOption must be used within a Select component');
+      return null;
+    }
+
+    const { selectedValue, onSelect } = context;
+
+    const isSelected = Array.isArray(selectedValue)
+      ? selectedValue.includes(value)
+      : selectedValue === value;
+
+    const handleClick = (e: React.MouseEvent) => {
+      e.preventDefault();
+      e.stopPropagation();
+      if (!disabled) {
+        onSelect(value, label);
+      }
+    };
+
+    return (
+      <li
+        className={`${SELECT.CLASSES.SELECT_ITEM} ${className}`.trim()}
+        data-value={value}
+        onClick={handleClick}
+        style={style}
+        role="option"
+        aria-selected={isSelected}
+        aria-disabled={disabled}
+      >
+        <label className="c-checkbox" style={{ pointerEvents: 'none' }}>
+           <input
+             type="checkbox"
+             className="c-checkbox__input c-select__item-input"
+             checked={isSelected}
+             readOnly
+             disabled={disabled}
+             tabIndex={-1}
+           />
+           <div className="c-select__item-label">{children}</div>
+        </label>
+      </li>
+    );
+  }
+);
+
+SelectOption.displayName = 'SelectOption';
+
+export default SelectOption;

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',

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();
+    });
+  });
+});