@canva/cli 0.0.1-beta.1 → 0.0.1-beta.3

package/templates/gen_ai/eslint.config.mjs

@@ -1,11 +1,9 @@
-import typescriptEslint from "@typescript-eslint/eslint-plugin";
-import jest from "eslint-plugin-jest";
-import react from "eslint-plugin-react";
-import globals from "globals";
 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);
@@ -34,276 +32,8 @@ export default [
     "plugin:@typescript-eslint/strict",
     "plugin:@typescript-eslint/stylistic",
     "plugin:react/recommended",
-    "plugin:jest/recommended"
+    "plugin:jest/recommended",
   ),
-  {
-    plugins: {
-      "@typescript-eslint": typescriptEslint,
-      jest,
-      react,
-    },
-    languageOptions: {
-      globals: {
-        ...globals.serviceworker,
-        ...globals.browser,
-      },
-    },
-    settings: {
-      react: {
-        version: "detect",
-      },
-    },
-    rules: {
-      "@typescript-eslint/no-non-null-assertion": "warn",
-      "@typescript-eslint/no-empty-function": "off",
-      "@typescript-eslint/consistent-type-imports": "error",
-      "@typescript-eslint/no-explicit-any": "warn",
-      "@typescript-eslint/no-empty-interface": "warn",
-      "@typescript-eslint/consistent-type-definitions": "off",
-      "@typescript-eslint/explicit-member-accessibility": [
-        "error",
-        {
-          accessibility: "no-public",
-          overrides: {
-            parameterProperties: "off",
-          },
-        },
-      ],
-      "@typescript-eslint/naming-convention": [
-        "error",
-        {
-          selector: "typeLike",
-          format: ["PascalCase"],
-          leadingUnderscore: "allow",
-        },
-      ],
-      "no-invalid-this": "off",
-      "@typescript-eslint/no-invalid-this": "error",
-      "@typescript-eslint/no-unused-expressions": [
-        "error",
-        {
-          allowShortCircuit: true,
-          allowTernary: true,
-        },
-      ],
-      "no-unused-vars": "off",
-      "@typescript-eslint/no-unused-vars": [
-        "error",
-        {
-          vars: "all",
-          varsIgnorePattern: "^_",
-          args: "none",
-          ignoreRestSiblings: true,
-        },
-      ],
-      "@typescript-eslint/no-require-imports": "error",
-      "jest/no-restricted-matchers": [
-        "error",
-        {
-          toContainElement:
-            "toContainElement is not recommended as it encourages testing the internals of the components",
-          toContainHTML:
-            "toContainHTML is not recommended as it encourages testing the internals of the components",
-          toHaveAttribute:
-            "toHaveAttribute is not recommended as it encourages testing the internals of the components",
-          toHaveClass:
-            "toHaveClass is not recommended as it encourages testing the internals of the components",
-          toHaveStyle:
-            "toHaveStyle is not recommended as it encourages testing the internals of the components",
-        },
-      ],
-      "react/jsx-curly-brace-presence": [
-        "error",
-        {
-          props: "never",
-          children: "never",
-        },
-      ],
-      "react/jsx-tag-spacing": [
-        "error",
-        {
-          closingSlash: "never",
-          beforeSelfClosing: "allow",
-          afterOpening: "never",
-          beforeClosing: "allow",
-        },
-      ],
-      "react/self-closing-comp": "error",
-      "react/no-unescaped-entities": "off",
-      "react/jsx-uses-react": "off",
-      "react/react-in-jsx-scope": "off",
-      "default-case": "error",
-      eqeqeq: [
-        "error",
-        "always",
-        {
-          null: "never",
-        },
-      ],
-      "no-caller": "error",
-      "no-console": "error",
-      "no-eval": "error",
-      "no-inner-declarations": "error",
-      "no-new-wrappers": "error",
-      "no-restricted-globals": [
-        "error",
-        {
-          name: "fit",
-          message: "Don't focus tests",
-        },
-        {
-          name: "fdescribe",
-          message: "Don't focus tests",
-        },
-        {
-          name: "length",
-          message:
-            "Undefined length - Did you mean to use window.length instead?",
-        },
-        {
-          name: "name",
-          message: "Undefined name - Did you mean to use window.name instead?",
-        },
-        {
-          name: "status",
-          message:
-            "Undefined status - Did you mean to use window.status instead?",
-        },
-        {
-          name: "spyOn",
-          message: "Don't use spyOn directly, use jest.spyOn",
-        },
-      ],
-      "no-restricted-properties": [
-        "error",
-        {
-          property: "bind",
-          message: "Don't o.f.bind(o, ...), use () => o.f(...)",
-        },
-        {
-          object: "ReactDOM",
-          property: "findDOMNode",
-          message: "Don't use ReactDOM.findDOMNode() as it is deprecated",
-        },
-      ],
-      "no-restricted-syntax": [
-        "error",
-        {
-          selector: "AccessorProperty, TSAbstractAccessorProperty",
-          message:
-            "Accessor property syntax is not allowed, use getter and setters.",
-        },
-        {
-          selector: "PrivateIdentifier",
-          message:
-            "Private identifiers are not allowed, use TypeScript private fields.",
-        },
-        {
-          selector:
-            "JSXOpeningElement[name.name = /^[A-Z]/] > JSXAttribute[name.name = /-/]",
-          message:
-            "Passing hyphenated props to custom components is not type-safe. Prefer a camelCased equivalent if available. (See https://github.com/microsoft/TypeScript/issues/55182)",
-        },
-        {
-          selector:
-            "CallExpression[callee.object.name='window'][callee.property.name='open']",
-          message:
-            "Apps are currently not allowed to open popups, or new tabs via browser APIs. Please use `requestOpenExternalUrl` from `@canva/platform` to link to external URLs. To learn more, see https://www.canva.dev/docs/apps/api/platform-request-open-external-url/",
-        },
-      ],
-      "no-return-await": "error",
-      "no-throw-literal": "error",
-      "no-undef-init": "error",
-      "no-var": "error",
-      "object-shorthand": "error",
-      "prefer-const": [
-        "error",
-        {
-          destructuring: "all",
-        },
-      ],
-      "prefer-object-spread": "error",
-      "prefer-rest-params": "error",
-      "prefer-spread": "error",
-      radix: "error",
-    },
-  },
-  {
-    files: ["**/*.tsx"],
-    rules: {
-      "react/no-deprecated": "error",
-      "react/forbid-elements": [
-        "error",
-        {
-          forbid: [
-            {
-              element: "video",
-              message:
-                "Don't use HTML video directly. Instead, use the App UI Kit <VideoCard /> as this respects users' auto-playing preferences",
-            },
-            {
-              element: "em",
-              message:
-                "Don't use <em> to italicize text. Canva's UI fonts don't support italic font style.",
-            },
-            {
-              element: "i",
-              message:
-                "Don't use <i> to italicize text. Canva's UI fonts don't support italic font style.",
-            },
-            {
-              element: "iframe",
-              message:
-                "Canva Apps aren't allowed to contain iframes. You should either recreate the UI you want to show in the iframe in the app directly, or link to your page via a `<Link>` tag.  For more info see https://www.canva.dev/docs/apps/content-security-policy/#what-is-and-isnt-allowed",
-            },
-            {
-              element: "script",
-              message:
-                "Script tags are not allowed in Canva SDK Apps. You should import JavaScript modules instead. For more info see https://www.canva.dev/docs/apps/content-security-policy/#what-is-and-isnt-allowed",
-            },
-            {
-              element: "a",
-              message:
-                "Don't use <a> tags. Instead, use the <Link> component from the App UI Kit, and remember to open the url via the requestOpenExternalUrl method from @canva/platform.",
-            },
-            {
-              element: "img",
-              message:
-                "Have you considered using <ImageCard /> from the App UI Kit instead?",
-            },
-            {
-              element: "embed",
-              message:
-                "Have you considered using <EmbedCard /> from the App UI Kit instead?",
-            },
-            {
-              element: "audio",
-              message:
-                "Have you considered using <AudioCard /> from the App UI Kit instead?",
-            },
-            {
-              element: "button",
-              message:
-                "Rather than using the native HTML <button> element, use the <Button> component from the App UI Kit for consistency and accessibility.",
-            },
-            {
-              element: "input",
-              message:
-                "Wherever possible, prefer using the form inputs from the App UI Kit for consistency and accessibility (TextInput, Checkbox, FileInput, etc).",
-            },
-            {
-              element: "base",
-              message:
-                "The <base> tag is not supported in Canva Apps. We recommend using hash-based routing. For more on what is and isn't allowed in Canva Apps see https://www.canva.dev/docs/apps/content-security-policy/#what-is-and-isnt-allowed",
-            },
-            {
-              element: "link",
-              message:
-                "If you're trying to include a css stylesheet, we recommend importing css using React, or using embedded stylesheets. For more on what is and isn't allowed in Canva Apps see https://www.canva.dev/docs/apps/content-security-policy/#what-is-and-isnt-allowed",
-            },
-          ],
-        },
-      ],
-    },
-  },
+  ...general,
+  ...i18n,
 ];

