@shohojdhara/atomix 0.1.17 → 0.1.18

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

@@ -0,0 +1,534 @@
+import { v4 as uuidv4 } from 'uuid';
+import { TODO } from '../../../lib/constants/components';
+import type { TodoItem } from './types';
+
+export type { TodoItem };
+export { useTodo } from '../../../lib/composables/useTodo';
+
+/**
+ * TodoOptions interface for the vanilla JS implementation
+ */
+export interface TodoOptions {
+  title?: string;
+  items?: TodoItem[];
+  placeholder?: string;
+  size?: 'sm' | 'md' | 'lg';
+  showCompleted?: boolean;
+  disabled?: boolean;
+  onAddTodo?: (text: string) => void;
+  onToggleTodo?: (id: string) => void;
+  onDeleteTodo?: (id: string) => void;
+}
+
+/**
+ * TodoEvents for custom event types
+ */
+export enum TodoEvents {
+  ADD = 'todo:add',
+  TOGGLE = 'todo:toggle',
+  DELETE = 'todo:delete',
+}
+
+/**
+ * Todo Class - Vanilla JS implementation
+ */
+export class Todo {
+  // Default options
+  private static defaults: TodoOptions = {
+    title: 'Todo List',
+    items: [],
+    placeholder: 'Add a new todo',
+    size: 'md',
+    showCompleted: true,
+    disabled: false,
+  };
+
+  // DOM elements
+  private element: HTMLElement;
+  private listElement: HTMLElement | null = null;
+  private formElement: HTMLFormElement | null = null;
+  private inputElement: HTMLInputElement | null = null;
+
+  // State
+  private options: TodoOptions;
+  private items: TodoItem[] = [];
+
+  /**
+   * Constructor
+   * @param element - DOM element or selector
+   * @param options - Configuration options
+   */
+  constructor(element: string | HTMLElement, options: TodoOptions = {}) {
+    // Get element reference
+    this.element =
+      typeof element === 'string' ? (document.querySelector(element) as HTMLElement) : element;
+
+    if (!this.element) {
+      throw new Error('Todo: Element not found');
+    }
+
+    // Merge default options with provided options
+    this.options = { ...Todo.defaults, ...options };
+    this.items = this.options.items || [];
+
+    // Initialize the component
+    this._initialize();
+  }
+
+  /**
+   * Initialize the component
+   * @private
+   */
+  private _initialize(): void {
+    // Clear element
+    this.element.innerHTML = '';
+
+    // Add base class
+    this.element.classList.add(TODO.CLASSES.BASE);
+
+    // Add size class if not default
+    if (this.options.size && this.options.size !== 'md') {
+      this.element.classList.add(`c-todo--${this.options.size}`);
+    }
+
+    // Add disabled class if needed
+    if (this.options.disabled) {
+      this.element.classList.add('c-todo--disabled');
+    }
+
+    // Create structure
+    this._createStructure();
+
+    // Bind events
+    this._bindEvents();
+
+    // Render items
+    this._renderItems();
+  }
+
+  /**
+   * Create component structure
+   * @private
+   */
+  private _createStructure(): void {
+    // Title
+    if (this.options.title) {
+      const title = document.createElement('h2');
+      title.className = 'c-todo__title';
+      title.textContent = this.options.title;
+      this.element.appendChild(title);
+    }
+
+    // Form
+    this.formElement = document.createElement('form');
+    this.formElement.className = 'c-todo__form';
+
+    const formGroup = document.createElement('div');
+    formGroup.className = 'c-todo__form-group';
+
+    // Input
+    this.inputElement = document.createElement('input');
+    this.inputElement.type = 'text';
+    this.inputElement.className = 'c-todo__input c-input';
+    this.inputElement.placeholder = this.options.placeholder || 'Add a new todo';
+    this.inputElement.disabled = this.options.disabled || false;
+    this.inputElement.setAttribute('aria-label', 'Add a new todo');
+
+    // Add button
+    const addButton = document.createElement('button');
+    addButton.type = 'submit';
+    addButton.className = 'c-todo__add-btn c-btn c-btn--primary';
+    addButton.disabled = this.options.disabled || false;
+    addButton.setAttribute('aria-label', 'Add todo');
+
+    // Plus icon (SVG)
+    const svgNS = 'http://www.w3.org/2000/svg';
+    const iconSvg = document.createElementNS(svgNS, 'svg');
+    iconSvg.setAttribute('width', '16');
+    iconSvg.setAttribute('height', '16');
+    iconSvg.setAttribute('viewBox', '0 0 256 256');
+    iconSvg.setAttribute('fill', 'none');
+    iconSvg.setAttribute('xmlns', svgNS);
+
+    // Create the plus icon path
+    const iconPath = document.createElementNS(svgNS, 'path');
+    iconPath.setAttribute(
+      'd',
+      'M224 128a8 8 0 0 1-8 8h-80v80a8 8 0 0 1-16 0v-80H40a8 8 0 0 1 0-16h80V40a8 8 0 0 1 16 0v80h80a8 8 0 0 1 8 8Z'
+    );
+    iconPath.setAttribute('fill', 'currentColor');
+
+    iconSvg.appendChild(iconPath);
+    addButton.appendChild(iconSvg);
+
+    formGroup.appendChild(this.inputElement);
+    formGroup.appendChild(addButton);
+    this.formElement.appendChild(formGroup);
+    this.element.appendChild(this.formElement);
+
+    // List
+    this.listElement = document.createElement('ul');
+    this.listElement.className = 'c-todo__list';
+    this.element.appendChild(this.listElement);
+  }
+
+  /**
+   * Bind event listeners
+   * @private
+   */
+  private _bindEvents(): void {
+    if (this.formElement) {
+      this.formElement.addEventListener('submit', this._handleSubmit.bind(this));
+    }
+
+    // Apply focus effect to input if available
+    if (this.inputElement) {
+      this.inputElement.addEventListener('focus', () => {
+        const formGroup = this.inputElement
+          ? this.inputElement.closest('.c-todo__form-group')
+          : null;
+        formGroup?.classList.add('is-focused');
+      });
+
+      this.inputElement.addEventListener('blur', () => {
+        const formGroup = this.inputElement
+          ? this.inputElement.closest('.c-todo__form-group')
+          : null;
+        formGroup?.classList.remove('is-focused');
+      });
+    }
+  }
+
+  /**
+   * Handle form submission
+   * @private
+   */
+  private _handleSubmit(event: Event): void {
+    event.preventDefault();
+
+    if (this.options.disabled || !this.inputElement) return;
+
+    const text = this.inputElement.value.trim();
+    if (!text) return;
+
+    // Add new todo
+    const newItem = this.addTodo(text);
+
+    // Clear input
+    this.inputElement.value = '';
+
+    // Call callback if provided
+    if (newItem && this.options.onAddTodo) {
+      this.options.onAddTodo(newItem.text);
+    }
+  }
+
+  /**
+   * Handle item toggle
+   * @private
+   */
+  private _handleToggle(id: string): void {
+    if (this.options.disabled) return;
+
+    const item = this.items.find(item => item.id === id);
+    if (!item) return;
+
+    item.completed = !item.completed;
+    this._renderItems();
+
+    // Call callback if provided
+    if (this.options.onToggleTodo) {
+      this.options.onToggleTodo(id);
+    }
+
+    // Dispatch custom event
+    this.element.dispatchEvent(
+      new CustomEvent(TodoEvents.TOGGLE, {
+        bubbles: true,
+        detail: { id, completed: item.completed },
+      })
+    );
+  }
+
+  /**
+   * Handle item deletion
+   * @private
+   */
+  private _handleDelete(id: string): void {
+    if (this.options.disabled) return;
+
+    const deleted = this.deleteTodo(id);
+
+    if (deleted) {
+      // Call callback if provided
+      if (this.options.onDeleteTodo) {
+        this.options.onDeleteTodo(id);
+      }
+
+      // Dispatch custom event
+      this.element.dispatchEvent(
+        new CustomEvent(TodoEvents.DELETE, {
+          bubbles: true,
+          detail: { id },
+        })
+      );
+    }
+  }
+
+  /**
+   * Render todo items
+   * @private
+   */
+  private _renderItems(): void {
+    if (!this.listElement) return;
+
+    // Clear list
+    this.listElement.innerHTML = '';
+
+    // Filter items if needed
+    const itemsToRender = this.options.showCompleted
+      ? this.items
+      : this.items.filter(item => !item.completed);
+
+    // Render each item
+    itemsToRender.forEach(item => {
+      const listItem = document.createElement('li');
+      listItem.className = 'c-todo__item';
+      listItem.dataset.id = item.id;
+
+      if (item.completed) {
+        listItem.classList.add('c-todo__item--completed');
+      }
+
+      // Checkbox
+      const checkbox = document.createElement('input');
+      checkbox.type = 'checkbox';
+      checkbox.className = 'c-todo__checkbox';
+      checkbox.checked = item.completed;
+      checkbox.disabled = this.options.disabled || false;
+      checkbox.setAttribute(
+        'aria-label',
+        `Mark "${item.text}" as ${item.completed ? 'incomplete' : 'complete'}`
+      );
+
+      // Label
+      const label = document.createElement('span');
+      label.className = 'c-todo__text';
+      label.textContent = item.text;
+
+      // Delete button
+      const deleteButton = document.createElement('button');
+      deleteButton.type = 'button';
+      deleteButton.className = 'c-todo__delete-btn';
+      deleteButton.disabled = this.options.disabled || false;
+      deleteButton.setAttribute('aria-label', `Delete "${item.text}"`);
+
+      // Trash icon (SVG)
+      const svgNS = 'http://www.w3.org/2000/svg';
+      const iconSvg = document.createElementNS(svgNS, 'svg');
+      iconSvg.setAttribute('width', '16');
+      iconSvg.setAttribute('height', '16');
+      iconSvg.setAttribute('viewBox', '0 0 256 256');
+      iconSvg.setAttribute('fill', 'none');
+      iconSvg.setAttribute('xmlns', svgNS);
+
+      // Create the trash icon path
+      const iconPath = document.createElementNS(svgNS, 'path');
+      iconPath.setAttribute(
+        'd',
+        'M216 48h-40v-8a24 24 0 0 0-24-24h-48a24 24 0 0 0-24 24v8H40a8 8 0 0 0 0 16h8v144a16 16 0 0 0 16 16h128a16 16 0 0 0 16-16V64h8a8 8 0 0 0 0-16ZM96 40a8 8 0 0 1 8-8h48a8 8 0 0 1 8 8v8H96Zm96 168H64V64h128Zm-80-104v64a8 8 0 0 1-16 0v-64a8 8 0 0 1 16 0Zm48 0v64a8 8 0 0 1-16 0v-64a8 8 0 0 1 16 0Z'
+      );
+      iconPath.setAttribute('fill', 'currentColor');
+
+      iconSvg.appendChild(iconPath);
+      deleteButton.appendChild(iconSvg);
+
+      // Add elements to list item
+      listItem.appendChild(checkbox);
+      listItem.appendChild(label);
+      listItem.appendChild(deleteButton);
+
+      // Add list item to list
+      if (this.listElement) {
+        this.listElement.appendChild(listItem);
+      }
+
+      // Add event listeners
+      checkbox.addEventListener('change', () => this._handleToggle(item.id));
+      deleteButton.addEventListener('click', e => {
+        e.preventDefault();
+        this._handleDelete(item.id);
+      });
+    });
+  }
+
+  /**
+   * Add a new todo item
+   * @param text - Todo text
+   * @returns The new todo item or null if failed
+   */
+  public addTodo(text: string): TodoItem | null {
+    if (!text.trim() || this.options.disabled) return null;
+
+    const newItem: TodoItem = {
+      id: uuidv4(),
+      text: text.trim(),
+      completed: false,
+    };
+
+    this.items.push(newItem);
+    this._renderItems();
+
+    // Dispatch custom event
+    this.element.dispatchEvent(
+      new CustomEvent(TodoEvents.ADD, {
+        bubbles: true,
+        detail: { item: newItem },
+      })
+    );
+
+    return newItem;
+  }
+
+  /**
+   * Toggle a todo item's completed state
+   * @param id - Todo item ID
+   * @returns The toggled todo item or null if not found
+   */
+  public toggleTodo(id: string): TodoItem | null {
+    const item = this.items.find(item => item.id === id);
+    if (!item || this.options.disabled) return null;
+
+    item.completed = !item.completed;
+    this._renderItems();
+
+    return item;
+  }
+
+  /**
+   * Delete a todo item
+   * @param id - Todo item ID
+   * @returns Whether the item was deleted
+   */
+  public deleteTodo(id: string): boolean {
+    const initialLength = this.items.length;
+    this.items = this.items.filter(item => item.id !== id);
+
+    if (this.items.length !== initialLength) {
+      this._renderItems();
+      return true;
+    }
+
+    return false;
+  }
+
+  /**
+   * Update todo items
+   * @param items - New todo items
+   */
+  public updateItems(items: TodoItem[]): void {
+    this.items = items;
+    this._renderItems();
+  }
+
+  /**
+   * Update component options
+   * @param options - New options
+   */
+  public update(options: Partial<TodoOptions>): void {
+    this.options = { ...this.options, ...options };
+
+    // Update disabled state
+    if (options.disabled !== undefined) {
+      if (options.disabled) {
+        this.element.classList.add('c-todo--disabled');
+      } else {
+        this.element.classList.remove('c-todo--disabled');
+      }
+
+      if (this.inputElement) {
+        this.inputElement.disabled = options.disabled;
+      }
+
+      const addButton = this.formElement?.querySelector('.c-todo__add-btn') as HTMLButtonElement;
+      if (addButton) {
+        addButton.disabled = options.disabled;
+      }
+    }
+
+    // Update size
+    if (options.size) {
+      // Remove existing size classes
+      ['sm', 'md', 'lg'].forEach(size => {
+        this.element.classList.remove(`c-todo--${size}`);
+      });
+
+      // Add new size class if not default
+      if (options.size !== 'md') {
+        this.element.classList.add(`c-todo--${options.size}`);
+      }
+    }
+
+    // Update title
+    if (options.title !== undefined) {
+      let titleElement = this.element.querySelector('.c-todo__title') as HTMLHeadingElement;
+
+      if (options.title) {
+        if (!titleElement) {
+          titleElement = document.createElement('h2');
+          titleElement.className = 'c-todo__title';
+          this.element.insertBefore(titleElement, this.element.firstChild);
+        }
+        titleElement.textContent = options.title;
+      } else if (titleElement) {
+        titleElement.remove();
+      }
+    }
+
+    // Update placeholder
+    if (options.placeholder && this.inputElement) {
+      this.inputElement.placeholder = options.placeholder;
+    }
+
+    // Update items or showCompleted flag
+    if (options.items || options.showCompleted !== undefined) {
+      if (options.items) {
+        this.items = options.items;
+      }
+      this._renderItems();
+    }
+  }
+
+  /**
+   * Clean up event listeners
+   */
+  public destroy(): void {
+    // Remove form event listener
+    if (this.formElement) {
+      this.formElement.removeEventListener('submit', this._handleSubmit);
+    }
+
+    // Remove input event listeners
+    if (this.inputElement) {
+      this.inputElement.removeEventListener('focus', () => {});
+      this.inputElement.removeEventListener('blur', () => {});
+    }
+
+    // Clear element
+    this.element.innerHTML = '';
+    this.element.classList.remove(TODO.CLASSES.BASE);
+  }
+
+  /**
+   * Initialize all Todo components in the document
+   */
+  public static initializeAll(): void {
+    const todoElements = document.querySelectorAll<HTMLElement>('.c-todo');
+    todoElements.forEach(element => {
+      new Todo(element);
+    });
+  }
+}
+
+// Export todoInteractions
+export * from './todoInteractions';

