@shohojdhara/atomix 0.1.30 → 0.2.2

package/src/components/Slider/Slider.tsx

@@ -0,0 +1,227 @@
+import { forwardRef, useMemo } from 'react';
+import { useSlider } from '../../lib/composables/useSlider';
+import { SliderProps } from '../../lib/types/components';
+
+export const Slider = forwardRef<HTMLDivElement, SliderProps>((props, ref) => {
+  const {
+    slides = [],
+    height = 300,
+    width = '100%',
+    slidesToShow = 1,
+    spaceBetween = 0,
+    loop = false,
+    initialSlide = 0,
+    direction = 'horizontal',
+    speed = 300,
+    allowTouchMove = true,
+    threshold = 50,
+    grabCursor = true,
+    autoplay,
+    navigation,
+    pagination,
+    className,
+    onSlideChange,
+    ...rest
+  } = props;
+
+  if (!slides || slides.length === 0) {
+    return (
+      <div className="c-slider c-slider--empty" style={{ height, width }}>
+        <div className="c-slider__empty-message">No slides available</div>
+      </div>
+    );
+  }
+
+  const slider = useSlider({
+    slides,
+    slidesToShow,
+    spaceBetween,
+    loop,
+    initialSlide,
+    direction,
+    speed,
+    allowTouchMove,
+    threshold,
+    autoplay,
+    onSlideChange,
+  });
+
+  const {
+    containerRef,
+    wrapperRef,
+    allSlides,
+    realIndex,
+    translateValue,
+    slideWidth,
+    transitioning,
+    touching,
+    slideNext,
+    slidePrev,
+    goToSlide,
+    canSlideNext,
+    canSlidePrev,
+    handleTouchStart,
+    handleTouchMove,
+    handleTouchEnd,
+    loopedSlides,
+  } = slider;
+
+  const totalWrapperWidth = useMemo(() => {
+    if (slideWidth === 0) return 0;
+    return allSlides.length * (slideWidth + spaceBetween) - spaceBetween;
+  }, [allSlides.length, slideWidth, spaceBetween]);
+
+  const containerClasses = [
+    'c-slider',
+    direction === 'vertical' && 'c-slider--vertical',
+    grabCursor && 'c-slider--grab-cursor',
+    touching && 'c-slider--grabbing',
+    loop && 'c-slider--loop',
+    className,
+  ]
+    .filter(Boolean)
+    .join(' ');
+
+  return (
+    <div
+      ref={ref || (containerRef as React.RefObject<HTMLDivElement>)}
+      className={containerClasses}
+      style={{
+        height: typeof height === 'number' ? `${height}px` : height,
+        width: typeof width === 'number' ? `${width}px` : width,
+        overflow: 'hidden',
+        position: 'relative',
+        cursor: grabCursor && !touching ? 'grab' : touching ? 'grabbing' : 'default',
+        ...(rest as any).style,
+      }}
+      onTouchStart={handleTouchStart}
+      onTouchMove={handleTouchMove}
+      onTouchEnd={handleTouchEnd}
+      onMouseDown={handleTouchStart}
+      onMouseMove={handleTouchMove}
+      onMouseUp={handleTouchEnd}
+      onMouseLeave={handleTouchEnd}
+    >
+      <div
+        ref={wrapperRef as React.RefObject<HTMLDivElement>}
+        className="c-slider__wrapper"
+        style={{
+          display: 'flex',
+          flexDirection: direction === 'vertical' ? 'column' : 'row',
+          width: direction === 'horizontal' ? `${totalWrapperWidth}px` : '100%',
+          height: direction === 'vertical' ? `${totalWrapperWidth}px` : '100%',
+          transform:
+            direction === 'horizontal'
+              ? `translateX(${translateValue}px)`
+              : `translateY(${translateValue}px)`,
+          transition:
+            transitioning && !slider.repositioningRef?.current
+              ? `transform ${speed}ms ease-out`
+              : 'none',
+          willChange: 'transform',
+        }}
+      >
+        {allSlides.map((slide, index) => (
+          <div
+            key={slide.id || index}
+            className={[
+              'c-slider__slide',
+              (() => {
+                if (!loop) return index === realIndex;
+                // For triple array: check if this slide index matches current real index
+                return index % slides.length === realIndex;
+              })() && 'c-slider__slide--active',
+              (slide as any).isClone && 'c-slider__slide--duplicate',
+            ]
+              .filter(Boolean)
+              .join(' ')}
+            style={{
+              width: direction === 'vertical' ? '100%' : `${slideWidth}px`,
+              height: direction === 'vertical' ? `${slideWidth}px` : '100%',
+              flexShrink: 0,
+              marginRight:
+                direction === 'horizontal' && index < allSlides.length - 1
+                  ? `${spaceBetween}px`
+                  : 0,
+              marginBottom:
+                direction === 'vertical' && index < allSlides.length - 1 ? `${spaceBetween}px` : 0,
+            }}
+          >
+            {slide.video ? (
+              <video
+                src={slide.video.src}
+                poster={slide.video.poster}
+                autoPlay={slide.video.autoplay}
+                loop={slide.video.loop}
+                muted={slide.video.muted}
+                style={{ width: '100%', height: '100%', objectFit: 'cover' }}
+              />
+            ) : slide.backgroundImage ? (
+              <div
+                style={{
+                  width: '100%',
+                  height: '100%',
+                  backgroundImage: `url(${slide.backgroundImage})`,
+                  backgroundSize: 'cover',
+                  backgroundPosition: 'center',
+                }}
+              >
+                {slide.content}
+              </div>
+            ) : slide.image ? (
+              <img
+                src={slide.image}
+                alt={slide.alt || slide.title || ''}
+                style={{ width: '100%', height: '100%', objectFit: 'cover' }}
+              />
+            ) : (
+              slide.content
+            )}
+
+            {(slide.title || slide.description) && (
+              <div className="c-slider__slide-content">
+                {slide.title && <h3>{slide.title}</h3>}
+                {slide.description && <p>{slide.description}</p>}
+              </div>
+            )}
+          </div>
+        ))}
+      </div>
+
+      {navigation && (
+        <div className="c-slider__navigation">
+          <button
+            type="button"
+            className="c-slider__navigation-prev"
+            onClick={slidePrev}
+            disabled={!canSlidePrev}
+            aria-label="Previous slide"
+          />
+          <button
+            type="button"
+            className="c-slider__navigation-next"
+            onClick={slideNext}
+            disabled={!canSlideNext}
+            aria-label="Next slide"
+          />
+        </div>
+      )}
+
+      {pagination && (
+        <div className="c-slider__pagination">
+          {slides.map((_, index) => (
+            <button
+              key={index}
+              type="button"
+              className={`c-slider__pagination-bullet ${index === realIndex ? 'c-slider__pagination-bullet--active' : ''}`}
+              onClick={() => goToSlide(index)}
+              aria-label={`Go to slide ${index + 1}`}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+});
+
+Slider.displayName = 'Slider';

package/src/components/Slider/index.ts

@@ -0,0 +1,24 @@
+/**
+ * Slider component exports
+ * Following Atomix design system patterns
+ */
+
+export type {
+  SliderProps,
+  SliderRefs,
+  SliderSlide,
+  SliderState,
+  SliderAutoplay,
+  SliderPagination,
+  SliderNavigation,
+  SliderScrollbar,
+  SliderEffect,
+  SliderThumbs,
+  SliderZoom,
+  SliderLazy,
+  SliderVirtual,
+  SliderBreakpoint,
+} from '../../lib/types/components';
+export { Slider } from './Slider';
+export { useSlider } from '../../lib/composables/useSlider';
+export type { UseSliderOptions, UseSliderReturn } from '../../lib/composables/useSlider';

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

@@ -0,0 +1,65 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Spinner } from './Spinner';
+
+const meta = {
+  title: 'Components/Spinner',
+  component: Spinner,
+  parameters: {
+    layout: 'centered',
+  },
+  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

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

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

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

@@ -0,0 +1,158 @@
+import React from 'react';
+import { StoryFn, Meta } from '@storybook/react';
+import { fn } from '@storybook/test';
+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,
+    },
+  },
+} 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>
+);

package/src/components/Steps/Steps.tsx

@@ -0,0 +1,115 @@
+import React, { useEffect, useState, ReactNode } from 'react';
+import { STEPS } from '../../lib/constants/components';
+
+export interface StepItem {
+  /**
+   * The number for the step
+   */
+  number: number | string | ReactNode;
+
+  /**
+   * The text label for the step
+   */
+  text: string;
+
+  /**
+   * Optional custom content for the step
+   */
+  content?: React.ReactNode;
+}
+
+export interface StepsProps {
+  /**
+   * Array of step items
+   */
+  items: StepItem[];
+
+  /**
+   * Current active step index (0-based)
+   */
+  activeIndex?: number;
+
+  /**
+   * Whether to display steps vertically
+   */
+  vertical?: boolean;
+
+  /**
+   * Called when active step changes
+   */
+  onStepChange?: (index: number) => void;
+
+  /**
+   * Additional CSS class
+   */
+  className?: string;
+}
+
+/**
+ * Steps component for displaying a sequence of steps
+ */
+export const Steps: React.FC<StepsProps> = ({
+  items,
+  activeIndex = 0,
+  vertical = false,
+  onStepChange,
+  className = '',
+}) => {
+  const [currentStep, setCurrentStep] = useState(activeIndex);
+
+  // Update steps when activeIndex prop changes
+  useEffect(() => {
+    if (currentStep !== activeIndex) {
+      setCurrentStep(activeIndex);
+    }
+  }, [activeIndex]);
+
+  // Method to go to next step
+  const goToNextStep = () => {
+    const nextIndex = currentStep + 1;
+    if (nextIndex < items.length) {
+      setCurrentStep(nextIndex);
+      if (onStepChange) {
+        onStepChange(nextIndex);
+      }
+    }
+  };
+
+  // Method to go to previous step
+  const goToPreviousStep = () => {
+    const prevIndex = currentStep - 1;
+    if (prevIndex >= 0) {
+      setCurrentStep(prevIndex);
+      if (onStepChange) {
+        onStepChange(prevIndex);
+      }
+    }
+  };
+
+  return (
+    <div
+      className={`c-steps ${vertical ? STEPS.CLASSES.VERTICAL : ''} ${className}`}
+      role="navigation"
+      aria-label="Steps"
+    >
+      {items.map((item, index) => (
+        <div
+          key={`step-${index}`}
+          className={`c-steps__item ${index <= currentStep ? STEPS.CLASSES.ACTIVE : ''} ${index < currentStep ? STEPS.CLASSES.COMPLETED : ''}`}
+          aria-current={index === currentStep ? 'step' : undefined}
+        >
+          <div className="c-steps__line"></div>
+          <div className="c-steps__content">
+            <div className="c-steps__number">{item.number}</div>
+            <div className="c-steps__text">{item.text}</div>
+            {item.content && <div className="c-steps__custom-content">{item.content}</div>}
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+Steps.displayName = 'Steps';
+
+export default Steps;

package/src/components/Steps/index.ts

@@ -0,0 +1,3 @@
+export { Steps } from './Steps';
+export type { StepsProps, StepItem } from './Steps';
+export { default } from './Steps';