@shohojdhara/atomix 0.1.17 → 0.1.18

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/Hero/scripts/bundle.ts

@@ -0,0 +1,33 @@
+/**
+ * Bundle file for Hero component
+ * Used for global exports and browser usage
+ */
+
+import { Hero, initHeroes } from './index';
+import {
+  applyParallaxEffect,
+  removeParallaxEffect,
+  applyVideoBackground,
+  initializeHeroesWithCustomBehavior,
+} from './heroInteractions';
+
+// Export for global use
+export {
+  Hero,
+  initHeroes,
+  applyParallaxEffect,
+  removeParallaxEffect,
+  applyVideoBackground,
+  initializeHeroesWithCustomBehavior,
+};
+
+// Add to global namespace for direct browser usage
+if (typeof window !== 'undefined') {
+  (window as any).Atomix = (window as any).Atomix || {};
+  (window as any).Atomix.Hero = Hero;
+  (window as any).Atomix.initHeroes = initHeroes;
+  (window as any).Atomix.applyParallaxEffect = applyParallaxEffect;
+  (window as any).Atomix.removeParallaxEffect = removeParallaxEffect;
+  (window as any).Atomix.applyVideoBackground = applyVideoBackground;
+  (window as any).Atomix.initializeHeroesWithCustomBehavior = initializeHeroesWithCustomBehavior;
+}

package/src/components/Hero/scripts/heroInteractions.ts

@@ -0,0 +1,130 @@
+import { Hero } from './index';
+import { HERO } from '../../../lib/constants/components';
+
+/**
+ * Apply parallax effect to hero background
+ * @param hero - Hero element
+ * @param intensity - Parallax effect intensity (0-1)
+ */
+export function applyParallaxEffect(hero: HTMLElement, intensity: number = 0.5): void {
+  if (!hero) return;
+
+  // Ensure intensity is between 0 and 1
+  const safeIntensity = Math.max(0, Math.min(1, intensity));
+
+  // Add parallax class
+  hero.classList.add('c-hero--parallax');
+
+  // Handle scroll event
+  const handleScroll = (): void => {
+    const scrollPosition = window.pageYOffset;
+    const offset = scrollPosition * safeIntensity;
+
+    // Apply transform
+    hero.style.backgroundPositionY = `calc(50% + ${offset}px)`;
+  };
+
+  // Add event listener
+  window.addEventListener('scroll', handleScroll);
+
+  // Store the handler for cleanup
+  (hero as any)._parallaxHandler = handleScroll;
+
+  // Initial call
+  handleScroll();
+}
+
+/**
+ * Remove parallax effect from hero
+ * @param hero - Hero element
+ */
+export function removeParallaxEffect(hero: HTMLElement): void {
+  if (!hero) return;
+
+  // Remove class
+  hero.classList.remove('c-hero--parallax');
+
+  // Remove style
+  hero.style.backgroundPositionY = '';
+
+  // Remove event listener
+  if ((hero as any)._parallaxHandler) {
+    window.removeEventListener('scroll', (hero as any)._parallaxHandler);
+    delete (hero as any)._parallaxHandler;
+  }
+}
+
+/**
+ * Apply video background to hero
+ * @param hero - Hero element
+ * @param videoUrl - URL of the video
+ * @param options - Video options
+ */
+export function applyVideoBackground(
+  hero: HTMLElement,
+  videoUrl: string,
+  options: {
+    autoplay?: boolean;
+    loop?: boolean;
+    muted?: boolean;
+    posterUrl?: string;
+  } = {}
+): void {
+  if (!hero) return;
+
+  // Default options
+  const { autoplay = true, loop = true, muted = true, posterUrl } = options;
+
+  // Create video element
+  const video = document.createElement('video');
+  video.className = 'c-hero__video';
+  video.autoplay = autoplay;
+  video.loop = loop;
+  video.muted = muted;
+  video.setAttribute('playsinline', '');
+
+  if (posterUrl) {
+    video.poster = posterUrl;
+  }
+
+  // Add source
+  const source = document.createElement('source');
+  source.src = videoUrl;
+  source.type = `video/${videoUrl.split('.').pop() || 'mp4'}`;
+
+  video.appendChild(source);
+
+  // Add to hero
+  hero.appendChild(video);
+}
+
+/**
+ * Initialize hero with custom behavior
+ * @param selector - CSS selector for hero elements
+ */
+export function initializeHeroesWithCustomBehavior(selector = HERO.SELECTORS.HERO): Hero[] {
+  const heroes = Hero.initializeAll(selector);
+
+  // Apply custom behaviors based on data attributes
+  heroes.forEach(heroInstance => {
+    const element = heroInstance['element'] as HTMLElement;
+
+    // Apply parallax if data attribute is present
+    if (element.dataset.parallax === 'true') {
+      const intensity = parseFloat(element.dataset.parallaxIntensity || '0.5');
+      applyParallaxEffect(element, intensity);
+    }
+
+    // Apply video background if data attribute is present
+    if (element.dataset.videoBackground) {
+      applyVideoBackground(element, element.dataset.videoBackground, {
+        autoplay: element.dataset.videoAutoplay !== 'false',
+        loop: element.dataset.videoLoop !== 'false',
+        muted: element.dataset.videoMuted !== 'false',
+        posterUrl: element.dataset.videoPoster,
+      });
+    }
+  });
+
+  return heroes;
+}

