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

package/src/components/SVGLoader/SVGLoader.tsx

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

package/src/components/SectionHead/SectionHead.tsx

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

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/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

package/src/components/dialog/dialog.ts

@@ -0,0 +1,61 @@
+import { JSX } from 'react'
+
+export type DialogStatus = 'error' | 'info' | 'warning'
+export type DialogSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl'
+export type ButtonType = 'text' | 'submit' | 'reset'
+export type ButtonVariant = 'outlined' | 'contained' | 'text' | 'link'
+export type ButtonColor =
+  | 'inherit'
+  | 'primary'
+  | 'secondary'
+  | 'success'
+  | 'error'
+  | 'info'
+  | 'warning'
+  | 'action'
+  | 'normal'
+export type ButtonSize = 'small' | 'medium' | 'large'
+
+export interface BaseActionButtonProps {
+  text: string
+  color?: ButtonColor
+  variant?: ButtonVariant
+  type?: ButtonType
+  size?: ButtonSize
+  id?: string
+  className?: string
+  disabled?: boolean
+  startIcon?: JSX.Element
+  endIcon?: JSX.Element
+  dataId?: string
+  loading?: boolean
+  fullWidth?: boolean
+  active?: boolean
+  onKeyDown?: () => void
+}
+
+export interface SubmitButtonProps extends BaseActionButtonProps {
+  onClick: () => void // Required for submit
+}
+
+export interface CancelButtonProps extends BaseActionButtonProps {
+  onClick?: () => void // Optional for cancel
+}
+
+export interface CommonDialogProps {
+  status?: DialogStatus
+  content?: React.ReactElement
+  onSubmit?: SubmitButtonProps
+  onCancel?: CancelButtonProps
+  onClose: () => void
+  open?: boolean
+  icon?: JSX.Element | boolean
+  size?: DialogSize
+  children?: React.ReactElement
+  statusTitle?: boolean
+  isSubmitDisabled?: boolean
+  submitBtnComponent?: JSX.Element | null
+  withClose?: boolean
+  noActions?: boolean
+  closeIcon?: JSX.Element
+}

package/src/components/dialog/index.tsx

@@ -0,0 +1,88 @@
+import React from 'react'
+// @ts-ignore
+import { Dialog, Button } from 'digitinary-ui'
+import SVGLoader from '../SVGLoader/SVGLoader'
+import './style.scss'
+import { CommonDialogProps } from './dialog'
+import { Closecircle, InfoIcon } from './../../assets/icons'
+
+const CommonDialog = ({
+  status = 'info',
+  content,
+  onSubmit,
+  onCancel,
+  onClose,
+  open,
+  size = 'xs',
+  icon = (
+    <>
+      <SVGLoader src={InfoIcon} width="4.0625rem" height="4.0625rem" />
+    </>
+  ),
+  noActions = false,
+  closeIcon,
+}: CommonDialogProps) => {
+  const handleClose = () => {
+    onClose() // Always close the dialog first
+
+    if (onCancel && onCancel.onClick) {
+      onCancel.onClick() // If onCancel.onClick is provided, invoke it after closing the dialog
+    }
+  }
+
+  const body = (
+    <div className="common-dialog">
+      {icon && (
+        <div className="confirmation-dialog-header">
+          <div className={`icon ${status}`}>{icon}</div>
+        </div>
+      )}
+      <div className="close-icon">
+        {closeIcon ?? (
+          <SVGLoader src={Closecircle} width={'1.5rem'} height={'1.5rem'} onClick={handleClose} />
+        )}
+      </div>
+
+      {content}
+      {!!noActions ? null : (
+        <div
+          className="confirmation-dialog-footer"
+          style={{ marginBottom: onCancel || onSubmit ? '1.5rem' : '1rem' }}
+        >
+          {onCancel && (
+            <Button
+              {...onCancel}
+              onClick={handleClose}
+              variant={onCancel.variant || 'outlined'}
+              color={onCancel.color || 'normal'}
+            >
+              {onCancel.text}
+            </Button>
+          )}
+          {onSubmit && (
+            <Button
+              {...onSubmit}
+              variant={onSubmit.variant || 'contained'}
+              color={onSubmit.color || 'secondary'}
+            >
+              {onSubmit.text}
+            </Button>
+          )}
+        </div>
+      )}
+    </div>
+  )
+
+  return (
+    <Dialog
+      open={open}
+      onClose={handleClose}
+      content={body}
+      fullWidth={false}
+      size={size}
+      id="common-dialog"
+    />
+  )
+}
+
+export default CommonDialog