@shohojdhara/atomix 0.1.17 → 0.1.18

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

@@ -0,0 +1,137 @@
+import { RIVER } from '../../../lib/constants/components';
+
+/**
+ * Interface for River options
+ */
+interface RiverOptions {
+  center?: boolean;
+  breakout?: boolean;
+  reverse?: boolean;
+  backgroundImageSrc?: string;
+  showOverlay?: boolean;
+  contentWidth?: string;
+  [key: string]: any;
+}
+
+/**
+ * Interface for River instance
+ */
+interface RiverInstance {
+  init(): void;
+  destroy(): void;
+}
+
+/**
+ * Default options for the River component
+ */
+const DEFAULT_OPTIONS: RiverOptions = {
+  center: false,
+  breakout: false,
+  reverse: false,
+  showOverlay: true,
+};
+
+/**
+ * Class representing a River component
+ */
+class River implements RiverInstance {
+  private $element: HTMLElement;
+  private options: RiverOptions;
+
+  /**
+   * Creates an instance of River
+   * @param element - The river element
+   * @param options - Custom options to override defaults
+   */
+  constructor(element: HTMLElement, options = {}) {
+    this.$element = element;
+    this.options = { ...DEFAULT_OPTIONS, ...options };
+    this.init();
+  }
+
+  /**
+   * Initialize the river component
+   */
+  init(): void {
+    if (this.options.contentWidth) {
+      this.$element.style.setProperty(RIVER.ATTRIBUTES.CONTENT_WIDTH, this.options.contentWidth);
+    }
+
+    // Add background image if provided
+    if (this.options.backgroundImageSrc) {
+      this.setupBackgroundImage();
+    }
+  }
+
+  /**
+   * Setup background image
+   */
+  private setupBackgroundImage(): void {
+    if (!this.$element || !this.options.backgroundImageSrc) return;
+
+    // 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);
+      } else {
+        this.$element.appendChild($bg);
+      }
+    }
+  }
+
+  /**
+   * Clean up component
+   */
+  destroy(): void {
+    // Remove any event listeners or cleanup here
+  }
+}
+
+/**
+ * Initialize all river components in the document
+ * @param selector - CSS selector string or DOM Element
+ * @param options - Custom options to override defaults
+ * @returns Array of River instances
+ */
+export function initializeRivers(selector = RIVER.SELECTORS.RIVER, options = {}): RiverInstance[] {
+  const riverInstances: RiverInstance[] = [];
+  const riverElements = document.querySelectorAll<HTMLElement>(
+    typeof selector === 'string' ? selector : RIVER.SELECTORS.RIVER
+  );
+
+  if (!riverElements.length) return riverInstances;
+
+  riverElements.forEach(element => {
+    try {
+      const instance = new River(element, options);
+      riverInstances.push(instance);
+    } catch (error) {
+      console.error('Error initializing river:', error);
+    }
+  });
+
+  return riverInstances;
+}
+
+export default River;

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

