@canva/cli 1.13.0 → 1.15.0

package/templates/content_publisher/src/intents/content_publisher/post_preview.tsx

@@ -0,0 +1,226 @@
+import {
+  Avatar,
+  Box,
+  ImageCard,
+  Placeholder,
+  Rows,
+  Text,
+  TextPlaceholder,
+} from "@canva/app-ui-kit";
+import type { Preview, PreviewMedia } from "@canva/intents/content";
+import { FormattedMessage, useIntl } from "react-intl";
+import * as styles from "../../../styles/preview_ui.css";
+import type { PublishSettings } from "./types";
+
+const IMAGE_WIDTH = 400;
+
+interface PreviewProps {
+  previewMedia: PreviewMedia[] | undefined;
+  settings: PublishSettings | undefined;
+  username: string;
+}
+
+// TODO: Customize this preview to match what the published content will look like on your platform.
+// This example shows a generic social media post with avatar, image, and caption.
+// Consider: platform-specific dimensions, branding colors, and UI elements.
+export const PostPreview = ({
+  previewMedia,
+  settings,
+  username,
+}: PreviewProps) => {
+  const isLoading = !previewMedia;
+
+  const caption = settings?.caption;
+
+  return (
+    <Box
+      className={styles.wrapper}
+      background="surface"
+      borderRadius="large"
+      padding="2u"
+      border="standard"
+    >
+      <Rows spacing="2u">
+        <UserInfo isLoading={isLoading} username={username} />
+        <ImagePreview previewMedia={previewMedia} />
+        <Caption isLoading={isLoading} caption={caption} />
+      </Rows>
+    </Box>
+  );
+};
+
+// Renders user profile information with avatar and username
+const UserInfo = ({
+  isLoading,
+  username,
+}: {
+  isLoading: boolean;
+  username: string;
+}) => {
+  return (
+    <div className={styles.user}>
+      <Box className={styles.avatar}>
+        <Avatar name={username} />
+      </Box>
+      {isLoading ? (
+        <div className={styles.textPlaceholder}>
+          <TextPlaceholder size="medium" />
+        </div>
+      ) : (
+        <Text size="small" variant="bold">
+          {username}
+        </Text>
+      )}
+    </div>
+  );
+};
+
+// Renders the post caption with username
+const Caption = ({
+  isLoading,
+  caption,
+}: {
+  isLoading: boolean;
+  caption: string | undefined;
+}) => {
+  return (
+    <>
+      {isLoading ? (
+        <div className={styles.textPlaceholder}>
+          <TextPlaceholder size="medium" />
+        </div>
+      ) : (
+        caption && (
+          <Text lineClamp={2} size="small">
+            {caption}
+          </Text>
+        )
+      )}
+    </>
+  );
+};
+
+// Renders a single image post preview
+const ImagePreview = ({
+  previewMedia,
+}: {
+  previewMedia: PreviewMedia[] | undefined;
+}) => {
+  const isLoading = !previewMedia;
+  const media = previewMedia?.find((media) => media.mediaSlotId === "media");
+  const fullWidth = (media?.previews.length ?? 1) * IMAGE_WIDTH;
+
+  return (
+    <Box borderRadius="large" className={styles.imageContainer}>
+      {isLoading || !media?.previews.length ? (
+        <div className={styles.imagePlaceholder}>
+          <Placeholder shape="rectangle" />
+        </div>
+      ) : (
+        <div className={styles.imageRow} style={{ width: fullWidth }}>
+          {media?.previews.map((p) => {
+            return (
+              <div key={p.id} className={styles.image}>
+                <PreviewRenderer preview={p} />
+              </div>
+            );
+          })}
+        </div>
+      )}
+    </Box>
+  );
+};
+
+// Renders individual preview based on its type and status
+const PreviewRenderer = ({ preview }: { preview: Preview }) => {
+  const intl = useIntl();
+  // Handle different preview states
+  if (preview.status === "loading") {
+    return (
+      <ImageStatusText
+        text={intl.formatMessage({
+          defaultMessage: "Loading...",
+          description: "Text displayed while the preview is loading",
+        })}
+      />
+    );
+  }
+
+  if (preview.status === "error") {
+    return (
+      <ImageStatusText
+        text={intl.formatMessage({
+          defaultMessage: "Error loading preview",
+          description:
+            "Text displayed when there is an error loading the preview",
+        })}
+      />
+    );
+  }
+
+  // Handle image previews (ready status)
+  if (isImagePreviewReady(preview)) {
+    return (
+      <ImageCard
+        alt={intl.formatMessage(
+          {
+            defaultMessage: "Image preview {previewId}",
+            description: "Alt text for image preview in the preview UI",
+          },
+          { previewId: preview.id },
+        )}
+        thumbnailUrl={preview.url}
+      />
+    );
+  }
+
+  // Fallback for unknown preview types
+  return (
+    <Box
+      width="full"
+      height="full"
+      padding="2u"
+      display="flex"
+      alignItems="center"
+      justifyContent="center"
+    >
+      <Text size="medium" tone="tertiary" alignment="center">
+        <FormattedMessage
+          defaultMessage="Preview not available"
+          description="Text displayed when the preview type is not supported"
+        />
+      </Text>
+    </Box>
+  );
+};
+
+// Helper component to display status text for loading/error states
+const ImageStatusText = ({ text }: { text: string }) => (
+  <Box
+    width="full"
+    height="full"
+    padding="2u"
+    display="flex"
+    alignItems="center"
+    justifyContent="center"
+  >
+    <Text size="medium" tone="tertiary" alignment="center">
+      {text}
+    </Text>
+  </Box>
+);
+
+/**
+ * Type guard to check if a preview is an image preview that's ready to display
+ */
+export function isImagePreviewReady(preview: Preview): preview is Preview & {
+  kind: "image";
+  status: "ready";
+  url: string;
+} {
+  return (
+    preview.kind === "image" &&
+    preview.status === "ready" &&
+    preview.url != null
+  );
+}

