function CreateButton({ label, onClick }) { return /*#__PURE__*/ React.createElement("button", { className: "bg-green-500 text-white py-2 px-4 rounded", onClick: onClick, __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, label); } function CreateButtonStory() { const handleCreateList = ()=>{ // Logic to create a list }; return /*#__PURE__*/ React.createElement("div", { className: "flex space-x-4", __source: { fileName: "", lineNumber: 18, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(CreateButton, { label: "作成", onClick: handleCreateList, __source: { fileName: "", lineNumber: 19, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(CreateButton, { label: "Create", onClick: handleCreateList, __source: { fileName: "", lineNumber: 20, columnNumber: 7 }, __self: this })); } function NewListButton({ onClick }) { return /*#__PURE__*/ React.createElement("button", { className: "bg-green-500 text-white py-2 px-4 rounded", onClick: onClick, __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, "作成"); } function NewListButtonStory() { const handleCreateList = ()=>{ console.log("リスト作成ボタンがクリックされました"); }; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 18, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(NewListButton, { onClick: handleCreateList, __source: { fileName: "", lineNumber: 19, columnNumber: 7 }, __self: this })); } function MainComponent({ companies, selectedCompanies, isModalOpen, newListName, filterOptions, savedLists, setNewListName, setIsModalOpen, handleCreateList }) { const filteredCompanies = companies.filter((company)=>(!filterOptions.industry || company.industry === filterOptions.industry) && (!filterOptions.size || company.size === filterOptions.size)); const handleNewListButtonClick = ()=>setIsModalOpen(true); return /*#__PURE__*/ React.createElement("div", { className: "p-4 max-w-4xl mx-auto", __source: { fileName: "", lineNumber: 21, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold mb-4", __source: { fileName: "", lineNumber: 22, columnNumber: 7 }, __self: this }, "企業リスト管理"), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mb-4", __source: { fileName: "", lineNumber: 24, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement(NewListButton, { onClick: handleNewListButtonClick, __source: { fileName: "", lineNumber: 25, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement(CreateButton, { label: "新規リスト作成", onClick: handleCreateList, __source: { fileName: "", lineNumber: 26, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("table", { className: "w-full border-collapse border mb-4", __source: { fileName: "", lineNumber: 29, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("thead", { __source: { fileName: "", lineNumber: 30, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("tr", { __source: { fileName: "", lineNumber: 31, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("th", { className: "border px-4 py-2", __source: { fileName: "", lineNumber: 32, columnNumber: 13 }, __self: this }, "選択"), /*#__PURE__*/ React.createElement("th", { className: "border px-4 py-2", __source: { fileName: "", lineNumber: 33, columnNumber: 13 }, __self: this }, "企業名"), /*#__PURE__*/ React.createElement("th", { className: "border px-4 py-2", __source: { fileName: "", lineNumber: 34, columnNumber: 13 }, __self: this }, "業界"), /*#__PURE__*/ React.createElement("th", { className: "border px-4 py-2", __source: { fileName: "", lineNumber: 35, columnNumber: 13 }, __self: this }, "企業規模"))), /*#__PURE__*/ React.createElement("tbody", { __source: { fileName: "", lineNumber: 38, columnNumber: 9 }, __self: this }, filteredCompanies.map((company)=>/*#__PURE__*/ React.createElement("tr", { key: company.id, __source: { fileName: "", lineNumber: 40, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("td", { className: "border px-4 py-2", __source: { fileName: "", lineNumber: 41, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "checkbox", name: "selectedCompanies", checked: selectedCompanies.includes(company.id), onChange: ()=>{}, __source: { fileName: "", lineNumber: 42, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("td", { className: "border px-4 py-2", __source: { fileName: "", lineNumber: 49, columnNumber: 15 }, __self: this }, company.name), /*#__PURE__*/ React.createElement("td", { className: "border px-4 py-2", __source: { fileName: "", lineNumber: 50, columnNumber: 15 }, __self: this }, company.industry), /*#__PURE__*/ React.createElement("td", { className: "border px-4 py-2", __source: { fileName: "", lineNumber: 51, columnNumber: 15 }, __self: this }, company.size))))), isModalOpen && /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center", __source: { fileName: "", lineNumber: 58, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white p-4 rounded shadow w-[400px]", __source: { fileName: "", lineNumber: 59, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold mb-2", __source: { fileName: "", lineNumber: 60, columnNumber: 13 }, __self: this }, "新規リスト作成"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "newListName", value: newListName, onChange: (e)=>setNewListName(e.target.value), className: "border p-2 mb-4 w-full", placeholder: "リスト名を入力", __source: { fileName: "", lineNumber: 61, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement(CreateButton, { label: "作成", onClick: handleCreateList, __source: { fileName: "", lineNumber: 69, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "bg-red-500 text-white py-2 px-4 rounded ml-2", onClick: ()=>setIsModalOpen(false), __source: { fileName: "", lineNumber: 70, columnNumber: 13 }, __self: this }, "キャンセル"))), /*#__PURE__*/ React.createElement("ul", { __source: { fileName: "", lineNumber: 80, columnNumber: 7 }, __self: this }, savedLists.map((list, index)=>/*#__PURE__*/ React.createElement("li", { key: index, className: "mb-2", __source: { fileName: "", lineNumber: 82, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("strong", { __source: { fileName: "", lineNumber: 83, columnNumber: 13 }, __self: this }, list.name), ": ", list.companies.length, "社", /*#__PURE__*/ React.createElement("ul", { className: "list-disc pl-5 mt-1", __source: { fileName: "", lineNumber: 84, columnNumber: 13 }, __self: this }, list.companies.map((company)=>/*#__PURE__*/ React.createElement("li", { key: company.id, __source: { fileName: "", lineNumber: 86, columnNumber: 17 }, __self: this }, company.name))))))); } function StoryComponent() { const companies = [ { id: 1, name: '株式会社A', industry: 'IT', size: '大企業' }, { id: 2, name: '株式会社B', industry: '製造', size: '中小企業' }, { id: 3, name: '株式会社C', industry: 'サービス', size: '大企業' }, { id: 4, name: '株式会社D', industry: 'IT', size: '中小企業' }, { id: 5, name: '株式会社E', industry: '製造', size: '大企業' } ]; const selectedCompanies = [ 1, 3 ]; const isModalOpen = true; const newListName = ''; const filterOptions = { industry: '', size: '' }; const savedLists = [ { name: "興味のある企業", companies: [ { id: 1, name: '株式会社A', industry: 'IT', size: '大企業' }, { id: 2, name: '株式会社B', industry: '製造', size: '中小企業' } ] } ]; const setNewListName = (name)=>{}; const setIsModalOpen = (open)=>{}; const handleCreateList = ()=>{}; return /*#__PURE__*/ React.createElement(MainComponent, { companies: companies, selectedCompanies: selectedCompanies, isModalOpen: isModalOpen, newListName: newListName, filterOptions: filterOptions, savedLists: savedLists, setNewListName: setNewListName, setIsModalOpen: setIsModalOpen, handleCreateList: handleCreateList, __source: { fileName: "", lineNumber: 122, columnNumber: 5 }, __self: this }); }

企業名	業界	企業規模
株式会社A	IT	大企業
株式会社B	製造	中小企業
株式会社C	サービス	大企業
株式会社D	IT	中小企業
株式会社E	製造	大企業