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

package/templates/dam/src/app.tsx

@@ -1,147 +1,14 @@
-import { useEffect, useState } from "react";
 import { SearchableListView } from "@canva/app-components";
-import { Alert, Box, Button, LoadingIndicator, Rows } from "@canva/app-ui-kit";
-import type { Authentication } from "@canva/user";
-import { auth } from "@canva/user";
+import { Box } from "@canva/app-ui-kit";
 import { findResources } from "./adapter";
 import { config } from "./config";
 import * as styles from "./index.css";
 import "@canva/app-ui-kit/styles.css";
 
-type AuthenticationState =
-  | "authenticated"
-  | "not_authenticated"
-  | "checking"
-  | "cancelled"
-  | "error";
-
-/**
- * This endpoint is defined in the ./backend/server.ts file. You need to
- * register the endpoint in the Developer Portal before sending requests.
- *
- * BACKEND_HOST is configured in the root .env file, for more information,
- * refer to the README.md.
- */
-const AUTHENTICATION_CHECK_URL = `${BACKEND_HOST}/api/authentication/status`;
-
-const checkAuthenticationStatus = async (
-  auth: Authentication,
-): Promise<AuthenticationState> => {
-  /**
-   * 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.
-   */
-  try {
-    const token = await auth.getCanvaUserToken();
-    const res = await fetch(AUTHENTICATION_CHECK_URL, {
-      headers: {
-        Authorization: `Bearer ${token}`,
-      },
-      method: "POST",
-    });
-    const body = await res.json();
-
-    if (body?.isAuthenticated) {
-      return "authenticated";
-    } else {
-      return "not_authenticated";
-    }
-  } catch (error) {
-    // eslint-disable-next-line no-console
-    console.error(error);
-    return "error";
-  }
-};
-
 export function App() {
-  // Keep track of the user's authentication status.
-  const [authState, setAuthState] = useState<AuthenticationState>("checking");
-
-  useEffect(() => {
-    setAuthState("checking");
-    checkAuthenticationStatus(auth).then((status) => {
-      setAuthState(status);
-    });
-  }, []);
-
-  useEffect(() => {
-    if (authState === "not_authenticated") {
-      startAuthenticationFlow();
-    }
-  }, [authState]);
-
-  const startAuthenticationFlow = async () => {
-    try {
-      const response = await auth.requestAuthentication();
-      switch (response.status) {
-        case "COMPLETED":
-          setAuthState("authenticated");
-          break;
-        case "ABORTED":
-          // eslint-disable-next-line no-console
-          console.warn("Authentication aborted by user.");
-          setAuthState("cancelled");
-          break;
-        case "DENIED":
-          // eslint-disable-next-line no-console
-          console.warn("Authentication denied by user", response.details);
-          setAuthState("cancelled");
-          break;
-        default:
-          // eslint-disable-next-line no-console
-          console.log("Unknown auth state");
-          break;
-      }
-    } catch (e) {
-      // eslint-disable-next-line no-console
-      console.error(e);
-      setAuthState("error");
-    }
-  };
-
-  if (authState === "error") {
-    // eslint-disable-next-line no-console
-    console.warn(
-      "Warning: authentication not enabled on this app. Please enable auth with the instructions in README",
-    );
-    // Comment this next line out for production apps
-    setAuthState("authenticated");
-  }
-
-  // If user has denied or aborted auth flow
-  if (authState === "cancelled") {
-    return (
-      <Box paddingEnd="2u" height="full" className={styles.centerInPage}>
-        <Rows spacing="2u" align="center">
-          <Alert tone="critical">
-            Something went wrong while authenticating
-          </Alert>
-          <Button
-            variant="primary"
-            onClick={startAuthenticationFlow}
-            stretch={true}
-          >
-            Start authentication flow
-          </Button>
-        </Rows>
-      </Box>
-    );
-  }
-
-  return authState === "authenticated" ? (
+  return (
     <Box className={styles.rootWrapper}>
       <SearchableListView config={config} findResources={findResources} />
     </Box>
-  ) : (
-    <Box
-      width="full"
-      height="full"
-      paddingTop="1u"
-      className={styles.centerInPage}
-    >
-      <LoadingIndicator size="large" />
-    </Box>
   );
 }

package/templates/gen_ai/README.md

@@ -20,7 +20,7 @@ In this template, we've included a basic obscenity filter to stop users from cre
 
 ### Backend
 
-This template includes a simple Express server as a sample backend. Please note that this server is not production-ready, and we advise using it solely for instructional purposes to demonstrate API calls.
+This template includes a simple Express server as a sample backend. Please note that this server is not production-ready, and we advise using it solely for instructional purposes to demonstrate API calls. If you require authentication for your app, we recommend looking at the authentication example provided in the [starter kit](https://github.com/canva-sdks/canva-apps-sdk-starter-kit).
 
 ### Thumbnails
 

package/templates/gen_ai/backend/routers/image.ts

@@ -93,7 +93,7 @@ export const createImageRouter = () => {
 
   /**
    * GET endpoint to retrieve user credits.
-   * Requires authentication. Returns the current number of credits available to the user.
+   * Returns the current number of credits available to the user.
    */
   router.get(Routes.CREDITS, async (req, res) => {
     res.status(200).send({
@@ -103,7 +103,7 @@ export const createImageRouter = () => {
 
   /**
    * POST endpoint to purchase credits.
-   * Requires authentication. Increments the user's credits by the number of credits in a bundle.
+   * Increments the user's credits by the number of credits in a bundle.
    * This endpoint should be backed by proper input validation to prevent misuse.
    */
   router.post(Routes.PURCHASE_CREDITS, async (req, res) => {
@@ -115,7 +115,7 @@ export const createImageRouter = () => {
 
   /**
    * GET endpoint to generate images based on a prompt.
-   * Requires authentication. Generates images based on the provided prompt and adds a job to the processing queue.
+   * Generates images based on the provided prompt and adds a job to the processing queue.
    * If there are not enough credits, it returns a 403 error.
    * If the prompt parameter is missing, it returns a 400 error.
    * Once the job is added to the queue, it returns a jobId that can be used to check the job status.

package/templates/gen_ai/backend/server.ts

@@ -2,7 +2,6 @@ import * as express from "express";
 import * as cors from "cors";
 import { createBaseServer } from "../utils/backend/base_backend/create";
 import { createImageRouter } from "./routers/image";
-import { createAuthRouter } from "./routers/auth";
 
 async function main() {
   const router = express.Router();
@@ -37,12 +36,6 @@ async function main() {
    */
   router.use(cors());
 
-  /**
-   * Add routes for authorisation.
-   */
-  const authRouter = createAuthRouter();
-  router.use(authRouter);
-
   /**
    * Add routes for image generation.
    */

package/templates/gen_ai/eslint.config.mjs

@@ -20,8 +20,6 @@ export default [
       "**/dist",
       "**/*.d.ts",
       "**/*.d.tsx",
-      "**/sdk",
-      "**/internal",
       "**/*.config.*",
     ],
   },

package/templates/gen_ai/package.json

@@ -3,7 +3,7 @@
   "name": "gen_ai",
   "description": "An example app demonstrating common patterns that you might use in a generative AI app.",
   "scripts": {
-    "extract": "formatjs extract 'src/**/*.{ts,tsx}' --out-file dist/messages_en.json",
+    "extract": "formatjs extract src/**/*.{ts,tsx} --out-file dist/messages_en.json",
     "build": "webpack --config webpack.config.cjs --mode production && npm run extract",
     "format": "prettier '**/*.{css,ts,tsx}' --no-config --write",
     "format:check": "prettier '**/*.{css,ts,tsx}' --no-config --check --ignore-path",
@@ -16,57 +16,57 @@
     "test:watch": "jest --watchAll"
   },
   "dependencies": {
-    "@canva/app-i18n-kit": "^0.0.1-beta.5",
-    "@canva/app-ui-kit": "^3.8.0",
-    "@canva/asset": "^1.7.1",
-    "@canva/design": "^1.10.0",
-    "@canva/platform": "^1.1.0",
-    "@canva/user": "^1.0.0",
-    "cookie-parser": "1.4.6",
+    "@canva/app-i18n-kit": "^1.0.0",
+    "@canva/app-ui-kit": "^4.1.0",
+    "@canva/asset": "^2.0.0",
+    "@canva/design": "^2.1.0",
+    "@canva/platform": "^2.0.0",
+    "@canva/user": "^2.0.0",
+    "cookie-parser": "1.4.7",
     "cors": "2.8.5",
-    "html-react-parser": "5.1.12",
+    "html-react-parser": "5.1.18",
     "obscenity": "0.4.0",
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "react-error-boundary": "4.0.13",
     "react-intl": "6.6.8",
-    "react-router-dom": "6.26.1"
+    "react-router-dom": "6.27.0"
   },
   "devDependencies": {
     "@eslint/eslintrc": "3.1.0",
-    "@eslint/js": "9.9.0",
+    "@eslint/js": "9.12.0",
     "@formatjs/cli": "6.2.12",
     "@formatjs/ts-transformer": "3.13.14",
     "@ngrok/ngrok": "1.4.1",
     "@svgr/webpack": "8.1.0",
     "@types/debug": "4.1.12",
     "@types/express": "4.17.21",
-    "@types/express-serve-static-core": "4.19.5",
-    "@types/jest": "29.5.12",
-    "@types/jsonwebtoken": "9.0.6",
+    "@types/express-serve-static-core": "4.19.6",
+    "@types/jest": "29.5.13",
+    "@types/jsonwebtoken": "9.0.7",
     "@types/node": "20.10.0",
     "@types/node-fetch": "2.6.11",
     "@types/node-forge": "1.3.11",
     "@types/nodemon": "1.19.6",
     "@types/prompts": "2.4.9",
-    "@types/react": "18.3.4",
-    "@types/react-dom": "18.3.0",
+    "@types/react": "18.3.11",
+    "@types/react-dom": "18.3.1",
     "@types/webpack-env": "1.18.5",
-    "@typescript-eslint/eslint-plugin": "8.2.0",
-    "@typescript-eslint/parser": "8.2.0",
+    "@typescript-eslint/eslint-plugin": "8.9.0",
+    "@typescript-eslint/parser": "8.9.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.5",
-    "debug": "4.3.6",
+    "cssnano": "7.0.6",
+    "debug": "4.3.7",
     "dotenv": "16.4.5",
-    "eslint": "8.57.1",
-    "eslint-plugin-formatjs": "4.13.3",
-    "eslint-plugin-jest": "28.8.0",
-    "eslint-plugin-react": "7.35.0",
+    "eslint": "9.12.0",
+    "eslint-plugin-formatjs": "5.0.0",
+    "eslint-plugin-jest": "28.8.3",
+    "eslint-plugin-react": "7.37.1",
     "exponential-backoff": "3.1.1",
-    "express": "4.19.2",
+    "express": "4.21.1",
     "express-basic-auth": "1.2.1",
     "jest": "29.7.0",
     "jsonwebtoken": "9.0.2",
@@ -80,14 +80,14 @@
     "prompts": "2.4.2",
     "style-loader": "4.0.0",
     "terser-webpack-plugin": "5.3.10",
-    "ts-jest": "29.2.4",
+    "ts-jest": "29.2.5",
     "ts-loader": "9.5.1",
     "ts-node": "10.9.2",
     "typescript": "5.5.4",
     "url-loader": "4.1.1",
-    "webpack": "5.94.0",
+    "webpack": "5.95.0",
     "webpack-cli": "5.1.4",
-    "webpack-dev-server": "5.0.4",
+    "webpack-dev-server": "5.1.0",
     "yargs": "17.7.2"
   }
 }

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/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/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",
-  },
 });