@canva/cli 1.11.0 → 1.12.0

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

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

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

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

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

@@ -0,0 +1,56 @@
+/* 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;
+}
+
+/* Main container for the content publisher preview UI */
+.previewContainer {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+}
+
+/* Wrapper for the content publisher post preview */
+.previewWrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: calc(400px + 32px + 2px); /* Image width + padding + border */
+}

package/templates/mls/tsconfig.json

@@ -0,0 +1,55 @@
+{
+  "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": {
+      "assets": ["./assets"],
+      "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

@@ -0,0 +1,254 @@
+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: {
+        assets: path.resolve(process.cwd(), "assets"),
+        utils: path.resolve(process.cwd(), "utils"),
+        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",
+    },
+    static: {
+      directory: path.resolve(process.cwd(), "assets"),
+      publicPath: "/assets",
+    },
+  };
+
+  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;