@shohojdhara/atomix 0.1.16 → 0.1.18

package/src/components/Card/scripts/cardInteractions.ts

@@ -7,11 +7,11 @@ import { CARD } from '../../../lib/constants/components';
  */
 export function applyHoverEffect(card: HTMLElement): void {
   const hoverClass = 'is-hovered';
-  
+
   card.addEventListener('mouseenter', () => {
     card.classList.add(hoverClass);
   });
-  
+
   card.addEventListener('mouseleave', () => {
     card.classList.remove(hoverClass);
   });
@@ -23,16 +23,16 @@ export function applyHoverEffect(card: HTMLElement): void {
  */
 export function applyFocusEffect(card: HTMLElement): void {
   const focusClass = 'is-focused';
-  
+
   // Make card focusable if it isn't already
   if (!card.getAttribute('tabindex')) {
     card.setAttribute('tabindex', '0');
   }
-  
+
   card.addEventListener('focus', () => {
     card.classList.add(focusClass);
   });
-  
+
   card.addEventListener('blur', () => {
     card.classList.remove(focusClass);
   });
@@ -48,21 +48,21 @@ export function makeCardClickable(card: HTMLElement, onClick: () => void): void
   if (!card.getAttribute('tabindex')) {
     card.setAttribute('tabindex', '0');
   }
-  
+
   // Add role for accessibility
   card.setAttribute('role', 'button');
-  
+
   // Add click handler
   card.addEventListener('click', onClick);
-  
+
   // Add keyboard handler for accessibility
-  card.addEventListener('keydown', (event) => {
+  card.addEventListener('keydown', event => {
     if (event.key === 'Enter' || event.key === ' ') {
       event.preventDefault();
       onClick();
     }
   });
-  
+
   // Add visual feedback
   applyHoverEffect(card);
   applyFocusEffect(card);
@@ -77,7 +77,7 @@ export function applyElevationEffect(card: HTMLElement, elevationClass = 'is-ele
   card.addEventListener('mouseenter', () => {
     card.classList.add(elevationClass);
   });
-  
+
   card.addEventListener('mouseleave', () => {
     card.classList.remove(elevationClass);
   });
@@ -91,24 +91,24 @@ export function applyElevationEffect(card: HTMLElement, elevationClass = 'is-ele
  * @param trigger - Trigger type: 'click' or 'hover'
  */
 export function applyFlipEffect(
-  card: HTMLElement, 
-  frontSelector = '.c-card--front', 
-  backSelector = '.c-card--back', 
+  card: HTMLElement,
+  frontSelector = '.c-card--front',
+  backSelector = '.c-card--back',
   trigger = 'click'
 ): void {
   const flipClass = 'is-flipped';
   const frontElement = card.querySelector(frontSelector);
   const backElement = card.querySelector(backSelector);
-  
+
   if (!frontElement || !backElement) {
     console.error('Card flip effect requires both front and back elements');
     return;
   }
-  
+
   // Add necessary styling for flip effect
   card.style.perspective = '1000px';
   card.style.transformStyle = 'preserve-3d';
-  
+
   [frontElement, backElement].forEach(el => {
     if (el) {
       (el as HTMLElement).style.backfaceVisibility = 'hidden';
@@ -120,9 +120,9 @@ export function applyFlipEffect(
       (el as HTMLElement).style.transition = 'transform 0.6s';
     }
   });
-  
+
   (backElement as HTMLElement).style.transform = 'rotateY(180deg)';
-  
+
   if (trigger === 'click') {
     card.addEventListener('click', () => {
       card.classList.toggle(flipClass);
@@ -140,7 +140,7 @@ export function applyFlipEffect(
       (frontElement as HTMLElement).style.transform = 'rotateY(180deg)';
       (backElement as HTMLElement).style.transform = 'rotateY(0)';
     });
-    
+
     card.addEventListener('mouseleave', () => {
       card.classList.remove(flipClass);
       (frontElement as HTMLElement).style.transform = 'rotateY(0)';
@@ -157,8 +157,8 @@ export function applyFlipEffect(
 export function initializeAllCards(selector = '[data-component="card"]'): Card[] {
   const cardInstances: Card[] = [];
   const cardElements = document.querySelectorAll<HTMLElement>(selector);
-  
-  cardElements.forEach((element) => {
+
+  cardElements.forEach(element => {
     try {
       const instance = new Card(element);
       cardInstances.push(instance);
@@ -166,6 +166,6 @@ export function initializeAllCards(selector = '[data-component="card"]'): Card[]
       console.error('Error initializing card:', error);
     }
   });
-  
+
   return cardInstances;
-} 
+}

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

@@ -44,7 +44,7 @@ const DEFAULT_OPTIONS: CardOptions = {
   active: false,
   className: '',
   onClick: undefined,
-  children: undefined
+  children: undefined,
 };
 
 /**
@@ -53,7 +53,7 @@ const DEFAULT_OPTIONS: CardOptions = {
 export default class Card implements CardInstance {
   // DOM element
   private element: HTMLElement;
-  
+
   // Options
   private options: CardOptions;
 
@@ -74,17 +74,16 @@ export default class Card implements CardInstance {
    */
   constructor(element: string | HTMLElement, options: Partial<CardOptions> = {}) {
     // Get element reference
-    this.element = typeof element === 'string'
-      ? document.querySelector(element) as HTMLElement
-      : element;
-    
+    this.element =
+      typeof element === 'string' ? (document.querySelector(element) as HTMLElement) : element;
+
     if (!this.element) {
       throw new Error('Card: element not found');
     }
-    
+
     // Merge default options with provided options
     this.options = { ...DEFAULT_OPTIONS, ...options };
-    
+
     // Initialize the component
     this._initialize();
   }
@@ -121,7 +120,7 @@ export default class Card implements CardInstance {
 
     // Create the structure
     this._createStructure();
-    
+
     // Bind events
     this._bindEvents();
   }
@@ -147,7 +146,7 @@ export default class Card implements CardInstance {
       this.imageElement.alt = this.options.imageAlt || '';
       this.element.appendChild(this.imageElement);
     }
-    
+
     // Create icon if provided
     if (this.options.icon) {
       this.iconElement = document.createElement('div');
@@ -176,7 +175,7 @@ export default class Card implements CardInstance {
       this.textElement.innerHTML = this.options.text;
       this.bodyElement.appendChild(this.textElement);
     }
-    
+
     // Add children content if provided
     if (this.options.children && this.bodyElement) {
       if (typeof this.options.children === 'string') {
@@ -201,13 +200,13 @@ export default class Card implements CardInstance {
     if (this.options.actions && this.options.actions.length > 0) {
       this.actionsElement = document.createElement('div');
       this.actionsElement.className = CARD.SELECTORS.ACTIONS.substring(1);
-      
+
       this.options.actions.forEach(action => {
         if (this.actionsElement && action) {
           this.actionsElement.appendChild(action);
         }
       });
-      
+
       this.bodyElement.appendChild(this.actionsElement);
     }
 
@@ -249,7 +248,7 @@ export default class Card implements CardInstance {
     if (typeof this.options.onClick === 'function') {
       this.element.removeEventListener('click', this.options.onClick);
     }
-    
+
     this.element.innerHTML = '';
     this.element.classList.remove(
       CARD.CLASSES.BASE,
@@ -257,7 +256,7 @@ export default class Card implements CardInstance {
       CARD.CLASSES.FLAT,
       CARD.CLASSES.ACTIVE
     );
-    
+
     if (this.options.className) {
       this.options.className.split(' ').forEach(cls => {
         if (cls) this.element.classList.remove(cls);
@@ -276,44 +275,44 @@ export default class Card implements CardInstance {
     return Array.from(elements).map(element => {
       // Try to get options from data attributes
       const options: CardOptions = {};
-      
+
       // Get title
       const title = element.getAttribute('data-title');
       if (title) options.title = title;
-      
+
       // Get text
       const text = element.getAttribute('data-text');
       if (text) options.text = text;
-      
+
       // Get image
       const image = element.getAttribute('data-image');
       if (image) options.image = image;
-      
+
       // Get imageAlt
       const imageAlt = element.getAttribute('data-image-alt');
       if (imageAlt) options.imageAlt = imageAlt;
-      
+
       // Get icon
       const icon = element.getAttribute('data-icon');
       if (icon) options.icon = icon;
-      
+
       // Get row
       const row = element.getAttribute('data-row');
       options.row = row === 'true';
-      
+
       // Get flat
       const flat = element.getAttribute('data-flat');
       options.flat = flat === 'true';
-      
+
       // Get active
       const active = element.getAttribute('data-active');
       options.active = active === 'true';
-      
+
       // Get className
       const className = element.getAttribute('data-class-name');
       if (className) options.className = className;
-      
+
       return new Card(element as HTMLElement, options);
     });
   }
-} 
+}

package/src/components/ColorModeToggle/ColorModeToggle.stories.tsx

@@ -12,7 +12,7 @@ const meta = {
   argTypes: {
     className: {
       control: 'text',
-      description: 'Additional CSS class names'
+      description: 'Additional CSS class names',
     },
   },
 } satisfies Meta<typeof ColorModeToggle>;
@@ -35,9 +35,12 @@ export const WithCustomClass: Story = {
 // Example Usage
 export const ExampleUsage: Story = {
   render: () => (
-    <div className="u-p-5 u-shadow u-d-flex u-justify-content-between u-align-items-center" style={{ width: '300px', borderRadius: '8px' }}>
+    <div
+      className="u-p-5 u-shadow u-d-flex u-justify-content-between u-align-items-center"
+      style={{ width: '300px', borderRadius: '8px' }}
+    >
       <span>Toggle Theme</span>
       <ColorModeToggle />
     </div>
   ),
-}; 
+};

package/src/components/ColorModeToggle/ColorModeToggle.tsx

@@ -6,12 +6,12 @@ export interface ColorModeToggleProps {
 
 export const ColorModeToggle: React.FC<ColorModeToggleProps> = ({ className = '' }) => {
   const [colorMode, setColorMode] = useState<'light' | 'dark'>('light');
-  
+
   // Initialize color mode from localStorage or system preference
   useEffect(() => {
     // Check if color mode is already set in localStorage
     const storedColorMode = localStorage.getItem('atomix-color-mode');
-    
+
     if (storedColorMode === 'light' || storedColorMode === 'dark') {
       setColorMode(storedColorMode);
     } else if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
@@ -19,24 +19,24 @@ export const ColorModeToggle: React.FC<ColorModeToggleProps> = ({ className = ''
       setColorMode('dark');
     }
   }, []);
-  
+
   // Update the document theme attribute when colorMode changes
   useEffect(() => {
     document.documentElement.setAttribute('data-atomix-theme', colorMode);
     localStorage.setItem('atomix-color-mode', colorMode);
   }, [colorMode]);
-  
+
   // Listen for system color scheme changes
   useEffect(() => {
     const darkModeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
-    
+
     const handleSystemThemeChange = (event: MediaQueryListEvent) => {
       // Only update if user hasn't explicitly set a preference
       if (!localStorage.getItem('atomix-color-mode')) {
         setColorMode(event.matches ? 'dark' : 'light');
       }
     };
-    
+
     // Add event listener for system theme changes
     if (darkModeMediaQuery.addEventListener) {
       darkModeMediaQuery.addEventListener('change', handleSystemThemeChange);
@@ -44,7 +44,7 @@ export const ColorModeToggle: React.FC<ColorModeToggleProps> = ({ className = ''
       // Fallback for older browsers
       darkModeMediaQuery.addListener(handleSystemThemeChange);
     }
-    
+
     // Clean up event listener
     return () => {
       if (darkModeMediaQuery.removeEventListener) {
@@ -55,13 +55,13 @@ export const ColorModeToggle: React.FC<ColorModeToggleProps> = ({ className = ''
       }
     };
   }, []);
-  
+
   const toggleColorMode = () => {
-    setColorMode(prevMode => prevMode === 'light' ? 'dark' : 'light');
+    setColorMode(prevMode => (prevMode === 'light' ? 'dark' : 'light'));
   };
-  
+
   return (
-    <button 
+    <button
       className={`c-color-mode-toggle ${className}`}
       onClick={toggleColorMode}
       aria-label={`Switch to ${colorMode === 'light' ? 'dark' : 'light'} mode`}
@@ -78,11 +78,8 @@ export const ColorModeToggle: React.FC<ColorModeToggleProps> = ({ className = ''
       )}
     </button>
   );
-}; 
-
+};
 
 ColorModeToggle.displayName = 'ColorModeToggle';
 
 export default ColorModeToggle;
-
-

package/src/components/ColorModeToggle/index.ts

@@ -1,2 +1,2 @@
 export { default as ColorModeToggle } from './ColorModeToggle';
-export type { ColorModeToggleProps } from './ColorModeToggle';
+export type { ColorModeToggleProps } from './ColorModeToggle';

package/src/components/Countdown/Countdown.stories.tsx

@@ -10,7 +10,11 @@ const meta = {
   tags: ['autodocs'],
   argTypes: {
     target: { control: 'date', description: 'Target date/time' },
-    show: { control: 'check', options: ['days', 'hours', 'minutes', 'seconds'], description: 'Fields to show' },
+    show: {
+      control: 'check',
+      options: ['days', 'hours', 'minutes', 'seconds'],
+      description: 'Fields to show',
+    },
     separator: { control: 'text', description: 'Separator string' },
     focused: { control: 'boolean', description: 'Focused style' },
   },
@@ -40,4 +44,4 @@ export const CustomSeparator: Story = {
     separator: ' | ',
     show: ['hours', 'minutes', 'seconds'],
   },
-}; 
+};

package/src/components/Countdown/Countdown.tsx

@@ -24,59 +24,67 @@ function getTimeParts(diff: number) {
   return { days, hours, minutes, seconds };
 }
 
-export const Countdown: React.FC<CountdownProps> = forwardRef<HTMLDivElement, CountdownProps>(({
-  target,
-  show = ['days', 'hours', 'minutes', 'seconds'],
-  separator = ':',
-  focused = false,
-  className = '',
-  onComplete,
-}, ref) => {
-  const targetDate = typeof target === 'string' ? new Date(target) : target;
-  const [now, setNow] = useState(() => new Date());
-  const [completed, setCompleted] = useState(false);
+export const Countdown: React.FC<CountdownProps> = forwardRef<HTMLDivElement, CountdownProps>(
+  (
+    {
+      target,
+      show = ['days', 'hours', 'minutes', 'seconds'],
+      separator = ':',
+      focused = false,
+      className = '',
+      onComplete,
+    },
+    ref
+  ) => {
+    const targetDate = typeof target === 'string' ? new Date(target) : target;
+    const [now, setNow] = useState(() => new Date());
+    const [completed, setCompleted] = useState(false);
 
-  useEffect(() => {
-    if (completed) return undefined;
-    const interval = setInterval(() => {
-      setNow(new Date());
-    }, 1000);
-    return () => clearInterval(interval);
-  }, [completed]);
+    useEffect(() => {
+      if (completed) return undefined;
+      const interval = setInterval(() => {
+        setNow(new Date());
+      }, 1000);
+      return () => clearInterval(interval);
+    }, [completed]);
 
-  const diff = targetDate.getTime() - now.getTime();
-  const { days, hours, minutes, seconds } = getTimeParts(diff);
+    const diff = targetDate.getTime() - now.getTime();
+    const { days, hours, minutes, seconds } = getTimeParts(diff);
 
-  useEffect(() => {
-    if (diff <= 0 && !completed) {
-      setCompleted(true);
-      if (onComplete) onComplete();
-    }
-  }, [diff, completed, onComplete]);
+    useEffect(() => {
+      if (diff <= 0 && !completed) {
+        setCompleted(true);
+        if (onComplete) onComplete();
+      }
+    }, [diff, completed, onComplete]);
 
-  const timeParts = [];
-  if (show.includes('days')) timeParts.push({ label: 'Days', value: days });
-  if (show.includes('hours')) timeParts.push({ label: 'Hours', value: hours });
-  if (show.includes('minutes')) timeParts.push({ label: 'Minutes', value: minutes });
-  if (show.includes('seconds')) timeParts.push({ label: 'Seconds', value: seconds });
+    const timeParts = [];
+    if (show.includes('days')) timeParts.push({ label: 'Days', value: days });
+    if (show.includes('hours')) timeParts.push({ label: 'Hours', value: hours });
+    if (show.includes('minutes')) timeParts.push({ label: 'Minutes', value: minutes });
+    if (show.includes('seconds')) timeParts.push({ label: 'Seconds', value: seconds });
 
-  return (
-    <div ref={ref} className={`c-countdown${focused ? ' c-countdown--focused' : ''} ${className}`.trim()}>
-      {timeParts.map((part, idx) => (
-        <React.Fragment key={part.label}>
-          <div className="c-countdown__time">
-            <span className="c-countdown__time-count">{String(part.value).padStart(2, '0')}</span>
-            <span className="c-countdown__time-label">{part.label}</span>
-          </div>
-          {idx < timeParts.length - 1 && (
-            <span className="c-countdown__separator">{separator}</span>
-          )}
-        </React.Fragment>
-      ))}
-    </div>
-  );
-});
+    return (
+      <div
+        ref={ref}
+        className={`c-countdown${focused ? ' c-countdown--focused' : ''} ${className}`.trim()}
+      >
+        {timeParts.map((part, idx) => (
+          <React.Fragment key={part.label}>
+            <div className="c-countdown__time">
+              <span className="c-countdown__time-count">{String(part.value).padStart(2, '0')}</span>
+              <span className="c-countdown__time-label">{part.label}</span>
+            </div>
+            {idx < timeParts.length - 1 && (
+              <span className="c-countdown__separator">{separator}</span>
+            )}
+          </React.Fragment>
+        ))}
+      </div>
+    );
+  }
+);
 
 Countdown.displayName = 'Countdown';
 
-export default Countdown;
+export default Countdown;

package/src/components/Countdown/index.ts

@@ -1,2 +1,2 @@
 export { Countdown } from './Countdown';
-export type { CountdownProps } from './Countdown'; 
+export type { CountdownProps } from './Countdown';