@canva/cli 0.0.1-beta.1

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

@@ -0,0 +1,234 @@
+/**
+ * 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 * as 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://cdn.pixabay.com/photo/2023/02/03/05/11/youtube-background-7764170_1280.jpg",
+    },
+    thumbnail: {
+      width: 640,
+      height: 427,
+      url: "https://cdn.pixabay.com/photo/2023/02/03/05/11/youtube-background-7764170_640.jpg",
+    },
+  },
+  {
+    fullsize: {
+      width: 1280,
+      height: 853,
+      url: "https://cdn.pixabay.com/photo/2023/02/03/05/12/youtube-background-7764172_1280.jpg",
+    },
+    thumbnail: {
+      width: 640,
+      height: 427,
+      url: "https://cdn.pixabay.com/photo/2023/02/03/05/12/youtube-background-7764172_640.jpg",
+    },
+  },
+  {
+    fullsize: {
+      width: 1280,
+      height: 853,
+      url: "https://cdn.pixabay.com/photo/2023/02/03/05/07/colorful-7764162_1280.jpg",
+    },
+    thumbnail: {
+      width: 640,
+      height: 427,
+      url: "https://cdn.pixabay.com/photo/2023/02/03/05/07/colorful-7764162_640.jpg",
+    },
+  },
+  {
+    fullsize: {
+      width: 1280,
+      height: 853,
+      url: "https://cdn.pixabay.com/photo/2023/02/03/04/57/swirls-7764142_1280.jpg",
+    },
+    thumbnail: {
+      width: 640,
+      height: 427,
+      url: "https://cdn.pixabay.com/photo/2023/02/03/04/57/swirls-7764142_640.jpg",
+    },
+  },
+];
+
+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.
+   * Requires authentication. 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.
+   * Requires authentication. 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.
+   * Requires authentication. 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 });
+
+    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);
+    if (index !== -1) {
+      cancelledJobs.push({ jobId });
+      // If the job is found, remove it from the jobQueue
+      const { timeoutId } = jobQueue[index];
+      jobQueue.splice(index, 1);
+      // Also clear the timeout associated with this job if it exists
+      if (timeoutId) {
+        clearTimeout(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

@@ -0,0 +1,56 @@
+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();
+
+  /**
+   * 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());
+
+  /**
+   * Add routes for authorisation.
+   */
+  const authRouter = createAuthRouter();
+  router.use(authRouter);
+
+  /**
+   * 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/declarations/declarations.d.ts

@@ -0,0 +1,29 @@
+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/gen_ai/eslint.config.mjs

@@ -0,0 +1,309 @@
+import typescriptEslint from "@typescript-eslint/eslint-plugin";
+import jest from "eslint-plugin-jest";
+import react from "eslint-plugin-react";
+import globals from "globals";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+import js from "@eslint/js";
+import { FlatCompat } from "@eslint/eslintrc";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+const compat = new FlatCompat({
+  baseDirectory: __dirname,
+  recommendedConfig: js.configs.recommended,
+  allConfig: js.configs.all,
+});
+
+export default [
+  {
+    ignores: [
+      "**/node_modules/",
+      "**/dist",
+      "**/*.d.ts",
+      "**/*.d.tsx",
+      "**/sdk",
+      "**/internal",
+      "**/*.config.*",
+    ],
+  },
+  ...compat.extends(
+    "eslint:recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:@typescript-eslint/eslint-recommended",
+    "plugin:@typescript-eslint/strict",
+    "plugin:@typescript-eslint/stylistic",
+    "plugin:react/recommended",
+    "plugin:jest/recommended"
+  ),
+  {
+    plugins: {
+      "@typescript-eslint": typescriptEslint,
+      jest,
+      react,
+    },
+    languageOptions: {
+      globals: {
+        ...globals.serviceworker,
+        ...globals.browser,
+      },
+    },
+    settings: {
+      react: {
+        version: "detect",
+      },
+    },
+    rules: {
+      "@typescript-eslint/no-non-null-assertion": "warn",
+      "@typescript-eslint/no-empty-function": "off",
+      "@typescript-eslint/consistent-type-imports": "error",
+      "@typescript-eslint/no-explicit-any": "warn",
+      "@typescript-eslint/no-empty-interface": "warn",
+      "@typescript-eslint/consistent-type-definitions": "off",
+      "@typescript-eslint/explicit-member-accessibility": [
+        "error",
+        {
+          accessibility: "no-public",
+          overrides: {
+            parameterProperties: "off",
+          },
+        },
+      ],
+      "@typescript-eslint/naming-convention": [
+        "error",
+        {
+          selector: "typeLike",
+          format: ["PascalCase"],
+          leadingUnderscore: "allow",
+        },
+      ],
+      "no-invalid-this": "off",
+      "@typescript-eslint/no-invalid-this": "error",
+      "@typescript-eslint/no-unused-expressions": [
+        "error",
+        {
+          allowShortCircuit: true,
+          allowTernary: true,
+        },
+      ],
+      "no-unused-vars": "off",
+      "@typescript-eslint/no-unused-vars": [
+        "error",
+        {
+          vars: "all",
+          varsIgnorePattern: "^_",
+          args: "none",
+          ignoreRestSiblings: true,
+        },
+      ],
+      "@typescript-eslint/no-require-imports": "error",
+      "jest/no-restricted-matchers": [
+        "error",
+        {
+          toContainElement:
+            "toContainElement is not recommended as it encourages testing the internals of the components",
+          toContainHTML:
+            "toContainHTML is not recommended as it encourages testing the internals of the components",
+          toHaveAttribute:
+            "toHaveAttribute is not recommended as it encourages testing the internals of the components",
+          toHaveClass:
+            "toHaveClass is not recommended as it encourages testing the internals of the components",
+          toHaveStyle:
+            "toHaveStyle is not recommended as it encourages testing the internals of the components",
+        },
+      ],
+      "react/jsx-curly-brace-presence": [
+        "error",
+        {
+          props: "never",
+          children: "never",
+        },
+      ],
+      "react/jsx-tag-spacing": [
+        "error",
+        {
+          closingSlash: "never",
+          beforeSelfClosing: "allow",
+          afterOpening: "never",
+          beforeClosing: "allow",
+        },
+      ],
+      "react/self-closing-comp": "error",
+      "react/no-unescaped-entities": "off",
+      "react/jsx-uses-react": "off",
+      "react/react-in-jsx-scope": "off",
+      "default-case": "error",
+      eqeqeq: [
+        "error",
+        "always",
+        {
+          null: "never",
+        },
+      ],
+      "no-caller": "error",
+      "no-console": "error",
+      "no-eval": "error",
+      "no-inner-declarations": "error",
+      "no-new-wrappers": "error",
+      "no-restricted-globals": [
+        "error",
+        {
+          name: "fit",
+          message: "Don't focus tests",
+        },
+        {
+          name: "fdescribe",
+          message: "Don't focus tests",
+        },
+        {
+          name: "length",
+          message:
+            "Undefined length - Did you mean to use window.length instead?",
+        },
+        {
+          name: "name",
+          message: "Undefined name - Did you mean to use window.name instead?",
+        },
+        {
+          name: "status",
+          message:
+            "Undefined status - Did you mean to use window.status instead?",
+        },
+        {
+          name: "spyOn",
+          message: "Don't use spyOn directly, use jest.spyOn",
+        },
+      ],
+      "no-restricted-properties": [
+        "error",
+        {
+          property: "bind",
+          message: "Don't o.f.bind(o, ...), use () => o.f(...)",
+        },
+        {
+          object: "ReactDOM",
+          property: "findDOMNode",
+          message: "Don't use ReactDOM.findDOMNode() as it is deprecated",
+        },
+      ],
+      "no-restricted-syntax": [
+        "error",
+        {
+          selector: "AccessorProperty, TSAbstractAccessorProperty",
+          message:
+            "Accessor property syntax is not allowed, use getter and setters.",
+        },
+        {
+          selector: "PrivateIdentifier",
+          message:
+            "Private identifiers are not allowed, use TypeScript private fields.",
+        },
+        {
+          selector:
+            "JSXOpeningElement[name.name = /^[A-Z]/] > JSXAttribute[name.name = /-/]",
+          message:
+            "Passing hyphenated props to custom components is not type-safe. Prefer a camelCased equivalent if available. (See https://github.com/microsoft/TypeScript/issues/55182)",
+        },
+        {
+          selector:
+            "CallExpression[callee.object.name='window'][callee.property.name='open']",
+          message:
+            "Apps are currently not allowed to open popups, or new tabs via browser APIs. Please use `requestOpenExternalUrl` from `@canva/platform` to link to external URLs. To learn more, see https://www.canva.dev/docs/apps/api/platform-request-open-external-url/",
+        },
+      ],
+      "no-return-await": "error",
+      "no-throw-literal": "error",
+      "no-undef-init": "error",
+      "no-var": "error",
+      "object-shorthand": "error",
+      "prefer-const": [
+        "error",
+        {
+          destructuring: "all",
+        },
+      ],
+      "prefer-object-spread": "error",
+      "prefer-rest-params": "error",
+      "prefer-spread": "error",
+      radix: "error",
+    },
+  },
+  {
+    files: ["**/*.tsx"],
+    rules: {
+      "react/no-deprecated": "error",
+      "react/forbid-elements": [
+        "error",
+        {
+          forbid: [
+            {
+              element: "video",
+              message:
+                "Don't use HTML video directly. Instead, use the App UI Kit <VideoCard /> as this respects users' auto-playing preferences",
+            },
+            {
+              element: "em",
+              message:
+                "Don't use <em> to italicize text. Canva's UI fonts don't support italic font style.",
+            },
+            {
+              element: "i",
+              message:
+                "Don't use <i> to italicize text. Canva's UI fonts don't support italic font style.",
+            },
+            {
+              element: "iframe",
+              message:
+                "Canva Apps aren't allowed to contain iframes. You should either recreate the UI you want to show in the iframe in the app directly, or link to your page via a `<Link>` tag.  For more info see https://www.canva.dev/docs/apps/content-security-policy/#what-is-and-isnt-allowed",
+            },
+            {
+              element: "script",
+              message:
+                "Script tags are not allowed in Canva SDK Apps. You should import JavaScript modules instead. For more info see https://www.canva.dev/docs/apps/content-security-policy/#what-is-and-isnt-allowed",
+            },
+            {
+              element: "a",
+              message:
+                "Don't use <a> tags. Instead, use the <Link> component from the App UI Kit, and remember to open the url via the requestOpenExternalUrl method from @canva/platform.",
+            },
+            {
+              element: "img",
+              message:
+                "Have you considered using <ImageCard /> from the App UI Kit instead?",
+            },
+            {
+              element: "embed",
+              message:
+                "Have you considered using <EmbedCard /> from the App UI Kit instead?",
+            },
+            {
+              element: "audio",
+              message:
+                "Have you considered using <AudioCard /> from the App UI Kit instead?",
+            },
+            {
+              element: "button",
+              message:
+                "Rather than using the native HTML <button> element, use the <Button> component from the App UI Kit for consistency and accessibility.",
+            },
+            {
+              element: "input",
+              message:
+                "Wherever possible, prefer using the form inputs from the App UI Kit for consistency and accessibility (TextInput, Checkbox, FileInput, etc).",
+            },
+            {
+              element: "base",
+              message:
+                "The <base> tag is not supported in Canva Apps. We recommend using hash-based routing. For more on what is and isn't allowed in Canva Apps see https://www.canva.dev/docs/apps/content-security-policy/#what-is-and-isnt-allowed",
+            },
+            {
+              element: "link",
+              message:
+                "If you're trying to include a css stylesheet, we recommend importing css using React, or using embedded stylesheets. For more on what is and isn't allowed in Canva Apps see https://www.canva.dev/docs/apps/content-security-policy/#what-is-and-isnt-allowed",
+            },
+          ],
+        },
+      ],
+    },
+  },
+];