feat(date-picker): upgrade date-fns and react-datepicker to the lates…

…t versions (#582)

* feat(date-fns): upgrade date-fns v2.30.0 -> v3.3.1

* feat(react-datepicker): upgrade package v4.23.0 -> v6.1.0

* test onlyChanged one more time

* workaround for making onlyChanged work

* Utelize vite-plugin-turbosnap

* Remove unused config param

.github/workflows/ui-tests.yml

@@ -54,6 +54,7 @@ jobs:
         uses: chromaui/action@latest
         with:
           projectToken: chpt_a6f31d991d0cce7
+          onlyChanged: true
 
       - name: Install chromium
         run: pnpm playwright install chromium

.storybook/main.ts

@@ -1,6 +1,21 @@
 import type { StorybookConfig } from '@storybook/react-vite';
+import turbosnap from 'vite-plugin-turbosnap';
+import { mergeConfig } from 'vite';
 
 const config: StorybookConfig = {
+  async viteFinal(config, { configType }) {
+    return mergeConfig(config, {
+      plugins:
+        configType === 'PRODUCTION'
+          ? [
+              turbosnap({
+                // This should be the base path of your storybook.  In monorepos, you may only need process.cwd().
+                rootDir: config.root ?? process.cwd(),
+              }),
+            ]
+          : [],
+    });
+  },
   stories: [
     '../src/**/*/stories.@(ts|tsx)',
     '../src/**/*.stories.@(js|jsx|ts|tsx)',

package.json

@@ -70,10 +70,10 @@
     "@uiw/codemirror-theme-darcula": "^4.21.22",
     "@uiw/react-codemirror": "^4.21.22",
     "chakra-react-select": "^4.7.6",
-    "date-fns": "^2.30.0",
+    "date-fns": "^3.3.1",
     "emotion-theming": "^10.3.0",
     "ramda": "^0.28.0",
-    "react-datepicker": "^4.23.0",
+    "react-datepicker": "^6.1.0",
     "rebass": "^4.0.7"
   },
   "devDependencies": {
@@ -104,7 +104,7 @@
     "@types/node": "^20.11.19",
     "@types/ramda": "^0.28.1",
     "@types/react": "^18.2.57",
-    "@types/react-datepicker": "^4.19.3",
+    "@types/react-datepicker": "^6.0.1",
     "@types/react-dom": "^18.2.19",
     "@types/rebass": "^4.0.14",
     "@types/rebass__forms": "^4.0.10",
@@ -139,6 +139,7 @@
     "vite-plugin-css-injected-by-js": "^3.4.0",
     "vite-plugin-dts": "^3.7.2",
     "vite-plugin-svgr": "^4.2.0",
+    "vite-plugin-turbosnap": "^1.0.3",
     "wait-on": "^7.2.0",
     "yalc": "^1.0.0-pre.53"
   },

src/components/file-system-explorer/info/index.tsx

@@ -1,8 +1,7 @@
 import { Box, BoxProps, Flex } from 'rebass';
-
 import { format } from 'date-fns';
-import Value from '../../typography/value';
 
+import Value from '../../typography/value';
 import {
   FileExplorerInfoStyle,
   blockInfoStyles,
@@ -14,6 +13,8 @@ import { Button } from '../../button';
 import formatSizeUnits from '../../../utils/getFormatSizeUnit';
 import { GetIcon, IconName } from '../../icon';
 
+const dateFormat = (date: string) =>
+  format(new Date(date), 'yyyy-MM-dd - HH:mm:ss');
 export interface FileExplorerInfoProps extends Omit<BoxProps, 'css'> {
   children?: string[];
   activeFile?: ActiveFile | null;
@@ -27,9 +28,6 @@ const FileExplorerInfo = ({
   disableDownload,
   handleDownloadFile,
 }: FileExplorerInfoProps) => {
-  const dateFormat = (date: string) =>
-    format(new Date(date), 'yyyy-MM-dd - HH:mm:ss');
-
   return (
     <Box
       sx={{