@graphcommerce/ecommerce-ui 8.1.0-canary.8 → 9.0.0-canary.100
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.
- package/CHANGELOG.md +232 -37
- package/Config.graphqls +23 -0
- package/components/FormComponents/ActionCardListForm.tsx +88 -0
- package/components/FormComponents/AutoCompleteElement.tsx +101 -90
- package/components/FormComponents/CheckboxButtonGroup.tsx +27 -31
- package/components/FormComponents/CheckboxElement.tsx +56 -60
- package/components/FormComponents/EmailElement.tsx +27 -0
- package/components/FormComponents/MultiSelectElement.tsx +103 -110
- package/components/FormComponents/NumberFieldElement.tsx +9 -1
- package/components/FormComponents/RadioButtonGroup.tsx +27 -29
- package/components/FormComponents/SliderElement.tsx +28 -29
- package/components/FormComponents/SwitchElement.tsx +15 -13
- package/components/FormComponents/TelephoneElement.tsx +23 -0
- package/components/FormComponents/TextFieldElement.tsx +10 -5
- package/components/FormComponents/ToggleButtonGroup.tsx +49 -48
- package/components/FormComponents/index.ts +6 -3
- package/components/PreviewMode/LightTooltip.tsx +11 -0
- package/components/PreviewMode/PreviewMode.tsx +148 -0
- package/components/PreviewMode/PreviewModeActions.tsx +6 -0
- package/components/PreviewMode/PreviewModeToolbar.tsx +6 -0
- package/components/PreviewMode/index.ts +5 -0
- package/components/PreviewMode/previewModeDefaults.ts +5 -0
- package/components/PreviewMode/usePreviewModeForm.ts +6 -0
- package/components/index.ts +1 -0
- package/package.json +7 -7
- package/plugins/PreviewModeFramerNextPages.tsx +38 -0
- package/route/preview.ts +60 -0
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,215 @@
|
|
|
1
1
|
# @graphcommerce/ecommerce-ui
|
|
2
2
|
|
|
3
|
+
## 9.0.0-canary.100
|
|
4
|
+
|
|
5
|
+
## 9.0.0-canary.99
|
|
6
|
+
|
|
7
|
+
## 9.0.0-canary.98
|
|
8
|
+
|
|
9
|
+
## 9.0.0-canary.97
|
|
10
|
+
|
|
11
|
+
## 9.0.0-canary.96
|
|
12
|
+
|
|
13
|
+
## 9.0.0-canary.95
|
|
14
|
+
|
|
15
|
+
## 9.0.0-canary.94
|
|
16
|
+
|
|
17
|
+
## 9.0.0-canary.93
|
|
18
|
+
|
|
19
|
+
## 9.0.0-canary.92
|
|
20
|
+
|
|
21
|
+
## 9.0.0-canary.91
|
|
22
|
+
|
|
23
|
+
## 9.0.0-canary.90
|
|
24
|
+
|
|
25
|
+
### Patch Changes
|
|
26
|
+
|
|
27
|
+
- [#2397](https://github.com/graphcommerce-org/graphcommerce/pull/2397) [`d4d5a98`](https://github.com/graphcommerce-org/graphcommerce/commit/d4d5a983dea6d034dcbdeed9cf30fb33133dde39) - Add requireOptionSelection boolean to prevent users from deselecting configurable options ([@carlocarels90](https://github.com/carlocarels90))
|
|
28
|
+
|
|
29
|
+
## 9.0.0-canary.89
|
|
30
|
+
|
|
31
|
+
## 9.0.0-canary.88
|
|
32
|
+
|
|
33
|
+
## 9.0.0-canary.87
|
|
34
|
+
|
|
35
|
+
## 9.0.0-canary.86
|
|
36
|
+
|
|
37
|
+
## 9.0.0-canary.85
|
|
38
|
+
|
|
39
|
+
## 9.0.0-canary.84
|
|
40
|
+
|
|
41
|
+
## 9.0.0-canary.83
|
|
42
|
+
|
|
43
|
+
## 9.0.0-canary.82
|
|
44
|
+
|
|
45
|
+
### Minor Changes
|
|
46
|
+
|
|
47
|
+
- [#2366](https://github.com/graphcommerce-org/graphcommerce/pull/2366) [`3612c99`](https://github.com/graphcommerce-org/graphcommerce/commit/3612c994b80bb3b1bc02de10668f69a332402dc4) - Add `permissions` config so the website or store can be configurated to run in different modes. ([@Giovanni-Schroevers](https://github.com/Giovanni-Schroevers))
|
|
48
|
+
|
|
49
|
+
## 9.0.0-canary.81
|
|
50
|
+
|
|
51
|
+
## 9.0.0-canary.80
|
|
52
|
+
|
|
53
|
+
### Patch Changes
|
|
54
|
+
|
|
55
|
+
- [#2341](https://github.com/graphcommerce-org/graphcommerce/pull/2341) [`7085b4a`](https://github.com/graphcommerce-org/graphcommerce/commit/7085b4a86088328fe54dc4e82ccd296d6459cae7) - Updated all form FieldElements to also accept defaultValue, shouldUnregister and disabled. Moved AutoCompleteElement, CheckboxElement, MultiSelectElement, SliderElement, SwitchElement, ToggleButtonGroup to useController. Removed all parseError props ([@Giovanni-Schroevers](https://github.com/Giovanni-Schroevers))
|
|
56
|
+
|
|
57
|
+
- [#2341](https://github.com/graphcommerce-org/graphcommerce/pull/2341) [`022cbd6`](https://github.com/graphcommerce-org/graphcommerce/commit/022cbd664ea4e8a82997c5edf4451b9182558429) - Moved ActionCardListForm to @graphcommerce/ecommerce-ui to resolve issue with circular dependencies. ([@Giovanni-Schroevers](https://github.com/Giovanni-Schroevers))
|
|
58
|
+
|
|
59
|
+
## 9.0.0-canary.79
|
|
60
|
+
|
|
61
|
+
## 9.0.0-canary.78
|
|
62
|
+
|
|
63
|
+
## 9.0.0-canary.77
|
|
64
|
+
|
|
65
|
+
## 9.0.0-canary.76
|
|
66
|
+
|
|
67
|
+
## 9.0.0-canary.75
|
|
68
|
+
|
|
69
|
+
## 9.0.0-canary.74
|
|
70
|
+
|
|
71
|
+
### Patch Changes
|
|
72
|
+
|
|
73
|
+
- [#2349](https://github.com/graphcommerce-org/graphcommerce/pull/2349) [`7c8529e`](https://github.com/graphcommerce-org/graphcommerce/commit/7c8529ea54c0e91f6b0e72129611cd6bf4f85d87) - Fix NumberFieldElement when min = 0 ([@JoshuaS98](https://github.com/JoshuaS98))
|
|
74
|
+
|
|
75
|
+
## 9.0.0-canary.73
|
|
76
|
+
|
|
77
|
+
## 9.0.0-canary.72
|
|
78
|
+
|
|
79
|
+
## 9.0.0-canary.71
|
|
80
|
+
|
|
81
|
+
## 9.0.0-canary.70
|
|
82
|
+
|
|
83
|
+
## 9.0.0-canary.69
|
|
84
|
+
|
|
85
|
+
## 9.0.0-canary.68
|
|
86
|
+
|
|
87
|
+
## 9.0.0-canary.67
|
|
88
|
+
|
|
89
|
+
## 9.0.0-canary.66
|
|
90
|
+
|
|
91
|
+
## 9.0.0-canary.65
|
|
92
|
+
|
|
93
|
+
## 9.0.0-canary.64
|
|
94
|
+
|
|
95
|
+
## 9.0.0-canary.63
|
|
96
|
+
|
|
97
|
+
## 9.0.0-canary.62
|
|
98
|
+
|
|
99
|
+
## 9.0.0-canary.61
|
|
100
|
+
|
|
101
|
+
## 9.0.0-canary.60
|
|
102
|
+
|
|
103
|
+
## 9.0.0-canary.59
|
|
104
|
+
|
|
105
|
+
## 9.0.0-canary.58
|
|
106
|
+
|
|
107
|
+
## 9.0.0-canary.57
|
|
108
|
+
|
|
109
|
+
## 9.0.0-canary.56
|
|
110
|
+
|
|
111
|
+
## 9.0.0-canary.55
|
|
112
|
+
|
|
113
|
+
## 9.0.0-canary.54
|
|
114
|
+
|
|
115
|
+
## 8.1.0-canary.53
|
|
116
|
+
|
|
117
|
+
## 8.1.0-canary.52
|
|
118
|
+
|
|
119
|
+
## 8.1.0-canary.51
|
|
120
|
+
|
|
121
|
+
## 8.1.0-canary.50
|
|
122
|
+
|
|
123
|
+
## 8.1.0-canary.49
|
|
124
|
+
|
|
125
|
+
## 8.1.0-canary.48
|
|
126
|
+
|
|
127
|
+
### Minor Changes
|
|
128
|
+
|
|
129
|
+
- [#2319](https://github.com/graphcommerce-org/graphcommerce/pull/2319) [`a3409e8`](https://github.com/graphcommerce-org/graphcommerce/commit/a3409e8a629ee95413da6547cbdcf48aa2502c23) - Created a new TelephoneElement component to make re-use easier ([@Giovanni-Schroevers](https://github.com/Giovanni-Schroevers))
|
|
130
|
+
|
|
131
|
+
## 8.1.0-canary.47
|
|
132
|
+
|
|
133
|
+
## 8.1.0-canary.46
|
|
134
|
+
|
|
135
|
+
## 8.1.0-canary.45
|
|
136
|
+
|
|
137
|
+
## 8.1.0-canary.44
|
|
138
|
+
|
|
139
|
+
## 8.1.0-canary.43
|
|
140
|
+
|
|
141
|
+
## 8.1.0-canary.42
|
|
142
|
+
|
|
143
|
+
## 8.1.0-canary.41
|
|
144
|
+
|
|
145
|
+
## 8.1.0-canary.40
|
|
146
|
+
|
|
147
|
+
## 8.1.0-canary.39
|
|
148
|
+
|
|
149
|
+
## 8.1.0-canary.38
|
|
150
|
+
|
|
151
|
+
## 8.1.0-canary.37
|
|
152
|
+
|
|
153
|
+
## 8.1.0-canary.36
|
|
154
|
+
|
|
155
|
+
## 8.1.0-canary.35
|
|
156
|
+
|
|
157
|
+
### Patch Changes
|
|
158
|
+
|
|
159
|
+
- [#2301](https://github.com/graphcommerce-org/graphcommerce/pull/2301) [`13d0649`](https://github.com/graphcommerce-org/graphcommerce/commit/13d06498d121f93b52c25930e50aa3b0bd12a818) - Created a new EmailElement component to make re-use easier ([@Giovanni-Schroevers](https://github.com/Giovanni-Schroevers))
|
|
160
|
+
|
|
161
|
+
## 8.1.0-canary.34
|
|
162
|
+
|
|
163
|
+
## 8.1.0-canary.33
|
|
164
|
+
|
|
165
|
+
## 8.1.0-canary.32
|
|
166
|
+
|
|
167
|
+
## 8.1.0-canary.31
|
|
168
|
+
|
|
169
|
+
## 8.1.0-canary.30
|
|
170
|
+
|
|
171
|
+
## 8.1.0-canary.29
|
|
172
|
+
|
|
173
|
+
## 8.1.0-canary.28
|
|
174
|
+
|
|
175
|
+
## 8.1.0-canary.27
|
|
176
|
+
|
|
177
|
+
## 8.1.0-canary.26
|
|
178
|
+
|
|
179
|
+
## 8.1.0-canary.25
|
|
180
|
+
|
|
181
|
+
## 8.1.0-canary.24
|
|
182
|
+
|
|
183
|
+
## 8.1.0-canary.23
|
|
184
|
+
|
|
185
|
+
## 8.1.0-canary.22
|
|
186
|
+
|
|
187
|
+
## 8.1.0-canary.21
|
|
188
|
+
|
|
189
|
+
## 8.1.0-canary.20
|
|
190
|
+
|
|
191
|
+
## 8.1.0-canary.19
|
|
192
|
+
|
|
193
|
+
## 8.1.0-canary.18
|
|
194
|
+
|
|
195
|
+
## 8.1.0-canary.17
|
|
196
|
+
|
|
197
|
+
## 8.1.0-canary.16
|
|
198
|
+
|
|
199
|
+
## 8.1.0-canary.15
|
|
200
|
+
|
|
201
|
+
## 8.1.0-canary.14
|
|
202
|
+
|
|
203
|
+
## 8.1.0-canary.13
|
|
204
|
+
|
|
205
|
+
## 8.1.0-canary.12
|
|
206
|
+
|
|
207
|
+
## 8.1.0-canary.11
|
|
208
|
+
|
|
209
|
+
## 8.1.0-canary.10
|
|
210
|
+
|
|
211
|
+
## 8.1.0-canary.9
|
|
212
|
+
|
|
3
213
|
## 8.1.0-canary.8
|
|
4
214
|
|
|
5
215
|
## 8.1.0-canary.7
|
|
@@ -16,15 +226,11 @@
|
|
|
16
226
|
|
|
17
227
|
### Patch Changes
|
|
18
228
|
|
|
19
|
-
- [#2234](https://github.com/graphcommerce-org/graphcommerce/pull/2234) [`0767bc4`](https://github.com/graphcommerce-org/graphcommerce/commit/0767bc40f7b596209f24ca4e745ff0441f3275c9) - Upgrade input components to no longer use muiRegister, which improves INP scores
|
|
20
|
-
([@FrankHarland](https://github.com/FrankHarland))
|
|
229
|
+
- [#2234](https://github.com/graphcommerce-org/graphcommerce/pull/2234) [`0767bc4`](https://github.com/graphcommerce-org/graphcommerce/commit/0767bc40f7b596209f24ca4e745ff0441f3275c9) - Upgrade input components to no longer use muiRegister, which improves INP scores ([@FrankHarland](https://github.com/FrankHarland))
|
|
21
230
|
|
|
22
|
-
- [#2234](https://github.com/graphcommerce-org/graphcommerce/pull/2234) [`43bd04a`](https://github.com/graphcommerce-org/graphcommerce/commit/43bd04a777c5800cc7e01bee1e123a5aad82f194) - Make sure the TextFieldElement doesn’t give a uncontrolled to controlled warning.
|
|
23
|
-
Convert SelectElement to useController instead of a separate Controller component.
|
|
24
|
-
Make sure the original endAdornment is always shown only until the value is valid ([@FrankHarland](https://github.com/FrankHarland))
|
|
231
|
+
- [#2234](https://github.com/graphcommerce-org/graphcommerce/pull/2234) [`43bd04a`](https://github.com/graphcommerce-org/graphcommerce/commit/43bd04a777c5800cc7e01bee1e123a5aad82f194) - Make sure the TextFieldElement doesn’t give a uncontrolled to controlled warning. Convert SelectElement to useController instead of a separate Controller component. Make sure the original endAdornment is always shown only until the value is valid ([@FrankHarland](https://github.com/FrankHarland))
|
|
25
232
|
|
|
26
|
-
- [#2234](https://github.com/graphcommerce-org/graphcommerce/pull/2234) [`d4e693d`](https://github.com/graphcommerce-org/graphcommerce/commit/d4e693d553198c9a1ef398d000ca23d209e6c2ba) - The `<WaitForQueries/>` component now uses the useIsSSR hook which prevents loading spinners when navigating on the client, which make all account/cart/checkout pages faster.
|
|
27
|
-
([@FrankHarland](https://github.com/FrankHarland))
|
|
233
|
+
- [#2234](https://github.com/graphcommerce-org/graphcommerce/pull/2234) [`d4e693d`](https://github.com/graphcommerce-org/graphcommerce/commit/d4e693d553198c9a1ef398d000ca23d209e6c2ba) - The `<WaitForQueries/>` component now uses the useIsSSR hook which prevents loading spinners when navigating on the client, which make all account/cart/checkout pages faster. ([@FrankHarland](https://github.com/FrankHarland))
|
|
28
234
|
|
|
29
235
|
## 8.0.6-canary.1
|
|
30
236
|
|
|
@@ -64,14 +270,11 @@
|
|
|
64
270
|
|
|
65
271
|
### Patch Changes
|
|
66
272
|
|
|
67
|
-
- [#2212](https://github.com/graphcommerce-org/graphcommerce/pull/2212) [`e12d1dc`](https://github.com/graphcommerce-org/graphcommerce/commit/e12d1dc201bf7b23a996bd58a256a117b91a9334) - Rename validation to rules for all Form field components and deprecate validation
|
|
68
|
-
([@paales](https://github.com/paales))
|
|
273
|
+
- [#2212](https://github.com/graphcommerce-org/graphcommerce/pull/2212) [`e12d1dc`](https://github.com/graphcommerce-org/graphcommerce/commit/e12d1dc201bf7b23a996bd58a256a117b91a9334) - Rename validation to rules for all Form field components and deprecate validation ([@paales](https://github.com/paales))
|
|
69
274
|
|
|
70
|
-
- [#2203](https://github.com/graphcommerce-org/graphcommerce/pull/2203) [`7ef7dc7`](https://github.com/graphcommerce-org/graphcommerce/commit/7ef7dc7631f61a2feba67a531a210df9c22fed4b) - CheckboxElement, MultiSelectElement, NumberFieldElement, SelectElement, SliderElement and TextFieldElement have their inputRef passed, allowing focus to be set by the form.
|
|
71
|
-
([@Jessevdpoel](https://github.com/Jessevdpoel))
|
|
275
|
+
- [#2203](https://github.com/graphcommerce-org/graphcommerce/pull/2203) [`7ef7dc7`](https://github.com/graphcommerce-org/graphcommerce/commit/7ef7dc7631f61a2feba67a531a210df9c22fed4b) - CheckboxElement, MultiSelectElement, NumberFieldElement, SelectElement, SliderElement and TextFieldElement have their inputRef passed, allowing focus to be set by the form. ([@Jessevdpoel](https://github.com/Jessevdpoel))
|
|
72
276
|
|
|
73
|
-
- [#2205](https://github.com/graphcommerce-org/graphcommerce/pull/2205) [`eb14696`](https://github.com/graphcommerce-org/graphcommerce/commit/eb14696fc65e084a06790c88a8218fb3003f7c2c) - `<WaitForQueries/>` will default to loading, restoring the previous behavior. This might introduce , this might introduce an additional spinner but prevents a flash where it is shown that there is no cart
|
|
74
|
-
([@paales](https://github.com/paales))
|
|
277
|
+
- [#2205](https://github.com/graphcommerce-org/graphcommerce/pull/2205) [`eb14696`](https://github.com/graphcommerce-org/graphcommerce/commit/eb14696fc65e084a06790c88a8218fb3003f7c2c) - `<WaitForQueries/>` will default to loading, restoring the previous behavior. This might introduce , this might introduce an additional spinner but prevents a flash where it is shown that there is no cart ([@paales](https://github.com/paales))
|
|
75
278
|
|
|
76
279
|
## 8.0.3-canary.6
|
|
77
280
|
|
|
@@ -79,15 +282,13 @@
|
|
|
79
282
|
|
|
80
283
|
### Patch Changes
|
|
81
284
|
|
|
82
|
-
- [#2212](https://github.com/graphcommerce-org/graphcommerce/pull/2212) [`e12d1dc`](https://github.com/graphcommerce-org/graphcommerce/commit/e12d1dc201bf7b23a996bd58a256a117b91a9334) - Rename validation to rules for all Form field components and deprecate validation
|
|
83
|
-
([@paales](https://github.com/paales))
|
|
285
|
+
- [#2212](https://github.com/graphcommerce-org/graphcommerce/pull/2212) [`e12d1dc`](https://github.com/graphcommerce-org/graphcommerce/commit/e12d1dc201bf7b23a996bd58a256a117b91a9334) - Rename validation to rules for all Form field components and deprecate validation ([@paales](https://github.com/paales))
|
|
84
286
|
|
|
85
287
|
## 8.0.3-canary.4
|
|
86
288
|
|
|
87
289
|
### Patch Changes
|
|
88
290
|
|
|
89
|
-
- [#2203](https://github.com/graphcommerce-org/graphcommerce/pull/2203) [`7ef7dc7`](https://github.com/graphcommerce-org/graphcommerce/commit/7ef7dc7631f61a2feba67a531a210df9c22fed4b) - CheckboxElement, MultiSelectElement, NumberFieldElement, SelectElement, SliderElement and TextFieldElement have their inputRef passed, allowing focus to be set by the form.
|
|
90
|
-
([@Jessevdpoel](https://github.com/Jessevdpoel))
|
|
291
|
+
- [#2203](https://github.com/graphcommerce-org/graphcommerce/pull/2203) [`7ef7dc7`](https://github.com/graphcommerce-org/graphcommerce/commit/7ef7dc7631f61a2feba67a531a210df9c22fed4b) - CheckboxElement, MultiSelectElement, NumberFieldElement, SelectElement, SliderElement and TextFieldElement have their inputRef passed, allowing focus to be set by the form. ([@Jessevdpoel](https://github.com/Jessevdpoel))
|
|
91
292
|
|
|
92
293
|
## 8.0.3-canary.3
|
|
93
294
|
|
|
@@ -95,8 +296,7 @@
|
|
|
95
296
|
|
|
96
297
|
### Patch Changes
|
|
97
298
|
|
|
98
|
-
- [#2205](https://github.com/graphcommerce-org/graphcommerce/pull/2205) [`eb14696`](https://github.com/graphcommerce-org/graphcommerce/commit/eb14696fc65e084a06790c88a8218fb3003f7c2c) - `<WaitForQueries/>` will default to loading, restoring the previous behavior. This might introduce , this might introduce an additional spinner but prevents a flash where it is shown that there is no cart
|
|
99
|
-
([@paales](https://github.com/paales))
|
|
299
|
+
- [#2205](https://github.com/graphcommerce-org/graphcommerce/pull/2205) [`eb14696`](https://github.com/graphcommerce-org/graphcommerce/commit/eb14696fc65e084a06790c88a8218fb3003f7c2c) - `<WaitForQueries/>` will default to loading, restoring the previous behavior. This might introduce , this might introduce an additional spinner but prevents a flash where it is shown that there is no cart ([@paales](https://github.com/paales))
|
|
100
300
|
|
|
101
301
|
## 8.0.3-canary.1
|
|
102
302
|
|
|
@@ -128,19 +328,15 @@
|
|
|
128
328
|
|
|
129
329
|
### Minor Changes
|
|
130
330
|
|
|
131
|
-
- [#2111](https://github.com/graphcommerce-org/graphcommerce/pull/2111) [`35f3d3e`](https://github.com/graphcommerce-org/graphcommerce/commit/35f3d3eaf46f4b782bb1149e0efb0ec3819442d6) - Only show network errors in development mode.
|
|
132
|
-
([@Jessevdpoel](https://github.com/Jessevdpoel))
|
|
331
|
+
- [#2111](https://github.com/graphcommerce-org/graphcommerce/pull/2111) [`35f3d3e`](https://github.com/graphcommerce-org/graphcommerce/commit/35f3d3eaf46f4b782bb1149e0efb0ec3819442d6) - Only show network errors in development mode. ([@Jessevdpoel](https://github.com/Jessevdpoel))
|
|
133
332
|
|
|
134
|
-
- [#2048](https://github.com/graphcommerce-org/graphcommerce/pull/2048) [`13e23e4`](https://github.com/graphcommerce-org/graphcommerce/commit/13e23e4265bac70fb4d0830e4661019e71ce299f) - Wishlist will now support configurable products and uses the `<ActionCardLayout/>`
|
|
135
|
-
([@Jessevdpoel](https://github.com/Jessevdpoel))
|
|
333
|
+
- [#2048](https://github.com/graphcommerce-org/graphcommerce/pull/2048) [`13e23e4`](https://github.com/graphcommerce-org/graphcommerce/commit/13e23e4265bac70fb4d0830e4661019e71ce299f) - Wishlist will now support configurable products and uses the `<ActionCardLayout/>` ([@Jessevdpoel](https://github.com/Jessevdpoel))
|
|
136
334
|
|
|
137
|
-
- [#2018](https://github.com/graphcommerce-org/graphcommerce/pull/2018) [`750aa6a`](https://github.com/graphcommerce-org/graphcommerce/commit/750aa6a72710869d54244467253212e551d335e0) - Changed the layout of the succes page. We are using ActionCards right now to match the design of the cart.
|
|
138
|
-
([@Jessevdpoel](https://github.com/Jessevdpoel))
|
|
335
|
+
- [#2018](https://github.com/graphcommerce-org/graphcommerce/pull/2018) [`750aa6a`](https://github.com/graphcommerce-org/graphcommerce/commit/750aa6a72710869d54244467253212e551d335e0) - Changed the layout of the succes page. We are using ActionCards right now to match the design of the cart. ([@Jessevdpoel](https://github.com/Jessevdpoel))
|
|
139
336
|
|
|
140
337
|
### Patch Changes
|
|
141
338
|
|
|
142
|
-
- [`e33660f`](https://github.com/graphcommerce-org/graphcommerce/commit/e33660f172466dcfa0ab7262cee612d9a3e47776) - Accessibility improvements for the frontend: Added skip content link. Removed empty buttons from tab flow. Gave focus to elements (such as the menu) that appear when after clicking a button. Improved aria labels where needed
|
|
143
|
-
([@FrankHarland](https://github.com/FrankHarland))
|
|
339
|
+
- [`e33660f`](https://github.com/graphcommerce-org/graphcommerce/commit/e33660f172466dcfa0ab7262cee612d9a3e47776) - Accessibility improvements for the frontend: Added skip content link. Removed empty buttons from tab flow. Gave focus to elements (such as the menu) that appear when after clicking a button. Improved aria labels where needed ([@FrankHarland](https://github.com/FrankHarland))
|
|
144
340
|
|
|
145
341
|
## 8.0.0-canary.100
|
|
146
342
|
|
|
@@ -192,8 +388,7 @@
|
|
|
192
388
|
|
|
193
389
|
### Patch Changes
|
|
194
390
|
|
|
195
|
-
- [`e33660f`](https://github.com/graphcommerce-org/graphcommerce/commit/e33660f172466dcfa0ab7262cee612d9a3e47776) - a11y improvements (see https://github.com/graphcommerce-org/graphcommerce/issues/1995 for more info)
|
|
196
|
-
([@FrankHarland](https://github.com/FrankHarland))
|
|
391
|
+
- [`e33660f`](https://github.com/graphcommerce-org/graphcommerce/commit/e33660f172466dcfa0ab7262cee612d9a3e47776) - a11y improvements (see https://github.com/graphcommerce-org/graphcommerce/issues/1995 for more info) ([@FrankHarland](https://github.com/FrankHarland))
|
|
197
392
|
|
|
198
393
|
## 8.0.0-canary.76
|
|
199
394
|
|
|
@@ -1285,31 +1480,31 @@
|
|
|
1285
1480
|
All occurences of `<Trans>` and `t` need to be replaced:
|
|
1286
1481
|
|
|
1287
1482
|
```tsx
|
|
1288
|
-
import { Trans, t } from
|
|
1483
|
+
import { Trans, t } from '@lingui/macro'
|
|
1289
1484
|
|
|
1290
1485
|
function MyComponent() {
|
|
1291
|
-
const foo =
|
|
1486
|
+
const foo = 'bar'
|
|
1292
1487
|
return (
|
|
1293
1488
|
<div aria-label={t`Account ${foo}`}>
|
|
1294
1489
|
<Trans>My Translation {foo}</Trans>
|
|
1295
1490
|
</div>
|
|
1296
|
-
)
|
|
1491
|
+
)
|
|
1297
1492
|
}
|
|
1298
1493
|
```
|
|
1299
1494
|
|
|
1300
1495
|
Needs to be replaced with:
|
|
1301
1496
|
|
|
1302
1497
|
```tsx
|
|
1303
|
-
import { Trans } from
|
|
1304
|
-
import { i18n } from
|
|
1498
|
+
import { Trans } from '@lingui/react'
|
|
1499
|
+
import { i18n } from '@lingui/core'
|
|
1305
1500
|
|
|
1306
1501
|
function MyComponent() {
|
|
1307
|
-
const foo =
|
|
1502
|
+
const foo = 'bar'
|
|
1308
1503
|
return (
|
|
1309
1504
|
<div aria-label={i18n._(/* i18n */ `Account {foo}`, { foo })}>
|
|
1310
|
-
<Trans key=
|
|
1505
|
+
<Trans key='My Translation {foo}' values={{ foo }}></Trans>
|
|
1311
1506
|
</div>
|
|
1312
|
-
)
|
|
1507
|
+
)
|
|
1313
1508
|
}
|
|
1314
1509
|
```
|
|
1315
1510
|
|
package/Config.graphqls
ADDED
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
enum WebsitePermissions {
|
|
2
|
+
ENABLED
|
|
3
|
+
# CUSTOMER_ONLY will be implemented later
|
|
4
|
+
# DISABLED will be implemented later
|
|
5
|
+
}
|
|
6
|
+
|
|
7
|
+
input GraphCommercePermissions {
|
|
8
|
+
website: WebsitePermissions
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
extend input GraphCommerceConfig {
|
|
12
|
+
"""
|
|
13
|
+
Allows the option to require login or completely disable certain sections of the site, can be overriden per storeview with the storefrontConfig
|
|
14
|
+
"""
|
|
15
|
+
permissions: GraphCommercePermissions
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
extend input GraphCommerceStorefrontConfig {
|
|
19
|
+
"""
|
|
20
|
+
Allows the option to require login or completely disable certain sections of the site on a per store basis
|
|
21
|
+
"""
|
|
22
|
+
permissions: GraphCommercePermissions
|
|
23
|
+
}
|
|
@@ -0,0 +1,88 @@
|
|
|
1
|
+
import { ActionCardList, ActionCardListProps, ActionCardProps } from '@graphcommerce/next-ui'
|
|
2
|
+
import { ControllerProps, FieldValues, useController } from '@graphcommerce/react-hook-form'
|
|
3
|
+
import React, { MouseEventHandler } from 'react'
|
|
4
|
+
|
|
5
|
+
export type ActionCardItemBase = Pick<ActionCardProps, 'value'>
|
|
6
|
+
|
|
7
|
+
export type ActionCardRequireOptionSelection = { requireOptionSelection?: boolean }
|
|
8
|
+
|
|
9
|
+
export type ActionCardItemRenderProps<T> = ActionCardProps & {
|
|
10
|
+
onReset: MouseEventHandler<HTMLElement>
|
|
11
|
+
} & T
|
|
12
|
+
|
|
13
|
+
export type ActionCardListFormProps<A, F extends FieldValues = FieldValues> = Omit<
|
|
14
|
+
ActionCardListProps,
|
|
15
|
+
'value' | 'error' | 'onChange' | 'children'
|
|
16
|
+
> &
|
|
17
|
+
Omit<ControllerProps<F>, 'render'> & {
|
|
18
|
+
items: A[]
|
|
19
|
+
render: React.FC<ActionCardItemRenderProps<A>>
|
|
20
|
+
} & ActionCardRequireOptionSelection
|
|
21
|
+
|
|
22
|
+
export function ActionCardListForm<
|
|
23
|
+
T extends ActionCardItemBase,
|
|
24
|
+
F extends FieldValues = FieldValues,
|
|
25
|
+
>(props: ActionCardListFormProps<T, F>) {
|
|
26
|
+
const {
|
|
27
|
+
required,
|
|
28
|
+
rules,
|
|
29
|
+
items,
|
|
30
|
+
render,
|
|
31
|
+
control,
|
|
32
|
+
name,
|
|
33
|
+
errorMessage,
|
|
34
|
+
defaultValue,
|
|
35
|
+
multiple,
|
|
36
|
+
disabled,
|
|
37
|
+
shouldUnregister,
|
|
38
|
+
requireOptionSelection,
|
|
39
|
+
...other
|
|
40
|
+
} = props
|
|
41
|
+
const RenderItem = render as React.FC<ActionCardItemRenderProps<ActionCardItemBase>>
|
|
42
|
+
|
|
43
|
+
function onSelect(itemValue: unknown, selectValues: unknown) {
|
|
44
|
+
return multiple
|
|
45
|
+
? Array.isArray(selectValues) && selectValues.some((selectValue) => selectValue === itemValue)
|
|
46
|
+
: selectValues === itemValue
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
const {
|
|
50
|
+
field: { onChange, value, ref },
|
|
51
|
+
fieldState,
|
|
52
|
+
formState,
|
|
53
|
+
} = useController({
|
|
54
|
+
...props,
|
|
55
|
+
control,
|
|
56
|
+
name,
|
|
57
|
+
defaultValue,
|
|
58
|
+
rules: { required, ...rules },
|
|
59
|
+
disabled,
|
|
60
|
+
shouldUnregister,
|
|
61
|
+
})
|
|
62
|
+
|
|
63
|
+
return (
|
|
64
|
+
<ActionCardList
|
|
65
|
+
{...other}
|
|
66
|
+
multiple={multiple}
|
|
67
|
+
required={required}
|
|
68
|
+
value={value}
|
|
69
|
+
ref={ref}
|
|
70
|
+
onChange={(_, incomming) => onChange(incomming)}
|
|
71
|
+
error={formState.isSubmitted && !!fieldState.error}
|
|
72
|
+
errorMessage={fieldState.error?.message}
|
|
73
|
+
>
|
|
74
|
+
{items.map((item) => (
|
|
75
|
+
<RenderItem
|
|
76
|
+
{...item}
|
|
77
|
+
key={`${item.value}`}
|
|
78
|
+
value={item.value}
|
|
79
|
+
selected={onSelect(item.value, value)}
|
|
80
|
+
onReset={(e) => {
|
|
81
|
+
e.preventDefault()
|
|
82
|
+
if (!requireOptionSelection) onChange(null)
|
|
83
|
+
}}
|
|
84
|
+
/>
|
|
85
|
+
))}
|
|
86
|
+
</ActionCardList>
|
|
87
|
+
)
|
|
88
|
+
}
|
|
@@ -1,5 +1,10 @@
|
|
|
1
1
|
/* eslint-disable @typescript-eslint/no-restricted-imports */
|
|
2
|
-
import {
|
|
2
|
+
import {
|
|
3
|
+
Controller,
|
|
4
|
+
ControllerProps,
|
|
5
|
+
FieldValues,
|
|
6
|
+
useController,
|
|
7
|
+
} from '@graphcommerce/react-hook-form'
|
|
3
8
|
import { i18n } from '@lingui/core'
|
|
4
9
|
import {
|
|
5
10
|
Autocomplete,
|
|
@@ -48,6 +53,9 @@ export function AutocompleteElement<TFieldValues extends FieldValues>({
|
|
|
48
53
|
multiple,
|
|
49
54
|
matchId,
|
|
50
55
|
label,
|
|
56
|
+
disabled,
|
|
57
|
+
defaultValue,
|
|
58
|
+
shouldUnregister,
|
|
51
59
|
}: AutocompleteElementProps<
|
|
52
60
|
TFieldValues,
|
|
53
61
|
AutoDefault | string | any,
|
|
@@ -60,99 +68,102 @@ export function AutocompleteElement<TFieldValues extends FieldValues>({
|
|
|
60
68
|
required: rules?.required || i18n._(/* i18n */ 'This field is required'),
|
|
61
69
|
}),
|
|
62
70
|
}
|
|
71
|
+
|
|
72
|
+
const {
|
|
73
|
+
field: { onChange, onBlur, value, ...fieldRest },
|
|
74
|
+
fieldState: { error },
|
|
75
|
+
} = useController({
|
|
76
|
+
name,
|
|
77
|
+
control,
|
|
78
|
+
rules: validationRules,
|
|
79
|
+
defaultValue,
|
|
80
|
+
disabled,
|
|
81
|
+
shouldUnregister,
|
|
82
|
+
})
|
|
83
|
+
|
|
84
|
+
const values = Array.isArray(value) ? (value as (typeof value)[]) : [value]
|
|
85
|
+
let currentValue = multiple ? value || [] : value || null
|
|
86
|
+
if (matchId) {
|
|
87
|
+
currentValue = multiple
|
|
88
|
+
? values.map((i: any) => options.find((j) => (j.id || j) === i))
|
|
89
|
+
: options.find((i) => (i.id || i) === value) || null
|
|
90
|
+
}
|
|
91
|
+
|
|
63
92
|
return (
|
|
64
|
-
<
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
93
|
+
<Autocomplete
|
|
94
|
+
{...autocompleteProps}
|
|
95
|
+
value={currentValue}
|
|
96
|
+
loading={loading}
|
|
97
|
+
multiple={multiple}
|
|
98
|
+
options={options}
|
|
99
|
+
disableCloseOnSelect={
|
|
100
|
+
typeof autocompleteProps?.disableCloseOnSelect === 'boolean'
|
|
101
|
+
? autocompleteProps.disableCloseOnSelect
|
|
102
|
+
: !!multiple
|
|
103
|
+
}
|
|
104
|
+
isOptionEqualToValue={
|
|
105
|
+
autocompleteProps?.isOptionEqualToValue
|
|
106
|
+
? autocompleteProps.isOptionEqualToValue
|
|
107
|
+
: (option, v) => (v ? option.id === (v?.id || v) : false)
|
|
108
|
+
}
|
|
109
|
+
getOptionLabel={
|
|
110
|
+
autocompleteProps?.getOptionLabel
|
|
111
|
+
? autocompleteProps.getOptionLabel
|
|
112
|
+
: (option) => `${option?.label || option}`
|
|
113
|
+
}
|
|
114
|
+
onChange={(event, value, reason, details) => {
|
|
115
|
+
let changedVal = value
|
|
71
116
|
if (matchId) {
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
117
|
+
changedVal = Array.isArray(value) ? value.map((i: any) => i?.id || i) : value?.id || value
|
|
118
|
+
}
|
|
119
|
+
onChange(changedVal)
|
|
120
|
+
if (autocompleteProps?.onChange) {
|
|
121
|
+
autocompleteProps.onChange(event, value, reason, details)
|
|
122
|
+
}
|
|
123
|
+
}}
|
|
124
|
+
renderOption={
|
|
125
|
+
autocompleteProps?.renderOption ??
|
|
126
|
+
(showCheckbox
|
|
127
|
+
? (props, option, { selected }) => (
|
|
128
|
+
<li {...props}>
|
|
129
|
+
<Checkbox sx={{ marginRight: 1 }} checked={selected} />
|
|
130
|
+
{autocompleteProps?.getOptionLabel?.(option) || option.label || option}
|
|
131
|
+
</li>
|
|
132
|
+
)
|
|
133
|
+
: undefined)
|
|
134
|
+
}
|
|
135
|
+
onBlur={(event) => {
|
|
136
|
+
onBlur()
|
|
137
|
+
if (typeof autocompleteProps?.onBlur === 'function') {
|
|
138
|
+
autocompleteProps.onBlur(event)
|
|
75
139
|
}
|
|
76
|
-
return (
|
|
77
|
-
<Autocomplete
|
|
78
|
-
{...autocompleteProps}
|
|
79
|
-
value={currentValue}
|
|
80
|
-
loading={loading}
|
|
81
|
-
multiple={multiple}
|
|
82
|
-
options={options}
|
|
83
|
-
disableCloseOnSelect={
|
|
84
|
-
typeof autocompleteProps?.disableCloseOnSelect === 'boolean'
|
|
85
|
-
? autocompleteProps.disableCloseOnSelect
|
|
86
|
-
: !!multiple
|
|
87
|
-
}
|
|
88
|
-
isOptionEqualToValue={
|
|
89
|
-
autocompleteProps?.isOptionEqualToValue
|
|
90
|
-
? autocompleteProps.isOptionEqualToValue
|
|
91
|
-
: (option, v) => (v ? option.id === (v?.id || v) : false)
|
|
92
|
-
}
|
|
93
|
-
getOptionLabel={
|
|
94
|
-
autocompleteProps?.getOptionLabel
|
|
95
|
-
? autocompleteProps.getOptionLabel
|
|
96
|
-
: (option) => `${option?.label || option}`
|
|
97
|
-
}
|
|
98
|
-
onChange={(event, value, reason, details) => {
|
|
99
|
-
let changedVal = value
|
|
100
|
-
if (matchId) {
|
|
101
|
-
changedVal = Array.isArray(value)
|
|
102
|
-
? value.map((i: any) => i?.id || i)
|
|
103
|
-
: value?.id || value
|
|
104
|
-
}
|
|
105
|
-
onChange(changedVal)
|
|
106
|
-
if (autocompleteProps?.onChange) {
|
|
107
|
-
autocompleteProps.onChange(event, value, reason, details)
|
|
108
|
-
}
|
|
109
|
-
}}
|
|
110
|
-
renderOption={
|
|
111
|
-
autocompleteProps?.renderOption ??
|
|
112
|
-
(showCheckbox
|
|
113
|
-
? (props, option, { selected }) => (
|
|
114
|
-
<li {...props}>
|
|
115
|
-
<Checkbox sx={{ marginRight: 1 }} checked={selected} />
|
|
116
|
-
{autocompleteProps?.getOptionLabel?.(option) || option.label || option}
|
|
117
|
-
</li>
|
|
118
|
-
)
|
|
119
|
-
: undefined)
|
|
120
|
-
}
|
|
121
|
-
onBlur={(event) => {
|
|
122
|
-
onBlur()
|
|
123
|
-
if (typeof autocompleteProps?.onBlur === 'function') {
|
|
124
|
-
autocompleteProps.onBlur(event)
|
|
125
|
-
}
|
|
126
|
-
}}
|
|
127
|
-
renderInput={(params) => (
|
|
128
|
-
<TextField
|
|
129
|
-
name={name}
|
|
130
|
-
required={rules?.required ? true : required}
|
|
131
|
-
label={label}
|
|
132
|
-
{...textFieldProps}
|
|
133
|
-
{...params}
|
|
134
|
-
error={!!error}
|
|
135
|
-
InputProps={{
|
|
136
|
-
...params.InputProps,
|
|
137
|
-
endAdornment: (
|
|
138
|
-
<>
|
|
139
|
-
{loading ? <CircularProgress color='inherit' size={20} /> : null}
|
|
140
|
-
{params.InputProps.endAdornment}
|
|
141
|
-
</>
|
|
142
|
-
),
|
|
143
|
-
...textFieldProps?.InputProps,
|
|
144
|
-
}}
|
|
145
|
-
inputProps={{
|
|
146
|
-
...params.inputProps,
|
|
147
|
-
...textFieldProps?.inputProps,
|
|
148
|
-
}}
|
|
149
|
-
helperText={error ? error.message : textFieldProps?.helperText}
|
|
150
|
-
/>
|
|
151
|
-
)}
|
|
152
|
-
{...fieldRest}
|
|
153
|
-
/>
|
|
154
|
-
)
|
|
155
140
|
}}
|
|
141
|
+
renderInput={(params) => (
|
|
142
|
+
<TextField
|
|
143
|
+
name={name}
|
|
144
|
+
required={rules?.required ? true : required}
|
|
145
|
+
label={label}
|
|
146
|
+
{...textFieldProps}
|
|
147
|
+
{...params}
|
|
148
|
+
error={!!error}
|
|
149
|
+
InputProps={{
|
|
150
|
+
...params.InputProps,
|
|
151
|
+
endAdornment: (
|
|
152
|
+
<>
|
|
153
|
+
{loading ? <CircularProgress color='inherit' size={20} /> : null}
|
|
154
|
+
{params.InputProps.endAdornment}
|
|
155
|
+
</>
|
|
156
|
+
),
|
|
157
|
+
...textFieldProps?.InputProps,
|
|
158
|
+
}}
|
|
159
|
+
inputProps={{
|
|
160
|
+
...params.inputProps,
|
|
161
|
+
...textFieldProps?.inputProps,
|
|
162
|
+
}}
|
|
163
|
+
helperText={error ? error.message : textFieldProps?.helperText}
|
|
164
|
+
/>
|
|
165
|
+
)}
|
|
166
|
+
{...fieldRest}
|
|
156
167
|
/>
|
|
157
168
|
)
|
|
158
169
|
}
|