@canva/cli 1.19.0 → 1.20.0

package/templates/content_publisher/src/intents/content_publisher/settings_ui.tsx

@@ -1,81 +0,0 @@
-import { FormField, Rows, Text, TextInput } from "@canva/app-ui-kit";
-import type {
-  PublishRefValidityState,
-  PublishSettingsSettingsUiContext,
-  RenderSettingsUiRequest,
-} from "@canva/intents/content";
-import { useCallback, useEffect, useState } from "react";
-import { useIntl } from "react-intl";
-import * as styles from "styles/components.css";
-import type { PublishSettings } from "./types";
-
-// Settings UI component for configuring publish settings
-export const SettingsUi = ({
-  updatePublishSettings,
-  registerOnContextChange,
-}: RenderSettingsUiRequest) => {
-  const intl = useIntl();
-  const [settings, setSettings] = useState<PublishSettings>({ caption: "" });
-  const [settingsUiContext, setSettingsUiContext] =
-    useState<PublishSettingsSettingsUiContext | null>(null);
-
-  // Listen for settings UI context changes (e.g., when output type changes)
-  useEffect(() => {
-    const dispose = registerOnContextChange({
-      onContextChange: (context) => {
-        if (context.reason !== "publish_settings") return;
-        setSettingsUiContext(context);
-      },
-    });
-    return dispose;
-  }, [registerOnContextChange]);
-
-  // Helper function to both set the settings locally and propagate them to Canva
-  const setAndPropagateSettings = useCallback(
-    (updatedSettings: PublishSettings) => {
-      setSettings(updatedSettings);
-      updatePublishSettings({
-        publishRef: JSON.stringify(updatedSettings),
-        validityState: validatePublishRef(updatedSettings),
-      });
-    },
-    [updatePublishSettings],
-  );
-
-  return (
-    <div className={styles.scrollContainer}>
-      <Rows spacing="2u">
-        {settingsUiContext?.outputType.displayName && (
-          <Text>{settingsUiContext?.outputType.displayName}</Text>
-        )}
-        <FormField
-          label={intl.formatMessage({
-            defaultMessage: "Caption",
-            description: "Label for the caption input field",
-          })}
-          control={(props) => (
-            <TextInput
-              {...props}
-              value={settings.caption}
-              onChange={(caption) => {
-                setAndPropagateSettings({ ...settings, caption });
-              }}
-            />
-          )}
-        />
-      </Rows>
-    </div>
-  );
-};
-
-// Validates the publish settings to enable/disable the publish button
-// Returns "valid" when all required fields are filled
-const validatePublishRef = (
-  publishRef: PublishSettings,
-): PublishRefValidityState => {
-  // caption is required
-  if (publishRef.caption.length === 0) {
-    return "invalid_missing_required_fields";
-  }
-  return "valid";
-};

package/templates/content_publisher/src/intents/content_publisher/types.ts

@@ -1,29 +0,0 @@
-/**
- * Type definition for publish settings.
- * These settings are serialized and passed between different parts of the publish flow.
- * In production, include all platform-specific settings needed for publishing.
- */
-export interface PublishSettings {
-  caption: string;
-  // TODO: Add additional fields for your platform's publishing requirements
-  // Examples:
-  // scheduledTime: Date;
-  // visibility: "public" | "private" | "unlisted";
-  // tags: string[];
-}
-
-/**
- * Utility function to safely parse publish settings from a JSON string.
- * This is used to deserialize settings that were passed through the publish flow.
- */
-export function parsePublishSettings(
-  publishRef?: string,
-): PublishSettings | undefined {
-  if (!publishRef) return undefined;
-
-  try {
-    return JSON.parse(publishRef) as PublishSettings;
-  } catch {
-    return undefined;
-  }
-}

package/templates/content_publisher/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/content_publisher/styles/preview_ui.css

