@canva/cli 1.19.0 → 1.20.0

package/templates/data_connector/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/data_connector/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/data_connector/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/gen_ai/README.md

@@ -1,27 +0,0 @@
-## Generative AI Template
-
-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.
-
-### Loading state
-
-Creating AI assets can be time-consuming, often resulting in users facing extended waiting periods. Incorporating placeholders, a loading bar, and a message indicating the expected wait time can help alleviate the perceived wait time. We highly encourage adopting this approach and customizing it to suit your specific use case.
-
-### Obscenity filter
-
-In this template, we've included a basic obscenity filter to stop users from creating offensive or harmful content. However, you might need additional filters or checks after content generation to ensure it meets your standards.
-
-### 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. 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
-
-This template illustrates how your API could return thumbnails and demonstrates their usage within the code. Thumbnails play a crucial role in optimizing image uploads and previews by providing quick visual feedback and reducing load times.

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

@@ -1,232 +0,0 @@
-/**
- * DISCLAIMER:
- * This file contains a demonstration of how to implement a simple API with Express.js for educational purposes only.
- * It is NOT SUITABLE for use in a production environment. It lacks many essential features such as error handling,
- * input validation, authentication, and security measures. Additionally, the in-memory job queue is for illustrative
- * purposes only and is not efficient or scalable. For production use, consider using robust libraries and frameworks,
- * implementing proper error handling, security measures, and using appropriate database and job queue solutions.
- * Use this code as a learning resource, but do not deploy it in a real backend without significant modifications
- * to ensure reliability, security, and scalability.
- */
-import express from "express";
-
-interface ImageResponse {
-  fullsize: { width: number; height: number; url: string };
-  thumbnail: { width: number; height: number; url: string };
-}
-
-// Array of placeholder image URLs.
-// In a real-world scenario, these URLs would point to dynamically generated images.
-const imageUrls: ImageResponse[] = [
-  {
-    fullsize: {
-      width: 1280,
-      height: 853,
-      url: "https://images.pexels.com/photos/1145720/pexels-photo-1145720.jpeg?auto=compress&cs=tinysrgb&w=1280&h=853&dpr=2",
-    },
-    thumbnail: {
-      width: 640,
-      height: 427,
-      url: "https://images.pexels.com/photos/1145720/pexels-photo-1145720.jpeg?auto=compress&cs=tinysrgb&w=640&h=427&dpr=2",
-    },
-  },
-  {
-    fullsize: {
-      width: 1280,
-      height: 853,
-      url: "https://images.pexels.com/photos/4010108/pexels-photo-4010108.jpeg?auto=compress&cs=tinysrgb&w=1280&h=863&dpr=2",
-    },
-    thumbnail: {
-      width: 640,
-      height: 427,
-      url: "https://images.pexels.com/photos/4010108/pexels-photo-4010108.jpeg?auto=compress&cs=tinysrgb&w=640&h=427&dpr=2",
-    },
-  },
-  {
-    fullsize: {
-      width: 1280,
-      height: 853,
-      url: "https://images.pexels.com/photos/1327496/pexels-photo-1327496.jpeg?auto=compress&cs=tinysrgb&w=1280&h=853&dpr=2",
-    },
-    thumbnail: {
-      width: 640,
-      height: 427,
-      url: "https://images.pexels.com/photos/1327496/pexels-photo-1327496.jpeg?auto=compress&cs=tinysrgb&w=640&h=427&dpr=2",
-    },
-  },
-  {
-    fullsize: {
-      width: 1280,
-      height: 853,
-      url: "https://images.pexels.com/photos/4693135/pexels-photo-4693135.jpeg?auto=compress&cs=tinysrgb&w=1280&h=853&dpr=2",
-    },
-    thumbnail: {
-      width: 640,
-      height: 427,
-      url: "https://images.pexels.com/photos/4693135/pexels-photo-4693135.jpeg?auto=compress&cs=tinysrgb&w=640&h=427&dpr=2",
-    },
-  },
-];
-
-export const createImageRouter = () => {
-  const enum Routes {
-    CREDITS = "/api/credits",
-    PURCHASE_CREDITS = "/api/purchase-credits",
-    QUEUE_IMAGE_GENERATION = "/api/queue-image-generation",
-    JOB_STATUS = "/api/job-status",
-    CANCEL_JOB = "/api/job-status/cancel",
-  }
-
-  const router = express.Router();
-  const jobQueue: {
-    jobId: string;
-    prompt: string;
-    timeoutId: NodeJS.Timeout;
-  }[] = [];
-  const completedJobs: Record<string, ImageResponse[]> = {};
-  const cancelledJobs: { jobId: string }[] = [];
-
-  // Initial credit allocation for users, which decreases with each use.
-  // Users receive 10 credits initially and can purchase additional credits in bundles.
-  let credits = 10;
-  const CREDITS_IN_BUNDLE = 10;
-
-  /**
-   * GET endpoint to retrieve user credits.
-   * Returns the current number of credits available to the user.
-   */
-  router.get(Routes.CREDITS, async (req, res) => {
-    res.status(200).send({
-      credits,
-    });
-  });
-
-  /**
-   * POST endpoint to purchase credits.
-   * 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) => {
-    credits += CREDITS_IN_BUNDLE;
-    res.status(200).send({
-      credits,
-    });
-  });
-
-  /**
-   * GET endpoint to generate images based on a prompt.
-   * 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.
-   * Note: The job processing time is simulated to be 5 seconds.
-   */
-  router.get(Routes.QUEUE_IMAGE_GENERATION, async (req, res) => {
-    if (credits <= 0) {
-      return res
-        .status(403)
-        .send("Not enough credits required to generate images.");
-    }
-
-    const prompt = req.query.prompt as string;
-    if (!prompt) {
-      return res.status(400).send("Missing prompt parameter.");
-    }
-
-    const jobId = generateJobId();
-
-    const timeoutId = setTimeout(() => {
-      const index = jobQueue.findIndex((job) => job.jobId === jobId);
-      if (index !== -1) {
-        jobQueue.splice(index, 1);
-        completedJobs[jobId] = imageUrls.map((image) => {
-          return { ...image, label: prompt };
-        });
-
-        // Reduce credits by 1 when images are successfully generated
-        credits -= 1;
-      }
-    }, 5000); // Simulating 5 seconds processing time
-
-    // Add the job to the jobQueue along with the timeoutId
-    jobQueue.push({ jobId, prompt, timeoutId });
-
-    return res.status(200).send({
-      jobId,
-    });
-  });
-
-  /**
-   * GET endpoint to check the status of a job.
-   * Retrieves the status of a job identified by its jobId parameter.
-   * If the job is completed, it returns the images generated by the job.
-   * If the job is still in the processing queue, it returns "processing".
-   * If the job has been cancelled, it returns "cancelled".
-   * If the job is not found, it returns a 404 error.
-   */
-  router.get(Routes.JOB_STATUS, async (req, res) => {
-    const jobId = req.query.jobId as string;
-
-    if (!jobId) {
-      return res.status(400).send("Missing jobId parameter.");
-    }
-
-    if (completedJobs[jobId]) {
-      return res.status(200).send({
-        status: "completed",
-        images: completedJobs[jobId],
-        credits,
-      });
-    }
-
-    if (jobQueue.some((job) => job.jobId === jobId)) {
-      return res.status(200).send({
-        status: "processing",
-      });
-    }
-
-    if (cancelledJobs.some((job) => job.jobId === jobId)) {
-      return res.status(200).send({
-        status: "cancelled",
-      });
-    }
-
-    return res.status(404).send("Job not found.");
-  });
-
-  /**
-   * POST endpoint to cancel a job.
-   * Cancels a job identified by its jobId parameter.
-   * If the job is found and successfully cancelled, it removes the job from the processing queue and adds it to the cancelled jobs array.
-   * If the job is not found, it returns a 404 error.
-   */
-  router.post(Routes.CANCEL_JOB, async (req, res) => {
-    const jobId = req.query.jobId as string;
-
-    if (!jobId) {
-      return res.status(400).send("Missing jobId parameter.");
-    }
-
-    const index = jobQueue.findIndex((job) => job.jobId === jobId);
-    const job = jobQueue[index];
-    if (index !== -1 && job) {
-      cancelledJobs.push({ jobId });
-      // If the job is found, remove it from the jobQueue
-      jobQueue.splice(index, 1);
-      // Also clear the timeout associated with this job if it exists
-      clearTimeout(job.timeoutId);
-      return res.status(200).send("Job successfully cancelled.");
-    }
-
-    return res.status(404).send("Job not found.");
-  });
-
-  /**
-   * Generates a unique job ID.
-   */
-  function generateJobId(): string {
-    return Math.random().toString(36).substring(2, 15);
-  }
-
-  return router;
-};

package/templates/gen_ai/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 { createImageRouter } from "./routers/image";
-
-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 image generation.
-   */
-  const imageRouter = createImageRouter();
-  router.use(imageRouter);
-
-  const server = createBaseServer(router);
-  server.start(process.env.CANVA_BACKEND_PORT);
-}
-
-main();

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