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

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

@@ -1,236 +0,0 @@
-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

@@ -1,309 +0,0 @@
-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;
-    }
-  }
-}