@@ -1,49 +0,0 @@
-/* Scale down preview on mobile devices */
-@media (max-width: 600px) {
-  .container {
-    transform: scale(0.3);
-  }
-}
-
-/* User profile section styling */
-.user {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-/* Avatar styling to match social media appearance */
-.avatar {
-  transform: scale(0.6);
-  width: 24px;
-  height: 24px;
-  transform-origin: top left;
-}
-
-/* Text placeholder for loading states */
-.textPlaceholder {
-  min-width: calc(8 * 20);
-}
-
-/* Container for media images */
-.imageContainer {
-  overflow: hidden; /* Enable border radius */
-}
-
-/* Row containing all images */
-.imageRow {
-  overflow-y: hidden;
-  overflow-x: auto;
-  height: 400px;
-  display: flex;
-}
-
-/* Individual image and placeholder styling */
-.imagePlaceholder,
-.image {
-  width: 400px;
-  height: 400px;
-  object-fit: cover;
-  display: inline-block;
-  position: relative;
-}

package/templates/content_publisher/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/content_publisher/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/dam/backend/routers/dam.ts

@@ -1,108 +0,0 @@
-import type { Container, Resource } from "@canva/app-components";
-import crypto from "crypto";
-import express from "express";
-
-/**
- * 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);
-  const hashBuffer = await crypto.subtle.digest("SHA-256", msgUint8);
-  const hashArray = Array.from(new Uint8Array(hashBuffer));
-  const hashHex = hashArray
-    .map((b) => b.toString(16).padStart(2, "0"))
-    .join("");
-  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",
-  "https://images.pexels.com/photos/7195267/pexels-photo-7195267.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2",
-  "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();
-
-  /*
-    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) => {
-    /*
-      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,
-      locale,
-      // other available fields from the `FindResourcesRequest`
-      // containerTypes,
-      // limit,
-      // filters,
-      // query,
-      // sort,
-      // tab,
-      // containerId,
-      // parentContainerType,
-    } = req.body;
-
-    let resources: Resource[] = [];
-
-    // Handle image resource requests
-    if (types.includes("IMAGE")) {
-      resources = await Promise.all(
-        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(
-          { length: 10 },
-          async (_, i) =>
-            ({
-              id: await generateHash(i + ""),
-              containerType: "folder",
-              name: `My folder ${i}`,
-              type: "CONTAINER",
-            }) satisfies Container,
-        ),
-      );
-
-      resources = resources.concat(containers);
-    }
-
-    // Send response with resources and pagination token
-    res.send({
-      resources,
-      continuation: +(continuation || 0) + 1,
-    });
-  });
-
-  return router;
-};

package/templates/dam/backend/server.ts

@@ -1,65 +0,0 @@
-import { user } from "@canva/app-middleware/express";
-import cors from "cors";
-import express from "express";
-import { createBaseServer } from "../utils/backend/base_backend/create";
-import { createDamRouter } from "./routers/dam";
-
-async function main() {
-  // TODO: Set the CANVA_APP_ID environment variable in the project's .env file
-  const APP_ID = process.env.CANVA_APP_ID;
-
-  if (!APP_ID) {
-    throw new Error(
-      `The CANVA_APP_ID environment variable is undefined. Set the variable in the project's .env file.`,
-    );
-  }
-
-  const router = express.Router();
-
-  /**
-   * TODO: Configure your CORS Policy
-   *
-   * Cross-Origin Resource Sharing
-   * ([CORS](https://developer.mozilla.org/en-US/docs/Glossary/CORS)) is an
-   * [HTTP](https://developer.mozilla.org/en-US/docs/Glossary/HTTP)-header based
-   * mechanism that allows a server to indicate any
-   * [origins](https://developer.mozilla.org/en-US/docs/Glossary/Origin)
-   * (domain, scheme, or port) other than its own from which a browser should
-   * permit loading resources.
-   *
-   * A basic CORS configuration would include the origin of your app in the
-   * following example:
-   * const corsOptions = {
-   *   origin: 'https://app-abcdefg.canva-apps.com',
-   *   optionsSuccessStatus: 200
-   * }
-   *
-   * The origin of your app is https://app-${APP_ID}.canva-apps.com, and note
-   * that the APP_ID should to be converted to lowercase.
-   *
-   * https://www.npmjs.com/package/cors#configuring-cors
-   *
-   * You may need to include multiple permissible origins, or dynamic origins
-   * based on the environment in which the server is running. Further
-   * information can be found
-   * [here](https://www.npmjs.com/package/cors#configuring-cors-w-dynamic-origin).
-   */
-  router.use(cors());
-
-  /**
-   * Initialize JWT middleware to verify Canva user tokens
-   * This middleware validates tokens sent from the frontend and extracts user information
-   */
-  router.use(user.verifyToken({ appId: APP_ID }));
-
-  /**
-   * Add routes for digital asset management.
-   */
-  const damRouter = createDamRouter();
-  router.use(damRouter);
-
-  const server = createBaseServer(router);
-  server.start(process.env.CANVA_BACKEND_PORT);
-}
-
-main();

package/templates/dam/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:asset:private:write",
-        "type": "mandatory"
-      },
-      {
-        "name": "canva:design:content:read",
-        "type": "mandatory"
-      },
-      {
-        "name": "canva:design:content:write",
-        "type": "mandatory"
-      }
-    ]
-  },
-  "intent": {
-    "design_editor": {
-      "enrolled": true
-    }
-  }
-}