@canva/cli 1.14.0 → 1.16.0

package/templates/content_publisher/src/intents/content_publisher/types.ts

@@ -0,0 +1,29 @@
+/**
+ * Type definition for publish settings.
+ * These settings are serialized and passed between different parts of the publish flow.
+ * In production, include all platform-specific settings needed for publishing.
+ */
+export interface PublishSettings {
+  caption: string;
+  // TODO: Add additional fields for your platform's publishing requirements
+  // Examples:
+  // scheduledTime: Date;
+  // visibility: "public" | "private" | "unlisted";
+  // tags: string[];
+}
+
+/**
+ * Utility function to safely parse publish settings from a JSON string.
+ * This is used to deserialize settings that were passed through the publish flow.
+ */
+export function parsePublishSettings(
+  publishRef?: string,
+): PublishSettings | undefined {
+  if (!publishRef) return undefined;
+
+  try {
+    return JSON.parse(publishRef) as PublishSettings;
+  } catch {
+    return undefined;
+  }
+}

package/templates/content_publisher/styles/components.css

@@ -0,0 +1,56 @@
+/* Scroll container */
+.scrollContainer {
+  box-sizing: border-box;
+  overflow-y: scroll;
+  height: 100%;
+  padding-top: var(--ui-kit-space-200);
+  padding-right: var(--ui-kit-space-200);
+  padding-bottom: var(--ui-kit-space-200);
+
+  /* for firefox */
+  scrollbar-width: thin;
+  scrollbar-color: var(--ui-kit-color-content-placeholder-fg) transparent;
+}
+
+.scrollContainer::-webkit-scrollbar {
+  position: absolute;
+  width: var(--ui-kit-base-unit);
+  height: 0;
+}
+
+.scrollContainer::-webkit-scrollbar-track {
+  background: transparent;
+  width: var(--ui-kit-base-unit);
+  margin-top: var(--ui-kit-space-100);
+  margin-bottom: var(--ui-kit-space-100);
+}
+
+.scrollContainer::-webkit-scrollbar-thumb {
+  border-radius: var(--ui-kit-radius-element-standard);
+  background: var(--ui-kit-color-content-placeholder-fg);
+  visibility: hidden;
+}
+
+.scrollContainer:hover::-webkit-scrollbar-thumb,
+.scrollContainer:focus::-webkit-scrollbar-thumb,
+.scrollContainer:focus-within::-webkit-scrollbar-thumb {
+  visibility: visible;
+}
+
+/* Main container for the content publisher preview UI */
+.previewContainer {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+}
+
+/* Wrapper for the content publisher post preview */
+.previewWrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: calc(400px + 32px + 2px); /* Image width + padding + border */
+}

package/templates/content_publisher/styles/preview_ui.css

