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

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);
@@ -22,8 +20,6 @@ export default [
       "**/dist",
       "**/*.d.ts",
       "**/*.d.tsx",
-      "**/sdk",
-      "**/internal",
       "**/*.config.*",
     ],
   },
@@ -34,276 +30,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

@@ -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",
@@ -13,80 +13,88 @@
     "lint:types": "tsc",
     "start": "ts-node ./scripts/start/start.ts",
     "test": "jest --no-cache",
-    "test:watch": "jest --watchAll"
+    "test:watch": "jest --watchAll",
+    "postinstall": "ts-node ./scripts/copy-env.ts"
   },
   "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.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",
+    "cookie-parser": "1.4.7",
     "cors": "2.8.5",
-    "html-react-parser": "5.1.12",
-    "obscenity": "0.4.0",
+    "html-react-parser": "5.2.0",
+    "obscenity": "0.4.1",
     "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-error-boundary": "4.1.2",
+    "react-intl": "6.8.7",
+    "react-router-dom": "6.28.0"
   },
   "devDependencies": {
-    "@eslint/eslintrc": "3.1.0",
-    "@eslint/js": "9.9.0",
-    "@formatjs/cli": "6.2.12",
-    "@formatjs/ts-transformer": "3.13.14",
+    "@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/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.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/prompts": "2.4.9",
-    "@types/react": "18.3.4",
-    "@types/react-dom": "18.3.0",
+    "@types/react": "18.3.12",
+    "@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.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.5",
-    "debug": "4.3.6",
-    "dotenv": "16.4.5",
-    "eslint": "9.9.0",
-    "eslint-plugin-jest": "28.8.0",
-    "eslint-plugin-react": "7.35.0",
+    "cssnano": "7.0.6",
+    "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",
     "exponential-backoff": "3.1.1",
-    "express": "4.19.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.1",
+    "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",
     "prompts": "2.4.2",
+    "react-refresh": "0.16.0",
     "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.97.1",
     "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/scripts/copy-env.ts

@@ -0,0 +1,10 @@
+#!/usr/bin/env node
+import * as fs from "fs";
+import * as path from "path";
+
+const envPath = path.resolve(__dirname, "..", ".env");
+const templatePath = path.resolve(__dirname, "..", ".env.template");
+
+if (!fs.existsSync(envPath)) {
+  fs.copyFileSync(templatePath, envPath);
+}

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