@shohojdhara/atomix 0.1.16 → 0.1.18

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

@@ -33,71 +33,71 @@ const meta = {
   argTypes: {
     title: {
       control: 'text',
-      description: 'Hero title'
+      description: 'Hero title',
     },
     subtitle: {
       control: 'text',
-      description: 'Hero subtitle'
+      description: 'Hero subtitle',
     },
     text: {
       control: 'text',
-      description: 'Hero text content'
+      description: 'Hero text content',
     },
     imageSrc: {
       control: 'text',
-      description: 'Image source URL'
+      description: 'Image source URL',
     },
     imageAlt: {
       control: 'text',
-      description: 'Image alt text'
+      description: 'Image alt text',
     },
     alignment: {
       control: { type: 'select', options: ['left', 'center', 'right'] },
-      description: 'Content alignment'
+      description: 'Content alignment',
     },
     backgroundImageSrc: {
       control: 'text',
-      description: 'Background image source URL'
+      description: 'Background image source URL',
     },
     showOverlay: {
       control: 'boolean',
-      description: 'Show background overlay'
+      description: 'Show background overlay',
     },
     fullViewportHeight: {
       control: 'boolean',
-      description: 'Make hero full viewport height'
+      description: 'Make hero full viewport height',
     },
     imageColSize: {
       control: { type: 'range', min: 1, max: 12, step: 1 },
-      description: 'Image column size (1-12)'
+      description: 'Image column size (1-12)',
     },
     contentColSize: {
       control: { type: 'range', min: 1, max: 12, step: 1 },
-      description: 'Content column size (1-12)'
+      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'
+      description: 'Enable parallax effect on background image',
     },
     parallaxIntensity: {
       control: { type: 'range', min: 0, max: 1, step: 0.1 },
-      description: 'Parallax effect intensity (0-1)'
+      description: 'Parallax effect intensity (0-1)',
     },
     videoBackground: {
       control: 'text',
-      description: 'Video background URL'
+      description: 'Video background URL',
     },
     videoOptions: {
       control: 'object',
-      description: 'Video background options'
-    }
+      description: 'Video background options',
+    },
   },
 } satisfies Meta<typeof Hero>;
 
@@ -119,9 +119,11 @@ const showcaseActionButtons = (
   </>
 );
 
-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 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.';
+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
@@ -134,7 +136,7 @@ export const Default: Story = {
     imageSrc: 'https://picsum.photos/id/0/712/500',
     imageAlt: 'Developer working with code',
     alignment: 'right',
-    actions: primaryActionButtons
+    actions: primaryActionButtons,
   },
 };
 
