@canva/cli 1.10.0 → 1.12.0

package/templates/common/utils/use_selection_hook.ts

@@ -1,37 +0,0 @@
-import { selection as designSelection } from "@canva/design";
-import type { SelectionEvent, SelectionScope } from "@canva/design";
-import { useEffect, useState } from "react";
-
-/**
- * Returns a selection event, representing a user selection of the specified content type. The
- * event contains methods to read a snapshot of the selected content, and optionally mutate it.
- * This is a reactive value. Calling this multiple times will return different instances
- * representing the same selection.
- * @param scope The type of content to listen for selection changes on
- */
-export function useSelection<S extends SelectionScope>(
-  scope: S,
-): SelectionEvent<S> {
-  const [selection, setSelection] = useState<SelectionEvent<S>>({
-    scope,
-    count: 0,
-    read() {
-      return Promise.resolve({
-        contents: Object.freeze([]),
-        save() {
-          return Promise.resolve();
-        },
-      });
-    },
-  });
-
-  useEffect(() => {
-    const disposer = designSelection.registerOnChange({
-      scope,
-      onChange: setSelection,
-    });
-    return disposer;
-  }, [scope]);
-
-  return selection;
-}

package/templates/gen_ai/backend/database/database.ts

@@ -1,42 +0,0 @@
-import fs from "fs/promises";
-import path from "path";
-
-/**
- * This file creates a "database" out of a JSON file. It's only for
- * demonstration purposes. A real app should use a real database.
- */
-const DATABASE_FILE_PATH = path.join(__dirname, "db.json");
-
-interface Database<T> {
-  read(): Promise<T>;
-  write(data: T): Promise<void>;
-}
-
-export class JSONFileDatabase<T> implements Database<T> {
-  constructor(private readonly seedData: T) {}
-
-  // Creates a database file if one doesn't already exist
-  private async init(): Promise<void> {
-    try {
-      // Do nothing, since the database is initialized
-      await fs.stat(DATABASE_FILE_PATH);
-    } catch {
-      const file = JSON.stringify(this.seedData);
-      await fs.writeFile(DATABASE_FILE_PATH, file);
-    }
-  }
-
-  // Loads and parses the database file
-  async read(): Promise<T> {
-    await this.init();
-    const file = await fs.readFile(DATABASE_FILE_PATH, "utf8");
-    return JSON.parse(file);
-  }
-
-  // Overwrites the database file with provided data
-  async write(data: T): Promise<void> {
-    await this.init();
-    const file = JSON.stringify(data);
-    await fs.writeFile(DATABASE_FILE_PATH, file);
-  }
-}

package/templates/gen_ai/utils/backend/bearer_middleware/bearer_middleware.ts

@@ -1,99 +0,0 @@
-/* eslint-disable no-console */
-import debug from "debug";
-import type { NextFunction, Request, Response } from "express";
-
-/**
- * Prefix your start command with `DEBUG=express:middleware:bearer` to enable debug logging
- * for this middleware
- */
-const debugLogger = debug("express:middleware:bearer");
-
-/**
- * Augment the Express request context to include the appId/userId/brandId fields decoded
- * from the JWT.
- */
-declare module "express-serve-static-core" {
-  export interface Request {
-    user_id: string;
-  }
-}
-
-const sendUnauthorizedResponse = (res: Response, message?: string) =>
-  res.status(401).json({ error: "unauthorized", message });
-
-/**
- * An Express.js middleware verifying a Bearer token.
- * This middleware extracts the token from the `Authorization` header.
- *
- * @param getTokenFromRequest - A function that extracts a token from the request. If a token isn't found, throw a `JWTAuthorizationError`.
- * @returns An Express.js middleware for verifying and decoding JWTs.
- */
-export function createBearerMiddleware(
-  tokenToUser: (access_token: string) => Promise<string | undefined>,
-  getTokenFromRequest: GetTokenFromRequest = getTokenFromHttpHeader,
-): (req: Request, res: Response, next: NextFunction) => void {
-  return async (req, res, next) => {
-    try {
-      debugLogger(`processing token for '${req.url}'`);
-
-      const token = await getTokenFromRequest(req);
-      const user = await tokenToUser(token);
-
-      if (!user) {
-        throw new AuthorizationError("Token is invalid");
-      }
-
-      req["user_id"] = user;
-
-      return next();
-    } catch (e) {
-      if (e instanceof AuthorizationError) {
-        return sendUnauthorizedResponse(res, e.message);
-      }
-
-      return next(e);
-    }
-  };
-}
-
-export type GetTokenFromRequest = (req: Request) => Promise<string> | string;
-
-export const getTokenFromHttpHeader: GetTokenFromRequest = (
-  req: Request,
-): string => {
-  // The names of a HTTP header bearing the JWT, and a scheme
-  const headerName = "Authorization";
-  const schemeName = "Bearer";
-
-  const header = req.header(headerName);
-  if (!header) {
-    throw new AuthorizationError(`Missing the "${headerName}" header`);
-  }
-
-  if (!header.match(new RegExp(`^${schemeName}\\s+[^\\s]+$`, "i"))) {
-    console.trace(
-      `jwtMiddleware: failed to match token in "${headerName}" header`,
-    );
-    throw new AuthorizationError(
-      `Missing a "${schemeName}" token in the "${headerName}" header`,
-    );
-  }
-
-  const token = header.replace(new RegExp(`^${schemeName}\\s+`, "i"), "");
-
-  return token;
-};
-
-/**
- * A class representing JWT validation errors in the JWT middleware.
- * The error message provided to the constructor will be forwarded to the
- * API consumer trying to access a JWT-protected endpoint.
- * @private
- */
-export class AuthorizationError extends Error {
-  constructor(message: string) {
-    super(message);
-
-    Object.setPrototypeOf(this, AuthorizationError.prototype);
-  }
-}

