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

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/Codebox/Codebox.tsx

@@ -0,0 +1,61 @@
+import React, { useState } from 'react'
+import { Light as SyntaxHighlighter } from 'react-syntax-highlighter'
+import {
+  stackoverflowDark,
+  stackoverflowLight,
+} from 'react-syntax-highlighter/dist/esm/styles/hljs'
+import styles from './style.module.scss'
+import SVGLoader from '../../../components/SVGLoader/SVGLoader'
+import { Copy } from '../../../assets/icons'
+import { copyToClipboard } from '../../../utils'
+
+const Codebox = ({ code }: { code: string }) => {
+  const [theme, setTheme] = useState<'LIGHT' | 'DARK'>('DARK')
+
+  return (
+    <div className={styles.codebox}>
+      <div className={styles.codebox_header}>
+        <div
+          role="button"
+          tabIndex={-1}
+          onClick={() => theme !== 'LIGHT' && setTheme('LIGHT')}
+          className={`${styles.codebox_header_themeToggle} ${styles.codebox_header_themeToggle_light}`}
+          title="Light theme"
+        ></div>
+        <div
+          role="button"
+          tabIndex={-1}
+          onClick={() => theme !== 'DARK' && setTheme('DARK')}
+          className={`${styles.codebox_header_themeToggle} ${styles.codebox_header_themeToggle_dark}`}
+          title="Dark theme"
+        ></div>
+        <SVGLoader
+          src={Copy}
+          width="0.75rem"
+          height="0.75rem"
+          className={styles.codebox_header_copyIcon}
+          onClick={() => copyToClipboard(code)}
+        />
+      </div>
+      <SyntaxHighlighter
+        language="json"
+        style={theme === 'LIGHT' ? stackoverflowLight : stackoverflowDark}
+        showLineNumbers
+        wrapLines
+        customStyle={{
+          margin: 0,
+          height: '13.75rem',
+          overflowY: 'auto',
+          padding: '0.75rem 1rem 0 1.5rem',
+          backgroundColor: theme === 'DARK' ? '#455162' : '#F7F7F7',
+          fontSize: '0.75rem',
+        }}
+        lineProps={{ className: 'custom-code-line' }}
+      >
+        {code}
+      </SyntaxHighlighter>
+    </div>
+  )
+}
+
+export default Codebox

package/src/layout/docsComponents/Codebox/style.module.scss

@@ -0,0 +1,43 @@
+.codebox {
+  border-radius: 0.25rem;
+  overflow: hidden;
+
+  &_header {
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+    padding-left: 0.5rem;
+    height: 1.75rem;
+    border: 1px solid #bbbec5;
+    border-top-right-radius: 0.25rem;
+    border-top-left-radius: 0.25rem;
+
+    &_themeToggle {
+      width: 0.75rem;
+      min-width: 0.75rem;
+      aspect-ratio: 1 / 1;
+      border: 1px solid transparent;
+      border-radius: 100%;
+      cursor: pointer;
+
+      &_dark {
+        background-color: #455162;
+        border-color: #6b7280;
+      }
+
+      &_light {
+        background-color: #edf1fb;
+        border-color: #6b7280;
+      }
+    }
+
+    &_copyIcon {
+      cursor: pointer;
+    }
+  }
+
+  :global(.custom-code-line),
+  :global(.custom-code-line span) {
+    font-family: 'Cascadia Code', sans-serif;
+  }
+}

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

