@canva/cli 1.19.0 → 1.21.0

package/templates/gen_ai/src/components/loading_results.tsx

@@ -1,169 +0,0 @@
-import {
-  Box,
-  Button,
-  Grid,
-  Placeholder,
-  ProgressBar,
-  Rows,
-  Text,
-} from "@canva/app-ui-kit";
-import { useEffect, useState } from "react";
-import { FormattedMessage, useIntl } from "react-intl";
-import { useNavigate } from "react-router-dom";
-import { cancelImageGenerationJob, getImageGenerationJobStatus } from "src/api";
-import { useAppContext } from "src/context";
-import { Paths } from "src/routes/paths";
-
-const INTERVAL_DURATION_IN_MS = 100;
-const TOTAL_PROGRESS_PERCENTAGE = 100;
-const LOADING_THRESHOLD_IN_SECONDS = 1;
-
-/**
- * Manages loading progress by updating progress at regular intervals.
- * @param {number} durationInSeconds - Total duration of the loading process in seconds.
- * @param {boolean} loading - Indicates if loading is in progress.
- * @param {function} setProgress - Function to set progress.
- * @returns {function} Function to clear the interval.
- */
-const manageLoadingProgress = (
-  durationInSeconds: number,
-  loading: boolean,
-  setProgress: (value: number) => void,
-) => {
-  let intervalId = 0;
-  let progress = 0;
-  const totalSteps = (durationInSeconds * 1000) / INTERVAL_DURATION_IN_MS;
-
-  if (loading) {
-    intervalId = window.setInterval(() => {
-      progress += TOTAL_PROGRESS_PERCENTAGE / totalSteps;
-      // If progress reaches 100%, clear the interval
-      if (progress >= TOTAL_PROGRESS_PERCENTAGE) {
-        clearInterval(intervalId);
-      } else {
-        setProgress(progress);
-      }
-    }, INTERVAL_DURATION_IN_MS);
-  }
-
-  // Return function to clear the interval
-  return () => clearInterval(intervalId);
-};
-
-/**
- * Renders a component to display loading results.
- * @param {Object} props - Props for the component.
- * @param {number} props.durationInSeconds - Total duration of the loading process in seconds.
- */
-export const LoadingResults = ({
-  durationInSeconds,
-}: {
-  durationInSeconds: number;
-}) => {
-  const navigate = useNavigate();
-  const [progress, setProgress] = useState(0);
-  const {
-    isLoadingImages,
-    setIsLoadingImages,
-    jobId,
-    setJobId,
-    promptInput,
-    setGeneratedImages,
-    setRemainingCredits,
-  } = useAppContext();
-
-  useEffect(() => {
-    const clearLoadingProgress = manageLoadingProgress(
-      durationInSeconds,
-      isLoadingImages,
-      setProgress,
-    );
-
-    const pollJobStatus = async () => {
-      if (jobId) {
-        try {
-          const { images, credits } = await getImageGenerationJobStatus({
-            jobId,
-          });
-          setGeneratedImages(images);
-          setRemainingCredits(credits);
-          // Clear the jobId after fetching images
-          setJobId("");
-          setIsLoadingImages(false);
-        } catch (error) {
-          if (error === "Job not found") {
-            // job may have been cancelled.
-            setJobId("");
-            setIsLoadingImages(false);
-            navigate(Paths.HOME);
-          }
-        }
-      }
-    };
-
-    pollJobStatus();
-
-    return () => {
-      // Cleanup function to clear the interval when the component unmounts.
-      // This prevents the interval from continuing when a user cancels.
-      clearLoadingProgress();
-    };
-  }, [
-    durationInSeconds,
-    isLoadingImages,
-    setIsLoadingImages,
-    setProgress,
-    jobId,
-  ]);
-
-  const onCancelClick = async () => {
-    await cancelImageGenerationJob(jobId);
-    setIsLoadingImages(false);
-    navigate(Paths.HOME);
-  };
-
-  const intl = useIntl();
-
-  // Check if loading duration is below the threshold
-  if (durationInSeconds <= LOADING_THRESHOLD_IN_SECONDS) {
-    // Return nothing if loading duration is too short to prevent flashing/loading screen from appearing momentarily
-    return null;
-  }
-
-  return (
-    <Rows spacing="2u">
-      <Box paddingTop="4u">
-        {/** Wrapping this grid in a box with paddingTop so that the placeholders render at the same point as the generated images. */}
-        <Grid columns={2} spacing="2u">
-          {Array.from({ length: 4 }, (_, index) => (
-            <Placeholder shape="square" key={index} />
-          ))}
-        </Grid>
-      </Box>
-      <Text size="large" alignment="center">
-        <FormattedMessage
-          defaultMessage="Generating “<strong>{value}</strong>”. This may take up to a minute."
-          description="A message to indicate that the app is generating an image based on the user's prompt, but that this could take some time"
-          values={{
-            value: promptInput,
-            strong: (chunks) => <strong>{chunks}</strong>,
-          }}
-        />
-      </Text>
-      <ProgressBar
-        value={Math.min(progress, 100)}
-        ariaLabel={intl.formatMessage({
-          defaultMessage: "image generation",
-          description:
-            "An aria label for the progress bar for image generation",
-        })}
-      />
-      <Button variant="secondary" onClick={onCancelClick} stretch={true}>
-        {intl.formatMessage({
-          defaultMessage: "Cancel",
-          description: "A button label to stop generating an image",
-        })}
-      </Button>
-    </Rows>
-  );
-};

