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

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

package/src/components/dialog/style.scss

@@ -0,0 +1,188 @@
+#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;
+          }
+        }
+      }
+    }
+  }
+}
+.common-dialog {
+  position: relative;
+
+  .close-icon {
+    position: absolute !important;
+    z-index: 1 !important;
+    top: 0.75rem !important;
+    right: 0.4rem !important;
+    transform: translate(0.625rem, -0.625rem) !important;
+    cursor: pointer !important;
+  }
+
+  .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;
+  }
+}