@canva/cli 1.19.0 → 1.20.0

package/templates/hello_world/styles/components.css

@@ -1,38 +0,0 @@
-/* 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;
-}

package/templates/hello_world/tsconfig.json

@@ -1,56 +0,0 @@
-{
-  "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/hello_world/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/mls/README.md

@@ -1,81 +0,0 @@
-# Real Estate MLS App
-
-## Running this app
-
-### Step 1: Start the local development server
-
-To start the development server, run the following command:
-
-```bash
-npm install
-npm start
-```
-
-The server becomes available at <http://localhost:8080>.
-
-The app's source code is in the `src/app.tsx` file.
-
-### Step 2: Preview the app
-
-The local development server only exposes a JavaScript bundle, so you can't preview an app by visiting <http://localhost:8080>. You can only preview an app via the Canva editor.
-
-To preview an app:
-
-1. Create an app via the [Developer Portal](https://www.canva.com/developers/apps).
-2. Select **App source > Development URL**.
-3. In the **Development URL** field, enter the URL of the development server.
-4. Click **Preview**. This opens the Canva editor (and the app) in a new tab.
-5. Click **Open**. (This screen only appears when using an app for the first time.)
-
-The app will appear in the side panel.
-
-<details>
-  <summary>Previewing apps in Safari</summary>
-
-By default, the development server is not HTTPS-enabled. This is convenient, as there's no need for a security certificate, but it prevents apps from being previewed in Safari.
-
-**Why Safari requires the development server to be HTTPS-enabled?**
-
-Canva itself is served via HTTPS and most browsers prevent HTTPS pages from loading scripts via non-HTTPS connections. Chrome and Firefox make exceptions for local servers, such as `localhost`, but Safari does not, so if you're using Safari, the development server must be HTTPS-enabled.
-
-To learn more, see [Loading mixed-content resources](https://developer.mozilla.org/en-US/docs/Web/Security/Mixed_content#loading_mixed-content_resources).
-
-To preview apps in Safari:
-
-1. Start the development server with HTTPS enabled:
-
-```bash
-npm start --use-https
-```
-
-2. Navigate to <https://localhost:8080>.
-3. Bypass the invalid security certificate warning:
-   1. Click **Show details**.
-   2. Click **Visit website**.
-4. In the Developer Portal, set the app's **Development URL** to <https://localhost:8080>.
-5. Click preview (or refresh your app if it's already open).
-
-You need to bypass the invalid security certificate warning every time you start the local server. A similar warning will appear in other browsers (and will need to be bypassed) whenever HTTPS is enabled.
-
-</details>
-
-### Step 3 (Optional): Enable Hot Module Replacement
-
-By default, every time you make a change to an app, you have to reload the entire app to see the results of those changes. If you enable [Hot Module Replacement](https://webpack.js.org/concepts/hot-module-replacement/) (HMR), changes will be reflected without a full reload, which significantly speeds up the development loop.
-
-**Note:** HMR does **not** work while running the development server in a Docker container.
-
-To enable HMR:
-
-1. Navigate to an app via the [Your apps](https://www.canva.com/developers/apps).
-1. Select **Security** -> **Credentials** -> **.env file**.
-1. Copy the `.env` file contents.
-1. Paste the contents into the starter kit's `.env` file. For example:
-
-   ```bash
-   CANVA_APP_ORIGIN=https://app-aabbccddeeff.canva-apps.com
-   CANVA_HMR_ENABLED=true
-   ```
-
-1. Restart the local development server.
-1. Reload the app manually to ensure that HMR takes effect.

package/templates/mls/canva-app.json

@@ -1,25 +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"
-      },
-      {
-        "name": "canva:asset:private:write",
-        "type": "mandatory"
-      }
-    ]
-  },
-  "intent": {
-    "design_editor": {
-      "enrolled": true
-    }
-  }
-}

package/templates/mls/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/mls/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/mls/jest.config.mjs

@@ -1,36 +0,0 @@
-import { pathsToModuleNameMapper } from "ts-jest";
-import tsconfig from "./tsconfig.json" with { type: "json" };
-
-const { compilerOptions } = tsconfig;
-
-/** @type {import('ts-jest').JestConfigWithTsJest} */
-
-export default {
-  preset: "ts-jest",
-  testEnvironment: "jsdom",
-  testRegex: "(/(tests|__tests__)/.*\\.(tests))\\.tsx?$",
-  modulePathIgnorePatterns: ["./internal/", "./node_modules/"],
-  modulePaths: [compilerOptions.baseUrl],
-  moduleNameMapper: pathsToModuleNameMapper(compilerOptions.paths),
-  transform: {
-    ".+\\.(css)$": "jest-css-modules-transform",
-    "^.+\\.tsx?$": [
-      "ts-jest",
-      {
-        astTransformers: {
-          before: [
-            {
-              path: "@formatjs/ts-transformer/ts-jest-integration",
-              options: {
-                overrideIdFn: "[sha512:contenthash:base64:6]",
-                ast: true,
-              },
-            },
-          ],
-        },
-      },
-    ],
-  },
-  setupFiles: ["<rootDir>/jest.setup.ts"],
-  setupFilesAfterEnv: ["@testing-library/jest-dom"],
-};

