@digi-frontend/dgate-api-documentation 1.0.90 → 1.0.92

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (23) hide show
  1. package/dist/6ec653b209606e22.svg +4 -0
  2. package/dist/ce94023947952cc6.svg +10 -0
  3. package/dist/d318fe83a89fd75b.svg +3 -0
  4. package/dist/src/assets/icons/arrow-down.svg.js +2 -0
  5. package/dist/src/assets/icons/arrow-down.svg.js.map +1 -0
  6. package/dist/src/assets/icons/arrow-up.svg.js +2 -0
  7. package/dist/src/assets/icons/arrow-up.svg.js.map +1 -0
  8. package/dist/src/assets/icons/newCopyIcon.svg.js +2 -0
  9. package/dist/src/assets/icons/newCopyIcon.svg.js.map +1 -0
  10. package/dist/src/layout/docsComponents/DocsContent/OverviewPage/index.js +1 -1
  11. package/dist/src/layout/docsComponents/DocsContent/OverviewPage/index.js.map +1 -1
  12. package/dist/styles.css +356 -315
  13. package/dist/types/assets/icons/index.d.ts +3 -0
  14. package/dist/types/layout/docsComponents/DocsContent/OverviewPage/index.d.ts +1 -0
  15. package/package.json +1 -1
  16. package/src/assets/icons/arrow-down.svg +3 -0
  17. package/src/assets/icons/arrow-up.svg +10 -0
  18. package/src/assets/icons/index.ts +3 -0
  19. package/src/assets/icons/newCopyIcon.svg +4 -0
  20. package/src/layout/docsComponents/DocsContent/OverviewPage/index.tsx +54 -19
  21. package/src/layout/docsComponents/DocsContent/OverviewPage/style.scss +55 -18
  22. package/src/layout/docsComponents/DocsSideMenuTree/style.scss +7 -0
  23. package/variables.txt +1 -1
