@digi-frontend/dgate-api-documentation 1.0.0 → 1.0.1

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

@@ -0,0 +1,236 @@
+import SVGLoader from '../../../../components/SVGLoader/SVGLoader'
+import {
+  ArrowBack,
+  CopySticker,
+  DownArrowIcon,
+  RequestOption,
+} from '../../../../assets/icons/index'
+import { SelectGroup } from 'digitinary-ui'
+import { useEffect, useState } from 'react'
+import { EndpointData, OverviewData } 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'
+import './style.scss'
+import { SectionEnum, useSectionToggle } from '../../../../../src/context/SectionToggleContext'
+import { capitalizeFirstLetter } from '../../../../../src/utils'
+
+export const EndpointPage = ({
+  data,
+  setActiveType,
+  setActiveItemData,
+}: {
+  data: EndpointData
+  setActiveType: React.Dispatch<React.SetStateAction<'OVERVIEW' | 'ENDPOINT'>>
+  setActiveItemData: React.Dispatch<React.SetStateAction<OverviewData | EndpointData>>
+}) => {
+  const [activeTab, setActiveTab] = useState('header')
+  const { toggleSection } = useSectionToggle()
+
+  const httpStatusCodeOptions = httpStatusCodes.map((code) => ({
+    label: (
+      <div className={'statusCodeOptionContainer'}>
+        <div
+          className={'statusCodeOptionCircle'}
+          style={{ backgroundColor: handleStatusColor(code) }}
+        ></div>
+        <span>{code}</span>
+      </div>
+    ),
+    value: code,
+  }))
+
+  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()
+  )
+
+  useEffect(() => {
+    if (selectedResStatusCode && selectedResStatusCode.value) {
+      const headerObj = data?.responses[selectedResStatusCode.value]
+      setHeadersList(headerObj?.headers)
+    }
+  }, [selectedResStatusCode])
+
+  // ? TODO: 'body' should be returned after discussing with PO
+
+  return (
+    <div className="api-details-expanded">
+      <div className="test-button">
+        <button
+          className="back-button"
+          onClick={() => {
+            toggleSection(data.api.apiSpecId, [{ type: SectionEnum.OVERVIEW, setTo: true }], {
+              resetOthers: true,
+              filterKeys: [SectionEnum.RESOURCE],
+            })
+            setActiveType('OVERVIEW')
+            setActiveItemData(data.api)
+          }}
+        >
+          <SVGLoader src={ArrowBack} />
+        </button>
+
+        <Tooltip content="Comming soon">
+          <button className="disabled">Test</button>
+        </Tooltip>
+      </div>
+      <h3>{data.api.title}</h3>
+      <h1 className="api-title">{data?.summary}</h1>
+      <div className="url-box">
+        <div style={{ textAlign: 'center' }}>
+          <span className={`method-label ${data?.method?.toLowerCase()}`}>{data.method}</span>
+          <span className="url-text">{data?.path}</span>
+        </div>
+        <span className="icon" onClick={() => navigator.clipboard.writeText(data?.path)}>
+          <SVGLoader src={CopySticker} />
+        </span>
+      </div>
+
+      <p className="api-desc">{data?.description || 'No Description'}</p>
+
+      <h3>Request</h3>
+
+      <div className="request-section">
+        <div className="request-tabs">
+          {['header', 'path', 'query'].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>
+                {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 style={{ textTransform: 'capitalize' }}>
+                        <span>{row?.schema?.type || '-'}</span>
+                        {row?.schema?.type === 'array' && row?.schema?.items?.type && (
+                          <span style={{ color: '#616874', fontSize: '0.75rem' }}>
+                            _{capitalizeFirstLetter(row.schema?.items?.type)}
+                          </span>
+                        )}
+                      </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">
+        <h3>Response</h3>
+
+        <div>
+          <div style={{ height: '0.5rem', width: '7.5rem', marginLeft: 'auto' }}>
+            {Object.keys(data?.responses || {})?.length > 0 && (
+              <div className={'codeboxSection'}>
+                <div className={`${'codeboxHeader'}`}>
+                  <SelectGroup
+                    size="small"
+                    withSearch={false}
+                    isMultiple={false}
+                    clearable={false}
+                    placeholder="200"
+                    options={[
+                      {
+                        list: httpStatusCodeOptions,
+                      },
+                    ]}
+                    value={selectedResStatusCode}
+                    onChange={(value) => {
+                      setSelectedResStatusCode(value)
+                    }}
+                  />
+                </div>
+              </div>
+            )}
+          </div>
+          <button className="tab active ">
+            <SVGLoader src={RequestOption} className="icon-left" />
+            Header
+          </button>
+        </div>
+
+        <div className="table-wrapper">
+          <table className="param-table">
+            <thead>
+              <tr>
+                <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>
+                <th className="head-table-label">Description</th>
+              </tr>
+            </thead>
+            <tbody>
+              {!!headersList &&
+                Object.keys(headersList) &&
+                Object.keys(headersList).map((key) => (
+                  <tr>
+                    <td>{key}</td>
+                    <td>{headersList[key]?.required.toString()}</td>
+                    <td style={{ textTransform: 'capitalize' }}>
+                      <span>{headersList[key]?.schema?.type || '-'}</span>
+                      {headersList[key]?.schema?.type === 'array' &&
+                        headersList[key]?.schema?.items?.type && (
+                          <span style={{ color: '#616874', fontSize: '0.75rem' }}>
+                            _{capitalizeFirstLetter(headersList[key]?.schema?.items?.type)}
+                          </span>
+                        )}
+                    </td>
+                    <td>{headersList[key]?.schema?.enum?.join('/')}</td>
+                    <td>{headersList[key]?.description}</td>
+                  </tr>
+                ))}
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,309 @@
+main {
+  padding: 2rem;
+
+  .api-details-expanded {
+    .response-section .codeboxSection .codeboxHeader {
+      .multiSelectGroup {
+        .selectDisplay {
+          padding: 0;
+          width: 7.5rem !important;
+          height: 2rem !important;
+
+          .select-label-container {
+            min-width: 100%;
+            padding: 0;
+          }
+        }
+
+        .optionsList .option {
+          height: 1.5rem;
+          padding: 0;
+        }
+
+        .statusCodeOptionContainer {
+          display: flex;
+          align-items: center;
+          gap: 0.625rem;
+          padding-left: 0.75rem;
+
+          .statusCodeOptionCircle {
+            width: 0.625rem;
+            min-width: 0.625rem;
+            aspect-ratio: 1 / 1;
+            border-radius: 100%;
+          }
+        }
+      }
+    }
+
+    .api-title {
+      font-size: 3rem;
+      font-weight: 600;
+      letter-spacing: -1px;
+      line-height: 3.5rem;
+      margin-bottom: 0.752rem;
+      color: #4d75d9;
+    }
+
+    .test-button {
+      margin-top: 1.25rem;
+      margin-bottom: 3.125rem;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+
+      gap: 0.5rem;
+
+      .back-button {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: 2.75rem;
+        height: 2.75rem;
+        border: 1px solid #3b82f6;
+        border-radius: 0.5rem;
+        background-color: white;
+        color: #3b82f6;
+        cursor: pointer;
+        transition: background-color 0.2s ease;
+
+        svg {
+          stroke-width: 2;
+        }
+
+        &:hover {
+          background-color: #eff6ff;
+        }
+      }
+    }
+
+    .test-button .disabled {
+      background: #f0f1f2;
+      color: #9ca1aa;
+      cursor: not-allowed;
+      padding: 0.375rem 1rem;
+      border-radius: 6px;
+      font-size: 14px;
+      border: 1px #b8bfca solid;
+      width: 7.56rem;
+      height: 2.75rem;
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+    }
+
+    h3 {
+      color: #616874;
+      font-size: 1.125rem;
+      font-weight: 400;
+      letter-spacing: 0px;
+      line-height: 1.5rem;
+      margin-top: 1.5rem;
+      margin-bottom: 0.5rem;
+    }
+
+    .url-box {
+      height: 1.75rem;
+      justify-content: space-between;
+      background-color: #edf1fb !important;
+    }
+
+    .url-text {
+      color: #3b3f46;
+      font-size: 1.25rem;
+      letter-spacing: 0px;
+      line-height: 1.75rem;
+    }
+
+    .method-label {
+      font-size: 0.924rem;
+      font-weight: 600;
+      padding: 0.125rem 0.5rem;
+      border-radius: 0.375rem;
+      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 {
+      background-color: #f3f4f6;
+      padding: 0.375rem 0.75rem;
+      border-radius: 0.5rem;
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+      font-size: 14px;
+      flex: 1;
+      height: 2.8rem;
+      margin-bottom: 1.5rem;
+    }
+
+    .api-desc {
+      color: #6b7280;
+      margin: 1.5rem 0;
+    }
+
+    .head-table-label {
+      color: #3b3f46 !important;
+      letter-spacing: 0px;
+      font-weight: 400 !important;
+      line-height: 1rem;
+    }
+
+    .request-tabs {
+      display: flex;
+      gap: 0.5rem;
+      margin-bottom: 0.75rem;
+    }
+
+    .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;
+    }
+
+    .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;
+    }
+
+    .table-wrapper {
+      overflow-x: auto;
+      border: 1px solid #e5e7eb;
+      border-radius: 0.8rem;
+      background: white;
+      border: 1px #bbbec5 solid;
+      margin-bottom: 2rem;
+    }
+
+    .param-table {
+      width: 100%;
+      border-collapse: collapse;
+      font-size: 0.875rem;
+
+      .desc-cell {
+        position: relative;
+        max-width: 20rem;
+        padding-right: 1.5rem;
+      }
+
+      .desc-text {
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        max-width: 90%;
+      }
+
+      .desc-text.expanded {
+        white-space: normal;
+      }
+
+      .desc-toggle {
+        position: absolute;
+        right: 0.5rem;
+        top: 50%;
+        transform: translateY(-50%);
+        background: none;
+        border: none;
+        cursor: pointer;
+      }
+
+      .desc-toggle svg {
+        transition: transform 0.2s ease;
+      }
+
+      .desc-toggle .rotated {
+        transform: rotate(180deg);
+      }
+    }
+
+    .param-table th,
+    .param-table td {
+      padding: 10px;
+      border-bottom: 1px solid #bbbec5;
+      text-align: left;
+      color: #3b3f46;
+    }
+
+    .param-table th {
+      background: #edf1fb;
+      font-weight: 600;
+    }
+
+    .response-status {
+      display: flex;
+      align-items: center;
+      justify-content: end;
+      gap: 0.375rem;
+      font-size: 0.875rem;
+      color: green;
+      margin-bottom: 0.75rem;
+    }
+
+    .response-drop {
+      width: 10rem;
+      justify-content: end;
+    }
+    .response-drop-test {
+      justify-content: end !important;
+      align-items: end !important;
+      align-content: end !important;
+    }
+
+    .copy-icon {
+      cursor: pointer;
+      width: 1.5rem;
+      height: 1.5rem;
+    }
+  }
+}