@canva/cli 0.0.1-beta.26 → 0.0.1-beta.29

package/package.json

@@ -1,9 +1,13 @@
 {
   "name": "@canva/cli",
-  "version": "0.0.1-beta.26",
+  "version": "0.0.1-beta.29",
   "description": "The official Canva CLI.",
   "license": "SEE LICENSE IN LICENSE.md",
   "author": "Canva Pty Ltd.",
+  "repository": {
+    "directory": "git+https://github.com/canva-sdks/canva-cli.git",
+    "type": "git"
+  },
   "type": "module",
   "main": "./lib/cjs/index.cjs",
   "module": "./lib/esm/index.mjs",
@@ -26,7 +30,8 @@
   "dependencies": {
     "ink": "5.1.0",
     "react": "18.3.1",
-    "@modelcontextprotocol/sdk": "1.8.0"
+    "@modelcontextprotocol/sdk": "1.8.0",
+    "react-docgen-typescript": "2.2.2"
   },
   "keywords": [
     "apps sdk",

package/templates/base/webpack.config.ts

@@ -23,10 +23,13 @@ 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/mcp-server/harness-setup/
+  inHarness = process.env.IN_HARNESS === "true",
 }: {
   devConfig?: DevConfig;
   appEntry?: string;
   backendHost?: string;
+  inHarness?: boolean;
 } = {}): Configuration & DevServerConfiguration {
   const mode = devConfig ? "development" : "production";
 
@@ -48,9 +51,14 @@ export function buildConfig({
   return {
     mode,
     context: path.resolve(process.cwd(), "./"),
-    entry: {
-      app: appEntry,
-    },
+    entry: inHarness
+      ? {
+          harness: path.join(process.cwd(), "harness", "harness.tsx"),
+          init: path.join(process.cwd(), "harness", "init.ts"),
+        }
+      : {
+          app: appEntry,
+        },
     target: "web",
     resolve: {
       alias: {
@@ -62,7 +70,7 @@ export function buildConfig({
       extensions: [".ts", ".tsx", ".js", ".css", ".svg", ".woff", ".woff2"],
     },
     infrastructureLogging: {
-      level: "none",
+      level: inHarness ? "info" : "none",
     },
     module: {
       rules: [

package/templates/dam/eslint.config.mjs

@@ -10,6 +10,5 @@ export default [
       "**/*.config.*",
     ],
   },
-  // This template is not yet translated, switch to apps when it is
-  ...canvaPlugin.configs.apps_no_i18n,
+  ...canvaPlugin.configs.apps,
 ];

package/templates/dam/src/config.ts

@@ -22,11 +22,14 @@ export const useConfig = (): Config<ContainerTypes> => {
               description: "Label of filters for file type",
             }),
             key: "fileType",
+            // These options do not need to be translated as they are universal technical terms
+            /* eslint-disable formatjs/no-literal-string-in-object */
             options: [
               { value: "mp4", label: "MP4" },
               { value: "png", label: "PNG" },
               { value: "jpeg", label: "JPEG" },
             ],
+            /* eslint-enable formatjs/no-literal-string-in-object */
             allowCustomValue: true,
           },
           {

package/templates/dam/webpack.config.ts

@@ -23,10 +23,13 @@ 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/mcp-server/harness-setup/
+  inHarness = process.env.IN_HARNESS === "true",
 }: {
   devConfig?: DevConfig;
   appEntry?: string;
   backendHost?: string;
+  inHarness?: boolean;
 } = {}): Configuration & DevServerConfiguration {
   const mode = devConfig ? "development" : "production";
 
@@ -48,9 +51,14 @@ export function buildConfig({
   return {
     mode,
     context: path.resolve(process.cwd(), "./"),
-    entry: {
-      app: appEntry,
-    },
+    entry: inHarness
+      ? {
+          harness: path.join(process.cwd(), "harness", "harness.tsx"),
+          init: path.join(process.cwd(), "harness", "init.ts"),
+        }
+      : {
+          app: appEntry,
+        },
     target: "web",
     resolve: {
       alias: {
@@ -62,7 +70,7 @@ export function buildConfig({
       extensions: [".ts", ".tsx", ".js", ".css", ".svg", ".woff", ".woff2"],
     },
     infrastructureLogging: {
-      level: "none",
+      level: inHarness ? "info" : "none",
     },
     module: {
       rules: [

package/templates/data_connector/README.md

@@ -0,0 +1,84 @@
+# Data Connector Template
+
+## Overview
+
+This template provides a working example of a data connector app which uses the Canva Connect API as a data source. It demonstrates how to log in with OAuth and then fetch data from an external source, using Canva's API for listing Designs and Brand Templates. There are instructions below for how to configure your authentication settings to try it out.
+
+The template provides a list / detail interface for choosing a data source. The user would first select the data source they want to import from a list. Next, they configure the data source to select the desired query by applying search filters or sort criteria. The app turns their configured data source into an API request and then returns the data in a table format for use in a Canva Design.
+
+## Best Practices
+
+This template captures best practices for improving user experience in your application.
+
+### State Management
+
+In this template, we've set up state management using `React Context`. It's just one way to do it, not a strict rule. If your app gets more complicated, you might want to check out other options like `Redux` or `MobX`.
+
+### Routing
+
+As your application evolves, you may find the need for routing to manage multiple views or pages. In this template, we've integrated React Router to illustrate how routing can facilitate seamless navigation between various components.
+
+### App UI Kit
+
+The App UI Kit is a React-based component library designed for creating apps that emulate Canva's look and feel. We strongly recommend using the App UI Kit if you're planning to release an app to the public, because this makes it easier to comply with our [design guidelines](https://www.canva.dev/docs/apps/design-guidelines/).
+
+### Data Sources
+
+A data source is a type of data that this connector can retrieve. It has:
+
+- properties that define the configuration for this source - e.g. search criteria, ordering conditions, selection filters
+- UI for how to edit this configuration
+- columns to display for each data item
+- logic for how to fetch the data from an external API
+
+The initial data sources for the Canva Connect API (Designs and Brand Templates) in this template are located in `src/api/data_sources/`.
+
+This template provides a `DataSourceHandler` class in `src/api/data_source.ts` as a suggested starting point for defining a reusable concept for a data source and convert API responses into data table outputs.
+
+## Setup - Authentication
+
+This template is a working app that reads the [Canva Connect API](https://www.canva.dev/docs/connect/).
+
+To run it and authenticate with the Canva Connect API via OAuth you must first complete some authentication setup steps.
+
+### 0. Set up an App
+
+- If not already handled by the Canva CLI, you need to create an app.
+  Go to [Your Apps](https://www.canva.com/developers/apps) and create an app.
+- On the **Configuration** page, enable the `Data Connector` intent.
+
+### 1. Set up a Connect API Integration
+
+- Go to [Your Integrations](https://www.canva.com/developers/integrations/connect-api) and create a new integration
+- On the **Configuration** page, generate a client secret - you need the client ID and client secret in the app setup.
+- On the **Scopes** page, add the `designs:meta` and `brandtemplate:meta` read scopes
+- On the **Authentication** page, set `https://www.canva.com/apps/oauth/authorized` as an Authorized redirect
+
+### 2. Set up OAuth for the app
+
+- Go to [Your Apps](https://www.canva.com/developers/apps) and open your data connector app.
+- On the **Authentication** page, add an OAuth 2.0 provider with the following settings:
+  > Provider: `CanvaConnect`
+  >
+  > Client ID: `(generated in step 1)
+  >
+  > Client secret: `(generated in step 1)
+  >
+  > Credential transfer mode: `Headers (default)`
+  >
+  > Authorization server URL: `https://www.canva.com/api/oauth/authorize`
+  >
+  > Token exchange URL: `https://api.canva.com/rest/v1/oauth/token`
+  >
+  > Proof Key for Code Exchange (PKCE): `Enabled`
+
+### 3. Run your app
+
+- Run `npm start` to run the app.
+- You should be able to log in and then choose from the available data sources.
+
+### To use another OAuth source
+
+- `src/api/oauth.ts` has a `scope` property that will be used in the oauth flow.
+- This template starts with the scope for the Canva Connect API login set to `["design:meta:read", "brandtemplate:meta:read"]`
+- It should match the scopes set in Step 1.

package/templates/data_connector/declarations/declarations.d.ts

@@ -0,0 +1,29 @@
+declare module "*.css" {
+  const styles: { [className: string]: string };
+  export = styles;
+}
+
+declare module "*.jpg" {
+  const content: string;
+  export default content;
+}
+
+declare module "*.jpeg" {
+  const content: string;
+  export default content;
+}
+
+declare module "*.png" {
+  const content: string;
+  export default content;
+}
+
+declare module "*.svg" {
+  const content: React.FunctionComponent<{
+    size?: "tiny" | "small" | "medium" | "large";
+    className?: string;
+  }>;
+  export default content;
+}
+
+declare const BACKEND_HOST: string;

package/templates/data_connector/eslint.config.mjs

@@ -0,0 +1,14 @@
+import canvaPlugin from "@canva/app-eslint-plugin";
+
+export default [
+  {
+    ignores: [
+      "**/node_modules/",
+      "**/dist",
+      "**/*.d.ts",
+      "**/*.d.tsx",
+      "**/*.config.*",
+    ],
+  },
+  ...canvaPlugin.configs.apps,
+];

package/templates/data_connector/package.json

@@ -0,0 +1,91 @@
+{
+  "private": true,
+  "name": "data_connector",
+  "description": "An example Canva Data Connector App",
+  "scripts": {
+    "extract": "formatjs extract \"src/**/*.{ts,tsx}\" --out-file dist/messages_en.json",
+    "build": "webpack --config webpack.config.ts --mode production && npm run extract",
+    "format": "prettier '**/*.{css,ts,tsx}' --no-config --write",
+    "format:check": "prettier '**/*.{css,ts,tsx}' --no-config --check --ignore-path",
+    "format:file": "prettier $1 --no-config --write",
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix",
+    "lint:types": "tsc",
+    "start": "ts-node ./scripts/start/start.ts",
+    "start:preview": "npm run start -- --preview",
+    "test": "jest --no-cache",
+    "test:watch": "jest --watchAll",
+    "test:update": "npm run test -- -u",
+    "postinstall": "ts-node ./scripts/copy_env.ts"
+  },
+  "dependencies": {
+    "@canva/app-i18n-kit": "^1.0.2",
+    "@canva/app-ui-kit": "^4.9.0",
+    "@canva/asset": "^2.2.0",
+    "@canva/design": "^2.4.1",
+    "@canva/error": "^2.1.0",
+    "@canva/intents": "^0.0.0-beta.2",
+    "@canva/platform": "^2.1.0",
+    "@canva/user": "^2.1.0",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
+    "react-error-boundary": "4.1.2",
+    "react-intl": "6.8.7",
+    "react-router-dom": "6.28.0"
+  },
+  "devDependencies": {
+    "@canva/app-eslint-plugin": "^1.0.0-beta.3",
+    "@canva/cli": ">= 0.0.1-beta.13 < 0.0.2",
+    "@formatjs/cli": "6.3.15",
+    "@formatjs/ts-transformer": "3.13.27",
+    "@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/express": "4.17.21",
+    "@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.12",
+    "@types/node-forge": "1.3.11",
+    "@types/nodemon": "1.19.6",
+    "@types/react": "18.3.12",
+    "@types/react-dom": "18.3.1",
+    "@types/webpack-env": "1.18.5",
+    "chalk": "4.1.2",
+    "cli-table3": "0.6.5",
+    "css-loader": "7.1.2",
+    "css-modules-typescript-loader": "4.0.1",
+    "cssnano": "7.0.6",
+    "debug": "4.4.0",
+    "dotenv": "16.4.7",
+    "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.2",
+    "node-fetch": "3.3.2",
+    "node-forge": "1.3.1",
+    "nodemon": "3.0.1",
+    "open": "8.4.2",
+    "postcss-loader": "8.1.1",
+    "prettier": "3.4.2",
+    "react-refresh": "0.16.0",
+    "style-loader": "4.0.0",
+    "terser-webpack-plugin": "5.3.11",
+    "tree-kill": "1.2.2",
+    "ts-jest": "29.2.5",
+    "ts-loader": "9.5.2",
+    "ts-node": "10.9.2",
+    "typescript": "5.5.4",
+    "url-loader": "4.1.1",
+    "webpack": "5.97.1",
+    "webpack-cli": "5.1.4",
+    "webpack-dev-server": "5.2.0",
+    "yargs": "17.7.2"
+  }
+}

package/templates/data_connector/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/data_connector/scripts/ssl/ssl.ts

@@ -0,0 +1,131 @@
+import * as crypto from "crypto";
+import { pki } from "node-forge";
+import * as path from "path";
+import * as fs from "fs/promises";
+
+const SSL_CERT_DIR = path.resolve(process.cwd(), "..", "..", ".ssl");
+const CERT_FILE = path.resolve(SSL_CERT_DIR, "certificate.pem");
+const KEY_FILE = path.resolve(SSL_CERT_DIR, "private-key.pem");
+
+export interface Certificate {
+  keyFile: string;
+  certFile: string;
+}
+
+const CERT_ATTRS: { name: string; value: string }[] = [
+  {
+    name: "commonName",
+    value: "localhost",
+  },
+  {
+    name: "countryName",
+    value: "AU",
+  },
+  {
+    name: "stateOrProvinceName",
+    value: "New South Wales",
+  },
+  {
+    name: "localityName",
+    value: "Sydney",
+  },
+  {
+    name: "organizationName",
+    value: "Test",
+  },
+  {
+    name: "organizationalUnitName",
+    value: "Test",
+  },
+];
+
+const generateRsaKeys = async (): Promise<{
+  publicKey: string;
+  privateKey: string;
+}> =>
+  new Promise((resolve, reject) => {
+    crypto.generateKeyPair(
+      "rsa",
+      {
+        modulusLength: 2096,
+        publicKeyEncoding: {
+          type: "spki",
+          format: "pem",
+        },
+        privateKeyEncoding: {
+          type: "pkcs8",
+          format: "pem",
+        },
+      },
+      (err, publicKey, privateKey) => {
+        if (err) {
+          reject(err);
+        } else {
+          resolve({ publicKey, privateKey });
+        }
+      },
+    );
+  });
+
+const generateCertificate = (opts: {
+  privateKey: string;
+  publicKey: string;
+}): string => {
+  const privateKey = pki.privateKeyFromPem(opts.privateKey);
+  const publicKey = pki.publicKeyFromPem(opts.publicKey);
+
+  const cert = pki.createCertificate();
+
+  cert.publicKey = publicKey;
+  cert.serialNumber = "01";
+  cert.validity.notBefore = new Date();
+  cert.validity.notAfter = new Date();
+  cert.validity.notAfter.setFullYear(cert.validity.notBefore.getFullYear() + 1);
+
+  cert.setSubject(CERT_ATTRS);
+  cert.setIssuer(CERT_ATTRS);
+
+  // the actual certificate signing
+  cert.sign(privateKey);
+
+  // now convert the Forge certificate to PEM format
+  return pki.certificateToPem(cert);
+};
+
+const writeCertFiles = async (opts: {
+  cert: string;
+  privateKey: string;
+}): Promise<void> => {
+  const { cert, privateKey } = opts;
+
+  await fs.mkdir(SSL_CERT_DIR, { recursive: true });
+  await Promise.all([
+    fs.writeFile(CERT_FILE, cert, { encoding: "utf8" }),
+    fs.writeFile(KEY_FILE, privateKey, { encoding: "utf8" }),
+  ]);
+};
+
+const cerfFilesExist = async (): Promise<boolean> => {
+  try {
+    await Promise.all([
+      fs.access(CERT_FILE, fs.constants.R_OK | fs.constants.W_OK),
+      fs.access(KEY_FILE, fs.constants.R_OK | fs.constants.W_OK),
+    ]);
+    return true;
+  } catch {
+    return false;
+  }
+};
+
+export const createOrRetrieveCertificate = async (): Promise<Certificate> => {
+  if (!(await cerfFilesExist())) {
+    const keys = await generateRsaKeys();
+    const cert = generateCertificate(keys);
+    await writeCertFiles({ cert, privateKey: keys.privateKey });
+  }
+
+  return {
+    certFile: CERT_FILE,
+    keyFile: KEY_FILE,
+  };
+};