@canva/cli 0.0.1-beta.28 → 0.0.1-beta.29

package/templates/data_connector/src/utils/data_table.ts

@@ -0,0 +1,100 @@
+import type {
+  BooleanDataTableCell,
+  DataTable,
+  DataTableCell,
+  DateDataTableCell,
+  NumberDataTableCell,
+  StringDataTableCell,
+} from "@canva/intents/data";
+import type { APIResponseItem } from "src/api";
+
+export interface DataTableColumn<T extends APIResponseItem> {
+  label: string;
+  getValue: keyof T | ((result: T) => boolean | string | number | Date);
+  toCell: (value) => DataTableCell;
+}
+
+export function toDataTable<T extends APIResponseItem>(
+  apiData: T[],
+  columns: DataTableColumn<T>[],
+  rowLimit: number,
+): DataTable {
+  const items = apiData.slice(0, rowLimit);
+  const headerRow = columns.map((column) => stringCell(column.label));
+  const dataTable: DataTable = {
+    rows: [{ cells: headerRow }],
+  };
+  items.forEach((item) => {
+    const cells = columns.map((column) => {
+      const value =
+        typeof column.getValue === "function"
+          ? column.getValue(item)
+          : item[column.getValue];
+      return column.toCell(value);
+    });
+    dataTable.rows.push({ cells });
+  });
+  return dataTable;
+}
+
+/**
+ * Creates a string cell for the data table.
+ * @param value  String containing up to 10,000 characters
+ */
+export function stringCell(value: string): StringDataTableCell {
+  return {
+    type: "string",
+    value,
+  };
+}
+
+/**
+ * Creates a number cell for the data table.
+ * @param value Number within range `Number.MIN_SAFE_INTEGER` and `Number.MAX_SAFE_INTEGER`
+ * @param formatting Formatting using ISO/IEC 29500-1:2016 Office Open XML Format
+ */
+export function numberCell(
+  value: number,
+  formatting?: string,
+): NumberDataTableCell {
+  return {
+    type: "number",
+    value,
+    metadata: {
+      formatting,
+    },
+  };
+}
+
+/**
+ * Creates a boolean cell for the data table.
+ * @param value Boolean value
+ */
+export function booleanCell(value: boolean): BooleanDataTableCell {
+  return {
+    type: "boolean",
+    value,
+  };
+}
+
+/**
+ * Creates a date cell for the data table.
+ * @param value Number, Date or String
+ * @description If value is a string, it will be parsed as a date. If value is a number, it will be treated as a timestamp in seconds.
+ */
+export function dateCell(value: number | Date | string): DateDataTableCell {
+  // if string, parse as date
+  if (typeof value === "string") {
+    value = new Date(value);
+  }
+
+  // if is date, convert to timestamp in seconds
+  if (value instanceof Date) {
+    value = value.valueOf() / 1000;
+  }
+
+  return {
+    type: "date",
+    value,
+  };
+}

package/templates/data_connector/src/utils/fetch_result.ts

@@ -0,0 +1,36 @@
+import type {
+  DataTable,
+  DataTableMetadata,
+  FetchDataTableError,
+  FetchDataTableCompleted,
+} from "@canva/intents/data";
+
+export const completeDataTable = (
+  dataTable: DataTable,
+  metadata?: DataTableMetadata,
+): FetchDataTableCompleted => {
+  return {
+    status: "completed",
+    dataTable,
+    metadata,
+  };
+};
+
+export const appError = (message?: string): FetchDataTableError => {
+  return {
+    status: "app_error",
+    message,
+  };
+};
+
+export const outdatedSourceRef = (): FetchDataTableError => {
+  return {
+    status: "outdated_source_ref",
+  };
+};
+
+export const remoteRequestFailed = (): FetchDataTableError => {
+  return {
+    status: "remote_request_failed",
+  };
+};

package/templates/data_connector/src/utils/index.ts

@@ -0,0 +1,2 @@
+export * from "./data_table";
+export * from "./data_params";

package/templates/data_connector/src/utils/tests/data_table.test.ts

