@canva/cli 1.19.0 → 1.21.0

package/templates/gen_ai/src/context/app_context.tsx

@@ -1,153 +0,0 @@
-import type { JSX } from "react";
-import { createContext, useEffect, useState } from "react";
-import { useIntl } from "react-intl";
-import type { ImageType } from "src/api";
-import { getRemainingCredits } from "src/api";
-import { ContextMessages as Messages } from "./context.messages";
-
-export interface AppContextType {
-  appError: string;
-  setAppError: (value: string) => void;
-  creditsError: string;
-  setCreditsError: (value: string) => void;
-  loadingApp: boolean;
-  setLoadingApp: (value: boolean) => void;
-  isLoadingImages: boolean;
-  setIsLoadingImages: (value: boolean) => void;
-  jobId: string;
-  setJobId: (value: string) => void;
-  remainingCredits: number;
-  setRemainingCredits: (value: number) => void;
-  promptInput: string;
-  setPromptInput: (value: string) => void;
-  promptInputError: string;
-  setPromptInputError: (value: string) => void;
-  generatedImages: ImageType[];
-  setGeneratedImages: (value: ImageType[]) => void;
-}
-
-export const AppContext = createContext<AppContextType>({
-  appError: "",
-  setAppError: () => {},
-  creditsError: "",
-  setCreditsError: () => {},
-  loadingApp: true,
-  setLoadingApp: () => {},
-  isLoadingImages: false,
-  setIsLoadingImages: () => {},
-  jobId: "",
-  setJobId: () => {},
-  remainingCredits: 0,
-  setRemainingCredits: () => {},
-  promptInput: "",
-  setPromptInput: () => {},
-  promptInputError: "",
-  setPromptInputError: () => {},
-  generatedImages: [] as ImageType[],
-  setGeneratedImages: () => {},
-});
-
-/**
- * Provides application-wide state and methods using React Context.
- * @param {object} props - The props object.
- * @param {React.ReactNode} props.children - The children components wrapped by the provider.
- * @returns {JSX.Element} The provider component.
- * @description This provider component wraps the entire application to provide application-wide state and methods using React Context.
- * It manages state related to app errors, loading status, remaining credits, user input for prompts, image styles, and generated images.
- * It exposes these state values and setter methods to its child components via the AppContext.
- * For more information on React Context, refer to the official React documentation: {@link https://react.dev/learn/passing-data-deeply-with-context}.
- */
-export const ContextProvider = ({
-  children,
-}: {
-  children: React.ReactNode;
-}): JSX.Element => {
-  const [appError, setAppError] = useState<string>("");
-  const [loadingApp, setLoadingApp] = useState<boolean>(true); // set to true to prevent ui flash on load
-  const [isLoadingImages, setIsLoadingImages] = useState<boolean>(false);
-  const [jobId, setJobId] = useState<string>("");
-  const [remainingCredits, setRemainingCredits] = useState<number>(0);
-  const [promptInput, setPromptInput] = useState<string>("");
-  const [promptInputError, setPromptInputError] = useState<string>("");
-  const [generatedImages, setGeneratedImages] = useState<ImageType[]>([]);
-  const [creditsError, setCreditsError] = useState<string>("");
-  const intl = useIntl();
-
-  // Fetches initial data on component mount
-  useEffect(() => {
-    const fetchDataOnMount = async () => {
-      try {
-        setLoadingApp(true);
-
-        // Fetch remaining credits
-        try {
-          const { credits } = await getRemainingCredits();
-          setRemainingCredits(credits);
-        } catch (error) {
-          setAppError(
-            intl.formatMessage(Messages.appErrorGetRemainingCreditsFailed),
-          );
-          // eslint-disable-next-line no-console
-          console.error("Error fetching remaining credits:", error);
-        }
-      } catch (error) {
-        setAppError(intl.formatMessage(Messages.appErrorGeneral));
-        // eslint-disable-next-line no-console
-        console.error("Error fetching data:", error);
-      } finally {
-        setLoadingApp(false);
-      }
-    };
-
-    fetchDataOnMount();
-  }, []);
-
-  // Manages errors related to remaining credits
-  useEffect(() => {
-    if (loadingApp || remainingCredits > 0) {
-      setCreditsError("");
-      return;
-    }
-
-    const errorMessage = intl.formatMessage(Messages.alertNotEnoughCredits);
-
-    setCreditsError(errorMessage);
-  }, [loadingApp, remainingCredits]);
-
-  const setPromptInputHandler = (value: string) => {
-    if (
-      promptInputError ===
-      intl.formatMessage(Messages.promptMissingErrorMessage)
-    ) {
-      setPromptInputError("");
-    }
-    if (value === "") {
-      setPromptInputError("");
-    }
-
-    setPromptInput(value);
-  };
-
-  const value: AppContextType = {
-    appError,
-    setAppError,
-    creditsError,
-    setCreditsError,
-    loadingApp,
-    setLoadingApp,
-    isLoadingImages,
-    setIsLoadingImages,
-    jobId,
-    setJobId,
-    remainingCredits,
-    setRemainingCredits,
-    promptInput,
-    setPromptInput: setPromptInputHandler,
-    promptInputError,
-    setPromptInputError,
-    generatedImages,
-    setGeneratedImages,
-  };
-
-  return <AppContext.Provider value={value}>{children}</AppContext.Provider>;
-};

