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

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.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;
-        }
-      }
-    }
-  }
-}
+.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,19 +1,165 @@
-.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;
-  }
-}
+.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);
+      }
+    }
+  }
+}