@shohojdhara/atomix 0.1.16 → 0.1.17

package/src/components/River/River.tsx

@@ -1,172 +0,0 @@
-import React, { useRef, useEffect } from 'react';
-import { RIVER } from '../../lib/constants/components';
-import { useRiver, RiverProps } from '../../lib/composables/useRiver';
-
-/**
- * River component for displaying content with image sections
- */
-export const River: React.FC<RiverProps> = ({
-  title,
-  text,
-  actions,
-  imageSrc,
-  imageAlt = 'Image',
-  center = false,
-  breakout = false,
-  reverse = false,
-  contentColumns,
-  backgroundImageSrc,
-  showOverlay = true,
-  contentWidth,
-  className = '',
-}) => {
-  const riverRef = useRef<HTMLDivElement>(null);
-  const riverInstance = useRef<any>(null);
-  
-  const { 
-    generateRiverClassNames,
-    generateContentClass,
-    generateVisualClass,
-    hasBackgroundImage,
-    hasForegroundImage,
-    textContent
-  } = useRiver({
-    title,
-    text,
-    imageSrc,
-    imageAlt,
-    center,
-    breakout,
-    reverse,
-    backgroundImageSrc,
-    showOverlay,
-    contentWidth
-  });
-  
-  useEffect(() => {
-    // Only run on client-side
-    if (typeof window === 'undefined' || !riverRef.current) return undefined;
-
-    // Dynamically import the river script to avoid server-side rendering issues
-    import('./scripts').then(({ default: RiverClass }) => {
-      if (riverRef.current) {
-        riverInstance.current = new RiverClass(riverRef.current, {
-          center,
-          breakout,
-          reverse,
-          backgroundImageSrc,
-          showOverlay
-        });
-      }
-    });
-    
-    // Cleanup on unmount
-    return () => {
-      if (riverInstance.current) {
-        riverInstance.current.destroy();
-      }
-    };
-  }, [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 renderBackground = () => {
-    if (!hasBackgroundImage) return null;
-    
-    return (
-      <div className={RIVER.SELECTORS.BG.replace('.', '')}>
-        <img
-          src={backgroundImageSrc}
-          alt="Background"
-          className={RIVER.SELECTORS.BG_IMAGE.replace('.', '')}
-        />
-        {showOverlay && <div className={RIVER.SELECTORS.OVERLAY.replace('.', '')}></div>}
-      </div>
-    );
-  };
-  
-  const renderContent = () => (
-    <div className={generateContentClass()}>
-      {title && (
-        <h2 className={RIVER.SELECTORS.TITLE.replace('.', '')}>{title}</h2>
-      )}
-      {textContent.map((paragraph, index) => (
-        <p key={index} className={RIVER.SELECTORS.TEXT.replace('.', '')}>{paragraph}</p>
-      ))}
-      {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('.', '')} 
-          />
-        </div>
-      </div>
-    );
-  };
-  
-  // Render with content columns (advanced layout)
-  if (contentColumns && contentColumns.length > 0) {
-    return (
-      <div className={generateRiverClassNames(className)} ref={riverRef} style={riverStyle}>
-        {renderBackground()}
-        <div className={`${RIVER.SELECTORS.CONTAINER.replace('.', '')} o-container`}>
-          <div className={RIVER.SELECTORS.ROW.replace('.', '')}>
-            {!reverse && renderImage()}
-            <div className={generateContentClass()}>
-              {contentColumns.map((column, index) => (
-                <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>
-              )}
-            </div>
-            {reverse && renderImage()}
-          </div>
-        </div>
-      </div>
-    );
-  }
-  
-  // Render with standard layout
-  return (
-    <div className={generateRiverClassNames(className)} ref={riverRef} style={riverStyle}>
-      {renderBackground()}
-      <div className={`${RIVER.SELECTORS.CONTAINER.replace('.', '')} o-container`}>
-        <div className={RIVER.SELECTORS.ROW.replace('.', '')}>
-          {!reverse && renderImage()}
-          {renderContent()}
-          {reverse && renderImage()}
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export type { RiverProps  };
-
-River.displayName = 'River';
-
-export default River;

package/src/components/River/examples.html

@@ -1,223 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>River Component Examples</title>
-  <link rel="stylesheet" href="../../styles/index.css">
-  <style>
-    /* Demo styles */
-    body {
-      margin: 0;
-      font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
-      color: #333;
-      line-height: 1.5;
-    }
-    .demo-section {
-      margin-bottom: 40px;
-      padding: 20px;
-      border-bottom: 1px solid #eee;
-    }
-    .demo-title {
-      font-size: 24px;
-      margin-bottom: 20px;
-      color: #555;
-    }
-    .pattern-bg {
-      background-color: #f5f7fa;
-      background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23e2e8f0' fill-opacity='0.4' fill-rule='evenodd'%3E%3Ccircle cx='3' cy='3' r='3'/%3E%3Ccircle cx='13' cy='13' r='3'/%3E%3C/g%3E%3C/svg%3E");
-    }
-  </style>
-</head>
-<body>
-  <div class="pattern-bg">
-    <div class="o-container">
-      <h1 style="padding: 40px 0 20px; text-align: center;">River Component Examples</h1>
-    </div>
-  </div>
-
-  <!-- Default River -->
-  <div class="demo-section">
-    <div class="o-container">
-      <h2 class="demo-title">Default River (Left Layout)</h2>
-    </div>
-    <div class="c-river">
-      <div class="c-river__container o-container">
-        <div class="c-river__row">
-          <div class="c-river__visual">
-            <div class="c-river__image-wrapper">
-              <img src="https://unsplash.it/g/500/300" alt="Image" class="c-river__image">
-            </div>
-          </div>
-          <div class="c-river__content">
-            <h2 class="c-river__title">Streamline Your Workflow</h2>
-            <p class="c-river__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.</p>
-            <div class="c-river__actions">
-              <a href="#" class="c-btn c-btn--primary">Get Started</a>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-
-  <!-- Reverse River -->
-  <div class="demo-section">
-    <div class="o-container">
-      <h2 class="demo-title">Reverse River (Right Layout)</h2>
-    </div>
-    <div class="c-river c-river--reverse">
-      <div class="c-river__container o-container">
-        <div class="c-river__row">
-          <div class="c-river__visual">
-            <div class="c-river__image-wrapper">
-              <img src="https://unsplash.it/g/500/300" alt="Image" class="c-river__image">
-            </div>
-          </div>
-          <div class="c-river__content">
-            <h2 class="c-river__title">TypeScript First Development</h2>
-            <p class="c-river__text">Every component includes full TypeScript definitions, giving you complete type safety and excellent IDE integration. Develop with confidence and fewer bugs.</p>
-            <div class="c-river__actions">
-              <a href="#" class="c-btn c-btn--primary">Read Docs</a>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-
-  <!-- Centered River -->
-  <div class="demo-section">
-    <div class="o-container">
-      <h2 class="demo-title">Centered River</h2>
-    </div>
-    <div class="c-river c-river--center">
-      <div class="c-river__container o-container">
-        <div class="c-river__row">
-          <div class="c-river__content">
-            <h2 class="c-river__title">Award-Winning Support</h2>
-            <p class="c-river__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.</p>
-            <div class="c-river__actions">
-              <a href="#" class="c-btn c-btn--primary">Contact Us</a>
-            </div>
-          </div>
-          <div class="c-river__visual">
-            <div class="c-river__image-wrapper">
-              <img src="https://unsplash.it/g/800/400" alt="Image" class="c-river__image">
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-
-  <!-- River with Background Image -->
-  <div class="demo-section">
-    <div class="o-container">
-      <h2 class="demo-title">River with Background Image</h2>
-    </div>
-    <div class="c-river">
-      <div class="c-river__bg">
-        <img src="https://unsplash.it/g/1920/600" alt="Background" class="c-river__bg-image">
-        <div class="c-river__overlay"></div>
-      </div>
-      <div class="c-river__container o-container">
-        <div class="c-river__row">
-          <div class="c-river__content">
-            <h2 class="c-river__title">Build Faster Applications</h2>
-            <p class="c-river__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.</p>
-            <div class="c-river__actions">
-              <a href="#" class="c-btn c-btn--light">View Documentation</a>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-
-  <!-- River with Content Columns -->
-  <div class="demo-section">
-    <div class="o-container">
-      <h2 class="demo-title">River with Content Columns</h2>
-    </div>
-    <div class="c-river">
-      <div class="c-river__container o-container">
-        <div class="c-river__row">
-          <div class="c-river__visual">
-            <div class="c-river__image-wrapper">
-              <img src="https://unsplash.it/g/500/300" alt="Image" class="c-river__image">
-            </div>
-          </div>
-          <div class="c-river__content">
-            <div class="c-river__content-col c-river__content-col--title">
-              <h2 class="c-river__title">Flexible Content Layout</h2>
-            </div>
-            <div class="c-river__content-col c-river__content-col--text">
-              <p class="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 class="c-river__text">Perfect for featuring important statistics, quotes, or highlighting key information alongside your main content.</p>
-            </div>
-            <div class="c-river__actions">
-              <a href="#" class="c-btn c-btn--primary">Explore Options</a>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-
-  <!-- River with Background Image and Foreground Image -->
-  <div class="demo-section">
-    <div class="o-container">
-      <h2 class="demo-title">River with Background and Foreground Images</h2>
-    </div>
-    <div class="c-river">
-      <div class="c-river__bg">
-        <img src="https://unsplash.it/g/1920/600" alt="Background" class="c-river__bg-image">
-        <div class="c-river__overlay"></div>
-      </div>
-      <div class="c-river__container o-container">
-        <div class="c-river__row">
-          <div class="c-river__visual">
-            <div class="c-river__image-wrapper">
-              <img src="https://unsplash.it/g/500/300" alt="Image" class="c-river__image">
-            </div>
-          </div>
-          <div class="c-river__content">
-            <h2 class="c-river__title">Combined Visual Elements</h2>
-            <p class="c-river__text">Combine foreground content with a background image for a rich, layered visual presentation. This approach creates visual hierarchy and draws attention to key information.</p>
-            <div class="c-river__actions">
-              <a href="#" class="c-btn c-btn--light">Explore</a>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-
-  <!-- Breakout River -->
-  <div class="demo-section" style="padding: 0; margin: 0;">
-    <div class="o-container">
-      <h2 class="demo-title" style="padding: 0 20px;">Breakout River (Full Width)</h2>
-    </div>
-    <div class="c-river c-river--breakout">
-      <div class="c-river__bg">
-        <img src="https://unsplash.it/g/1920/400" alt="Background" class="c-river__bg-image">
-        <div class="c-river__overlay"></div>
-      </div>
-      <div class="c-river__container o-container">
-        <div class="c-river__row">
-          <div class="c-river__content">
-            <h2 class="c-river__title">Scale With Confidence</h2>
-            <p class="c-river__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.</p>
-            <div class="c-river__actions">
-              <a href="#" class="c-btn c-btn--light">Learn More</a>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-
-  <script src="../../main.js"></script>
-</body>
-</html> 

package/src/components/River/index.ts

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

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

@@ -1,138 +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,142 +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>
-    ),
-  },
-};