package/templates/content_publisher/src/intents/content_publisher/preview_ui.tsx

@@ -0,0 +1,53 @@
+import type { OutputType, PreviewMedia } from "@canva/intents/content";
+import { useEffect, useState } from "react";
+import * as styles from "../../../styles/preview_ui.css";
+import { PostPreview } from "./post_preview";
+import { parsePublishSettings } from "./types";
+
+interface PreviewUiProps {
+  registerOnPreviewChange: (
+    callback: (opts: {
+      previewMedia: PreviewMedia[];
+      outputType: OutputType;
+      publishRef?: string;
+    }) => void,
+  ) => () => void;
+}
+
+// TODO: Replace with real user data from your platform
+// After implementing authentication (see README), fetch the connected user's profile
+// to display their actual username and avatar in the preview.
+const username = "username";
+
+// Main preview UI component that receives preview updates when settings or pages change.
+// Preview UI is more flexible to align with your platform's design system, so it is not constrained to the Canva design system.
+export const PreviewUi = ({ registerOnPreviewChange }: PreviewUiProps) => {
+  const [previewData, setPreviewData] = useState<{
+    previewMedia: PreviewMedia[];
+    outputType: OutputType;
+    publishRef?: string;
+  } | null>(null);
+
+  // Register to receive preview updates whenever settings or pages change
+  useEffect(() => {
+    const dispose = registerOnPreviewChange((data) => {
+      setPreviewData(data);
+    });
+    return dispose;
+  }, [registerOnPreviewChange]);
+
+  const { previewMedia, publishRef, outputType } = previewData ?? {};
+  const publishSettings = parsePublishSettings(publishRef);
+
+  return (
+    <div className={styles.container}>
+      {outputType?.id === "post" && (
+        <PostPreview
+          previewMedia={previewMedia}
+          settings={publishSettings}
+          username={username}
+        />
+      )}
+    </div>
+  );
+};

package/templates/content_publisher/src/intents/content_publisher/settings_ui.tsx

