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

package/src/layout/layout.module.css

@@ -1,65 +1,56 @@
-.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;
-  }
-}
+.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;
+      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.875rem;
+    }
+
+    .docSide {
+      max-height: 100%;
+      overflow-y: overlay;
+      overflow-x: clip;
+      scroll-behavior: smooth;
+    }
+  }
+}

package/src/layout/layout.tsx

@@ -1,181 +1,99 @@
-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
+import { JSX } 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'
+
+interface ILayoutProps {
+  openApiJson?: OpenAPIFile
+}
+
+const Layout = ({ openApiJson, handleSave }: 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 }) => {
+      // Handle save logic
+      const originalOpenApiForm = transformOpenApiObjectToOrigin(values)
+      handleSave(originalOpenApiForm)
+      validateForm(values)
+    },
+  })
+
+  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
+            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={formik.submitForm}
+                >
+                  Save
+                </Button>
+              </div>
+            }
+          />
+          <FormikProvider value={formik}>
+            <InfoForm />
+          </FormikProvider>
+          <SectionHead className={styles.editorSectionHead} text="API Methods" />
+          <FormikProvider value={formik}>
+            {formik.values.paths.map((path, pathIndex) => (
+              <>
+                {path.methods
+                  .sort(
+                    (method) =>
+                      methodColorMapping[method.type].order + methodColorMapping[method.type].order
+                  )
+                  .map((method, methodIndex) => (
+                    <MethodsAccordion
+                      method={method}
+                      path={path.path}
+                      setFieldValue={(key, value) => {
+                        const h = `paths[${pathIndex}].methods[${methodIndex}].${key}`
+                        formik.setFieldValue(h, value)
+                      }}
+                    />
+                  ))}
+              </>
+            ))}
+          </FormikProvider>
+        </div>
+        <div className={`${styles.livePreviewSide} ${styles.docSide}`}>
+          {transformedOpenApi && (
+            <FormikProvider value={formik}>
+              <LivePreview transformedData={transformedOpenApi} />
+            </FormikProvider>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default Layout

package/src/types/index.ts

@@ -1,28 +0,0 @@
-import { OpenAPIFile } from './openApi'
-
-export interface ApiSpecModel {
-  apiSpecId: string
-  contextPath: string
-  apiVersions: {
-    addVersionToContextPath: boolean
-    apiSpecId: string
-    name: string
-    metaData: {
-      version: string
-    }
-  }[]
-  associatedProduct: {
-    availableOnDevPortal: boolean
-    name: string
-    premium: boolean
-    productId: number
-  }
-  metaData: {
-    version: string
-    apiVersionOf: string
-    openApiJson: OpenAPIFile
-    tags: string[]
-    createdDateTime: string
-    lastUpdatedDateTime: string
-  }
-}

package/src/types/layout.type.ts

@@ -1,32 +1,30 @@
-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
-    }
-    headers: any
-  }[]
-}
-
-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[]