@digi-frontend/dgate-api-documentation 1.0.25 → 1.0.27

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

@@ -1,10 +1,12 @@
 import { TransformedMethod } from '../../types/layout.type';
 import { Tags } from '@entities/openApi';
-declare const MethodsAccordion: ({ method, path, setFieldValue, readOnly, tags, }: {
+declare const MethodsAccordion: ({ method, path, setFieldValue, readOnly, tags, isOpen, setIsOpen, }: {
     method: TransformedMethod;
     path: string;
     setFieldValue?: (key: string, value: string | string[]) => void;
     readOnly?: boolean;
     tags: Tags[];
+    isOpen: boolean;
+    setIsOpen: (open: boolean) => void;
 }) => import("react/jsx-runtime").JSX.Element;
 export default MethodsAccordion;

package/dist/types/constants/regex.d.ts

@@ -2,5 +2,6 @@ declare const regex: {
     basic: RegExp;
     restrictNone: RegExp;
     ASCII: RegExp;
+    urlRegex: RegExp;
 };
 export default regex;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@digi-frontend/dgate-api-documentation",
-  "version": "1.0.25",
+  "version": "1.0.27",
   "main": "dist/src/index.js",
   "module": "dist/src/index.js",
   "types": "dist/types/index.d.ts",

package/src/components/InfoForm/InfoForm.module.scss

@@ -28,7 +28,7 @@
             display: flex;
             align-items: center;
             padding: 0;
-            color: #12131a;
+            font-size: 0.875rem;
 
             :global(.endBtnIcon) {
               margin-block: auto;
@@ -44,6 +44,7 @@
 
         &.deleteParamBtn {
           padding: 0;
+          border-width: 0 !important;
 
           :global(.btnContentWrapper) {
             :global(.endBtnIcon) {
@@ -71,6 +72,28 @@
       }
     }
 
+    .externalDocsLink {
+      font-size: 0.875rem;
+      line-height: 1.25rem;
+      cursor: pointer;
+      align-self: center;
+      margin-right: 2rem;
+    }
+
+    .editExternalDocs {
+      display: flex;
+      align-items: center;
+      padding-right: 0.625rem;
+
+      svg {
+        cursor: pointer;
+
+        path {
+          fill: #12131a;
+        }
+      }
+    }
+
     .editDescTooltipContent {
       display: flex;
       flex-direction: column;

package/src/components/InfoForm/InfoForm.tsx

@@ -44,7 +44,6 @@ const InfoForm = ({ readOnly }: { readOnly?: boolean }) => {
 
   useEffect(() => {
     if (values.tags && values.tags.length) {
-      setTableRecords(generateTableRecords(values.tags))
       setTableData(values.tags)
     }
   }, [values.tags])
@@ -133,10 +132,14 @@ const InfoForm = ({ readOnly }: { readOnly?: boolean }) => {
               <div className={styles.editDescTooltipContent}>
                 <p className={styles.editDescTooltipContent_header}>Description</p>
                 <TextArea
-                  placeholder="Describe parameter..."
+                  placeholder="Describe tag..."
                   value={item.description}
                   disabled={readOnly}
-                  onChange={(value) => onTableChange('description', value, index)}
+                  onChange={(value) => {
+                    if (value === '' || regex.ASCII.test(value))
+                      onTableChange('description', value, index)
+                  }}
+                  maxLength={25}
                 />
                 {!readOnly && (
                   <Button
@@ -144,9 +147,10 @@ const InfoForm = ({ readOnly }: { readOnly?: boolean }) => {
                     variant="outlined"
                     size="small"
                     onClick={() => {
-                      setFieldValue(`tags[${index}].description`, item.description)
+                      setFieldValue(`tags[${index}].description`, item.description?.trim())
                       tooltipRefs[index]?.hide()
                     }}
+                    disabled={!item.description?.trim()}
                   >
                     Apply
                   </Button>
@@ -178,6 +182,27 @@ const InfoForm = ({ readOnly }: { readOnly?: boolean }) => {
       ),
       externalDocs: (
         <div className={styles.paramDescContainer}>
+          {values.tags[index].externalDocs?.description && values.tags[index].externalDocs?.url && (
+            <a
+              className={styles.externalDocsLink}
+              href={values.tags[index].externalDocs?.url}
+              target="_blank"
+              style={
+                !values.tags[index].externalDocs?.description
+                  ? { textDecoration: 'none', pointerEvents: 'none' }
+                  : {}
+              }
+            >
+              {values.tags[index].externalDocs?.description
+                ? values.tags[index].externalDocs?.description?.substring(0, 12)
+                : readOnly && '-'}
+              {values.tags[index].externalDocs?.description &&
+              values.tags[index].externalDocs?.description?.length > 12
+                ? '...'
+                : ''}
+            </a>
+          )}
+
           <Tooltip
             arrowWithBorder
             placement="bottom-end"
@@ -197,13 +222,16 @@ const InfoForm = ({ readOnly }: { readOnly?: boolean }) => {
                   placeholder="Describe External Doc..."
                   value={item.externalDocs?.description}
                   disabled={readOnly}
+                  maxLength={25}
                   onChange={(value) => {
-                    onTableChange(
-                      'externalDocs',
-                      { ...item.externalDocs, description: value },
-                      index
-                    )
-                    setDescription(value)
+                    if (value === '' || regex.ASCII.test(value)) {
+                      onTableChange(
+                        'externalDocs',
+                        { ...item.externalDocs, description: value },
+                        index
+                      )
+                      setDescription(value)
+                    }
                   }}
                 />
                 <p className={styles.editDescTooltipContent_header}>External Docs Link</p>
@@ -211,9 +239,12 @@ const InfoForm = ({ readOnly }: { readOnly?: boolean }) => {
                   placeholder="External Docs Link..."
                   value={item.externalDocs?.url}
                   disabled={readOnly}
+                  maxLength={200}
                   onChange={(value) => {
-                    onTableChange('externalDocs', { ...item.externalDocs, url: value }, index)
-                    setURL(value)
+                    if (value === '' || regex.ASCII.test(value)) {
+                      onTableChange('externalDocs', { ...item.externalDocs, url: value }, index)
+                      setURL(value)
+                    }
                   }}
                 />
                 {!readOnly && (
@@ -223,13 +254,22 @@ const InfoForm = ({ readOnly }: { readOnly?: boolean }) => {
                     size="small"
                     onClick={() => {
                       setFieldValue(`tags[${index}].externalDocs`, {
-                        description: description,
-                        url: url,
+                        description: description?.trim(),
+                        url: url?.trim(),
                       })
                       setDescription('')
                       setURL('')
                       externalTooltipRefs[index]?.hide()
                     }}
+                    disabled={
+                      !(
+                        (values.tags[index].externalDocs?.description &&
+                          values.tags[index].externalDocs?.url &&
+                          !description?.trim() &&
+                          !url?.trim()) ||
+                        (description?.trim() && url?.trim() && regex.urlRegex.test(url))
+                      )
+                    }
                   >
                     Apply
                   </Button>
@@ -238,24 +278,18 @@ const InfoForm = ({ readOnly }: { readOnly?: boolean }) => {
             }
           >
             {readOnly || values.tags[index].externalDocs?.description ? (
-              <Button
-                className={styles.editDescBtn}
-                variant="link"
-                color="action"
-                endIcon={<SVGLoader src={EditIcon} width="1.5rem" height="1.5rem" />}
-                onClick={() => {
-                  setDescription(item.externalDocs?.description)
-                  setURL(item.externalDocs?.url)
-                }}
-              >
-                {values.tags[index].externalDocs?.description
-                  ? values.tags[index].externalDocs?.description?.substring(0, 12)
-                  : '-'}
-                {values.tags[index].externalDocs?.description &&
-                values.tags[index].externalDocs?.description?.length > 12
-                  ? '...'
-                  : ''}
-              </Button>
+              <div className={styles.editExternalDocs}>
+                <SVGLoader
+                  src={EditIcon}
+                  width="1.5rem"
+                  height="1.5rem"
+                  onClick={(e) => {
+                    e?.stopPropagation()
+                    setDescription(item.externalDocs?.description)
+                    setURL(item.externalDocs?.url)
+                  }}
+                />
+              </div>
             ) : (
               <Button
                 className={styles.editDescBtn}
@@ -268,7 +302,9 @@ const InfoForm = ({ readOnly }: { readOnly?: boolean }) => {
                 }}
               >
                 {readOnly ||
-                (item.externalDocs && (item.externalDocs?.url || item.externalDocs?.description))
+                (values.tags[index]?.externalDocs &&
+                  (values.tags[index]?.externalDocs?.url ||
+                    values.tags[index].externalDocs?.description))
                   ? 'View '
                   : 'Add '}{' '}
                 External Docs Link
@@ -300,7 +336,7 @@ const InfoForm = ({ readOnly }: { readOnly?: boolean }) => {
         label="API Name"
         required
         value={values?.info?.title}
-        maxLength={25}
+        maxLength={35}
         onChange={(value) => {
           setFieldValue('info.title', value)
         }}
@@ -335,7 +371,7 @@ const InfoForm = ({ readOnly }: { readOnly?: boolean }) => {
         onClear={() => {
           setFieldValue('info.description', '')
         }}
-        errorMessage={errors?.info?.description}
+        errorMsg={errors?.info?.description}
       />
       <div className={styles.paramsTable}>
         <TagsTable

package/src/components/JsonInput/JsonInput.tsx

@@ -1,6 +1,7 @@
 import React, { useEffect, useState } from 'react'
 import yaml from 'js-yaml'
 import styles from './style.module.scss'
+import regex from '../../constants/regex'
 
 const errorMapping = {
   BOTH: 'Invalid JSON or YAML format',
@@ -93,15 +94,19 @@ const JsonInput = ({
           value={value}
           onChange={(e) => {
             if (fieldIsDisabled) return
-            setIsValid(undefined)
-            setDisabledBeautify(true)
-            onChange(e.target.value)
+            if (regex.ASCII.test(e.target.value)) {
+              setIsValid(undefined)
+              setDisabledBeautify(true)
+              onChange(e.target.value)
+            }
           }}
           onPaste={(e) => {
             if (fieldIsDisabled) return
-            setIsValid(undefined)
-            setDisabledBeautify(true)
-            onChange(e.target.value)
+            if (regex.ASCII.test(e.target.value)) {
+              setIsValid(undefined)
+              setDisabledBeautify(true)
+              onChange(e.target.value)
+            }
           }}
           min="1"
           placeholder={placeholder}

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

@@ -1,5 +1,24 @@
-p.apiName {
-    font-size: 40px;
-    line-height: 30px;
-    font-weight: 500;
-}
+.livePreviewContainer {
+  .titleContainer {
+    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;
+    }
+  }
+}

package/src/components/LivePreview/LivePreview.tsx

@@ -6,7 +6,7 @@ import { TransformedOpenApi } from '../../types/transformedOpenApi'
 import { useFormikContext } from 'formik'
 import { methodColorMapping, tagsTableHeaders } from '../../constants/index'
 import TagsTable from '../table/tags-table'
-import { Button } from 'digitinary-ui'
+import { Button, Chip } from 'digitinary-ui'
 import Tooltip from '../../components/Tooltip/Tooltip'
 
 interface LivePreviewProps {
@@ -105,10 +105,13 @@ const LivePreview: React.FC<LivePreviewProps> = ({ transformedData }) => {
   }
 
   return (
-    <div>
+    <div className={styles.livePreviewContainer}>
       <div className="row">
         <div className="col-md-12">
-          <p className={styles.apiName}>{info?.title}</p>
+          <div className={styles.titleContainer}>
+            <p className={styles.apiName}>{info?.title?.trim() || '-'}</p>
+            <Chip className={styles.livePreviewChip}>Live Preview</Chip>
+          </div>
           <SimpleLabelValue
             key={'APIAuthenticationType'}
             label={'API authentication type: '}
@@ -122,7 +125,7 @@ const LivePreview: React.FC<LivePreviewProps> = ({ transformedData }) => {
           <SimpleLabelValue
             key={'description'}
             label={'Description: '}
-            value={info?.description || '-'}
+            value={info?.description?.trim() || '-'}
           />
 
           <SimpleLabelValue key={'tags'} label={'Tags: '} />

package/src/components/MethodAccordion/MethodAccordion.tsx

@@ -12,6 +12,7 @@ import CommonDialog from '../../components/dialog'
 import JsonInput from '../../components/JsonInput/JsonInput'
 import styles from './MethodAccordion.module.scss'
 import { Tags } from '@entities/openApi'
+import regex from '../../constants/regex'
 
 const httpStatusCodeOptions = httpStatusCodes.map((code) => ({
   label: (
@@ -32,12 +33,16 @@ const MethodsAccordion = ({
   setFieldValue,
   readOnly,
   tags,
+  isOpen,
+  setIsOpen,
 }: {
   method: TransformedMethod
   path: string
   setFieldValue?: (key: string, value: string | string[]) => void
   readOnly?: boolean
   tags: Tags[]
+  isOpen: boolean
+  setIsOpen: (open: boolean) => void
 }) => {
   const [isExpanded, setIsExpanded] = useState({
     request: false,
@@ -115,70 +120,80 @@ const MethodsAccordion = ({
               <p style={{ alignSelf: 'center' }}>
                 {method.parameters[index].description
                   ? method.parameters[index].description.substring(0, 12)
-                  : '-'}
+                  : readOnly && '-'}
                 {method.parameters[index].description &&
                 method.parameters[index].description.length > 12
                   ? '...'
                   : ''}
               </p>
             </Tooltip>
-            <Tooltip
-              key={`${index}-add-edit-description`}
-              allowHTML
-              arrowWithBorder
-              placement="bottom-end"
-              type="function"
-              trigger="click"
-              delay={[0, 0]}
-              onCreate={(instance) =>
-                setTooltipRefs((prev) => ({
-                  ...prev,
-                  [index]: instance,
-                }))
-              }
-              content={
-                <div className={styles.editDescTooltipContent}>
-                  <p className={styles.editDescTooltipContent_header}>Description</p>
-                  <TextArea
-                    placeholder="Describe parameter..."
-                    value={item.description}
-                    disabled={readOnly}
-                    onChange={(value) => onTableChange('description', value, index)}
-                  />
-                  {!readOnly && (
-                    <Button
-                      className={styles.editDescTooltipContent_btn}
-                      variant="outlined"
-                      size="small"
-                      onClick={() => {
-                        setFieldValue(`parameters[${index}].description`, item.description)
-                        tooltipRefs[index]?.hide()
+            {!readOnly && (
+              <Tooltip
+                key={`${index}-add-edit-description`}
+                allowHTML
+                arrowWithBorder
+                placement="bottom-end"
+                type="function"
+                trigger="click"
+                delay={[0, 0]}
+                onCreate={(instance) =>
+                  setTooltipRefs((prev) => ({
+                    ...prev,
+                    [index]: instance,
+                  }))
+                }
+                content={
+                  <div className={styles.editDescTooltipContent}>
+                    <p className={styles.editDescTooltipContent_header}>Description</p>
+                    <TextArea
+                      placeholder="Describe parameter..."
+                      value={item.description}
+                      disabled={readOnly}
+                      maxLength={120}
+                      onChange={(value) => {
+                        if (value === '' || regex.ASCII.test(value))
+                          onTableChange('description', value, index)
                       }}
-                    >
-                      Apply
-                    </Button>
-                  )}
-                </div>
-              }
-            >
-              {readOnly || method.parameters[index].description?.length > 0 ? (
-                <Button
-                  className={styles.editDescBtn}
-                  variant="link"
-                  color="action"
-                  endIcon={<SVGLoader src={EditIcon} width="1.5rem" height="1.5rem" />}
-                ></Button>
-              ) : (
-                <Button
-                  className={styles.editDescBtn}
-                  variant="link"
-                  color="action"
-                  endIcon={<SVGLoader src={EditIcon} width="1.5rem" height="1.5rem" />}
-                >
-                  {readOnly ? 'View ' : 'Add '} Description
-                </Button>
-              )}
-            </Tooltip>
+                    />
+                    {!readOnly && (
+                      <Button
+                        className={styles.editDescTooltipContent_btn}
+                        variant="outlined"
+                        size="small"
+                        onClick={() => {
+                          setFieldValue(
+                            `parameters[${index}].description`,
+                            item.description?.trim()
+                          )
+                          tooltipRefs[index]?.hide()
+                        }}
+                        disabled={!item.description?.trim()}
+                      >
+                        Apply
+                      </Button>
+                    )}
+                  </div>
+                }
+              >
+                {readOnly || method.parameters[index].description?.length > 0 ? (
+                  <Button
+                    className={styles.editDescBtn}
+                    variant="link"
+                    color="action"
+                    endIcon={<SVGLoader src={EditIcon} width="1.5rem" height="1.5rem" />}
+                  ></Button>
+                ) : (
+                  <Button
+                    className={styles.editDescBtn}
+                    variant="link"
+                    color="action"
+                    endIcon={<SVGLoader src={EditIcon} width="1.5rem" height="1.5rem" />}
+                  >
+                    {readOnly ? 'View ' : 'Add '} Description
+                  </Button>
+                )}
+              </Tooltip>
+            )}
 
             {!readOnly && <div className={styles.paramDescContainer_separator}></div>}
 
@@ -233,7 +248,7 @@ const MethodsAccordion = ({
 
   useEffect(() => {
     // prepare tags selection list
-    if (method?.tags.length || tags.length) {
+    if (method?.tags.length || tags?.length) {
       const convertedStringArray = (method?.tags || [])?.map((item) => ({
         label: capitalize(item),
         value: item,
@@ -254,8 +269,8 @@ const MethodsAccordion = ({
   return (
     <div>
       <Accordion
-        expanded={isExpanded.method}
-        onChange={() => setIsExpanded((prev) => ({ ...prev, method: !prev.method }))}
+        expanded={isOpen}
+        onChange={() => setIsOpen(!isOpen)}
         className={`${styles.methodAccordion} ${readOnly ? styles.readOnly : ''}`}
         summary={
           <div className={styles.methodSummaryContainer}>
@@ -271,9 +286,7 @@ const MethodsAccordion = ({
               <span className={styles.methodPath}>{path}</span>
             </div>
             <div
-              className={`${styles.methodExpandArrowContainer} ${
-                isExpanded.method ? styles.expanded : ''
-              }`}
+              className={`${styles.methodExpandArrowContainer} ${isOpen ? styles.expanded : ''}`}
             >
               <SVGLoader src={DownArrowIcon} width="2rem" height="2rem" />
             </div>
@@ -310,8 +323,11 @@ const MethodsAccordion = ({
                 className={styles.methodDesc}
                 label="Description"
                 placeholder="Describe the method's purpose and functionality..."
+                maxLength={120}
                 value={method?.description}
-                onChange={(value) => setFieldValue('description', value)}
+                onChange={(value) => {
+                  if (value === '' || regex.ASCII.test(value)) setFieldValue('description', value)
+                }}
               />
             ) : (
               <SimpleLabelValue

package/src/components/Tooltip/Tooltip.scss

@@ -1,7 +1,9 @@
 .tooltip-custom-wrapper {
   display: flex;
 }
-
+[data-tippy-root] {
+  z-index: 2 !important;
+}
 .tippy-box {
   background-color: #202f5b;
   font-size: 0.875rem;
@@ -12,16 +14,17 @@
   word-break: break-word;
   position: relative;
   border: 1px solid #d8dae5;
+  z-index: 2;
 
   &.function {
     .tippy-content {
       background-color: #fff !important;
       color: #000 !important;
     }
-  }
 
-  &[data-placement] > .tippy-arrow:before {
-    color: #fff !important;
+    &[data-placement] > .tippy-arrow:before {
+      color: #fff !important;
+    }
   }
 
   &.info {
@@ -109,7 +112,7 @@
       .tippy-arrow {
         top: 1px;
         background-color: white;
-        z-index: 9999;
+        z-index: 2;
         height: 1px;
 
         &:before {
@@ -120,7 +123,7 @@
           border: none;
           border-left: 1px solid #d8dae5 !important;
           border-top: 1px solid #d8dae5 !important;
-          z-index: 20000000000;
+          z-index: 2;
           top: -0.45rem;
           transform-origin: center !important;
         }

package/src/components/table/style.scss

@@ -29,7 +29,7 @@
       .tableHead {
         border: 1px solid var(--Gray-10);
         margin: 0rem !important;
-        background-color: var(--background-color-header);
+        background-color: #f8f9fb;
         width: max-content;
         min-width: 100%;
         color: var(--Gray-50);