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

package/src/components/SVGLoader/SVGLoader.tsx

@@ -1,94 +1,96 @@
-import React, { useState, useEffect } from 'react'
-import parse from 'html-react-parser'
-
-// Utility function to create an SVG element from a string
-const createSvgElement = (svgString: string): SVGSVGElement | null => {
-  const parser = new DOMParser()
-  const doc = parser.parseFromString(svgString, 'image/svg+xml')
-  return doc.querySelector('svg')
-}
-
-// Define the type for SVG attributes
-type SVGAttributes = React.SVGProps<SVGSVGElement>
-
-interface SVGLoaderProps extends SVGAttributes {
-  src: string
-  cache?: boolean
-}
-
-const SVGLoader: React.FC<SVGLoaderProps> | any = ({ src, cache = true, ...props }) => {
-  const [svgMarkup, setSvgMarkup] = useState<string | null>(null)
-
-  useEffect(() => {
-    if (!src) return
-    if (typeof src !== 'string') console.log({ src })
-    const isUrl = src.startsWith('http') || src.startsWith('/')
-
-    const cacheName = 'svg-cache'
-
-    const fetchSvg = async () => {
-      try {
-        let svgString: string | null = null
-
-        // Use the Cache API if caching is enabled
-        if (cache && isUrl && 'caches' in window) {
-          const cacheStorage = await caches.open(cacheName)
-          const cachedResponse = await cacheStorage.match(src)
-
-          // If SVG is found in cache, use it
-          if (cachedResponse && cachedResponse.ok) {
-            svgString = await cachedResponse.text()
-            setSvgMarkup(svgString)
-            return
-          }
-        }
-
-        // If not cached, fetch from URL
-        if (isUrl) {
-          const response = await fetch(src)
-
-          // Clone the response before consuming it
-          const responseClone = response.clone()
-
-          // Consume the response body for the SVG content
-          svgString = await response.text()
-
-          // Store the cloned response in the cache
-          if (cache && 'caches' in window) {
-            const cacheStorage = await caches.open(cacheName)
-            await cacheStorage.put(src, responseClone)
-          }
-        } else {
-          // If it's not a URL (it's inline), just use the source string
-          svgString = src
-        }
-
-        // If we have valid SVG content, set it
-        if (svgString) {
-          const svg = createSvgElement(svgString)
-          if (svg) {
-            const svgStringWithProps = new XMLSerializer().serializeToString(svg)
-            setSvgMarkup(svgStringWithProps)
-          }
-        }
-      } catch (error) {
-        console.error('Error loading SVG:', error)
-      }
-    }
-
-    fetchSvg()
-  }, [src, props])
-
-  if (!svgMarkup) return null
-
-  // Parse the SVG string and return it as JSX
-  const parsedSvg = parse(svgMarkup)
-  // Sometimes parse returns an array which includes the element
-  const toBeClonedElement = Array.isArray(parsedSvg) ? parsedSvg.find((item) => React.isValidElement(item)) : parsedSvg
-  // Clone the parsed SVG element to apply the props
-  const clonedSvg = React.cloneElement(toBeClonedElement as React.ReactElement, props)
-
-  return <>{clonedSvg}</>
-}
-
-export default SVGLoader
+import React, { useState, useEffect } from 'react'
+import parse from 'html-react-parser'
+
+// Utility function to create an SVG element from a string
+const createSvgElement = (svgString: string): SVGSVGElement | null => {
+  const parser = new DOMParser()
+  const doc = parser.parseFromString(svgString, 'image/svg+xml')
+  return doc.querySelector('svg')
+}
+
+// Define the type for SVG attributes
+type SVGAttributes = React.SVGProps<SVGSVGElement>
+
+interface SVGLoaderProps extends SVGAttributes {
+  src: string
+  cache?: boolean
+}
+
+const SVGLoader: React.FC<SVGLoaderProps> | any = ({ src, cache = true, ...props }) => {
+  const [svgMarkup, setSvgMarkup] = useState<string | null>(null)
+
+  useEffect(() => {
+    if (!src) return
+    if (typeof src !== 'string') console.log({ src })
+    const isUrl = src.startsWith('http') || src.startsWith('/')
+
+    const cacheName = 'svg-cache'
+
+    const fetchSvg = async () => {
+      try {
+        let svgString: string | null = null
+
+        // Use the Cache API if caching is enabled
+        if (cache && isUrl && 'caches' in window) {
+          const cacheStorage = await caches.open(cacheName)
+          const cachedResponse = await cacheStorage.match(src)
+
+          // If SVG is found in cache, use it
+          if (cachedResponse && cachedResponse.ok) {
+            svgString = await cachedResponse.text()
+            setSvgMarkup(svgString)
+            return
+          }
+        }
+
+        // If not cached, fetch from URL
+        if (isUrl) {
+          const response = await fetch(src)
+
+          // Clone the response before consuming it
+          const responseClone = response.clone()
+
+          // Consume the response body for the SVG content
+          svgString = await response.text()
+
+          // Store the cloned response in the cache
+          if (cache && 'caches' in window) {
+            const cacheStorage = await caches.open(cacheName)
+            await cacheStorage.put(src, responseClone)
+          }
+        } else {
+          // If it's not a URL (it's inline), just use the source string
+          svgString = src
+        }
+
+        // If we have valid SVG content, set it
+        if (svgString) {
+          const svg = createSvgElement(svgString)
+          if (svg) {
+            const svgStringWithProps = new XMLSerializer().serializeToString(svg)
+            setSvgMarkup(svgStringWithProps)
+          }
+        }
+      } catch (error) {
+        console.error('Error loading SVG:', error)
+      }
+    }
+
+    fetchSvg()
+  }, [src, props])
+
+  if (!svgMarkup) return null
+
+  // Parse the SVG string and return it as JSX
+  const parsedSvg = parse(svgMarkup)
+  // Sometimes parse returns an array which includes the element
+  const toBeClonedElement = Array.isArray(parsedSvg)
+    ? parsedSvg.find((item) => React.isValidElement(item))
+    : parsedSvg
+  // Clone the parsed SVG element to apply the props
+  const clonedSvg = React.cloneElement(toBeClonedElement as React.ReactElement, props)
+
+  return <>{clonedSvg}</>
+}
+
+export default SVGLoader

