@canva/cli 1.19.0 → 1.20.0

package/templates/mls/src/pages/office_selection_page/office_selection_page.tsx

@@ -1,144 +0,0 @@
-import {
-  Avatar,
-  Box,
-  Button,
-  FormField,
-  Rows,
-  Select,
-  Text,
-} from "@canva/app-ui-kit";
-import React from "react";
-import { useForm } from "react-hook-form";
-import { useIntl } from "react-intl";
-import { useNavigate } from "react-router-dom";
-import { mockUserData, offices } from "../../data";
-
-type FormValues = {
-  office: string;
-  agent: string;
-};
-
-export const OfficeSelectionPage = () => {
-  const navigate = useNavigate();
-  const intl = useIntl();
-  const {
-    handleSubmit,
-    setValue,
-    watch,
-    formState: { touchedFields, isSubmitted },
-  } = useForm<FormValues>({
-    mode: "onSubmit",
-    defaultValues: {
-      office: "",
-    },
-    criteriaMode: "all",
-  });
-
-  const selectedOffice = watch("office");
-
-  const onSubmit = (data: FormValues) => {
-    const office = offices.find((o) => o.id === data.office);
-    if (office) {
-      navigate(`/loading`, { state: { office } });
-    }
-  };
-
-  return (
-    <Box paddingY="2u" height="full">
-      <Box
-        height="full"
-        display="flex"
-        flexDirection="column"
-        justifyContent="spaceBetween"
-      >
-        <form onSubmit={handleSubmit(onSubmit)}>
-          <Rows spacing="2u">
-            <FormField
-              label={intl.formatMessage({
-                defaultMessage: "Office",
-                description: "Label for office selection dropdown",
-              })}
-              error={
-                touchedFields.office &&
-                !selectedOffice &&
-                intl.formatMessage({
-                  defaultMessage: "Please select an office",
-                  description: "Error message when office is not selected",
-                })
-              }
-              control={(props) => (
-                <Select
-                  {...props}
-                  stretch
-                  options={offices.map((office) => ({
-                    label: office.name,
-                    value: office.id,
-                  }))}
-                  placeholder={intl.formatMessage({
-                    defaultMessage: "Select office",
-                    description: "Placeholder text for office selection",
-                  })}
-                  onChange={(value) => {
-                    setValue("office", value, {
-                      shouldValidate: true,
-                    });
-                  }}
-                  value={selectedOffice}
-                />
-              )}
-            />
-            <Rows spacing="0.5u">
-              <Button
-                variant="primary"
-                stretch
-                type="submit"
-                disabled={isSubmitted && !selectedOffice}
-              >
-                {intl.formatMessage({
-                  defaultMessage: "Continue",
-                  description: "Button text to proceed with selection",
-                })}
-              </Button>
-              {isSubmitted && !selectedOffice && (
-                <Text variant="regular" tone="critical">
-                  {intl.formatMessage({
-                    defaultMessage: "Please select an office and agent",
-                    description:
-                      "Text to prompt user to select office and agent",
-                  })}
-                </Text>
-              )}
-            </Rows>
-          </Rows>
-        </form>
-
-        <Box paddingTop="4u">
-          <Rows spacing="1u">
-            <Text variant="bold">
-              {intl.formatMessage({
-                defaultMessage: "Account",
-                description: "Section header for account information",
-              })}
-            </Text>
-            <Rows spacing="1u" align="start">
-              <Box display="flex" alignItems="start">
-                <Box paddingEnd="1u">
-                  <Avatar
-                    photo={mockUserData.userAvatarUrl}
-                    name={mockUserData.userName || ""}
-                  />
-                </Box>
-                <Rows spacing="0">
-                  <Text>{mockUserData.userName}</Text>
-                  <Text variant="regular" tone="secondary">
-                    {mockUserData.userEmail}
-                  </Text>
-                </Rows>
-              </Box>
-            </Rows>
-          </Rows>
-        </Box>
-      </Box>
-    </Box>
-  );
-};

package/templates/mls/src/real_estate.type.ts

@@ -1,44 +0,0 @@
-export interface Property {
-  id: string;
-  thumbnail: {
-    url: string;
-    width: number;
-    height: number;
-  };
-  url: string;
-  title: string;
-  name: string;
-  description: string;
-  address: string;
-  price: string;
-  suburb: string;
-  listingType: string;
-  listing_images?: {
-    url: string;
-    alt: string;
-    width: number;
-    height: number;
-  }[];
-  agent?: Agent;
-}
-
-export interface Agent {
-  id: string;
-  name: string;
-  officeId?: string;
-  phoneNumber?: string;
-  roleTitle?: string;
-  headshots?: {
-    url: string;
-    width: number;
-    height: number;
-  }[];
-}
-
-export interface Office {
-  id: string;
-  name: string;
-  address?: string;
-  phoneNumber?: string;
-  email?: string;
-}