package/dist/6ec653b209606e22.svg ADDED
@@ -0,0 +1,4 @@
1
+ <svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path d="M12.9487 26.5443H8.0487C3.48703 26.5443 1.45703 24.5143 1.45703 19.9526V15.0526C1.45703 10.4909 3.48703 8.46094 8.0487 8.46094H12.9487C17.5104 8.46094 19.5404 10.4909 19.5404 15.0526V19.9526C19.5404 24.5143 17.5104 26.5443 12.9487 26.5443ZM8.0487 10.2109C4.43203 10.2109 3.20703 11.4359 3.20703 15.0526V19.9526C3.20703 23.5693 4.43203 24.7943 8.0487 24.7943H12.9487C16.5654 24.7943 17.7904 23.5693 17.7904 19.9526V15.0526C17.7904 11.4359 16.5654 10.2109 12.9487 10.2109H8.0487V10.2109Z" fill="#616874"/>
3
+ <path d="M19.9526 19.5404H18.6693C18.1909 19.5404 17.7943 19.1437 17.7943 18.6654V15.0487C17.7943 11.432 16.5693 10.207 12.9526 10.207H9.33594C8.8576 10.207 8.46094 9.81037 8.46094 9.33203V8.0487C8.46094 3.48703 10.4909 1.45703 15.0526 1.45703H19.9526C24.5143 1.45703 26.5443 3.48703 26.5443 8.0487V12.9487C26.5443 17.5104 24.5143 19.5404 19.9526 19.5404ZM19.5443 17.7904H19.9526C23.5693 17.7904 24.7943 16.5654 24.7943 12.9487V8.0487C24.7943 4.43203 23.5693 3.20703 19.9526 3.20703H15.0526C11.4359 3.20703 10.2109 4.43203 10.2109 8.0487V8.45703H12.9526C17.5143 8.45703 19.5443 10.487 19.5443 15.0487V17.7904Z" fill="#616874"/>
4
+ </svg>
package/dist/ce94023947952cc6.svg ADDED
@@ -0,0 +1,10 @@
1
+ <svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <g clip-path="url(#clip0_6817_4615)">
3
+ <path d="M13.9973 8.39927C14.814 8.39927 15.6306 8.71427 16.249 9.3326L23.8556 16.9393C24.194 17.2776 24.194 17.8376 23.8556 18.1759C23.5173 18.5143 22.9573 18.5143 22.619 18.1759L15.0123 10.5693C14.4523 10.0093 13.5423 10.0093 12.9823 10.5693L5.37563 18.1759C5.03729 18.5143 4.47729 18.5143 4.13896 18.1759C3.80062 17.8376 3.80062 17.2776 4.13896 16.9393L11.7456 9.3326C12.364 8.71427 13.1806 8.39927 13.9973 8.39927Z" fill="#616874"/>
4
+ </g>
5
+ <defs>
6
+ <clipPath id="clip0_6817_4615">
7
+ <rect width="28" height="28" fill="white" transform="translate(28 28) rotate(-180)"/>
8
+ </clipPath>
9
+ </defs>
10
+ </svg>
package/dist/d318fe83a89fd75b.svg ADDED
@@ -0,0 +1,3 @@
1
+ <svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path d="M14.0027 19.6007C13.186 19.6007 12.3694 19.2857 11.751 18.6674L4.14437 11.0607C3.80604 10.7224 3.80604 10.1624 4.14437 9.82406C4.48271 9.48573 5.04271 9.48573 5.38104 9.82406L12.9877 17.4307C13.5477 17.9907 14.4577 17.9907 15.0177 17.4307L22.6244 9.82406C22.9627 9.48573 23.5227 9.48573 23.861 9.82406C24.1994 10.1624 24.1994 10.7224 23.861 11.0607L16.2544 18.6674C15.636 19.2857 14.8194 19.6007 14.0027 19.6007Z" fill="#616874"/>
3
+ </svg>
package/dist/src/assets/icons/arrow-down.svg.js ADDED
@@ -0,0 +1,2 @@
1
+ var a="d318fe83a89fd75b.svg";export{a as default};
2
+ //# sourceMappingURL=arrow-down.svg.js.map
package/dist/src/assets/icons/arrow-down.svg.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"arrow-down.svg.js","sources":["../../../../src/assets/icons/arrow-down.svg"],"sourcesContent":["export default \"d318fe83a89fd75b.svg\""],"names":["arrowDown"],"mappings":"AAAA,IAAeA,EAAA"}
package/dist/src/assets/icons/arrow-up.svg.js ADDED
@@ -0,0 +1,2 @@
1
+ var a="ce94023947952cc6.svg";export{a as default};
2
+ //# sourceMappingURL=arrow-up.svg.js.map
package/dist/src/assets/icons/arrow-up.svg.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"arrow-up.svg.js","sources":["../../../../src/assets/icons/arrow-up.svg"],"sourcesContent":["export default \"ce94023947952cc6.svg\""],"names":["arrowUp"],"mappings":"AAAA,IAAeA,EAAA"}
package/dist/src/assets/icons/newCopyIcon.svg.js ADDED
@@ -0,0 +1,2 @@
1
+ var e="6ec653b209606e22.svg";export{e as default};
2
+ //# sourceMappingURL=newCopyIcon.svg.js.map
package/dist/src/assets/icons/newCopyIcon.svg.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"newCopyIcon.svg.js","sources":["../../../../src/assets/icons/newCopyIcon.svg"],"sourcesContent":["export default \"6ec653b209606e22.svg\""],"names":["newCopyIcon"],"mappings":"AAAA,IAAeA,EAAA"}
package/dist/src/layout/docsComponents/DocsContent/OverviewPage/index.js CHANGED
@@ -1,2 +1,2 @@
1
- import{j as e}from"../../../../../_virtual/jsx-runtime.js";import s from"../../../../components/SVGLoader/SVGLoader.js";import i from"../../../../assets/icons/CopySticker.svg.js";import t from"../../../../assets/icons/arrowRightGray.svg.js";import{useSectionToggle as a,SectionEnum as n}from"../../../../context/SectionToggleContext.js";const r=({data:r,setActiveItemData:d,setActiveType:l,onProductNavigate:o,apis:c})=>{var p,m;const{toggleSection:v}=a();return e.jsxs("div",{className:"api-details-page",children:[e.jsx("h2",{className:"welcome",children:"Welcome to"}),e.jsx("h1",{className:"api-title",children:null==r?void 0:r.title}),e.jsxs("p",{className:"api-version",children:["API Version: ",e.jsx("span",{children:null==r?void 0:r.version})]}),e.jsxs("div",{className:"custom-url-input",children:[e.jsx("label",{className:"input-label",children:"API Base URL"}),e.jsxs("div",{className:"input-wrapper",children:[e.jsx("input",{type:"text",value:r&&r.servers&&r.servers.length>0?null===(p=r.servers[0])||void 0===p?void 0:p.url:"-",readOnly:!0}),e.jsx("span",{className:"icon",onClick:()=>{var e;return navigator.clipboard.writeText(`${r&&r.servers&&r.servers.length>0?null===(e=r.servers[0])||void 0===e?void 0:e.url:"-"}`)},children:e.jsx(s,{src:i})})]})]}),e.jsx("p",{className:"api-desc",children:`${r.description||"No Description"}`}),o&&e.jsxs("div",{className:"api-product-tag",children:["Product with this API"," ",e.jsx("span",{className:"product-tag",role:"button",tabIndex:-1,onClick:()=>o(r.associatedProduct.productId),children:r.associatedProduct.name})]}),e.jsx("h3",{className:"section-title",children:"Endpoints"}),Object.entries(null==r?void 0:r.tags).map((([i,a])=>e.jsxs("div",{className:"endpoint-group",children:[e.jsx("h4",{className:"tag-title",children:i}),e.jsx("div",{className:"endpoint-list",children:a.map(((a,o)=>{var c,p,m;return e.jsxs("div",{className:"endpoint-card",onClick:()=>(e=>{d(Object.assign(Object.assign({},e),{api:Object.assign({id:r.apiSpecId,title:r.title,description:r.description,version:r.version},r)})),l("ENDPOINT"),Object.entries((null==r?void 0:r.tags)||{}).findIndex((([,s])=>s.some((s=>s.id===e.id))));const s=Object.entries(r.tags).sort((([e],[s])=>"default"===e?1:"default"===s?-1:e.localeCompare(s))).findIndex((([s,i])=>i.find((s=>s.id===e.id))));v(r.apiSpecId,[{type:n.API_SECTION,setTo:!0},{type:n.ENDPOINTS_SECTION,setTo:!0},{type:n.TAG_SECTION,setTo:!0,index:s},{type:n.RESOURCE,setTo:!0,id:e.id}],{resetOthers:!0,filterKeys:[n.OVERVIEW]})})(a),children:[e.jsxs("div",{children:[e.jsxs("div",{className:"endpoint-card-header",children:[e.jsx("span",{className:`method-label ${a.method.toLowerCase()}`,children:a.method}),e.jsx("div",{className:"title-wrapper",children:e.jsxs("h5",{children:[(a.summary||"Endpoint Name").slice(0,40),(null!==(p=null===(c=a.summary)||void 0===c?void 0:c.length)&&void 0!==p?p:0)>40&&"..."]})})]}),e.jsxs("div",{className:"endpoint-meta",children:[e.jsx("p",{children:a.path}),e.jsx("p",{className:"description",children:null!==(m=a.description)&&void 0!==m?m:"No Description "})]})]}),e.jsx("div",{className:"endpoint-arrow",children:e.jsx(s,{src:t})})]},`${i}-${o}`)}))})]},i))),(null===(m=r.apiVersions)||void 0===m?void 0:m.length)>0&&e.jsxs("div",{className:"versions-section",children:[e.jsx("h4",{children:"API Versions"}),e.jsx("div",{className:"version-list",children:r.apiVersions.map(((s,i)=>{var t;return e.jsx("button",{className:"version-btn",onClick:()=>(e=>{if(e.apiSpecId===r.apiSpecId)return void l("OVERVIEW");const s=r.apiVersions.find((s=>s.apiSpecId===e.apiSpecId));if(!s)return;const i=c.find((e=>e.apiSpecId===s.apiSpecId));d(i),l("OVERVIEW"),v(i.apiSpecId,[{type:n.API_SECTION,setTo:!0},{type:n.OVERVIEW,setTo:!0}],{resetOthers:!0,filterKeys:[n.OVERVIEW,n.API_SECTION,n.ENDPOINTS_SECTION,n.TAG_SECTION]})})(s),children:(null===(t=s.metaData)||void 0===t?void 0:t.version)||"N/A"},i)}))})]})]})};export{r as OverviewPage};
1
+ import{j as s}from"../../../../../_virtual/jsx-runtime.js";import e from"../../../../components/SVGLoader/SVGLoader.js";import i from"../../../../assets/icons/arrowRightGray.svg.js";import n from"../../../../assets/icons/arrow-down.svg.js";import t from"../../../../assets/icons/newCopyIcon.svg.js";import a from"../../../../assets/icons/arrow-up.svg.js";import{useSectionToggle as r,SectionEnum as l}from"../../../../context/SectionToggleContext.js";import{useState as o,useEffect as d}from"react";const c=({data:c,setActiveItemData:p,setActiveType:m,onProductNavigate:v,apis:h})=>{var j,u,x,N;const{toggleSection:I}=r(),[g,O]=o((null===(u=null===(j=null==c?void 0:c.servers)||void 0===j?void 0:j[0])||void 0===u?void 0:u.url)||""),[E,S]=o(!1);d((()=>{var s,e;O((null===(e=null===(s=null==c?void 0:c.servers)||void 0===s?void 0:s[0])||void 0===e?void 0:e.url)||"")}),[c]);return s.jsxs("div",{className:"api-details-page",children:[s.jsx("h2",{className:"welcome",children:"Welcome to"}),s.jsx("h1",{className:"api-title",children:null==c?void 0:c.title}),s.jsxs("p",{className:"api-version",children:["API Version: ",s.jsx("span",{children:null==c?void 0:c.version})]}),s.jsxs("div",{className:"custom-url-input",children:[s.jsx("label",{className:"input-label",children:"API Base URL"}),s.jsxs("div",{className:"url-container",children:[s.jsxs("div",{className:"typeDdl",onClick:()=>S((s=>!s)),children:[s.jsx("span",{className:"url-text",children:g||"-"}),s.jsxs("div",{className:"icon-container",children:[s.jsx("span",{className:"icon",role:"button",tabIndex:0,onClick:s=>{s.stopPropagation(),navigator.clipboard.writeText(g)},children:0!==g.length&&s.jsx(e,{src:t})}),0!==g.length&&s.jsx(e,{src:E?a:n})]})]}),E&&0!==g.length&&s.jsx("div",{className:"urlList",children:null===(x=null==c?void 0:c.servers)||void 0===x?void 0:x.map(((e,i)=>s.jsxs("div",{className:"url-item",onClick:()=>{O(e.url),S(!1)},children:[s.jsx("input",{type:"radio",name:"api-method",checked:g===e.url,readOnly:!0}),s.jsx("span",{children:e.url})]},i)))})]})]}),s.jsx("p",{className:"api-desc",children:`${c.description||"No Description"}`}),v&&s.jsxs("div",{className:"api-product-tag",children:["Product with this API"," ",s.jsx("span",{className:"product-tag",role:"button",tabIndex:-1,onClick:()=>v(c.associatedProduct.productId),children:c.associatedProduct.name})]}),s.jsx("h3",{className:"section-title",children:"Endpoints"}),Object.entries(null==c?void 0:c.tags).map((([n,t])=>s.jsxs("div",{className:"endpoint-group",children:[s.jsx("h4",{className:"tag-title",children:n}),s.jsx("div",{className:"endpoint-list",children:t.map(((t,a)=>{var r,o,d;return s.jsxs("div",{className:"endpoint-card",onClick:()=>(s=>{p(Object.assign(Object.assign({},s),{api:Object.assign({id:c.apiSpecId,title:c.title,description:c.description,version:c.version},c)})),m("ENDPOINT"),Object.entries((null==c?void 0:c.tags)||{}).findIndex((([,e])=>e.some((e=>e.id===s.id))));const e=Object.entries(c.tags).sort((([s],[e])=>"default"===s?1:"default"===e?-1:s.localeCompare(e))).findIndex((([e,i])=>i.find((e=>e.id===s.id))));I(c.apiSpecId,[{type:l.API_SECTION,setTo:!0},{type:l.ENDPOINTS_SECTION,setTo:!0},{type:l.TAG_SECTION,setTo:!0,index:e},{type:l.RESOURCE,setTo:!0,id:s.id}],{resetOthers:!0,filterKeys:[l.OVERVIEW]})})(t),children:[s.jsxs("div",{children:[s.jsxs("div",{className:"endpoint-card-header",children:[s.jsx("span",{className:`method-label ${t.method.toLowerCase()}`,children:t.method}),s.jsx("div",{className:"title-wrapper",children:s.jsxs("h5",{children:[(t.summary||"Endpoint Name").slice(0,40),(null!==(o=null===(r=t.summary)||void 0===r?void 0:r.length)&&void 0!==o?o:0)>40&&"..."]})})]}),s.jsxs("div",{className:"endpoint-meta",children:[s.jsx("p",{children:t.path}),s.jsx("p",{className:"description",children:null!==(d=t.description)&&void 0!==d?d:"No Description "})]})]}),s.jsx("div",{className:"endpoint-arrow",children:s.jsx(e,{src:i})})]},`${n}-${a}`)}))})]},n))),(null===(N=c.apiVersions)||void 0===N?void 0:N.length)>0&&s.jsxs("div",{className:"versions-section",children:[s.jsx("h4",{children:"API Versions"}),s.jsx("div",{className:"version-list",children:c.apiVersions.map(((e,i)=>{var n;return s.jsx("button",{className:"version-btn",onClick:()=>(s=>{if(s.apiSpecId===c.apiSpecId)return void m("OVERVIEW");const e=c.apiVersions.find((e=>e.apiSpecId===s.apiSpecId));if(!e)return;const i=h.find((s=>s.apiSpecId===e.apiSpecId));p(i),m("OVERVIEW"),I(i.apiSpecId,[{type:l.API_SECTION,setTo:!0},{type:l.OVERVIEW,setTo:!0}],{resetOthers:!0,filterKeys:[l.OVERVIEW,l.API_SECTION,l.ENDPOINTS_SECTION,l.TAG_SECTION]})})(e),children:(null===(n=e.metaData)||void 0===n?void 0:n.version)||"N/A"},i)}))})]})]})};export{c as OverviewPage};
2
2
  //# sourceMappingURL=index.js.map
