@shohojdhara/atomix 0.1.17 → 0.1.18

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

@@ -0,0 +1,318 @@
+import { CARD } from '../../../lib/constants/components';
+
+/**
+ * CardOptions interface for the vanilla JS implementation
+ */
+export interface CardOptions {
+  title?: string;
+  text?: string;
+  image?: string;
+  imageAlt?: string;
+  icon?: string;
+  header?: string;
+  footer?: string;
+  actions?: HTMLElement[];
+  row?: boolean;
+  flat?: boolean;
+  active?: boolean;
+  className?: string;
+  onClick?: (event: MouseEvent) => void;
+  children?: HTMLElement | HTMLElement[] | string;
+}
+
+/**
+ * CardInstance interface
+ */
+export interface CardInstance {
+  destroy: () => void;
+}
+
+/**
+ * Default options for the Card component
+ */
+const DEFAULT_OPTIONS: CardOptions = {
+  title: '',
+  text: '',
+  image: '',
+  imageAlt: '',
+  icon: '',
+  header: '',
+  footer: '',
+  actions: [],
+  row: false,
+  flat: false,
+  active: false,
+  className: '',
+  onClick: undefined,
+  children: undefined,
+};
+
+/**
+ * Card Class - Vanilla JS implementation
+ */
+export default class Card implements CardInstance {
+  // DOM element
+  private element: HTMLElement;
+
+  // Options
+  private options: CardOptions;
+
+  // DOM references
+  private headerElement: HTMLElement | null = null;
+  private bodyElement: HTMLElement | null = null;
+  private imageElement: HTMLImageElement | null = null;
+  private iconElement: HTMLElement | null = null;
+  private titleElement: HTMLElement | null = null;
+  private textElement: HTMLElement | null = null;
+  private actionsElement: HTMLElement | null = null;
+  private footerElement: HTMLElement | null = null;
+
+  /**
+   * Constructor
+   * @param element - DOM element or selector
+   * @param options - Configuration options
+   */
+  constructor(element: string | HTMLElement, options: Partial<CardOptions> = {}) {
+    // Get element reference
+    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();
+  }
+
+  /**
+   * Initialize the card component
+   * @private
+   */
+  private _initialize(): void {
+    // Clear element
+    this.element.innerHTML = '';
+
+    // Add base class
+    this.element.classList.add(CARD.CLASSES.BASE);
+
+    // Add variant classes
+    if (this.options.row) {
+      this.element.classList.add(CARD.CLASSES.ROW);
+    }
+
+    if (this.options.flat) {
+      this.element.classList.add(CARD.CLASSES.FLAT);
+    }
+
+    if (this.options.active) {
+      this.element.classList.add(CARD.CLASSES.ACTIVE);
+    }
+
+    if (this.options.className) {
+      this.options.className.split(' ').forEach(cls => {
+        if (cls) this.element.classList.add(cls);
+      });
+    }
+
+    // Create the structure
+    this._createStructure();
+
+    // Bind events
+    this._bindEvents();
+  }
+
+  /**
+   * Create component structure
+   * @private
+   */
+  private _createStructure(): void {
+    // Create header if provided
+    if (this.options.header) {
+      this.headerElement = document.createElement('div');
+      this.headerElement.className = CARD.SELECTORS.HEADER.substring(1);
+      this.headerElement.innerHTML = this.options.header;
+      this.element.appendChild(this.headerElement);
+    }
+
+    // Create image if provided
+    if (this.options.image) {
+      this.imageElement = document.createElement('img');
+      this.imageElement.className = CARD.SELECTORS.IMAGE.substring(1);
+      this.imageElement.src = this.options.image;
+      this.imageElement.alt = this.options.imageAlt || '';
+      this.element.appendChild(this.imageElement);
+    }
+
+    // Create icon if provided
+    if (this.options.icon) {
+      this.iconElement = document.createElement('div');
+      this.iconElement.className = CARD.SELECTORS.ICON.substring(1);
+      this.iconElement.innerHTML = this.options.icon;
+      this.element.appendChild(this.iconElement);
+    }
+
+    // Create body
+    this.bodyElement = document.createElement('div');
+    this.bodyElement.className = CARD.SELECTORS.BODY.substring(1);
+    this.element.appendChild(this.bodyElement);
+
+    // Create title if provided
+    if (this.options.title) {
+      this.titleElement = document.createElement('h3');
+      this.titleElement.className = CARD.SELECTORS.TITLE.substring(1);
+      this.titleElement.innerHTML = this.options.title;
+      this.bodyElement.appendChild(this.titleElement);
+    }
+
+    // Create text if provided
+    if (this.options.text) {
+      this.textElement = document.createElement('p');
+      this.textElement.className = CARD.SELECTORS.TEXT.substring(1);
+      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') {
+        // If children is a string, add it as innerHTML
+        const childrenContainer = document.createElement('div');
+        childrenContainer.innerHTML = this.options.children;
+        this.bodyElement.appendChild(childrenContainer);
+      } else if (this.options.children instanceof HTMLElement) {
+        // If children is a single HTMLElement
+        this.bodyElement.appendChild(this.options.children);
+      } else if (Array.isArray(this.options.children)) {
+        // If children is an array of HTMLElements
+        this.options.children.forEach(child => {
+          if (child instanceof HTMLElement && this.bodyElement) {
+            this.bodyElement.appendChild(child);
+          }
+        });
+      }
+    }
+
+    // Create actions if provided
+    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);
+    }
+
+    // Create footer if provided
+    if (this.options.footer) {
+      this.footerElement = document.createElement('div');
+      this.footerElement.className = CARD.SELECTORS.FOOTER.substring(1);
+      this.footerElement.innerHTML = this.options.footer;
+      this.element.appendChild(this.footerElement);
+    }
+  }
+
+  /**
+   * Bind event listeners
+   * @private
+   */
+  private _bindEvents(): void {
+    if (typeof this.options.onClick === 'function') {
+      this.element.addEventListener('click', this.options.onClick);
+    }
+  }
+
+  /**
+   * Update card with new options
+   * @param options - New configuration options
+   * @public
+   */
+  public update(options: Partial<CardOptions>): void {
+    this.options = { ...this.options, ...options };
+    this._initialize();
+  }
+
+  /**
+   * Destroy the card component
+   * Clean up event listeners and DOM
+   * @public
+   */
+  public destroy(): void {
+    if (typeof this.options.onClick === 'function') {
+      this.element.removeEventListener('click', this.options.onClick);
+    }
+
+    this.element.innerHTML = '';
+    this.element.classList.remove(
+      CARD.CLASSES.BASE,
+      CARD.CLASSES.ROW,
+      CARD.CLASSES.FLAT,
+      CARD.CLASSES.ACTIVE
+    );
+
+    if (this.options.className) {
+      this.options.className.split(' ').forEach(cls => {
+        if (cls) this.element.classList.remove(cls);
+      });
+    }
+  }
+
+  /**
+   * Initialize all Card components on the page
+   * @param selector - CSS selector for card elements
+   * @returns Array of Card instances
+   * @static
+   */
+  public static initializeAll(selector = '[data-component="card"]'): Card[] {
+    const elements = document.querySelectorAll(selector);
+    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

@@ -0,0 +1,46 @@
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { ColorModeToggle } from './ColorModeToggle';
+
+const meta = {
+  title: 'Components/ColorModeToggle',
+  component: ColorModeToggle,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    className: {
+      control: 'text',
+      description: 'Additional CSS class names',
+    },
+  },
+} satisfies Meta<typeof ColorModeToggle>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// Default Color Mode Toggle
+export const Default: Story = {
+  args: {},
+};
+
+// With Custom Class
+export const WithCustomClass: Story = {
+  args: {
+    className: 'custom-class',
+  },
+};
+
+// 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' }}
+    >
+      <span>Toggle Theme</span>
+      <ColorModeToggle />
+    </div>
+  ),
+};

