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

package/src/layout/layout.tsx

@@ -1,24 +1,72 @@
-import React, { JSX } from 'react'
+import { 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'
+import { transformOpenApiObject, transformOpenApiObjectToOrigin } from '../helpers/layout.helper'
+import { OpenAPIFile } from '../types/openApi'
+import LivePreview from '../components/LivePreview/LivePreview'
+import { FormikProvider, useFormik } from 'formik'
+import * as Yup from 'yup'
+import { schemaValidation } from '../validator/form.scheme'
+import { TransformedOpenApi } from '@entities/transformedOpenApi'
+
+interface ILayoutProps {
+  openApiJson?: OpenAPIFile
+}
+
+const Layout = ({ openApiJson, handleSave }: ILayoutProps): JSX.Element => {
+  const transformedOpenApi = transformOpenApiObject(openApiJson)
+  const formik = useFormik<TransformedOpenApi>({
+    initialValues: structuredClone(transformedOpenApi),
+    validationSchema: schemaValidation,
+    validateOnMount: true,
+    onSubmit: (values, { validateForm }) => {
+      // Handle save logic
+      handleSave(transformOpenApiObjectToOrigin(values))
+      validateForm(values)
+    },
+  })
 
-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 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 />
+          <SectionHead className={styles.editorSectionHead} text="API Information" />
+          <FormikProvider value={formik}>
+            <InfoForm />
+          </FormikProvider>
+          <SectionHead className={styles.editorSectionHead} text="API Methods" />
+          <FormikProvider value={formik}>
+            {formik.values.paths.map((path, pathIndex) => (
+              <>
+                {path.methods.map((method, methodIndex) => (
+                  <MethodsAccordion
+                    method={method}
+                    path={path.path}
+                    setFieldValue={(key, value) => {
+                      const h = `paths[${pathIndex}].methods[${methodIndex}].${key}`
+                      formik.setFieldValue(h, value)
+                    }}
+                    handleSave={formik.submitForm}
+                  />
+                ))}
+              </>
+            ))}
+          </FormikProvider>
+        </div>
+        <div className={`${styles.livePreviewSide} ${styles.docSide}`}>
+          {transformedOpenApi && (
+            <FormikProvider value={formik}>
+              <LivePreview transformedData={transformedOpenApi} />
+            </FormikProvider>
+          )}
         </div>
-        <div className={`${styles.livePreviewSide} ${styles.docSide}`}></div>
       </div>
     </div>
   )

package/src/types/index.ts

@@ -1,20 +0,0 @@
-export type MethodTypes = 'GET' | 'POST' | 'PUT' | 'DELETE'
-
-export interface ParameterType {
-  name: string
-  in: string
-  schemaType: string
-  required: boolean
-}
-
-export interface MethodAccordionProps {
-  method: MethodTypes
-  path: string
-  desc: string
-  parameters: ParameterType[]
-  request: string
-  response: {
-    content: string
-    statusCode: number
-  }
-}

package/src/types/layout.type.ts

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

package/src/types/openApi.ts

@@ -0,0 +1,95 @@
+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
+  }[]
+}
+
+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[]
+}
+
+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'

package/src/types/transformedOpenApi.ts

@@ -0,0 +1,52 @@
+import { TransformedPathsArray } from "./layout.type";
+
+export interface TransformedOpenApi {
+  openapi: string;
+  info: {
+    title: string;
+    description?: string;
+    version: string;
+  };
+  servers?: {
+    url: string;
+    description?: string;
+  }[];
+  paths: TransformedPathsArray;
+  components?: {
+    schemas?: {
+      [schemaName: string]: Schema;
+    };
+    securitySchemes?: {
+      [schemeName: string]: SecurityScheme;
+    };
+  };
+  security?: {
+    [schemeName: string]: string[];
+  }[];
+  tags?: {
+    name: string;
+    description?: string;
+  }[];
+}
+
+interface Schema {
+  type?: string;
+  format?: string;
+  properties?: {
+    [propertyName: string]: Schema;
+  };
+  items?: Schema;
+  enum?: string[];
+  required?: string[];
+}
+
+interface SecurityScheme {
+  type: "apiKey" | "http" | "oauth2" | "openIdConnect";
+  description?: string;
+  name?: string;
+  in?: "query" | "header" | "cookie";
+  scheme?: string;
+  bearerFormat?: string;
+  flows?: any;
+  openIdConnectUrl?: string;
+}

package/src/validator/form.scheme.ts