@@ -0,0 +1,88 @@
+/* Main container for the preview UI */
+.container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+}
+
+/* Scale down preview on mobile devices */
+@media (max-width: 600px) {
+  .container {
+    transform: scale(0.3);
+  }
+}
+
+/* Wrapper for the social media post preview */
+.wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: calc(400px + 32px + 2px); /* Image width + padding + border */
+}
+
+/* User profile section styling */
+.user {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+/* Avatar styling to match social media appearance */
+.avatar {
+  transform: scale(0.6);
+  width: 24px;
+  height: 24px;
+  transform-origin: top left;
+}
+
+.avatarImage {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+/* Text placeholder for loading states */
+.textPlaceholder {
+  min-width: calc(8 * 20);
+}
+
+/* Container for media images */
+.imageContainer {
+  overflow: hidden; /* Enable border radius */
+}
+
+/* Row containing all images */
+.imageRow {
+  overflow-y: hidden;
+  overflow-x: auto;
+  height: 400px;
+  display: flex;
+}
+
+/* Aspect ratio helpers for different image formats */
+.aspect-1-1 {
+  padding-top: 100%;
+}
+
+.aspect-3-4 {
+  padding-top: 133.33%;
+}
+
+/* Individual image and placeholder styling */
+.imagePlaceholder,
+.image {
+  width: 400px;
+  height: 400px;
+  object-fit: cover;
+  display: inline-block;
+  position: relative;
+}
+
+/* Icon placeholder styling */
+.iconPlaceholder {
+  width: 24px;
+  height: 24px;
+}

package/templates/content_publisher/tsconfig.json

@@ -0,0 +1,56 @@
+{
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "es2018",
+      "es2019.array",
+      "es2019.object",
+      "es2019.string",
+      "es2020.promise",
+      "es2020.string"
+    ],
+    "types": ["node", "webpack-env", "jest"],
+    "composite": false,
+    "declaration": false,
+    "declarationMap": false,
+    "experimentalDecorators": true,
+    "importHelpers": true,
+    "noImplicitOverride": true,
+    "moduleResolution": "bundler",
+    "esModuleInterop": true,
+    "rootDir": ".",
+    "outDir": "dist",
+    "strict": true,
+    "skipLibCheck": true,
+    "target": "ES2019",
+    "sourceMap": true,
+    "inlineSources": true,
+    "module": "ESNext",
+    "noImplicitAny": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedIndexedAccess": true,
+    "removeComments": true,
+    "preserveConstEnums": true,
+    "allowSyntheticDefaultImports": true,
+    "baseUrl": "./",
+    "paths": {
+      "styles": ["./styles"]
+    }
+  },
+  "include": [
+    "./src/**/*",
+    "./backend/**/*",
+    "./utils/**/*",
+    "./scripts/**/*",
+    "./declarations/declarations.d.ts",
+    "./styles/**/*"
+  ],
+  "ts-node": {
+    "compilerOptions": {
+      "module": "commonjs"
+    }
+  }
+}

package/templates/content_publisher/webpack.config.ts