package/templates/gen_ai/src/components/prompt_input.messages.ts

@@ -1,14 +0,0 @@
-import { defineMessages } from "react-intl";
-
-export const PromptInputMessages = defineMessages({
-  /** Messages related to prompts and user input validation. */
-  promptInspireMe: {
-    defaultMessage: "Inspire me",
-    description:
-      "A button label to generate a prompt automatically, which may inspire the user to write their own",
-  },
-  promptTryAnother: {
-    defaultMessage: "Try another",
-    description: "A button label to try another image generation prompt",
-  },
-});

package/templates/gen_ai/src/components/prompt_input.tsx

@@ -1,154 +0,0 @@
-import {
-  Box,
-  Button,
-  FormField,
-  LightBulbIcon,
-  MultilineInput,
-} from "@canva/app-ui-kit";
-import { useState } from "react";
-import { useIntl } from "react-intl";
-import { useLocation } from "react-router-dom";
-import { useAppContext } from "src/context";
-import { Paths } from "src/routes/paths";
-import { PromptInputMessages as Messages } from "./prompt_input.messages";
-
-// @TODO: Adjust according to your specific requirements.
-const MAX_INPUT_LENGTH = 280;
-const MIN_INPUT_ROWS = 3;
-
-/**
- * Array of example prompts that could be used to generate interesting pictures with an AI.
- * Consider fetching these prompts from a server or API call for dynamic and varied content.
- * These would need to be localised, but that is left out here as the method would depend on
- * the specific implementation or API used.
- */
-const examplePrompts: string[] = [
-  "Cats ruling a parallel universe",
-  "Futuristic city with friendly robots",
-  "Magical forest with unicorns and dragons",
-  "Underwater kingdom with colorful fish and mermaids",
-  "World with altered gravity and flying people",
-  "Alien landscape with strange creatures",
-  "Steampunk adventure on a giant airship",
-  "Whimsical tea party with talking animals",
-  "Cyberpunk cityscape with neon lights",
-  "Post-apocalyptic world reclaimed by nature",
-  "Magical library where books come to life",
-  "Space station orbiting a distant planet",
-  "Time-traveling adventure through historical eras",
-  "Enchanted garden where flowers sing and dance",
-  "Fantasy castle floating among clouds",
-  "Fairytale scene with magical objects",
-  "Cosmic journey through distant galaxies",
-  "World where every day is Halloween",
-  "Futuristic sports arena with cyborgs",
-  "Scene inspired by a classic myth or legend",
-];
-
-/**
- * Generates a new example prompt different from the current prompt.
- * @param {string} currentPrompt - The current prompt.
- * @returns {string} A new example prompt different from the current prompt.
- */
-const generateExamplePrompt = (currentPrompt: string): string => {
-  let newPrompt = currentPrompt;
-
-  // Prevents generating the same prompt twice in a row.
-  let attempts = 0;
-  // Maximum attempts to generate a new prompt. Used as a safeguard against infinite loops.
-  const MAX_ATTEMPTS = 3;
-
-  while (currentPrompt === newPrompt && attempts < MAX_ATTEMPTS) {
-    const randomPrompt =
-      examplePrompts[Math.floor(Math.random() * examplePrompts.length)];
-    if (randomPrompt) {
-      newPrompt = randomPrompt;
-    }
-    attempts++;
-  }
-
-  return newPrompt;
-};
-
-export const PromptInput = () => {
-  const intl = useIntl();
-  const { pathname } = useLocation();
-  const isHomeRoute = pathname === Paths.HOME;
-  const { promptInput, setPromptInput, promptInputError } = useAppContext();
-  const [showInspireMeButton, setShowInspireMeButton] = useState(true);
-  const [inspireMeButtonLabel, setInspireMeButtonLabel] = useState(
-    intl.formatMessage(Messages.promptInspireMe),
-  );
-
-  const onInspireClick = () => {
-    setPromptInput(generateExamplePrompt(promptInput));
-    setInspireMeButtonLabel(intl.formatMessage(Messages.promptTryAnother));
-  };
-
-  const onPromptInputChange = (value: string) => {
-    setShowInspireMeButton(false);
-    setPromptInput(value);
-  };
-
-  const InspireMeButton = () => {
-    return (
-      <Button variant="secondary" icon={LightBulbIcon} onClick={onInspireClick}>
-        {inspireMeButtonLabel}
-      </Button>
-    );
-  };
-
-  const onClearClick = () => {
-    setPromptInput("");
-    setShowInspireMeButton(true);
-    setInspireMeButtonLabel(intl.formatMessage(Messages.promptInspireMe));
-  };
-
-  const ClearButton = () => (
-    <Button variant="tertiary" onClick={onClearClick}>
-      {intl.formatMessage({
-        defaultMessage: "Clear",
-        description:
-          "A button label to remove all contents of the prompt input field",
-      })}
-    </Button>
-  );
-
-  return (
-    <FormField
-      label={intl.formatMessage({
-        defaultMessage: "Describe what you want to create",
-        description:
-          "A label for the input field to describe what the user wants to create",
-      })}
-      error={promptInputError}
-      value={promptInput}
-      control={(props) => (
-        <MultilineInput
-          {...props}
-          placeholder={intl.formatMessage({
-            defaultMessage: "Enter 5+ words to describe...",
-            description:
-              "A placeholder for the input field where the user can describe what they want the AI image generator to create, encouraging them to use a longer, more descriptive phrase. The number of words is not validated, but a longer text will likely improve the quality of the results. Feel free to translate loosely or idiomatically.",
-          })}
-          onChange={onPromptInputChange}
-          maxLength={MAX_INPUT_LENGTH}
-          minRows={MIN_INPUT_ROWS}
-          footer={
-            <Box
-              padding="1u"
-              display="flex"
-              justifyContent={
-                isHomeRoute && showInspireMeButton ? "spaceBetween" : "end"
-              }
-            >
-              {isHomeRoute && showInspireMeButton && <InspireMeButton />}
-              {promptInput && <ClearButton />}
-            </Box>
-          }
-          required={true}
-        />
-      )}
-    />
-  );
-};

