@digi-frontend/dgate-api-documentation 1.2.0 → 1.3.0

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

@@ -0,0 +1,307 @@
+import SVGLoader from '../../../../components/SVGLoader/SVGLoader'
+import {
+  ArrowBack,
+  arrowDown,
+  arrowUp,
+  DownArrowIcon,
+  newCopyIcon,
+  RequestOption,
+} from '../../../../assets/icons/index'
+import { SelectGroup } from 'digitinary-ui'
+import { useEffect, useMemo, 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, copyToClipboard } 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 [selectedUrl, setSelectedUrl] = useState(data?.api?.servers?.[0]?.url || '')
+  const [isUrlDropdownOpen, setIsUrlDropdownOpen] = useState<boolean>(false)
+
+  useEffect(() => {
+    setSelectedUrl(data?.api?.servers?.[0]?.url || '')
+  }, [data])
+
+  const fullUrl = useMemo(() => {
+    // env gateway url + api version(if appended) + context path
+    const url = data.api?.servers?.filter((s) => s.url !== '/')[0]?.url
+    const pathParts = data?.path.split('/').slice(2) // slice from index 2 to skip the first empty "" and "comments"
+    const fullPath = !!pathParts?.length ? '/' + pathParts.join('/') : '' // this will contain the full path without the context path
+    return `${url}${fullPath}`
+  }, [data])
+
+  // Filter status codes to only include those
+  const filteredStatusCodes = Object.keys(data?.responses || {}).filter((code) => {
+    const response = data.responses[code]
+    return (
+      response?.content?.['application/json']?.schema?.properties
+    )
+  })
+
+  // Create options for the select dropdown
+  const httpStatusCodeOptions = filteredStatusCodes.map((code) => ({
+    label: (
+      <div className="statusCodeOptionContainer">
+        <div
+          className="statusCodeOptionCircle"
+          style={{ backgroundColor: handleStatusColor(code) }}
+        ></div>
+        <span>{code}</span>
+      </div>
+    ),
+    value: code,
+  }))
+
+  // Function to get default option
+  const getDefaultOption = () => {
+    const has200 = filteredStatusCodes.includes('200')
+    return has200
+      ? httpStatusCodeOptions.find((opt) => opt.value === '200')
+      : httpStatusCodeOptions[0] || null
+  }
+
+  const [expanded, setExpanded] = useState(null)
+  const [selectedResStatusCode, setSelectedResStatusCode] = useState(getDefaultOption())
+  const [headersList, setHeadersList] = useState({})
+  const requestTableData = (data?.parameters || []).filter(
+    (param) => param.in?.toLowerCase() === activeTab.toLowerCase()
+  )
+
+  useEffect(() => {
+    setSelectedResStatusCode(getDefaultOption())
+  }, [data])
+
+  useEffect(() => {
+    if (selectedResStatusCode && selectedResStatusCode.value) {
+      const headerObj = data?.responses[selectedResStatusCode.value]
+      setHeadersList(headerObj?.headers)
+    }
+  }, [selectedResStatusCode, data?.responses])
+
+  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">
+        {isUrlDropdownOpen && selectedUrl.length !== 0 && (
+          <div className="url-list">
+            {data.api?.servers?.map((server, index) => (
+              <div
+                key={index}
+                className="url-item"
+                onClick={() => {
+                  setSelectedUrl(server.url)
+                  setIsUrlDropdownOpen(false)
+                }}
+              >
+                <input
+                  type="radio"
+                  name="api-method"
+                  checked={selectedUrl === server.url}
+                  readOnly
+                />
+                <span>{`${server.url}${data.path}`}</span>
+              </div>
+            ))}
+          </div>
+        )}
+        <div className="url-box_text-container">
+          <span className={`method-label ${data?.method?.toLowerCase()}`}>{data.method}</span>
+          <div className="url-container">
+            <div className="type-ddl" onClick={() => setIsUrlDropdownOpen((prev) => !prev)}>
+              <span className="url-text">{`${selectedUrl}${data.path}`}</span>
+              <div className="icon-container">
+                <SVGLoader
+                  className="icon"
+                  role="button"
+                  tabIndex={0}
+                  onClick={(e) => {
+                    e.stopPropagation()
+                    copyToClipboard(`${selectedUrl}${data.path}`)
+                  }}
+                  src={newCopyIcon}
+                />
+                {selectedUrl.length !== 0 && (
+                  <SVGLoader src={!isUrlDropdownOpen ? arrowDown : arrowUp} />
+                )}
+              </div>
+            </div>
+          </div>
+        </div>
+      </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/OverviewPage/index.tsx

