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

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

@@ -2,34 +2,42 @@ export declare const methodColorMapping: {
     get: {
         label: string;
         color: string;
+        order: number;
     };
     post: {
         label: string;
         color: string;
+        order: number;
     };
     put: {
         label: string;
         color: string;
+        order: number;
     };
     delete: {
         label: string;
         color: string;
+        order: number;
     };
-    PATCH: {
+    patch: {
         label: string;
         color: string;
+        order: number;
     };
-    OPTIONS: {
+    options: {
         label: string;
         color: string;
+        order: number;
     };
-    TRACE: {
+    trace: {
         label: string;
         color: string;
+        order: number;
     };
-    HEAD: {
+    head: {
         label: string;
         color: string;
+        order: number;
     };
 };
 export declare const paramsTableHeaders: ({

package/dist/types/types/layout.type.d.ts

@@ -3,7 +3,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/dist/types/types/openApi.d.ts

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@digi-frontend/dgate-api-documentation",
-  "version": "1.0.4",
+  "version": "1.0.5",
   "main": "dist/src/index.js",
   "module": "dist/src/index.js",
   "types": "dist/types/index.d.ts",
@@ -19,6 +19,7 @@
     "digitinary-ui": "^1.0.156",
     "formik": "^2.4.6",
     "html-react-parser": "^5.2.2",
+    "js-yaml": "^4.1.0",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "tslib": "^2.8.1",

package/src/components/InfoForm/InfoForm.module.scss

@@ -12,9 +12,4 @@
   .apiInfoForm_tagsChips {
     margin-top: -1.25rem;
   }
-
-  .apiInfoForm_submitBtn {
-    height: 1.25rem !important;
-    width: 4.25rem;
-  }
 }

package/src/components/InfoForm/InfoForm.tsx

@@ -1,19 +1,17 @@
 import { useEffect, useState } from 'react'
 // @ts-ignore
 import { useFormikContext } from 'formik'
-import * as Yup from 'yup'
-import { Button, Input, SelectGroup, TextArea } from 'digitinary-ui'
+import { Input, SelectGroup, TextArea } from 'digitinary-ui'
 import styles from './InfoForm.module.scss'
 import Chips from '../../components/Chips/Chips'
-import { CheckMarkSquare } from '../../assets/icons'
-import SVGLoader from '../../components/SVGLoader/SVGLoader'
 import regex from '../../constants/regex'
 import { TransformedOpenApi } from '../../types/transformedOpenApi'
 
 const InfoForm = () => {
   const [tagsList, setTagsList] = useState([])
   const [authType, setAuthType] = useState('')
-  const { values, setFieldValue, errors, submitForm } = useFormikContext<TransformedOpenApi>()
+  const { values, setFieldValue, errors } = useFormikContext<TransformedOpenApi>()
+
   useEffect(() => {
     if (values && values.tags) {
       setTagsList(values.tags)
@@ -119,18 +117,6 @@ const InfoForm = () => {
           }
         />
       )}
-      <Button
-        className={styles.apiInfoForm_submitBtn}
-        size="small"
-        fullWidth={false}
-        onClick={submitForm}
-        type="submit"
-        variant="link"
-        color="success"
-        startIcon={<SVGLoader src={CheckMarkSquare} width="1.5rem" height="1.5rem" />}
-      >
-        Save
-      </Button>
     </form>
   )
 }

package/src/components/JsonInput/JsonInput.tsx

@@ -0,0 +1,124 @@
+import React, { useEffect, useState } from 'react'
+import yaml from 'js-yaml'
+import styles from './style.module.scss'
+
+const JsonInput = ({
+  placeholder,
+  label,
+  value,
+  onValidation,
+  onChange,
+  dataId,
+  className = '',
+  errorMessage,
+  acceptType = 'BOTH',
+  fieldIsDisabled,
+}) => {
+  const [isValid, setIsValid] = useState()
+  const [disabledBeautify, setDisabledBeautify] = useState(true)
+
+  const handlePrettify = (e) => {
+    if (value === '') return
+    e.preventDefault()
+    try {
+      let prettifiedData
+      if ((acceptType === 'BOTH' || acceptType === 'JSON') && isValidJson(value)) {
+        // If it's valid JSON, prettify JSON
+        prettifiedData = JSON.stringify(JSON.parse(value), null, 2)
+      } else if (acceptType === 'BOTH' || acceptType === 'YML') {
+        // If it's not valid JSON, prettify YAML
+        prettifiedData = yaml.dump(yaml.load(value), { indent: 0 })
+      }
+      onChange(prettifiedData)
+      setIsValid(true) // Reset validity status
+    } catch (error) {
+      console.error(error)
+      setIsValid(false)
+    }
+  }
+
+  // Function to check if input is valid JSON
+  const isValidJson = (str) => {
+    try {
+      JSON.parse(str)
+      return true
+    } catch (error) {
+      return false
+    }
+  }
+
+  const checkIsValid = () => {
+    if (acceptType === 'BOTH' || acceptType === 'JSON') {
+      return isValidJson(value)
+    } else if (acceptType === 'BOTH' || acceptType === 'YML') {
+      try {
+        // Try parsing as YAML
+        yaml.load(value)
+        return true
+      } catch (error) {
+        console.error(error)
+        return false
+      }
+    }
+  }
+
+  useEffect(() => {
+    try {
+      handlePrettify(value)
+    } catch {}
+  }, [])
+
+  return (
+    <div className={`${styles['json-editor-container']} ${className}`}>
+      {label && <p className={`${styles['json-editor-label']}`}>{label}</p>}
+      <div
+        className={`${styles['json-editor']} ${
+          value !== '' && isValid === false ? styles.invalid : ''
+        }`}
+      >
+        <textarea
+          data-id={dataId}
+          value={value}
+          onChange={(e) => {
+            if (fieldIsDisabled) return
+            setIsValid(undefined)
+            setDisabledBeautify(true)
+            onChange(e.target.value)
+          }}
+          min="1"
+          placeholder={placeholder}
+        />
+        <div className={`${styles['actions-container']}`}>
+          <button
+            type="button"
+            className={styles.validate}
+            onClick={() => {
+              const valid = checkIsValid()
+              setIsValid(valid)
+              onValidation(valid)
+              setDisabledBeautify(!checkIsValid())
+            }}
+            data-id={`${dataId}-VALIDATE-BUTTON`}
+            disabled={value === ''}
+          >
+            Validate
+          </button>
+          <button
+            type="button"
+            disabled={value === '' || disabledBeautify}
+            data-id={`${dataId}-BEAUTIFY-BUTTON`}
+            className={styles.beautify}
+            onClick={handlePrettify}
+          >
+            Beautify
+          </button>
+        </div>
+      </div>
+      {(errorMessage || (value !== '' && isValid === false)) && (
+        <p className={styles['error-message']}>{errorMessage || 'Invalid JSON or YAML format'}</p>
+      )}
+    </div>
+  )
+}
+
+export default JsonInput

package/src/components/JsonInput/style.module.scss

@@ -0,0 +1,123 @@
+.json-editor-container {
+  .json-editor-label {
+    font-size: 0.875rem;
+    font-weight: 600;
+    line-height: 1.25rem;
+    margin-bottom: 0.3125rem;
+  }
+
+  .json-editor {
+    display: flex;
+    flex-direction: column;
+    background-color: #142452;
+    width: 100%;
+    border-radius: 0.3125rem;
+    margin-bottom: -0.5rem;
+    outline: 1px solid transparent;
+    position: relative;
+
+    .actions-container {
+      width: 100%;
+      height: 5rem;
+      padding: 1.25rem;
+      border-radius: 0 0 0.3125rem 0.3125rem;
+      background: #101e47;
+      display: flex;
+      flex-direction: row;
+      gap: 1.25rem;
+      align-items: center;
+
+      .validate {
+        color: #fff;
+        text-align: center;
+        font-size: 1rem;
+        font-style: normal;
+        font-weight: 600;
+        line-height: 1.25rem;
+        width: 8.75rem;
+        padding: 0.625rem 2.25rem;
+        background-color: rgba(240, 248, 255, 0);
+        border-radius: 0.3125rem;
+        border: 0.0625rem solid #4d75d8;
+        cursor: pointer;
+
+        &:disabled {
+          color: #babdcc;
+          border-color: #a2a5b6;
+        }
+      }
+
+      .beautify {
+        color: #fff;
+        text-align: center;
+        font-size: 1rem;
+        font-style: normal;
+        font-weight: 600;
+        line-height: 1.25rem;
+        width: 8.75rem;
+        padding: 0.625rem 2.25rem;
+        background-color: rgba(240, 248, 255, 0);
+        border-radius: 0.3125rem;
+        border: 1px solid #babdcc;
+        cursor: pointer;
+
+        &:disabled {
+          color: #a2a5b6;
+          border-color: #a2a5b6;
+        }
+      }
+    }
+
+    textarea {
+      width: 100%;
+      padding: 1.25rem;
+      font-size: 0.875rem;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 1.25rem;
+      color: white;
+      height: 25rem;
+      background-color: #142452;
+      border: none;
+      resize: none;
+      border-radius: 0.3125rem;
+
+      &:focus,
+      &:focus-within,
+      &:focus-visible &:active {
+        outline: none;
+        border: none;
+      }
+
+      &::-webkit-scrollbar {
+        width: 0.5rem;
+      }
+
+      &::-webkit-scrollbar-track {
+        background-color: #828699;
+        border: none;
+        border-color: transparent;
+        border-top-right-radius: 0.25rem;
+        border-top-left-radius: 0;
+      }
+
+      &::-webkit-scrollbar-thumb {
+        background-color: #d8dae5;
+        border: none;
+        border-color: transparent;
+        border-radius: 0;
+      }
+    }
+
+    &.invalid {
+      outline: 1px solid #ce2828 !important;
+    }
+  }
+
+  .error-message {
+    color: #ce2828;
+    font-size: 0.75rem;
+    line-height: 1.25rem;
+    margin-top: 0.625rem;
+  }
+}

package/src/components/MethodAccordion/MethodAccordion.module.scss

@@ -187,6 +187,16 @@
         border-top: 1px solid #babdcc !important;
         padding: 1.25rem !important;
         padding: 0 !important;
+
+        :global(.jsonField) {
+          div {
+            textarea {
+              border-top-right-radius: 0;
+              border-top-left-radius: 0;
+              height: 10rem;
+            }
+          }
+        }
       }
 
       :global(.details.show .textArea .containerTextArea) {
@@ -280,10 +290,5 @@
         }
       }
     }
-
-    .methodForm_submitBtn {
-      height: 1.25rem !important;
-      width: 4.25rem;
-    }
   }
 }