package/templates/gen_ai/src/components/remaining_credits.tsx

@@ -1,84 +0,0 @@
-import { Link, Rows, Text, TextPlaceholder } from "@canva/app-ui-kit";
-import { getPlatformInfo, requestOpenExternalUrl } from "@canva/platform";
-import type { JSX } from "react";
-import { FormattedMessage, useIntl } from "react-intl";
-import { useAppContext } from "src/context";
-
-// @TODO: Replace this URL with your custom upselling link.
-const PURCHASE_URL = "https://example.com";
-
-export const RemainingCredits = (): JSX.Element | undefined => {
-  const { remainingCredits, loadingApp } = useAppContext();
-  const platformInfo = getPlatformInfo();
-
-  const RemainingCreditsText = () => {
-    if (loadingApp) {
-      return <TextPlaceholder size="small" />;
-    }
-
-    return (
-      <Text alignment="center" size="small">
-        {remainingCredits > 0 ? (
-          <FormattedMessage
-            defaultMessage="Use <strong>1 of {remainingCredits, number}</strong> {remainingCredits, plural,
-            one {credit}
-            other {credits}
-            }."
-            description="A message to indicate the number of credits, of their total remaining credits, that will be used when generating an image"
-            values={{
-              remainingCredits,
-              strong: (chunks) => <strong>{chunks}</strong>,
-            }}
-          />
-        ) : (
-          <FormattedMessage
-            defaultMessage="No credits remaining."
-            description="A message to indicate that there are no credits available to be used"
-          />
-        )}
-      </Text>
-    );
-  };
-
-  const openExternalUrl = async (url: string) => {
-    await requestOpenExternalUrl({
-      url,
-    });
-  };
-
-  const intl = useIntl();
-
-  return (
-    <Rows spacing="0">
-      <RemainingCreditsText />
-      <Text alignment="center" size="small">
-        {platformInfo.canAcceptPayments ? (
-          <FormattedMessage
-            defaultMessage="Purchase more credits at <link>example.com</link>."
-            description="A message to prompt the user to purchase more credits. Do not translate <link>example.com</link>."
-            values={{
-              link: (chunks) => (
-                <Link
-                  href={PURCHASE_URL}
-                  requestOpenExternalUrl={() => openExternalUrl(PURCHASE_URL)}
-                  tooltipLabel={intl.formatMessage({
-                    defaultMessage: "Example Co. website",
-                    description:
-                      "A title for a link to the website of Example Co.",
-                  })}
-                >
-                  {chunks}
-                </Link>
-              ),
-            }}
-          />
-        ) : (
-          <FormattedMessage
-            defaultMessage="Open this app in a web browser to learn how to purchase more credits."
-            description="A message shown when platform doesn't allow external payment links"
-          />
-        )}
-      </Text>
-    </Rows>
-  );
-};

