@digi-frontend/dgate-api-documentation 1.1.4 → 1.1.7

package/src/components/InfoForm/InfoForm.tsx

@@ -1,432 +0,0 @@
-import { useEffect, useState } from 'react'
-// @ts-ignore
-import { useFormikContext } from 'formik'
-import { Button, Input, TextArea } from 'digitinary-ui'
-import styles from './InfoForm.module.scss'
-import regex from '../../constants/regex'
-import { TransformedOpenApi } from '../../types/transformedOpenApi'
-import Tooltip from '../../components/Tooltip/Tooltip'
-import { CloseIcon, DeleteIcon, DeleteOutlinedIcon, EditIcon } from '../../assets/icons'
-import SVGLoader from '../../components/SVGLoader/SVGLoader'
-import CommonDialog from '../../components/dialog'
-import { tagsTableHeaders } from '../../constants/index'
-import TagsTable from '../../components/table/tags-table'
-
-const InfoForm = ({ readOnly }: { readOnly?: boolean }) => {
-  const [tableData, setTableData] = useState([])
-  const [tableRecords, setTableRecords] = useState()
-  const [authType, setAuthType] = useState('')
-  const [description, setDescription] = useState('')
-  const [url, setURL] = useState('')
-  const { values, setFieldValue, errors } = useFormikContext<TransformedOpenApi>()
-  const [externalTooltipRefs, setExternalTooltipRefs] = useState<{ [key: number]: any }>({})
-  const [tooltipRefs, setTooltipRefs] = useState<{ [key: number]: any }>({})
-  const [selectedTagIndex, setSelectedTagIndex] = useState<number | null>(null)
-  const [selectedTagName, setSelectedTagName] = useState<string | null>(null)
-  const [openDeleteDialog, setOpenDeleteDialog] = useState(false)
-  const [isFormOpen, setIsFormOpen] = useState(false)
-
-  useEffect(() => {
-    if (values && values.components && values.components.securitySchemes) {
-      const authenticatorKeys = Object.keys(values.components.securitySchemes)
-      if (authenticatorKeys.length) {
-        const _authType =
-          values.components.securitySchemes[authenticatorKeys[0]].scheme ||
-          values.components.securitySchemes[authenticatorKeys[0]].type
-
-        setAuthType(_authType && _authType.toLowerCase() == 'public' ? 'Keyless' : _authType)
-      }
-    }
-  }, [])
-
-  useEffect(() => {
-    setTableRecords(generateTableRecords(tableData))
-  }, [tableData])
-
-  useEffect(() => {
-    if (values.tags && values.tags.length) {
-      setTableData(values.tags)
-    }
-  }, [values.tags])
-
-  const confirmDeleteTag = () => {
-    if (selectedTagIndex !== null) {
-      setTableData((prev) => prev.filter((_, i) => i !== selectedTagIndex))
-      setFieldValue(
-        `tags`,
-        values.tags?.filter((_, i) => i !== selectedTagIndex)
-      )
-    }
-    setOpenDeleteDialog(false)
-    setSelectedTagIndex(null)
-  }
-
-  const capitalize = (str) => {
-    if (!str) return ''
-    return str.charAt(0).toUpperCase() + str.slice(1)
-  }
-
-  const onTableChange = (key, value, index) => {
-    const newTableData = tableData.map((item, tIndex) => {
-      if (tIndex === index) {
-        return { ...item, [key]: value }
-      } else {
-        return item
-      }
-    })
-
-    setTableData(newTableData)
-  }
-
-  const saveNewRow = (tag) => {
-    setTableData([...tableData, tag])
-    const oldTags = values.tags || []
-    setFieldValue(`tags`, [...oldTags, tag])
-  }
-
-  const handleDeleteClick = (id: number, name: string) => {
-    setSelectedTagIndex(id)
-    setSelectedTagName(name)
-
-    setOpenDeleteDialog(true)
-  }
-
-  const generateTableRecords = (items) => {
-    return items.map((item, index) => ({
-      id: index,
-      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"
-            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 tag..."
-                  value={item.description}
-                  disabled={readOnly}
-                  onChange={(value) => {
-                    if (value === '' || regex.ASCII.test(value))
-                      onTableChange('description', value, index)
-                  }}
-                  maxLength={25}
-                />
-                {!readOnly && (
-                  <Button
-                    className={styles.editDescTooltipContent_btn}
-                    variant="outlined"
-                    size="small"
-                    onClick={() => {
-                      setFieldValue(`tags[${index}].description`, item.description?.trim())
-                      tooltipRefs[index]?.hide()
-                    }}
-                    disabled={!item.description?.trim()}
-                  >
-                    Apply
-                  </Button>
-                )}
-              </div>
-            }
-          >
-            {readOnly || values.tags[index].description ? (
-              <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 || values.tags[index].description
-                  ? 'View Description'
-                  : 'Add Description'}
-              </Button>
-            )}
-          </Tooltip>
-        </div>
-      ),
-      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 &&
-                values.tags[index]?.externalDocs?.url?.indexOf('http') > -1
-                  ? values.tags[index]?.externalDocs?.url
-                  : `https://${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"
-            type="function"
-            trigger="click"
-            delay={[0, 0]}
-            onCreate={(instance) =>
-              setExternalTooltipRefs((prev) => ({
-                ...prev,
-                [index]: instance,
-              }))
-            }
-            content={
-              <div className={styles.editDescTooltipContent}>
-                <p className={styles.editDescTooltipContent_header}>External Docs Description</p>
-                <TextArea
-                  placeholder="Describe External Doc..."
-                  value={item.externalDocs?.description}
-                  disabled={readOnly}
-                  maxLength={25}
-                  onChange={(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>
-                <TextArea
-                  placeholder="External Docs Link..."
-                  value={item.externalDocs?.url}
-                  disabled={readOnly}
-                  maxLength={200}
-                  restrictedCharsRegex={regex.urlRegex}
-                  onChange={(value) => {
-                    if (value === '' || regex.ASCII.test(value)) {
-                      onTableChange('externalDocs', { ...item.externalDocs, url: value }, index)
-                      setURL(value)
-                    }
-                  }}
-                />
-                {!readOnly && (
-                  <Button
-                    className={styles.editDescTooltipContent_btn}
-                    variant="outlined"
-                    size="small"
-                    onClick={() => {
-                      setFieldValue(`tags[${index}].externalDocs`, {
-                        description: description?.trim(),
-                        url: url?.trim(),
-                      })
-                      setDescription('')
-                      setURL('')
-                      externalTooltipRefs[index]?.hide()
-                    }}
-                    disabled={
-                      !(
-                        (values.tags[index].externalDocs?.url && !url?.trim()) ||
-                        (url?.trim() && regex.urlRegex.test(url))
-                      )
-                    }
-                  >
-                    Apply
-                  </Button>
-                )}
-              </div>
-            }
-          >
-            {readOnly || values.tags[index].externalDocs?.description ? (
-              <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}
-                variant="link"
-                color="action"
-                endIcon={<SVGLoader src={EditIcon} width="1.5rem" height="1.5rem" />}
-                onClick={() => {
-                  setDescription(item.externalDocs?.description)
-                  setURL(item.externalDocs?.url)
-                }}
-              >
-                {readOnly ||
-                (values.tags[index]?.externalDocs &&
-                  (values.tags[index]?.externalDocs?.url ||
-                    values.tags[index].externalDocs?.description))
-                  ? 'View '
-                  : 'Add '}{' '}
-                External Docs Link
-              </Button>
-            )}
-          </Tooltip>
-
-          {!readOnly && <div className={styles.paramDescContainer_separator}></div>}
-
-          {!readOnly && (
-            <Button
-              className={styles.deleteParamBtn}
-              variant="link"
-              color="error"
-              endIcon={<SVGLoader src={DeleteIcon} width="1.125rem" height="1.125rem" />}
-              onClick={() => handleDeleteClick(index, item.name)}
-            ></Button>
-          )}
-        </div>
-      ),
-    }))
-  }
-
-  return (
-    <form className={styles.apiInfoForm} onSubmit={(e) => e.preventDefault()}>
-      <div className={styles.apiDocRow}>
-        <Input
-          size="large"
-          placeholder="e.g. Payments"
-          label="API Name"
-          required
-          value={values?.info?.title}
-          maxLength={35}
-          onChange={(value) => {
-            setFieldValue('info.title', value)
-          }}
-          onClear={() => {
-            setFieldValue('info.title', '')
-          }}
-          errorMsg={errors?.info?.title}
-          restrictedCharactersRegex={regex.basic}
-        />
-        <Input size="large" label="Version" required value={values?.info?.version} disabled />
-      </div>
-      <TextArea
-        size="large"
-        placeholder="Enter a description of the API's functionality..."
-        label="Description"
-        value={values?.info?.description}
-        maxLength={120}
-        required
-        onChange={(value: string) => {
-          if (value === '' || regex.ASCII.test(value)) {
-            setFieldValue('info.description', value)
-          }
-        }}
-        onClear={() => {
-          setFieldValue('info.description', '')
-        }}
-        errorMsg={errors?.info?.description}
-      />
-      <div className={styles.paramsTable}>
-        <TagsTable
-          id="paramter-table"
-          data={tableRecords}
-          headCells={tagsTableHeaders}
-          isFormOpen={isFormOpen}
-          setIsFormOpen={setIsFormOpen}
-          saveNewRow={saveNewRow}
-          readOnly={readOnly}
-        />
-      </div>
-      <CommonDialog
-        status="error"
-        content={
-          <p
-            style={{
-              textAlign: 'center',
-              fontWeight: 400,
-              fontSize: '1rem',
-              lineHeight: '1.4375rem',
-            }}
-            className="delete-msg-container"
-          >
-            Are you sure you want to delete
-            <span className="plan-name">
-              {' '}
-              Tag <strong>{selectedTagName}</strong>
-            </span>
-            ?
-          </p>
-        }
-        onSubmit={{
-          onClick: confirmDeleteTag,
-          text: 'Delete',
-          color: 'error',
-          fullWidth: true,
-        }}
-        onCancel={{
-          text: 'Cancel',
-          color: 'action',
-          fullWidth: true,
-          variant: 'outlined',
-        }}
-        onClose={() => setOpenDeleteDialog(false)}
-        open={openDeleteDialog}
-        icon={<SVGLoader src={DeleteOutlinedIcon} width="4.0625rem" height="4.0625rem" />}
-        closeIcon={
-          <SVGLoader
-            src={CloseIcon}
-            width="1.5rem"
-            height="1.5rem"
-            onClick={() => setOpenDeleteDialog(false)}
-          />
-        }
-      />
-    </form>
-  )
-}
-
-export default InfoForm

package/src/components/JsonInput/JsonInput.tsx

@@ -1,149 +0,0 @@
-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,
-  label,
-  value,
-  onValidation,
-  onChange,
-  dataId,
-  className = '',
-  errorMessage,
-  acceptType = 'BOTH',
-  fieldIsDisabled,
-  withFooter = true,
-}) => {
-  const [isValid, setIsValid] = useState()
-  const [disabledBeautify, setDisabledBeautify] = useState(true)
-
-  const handlePrettify = (e) => {
-    if (value === '') return
-    e.preventDefault()
-    try {
-      let prettifiedData
-      if ((acceptType === 'BOTH' || acceptType === 'JSON') && isValidJson(value)) {
-        // If it's valid JSON, prettify JSON
-        prettifiedData = JSON.stringify(JSON.parse(value), null, 2)
-      } else if (acceptType === 'BOTH' || acceptType === 'YML') {
-        // If it's not valid JSON, prettify YAML
-        prettifiedData = yaml.dump(yaml.load(value), { indent: 0 })
-      }
-      onChange(prettifiedData)
-      setIsValid(true) // Reset validity status
-    } catch (error) {
-      console.error(error)
-      setIsValid(false)
-    }
-  }
-
-  // Function to check if input is valid JSON
-  const isValidJson = (str) => {
-    try {
-      JSON.parse(str)
-      return true
-    } catch (error) {
-      return false
-    }
-  }
-
-  const checkIsValid = () => {
-    if (acceptType === 'BOTH' || acceptType === 'JSON') {
-      return isValidJson(value)
-    } else if (acceptType === 'BOTH' || acceptType === 'YML') {
-      try {
-        // Try parsing as YAML
-        yaml.load(value)
-        return true
-      } catch (error) {
-        console.error(error)
-        return false
-      }
-    }
-  }
-
-  useEffect(() => {
-    try {
-      handlePrettify(value)
-    } catch {}
-  }, [])
-
-  return (
-    <div
-      className={`${styles['json-editor-container']} ${className} ${
-        fieldIsDisabled ? styles.disabled : ''
-      }`}
-    >
-      {label && <p className={`${styles['json-editor-label']}`}>{label}</p>}
-      <div
-        className={`${styles['json-editor']} ${
-          value !== '' && isValid === false ? styles.invalid : ''
-        }`}
-      >
-        <textarea
-          disabled={fieldIsDisabled}
-          data-id={dataId}
-          value={value}
-          onChange={(e) => {
-            if (fieldIsDisabled) return
-            if (regex.ASCII.test(e.target.value)) {
-              setIsValid(undefined)
-              setDisabledBeautify(true)
-              onChange(e.target.value)
-            }
-          }}
-          onPaste={(e) => {
-            if (fieldIsDisabled) return
-            if (regex.ASCII.test(e.target.value)) {
-              setIsValid(undefined)
-              setDisabledBeautify(true)
-              onChange(e.target.value)
-            }
-          }}
-          min="1"
-          placeholder={placeholder}
-        />
-        {withFooter && (
-          <div className={`${styles['actions-container']}`}>
-            <button
-              type="button"
-              className={styles.validate}
-              onClick={() => {
-                const valid = checkIsValid()
-                setIsValid(valid)
-                onValidation(valid)
-                setDisabledBeautify(!checkIsValid())
-              }}
-              data-id={`${dataId}-VALIDATE-BUTTON`}
-              disabled={value === ''}
-            >
-              Validate
-            </button>
-            <button
-              type="button"
-              disabled={value === '' || disabledBeautify}
-              data-id={`${dataId}-BEAUTIFY-BUTTON`}
-              className={styles.beautify}
-              onClick={handlePrettify}
-            >
-              Beautify
-            </button>
-          </div>
-        )}
-      </div>
-      {(errorMessage || (value !== '' && isValid === false)) && (
-        <p className={styles['error-message']}>{errorMessage || errorMapping[acceptType]}</p>
-      )}
-    </div>
-  )
-}
-
-export default JsonInput