@canva/cli 0.0.1-beta.7 → 0.0.1-beta.9

package/templates/gen_ai/src/app.tsx

@@ -1,13 +1,19 @@
-import { Outlet } from "react-router-dom";
-import { Rows } from "@canva/app-ui-kit";
-import { Footer } from "./components";
-import * as styles from "styles/components.css";
+import { createHashRouter, RouterProvider } from "react-router-dom";
+import { ContextProvider } from "./context";
+import { routes } from "./routes";
+import { AppI18nProvider } from "@canva/app-i18n-kit";
+import { AppUiProvider } from "@canva/app-ui-kit";
+import { ErrorBoundary } from "react-error-boundary";
+import { ErrorPage } from "./pages";
 
 export const App = () => (
-  <div className={styles.scrollContainer}>
-    <Rows spacing="3u">
-      <Outlet />
-      <Footer />
-    </Rows>
-  </div>
+  <AppI18nProvider>
+    <AppUiProvider>
+      <ErrorBoundary fallback={<ErrorPage />}>
+        <ContextProvider>
+          <RouterProvider router={createHashRouter(routes)} />
+        </ContextProvider>
+      </ErrorBoundary>
+    </AppUiProvider>
+  </AppI18nProvider>
 );

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

@@ -0,0 +1,43 @@
+/* eslint-disable formatjs/no-literal-string-in-jsx */
+import { TestAppUiProvider } from "@canva/app-ui-kit";
+import { TestAppI18nProvider } from "@canva/app-i18n-kit";
+import type { RenderResult } from "@testing-library/react";
+import { fireEvent, render } from "@testing-library/react";
+import React from "react";
+import { RemainingCredits } from "../remaining_credits";
+import { requestOpenExternalUrl } from "@canva/platform";
+
+function renderInTestProvider(node: React.ReactNode): RenderResult {
+  return render(
+    // In a test environment, you should wrap your apps in `TestAppI18nProvider` and `TestAppUiProvider`, rather than `AppI18nProvider` and `AppUiProvider`
+    <TestAppI18nProvider>
+      <TestAppUiProvider>{node}</TestAppUiProvider>,
+    </TestAppI18nProvider>,
+  );
+}
+
+// This test demonstrates how to test code that uses functions from the Canva Apps SDK
+// For more information on testing with the Canva Apps SDK, see https://www.canva.dev/docs/apps/testing/
+describe("Remaining Credit Tests", () => {
+  const mockRequestOpenExternalUrl = jest.mocked(requestOpenExternalUrl);
+
+  beforeEach(() => {
+    jest.resetAllMocks();
+  });
+
+  it("should call requestOpenExternalUrl when the link is clicked", () => {
+    // assert that the mock is in the expected clean state
+    expect(mockRequestOpenExternalUrl).not.toHaveBeenCalled();
+
+    const result = renderInTestProvider(<RemainingCredits />);
+
+    // get a reference to the link to purchase more credits
+    const purchaseMoreLink = result.getByRole("button");
+
+    // programmatically simulate clicking the button
+    fireEvent.click(purchaseMoreLink);
+
+    // we expect that requestOpenExternalUrl has been called
+    expect(mockRequestOpenExternalUrl).toHaveBeenCalled();
+  });
+});

package/templates/gen_ai/src/home.tsx

@@ -0,0 +1,13 @@
+import { Outlet } from "react-router-dom";
+import { Rows } from "@canva/app-ui-kit";
+import { Footer } from "./components";
+import * as styles from "styles/components.css";
+
+export const Home = () => (
+  <div className={styles.scrollContainer}>
+    <Rows spacing="3u">
+      <Outlet />
+      <Footer />
+    </Rows>
+  </div>
+);

package/templates/gen_ai/src/index.tsx

@@ -1,27 +1,11 @@
 import { createRoot } from "react-dom/client";
-import { createHashRouter, RouterProvider } from "react-router-dom";
-import { ErrorBoundary } from "react-error-boundary";
-import { AppUiProvider } from "@canva/app-ui-kit";
-import { routes } from "./routes";
-import { ErrorPage } from "./pages";
-import { ContextProvider } from "./context";
 import "@canva/app-ui-kit/styles.css";