package/templates/mls/src/util/use_add_element.tsx

@@ -1,62 +0,0 @@
-import { useFeatureSupport } from "@canva/app-hooks";
-import { type ImageMimeType, upload } from "@canva/asset";
-import { addElementAtCursor, addElementAtPoint } from "@canva/design";
-import type { ImageElement, TextElement } from "@canva/design";
-
-const getMimeTypeFromUrl = (url: string): ImageMimeType => {
-  const extension = url.split(".").pop()?.toLowerCase();
-  switch (extension) {
-    case "jpg":
-    case "jpeg":
-      return "image/jpeg";
-    case "png":
-      return "image/png";
-    case "tiff":
-      return "image/tiff";
-    default:
-      return "image/jpeg"; // fallback to jpeg
-  }
-};
-
-export const useAddElement = () => {
-  const isSupported = useFeatureSupport();
-  const addElement = [addElementAtPoint, addElementAtCursor].find((fn) =>
-    isSupported(fn),
-  );
-
-  const addText = (text?: string) => {
-    const textElement: TextElement = {
-      type: "text",
-      children: [text || ""],
-    };
-
-    addElement?.(textElement);
-  };
-
-  const addImage = async (imageUrl: string, altText: string) => {
-    const mimeType = getMimeTypeFromUrl(imageUrl);
-    const image = await upload({
-      mimeType,
-      thumbnailUrl: imageUrl,
-      type: "image",
-      url: imageUrl,
-      aiDisclosure: "none",
-    });
-
-    const imageElement: ImageElement = {
-      type: "image",
-      altText: {
-        text: altText,
-        decorative: true,
-      },
-      ref: image.ref,
-    };
-
-    addElement?.(imageElement);
-  };
-
-  return {
-    addText,
-    addImage,
-  };
-};

package/templates/mls/src/util/use_drag_element.tsx

@@ -1,68 +0,0 @@
-import { useFeatureSupport } from "@canva/app-hooks";
-import { type ImageMimeType, upload } from "@canva/asset";
-import { ui } from "@canva/design";
-import type { DragStartEvent } from "@canva/design";
-import type { DragEvent } from "react";
-
-const getMimeTypeFromUrl = (url: string): ImageMimeType => {
-  const extension = url.split(".").pop()?.toLowerCase();
-  switch (extension) {
-    case "jpg":
-    case "jpeg":
-      return "image/jpeg";
-    case "png":
-      return "image/png";
-    case "tiff":
-      return "image/tiff";
-    default:
-      return "image/jpeg"; // fallback to jpeg
-  }
-};
-
-export const useDragElement = () => {
-  const isSupported = useFeatureSupport();
-  const startDrag = [ui.startDragToPoint].find((fn) => isSupported(fn));
-
-  const dragText = (event: DragEvent<Element>, text: string) => {
-    startDrag?.(event as unknown as DragStartEvent<HTMLElement>, {
-      type: "text",
-      children: [text],
-    });
-  };
-
-  const dragImage = (
-    event: DragStartEvent<Element>,
-    imageUrl: string,
-    altText: string,
-    width: number,
-    height: number,
-  ) => {
-    const mimeType = getMimeTypeFromUrl(imageUrl);
-    startDrag?.(event as unknown as DragStartEvent<HTMLElement>, {
-      type: "image",
-      resolveImageRef: () => {
-        return upload({
-          mimeType,
-          thumbnailUrl: imageUrl,
-          type: "image",
-          url: imageUrl,
-          aiDisclosure: "none",
-        });
-      },
-      previewUrl: imageUrl,
-      previewSize: {
-        width,
-        height,
-      },
-      fullSize: {
-        width,
-        height,
-      },
-    });
-  };
-
-  return {
-    dragText,
-    dragImage,
-  };
-};

package/templates/mls/styles/components.css

