@digi-frontend/dgate-api-documentation 1.0.0

package/src/assets/icons/EditIcon.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3.96867 13.9157L13.6592 4.41662C14.906 3.19446 16.9283 3.19446 18.175 4.41662L19.4694 5.6854C20.7162 6.90755 20.7162 8.88985 19.4694 10.112L9.74061 19.6486C9.1843 20.1939 8.43007 20.4999 7.64282 20.4999H3.65854C3.28841 20.4999 2.99098 20.201 3.00021 19.8383L3.10043 15.8975C3.12036 15.1526 3.43127 14.4425 3.96867 13.9157ZM18.5381 6.59831L17.2437 5.32953C16.5113 4.61156 15.323 4.61156 14.5905 5.32953L13.8382 6.06697L17.7862 9.93612L18.5381 9.19909C19.2705 8.48112 19.2705 7.31628 18.5381 6.59831ZM4.89998 14.8287L12.9069 6.97989L16.8549 10.849L8.8093 18.7357L8.70228 18.8317C8.4067 19.0745 8.03222 19.2088 7.64282 19.2088L4.33345 19.2084L4.41707 15.9305C4.42814 15.5169 4.60126 15.1215 4.89998 14.8287ZM21 19.8545C21 19.498 20.7052 19.2089 20.3415 19.2089H13.471L13.3816 19.2148C13.0602 19.2576 12.8125 19.5277 12.8125 19.8545C12.8125 20.211 13.1073 20.5 13.471 20.5H20.3415L20.4308 20.4941C20.7523 20.4514 21 20.1813 21 19.8545Z" fill="#3A6CD1"/>
+</svg>

package/src/assets/icons/UpArrow.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15.6713 14.9814C15.4733 14.9771 15.2841 14.8986 15.1412 14.7614L12.2013 11.7614L9.26135 14.7614C9.11917 14.8939 8.93111 14.966 8.73681 14.9626C8.54251 14.9592 8.35713 14.8805 8.21972 14.743C8.08231 14.6056 8.00355 14.4203 8.00012 14.226C7.99669 14.0317 8.06881 13.8436 8.20129 13.7014L11.6713 10.2114C11.8143 10.0757 12.0041 10 12.2013 10C12.3985 10 12.5882 10.0757 12.7313 10.2114L16.2013 13.7014C16.3417 13.842 16.4206 14.0326 16.4206 14.2314C16.4206 14.4301 16.3417 14.6208 16.2013 14.7614C16.0584 14.8986 15.8693 14.9771 15.6713 14.9814V14.9814Z" fill="#12131A"/>
+</svg>

package/src/assets/icons/index.ts

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

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/Chips/style.scss

