@shohojdhara/atomix 0.1.16 → 0.1.18

package/src/components/River/River.stories.tsx

@@ -35,7 +35,7 @@ export default {
   },
 } as Meta<typeof River>;
 
-const Template: StoryFn<typeof River> = (args) => (
+const Template: StoryFn<typeof River> = args => (
   <div style={{ padding: '0', maxWidth: '100%' }}>
     <River {...args} />
   </div>
@@ -46,7 +46,11 @@ export const Default = Template.bind({});
 Default.args = {
   title: 'Streamline Your Workflow',
   text: 'Our platform provides a comprehensive suite of tools to optimize your workflow and increase productivity. With intuitive interfaces and powerful features, you can accomplish more in less time.',
-  actions: <a href="#" className="c-btn c-btn--primary">Get Started</a>,
+  actions: (
+    <a href="#" className="c-btn c-btn--primary">
+      Get Started
+    </a>
+  ),
   imageSrc: 'https://unsplash.it/g/500/300',
   imageAlt: 'Workflow diagram',
 };
@@ -74,7 +78,7 @@ export const Breakout = Template.bind({});
 Breakout.args = {
   ...Default.args,
   title: 'Scale With Confidence',
-  text: 'Our robust infrastructure adapts to your needs, whether you\'re a small business or a global enterprise. Grow your operations without worrying about technical limitations.',
+  text: "Our robust infrastructure adapts to your needs, whether you're a small business or a global enterprise. Grow your operations without worrying about technical limitations.",
   breakout: true,
 };
 
@@ -85,10 +89,14 @@ MultiParagraph.args = {
   title: 'Revolutionize Your Approach',
   text: [
     'Our innovative solutions are designed to transform how you work, making complex tasks simple and intuitive.',
-    'By focusing on user experience and practical functionality, we\'ve created tools that adapt to your workflow rather than forcing you to adapt to them.',
-    'Experience the difference that thoughtful design and powerful technology can make in your daily operations.'
+    "By focusing on user experience and practical functionality, we've created tools that adapt to your workflow rather than forcing you to adapt to them.",
+    'Experience the difference that thoughtful design and powerful technology can make in your daily operations.',
   ],
-  actions: <a href="#" className="c-btn c-btn--primary">Learn More</a>,
+  actions: (
+    <a href="#" className="c-btn c-btn--primary">
+      Learn More
+    </a>
+  ),
 };
 
 // Content columns
@@ -103,13 +111,23 @@ ContentColumns.args = {
       type: 'text',
       content: (
         <div>
-          <p className="c-river__text">Use content columns to create custom layouts with different types of content. This approach gives you more control over the structure and presentation of your information.</p>
-          <p className="c-river__text">Perfect for featuring important statistics, quotes, or highlighting key information alongside your main content.</p>
+          <p className="c-river__text">
+            Use content columns to create custom layouts with different types of content. This
+            approach gives you more control over the structure and presentation of your information.
+          </p>
+          <p className="c-river__text">
+            Perfect for featuring important statistics, quotes, or highlighting key information
+            alongside your main content.
+          </p>
         </div>
       ),
     },
   ],
-  actions: <a href="#" className="c-btn c-btn--primary">Explore Options</a>,
+  actions: (
+    <a href="#" className="c-btn c-btn--primary">
+      Explore Options
+    </a>
+  ),
   imageSrc: 'https://unsplash.it/g/500/300',
 };
 
@@ -118,7 +136,11 @@ export const CustomTitle = Template.bind({});
 CustomTitle.args = {
   title: <h1 className="c-river__title u-text-gradient">Custom Title with Gradient</h1>,
   text: 'The sun had set, leaving the sky painted in shades of orange and pink as the stars twinkled above. The air was filled with the sound of crickets and the rustle of leaves in the gentle breeze.',
-  actions: <a href="#" className="c-btn u-pl-0">Text Link <i className="icon-lux-circle"></i></a>,
+  actions: (
+    <a href="#" className="c-btn u-pl-0">
+      Text Link <i className="icon-lux-circle"></i>
+    </a>
+  ),
   imageSrc: 'https://unsplash.it/g/712/196',
   imageAlt: 'Image',
 };
