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

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

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

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

@@ -0,0 +1,284 @@
+.api-details-page {
+  padding: 2rem;
+
+  .welcome {
+    font-size: 1.2rem;
+    color: #616874;
+    font-weight: 400;
+    font-size: 1.125rem;
+    letter-spacing: 0px;
+    line-height: 1.5rem;
+  }
+
+  .api-title {
+    font-size: 2rem;
+    font-weight: 600;
+    color: #4d75d9;
+    font-size: 3rem;
+    letter-spacing: -1px;
+    margin-bottom: 0.5rem;
+  }
+
+  .api-version {
+    font-size: 1.25rem;
+    color: #3b3f46;
+    font-weight: 400;
+    letter-spacing: 0px;
+    line-height: 1.75rem;
+  }
+  .custom-url-input {
+    margin-top: 1.5rem;
+    width: 50%;
+
+    .input-label {
+      display: block;
+      margin-bottom: 0.5rem;
+      font-size: 0.875rem;
+      font-weight: 600;
+      color: #4d4f5c;
+    }
+
+    .input-wrapper {
+      display: flex;
+      align-items: center;
+      background-color: #edf1fb;
+      border: 1px solid #fff;
+      border-radius: 0.375rem;
+      padding: 0 0.75rem;
+
+      input {
+        flex: 1;
+        padding: 0.5rem 0.5rem;
+        border: none;
+        background: transparent;
+        line-height: 1.75rem;
+        letter-spacing: 0px;
+        font-size: 1.125rem;
+        font-weight: 400;
+        opacity: 0.5;
+
+        color: #000000;
+
+        &:focus {
+          outline: none;
+        }
+      }
+
+      .icon {
+        cursor: pointer;
+        color: #4d75d9;
+        font-size: 1rem;
+        margin-left: 0.5rem;
+
+        &:hover {
+          color: #2f54eb;
+        }
+      }
+    }
+  }
+  .api-desc {
+    padding: 1.125rem 0;
+    color: #000000;
+    font-weight: 400;
+    line-height: 1.125rem;
+  }
+
+  .api-product-tag {
+    margin: 1rem 0;
+    font-size: 0.9rem;
+    font-size: 1rem;
+    font-weight: 500;
+    color: #616874;
+    line-height: 1.125rem;
+    letter-spacing: 0px;
+
+    .product-tag {
+      background: #f1f1f1;
+      padding: 0.25rem 0.5rem;
+      border-radius: 0.25rem;
+      border: 1px solid #bbbec5;
+      font-weight: 400;
+      font-size: 0.75rem;
+      letter-spacing: 0px;
+      margin-left: 0.5rem;
+      cursor: pointer;
+    }
+  }
+
+  .section-title {
+    margin-top: 2rem;
+    color: #4d75d9;
+    font-weight: 600;
+    font-size: 1.75rem;
+    letter-spacing: -0.5px;
+    line-height: 2.25rem;
+  }
+
+  .endpoint-group {
+    margin-top: 1.5rem;
+    gap: 1rem;
+
+    .tag-title {
+      font-size: 1.125rem;
+      margin-bottom: 1rem;
+      border-bottom: 1px solid #ddd;
+      padding-bottom: 0.5rem;
+      line-height: 1.5rem;
+      letter-spacing: 0px;
+      font-weight: 500;
+      color: #616874;
+    }
+
+    .endpoint-list {
+      display: grid;
+      grid-template-columns: repeat(auto-fill, minmax(308px, 1fr));
+      gap: 1rem;
+    }
+
+    .endpoint-card {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 1rem;
+      border: 1px solid #e5e7eb;
+      border-radius: 0.5rem;
+      background-color: #fff;
+      margin-bottom: 1rem;
+      transition: box-shadow 0.2s ease;
+
+      .endpoint-card-header {
+        display: flex;
+        gap: 0.8rem;
+        align-items: flex-start;
+
+        .title-wrapper {
+          flex: 1;
+          max-width: 10rem;
+          min-width: 10rem;
+        }
+
+        h5 {
+          font-size: 1rem;
+          font-weight: 400;
+          line-height: 1.25rem;
+          letter-spacing: 0px;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          max-width: 100%;
+        }
+      }
+
+      .method-label {
+        font-size: 0.875rem;
+        font-weight: 400;
+        letter-spacing: 0px;
+        line-height: 1rem;
+        padding: 0.275rem 1.563rem;
+        border-radius: 0.188rem;
+        display: inline-block;
+        margin-bottom: 1rem;
+        text-transform: uppercase;
+
+        &.get {
+          background-color: #3a6cd1;
+          color: #ffffff;
+        }
+        &.post {
+          background-color: #3aaa35;
+          color: #ffffff;
+        }
+        &.put {
+          background-color: #faad14;
+          color: #ffffff;
+        }
+        &.patch {
+          background-color: #58e2c2;
+          color: #ffffff;
+        }
+        &.delete {
+          background-color: #da3f3f;
+          color: #ffffff;
+        }
+        &.head {
+          background-color: #9461c9;
+          color: #ffffff;
+        }
+        &.trace {
+          background-color: #ffa28f;
+          color: #ffffff;
+        }
+        &.options {
+          background-color: #495d97;
+          color: #ffffff;
+        }
+      }
+
+      .endpoint-meta {
+        h5 {
+          font-size: 1rem;
+          font-weight: 400;
+          line-height: 1.25rem;
+          letter-spacing: 0px;
+        }
+
+        p {
+          color: #616874;
+          font-weight: 400;
+          font-size: 0.85rem;
+          letter-spacing: 0px;
+          line-height: 1rem;
+          margin: 0.25rem 0;
+        }
+
+        .description {
+          color: #3b3f46;
+          line-height: 1rem;
+          font-weight: 400;
+          letter-spacing: 0px;
+          margin-top: 1.5rem;
+        }
+      }
+      .endpoint-arrow {
+        align-content: center;
+        width: 1rem;
+        height: 1rem;
+        flex-shrink: 0;
+        margin-left: 1rem;
+      }
+    }
+  }
+
+  .versions-section {
+    margin-top: 2rem;
+
+    h4 {
+      color: #4d75d9;
+      font-weight: 600;
+      font-size: 1.75rem;
+      letter-spacing: -0.5px;
+      line-height: 2.25rem;
+
+      margin-bottom: 0.75rem;
+    }
+
+    .version-list {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 1rem;
+
+      .version-btn {
+        width: 3.9375rem;
+        height: 3rem;
+        padding: 0.4rem 0.8rem;
+        border: 1px solid #4d75d9;
+        border-radius: 0.375rem;
+        background-color: #fff;
+        cursor: pointer;
+        font-size: 0.875rem;
+        color: #4d75d9;
+        box-shadow: inset 0 1px 3px #00000040;
+      }
+    }
+  }
+}