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

package/src/components/JsonInput/style.module.scss

@@ -0,0 +1,133 @@
+.json-editor-container {
+  overflow: hidden;
+  border-bottom-right-radius: 0.3125rem;
+  border-bottom-left-radius: 0.3125rem;
+
+  .json-editor-label {
+    font-size: 0.875rem;
+    font-weight: 600;
+    line-height: 1.25rem;
+    margin-bottom: 0.3125rem;
+  }
+
+  .json-editor {
+    display: flex;
+    flex-direction: column;
+    background-color: #142452;
+    width: 100%;
+    outline: 1px solid transparent;
+    position: relative;
+    overflow: hidden;
+
+    .actions-container {
+      width: 100%;
+      height: 5rem;
+      padding: 1.25rem;
+      border-radius: 0 0 0.3125rem 0.3125rem;
+      background: #101e47;
+      display: flex;
+      flex-direction: row;
+      gap: 1.25rem;
+      align-items: center;
+
+      .validate {
+        color: #fff;
+        text-align: center;
+        font-size: 1rem;
+        font-style: normal;
+        font-weight: 600;
+        line-height: 1.25rem;
+        width: 8.75rem;
+        padding: 0.625rem 2.25rem;
+        background-color: rgba(240, 248, 255, 0);
+        border-radius: 0.3125rem;
+        border: 0.0625rem solid #4d75d8;
+        cursor: pointer;
+
+        &:disabled {
+          color: #babdcc;
+          border-color: #a2a5b6;
+        }
+      }
+
+      .beautify {
+        color: #fff;
+        text-align: center;
+        font-size: 1rem;
+        font-style: normal;
+        font-weight: 600;
+        line-height: 1.25rem;
+        width: 8.75rem;
+        padding: 0.625rem 2.25rem;
+        background-color: rgba(240, 248, 255, 0);
+        border-radius: 0.3125rem;
+        border: 1px solid #babdcc;
+        cursor: pointer;
+
+        &:disabled {
+          color: #a2a5b6;
+          border-color: #a2a5b6;
+        }
+      }
+    }
+
+    textarea {
+      width: 100%;
+      padding: 1.25rem;
+      font-size: 0.875rem;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 1.25rem;
+      color: white;
+      height: 25rem;
+      background-color: #142452;
+      border: none;
+      resize: none;
+
+      &:focus,
+      &:focus-within,
+      &:focus-visible &:active {
+        outline: none;
+        border: none;
+      }
+
+      &::-webkit-scrollbar {
+        width: 0.5rem;
+      }
+
+      &::-webkit-scrollbar-track {
+        background-color: #828699;
+        border: none;
+        border-color: transparent;
+        border-top-left-radius: 0;
+      }
+
+      &::-webkit-scrollbar-thumb {
+        background-color: #d8dae5;
+        border: none;
+        border-color: transparent;
+        border-radius: 0;
+      }
+    }
+
+    &.invalid {
+      outline: 1px solid #ce2828 !important;
+    }
+  }
+
+  .error-message {
+    color: #ce2828;
+    font-size: 0.75rem;
+    line-height: 1.25rem;
+    margin-top: 0.625rem;
+  }
+
+  &.disabled {
+    .json-editor {
+      textarea {
+        background-color: white;
+        color: #12131a;
+      }
+    }
+  }
+}

package/src/components/LivePreview/LivePreview.module.scss

