function NewComponent({ tasks, newTask, filter, onAddTask, onNewTaskChange, onToggleComplete, onToggleStar, onUpdateDueDate, onUpdateNotes, onDeleteTask, onFilterChange }) { const filteredTasks = tasks.filter((task)=>{ if (filter === 'active') return !task.completed; if (filter === 'completed') return task.completed; return true; }).sort((a, b)=>{ if (a.starred && !b.starred) return -1; if (!a.starred && b.starred) return 1; if (a.dueDate && b.dueDate) return new Date(a.dueDate) - new Date(b.dueDate); if (a.dueDate) return -1; if (b.dueDate) return 1; return 0; }); return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gradient-to-br from-purple-600 to-blue-500 p-8 font-roboto", __source: { fileName: "", lineNumber: 30, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-4xl mx-auto bg-white rounded-lg shadow-xl overflow-hidden", __source: { fileName: "", lineNumber: 31, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold text-center py-6 bg-gray-100", __source: { fileName: "", lineNumber: 32, columnNumber: 9 }, __self: this }, "Advanced To-Do App"), /*#__PURE__*/ React.createElement("div", { className: "p-6", __source: { fileName: "", lineNumber: 33, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("form", { onSubmit: onAddTask, className: "mb-6", __source: { fileName: "", lineNumber: 34, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex", __source: { fileName: "", lineNumber: 35, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "newTask", value: newTask, onChange: (e)=>onNewTaskChange(e.target.value), placeholder: "Add a new task...", className: "flex-grow px-4 py-2 text-gray-700 bg-gray-100 rounded-l-lg focus:outline-none focus:ring-2 focus:ring-purple-600", __source: { fileName: "", lineNumber: 36, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "px-6 py-2 text-white bg-purple-600 rounded-r-lg hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-purple-600 focus:ring-opacity-50", __source: { fileName: "", lineNumber: 44, columnNumber: 15 }, __self: this }, "Add"))), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 49, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>onFilterChange('all'), className: `mr-2 px-4 py-2 rounded ${filter === 'all' ? 'bg-purple-600 text-white' : 'bg-gray-200 text-gray-700'}`, __source: { fileName: "", lineNumber: 50, columnNumber: 13 }, __self: this }, "All"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>onFilterChange('active'), className: `mr-2 px-4 py-2 rounded ${filter === 'active' ? 'bg-purple-600 text-white' : 'bg-gray-200 text-gray-700'}`, __source: { fileName: "", lineNumber: 51, columnNumber: 13 }, __self: this }, "Active"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>onFilterChange('completed'), className: `px-4 py-2 rounded ${filter === 'completed' ? 'bg-purple-600 text-white' : 'bg-gray-200 text-gray-700'}`, __source: { fileName: "", lineNumber: 52, columnNumber: 13 }, __self: this }, "Completed")), /*#__PURE__*/ React.createElement("ul", { __source: { fileName: "", lineNumber: 54, columnNumber: 11 }, __self: this }, filteredTasks.map((task)=>/*#__PURE__*/ React.createElement("li", { key: task.id, className: "mb-4 p-4 bg-gray-50 rounded-lg shadow", __source: { fileName: "", lineNumber: 56, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between", __source: { fileName: "", lineNumber: 57, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 58, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "checkbox", checked: task.completed, onChange: ()=>onToggleComplete(task.id), className: "mr-2 h-5 w-5 text-purple-600", __source: { fileName: "", lineNumber: 59, columnNumber: 21 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: `text-lg ${task.completed ? 'line-through text-gray-500' : 'text-gray-800'}`, __source: { fileName: "", lineNumber: 65, columnNumber: 21 }, __self: this }, task.text)), /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 67, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>onToggleStar(task.id), className: "mr-2 text-yellow-500 hover:text-yellow-600", __source: { fileName: "", lineNumber: 68, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas ${task.starred ? 'fa-star' : 'fa-star-o'}`, __source: { fileName: "", lineNumber: 69, columnNumber: 23 }, __self: this })), /*#__PURE__*/ React.createElement("input", { type: "date", name: "dueDate", value: task.dueDate || '', onChange: (e)=>onUpdateDueDate(task.id, e.target.value), className: "mr-2 px-2 py-1 text-sm bg-white border rounded", __source: { fileName: "", lineNumber: 71, columnNumber: 21 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: ()=>onDeleteTask(task.id), className: "text-red-500 hover:text-red-600", __source: { fileName: "", lineNumber: 78, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-trash-alt", __source: { fileName: "", lineNumber: 79, columnNumber: 23 }, __self: this })))), /*#__PURE__*/ React.createElement("textarea", { value: task.notes, onChange: (e)=>onUpdateNotes(task.id, e.target.value), placeholder: "Add notes...", className: "mt-2 w-full px-3 py-2 text-gray-700 border rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-600", rows: "2", __source: { fileName: "", lineNumber: 83, columnNumber: 17 }, __self: this }))))))); } function NewComponentStory() { const [tasks, setTasks] = React.useState([]); const [newTask, setNewTask] = React.useState(''); const [filter, setFilter] = React.useState('all'); const addTask = (e)=>{ e.preventDefault(); if (newTask.trim()) { setTasks([ ...tasks, { id: Date.now(), text: newTask, completed: false, dueDate: null, starred: false, notes: '' } ]); setNewTask(''); } }; const toggleComplete = (id)=>{ setTasks(tasks.map((task)=>task.id === id ? { ...task, completed: !task.completed } : task)); }; const toggleStar = (id)=>{ setTasks(tasks.map((task)=>task.id === id ? { ...task, starred: !task.starred } : task)); }; const updateDueDate = (id, date)=>{ setTasks(tasks.map((task)=>task.id === id ? { ...task, dueDate: date } : task)); }; const updateNotes = (id, notes)=>{ setTasks(tasks.map((task)=>task.id === id ? { ...task, notes } : task)); }; const deleteTask = (id)=>{ setTasks(tasks.filter((task)=>task.id !== id)); }; const changeFilter = (newFilter)=>{ setFilter(newFilter); }; return /*#__PURE__*/ React.createElement(NewComponent, { tasks: tasks, newTask: newTask, filter: filter, onAddTask: addTask, onNewTaskChange: setNewTask, onToggleComplete: toggleComplete, onToggleStar: toggleStar, onUpdateDueDate: updateDueDate, onUpdateNotes: updateNotes, onDeleteTask: deleteTask, onFilterChange: changeFilter, __source: { fileName: "", lineNumber: 152, columnNumber: 5 }, __self: this }); } function ProgressiveToDoList({ tasks, newTask, filter, onAddTask, onNewTaskChange, onToggleComplete, onToggleStar, onUpdateDueDate, onUpdateNotes, onDeleteTask, onFilterChange }) { const filteredTasks = tasks.filter((task)=>{ if (filter === 'active') return !task.completed; if (filter === 'completed') return task.completed; return true; }).sort((a, b)=>{ if (a.starred && !b.starred) return -1; if (!a.starred && b.starred) return 1; if (a.dueDate && b.dueDate) return new Date(a.dueDate) - new Date(b.dueDate); if (a.dueDate) return -1; if (b.dueDate) return 1; return 0; }); return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gradient-to-br from-purple-600 to-blue-500 p-8 font-roboto", __source: { fileName: "", lineNumber: 30, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-4xl mx-auto bg-white rounded-lg shadow-xl overflow-hidden", __source: { fileName: "", lineNumber: 31, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold text-center py-6 bg-gray-100", __source: { fileName: "", lineNumber: 32, columnNumber: 9 }, __self: this }, "Advanced To-Do App"), /*#__PURE__*/ React.createElement("div", { className: "p-6", __source: { fileName: "", lineNumber: 33, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("form", { onSubmit: onAddTask, className: "mb-6", __source: { fileName: "", lineNumber: 34, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex", __source: { fileName: "", lineNumber: 35, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "newTask", value: newTask, onChange: (e)=>onNewTaskChange(e.target.value), placeholder: "Add a new task...", className: "flex-grow px-4 py-2 text-gray-700 bg-gray-100 rounded-l-lg focus:outline-none focus:ring-2 focus:ring-purple-600", __source: { fileName: "", lineNumber: 36, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "px-6 py-2 text-white bg-purple-600 rounded-r-lg hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-purple-600 focus:ring-opacity-50", __source: { fileName: "", lineNumber: 44, columnNumber: 15 }, __self: this }, "Add"))), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 49, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>onFilterChange('all'), className: `mr-2 px-4 py-2 rounded ${filter === 'all' ? 'bg-purple-600 text-white' : 'bg-gray-200 text-gray-700'}`, __source: { fileName: "", lineNumber: 50, columnNumber: 13 }, __self: this }, "All"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>onFilterChange('active'), className: `mr-2 px-4 py-2 rounded ${filter === 'active' ? 'bg-purple-600 text-white' : 'bg-gray-200 text-gray-700'}`, __source: { fileName: "", lineNumber: 51, columnNumber: 13 }, __self: this }, "Active"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>onFilterChange('completed'), className: `px-4 py-2 rounded ${filter === 'completed' ? 'bg-purple-600 text-white' : 'bg-gray-200 text-gray-700'}`, __source: { fileName: "", lineNumber: 52, columnNumber: 13 }, __self: this }, "Completed")), /*#__PURE__*/ React.createElement("ul", { __source: { fileName: "", lineNumber: 54, columnNumber: 11 }, __self: this }, filteredTasks.map((task)=>/*#__PURE__*/ React.createElement("li", { key: task.id, className: "mb-4 p-4 bg-gray-50 rounded-lg shadow", __source: { fileName: "", lineNumber: 56, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between", __source: { fileName: "", lineNumber: 57, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 58, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "checkbox", checked: task.completed, onChange: ()=>onToggleComplete(task.id), className: "mr-2 h-5 w-5 text-purple-600", __source: { fileName: "", lineNumber: 59, columnNumber: 21 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: `text-lg ${task.completed ? 'line-through text-gray-500' : 'text-gray-800'}`, __source: { fileName: "", lineNumber: 65, columnNumber: 21 }, __self: this }, task.text)), /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 67, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>onToggleStar(task.id), className: "mr-2 text-yellow-500 hover:text-yellow-600", __source: { fileName: "", lineNumber: 68, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas ${task.starred ? 'fa-star' : 'fa-star-o'}`, __source: { fileName: "", lineNumber: 69, columnNumber: 23 }, __self: this })), /*#__PURE__*/ React.createElement("input", { type: "date", name: "dueDate", value: task.dueDate || '', onChange: (e)=>onUpdateDueDate(task.id, e.target.value), className: "mr-2 px-2 py-1 text-sm bg-white border rounded", __source: { fileName: "", lineNumber: 71, columnNumber: 21 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: ()=>onDeleteTask(task.id), className: "text-red-500 hover:text-red-600", __source: { fileName: "", lineNumber: 78, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-trash-alt", __source: { fileName: "", lineNumber: 79, columnNumber: 23 }, __self: this })))), /*#__PURE__*/ React.createElement("textarea", { value: task.notes, onChange: (e)=>onUpdateNotes(task.id, e.target.value), placeholder: "Add notes...", className: "mt-2 w-full px-3 py-2 text-gray-700 border rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-600", rows: "2", __source: { fileName: "", lineNumber: 83, columnNumber: 17 }, __self: this }))))))); } function ProgressiveToDoListStory() { const [tasks, setTasks] = React.useState([]); const [newTask, setNewTask] = React.useState(''); const [filter, setFilter] = React.useState('all'); const addTask = (e)=>{ e.preventDefault(); if (newTask.trim()) { setTasks([ ...tasks, { id: Date.now(), text: newTask, completed: false, dueDate: null, starred: false, notes: '' } ]); setNewTask(''); } }; const toggleComplete = (id)=>{ setTasks(tasks.map((task)=>task.id === id ? { ...task, completed: !task.completed } : task)); }; const toggleStar = (id)=>{ setTasks(tasks.map((task)=>task.id === id ? { ...task, starred: !task.starred } : task)); }; const updateDueDate = (id, date)=>{ setTasks(tasks.map((task)=>task.id === id ? { ...task, dueDate: date } : task)); }; const updateNotes = (id, notes)=>{ setTasks(tasks.map((task)=>task.id === id ? { ...task, notes } : task)); }; const deleteTask = (id)=>{ setTasks(tasks.filter((task)=>task.id !== id)); }; const changeFilter = (newFilter)=>{ setFilter(newFilter); }; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 152, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(ProgressiveToDoList, { tasks: tasks, newTask: newTask, filter: filter, onAddTask: addTask, onNewTaskChange: setNewTask, onToggleComplete: toggleComplete, onToggleStar: toggleStar, onUpdateDueDate: updateDueDate, onUpdateNotes: updateNotes, onDeleteTask: deleteTask, onFilterChange: changeFilter, __source: { fileName: "", lineNumber: 153, columnNumber: 7 }, __self: this })); } function MainComponent() { const [tasks, setTasks] = React.useState([]); const [newTask, setNewTask] = React.useState(''); const [filter, setFilter] = React.useState('all'); const addTask = (e)=>{ e.preventDefault(); if (newTask.trim()) { setTasks([ ...tasks, { id: Date.now(), text: newTask, completed: false, dueDate: null, starred: false, notes: '' } ]); setNewTask(''); } }; const toggleComplete = (id)=>{ setTasks(tasks.map((task)=>task.id === id ? { ...task, completed: !task.completed } : task)); }; const toggleStar = (id)=>{ setTasks(tasks.map((task)=>task.id === id ? { ...task, starred: !task.starred } : task)); }; const updateDueDate = (id, date)=>{ setTasks(tasks.map((task)=>task.id === id ? { ...task, dueDate: date } : task)); }; const updateNotes = (id, notes)=>{ setTasks(tasks.map((task)=>task.id === id ? { ...task, notes } : task)); }; const deleteTask = (id)=>{ setTasks(tasks.filter((task)=>task.id !== id)); }; const changeFilter = (newFilter)=>{ setFilter(newFilter); }; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 54, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(NewComponent, { tasks: tasks, newTask: newTask, filter: filter, onAddTask: addTask, onNewTaskChange: setNewTask, onToggleComplete: toggleComplete, onToggleStar: toggleStar, onUpdateDueDate: updateDueDate, onUpdateNotes: updateNotes, onDeleteTask: deleteTask, onFilterChange: changeFilter, __source: { fileName: "", lineNumber: 55, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(ProgressiveToDoList, { tasks: tasks, newTask: newTask, filter: filter, onAddTask: addTask, onNewTaskChange: setNewTask, onToggleComplete: toggleComplete, onToggleStar: toggleStar, onUpdateDueDate: updateDueDate, onUpdateNotes: updateNotes, onDeleteTask: deleteTask, onFilterChange: changeFilter, __source: { fileName: "", lineNumber: 68, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 81, columnNumber: 7 }, __self: this }, ` @import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css'); body { margin: 0; padding: 0; font-family: 'Roboto', sans-serif; background: linear-gradient(to bottom right, #383e56, #1b1f3b); color: #fff; } * { box-sizing: border-box; } `)); }