@digi-frontend/dgate-api-documentation 1.0.4 → 1.0.6

package/src/helpers/layout.helper.ts

@@ -1,15 +1,19 @@
 import { TransformedPathsArray } from '@entities/layout.type'
-import { OpenAPIFile } from '@entities/openApi'
+import { OpenAPIFile, SecurityScheme } from '@entities/openApi'
 import { TransformedOpenApi } from '@entities/transformedOpenApi'
 
 export const transformOpenApiObject = (openApiJson: OpenAPIFile): TransformedOpenApi => {
   if (openApiJson.components && openApiJson.components.securitySchemes) {
-    const authKey = Object.keys(openApiJson.components.securitySchemes)
-    if (authKey && authKey.length) {
-      openApiJson.components.securitySchemes[authKey[0]].type =
-        openApiJson?.components?.securitySchemes?.[authKey[0]]?.type?.toUpperCase()
+    const authKey = Object.keys(openApiJson.components.securitySchemes)?.at(0)
+
+    if (authKey) {
+      openApiJson.components.securitySchemes[authKey].type =
+        openApiJson?.components?.securitySchemes?.[
+          authKey
+        ]?.type?.toUpperCase() as SecurityScheme['type']
     }
   }
+
   return {
     ...openApiJson,
     paths: transformPathsToArray(openApiJson.paths),
@@ -22,16 +26,16 @@ export const transformOpenApiObjectToOrigin = (values: TransformedOpenApi): Open
     paths: transformPathsArrayToOrigin(values.paths),
   }
   if (object.components && object.components.securitySchemes) {
-    const authKey = Object.keys(object.components.securitySchemes)
-    if (authKey && authKey.length) {
-      if (
-        object.components.securitySchemes[authKey[0]].type.toLowerCase() == 'APIKEY'.toLowerCase()
-      ) {
-        object.components.securitySchemes[authKey[0]].in =
-          object.components.securitySchemes[authKey[0]].in.toUpperCase()
+    const authKey = Object.keys(object.components.securitySchemes)?.at(0)
+    if (authKey) {
+      if (object.components.securitySchemes[authKey].type.toLowerCase() == 'APIKEY'.toLowerCase()) {
+        object.components.securitySchemes[authKey].in = object.components.securitySchemes[
+          authKey
+        ].in.toUpperCase() as SecurityScheme['in']
       }
-      object.components.securitySchemes[authKey[0]].type =
-        object?.components?.securitySchemes?.[authKey[0]]?.type?.toUpperCase()
+      object.components.securitySchemes[authKey].type = object?.components?.securitySchemes?.[
+        authKey
+      ]?.type?.toUpperCase() as SecurityScheme['type']
     }
   }
   return object
@@ -51,24 +55,41 @@ export const transformPathsToArray = (paths: OpenAPIFile['paths']): TransformedP
             code,
             content: {
               contentType,
-              schema: codeProps.content?.[contentType]?.schema,
+              schema: {
+                ...codeProps.content?.[contentType]?.schema,
+                properties: JSON.stringify(codeProps.content?.[contentType]?.schema?.properties),
+              },
             },
           }
         }),
       }
+
       if (method.toLowerCase() != 'get') {
-        obj['requestBody'] = methodProps.requestBody
-          ? Object.entries(methodProps.responses).map(([_, codeProps]) => {
-              const contentType = Object.keys(codeProps.content || {})[0]
-              return {
-                content: {
-                  contentType,
-                  schema: codeProps.content?.[contentType]?.schema,
+        const contentType = Object.keys(methodProps?.requestBody?.content || {})[0]
+        const reqSchema = methodProps?.requestBody?.content?.schema
+        const requestBodyData = methodProps?.requestBody?.content?.schema?.properties
+          ? {
+              content: {
+                contentType,
+                schema: {
+                  ...reqSchema,
+                  properties: reqSchema?.properties ? JSON.stringify(reqSchema?.properties) : '{}',
                 },
-              }
-            })
-          : {}
+              },
+            }
+          : {
+              content: {
+                contentType: 'application/json',
+                schema: {
+                  properties: '{}',
+                  type: 'object',
+                },
+              },
+            }
+
+        obj['requestBody'] = requestBodyData
       }
+
       return obj
     }),
   }))
@@ -86,24 +107,30 @@ export const transformPathsArrayToOrigin = (paths: TransformedPathsArray): OpenA
           respAcc[code] = {
             description: 'Success', // Assuming this is static from the original data
             content: content.contentType
-              ? { [content.contentType]: { schema: content.schema } }
+              ? {
+                  [content.contentType]: {
+                    schema: {
+                      ...(content.schema as object),
+                      properties: JSON.parse((content?.schema as any)?.properties as string),
+                    },
+                  },
+                }
               : {},
           }
           return respAcc
         }, {} as Record<string, any>),
       }
 
+      const parsedRequestBodyProps =
+        type !== 'get' ? JSON.parse(requestBody.content.schema.properties) : {}
       // Add requestBody for non-GET methods