@@ -0,0 +1,181 @@
+.livePreviewContainer {
+  .titleContainer {
+    margin-top: 1.875rem;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-wrap: wrap;
+    max-width: 100%;
+    gap: 1.25rem;
+
+    p.apiName {
+      font-size: 40px;
+      line-height: 30px;
+      font-weight: 500;
+      word-wrap: break-word;
+      overflow-wrap: break-word;
+      word-break: break-all;
+    }
+
+    .livePreviewChip {
+      background-color: #ebecf2;
+      color: #12131a;
+    }
+  }
+
+  .description_preview {
+    word-break: break-all;
+  }
+}
+
+.requestAccordion,
+.responseAccordion {
+  background-color: #f4c5c5;
+  border: 1px solid #da3f3f;
+  border-radius: 0.3125rem !important;
+  box-shadow: none !important;
+  margin-bottom: 0 !important;
+  cursor: default !important;
+  margin-top: 0.625rem;
+
+  :global(.accordion-header) {
+    background-color: #f4c5c5;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin: 0 !important;
+    padding: 0 !important;
+    height: 4.0625rem !important;
+    border-radius: 0.3125rem !important;
+  }
+
+  :global(.accordion-details.expanded) {
+    border-top: 1px solid #000 !important;
+    padding: 1.25rem !important;
+    padding: 0 !important;
+
+    background-color: #f4c5c5;
+    :global(.jsonField) {
+      div {
+        textarea {
+          border-top-right-radius: 0;
+          border-top-left-radius: 0;
+          height: 10rem;
+        }
+      }
+    }
+  }
+
+  :global(.accordion-details.expanded .textArea .containerTextArea) {
+    display: flex;
+  }
+
+  :global(.accordion-details.expanded .textArea .containerTextArea .inputField) {
+    height: 100%;
+    padding: 1.25rem;
+  }
+
+  .accordionContent {
+    max-width: 100%;
+    padding-left: 0.625rem;
+    padding-right: 0.625rem;
+    padding-top: 0.9375rem;
+
+    ol {
+      padding-left: 1.7rem;
+      li {
+        max-width: 100%;
+        // white-space: normal;
+        word-break: break-all;
+        // overflow-wrap: break-word;
+      }
+    }
+  }
+
+  .requestAccordionSummary,
+  .responseAccordionSummary {
+    width: 100%;
+    cursor: pointer;
+    display: flex;
+    justify-content: space-between;
+    font-weight: 700;
+    font-size: 1.125rem;
+    line-height: 1.5rem;
+    display: flex;
+    align-items: center;
+    // cursor: default !important;
+    margin-inline: 0.625rem 1.25rem;
+  }
+
+  .responseAccordionSummary_title,
+  .requestAccordionSummary_title,
+  .responseAccordionSummary {
+    display: flex;
+    align-items: center;
+
+    svg {
+      transition: rotate 0.2s ease-in-out;
+    }
+
+    .expanded {
+      rotate: 180deg;
+    }
+  }
+
+  :global(.accordion-details) {
+    :global(.textArea .inputField) {
+      padding: 0;
+      border: none;
+    }
+  }
+
+  :global(.accordion-header .iconContainer .dropdownIcon) {
+    display: none !important;
+  }
+
+  :global(.accordion-header) {
+    cursor: default;
+  }
+}
+
+.responseAccordion {
+  .responseAccordionSummary {
+    display: flex;
+    align-items: center;
+
+    :global(.multiSelectGroup .optionsList) {
+      width: 8rem !important;
+      min-width: 8rem !important;
+    }
+
+    :global(.multiSelectGroup) {
+      width: 8rem;
+      margin-left: auto;
+
+      :global(.selectDisplay) {
+        height: 2.0625rem !important;
+        min-height: 2.0625rem !important;
+        padding: 0;
+        padding-left: 0.625rem;
+      }
+    }
+  }
+
+  :global(.accordion-header) {
+    overflow: visible;
+    cursor: default;
+  }
+
+  .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%;
+    }
+  }
+}

package/src/components/LivePreview/LivePreview.tsx

