@shohojdhara/atomix 0.1.27 → 0.1.28

package/src/components/Tab/Tab.tsx

@@ -1,133 +0,0 @@
-import React, { useRef, useEffect, useState, ReactNode } from 'react';
-import { TAB } from '../../lib/constants/components';
-
-export interface TabItemProps {
-  /**
-   * Label for the tab
-   */
-  label: string;
-
-  /**
-   * Content of the tab panel
-   */
-  content: ReactNode;
-
-  /**
-   * Whether the tab is initially active
-   */
-  isActive?: boolean;
-
-  /**
-   * Additional CSS class for the tab
-   */
-  className?: string;
-}
-
-export interface TabProps {
-  /**
-   * Array of tab items
-   */
-  items: TabItemProps[];
-
-  /**
-   * Initial active tab index
-   */
-  activeIndex?: number;
-
-  /**
-   * Callback when tab changes
-   */
-  onTabChange?: (index: number) => void;
-
-  /**
-   * Additional CSS class for the tab component
-   */
-  className?: string;
-}
-
-/**
- * Tab component for switching between different content panels
- */
-export const Tab: React.FC<TabProps> = ({
-  items,
-  activeIndex = TAB.DEFAULTS.ACTIVE_INDEX,
-  onTabChange,
-  className = '',
-}) => {
-  const [currentTab, setCurrentTab] = useState(activeIndex);
-  const tabRef = useRef<HTMLDivElement>(null);
-  const tabInstance = useRef<any>(null);
-
-  // Handle tab instance initialization and cleanup
-  useEffect(() => {
-    // Only run on client-side
-    if (typeof window === 'undefined' || !tabRef.current) return undefined;
-
-    // Dynamically import the tab script to avoid server-side rendering issues
-    import('./scripts').then(({ default: TabClass }) => {
-      if (tabRef.current) {
-        tabInstance.current = new TabClass(tabRef.current);
-      }
-    });
-
-    // Cleanup on unmount
-    return () => {
-      if (tabInstance.current) {
-        tabInstance.current.destroy();
-      }
-    };
-  }, []);
-
-  // Handle tab change
-  const handleTabClick = (index: number) => {
-    setCurrentTab(index);
-    if (onTabChange) {
-      onTabChange(index);
-    }
-  };
-
-  return (
-    <div className={`c-tabs js-atomix-tab ${className}`} ref={tabRef}>
-      <ul className="c-tabs__nav">
-        {items.map((item, index) => (
-          <li className="c-tabs__nav-item" key={`tab-nav-${index}`}>
-            <button
-              className={`c-tabs__nav-btn ${index === currentTab ? TAB.CLASSES.ACTIVE : ''}`}
-              onClick={() => handleTabClick(index)}
-              data-tabindex={index}
-              role="tab"
-              aria-selected={index === currentTab}
-              aria-controls={`tab-panel-${index}`}
-            >
-              {item.label}
-            </button>
-          </li>
-        ))}
-      </ul>
-      <div className="c-tabs__panels">
-        {items.map((item, index) => (
-          <div
-            className={`c-tabs__panel ${index === currentTab ? TAB.CLASSES.ACTIVE : ''}`}
-            key={`tab-panel-${index}`}
-            data-tabindex={index}
-            id={`tab-panel-${index}`}
-            role="tabpanel"
-            aria-labelledby={`tab-nav-${index}`}
-            style={{
-              height: index === currentTab ? 'auto' : '0px',
-              opacity: index === currentTab ? 1 : 0,
-              overflow: 'hidden',
-              transition: 'height 0.3s ease, opacity 0.3s ease',
-            }}
-          >
-            <div className="c-tabs__panel-body">{item.content}</div>
-          </div>
-        ))}
-      </div>
-    </div>
-  );
-};
-
-Tab.displayName = 'Tab';
-
-export default Tab;

package/src/components/Tab/index.ts

@@ -1,2 +0,0 @@
-export { Tab } from './Tab';
-export type { TabProps, TabItemProps } from './Tab';

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

