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

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;
-    }
-  }
-}

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

@@ -1,192 +0,0 @@
-import './style.scss'
-import SVGLoader from '../../../../components/SVGLoader/SVGLoader'
-import { arrowRightGray, CopySticker } from '../../../../assets/icons/index'
-import { EndpointData, OverviewData } from 'src/layout/docsLayout'
-import { SectionEnum, useSectionToggle } from '../../../../../src/context/SectionToggleContext'
-
-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 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="input-wrapper">
-          <input
-            type="text"
-            value={!!data && !!data.servers && data.servers.length > 0 ? data.servers[0]?.url : '-'}
-            readOnly
-          />
-          <span
-            className="icon"
-            onClick={() =>
-              navigator.clipboard.writeText(
-                `${
-                  !!data && !!data.servers && data.servers.length > 0 ? data.servers[0]?.url : '-'
-                }`
-              )
-            }
-          >
-            <SVGLoader src={CopySticker} />
-          </span>
-        </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>
-  )
-}