@canva/cli 0.0.1-beta.9 → 1.0.1

package/templates/gen_ai/scripts/start/tests/start.tests.ts

@@ -0,0 +1,61 @@
+/* eslint-disable no-console */
+
+import type { ChildProcess } from "child_process";
+import { spawn } from "child_process";
+import * as treeKill from "tree-kill";
+
+describe("start script", () => {
+  let serverProcess: ChildProcess;
+
+  afterEach(() => {
+    if (serverProcess?.pid && !serverProcess.exitCode) {
+      treeKill(serverProcess.pid);
+    }
+  });
+
+  it("should execute 'npm run start' and start a dev server", async () => {
+    const testServerPort = 8089;
+    serverProcess = await spawn(
+      `npm run start -- -p ${testServerPort} --no-preview`,
+      {
+        shell: true,
+      },
+    );
+
+    if (!serverProcess.pid) {
+      throw new Error("Unable to start server");
+    }
+
+    // wait for the server to start and collect output until it reports the running URL
+    let output = "";
+    await new Promise<void>((resolve, reject) => {
+      serverProcess.stdout?.on("data", (data) => {
+        output += data.toString();
+        if (output.includes("Development URL")) {
+          resolve();
+        }
+      });
+
+      serverProcess.stderr?.on("data", (data) => {
+        console.error("Server process error: ", data.toString());
+        reject();
+      });
+
+      // timeout and fail test if the server hasn't correctly started in 10 seconds
+      setTimeout(() => {
+        if (serverProcess?.pid && !serverProcess.exitCode) {
+          treeKill(serverProcess.pid);
+        }
+        reject(new Error("Test timed out"));
+      }, 10000);
+    });
+
+    // check that the server is running and accessible
+    const expectedServerURL = `http://localhost:${testServerPort}`;
+    expect(output).toContain(expectedServerURL);
+    expect(serverProcess.exitCode).toBeNull();
+
+    // clean up
+    treeKill(serverProcess.pid);
+  }, 15000); // 15 seconds timeout to allow for the server to start
+});

package/templates/gen_ai/src/app.tsx

@@ -1,10 +1,10 @@
-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 { createHashRouter, RouterProvider } from "react-router-dom";
+import { ContextProvider } from "./context";
 import { ErrorPage } from "./pages";
