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

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,49 @@
+.api-docs-layout {
+  @import url('https://fonts.googleapis.com/css2?family=Cascadia+Code:ital,wght@0,200..700;1,200..700&display=swap');
+
+  display: grid;
+  height: 100vh;
+  max-height: 100%;
+  width: 100%;
+  overflow: hidden;
+  grid-template: 2.625rem 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,72 @@
+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>()
+  const [activeType, setActiveType] = useState<'OVERVIEW' | 'ENDPOINT'>()
+  const [pending, setPending] = useState(true)
+  useEffect(() => {
+    if (transformedOpenApis.length === 0) {
+      setTransformedOpenApis(
+        structuredClone(openApiJson)
+          ?.map((o3) => transformOpenApiToDocs(o3))
+          .sort((a, b) => a.title.toLowerCase().localeCompare(b.title.toLowerCase()))
+      )
+      setPending(false)
+    }
+  }, [openApiJson])
+
+  return (
+    <Layout>
+      <Layout.DocsHeader />
+      <Layout.DocsSideMenuTree
+        apis={transformedOpenApis}
+        setActiveItemData={setActiveItemData}
+        isFirstApiExpanded={isFirstApiExpanded}
+        setIsFirstApiExpanded={setIsFirstApiExpanded}
+        setActiveType={setActiveType}
+      />
+      {!pending && <Layout.DocsContent data={activeItemData} />}
+      {activeType === 'ENDPOINT' && <Layout.DocsAside data={activeItemData} />}
+    </Layout>
+  )
+}
+
+export default DocsLayout

package/src/layout/layout.module.css

@@ -1,62 +1,65 @@
-.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_title {
+        position: sticky;
+        top: 0;
+        z-index: 99999 !important;
+      }
+      .editorSectionHead,
+      .editorSectionHead_title {
+        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;
+  }
+}