@@ -128,7 +150,11 @@ export const WithBackgroundAndContent = Template.bind({});
 WithBackgroundAndContent.args = {
   title: 'Build Faster Applications',
   text: 'Our component library is designed for developers who want to create beautiful interfaces with minimal effort. With built-in TypeScript support and comprehensive documentation, you can focus on building features, not fighting with UI.',
-  actions: <a href="#" className="c-btn c-btn--light">View Documentation</a>,
+  actions: (
+    <a href="#" className="c-btn c-btn--light">
+      View Documentation
+    </a>
+  ),
   imageSrc: 'https://unsplash.it/g/500/300',
   backgroundImageSrc: 'https://unsplash.it/g/1920/600',
   showOverlay: true,
@@ -139,7 +165,11 @@ export const CustomContentWidth = Template.bind({});
 CustomContentWidth.args = {
   title: 'Powerful Developer Experience',
   text: 'Our River component gives you complete control over your content layout. Customize content width, background images, and layouts to create engaging sections that convert visitors into customers.',
-  actions: <a href="#" className="c-btn c-btn--primary">Explore API</a>,
+  actions: (
+    <a href="#" className="c-btn c-btn--primary">
+      Explore API
+    </a>
+  ),
   imageSrc: 'https://unsplash.it/g/500/300',
   contentWidth: '800px',
 };
@@ -148,37 +178,53 @@ CustomContentWidth.args = {
 const MultipeRiversExample: React.FC = () => {
   return (
     <div style={{ display: 'flex', flexDirection: 'column', gap: '40px' }}>
-      <River 
+      <River
         title="Component-Driven Development"
         text="Build your UI from the ground up using our composable components. Each component is designed to work seamlessly with the rest of the library."
-        actions={<a href="#" className="c-btn c-btn--primary">Get Started</a>}
+        actions={
+          <a href="#" className="c-btn c-btn--primary">
+            Get Started
+          </a>
+        }
         imageSrc="https://unsplash.it/g/712/196"
       />
-      
-      <River 
+
+      <River
         title="TypeScript First"
         text="Every component includes full TypeScript definitions, giving you complete type safety and excellent IDE integration."
-        actions={<a href="#" className="c-btn c-btn--primary">Read Docs</a>}
+        actions={
+          <a href="#" className="c-btn c-btn--primary">
+            Read Docs
+          </a>
+        }
         imageSrc="https://unsplash.it/g/712/196"
         reverse={true}
       />
-      
-      <River 
+
+      <River
         title="Flexible Layouts"
         text="Create engaging content sections with various layout options. Center, reverse, or breakout - all with simple props."
-        actions={<a href="#" className="c-btn c-btn--primary">See Examples</a>}
+        actions={
+          <a href="#" className="c-btn c-btn--primary">
+            See Examples
+          </a>
+        }
         imageSrc="https://unsplash.it/g/1920/320"
         center={true}
       />
-      
-      <River 
+
+      <River
         title="Pixel-Perfect Design"
         text="Our components follow a consistent design system, ensuring your application looks professional across all pages and states."
-        actions={<a href="#" className="c-btn c-btn--light">View Design System</a>}
+        actions={
+          <a href="#" className="c-btn c-btn--light">
+            View Design System
+          </a>
+        }
         backgroundImageSrc="https://unsplash.it/g/1920/600"
       />
     </div>
   );
 };
 
-export const MultipleRivers: StoryFn<typeof River> = () => <MultipeRiversExample />; 
+export const MultipleRivers: StoryFn<typeof River> = () => <MultipeRiversExample />;

package/src/components/River/River.tsx

@@ -22,14 +22,14 @@ export const River: React.FC<RiverProps> = ({
 }) => {
   const riverRef = useRef<HTMLDivElement>(null);
   const riverInstance = useRef<any>(null);
-  
-  const { 
+
+  const {
     generateRiverClassNames,
     generateContentClass,
     generateVisualClass,
     hasBackgroundImage,
     hasForegroundImage,
-    textContent
+    textContent,
   } = useRiver({
     title,
     text,
@@ -40,9 +40,9 @@ export const River: React.FC<RiverProps> = ({
     reverse,
     backgroundImageSrc,
     showOverlay,
-    contentWidth
+    contentWidth,
   });
-  
+
   useEffect(() => {
     // Only run on client-side
     if (typeof window === 'undefined' || !riverRef.current) return undefined;
@@ -55,11 +55,11 @@ export const River: React.FC<RiverProps> = ({
           breakout,
           reverse,
           backgroundImageSrc,
-          showOverlay
+          showOverlay,
         });
       }
     });
-    
+
     // Cleanup on unmount
     return () => {
       if (riverInstance.current) {
@@ -67,15 +67,17 @@ export const River: React.FC<RiverProps> = ({
       }
     };
   }, [center, breakout, reverse, backgroundImageSrc, showOverlay]);
-  
+
   // Create custom style for river element with content width if provided
-  const riverStyle: React.CSSProperties | undefined = contentWidth ? {
-    [RIVER.ATTRIBUTES.CONTENT_WIDTH]: contentWidth
-  } as React.CSSProperties : undefined;
-  
+  const riverStyle: React.CSSProperties | undefined = contentWidth
+    ? ({
+        [RIVER.ATTRIBUTES.CONTENT_WIDTH]: contentWidth,
+      } as React.CSSProperties)
+    : undefined;
+
   const renderBackground = () => {
     if (!hasBackgroundImage) return null;
-    
+
     return (
       <div className={RIVER.SELECTORS.BG.replace('.', '')}>
         <img
@@ -87,39 +89,31 @@ export const River: React.FC<RiverProps> = ({
       </div>
     );
   };
-  
+
   const renderContent = () => (
     <div className={generateContentClass()}>
-      {title && (
-        <h2 className={RIVER.SELECTORS.TITLE.replace('.', '')}>{title}</h2>
-      )}
+      {title && <h2 className={RIVER.SELECTORS.TITLE.replace('.', '')}>{title}</h2>}
       {textContent.map((paragraph, index) => (
-        <p key={index} className={RIVER.SELECTORS.TEXT.replace('.', '')}>{paragraph}</p>
+        <p key={index} className={RIVER.SELECTORS.TEXT.replace('.', '')}>
+          {paragraph}
+        </p>
       ))}
-      {actions && (
-        <div className={RIVER.SELECTORS.ACTIONS.replace('.', '')}>
-          {actions}
-        </div>
-      )}
+      {actions && <div className={RIVER.SELECTORS.ACTIONS.replace('.', '')}>{actions}</div>}
     </div>
   );
 
   const renderImage = () => {
     if (!hasForegroundImage) return null;
-    
+
     return (
       <div className={generateVisualClass()}>
         <div className={RIVER.SELECTORS.IMAGE_WRAPPER.replace('.', '')}>
-          <img 
-            src={imageSrc} 
-            alt={imageAlt} 
-            className={RIVER.SELECTORS.IMAGE.replace('.', '')} 
-          />
+          <img src={imageSrc} alt={imageAlt} className={RIVER.SELECTORS.IMAGE.replace('.', '')} />
         </div>
       </div>
     );
   };
-  
+
   // Render with content columns (advanced layout)
   if (contentColumns && contentColumns.length > 0) {
     return (
@@ -130,18 +124,14 @@ export const River: React.FC<RiverProps> = ({
             {!reverse && renderImage()}
             <div className={generateContentClass()}>
               {contentColumns.map((column, index) => (
-                <div 
+                <div
                   key={index}
                   className={`${RIVER.SELECTORS.CONTENT_COL.replace('.', '')} ${RIVER.SELECTORS[`CONTENT_COL_${column.type.toUpperCase()}` as keyof typeof RIVER.SELECTORS].replace('.', '')}`}
                 >
                   {column.content}
                 </div>
               ))}
-              {actions && (
-                <div className={RIVER.SELECTORS.ACTIONS.replace('.', '')}>
-                  {actions}
-                </div>
-              )}
+              {actions && <div className={RIVER.SELECTORS.ACTIONS.replace('.', '')}>{actions}</div>}
             </div>
             {reverse && renderImage()}
           </div>
@@ -149,7 +139,7 @@ export const River: React.FC<RiverProps> = ({
       </div>
     );
   }
-  
+
   // Render with standard layout
   return (
     <div className={generateRiverClassNames(className)} ref={riverRef} style={riverStyle}>
@@ -165,7 +155,7 @@ export const River: React.FC<RiverProps> = ({
   );
 };
 
-export type { RiverProps  };
+export type { RiverProps };
 
 River.displayName = 'River';
 

package/src/components/River/index.ts

@@ -1,2 +1,2 @@
 export { River } from './River';
-export type { RiverProps } from './River';
+export type { RiverProps } from './River';

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

@@ -28,7 +28,7 @@ const DEFAULT_OPTIONS: RiverOptions = {
   center: false,
   breakout: false,
   reverse: false,
-  showOverlay: true
+  showOverlay: true,
 };
 
 /**
@@ -54,10 +54,7 @@ class River implements RiverInstance {
    */
   init(): void {
     if (this.options.contentWidth) {
-      this.$element.style.setProperty(
-        RIVER.ATTRIBUTES.CONTENT_WIDTH,
-        this.options.contentWidth
-      );
+      this.$element.style.setProperty(RIVER.ATTRIBUTES.CONTENT_WIDTH, this.options.contentWidth);
     }
 
     // Add background image if provided
@@ -74,26 +71,26 @@ class River implements RiverInstance {
 
     // Check if background already exists
     let $bg = this.$element.querySelector(RIVER.SELECTORS.BG);
-    
+
     if (!$bg) {
       // Create background container
       $bg = document.createElement('div');
       $bg.className = RIVER.SELECTORS.BG.replace('.', '');
-      
+
       // Create background image
       const $bgImage = document.createElement('img');
       $bgImage.src = this.options.backgroundImageSrc;
       $bgImage.alt = 'Background';
       $bgImage.className = RIVER.SELECTORS.BG_IMAGE.replace('.', '');
       $bg.appendChild($bgImage);
-      
+
       // Create overlay if needed
       if (this.options.showOverlay) {
         const $overlay = document.createElement('div');
         $overlay.className = RIVER.SELECTORS.OVERLAY.replace('.', '');
         $bg.appendChild($overlay);
       }
-      
+
       // Add background to the element (as first child)
       if (this.$element.firstChild) {
         this.$element.insertBefore($bg, this.$element.firstChild);
@@ -119,11 +116,13 @@ class River implements RiverInstance {
  */
 export function initializeRivers(selector = RIVER.SELECTORS.RIVER, options = {}): RiverInstance[] {
   const riverInstances: RiverInstance[] = [];
-  const riverElements = document.querySelectorAll<HTMLElement>(typeof selector === 'string' ? selector : RIVER.SELECTORS.RIVER);
+  const riverElements = document.querySelectorAll<HTMLElement>(
+    typeof selector === 'string' ? selector : RIVER.SELECTORS.RIVER
+  );
 
   if (!riverElements.length) return riverInstances;
 
-  riverElements.forEach((element) => {
+  riverElements.forEach(element => {
     try {
       const instance = new River(element, options);
       riverInstances.push(instance);
@@ -135,4 +134,4 @@ export function initializeRivers(selector = RIVER.SELECTORS.RIVER, options = {})
   return riverInstances;
 }
 
-export default River; 
+export default River;

package/src/components/SectionIntro/SectionIntro.stories.tsx

@@ -14,13 +14,13 @@ const meta: Meta<typeof SectionIntro> = {
     title: { control: 'text' },
     label: { control: 'text' },
     text: { control: 'text' },
-    alignment: { 
-      control: { type: 'select' }, 
-      options: ['left', 'center', 'right'] 
+    alignment: {
+      control: { type: 'select' },
+      options: ['left', 'center', 'right'],
     },
-    size: { 
-      control: { type: 'select' }, 
-      options: ['sm', 'md', 'lg'] 
+    size: {
+      control: { type: 'select' },
+      options: ['sm', 'md', 'lg'],
     },
     skeleton: { control: 'boolean' },
     showOverlay: { control: 'boolean' },
@@ -80,7 +80,8 @@ export const RightAligned: Story = {
 export const WithBackground: Story = {
   args: {
     ...Default.args,
-    backgroundImageSrc: 'https://images.unsplash.com/photo-1557682250-33bd709cbe85?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80',
+    backgroundImageSrc:
+      'https://images.unsplash.com/photo-1557682250-33bd709cbe85?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80',
     showOverlay: true,
     alignment: 'center',
     title: 'Discover Our Vision',
@@ -93,7 +94,8 @@ export const WithBackground: Story = {
 export const WithImage: Story = {
   args: {
     ...Default.args,
-    imageSrc: 'https://images.unsplash.com/photo-1581291518633-83b4ebd1d83e?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80',
+    imageSrc:
+      'https://images.unsplash.com/photo-1581291518633-83b4ebd1d83e?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80',
     imageAlt: 'Team collaboration',
   },
 };
@@ -130,7 +132,8 @@ export const FullExample: Story = {
     text: 'We believe in creating technology that empowers people to achieve more. Our components are designed with accessibility, performance, and developer experience in mind.',
     alignment: 'center',
     size: 'lg',
-    backgroundImageSrc: 'https://images.unsplash.com/photo-1579546929518-9e396f3cc809?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80',
+    backgroundImageSrc:
+      'https://images.unsplash.com/photo-1579546929518-9e396f3cc809?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80',
     showOverlay: true,
     actions: (
       <div className="u-flex u-gap-md u-justify-center">

package/src/components/SectionIntro/SectionIntro.tsx

@@ -6,7 +6,7 @@ export interface SectionIntroProps {
    * The section title
    */
   title: ReactNode;
-  
+
   /**
    * Optional subtitle or overline text
    */
@@ -14,7 +14,7 @@ export interface SectionIntroProps {
    * Optional label text (equivalent to subtitle in the UI)
    */
   label?: ReactNode;
-  
+
   /**
    * Optional description text
    */
@@ -22,47 +22,47 @@ export interface SectionIntroProps {
    * Optional text content
    */
   text?: ReactNode;
-  
+
   /**
    * Optional call to action elements
    */
   actions?: ReactNode;
-  
+
   /**
    * Alignment of the content
    */
   alignment?: 'left' | 'center' | 'right';
-  
+
   /**
    * Optional background image URL
    */
   backgroundImageSrc?: string;
-  
+
   /**
    * Whether to show an overlay on the background
    */
   showOverlay?: boolean;
-  
+
   /**
    * Optional foreground image URL
    */
   imageSrc?: string;
-  
+
   /**
    * Alternative text for the image
    */
   imageAlt?: string;
-  
+
   /**
    * Size variant
    */
   size?: 'sm' | 'md' | 'lg';
-  
+
   /**
    * Whether to show a skeleton loading state
    */
   skeleton?: boolean;
-  
+
   /**
    * Additional CSS class
    */
@@ -88,7 +88,7 @@ export const SectionIntro: React.FC<SectionIntroProps> = ({
 }) => {
   const sectionIntroRef = useRef<HTMLDivElement>(null);
   const sectionIntroInstance = useRef<any>(null);
-  
+
   useEffect(() => {
     // Only run on client-side
     if (typeof window === 'undefined' || !sectionIntroRef.current) return undefined;
@@ -101,11 +101,11 @@ export const SectionIntro: React.FC<SectionIntroProps> = ({
           backgroundImageSrc,
           showOverlay,
           size,
-          skeleton
+          skeleton,
         });
       }
     });
-    
+
     // Cleanup on unmount
     return () => {
       if (sectionIntroInstance.current) {
@@ -113,7 +113,7 @@ export const SectionIntro: React.FC<SectionIntroProps> = ({
       }
     };
   }, [alignment, backgroundImageSrc, showOverlay, size, skeleton]);
-  
+
   // Determine CSS classes
   const sectionIntroClasses = [
     'c-sectionintro',
@@ -121,9 +121,11 @@ export const SectionIntro: React.FC<SectionIntroProps> = ({
     size === 'sm' ? SECTION_INTRO.CLASSES.SMALL : '',
     size === 'lg' ? SECTION_INTRO.CLASSES.LARGE : '',
     backgroundImageSrc ? 'c-sectionintro--has-bg' : '',
-    className
-  ].filter(Boolean).join(' ');
-  
+    className,
+  ]
+    .filter(Boolean)
+    .join(' ');
+
   // Render skeleton version
   if (skeleton) {
     return (
@@ -158,23 +160,19 @@ export const SectionIntro: React.FC<SectionIntroProps> = ({
       </div>
     );
   }
-  
+
   // Render background if provided
   const renderBackground = () => {
     if (!backgroundImageSrc) return null;
-    
+
     return (
       <div className="c-sectionintro__bg">
-        <img
-          src={backgroundImageSrc}
-          alt="Background"
-          className="c-sectionintro__bg-image"
-        />
+        <img src={backgroundImageSrc} alt="Background" className="c-sectionintro__bg-image" />
         {showOverlay && <div className="c-sectionintro__overlay"></div>}
       </div>
     );
   };
-  
+
   // Render normal version
   return (
     <div className={sectionIntroClasses} ref={sectionIntroRef}>
@@ -186,11 +184,7 @@ export const SectionIntro: React.FC<SectionIntroProps> = ({
         {actions && <div className="c-sectionintro__actions">{actions}</div>}
         {imageSrc && (
           <div className="c-sectionintro__image-wrapper">
-            <img
-              src={imageSrc}
-              alt={imageAlt}
-              className="c-sectionintro__image"
-            />
+            <img src={imageSrc} alt={imageAlt} className="c-sectionintro__image" />
           </div>
         )}
       </div>

package/src/components/SectionIntro/scripts/componentInteractions.ts

@@ -19,7 +19,7 @@ export function enhanceSectionIntro(element: HTMLElement): void {
  */
 export function initializeSectionIntroInteractions(): void {
   const sectionIntros = document.querySelectorAll(SECTION_INTRO.SELECTORS.SECTION_INTRO);
-  
+
   sectionIntros.forEach(element => {
     if (element instanceof HTMLElement) {
       enhanceSectionIntro(element);