@shohojdhara/atomix 0.1.27 → 0.1.28

package/src/components/Hero/Hero.tsx

@@ -1,175 +0,0 @@
-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

@@ -1,6 +0,0 @@
-import { Hero } from './Hero';
-import type { HeroProps } from './Hero';
-
-export { Hero };
-export type { HeroProps };
-export default Hero;

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

@@ -1,33 +0,0 @@
-/**
- * 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

@@ -1,130 +0,0 @@
-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

@@ -1,144 +0,0 @@
-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

@@ -1,87 +0,0 @@
-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

@@ -1,2 +0,0 @@
-export { Icon, type IconProps, type IconSize, type IconWeight } from './Icon';
-export { default } from './Icon';

package/src/components/List/List.stories.tsx

@@ -1,123 +0,0 @@
-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>
-    );
-  },
-};