@digi-frontend/dgate-api-documentation 1.0.47 → 1.0.52

package/src/layout/docsComponents/DocsContent/EndpointPage/index.tsx

@@ -7,42 +7,42 @@ import {
   RequestOption,
 } from '../../../../assets/icons/index'
 import { ArrowIcon, SelectGroup } from 'digitinary-ui'
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
+import { EndpointData } from 'src/layout/docsLayout'
+import { handleStatusColor } from '../../../../helpers/methodAccordion.helper'
+import { httpStatusCodes } from '../../../../constants/index'
+import styles from '../../Codebox/style.module.scss'
+import Tooltip from '../../../../components/Tooltip/Tooltip'
+
+export const EndpointPage = ({ data }) => {
+  const [activeTab, setActiveTab] = useState('header')
+
+  const httpStatusCodeOptions = httpStatusCodes.map((code) => ({
+    label: (
+      <div className={'statusCodeOptionContainer'}>
+        <div
+          className={'statusCodeOptionCircle'}
+          style={{ backgroundColor: handleStatusColor(code) }}
+        ></div>
+        <span>{code}</span>
+      </div>
+    ),
+    value: code,
+  }))
 
-export const EndpointPage = () => {
   const [expanded, setExpanded] = useState(null)
+  const [selectedResStatusCode, setSelectedResStatusCode] = useState(httpStatusCodeOptions[4])
+  const [headersList, setHeadersList] = useState({})
+  const requestTableData = (data?.parameters || []).filter(
+    (param) => param.in?.toLowerCase() === activeTab.toLowerCase()
+  )
 
-  const requestTableData = [
-    {
-      name: 'Parameter Name',
-      required: 'True',
-      type: 'String',
-      enum: 'Active/Expired/Cancelled',
-      description:
-        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit, Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit, Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
-    },
-    {
-      name: 'Parameter Name',
-      required: 'False',
-      type: 'Boolean',
-      enum: 'Active/Expired/Cancelled',
-      description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.sssssss',
-    },
-    {
-      name: 'Parameter Name',
-      required: 'True',
-      type: 'Object',
-      enum: '-',
-      description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.sssssss',
-    },
-    {
-      name: 'Parameter Name',
-      required: 'True',
-      type: 'Array_String',
-      enum: '-',
-      description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.sssssss',
-    },
-  ]
+  useEffect(() => {
+    if (selectedResStatusCode && selectedResStatusCode.value) {
+      const headerObj = data?.responses[selectedResStatusCode.value]
+      setHeadersList(headerObj?.headers)
+    }
+  }, [selectedResStatusCode])
 
   return (
     <div className="api-details-expanded">
@@ -51,99 +51,116 @@ export const EndpointPage = () => {
           <SVGLoader src={ArrowBack} />
         </button>
 
-        <button className="disabled">Test</button>
+        <Tooltip content="Comming soon">
+          <button className="disabled">Test</button>
+        </Tooltip>
       </div>
       <h3> Api Name</h3>
-      <h1 className="api-title">Endpoint Name</h1>
+      <h1 className="api-title">{data?.api?.title}</h1>
       <div className="url-box">
         <div style={{ textAlign: 'center' }}>
-          <span className="method-label post">Post</span>
-          <span className="url-text">https://apigw sdb-1.test.dgate.digitinary.net/test</span>
+          <span className={`method-label ${data?.method?.toLowerCase()}`}>{data.method}</span>
+          <span className="url-text">{data?.path}</span>
         </div>
-
-        <SVGLoader src={CopySticker} className="copy-icon" />
+        <span className="icon" onClick={() => navigator.clipboard.writeText(data?.path)}>
+          <SVGLoader src={CopySticker} />
+        </span>
       </div>
 
-      <p className="api-desc">Endpoint Description</p>
+      <p className="api-desc">{data?.api?.description || 'No Description'}</p>
 
       <h3>Request</h3>
 
       <div className="request-section">
         <div className="request-tabs">
-          <button className="tab">
-            <SVGLoader src={RequestOption} className="icon-left" />
-            Header
-          </button>
-          <button className="tab">
-            <SVGLoader src={RequestOption} className="icon-left" />
-            Path
-          </button>
-          <button className="tab">
-            <SVGLoader src={RequestOption} className="icon-left" />
-            Query
-          </button>
-          <button className="tab">
-            <SVGLoader src={RequestOption} className="icon-left" />
-            Request Body
-          </button>
+          {['header', 'path', 'query', 'Body'].map((tab) => (
+            <button
+              key={tab}
+              className={`tab ${activeTab === tab ? 'active' : ''}`}
+              onClick={() => setActiveTab(tab)}
+            >
+              <SVGLoader src={RequestOption} className="icon-left" />
+              <span className="tab-label">
+                {tab === 'requestBody'
+                  ? 'Request Body'
+                  : tab.charAt(0).toUpperCase() + tab.slice(1)}
+              </span>
+            </button>
+          ))}
         </div>
-        <div className="table-wrapper">
-          <table className="param-table">
-            <thead>
-              <tr>
-                <th className="head-table-label">Parameter Name</th>
-                <th className="head-table-label">Required</th>
-                <th className="head-table-label">Type</th>
-                <th className="head-table-label">Enum</th>
-                <th className="head-table-label">Description</th>
-              </tr>
-            </thead>
-            <tbody>
-              {requestTableData.map((row, index) => (
-                <tr key={index}>
-                  <td>{row.name}</td>
-                  <td>{row.required}</td>
-                  <td>{row.type}</td>
-                  <td>{row.enum}</td>
-                  <td className="desc-cell">
-                    <div className={`desc-text ${expanded === index ? 'expanded' : ''}`}>
-                      {row.description}
-                    </div>
-                    <button
-                      className="desc-toggle"
-                      onClick={() => setExpanded(expanded === index ? null : index)}
-                    >
-                      <SVGLoader
-                        src={DownArrowIcon}
-                        className={expanded === index ? 'rotated' : ''}
-                      />
-                    </button>
-                  </td>
+
+        {
+          <div className="table-wrapper">
+            <table className="param-table">
+              <thead>
+                <tr>
+                  <th className="head-table-label">Parameter Name</th>
+                  <th className="head-table-label">Required</th>
+                  <th className="head-table-label">Type</th>
+                  <th className="head-table-label">Enum</th>
+                  <th className="head-table-label">Description</th>
                 </tr>
-              ))}
-            </tbody>
-          </table>
-        </div>
+              </thead>
+              <tbody>
+                {data.parameters
+                  ?.filter((p) => p.in?.toLowerCase() === activeTab.toLowerCase())
+                  .map((row, index) => (
+                    <tr key={index}>
+                      <td>{row.name}</td>
+                      <td>{row.required ? 'True' : 'False'}</td>
+                      <td>{row.schema?.type || '-'}</td>
+                      <td>{Array.isArray(row.schema?.enum) ? row.schema.enum.join(' / ') : '-'}</td>
+                      <td className="desc-cell">
+                        <div className={`desc-text ${expanded === index ? 'expanded' : ''}`}>
+                          {row.description || 'No description'}
+                        </div>
+                        <button
+                          className="desc-toggle"
+                          onClick={() => setExpanded(expanded === index ? null : index)}
+                        >
+                          <SVGLoader
+                            src={DownArrowIcon}
+                            className={expanded === index ? 'rotated' : ''}
+                          />
+                        </button>
+                      </td>
+                    </tr>
+                  ))}
+              </tbody>
+            </table>
+          </div>
+        }
       </div>
 
       <div className="response-section">
-        <div className="response-drop-test">
-          <SelectGroup
-            className="response-drop"
-            withSearch={false}
-            isMultiple={false}
-            clearable={false}
-            placeholder="200"
-            options={[]}
-            //value={selectedStatusCode}
-            onChange={(value) => {
-              // setSelectedStatusCode(value)
-            }}
-          />
+        <h3>Response</h3>
+
+        <div style={{ width: '7.5rem', marginLeft: 'auto' }}>
+          {Object.keys(data?.responses || {})?.length > 0 && (
+            <div className={styles.codeboxSection}>
+              <div className={`${styles.codeboxHeader}`}>
+                <SelectGroup
+                  size="small"
+                  withSearch={false}
+                  isMultiple={false}
+                  clearable={false}
+                  placeholder="200"
+                  options={[
+                    {
+                      list: httpStatusCodeOptions,
+                    },
+                  ]}
+                  value={selectedResStatusCode}
+                  onChange={(value) => {
+                    setSelectedResStatusCode(value)
+                  }}
+                />
+              </div>
+            </div>
+          )}
         </div>
 
-        <h3>Response</h3>
-        <button className="tab">
+        <button className="tab active ">
           <SVGLoader src={RequestOption} className="icon-left" />
           Header
         </button>
@@ -152,7 +169,7 @@ export const EndpointPage = () => {
           <table className="param-table">
             <thead>
               <tr>
-                <th className="head-table-label">Parameter Name</th>
+                <th className="head-table-label">Header Name</th>
                 <th className="head-table-label">Required</th>
                 <th className="head-table-label">Type</th>
                 <th className="head-table-label">Enum</th>
@@ -160,20 +177,15 @@ export const EndpointPage = () => {
               </tr>
             </thead>
             <tbody>
-              <tr>
-                <td>Parameter Name</td>
-                <td>True</td>
-                <td>String</td>
-                <td>Active/Expired/Cancelled</td>
-                <td>Borem taciti dolor ...</td>
-              </tr>
-              <tr>
-                <td>Parameter Name</td>
-                <td>True</td>
-                <td>Array_Object</td>
-                <td>-</td>
-                <td>Borem taciti dolor ...</td>
-              </tr>
+              {Object.keys(headersList).map((key, index) => (
+                <tr>
+                  <td>{key}</td>
+                  <td>{headersList[key]?.required.toString()}</td>
+                  <td>{headersList[key]?.schema?.type}</td>
+                  <td>{headersList[key]?.schema?.enum?.join('/')}</td>
+                  <td>{headersList[key]?.description}</td>
+                </tr>
+              ))}
             </tbody>
           </table>
         </div>

package/src/layout/docsComponents/DocsContent/EndpointPage/style.scss

@@ -62,6 +62,7 @@ main {
       font-weight: 400;
       letter-spacing: 0px;
       line-height: 1.5rem;
+      margin-top: 1.5rem;
       margin-bottom: 0.5rem;
     }
 
@@ -86,6 +87,31 @@ main {
       text-transform: uppercase;
       color: #3aaa35;
       text-decoration: underline;
+
+      &.get {
+        color: #3a6cd1;
+      }
+      &.post {
+        color: #3aaa35;
+      }
+      &.put {
+        color: #faad14;
+      }
+      &.patch {
+        color: #58e2c2;
+      }
+      &.delete {
+        color: #da3f3f;
+      }
+      &.head {
+        color: #9461c9;
+      }
+      &.trace {
+        color: #ffa28f;
+      }
+      &.options {
+        color: #495d97;
+      }
     }
 
     .url-box {
@@ -127,13 +153,31 @@ main {
       cursor: pointer;
       font-size: 0.875rem;
       color: #000000;
+      display: flex;
+      align-items: center;
+      gap: 0.375rem;
     }
 
     .tab {
+      background: white;
+      border: 1px solid #d1d3d8;
+      padding: 0.375rem 0.75rem;
+      border-radius: 6px;
+      cursor: pointer;
+      font-size: 0.875rem;
+      color: #000000;
       display: flex;
       align-items: center;
       gap: 0.375rem;
+
+      &.active {
+        background-color: #e5edff;
+        border-color: #4d75d9;
+        color: #000000;
+        font-weight: 400;
+      }
     }
+
     .icon-left {
       width: 0.875rem;
       height: 0.875rem;
@@ -145,6 +189,7 @@ main {
       border-radius: 0.8rem;
       background: white;
       border: 1px #bbbec5 solid;
+      margin-bottom: 2rem;
     }
 
     .param-table {

package/src/layout/docsComponents/DocsContent/TagPage/index.tsx

@@ -1,24 +1,51 @@
 import './style.scss'
 import SVGLoader from '../../../../components/SVGLoader/SVGLoader'
-import { CopySticker } from '../../../../assets/icons/index'
+import { arrowRightGray, CopySticker } from '../../../../assets/icons/index'
+import { OverviewData } from 'src/layout/docsLayout'
 
-export const TagPage = () => {
+export const TagPage = ({ data, setActiveItemData, setActiveType, setExpandedSections }) => {
+  const handleClick = (endpoint) => {
+    setActiveItemData({
+      ...endpoint,
+      api: {
+        id: data.apiSpecId,
+        title: data.title,
+        description: data.description,
+        version: data.version,
+        ...data,
+      },
+    })
+    setActiveType('ENDPOINT')
+
+    setExpandedSections((prev) => ({
+      ...prev,
+      [`api-${data.apiSpecId}-section`]: true,
+      [`api-${data.apiSpecId}-endpoints`]: true,
+      [`api-${data.apiSpecId}-resource-${endpoint.id}`]: true,
+    }))
+  }
   return (
     <div className="api-details-page">
       <h2 className="welcome">Welcome to</h2>
-      <h1 className="api-title">API Name</h1>
+      <h1 className="api-title">{data?.title}</h1>
       <p className="api-version">
-        API Version: <span>2.3.0</span>
+        API Version: <span>{data?.version}</span>
       </p>
 
       <div className="custom-url-input">
         <label className="input-label">API Base URL</label>
         <div className="input-wrapper">
-          <input type="text" value="https://apigw-sdb-1.test.dgate.digitinary.net/test" readOnly />
+          <input
+            type="text"
+            value={!!data && !!data.servers && data.servers.length > 0 ? data.servers[0]?.url : '-'}
+            readOnly
+          />
           <span
             className="icon"
             onClick={() =>
-              navigator.clipboard.writeText('https://apigw-sdb-1.test.dgate.digitinary.net/test')
+              navigator.clipboard.writeText(
+                `${!!data && !!data.servers && data.servers.length > 0 ? data.servers[0]?.url : '-'}`
+              )
             }
           >
             <SVGLoader src={CopySticker} />
@@ -28,84 +55,60 @@ export const TagPage = () => {
 
       <p className="api-desc">API Description</p>
       <div className="api-product-tag">
-        Product with this API <span className="product-tag">Product 01</span>
+        Product with this API <span className="product-tag">{data.associatedProduct.name}</span>
       </div>
 
       <h3 className="section-title">Endpoints</h3>
 
-      <div className="endpoint-group">
-        <h4 className="tag-title">Tag 01</h4>
-        <div className="endpoint-list">
-          <div className="endpoint-card">
-            <div className="endpoint-card-header">
-              <span className="method-label get">GET</span>
-              <h5>Endpoint Name</h5>
-            </div>
+      {Object.entries(data?.tags).map(([tag, endpoints]) => (
+        <div className="endpoint-group" key={tag}>
+          <h4 className="tag-title">{tag}</h4>
+          <div className="endpoint-list">
+            {endpoints.map((endpoint, idx) => (
+              <div
+                className="endpoint-card"
+                onClick={() => handleClick(endpoint)}
+                key={`${tag}-${idx}`}
+              >
+                <div>
+                  <div className="endpoint-card-header">
+                    <span className={`method-label ${endpoint.method.toLowerCase()}`}>
+                      {endpoint.method}
+                    </span>
+                    <div className="title-wrapper">
+                      <h5>
+                        {(endpoint.summary || 'Endpoint Name').slice(0, 17)}
+                        {(endpoint.summary?.length ?? 0) > 17 && '...'}
+                      </h5>
+                    </div>
+                  </div>
+                  <div className="endpoint-meta">
+                    <p>{endpoint.path}</p>
+                    <p className="description">{endpoint.description ?? 'No Description '}</p>
+                  </div>
+                </div>
 
-            <div className="endpoint-meta">
-              <p>/auth/login/</p>
-              <p className="description">Login endpoint</p>
-            </div>
-          </div>
-          <div className="endpoint-card">
-            <div className="endpoint-card-header">
-              <span className="method-label patch">PATCH</span>
-              <h5>Endpoint Name</h5>
-            </div>
-            <div className="endpoint-meta">
-              <p>/auth/login/</p>
-              <p className="description">Update login info</p>
-            </div>
+                <div className="endpoint-arrow">
+                  <SVGLoader src={arrowRightGray} />
+                </div>
+              </div>
+            ))}
           </div>
         </div>
-      </div>
+      ))}
 
-      <div className="endpoint-group">
-        <h4 className="tag-title">Tag 02</h4>
-        <div className="endpoint-list">
-          <div className="endpoint-card">
-            <div className="endpoint-card-header">
-              <span className="method-label post">POST</span>
-              <h5>Endpoint Name</h5>
-            </div>
-            <div className="endpoint-meta">
-              <p>/auth/login/</p>
-              <p className="description">Create login session</p>
-            </div>
-          </div>
-          <div className="endpoint-card">
-            <div className="endpoint-card-header">
-              <span className="method-label put">PUT</span>
-              <h5>Endpoint Name</h5>
-            </div>
-            <div className="endpoint-meta">
-              <p>/auth/login/</p>
-              <p className="description">Replace login session</p>
-            </div>
-          </div>
-          <div className="endpoint-card">
-            <div className="endpoint-card-header">
-              <span className="method-label delete">DELETE</span>
-              <h5>Endpoint Name</h5>
-            </div>
-            <div className="endpoint-meta">
-              <p>/auth/login/</p>
-              <p className="description">Delete login session</p>
-            </div>
+      {data.apiVersions?.length > 0 && (
+        <div className="versions-section">
+          <h4>API Versions</h4>
+          <div className="version-list">
+            {data.apiVersions.map((verObj, index) => (
+              <button key={index} className="version-btn">
+                {verObj.metaData?.version || 'N/A'}
+              </button>
+            ))}
           </div>
         </div>
-      </div>
-
-      <div className="versions-section">
-        <h4>API Versions</h4>
-        <div className="version-list">
-          {['1.2.0', '1.3.0', '1.4.0', '1.5.0', '2.2.0'].map((ver) => (
-            <button key={ver} className="version-btn">
-              {ver}
-            </button>
-          ))}
-        </div>
-      </div>
+      )}
     </div>
   )
 }

package/src/layout/docsComponents/DocsContent/TagPage/style.scss

@@ -135,21 +135,36 @@
     }
 
     .endpoint-card {
-      border: 1px solid #ddd;
-      border-radius: 0.5rem;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
       padding: 1rem;
+      border: 1px solid #e5e7eb;
+      border-radius: 0.5rem;
       background-color: #fff;
+      margin-bottom: 1rem;
+      transition: box-shadow 0.2s ease;
 
       .endpoint-card-header {
         display: flex;
         gap: 1.5rem;
         align-items: flex-start;
 
+        .title-wrapper {
+          flex: 1;
+          width: 8rem;
+          min-width: 0;
+        }
+
         h5 {
           font-size: 1rem;
           font-weight: 400;
           line-height: 1.25rem;
           letter-spacing: 0px;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          max-width: 100%;
         }
       }
 
@@ -161,7 +176,7 @@
         padding: 0.275rem 1.563rem;
         border-radius: 0.188rem;
         display: inline-block;
-        margin-bottom: 0.5rem;
+        margin-bottom: 1rem;
         text-transform: uppercase;
 
         &.get {
@@ -184,6 +199,18 @@
           background-color: #da3f3f;
           color: #ffffff;
         }
+        &.head {
+          background-color: #9461c9;
+          color: #ffffff;
+        }
+        &.trace {
+          background-color: #ffa28f;
+          color: #ffffff;
+        }
+        &.options {
+          background-color: #495d97;
+          color: #ffffff;
+        }
       }
 
       .endpoint-meta {
@@ -208,9 +235,16 @@
           line-height: 1rem;
           font-weight: 400;
           letter-spacing: 0px;
-          margin-top: 1rem;
+          margin-top: 1.5rem;
         }
       }
+      .endpoint-arrow {
+        align-content: center;
+        width: 1rem;
+        height: 1rem;
+        flex-shrink: 0;
+        margin-left: 1rem;
+      }
     }
   }
 
@@ -230,9 +264,11 @@
     .version-list {
       display: flex;
       flex-wrap: wrap;
-      gap: 0.5rem;
+      gap: 1rem;
 
       .version-btn {
+        width: 3.9375rem;
+        height: 3rem;
         padding: 0.4rem 0.8rem;
         border: 1px solid #4d75d9;
         border-radius: 0.375rem;
@@ -240,6 +276,7 @@
         cursor: pointer;
         font-size: 0.875rem;
         color: #4d75d9;
+        box-shadow: inset 0 1px 3px #00000040;
       }
     }
   }