function List1({ title = "List Title", cards = [], onAddCard, onDrop, droppableId, provided }) { return /*#__PURE__*/ React.createElement("div", { className: "bg-[#ebecf0] rounded-lg p-3 w-[272px] flex flex-col", ref: provided?.innerRef, ...provided?.droppableProps, __source: { fileName: "", lineNumber: 10, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-roboto text-sm font-semibold mb-2", __source: { fileName: "", lineNumber: 15, columnNumber: 7 }, __self: this }, title), /*#__PURE__*/ React.createElement("div", { className: "flex-1 min-h-[2px]", __source: { fileName: "", lineNumber: 16, columnNumber: 7 }, __self: this }, cards.map((card, index)=>/*#__PURE__*/ React.createElement(React.Fragment, null)), provided?.placeholder), /*#__PURE__*/ React.createElement("button", { onClick: onAddCard, className: "mt-2 w-full text-left text-gray-600 hover:bg-gray-200 rounded px-2 py-1", __source: { fileName: "", lineNumber: 22, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-plus mr-2", __source: { fileName: "", lineNumber: 26, columnNumber: 9 }, __self: this }), "Add a card")); } function List1Story() { const [lists, setLists] = useState([ { id: 1, title: "To Do", cards: [ { id: 1, title: "Website Redesign", description: "Update the landing page with new branding", checklist: [ { id: 1, text: "Update color scheme", checked: true }, { id: 2, text: "Revise hero section", checked: false } ], labels: [ { color: "#ff6b6b", text: "Design" } ], dueDate: "Mar 25", assignedMembers: [ { name: "Alice", avatar: "/avatar1.jpg" } ] } ] }, { id: 2, title: "In Progress", cards: [] } ]); const handleAddCard = (listId)=>{ const newCard = { id: Date.now(), title: "New Task", description: "Add description", checklist: [], labels: [], dueDate: "", assignedMembers: [] }; setLists(lists.map((list)=>{ if (list.id === listId) { return { ...list, cards: [ ...list.cards, newCard ] }; } return list; })); }; return /*#__PURE__*/ React.createElement("div", { className: "p-8 bg-gray-100", __source: { fileName: "", lineNumber: 82, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(React.Fragment, null)); } function Board({ lists = [], onAddList }) { return /*#__PURE__*/ React.createElement("div", { className: "w-full h-full bg-[#f8f9fa] p-4", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-start overflow-x-auto gap-4 min-h-[calc(100vh-2rem)]", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, lists.map((list, index)=>/*#__PURE__*/ React.createElement(React.Fragment, null)), /*#__PURE__*/ React.createElement("button", { onClick: onAddList, className: "bg-[#e9ecef] hover:bg-[#dee2e6] transition-colors duration-200 rounded-lg p-4 min-w-[272px] h-fit text-left font-roboto", __source: { fileName: "", lineNumber: 8, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-plus mr-2", __source: { fileName: "", lineNumber: 12, columnNumber: 11 }, __self: this }), "Add another list"))); } function BoardStory() { const [lists, setLists] = useState([ { title: "To Do", items: [ { title: "Task 1", description: "Description 1" }, { title: "Task 2", description: "Description 2" } ] }, { title: "In Progress", items: [ { title: "Task 3", description: "Description 3" } ] }, { title: "Done", items: [ { title: "Task 4", description: "Description 4" }, { title: "Task 5", description: "Description 5" } ] } ]); const handleAddList = useCallback(()=>{ setLists((prev)=>[ ...prev, { title: "New List", items: [] } ]); }, []); return /*#__PURE__*/ React.createElement("div", { className: "w-full h-full", __source: { fileName: "", lineNumber: 47, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(Board, { lists: lists, onAddList: handleAddList, __source: { fileName: "", lineNumber: 48, columnNumber: 7 }, __self: this })); } function Card({ title, description, checklist, labels, dueDate, assignedMembers, draggableProps }) { const [checklistProgress, setChecklistProgress] = useState(checklist.reduce((acc, item)=>({ ...acc, [item.id]: item.checked }), {})); const completedTasks = Object.values(checklistProgress).filter(Boolean).length; const totalTasks = checklist.length; const progressPercentage = completedTasks / totalTasks * 100; const handleCheckboxChange = (id)=>{ setChecklistProgress((prev)=>({ ...prev, [id]: !prev[id] })); }; return /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow p-4 w-[280px] cursor-grab", ...draggableProps, __source: { fileName: "", lineNumber: 27, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-roboto text-lg font-semibold mb-2", __source: { fileName: "", lineNumber: 31, columnNumber: 7 }, __self: this }, title), /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap gap-1 mb-3", __source: { fileName: "", lineNumber: 33, columnNumber: 7 }, __self: this }, labels.map((label, index)=>/*#__PURE__*/ React.createElement("span", { key: index, className: "px-2 py-1 rounded-full text-xs text-white", style: { backgroundColor: label.color }, __source: { fileName: "", lineNumber: 35, columnNumber: 11 }, __self: this }, label.text))), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600 mb-4 text-sm", __source: { fileName: "", lineNumber: 45, columnNumber: 7 }, __self: this }, description), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 47, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between text-sm mb-1", __source: { fileName: "", lineNumber: 48, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 49, columnNumber: 11 }, __self: this }, "Progress"), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 50, columnNumber: 11 }, __self: this }, completedTasks, "/", totalTasks)), /*#__PURE__*/ React.createElement("div", { className: "w-full bg-gray-200 rounded-full h-2", __source: { fileName: "", lineNumber: 54, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-blue-500 rounded-full h-2 transition-all duration-300", style: { width: `${progressPercentage}%` }, __source: { fileName: "", lineNumber: 55, columnNumber: 11 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "space-y-2 mb-4", __source: { fileName: "", lineNumber: 62, columnNumber: 7 }, __self: this }, checklist.map((item)=>/*#__PURE__*/ React.createElement("label", { key: item.id, className: "flex items-center space-x-2", __source: { fileName: "", lineNumber: 64, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "checkbox", checked: checklistProgress[item.id], onChange: ()=>handleCheckboxChange(item.id), className: "rounded text-blue-500", __source: { fileName: "", lineNumber: 65, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-sm", __source: { fileName: "", lineNumber: 71, columnNumber: 13 }, __self: this }, item.text)))), /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between pt-3 border-t", __source: { fileName: "", lineNumber: 76, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex -space-x-2", __source: { fileName: "", lineNumber: 77, columnNumber: 9 }, __self: this }, assignedMembers.map((member, index)=>/*#__PURE__*/ React.createElement("img", { key: index, src: member.avatar, alt: member.name, className: "w-8 h-8 rounded-full border-2 border-white", title: member.name, __source: { fileName: "", lineNumber: 79, columnNumber: 13 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "text-sm text-gray-500", __source: { fileName: "", lineNumber: 88, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "far fa-clock mr-1", __source: { fileName: "", lineNumber: 89, columnNumber: 11 }, __self: this }), dueDate))); } function CardStory() { const sampleData = { title: "Website Redesign", description: "Update the landing page with new branding", checklist: [ { id: 1, text: "Update color scheme", checked: true }, { id: 2, text: "Revise hero section", checked: false }, { id: 3, text: "Mobile optimization", checked: false } ], labels: [ { color: "#ff6b6b", text: "Design" }, { color: "#4ecdc4", text: "Frontend" } ], dueDate: "Mar 25", assignedMembers: [ { name: "Alice", avatar: "/avatar1.jpg" }, { name: "Bob", avatar: "/avatar2.jpg" } ], draggableProps: { draggable: true, onDragStart: (e)=>e.dataTransfer.setData("text/plain", "") } }; return /*#__PURE__*/ React.createElement("div", { className: "p-8 bg-gray-100", __source: { fileName: "", lineNumber: 122, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(Card, { ...sampleData, __source: { fileName: "", lineNumber: 123, columnNumber: 7 }, __self: this })); } function MainComponent() { const [title, setTitle] = useState("My Project Board"); const [lists, setLists] = useState([ { id: 1, title: "To Do", cards: [ { id: 1, title: "Website Redesign", description: "Update the landing page with new branding", checklist: [ { id: 1, text: "Update color scheme", checked: true }, { id: 2, text: "Revise hero section", checked: false } ], labels: [ { color: "#ff6b6b", text: "Design" } ], dueDate: "Mar 25", assignedMembers: [ { name: "Alice", avatar: "/avatar1.jpg" } ] } ] }, { id: 2, title: "In Progress", cards: [] } ]); const handleDragEnd = (result)=>{ if (!result.destination) return; const { source, destination } = result; const newLists = [ ...lists ]; const sourceList = newLists.find((list)=>list.id === parseInt(source.droppableId)); const destList = newLists.find((list)=>list.id === parseInt(destination.droppableId)); const [movedCard] = sourceList.cards.splice(source.index, 1); destList.cards.splice(destination.index, 0, movedCard); setLists(newLists); }; const handleAddList = useCallback(()=>{ const newList = { id: lists.length + 1, title: "New List", cards: [] }; setLists([ ...lists, newList ]); }, [ lists ]); const handleAddCard = useCallback((listId)=>{ const newCard = { id: Date.now(), title: "New Task", description: "Add description", checklist: [], labels: [], dueDate: "", assignedMembers: [] }; setLists(lists.map((list)=>{ if (list.id === listId) { return { ...list, cards: [ ...list.cards, newCard ] }; } return list; })); }, [ lists ]); return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#f5f6f8] font-roboto", __source: { fileName: "", lineNumber: 79, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "px-4 py-8", __source: { fileName: "", lineNumber: 80, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold text-[#1a1a1a] mb-8 px-4", __source: { fileName: "", lineNumber: 81, columnNumber: 9 }, __self: this }, title), /*#__PURE__*/ React.createElement(React.Fragment, null))); }