@@ -1,38 +0,0 @@
-/* Scroll container */
-.scrollContainer {
-  box-sizing: border-box;
-  overflow-y: scroll;
-  height: 100%;
-  padding-top: var(--ui-kit-space-200);
-  padding-right: var(--ui-kit-space-200);
-  padding-bottom: var(--ui-kit-space-200);
-
-  /* for firefox */
-  scrollbar-width: thin;
-  scrollbar-color: var(--ui-kit-color-content-placeholder-fg) 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-100);
-  margin-bottom: var(--ui-kit-space-100);
-}
-
-.scrollContainer::-webkit-scrollbar-thumb {
-  border-radius: var(--ui-kit-radius-element-standard);
-  background: var(--ui-kit-color-content-placeholder-fg);
-  visibility: hidden;
-}
-
-.scrollContainer:hover::-webkit-scrollbar-thumb,
-.scrollContainer:focus::-webkit-scrollbar-thumb,
-.scrollContainer:focus-within::-webkit-scrollbar-thumb {
-  visibility: visible;
-}

package/templates/mls/tsconfig.json

@@ -1,54 +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", "@testing-library/jest-dom"],
-    "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,
-    "esModuleInterop": true,
-    "baseUrl": "./",
-    "paths": {
-      "styles": ["./styles"]
-    }
-  },
-  "include": [
-    "./src/**/*",
-    "./backend/**/*",
-    "./utils/**/*",
-    "./scripts/**/*",
-    "./declarations/declarations.d.ts",
-    "./styles/**/*",
-    "./node_modules/@types/**/*"
-  ],
-  "ts-node": {
-    "compilerOptions": {
-      "module": "commonjs"
-    }
-  }
-}

package/templates/mls/webpack.config.ts