package/dist/src/layout/docsComponents/DocsContent/OverviewPage/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":["../../../../../../src/layout/docsComponents/DocsContent/OverviewPage/index.tsx"],"sourcesContent":["import './style.scss'\nimport SVGLoader from '../../../../components/SVGLoader/SVGLoader'\nimport { arrowRightGray, CopySticker } from '../../../../assets/icons/index'\nimport { EndpointData, OverviewData } from 'src/layout/docsLayout'\nimport { SectionEnum, useSectionToggle } from '../../../../../src/context/SectionToggleContext'\n\nexport const OverviewPage = ({\n data,\n setActiveItemData,\n setActiveType,\n onProductNavigate,\n apis,\n}: {\n data: OverviewData\n setActiveItemData: React.Dispatch<React.SetStateAction<OverviewData | EndpointData>>\n setActiveType: React.Dispatch<React.SetStateAction<'OVERVIEW' | 'ENDPOINT'>>\n onProductNavigate?: (productId: number) => void\n apis: OverviewData[]\n}) => {\n const { toggleSection } = useSectionToggle()\n\n const handleVersionClick = (verObj) => {\n if (verObj.apiSpecId === data.apiSpecId) {\n setActiveType('OVERVIEW')\n return\n }\n\n const matchedVersion = data.apiVersions.find((v) => v.apiSpecId === verObj.apiSpecId)\n\n if (!matchedVersion) {\n return\n }\n\n const matchedApi = apis.find((api) => api.apiSpecId === matchedVersion.apiSpecId)\n setActiveItemData(matchedApi)\n\n setActiveType('OVERVIEW')\n toggleSection(\n matchedApi.apiSpecId,\n [\n { type: SectionEnum.API_SECTION, setTo: true },\n { type: SectionEnum.OVERVIEW, setTo: true },\n ],\n {\n resetOthers: true,\n filterKeys: [\n SectionEnum.OVERVIEW,\n SectionEnum.API_SECTION,\n SectionEnum.ENDPOINTS_SECTION,\n SectionEnum.TAG_SECTION,\n ],\n }\n )\n }\n\n const handleClick = (endpoint) => {\n setActiveItemData({\n ...endpoint,\n api: {\n id: data.apiSpecId,\n title: data.title,\n description: data.description,\n version: data.version,\n ...data,\n },\n })\n setActiveType('ENDPOINT')\n const tagEntries = Object.entries(data?.tags || {})\n const sectionIndex = tagEntries.findIndex(([, endpoints]) =>\n endpoints.some((e) => e.id === endpoint.id)\n )\n\n const tagSectionIndex = Object.entries(data.tags)\n .sort(([a], [b]) => (a === 'default' ? 1 : b === 'default' ? -1 : a.localeCompare(b)))\n .findIndex(([_, tagData]) => tagData.find((t) => t.id === endpoint.id))\n\n toggleSection(\n data.apiSpecId,\n [\n { type: SectionEnum.API_SECTION, setTo: true },\n { type: SectionEnum.ENDPOINTS_SECTION, setTo: true },\n { type: SectionEnum.TAG_SECTION, setTo: true, index: tagSectionIndex },\n { type: SectionEnum.RESOURCE, setTo: true, id: endpoint.id },\n ],\n { resetOthers: true, filterKeys: [SectionEnum.OVERVIEW] }\n )\n }\n\n return (\n <div className=\"api-details-page\">\n <h2 className=\"welcome\">Welcome to</h2>\n <h1 className=\"api-title\">{data?.title}</h1>\n <p className=\"api-version\">\n API Version: <span>{data?.version}</span>\n </p>\n\n <div className=\"custom-url-input\">\n <label className=\"input-label\">API Base URL</label>\n <div className=\"input-wrapper\">\n <input\n type=\"text\"\n value={!!data && !!data.servers && data.servers.length > 0 ? data.servers[0]?.url : '-'}\n readOnly\n />\n <span\n className=\"icon\"\n onClick={() =>\n navigator.clipboard.writeText(\n `${\n !!data && !!data.servers && data.servers.length > 0 ? data.servers[0]?.url : '-'\n }`\n )\n }\n >\n <SVGLoader src={CopySticker} />\n </span>\n </div>\n </div>\n\n <p className=\"api-desc\">{`${data.description || 'No Description'}`}</p>\n {onProductNavigate && (\n <div className=\"api-product-tag\">\n Product with this API{' '}\n <span\n className=\"product-tag\"\n role=\"button\"\n tabIndex={-1}\n onClick={() => onProductNavigate(data.associatedProduct.productId)}\n >\n {data.associatedProduct.name}\n </span>\n </div>\n )}\n\n <h3 className=\"section-title\">Endpoints</h3>\n\n {Object.entries(data?.tags).map(([tag, endpoints]) => (\n <div className=\"endpoint-group\" key={tag}>\n <h4 className=\"tag-title\">{tag}</h4>\n <div className=\"endpoint-list\">\n {endpoints.map((endpoint, idx) => (\n <div\n className=\"endpoint-card\"\n onClick={() => handleClick(endpoint)}\n key={`${tag}-${idx}`}\n >\n <div>\n <div className=\"endpoint-card-header\">\n <span className={`method-label ${endpoint.method.toLowerCase()}`}>\n {endpoint.method}\n </span>\n <div className=\"title-wrapper\">\n <h5>\n {(endpoint.summary || 'Endpoint Name').slice(0, 40)}\n {(endpoint.summary?.length ?? 0) > 40 && '...'}\n </h5>\n </div>\n </div>\n <div className=\"endpoint-meta\">\n <p>{endpoint.path}</p>\n <p className=\"description\">{endpoint.description ?? 'No Description '}</p>\n </div>\n </div>\n\n <div className=\"endpoint-arrow\">\n <SVGLoader src={arrowRightGray} />\n </div>\n </div>\n ))}\n </div>\n </div>\n ))}\n\n {data.apiVersions?.length > 0 && (\n <div className=\"versions-section\">\n <h4>API Versions</h4>\n <div className=\"version-list\">\n {data.apiVersions.map((verObj, index) => (\n <button\n key={index}\n className=\"version-btn\"\n onClick={() => handleVersionClick(verObj)}\n >\n {verObj.metaData?.version || 'N/A'}\n </button>\n ))}\n </div>\n </div>\n )}\n </div>\n )\n}\n"],"names":["OverviewPage","data","setActiveItemData","setActiveType","onProductNavigate","apis","toggleSection","useSectionToggle","_jsxs","className","_jsx","children","title","version","jsxs","jsx","type","value","servers","length","_a","url","readOnly","onClick","navigator","clipboard","writeText","SVGLoader","src","CopySticker","description","role","tabIndex","associatedProduct","productId","name","Object","entries","tags","map","tag","endpoints","endpoint","idx","assign","api","id","apiSpecId","findIndex","some","e","tagSectionIndex","sort","a","b","localeCompare","_","tagData","find","t","SectionEnum","API_SECTION","setTo","ENDPOINTS_SECTION","TAG_SECTION","index","RESOURCE","resetOthers","filterKeys","OVERVIEW","handleClick","method","toLowerCase","summary","slice","_b","path","_c","arrowRightGray","apiVersions","verObj","matchedVersion","v","matchedApi","handleVersionClick","metaData"],"mappings":"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"}
1
+ {"version":3,"file":"index.js","sources":["../../../../../../src/layout/docsComponents/DocsContent/OverviewPage/index.tsx"],"sourcesContent":["import './style.scss'\nimport SVGLoader from '../../../../components/SVGLoader/SVGLoader'\nimport {\n arrowDown,\n arrowRightGray,\n arrowUp,\n newCopyIcon,\n} from '../../../../assets/icons/index'\nimport { EndpointData, OverviewData } from 'src/layout/docsLayout'\nimport { SectionEnum, useSectionToggle } from '../../../../../src/context/SectionToggleContext'\nimport React, { useEffect, useState } from 'react'\n\nexport const OverviewPage = ({\n data,\n setActiveItemData,\n setActiveType,\n onProductNavigate,\n apis,\n}: {\n data: OverviewData\n setActiveItemData: React.Dispatch<React.SetStateAction<OverviewData | EndpointData>>\n setActiveType: React.Dispatch<React.SetStateAction<'OVERVIEW' | 'ENDPOINT'>>\n onProductNavigate?: (productId: number) => void\n apis: OverviewData[]\n}) => {\n const { toggleSection } = useSectionToggle()\n const [selectedUrl, setSelectedUrl] = useState(data?.servers?.[0]?.url || '')\n const [isUrlDropdownOpen, setIsUrlDropdownOpen] = useState<boolean>(false)\n\n useEffect(() => {\n setSelectedUrl(data?.servers?.[0]?.url || '')\n }, [data])\n const handleVersionClick = (verObj) => {\n if (verObj.apiSpecId === data.apiSpecId) {\n setActiveType('OVERVIEW')\n return\n }\n\n const matchedVersion = data.apiVersions.find((v) => v.apiSpecId === verObj.apiSpecId)\n\n if (!matchedVersion) {\n return\n }\n\n const matchedApi = apis.find((api) => api.apiSpecId === matchedVersion.apiSpecId)\n setActiveItemData(matchedApi)\n\n setActiveType('OVERVIEW')\n toggleSection(\n matchedApi.apiSpecId,\n [\n { type: SectionEnum.API_SECTION, setTo: true },\n { type: SectionEnum.OVERVIEW, setTo: true },\n ],\n {\n resetOthers: true,\n filterKeys: [\n SectionEnum.OVERVIEW,\n SectionEnum.API_SECTION,\n SectionEnum.ENDPOINTS_SECTION,\n SectionEnum.TAG_SECTION,\n ],\n }\n )\n }\n\n const handleClick = (endpoint) => {\n setActiveItemData({\n ...endpoint,\n api: {\n id: data.apiSpecId,\n title: data.title,\n description: data.description,\n version: data.version,\n ...data,\n },\n })\n setActiveType('ENDPOINT')\n const tagEntries = Object.entries(data?.tags || {})\n const sectionIndex = tagEntries.findIndex(([, endpoints]) =>\n endpoints.some((e) => e.id === endpoint.id)\n )\n\n const tagSectionIndex = Object.entries(data.tags)\n .sort(([a], [b]) => (a === 'default' ? 1 : b === 'default' ? -1 : a.localeCompare(b)))\n .findIndex(([_, tagData]) => tagData.find((t) => t.id === endpoint.id))\n\n toggleSection(\n data.apiSpecId,\n [\n { type: SectionEnum.API_SECTION, setTo: true },\n { type: SectionEnum.ENDPOINTS_SECTION, setTo: true },\n { type: SectionEnum.TAG_SECTION, setTo: true, index: tagSectionIndex },\n { type: SectionEnum.RESOURCE, setTo: true, id: endpoint.id },\n ],\n { resetOthers: true, filterKeys: [SectionEnum.OVERVIEW] }\n )\n }\n\n return (\n <div className=\"api-details-page\">\n <h2 className=\"welcome\">Welcome to</h2>\n <h1 className=\"api-title\">{data?.title}</h1>\n <p className=\"api-version\">\n API Version: <span>{data?.version}</span>\n </p>\n\n <div className=\"custom-url-input\">\n <label className=\"input-label\">API Base URL</label>\n <div className=\"url-container\">\n <div className=\"typeDdl\" onClick={() => setIsUrlDropdownOpen((prev) => !prev)}>\n <span className=\"url-text\">{selectedUrl || '-'}</span>\n <div className=\"icon-container\">\n <span\n className=\"icon\"\n role=\"button\"\n tabIndex={0}\n onClick={(e) => {\n e.stopPropagation()\n navigator.clipboard.writeText(selectedUrl)\n }}\n >\n {selectedUrl.length !== 0 && <SVGLoader src={newCopyIcon} />}\n </span>\n {selectedUrl.length !== 0 && (\n <SVGLoader src={!isUrlDropdownOpen ? arrowDown : arrowUp} />\n )}\n </div>\n </div>\n {isUrlDropdownOpen && selectedUrl.length !== 0 && (\n <div className=\"urlList\">\n {data?.servers?.map((server, index) => (\n <div\n key={index}\n className=\"url-item\"\n onClick={() => {\n setSelectedUrl(server.url)\n setIsUrlDropdownOpen(false)\n }}\n >\n <input\n type=\"radio\"\n name=\"api-method\"\n checked={selectedUrl === server.url}\n readOnly\n />\n <span>{server.url}</span>\n </div>\n ))}\n </div>\n )}\n </div>\n </div>\n\n <p className=\"api-desc\">{`${data.description || 'No Description'}`}</p>\n {onProductNavigate && (\n <div className=\"api-product-tag\">\n Product with this API{' '}\n <span\n className=\"product-tag\"\n role=\"button\"\n tabIndex={-1}\n onClick={() => onProductNavigate(data.associatedProduct.productId)}\n >\n {data.associatedProduct.name}\n </span>\n </div>\n )}\n\n <h3 className=\"section-title\">Endpoints</h3>\n\n {Object.entries(data?.tags).map(([tag, endpoints]) => (\n <div className=\"endpoint-group\" key={tag}>\n <h4 className=\"tag-title\">{tag}</h4>\n <div className=\"endpoint-list\">\n {endpoints.map((endpoint, idx) => (\n <div\n className=\"endpoint-card\"\n onClick={() => handleClick(endpoint)}\n key={`${tag}-${idx}`}\n >\n <div>\n <div className=\"endpoint-card-header\">\n <span className={`method-label ${endpoint.method.toLowerCase()}`}>\n {endpoint.method}\n </span>\n <div className=\"title-wrapper\">\n <h5>\n {(endpoint.summary || 'Endpoint Name').slice(0, 40)}\n {(endpoint.summary?.length ?? 0) > 40 && '...'}\n </h5>\n </div>\n </div>\n <div className=\"endpoint-meta\">\n <p>{endpoint.path}</p>\n <p className=\"description\">{endpoint.description ?? 'No Description '}</p>\n </div>\n </div>\n\n <div className=\"endpoint-arrow\">\n <SVGLoader src={arrowRightGray} />\n </div>\n </div>\n ))}\n </div>\n </div>\n ))}\n\n {data.apiVersions?.length > 0 && (\n <div className=\"versions-section\">\n <h4>API Versions</h4>\n <div className=\"version-list\">\n {data.apiVersions.map((verObj, index) => (\n <button\n key={index}\n className=\"version-btn\"\n onClick={() => handleVersionClick(verObj)}\n >\n {verObj.metaData?.version || 'N/A'}\n </button>\n ))}\n </div>\n </div>\n )}\n </div>\n )\n}\n"],"names":["OverviewPage","data","setActiveItemData","setActiveType","onProductNavigate","apis","toggleSection","useSectionToggle","selectedUrl","setSelectedUrl","useState","_b","_a","servers","url","isUrlDropdownOpen","setIsUrlDropdownOpen","useEffect","_jsxs","className","_jsx","children","title","version","onClick","prev","jsx","role","tabIndex","e","stopPropagation","navigator","clipboard","writeText","length","SVGLoader","src","newCopyIcon","arrowUp","arrowDown","_c","map","server","index","type","name","checked","readOnly","description","associatedProduct","productId","Object","entries","tags","tag","endpoints","endpoint","idx","jsxs","assign","api","id","apiSpecId","findIndex","some","tagSectionIndex","sort","a","b","localeCompare","_","tagData","find","t","SectionEnum","API_SECTION","setTo","ENDPOINTS_SECTION","TAG_SECTION","RESOURCE","resetOthers","filterKeys","OVERVIEW","handleClick","method","toLowerCase","summary","slice","path","arrowRightGray","_d","apiVersions","verObj","matchedVersion","v","matchedApi","handleVersionClick","metaData"],"mappings":"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"}
package/dist/styles.css CHANGED
@@ -39,29 +39,6 @@
39
39
  grid-row: 2;