@@ -0,0 +1,70 @@
+import * as yup from "yup";
+export const schemaValidation = yup.object({
+  openapi: yup.string().required(),
+  info: yup
+    .object({
+      title: yup.string().required("API Name is required."),
+      description: yup.string().optional(),
+      version: yup.string().required("API Version is required"),
+    })
+    .required(),
+  servers: yup
+    .array(
+      yup.object({
+        url: yup.string().url().required(),
+        description: yup.string().optional(),
+      })
+    )
+    .optional(),
+  paths: yup.mixed().required(), // Assuming TransformedPathsArray is validated elsewhere
+  components: yup
+    .object({
+      schemas: yup
+        .lazy((value) =>
+          yup.object(
+            value
+              ? Object.keys(value).reduce((acc, key) => {
+                  acc[key] = yup.object({
+                    type: yup.string().optional(),
+                    format: yup.string().optional(),
+                    properties: yup
+                      .lazy((props) =>
+                        yup.object(
+                          props
+                            ? Object.keys(props).reduce((acc, propKey) => {
+                                acc[propKey] = yup.mixed();
+                                return acc;
+                              }, {})
+                            : {}
+                        )
+                      )
+                      .optional(),
+                    items: yup.mixed().optional(),
+                    enum: yup.array(yup.string()).optional(),
+                    required: yup.array(yup.string()).optional(),
+                  });
+                  return acc;
+                }, {})
+              : {}
+          )
+        )
+        .optional(),
+      securitySchemes: yup.object().optional(),
+    })
+    .optional(),
+  security: yup
+    .array(
+      yup.object().shape({
+        schemeName: yup.array(yup.string()).optional(),
+      })
+    )
+    .optional(),
+  tags: yup
+    .array(
+      yup.object({
+        name: yup.string().required(),
+        description: yup.string().optional(),
+      })
+    )
+    .optional(),
+});

package/tsconfig.json

@@ -13,6 +13,7 @@
     "skipLibCheck": true,
     "forceConsistentCasingInFileNames": true,
     "importHelpers": true,
+    "resolveJsonModule": true,
     "plugins": [
       {
         "name": "typescript-plugin-css-modules"
@@ -22,7 +23,9 @@
     "paths": {
       "@components/*": ["src/components/*"],
       "@icons": ["src/assets/icons"],
-      "@constants/*": ["src/constants/*"]
+      "@constants/*": ["src/constants/*"],
+      "@entities/*": ["src/types/*"],
+      "@helpers/*": ["src/helpers/*"]
     }
   },
   "include": ["src", "src/global.d.ts"], // Add "src/global.d.ts" here

package/dist/src/components/Button/Button.js

@@ -1,2 +0,0 @@
-import{j as t}from"../../../_virtual/jsx-runtime.js";import o from"./Button.module.css.js";const s=({children:s,onClick:n})=>t.jsx("button",{className:o.button,onClick:n,children:s});export{s as default};
-//# sourceMappingURL=Button.js.map

package/dist/src/components/Button/Button.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Button.js","sources":["../../../../src/components/Button/Button.tsx"],"sourcesContent":["import React, { JSX } from 'react';\r\nimport styles from './Button.module.css'\r\ninterface ButtonProps {\r\n  children: React.ReactNode;\r\n  onClick?: () => void;\r\n}\r\n\r\nconst Button = ({ children, onClick }: ButtonProps): JSX.Element => {\r\n  return (\r\n    <button className={styles.button} onClick={onClick}>\r\n      {children}\r\n    </button>\r\n  );\r\n};\r\n\r\nexport default Button;"],"names":["Button","children","onClick","_jsx","className","styles","button"],"mappings":"2FAOM,MAAAA,EAAS,EAAGC,WAAUC,aAExBC,MAAA,SAAA,CAAQC,UAAWC,EAAOC,OAAQJ,QAASA,EAAOD,SAC/CA"}

package/dist/src/components/Button/Button.module.css.js

@@ -1,2 +0,0 @@
-import o from"../../../node_modules/style-inject/dist/style-inject.es.js";var t={button:"Button-module_button__2ZuB7"};o(".Button-module_button__2ZuB7{background-color:blue;border:none;border-radius:5px;color:#fff;cursor:pointer;padding:10px 20px}");export{t as default};
-//# sourceMappingURL=Button.module.css.js.map

package/dist/src/components/Button/Button.module.css.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Button.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/types/components/Button/Button.d.ts

@@ -1,7 +0,0 @@
-import React, { JSX } from 'react';
-interface ButtonProps {
-    children: React.ReactNode;
-    onClick?: () => void;
-}
-declare const Button: ({ children, onClick }: ButtonProps) => JSX.Element;
-export default Button;