@digi-frontend/dgate-api-documentation 1.0.8 → 1.0.10

package/dist/types/components/JsonInput/JsonInput.d.ts

@@ -1,4 +1,4 @@
-declare const JsonInput: ({ placeholder, label, value, onValidation, onChange, dataId, className, errorMessage, acceptType, fieldIsDisabled, }: {
+declare const JsonInput: ({ placeholder, label, value, onValidation, onChange, dataId, className, errorMessage, acceptType, fieldIsDisabled, withFooter, }: {
     placeholder: any;
     label: any;
     value: any;
@@ -9,5 +9,6 @@ declare const JsonInput: ({ placeholder, label, value, onValidation, onChange, d
     errorMessage: any;
     acceptType?: string;
     fieldIsDisabled: any;
+    withFooter?: boolean;
 }) => import("react/jsx-runtime").JSX.Element;
 export default JsonInput;

package/dist/types/components/MethodAccordion/MethodAccordion.d.ts

@@ -2,7 +2,7 @@ import { TransformedMethod } from '../../types/layout.type';
 declare const MethodsAccordion: ({ method, path, setFieldValue, readOnly, }: {
     method: TransformedMethod;
     path: string;
-    setFieldValue: (key: string, value: string) => void;
+    setFieldValue?: (key: string, value: string) => void;
     readOnly?: boolean;
 }) => import("react/jsx-runtime").JSX.Element;
 export default MethodsAccordion;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@digi-frontend/dgate-api-documentation",
-  "version": "1.0.8",
+  "version": "1.0.10",
   "main": "dist/src/index.js",
   "module": "dist/src/index.js",
   "types": "dist/types/index.d.ts",
@@ -16,7 +16,7 @@
   "license": "ISC",
   "description": "",
   "dependencies": {
-    "digitinary-ui": "^1.0.166",
+    "digitinary-ui": "1.0.166",
     "formik": "^2.4.6",
     "html-react-parser": "^5.2.2",
     "js-yaml": "^4.1.0",

package/src/components/InfoForm/InfoForm.tsx

@@ -11,6 +11,7 @@ import SVGLoader from '../../components/SVGLoader/SVGLoader'
 import CommonDialog from '../../components/dialog'
 import { tagsTableHeaders } from '../../constants/index'
 import TagsTable from '../../components/table/tags-table'
+
 const InfoForm = ({ readOnly }: { readOnly?: boolean }) => {
   const [tableData, setTableData] = useState([])
   const [tableRecords, setTableRecords] = useState()

package/src/components/JsonInput/JsonInput.tsx

@@ -13,6 +13,7 @@ const JsonInput = ({
   errorMessage,
   acceptType = 'BOTH',
   fieldIsDisabled,
+  withFooter = true,
 }) => {
   const [isValid, setIsValid] = useState()
   const [disabledBeautify, setDisabledBeautify] = useState(true)
@@ -69,7 +70,11 @@ const JsonInput = ({
   }, [])
 
   return (
-    <div className={`${styles['json-editor-container']} ${className}`}>
+    <div
+      className={`${styles['json-editor-container']} ${className} ${
+        fieldIsDisabled ? styles.disabled : ''
+      }`}
+    >
       {label && <p className={`${styles['json-editor-label']}`}>{label}</p>}
       <div
         className={`${styles['json-editor']} ${
@@ -77,6 +82,7 @@ const JsonInput = ({
         }`}
       >
         <textarea
+          disabled={fieldIsDisabled}
           data-id={dataId}
           value={value}
           onChange={(e) => {
@@ -94,31 +100,33 @@ const JsonInput = ({
           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>
+        {withFooter && (
+          <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>

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

@@ -1,4 +1,8 @@
 .json-editor-container {
+  overflow: hidden;
+  border-bottom-right-radius: 0.3125rem;
+  border-bottom-left-radius: 0.3125rem;
+
   .json-editor-label {
     font-size: 0.875rem;
     font-weight: 600;
@@ -11,10 +15,9 @@
     flex-direction: column;
     background-color: #142452;
     width: 100%;
-    border-radius: 0.3125rem;
-    margin-bottom: -0.5rem;
     outline: 1px solid transparent;
     position: relative;
+    overflow: hidden;
 
     .actions-container {
       width: 100%;
@@ -80,7 +83,6 @@
       background-color: #142452;
       border: none;
       resize: none;
-      border-radius: 0.3125rem;
 
       &:focus,
       &:focus-within,
@@ -97,7 +99,6 @@
         background-color: #828699;
         border: none;
         border-color: transparent;
-        border-top-right-radius: 0.25rem;
         border-top-left-radius: 0;
       }
 
@@ -120,4 +121,13 @@
     line-height: 1.25rem;
     margin-top: 0.625rem;
   }
+
+  &.disabled {
+    .json-editor {
+      textarea {
+        background-color: white;
+        color: #12131a;
+      }
+    }
+  }
 }

package/src/components/LivePreview/LivePreview.tsx

@@ -5,14 +5,15 @@ import Chips from '../../components/Chips/Chips'
 import MethodsAccordion from '../../components/MethodAccordion/MethodAccordion'
 import { TransformedOpenApi } from '../../types/transformedOpenApi'
 import { useFormikContext } from 'formik'
+import { methodColorMapping } from '../../constants/index'
 
 interface LivePreviewProps {
   transformedData?: TransformedOpenApi
 }
 
 const LivePreview: React.FC<LivePreviewProps> = ({ transformedData }) => {
-  const { values, setFieldValue } = useFormikContext<TransformedOpenApi>()
-  const { info, components, tags, paths } = values
+  const { values } = useFormikContext<TransformedOpenApi>()
+  const { info, components, tags } = values
   const { securitySchemes } = components
   const securityKey =
     securitySchemes && typeof securitySchemes == 'object' && Object.keys(securitySchemes).length
@@ -55,21 +56,14 @@ const LivePreview: React.FC<LivePreviewProps> = ({ transformedData }) => {
           />
 
           <SimpleLabelValue key={'endpoints'} label={'Endpoints '} />
-          {values.paths.map((path, pathIndex) => (
-            <>
-              {path.methods.map((method, methodIndex) => (
-                <MethodsAccordion
-                  readOnly
-                  method={method}
-                  path={path.path}
-                  setFieldValue={(key, value) => {
-                    const h = `paths[${pathIndex}].methods[${methodIndex}].${key}`
-                    setFieldValue(h, value)
-                  }}
-                  handleSave={()=>null}
-                />
-              ))}
-            </>
+          {values.paths.map((path) => (
+            <div className={styles.methodsContainer}>
+              {path.methods
+                .sort((a, b) => methodColorMapping[a.type].order + methodColorMapping[b.type].order)
+                .map((method, methodIndex) => (
+                  <MethodsAccordion readOnly method={method} path={path.path} />
+                ))}
+            </div>
           ))}
         </div>
       </div>

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

@@ -3,17 +3,19 @@
   box-shadow: none !important;
   margin-bottom: 0 !important;
 
-  :global(.summary) {
+  :global(.accordion-header) {
     padding: 0 !important;
     margin: 1.25rem 1.875rem 0 1.875rem !important;
     height: 2.625rem;
+    border: none !important;
+    background-color: transparent !important;
   }
 
   :global(.iconContainer .dropdownIcon) {
     display: none !important;
   }
 
-  :global(.details.show) {
+  :global(.accordion-details.expanded) {
     border: none !important;
     padding: 0 !important;
   }
@@ -26,11 +28,13 @@
 
     .methodSummary {
       display: flex;
+      align-items: center;
       gap: 0.3125rem;
       background-color: #f8f9fb;
       width: 100%;
       padding: 0.3125rem;
       border-radius: 0.3125rem;
+      font-size: 0.875rem;
 
       .methodLabel {
         display: grid;
@@ -41,6 +45,11 @@
         border-radius: 0.1875rem;
         text-transform: capitalize;
       }
+
+      .methodPath {
+        display: block;
+        line-height: 1.25rem !important;
+      }
     }
 
     .methodExpandArrowContainer {
@@ -70,16 +79,6 @@
     gap: 1.25rem;
     padding-inline: 1.875rem;
 
-    .divTest {
-      background-color: red;
-      height: 40px;
-      width: 15px;
-    }
-
-    .divTest:focus {
-      background-color: black;
-    }
-
     .methodDesc {
       margin-top: 1.25rem;
     }
@@ -171,19 +170,24 @@
 
     .requestAccordion,
     .responseAccordion {
-      border-top: 1px solid #babdcc;
+      border: 1px solid #babdcc;
       border-radius: 0.3125rem !important;
       box-shadow: none !important;
       margin-bottom: 0 !important;
       cursor: default !important;
 
-      :global(.summary) {
+      :global(.accordion-header) {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
         margin: 0 !important;
-        padding: 1rem !important;
-        height: auto !important;
+        padding: 0 !important;
+        height: 4.0625rem !important;
+        border-radius: 0.3125rem !important;
+        background-color: white !important;
       }
 
-      :global(.details.show) {
+      :global(.accordion-details.expanded) {
         border-top: 1px solid #babdcc !important;
         padding: 1.25rem !important;
         padding: 0 !important;
@@ -199,23 +203,27 @@
         }
       }
 
-      :global(.details.show .textArea .containerTextArea) {
+      :global(.accordion-details.expanded .textArea .containerTextArea) {
         display: flex;
       }
 
-      :global(.details.show .textArea .containerTextArea .inputField) {
+      :global(.accordion-details.expanded .textArea .containerTextArea .inputField) {
         height: 100%;
         padding: 1.25rem;
       }
 
       .requestAccordionSummary,
       .responseAccordionSummary {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
         font-weight: 700;
         font-size: 1.125rem;
         line-height: 1.5rem;
         display: flex;
         align-items: center;
         cursor: default !important;
+        margin-inline: 0.625rem 1.25rem;
       }
 
       .responseAccordionSummary_title,
@@ -233,18 +241,18 @@
         }
       }
 
-      :global(.details) {
+      :global(.accordion-details) {
         :global(.textArea .inputField) {
           padding: 0;
           border: none;
         }
       }
 
-      :global(.summary .iconContainer .dropdownIcon) {
+      :global(.accordion-header .iconContainer .dropdownIcon) {
         display: none !important;
       }
 
-      :global(.summary) {
+      :global(.accordion-header) {
         cursor: default;
       }
     }
@@ -272,7 +280,7 @@
         }
       }
 
-      :global(.summary) {
+      :global(.accordion-header) {
         overflow: visible;
         cursor: default;
       }
@@ -291,4 +299,27 @@
       }
     }
   }
+
+  &.readOnly {
+    .methodAccordionContent {
+      padding: 0;
+    }
+    :global(.accordion-header) {
+      margin: 1.25rem 0 0 0 !important;
+    }
+
+    :global(.accordion-details) {
+      background-color: transparent !important;
+    }
+
+    .methodSummaryContainer {
+      .methodSummary {
+        background-color: #ebecf2;
+      }
+
+      .methodExpandArrowContainer {
+        background-color: #ebecf2;
+      }
+    }
+  }
 }

package/src/components/MethodAccordion/MethodAccordion.tsx

@@ -39,7 +39,7 @@ const MethodsAccordion = ({
 }: {
   method: TransformedMethod
   path: string
-  setFieldValue: (key: string, value: string) => void
+  setFieldValue?: (key: string, value: string) => void
   readOnly?: boolean
 }) => {
   const [isExpanded, setIsExpanded] = useState({
@@ -54,7 +54,7 @@ const MethodsAccordion = ({
   const [selectedParamIndex, setSelectedParamIndex] = useState<number | null>(null)
   const [selectedParamName, setSelectedParamName] = useState<string | null>(null)
   const [tableRecords, setTableRecords] = useState()
-  
+
   const [selectedStatusCode, setSelectedStatusCode] = useState(httpStatusCodeOptions[4])
   const currentResponse =
     method.responses.find((res) => Number(res.code) === selectedStatusCode.value) || '{}'
@@ -218,7 +218,7 @@ const MethodsAccordion = ({
       <Accordion
         expanded={isExpanded.method}
         onChange={() => setIsExpanded((prev) => ({ ...prev, method: !prev.method }))}
-        className={styles.methodAccordion}
+        className={`${styles.methodAccordion} ${readOnly ? styles.readOnly : ''}`}
         summary={
           <div className={styles.methodSummaryContainer}>
             <div className={styles.methodSummary}>
@@ -247,7 +247,7 @@ const MethodsAccordion = ({
               <TextArea
                 className={styles.methodDesc}
                 label="Description"
-                placeholder="Describe the endpoint's purpose and functionality..."
+                placeholder="Describe the method's purpose and functionality..."
                 value={method?.description}
                 onChange={(value) => setFieldValue('description', value)}
               />
@@ -299,6 +299,7 @@ const MethodsAccordion = ({
                 }
                 children={
                   <JsonInput
+                    withFooter={!readOnly}
                     className={'jsonField'}
                     placeholder="Enter your request body as a JSON object...."
                     fieldIsDisabled={readOnly}
@@ -339,6 +340,8 @@ const MethodsAccordion = ({
                   <SelectGroup
                     withSearch={false}
                     isMultiple={false}
+                    clearable={false}
+                    disabled={readOnly}
                     placeholder="200"
                     options={[
                       {
@@ -354,6 +357,7 @@ const MethodsAccordion = ({
               }
               children={
                 <JsonInput
+                  withFooter={!readOnly}
                   className={'jsonField'}
                   placeholder="Enter your response as a JSON object..."
                   fieldIsDisabled={readOnly}

package/src/components/table/table.tsx

@@ -46,6 +46,7 @@ const ParamterTable = ({
       resetForm()
     },
   })
+
   return (
     <div className="tableSectionContainer">
       <div className="tableContainer">
@@ -105,12 +106,22 @@ const ParamterTable = ({
                 </tr>
               )
             })}
-            {isFormOpen ? (
-              <tr key={''} data-i={''} className={`row`}>
+            {data?.length === 0 && readOnly && (
+              <tr className="fallbackTableRow">
+                <td className="fallbackContainer" colSpan={headCells?.length}>
+                  <div className="fallbackTextContainer">
+                    <span className="fallbackText"> No Data Available</span>
+                  </div>
+                </td>
+              </tr>
+            )}
+
+            {isFormOpen && !readOnly ? (
+              <tr className={`row`}>
                 <td key={'Parameter name'}>
                   <div data-id="TEXT_DESCRIPTION" className="tableData">
                     <Input
-                      placeholder="paramter name"
+                      placeholder="Parameter name"
                       size="large"
                       type="text"
                       //   errorMsg={!!errors.name && errors.name}
@@ -154,6 +165,7 @@ const ParamterTable = ({
                   <div data-id="TEXT_DESCRIPTION" className="tableData">
                     <SelectGroupV2
                       disabled={readOnly}
+                      clearable={false}
                       value={{
                         label: capitalize(values.schema.type),
                         value: capitalize(values.schema.type),
@@ -180,20 +192,19 @@ const ParamterTable = ({
 
                 <td key={'parameter required'}>
                   <div data-id="is required" className="tableData">
-                    {
-                      readOnly ?
-                      <>{values.required ? 'True': 'False'}</>
-                      :
+                    {readOnly ? (
+                      <>{values.required ? 'True' : 'False'}</>
+                    ) : (
                       <Switch
-                      checked={values.required}
-                      onClick={() => {
-                        if (readOnly) {
-                          return
-                        }
-                        setFieldValue('required', !values.required)
-                      }}
-                    />
-                    }
+                        checked={values.required}
+                        onClick={() => {
+                          if (readOnly) {
+                            return
+                          }
+                          setFieldValue('required', !values.required)
+                        }}
+                      />
+                    )}
                   </div>
                 </td>
 

package/src/constants/index.ts

@@ -46,20 +46,20 @@ export const tagsTableHeaders = [
     id: 'tagName',
     label: 'Tag Name',
     sortable: false,
-    classes:'requiredParam'
+    classes: 'requiredParam',
   },
   {
     id: 'description',
     label: 'Description',
     sortable: false,
-    classes:'requiredParam'
+    classes: 'requiredParam',
   },
   {
     id: 'externalDocs',
     label: 'External Docs',
     sortable: false,
-    classes:'requiredParam'
-  }
+    classes: 'requiredParam',
+  },
 ]
 
 export const paramsTableHeaders = [

package/src/helpers/layout.helper.ts

@@ -5,13 +5,21 @@ import { TransformedOpenApi } from '@entities/transformedOpenApi'
 export const transformOpenApiObject = (openApiJson: OpenAPIFile): TransformedOpenApi => {
   if (openApiJson.components && openApiJson.components.securitySchemes) {
     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']
     }
+  } else {
+    openApiJson.components = {
+      securitySchemes: {
+        Public: {
+          type: 'http',
+          scheme: 'public',
+        },
+      },
+    }
   }
 
   return {
@@ -63,6 +71,10 @@ export const transformPathsToArray = (paths: OpenAPIFile['paths']): TransformedP
           }
         }),
       }
+      // Add parameters if it does not exist in the original JSON
+      if (!methodProps?.parameters) {
+        obj.parameters = []
+      }
 
       if (method.toLowerCase() != 'get') {
         const contentType = Object.keys(methodProps?.requestBody?.content || {})[0]

package/src/layout/layout.module.css

@@ -43,7 +43,7 @@
 
     .livePreviewSide {
       background-color: #f8f9fb;
-      padding: 1.875rem;
+      padding: 1.25rem 1.875rem;
     }
 
     .docSide {

package/src/layout/layout.tsx

@@ -68,8 +68,7 @@ const Layout = ({ openApiJson, handleSave }: ILayoutProps): JSX.Element => {
               <>
                 {path.methods
                   .sort(
-                    (method) =>
-                      methodColorMapping[method.type].order + methodColorMapping[method.type].order
+                    (a, b) => methodColorMapping[a.type].order - methodColorMapping[b.type].order
                   )
                   .map((method, methodIndex) => (
                     <MethodsAccordion