@canva/cli 1.19.0 → 1.21.0

package/templates/data_connector/src/intents/data_connector/index.tsx

@@ -1,56 +0,0 @@
-import "@canva/app-ui-kit/styles.css";
-import type {
-  DataConnectorIntent,
-  GetDataTableRequest,
-  GetDataTableResponse,
-  RenderSelectionUiRequest,
-} from "@canva/intents/data";
-import { auth } from "@canva/user";
-import { createRoot } from "react-dom/client";
-import { buildDataTableResult, scope } from "../../api";
-import { App } from "./app";
-
-const dataConnector: DataConnectorIntent = {
-  /**
-   * Fetches structured data from an external source.
-   *
-   * This action is called in two scenarios:
-   *
-   * - During data selection to preview data before import (when {@link RenderSelectionUiRequest.updateDataRef} is called).
-   * - When refreshing previously imported data (when the user requests an update).
-   *
-   * @param params - Parameters for the data fetching operation.
-   * @returns A promise resolving to either a successful result with data or an error.
-   */
-  getDataTable: async (
-    params: GetDataTableRequest,
-  ): Promise<GetDataTableResponse> => {
-    const oauth = auth.initOauth();
-    const token = await oauth.getAccessToken({ scope });
-    return buildDataTableResult(params, token?.token);
-  },
-
-  /**
-   * Renders a UI component for selecting and configuring data from external sources.
-   * This UI should allow users to browse data sources, apply filters, and select data.
-   * When selection is complete, the implementation must call the `updateDataRef`
-   * callback provided in the params to preview and confirm the data selection.
-   *
-   * @param request - parameters that provide context and configuration for the data selection UI.
-   * Contains invocation context, size limits, and the updateDataRef callback
-   */
-  renderSelectionUi: async (request: RenderSelectionUiRequest) => {
-    function render() {
-      const root = createRoot(document.getElementById("root") as Element);
-      root.render(<App request={request} />);
-    }
-
-    render();
-
-    if (module.hot) {
-      module.hot.accept("./app", render);
-      module.hot.accept("../../api", render);
-    }
-  },
-};
-export default dataConnector;

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

@@ -1,9 +0,0 @@
-import { useAppContext } from "src/context";
-
-export const DataSourceConfig = () => {
-  const { dataSourceHandler } = useAppContext();
-  if (!dataSourceHandler) {
-    return undefined; // should be impossible
-  }
-  return dataSourceHandler.configPage(dataSourceHandler.sourceConfig);
-};

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

@@ -1,37 +0,0 @@
-import { Button, Rows, Text } from "@canva/app-ui-kit";
-import { FormattedMessage, useIntl } from "react-intl";
-import { useNavigate } from "react-router-dom";
-import { Paths } from "src/routes/paths";
-import * as styles from "styles/components.css";
-
-/**
- * Bare bones Error Page, please add relevant information and behavior that your app requires.
- */
-export const ErrorPage = () => {
-  const navigate = useNavigate();
-  const intl = useIntl();
-
-  const onClick = () => {
-    navigate(Paths.ENTRYPOINT);
-  };
-
-  return (
-    <div className={styles.scrollContainer}>
-      <Rows spacing="2u">
-        <Text>
-          <FormattedMessage
-            defaultMessage="Something went wrong."
-            description="A message to indicate that something went wrong, but no more information is available"
-          />
-        </Text>
-        <Button variant="primary" onClick={onClick} stretch={true}>
-          {intl.formatMessage({
-            defaultMessage: "Start over",
-            description:
-              "A button label to clear the error and the prompt and start again",
-          })}
-        </Button>
-      </Rows>
-    </div>
-  );
-};

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

@@ -1,4 +0,0 @@
-export * from "./error";
-export * from "./login";
-export * from "./select_source";
-export * from "./data_source_config";

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

@@ -1,145 +0,0 @@
-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/routes/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

@@ -1,24 +0,0 @@
-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/routes/index.ts

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

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

@@ -1,7 +0,0 @@
-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/protected_route.tsx

@@ -1,26 +0,0 @@
-import type { ReactNode } from "react";
-import { useEffect } from "react";
-import { useNavigate } from "react-router-dom";
-import { Paths } from "src/routes/paths";
-import { useAppContext } from "../context";
-
-interface ProtectedRouteProps {
-  children: 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

@@ -1,42 +0,0 @@
-import { Entrypoint } from "src/intents/data_connector/entrypoint";
-import { Home } from "src/intents/data_connector/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/routes/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

@@ -1,17 +0,0 @@
-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

@@ -1,116 +0,0 @@
-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);
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  toCell: (value: any) => 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

@@ -1,36 +0,0 @@
-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

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

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

@@ -1,133 +0,0 @@
-/* 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);
-  });
-});