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

package/src/helpers/layout.helper.ts

@@ -61,8 +61,10 @@ export const transformPathsToArray = (paths: OpenAPIFile['paths']): TransformedP
         summary: methodProps.summary || '',
         responses: Object.entries(methodProps.responses).map(([code, codeProps]) => {
           const contentType = Object.keys(codeProps.content || {})[0]
+          const headers = !codeProps?.headers ? {} : codeProps.headers
           return {
             code,
+            headers,
             content: {
               contentType,
               schema: {
@@ -78,6 +80,8 @@ export const transformPathsToArray = (paths: OpenAPIFile['paths']): TransformedP
         obj.parameters = []
       }
 
+      // load response headers parameters
+
       if (method.toLowerCase() != 'get') {
         const contentType = Object.keys(methodProps?.requestBody?.content || {})[0]
         const reqSchema = methodProps?.requestBody?.content?.schema
@@ -103,7 +107,6 @@ export const transformPathsToArray = (paths: OpenAPIFile['paths']): TransformedP
 
         obj['requestBody'] = requestBodyData
       }
-
       return obj
     }),
   }))
@@ -112,6 +115,9 @@ export const transformPathsToArray = (paths: OpenAPIFile['paths']): TransformedP
 }
 
 const validateBodyForResponse = (content, method) => {
+  if (!(content?.schema as any) || !(content?.schema as any)?.properties) {
+    return {}
+  }
   let _content = JSON.parse((content?.schema as any)?.properties as string)
   // if (method == 'get') {
   //   if (!_content?.body) {
@@ -132,7 +138,17 @@ export const transformPathsArrayToOrigin = (paths: TransformedPathsArray): OpenA
           ...rest,
           tags,
           summary,
-          responses: responses.reduce((respAcc, { code, content }) => {
+          responses: responses.reduce((respAcc, { code, content, headers }) => {
+            const formattedHeaders: Record<string, any> = {}
+            if (headers) {
+              for (const [key, value] of Object.entries(headers)) {
+                formattedHeaders[key] = {
+                  description: value.description || '',
+                  required: value.required || false,
+                  schema: value.schema || {},
+                }
+              }
+            }
             respAcc[code] = {
               description: 'Success', // Assuming this is static from the original data
               content: content.contentType
@@ -145,6 +161,7 @@ export const transformPathsArrayToOrigin = (paths: TransformedPathsArray): OpenA
                     },
                   }
                 : {},
+              headers: formattedHeaders,
             }
             return respAcc
           }, {} as Record<string, any>),

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

@@ -1,8 +1,93 @@
-import React from 'react'
-import './style.scss'
+import React, { useState } from 'react'
+import { EndpointData } from 'src/layout/docsLayout'
+import Codebox from '../Codebox/Codebox'
+import { Option, SelectGroup } from 'digitinary-ui'
+import { httpStatusCodes } from '../../../constants/index'
+import { handleStatusColor } from '../../../helpers/methodAccordion.helper'
+import styles from './style.module.scss'
 
-const DocsAside = () => {
-  return <aside className="api-docs-aside"></aside>
+const httpStatusCodeOptions: Option[] = httpStatusCodes.map((code) => ({
+  label: (
+    <div className={styles.statusCodeOptionContainer}>
+      <div
+        className={styles.statusCodeOptionCircle}
+        style={{ backgroundColor: handleStatusColor(code) }}
+      ></div>
+      <span>{code}</span>
+    </div>
+  ),
+  value: String(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) => 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

@@ -4,10 +4,32 @@ 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 = () => {
-  const isTagPage = false
-  return <main>{isTagPage ? <TagPage /> : <EndpointPage />}</main>
+const DocsContent = ({
+  data,
+  activeType,
+  setActiveItemData,
+  setActiveType,
+  setExpandedSections,
+}: {
+  data: OverviewData | EndpointData
+  activeType: 'OVERVIEW' | 'ENDPOINT'
+}) => {
+  return (
+    <main>
+      {activeType === 'OVERVIEW' ? (
+        <TagPage
+          data={data}
+          setActiveItemData={setActiveItemData}
+          setActiveType={setActiveType}
+          setExpandedSections={setExpandedSections}
+        />
+      ) : (
+        <EndpointPage data={data} />
+      )}
+    </main>
+  )
 }
 
 export default DocsContent