@shohojdhara/atomix 0.1.16 → 0.1.17

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

@@ -1,331 +0,0 @@
-import type { RatingProps, Size, ThemeColor } from '../../../lib/types/components';
-
-/**
- * Rating component class for vanilla JavaScript implementation
- */
-export type RatingOptions = Pick<RatingProps, 
-  'value' | 
-  'defaultValue' | 
-  'maxValue' | 
-  'allowHalf' | 
-  'readOnly' | 
-  'size' | 
-  'color' | 
-  'onChange'
->;
-
-// Define default options
-const DEFAULTS = {
-  value: 0,
-  maxValue: 5,
-  allowHalf: false,
-  readOnly: false,
-  size: 'md' as Size,
-};
-
-/**
- * Rating component class for vanilla JavaScript implementation
- */
-export default class Rating {
-  element: HTMLElement;
-  options: RatingOptions;
-  stars: NodeListOf<HTMLElement> | null = null;
-  private _currentValue: number;
-  private _boundHandleMouseEnter: (event: MouseEvent) => void;
-  private _boundHandleMouseLeave: (event: MouseEvent) => void;
-  private _boundHandleClick: (event: MouseEvent) => void;
-  private _boundHandleKeyDown: (event: KeyboardEvent) => void;
-  
-  /**
-   * Create a new Rating instance
-   * @param element - The element to attach the rating to
-   * @param options - Configuration options
-   */
-  constructor(element: string | HTMLElement, options: RatingOptions = {}) {
-    this.element = typeof element === 'string' ? document.querySelector(element) as HTMLElement : element;
-    if (!this.element) {
-      throw new Error('Rating: Element not found');
-    }
-    
-    this.options = { ...DEFAULTS, ...options };
-    this._currentValue = this.options.value || 0;
-    
-    // Bind event handlers to this instance
-    this._boundHandleMouseEnter = this._handleMouseEnter.bind(this);
-    this._boundHandleMouseLeave = this._handleMouseLeave.bind(this);
-    this._boundHandleClick = this._handleClick.bind(this);
-    this._boundHandleKeyDown = this._handleKeyDown.bind(this);
-    
-    // Store reference to instance on element
-    (this.element as any)._rating = this;
-    
-    this._init();
-  }
-  
-  /**
-   * Initialize the component
-   */
-  private _init(): void {
-    // Set data attributes
-    this.element.setAttribute('data-max-value', String(this.options.maxValue));
-    this.element.setAttribute('data-allow-half', String(this.options.allowHalf));
-    this.element.setAttribute('data-readonly', String(this.options.readOnly));
-    
-    // Set ARIA attributes
-    if (this.options.readOnly) {
-      this.element.setAttribute('role', 'img');
-      this.element.setAttribute('aria-label', `Rating: ${this._currentValue} out of ${this.options.maxValue} stars`);
-    } else {
-      this.element.setAttribute('role', 'radiogroup');
-    }
-    
-    // Add CSS classes
-    if (this.options.size && this.options.size !== 'md') {
-      this.element.classList.add(`c-rating--${this.options.size}`);
-    }
-    
-    if (this.options.color) {
-      this.element.classList.add(`c-rating--${this.options.color}`);
-    }
-    
-    // Get all stars
-    this.stars = this.element.querySelectorAll('.c-rating__star');
-    
-    // Set initial state
-    this._updateStars();
-    
-    // Bind events if not read-only
-    if (!this.options.readOnly) {
-      this._bindEvents();
-    }
-    
-    // Dispatch init event
-    this.element.dispatchEvent(new CustomEvent('rating:init', {
-      bubbles: true,
-      detail: { instance: this }
-    }));
-  }
-  
-  /**
-   * Bind event listeners
-   */
-  private _bindEvents(): void {
-    if (!this.stars) return;
-    
-    // Add event listeners to each star
-    this.stars.forEach((star) => {
-      star.addEventListener('mouseenter', this._boundHandleMouseEnter);
-      star.addEventListener('click', this._boundHandleClick);
-      star.addEventListener('keydown', this._boundHandleKeyDown);
-      
-      // Make stars focusable
-      star.setAttribute('tabindex', '0');
-      star.setAttribute('role', 'button');
-    });
-    
-    // Add mouseleave to the container
-    this.element.addEventListener('mouseleave', this._boundHandleMouseLeave);
-  }
-  
-  /**
-   * Handle mouse enter on a star
-   */
-  private _handleMouseEnter(event: MouseEvent): void {
-    if (this.options.readOnly) return;
-    
-    const target = event.currentTarget as HTMLElement;
-    const value = Number(target.getAttribute('data-value'));
-    
-    this._highlightStars(value);
-  }
-  
-  /**
-   * Handle mouse leave from rating component
-   */
-  private _handleMouseLeave(): void {
-    if (this.options.readOnly) return;
-    
-    this._updateStars();
-  }
-  
-  /**
-   * Handle click on a star
-   */
-  private _handleClick(event: MouseEvent): void {
-    if (this.options.readOnly) return;
-    
-    const target = event.currentTarget as HTMLElement;
-    const value = Number(target.getAttribute('data-value'));
-    
-    this.setValue(value);
-    
-    if (this.options.onChange) {
-      this.options.onChange(value);
-    }
-  }
-  
-  /**
-   * Handle keyboard navigation
-   */
-  private _handleKeyDown(event: KeyboardEvent): void {
-    if (this.options.readOnly) return;
-    
-    const target = event.currentTarget as HTMLElement;
-    const index = Number(target.getAttribute('data-value'));
-    const step = this.options.allowHalf ? 0.5 : 1;
-    let newValue = this._currentValue;
-    
-    switch (event.key) {
-      case 'ArrowRight':
-      case 'ArrowUp':
-        newValue = Math.min(this.options.maxValue || 5, this._currentValue + step);
-        event.preventDefault();
-        break;
-      case 'ArrowLeft':
-      case 'ArrowDown':
-        newValue = Math.max(0, this._currentValue - step);
-        event.preventDefault();
-        break;
-      case 'Home':
-        newValue = 0;
-        event.preventDefault();
-        break;
-      case 'End':
-        newValue = this.options.maxValue || 5;
-        event.preventDefault();
-        break;
-      case ' ':
-      case 'Enter':
-        newValue = index;
-        event.preventDefault();
-        break;
-      default:
-        return;
-    }
-    
-    if (newValue !== this._currentValue) {
-      this.setValue(newValue);
-      
-      if (this.options.onChange) {
-        this.options.onChange(newValue);
-      }
-    }
-  }
-  
-  /**
-   * Update star appearance based on current value
-   */
-  private _updateStars(): void {
-    if (!this.stars) return;
-    
-    const roundedValue = this.options.allowHalf 
-      ? Math.floor(this._currentValue * 2) / 2 
-      : Math.round(this._currentValue);
-    
-    this.stars.forEach((star) => {
-      const starValue = Number(star.getAttribute('data-value'));
-      const isFullStar = starValue <= Math.floor(roundedValue);
-      const isHalfStar = this.options.allowHalf && (starValue - 0.5 === roundedValue);
-      
-      // Remove existing classes
-      star.classList.remove('c-rating__star--full', 'c-rating__star--half');
-      
-      // Add appropriate classes
-      if (isFullStar) {
-        star.classList.add('c-rating__star--full');
-      } else if (isHalfStar) {
-        star.classList.add('c-rating__star--half');
-      }
-      
-      // Update ARIA attributes
-      star.setAttribute('aria-checked', isFullStar || isHalfStar ? 'true' : 'false');
-    });
-    
-    // Update container ARIA label if read-only
-    if (this.options.readOnly) {
-      this.element.setAttribute('aria-label', `Rating: ${roundedValue} out of ${this.options.maxValue} stars`);
-    }
-    
-    // Update data attribute
-    this.element.setAttribute('data-value', String(roundedValue));
-  }
-  
-  /**
-   * Temporarily highlight stars up to a value
-   */
-  private _highlightStars(value: number): void {
-    if (!this.stars) return;
-    
-    this.stars.forEach((star) => {
-      const starValue = Number(star.getAttribute('data-value'));
-      
-      // Remove existing classes
-      star.classList.remove('c-rating__star--full', 'c-rating__star--half');
-      
-      // Add full class if star value is less than or equal to hovered value
-      if (starValue <= value) {
-        star.classList.add('c-rating__star--full');
-      }
-    });
-  }
-  
-  /**
-   * Get current rating value
-   */
-  public getValue(): number {
-    return this._currentValue;
-  }
-  
-  /**
-   * Set the rating value
-   * @param value - The new rating value
-   */
-  public setValue(value: number): void {
-    // Clamp value between 0 and maxValue
-    const clampedValue = Math.max(0, Math.min(value, this.options.maxValue || 5));
-    
-    // Update current value
-    this._currentValue = clampedValue;
-    
-    // Update visual state
-    this._updateStars();
-    
-    // Dispatch change event
-    this.element.dispatchEvent(new CustomEvent('rating:change', {
-      bubbles: true,
-      detail: { value: clampedValue }
-    }));
-  }
-  
-  /**
-   * Update component options
-   * @param options Partial options to update
-   */
-  public updateOptions(options: Partial<RatingOptions>): void {
-    // Update options
-    this.options = { ...this.options, ...options };
-    
-    // Re-initialize component with new options
-    this._init();
-  }
-  
-  /**
-   * Destroy the rating component and remove event listeners
-   */
-  public destroy(): void {
-    if (this.stars) {
-      // Remove event listeners from stars
-      this.stars.forEach((star) => {
-        star.removeEventListener('mouseenter', this._boundHandleMouseEnter);
-        star.removeEventListener('click', this._boundHandleClick);
-        star.removeEventListener('keydown', this._boundHandleKeyDown);
-      });
-    }
-    
-    // Remove event listener from container
-    this.element.removeEventListener('mouseleave', this._boundHandleMouseLeave);
-    
-    // Remove reference from element
-    delete (this.element as any)._rating;
-  }
-}

