diff --git a/.github/workflows/ui-tests.yml b/.github/workflows/ui-tests.yml index c7d313008..d4fed88b6 100644 --- a/.github/workflows/ui-tests.yml +++ b/.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 diff --git a/.storybook/main.ts b/.storybook/main.ts index b9266f2b0..444abbdba 100644 --- a/.storybook/main.ts +++ b/.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)', diff --git a/package.json b/package.json index 09f212a5f..a5f72bce9 100644 --- a/package.json +++ b/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" }, diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 613837dad..3039c2315 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -57,8 +57,8 @@ dependencies: specifier: ^4.7.6 version: 4.7.6(@chakra-ui/form-control@2.2.0)(@chakra-ui/icon@3.2.0)(@chakra-ui/layout@2.3.1)(@chakra-ui/media-query@3.3.0)(@chakra-ui/menu@2.2.1)(@chakra-ui/spinner@2.1.0)(@chakra-ui/system@2.6.2)(@emotion/react@11.11.3)(@types/react@18.2.57)(react-dom@18.2.0)(react@18.2.0) date-fns: - specifier: ^2.30.0 - version: 2.30.0 + specifier: ^3.3.1 + version: 3.3.1 emotion-theming: specifier: ^10.3.0 version: 10.3.0(@emotion/core@10.3.1)(react@18.2.0) @@ -66,8 +66,8 @@ dependencies: specifier: ^0.28.0 version: 0.28.0 react-datepicker: - specifier: ^4.23.0 - version: 4.23.0(react-dom@18.2.0)(react@18.2.0) + specifier: ^6.1.0 + version: 6.1.0(react-dom@18.2.0)(react@18.2.0) rebass: specifier: ^4.0.7 version: 4.0.7(react@18.2.0) @@ -155,8 +155,8 @@ devDependencies: specifier: ^18.2.57 version: 18.2.57 '@types/react-datepicker': - specifier: ^4.19.3 - version: 4.19.3(react-dom@18.2.0)(react@18.2.0) + specifier: ^6.0.1 + version: 6.0.1(react-dom@18.2.0)(react@18.2.0) '@types/react-dom': specifier: ^18.2.19 version: 18.2.19 @@ -259,6 +259,9 @@ devDependencies: vite-plugin-svgr: specifier: ^4.2.0 version: 4.2.0(vite@4.5.2) + vite-plugin-turbosnap: + specifier: ^1.0.3 + version: 1.0.3 wait-on: specifier: ^7.2.0 version: 7.2.0 @@ -4048,6 +4051,12 @@ packages: dependencies: '@floating-ui/core': 1.3.1 + /@floating-ui/dom@1.6.3: + resolution: {integrity: sha512-RnDthu3mzPlQ31Ss/BTwQ1zjzIhr3lk1gZB1OC56h/1vEtaXkESrOqL5fQVMfXpwGtRwX+YsZBdyHtJMQnkArw==} + dependencies: + '@floating-ui/core': 1.3.1 + '@floating-ui/utils': 0.2.1 + /@floating-ui/react-dom@2.0.1(react-dom@18.2.0)(react@18.2.0): resolution: {integrity: sha512-rZtAmSht4Lry6gdhAJDrCp/6rKN7++JnL1/Anbr/DdeyYXQPxvg/ivrbYvJulbRf4vL8b212suwMM2lxbv+RQA==} peerDependencies: @@ -4059,6 +4068,31 @@ packages: react-dom: 18.2.0(react@18.2.0) dev: true + /@floating-ui/react-dom@2.0.8(react-dom@18.2.0)(react@18.2.0): + resolution: {integrity: sha512-HOdqOt3R3OGeTKidaLvJKcgg75S6tibQ3Tif4eyd91QnIJWr0NLvoXFpJA/j8HqkFSL68GDca9AuyWEHlhyClw==} + peerDependencies: + react: '>=16.8.0' + react-dom: '>=16.8.0' + dependencies: + '@floating-ui/dom': 1.6.3 + react: 18.2.0 + react-dom: 18.2.0(react@18.2.0) + + /@floating-ui/react@0.26.9(react-dom@18.2.0)(react@18.2.0): + resolution: {integrity: sha512-p86wynZJVEkEq2BBjY/8p2g3biQ6TlgT4o/3KgFKyTWoJLU1GZ8wpctwRqtkEl2tseYA+kw7dBAIDFcednfI5w==} + peerDependencies: + react: '>=16.8.0' + react-dom: '>=16.8.0' + dependencies: + '@floating-ui/react-dom': 2.0.8(react-dom@18.2.0)(react@18.2.0) + '@floating-ui/utils': 0.2.1 + react: 18.2.0 + react-dom: 18.2.0(react@18.2.0) + tabbable: 6.2.0 + + /@floating-ui/utils@0.2.1: + resolution: {integrity: sha512-9TANp6GPoMtYzQdt54kfAyMmz1+osLlXdg2ENroU7zzrtflTLrrC/lgrIfaSe+Wu0b89GKccT7vxXA0MoAIO+Q==} + /@hapi/hoek@9.3.0: resolution: {integrity: sha512-/c6rf4UJlmHlC9b5BaNvzAcFv7HZ2QHaV0D4/HNlBdvFnvQq8RI4kYdhyPCl7Xj+oWvTWQ8ujhqS53LIgAe6KQ==} dev: true @@ -4814,6 +4848,7 @@ packages: /@popperjs/core@2.11.8: resolution: {integrity: sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==} + dev: false /@radix-ui/number@1.0.1: resolution: {integrity: sha512-T5gIdVO2mmPW3NNhjNgEP3cqMXjXL9UbO0BzWcXfvdBs+BohbQxvd/K5hSVKmn9/lbTdsQVKbUcP5WLCwvUbBg==} @@ -7286,13 +7321,12 @@ packages: resolution: {integrity: sha512-EEhsLsD6UsDM1yFhAvy0Cjr6VwmpMWqFBCb9w07wVugF7w9nfajxLuVmngTIpgS6svCnm6Vaw+MZhoDCKnOfsw==} dev: true - /@types/react-datepicker@4.19.3(react-dom@18.2.0)(react@18.2.0): - resolution: {integrity: sha512-85F9eKWu9fGiD9r4KVVMPYAdkJJswR3Wci9PvqplmB6T+D+VbUqPeKtifg96NZ4nEhufjehW+SX4JLrEWVplWw==} + /@types/react-datepicker@6.0.1(react-dom@18.2.0)(react@18.2.0): + resolution: {integrity: sha512-oAavACLXz+Vm6kO1XZe1/LQJClOO32UUv4xva9G16KQJ2hNROtXyeGzmRg6mktHrQ+YGLnnNlN6S/XykQE2HMA==} dependencies: - '@popperjs/core': 2.11.8 + '@floating-ui/react': 0.26.9(react-dom@18.2.0)(react@18.2.0) '@types/react': 18.2.57 - date-fns: 2.30.0 - react-popper: 2.3.0(@popperjs/core@2.11.8)(react-dom@18.2.0)(react@18.2.0) + date-fns: 3.3.1 transitivePeerDependencies: - react - react-dom @@ -9248,11 +9282,8 @@ packages: resolution: {integrity: sha512-sdQSFB7+llfUcQHUQO3+B8ERRj0Oa4w9POWMI/puGtuf7gFywGmkaLCElnudfTiKZV+NvHqL0ifzdrI8Ro7ESA==} dev: true - /date-fns@2.30.0: - resolution: {integrity: sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==} - engines: {node: '>=0.11'} - dependencies: - '@babel/runtime': 7.23.4 + /date-fns@3.3.1: + resolution: {integrity: sha512-y8e109LYGgoQDveiEBD3DYXKba1jWf5BA8YU1FL5Tvm0BTdEfy54WLCwnuYWZNnzzvALy/QQ4Hov+Q9RVRv+Zw==} /de-indent@1.0.2: resolution: {integrity: sha512-e/1zu3xH5MQryN2zdVaF0OrdNLUbvWxzMbi+iNA6Bky7l1RoP8a2fIbRocyHclXt/arDrrR6lL3TqFD9pMQTsg==} @@ -14120,20 +14151,19 @@ packages: react-dom: 18.2.0(react@18.2.0) dev: true - /react-datepicker@4.23.0(react-dom@18.2.0)(react@18.2.0): - resolution: {integrity: sha512-w+msqlOZ14v6H1UknTKtZw/dw9naFMgAOspf59eY130gWpvy5dvKj/bgsFICDdvxB7PtKWxDcbGlAqCloY1d2A==} + /react-datepicker@6.1.0(react-dom@18.2.0)(react@18.2.0): + resolution: {integrity: sha512-8uz+hAOpvHqZGvD4Ky1hJ0/tLI4S9B0Gu9LV7LtLxRKXODs/xrxEay0aMVp7AW9iizTeImZh/6aA00fFaRZpJw==} peerDependencies: react: ^16.9.0 || ^17 || ^18 react-dom: ^16.9.0 || ^17 || ^18 dependencies: - '@popperjs/core': 2.11.8 + '@floating-ui/react': 0.26.9(react-dom@18.2.0)(react@18.2.0) classnames: 2.3.2 - date-fns: 2.30.0 + date-fns: 3.3.1 prop-types: 15.8.1 react: 18.2.0 react-dom: 18.2.0(react@18.2.0) react-onclickoutside: 6.13.0(react-dom@18.2.0)(react@18.2.0) - react-popper: 2.3.0(@popperjs/core@2.11.8)(react-dom@18.2.0)(react@18.2.0) dev: false /react-docgen-typescript@2.2.2(typescript@5.3.3): @@ -14186,6 +14216,7 @@ packages: /react-fast-compare@3.2.2: resolution: {integrity: sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ==} + dev: false /react-focus-lock@2.9.4(@types/react@18.2.57)(react@18.2.0): resolution: {integrity: sha512-7pEdXyMseqm3kVjhdVH18sovparAzLg5h6WvIx7/Ck3ekjhrrDMEegHSa3swwC8wgfdd7DIdUVRGeiHT9/7Sgg==} @@ -14231,19 +14262,6 @@ packages: react-dom: 18.2.0(react@18.2.0) dev: false - /react-popper@2.3.0(@popperjs/core@2.11.8)(react-dom@18.2.0)(react@18.2.0): - resolution: {integrity: sha512-e1hj8lL3uM+sgSR4Lxzn5h1GxBlpa4CQz0XLF8kx4MDrDRWY0Ena4c97PUeSX9i5W3UAfDP0z0FXCTQkoXUl3Q==} - peerDependencies: - '@popperjs/core': ^2.0.0 - react: ^16.8.0 || ^17 || ^18 - react-dom: ^16.8.0 || ^17 || ^18 - dependencies: - '@popperjs/core': 2.11.8 - react: 18.2.0 - react-dom: 18.2.0(react@18.2.0) - react-fast-compare: 3.2.2 - warning: 4.0.3 - /react-refresh@0.14.0: resolution: {integrity: sha512-wViHqhAd8OHeLS/IRMJjTSDHF3U9eWi62F/MledQGPdJGDhodXJ9PBLNGr6WWL7qlH12Mt3TyTpbS+hGXMjCzQ==} engines: {node: '>=0.10.0'} @@ -15407,6 +15425,9 @@ packages: tslib: 2.6.2 dev: true + /tabbable@6.2.0: + resolution: {integrity: sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew==} + /tar-fs@2.1.1: resolution: {integrity: sha512-V0r2Y9scmbDRLCNex/+hYzvp/zyYjvFbHPNgVTKfQvVrb6guiE/fxP+XblDNR011utopbkex2nM4dHNV6GDsng==} dependencies: @@ -16117,6 +16138,10 @@ packages: - supports-color dev: true + /vite-plugin-turbosnap@1.0.3: + resolution: {integrity: sha512-p4D8CFVhZS412SyQX125qxyzOgIFouwOcvjZWk6bQbNPR1wtaEzFT6jZxAjf1dejlGqa6fqHcuCvQea6EWUkUA==} + dev: true + /vite@4.5.2(@types/node@20.11.19): resolution: {integrity: sha512-tBCZBNSBbHQkaGyhGCDUGqeo2ph8Fstyp6FMSvTtsXeZSPpSMGlviAOav2hxVTqFcx8Hj/twtWKsMJXNY0xI8w==} engines: {node: ^14.18.0 || >=16.0.0} @@ -16208,11 +16233,6 @@ packages: makeerror: 1.0.12 dev: true - /warning@4.0.3: - resolution: {integrity: sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==} - dependencies: - loose-envify: 1.4.0 - /watchpack@2.4.0: resolution: {integrity: sha512-Lcvm7MGST/4fup+ifyKi2hjyIAwcdI4HRgtvTpIUxBRhB+RFtUh8XtDOxUfctVCnhVi+QQj49i91OyvzkJl6cg==} engines: {node: '>=10.13.0'} diff --git a/src/components/file-system-explorer/info/index.tsx b/src/components/file-system-explorer/info/index.tsx index d2f5221b0..de9ec3460 100644 --- a/src/components/file-system-explorer/info/index.tsx +++ b/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 { 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 (