@digi-frontend/dgate-api-documentation 1.1.4 → 1.1.7

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

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

@@ -1,223 +0,0 @@
-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>
-  )
-}