package/src/components/Rating/scripts/ratingInteractions.ts

@@ -1,157 +0,0 @@
-import Rating from './index';
-// RatingOptions is used in other functions in this file
-
-/**
- * Event handlers and utility functions for Rating component
- */
-
-/**
- * Handle keyboard navigation for rating stars
- * @param event Keyboard event
- * @param container Rating container element
- */
-export function handleKeyboardNavigation(event: KeyboardEvent, container: HTMLElement): void {
-  if (!container) return;
-  
-  const stars = container.querySelectorAll<HTMLElement>('.c-rating__star');
-  if (!stars.length) return;
-  
-  const currentIndex = Array.from(stars).findIndex(item => item === document.activeElement);
-  let nextIndex = -1;
-  
-  switch (event.key) {
-    case 'ArrowRight':
-    case 'ArrowUp':
-      event.preventDefault();
-      nextIndex = currentIndex < stars.length - 1 ? currentIndex + 1 : 0;
-      break;
-      
-    case 'ArrowLeft':
-    case 'ArrowDown':
-      event.preventDefault();
-      nextIndex = currentIndex > 0 ? currentIndex - 1 : stars.length - 1;
-      break;
-      
-    case 'Home':
-      event.preventDefault();
-      nextIndex = 0;
-      break;
-      
-    case 'End':
-      event.preventDefault();
-      nextIndex = stars.length - 1;
-      break;
-      
-    case ' ':
-    case 'Enter':
-      event.preventDefault();
-      if (currentIndex >= 0 && stars[currentIndex]) {
-        stars[currentIndex].click();
-      }
-      break;
-  }
-  
-  if (nextIndex >= 0 && stars[nextIndex]) {
-    stars[nextIndex].focus();
-  }
-}
-
-/**
- * Enhance a rating with keyboard navigation
- * @param rating Rating instance
- */
-export function enhanceWithKeyboardNavigation(rating: Rating): void {
-  const element = rating.element;
-  if (!element) return;
-  
-  element.addEventListener('keydown', (e: KeyboardEvent) => {
-    handleKeyboardNavigation(e, element);
-  });
-  
-  // Make stars focusable
-  const stars = element.querySelectorAll<HTMLElement>('.c-rating__star');
-  stars.forEach(star => {
-    if (!star.hasAttribute('tabindex')) {
-      star.setAttribute('tabindex', '0');
-    }
-    star.setAttribute('role', 'button');
-    star.setAttribute('aria-label', `Rate ${Array.from(stars).indexOf(star) + 1} out of ${stars.length}`);
-  });
-}
-
-/**
- * Initialize ratings with data attributes
- */
-export function initFromDataAttributes(): Rating[] {
-  const instances: Rating[] = [];
-  
-  document.querySelectorAll('[data-rating]').forEach(element => {
-    const el = element as HTMLElement;
-    
-    // Parse options from data attributes
-    const options: Record<string, any> = {};
-    
-    // Value
-    if (el.dataset.value) {
-      options.value = parseFloat(el.dataset.value);
-    }
-    
-    // Max value
-    if (el.dataset.maxValue) {
-      options.maxValue = parseFloat(el.dataset.maxValue);
-    }
-    
-    // Allow half
-    if (el.dataset.allowHalf !== undefined) {
-      options.allowHalf = el.dataset.allowHalf === 'true';
-    }
-    
-    // Read only
-    if (el.dataset.readOnly !== undefined) {
-      options.readOnly = el.dataset.readOnly === 'true';
-    }
-    
-    // Size
-    if (el.dataset.size) {
-      options.size = el.dataset.size;
-    }
-    
-    // Color
-    if (el.dataset.color) {
-      options.color = el.dataset.color;
-    }
-    
-    const instance = new Rating(el, options);
-    instances.push(instance);
-    
-    // Enhance with keyboard navigation
-    enhanceWithKeyboardNavigation(instance);
-  });
-  
-  return instances;
-}
-
-/**
- * Get a Rating instance from an element
- * @param element Element or selector
- */
-export function getInstance(element: string | HTMLElement): Rating | null {
-  const el = typeof element === 'string' ? document.querySelector(element) : element;
-  
-  if (!el) return null;
-  
-  // Use a stored reference if exists
-  return (el as any)._rating || null;
-}
-
-/**
- * Dispose all Rating instances
- */
-export function disposeAll(): void {
-  document.querySelectorAll('[data-rating]').forEach(element => {
-    const instance = getInstance(element as HTMLElement);
-    if (instance) {
-      instance.destroy();
-    }
-  });
-}

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

