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

package/src/layout/layout.tsx

@@ -1,150 +1,162 @@
-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
-}
-
-const Layout = ({ openApiJson, handleSave, setIsFormDirty }: 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 }) => {
-      // Handle save logic
-      const originalOpenApiForm = transformOpenApiObjectToOrigin(values)
-      handleSave(originalOpenApiForm)
-      resetForm({
-        values: values, // You can reset it to the same values if you want
-      })
-
-      validateForm(values)
-    },
-  })
-  const { dirty, isValid, isSubmitting, values, setFieldValue, handleSubmit } = formik
-  const [isPublishDialogOpen, setIsPublishDialogOpen] = useState(false)
-  const [openMethodIndex, setOpenMethodIndex] = useState<number | null>(null)
-
-  useEffect(() => {
-    if (setIsFormDirty) {
-      setIsFormDirty(dirty)
-    }
-  }, [dirty])
-
-  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}
-            text={
-              <div className={styles.editorSectionHead_content}>
-                API Information
-                <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)}
-                    />
-                  ))}
-              </>
-            ))}
-          </FormikProvider>
-        </div>
-        <div className={`${styles.livePreviewSide} ${styles.docSide}`}>
-          {transformedOpenApi && (
-            <FormikProvider value={formik}>
-              <LivePreview transformedData={transformedOpenApi} />
-            </FormikProvider>
-          )}
-        </div>
-      </div>
-      <CommonDialog
-        status="warning"
-        content={
-          <p
-            style={{
-              textAlign: 'center',
-              fontWeight: 400,
-              fontSize: '1rem',
-              lineHeight: '1.4375rem',
-            }}
-          >
-            Are you sure you want to Publish your changes?
-          </p>
-        }
-        onSubmit={{
-          onClick: () => {
-            handleSubmit()
-            setIsPublishDialogOpen(false)
-          },
-          text: 'Publish',
-          color: 'warning',
-          fullWidth: true,
-        }}
-        onCancel={{
-          text: 'Cancel',
-          color: 'normal',
-          fullWidth: true,
-        }}
-        onClose={() => setIsPublishDialogOpen(false)}
-        open={isPublishDialogOpen}
-      />
-    </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 }) => {
+      // Handle save logic
+      const originalOpenApiForm = transformOpenApiObjectToOrigin(values)
+      handleSave(originalOpenApiForm)
+      resetForm({
+        values: values, // You can reset it to the same values if you want
+      })
+
+      validateForm(values)
+    },
+  })
+  const { dirty, isValid, isSubmitting, values, setFieldValue, handleSubmit } = formik
+  const [isPublishDialogOpen, setIsPublishDialogOpen] = useState(false)
+  const [openMethodIndex, setOpenMethodIndex] = useState<number | null>(null)
+
+  useEffect(() => {
+    if (setIsFormDirty) {
+      setIsFormDirty(dirty)
+    }
+  }, [dirty])
+
+  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,
+        }}
+        onClose={() => setIsPublishDialogOpen(false)}
+        open={isPublishDialogOpen}
+      />
+    </div>
+  )
+}
+
+export default Layout

package/src/types/layout.type.ts

@@ -1,30 +1,31 @@
-import { HTTPMethod } from './openApi'
-
-export type TransformedMethod = {
-  type: HTTPMethod
-  tags: string[]
-  parameters: any
-  requestBody: {
-    content: {
-      contentType: string
-      schema: {
-        properties: string
-        type: string
-      }
-    }
-  }
-  responses: {
-    code: string
-    content: {
-      contentType?: string
-      schema?: unknown
-    }
-  }[]
-}
-
-export type TransformedPath = {
-  path: string
-  methods: TransformedMethod[]
-}
-
-export type TransformedPathsArray = TransformedPath[]
+import { HTTPMethod } from './openApi'
+
+export type TransformedMethod = {
+  type: HTTPMethod
+  tags: string[]
+  summary?: string
+  parameters: any
+  requestBody: {
+    content: {
+      contentType: string
+      schema: {
+        properties: string
+        type: string
+      }
+    }
+  }
+  responses: {
+    code: string
+    content: {
+      contentType?: string
+      schema?: unknown
+    }
+  }[]
+}
+
+export type TransformedPath = {
+  path: string
+  methods: TransformedMethod[]
+}
+
+export type TransformedPathsArray = TransformedPath[]

package/src/types/openApi.ts

