@digi-frontend/dgate-api-documentation 1.0.39 → 1.0.47

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

@@ -0,0 +1,183 @@
+import './style.scss'
+import React, { useState } from 'react'
+import SVGLoader from '../../../components/SVGLoader/SVGLoader'
+import { arrowDownGray, arrowRightGray, document, eye } from '../../../assets/icons'
+
+const DocsSideMenuTree = ({
+  apis,
+  setActiveItemData,
+  isFirstApiExpanded,
+  setIsFirstApiExpanded,
+}) => {
+  const [expandedSections, setExpandedSections] = useState({})
+
+  const toggleSection = (apiId, sectionId: string, resetOthers?: boolean, key?: string[]) => {
+    isFirstApiExpanded && setIsFirstApiExpanded(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
+          else if (expandKey === sectionId) return true
+          // filter all sections containing the key
+          else if (key.some((k) => expandKey.includes(k))) return false
+          else return true
+        })
+      )
+
+      setExpandedSections({
+        ...filteredExpandedSections,
+        [sectionId]: !expandedSections[sectionId],
+      })
+    } else {
+      setExpandedSections((prev) => ({
+        ...prev,
+        [sectionId]: !prev[sectionId],
+      }))
+    }
+  }
+
+  const renderEndpoints = (endpoints, api) => {
+    return endpoints.map((endpoint, index) => {
+      const isResourceExpanded = expandedSections[`api-${api.id}-resource-${endpoint.id}`]
+
+      return (
+        <div
+          key={index}
+          className={`api-docs-api-tree__endpoint api-docs-api-tree__endpoint--${endpoint.method.toLowerCase()}`}
+          onClick={() => {
+            setActiveItemData({
+              ...endpoint,
+              api: {
+                id: api.id,
+                title: api.title,
+                description: api.description,
+                version: api.version,
+              },
+            })
+
+            if (!isResourceExpanded) {
+              toggleSection(api.id, `api-${api.id}-resource-${endpoint.id}`, true, [
+                'resource',
+                'overview',
+              ])
+            }
+          }}
+          data-active={isResourceExpanded}
+        >
+          <span className="api-docs-api-tree__endpoint-method">{endpoint.method}</span>
+          <span className="api-docs-api-tree__endpoint-name">{endpoint.path}</span>
+        </div>
+      )
+    })
+  }
+
+  const renderApiSection = (api, index) => {
+    const isApiExpanded = expandedSections[`api-${api.id}-section`]
+    const isEndpointActive = Object.keys(expandedSections).some((k) =>
+      k.includes(`api-${api.id}-resource`)
+    )
+    const isEndpointsExpanded = expandedSections[`api-${api.id}-endpoints`]
+    const isOverviewExpanded = expandedSections[`api-${api.id}-overview`]
+
+    if (isFirstApiExpanded && index === 0 && !isApiExpanded) {
+      toggleSection(api.id, `api-${api.id}-section`)
+      toggleSection(api.id, `api-${api.id}-overview`)
+      setActiveItemData(api)
+    }
+
+    return (
+      <div
+        key={api.id}
+        className="api-docs-api-tree__section"
+        data-active={isEndpointActive || isOverviewExpanded}
+      >
+        <div
+          className="api-docs-api-tree__section-header"
+          onClick={() => toggleSection(api.id, `api-${api.id}-section`)}
+        >
+          {isApiExpanded ? <SVGLoader src={arrowDownGray} /> : <SVGLoader src={arrowRightGray} />}
+          <SVGLoader src={document} />
+          <span className="api-docs-api-tree__section-title">{api.title}</span>
+        </div>
+
+        {isApiExpanded && (
+          <>
+            <div
+              className={`api-docs-api-tree__section__overview`}
+              onClick={() => {
+                toggleSection(api.id, `api-${api.id}-overview`, true, ['resource'])
+                setActiveItemData(api)
+              }}
+              data-active={isOverviewExpanded}
+            >
+              {<SVGLoader src={eye} />}
+              <span>Overview</span>
+            </div>
+            <div
+              className="api-docs-api-tree__section__endpoints"
+              onClick={() => {
+                toggleSection(api.id, `api-${api.id}-endpoints`)
+              }}
+              data-active={isEndpointActive && !isOverviewExpanded}
+            >
+              {isEndpointsExpanded ? (
+                <SVGLoader src={arrowDownGray} />
+              ) : (
+                <SVGLoader src={arrowRightGray} />
+              )}
+              <span>Endpoints</span>
+            </div>
+            {isEndpointsExpanded && (
+              <div className="api-docs-api-tree__subsections">
+                {Object.entries(api.tags)
+                  .sort(([a], [b]) => {
+                    if (a === 'default') return 1
+                    if (b === 'default') return -1
+                    return a.localeCompare(b)
+                  })
+                  .map(([tagName, data], index) => renderSubSection(tagName, data, api, index))}
+              </div>
+            )}
+          </>
+        )}
+      </div>
+    )
+  }
+
+  const renderSubSection = (tagName, data, api, sectionIndex) => {
+    const sectionKey = `api-${api.id}-section-${sectionIndex}`
+    const isSectionExpanded = expandedSections[sectionKey]
+
+    return (
+      <div key={sectionKey} className="api-docs-api-tree__subsection">
+        <>
+          <div
+            className="api-docs-api-tree__subsection-header"
+            onClick={() => toggleSection(api.id, sectionKey)}
+          >
+            {isSectionExpanded ? (
+              <SVGLoader src={arrowDownGray} />
+            ) : (
+              <SVGLoader src={arrowRightGray} />
+            )}
+            <span className="api-docs-api-tree__subsection-title">{tagName}</span>
+          </div>
+
+          {isSectionExpanded && (
+            <div className="api-docs-api-tree__endpoints">{renderEndpoints(data, api)}</div>
+          )}
+        </>
+      </div>
+    )
+  }
+
+  return (
+    <aside className="api-docs-api-tree">
+      {apis.map((api, index) => renderApiSection(api, index))}
+    </aside>
+  )
+}
+
+export default DocsSideMenuTree

