Estrutura de Pastas e Componentes

Estrutura de Pastas Recomendada

todo-app/
├── public/
│   ├── index.html
│   └── favicon.ico
├── src/
│   ├── components/
│   │   ├── common/
│   │   │   ├── Header/
│   │   │   │   ├── Header.jsx
│   │   │   │   └── Header.module.css
│   │   │   ├── Button/
│   │   │   ├── Modal/
│   │   │   └── Input/
│   │   ├── todo/
│   │   │   ├── TodoList/
│   │   │   ├── TodoItem/
│   │   │   ├── TodoForm/
│   │   │   ├── TodoFilters/
│   │   │   └── TodoStats/
│   │   └── layout/
│   │       ├── Sidebar/
│   │       └── MainContent/
│   ├── hooks/
│   │   ├── useTodos.js
│   │   ├── useLocalStorage.js
│   │   ├── useTheme.js
│   │   └── useFilter.js
│   ├── utils/
│   │   ├── dateHelpers.js
│   │   ├── storage.js
│   │   ├── constants.js
│   │   └── validators.js
│   ├── contexts/
│   │   ├── TodoContext.js
│   │   └── ThemeContext.js
│   ├── styles/
│   │   ├── globals.css
│   │   ├── variables.css
│   │   └── themes.css
│   ├── App.jsx
│   ├── App.module.css
│   └── index.js
└── package.json

Arquitetura de Componentes

1. App Component (Container Principal)

// App.jsx
import React from 'react';
import { TodoProvider } from './contexts/TodoContext';
import { ThemeProvider } from './contexts/ThemeContext';
import Header from './components/common/Header/Header';
import Sidebar from './components/layout/Sidebar/Sidebar';
import MainContent from './components/layout/MainContent/MainContent';
import styles from './App.module.css';

function App() {
  return (
    <ThemeProvider>
      <TodoProvider>
        <div className={styles.app}>
          <Header />
          <div className={styles.container}>
            <Sidebar />
            <MainContent />
          </div>
        </div>
      </TodoProvider>
    </ThemeProvider>
  );
}

export default App;

2. Context API para Estado Global

// contexts/TodoContext.js
import React, { createContext, useContext, useReducer, useEffect } from 'react';
import { loadTodos, saveTodos } from '../utils/storage';

const TodoContext = createContext();

const todoReducer = (state, action) => {
  switch (action.type) {
    case 'ADD_TODO':
      return [...state, action.payload];
    case 'UPDATE_TODO':
      return state.map(todo => 
        todo.id === action.payload.id ? action.payload : todo
      );
    case 'DELETE_TODO':
      return state.filter(todo => todo.id !== action.payload);
    case 'TOGGLE_TODO':
      return state.map(todo =>
        todo.id === action.payload
          ? { ...todo, completed: !todo.completed }
          : todo
      );
    case 'SET_TODOS':
      return action.payload;
    default:
      return state;
  }
};

export function TodoProvider({ children }) {
  const [todos, dispatch] = useReducer(todoReducer, [], loadTodos);

  useEffect(() => {
    saveTodos(todos);
  }, [todos]);

  return (
    <TodoContext.Provider value={{ todos, dispatch }}>
      {children}
    </TodoContext.Provider>
  );
}

export const useTodos = () => {
  const context = useContext(TodoContext);
  if (!context) {
    throw new Error('useTodos must be used within TodoProvider');
  }
  return context;
};

3. Estrutura de Dados

// Modelo de uma Tarefa
const todoSchema = {
  id: 'uuid-v4',
  title: 'Título da tarefa',
  description: 'Descrição opcional',
  completed: false,
  priority: 'medium', // low, medium, high
  category: 'personal', // personal, work, shopping, health
  tags: ['tag1', 'tag2'],
  dueDate: '2024-12-31',
  createdAt: '2024-01-01T00:00:00.000Z',
  updatedAt: '2024-01-01T00:00:00.000Z'
};

