@digi-frontend/dgate-api-documentation 1.0.28 → 1.0.31

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;
+  }
 }

package/src/layout/layout.tsx

@@ -1,150 +1,150 @@
-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
+}
+
+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

package/src/types/layout.type.ts

@@ -1,30 +1,30 @@
-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[]
+  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[]