@shohojdhara/atomix 0.1.30 → 0.2.1

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,134 @@
+import React 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 {
+    generateRiverClassNames,
+    generateContentClass,
+    generateVisualClass,
+    hasBackgroundImage,
+    hasForegroundImage,
+    textContent,
+  } = useRiver({
+    title,
+    text,
+    imageSrc,
+    imageAlt,
+    center,
+    breakout,
+    reverse,
+    backgroundImageSrc,
+    showOverlay,
+    contentWidth,
+  });
+
+  // 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)} 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)} 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/index.ts

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

package/src/components/SectionIntro/SectionIntro.stories.tsx

@@ -0,0 +1,143 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Button } from '../Button';
+import { SectionIntro } from './SectionIntro';
+
+const meta: Meta<typeof SectionIntro> = {
+  title: 'Components/SectionIntro',
+  component: SectionIntro,
+  parameters: {
+    layout: 'padded',
+  },
+  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

@@ -0,0 +1,184 @@
+import React, { ReactNode, useEffect, useRef } 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;
+
+    // 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">
+          {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

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