-      if (type !== 'get' && requestBody?.length > 0) {
+      if (type !== 'get') {
         methodAcc[type].requestBody = {
           content: {
-            [requestBody[0].content.contentType]: {
+            [requestBody.content.contentType]: {
               schema: {
-                ...requestBody[0].content.schema,
-                properties:
-                  typeof requestBody[0].content.schema.properties === 'string'
-                    ? JSON.parse(requestBody[0].content.schema.properties)
-                    : requestBody[0].content.schema.properties,
+                ...requestBody.content.schema,
+                properties: parsedRequestBodyProps,
               },
             },
           },

package/src/layout/layout.module.css

@@ -21,6 +21,24 @@
     .editorSide {
       background-color: #fff;
       padding-bottom: 1.25rem;
+
+      .editorSectionHead {
+
+        span {
+          width: 100%;
+        }
+
+        .editorSectionHead_content {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+
+          button {
+            width: 6.25rem;
+          }
+        }
+
+      }
     }
 
     .livePreviewSide {

package/src/layout/layout.tsx

@@ -1,5 +1,5 @@
 import { JSX } from 'react'
-import { Alert } from 'digitinary-ui'
+import { Alert, Button } from 'digitinary-ui'
 import MethodsAccordion from '../components/MethodAccordion/MethodAccordion'
 import styles from './layout.module.css'
 import InfoForm from '../components/InfoForm/InfoForm'
@@ -8,23 +8,25 @@ import { transformOpenApiObject, transformOpenApiObjectToOrigin } from '../helpe
 import { OpenAPIFile } from '../types/openApi'
 import LivePreview from '../components/LivePreview/LivePreview'
 import { FormikProvider, useFormik } from 'formik'
-import * as Yup from 'yup'
 import { schemaValidation } from '../validator/form.scheme'
 import { TransformedOpenApi } from '@entities/transformedOpenApi'
+import { methodColorMapping } from '../constants/index'
 
 interface ILayoutProps {
   openApiJson?: OpenAPIFile
 }
 
 const Layout = ({ openApiJson, handleSave }: ILayoutProps): JSX.Element => {
-  const transformedOpenApi = transformOpenApiObject(openApiJson)
+  const clonedOpenApiJson = structuredClone(openApiJson)
+  const transformedOpenApi = transformOpenApiObject(clonedOpenApiJson)
   const formik = useFormik<TransformedOpenApi>({
     initialValues: structuredClone(transformedOpenApi),
     validationSchema: schemaValidation,
     validateOnMount: true,
     onSubmit: (values, { validateForm }) => {
       // Handle save logic
-      handleSave(transformOpenApiObjectToOrigin(values))
+      const originalOpenApiForm = transformOpenApiObjectToOrigin(values)
+      handleSave(originalOpenApiForm)
       validateForm(values)
     },
   })
@@ -37,7 +39,25 @@ const Layout = ({ openApiJson, handleSave }: ILayoutProps): JSX.Element => {
       </Alert>
       <div className={styles.layoutContainer}>
         <div className={`${styles.editorSide} ${styles.docSide}`}>
-          <SectionHead className={styles.editorSectionHead} text="API Information" />
+          <SectionHead
+            className={styles.editorSectionHead}
+            text={
+              <div className={styles.editorSectionHead_content}>
+                API Information
+                <Button
+                  className={styles.methodForm_submitBtn}
+                  size="medium"
+                  fullWidth={false}
+                  type="submit"
+                  variant="contained"
+                  color="primary"
+                  onClick={formik.submitForm}
+                >
+                  Save
+                </Button>
+              </div>
+            }
+          />
           <FormikProvider value={formik}>
             <InfoForm />
           </FormikProvider>
@@ -45,17 +65,21 @@ const Layout = ({ openApiJson, handleSave }: ILayoutProps): JSX.Element => {
           <FormikProvider value={formik}>
             {formik.values.paths.map((path, pathIndex) => (
               <>
-                {path.methods.map((method, methodIndex) => (
-                  <MethodsAccordion
-                    method={method}
-                    path={path.path}
-                    setFieldValue={(key, value) => {
-                      const h = `paths[${pathIndex}].methods[${methodIndex}].${key}`
-                      formik.setFieldValue(h, value)
-                    }}
-                    handleSave={formik.submitForm}
-                  />
-                ))}
+                {path.methods
+                  .sort(
+                    (method) =>
+                      methodColorMapping[method.type].order + methodColorMapping[method.type].order
+                  )
+                  .map((method, methodIndex) => (
+                    <MethodsAccordion
+                      method={method}
+                      path={path.path}
+                      setFieldValue={(key, value) => {
+                        const h = `paths[${pathIndex}].methods[${methodIndex}].${key}`
+                        formik.setFieldValue(h, value)
+                      }}
+                    />
+                  ))}
               </>
             ))}
           </FormikProvider>

package/src/types/layout.type.ts

@@ -4,7 +4,15 @@ export type TransformedMethod = {
   type: HTTPMethod
   tags: string[]
   parameters: any
-  requestBody: any
+  requestBody: {
+    content: {
+      contentType: string
+      schema: {
+        properties: string
+        type: string
+      }
+    }
+  }
   responses: {
     code: string
     content: {

package/src/types/openApi.ts

@@ -81,7 +81,7 @@ interface Schema {
   required?: string[]
 }
 
-interface SecurityScheme {
+export interface SecurityScheme {
   type: 'apiKey' | 'http' | 'oauth2' | 'openIdConnect'
   description?: string
   name?: string

package/dist/types/types/index.d.ts

@@ -1,18 +0,0 @@
-export type MethodTypes = 'GET' | 'POST' | 'PUT' | 'DELETE';
-export interface ParameterType {
-    name: string;
-    in: string;
-    schemaType: string;
-    required: boolean;
-}
-export interface MethodAccordionProps {
-    method: MethodTypes;
-    path: string;
-    desc: string;
-    parameters: ParameterType[];
-    request: string;
-    response: {
-        content: string;
-        statusCode: number;
-    };
-}