@shohojdhara/atomix 0.1.26 → 0.1.28

package/src/components/Toggle/Toggle.stories.tsx

@@ -1,50 +0,0 @@
-import React from 'react';
-import { StoryFn, Meta } from '@storybook/react';
-import { Toggle } from './Toggle';
-
-export default {
-  title: 'Components/Toggle',
-  component: Toggle,
-  argTypes: {
-    initialOn: {
-      control: { type: 'boolean' },
-      defaultValue: false,
-    },
-    disabled: {
-      control: { type: 'boolean' },
-      defaultValue: false,
-    },
-    onToggleOn: { action: 'toggled on' },
-    onToggleOff: { action: 'toggled off' },
-  },
-} as Meta<typeof Toggle>;
-
-const Template: StoryFn<typeof Toggle> = args => (
-  <div style={{ display: 'flex', justifyContent: 'center', padding: '30px' }}>
-    <Toggle {...args} />
-  </div>
-);
-
-export const Default = Template.bind({});
-Default.args = {
-  initialOn: false,
-  disabled: false,
-};
-
-export const InitiallyOn = Template.bind({});
-InitiallyOn.args = {
-  initialOn: true,
-  disabled: false,
-};
-
-export const Disabled = Template.bind({});
-Disabled.args = {
-  initialOn: false,
-  disabled: true,
-};
-
-export const DisabledOn = Template.bind({});
-DisabledOn.args = {
-  initialOn: true,
-  disabled: true,
-};

package/src/components/Toggle/Toggle.tsx

@@ -1,114 +0,0 @@
-import React, { useRef, useEffect, useState } from 'react';
-import { TOGGLE } from '../../lib/constants/components';
-
-export interface ToggleProps {
-  /**
-   * Whether the toggle is initially on
-   */
-  initialOn?: boolean;
-
-  /**
-   * Callback when the toggle is turned on
-   */
-  onToggleOn?: () => void;
-
-  /**
-   * Callback when the toggle is turned off
-   */
-  onToggleOff?: () => void;
-
-  /**
-   * Whether the toggle is disabled
-   */
-  disabled?: boolean;
-
-  /**
-   * Additional CSS class for the toggle
-   */
-  className?: string;
-}
-
-/**
- * Toggle component for switching between two states
- */
-export const Toggle: React.FC<ToggleProps> = ({
-  initialOn = false,
-  onToggleOn,
-  onToggleOff,
-  disabled = false,
-  className = '',
-}) => {
-  const [isOn, setIsOn] = useState(initialOn);
-  const toggleRef = useRef<HTMLDivElement>(null);
-  const toggleInstance = useRef<any>(null);
-
-  useEffect(() => {
-    // Only run on client-side
-    if (typeof window === 'undefined' || !toggleRef.current) return undefined;
-
-    // Initialize toggle instance
-    import('./scripts').then(({ default: ToggleClass }) => {
-      if (toggleRef.current) {
-        toggleInstance.current = new ToggleClass(toggleRef.current);
-      }
-    });
-
-    // Add event listeners for custom events
-    const handleToggleOn = () => {
-      setIsOn(true);
-      if (onToggleOn) onToggleOn();
-    };
-
-    const handleToggleOff = () => {
-      setIsOn(false);
-      if (onToggleOff) onToggleOff();
-    };
-
-    const element = toggleRef.current;
-    element?.addEventListener('toggle:on', handleToggleOn);
-    element?.addEventListener('toggle:off', handleToggleOff);
-
-    // Set initial state if needed
-    if (initialOn && toggleInstance.current) {
-      toggleInstance.current.turnOn();
-    }
-
-    // Cleanup on unmount
-    return () => {
-      element?.removeEventListener('toggle:on', handleToggleOn);
-      element?.removeEventListener('toggle:off', handleToggleOff);
-
-      if (toggleInstance.current) {
-        toggleInstance.current.destroy();
-      }
-    };
-  }, [initialOn, onToggleOn, onToggleOff]);
-
-  // Update the toggle when the isOn prop changes
-  useEffect(() => {
-    if (!toggleInstance.current) return;
-
-    if (isOn) {
-      toggleInstance.current.turnOn();
-    } else {
-      toggleInstance.current.turnOff();
-    }
-  }, [isOn]);
-
-  return (
-    <div
-      className={`c-toggle ${isOn ? TOGGLE.CLASSES.IS_ON : ''} ${disabled ? 'is-disabled' : ''} ${className}`}
-      ref={toggleRef}
-      role="switch"
-      aria-checked={isOn}
-      tabIndex={disabled ? -1 : 0}
-      aria-disabled={disabled}
-    >
-      <div className="c-toggle__switch"></div>
-    </div>
-  );
-};
-
-Toggle.displayName = 'Toggle';
-
-export default Toggle;