@@ -1,248 +0,0 @@
-import type { Configuration } from "webpack";
-import { DefinePlugin, optimize } from "webpack";
-import * as path from "path";
-import TerserPlugin from "terser-webpack-plugin";
-import { transform } from "@formatjs/ts-transformer";
-import chalk from "chalk";
-import { config } from "dotenv";
-import { Configuration as DevServerConfiguration } from "webpack-dev-server";
-
-config();
-
-type DevConfig = {
-  port: number;
-  enableHmr: boolean;
-  enableHttps: boolean;
-  appOrigin?: string;
-  appId?: string; // Deprecated in favour of appOrigin
-  certFile?: string;
-  keyFile?: string;
-};
-
-export function buildConfig({
-  devConfig,
-  appEntry = path.join(process.cwd(), "src", "index.tsx"),
-  backendHost = process.env.CANVA_BACKEND_HOST,
-  // For IN_HARNESS, refer to the following docs for more information: https://www.canva.dev/docs/apps/test-harness/
-  inHarness = process.env.IN_HARNESS?.toLowerCase() === "true",
-}: {
-  devConfig?: DevConfig;
-  appEntry?: string;
-  backendHost?: string;
-  inHarness?: boolean;
-} = {}): Configuration & DevServerConfiguration {
-  const mode = devConfig ? "development" : "production";
-
-  if (!backendHost) {
-    console.error(
-      chalk.redBright.bold("BACKEND_HOST is undefined."),
-      `Refer to "Customizing the backend host" in the README.md for more information.`,
-    );
-    process.exit(-1);
-  } else if (backendHost.includes("localhost") && mode === "production") {
-    console.error(
-      chalk.redBright.bold(
-        "BACKEND_HOST should not be set to localhost for production builds!",
-      ),
-      `Refer to "Customizing the backend host" in the README.md for more information.`,
-    );
-  }
-
-  return {
-    mode,
-    context: path.resolve(process.cwd(), "./"),
-    entry: inHarness
-      ? {
-          harness: path.join(process.cwd(), "harness", "harness.tsx"),
-          init: path.join(process.cwd(), "harness", "init.ts"),
-        }
-      : {
-          app: appEntry,
-        },
-    target: "web",
-    resolve: {
-      alias: {
-        styles: path.resolve(process.cwd(), "styles"),
-        src: path.resolve(process.cwd(), "src"),
-      },
-      extensions: [".ts", ".tsx", ".js", ".css", ".svg", ".woff", ".woff2"],
-    },
-    infrastructureLogging: {
-      level: inHarness ? "info" : "none",
-    },
-    module: {
-      rules: [
-        {
-          test: /\.tsx?$/,
-          exclude: /node_modules/,
-          use: [
-            {
-              loader: "ts-loader",
-              options: {
-                transpileOnly: true,
-                getCustomTransformers() {
-                  return {
-                    before: [
-                      transform({
-                        overrideIdFn: "[sha512:contenthash:base64:6]",
-                      }),
-                    ],
-                  };
-                },
-              },
-            },
-          ],
-        },
-        {
-          test: /\.css$/,
-          exclude: /node_modules/,
-          use: [
-            "style-loader",
-            {
-              loader: "css-loader",
-              options: {
-                modules: true,
-              },
-            },
-            {
-              loader: "postcss-loader",
-              options: {
-                postcssOptions: {
-                  plugins: [require("cssnano")({ preset: "default" })],
-                },
-              },
-            },
-          ],
-        },
-        {
-          test: /\.(png|jpg|jpeg)$/i,
-          type: "asset/inline",
-        },
-        {
-          test: /\.(woff|woff2)$/,
-          type: "asset/inline",
-        },
-        {
-          test: /\.svg$/,
-          oneOf: [
-            {
-              issuer: /\.[jt]sx?$/,
-              resourceQuery: /react/, // *.svg?react
-              use: ["@svgr/webpack", "url-loader"],
-            },
-            {
-              type: "asset/resource",
-              parser: {
-                dataUrlCondition: {
-                  maxSize: 200,
-                },
-              },
-            },
-          ],
-        },
-        {
-          test: /\.css$/,
-          include: /node_modules/,
-          use: [
-            "style-loader",
-            "css-loader",
-            {
-              loader: "postcss-loader",
-              options: {
-                postcssOptions: {
-                  plugins: [require("cssnano")({ preset: "default" })],
-                },
-              },
-            },
-          ],
-        },
-      ],
-    },
-    optimization: {
-      minimizer: [
-        new TerserPlugin({
-          terserOptions: {
-            format: {
-              // Turned on because emoji and regex is not minified properly using default
-              // https://github.com/facebook/create-react-app/issues/2488
-              ascii_only: true,
-            },
-          },
-        }),
-      ],
-    },
-    output: {
-      filename: `[name].js`,
-      path: path.resolve(process.cwd(), "dist"),
-      clean: true,
-    },
-    plugins: [
-      new DefinePlugin({
-        BACKEND_HOST: JSON.stringify(backendHost),
-      }),
-      // Apps can only submit a single JS file via the Developer Portal
-      new optimize.LimitChunkCountPlugin({ maxChunks: 1 }),
-    ].filter(Boolean),
-    ...buildDevConfig(devConfig),
-  };
-}
-
-function buildDevConfig(options?: DevConfig): {
-  devtool?: string;
-  devServer?: DevServerConfiguration;
-} {
-  if (!options) {
-    return {};
-  }
-
-  const { port, enableHmr, appOrigin, appId, enableHttps, certFile, keyFile } =
-    options;
-  const host = "localhost";
-
-  let devServer: DevServerConfiguration = {
-    server: enableHttps
-      ? {
-          type: "https",
-          options: {
-            cert: certFile,
-            key: keyFile,
-          },
-        }
-      : "http",
-    host,
-    allowedHosts: [host],
-    historyApiFallback: {
-      rewrites: [{ from: /^\/$/, to: "/app.js" }],
-    },
-    port,
-    client: {
-      logging: "verbose",
-    },
-  };
-
-  if (enableHmr && appOrigin) {
-    devServer = {
-      ...devServer,
-      allowedHosts: [host, new URL(appOrigin).hostname],
-      headers: {
-        "Access-Control-Allow-Origin": appOrigin,
-        "Access-Control-Allow-Credentials": "true",
-        "Access-Control-Allow-Private-Network": "true",
-      },
-    };
-  } else {
-    if (enableHmr && !appOrigin) {
-      console.warn(
-        "Attempted to enable Hot Module Replacement (HMR) without configuring App Origin... Disabling HMR.",
-      );
-    }
-    devServer.webSocketServer = false;
-  }
-
-  return {
-    devtool: "source-map",
-    devServer,
-  };
-}
-
-export default buildConfig;

package/templates/optional/.cursor/mcp.json

@@ -1,8 +0,0 @@
-{
-  "mcpServers": {
-    "canva": {
-      "command": "npx",
-      "args": ["-y", "@canva/cli@latest", "mcp"]
-    }
-  }
-}

package/templates/optional/.vscode/extensions.json

@@ -1,6 +0,0 @@
-{
-  // For developers using vscode we recommend the following extensions. Following
-  // and listening to the formatting and linting guidelines can help with
-  // implementation quality and in some instances reduce app review timelines.
-  "recommendations": ["esbenp.prettier-vscode", "dbaeumer.vscode-eslint"]
-}

package/templates/optional/.vscode/mcp.json

@@ -1,9 +0,0 @@
-{
-  "servers": {
-    "canva": {
-      "type": "stdio",
-      "command": "npx",
-      "args": ["-y", "@canva/cli@latest", "mcp"]
-    }
-  }
-}