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

package/src/components/Tooltip/Tooltip.tsx

@@ -0,0 +1,86 @@
+import React, { useState, useEffect, ReactNode } from 'react'
+import Tippy from '@tippyjs/react'
+import 'tippy.js/dist/tippy.css'
+import './Tooltip.scss'
+
+interface TooltipProps {
+  children: ReactNode
+  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/_global.scss

@@ -0,0 +1,338 @@
+:root {
+    //---------- Gradient colors ----------\\
+  
+    --white: #fff;
+    --Gray-5: #f1f2f6;
+    --Gray-10: #ebecf2;
+    --Gray-20: #d8dae5;
+    --Gray-30: #babdcc;
+    --Gray-40: #9a9eb2;
+    --Gray-50: #828699;
+    --Gray-60: #696c80;
+    // TODO: will remove unused colors
+    // --Gray-70: #515466;
+    // --Gray-80: #3a3d4d;
+    // --Gray-90: #252833;
+    // --Gray-95: #4d4d4d;
+    --Gray-100: #12131a;
+    --black: #000;
+  
+    // Primary color
+  
+    --primary-static: #4d75d8;
+    --primary-hover: #7c9bea;
+    --primary-active: #2c4fa4;
+    --primary-disabled: #9a9eb2;
+  
+    //--------------------\\
+  
+    // Secondary color
+  
+    --secondary-static: #40e0d0;
+    --secondary-hover: #9efcf2;
+    --secondary-active: #2fa599;
+  
+    //--------------------\\
+  
+    // Error color
+  
+    --error-static: #da3f3f; // #da3f3f
+    --error-hover: #e75d5d; // #e75d5d
+    --error-active: #bb3232; // #bb3232
+  
+    //--------------------\\
+  
+    // Success color
+  
+    --success-static: #3aaa35;
+    --success-hover: #5cda56;
+    --success-active: #2a8a25;
+  
+    //--------------------\\
+  
+    // Info color
+  
+    --info-static: #c6c6c6;
+    --info-hover: #e4e4e4;
+    --info-active: #979797;
+  
+    //--------------------\\
+  
+    // Warning color
+  
+    --warning-static: #faad14;
+    --warning-hover: #f9be4a;
+    --warning-active: #db9711;
+  
+    //--------------------\\
+  
+    // Action color
+  
+    --action-static: #142452;
+    --action-hover: #21387d;
+    --action-active: #000000;
+  
+    --color-info-primary: #3a6cd1;
+  
+    //<<<<<<<<<<<<<<<<()>>>>>>>>>>>>>>>>\\
+  
+    //---------- Font colors ----------\\
+  
+    --primary-font-color: #142452;
+    --placeholder-font-color: #babdcc;
+    --warning-font-color: #ce2828;
+  
+    //<<<<<<<<<<<<<<<<()>>>>>>>>>>>>>>>>\\
+  
+    //---------- Component based colors ----------\\
+  
+    // Alert component Colors
+  
+    --alert-error: #da3f3f;
+    --alert-light-error: #f4c5c5;
+    --alert-success: #3aaa35;
+    --alert-light-success: #c4e5c2;
+    --alert-info: #8eaaf1;
+    --alert-light-info: #c4d3f1;
+    --alert-warning: #faad14;
+    --alert-light-warning: #fde6b8;
+  
+    // Simple Collapse component colors
+    --border-focus: #3a6cd1;
+  
+    // Tooltip component colors
+    --tooltip-background-color: #202f5b;
+  
+    //---------- General status colors ----------\\
+  
+    //******************************************************************
+  
+    --text-color-primary: #142452;
+    --text-color-secondary: #ffff;
+    --text-color-neutral: #828699;
+    --text-color-tertiary: #808080;
+    --text-color-note: #242424;
+    --text-color-quaternary: #142452;
+    --text-color-disabled: #ffff;
+  
+    --background-color-white-primary: #fff;
+    --background-color-light-primary: #8eaaf1;
+    --background-color-white-secondary: #fff;
+    --background-color-primary-dark: #142452;
+    --background-color-gray-5: #f1f2f6;
+    --background-color-gray-30: #ebecf2;
+    --background-color-tertiary-light: #2c4fa4;
+    --background-color-gray-10: #f1f2f6;
+    --background-color-gray-40: #ebecf2;
+    --background-color-light-blue: #dfe7f8; // dark mode
+  
+    --border-color-primary: #babdcc;
+    --border-color-secondary: #d8dae5;
+    --border-color-neutral: #ebecf2;
+    --border-color-tertiary: #ebecf2;
+    --border-color-gray: #ebecf2;
+    --border-color-hover: #142452;
+    --border-color-active: #3a6cd1;
+  
+    --icon-color-main: #142452;
+    --icon-color-secondary: #000;
+    --icon-color-quaternary: #babdcc;
+    --icon-color-disabled: #9a9eb2;
+    --link-btn-primary-color: #3a6cd1;
+    --button-color-static: #4d75d8;
+    --button-color-hover: #7c9bea;
+    --button-color-active: #2c4fa4;
+  
+    --alert-natural: #c4d3f1;
+  }
+  
+  //----------------------------------------------Arena Components Colors--------------------------------//
+  //---------- Gradient colors ----------\\
+  
+  $white: #fff;
+  $Gray-5: #f1f2f6;
+  $Gray-10: #ebecf2;
+  $Gray-20: #d8dae5;
+  $Gray-30: #babdcc;
+  $Gray-40: #9a9eb2;
+  $Gray-50: #828699;
+  $Gray-60: #696c80;
+  $Gray-70: #515466;
+  $Gray-80: #3a3d4d;
+  $Gray-90: #252833;
+  $Gray-95: #4d4d4d;
+  $Gray-100: #12131a;
+  $black: #000;
+  
+  // Function Colors Buttons & Navigations
+  
+  // Primary color
+  
+  $primary-static: var(--primary-static);
+  $primary-hover: var(--primary-hover);
+  $primary-active: var(--primary-active);
+  $primary-disabled: var(--primary-disabled);
+  
+  //--------------------\\
+  
+  // Secondary color
+  
+  $secondary-static: var(--secondary-color-main);
+  $secondary-hover: var(--secondary-color-light);
+  $secondary-active: darken(#40e0d0, 10%);
+  
+  //--------------------\\
+  
+  // Error color
+  
+  $error-static: var(--color-error);
+  $error-hover: var(--hover-error);
+  $error-active: var(--active-error);
+  
+  //--------------------\\
+  
+  // Success color
+  
+  $success-static: var(--color-success);
+  $success-hover: var(--hover-success);
+  $success-active: var(--active-success);
+  
+  //--------------------\\
+  
+  // Info color
+  
+  $info-static: #c6c6c6;
+  $info-hover: #e4e4e4;
+  $info-active: #979797;
+  
+  //--------------------\\
+  
+  // Warning color
+  
+  $warning-static: var(--color-warning);
+  $warning-hover: var(--hover-warning);
+  $warning-active: var(--active-warning);
+  
+  //--------------------\\
+  
+  // Action color
+  
+  $action-static: var(--btn-action-color);
+  $action-hover: var(--btn-action-hover);
+  $action-active: var(--btn-action-active);
+  
+  //<<<<<<<<<<<<<<<<()>>>>>>>>>>>>>>>>\\
+  
+  //---------- Font colors ----------\\
+  
+  $primary-font-color: var(--text-color-primary);
+  $placeholder-font-color: #babdcc;
+  $disabled-font-color: #d8dae5;
+  $warning-font-color: #ce2828;
+  
+  //<<<<<<<<<<<<<<<<()>>>>>>>>>>>>>>>>\\
+  
+  //---------- Component based colors ----------\\
+  
+  // Alert component Colors
+  
+  $alert-error: var(--alert-error);
+  $alert-success: var(--alert-success);
+  $alert-info: var(--alert-info);
+  $alert-warning: var(--alert-warning);
+  $alert-general: var(--alert-general);
+  $alert-light-error: var(--alert-light-error);
+  $alert-light-warning: var(--alert-light-warning);
+  $alert-light-info: var(--alert-light-info);
+  $alert-light-success: var(--alert-light-success);
+  $alert-light-general: var(--alert-light-general);
+  
+  // Chip component colors
+  
+  $chip-blue: #4d75d8;
+  $chip-dark-blue: #142452;
+  $chip-gray: #9a9eb2;
+  $chip-light-gray: #ebecf2;
+  $chip-lighter-gray: #d8dae5;
+  $chip-black: #000;
+  $chip-light-gray-active: #696c80;
+  $color-info-primary: var(--color-info-primary);
+  
+  // Chart component colors
+  
+  $bar-tooltip: #ebecf2ff;
+  
+  // Loader component colors
+  
+  $loader-background: #ffffff00;
+  $loader-color: #0300b9;
+  
+  // Tooltip component colors
+  
+  $tooltip-background-color: #202f5b;
+  
+  // Simple Collapse component colors
+  
+  $simple-collapse-dropdown-background: rgba(235, 236, 242, 0.3);
+  
+  //---------- General status colors ----------\\
+  
+  //******************************************************************
+  
+  $text-color-primary: var(--text-color-primary);
+  $text-color-secondary: var(--text-color-secondary);
+  $text-color-neutral: var(--text-color-neutral);
+  $text-color-tertiary: var(--text-color-tertiary);
+  $text-color-info: var(--text-color-info);
+  $text-color-note: var(--text-color-note);
+  $text-color-quaternary: var(--text-color-quaternary);
+  $text-color-success: var(--text-color-success);
+  $text-color-error: var(--text-color-error);
+  $text-color-warning: var(--text-color-warning);
+  $text-color-info: var(--text-color-info);
+  $text-color-success: var(--text-color-success);
+  $text-color-error: var(--text-color-error);
+  $text-color-warning: var(--text-color-warning);
+  $text-color-info: var(--text-color-info);
+  $text-color-disabled: var(--text-color-disabled);
+  $text-color-gray-dark: var(--text-color-gray-dark);
+  
+  $background-color-white-primary: var(--background-color-white-primary);
+  $background-color-light-primary: var(--background-color-light-primary);
+  $background-color-white-tertiary: var(--background-color-white-tertiary);
+  $background-color-white-secondary: var(--background-color-white-secondary);
+  $background-color-primary-light: var(--background-color-primary-light);
+  $background-color-tertiary-dark: var(--background-color-tertiary-dark);
+  $background-color-gray-50: var(--background-color-gray-50);
+  $background-color-secondary-light: var(--background-color-secondary-light);
+  $background-color-white-tertiary: var(--background-color-gray-40);
+  $background-color-primary-dark: var(--background-color-primary-dark);
+  $background-color--secondary-dark: var(--background-color-10);
+  $background-color-gray-5: var(--background-color-gray-5);
+  $background-color-gray-20: var(--background-color-gray-20);
+  $background-color-black-primary: var(--background-color-black-primary);
+  $background-color-gray-30: var(--background-color-gray-30);
+  $background-color-tertiary-light: var(--background-color-tertiary-light);
+  $background-color-gray-10: var(--background-color-gray-10);
+  $background-color-gray-40: var(--background-color-gray-40);
+  $background-color-white-light: var(--background-color-white-light);
+  $background-color-gray-60: var(--background-color-gray-60);
+  
+  $border-color-primary: var(--border-color-primary);
+  $border-color-secondary: var(--border-color-secondary);
+  $border-color-neutral: var(--border-color-neutral);
+  $border-color-tertiary: var(--border-color-tertiary);
+  $border-color-gray: var(--border-color-gray);
+  $border-color-hover: var(--border-color-hover);
+  $border-color-active: var(--border-color-active);
+  
+  $icon-color-main: var(--icon-color-main);
+  $icon-color-secondary: var(--icon-color-secondary);
+  $icon-color-tertiary: var(--icon-color-tertiary);
+  $icon-color-quaternary: var(--icon-color-quaternary);
+  $icon-color-disabled: var(--icon-color-disabled);
+  $link-btn-primary-color: var(--link-btn-primary-color);
+  $button-color-static: var(--button-color-static);
+  $button-color-hover: var(--button-color-hover);
+  $button-color-active: var(--button-color-active);
+  

package/src/components/dialog/dialog.ts

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

package/src/components/dialog/index.tsx

@@ -0,0 +1,85 @@
+import React from 'react'
+// @ts-ignore
+import { Dialog, Button, CloseIcon, infoIcon } from '@digi-frontend/dgate-ui'
+import SVGLoader from '../SVGLoader/SVGLoader'
+import './style.scss'
+import { CommonDialogProps } from './dialog'
+
+const CommonDialog = ({
+  status = 'info',
+  content,
+  onSubmit,
+  onCancel,
+  onClose,
+  open,
+  size = 'xs',
+  icon = (
+    <>
+      <SVGLoader src={infoIcon} width="4.0625rem" height="4.0625rem" />
+    </>
+  ),
+}: 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>
+      )}
+      <SVGLoader
+        src={CloseIcon}
+        width={'1.5rem'}
+        height={'1.5rem'}
+        onClick={handleClose}
+        className="close-icon"
+      />
+
+      {content}
+      <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

package/src/components/dialog/style.scss

@@ -0,0 +1,104 @@
+#common-dialog {
+  &.dialog-content-wrapper {
+    overflow: visible !important;
+    max-height: 100%;
+    width: 22.1875rem;
+
+    .dialog-content-root {
+      overflow: visible !important;
+      border-radius: 0.625rem;
+      max-height: 100%;
+
+      .dialog-content {
+        padding: 0 1.875rem !important;
+        overflow: visible !important;
+        max-height: 100%;
+
+        .common-dialog {
+          position: relative;
+
+          .close-icon {
+            position: absolute;
+            z-index: 1;
+            top: 1.5rem;
+            right: 0;
+            transform: translate(0.625rem, -0.625rem);
+            cursor: pointer;
+          }
+
+          .confirmation-dialog-header {
+            display: flex;
+            padding-top: 0.5rem;
+            position: relative;
+
+            .icon {
+              margin-top: 1rem;
+              margin-bottom: 1.5rem;
+              margin-inline: auto;
+
+              &.info {
+                path {
+                  stroke: #12131a;
+                }
+
+                line {
+                  stroke: #12131a;
+
+                  & + path {
+                    fill: #12131a;
+                  }
+                }
+              }
+
+              &.warning {
+                path {
+                  stroke: #faad14;
+                }
+
+                line {
+                  stroke: #faad14;
+                }
+              }
+
+              &.error {
+                path {
+                  stroke: #da3f3f;
+                }
+
+                line {
+                  stroke: #da3f3f;
+
+                  & + path {
+                    fill: #da3f3f;
+                  }
+                }
+              }
+            }
+          }
+
+          .confirmation-title {
+            font-size: 1.5rem;
+            font-weight: 500;
+            line-height: 1.875rem;
+            text-align: center;
+            margin-bottom: 0.625rem;
+
+            &.error-title {
+              color: #da3f3f;
+            }
+
+            &.warning-title {
+              color: #faad14;
+            }
+          }
+
+          .confirmation-dialog-footer {
+            display: flex;
+            gap: 1.25rem;
+            margin-top: 1.875rem;
+          }
+        }
+      }
+    }
+  }
+}