@dartech/arsenal-ui 1.2.5 → 1.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dartech/arsenal-ui",
-  "version": "1.2.5",
+  "version": "1.3.0",
   "author": "DAR",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"

package/project.json

@@ -51,11 +51,6 @@
           "@uiw/react-codemirror"
         ],
         "assets": [
-          {
-            "glob": "packages/arsenal-ui/src/assets/fonts/Euclid",
-            "input": ".",
-            "output": "./src/assets/fonts"
-          },
           {
             "glob": "packages/arsenal-ui/src/assets/chevron_left.svg",
             "input": ".",

package/src/theme/baseTheme.ts

@@ -1,14 +1,4 @@
 import { createTheme } from '@mui/material/styles';
-import Euclid from '../assets/fonts/Euclid/EuclidCircularB-Regular.woff2'; 
-import EuclidItalic from '../assets/fonts/Euclid/EuclidCircularB-RegularItalic.woff2'; 
-import EuclidBold from '../assets/fonts/Euclid/EuclidCircularB-Bold.woff2'; 
-import EuclidBoldItalic from '../assets/fonts/Euclid/EuclidCircularB-BoldItalic.woff2'; 
-import EuclidLight from '../assets/fonts/Euclid/EuclidCircularB-Light.woff2'; 
-import EuclidLightItalic from '../assets/fonts/Euclid/EuclidCircularB-LightItalic.woff2'; 
-import EuclidMedium from '../assets/fonts/Euclid/EuclidCircularB-Medium.woff2'; 
-import EuclidMediumItalic from '../assets/fonts/Euclid/EuclidCircularB-MediumItalic.woff2'; 
-import EuclidSemiBold from '../assets/fonts/Euclid/EuclidCircularB-Semibold.woff2'; 
-import EuclidSemiBoldItalic from '../assets/fonts/Euclid/EuclidCircularB-SemiboldItalic.woff2'; 
 
 const baseThemeOptions = {
   spacing: 4,
@@ -24,20 +14,17 @@ const baseThemeOptions = {
       light: '#cbe8ee',
     },
     text: {
-      disabled: '#A9A9B8'
-
+      disabled: '#A9A9B8',
     },
     success: {
       main: '#2DB77B',
       light: '#DBFCEE',
     },
     grey: {
-      700: '#101F2B'
-    }
-
+      700: '#101F2B',
+    },
   },
   typography: {
-    fontFamily: 'Euclid,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"',
     fontSize: 14,
     h1: {
       fontWeight: 400,
@@ -47,82 +34,8 @@ const baseThemeOptions = {
     },
     h4: {
       fontWeight: 500,
-    }
+    },
   },
-  components: {
-    MuiCssBaseline: {
-      styleOverrides: `
-        @font-face {
-          font-family: 'Euclid';
-          font-display: swap;
-          src: url(${EuclidLight}) format('woff2');
-          font-weight: 300;
-        }
-        @font-face {
-          font-family: 'Euclid';
-          font-display: swap;
-          src: url(${EuclidLightItalic}) format('woff2');
-          font-weight: 300;
-          font-style: italic;
-        }
-        @font-face {
-          font-family: 'Euclid';
-          font-display: swap;
-          src: url(${Euclid}) format('woff2');
-          font-weight: 400;
-        }
-        @font-face {
-          font-family: 'Euclid';
-          font-display: swap;
-          src: url(${EuclidItalic}) format('woff2');
-          font-weight: 400;
-          font-style: italic;
-        }
-        @font-face {
-          font-family: 'Euclid';
-          font-display: swap;
-          src: url(${EuclidMedium}) format('woff2');
-          font-weight: 500;
-        }
-
-        @font-face {
-          font-family: 'Euclid';
-          font-display: swap;
-          src: url(${EuclidMediumItalic}) format('woff2');
-          font-style: italic;
-          font-weight: 500;
-        }
-        @font-face {
-          font-family: 'Euclid';
-          font-display: swap;
-          src: url(${EuclidSemiBold}) format('woff2');
-          font-weight: 600;
-        }
-        @font-face {
-          font-family: 'Euclid';
-          font-display: swap;
-          src: url(${EuclidSemiBoldItalic}) format('woff2');
-          font-style: italic;
-          font-weight: 600;
-        }
-        @font-face {
-          font-family: 'Euclid';
-          font-display: swap;
-          src: url(${EuclidBold}) format('woff2');
-          font-weight: 700;
-        }
-
-        @font-face {
-          font-family: 'Euclid';
-          font-display: swap;
-          src: url(${EuclidBoldItalic}) format('woff2');
-          font-style: italic;
-          font-weight: 700;
-        }
-
-      `
-    }
-  }
 };
 
 export default createTheme(baseThemeOptions);

package/src/utils/ui-utils.tsx

@@ -3,64 +3,39 @@ import SvgIcon from '@mui/material/SvgIcon';
 import Tooltip from '@mui/material/Tooltip';
 import { CopyButton, Status } from '../lib';
 import { format } from 'date-fns';
-import { StatusVariant, TableDataType } from '../interfaces';
+import { StatusVariant } from '../interfaces';
 import JsonTypeCell from '../lib/Table/DataGrid/JsonTypeCell';
 
