@canva/cli 0.0.1-beta.9 → 1.0.1

package/templates/data_connector/src/pages/login.tsx

@@ -0,0 +1,145 @@
+import {
+  Box,
+  Button,
+  LoadingIndicator,
+  Rows,
+  Text,
+  Title,
+} from "@canva/app-ui-kit";
+import { useCallback, useEffect, useState } from "react";
+import { defineMessages, FormattedMessage, useIntl } from "react-intl";
+import { useNavigate } from "react-router-dom";
+import { scope } from "src/api";
+import { Header } from "src/components";
+import { Paths } from "src/paths";
+import * as styles from "styles/components.css";
+import { useAppContext } from "../context";
+
+export const Login = () => {
+  const intl = useIntl();
+  const navigate = useNavigate();
+  const { oauth, setAccessToken, isAuthenticated } = useAppContext();
+
+  const [error, setError] = useState<string | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    // Redirect if already authenticated
+    if (isAuthenticated) {
+      navigate(Paths.ENTRYPOINT);
+      return;
+    }
+
+    // check if the user is already authenticated
+    retrieveAndSetToken();
+  }, [isAuthenticated]);
+
+  const authorize = useCallback(async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      await oauth.requestAuthorization({ scope });
+      await retrieveAndSetToken();
+    } catch (error) {
+      setError(error instanceof Error ? error.message : "Unknown error");
+      setLoading(false);
+    }
+  }, [oauth]);
+
+  // you MUST call getAccessToken every time you need a token, as the token may expire.
+  // Canva will handle caching and refreshing the token for you.
+  const retrieveAndSetToken = useCallback(
+    async (forceRefresh = false) => {
+      try {
+        const token = await oauth.getAccessToken({ forceRefresh, scope });
+        setAccessToken(token);
+        setLoading(false);
+      } catch (error) {
+        setError(error instanceof Error ? error.message : "Unknown error");
+        setLoading(false);
+      }
+    },
+    [oauth, setAccessToken],
+  );
+
+  return (
+    <div className={styles.scrollContainer}>
+      <Box
+        justifyContent="center"
+        width="full"
+        alignItems="center"
+        display="flex"
+        height="full"
+      >
+        {error && (
+          <Rows spacing="2u">
+            <Title>
+              <FormattedMessage {...loginMessages.authorizationError} />
+            </Title>
+            <Text>{error}</Text>
+            <Button variant="primary" onClick={authorize}>
+              {intl.formatMessage(loginMessages.tryAgain)}
+            </Button>
+          </Rows>
+        )}
+        {loading && <LoadingIndicator />}
+        {!loading && !error && (
+          <Rows spacing="2u">
+            <Header
+              title={intl.formatMessage(loginMessages.signInRequired)}
+              showBack={false}
+            />
+            <Text>
+              <FormattedMessage {...loginMessages.dataConnectorsOAuth} />
+            </Text>
+            <Text>
+              <FormattedMessage {...loginMessages.exampleDemonstration} />
+            </Text>
+            <Text>
+              <FormattedMessage {...loginMessages.setupInstructions} />
+            </Text>
+            <Button variant="primary" onClick={authorize}>
+              {intl.formatMessage(loginMessages.signIntoCanva)}
+            </Button>
+          </Rows>
+        )}
+      </Box>
+    </div>
+  );
+};
+
+const loginMessages = defineMessages({
+  authorizationError: {
+    defaultMessage: "Authorization error",
+    description:
+      "Title displayed when there is an error during OAuth authorization",
+  },
+  tryAgain: {
+    defaultMessage: "Try again",
+    description: "Button text to retry authorization after an error occurs",
+  },
+  signInRequired: {
+    defaultMessage: "Sign in required",
+    description:
+      "Header title for the login page indicating authentication is needed",
+  },
+  dataConnectorsOAuth: {
+    defaultMessage:
+      "Data connectors can use OAuth to authenticate with other platforms.",
+    description: "Body text shown when the user is prompted to sign in",
+  },
+  exampleDemonstration: {
+    defaultMessage:
+      "This example demonstrates how to do this with the Canva Connect API.",
+    description: "Body text shown when the user is prompted to sign in",
+  },
+  setupInstructions: {
+    defaultMessage:
+      "For set up instructions please see the README.md in the root folder.",
+    description: "Body text shown when the user is prompted to sign in",
+  },
+  signIntoCanva: {
+    defaultMessage: "Sign into Canva",
+    description: "Button text for initiating Canva authentication",
+  },
+});

package/templates/data_connector/src/pages/select_source.tsx

@@ -0,0 +1,24 @@
+import { Box, Rows } from "@canva/app-ui-kit";
+import { useIntl } from "react-intl";
+import { DATA_SOURCES } from "src/api/data_sources";
+import { Footer, Header } from "src/components";
+
+export const SelectSource = () => {
+  const intl = useIntl();
+
+  return (
+    <Box paddingEnd="2u" paddingTop="2u">
+      <Rows spacing="1u" align="start">
+        <Header
+          title={intl.formatMessage({
+            defaultMessage: "What would you like to import? ",
+            description: "The header text for the data source selection view",
+          })}
+          showBack={false}
+        />
+        {DATA_SOURCES.map((handler) => handler.selectionPage())}
+        <Footer />
+      </Rows>
+    </Box>
+  );
+};

package/templates/data_connector/src/paths.ts