package/templates/gen_ai/package.json

@@ -17,11 +17,11 @@
   },
   "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",
+    "@canva/app-ui-kit": "^4.0.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.6",
     "cors": "2.8.5",
     "html-react-parser": "5.1.12",
@@ -61,7 +61,8 @@
     "cssnano": "7.0.5",
     "debug": "4.3.6",
     "dotenv": "16.4.5",
-    "eslint": "9.9.0",
+    "eslint": "8.57.1",
+    "eslint-plugin-formatjs": "4.13.3",
     "eslint-plugin-jest": "28.8.0",
     "eslint-plugin-react": "7.35.0",
     "exponential-backoff": "3.1.1",

package/templates/gen_ai/src/api/api.ts

@@ -1,4 +1,4 @@
-import { auth } from "@canva/user";
+import type { Oauth } from "@canva/user";
 import { POLLING_INTERVAL_IN_SECONDS } from "src/config";
 
 /**
@@ -66,18 +66,21 @@ const endpoints = {
  * @param {number} options.numberOfImages - The number of images to generate.
  * @returns {Promise<QueueImageGenerationResponse>} A promise that resolves to the created job ID.
  */
-export const queueImageGeneration = async ({
-  prompt,
-  numberOfImages,
-}: {
-  prompt: string;
-  numberOfImages: number;
-}): Promise<QueueImageGenerationResponse> => {
+export const queueImageGeneration = async (
+  {
+    prompt,
+    numberOfImages,
+  }: {
+    prompt: string;
+    numberOfImages: number;
+  },
+  oauth: Oauth,
+): Promise<QueueImageGenerationResponse> => {
   const url = new URL(endpoints.queueImageGeneration, BACKEND_HOST);
   url.searchParams.append("count", numberOfImages.toString());
   url.searchParams.append("prompt", prompt);
 
-  const result: QueueImageGenerationResponse = await sendRequest(url);
+  const result: QueueImageGenerationResponse = await sendRequest(url, oauth);
 
   return result;
 };
@@ -87,11 +90,14 @@ export const queueImageGeneration = async ({
  * @param {string} jobId - The ID of the job to retrieve status for.
  * @returns {Promise<ImageGenerationResult>} A promise that resolves to the image generation result.
  */
-export const getImageGenerationJobStatus = async ({
-  jobId,
-}: {
-  jobId: string;
-}): Promise<ImageGenerationResult> => {
+export const getImageGenerationJobStatus = async (
+  {
+    jobId,
+  }: {
+    jobId: string;
+  },
+  oauth: Oauth,
+): Promise<ImageGenerationResult> => {
   const url = new URL(endpoints.getImageGenerationJobStatus, BACKEND_HOST);
   url.searchParams.append("jobId", jobId);
 
@@ -103,6 +109,7 @@ export const getImageGenerationJobStatus = async ({
     try {
       const response = (await sendRequest(
         url,
+        oauth,
       )) as ImageGenerationJobStatusResponse;
       if (response.status === "completed") {
         return { images: response.images, credits: response.credits };
@@ -131,12 +138,13 @@ export const getImageGenerationJobStatus = async ({
  */
 export const cancelImageGenerationJob = async (
   jobId: string,
+  oauth: Oauth,
 ): Promise<void> => {
   const url = new URL(endpoints.cancelImageGenerationJob, BACKEND_HOST);
   url.searchParams.append("jobId", jobId);
 
   try {
-    await sendRequest(url, {
+    await sendRequest(url, oauth, {
       method: "POST",
     });
   } catch {
@@ -148,23 +156,26 @@ export const cancelImageGenerationJob = async (
  * Retrieves the remaining credits.
  * @returns {Promise<RemainingCreditsResult>} - A promise that resolves to the remaining credits.
  */
-export const getRemainingCredits =
-  async (): Promise<RemainingCreditsResult> => {
-    const url = new URL(endpoints.getRemainingCredits, BACKEND_HOST);
+export const getRemainingCredits = async (
+  oauth: Oauth,
+): Promise<RemainingCreditsResult> => {
+  const url = new URL(endpoints.getRemainingCredits, BACKEND_HOST);
 
-    const result: RemainingCreditsResult = await sendRequest(url);
+  const result: RemainingCreditsResult = await sendRequest(url, oauth);
 
-    return result;
-  };
+  return result;
+};
 
 /**
  * Purchases credits for the user.
  * @returns {Promise<RemainingCreditsResult>} - A promise that resolves to the remaining credits after purchasing.
  */
-export const purchaseCredits = async (): Promise<RemainingCreditsResult> => {
+export const purchaseCredits = async (
+  oauth: Oauth,
+): Promise<RemainingCreditsResult> => {
   const url = new URL(endpoints.purchaseCredits, BACKEND_HOST);
 
-  const result: RemainingCreditsResult = await sendRequest(url, {
+  const result: RemainingCreditsResult = await sendRequest(url, oauth, {
     method: "POST",
   });
 
@@ -177,10 +188,12 @@ export const purchaseCredits = async (): Promise<RemainingCreditsResult> => {
  *
  * Note: You must register the provided endpoint via the Developer Portal.
  */
-export const checkAuthenticationStatus = async (): Promise<LoggedInState> => {
+export const checkAuthenticationStatus = async (
+  oauth: Oauth,
+): Promise<LoggedInState> => {
   try {
     const url = new URL(endpoints.getLoggedInStatus, BACKEND_HOST);
-    const result: { isAuthenticated: string } = await sendRequest(url, {
+    const result: { isAuthenticated: string } = await sendRequest(url, oauth, {
       method: "POST",
     });
 
@@ -202,8 +215,12 @@ export const checkAuthenticationStatus = async (): Promise<LoggedInState> => {
  * @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 sendRequest = async <T>(
+  url: URL,
+  oauth: Oauth,
+  options?: RequestInit,
+): Promise<T> => {
+  const token = (await oauth.getAccessToken())?.token;
   const res = await fetch(url, {
     headers: {
       ...options?.headers,

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

@@ -27,6 +27,7 @@ export const Footer = () => {
     setIsLoadingImages,
     remainingCredits,
     setRemainingCredits,
+    oauth,
   } = useAppContext();
   const intl = useIntl();
 
@@ -74,10 +75,13 @@ export const Footer = () => {
 
     setIsLoadingImages(true);
     try {
-      const { jobId } = await queueImageGeneration({
-        prompt: promptInput,
-        numberOfImages: NUMBER_OF_IMAGES_TO_GENERATE,
-      });
+      const { jobId } = await queueImageGeneration(
+        {
+          prompt: promptInput,
+          numberOfImages: NUMBER_OF_IMAGES_TO_GENERATE,
+        },
+        oauth,
+      );
 
       setJobId(jobId);
     } catch {
@@ -91,7 +95,7 @@ export const Footer = () => {
   };
 
   const onPurchaseMoreCredits = async () => {
-    const { credits } = await purchaseCredits();
+    const { credits } = await purchaseCredits(oauth);
 
     setRemainingCredits(credits);
   };

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

@@ -1,23 +1,24 @@
 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";
-import { FormattedMessage } from "react-intl";
+import { FormattedMessage, useIntl } from "react-intl";
 
 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/loading_results.tsx

@@ -70,6 +70,7 @@ export const LoadingResults = ({
     promptInput,
     setGeneratedImages,
     setRemainingCredits,
+    oauth,
   } = useAppContext();
 
   useEffect(() => {
@@ -82,9 +83,12 @@ export const LoadingResults = ({
     const pollJobStatus = async () => {
       if (jobId) {
         try {
-          const { images, credits } = await getImageGenerationJobStatus({
-            jobId,
-          });
+          const { images, credits } = await getImageGenerationJobStatus(
+            {
+              jobId,
+            },
+            oauth,
+          );
           setGeneratedImages(images);
           setRemainingCredits(credits);
           // Clear the jobId after fetching images
@@ -117,7 +121,7 @@ export const LoadingResults = ({
   ]);
 
   const onCancelClick = async () => {
-    await cancelImageGenerationJob(jobId);
+    await cancelImageGenerationJob(jobId, oauth);
     setIsLoadingImages(false);
     navigate(Paths.HOME);
   };

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

@@ -19,6 +19,8 @@ const MIN_INPUT_ROWS = 3;
 /**
  * Array of example prompts that could be used to generate interesting pictures with an AI.
  * Consider fetching these prompts from a server or API call for dynamic and varied content.
+ * These would need to be localised, but that is left out here as the method would depend on
+ * the specific implementation or API used.
  */
 const examplePrompts: string[] = [
   "Cats ruling a parallel universe",

package/templates/gen_ai/src/context/app_context.tsx

@@ -3,6 +3,8 @@ import { useIntl } from "react-intl";
 import type { ImageType, LoggedInState } from "src/api";
 import { checkAuthenticationStatus, getRemainingCredits } from "src/api";
 import { ContextMessages as Messages } from "./context.messages";
+import type { Oauth } from "@canva/user";
+import { auth } from "@canva/user";
 
 export interface AppContextType {
   loggedInState: LoggedInState;
@@ -25,6 +27,7 @@ export interface AppContextType {
   setPromptInputError: (value: string) => void;
   generatedImages: ImageType[];
   setGeneratedImages: (value: ImageType[]) => void;
+  oauth: Oauth;
 }
 
 export const AppContext = createContext<AppContextType>({
@@ -48,6 +51,7 @@ export const AppContext = createContext<AppContextType>({
   setPromptInputError: () => {},
   generatedImages: [] as ImageType[],
   setGeneratedImages: () => {},
+  oauth: {} as Oauth,
 });
 
 /**
@@ -77,6 +81,7 @@ export const ContextProvider = ({
   const [generatedImages, setGeneratedImages] = useState<ImageType[]>([]);
   const [creditsError, setCreditsError] = useState<string>("");
   const intl = useIntl();
+  const oauth = auth.initOauth();
 
   // Fetches initial data on component mount
   useEffect(() => {
@@ -86,7 +91,7 @@ export const ContextProvider = ({
 
         // Fetch remaining credits
         try {
-          const { credits } = await getRemainingCredits();
+          const { credits } = await getRemainingCredits(oauth);
           setRemainingCredits(credits);
         } catch (error) {
           setAppError(
@@ -98,7 +103,7 @@ export const ContextProvider = ({
 
         // Fetch login status
         try {
-          checkAuthenticationStatus();
+          checkAuthenticationStatus(oauth);
         } catch (error) {
           setAppError(
             intl.formatMessage(Messages.appErrorGetLoggedInStatusFailed),
@@ -168,6 +173,7 @@ export const ContextProvider = ({
     setPromptInputError,
     generatedImages,
     setGeneratedImages,
+    oauth,
   };
 
   return <AppContext.Provider value={value}>{children}</AppContext.Provider>;

package/templates/gen_ai/src/services/auth.tsx

@@ -1,25 +1,20 @@
-import { auth } from "@canva/user";
 import { useAppContext } from "src/context";
 
 export const useAuth = () => {
-  const { setLoggedInState } = useAppContext();
+  const { setLoggedInState, oauth } = useAppContext();
 
   const requestAuthentication = async () => {
     try {
-      const response = await auth.requestAuthentication();
+      const response = await oauth.requestAuthorization();
       switch (response.status) {
-        case "COMPLETED":
-          setLoggedInState("authenticated");
-          break;
-        case "ABORTED":
+        case "aborted":
           setLoggedInState("not_authenticated");
           break;
-        case "DENIED":
-          setLoggedInState("not_authenticated");
+        case "completed":
+          setLoggedInState("authenticated");
           break;
         default:
           setLoggedInState("not_authenticated");
-          break;
       }
     } catch (e) {
       // eslint-disable-next-line no-console