@@ -0,0 +1,133 @@
+/* eslint-disable formatjs/no-literal-string-in-object */
+import {
+  toDataTable,
+  stringCell,
+  numberCell,
+  dateCell,
+  booleanCell,
+} from "../data_table";
+import type { DataTableColumn } from "../data_table";
+import type { APIResponseItem } from "src/api";
+
+describe("data table utils", () => {
+  interface TestItem extends APIResponseItem {
+    id: string;
+    name: string;
+    count: number;
+    active: boolean;
+    createdAt: string;
+  }
+
+  const testItems: TestItem[] = [
+    {
+      id: "item1",
+      name: "Test Item 1",
+      count: 42,
+      active: true,
+      createdAt: "2023-01-01T00:00:00Z",
+    },
+    {
+      id: "item2",
+      name: "Test Item 2",
+      count: 0,
+      active: false,
+      createdAt: "2023-02-15T12:30:45Z",
+    },
+  ];
+
+  const columns: DataTableColumn<TestItem>[] = [
+    {
+      label: "ID",
+      getValue: "id",
+      toCell: stringCell,
+    },
+    {
+      label: "Name",
+      getValue: "name",
+      toCell: stringCell,
+    },
+    {
+      label: "Count",
+      getValue: "count",
+      toCell: numberCell,
+    },
+    {
+      label: "Status",
+      getValue: "active",
+      toCell: booleanCell,
+    },
+    {
+      label: "Created",
+      getValue: "createdAt",
+      toCell: dateCell,
+    },
+    {
+      label: "Custom",
+      getValue: (item) => `${item.name} (${item.count})`,
+      toCell: stringCell,
+    },
+  ];
+
+  test("toDataTable creates correct structure with header row", () => {
+    const result = toDataTable(testItems, columns, 10);
+
+    expect(result.rows.length).toBe(3); // header + 2 data rows
+    expect(result.rows[0].cells.map((cell) => cell.value)).toEqual([
+      "ID",
+      "Name",
+      "Count",
+      "Status",
+      "Created",
+      "Custom",
+    ]);
+  });
+
+  test("toDataTable respects row limit", () => {
+    const result = toDataTable(testItems, columns, 1);
+
+    expect(result.rows.length).toBe(2); // header + 1 data row (limited)
+  });
+
+  test("toDataTable handles function-based getValue", () => {
+    const result = toDataTable(testItems, columns, 10);
+
+    // Check the custom column values
+    expect(result.rows[1].cells[5].value).toBe("Test Item 1 (42)");
+    expect(result.rows[2].cells[5].value).toBe("Test Item 2 (0)");
+  });
+
+  test("cell formatter functions create correct cell structures", () => {
+    expect(stringCell("test")).toEqual({ type: "string", value: "test" });
+
+    expect(numberCell(42)).toEqual({
+      type: "number",
+      value: 42,
+      metadata: { formatting: undefined },
+    });
+
+    expect(numberCell(42, "#,##0")).toEqual({
+      type: "number",
+      value: 42,
+      metadata: { formatting: "#,##0" },
+    });
+
+    expect(booleanCell(true)).toEqual({ type: "boolean", value: true });
+
+    // Test date with string input
+    const dateResult1 = dateCell("2023-01-01T00:00:00Z");
+    expect(dateResult1.type).toBe("date");
+    expect(typeof dateResult1.value).toBe("number");
+
+    // Test date with Date object input
+    const dateObj = new Date("2023-01-01T00:00:00Z");
+    const dateResult2 = dateCell(dateObj);
+    expect(dateResult2.type).toBe("date");
+    expect(typeof dateResult2.value).toBe("number");
+
+    // Test date with timestamp input
+    const timestamp = dateObj.valueOf() / 1000; // seconds
+    const dateResult3 = dateCell(timestamp);
+    expect(dateResult3.type).toBe("date");
+    expect(dateResult3.value).toBe(timestamp);
+  });
+});

package/templates/data_connector/styles/components.css