@@ -147,7 +149,7 @@ export const LeftAligned: Story = {
     title: 'Crafted for Developer Experience',
     alignment: 'left',
     imageSrc: 'https://picsum.photos/id/3/712/500',
-  }
+  },
 };
 
 /**
@@ -160,7 +162,7 @@ export const CenterAligned: Story = {
     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',
-  }
+  },
 };
 
 /**
@@ -173,8 +175,8 @@ export const WithBackgroundImage: Story = {
     text: showcaseText,
     actions: showcaseActionButtons,
     backgroundImageSrc: 'https://picsum.photos/id/24/1920/1080',
-    showOverlay: true
-  }
+    showOverlay: true,
+  },
 };
 
 /**
@@ -190,8 +192,8 @@ export const BackgroundImageOnly: Story = {
     showOverlay: true,
     alignment: 'center',
     actions: showcaseActionButtons,
-    contentWidth: '800px'
-  }
+    contentWidth: '800px',
+  },
 };
 
 /**
@@ -202,8 +204,8 @@ export const FullViewportHeight: Story = {
     ...BackgroundImageOnly.args,
     title: 'Atomix. Build Once. Use Everywhere.',
     text: 'A flexible, scalable design system that works seamlessly across all devices and platforms.',
-    fullViewportHeight: true
-  }
+    fullViewportHeight: true,
+  },
 };
 
 /**
@@ -214,8 +216,8 @@ export const LeftAlignedWithBackground: Story = {
     ...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'
-  }
+    alignment: 'left',
+  },
 };
 
 /**
@@ -227,8 +229,8 @@ export const CenterAlignedWithImageBackground: Story = {
     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'
-  }
+    imageSrc: 'https://picsum.photos/id/160/1312/280',
+  },
 };
 
 /**
@@ -239,8 +241,8 @@ export const CustomContentWidth: Story = {
     ...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'
-  }
+    contentWidth: '800px',
+  },
 };
 
 /**
@@ -254,8 +256,8 @@ export const WithParallaxEffect: Story = {
     backgroundImageSrc: 'https://picsum.photos/id/1015/1920/1080',
     parallax: true,
     parallaxIntensity: 0.5,
-    fullViewportHeight: true
-  }
+    fullViewportHeight: true,
+  },
 };
 
 /**
@@ -272,12 +274,12 @@ export const WithVideoBackground: Story = {
       autoplay: true,
       loop: true,
       muted: true,
-      posterUrl: 'https://picsum.photos/id/1018/1920/1080'
+      posterUrl: 'https://picsum.photos/id/1018/1920/1080',
     },
     showOverlay: true,
     actions: showcaseActionButtons,
-    contentWidth: '800px'
-  }
+    contentWidth: '800px',
+  },
 };
 
 /**
@@ -290,6 +292,6 @@ export const VideoBackgroundWithImage: Story = {
     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'
-  }
-}; 
+    imageAlt: 'Product showcase',
+  },
+};

package/src/components/Hero/Hero.tsx

@@ -24,18 +24,18 @@ export const Hero: React.FC<HeroProps> = ({
   videoOptions = {
     autoplay: true,
     loop: true,
-    muted: true
-  }
+    muted: true,
+  },
 }) => {
-  const { 
-    generateHeroClassNames, 
-    generateImageColClass, 
+  const {
+    generateHeroClassNames,
+    generateImageColClass,
     generateContentColClass,
     hasBackgroundImage,
     hasForegroundImage,
     useGridLayout,
     heroRef,
-    videoRef
+    videoRef,
   } = useHero({
     alignment,
     imageColSize,
@@ -47,21 +47,23 @@ export const Hero: React.FC<HeroProps> = ({
     contentWidth,
     parallax,
     parallaxIntensity,
-    videoBackground
+    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 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 
+      <video
         ref={videoRef}
         className="c-hero__video"
         autoPlay={autoplay}
@@ -78,7 +80,7 @@ export const Hero: React.FC<HeroProps> = ({
 
   const renderBackground = () => {
     if (!hasBackgroundImage && !videoBackground) return null;
-    
+
     return (
       <div className={HERO.SELECTORS.BG.replace('.', '')}>
         {backgroundImageSrc && (
@@ -105,26 +107,18 @@ export const Hero: React.FC<HeroProps> = ({
 
   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('.', '')}
-          />
+          <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('.', '')}
-        />
+        <img src={imageSrc} alt={imageAlt} className={HERO.SELECTORS.IMAGE.replace('.', '')} />
       </div>
     );
   };
@@ -134,29 +128,25 @@ export const Hero: React.FC<HeroProps> = ({
     if (alignment === 'left') {
       return (
         <>
-          <div className={generateContentColClass()}>
-            {renderContent()}
-          </div>
+          <div className={generateContentColClass()}>{renderContent()}</div>
           {renderForegroundImage()}
         </>
       );
     }
-    
+
     // For right-aligned or default, render image first then content
     return (
       <>
         {renderForegroundImage()}
-        <div className={generateContentColClass()}>
-          {renderContent()}
-        </div>
+        <div className={generateContentColClass()}>{renderContent()}</div>
       </>
     );
   };
 
   return (
-    <div 
+    <div
       ref={heroRef}
-      className={generateHeroClassNames(className)} 
+      className={generateHeroClassNames(className)}
       style={heroStyle}
       data-parallax={parallax ? 'true' : undefined}
       data-parallax-intensity={parallax ? parallaxIntensity : undefined}
@@ -176,10 +166,10 @@ export const Hero: React.FC<HeroProps> = ({
       </div>
     </div>
   );
-}; 
+};
 
-export type { HeroProps  };
+export type { HeroProps };
 
 Hero.displayName = 'Hero';
 
-export default Hero;
+export default Hero;

package/src/components/Hero/index.ts

@@ -3,4 +3,4 @@ import type { HeroProps } from './Hero';
 
 export { Hero };
 export type { HeroProps };
-export default Hero; 
+export default Hero;

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

@@ -4,11 +4,11 @@
  */
 
 import { Hero, initHeroes } from './index';
