@digi-frontend/dgate-api-documentation 1.0.83 → 1.0.85

package/dist/styles.css

@@ -1583,11 +1583,14 @@ div.endBtnIcon {
   font-size: 1rem;
   line-height: 1.25rem;
 }
+.api_docs_header .search_filter_btn .btnContentWrapper .btnContent {
+  font-size: 0.918rem !important;
+}
 .api_docs_header .search_filter_btn:hover:not(:disabled) {
   color: #000000 !important;
 }
 .api_docs_header .search_filter_btn:hover {
-  color: #000;
+  color: #000 !important;
 }
 .api_docs_header .search_filter_btn svg {
   margin-left: 0.5rem;
@@ -1617,12 +1620,15 @@ div.endBtnIcon {
   border: none !important;
   box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
   padding: 0.4rem;
-  width: 9.4875rem;
+  width: 10.4875rem;
   font-size: 1rem;
   font-weight: 400;
   line-height: 1.234rem;
   height: 2.25rem;
 }
+.api_docs_header .api_btn .btnContentWrapper .btnContent {
+  font-size: 0.918rem !important;
+}
 .api_docs_header .api_btn:hover:not(:disabled) {
   color: #000000 !important;
 }
@@ -2253,60 +2259,70 @@ main .api-details-expanded h3 {
   margin-bottom: 0.5rem;
 }
 main .api-details-expanded .url-box {
-  height: 1.75rem;
-  justify-content: space-between;
-  background-color: #edf1fb !important;
+  background-color: #edf1fb;
+  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;
+  overflow: hidden;
+}
+main .api-details-expanded .url-box_text-container {
+  display: flex;
+  align-items: center;
+  flex: 1;
+  overflow: hidden;
 }
-main .api-details-expanded .url-text {
+main .api-details-expanded .url-box_text-container .url-text {
   color: #3b3f46;
   font-size: 1.25rem;
-  letter-spacing: 0px;
   line-height: 1.75rem;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  flex: 1;
 }
-main .api-details-expanded .method-label {
-  font-size: 0.924rem;
-  font-weight: 600;
+main .api-details-expanded .url-box_text-container .method-label {
+  font-size: 1.25rem;
   padding: 0.125rem 0.5rem;
   border-radius: 0.375rem;
   text-transform: uppercase;
   color: #3aaa35;
   text-decoration: underline;
 }
-main .api-details-expanded .method-label.get {
+main .api-details-expanded .url-box_text-container .method-label.get {
   color: #3a6cd1;
 }
-main .api-details-expanded .method-label.post {
+main .api-details-expanded .url-box_text-container .method-label.post {
   color: #3aaa35;
 }
-main .api-details-expanded .method-label.put {
+main .api-details-expanded .url-box_text-container .method-label.put {
   color: #faad14;
 }
-main .api-details-expanded .method-label.patch {
+main .api-details-expanded .url-box_text-container .method-label.patch {
   color: #58e2c2;
 }
-main .api-details-expanded .method-label.delete {
+main .api-details-expanded .url-box_text-container .method-label.delete {
   color: #da3f3f;
 }
-main .api-details-expanded .method-label.head {
+main .api-details-expanded .url-box_text-container .method-label.head {
   color: #9461c9;
 }
-main .api-details-expanded .method-label.trace {
+main .api-details-expanded .url-box_text-container .method-label.trace {
   color: #ffa28f;
 }
-main .api-details-expanded .method-label.options {
+main .api-details-expanded .url-box_text-container .method-label.options {
   color: #495d97;
 }
-main .api-details-expanded .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;
+main .api-details-expanded .url-box .copy-icon {
+  cursor: pointer;
+  width: 1.5rem;
+  height: 1.5rem;
 }
 main .api-details-expanded .api-desc {
   color: #6b7280;
@@ -2427,9 +2443,4 @@ main .api-details-expanded .response-drop-test {
   justify-content: end !important;
   align-items: end !important;
   align-content: end !important;
-}
-main .api-details-expanded .copy-icon {
-  cursor: pointer;
-  width: 1.5rem;
-  height: 1.5rem;
 }

package/dist/types/helpers/layout.helper.d.ts

@@ -3,5 +3,5 @@ import { OpenAPIFile } from '@entities/openApi';
 import { TransformedOpenApi } from '@entities/transformedOpenApi';
 export declare const transformOpenApiObject: (openApiJson: OpenAPIFile) => TransformedOpenApi;
 export declare const transformOpenApiObjectToOrigin: (values: TransformedOpenApi) => OpenAPIFile;
-export declare const transformPathsToArray: (paths: OpenAPIFile["paths"]) => TransformedPathsArray | any;
+export declare const transformPathsToArray: (openApiJson: OpenAPIFile) => TransformedPathsArray | any;
 export declare const transformPathsArrayToOrigin: (paths: TransformedPathsArray) => OpenAPIFile["paths"];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@digi-frontend/dgate-api-documentation",
-  "version": "1.0.83",
+  "version": "1.0.85",
   "main": "dist/src/index.js",
   "module": "dist/src/index.js",
   "types": "dist/types/index.d.ts",

package/src/components/MethodAccordion/MethodAccordion.tsx

@@ -76,6 +76,7 @@ const MethodsAccordion = ({
   const [enumFields, setEnumFields] = useState([])
   const [tooltipEnumRef, setTooltipEnumRef] = useState(null)
   const [currentResponseIndex, setCurrentResponseIndex] = useState<number>(-1)
+  const activeAccordionRef = useRef<HTMLDivElement | null>(null)
   const currentResponse =
     method.responses.find((res) => Number(res.code) === selectedStatusCode.value) || '{}'
   const indexRef = useRef(-1)
@@ -91,6 +92,12 @@ const MethodsAccordion = ({
     setTableData(newTableData)
   }
 
+  useEffect(() => {
+    if (isOpen && activeAccordionRef.current) {
+      activeAccordionRef.current.scrollIntoView({ behavior: 'smooth', block: 'start' })
+    }
+  }, [isOpen])
+
   const generateResponseTableData = (headersObj: any, responseIndex: number) => {
     const headersByName = Object.keys(headersObj)
     return headersByName.map((item, index) => {
@@ -721,7 +728,7 @@ const MethodsAccordion = ({
   }, [tags, method])
 
   return (
-    <div>
+    <div ref={activeAccordionRef}>
       <Accordion
         expanded={isOpen}
         onChange={() => setIsOpen(!isOpen)}

package/src/components/table/table.tsx

@@ -224,9 +224,9 @@ const ParamterTable = ({
                           value: values.schema?.items?.type,
                         }}
                         errorMsg={!!errors?.schema?.items?.type && errors?.schema?.items?.type}
-                        onChange={(item) =>
+                        onChange={(item) => {
                           setFieldValue('schema.items.type', item?.value?.toLowerCase())
-                        } // Updates state on selection
+                        }} // Updates state on selection
                         options={[
                           {
                             list: [

package/src/helpers/layout.helper.ts

@@ -2,6 +2,11 @@ import { TransformedPathsArray } from '@entities/layout.type'
 import { OpenAPIFile, SecurityScheme } from '@entities/openApi'
 import { TransformedOpenApi } from '@entities/transformedOpenApi'
 
+const resolveRef = (ref: string, openApiJson: OpenAPIFile): Object => {
+  const parts = ref.replace(/^#\//, '').split('/')
+  return parts.reduce((obj, key) => obj?.[key], openApiJson)
+}
+
 export const transformOpenApiObject = (openApiJson: OpenAPIFile): TransformedOpenApi => {
   if (openApiJson.components && openApiJson.components.securitySchemes) {
     const authKey = Object.keys(openApiJson.components.securitySchemes)?.at(0)
@@ -17,6 +22,7 @@ export const transformOpenApiObject = (openApiJson: OpenAPIFile): TransformedOpe
           scheme: 'public',
         },
       },
+      ...(openApiJson.components || {}),
     }
   }
 
@@ -26,7 +32,7 @@ export const transformOpenApiObject = (openApiJson: OpenAPIFile): TransformedOpe
 
   return {
     ...openApiJson,
-    paths: transformPathsToArray(openApiJson.paths),
+    paths: transformPathsToArray(openApiJson),
   } as TransformedOpenApi
 }
 
@@ -50,7 +56,8 @@ export const transformOpenApiObjectToOrigin = (values: TransformedOpenApi): Open
   return object
 }
 
-export const transformPathsToArray = (paths: OpenAPIFile['paths']): TransformedPathsArray | any => {
+export const transformPathsToArray = (openApiJson: OpenAPIFile): TransformedPathsArray | any => {
+  const paths: OpenAPIFile['paths'] = openApiJson.paths
   const transformedPaths = Object.entries(paths).map(([path, methods]) => ({
     path,
     methods: Object.entries(methods).map(([method, methodProps]) => {
@@ -61,20 +68,55 @@ 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
+          let headers = codeProps?.headers ?? {}
+
+          // ? Fix headers with items property
+          Object.keys(headers).map((header: string) => {
+            let headerObj = headers[header]
+            if (
+              headerObj?.schema &&
+              headerObj?.schema?.type &&
+              headerObj?.schema?.type != 'array'
+            ) {
+              delete headers[header]?.schema?.items
+            }
+          })
+
+          let schema = codeProps.content?.[contentType]?.schema
+          if (schema?.$ref) {
+            schema = resolveRef(schema?.$ref, openApiJson)
+          } else if (schema?.type == 'array' && schema?.items?.$ref) {
+            const resolvedItemSchema = resolveRef(schema.items.$ref, openApiJson)
+            schema = {
+              ...schema,
+              items: resolvedItemSchema,
+            }
+          }
+
           return {
             code,
             headers,
             content: {
               contentType,
               schema: {
-                ...codeProps.content?.[contentType]?.schema,
-                properties: JSON.stringify(codeProps.content?.[contentType]?.schema?.properties),
+                ...schema,
+                properties: JSON.stringify(schema?.properties || schema?.items?.properties),
               },
             },
           }
         }),
       }
+
+      if (!obj.responses.find((item) => item.code == '200')) {
+        obj.responses.push({
+          code: '200',
+          content: {
+            contentType: 'application/json',
+            schema: {},
+          },
+          headers: {},
+        })
+      }
       // Add parameters if it does not exist in the original JSON
       if (!methodProps?.parameters) {
         obj.parameters = []
@@ -84,14 +126,24 @@ export const transformPathsToArray = (paths: OpenAPIFile['paths']): TransformedP
 
       if (method.toLowerCase() != 'get') {
         const contentType = Object.keys(methodProps?.requestBody?.content || {})[0]
-        const reqSchema = methodProps?.requestBody?.content?.schema
-        const requestBodyData = methodProps?.requestBody?.content?.schema?.properties
+        let reqSchema = methodProps?.requestBody?.content?.[contentType]?.schema
+
+        if (reqSchema?.$ref) {
+          reqSchema = resolveRef(reqSchema.$ref, openApiJson)
+        } else if (reqSchema?.type === 'array' && reqSchema.items?.$ref) {
+          reqSchema = {
+            ...reqSchema,
+            items: resolveRef(reqSchema.items.$ref, openApiJson),
+          }
+        }
+
+        const requestBodyData = reqSchema
           ? {
               content: {
                 contentType,
                 schema: {
                   ...reqSchema,
-                  properties: reqSchema?.properties ? JSON.stringify(reqSchema?.properties) : '{}',
+                  properties: JSON.stringify(reqSchema?.properties || reqSchema?.items?.properties),
                 },
               },
             }
@@ -128,8 +180,18 @@ export const transformPathsArrayToOrigin = (paths: TransformedPathsArray): OpenA
     acc[path] = methods.reduce(
       (methodAcc, { type, tags, responses, summary, requestBody, ...rest }) => {
         // Initialize the method object
+        // ? Validate (rest) [parameters]
+        let copiedRest = structuredClone(rest || {})
+        if (copiedRest && copiedRest.parameters) {
+          copiedRest.parameters.map((param) => {
+            if (param && param?.schema?.items && param?.schema?.items?.type == 'array') {
+              param.schema.items.items = {}
+            }
+            return param
+          })
+        }
         methodAcc[type] = {
-          ...rest,
+          ...copiedRest,
           tags,
           summary,
           responses: responses.reduce((respAcc, { code, content, headers }) => {

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

@@ -6,7 +6,7 @@ import {
   RequestOption,
 } from '../../../../assets/icons/index'
 import { SelectGroup } from 'digitinary-ui'
-import { useEffect, useState } from 'react'
+import { useEffect, useMemo, useState } from 'react'
 import { EndpointData, OverviewData } from 'src/layout/docsLayout'
 import { handleStatusColor } from '../../../../helpers/methodAccordion.helper'
 import { httpStatusCodes } from '../../../../constants/index'
@@ -27,6 +27,13 @@ export const EndpointPage = ({
 }) => {
   const [activeTab, setActiveTab] = useState('header')
   const { toggleSection } = useSectionToggle()
+  const fullUrl = useMemo(() => {
+    // env gateway url + api version(if appended) + context path
+    const url = data.api?.servers?.filter((s) => s.url !== '/')[0]?.url
+    const pathParts = data?.path.split('/').slice(2) // slice from index 2 to skip the first empty "" and "comments"
+    const fullPath = !!pathParts?.length ? '/' + pathParts.join('/') : '' // this will contain the full path without the context path
+    return `${url}${fullPath}`
+  }, [data])
 
   const httpStatusCodeOptions = httpStatusCodes.map((code) => ({
     label: (
@@ -81,11 +88,11 @@ export const EndpointPage = ({
       <h3>{data.api.title}</h3>
       <h1 className="api-title">{data?.summary}</h1>
       <div className="url-box">
-        <div style={{ textAlign: 'center' }}>
+        <div className="url-box_text-container">
           <span className={`method-label ${data?.method?.toLowerCase()}`}>{data.method}</span>
-          <span className="url-text">{data?.path}</span>
+          <span className="url-text">{fullUrl}</span>
         </div>
-        <span className="icon" onClick={() => navigator.clipboard.writeText(data?.path)}>
+        <span className="copy-icon" onClick={() => navigator.clipboard.writeText(fullUrl)}>
           <SVGLoader src={CopySticker} />
         </span>
       </div>

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

@@ -101,55 +101,7 @@ main {
     }
 
     .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;
-
-      &.get {
-        color: #3a6cd1;
-      }
-      &.post {
-        color: #3aaa35;
-      }
-      &.put {
-        color: #faad14;
-      }
-      &.patch {
-        color: #58e2c2;
-      }
-      &.delete {
-        color: #da3f3f;
-      }
-      &.head {
-        color: #9461c9;
-      }
-      &.trace {
-        color: #ffa28f;
-      }
-      &.options {
-        color: #495d97;
-      }
-    }
-
-    .url-box {
-      background-color: #f3f4f6;
+      background-color: #edf1fb;
       padding: 0.375rem 0.75rem;
       border-radius: 0.5rem;
       display: flex;
@@ -159,6 +111,65 @@ main {
       flex: 1;
       height: 2.8rem;
       margin-bottom: 1.5rem;
+      overflow: hidden;
+
+      &_text-container {
+        display: flex;
+        align-items: center;
+        flex: 1;
+        overflow: hidden;
+
+        .url-text {
+          color: #3b3f46;
+          font-size: 1.25rem;
+          line-height: 1.75rem;
+          max-width: 100%;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          flex: 1;
+        }
+
+        .method-label {
+          font-size: 1.25rem;
+          padding: 0.125rem 0.5rem;
+          border-radius: 0.375rem;
+          text-transform: uppercase;
+          color: #3aaa35;
+          text-decoration: underline;
+
+          &.get {
+            color: #3a6cd1;
+          }
+          &.post {
+            color: #3aaa35;
+          }
+          &.put {
+            color: #faad14;
+          }
+          &.patch {
+            color: #58e2c2;
+          }
+          &.delete {
+            color: #da3f3f;
+          }
+          &.head {
+            color: #9461c9;
+          }
+          &.trace {
+            color: #ffa28f;
+          }
+          &.options {
+            color: #495d97;
+          }
+        }
+      }
+
+      .copy-icon {
+        cursor: pointer;
+        width: 1.5rem;
+        height: 1.5rem;
+      }
     }
 
     .api-desc {
@@ -299,11 +310,5 @@ main {
       align-items: end !important;
       align-content: end !important;
     }
-
-    .copy-icon {
-      cursor: pointer;
-      width: 1.5rem;
-      height: 1.5rem;
-    }
   }
 }

package/src/layout/docsComponents/DocsHeader/DocsHeader.module.scss

@@ -27,12 +27,18 @@
     font-size: 1rem;
     line-height: 1.25rem;
 
+    .btnContentWrapper {
+      .btnContent{
+        font-size: 0.918rem !important;
+      }
+    }
+
     &:hover:not(:disabled) {
       color: #000000 !important;
     }
 
     &:hover {
-      color: #000;
+      color: #000 !important;
     }
 
     svg {
@@ -68,12 +74,18 @@
     border: none !important;
     box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
     padding: 0.4rem;
-    width: 9.4875rem;
+    width: 10.4875rem;
     font-size: 1rem;
     font-weight: 400;
     line-height: 1.234rem;
     height: 2.25rem;
 
+    .btnContentWrapper {
+      .btnContent{
+        font-size: 0.918rem !important;
+      }
+    }
+
     &:hover:not(:disabled) {
       color: #000000 !important;
     }

package/src/layout/layout.tsx

@@ -49,6 +49,7 @@ const Layout = ({
   })
   const { dirty, isValid, isSubmitting, values, setFieldValue, handleSubmit, errors } = formik
   const [isPublishDialogOpen, setIsPublishDialogOpen] = useState(false)
+
   const [openMethodIndex, setOpenMethodIndex] = useState<number | null>(null)
 
   useEffect(() => {
@@ -57,11 +58,6 @@ const Layout = ({
     }
   }, [dirty])
 
-  // TODO: keep it here until production
-  useEffect(() => {
-    console.log({ values, errors })
-  }, [values])
-
   return (
     <div className={styles.docsLayout}>
       {dirty && (

package/variables.txt

@@ -1 +1 @@
-export APP_VERSION=1.0.82
+export APP_VERSION=1.0.84