@digi-frontend/dgate-api-documentation 1.0.0

package/src/components/SVGLoader/SVGLoader.tsx

@@ -0,0 +1,94 @@
+import React, { useState, useEffect } from 'react'
+import parse from 'html-react-parser'
+
+// Utility function to create an SVG element from a string
+const createSvgElement = (svgString: string): SVGSVGElement | null => {
+  const parser = new DOMParser()
+  const doc = parser.parseFromString(svgString, 'image/svg+xml')
+  return doc.querySelector('svg')
+}
+
+// Define the type for SVG attributes
+type SVGAttributes = React.SVGProps<SVGSVGElement>
+
+interface SVGLoaderProps extends SVGAttributes {
+  src: string
+  cache?: boolean
+}
+
+const SVGLoader: React.FC<SVGLoaderProps> | any = ({ src, cache = true, ...props }) => {
+  const [svgMarkup, setSvgMarkup] = useState<string | null>(null)
+
+  useEffect(() => {
+    if (!src) return
+    if (typeof src !== 'string') console.log({ src })
+    const isUrl = src.startsWith('http') || src.startsWith('/')
+
+    const cacheName = 'svg-cache'
+
+    const fetchSvg = async () => {
+      try {
+        let svgString: string | null = null
+
+        // Use the Cache API if caching is enabled
+        if (cache && isUrl && 'caches' in window) {
+          const cacheStorage = await caches.open(cacheName)
+          const cachedResponse = await cacheStorage.match(src)
+
+          // If SVG is found in cache, use it
+          if (cachedResponse && cachedResponse.ok) {
+            svgString = await cachedResponse.text()
+            setSvgMarkup(svgString)
+            return
+          }
+        }
+
+        // If not cached, fetch from URL
+        if (isUrl) {
+          const response = await fetch(src)
+
+          // Clone the response before consuming it
+          const responseClone = response.clone()
+
+          // Consume the response body for the SVG content
+          svgString = await response.text()
+
+          // Store the cloned response in the cache
+          if (cache && 'caches' in window) {
+            const cacheStorage = await caches.open(cacheName)
+            await cacheStorage.put(src, responseClone)
+          }
+        } else {
+          // If it's not a URL (it's inline), just use the source string
+          svgString = src
+        }
+
+        // If we have valid SVG content, set it
+        if (svgString) {
+          const svg = createSvgElement(svgString)
+          if (svg) {
+            const svgStringWithProps = new XMLSerializer().serializeToString(svg)
+            setSvgMarkup(svgStringWithProps)
+          }
+        }
+      } catch (error) {
+        console.error('Error loading SVG:', error)
+      }
+    }
+
+    fetchSvg()
+  }, [src, props])
+
+  if (!svgMarkup) return null
+
+  // Parse the SVG string and return it as JSX
+  const parsedSvg = parse(svgMarkup)
+  // Sometimes parse returns an array which includes the element
+  const toBeClonedElement = Array.isArray(parsedSvg) ? parsedSvg.find((item) => React.isValidElement(item)) : parsedSvg
+  // Clone the parsed SVG element to apply the props
+  const clonedSvg = React.cloneElement(toBeClonedElement as React.ReactElement, props)
+
+  return <>{clonedSvg}</>
+}
+
+export default SVGLoader

package/src/components/SectionHead/SectionHead.scss

@@ -0,0 +1,29 @@
+.containerTitleDrawer {
+  height: 64px;
+  min-height: 64px;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  background-color: #f1f2f6;
+  padding: 0 30px 0 30px;
+  width: 100%;
+
+  span {
+    color: #12131a;
+    font-weight: 600;
+    font-size: 18px;
+    line-height: 25px;
+    letter-spacing: 0em;
+  }
+
+  svg {
+    path {
+      stroke: #000 !important;
+    }
+  }
+
+  .closeIcon {
+    cursor: pointer;
+  }
+}

package/src/components/SectionHead/SectionHead.tsx

