@canva/cli 0.0.1-beta.22 → 0.0.1-beta.24

package/templates/gen_ai/backend/routers/image.ts

@@ -22,48 +22,48 @@ const imageUrls: ImageResponse[] = [
     fullsize: {
       width: 1280,
       height: 853,
-      url: "https://cdn.pixabay.com/photo/2023/02/03/05/11/youtube-background-7764170_1280.jpg",
+      url: "https://images.pexels.com/photos/1145720/pexels-photo-1145720.jpeg?auto=compress&cs=tinysrgb&w=1280&h=853&dpr=2",
     },
     thumbnail: {
       width: 640,
       height: 427,
-      url: "https://cdn.pixabay.com/photo/2023/02/03/05/11/youtube-background-7764170_640.jpg",
+      url: "https://images.pexels.com/photos/1145720/pexels-photo-1145720.jpeg?auto=compress&cs=tinysrgb&w=640&h=427&dpr=2",
     },
   },
   {
     fullsize: {
       width: 1280,
       height: 853,
-      url: "https://cdn.pixabay.com/photo/2023/02/03/05/12/youtube-background-7764172_1280.jpg",
+      url: "https://images.pexels.com/photos/4010108/pexels-photo-4010108.jpeg?auto=compress&cs=tinysrgb&w=1280&h=863&dpr=2",
     },
     thumbnail: {
       width: 640,
       height: 427,
-      url: "https://cdn.pixabay.com/photo/2023/02/03/05/12/youtube-background-7764172_640.jpg",
+      url: "https://images.pexels.com/photos/4010108/pexels-photo-4010108.jpeg?auto=compress&cs=tinysrgb&w=640&h=427&dpr=2",
     },
   },
   {
     fullsize: {
       width: 1280,
       height: 853,
-      url: "https://cdn.pixabay.com/photo/2023/02/03/05/07/colorful-7764162_1280.jpg",
+      url: "https://images.pexels.com/photos/1327496/pexels-photo-1327496.jpeg?auto=compress&cs=tinysrgb&w=1280&h=853&dpr=2",
     },
     thumbnail: {
       width: 640,
       height: 427,
-      url: "https://cdn.pixabay.com/photo/2023/02/03/05/07/colorful-7764162_640.jpg",
+      url: "https://images.pexels.com/photos/1327496/pexels-photo-1327496.jpeg?auto=compress&cs=tinysrgb&w=640&h=427&dpr=2",
     },
   },
   {
     fullsize: {
       width: 1280,
       height: 853,
-      url: "https://cdn.pixabay.com/photo/2023/02/03/04/57/swirls-7764142_1280.jpg",
+      url: "https://images.pexels.com/photos/4693135/pexels-photo-4693135.jpeg?auto=compress&cs=tinysrgb&w=1280&h=853&dpr=2",
     },
     thumbnail: {
       width: 640,
       height: 427,
-      url: "https://cdn.pixabay.com/photo/2023/02/03/04/57/swirls-7764142_640.jpg",
+      url: "https://images.pexels.com/photos/4693135/pexels-photo-4693135.jpeg?auto=compress&cs=tinysrgb&w=640&h=427&dpr=2",
     },
   },
 ];

package/templates/gen_ai/eslint.config.mjs

@@ -1,17 +1,4 @@
-import path from "node:path";
-import { fileURLToPath } from "node:url";
-import js from "@eslint/js";
-import { FlatCompat } from "@eslint/eslintrc";
-import general from "./conf/eslint_general.mjs";
-import i18n from "./conf/eslint_i18n.mjs";
-
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = path.dirname(__filename);
-const compat = new FlatCompat({
-  baseDirectory: __dirname,
-  recommendedConfig: js.configs.recommended,
-  allConfig: js.configs.all,
-});
+import canvaPlugin from "@canva/app-eslint-plugin";
 
 export default [
   {
@@ -23,15 +10,5 @@ export default [
       "**/*.config.*",
     ],
   },
-  ...compat.extends(
-    "eslint:recommended",
-    "plugin:@typescript-eslint/recommended",
-    "plugin:@typescript-eslint/eslint-recommended",
-    "plugin:@typescript-eslint/strict",
-    "plugin:@typescript-eslint/stylistic",
-    "plugin:react/recommended",
-    "plugin:jest/recommended",
-  ),
-  ...general,
-  ...i18n,
+  ...canvaPlugin.configs.apps,
 ];

package/templates/gen_ai/package.json