@@ -0,0 +1,247 @@
+import type { Configuration } from "webpack";
+import { DefinePlugin, optimize } from "webpack";
+import path from "path";
+import TerserPlugin from "terser-webpack-plugin";
+import { transform } from "@formatjs/ts-transformer";
+import chalk from "chalk";
+import { config } from "dotenv";
+import { Configuration as DevServerConfiguration } from "webpack-dev-server";
+
+config();
+
+type DevConfig = {
+  port: number;
+  enableHmr: boolean;
+  enableHttps: boolean;
+  appOrigin?: string;
+  appId?: string; // Deprecated in favour of appOrigin
+  certFile?: string;
+  keyFile?: string;
+};
+
+export function buildConfig({
+  devConfig,
+  appEntry = path.join(process.cwd(), "src", "index.tsx"),
+  backendHost = process.env.CANVA_BACKEND_HOST,
+  // For IN_HARNESS, refer to the following docs for more information: https://www.canva.dev/docs/apps/test-harness/
+  inHarness = process.env.IN_HARNESS?.toLowerCase() === "true",
+}: {
+  devConfig?: DevConfig;
+  appEntry?: string;
+  backendHost?: string;
+  inHarness?: boolean;
+} = {}): Configuration & DevServerConfiguration {
+  const mode = devConfig ? "development" : "production";
+
+  if (!backendHost) {
+    console.warn(
+      chalk.yellow.bold("BACKEND_HOST is undefined."),
+      `If your app requires a backend, refer to "Customizing the backend host" in the README.md for more information.`,
+    );
+  } else if (backendHost.includes("localhost") && mode === "production") {
+    console.error(
+      chalk.redBright.bold(
+        "BACKEND_HOST should not be set to localhost for production builds!",
+      ),
+      `Refer to "Customizing the backend host" in the README.md for more information.`,
+    );
+  }
+
+  return {
+    mode,
+    context: path.resolve(process.cwd(), "./"),
+    entry: inHarness
+      ? {
+          harness: path.join(process.cwd(), "harness", "harness.tsx"),
+          init: path.join(process.cwd(), "harness", "init.ts"),
+        }
+      : {
+          app: appEntry,
+        },
+    target: "web",
+    resolve: {
+      alias: {
+        styles: path.resolve(process.cwd(), "styles"),
+        src: path.resolve(process.cwd(), "src"),
+      },
+      extensions: [".ts", ".tsx", ".js", ".css", ".svg", ".woff", ".woff2"],
+    },
+    infrastructureLogging: {
+      level: inHarness ? "info" : "none",
+    },
+    module: {
+      rules: [
+        {
+          test: /\.tsx?$/,
+          exclude: /node_modules/,
+          use: [
+            {
+              loader: "ts-loader",
+              options: {
+                transpileOnly: true,
+                getCustomTransformers() {
+                  return {
+                    before: [
+                      transform({
+                        overrideIdFn: "[sha512:contenthash:base64:6]",
+                      }),
+                    ],
+                  };
+                },
+              },
+            },
+          ],
+        },
+        {
+          test: /\.css$/,
+          exclude: /node_modules/,
+          use: [
+            "style-loader",
+            {
+              loader: "css-loader",
+              options: {
+                modules: true,
+              },
+            },
+            {
+              loader: "postcss-loader",
+              options: {
+                postcssOptions: {
+                  plugins: [require("cssnano")({ preset: "default" })],
+                },
+              },
+            },
+          ],
+        },
+        {
+          test: /\.(png|jpg|jpeg)$/i,
+          type: "asset/inline",
+        },
+        {
+          test: /\.(woff|woff2)$/,
+          type: "asset/inline",
+        },
+        {
+          test: /\.svg$/,
+          oneOf: [
+            {
+              issuer: /\.[jt]sx?$/,
+              resourceQuery: /react/, // *.svg?react
+              use: ["@svgr/webpack", "url-loader"],
+            },
+            {
+              type: "asset/resource",
+              parser: {
+                dataUrlCondition: {
+                  maxSize: 200,
+                },
+              },
+            },
+          ],
+        },
+        {
+          test: /\.css$/,
+          include: /node_modules/,
+          use: [
+            "style-loader",
+            "css-loader",
+            {
+              loader: "postcss-loader",
+              options: {
+                postcssOptions: {
+                  plugins: [require("cssnano")({ preset: "default" })],
+                },
+              },
+            },
+          ],
+        },
+      ],
+    },
+    optimization: {
+      minimizer: [
+        new TerserPlugin({
+          terserOptions: {
+            format: {
+              // Turned on because emoji and regex is not minified properly using default
+              // https://github.com/facebook/create-react-app/issues/2488
+              ascii_only: true,
+            },
+          },
+        }),
+      ],
+    },
+    output: {
+      filename: `[name].js`,
+      path: path.resolve(process.cwd(), "dist"),
+      clean: true,
+    },
+    plugins: [
+      new DefinePlugin({
+        BACKEND_HOST: JSON.stringify(backendHost),
+      }),
+      // Apps can only submit a single JS file via the Developer Portal
+      new optimize.LimitChunkCountPlugin({ maxChunks: 1 }),
+    ].filter(Boolean),
+    ...buildDevConfig(devConfig),
+  };
+}
+
+function buildDevConfig(options?: DevConfig): {
+  devtool?: string;
+  devServer?: DevServerConfiguration;
+} {
+  if (!options) {
+    return {};
+  }
+
+  const { port, enableHmr, appOrigin, enableHttps, certFile, keyFile } =
+    options;
+  const host = "localhost";
+
+  let devServer: DevServerConfiguration = {
+    server: enableHttps
+      ? {
+          type: "https",
+          options: {
+            cert: certFile,
+            key: keyFile,
+          },
+        }
+      : "http",
+    host,
+    allowedHosts: [host],
+    historyApiFallback: {
+      rewrites: [{ from: /^\/$/, to: "/app.js" }],
+    },
+    port,
+    client: {
+      logging: "verbose",
+    },
+  };
+
+  if (enableHmr && appOrigin) {
+    devServer = {
+      ...devServer,
+      allowedHosts: [host, new URL(appOrigin).hostname],
+      headers: {
+        "Access-Control-Allow-Origin": appOrigin,
+        "Access-Control-Allow-Credentials": "true",
+        "Access-Control-Allow-Private-Network": "true",
+      },
+    };
+  } else {
+    if (enableHmr && !appOrigin) {
+      console.warn(
+        "Attempted to enable Hot Module Replacement (HMR) without configuring App Origin... Disabling HMR.",
+      );
+    }
+    devServer.webSocketServer = false;
+  }
+
+  return {
+    devtool: "source-map",
+    devServer,
+  };
+}
+
+export default buildConfig;

