@shohojdhara/atomix 0.1.16 → 0.1.18

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

@@ -19,7 +19,7 @@ export default {
   },
 } as Meta<typeof Toggle>;
 
-const Template: StoryFn<typeof Toggle> = (args) => (
+const Template: StoryFn<typeof Toggle> = args => (
   <div style={{ display: 'flex', justifyContent: 'center', padding: '30px' }}>
     <Toggle {...args} />
   </div>
@@ -47,4 +47,4 @@ export const DisabledOn = Template.bind({});
 DisabledOn.args = {
   initialOn: true,
   disabled: true,
-}; 
+};

package/src/components/Toggle/Toggle.tsx

@@ -6,22 +6,22 @@ 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
    */
@@ -41,7 +41,7 @@ export const Toggle: React.FC<ToggleProps> = ({
   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;
@@ -52,52 +52,52 @@ export const Toggle: React.FC<ToggleProps> = ({
         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}`} 
+    <div
+      className={`c-toggle ${isOn ? TOGGLE.CLASSES.IS_ON : ''} ${disabled ? 'is-disabled' : ''} ${className}`}
       ref={toggleRef}
       role="switch"
       aria-checked={isOn}
@@ -107,8 +107,8 @@ export const Toggle: React.FC<ToggleProps> = ({
       <div className="c-toggle__switch"></div>
     </div>
   );
-}; 
+};
 
 Toggle.displayName = 'Toggle';
 
-export default Toggle;
+export default Toggle;

package/src/components/Toggle/index.ts

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

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

@@ -1,5 +1,10 @@
 import Toggle from './index';
-import { applyHoverEffect, applyFocusEffect, initializeToggle, initializeAllToggles } from './toggleInteractions';
+import {
+  applyHoverEffect,
+  applyFocusEffect,
+  initializeToggle,
+  initializeAllToggles,
+} from './toggleInteractions';
 
 // Initialize global namespace if not exists
 window.Atomix = window.Atomix || {};
@@ -11,4 +16,4 @@ window.Atomix.applyToggleFocusEffect = applyFocusEffect;
 window.Atomix.initializeToggle = initializeToggle;
 window.Atomix.initializeAllToggles = initializeAllToggles;
 
-export default Toggle; 
+export default Toggle;

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

@@ -61,11 +61,13 @@ class Toggle implements ToggleInstance {
   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 
-    }));
+    this.element.dispatchEvent(
+      new CustomEvent('toggle:on', {
+        bubbles: true,
+      })
+    );
   }
 
   /**
@@ -74,11 +76,13 @@ class Toggle implements ToggleInstance {
   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 
-    }));
+    this.element.dispatchEvent(
+      new CustomEvent('toggle:off', {
+        bubbles: true,
+      })
+    );
   }
 
   /**
@@ -99,7 +103,7 @@ export function initializeToggles(): ToggleInstance[] {
 
   if (!toggleElements.length) return toggleInstances;
 
-  toggleElements.forEach((element) => {
+  toggleElements.forEach(element => {
     try {
       const instance = new Toggle(element);
       toggleInstances.push(instance);
@@ -111,4 +115,4 @@ export function initializeToggles(): ToggleInstance[] {
   return toggleInstances;
 }
 
-export default Toggle; 
+export default Toggle;

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

@@ -7,11 +7,11 @@ import { TOGGLE } from '../../../lib/constants/components';
  */
 export function applyHoverEffect(toggle: HTMLElement): void {
   const hoverClass = 'is-hovered';
-  
+
   toggle.addEventListener('mouseenter', () => {
     toggle.classList.add(hoverClass);
   });
-  
+
   toggle.addEventListener('mouseleave', () => {
     toggle.classList.remove(hoverClass);
   });
@@ -24,12 +24,12 @@ export function applyHoverEffect(toggle: HTMLElement): void {
 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);
     });
@@ -41,17 +41,14 @@ export function applyFocusEffect(toggle: HTMLElement): void {
  * @param toggle - Toggle element
  * @param onChange - Change callback
  */
-export function initializeToggle(
-  toggle: HTMLElement,
-  onChange?: (checked: boolean) => void
-): void {
+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);
@@ -66,8 +63,8 @@ export function initializeToggle(
 export function initializeAllToggles(selector = '[data-component="toggle"]'): Toggle[] {
   const toggleInstances: Toggle[] = [];
   const toggleElements = document.querySelectorAll<HTMLElement>(selector);
-  
-  toggleElements.forEach((element) => {
+
+  toggleElements.forEach(element => {
     try {
       const instance = new Toggle(element);
       toggleInstances.push(instance);
@@ -75,6 +72,6 @@ export function initializeAllToggles(selector = '[data-component="toggle"]'): To
       console.error('Error initializing toggle:', error);
     }
   });
-  
+
   return toggleInstances;
-} 
+}

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

@@ -8,7 +8,16 @@ export default {
   argTypes: {
     position: {
       control: { type: 'select' },
-      options: ['top', 'bottom', 'left', 'right', 'top-left', 'top-right', 'bottom-left', 'bottom-right'],
+      options: [
+        'top',
+        'bottom',
+        'left',
+        'right',
+        'top-left',
+        'top-right',
+        'bottom-left',
+        'bottom-right',
+      ],
       defaultValue: 'top',
     },
     trigger: {
@@ -27,7 +36,7 @@ export default {
   },
 } as Meta<typeof Tooltip>;
 
-const Template: StoryFn<typeof Tooltip> = (args) => (
+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>
@@ -71,9 +80,7 @@ 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>
-  ),
+  children: <i className="icon-lux-info" style={{ fontSize: '24px', cursor: 'pointer' }}></i>,
 };
 
 export const CustomDelay = Template.bind({});
@@ -105,4 +112,4 @@ RichContent.args = {
   position: 'bottom',
   trigger: 'click',
   offset: 15,
-}; 
+};

package/src/components/Tooltip/Tooltip.tsx

@@ -7,32 +7,40 @@ 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';
-  
+  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)
    */
@@ -50,7 +58,7 @@ export const Tooltip: React.FC<TooltipProps> = ({
 }) => {
   const tooltipRef = useRef<HTMLDivElement>(null);
   const tooltipInstance = useRef<any>(null);
-  
+
   useEffect(() => {
     if (tooltipRef.current) {
       // Initialize tooltip
@@ -61,7 +69,7 @@ export const Tooltip: React.FC<TooltipProps> = ({
         offset,
       });
     }
-    
+
     // Cleanup on unmount
     return () => {
       if (tooltipInstance.current) {
@@ -69,14 +77,16 @@ export const Tooltip: React.FC<TooltipProps> = ({
       }
     };
   }, [position, trigger, delay, offset]);
-  
+
   return (
     <div className="u-position-relative u-d-inline-block">
-      <div className={`${TOOLTIP.SELECTORS.TRIGGER.substring(1)}${className ? ` ${className}` : ''}`}>
+      <div
+        className={`${TOOLTIP.SELECTORS.TRIGGER.substring(1)}${className ? ` ${className}` : ''}`}
+      >
         {children}
       </div>
-      <div 
-        className={`c-tooltip ${TOOLTIP.SELECTORS.TOOLTIP.substring(1)}`} 
+      <div
+        className={`c-tooltip ${TOOLTIP.SELECTORS.TOOLTIP.substring(1)}`}
         ref={tooltipRef}
         data-tooltip-position={position}
         data-tooltip-trigger={trigger}
@@ -88,8 +98,8 @@ export const Tooltip: React.FC<TooltipProps> = ({
       </div>
     </div>
   );
-}; 
+};
 
 Tooltip.displayName = 'Tooltip';
 
-export default Tooltip;
+export default Tooltip;

package/src/components/Tooltip/index.ts

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

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

@@ -1 +0,0 @@
- 

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

@@ -11,7 +11,7 @@ const DEFAULT_OPTIONS = {
   activeClass: TOOLTIP.CLASSES.IS_ACTIVE,
   contentIdAttr: TOOLTIP.ATTRIBUTES.CONTENT_ID,
   positionAttr: TOOLTIP.ATTRIBUTES.POSITION,
-  triggerAttr: TOOLTIP.ATTRIBUTES.TRIGGER
+  triggerAttr: TOOLTIP.ATTRIBUTES.TRIGGER,
 };
 
 /**
@@ -64,10 +64,10 @@ export class Tooltip implements TooltipInstance {
    */
   constructor(selector: string | Element, options = {}) {
     this.selector = selector || TOOLTIP.SELECTORS.TOOLTIP;
-    this.$element = 
-      typeof selector === 'string' 
+    this.$element =
+      typeof selector === 'string'
         ? document.querySelector<HTMLElement>(selector)
-        : selector as HTMLElement;
+        : (selector as HTMLElement);
     this.options = { ...DEFAULT_OPTIONS, ...options } as TooltipOptions;
     this.timeout = null;
     this.hideTimeout = null;
@@ -92,21 +92,21 @@ export class Tooltip implements TooltipInstance {
    */
   private _initializeElements(): void {
     if (!this.$element) return;
-    
+
     // Find the parent container that wraps both trigger and tooltip
     const parentContainer = this.$element.parentElement;
     if (!parentContainer) return;
-    
+
     // Find the trigger as a sibling or within the same parent container
     this.$trigger = parentContainer.querySelector<HTMLElement>(TOOLTIP.SELECTORS.TRIGGER);
     this.$content = this.$element.querySelector<HTMLElement>(TOOLTIP.SELECTORS.CONTENT);
-    
+
     // Check for custom position from data attribute
     const customPosition = this.$element.getAttribute(this.options.positionAttr);
     if (customPosition) {
       this.options.position = customPosition;
     }
-    
+
     // Check for custom trigger from data attribute
     const customTrigger = this.$element.getAttribute(this.options.triggerAttr);
     if (customTrigger) {
@@ -119,19 +119,19 @@ export class Tooltip implements TooltipInstance {
    */
   private _setPosition(): void {
     if (!this.$content || !this.$element) return;
-    
+
     // Reset any existing position classes
     this.$element.classList.remove(
-      TOOLTIP.CLASSES.TOP, 
-      TOOLTIP.CLASSES.BOTTOM, 
-      TOOLTIP.CLASSES.LEFT, 
-      TOOLTIP.CLASSES.RIGHT, 
-      TOOLTIP.CLASSES.TOP_LEFT, 
-      TOOLTIP.CLASSES.TOP_RIGHT, 
-      TOOLTIP.CLASSES.BOTTOM_LEFT, 
+      TOOLTIP.CLASSES.TOP,
+      TOOLTIP.CLASSES.BOTTOM,
+      TOOLTIP.CLASSES.LEFT,
+      TOOLTIP.CLASSES.RIGHT,
+      TOOLTIP.CLASSES.TOP_LEFT,
+      TOOLTIP.CLASSES.TOP_RIGHT,
+      TOOLTIP.CLASSES.BOTTOM_LEFT,
       TOOLTIP.CLASSES.BOTTOM_RIGHT
     );
-    
+
     // Add the appropriate position class
     switch (this.options.position) {
       case 'top':
@@ -161,10 +161,10 @@ export class Tooltip implements TooltipInstance {
       default:
         this.$element.classList.add(TOOLTIP.CLASSES.TOP);
     }
-    
+
     // Calculate offset based on position
     const offset = this.options.offset;
-    
+
     switch (this.options.position) {
       case 'top':
       case 'top-left':
@@ -192,14 +192,14 @@ export class Tooltip implements TooltipInstance {
    */
   private _bindEvents(): void {
     if (!this.$trigger) return;
-    
+
     if (this.options.trigger === 'hover') {
       this.$trigger.addEventListener('mouseenter', this._handleTriggerEnter.bind(this));
       this.$trigger.addEventListener('mouseleave', this._handleTriggerLeave.bind(this));
     } else if (this.options.trigger === 'click') {
       this.$trigger.addEventListener('click', this._handleTriggerClick.bind(this));
     }
-    
+
     // Handle focus for accessibility
     this.$trigger.addEventListener('focus', this._handleTriggerEnter.bind(this));
     this.$trigger.addEventListener('blur', this._handleTriggerLeave.bind(this));
@@ -213,9 +213,9 @@ export class Tooltip implements TooltipInstance {
       clearTimeout(this.hideTimeout);
       this.hideTimeout = null;
     }
-    
+
     if (this.timeout) return;
-    
+
     this.timeout = window.setTimeout(() => {
       this.show();
       this.timeout = null;
@@ -230,7 +230,7 @@ export class Tooltip implements TooltipInstance {
       clearTimeout(this.timeout);
       this.timeout = null;
     }
-    
+
     this.hideTimeout = window.setTimeout(() => {
       this.hide();
       this.hideTimeout = null;
@@ -298,19 +298,19 @@ export class Tooltip implements TooltipInstance {
    */
   public show(): void {
     if (!this.$element) return;
-    
+
     // Dispatch custom event before showing
     const showEvent = new CustomEvent('tooltip:show', {
       bubbles: true,
       cancelable: true,
-      detail: { tooltip: this }
+      detail: { tooltip: this },
     });
-    
+
     this.$element.dispatchEvent(showEvent);
-    
+
     // If event was canceled, don't show
     if (showEvent.defaultPrevented) return;
-    
+
     this.$element.classList.add(this.options.activeClass);
     this.isActive = true;
   }
@@ -320,19 +320,19 @@ export class Tooltip implements TooltipInstance {
    */
   public hide(): void {
     if (!this.$element) return;
-    
+
     // Dispatch custom event before hiding
     const hideEvent = new CustomEvent('tooltip:hide', {
       bubbles: true,
       cancelable: true,
-      detail: { tooltip: this }
+      detail: { tooltip: this },
     });
-    
+
     this.$element.dispatchEvent(hideEvent);
-    
+
     // If event was canceled, don't hide
     if (hideEvent.defaultPrevented) return;
-    
+
     this.$element.classList.remove(this.options.activeClass);
     this.isActive = false;
   }
@@ -342,7 +342,7 @@ export class Tooltip implements TooltipInstance {
    */
   public destroy(): void {
     if (!this.$trigger) return;
-    
+
     // Remove event listeners
     if (this.options.trigger === 'hover') {
       this.$trigger.removeEventListener('mouseenter', this._handleTriggerEnter.bind(this));
@@ -350,21 +350,21 @@ export class Tooltip implements TooltipInstance {
     } else if (this.options.trigger === 'click') {
       this.$trigger.removeEventListener('click', this._handleTriggerClick.bind(this));
     }
-    
+
     this.$trigger.removeEventListener('focus', this._handleTriggerEnter.bind(this));
     this.$trigger.removeEventListener('blur', this._handleTriggerLeave.bind(this));
-    
+
     // Clear timeouts
     if (this.timeout) {
       clearTimeout(this.timeout);
       this.timeout = null;
     }
-    
+
     if (this.hideTimeout) {
       clearTimeout(this.hideTimeout);
       this.hideTimeout = null;
     }
-    
+
     // Hide tooltip
     if (this.$element) {
       this.$element.classList.remove(this.options.activeClass);
@@ -387,6 +387,9 @@ export class Tooltip implements TooltipInstance {
  * @param selector - CSS selector for tooltip elements
  * @param options - Custom options
  */
-export function initializeTooltips(selector = TOOLTIP.SELECTORS.TOOLTIP, options = {}): TooltipInstance[] {
+export function initializeTooltips(
+  selector = TOOLTIP.SELECTORS.TOOLTIP,
+  options = {}
+): TooltipInstance[] {
   return Tooltip.initializeAll(selector, options);
-} 
+}