package/src/components/SectionHead/SectionHead.scss

@@ -1,29 +1,29 @@
-.containerTitleDrawer {
-  height: 64px;
-  min-height: 64px;
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  align-items: center;
-  background-color: #f1f2f6;
-  padding: 0 30px 0 30px;
-  width: 100%;
-
-  span {
-    color: #12131a;
-    font-weight: 600;
-    font-size: 18px;
-    line-height: 25px;
-    letter-spacing: 0em;
-  }
-
-  svg {
-    path {
-      stroke: #000 !important;
-    }
-  }
-
-  .closeIcon {
-    cursor: pointer;
-  }
-}
+.containerTitleDrawer {
+  height: 64px;
+  min-height: 64px;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  background-color: #f1f2f6;
+  padding: 0 30px 0 30px;
+  width: 100%;
+
+  span {
+    color: #12131a;
+    font-weight: 600;
+    font-size: 18px;
+    line-height: 25px;
+    letter-spacing: 0em;
+  }
+
+  svg {
+    path {
+      stroke: #000 !important;
+    }
+  }
+
+  .closeIcon {
+    cursor: pointer;
+  }
+}

package/src/components/SectionHead/SectionHead.tsx

@@ -1,22 +1,22 @@
-import React, { type JSX } from 'react'
-import './SectionHead.scss'
-import SVGLoader from '../SVGLoader/SVGLoader'
-
-type SectionHeadProps = {
-  text: string | JSX.Element
-  closeFunction?: () => void
-  children?: JSX.Element
-  className?: string
-}
-
-const SectionHead: React.FC<SectionHeadProps> = ({ text, closeFunction, children, className = '' }: SectionHeadProps): any => {
-  return (
-    <div className={`containerTitleDrawer ${className}`}>
-      <span data-id={`${String(text)?.toUpperCase()?.replaceAll(' ', '_')}_ID`}>{text}</span>
-      {children}
-
-      {closeFunction && <SVGLoader className='closeIcon' onClick={closeFunction} width='1.5rem' height='1.5rem' />}
-    </div>
-  )
-}
-export default SectionHead
+import React, { type JSX } from 'react'
+import './SectionHead.scss'
+import SVGLoader from '../SVGLoader/SVGLoader'
+
+type SectionHeadProps = {
+  text: string | JSX.Element
+  closeFunction?: () => void
+  children?: JSX.Element
+  className?: string
+}
+
+const SectionHead: React.FC<SectionHeadProps> = ({ text, closeFunction, children, className = '' }: SectionHeadProps): any => {
+  return (
+    <div className={`containerTitleDrawer ${className}`}>
+      <span data-id={`${String(text)?.toUpperCase()?.replaceAll(' ', '_')}_ID`}>{text}</span>
+      {children}
+
+      {closeFunction && <SVGLoader className='closeIcon' onClick={closeFunction} width='1.5rem' height='1.5rem' />}
+    </div>
+  )
+}
+export default SectionHead

