@digi-frontend/dgate-api-documentation 1.0.55 → 1.0.57

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

@@ -1,3 +1,4 @@
+import { JSX } from 'react';
 export type DialogStatus = 'error' | 'info' | 'warning';
 export type DialogSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 export type ButtonType = 'text' | 'submit' | 'reset';
@@ -42,4 +43,5 @@ export interface CommonDialogProps {
     submitBtnComponent?: JSX.Element | null;
     withClose?: boolean;
     noActions?: boolean;
+    closeIcon?: JSX.Element;
 }

package/dist/types/components/dialog/index.d.ts

@@ -1,4 +1,4 @@
 import './style.scss';
 import { CommonDialogProps } from './dialog';
-declare const CommonDialog: ({ status, content, onSubmit, onCancel, onClose, open, size, icon, noActions, }: CommonDialogProps) => import("react/jsx-runtime").JSX.Element;
+declare const CommonDialog: ({ status, content, onSubmit, onCancel, onClose, open, size, icon, noActions, closeIcon, }: CommonDialogProps) => import("react/jsx-runtime").JSX.Element;
 export default CommonDialog;

package/dist/types/layout/docsComponents/DocsContent/DocsContent.d.ts

@@ -1,12 +1,13 @@
 import React from 'react';
 import './style.scss';
 import { EndpointData, OverviewData } from 'src/layout/docsLayout';
