@shohojdhara/atomix 0.1.30 → 0.2.1

package/src/components/Accordion/Accordion.tsx

@@ -0,0 +1,131 @@
+import React, { ReactNode, useId } from 'react';
+import { ACCORDION } from '../../lib/constants/components';
+import { useAccordion } from '../../lib/composables/useAccordion';
+import { BaseComponentProps, IconPosition } from '../../lib/types/components';
+
+/**
+ * Accordion component for showing/hiding content panels
+ */
+export interface AccordionProps extends BaseComponentProps {
+  /**
+   * Title of the accordion
+   */
+  title: string;
+
+  /**
+   * Content to be shown when accordion is expanded
+   */
+  children: ReactNode;
+
+  /**
+   * Whether the accordion is initially open
+   */
+  defaultOpen?: boolean;
+
+  /**
+   * Position of the icon (right or left)
+   */
+  iconPosition?: IconPosition;
+
+  /**
+   * Custom icon for the accordion
+   */
+  icon?: ReactNode;
+
+  /**
+   * Controlled open state (overrides defaultOpen)
+   */
+  isOpen?: boolean;
+
+  /**
+   * Callback when open state changes (for controlled mode)
+   */
+  onOpenChange?: (open: boolean) => void;
+}
+
+export const Accordion: React.FC<AccordionProps> = ({
+  title,
+  children,
+  defaultOpen = false,
+  isOpen: controlledOpen,
+  onOpenChange,
+  disabled = false,
+  iconPosition = 'right',
+  icon,
+  className = '',
+}) => {
+  // 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,
+  });
+
+  // Default icon
+  const defaultIcon = (
+    <i className="c-accordion__icon">
+      <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"
+      >
+        <polyline points="6 9 12 15 18 9"></polyline>
+      </svg>
+    </i>
+  );
+
+  return (
+    <div className={generateClassNames(className)}>
+      <button
+        id={buttonId}
+        className={generateHeaderClassNames()}
+        onClick={toggle}
+        aria-expanded={state.isOpen}
+        aria-controls={panelId}
+        disabled={disabled}
+        type="button"
+      >
+        <span className="c-accordion__title">{title}</span>
+        {icon || defaultIcon}
+      </button>
+      <div
+        id={panelId}
+        className={ACCORDION.SELECTORS.PANEL.replace('.', '')}
+        ref={panelRef}
+        role="region"
+        aria-labelledby={buttonId}
+      >
+        <div className={ACCORDION.SELECTORS.BODY.replace('.', '')} ref={contentRef}>
+          {children}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+// Set display name for debugging
+Accordion.displayName = 'Accordion';
+
+// Export as default
+export default Accordion;

package/src/components/Accordion/index.ts

@@ -0,0 +1,3 @@
+export { Accordion } from './Accordion';
+export { default } from './Accordion';
+export type { AccordionProps } from './Accordion';

package/src/components/AtomixLogo/AtomixLogo.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+
+export interface AtomixLogoProps extends React.SVGProps<SVGSVGElement> {
+  height?: number | string;
+  width?: number | string;
+  color?: string;
+}
+
+export const AtomixLogo: React.FC<AtomixLogoProps> = ({
+  height = 24,
+  width = 24,
+  color = 'currentColor',
+  ...props
+}) => {
+  return (
+    <svg
+      width={width}
+      height={height}
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"
+        fill={color}
+      />
+      <path
+        d="M12 6c-3.31 0-6 2.69-6 6s2.69 6 6 6 6-2.69 6-6-2.69-6-6-6zm0 10c-2.21 0-4-1.79-4-4s1.79-4 4-4 4 1.79 4 4-1.79 4-4 4z"
+        fill={color}
+      />
+    </svg>
+  );
+};
+
+export default AtomixLogo;

package/src/components/AtomixLogo/index.ts

@@ -0,0 +1,3 @@
+export { AtomixLogo } from './AtomixLogo';
+export type { AtomixLogoProps } from './AtomixLogo';
+export { default } from './AtomixLogo';

package/src/components/AtomixLogo.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+
+export interface AtomixLogoProps {
+  height?: number;
+  width?: number;
+  className?: string;
+}
+
+export const AtomixLogo: React.FC<AtomixLogoProps> = ({
+  height = 40,
+  width = 100,
+  className = '',
+}) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={width}
+      height={height}
+      viewBox="0 0 120 48"
+      className={className}
+    >
+      {/* Atom icon */}
+      <g transform="translate(0, 8) scale(0.06)">
+        <path
+          fill="currentColor"
+          d="M256 398.8c-11.8 5.1-23.4 9.7-34.9 13.5c16.7 33.8 31 35.7 34.9 35.7s18.1-1.9 34.9-35.7c-11.4-3.9-23.1-8.4-34.9-13.5zM446 256c33 45.2 44.3 90.9 23.6 128c-20.2 36.3-62.5 49.3-115.2 43.2c-22 52.1-55.6 84.8-98.4 84.8s-76.4-32.7-98.4-84.8c-52.7 6.1-95-6.8-115.2-43.2C21.7 346.9 33 301.2 66 256c-33-45.2-44.3-90.9-23.6-128c20.2-36.3 62.5-49.3 115.2-43.2C179.6 32.7 213.2 0 256 0s76.4 32.7 98.4 84.8c52.7-6.1 95 6.8 115.2 43.2c20.7 37.1 9.4 82.8-23.6 128zm-65.8 67.4c-1.7 14.2-3.9 28-6.7 41.2c31.8 1.4 38.6-8.7 40.2-11.7c2.3-4.2 7-17.9-11.9-48.1c-6.8 6.3-14 12.5-21.6 18.6zm-6.7-175.9c2.8 13.1 5 26.9 6.7 41.2c7.6 6.1 14.8 12.3 21.6 18.6c18.9-30.2 14.2-44 11.9-48.1c-1.6-2.9-8.4-13-40.2-11.7zM290.9 99.7C274.1 65.9 259.9 64 256 64s-18.1 1.9-34.9 35.7c11.4 3.9 23.1 8.4 34.9 13.5c11.8-5.1 23.4-9.7 34.9-13.5zm-159 88.9c1.7-14.3 3.9-28 6.7-41.2c-31.8-1.4-38.6 8.7-40.2 11.7c-2.3 4.2-7 17.9 11.9 48.1c6.8-6.3 14-12.5 21.6-18.6zM110.2 304.8C91.4 335 96 348.7 98.3 352.9c1.6 2.9 8.4 13 40.2 11.7c-2.8-13.1-5-26.9-6.7-41.2c-7.6-6.1-14.8-12.3-21.6-18.6zM336 256a80 80 0 1 0 -160 0 80 80 0 1 0 160 0zm-80-32a32 32 0 1 1 0 64 32 32 0 1 1 0-64z"
+        />
+      </g>
+
+      {/* Atomix text */}
+      <text x="32" y="32" fontSize="22" fontWeight="700" fill="currentColor">
+        Atomix
+      </text>
+    </svg>
+  );
+};
+
+AtomixLogo.displayName = 'AtomixLogo';
+
+export default AtomixLogo;

