@shohojdhara/atomix 0.1.17 → 0.1.18

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

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

package/src/components/River/River.tsx

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

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

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