@canva/cli 1.19.0 → 1.21.0

package/templates/dam/webpack.config.ts

@@ -1,247 +0,0 @@
-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/data_connector/README.md

@@ -1,84 +0,0 @@
-# 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 via the [Developer Portal](https://www.canva.com/developers/apps).
-- On the **Intents** 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.
-- Click **Preview** in the [Developer Portal](https://www.canva.com/developers/apps) to view the app in the Canva editor.
-- 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/canva-app.json

@@ -1,21 +0,0 @@
-{
-  "$schema": "https://www.canva.dev/schemas/app/v1/manifest-schema.json",
-  "manifest_schema_version": 1,
-  "runtime": {
-    "permissions": [
-      {
-        "name": "canva:design:content:read",
-        "type": "mandatory"
-      },
-      {
-        "name": "canva:design:content:write",
-        "type": "mandatory"
-      }
-    ]
-  },
-  "intent": {
-    "data_connector": {
-      "enrolled": true
-    }
-  }
-}

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

@@ -1,29 +0,0 @@
-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

@@ -1,14 +0,0 @@
-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

@@ -1,92 +0,0 @@
-{
-  "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-hooks": "^0.0.0-beta.4",
-    "@canva/app-i18n-kit": "^1.2.0",
-    "@canva/app-ui-kit": "^5.5.0",
-    "@canva/asset": "^2.3.0",
-    "@canva/design": "^2.8.0",
-    "@canva/error": "^2.2.0",
-    "@canva/intents": "^2.2.0",
-    "@canva/platform": "^2.2.1",
-    "@canva/user": "^2.1.2",
-    "react": "^19.2.3",
-    "react-dom": "^19.2.3",
-    "react-error-boundary": "6.0.0",
-    "react-intl": "^7.1.11",
-    "react-router-dom": "7.12.0"
-  },
-  "devDependencies": {
-    "@canva/app-eslint-plugin": "^1.0.0-beta.7",
-    "@canva/cli": ">= 0.0.1-beta.13",
-    "@formatjs/cli": "6.7.2",
-    "@formatjs/ts-transformer": "3.14.0",
-    "@ngrok/ngrok": "1.5.2",
-    "@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/jest": "29.5.14",
-    "@types/jsonwebtoken": "9.0.10",
-    "@types/node": "20.19.2",
-    "@types/node-fetch": "2.6.13",
-    "@types/node-forge": "1.3.14",
-    "@types/nodemon": "1.19.6",
-    "@types/react": "19.2.2",
-    "@types/react-dom": "19.2.1",
-    "@types/webpack-env": "1.18.8",
-    "chalk": "4.1.2",
-    "cli-table3": "0.6.5",
-    "css-loader": "7.1.2",
-    "css-modules-typescript-loader": "4.0.1",
-    "cssnano": "7.1.1",
-    "debug": "4.4.1",
-    "dotenv": "16.6.0",
-    "express": "4.22.1",
-    "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.3",
-    "jwks-rsa": "3.2.0",
-    "mini-css-extract-plugin": "2.9.4",
-    "node-fetch": "3.3.2",
-    "node-forge": "1.3.2",
-    "nodemon": "3.0.1",
-    "open": "8.4.2",
-    "postcss-loader": "8.1.1",
-    "prettier": "3.6.2",
-    "react-refresh": "0.17.0",
-    "style-loader": "4.0.0",
-    "terser-webpack-plugin": "5.3.14",
-    "tree-kill": "1.2.2",
-    "ts-jest": "29.4.1",
-    "ts-loader": "9.5.4",
-    "ts-node": "10.9.2",
-    "typescript": "5.9.2",
-    "url-loader": "4.1.1",
-    "webpack": "5.99.9",
-    "webpack-cli": "6.0.1",
-    "webpack-dev-server": "5.2.2",
-    "yargs": "17.7.2"
-  }
-}

package/templates/data_connector/scripts/copy_env.ts

@@ -1,13 +0,0 @@
-#!/usr/bin/env node
-/* eslint-disable no-console */
-import fs from "fs";
-import path from "path";
-
-const envPath = path.resolve(__dirname, "..", ".env");
-const templatePath = path.resolve(__dirname, "..", ".env.template");
-
-if (!fs.existsSync(templatePath)) {
-  console.warn(".env.template file does not exist, skipping copy of .env file");
-} else if (!fs.existsSync(envPath)) {
-  fs.copyFileSync(templatePath, envPath);
-}

package/templates/data_connector/scripts/ssl/ssl.ts

@@ -1,131 +0,0 @@
-import crypto from "crypto";
-import fs from "fs/promises";
-import { pki } from "node-forge";
-import path from "path";
-
-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,
-  };
-};