@canva/cli 0.0.1-beta.7 → 0.0.1-beta.8

package/templates/common/utils/tests/table_wrapper.tests.ts

@@ -0,0 +1,252 @@
+import { TableWrapper } from "../table_wrapper";
+import type { Cell, TableElement } from "@canva/design";
+
+describe("TableWrapper", () => {
+  describe("create", () => {
+    it("should create a new table", () => {
+      const wrapper = TableWrapper.create(2, 3);
+      const element = wrapper.toElement();
+      expect(element.rows.length).toBe(2);
+      expect(element.rows[0].cells.length).toBe(3);
+      expect(element.rows[1].cells.length).toBe(3);
+    });
+    it("should throw an error if the row count is less than 1", () => {
+      expect(() => TableWrapper.create(0, 1)).toThrow();
+    });
+    it("should throw an error if the column count is less than 1", () => {
+      expect(() => TableWrapper.create(1, 0)).toThrow();
+    });
+    it("should throw an error if the number of cells exceeds 225", () => {
+      expect(() => TableWrapper.create(16, 15)).toThrow();
+    });
+  });
+
+  describe("fromElement", () => {
+    it("should create a table wrapper from an existing table element", () => {
+      const element: TableElement = {
+        type: "table",
+        rows: [
+          {
+            cells: [
+              { colSpan: 2, type: "empty" },
+              { type: "empty" },
+              { rowSpan: 2, type: "empty" },
+            ],
+          },
+          {
+            cells: [
+              {
+                type: "string",
+                value: "hello",
+              },
+              {
+                type: "empty",
+                attributes: { backgroundColor: "#ff00ff" },
+              },
+              { type: "empty" },
+            ],
+          },
+        ],
+      };
+      const wrapper = TableWrapper.fromElement(element);
+      expect(wrapper.toElement()).toEqual(element);
+
+      // Make sure the new element is not a reference
+      if (element.rows[1].cells[1]?.attributes) {
+        element.rows[1].cells[1].attributes.backgroundColor = "#ff0000";
+      }
+      expect(wrapper.toElement()).not.toEqual(element);
+    });
+    it("should throw an error if the element is not a table", () => {
+      const element = {
+        type: "TEXT",
+        children: ["hello"],
+      };
+      expect(() => {
+        TableWrapper.fromElement(element as unknown as TableElement);
+      }).toThrow();
+    });
+    it("should throw an error if the element has no rows", () => {
+      expect(() => {
+        TableWrapper.fromElement({
+          type: "TABLE",
+        } as unknown as TableElement);
+      }).toThrow();
+      expect(() => {
+        TableWrapper.fromElement({
+          type: "table",
+          rows: [],
+        });
+      }).toThrow();
+    });
+    it("should throw an error if any row of the element has no cells", () => {
+      const element: TableElement = {
+        type: "table",
+        rows: [{ cells: [] }],
+      };
+      expect(() => {
+        TableWrapper.fromElement(element);
+      }).toThrow();
+    });
+    it("should throw an error if number of cells is inconsistent", () => {
+      const element: TableElement = {
+        type: "table",
+        rows: [
+          { cells: [{ type: "empty" }, { type: "empty" }] },
+          { cells: [{ type: "empty" }] },
+        ],
+      };
+      expect(() => {
+        TableWrapper.fromElement(element);
+      }).toThrow();
+    });
+  });
+
+  describe("addRow", () => {
+    it("should add a row to the table", () => {
+      const wrapper = TableWrapper.create(2, 3);
+      wrapper.addRow(0);
+      const element = wrapper.toElement();
+      expect(element.rows.length).toBe(3);
+      expect(element.rows[0].cells.length).toBe(3);
+    });
+    it("should copy the fill value if top and bottom cells are the same", () => {
+      const wrapper = TableWrapper.create(2, 3);
+      wrapper.setCellDetails(1, 1, {
+        type: "empty",
+        attributes: { backgroundColor: "#ff0000" },
+      });
+      wrapper.setCellDetails(2, 1, {
+        type: "empty",
+        attributes: { backgroundColor: "#ff0000" },
+      });
+      wrapper.addRow(1);
+      const newCell = wrapper.getCellDetails(2, 1);
+      expect(newCell?.attributes).toBeDefined();
+      expect(newCell?.attributes?.backgroundColor).toBe("#ff0000");
+    });
+    it("should expand the row span if top and bottom cells belong to the same merged cell", () => {
+      const wrapper = TableWrapper.create(2, 3);
+      wrapper.setCellDetails(1, 1, { rowSpan: 2, type: "empty" });
+      wrapper.addRow(1);
+      const mergedCell = wrapper.getCellDetails(1, 1);
+      expect(mergedCell?.rowSpan).toBe(3);
+    });
+    it("should throw an error if the row position is out of bounds", () => {
+      const wrapper = TableWrapper.create(2, 3);
+      expect(() => wrapper.addRow(-1)).toThrow();
+      expect(() => wrapper.addRow(3)).toThrow();
+    });
+  });
+
+  describe("addColumn", () => {
+    it("should add a column to the table", () => {
+      const wrapper = TableWrapper.create(2, 3);
+      wrapper.addColumn(0);
+      const element = wrapper.toElement();
+      expect(element.rows.length).toBe(2);
+      expect(element.rows[0].cells.length).toBe(4);
+    });
+    it("should copy the fill value if left and right cells are the same", () => {
+      const wrapper = TableWrapper.create(2, 3);
+      wrapper.setCellDetails(1, 1, {
+        type: "empty",
+        attributes: { backgroundColor: "#ff0000" },
+      });
+      wrapper.setCellDetails(1, 2, {
+        type: "empty",
+        attributes: { backgroundColor: "#ff0000" },
+      });
+      wrapper.addColumn(1);
+      const newCell = wrapper.getCellDetails(1, 2);
+      expect(newCell?.attributes).toBeDefined();
+      expect(newCell?.attributes?.backgroundColor).toBe("#ff0000");
+    });
+    it("should expand the column span if left and right cells belong to the same merged cell", () => {
+      const wrapper = TableWrapper.create(2, 3);
+      wrapper.setCellDetails(1, 1, { type: "empty", colSpan: 2 });
+      wrapper.addColumn(1);
+      const mergedCell = wrapper.getCellDetails(1, 1);
+      expect(mergedCell?.colSpan).toBe(3);
+    });
+    it("should throw an error if the column position is out of bounds", () => {
+      const wrapper = TableWrapper.create(2, 3);
+      expect(() => wrapper.addColumn(-1)).toThrow();
+      expect(() => wrapper.addColumn(4)).toThrow();
+    });
+  });
+
+  describe("isGhostCell", () => {
+    it("should return true if the cell is a ghost cell", () => {
+      const wrapper = TableWrapper.create(2, 3);
+      wrapper.setCellDetails(1, 1, { type: "empty", colSpan: 2 });
+      expect(wrapper.isGhostCell(1, 1)).toBe(false);
+      expect(wrapper.isGhostCell(1, 2)).toBe(true);
+      expect(wrapper.isGhostCell(1, 3)).toBe(false);
+    });
+    it("should throw an error if the position is out of bounds", () => {
+      const wrapper = TableWrapper.create(2, 3);
+      expect(() => wrapper.isGhostCell(0, 1)).toThrow();
+      expect(() => wrapper.isGhostCell(3, 1)).toThrow();
+      expect(() => wrapper.isGhostCell(1, 0)).toThrow();
+      expect(() => wrapper.isGhostCell(1, 4)).toThrow();
+    });
+  });
+
+  describe("setCellDetails", () => {
+    it("should set the cell details", () => {
+      const wrapper = TableWrapper.create(2, 3);
+      wrapper.setCellDetails(1, 1, {
+        colSpan: 2,
+        rowSpan: 2,
+        type: "string",
+        value: "hello",
+        attributes: { backgroundColor: "#ff0000" },
+      });
+      expect(wrapper.isGhostCell(1, 1)).toBe(false);
+      expect(wrapper.isGhostCell(1, 2)).toBe(true);
+      expect(wrapper.isGhostCell(2, 1)).toBe(true);
+      expect(wrapper.isGhostCell(2, 2)).toBe(true);
+      const element = wrapper.toElement();
+      const firstCell = element.rows[0].cells[0] as Cell & {
+        type: "string";
+        value: string;
+      };
+      expect(firstCell?.type).toBe("string");
+      expect(firstCell.value).toBe("hello");
+      expect(firstCell.attributes).toBeDefined();
+      expect(firstCell.attributes?.backgroundColor).toBe("#ff0000");
+    });
+    it("should throw an error if the position is out of bounds", () => {
+      const wrapper = TableWrapper.create(2, 3);
+      expect(() => wrapper.setCellDetails(0, 1, { type: "empty" })).toThrow();
+      expect(() => wrapper.setCellDetails(3, 1, { type: "empty" })).toThrow();
+      expect(() => wrapper.setCellDetails(1, 0, { type: "empty" })).toThrow();
+      expect(() => wrapper.setCellDetails(1, 4, { type: "empty" })).toThrow();
+    });
+    it("should throw an error if the rowSpan is invalid", () => {
+      const wrapper = TableWrapper.create(2, 3);
+      expect(() =>
+        wrapper.setCellDetails(1, 1, { type: "empty", rowSpan: -1 }),
+      ).toThrow();
+      expect(() =>
+        wrapper.setCellDetails(1, 1, { type: "empty", rowSpan: 0 }),
+      ).toThrow();
+      expect(() =>
+        wrapper.setCellDetails(1, 1, { type: "empty", rowSpan: 3 }),
+      ).toThrow();
+    });
+    it("should throw an error if the colSpan is invalid", () => {
+      const wrapper = TableWrapper.create(2, 3);
+      expect(() =>
+        wrapper.setCellDetails(1, 1, { type: "empty", colSpan: -1 }),
+      ).toThrow();
+      expect(() =>
+        wrapper.setCellDetails(1, 1, { type: "empty", colSpan: 0 }),
+      ).toThrow();
+      expect(() =>
+        wrapper.setCellDetails(1, 1, { type: "empty", colSpan: 4 }),
+      ).toThrow();
+    });
+  });
+});