package/src/components/Hero/scripts/index.ts

@@ -0,0 +1,144 @@
+import { HERO } from '../../../lib/constants/components';
+
+/**
+ * HeroOptions interface for the vanilla JS implementation
+ */
+export interface HeroOptions {
+  backgroundImage?: string;
+  overlay?: boolean;
+  overlayOpacity?: number;
+  fullHeight?: boolean;
+  centered?: boolean;
+  className?: string;
+}
+
+/**
+ * HeroInstance interface
+ */
+export interface HeroInstance {
+  init(): void;
+  destroy(): void;
+}
+
+/**
+ * Default options for the Hero component
+ */
+const DEFAULT_OPTIONS: HeroOptions = {
+  overlay: true,
+  overlayOpacity: 0.5,
+  fullHeight: false,
+  centered: false,
+};
+
+/**
+ * Hero Class - Vanilla JS implementation
+ */
+export class Hero implements HeroInstance {
+  private element: HTMLElement;
+  private options: HeroOptions;
+
+  /**
+   * Constructor
+   * @param element - DOM element or selector
+   * @param options - Configuration options
+   */
+  constructor(element: string | HTMLElement, options: HeroOptions = {}) {
+    // Get element reference
+    this.element =
+      typeof element === 'string' ? (document.querySelector(element) as HTMLElement) : element;
+
+    if (!this.element) {
+      throw new Error('Hero: Element not found');
+    }
+
+    // Merge default options with provided options
+    this.options = { ...DEFAULT_OPTIONS, ...options };
+
+    // Initialize the component
+    this.init();
+  }
+
+  /**
+   * Initialize the hero component
+   */
+  public init(): void {
+    // Apply classes and styles based on options
+    if (this.options.fullHeight) {
+      this.element.classList.add('c-hero--full-height');
+    }
+
+    if (this.options.centered) {
+      this.element.classList.add('c-hero--centered');
+    }
+
+    if (this.options.className) {
+      this.element.classList.add(this.options.className);
+    }
+
+    if (this.options.backgroundImage) {
+      this.element.style.backgroundImage = `url(${this.options.backgroundImage})`;
+    }
+
+    // Set up overlay if needed
+    if (this.options.overlay) {
+      const overlay = document.createElement('div');
+      overlay.className = 'c-hero__overlay';
+
+      if (this.options.overlayOpacity !== undefined) {
+        overlay.style.opacity = this.options.overlayOpacity.toString();
+      }
+
+      this.element.appendChild(overlay);
+    }
+  }
+
+  /**
+   * Destroy the hero component
+   */
+  public destroy(): void {
+    // Remove added classes
+    this.element.classList.remove('c-hero--full-height');
+    this.element.classList.remove('c-hero--centered');
+
+    if (this.options.className) {
+      this.element.classList.remove(this.options.className);
+    }
+
+    // Remove background image
+    if (this.options.backgroundImage) {
+      this.element.style.backgroundImage = '';
+    }
+
+    // Remove overlay
+    const overlay = this.element.querySelector('.c-hero__overlay');
+    if (overlay) {
+      this.element.removeChild(overlay);
+    }
+  }
+
+  /**
+   * Initialize all hero components in the document
+   */
+  public static initializeAll(selector = '[data-component="hero"]'): Hero[] {
+    const elements = document.querySelectorAll(selector);
+    return Array.from(elements).map(element => {
+      return new Hero(element as HTMLElement);
+    });
+  }
+}
+
+/**
+ * Initialize all hero components in the document
+ */
+export function initHeroes(): void {
+  Hero.initializeAll();
+}
+
+// Automatically initialize heroes when the DOM is ready
+if (typeof document !== 'undefined') {
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', initHeroes);
+  } else {
+    initHeroes();
+  }
+}

package/src/components/Icon/Icon.tsx

@@ -0,0 +1,87 @@
+import React from 'react';
+import * as PhosphorIcons from 'phosphor-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
+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,123 @@
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { List } from './List';
+import { ListGroup } from './ListGroup';
+
+const meta = {
+  title: 'Components/List',
+  component: List,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  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>
+    );
+  },
+};