@digi-frontend/dgate-api-documentation 1.0.1 → 1.0.4

package/src/assets/icons/index.ts

@@ -1,24 +1,8 @@
-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 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 deleteOutlinedIcon } from './deleteOutlinedIcon.svg'

package/src/components/Chips/Chips.tsx

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

@@ -1,147 +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.95rem;
-          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;
-        }
-      }
-    }
-  }
-}
+.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.95rem;
+          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

@@ -1,165 +1,20 @@
-.apiInfoForm {
-  display: grid;
-  padding: 1.25rem 1.875rem;
-  gap: 1.25rem;
-
-  .paramsTable {
-    .paramDescContainer {
-      display: flex;
-
-      .paramDescContainer_separator {
-        height: inherit;
-        width: 1px;
-        background-color: #d8dae5;
-      }
-
-      :global(.customBtn) {
-        svg {
-          path {
-            stroke-width: 0.1;
-          }
-        }
-
-        &.editDescBtn {
-          padding: 0;
-          margin-right: 1.25rem;
-
-          :global(.btnContentWrapper) {
-            display: flex;
-            align-items: center;
-            padding: 0;
-            font-size: 0.875rem;
-
-            :global(.endBtnIcon) {
-              margin-block: auto;
-
-              svg {
-                path {
-                  fill: #12131a;
-                }
-              }
-            }
-          }
-        }
-
-        &.deleteParamBtn {
-          padding: 0;
-          border-width: 0 !important;
-
-          :global(.btnContentWrapper) {
-            :global(.endBtnIcon) {
-              margin-block: auto;
-
-              svg {
-                width: 1.125rem;
-              }
-            }
-          }
-        }
-
-        &:not(:global(.disabled)):global(.success) {
-          :global(.endBtnIcon) {
-            margin-block: auto;
-
-            svg {
-              width: 1.125rem;
-              path {
-                fill: #3aaa35;
-              }
-            }
-          }
-        }
-      }
-    }
-
-    .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;
-      gap: 0.625rem;
-      padding-bottom: 0.625rem;
-
-      > *:not(.editDescTooltipContent_header) {
-        margin-inline: 0.625rem;
-      }
-
-      .editDescTooltipContent_header {
-        font-weight: 600;
-        font-size: 0.875rem;
-        line-height: 1.25rem;
-        padding: 0.75rem 1.25rem;
-        border-bottom: 1px solid #d8dae5;
-      }
-    }
-
-    :global(.requiredParam) {
-      :global(.headContainer) {
-        &::after {
-          content: '*';
-          color: red;
-          transform: translateX(0.125rem);
-        }
-      }
-    }
-  }
-
-  .apiDocRow {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    gap: 1.25rem;
-  }
-
-  .apiInfoForm_tagsChips {
-    margin-top: -1.25rem;
-  }
-
-  .editDescTooltipContent {
-    display: flex;
-    flex-direction: column;
-    gap: 0.625rem;
-    padding-bottom: 0.625rem;
-
-    > *:not(.editDescTooltipContent_header) {
-      margin-inline: 0.625rem;
-    }
-
-    .editDescTooltipContent_header {
-      font-weight: 600;
-      font-size: 0.875rem;
-      line-height: 1.25rem;
-      padding: 0.75rem 1.25rem;
-      border-bottom: 1px solid #d8dae5;
-    }
-  }
-
-  :global(.requiredParam) {
-    :global(.headContainer) {
-      &::after {
-        content: '*';
-        color: red;
-        transform: translateX(0.125rem);
-      }
-    }
-  }
-}
+.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 {
+    height: 1.25rem !important;
+    width: 4.25rem;
+  }
+}