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

package/templates/dam/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,9 @@ 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,
+  // This template is not yet translated, enable these rules when it is
+  // ...i18n,
 ];

package/templates/dam/package.json

@@ -3,7 +3,7 @@
   "name": "digital_asset_management",
   "description": "An example app leveraging @canva/app-components to develop a digital asset management (DAM) 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,78 +13,86 @@
     "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-components": "^1.0.0-beta.22",
-    "@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-components": "^1.0.0-beta.29",
+    "@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",
     "react": "18.3.1",
     "react-dom": "18.3.1",
-    "react-intl": "6.6.8"
+    "react-intl": "6.8.7"
   },
   "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/cors": "2.8.17",
     "@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/dam/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/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/dam/webpack.config.cjs

@@ -4,6 +4,7 @@ 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");
 
 /**
  *
@@ -173,7 +174,8 @@ function buildConfig({
       }),
       // 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),
   };
 }

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.
    */