package/templates/gen_ai/src/components/report_box.tsx

@@ -1,54 +0,0 @@
-import { Box, Column, Columns, FlagIcon, Link, Text } from "@canva/app-ui-kit";
-import { requestOpenExternalUrl } from "@canva/platform";
-import type { JSX } from "react";
-import { FormattedMessage, useIntl } from "react-intl";
-import { APP_NAME } from "src/config";
-
-const REPORT_URL = `https://www.canva.com/help/report-content/?app=${APP_NAME}`;
-
-/**
- * Component to display a box prompting users to report potentially inappropriate content generated by AI.
- * Providing users with a way to report inappropriate content is essential for maintaining a safe and respectful environment.
- */
-export const ReportBox = (): JSX.Element => {
-  const openExternalUrl = async (url: string) => {
-    await requestOpenExternalUrl({
-      url,
-    });
-  };
-
-  const intl = useIntl();
-
-  return (
-    <Box padding="2u" background="neutralLow" borderRadius="standard">
-      <Columns spacing="1.5u" alignY="center">
-        <Column width="content">
-          <FlagIcon />
-        </Column>
-        <Column>
-          <Text alignment="start">
-            <FormattedMessage
-              defaultMessage="We’re evolving this new technology with you so please <link>report these images</link> if they don’t seem right."
-              description="A message to prompt users to report potentially inappropriate content generated by AI"
-              values={{
-                link: (chunks) => (
-                  <Link
-                    href={REPORT_URL}
-                    requestOpenExternalUrl={() => openExternalUrl(REPORT_URL)}
-                    tooltipLabel={intl.formatMessage({
-                      defaultMessage: "Report content",
-                      description:
-                        "A title for a link to report AI generated content that is problematic",
-                    })}
-                  >
-                    {chunks}
-                  </Link>
-                ),
-              }}
-            />
-          </Text>
-        </Column>
-      </Columns>
-    </Box>
-  );
-};

