@canva/cli 1.2.0 → 1.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@canva/cli",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "description": "The official Canva CLI.",
   "license": "SEE LICENSE IN LICENSE.md",
   "author": "Canva Pty Ltd.",
@@ -31,8 +31,7 @@
     "lib"
   ],
   "dependencies": {
-    "ink": "5.1.0",
-    "react": "18.3.1",
+    "ink": "6.3.1",
     "@modelcontextprotocol/sdk": "1.17.4",
     "react-docgen-typescript": "2.4.0"
   },
@@ -43,6 +42,15 @@
     "starter kit"
   ],
   "engines": {
-    "node": ">=16"
+    "node": ">=20.10.0"
+  },
+  "overrides": {
+    "@types/react": "^19.0.0",
+    "@inkjs/ui": {
+      "ink": "$ink"
+    },
+    "ink-gradient": {
+      "ink": "$ink"
+    }
   }
 }

package/templates/base/package.json

@@ -6,15 +6,17 @@
   "license": "SEE LICENSE IN LICENSE.md",
   "author": "Canva Pty Ltd.",
   "dependencies": {
-    "@canva/app-ui-kit": "^4.10.0",
+    "@canva/app-i18n-kit": "^1.1.1",
+    "@canva/app-ui-kit": "^5.0.1",
     "@canva/asset": "^2.2.1",
     "@canva/design": "^2.7.2",
     "@canva/error": "^2.1.0",
     "@canva/platform": "^2.2.0",
     "@canva/user": "^2.1.1",
     "cookie-parser": "1.4.7",
-    "react": "18.3.1",
-    "react-dom": "18.3.1"
+    "react": "19.1.1",
+    "react-dom": "19.1.1",
+    "react-intl": "7.1.11"
   },
   "devDependencies": {
     "@canva/cli": ">= 0.0.1-beta.13",
@@ -30,8 +32,8 @@
     "@types/node-forge": "1.3.14",
     "@types/nodemon": "1.19.6",
     "@types/prompts": "2.4.9",
-    "@types/react": "18.3.12",
-    "@types/react-dom": "18.3.1",
+    "@types/react": "19.1.13",
+    "@types/react-dom": "19.1.9",
     "@types/webpack-env": "1.18.8",
     "chalk": "4.1.2",
     "cli-table3": "0.6.5",
@@ -71,8 +73,8 @@
     "canva-apps-sdk"
   ],
   "engines": {
-    "node": "^18 || ^20.10.0",
-    "npm": "^9 || ^10"
+    "node": ">=20.10.0",
+    "npm": "^10 || ^11"
   },
   "canvaCliMetadata": {
     "metaFields": [

package/templates/dam/package.json

@@ -18,9 +18,9 @@
     "postinstall": "ts-node ./scripts/copy_env.ts"
   },
   "dependencies": {
-    "@canva/app-components": "^1.3.1",
-    "@canva/app-i18n-kit": "^1.0.3",
-    "@canva/app-ui-kit": "^4.10.0",
+    "@canva/app-components": "^2.0.0",
+    "@canva/app-i18n-kit": "^1.1.1",
+    "@canva/app-ui-kit": "^5.0.1",
     "@canva/asset": "^2.2.1",
     "@canva/design": "^2.7.2",
     "@canva/error": "^2.1.0",
@@ -28,9 +28,9 @@
     "@canva/user": "^2.1.1",
     "cookie-parser": "1.4.7",
     "cors": "2.8.5",
-    "react": "18.3.1",
-    "react-dom": "18.3.1",
-    "react-intl": "6.8.7"
+    "react": "19.1.1",
+    "react-dom": "19.1.1",
+    "react-intl": "7.1.11"
   },
   "devDependencies": {
     "@canva/app-eslint-plugin": "^1.0.0-beta.5",
@@ -52,8 +52,8 @@
     "@types/node-forge": "1.3.14",
     "@types/nodemon": "1.19.6",
     "@types/prompts": "2.4.9",
-    "@types/react": "18.3.12",
-    "@types/react-dom": "18.3.1",
+    "@types/react": "19.1.13",
+    "@types/react-dom": "19.1.9",
     "@types/webpack-env": "1.18.8",
     "chalk": "4.1.2",
     "cli-table3": "0.6.5",

package/templates/data_connector/package.json

@@ -19,18 +19,18 @@
     "postinstall": "ts-node ./scripts/copy_env.ts"
   },
   "dependencies": {
-    "@canva/app-i18n-kit": "^1.0.3",
-    "@canva/app-ui-kit": "^4.10.0",
+    "@canva/app-i18n-kit": "^1.1.1",
+    "@canva/app-ui-kit": "^5.0.1",
     "@canva/asset": "^2.2.1",
     "@canva/design": "^2.7.2",
     "@canva/error": "^2.1.0",
     "@canva/intents": "^2.0.0",
     "@canva/platform": "^2.2.0",
     "@canva/user": "^2.1.1",
-    "react": "18.3.1",
-    "react-dom": "18.3.1",
+    "react": "19.1.1",
+    "react-dom": "19.1.1",
     "react-error-boundary": "6.0.0",
-    "react-intl": "6.8.7",
+    "react-intl": "7.1.11",
     "react-router-dom": "7.8.2"
   },
   "devDependencies": {
@@ -50,8 +50,8 @@
     "@types/node-fetch": "2.6.13",
     "@types/node-forge": "1.3.14",
     "@types/nodemon": "1.19.6",
-    "@types/react": "18.3.12",
-    "@types/react-dom": "18.3.1",
+    "@types/react": "19.1.13",
+    "@types/react-dom": "19.1.9",
     "@types/webpack-env": "1.18.8",
     "chalk": "4.1.2",
     "cli-table3": "0.6.5",

package/templates/data_connector/src/components/inputs/search_filter.tsx

@@ -9,6 +9,7 @@ import {
   SearchInputMenu,
   SlidersIcon,
 } from "@canva/app-ui-kit";
+import type { ReactNode } from "react";
 import { useState } from "react";
 import { useIntl } from "react-intl";
 import { filterMenu } from "./messages";
@@ -18,7 +19,7 @@ interface SearchFilterProps {
   onChange: (value: string) => void;
   filterCount: number;
   resetFilters: () => void;
-  children?: React.ReactNode;
+  children?: ReactNode;
 }
 
 export const SearchFilter = ({

package/templates/data_connector/src/context/app_context.tsx

@@ -1,6 +1,7 @@
 import type { RenderSelectionUiRequest } from "@canva/intents/data";
 import type { AccessTokenResponse } from "@canva/user";
 import { auth } from "@canva/user";
+import type { ReactNode } from "react";
 import { createContext, useCallback, useState } from "react";
 import type { APIResponseItem, DataSourceHandler } from "src/api/data_source";
 import { type DataSourceConfig } from "src/api/data_source";
@@ -43,7 +44,7 @@ export const AppContext = createContext<AppContextType>({
 /**
  * Provides application-wide state and methods using React Context.
  * @param {object} props - The props object.
- * @param {React.ReactNode} props.children - The children components wrapped by the provider.
+ * @param {ReactNode} props.children - The children components wrapped by the provider.
  * @returns {JSX.Element} The provider component.
  * @description This provider component wraps the entire application to provide application-wide state and methods using React Context.
  * It manages state related to app errors, filter parameters, and authentication.
@@ -55,7 +56,7 @@ export const ContextProvider = ({
   children,
 }: {
   renderSelectionUiRequest: RenderSelectionUiRequest;
-  children: React.ReactNode;
+  children: ReactNode;
 }): JSX.Element => {
   const [appError, setAppError] = useState<string>("");
   const [request] = useState<RenderSelectionUiRequest>(

package/templates/data_connector/src/routes/protected_route.tsx

@@ -1,10 +1,11 @@
+import type { ReactNode } from "react";
 import { useEffect } from "react";
 import { useNavigate } from "react-router-dom";
 import { Paths } from "src/paths";
 import { useAppContext } from "../context";
 
 interface ProtectedRouteProps {
-  children: React.ReactNode;
+  children: ReactNode;
 }
 
 /**

package/templates/gen_ai/package.json

@@ -18,8 +18,8 @@
     "postinstall": "ts-node ./scripts/copy_env.ts"
   },
   "dependencies": {
-    "@canva/app-i18n-kit": "^1.0.3",
-    "@canva/app-ui-kit": "^4.10.0",
+    "@canva/app-i18n-kit": "^1.1.1",
+    "@canva/app-ui-kit": "^5.0.1",
     "@canva/asset": "^2.2.1",
     "@canva/design": "^2.7.2",
     "@canva/error": "^2.1.0",
@@ -29,10 +29,10 @@
     "cors": "2.8.5",
     "html-react-parser": "5.2.6",
     "obscenity": "0.4.4",
-    "react": "18.3.1",
-    "react-dom": "18.3.1",
+    "react": "19.1.1",
+    "react-dom": "19.1.1",
     "react-error-boundary": "6.0.0",
-    "react-intl": "6.8.7",
+    "react-intl": "7.1.11",
     "react-router-dom": "7.8.2"
   },
   "devDependencies": {
@@ -54,8 +54,8 @@
     "@types/node-forge": "1.3.14",
     "@types/nodemon": "1.19.6",
     "@types/prompts": "2.4.9",
-    "@types/react": "18.3.12",
-    "@types/react-dom": "18.3.1",
+    "@types/react": "19.1.13",
+    "@types/react-dom": "19.1.9",
     "@types/webpack": "5.28.5",
     "@types/webpack-dev-server": "4.7.2",
     "@types/webpack-env": "1.18.8",

package/templates/gen_ai/src/components/image_grid.tsx

@@ -2,6 +2,7 @@ import { Grid, ImageCard, Rows, Text } from "@canva/app-ui-kit";
 import type { QueuedImage } from "@canva/asset";
 import { upload } from "@canva/asset";
 import { addElementAtPoint, ui } from "@canva/design";
+import type { DragEvent } from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 import type { ImageType } from "src/api";
 import { useAppContext } from "src/context";
@@ -28,7 +29,7 @@ export const ImageGrid = () => {
   const { generatedImages } = useAppContext();
 
   const onDragStart = async (
-    event: React.DragEvent<HTMLElement>,
+    event: DragEvent<HTMLElement>,
     image: ImageType,
   ) => {
     const parentNode = event.currentTarget.parentElement;
@@ -87,7 +88,7 @@ export const ImageGrid = () => {
             alt={image.label}
             thumbnailHeight={THUMBNAIL_HEIGHT}
             borderRadius="standard"
-            onDragStart={(event: React.DragEvent<HTMLElement>) =>
+            onDragStart={(event: DragEvent<HTMLElement>) =>
               onDragStart(event, image)
             }
           />

package/templates/gen_ai/src/components/tests/remaining_credit.tests.tsx

@@ -4,10 +4,10 @@ import { TestAppUiProvider } from "@canva/app-ui-kit";
 import { getPlatformInfo, requestOpenExternalUrl } from "@canva/platform";
 import type { RenderResult } from "@testing-library/react";
 import { fireEvent, render } from "@testing-library/react";
-import React from "react";
+import type { ReactNode } from "react";
 import { RemainingCredits } from "../remaining_credits";
 
-function renderInTestProvider(node: React.ReactNode): RenderResult {
+function renderInTestProvider(node: ReactNode): RenderResult {
   return render(
     // In a test environment, you should wrap your apps in `TestAppI18nProvider` and `TestAppUiProvider`, rather than `AppI18nProvider` and `AppUiProvider`
     <TestAppI18nProvider>

package/templates/hello_world/package.json

@@ -19,16 +19,16 @@
     "postinstall": "ts-node ./scripts/copy_env.ts"
   },
   "dependencies": {
-    "@canva/app-i18n-kit": "^1.0.3",
-    "@canva/app-ui-kit": "^4.10.0",
+    "@canva/app-i18n-kit": "^1.1.1",
+    "@canva/app-ui-kit": "^5.0.1",
     "@canva/asset": "^2.2.1",
     "@canva/design": "^2.7.2",
     "@canva/error": "^2.1.0",
     "@canva/platform": "^2.2.0",
     "@canva/user": "^2.1.1",
-    "react": "18.3.1",
-    "react-dom": "18.3.1",
-    "react-intl": "6.8.7"
+    "react": "19.1.1",
+    "react-dom": "19.1.1",
+    "react-intl": "7.1.11"
   },
   "devDependencies": {
     "@canva/app-eslint-plugin": "^1.0.0-beta.5",
@@ -47,8 +47,8 @@
     "@types/node-fetch": "2.6.13",
     "@types/node-forge": "1.3.14",
     "@types/nodemon": "1.19.6",
-    "@types/react": "18.3.12",
-    "@types/react-dom": "18.3.1",
+    "@types/react": "19.1.13",
+    "@types/react-dom": "19.1.9",
     "@types/webpack-env": "1.18.8",
     "chalk": "4.1.2",
     "cli-table3": "0.6.5",

package/templates/hello_world/src/tests/app.tests.tsx

@@ -4,11 +4,11 @@ import { TestAppUiProvider } from "@canva/app-ui-kit";
 import { requestOpenExternalUrl } from "@canva/platform";
 import { fireEvent, render } from "@testing-library/react";
 import type { RenderResult } from "@testing-library/react";
-import React from "react";
+import type { ReactNode } from "react";
 import { useAddElement } from "utils/use_add_element";
 import { App, DOCS_URL } from "../app";
 
-function renderInTestProvider(node: React.ReactNode): RenderResult {
+function renderInTestProvider(node: ReactNode): RenderResult {
   return render(
     // In a test environment, you should wrap your apps in `TestAppI18nProvider` and `TestAppUiProvider`, rather than `AppI18nProvider` and `AppUiProvider`
     <TestAppI18nProvider>