@shohojdhara/atomix 0.1.16 → 0.1.17

package/src/components/SectionIntro/SectionIntro.tsx

@@ -1,203 +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,149 +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;

package/src/components/Spinner/Spinner.stories.tsx

@@ -1,68 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { Spinner } from './Spinner';
-
-const meta = {
-  title: 'Components/Spinner',
-  component: Spinner,
-  parameters: {
-    layout: 'centered',
-  },
-  tags: ['autodocs'],
-  argTypes: {
-    variant: {
-      control: { type: 'select' },
-      options: [
-        'primary', 'secondary', 'success', 'info', 'warning', 'error', 'light', 'dark'
-      ],
-      description: 'The color variant of the spinner'
-    },
-    size: {
-      control: { type: 'select' },
-      options: ['sm', 'md', 'lg'],
-      description: 'The size of the spinner'
-    },
-    fullscreen: {
-      control: 'boolean',
-      description: 'Whether the spinner should be centered and fixed in the viewport'
-    },
-  },
-} satisfies Meta<typeof Spinner>;
-
-export default meta;
-type Story = StoryObj<typeof Spinner>;
-
-// Default Spinner
-export const Default: Story = {
-  args: {
-    variant: 'primary',
-    size: 'md',
-    fullscreen: false,
-  },
-};
-
-// Size Variants
-export const Sizes: Story = {
-  render: () => (
-    <div className="u-d-flex u-flex-wrap u-gap-3 u-align-items-center">
-      <Spinner size="sm" />
-      <Spinner size="md" />
-      <Spinner size="lg" />
-    </div>
-  ),
-};
-
-// Color Variants
-export const ColorVariants: Story = {
-  render: () => (
-    <div className="u-d-flex u-flex-wrap u-gap-3 u-align-items-center">
-      <Spinner variant="primary" />
-      <Spinner variant="secondary" />
-      <Spinner variant="success" />
-      <Spinner variant="info" />
-      <Spinner variant="warning" />
-      <Spinner variant="error" />
-      <Spinner variant="light" />
-      <Spinner variant="dark" />
-    </div>
-  ),
-}; 

package/src/components/Spinner/Spinner.tsx

@@ -1,31 +0,0 @@
-import React from 'react';
-import { SpinnerProps } from '../../lib/types/components';
-import { useSpinner } from '../../lib/composables/useSpinner';
-import { SPINNER } from '../../lib/constants/components';
-
-export const Spinner: React.FC<SpinnerProps> = ({
-  size = 'md',
-  variant = 'primary',
-  fullscreen = false,
-  className = '',
-}) => {
-  const { generateSpinnerClass } = useSpinner({ 
-    size, variant, fullscreen 
-  });
-  
-  const spinnerClass = generateSpinnerClass({ 
-    size, variant, fullscreen, className 
-  });
-  
-  return (
-    <div className={spinnerClass} role="status">
-      <span className={SPINNER.VISUALLY_HIDDEN}>Loading...</span>
-    </div>
-  );
-};
-
-export type { SpinnerProps };
-
-Spinner.displayName = 'Spinner';
-
-export default Spinner;

package/src/components/Spinner/index.ts

@@ -1,2 +0,0 @@
-export {   Spinner } from './Spinner'; 
-export type { SpinnerProps } from './Spinner';

package/src/components/Steps/Steps.stories.tsx

