@canva/cli 0.0.1-beta.35 → 0.0.1-beta.36

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

@@ -1,5 +1,3 @@
-import { useState } from "react";
-import { useLocation } from "react-router-dom";
 import {
   Box,
   Button,
@@ -7,10 +5,12 @@ import {
   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";
 import { PromptInputMessages as Messages } from "./prompt_input.messages";
-import { useIntl } from "react-intl";
 
 // @TODO: Adjust according to your specific requirements.
 const MAX_INPUT_LENGTH = 280;

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

@@ -1,7 +1,7 @@
 import { Link, Rows, Text, TextPlaceholder } from "@canva/app-ui-kit";
 import { requestOpenExternalUrl } from "@canva/platform";
-import { useAppContext } from "src/context";
 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";

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

@@ -1,4 +1,4 @@
-import { Box, Columns, Column, FlagIcon, Text, Link } from "@canva/app-ui-kit";
+import { Box, Column, Columns, FlagIcon, Link, Text } from "@canva/app-ui-kit";
 import { requestOpenExternalUrl } from "@canva/platform";
 import { FormattedMessage, useIntl } from "react-intl";
 import { APP_NAME } from "src/config";

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

@@ -1,11 +1,11 @@
 /* eslint-disable formatjs/no-literal-string-in-jsx */
-import { TestAppUiProvider } from "@canva/app-ui-kit";
 import { TestAppI18nProvider } from "@canva/app-i18n-kit";
+import { TestAppUiProvider } from "@canva/app-ui-kit";
+import { requestOpenExternalUrl } from "@canva/platform";
 import type { RenderResult } from "@testing-library/react";
 import { fireEvent, render } from "@testing-library/react";
 import React from "react";
 import { RemainingCredits } from "../remaining_credits";
-import { requestOpenExternalUrl } from "@canva/platform";
 
 function renderInTestProvider(node: React.ReactNode): RenderResult {
   return render(

package/templates/gen_ai/src/home.tsx

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

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

@@ -1,9 +1,9 @@
-import { useNavigate } from "react-router-dom";
 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";
 import * as styles from "styles/components.css";
-import { FormattedMessage, useIntl } from "react-intl";
 
 /**
  * Bare bones Error Page, please add relevant information and behavior that your app requires.

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

@@ -6,8 +6,8 @@ import {
   PromptInput,
   ReportBox,
 } from "src/components";
-import { useAppContext } from "src/context";
 import { EXPECTED_LOADING_TIME_IN_SECONDS } from "src/config";
+import { useAppContext } from "src/context";
 
 export const ResultsPage = () => {
   const { isLoadingImages } = useAppContext();

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

@@ -1,10 +1,10 @@
 /* eslint-disable no-console */
+import debug from "debug";
 import * as express from "express";
+import type { NextFunction, Request, Response } from "express";
+import * as fs from "fs";
 import * as http from "http";
 import * as https from "https";
-import * as fs from "fs";
-import type { Request, Response, NextFunction } from "express";
-import debug from "debug";
 
 const serverDebug = debug("server");
 

package/templates/gen_ai/utils/backend/bearer_middleware/bearer_middleware.ts

@@ -1,6 +1,6 @@
 /* eslint-disable no-console */
 import * as debug from "debug";
-import type { Request, Response, NextFunction } from "express";
+import type { NextFunction, Request, Response } from "express";
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 import Express from "express-serve-static-core";
 

package/templates/gen_ai/webpack.config.ts

@@ -182,7 +182,7 @@ export function buildConfig({
       new DefinePlugin({
         BACKEND_HOST: JSON.stringify(backendHost),
       }),
-      // Apps can only submit a single JS file via the developer portal
+      // Apps can only submit a single JS file via the Developer Portal
       new optimize.LimitChunkCountPlugin({ maxChunks: 1 }),
     ].filter(Boolean),
     ...buildDevConfig(devConfig),

package/templates/hello_world/scripts/ssl/ssl.ts

@@ -1,7 +1,7 @@
 import * as crypto from "crypto";
+import * as fs from "fs/promises";
 import { pki } from "node-forge";
 import * as path from "path";
-import * as fs from "fs/promises";
 
 const SSL_CERT_DIR = path.resolve(process.cwd(), "..", "..", ".ssl");
 const CERT_FILE = path.resolve(SSL_CERT_DIR, "certificate.pem");

package/templates/hello_world/scripts/start/app_runner.ts

@@ -1,16 +1,16 @@
 /* eslint-disable no-console */
-import type { Context } from "./context";
-import * as chalk from "chalk";
-import { buildConfig } from "../../webpack.config";
+import { generatePreviewUrl } from "@canva/cli";
 import * as ngrok from "@ngrok/ngrok";
-import * as nodemon from "nodemon";
+import * as chalk from "chalk";
 import * as Table from "cli-table3";
+import * as nodemon from "nodemon";
+import * as open from "open";
 import * as webpack from "webpack";
 import * as WebpackDevServer from "webpack-dev-server";
-import * as open from "open";
-import { generatePreviewUrl } from "@canva/cli";
+import { buildConfig } from "../../webpack.config";
 import type { Certificate } from "../ssl/ssl";
 import { createOrRetrieveCertificate } from "../ssl/ssl";
+import type { Context } from "./context";
 
 export const infoChalk = chalk.blue.bold;
 export const warnChalk = chalk.bgYellow.bold;

package/templates/hello_world/scripts/start/start.ts

@@ -1,7 +1,7 @@
 #!/usr/bin/env node
 import * as yargs from "yargs";
-import { AppRunner } from "./app_runner";
 import { hideBin } from "yargs/helpers";
+import { AppRunner } from "./app_runner";
 import { Context } from "./context";
 
 const appRunner = new AppRunner();

package/templates/hello_world/src/app.tsx

@@ -1,8 +1,8 @@
 import { Button, Rows, Text } from "@canva/app-ui-kit";
 import { requestOpenExternalUrl } from "@canva/platform";
 import { FormattedMessage, useIntl } from "react-intl";
-import * as styles from "styles/components.css";
 import { useAddElement } from "utils/use_add_element";
+import * as styles from "styles/components.css";
 
 export const DOCS_URL = "https://www.canva.dev/docs/apps/";
 

package/templates/hello_world/src/index.tsx

@@ -1,8 +1,8 @@
+import { AppI18nProvider } from "@canva/app-i18n-kit";
 import { AppUiProvider } from "@canva/app-ui-kit";
 import { createRoot } from "react-dom/client";
 import { App } from "./app";
 import "@canva/app-ui-kit/styles.css";
-import { AppI18nProvider } from "@canva/app-i18n-kit";
 
 const root = createRoot(document.getElementById("root") as Element);
 function render() {

package/templates/hello_world/src/tests/app.tests.tsx

@@ -1,10 +1,10 @@
 /* eslint-disable formatjs/no-literal-string-in-jsx */
-import React from "react";
-import type { RenderResult } from "@testing-library/react";
-import { fireEvent, render } from "@testing-library/react";
 import { TestAppI18nProvider } from "@canva/app-i18n-kit";
 import { TestAppUiProvider } from "@canva/app-ui-kit";
 import { requestOpenExternalUrl } from "@canva/platform";
+import { fireEvent, render } from "@testing-library/react";
+import type { RenderResult } from "@testing-library/react";
+import React from "react";
 import { useAddElement } from "utils/use_add_element";
 import { App, DOCS_URL } from "../app";
 

package/templates/hello_world/utils/use_add_element.ts

@@ -7,9 +7,9 @@ import type {
   VideoElement,
 } from "@canva/design";
 import { addElementAtCursor, addElementAtPoint } from "@canva/design";
-import { useFeatureSupport } from "./use_feature_support";
 import { features } from "@canva/platform";
 import { useEffect, useState } from "react";
+import { useFeatureSupport } from "./use_feature_support";
 
 type AddElementParams =
   | ImageElement

package/templates/hello_world/utils/use_feature_support.ts

@@ -1,6 +1,6 @@
 import { features } from "@canva/platform";
 import type { Feature } from "@canva/platform";
-import { useState, useEffect } from "react";
+import { useEffect, useState } from "react";
 
 /**
  * This hook allows re-rendering of a React component whenever

package/templates/hello_world/webpack.config.ts

@@ -182,7 +182,7 @@ export function buildConfig({
       new DefinePlugin({
         BACKEND_HOST: JSON.stringify(backendHost),
       }),
-      // Apps can only submit a single JS file via the developer portal
+      // Apps can only submit a single JS file via the Developer Portal
       new optimize.LimitChunkCountPlugin({ maxChunks: 1 }),
     ].filter(Boolean),
     ...buildDevConfig(devConfig),