@canva/cli 1.19.0 → 1.20.0

package/templates/dam/scripts/start/start.ts

@@ -1,46 +0,0 @@
-#!/usr/bin/env node
-import yargs from "yargs";
-import { hideBin } from "yargs/helpers";
-import { AppRunner } from "./app_runner";
-import { Context } from "./context";
-
-const appRunner = new AppRunner();
-
-yargs(hideBin(process.argv))
-  .version(false)
-  .help()
-  .option("ngrok", {
-    description: "Run backend server via ngrok.",
-    type: "boolean",
-    // npm swallows command line args instead of forwarding to the script
-    default:
-      process.env.npm_config_ngrok?.toLocaleLowerCase().trim() === "true",
-  })
-  .option("use-https", {
-    description: "Start local development server on HTTPS.",
-    type: "boolean",
-    // npm swallows commands line args instead of forwarding to the script
-    default:
-      process.env.npm_config_use_https?.toLocaleLowerCase().trim() === "true",
-  })
-  .option("override-frontend-port", {
-    description:
-      "Port to run the local development server on. Overrides the frontend port set in the .env file.",
-    type: "number",
-    alias: "p",
-  })
-  .option("preview", {
-    description: "Open the app in Canva.",
-    type: "boolean",
-    default: false,
-  })
-  .command(
-    "$0",
-    "Starts local development",
-    () => {},
-    (args) => {
-      const ctx = new Context(process.env, args);
-      appRunner.run(ctx);
-    },
-  )
-  .parse();

package/templates/dam/src/index.tsx

@@ -1,4 +0,0 @@
-import { prepareDesignEditor } from "@canva/intents/design";
-import designEditor from "./intents/design_editor";
-
-prepareDesignEditor(designEditor);

package/templates/dam/src/intents/design_editor/adapter.ts

@@ -1,44 +0,0 @@
-import type {
-  FindResourcesRequest,
-  FindResourcesResponse,
-} from "@canva/app-components";
-import { auth } from "@canva/user";
-
-export async function findResources(
-  request: FindResourcesRequest<"folder">,
-): Promise<FindResourcesResponse> {
-  const userToken = await auth.getCanvaUserToken();
-
-  // TODO: Update the API path to match your backend
-  // If using the backend example, the URL should be updated to `${BACKEND_HOST}/api/resources/find` to ensure requests are authenticated in production
-  const url = new URL(`${BACKEND_HOST}/resources/find`);
-
-  try {
-    const response = await fetch(url, {
-      method: "POST",
-      headers: {
-        Authorization: `Bearer ${userToken}`,
-        "Content-Type": "application/json",
-      },
-      body: JSON.stringify(request),
-    });
-    const body = await response.json();
-
-    if (body.resources) {
-      return {
-        type: "SUCCESS",
-        resources: body.resources,
-        continuation: body.continuation,
-      };
-    }
-    return {
-      type: "ERROR",
-      errorCode: body.errorCode || "INTERNAL_ERROR",
-    };
-  } catch {
-    return {
-      type: "ERROR",
-      errorCode: "INTERNAL_ERROR",
-    };
-  }
-}

package/templates/dam/src/intents/design_editor/app.tsx

@@ -1,35 +0,0 @@
-import { SearchableListView } from "@canva/app-components";
-import { Box } from "@canva/app-ui-kit";
-import "@canva/app-ui-kit/styles.css";
-import { findResources } from "./adapter";
-import { useConfig } from "./config";
-import * as styles from "./index.css";
-
-export function App() {
-  const config = useConfig();
-  return (
-    <Box className={styles.rootWrapper} height="full">
-      <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/intents/design_editor/config.ts

@@ -1,220 +0,0 @@
-import type { Config } from "@canva/app-components";
-import { useIntl } from "react-intl";
-
-type ContainerTypes = "folder";
-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",
-            // These options do not need to be translated as they are universal technical terms
-            /* eslint-disable formatjs/no-literal-string-in-object */
-            options: [
-              { value: "mp4", label: "MP4" },
-              { value: "png", label: "PNG" },
-              { value: "jpeg", label: "JPEG" },
-            ],
-            /* eslint-enable formatjs/no-literal-string-in-object */
-            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: 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",
-          }),
-        },
-      },
-    ],
-    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",
-      ],
-    },
-  };
-};

package/templates/dam/src/intents/design_editor/index.css

@@ -1,3 +0,0 @@
-.rootWrapper {
-  overflow-y: hidden;
-}