@@ -0,0 +1,38 @@
+/* Scroll container */
+.scrollContainer {
+  box-sizing: border-box;
+  overflow-y: scroll;
+  height: 100%;
+  padding-top: var(--ui-kit-space-2);
+  padding-right: var(--ui-kit-space-2);
+  padding-bottom: var(--ui-kit-space-2);
+
+  /* for firefox */
+  scrollbar-width: thin;
+  scrollbar-color: var(--ui-kit-color-typography-quaternary) 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-1);
+  margin-bottom: var(--ui-kit-space-1);
+}
+
+.scrollContainer::-webkit-scrollbar-thumb {
+  border-radius: var(--ui-kit-border-radius);
+  background: var(--ui-kit-color-typography-quaternary);
+  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

@@ -0,0 +1,54 @@
+{
+  "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": "node",
+    "rootDir": ".",
+    "outDir": "dist",
+    "strict": true,
+    "skipLibCheck": true,
+    "target": "ES2019",
+    "sourceMap": true,
+    "inlineSources": true,
+    "module": "ESNext",
+    "noImplicitAny": false,
+    "removeComments": true,
+    "preserveConstEnums": true,
+    "allowSyntheticDefaultImports": true,
+    "baseUrl": "./",
+    "paths": {
+      "assets": ["./assets"],
+      "styles": ["./styles"]
+    }
+  },
+  "include": [
+    "./src/**/*",
+    "./backend/**/*",
+    "./utils/**/*",
+    "./scripts/**/*",
+    "./declarations/declarations.d.ts",
+    "./styles/**/*",
+    "./node_modules/@types/**/*"
+  ],
+  "ts-node": {
+    "compilerOptions": {
+      "module": "commonjs"
+    }
+  }
+}

package/templates/data_connector/webpack.config.ts

@@ -0,0 +1,270 @@
+import type { Configuration } from "webpack";
+import { DefinePlugin, optimize } from "webpack";
+import * as path from "path";
+import * as TerserPlugin from "terser-webpack-plugin";
+import { transform } from "@formatjs/ts-transformer";
+import * as 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/mcp-server/harness-setup/
+  inHarness = process.env.IN_HARNESS === "true",
+}: {
+  devConfig?: DevConfig;
+  appEntry?: string;
+  backendHost?: string;
+  inHarness?: boolean;
+} = {}): Configuration & DevServerConfiguration {
+  const mode = devConfig ? "development" : "production";
+
+  if (!backendHost) {
+    console.error(
+      chalk.redBright.bold("BACKEND_HOST is undefined."),
+      `Refer to "Customizing the backend host" in the README.md for more information.`,
+    );
+    process.exit(-1);
+  } 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: {
+        assets: path.resolve(process.cwd(), "assets"),
+        utils: path.resolve(process.cwd(), "utils"),
+        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, appId, enableHttps, certFile, keyFile } =
+    options;
+
+  let devServer: DevServerConfiguration = {
+    server: enableHttps
+      ? {
+          type: "https",
+          options: {
+            cert: certFile,
+            key: keyFile,
+          },
+        }
+      : "http",
+    host: "localhost",
+    historyApiFallback: {
+      rewrites: [{ from: /^\/$/, to: "/app.js" }],
+    },
+    port,
+    client: {
+      logging: "verbose",
+    },
+    static: {
+      directory: path.resolve(process.cwd(), "assets"),
+      publicPath: "/assets",
+    },
+  };
+
+  if (enableHmr && appOrigin) {
+    devServer = {
+      ...devServer,
+      allowedHosts: new URL(appOrigin).hostname,
+      headers: {
+        "Access-Control-Allow-Origin": appOrigin,
+        "Access-Control-Allow-Credentials": "true",
+        "Access-Control-Allow-Private-Network": "true",
+      },
+    };
+  } else if (enableHmr && appId) {
+    // Deprecated - App ID should not be used to configure HMR in the future and can be safely removed
+    // after a few months.
+
+    console.warn(
+      "Enabling Hot Module Replacement (HMR) with an App ID is deprecated, please see the README.md on how to update.",
+    );
+
+    const appDomain = `app-${appId.toLowerCase().trim()}.canva-apps.com`;
+    devServer = {
+      ...devServer,
+      allowedHosts: appDomain,
+      headers: {
+        "Access-Control-Allow-Origin": `https://${appDomain}`,
+        "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;