npm package: @pablituuu/react-todo-app
Description: A beautiful and functional React Todo App component built with Mantine UI
Author: Your Name
Latest version: 1.0.0

# React Todo App Component

A beautiful and functional React Todo App component built with Mantine UI. This component provides a complete todo list application with add, edit, delete, and mark as completed functionality.

## ✨ Features

- ✅ **Add new todos** with a clean input form
- ✏️ **Edit existing todos** inline with keyboard shortcuts
- 🗑️ **Delete todos** with confirmation
- ☑️ **Mark todos as completed** with visual feedback
- 📊 **Progress tracking** with visual progress bar
- 🎨 **Beautiful UI** built with Mantine components
- 📱 **Responsive design** that works on all devices
- ⌨️ **Keyboard shortcuts** (Enter to save, Escape to cancel)
- 🎯 **Customizable text** for internationalization
- 🔄 **Callback support** for external state management

## 🚀 Installation

```bash
npm install @yourusername/react-todo-app
# or
yarn add @yourusername/react-todo-app
# or
pnpm add @yourusername/react-todo-app
```

## 📦 Peer Dependencies

This component requires the following peer dependencies to be installed in your project:

```bash
npm install @mantine/core @mantine/hooks @tabler/icons-react
```

## 🎯 Basic Usage

```tsx
import { TodoApp } from "@yourusername/react-todo-app";
import "@mantine/core/styles.css";

function App() {
  return (
    <div>
      <h1>My Application</h1>
      <TodoApp />
    </div>
  );
}
```

## ⚙️ Props

| Prop                 | Type                      | Default                                 | Description                          |
| -------------------- | ------------------------- | --------------------------------------- | ------------------------------------ |
| `title`              | `string`                  | `"My Todo List"`                        | Main title of the todo app           |
| `subtitle`           | `string`                  | `"Organize your day efficiently"`       | Subtitle below the title             |
| `placeholder`        | `string`                  | `"What do you need to do?"`             | Placeholder text for the input       |
| `addButtonText`      | `string`                  | `"Add"`                                 | Text for the add button              |
| `clearButtonText`    | `string`                  | `"Clear completed"`                     | Text for the clear completed button  |
| `emptyStateTitle`    | `string`                  | `"No pending tasks"`                    | Title when no todos exist            |
| `emptyStateSubtitle` | `string`                  | `"Add your first task to get started!"` | Subtitle when no todos exist         |
| `completedMessage`   | `string`                  | `"All tasks completed!"`                | Message when all todos are completed |
| `pendingMessage`     | `string`                  | `"tasks pending"`                       | Text for pending tasks count         |
| `onTodoChange`       | `(todos: Todo[]) => void` | `undefined`                             | Callback when todos change           |
| `initialTodos`       | `Todo[]`                  | `[]`                                    | Initial todos to populate the app    |
| `className`          | `string`                  | `undefined`                             | CSS class name for styling           |
| `style`              | `React.CSSProperties`     | `undefined`                             | Inline styles for the component      |

## 🔧 Advanced Usage

### With Custom Text

```tsx
import { TodoApp } from "@yourusername/react-todo-app";

function App() {
  return (
    <TodoApp
      title="Mi Lista de Tareas"
      subtitle="Organiza tu día de manera eficiente"
      placeholder="¿Qué necesitas hacer?"
      addButtonText="Agregar"
      clearButtonText="Limpiar completadas"
      emptyStateTitle="No hay tareas pendientes"
      emptyStateSubtitle="¡Agrega tu primera tarea para comenzar!"
      completedMessage="¡Todas las tareas completadas!"
      pendingMessage="tareas pendientes"
    />
  );
}
```

### With External State Management

```tsx
import { useState } from "react";
import { TodoApp, Todo } from "@yourusername/react-todo-app";

function App() {
  const [todos, setTodos] = useState<Todo[]>([
    { id: 1, text: "Learn React", completed: false },
    { id: 2, text: "Build a todo app", completed: true },
  ]);

  const handleTodoChange = (newTodos: Todo[]) => {
    setTodos(newTodos);
    // You can also save to localStorage, API, etc.
    localStorage.setItem("todos", JSON.stringify(newTodos));
  };

  return <TodoApp initialTodos={todos} onTodoChange={handleTodoChange} />;
}
```

### With Custom Styling

```tsx
import { TodoApp } from "@yourusername/react-todo-app";

function App() {
  return (
    <TodoApp
      className="my-custom-todo-app"
      style={{
        maxWidth: "800px",
        margin: "0 auto",
        padding: "20px",
      }}
    />
  );
}
```

## 🎨 Styling

The component uses Mantine's design system and can be customized using:

- **Mantine theme**: Override colors, spacing, and typography
- **CSS classes**: Use the `className` prop for custom CSS
- **Inline styles**: Use the `style` prop for component-specific styling

## ⌨️ Keyboard Shortcuts

- **Enter** (in add input): Add new todo
- **Enter** (in edit input): Save edit
- **Escape** (in edit input): Cancel edit

## 📱 Responsive Design

The component automatically adapts to different screen sizes and provides an optimal experience on:

- Desktop computers
- Tablets
- Mobile phones

## 🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

## 📄 License

This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.

## 🙏 Acknowledgments

- Built with [Mantine](https://mantine.dev/) - A fully featured React components library
- Icons from [Tabler Icons](https://tabler-icons.io/) - Free and open source icons
- Built with [React](https://reactjs.org/) - A JavaScript library for building user interfaces