-export const formatTableRowValue = ({
-  value,
-  type,
-  copyText,
-  status,
-}: {
+type TableFormatProps = {
   value: any;
-  type?: TableDataType;
-  copyText?: string;
-  status?: StatusVariant;
-}) => {
-  switch (type) {
-    case 'id':
-      return (
-        <Box display="flex" alignItems="center" minWidth="100%">
-          <Tooltip title={value}>
-            <Box mr="auto">
-              {value
-                ? `${(value as string).slice(0, 6)}...${(value as string).slice(
-                    -6
-                  )}`
-                : '...'}
-            </Box>
-          </Tooltip>
-
-          <CopyButton copyText={(copyText ? copyText : value) as string} />
-        </Box>
-      );
-    case 'JSON_copy':
-      return <JsonTypeCell value={value} copyButton />;
-    case 'JSON':
-      return <JsonTypeCell value={value} />;
-    case 'JSON_text':
-      return <JsonTypeCell value={value} textField />;
-    case 'copy':
-      return (
-        <Box display="flex" alignItems="center" minWidth="100%">
-          <Tooltip title={value}>
-            <Box
-              mr="auto"
-              overflow="hidden"
-              textOverflow="ellipsis"
-              whiteSpace="nowrap"
-            >
-              {value?.length > 12
-                ? `${(value as string).slice(0, 6)}...${(value as string).slice(
-                    -6
-                  )}`
-                : value}
-            </Box>
-          </Tooltip>
+  canCopy?: boolean;
+  copyValue?: string;
+  shortId?: boolean;
+  fullText?: boolean;
+  textParams?: {
+    displayAs?:
+      | 'text'
+      | 'boolean'
+      | 'date'
+      | 'status'
+      | 'json_text'
+      | 'json_code'
+      | 'array'
+      | 'number';
+    dateFormat?: string[];
+    statusVariant?: StatusVariant;
+  };
+};
 
-          <CopyButton copyText={(copyText ? copyText : value) as string} />
-        </Box>
-      );
+export const formatTableRowValue = ({
+  value,
+  canCopy,
+  copyValue,
+  shortId,
+  fullText,
+  textParams: { displayAs = 'text', dateFormat, statusVariant },
+}: TableFormatProps) => {
+  switch (displayAs) {
     case 'boolean':
       return value ? (
         <SvgIcon color="primary" fontSize="small">
@@ -73,15 +48,32 @@ export const formatTableRowValue = ({
       );
     case 'date':
       return value ? (
-        <div>
-          <div>{format(new Date(value as string), 'dd.MM.yyyy')}</div>
-          <div>{format(new Date(value as string), 'HH:mm:ss')}</div>
-        </div>
+        dateFormat ? (
+          <Box>
+            {dateFormat.map((formatString) => (
+              <Box>{format(new Date(value as string), formatString)}</Box>
+            ))}
+          </Box>
+        ) : (
+          <Box>
+            <Box>{format(new Date(value as string), 'dd.MM.yyyy')}</Box>
+            <Box>{format(new Date(value as string), 'HH:mm:ss')}</Box>
+          </Box>
+        )
       ) : (
         ''
       );
     case 'status':
-      return <Status text={value as string} status={status} />;
+      return (
+        <Status
+          text={value as string}
+          status={statusVariant ? statusVariant : 'default'}
+        />
+      );
+    case 'json_text':
+      return <JsonTypeCell value={value} textField />;
+    case 'json_code':
+      return <JsonTypeCell value={value} copyButton />;
     case 'array':
       return (
         <Box>
@@ -90,13 +82,53 @@ export const formatTableRowValue = ({
           ))}
         </Box>
       );
-    default:
+    case 'number':
       return (
-        <Tooltip title={value}>
-          <div className="MuiDataGrid-cellContent" title={value}>
-            {value}
-          </div>
-        </Tooltip>
+        <Box display="flex" justifyContent="flex-end">
+          <Box>
+            {value.toLocaleString('ru-Ru', { minimumFractionDigits: 2 })}
+          </Box>
+        </Box>
+      );
+    case 'text':
+    default:
+      return value ? (
+        <Box display="flex" alignItems="center" width="100%">
+          {shortId ? (
+            <Tooltip title={value}>
+              <Box mr="auto">
+                {value
+                  ? `${(value as string).slice(0, 6)}...${(
+                      value as string
+                    ).slice(-6)}`
+                  : '...'}
+              </Box>
+            </Tooltip>
+          ) : fullText ? (
+            <Box sx={{ whiteSpace: 'normal' }} title={value}>
+              {typeof value === 'string' ? value : JSON.stringify(value)}
+            </Box>
+          ) : (
+            <Tooltip title={value}>
+              <Box className="MuiDataGrid-cellContent" title={value}>
+                {typeof value === 'string' ? value : JSON.stringify(value)}
+              </Box>
+            </Tooltip>
+          )}
+          {canCopy && (
+            <CopyButton
+              copyText={
+                copyValue
+                  ? typeof copyValue === 'string'
+                    ? copyValue
+                    : JSON.stringify(copyValue)
+                  : value
+              }
+            />
+          )}
+        </Box>
+      ) : (
+        ''
       );
   }
 };