@shohojdhara/atomix 0.3.15 → 0.4.1

package/src/components/Accordion/Accordion.tsx

@@ -1,123 +1,246 @@
-import React, { ReactNode, useId, memo } from 'react';
+import React, { ReactNode, useId, memo, forwardRef } from 'react';
 import { ACCORDION } from '../../lib/constants/components';
 import { useAccordion } from '../../lib/composables/useAccordion';
-import type { AccordionProps as AccordionPropsType, AtomixGlassProps } from '../../lib/types/components';
+import type {
+  AccordionProps as AccordionPropsType,
+  AtomixGlassProps,
+} from '../../lib/types/components';
 import { AtomixGlass } from '../AtomixGlass/AtomixGlass';
 
 export type AccordionProps = AccordionPropsType;
 
-export const Accordion: React.FC<AccordionProps> = memo(({
-  title,
-  children,
-  defaultOpen = false,
-  isOpen: controlledOpen,
-  onOpenChange,
-  onOpen,
-  onClose,
-  disabled = false,
-  iconPosition = 'right',
-  icon,
-  className = '',
-  style,
-  glass,
-}) => {
-  // Generate unique IDs for accessibility
-  const instanceId = useId();
-  const buttonId = `accordion-header-${instanceId}`;
-  const panelId = `accordion-panel-${instanceId}`;
-
-  // Use composable hook for logic/state
-  const {
-    state,
-    toggle,
-    updatePanelHeight,
-    panelRef,
-    contentRef,
-    generateClassNames,
-    generateHeaderClassNames,
-  } = useAccordion({
-    defaultOpen,
-    disabled,
-    iconPosition,
-    isOpen: controlledOpen,
-    onOpenChange,
-    onOpen,
-    onClose,
-  });
-
-  // Default icon
-  const defaultIcon = (
-    <i className="c-accordion__icon" aria-hidden="true">
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        width="24"
-        height="24"
-        viewBox="0 0 24 24"
-        fill="none"
-        stroke="currentColor"
-        strokeWidth="2"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        aria-hidden="true"
-        focusable="false"
-      >
-        <polyline points="6 9 12 15 18 9"></polyline>
-      </svg>
-    </i>
-  );
-
-  const accordionContent = (
-    <div
-      className={generateClassNames(className) + (glass ? ' c-accordion--glass' : '')}
-      style={style}
+// Default icon
+const DefaultIcon = () => (
+  <i className="c-accordion__icon" aria-hidden="true">
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+      focusable="false"
     >
+      <polyline points="6 9 12 15 18 9"></polyline>
+    </svg>
+  </i>
+);
+
+export interface AccordionHeaderProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'title'> {
+  title?: ReactNode;
+  icon?: ReactNode;
+  iconPosition?: 'left' | 'right';
+  isOpen?: boolean;
+}
+
+export const AccordionHeader = forwardRef<HTMLButtonElement, AccordionHeaderProps>(
+  (
+    { title, icon, iconPosition = 'right', isOpen, children, className = '', ...props },
+    ref
+  ) => {
+    // Determine icon to render. Explicit check for undefined to allow null/false to hide icon.
+    const iconElement = icon === undefined ? <DefaultIcon /> : icon;
+
+    return (
       <button
-        id={buttonId}
-        className={generateHeaderClassNames()}
-        onClick={toggle}
-        aria-expanded={state.isOpen}
-        aria-controls={panelId}
-        aria-disabled={disabled}
-        disabled={disabled}
+        ref={ref}
         type="button"
+        className={className} // Parent injects the class names
+        {...props}
       >
-        <span className="c-accordion__title">{title}</span>
-        {icon || defaultIcon}
+        {title && <span className="c-accordion__title">{title}</span>}
+        {children}
+        {iconElement}
       </button>
+    );
+  }
+);
+AccordionHeader.displayName = 'AccordionHeader';
+
+export interface AccordionBodyProps extends React.HTMLAttributes<HTMLDivElement> {
+  panelRef?: React.RefObject<HTMLDivElement>;
+  contentRef?: React.RefObject<HTMLDivElement>;
+}
+
+// Helper to merge refs
+function mergeRefs<T = any>(...refs: (React.MutableRefObject<T> | React.LegacyRef<T> | undefined | null)[]) {
+  return (node: T) => {
+    refs.forEach((ref) => {
+      if (typeof ref === 'function') {
+        ref(node);
+      } else if (ref != null) {
+        (ref as React.MutableRefObject<T | null>).current = node;
+      }
+    });
+  };
+}
+
+export const AccordionBody = forwardRef<HTMLDivElement, AccordionBodyProps>(
+  ({ children, className = '', panelRef, contentRef, ...props }, ref) => {
+    const mergedPanelRef = React.useMemo(() => mergeRefs(ref, panelRef), [ref, panelRef]);
+
+    return (
       <div
-        id={panelId}
-        className={ACCORDION.SELECTORS.PANEL.replace('.', '')}
-        ref={panelRef as React.RefObject<HTMLDivElement>}
+        ref={mergedPanelRef}
+        className={className} // Parent injects class names
         role="region"
-        aria-labelledby={buttonId}
+        {...props}
       >
         <div
           className={ACCORDION.SELECTORS.BODY.replace('.', '')}
-          ref={contentRef as React.RefObject<HTMLDivElement>}
+          ref={contentRef}
         >
           {children}
         </div>
       </div>
-    </div>
-  );
+    );
+  }
+);
+AccordionBody.displayName = 'AccordionBody';
+
+type AccordionComponent = React.FC<AccordionProps> & {
+  Header: typeof AccordionHeader;
+  Body: typeof AccordionBody;
+};
+
+const AccordionImpl = memo(
+  ({
+    title,
+    children,
+    defaultOpen = false,
+    isOpen: controlledOpen,
+    onOpenChange,
+    onOpen,
+    onClose,
+    disabled = false,
+    iconPosition = 'right',
+    icon,
+    className = '',
+    style,
+    glass,
+  }: AccordionProps) => {
+    // Generate unique IDs for accessibility
+    const instanceId = useId();
+    const buttonId = `accordion-header-${instanceId}`;
+    const panelId = `accordion-panel-${instanceId}`;
+
+    // Use composable hook for logic/state
+    const {
+      state,
+      toggle,
+      updatePanelHeight,
+      panelRef,
+      contentRef,
+      generateClassNames,
+      generateHeaderClassNames,
+    } = useAccordion({
+      defaultOpen,
+      disabled,
+      iconPosition,
+      isOpen: controlledOpen,
+      onOpenChange,
+      onOpen,
+      onClose,
+    });
+
+    const headerClassNames = generateHeaderClassNames();
+    const panelClassNames = ACCORDION.SELECTORS.PANEL.replace('.', '');
+
+    // Check for compound usage
+    const hasCompoundComponents = React.Children.toArray(children).some((child) =>
+      React.isValidElement(child) &&
+      ['AccordionHeader', 'AccordionBody'].includes((child.type as any).displayName)
+    );
+
+    const content = (
+      <div
+        className={generateClassNames(className) + (glass ? ' c-accordion--glass' : '')}
+        style={style}
+      >
+        {hasCompoundComponents ? (
+          React.Children.map(children, child => {
+            if (React.isValidElement(child)) {
+              if ((child.type as any).displayName === 'AccordionHeader') {
+                return React.cloneElement(child, {
+                  id: buttonId,
+                  className: `${headerClassNames} ${(child.props as any).className || ''}`.trim(),
+                  onClick: (e: React.MouseEvent) => {
+                    toggle();
+                    (child.props as any).onClick?.(e);
+                  },
+                  'aria-expanded': state.isOpen,
+                  'aria-controls': panelId,
+                  'aria-disabled': disabled,
+                  disabled: disabled,
+                  iconPosition: (child.props as any).iconPosition || iconPosition,
+                } as any);
+              }
+              if ((child.type as any).displayName === 'AccordionBody') {
+                return React.cloneElement(child, {
+                  id: panelId,
+                  className: `${panelClassNames} ${(child.props as any).className || ''}`.trim(),
+                  'aria-labelledby': buttonId,
+                  panelRef: panelRef,
+                  contentRef: contentRef,
+                } as any);
+              }
+            }
+            return child;
+          })
+        ) : (
+          <>
+            <AccordionHeader
+              id={buttonId}
+              className={headerClassNames}
+              onClick={toggle}
+              aria-expanded={state.isOpen}
+              aria-controls={panelId}
+              aria-disabled={disabled}
+              disabled={disabled}
+              title={title}
+              icon={icon}
+              iconPosition={iconPosition}
+            />
+            <AccordionBody
+              id={panelId}
+              className={panelClassNames}
+              aria-labelledby={buttonId}
+              panelRef={panelRef as React.RefObject<HTMLDivElement>}
+              contentRef={contentRef as React.RefObject<HTMLDivElement>}
+            >
+              {children}
+            </AccordionBody>
+          </>
+        )}
+      </div>
+    );
+
+    if (glass) {
+      // Default glass settings for accordions
+      const defaultGlassProps = {
+        displacementScale: 20,
+        elasticity: 0,
+      };
 
-  if (glass) {
-    // Default glass settings for accordions
-    const defaultGlassProps = {
-      displacementScale: 20,
-      elasticity: 0,
-    };
+      const glassProps = glass === true ? defaultGlassProps : { ...defaultGlassProps, ...glass };
 
-    const glassProps = glass === true ? defaultGlassProps : { ...defaultGlassProps, ...glass };
+      return <AtomixGlass {...glassProps}>{content}</AtomixGlass>;
+    }
 
-    return <AtomixGlass {...glassProps}>{accordionContent}</AtomixGlass>;
+    return content;
   }
+);
 
-  return accordionContent;
-});
+AccordionImpl.displayName = 'Accordion';
 
-// Set display name for debugging
-Accordion.displayName = 'Accordion';
+// Attach subcomponents
+const AccordionWithSubcomponents = AccordionImpl as unknown as AccordionComponent;
+AccordionWithSubcomponents.Header = AccordionHeader;
+AccordionWithSubcomponents.Body = AccordionBody;
 
-// Export as default
-export default Accordion;
+export const Accordion = AccordionWithSubcomponents;
+export default Accordion as unknown as AccordionComponent;

package/src/components/Accordion/AccordionCompound.test.tsx

@@ -0,0 +1,70 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+import { describe, it, expect, vi } from 'vitest';
+import { Accordion } from './Accordion';
+import React from 'react';
+
+describe('Accordion Component', () => {
+  it('renders correctly with legacy props', () => {
+    render(
+      <Accordion title="Legacy Title" defaultOpen>
+        Legacy Content
+      </Accordion>
+    );
+
+    expect(screen.getByText('Legacy Title')).toBeInTheDocument();
+    expect(screen.getByText('Legacy Content')).toBeInTheDocument();
+  });
+
+  it('renders correctly with compound components', () => {
+    render(
+      <Accordion defaultOpen>
+        <Accordion.Header>
+          <span>Compound Header</span>
+        </Accordion.Header>
+        <Accordion.Body>
+          <p>Compound Body</p>
+        </Accordion.Body>
+      </Accordion>
+    );
+
+    expect(screen.getByText('Compound Header')).toBeInTheDocument();
+    expect(screen.getByText('Compound Body')).toBeInTheDocument();
+  });
+
+  it('toggles visibility in compound mode', () => {
+    render(
+      <Accordion>
+        <Accordion.Header>Header</Accordion.Header>
+        <Accordion.Body>Body</Accordion.Body>
+      </Accordion>
+    );
+
+    const button = screen.getByRole('button');
+    expect(button).toHaveAttribute('aria-expanded', 'false');
+
+    fireEvent.click(button);
+    expect(button).toHaveAttribute('aria-expanded', 'true');
+  });
+
+  it('injects props into compound components', () => {
+    // We want to verify that aria-controls and aria-labelledby are correctly linked
+    // even in compound mode (since the parent injects IDs)
+    render(
+      <Accordion>
+        <Accordion.Header>Header</Accordion.Header>
+        <Accordion.Body>Body</Accordion.Body>
+      </Accordion>
+    );
+
+    const button = screen.getByRole('button');
+    const region = screen.getByRole('region');
+
+    const controlsId = button.getAttribute('aria-controls');
+    const labelledById = region.getAttribute('aria-labelledby');
+    const buttonId = button.getAttribute('id');
+    const regionId = region.getAttribute('id');
+
+    expect(controlsId).toBe(regionId);
+    expect(labelledById).toBe(buttonId);
+  });
+});

package/src/components/AtomixGlass/AtomixGlass.test.tsx

@@ -10,7 +10,7 @@ vi.mock('./shader-utils', () => ({
     updateShader() {
       return 'data:image/png;base64,mockBase64String';
     }
-    destroy() { }
+    destroy() {}
   },
   fragmentShaders: {
     liquidGlass: vi.fn(),

package/src/components/AtomixGlass/GlassFilter.tsx

@@ -35,12 +35,7 @@ const GlassFilterComponent: React.FC<GlassFilterProps> = ({
     aria-hidden="true"
   >
     <defs>
-      <radialGradient
-        id={`${id}-edge-mask`}
-        cx="50%"
-        cy="50%"
-        r="50%"
-      >
+      <radialGradient id={`${id}-edge-mask`} cx="50%" cy="50%" r="50%">
         <stop offset="0%" stopColor="black" stopOpacity="0" />
         <stop
           offset={`${Math.max(30, 80 - aberrationIntensity * 2)}%`}
@@ -49,14 +44,7 @@ const GlassFilterComponent: React.FC<GlassFilterProps> = ({
         />
         <stop offset="100%" stopColor="white" stopOpacity="1" />
       </radialGradient>
-      <filter
-        id={id}
-        x="-35%"
-        y="-35%"
-        width="170%"
-        height="170%"
-        colorInterpolationFilters="sRGB"
-      >
+      <filter id={id} x="-35%" y="-35%" width="170%" height="170%" colorInterpolationFilters="sRGB">
         <feImage
           id={`${id}-image`}
           x="0"
@@ -64,7 +52,13 @@ const GlassFilterComponent: React.FC<GlassFilterProps> = ({
           width="100%"
           height="100%"
           result="DISPLACEMENT_MAP"
-          href={getDisplacementMap(mode, displacementMap, polarDisplacementMap, prominentDisplacementMap, shaderMapUrl)}
+          href={getDisplacementMap(
+            mode,
+            displacementMap,
+            polarDisplacementMap,
+            prominentDisplacementMap,
+            shaderMapUrl
+          )}
           preserveAspectRatio="xMidYMid slice"
         />
 
@@ -178,4 +172,3 @@ export const GlassFilter = memo(GlassFilterComponent, (prevProps, nextProps) =>
     prevProps.blurAmount === nextProps.blurAmount
   );
 });
-

package/src/components/AtomixGlass/glass-utils.ts

@@ -45,7 +45,9 @@ export const calculateMouseInfluence = (mouseOffset: MousePosition): number => {
     return 0;
   }
   // Bounded calculation — keeps the glass effect subtle and stable
-  const influence = Math.sqrt(mouseOffset.x * mouseOffset.x + mouseOffset.y * mouseOffset.y) / CONSTANTS.MOUSE_INFLUENCE_DIVISOR;
+  const influence =
+    Math.sqrt(mouseOffset.x * mouseOffset.x + mouseOffset.y * mouseOffset.y) /
+    CONSTANTS.MOUSE_INFLUENCE_DIVISOR;
   return Math.min(0.8, influence); // Tighter cap to prevent blur/filter blow-out
 };
 
@@ -59,7 +61,7 @@ export const calculateOverLightIntensity = (
   if (!mouseOffset || typeof mouseOffset.x !== 'number' || typeof mouseOffset.y !== 'number') {
     return baseIntensity;
   }
-  
+
   // Calculate additional intensity based on mouse position
   const mouseInfluence = calculateMouseInfluence(mouseOffset);
   return Math.min(1.0, baseIntensity * (1 + mouseInfluence * 0.3));
@@ -260,4 +262,3 @@ export const getDisplacementMap = (
       return displacementMap;
   }
 };
-