package/templates/dam/src/intents/design_editor/index.tsx

@@ -1,25 +0,0 @@
-import "@canva/app-ui-kit/styles.css";
-import { AppI18nProvider } from "@canva/app-i18n-kit";
-import { AppUiProvider } from "@canva/app-ui-kit";
-import type { DesignEditorIntent } from "@canva/intents/design";
-import { createRoot } from "react-dom/client";
-import { App } from "./app";
-
-async function render() {
-  const root = createRoot(document.getElementById("root") as Element);
-
-  root.render(
-    <AppI18nProvider>
-      <AppUiProvider>
-        <App />
-      </AppUiProvider>
-    </AppI18nProvider>,
-  );
-}
-
-const designEditor: DesignEditorIntent = { render };
-export default designEditor;
-
-if (module.hot) {
-  module.hot.accept("./app", render);
-}

package/templates/dam/tsconfig.json

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

package/templates/dam/utils/backend/base_backend/create.ts

@@ -1,114 +0,0 @@
-/* eslint-disable no-console */
-import { TokenVerificationError } from "@canva/app-middleware";
-import debug from "debug";
-import express from "express";
-import type { NextFunction, Request, Response } from "express";
-import fs from "fs";
-import http from "http";
-import https from "https";
-
-const serverDebug = debug("server");
-
-interface BaseServer {
-  app: express.Express;
-
-  /**
-   * Starts the server on the address or port provided
-   * @param address port number or string address or if left undefined express defaults to port 3000
-   */
-  start: (address: number | string | undefined) => void;
-}
-
-/**
- * createBaseServer instantiates a customised express server with:
- * - json body handling
- * - health check endpoint
- * - catchall endpoint
- * - error handler catch route
- * - process termination handling
- * - debug logging - prefix starting your server with `DEBUG=server npm run XXX`
- *
- * @returns BaseServer object containing the express app and a start function
- */
-export function createBaseServer(router: express.Router): BaseServer {
-  const SHOULD_ENABLE_HTTPS = process.env?.SHOULD_ENABLE_HTTPS === "true";
-  const HTTPS_CERT_FILE = process.env?.HTTPS_CERT_FILE;
-  const HTTPS_KEY_FILE = process.env?.HTTPS_KEY_FILE;
-
-  const app = express();
-  app.use(express.json());
-
-  // It can help to provide an extra layer of obsecurity to reduce server fingerprinting.
-  app.disable("x-powered-by");
-
-  // Health check endpoint
-  app.get("/healthz", (req, res) => {
-    res.sendStatus(200);
-  });
-
-  // logging middleware
-  app.use((req, _res, next) => {
-    serverDebug(`${new Date().toISOString()}: ${req.method} ${req.url}`);
-    next();
-  });
-
-  // Custom routes router
-  app.use(router);
-
-  // catch all router
-  app.all("*", (req, res) => {
-    res.status(404).send({
-      error: `unhandled '${req.method}' on '${req.url}'`,
-    });
-  });
-
-  // default error handler
-  app.use((err: Error, _req: Request, res: Response, _next: NextFunction) => {
-    // Handle authentication errors from @canva/app-middleware
-    if (err instanceof TokenVerificationError) {
-      res.status(err.statusCode).json({
-        error: err.code,
-        message: err.message,
-      });
-      return;
-    }
-
-    console.error(err.stack);
-    res.status(500).send({
-      error: "something went wrong",
-    });
-  });
-
-  let server;
-  if (SHOULD_ENABLE_HTTPS) {
-    if (!HTTPS_CERT_FILE || !HTTPS_KEY_FILE) {
-      throw new Error(
-        "Looks like you're running the example with --use-https flag, but SSL certificates haven't been generated. Please remove the .ssl/ folder and re-run the command again.",
-      );
-    }
-
-    server = https.createServer(
-      {
-        key: fs.readFileSync(HTTPS_KEY_FILE),
-        cert: fs.readFileSync(HTTPS_CERT_FILE),
-      },
-      app,
-    );
-  } else {
-    server = http.createServer(app);
-  }
-
-  return {
-    app,
-    start: (address: number | string | undefined) => {
-      console.log(`Listening on '${address}'`);
-      server.listen(address);
-      process.on("SIGTERM", () => {
-        serverDebug("SIGTERM signal received: closing HTTP server");
-        server.close(() => {
-          serverDebug("HTTP server closed");
-        });
-      });
-    },
-  };
-}