package/src/components/Toggle/index.ts

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

package/src/components/Toggle/scripts/bundle.ts

@@ -1,19 +0,0 @@
-import Toggle from './index';
-import {
-  applyHoverEffect,
-  applyFocusEffect,
-  initializeToggle,
-  initializeAllToggles,
-} from './toggleInteractions';
-
-// Initialize global namespace if not exists
-window.Atomix = window.Atomix || {};
-
-// Add Toggle to global namespace
-window.Atomix.Toggle = Toggle;
-window.Atomix.applyToggleHoverEffect = applyHoverEffect;
-window.Atomix.applyToggleFocusEffect = applyFocusEffect;
-window.Atomix.initializeToggle = initializeToggle;
-window.Atomix.initializeAllToggles = initializeAllToggles;
-
-export default Toggle;

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

@@ -1,118 +0,0 @@
-import { TOGGLE } from '../../../lib/constants/components';
-
-/**
- * Interface for Toggle instance
- */
-interface ToggleInstance {
-  turnOn: () => void;
-  turnOff: () => void;
-  destroy: () => void;
-}
-
-/**
- * Class representing a Toggle component
- */
-class Toggle implements ToggleInstance {
-  private element: HTMLElement;
-  private isOn: boolean;
-
-  /**
-   * Creates an instance of Toggle
-   * @param element - The toggle container element
-   */
-  constructor(element: HTMLElement) {
-    this.element = element;
-    this.isOn = false;
-    this._initialize();
-  }
-
-  /**
-   * Initialize the toggle component
-   */
-  private _initialize(): void {
-    this._bindEvents();
-    // Check if toggle should be initially on
-    if (this.element.classList.contains(TOGGLE.CLASSES.IS_ON)) {
-      this.isOn = true;
-    }
-  }
-
-  /**
-   * Bind event listeners
-   */
-  private _bindEvents(): void {
-    this.element.addEventListener('click', this._handleToggle.bind(this));
-  }
-
-  /**
-   * Handle toggle click
-   */
-  private _handleToggle(): void {
-    if (!this.isOn) {
-      this.turnOn();
-    } else {
-      this.turnOff();
-    }
-  }
-
-  /**
-   * Turn on the toggle
-   */
-  public turnOn(): void {
-    this.element.classList.add(TOGGLE.CLASSES.IS_ON);
-    this.isOn = true;
-
-    // Dispatch custom event
-    this.element.dispatchEvent(
-      new CustomEvent('toggle:on', {
-        bubbles: true,
-      })
-    );
-  }
-
-  /**
-   * Turn off the toggle
-   */
-  public turnOff(): void {
-    this.element.classList.remove(TOGGLE.CLASSES.IS_ON);
-    this.isOn = false;
-
-    // Dispatch custom event
-    this.element.dispatchEvent(
-      new CustomEvent('toggle:off', {
-        bubbles: true,
-      })
-    );
-  }
-
-  /**
-   * Clean up event listeners
-   */
-  public destroy(): void {
-    this.element.removeEventListener('click', this._handleToggle);
-  }
-}
-
-/**
- * Initialize all toggles in the document
- * @returns Array of toggle instances
- */
-export function initializeToggles(): ToggleInstance[] {
-  const toggleInstances: ToggleInstance[] = [];
-  const toggleElements = document.querySelectorAll<HTMLElement>(TOGGLE.SELECTORS.TOGGLE);
-
-  if (!toggleElements.length) return toggleInstances;
-
-  toggleElements.forEach(element => {
-    try {
-      const instance = new Toggle(element);
-      toggleInstances.push(instance);
-    } catch (error) {
-      console.error('Error initializing toggle:', error);
-    }
-  });
-
-  return toggleInstances;
-}
-
-export default Toggle;

package/src/components/Toggle/scripts/toggleInteractions.ts

