@shohojdhara/atomix 0.1.16 → 0.1.17

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,177 +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,149 +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'; 

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

@@ -1,96 +0,0 @@
-import { TESTIMONIAL } from '../../../lib/constants/components';
-
-/**
- * Interface for Testimonial options
- */
-interface TestimonialOptions {
-  size?: 'sm' | 'lg' | '';
-  skeleton?: boolean;
-  [key: string]: any;
-}
-
-/**
- * Interface for Testimonial instance
- */
-interface TestimonialInstance {
-  destroy: () => void;
-}
-
-/**
- * Default options for the Testimonial component
- */
-const DEFAULT_OPTIONS: TestimonialOptions = {
-  size: '',
-  skeleton: false
-};
-
-/**
- * Class representing a Testimonial component
- */
-class Testimonial implements TestimonialInstance {
-  private selector: string | Element;
-  private $element: HTMLElement | null;
-  private options: TestimonialOptions;
-
-  /**
-   * Creates an instance of Testimonial
-   * @param selector - CSS selector string or DOM Element
-   * @param options - Custom options to override defaults
-   */
-  constructor(selector: string | Element, options = {}) {
-    this.selector = selector || TESTIMONIAL.SELECTORS.TESTIMONIAL;
-    this.$element =
-      typeof selector === 'string'
-        ? document.querySelector<HTMLElement>(selector)
-        : selector as HTMLElement;
-    this.options = { ...DEFAULT_OPTIONS, ...options } as TestimonialOptions;
-    this._initialize();
-  }
-
-  /**
-   * Initialize the testimonial component
-   */
-  private _initialize(): void {
-    if (!this.$element) return;
-
-    // Apply size classes if specified
-    if (this.options.size === 'sm' && !this.$element.classList.contains(TESTIMONIAL.CLASSES.SMALL)) {
-      this.$element.classList.add(TESTIMONIAL.CLASSES.SMALL);
-    } else if (this.options.size === 'lg' && !this.$element.classList.contains(TESTIMONIAL.CLASSES.LARGE)) {
-      this.$element.classList.add(TESTIMONIAL.CLASSES.LARGE);
-    }
-  }
-
-  /**
-   * Clean up event listeners
-   */
-  public destroy(): void {
-    // No specific cleanup needed for testimonial component
-  }
-}
-
-/**
- * Initialize all testimonials in the document
- * @param {string|Element} selector - CSS selector string or DOM Element
- * @param {Object} options - Custom options to override defaults
- * @returns {TestimonialInstance[]} Array of Testimonial instances
- */
-export function initializeTestimonials(selector = TESTIMONIAL.SELECTORS.TESTIMONIAL, options = {}): TestimonialInstance[] {
-  const testimonialInstances: TestimonialInstance[] = [];
-  const testimonialElements = document.querySelectorAll<HTMLElement>(typeof selector === 'string' ? selector : TESTIMONIAL.SELECTORS.TESTIMONIAL);
-
-  if (!testimonialElements.length) return testimonialInstances;
-
-  testimonialElements.forEach((element) => {
-    try {
-      const instance = new Testimonial(element, options);
-      testimonialInstances.push(instance);
-    } catch (error) {
-      console.error('Error initializing testimonial:', error);
-    }
-  });
-
-  return testimonialInstances;
-}
-
-export default Testimonial;