Intent navigation example

// For usage information, see the README.md file.
// This root index file contains the prepare function calls that initialize each intent.
// Each intent entrypoint is respondible for exporting the intent contract implementation.
import { prepareContentPublisher } from "@canva/intents/content";
import { prepareDesignEditor } from "@canva/intents/design";
import { prepareDataConnector } from "@canva/intents/data";

import dataConnector from "./intents/data_connector";
import contentPublisher from "./intents/content_publisher";
import designEditor from "./intents/design_editor";

prepareDataConnector(dataConnector);
prepareContentPublisher(contentPublisher);
prepareDesignEditor(designEditor);

// For usage information, see the README.md file.
import type {
  ContentPublisherIntent,
  GetPublishConfigurationResponse,
  PublishContentRequest,
  PublishContentResponse,
  RenderPreviewUiRequest,
  RenderSettingsUiRequest,
} from "@canva/intents/content";
import { createRoot } from "react-dom/client";
import "@canva/app-ui-kit/styles.css";
import { AppUiProvider, Box } from "@canva/app-ui-kit";
import { Rows, Text } from "@canva/app-ui-kit";
import * as styles from "styles/components.css";

// This example demonstrates how to launch Content Publisher Intent and Bulk Create with Data Connector Intent from within a Design Editor Intent.
// For a more detailed example of the Content Publisher Intent, refer to the content_publisher_intent example.

// Define the output types (publishing formats) available to users
// Canva automatically displays a dropdown selector when more than one output type is defined
async function getPublishConfiguration(): Promise<GetPublishConfigurationResponse> {
  return {
    status: "completed",
    outputTypes: [
      {
        id: "post",
        displayName: "Output type: Post",
        mediaSlots: [
          {
            id: "media",
            displayName: "Media",
            fileCount: { exact: 1 },
            accepts: {
              image: {
                format: "png",
                // Social media post aspect ratio range (portrait to landscape)
                aspectRatio: { min: 4 / 5, max: 1.91 / 1 },
              },
            },
          },
        ],
      },
    ],
  };
}

// Render the settings UI where users configure publishing options
function renderSettingsUi(request: RenderSettingsUiRequest) {
  const root = createRoot(document.getElementById("root") as Element);

  root.render(
    <AppUiProvider>
      <div className={styles.scrollContainer}>
        <Rows spacing="2u">
          <Text>
            This is the content publisher intent portion of the app. Here you
            would render an interface for controlling the publishing settings.
          </Text>
        </Rows>
      </div>
    </AppUiProvider>,
  );
}
// Render the preview UI showing how the content will appear after publishing
function renderPreviewUi(request: RenderPreviewUiRequest) {
  const root = createRoot(document.getElementById("root") as Element);
  root.render(
    <AppUiProvider>
      <div className={styles.previewContainer}>
        <Box
          className={styles.previewWrapper}
          background="surface"
          borderRadius="large"
          padding="2u"
          border="standard"
        >
          <Rows spacing="2u">
            <Text>
              This is the content publisher intent portion of the app. Here you
              would render a preview for visualising how the design would appear
              in the publishing platform.
            </Text>
          </Rows>
        </Box>
      </div>
    </AppUiProvider>,
  );
}

// Handle the actual publishing when the user clicks the publish button
// In production, this should make API calls to your platform
async function publishContent(
  request: PublishContentRequest,
): Promise<PublishContentResponse> {
  // Replace this with your actual API integration
  // Example: Upload media to your platform and create a post
  // const uploadedMedia = await uploadToYourPlatform(params.outputMedia);
  // const post = await createPostOnYourPlatform({
  //   media: uploadedMedia,
  //   caption: JSON.parse(params.publishRef).caption
  // });

  return {
    status: "completed",
    externalId: "1234567890", // Your platform's unique identifier for this post
    externalUrl: "https://example.com/posts/1234567890", // Link to view the published content
  };
}

const contentPublisher: ContentPublisherIntent = {
  renderSettingsUi,
  renderPreviewUi,
  getPublishConfiguration,
  publishContent,
};

export default contentPublisher;

import type {
  DataConnectorIntent,
  GetDataTableRequest,
  GetDataTableResponse,
  RenderSelectionUiRequest,
} from "@canva/intents/data";
import { createRoot } from "react-dom/client";
import { AppUiProvider, Rows, Text } from "@canva/app-ui-kit";
import * as styles from "styles/components.css";

// This example demonstrates how to launch Content Publisher Intent and Bulk Create with Data Connector Intent from within a Design Editor Intent.
// For a more detailed example of the Data Connector Intent, refer to the data_connector_intent example.