-declare const DocsContent: ({ data, activeType, setActiveItemData, setActiveType, setExpandedSections, }: {
+declare const DocsContent: ({ data, activeType, setActiveItemData, setActiveType, setExpandedSections, onProductNavigate, }: {
     data: OverviewData | EndpointData;
     activeType: "OVERVIEW" | "ENDPOINT";
     setActiveItemData: React.Dispatch<React.SetStateAction<OverviewData | EndpointData>>;
     setActiveType: React.Dispatch<React.SetStateAction<"OVERVIEW" | "ENDPOINT">>;
     setExpandedSections: React.Dispatch<React.SetStateAction<Record<string, boolean>>>;
     toggleSection: (apiId: string, sectionId: string, resetOthers?: boolean, key?: string[]) => void;
+    onProductNavigate?: (productId: number) => void;
 }) => import("react/jsx-runtime").JSX.Element;
 export default DocsContent;

package/dist/types/layout/docsComponents/DocsContent/OverviewPage/index.d.ts

@@ -0,0 +1,9 @@
+import './style.scss';
+import { EndpointData, OverviewData } from 'src/layout/docsLayout';
+export declare const OverviewPage: ({ data, setActiveItemData, setActiveType, setExpandedSections, onProductNavigate, }: {
+    data: OverviewData;
+    setActiveItemData: React.Dispatch<React.SetStateAction<OverviewData | EndpointData>>;
+    setActiveType: React.Dispatch<React.SetStateAction<"OVERVIEW" | "ENDPOINT">>;
+    setExpandedSections: React.Dispatch<React.SetStateAction<Record<string, boolean>>>;
+    onProductNavigate?: (productId: number) => void;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/types/layout/docsComponents/DocsSideMenuTree/DocsSideMenuTree.d.ts

@@ -1,7 +1,7 @@
 import './style.scss';
 import React from 'react';
 import { EndpointData, OverviewData } from 'src/layout/docsLayout';
-declare const DocsSideMenuTree: ({ apis, setActiveItemData, activeItemData, activeType, expandedSections, setExpandedSections, isFirstApiExpanded, setIsFirstApiExpanded, setActiveType, toggleSection, canSelectFirstApi, }: {
+declare const DocsSideMenuTree: ({ apis, setActiveItemData, activeItemData, activeType, expandedSections, setExpandedSections, isFirstApiExpanded, setIsFirstApiExpanded, setActiveType, toggleSection, canSelectFirstApi, canFocusSection, setCanFocusSection, }: {
     apis: OverviewData[];
     setActiveItemData: React.Dispatch<React.SetStateAction<OverviewData | EndpointData>>;
     activeItemData: OverviewData | EndpointData;
@@ -13,5 +13,7 @@ declare const DocsSideMenuTree: ({ apis, setActiveItemData, activeItemData, acti
     activeType: "OVERVIEW" | "ENDPOINT";
     toggleSection: (apiId: string, sectionId: string, resetOthers?: boolean, key?: string[]) => void;
     canSelectFirstApi?: boolean;
+    canFocusSection: boolean;
+    setCanFocusSection: React.Dispatch<React.SetStateAction<boolean>>;
 }) => import("react/jsx-runtime").JSX.Element;
 export default DocsSideMenuTree;

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

@@ -4,6 +4,7 @@ import { ApiSpecModel } from '@entities/index';
 interface ILayoutProps {
     apis?: ApiSpecModel[];
     activeApiId?: string;
+    onProductNavigate?: (productId: number) => void;
 }
 export interface TagData {
     id: string;
@@ -31,5 +32,5 @@ export interface OverviewData extends Omit<ApiSpecModel, 'metaData'> {
     tags: Record<string, TagData[]>;
     servers: OpenAPIFile['servers'];
 }
-declare const _default: React.MemoExoticComponent<({ apis, activeApiId }: ILayoutProps) => JSX.Element>;
+declare const _default: React.MemoExoticComponent<({ apis, activeApiId, onProductNavigate }: ILayoutProps) => JSX.Element>;
 export default _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@digi-frontend/dgate-api-documentation",
-  "version": "1.0.55",
+  "version": "1.0.57",
   "main": "dist/src/index.js",
   "module": "dist/src/index.js",
   "types": "dist/types/index.d.ts",

package/src/components/InfoForm/InfoForm.tsx

@@ -334,23 +334,23 @@ const InfoForm = ({ readOnly }: { readOnly?: boolean }) => {
 
   return (
     <form className={styles.apiInfoForm} onSubmit={(e) => e.preventDefault()}>
-      <Input
-        size="large"
-        placeholder="e.g. Payments"
-        label="API Name"
-        required
-        value={values?.info?.title}
-        maxLength={35}
-        onChange={(value) => {
-          setFieldValue('info.title', value)
-        }}
-        onClear={() => {
-          setFieldValue('info.title', '')
-        }}
-        errorMsg={errors?.info?.title}
-        restrictedCharactersRegex={regex.basic}
-      />
       <div className={styles.apiDocRow}>
+        <Input
+          size="large"
+          placeholder="e.g. Payments"
+          label="API Name"
+          required
+          value={values?.info?.title}
+          maxLength={35}
+          onChange={(value) => {
+            setFieldValue('info.title', value)
+          }}
+          onClear={() => {
+            setFieldValue('info.title', '')
+          }}
+          errorMsg={errors?.info?.title}
+          restrictedCharactersRegex={regex.basic}
+        />
         <Input size="large" label="Version" required value={values?.info?.version} disabled />
       </div>
       <TextArea

package/src/components/LivePreview/LivePreview.module.scss

@@ -22,21 +22,24 @@
       color: #12131a;
     }
   }
+
+  .description_preview {
+    word-break: break-all;
+  }
 }
 
 .requestAccordion,
 .responseAccordion {
-  background-color: #F4C5C5;
-  border: 1px solid #DA3F3F;
+  background-color: #f4c5c5;
+  border: 1px solid #da3f3f;
   border-radius: 0.3125rem !important;
   box-shadow: none !important;
   margin-bottom: 0 !important;
   cursor: default !important;
-  margin-top: .625rem;
+  margin-top: 0.625rem;
 
   :global(.accordion-header) {
-
-  background-color: #F4C5C5;
+    background-color: #f4c5c5;
     display: flex;
     align-items: center;
     justify-content: space-between;
@@ -51,8 +54,7 @@
     padding: 1.25rem !important;
     padding: 0 !important;
 
-
-  background-color: #F4C5C5;
+    background-color: #f4c5c5;
     :global(.jsonField) {
       div {
         textarea {
@@ -75,13 +77,13 @@
 
   .accordionContent {
     max-width: 100%;
-    padding-left: .625rem;
-    padding-right: .625rem;
-    padding-top: .9375rem;
-    
-    ol{
+    padding-left: 0.625rem;
+    padding-right: 0.625rem;
+    padding-top: 0.9375rem;
+
+    ol {
       padding-left: 1.7rem;
-      li{
+      li {
         max-width: 100%;
         // white-space: normal;
         word-break: break-all;
@@ -111,7 +113,6 @@
     display: flex;
     align-items: center;
 
-
     svg {
       transition: rotate 0.2s ease-in-out;
     }

package/src/components/LivePreview/LivePreview.tsx

@@ -167,6 +167,7 @@ const LivePreview: React.FC<LivePreviewProps> = ({ transformedData, openApiError
           <SimpleLabelValue
             key={'description'}
             label={'Description: '}
+            className={styles.description_preview}
             value={info?.description?.trim() || '-'}
           />
 

package/src/components/MethodAccordion/MethodAccordion.tsx

@@ -1,15 +1,13 @@
 import { useEffect, useRef, useState } from 'react'
-import {
-  Accordion,
-  Button,
-  Input,
-  SelectGroup,
-  SelectGroupV2,
-  Switch,
-  TextArea,
-} from 'digitinary-ui'
+import { Accordion, Button, Input, SelectGroup, Switch, TextArea } from 'digitinary-ui'
 import SVGLoader from '../../components/SVGLoader/SVGLoader'
-import { DeleteIcon, DownArrowIcon, EditIcon, DeleteOutlinedIcon } from '../../assets/icons'
+import {
+  DeleteIcon,
+  DownArrowIcon,
+  EditIcon,
+  DeleteOutlinedIcon,
+  CloseIcon,
+} from '../../assets/icons'
 import PlusIcon from '../../assets/icons/Plus.svg'
 import PlusSquare from '../../assets/icons/PlusSquare.svg'
 import { httpStatusCodes, methodColorMapping, paramsTableHeaders } from '../../constants/index'
@@ -61,7 +59,8 @@ const MethodsAccordion = ({
     response: false,
     method: false,
   })
-  const [isFormOpen, setIsFormOpen] = useState<'Req' | 'Res'>(undefined)
+  const [isFormOpen, setIsFormOpen] = useState<boolean>(false)
+  const [isHeaderFormOpen, setIsHeaderFormOpen] = useState<boolean>(false)
   const [tooltipRefs, setTooltipRefs] = useState<{ [key: number]: any }>({})
   const [tableData, setTableData] = useState([])
   const [tableResponseData, setTableResponseData] = useState([])
@@ -250,114 +249,102 @@ const MethodsAccordion = ({
               <span className="enumText">{data?.schema?.enum?.join('/\u200B')}</span>
             ) : (
               <div data-id="TEXT_DESCRIPTION" className="tableData">
-                {method.responses[responseIndex]?.headers[index]?.schema &&
-                method.responses[responseIndex]?.headers[index]?.schema?.type?.toLowerCase() !=
-                  'array' &&
-                method.responses[responseIndex]?.headers[index]?.schema?.type?.toLowerCase() !=
-                  'object' ? (
-                  <Tooltip
-                    disabled={
-                      method.responses[responseIndex]?.headers[
-                        index
-                      ]?.schema?.type?.toLowerCase() == 'array' ||
-                      method.responses[responseIndex]?.headers[
-                        index
-                      ]?.schema?.type?.toLowerCase() == 'object'
-                    }
-                    arrowWithBorder
-                    placement="bottom-end"
-                    type="function"
-                    trigger="click"
-                    delay={[0, 0]}
-                    onCreate={(instance) => setTooltipEnumRef(instance)}
-                    content={
-                      <div className={styles.editDescTooltipContent}>
-                        <p className={styles.editDescTooltipContent_header}>Enum</p>
-                        {!!method.responses[responseIndex]?.headers[index]?.schema?.enum &&
-                          !!method.responses[responseIndex]?.headers[index]?.schema?.enum.length &&
-                          method.responses[responseIndex]?.headers[index]?.schema?.enum?.map(
-                            (item, _index) => (
-                              <Input
-                                key={index}
-                                className={'methodDescForEnum'}
-                                required
-                                clearable={false}
-                                placeholder="Enter Enum value..."
-                                value={item}
-                                onChange={(value) => {
-                                  setFieldValue(
-                                    `responses[${currentResponse}].headers[${index}].schema.enum[${_index}]`,
-                                    value.toString()
-                                  )
-                                }}
-                              />
-                            )
-                          )}
-                        <p
-                          className={'addEnumButton'}
-                          onClick={() => {
-                            setFieldValue(
-                              `responses[${currentResponse}].headers[${index}].schema.enum`,
-                              [...method.responses[responseIndex]?.headers[index]?.schema?.enum, '']
-                            )
-                          }}
-                        >
-                          <SVGLoader src={PlusSquare} />
-                          Add New Enum
-                        </p>
-                        {!readOnly && (
-                          <Button
-                            className={styles.editDescTooltipContent_btn}
-                            variant="outlined"
-                            size="small"
-                            type="button"
+                {(() => {
+                  const schema = method?.responses[currentResponseIndex]?.headers[item]?.schema
+                  const schemaType = schema?.type?.toLowerCase()
+                  const isComplex = schemaType === 'array' || schemaType === 'object'
+                  const enumList = schema?.enum || []
+
+                  if (!schema || isComplex) return '-'
+
+                  return (
+                    <Tooltip
+                      disabled={isComplex}
+                      arrowWithBorder
+                      placement="bottom-end"
+                      type="function"
+                      trigger="click"
+                      delay={[0, 0]}
+                      onCreate={(instance) => setTooltipEnumRef(instance)}
+                      content={
+                        <div className={styles.editDescTooltipContent}>
+                          <p className={styles.editDescTooltipContent_header}>Enum</p>
+
+                          {enumList.map((enumVal, enumIndex) => (
+                            <Input
+                              key={enumIndex}
+                              className="methodDescForEnum"
+                              required
+                              clearable={false}
+                              placeholder="Enter Enum value..."
+                              value={enumVal}
+                              onChange={(value) => {
+                                setFieldValue(
+                                  `responses[${currentResponseIndex}].headers["${item}"].schema.enum[${enumIndex}]`,
+                                  value
+                                )
+                              }}
+                            />
+                          ))}
+
+                          <p
+                            className="addEnumButton"
                             onClick={() => {
                               setFieldValue(
-                                `responses[${currentResponse}].headers[${index}].schema.enum`,
-                                [...method.parameters[index].schema.enum]
+                                `responses[${currentResponseIndex}].headers["${item}"].schema.enum`,
+                                [...enumList, '']
                               )
-                              setEnumFields([])
-                              tooltipEnumRef?.hide()
                             }}
-                            disabled={
-                              (enumFields.length > 0 &&
-                                enumFields?.filter((item) => !item).length) ||
-                              (method?.parameters[index]?.schema?.enum &&
-                                method?.parameters[index]?.schema?.enum?.length > 0 &&
-                                method?.parameters[index]?.schema?.enum?.filter((item) => !item)
-                                  .length)
-                            }
                           >
-                            Apply
-                          </Button>
-                        )}
-                      </div>
-                    }
-                  >
-                    {method.responses[responseIndex]?.headers[index]?.schema?.enum &&
-                    method.responses[responseIndex]?.headers[index]?.schema?.enum?.length > 0 ? (
-                      <span className={'enumText'}>
-                        {method.responses[responseIndex]?.headers[index]?.schema?.enum?.join(
-                          '/\u200B'
-                        )}
-                      </span>
-                    ) : (
-                      <Button
-                        className={styles.editDescBtn}
-                        id="EnumButton"
-                        variant="link"
-                        color="action"
-                        endIcon={
-                          <SVGLoader id="enumIcon" src={PlusIcon} width="1.5rem" height="1.5rem" />
-                        }
-                      >
-                        Add
-                      </Button>
-                    )}
-                  </Tooltip>
-                ) : (
-                  '-'
-                )}{' '}
+                            <SVGLoader src={PlusSquare} />
+                            Add New Enum
+                          </p>
+
+                          {!readOnly && (
+                            <Button
+                              className={styles.editDescTooltipContent_btn}
+                              variant="outlined"
+                              size="small"
+                              type="button"
+                              onClick={() => {
+                                setFieldValue(
+                                  `responses[${currentResponseIndex}].headers["${item}"].schema.enum`,
+                                  [...enumList]
+                                )
+                                setEnumFields([])
+                                tooltipEnumRef?.hide()
+                              }}
+                              disabled={enumList.length === 0 || enumList.some((val) => !val)}
+                            >
+                              Apply
+                            </Button>
+                          )}
+                        </div>
+                      }
+                    >
+                      {enumList.length > 0 ? (
+                        <span className="enumText">{enumList.join('/\u200B')}</span>
+                      ) : (
+                        <Button
+                          className={styles.editDescBtn}
+                          id="EnumButton"
+                          variant="link"
+                          color="action"
+                          endIcon={
+                            <SVGLoader
+                              id="enumIcon"
+                              src={PlusIcon}
+                              width="1.5rem"
+                              height="1.5rem"
+                            />
+                          }
+                        >
+                          Add
+                        </Button>
+                      )}
+                    </Tooltip>
+                  )
+                })()}
               </div>
             )}
           </>
@@ -697,9 +684,11 @@ const MethodsAccordion = ({
       }
       setCurrentResponseIndex(responseIndex)
       indexRef.current = responseIndex
-      setTableResponseRecords(
-        generateResponseTableData(method.responses[responseIndex].headers, responseIndex)
-      )
+      if (responseIndex >= 0) {
+        setTableResponseRecords(
+          generateResponseTableData(method.responses[responseIndex].headers, responseIndex)
+        )
+      }
     }
   }, [selectedStatusCode, method.responses, setFieldValue])
 
@@ -832,7 +821,7 @@ const MethodsAccordion = ({
                 id="paramter-request-table"
                 data={tableRecords}
                 headCells={paramsTableHeaders}
-                isFormOpen={isFormOpen && isFormOpen == 'Req'}
+                isFormOpen={isFormOpen}
                 setIsFormOpen={setIsFormOpen}
                 saveNewRow={saveNewRow}
                 readOnly={readOnly}
@@ -905,8 +894,8 @@ const MethodsAccordion = ({
                 id="paramter-response-table"
                 data={tableResponseRecords}
                 headCells={paramsTableHeaders}
-                isFormOpen={isFormOpen && isFormOpen == 'Res'}
-                setIsFormOpen={setIsFormOpen}
+                isFormOpen={isHeaderFormOpen}
+                setIsFormOpen={setIsHeaderFormOpen}
                 saveNewRow={saveNewResponseRow}
                 readOnly={readOnly}
                 isRequest={false}
@@ -1006,12 +995,21 @@ const MethodsAccordion = ({
         }}
         onCancel={{
           text: 'Cancel',
-          color: 'normal',
+          color: 'action',
           fullWidth: true,
+          variant: 'outlined',
         }}
         onClose={() => setOpenDeleteDialog(false)}
         open={openDeleteDialog}
         icon={<SVGLoader src={DeleteOutlinedIcon} width="4.0625rem" height="4.0625rem" />}
+        closeIcon={
+          <SVGLoader
+            src={CloseIcon}
+            width="1.5rem"
+            height="1.5rem"
+            onClick={() => setOpenDeleteDialog(false)}
+          />
+        }
       />
       <CommonDialog
         status="error"
@@ -1041,12 +1039,21 @@ const MethodsAccordion = ({
         }}
         onCancel={{
           text: 'Cancel',
-          color: 'normal',
+          color: 'action',
           fullWidth: true,
+          variant: 'outlined',
         }}
         onClose={() => setOpenHeaderDeleteDialog(false)}
         open={openHeaderDeleteDialog}
         icon={<SVGLoader src={DeleteOutlinedIcon} width="4.0625rem" height="4.0625rem" />}
+        closeIcon={
+          <SVGLoader
+            src={CloseIcon}
+            width="1.5rem"
+            height="1.5rem"
+            onClick={() => setOpenDeleteDialog(false)}
+          />
+        }
       />
     </div>
   )

package/src/components/dialog/dialog.ts

@@ -1,3 +1,5 @@
+import { JSX } from 'react'
+
 export type DialogStatus = 'error' | 'info' | 'warning'
 export type DialogSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl'
 export type ButtonType = 'text' | 'submit' | 'reset'
@@ -55,4 +57,5 @@ export interface CommonDialogProps {
   submitBtnComponent?: JSX.Element | null
   withClose?: boolean
   noActions?: boolean
+  closeIcon?: JSX.Element
 }

package/src/components/dialog/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 // @ts-ignore
-import { Dialog, Button, CloseIcon, infoIcon } from 'digitinary-ui'
+import { Dialog, Button } from 'digitinary-ui'
 import SVGLoader from '../SVGLoader/SVGLoader'
 import './style.scss'
 import { CommonDialogProps } from './dialog'
@@ -20,6 +20,7 @@ const CommonDialog = ({
     </>
   ),
   noActions = false,
+  closeIcon,
 }: CommonDialogProps) => {
   const handleClose = () => {
     onClose() // Always close the dialog first
@@ -36,13 +37,11 @@ const CommonDialog = ({
           <div className={`icon ${status}`}>{icon}</div>
         </div>
       )}
-      <SVGLoader
-        src={Closecircle}
-        width={'1.5rem'}
-        height={'1.5rem'}
-        onClick={handleClose}
-        className="close-icon"
-      />
+      <div className="close-icon">
+        {closeIcon ?? (
+          <SVGLoader src={Closecircle} width={'1.5rem'} height={'1.5rem'} onClick={handleClose} />
+        )}
+      </div>
 
       {content}
       {!!noActions ? null : (