@canva/cli 1.1.0 → 1.3.0

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>