package/templates/gen_ai/src/context/context.messages.ts

@@ -1,30 +0,0 @@
-import { defineMessages } from "react-intl";
-
-export const ContextMessages = defineMessages({
-  /** Messages related to handling errors that occur during operations. */
-  appErrorGeneral: {
-    defaultMessage: "An unexpected error occurred. Please try again later.",
-    description:
-      "A message to indicate that an unexpected error occurred, but no more information is available",
-  },
-  appErrorGetRemainingCreditsFailed: {
-    defaultMessage: "Retrieving remaining credits has failed.",
-    description:
-      "A message to indicate that there was a failure to get the number of credits the user has",
-  },
-
-  /** Messages related to prompts and user input validation. */
-  promptMissingErrorMessage: {
-    defaultMessage: "Please describe what you want to create",
-    description:
-      "An error message to indicate that the prompt was empty and should be supplied",
-  },
-
-  /** Messages related to credits, including their availability and purchasing options. */
-  alertNotEnoughCredits: {
-    defaultMessage:
-      "You don’t have enough credits left to generate an image. Please purchase more.",
-    description:
-      "A message to indicate that the user doesn't have enough credits to generate an image, and will need to buy more to continue",
-  },
-});

package/templates/gen_ai/src/context/index.ts

@@ -1,2 +0,0 @@
-export * from "./app_context";
-export * from "./use_app_context";

package/templates/gen_ai/src/context/use_app_context.ts

@@ -1,17 +0,0 @@
-import { useContext } from "react";
-import type { AppContextType } from "./app_context";
-import { AppContext } from "./app_context";
-
-/**
- * A custom React hook to access the application-wide state and methods provided by the ContextProvider using React Context.
- * @returns {AppContextType} - An object containing application-wide state and methods.
- * @throws {Error} - Throws an error if used outside the context of a ContextProvider.
- * @description This hook allows components to access the application-wide state and methods provided by the ContextProvider using React Context. It retrieves the context value using the useContext hook and ensures that the context is available. If used outside the context of an ContextProvider, it throws an error instructing developers to use it within an ContextProvider.
- */
-export const useAppContext = (): AppContextType => {
-  const context = useContext(AppContext);
-  if (!context) {
-    throw new Error("useAppContext must be used within a ContextProvider");
-  }
-  return context;
-};

package/templates/gen_ai/src/index.tsx

@@ -1,4 +0,0 @@
-import { prepareDesignEditor } from "@canva/intents/design";
-import designEditor from "./intents/design_editor";
-
-prepareDesignEditor(designEditor);

package/templates/gen_ai/src/intents/design_editor/app.tsx

@@ -1,19 +0,0 @@
-import { AppI18nProvider } from "@canva/app-i18n-kit";
-import { AppUiProvider } from "@canva/app-ui-kit";
-import { ErrorBoundary } from "react-error-boundary";
-import { createHashRouter, RouterProvider } from "react-router-dom";
-import { ContextProvider } from "../../context";
-import { ErrorPage } from "../../pages";
-import { routes } from "../../routes";
-
-export const App = () => (
-  <AppI18nProvider>
-    <AppUiProvider>
-      <ErrorBoundary fallback={<ErrorPage />}>
-        <ContextProvider>
-          <RouterProvider router={createHashRouter(routes)} />
-        </ContextProvider>
-      </ErrorBoundary>
-    </AppUiProvider>
-  </AppI18nProvider>
-);

package/templates/gen_ai/src/intents/design_editor/home.tsx

@@ -1,13 +0,0 @@
-import { Rows } from "@canva/app-ui-kit";
-import { Outlet } from "react-router-dom";
-import * as styles from "styles/components.css";
-import { Footer } from "../../components";
-
-export const Home = () => (
-  <div className={styles.scrollContainer}>
-    <Rows spacing="3u">
-      <Outlet />
-      <Footer />
-    </Rows>
-  </div>
-);

package/templates/gen_ai/src/intents/design_editor/index.tsx

