@shohojdhara/atomix 0.1.26 → 0.1.28

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

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

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

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

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

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

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

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

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