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

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,6 @@
 declare const regex: {
     basic: RegExp;
     restrictNone: RegExp;
+    ASCII: 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.25",
   "main": "dist/src/index.js",
   "module": "dist/src/index.js",
   "types": "dist/types/index.d.ts",

package/src/components/InfoForm/InfoForm.tsx

@@ -97,6 +97,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"
@@ -140,14 +160,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}
@@ -295,7 +308,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 +326,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 +361,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

@@ -2,6 +2,12 @@ import React, { useEffect, useState } from 'react'
 import yaml from 'js-yaml'
 import styles from './style.module.scss'
 
+const errorMapping = {
+  BOTH: 'Invalid JSON or YAML format',
+  JSON: 'Invalid JSON format',
+  YML: 'Invalid YAML format',
+}
+
 const JsonInput = ({
   placeholder,
   label,
@@ -129,7 +135,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.tsx

@@ -7,6 +7,7 @@ import { useFormikContext } from 'formik'
 import { methodColorMapping, tagsTableHeaders } from '../../constants/index'
 import TagsTable from '../table/tags-table'
 import { Button } 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,6 +103,7 @@ const LivePreview: React.FC<LivePreviewProps> = ({ transformedData }) => {
       ),
     }))
   }
+
   return (
     <div>
       <div className="row">
@@ -99,7 +112,11 @@ const LivePreview: React.FC<LivePreviewProps> = ({ transformedData }) => {
           <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
@@ -124,20 +141,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>

package/src/components/MethodAccordion/MethodAccordion.tsx

@@ -100,6 +100,31 @@ const MethodsAccordion = ({
         description: (
           <div className={styles.paramDescContainer}>
             <Tooltip
+              key={`${index}-description`}
+              allowHTML
+              disabled={method.parameters[index].description?.length <= 12}
+              content={
+                <div style={{ padding: '0.625rem' }}>{method.parameters[index].description}</div>
+              }
+              arrowWithBorder
+              placement="bottom-end"
+              type="function"
+              delay={[0, 0]}
+              onShow={() => tooltipRefs[index]?.hide()}
+            >
+              <p style={{ alignSelf: 'center' }}>
+                {method.parameters[index].description
+                  ? method.parameters[index].description.substring(0, 12)
+                  : '-'}
+                {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"
@@ -142,15 +167,7 @@ const MethodsAccordion = ({
                   variant="link"
                   color="action"
                   endIcon={<SVGLoader src={EditIcon} width="1.5rem" height="1.5rem" />}
-                >
-                  {method.parameters[index].description
-                    ? method.parameters[index].description.substring(0, 12)
-                    : '-'}
-                  {method.parameters[index].description &&
-                  method.parameters[index].description.length > 12
-                    ? '...'
-                    : ''}
-                </Button>
+                ></Button>
               ) : (
                 <Button
                   className={styles.editDescBtn}
@@ -210,14 +227,13 @@ const MethodsAccordion = ({
 
   useEffect(() => {
     if (method?.parameters) {
-      setTableRecords(generateTableData(method.parameters))
       setTableData(method.parameters)
     }
   }, [method, path])
 
   useEffect(() => {
     // prepare tags selection list
-    if (!selectionTags.length) {
+    if (method?.tags.length || tags.length) {
       const convertedStringArray = (method?.tags || [])?.map((item) => ({
         label: capitalize(item),
         value: item,
@@ -230,6 +246,7 @@ const MethodsAccordion = ({
       const filteredArray = mergedArray.filter(
         (value, index, self) => index === self.findIndex((t) => t.value === value.value)
       )
+
       setSelectionTags(filteredArray)
     }
   }, [tags, method])
@@ -343,6 +360,7 @@ const MethodsAccordion = ({
                 }
                 children={
                   <JsonInput
+                    acceptType="JSON"
                     withFooter={!readOnly}
                     className={'jsonField'}
                     placeholder="Enter your request body as a JSON object...."
@@ -399,6 +417,7 @@ const MethodsAccordion = ({
               }
               children={
                 <JsonInput
+                  acceptType="JSON"
                   withFooter={!readOnly}
                   className={'jsonField'}
                   placeholder="Enter your response as a JSON object..."
@@ -451,17 +470,20 @@ const MethodsAccordion = ({
             className="delete-msg-container"
           >
             Are you sure you want to delete
-            <span className="plan-name">{` Parameter ${selectedParamName} `}</span>?
+            <span className="plan-name">
+              Parameter <strong>{selectedParamName}</strong>
+            </span>
+            ?
           </p>
         }
         onSubmit={{
           onClick: confirmDeleteParameter,
-          text: 'Yes',
+          text: 'Delete',
           color: 'error',
           fullWidth: true,
         }}
         onCancel={{
-          text: 'No',
+          text: 'Cancel',
           color: 'normal',
           fullWidth: true,
         }}

package/src/components/Tooltip/Tooltip.scss

@@ -113,15 +113,15 @@
         height: 1px;
 
         &:before {
-          width: 1rem;
-          height: 1rem;
+          width: 0.625rem;
+          height: 0.625rem;
           background-color: white;
           transform: rotate(45deg);
           border: none;
           border-left: 1px solid #d8dae5 !important;
           border-top: 1px solid #d8dae5 !important;
           z-index: 20000000000;
-          top: -0.6rem;
+          top: -0.45rem;
           transform-origin: center !important;
         }
       }

package/src/components/Tooltip/Tooltip.tsx

@@ -1,10 +1,9 @@
 import React, { useState, useEffect, ReactNode } from 'react'
-import Tippy from '@tippyjs/react'
+import Tippy, { 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/src/components/table/table.tsx

@@ -8,6 +8,7 @@ import styles from '../MethodAccordion/MethodAccordion.module.scss'
 import { useFormik } from 'formik'
 import * as yup from 'yup'
 import { capitalize } from '../../helpers/methodAccordion.helper'
+import regex from '../../constants/regex'
 
 const ParamterTable = ({
   id,
@@ -131,6 +132,7 @@ const ParamterTable = ({
                       }} // Pass the value directly
                       value={values.name} // Bind value to the state
                       disabled={readOnly}
+                      restrictedCharactersRegex={regex.basic}
                     />
                   </div>
                 </td>
@@ -225,7 +227,7 @@ const ParamterTable = ({
                             <TextArea
                               value={text || values.description}
                               onChange={(value) => {
-                                setText(value)
+                                if (value === '' || regex.ASCII.test(value)) setText(value)
                               }}
                               disabled={readOnly}
                               placeholder="Describe parameter..."

package/src/components/table/tags-table.tsx

@@ -8,6 +8,9 @@ import { AddRow, EditIcon, DeleteIcon } from '../../assets/icons'
 import styles from '../MethodAccordion/MethodAccordion.module.scss'
 import { useFormik } from 'formik'
 import * as yup from 'yup'
+import regex from '../../constants/regex'
+
+const urlRegex = /^(https?:\/\/)?(www\.)?([a-zA-Z0-9-]+(\.[a-zA-Z]{2,})+)(\/[^\s]*)?$/
 
 const TagsTable = ({ id, headCells, data, isFormOpen, setIsFormOpen, saveNewRow, readOnly }) => {
   const [text, setText] = useState('')
@@ -28,7 +31,20 @@ const TagsTable = ({ id, headCells, data, isFormOpen, setIsFormOpen, saveNewRow,
     validationSchema: yup.object().shape({
       name: yup.string().required('Tag name is required'),
       description: yup.string().optional(),
-      externalDocs: yup.object().optional(),
+      externalDocs: yup
+        .object()
+        .shape({
+          url: yup
+            .string()
+            .matches(urlRegex, 'Invalid URL')
+            .when('description', (description, schema) => {
+              return description?.at(0)
+                ? schema.required('URL is required when description is provided')
+                : schema.optional()
+            }),
+          description: yup.string().optional(),
+        })
+        .optional(),
     }),
     onSubmit: (values) => {
       saveNewRow(values)
@@ -38,7 +54,9 @@ const TagsTable = ({ id, headCells, data, isFormOpen, setIsFormOpen, saveNewRow,
       resetForm()
       setIsFormOpen(false)
     },
+    validateOnChange: true,
   })
+
   return (
     <div className="tableSectionContainer">
       <div className="tableContainer">
@@ -107,7 +125,7 @@ const TagsTable = ({ id, headCells, data, isFormOpen, setIsFormOpen, saveNewRow,
                       size="large"
                       type="text"
                       onChange={(value) => {
-                        setFieldValue('name', value)
+                        !regex.basic.test(value) && setFieldValue('name', value)
                       }} // Pass the value directly
                       value={values.name} // Bind value to the state
                       disabled={readOnly}
@@ -131,7 +149,7 @@ const TagsTable = ({ id, headCells, data, isFormOpen, setIsFormOpen, saveNewRow,
                             <TextArea
                               value={text || values.description}
                               onChange={(value) => {
-                                setText(value)
+                                if (value === '' || regex.ASCII.test(value)) setText(value)
                               }}
                               disabled={readOnly}
                               placeholder="Describe Tag..."
@@ -184,7 +202,9 @@ const TagsTable = ({ id, headCells, data, isFormOpen, setIsFormOpen, saveNewRow,
                               placeholder="Describe External Doc..."
                               value={externalDesc || values.externalDocs.description}
                               disabled={readOnly}
-                              onChange={(value) => setExternalDesc(value)}
+                              onChange={(value) => {
+                                if (value === '' || regex.ASCII.test(value)) setExternalDesc(value)
+                              }}
                             />
                             <p className={_styles.editDescTooltipContent_header}>
                               External Docs Link
@@ -193,7 +213,9 @@ const TagsTable = ({ id, headCells, data, isFormOpen, setIsFormOpen, saveNewRow,
                               placeholder="External Docs Link..."
                               value={externalUrl || values.externalDocs.url}
                               disabled={readOnly}
-                              onChange={(value) => setExternalUrl(value)}
+                              onChange={(value) => {
+                                if (value === '' || regex.ASCII.test(value)) setExternalUrl(value)
+                              }}
                             />
                             {!readOnly && (
                               <Button

package/src/constants/regex.ts

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

package/src/layout/layout.tsx

@@ -1,4 +1,4 @@
-import { JSX, useEffect } from 'react'
+import { JSX, useEffect, useState } from 'react'
 import { Alert, Button } from 'digitinary-ui'
 import MethodsAccordion from '../components/MethodAccordion/MethodAccordion'
 import styles from './layout.module.css'
@@ -11,6 +11,7 @@ import { FormikProvider, useFormik } from 'formik'
 import { schemaValidation } from '../validator/form.scheme'
 import { TransformedOpenApi } from '@entities/transformedOpenApi'
 import { methodColorMapping } from '../constants/index'
+import CommonDialog from '../components/dialog'
 
 interface ILayoutProps {
   openApiJson?: OpenAPIFile
@@ -36,6 +37,7 @@ const Layout = ({ openApiJson, handleSave, setIsFormDirty }: ILayoutProps): JSX.
       validateForm(values)
     },
   })
+  const [isPublishDialogOpen, setIsPublishDialogOpen] = useState(false)
 
   useEffect(() => {
     if (setIsFormDirty) {
@@ -45,10 +47,11 @@ const Layout = ({ openApiJson, handleSave, setIsFormDirty }: ILayoutProps): JSX.
 
   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>
+      {formik.dirty && (
+        <Alert className={styles.apiDocAlert} color="warning" severity="warning">
+          There are changes you made may not be saved
+        </Alert>
+      )}
       <div className={styles.layoutContainer}>
         <div className={`${styles.editorSide} ${styles.docSide}`}>
           <SectionHead
@@ -63,7 +66,8 @@ const Layout = ({ openApiJson, handleSave, setIsFormDirty }: ILayoutProps): JSX.
                   type="submit"
                   variant="contained"
                   color="primary"
-                  onClick={formik.submitForm}
+                  onClick={() => setIsPublishDialogOpen(true)}
+                  disabled={!formik.isValid || formik.isSubmitting}
                 >
                   Save
                 </Button>
@@ -104,6 +108,37 @@ const Layout = ({ openApiJson, handleSave, setIsFormDirty }: ILayoutProps): JSX.
           )}
         </div>
       </div>
+      <CommonDialog
+        status="warning"
+        content={
+          <p
+            style={{
+              textAlign: 'center',
+              fontWeight: 400,
+              fontSize: '1rem',
+              lineHeight: '1.4375rem',
+            }}
+          >
+            Are you sure you want to Publish your changes?
+          </p>
+        }
+        onSubmit={{
+          onClick: () => {
+            formik.handleSubmit()
+            setIsPublishDialogOpen(false)
+          },
+          text: 'Publish',
+          color: 'warning',
+          fullWidth: true,
+        }}
+        onCancel={{
+          text: 'Cancel',
+          color: 'normal',
+          fullWidth: true,
+        }}
+        onClose={() => setIsPublishDialogOpen(false)}
+        open={isPublishDialogOpen}
+      />
     </div>
   )
 }

package/src/validator/form.scheme.ts

@@ -1,11 +1,11 @@
-import * as yup from "yup";
+import * as yup from 'yup'
 export const schemaValidation = yup.object({
   openapi: yup.string().required(),
   info: yup
     .object({
-      title: yup.string().required("API Name is required."),
-      description: yup.string().optional(),
-      version: yup.string().required("API Version is required"),
+      title: yup.string().trim().required('API Name is required.'),
+      description: yup.string().required(),
+      version: yup.string().required('API Version is required'),
     })
     .required(),
   servers: yup
@@ -32,8 +32,8 @@ export const schemaValidation = yup.object({
                         yup.object(
                           props
                             ? Object.keys(props).reduce((acc, propKey) => {
-                                acc[propKey] = yup.mixed();
-                                return acc;
+                                acc[propKey] = yup.mixed()
+                                return acc
                               }, {})
                             : {}
                         )
@@ -42,8 +42,8 @@ export const schemaValidation = yup.object({
                     items: yup.mixed().optional(),
                     enum: yup.array(yup.string()).optional(),
                     required: yup.array(yup.string()).optional(),
-                  });
-                  return acc;
+                  })
+                  return acc
                 }, {})
               : {}
           )
@@ -67,4 +67,4 @@ export const schemaValidation = yup.object({
       })
     )
     .optional(),
-});
+})