@canva/cli 0.0.1-beta.2 → 0.0.1-beta.20

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

@@ -1,12 +1,14 @@
 /* eslint-disable no-console */
 import type { Context } from "./context";
 import * as chalk from "chalk";
-import { buildConfig } from "../../webpack.config.cjs";
+import { buildConfig } from "../../webpack.config";
 import * as ngrok from "@ngrok/ngrok";
 import * as nodemon from "nodemon";
 import * as Table from "cli-table3";
 import * as webpack from "webpack";
 import * as WebpackDevServer from "webpack-dev-server";
+import * as open from "open";
+import { generatePreviewUrl } from "@canva/cli";
 import type { Certificate } from "../ssl/ssl";
 import { createOrRetrieveCertificate } from "../ssl/ssl";
 
@@ -46,12 +48,18 @@ export class AppRunner {
       }
     }
 
-    const table = new Table();
+    const table = new Table({
+      colWidths: [30, 80],
+      wordWrap: true,
+      wrapOnWordBoundary: true,
+    });
 
     const server = await this.runWebpackDevServer(ctx, table, cert);
 
     await this.maybeRunBackendServer(ctx, table, cert, server);
 
+    await this.generateAndOpenPreviewUrl(ctx.openPreview, table);
+
     console.log(table.toString(), "\n");
 
     console.log(
@@ -161,4 +169,33 @@ export class AppRunner {
 
     return server;
   };
+
+  /**
+   * Calls the Canva CLI to generate a preview URL for the app
+   */
+  private readonly generateAndOpenPreviewUrl = async (
+    openPreview: boolean,
+    table: Table.Table,
+  ) => {
+    const previewCellHeader = { content: "Preview your app in Canva" };
+
+    const generatePreviewResult = await generatePreviewUrl();
+
+    if (!generatePreviewResult.success) {
+      table.push([
+        previewCellHeader,
+        { content: warnChalk(generatePreviewResult.message) },
+      ]);
+      return;
+    }
+
+    table.push([
+      previewCellHeader,
+      { content: "Preview URL", href: generatePreviewResult.data },
+    ]);
+
+    if (openPreview) {
+      open(generatePreviewResult.data);
+    }
+  };
 }

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

