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

package/src/components/MethodAccordion/MethodAccordion.tsx

@@ -1,81 +1,428 @@
-import React from 'react'
-import { Accordion, Button, SelectGroup, Switch, Table, TextArea } from 'digitinary-ui'
+import React, { useEffect, useState } from 'react'
+import { Accordion, Button, Input, SelectGroup, Switch, TextArea } from 'digitinary-ui'
 import SVGLoader from '../../components/SVGLoader/SVGLoader'
-import { DeleteIcon, DownArrowIcon, EditIcon } from '../../assets/icons'
+import {
+  CheckMarkSquare,
+  DeleteIcon,
+  DownArrowIcon,
+  EditIcon,
+  deleteOutlinedIcon,
+} from '../../assets/icons'
 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'
 
-const data = Array(4).fill({
-  paramName: 'search',
-  paramType: 'Query',
-  schemaType: 'String',
-  isRequired: <Switch checked />,
-  description: (
-    <div className={styles.paramDescContainer}>
-      <Button className={styles.editDescBtn} variant='link' color='action' endIcon={<SVGLoader src={EditIcon} width='1.5rem' height='1.5rem' />}>
-        Add Description
-      </Button>
-      <div className={styles.paramDescContainer_separator}></div>
-      <Button className={styles.deleteParamBtn} variant='link' color='error' endIcon={<SVGLoader src={DeleteIcon} width='1.125rem' height='1.125rem' />}></Button>
+const httpStatusCodeOptions = httpStatusCodes.map((code) => ({
+  label: (
+    <div className={styles.statusCodeOptionContainer}>
+      <div
+        className={styles.statusCodeOptionCircle}
+        style={{ backgroundColor: handleStatusColor(code) }}
+      ></div>
+      <span>{code}</span>
     </div>
   ),
-})
+  value: code,
+}))
+
+const MethodsAccordion = ({
+  method,
+  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,
+    response: false,
+    method: false,
+  })
+  const [isFormOpen, setIsFormOpen] = useState(false)
+  const [tooltipRefs, setTooltipRefs] = useState<{ [key: number]: any }>({})
+  const [tableData, setTableData] = useState([])
+  const [openDeleteDialog, setOpenDeleteDialog] = useState(false)
+  const [selectedParamIndex, setSelectedParamIndex] = useState<number | null>(null)
+  const [selectedParamName, setSelectedParamName] = useState<string | null>(null)
+
+  const onTableChange = (key, value, index) => {
+    const newTableData = tableData.map((item, tIndex) => {
+      if (tIndex === index) {
+        return { ...item, [key]: value }
+      } else {
+        return item
+      }
+    })
+
+    setTableData(newTableData)
+  }
+
+  const generateTableData = (items) => {
+    return items.map((item, index) => {
+      return {
+        id: index,
+        paramName: item.name,
+        paramType: capitalize(item.in),
+        schemaType: capitalize(item.schema?.type) || '',
+        required: (
+          <>
+            {readOnly ? (
+              item.required ? (
+                'True'
+              ) : (
+                'False'
+              )
+            ) : (
+              <Switch
+                checked={item.required}
+                onClick={() => {
+                  if (readOnly) {
+                    return null
+                  }
+                  onTableChange('required', !item.required, index)
+                  setFieldValue(`parameters[${index}][required]`, !item.required)
+                }}
+              />
+            )}
+          </>
+        ),
+        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(`parameters[${index}].description`, item.description)
+                        tooltipRefs[index]?.hide()
+                      }}
+                    >
+                      Apply
+                    </Button>
+                  )}
+                </div>
+              }
+            >
+              {readOnly ? (
+                <Button
+                  className={styles.editDescBtn}
+                  variant="link"
+                  color="action"
+                  // endIcon={<SVGLoader src={EditIcon} width="1.5rem" height="1.5rem" />}
+                >
+                  {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 ? 'View ' : 'Add '} Description
+                </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>
+        ),
+      }
+    })
+  }
+
+  const [tableRecords, setTableRecords] = useState()
+
+  const confirmDeleteParameter = () => {
+    if (selectedParamIndex !== null) {
+      setTableData((prev) => prev.filter((_, i) => i !== selectedParamIndex))
+      setFieldValue(
+        `parameters`,
+        method?.parameters?.filter((_, i) => i !== selectedParamIndex)
+      )
+    }
+    setOpenDeleteDialog(false)
+    setSelectedParamIndex(null)
+  }
+
+  const handleDeleteClick = (id: number, name: string) => {
+    setSelectedParamIndex(id)
+    setSelectedParamName(name)
+
+    setOpenDeleteDialog(true)
+  }
+
+  const saveNewRow = (values) => {
+    setTableData([...tableData, values])
+    setFieldValue(`parameters`, [...method.parameters, values])
+  }
+
+  useEffect(() => {
+    setTableRecords(generateTableData(tableData))
+  }, [tableData])
+
+  useEffect(() => {
+    if (method?.parameters) {
+      setTableRecords(generateTableData(method.parameters))
+      setTableData(method.parameters)
+    }
+  }, [method, path])
 
