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

package/src/components/table/style.scss

@@ -0,0 +1,179 @@
+@import '../_global';
+
+.tableSectionContainer {
+  .tableContainer {
+    max-width: 100%;
+    overflow-x: overlay;
+
+    &.tableContainer * {
+      font-family: 'Cairo';
+    }
+
+    .table {
+      width: 100%;
+      border-spacing: 0;
+      border: none;
+      border-right: 1px solid var(--border-color-neutral);
+      border-left: 1px solid var(--border-color-neutral);
+
+      &.borderRadiusTop {
+        border-top-left-radius: 0.625rem;
+        border-top-right-radius: 0.625rem;
+      }
+
+      &.borderRadiusBottom {
+        border-bottom-left-radius: 0.625rem;
+        border-bottom-right-radius: 0.625rem;
+      }
+
+      .tableHead {
+        border: 1px solid var(--Gray-10);
+        margin: 0rem !important;
+        background-color: var(--background-color-header);
+        width: max-content;
+        min-width: 100%;
+        color: var(--Gray-50);
+        font-weight: 400;
+
+        .tableHeadCell {
+          border-bottom: 1px solid var(--border-color-neutral);
+          border-top: 1px solid var(--border-color-neutral);
+          font-style: normal;
+          font-size: 0.875rem;
+          padding: 0.75rem 1.875rem;
+          text-align: start;
+          white-space: nowrap;
+          color: inherit;
+          font-weight: inherit;
+
+          .sortIcon {
+            padding: 0rem 0.25rem;
+            height: 1.875rem;
+            cursor: pointer;
+          }
+        }
+
+        .headContainer {
+          display: flex;
+          flex-direction: row;
+          align-items: center;
+          text-overflow: ellipsis;
+        }
+      }
+
+      .tableBody {
+        tr {
+          background-color: var(--background-color-white-secondary);
+          overflow: visible !important;
+
+          .tippy-content {
+            background-color: var(--border-color-hover);
+            color: var(--text-color-disabled);
+            border-radius: 5px;
+            font-size: 14px;
+            font-weight: 400;
+            line-height: 20px;
+            text-align: left;
+          }
+          .tippy-box[data-placement^='bottom'] > .tippy-arrow:before {
+            color: var(--border-color-hover);
+          }
+
+          &.rowSelected {
+            background-color: var(--background-color-gray-40);
+          }
+          td {
+            font-weight: 400;
+            font-size: 0.875rem;
+            text-align: start;
+            color: var(--text-color-primary);
+            border-bottom: 1px solid var(--border-color-gray);
+            width: max-content;
+            white-space: nowrap;
+            height: 3.75rem;
+            padding: 0.75rem 1.875rem;
+            overflow: visible !important;
+
+            .tableData {
+              max-width: 100%;
+              width: fit-content;
+              white-space: nowrap;
+              text-overflow: ellipsis;
+              overflow: visible !important;
+            }
+          }
+
+          &:hover {
+            background-color: var(--background-color-gray-10);
+          }
+        }
+
+        .fallbackTableRow {
+          background-color: var(--background-color-white-secondary);
+          height: 4.375rem;
+
+          &:hover {
+            background-color: var(--background-color-white-secondary);
+          }
+
+          .fallbackContainer {
+            width: 100%;
+            height: 100%;
+            color: var(--text-color-quaternary);
+            .fallbackTextContainer {
+              display: flex;
+              flex-direction: row;
+              align-items: center;
+              justify-content: center;
+              width: 100%;
+              height: 100%;
+
+              .fallbackText {
+                font-style: normal;
+                font-weight: 400;
+                font-size: 0.875rem;
+                line-height: 1.25rem;
+              }
+            }
+          }
+        }
+      }
+
+      th,
+      td {
+        text-align: left;
+      }
+    }
+  }
+
+  .tableFooterContainer {
+    display: flex;
+    width: 100%;
+    height: auto;
+  }
+
+  .ascArrow {
+    height: 0.8125rem;
+    margin-bottom: 0.4375rem;
+    cursor: pointer;
+  }
+
+  .descArrow {
+    height: 0.8125rem;
+    margin-top: 0.4375rem;
+    cursor: pointer;
+  }
+
+  .defaultSortArrow {
+    height: 1.25rem;
+    cursor: pointer;
+  }
+
+  .ascArrow,
+  .descArrow,
+  .defaultSortArrow {
+    path {
+      fill: var(--Gray-50);
+    }
+  }
+}

