@digi-frontend/dgate-api-documentation 1.0.39 → 1.0.50

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

@@ -0,0 +1,230 @@
+main {
+  padding: 2rem;
+
+  .api-details-expanded {
+    .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-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;
+    }
+
+    .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;
+    }
+
+    .tab {
+      display: flex;
+      align-items: center;
+      gap: 0.375rem;
+    }
+    .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;
+    }
+
+    .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/TagPage/index.tsx

@@ -0,0 +1,82 @@
+import './style.scss'
+import SVGLoader from '../../../../components/SVGLoader/SVGLoader'
+import { arrowRightGray, CopySticker } from '../../../../assets/icons/index'
+import { OverviewData } from 'src/layout/docsLayout'
+
+export const TagPage = ({ data }) => {
+  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="https://apigw-sdb-1.test.dgate.digitinary.net/test" readOnly />
+          <span
+            className="icon"
+            onClick={() =>
+              navigator.clipboard.writeText('https://apigw-sdb-1.test.dgate.digitinary.net/test')
+            }
+          >
+            <SVGLoader src={CopySticker} />
+          </span>
+        </div>
+      </div>
+
+      <p className="api-desc">API Description</p>
+      <div className="api-product-tag">
+        Product with this API <span className="product-tag">Product 01</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" 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, 17)}
+                        {(endpoint.summary?.length ?? 0) > 17 && '...'}
+                      </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>
+      ))}
+
+      <div className="versions-section">
+        <h4>API Versions</h4>
+        <div className="version-list">
+          {['1.2.0', '1.3.0', '1.4.0', '1.5.0', '2.2.0'].map((ver) => (
+            <button key={ver} className="version-btn">
+              {ver}
+            </button>
+          ))}
+        </div>
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,283 @@
+.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;
+    }
+  }
+
+  .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: 1.5rem;
+        align-items: flex-start;
+
+        .title-wrapper {
+          flex: 1;
+          width: 8rem;
+          min-width: 0;
+        }
+
+        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;
+      }
+    }
+  }
+}