@shohojdhara/atomix 0.1.27 → 0.1.28

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

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

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

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

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

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

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

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

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