package/src/components/ColorModeToggle/ColorModeToggle.tsx

@@ -0,0 +1,85 @@
+import React, { useEffect, useState } from 'react';
+
+export interface ColorModeToggleProps {
+  className?: string;
+}
+
+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) {
+      // Use system preference if no stored preference
+      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);
+    } else {
+      // Fallback for older browsers
+      darkModeMediaQuery.addListener(handleSystemThemeChange);
+    }
+
+    // Clean up event listener
+    return () => {
+      if (darkModeMediaQuery.removeEventListener) {
+        darkModeMediaQuery.removeEventListener('change', handleSystemThemeChange);
+      } else {
+        // Fallback for older browsers
+        darkModeMediaQuery.removeListener(handleSystemThemeChange);
+      }
+    };
+  }, []);
+
+  const toggleColorMode = () => {
+    setColorMode(prevMode => (prevMode === 'light' ? 'dark' : 'light'));
+  };
+
+  return (
+    <button
+      className={`c-color-mode-toggle ${className}`}
+      onClick={toggleColorMode}
+      aria-label={`Switch to ${colorMode === 'light' ? 'dark' : 'light'} mode`}
+      title={`Switch to ${colorMode === 'light' ? 'dark' : 'light'} mode`}
+    >
+      {colorMode === 'light' ? (
+        <svg viewBox="0 0 24 24" width="24" height="24" fill="currentColor">
+          <path d="M9.37 5.51c-.18.64-.27 1.31-.27 1.99 0 4.08 3.32 7.4 7.4 7.4.68 0 1.35-.09 1.99-.27C17.45 17.19 14.93 19 12 19c-3.86 0-7-3.14-7-7 0-2.93 1.81-5.45 4.37-6.49zM12 3c-4.97 0-9 4.03-9 9s4.03 9 9 9 9-4.03 9-9c0-.46-.04-.92-.1-1.36-.98 1.37-2.58 2.26-4.4 2.26-2.98 0-5.4-2.42-5.4-5.4 0-1.81.89-3.42 2.26-4.4-.44-.06-.9-.1-1.36-.1z" />
+        </svg>
+      ) : (
+        <svg viewBox="0 0 24 24" width="24" height="24" fill="currentColor">
+          <path d="M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zM2 13h2c.55 0 1-.45 1-1s-.45-1-1-1H2c-.55 0-1 .45-1 1s.45 1 1 1zm18 0h2c.55 0 1-.45 1-1s-.45-1-1-1h-2c-.55 0-1 .45-1 1s.45 1 1 1zM11 2v2c0 .55.45 1 1 1s1-.45 1-1V2c0-.55-.45-1-1-1s-1 .45-1 1zm0 18v2c0 .55.45 1 1 1s1-.45 1-1v-2c0-.55-.45-1-1-1s-1 .45-1 1zM5.99 4.58c-.39-.39-1.03-.39-1.41 0-.39.39-.39 1.03 0 1.41l1.06 1.06c.39.39 1.03.39 1.41 0 .39-.39.39-1.03 0-1.41L5.99 4.58zm12.37 12.37c-.39-.39-1.03-.39-1.41 0-.39.39-.39 1.03 0 1.41l1.06 1.06c.39.39 1.03.39 1.41 0 .39-.39.39-1.03 0-1.41l-1.06-1.06zm1.06-10.96c.39-.39.39-1.03 0-1.41-.39-.39-1.03-.39-1.41 0l-1.06 1.06c-.39.39-.39 1.03 0 1.41.39.39 1.03.39 1.41 0l1.06-1.06zM7.05 18.36c.39-.39.39-1.03 0-1.41-.39-.39-1.03-.39-1.41 0l-1.06 1.06c-.39.39-.39 1.03 0 1.41.39.39 1.03.39 1.41 0l1.06-1.06z" />
+        </svg>
+      )}
+    </button>
+  );
+};
+
+ColorModeToggle.displayName = 'ColorModeToggle';
+
+export default ColorModeToggle;

