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

package/dist/types/assets/icons/index.d.ts

@@ -17,6 +17,7 @@ export { default as BookIcon } from './BookIcon.svg';
 export { default as Closecircle } from './close-circle.svg';
 export { default as InfoIcon } from './infoIcon.svg';
 export { default as SearchIcon } from './searchIcon.svg';
+export { default as Copy } from './copy.svg';
 export { default as PlusIcon } from './Plus.svg';
 export { default as PlusSquare } from './PlusSquare.svg';
 export { default as RequestOption } from './RequestOption.svg';

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

@@ -41,4 +41,5 @@ export interface CommonDialogProps {
     isSubmitDisabled?: boolean;
     submitBtnComponent?: JSX.Element | null;
     withClose?: boolean;
+    noActions?: boolean;
 }

package/dist/types/components/dialog/index.d.ts

@@ -1,4 +1,4 @@
 import './style.scss';
 import { CommonDialogProps } from './dialog';
-declare const CommonDialog: ({ status, content, onSubmit, onCancel, onClose, open, size, icon, }: CommonDialogProps) => import("react/jsx-runtime").JSX.Element;
+declare const CommonDialog: ({ status, content, onSubmit, onCancel, onClose, open, size, icon, noActions, }: CommonDialogProps) => import("react/jsx-runtime").JSX.Element;
 export default CommonDialog;

package/dist/types/layout/docsComponents/Codebox/Codebox.d.ts

@@ -0,0 +1,4 @@
+declare const Codebox: ({ code }: {
+    code: string;
+}) => import("react/jsx-runtime").JSX.Element;
+export default Codebox;

package/dist/types/layout/docsComponents/DocsAside/DocsAside.d.ts

@@ -1,3 +1,5 @@
-import './style.scss';
-declare const DocsAside: () => import("react/jsx-runtime").JSX.Element;
+import { EndpointData } from 'src/layout/docsLayout';
+declare const DocsAside: ({ data }: {
+    data: EndpointData;
+}) => import("react/jsx-runtime").JSX.Element;
 export default DocsAside;

package/dist/types/layout/docsComponents/DocsContent/DocsContent.d.ts

@@ -1,3 +1,6 @@
 import './style.scss';
-declare const DocsContent: () => import("react/jsx-runtime").JSX.Element;
+import { EndpointData, OverviewData } from 'src/layout/docsLayout';
+declare const DocsContent: ({ data }: {
+    data: OverviewData | EndpointData;
+}) => import("react/jsx-runtime").JSX.Element;
 export default DocsContent;

package/dist/types/layout/docsComponents/DocsContent/EndpointPage/index.d.ts

@@ -1,2 +1,4 @@
 import './style.scss';