@@ -0,0 +1,145 @@
+import React from 'react';
+import { Meta, StoryObj } from '@storybook/react';
+import { SectionIntro } from './SectionIntro';
+import { Button } from '../Button';
+
+const meta: Meta<typeof SectionIntro> = {
+  title: 'Components/SectionIntro',
+  component: SectionIntro,
+  parameters: {
+    layout: 'padded',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    title: { control: 'text' },
+    label: { control: 'text' },
+    text: { control: 'text' },
+    alignment: {
+      control: { type: 'select' },
+      options: ['left', 'center', 'right'],
+    },
+    size: {
+      control: { type: 'select' },
+      options: ['sm', 'md', 'lg'],
+    },
+    skeleton: { control: 'boolean' },
+    showOverlay: { control: 'boolean' },
+    actions: { control: false },
+    backgroundImageSrc: { control: 'text' },
+    imageSrc: { control: 'text' },
+    imageAlt: { control: 'text' },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof SectionIntro>;
+
+// Default SectionIntro
+export const Default: Story = {
+  args: {
+    title: 'Our Mission',
+    label: 'About Us',
+    text: 'We are dedicated to creating beautiful, functional, and accessible components that help developers build amazing websites and applications.',
+    alignment: 'left',
+    size: 'md',
+  },
+};
+
+// Left-aligned with actions
+export const WithActions: Story = {
+  args: {
+    ...Default.args,
+    actions: (
+      <div className="u-flex u-gap-md">
+        <Button label="Learn More" />
+        <Button label="Contact Us" variant="secondary" />
+      </div>
+    ),
+  },
+};
+
+// Center-aligned
+export const Centered: Story = {
+  args: {
+    ...Default.args,
+    alignment: 'center',
+    text: 'We are dedicated to creating beautiful, functional, and accessible components that help developers build amazing websites and applications.',
+  },
+};
+
+// Right-aligned
+export const RightAligned: Story = {
+  args: {
+    ...Default.args,
+    alignment: 'right',
+    text: 'We are dedicated to creating beautiful, functional, and accessible components that help developers build amazing websites and applications.',
+  },
+};
+
+// With background image
+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',
+    showOverlay: true,
+    alignment: 'center',
+    title: 'Discover Our Vision',
+    label: 'About Us',
+    text: 'We are dedicated to creating beautiful, functional, and accessible components that help developers build amazing websites and applications.',
+  },
+};
+
+// With image
+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',
+    imageAlt: 'Team collaboration',
+  },
+};
+
+// Small size
+export const Small: Story = {
+  args: {
+    ...Default.args,
+    size: 'sm',
+  },
+};
+
+// Large size
+export const Large: Story = {
+  args: {
+    ...Default.args,
+    size: 'lg',
+  },
+};
+
+// Skeleton loading state
+export const Skeleton: Story = {
+  args: {
+    ...Default.args,
+    skeleton: true,
+  },
+};
+
+// Full example with all features
+export const FullExample: Story = {
+  args: {
+    title: 'Building the Future Together',
+    label: 'Our Vision',
+    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',
+    showOverlay: true,
+    actions: (
+      <div className="u-flex u-gap-md u-justify-center">
+        <Button label="Get Started" size="lg" />
+        <Button label="Learn More" size="lg" variant="secondary" />
+      </div>
+    ),
+  },
+};

package/src/components/SectionIntro/SectionIntro.tsx

