@canva/cli 0.0.1-beta.30 → 0.0.1-beta.32

package/templates/data_connector/src/context/app_context.tsx

@@ -1,5 +1,5 @@
 import { createContext, useState, useCallback } from "react";
-import type { RenderSelectionUiParams } from "@canva/intents/data";
+import type { RenderSelectionUiRequest } from "@canva/intents/data";
 import type { AccessTokenResponse } from "@canva/user";
 import { auth } from "@canva/user";
 import type { APIResponseItem, DataSourceHandler } from "src/api/data_source";
@@ -8,7 +8,7 @@ import { type DataSourceConfig } from "src/api/data_source";
 export interface AppContextType {
   appError: string;
   setAppError: (value: string) => void;
-  dataParams: RenderSelectionUiParams;
+  request: RenderSelectionUiRequest;
   isAuthenticated: boolean;
   accessToken: AccessTokenResponse | undefined;
   setAccessToken: (token: AccessTokenResponse | undefined) => void;
@@ -27,7 +27,7 @@ export interface AppContextType {
 export const AppContext = createContext<AppContextType>({
   appError: "",
   setAppError: () => {},
-  dataParams: {} as RenderSelectionUiParams,
+  request: {} as RenderSelectionUiRequest,
   isAuthenticated: false,
   accessToken: undefined,
   setAccessToken: () => {},
@@ -51,15 +51,15 @@ export const AppContext = createContext<AppContextType>({
  * For more information on React Context, refer to the official React documentation: {@link https://react.dev/learn/passing-data-deeply-with-context}.
  */
 export const ContextProvider = ({
-  renderSelectionUiParams,
+  renderSelectionUiRequest,
   children,
 }: {
-  renderSelectionUiParams: RenderSelectionUiParams;
+  renderSelectionUiRequest: RenderSelectionUiRequest;
   children: React.ReactNode;
 }): JSX.Element => {
   const [appError, setAppError] = useState<string>("");
-  const [dataParams] = useState<RenderSelectionUiParams>(
-    renderSelectionUiParams,
+  const [request] = useState<RenderSelectionUiRequest>(
+    renderSelectionUiRequest,
   );
 
   // authentication
@@ -77,7 +77,7 @@ export const ContextProvider = ({
   // data connection
   const loadDataSource = useCallback(
     async (title: string, source: DataSourceConfig) => {
-      const result = await dataParams.updateDataRef({
+      const result = await request.updateDataRef({
         title,
         source: JSON.stringify(source),
       });
@@ -91,7 +91,7 @@ export const ContextProvider = ({
         setAppError("");
       }
     },
-    [dataParams],
+    [request],
   );
 
   const logout = useCallback(async () => {
@@ -107,7 +107,7 @@ export const ContextProvider = ({
   const value: AppContextType = {
     appError,
     setAppError,
-    dataParams,
+    request,
     isAuthenticated,
     accessToken,
     setAccessToken,

package/templates/data_connector/src/entrypoint.tsx

@@ -26,27 +26,24 @@ const parseDataSource = (source: string) => {
 export const Entrypoint = () => {
   const navigate = useNavigate();
   const context = useAppContext();
-  const { dataParams, setAppError, setDataSourceHandler } = context;
+  const { request, setAppError, setDataSourceHandler } = context;
 
   useEffect(() => {
     // if the app was loaded with a populated data ref, we should reload the previous state.
     // otherwise, if this is a first launch or there is an error, we should navigate to the first screen for a user - selecting a data source
     let navigateTo: Paths | undefined;
 
-    if (isDataRefEmpty(dataParams)) {
+    if (isDataRefEmpty(request)) {
       // probably a first time launch - the user will need to select a data source
       navigateTo = Paths.DATA_SOURCE_SELECTION;
-    } else if (
-      isOutdatedSource(dataParams) ||
-      isLaunchedWithError(dataParams)
-    ) {
+    } else if (isOutdatedSource(request) || isLaunchedWithError(request)) {
       // the configured source does not match the expected data source types
       // so prompt the user to reconfigure the data source
       setAppError("The data source configuration needs to be updated.");
       navigateTo = Paths.DATA_SOURCE_SELECTION;
     } else {
       // there is a data ref, so we should parse it and navigate to the appropriate page
-      const dataRef = dataParams.invocationContext.dataSourceRef;
+      const dataRef = request.invocationContext.dataSourceRef;
       const parsedSource = parseDataSource(dataRef?.source ?? "");
 
       if (parsedSource) {
@@ -67,7 +64,7 @@ export const Entrypoint = () => {
     }
 
     navigate(navigateTo || Paths.DATA_SOURCE_SELECTION);
-  }, [dataParams]);
+  }, [request]);
 
   return <LoadingIndicator />;
 };

package/templates/data_connector/src/index.tsx

@@ -1,7 +1,7 @@
 import type {
-  RenderSelectionUiParams,
-  FetchDataTableParams,
-  FetchDataTableResult,
+  RenderSelectionUiRequest,
+  GetDataTableRequest,
+  GetDataTableResponse,
 } from "@canva/intents/data";
 import { prepareDataConnector } from "@canva/intents/data";
 import { createRoot } from "react-dom/client";
@@ -19,15 +19,15 @@ prepareDataConnector({
    *
    * This action is called in two scenarios:
    *
-   * - During data selection to preview data before import (when {@link RenderSelectionUiParams.updateDataRef} is called).
+   * - 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.
    */
-  fetchDataTable: async (
-    params: FetchDataTableParams,
-  ): Promise<FetchDataTableResult> => {
+  getDataTable: async (
+    params: GetDataTableRequest,
+  ): Promise<GetDataTableResponse> => {
     const oauth = auth.initOauth();
     const token = await oauth.getAccessToken({ scope });
     return buildDataTableResult(params, token?.token);
@@ -39,12 +39,12 @@ prepareDataConnector({
    * When selection is complete, the implementation must call the `updateDataRef`
    * callback provided in the params to preview and confirm the data selection.
    *
-   * @param params - parameters that provide context and configuration for the data selection UI.
+   * @param request - parameters that provide context and configuration for the data selection UI.
    * Contains invocation context, size limits, and the updateDataRef callback
    */
-  renderSelectionUi: async (params: RenderSelectionUiParams) => {
+  renderSelectionUi: async (request: RenderSelectionUiRequest) => {
     function render() {
-      root.render(<App dataParams={params} />);
+      root.render(<App request={request} />);
     }
 
     render();

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

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

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

@@ -5,6 +5,7 @@ import type {
   DateDataTableCell,
   NumberDataTableCell,
   StringDataTableCell,
+  ColumnConfig,
 } from "@canva/intents/data";
 import type { APIResponseItem } from "src/api";
 
@@ -20,9 +21,9 @@ export function toDataTable<T extends APIResponseItem>(
   rowLimit: number,
 ): DataTable {
   const items = apiData.slice(0, rowLimit);
-  const headerRow = columns.map((column) => stringCell(column.label));
   const dataTable: DataTable = {
-    rows: [{ cells: headerRow }],
+    columnConfigs: columnConfig(columns),
+    rows: [],
   };
   items.forEach((item) => {
     const cells = columns.map((column) => {
@@ -37,6 +38,20 @@ export function toDataTable<T extends APIResponseItem>(
   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

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

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

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

@@ -68,11 +68,11 @@ describe("data table utils", () => {
     },
   ];
 
-  test("toDataTable creates correct structure with header row", () => {
+  test("toDataTable creates correct structure", () => {
     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([
+    expect(result.rows.length).toBe(testItems.length);
+    expect(result.columnConfigs?.map((cell) => cell.name)).toEqual([
       "ID",
       "Name",
       "Count",
@@ -85,15 +85,15 @@ describe("data table utils", () => {
   test("toDataTable respects row limit", () => {
     const result = toDataTable(testItems, columns, 1);
 
-    expect(result.rows.length).toBe(2); // header + 1 data row (limited)
+    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[1].cells[5].value).toBe("Test Item 1 (42)");
-    expect(result.rows[2].cells[5].value).toBe("Test Item 2 (0)");
+    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", () => {

package/templates/data_connector/webpack.config.ts

@@ -199,6 +199,7 @@ function buildDevConfig(options?: DevConfig): {
 
   const { port, enableHmr, appOrigin, appId, enableHttps, certFile, keyFile } =
     options;
+  const host = "localhost";
 
   let devServer: DevServerConfiguration = {
     server: enableHttps
@@ -210,7 +211,8 @@ function buildDevConfig(options?: DevConfig): {
           },
         }
       : "http",
-    host: "localhost",
+    host,
+    allowedHosts: [host],
     historyApiFallback: {
       rewrites: [{ from: /^\/$/, to: "/app.js" }],
     },
@@ -227,7 +229,7 @@ function buildDevConfig(options?: DevConfig): {
   if (enableHmr && appOrigin) {
     devServer = {
       ...devServer,
-      allowedHosts: new URL(appOrigin).hostname,
+      allowedHosts: [host, new URL(appOrigin).hostname],
       headers: {
         "Access-Control-Allow-Origin": appOrigin,
         "Access-Control-Allow-Credentials": "true",
@@ -245,7 +247,7 @@ function buildDevConfig(options?: DevConfig): {
     const appDomain = `app-${appId.toLowerCase().trim()}.canva-apps.com`;
     devServer = {
       ...devServer,
-      allowedHosts: appDomain,
+      allowedHosts: [host, appDomain],
       headers: {
         "Access-Control-Allow-Origin": `https://${appDomain}`,
         "Access-Control-Allow-Credentials": "true",

package/templates/gen_ai/package.json

@@ -19,11 +19,11 @@
   },
   "dependencies": {
     "@canva/app-i18n-kit": "^1.0.2",
-    "@canva/app-ui-kit": "^4.9.0",
+    "@canva/app-ui-kit": "^4.10.0",
     "@canva/asset": "^2.2.0",
-    "@canva/design": "^2.4.1",
+    "@canva/design": "^2.6.0",
     "@canva/error": "^2.1.0",
-    "@canva/platform": "^2.1.0",
+    "@canva/platform": "^2.2.0",
     "@canva/user": "^2.1.0",
     "cookie-parser": "1.4.7",
     "cors": "2.8.5",
@@ -93,7 +93,7 @@
     "url-loader": "4.1.1",
     "webpack": "5.97.1",
     "webpack-cli": "5.1.4",
-    "webpack-dev-server": "5.2.0",
+    "webpack-dev-server": "5.2.2",
     "yargs": "17.7.2"
   }
 }

package/templates/gen_ai/webpack.config.ts

@@ -199,6 +199,7 @@ function buildDevConfig(options?: DevConfig): {
 
   const { port, enableHmr, appOrigin, appId, enableHttps, certFile, keyFile } =
     options;
+  const host = "localhost";
 
   let devServer: DevServerConfiguration = {
     server: enableHttps
@@ -210,7 +211,8 @@ function buildDevConfig(options?: DevConfig): {
           },
         }
       : "http",
-    host: "localhost",
+    host,
+    allowedHosts: [host],
     historyApiFallback: {
       rewrites: [{ from: /^\/$/, to: "/app.js" }],
     },
@@ -227,7 +229,7 @@ function buildDevConfig(options?: DevConfig): {
   if (enableHmr && appOrigin) {
     devServer = {
       ...devServer,
-      allowedHosts: new URL(appOrigin).hostname,
+      allowedHosts: [host, new URL(appOrigin).hostname],
       headers: {
         "Access-Control-Allow-Origin": appOrigin,
         "Access-Control-Allow-Credentials": "true",
@@ -245,7 +247,7 @@ function buildDevConfig(options?: DevConfig): {
     const appDomain = `app-${appId.toLowerCase().trim()}.canva-apps.com`;
     devServer = {
       ...devServer,
-      allowedHosts: appDomain,
+      allowedHosts: [host, appDomain],
       headers: {
         "Access-Control-Allow-Origin": `https://${appDomain}`,
         "Access-Control-Allow-Credentials": "true",

package/templates/hello_world/package.json

@@ -20,11 +20,11 @@
   },
   "dependencies": {
     "@canva/app-i18n-kit": "^1.0.2",
-    "@canva/app-ui-kit": "^4.9.0",
+    "@canva/app-ui-kit": "^4.10.0",
     "@canva/asset": "^2.2.0",
-    "@canva/design": "^2.4.1",
+    "@canva/design": "^2.6.0",
     "@canva/error": "^2.1.0",
-    "@canva/platform": "^2.1.0",
+    "@canva/platform": "^2.2.0",
     "@canva/user": "^2.1.0",
     "react": "18.3.1",
     "react-dom": "18.3.1",
@@ -82,7 +82,7 @@
     "url-loader": "4.1.1",
     "webpack": "5.97.1",
     "webpack-cli": "5.1.4",
-    "webpack-dev-server": "5.2.0",
+    "webpack-dev-server": "5.2.2",
     "yargs": "17.7.2"
   }
 }

package/templates/hello_world/webpack.config.ts

@@ -199,6 +199,7 @@ function buildDevConfig(options?: DevConfig): {
 
   const { port, enableHmr, appOrigin, appId, enableHttps, certFile, keyFile } =
     options;
+  const host = "localhost";
 
   let devServer: DevServerConfiguration = {
     server: enableHttps
@@ -210,7 +211,8 @@ function buildDevConfig(options?: DevConfig): {
           },
         }
       : "http",
-    host: "localhost",
+    host,
+    allowedHosts: [host],
     historyApiFallback: {
       rewrites: [{ from: /^\/$/, to: "/app.js" }],
     },
@@ -227,7 +229,7 @@ function buildDevConfig(options?: DevConfig): {
   if (enableHmr && appOrigin) {
     devServer = {
       ...devServer,
-      allowedHosts: new URL(appOrigin).hostname,
+      allowedHosts: [host, new URL(appOrigin).hostname],
       headers: {
         "Access-Control-Allow-Origin": appOrigin,
         "Access-Control-Allow-Credentials": "true",
@@ -245,7 +247,7 @@ function buildDevConfig(options?: DevConfig): {
     const appDomain = `app-${appId.toLowerCase().trim()}.canva-apps.com`;
     devServer = {
       ...devServer,
-      allowedHosts: appDomain,
+      allowedHosts: [host, appDomain],
       headers: {
         "Access-Control-Allow-Origin": `https://${appDomain}`,
         "Access-Control-Allow-Credentials": "true",