package/src/components/SimpleLabelValue/SimpleLabelValue.tsx

@@ -0,0 +1,31 @@
+import React from 'react'
+import './style.scss'
+
+type SimpleLabelValueProps = {
+  label?: string | JSX.Element
+  value?: string | number | JSX.Element | JSX.Element[]
+  color?: string
+  className?: string
+  dataId?: string
+}
+
+const SimpleLabelValue: React.FC<SimpleLabelValueProps> = ({
+  label,
+  value,
+  color,
+  className = '',
+  dataId,
+}: SimpleLabelValueProps) => {
+  const dataIdLabel =
+    typeof label === 'string' ? label?.toUpperCase()?.replaceAll(' ', '_') + '_LABEL_ID' : dataId
+  return (
+    <div className={`drawerItemContainer ${className}`}>
+      <span className="title" data-id={dataIdLabel}>
+        {label}
+      </span>
+      <span className={`text ${color ? `color-${color}` : ''}`}>{value}</span>
+    </div>
+  )
+}
+
+export default SimpleLabelValue

package/src/components/SimpleLabelValue/index.ts

@@ -0,0 +1 @@
+export { default } from './SimpleLabelValue'

package/src/components/SimpleLabelValue/style.scss

@@ -0,0 +1,30 @@
+@import '../global';
+
+.drawerItemContainer {
+  display: flex;
+  flex-direction: column;
+
+  .title {
+    color: #000;
+    font-weight: 600;
+    font-size: 24px;
+    line-height: 35px;
+    margin-bottom: 3px;
+    margin-top: 1.5rem;
+  }
+
+  .text {
+    color: #000;
+    font-weight: 400;
+    font-size: 24px;
+    line-height: 25px;
+  }
+
+  .color-green {
+    color: $success-static;
+  }
+
+  .color-red {
+    color: $error-static;
+  }
+}

package/src/components/Tooltip/Tooltip.scss

@@ -0,0 +1,133 @@
+.tooltip-custom-wrapper {
+  display: flex;
+}
+[data-tippy-root] {
+  z-index: 2 !important;
+}
+.tippy-box {
+  background-color: #202f5b;
+  font-size: 0.875rem;
+  border-radius: 0.3125rem;
+  width: max-content;
+  max-width: 100%;
+  overflow-wrap: break-word;
+  word-break: break-word;
+  position: relative;
+  border: 1px solid #d8dae5;
+  z-index: 2;
+
+  &.function {
+    .tippy-content {
+      background-color: #fff !important;
+      color: #000 !important;
+    }
+
+    &[data-placement] > .tippy-arrow:before {
+      color: #fff !important;
+    }
+  }
+
+  &.info {
+    .tippy-arrow {
+      color: #202f5b;
+    }
+  }
+
+  &.success {
+    border-radius: 1.875rem;
+    background-color: #3aaa35;
+    padding-inline: 0.625rem;
+  }
+
+  .tippy-content {
+    text-align: justify;
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+    padding: 0.625rem;
+  }
+
+  .tippy-arrow {
+    position: relative;
+    width: 1rem;
+    height: 1rem;
+  }
+
+  &[data-placement^='top'] {
+    .tippy-arrow:before {
+      bottom: -0.4375rem;
+      border-width: 0.5rem 0.5rem 0 !important;
+    }
+  }
+
+  &[data-placement^='right'] {
+    .tippy-arrow:before {
+      left: -0.4375rem;
+      border-width: 0.5rem 0.5rem 0.5rem 0 !important;
+    }
+  }
+
+  &[data-placement^='bottom'] {
+    .tippy-arrow:before {
+      top: -0.4375rem;
+      border-width: 0 0.5rem 0.5rem !important;
+    }
+  }
+
+  &[data-placement^='left'] {
+    .tippy-arrow:before {
+      right: -0.4375rem;
+      border-width: 0.5rem 0 0.5rem 0.5rem !important;
+    }
+  }
+
+  &[data-placement^='bottom-start'] {
+    .tippy-arrow {
+      transform: translate(0.937rem, 0) !important;
+    }
+  }
+
+  &[data-placement^='bottom-end'] {
+    .tippy-arrow {
+      margin-left: calc(100% - 1.937rem);
+      transform: translate(0, 0) !important;
+    }
+  }
+
+  &[data-placement^='top-start'] {
+    .tippy-arrow {
+      transform: translate(0.937rem, 0) !important;
+    }
+  }
+
+  &[data-placement^='top-end'] {
+    .tippy-arrow {
+      transform: translate(0.937rem, 0) !important;
+    }
+  }
+
+  &.arrow-with-border {
+    border: 1px solid #d8dae5;
+
+    &[data-placement] {
+      .tippy-arrow {
+        top: 1px;
+        background-color: white;
+        z-index: 2;
+        height: 1px;
+
+        &:before {
+          width: 0.625rem;
+          height: 0.625rem;
+          background-color: white;
+          transform: rotate(45deg);
+          border: none;
+          border-left: 1px solid #d8dae5 !important;
+          border-top: 1px solid #d8dae5 !important;
+          z-index: 2;
+          top: -0.45rem;
+          transform-origin: center !important;
+        }
+      }
+    }
+  }
+}