@@ -1,200 +0,0 @@
-import { TAB } from '../../../lib/constants/components';
-
-/**
- * Interface for Tab options
- */
-interface TabOptions {
-  navItems: string;
-  navBtn: string;
-  panels: string;
-  panelBodys: string;
-  activeClass: string;
-  activeIndex: number;
-  [key: string]: any;
-}
-
-/**
- * Interface for Tab instance
- */
-interface TabInstance {
-  destroy: () => void;
-}
-
-/**
- * Default options for the tab component
- */
-const DEFAULT_OPTIONS = {
-  navItems: TAB.SELECTORS.NAV_ITEMS,
-  navBtn: TAB.SELECTORS.NAV_BTN,
-  panels: TAB.SELECTORS.PANELS,
-  panelBodys: TAB.SELECTORS.PANEL_BODIES,
-  activeClass: TAB.CLASSES.ACTIVE,
-  activeIndex: TAB.DEFAULTS.ACTIVE_INDEX,
-};
-
-/**
- * Class representing a Tab component
- */
-class Tab implements TabInstance {
-  private selector: string | Element;
-  private $element: HTMLElement | null;
-  private options: TabOptions;
-  private $navItems: NodeListOf<HTMLElement> | null;
-  private $panels: NodeListOf<HTMLElement> | null;
-  private $panelBodys: NodeListOf<HTMLElement> | null;
-
-  /**
-   * Creates an instance of Tab
-   * @param selector - CSS selector string or DOM Element
-   * @param options - Custom options to override defaults
-   */
-  constructor(selector: string | Element, options = {}) {
-    this.selector = selector || TAB.SELECTORS.TAB;
-    this.$element =
-      typeof selector === 'string'
-        ? document.querySelector<HTMLElement>(selector)
-        : (selector as HTMLElement);
-    this.options = { ...DEFAULT_OPTIONS, ...options } as TabOptions;
-    this.$navItems = null;
-    this.$panels = null;
-    this.$panelBodys = null;
-    this._initialize();
-  }
-
-  /**
-   * Initialize the tab component
-   */
-  private _initialize(): void {
-    if (!this.$element) return;
-
-    this._initializeElements();
-    this._showTab(this.options.activeIndex);
-    this._bindEvents();
-  }
-
-  /**
-   * Initialize DOM elements
-   */
-  private _initializeElements(): void {
-    if (!this.$element) return;
-
-    this.$navItems = this.$element.querySelectorAll<HTMLElement>(this.options.navItems);
-    this.$panels = this.$element.querySelectorAll<HTMLElement>(this.options.panels);
-    this.$panelBodys = this.$element.querySelectorAll<HTMLElement>(this.options.panelBodys);
-  }
-
-  /**
-   * Bind event listeners
-   */
-  private _bindEvents(): void {
-    if (!this.$navItems) return;
-
-    this.$navItems.forEach(item => {
-      const btn = item.querySelector<HTMLElement>(this.options.navBtn);
-      if (btn) {
-        btn.addEventListener('click', () => this._handleTabClick(btn));
-      }
-    });
-  }
-
-  /**
-   * Handle tab click event
-   * @param btn - The clicked tab button
-   */
-  private _handleTabClick(btn: HTMLElement): void {
-    const tabIndex = btn.dataset.tabindex;
-    if (tabIndex === undefined) return;
-
-    this._hideAllTabs();
-    this._showTab(tabIndex);
-  }
-
-  /**
-   * Hide all tabs
-   */
-  private _hideAllTabs(): void {
-    if (!this.$panels || !this.$navItems) return;
-
-    this.$panels.forEach(panel => {
-      panel.style.height = '0px';
-      panel.classList.remove(this.options.activeClass);
-      panel.style.opacity = '0';
-    });
-
-    this.$navItems.forEach(item => {
-      const btn = item.querySelector<HTMLElement>(this.options.navBtn);
-      if (btn) {
-        btn.classList.remove(this.options.activeClass);
-      }
-    });
-  }
-
-  /**
-   * Show tab at specified index
-   * @param index - The index of tab to show
-   */
-  private _showTab(index: number | string): void {
-    if (!this.$panels || !this.$navItems || !this.$panelBodys) return;
-
-    this.$panels.forEach((panel, pIndex) => {
-      if (panel.dataset.tabindex == index.toString()) {
-        const panelBody = this.$panelBodys?.[pIndex];
-        if (panelBody) {
-          panel.classList.add(this.options.activeClass);
-          requestAnimationFrame(() => {
-            panel.style.height = `${panelBody.clientHeight}px`;
-            panel.style.opacity = '1';
-          });
-        }
-      }
-    });
-
-    this.$navItems.forEach((navItem, nIndex) => {
-      const btn = navItem.querySelector<HTMLElement>(this.options.navBtn);
-      if (btn && btn.dataset.tabindex == index.toString()) {
-        btn.classList.add(this.options.activeClass);
-      }
-    });
-  }
-
-  /**
-   * Clean up event listeners
-   */
-  public destroy(): void {
-    if (!this.$element || !this.$navItems) return;
-
-    this.$navItems.forEach(item => {
-      const btn = item.querySelector<HTMLElement>(this.options.navBtn);
-      if (btn) {
-        // Need to recreate the bound function to remove it correctly
-        btn.removeEventListener('click', () => this._handleTabClick(btn));
-      }
-    });
-  }
-}
-
-/**
- * Initialize all tabs in the document
- * @param {string|Element} selector - CSS selector string or DOM Element
- * @param {Object} options - Custom options to override defaults
- * @returns {TabInstance[]} Array of Tab instances
- */
-export function initializeTabs(selector = TAB.SELECTORS.TAB, options = {}): TabInstance[] {
-  const tabInstances: TabInstance[] = [];
-  const tabElements = document.querySelectorAll<HTMLElement>(selector);
-
-  if (!tabElements.length) return tabInstances;
-
-  tabElements.forEach(element => {
-    try {
-      const instance = new Tab(element, options);
-      tabInstances.push(instance);
-    } catch (error) {
-      console.error('Error initializing tab:', error);
-    }
-  });
-
-  return tabInstances;
-}
-
-export default Tab;