package/templates/mls/jest.setup.ts

@@ -1,39 +0,0 @@
-// For usage information, see the README.md file.
-
-// Import Canva SDK testing utilities
-import * as asset from "@canva/asset/test";
-import * as design from "@canva/design/test";
-import * as error from "@canva/error/test";
-import * as intents from "@canva/intents/test";
-import * as platform from "@canva/platform/test";
-import * as user from "@canva/user/test";
-import { TextEncoder } from "util";
-
-// jsdom doesn't provide TextEncoder by default, so we polyfill it from Node's util module
-global.TextEncoder = TextEncoder as unknown as typeof global.TextEncoder;
-
-/*
-  Initialize test environments for each Canva SDK package
-  This sets up the necessary test infrastructure before mocking the actual SDK methods
-*/
-asset.initTestEnvironment();
-design.initTestEnvironment();
-error.initTestEnvironment();
-intents.initTestEnvironment();
-platform.initTestEnvironment();
-user.initTestEnvironment();
-
-/*
-  Mock all Canva SDK packages except @canva/error
-  This allows tests to run without making real API calls to Canva's services
-*/
-jest.mock("@canva/asset");
-jest.mock("@canva/design");
-jest.mock("@canva/intents");
-jest.mock("@canva/platform");
-jest.mock("@canva/user");
-/*
-  Important: @canva/error should not be mocked
-  Use it to simulate API error responses from other mocks by throwing CanvaError instances
-  This allows testing of error handling scenarios
-*/

package/templates/mls/package.json

@@ -1,117 +0,0 @@
-{
-  "private": true,
-  "name": "real_estate_mls",
-  "description": "A Real Estate MLS reference app built with the Canva Apps SDK.",
-  "license": "SEE LICENSE IN LICENSE.md",
-  "author": "Canva Pty Ltd.",
-  "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",
-    "@tanstack/react-query": "5.87.1",
-    "@types/react-infinite-scroller": "1.2.5",
-    "clsx": "2.1.1",
-    "loglevel": "1.9.2",
-    "react": "^19.2.3",
-    "react-dom": "^19.2.3",
-    "react-hook-form": "7.66.0",
-    "react-infinite-scroller": "1.2.6",
-    "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/jest-dom": "6.8.0",
-    "@testing-library/react": "16.3.0",
-    "@testing-library/user-event": "14.6.1",
-    "@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",
-    "@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"
-  },
-  "overrides": {
-    "react-infinite-scroller": {
-      "react": "$react"
-    }
-  },
-  "keywords": [
-    "canva-apps-sdk"
-  ],
-  "engines": {
-    "node": "^18 || ^20.10.0",
-    "npm": "^9 || ^10"
-  },
-  "canvaCliMetadata": {
-    "name": "@canva/cli",
-    "version": "1.1.0"
-  }
-}