Updated realty demo & dependency bump

CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## 2025-07-23
+
+### 🔧 Changed
+
+- Updated the logo to match our Brix&Hart mock brand in `demos/realty`.
+- Updated dependencies across all demos
+
 ## 2025-07-07
 
 ### 🧰 Added
@@ -67,7 +74,7 @@
 ### 🔧 Changed
 
 - Refreshed the OpenAPI yml spec `openapi/spec.yml` to be based on the latest Connect API design.
-- Changed the ecommerce_shop demo `.env` template format to now include `BASE_CANVA_CONNECT_AUTH_URL`. Older clones of this repo may encounter issues if the below is line is not added to their `demos/ecommerce_shop/.env` file:
+- Changed the ecommerce_shop demo `.env` template format to now include `BASE_CANVA_CONNECT_AUTH_URL`. Older clones of this repo may encounter issues if the below line is not added to their `demos/ecommerce_shop/.env` file:
 
   ```text
   BASE_CANVA_CONNECT_AUTH_URL=https://www.canva.com/api

README.md

@@ -2,7 +2,7 @@
 
 Welcome to the **Connect API starter kit** for Canva's developers platform. 🎉
 
-This repo contains our openAPI specifications, as well as a demo ecommerce web application built with the Connect API. The complete documentation for the platform is at [canva.dev/docs/connect](https://www.canva.dev/docs/connect/).
+This repo contains our OpenAPI specifications, as well as a demo ecommerce web application built with the Connect API. The complete documentation for the platform is at [canva.dev/docs/connect](https://www.canva.dev/docs/connect/).
 
 ## Requirements
 

client/package.json

@@ -17,6 +17,6 @@
   "engineStrict": true,
   "devDependencies": {
     "@hey-api/openapi-ts": "0.57.1",
-    "typescript": "5.5.4"
+    "typescript": "5.8.2"
   }
 }

demos/common/backend/services/crypto.test.ts

@@ -9,7 +9,7 @@ describe("crypto", () => {
   it("A random string, once base-64 encoded, can be decoded to the same value", () => {
     const rando = new Uint8Array(16);
     crypto.getRandomValues(rando);
-    const encoded = encodeBase64(rando);
+    const encoded = encodeBase64(rando.buffer);
     const decoded = decodeBase64(encoded);
     expect(decoded).toEqual(rando);
   });

demos/common/backend/services/crypto.ts

@@ -60,7 +60,7 @@ export async function encrypt(text: string): Promise<EncryptedData> {
   // We need to store the initialization vector for decryption, but it's not considered
   // a "secret" so we can store it in plaintext.
   return {
-    iv: encodeBase64(iv),
+    iv: encodeBase64(iv.buffer),
     encryptedData: encodeBase64(encrypted),
   };
 }

demos/common/package.json

@@ -22,27 +22,27 @@
     "cli-table3": "0.6.5",
     "cookie-parser": "1.4.7",
     "cors": "2.8.5",
-    "dotenv": "16.4.7",
+    "dotenv": "16.6.0",
     "envfile": "7.1.0",
     "express": "4.21.2",
     "jest": "29.7.0",
-    "jose": "5.9.6",
+    "jose": "5.10.0",
     "nodemon": "3.0.1",
-    "open": "10.1.0",
+    "open": "10.1.2",
     "pug": "3.0.3",
-    "ts-jest": "29.2.5",
-    "webpack-cli": "5.1.4",
+    "ts-jest": "29.4.0",
+    "webpack-cli": "6.0.1",
     "webpack-dev-server": "5.2.2",
     "yargs": "17.7.2"
   },
   "devDependencies": {
-    "@types/cors": "2.8.17",
+    "@types/cors": "2.8.19",
     "@types/express": "4.17.21",
-    "@types/multer": "1.4.12",
-    "@types/node": "20.10.0",
+    "@types/multer": "2.0.0",
+    "@types/node": "20.19.2",
     "@types/nodemon": "1.19.6",
     "@types/yargs": "17.0.33",
-    "prettier": "3.4.2",
-    "typescript": "5.5.4"
+    "prettier": "3.6.2",
+    "typescript": "5.8.2"
   }
 }

demos/ecommerce_shop/README.md

@@ -8,7 +8,7 @@ A lightweight e-commerce shop demo that showcases how to integrate with the Canv
 
 - Editing product images in Canva and displaying the updated designs back in the shop.
 - Creating individual designs in custom sizes from existing products.
-- Create multiple designs at once by adding products to your Canva Brand Templates.
+- Creating multiple designs at once by adding products to your Canva Brand Templates.
 
 ## Brand Templates Setup
 

demos/ecommerce_shop/backend/package.json

@@ -17,17 +17,18 @@
   "dependencies": {
     "@canva/connect-api-ts": "file:../../../client/ts",
     "cors": "2.8.5",
-    "dotenv": "16.4.7",
+    "dotenv": "16.6.0",
     "express": "4.21.2",
-    "multer": "^1.4.5-lts.1",
-    "open": "10.1.0",
+    "multer": "2.0.1",
+    "open": "10.1.2",
     "pug": "3.0.3"
   },
   "devDependencies": {
-    "@types/cors": "2.8.17",
+    "@types/cors": "2.8.19",
     "@types/express": "4.17.21",
-    "@types/multer": "1.4.12",
-    "prettier": "3.4.2",
-    "typescript": "5.5.4"
+    "@types/multer": "2.0.0",
+    "@types/node": "20.19.2",
+    "prettier": "3.6.2",
+    "typescript": "5.8.2"
   }
 }

demos/ecommerce_shop/backend/routes/auth.ts

@@ -156,7 +156,7 @@ router.get(endpoints.AUTHORIZE, async (req, res) => {
   const url = getAuthorizationUrl(globals.redirectUri, state, codeChallenge);
   const cookieConfiguration: CookieOptions = {
     httpOnly: true,
-    maxAge: 1000 * 60 * 60 * 20, // 20 minutes
+    maxAge: 1000 * 60 * 20, // 20 minutes
     sameSite: "lax", // since we will be redirecting back from Canva, we need the cookies to be sent with every request to our domain
     secure: process.env.NODE_ENV === "production",
     signed: true,

demos/ecommerce_shop/frontend/package.json

@@ -17,31 +17,31 @@
   "dependencies": {
     "@canva/connect-api-ts": "file:../../../client/ts",
     "@emotion/react": "11.14.0",
-    "@emotion/styled": "11.14.0",
-    "@fontsource/roboto": "5.1.1",
+    "@emotion/styled": "11.14.1",
+    "@fontsource/roboto": "5.2.6",
     "@mui/icons-material": "5.15.15",
     "@mui/material": "5.15.15",
     "@mui/x-charts": "7.23.6",
     "canvas-confetti": "1.9.3",
     "react": "18.3.1",
     "react-dom": "18.3.1",
-    "react-router-dom": "6.28.0"
+    "react-router-dom": "7.6.3"
   },
   "devDependencies": {
     "@svgr/webpack": "8.1.0",
     "@types/canvas-confetti": "1.9.0",
     "@types/react": "18.3.12",
     "@types/react-dom": "18.3.1",
     "@types/webpack": "5.28.5",
-    "@types/webpack-dev-server": "4.7.1",
+    "@types/webpack-dev-server": "4.7.2",
     "css-loader": "7.1.2",
-    "cssnano": "7.0.6",
+    "cssnano": "7.0.7",
     "postcss-loader": "8.1.1",
-    "prettier": "3.4.2",
+    "prettier": "3.6.2",
     "style-loader": "4.0.0",
-    "terser-webpack-plugin": "5.3.11",
+    "terser-webpack-plugin": "5.3.14",
     "ts-loader": "9.5.2",
-    "typescript": "5.5.4",
+    "typescript": "5.8.2",
     "url-loader": "4.1.1",
     "webpack-dev-server": "5.2.2"
   }

demos/ecommerce_shop/package.json

@@ -28,33 +28,33 @@
   "dependencies": {
     "@hey-api/client-fetch": "0.5.0",
     "cookie-parser": "1.4.7",
-    "jose": "5.9.6"
+    "jose": "5.10.0"
   },
   "devDependencies": {
-    "@eslint/js": "9.23.0",
-    "@types/cookie-parser": "1.4.8",
+    "@eslint/js": "9.30.0",
+    "@types/cookie-parser": "1.4.9",
     "@types/jest": "29.5.14",
-    "@types/node": "20.10.0",
+    "@types/node": "20.19.2",
     "@types/nodemon": "1.19.6",
     "@types/yargs": "17.0.33",
-    "@typescript-eslint/eslint-plugin": "8.27.0",
-    "@typescript-eslint/parser": "8.27.0",
+    "@typescript-eslint/eslint-plugin": "8.35.1",
+    "@typescript-eslint/parser": "8.35.1",
     "chalk": "4.1.2",
     "cli-table3": "0.6.5",
     "envfile": "7.1.0",
-    "eslint": "9.23.0",
+    "eslint": "9.30.0",
     "eslint-plugin-jest": "28.11.0",
-    "eslint-plugin-react": "7.37.4",
-    "eslint-plugin-react-hooks": "4.6.2",
+    "eslint-plugin-react": "7.37.5",
+    "eslint-plugin-react-hooks": "5.2.0",
     "eslint-plugin-unicorn": "57.0.0",
     "jest": "29.7.0",
     "nodemon": "3.0.1",
-    "prettier": "3.4.2",
-    "ts-jest": "29.2.5",
+    "prettier": "3.6.2",
+    "ts-jest": "29.4.0",
     "ts-node": "10.9.2",
-    "typescript": "5.5.4",
-    "typescript-eslint": "8.27.0",
-    "webpack-cli": "5.1.4",
+    "typescript": "5.8.2",
+    "typescript-eslint": "8.35.1",
+    "webpack-cli": "6.0.1",
     "webpack-dev-server": "5.2.2",
     "yargs": "17.7.2"
   }

demos/playground/backend/package.json

@@ -16,18 +16,19 @@
     "@canva/connect-api-ts": "file:../../../client/ts",
     "cookie-parser": "1.4.7",
     "cors": "2.8.5",
-    "dotenv": "16.4.7",
+    "dotenv": "16.6.0",
     "express": "4.21.2",
-    "multer": "^1.4.5-lts.1",
-    "open": "10.1.0",
+    "multer": "2.0.1",
+    "open": "10.1.2",
     "pug": "3.0.3"
   },
   "devDependencies": {
-    "@types/cookie-parser": "1.4.8",
-    "@types/cors": "2.8.17",
+    "@types/cookie-parser": "1.4.9",
+    "@types/cors": "2.8.19",
     "@types/express": "4.17.21",
-    "@types/multer": "1.4.12",
-    "prettier": "3.4.2",
-    "typescript": "5.5.4"
+    "@types/multer": "2.0.0",
+    "@types/node": "20.19.2",
+    "prettier": "3.6.2",
+    "typescript": "5.8.2"
   }
 }

demos/playground/backend/routes/auth.ts

@@ -158,7 +158,7 @@ router.get(endpoints.AUTHORIZE, async (req, res) => {
   const url = getAuthorizationUrl(globals.redirectUri, state, codeChallenge);
   const cookieConfiguration: CookieOptions = {
     httpOnly: true,
-    maxAge: 1000 * 60 * 60 * 20, // 20 minutes
+    maxAge: 1000 * 60 * 20, // 20 minutes
     sameSite: "lax", // since we will be redirecting back from Canva, we need the cookies to be sent with every request to our domain
     secure: process.env.NODE_ENV === "production",
     signed: true,

demos/playground/frontend/package.json

@@ -17,29 +17,29 @@
   "dependencies": {
     "@canva/connect-api-ts": "file:../../../client/ts",
     "@emotion/react": "11.14.0",
-    "@emotion/styled": "11.14.0",
-    "@fontsource/roboto": "5.1.1",
+    "@emotion/styled": "11.14.1",
+    "@fontsource/roboto": "5.2.6",
     "@mui/icons-material": "5.15.15",
     "@mui/material": "5.15.15",
     "@mui/x-charts": "7.23.6",
     "canvas-confetti": "1.9.3",
     "react": "18.3.1",
     "react-dom": "18.3.1",
-    "react-router-dom": "6.28.0"
+    "react-router-dom": "7.6.3"
   },
   "devDependencies": {
     "@svgr/webpack": "8.1.0",
     "@types/canvas-confetti": "1.9.0",
     "@types/react": "18.3.12",
     "@types/react-dom": "18.3.1",
     "css-loader": "7.1.2",
-    "cssnano": "7.0.6",
+    "cssnano": "7.0.7",
     "postcss-loader": "8.1.1",
-    "prettier": "3.4.2",
+    "prettier": "3.6.2",
     "style-loader": "4.0.0",
-    "terser-webpack-plugin": "5.3.11",
+    "terser-webpack-plugin": "5.3.14",
     "ts-loader": "9.5.2",
-    "typescript": "5.5.4",
+    "typescript": "5.8.2",
     "url-loader": "4.1.1",
     "webpack-dev-server": "5.2.2"
   }

demos/playground/package.json

@@ -25,24 +25,24 @@
   "dependencies": {
     "@hey-api/client-fetch": "0.5.0",
     "cookie-parser": "1.4.7",
-    "jose": "5.9.6"
+    "jose": "5.10.0"
   },
   "devDependencies": {
-    "@eslint/js": "9.23.0",
-    "@types/cookie-parser": "1.4.8",
-    "@types/node": "20.10.0",
+    "@eslint/js": "9.30.0",
+    "@types/cookie-parser": "1.4.9",
+    "@types/node": "20.19.2",
     "@types/yargs": "17.0.33",
-    "@typescript-eslint/eslint-plugin": "8.27.0",
-    "@typescript-eslint/parser": "8.27.0",
-    "eslint": "9.23.0",
+    "@typescript-eslint/eslint-plugin": "8.35.1",
+    "@typescript-eslint/parser": "8.35.1",
+    "eslint": "9.30.0",
     "eslint-plugin-jest": "28.11.0",
-    "eslint-plugin-react": "7.37.4",
-    "eslint-plugin-react-hooks": "4.6.2",
+    "eslint-plugin-react": "7.37.5",
+    "eslint-plugin-react-hooks": "5.2.0",
     "eslint-plugin-unicorn": "57.0.0",
-    "prettier": "3.4.2",
+    "prettier": "3.6.2",
     "ts-node": "10.9.2",
-    "typescript": "5.5.4",
-    "typescript-eslint": "8.27.0",
+    "typescript": "5.8.2",
+    "typescript-eslint": "8.35.1",
     "yargs": "17.7.2"
   }
 }

demos/realty/README.md

@@ -1,6 +1,6 @@
 # Demos: Real Estate
 
-Welcome to the **Realty Real Estate** demo! 🏠
+Welcome to the **Brix & Hart Real Estate** demo! 🏠
 
 A comprehensive real estate platform demo that showcases how to integrate with the Canva API. The demo demonstrates:
 

demos/realty/backend/index.ts

@@ -143,5 +143,5 @@ app.set(
 app.set("view engine", "pug");
 
 app.listen(port, () => {
-  console.log(`Realty Commercial backend listening on port ${port}`);
+  console.log(`Brix & Hart backend listening on port ${port}`);
 });

demos/realty/backend/package.json

@@ -1,7 +1,7 @@
 {
   "name": "realty-demo-backend",
   "version": "1.0.0",
-  "description": "Backend server for the Realty Commercial platform",
+  "description": "Backend server for the Brix & Hart platform",
   "scripts": {
     "lint:types": "tsc",
     "lint": "eslint .",
@@ -17,19 +17,19 @@
     "@canva/connect-api-ts": "file:../../../client/ts",
     "@realty-demo/shared-models": "file:../shared-models/src",
     "cors": "2.8.5",
-    "dotenv": "16.4.7",
+    "dotenv": "16.6.0",
     "express": "4.21.2",
-    "multer": "^1.4.5-lts.1",
-    "open": "10.1.0",
+    "multer": "2.0.1",
+    "open": "10.1.2",
     "pug": "3.0.3",
     "uuid": "11.1.0"
   },
   "devDependencies": {
-    "@types/cors": "2.8.17",
+    "@types/cors": "2.8.19",
     "@types/express": "4.17.21",
-    "@types/multer": "1.4.12",
+    "@types/multer": "2.0.0",
     "@types/uuid": "10.0.0",
-    "prettier": "3.4.2",
-    "typescript": "5.5.4"
+    "prettier": "3.6.2",
+    "typescript": "5.8.2"
   }
 }

demos/realty/backend/routes/auth.ts

@@ -154,7 +154,7 @@ router.get(endpoints.AUTHORIZE, async (req, res) => {
   const url = getAuthorizationUrl(globals.redirectUri, state, codeChallenge);
   const cookieConfiguration: CookieOptions = {
     httpOnly: true,
-    maxAge: 1000 * 60 * 60 * 20, // 20 minutes
+    maxAge: 1000 * 60 * 20, // 20 minutes
     sameSite: "lax", // since we will be redirecting back from Canva, we need the cookies to be sent with every request to our domain
     secure: process.env.NODE_ENV === "production",
     signed: true,