40
40
  grid-column: 2;
41
41
  background-color: white;
42
- }.containerTitleDrawer {
43
- height: 64px;
44
- min-height: 64px;
45
- display: flex;
46
- flex-direction: row;
47
- justify-content: space-between;
48
- align-items: center;
49
- background-color: #f1f2f6;
50
- padding: 0 30px 0 30px;
51
- width: 100%;
52
- }
53
- .containerTitleDrawer span {
54
- color: #12131a;
55
- font-weight: 600;
56
- font-size: 18px;
57
- line-height: 25px;
58
- letter-spacing: 0em;
59
- }
60
- .containerTitleDrawer svg path {
61
- stroke: #000 !important;
62
- }
63
- .containerTitleDrawer .closeIcon {
64
- cursor: pointer;
65
42
  }.apiInfoForm {
66
43
  display: grid;
67
44
  padding: 1.25rem 1.875rem;
@@ -180,6 +157,176 @@
180
157
  content: "*";
181
158
  color: red;
182
159
  transform: translateX(0.125rem);
160
+ }.livePreviewContainer .titleContainer {
161
+ margin-top: 1.875rem;
162
+ display: flex;
163
+ justify-content: space-between;
164
+ align-items: center;
165
+ flex-wrap: wrap;
166
+ max-width: 100%;
167
+ gap: 1.25rem;
168
+ }
169
+ .livePreviewContainer .titleContainer p.apiName {
170
+ font-size: 40px;
171
+ line-height: 30px;
172
+ font-weight: 500;
173
+ word-wrap: break-word;
174
+ overflow-wrap: break-word;
175
+ word-break: break-all;
176
+ }
177
+ .livePreviewContainer .titleContainer .livePreviewChip {
178
+ background-color: #ebecf2;
179
+ color: #12131a;
180
+ }
181
+ .livePreviewContainer .description_preview {
182
+ word-break: break-all;
183
+ }
184
+
185
+ .requestAccordion,
186
+ .responseAccordion {
187
+ background-color: #f4c5c5;
188
+ border: 1px solid #da3f3f;
189
+ border-radius: 0.3125rem !important;
190
+ box-shadow: none !important;
191
+ margin-bottom: 0 !important;
192
+ cursor: default !important;
193
+ margin-top: 0.625rem;
194
+ }
195
+ .requestAccordion :global(.accordion-header),
196
+ .responseAccordion :global(.accordion-header) {
197
+ background-color: #f4c5c5;
198
+ display: flex;
199
+ align-items: center;
200
+ justify-content: space-between;
201
+ margin: 0 !important;
202
+ padding: 0 !important;
203
+ height: 4.0625rem !important;
204
+ border-radius: 0.3125rem !important;
205
+ }
206
+ .requestAccordion :global(.accordion-details.expanded),
207
+ .responseAccordion :global(.accordion-details.expanded) {
208
+ border-top: 1px solid #000 !important;
209
+ padding: 1.25rem !important;
210
+ padding: 0 !important;
211
+ background-color: #f4c5c5;
212
+ }
213
+ .requestAccordion :global(.accordion-details.expanded) :global(.jsonField) div textarea,
214
+ .responseAccordion :global(.accordion-details.expanded) :global(.jsonField) div textarea {
215
+ border-top-right-radius: 0;
216
+ border-top-left-radius: 0;
217
+ height: 10rem;
218
+ }
219
+ .requestAccordion :global(.accordion-details.expanded .textArea .containerTextArea),
220
+ .responseAccordion :global(.accordion-details.expanded .textArea .containerTextArea) {
221
+ display: flex;
222
+ }
223
+ .requestAccordion :global(.accordion-details.expanded .textArea .containerTextArea .inputField),
224
+ .responseAccordion :global(.accordion-details.expanded .textArea .containerTextArea .inputField) {
225
+ height: 100%;
226
+ padding: 1.25rem;
227
+ }
228
+ .requestAccordion .accordionContent,
229
+ .responseAccordion .accordionContent {
230
+ max-width: 100%;
231
+ padding-left: 0.625rem;
232
+ padding-right: 0.625rem;
233
+ padding-top: 0.9375rem;
234
+ }
235
+ .requestAccordion .accordionContent ol,
236
+ .responseAccordion .accordionContent ol {
237
+ padding-left: 1.7rem;
238
+ }
239
+ .requestAccordion .accordionContent ol li,
240
+ .responseAccordion .accordionContent ol li {
241
+ max-width: 100%;
242
+ word-break: break-all;
243
+ }
244
+ .requestAccordion .requestAccordionSummary,
245
+ .requestAccordion .responseAccordionSummary,
246
+ .responseAccordion .requestAccordionSummary,
247
+ .responseAccordion .responseAccordionSummary {
248
+ width: 100%;
249
+ cursor: pointer;
250
+ display: flex;
251
+ justify-content: space-between;
252
+ font-weight: 700;
253
+ font-size: 1.125rem;
254
+ line-height: 1.5rem;
255
+ display: flex;
256
+ align-items: center;
257
+ margin-inline: 0.625rem 1.25rem;
258
+ }
259
+ .requestAccordion .responseAccordionSummary_title,
260
+ .requestAccordion .requestAccordionSummary_title,
261
+ .requestAccordion .responseAccordionSummary,
262
+ .responseAccordion .responseAccordionSummary_title,
263
+ .responseAccordion .requestAccordionSummary_title,
264
+ .responseAccordion .responseAccordionSummary {
265
+ display: flex;
266
+ align-items: center;
267
+ }
268
+ .requestAccordion .responseAccordionSummary_title svg,
269
+ .requestAccordion .requestAccordionSummary_title svg,
270
+ .requestAccordion .responseAccordionSummary svg,
271
+ .responseAccordion .responseAccordionSummary_title svg,
272
+ .responseAccordion .requestAccordionSummary_title svg,
273
+ .responseAccordion .responseAccordionSummary svg {
274
+ transition: rotate 0.2s ease-in-out;
275
+ }
276
+ .requestAccordion .responseAccordionSummary_title .expanded,
277
+ .requestAccordion .requestAccordionSummary_title .expanded,
278
+ .requestAccordion .responseAccordionSummary .expanded,
279
+ .responseAccordion .responseAccordionSummary_title .expanded,
280
+ .responseAccordion .requestAccordionSummary_title .expanded,
281
+ .responseAccordion .responseAccordionSummary .expanded {
282
+ rotate: 180deg;
283
+ }
284
+ .requestAccordion :global(.accordion-details) :global(.textArea .inputField),
285
+ .responseAccordion :global(.accordion-details) :global(.textArea .inputField) {
286
+ padding: 0;
287
+ border: none;
288
+ }
289
+ .requestAccordion :global(.accordion-header .iconContainer .dropdownIcon),
290
+ .responseAccordion :global(.accordion-header .iconContainer .dropdownIcon) {
291
+ display: none !important;
292
+ }
293
+ .requestAccordion :global(.accordion-header),
294
+ .responseAccordion :global(.accordion-header) {
295
+ cursor: default;
296
+ }
297
+
298
+ .responseAccordion .responseAccordionSummary {
299
+ display: flex;
300
+ align-items: center;
301
+ }
302
+ .responseAccordion .responseAccordionSummary :global(.multiSelectGroup .optionsList) {
303
+ width: 8rem !important;
304
+ min-width: 8rem !important;
305
+ }
306
+ .responseAccordion .responseAccordionSummary :global(.multiSelectGroup) {
307
+ width: 8rem;
308
+ margin-left: auto;
309
+ }
310
+ .responseAccordion .responseAccordionSummary :global(.multiSelectGroup) :global(.selectDisplay) {
311
+ height: 2.0625rem !important;
312
+ min-height: 2.0625rem !important;
313
+ padding: 0;
314
+ padding-left: 0.625rem;
315
+ }
316
+ .responseAccordion :global(.accordion-header) {
317
+ overflow: visible;
318
+ cursor: default;
319
+ }
320
+ .responseAccordion .statusCodeOptionContainer {
321
+ display: grid;
322
+ grid-template-columns: min-content min-content;
323
+ align-items: center;
324
+ gap: 0.625rem;
325
+ }
326
+ .responseAccordion .statusCodeOptionContainer .statusCodeOptionCircle {
327
+ width: 0.625rem;
328
+ aspect-ratio: 1/1;
329
+ border-radius: 100%;
183
330
  }.methodAccordion {
184
331
  border: none !important;
185
332
  box-shadow: none !important;
@@ -511,6 +658,29 @@
511
658
  }
