@digi-frontend/dgate-api-documentation 1.0.21 → 1.0.26

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/components/Tooltip/Tooltip.d.ts

@@ -1,8 +1,8 @@
 import React, { ReactNode } from 'react';
+import { TippyProps } from '@tippyjs/react';
 import 'tippy.js/dist/tippy.css';
 import './Tooltip.scss';
-interface TooltipProps {
-    children: ReactNode;
+interface TooltipProps extends TippyProps {
     content: ReactNode;
     success?: boolean;
     onMouseEnter?: (event: React.MouseEvent<HTMLDivElement>) => void;

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

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

package/dist/types/validator/form.scheme.d.ts

@@ -1,4 +1,4 @@
-import * as yup from "yup";
+import * as yup from 'yup';
 export declare const schemaValidation: yup.ObjectSchema<{
     openapi: string;
     info: {

package/package.json

@@ -1,6 +1,6 @@
 {
- "name": "@digi-frontend/dgate-api-documentation",
-  "version": "1.0.21",
+  "name": "@digi-frontend/dgate-api-documentation",
+  "version": "1.0.26",
   "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])
@@ -97,6 +96,26 @@ const InfoForm = ({ readOnly }: { readOnly?: boolean }) => {
       tagName: item.name,
       description: (
         <div className={styles.paramDescContainer}>
+          <Tooltip
+            key={`${index}-description`}
+            allowHTML
+            disabled={values.tags[index].description?.length <= 12}
+            content={<div style={{ padding: '0.625rem' }}>{values.tags[index].description}</div>}
+            arrowWithBorder
+            placement="bottom-end"
+            type="function"
+            delay={[0, 0]}
+            onShow={() => tooltipRefs[index]?.hide()}
+          >
+            <p style={{ alignSelf: 'center', fontWeight: 600, fontSize: '1rem' }}>
+              {values.tags[index].description
+                ? values.tags[index].description.substring(0, 12)
+                : readOnly && '-'}
+              {values.tags[index].description && values.tags[index].description.length > 12
+                ? '...'
+                : ''}
+            </p>
+          </Tooltip>
           <Tooltip
             arrowWithBorder
             placement="bottom-end"
@@ -113,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
@@ -124,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>
@@ -140,14 +164,7 @@ const InfoForm = ({ readOnly }: { readOnly?: boolean }) => {
                 variant="link"
                 color="action"
                 endIcon={<SVGLoader src={EditIcon} width="1.5rem" height="1.5rem" />}
-              >
-                {values.tags[index].description
-                  ? values.tags[index].description.substring(0, 12)
-                  : '-'}
-                {values.tags[index].description && values.tags[index].description.length > 12
-                  ? '...'
-                  : ''}
-              </Button>
+              ></Button>
             ) : (
               <Button
                 className={styles.editDescBtn}
@@ -165,6 +182,24 @@ const InfoForm = ({ readOnly }: { readOnly?: boolean }) => {
       ),
       externalDocs: (
         <div className={styles.paramDescContainer}>
+          <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)
+              : '-'}
+            {values.tags[index].externalDocs?.description &&
+            values.tags[index].externalDocs?.description?.length > 12
+              ? '...'
+              : ''}
+          </a>
           <Tooltip
             arrowWithBorder
             placement="bottom-end"
@@ -184,13 +219,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>
@@ -198,9 +236,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 && (
@@ -210,13 +251,14 @@ 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={!description?.trim() || !url?.trim() || !regex.urlRegex.test(url)}
                   >
                     Apply
                   </Button>
@@ -225,24 +267,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}
@@ -287,7 +323,7 @@ const InfoForm = ({ readOnly }: { readOnly?: boolean }) => {
         label="API Name"
         required
         value={values?.info?.title}
-        maxLength={25}
+        maxLength={35}
         onChange={(value) => {
           setFieldValue('info.title', value)
         }}
@@ -295,7 +331,7 @@ const InfoForm = ({ readOnly }: { readOnly?: boolean }) => {
           setFieldValue('info.title', '')
         }}
         errorMsg={errors?.info?.title}
-        restrictedCharsRegex={regex.basic}
+        restrictedCharactersRegex={regex.basic}
       />
       <div className={styles.apiDocRow}>
         <Input
@@ -313,14 +349,16 @@ const InfoForm = ({ readOnly }: { readOnly?: boolean }) => {
         label="Description"
         value={values?.info?.description}
         maxLength={120}
+        required
         onChange={(value: string) => {
-          setFieldValue('info.description', value)
+          if (value === '' || regex.ASCII.test(value)) {
+            setFieldValue('info.description', value)
+          }
         }}
         onClear={() => {
           setFieldValue('info.description', '')
         }}
         errorMessage={errors?.info?.description}
-        restrictedCharsRegex={regex.restrictNone}
       />
       <div className={styles.paramsTable}>
         <TagsTable
@@ -346,17 +384,21 @@ const InfoForm = ({ readOnly }: { readOnly?: boolean }) => {
             className="delete-msg-container"
           >
             Are you sure you want to delete
-            <span className="plan-name">{` Tag ${selectedTagName} `}</span>?
+            <span className="plan-name">
+              {' '}
+              Tag <strong>{selectedTagName}</strong>
+            </span>
+            ?
           </p>
         }
         onSubmit={{
           onClick: confirmDeleteTag,
-          text: 'Yes',
+          text: 'Delete',
           color: 'error',
           fullWidth: true,
         }}
         onCancel={{
-          text: 'No',
+          text: 'Cancel',
           color: 'normal',
           fullWidth: true,
         }}

package/src/components/JsonInput/JsonInput.tsx

@@ -1,6 +1,13 @@
 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',
+  JSON: 'Invalid JSON format',
+  YML: 'Invalid YAML format',
+}
 
 const JsonInput = ({
   placeholder,
@@ -87,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}
@@ -129,7 +140,7 @@ const JsonInput = ({
         )}
       </div>
       {(errorMessage || (value !== '' && isValid === false)) && (
-        <p className={styles['error-message']}>{errorMessage || 'Invalid JSON or YAML format'}</p>
+        <p className={styles['error-message']}>{errorMessage || errorMapping[acceptType]}</p>
       )}
     </div>
   )

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

@@ -1,5 +1,18 @@
-p.apiName {
-    font-size: 40px;
-    line-height: 30px;
-    font-weight: 500;
-}
+.livePreviewContainer {
+  .titleContainer {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    p.apiName {
+      font-size: 40px;
+      line-height: 30px;
+      font-weight: 500;
+    }
+
+    .livePreviewChip {
+      background-color: #ebecf2;
+      color: #12131a;
+    }
+  }
+}

package/src/components/LivePreview/LivePreview.tsx

@@ -6,7 +6,8 @@ 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 {
   transformedData?: TransformedOpenApi
@@ -37,12 +38,23 @@ const LivePreview: React.FC<LivePreviewProps> = ({ transformedData }) => {
       id: index,
       tagName: item.name,
       description: (
-        <div className={styles.paramDescContainer}>
-          <Button className={styles.editDescBtn} variant="link" color="action">
-            {item.description ? item.description.substring(0, 12) : '-'}
-            {item.description && item.description.length > 12 ? '...' : ''}
-          </Button>
-        </div>
+        <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}>
@@ -91,21 +103,29 @@ 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: '}
-            value={!!securityKey ? securitySchemes[securityKey].scheme : '-'}
+            value={
+              !!securityKey
+                ? securitySchemes[securityKey].scheme || securitySchemes[securityKey].type
+                : '-'
+            }
           />
           <SimpleLabelValue key={'version'} label={'Version: '} value={info?.version || '-'} />
           <SimpleLabelValue
             key={'description'}
             label={'Description: '}
-            value={info?.description || '-'}
+            value={info?.description?.trim() || '-'}
           />
 
           <SimpleLabelValue key={'tags'} label={'Tags: '} />
@@ -124,20 +144,22 @@ const LivePreview: React.FC<LivePreviewProps> = ({ transformedData }) => {
             <div className={styles.methodsContainer} key={path.path}>
               {Object.entries(
                 path.methods
-                .sort((a, b) => methodColorMapping[a.type].order + methodColorMapping[b.type].order)
-                .reduce((groupedMethods, method) => {
-                  // Handle methods without tags
-                  const tags = method.tags?.length ? method?.tags : ['default'];
-                  
-                  tags.forEach((tag) => {
-                    if (!groupedMethods[tag]) {
-                      groupedMethods[tag] = [];
-                    }
-                    groupedMethods[tag].push(method);
-                  });
-                  
-                  return groupedMethods;
-                }, {})
+                  .sort(
+                    (a, b) => methodColorMapping[a.type].order + methodColorMapping[b.type].order
+                  )
+                  .reduce((groupedMethods, method) => {
+                    // Handle methods without tags
+                    const tags = method.tags?.length ? method?.tags : ['default']
+
+                    tags.forEach((tag) => {
+                      if (!groupedMethods[tag]) {
+                        groupedMethods[tag] = []
+                      }
+                      groupedMethods[tag].push(method)
+                    })
+
+                    return groupedMethods
+                  }, {})
               ).map(([tag, methods]) => (
                 <div key={tag}>
                   <h3>{tag}</h3>