function MainComponent({ apiName, authMethods, headers, parameters }) { const [headerList, setHeaderList] = React.useState(headers || []); const [parameterList, setParameterList] = React.useState(parameters || []); const [selectedAuthMethod, setSelectedAuthMethod] = React.useState(authMethods[0] || ''); const addHeader = ()=>{ setHeaderList(headerList.concat({ key: '', value: '' })); }; const addParameter = ()=>{ setParameterList(parameterList.concat({ key: '', value: '' })); }; const removeHeader = (indexToRemove)=>{ setHeaderList(headerList.filter((_, index)=>index !== indexToRemove)); }; const removeParameter = (indexToRemove)=>{ setParameterList(parameterList.filter((_, index)=>index !== indexToRemove)); }; const handleAuthMethodChange = (e)=>{ setSelectedAuthMethod(e.target.value); }; return /*#__PURE__*/ React.createElement("div", { className: "p-6 bg-[#252A41] text-[#D0D0DA] rounded-lg space-y-6", __source: { fileName: "", lineNumber: 27, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 28, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between", __source: { fileName: "", lineNumber: 29, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-lg font-semibold", __source: { fileName: "", lineNumber: 30, columnNumber: 11 }, __self: this }, "API Name", /*#__PURE__*/ React.createElement("input", { className: "block w-full p-2 mt-1 text-black border border-gray-300 rounded-md font-roboto", type: "text", defaultValue: apiName, name: "apiName", __source: { fileName: "", lineNumber: 32, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("label", { className: "block text-lg font-semibold", __source: { fileName: "", lineNumber: 39, columnNumber: 11 }, __self: this }, "Authentication", /*#__PURE__*/ React.createElement("select", { className: "block w-full p-2 mt-1 text-black border border-gray-300 rounded-md font-roboto", value: selectedAuthMethod, onChange: handleAuthMethodChange, name: "authMethod", __source: { fileName: "", lineNumber: 41, columnNumber: 13 }, __self: this }, authMethods.map((method, index)=>/*#__PURE__*/ React.createElement("option", { key: index, value: method, __source: { fileName: "", lineNumber: 48, columnNumber: 17 }, __self: this }, method)))))), /*#__PURE__*/ React.createElement("div", { className: "space-y-2", __source: { fileName: "", lineNumber: 54, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h4", { className: "text-lg font-semibold font-roboto", __source: { fileName: "", lineNumber: 55, columnNumber: 9 }, __self: this }, "Shared headers for all calls"), headerList.map((header, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "flex flex-wrap gap-2 mb-2 items-center", __source: { fileName: "", lineNumber: 57, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { className: "flex-1 p-2 border border-gray-300 rounded-md w-full sm:w-auto font-roboto text-black", type: "text", placeholder: "Key", defaultValue: header.key, name: `headers[${index}][key]`, __source: { fileName: "", lineNumber: 58, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("input", { className: "flex-1 p-2 border border-gray-300 rounded-md w-full sm:w-auto font-roboto text-black", type: "text", placeholder: "Value", defaultValue: header.value, name: `headers[${index}][value]`, __source: { fileName: "", lineNumber: 65, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "p-2 rounded-md hover:bg-gray-600 sm:shrink-0", onClick: ()=>removeHeader(index), __source: { fileName: "", lineNumber: 72, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-trash text-gray-400", __source: { fileName: "", lineNumber: 76, columnNumber: 15 }, __self: this })))), /*#__PURE__*/ React.createElement("button", { className: "px-4 py-2 text-base bg-gray-700 rounded-md hover:bg-gray-600 text-[#D0D0DA]", onClick: addHeader, __source: { fileName: "", lineNumber: 80, columnNumber: 9 }, __self: this }, "Add a shared header")), /*#__PURE__*/ React.createElement("div", { className: "space-y-2", __source: { fileName: "", lineNumber: 87, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h4", { className: "text-lg font-semibold font-roboto", __source: { fileName: "", lineNumber: 88, columnNumber: 9 }, __self: this }, "Shared parameters for all calls"), parameterList.map((parameter, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "flex flex-wrap gap-2 mb-2 items-center", __source: { fileName: "", lineNumber: 90, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { className: "flex-1 p-2 border border-gray-300 rounded-md w-full sm:w-auto font-roboto text-black", type: "text", placeholder: "Key", defaultValue: parameter.key, name: `parameters[${index}][key]`, __source: { fileName: "", lineNumber: 91, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("input", { className: "flex-1 p-2 border border-gray-300 rounded-md w-full sm:w-auto font-roboto text-black", type: "text", placeholder: "Value", defaultValue: parameter.value, name: `parameters[${index}][value]`, __source: { fileName: "", lineNumber: 98, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "p-2 rounded-md hover:bg-gray-600 sm:shrink-0", onClick: ()=>removeParameter(index), __source: { fileName: "", lineNumber: 105, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-trash text-gray-400", __source: { fileName: "", lineNumber: 109, columnNumber: 15 }, __self: this })))), /*#__PURE__*/ React.createElement("button", { className: "px-4 py-2 text-base bg-gray-700 rounded-md hover:bg-gray-600 text-[#D0D0DA]", onClick: addParameter, __source: { fileName: "", lineNumber: 113, columnNumber: 9 }, __self: this }, "Add a shared parameter")), /*#__PURE__*/ React.createElement("div", { className: "flex justify-end gap-4", __source: { fileName: "", lineNumber: 120, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "px-4 py-2 text-base bg-gray-700 rounded-md hover:bg-gray-600 text-[#D0D0DA]", __source: { fileName: "", lineNumber: 121, columnNumber: 9 }, __self: this }, "Import another call from cURL"), /*#__PURE__*/ React.createElement("button", { className: "px-4 py-2 text-base bg-blue-600 rounded-md hover:bg-blue-700 text-[#D0D0DA]", __source: { fileName: "", lineNumber: 124, columnNumber: 9 }, __self: this }, "Add another call"))); } function StoryComponent() { const exampleAuthMethods = [ 'None or self-handled', 'Private key in URL', 'Private key in header', 'HTTP Basic Auth', 'OAuth2 Password Flow', 'OAuth2 User-Agent Flow', 'OAuth2 Custom Token', 'JSON Web Token', 'Client-side SSL certificate' ]; const exampleHeaders = [ { key: 'Authorization', value: 'Bearer token' } ]; const exampleParameters = [ { key: 'lang', value: 'en' } ]; return /*#__PURE__*/ React.createElement("div", { className: "m-10", __source: { fileName: "", lineNumber: 149, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(MainComponent, { apiName: "New API", authMethods: exampleAuthMethods, headers: exampleHeaders, parameters: exampleParameters, __source: { fileName: "", lineNumber: 150, columnNumber: 7 }, __self: this })); }