package/src/components/MethodAccordion/MethodAccordion.tsx

@@ -11,11 +11,12 @@ import {
 import { httpStatusCodes, methodColorMapping, paramsTableHeaders } from '../../constants/index'
 import Tooltip from '../../components/Tooltip/Tooltip'
 import { TransformedMethod } from '../../types/layout.type'
-import styles from './MethodAccordion.module.scss'
 import SimpleLabelValue from '../../components/SimpleLabelValue'
 import { capitalize, handleStatusColor } from '../../helpers/methodAccordion.helper'
 import ParamterTable from '../table/table'
 import CommonDialog from '../../components/dialog'
+import JsonInput from '../../components/JsonInput/JsonInput'
+import styles from './MethodAccordion.module.scss'
 
 const httpStatusCodeOptions = httpStatusCodes.map((code) => ({
   label: (
@@ -35,13 +36,11 @@ const MethodsAccordion = ({
   path,
   setFieldValue,
   readOnly,
-  handleSave,
 }: {
   method: TransformedMethod
   path: string
   setFieldValue: (key: string, value: string) => void
   readOnly?: boolean
-  handleSave: (data: any) => unknown
 }) => {
   const [isExpanded, setIsExpanded] = useState({
     request: false,
@@ -157,10 +156,7 @@ const MethodsAccordion = ({
               )}
             </Tooltip>
 
-            {
-              !readOnly&&
-              <div className={styles.paramDescContainer_separator}></div>
-            }
+            {!readOnly && <div className={styles.paramDescContainer_separator}></div>}
 
             {!readOnly && (
               <Button
@@ -299,19 +295,15 @@ const MethodsAccordion = ({
                   </span>
                 }
                 children={
-                  <TextArea
-                    disabled={readOnly}
-                    value={(() => {
-                      const requestBody = method?.requestBody?.at(0)?.content?.schema?.properties
-
-                      if (typeof requestBody !== 'string') {
-                        return JSON.stringify(requestBody)
-                      } else return requestBody
-                    })()}
-                    onChange={(value) => {
+                  <JsonInput
+                    className={'jsonField'}
+                    placeholder="Enter your request body as a JSON object...."
+                    fieldIsDisabled={readOnly}
+                    value={method?.requestBody?.at(0)?.content?.schema?.properties || '{}'}
+                    onChange={(value: string) => {
                       setFieldValue('requestBody[0].content.schema.properties', value)
                     }}
-                    placeholder="Enter your request body as a JSON object..."
+                    onValidation={() => null}
                   />
                 }
               />
@@ -356,40 +348,18 @@ const MethodsAccordion = ({
                 </span>
               }
               children={
-                <TextArea
-                  disabled={readOnly}
-                  value={
-                    typeof method.responses?.at(0)?.content.schema.properties !== 'string'
-                      ? JSON.stringify(method.responses?.at(0)?.content.schema.properties)
-                      : method.responses?.at(0)?.content.schema.properties
-                  }
+                <JsonInput
+                  className={'jsonField'}
+                  placeholder="Enter your response as a JSON object..."
+                  fieldIsDisabled={readOnly}
+                  value={method.responses?.at(0)?.content?.schema?.properties || '{}'}
                   onChange={(value) => {
-                    let parsedValue = { content: '' }
-                    try {
-                      parsedValue = JSON.parse(value)
-                    } catch (err) {
-                      console.log(err)
-                    }
-                    setFieldValue('responses[0].content.schema.properties', parsedValue as any)
+                    setFieldValue('responses[0].content.schema.properties', value)
                   }}
-                  placeholder="Enter your response as a JSON object..."
+                  onValidation={() => null}
                 />
               }
             />
-            {!readOnly && (
-              <Button
-                className={styles.methodForm_submitBtn}
-                size="small"
-                fullWidth={false}
-                type="submit"
-                variant="link"
-                color="success"
-                onClick={handleSave}
-                startIcon={<SVGLoader src={CheckMarkSquare} width="1.5rem" height="1.5rem" />}
-              >
-                Save
-              </Button>
-            )}
           </div>
         }
       />

package/src/constants/index.ts

@@ -2,34 +2,42 @@ export const methodColorMapping = {
   get: {
     label: 'Get',
     color: '#3A6CD1',
+    order: 1,
   },
   post: {
     label: 'Post',
     color: '#3AAA35',
+    order: 2,
   },
   put: {
     label: 'Put',
     color: '#FAAD14',
+    order: 3,
   },
   delete: {
     label: 'Delete',
     color: '#DA3F3F',
+    order: 4,
   },
-  PATCH: {
+  patch: {
     label: 'Patch',
-    color: '#FAAD14',
+    color: '#58E2C2',
+    order: 5,
   },
-  OPTIONS: {
+  options: {
     label: 'Options',
-    color: '#FAAD14',
+    color: '#495D97',
+    order: 6,
   },
-  TRACE: {
+  trace: {
     label: 'Trace',
-    color: '#FAAD14',
+    color: '#FFA28F',
+    order: 7,
   },
-  HEAD: {
+  head: {
     label: 'Head',
-    color: '#FAAD14',
+    color: '#9461C9',
+    order: 8,
   },
 }