@canva/cli 0.0.1-beta.2 → 0.0.1-beta.21

package/templates/dam/src/config.ts

@@ -1,95 +1,217 @@
 import type { Config } from "@canva/app-components";
+import { useIntl } from "react-intl";
 
 type ContainerTypes = "folder";
-export const config: Config<ContainerTypes> = {
-  serviceName: "Example App",
-  search: {
-    enabled: true,
-    filterFormConfig: {
-      containerTypes: ["folder"],
-      filters: [
-        {
-          filterType: "CHECKBOX",
-          label: "File Type",
-          key: "fileType",
-          options: [
-            { value: "mp4", label: "MP4" },
-            { value: "png", label: "PNG" },
-            { value: "jpeg", label: "JPEG" },
-          ],
-          allowCustomValue: true,
-        },
-        {
-          filterType: "RADIO",
-          label: "Size",
-          key: "size",
-          options: [
-            {
-              label: "Large (800+ px)",
-              value: "large",
-            },
-            {
-              label: "Medium (200-799px)",
-              value: "medium",
-            },
-          ],
-          allowCustomValue: true,
-          customValueInputType: "SIZE_RANGE",
-        },
-        {
-          filterType: "RADIO",
-          label: "Update Date",
-          key: "updateDate",
-          options: [
-            { value: ">now-30m", label: "Last 30 Minutes" },
-            { value: ">now-7d", label: "Last 7 days" },
-          ],
-          allowCustomValue: true,
-          customValueInputType: "DATE_RANGE",
-        },
-        {
-          filterType: "RADIO",
-          label: "Design Status",
-          key: "designStatus",
-          options: [
-            { value: "approved", label: "Approved" },
-            { value: "rejected", label: "Rejected" },
-            { value: "draft", label: "Draft" },
-          ],
-          allowCustomValue: true,
-          customValueInputType: "PLAIN_TEXT",
-        },
-      ],
+export const useConfig = (): Config<ContainerTypes> => {
+  const intl = useIntl();
+  return {
+    serviceName: intl.formatMessage({
+      defaultMessage: "Example App",
+      description:
+        "Name of the service where the app will pull digital assets from",
+    }),
+    search: {
+      enabled: true,
+      filterFormConfig: {
+        containerTypes: ["folder"],
+        filters: [
+          {
+            filterType: "CHECKBOX",
+            label: intl.formatMessage({
+              defaultMessage: "File Type",
+              description: "Label of filters for file type",
+            }),
+            key: "fileType",
+            options: [
+              { value: "mp4", label: "MP4" },
+              { value: "png", label: "PNG" },
+              { value: "jpeg", label: "JPEG" },
+            ],
+            allowCustomValue: true,
+          },
+          {
+            filterType: "RADIO",
+            label: intl.formatMessage({
+              defaultMessage: "Size",
+              description: "Label of filters for asset size",
+            }),
+            key: "size",
+            options: [
+              {
+                label: intl.formatMessage({
+                  defaultMessage: "Large (800+ px)",
+                  description: "One of the filter options for asset size",
+                }),
+                value: "large",
+              },
+              {
+                label: intl.formatMessage({
+                  defaultMessage: "Medium (200-799px)",
+                  description: "One of the filter options for asset size",
+                }),
+                value: "medium",
+              },
+            ],
+            allowCustomValue: true,
+            customValueInputType: "SIZE_RANGE",
+          },
+          {
+            filterType: "RADIO",
+            label: intl.formatMessage({
+              defaultMessage: "Update Date",
+              description: "Label of the filters for asset's update date",
+            }),
+            key: "updateDate",
+            options: [
+              {
+                value: ">now-30m",
+                label: intl.formatMessage({
+                  defaultMessage: "Last 30 Minutes",
+                  description:
+                    "One of the filter options for asset update date",
+                }),
+              },
+              {
+                value: ">now-7d",
+                label: intl.formatMessage({
+                  defaultMessage: "Last 7 days",
+                  description:
+                    "One of the filter options for asset update date",
+                }),
+              },
+            ],
+            allowCustomValue: true,
+            customValueInputType: "DATE_RANGE",
+          },
+          {
+            filterType: "RADIO",
+            label: intl.formatMessage({
+              defaultMessage: "Design Status",
+              description: "Label of the filters for asset's design status",
+            }),
+            key: "designStatus",
+            options: [
+              {
+                value: "approved",
+                label: intl.formatMessage({
+                  defaultMessage: "Approved",
+                  description:
+                    "One of the filter options for asset design status",
+                }),
+              },
+              {
+                value: "rejected",
+                label: intl.formatMessage({
+                  defaultMessage: "Rejected",
+                  description:
+                    "One of the filter options for asset design status",
+                }),
+              },
+              {
+                value: "draft",
+                label: intl.formatMessage({
+                  defaultMessage: "Draft",
+                  description:
+                    "One of the filter options for asset design status",
+                }),
+              },
+            ],
+            allowCustomValue: true,
+            customValueInputType: "PLAIN_TEXT",
+          },
+        ],
+      },
     },
-  },
-  containerTypes: [
-    {
-      value: "folder",
-      label: "Folders",
-      listingSurfaces: [
-        { surface: "HOMEPAGE" },
-        {
-          surface: "CONTAINER",
-          parentContainerTypes: ["folder"],
+    containerTypes: [
+      {
+        value: "folder",
+        label: intl.formatMessage({
+          defaultMessage: "Folders",
+          description: "Name of the asset container type",
+        }),
+        listingSurfaces: [
+          { surface: "HOMEPAGE" },
+          {
+            surface: "CONTAINER",
+            parentContainerTypes: ["folder"],
+          },
+          { surface: "SEARCH" },
+        ],
+        searchInsideContainer: {
+          enabled: true,
+          placeholder: intl.formatMessage({
+            defaultMessage: "Search for media inside this folder",
+            description: "Placeholder of a search input box",
+          }),
         },
-        { surface: "SEARCH" },
-      ],
-      searchInsideContainer: {
-        enabled: true,
-        placeholder: "Search for resources inside this folder",
       },
+    ],
+    sortOptions: [
+      {
+        value: "created_at DESC",
+        label: intl.formatMessage({
+          defaultMessage: "Creation date (newest)",
+          description: "One of the sort options",
+        }),
+      },
+      {
+        value: "created_at ASC",
+        label: intl.formatMessage({
+          defaultMessage: "Creation date (oldest)",
+          description: "One of the sort options",
+        }),
+      },
+      {
+        value: "updated_at DESC",
+        label: intl.formatMessage({
+          defaultMessage: "Updated (newest)",
+          description: "One of the sort options",
+        }),
+      },
+      {
+        value: "updated_at ASC",
+        label: intl.formatMessage({
+          defaultMessage: "Updated (oldest)",
+          description: "One of the sort options",
+        }),
+      },
+      {
+        value: "name ASC",
+        label: intl.formatMessage({
+          defaultMessage: "Name (A-Z)",
+          description: "One of the sort options",
+        }),
+      },
+      {
+        value: "name DESC",
+        label: intl.formatMessage({
+          defaultMessage: "Name (Z-A)",
+          description: "One of the sort options",
+        }),
+      },
+    ],
+    layouts: ["MASONRY", "LIST"],
+    resourceTypes: ["IMAGE", "VIDEO", "EMBED"],
+    moreInfoMessage: intl.formatMessage({
+      defaultMessage:
+        "At the moment, we only support images and videos. Corrupted and unsupported files will not appear.",
+      description: "Helper text to explain why some assets are not visible",
+    }),
+    // TODO remove `export` if your app does not support exporting the Canva design into an external platform
+    export: {
+      enabled: true,
+      // TODO provide a container type that user can choose to save into, or remove this field if user doesn't need to choose a container
+      containerTypes: ["folder"],
+      // TODO remove file types that are not supported by your platform
+      acceptedFileTypes: [
+        "png",
+        "pdf_standard",
+        "jpg",
+        "gif",
+        "svg",
+        "video",
+        "pptx",
+      ],
     },
-  ],
-  sortOptions: [
-    { value: "created_at DESC", label: "Creation date (newest)" },
-    { value: "created_at ASC", label: "Creation date (oldest)" },
-    { value: "updated_at DESC", label: "Updated (newest)" },
-    { value: "updated_at ASC", label: "Updated (oldest)" },
-    { value: "name ASC", label: "Name (A-Z)" },
-    { value: "name DESC", label: "Name (Z-A)" },
-  ],
-  layouts: ["MASONRY", "LIST"],
-  resourceTypes: ["IMAGE", "VIDEO", "EMBED"],
-  moreInfoMessage:
-    "At the moment, we only support images and videos. Corrupted and unsupported files will not appear.",
+  };
 };

package/templates/{hello_world/webpack.config.cjs → dam/webpack.config.ts}

@@ -1,30 +1,33 @@
-require("dotenv").config();
-const path = require("path");
-const TerserPlugin = require("terser-webpack-plugin");
-const { DefinePlugin, optimize } = require("webpack");
-const chalk = require("chalk");
-const { transform } = require("@formatjs/ts-transformer");
+import type { Configuration } from "webpack";
+import { DefinePlugin, optimize } from "webpack";
+import * as path from "path";
+import * as TerserPlugin from "terser-webpack-plugin";
+import { transform } from "@formatjs/ts-transformer";
+import * as chalk from "chalk";
+import { config } from "dotenv";
+import { Configuration as DevServerConfiguration } from "webpack-dev-server";
 
-/**
- *
- * @param {Object} [options]
- * @param {string} [options.appEntry=./src/index.tsx]
- * @param {string} [options.backendHost]
- * @param {Object} [options.devConfig]
- * @param {number} [options.devConfig.port]
- * @param {boolean} [options.devConfig.enableHmr]
- * @param {boolean} [options.devConfig.enableHttps]
- * @param {string} [options.devConfig.appOrigin]
- * @param {string} [options.devConfig.appId] - Deprecated in favour of appOrigin
- * @param {string} [options.devConfig.certFile]
- * @param {string} [options.devConfig.keyFile]
- * @returns {Object}
- */
-function buildConfig({
+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,
-} = {}) {
+}: {
+  devConfig?: DevConfig;
+  appEntry?: string;
+  backendHost?: string;
+} = {}): Configuration & DevServerConfiguration {
   const mode = devConfig ? "development" : "production";
 
   if (!backendHost) {
@@ -173,32 +176,23 @@ function buildConfig({
       }),
       // Apps can only submit a single JS file via the developer portal
       new optimize.LimitChunkCountPlugin({ maxChunks: 1 }),
-    ],
+    ].filter(Boolean),
     ...buildDevConfig(devConfig),
   };
 }
 
-/**
- *
- * @param {Object} [options]
- * @param {number} [options.port]
- * @param {boolean} [options.enableHmr]
- * @param {boolean} [options.enableHttps]
- * @param {string} [options.appOrigin]
- * @param {string} [options.appId] - Deprecated in favour of appOrigin
- * @param {string} [options.certFile]
- * @param {string} [options.keyFile]
- * @returns {Object|null}
- */
-function buildDevConfig(options) {
+function buildDevConfig(options?: DevConfig): {
+  devtool?: string;
+  devServer?: DevServerConfiguration;
+} {
   if (!options) {
-    return null;
+    return {};
   }
 
   const { port, enableHmr, appOrigin, appId, enableHttps, certFile, keyFile } =
     options;
 
-  let devServer = {
+  let devServer: DevServerConfiguration = {
     server: enableHttps
       ? {
           type: "https",
@@ -265,6 +259,4 @@ function buildDevConfig(options) {
   };
 }
 
-module.exports = () => buildConfig();
-
-module.exports.buildConfig = buildConfig;
+export default buildConfig;

package/templates/gen_ai/README.md

@@ -20,7 +20,7 @@ In this template, we've included a basic obscenity filter to stop users from cre
 
 ### Backend
 
-This template includes a simple Express server as a sample backend. Please note that this server is not production-ready, and we advise using it solely for instructional purposes to demonstrate API calls.
+This template includes a simple Express server as a sample backend. Please note that this server is not production-ready, and we advise using it solely for instructional purposes to demonstrate API calls. If you require authentication for your app, we recommend looking at the authentication example provided in the [starter kit](https://github.com/canva-sdks/canva-apps-sdk-starter-kit).
 
 ### Thumbnails
 

package/templates/gen_ai/backend/routers/image.ts

@@ -93,7 +93,7 @@ export const createImageRouter = () => {
 
   /**
    * GET endpoint to retrieve user credits.
-   * Requires authentication. Returns the current number of credits available to the user.
+   * Returns the current number of credits available to the user.
    */
   router.get(Routes.CREDITS, async (req, res) => {
     res.status(200).send({
@@ -103,7 +103,7 @@ export const createImageRouter = () => {
 
   /**
    * POST endpoint to purchase credits.
-   * Requires authentication. Increments the user's credits by the number of credits in a bundle.
+   * Increments the user's credits by the number of credits in a bundle.
    * This endpoint should be backed by proper input validation to prevent misuse.
    */
   router.post(Routes.PURCHASE_CREDITS, async (req, res) => {
@@ -115,7 +115,7 @@ export const createImageRouter = () => {
 
   /**
    * GET endpoint to generate images based on a prompt.
-   * Requires authentication. Generates images based on the provided prompt and adds a job to the processing queue.
+   * Generates images based on the provided prompt and adds a job to the processing queue.
    * If there are not enough credits, it returns a 403 error.
    * If the prompt parameter is missing, it returns a 400 error.
    * Once the job is added to the queue, it returns a jobId that can be used to check the job status.

package/templates/gen_ai/backend/server.ts

@@ -2,7 +2,6 @@ import * as express from "express";
 import * as cors from "cors";
 import { createBaseServer } from "../utils/backend/base_backend/create";
 import { createImageRouter } from "./routers/image";
-import { createAuthRouter } from "./routers/auth";
 
 async function main() {
   const router = express.Router();
@@ -37,12 +36,6 @@ async function main() {
    */
   router.use(cors());
 
-  /**
-   * Add routes for authorisation.
-   */
-  const authRouter = createAuthRouter();
-  router.use(authRouter);
-
   /**
    * Add routes for image generation.
    */

package/templates/gen_ai/eslint.config.mjs

@@ -2,8 +2,8 @@ import path from "node:path";
 import { fileURLToPath } from "node:url";
 import js from "@eslint/js";
 import { FlatCompat } from "@eslint/eslintrc";
-import general from "./conf/eslint-general.mjs";
-import i18n from "./conf/eslint-i18n.mjs";
+import general from "./conf/eslint_general.mjs";
+import i18n from "./conf/eslint_i18n.mjs";
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
@@ -20,8 +20,6 @@ export default [
       "**/dist",
       "**/*.d.ts",
       "**/*.d.tsx",
-      "**/sdk",
-      "**/internal",
       "**/*.config.*",
     ],
   },

package/templates/gen_ai/package.json

@@ -3,8 +3,8 @@
   "name": "gen_ai",
   "description": "An example app demonstrating common patterns that you might use in a generative AI app.",
   "scripts": {
-    "extract": "formatjs extract 'src/**/*.{ts,tsx}' --out-file dist/messages_en.json",
-    "build": "webpack --config webpack.config.cjs --mode production && npm run extract",
+    "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",
@@ -12,82 +12,96 @@
     "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:watch": "jest --watchAll",
+    "postinstall": "ts-node ./scripts/copy_env.ts"
   },
   "dependencies": {
-    "@canva/app-i18n-kit": "^0.0.1-beta.5",
-    "@canva/app-ui-kit": "^3.8.0",
-    "@canva/asset": "^1.7.1",
-    "@canva/design": "^1.10.0",
-    "@canva/platform": "^1.1.0",
-    "@canva/user": "^1.0.0",
-    "cookie-parser": "1.4.6",
+    "@canva/app-i18n-kit": "^1.0.2",
+    "@canva/app-ui-kit": "^4.8.0",
+    "@canva/asset": "^2.1.0",
+    "@canva/design": "^2.4.0",
+    "@canva/error": "^2.1.0",
+    "@canva/platform": "^2.1.0",
+    "@canva/user": "^2.1.0",
+    "cookie-parser": "1.4.7",
     "cors": "2.8.5",
-    "html-react-parser": "5.1.12",
-    "obscenity": "0.4.0",
+    "html-react-parser": "5.2.2",
+    "obscenity": "0.4.1",
     "react": "18.3.1",
     "react-dom": "18.3.1",
-    "react-error-boundary": "4.0.13",
-    "react-intl": "6.6.8",
-    "react-router-dom": "6.26.1"
+    "react-error-boundary": "4.1.2",
+    "react-intl": "6.8.7",
+    "react-router-dom": "6.28.0"
   },
   "devDependencies": {
-    "@eslint/eslintrc": "3.1.0",
-    "@eslint/js": "9.9.0",
-    "@formatjs/cli": "6.2.12",
-    "@formatjs/ts-transformer": "3.13.14",
+    "@canva/cli": ">= 0.0.1-beta.13 < 0.0.2",
+    "@eslint/eslintrc": "3.2.0",
+    "@eslint/js": "9.18.0",
+    "@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/debug": "4.1.12",
     "@types/express": "4.17.21",
-    "@types/express-serve-static-core": "4.19.5",
-    "@types/jest": "29.5.12",
-    "@types/jsonwebtoken": "9.0.6",
+    "@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.11",
+    "@types/node-fetch": "2.6.12",
     "@types/node-forge": "1.3.11",
     "@types/nodemon": "1.19.6",
     "@types/prompts": "2.4.9",
-    "@types/react": "18.3.4",
-    "@types/react-dom": "18.3.0",
+    "@types/react": "18.3.12",
+    "@types/react-dom": "18.3.1",
+    "@types/webpack": "5.28.5",
+    "@types/webpack-dev-server": "4.7.1",
     "@types/webpack-env": "1.18.5",
-    "@typescript-eslint/eslint-plugin": "8.2.0",
-    "@typescript-eslint/parser": "8.2.0",
+    "@typescript-eslint/eslint-plugin": "8.20.0",
+    "@typescript-eslint/parser": "8.20.0",
     "chalk": "4.1.2",
     "cli-table3": "0.6.5",
     "css-loader": "7.1.2",
     "css-modules-typescript-loader": "4.0.1",
-    "cssnano": "7.0.5",
-    "debug": "4.3.6",
-    "dotenv": "16.4.5",
-    "eslint": "8.57.1",
-    "eslint-plugin-formatjs": "4.13.3",
-    "eslint-plugin-jest": "28.8.0",
-    "eslint-plugin-react": "7.35.0",
+    "cssnano": "7.0.6",
+    "debug": "4.4.0",
+    "dotenv": "16.4.7",
+    "eslint": "9.18.0",
+    "eslint-plugin-formatjs": "5.2.8",
+    "eslint-plugin-jest": "28.11.0",
+    "eslint-plugin-react": "7.37.4",
+    "eslint-plugin-unicorn": "56.0.1",
     "exponential-backoff": "3.1.1",
-    "express": "4.19.2",
+    "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.1",
+    "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.3.3",
+    "prettier": "3.4.2",
     "prompts": "2.4.2",
+    "react-refresh": "0.16.0",
     "style-loader": "4.0.0",
-    "terser-webpack-plugin": "5.3.10",
-    "ts-jest": "29.2.4",
-    "ts-loader": "9.5.1",
+    "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.94.0",
+    "webpack": "5.97.1",
     "webpack-cli": "5.1.4",
-    "webpack-dev-server": "5.0.4",
+    "webpack-dev-server": "5.2.0",
     "yargs": "17.7.2"
   }
 }

package/templates/gen_ai/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);
+}