@digi-frontend/dgate-api-documentation 1.0.0 → 1.0.1

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,120 @@
+import React, { JSX, useEffect, useRef, useState } from 'react'
+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'
+import { SectionToggleProvider } from '../../src/context/SectionToggleContext'
+
+interface ILayoutProps {
+  apis?: ApiSpecModel[]
+  activeApiId?: string
+  onProductNavigate?: (productId: number) => void
+}
+
+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: OverviewData
+}
+
+export interface OverviewData extends Omit<ApiSpecModel, 'metaData'> {
+  description: string
+  title: string
+  version: string
+  tags: Record<string, TagData[]>
+  servers: OpenAPIFile['servers']
+}
+
+function areEqual(prev: ILayoutProps, next: ILayoutProps): boolean {
+  return (
+    stableStringify(prev.apis ?? []) === stableStringify(next.apis ?? []) &&
+    prev.activeApiId === next.activeApiId
+  )
+}
+
+const DocsLayout = ({ apis, activeApiId, onProductNavigate }: ILayoutProps): JSX.Element => {
+  const [transformedOpenApis, setTransformedOpenApis] = useState<OverviewData[]>([])
+  const [isFirstApiExpanded, setIsFirstApiExpanded] = useState(true)
+  const [activeItemData, setActiveItemData] = useState<
+    OverviewData | EndpointData | Record<string, never>
+  >({})
+  const [activeType, setActiveType] = useState<'OVERVIEW' | 'ENDPOINT'>('OVERVIEW')
+  const allData = useRef([])
+  const [pending, setPending] = useState(true)
+  const [canSelectFirstApi, setCanSelectFirstApi] = useState(false)
+  const [canFocusSection, setCanFocusSection] = useState(false)
+
+  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()))
+      setTransformedOpenApis(t)
+      allData.current = t
+      if (t.length > 0) {
+        setPending(false)
+      }
+    }
+  }, [apis])
+
+  const updateFilteredData = (filteredItems: OverviewData[], isReset = false) => {
+    if (isReset) {
+      setTransformedOpenApis(allData.current)
+      return
+    }
+    setTransformedOpenApis(filteredItems)
+  }
+
+  return (
+    <Layout>
+      <SectionToggleProvider>
+        <Layout.DocsHeader
+          transformedOpenApis={transformedOpenApis}
+          updateFilteredData={updateFilteredData}
+        />
+        {!pending && (
+          <Layout.DocsSideMenuTree
+            apis={transformedOpenApis}
+            setActiveItemData={setActiveItemData}
+            activeItemData={activeItemData as OverviewData | EndpointData}
+            isFirstApiExpanded={isFirstApiExpanded}
+            activeType={activeType}
+            setIsFirstApiExpanded={setIsFirstApiExpanded}
+            setActiveType={setActiveType}
+            canSelectFirstApi={canSelectFirstApi}
+            canFocusSection={canFocusSection}
+            setCanFocusSection={setCanFocusSection}
+            activeApiId={activeApiId}
+            setCanSelectFirstApi={setCanSelectFirstApi}
+          />
+        )}
+
+        {!pending && Object.keys(activeItemData).length > 0 && (
+          <Layout.DocsContent
+            data={activeItemData as OverviewData | EndpointData}
+            activeType={activeType}
+            setActiveItemData={setActiveItemData}
+            setActiveType={setActiveType}
+            onProductNavigate={onProductNavigate}
+            apis={transformedOpenApis}
+          />
+        )}
+        {activeType === 'ENDPOINT' && <Layout.DocsAside data={activeItemData as EndpointData} />}
+      </SectionToggleProvider>
+    </Layout>
+  )
+}
+
+export default React.memo(DocsLayout, areEqual)

package/src/layout/layout.module.css

