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

package/src/helpers/methodAccordion.helper.ts

@@ -1,20 +1,20 @@
-export const handleStatusColor = (code: number): string => {
-  if (code >= 200 && code < 300) {
-    return 'green' // 2xx codes
-  } else if (code >= 400 && code < 500) {
-    return 'red' // 4xx codes
-  } else if (code >= 500 && code < 600) {
-    return 'red' // 5xx codes
-  } else if (code >= 100 && code < 200) {
-    return 'blue' // 1xx codes (Informational)
-  } else if (code >= 300 && code < 400) {
-    return 'orange' // 3xx codes (Redirection)
-  } else {
-    return 'gray' // Default or invalid status codes
-  }
-}
-
-export const  capitalize = (str)=> {
-  if (!str) return "";
-  return str.charAt(0).toUpperCase() + str.slice(1);
+export const handleStatusColor = (code: number): string => {
+  if (code >= 200 && code < 300) {
+    return 'green' // 2xx codes
+  } else if (code >= 400 && code < 500) {
+    return 'red' // 4xx codes
+  } else if (code >= 500 && code < 600) {
+    return 'red' // 5xx codes
+  } else if (code >= 100 && code < 200) {
+    return 'blue' // 1xx codes (Informational)
+  } else if (code >= 300 && code < 400) {
+    return 'orange' // 3xx codes (Redirection)
+  } else {
+    return 'gray' // Default or invalid status codes
+  }
+}
+
+export const  capitalize = (str)=> {
+  if (!str) return "";
+  return str.charAt(0).toUpperCase() + str.slice(1);
 }

package/src/index.ts

@@ -1 +1,2 @@
-export { default as Layout } from './layout/layout'
+export { default as Layout } from './layout/layout'
+export { default as DocsLayout } from './layout/docsLayout'

package/src/layout/docsComponents/DocsAside/DocsAside.tsx

@@ -0,0 +1,8 @@
+import React from 'react'
+import './style.scss'
+
+const DocsAside = () => {
+  return <aside className="api-docs-aside"></aside>
+}
+
+export default DocsAside

package/src/layout/docsComponents/DocsAside/style.scss

@@ -0,0 +1,3 @@
+.api-docs-aside {
+  background-color: #f0f1f2;
+}

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

@@ -0,0 +1,13 @@
+import React from 'react'
+import './style.scss'
+import SVGLoader from '../../../components/SVGLoader/SVGLoader'
+import { CopySticker } from '../../../assets/icons/index'
+import { TagPage } from './TagPage'
+import { EndpointPage } from './EndpointPage'
+
+const DocsContent = () => {
+  const isTagPage = false
+  return <main>{isTagPage ? <TagPage /> : <EndpointPage />}</main>
+}
+
+export default DocsContent

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

@@ -0,0 +1,183 @@
+import './style.scss'
+import SVGLoader from '../../../../components/SVGLoader/SVGLoader'
+import {
+  ArrowBack,
+  CopySticker,
+  DownArrowIcon,
+  RequestOption,
+} from '../../../../assets/icons/index'
+import { ArrowIcon, SelectGroup } from 'digitinary-ui'
+import { useState } from 'react'
+
+export const EndpointPage = () => {
+  const [expanded, setExpanded] = useState(null)
+
+  const requestTableData = [
+    {
+      name: 'Parameter Name',
+      required: 'True',
+      type: 'String',
+      enum: 'Active/Expired/Cancelled',
+      description:
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit, Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit, Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
+    },
+    {
+      name: 'Parameter Name',
+      required: 'False',
+      type: 'Boolean',
+      enum: 'Active/Expired/Cancelled',
+      description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.sssssss',
+    },
+    {
+      name: 'Parameter Name',
+      required: 'True',
+      type: 'Object',
+      enum: '-',
+      description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.sssssss',
+    },
+    {
+      name: 'Parameter Name',
+      required: 'True',
+      type: 'Array_String',
+      enum: '-',
+      description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.sssssss',
+    },
+  ]
+
+  return (
+    <div className="api-details-expanded">
+      <div className="test-button">
+        <button className="back-button" onClick={() => window.history.back()}>
+          <SVGLoader src={ArrowBack} />
+        </button>
+
+        <button className="disabled">Test</button>
+      </div>
+      <h3> Api Name</h3>
+      <h1 className="api-title">Endpoint Name</h1>
+      <div className="url-box">
+        <div style={{ textAlign: 'center' }}>
+          <span className="method-label post">Post</span>
+          <span className="url-text">https://apigw sdb-1.test.dgate.digitinary.net/test</span>
+        </div>
+
+        <SVGLoader src={CopySticker} className="copy-icon" />
+      </div>
+
+      <p className="api-desc">Endpoint Description</p>
+
+      <h3>Request</h3>
+
+      <div className="request-section">
+        <div className="request-tabs">
+          <button className="tab">
+            <SVGLoader src={RequestOption} className="icon-left" />
+            Header
+          </button>
+          <button className="tab">
+            <SVGLoader src={RequestOption} className="icon-left" />
+            Path
+          </button>
+          <button className="tab">
+            <SVGLoader src={RequestOption} className="icon-left" />
+            Query
+          </button>
+          <button className="tab">
+            <SVGLoader src={RequestOption} className="icon-left" />
+            Request Body
+          </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>
+              {requestTableData.map((row, index) => (
+                <tr key={index}>
+                  <td>{row.name}</td>
+                  <td>{row.required}</td>
+                  <td>{row.type}</td>
+                  <td>{row.enum}</td>
+                  <td className="desc-cell">
+                    <div className={`desc-text ${expanded === index ? 'expanded' : ''}`}>
+                      {row.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">
+        <div className="response-drop-test">
+          <SelectGroup
+            className="response-drop"
+            withSearch={false}
+            isMultiple={false}
+            clearable={false}
+            placeholder="200"
+            options={[]}
+            //value={selectedStatusCode}
+            onChange={(value) => {
+              // setSelectedStatusCode(value)
+            }}
+          />
+        </div>
+
+        <h3>Response</h3>
+        <button className="tab">
+          <SVGLoader src={RequestOption} className="icon-left" />
+          Header
+        </button>
+
+        <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>
+              <tr>
+                <td>Parameter Name</td>
+                <td>True</td>
+                <td>String</td>
+                <td>Active/Expired/Cancelled</td>
+                <td>Borem taciti dolor ...</td>
+              </tr>
+              <tr>
+                <td>Parameter Name</td>
+                <td>True</td>
+                <td>Array_Object</td>
+                <td>-</td>
+                <td>Borem taciti dolor ...</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+  )
+}

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,111 @@
+import './style.scss'
+import SVGLoader from '../../../../components/SVGLoader/SVGLoader'
+import { CopySticker } from '../../../../assets/icons/index'
+
+export const TagPage = () => {
+  return (
+    <div className="api-details-page">
+      <h2 className="welcome">Welcome to</h2>
+      <h1 className="api-title">API Name</h1>
+      <p className="api-version">
+        API Version: <span>2.3.0</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>
+
+      <div className="endpoint-group">
+        <h4 className="tag-title">Tag 01</h4>
+        <div className="endpoint-list">
+          <div className="endpoint-card">
+            <div className="endpoint-card-header">
+              <span className="method-label get">GET</span>
+              <h5>Endpoint Name</h5>
+            </div>
+
+            <div className="endpoint-meta">
+              <p>/auth/login/</p>
+              <p className="description">Login endpoint</p>
+            </div>
+          </div>
+          <div className="endpoint-card">
+            <div className="endpoint-card-header">
+              <span className="method-label patch">PATCH</span>
+              <h5>Endpoint Name</h5>
+            </div>
+            <div className="endpoint-meta">
+              <p>/auth/login/</p>
+              <p className="description">Update login info</p>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div className="endpoint-group">
+        <h4 className="tag-title">Tag 02</h4>
+        <div className="endpoint-list">
+          <div className="endpoint-card">
+            <div className="endpoint-card-header">
+              <span className="method-label post">POST</span>
+              <h5>Endpoint Name</h5>
+            </div>
+            <div className="endpoint-meta">
+              <p>/auth/login/</p>
+              <p className="description">Create login session</p>
+            </div>
+          </div>
+          <div className="endpoint-card">
+            <div className="endpoint-card-header">
+              <span className="method-label put">PUT</span>
+              <h5>Endpoint Name</h5>
+            </div>
+            <div className="endpoint-meta">
+              <p>/auth/login/</p>
+              <p className="description">Replace login session</p>
+            </div>
+          </div>
+          <div className="endpoint-card">
+            <div className="endpoint-card-header">
+              <span className="method-label delete">DELETE</span>
+              <h5>Endpoint Name</h5>
+            </div>
+            <div className="endpoint-meta">
+              <p>/auth/login/</p>
+              <p className="description">Delete login session</p>
+            </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>
+  )
+}