@@ -0,0 +1,224 @@
+import React, { useEffect, useState } from 'react'
+import styles from './LivePreview.module.scss'
+import SimpleLabelValue from '../../components/SimpleLabelValue'
+import MethodsAccordion from '../../components/MethodAccordion/MethodAccordion'
+import { TransformedOpenApi } from '../../types/transformedOpenApi'
+import { useFormikContext } from 'formik'
+import { methodColorMapping, tagsTableHeaders } from '../../constants/index'
+import TagsTable from '../table/tags-table'
+import { Accordion, Button, Chip } from 'digitinary-ui'
+import Tooltip from '../../components/Tooltip/Tooltip'
+import SVGLoader from '../../components/SVGLoader/SVGLoader'
+import { DownArrowIcon } from '../../assets/icons'
+
+interface LivePreviewProps {
+  transformedData?: TransformedOpenApi
+  openApiErrors?: any[]
+}
+
+const LivePreview: React.FC<LivePreviewProps> = ({ transformedData, openApiErrors }) => {
+  const [tableRecords, setTableRecords] = useState()
+  const [tooltipRefs, setTooltipRefs] = useState<{ [key: number]: any }>({})
+  const [tableData, setTableData] = useState([])
+  const [externalTooltipRefs, setExternalTooltipRefs] = useState<{ [key: number]: any }>({})
+  const [errorExpanded, setErrorExpanded] = useState(openApiErrors.length > 0)
+  const { values } = useFormikContext<TransformedOpenApi>()
+  const { info, components, tags } = values
+  const { securitySchemes } = components
+  const securityKey =
+    securitySchemes && typeof securitySchemes == 'object' && Object.keys(securitySchemes).length
+      ? Object.keys(securitySchemes)[0]
+      : null
+
+  useEffect(() => {
+    if (values.tags) {
+      setTableRecords(generateTableData(values.tags, true))
+      setTableData(values.tags)
+    }
+  }, [values.tags])
+
+  const generateTableData = (items, readOnly) => {
+    return items.map((item, index) => ({
+      id: index,
+      tagName: item.name,
+      description: (
+        <Tooltip
+          key={`${index}-description`}
+          allowHTML
+          disabled={item.description?.length <= 12}
+          content={<div style={{ padding: '0.625rem' }}>{item.description}</div>}
+          arrowWithBorder
+          placement="bottom-end"
+          type="function"
+          delay={[0, 0]}
+        >
+          <div className={styles.paramDescContainer}>
+            <p className={styles.editDescBtn}>
+              {item.description ? item.description.substring(0, 12) : '-'}
+              {item.description && item.description.length > 12 ? '...' : ''}
+            </p>
+          </div>
+        </Tooltip>
+      ),
+      externalDocs: (
+        <div className={styles.paramDescContainer}>
+          {item.externalDocs && item.externalDocs.url && item.externalDocs.url != '-' ? (
+            <a
+              className={styles.editDescBtn}
+              href={
+                item.externalDocs?.url && item.externalDocs?.url.indexOf('http') > -1
+                  ? item.externalDocs?.url
+                  : `https://${item.externalDocs?.url}`
+              }
+              rel="noopener noreferrer"
+              target="_blank"
+            >
+              {item?.externalDocs?.url && !item?.externalDocs?.description
+                ? item?.externalDocs?.url
+                : null}
+              {item?.externalDocs?.description
+                ? item?.externalDocs?.description?.substring(0, 12)
+                : !item?.externalDocs?.url
+                ? '-'
+                : null}
+              {item?.externalDocs?.description && item?.externalDocs?.description?.length > 12
+                ? '...'
+                : ''}
+            </a>
+          ) : (
+            <Button className={styles.editDescBtn} variant="link" color="action">
+              {item.externalDocs?.description
+                ? item.externalDocs?.description.substring(0, 12)
+                : '-'}
+              {item.externalDocs?.description && item.externalDocs?.description.length > 12
+                ? '...'
+                : ''}
+            </Button>
+          )}
+
+          {/* </Tooltip> */}
+
+          {!readOnly && <div className={styles.paramDescContainer_separator}></div>}
+
+          {!readOnly && (
+            <Button
+              className={styles.deleteParamBtn}
+              variant="link"
+              color="error"
+              onClick={() => null}
+            ></Button>
+          )}
+        </div>
+      ),
+    }))
+  }
+
+  const securityScheme = !!securityKey
+    ? securitySchemes[securityKey].scheme || securitySchemes[securityKey].type
+    : '-'
+
+  return (
+    <div className={styles.livePreviewContainer}>
+      {!!openApiErrors && openApiErrors.length > 0 && (
+        <div className="row">
+          <div className="col-md-12">
+            <Accordion
+              expanded={errorExpanded}
+              onChange={() => null}
+              className={styles.responseAccordion}
+              summary={
+                <span
+                  className={styles.responseAccordionSummary}
+                  onClick={() => setErrorExpanded((prev) => !errorExpanded)}
+                >
+                  <div className={styles.responseAccordionSummary_title}>Errors</div>
+                  <SVGLoader
+                    className={errorExpanded ? styles.expanded : ''}
+                    src={DownArrowIcon}
+                    width="2rem"
+                    height="2rem"
+                  />
+                </span>
+              }
+              children={
+                <div className={styles.accordionContent}>
+                  <span>
+                    Failed to update the OpenAPI documentation. Please resolve the following issues:
+                  </span>
+                  <br />
+                  <ol>
+                    {openApiErrors.map((errItem) => (
+                      <li key={errItem}>{errItem}</li>
+                    ))}
+                  </ol>
+                </div>
+              }
+            />
+          </div>
+        </div>
+      )}
+      <div className="row">
+        <div className="col-md-12">
+          <div className={styles.titleContainer}>
+            <p className={styles.apiName}>{info?.title?.trim() || '-'}</p>
+            <Chip className={styles.livePreviewChip}>Live Preview</Chip>
+          </div>
+          <SimpleLabelValue key={'version'} label={'Version: '} value={info?.version || '-'} />
+          <SimpleLabelValue
+            key={'description'}
+            label={'Description: '}
+            className={styles.description_preview}
+            value={info?.description?.trim() || '-'}
+          />
+
+          <SimpleLabelValue key={'tags'} label={'Tags: '} />
+          <TagsTable
+            id="tags-table"
+            data={tableRecords}
+            headCells={tagsTableHeaders}
+            isFormOpen={false}
+            setIsFormOpen={() => null}
+            saveNewRow={() => null}
+            readOnly={true}
+          />
+
+          <SimpleLabelValue key={'endpoints'} label={'Endpoints '} />
+          {Object.entries(
+            values.paths
+              .flatMap((path) =>
+                path.methods.map((method) => ({
+                  ...method,
+                  path: path.path,
+                  tags: method.tags?.length ? method.tags : ['default'],
+                }))
+              )
+              .reduce((acc, method) => {
+                method.tags.forEach((tag) => {
+                  if (!acc[tag]) acc[tag] = []
+                  acc[tag].push(method)
+                })
+                return acc
+              }, {} as Record<string, any[]>)
+          ).map(([tag, methods]) => (
+            <div className={styles.methodsContainer} key={tag}>
+              <h3>{tag}</h3>
+              {methods
+                .sort((a, b) => methodColorMapping[a.type].order - methodColorMapping[b.type].order)
+                .map((method) => (
+                  <MethodsAccordion
+                    key={`${method.path}_${method.type}`}
+                    readOnly
+                    method={method}
+                    path={method.path}
+                    tags={values.tags}
+                  />
+                ))}
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default LivePreview