-import { 
-  applyParallaxEffect, 
-  removeParallaxEffect, 
+import {
+  applyParallaxEffect,
+  removeParallaxEffect,
   applyVideoBackground,
-  initializeHeroesWithCustomBehavior
+  initializeHeroesWithCustomBehavior,
 } from './heroInteractions';
 
 // Export for global use
@@ -18,7 +18,7 @@ export {
   applyParallaxEffect,
   removeParallaxEffect,
   applyVideoBackground,
-  initializeHeroesWithCustomBehavior
+  initializeHeroesWithCustomBehavior,
 };
 
 // Add to global namespace for direct browser usage
@@ -30,4 +30,4 @@ if (typeof window !== 'undefined') {
   (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

@@ -8,28 +8,28 @@ import { HERO } from '../../../lib/constants/components';
  */
 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();
 }
@@ -40,13 +40,13 @@ export function applyParallaxEffect(hero: HTMLElement, intensity: number = 0.5):
  */
 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);
@@ -61,7 +61,7 @@ export function removeParallaxEffect(hero: HTMLElement): void {
  * @param options - Video options
  */
 export function applyVideoBackground(
-  hero: HTMLElement, 
+  hero: HTMLElement,
   videoUrl: string,
   options: {
     autoplay?: boolean;
@@ -71,15 +71,10 @@ export function applyVideoBackground(
   } = {}
 ): void {
   if (!hero) return;
-  
+
   // Default options
-  const { 
-    autoplay = true, 
-    loop = true, 
-    muted = true,
-    posterUrl
-  } = options;
-  
+  const { autoplay = true, loop = true, muted = true, posterUrl } = options;
+
   // Create video element
   const video = document.createElement('video');
   video.className = 'c-hero__video';
@@ -87,18 +82,18 @@ export function applyVideoBackground(
   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);
 }
@@ -109,27 +104,27 @@ export function applyVideoBackground(
  */
 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
+        posterUrl: element.dataset.videoPoster,
       });
     }
   });
-  
+
   return heroes;
-} 
+}

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

@@ -27,7 +27,7 @@ const DEFAULT_OPTIONS: HeroOptions = {
   overlay: true,
   overlayOpacity: 0.5,
   fullHeight: false,
-  centered: false
+  centered: false,
 };
 
 /**
@@ -44,17 +44,16 @@ export class Hero implements HeroInstance {
    */
   constructor(element: string | HTMLElement, options: HeroOptions = {}) {
     // Get element reference
-    this.element = typeof element === 'string'
-      ? document.querySelector(element) as HTMLElement
-      : element;
-    
+    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();
   }
@@ -67,28 +66,28 @@ export class Hero implements HeroInstance {
     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);
     }
   }
@@ -100,16 +99,16 @@ export class Hero implements HeroInstance {
     // 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) {
@@ -142,4 +141,4 @@ if (typeof document !== 'undefined') {
   } else {
     initHeroes();
   }
-} 
+}