feat(dataformat): add dataformat

Signed-off-by: Sudhanshu Dasgupta <[email protected]>

packages/components/package.json

@@ -32,13 +32,15 @@
     "@emotion/styled": "^11.11.0",
     "@mui/icons-material": "^5.14.12",
     "@mui/material": "^5.14.16",
+    "@types/lodash": "^4.14.202",
     "@types/mui-datatables": "^4.3.6",
     "@types/react": "^18.2.15",
     "@types/react-dom": "^18.2.7",
     "@typescript-eslint/eslint-plugin": "^6.0.0",
     "@typescript-eslint/parser": "^6.0.0",
     "eslint": "^8.45.0",
     "eslint-plugin-react": "^7.33.2",
+    "lodash": "^4.17.21",
     "mui-datatables": "^4.3.0",
     "notistack": "^3.0.1",
     "tsup": "^7.2.0",

packages/components/src/custom/DataFormatter.tsx

@@ -0,0 +1,116 @@
+// import _ from 'lodash';
+import { truncate } from 'lodash';
+import React from 'react';
+import { Box } from '../base/Box';
+import { IconButton } from '../base/IconButton';
+import { Tooltip } from '../base/Tooltip';
+import { Typography } from '../base/Typography';
+import {CloneIcon} from '@layer5/sistent-svg'
+// import { Launch as LaunchIcon } from '@material-ui/icons';
+// import { isEmptyAtAllDepths } from '../../utils/objects';
+
+// interface FormatterContextProps {
+//   propertyFormatters: Record<string, any>; // Adjust the type accordingly
+// }
+
+// const FormatterContext = createContext<FormatterContextProps>({
+//   propertyFormatters: {},
+// });
+
+// const LevelContext = createContext<number>(0);
+
+// interface LevelProps {
+//   children: React.ReactNode;
+// }
+
+// const Level: React.FC<LevelProps> = ({ children }) => {
+//   const level = useContext(LevelContext);
+//   return <LevelContext.Provider value={level + 1}>{children}</LevelContext.Provider>;
+// };
+
+export const formatDate = (date: string): string => {
+  const options: Intl.DateTimeFormatOptions = { year: 'numeric', month: 'short', day: 'numeric' };
+  const formattedDate = new Date(date).toLocaleDateString('en-US', options);
+  return formattedDate;
+};
+
+export const formatTime = (date: string): string => {
+  const options: Intl.DateTimeFormatOptions = {
+    hour: 'numeric',
+    minute: 'numeric',
+    second: 'numeric'
+  };
+  const formattedTime = new Date(date).toLocaleTimeString('en-US', options);
+  return formattedTime;
+};
+
+export const formatDateTime = (date: string): string => {
+  const formattedDate = formatDate(date);
+  const formattedTime = formatTime(date);
+  return `${formattedDate} ${formattedTime || ''}`;
+};
+
+interface FormattedDateProps {
+  date: string;
+}
+
+export const FormattedDate: React.FC<FormattedDateProps> = ({ date }) => {
+  return (
+    <Tooltip title={formatDateTime(date)} placement="top">
+      <div>
+        <Typography
+          variant="body1"
+          style={{
+            wordWrap: 'break-word',
+            color: '#000000',
+            textTransform: 'capitalize'
+          }}
+        >
+          {formatDate(date)}
+        </Typography>
+      </div>
+    </Tooltip>
+  );
+};
+
+interface FormatIdProps {
+  id: string;
+  length: number;
+}
+
+export const FormatId: React.FC<FormatIdProps> = ({ id, length }) => {
+  const copyToClipboard = () => {
+    navigator.clipboard
+      .writeText(id)
+      .then(() => {
+        console.log('Copied to clipboard');
+      })
+      .catch((error) => {
+        console.error('Error copying to clipboard:', error);
+      });
+  };
+
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-call
+  const truncatedId: string = truncate(id, { length: length }) as string;
+
+  return (
+    <Box sx={{ display: 'flex', alignItems: 'center', gap: '0.25rem' }}>
+      <Tooltip title={id} placement="top">
+        <Typography
+          variant="body2"
+          style={{
+            cursor: 'pointer',
+            color: '#000000'
+          }}
+        >
+          {truncatedId}
+        </Typography>
+      </Tooltip>
+      <Tooltip title="Copy" placement="top">
+        <IconButton onClick={copyToClipboard} style={{ padding: '0.25rem' }}>
+          <CloneIcon />
+        </IconButton>
+      </Tooltip>
+    </Box>
+  );
+};

yarn.lock

@@ -943,13 +943,15 @@ __metadata:
     "@layer5/sistent-svg": "workspace:^"
     "@mui/icons-material": ^5.14.12
     "@mui/material": ^5.14.16
+    "@types/lodash": ^4.14.202
     "@types/mui-datatables": ^4.3.6
     "@types/react": ^18.2.15
     "@types/react-dom": ^18.2.7
     "@typescript-eslint/eslint-plugin": ^6.0.0
     "@typescript-eslint/parser": ^6.0.0
     eslint: ^8.45.0
     eslint-plugin-react: ^7.33.2
+    lodash: ^4.17.21
     mui-datatables: ^4.3.0
     notistack: ^3.0.1
     react: ^17.0.0 || ^18.0.0
@@ -2110,6 +2112,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/lodash@npm:^4.14.202":
+  version: 4.14.202
+  resolution: "@types/lodash@npm:4.14.202"
+  checksum: a91acf3564a568c6f199912f3eb2c76c99c5a0d7e219394294213b3f2d54f672619f0fde4da22b29dc5d4c31457cd799acc2e5cb6bd90f9af04a1578483b6ff7
+  languageName: node
+  linkType: hard
+
 "@types/minimatch@npm:^3.0.3":
   version: 3.0.5
   resolution: "@types/minimatch@npm:3.0.5"