@graphcommerce/docs 4.5.2 → 4.5.5

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 (8) hide show
  1. package/CHANGELOG.md +20 -0
  2. package/framework/icons.md +1 -1
  3. package/framework/translations.md +182 -4
  4. package/getting-started/create.md +18 -11
  5. package/getting-started/header.md +2 -2
  6. package/package.json +2 -2
  7. package/roadmap.md +5 -7
  8. package/upgrading.md +1 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,25 @@
1
1
  # Change Log
2
2
 
3
+ ## 4.5.5
4
+
5
+ ### Patch Changes
6
+
7
+ - [#1374](https://github.com/graphcommerce-org/graphcommerce/pull/1374) [`180cc0f43`](https://github.com/graphcommerce-org/graphcommerce/commit/180cc0f43bd22ac140cb50c015f7eecc85f7e911) Thanks [@timhofman](https://github.com/timhofman)! - header styling doc steps breaks page due to missing import
8
+
9
+ * [#1375](https://github.com/graphcommerce-org/graphcommerce/pull/1375) [`451ece476`](https://github.com/graphcommerce-org/graphcommerce/commit/451ece476b6413206ca1afdf39bedb59f72d6547) Thanks [@FrankHarland](https://github.com/FrankHarland)! - Specify PSP's so its easier to check when upgrade what one should remove
10
+
11
+ ## 4.5.4
12
+
13
+ ### Patch Changes
14
+
15
+ - [#1378](https://github.com/graphcommerce-org/graphcommerce/pull/1378) [`b610a6e40`](https://github.com/graphcommerce-org/graphcommerce/commit/b610a6e4049e8c9e8b5d2aeff31b8e1bfc24abe5) Thanks [@paales](https://github.com/paales)! - Pin all versions internally so we can’t end up in an unfixable state for the user
16
+
17
+ ## 4.5.3
18
+
19
+ ### Patch Changes
20
+
21
+ - [#1373](https://github.com/graphcommerce-org/graphcommerce/pull/1373) [`48cb78229`](https://github.com/graphcommerce-org/graphcommerce/commit/48cb782299a9efecffbe338e2954af03293e27c8) Thanks [@ErwinOtten](https://github.com/ErwinOtten)! - Update docs, translations
22
+
3
23
  ## 4.5.2
4
24
 
5
25
  ### Patch Changes
package/framework/icons.md CHANGED
@@ -76,7 +76,7 @@ In /components/Layout/LayoutFull.tsx:
76
76
 
77
77
  ```tsx
78
78
  ...
79
- import iconCustomerService from '@graphcommerce/next-ui'
79
+ import { iconCustomerService } from '@graphcommerce/next-ui'
80
80
 
81
81
  ...
82
82
  return (
package/framework/translations.md CHANGED
@@ -71,15 +71,30 @@ Add Linqui to the component's imports:
71
71
  import { t, Trans } from '@lingui/macro'
72
72
  ```
73
73
 
74
- Add the msgid and translation to the translation files:
74
+ Run `yarn lingui`. All new (missing) translations will be added to translations
75
+ files:
76
+
77
+ ```tsx
78
+ //Example terminal output
79
+
80
+ ┌─────────────┬─────────────┬─────────┐
81
+ │ Language │ Total count │ Missing │
82
+ ├─────────────┼─────────────┼─────────┤
83
+ │ en (source) │ 208 │ - │
84
+ │ nl │ 208 │ 1 │
85
+ │ es │ 208 │ 1 │
86
+ └─────────────┴─────────────┴─────────┘
87
+ ```
88
+
89
+ Edit the translations files to add your translation:
75
90
 
76
91
  ```ts
77
- Example of /locales/es.po
92
+ //Example from /locales/es.po
78
93
 
79
94
  ...
80
95
 
81
96
  msgid "Call us now"
82
- msgstr "Llámanos ahora"
97
+ msgstr ""
83
98
  ```
84
99
 
85
100
  ## Passing `{values}` to translations
@@ -96,7 +111,7 @@ You can pass values in msgid's:
96
111
  The syntax in the translation files:
97
112
 
98
113
  ```ts
99
- Example of /locales/en.po
114
+ //Example from /locales/en.po
100
115
 
101
116
  ...
102
117
 
@@ -107,6 +122,169 @@ msgid "Cart ({0})"
107
122
  msgstr "Cart ({0})"
108
123
  ```
109
124
 
125
+ ## Adding a new language
126
+
127
+ 1. Create a new storeview and configure the locale,
128
+ `Admin > Store > Configuration > General > General > Locale`. Choose one of
129
+ the options from the Magento Locale codes (below).
130
+ 2. In your .env file, add the desired route and store_code to the
131
+ `NEXT_PUBLIC_LOCALE_STORES` environment variable. The route will be visible
132
+ to the user (added to the url) when the user switches storeview.
133
+
134
+ It's considered best practice to match the route with the locale code,
135
+ replacing an underscore for a dash. For example, to add Swedish (Finland),
136
+ which has locale code sv_FI, add the following:
137
+
138
+ ```tsx
139
+ //Example from .env
140
+
141
+ NEXT_PUBLIC_LOCALE_STORES =
142
+ '{"en-us":"default",sv-fi":"[store_code from desired storeview]"}'
143
+ ```
144
+
145
+ 3. Run `yarn lingui`:
146
+
147
+ ```tsx
148
+ //Example terminal output
149
+
150
+ ┌─────────────┬─────────────┬─────────┐
151
+ │ Language │ Total count │ Missing │
152
+ ├─────────────┼─────────────┼─────────┤
153
+ │ en (source) │ 208 │ - │
154
+ │ sv │ 208 │ 208 │
155
+ └─────────────┴─────────────┴─────────┘
156
+ ```
157
+
158
+ 4. A new .po translation file will be generated in the /locales directory, the
159
+ filename matching the object key or, in case a locale code is used, matching
160
+ the charactes before the dash (which represent the language).
161
+
162
+ In the example above, the filename would result in `sv.po`:
163
+
164
+ ```tsx
165
+ //Example from /locales/sv.po
166
+
167
+ msgid ""
168
+ msgstr ""
169
+ "POT-Creation-Date: 2022-03-30 14:45+0200\n"
170
+ "MIME-Version: 1.0\n"
171
+ "Content-Type: text/plain; charset=utf-8\n"
172
+ "Content-Transfer-Encoding: 8bit\n"
173
+ "X-Generator: @lingui/cli\n"
174
+ "Language: sv\n"
175
+
176
+ msgid "<0>{name}</0> has been added to your shopping cart!"
177
+ msgstr ""
178
+
179
+ msgid "Above <0/>"
180
+ msgstr ""
181
+
182
+ msgid "Account"
183
+ msgstr ""
184
+
185
+ ```
186
+
187
+ 5. Add your translations ins the newly created .po file. Run the app and use the
188
+ store switcher to navigate to your new storeview.
189
+ [Github copilot ↗](https://copilot.github.com/) provides very accurate
190
+ suggestions in VS Code with the
191
+ [Github copilot extention ↗](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot).
192
+
193
+ ### Magento Locale codes
194
+
195
+ | Locale | Language (country) |
196
+ | ---------- | --------------------------------------------------- |
197
+ | af_ZA | Afrikaans (South Africa) |
198
+ | sq_AL | Albanian (Albania) |
199
+ | ar_DZ | Arabic (Algeria) |
200
+ | ar_EG | Arabic (Egypt) |
201
+ | ar_KW | Arabic (Kuwait) |
202
+ | ar_MA | Arabic (Morocco) |
203
+ | ar_SA | Arabic (Saudi Arabia) |
204
+ | az_Latn_AZ | Azerbaijani (Latijns, Azerbaijan) |
205
+ | bn_BD | Bangla (Bangladesh) |
206
+ | eu_ES | Basque (Spain) |
207
+ | be_BY | Belarusian (Belarus) |
208
+ | bs_Latn_BA | Bosnian (Latijns, Bosnia & Herzegovina) |
209
+ | bg_BG | Bulgarian (Bulgaria) |
210
+ | ca_ES | Catalan (Spain) |
211
+ | zh_Hant_HK | Chinese (traditioneel Chinees, Hong Kong SAR China) |
212
+ | zh_Hant_TW | Chinese (traditioneel Chinees, Taiwan) |
213
+ | zh_Hans_CN | Chinese (vereenvoudigd Chinees, China) |
214
+ | hr_HR | Croatian (Croatia) |
215
+ | cs_CZ | Czech (Czechia) |
216
+ | da_DK | Danish (Denmark) |
217
+ | nl_BE | Dutch (Belgium) |
218
+ | nl_NL | Dutch (Netherlands) |
219
+ | en_AU | English (Australia) |
220
+ | en_CA | English (Canada) |
221
+ | en_IE | English (Ireland) |
222
+ | en_NZ | English (New Zealand) |
223
+ | en_GB | English (United Kingdom) |
224
+ | en_US | English (United States) |
225
+ | et_EE | Estonian (Estonia) |
226
+ | fil_PH | Filipino (Philippines) |
227
+ | fi_FI | Finnish (Finland) |
228
+ | fr_BE | French (Belgium) |
229
+ | fr_CA | French (Canada) |
230
+ | fr_FR | French (France) |
231
+ | fr_LU | French (Luxembourg) |
232
+ | fr_CH | French (Switzerland) |
233
+ | gl_ES | Galician (Spain) |
234
+ | ka_GE | Georgian (Georgia) |
235
+ | de_AT | German (Austria) |
236
+ | de_DE | German (Germany) |
237
+ | de_LU | German (Luxembourg) |
238
+ | de_CH | German (Switzerland) |
239
+ | el_GR | Greek (Greece) |
240
+ | gu_IN | Gujarati (India) |
241
+ | he_IL | Hebrew (Israel) |
242
+ | hi_IN | Hindi (India) |
243
+ | hu_HU | Hungarian (Hungary) |
244
+ | is_IS | Icelandic (Iceland) |
245
+ | id_ID | Indonesian (Indonesia) |
246
+ | it_IT | Italian (Italy) |
247
+ | it_CH | Italian (Switzerland) |
248
+ | ja_JP | Japanese (Japan) |
249
+ | km_KH | Khmer (Cambodia) |
250
+ | ko_KR | Korean (South Korea) |
251
+ | lo_LA | Lao (Laos) |
252
+ | lv_LV | Latvian (Latvia) |
253
+ | lt_LT | Lithuanian (Lithuania) |
254
+ | mk_MK | Macedonian (North Macedonia) |
255
+ | ms_MY | Malay (Malaysia) |
256
+ | nb_NO | Norwegian Bokmål (Norway) |
257
+ | nn_NO | Norwegian Nynorsk (Norway) |
258
+ | fa_IR | Persian (Iran) |
259
+ | pl_PL | Polish (Poland) |
260
+ | pt_BR | Portuguese (Brazil) |
261
+ | pt_PT | Portuguese (Portugal) |
262
+ | ro_RO | Romanian (Romania) |
263
+ | ru_RU | Russian (Russia) |
264
+ | sr_Cyrl_RS | Serbian (Cyrillisch, Serbia) |
265
+ | sr_Latn_RS | Serbian (Latijns, Serbia) |
266
+ | sk_SK | Slovak (Slovakia) |
267
+ | sl_SI | Slovenian (Slovenia) |
268
+ | es_AR | Spanish (Argentina) |
269
+ | es_BO | Spanish (Bolivia) |
270
+ | es_CL | Spanish (Chile) |
271
+ | es_CO | Spanish (Colombia) |
272
+ | es_CR | Spanish (Costa Rica) |
273
+ | es_MX | Spanish (Mexico) |
274
+ | es_PA | Spanish (Panama) |
275
+ | es_PE | Spanish (Peru) |
276
+ | es_ES | Spanish (Spain) |
277
+ | es_US | Spanish (United States) |
278
+ | es_VE | Spanish (Venezuela) |
279
+ | sw_KE | Swahili (Kenya) |
280
+ | sv_FI | Swedish (Finland) |
281
+ | sv_SE | Swedish (Sweden) |
282
+ | th_TH | Thai (Thailand) |
283
+ | tr_TR | Turkish (Turkey) |
284
+ | uk_UA | Ukrainian (Ukraine) |
285
+ | vi_VN | Vietnamese (Vietnam) |
286
+ | cy_GB | Welsh (United Kingdom) |
287
+
110
288
  ## Next steps
111
289
 
112
290
  - Learn more about
package/getting-started/create.md CHANGED
@@ -71,7 +71,7 @@ https://user-images.githubusercontent.com/1251986/158647122-dc57002f-a9c2-4661-a
71
71
  4. `cd my-project`
72
72
  5. `cp -R .env.example .env`
73
73
  6. `rm CHANGELOG.md`
74
- 7. `rm -rf node_modules && rm -rf .next`
74
+ 7. `rm -r node_modules && rm -r .next`
75
75
 
76
76
  Edit /package.json. Delete `"scripts": {...}` and rename `scripts_local` to
77
77
  `scripts`:
@@ -110,22 +110,29 @@ project, you need to update variables in the /.env file. The .env file contains
110
110
  useful information about your storefront.
111
111
 
112
112
  `MAGENTO_ENDPOINT=""`
113
- Magento 2 API url, located at `http://<magento2-server>/graphql`.
113
+ Magento 2 API URL, located at `http://<magento2-server>/graphql`.
114
114
 
115
115
  `IMAGE_DOMAINS=",media.graphcms.com"`
116
116
  Comma-separated list of image domains. Add media.graphcms.com as default.
117
117
 
118
118
  `GRAPHCMS_URL=""`
119
- GraphCMS API url. Once logged in, copy it from Project Settings > Api Access >
119
+ GraphCMS API URL. Once logged in, copy it from Project Settings > Api Access >
120
120
  Content API
121
121
 
122
- `NEXT_PUBLIC_LOCALE_STORES='{"en": "en_US", "nl": "default"}'`
123
- List of routes and store_codes. In the above example, adding URL suffix /nl/
124
- would result in the storeview 'default' is loaded. GraphCommerce uses the
125
- browser language to determine which storeview to load. A URL suffix will be
126
- added as a result, with the exception of the first option in the list.
122
+ `NEXT_PUBLIC_LOCALE_STORES='{"en-us": "default", "en-ca": "canada"}'`
123
+ List of routes and store_codes:
127
124
 
128
- > If need to fetch a list of available store_codes, run `yarn dev` when you
125
+ - When the user switches to the Canadian storeview, the suffix /en-ca is added
126
+ to the URL.
127
+ - The first storeview in the object is loaded by default. No suffix is added to
128
+ the URL.
129
+ - The key (en-ca) is used to load the storeview
130
+ [translation](../framework/translations.md)
131
+ - When a users' browser language matches a storeviews' locale
132
+ (`Admin > Store > Configuration > General > General > Locale`), the user is
133
+ automatically redirected to the corresponding storeview.
134
+
135
+ > If you need to fetch a list of available store_codes, run `yarn dev` when you
129
136
  > entered your `MAGENTO_ENDPOINT`. The app won't build, but the GraphQL explorer
130
137
  > will start at `http://localhost:3000/api/graphql`. Enter the following query:
131
138
  >
@@ -143,8 +150,8 @@ added as a result, with the exception of the first option in the list.
143
150
  The example has Payment Service Providers integrated (Mollie, Braintree). Remove
144
151
  the ones your Magento backend doesn't support.
145
152
 
146
- - Remove `"@graphcommerce/[psp]"` from package.json
147
- - Remove all [psp] references from `pages/checkout/payment.tsx`
153
+ - Remove Payment Service integrations from package.json: `@graphcommerce/mollie-magento-payment` and/or `@graphcommerce/magento-payment-braintree`
154
+ - Remove Payment Service references from `pages/checkout/payment.tsx`
148
155
 
149
156
  ## Step 3: Start the development environment
150
157
 
package/getting-started/header.md CHANGED
@@ -207,8 +207,8 @@ marginThreshold={0}
207
207
  TransitionComponent={Fade}
208
208
  ```
209
209
 
210
- - Add the import of 'Fade' to the list of the `'@mui/material'` imports at the
211
- top of the file
210
+ - Add the import of 'alpha' and 'Fade' to the list of the `'@mui/material'`
211
+ imports at the top of the file
212
212
  - Remove the search component by removing:
213
213
 
214
214
  ```tsx
package/package.json CHANGED
@@ -2,10 +2,10 @@
2
2
  "name": "@graphcommerce/docs",
3
3
  "homepage": "https://www.graphcommerce.org/docs",
4
4
  "repository": "github:graphcommerce-org/graphcommerce/docs",
5
- "version": "4.5.2",
5
+ "version": "4.5.5",
6
6
  "sideEffects": true,
7
7
  "devDependencies": {
8
- "@graphcommerce/prettier-config-pwa": "^4.0.2"
8
+ "@graphcommerce/prettier-config-pwa": "^4.0.5"
9
9
  },
10
10
  "prettier": "@graphcommerce/prettier-config-pwa"
11
11
  }
package/roadmap.md CHANGED
@@ -9,16 +9,14 @@ The following overview contains the status of items on the GraphCommerce roadmap
9
9
 
10
10
  ## In progress
11
11
 
12
- - [x] Framework updates (Mui5)
13
- - [x] Translation updates (DE, NL, ES, FR, IT)
14
- - [x] Documentation and installation guide
15
- - [ ] Quality improvements (Reduce components, naming)
12
+ - [ ] Adyen payment service (Braintree, Mollie, Klarna, Paypal already
13
+ implemented)
14
+ - [ ] Wishlist
16
15
 
17
16
  ## Planned
18
17
 
19
- - [ ] Search integration (external service)
20
- - [ ] Checkout UI and accessibility improvements
21
- - [ ] Payment service provider integration
18
+ - [ ] Buckaroo payment service
19
+ - [ ] Multisafepay payment service
22
20
 
23
21
  ## Future
24
22
 
package/upgrading.md CHANGED
@@ -29,7 +29,7 @@ dependencies, while keeping your customizations.
29
29
  {
30
30
  "dependencies": {
31
31
  //...
32
- "@graphcommerce/next-ui": "^4.2.0"
32
+ "@graphcommerce/next-ui": "4.2.0"
33
33
  //...
34
34
  }
35
35
  }