512
659
  .methodAccordion.readOnly .methodSummaryContainer .methodExpandArrowContainer {
513
660
  background-color: #ebecf2;
661
+ }.containerTitleDrawer {
662
+ height: 64px;
663
+ min-height: 64px;
664
+ display: flex;
665
+ flex-direction: row;
666
+ justify-content: space-between;
667
+ align-items: center;
668
+ background-color: #f1f2f6;
669
+ padding: 0 30px 0 30px;
670
+ width: 100%;
671
+ }
672
+ .containerTitleDrawer span {
673
+ color: #12131a;
674
+ font-weight: 600;
675
+ font-size: 18px;
676
+ line-height: 25px;
677
+ letter-spacing: 0em;
678
+ }
679
+ .containerTitleDrawer svg path {
680
+ stroke: #000 !important;
681
+ }
682
+ .containerTitleDrawer .closeIcon {
683
+ cursor: pointer;
514
684
  }.tooltip-custom-wrapper {
515
685
  display: flex;
516
686
  }
@@ -737,186 +907,16 @@
737
907
  text-align: center;
738
908
  margin-bottom: 0.625rem;
739
909
  }
740
- .common-dialog .confirmation-title.error-title {
741
- color: #da3f3f;
742
- }
743
- .common-dialog .confirmation-title.warning-title {
744
- color: #faad14;
745
- }
746
- .common-dialog .confirmation-dialog-footer {
747
- display: flex;
748
- gap: 1.25rem;
749
- margin-top: 1.875rem;
750
- }.livePreviewContainer .titleContainer {
751
- margin-top: 1.875rem;
752
- display: flex;
753
- justify-content: space-between;
754
- align-items: center;
755
- flex-wrap: wrap;
756
- max-width: 100%;
757
- gap: 1.25rem;
758
- }
759
- .livePreviewContainer .titleContainer p.apiName {
760
- font-size: 40px;
761
- line-height: 30px;
762
- font-weight: 500;
763
- word-wrap: break-word;
764
- overflow-wrap: break-word;
765
- word-break: break-all;
766
- }
767
- .livePreviewContainer .titleContainer .livePreviewChip {
768
- background-color: #ebecf2;
769
- color: #12131a;
770
- }
771
- .livePreviewContainer .description_preview {
772
- word-break: break-all;
773
- }
774
-
775
- .requestAccordion,
776
- .responseAccordion {
777
- background-color: #f4c5c5;
778
- border: 1px solid #da3f3f;
779
- border-radius: 0.3125rem !important;
780
- box-shadow: none !important;
781
- margin-bottom: 0 !important;
782
- cursor: default !important;
783
- margin-top: 0.625rem;
784
- }
785
- .requestAccordion :global(.accordion-header),
786
- .responseAccordion :global(.accordion-header) {
787
- background-color: #f4c5c5;
788
- display: flex;
789
- align-items: center;
790
- justify-content: space-between;
791
- margin: 0 !important;
792
- padding: 0 !important;
793
- height: 4.0625rem !important;
794
- border-radius: 0.3125rem !important;
795
- }
796
- .requestAccordion :global(.accordion-details.expanded),
797
- .responseAccordion :global(.accordion-details.expanded) {
798
- border-top: 1px solid #000 !important;
799
- padding: 1.25rem !important;
800
- padding: 0 !important;
801
- background-color: #f4c5c5;
802
- }
803
- .requestAccordion :global(.accordion-details.expanded) :global(.jsonField) div textarea,
804
- .responseAccordion :global(.accordion-details.expanded) :global(.jsonField) div textarea {
805
- border-top-right-radius: 0;
806
- border-top-left-radius: 0;
807
- height: 10rem;
808
- }
809
- .requestAccordion :global(.accordion-details.expanded .textArea .containerTextArea),
810
- .responseAccordion :global(.accordion-details.expanded .textArea .containerTextArea) {
811
- display: flex;
812
- }
813
- .requestAccordion :global(.accordion-details.expanded .textArea .containerTextArea .inputField),
814
- .responseAccordion :global(.accordion-details.expanded .textArea .containerTextArea .inputField) {
815
- height: 100%;
816
- padding: 1.25rem;
817
- }
818
- .requestAccordion .accordionContent,
819
- .responseAccordion .accordionContent {
820
- max-width: 100%;
821
- padding-left: 0.625rem;
822
- padding-right: 0.625rem;
823
- padding-top: 0.9375rem;
824
- }
825
- .requestAccordion .accordionContent ol,
826
- .responseAccordion .accordionContent ol {
827
- padding-left: 1.7rem;
828
- }
829
- .requestAccordion .accordionContent ol li,
830
- .responseAccordion .accordionContent ol li {
831
- max-width: 100%;
832
- word-break: break-all;
833
- }
834
- .requestAccordion .requestAccordionSummary,
835
- .requestAccordion .responseAccordionSummary,
836
- .responseAccordion .requestAccordionSummary,
837
- .responseAccordion .responseAccordionSummary {
838
- width: 100%;
839
- cursor: pointer;
840
- display: flex;
841
- justify-content: space-between;
842
- font-weight: 700;
843
- font-size: 1.125rem;
844
- line-height: 1.5rem;
845
- display: flex;
846
- align-items: center;
847
- margin-inline: 0.625rem 1.25rem;
848
- }
849
- .requestAccordion .responseAccordionSummary_title,
850
- .requestAccordion .requestAccordionSummary_title,
851
- .requestAccordion .responseAccordionSummary,
852
- .responseAccordion .responseAccordionSummary_title,
853
- .responseAccordion .requestAccordionSummary_title,
854
- .responseAccordion .responseAccordionSummary {
855
- display: flex;
856
- align-items: center;
857
- }
858
- .requestAccordion .responseAccordionSummary_title svg,
859
- .requestAccordion .requestAccordionSummary_title svg,
860
- .requestAccordion .responseAccordionSummary svg,
861
- .responseAccordion .responseAccordionSummary_title svg,
862
- .responseAccordion .requestAccordionSummary_title svg,
863
- .responseAccordion .responseAccordionSummary svg {
864
- transition: rotate 0.2s ease-in-out;
865
- }
866
- .requestAccordion .responseAccordionSummary_title .expanded,
867
- .requestAccordion .requestAccordionSummary_title .expanded,
868
- .requestAccordion .responseAccordionSummary .expanded,
869
- .responseAccordion .responseAccordionSummary_title .expanded,
870
- .responseAccordion .requestAccordionSummary_title .expanded,
871
- .responseAccordion .responseAccordionSummary .expanded {
872
- rotate: 180deg;
873
- }
874
- .requestAccordion :global(.accordion-details) :global(.textArea .inputField),
875
- .responseAccordion :global(.accordion-details) :global(.textArea .inputField) {
876
- padding: 0;
877
- border: none;
878
- }
879
- .requestAccordion :global(.accordion-header .iconContainer .dropdownIcon),
880
- .responseAccordion :global(.accordion-header .iconContainer .dropdownIcon) {
881
- display: none !important;
882
- }
883
- .requestAccordion :global(.accordion-header),
884
- .responseAccordion :global(.accordion-header) {
885
- cursor: default;
886
- }
887
-
888
- .responseAccordion .responseAccordionSummary {
889
- display: flex;
890
- align-items: center;
891
- }
892
- .responseAccordion .responseAccordionSummary :global(.multiSelectGroup .optionsList) {
893
- width: 8rem !important;
894
- min-width: 8rem !important;
895
- }
896
- .responseAccordion .responseAccordionSummary :global(.multiSelectGroup) {
897
- width: 8rem;
898
- margin-left: auto;
899
- }
900
- .responseAccordion .responseAccordionSummary :global(.multiSelectGroup) :global(.selectDisplay) {
901
- height: 2.0625rem !important;
902
- min-height: 2.0625rem !important;
903
- padding: 0;
904
- padding-left: 0.625rem;
905
- }
906
- .responseAccordion :global(.accordion-header) {
907
- overflow: visible;
908
- cursor: default;
909
- }
910
- .responseAccordion .statusCodeOptionContainer {
911
- display: grid;
912
- grid-template-columns: min-content min-content;
913
- align-items: center;
914
- gap: 0.625rem;
910
+ .common-dialog .confirmation-title.error-title {
911
+ color: #da3f3f;
915
912
  }
916
- .responseAccordion .statusCodeOptionContainer .statusCodeOptionCircle {
917
- width: 0.625rem;
918
- aspect-ratio: 1/1;
919
- border-radius: 100%;
913
+ .common-dialog .confirmation-title.warning-title {
914
+ color: #faad14;
915
+ }
916
+ .common-dialog .confirmation-dialog-footer {
917
+ display: flex;
918
+ gap: 1.25rem;
919
+ margin-top: 1.875rem;
920
920
  }.json-editor-container {
921
921
  overflow: hidden;
922
922
  border-bottom-right-radius: 0.3125rem;
@@ -1110,111 +1110,6 @@
1110
1110
  --alert-natural: #c4d3f1;
1111
1111
  }
1112
1112
 
1113
- .drawerItemContainer {
1114
- display: flex;
1115
- flex-direction: column;
1116
- }
1117
- .drawerItemContainer .title {
1118
- color: #000;
1119
- font-weight: 600;
1120
- font-size: 24px;
1121
- line-height: 35px;
1122
- margin-bottom: 3px;
1123
- margin-top: 1.5rem;
1124
- }
1125
- .drawerItemContainer .text {
1126
- color: #000;
1127
- font-weight: 400;
1128
- font-size: 24px;
1129
- line-height: 25px;
1130
- }
1131
- .drawerItemContainer .color-green {
1132
- color: var(--color-success);
1133
- }
1134
- .drawerItemContainer .color-red {
1135
- color: var(--color-error);
1136
- }:root {
1137
- --white: #fff;
1138
- --Gray-5: #f1f2f6;
1139
- --Gray-10: #ebecf2;
1140
- --Gray-20: #d8dae5;
1141
- --Gray-30: #babdcc;
1142
- --Gray-40: #9a9eb2;
1143
- --Gray-50: #828699;
1144
- --Gray-60: #696c80;
1145
- --Gray-100: #12131a;
1146
- --black: #000;
1147
- --primary-static: #4d75d8;
1148
- --primary-hover: #7c9bea;
1149
- --primary-active: #2c4fa4;
1150
- --primary-disabled: #9a9eb2;
1151
- --secondary-static: #40e0d0;
1152
- --secondary-hover: #9efcf2;
1153
- --secondary-active: #2fa599;
1154
- --error-static: #da3f3f;
1155
- --error-hover: #e75d5d;
1156
- --error-active: #bb3232;
1157
- --success-static: #3aaa35;
1158
- --success-hover: #5cda56;
1159
- --success-active: #2a8a25;
1160
- --info-static: #c6c6c6;
1161
- --info-hover: #e4e4e4;
1162
- --info-active: #979797;
1163
- --warning-static: #faad14;
1164
- --warning-hover: #f9be4a;
1165
- --warning-active: #db9711;
1166
- --action-static: #142452;
1167
- --action-hover: #21387d;
1168
- --action-active: #000000;
1169
- --color-info-primary: #3a6cd1;
1170
- --primary-font-color: #142452;
1171
- --placeholder-font-color: #babdcc;
1172
- --warning-font-color: #ce2828;
1173
- --alert-error: #da3f3f;
1174
- --alert-light-error: #f4c5c5;
1175
- --alert-success: #3aaa35;
1176
- --alert-light-success: #c4e5c2;
1177
- --alert-info: #8eaaf1;
1178
- --alert-light-info: #c4d3f1;
1179
- --alert-warning: #faad14;
1180
- --alert-light-warning: #fde6b8;
1181
- --border-focus: #3a6cd1;
1182
- --tooltip-background-color: #202f5b;
1183
- --text-color-primary: #142452;
1184
- --text-color-secondary: #ffff;
1185
- --text-color-neutral: #828699;
1186
- --text-color-tertiary: #808080;
1187
- --text-color-note: #242424;
1188
- --text-color-quaternary: #142452;
1189
- --text-color-disabled: #ffff;
1190
- --background-color-white-primary: #fff;
1191
- --background-color-light-primary: #8eaaf1;
1192
- --background-color-white-secondary: #fff;
1193
- --background-color-primary-dark: #142452;
1194
- --background-color-gray-5: #f1f2f6;
1195
- --background-color-gray-30: #ebecf2;
1196
- --background-color-tertiary-light: #2c4fa4;
1197
- --background-color-gray-10: #f1f2f6;
1198
- --background-color-gray-40: #ebecf2;
1199
- --background-color-light-blue: #dfe7f8;
1200
- --border-color-primary: #babdcc;
1201
- --border-color-secondary: #d8dae5;
1202
- --border-color-neutral: #ebecf2;
1203
- --border-color-tertiary: #ebecf2;
1204
- --border-color-gray: #ebecf2;
1205
- --border-color-hover: #142452;
1206
- --border-color-active: #3a6cd1;
1207
- --icon-color-main: #142452;
1208
- --icon-color-secondary: #000;
1209
- --icon-color-quaternary: #babdcc;
1210
- --icon-color-disabled: #9a9eb2;
1211
- --link-btn-primary-color: #3a6cd1;
1212
- --button-color-static: #4d75d8;
1213
- --button-color-hover: #7c9bea;
1214
- --button-color-active: #2c4fa4;
1215
- --alert-natural: #c4d3f1;
1216
- }
1217
-
1218
1113
  #EnumButton {
1219
1114
  display: flex;
1220
1115
  justify-content: center;
@@ -1402,6 +1297,111 @@ div.endBtnIcon {
1402
1297
  .tableSectionContainer .descArrow path,
1403
1298
  .tableSectionContainer .defaultSortArrow path {
1404
1299
  fill: var(--Gray-50);
1300
+ }:root {
1301
+ --white: #fff;
1302
+ --Gray-5: #f1f2f6;
1303
+ --Gray-10: #ebecf2;
1304
+ --Gray-20: #d8dae5;
1305
+ --Gray-30: #babdcc;
1306
+ --Gray-40: #9a9eb2;
1307
+ --Gray-50: #828699;
1308
+ --Gray-60: #696c80;
1309
+ --Gray-100: #12131a;
1310
+ --black: #000;
1311
+ --primary-static: #4d75d8;
1312
+ --primary-hover: #7c9bea;
1313
+ --primary-active: #2c4fa4;
1314
+ --primary-disabled: #9a9eb2;
1315
+ --secondary-static: #40e0d0;
1316
+ --secondary-hover: #9efcf2;
1317
+ --secondary-active: #2fa599;
1318
+ --error-static: #da3f3f;
1319
+ --error-hover: #e75d5d;
1320
+ --error-active: #bb3232;
1321
+ --success-static: #3aaa35;
1322
+ --success-hover: #5cda56;
1323
+ --success-active: #2a8a25;
1324
+ --info-static: #c6c6c6;
1325
+ --info-hover: #e4e4e4;
1326
+ --info-active: #979797;
1327
+ --warning-static: #faad14;
1328
+ --warning-hover: #f9be4a;
1329
+ --warning-active: #db9711;
1330
+ --action-static: #142452;
1331
+ --action-hover: #21387d;
1332
+ --action-active: #000000;
1333
+ --color-info-primary: #3a6cd1;
1334
+ --primary-font-color: #142452;
1335
+ --placeholder-font-color: #babdcc;
1336
+ --warning-font-color: #ce2828;
1337
+ --alert-error: #da3f3f;
1338
+ --alert-light-error: #f4c5c5;
1339
+ --alert-success: #3aaa35;
1340
+ --alert-light-success: #c4e5c2;
1341
+ --alert-info: #8eaaf1;
1342
+ --alert-light-info: #c4d3f1;
1343
+ --alert-warning: #faad14;
1344
+ --alert-light-warning: #fde6b8;
1345
+ --border-focus: #3a6cd1;
1346
+ --tooltip-background-color: #202f5b;
1347
+ --text-color-primary: #142452;
1348
+ --text-color-secondary: #ffff;
1349
+ --text-color-neutral: #828699;
1350
+ --text-color-tertiary: #808080;
1351
+ --text-color-note: #242424;
1352
+ --text-color-quaternary: #142452;
1353
+ --text-color-disabled: #ffff;
1354
+ --background-color-white-primary: #fff;
1355
+ --background-color-light-primary: #8eaaf1;
1356
+ --background-color-white-secondary: #fff;
1357
+ --background-color-primary-dark: #142452;
1358
+ --background-color-gray-5: #f1f2f6;
1359
+ --background-color-gray-30: #ebecf2;
1360
+ --background-color-tertiary-light: #2c4fa4;
1361
+ --background-color-gray-10: #f1f2f6;
1362
+ --background-color-gray-40: #ebecf2;
1363
+ --background-color-light-blue: #dfe7f8;
1364
+ --border-color-primary: #babdcc;
1365
+ --border-color-secondary: #d8dae5;
1366
+ --border-color-neutral: #ebecf2;
1367
+ --border-color-tertiary: #ebecf2;
1368
+ --border-color-gray: #ebecf2;
1369
+ --border-color-hover: #142452;
1370
+ --border-color-active: #3a6cd1;
1371
+ --icon-color-main: #142452;
1372
+ --icon-color-secondary: #000;
1373
+ --icon-color-quaternary: #babdcc;
1374
+ --icon-color-disabled: #9a9eb2;
1375
+ --link-btn-primary-color: #3a6cd1;
1376
+ --button-color-static: #4d75d8;
1377
+ --button-color-hover: #7c9bea;
1378
+ --button-color-active: #2c4fa4;
1379
+ --alert-natural: #c4d3f1;
1380
+ }
1381
+
1382
+ .drawerItemContainer {
1383
+ display: flex;
1384
+ flex-direction: column;
1385
+ }
1386
+ .drawerItemContainer .title {
1387
+ color: #000;
1388
+ font-weight: 600;
1389
+ font-size: 24px;
1390
+ line-height: 35px;
1391
+ margin-bottom: 3px;
1392
+ margin-top: 1.5rem;
1393
+ }
1394
+ .drawerItemContainer .text {
1395
+ color: #000;
1396
+ font-weight: 400;
1397
+ font-size: 24px;
1398
+ line-height: 25px;
1399
+ }
1400
+ .drawerItemContainer .color-green {
1401
+ color: var(--color-success);
1402
+ }
1403
+ .drawerItemContainer .color-red {
1404
+ color: var(--color-error);
1405
1405
  }.api-docs-api-tree {
1406
1406
  width: 100%;
1407
1407
  max-width: 12.5rem;
@@ -1422,6 +1422,10 @@ div.endBtnIcon {
1422
1422
  }
1423
1423
  .api-docs-api-tree__section-header:hover {
1424
1424
  background-color: #f3f4f6;
1425
+ width: 100%;
1426
+ }
1427
+ .api-docs-api-tree__section-header svg {
1428
+ min-width: 1rem;
1425
1429
  }
1426
1430
  .api-docs-api-tree__section-header svg:first-child path {
1427
1431
  stroke: #bbbec5;
@@ -1432,6 +1436,8 @@ div.endBtnIcon {
1432
1436
  font-weight: 500;
1433
1437
  color: #000;
1434
1438
  margin-left: 0.25rem;
1439
+ word-break: break-all;
1440
+ line-height: 0.9375rem;
1435
1441
  }
1436
1442
  .api-docs-api-tree__section__overview {
1437
1443
  display: flex;
@@ -1960,28 +1966,63 @@ div.endBtnIcon {
1960
1966
  font-weight: 600;
1961
1967
  color: #4d4f5c;
1962
1968
  }
1963
- .api-details-page .custom-url-input .input-wrapper {
1969
+ .api-details-page .custom-url-input .url-container {
1970
+ position: relative;
1971
+ }
1972
+ .api-details-page .custom-url-input .typeDdl {
1973
+ cursor: pointer;
1964
1974
  display: flex;
1965
1975
  align-items: center;
1976
+ justify-content: space-between;
1977
+ width: 100%;
1966
1978
  background-color: #edf1fb;
1967
- border: 1px solid #fff;
1979
+ border: 0.0625rem solid #fff;
1968
1980
  border-radius: 0.375rem;
1969
- padding: 0 0.75rem;
1981
+ padding: 0.5rem 1rem;
1970
1982
  }
1971
- .api-details-page .custom-url-input .input-wrapper input {
1983
+ .api-details-page .custom-url-input .url-text {
1972
1984
  flex: 1;
1973
- padding: 0.5rem 0.5rem;
1985
+ padding-right: 0.75rem;
1974
1986
  border: none;
1975
1987
  background: transparent;
1976
1988
  line-height: 1.75rem;
1977
- letter-spacing: 0px;
1989
+ letter-spacing: 0;
1978
1990
  font-size: 1.125rem;
1979
1991
  font-weight: 400;
1980
1992
  opacity: 0.5;
1981
1993
  color: #000000;
1982
1994
  }
1983
- .api-details-page .custom-url-input .input-wrapper input:focus {
1984
- outline: none;
1995
+ .api-details-page .custom-url-input .icon-container {
1996
+ display: flex;
1997
+ align-items: center;
1998
+ gap: 0.75rem;
1999
+ }
2000
+ .api-details-page .custom-url-input .icon-container .icon {
2001
+ display: inline-block;
2002
+ width: 1.75rem;
2003
+ height: 1.75rem;
2004
+ }
2005
+ .api-details-page .custom-url-input .urlList {
2006
+ position: absolute;
2007
+ top: 100%;
2008
+ left: 0;
2009
+ width: 100%;
2010
+ z-index: 10;
2011
+ background: white;
2012
+ border: 1px solid #ccc;
2013
+ border-radius: 6px;
2014
+ max-height: 200px;
2015
+ overflow-y: auto;
2016
+ }
2017
+ .api-details-page .custom-url-input .url-item {
2018
+ padding: 0.5rem 1rem;
2019
+ display: flex;
2020
+ align-items: center;
2021
+ gap: 0.5rem;
2022
+ cursor: pointer;
2023
+ }
2024
+ .api-details-page .custom-url-input .url-item:hover {
2025
+ background-color: #f5f5f5;
1985
2026
  }
1986
2027
  .api-details-page .custom-url-input .input-wrapper .icon {
1987
2028
  cursor: pointer;
package/dist/types/assets/icons/index.d.ts CHANGED
@@ -22,3 +22,6 @@ export { default as PlusIcon } from './Plus.svg';
22
22
  export { default as PlusSquare } from './PlusSquare.svg';
23
23
  export { default as RequestOption } from './RequestOption.svg';
24
24
  export { default as ArrowBack } from './ArrowBack.svg';
25
+ export { default as arrowDown } from './arrow-down.svg';
26
+ export { default as newCopyIcon } from './newCopyIcon.svg';
27
+ export { default as arrowUp } from './arrow-up.svg';
package/dist/types/layout/docsComponents/DocsContent/OverviewPage/index.d.ts CHANGED
@@ -1,5 +1,6 @@
1
1
  import './style.scss';
2
2
  import { EndpointData, OverviewData } from 'src/layout/docsLayout';
3
+ import React from 'react';
3
4
  export declare const OverviewPage: ({ data, setActiveItemData, setActiveType, onProductNavigate, apis, }: {
4
5
  data: OverviewData;
5
6
  setActiveItemData: React.Dispatch<React.SetStateAction<OverviewData | EndpointData>>;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@digi-frontend/dgate-api-documentation",
3
- "version": "1.0.90",
3
+ "version": "1.0.92",
4
4
  "main": "dist/src/index.js",
5
5
  "module": "dist/src/index.js",
6
6
  "types": "dist/types/index.d.ts",
package/src/assets/icons/arrow-down.svg ADDED
@@ -0,0 +1,3 @@
1
+ <svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path d="M14.0027 19.6007C13.186 19.6007 12.3694 19.2857 11.751 18.6674L4.14437 11.0607C3.80604 10.7224 3.80604 10.1624 4.14437 9.82406C4.48271 9.48573 5.04271 9.48573 5.38104 9.82406L12.9877 17.4307C13.5477 17.9907 14.4577 17.9907 15.0177 17.4307L22.6244 9.82406C22.9627 9.48573 23.5227 9.48573 23.861 9.82406C24.1994 10.1624 24.1994 10.7224 23.861 11.0607L16.2544 18.6674C15.636 19.2857 14.8194 19.6007 14.0027 19.6007Z" fill="#616874"/>
3
+ </svg>
package/src/assets/icons/arrow-up.svg ADDED
@@ -0,0 +1,10 @@
1
+ <svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <g clip-path="url(#clip0_6817_4615)">
3
+ <path d="M13.9973 8.39927C14.814 8.39927 15.6306 8.71427 16.249 9.3326L23.8556 16.9393C24.194 17.2776 24.194 17.8376 23.8556 18.1759C23.5173 18.5143 22.9573 18.5143 22.619 18.1759L15.0123 10.5693C14.4523 10.0093 13.5423 10.0093 12.9823 10.5693L5.37563 18.1759C5.03729 18.5143 4.47729 18.5143 4.13896 18.1759C3.80062 17.8376 3.80062 17.2776 4.13896 16.9393L11.7456 9.3326C12.364 8.71427 13.1806 8.39927 13.9973 8.39927Z" fill="#616874"/>
4
+ </g>
5
+ <defs>
6
+ <clipPath id="clip0_6817_4615">
7
+ <rect width="28" height="28" fill="white" transform="translate(28 28) rotate(-180)"/>
8
+ </clipPath>
9
+ </defs>
10
+ </svg>
package/src/assets/icons/index.ts CHANGED
@@ -22,3 +22,6 @@ export { default as PlusIcon } from './Plus.svg'
22
22
  export { default as PlusSquare } from './PlusSquare.svg'
23
23
  export { default as RequestOption } from './RequestOption.svg'
24
24
  export { default as ArrowBack } from './ArrowBack.svg'
25
+ export { default as arrowDown } from './arrow-down.svg'
26
+ export { default as newCopyIcon } from './newCopyIcon.svg'
27
+ export { default as arrowUp } from './arrow-up.svg'
package/src/assets/icons/newCopyIcon.svg ADDED
@@ -0,0 +1,4 @@
1
+ <svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path d="M12.9487 26.5443H8.0487C3.48703 26.5443 1.45703 24.5143 1.45703 19.9526V15.0526C1.45703 10.4909 3.48703 8.46094 8.0487 8.46094H12.9487C17.5104 8.46094 19.5404 10.4909 19.5404 15.0526V19.9526C19.5404 24.5143 17.5104 26.5443 12.9487 26.5443ZM8.0487 10.2109C4.43203 10.2109 3.20703 11.4359 3.20703 15.0526V19.9526C3.20703 23.5693 4.43203 24.7943 8.0487 24.7943H12.9487C16.5654 24.7943 17.7904 23.5693 17.7904 19.9526V15.0526C17.7904 11.4359 16.5654 10.2109 12.9487 10.2109H8.0487V10.2109Z" fill="#616874"/>
3
+ <path d="M19.9526 19.5404H18.6693C18.1909 19.5404 17.7943 19.1437 17.7943 18.6654V15.0487C17.7943 11.432 16.5693 10.207 12.9526 10.207H9.33594C8.8576 10.207 8.46094 9.81037 8.46094 9.33203V8.0487C8.46094 3.48703 10.4909 1.45703 15.0526 1.45703H19.9526C24.5143 1.45703 26.5443 3.48703 26.5443 8.0487V12.9487C26.5443 17.5104 24.5143 19.5404 19.9526 19.5404ZM19.5443 17.7904H19.9526C23.5693 17.7904 24.7943 16.5654 24.7943 12.9487V8.0487C24.7943 4.43203 23.5693 3.20703 19.9526 3.20703H15.0526C11.4359 3.20703 10.2109 4.43203 10.2109 8.0487V8.45703H12.9526C17.5143 8.45703 19.5443 10.487 19.5443 15.0487V17.7904Z" fill="#616874"/>
4
+ </svg>
package/src/layout/docsComponents/DocsContent/OverviewPage/index.tsx CHANGED
@@ -1,8 +1,14 @@
1
1
  import './style.scss'
2
2
  import SVGLoader from '../../../../components/SVGLoader/SVGLoader'
3
- import { arrowRightGray, CopySticker } from '../../../../assets/icons/index'
3
+ import {
4
+ arrowDown,
5
+ arrowRightGray,
6
+ arrowUp,
7
+ newCopyIcon,
8
+ } from '../../../../assets/icons/index'
4
9
  import { EndpointData, OverviewData } from 'src/layout/docsLayout'
5
10
  import { SectionEnum, useSectionToggle } from '../../../../../src/context/SectionToggleContext'
11
+ import React, { useEffect, useState } from 'react'
6
12
 
7
13
  export const OverviewPage = ({
8
14
  data,
@@ -18,7 +24,12 @@ export const OverviewPage = ({
18
24
  apis: OverviewData[]
19
25
  }) => {
20
26
  const { toggleSection } = useSectionToggle()
27
+ const [selectedUrl, setSelectedUrl] = useState(data?.servers?.[0]?.url || '')
28
+ const [isUrlDropdownOpen, setIsUrlDropdownOpen] = useState<boolean>(false)
21
29
 
30
+ useEffect(() => {
31
+ setSelectedUrl(data?.servers?.[0]?.url || '')
32
+ }, [data])
22
33
  const handleVersionClick = (verObj) => {
23
34
  if (verObj.apiSpecId === data.apiSpecId) {
24
35
  setActiveType('OVERVIEW')
@@ -96,24 +107,48 @@ export const OverviewPage = ({
96
107
 
97
108
  <div className="custom-url-input">
98
109
  <label className="input-label">API Base URL</label>
99
- <div className="input-wrapper">
100
- <input
101
- type="text"
102
- value={!!data && !!data.servers && data.servers.length > 0 ? data.servers[0]?.url : '-'}
103
- readOnly
104
- />
105
- <span
106
- className="icon"
107
- onClick={() =>
108
- navigator.clipboard.writeText(
109
- `${
110
- !!data && !!data.servers && data.servers.length > 0 ? data.servers[0]?.url : '-'
111
- }`
112
- )
113
- }
114
- >
115
- <SVGLoader src={CopySticker} />
116
- </span>
110
+ <div className="url-container">
111
+ <div className="typeDdl" onClick={() => setIsUrlDropdownOpen((prev) => !prev)}>
112
+ <span className="url-text">{selectedUrl || '-'}</span>
113
+ <div className="icon-container">
114
+ <span
115
+ className="icon"
116
+ role="button"
117
+ tabIndex={0}
118
+ onClick={(e) => {
119
+ e.stopPropagation()
120
+ navigator.clipboard.writeText(selectedUrl)
121
+ }}
122
+ >
123
+ {selectedUrl.length !== 0 && <SVGLoader src={newCopyIcon} />}
124
+ </span>
125
+ {selectedUrl.length !== 0 && (
126
+ <SVGLoader src={!isUrlDropdownOpen ? arrowDown : arrowUp} />
127
+ )}
128
+ </div>
129
+ </div>
130
+ {isUrlDropdownOpen && selectedUrl.length !== 0 && (
131
+ <div className="urlList">
132
+ {data?.servers?.map((server, index) => (
133
+ <div
134
+ key={index}
135
+ className="url-item"
136
+ onClick={() => {
137
+ setSelectedUrl(server.url)
138
+ setIsUrlDropdownOpen(false)
139
+ }}
140
+ >
141
+ <input
142
+ type="radio"
143
+ name="api-method"
144
+ checked={selectedUrl === server.url}
145
+ readOnly
146
+ />
147
+ <span>{server.url}</span>
148
+ </div>
149
+ ))}
150
+ </div>
151
+ )}
117
152
  </div>
118
153
  </div>
119
154
 
package/src/layout/docsComponents/DocsContent/OverviewPage/style.scss CHANGED
@@ -38,32 +38,69 @@
38
38
  color: #4d4f5c;
39
39
  }
40
40
 
41
- .input-wrapper {
41
+ .url-container {
42
+ position: relative;
43
+ }
44
+
45
+ .typeDdl {
46
+ cursor: pointer;
42
47
  display: flex;
43
48
  align-items: center;
49
+ justify-content: space-between;
50
+ width: 100%;
44
51
  background-color: #edf1fb;
45
- border: 1px solid #fff;
52
+ border: 0.0625rem solid #fff;
46
53
  border-radius: 0.375rem;
47
- padding: 0 0.75rem;
48
-
49
- input {
50
- flex: 1;
51
- padding: 0.5rem 0.5rem;
52
- border: none;
53
- background: transparent;
54
- line-height: 1.75rem;
55
- letter-spacing: 0px;
56
- font-size: 1.125rem;
57
- font-weight: 400;
58
- opacity: 0.5;
54
+ padding: 0.5rem 1rem;
55
+ }
56
+ .url-text {
57
+ flex: 1;
58
+ padding-right: 0.75rem;
59
+ border: none;
60
+ background: transparent;
61
+ line-height: 1.75rem;
62
+ letter-spacing: 0;
63
+ font-size: 1.125rem;
64
+ font-weight: 400;
65
+ opacity: 0.5;
66
+ color: #000000;
67
+ }
68
+ .icon-container {
69
+ display: flex;
70
+ align-items: center;
71
+ gap: 0.75rem;
72
+ .icon {
73
+ display: inline-block;
74
+ width: 1.75rem;
75
+ height: 1.75rem;
76
+ }
77
+ }
59
78
 
60
- color: #000000;
79
+ .urlList {
80
+ position: absolute;
81
+ top: 100%;
82
+ left: 0;
83
+ width: 100%;
84
+ z-index: 10;
85
+ background: white;
86
+ border: 1px solid #ccc;
87
+ border-radius: 6px;
88
+ max-height: 200px;
89
+ overflow-y: auto;
90
+ }
61
91
 
62
- &:focus {
63
- outline: none;
64
- }
92
+ .url-item {
93
+ padding: 0.5rem 1rem;
94
+ display: flex;
95
+ align-items: center;
96
+ gap: 0.5rem;
97
+ cursor: pointer;
98
+ &:hover {
99
+ background-color: #f5f5f5;
65
100
  }
101
+ }
66
102
 
103
+ .input-wrapper {
67
104
  .icon {
68
105
  cursor: pointer;
69
106
  color: #4d75d9;
package/src/layout/docsComponents/DocsSideMenuTree/style.scss CHANGED
@@ -20,6 +20,11 @@
20
20
 
21
21
  &:hover {
22
22
  background-color: #f3f4f6;
23
+ width: 100%;
24
+ }
25
+
26
+ svg {
27
+ min-width: 1rem;
23
28
  }
24
29
 
25
30
  svg:first-child {
@@ -35,6 +40,8 @@
35
40
  font-weight: 500;
36
41
  color: #000;
37
42
  margin-left: 0.25rem;
43
+ word-break: break-all;
44
+ line-height: .9375rem;
38
45
  }
39
46
 
40
47
  &__overview {
package/variables.txt CHANGED
@@ -1 +1 @@
1
- export APP_VERSION=1.0.89
1
+ export APP_VERSION=1.0.91