@@ -0,0 +1,223 @@
+import './style.scss'
+import SVGLoader from '../../../../components/SVGLoader/SVGLoader'
+import { arrowDown, arrowRightGray, arrowUp, newCopyIcon } from '../../../../assets/icons/index'
+import { EndpointData, OverviewData } from 'src/layout/docsLayout'
+import { SectionEnum, useSectionToggle } from '../../../../../src/context/SectionToggleContext'
+import React, { useEffect, useState } from 'react'
+import { copyToClipboard } from '../../../../utils'
+
+export const OverviewPage = ({
+  data,
+  setActiveItemData,
+  setActiveType,
+  onProductNavigate,
+  apis,
+}: {
+  data: OverviewData
+  setActiveItemData: React.Dispatch<React.SetStateAction<OverviewData | EndpointData>>
+  setActiveType: React.Dispatch<React.SetStateAction<'OVERVIEW' | 'ENDPOINT'>>
+  onProductNavigate?: (productId: number) => void
+  apis: OverviewData[]
+}) => {
+  const { toggleSection } = useSectionToggle()
+  const [selectedUrl, setSelectedUrl] = useState(data?.servers?.[0]?.url || '')
+  const [isUrlDropdownOpen, setIsUrlDropdownOpen] = useState<boolean>(false)
+
+  useEffect(() => {
+    setSelectedUrl(data?.servers?.[0]?.url || '')
+  }, [data])
+  const handleVersionClick = (verObj) => {
+    if (verObj.apiSpecId === data.apiSpecId) {
+      setActiveType('OVERVIEW')
+      return
+    }
+
+    const matchedVersion = data.apiVersions.find((v) => v.apiSpecId === verObj.apiSpecId)
+
+    if (!matchedVersion) {
+      return
+    }
+
+    const matchedApi = apis.find((api) => api.apiSpecId === matchedVersion.apiSpecId)
+    setActiveItemData(matchedApi)
+
+    setActiveType('OVERVIEW')
+    toggleSection(
+      matchedApi.apiSpecId,
+      [
+        { type: SectionEnum.API_SECTION, setTo: true },
+        { type: SectionEnum.OVERVIEW, setTo: true },
+      ],
+      {
+        resetOthers: true,
+        filterKeys: [
+          SectionEnum.OVERVIEW,
+          SectionEnum.API_SECTION,
+          SectionEnum.ENDPOINTS_SECTION,
+          SectionEnum.TAG_SECTION,
+        ],
+      }
+    )
+  }
+
+  const handleClick = (endpoint) => {
+    setActiveItemData({
+      ...endpoint,
+      api: {
+        id: data.apiSpecId,
+        title: data.title,
+        description: data.description,
+        version: data.version,
+        ...data,
+      },
+    })
+    setActiveType('ENDPOINT')
+    const tagEntries = Object.entries(data?.tags || {})
+    const sectionIndex = tagEntries.findIndex(([, endpoints]) =>
+      endpoints.some((e) => e.id === endpoint.id)
+    )
+
+    const tagSectionIndex = Object.entries(data.tags)
+      .sort(([a], [b]) => (a === 'default' ? 1 : b === 'default' ? -1 : a.localeCompare(b)))
+      .findIndex(([_, tagData]) => tagData.find((t) => t.id === endpoint.id))
+
+    toggleSection(
+      data.apiSpecId,
+      [
+        { type: SectionEnum.API_SECTION, setTo: true },
+        { type: SectionEnum.ENDPOINTS_SECTION, setTo: true },
+        { type: SectionEnum.TAG_SECTION, setTo: true, index: tagSectionIndex },
+        { type: SectionEnum.RESOURCE, setTo: true, id: endpoint.id },
+      ],
+      { resetOthers: true, filterKeys: [SectionEnum.OVERVIEW] }
+    )
+  }
+
+  return (
+    <div className="api-details-page">
+      <h2 className="welcome">Welcome to</h2>
+      <h1 className="api-title">{data?.title}</h1>
+      <p className="api-version">
+        API Version: <span>{data?.version}</span>
+      </p>
+      <div className="custom-url-input">
+        <label className="input-label">API Base URL</label>
+        <div className="url-container">
+          <div className="type-ddl" onClick={() => setIsUrlDropdownOpen((prev) => !prev)}>
+            <span className="url-text">{selectedUrl || '-'}</span>
+            <div className="icon-container">
+              {selectedUrl.length !== 0 && (
+                <SVGLoader
+                  className="icon"
+                  role="button"
+                  tabIndex={0}
+                  onClick={(e) => {
+                    e.stopPropagation()
+                    copyToClipboard(selectedUrl)
+                  }}
+                  src={newCopyIcon}
+                />
+              )}
+              {selectedUrl.length !== 0 && (
+                <SVGLoader src={!isUrlDropdownOpen ? arrowDown : arrowUp} />
+              )}
+            </div>
+          </div>
+          {isUrlDropdownOpen && selectedUrl.length !== 0 && (
+            <div className="url-list">
+              {data?.servers?.map((server, index) => (
+                <div
+                  key={index}
+                  className="url-item"
+                  onClick={() => {
+                    setSelectedUrl(server.url)
+                    setIsUrlDropdownOpen(false)
+                  }}
+                >
+                  <input
+                    type="radio"
+                    name="api-method"
+                    checked={selectedUrl === server.url}
+                    readOnly
+                  />
+                  <span>{server.url}</span>
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+      </div>
+
+      <p className="api-desc">{`${data.description || 'No Description'}`}</p>
+      {onProductNavigate && (
+        <div className="api-product-tag">
+          Product with this API{' '}
+          <span
+            className="product-tag"
+            role="button"
+            tabIndex={-1}
+            onClick={() => onProductNavigate(data.associatedProduct.productId)}
+          >
+            {data.associatedProduct.name}
+          </span>
+        </div>
+      )}
+
+      <h3 className="section-title">Endpoints</h3>
+
+      {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, 40)}
+                        {(endpoint.summary?.length ?? 0) > 40 && '...'}
+                      </h5>
+                    </div>
+                  </div>
+                  <div className="endpoint-meta">
+                    <p>{endpoint.path}</p>
+                    <p className="description">{endpoint.description ?? 'No Description '}</p>
+                  </div>
+                </div>
+
+                <div className="endpoint-arrow">
+                  <SVGLoader src={arrowRightGray} />
+                </div>
+              </div>
+            ))}
+          </div>
+        </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"
+                onClick={() => handleVersionClick(verObj)}
+              >
+                {verObj.metaData?.version || 'N/A'}
+              </button>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}