package/src/components/Todo/scripts/todoInteractions.ts

@@ -0,0 +1,118 @@
+import { Todo, TodoEvents } from './index';
+import { TodoItem } from './types';
+import { TODO } from '../../../lib/constants/components';
+
+/**
+ * Apply hover effect to todo items
+ * @param todoItem - Todo item element
+ */
+export function applyHoverEffect(todoItem: HTMLElement): void {
+  const hoverClass = 'is-hovered';
+
+  todoItem.addEventListener('mouseenter', () => {
+    todoItem.classList.add(hoverClass);
+  });
+
+  todoItem.addEventListener('mouseleave', () => {
+    todoItem.classList.remove(hoverClass);
+  });
+}
+
+/**
+ * Apply focus effect to todo input
+ * @param input - Todo input element
+ */
+export function applyFocusEffect(input: HTMLInputElement): void {
+  const focusClass = 'is-focused';
+  const formGroup = input.closest('.c-todo__form-group');
+
+  input.addEventListener('focus', () => {
+    formGroup?.classList.add(focusClass);
+  });
+
+  input.addEventListener('blur', () => {
+    formGroup?.classList.remove(focusClass);
+  });
+}
+
+/**
+ * Initialize a single todo item with event listeners
+ * @param item - Todo item element
+ * @param id - Todo item ID
+ * @param onToggle - Toggle callback
+ * @param onDelete - Delete callback
+ */
+export function initializeTodoItem(
+  item: HTMLElement,
+  id: string,
+  onToggle?: (id: string) => void,
+  onDelete?: (id: string) => void
+): void {
+  const checkbox = item.querySelector('.c-todo__checkbox') as HTMLInputElement;
+  const deleteButton = item.querySelector('.c-todo__delete-btn') as HTMLButtonElement;
+
+  if (checkbox) {
+    checkbox.addEventListener('change', () => {
+      if (onToggle) onToggle(id);
+    });
+  }
+
+  if (deleteButton) {
+    deleteButton.addEventListener('click', e => {
+      e.preventDefault();
+      if (onDelete) onDelete(id);
+    });
+  }
+
+  // Apply hover effect
+  applyHoverEffect(item);
+}
+
+/**
+ * Initialize all todos on the page
+ * @returns Array of todo instances
+ */
+export function initializeAllTodos(selector = '[data-component="todo"]'): Todo[] {
+  const todoInstances: Todo[] = [];
+  const todoElements = document.querySelectorAll<HTMLElement>(selector);
+
+  todoElements.forEach(element => {
+    try {
+      const instance = new Todo(element);
+      todoInstances.push(instance);
+    } catch (error) {
+      console.error('Error initializing todo:', error);
+    }
+  });
+
+  return todoInstances;
+}
+
+/**
+ * Filter todo items by completion status
+ * @param items - Todo items array
+ * @param showCompleted - Whether to include completed items
+ * @returns Filtered todo items
+ */
+export function filterTodoItems(items: TodoItem[], showCompleted: boolean): TodoItem[] {
+  if (showCompleted) {
+    return [...items];
+  }
+  return items.filter(item => !item.completed);
+}
+
+/**
+ * Sort todo items by completion status and creation time
+ * @param items - Todo items array
+ * @returns Sorted todo items
+ */
+export function sortTodoItems(items: TodoItem[]): TodoItem[] {
+  return [...items].sort((a, b) => {
+    // Sort by completion status first
+    if (a.completed !== b.completed) {
+      return a.completed ? 1 : -1;
+    }
+    // Then by creation time (assuming newer items have higher IDs)
+    return a.id.localeCompare(b.id);
+  });
+}