@@ -0,0 +1,94 @@
+import React, { useState } from 'react'
+import { EndpointData } from 'src/layout/docsLayout'
+import Codebox from '../Codebox/Codebox'
+import { SelectGroup } from 'digitinary-ui'
+import { httpStatusCodes } from '../../../constants/index'
+import { handleStatusColor } from '../../../helpers/methodAccordion.helper'
+import styles from './style.module.scss'
+
+const httpStatusCodeOptions = httpStatusCodes.map((code) => ({
+  label: (
+    <div className={styles.statusCodeOptionContainer}>
+      <div
+        className={styles.statusCodeOptionCircle}
+        style={{ backgroundColor: handleStatusColor(code) }}
+      ></div>
+      <span>{code}</span>
+    </div>
+  ),
+  value: code,
+}))
+
+const DocsAside = ({ data }: { data: EndpointData }) => {
+  const [selectedResStatusCode, setSelectedResStatusCode] = useState(httpStatusCodeOptions[4])
+  const currentResponse =
+    Object.entries(data.responses)
+      .map(([code, data]) => ({ code, data }))
+      .find((res) => Number(res.code) === selectedResStatusCode.value) || '{}'
+
+  const stringifyRequestBody = () => {
+    if (data?.requestBody?.content) {
+      const contentKey = Object.keys(data?.requestBody?.content)[0]
+      return JSON.stringify(data?.requestBody?.content[contentKey], null, 2)
+    } else {
+      return '{}'
+    }
+  }
+
+  const stringifyResponseBody = () => {
+    if (currentResponse?.data) {
+      const contentKey = Object.keys(currentResponse.data?.content)[0]
+      return JSON.stringify(currentResponse.data?.content[contentKey], null, 2)
+    } else {
+      return '{}'
+    }
+  }
+
+  return (
+    <aside className={styles.apiDocsAside}>
+      <h2 className={styles.apiDocsAside_title}>{data.summary}</h2>
+      <h4 className={styles.apiDocsAside_subtitle}>
+        <span className={styles.apiDocsAside_subtitle_method} data-method={data.method}>
+          {data.method}
+        </span>{' '}
+        <span>{data.path}</span>
+      </h4>
+      {data?.requestBody?.content && (
+        <div className={styles.codeboxSection}>
+          <div className={styles.codeboxHeader}>
+            <h6 className={styles.codeboxTitle}>Request</h6>
+          </div>
+
+          <Codebox code={stringifyRequestBody()} />
+        </div>
+      )}
+      {Object.keys(data?.responses || {})?.length > 0 && (
+        <div className={styles.codeboxSection}>
+          <div className={`${styles.codeboxHeader}`}>
+            <h6 className={styles.codeboxTitle}>Response</h6>
+            <SelectGroup
+              size="small"
+              withSearch={false}
+              isMultiple={false}
+              clearable={false}
+              placeholder="200"
+              options={[
+                {
+                  list: httpStatusCodeOptions,
+                },
+              ]}
+              value={selectedResStatusCode}
+              onChange={(value) => {
+                setSelectedResStatusCode(value)
+              }}
+            />
+          </div>
+
+          <Codebox code={stringifyResponseBody()} />
+        </div>
+      )}
+    </aside>
+  )
+}
+
+export default DocsAside

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

@@ -0,0 +1,113 @@
+.apiDocsAside {
+  width: 22.5rem;
+  padding: 3rem 1.5rem;
+  background-color: #f0f1f2;
+
+  &_title {
+    font-size: 1.5rem;
+    line-height: 2rem;
+    font-weight: 600;
+    color: #12131a;
+    margin-bottom: 0.5rem;
+  }
+
+  &_subtitle {
+    margin-bottom: 2rem;
+
+    > span {
+      font-size: 1.25rem;
+      line-height: 1.75rem;
+      font-weight: 400;
+    }
+
+    &_method {
+      &[data-method='get'] {
+        color: #3a6cd1;
+      }
+
+      &[data-method='post'] {
+        color: #3aaa35;
+      }
+
+      &[data-method='put'] {
+        color: #faad14;
+      }
+
+      &[data-method='delete'] {
+        color: #da3f3f;
+      }
+
+      &[data-method='option'] {
+        color: #495d97;
+      }
+
+      &[data-method='head'] {
+        color: #9461c9;
+      }
+
+      &[data-method='patch'] {
+        color: #58e2c2;
+      }
+    }
+  }
+
+  .codeboxSection {
+    .codeboxHeader {
+      height: 2rem;
+      display: flex;
+      justify-content: space-between;
+      margin-bottom: 0.25rem;
+
+      h6 {
+        font-size: 1rem;
+        line-height: 1.25rem;
+        font-weight: 500;
+        color: #616874;
+      }
+    }
+
+    &:nth-of-type(2) {
+      margin-top: 3rem;
+    }
+
+    :global(.multiSelectGroup) {
+      :global(.selectDisplay) {
+        padding: 0;
+
+        :global(.select-label-container) {
+          min-width: 100%;
+          padding: 0;
+        }
+      }
+
+      :global(.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%;
+        }
+      }
+    }
+  }
+
+  :global(.multiSelectGroup .selectDisplay),
+  :global(.multiSelectGroup) {
+    width: 6.25rem;
+    height: 1.5rem;
+  }
+
+  :global(.multiSelectGroup .selectDisplay .displayValueContainer .iconsContainer) {
+    padding-right: 0.75rem;
+  }
+}

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

@@ -0,0 +1,14 @@
+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'
+import { EndpointData, OverviewData } from 'src/layout/docsLayout'
+
+const DocsContent = ({ data }: { data: OverviewData | EndpointData }) => {
+  const isTagPage = false
+  return <main>{!isTagPage ? <TagPage data={data} /> : <EndpointPage data={data} />}</main>
+}
+
+export default DocsContent

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

@@ -0,0 +1,184 @@
+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'
+import { EndpointData } from 'src/layout/docsLayout'
+
+export const EndpointPage = ({ data }) => {
+  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>
+  )
+}