@@ -1,37 +1,65 @@
-.docsLayout {
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-  height: 100vh;
-  max-height: 100%;
-
-  .apiDocAlert {
-    border-radius: 0;
-  }
-
-  .layoutContainer {
-    display: grid;
-    grid-template-columns: 60% 40%;
-    width: 100%;
-    height: 100%;
-    max-width: 100%;
-    max-height: 100%;
-    overflow: hidden;
-
-    .editorSide {
-      background-color: #fff;
-    }
-
-    .livePreviewSide {
-      background-color: #f8f9fb;
-      padding: 1.875rem;
-    }
-
-    .docSide {
-      max-height: 100%;
-      overflow-y: overlay;
-      overflow-x: clip;
-      scroll-behavior: smooth;
-    }
-  }
-}
+.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: 1399 !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;
+  }
+}

package/src/layout/layout.tsx

@@ -1,27 +1,181 @@
-import React, { JSX } from 'react'
-import { Alert } from 'digitinary-ui'
-import MethodsAccordion from '../components/MethodAccordion/MethodAccordion'
-import styles from './layout.module.css'
-import InfoForm from '../components/InfoForm/InfoForm'
-import SectionHead from '../components/SectionHead/SectionHead'
-
-const Layout = (): JSX.Element => {
-  return (
-    <div className={styles.docsLayout}>
-      <Alert className={styles.apiDocAlert} color='info'>
-        Changes are saved and published for API information and each endpoint individually as you update.
-      </Alert>
-      <div className={styles.layoutContainer}>
-        <div className={`${styles.editorSide} ${styles.docSide}`}>
-          <SectionHead text='API Information' />
-          <InfoForm />
-          <SectionHead text='API Methods' />
-          <MethodsAccordion />
-        </div>
-        <div className={`${styles.livePreviewSide} ${styles.docSide}`}></div>
-      </div>
-    </div>
-  )
-}
-
-export default Layout
+import { JSX, useEffect, useState } from 'react'
+import { Alert, Button } from 'digitinary-ui'
+import MethodsAccordion from '../components/MethodAccordion/MethodAccordion'
+import styles from './layout.module.css'
+import InfoForm from '../components/InfoForm/InfoForm'
+import SectionHead from '../components/SectionHead/SectionHead'
+import { transformOpenApiObject, transformOpenApiObjectToOrigin } from '../helpers/layout.helper'
+import { OpenAPIFile } from '../types/openApi'
+import LivePreview from '../components/LivePreview/LivePreview'
+import { FormikProvider, useFormik } from 'formik'
+import { schemaValidation } from '../validator/form.scheme'
+import { TransformedOpenApi } from '@entities/transformedOpenApi'
+import { methodColorMapping } from '../constants/index'
+import CommonDialog from '../components/dialog'
+
+interface ILayoutProps {
+  openApiJson?: OpenAPIFile
+  handleSave?: (values: unknown) => unknown
+  setIsFormDirty?: any
+  openApiErrors?: any
+}
+
+const Layout = ({
+  openApiJson,
+  handleSave,
+  setIsFormDirty,
+  openApiErrors,
+}: ILayoutProps): JSX.Element => {
+  const clonedOpenApiJson = structuredClone(openApiJson)
+  const transformedOpenApi = transformOpenApiObject(clonedOpenApiJson)
+  const formik = useFormik<TransformedOpenApi>({
+    initialValues: structuredClone(transformedOpenApi),
+    validationSchema: schemaValidation,
+    validateOnMount: true,
+    onSubmit: (values, { validateForm, resetForm, setSubmitting }) => {
+      // Handle save logic
+      try {
+        const originalOpenApiForm = transformOpenApiObjectToOrigin(values)
+        handleSave(originalOpenApiForm)
+        resetForm({
+          values: values, // You can reset it to the same values if you want
+        })
+
+        validateForm(values)
+      } catch (err) {
+        setSubmitting(false)
+      }
+    },
+  })
+  const { dirty, isValid, isSubmitting, values, setFieldValue, handleSubmit, errors } = formik
+  const [isPublishDialogOpen, setIsPublishDialogOpen] = useState(false)
+  const [openMethodIndex, setOpenMethodIndex] = useState<number | null>(null)
+
+  useEffect(() => {
+    if (setIsFormDirty) {
+      setIsFormDirty(dirty)
+    }
+  }, [dirty])
+
+  // TODO: keep it here until production
+  useEffect(() => {
+    console.log({ values, errors })
+  }, [values])
+
+  return (
+    <div className={styles.docsLayout}>
+      {dirty && (
+        <Alert className={styles.apiDocAlert} color="warning" severity="warning">
+          There are changes you made may not be saved
+        </Alert>
+      )}
+      <div className={styles.layoutContainer}>
+        <div className={`${styles.editorSide} ${styles.docSide}`}>
+          <SectionHead
+            className={styles.editorSectionHead_title}
+            text={
+              <div className={styles.editorSectionHead_content}>
+                API Documentation
+                <Button
+                  className={styles.methodForm_submitBtn}
+                  size="medium"
+                  fullWidth={false}
+                  type="submit"
+                  variant="contained"
+                  color="primary"
+                  onClick={() => setIsPublishDialogOpen(true)}
+                  disabled={!isValid || isSubmitting || !dirty}
+                >
+                  Save
+                </Button>
+              </div>
+            }
+          />
+          <FormikProvider value={formik}>
+            <InfoForm />
+          </FormikProvider>
+          <SectionHead className={styles.editorSectionHead} text="Endpoints" />
+          <FormikProvider value={formik}>
+            {values.paths.map((path, pathIndex) => (
+              <>
+                {path.methods
+                  .sort(
+                    (a, b) => methodColorMapping[a.type].order - methodColorMapping[b.type].order
+                  )
+                  .map((method, methodIndex) => (
+                    <MethodsAccordion
+                      tags={values.tags}
+                      method={method}
+                      path={path.path}
+                      setFieldValue={(key, value) => {
+                        const h = `paths[${pathIndex}].methods[${methodIndex}].${key}`
+                        setFieldValue(h, value)
+                      }}
+                      isOpen={openMethodIndex === methodIndex}
+                      setIsOpen={(open) => setOpenMethodIndex(open ? methodIndex : null)}
+                      errors={(formik.errors.paths?.[pathIndex] as any)?.methods?.[methodIndex]}
+                    />
+                  ))}
+              </>
+            ))}
+          </FormikProvider>
+        </div>
+        <div className={`${styles.livePreviewSide} ${styles.docSide}`}>
+          {transformedOpenApi && (
+            <FormikProvider value={formik}>
+              <LivePreview transformedData={transformedOpenApi} openApiErrors={openApiErrors} />
+            </FormikProvider>
+          )}
+        </div>
+      </div>
+      <CommonDialog
+        status="warning"
+        content={
+          <>
+            <h5
+              style={{
+                fontWeight: 600,
+                fontSize: '1.5rem',
+                lineHeight: '1.875rem',
+                color: '#FAAD14',
+                textAlign: 'center',
+                margin: 0,
+              }}
+            >
+              Publish Changes
+            </h5>
+            <p
+              style={{
+                textAlign: 'center',
+                fontWeight: 400,
+                fontSize: '1rem',
+                lineHeight: '1.4375rem',
+              }}
+            >
+              Are you sure to Publish the changes?
+            </p>
+          </>
+        }
+        onSubmit={{
+          onClick: () => {
+            handleSubmit()
+            setIsPublishDialogOpen(false)
+          },
+          text: 'Publish',
+          color: 'warning',
+          fullWidth: true,
+        }}
+        onCancel={{
+          text: 'Cancel',
+          color: 'action',
+          fullWidth: true,
+          variant: 'outlined',
+        }}
+        onClose={() => setIsPublishDialogOpen(false)}
+        open={isPublishDialogOpen}
+      />
+    </div>
+  )
+}
+
+export default Layout