@@ -0,0 +1,147 @@
+.chips-container {
+  width: 100%;
+
+  .overflow-dropdown-div {
+    max-height: 4.25rem;
+    overflow: hidden;
+
+    .dropdown-list {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 0.625rem;
+      margin-top: 0.625rem;
+
+      .chip {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        background: #ebecf2;
+        border-radius: 3.125rem;
+        width: max-content;
+        height: 1.5rem;
+        overflow: hidden;
+        transition: all 0.4s ease-in-out;
+        padding-right: 0.9375rem;
+        cursor: default;
+
+        &:not(.disabled) {
+          &:hover {
+            background: #d8dae5;
+          }
+
+          &:active {
+            background: #696c80;
+            color: #fff;
+
+            .chip-close-icon {
+              path {
+                stroke: #fff;
+              }
+            }
+          }
+
+          .chip-close-icon {
+            cursor: pointer;
+          }
+        }
+
+        &.clickable {
+          cursor: pointer;
+        }
+
+        .chip-text {
+          display: flex;
+          align-items: center;
+          font-size: 0.75rem;
+          height: 100%;
+          padding-left: 0.9375rem;
+          margin-top: -0.125rem;
+        }
+
+        .chip-close-icon {
+          display: block;
+          height: 0.75rem;
+          width: 0.75rem;
+          margin-block: auto;
+          margin-left: 0.625rem;
+
+          path {
+            stroke: #12131a;
+          }
+        }
+      }
+    }
+  }
+
+  .dropdown-max-height {
+    max-height: -moz-fit-content;
+    max-height: fit-content !important;
+  }
+
+  .dropdown-overflow {
+    overflow: visible !important;
+  }
+
+  .show-btn {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    justify-content: center;
+    align-items: center;
+    width: auto;
+    height: 1.25rem;
+    cursor: pointer;
+    border: none;
+    margin-top: 0.625rem;
+    color: #9a9eb2;
+    background-color: transparent;
+
+    .show-btn-text-container {
+      flex: 1 1 auto;
+
+      .show-btn-text {
+        font-size: 0.75rem;
+        text-decoration-line: underline;
+      }
+    }
+
+    .show-btn-icon-container {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      height: 1.25rem;
+      width: 1.25rem;
+      margin-top: 0.1875rem;
+      margin-left: 0.125rem;
+
+      .show-btn-icon {
+        height: 1.25rem;
+        width: 1.25rem;
+
+        path {
+          fill: #9a9eb2;
+        }
+      }
+    }
+
+    &:hover {
+      color: #7c9bea;
+
+      .show-btn-icon-container .show-btn-icon {
+        path {
+          fill: #7c9bea;
+        }
+      }
+    }
+
+    &:active {
+      color: #2c4fa4;
+
+      .show-btn-icon-container .show-btn-icon {
+        path {
+          fill: #2c4fa4;
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,19 @@
+.apiInfoForm {
+  display: grid;
+  padding: 1.25rem 1.875rem;
+  gap: 1.25rem;
+
+  .apiDocRow {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 1.25rem;
+  }
+
+  .apiInfoForm_tagsChips {
+    margin-top: -1.25rem;
+  }
+
+  .apiInfoForm_submitBtn {
+    width: 4.25rem;
+  }
+}

package/src/components/InfoForm/InfoForm.tsx

@@ -0,0 +1,103 @@
+import React from 'react'
+// @ts-ignore
+import { useFormik } from 'formik'
+import * as Yup from 'yup'
+import { Button, Input, SelectGroup, TextArea } from 'digitinary-ui'
+import styles from './InfoForm.module.scss'
+import Chips from '../../components/Chips/Chips'
+import { CheckMarkSquare } from '../../assets/icons'
+import SVGLoader from '../../components/SVGLoader/SVGLoader'
+import regex from '../../constants/regex'
+
+const apiSchema = {
+  initialValue: {
+    name: '',
+    desc: '',
+    tags: [],
+    authType: '',
+    version: '',
+  },
+  schema: Yup.object().shape({
+    name: Yup.string().required('').min(1, 'Minimum length allowed is 1'),
+    authType: Yup.string(),
+    version: Yup.string(),
+    desc: Yup.string(),
+    tags: Yup.array().of(
+      Yup.object().shape({
+        id: Yup.string(),
+        label: Yup.string(),
+      })
+    ),
+  }),
+}
+
+const InfoForm = () => {
+  const formik = useFormik({
+    initialValues: structuredClone(apiSchema.initialValue),
+    validationSchema: apiSchema.schema,
+    validateOnMount: true,
+    onSubmit: (values, { resetForm, setFieldError, validateForm }) => {
+      // Handle save logic
+      resetForm({ values: structuredClone(apiSchema.initialValue) })
+
+      setTimeout(() => validateForm(), 0)
+    },
+  })
+
+  const { values, errors, setFieldValue } = formik
+
+  return (
+    <form className={styles.apiInfoForm} onSubmit={(e) => e.preventDefault()}>
+      <Input
+        size='large'
+        placeholder='e.g. Payments'
+        label='API Name'
+        required
+        value={values.name}
+        maxLength={25}
+        onChange={(value) => {
+          setFieldValue('name', value)
+        }}
+        onClear={() => {
+          setFieldValue('name', '')
+        }}
+        errorMsg={errors.name}
+        restrictedCharsRegex={regex.basic}
+      />
+      <div className={styles.apiDocRow}>
+        <Input size='large' label='API Authentication Type' required value={'Basic'} disabled />
+        <Input size='large' label='Version' required value={'1.3.2'} disabled />
+      </div>
+      <TextArea
+        size='large'
+        placeholder='description...'
+        label='Description'
+        value={values.desc}
+        maxLength={120}
+        onChange={(value: string) => {
+          setFieldValue('desc', value)
+        }}
+        onClear={() => {
+          setFieldValue('desc', '')
+        }}
+        errorMessage={errors.desc}
+        restrictedCharsRegex={regex.restrictNone}
+      />
+      <SelectGroup value={values.tags} onChange={(items) => setFieldValue('tags', items)} label='Tags' options={[{ list: [{ label: 'Option 1', value: '1' }] }]} />
+      <Chips className={styles.apiInfoForm_tagsChips} items={values.tags.map((t) => ({ id: t.label, label: t.label }))} onDelete={(items) => setFieldValue('tags', items)} />
+      <Button
+        className={styles.apiInfoForm_submitBtn}
+        size='small'
+        fullWidth={false}
+        type='submit'
+        variant='link'
+        color='success'
+        startIcon={<SVGLoader src={CheckMarkSquare} width='1.5rem' height='1.5rem' />}
+      >
+        Save
+      </Button>
+    </form>
+  )
+}
+
+export default InfoForm

package/src/components/MethodAccordion/MethodAccordion.module.scss

@@ -0,0 +1,182 @@
+.methodAccordionContainer {
+  display: flex;
+  flex-direction: column;
+  gap: 1.25rem;
+  padding: 1.25rem 1.875rem;
+
+  .methodAccordion {
+    border: none !important;
+    box-shadow: none;
+    margin-bottom: 0;
+
+    :global(.summary) {
+      padding: 0 !important;
+    }
+
+    :global(.details) {
+      border: none;
+      padding: 0;
+    }
+
+    :global(.summary .iconContainer .dropdownIcon) {
+      display: none !important;
+    }
+
+    .methodSummaryContainer {
+      display: flex;
+      align-items: center;
+      gap: 0.9375rem;
+      margin-bottom: 1.25rem;
+
+      .methodSummary {
+        display: flex;
+        gap: 0.3125rem;
+        background-color: #f8f9fb;
+        width: 100%;
+        padding: 0.3125rem;
+        border-radius: 0.3125rem;
+
+        .methodLabel {
+          display: grid;
+          place-content: center;
+          width: 5rem;
+          height: 2rem;
+          color: white;
+          border-radius: 0.1875rem;
+        }
+      }
+
+      .methodExpandArrowContainer {
+        display: grid;
+        place-content: center;
+        width: 2.25rem;
+        aspect-ratio: 1 / 1;
+        border-radius: 100%;
+        background-color: #f8f9fb;
+        margin-left: auto;
+
+        svg {
+          transition: rotate 0.3s ease-in-out;
+        }
+      }
+    }
+
+    &.expanded {
+      .methodExpandArrowContainer {
+        svg {
+          rotate: 180deg;
+        }
+      }
+    }
+  }
+
+  .paramsTable {
+    .paramDescContainer {
+      display: flex;
+
+      .paramDescContainer_separator {
+        height: inherit;
+        width: 1px;
+        background-color: #d8dae5;
+      }
+
+      button {
+        svg {
+          path {
+            stroke-width: 0.2;
+          }
+        }
+
+        .editDescBtn {
+          padding: 0;
+          margin-right: 1.25rem;
+
+          .btnContentWrapper {
+            display: flex;
+            align-items: center;
+            padding: 0;
+            color: #12131a;
+
+            .endBtnIcon {
+              margin-block: auto;
+
+              svg {
+                path {
+                  fill: #12131a;
+                }
+              }
+            }
+          }
+        }
+
+        &.deleteParamBtn {
+          padding: 0;
+
+          .btnContentWrapper {
+            .endBtnIcon {
+              margin-block: auto;
+
+              svg {
+                width: 1.125rem;
+              }
+            }
+          }
+        }
+      }
+    }
+
+    .requiredParam {
+      .headContainer {
+        &::after {
+          content: '*';
+          color: red;
+          transform: translateX(0.125rem);
+        }
+      }
+    }
+  }
+
+  .requestAccordion,
+  .responseAccordion {
+    border-top: 1px solid #babdcc;
+    border-radius: 0.3125rem !important;
+    box-shadow: none !important;
+    margin-bottom: 0 !important;
+
+    .requestAccordionSummary,
+    .responseAccordionSummary {
+      font-weight: 700;
+      font-size: 1.125rem;
+      line-height: 1.5rem;
+    }
+
+    :global(.details) {
+      :global(.textArea .inputField) {
+        padding: 0;
+        border: none;
+      }
+    }
+  }
+
+  .responseAccordion {
+    .responseAccordionSummary {
+      display: flex;
+      align-items: center;
+
+      :global(.multiSelectGroup) {
+        width: 6.25rem;
+        height: 2.0625rem !important;
+        min-height: 2.0625rem !important;
+        margin-left: auto;
+
+        :global(.selectDisplay) {
+          padding: 0;
+        }
+      }
+    }
+
+    :global(.summary .iconContainer .dropdownIcon) {
+      display: none !important;
+    }
+  }
+}

package/src/components/MethodAccordion/MethodAccordion.tsx

@@ -0,0 +1,84 @@
+import React from 'react'
+import { Accordion, Button, SelectGroup, Switch, Table, TextArea } from 'digitinary-ui'
+import SVGLoader from '../../components/SVGLoader/SVGLoader'
+import { DeleteIcon, DownArrowIcon, EditIcon } from '../../assets/icons'
+import { httpStatusCodes, methodColorMapping, paramsTableHeaders } from '../../constants/index'
+import styles from './MethodAccordion.module.scss'
+
+const data = Array(4).fill({
+  paramName: 'search',
+  paramType: 'Query',
+  schemaType: 'String',
+  isRequired: <Switch checked />,
+  description: (
+    <div className={styles.paramDescContainer}>
+      <Button className={styles.editDescBtn} variant='link' color='action' endIcon={<SVGLoader src={EditIcon} width='1.5rem' height='1.5rem' />}>
+        Add Description
+      </Button>
+      <div className={styles.paramDescContainer_separator}></div>
+      <Button className={styles.deleteParamBtn} variant='link' color='error' endIcon={<SVGLoader src={DeleteIcon} width='1.125rem' height='1.125rem' />}></Button>
+    </div>
+  ),
+})
+
+const MethodsAccordion = () => {
+  return (
+    <div className={styles.methodAccordionContainer}>
+      <Accordion
+        className={styles.methodAccordion}
+        children={<TextArea label='Description' />}
+        summary={
+          <div className={styles.methodSummaryContainer}>
+            <div className={styles.methodSummary}>
+              <span style={{ backgroundColor: methodColorMapping?.POST?.color ?? '#3A6CD1' }} className={styles.methodLabel}>
+                {methodColorMapping.POST.label}
+              </span>
+              <span className={styles.methodPath}>/auth/login</span>
+            </div>
+            <div className={styles.methodExpandArrowContainer}>
+              <SVGLoader src={DownArrowIcon} width='2rem' height='2rem' />
+            </div>
+          </div>
+        }
+      />
+      <div className={styles.paramsTable}>
+        <Table data={data} headCells={paramsTableHeaders} />
+      </div>
+      <Accordion
+        className={styles.requestAccordion}
+        summary={
+          <span className={styles.requestAccordionSummary}>
+            Request<span style={{ color: 'red' }}>*</span>
+          </span>
+        }
+        children={<TextArea />}
+      />
+      <Accordion
+        className={styles.responseAccordion}
+        summary={
+          <span className={styles.responseAccordionSummary}>
+            Response<span style={{ color: 'red' }}>*</span>
+            <SelectGroup
+              options={[
+                {
+                  list: httpStatusCodes.map((code) => ({
+                    label: (
+                      <div className='statusCodeOptionContainer'>
+                        <div className='statusCodeOptionCircle'></div>
+                        <span>{code}</span>
+                      </div>
+                    ),
+                    value: code,
+                  })),
+                },
+              ]}
+            />
+          </span>
+        }
+        children={<TextArea />}
+      />
+    </div>
+  )
+}
+
+export default MethodsAccordion