@digi-frontend/dgate-api-documentation 1.0.9 → 1.0.11

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.9",
+  "version": "1.0.11",
   "main": "dist/src/index.js",
   "module": "dist/src/index.js",
   "types": "dist/types/index.d.ts",

package/src/components/InfoForm/InfoForm.tsx

@@ -11,10 +11,13 @@ 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()
   const [authType, setAuthType] = useState('')
+  const [description, setDescription] = useState('')
+  const [url, setURL] = useState('')
   const { values, setFieldValue, errors } = useFormikContext<TransformedOpenApi>()
   const [externalTooltipRefs, setExternalTooltipRefs] = useState<{ [key: number]: any }>({})
   const [tooltipRefs, setTooltipRefs] = useState<{ [key: number]: any }>({})
@@ -162,22 +165,24 @@ const InfoForm = ({ readOnly }: { readOnly?: boolean }) => {
                   placeholder="Describe External Doc..."
                   value={item.externalDocs?.description}
                   disabled={readOnly}
-                  onChange={(value) =>
+                  onChange={(value) => {
                     onTableChange(
                       'externalDocs',
                       { ...item.externalDocs, description: value },
                       index
                     )
-                  }
+                    setDescription(value)
+                  }}
                 />
                 <p className={styles.editDescTooltipContent_header}>External Docs Link</p>
                 <TextArea
                   placeholder="External Docs Link..."
                   value={item.externalDocs?.url}
                   disabled={readOnly}
-                  onChange={(value) =>
+                  onChange={(value) => {
                     onTableChange('externalDocs', { ...item.externalDocs, url: value }, index)
-                  }
+                    setURL(value)
+                  }}
                 />
                 {!readOnly && (
                   <Button
@@ -186,10 +191,11 @@ const InfoForm = ({ readOnly }: { readOnly?: boolean }) => {
                     size="small"
                     onClick={() => {
                       setFieldValue(`tags[${index}].externalDocs`, {
-                        description: item.externalDocDesc,
-                        url: item.externalDocLink,
+                        description: description,
+                        url: url,
                       })
-                      console.log({ tags: values.tags })
+                      setDescription('')
+                      setURL('')
                       externalTooltipRefs[index]?.hide()
                     }}
                   >

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

@@ -1,23 +1,144 @@
-import React from 'react'
+import React, { useEffect, useState } from 'react'
 import styles from './LivePreview.module.scss'
 import SimpleLabelValue from '../../components/SimpleLabelValue'
-import Chips from '../../components/Chips/Chips'
+
 import MethodsAccordion from '../../components/MethodAccordion/MethodAccordion'
 import { TransformedOpenApi } from '../../types/transformedOpenApi'
 import { useFormikContext } from 'formik'
+import { methodColorMapping, tagsTableHeaders } from '../../constants/index'
+import TagsTable from '../table/tags-table'
+import { Button, TextArea } from 'digitinary-ui'
+import Tooltip from '../../components/Tooltip/Tooltip'
+import { DeleteIcon, deleteOutlinedIcon, EditIcon } from '../../assets/icons'
 
 interface LivePreviewProps {
   transformedData?: TransformedOpenApi
 }
 
 const LivePreview: React.FC<LivePreviewProps> = ({ transformedData }) => {
-  const { values, setFieldValue } = useFormikContext<TransformedOpenApi>()
-  const { info, components, tags, paths } = values
+  const [tableRecords, setTableRecords] = useState()
+  const [tooltipRefs, setTooltipRefs] = useState<{ [key: number]: any }>({})
+  const [tableData, setTableData] = useState([])
+  const [externalTooltipRefs, setExternalTooltipRefs] = useState<{ [key: number]: any }>({})
+  const { values } = useFormikContext<TransformedOpenApi>()
+  const { info, components, tags } = values
   const { securitySchemes } = components
   const securityKey =
     securitySchemes && typeof securitySchemes == 'object' && Object.keys(securitySchemes).length
       ? Object.keys(securitySchemes)[0]
       : null
+
+  useEffect(() => {
+    console.log({updated: values.tags})
+    if (values.tags && values.tags.length) {
+      setTableRecords(generateTableData(values.tags, true))
+      setTableData(values.tags)
+    }
+  }, [values.tags])
+
+  const generateTableData = (items, readOnly) => {
+    return items.map((item, index) => ({
+      id: index,
+      tagName: item.name,
+      description: (
+        <div className={styles.paramDescContainer}>
+          <Tooltip
+            arrowWithBorder
+            placement="bottom-end"
+            type="function"
+            trigger="click"
+            delay={[0, 0]}
+            onCreate={(instance) =>
+              setTooltipRefs((prev) => ({
+                ...prev,
+                [index]: instance,
+              }))
+            }
+            content={
+              <div className={styles.editDescTooltipContent}>
+                <p className={styles.editDescTooltipContent_header}>Description</p>
+                <TextArea
+                  placeholder="Describe parameter..."
+                  value={item.description}
+                  disabled={readOnly}
+                  onChange={(value) => null}
+                />
+              </div>
+            }
+          >
+            <Button className={styles.editDescBtn} variant="link" color="action">
+              {item.description ? item.description.substring(0, 12) : '-'}
+              {item.description && item.description.length > 12 ? '...' : ''}
+            </Button>
+          </Tooltip>
+        </div>
+      ),
+      externalDocs: (
+        <div className={styles.paramDescContainer}>
+          <Tooltip
+            arrowWithBorder
+            placement="bottom-end"
+            type="function"
+            trigger="click"
+            delay={[0, 0]}
+            onCreate={(instance) =>
+              setExternalTooltipRefs((prev) => ({
+                ...prev,
+                [index]: instance,
+              }))
+            }
+            content={
+              <div className={styles.editDescTooltipContent}>
+                <p className={styles.editDescTooltipContent_header}>External Docs Description</p>
+                <TextArea
+                  placeholder="Describe External Doc..."
+                  value={item.externalDocs?.description}
+                  disabled={readOnly}
+                  onChange={(value) => null}
+                />
+                <p className={styles.editDescTooltipContent_header}>External Docs Link</p>
+                <TextArea
+                  placeholder="External Docs Link..."
+                  value={item.externalDocs?.url}
+                  disabled={readOnly}
+                  onChange={(value) => null}
+                />
+              </div>
+            }
+          >
+            <Button
+              className={styles.editDescBtn}
+              variant="link"
+              color="action"
+              onClick={() => {
+                const a = document.createElement('a')
+                a.href = item.externalDocs?.url
+                a.click()
+              }}
+            >
+              {item?.externalDocs?.description
+                ? item?.externalDocs?.description?.substring(0, 12)
+                : '-'}
+              {item?.externalDocs?.description && item?.externalDocs?.description?.length > 12
+                ? '...'
+                : ''}
+            </Button>
+          </Tooltip>
+
+          {!readOnly && <div className={styles.paramDescContainer_separator}></div>}
+
+          {!readOnly && (
+            <Button
+              className={styles.deleteParamBtn}
+              variant="link"
+              color="error"
+              onClick={() => null}
+            ></Button>
+          )}
+        </div>
+      ),
+    }))
+  }
   return (
     <div>
       <div className="row">
@@ -38,38 +159,26 @@ const LivePreview: React.FC<LivePreviewProps> = ({ transformedData }) => {
           <SimpleLabelValue
             key={'tags'}
             label={'Tags: '}
-            value={
-              tags && tags.length ? (
-                <Chips
-                  className={styles.tagsChips}
-                  items={tags.map((t) => ({
-                    id: t.name,
-                    label: t.name,
-                    disabled: true,
-                  }))}
-                />
-              ) : (
-                '-'
-              )
-            }
+          />
+          <TagsTable
+          id="tags-table"
+            data={tableRecords}
+            headCells={tagsTableHeaders}
+            isFormOpen={false}
+            setIsFormOpen={() => null}
+            saveNewRow={() => null}
+            readOnly={true}
           />
 
           <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

@@ -71,16 +71,6 @@
         transition: rotate 0.3s ease-in-out;
       }
     }
-
-    &.readOnly {
-      .methodSummary {
-        background-color: #ebecf2;
-      }
-
-      .methodExpandArrowContainer {
-        background-color: #ebecf2;
-      }
-    }
   }
 
   .methodAccordionContent {
@@ -309,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({
@@ -218,9 +218,9 @@ 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} ${readOnly ? styles.readOnly : ''}`}>
+          <div className={styles.methodSummaryContainer}>
             <div className={styles.methodSummary}>
               <span
                 style={{
@@ -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}
@@ -340,6 +341,7 @@ const MethodsAccordion = ({
                     withSearch={false}
                     isMultiple={false}
                     clearable={false}
+                    disabled={readOnly}
                     placeholder="200"
                     options={[
                       {
@@ -355,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/components/table/tags-table.tsx

@@ -223,6 +223,7 @@ const TagsTable = ({ id, headCells, data, isFormOpen, setIsFormOpen, saveNewRow,
                             onClick={() => {
                               const a = document.createElement('a')
                               a.href = values.externalDocs?.url
+                              a.target = '_blank'
                               a.click()
                             }}
                           >

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]