@shohojdhara/atomix 0.1.16 → 0.1.17

package/src/components/Hero/Hero.stories.tsx

@@ -1,295 +0,0 @@
-import React from 'react';
-import type { Meta, StoryObj } from '@storybook/react';
-import { Hero } from './Hero';
-import { Button } from '../Button/Button';
-import { HERO } from '../../lib/constants/components';
-
-// Extract class names without the leading dots
-const HERO_CLASS = HERO.SELECTORS.HERO.replace('.', '');
-const CONTAINER_CLASS = HERO.SELECTORS.CONTAINER.replace('.', '');
-const GRID_CLASS = HERO.SELECTORS.GRID.replace('.', '');
-const CONTENT_CLASS = HERO.SELECTORS.CONTENT.replace('.', '');
-const SUBTITLE_CLASS = HERO.SELECTORS.SUBTITLE.replace('.', '');
-const TITLE_CLASS = HERO.SELECTORS.TITLE.replace('.', '');
-const TEXT_CLASS = HERO.SELECTORS.TEXT.replace('.', '');
-const ACTIONS_CLASS = HERO.SELECTORS.ACTIONS.replace('.', '');
-const IMAGE_CLASS = HERO.SELECTORS.IMAGE.replace('.', '');
-const BG_CLASS = HERO.SELECTORS.BG.replace('.', '');
-const BG_IMAGE_CLASS = HERO.SELECTORS.BG_IMAGE.replace('.', '');
-const OVERLAY_CLASS = HERO.SELECTORS.OVERLAY.replace('.', '');
-const IMAGE_WRAPPER_CLASS = HERO.SELECTORS.IMAGE_WRAPPER.replace('.', '');
-const CENTER_CLASS = HERO.CLASSES.CENTER;
-const RIGHT_CLASS = HERO.CLASSES.RIGHT;
-const LEFT_CLASS = HERO.CLASSES.LEFT;
-const FULL_VH_CLASS = HERO.CLASSES.FULL_VH;
-
-const meta = {
-  title: 'Components/Hero',
-  component: Hero,
-  parameters: {
-    layout: 'padded',
-  },
-  tags: ['autodocs'],
-  argTypes: {
-    title: {
-      control: 'text',
-      description: 'Hero title'
-    },
-    subtitle: {
-      control: 'text',
-      description: 'Hero subtitle'
-    },
-    text: {
-      control: 'text',
-      description: 'Hero text content'
-    },
-    imageSrc: {
-      control: 'text',
-      description: 'Image source URL'
-    },
-    imageAlt: {
-      control: 'text',
-      description: 'Image alt text'
-    },
-    alignment: {
-      control: { type: 'select', options: ['left', 'center', 'right'] },
-      description: 'Content alignment'
-    },
-    backgroundImageSrc: {
-      control: 'text',
-      description: 'Background image source URL'
-    },
-    showOverlay: {
-      control: 'boolean',
-      description: 'Show background overlay'
-    },
-    fullViewportHeight: {
-      control: 'boolean',
-      description: 'Make hero full viewport height'
-    },
-    imageColSize: {
-      control: { type: 'range', min: 1, max: 12, step: 1 },
-      description: 'Image column size (1-12)'
-    },
-    contentColSize: {
-      control: { type: 'range', min: 1, max: 12, step: 1 },
-      description: 'Content column size (1-12)'
-    },
-    contentWidth: {
-      control: 'text',
-      description: 'Custom width for the hero content (e.g., "800px", "50%")',
-      table: {
-        defaultValue: { summary: '536px' },
-      }
-    },
-    parallax: {
-      control: 'boolean',
-      description: 'Enable parallax effect on background image'
-    },
-    parallaxIntensity: {
-      control: { type: 'range', min: 0, max: 1, step: 0.1 },
-      description: 'Parallax effect intensity (0-1)'
-    },
-    videoBackground: {
-      control: 'text',
-      description: 'Video background URL'
-    },
-    videoOptions: {
-      control: 'object',
-      description: 'Video background options'
-    }
-  },
-} satisfies Meta<typeof Hero>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-// Helper for button actions
-const primaryActionButtons = (
-  <>
-    <Button label="Get Started" variant="primary" />
-    <Button label="Learn More" variant="outline-secondary" />
-  </>
-);
-
-const showcaseActionButtons = (
-  <>
-    <Button label="Explore Components" variant="primary" />
-    <Button label="View Documentation" variant="outline-secondary" />
-  </>
-);
-
-const demoText = 'Build modern, responsive interfaces with a clean, consistent design language. Our component library helps you create beautiful user experiences with minimal effort.';
-
-const showcaseText = 'Atomix provides a complete design system with powerful, flexible components that follow best practices for accessibility, performance, and user experience.';
-
-/**
- * Default Hero component with right-aligned content and image
- */
-export const Default: Story = {
-  args: {
-    title: 'Modern UI Components for Developers',
-    subtitle: 'Atomix Design System',
-    text: demoText,
-    imageSrc: 'https://picsum.photos/id/0/712/500',
-    imageAlt: 'Developer working with code',
-    alignment: 'right',
-    actions: primaryActionButtons
-  },
-};
-
-/**
- * Hero with left-aligned content and image on right
- */
-export const LeftAligned: Story = {
-  args: {
-    ...Default.args,
-    title: 'Crafted for Developer Experience',
-    alignment: 'left',
-    imageSrc: 'https://picsum.photos/id/3/712/500',
-  }
-};
-
-/**
- * Hero with center-aligned content and image below
- */
-export const CenterAligned: Story = {
-  args: {
-    ...Default.args,
-    title: 'Build Faster with Atomix',
-    text: 'Our components follow best practices for accessibility, performance, and responsive design. Start building beautiful interfaces in minutes.',
-    alignment: 'center',
-    imageSrc: 'https://picsum.photos/id/1/1024/300',
-  }
-};
-
-/**
- * Hero with background image
- */
-export const WithBackgroundImage: Story = {
-  args: {
-    ...Default.args,
-    title: 'Powerful Design System',
-    text: showcaseText,
-    actions: showcaseActionButtons,
-    backgroundImageSrc: 'https://picsum.photos/id/24/1920/1080',
-    showOverlay: true
-  }
-};
-
-/**
- * Hero with background image and no foreground image
- */
-export const BackgroundImageOnly: Story = {
-  args: {
-    ...Default.args,
-    title: 'Beautiful & Accessible Components',
-    text: 'Atomix is built with accessibility in mind, ensuring your applications work for everyone. Our components are fully responsive and follow WAI-ARIA guidelines.',
-    imageSrc: undefined,
-    backgroundImageSrc: 'https://picsum.photos/id/1067/1920/1080',
-    showOverlay: true,
-    alignment: 'center',
-    actions: showcaseActionButtons,
-    contentWidth: '800px'
-  }
-};
-
-/**
- * Full viewport height hero
- */
-export const FullViewportHeight: Story = {
-  args: {
-    ...BackgroundImageOnly.args,
-    title: 'Atomix. Build Once. Use Everywhere.',
-    text: 'A flexible, scalable design system that works seamlessly across all devices and platforms.',
-    fullViewportHeight: true
-  }
-};
-
-/**
- * Left-aligned content with background image
- */
-export const LeftAlignedWithBackground: Story = {
-  args: {
-    ...WithBackgroundImage.args,
-    title: 'Customizable & Extensible',
-    text: 'Easily customize components to match your brand. Built with a flexible architecture that allows for easy extension and adaptation.',
-    alignment: 'left'
-  }
-};
-
-/**
- * Center-aligned content with background and foreground image
- */
-export const CenterAlignedWithImageBackground: Story = {
-  args: {
-    ...WithBackgroundImage.args,
-    title: 'Based on Modern Standards',
-    text: 'Built with the latest technologies like React, TypeScript, and SCSS. Follows BEM, ITCSS, and OOCSS methodologies for clean, maintainable CSS.',
-    alignment: 'center',
-    imageSrc: 'https://picsum.photos/id/160/1312/280'
-  }
-};
-
-/**
- * Center-aligned content with custom content width
- */
-export const CustomContentWidth: Story = {
-  args: {
-    ...CenterAligned.args,
-    title: 'Hero with Custom Content Width',
-    text: 'This hero component has a custom content width set through the contentWidth prop, which sets the --atomix-hero-content-width CSS variable.',
-    contentWidth: '800px'
-  }
-};
-
-/**
- * Hero with parallax background effect
- */
-export const WithParallaxEffect: Story = {
-  args: {
-    ...BackgroundImageOnly.args,
-    title: 'Parallax Background Effect',
-    text: 'This hero features a parallax scrolling effect on the background image, creating depth and visual interest as the user scrolls.',
-    backgroundImageSrc: 'https://picsum.photos/id/1015/1920/1080',
-    parallax: true,
-    parallaxIntensity: 0.5,
-    fullViewportHeight: true
-  }
-};
-
-/**
- * Hero with video background
- */
-export const WithVideoBackground: Story = {
-  args: {
-    title: 'Video Background Hero',
-    subtitle: 'Dynamic & Engaging',
-    text: 'Add motion and visual interest to your hero sections with video backgrounds. Perfect for creating immersive landing pages.',
-    alignment: 'center',
-    videoBackground: 'https://storage.googleapis.com/coverr-main/mp4/Mt_Baker.mp4',
-    videoOptions: {
-      autoplay: true,
-      loop: true,
-      muted: true,
-      posterUrl: 'https://picsum.photos/id/1018/1920/1080'
-    },
-    showOverlay: true,
-    actions: showcaseActionButtons,
-    contentWidth: '800px'
-  }
-};
-
-/**
- * Hero with video background and foreground image
- */
-export const VideoBackgroundWithImage: Story = {
-  args: {
-    ...WithVideoBackground.args,
-    title: 'Complete Media Support',
-    text: 'Combine video backgrounds with foreground images for rich, layered visual presentations.',
-    alignment: 'left',
-    imageSrc: 'https://picsum.photos/id/180/712/500',
-    imageAlt: 'Product showcase'
-  }
-}; 

package/src/components/Hero/Hero.tsx

@@ -1,185 +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,135 +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;
-}