-import { AppI18nProvider } from "@canva/app-i18n-kit";
+import { App } from "./app";
 
 const root = createRoot(document.getElementById("root") as Element);
 
 function render() {
-  root.render(
-    <AppI18nProvider>
-      <AppUiProvider>
-        <ErrorBoundary fallback={<ErrorPage />}>
-          <ContextProvider>
-            <RouterProvider router={createHashRouter(routes)} />
-          </ContextProvider>
-        </ErrorBoundary>
-      </AppUiProvider>
-    </AppI18nProvider>,
-  );
+  root.render(<App />);
 }
 
 render();

package/templates/gen_ai/src/routes/routes.tsx

@@ -1,4 +1,4 @@
-import { App } from "src/app";
+import { Home } from "src/home";
 import { ErrorPage, GeneratePage, ResultsPage } from "src/pages";
 
 export enum Paths {
@@ -9,7 +9,7 @@ export enum Paths {
 export const routes = [
   {
     path: Paths.HOME,
-    element: <App />,
+    element: <Home />,
     errorElement: <ErrorPage />,
     children: [
       {

package/templates/gen_ai/webpack.config.cjs

@@ -4,6 +4,7 @@ const TerserPlugin = require("terser-webpack-plugin");
 const { DefinePlugin, optimize } = require("webpack");
 const chalk = require("chalk");
 const { transform } = require("@formatjs/ts-transformer");
+const ReactRefreshWebpackPlugin = require("@pmmmwh/react-refresh-webpack-plugin");
 
 /**
  *
@@ -173,7 +174,8 @@ function buildConfig({
       }),
       // Apps can only submit a single JS file via the developer portal
       new optimize.LimitChunkCountPlugin({ maxChunks: 1 }),
-    ],
+      mode === "development" && new ReactRefreshWebpackPlugin(),
+    ].filter(Boolean),
     ...buildDevConfig(devConfig),
   };
 }

package/templates/hello_world/package.json

@@ -12,55 +12,70 @@
     "lint:fix": "eslint . --fix",
     "lint:types": "tsc",
     "start": "ts-node ./scripts/start/start.ts",
-    "test": "jest --no-cache --passWithNoTests",
+    "test": "jest --no-cache",
     "test:watch": "jest --watchAll",
+    "test:update": "npm run test -- -u",
     "postinstall": "ts-node ./scripts/copy-env.ts"
   },
   "dependencies": {
-    "@canva/app-i18n-kit": "^1.0.1",
-    "@canva/app-ui-kit": "^4.3.0",
-    "@canva/design": "^2.2.1",
-    "@canva/error": "^2.0.0",
-    "@canva/platform": "^2.0.0",
+    "@canva/app-i18n-kit": "^1.0.2",
+    "@canva/app-ui-kit": "^4.4.0",
+    "@canva/asset": "^2.1.0",
+    "@canva/design": "^2.3.0",
+    "@canva/error": "^2.1.0",
+    "@canva/platform": "^2.1.0",
+    "@canva/user": "^2.1.0",
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "react-intl": "6.8.7"
   },
   "devDependencies": {
-    "@eslint/eslintrc": "3.1.0",
-    "@eslint/js": "9.14.0",
-    "@formatjs/cli": "6.3.8",
-    "@formatjs/ts-transformer": "3.13.22",
+    "@eslint/eslintrc": "3.2.0",
+    "@eslint/js": "9.16.0",
+    "@formatjs/cli": "6.3.14",
+    "@formatjs/ts-transformer": "3.13.26",
     "@ngrok/ngrok": "1.4.1",
+    "@pmmmwh/react-refresh-webpack-plugin": "0.5.15",
     "@svgr/webpack": "8.1.0",
+    "@testing-library/react": "16.1.0",
+    "@types/express": "4.17.21",
+    "@types/express-serve-static-core": "4.19.6",
     "@types/jest": "29.5.14",
+    "@types/jsonwebtoken": "9.0.7",
     "@types/node": "20.10.0",
-    "@types/node-fetch": "2.6.11",
+    "@types/node-fetch": "2.6.12",
     "@types/node-forge": "1.3.11",
     "@types/nodemon": "1.19.6",
     "@types/react": "18.3.12",
     "@types/react-dom": "18.3.1",
     "@types/webpack-env": "1.18.5",
-    "@typescript-eslint/eslint-plugin": "8.13.0",
-    "@typescript-eslint/parser": "8.13.0",
+    "@typescript-eslint/eslint-plugin": "8.18.0",
+    "@typescript-eslint/parser": "8.18.0",
     "chalk": "4.1.2",
     "cli-table3": "0.6.5",
     "css-loader": "7.1.2",
     "css-modules-typescript-loader": "4.0.1",
     "cssnano": "7.0.6",
-    "debug": "4.3.7",
-    "dotenv": "16.4.5",
-    "eslint": "9.14.0",
-    "eslint-plugin-formatjs": "5.2.2",
+    "debug": "4.4.0",
+    "dotenv": "16.4.7",
+    "eslint": "9.16.0",
+    "eslint-plugin-formatjs": "5.2.8",
     "eslint-plugin-jest": "28.9.0",
     "eslint-plugin-react": "7.37.2",
+    "express": "4.21.2",
+    "express-basic-auth": "1.2.1",
     "jest": "29.7.0",
+    "jest-css-modules-transform": "4.4.2",
+    "jest-environment-jsdom": "29.7.0",
+    "jsonwebtoken": "9.0.2",
+    "jwks-rsa": "3.1.0",
     "mini-css-extract-plugin": "2.9.2",
     "node-fetch": "3.3.2",
     "node-forge": "1.3.1",
     "nodemon": "3.0.1",
     "postcss-loader": "8.1.1",
-    "prettier": "3.3.3",
+    "prettier": "3.4.2",
+    "react-refresh": "0.16.0",
     "style-loader": "4.0.0",
     "terser-webpack-plugin": "5.3.10",
     "ts-jest": "29.2.5",
@@ -68,7 +83,7 @@
     "ts-node": "10.9.2",
     "typescript": "5.5.4",
     "url-loader": "4.1.1",
-    "webpack": "5.96.1",
+    "webpack": "5.97.1",
     "webpack-cli": "5.1.4",
     "webpack-dev-server": "5.1.0",
     "yargs": "17.7.2"

package/templates/hello_world/src/app.tsx

@@ -1,8 +1,11 @@
 import { Button, Rows, Text } from "@canva/app-ui-kit";
+import { requestOpenExternalUrl } from "@canva/platform";
 import { FormattedMessage, useIntl } from "react-intl";
 import * as styles from "styles/components.css";
 import { useAddElement } from "utils/use_add_element";
 
+export const DOCS_URL = "https://www.canva.dev/docs/apps/";
+
 export const App = () => {
   const addElement = useAddElement();
 
@@ -13,6 +16,16 @@ export const App = () => {
     });
   };
 
+  const openExternalUrl = async (url: string) => {
+    const response = await requestOpenExternalUrl({
+      url,
+    });
+
+    if (response.status === "aborted") {
+      // user decided not to navigate to the link
+    }
+  };
+
   const intl = useIntl();
 
   return (
@@ -37,6 +50,13 @@ export const App = () => {
               "Button text to do something cool. Creates a new text element when pressed.",
           })}
         </Button>
+        <Button variant="secondary" onClick={() => openExternalUrl(DOCS_URL)}>
+          {intl.formatMessage({
+            defaultMessage: "Open Canva Apps SDK docs",
+            description:
+              "Button text to open Canva Apps SDK docs. Opens an external URL when pressed.",
+          })}
+        </Button>
       </Rows>
     </div>
   );

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

@@ -0,0 +1,45 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Hello World Tests should have a consistent snapshot 1`] = `
+<div>
+  <div
+    class="scrollContainer"
+  >
+    <div
+      class="jv_R6g"
+      style="--NZu1Zw: 16px;"
+    >
+      <p
+        class="fFOiLQ _5Ob_nQ fM_HdA"
+      >
+        To make changes to this app, edit the 
+        <code>
+          src/app.tsx
+        </code>
+         file, then close and reopen the app in the editor to preview the changes.
+      </p>
+      <button
+        class="_1QoxDw Qkd66A tYI0Vw o4TrkA zKTE_w Qkd66A tYI0Vw lsXp_w ubW6qw cwOZMg zQlusQ uRvRjQ"
+        type="button"
+      >
+        <span
+          class="_38oWvQ"
+        >
+          Do something cool
+        </span>
+      </button>
+      <button
+        class="_1QoxDw Qkd66A tYI0Vw o4TrkA NT2yCg Qkd66A tYI0Vw lsXp_w cwOZMg zQlusQ uRvRjQ"
+        type="button"
+      >
+        <span
+          class="_38oWvQ"
+        >
+          Open Canva Apps SDK docs
+        </span>
+      </button>
+    </div>
+  </div>
+  ,
+</div>
+`;

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

@@ -0,0 +1,86 @@
+/* eslint-disable formatjs/no-literal-string-in-jsx */
+import React from "react";
+import type { RenderResult } from "@testing-library/react";
+import { fireEvent, render } from "@testing-library/react";
+import { TestAppI18nProvider } from "@canva/app-i18n-kit";
+import { TestAppUiProvider } from "@canva/app-ui-kit";
+import { requestOpenExternalUrl } from "@canva/platform";
+import { useAddElement } from "utils/use_add_element";
+import { App, DOCS_URL } from "../app";
+
+function renderInTestProvider(node: React.ReactNode): RenderResult {
+  return render(
+    // In a test environment, you should wrap your apps in `TestAppI18nProvider` and `TestAppUiProvider`, rather than `AppI18nProvider` and `AppUiProvider`
+    <TestAppI18nProvider>
+      <TestAppUiProvider>{node}</TestAppUiProvider>,
+    </TestAppI18nProvider>,
+  );
+}
+
+jest.mock("utils/use_add_element");
+
+// This test demonstrates how to test code that uses functions from the Canva Apps SDK
+// For more information on testing with the Canva Apps SDK, see https://www.canva.dev/docs/apps/testing/
+describe("Hello World Tests", () => {
+  // Mocking the useAddElement hook
+  const mockAddElement = jest.fn();
+  const mockAddUseElement = jest.mocked(useAddElement);
+  const mockRequestOpenExternalUrl = jest.mocked(requestOpenExternalUrl);
+
+  beforeEach(() => {
+    jest.resetAllMocks();
+    mockAddUseElement.mockReturnValue(mockAddElement);
+    mockRequestOpenExternalUrl.mockResolvedValue({ status: "completed" });
+  });
+
+  // this test uses a mock in place of the useAddElement hook
+  it("should add a text element when the button is clicked", () => {
+    // assert that the mocks are in the expected clean state
+    expect(mockAddUseElement).not.toHaveBeenCalled();
+    expect(mockAddElement).not.toHaveBeenCalled();
+
+    const result = renderInTestProvider(<App />);
+
+    // the hook should have been called in the render process but not the callback
+    expect(mockAddUseElement).toHaveBeenCalled();
+    expect(mockAddElement).not.toHaveBeenCalled();
+
+    // get a reference to the do something cool button element
+    const doSomethingCoolBtn = result.getByRole("button", {
+      name: "Do something cool",
+    });
+
+    // programmatically simulate clicking the button
+    fireEvent.click(doSomethingCoolBtn);
+
+    // we expect that addElement has been called by the button's click handler
+    expect(mockAddElement).toHaveBeenCalled();
+  });
+
+  // this test uses a mock in place of the @canva/platform requestOpenExternalUrl function
+  it("should call `requestOpenExternalUrl` when the button is clicked", () => {
+    expect(mockRequestOpenExternalUrl).not.toHaveBeenCalled();
+
+    const result = renderInTestProvider(<App />);
+
+    // get a reference to the Apps SDK button by name
+    const sdkButton = result.getByRole("button", {
+      name: "Open Canva Apps SDK docs",
+    });
+
+    expect(mockRequestOpenExternalUrl).not.toHaveBeenCalled();
+    fireEvent.click(sdkButton);
+    expect(mockRequestOpenExternalUrl).toHaveBeenCalled();
+
+    // assert that the requestOpenExternalUrl function was called with the expected arguments
+    expect(mockRequestOpenExternalUrl.mock.calls[0][0]).toEqual({
+      url: DOCS_URL,
+    });
+  });
+
+  // this test demonstrates the use of a snapshot test
+  it("should have a consistent snapshot", () => {
+    const result = renderInTestProvider(<App />);
+    expect(result.container).toMatchSnapshot();
+  });
+});

package/templates/hello_world/webpack.config.cjs

@@ -4,6 +4,7 @@ const TerserPlugin = require("terser-webpack-plugin");
 const { DefinePlugin, optimize } = require("webpack");
 const chalk = require("chalk");
 const { transform } = require("@formatjs/ts-transformer");
+const ReactRefreshWebpackPlugin = require("@pmmmwh/react-refresh-webpack-plugin");
 
 /**
  *
@@ -173,7 +174,8 @@ function buildConfig({
       }),
       // Apps can only submit a single JS file via the developer portal
       new optimize.LimitChunkCountPlugin({ maxChunks: 1 }),
-    ],
+      mode === "development" && new ReactRefreshWebpackPlugin(),
+    ].filter(Boolean),
     ...buildDevConfig(devConfig),
   };
 }