// Categorias
const categories = {
  personal: {
    name: 'Pessoal',
    color: '#6366f1',
    icon: '🏠'
  },
  work: {
    name: 'Trabalho',
    color: '#3b82f6',
    icon: '💼'
  },
  shopping: {
    name: 'Compras',
    color: '#10b981',
    icon: '🛍️'
  },
  health: {
    name: 'Saúde',
    color: '#ef4444',
    icon: '🏥'
  },
  study: {
    name: 'Estudos',
    color: '#f59e0b',
    icon: '📚'
  }
};

4. Componentes Principais

TodoForm

// components/todo/TodoForm/TodoForm.jsx
import React, { useState } from 'react';
import { useTodos } from '../../../contexts/TodoContext';
import { v4 as uuidv4 } from 'uuid';
import styles from './TodoForm.module.css';

function TodoForm({ onClose }) {
  const { dispatch } = useTodos();
  const [formData, setFormData] = useState({
    title: '',
    description: '',
    priority: 'medium',
    category: 'personal',
    dueDate: '',
    tags: []
  });

  const handleSubmit = (e) => {
    e.preventDefault();
    
    const newTodo = {
      ...formData,
      id: uuidv4(),
      completed: false,
      createdAt: new Date().toISOString(),
      updatedAt: new Date().toISOString()
    };

    dispatch({ type: 'ADD_TODO', payload: newTodo });
    onClose();
  };

  // ... resto do componente
}

TodoItem

// components/todo/TodoItem/TodoItem.jsx
import React from 'react';
import { useTodos } from '../../../contexts/TodoContext';
import { formatDistanceToNow } from 'date-fns';
import { ptBR } from 'date-fns/locale';
import styles from './TodoItem.module.css';

function TodoItem({ todo }) {
  const { dispatch } = useTodos();

  const handleToggle = () => {
    dispatch({ type: 'TOGGLE_TODO', payload: todo.id });
  };

  const handleDelete = () => {
    dispatch({ type: 'DELETE_TODO', payload: todo.id });
  };

  const priorityClass = styles[`priority-${todo.priority}`];
  const categoryStyle = {
    borderLeftColor: categories[todo.category].color
  };

  return (
    <div 
      className={`${styles.todoItem} ${todo.completed ? styles.completed : ''}`}
      style={categoryStyle}
    >
      <input
        type="checkbox"
        checked={todo.completed}
        onChange={handleToggle}
        className={styles.checkbox}
      />
      
      <div className={styles.content}>
        <h3 className={styles.title}>{todo.title}</h3>
        {todo.description && (
          <p className={styles.description}>{todo.description}</p>
        )}
        
        <div className={styles.meta}>
          <span className={`${styles.priority} ${priorityClass}`}>
            {todo.priority}
          </span>
          
          <span className={styles.category}>
            {categories[todo.category].icon} {categories[todo.category].name}
          </span>
          
          {todo.dueDate && (
            <span className={styles.dueDate}>
              📅 {formatDistanceToNow(new Date(todo.dueDate), { 
                locale: ptBR,
                addSuffix: true 
              })}
            </span>
          )}
        </div>
      </div>
      
      <div className={styles.actions}>
        <button onClick={handleEdit}>✏️</button>
        <button onClick={handleDelete}>🗑️</button>
      </div>
    </div>
  );
}

5. Hooks Customizados

useLocalStorage

// hooks/useLocalStorage.js
import { useState, useEffect } from 'react';

function useLocalStorage(key, initialValue) {
  const [storedValue, setStoredValue] = useState(() => {
    try {
      const item = window.localStorage.getItem(key);
      return item ? JSON.parse(item) : initialValue;
    } catch (error) {
      console.error(`Error loading ${key} from localStorage:`, error);
      return initialValue;
    }
  });

  const setValue = (value) => {
    try {
      setStoredValue(value);
      window.localStorage.setItem(key, JSON.stringify(value));
    } catch (error) {
      console.error(`Error saving ${key} to localStorage:`, error);
    }
  };

  return [storedValue, setValue];
}