// Fetches data from external sources, transforms and returns the Canva's DataTable format
async function getDataTable(
  request: GetDataTableRequest,
): Promise<GetDataTableResponse> {
  const { signal } = request;

  // Check if the operation has been aborted.
  if (signal.aborted) {
    return {
      status: "app_error",
      message: "The data fetch operation was cancelled.",
    };
  }

  return {
    status: "completed",
    dataTable: {
      rows: [{ cells: [{ type: "string", value: "Fetched data" }] }],
    },
  };
}

// Renders a UI component for selecting and configuring data from external sources.
async function renderSelectionUi(
  request: RenderSelectionUiRequest,
): Promise<void> {
  const root = createRoot(document.getElementById("root") as Element);

  root.render(
    <AppUiProvider>
      <div className={styles.scrollContainer}>
        <Rows spacing="2u">
          <Text>
            This is the data connector intent portion of the app. Here you would
            render an interface for controlling the data table.
          </Text>
        </Rows>
      </div>
    </AppUiProvider>,
  );
}

const dataConnector: DataConnectorIntent = {
  getDataTable,
  renderSelectionUi,
};

export default dataConnector;

import "@canva/app-ui-kit/styles.css";
import type { DesignEditorIntent } from "@canva/intents/design";
import { AppUiProvider } from "@canva/app-ui-kit";
import { createRoot } from "react-dom/client";
import { Button, Rows, Text } from "@canva/app-ui-kit";
import { publish, bulkCreate } from "@canva/design";
import { useFeatureSupport } from "@canva/app-hooks";
import * as styles from "styles/components.css";

// This example demonstrates how to launch Content Publisher Intent and Bulk Create with Data Connector Intent from within a Design Editor Intent.
// For a more detailed example of the Design Editor Intent and all its capabilities, refer to other app examples in this starter kit.

const App = () => {
  const isSupported = useFeatureSupport();
  const bulkCreateSupported = isSupported(bulkCreate.launch);
  const publishSupported = isSupported(publish.launch);

  const launchBulkCreate = async () => {
    await bulkCreate.launch({ withDataConnector: "self" });
  };

  const launchContentPublisher = async () => {
    await publish.launch({ withContentPublisher: "self" });
  };

  return (
    <div className={styles.scrollContainer}>
      <Rows spacing="2u">
        <Text>This is the design editor intent portion of the app.</Text>
        {bulkCreateSupported && (
          <Button variant="primary" onClick={launchBulkCreate}>
            Launch Bulk Create with Data Connector Intent
          </Button>
        )}
        {publishSupported && (
          <Button variant="primary" onClick={launchContentPublisher}>
            Launch Content Publisher Intent
          </Button>
        )}
      </Rows>
    </div>
  );
};

async function render() {
  const root = createRoot(document.getElementById("root") as Element);

  // Render the design editor intent UI
  root.render(
    <AppUiProvider>
      <App />
    </AppUiProvider>,
  );
}

const designEditor: DesignEditorIntent = { render };
export default designEditor;

# Intent Navigation

This example demonstrates how to structure an app to implement multiple intents in the same code and how to launch the content publisher and the data connector in bulk create from the design editor intent. The app is a combination of the design editor starter example, the data connector example and the content publisher example, with `bulkCreate.launch()` and `publish.launch()` calls.

It is recommended to walk through the `implement_multiple_intents` example, to understand the concept of multiple intents in the same code, before stepping into navigating between intents.

Similar to the `implement_multiple_intents` example, the root index file `src/index.tsx` calls the prepare function for each implemented intent.

There's a `src/intents` folder, and within this folder there's one folder for each implemented intent. The index file of these folders implements the intent contract.

For example, `src/index.tsx` calls `prepareDesignEditor` with the `DesignEditorIntent` implementation imported from `src/intents/design_editor/index.tsx`, calls `prepareDataConnector` with the `DataConnectorIntent` implementation imported from `src/intents/data_connector/index.tsx`, and calls `prepareContentPublisher` with the `ContentPublisherIntent` implementation imported from `src/intents/content_publisher/index.tsx`.

In `src/intents/design_editor/index.tsx`, there are 2 buttons to launch the bulk create with data connector intent and to launch publish with content publisher intent. There is no way to launch any intent from inside the data connector intent or the content publisher intent, as an error will be thrown.

This example also has a `canva-app.json` app config file with all related intents enrolled.

NOTE: This example differs from what is expected for public apps to pass a Canva review:

- Error handling is simplified for demonstration. Production apps must implement comprehensive error handling with clear user feedback and graceful failure modes
- Accessibility features aren't fully implemented. Production apps must meet WCAG 2.0 AA standards with proper keyboard navigation and ARIA labels
- Internationalization is not implemented. Production apps must support multiple languages using the `@canva/app-i18n-kit` package to pass Canva review requirements