package/templates/common/utils/use_add_element.ts

@@ -0,0 +1,48 @@
+import type {
+  EmbedElement,
+  ImageElement,
+  RichtextElement,
+  TableElement,
+  TextElement,
+  VideoElement,
+} from "@canva/design";
+import { addElementAtCursor, addElementAtPoint } from "@canva/design";
+import { useFeatureSupport } from "./use_feature_support";
+import { features } from "@canva/platform";
+import { useEffect, useState } from "react";
+
+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);
+      }
+    };
+  });
+
+  useEffect(() => {
+    const addElement = (element: AddElementParams) => {
+      if (isSupported(addElementAtPoint)) {
+        return addElementAtPoint(element);
+      } else if (isSupported(addElementAtCursor)) {
+        return addElementAtCursor(element);
+      }
+    };
+    setAddElement(() => addElement);
+  }, [isSupported]);
+
+  return addElement;
+};

package/templates/common/utils/use_feature_support.ts

@@ -0,0 +1,28 @@
+import { features } from "@canva/platform";
+import type { Feature } from "@canva/platform";
+import { useState, useEffect } 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;
+}

package/templates/common/utils/use_overlay_hook.ts

@@ -0,0 +1,74 @@
+import type {
+  AppProcessId,
+  OverlayOpenableEvent,
+  OverlayTarget,
+} from "@canva/design";
+import { overlay as designOverlay } from "@canva/design";
+import type { CloseParams } from "@canva/platform";
+import { appProcess } from "@canva/platform";
+import { useEffect, useState } from "react";
+
+const initialOverlayEvent: OverlayOpenableEvent<OverlayTarget> = {
+  canOpen: false,
+  reason: "",
+};
+
+/**
+ * Returns an object which contains the following field:
+ *  1. canOpen - a boolean indicate whether the overlay can be opened on the specified target.
+ *  2. isOpen - a boolean indicate whether the overlay is currently open.
+ *  3. open - a function to open an overlay on the specified target.
+ *  4. close - a function close the currently opened overlay.
+ * @param target The overlay target to register for whether we can open an overlay.
+ */
+export function useOverlay<
+  T extends OverlayTarget,
+  C extends CloseParams = CloseParams,
+>(
+  target: T,
+): {
+  canOpen: boolean;
+  isOpen: boolean;
+  open: (opts?: {
+    launchParameters?: unknown;
+  }) => Promise<AppProcessId | undefined>;
+  close: (opts: C) => Promise<void>;
+} {
+  const [overlay, setOverlay] =
+    useState<OverlayOpenableEvent<T>>(initialOverlayEvent);
+  const [overlayId, setOverlayId] = useState<AppProcessId>();
+  const [isOpen, setIsOpen] = useState<boolean>(false);
+
+  useEffect(() => {
+    return designOverlay.registerOnCanOpen({
+      target,
+      onCanOpen: setOverlay,
+    });
+  }, []);
+
+  useEffect(() => {
+    if (overlayId) {
+      appProcess.registerOnStateChange(overlayId, ({ state }) =>
+        setIsOpen(state === "open"),
+      );
+    }
+  }, [overlayId]);
+
+  const open = async (
+    opts: { launchParameters?: unknown } = {},
+  ): Promise<AppProcessId | undefined> => {
+    if (overlay && overlay.canOpen) {
+      const overlayId = await overlay.open(opts);
+      setOverlayId(overlayId);
+      return overlayId;
+    }
+  };
+
+  const close = async (opts: C) => {
+    if (overlayId) {
+      appProcess.requestClose<C>(overlayId, opts);
+    }
+  };
+
+  return { canOpen: overlay.canOpen, isOpen, open, close };
+}

package/templates/common/utils/use_selection_hook.ts

@@ -0,0 +1,37 @@
+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/hello_world/package.json

@@ -33,7 +33,10 @@
     "@formatjs/ts-transformer": "3.13.22",
     "@ngrok/ngrok": "1.4.1",
     "@svgr/webpack": "8.1.0",
+    "@types/express": "4.17.21",
+    "@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-forge": "1.3.11",
@@ -54,7 +57,11 @@
     "eslint-plugin-formatjs": "5.2.2",
     "eslint-plugin-jest": "28.9.0",
     "eslint-plugin-react": "7.37.2",
+    "express": "4.21.1",
+    "express-basic-auth": "1.2.1",
     "jest": "29.7.0",
+    "jsonwebtoken": "9.0.2",
+    "jwks-rsa": "3.1.0",
     "mini-css-extract-plugin": "2.9.2",
     "node-fetch": "3.3.2",
     "node-forge": "1.3.1",