@shohojdhara/atomix 0.1.16 → 0.1.17

package/src/components/Todo/Todo.stories.tsx

@@ -1,172 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { useState } from 'react';
-import { Todo } from './Todo';
-import { TodoItem } from '../../lib/types/components';
-import { v4 as uuidv4 } from 'uuid';
-
-const meta = {
-  title: 'Components/Todo',
-  component: Todo,
-  parameters: {
-    layout: 'centered',
-  },
-  tags: ['autodocs'],
-  argTypes: {
-    title: {
-      control: 'text',
-      description: 'Title for the todo list',
-    },
-    items: {
-      control: 'object',
-      description: 'Array of todo items',
-    },
-    size: {
-      control: { type: 'select' },
-      options: ['sm', 'md', 'lg'],
-      description: 'Size of the todo component',
-    },
-    placeholder: {
-      control: 'text',
-      description: 'Placeholder text for the new todo input',
-    },
-    showCompleted: {
-      control: 'boolean',
-      description: 'Whether to show completed todos',
-    },
-    disabled: {
-      control: 'boolean',
-      description: 'Whether the component is disabled',
-    },
-  },
-} satisfies Meta<typeof Todo>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-// Sample todo items
-const sampleItems: TodoItem[] = [
-  { id: uuidv4(), text: 'Complete project documentation', completed: false },
-  { id: uuidv4(), text: 'Review pull requests', completed: true },
-  { id: uuidv4(), text: 'Update dependencies', completed: false },
-  { id: uuidv4(), text: 'Write unit tests', completed: false },
-  { id: uuidv4(), text: 'Fix accessibility issues', completed: true },
-];
-
-// Basic example
-export const Basic: Story = {
-  args: {
-    title: 'Todo List',
-    items: sampleItems,
-    size: 'md',
-    placeholder: 'Add a new todo',
-    showCompleted: true,
-  },
-};
-
-// Interactive example
-export const Interactive: Story = {
-  args: {
-    title: 'My Tasks',
-    items: [],
-    size: 'md',
-    placeholder: 'Add a new todo',
-    showCompleted: true,
-  },
-  render: (args) => {
-    const [items, setItems] = useState<TodoItem[]>([
-      { id: uuidv4(), text: 'Learn React', completed: true },
-      { id: uuidv4(), text: 'Build a todo app', completed: false },
-      { id: uuidv4(), text: 'Deploy to production', completed: false },
-    ]);
-
-    const handleAddTodo = (text: string) => {
-      const newItem: TodoItem = {
-        id: uuidv4(),
-        text,
-        completed: false,
-      };
-      setItems([...items, newItem]);
-    };
-
-    const handleToggleTodo = (id: string) => {
-      setItems(
-        items.map(item =>
-          item.id === id ? { ...item, completed: !item.completed } : item
-        )
-      );
-    };
-
-    const handleDeleteTodo = (id: string) => {
-      setItems(items.filter(item => item.id !== id));
-    };
-
-    return (
-      <div style={{ width: '500px' }}>
-        <Todo
-          {...args}
-          title="My Tasks"
-          items={items}
-          onAddTodo={handleAddTodo}
-          onToggleTodo={handleToggleTodo}
-          onDeleteTodo={handleDeleteTodo}
-        />
-      </div>
-    );
-  },
-};
-
-// Size variants
-export const Sizes: Story = {
-  args: {
-    items: sampleItems.slice(0, 3),
-    showCompleted: true,
-  },
-  render: (args) => (
-    <div className="u-d-flex u-flex-column u-gap-4">
-      <Todo
-        {...args}
-        title="Small Todo List"
-        items={args.items}
-        size="sm"
-      />
-      <Todo
-        {...args}
-        title="Medium Todo List"
-        items={args.items}
-        size="md"
-      />
-      <Todo
-        {...args}
-        title="Large Todo List"
-        items={args.items}
-        size="lg"
-      />
-    </div>
-  ),
-};
-
-// Empty state
-export const Empty: Story = {
-  args: {
-    title: 'Empty Todo List',
-    items: [],
-  },
-};
-
-// Hide completed todos
-export const HideCompleted: Story = {
-  args: {
-    title: 'Active Tasks Only',
-    items: sampleItems,
-    showCompleted: false,
-  },
-};
-
-// Disabled state
-export const Disabled: Story = {
-  args: {
-    title: 'Disabled Todo List',
-    items: sampleItems,
-    disabled: true,
-  },
-}; 

package/src/components/Todo/Todo.tsx

