@graphcommerce/ecommerce-ui 1.1.12 → 1.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/CHANGELOG.md +23 -0
  2. package/components/ApolloError/ApolloErrorAlert.tsx +34 -31
  3. package/components/WaitForQueries/WaitForQueries.tsx +1 -1
  4. package/package.json +4 -4
package/CHANGELOG.md CHANGED
@@ -1,5 +1,28 @@
1
1
  # @graphcommerce/ecommerce-ui
2
2
 
3
+ ## 1.2.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [#1609](https://github.com/graphcommerce-org/graphcommerce/pull/1609) [`0ad5159eb`](https://github.com/graphcommerce-org/graphcommerce/commit/0ad5159ebef54b4ce7fee6f71b4bf710dba9ef8e) Thanks [@ErwinOtten](https://github.com/ErwinOtten)! - Use WaitForCustomer component
8
+
9
+ - Fixes bugs where loaders where shown on all pages that require user to log in
10
+
11
+ * [#1602](https://github.com/graphcommerce-org/graphcommerce/pull/1602) [`5f781a217`](https://github.com/graphcommerce-org/graphcommerce/commit/5f781a217ce63ed56bc1a9983487b04400a8a315) Thanks [@ErwinOtten](https://github.com/ErwinOtten)! - Default styles and layout fixes
12
+
13
+ - Scaled icons and fonts down. Size in typography is now more gradual: https://graphcommerce.vercel.app/test/typography
14
+ - Multiple accessibility fixes. Missing button/input labels, and fixed spacing issues resulting in high % appropriately sized tap targets
15
+ - Replaced responsiveVal usage with better performaning breakpointVal where possible
16
+ - All buttons are now Pill by default.
17
+ - Cleaned up checkout styles
18
+
19
+ ### Patch Changes
20
+
21
+ - Updated dependencies [[`04708dacc`](https://github.com/graphcommerce-org/graphcommerce/commit/04708daccc213c6ea927bc67fa3bd0d5b1fad619), [`bb94e7045`](https://github.com/graphcommerce-org/graphcommerce/commit/bb94e7045460cb671c45d612a0833731d7c20c30), [`b0dc4e2e1`](https://github.com/graphcommerce-org/graphcommerce/commit/b0dc4e2e1982d502d38dd50a0f493396360a7a15), [`4a5286dfe`](https://github.com/graphcommerce-org/graphcommerce/commit/4a5286dfeaa1719e594a0078f274fbab53969c4e), [`d46d5ed0c`](https://github.com/graphcommerce-org/graphcommerce/commit/d46d5ed0cc5794391b7527fc17bbb68ec2212e33), [`5f781a217`](https://github.com/graphcommerce-org/graphcommerce/commit/5f781a217ce63ed56bc1a9983487b04400a8a315), [`01372b918`](https://github.com/graphcommerce-org/graphcommerce/commit/01372b918a291e01cbf5db40edcb40fb1c2af313)]:
22
+ - @graphcommerce/next-ui@4.22.0
23
+ - @graphcommerce/framer-utils@3.2.0
24
+ - @graphcommerce/graphql@3.4.7
25
+
3
26
  ## 1.1.12
4
27
 
5
28
  ### Patch Changes
package/components/ApolloError/ApolloErrorAlert.tsx CHANGED
@@ -1,8 +1,6 @@
1
1
  import { ApolloError } from '@graphcommerce/graphql'
2
- import { AnimatedRow } from '@graphcommerce/next-ui'
3
2
  import { extendableComponent } from '@graphcommerce/next-ui/Styles/extendableComponent'
4
3
  import { AlertProps, Alert, Box, SxProps, Theme } from '@mui/material'
5
- import { AnimatePresence } from 'framer-motion'
6
4
 
7
5
  const { classes, selectors } = extendableComponent('ApolloErrorAlert', ['root', 'alert'] as const)
8
6
 
@@ -16,42 +14,47 @@ export function ApolloErrorAlert(props: ApolloErrorAlertProps) {
16
14
  const { error, graphqlErrorAlertProps, networkErrorAlertProps, sx } = props
17
15
 
18
16
  return (
19
- <AnimatePresence initial={false}>
17
+ <>
20
18
  {error && (
21
- <AnimatedRow layout key='alerts'>
19
+ <Box key='alerts'>
22
20
  <Box sx={sx} className={classes.root}>
23
- <AnimatePresence initial={false}>
24
- {error.graphQLErrors.map((e, index) => (
25
- // eslint-disable-next-line react/no-array-index-key
26
- <AnimatedRow layout key={index}>
27
- <div className={classes.alert}>
28
- <Alert severity='error' {...graphqlErrorAlertProps}>
29
- {e.message}
30
- </Alert>
31
- </div>
32
- </AnimatedRow>
33
- ))}
34
- {error.networkError && (
35
- <AnimatedRow layout key='networkError'>
36
- <Box
21
+ {error.graphQLErrors.map((e, index) => (
22
+ // eslint-disable-next-line react/no-array-index-key
23
+ <Box key={index}>
24
+ <div className={classes.alert}>
25
+ <Alert
26
+ severity='error'
27
+ {...graphqlErrorAlertProps}
37
28
  sx={(theme) => ({
38
- paddingTop: theme.spacings.xxs,
39
- paddingBottom: theme.spacings.xxs,
29
+ borderRadius: theme.shape.borderRadius * 1,
30
+ marginTop: 0.5,
40
31
  })}
41
- className={classes.alert}
42
- key='networkError'
43
32
  >
44
- <Alert severity='error' {...networkErrorAlertProps}>
45
- Network Error: {error.networkError.message}
46
- </Alert>
47
- </Box>
48
- </AnimatedRow>
49
- )}
50
- </AnimatePresence>
33
+ {e.message}
34
+ </Alert>
35
+ </div>
36
+ </Box>
37
+ ))}
38
+ {error.networkError && (
39
+ <Box key='networkError'>
40
+ <Box
41
+ sx={(theme) => ({
42
+ paddingTop: theme.spacings.xxs,
43
+ paddingBottom: theme.spacings.xxs,
44
+ })}
45
+ className={classes.alert}
46
+ key='networkError'
47
+ >
48
+ <Alert severity='error' {...networkErrorAlertProps}>
49
+ Network Error: {error.networkError.message}
50
+ </Alert>
51
+ </Box>
52
+ </Box>
53
+ )}
51
54
  </Box>
52
- </AnimatedRow>
55
+ </Box>
53
56
  )}
54
- </AnimatePresence>
57
+ </>
55
58
  )
56
59
  }
57
60
 
package/components/WaitForQueries/WaitForQueries.tsx CHANGED
@@ -18,7 +18,7 @@ export const WaitForQueries = (props: WaitForQueriesProps) => {
18
18
 
19
19
  // We are done when all queries either have data or an error.
20
20
  const isDone = (Array.isArray(waitFor) ? waitFor : [waitFor]).every(
21
- (res) => typeof res === 'undefined' || res.data || res.error,
21
+ (res) => (typeof res === 'undefined' || res.data || res.error || !res.loading) && mounted,
22
22
  )
23
23
 
24
24
  return <>{isDone && mounted ? children : fallback}</>
package/package.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "name": "@graphcommerce/ecommerce-ui",
3
3
  "homepage": "https://www.graphcommerce.org/",
4
4
  "repository": "github:graphcommerce-org/graphcommerce",
5
- "version": "1.1.12",
5
+ "version": "1.2.0",
6
6
  "sideEffects": false,
7
7
  "prettier": "@graphcommerce/prettier-config-pwa",
8
8
  "eslintConfig": {
@@ -12,10 +12,10 @@
12
12
  }
13
13
  },
14
14
  "dependencies": {
15
- "@graphcommerce/framer-utils": "3.1.5",
16
- "@graphcommerce/next-ui": "4.21.0",
15
+ "@graphcommerce/framer-utils": "3.2.0",
16
+ "@graphcommerce/next-ui": "4.22.0",
17
17
  "@graphcommerce/react-hook-form": "3.3.2",
18
- "@graphcommerce/graphql": "3.4.6"
18
+ "@graphcommerce/graphql": "3.4.7"
19
19
  },
20
20
  "devDependencies": {
21
21
  "@graphcommerce/eslint-config-pwa": "^4.1.10",