package/src/components/Tooltip/Tooltip.tsx

@@ -0,0 +1,85 @@
+import React, { useState, useEffect, ReactNode } from 'react'
+import Tippy, { TippyProps } from '@tippyjs/react'
+import 'tippy.js/dist/tippy.css'
+import './Tooltip.scss'
+
+interface TooltipProps extends TippyProps {
+  content: ReactNode
+  success?: boolean
+  onMouseEnter?: (event: React.MouseEvent<HTMLDivElement>) => void
+  onMouseLeave?: (event: React.MouseEvent<HTMLDivElement>) => void
+  visible?: boolean
+  delay?: [number, number]
+  type?: 'info' | 'function'
+  maxWidth?: number
+  className?: string
+  arrowWithBorder?: boolean
+  disabled?: boolean
+}
+
+const Tooltip: React.FC<TooltipProps> = ({
+  children,
+  content,
+  success,
+  onMouseEnter,
+  onMouseLeave,
+  visible,
+  delay = [200, 400],
+  type = 'info',
+  maxWidth = 390,
+  className,
+  arrowWithBorder,
+  disabled,
+  ...props
+}) => {
+  const [rootFontSize, setRootFontSize] = useState(16)
+
+  useEffect(() => {
+    const handleFontSizeChange = (fontSize: number) => {
+      setRootFontSize((prev) => (prev !== fontSize ? fontSize : prev))
+    }
+
+    if (
+      // @ts-ignore - Ignoring if `applicationUIScaling` doesn't exist
+      window.applicationUIScaling &&
+      // @ts-ignore - Ignoring if `applicationUIScaling` doesn't exist
+      typeof window.applicationUIScaling.addEventHandler === 'function'
+    ) {
+      // @ts-ignore - Ignoring if `applicationUIScaling` doesn't exist
+      window.applicationUIScaling.addEventHandler(handleFontSizeChange)
+    }
+  }, [])
+
+  return (
+    <Tippy
+      visible={visible}
+      allowHTML={typeof content !== 'string'}
+      interactive
+      maxWidth={(maxWidth / 16) * rootFontSize}
+      delay={delay}
+      content={content}
+      placement="bottom-start"
+      className={`${success ? 'success' : ''} ${type} ${className || ''} ${
+        arrowWithBorder ? 'arrow-with-border' : ''
+      }`}
+      disabled={disabled}
+      {...props}
+    >
+      <div
+        className="tooltip-custom-wrapper"
+        onMouseEnter={onMouseEnter}
+        onMouseLeave={onMouseLeave}
+      >
+        <div
+          className="tooltip-custom-wrapper"
+          onMouseEnter={onMouseEnter}
+          onMouseLeave={onMouseLeave}
+        >
+          {children}
+        </div>
+      </div>
+    </Tippy>
+  )
+}
+
+export default Tooltip