package/templates/dam/backend/server.ts

@@ -1,7 +1,7 @@
+import { user } from "@canva/app-middleware/express";
 import cors from "cors";
 import express from "express";
 import { createBaseServer } from "../utils/backend/base_backend/create";
-import { createJwtMiddleware } from "../utils/backend/jwt_middleware";
 import { createDamRouter } from "./routers/dam";
 
 async function main() {
@@ -50,8 +50,7 @@ async function main() {
    * Initialize JWT middleware to verify Canva user tokens
    * This middleware validates tokens sent from the frontend and extracts user information
    */
-  const jwtMiddleware = createJwtMiddleware(APP_ID);
-  router.use(jwtMiddleware);
+  router.use(user.verifyToken({ appId: APP_ID }));
 
   /**
    * Add routes for digital asset management.

package/templates/dam/package.json

@@ -18,15 +18,16 @@
     "postinstall": "ts-node ./scripts/copy_env.ts"
   },
   "dependencies": {
-    "@canva/app-hooks": "^0.0.0-beta.4",
     "@canva/app-components": "^2.1.0",
+    "@canva/app-hooks": "^0.0.0-beta.4",
     "@canva/app-i18n-kit": "^1.2.0",
-    "@canva/app-ui-kit": "^5.4.0",
+    "@canva/app-middleware": "^0.0.0-beta.5",
+    "@canva/app-ui-kit": "^5.5.0",
     "@canva/asset": "^2.3.0",
     "@canva/design": "^2.7.5",
-    "@canva/error": "^2.1.0",
+    "@canva/error": "^2.2.0",
     "@canva/intents": "^2.0.0",
-    "@canva/platform": "^2.2.0",
+    "@canva/platform": "^2.2.1",
     "@canva/user": "^2.1.2",
     "cookie-parser": "1.4.7",
     "cors": "2.8.5",

package/templates/dam/utils/backend/base_backend/create.ts

@@ -1,4 +1,5 @@
 /* eslint-disable no-console */
+import { TokenVerificationError } from "@canva/app-middleware";
 import debug from "debug";
 import express from "express";
 import type { NextFunction, Request, Response } from "express";
@@ -63,6 +64,15 @@ export function createBaseServer(router: express.Router): BaseServer {
 
   // default error handler
   app.use((err: Error, _req: Request, res: Response, _next: NextFunction) => {
+    // Handle authentication errors from @canva/app-middleware
+    if (err instanceof TokenVerificationError) {
+      res.status(err.statusCode).json({
+        error: err.code,
+        message: err.message,
+      });
+      return;
+    }
+
     console.error(err.stack);
     res.status(500).send({
       error: "something went wrong",

package/templates/data_connector/package.json

@@ -21,12 +21,12 @@
   "dependencies": {
     "@canva/app-hooks": "^0.0.0-beta.4",
     "@canva/app-i18n-kit": "^1.2.0",
-    "@canva/app-ui-kit": "^5.4.0",
+    "@canva/app-ui-kit": "^5.5.0",
     "@canva/asset": "^2.3.0",
     "@canva/design": "^2.7.5",
-    "@canva/error": "^2.1.0",
+    "@canva/error": "^2.2.0",
     "@canva/intents": "^2.0.0",
-    "@canva/platform": "^2.2.0",
+    "@canva/platform": "^2.2.1",
     "@canva/user": "^2.1.2",
     "react": "^19.2.3",
     "react-dom": "^19.2.3",

package/templates/gen_ai/backend/server.ts

@@ -1,7 +1,7 @@
+import { user } from "@canva/app-middleware/express";
 import cors from "cors";
 import express from "express";
 import { createBaseServer } from "../utils/backend/base_backend/create";
-import { createJwtMiddleware } from "../utils/backend/jwt_middleware/index";
 import { createImageRouter } from "./routers/image";
 
 async function main() {
@@ -50,8 +50,7 @@ async function main() {
    * Initialize JWT middleware to verify Canva user tokens
    * This middleware validates tokens sent from the frontend and extracts user information
    */
-  const jwtMiddleware = createJwtMiddleware(APP_ID);
-  router.use(jwtMiddleware);
+  router.use(user.verifyToken({ appId: APP_ID }));
 
   /**
    * Add routes for image generation.

package/templates/gen_ai/package.json

@@ -20,12 +20,13 @@
   "dependencies": {
     "@canva/app-hooks": "^0.0.0-beta.4",
     "@canva/app-i18n-kit": "^1.2.0",
-    "@canva/app-ui-kit": "^5.4.0",
+    "@canva/app-middleware": "^0.0.0-beta.5",
+    "@canva/app-ui-kit": "^5.5.0",
     "@canva/asset": "^2.3.0",
     "@canva/design": "^2.7.5",
-    "@canva/error": "^2.1.0",
+    "@canva/error": "^2.2.0",
     "@canva/intents": "^2.0.0",
-    "@canva/platform": "^2.2.0",
+    "@canva/platform": "^2.2.1",
     "@canva/user": "^2.1.2",
     "cookie-parser": "1.4.7",
     "cors": "2.8.5",

package/templates/gen_ai/utils/backend/base_backend/create.ts

@@ -1,4 +1,5 @@
 /* eslint-disable no-console */
+import { TokenVerificationError } from "@canva/app-middleware";
 import debug from "debug";
 import express from "express";
 import type { NextFunction, Request, Response } from "express";
@@ -63,6 +64,15 @@ export function createBaseServer(router: express.Router): BaseServer {
 
   // default error handler
   app.use((err: Error, _req: Request, res: Response, _next: NextFunction) => {
+    // Handle authentication errors from @canva/app-middleware
+    if (err instanceof TokenVerificationError) {
+      res.status(err.statusCode).json({
+        error: err.code,
+        message: err.message,
+      });
+      return;
+    }
+
     console.error(err.stack);
     res.status(500).send({
       error: "something went wrong",

package/templates/hello_world/package.json

@@ -21,12 +21,12 @@
   "dependencies": {
     "@canva/app-hooks": "^0.0.0-beta.4",
     "@canva/app-i18n-kit": "^1.2.0",
-    "@canva/app-ui-kit": "^5.4.0",
+    "@canva/app-ui-kit": "^5.5.0",
     "@canva/asset": "^2.3.0",
     "@canva/design": "^2.7.5",
-    "@canva/error": "^2.1.0",
+    "@canva/error": "^2.2.0",
     "@canva/intents": "^2.0.0",
-    "@canva/platform": "^2.2.0",
+    "@canva/platform": "^2.2.1",
     "@canva/user": "^2.1.2",
     "react": "^19.2.3",
     "react-dom": "^19.2.3",

package/templates/mls/package.json

@@ -23,12 +23,12 @@
   "dependencies": {
     "@canva/app-hooks": "^0.0.0-beta.4",
     "@canva/app-i18n-kit": "^1.2.0",
-    "@canva/app-ui-kit": "^5.4.0",
+    "@canva/app-ui-kit": "^5.5.0",
     "@canva/asset": "^2.3.0",
     "@canva/design": "^2.7.5",
-    "@canva/error": "^2.1.0",
+    "@canva/error": "^2.2.0",
     "@canva/intents": "^2.0.0",
-    "@canva/platform": "^2.2.0",
+    "@canva/platform": "^2.2.1",
     "@canva/user": "^2.1.2",
     "@tanstack/react-query": "5.87.1",
     "@types/react-infinite-scroller": "1.2.5",

package/templates/base/backend/jwt_middleware/index.ts

@@ -1 +0,0 @@
-export { createJwtMiddleware } from "./jwt_middleware";