@@ -1,162 +0,0 @@
-import React from 'react';
-import { StoryFn, Meta } from '@storybook/react';
-import { Steps } from './Steps';
-import type { StepsProps } from './Steps';
-
-export default {
-  title: 'Components/Steps',
-  component: Steps,
-  argTypes: {
-    activeIndex: {
-      control: { type: 'number' },
-      defaultValue: 1,
-    },
-    vertical: {
-      control: { type: 'boolean' },
-      defaultValue: false,
-    },
-    onStepChange: { action: 'step changed' },
-  },
-} as Meta<typeof Steps>;
-
-const Template: StoryFn<typeof Steps> = (args) => (
-  <div style={{ padding: '30px' }}>
-    <Steps {...args} />
-  </div>
-);
-
-// Default horizontal steps
-export const Default = Template.bind({});
-Default.args = {
-  items: [
-    { number: 1, text: 'Step 1' },
-    { number: 2, text: 'Step 2' },
-    { number: 3, text: 'Step 3' },
-    { number: 4, text: 'Step 4' },
-    { number: 5, text: 'Step 5' },
-  ],
-  activeIndex: 1,
-  vertical: false,
-};
-
-// Vertical steps
-export const Vertical = Template.bind({});
-Vertical.args = {
-  items: [
-    { number: 1, text: 'Step 1' },
-    { number: 2, text: 'Step 2' },
-    { number: 3, text: 'Step 3' },
-    { number: 4, text: 'Step 4' },
-    { number: 5, text: 'Step 5' },
-  ],
-  activeIndex: 1,
-  vertical: true,
-};
-
-// Steps with custom content
-export const WithCustomContent = Template.bind({});
-WithCustomContent.args = {
-  items: [
-    { 
-      number: 1, 
-      text: 'Registration', 
-      content: <p style={{ marginTop: '10px', fontSize: '0.85em' }}>Create your account</p>
-    },
-    { 
-      number: 2, 
-      text: 'Personal Info', 
-      content: <p style={{ marginTop: '10px', fontSize: '0.85em' }}>Tell us about yourself</p>
-    },
-    { 
-      number: 3, 
-      text: 'Preferences', 
-      content: <p style={{ marginTop: '10px', fontSize: '0.85em' }}>Select your preferences</p>
-    },
-    { 
-      number: 4, 
-      text: 'Payment', 
-      content: <p style={{ marginTop: '10px', fontSize: '0.85em' }}>Add payment information</p>
-    },
-    { 
-      number: 5, 
-      text: 'Confirmation', 
-      content: <p style={{ marginTop: '10px', fontSize: '0.85em' }}>Complete your signup</p>
-    },
-  ],
-  activeIndex: 1,
-  vertical: false,
-};
-
-// Steps with custom icons instead of numbers
-export const WithIcons = Template.bind({});
-WithIcons.args = {
-  items: [
-    { 
-      number: <i className="icon-lux-user" style={{ fontSize: '16px' }}></i>, 
-      text: 'Account'
-    },
-    { 
-      number: <i className="icon-lux-settings" style={{ fontSize: '16px' }}></i>, 
-      text: 'Settings'
-    },
-    { 
-      number: <i className="icon-lux-calendar" style={{ fontSize: '16px' }}></i>, 
-      text: 'Schedule'
-    },
-    { 
-      number: <i className="icon-lux-card" style={{ fontSize: '16px' }}></i>, 
-      text: 'Payment'
-    },
-    { 
-      number: <i className="icon-lux-check" style={{ fontSize: '16px' }}></i>, 
-      text: 'Complete'
-    },
-  ],
-  activeIndex: 1,
-  vertical: false,
-};
-
-// Interactive steps with buttons for navigation
-const InteractiveSteps: React.FC = () => {
-  const [activeStep, setActiveStep] = React.useState(0);
-  
-  const items = [
-    { number: 1, text: 'Step 1' },
-    { number: 2, text: 'Step 2' },
-    { number: 3, text: 'Step 3' },
-    { number: 4, text: 'Step 4' },
-    { number: 5, text: 'Step 5' },
-  ];
-  
-  return (
-    <div>
-      <Steps 
-        items={items}
-        activeIndex={activeStep}
-        onStepChange={setActiveStep}
-      />
-      <div style={{ marginTop: '30px', display: 'flex', gap: '10px' }}>
-        <button 
-          className="c-btn c-btn--primary" 
-          onClick={() => setActiveStep(Math.max(0, activeStep - 1))}
-          disabled={activeStep === 0}
-        >
-          Previous
-        </button>
-        <button 
-          className="c-btn c-btn--primary" 
-          onClick={() => setActiveStep(Math.min(items.length - 1, activeStep + 1))}
-          disabled={activeStep === items.length - 1}
-        >
-          Next
-        </button>
-      </div>
-    </div>
-  );
-};
-
-export const Interactive: StoryFn<typeof Steps> = () => (
-  <div style={{ padding: '30px' }}>
-    <InteractiveSteps />
-  </div>
-);