@shohojdhara/atomix 0.1.27 → 0.1.28

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

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

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

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

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

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

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

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

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

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

@@ -1,129 +0,0 @@
-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,
-};