@@ -0,0 +1,22 @@
+import React, { type JSX } from 'react'
+import './SectionHead.scss'
+import SVGLoader from '../SVGLoader/SVGLoader'
+
+type SectionHeadProps = {
+  text: string | JSX.Element
+  closeFunction?: () => void
+  children?: JSX.Element
+  className?: string
+}
+
+const SectionHead: React.FC<SectionHeadProps> = ({ text, closeFunction, children, className = '' }: SectionHeadProps): any => {
+  return (
+    <div className={`containerTitleDrawer ${className}`}>
+      <span data-id={`${String(text)?.toUpperCase()?.replaceAll(' ', '_')}_ID`}>{text}</span>
+      {children}
+
+      {closeFunction && <SVGLoader className='closeIcon' onClick={closeFunction} width='1.5rem' height='1.5rem' />}
+    </div>
+  )
+}
+export default SectionHead

package/src/constants/index.ts

@@ -0,0 +1,49 @@
+export const methodColorMapping = {
+  GET: {
+    label: 'Get',
+    color: '#3A6CD1',
+  },
+  POST: {
+    label: 'Post',
+    color: '#3AAA35',
+  },
+  PUT: {
+    label: 'Put',
+    color: '#FAAD14',
+  },
+  DELETE: {
+    label: 'Delete',
+    color: '#DA3F3F',
+  },
+}
+
+export const paramsTableHeaders = [
+  {
+    id: 'paramName',
+    label: 'Parameter Name',
+    sortable: false,
+    required: true,
+    classes: 'requiredParam',
+  },
+  { id: 'paramType', label: 'In', sortable: false, classes: 'requiredParam' },
+  { id: 'schemaType', label: 'Schema-Type', sortable: false, classes: 'requiredParam' },
+  { id: 'isRequired', label: 'Required', sortable: false, classes: 'requiredParam' },
+  { id: 'description', label: 'Description', sortable: false },
+]
+
+export const httpStatusCodes = [
+  // 1xx: Informational responses
+  100, 101, 102, 103,
+
+  // 2xx: Success
+  200, 201, 202, 203, 204, 205, 206, 207, 208, 226,
+
+  // 3xx: Redirection
+  300, 301, 302, 303, 304, 305, 306, 307, 308,
+
+  // 4xx: Client errors
+  400, 401, 402, 403, 404, 405, 406, 407, 408, 409, 410, 411, 412, 413, 414, 415, 416, 417, 418, 421, 422, 423, 424, 425, 426, 428, 429, 431, 451,
+
+  // 5xx: Server errors
+  500, 501, 502, 503, 504, 505, 506, 507, 508, 510, 511,
+]

package/src/constants/regex.ts

@@ -0,0 +1,5 @@
+const regex = {
+  basic: /[^a-zA-Z0-9-_ ]/, // not (alphanumeric + underscore + dash + space)
+  restrictNone: /^$/, // restrict nothing
+}
+export default regex

package/src/global.d.ts

@@ -0,0 +1,13 @@
+declare module '*.module.css' {
+  const classes: { [key: string]: string }
+  export default classes
+}
+declare module '*.module.scss' {
+  const classes: { [key: string]: string }
+  export default classes
+}
+
+declare module '*.svg' {
+  const src: string
+  export default src
+}

package/src/index.ts

@@ -0,0 +1 @@
+export { default as Layout } from './layout/layout'

package/src/layout/layout.module.css

@@ -0,0 +1,37 @@
+.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;
+    }
+  }
+}

package/src/layout/layout.tsx

@@ -0,0 +1,27 @@
+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

package/src/types/index.ts

@@ -0,0 +1,20 @@
+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/tsconfig.json

@@ -0,0 +1,30 @@
+{
+  "compilerOptions": {
+    "outDir": "dist",
+    "module": "ESNext",
+    "target": "ES6",
+    "lib": ["DOM", "DOM.Iterable", "ESNext"],
+    "declaration": true,
+    "declarationDir": "dist/types",
+    "jsx": "react-jsx",
+    "strict": false,
+    "moduleResolution": "node",
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "importHelpers": true,
+    "plugins": [
+      {
+        "name": "typescript-plugin-css-modules"
+      }
+    ],
+    "baseUrl": "./",
+    "paths": {
+      "@components/*": ["src/components/*"],
+      "@icons": ["src/assets/icons"],
+      "@constants/*": ["src/constants/*"]
+    }
+  },
+  "include": ["src", "src/global.d.ts"], // Add "src/global.d.ts" here
+  "exclude": ["node_modules", "dist"]
+}