@shohojdhara/atomix 0.1.17 → 0.1.18

package/src/components/Toggle/Toggle.tsx

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

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

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

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

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

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

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

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

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