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

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

@@ -2,42 +2,34 @@ 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/index.d.ts

@@ -0,0 +1,18 @@
+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;
+    };
+}

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

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

package/dist/types/types/openApi.d.ts

@@ -71,7 +71,7 @@ interface Schema {
     enum?: string[];
     required?: string[];
 }
-export interface SecurityScheme {
+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.5",
+  "version": "1.0.7",
   "main": "dist/src/index.js",
   "module": "dist/src/index.js",
   "types": "dist/types/index.d.ts",

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

@@ -3,6 +3,91 @@
   padding: 1.25rem 1.875rem;
   gap: 1.25rem;
 
+  .paramsTable {
+    .paramDescContainer {
+      display: flex;
+
+      .paramDescContainer_separator {
+        height: inherit;
+        width: 1px;
+        background-color: #d8dae5;
+      }
+
+      :global(.customBtn) {
+        svg {
+          path {
+            stroke-width: 0.1;
+          }
+        }
+
+        &.editDescBtn {
+          padding: 0;
+          margin-right: 1.25rem;
+
+          :global(.btnContentWrapper) {
+            display: flex;
+            align-items: center;
+            padding: 0;
+            color: #12131a;
+
+            :global(.endBtnIcon) {
+              margin-block: auto;
+
+              svg {
+                path {
+                  fill: #12131a;
+                }
+              }
+            }
+          }
+        }
+
+        &.deleteParamBtn {
+          padding: 0;
+
+          :global(.btnContentWrapper) {
+            :global(.endBtnIcon) {
+              margin-block: auto;
+
+              svg {
+                width: 1.125rem;
+              }
+            }
+          }
+        }
+      }
+    }
+
+    .editDescTooltipContent {
+      display: flex;
+      flex-direction: column;
+      gap: 0.625rem;
+      padding-bottom: 0.625rem;
+
+      > *:not(.editDescTooltipContent_header) {
+        margin-inline: 0.625rem;
+      }
+
+      .editDescTooltipContent_header {
+        font-weight: 600;
+        font-size: 0.875rem;
+        line-height: 1.25rem;
+        padding: 0.75rem 1.25rem;
+        border-bottom: 1px solid #d8dae5;
+      }
+    }
+
+    :global(.requiredParam) {
+      :global(.headContainer) {
+        &::after {
+          content: '*';
+          color: red;
+          transform: translateX(0.125rem);
+        }
+      }
+    }
+  }
+
   .apiDocRow {
     display: grid;
     grid-template-columns: 1fr 1fr;
@@ -12,4 +97,33 @@
   .apiInfoForm_tagsChips {
     margin-top: -1.25rem;
   }
+
+  .editDescTooltipContent {
+    display: flex;
+    flex-direction: column;
+    gap: 0.625rem;
+    padding-bottom: 0.625rem;
+
+    > *:not(.editDescTooltipContent_header) {
+      margin-inline: 0.625rem;
+    }
+
+    .editDescTooltipContent_header {
+      font-weight: 600;
+      font-size: 0.875rem;
+      line-height: 1.25rem;
+      padding: 0.75rem 1.25rem;
+      border-bottom: 1px solid #d8dae5;
+    }
+  }
+
+  :global(.requiredParam) {
+    :global(.headContainer) {
+      &::after {
+        content: '*';
+        color: red;
+        transform: translateX(0.125rem);
+      }
+    }
+  }
 }

package/src/components/InfoForm/InfoForm.tsx

@@ -1,21 +1,29 @@
 import { useEffect, useState } from 'react'
 // @ts-ignore
 import { useFormikContext } from 'formik'
-import { Input, SelectGroup, TextArea } from 'digitinary-ui'
+import { Button, Input, TextArea } from 'digitinary-ui'
 import styles from './InfoForm.module.scss'
-import Chips from '../../components/Chips/Chips'
 import regex from '../../constants/regex'
 import { TransformedOpenApi } from '../../types/transformedOpenApi'
-
-const InfoForm = () => {
-  const [tagsList, setTagsList] = useState([])
+import Tooltip from '../../components/Tooltip/Tooltip'
+import { DeleteIcon, deleteOutlinedIcon, EditIcon } from '../../assets/icons'
+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 { values, setFieldValue, errors } = useFormikContext<TransformedOpenApi>()
+  const [externalTooltipRefs, setExternalTooltipRefs] = useState<{ [key: number]: any }>({})
+  const [tooltipRefs, setTooltipRefs] = useState<{ [key: number]: any }>({})
+  const [selectedTagIndex, setSelectedTagIndex] = useState<number | null>(null)
+  const [selectedTagName, setSelectedTagName] = useState<string | null>(null)
+  const [openDeleteDialog, setOpenDeleteDialog] = useState(false)
+  const [isFormOpen, setIsFormOpen] = useState(false)
 
   useEffect(() => {
-    if (values && values.tags) {
-      setTagsList(values.tags)
-    }
     if (values && values.components && values.components.securitySchemes) {
       const authenticatorKeys = Object.keys(values.components.securitySchemes)
       if (authenticatorKeys.length) {
@@ -24,11 +32,226 @@ const InfoForm = () => {
     }
   }, [])
 
+  useEffect(() => {
+    setTableRecords(generateTableData(tableData))
+  }, [tableData])
+
+  useEffect(() => {
+    if (values.tags && values.tags.length) {
+      setTableRecords(generateTableData(values.tags))
+      setTableData(values.tags)
+    }
+  }, [])
+
+  const confirmDeleteTag = () => {
+    if (selectedTagIndex !== null) {
+      setTableData((prev) => prev.filter((_, i) => i !== selectedTagIndex))
+    }
+    setOpenDeleteDialog(false)
+    setSelectedTagIndex(null)
+  }
+
   const capitalize = (str) => {
     if (!str) return ''
     return str.charAt(0).toUpperCase() + str.slice(1)
   }
 
+  const onTableChange = (key, value, index) => {
+    const newTableData = tableData.map((item, tIndex) => {
+      if (tIndex === index) {
+        return { ...item, [key]: value }
+      } else {
+        return item
+      }
+    })
+
+    setTableData(newTableData)
+  }
+
+  const saveNewRow = (tag) => {
+    setTableData([...tableData, tag])
+    setFieldValue(`tags`, [...values.tags, tag])
+  }
+
+  const handleDeleteClick = (id: number, name: string) => {
+    setSelectedTagIndex(id)
+    setSelectedTagName(name)
+
+    setOpenDeleteDialog(true)
+  }
+
+  const generateTableData = (items) => {
+    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) => onTableChange('description', value, index)}
+                />
+                {!readOnly && (
+                  <Button
+                    className={styles.editDescTooltipContent_btn}
+                    variant="outlined"
+                    size="small"
+                    onClick={() => {
+                      setFieldValue(`tags[${index}].description`, item.description)
+                      tooltipRefs[index]?.hide()
+                    }}
+                  >
+                    Apply
+                  </Button>
+                )}
+              </div>
+            }
+          >
+            {readOnly ? (
+              <Button className={styles.editDescBtn} variant="link" color="action">
+                {item.description ? item.description.substring(0, 12) : '-'}
+                {item.description && item.description.length > 12 ? '...' : ''}
+              </Button>
+            ) : (
+              <Button
+                className={styles.editDescBtn}
+                variant="link"
+                color="action"
+                endIcon={<SVGLoader src={EditIcon} width="1.5rem" height="1.5rem" />}
+              >
+                {readOnly || item.description ? 'View Description' : 'Add Description'}
+              </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) =>
+                    onTableChange(
+                      'externalDocs',
+                      { ...item.externalDocs, description: value },
+                      index
+                    )
+                  }
+                />
+                <p className={styles.editDescTooltipContent_header}>External Docs Link</p>
+                <TextArea
+                  placeholder="External Docs Link..."
+                  value={item.externalDocs?.url}
+                  disabled={readOnly}
+                  onChange={(value) =>
+                    onTableChange('externalDocs', { ...item.externalDocs, url: value }, index)
+                  }
+                />
+                {!readOnly && (
+                  <Button
+                    className={styles.editDescTooltipContent_btn}
+                    variant="outlined"
+                    size="small"
+                    onClick={() => {
+                      setFieldValue(`tags[${index}].externalDocs`, {
+                        description: item.externalDocDesc,
+                        url: item.externalDocLink,
+                      })
+                      console.log({ tags: values.tags })
+                      externalTooltipRefs[index]?.hide()
+                    }}
+                  >
+                    Apply
+                  </Button>
+                )}
+              </div>
+            }
+          >
+            {readOnly ? (
+              <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>
+            ) : (
+              <Button
+                className={styles.editDescBtn}
+                variant="link"
+                color="action"
+                endIcon={<SVGLoader src={EditIcon} width="1.5rem" height="1.5rem" />}
+                onClick={() => {
+                  console.log('Move to url')
+                }}
+              >
+                {readOnly ||
+                (item.externalDocs && (item.externalDocs?.url || item.externalDocs?.description))
+                  ? 'View '
+                  : 'Add '}{' '}
+                External Docs Link
+              </Button>
+            )}
+          </Tooltip>
+
+          {!readOnly && <div className={styles.paramDescContainer_separator}></div>}
+
+          {!readOnly && (
+            <Button
+              className={styles.deleteParamBtn}
+              variant="link"
+              color="error"
+              endIcon={<SVGLoader src={DeleteIcon} width="1.125rem" height="1.125rem" />}
+              onClick={() => handleDeleteClick(index, item.name)}
+            ></Button>
+          )}
+        </div>
+      ),
+    }))
+  }
+
   return (
     <form className={styles.apiInfoForm} onSubmit={(e) => e.preventDefault()}>
       <Input
@@ -72,51 +295,48 @@ const InfoForm = () => {
         errorMessage={errors?.info?.description}
         restrictedCharsRegex={regex.restrictNone}
       />
-      <SelectGroup
-        value={values.tags.map((item) => ({
-          label: item.name,
-          value: item.name,
-          description: item.description || '',
-        }))}
-        onChange={(items) =>
-          setFieldValue(
-            'tags',
-            items.map((item) => ({
-              name: item.label,
-              description: item.description || '',
-            }))
-          )
+      <div className={styles.paramsTable}>
+        <TagsTable
+          id="paramter-table"
+          data={tableRecords}
+          headCells={tagsTableHeaders}
+          isFormOpen={isFormOpen}
+          setIsFormOpen={setIsFormOpen}
+          saveNewRow={saveNewRow}
+          readOnly={readOnly}
+        />
+      </div>
+      <CommonDialog
+        status="error"
+        content={
+          <p
+            style={{
+              textAlign: 'center',
+              fontWeight: 400,
+              fontSize: '1rem',
+              lineHeight: '1.4375rem',
+            }}
+            className="delete-msg-container"
+          >
+            Are you sure you want to delete
+            <span className="plan-name">{` Tag ${selectedTagName} `}</span>?
+          </p>
         }
-        label="Tags"
-        options={[
-          {
-            list: tagsList?.map((item) => ({
-              label: item.name,
-              value: item.name,
-              description: item.description || '',
-            })),
-          },
-        ]}
+        onSubmit={{
+          onClick: confirmDeleteTag,
+          text: 'Yes',
+          color: 'error',
+          fullWidth: true,
+        }}
+        onCancel={{
+          text: 'No',
+          color: 'normal',
+          fullWidth: true,
+        }}
+        onClose={() => setOpenDeleteDialog(false)}
+        open={openDeleteDialog}
+        icon={<SVGLoader src={deleteOutlinedIcon} width="4.0625rem" height="4.0625rem" />}
       />
-      {values.tags.length > 0 && (
-        <Chips
-          className={styles.apiInfoForm_tagsChips}
-          items={values.tags.map((t) => ({
-            id: t.name,
-            label: t.name,
-            description: t.description || '',
-          }))}
-          onDelete={(items) =>
-            setFieldValue(
-              'tags',
-              items.map((item) => ({
-                name: item.label,
-                description: item.description || '',
-              }))
-            )
-          }
-        />
-      )}
     </form>
   )
 }

package/src/components/JsonInput/JsonInput.tsx

@@ -85,6 +85,12 @@ const JsonInput = ({
             setDisabledBeautify(true)
             onChange(e.target.value)
           }}
+          onPaste={(e) => {
+            if (fieldIsDisabled) return
+            setIsValid(undefined)
+            setDisabledBeautify(true)
+            onChange(e.target.value)
+          }}
           min="1"
           placeholder={placeholder}
         />

package/src/components/MethodAccordion/MethodAccordion.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react'
-import { Accordion, Button, Input, SelectGroup, Switch, TextArea } from 'digitinary-ui'
+import { Accordion, Button, SelectGroup, Switch, TextArea } from 'digitinary-ui'
 import SVGLoader from '../../components/SVGLoader/SVGLoader'
 import {
   CheckMarkSquare,
@@ -53,6 +53,11 @@ const MethodsAccordion = ({
   const [openDeleteDialog, setOpenDeleteDialog] = useState(false)
   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) || '{}'
 
   const onTableChange = (key, value, index) => {
     const newTableData = tableData.map((item, tIndex) => {
@@ -173,8 +178,6 @@ const MethodsAccordion = ({
     })
   }
 
-  const [tableRecords, setTableRecords] = useState()
-
   const confirmDeleteParameter = () => {
     if (selectedParamIndex !== null) {
       setTableData((prev) => prev.filter((_, i) => i !== selectedParamIndex))
@@ -299,9 +302,9 @@ const MethodsAccordion = ({
                     className={'jsonField'}
                     placeholder="Enter your request body as a JSON object...."
                     fieldIsDisabled={readOnly}
-                    value={method?.requestBody?.at(0)?.content?.schema?.properties || '{}'}
+                    value={method?.requestBody?.content?.schema?.properties || '{}'}
                     onChange={(value: string) => {
-                      setFieldValue('requestBody[0].content.schema.properties', value)
+                      setFieldValue('requestBody.content.schema.properties', value)
                     }}
                     onValidation={() => null}
                   />
@@ -337,13 +340,15 @@ const MethodsAccordion = ({
                     withSearch={false}
                     isMultiple={false}
                     placeholder="200"
-                    disabled={true}
                     options={[
                       {
                         list: httpStatusCodeOptions,
                       },
                     ]}
-                    value={httpStatusCodeOptions[4]}
+                    value={selectedStatusCode}
+                    onChange={(value) => {
+                      setSelectedStatusCode(value)
+                    }}
                   />
                 </span>
               }
@@ -352,9 +357,33 @@ const MethodsAccordion = ({
                   className={'jsonField'}
                   placeholder="Enter your response as a JSON object..."
                   fieldIsDisabled={readOnly}
-                  value={method.responses?.at(0)?.content?.schema?.properties || '{}'}
+                  value={currentResponse?.content?.schema?.properties || '{}'}
                   onChange={(value) => {
-                    setFieldValue('responses[0].content.schema.properties', value)
+                    const currentResIndex = method.responses.findIndex(
+                      (res) => res.code === currentResponse.code
+                    )
+
+                    if (currentResIndex !== -1) {
+                      setFieldValue(
+                        `responses[${currentResIndex}].content.schema.properties`,
+                        value
+                      )
+                    } else {
+                      const clonedResponses = structuredClone(method.responses)
+
+                      clonedResponses.push({
+                        code: selectedStatusCode.value.toString(),
+                        content: {
+                          contentType: 'application/json',
+                          schema: {
+                            type: 'object',
+                            properties: value,
+                          },
+                        },
+                      })
+
+                      setFieldValue('responses', clonedResponses)
+                    }
                   }}
                   onValidation={() => null}
                 />