package/src/components/Avatar/Avatar.stories.tsx

@@ -0,0 +1,257 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Icon } from '../Icon';
+import { Avatar } from './Avatar';
+import { AvatarGroup } from './AvatarGroup';
+
+const meta = {
+  title: 'Components/Avatar',
+  component: Avatar,
+  parameters: {
+    layout: 'centered',
+  },
+  argTypes: {
+    src: {
+      control: 'text',
+      description: 'Avatar image source URL',
+    },
+    alt: {
+      control: 'text',
+      description: 'Alt text for the avatar image',
+    },
+    initials: {
+      control: 'text',
+      description: 'Initials to display when no image is available',
+    },
+    icon: {
+      control: { disable: true },
+      description: 'Icon to display when no image or initials are available',
+    },
+    size: {
+      control: { type: 'select' },
+      options: ['xs', 'sm', 'md', 'lg', 'xl'],
+      description: 'Size variant for the avatar',
+    },
+    circle: {
+      control: 'boolean',
+      description: 'Whether to make the avatar circular',
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Whether the avatar is disabled',
+    },
+  },
+} satisfies Meta<typeof Avatar>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// Basic Avatar
+export const Basic: Story = {
+  args: {
+    src: 'https://i.pravatar.cc/150?img=1',
+    alt: 'User Avatar',
+    size: 'md',
+    circle: false,
+  },
+};
+
+// Avatar Variants Showcase
+export const VariantsShowcase: Story = {
+  render: () => {
+    const sizeOptions = ['xs', 'sm', 'md', 'lg', 'xl'] as const;
+    const variantImages = {
+      square: 'https://i.pravatar.cc/150?img=2',
+      circle: 'https://i.pravatar.cc/150?img=3',
+      initials: null,
+      icon: null,
+      fallback: 'invalid-url.jpg',
+    };
+
+    return (
+      <div className="u-d-grid u-gap-6" style={{ gridTemplateColumns: 'auto 1fr 1fr 1fr 1fr 1fr' }}>
+        {/* Header Row */}
+        <div className="u-fw-bold">Type</div>
+        {sizeOptions.map(size => (
+          <div key={size} className="u-fw-bold u-text-center">
+            {size.toUpperCase()}
+          </div>
+        ))}
+
+        {/* Square Avatars */}
+        <div>Square</div>
+        {sizeOptions.map(size => (
+          <div key={size} className="u-d-flex u-justify-content-center">
+            <Avatar src={variantImages.square} size={size} />
+          </div>
+        ))}
+
+        {/* Circle Avatars */}
+        <div>Circle</div>
+        {sizeOptions.map(size => (
+          <div key={size} className="u-d-flex u-justify-content-center">
+            <Avatar src={variantImages.circle} size={size} circle={true} />
+          </div>
+        ))}
+
+        {/* Initials Avatars */}
+        <div>Initials</div>
+        {sizeOptions.map(size => (
+          <div key={size} className="u-d-flex u-justify-content-center">
+            <Avatar initials="JD" size={size} />
+          </div>
+        ))}
+
+        {/* Icon Avatars */}
+        <div>Icon</div>
+        {sizeOptions.map(size => (
+          <div key={size} className="u-d-flex u-justify-content-center">
+            <Avatar
+              icon={<Icon name="User" size={size === 'xs' ? 'xs' : size === 'sm' ? 'sm' : 'md'} />}
+              size={size}
+            />
+          </div>
+        ))}
+
+        {/* Fallback Avatars */}
+        <div>Fallback</div>
+        {sizeOptions.map(size => (
+          <div key={size} className="u-d-flex u-justify-content-center">
+            <Avatar src={variantImages.fallback} size={size} />
+          </div>
+        ))}
+
+        {/* Interactive Avatars */}
+        <div>Interactive</div>
+        {sizeOptions.map(size => (
+          <div key={size} className="u-d-flex u-justify-content-center">
+            <Avatar
+              src={`https://i.pravatar.cc/150?img=${size === 'xs' ? 4 : size === 'sm' ? 5 : size === 'md' ? 6 : size === 'lg' ? 7 : 8}`}
+              size={size}
+              circle={true}
+              onClick={() => alert(`${size.toUpperCase()} Avatar clicked!`)}
+            />
+          </div>
+        ))}
+
+        {/* Disabled Avatars */}
+        <div>Disabled</div>
+        {sizeOptions.map(size => (
+          <div key={size} className="u-d-flex u-justify-content-center">
+            <Avatar
+              src={`https://i.pravatar.cc/150?img=${size === 'xs' ? 9 : size === 'sm' ? 10 : size === 'md' ? 11 : size === 'lg' ? 12 : 13}`}
+              size={size}
+              circle={true}
+              disabled={true}
+              onClick={() => alert('This will not be triggered')}
+            />
+          </div>
+        ))}
+      </div>
+    );
+  },
+};
+
+// Avatar Group Showcase
+export const AvatarGroupShowcase: Story = {
+  render: () => {
+    const sizes = ['xs', 'sm', 'md', 'lg', 'xl'] as const;
+
+    return (
+      <div className="u-d-flex u-flex-column u-gap-8">
+        {/* First row: Standard and Stacked side by side */}
+        <div className="u-d-flex u-gap-12">
+          {/* Standard Avatar Groups */}
+          <div className="u-flex-grow-1">
+            <h3 className="u-mb-4 u-fw-normal">Standard Avatar Groups</h3>
+            <div className="u-d-flex u-flex-column u-gap-4">
+              {sizes.map(size => (
+                <div key={size} className="u-d-flex u-align-items-center u-gap-4">
+                  <div className="u-w-12">{size.toUpperCase()}</div>
+                  <AvatarGroup>
+                    <Avatar src={`https://i.pravatar.cc/150?img=${14}`} size={size} circle />
+                    <Avatar src={`https://i.pravatar.cc/150?img=${15}`} size={size} circle />
+                    <Avatar src={`https://i.pravatar.cc/150?img=${16}`} size={size} circle />
+                    <Avatar src={`https://i.pravatar.cc/150?img=${17}`} size={size} circle />
+                    <Avatar src={`https://i.pravatar.cc/150?img=${18}`} size={size} circle />
+                  </AvatarGroup>
+                </div>
+              ))}
+            </div>
+          </div>
+
+          {/* Stacked Avatar Groups */}
+          <div className="u-flex-grow-1">
+            <h3 className="u-mb-4 u-fw-normal">Stacked Avatar Groups</h3>
+            <div className="u-d-flex u-flex-column u-gap-4">
+              {sizes.map(size => (
+                <div key={size} className="u-d-flex u-align-items-center u-gap-4">
+                  <div className="u-w-12">{size.toUpperCase()}</div>
+                  <AvatarGroup stacked>
+                    <Avatar src={`https://i.pravatar.cc/150?img=${24}`} size={size} circle />
+                    <Avatar src={`https://i.pravatar.cc/150?img=${25}`} size={size} circle />
+                    <Avatar src={`https://i.pravatar.cc/150?img=${26}`} size={size} circle />
+                    <Avatar src={`https://i.pravatar.cc/150?img=${27}`} size={size} circle />
+                    <Avatar src={`https://i.pravatar.cc/150?img=${28}`} size={size} circle />
+                  </AvatarGroup>
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+
+        {/* Second row: Max and Stacked+Max side by side */}
+        <div className="u-d-flex u-gap-12">
+          {/* Avatar Groups with Max Limit */}
+          <div className="u-flex-grow-1">
+            <h3 className="u-mb-4 u-fw-normal">Avatar Groups with Max Limit</h3>
+            <div className="u-d-flex u-flex-column u-gap-4">
+              {sizes.map(size => (
+                <div key={size} className="u-d-flex u-align-items-center u-gap-4">
+                  <div className="u-w-12">{size.toUpperCase()}</div>
+                  <AvatarGroup max={3}>
+                    <Avatar src={`https://i.pravatar.cc/150?img=${19}`} size={size} circle />
+                    <Avatar src={`https://i.pravatar.cc/150?img=${20}`} size={size} circle />
+                    <Avatar src={`https://i.pravatar.cc/150?img=${21}`} size={size} circle />
+                    <Avatar src={`https://i.pravatar.cc/150?img=${22}`} size={size} circle />
+                    <Avatar src={`https://i.pravatar.cc/150?img=${23}`} size={size} circle />
+                  </AvatarGroup>
+                </div>
+              ))}
+            </div>
+          </div>
+
+          {/* Stacked Avatar Groups with Max Limit */}
+          <div className="u-flex-grow-1">
+            <h3 className="u-mb-4 u-fw-normal">Stacked Groups with Max Limit</h3>
+            <div className="u-d-flex u-flex-column u-gap-4">
+              {sizes.map(size => (
+                <div key={size} className="u-d-flex u-align-items-center u-gap-4">
+                  <div className="u-w-12">{size.toUpperCase()}</div>
+                  <AvatarGroup stacked max={3} moreText={`+more`}>
+                    <Avatar src={`https://i.pravatar.cc/150?img=${29}`} size={size} circle />
+                    <Avatar src={`https://i.pravatar.cc/150?img=${30}`} size={size} circle />
+                    <Avatar src={`https://i.pravatar.cc/150?img=${31}`} size={size} circle />
+                    <Avatar src={`https://i.pravatar.cc/150?img=${32}`} size={size} circle />
+                    <Avatar src={`https://i.pravatar.cc/150?img=${33}`} size={size} circle />
+                  </AvatarGroup>
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+
+        {/* Mixed Content Avatar Groups */}
+        <div>
+          <h3 className="u-mb-4 u-fw-normal">Mixed Content Avatar Groups</h3>
+          <AvatarGroup>
+            <Avatar src={`https://i.pravatar.cc/150?img=${34}`} size="md" circle />
+            <Avatar initials="JD" size="md" circle />
+            <Avatar src={`https://i.pravatar.cc/150?img=${35}`} size="md" circle />
+            <Avatar icon={<Icon name="User" size="md" />} size="md" circle />
+            <Avatar src={`https://i.pravatar.cc/150?img=${36}`} size="md" circle />
+          </AvatarGroup>
+        </div>
+      </div>
+    );
+  },
+};

package/src/components/Avatar/Avatar.tsx

@@ -0,0 +1,68 @@
+import React, { useState } from 'react';
+import { AvatarProps } from '../../lib/types/components';
+import { AVATAR } from '../../lib/constants/components';
+import { Icon } from '../Icon/Icon';
+
+export const Avatar: React.FC<AvatarProps> = ({
+  src,
+  alt = 'Avatar',
+  initials,
+  icon,
+  size = 'md',
+  circle = false,
+  className = '',
+  disabled = false,
+  onClick,
+}) => {
+  const [imageError, setImageError] = useState(false);
+
+  const handleImageError = () => {
+    setImageError(true);
+  };
+
+  // Generate CSS classes
+  const avatarClasses = [
+    AVATAR.CLASSES.BASE,
+    size !== 'md' && `c-avatar--${size}`,
+    circle && AVATAR.CLASSES.CIRCLE,
+    disabled && 'is-disabled',
+    className,
+  ]
+    .filter(Boolean)
+    .join(' ');
+
+  // Handle click event
+  const handleClick = (e: React.MouseEvent<HTMLDivElement>) => {
+    if (!disabled && onClick) {
+      onClick(e);
+    }
+  };
+
+  return (
+    <div
+      className={avatarClasses}
+      onClick={onClick ? handleClick : undefined}
+      role={onClick ? 'button' : undefined}
+      tabIndex={onClick && !disabled ? 0 : undefined}
+      aria-disabled={disabled || undefined}
+    >
+      {src && !imageError ? (
+        <img src={src} alt={alt} className="c-avatar__image" onError={handleImageError} />
+      ) : initials ? (
+        <span className="c-avatar__initials">{initials}</span>
+      ) : icon ? (
+        <span className="c-avatar__icon">{icon}</span>
+      ) : (
+        <span className="c-avatar__icon">
+          <Icon name="User" size={size === 'xs' ? 'xs' : size === 'sm' ? 'sm' : 'md'} />
+        </span>
+      )}
+    </div>
+  );
+};
+
+Avatar.displayName = 'Avatar';
+
+export type { AvatarProps };
+
+export default Avatar;

package/src/components/Avatar/AvatarGroup.tsx

@@ -0,0 +1,73 @@
+import React, { Children, cloneElement, isValidElement } from 'react';
+import { AvatarGroupProps, AvatarProps } from '../../lib/types/components';
+import { AVATAR_GROUP, AVATAR } from '../../lib/constants/components';
+import { Avatar } from './Avatar';
+
+export const AvatarGroup: React.FC<AvatarGroupProps> = ({
+  children,
+  max,
+  stacked = false,
+  className = '',
+  moreText,
+}) => {
+  // Generate CSS classes
+  const avatarGroupClasses = [
+    AVATAR_GROUP.CLASSES.BASE,
+    stacked && AVATAR_GROUP.CLASSES.STACKED,
+    className,
+  ]
+    .filter(Boolean)
+    .join(' ');
+
+  // Get valid Avatar children
+  const avatarChildren = Children.toArray(children).filter(
+    child => isValidElement(child) && child.type === Avatar
+  );
+
+  // Determine if we need to show the "more" indicator
+  const showMoreIndicator = max !== undefined && avatarChildren.length > max;
+  const visibleAvatars = showMoreIndicator ? avatarChildren.slice(0, max) : avatarChildren;
+  const hiddenAvatarCount = avatarChildren.length - (max || 0);
+
+  // Extract size and shape from first avatar to ensure consistent styling
+  const firstAvatar = isValidElement<AvatarProps>(avatarChildren[0])
+    ? avatarChildren[0].props
+    : null;
+  const avatarSize = firstAvatar?.size || 'md';
+  const isCircle = firstAvatar?.circle || false;
+
+  // Generate more indicator classes
+  const moreClasses = [
+    AVATAR.CLASSES.BASE,
+    AVATAR_GROUP.CLASSES.MORE,
+    avatarSize !== 'md' && `c-avatar--${avatarSize}`,
+    isCircle && 'c-avatar--circle',
+  ]
+    .filter(Boolean)
+    .join(' ');
+
+  return (
+    <div className={avatarGroupClasses}>
+      {visibleAvatars.map((child, index) => {
+        if (isValidElement<AvatarProps>(child)) {
+          // Clone the Avatar element to ensure proper styling
+          return cloneElement(child, {
+            key: index,
+            ...child.props,
+          });
+        }
+        return null;
+      })}
+
+      {showMoreIndicator && (
+        <div className={moreClasses}>{moreText || `+${hiddenAvatarCount}`}</div>
+      )}
+    </div>
+  );
+};
+
+export type { AvatarGroupProps };
+
+AvatarGroup.displayName = 'AvatarGroup';
+
+export default AvatarGroup;

package/src/components/Avatar/index.ts

@@ -0,0 +1,3 @@
+export { Avatar } from './Avatar';
+export { default } from './Avatar';
+export type { AvatarProps } from './Avatar';