@@ -1,108 +1,108 @@
-export interface OpenAPIFile {
-  openapi: string
-  info: {
-    title: string
-    description?: string
-    version: string
-  }
-  servers?: {
-    url: string
-    description?: string
-  }[]
-  paths: {
-    [path: string]: Partial<
-      Record<
-        HTTPMethod,
-        {
-          tags: string[]
-          responses: Responses
-          summary?: string
-          description?: string
-          parameters?: Parameter[]
-          requestBody?: RequestBody
-        }
-      >
-    >
-  }
-  components?: {
-    schemas?: {
-      [schemaName: string]: Schema
-    }
-    securitySchemes?: {
-      [schemeName: string]: SecurityScheme
-    }
-  }
-  security?: {
-    [schemeName: string]: string[]
-  }[]
-  tags?: {
-    name: string
-    description?: string
-    externalDocs?: {
-      url: string
-      description: string
-    }[]
-  }[]
-}
-
-export interface Tags {
-  name: string
-  description?: string
-  externalDocs?: {
-    url: string
-    description: string
-  }[]
-}
-
-interface Parameter {
-  name: string
-  in: 'query' | 'header' | 'path' | 'cookie'
-  description?: string
-  required: boolean
-  schema: Schema
-}
-
-interface RequestBody {
-  description?: string
-  required: boolean
-  content: {
-    [contentType: string]: {
-      schema: Schema
-    }
-  }
-}
-
-interface Responses {
-  [statusCode: string]: {
-    description: string
-    content?: {
-      [contentType: string]: {
-        schema: Schema
-      }
-    }
-  }
-}
-
-interface Schema {
-  type?: string
-  format?: string
-  properties?: {
-    [propertyName: string]: Schema
-  }
-  items?: Schema
-  enum?: string[]
-  required?: string[]
-}
-
-export interface SecurityScheme {
-  type: 'apiKey' | 'http' | 'oauth2' | 'openIdConnect'
-  description?: string
-  name?: string
-  in?: 'query' | 'header' | 'cookie'
-  scheme?: string
-  bearerFormat?: string
-  flows?: any
-  openIdConnectUrl?: string
-}
-
-export type HTTPMethod = 'get' | 'put' | 'post' | 'delete' | 'options' | 'head' | 'patch' | 'trace'
+export interface OpenAPIFile {
+  openapi: string
+  info: {
+    title: string
+    description: string
+    version: string
+  }
+  servers?: {
+    url: string
+    description?: string
+  }[]
+  paths: {
+    [path: string]: Partial<
+      Record<
+        HTTPMethod,
+        {
+          tags: string[]
+          responses: Responses
+          summary?: string
+          description?: string
+          parameters?: Parameter[]
+          requestBody?: RequestBody
+        }
+      >
+    >
+  }
+  components?: {
+    schemas?: {
+      [schemaName: string]: Schema
+    }
+    securitySchemes?: {
+      [schemeName: string]: SecurityScheme
+    }
+  }
+  security?: {
+    [schemeName: string]: string[]
+  }[]
+  tags?: {
+    name: string
+    description?: string
+    externalDocs?: {
+      url: string
+      description: string
+    }[]
+  }[]
+}
+
+export interface Tags {
+  name: string
+  description?: string
+  externalDocs?: {
+    url: string
+    description: string
+  }[]
+}
+
+export interface Parameter {
+  name: string
+  in: 'query' | 'header' | 'path' | 'cookie'
+  description?: string
+  required: boolean
+  schema: Schema
+}
+
+export interface RequestBody {
+  description?: string
+  required: boolean
+  content: {
+    [contentType: string]: {
+      schema: Schema
+    }
+  }
+}
+
+export interface Responses {
+  [statusCode: string]: {
+    description: string
+    content?: {
+      [contentType: string]: {
+        schema: Schema
+      }
+    }
+  }
+}
+
+interface Schema {
+  type?: string
+  format?: string
+  properties?: {
+    [propertyName: string]: Schema
+  }
+  items?: Schema
+  enum?: string[]
+  required?: string[]
+}
+
+export interface SecurityScheme {
+  type: 'apiKey' | 'http' | 'oauth2' | 'openIdConnect'
+  description?: string
+  name?: string
+  in?: 'query' | 'header' | 'cookie'
+  scheme?: string
+  bearerFormat?: string
+  flows?: any
+  openIdConnectUrl?: string
+}
+
+export type HTTPMethod = 'get' | 'put' | 'post' | 'delete' | 'options' | 'head' | 'patch' | 'trace'