@digi-frontend/dgate-api-documentation 1.2.0 → 1.3.0

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

@@ -13,23 +13,23 @@ export declare const schemaValidation: yup.ObjectSchema<{
     paths: {
         path?: string;
         methods?: {
-            description?: string;
             summary?: string;
             type?: string;
+            description?: string;
             tags?: string[];
             requestBody?: {};
         }[];
     }[];
     components: {
-        schemas?: {};
         securitySchemes?: {};
+        schemas?: {};
     };
     security: {
         schemeName?: string[];
     }[];
     tags: {
-        description?: string;
         name?: string;
+        description?: string;
     }[];
 }, yup.AnyObject, {
     openapi: undefined;

package/index.ts

@@ -0,0 +1,2 @@
+export { default as Layout2 } from './src/layout/layout'
+export { default as DocsLayout2 } from './src/layout/docsLayout'

package/package.json

@@ -1,22 +1,15 @@
 {
   "name": "@digi-frontend/dgate-api-documentation",
-  "version": "1.2.0",
-  "main": "dist/cjs/index.js",
-  "module": "dist/esm/index.js",
+  "version": "1.3.0",
+  "main": "dist/src/index.js",
+  "module": "dist/src/index.js",
   "types": "dist/types/index.d.ts",
-  "files": [
-    "dist",
-    "src/**/*.scss"
-  ],
   "scripts": {
-    "build": "rollup -c",
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "build": "tsc --noEmit --skipLibCheck || true && rollup -c || true"
   },
   "exports": {
-    ".": {
-      "import": "./dist/esm/index.js",
-      "require": "./dist/cjs/index.js"
-    }
+    ".": "./src/index.ts"
   },
   "keywords": [],
   "author": "Dgate",
@@ -37,20 +30,18 @@
     "yup": "^1.6.1"
   },
   "devDependencies": {
-    "@rollup/plugin-commonjs": "^28.0.6",
+    "@rollup/plugin-commonjs": "^28.0.2",
     "@rollup/plugin-json": "^6.1.0",
-    "@rollup/plugin-node-resolve": "^16.0.1",
+    "@rollup/plugin-node-resolve": "^16.0.0",
     "@rollup/plugin-typescript": "^12.1.2",
     "@rollup/plugin-url": "^8.0.2",
     "@types/react": "^19.0.7",
     "@types/react-dom": "^19.0.3",
     "rollup": "^2.79.2",
     "rollup-plugin-postcss": "^4.0.2",
-    "rollup-plugin-sass": "^1.15.3",
+    "rollup-plugin-sass": "^1.15.2",
     "rollup-plugin-terser": "^7.0.2",
-    "rollup-plugin-typescript2": "^0.36.0",
     "sass": "^1.83.4",
-    "tsup": "^8.5.0",
     "typescript": "^5.7.3",
     "typescript-plugin-css-modules": "^5.1.0"
   }

package/rollup.config.js

@@ -0,0 +1,37 @@
+import resolve from '@rollup/plugin-node-resolve'
+import commonjs from '@rollup/plugin-commonjs'
+import typescript from '@rollup/plugin-typescript'
+import postcss from 'rollup-plugin-postcss'
+import { terser } from 'rollup-plugin-terser'
+import url from '@rollup/plugin-url'
+import sass from 'rollup-plugin-sass'
+import json from '@rollup/plugin-json'
+
+export default {
+  input: 'src/index.ts',
+  output: [
+    {
+      dir: 'dist',
+      format: 'esm',
+      preserveModules: true,
+      sourcemap: true,
+    },
+  ],
+  plugins: [
+    resolve(),
+    commonjs(),
+    typescript({ tsconfig: './tsconfig.json' }),
+    postcss({
+      modules: false,
+      extract: false,
+      minimize: true,
+    }),
+    terser(),
+    url({ limit: 0 }),
+    sass({
+      output: 'dist/styles.css',
+    }),
+    json(),
+  ],
+  external: ['react', 'react-dom'],
+}

package/src/assets/icons/index.ts

@@ -0,0 +1,27 @@
+export { default as UpArrowIcon } from './UpArrow.svg'
+export { default as DownArrowIcon } from './DownArrow.svg'
+export { default as CloseIcon } from './CloseIcon.svg'
+export { default as CheckMarkSquare } from './CheckMarkSquare.svg'
+export { default as DeleteIcon } from './DeleteIcon.svg'
+export { default as EditIcon } from './EditIcon.svg'
+export { default as AddRow } from './AddRow.svg'
+export { default as CopySticker } from './CopySticker.svg'
+export { default as arrowDownGray } from './arrowDownGray.svg'
+export { default as arrowRightGray } from './arrowRightGray.svg'
+export { default as document } from './document.svg'
+export { default as eye } from './eye.svg'
+export { default as DeleteOutlinedIcon } from './DeleteOutlinedIcon.svg'
+export { default as ApiIcon } from './ApiIcon.svg'
+export { default as FilterIcon } from './FilterIcon.svg'
+export { default as BookIcon } from './BookIcon.svg'
+export { default as Closecircle } from './close-circle.svg'
+export { default as InfoIcon } from './infoIcon.svg'
+export { default as SearchIcon } from './searchIcon.svg'
+export { default as Copy } from './copy.svg'
+export { default as PlusIcon } from './Plus.svg'
+export { default as PlusSquare } from './PlusSquare.svg'
+export { default as RequestOption } from './RequestOption.svg'
+export { default as ArrowBack } from './ArrowBack.svg'
+export { default as arrowDown } from './arrow-down.svg'
+export { default as newCopyIcon } from './newCopyIcon.svg'
+export { default as arrowUp } from './arrow-up.svg'

package/src/components/Chips/Chips.tsx

@@ -0,0 +1,87 @@
+import React, { useEffect, useRef, useState } from 'react'
+import SVGLoader from '../../components/SVGLoader/SVGLoader'
+import { CloseIcon, DownArrowIcon, UpArrowIcon } from '../../assets/icons'
+import './style.scss'
+
+type ChipItemType = {
+  id: number | string
+  label: string
+  className?: string
+  disabled?: boolean
+  [key: string]: unknown
+}
+
+export type CustomChipsType = {
+  className?: string
+  items: ChipItemType[]
+  onDelete?: (items: ChipItemType[]) => void
+  onClick?: (item: ChipItemType) => void
+}
+
+const Chips = ({ className, items, onDelete, onClick }: CustomChipsType) => {
+  const showMoreAppearsAfterHeight = 58
+  const [showBtnVisible, setShowBtnVisible] = useState(false)
+  const [showBtnOpen, setShowBtnOpen] = useState(false) // Fixed typo
+  const dropdownList = useRef<HTMLDivElement | null>(null) // Specify the correct type for the ref
+
+  useEffect(() => {
+    if (dropdownList.current) {
+      const showMoreOrLess = setTimeout(() => {
+        const offsetHeight = dropdownList?.current?.offsetHeight as number // Correctly infer offsetHeight
+        setShowBtnVisible(offsetHeight > showMoreAppearsAfterHeight)
+      }, 0) // Pass 0 as a number, not an array
+
+      return () => clearTimeout(showMoreOrLess)
+    }
+  }, [items?.length, showMoreAppearsAfterHeight])
+
+  const showButtonHandler = (e: any) => {
+    e?.stopPropagation()
+    setShowBtnOpen(!showBtnOpen)
+  }
+
+  return (
+    <div className={`chips-container ${className ?? ''}`}>
+      {!!items?.length && (
+        <div className={`overflow-dropdown-div ${showBtnOpen && 'dropdown-max-height dropdown-overflow'}`}>
+          <div ref={dropdownList} className='dropdown-list'>
+            {items?.map((chip, index) => (
+              <div
+                key={chip.id}
+                className={`chip ${chip.disabled ? 'disabled' : ''}${!!onClick ? 'clickable' : ''}${chip?.className ?? ''}`}
+                onClick={() => !!onClick && chip.disabled === false && onClick(chip)}
+              >
+                <span className='chip-text'> {chip.label} </span>
+                {chip.disabled !== true && (
+                  <SVGLoader
+                    onClick={(e: any) => {
+                      e.stopPropagation()
+                      const filteredChips = items.filter((_, iIndex) => iIndex !== index)
+                      onDelete && onDelete(filteredChips)
+                    }}
+                    className='chip-close-icon'
+                    src={CloseIcon}
+                    width={'1.25rem'}
+                    height={'1.25rem'}
+                  />
+                )}
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+      {showBtnVisible ? (
+        <button className='show-btn' onClick={showButtonHandler} type='button'>
+          <div className='show-btn-text-container'>
+            <span className='show-btn-text'>{showBtnOpen ? 'Show Less' : 'Show More'}</span>
+          </div>
+          <div className='show-btn-icon-container'>
+            <SVGLoader className='show-btn-icon' src={showBtnOpen ? UpArrowIcon : DownArrowIcon} width={'1.25rem'} height={'1.25rem'} />
+          </div>
+        </button>
+      ) : null}
+    </div>
+  )
+}
+
+export default Chips

package/src/components/InfoForm/InfoForm.tsx

@@ -0,0 +1,432 @@
+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