@@ -0,0 +1,197 @@
+import React, { useRef, useEffect, ReactNode } from 'react';
+import { SECTION_INTRO } from '../../lib/constants/components';
+
+export interface SectionIntroProps {
+  /**
+   * The section title
+   */
+  title: ReactNode;
+
+  /**
+   * Optional subtitle or overline text
+   */
+  /**
+   * Optional label text (equivalent to subtitle in the UI)
+   */
+  label?: ReactNode;
+
+  /**
+   * Optional description text
+   */
+  /**
+   * 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
+   */
+  className?: string;
+}
+
+/**
+ * SectionIntro component for introducing content sections with titles, descriptions, and optional imagery
+ */
+export const SectionIntro: React.FC<SectionIntroProps> = ({
+  title,
+  label,
+  text,
+  actions,
+  alignment = 'left',
+  backgroundImageSrc,
+  showOverlay = false,
+  imageSrc,
+  imageAlt = 'Section image',
+  size = 'md',
+  skeleton = false,
+  className = '',
+}) => {
+  const sectionIntroRef = useRef<HTMLDivElement>(null);
+  const sectionIntroInstance = useRef<any>(null);
+
+  useEffect(() => {
+    // Only run on client-side
+    if (typeof window === 'undefined' || !sectionIntroRef.current) return undefined;
+
+    // Dynamically import the section intro script to avoid server-side rendering issues
+    import('./scripts').then(({ default: SectionIntroClass }) => {
+      if (sectionIntroRef.current) {
+        sectionIntroInstance.current = new SectionIntroClass(sectionIntroRef.current, {
+          alignment,
+          backgroundImageSrc,
+          showOverlay,
+          size,
+          skeleton,
+        });
+      }
+    });
+
+    // Cleanup on unmount
+    return () => {
+      if (sectionIntroInstance.current) {
+        sectionIntroInstance.current.destroy();
+      }
+    };
+  }, [alignment, backgroundImageSrc, showOverlay, size, skeleton]);
+
+  // Determine CSS classes
+  const sectionIntroClasses = [
+    'c-sectionintro',
+    alignment === 'center' ? SECTION_INTRO.CLASSES.CENTER : '',
+    size === 'sm' ? SECTION_INTRO.CLASSES.SMALL : '',
+    size === 'lg' ? SECTION_INTRO.CLASSES.LARGE : '',
+    backgroundImageSrc ? 'c-sectionintro--has-bg' : '',
+    className,
+  ]
+    .filter(Boolean)
+    .join(' ');
+
+  // Render skeleton version
+  if (skeleton) {
+    return (
+      <div className={sectionIntroClasses} ref={sectionIntroRef}>
+        <div className="c-sectionintro__container o-container">
+          {label && (
+            <div className="c-sectionintro__label">
+              <span className="c-skeleton u-w-25"></span>
+            </div>
+          )}
+          <div className="c-sectionintro__title">
+            <span className="c-skeleton"></span>
+          </div>
+          {text && (
+            <div className="c-sectionintro__text">
+              <span className="c-skeleton"></span>
+              <span className="c-skeleton"></span>
+              <span className="c-skeleton u-w-75"></span>
+            </div>
+          )}
+          {actions && (
+            <div className="c-sectionintro__actions">
+              <span className="c-skeleton u-w-25"></span>
+            </div>
+          )}
+          {imageSrc && (
+            <div className="c-sectionintro__image-wrapper">
+              <div className="c-sectionintro__image c-skeleton"></div>
+            </div>
+          )}
+        </div>
+      </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" />
+        {showOverlay && <div className="c-sectionintro__overlay"></div>}
+      </div>
+    );
+  };
+
+  // Render normal version
+  return (
+    <div className={sectionIntroClasses} ref={sectionIntroRef}>
+      {renderBackground()}
+      <div className="c-sectionintro__container o-container">
+        {label && <div className="c-sectionintro__label">{label}</div>}
+        <h2 className="c-sectionintro__title">{title}</h2>
+        {text && <div className="c-sectionintro__text">{text}</div>}
+        {actions && <div className="c-sectionintro__actions">{actions}</div>}
+        {imageSrc && (
+          <div className="c-sectionintro__image-wrapper">
+            <img src={imageSrc} alt={imageAlt} className="c-sectionintro__image" />
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+SectionIntro.displayName = 'SectionIntro';
+
+export default SectionIntro;

package/src/components/SectionIntro/index.ts

@@ -0,0 +1,3 @@
+export { SectionIntro } from './SectionIntro';
+export type { SectionIntroProps } from './SectionIntro';
+export { default } from './SectionIntro';

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

@@ -0,0 +1,9 @@
+/**
+ * Bundle file for SectionIntro component
+ * This file exports all the necessary scripts for the SectionIntro component
+ */
+
+import SectionIntro, { initializeSectionIntros } from './index';
+
+export { SectionIntro, initializeSectionIntros };
+export default SectionIntro;

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

@@ -0,0 +1,37 @@
+/**
+ * Component interactions for SectionIntro
+ * This file contains any interactive behaviors for the SectionIntro component
+ */
+
+import { SECTION_INTRO } from '../../../lib/constants/components';
+
+/**
+ * Apply any interactive behaviors to SectionIntro components
+ * @param element - The SectionIntro element to enhance
+ */
+export function enhanceSectionIntro(element: HTMLElement): void {
+  // Currently no interactive behaviors needed for SectionIntro
+  // This function is a placeholder for future interactive features
+}
+
+/**
+ * Initialize all SectionIntro components in the document
+ */
+export function initializeSectionIntroInteractions(): void {
+  const sectionIntros = document.querySelectorAll(SECTION_INTRO.SELECTORS.SECTION_INTRO);
+
+  sectionIntros.forEach(element => {
+    if (element instanceof HTMLElement) {
+      enhanceSectionIntro(element);
+    }
+  });
+}
+
+// Auto-initialize when the DOM is ready
+if (typeof document !== 'undefined') {
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', initializeSectionIntroInteractions);
+  } else {
+    initializeSectionIntroInteractions();
+  }
+}

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

@@ -0,0 +1,163 @@
+import { SECTION_INTRO } from '../../../lib/constants/components';
+
+/**
+ * Interface for SectionIntro options
+ */
+interface SectionIntroOptions {
+  alignment?: 'left' | 'center' | 'right';
+  backgroundImageSrc?: string;
+  showOverlay?: boolean;
+  size?: 'sm' | 'md' | 'lg';
+  skeleton?: boolean;
+  [key: string]: any;
+}
+
+/**
+ * Interface for SectionIntro instance
+ */
+interface SectionIntroInstance {
+  destroy: () => void;
+}
+
+/**
+ * Default options for the SectionIntro component
+ */
+const DEFAULT_OPTIONS: SectionIntroOptions = {
+  alignment: 'left',
+  showOverlay: false,
+  size: 'md',
+  skeleton: false,
+};
+
+/**
+ * Class representing a SectionIntro component
+ */
+class SectionIntro implements SectionIntroInstance {
+  private selector: string | Element;
+  private $element: HTMLElement | null;
+  private options: SectionIntroOptions;
+
+  /**
+   * Creates an instance of SectionIntro
+   * @param selector - CSS selector string or DOM Element
+   * @param options - Custom options to override defaults
+   */
+  constructor(selector: string | Element, options = {}) {
+    this.selector = selector || SECTION_INTRO.SELECTORS.SECTION_INTRO;
+    this.$element =
+      typeof selector === 'string'
+        ? document.querySelector<HTMLElement>(selector)
+        : (selector as HTMLElement);
+    this.options = { ...DEFAULT_OPTIONS, ...options } as SectionIntroOptions;
+    this._initialize();
+  }
+
+  /**
+   * Initialize the section intro component
+   */
+  private _initialize(): void {
+    if (!this.$element) return;
+
+    // Apply alignment classes if needed
+    if (
+      this.options.alignment === 'center' &&
+      !this.$element.classList.contains(SECTION_INTRO.CLASSES.CENTER)
+    ) {
+      this.$element.classList.add(SECTION_INTRO.CLASSES.CENTER);
+    }
+
+    // Apply size classes if specified
+    if (
+      this.options.size === 'sm' &&
+      !this.$element.classList.contains(SECTION_INTRO.CLASSES.SMALL)
+    ) {
+      this.$element.classList.add(SECTION_INTRO.CLASSES.SMALL);
+    } else if (
+      this.options.size === 'lg' &&
+      !this.$element.classList.contains(SECTION_INTRO.CLASSES.LARGE)
+    ) {
+      this.$element.classList.add(SECTION_INTRO.CLASSES.LARGE);
+    }
+
+    // Add background image if provided
+    if (this.options.backgroundImageSrc) {
+      let bgElement = this.$element.querySelector('.c-sectionintro__bg');
+
+      // Create background element if it doesn't exist
+      if (!bgElement) {
+        bgElement = document.createElement('div');
+        bgElement.className = 'c-sectionintro__bg';
+
+        const imgElement = document.createElement('img');
+        imgElement.className = 'c-sectionintro__bg-image';
+        imgElement.src = this.options.backgroundImageSrc;
+        imgElement.alt = 'Background';
+
+        bgElement.appendChild(imgElement);
+
+        // Add overlay if needed
+        if (this.options.showOverlay) {
+          const overlayElement = document.createElement('div');
+          overlayElement.className = 'c-sectionintro__overlay';
+          bgElement.appendChild(overlayElement);
+        }
+
+        // Insert at the beginning of the element
+        this.$element.insertBefore(bgElement, this.$element.firstChild);
+      }
+    }
+  }
+
+  /**
+   * Clean up event listeners and remove added elements
+   */
+  public destroy(): void {
+    if (!this.$element) return;
+
+    // Remove alignment classes
+    this.$element.classList.remove(SECTION_INTRO.CLASSES.CENTER);
+
+    // Remove size classes
+    this.$element.classList.remove(SECTION_INTRO.CLASSES.SMALL);
+    this.$element.classList.remove(SECTION_INTRO.CLASSES.LARGE);
+
+    // Remove background if it was dynamically added
+    if (this.options.backgroundImageSrc) {
+      const bgElement = this.$element.querySelector('.c-sectionintro__bg');
+      if (bgElement) {
+        this.$element.removeChild(bgElement);
+      }
+    }
+  }
+}
+
+/**
+ * Initialize all section intros in the document
+ * @param {string|Element} selector - CSS selector string or DOM Element
+ * @param {Object} options - Custom options to override defaults
+ * @returns {SectionIntroInstance[]} Array of SectionIntro instances
+ */
+export function initializeSectionIntros(
+  selector = SECTION_INTRO.SELECTORS.SECTION_INTRO,
+  options = {}
+): SectionIntroInstance[] {
+  const sectionIntroInstances: SectionIntroInstance[] = [];
+  const sectionIntroElements = document.querySelectorAll<HTMLElement>(
+    typeof selector === 'string' ? selector : SECTION_INTRO.SELECTORS.SECTION_INTRO
+  );
+
+  if (!sectionIntroElements.length) return sectionIntroInstances;
+
+  sectionIntroElements.forEach(element => {
+    try {
+      const instance = new SectionIntro(element, options);
+      sectionIntroInstances.push(instance);
+    } catch (error) {
+      console.error('Error initializing section intro:', error);
+    }
+  });
+
+  return sectionIntroInstances;
+}
+
+export default SectionIntro;