@@ -1,184 +0,0 @@
-import React from 'react';
-import { StoryFn, Meta } from '@storybook/react';
-import { River } from './River';
-import type { RiverProps } from './River';
-
-export default {
-  title: 'Components/River',
-  component: River,
-  argTypes: {
-    center: {
-      control: { type: 'boolean' },
-      defaultValue: false,
-    },
-    breakout: {
-      control: { type: 'boolean' },
-      defaultValue: false,
-    },
-    reverse: {
-      control: { type: 'boolean' },
-      defaultValue: false,
-    },
-    backgroundImageSrc: {
-      control: { type: 'text' },
-      description: 'Background image source URL',
-    },
-    showOverlay: {
-      control: { type: 'boolean' },
-      defaultValue: true,
-      description: 'Show background overlay',
-    },
-    contentWidth: {
-      control: { type: 'text' },
-      description: 'Custom width for the river content (e.g., "800px", "50%")',
-    },
-  },
-} as Meta<typeof River>;
-
-const Template: StoryFn<typeof River> = (args) => (
-  <div style={{ padding: '0', maxWidth: '100%' }}>
-    <River {...args} />
-  </div>
-);
-
-// Default river (image left, content right)
-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>,
-  imageSrc: 'https://unsplash.it/g/500/300',
-  imageAlt: 'Workflow diagram',
-};
-
-// Reverse layout (content left, image right)
-export const Reverse = Template.bind({});
-Reverse.args = {
-  ...Default.args,
-  title: 'Data-Driven Insights',
-  text: 'Harness the power of analytics to make informed decisions. Our advanced data visualization tools help you understand trends and identify opportunities for growth.',
-  reverse: true,
-};
-
-// Center layout (content centered)
-export const Centered = Template.bind({});
-Centered.args = {
-  ...Default.args,
-  title: 'Award-Winning Support',
-  text: 'Our dedicated team of experts is available around the clock to provide assistance and ensure your success. Experience the highest level of customer service.',
-  center: true,
-};
-
-// Breakout layout (full width)
-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.',
-  breakout: true,
-};
-
-// Multi-paragraph text
-export const MultiParagraph = Template.bind({});
-MultiParagraph.args = {
-  ...Default.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.'
-  ],
-  actions: <a href="#" className="c-btn c-btn--primary">Learn More</a>,
-};
-
-// Content columns
-export const ContentColumns = Template.bind({});
-ContentColumns.args = {
-  contentColumns: [
-    {
-      type: 'title',
-      content: <h2 className="c-river__title">Flexible Content Layout</h2>,
-    },
-    {
-      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>
-        </div>
-      ),
-    },
-  ],
-  actions: <a href="#" className="c-btn c-btn--primary">Explore Options</a>,
-  imageSrc: 'https://unsplash.it/g/500/300',
-};
-
-// Custom title styling
-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>,
-  imageSrc: 'https://unsplash.it/g/712/196',
-  imageAlt: 'Image',
-};
-
-// With background image
-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>,
-  imageSrc: 'https://unsplash.it/g/500/300',
-  backgroundImageSrc: 'https://unsplash.it/g/1920/600',
-  showOverlay: true,
-};
-
-// With custom content width
-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>,
-  imageSrc: 'https://unsplash.it/g/500/300',
-  contentWidth: '800px',
-};
-
-// Multiple Rivers layout example
-const MultipeRiversExample: React.FC = () => {
-  return (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: '40px' }}>
-      <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>}
-        imageSrc="https://unsplash.it/g/712/196"
-      />
-      
-      <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>}
-        imageSrc="https://unsplash.it/g/712/196"
-        reverse={true}
-      />
-      
-      <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>}
-        imageSrc="https://unsplash.it/g/1920/320"
-        center={true}
-      />
-      
-      <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>}
-        backgroundImageSrc="https://unsplash.it/g/1920/600"
-      />
-    </div>
-  );
-};
-
-export const MultipleRivers: StoryFn<typeof River> = () => <MultipeRiversExample />;