-const MethodsAccordion = () => {
   return (
-    <div className={styles.methodAccordionContainer}>
+    <div>
       <Accordion
+        expanded={isExpanded.method}
+        onChange={() => setIsExpanded((prev) => ({ ...prev, method: !prev.method }))}
         className={styles.methodAccordion}
-        children={<TextArea label='Description' />}
         summary={
           <div className={styles.methodSummaryContainer}>
             <div className={styles.methodSummary}>
-              <span style={{ backgroundColor: methodColorMapping?.POST?.color ?? '#3A6CD1' }} className={styles.methodLabel}>
-                {methodColorMapping.POST.label}
+              <span
+                style={{
+                  backgroundColor: methodColorMapping?.[method?.type]?.color || '#3A6CD1',
+                }}
+                className={styles.methodLabel}
+              >
+                {methodColorMapping?.[method?.type]?.label || method?.type}
               </span>
-              <span className={styles.methodPath}>/auth/login</span>
+              <span className={styles.methodPath}>{path}</span>
             </div>
-            <div className={styles.methodExpandArrowContainer}>
-              <SVGLoader src={DownArrowIcon} width='2rem' height='2rem' />
+            <div
+              className={`${styles.methodExpandArrowContainer} ${
+                isExpanded.method ? styles.expanded : ''
+              }`}
+            >
+              <SVGLoader src={DownArrowIcon} width="2rem" height="2rem" />
             </div>
           </div>
         }
-      />
-      <div className={styles.paramsTable}>
-        <Table data={data} headCells={paramsTableHeaders} />
-      </div>
-      <Accordion
-        className={styles.requestAccordion}
-        summary={
-          <span className={styles.requestAccordionSummary}>
-            Request<span style={{ color: 'red' }}>*</span>
-          </span>
+        children={
+          <div className={styles.methodAccordionContent}>
+            {!readOnly ? (
+              <TextArea
+                className={styles.methodDesc}
+                label="Description"
+                placeholder="Describe the endpoint's purpose and functionality..."
+                value={method?.description}
+                onChange={(value) => setFieldValue('description', value)}
+              />
+            ) : (
+              <SimpleLabelValue
+                key={'description'}
+                label={'Description: '}
+                value={method?.description || '-'}
+              />
+            )}
+            <div className={styles.paramsTable}>
+              <ParamterTable
+                id="paramter-table"
+                data={tableRecords}
+                headCells={paramsTableHeaders}
+                isFormOpen={isFormOpen}
+                setIsFormOpen={setIsFormOpen}
+                saveNewRow={saveNewRow}
+                readOnly={readOnly}
+              />
+            </div>
+
+            {method?.type !== 'get' && (
+              <Accordion
+                expanded={isExpanded.request}
+                onChange={() => null}
+                className={styles.requestAccordion}
+                summary={
+                  <span className={styles.requestAccordionSummary}>
+                    <div
+                      className={styles.requestAccordionSummary_title}
+                      onClick={() =>
+                        setIsExpanded((prev) => ({
+                          ...prev,
+                          request: !prev.request,
+                        }))
+                      }
+                    >
+                      <SVGLoader
+                        className={isExpanded.request ? styles.expanded : ''}
+                        src={DownArrowIcon}
+                        width="2rem"
+                        height="2rem"
+                      />
+                      Request
+                      {method?.type !== 'delete' && <span style={{ color: 'red' }}>*</span>}
+                    </div>
+                  </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) => {
+                      setFieldValue('requestBody[0].content.schema.properties', value)
+                    }}
+                    placeholder="Enter your request body as a JSON object..."
+                  />
+                }
+              />
+            )}
+
+            <Accordion
+              expanded={isExpanded.response}
+              onChange={() => null}
+              className={styles.responseAccordion}
+              summary={
+                <span className={styles.responseAccordionSummary}>
+                  <div
+                    className={styles.responseAccordionSummary_title}
+                    onClick={() =>
+                      setIsExpanded((prev) => ({
+                        ...prev,
+                        response: !prev.response,
+                      }))
+                    }
+                  >
+                    <SVGLoader
+                      className={isExpanded.response ? styles.expanded : ''}
+                      src={DownArrowIcon}
+                      width="2rem"
+                      height="2rem"
+                    />
+                    Response<span style={{ color: 'red' }}>*</span>
+                  </div>
+
+                  <SelectGroup
+                    withSearch={false}
+                    isMultiple={false}
+                    placeholder="200"
+                    disabled={true}
+                    options={[
+                      {
+                        list: httpStatusCodeOptions,
+                      },
+                    ]}
+                    value={httpStatusCodeOptions[4]}
+                  />
+                </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
+                  }
+                  onChange={(value) => {
+                    let parsedValue = { content: '' }
+                    try {
+                      parsedValue = JSON.parse(value)
+                    } catch (err) {
+                      console.log(err)
+                    }
+                    setFieldValue('responses[0].content.schema.properties', parsedValue as any)
+                  }}
+                  placeholder="Enter your response as a JSON object..."
+                />
+              }
+            />
+            {!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>
         }
-        children={<TextArea />}
       />
-      <Accordion
-        className={styles.responseAccordion}
-        summary={
-          <span className={styles.responseAccordionSummary}>
-            Response<span style={{ color: 'red' }}>*</span>
-            <SelectGroup
-              options={[
-                {
-                  list: httpStatusCodes.map((code) => ({
-                    label: (
-                      <div className='statusCodeOptionContainer'>
-                        <div className='statusCodeOptionCircle'></div>
-                        <span>{code}</span>
-                      </div>
-                    ),
-                    value: code,
-                  })),
-                },
-              ]}
-            />
-          </span>
+      <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">{` Parameter ${selectedParamName} `}</span>?
+          </p>
         }
-        children={<TextArea />}
+        onSubmit={{
+          onClick: confirmDeleteParameter,
+          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" />}
       />
     </div>
   )

package/src/components/SimpleLabelValue/SimpleLabelValue.tsx

@@ -0,0 +1,31 @@
+import React from 'react'
+import './style.scss'
+
+type SimpleLabelValueProps = {
+  label?: string | JSX.Element
+  value?: string | number | JSX.Element | JSX.Element[]
+  color?: string
+  className?: string
+  dataId?: string
+}
+
+const SimpleLabelValue: React.FC<SimpleLabelValueProps> = ({
+  label,
+  value,
+  color,
+  className = '',
+  dataId,
+}: SimpleLabelValueProps) => {
+  const dataIdLabel =
+    typeof label === 'string' ? label?.toUpperCase()?.replaceAll(' ', '_') + '_LABEL_ID' : dataId
+  return (
+    <div className={`drawerItemContainer ${className}`}>
+      <span className="title" data-id={dataIdLabel}>
+        {label}
+      </span>
+      <span className={`text ${color ? `color-${color}` : ''}`}>{value}</span>
+    </div>
+  )
+}
+
+export default SimpleLabelValue

package/src/components/SimpleLabelValue/index.ts

@@ -0,0 +1 @@
+export { default } from './SimpleLabelValue'

package/src/components/SimpleLabelValue/style.scss

@@ -0,0 +1,30 @@
+@import '../global';
+
+.drawerItemContainer {
+  display: flex;
+  flex-direction: column;
+
+  .title {
+    color: #000;
+    font-weight: 600;
+    font-size: 24px;
+    line-height: 35px;
+    margin-bottom: 3px;
+    margin-top: 1.5rem;
+  }
+
+  .text {
+    color: #000;
+    font-weight: 400;
+    font-size: 24px;
+    line-height: 25px;
+  }
+
+  .color-green {
+    color: $success-static;
+  }
+
+  .color-red {
+    color: $error-static;
+  }
+}

package/src/components/Tooltip/Tooltip.scss

@@ -0,0 +1,130 @@
+.tooltip-custom-wrapper {
+  display: flex;
+}
+
+.tippy-box {
+  background-color: #202f5b;
+  font-size: 0.875rem;
+  border-radius: 0.3125rem;
+  width: max-content;
+  max-width: 100%;
+  overflow-wrap: break-word;
+  word-break: break-word;
+  position: relative;
+  border: 1px solid #d8dae5;
+
+  &.function {
+    .tippy-content {
+      background-color: #fff !important;
+      color: #000 !important;
+    }
+  }
+
+  &[data-placement] > .tippy-arrow:before {
+    color: #fff !important;
+  }
+
+  &.info {
+    .tippy-arrow {
+      color: #202f5b;
+    }
+  }
+
+  &.success {
+    border-radius: 1.875rem;
+    background-color: #3aaa35;
+    padding-inline: 0.625rem;
+  }
+
+  .tippy-content {
+    text-align: justify;
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+    padding: 0.625rem;
+  }
+
+  .tippy-arrow {
+    position: relative;
+    width: 1rem;
+    height: 1rem;
+  }
+
+  &[data-placement^='top'] {
+    .tippy-arrow:before {
+      bottom: -0.4375rem;
+      border-width: 0.5rem 0.5rem 0 !important;
+    }
+  }
+
+  &[data-placement^='right'] {
+    .tippy-arrow:before {
+      left: -0.4375rem;
+      border-width: 0.5rem 0.5rem 0.5rem 0 !important;
+    }
+  }
+
+  &[data-placement^='bottom'] {
+    .tippy-arrow:before {
+      top: -0.4375rem;
+      border-width: 0 0.5rem 0.5rem !important;
+    }
+  }
+
+  &[data-placement^='left'] {
+    .tippy-arrow:before {
+      right: -0.4375rem;
+      border-width: 0.5rem 0 0.5rem 0.5rem !important;
+    }
+  }
+
+  &[data-placement^='bottom-start'] {
+    .tippy-arrow {
+      transform: translate(0.937rem, 0) !important;
+    }
+  }
+
+  &[data-placement^='bottom-end'] {
+    .tippy-arrow {
+      margin-left: calc(100% - 1.937rem);
+      transform: translate(0, 0) !important;
+    }
+  }
+
+  &[data-placement^='top-start'] {
+    .tippy-arrow {
+      transform: translate(0.937rem, 0) !important;
+    }
+  }
+
+  &[data-placement^='top-end'] {
+    .tippy-arrow {
+      transform: translate(0.937rem, 0) !important;
+    }
+  }
+
+  &.arrow-with-border {
+    border: 1px solid #d8dae5;
+
+    &[data-placement] {
+      .tippy-arrow {
+        top: 1px;
+        background-color: white;
+        z-index: 9999;
+        height: 1px;
+
+        &:before {
+          width: 1rem;
+          height: 1rem;
+          background-color: white;
+          transform: rotate(45deg);
+          border: none;
+          border-left: 1px solid #d8dae5 !important;
+          border-top: 1px solid #d8dae5 !important;
+          z-index: 20000000000;
+          top: -0.6rem;
+          transform-origin: center !important;
+        }
+      }
+    }
+  }
+}