@canva/cli 0.0.1-beta.12 → 0.0.1-beta.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@canva/cli",
-  "version": "0.0.1-beta.12",
+  "version": "0.0.1-beta.14",
   "description": "The official Canva CLI.",
   "license": "SEE LICENSE IN LICENSE.md",
   "author": "Canva Pty Ltd.",

package/templates/base/package.json

@@ -6,7 +6,7 @@
   "license": "SEE LICENSE IN LICENSE.md",
   "author": "Canva Pty Ltd.",
   "dependencies": {
-    "@canva/app-ui-kit": "^4.4.0",
+    "@canva/app-ui-kit": "^4.5.0",
     "@canva/asset": "^2.1.0",
     "@canva/design": "^2.3.0",
     "@canva/error": "^2.1.0",
@@ -17,7 +17,7 @@
     "react-dom": "18.3.1"
   },
   "devDependencies": {
-    "@canva/cli": "^0.0.1-beta.11",
+    "@canva/cli": ">= 0.0.1-beta.13 < 0.0.2",
     "@ngrok/ngrok": "1.4.1",
     "@svgr/webpack": "8.1.0",
     "@types/debug": "4.1.12",

package/templates/common/jest.setup.ts

@@ -17,3 +17,4 @@ jest.mock("@canva/asset");
 jest.mock("@canva/design");
 jest.mock("@canva/platform");
 jest.mock("@canva/user");
+// n.b. @canva/error should not be mocked - use it to simulate API error responses from other mocks by throwing CanvaError

package/templates/dam/backend/routers/dam.ts

@@ -1,10 +1,6 @@
 import * as express from "express";
 import * as crypto from "crypto";
-import type {
-  Container,
-  FindResourcesRequest,
-  Resource,
-} from "@canva/app-components";
+import type { Container, Resource } from "@canva/app-components";
 
 /**
  * Generates a unique hash for a url.
@@ -33,15 +29,24 @@ export const createDamRouter = () => {
 
   /**
    * This endpoint returns the data for your app.
-   *
-   * TODO: you must change this path to `/api/resources/find` before
-   * submitting to ensure a user is authenticated
    */
   router.post("/resources/find", async (req, res) => {
     // You should modify these lines to return data from your
     // digital asset manager (DAM) based on the findResourcesRequest
-    const findResourcesRequest: FindResourcesRequest = req.body;
-    const { types } = findResourcesRequest;
+    const {
+      types,
+      continuation,
+      locale,
+      // other available fields from the `FindResourcesRequest`
+      // containerTypes,
+      // limit,
+      // filters,
+      // query,
+      // sort,
+      // tab,
+      // containerId,
+      // parentContainerType,
+    } = req.body;
 
     let resources: Resource[] = [];
     if (types.includes("IMAGE")) {
@@ -49,7 +54,7 @@ export const createDamRouter = () => {
         Array.from({ length: 40 }, async (_, i) => ({
           id: await generateHash(imageUrls[i % imageUrls.length]),
           mimeType: "image/jpeg",
-          name: "My new thing",
+          name: `My new thing in ${locale}`, // Use the `locale` value from the request if your backend supports i18n
           type: "IMAGE",
           thumbnail: {
             url: imageUrls[i % imageUrls.length],
@@ -78,7 +83,7 @@ export const createDamRouter = () => {
 
     res.send({
       resources,
-      continuation: +(findResourcesRequest.continuation || 0) + 1,
+      continuation: +(continuation || 0) + 1,
     });
   });
 

package/templates/dam/package.json

@@ -17,9 +17,9 @@
     "postinstall": "ts-node ./scripts/copy-env.ts"
   },
   "dependencies": {
-    "@canva/app-components": "^1.0.0-beta.29",
+    "@canva/app-components": "^1.1.0",
     "@canva/app-i18n-kit": "^1.0.2",
-    "@canva/app-ui-kit": "^4.4.0",
+    "@canva/app-ui-kit": "^4.5.0",
     "@canva/asset": "^2.1.0",
     "@canva/design": "^2.3.0",
     "@canva/error": "^2.1.0",
@@ -32,7 +32,7 @@
     "react-intl": "6.8.7"
   },
   "devDependencies": {
-    "@canva/cli": "^0.0.1-beta.11",
+    "@canva/cli": ">= 0.0.1-beta.13 < 0.0.2",
     "@eslint/eslintrc": "3.2.0",
     "@eslint/js": "9.16.0",
     "@formatjs/cli": "6.3.14",

package/templates/dam/src/app.tsx

@@ -1,14 +1,35 @@
 import { SearchableListView } from "@canva/app-components";
 import { Box } from "@canva/app-ui-kit";
+import "@canva/app-ui-kit/styles.css";
+import { useConfig } from "./config";
 import { findResources } from "./adapter";
-import { config } from "./config";
 import * as styles from "./index.css";
-import "@canva/app-ui-kit/styles.css";
 
 export function App() {
+  const config = useConfig();
   return (
     <Box className={styles.rootWrapper}>
-      <SearchableListView config={config} findResources={findResources} />
+      <SearchableListView
+        config={config}
+        findResources={findResources}
+        // TODO remove `saveExportedDesign` and `config.export` if your app does not support exporting the Canva design into an external platform
+        saveExportedDesign={(
+          exportedDesignUrl: string,
+          containerId: string | undefined,
+          designTitle: string | undefined,
+        ) => {
+          // TODO update the function to save the design to your platform
+          return new Promise((resolve) => {
+            setTimeout(() => {
+              // eslint-disable-next-line no-console
+              console.info(
+                `Saving file "${designTitle}" from ${exportedDesignUrl} to ${config.serviceName} container id: ${containerId}`,
+              );
+              resolve({ success: true });
+            }, 1000);
+          });
+        }}
+      />
     </Box>
   );
 }

package/templates/dam/src/config.ts

@@ -1,95 +1,217 @@
 import type { Config } from "@canva/app-components";
+import { useIntl } from "react-intl";
 
 type ContainerTypes = "folder";
-export const config: Config<ContainerTypes> = {
-  serviceName: "Example App",
-  search: {
-    enabled: true,
-    filterFormConfig: {
-      containerTypes: ["folder"],
-      filters: [
-        {
-          filterType: "CHECKBOX",
-          label: "File Type",
-          key: "fileType",
-          options: [
-            { value: "mp4", label: "MP4" },
-            { value: "png", label: "PNG" },
-            { value: "jpeg", label: "JPEG" },
-          ],
-          allowCustomValue: true,
-        },
-        {
-          filterType: "RADIO",
-          label: "Size",
-          key: "size",
-          options: [
-            {
-              label: "Large (800+ px)",
-              value: "large",
-            },
-            {
-              label: "Medium (200-799px)",
-              value: "medium",
-            },
-          ],
-          allowCustomValue: true,
-          customValueInputType: "SIZE_RANGE",
-        },
-        {
-          filterType: "RADIO",
-          label: "Update Date",
-          key: "updateDate",
-          options: [
-            { value: ">now-30m", label: "Last 30 Minutes" },
-            { value: ">now-7d", label: "Last 7 days" },
-          ],
-          allowCustomValue: true,
-          customValueInputType: "DATE_RANGE",
-        },
-        {
-          filterType: "RADIO",
-          label: "Design Status",
-          key: "designStatus",
-          options: [
-            { value: "approved", label: "Approved" },
-            { value: "rejected", label: "Rejected" },
-            { value: "draft", label: "Draft" },
-          ],
-          allowCustomValue: true,
-          customValueInputType: "PLAIN_TEXT",
-        },
-      ],
+export const useConfig = (): Config<ContainerTypes> => {
+  const intl = useIntl();
+  return {
+    serviceName: intl.formatMessage({
+      defaultMessage: "Example App",
+      description:
+        "Name of the service where the app will pull digital assets from",
+    }),
+    search: {
+      enabled: true,
+      filterFormConfig: {
+        containerTypes: ["folder"],
+        filters: [
+          {
+            filterType: "CHECKBOX",
+            label: intl.formatMessage({
+              defaultMessage: "File Type",
+              description: "Label of filters for file type",
+            }),
+            key: "fileType",
+            options: [
+              { value: "mp4", label: "MP4" },
+              { value: "png", label: "PNG" },
+              { value: "jpeg", label: "JPEG" },
+            ],
+            allowCustomValue: true,
+          },
+          {
+            filterType: "RADIO",
+            label: intl.formatMessage({
+              defaultMessage: "Size",
+              description: "Label of filters for asset size",
+            }),
+            key: "size",
+            options: [
+              {
+                label: intl.formatMessage({
+                  defaultMessage: "Large (800+ px)",
+                  description: "One of the filter options for asset size",
+                }),
+                value: "large",
+              },
+              {
+                label: intl.formatMessage({
+                  defaultMessage: "Medium (200-799px)",
+                  description: "One of the filter options for asset size",
+                }),
+                value: "medium",
+              },
+            ],
+            allowCustomValue: true,
+            customValueInputType: "SIZE_RANGE",
+          },
+          {
+            filterType: "RADIO",
+            label: intl.formatMessage({
+              defaultMessage: "Update Date",
+              description: "Label of the filters for asset's update date",
+            }),
+            key: "updateDate",
+            options: [
+              {
+                value: ">now-30m",
+                label: intl.formatMessage({
+                  defaultMessage: "Last 30 Minutes",
+                  description:
+                    "One of the filter options for asset update date",
+                }),
+              },
+              {
+                value: ">now-7d",
+                label: intl.formatMessage({
+                  defaultMessage: "Last 7 days",
+                  description:
+                    "One of the filter options for asset update date",
+                }),
+              },
+            ],
+            allowCustomValue: true,
+            customValueInputType: "DATE_RANGE",
+          },
+          {
+            filterType: "RADIO",
+            label: intl.formatMessage({
+              defaultMessage: "Design Status",
+              description: "Label of the filters for asset's design status",
+            }),
+            key: "designStatus",
+            options: [
+              {
+                value: "approved",
+                label: intl.formatMessage({
+                  defaultMessage: "Approved",
+                  description:
+                    "One of the filter options for asset design status",
+                }),
+              },
+              {
+                value: "rejected",
+                label: intl.formatMessage({
+                  defaultMessage: "Rejected",
+                  description:
+                    "One of the filter options for asset design status",
+                }),
+              },
+              {
+                value: "draft",
+                label: intl.formatMessage({
+                  defaultMessage: "Draft",
+                  description:
+                    "One of the filter options for asset design status",
+                }),
+              },
+            ],
+            allowCustomValue: true,
+            customValueInputType: "PLAIN_TEXT",
+          },
+        ],
+      },
     },
-  },
-  containerTypes: [
-    {
-      value: "folder",
-      label: "Folders",
-      listingSurfaces: [
-        { surface: "HOMEPAGE" },
-        {
-          surface: "CONTAINER",
-          parentContainerTypes: ["folder"],
+    containerTypes: [
+      {
+        value: "folder",
+        label: intl.formatMessage({
+          defaultMessage: "Folders",
+          description: "Name of the asset container type",
+        }),
+        listingSurfaces: [
+          { surface: "HOMEPAGE" },
+          {
+            surface: "CONTAINER",
+            parentContainerTypes: ["folder"],
+          },
+          { surface: "SEARCH" },
+        ],
+        searchInsideContainer: {
+          enabled: true,
+          placeholder: intl.formatMessage({
+            defaultMessage: "Search for media inside this folder",
+            description: "Placeholder of a search input box",
+          }),
         },
-        { surface: "SEARCH" },
-      ],
-      searchInsideContainer: {
-        enabled: true,
-        placeholder: "Search for resources inside this folder",
       },
+    ],
+    sortOptions: [
+      {
+        value: "created_at DESC",
+        label: intl.formatMessage({
+          defaultMessage: "Creation date (newest)",
+          description: "One of the sort options",
+        }),
+      },
+      {
+        value: "created_at ASC",
+        label: intl.formatMessage({
+          defaultMessage: "Creation date (oldest)",
+          description: "One of the sort options",
+        }),
+      },
+      {
+        value: "updated_at DESC",
+        label: intl.formatMessage({
+          defaultMessage: "Updated (newest)",
+          description: "One of the sort options",
+        }),
+      },
+      {
+        value: "updated_at ASC",
+        label: intl.formatMessage({
+          defaultMessage: "Updated (oldest)",
+          description: "One of the sort options",
+        }),
+      },
+      {
+        value: "name ASC",
+        label: intl.formatMessage({
+          defaultMessage: "Name (A-Z)",
+          description: "One of the sort options",
+        }),
+      },
+      {
+        value: "name DESC",
+        label: intl.formatMessage({
+          defaultMessage: "Name (Z-A)",
+          description: "One of the sort options",
+        }),
+      },
+    ],
+    layouts: ["MASONRY", "LIST"],
+    resourceTypes: ["IMAGE", "VIDEO", "EMBED"],
+    moreInfoMessage: intl.formatMessage({
+      defaultMessage:
+        "At the moment, we only support images and videos. Corrupted and unsupported files will not appear.",
+      description: "Helper text to explain why some assets are not visible",
+    }),
+    // TODO remove `export` if your app does not support exporting the Canva design into an external platform
+    export: {
+      enabled: true,
+      // TODO provide a container type that user can choose to save into, or remove this field if user doesn't need to choose a container
+      containerTypes: ["folder"],
+      // TODO remove file types that are not supported by your platform
+      acceptedFileTypes: [
+        "png",
+        "pdf_standard",
+        "jpg",
+        "gif",
+        "svg",
+        "video",
+        "pptx",
+      ],
     },
-  ],
-  sortOptions: [
-    { value: "created_at DESC", label: "Creation date (newest)" },
-    { value: "created_at ASC", label: "Creation date (oldest)" },
-    { value: "updated_at DESC", label: "Updated (newest)" },
-    { value: "updated_at ASC", label: "Updated (oldest)" },
-    { value: "name ASC", label: "Name (A-Z)" },
-    { value: "name DESC", label: "Name (Z-A)" },
-  ],
-  layouts: ["MASONRY", "LIST"],
-  resourceTypes: ["IMAGE", "VIDEO", "EMBED"],
-  moreInfoMessage:
-    "At the moment, we only support images and videos. Corrupted and unsupported files will not appear.",
+  };
 };

package/templates/gen_ai/package.json

@@ -18,7 +18,7 @@
   },
   "dependencies": {
     "@canva/app-i18n-kit": "^1.0.2",
-    "@canva/app-ui-kit": "^4.4.0",
+    "@canva/app-ui-kit": "^4.5.0",
     "@canva/asset": "^2.1.0",
     "@canva/design": "^2.3.0",
     "@canva/error": "^2.1.0",
@@ -35,7 +35,7 @@
     "react-router-dom": "6.28.0"
   },
   "devDependencies": {
-    "@canva/cli": "^0.0.1-beta.11",
+    "@canva/cli": ">= 0.0.1-beta.13 < 0.0.2",
     "@eslint/eslintrc": "3.2.0",
     "@eslint/js": "9.16.0",
     "@formatjs/cli": "6.3.14",

package/templates/hello_world/package.json

@@ -19,7 +19,7 @@
   },
   "dependencies": {
     "@canva/app-i18n-kit": "^1.0.2",
-    "@canva/app-ui-kit": "^4.4.0",
+    "@canva/app-ui-kit": "^4.5.0",
     "@canva/asset": "^2.1.0",
     "@canva/design": "^2.3.0",
     "@canva/error": "^2.1.0",
@@ -30,7 +30,7 @@
     "react-intl": "6.8.7"
   },
   "devDependencies": {
-    "@canva/cli": "^0.0.1-beta.11",
+    "@canva/cli": ">= 0.0.1-beta.13 < 0.0.2",
     "@eslint/eslintrc": "3.2.0",
     "@eslint/js": "9.16.0",
     "@formatjs/cli": "6.3.14",

package/templates/hello_world/src/tests/__snapshots__/app.tests.tsx.snap

@@ -10,7 +10,7 @@ exports[`Hello World Tests should have a consistent snapshot 1`] = `
       style="--NZu1Zw: 16px;"
     >
       <p
-        class="fFOiLQ _5Ob_nQ fM_HdA"
+        class="D6xAvw E44aNA rU8RQQ"
       >
         To make changes to this app, edit the 
         <code>
@@ -19,21 +19,21 @@ exports[`Hello World Tests should have a consistent snapshot 1`] = `
          file, then close and reopen the app in the editor to preview the changes.
       </p>
       <button
-        class="_1QoxDw Qkd66A tYI0Vw o4TrkA zKTE_w Qkd66A tYI0Vw lsXp_w ubW6qw cwOZMg zQlusQ uRvRjQ"
+        class="_5KtATA LQzFZw xwTbNA _8ERLTg rV61VQ LQzFZw xwTbNA _4_iekA _3oHQrw j34Zww aqbYPg _3FvZZg"
         type="button"
       >
         <span
-          class="_38oWvQ"
+          class="khPe7Q"
         >
           Do something cool
         </span>
       </button>
       <button
-        class="_1QoxDw Qkd66A tYI0Vw o4TrkA NT2yCg Qkd66A tYI0Vw lsXp_w cwOZMg zQlusQ uRvRjQ"
+        class="_5KtATA LQzFZw xwTbNA _8ERLTg Z3nT2A LQzFZw xwTbNA _4_iekA j34Zww aqbYPg _3FvZZg"
         type="button"
       >
         <span
-          class="_38oWvQ"
+          class="khPe7Q"
         >
           Open Canva Apps SDK docs
         </span>