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

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.56",
   "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/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'
@@ -1006,12 +1004,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 +1048,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 : (

package/src/layout/docsComponents/DocsContent/DocsContent.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import './style.scss'
-import { TagPage } from './TagPage'
+import { OverviewPage } from './OverviewPage'
 import { EndpointPage } from './EndpointPage'
 import { EndpointData, OverviewData } from 'src/layout/docsLayout'
 
@@ -10,6 +10,7 @@ const DocsContent = ({
   setActiveItemData,
   setActiveType,
   setExpandedSections,
+  onProductNavigate,
 }: {
   data: OverviewData | EndpointData
   activeType: 'OVERVIEW' | 'ENDPOINT'
@@ -17,15 +18,17 @@ const DocsContent = ({
   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
 }) => {
   return (
     <main>
       {activeType === 'OVERVIEW' ? (
-        <TagPage
+        <OverviewPage
           data={data as OverviewData}
           setActiveItemData={setActiveItemData}
           setActiveType={setActiveType}
           setExpandedSections={setExpandedSections}
+          onProductNavigate={onProductNavigate}
         />
       ) : (
         <EndpointPage data={data as EndpointData} />

package/src/layout/docsComponents/DocsContent/{TagPage → OverviewPage}/index.tsx

@@ -3,16 +3,18 @@ import SVGLoader from '../../../../components/SVGLoader/SVGLoader'
 import { arrowRightGray, CopySticker } from '../../../../assets/icons/index'
 import { EndpointData, OverviewData } from 'src/layout/docsLayout'
 
-export const TagPage = ({
+export 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
 }) => {
   const handleVersionClick = (verObj) => {
     if (verObj.apiSpecId === data.apiSpecId) {
@@ -72,6 +74,7 @@ export const TagPage = ({
       [`api-${data.apiSpecId}-resource-${endpoint.id}`]: true,
     }))
   }
+
   return (
     <div className="api-details-page">
       <h2 className="welcome">Welcome to</h2>
@@ -104,9 +107,19 @@ export const TagPage = ({
       </div>
 
       <p className="api-desc">API Description</p>
-      <div className="api-product-tag">
-        Product with this API <span className="product-tag">{data.associatedProduct.name}</span>
-      </div>
+      {onProductNavigate && (
+        <div className="api-product-tag">
+          Product with this API{' '}
+          <span
+            className="product-tag"
+            role="button"
+            tabIndex={-1}
+            onClick={() => onProductNavigate(data.associatedProduct.productId)}
+          >
+            {data.associatedProduct.name}
+          </span>
+        </div>
+      )}
 
       <h3 className="section-title">Endpoints</h3>
 

package/src/layout/docsComponents/DocsContent/{TagPage → OverviewPage}/style.scss

@@ -101,6 +101,7 @@
       font-size: 0.75rem;
       letter-spacing: 0px;
       margin-left: 0.5rem;
+      cursor: pointer;
     }
   }
 

package/src/layout/docsComponents/DocsHeader/DocsHeader.tsx

@@ -1,12 +1,11 @@
 import React, { useState, useRef } from 'react'
-import { Button, Size, Input, SelectGroup } from 'digitinary-ui'
+import { Button, Size, Input } from 'digitinary-ui'
 import SVGLoader from '../../../components/SVGLoader/SVGLoader'
 import {
   FilterIcon,
   BookIcon,
   ApiIcon,
   SearchIcon,
-  arrowDownGray,
   UpArrowIcon,
   DownArrowIcon,
 } from '../../../assets/icons'
@@ -25,9 +24,7 @@ const DocsHeader: React.FC = ({
   const [showSearchFilter, setShowSearchFilter] = useState<boolean>(false)
   const [apiName, setApiName] = useState<string>('')
   const [selectedMethods, setSelectedMethods] = useState<any[]>([])
-  const [methodListOpened, setMethodListOpened] = useState(false)
   const [isMethodDropdownOpen, setIsMethodDropdownOpen] = useState<boolean>(false)
-  const selectRef = useRef<any>(null)
 
   const handleOpenSearchFilter = (): void => {
     setShowSearchFilter(true)

package/src/layout/docsComponents/DocsSideMenuTree/DocsSideMenuTree.tsx

@@ -1,5 +1,5 @@
 import './style.scss'
-import React, { useEffect, useState } from 'react'
+import React, { useEffect, useRef } from 'react'
 import SVGLoader from '../../../components/SVGLoader/SVGLoader'
 import { arrowDownGray, arrowRightGray, document, eye } from '../../../assets/icons'
 import { EndpointData, OverviewData } from 'src/layout/docsLayout'
@@ -16,6 +16,8 @@ const DocsSideMenuTree = ({
   setActiveType,
   toggleSection,
   canSelectFirstApi,
+  canFocusSection,
+  setCanFocusSection,
 }: {
   apis: OverviewData[]
   setActiveItemData: React.Dispatch<React.SetStateAction<OverviewData | EndpointData>>
@@ -28,6 +30,8 @@ const DocsSideMenuTree = ({
   activeType: 'OVERVIEW' | 'ENDPOINT'
   toggleSection: (apiId: string, sectionId: string, resetOthers?: boolean, key?: string[]) => void
   canSelectFirstApi?: boolean
+  canFocusSection: boolean
+  setCanFocusSection: React.Dispatch<React.SetStateAction<boolean>>
 }) => {
   // Auto-expand first API only once
   useEffect(() => {
@@ -124,12 +128,19 @@ const DocsSideMenuTree = ({
       activeItemData.api.id === api.apiSpecId &&
       'path' in activeItemData &&
       'method' in activeItemData
+    const sectionRef = useRef<HTMLDivElement>(null)
+    // Scroll to the section if it's expanded
+    if (canFocusSection && sectionRef?.current) {
+      sectionRef.current.scrollIntoView({ behavior: 'smooth', block: 'start' })
+      setCanFocusSection(false)
+    }
 
     return (
       <div
         key={api.apiSpecId}
         className="api-docs-api-tree__section"
         data-active={isEndpointActive || isOverviewExpanded}
+        ref={sectionRef}
       >
         <div
           className="api-docs-api-tree__section-header"

package/src/layout/docsLayout.tsx

@@ -8,6 +8,7 @@ import stableStringify from 'fast-json-stable-stringify'
 interface ILayoutProps {
   apis?: ApiSpecModel[]
   activeApiId?: string
+  onProductNavigate?: (productId: number) => void
 }
 
 export interface TagData {
@@ -46,7 +47,7 @@ function areEqual(prev: ILayoutProps, next: ILayoutProps): boolean {
   )
 }
 
-const DocsLayout = ({ apis, activeApiId }: ILayoutProps): JSX.Element => {
+const DocsLayout = ({ apis, activeApiId, onProductNavigate }: ILayoutProps): JSX.Element => {
   const [transformedOpenApis, setTransformedOpenApis] = useState<OverviewData[]>([])
   const [isFirstApiExpanded, setIsFirstApiExpanded] = useState(true)
   const [activeItemData, setActiveItemData] = useState<
@@ -57,6 +58,7 @@ const DocsLayout = ({ apis, activeApiId }: ILayoutProps): JSX.Element => {
   const allData = useRef([])
   const [pending, setPending] = useState(true)
   const [canSelectFirstApi, setCanSelectFirstApi] = useState(false)
+  const [canFocusSection, setCanFocusSection] = useState(false)
 
   const toggleSection = (
     apiId: string,
@@ -127,6 +129,7 @@ const DocsLayout = ({ apis, activeApiId }: ILayoutProps): JSX.Element => {
       setActiveType('OVERVIEW')
       setIsFirstApiExpanded(false)
       setCanSelectFirstApi(true)
+      setCanFocusSection(true)
     }
   }, [activeApiId, transformedOpenApis])
 
@@ -154,6 +157,8 @@ const DocsLayout = ({ apis, activeApiId }: ILayoutProps): JSX.Element => {
           setActiveType={setActiveType}
           toggleSection={toggleSection}
           canSelectFirstApi={canSelectFirstApi}
+          canFocusSection={canFocusSection}
+          setCanFocusSection={setCanFocusSection}
         />
       )}
 
@@ -165,6 +170,7 @@ const DocsLayout = ({ apis, activeApiId }: ILayoutProps): JSX.Element => {
           setActiveType={setActiveType}
           setExpandedSections={setExpandedSections}
           toggleSection={toggleSection}
+          onProductNavigate={onProductNavigate}
         />
       )}
       {activeType === 'ENDPOINT' && <Layout.DocsAside data={activeItemData as EndpointData} />}