@shohojdhara/atomix 0.1.17 → 0.1.18

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

@@ -0,0 +1,66 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Spinner } from './Spinner';
+
+const meta = {
+  title: 'Components/Spinner',
+  component: Spinner,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  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 { 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,
+    },
+    onStepChange: { action: 'step changed' },
+  },
+} 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,154 @@
+import React, { useRef, 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);
+  const stepsRef = useRef<HTMLDivElement>(null);
+  const stepsInstance = useRef<any>(null);
+
+  useEffect(() => {
+    // Only run on client-side
+    if (typeof window === 'undefined' || !stepsRef.current) return undefined;
+
+    // Dynamically import the steps script to avoid server-side rendering issues
+    import('./scripts').then(({ default: StepsClass }) => {
+      if (stepsRef.current) {
+        stepsInstance.current = new StepsClass(stepsRef.current, {
+          activeIndex: currentStep,
+          vertical,
+        });
+      }
+    });
+
+    // Cleanup on unmount
+    return () => {
+      if (stepsInstance.current) {
+        stepsInstance.current.destroy();
+      }
+    };
+  }, []);
+
+  // Update steps when activeIndex prop changes
+  useEffect(() => {
+    if (currentStep !== activeIndex) {
+      setCurrentStep(activeIndex);
+
+      if (stepsInstance.current) {
+        stepsInstance.current.setActive(activeIndex);
+      }
+    }
+  }, [activeIndex]);
+
+  // Method to go to next step
+  const goToNextStep = () => {
+    const nextIndex = currentStep + 1;
+    if (nextIndex < items.length) {
+      setCurrentStep(nextIndex);
+
+      if (stepsInstance.current) {
+        stepsInstance.current.next();
+      }
+
+      if (onStepChange) {
+        onStepChange(nextIndex);
+      }
+    }
+  };
+
+  // Method to go to previous step
+  const goToPreviousStep = () => {
+    const prevIndex = currentStep - 1;
+    if (prevIndex >= 0) {
+      setCurrentStep(prevIndex);
+
+      if (stepsInstance.current) {
+        stepsInstance.current.previous();
+      }
+
+      if (onStepChange) {
+        onStepChange(prevIndex);
+      }
+    }
+  };
+
+  return (
+    <div
+      className={`c-steps ${vertical ? STEPS.CLASSES.VERTICAL : ''} ${className}`}
+      ref={stepsRef}
+      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';

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

@@ -0,0 +1,159 @@
+import { STEPS } from '../../../lib/constants/components';
+
+/**
+ * Interface for Steps options
+ */
+interface StepsOptions {
+  activeIndex?: number;
+  vertical?: boolean;
+  [key: string]: any;
+}
+
+/**
+ * Interface for Steps instance
+ */
+interface StepsInstance {
+  setActive: (index: number) => void;
+  next: () => void;
+  previous: () => void;
+  destroy: () => void;
+}
+
+/**
+ * Default options for the Steps component
+ */
+const DEFAULT_OPTIONS: StepsOptions = {
+  activeIndex: 0,
+  vertical: false,
+};
+
+/**
+ * Class representing a Steps component
+ */
+class Steps implements StepsInstance {
+  private selector: string | Element;
+  private $element: HTMLElement | null;
+  private options: StepsOptions;
+  private $items: NodeListOf<HTMLElement> | null;
+  private activeIndex: number;
+
+  /**
+   * Creates an instance of Steps
+   * @param selector - CSS selector string or DOM Element
+   * @param options - Custom options to override defaults
+   */
+  constructor(selector: string | Element, options = {}) {
+    this.selector = selector || STEPS.SELECTORS.STEPS;
+    this.$element =
+      typeof selector === 'string'
+        ? document.querySelector<HTMLElement>(selector)
+        : (selector as HTMLElement);
+    this.options = { ...DEFAULT_OPTIONS, ...options } as StepsOptions;
+    this.$items = null;
+    this.activeIndex = this.options.activeIndex || 0;
+    this._initialize();
+  }
+
+  /**
+   * Initialize the steps component
+   */
+  private _initialize(): void {
+    if (!this.$element) return;
+
+    this._initializeElements();
+
+    // Set vertical mode if specified
+    if (this.options.vertical && !this.$element.classList.contains(STEPS.CLASSES.VERTICAL)) {
+      this.$element.classList.add(STEPS.CLASSES.VERTICAL);
+    }
+
+    this.setActive(this.activeIndex);
+  }
+
+  /**
+   * Initialize DOM elements
+   */
+  private _initializeElements(): void {
+    if (!this.$element) return;
+
+    this.$items = this.$element.querySelectorAll<HTMLElement>(STEPS.SELECTORS.ITEM);
+  }
+
+  /**
+   * Sets the active step
+   * @param index - The index of the step to make active
+   */
+  public setActive(index: number): void {
+    if (!this.$items || index < 0 || index >= this.$items.length) return;
+
+    // Update all items
+    this.$items.forEach((item, i) => {
+      if (i < index) {
+        // Steps before active are completed
+        item.classList.add(STEPS.CLASSES.ACTIVE);
+        item.classList.add(STEPS.CLASSES.COMPLETED);
+      } else if (i === index) {
+        // Current step is active but not completed
+        item.classList.add(STEPS.CLASSES.ACTIVE);
+        item.classList.remove(STEPS.CLASSES.COMPLETED);
+      } else {
+        // Future steps are neither active nor completed
+        item.classList.remove(STEPS.CLASSES.ACTIVE);
+        item.classList.remove(STEPS.CLASSES.COMPLETED);
+      }
+    });
+
+    this.activeIndex = index;
+  }
+
+  /**
+   * Moves to the next step
+   */
+  public next(): void {
+    if (this.activeIndex < (this.$items?.length || 0) - 1) {
+      this.setActive(this.activeIndex + 1);
+    }
+  }
+
+  /**
+   * Moves to the previous step
+   */
+  public previous(): void {
+    if (this.activeIndex > 0) {
+      this.setActive(this.activeIndex - 1);
+    }
+  }
+
+  /**
+   * Clean up event listeners
+   */
+  public destroy(): void {
+    // No specific cleanup needed for steps component
+  }
+}
+
+/**
+ * Initialize all steps in the document
+ * @param {string|Element} selector - CSS selector string or DOM Element
+ * @param {Object} options - Custom options to override defaults
+ * @returns {StepsInstance[]} Array of Steps instances
+ */
+export function initializeSteps(selector = STEPS.SELECTORS.STEPS, options = {}): StepsInstance[] {
+  const stepsInstances: StepsInstance[] = [];
+  const stepsElements = document.querySelectorAll<HTMLElement>(selector);
+
+  if (!stepsElements.length) return stepsInstances;
+
+  stepsElements.forEach(element => {
+    try {
+      const instance = new Steps(element, options);
+      stepsInstances.push(instance);
+    } catch (error) {
+      console.error('Error initializing steps:', error);
+    }
+  });
+
+  return stepsInstances;
+}
+
+export default Steps;

package/src/components/Tab/Tab.stories.tsx

@@ -0,0 +1,129 @@
+import React from 'react';
+import { StoryFn, Meta } from '@storybook/react';
+import { Tab } from './Tab';
+
+export default {
+  title: 'Components/Tab',
+  component: Tab,
+  argTypes: {
+    activeIndex: {
+      control: { type: 'number' },
+      defaultValue: 0,
+    },
+    onTabChange: { action: 'tab changed' },
+  },
+} as Meta<typeof Tab>;
+
+const Template: StoryFn<typeof Tab> = args => (
+  <div style={{ maxWidth: '600px', margin: '0 auto', padding: '30px' }}>
+    <Tab {...args} />
+  </div>
+);
+
+export const Default = Template.bind({});
+Default.args = {
+  items: [
+    {
+      label: 'Tab 1',
+      content: <p>This is the content for Tab 1. Default tab content.</p>,
+    },
+    {
+      label: 'Tab 2',
+      content: <p>This is the content for Tab 2. It contains different information.</p>,
+    },
+    {
+      label: 'Tab 3',
+      content: <p>This is the content for Tab 3. Another unique content section.</p>,
+    },
+  ],
+  activeIndex: 0,
+};
+
+export const WithDifferentActiveTab = Template.bind({});
+WithDifferentActiveTab.args = {
+  items: [
+    {
+      label: 'Tab 1',
+      content: <p>This is the content for Tab 1.</p>,
+    },
+    {
+      label: 'Tab 2',
+      content: <p>This is the content for Tab 2. It's initially active.</p>,
+    },
+    {
+      label: 'Tab 3',
+      content: <p>This is the content for Tab 3.</p>,
+    },
+  ],
+  activeIndex: 1,
+};
+
+export const WithRichContent = Template.bind({});
+WithRichContent.args = {
+  items: [
+    {
+      label: 'Features',
+      content: (
+        <div>
+          <h3>Key Features</h3>
+          <ul>
+            <li>Responsive design</li>
+            <li>Accessible navigation</li>
+            <li>Smooth transitions</li>
+          </ul>
+        </div>
+      ),
+    },
+    {
+      label: 'Specifications',
+      content: (
+        <div>
+          <h3>Technical Specifications</h3>
+          <table style={{ width: '100%', borderCollapse: 'collapse' }}>
+            <thead>
+              <tr>
+                <th style={{ border: '1px solid #ddd', padding: '8px', textAlign: 'left' }}>
+                  Property
+                </th>
+                <th style={{ border: '1px solid #ddd', padding: '8px', textAlign: 'left' }}>
+                  Value
+                </th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <td style={{ border: '1px solid #ddd', padding: '8px' }}>Size</td>
+                <td style={{ border: '1px solid #ddd', padding: '8px' }}>Medium</td>
+              </tr>
+              <tr>
+                <td style={{ border: '1px solid #ddd', padding: '8px' }}>Material</td>
+                <td style={{ border: '1px solid #ddd', padding: '8px' }}>Aluminum</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      ),
+    },
+    {
+      label: 'Reviews',
+      content: (
+        <div>
+          <h3>Customer Reviews</h3>
+          <div style={{ padding: '10px', marginBottom: '10px', backgroundColor: '#f9f9f9' }}>
+            <p style={{ marginBottom: '5px' }}>
+              <strong>John D.</strong> ★★★★★
+            </p>
+            <p>Great product, highly recommended!</p>
+          </div>
+          <div style={{ padding: '10px', backgroundColor: '#f9f9f9' }}>
+            <p style={{ marginBottom: '5px' }}>
+              <strong>Sarah T.</strong> ★★★★☆
+            </p>
+            <p>Very good quality and fast shipping.</p>
+          </div>
+        </div>
+      ),
+    },
+  ],
+  activeIndex: 0,
+};