@@ -0,0 +1,71 @@
+import { FormField, Rows, Text, TextInput } from "@canva/app-ui-kit";
+import type {
+  PublishRefValidityState,
+  RenderSettingsUiRequest,
+  SettingsUiContext,
+} from "@canva/intents/content";
+import { useEffect, useState } from "react";
+import { useIntl } from "react-intl";
+import * as styles from "styles/components.css";
+import type { PublishSettings } from "./types";
+
+// Settings UI component for configuring publish settings
+export const SettingsUi = ({
+  updatePublishSettings,
+  registerOnSettingsUiContextChange,
+}: RenderSettingsUiRequest) => {
+  const intl = useIntl();
+  const [settings, setSettings] = useState<PublishSettings>({ caption: "" });
+  const [settingsUiContext, setSettingsUiContext] =
+    useState<SettingsUiContext | null>(null);
+
+  // Listen for settings UI context changes (e.g., when output type changes)
+  useEffect(() => {
+    const dispose = registerOnSettingsUiContextChange((context) => {
+      setSettingsUiContext(context);
+    });
+    return dispose;
+  }, [registerOnSettingsUiContextChange]);
+
+  return (
+    <div className={styles.scrollContainer}>
+      <Rows spacing="2u">
+        {settingsUiContext?.outputType.displayName && (
+          <Text>{settingsUiContext?.outputType.displayName}</Text>
+        )}
+        <FormField
+          label={intl.formatMessage({
+            defaultMessage: "Caption",
+            description: "Label for the caption input field",
+          })}
+          control={(props) => (
+            <TextInput
+              {...props}
+              value={settings.caption}
+              onChange={(caption) => {
+                const updatedSettings = { ...settings, caption };
+                setSettings(updatedSettings);
+                updatePublishSettings({
+                  publishRef: JSON.stringify(settings),
+                  validityState: validatePublishRef(settings),
+                });
+              }}
+            />
+          )}
+        />
+      </Rows>
+    </div>
+  );
+};
+
+// Validates the publish settings to enable/disable the publish button
+// Returns "valid" when all required fields are filled
+const validatePublishRef = (
+  publishRef: PublishSettings,
+): PublishRefValidityState => {
+  // caption is required
+  if (publishRef.caption.length === 0) {
+    return "invalid_missing_required_fields";
+  }
+  return "valid";
+};

package/templates/content_publisher/src/intents/content_publisher/types.ts

@@ -0,0 +1,29 @@
+/**
+ * Type definition for publish settings.
+ * These settings are serialized and passed between different parts of the publish flow.
+ * In production, include all platform-specific settings needed for publishing.
+ */
+export interface PublishSettings {
+  caption: string;
+  // TODO: Add additional fields for your platform's publishing requirements
+  // Examples:
+  // scheduledTime: Date;
+  // visibility: "public" | "private" | "unlisted";
+  // tags: string[];
+}
+
+/**
+ * Utility function to safely parse publish settings from a JSON string.
+ * This is used to deserialize settings that were passed through the publish flow.
+ */
+export function parsePublishSettings(
+  publishRef?: string,
+): PublishSettings | undefined {
+  if (!publishRef) return undefined;
+
+  try {
+    return JSON.parse(publishRef) as PublishSettings;
+  } catch {
+    return undefined;
+  }
+}

package/templates/content_publisher/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/content_publisher/styles/preview_ui.css

@@ -0,0 +1,88 @@
+/* Main container for the preview UI */
+.container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+}
+
+/* Scale down preview on mobile devices */
+@media (max-width: 600px) {
+  .container {
+    transform: scale(0.3);
+  }
+}
+
+/* Wrapper for the social media post preview */
+.wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: calc(400px + 32px + 2px); /* Image width + padding + border */
+}
+
+/* User profile section styling */
+.user {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+/* Avatar styling to match social media appearance */
+.avatar {
+  transform: scale(0.6);
+  width: 24px;
+  height: 24px;
+  transform-origin: top left;
+}
+
+.avatarImage {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+/* Text placeholder for loading states */
+.textPlaceholder {
+  min-width: calc(8 * 20);
+}
+
+/* Container for media images */
+.imageContainer {
+  overflow: hidden; /* Enable border radius */
+}
+
+/* Row containing all images */
+.imageRow {
+  overflow-y: hidden;
+  overflow-x: auto;
+  height: 400px;
+  display: flex;
+}
+
+/* Aspect ratio helpers for different image formats */
+.aspect-1-1 {
+  padding-top: 100%;
+}
+
+.aspect-3-4 {
+  padding-top: 133.33%;
+}
+
+/* Individual image and placeholder styling */
+.imagePlaceholder,
+.image {
+  width: 400px;
+  height: 400px;
+  object-fit: cover;
+  display: inline-block;
+  position: relative;
+}
+
+/* Icon placeholder styling */
+.iconPlaceholder {
+  width: 24px;
+  height: 24px;
+}

package/templates/content_publisher/tsconfig.json

@@ -0,0 +1,56 @@
+{
+  "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"
+    }
+  }
+}