@shohojdhara/atomix 0.1.17 → 0.1.18

package/src/components/Tab/Tab.tsx

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

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

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

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

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

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

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