"use client"; const MainComponent = ({ apis, onGenerateApiKey, onTestApi })=>{ const [selectedApi, setSelectedApi] = useState(""); const [apiKey, setApiKey] = useState(""); const [config, setConfig] = useState({}); const [testResult, setTestResult] = useState(null); const [customApi, setCustomApi] = useState(""); const [loading, setLoading] = useState(false); const [envVariables, setEnvVariables] = useState({ key1: "default1", key2: "default2", key3: "default3" }); const [configData, setConfigData] = useState(""); const [isOpen, setIsOpen] = useState(false); const handleGenerateApiKey = ()=>{ const key = onGenerateApiKey(selectedApi || customApi, envVariables); setApiKey(key); const apiConfig = apis.find((api)=>api.name === (selectedApi || customApi))?.config || {}; setConfig(apiConfig.requiredParams ? apiConfig : { endpoint: `https://api.${customApi.toLowerCase()}.com`, method: "GET", requiredParams: [ "api_key" ], headers: { "Content-Type": "application/json" } }); setConfigData(JSON.stringify(apiConfig, null, 2)); }; const handleTestApi = async ()=>{ setLoading(true); const result = await onTestApi(selectedApi || customApi, apiKey, config); setLoading(false); setTestResult(result); }; const handleEnvChange = (key, value)=>{ setEnvVariables({ ...envVariables, [key]: value }); }; const handleToggle = ()=>setIsOpen(!isOpen); const handleReset = ()=>{ setSelectedApi(""); setApiKey(""); setConfig({}); setTestResult(null); setCustomApi(""); setLoading(false); setEnvVariables({ key1: "default1", key2: "default2", key3: "default3" }); setConfigData(""); }; const containerClasses = `bg-[#121212] shadow-lg pr-4 pl-4 pt-8 pb-8 rounded-md border border-gray-600 transform transition-transform duration-300 w-[400px] h-full overflow-y-auto ${isOpen ? "translate-x-0" : "translate-x-full"}`; const toggleIconClasses = `fas ${isOpen ? "fa-chevron-left" : "fa-chevron-right"}`; return /*#__PURE__*/ React.createElement("div", { className: "fixed top-0 right-0 h-full", __source: { fileName: "", lineNumber: 61, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: containerClasses, __source: { fileName: "", lineNumber: 62, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mb-4", __source: { fileName: "", lineNumber: 63, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl text-white", __source: { fileName: "", lineNumber: 64, columnNumber: 11 }, __self: this }, "API Configuration Tool"), /*#__PURE__*/ React.createElement("i", { onClick: handleReset, className: "fas fa-sync-alt text-white cursor-pointer", __source: { fileName: "", lineNumber: 65, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 67, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block mb-2 text-white", __source: { fileName: "", lineNumber: 68, columnNumber: 11 }, __self: this }, "Select an API:"), /*#__PURE__*/ React.createElement("select", { className: "w-full border p-2 rounded bg-[#444] text-white", value: selectedApi, name: "selectedApi", onChange: (e)=>setSelectedApi(e.target.value), __source: { fileName: "", lineNumber: 69, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 75, columnNumber: 13 }, __self: this }, "-- Select an API --"), apis.map((api)=>/*#__PURE__*/ React.createElement("option", { key: api.name, value: api.name, __source: { fileName: "", lineNumber: 77, columnNumber: 15 }, __self: this }, api.name)))), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 83, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block mb-2 text-white", __source: { fileName: "", lineNumber: 84, columnNumber: 11 }, __self: this }, "Or enter a custom API:"), /*#__PURE__*/ React.createElement("input", { type: "text", className: "w-full border p-2 rounded bg-[#444] text-white", value: customApi, name: "customApi", onChange: (e)=>setCustomApi(e.target.value), __source: { fileName: "", lineNumber: 85, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 93, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block mb-2 text-white", __source: { fileName: "", lineNumber: 94, columnNumber: 11 }, __self: this }, "Environment Variables:"), Object.keys(envVariables).map((key)=>/*#__PURE__*/ React.createElement("div", { key: key, className: "mt-2", __source: { fileName: "", lineNumber: 96, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", className: "w-full border p-2 rounded bg-[#444] text-white mb-2", placeholder: `Enter value for ${key}`, value: envVariables[key], onChange: (e)=>handleEnvChange(key, e.target.value), __source: { fileName: "", lineNumber: 97, columnNumber: 15 }, __self: this })))), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 107, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "bg-blue-500 text-white p-2 rounded w-full", onClick: ()=>setEnvVariables({ key1: Math.random().toString(36).substring(2, 15), key2: Math.random().toString(36).substring(2, 15), key3: Math.random().toString(36).substring(2, 15) }), __source: { fileName: "", lineNumber: 108, columnNumber: 11 }, __self: this }, "Generate Env Variables")), /*#__PURE__*/ React.createElement("button", { className: "bg-blue-500 text-white p-2 rounded w-full mb-4", onClick: handleGenerateApiKey, __source: { fileName: "", lineNumber: 116, columnNumber: 9 }, __self: this }, "Generate API Key"), apiKey && /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 123, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl mb-2 text-white", __source: { fileName: "", lineNumber: 124, columnNumber: 13 }, __self: this }, "Generated API Key:"), /*#__PURE__*/ React.createElement("p", { className: "break-all bg-[#1d1d1d] p-2 rounded text-white", __source: { fileName: "", lineNumber: 125, columnNumber: 13 }, __self: this }, apiKey)), /*#__PURE__*/ React.createElement("button", { className: "bg-green-500 text-white p-2 rounded w-full mb-4", onClick: handleTestApi, __source: { fileName: "", lineNumber: 128, columnNumber: 9 }, __self: this }, loading ? "Testing..." : "Test API"), testResult && /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 135, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl mb-2 text-white", __source: { fileName: "", lineNumber: 136, columnNumber: 13 }, __self: this }, "Test Result:"), /*#__PURE__*/ React.createElement("p", { className: "text-white", __source: { fileName: "", lineNumber: 137, columnNumber: 13 }, __self: this }, testResult)), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 140, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl mb-2 text-white", __source: { fileName: "", lineNumber: 141, columnNumber: 11 }, __self: this }, "API Configuration JSON:"), /*#__PURE__*/ React.createElement("pre", { className: "bg-[#1d1d1d] p-4 rounded overflow-scroll text-sm text-white", __source: { fileName: "", lineNumber: 142, columnNumber: 11 }, __self: this }, configData))), /*#__PURE__*/ React.createElement("div", { onClick: handleToggle, className: "bg-gray-700 text-white w-10 h-10 flex items-center justify-center cursor-pointer fixed right-0 top-1/2 transform -translate-y-1/2 rounded-l-md shadow-lg", __source: { fileName: "", lineNumber: 147, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: toggleIconClasses, __source: { fileName: "", lineNumber: 151, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 153, columnNumber: 7 }, __self: this }, ` ::-webkit-scrollbar { width: 0; } `)); }; const StoryComponent = ()=>{ const mockApis = [ { name: "OpenAI", config: { endpoint: "https://api.openai.com", requiredParams: [ "api_key", "model" ] } }, { name: "WeatherAPI", config: { endpoint: "https://weatherapi.com", requiredParams: [ "api_key", "location" ] } }, { name: "MovieAPI", config: { endpoint: "https://movieapi.com", requiredParams: [ "api_key", "title" ] } } ]; const handleGenerateApiKey = (apiName, envVariables)=>{ const envString = Object.entries(envVariables).map(([key, value])=>`${key}=${value}`).join("&"); return `API_KEY_${apiName.toUpperCase()}_${envString}`; }; const handleTestApi = async (apiName, apiKey, config)=>{ return `Test successful for ${apiKey}`; }; return /*#__PURE__*/ React.createElement("div", { className: "p-6", __source: { fileName: "", lineNumber: 199, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(MainComponent, { apis: mockApis, onGenerateApiKey: handleGenerateApiKey, onTestApi: handleTestApi, __source: { fileName: "", lineNumber: 200, columnNumber: 7 }, __self: this })); };