@graphcommerce/ecommerce-ui 8.1.0-canary.9 → 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 +230 -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,213 @@
|
|
|
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
|
+
|
|
3
211
|
## 8.1.0-canary.9
|
|
4
212
|
|
|
5
213
|
## 8.1.0-canary.8
|
|
@@ -18,15 +226,11 @@
|
|
|
18
226
|
|
|
19
227
|
### Patch Changes
|
|
20
228
|
|
|
21
|
-
- [#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
|
|
22
|
-
([@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))
|
|
23
230
|
|
|
24
|
-
- [#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.
|
|
25
|
-
Convert SelectElement to useController instead of a separate Controller component.
|
|
26
|
-
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))
|
|
27
232
|
|
|
28
|
-
- [#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.
|
|
29
|
-
([@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))
|
|
30
234
|
|
|
31
235
|
## 8.0.6-canary.1
|
|
32
236
|
|
|
@@ -66,14 +270,11 @@
|
|
|
66
270
|
|
|
67
271
|
### Patch Changes
|
|
68
272
|
|
|
69
|
-
- [#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
|
|
70
|
-
([@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))
|
|
71
274
|
|
|
72
|
-
- [#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.
|
|
73
|
-
([@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))
|
|
74
276
|
|
|
75
|
-
- [#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
|
|
76
|
-
([@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))
|
|
77
278
|
|
|
78
279
|
## 8.0.3-canary.6
|
|
79
280
|
|
|
@@ -81,15 +282,13 @@
|
|
|
81
282
|
|
|
82
283
|
### Patch Changes
|
|
83
284
|
|
|
84
|
-
- [#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
|
|
85
|
-
([@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))
|
|
86
286
|
|
|
87
287
|
## 8.0.3-canary.4
|
|
88
288
|
|
|
89
289
|
### Patch Changes
|
|
90
290
|
|
|
91
|
-
- [#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.
|
|
92
|
-
([@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))
|
|
93
292
|
|
|
94
293
|
## 8.0.3-canary.3
|
|
95
294
|
|
|
@@ -97,8 +296,7 @@
|
|
|
97
296
|
|
|
98
297
|
### Patch Changes
|
|
99
298
|
|
|
100
|
-
- [#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
|
|
101
|
-
([@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))
|
|
102
300
|
|
|
103
301
|
## 8.0.3-canary.1
|
|
104
302
|
|
|
@@ -130,19 +328,15 @@
|
|
|
130
328
|
|
|
131
329
|
### Minor Changes
|
|
132
330
|
|
|
133
|
-
- [#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.
|
|
134
|
-
([@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))
|
|
135
332
|
|
|
136
|
-
- [#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/>`
|
|
137
|
-
([@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))
|
|
138
334
|
|
|
139
|
-
- [#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.
|
|
140
|
-
([@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))
|
|
141
336
|
|
|
142
337
|
### Patch Changes
|
|
143
338
|
|
|
144
|
-
- [`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
|
|
145
|
-
([@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))
|
|
146
340
|
|
|
147
341
|
## 8.0.0-canary.100
|
|
148
342
|
|
|
@@ -194,8 +388,7 @@
|
|
|
194
388
|
|
|
195
389
|
### Patch Changes
|
|
196
390
|
|
|
197
|
-
- [`e33660f`](https://github.com/graphcommerce-org/graphcommerce/commit/e33660f172466dcfa0ab7262cee612d9a3e47776) - a11y improvements (see https://github.com/graphcommerce-org/graphcommerce/issues/1995 for more info)
|
|
198
|
-
([@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))
|
|
199
392
|
|
|
200
393
|
## 8.0.0-canary.76
|
|
201
394
|
|
|
@@ -1287,31 +1480,31 @@
|
|
|
1287
1480
|
All occurences of `<Trans>` and `t` need to be replaced:
|
|
1288
1481
|
|
|
1289
1482
|
```tsx
|
|
1290
|
-
import { Trans, t } from
|
|
1483
|
+
import { Trans, t } from '@lingui/macro'
|
|
1291
1484
|
|
|
1292
1485
|
function MyComponent() {
|
|
1293
|
-
const foo =
|
|
1486
|
+
const foo = 'bar'
|
|
1294
1487
|
return (
|
|
1295
1488
|
<div aria-label={t`Account ${foo}`}>
|
|
1296
1489
|
<Trans>My Translation {foo}</Trans>
|
|
1297
1490
|
</div>
|
|
1298
|
-
)
|
|
1491
|
+
)
|
|
1299
1492
|
}
|
|
1300
1493
|
```
|
|
1301
1494
|
|
|
1302
1495
|
Needs to be replaced with:
|
|
1303
1496
|
|
|
1304
1497
|
```tsx
|
|
1305
|
-
import { Trans } from
|
|
1306
|
-
import { i18n } from
|
|
1498
|
+
import { Trans } from '@lingui/react'
|
|
1499
|
+
import { i18n } from '@lingui/core'
|
|
1307
1500
|
|
|
1308
1501
|
function MyComponent() {
|
|
1309
|
-
const foo =
|
|
1502
|
+
const foo = 'bar'
|
|
1310
1503
|
return (
|
|
1311
1504
|
<div aria-label={i18n._(/* i18n */ `Account {foo}`, { foo })}>
|
|
1312
|
-
<Trans key=
|
|
1505
|
+
<Trans key='My Translation {foo}' values={{ foo }}></Trans>
|
|
1313
1506
|
</div>
|
|
1314
|
-
)
|
|
1507
|
+
)
|
|
1315
1508
|
}
|
|
1316
1509
|
```
|
|
1317
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
|
}
|