package/src/layout/docsComponents/DocsSideMenuTree/style.scss

@@ -0,0 +1,195 @@
+.api-docs-api-tree {
+  width: 100%;
+  max-width: 12.5rem;
+  padding: 3rem 1.25rem;
+  box-sizing: border-box;
+
+  > * {
+    box-sizing: border-box;
+  }
+
+  &__section {
+    &-header {
+      display: flex;
+      align-items: center;
+      gap: 0.25rem;
+      padding-inline: 0.5rem;
+      cursor: pointer;
+      user-select: none;
+      height: 2.5rem;
+
+      &:hover {
+        background-color: #f3f4f6;
+      }
+
+      svg:first-child {
+        path {
+          stroke: #bbbec5;
+        }
+      }
+    }
+
+    &-title {
+      font-size: 0.75rem;
+      line-height: 0.875rem;
+      font-weight: 500;
+      color: #000;
+      margin-left: 0.25rem;
+    }
+
+    &__overview {
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+      padding: 0.5rem 1.75rem;
+      border-radius: 0.25rem;
+      cursor: pointer;
+
+      &:hover {
+        background-color: #f3f4f6;
+      }
+
+      span {
+        font-size: 0.75rem;
+        line-height: 0.875rem;
+        color: #000000;
+      }
+
+      &[data-active='true'] {
+        background-color: #f0f1f2;
+      }
+    }
+
+    &__endpoints {
+      display: flex;
+      align-items: center;
+      height: 1.5rem;
+      gap: 0.5rem;
+      border-radius: 0.25rem;
+      padding-inline: 1.75rem;
+      cursor: pointer;
+
+      span {
+        font-size: 0.75rem;
+        line-height: 0.875rem;
+        color: #000000;
+      }
+
+      &[data-active='true'] {
+        background-color: #f0f1f2;
+      }
+    }
+
+    &[data-active='true'] {
+      .api-docs-api-tree__section-title {
+        color: #616874;
+      }
+    }
+  }
+
+  &__endpoints {
+    display: flex;
+    flex-direction: column;
+    align-items: start;
+    gap: 0.5rem;
+    border-radius: 0.25rem;
+
+    cursor: pointer;
+
+    span {
+      font-size: 0.75rem;
+      line-height: 0.875rem;
+      color: #000000;
+    }
+
+    &[data-active='true'] {
+      background-color: #f0f1f2;
+    }
+  }
+
+  &__subsection {
+    &-header {
+      height: 2rem;
+      display: flex;
+      align-items: center;
+      gap: 0.875rem;
+      padding-inline: 0.5rem;
+      cursor: pointer;
+      user-select: none;
+
+      svg {
+        color: #6b7280;
+      }
+    }
+
+    &-title {
+      font-size: 0.75rem;
+      line-height: 0.875rem;
+      color: #616874;
+    }
+  }
+
+  &__endpoint {
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+    padding: 0.5rem 0.75rem;
+    text-transform: capitalize;
+    width: 100%;
+    cursor: pointer;
+
+    &[data-active='true'] {
+      background-color: #f0f1f2;
+    }
+
+    &:hover {
+      background-color: #f3f4f6;
+    }
+
+    &-method {
+      font-size: 0.75rem;
+      line-height: 0.875rem;
+      font-weight: 400;
+      text-align: start;
+    }
+
+    &-name {
+      font-size: 0.75rem;
+      line-height: 0.875rem;
+      color: #3b3f46;
+      display: -webkit-box;
+      -webkit-box-orient: vertical;
+      -webkit-line-clamp: 1;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    &--get .api-docs-api-tree__endpoint-method {
+      color: #3a6cd1;
+    }
+
+    &--post .api-docs-api-tree__endpoint-method {
+      color: #3aaa35;
+    }
+
+    &--put .api-docs-api-tree__endpoint-method {
+      color: #faad14;
+    }
+
+    &--delete .api-docs-api-tree__endpoint-method {
+      color: #da3f3f;
+    }
+
+    &--option .api-docs-api-tree__endpoint-method {
+      color: #495d97;
+    }
+
+    &--head .api-docs-api-tree__endpoint-method {
+      color: #9461c9;
+    }
+
+    &--patch .api-docs-api-tree__endpoint-method {
+      color: #58e2c2;
+    }
+  }
+}

package/src/layout/docsComponents/index.scss

@@ -0,0 +1,47 @@
+.api-docs-layout {
+  display: grid;
+  height: 100vh;
+  max-height: 100%;
+  width: 100%;
+  overflow: hidden;
+  grid-template: 3.125rem auto / 12.5rem 1fr auto;
+  padding: 0 !important;
+
+  * {
+    scrollbar-width: thin;
+    scrollbar-color: #bbbec5 #d1d3d8;
+    scroll-behavior: smooth;
+  }
+
+  aside.api-docs-api-tree {
+    grid-row: 2;
+    grid-column: 1;
+    border-right: 1px solid #bbbec5;
+    background-color: white;
+  }
+
+  aside.api-docs-aside {
+    grid-row: 2;
+    grid-column: 3;
+    width: 22.5rem;
+    max-width: 22.5rem;
+    overflow-x: clip;
+  }
+
+  aside,
+  main {
+    max-height: 100%;
+    overflow: auto;
+  }
+
+  header {
+    grid-column: 1 / -1;
+    border-bottom: 1px solid #bbbec5;
+  }
+
+  main {
+    grid-row: 2;
+    grid-column: 2;
+    background-color: white;
+  }
+}

package/src/layout/docsComponents/index.tsx

@@ -0,0 +1,28 @@
+import React from 'react'
+import DocsHeader from './DocsHeader/DocsHeader'
+import DocsSideMenuTree from './DocsSideMenuTree/DocsSideMenuTree'
+import DocsContent from './DocsContent/DocsContent'
+import DocsAside from './DocsAside/DocsAside'
+import './index.scss'
+
+type LayoutProps = {
+  children: React.ReactNode
+}
+
+type CompoundLayout = React.FC<LayoutProps> & {
+  DocsHeader: typeof DocsHeader
+  DocsSideMenuTree: typeof DocsSideMenuTree
+  DocsContent: typeof DocsContent
+  DocsAside: typeof DocsAside
+}
+
+const Layout = (({ children }: LayoutProps) => {
+  return <div className="api-docs-layout">{children}</div>
+}) as CompoundLayout
+
+Layout.DocsHeader = DocsHeader
+Layout.DocsSideMenuTree = DocsSideMenuTree
+Layout.DocsContent = DocsContent
+Layout.DocsAside = DocsAside
+
+export default Layout

package/src/layout/docsLayout.tsx

@@ -0,0 +1,69 @@
+import React, { JSX, useEffect, useState } from 'react'
+import Layout from './docsComponents'
+import { HTTPMethod, OpenAPIFile, Parameter, RequestBody, Responses } from '@entities/openApi'
+import { transformOpenApiToDocs } from '../helpers/docs.helper'
+
+interface ILayoutProps {
+  openApiJson?: OpenAPIFile[]
+}
+
+export interface TagData {
+  id: string
+  method: HTTPMethod
+  path: string
+  tags: string[]
+  responses: Responses
+  summary?: string
+  description: string
+  parameters?: Parameter[]
+  requestBody?: RequestBody
+}
+
+export interface EndpointData extends TagData {
+  api: {
+    id: string
+    description: string
+    title: string
+    version: string
+  }
+}
+
+export interface OverviewData {
+  id: string
+  description: string
+  title: string
+  version: string
+  tags: Record<string, TagData[]>
+}
+
+const DocsLayout = ({ openApiJson }: ILayoutProps): JSX.Element => {
+  const [transformedOpenApis, setTransformedOpenApis] = useState([])
+  const [isFirstApiExpanded, setIsFirstApiExpanded] = useState(true)
+  const [activeItemData, setActiveItemData] = useState<OverviewData | EndpointData>()
+
+  // useEffect(() => {
+  //   if (transformedOpenApis.length === 0) {
+  //     setTransformedOpenApis(
+  //       structuredClone(openApiJson)
+  //         ?.map((o3) => transformOpenApiToDocs(o3))
+  //         .sort((a, b) => a.title.toLowerCase().localeCompare(b.title.toLowerCase()))
+  //     )
+  //   }
+  // }, [openApiJson])
+
+  return (
+    <Layout>
+      <Layout.DocsHeader />
+      <Layout.DocsSideMenuTree
+        apis={transformedOpenApis}
+        setActiveItemData={setActiveItemData}
+        isFirstApiExpanded={isFirstApiExpanded}
+        setIsFirstApiExpanded={setIsFirstApiExpanded}
+      />
+      <Layout.DocsContent data={activeItemData} />
+      <Layout.DocsAside />
+    </Layout>
+  )
+}
+
+export default DocsLayout

package/src/layout/layout.module.css

@@ -1,62 +1,62 @@
-.docsLayout {
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-  height: 100vh;
-  max-height: 100%;
-
-  .apiDocAlert {
-    border-radius: 0;
-    z-index: 3;
-  }
-
-  .layoutContainer {
-    display: grid;
-    grid-template-columns: 60% 40%;
-    width: 100%;
-    height: 100%;
-    max-width: 100%;
-    max-height: 100%;
-    overflow: hidden;
-
-    .editorSide {
-      background-color: #fff;
-      padding-bottom: 1.25rem;
-
-      .editorSectionHead {
-
-        span {
-          width: 100%;
-        }
-
-        .editorSectionHead_content {
-          display: flex;
-          justify-content: space-between;
-          align-items: center;
-
-          button {
-            width: 6.25rem;
-          }
-        }
-
-      }
-    }
-
-    .livePreviewSide {
-      background-color: #f8f9fb;
-      padding: 1.25rem 1.875rem;
-    }
-
-    .docSide {
-      max-height: 100%;
-      overflow-y: overlay;
-      overflow-x: clip;
-      scroll-behavior: smooth;
-    }
-  }
-
-  :global(.textArea .inputField),
-  :global(.inputContainer .inputWrapper .innerInputContainer .input) {
-    padding-inline-end: 2.5rem;
-  }
+.docsLayout {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  height: 100vh;
+  max-height: 100%;
+
+  .apiDocAlert {
+    border-radius: 0;
+    z-index: 3;
+  }
+
+  .layoutContainer {
+    display: grid;
+    grid-template-columns: 60% 40%;
+    width: 100%;
+    height: 100%;
+    max-width: 100%;
+    max-height: 100%;
+    overflow: hidden;
+
+    .editorSide {
+      background-color: #fff;
+      padding-bottom: 1.25rem;
+
+      .editorSectionHead {
+
+        span {
+          width: 100%;
+        }
+
+        .editorSectionHead_content {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+
+          button {
+            width: 6.25rem;
+          }
+        }
+
+      }
+    }
+
+    .livePreviewSide {
+      background-color: #f8f9fb;
+      padding: 1.25rem 1.875rem;
+    }
+
+    .docSide {
+      max-height: 100%;
+      overflow-y: overlay;
+      overflow-x: clip;
+      scroll-behavior: smooth;
+    }
+  }
+
+  :global(.textArea .inputField),
+  :global(.inputContainer .inputWrapper .innerInputContainer .input) {
+    padding-inline-end: 2.5rem;
+  }
 }