package/templates/gen_ai/src/components/tests/remaining_credit.tests.tsx

@@ -1,47 +0,0 @@
-/* eslint-disable formatjs/no-literal-string-in-jsx */
-import { TestAppI18nProvider } from "@canva/app-i18n-kit";
-import { TestAppUiProvider } from "@canva/app-ui-kit";
-import { getPlatformInfo, requestOpenExternalUrl } from "@canva/platform";
-import type { RenderResult } from "@testing-library/react";
-import { fireEvent, render } from "@testing-library/react";
-import type { ReactNode } from "react";
-import { RemainingCredits } from "../remaining_credits";
-
-function renderInTestProvider(node: ReactNode): RenderResult {
-  return render(
-    // In a test environment, you should wrap your apps in `TestAppI18nProvider` and `TestAppUiProvider`, rather than `AppI18nProvider` and `AppUiProvider`
-    <TestAppI18nProvider>
-      <TestAppUiProvider>{node}</TestAppUiProvider>,
-    </TestAppI18nProvider>,
-  );
-}
-
-// This test demonstrates how to test code that uses functions from the Canva Apps SDK
-// For more information on testing with the Canva Apps SDK, see https://www.canva.dev/docs/apps/testing/
-describe("Remaining Credit Tests", () => {
-  const mockRequestOpenExternalUrl = jest.mocked(requestOpenExternalUrl);
-  const mockGetPlatformInfo = jest.mocked(getPlatformInfo);
-
-  beforeEach(() => {
-    jest.resetAllMocks();
-    mockGetPlatformInfo.mockReturnValue({
-      canAcceptPayments: true,
-    });
-  });
-
-  it("should call requestOpenExternalUrl when the link is clicked", () => {
-    // assert that the mock is in the expected clean state
-    expect(mockRequestOpenExternalUrl).not.toHaveBeenCalled();
-
-    const result = renderInTestProvider(<RemainingCredits />);
-
-    // get a reference to the link to purchase more credits
-    const purchaseMoreLink = result.getByRole("button");
-
-    // programmatically simulate clicking the button
-    fireEvent.click(purchaseMoreLink);
-
-    // we expect that requestOpenExternalUrl has been called
-    expect(mockRequestOpenExternalUrl).toHaveBeenCalled();
-  });
-});

package/templates/gen_ai/src/config.ts

@@ -1,21 +0,0 @@
-/**
- * Expected loading time for the progress bar.
- * Adjust this value to match the estimated loading time of your Generative AI model.
- */
-export const EXPECTED_LOADING_TIME_IN_SECONDS = 5;
-
-/**
- * Determines the default number of images generated when using the `generateImages` function.
- */
-export const NUMBER_OF_IMAGES_TO_GENERATE = 4;
-
-/**
- * Number of seconds to wait between polling for generated images.
- */
-export const POLLING_INTERVAL_IN_SECONDS = 3;
-
-/**
- * Your app's name. This is used when reporting generated content.
- * @TODO: Update your app's name here.
- */
-export const APP_NAME = "Add your app name here";