From 51565d039d7797d2dfd4416f27b8e43f4ecbb779 Mon Sep 17 00:00:00 2001 From: Pier Francesco Ferrari Date: Wed, 24 Apr 2024 12:36:10 +0200 Subject: [PATCH] feat: align ui with other apps --- packages/app/package.json | 2 +- packages/app/src/components/List/Item.tsx | 2 +- packages/app/src/pages/ListPage.tsx | 124 ++++++++-------- .../app/src/pages/ResourceSelectorPage.tsx | 2 +- pnpm-lock.yaml | 136 +++++++++++++++--- 5 files changed, 187 insertions(+), 79 deletions(-) diff --git a/packages/app/package.json b/packages/app/package.json index 22cb11e..66f5e33 100644 --- a/packages/app/package.json +++ b/packages/app/package.json @@ -29,7 +29,7 @@ "prepare": "touch ./public/config.local.js" }, "dependencies": { - "@commercelayer/app-elements": "^1.16.0", + "@commercelayer/app-elements": "^1.23.1", "@commercelayer/eslint-config-ts-react": "^1.3.0", "@commercelayer/sdk": "5.33.1", "@vitejs/plugin-react": "^4.2.1", diff --git a/packages/app/src/components/List/Item.tsx b/packages/app/src/components/List/Item.tsx index 3278983..635c718 100644 --- a/packages/app/src/components/List/Item.tsx +++ b/packages/app/src/components/List/Item.tsx @@ -33,7 +33,7 @@ export function Item({ job }: Props): JSX.Element { return ( - }> + }>
{formatResourceName({ diff --git a/packages/app/src/pages/ListPage.tsx b/packages/app/src/pages/ListPage.tsx index 3051850..52460f5 100755 --- a/packages/app/src/pages/ListPage.tsx +++ b/packages/app/src/pages/ListPage.tsx @@ -5,8 +5,10 @@ import { Button, EmptyState, HomePageLayout, + Icon, List, PageSkeleton, + Spacer, useCoreSdkProvider, useTokenProvider } from '@commercelayer/app-elements' @@ -22,67 +24,77 @@ function ListPage(): JSX.Element { return ( - - {({ state, changePage }) => { - const { isLoading, currentPage, list } = state + + + {({ state, changePage }) => { + const { isLoading, currentPage, list } = state - if (isLoading) { - return - } + if (isLoading) { + return + } - if (list == null) { - return ( -
- -
- ) - } + if (list == null) { + return ( +
+ +
+ ) + } - if (list.length === 0) { - return ( -
- - - - ) : undefined - } - /> -
- ) - } + if (list.length === 0) { + return ( +
+ + + + ) : undefined + } + /> +
+ ) + } - const isRefetching = currentPage !== list.meta.currentPage - const { recordCount, recordsPerPage, pageCount } = list.meta + const isRefetching = currentPage !== list.meta.currentPage + const { recordCount, recordsPerPage, pageCount } = list.meta - return ( - - New import - - } - pagination={{ - recordsPerPage, - recordCount, - currentPage, - onChangePageRequest: changePage, - pageCount - }} - > - {list.map((job) => ( - - ))} - - ) - }} - + return ( + + + + } + pagination={{ + recordsPerPage, + recordCount, + currentPage, + onChangePageRequest: changePage, + pageCount + }} + > + {list.map((job) => ( + + ))} + + ) + }} + + ) } diff --git a/packages/app/src/pages/ResourceSelectorPage.tsx b/packages/app/src/pages/ResourceSelectorPage.tsx index 27049dc..82cc904 100644 --- a/packages/app/src/pages/ResourceSelectorPage.tsx +++ b/packages/app/src/pages/ResourceSelectorPage.tsx @@ -38,7 +38,7 @@ export function ResourceSelectorPage(): JSX.Element { href={appRoutes.newImport.makePath(resource)} asChild > - + {formatResourceName({ resource, diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index b8f7824..6bdcbb4 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -21,8 +21,8 @@ importers: packages/app: dependencies: '@commercelayer/app-elements': - specifier: ^1.16.0 - version: 1.16.0(@babel/core@7.23.9)(@commercelayer/sdk@5.33.1)(query-string@8.2.0)(react-dom@18.2.0)(react-gtm-module@2.0.11)(react-hook-form@7.50.1)(react@18.2.0)(wouter@3.0.1) + specifier: ^1.23.1 + version: 1.23.1(@babel/core@7.23.9)(@commercelayer/sdk@5.33.1)(query-string@8.2.0)(react-dom@18.2.0)(react-gtm-module@2.0.11)(react-hook-form@7.50.1)(react@18.2.0)(wouter@3.0.1) '@commercelayer/eslint-config-ts-react': specifier: ^1.3.0 version: 1.3.0(eslint@8.57.0)(react@18.2.0)(typescript@5.3.3) @@ -438,8 +438,8 @@ packages: dev: true optional: true - /@commercelayer/app-elements@1.16.0(@babel/core@7.23.9)(@commercelayer/sdk@5.33.1)(query-string@8.2.0)(react-dom@18.2.0)(react-gtm-module@2.0.11)(react-hook-form@7.50.1)(react@18.2.0)(wouter@3.0.1): - resolution: {integrity: sha512-Ug4S3sW0ctseMfVshlm+PoLPFV5Kbxd5ACxpNDYfMtW6LyQyVgY8f3lZxlkA8hG/GhHXenMW6SRni61XPya02Q==} + /@commercelayer/app-elements@1.23.1(@babel/core@7.23.9)(@commercelayer/sdk@5.33.1)(query-string@8.2.0)(react-dom@18.2.0)(react-gtm-module@2.0.11)(react-hook-form@7.50.1)(react@18.2.0)(wouter@3.0.1): + resolution: {integrity: sha512-ZDRTIayGDM0lLfS4OGGfbu7W0AWTZjMIz+Jy9BZKDLyC5/EY/mncB635viVantw+aZko42efQ2aeKVdMDJcIFA==} engines: {node: '>=18', pnpm: '>=7'} peerDependencies: '@commercelayer/sdk': ^5.x @@ -451,25 +451,26 @@ packages: wouter: ^3.x dependencies: '@commercelayer/sdk': 5.33.1 - '@types/lodash': 4.14.202 - '@types/react': 18.2.63 - '@types/react-datepicker': 6.0.1(react-dom@18.2.0)(react@18.2.0) - '@types/react-dom': 18.2.20 + '@types/lodash': 4.17.0 + '@types/react': 18.2.79 + '@types/react-datepicker': 6.2.0(react-dom@18.2.0)(react@18.2.0) + '@types/react-dom': 18.2.25 classnames: 2.5.1 jwt-decode: 4.0.0 lodash: 4.17.21 + pluralize: 8.0.0 query-string: 8.2.0 react: 18.2.0 - react-currency-input-field: 3.7.1(react@18.2.0) - react-datepicker: 6.1.0(react-dom@18.2.0)(react@18.2.0) + react-currency-input-field: 3.8.0(react@18.2.0) + react-datepicker: 6.9.0(react-dom@18.2.0)(react@18.2.0) react-dom: 18.2.0(react@18.2.0) react-gtm-module: 2.0.11 react-hook-form: 7.50.1(react@18.2.0) - react-select: 5.8.0(@babel/core@7.23.9)(@types/react@18.2.63)(react-dom@18.2.0)(react@18.2.0) + react-select: 5.8.0(@babel/core@7.23.9)(@types/react@18.2.79)(react-dom@18.2.0)(react@18.2.0) react-tooltip: 5.26.3(react-dom@18.2.0)(react@18.2.0) swr: 2.2.5(react@18.2.0) ts-invariant: 0.10.3 - type-fest: 4.11.1 + type-fest: 4.17.0 wouter: 3.0.1(react@18.2.0) zod: 3.22.4 transitivePeerDependencies: @@ -594,6 +595,31 @@ packages: react: 18.2.0 dev: false + /@emotion/react@11.10.5(@babel/core@7.23.9)(@types/react@18.2.79)(react@18.2.0): + resolution: {integrity: sha512-TZs6235tCJ/7iF6/rvTaOH4oxQg2gMAcdHemjwLKIjKz4rRuYe1HJ2TQJKnAcRAfOUDdU8XoDadCe1rl72iv8A==} + peerDependencies: + '@babel/core': ^7.0.0 + '@types/react': '*' + react: '>=16.8.0' + peerDependenciesMeta: + '@babel/core': + optional: true + '@types/react': + optional: true + dependencies: + '@babel/core': 7.23.9 + '@babel/runtime': 7.22.6 + '@emotion/babel-plugin': 11.10.5(@babel/core@7.23.9) + '@emotion/cache': 11.10.5 + '@emotion/serialize': 1.1.1 + '@emotion/use-insertion-effect-with-fallbacks': 1.0.0(react@18.2.0) + '@emotion/utils': 1.2.0 + '@emotion/weak-memoize': 0.3.0 + '@types/react': 18.2.79 + hoist-non-react-statics: 3.3.2 + react: 18.2.0 + dev: false + /@emotion/serialize@1.1.1: resolution: {integrity: sha512-Zl/0LFggN7+L1liljxXdsVSVlg6E/Z/olVWpfxUTxOAmi8NU7YoeWeLfi1RmnB2TATHoaWwIBRoL+FvAJiTUQA==} dependencies: @@ -1864,6 +1890,11 @@ packages: /@types/lodash@4.14.202: resolution: {integrity: sha512-OvlIYQK9tNneDlS0VN54LLd5uiPCBOp7gS5Z0f1mjoJYBrtStzgmJBxONW3U6OZqdtNzZPmn9BS/7WI7BFFcFQ==} + dev: true + + /@types/lodash@4.17.0: + resolution: {integrity: sha512-t7dhREVv6dbNj0q17X12j7yDG4bD/DHYX7o5/DbDxobP0HnGPgpRz2Ej77aL7TZT3DSw13fqUTj8J4mMnqa7WA==} + dev: false /@types/minimatch@3.0.5: resolution: {integrity: sha512-Klz949h02Gz2uZCMGwDUSDS1YBlTdDDgbWHi+81l29tQALUtvz4rAYi5uoVhE5Lagoq6DeqAUlbrHvW/mXDgdQ==} @@ -1895,11 +1926,11 @@ packages: /@types/prop-types@15.7.5: resolution: {integrity: sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==} - /@types/react-datepicker@6.0.1(react-dom@18.2.0)(react@18.2.0): - resolution: {integrity: sha512-oAavACLXz+Vm6kO1XZe1/LQJClOO32UUv4xva9G16KQJ2hNROtXyeGzmRg6mktHrQ+YGLnnNlN6S/XykQE2HMA==} + /@types/react-datepicker@6.2.0(react-dom@18.2.0)(react@18.2.0): + resolution: {integrity: sha512-+JtO4Fm97WLkJTH8j8/v3Ldh7JCNRwjMYjRaKh4KHH0M3jJoXtwiD3JBCsdlg3tsFIw9eQSqyAPeVDN2H2oM9Q==} dependencies: '@floating-ui/react': 0.26.9(react-dom@18.2.0)(react@18.2.0) - '@types/react': 18.2.63 + '@types/react': 18.2.79 date-fns: 3.3.1 transitivePeerDependencies: - react @@ -1910,6 +1941,13 @@ packages: resolution: {integrity: sha512-HXN/biJY8nv20Cn9ZbCFq3liERd4CozVZmKbaiZ9KiKTrWqsP7eoGDO6OOGvJQwoVFuiXaiJ7nBBjiFFbRmQMQ==} dependencies: '@types/react': 18.2.63 + dev: true + + /@types/react-dom@18.2.25: + resolution: {integrity: sha512-o/V48vf4MQh7juIKZU2QGDfli6p1+OOi5oXx36Hffpc9adsHeXjVp8rHuPkjd8VT8sOJ2Zp05HR7CdpGTIUFUA==} + dependencies: + '@types/react': 18.2.79 + dev: false /@types/react-transition-group@4.4.5: resolution: {integrity: sha512-juKD/eiSM3/xZYzjuzH6ZwpP+/lejltmiS3QEzV/vmb/Q8+HfDmxu+Baga8UEMGBqV88Nbg4l2hY/K2DkyaLLA==} @@ -1924,6 +1962,13 @@ packages: '@types/scheduler': 0.16.2 csstype: 3.1.1 + /@types/react@18.2.79: + resolution: {integrity: sha512-RwGAGXPl9kSXwdNTafkOEuFrTBD5SA2B3iEB96xi8+xu5ddUa/cpvyVCSNn+asgLCTHkb5ZxN8gbuibYJi4s1w==} + dependencies: + '@types/prop-types': 15.7.5 + csstype: 3.1.1 + dev: false + /@types/scheduler@0.16.2: resolution: {integrity: sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==} @@ -2830,6 +2875,11 @@ packages: engines: {node: '>=0.8'} dev: true + /clsx@2.1.1: + resolution: {integrity: sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==} + engines: {node: '>=6'} + dev: false + /cmd-shim@6.0.1: resolution: {integrity: sha512-S9iI9y0nKR4hwEQsVWpyxld/6kRfGepGfzff83FcaiEBpmvlbA2nnGe7Cylgrx2f/p1P5S5wpRm9oL8z1PbS3Q==} engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0} @@ -6773,6 +6823,11 @@ packages: pathe: 1.1.2 dev: true + /pluralize@8.0.0: + resolution: {integrity: sha512-Nc3IT5yHzflTfbjgqWcCPpo7DaKy4FnpB0l/zCAW0Tc7jxAiuqSxHasntB3D7887LSrA93kDJ9IXovxJYxyLCA==} + engines: {node: '>=4'} + dev: false + /postcss@8.4.35: resolution: {integrity: sha512-u5U8qYpBCpN13BsiEB0CbR1Hhh4Gc0zLFuedrHJKMctHCHAGrMdG0PRM/KErzAL3CU6/eckEtmHNB3x6e3c0vA==} engines: {node: ^10 || ^12 || >=14} @@ -6957,22 +7012,22 @@ packages: strip-json-comments: 2.0.1 dev: true - /react-currency-input-field@3.7.1(react@18.2.0): - resolution: {integrity: sha512-OTTimQ46ObDSpWUOefFgBJerPr4wcDoggf/zePrwva8h8Zs15Vrq+brzQlPwahL2tdoutAPagpeFMNWPlwvlFw==} + /react-currency-input-field@3.8.0(react@18.2.0): + resolution: {integrity: sha512-DKSIjacrvgUDOpuB16b+OVDvp5pbCt+s+RHJgpRZCHNhzg1yBpRUoy4fbnXpeOj0kdbwf5BaXCr2mAtxEujfhg==} peerDependencies: react: ^16.9.0 || ^17.0.0 || ^18.0.0 dependencies: react: 18.2.0 dev: false - /react-datepicker@6.1.0(react-dom@18.2.0)(react@18.2.0): - resolution: {integrity: sha512-8uz+hAOpvHqZGvD4Ky1hJ0/tLI4S9B0Gu9LV7LtLxRKXODs/xrxEay0aMVp7AW9iizTeImZh/6aA00fFaRZpJw==} + /react-datepicker@6.9.0(react-dom@18.2.0)(react@18.2.0): + resolution: {integrity: sha512-QTxuzeem7BUfVFWv+g5WuvzT0c5BPo+XTCNbMTZKSZQLU+cMMwSUHwspaxuIcDlwNcOH0tiJ+bh1fJ2yxOGYWA==} peerDependencies: react: ^16.9.0 || ^17 || ^18 react-dom: ^16.9.0 || ^17 || ^18 dependencies: '@floating-ui/react': 0.26.9(react-dom@18.2.0)(react@18.2.0) - classnames: 2.5.1 + clsx: 2.1.1 date-fns: 3.3.1 prop-types: 15.8.1 react: 18.2.0 @@ -7051,6 +7106,28 @@ packages: - '@types/react' dev: false + /react-select@5.8.0(@babel/core@7.23.9)(@types/react@18.2.79)(react-dom@18.2.0)(react@18.2.0): + resolution: {integrity: sha512-TfjLDo58XrhP6VG5M/Mi56Us0Yt8X7xD6cDybC7yoRMUNm7BGO7qk8J0TLQOua/prb8vUOtsfnXZwfm30HGsAA==} + peerDependencies: + react: ^16.8.0 || ^17.0.0 || ^18.0.0 + react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 + dependencies: + '@babel/runtime': 7.22.6 + '@emotion/cache': 11.10.5 + '@emotion/react': 11.10.5(@babel/core@7.23.9)(@types/react@18.2.79)(react@18.2.0) + '@floating-ui/dom': 1.0.7 + '@types/react-transition-group': 4.4.5 + memoize-one: 6.0.0 + prop-types: 15.8.1 + react: 18.2.0 + react-dom: 18.2.0(react@18.2.0) + react-transition-group: 4.4.5(react-dom@18.2.0)(react@18.2.0) + use-isomorphic-layout-effect: 1.1.2(@types/react@18.2.79)(react@18.2.0) + transitivePeerDependencies: + - '@babel/core' + - '@types/react' + dev: false + /react-tooltip@5.26.3(react-dom@18.2.0)(react@18.2.0): resolution: {integrity: sha512-MpYAws8CEHUd/RC4GaDCdoceph/T4KHM5vS5Dbk8FOmLMvvIht2ymP2htWdrke7K6lqPO8rz8+bnwWUIXeDlzg==} peerDependencies: @@ -8123,6 +8200,12 @@ packages: /type-fest@4.11.1: resolution: {integrity: sha512-MFMf6VkEVZAETidGGSYW2B1MjXbGX+sWIywn2QPEaJ3j08V+MwVRHMXtf2noB8ENJaD0LIun9wh5Z6OPNf1QzQ==} engines: {node: '>=16'} + dev: true + + /type-fest@4.17.0: + resolution: {integrity: sha512-9flrz1zkfLRH3jO3bLflmTxryzKMxVa7841VeMgBaNQGY6vH4RCcpN/sQLB7mQQYh1GZ5utT2deypMuCy4yicw==} + engines: {node: '>=16'} + dev: false /typed-array-buffer@1.0.0: resolution: {integrity: sha512-Y8KTSIglk9OZEr8zywiIHG/kmQ7KWyjseXs1CbSo8vC42w7hg2HgYTxSWwP0+is7bWDc1H+Fo026CpHFwm8tkw==} @@ -8315,6 +8398,19 @@ packages: react: 18.2.0 dev: false + /use-isomorphic-layout-effect@1.1.2(@types/react@18.2.79)(react@18.2.0): + resolution: {integrity: sha512-49L8yCO3iGT/ZF9QttjwLF/ZD9Iwto5LnH5LmEdk/6cFmXddqi2ulF0edxTwjj+7mqvpVVGQWvbXZdn32wRSHA==} + peerDependencies: + '@types/react': '*' + react: ^16.8.0 || ^17.0.0 || ^18.0.0 + peerDependenciesMeta: + '@types/react': + optional: true + dependencies: + '@types/react': 18.2.79 + react: 18.2.0 + dev: false + /use-sync-external-store@1.2.0(react@18.2.0): resolution: {integrity: sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==} peerDependencies: