@canva/cli 1.9.0 → 1.11.0

package/templates/common/utils/backend/jwt_middleware/jwt_middleware.ts

@@ -1,8 +1,6 @@
 /* eslint-disable no-console */
 import debug from "debug";
 import type { NextFunction, Request, Response } from "express";
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-import Express from "express-serve-static-core";
 import jwt from "jsonwebtoken";
 import { JwksClient, SigningKeyNotFoundError } from "jwks-rsa";
 
@@ -115,7 +113,7 @@ export function createJwtMiddleware(
         userId: payload.userId,
       };
 
-      next();
+      return next();
     } catch (e) {
       if (e instanceof JWTAuthorizationError) {
         return sendUnauthorizedResponse(res, e.message);
@@ -136,7 +134,7 @@ export function createJwtMiddleware(
         return sendUnauthorizedResponse(res, "Token expired");
       }
 
-      next(e);
+      return next(e);
     }
   };
 }

package/templates/dam/backend/routers/dam.ts

@@ -3,8 +3,8 @@ import crypto from "crypto";
 import express from "express";
 
 /**
- * Generates a unique hash for a url.
- * Handy for uniquely identifying an image and creating an image id
+ * Generates a unique hash for a URL.
+ * Used for creating unique identifiers for digital assets from external URLs.
  */
 export async function generateHash(message: string) {
   const msgUint8 = new TextEncoder().encode(message);
@@ -16,6 +16,7 @@ export async function generateHash(message: string) {
   return hashHex;
 }
 
+// Mock image URLs for demonstration purposes - replace with your actual digital asset sources
 const imageUrls = [
   "https://images.pexels.com/photos/1495580/pexels-photo-1495580.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2",
   "https://images.pexels.com/photos/3943197/pexels-photo-3943197.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2",
@@ -23,15 +24,20 @@ const imageUrls = [
   "https://images.pexels.com/photos/2904142/pexels-photo-2904142.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2",
   "https://images.pexels.com/photos/5403478/pexels-photo-5403478.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2",
 ];
+
 export const createDamRouter = () => {
   const router = express.Router();
 
-  /**
-   * This endpoint returns the data for your app.
-   */
+  /*
+    Main endpoint for finding digital assets and containers.
+    This should be replaced with actual integration to your digital asset management system.
+  */
   router.post("/resources/find", async (req, res) => {
-    // You should modify these lines to return data from your
-    // digital asset manager (DAM) based on the findResourcesRequest
+    /*
+      Extract relevant fields from the FindResourcesRequest.
+      Replace this mock implementation with actual queries to your digital asset management system.
+      Consider implementing proper filtering, sorting, and pagination based on these parameters.
+    */
     const {
       types,
       continuation,
@@ -48,21 +54,32 @@ export const createDamRouter = () => {
     } = req.body;
 
     let resources: Resource[] = [];
+
+    // Handle image resource requests
     if (types.includes("IMAGE")) {
       resources = await Promise.all(
-        Array.from({ length: 40 }, async (_, i) => ({
-          id: await generateHash(i + ""),
-          mimeType: "image/jpeg",
-          name: `My new thing in ${locale}`, // Use the `locale` value from the request if your backend supports i18n
-          type: "IMAGE",
-          thumbnail: {
-            url: imageUrls[i % imageUrls.length],
-          },
-          url: imageUrls[i % imageUrls.length],
-        })),
+        Array.from({ length: 40 }, async (_, i) => {
+          const imageUrl = imageUrls[i % imageUrls.length];
+
+          if (!imageUrl) {
+            throw new Error(`Image URL not found for index ${i}`);
+          }
+
+          return {
+            id: await generateHash(i + ""),
+            mimeType: "image/jpeg",
+            name: `My new thing in ${locale}`, // Uses locale for demonstration - implement proper i18n
+            type: "IMAGE",
+            thumbnail: {
+              url: imageUrl,
+            },
+            url: imageUrl,
+          };
+        }),
       );
     }
 
+    // Handle container (folder) resource requests
     if (types.includes("CONTAINER")) {
       const containers = await Promise.all(
         Array.from(
@@ -80,6 +97,7 @@ export const createDamRouter = () => {
       resources = resources.concat(containers);
     }
 
+    // Send response with resources and pagination token
     res.send({
       resources,
       continuation: +(continuation || 0) + 1,

package/templates/dam/canva-app.json

@@ -12,5 +12,10 @@
         "type": "mandatory"
       }
     ]
+  },
+  "intent": {
+    "design_editor": {
+      "enrolled": true
+    }
   }
 }

package/templates/dam/package.json

@@ -18,12 +18,14 @@
     "postinstall": "ts-node ./scripts/copy_env.ts"
   },
   "dependencies": {
+    "@canva/app-hooks": "^0.0.0-beta.4",
     "@canva/app-components": "^2.1.0",
     "@canva/app-i18n-kit": "^1.1.1",
     "@canva/app-ui-kit": "^5.2.1",
     "@canva/asset": "^2.2.1",
     "@canva/design": "^2.7.3",
     "@canva/error": "^2.1.0",
+    "@canva/intents": "^2.0.0",
     "@canva/platform": "^2.2.0",
     "@canva/user": "^2.1.1",
     "cookie-parser": "1.4.7",
@@ -44,7 +46,6 @@
     "@types/cors": "2.8.19",
     "@types/debug": "4.1.12",
     "@types/express": "4.17.21",
-    "@types/express-serve-static-core": "5.0.7",
     "@types/jest": "29.5.14",
     "@types/jsonwebtoken": "9.0.10",
     "@types/node": "20.19.2",
@@ -63,7 +64,7 @@
     "debug": "4.4.1",
     "dotenv": "16.6.0",
     "exponential-backoff": "3.1.2",
-    "express": "4.21.2",
+    "express": "4.22.1",
     "express-basic-auth": "1.2.1",
     "jest": "29.7.0",
     "jest-css-modules-transform": "4.4.2",
@@ -72,7 +73,7 @@
     "jwks-rsa": "3.2.0",
     "mini-css-extract-plugin": "2.9.4",
     "node-fetch": "3.3.2",
-    "node-forge": "1.3.1",
+    "node-forge": "1.3.2",
     "nodemon": "3.0.1",
     "open": "8.4.2",
     "postcss-loader": "8.1.1",

package/templates/dam/src/index.tsx

@@ -1,22 +1,4 @@
-import { AppI18nProvider } from "@canva/app-i18n-kit";
-import { AppUiProvider } from "@canva/app-ui-kit";
-import { createRoot } from "react-dom/client";
-import { App } from "./app";
-import "@canva/app-ui-kit/styles.css";
+import { prepareDesignEditor } from "@canva/intents/design";
+import designEditor from "./intents/design_editor";
 
-const root = createRoot(document.getElementById("root") as Element);
-function render() {
-  root.render(
-    <AppI18nProvider>
-      <AppUiProvider>
-        <App />
-      </AppUiProvider>
-    </AppI18nProvider>,
-  );
-}
-
-render();
-
-if (module.hot) {
-  module.hot.accept("./app", render);
-}
+prepareDesignEditor(designEditor);

package/templates/dam/src/intents/design_editor/index.tsx

@@ -0,0 +1,25 @@
+import "@canva/app-ui-kit/styles.css";
+import { AppI18nProvider } from "@canva/app-i18n-kit";
+import { AppUiProvider } from "@canva/app-ui-kit";
+import type { DesignEditorIntent } from "@canva/intents/design";
+import { createRoot } from "react-dom/client";
+import { App } from "./app";
+
+async function render() {
+  const root = createRoot(document.getElementById("root") as Element);
+
+  root.render(
+    <AppI18nProvider>
+      <AppUiProvider>
+        <App />
+      </AppUiProvider>
+    </AppI18nProvider>,
+  );
+}
+
+const designEditor: DesignEditorIntent = { render };
+export default designEditor;
+
+if (module.hot) {
+  module.hot.accept("./app", render);
+}

package/templates/dam/tsconfig.json

@@ -28,7 +28,10 @@
     "sourceMap": true,
     "inlineSources": true,
     "module": "ESNext",
-    "noImplicitAny": false,
+    "noImplicitAny": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedIndexedAccess": true,
     "removeComments": true,
     "preserveConstEnums": true,
     "allowSyntheticDefaultImports": true,
@@ -44,8 +47,7 @@
     "./utils/**/*",
     "./scripts/**/*",
     "./declarations/declarations.d.ts",
-    "./styles/**/*",
-    "./node_modules/@types/**/*"
+    "./styles/**/*"
   ],
   "ts-node": {
     "compilerOptions": {

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

@@ -41,12 +41,12 @@ export function createBaseServer(router: express.Router): BaseServer {
   app.disable("x-powered-by");
 
   // Health check endpoint
-  app.get("/healthz", (req, res: Response) => {
+  app.get("/healthz", (req, res) => {
     res.sendStatus(200);
   });
 
   // logging middleware
-  app.use((req: Request, res: Response, next: NextFunction) => {
+  app.use((req, _res, next) => {
     serverDebug(`${new Date().toISOString()}: ${req.method} ${req.url}`);
     next();
   });
@@ -62,7 +62,7 @@ export function createBaseServer(router: express.Router): BaseServer {
   });
 
   // default error handler
-  app.use((err, req, res, next) => {
+  app.use((err: Error, _req: Request, res: Response, _next: NextFunction) => {
     console.error(err.stack);
     res.status(500).send({
       error: "something went wrong",

package/templates/dam/utils/backend/jwt_middleware/jwt_middleware.ts

@@ -1,8 +1,6 @@
 /* eslint-disable no-console */
 import debug from "debug";
 import type { NextFunction, Request, Response } from "express";
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-import Express from "express-serve-static-core";
 import jwt from "jsonwebtoken";
 import { JwksClient, SigningKeyNotFoundError } from "jwks-rsa";
 
@@ -115,7 +113,7 @@ export function createJwtMiddleware(
         userId: payload.userId,
       };
 
-      next();
+      return next();
     } catch (e) {
       if (e instanceof JWTAuthorizationError) {
         return sendUnauthorizedResponse(res, e.message);
@@ -136,7 +134,7 @@ export function createJwtMiddleware(
         return sendUnauthorizedResponse(res, "Token expired");
       }
 
-      next(e);
+      return next(e);
     }
   };
 }

package/templates/dam/webpack.config.ts

@@ -196,7 +196,7 @@ function buildDevConfig(options?: DevConfig): {
     return {};
   }
 
-  const { port, enableHmr, appOrigin, appId, enableHttps, certFile, keyFile } =
+  const { port, enableHmr, appOrigin, enableHttps, certFile, keyFile } =
     options;
   const host = "localhost";
 

package/templates/data_connector/package.json

@@ -19,6 +19,7 @@
     "postinstall": "ts-node ./scripts/copy_env.ts"
   },
   "dependencies": {
+    "@canva/app-hooks": "^0.0.0-beta.4",
     "@canva/app-i18n-kit": "^1.1.1",
     "@canva/app-ui-kit": "^5.2.1",
     "@canva/asset": "^2.2.1",
@@ -42,8 +43,8 @@
     "@pmmmwh/react-refresh-webpack-plugin": "0.6.1",
     "@svgr/webpack": "8.1.0",
     "@testing-library/react": "16.3.0",
+    "@types/debug": "4.1.12",
     "@types/express": "4.17.21",
-    "@types/express-serve-static-core": "5.0.7",
     "@types/jest": "29.5.14",
     "@types/jsonwebtoken": "9.0.10",
     "@types/node": "20.19.2",
@@ -60,7 +61,7 @@
     "cssnano": "7.1.1",
     "debug": "4.4.1",
     "dotenv": "16.6.0",
-    "express": "4.21.2",
+    "express": "4.22.1",
     "express-basic-auth": "1.2.1",
     "jest": "29.7.0",
     "jest-css-modules-transform": "4.4.2",
@@ -69,7 +70,7 @@
     "jwks-rsa": "3.2.0",
     "mini-css-extract-plugin": "2.9.4",
     "node-fetch": "3.3.2",
-    "node-forge": "1.3.1",
+    "node-forge": "1.3.2",
     "nodemon": "3.0.1",
     "open": "8.4.2",
     "postcss-loader": "8.1.1",

package/templates/data_connector/src/api/data_sources/designs.tsx

@@ -13,7 +13,7 @@ import {
 import { SearchFilter } from "src/components/inputs/search_filter";
 import { SelectField } from "src/components/inputs/select_field";
 import { useAppContext } from "src/context";
-import { Paths } from "src/paths";
+import { Paths } from "src/routes/paths";
 import { dateCell, numberCell, stringCell } from "src/utils";
 import type { CanvaItemResponse } from "../connect_client";
 import { DataAPIError, DataSourceHandler } from "../data_source";

package/templates/data_connector/src/api/data_sources/templates.tsx

@@ -18,7 +18,7 @@ import {
 import { SearchFilter } from "src/components/inputs/search_filter";
 import { SelectField } from "src/components/inputs/select_field";
 import { useAppContext } from "src/context";
-import { Paths } from "src/paths";
+import { Paths } from "src/routes/paths";
 import { dateCell, stringCell } from "src/utils";
 import type { CanvaItemResponse } from "../connect_client";
 import { DataAPIError, DataSourceHandler } from "../data_source";

package/templates/data_connector/src/components/header.tsx

@@ -7,7 +7,7 @@ import {
   Title,
 } from "@canva/app-ui-kit";
 import { useNavigate } from "react-router-dom";
-import { Paths } from "src/paths";
+import { Paths } from "src/routes/paths";
 
 export const Header = ({
   title,

package/templates/data_connector/src/index.tsx

@@ -1,68 +1,4 @@
-import { Alert, AppUiProvider } from "@canva/app-ui-kit";
-import type {
-  GetDataTableRequest,
-  GetDataTableResponse,
-  RenderSelectionUiRequest,
-} from "@canva/intents/data";
 import { prepareDataConnector } from "@canva/intents/data";
-import { auth } from "@canva/user";
-import { createRoot } from "react-dom/client";
-import { buildDataTableResult, scope } from "./api";
-import { App } from "./app";
-import "@canva/app-ui-kit/styles.css";
+import dataConnector from "./intents/data_connector";
 
-const root = createRoot(document.getElementById("root") as Element);
-prepareDataConnector({
-  /**
-   * Fetches structured data from an external source.
-   *
-   * This action is called in two scenarios:
-   *
-   * - During data selection to preview data before import (when {@link RenderSelectionUiRequest.updateDataRef} is called).
-   * - When refreshing previously imported data (when the user requests an update).
-   *
-   * @param params - Parameters for the data fetching operation.
-   * @returns A promise resolving to either a successful result with data or an error.
-   */
-  getDataTable: async (
-    params: GetDataTableRequest,
-  ): Promise<GetDataTableResponse> => {
-    const oauth = auth.initOauth();
-    const token = await oauth.getAccessToken({ scope });
-    return buildDataTableResult(params, token?.token);
-  },
-
-  /**
-   * Renders a UI component for selecting and configuring data from external sources.
-   * This UI should allow users to browse data sources, apply filters, and select data.
-   * When selection is complete, the implementation must call the `updateDataRef`
-   * callback provided in the params to preview and confirm the data selection.
-   *
-   * @param request - parameters that provide context and configuration for the data selection UI.
-   * Contains invocation context, size limits, and the updateDataRef callback
-   */
-  renderSelectionUi: async (request: RenderSelectionUiRequest) => {
-    function render() {
-      root.render(<App request={request} />);
-    }
-
-    render();
-
-    if (module.hot) {
-      module.hot.accept("./app", render);
-      module.hot.accept("./api", render);
-    }
-  },
-});
-
-// TODO: Fallback message if you have not turned on the data connector intent.
-// You can remove this once your app is correctly configured.
-root.render(
-  <AppUiProvider>
-    {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
-    <Alert tone="critical">
-      If you're seeing this, you need to turn on the data connector intent in
-      the Developer Portal for this app.
-    </Alert>
-  </AppUiProvider>,
-);
+prepareDataConnector(dataConnector);

package/templates/data_connector/src/{app.tsx → intents/data_connector/app.tsx}

@@ -3,9 +3,9 @@ import { AppUiProvider } from "@canva/app-ui-kit";
 import type { RenderSelectionUiRequest } from "@canva/intents/data";
 import { ErrorBoundary } from "react-error-boundary";
 import { createHashRouter, RouterProvider } from "react-router-dom";
-import { ContextProvider } from "./context";
-import { ErrorPage } from "./pages";
-import { routes } from "./routes";
+import { ContextProvider } from "../../context";
+import { ErrorPage } from "../../pages";
+import { routes } from "../../routes";
 
 export const App = ({ request }: { request: RenderSelectionUiRequest }) => (
   <AppI18nProvider>

package/templates/data_connector/src/{entrypoint.tsx → intents/data_connector/entrypoint.tsx}

@@ -5,15 +5,15 @@ import type {
   APIResponseItem,
   DataSourceConfig,
   DataSourceHandler,
-} from "./api";
-import { DATA_SOURCES } from "./api/data_sources";
-import { useAppContext } from "./context";
-import { Paths } from "./paths";
+} from "../../api";
+import { DATA_SOURCES } from "../../api/data_sources";
+import { useAppContext } from "../../context";
+import { Paths } from "../../routes/paths";
 import {
   isDataRefEmpty,
   isLaunchedWithError,
   isOutdatedSource,
-} from "./utils/data_params";
+} from "../../utils/data_params";
 
 const parseDataSource = (source: string) => {
   try {

package/templates/data_connector/src/{home.tsx → intents/data_connector/home.tsx}

@@ -1,7 +1,7 @@
 import { Box, Rows } from "@canva/app-ui-kit";
 import { Outlet } from "react-router-dom";
 import * as styles from "styles/components.css";
-import { AppError } from "./components";
+import { AppError } from "../../components";
 
 export const Home = () => (
   <div className={styles.scrollContainer}>

package/templates/data_connector/src/intents/data_connector/index.tsx

@@ -0,0 +1,56 @@
+import "@canva/app-ui-kit/styles.css";
+import type {
+  DataConnectorIntent,
+  GetDataTableRequest,
+  GetDataTableResponse,
+  RenderSelectionUiRequest,
+} from "@canva/intents/data";
+import { auth } from "@canva/user";
+import { createRoot } from "react-dom/client";
+import { buildDataTableResult, scope } from "../../api";
+import { App } from "./app";
+
+const dataConnector: DataConnectorIntent = {
+  /**
+   * Fetches structured data from an external source.
+   *
+   * This action is called in two scenarios:
+   *
+   * - During data selection to preview data before import (when {@link RenderSelectionUiRequest.updateDataRef} is called).
+   * - When refreshing previously imported data (when the user requests an update).
+   *
+   * @param params - Parameters for the data fetching operation.
+   * @returns A promise resolving to either a successful result with data or an error.
+   */
+  getDataTable: async (
+    params: GetDataTableRequest,
+  ): Promise<GetDataTableResponse> => {
+    const oauth = auth.initOauth();
+    const token = await oauth.getAccessToken({ scope });
+    return buildDataTableResult(params, token?.token);
+  },
+
+  /**
+   * Renders a UI component for selecting and configuring data from external sources.
+   * This UI should allow users to browse data sources, apply filters, and select data.
+   * When selection is complete, the implementation must call the `updateDataRef`
+   * callback provided in the params to preview and confirm the data selection.
+   *
+   * @param request - parameters that provide context and configuration for the data selection UI.
+   * Contains invocation context, size limits, and the updateDataRef callback
+   */
+  renderSelectionUi: async (request: RenderSelectionUiRequest) => {
+    function render() {
+      const root = createRoot(document.getElementById("root") as Element);
+      root.render(<App request={request} />);
+    }
+
+    render();
+
+    if (module.hot) {
+      module.hot.accept("./app", render);
+      module.hot.accept("../../api", render);
+    }
+  },
+};
+export default dataConnector;

package/templates/data_connector/src/pages/error.tsx

@@ -1,7 +1,7 @@
 import { Button, Rows, Text } from "@canva/app-ui-kit";
 import { FormattedMessage, useIntl } from "react-intl";
 import { useNavigate } from "react-router-dom";
-import { Paths } from "src/paths";
+import { Paths } from "src/routes/paths";
 import * as styles from "styles/components.css";
 
 /**

package/templates/data_connector/src/pages/login.tsx

@@ -11,7 +11,7 @@ import { defineMessages, FormattedMessage, useIntl } from "react-intl";
 import { useNavigate } from "react-router-dom";
 import { scope } from "src/api";
 import { Header } from "src/components";
-import { Paths } from "src/paths";
+import { Paths } from "src/routes/paths";
 import * as styles from "styles/components.css";
 import { useAppContext } from "../context";
 

package/templates/data_connector/src/routes/protected_route.tsx

@@ -1,7 +1,7 @@
 import type { ReactNode } from "react";
 import { useEffect } from "react";
 import { useNavigate } from "react-router-dom";
-import { Paths } from "src/paths";
+import { Paths } from "src/routes/paths";
 import { useAppContext } from "../context";
 
 interface ProtectedRouteProps {

package/templates/data_connector/src/routes/routes.tsx

@@ -1,10 +1,10 @@
-import { Entrypoint } from "src/entrypoint";
-import { Home } from "src/home";
+import { Entrypoint } from "src/intents/data_connector/entrypoint";
+import { Home } from "src/intents/data_connector/home";
 import { DataSourceConfig } from "src/pages/data_source_config";
 import { ErrorPage } from "src/pages/error";
 import { Login } from "src/pages/login";
 import { SelectSource } from "src/pages/select_source";
-import { Paths } from "src/paths";
+import { Paths } from "src/routes/paths";
 import { ProtectedRoute } from "./protected_route";
 
 export const routes = [

package/templates/data_connector/src/utils/data_table.ts

@@ -12,7 +12,8 @@ import type { APIResponseItem } from "src/api";
 export interface DataTableColumn<T extends APIResponseItem> {
   label: string;
   getValue: keyof T | ((result: T) => boolean | string | number | Date);
-  toCell: (value) => DataTableCell;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  toCell: (value: any) => DataTableCell;
 }
 
 export function toDataTable<T extends APIResponseItem>(

package/templates/data_connector/src/utils/tests/data_table.test.ts

@@ -92,8 +92,8 @@ describe("data table utils", () => {
     const result = toDataTable(testItems, columns, 10);
 
     // Check the custom column values
-    expect(result.rows[0].cells[5].value).toBe("Test Item 1 (42)");
-    expect(result.rows[1].cells[5].value).toBe("Test Item 2 (0)");
+    expect(result.rows[0]?.cells[5]?.value).toBe("Test Item 1 (42)");
+    expect(result.rows[1]?.cells[5]?.value).toBe("Test Item 2 (0)");
   });
 
   test("cell formatter functions create correct cell structures", () => {

package/templates/data_connector/styles/components.css

@@ -36,3 +36,21 @@
 .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 */
+}