package/src/components/ColorModeToggle/index.ts

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

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

@@ -0,0 +1,47 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Countdown } from './Countdown';
+
+const meta = {
+  title: 'Components/Countdown',
+  component: Countdown,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    target: { control: 'date', description: 'Target date/time' },
+    show: {
+      control: 'check',
+      options: ['days', 'hours', 'minutes', 'seconds'],
+      description: 'Fields to show',
+    },
+    separator: { control: 'text', description: 'Separator string' },
+    focused: { control: 'boolean', description: 'Focused style' },
+  },
+} satisfies Meta<typeof Countdown>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const futureDate = new Date(Date.now() + 1000 * 60 * 60 * 24 + 1000 * 60 * 45 + 1000 * 30); // 1d 45m 30s
+
+export const Default: Story = {
+  args: {
+    target: futureDate,
+  },
+};
+
+export const Focused: Story = {
+  args: {
+    target: futureDate,
+    focused: true,
+  },
+};
+
+export const CustomSeparator: Story = {
+  args: {
+    target: futureDate,
+    separator: ' | ',
+    show: ['hours', 'minutes', 'seconds'],
+  },
+};

package/src/components/Countdown/Countdown.tsx

@@ -0,0 +1,90 @@
+import React, { forwardRef, useEffect, useState } from 'react';
+
+export interface CountdownProps {
+  /** Target date/time as a Date or ISO string */
+  target: Date | string;
+  /** Show days, hours, minutes, seconds */
+  show?: Array<'days' | 'hours' | 'minutes' | 'seconds'>;
+  /** Separator string */
+  separator?: string;
+  /** Focused style */
+  focused?: boolean;
+  /** Custom className */
+  className?: string;
+  /** Optional callback when countdown reaches zero */
+  onComplete?: () => void;
+}
+
+function getTimeParts(diff: number) {
+  const totalSeconds = Math.max(0, Math.floor(diff / 1000));
+  const days = Math.floor(totalSeconds / 86400);
+  const hours = Math.floor((totalSeconds % 86400) / 3600);
+  const minutes = Math.floor((totalSeconds % 3600) / 60);
+  const seconds = totalSeconds % 60;
+  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);
+
+    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);
+
+    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 });
+
+    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;

package/src/components/Countdown/index.ts

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