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

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

@@ -1,7 +1,12 @@
+import React from 'react';
 import './style.scss';
 import { EndpointData, OverviewData } from 'src/layout/docsLayout';
 declare const DocsContent: ({ data, activeType, setActiveItemData, setActiveType, setExpandedSections, }: {
     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;
 }) => import("react/jsx-runtime").JSX.Element;
 export default DocsContent;

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

@@ -1,4 +1,5 @@
 import './style.scss';
+import { EndpointData } from 'src/layout/docsLayout';
 export declare const EndpointPage: ({ data }: {
-    data: any;
+    data: EndpointData;
 }) => import("react/jsx-runtime").JSX.Element;

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

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

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

@@ -1,15 +1,17 @@
 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, }: {
+declare const DocsSideMenuTree: ({ apis, setActiveItemData, activeItemData, activeType, expandedSections, setExpandedSections, isFirstApiExpanded, setIsFirstApiExpanded, setActiveType, toggleSection, canSelectFirstApi, }: {
     apis: OverviewData[];
     setActiveItemData: React.Dispatch<React.SetStateAction<OverviewData | EndpointData>>;
     activeItemData: OverviewData | EndpointData;
     expandedSections: Record<string, boolean>;
-    setExpandedSections: React.Dispatch<React.SetStateAction<Record<string, boolean>>>;
+    setExpandedSections: (newSections: Record<string, boolean>) => void;
     isFirstApiExpanded: boolean;
     setIsFirstApiExpanded: React.Dispatch<React.SetStateAction<boolean>>;
     setActiveType: React.Dispatch<React.SetStateAction<"OVERVIEW" | "ENDPOINT">>;
     activeType: "OVERVIEW" | "ENDPOINT";
+    toggleSection: (apiId: string, sectionId: string, resetOthers?: boolean, key?: string[]) => void;
+    canSelectFirstApi?: boolean;
 }) => import("react/jsx-runtime").JSX.Element;
 export default DocsSideMenuTree;

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

@@ -1,8 +1,9 @@
-import { JSX } from 'react';
+import React, { JSX } from 'react';
 import { HTTPMethod, OpenAPIFile, Parameter, RequestBody, Responses } from '@entities/openApi';
 import { ApiSpecModel } from '@entities/index';
 interface ILayoutProps {
     apis?: ApiSpecModel[];
+    activeApiId?: string;
 }
 export interface TagData {
     id: string;
@@ -30,5 +31,5 @@ export interface OverviewData extends Omit<ApiSpecModel, 'metaData'> {
     tags: Record<string, TagData[]>;
     servers: OpenAPIFile['servers'];
 }
-declare const DocsLayout: ({ apis }: ILayoutProps) => JSX.Element;
-export default DocsLayout;
+declare const _default: React.MemoExoticComponent<({ apis, activeApiId }: ILayoutProps) => JSX.Element>;
+export default _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@digi-frontend/dgate-api-documentation",
-  "version": "1.0.53",
+  "version": "1.0.55",
   "main": "dist/src/index.js",
   "module": "dist/src/index.js",
   "types": "dist/types/index.d.ts",
@@ -17,6 +17,7 @@
   "description": "",
   "dependencies": {
     "digitinary-ui": "1.0.166",
+    "fast-json-stable-stringify": "^2.1.0",
     "formik": "^2.4.6",
     "html-react-parser": "^5.2.2",
     "js-yaml": "^4.1.0",
@@ -29,6 +30,7 @@
   },
   "devDependencies": {
     "@rollup/plugin-commonjs": "^28.0.2",
+    "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^16.0.0",
     "@rollup/plugin-typescript": "^12.1.2",
     "@rollup/plugin-url": "^8.0.2",

package/rollup.config.js

@@ -5,7 +5,7 @@ import postcss from 'rollup-plugin-postcss'
 import { terser } from 'rollup-plugin-terser'
 import url from '@rollup/plugin-url'
 import sass from 'rollup-plugin-sass'
-import json from '@rollup/plugin-json';
+import json from '@rollup/plugin-json'
 
 export default {
   input: 'src/index.ts',
@@ -31,7 +31,7 @@ export default {
     sass({
       output: 'dist/styles.css',
     }),
-    json()
+    json(),
   ],
   external: ['react', 'react-dom'],
 }

package/src/components/MethodAccordion/MethodAccordion.tsx

@@ -690,8 +690,10 @@ const MethodsAccordion = ({
           headers: {},
         })
 
-        setFieldValue('responses', clonedResponses)
-        responseIndex = 0
+        if (setFieldValue) {
+          setFieldValue('responses', clonedResponses)
+          responseIndex = 0
+        }
       }
       setCurrentResponseIndex(responseIndex)
       indexRef.current = responseIndex
@@ -699,7 +701,7 @@ const MethodsAccordion = ({
         generateResponseTableData(method.responses[responseIndex].headers, responseIndex)
       )
     }
-  }, [selectedStatusCode, method.responses])
+  }, [selectedStatusCode, method.responses, setFieldValue])
 
   useEffect(() => {
     if (indexRef.current && indexRef.current > -1) {

package/src/helpers/docs.helper.ts

@@ -8,6 +8,7 @@ export const transformOpenApiToDocs = (api: ApiSpecModel): OverviewData => {
     typeof api.metaData.openApiJson === 'string'
       ? JSON.parse(api.metaData.openApiJson)
       : api.metaData.openApiJson
+
   const groupedPathsByTags: Record<string, TagData[]> = { default: [] }
   const validTags = new Set(parsedOpenApi.tags.map(({ name }) => name))
 

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

@@ -1,7 +1,5 @@
 import React from 'react'
 import './style.scss'
-import SVGLoader from '../../../components/SVGLoader/SVGLoader'
-import { CopySticker } from '../../../assets/icons/index'
 import { TagPage } from './TagPage'
 import { EndpointPage } from './EndpointPage'
 import { EndpointData, OverviewData } from 'src/layout/docsLayout'
@@ -15,18 +13,22 @@ const DocsContent = ({
 }: {
   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
 }) => {
   return (
     <main>
       {activeType === 'OVERVIEW' ? (
         <TagPage
-          data={data}
+          data={data as OverviewData}
           setActiveItemData={setActiveItemData}
           setActiveType={setActiveType}
           setExpandedSections={setExpandedSections}
         />
       ) : (
-        <EndpointPage data={data} />
+        <EndpointPage data={data as EndpointData} />
       )}
     </main>
   )

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

@@ -6,7 +6,7 @@ import {
   DownArrowIcon,
   RequestOption,
 } from '../../../../assets/icons/index'
-import { ArrowIcon, SelectGroup } from 'digitinary-ui'
+import { SelectGroup } from 'digitinary-ui'
 import { useEffect, useState } from 'react'
 import { EndpointData } from 'src/layout/docsLayout'
 import { handleStatusColor } from '../../../../helpers/methodAccordion.helper'
@@ -14,7 +14,7 @@ import { httpStatusCodes } from '../../../../constants/index'
 import styles from '../../Codebox/style.module.scss'
 import Tooltip from '../../../../components/Tooltip/Tooltip'
 
-export const EndpointPage = ({ data }) => {
+export const EndpointPage = ({ data }: { data: EndpointData }) => {
   const [activeTab, setActiveTab] = useState('header')
 
   const httpStatusCodeOptions = httpStatusCodes.map((code) => ({
@@ -177,15 +177,17 @@ export const EndpointPage = ({ data }) => {
               </tr>
             </thead>
             <tbody>
-              {!!headersList && Object.keys(headersList) && Object.keys(headersList).map((key, index) => (
-                <tr>
-                  <td>{key}</td>
-                  <td>{headersList[key]?.required.toString()}</td>
-                  <td>{headersList[key]?.schema?.type}</td>
-                  <td>{headersList[key]?.schema?.enum?.join('/')}</td>
-                  <td>{headersList[key]?.description}</td>
-                </tr>
-              ))}
+              {!!headersList &&
+                Object.keys(headersList) &&
+                Object.keys(headersList).map((key, index) => (
+                  <tr>
+                    <td>{key}</td>
+                    <td>{headersList[key]?.required.toString()}</td>
+                    <td>{headersList[key]?.schema?.type}</td>
+                    <td>{headersList[key]?.schema?.enum?.join('/')}</td>
+                    <td>{headersList[key]?.description}</td>
+                  </tr>
+                ))}
             </tbody>
           </table>
         </div>

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

@@ -1,9 +1,57 @@
 import './style.scss'
 import SVGLoader from '../../../../components/SVGLoader/SVGLoader'
 import { arrowRightGray, CopySticker } from '../../../../assets/icons/index'
-import { OverviewData } from 'src/layout/docsLayout'
+import { EndpointData, OverviewData } from 'src/layout/docsLayout'
+
+export const TagPage = ({
+  data,
+  setActiveItemData,
+  setActiveType,
+  setExpandedSections,
+}: {
+  data: OverviewData
+  setActiveItemData: React.Dispatch<React.SetStateAction<OverviewData | EndpointData>>
+  setActiveType: React.Dispatch<React.SetStateAction<'OVERVIEW' | 'ENDPOINT'>>
+  setExpandedSections: React.Dispatch<React.SetStateAction<Record<string, boolean>>>
+}) => {
+  const handleVersionClick = (verObj) => {
+    if (verObj.apiSpecId === data.apiSpecId) {
+      setActiveType('OVERVIEW')
+      return
+    }
+
+    const matchedVersion = data.apiVersions.find((v) => v.apiSpecId === verObj.apiSpecId)
+
+    if (!matchedVersion) {
+      return
+    }
+
+    const newData = {
+      ...data,
+      ...matchedVersion,
+      version: matchedVersion.metaData?.version || '',
+      title: matchedVersion.name || '',
+      apiSpecId: matchedVersion.apiSpecId,
+    }
+
+    setActiveItemData({
+      ...newData,
+      api: {
+        id: newData.apiSpecId,
+        title: newData.title,
+        description: newData.description,
+        version: newData.version,
+        ...newData,
+      },
+    })
+
+    setActiveType('OVERVIEW')
+    setExpandedSections((prev) => ({
+      ...prev,
+      [`api-${newData.apiSpecId}-section`]: true,
+    }))
+  }
 
-export const TagPage = ({ data, setActiveItemData, setActiveType, setExpandedSections }) => {
   const handleClick = (endpoint) => {
     setActiveItemData({
       ...endpoint,
@@ -44,7 +92,9 @@ export const TagPage = ({ data, setActiveItemData, setActiveType, setExpandedSec
             className="icon"
             onClick={() =>
               navigator.clipboard.writeText(
-                `${!!data && !!data.servers && data.servers.length > 0 ? data.servers[0]?.url : '-'}`
+                `${
+                  !!data && !!data.servers && data.servers.length > 0 ? data.servers[0]?.url : '-'
+                }`
               )
             }
           >
@@ -102,7 +152,11 @@ export const TagPage = ({ data, setActiveItemData, setActiveType, setExpandedSec
           <h4>API Versions</h4>
           <div className="version-list">
             {data.apiVersions.map((verObj, index) => (
-              <button key={index} className="version-btn">
+              <button
+                key={index}
+                className="version-btn"
+                onClick={() => handleVersionClick(verObj)}
+              >
                 {verObj.metaData?.version || 'N/A'}
               </button>
             ))}

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

@@ -14,62 +14,38 @@ const DocsSideMenuTree = ({
   isFirstApiExpanded,
   setIsFirstApiExpanded,
   setActiveType,
+  toggleSection,
+  canSelectFirstApi,
 }: {
   apis: OverviewData[]
   setActiveItemData: React.Dispatch<React.SetStateAction<OverviewData | EndpointData>>
   activeItemData: OverviewData | EndpointData
   expandedSections: Record<string, boolean>
-  setExpandedSections: React.Dispatch<React.SetStateAction<Record<string, boolean>>>
+  setExpandedSections: (newSections: Record<string, boolean>) => void
   isFirstApiExpanded: boolean
   setIsFirstApiExpanded: React.Dispatch<React.SetStateAction<boolean>>
   setActiveType: React.Dispatch<React.SetStateAction<'OVERVIEW' | 'ENDPOINT'>>
   activeType: 'OVERVIEW' | 'ENDPOINT'
+  toggleSection: (apiId: string, sectionId: string, resetOthers?: boolean, key?: string[]) => void
+  canSelectFirstApi?: boolean
 }) => {
   // Auto-expand first API only once
   useEffect(() => {
-    if (!apis?.length || !isFirstApiExpanded) return
+    if (canSelectFirstApi || !apis?.length || !isFirstApiExpanded) return
 
     const firstApi = apis[0]
     const sectionKey = `api-${firstApi.apiSpecId}-section`
     const overviewKey = `api-${firstApi.apiSpecId}-overview`
 
-    setExpandedSections((prev) => ({
-      ...prev,
+    setExpandedSections({
       [sectionKey]: true,
       [overviewKey]: true,
-    }))
-
+    })
     setActiveItemData(firstApi)
     setActiveType('OVERVIEW')
     setIsFirstApiExpanded(false)
   }, [apis, isFirstApiExpanded])
 
-  const toggleSection = (apiId, sectionId: string, resetOthers?: boolean, key?: string[]) => {
-    if (resetOthers && key) {
-      const filteredExpandedSections = Object.fromEntries(
-        Object.entries({ ...expandedSections }).filter(([expandKey]) => {
-          // Close other APIs sections
-          if (!expandKey.includes(apiId)) return false
-          // always return the clicked on section
-          if (expandKey === sectionId) return true
-          // filter all sections containing the key
-          if (key.some((k) => expandKey.includes(k))) return false
-          return true
-        })
-      )
-
-      setExpandedSections({
-        ...filteredExpandedSections,
-        [sectionId]: !expandedSections[sectionId],
-      })
-    } else {
-      setExpandedSections((prev) => ({
-        ...prev,
-        [sectionId]: !prev[sectionId],
-      }))
-    }
-  }
-
   const renderEndpoints = (endpoints: EndpointData[], api: OverviewData) =>
     endpoints.map((endpoint, index) => {
       const key = `api-${api.apiSpecId}-resource-${endpoint.id}`
@@ -200,7 +176,9 @@ const DocsSideMenuTree = ({
                   .sort(([a], [b]) =>
                     a === 'default' ? 1 : b === 'default' ? -1 : a.localeCompare(b)
                   )
-                  .map(([tagName, data], i) => renderSubSection(tagName, data, api, i))}
+                  .map(([tagName, data], i) =>
+                    renderSubSection(tagName, data as EndpointData[], api, i)
+                  )}
               </div>
             )}
           </>

package/src/layout/docsLayout.tsx

@@ -3,9 +3,11 @@ import Layout from './docsComponents'
 import { HTTPMethod, OpenAPIFile, Parameter, RequestBody, Responses } from '@entities/openApi'
 import { transformOpenApiToDocs } from '../helpers/docs.helper'
 import { ApiSpecModel } from '@entities/index'
+import stableStringify from 'fast-json-stable-stringify'
 
 interface ILayoutProps {
   apis?: ApiSpecModel[]
+  activeApiId?: string
 }
 
 export interface TagData {
@@ -37,16 +39,60 @@ export interface OverviewData extends Omit<ApiSpecModel, 'metaData'> {
   servers: OpenAPIFile['servers']
 }
 
-const DocsLayout = ({ apis }: ILayoutProps): JSX.Element => {
-  const [transformedOpenApis, setTransformedOpenApis] = useState([])
+function areEqual(prev: ILayoutProps, next: ILayoutProps): boolean {
+  return (
+    stableStringify(prev.apis ?? []) === stableStringify(next.apis ?? []) &&
+    prev.activeApiId === next.activeApiId
+  )
+}
+
+const DocsLayout = ({ apis, activeApiId }: ILayoutProps): JSX.Element => {
+  const [transformedOpenApis, setTransformedOpenApis] = useState<OverviewData[]>([])
   const [isFirstApiExpanded, setIsFirstApiExpanded] = useState(true)
-  const [activeItemData, setActiveItemData] = useState<OverviewData | EndpointData | {}>({})
+  const [activeItemData, setActiveItemData] = useState<
+    OverviewData | EndpointData | Record<string, never>
+  >({})
   const [activeType, setActiveType] = useState<'OVERVIEW' | 'ENDPOINT'>('OVERVIEW')
-  const [expandedSections, setExpandedSections] = useState({})
-  const allData = useRef([]);
+  const [expandedSections, setExpandedSections] = useState<Record<string, boolean>>({})
+  const allData = useRef([])
   const [pending, setPending] = useState(true)
+  const [canSelectFirstApi, setCanSelectFirstApi] = useState(false)
+
+  const toggleSection = (
+    apiId: string,
+    sectionId: string,
+    resetOthers?: boolean,
+    key?: string[]
+  ) => {
+    setCanSelectFirstApi(false)
+    if (resetOthers && key) {
+      const filteredExpandedSections = Object.fromEntries(
+        Object.entries({ ...expandedSections }).filter(([expandKey]) => {
+          // Close other APIs sections
+          if (!expandKey.includes(apiId)) return false
+          // always return the clicked on section
+          if (expandKey === sectionId) return true
+          // filter all sections containing the key
+          if (key.some((k) => expandKey.includes(k))) return false
+          return true
+        })
+      )
+
+      setExpandedSections({
+        ...filteredExpandedSections,
+        [sectionId]: !expandedSections[sectionId],
+      })
+    } else {
+      setExpandedSections((prev) => ({
+        ...prev,
+        [sectionId]: !expandedSections[sectionId],
+      }))
+    }
+  }
+
   useEffect(() => {
     if (transformedOpenApis.length === 0) {
+      setCanSelectFirstApi(!!activeApiId)
       const t = structuredClone(apis)
         ?.map((o3) => transformOpenApiToDocs(o3))
         .sort((a, b) => a.title.toLowerCase().localeCompare(b.title.toLowerCase()))
@@ -58,35 +104,67 @@ const DocsLayout = ({ apis }: ILayoutProps): JSX.Element => {
     }
   }, [apis])
 
-  const updateFilteredData = (filteredItems, isReset=false) => {
-    if(isReset){
+  const updateFilteredData = (filteredItems, isReset = false) => {
+    if (isReset) {
       setTransformedOpenApis(allData.current)
-      return;
+      return
     }
     setTransformedOpenApis(filteredItems)
   }
 
+  useEffect(() => {
+    if (activeApiId && transformedOpenApis.length > 0) {
+      const activeApi = transformedOpenApis.find((api) => api.apiSpecId === activeApiId)
+      const sectionKey = `api-${activeApi.apiSpecId}-section`
+      const overviewKey = `api-${activeApi.apiSpecId}-overview`
+
+      setExpandedSections((prev) => ({
+        ...prev,
+        [sectionKey]: true,
+        [overviewKey]: true,
+      }))
+      setActiveItemData(activeApi)
+      setActiveType('OVERVIEW')
+      setIsFirstApiExpanded(false)
+      setCanSelectFirstApi(true)
+    }
+  }, [activeApiId, transformedOpenApis])
+
   return (
     <Layout>
-      <Layout.DocsHeader transformedOpenApis={transformedOpenApis} updateFilteredData={updateFilteredData}/>
-      <Layout.DocsSideMenuTree
-        apis={transformedOpenApis}
-        setActiveItemData={setActiveItemData}
-        activeItemData={activeItemData}
-        expandedSections={expandedSections}
-        setExpandedSections={setExpandedSections}
-        isFirstApiExpanded={isFirstApiExpanded}
-        activeType={activeType}
-        setIsFirstApiExpanded={setIsFirstApiExpanded}
-        setActiveType={setActiveType}
+      <Layout.DocsHeader
+        transformedOpenApis={transformedOpenApis}
+        updateFilteredData={updateFilteredData}
       />
+      {!pending && (
+        <Layout.DocsSideMenuTree
+          apis={transformedOpenApis}
+          setActiveItemData={setActiveItemData}
+          activeItemData={activeItemData as OverviewData | EndpointData}
+          expandedSections={expandedSections}
+          setExpandedSections={(newExpandedSections) =>
+            setExpandedSections((prev) => ({
+              ...prev,
+              ...newExpandedSections,
+            }))
+          }
+          isFirstApiExpanded={isFirstApiExpanded}
+          activeType={activeType}
+          setIsFirstApiExpanded={setIsFirstApiExpanded}
+          setActiveType={setActiveType}
+          toggleSection={toggleSection}
+          canSelectFirstApi={canSelectFirstApi}
+        />
+      )}
+
       {!pending && Object.keys(activeItemData).length > 0 && (
         <Layout.DocsContent
-          data={activeItemData}
+          data={activeItemData as OverviewData | EndpointData}
           activeType={activeType}
           setActiveItemData={setActiveItemData}
           setActiveType={setActiveType}
           setExpandedSections={setExpandedSections}
+          toggleSection={toggleSection}
         />
       )}
       {activeType === 'ENDPOINT' && <Layout.DocsAside data={activeItemData as EndpointData} />}
@@ -94,4 +172,4 @@ const DocsLayout = ({ apis }: ILayoutProps): JSX.Element => {
   )
 }
 
-export default DocsLayout
+export default React.memo(DocsLayout, areEqual)