package/src/components/table/table.tsx

@@ -0,0 +1,307 @@
+import React, { useState } from 'react'
+import './style.scss'
+import { Button, Input, SelectGroup, Switch, TextArea } from 'digitinary-ui'
+import Tooltip from '../Tooltip/Tooltip'
+import SVGLoader from '../SVGLoader/SVGLoader'
+import { AddRow, EditIcon, DeleteIcon } from '../../assets/icons'
+import styles from '../MethodAccordion/MethodAccordion.module.scss'
+import { useFormik } from 'formik'
+import * as yup from 'yup'
+import { capitalize } from '../../helpers/methodAccordion.helper'
+
+const ParamterTable = ({
+  id,
+  headCells,
+  data,
+  isFormOpen,
+  setIsFormOpen,
+  saveNewRow,
+  readOnly,
+}) => {
+  const [text, setText] = useState('')
+  const [tooltipRef, setTooltipRef] = useState(null)
+  const { values, errors, setFieldValue, isValid, submitForm, resetForm } = useFormik({
+    initialValues: {
+      name: '',
+      in: 'Query',
+      schema: {
+        type: 'String',
+      },
+      required: true,
+      description: '',
+    },
+    validationSchema: yup.object().shape({
+      name: yup.string().required('Parameter name is required'),
+      in: yup.string().required('Paramter type is required'),
+      schema: yup.object().shape({
+        type: yup.string().required('Parameter schema type is required'),
+      }),
+      required: yup.boolean().optional(),
+      description: yup.string().optional(),
+    }),
+    onSubmit: (values) => {
+      saveNewRow(values)
+      setIsFormOpen(false)
+      setText('')
+      resetForm()
+    },
+  })
+  return (
+    <div className="tableSectionContainer">
+      <div className="tableContainer">
+        <table id={id || ''} className={`table borderRadiusTop borderRadiusBottom`}>
+          <thead className="tableHead">
+            <tr>
+              {headCells?.map((headCell) => (
+                <th
+                  key={headCell.id}
+                  className={`tableHeadCell ${headCell.classes || ''}`}
+                  style={{ width: headCell.width, minWidth: headCell.minWidth }}
+                >
+                  <div
+                    className="headContainer"
+                    data-id={`${
+                      typeof headCell.label === 'string'
+                        ? headCell.label.toUpperCase().replace(/[^a-zA-Z0-9]+/g, '_')
+                        : 'UNKNOWN_LABEL'
+                    }_COLUMN`}
+                  >
+                    {headCell.label}
+                  </div>
+                </th>
+              ))}
+            </tr>
+          </thead>
+          <tbody className="tableBody" data-id="TABLE_BODY">
+            {data?.map((row, rowIndex) => {
+              return (
+                <tr key={rowIndex} data-i={rowIndex} className={`row`}>
+                  {headCells?.map((headCell) => {
+                    const cellContent = row[headCell.id] !== '_' && (
+                      <div
+                        data-id="TEXT_DESCRIPTION"
+                        className="tableData"
+                        style={{
+                          width: headCell.width,
+                          minWidth: headCell.minWidth,
+                        }}
+                      >
+                        {row[headCell.id]}
+                      </div>
+                    )
+
+                    return (
+                      <td
+                        key={headCell.id}
+                        style={{
+                          width: headCell.width,
+                          minWidth: headCell.minWidth,
+                        }}
+                      >
+                        {cellContent}
+                      </td>
+                    )
+                  })}
+                </tr>
+              )
+            })}
+            {isFormOpen ? (
+              <tr key={''} data-i={''} className={`row`}>
+                <td key={'Parameter name'}>
+                  <div data-id="TEXT_DESCRIPTION" className="tableData">
+                    <Input
+                      placeholder="paramter name"
+                      size="large"
+                      type="text"
+                      //   errorMsg={!!errors.name && errors.name}
+                      onChange={(value) => {
+                        setFieldValue('name', value)
+                      }} // Pass the value directly
+                      value={values.name} // Bind value to the state
+                      disabled={readOnly}
+                    />
+                  </div>
+                </td>
+
+                <td key={'parameter in'}>
+                  <div data-id="TEXT_DESCRIPTION" className="tableData">
+                    <SelectGroup
+                      disabled={readOnly}
+                      value={{
+                        label: capitalize(values.in),
+                        value: capitalize(values.in),
+                      }}
+                      onChange={(item) => setFieldValue('in', item?.value?.toLowerCase())} // Updates state on selection
+                      options={[
+                        {
+                          list: [
+                            { label: 'Query', value: 'query' },
+                            { label: 'Header', value: 'header' },
+                            { label: 'Path', value: 'path' },
+                            { label: 'Body', value: 'body' },
+                          ],
+                        },
+                      ]}
+                      errorMsg={!!errors.in && errors.in}
+                      isMultiple={false}
+                      withSearch={false}
+                      clearable={false}
+                    />{' '}
+                  </div>
+                </td>
+
+                <td key={'parameter schema type'}>
+                  <div data-id="TEXT_DESCRIPTION" className="tableData">
+                    <SelectGroup
+                      disabled={readOnly}
+                      value={{
+                        label: capitalize(values.schema.type),
+                        value: capitalize(values.schema.type),
+                      }}
+                      errorMsg={!!errors.schema && errors.schema}
+                      onChange={(item) => setFieldValue('schema.type', item?.value?.toLowerCase())} // Updates state on selection
+                      options={[
+                        {
+                          list: [
+                            { label: 'String', value: 'string' },
+                            { label: 'Integer', value: 'integer' },
+                            { label: 'Boolean', value: 'boolean' },
+                            { label: 'Object', value: 'object' },
+                            { label: 'Array', value: 'array' },
+                            { label: 'Number', value: 'number' },
+                          ],
+                        },
+                      ]}
+                      isMultiple={false}
+                      withSearch={false}
+                    />{' '}
+                  </div>
+                </td>
+
+                <td key={'parameter required'}>
+                  <div data-id="is required" className="tableData">
+                    {
+                      readOnly ?
+                      <>{values.required ? 'True': 'False'}</>
+                      :
+                      <Switch
+                      checked={values.required}
+                      onClick={() => {
+                        if (readOnly) {
+                          return
+                        }
+                        setFieldValue('required', !values.required)
+                      }}
+                    />
+                    }
+                  </div>
+                </td>
+
+                <td key={'parameter schema desc'}>
+                  <div data-id="TEXT_DESCRIPTION" className="tableData">
+                    <div className={styles.paramDescContainer}>
+                      <Tooltip
+                        arrowWithBorder
+                        placement="bottom-end"
+                        type="function"
+                        trigger="click"
+                        delay={[0, 0]}
+                        onCreate={(instance) => setTooltipRef(instance)}
+                        content={
+                          <div className={styles.editDescTooltipContent}>
+                            <p className={styles.editDescTooltipContent_header}>Description</p>
+                            <TextArea
+                              value={text || values.description}
+                              onChange={(value) => {
+                                setText(value)
+                              }}
+                              disabled={readOnly}
+                              placeholder="Describe parameter..."
+                            />
+                            {!readOnly && (
+                              <Button
+                                className={styles.editDescTooltipContent_btn}
+                                variant="outlined"
+                                size="small"
+                                onClick={() => {
+                                  setFieldValue('description', text)
+                                  tooltipRef?.hide()
+                                }}
+                              >
+                                Apply
+                              </Button>
+                            )}
+                          </div>
+                        }
+                      >
+                        <Button
+                          className={styles.editDescBtn}
+                          variant="link"
+                          color="action"
+                          endIcon={<SVGLoader src={EditIcon} width="1.5rem" height="1.5rem" />}
+                        >
+                          {readOnly ? 'View ' : 'Add '} Description
+                        </Button>
+                      </Tooltip>
+
+                      <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={() => {
+                            resetForm()
+                            setText('')
+                            setIsFormOpen(false)
+                          }} // Correctly delete the new row
+                        />
+                      )}
+
+                      {!readOnly && (
+                        <Button
+                          className={styles.deleteParamBtn}
+                          variant="link"
+                          color="success"
+                          disabled={!isValid}
+                          endIcon={<SVGLoader src={AddRow} width="0.125rem" height="0.125rem" />}
+                          onClick={() => {
+                            setText('')
+                            submitForm()
+                          }} // Save the new row when clicked
+                        />
+                      )}
+                    </div>{' '}
+                  </div>
+                </td>
+              </tr>
+            ) : (
+              <>
+                {!readOnly && (
+                  <tr key={'addNew'} data-i={'addNew'} className={`row`}>
+                    <td colSpan={5}>
+                      <Button
+                        variant="link"
+                        color="primary"
+                        onClick={() => {
+                          setIsFormOpen((prev) => !prev)
+                        }}
+                      >
+                        + Add Parameter
+                      </Button>
+                    </td>
+                  </tr>
+                )}
+              </>
+            )}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  )
+}
+
+export default ParamterTable