@@ -1,17 +0,0 @@
-import "@canva/app-ui-kit/styles.css";
-import type { DesignEditorIntent } from "@canva/intents/design";
-import { createRoot } from "react-dom/client";
-import { App } from "./app";
-
-async function render() {
-  const root = createRoot(document.getElementById("root") as Element);
-
-  root.render(<App />);
-}
-
-const designEditor: DesignEditorIntent = { render };
-export default designEditor;
-
-if (module.hot) {
-  module.hot.accept("./app", render);
-}

package/templates/gen_ai/src/pages/error.tsx

@@ -1,41 +0,0 @@
-import { Button, Rows, Text } from "@canva/app-ui-kit";
-import { FormattedMessage, useIntl } from "react-intl";
-import { useNavigate } from "react-router-dom";
-import { useAppContext } from "src/context";
-import { Paths } from "src/routes/paths";
-import * as styles from "styles/components.css";
-
-/**
- * Bare bones Error Page, please add relevant information and behavior that your app requires.
- */
-export const ErrorPage = () => {
-  const navigate = useNavigate();
-  const { setPromptInput, setIsLoadingImages } = useAppContext();
-  const intl = useIntl();
-
-  const onClick = () => {
-    setPromptInput("");
-    setIsLoadingImages(false);
-    navigate(Paths.HOME);
-  };
-
-  return (
-    <div className={styles.scrollContainer}>
-      <Rows spacing="2u">
-        <Text>
-          <FormattedMessage
-            defaultMessage="Something went wrong."
-            description="A message to indicate that something went wrong, but no more information is available"
-          />
-        </Text>
-        <Button variant="primary" onClick={onClick} stretch={true}>
-          {intl.formatMessage({
-            defaultMessage: "Start over",
-            description:
-              "A button label to clear the error and the prompt and start again",
-          })}
-        </Button>
-      </Rows>
-    </div>
-  );
-};

package/templates/gen_ai/src/pages/generate.tsx

@@ -1,9 +0,0 @@
-import { Rows } from "@canva/app-ui-kit";
-import { AppError, PromptInput } from "src/components";
-
-export const GeneratePage = () => (
-  <Rows spacing="1u">
-    <AppError />
-    <PromptInput />
-  </Rows>
-);

package/templates/gen_ai/src/pages/index.ts

@@ -1,3 +0,0 @@
-export * from "./error";
-export * from "./generate";
-export * from "./results";

package/templates/gen_ai/src/pages/results.tsx

@@ -1,31 +0,0 @@
-import { Rows } from "@canva/app-ui-kit";
-import {
-  AppError,
-  ImageGrid,
-  LoadingResults,
-  PromptInput,
-  ReportBox,
-} from "src/components";
-import { EXPECTED_LOADING_TIME_IN_SECONDS } from "src/config";
-import { useAppContext } from "src/context";
-
-export const ResultsPage = () => {
-  const { isLoadingImages } = useAppContext();
-
-  if (isLoadingImages) {
-    return (
-      <LoadingResults durationInSeconds={EXPECTED_LOADING_TIME_IN_SECONDS} />
-    );
-  }
-
-  return (
-    <Rows spacing="1u">
-      <AppError />
-      <Rows spacing="2u">
-        <ImageGrid />
-        <PromptInput />
-        <ReportBox />
-      </Rows>
-    </Rows>
-  );
-};

package/templates/gen_ai/src/routes/index.ts

@@ -1 +0,0 @@
-export * from "./routes";

package/templates/gen_ai/src/routes/paths.ts

@@ -1,4 +0,0 @@
-export enum Paths {
-  HOME = "/",
-  RESULTS = "/results",
-}

package/templates/gen_ai/src/routes/routes.tsx

@@ -1,24 +0,0 @@
-import { Home } from "src/intents/design_editor/home";
-import { ErrorPage } from "src/pages/error";
-import { GeneratePage } from "src/pages/generate";
-import { ResultsPage } from "src/pages/results";
-import { Paths } from "src/routes/paths";
-
-export const routes = [
-  {
-    path: Paths.HOME,
-    element: <Home />,
-    errorElement: <ErrorPage />,
-    children: [
-      {
-        index: true,
-        element: <GeneratePage />,
-      },
-      {
-        path: Paths.RESULTS,
-        element: <ResultsPage />,
-      },
-      // @TODO: Add additional pages and routes as needed.
-    ],
-  },
-];

package/templates/gen_ai/src/utils/index.ts

@@ -1 +0,0 @@
-export * from "./obscenity_filter";

package/templates/gen_ai/src/utils/obscenity_filter.ts