@@ -1,77 +0,0 @@
-import Toggle from './index';
-import { TOGGLE } from '../../../lib/constants/components';
-
-/**
- * Apply hover effect to toggle
- * @param toggle - Toggle element
- */
-export function applyHoverEffect(toggle: HTMLElement): void {
-  const hoverClass = 'is-hovered';
-
-  toggle.addEventListener('mouseenter', () => {
-    toggle.classList.add(hoverClass);
-  });
-
-  toggle.addEventListener('mouseleave', () => {
-    toggle.classList.remove(hoverClass);
-  });
-}
-
-/**
- * Apply focus effect to toggle
- * @param toggle - Toggle element
- */
-export function applyFocusEffect(toggle: HTMLElement): void {
-  const focusClass = 'is-focused';
-  const input = toggle.querySelector('input');
-
-  if (input) {
-    input.addEventListener('focus', () => {
-      toggle.classList.add(focusClass);
-    });
-
-    input.addEventListener('blur', () => {
-      toggle.classList.remove(focusClass);
-    });
-  }
-}
-
-/**
- * Initialize a single toggle with event listeners
- * @param toggle - Toggle element
- * @param onChange - Change callback
- */
-export function initializeToggle(toggle: HTMLElement, onChange?: (checked: boolean) => void): void {
-  const input = toggle.querySelector('input[type="checkbox"]') as HTMLInputElement;
-
-  if (input) {
-    input.addEventListener('change', () => {
-      if (onChange) onChange(input.checked);
-    });
-
-    // Apply effects
-    applyHoverEffect(toggle);
-    applyFocusEffect(toggle);
-  }
-}
-
-/**
- * Initialize all toggles on the page
- * @param selector - CSS selector for toggles
- * @returns Array of toggle instances
- */
-export function initializeAllToggles(selector = '[data-component="toggle"]'): Toggle[] {
-  const toggleInstances: Toggle[] = [];
-  const toggleElements = document.querySelectorAll<HTMLElement>(selector);
-
-  toggleElements.forEach(element => {
-    try {
-      const instance = new Toggle(element);
-      toggleInstances.push(instance);
-    } catch (error) {
-      console.error('Error initializing toggle:', error);
-    }
-  });
-
-  return toggleInstances;
-}

package/src/components/Tooltip/Tooltip.stories.tsx

@@ -1,115 +0,0 @@
-import React from 'react';
-import { StoryFn, Meta } from '@storybook/react';
-import { Tooltip } from './Tooltip';
-
-export default {
-  title: 'Components/Tooltip',
-  component: Tooltip,
-  argTypes: {
-    position: {
-      control: { type: 'select' },
-      options: [
-        'top',
-        'bottom',
-        'left',
-        'right',
-        'top-left',
-        'top-right',
-        'bottom-left',
-        'bottom-right',
-      ],
-      defaultValue: 'top',
-    },
-    trigger: {
-      control: { type: 'select' },
-      options: ['hover', 'click'],
-      defaultValue: 'hover',
-    },
-    delay: {
-      control: { type: 'number' },
-      defaultValue: 200,
-    },
-    offset: {
-      control: { type: 'number' },
-      defaultValue: 10,
-    },
-  },
-} as Meta<typeof Tooltip>;
-
-const Template: StoryFn<typeof Tooltip> = args => (
-  <div style={{ display: 'flex', justifyContent: 'center', padding: '100px' }}>
-    <Tooltip {...args}>
-      <button className="c-btn c-btn--primary">Hover me</button>
-    </Tooltip>
-  </div>
-);
-
-export const Default = Template.bind({});
-Default.args = {
-  content: <p className="u-mb-0">This is a tooltip on top</p>,
-  position: 'top',
-  trigger: 'hover',
-};
-
-export const ClickTrigger = Template.bind({});
-ClickTrigger.args = {
-  content: <p className="u-mb-0">Click anywhere to close this tooltip</p>,
-  position: 'top',
-  trigger: 'click',
-};
-
-export const BottomPosition = Template.bind({});
-BottomPosition.args = {
-  content: <p className="u-mb-0">This tooltip appears below the trigger</p>,
-  position: 'bottom',
-};
-
-export const LeftPosition = Template.bind({});
-LeftPosition.args = {
-  content: <p className="u-mb-0">This tooltip appears to the left</p>,
-  position: 'left',
-};
-
-export const RightPosition = Template.bind({});
-RightPosition.args = {
-  content: <p className="u-mb-0">This tooltip appears to the right</p>,
-  position: 'right',
-};
-
-export const WithIcon = Template.bind({});
-WithIcon.args = {
-  content: <p className="u-mb-0">Tooltips work great with icons</p>,
-  position: 'top',
-  children: <i className="icon-lux-info" style={{ fontSize: '24px', cursor: 'pointer' }}></i>,
-};
-
-export const CustomDelay = Template.bind({});
-CustomDelay.args = {
-  content: <p className="u-mb-0">This tooltip has a longer delay</p>,
-  position: 'top',
-  delay: 500,
-};
-
-export const CustomOffset = Template.bind({});
-CustomOffset.args = {
-  content: <p className="u-mb-0">This tooltip has a larger offset from the trigger</p>,
-  position: 'top',
-  offset: 20,
-};
-
-export const RichContent = Template.bind({});
-RichContent.args = {
-  content: (
-    <div>
-      <h4 style={{ marginTop: 0, marginBottom: '8px' }}>Rich Tooltip Content</h4>
-      <ul style={{ margin: 0, paddingLeft: '16px' }}>
-        <li>Supports HTML content</li>
-        <li>Can include multiple elements</li>
-        <li>Helpful for complex information</li>
-      </ul>
-    </div>
-  ),
-  position: 'bottom',
-  trigger: 'click',
-  offset: 15,
-};