@@ -3,8 +3,10 @@ import * as path from "path";
 
 interface CliArgs {
   example?: string;
-  useHttps?: boolean;
-  ngrok?: boolean;
+  useHttps: boolean;
+  ngrok: boolean;
+  preview: boolean;
+  overrideFrontendPort?: number;
 }
 
 interface EnvVars {
@@ -45,7 +47,7 @@ export class Context {
   }
 
   get ngrokEnabled() {
-    return !!this.args.ngrok;
+    return this.args.ngrok;
   }
 
   get hmrEnabled() {
@@ -53,7 +55,7 @@ export class Context {
   }
 
   get httpsEnabled() {
-    return !!this.args.useHttps;
+    return this.args.useHttps;
   }
 
   get frontendEntryPath() {
@@ -69,11 +71,11 @@ export class Context {
   }
 
   get frontendUrl() {
-    return `${this.protocol}://localhost:${this.envVars.frontendPort}`;
+    return `${this.protocol}://localhost:${this.frontendPort}`;
   }
 
   get frontendPort() {
-    return this.envVars.frontendPort;
+    return this.args.overrideFrontendPort || this.envVars.frontendPort;
   }
 
   get developerBackendEntryPath(): string | undefined {
@@ -117,6 +119,10 @@ export class Context {
     return this.envVars.appId;
   }
 
+  get openPreview(): boolean {
+    return this.args.preview;
+  }
+
   private get protocol(): "https" | "http" {
     return this.httpsEnabled ? "https" : "http";
   }

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

@@ -23,6 +23,17 @@ yargs(hideBin(process.argv))
     default:
       process.env.npm_config_use_https?.toLocaleLowerCase().trim() === "true",
   })
+  .option("override-frontend-port", {
+    description:
+      "Port to run the local development server on. Overrides the frontend port set in the .env file.",
+    type: "number",
+    alias: "p",
+  })
+  .option("preview", {
+    description: "Open the app in Canva.",
+    type: "boolean",
+    default: false,
+  })
   .command(
     "$0",
     "Starts local development",

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/api/api.ts

@@ -1,4 +1,3 @@
-import { auth } from "@canva/user";
 import { POLLING_INTERVAL_IN_SECONDS } from "src/config";
 
 /**
@@ -41,22 +40,12 @@ interface RemainingCreditsResult {
   credits: number;
 }
 
-/**
- * Represents the result of retrieving the logged in status of the user.
- */
-export type LoggedInState =
-  | "authenticated"
-  | "not_authenticated"
-  | "checking"
-  | "error";
-
 const endpoints = {
   queueImageGeneration: "/api/queue-image-generation",
   getImageGenerationJobStatus: "/api/job-status",
   cancelImageGenerationJob: "/api/job-status/cancel",
   getRemainingCredits: "/api/credits",
   purchaseCredits: "/api/purchase-credits",
-  getLoggedInStatus: "/api/authentication/status",
 };
 
 /**
@@ -172,42 +161,15 @@ export const purchaseCredits = async (): Promise<RemainingCreditsResult> => {
 };
 
 /**
- * Send a request to an endpoint that checks if the user is authenticated.
- * This is example code, intended to convey the basic idea. When implementing this in your app, you might want more advanced checks.
- *
- * Note: You must register the provided endpoint via the Developer Portal.
- */
-export const checkAuthenticationStatus = async (): Promise<LoggedInState> => {
-  try {
-    const url = new URL(endpoints.getLoggedInStatus, BACKEND_HOST);
-    const result: { isAuthenticated: string } = await sendRequest(url, {
-      method: "POST",
-    });
-
-    if (result?.isAuthenticated) {
-      return "authenticated";
-    } else {
-      return "not_authenticated";
-    }
-  } catch (error) {
-    // eslint-disable-next-line no-console
-    console.error(error);
-    return "error";
-  }
-};
-
-/**
- * Sends a request to the specified URL with authorization headers.
+ * Sends a request to the specified URL.
  * @param {URL} url - The URL to send the request to.
  * @param {RequestInit} [options] - Optional fetch options to be passed to the fetch function.
  * @returns {Promise<Object>} - A promise that resolves to the response body.
  */
 const sendRequest = async <T>(url: URL, options?: RequestInit): Promise<T> => {
-  const token = await auth.getCanvaUserToken();
   const res = await fetch(url, {
     headers: {
       ...options?.headers,
-      Authorization: `Bearer ${token}`,
     },
     ...options,
   });

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/footer.messages.ts

@@ -11,11 +11,6 @@ export const FooterMessages = defineMessages({
     defaultMessage: "Generate image",
     description: "A button label to generate an image from a prompt",
   },
-  signUpOrLogin: {
-    defaultMessage: "Sign up or log in to generate",
-    description:
-      "A button label to sign up or log in, before the user is able to generate an image",
-  },
   purchaseMoreCredits: {
     defaultMessage: "Purchase more credits",
     description:

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

@@ -1,11 +1,10 @@
 import { useNavigate, useLocation } from "react-router-dom";
 import { Rows, Button } from "@canva/app-ui-kit";
 import { queueImageGeneration, purchaseCredits } from "src/api";
-import { LoggedInStatus, RemainingCredits } from "src/components";
+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 { useAuth } from "src/services";
 import { getObsceneWords } from "src/utils";
 import { useIntl } from "react-intl";
 import { FooterMessages as Messages } from "./footer.messages";
@@ -13,10 +12,8 @@ import { FooterMessages as Messages } from "./footer.messages";
 export const Footer = () => {
   const navigate = useNavigate();
   const { pathname } = useLocation();
-  const { requestAuthentication } = useAuth();
   const isRootRoute = pathname === Paths.HOME;
   const {
-    loggedInState,
     setAppError,
     promptInput,
     setPromptInput,
@@ -86,10 +83,6 @@ export const Footer = () => {
     navigate(Paths.RESULTS);
   };
 
-  const onSignUpOrLogInClick = async () => {
-    await requestAuthentication();
-  };
-
   const onPurchaseMoreCredits = async () => {
     const { credits } = await purchaseCredits();
 
@@ -110,17 +103,11 @@ export const Footer = () => {
         : intl.formatMessage(Messages.generateAgain),
       visible: hasRemainingCredits,
     },
-    {
-      variant: "primary" as const,
-      onClick: onSignUpOrLogInClick,
-      value: intl.formatMessage(Messages.signUpOrLogin),
-      visible: loggedInState === "not_authenticated" && !hasRemainingCredits,
-    },
     {
       variant: "primary" as const,
       onClick: onPurchaseMoreCredits,
       value: intl.formatMessage(Messages.purchaseMoreCredits),
-      visible: loggedInState === "authenticated" && !hasRemainingCredits,
+      visible: !hasRemainingCredits,
     },
     {
       variant: "secondary" as const,
@@ -151,7 +138,6 @@ export const Footer = () => {
           ),
       )}
       <RemainingCredits />
-      <LoggedInStatus />
     </Rows>
   );
 };

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

@@ -1,7 +1,7 @@
 import { Grid, ImageCard, Rows, Text } from "@canva/app-ui-kit";
 import type { QueuedImage } from "@canva/asset";
 import { upload } from "@canva/asset";
-import { addNativeElement, ui } from "@canva/design";
+import { addElementAtPoint, ui } from "@canva/design";
 import type { ImageType } from "src/api";
 import { useAppContext } from "src/context";
 import * as styles from "styles/utils.css";
@@ -12,12 +12,13 @@ const THUMBNAIL_HEIGHT = 150;
 const uploadImage = async (image: ImageType): Promise<QueuedImage> => {
   // Upload the image using @canva/asset.
   const queuedImage = await upload({
-    type: "IMAGE",
+    type: "image",
     mimeType: "image/jpeg",
     thumbnailUrl: image.thumbnail.url,
     url: image.fullsize.url,
     width: image.fullsize.width,
     height: image.fullsize.height,
+    aiDisclosure: "app_generated",
   });
 
   return queuedImage;
@@ -34,8 +35,8 @@ export const ImageGrid = () => {
     try {
       parentNode?.classList.add(styles.hidden);
 
-      await ui.startDrag(event, {
-        type: "IMAGE",
+      await ui.startDragToPoint(event, {
+        type: "image",
         resolveImageRef: () => uploadImage(image),
         previewUrl: image.thumbnail.url,
         previewSize: {
@@ -55,8 +56,9 @@ export const ImageGrid = () => {
   const onImageClick = async (image: ImageType) => {
     const queuedImage = await uploadImage(image);
 
-    await addNativeElement({
-      type: "IMAGE",
+    await addElementAtPoint({
+      type: "image",
+      altText: { text: image.label, decorative: false },
       ref: queuedImage.ref,
     });
   };

package/templates/gen_ai/src/components/index.ts

@@ -2,7 +2,6 @@ export * from "./app_error";
 export * from "./footer";
 export * from "./image_grid";
 export * from "./loading_results";
-export * from "./logged_in_status";
 export * from "./prompt_input";
 export * from "./report_box";
 export * from "./remaining_credits";

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/context/app_context.tsx

@@ -1,12 +1,10 @@
 import { createContext, useEffect, useState } from "react";
 import { useIntl } from "react-intl";
-import type { ImageType, LoggedInState } from "src/api";
-import { checkAuthenticationStatus, getRemainingCredits } from "src/api";
+import type { ImageType } from "src/api";
+import { getRemainingCredits } from "src/api";
 import { ContextMessages as Messages } from "./context.messages";
 
 export interface AppContextType {
-  loggedInState: LoggedInState;
-  setLoggedInState: (value: LoggedInState) => void;
   appError: string;
   setAppError: (value: string) => void;
   creditsError: string;
@@ -28,8 +26,6 @@ export interface AppContextType {
 }
 
 export const AppContext = createContext<AppContextType>({
-  loggedInState: "not_authenticated",
-  setLoggedInState: () => {},
   appError: "",
   setAppError: () => {},
   creditsError: "",
@@ -65,8 +61,6 @@ export const ContextProvider = ({
 }: {
   children: React.ReactNode;
 }): JSX.Element => {
-  const [loggedInState, setLoggedInState] =
-    useState<LoggedInState>("not_authenticated");
   const [appError, setAppError] = useState<string>("");
   const [loadingApp, setLoadingApp] = useState<boolean>(true); // set to true to prevent ui flash on load
   const [isLoadingImages, setIsLoadingImages] = useState<boolean>(false);
@@ -95,17 +89,6 @@ export const ContextProvider = ({
           // eslint-disable-next-line no-console
           console.error("Error fetching remaining credits:", error);
         }
-
-        // Fetch login status
-        try {
-          checkAuthenticationStatus();
-        } catch (error) {
-          setAppError(
-            intl.formatMessage(Messages.appErrorGetLoggedInStatusFailed),
-          );
-          // eslint-disable-next-line no-console
-          console.error("Error fetching login status:", error);
-        }
       } catch (error) {
         setAppError(intl.formatMessage(Messages.appErrorGeneral));
         // eslint-disable-next-line no-console
@@ -125,13 +108,10 @@ export const ContextProvider = ({
       return;
     }
 
-    const errorMessage =
-      loggedInState === "authenticated"
-        ? intl.formatMessage(Messages.alertNotEnoughCreditsLoggedIn)
-        : intl.formatMessage(Messages.alertNotEnoughCreditsLoggedOut);
+    const errorMessage = intl.formatMessage(Messages.alertNotEnoughCredits);
 
     setCreditsError(errorMessage);
-  }, [loadingApp, remainingCredits, loggedInState]);
+  }, [loadingApp, remainingCredits]);
 
   const setPromptInputHandler = (value: string) => {
     if (
@@ -148,8 +128,6 @@ export const ContextProvider = ({
   };
 
   const value: AppContextType = {
-    loggedInState,
-    setLoggedInState,
     appError,
     setAppError,
     creditsError,

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

@@ -12,11 +12,6 @@ export const ContextMessages = defineMessages({
     description:
       "A message to indicate that there was a failure to get the number of credits the user has",
   },
-  appErrorGetLoggedInStatusFailed: {
-    defaultMessage: "Retrieving logged in status has failed.",
-    description:
-      "A message to indicate that due to an unexpected problem, the app was unable to determine if the user is logged in",
-  },
 
   /** Messages related to prompts and user input validation. */
   promptMissingErrorMessage: {
@@ -26,16 +21,10 @@ export const ContextMessages = defineMessages({
   },
 
   /** Messages related to credits, including their availability and purchasing options. */
-  alertNotEnoughCreditsLoggedIn: {
+  alertNotEnoughCredits: {
     defaultMessage:
       "You don’t have enough credits left to generate an image. Please purchase more.",
     description:
       "A message to indicate that the user doesn't have enough credits to generate an image, and will need to buy more to continue",
   },
-  alertNotEnoughCreditsLoggedOut: {
-    defaultMessage:
-      "You don’t have enough credits left to generate an image. Please sign up or log in to purchase more.",
-    description:
-      "A message to indicate that the user doesn't have enough credits to generate an image, and will need to sign up or log in to buy more",
-  },
 });

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: [
       {