@@ -1,33 +0,0 @@
-import {
-  englishDataset,
-  englishRecommendedTransformers,
-  RegExpMatcher,
-} from "obscenity";
-
-/**
- * Retrieves a list of obscene words from the given input string.
- * @param {string} input The input string to search for obscene words.
- * @returns {string[]} An array of unique obscene words found in the input string.
- */
-export const getObsceneWords = (input: string): string[] => {
-  const matcher = new RegExpMatcher({
-    ...englishDataset.build(),
-    ...englishRecommendedTransformers,
-  });
-
-  // Find all matches in the input string, sorted by their position.
-  const matches = matcher.getAllMatches(input, true);
-
-  const obsceneWords: string[] = [];
-
-  for (const match of matches) {
-    const { phraseMetadata } =
-      englishDataset.getPayloadWithPhraseMetadata(match);
-    if (phraseMetadata?.originalWord) {
-      obsceneWords.push(phraseMetadata.originalWord);
-    }
-  }
-
-  // Return an array of unique obscene words.
-  return [...new Set(obsceneWords)];
-};

package/templates/gen_ai/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/gen_ai/styles/utils.css

@@ -1,3 +0,0 @@
-.hidden {
-  visibility: hidden;
-}

package/templates/gen_ai/tsconfig.json

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

package/templates/gen_ai/utils/backend/base_backend/create.ts

@@ -1,114 +0,0 @@
-/* eslint-disable no-console */
-import { TokenVerificationError } from "@canva/app-middleware";
-import debug from "debug";
-import express from "express";
-import type { NextFunction, Request, Response } from "express";
-import fs from "fs";
-import http from "http";
-import https from "https";
-
-const serverDebug = debug("server");
-
-interface BaseServer {
-  app: express.Express;
-
-  /**
-   * Starts the server on the address or port provided
-   * @param address port number or string address or if left undefined express defaults to port 3000
-   */
-  start: (address: number | string | undefined) => void;
-}
-
-/**
- * createBaseServer instantiates a customised express server with:
- * - json body handling
- * - health check endpoint
- * - catchall endpoint
- * - error handler catch route
- * - process termination handling
- * - debug logging - prefix starting your server with `DEBUG=server npm run XXX`
- *
- * @returns BaseServer object containing the express app and a start function
- */
-export function createBaseServer(router: express.Router): BaseServer {
-  const SHOULD_ENABLE_HTTPS = process.env?.SHOULD_ENABLE_HTTPS === "true";
-  const HTTPS_CERT_FILE = process.env?.HTTPS_CERT_FILE;
-  const HTTPS_KEY_FILE = process.env?.HTTPS_KEY_FILE;
-
-  const app = express();
-  app.use(express.json());
-
-  // It can help to provide an extra layer of obsecurity to reduce server fingerprinting.
-  app.disable("x-powered-by");
-
-  // Health check endpoint
-  app.get("/healthz", (req, res) => {
-    res.sendStatus(200);
-  });
-
-  // logging middleware
-  app.use((req, _res, next) => {
-    serverDebug(`${new Date().toISOString()}: ${req.method} ${req.url}`);
-    next();
-  });
-
-  // Custom routes router
-  app.use(router);
-
-  // catch all router
-  app.all("*", (req, res) => {
-    res.status(404).send({
-      error: `unhandled '${req.method}' on '${req.url}'`,
-    });
-  });
-
-  // default error handler
-  app.use((err: Error, _req: Request, res: Response, _next: NextFunction) => {
-    // Handle authentication errors from @canva/app-middleware
-    if (err instanceof TokenVerificationError) {
-      res.status(err.statusCode).json({
-        error: err.code,
-        message: err.message,
-      });
-      return;
-    }
-
-    console.error(err.stack);
-    res.status(500).send({
-      error: "something went wrong",
-    });
-  });
-
-  let server;
-  if (SHOULD_ENABLE_HTTPS) {
-    if (!HTTPS_CERT_FILE || !HTTPS_KEY_FILE) {
-      throw new Error(
-        "Looks like you're running the example with --use-https flag, but SSL certificates haven't been generated. Please remove the .ssl/ folder and re-run the command again.",
-      );
-    }
-
-    server = https.createServer(
-      {
-        key: fs.readFileSync(HTTPS_KEY_FILE),
-        cert: fs.readFileSync(HTTPS_CERT_FILE),
-      },
-      app,
-    );
-  } else {
-    server = http.createServer(app);
-  }
-
-  return {
-    app,
-    start: (address: number | string | undefined) => {
-      console.log(`Listening on '${address}'`);
-      server.listen(address);
-      process.on("SIGTERM", () => {
-        serverDebug("SIGTERM signal received: closing HTTP server");
-        server.close(() => {
-          serverDebug("HTTP server closed");
-        });
-      });
-    },
-  };
-}