package/src/components/Todo/scripts/types.ts

@@ -0,0 +1,19 @@
+/**
+ * Todo item interface
+ */
+export interface TodoItem {
+  /**
+   * Unique identifier for the todo
+   */
+  id: string;
+
+  /**
+   * Todo item text
+   */
+  text: string;
+
+  /**
+   * Whether the todo is completed
+   */
+  completed: boolean;
+}

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

@@ -0,0 +1,50 @@
+import React from 'react';
+import { StoryFn, Meta } from '@storybook/react';
+import { Toggle } from './Toggle';
+
+export default {
+  title: 'Components/Toggle',
+  component: Toggle,
+  argTypes: {
+    initialOn: {
+      control: { type: 'boolean' },
+      defaultValue: false,
+    },
+    disabled: {
+      control: { type: 'boolean' },
+      defaultValue: false,
+    },
+    onToggleOn: { action: 'toggled on' },
+    onToggleOff: { action: 'toggled off' },
+  },
+} as Meta<typeof Toggle>;
+
+const Template: StoryFn<typeof Toggle> = args => (
+  <div style={{ display: 'flex', justifyContent: 'center', padding: '30px' }}>
+    <Toggle {...args} />
+  </div>
+);
+
+export const Default = Template.bind({});
+Default.args = {
+  initialOn: false,
+  disabled: false,
+};
+
+export const InitiallyOn = Template.bind({});
+InitiallyOn.args = {
+  initialOn: true,
+  disabled: false,
+};
+
+export const Disabled = Template.bind({});
+Disabled.args = {
+  initialOn: false,
+  disabled: true,
+};
+
+export const DisabledOn = Template.bind({});
+DisabledOn.args = {
+  initialOn: true,
+  disabled: true,
+};