package/templates/gen_ai/utils/backend/bearer_middleware/index.ts

@@ -1 +0,0 @@
-export { createBearerMiddleware } from "./bearer_middleware";

package/templates/hello_world/utils/use_add_element.ts

@@ -1,58 +0,0 @@
-import type {
-  EmbedElement,
-  ImageElement,
-  RichtextElement,
-  TableElement,
-  TextElement,
-  VideoElement,
-} from "@canva/design";
-import { addElementAtCursor, addElementAtPoint } from "@canva/design";
-import { features } from "@canva/platform";
-import { useEffect, useState } from "react";
-import { useFeatureSupport } from "./use_feature_support";
-
-type AddElementParams =
-  | ImageElement
-  | VideoElement
-  | EmbedElement
-  | TextElement
-  | RichtextElement
-  | TableElement;
-
-export const useAddElement = () => {
-  const isSupported = useFeatureSupport();
-
-  // Store a wrapped addElement function that checks feature support
-  const [addElement, setAddElement] = useState(() => {
-    return (element: AddElementParams) => {
-      if (features.isSupported(addElementAtPoint)) {
-        return addElementAtPoint(element);
-      } else if (features.isSupported(addElementAtCursor)) {
-        return addElementAtCursor(element);
-      }
-      // eslint-disable-next-line no-console
-      console.warn(
-        "Neither addElementAtPoint nor addElementAtCursor are supported",
-      );
-      return Promise.resolve();
-    };
-  });
-
-  useEffect(() => {
-    const addElement = (element: AddElementParams) => {
-      if (isSupported(addElementAtPoint)) {
-        return addElementAtPoint(element);
-      } else if (isSupported(addElementAtCursor)) {
-        return addElementAtCursor(element);
-      }
-      // eslint-disable-next-line no-console
-      console.warn(
-        "Neither addElementAtPoint nor addElementAtCursor are supported",
-      );
-      return Promise.resolve();
-    };
-    setAddElement(() => addElement);
-  }, [isSupported]);
-
-  return addElement;
-};

package/templates/hello_world/utils/use_feature_support.ts

@@ -1,28 +0,0 @@
-import { features } from "@canva/platform";
-import type { Feature } from "@canva/platform";
-import { useEffect, useState } from "react";
-
-/**
- * This hook allows re-rendering of a React component whenever
- * the state of feature support changes in Canva.
- *
- * @returns isSupported - callback to inspect a Canva SDK method.
- **/
-export function useFeatureSupport() {
-  // Store a wrapped function that checks feature support
-  const [isSupported, setIsSupported] = useState(() => {
-    return (...args: Feature[]) => features.isSupported(...args);
-  });
-
-  useEffect(() => {
-    // create new function ref when feature support changes to trigger
-    // re-render
-    return features.registerOnSupportChange(() => {
-      setIsSupported(() => {
-        return (...args: Feature[]) => features.isSupported(...args);
-      });
-    });
-  }, []);
-
-  return isSupported;
-}