-export declare const EndpointPage: () => import("react/jsx-runtime").JSX.Element;
+export declare const EndpointPage: ({ data }: {
+    data: any;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/types/layout/docsComponents/DocsContent/TagPage/index.d.ts

@@ -1,2 +1,4 @@
 import './style.scss';
-export declare const TagPage: () => import("react/jsx-runtime").JSX.Element;
+export declare const TagPage: ({ data }: {
+    data: any;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/types/layout/docsComponents/DocsSideMenuTree/DocsSideMenuTree.d.ts

@@ -1,8 +1,9 @@
 import './style.scss';
-declare const DocsSideMenuTree: ({ apis, setActiveItemData, isFirstApiExpanded, setIsFirstApiExpanded, }: {
+declare const DocsSideMenuTree: ({ apis, setActiveItemData, isFirstApiExpanded, setIsFirstApiExpanded, setActiveType, }: {
     apis: any;
     setActiveItemData: any;
     isFirstApiExpanded: any;
     setIsFirstApiExpanded: any;
+    setActiveType: any;
 }) => import("react/jsx-runtime").JSX.Element;
 export default DocsSideMenuTree;

package/dist/types/utils/index.d.ts

@@ -0,0 +1 @@
+export declare const copyToClipboard: (text: string) => Promise<any>;

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@digi-frontend/dgate-api-documentation",
-  "version": "1.0.47",
+  "version": "1.0.50",
   "main": "dist/src/index.js",
   "module": "dist/src/index.js",
   "types": "dist/types/index.d.ts",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
-    "build": "tsc --noEmit --skipLibCheck || true && rollup -c"
+    "build": "tsc --noEmit --skipLibCheck || true && rollup -c || true"
   },
   "exports": {
     ".": "./src/index.ts"
@@ -23,12 +23,13 @@
     "nanoid": "^5.1.5",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
-    "react-inlinesvg": "^4.2.0",
+    "react-syntax-highlighter": "^15.6.1",
     "tslib": "^2.8.1",
     "yup": "^1.6.1"
   },
   "devDependencies": {
     "@rollup/plugin-commonjs": "^28.0.2",
+    "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^16.0.0",
     "@rollup/plugin-typescript": "^12.1.2",
     "@rollup/plugin-url": "^8.0.2",

package/rollup.config.js

@@ -5,6 +5,7 @@ import postcss from 'rollup-plugin-postcss'
 import { terser } from 'rollup-plugin-terser'
 import url from '@rollup/plugin-url'
 import sass from 'rollup-plugin-sass'
+import json from '@rollup/plugin-json';
 
 export default {
   input: 'src/index.ts',
@@ -30,6 +31,7 @@ export default {
     sass({
       output: 'dist/styles.css',
     }),
+    json()
   ],
   external: ['react', 'react-dom'],
 }

package/src/assets/icons/copy.svg

@@ -0,0 +1,4 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8 6.45V8.55C8 10.3 7.3 11 5.55 11H3.45C1.7 11 1 10.3 1 8.55V6.45C1 4.7 1.7 4 3.45 4H5.55C7.3 4 8 4.7 8 6.45Z" stroke="#6B7280" stroke-width="0.6" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M11 3.45V5.55C11 7.3 10.3 8 8.55 8H8V6.45C8 4.7 7.3 4 5.55 4H4V3.45C4 1.7 4.7 1 6.45 1H8.55C10.3 1 11 1.7 11 3.45Z" stroke="#6B7280" stroke-width="0.6" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/assets/icons/index.ts

@@ -17,6 +17,7 @@ export { default as BookIcon } from './BookIcon.svg'
 export { default as Closecircle } from './close-circle.svg'
 export { default as InfoIcon } from './infoIcon.svg'
 export { default as SearchIcon } from './searchIcon.svg'
+export { default as Copy } from './copy.svg'
 export { default as PlusIcon } from './Plus.svg'
 export { default as PlusSquare } from './PlusSquare.svg'
 export { default as RequestOption } from './RequestOption.svg'

package/src/components/MethodAccordion/MethodAccordion.module.scss

@@ -20,6 +20,15 @@
     padding: 0 !important;
   }
 
+  :global(.enumText) {
+    font-family: 'Cairo';
+    font-weight: 400;
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+    max-width: 5.5625rem;
+    white-space: normal;
+  }
+
   .methodSummaryContainer {
     display: flex;
     align-items: center;
@@ -92,7 +101,7 @@
         margin: 0;
         margin-bottom: 1.25rem;
       }
-      .responseHeader{
+      .responseHeader {
         display: flex;
         flex-direction: row;
         justify-content: space-between;
@@ -118,18 +127,18 @@
         }
 
         .statusCodeOptionContainer {
-        display: grid;
-        grid-template-columns: min-content min-content;
-        align-items: center;
-        gap: 0.625rem;
-
-        .statusCodeOptionCircle {
-          width: 0.625rem;
-          aspect-ratio: 1 / 1;
-          border-radius: 100%;
+          display: grid;
+          grid-template-columns: min-content min-content;
+          align-items: center;
+          gap: 0.625rem;
+
+          .statusCodeOptionCircle {
+            width: 0.625rem;
+            aspect-ratio: 1 / 1;
+            border-radius: 100%;
+          }
         }
       }
-      }
       .paramDescContainer {
         display: flex;
 

package/src/components/MethodAccordion/MethodAccordion.tsx

@@ -229,7 +229,7 @@ const MethodsAccordion = ({
         enum: (
           <>
             {readOnly ? (
-              item?.schema?.enum?.join(' / ')
+              <span className="enumText">{item?.schema?.enum?.join('/\u200B')}</span>
             ) : (
               <div data-id="TEXT_DESCRIPTION" className="tableData">
                 {method.parameters[index]?.schema &&
@@ -294,7 +294,8 @@ const MethodsAccordion = ({
                                 enumFields?.filter((item) => !item).length) ||
                               (method?.parameters[index]?.schema?.enum &&
                                 method?.parameters[index]?.schema?.enum?.length > 0 &&
-                                method?.parameters[index]?.schema?.enum?.filter((item) => !item).length)
+                                method?.parameters[index]?.schema?.enum?.filter((item) => !item)
+                                  .length)
                             }
                           >
                             Apply
@@ -303,17 +304,24 @@ const MethodsAccordion = ({
                       </div>
                     }
                   >
-                    <Button
-                      className={styles.editDescBtn}
-                      id="EnumButton"
-                      variant="link"
-                      color="action"
-                      endIcon={
-                        <SVGLoader id="enumIcon" src={PlusIcon} width="1.5rem" height="1.5rem" />
-                      }
-                    >
-                      Add
-                    </Button>
+                    {method.parameters[index]?.schema?.enum &&
+                    method.parameters[index]?.schema?.enum?.length > 0 ? (
+                      <span className={'enumText'}>
+                        {method.parameters[index]?.schema?.enum?.join('/\u200B')}
+                      </span>
+                    ) : (
+                      <Button
+                        className={styles.editDescBtn}
+                        id="EnumButton"
+                        variant="link"
+                        color="action"
+                        endIcon={
+                          <SVGLoader id="enumIcon" src={PlusIcon} width="1.5rem" height="1.5rem" />
+                        }
+                      >
+                        Add
+                      </Button>
+                    )}
                   </Tooltip>
                 ) : (
                   '-'

package/src/components/dialog/dialog.ts

@@ -54,4 +54,5 @@ export interface CommonDialogProps {
   isSubmitDisabled?: boolean
   submitBtnComponent?: JSX.Element | null
   withClose?: boolean
+  noActions?: boolean
 }

package/src/components/dialog/index.tsx

@@ -19,6 +19,7 @@ const CommonDialog = ({
       <SVGLoader src={InfoIcon} width="4.0625rem" height="4.0625rem" />
     </>
   ),
+  noActions = false,
 }: CommonDialogProps) => {
   const handleClose = () => {
     onClose() // Always close the dialog first
@@ -44,30 +45,32 @@ const CommonDialog = ({
       />
 
       {content}
-      <div
-        className="confirmation-dialog-footer"
-        style={{ marginBottom: onCancel || onSubmit ? '1.5rem' : '1rem' }}
-      >
-        {onCancel && (
-          <Button
-            {...onCancel}
-            onClick={handleClose}
-            variant={onCancel.variant || 'outlined'}
-            color={onCancel.color || 'normal'}
-          >
-            {onCancel.text}
-          </Button>
-        )}
-        {onSubmit && (
-          <Button
-            {...onSubmit}
-            variant={onSubmit.variant || 'contained'}
-            color={onSubmit.color || 'secondary'}
-          >
-            {onSubmit.text}
-          </Button>
-        )}
-      </div>
+      {!!noActions ? null : (
+        <div
+          className="confirmation-dialog-footer"
+          style={{ marginBottom: onCancel || onSubmit ? '1.5rem' : '1rem' }}
+        >
+          {onCancel && (
+            <Button
+              {...onCancel}
+              onClick={handleClose}
+              variant={onCancel.variant || 'outlined'}
+              color={onCancel.color || 'normal'}
+            >
+              {onCancel.text}
+            </Button>
+          )}
+          {onSubmit && (
+            <Button
+              {...onSubmit}
+              variant={onSubmit.variant || 'contained'}
+              color={onSubmit.color || 'secondary'}
+            >
+              {onSubmit.text}
+            </Button>
+          )}
+        </div>
+      )}
     </div>
   )
 

package/src/components/table/table.tsx

@@ -51,7 +51,11 @@ const ParamterTable = ({
           type: yup.string().optional(),
         }),
       }),
-      required: yup.boolean().optional(),
+      required: yup.boolean().when('in', {
+        is: 'path',
+        then: (schema) => schema.oneOf([true], 'Path parameters must be required.'),
+        otherwise: (schema) => schema.optional(),
+      }),
       description: yup.string().default('').trim().optional(),
     }),
     onSubmit: (values) => {

package/src/constants/methods.constant.ts

@@ -9,7 +9,7 @@ export const METHOD_OPTIONS: MethodOption[] = [
   { label: 'GET', value: 'GET', color: '#3b82f6' },
   { label: 'Delete', value: 'DELETE', color: '#ef4444' },
   { label: 'Put', value: 'PUT', color: '#f59e0b' },
-  { label: 'PATCH', value: 'PATCH', color: '#8b5cf6' },
+  { label: 'PATCH', value: 'PATCH', color: '#C0F4E8' },
   { label: 'OPTIONS', value: 'OPTIONS', color: '#6b7280' },
   { label: 'HEAD', value: 'HEAD', color: '#8b5cf6' },
   { label: 'TRACE', value: 'TRACE', color: '#ec4899' },

package/src/layout/docsComponents/Codebox/Codebox.tsx

@@ -0,0 +1,61 @@
+import React, { useState } from 'react'
+import { Light as SyntaxHighlighter } from 'react-syntax-highlighter'
+import {
+  stackoverflowDark,
+  stackoverflowLight,
+} from 'react-syntax-highlighter/dist/esm/styles/hljs'
+import styles from './style.module.scss'
+import SVGLoader from '../../../components/SVGLoader/SVGLoader'
+import { Copy } from '../../../assets/icons'
+import { copyToClipboard } from '../../../utils'
+
+const Codebox = ({ code }: { code: string }) => {
+  const [theme, setTheme] = useState<'LIGHT' | 'DARK'>('DARK')
+
+  return (
+    <div className={styles.codebox}>
+      <div className={styles.codebox_header}>
+        <div
+          role="button"
+          tabIndex={-1}
+          onClick={() => theme !== 'LIGHT' && setTheme('LIGHT')}
+          className={`${styles.codebox_header_themeToggle} ${styles.codebox_header_themeToggle_light}`}
+          title="Light theme"
+        ></div>
+        <div
+          role="button"
+          tabIndex={-1}
+          onClick={() => theme !== 'DARK' && setTheme('DARK')}
+          className={`${styles.codebox_header_themeToggle} ${styles.codebox_header_themeToggle_dark}`}
+          title="Dark theme"
+        ></div>
+        <SVGLoader
+          src={Copy}
+          width="0.75rem"
+          height="0.75rem"
+          className={styles.codebox_header_copyIcon}
+          onClick={() => copyToClipboard(code)}
+        />
+      </div>
+      <SyntaxHighlighter
+        language="json"
+        style={theme === 'LIGHT' ? stackoverflowLight : stackoverflowDark}
+        showLineNumbers
+        wrapLines
+        customStyle={{
+          margin: 0,
+          height: '13.75rem',
+          overflowY: 'auto',
+          padding: '0.75rem 1rem 0 1.5rem',
+          backgroundColor: theme === 'DARK' ? '#455162' : '#F7F7F7',
+          fontSize: '0.75rem',
+        }}
+        lineProps={{ className: 'custom-code-line' }}
+      >
+        {code}
+      </SyntaxHighlighter>
+    </div>
+  )
+}
+
+export default Codebox

package/src/layout/docsComponents/Codebox/style.module.scss

@@ -0,0 +1,43 @@
+.codebox {
+  border-radius: 0.25rem;
+  overflow: hidden;
+
+  &_header {
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+    padding-left: 0.5rem;
+    height: 1.75rem;
+    border: 1px solid #bbbec5;
+    border-top-right-radius: 0.25rem;
+    border-top-left-radius: 0.25rem;
+
+    &_themeToggle {
+      width: 0.75rem;
+      min-width: 0.75rem;
+      aspect-ratio: 1 / 1;
+      border: 1px solid transparent;
+      border-radius: 100%;
+      cursor: pointer;
+
+      &_dark {
+        background-color: #455162;
+        border-color: #6b7280;
+      }
+
+      &_light {
+        background-color: #edf1fb;
+        border-color: #6b7280;
+      }
+    }
+
+    &_copyIcon {
+      cursor: pointer;
+    }
+  }
+
+  :global(.custom-code-line),
+  :global(.custom-code-line span) {
+    font-family: 'Cascadia Code', sans-serif;
+  }
+}

package/src/layout/docsComponents/DocsAside/DocsAside.tsx

@@ -1,8 +1,94 @@
-import React from 'react'
-import './style.scss'
+import React, { useState } from 'react'
+import { EndpointData } from 'src/layout/docsLayout'
+import Codebox from '../Codebox/Codebox'
+import { SelectGroup } from 'digitinary-ui'
+import { httpStatusCodes } from '../../../constants/index'
+import { handleStatusColor } from '../../../helpers/methodAccordion.helper'
+import styles from './style.module.scss'
 
-const DocsAside = () => {
-  return <aside className="api-docs-aside"></aside>
+const httpStatusCodeOptions = httpStatusCodes.map((code) => ({
+  label: (
+    <div className={styles.statusCodeOptionContainer}>
+      <div
+        className={styles.statusCodeOptionCircle}
+        style={{ backgroundColor: handleStatusColor(code) }}
+      ></div>
+      <span>{code}</span>
+    </div>
+  ),
+  value: code,
+}))
+
+const DocsAside = ({ data }: { data: EndpointData }) => {
+  const [selectedResStatusCode, setSelectedResStatusCode] = useState(httpStatusCodeOptions[4])
+  const currentResponse =
+    Object.entries(data.responses)
+      .map(([code, data]) => ({ code, data }))
+      .find((res) => Number(res.code) === selectedResStatusCode.value) || '{}'
+
+  const stringifyRequestBody = () => {
+    if (data?.requestBody?.content) {
+      const contentKey = Object.keys(data?.requestBody?.content)[0]
+      return JSON.stringify(data?.requestBody?.content[contentKey], null, 2)
+    } else {
+      return '{}'
+    }
+  }
+
+  const stringifyResponseBody = () => {
+    if (currentResponse?.data) {
+      const contentKey = Object.keys(currentResponse.data?.content)[0]
+      return JSON.stringify(currentResponse.data?.content[contentKey], null, 2)
+    } else {
+      return '{}'
+    }
+  }
+
+  return (
+    <aside className={styles.apiDocsAside}>
+      <h2 className={styles.apiDocsAside_title}>{data.summary}</h2>
+      <h4 className={styles.apiDocsAside_subtitle}>
+        <span className={styles.apiDocsAside_subtitle_method} data-method={data.method}>
+          {data.method}
+        </span>{' '}
+        <span>{data.path}</span>
+      </h4>
+      {data?.requestBody?.content && (
+        <div className={styles.codeboxSection}>
+          <div className={styles.codeboxHeader}>
+            <h6 className={styles.codeboxTitle}>Request</h6>
+          </div>
+
+          <Codebox code={stringifyRequestBody()} />
+        </div>
+      )}
+      {Object.keys(data?.responses || {})?.length > 0 && (
+        <div className={styles.codeboxSection}>
+          <div className={`${styles.codeboxHeader}`}>
+            <h6 className={styles.codeboxTitle}>Response</h6>
+            <SelectGroup
+              size="small"
+              withSearch={false}
+              isMultiple={false}
+              clearable={false}
+              placeholder="200"
+              options={[
+                {
+                  list: httpStatusCodeOptions,
+                },
+              ]}
+              value={selectedResStatusCode}
+              onChange={(value) => {
+                setSelectedResStatusCode(value)
+              }}
+            />
+          </div>
+
+          <Codebox code={stringifyResponseBody()} />
+        </div>
+      )}
+    </aside>
+  )
 }
 
 export default DocsAside

package/src/layout/docsComponents/DocsAside/style.module.scss

@@ -0,0 +1,113 @@
+.apiDocsAside {
+  width: 22.5rem;
+  padding: 3rem 1.5rem;
+  background-color: #f0f1f2;
+
+  &_title {
+    font-size: 1.5rem;
+    line-height: 2rem;
+    font-weight: 600;
+    color: #12131a;
+    margin-bottom: 0.5rem;
+  }
+
+  &_subtitle {
+    margin-bottom: 2rem;
+
+    > span {
+      font-size: 1.25rem;
+      line-height: 1.75rem;
+      font-weight: 400;
+    }
+
+    &_method {
+      &[data-method='get'] {
+        color: #3a6cd1;
+      }
+
+      &[data-method='post'] {
+        color: #3aaa35;
+      }
+
+      &[data-method='put'] {
+        color: #faad14;
+      }
+
+      &[data-method='delete'] {
+        color: #da3f3f;
+      }
+
+      &[data-method='option'] {
+        color: #495d97;
+      }
+
+      &[data-method='head'] {
+        color: #9461c9;
+      }
+
+      &[data-method='patch'] {
+        color: #58e2c2;
+      }
+    }
+  }
+
+  .codeboxSection {
+    .codeboxHeader {
+      height: 2rem;
+      display: flex;
+      justify-content: space-between;
+      margin-bottom: 0.25rem;
+
+      h6 {
+        font-size: 1rem;
+        line-height: 1.25rem;
+        font-weight: 500;
+        color: #616874;
+      }
+    }
+
+    &:nth-of-type(2) {
+      margin-top: 3rem;
+    }
+
+    :global(.multiSelectGroup) {
+      :global(.selectDisplay) {
+        padding: 0;
+
+        :global(.select-label-container) {
+          min-width: 100%;
+          padding: 0;
+        }
+      }
+
+      :global(.optionsList .option) {
+        height: 1.5rem;
+        padding: 0;
+      }
+
+      .statusCodeOptionContainer {
+        display: flex;
+        align-items: center;
+        gap: 0.625rem;
+        padding-left: 0.75rem;
+
+        .statusCodeOptionCircle {
+          width: 0.625rem;
+          min-width: 0.625rem;
+          aspect-ratio: 1 / 1;
+          border-radius: 100%;
+        }
+      }
+    }
+  }
+
+  :global(.multiSelectGroup .selectDisplay),
+  :global(.multiSelectGroup) {
+    width: 6.25rem;
+    height: 1.5rem;
+  }
+
+  :global(.multiSelectGroup .selectDisplay .displayValueContainer .iconsContainer) {
+    padding-right: 0.75rem;
+  }
+}