@@ -1,169 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { TodoProps } from '../../lib/types/components';
-import { useTodo } from '../../lib/composables/useTodo';
-import { Icon } from '../Icon/Icon';
-import { TODO } from '../../lib/constants/components';
-import { v4 as uuidv4 } from 'uuid';
-
-export const Todo: React.FC<TodoProps> = ({
-  items = [],
-  title = 'Todo List',
-  onAddTodo,
-  onToggleTodo,
-  onDeleteTodo,
-  size = 'md',
-  placeholder = 'Add a new todo',
-  showCompleted = true,
-  className = '',
-  disabled = false,
-}) => {
-  const {
-    inputText,
-    setInputText,
-    addTodo,
-    generateTodoClasses,
-    generateItemClasses,
-  } = useTodo({ items, title, size, placeholder, showCompleted, disabled });
-
-  // State to manage local items
-  const [localItems, setLocalItems] = useState(items);
-  
-  // Update local items when props change
-  useEffect(() => {
-    setLocalItems(items);
-  }, [items]);
-  
-  // Handle item toggle
-  const handleToggle = (id: string) => {
-    if (disabled) return;
-    
-    setLocalItems(prevItems => 
-      prevItems.map(item => 
-        item.id === id 
-          ? { ...item, completed: !item.completed } 
-          : item
-      )
-    );
-    
-    if (onToggleTodo) {
-      onToggleTodo(id);
-    }
-  };
-  
-  // Handle item delete
-  const handleDelete = (id: string) => {
-    if (disabled) return;
-    
-    setLocalItems(prevItems => prevItems.filter(item => item.id !== id));
-    
-    if (onDeleteTodo) {
-      onDeleteTodo(id);
-    }
-  };
-  
-  // Handle form submission
-  const handleFormSubmit = (e: React.FormEvent) => {
-    e.preventDefault();
-    if (disabled || !inputText.trim()) return;
-    
-    // Create a new todo item with a unique ID
-    const newTodo = {
-      id: uuidv4(),
-      text: inputText.trim(),
-      completed: false
-    };
-    
-    // Update local state
-    setLocalItems(prevItems => [...prevItems, newTodo]);
-    
-    // Call parent callback if provided
-    if (onAddTodo) {
-      onAddTodo(inputText);
-    }
-    
-    // Clear the input field
-    setInputText('');
-  };
-  
-  // Filter items based on showCompleted prop
-  const filteredItems = showCompleted 
-    ? localItems 
-    : localItems.filter(item => !item.completed);
-  
-  // Generate component classes
-  const todoClass = generateTodoClasses({ size, className, disabled });
-  
-  return (
-    <div className={todoClass}>
-      {title && <h2 className="c-todo__title">{title}</h2>}
-      
-      <form 
-        className="c-todo__form"
-        onSubmit={handleFormSubmit}
-      >
-        <div className="c-todo__form-group">
-          <input
-            type="text"
-            className="c-todo__input c-input"
-            placeholder={placeholder}
-            value={inputText}
-            onChange={(e) => setInputText(e.target.value)}
-            disabled={disabled}
-            aria-label="Add a new todo"
-          />
-          <button
-            type="submit"
-            className="c-todo__add-btn c-btn c-btn--primary"
-            disabled={disabled || !inputText.trim()}
-            aria-label="Add todo"
-          >
-            <Icon name="Plus" size="sm" />
-          </button>
-        </div>
-      </form>
-      
-      <ul className="c-todo__list">
-        {filteredItems.length === 0 ? (
-          <li className="c-todo__empty">No items to display</li>
-        ) : (
-          filteredItems.map(item => (
-            <li 
-              key={item.id} 
-              className={generateItemClasses(item)}
-            >
-              <div className="c-todo__item-content">
-                <label className="c-todo__checkbox-label">
-                  <input
-                    type="checkbox"
-                    className="c-todo__checkbox c-checkbox"
-                    checked={item.completed}
-                    onChange={() => handleToggle(item.id)}
-                    disabled={disabled}
-                    aria-label={`Mark "${item.text}" as ${item.completed ? 'incomplete' : 'complete'}`}
-                  />
-                  <span className="c-todo__item-text">{item.text}</span>
-                </label>
-                
-                <button
-                  type="button"
-                  className="c-todo__delete-btn c-btn c-btn--error c-btn--sm"
-                  onClick={() => handleDelete(item.id)}
-                  disabled={disabled}
-                  aria-label={`Delete "${item.text}"`}
-                >
-                  <Icon name="Trash" size="sm" />
-                </button>
-              </div>
-            </li>
-          ))
-        )}
-      </ul>
-    </div>
-  );
-};
-
-Todo.displayName = 'Todo';
-
-export type { TodoProps  };
-
-export default Todo;

package/src/components/Todo/index.ts

@@ -1 +0,0 @@
-export {default} from './Todo';

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

@@ -1,14 +0,0 @@
-import { Todo, TodoEvents } from './index';
-import { initializeAllTodos, filterTodoItems, sortTodoItems } from './todoInteractions';
-
-// Initialize global namespace if not exists
-window.Atomix = window.Atomix || {};
-
-// Add Todo to global namespace
-window.Atomix.Todo = Todo;
-window.Atomix.TodoEvents = TodoEvents;
-window.Atomix.initializeAllTodos = initializeAllTodos;
-window.Atomix.filterTodoItems = filterTodoItems;
-window.Atomix.sortTodoItems = sortTodoItems;
-
-export default Todo;