package/src/components/Tooltip/Tooltip.tsx

@@ -1,105 +0,0 @@
-import React, { ReactNode, useRef, useEffect } from 'react';
-import { TOOLTIP } from '../../lib/constants/components';
-import { Tooltip as TooltipClass } from './scripts';
-
-export interface TooltipProps {
-  /**
-   * Content to be displayed in the tooltip
-   */
-  content: ReactNode;
-
-  /**
-   * The element that will trigger the tooltip
-   */
-  children: ReactNode;
-
-  /**
-   * The position of the tooltip relative to the trigger
-   */
-  position?:
-    | 'top'
-    | 'bottom'
-    | 'left'
-    | 'right'
-    | 'top-left'
-    | 'top-right'
-    | 'bottom-left'
-    | 'bottom-right';
-
-  /**
-   * How the tooltip is triggered
-   */
-  trigger?: 'hover' | 'click';
-
-  /**
-   * Additional CSS class for the tooltip
-   */
-  className?: string;
-
-  /**
-   * Delay before showing the tooltip (in milliseconds)
-   */
-  delay?: number;
-
-  /**
-   * Offset from the trigger element (in pixels)
-   */
-  offset?: number;
-}
-
-export const Tooltip: React.FC<TooltipProps> = ({
-  content,
-  children,
-  position = TOOLTIP.DEFAULTS.POSITION,
-  trigger = TOOLTIP.DEFAULTS.TRIGGER,
-  className = '',
-  delay = TOOLTIP.DEFAULTS.DELAY,
-  offset = TOOLTIP.DEFAULTS.OFFSET,
-}) => {
-  const tooltipRef = useRef<HTMLDivElement>(null);
-  const tooltipInstance = useRef<any>(null);
-
-  useEffect(() => {
-    if (tooltipRef.current) {
-      // Initialize tooltip
-      tooltipInstance.current = new TooltipClass(tooltipRef.current, {
-        position,
-        trigger,
-        delay,
-        offset,
-      });
-    }
-
-    // Cleanup on unmount
-    return () => {
-      if (tooltipInstance.current) {
-        tooltipInstance.current.destroy();
-      }
-    };
-  }, [position, trigger, delay, offset]);
-
-  return (
-    <div className="u-position-relative u-d-inline-block">
-      <div
-        className={`${TOOLTIP.SELECTORS.TRIGGER.substring(1)}${className ? ` ${className}` : ''}`}
-      >
-        {children}
-      </div>
-      <div
-        className={`c-tooltip ${TOOLTIP.SELECTORS.TOOLTIP.substring(1)}`}
-        ref={tooltipRef}
-        data-tooltip-position={position}
-        data-tooltip-trigger={trigger}
-      >
-        <div className={`c-tooltip__content ${TOOLTIP.SELECTORS.CONTENT.substring(1)}`}>
-          <span className={TOOLTIP.SELECTORS.ARROW.substring(1)}></span>
-          {content}
-        </div>
-      </div>
-    </div>
-  );
-};
-
-Tooltip.displayName = 'Tooltip';
-
-export default Tooltip;

package/src/components/Tooltip/index.ts

@@ -1,3 +0,0 @@
-export { Tooltip } from './Tooltip';
-export type { TooltipProps } from './Tooltip';
-export { default } from './Tooltip';