Update Node to v20 (part 1) (#5438)

* Update Node version in package.json

* Update nvmrc

* Update package lock

* Add changeset

* Update docker and readme node versions

* Update assertion to use long dash

* Remove todo

* Use standardized hypen as fallback for money ranges

* Allow both node 18 and 20

* Update changeset

* Add note to readme

---------

Co-authored-by: Patryk Andrzejewski <[email protected]>

.changeset/mighty-fishes-happen.md

@@ -0,0 +1,5 @@
+---
+"saleor-dashboard": patch
+---
+
+Node 20 can be now used along with Node 18, which will be removed in next release.

.nvmrc

@@ -1 +1 @@
-18
+20

Dockerfile

@@ -1,4 +1,4 @@
-FROM node:18-alpine as builder
+FROM node:20-alpine as builder
 RUN apk --no-cache add bash
 WORKDIR /app
 COPY package*.json ./

README.md

@@ -27,9 +27,12 @@
 
 ## Prerequisites
 
-- Node.js v18+
+- Node.js v20
 - A running instance of [Saleor](https://github.com/saleor/saleor/)
 
+> [!NOTE]
+> Currently both Node v20 and v18 are supported. We recommend using Node v20, since support for older versions will be dropped.
+
 ## Development
 
 1. Clone the repository:

package.json

@@ -13,7 +13,7 @@
   },
   "homepage": "https://saleor.io/",
   "engines": {
-    "node": ">=18 <19",
+    "node": "^18 || ^20",
     "npm": ">=7"
   },
   "dependencies": {

src/components/Money/index.ts

@@ -52,13 +52,11 @@ export const formatMoneyRange = (moneyFrom: IMoney, moneyTo: IMoney, locale: str
       currency: moneyFrom.currency,
     }).formatRange(moneyFrom.amount, moneyTo.amount);
 
-    // TODO: remove casting from formatRange when typescript
-    // is updated to 4.7 or higher
     return formattedMoneyRange;
   } catch (error) {
     const formattedMoneyFrom = formatMoney(moneyFrom, locale);
     const formattedMoneyTo = formatMoney(moneyTo, locale);
 
-    return `${formattedMoneyFrom} - ${formattedMoneyTo}`;
+    return `${formattedMoneyFrom} – ${formattedMoneyTo}`;
   }
 };

src/components/MoneyRange/utils.test.ts

@@ -23,7 +23,7 @@ describe("getMoneyRange", () => {
     // Assert
     expect(result).toBe("-");
   });
-  it("should return formated money with currency when from and to have same amount", () => {
+  it("should return formatted money with currency when from and to have same amount", () => {
     // Arrange
     const fromMoney: IMoney = {
       amount: 10,
@@ -37,7 +37,7 @@ describe("getMoneyRange", () => {
 
     expect(getMoneyRange(Locale.EN, intl, fromMoney, toMoney)).toBe("€10.00");
   });
-  it("should return formated money range when from and to have different amount", () => {
+  it("should return formatted money range when from and to have different amount", () => {
     // Arrange
     const fromMoney: IMoney = {
       amount: 10,
@@ -49,9 +49,9 @@ describe("getMoneyRange", () => {
     };
     //  Act & Assert
 
-    expect(getMoneyRange(Locale.EN, intl, fromMoney, toMoney)).toBe("€10.00 - €20.00");
+    expect(getMoneyRange(Locale.EN, intl, fromMoney, toMoney)).toBe("€10.00 – €20.00");
   });
-  it("should return formated money  when only from is provided", () => {
+  it("should return formatted money  when only from is provided", () => {
     // Arrange
     const fromMoney: IMoney = {
       amount: 10,
@@ -62,7 +62,7 @@ describe("getMoneyRange", () => {
 
     expect(getMoneyRange(Locale.EN, intl, fromMoney)).toBe("from €10.00");
   });
-  it("should return formated money  when only to is provided", () => {
+  it("should return formatted money  when only to is provided", () => {
     // Arrange
     const toMoney: IMoney = {
       amount: 10,