export default useLocalStorage;

useFilter

// hooks/useFilter.js
import { useState, useMemo } from 'react';

function useFilter(items, initialFilters = {}) {
  const [filters, setFilters] = useState({
    search: '',
    category: 'all',
    priority: 'all',
    status: 'all',
    sortBy: 'createdAt',
    sortOrder: 'desc',
    ...initialFilters
  });

  const filteredItems = useMemo(() => {
    let result = [...items];

    // Busca
    if (filters.search) {
      const search = filters.search.toLowerCase();
      result = result.filter(item => 
        item.title.toLowerCase().includes(search) ||
        item.description?.toLowerCase().includes(search) ||
        item.tags?.some(tag => tag.toLowerCase().includes(search))
      );
    }

    // Categoria
    if (filters.category !== 'all') {
      result = result.filter(item => item.category === filters.category);
    }

    // Prioridade
    if (filters.priority !== 'all') {
      result = result.filter(item => item.priority === filters.priority);
    }

    // Status
    if (filters.status !== 'all') {
      result = result.filter(item => 
        filters.status === 'completed' ? item.completed : !item.completed
      );
    }

    // Ordenação
    result.sort((a, b) => {
      const aValue = a[filters.sortBy];
      const bValue = b[filters.sortBy];
      
      if (filters.sortOrder === 'asc') {
        return aValue > bValue ? 1 : -1;
      } else {
        return aValue < bValue ? 1 : -1;
      }
    });

    return result;
  }, [items, filters]);

  return {
    filters,
    setFilters,
    filteredItems,
    updateFilter: (key, value) => setFilters(prev => ({ ...prev, [key]: value }))
  };
}

export default useFilter;

CSS Modules e Temas

Variáveis CSS

/* styles/variables.css */
:root {
  /* Cores */
  --color-primary: #6366f1;
  --color-secondary: #8b5cf6;
  --color-success: #10b981;
  --color-warning: #f59e0b;
  --color-danger: #ef4444;
  
  /* Tema Claro */
  --bg-primary: #ffffff;
  --bg-secondary: #f3f4f6;
  --text-primary: #111827;
  --text-secondary: #6b7280;
  --border-color: #e5e7eb;
  
  /* Espaçamentos */
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
  
  /* Bordas */
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 1rem;
  
  /* Sombras */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

/* Tema Escuro */
[data-theme='dark'] {
  --bg-primary: #1f2937;
  --bg-secondary: #111827;
  --text-primary: #f9fafb;
  --text-secondary: #d1d5db;
  --border-color: #374151;
}

Performance e Otimizações

1. Memo e Callbacks

import React, { memo, useCallback, useMemo } from 'react';

const TodoItem = memo(({ todo, onToggle, onDelete }) => {
  // Componente só re-renderiza se props mudarem
  return <div>...</div>;
});

function TodoList() {
  const { todos, dispatch } = useTodos();
  
  const handleToggle = useCallback((id) => {
    dispatch({ type: 'TOGGLE_TODO', payload: id });
  }, [dispatch]);
  
  const stats = useMemo(() => {
    return {
      total: todos.length,
      completed: todos.filter(t => t.completed).length,
      pending: todos.filter(t => !t.completed).length
    };
  }, [todos]);
  
  return <div>...</div>;
}

2. Lazy Loading

import React, { lazy, Suspense } from 'react';

const TodoStats = lazy(() => import('./components/todo/TodoStats/TodoStats'));

function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <TodoStats />
    </Suspense>
  );
}

Checklist de Desenvolvimento

• Estrutura de pastas criada
• Componentes base implementados
• Context API configurado
• Hooks customizados criados
• Sistema de temas implementado
• CSS Modules configurados
• LocalStorage integrado
• Performance otimizada