+import { routes } from "./routes";
 
 export const App = () => (
   <AppI18nProvider>

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

@@ -1,18 +1,20 @@
-import { useNavigate, useLocation } from "react-router-dom";
-import { Rows, Button } from "@canva/app-ui-kit";
-import { queueImageGeneration, purchaseCredits } from "src/api";
+import { Button, Rows } from "@canva/app-ui-kit";
+import { getPlatformInfo } from "@canva/platform";
+import { useIntl } from "react-intl";
+import { useLocation, useNavigate } from "react-router-dom";
+import { purchaseCredits, queueImageGeneration } from "src/api";
 import { RemainingCredits } from "src/components";
 import { NUMBER_OF_IMAGES_TO_GENERATE } from "src/config";
 import { useAppContext } from "src/context";
-import { Paths } from "src/routes";
+import { Paths } from "src/paths";
 import { getObsceneWords } from "src/utils";
-import { useIntl } from "react-intl";
 import { FooterMessages as Messages } from "./footer.messages";
 
 export const Footer = () => {
   const navigate = useNavigate();
   const { pathname } = useLocation();
   const isRootRoute = pathname === Paths.HOME;
+  const platformInfo = getPlatformInfo();
   const {
     setAppError,
     promptInput,
@@ -84,8 +86,11 @@ export const Footer = () => {
   };
 
   const onPurchaseMoreCredits = async () => {
-    const { credits } = await purchaseCredits();
+    if (!platformInfo.canAcceptPayments) {
+      return;
+    }
 
+    const { credits } = await purchaseCredits();
     setRemainingCredits(credits);
   };
 
@@ -108,6 +113,12 @@ export const Footer = () => {
       onClick: onPurchaseMoreCredits,
       value: intl.formatMessage(Messages.purchaseMoreCredits),
       visible: !hasRemainingCredits,
+      disabled: !platformInfo.canAcceptPayments,
+      tooltip: intl.formatMessage({
+        defaultMessage: "Payment not available on this platform.",
+        description:
+          "Tooltip text when payment functionality is not available on the current platform. ",
+      }),
     },
     {
       variant: "secondary" as const,
@@ -124,7 +135,7 @@ export const Footer = () => {
   return (
     <Rows spacing="1u">
       {footerButtons.map(
-        ({ visible, variant, onClick, value }) =>
+        ({ visible, variant, onClick, value, disabled, tooltip }) =>
           visible && (
             <Button
               key={value}
@@ -132,6 +143,8 @@ export const Footer = () => {
               onClick={onClick}
               loading={loadingApp}
               stretch={true}
+              disabled={disabled}
+              tooltipLabel={tooltip}
             >
               {value}
             </Button>

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

@@ -2,10 +2,10 @@ 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 { FormattedMessage, useIntl } from "react-intl";
 import type { ImageType } from "src/api";
 import { useAppContext } from "src/context";
 import * as styles from "styles/utils.css";
-import { FormattedMessage, useIntl } from "react-intl";
 
 const THUMBNAIL_HEIGHT = 150;
 

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

@@ -1,18 +1,18 @@
-import { useEffect, useState } from "react";
-import { useNavigate } from "react-router-dom";
 import {
-  Rows,
+  Box,
+  Button,
   Grid,
   Placeholder,
   ProgressBar,
+  Rows,
   Text,
-  Button,
-  Box,
 } from "@canva/app-ui-kit";
-import { Paths } from "src/routes";
-import { useAppContext } from "src/context";
-import { cancelImageGenerationJob, getImageGenerationJobStatus } from "src/api";
+import { useEffect, useState } from "react";
 import { FormattedMessage, useIntl } from "react-intl";
+import { useNavigate } from "react-router-dom";
+import { cancelImageGenerationJob, getImageGenerationJobStatus } from "src/api";
+import { useAppContext } from "src/context";
+import { Paths } from "src/paths";
 
 const INTERVAL_DURATION_IN_MS = 100;
 const TOTAL_PROGRESS_PERCENTAGE = 100;

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

@@ -1,5 +1,3 @@
-import { useState } from "react";
-import { useLocation } from "react-router-dom";
 import {
   Box,
   Button,
@@ -7,10 +5,12 @@ import {
   LightBulbIcon,
   MultilineInput,
 } from "@canva/app-ui-kit";
+import { useState } from "react";
+import { useIntl } from "react-intl";
+import { useLocation } from "react-router-dom";
 import { useAppContext } from "src/context";
-import { Paths } from "src/routes";
+import { Paths } from "src/paths";
 import { PromptInputMessages as Messages } from "./prompt_input.messages";
-import { useIntl } from "react-intl";
 
 // @TODO: Adjust according to your specific requirements.
 const MAX_INPUT_LENGTH = 280;

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

@@ -1,13 +1,14 @@
 import { Link, Rows, Text, TextPlaceholder } from "@canva/app-ui-kit";
-import { requestOpenExternalUrl } from "@canva/platform";
-import { useAppContext } from "src/context";
+import { getPlatformInfo, requestOpenExternalUrl } from "@canva/platform";
 import { FormattedMessage, useIntl } from "react-intl";
+import { useAppContext } from "src/context";
 
 // @TODO: Replace this URL with your custom upselling link.
 const PURCHASE_URL = "https://example.com";
 
 export const RemainingCredits = (): JSX.Element | undefined => {
   const { remainingCredits, loadingApp } = useAppContext();
+  const platformInfo = getPlatformInfo();
 
   const RemainingCreditsText = () => {
     if (loadingApp) {
@@ -50,25 +51,32 @@ export const RemainingCredits = (): JSX.Element | undefined => {
     <Rows spacing="0">
       <RemainingCreditsText />
       <Text alignment="center" size="small">
-        <FormattedMessage
-          defaultMessage="Purchase more credits at <link>example.com</link>."
-          description="A message to prompt the user to purchase more credits. Do not translate <link>example.com</link>."
-          values={{
-            link: (chunks) => (
-              <Link
-                href={PURCHASE_URL}
-                requestOpenExternalUrl={() => openExternalUrl(PURCHASE_URL)}
-                title={intl.formatMessage({
-                  defaultMessage: "Example Co. website",
-                  description:
-                    "A title for a link to the website of Example Co.",
-                })}
-              >
-                {chunks}
-              </Link>
-            ),
-          }}
-        />
+        {platformInfo.canAcceptPayments ? (
+          <FormattedMessage
+            defaultMessage="Purchase more credits at <link>example.com</link>."
+            description="A message to prompt the user to purchase more credits. Do not translate <link>example.com</link>."
+            values={{
+              link: (chunks) => (
+                <Link
+                  href={PURCHASE_URL}
+                  requestOpenExternalUrl={() => openExternalUrl(PURCHASE_URL)}
+                  tooltipLabel={intl.formatMessage({
+                    defaultMessage: "Example Co. website",
+                    description:
+                      "A title for a link to the website of Example Co.",
+                  })}
+                >
+                  {chunks}
+                </Link>
+              ),
+            }}
+          />
+        ) : (
+          <FormattedMessage
+            defaultMessage="Open this app in a web browser to learn how to purchase more credits."
+            description="A message shown when platform doesn't allow external payment links"
+          />
+        )}
       </Text>
     </Rows>
   );

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

@@ -1,4 +1,4 @@
-import { Box, Columns, Column, FlagIcon, Text, Link } from "@canva/app-ui-kit";
+import { Box, Column, Columns, FlagIcon, Link, Text } from "@canva/app-ui-kit";
 import { requestOpenExternalUrl } from "@canva/platform";
 import { FormattedMessage, useIntl } from "react-intl";
 import { APP_NAME } from "src/config";
@@ -34,7 +34,7 @@ export const ReportBox = (): JSX.Element => {
                   <Link
                     href={REPORT_URL}
                     requestOpenExternalUrl={() => openExternalUrl(REPORT_URL)}
-                    title={intl.formatMessage({
+                    tooltipLabel={intl.formatMessage({
                       defaultMessage: "Report content",
                       description:
                         "A title for a link to report AI generated content that is problematic",

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

@@ -1,11 +1,11 @@
 /* eslint-disable formatjs/no-literal-string-in-jsx */
-import { TestAppUiProvider } from "@canva/app-ui-kit";
 import { TestAppI18nProvider } from "@canva/app-i18n-kit";
+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 { RemainingCredits } from "../remaining_credits";
-import { requestOpenExternalUrl } from "@canva/platform";
 
 function renderInTestProvider(node: React.ReactNode): RenderResult {
   return render(
@@ -20,9 +20,13 @@ function renderInTestProvider(node: React.ReactNode): RenderResult {
 // 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);
+  const mockGetPlatformInfo = jest.mocked(getPlatformInfo);
 
   beforeEach(() => {
     jest.resetAllMocks();
+    mockGetPlatformInfo.mockReturnValue({
+      canAcceptPayments: true,
+    });
   });
 
   it("should call requestOpenExternalUrl when the link is clicked", () => {

package/templates/gen_ai/src/context/use_app_context.ts

@@ -1,6 +1,6 @@
 import { useContext } from "react";
-import type { AppContextType } from ".";
-import { AppContext } from ".";
+import type { AppContextType } from "./app_context";
+import { AppContext } from "./app_context";
 
 /**
  * A custom React hook to access the application-wide state and methods provided by the ContextProvider using React Context.

package/templates/gen_ai/src/home.tsx

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

package/templates/gen_ai/src/pages/error.tsx

@@ -1,9 +1,9 @@
-import { useNavigate } from "react-router-dom";
 import { Button, Rows, Text } from "@canva/app-ui-kit";
+import { FormattedMessage, useIntl } from "react-intl";
+import { useNavigate } from "react-router-dom";
 import { useAppContext } from "src/context";
-import { Paths } from "src/routes";
+import { Paths } from "src/paths";
 import * as styles from "styles/components.css";
-import { FormattedMessage, useIntl } from "react-intl";
 
 /**
  * Bare bones Error Page, please add relevant information and behavior that your app requires.

package/templates/gen_ai/src/pages/results.tsx

@@ -6,8 +6,8 @@ import {
   PromptInput,
   ReportBox,
 } from "src/components";
-import { useAppContext } from "src/context";
 import { EXPECTED_LOADING_TIME_IN_SECONDS } from "src/config";
+import { useAppContext } from "src/context";
 
 export const ResultsPage = () => {
   const { isLoadingImages } = useAppContext();

package/templates/gen_ai/src/paths.ts

@@ -0,0 +1,4 @@
+export enum Paths {
+  HOME = "/",
+  RESULTS = "/results",
+}

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

@@ -1,10 +1,8 @@
 import { Home } from "src/home";
-import { ErrorPage, GeneratePage, ResultsPage } from "src/pages";
-
-export enum Paths {
-  HOME = "/",
-  RESULTS = "/results",
-}
+import { ErrorPage } from "src/pages/error";
+import { GeneratePage } from "src/pages/generate";
+import { ResultsPage } from "src/pages/results";
+import { Paths } from "src/paths";
 
 export const routes = [
   {

package/templates/gen_ai/utils/backend/base_backend/create.ts

@@ -1,10 +1,10 @@
 /* eslint-disable no-console */
+import debug from "debug";
 import * as express from "express";
+import type { NextFunction, Request, Response } from "express";
+import * as fs from "fs";
 import * as http from "http";
 import * as https from "https";
-import * as fs from "fs";
-import type { Request, Response, NextFunction } from "express";
-import debug from "debug";
 
 const serverDebug = debug("server");
 

package/templates/gen_ai/utils/backend/bearer_middleware/bearer_middleware.ts

@@ -1,6 +1,6 @@
 /* eslint-disable no-console */
 import * as debug from "debug";
-import type { Request, Response, NextFunction } from "express";
+import type { NextFunction, Request, Response } from "express";
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 import Express from "express-serve-static-core";
 
@@ -45,7 +45,7 @@ export function createBearerMiddleware(
         throw new AuthorizationError("Token is invalid");
       }
 
-      req.user_id = user;
+      req["user_id"] = user;
 
       next();
     } catch (e) {

package/templates/{hello_world/webpack.config.cjs → gen_ai/webpack.config.ts}

@@ -1,31 +1,36 @@
-require("dotenv").config();
-const path = require("path");
-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");
+import type { Configuration } from "webpack";
+import { DefinePlugin, optimize } from "webpack";
+import * as path from "path";
+import * as TerserPlugin from "terser-webpack-plugin";
+import { transform } from "@formatjs/ts-transformer";
+import * as chalk from "chalk";
+import { config } from "dotenv";
+import { Configuration as DevServerConfiguration } from "webpack-dev-server";
 
-/**
- *
- * @param {Object} [options]
- * @param {string} [options.appEntry=./src/index.tsx]
- * @param {string} [options.backendHost]
- * @param {Object} [options.devConfig]
- * @param {number} [options.devConfig.port]
- * @param {boolean} [options.devConfig.enableHmr]
- * @param {boolean} [options.devConfig.enableHttps]
- * @param {string} [options.devConfig.appOrigin]
- * @param {string} [options.devConfig.appId] - Deprecated in favour of appOrigin
- * @param {string} [options.devConfig.certFile]
- * @param {string} [options.devConfig.keyFile]
- * @returns {Object}
- */
-function buildConfig({
+config();
+
+type DevConfig = {
+  port: number;
+  enableHmr: boolean;
+  enableHttps: boolean;
+  appOrigin?: string;
+  appId?: string; // Deprecated in favour of appOrigin
+  certFile?: string;
+  keyFile?: string;
+};
+
+export function buildConfig({
   devConfig,
   appEntry = path.join(process.cwd(), "src", "index.tsx"),
   backendHost = process.env.CANVA_BACKEND_HOST,
-} = {}) {
+  // For IN_HARNESS, refer to the following docs for more information: https://www.canva.dev/docs/apps/test-harness/
+  inHarness = process.env.IN_HARNESS?.toLowerCase() === "true",
+}: {
+  devConfig?: DevConfig;
+  appEntry?: string;
+  backendHost?: string;
+  inHarness?: boolean;
+} = {}): Configuration & DevServerConfiguration {
   const mode = devConfig ? "development" : "production";
 
   if (!backendHost) {
@@ -46,9 +51,14 @@ function buildConfig({
   return {
     mode,
     context: path.resolve(process.cwd(), "./"),
-    entry: {
-      app: appEntry,
-    },
+    entry: inHarness
+      ? {
+          harness: path.join(process.cwd(), "harness", "harness.tsx"),
+          init: path.join(process.cwd(), "harness", "init.ts"),
+        }
+      : {
+          app: appEntry,
+        },
     target: "web",
     resolve: {
       alias: {
@@ -60,7 +70,7 @@ function buildConfig({
       extensions: [".ts", ".tsx", ".js", ".css", ".svg", ".woff", ".woff2"],
     },
     infrastructureLogging: {
-      level: "none",
+      level: inHarness ? "info" : "none",
     },
     module: {
       rules: [
@@ -172,35 +182,26 @@ function buildConfig({
       new DefinePlugin({
         BACKEND_HOST: JSON.stringify(backendHost),
       }),
-      // Apps can only submit a single JS file via the developer portal
+      // 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),
   };
 }
 
-/**
- *
- * @param {Object} [options]
- * @param {number} [options.port]
- * @param {boolean} [options.enableHmr]
- * @param {boolean} [options.enableHttps]
- * @param {string} [options.appOrigin]
- * @param {string} [options.appId] - Deprecated in favour of appOrigin
- * @param {string} [options.certFile]
- * @param {string} [options.keyFile]
- * @returns {Object|null}
- */
-function buildDevConfig(options) {
+function buildDevConfig(options?: DevConfig): {
+  devtool?: string;
+  devServer?: DevServerConfiguration;
+} {
   if (!options) {
-    return null;
+    return {};
   }
 
   const { port, enableHmr, appOrigin, appId, enableHttps, certFile, keyFile } =
     options;
+  const host = "localhost";
 
-  let devServer = {
+  let devServer: DevServerConfiguration = {
     server: enableHttps
       ? {
           type: "https",
@@ -210,7 +211,8 @@ function buildDevConfig(options) {
           },
         }
       : "http",
-    host: "localhost",
+    host,
+    allowedHosts: [host],
     historyApiFallback: {
       rewrites: [{ from: /^\/$/, to: "/app.js" }],
     },
@@ -227,31 +229,13 @@ function buildDevConfig(options) {
   if (enableHmr && appOrigin) {
     devServer = {
       ...devServer,
-      allowedHosts: new URL(appOrigin).hostname,
+      allowedHosts: [host, new URL(appOrigin).hostname],
       headers: {
         "Access-Control-Allow-Origin": appOrigin,
         "Access-Control-Allow-Credentials": "true",
         "Access-Control-Allow-Private-Network": "true",
       },
     };
-  } else if (enableHmr && appId) {
-    // Deprecated - App ID should not be used to configure HMR in the future and can be safely removed
-    // after a few months.
-
-    console.warn(
-      "Enabling Hot Module Replacement (HMR) with an App ID is deprecated, please see the README.md on how to update.",
-    );
-
-    const appDomain = `app-${appId.toLowerCase().trim()}.canva-apps.com`;
-    devServer = {
-      ...devServer,
-      allowedHosts: appDomain,
-      headers: {
-        "Access-Control-Allow-Origin": `https://${appDomain}`,
-        "Access-Control-Allow-Credentials": "true",
-        "Access-Control-Allow-Private-Network": "true",
-      },
-    };
   } else {
     if (enableHmr && !appOrigin) {
       console.warn(
@@ -267,6 +251,4 @@ function buildDevConfig(options) {
   };
 }
 
-module.exports = () => buildConfig();
-
-module.exports.buildConfig = buildConfig;
+export default buildConfig;

package/templates/hello_world/canva-app.json

@@ -0,0 +1,16 @@
+{
+  "$schema": "https://www.canva.dev/schemas/app/v1/manifest-schema.json",
+  "manifest_schema_version": 1,
+  "runtime": {
+    "permissions": [
+      {
+        "name": "canva:design:content:read",
+        "type": "mandatory"
+      },
+      {
+        "name": "canva:design:content:write",
+        "type": "mandatory"
+      }
+    ]
+  }
+}

package/templates/hello_world/eslint.config.mjs

@@ -1,17 +1,4 @@
-import path from "node:path";
-import { fileURLToPath } from "node:url";
-import js from "@eslint/js";
-import { FlatCompat } from "@eslint/eslintrc";
-import general from "./conf/eslint-general.mjs";
-import i18n from "./conf/eslint-i18n.mjs";
-
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = path.dirname(__filename);
-const compat = new FlatCompat({
-  baseDirectory: __dirname,
-  recommendedConfig: js.configs.recommended,
-  allConfig: js.configs.all,
-});
+import canvaPlugin from "@canva/app-eslint-plugin";
 
 export default [
   {
@@ -23,15 +10,5 @@ export default [
       "**/*.config.*",
     ],
   },
-  ...compat.extends(
-    "eslint:recommended",
-    "plugin:@typescript-eslint/recommended",
-    "plugin:@typescript-eslint/eslint-recommended",
-    "plugin:@typescript-eslint/strict",
-    "plugin:@typescript-eslint/stylistic",
-    "plugin:react/recommended",
-    "plugin:jest/recommended",
-  ),
-  ...general,
-  ...i18n,
+  ...canvaPlugin.configs.apps,
 ];