@@ -0,0 +1,7 @@
+export enum Paths {
+  ENTRYPOINT = "/",
+  LOGIN = "/login",
+  DATA_SOURCE_SELECTION = "/data-source-selection",
+  DATA_SOURCE_CONFIG = "/data-source-config",
+  ERRORS = "/errors/:retry",
+}

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

@@ -0,0 +1,2 @@
+export * from "./routes";
+export * from "./protected_route";

package/templates/data_connector/src/routes/protected_route.tsx

@@ -0,0 +1,25 @@
+import { useEffect } from "react";
+import { useNavigate } from "react-router-dom";
+import { Paths } from "src/paths";
+import { useAppContext } from "../context";
+
+interface ProtectedRouteProps {
+  children: React.ReactNode;
+}
+
+/**
+ * A component that protects routes from unauthorized access.
+ * If the user is not authenticated, they will be redirected to the login page.
+ */
+export const ProtectedRoute = ({ children }: ProtectedRouteProps) => {
+  const { isAuthenticated } = useAppContext();
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    if (!isAuthenticated) {
+      navigate(Paths.LOGIN);
+    }
+  }, [isAuthenticated, navigate]);
+
+  return <>{children}</>;
+};

package/templates/data_connector/src/routes/routes.tsx

@@ -0,0 +1,42 @@
+import { Entrypoint } from "src/entrypoint";
+import { Home } from "src/home";
+import { DataSourceConfig } from "src/pages/data_source_config";
+import { ErrorPage } from "src/pages/error";
+import { Login } from "src/pages/login";
+import { SelectSource } from "src/pages/select_source";
+import { Paths } from "src/paths";
+import { ProtectedRoute } from "./protected_route";
+
+export const routes = [
+  {
+    path: Paths.ENTRYPOINT,
+    element: <Home />,
+    errorElement: <ErrorPage />,
+    children: [
+      {
+        index: true,
+        element: <Entrypoint />,
+      },
+      {
+        path: Paths.LOGIN,
+        element: <Login />,
+      },
+      {
+        path: Paths.DATA_SOURCE_SELECTION,
+        element: (
+          <ProtectedRoute>
+            <SelectSource />
+          </ProtectedRoute>
+        ),
+      },
+      {
+        path: Paths.DATA_SOURCE_CONFIG,
+        element: (
+          <ProtectedRoute>
+            <DataSourceConfig />
+          </ProtectedRoute>
+        ),
+      },
+    ],
+  },
+];

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

@@ -0,0 +1,17 @@
+import type { RenderSelectionUiRequest } from "@canva/intents/data";
+
+export const isLaunchedWithError = (request: RenderSelectionUiRequest) => {
+  return request.invocationContext.reason === "app_error";
+};
+
+export const isOutdatedSource = (request: RenderSelectionUiRequest) => {
+  return request.invocationContext.reason === "outdated_source_ref";
+};
+
+export const isDataRefEmpty = (request: RenderSelectionUiRequest) => {
+  return (
+    !request?.invocationContext ||
+    (!isLaunchedWithError(request) &&
+      !request.invocationContext.dataSourceRef?.source)
+  );
+};

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

@@ -0,0 +1,115 @@
+import type {
+  BooleanDataTableCell,
+  ColumnConfig,
+  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 dataTable: DataTable = {
+    columnConfigs: columnConfig(columns),
+    rows: [],
+  };
+  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;
+}
+
+/**
+ * Converts an array of DataTableColumn to ColumnConfig.
+ * @param columns Array of DataTableColumn
+ * @returns Array of ColumnConfig
+ */
+function columnConfig<T extends APIResponseItem>(
+  columns: DataTableColumn<T>[],
+): ColumnConfig[] {
+  return columns.map((column) => ({
+    name: column.label,
+    type: column.toCell({} as unknown).type, // Use an empty object to infer the type
+  }));
+}
+
+/**
+ * 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,
+  GetDataTableCompleted,
+  GetDataTableError,
+} from "@canva/intents/data";
+
+export const completeDataTable = (
+  dataTable: DataTable,
+  metadata?: DataTableMetadata,
+): GetDataTableCompleted => {
+  return {
+    status: "completed",
+    dataTable,
+    metadata,
+  };
+};
+
+export const appError = (message?: string): GetDataTableError => {
+  return {
+    status: "app_error",
+    message,
+  };
+};
+
+export const outdatedSourceRef = (): GetDataTableError => {
+  return {
+    status: "outdated_source_ref",
+  };
+};
+
+export const remoteRequestFailed = (): GetDataTableError => {
+  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 type { APIResponseItem } from "src/api";
+import {
+  booleanCell,
+  dateCell,
+  numberCell,
+  stringCell,
+  toDataTable,
+} from "../data_table";
+import type { DataTableColumn } from "../data_table";
+
+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", () => {
+    const result = toDataTable(testItems, columns, 10);
+
+    expect(result.rows.length).toBe(testItems.length);
+    expect(result.columnConfigs?.map((cell) => cell.name)).toEqual([
+      "ID",
+      "Name",
+      "Count",
+      "Status",
+      "Created",
+      "Custom",
+    ]);
+  });
+
+  test("toDataTable respects row limit", () => {
+    const result = toDataTable(testItems, columns, 1);
+
+    expect(result.rows.length).toBe(1);
+  });
+
+  test("toDataTable handles function-based getValue", () => {
+    const result = toDataTable(testItems, columns, 10);
+
+    // Check the custom column values
+    expect(result.rows[0].cells[5].value).toBe("Test Item 1 (42)");
+    expect(result.rows[1].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"
+    }
+  }
+}