@@ -20,7 +20,7 @@
   "dependencies": {
     "@canva/app-i18n-kit": "^1.0.2",
     "@canva/app-ui-kit": "^4.8.0",
-    "@canva/asset": "^2.1.0",
+    "@canva/asset": "^2.2.0",
     "@canva/design": "^2.4.0",
     "@canva/error": "^2.1.0",
     "@canva/platform": "^2.1.0",
@@ -37,8 +37,7 @@
   },
   "devDependencies": {
     "@canva/cli": ">= 0.0.1-beta.13 < 0.0.2",
-    "@eslint/eslintrc": "3.2.0",
-    "@eslint/js": "9.18.0",
+    "@canva/app-eslint-plugin": "^1.0.0-beta.3",
     "@formatjs/cli": "6.3.15",
     "@formatjs/ts-transformer": "3.13.27",
     "@ngrok/ngrok": "1.4.1",
@@ -60,8 +59,6 @@
     "@types/webpack": "5.28.5",
     "@types/webpack-dev-server": "4.7.1",
     "@types/webpack-env": "1.18.5",
-    "@typescript-eslint/eslint-plugin": "8.20.0",
-    "@typescript-eslint/parser": "8.20.0",
     "chalk": "4.1.2",
     "cli-table3": "0.6.5",
     "css-loader": "7.1.2",
@@ -69,11 +66,6 @@
     "cssnano": "7.0.6",
     "debug": "4.4.0",
     "dotenv": "16.4.7",
-    "eslint": "9.18.0",
-    "eslint-plugin-formatjs": "5.2.8",
-    "eslint-plugin-jest": "28.11.0",
-    "eslint-plugin-react": "7.37.4",
-    "eslint-plugin-unicorn": "56.0.1",
     "exponential-backoff": "3.1.1",
     "express": "4.21.2",
     "express-basic-auth": "1.2.1",

package/templates/hello_world/eslint.config.mjs

@@ -1,17 +1,4 @@
-import path from "node:path";
-import { fileURLToPath } from "node:url";
-import js from "@eslint/js";
-import { FlatCompat } from "@eslint/eslintrc";
-import general from "./conf/eslint_general.mjs";
-import i18n from "./conf/eslint_i18n.mjs";
-
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = path.dirname(__filename);
-const compat = new FlatCompat({
-  baseDirectory: __dirname,
-  recommendedConfig: js.configs.recommended,
-  allConfig: js.configs.all,
-});
+import canvaPlugin from "@canva/app-eslint-plugin";
 
 export default [
   {
@@ -23,15 +10,5 @@ export default [
       "**/*.config.*",
     ],
   },
-  ...compat.extends(
-    "eslint:recommended",
-    "plugin:@typescript-eslint/recommended",
-    "plugin:@typescript-eslint/eslint-recommended",
-    "plugin:@typescript-eslint/strict",
-    "plugin:@typescript-eslint/stylistic",
-    "plugin:react/recommended",
-    "plugin:jest/recommended",
-  ),
-  ...general,
-  ...i18n,
+  ...canvaPlugin.configs.apps,
 ];

package/templates/hello_world/package.json

@@ -21,7 +21,7 @@
   "dependencies": {
     "@canva/app-i18n-kit": "^1.0.2",
     "@canva/app-ui-kit": "^4.8.0",
-    "@canva/asset": "^2.1.0",
+    "@canva/asset": "^2.2.0",
     "@canva/design": "^2.4.0",
     "@canva/error": "^2.1.0",
     "@canva/platform": "^2.1.0",
@@ -32,8 +32,7 @@
   },
   "devDependencies": {
     "@canva/cli": ">= 0.0.1-beta.13 < 0.0.2",
-    "@eslint/eslintrc": "3.2.0",
-    "@eslint/js": "9.18.0",
+    "@canva/app-eslint-plugin": "^1.0.0-beta.3",
     "@formatjs/cli": "6.3.15",
     "@formatjs/ts-transformer": "3.13.27",
     "@ngrok/ngrok": "1.4.1",
@@ -51,8 +50,6 @@
     "@types/react": "18.3.12",
     "@types/react-dom": "18.3.1",
     "@types/webpack-env": "1.18.5",
-    "@typescript-eslint/eslint-plugin": "8.20.0",
-    "@typescript-eslint/parser": "8.20.0",
     "chalk": "4.1.2",
     "cli-table3": "0.6.5",
     "css-loader": "7.1.2",
@@ -60,11 +57,6 @@
     "cssnano": "7.0.6",
     "debug": "4.4.0",
     "dotenv": "16.4.7",
-    "eslint": "9.18.0",
-    "eslint-plugin-formatjs": "5.2.8",
-    "eslint-plugin-jest": "28.11.0",
-    "eslint-plugin-react": "7.37.4",
-    "eslint-plugin-unicorn": "56.0.1",
     "express": "4.21.2",
     "express-basic-auth": "1.2.1",
     "jest": "29.7.0",

package/templates/common/conf/eslint-local-i18n-rules/index.mjs

@@ -1,181 +0,0 @@
-/**
- * ESLint rule that identifies and flags untranslated user-facing strings in object properties.
- *
- * This rule helps maintain internationalization consistency by detecting untranslated
- * strings in specific object properties (default: 'label'). It suggests using
- * intl.formatMessage for proper translation.
- *
- * Note: The rule is currently implemented as a local rule, with plans to publish as
- * an npm package to make it available to the broader development community.
- *
- * @example
- * // ❌ Incorrect - Untranslated strings
- * const options = [
- *   { value: "inbox", label: "Inbox" },
- *   { value: "starred", label: "Starred messages" },
- *   { value: "spam", label: "Spam folder" }
- * ];
- *
- * // ✅ Correct - Using intl.formatMessage with descriptions
- * const options = [
- *   {
- *     value: "inbox",
- *     label: intl.formatMessage({
- *       defaultMessage: "Inbox",
- *       description: "Label for main message inbox folder option"
- *     })
- *   },
- *   {
- *     value: "starred",
- *     label: intl.formatMessage({
- *       defaultMessage: "Starred messages",
- *       description: "Label for folder containing messages marked as important"
- *     })
- *   },
- *   {
- *     value: "spam",
- *     label: intl.formatMessage({
- *       defaultMessage: "Spam folder",
- *       description: "Label for folder containing filtered spam messages"
- *     })
- *   }
- * ];
- *
- * @see https://www.canva.dev/docs/apps/localization/
- */
-export default {
-  rules: {
-    "enforce-object-property-translation": {
-      meta: {
-        type: "problem",
-        docs: {
-          description:
-            "Enforce translation of specific properties using intl.formatMessage",
-          category: "Possible Errors",
-          recommended: true,
-        },
-        fixable: "code",
-        schema: [
-          {
-            type: "object",
-            properties: {
-              properties: {
-                type: "array",
-                items: { type: "string" },
-                default: ["label"],
-              },
-              intlObjectName: {
-                type: "string",
-                default: "intl",
-              },
-            },
-            additionalProperties: false,
-          },
-        ],
-        messages: {
-          untranslatedProperty: `If "{{ originalMessage }}" is a user-facing string, you should translate it using "intl.formatMessage". See https://www.canva.dev/docs/apps/localization/.`,
-        },
-      },
-      create(context) {
-        const config = context.options[0] || {};
-        const propertiesToCheck = config.properties || ["label"];
-        const intlObjectName = config.intlObjectName || "intl";
-
-        function getTemplateLiteralString(node) {
-          const src = context.getSourceCode();
-          return src.getText(node);
-        }
-
-        // Extract string content from different node types
-        function extractStringContent(node) {
-          if (!node) return [];
-
-          switch (node.type) {
-            // label: "Foo"
-            case "Literal":
-              return typeof node.value === "string"
-                ? [{ node, value: node.value }]
-                : [];
-
-            // label: `Foo ${bar}`
-            case "TemplateLiteral":
-              return [{ node, value: getTemplateLiteralString(node) }];
-            // label: foo || "Bar"
-            case "LogicalExpression": {
-              if (node.operator === "||") {
-                return [
-                  ...extractStringContent(node.left),
-                  ...extractStringContent(node.right),
-                ];
-              }
-              return [];
-            }
-            // label: "Foo" + "Bar" + "Baz"
-            case "BinaryExpression":
-              if (node.operator === "+") {
-                return [
-                  ...extractStringContent(node.left),
-                  ...extractStringContent(node.right),
-                ];
-              }
-              return [];
-            // label: foo ? "Foo" : "Bar"
-            case "ConditionalExpression":
-              return [
-                ...extractStringContent(node.consequent),
-                ...extractStringContent(node.alternate),
-              ];
-
-            default:
-              return [];
-          }
-        }
-
-        function isTranslated(node) {
-          return (
-            node.parent.type === "CallExpression" &&
-            node.parent.callee.type === "MemberExpression" &&
-            node.parent.callee.object.name === intlObjectName &&
-            node.parent.callee.property.name === "formatMessage"
-          );
-        }
-
-        return {
-          Property(node) {
-            const keyName = node.key.name || node.key.value;
-            if (propertiesToCheck.includes(keyName)) {
-              const results = extractStringContent(node.value);
-              if (!results) return;
-              results.forEach((result) => {
-                const { node: stringNode, value: stringValue } = result;
-
-                if (!isTranslated(stringNode)) {
-                  context.report({
-                    node: stringNode,
-                    messageId: "untranslatedProperty",
-                    data: {
-                      property: keyName,
-                      originalMessage:
-                        stringValue.length > 40
-                          ? stringValue.split(" ").slice(0, 4).join(" ") + "..."
-                          : stringValue,
-                      intlObjectName,
-                    },
-                    fix(fixer) {
-                      const newText = `${intlObjectName}.formatMessage({
-            defaultMessage: ${JSON.stringify(stringValue)},
-            // TODO: Provide a meaningful description for translators
-            description: ""
-          })`;
-                      return fixer.replaceText(stringNode, newText);
-                    },
-                  });
-                }
-              });
-            }
-          },
-        };
-      },
-    },
-  },
-};