package/src/constants/index.ts

@@ -1,20 +1,36 @@
 export const methodColorMapping = {
-  GET: {
+  get: {
     label: 'Get',
     color: '#3A6CD1',
   },
-  POST: {
+  post: {
     label: 'Post',
     color: '#3AAA35',
   },
-  PUT: {
+  put: {
     label: 'Put',
     color: '#FAAD14',
   },
-  DELETE: {
+  delete: {
     label: 'Delete',
     color: '#DA3F3F',
   },
+  PATCH: {
+    label: 'Patch',
+    color: '#FAAD14',
+  },
+  OPTIONS: {
+    label: 'Options',
+    color: '#FAAD14',
+  },
+  TRACE: {
+    label: 'Trace',
+    color: '#FAAD14',
+  },
+  HEAD: {
+    label: 'Head',
+    color: '#FAAD14',
+  },
 }
 
 export const paramsTableHeaders = [
@@ -27,7 +43,7 @@ export const paramsTableHeaders = [
   },
   { id: 'paramType', label: 'In', sortable: false, classes: 'requiredParam' },
   { id: 'schemaType', label: 'Schema-Type', sortable: false, classes: 'requiredParam' },
-  { id: 'isRequired', label: 'Required', sortable: false, classes: 'requiredParam' },
+  { id: 'required', label: 'Required', sortable: false, classes: 'requiredParam' },
   { id: 'description', label: 'Description', sortable: false },
 ]
 
@@ -42,7 +58,8 @@ export const httpStatusCodes = [
   300, 301, 302, 303, 304, 305, 306, 307, 308,
 
   // 4xx: Client errors
-  400, 401, 402, 403, 404, 405, 406, 407, 408, 409, 410, 411, 412, 413, 414, 415, 416, 417, 418, 421, 422, 423, 424, 425, 426, 428, 429, 431, 451,
+  400, 401, 402, 403, 404, 405, 406, 407, 408, 409, 410, 411, 412, 413, 414, 415, 416, 417, 418,
+  421, 422, 423, 424, 425, 426, 428, 429, 431, 451,
 
   // 5xx: Server errors
   500, 501, 502, 503, 504, 505, 506, 507, 508, 510, 511,

package/src/helpers/layout.helper.ts

@@ -0,0 +1,118 @@
+import { TransformedPathsArray } from '@entities/layout.type'
+import { OpenAPIFile } 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()
+    }
+  }
+  return {
+    ...openApiJson,
+    paths: transformPathsToArray(openApiJson.paths),
+  } as TransformedOpenApi
+}
+
+export const transformOpenApiObjectToOrigin = (values: TransformedOpenApi): OpenAPIFile => {
+  const object = {
+    ...values,
+    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()
+      }
+      object.components.securitySchemes[authKey[0]].type =
+        object?.components?.securitySchemes?.[authKey[0]]?.type?.toUpperCase()
+    }
+  }
+  return object
+}
+
+export const transformPathsToArray = (paths: OpenAPIFile['paths']): TransformedPathsArray | any => {
+  const transformedPaths = Object.entries(paths).map(([path, methods]) => ({
+    path,
+    methods: Object.entries(methods).map(([method, methodProps]) => {
+      const obj: any = {
+        ...methodProps,
+        type: method,
+        tags: methodProps.tags,
+        responses: Object.entries(methodProps.responses).map(([code, codeProps]) => {
+          const contentType = Object.keys(codeProps.content || {})[0]
+          return {
+            code,
+            content: {
+              contentType,
+              schema: codeProps.content?.[contentType]?.schema,
+            },
+          }
+        }),
+      }
+      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,
+                },
+              }
+            })
+          : {}
+      }
+      return obj
+    }),
+  }))
+  return transformedPaths
+}
+
+export const transformPathsArrayToOrigin = (paths: TransformedPathsArray): OpenAPIFile['paths'] => {
+  return paths.reduce((acc, { path, methods }) => {
+    acc[path] = methods.reduce((methodAcc, { type, tags, responses, requestBody, ...rest }) => {
+      // Initialize the method object
+      methodAcc[type] = {
+        ...rest,
+        tags,
+        responses: responses.reduce((respAcc, { code, content }) => {
+          respAcc[code] = {
+            description: 'Success', // Assuming this is static from the original data
+            content: content.contentType
+              ? { [content.contentType]: { schema: content.schema } }
+              : {},
+          }
+          return respAcc
+        }, {} as Record<string, any>),
+      }
+
+      // Add requestBody for non-GET methods
+      if (type !== 'get' && requestBody?.length > 0) {
+        methodAcc[type].requestBody = {
+          content: {
+            [requestBody[0].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,
+              },
+            },
+          },
+        }
+      }
+
+      return methodAcc
+    }, {} as Record<string, any>)
+
+    return acc
+  }, {} as OpenAPIFile['paths'])
+}

package/src/helpers/methodAccordion.helper.ts

@@ -0,0 +1,20 @@
+export const handleStatusColor = (code: number): string => {
+  if (code >= 200 && code < 300) {
+    return 'green' // 2xx codes
+  } else if (code >= 400 && code < 500) {
+    return 'red' // 4xx codes
+  } else if (code >= 500 && code < 600) {
+    return 'red' // 5xx codes
+  } else if (code >= 100 && code < 200) {
+    return 'blue' // 1xx codes (Informational)
+  } else if (code >= 300 && code < 400) {
+    return 'orange' // 3xx codes (Redirection)
+  } else {
+    return 'gray' // Default or invalid status codes
+  }
+}
+
+export const  capitalize = (str)=> {
+  if (!str) return "";
+  return str.charAt(0).toUpperCase() + str.slice(1);
+}

package/src/layout/layout.module.css

@@ -20,6 +20,7 @@
 
     .editorSide {
       background-color: #fff;
+      padding-bottom: 1.25rem;
     }
 
     .livePreviewSide {