package/src/components/Testimonial/Testimonial.stories.tsx

@@ -1,180 +0,0 @@
-import React from 'react';
-import { StoryFn, Meta } from '@storybook/react';
-import { Testimonial } from './Testimonial';
-import type { TestimonialProps } from './Testimonial';
-
-export default {
-  title: 'Components/Testimonial',
-  component: Testimonial,
-  argTypes: {
-    size: {
-      control: { type: 'select', options: ['', 'sm', 'lg'] },
-      defaultValue: '',
-    },
-    skeleton: {
-      control: { type: 'boolean' },
-      defaultValue: false,
-    },
-  },
-} as Meta<typeof Testimonial>;
-
-const Template: StoryFn<typeof Testimonial> = args => (
-  <div style={{ padding: '30px' }}>
-    <Testimonial {...args} />
-  </div>
-);
-
-// Default testimonial
-export const Default = Template.bind({});
-Default.args = {
-  quote:
-    'The intuitive interface, seamless syncing across devices, and helpful features have made me more productive than ever before.',
-  author: {
-    name: 'Emily Rodriguez',
-    role: 'Software Engineer, Acme',
-    avatarSrc:
-      'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?q=80&w=3000&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
-    avatarAlt: 'Emily Rodriguez',
-  },
-  size: '',
-};
-
-// Large testimonial
-export const Large = Template.bind({});
-Large.args = {
-  quote:
-    'The intuitive interface, seamless syncing across devices, and helpful features have made me more productive than ever before.',
-  author: {
-    name: 'Emily Rodriguez',
-    role: 'Software Engineer, Acme',
-    avatarSrc:
-      'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?q=80&w=3000&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
-    avatarAlt: 'Emily Rodriguez',
-  },
-  size: 'lg',
-};
-
-// Small testimonial
-export const Small = Template.bind({});
-Small.args = {
-  quote:
-    'The intuitive interface, seamless syncing across devices, and helpful features have made me more productive than ever before.',
-  author: {
-    name: 'Emily Rodriguez',
-    role: 'Software Engineer, Acme',
-    avatarSrc:
-      'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?q=80&w=3000&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
-    avatarAlt: 'Emily Rodriguez',
-  },
-  size: 'sm',
-};
-
-// Skeleton loading state
-export const Skeleton = Template.bind({});
-Skeleton.args = {
-  skeleton: true,
-  size: '',
-};
-
-// Large skeleton
-export const LargeSkeleton = Template.bind({});
-LargeSkeleton.args = {
-  skeleton: true,
-  size: 'lg',
-};
-
-// With rich content in quote
-export const RichContent = Template.bind({});
-RichContent.args = {
-  quote: (
-    <>
-      <p>"I feel more in charge of my schedule and less overwhelmed. Highly recommended for</p>
-      <p>professionals and anyone aiming to enhance their productivity."</p>
-    </>
-  ),
-  author: {
-    name: 'John Smith',
-    role: 'Product Manager, XYZ Corp',
-    avatarSrc:
-      'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?q=80&w=3000&auto=format&fit=crop&ixlib=rb-4.0.3',
-    avatarAlt: 'John Smith',
-  },
-};
-
-// Grid of testimonials
-const TestimonialGrid: React.FC = () => {
-  return (
-    <div className="o-container">
-      <div className="o-grid">
-        <div className="o-grid__col o-grid__col--4">
-          <Testimonial
-            size="sm"
-            quote="The intuitive interface, seamless syncing across devices, and helpful features have made me more productive than ever before."
-            author={{
-              name: 'Emily Rodriguez',
-              role: 'Software Engineer, Acme',
-              avatarSrc:
-                'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?q=80&w=3000&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
-              avatarAlt: 'Emily Rodriguez',
-            }}
-          />
-        </div>
-        <div className="o-grid__col o-grid__col--4">
-          <Testimonial
-            size="sm"
-            quote="I feel more in charge of my schedule and less overwhelmed. Highly recommended for professionals and anyone aiming to enhance their productivity."
-            author={{
-              name: 'John Smith',
-              role: 'Product Manager, XYZ Corp',
-              avatarSrc:
-                'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?q=80&w=3000&auto=format&fit=crop&ixlib=rb-4.0.3',
-              avatarAlt: 'John Smith',
-            }}
-          />
-        </div>
-        <div className="o-grid__col o-grid__col--4">
-          <Testimonial
-            size="sm"
-            quote="I've tried numerous productivity apps in the past, but this one truly stands out. It strikes the perfect balance between simplicity and functionality."
-            author={{
-              name: 'Sarah Johnson',
-              role: 'Marketing Director, ABC Inc',
-              avatarSrc:
-                'https://images.unsplash.com/photo-1544005313-94ddf0286df2?q=80&w=3000&auto=format&fit=crop&ixlib=rb-4.0.3',
-              avatarAlt: 'Sarah Johnson',
-            }}
-          />
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export const TestimonialGridLayout: StoryFn<typeof Testimonial> = () => <TestimonialGrid />;
-
-// Testimonial with image
-const TestimonialWithImage: React.FC = () => {
-  return (
-    <div className="o-container">
-      <div className="o-grid u-align-items-center">
-        <div className="o-grid__col o-grid__col--6">
-          <Testimonial
-            quote="The intuitive interface, seamless syncing across devices, and helpful features have made me more productive than ever before."
-            author={{
-              name: 'Emily Rodriguez',
-              role: 'Software Engineer, Acme',
-              avatarSrc:
-                'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?q=80&w=3000&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
-              avatarAlt: 'Emily Rodriguez',
-            }}
-          />
-        </div>
-        <div className="o-grid__col o-grid__col--6">
-          <img src="https://unsplash.it/g/727/250" alt="Image" className="c-river__image" />
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export const WithImage: StoryFn<typeof Testimonial> = () => <TestimonialWithImage />;

package/src/components/Testimonial/Testimonial.tsx

@@ -1,148 +0,0 @@
-import React, { useRef, useEffect, ReactNode } from 'react';
-import { TESTIMONIAL } from '../../lib/constants/components';
-
-export interface TestimonialAuthor {
-  /**
-   * The author's name
-   */
-  name: string;
-
-  /**
-   * The author's role or title
-   */
-  role: string;
-
-  /**
-   * The URL to the author's avatar image
-   */
-  avatarSrc?: string;
-
-  /**
-   * Alternative text for the avatar image
-   */
-  avatarAlt?: string;
-}
-
-export interface TestimonialProps {
-  /**
-   * The testimonial quote text or content
-   */
-  quote: ReactNode;
-
-  /**
-   * Author information
-   */
-  author?: TestimonialAuthor;
-
-  /**
-   * Size variant
-   */
-  size?: 'sm' | 'lg' | '';
-
-  /**
-   * Whether to show a skeleton loading state
-   */
-  skeleton?: boolean;
-
-  /**
-   * Additional CSS class
-   */
-  className?: string;
-}
-
-/**
- * Testimonial component for displaying customer quotes and feedback
- */
-export const Testimonial: React.FC<TestimonialProps> = ({
-  quote,
-  author,
-  size = '',
-  skeleton = false,
-  className = '',
-}) => {
-  const testimonialRef = useRef<HTMLDivElement>(null);
-  const testimonialInstance = useRef<any>(null);
-
-  useEffect(() => {
-    // Only run on client-side
-    if (typeof window === 'undefined' || !testimonialRef.current) return undefined;
-
-    // Dynamically import the testimonial script to avoid server-side rendering issues
-    import('./scripts').then(({ default: TestimonialClass }) => {
-      if (testimonialRef.current) {
-        testimonialInstance.current = new TestimonialClass(testimonialRef.current, {
-          size,
-          skeleton,
-        });
-      }
-    });
-
-    // Cleanup on unmount
-    return () => {
-      if (testimonialInstance.current) {
-        testimonialInstance.current.destroy();
-      }
-    };
-  }, [size, skeleton]);
-
-  // Determine CSS classes
-  const testimonialClasses = [
-    'c-testimonial',
-    size === 'sm' ? TESTIMONIAL.CLASSES.SMALL : '',
-    size === 'lg' ? TESTIMONIAL.CLASSES.LARGE : '',
-    className,
-  ]
-    .filter(Boolean)
-    .join(' ');
-
-  // Render skeleton version
-  if (skeleton) {
-    return (
-      <div className={testimonialClasses} ref={testimonialRef}>
-        <blockquote className="c-testimonial__quote">
-          <span className="c-skeleton"></span>
-          <span className="c-skeleton"></span>
-          <span className="c-skeleton u-w-75"></span>
-          <span className="c-skeleton u-w-25"></span>
-        </blockquote>
-        <div className="c-testimonial__author">
-          <span className="c-testimonial__author-avatar c-avatar c-avatar--xxl c-avatar--circle c-skeleton"></span>
-          <div className="c-testimonial__info u-w-75">
-            <p className="c-testimonial__author-name">
-              <span className="c-skeleton u-w-25"></span>
-            </p>
-            <p className="c-testimonial__author-role">
-              <span className="c-skeleton u-w-25"></span>
-            </p>
-          </div>
-        </div>
-      </div>
-    );
-  }
-
-  // Render normal version
-  return (
-    <div className={testimonialClasses} ref={testimonialRef}>
-      <blockquote className="c-testimonial__quote">{quote}</blockquote>
-      {author && (
-        <div className="c-testimonial__author">
-          {author.avatarSrc && (
-            <img
-              src={author.avatarSrc}
-              alt={author.avatarAlt || ''}
-              className="c-testimonial__author-avatar c-avatar c-avatar--xxl c-avatar--circle"
-            />
-          )}
-          <div className="c-testimonial__info">
-            <p className="c-testimonial__author-name">{author.name}</p>
-            <p className="c-testimonial__author-role">{author.role}</p>
-          </div>
-        </div>
-      )}
-    </div>
-  );
-};
-
-Testimonial.displayName = 'Testimonial';
-
-export default Testimonial;

package/src/components/Testimonial/index.ts

@@ -1,3 +0,0 @@
-export { Testimonial } from './Testimonial';
-export type { TestimonialProps, TestimonialAuthor } from './Testimonial';
-export { default } from './Testimonial';