2024-10-22

.env → .env.template

@@ -3,4 +3,4 @@ CANVA_BACKEND_PORT=3001
 CANVA_BACKEND_HOST=http://localhost:3001 # TODO: replace this with your production URL before submitting your app
 CANVA_APP_ID=# TODO: Add your app's ID here to configure your backend for JWT verification
 CANVA_APP_ORIGIN=# TODO: Add your app's origin here from the "Developer Portal -> Configure your app -> App Origin" to enable HMR
-CANVA_HMR_ENABLED=FALSE # TODO: set to TRUE to enable HMR 
+CANVA_HMR_ENABLED=FALSE # TODO: set to TRUE to enable HMR

.github/workflows/ci.yml

@@ -3,8 +3,6 @@ run-name: ${{ github.actor }} pushed a commit 🚀
 on:
   pull_request:
     types: [opened, synchronize, reopened]
-    paths-ignore:
-      - 'internal/**'
 
 jobs:
   ci:
@@ -15,7 +13,7 @@ jobs:
       - name: Set up node
         uses: actions/setup-node@v3
         with:
-          node-version-file: '.nvmrc'
+          node-version-file: ".nvmrc"
       - name: NPM ci
         run: npm ci
       - name: npm run test

.github/workflows/package-lock-check.yml

@@ -3,28 +3,26 @@ run-name: ${{ github.actor }} pushed a commit 🚀
 on:
   pull_request:
     types: [opened, synchronize, reopened]
-    paths-ignore:
-      - 'internal/**'
 
 jobs:
   check-package-lock:
     runs-on: ubuntu-latest
 
     steps:
-    - name: Checkout code
-      uses: actions/checkout@v3
+      - name: Checkout code
+        uses: actions/checkout@v3
 
-    - name: Install Node.js and NPM
-      uses: actions/setup-node@v3
-      with:
-        node-version-file: '.nvmrc'
+      - name: Install Node.js and NPM
+        uses: actions/setup-node@v3
+        with:
+          node-version-file: ".nvmrc"
 
-    - name: Install NPM packages
-      run: npm install
+      - name: Install NPM packages
+        run: npm install
 
-    - name: Check for package-lock.json changes
-      run: |
-        if git diff --name-only | grep --quiet 'package-lock.json'; then
-          echo "::error::Please run 'npm install' before committing your changes and make sure package-lock.json is up to date."
-          exit 1
-        fi
+      - name: Check for package-lock.json changes
+        run: |
+          if git diff --name-only | grep --quiet 'package-lock.json'; then
+            echo "::error::Please run 'npm install' before committing your changes and make sure package-lock.json is up to date."
+            exit 1
+          fi

.gitignore

@@ -1,9 +1,8 @@
+.DS_Store
+.env
 .idea
 .ssl
-node_modules
-.DS_Store
-.pr-train.yml
-yarn-error.log
-dist
-secrets.json
+*.log*
 **/*/db.json
+dist
+node_modules

.prettierrc

@@ -0,0 +1,21 @@
+{
+  "arrowParens": "always",
+  "bracketSpacing": true,
+  "endOfLine": "lf",
+  "htmlWhitespaceSensitivity": "css",
+  "insertPragma": false,
+  "singleAttributePerLine": false,
+  "bracketSameLine": false,
+  "jsxSingleQuote": false,
+  "printWidth": 80,
+  "proseWrap": "preserve",
+  "quoteProps": "as-needed",
+  "requirePragma": false,
+  "semi": true,
+  "singleQuote": false,
+  "tabWidth": 2,
+  "trailingComma": "all",
+  "useTabs": false,
+  "embeddedLanguageFormatting": "auto",
+  "experimentalTernaries": false
+}

CHANGELOG.md

@@ -1,5 +1,70 @@
 # Changelog
 
+## 2024-10-22
+
+### 🧰 Added
+
+- `examples`
+  - Added an example to demonstrate [adding videos](https://www.canva.dev/docs/apps/creating-videos/) in `examples/video_elements`.
+  - Added an example to demonstrate [adding an app-controlled videos](https://www.canva.dev/docs/apps/creating-app-elements/) in `examples/app_video_elements`.
+- Added a `.prettierrc` config file to introduce some consistency across the Starter Kit repo, for developers who have forked this repo for their own projects are welcome to adjust to their own liking and preferences.
+- `eslint`
+
+  - Added arguments to the `formatjs/no-literal-string-in-jsx` rule to include App UI Kit props that should be localized (e.g. ariaLabel now is highlighted if developers are not using the recommend `react-intl` messaging pattern).
+
+    ```jsx
+    // ❌ Not recommended, messages will not be localized.
+    <Button ariaLabel="Click me">..</Button>
+    //      ~~~~~~~~~~~~~~~~~~~~
+    // error: Cannot have untranslated text in JSX eslintformatjs/no-literal-string-in-jsx
+
+
+    // ✅ Recommended, messages will be localized.
+    const intl = useIntl();
+    <Button .. ariaLabel={intl.formatMessage({..})} >..</Button>
+    ```
+
+  - Added a new rule to lint against inlining large assets, such as videos, images or audio in apps, which leads to larger and slower apps.
+
+### 🐞 Fixed
+
+- Fixed an issue where running `npm start` on an Ubuntu system would result in `Error: Cannot find module '@ngrok/ngrok-linux-x64-gnu`.
+- Fixed an issue where running `npm run extract` on Windows systems would generate an empty `messages_en.json` ([Github issue](https://github.com/formatjs/formatjs/issues/3854)).
+
+### 🔧 Changed
+
+- `@canva/app-i18n-kit`
+  - Upgraded `app-i18n-kit` to version `1.0.0`.
+- `@canva/app-ui-kit`
+  - Upgraded `app-ui-kit` to version `4.1.0`. Please see the [changelog](https://www.canva.dev/docs/apps/app-ui-kit/changelog/) for the list of changes.
+- Added instructions to the [README](README.md) for running an example.
+- Dependencies audit, upgrading all modules where possible:
+
+  ```text
+  @eslint/js                                9.9.0   →   9.12.0
+  @testing-library/react                   16.0.0   →   16.0.1
+  @types/jest                             29.5.12   →  29.5.13
+  @types/jsonwebtoken                       9.0.6   →    9.0.7
+  @types/react                             18.3.4   →  18.3.11
+  @types/react-dom                         18.0.11  →   18.3.1
+  @typescript-eslint/eslint-plugin          8.2.0   →    8.9.0
+  @typescript-eslint/parser                 8.2.0   →    8.9.0
+  cssnano                                   7.0.5   →    7.0.6
+  debug                                     4.3.6   →    4.3.7
+  eslint                                   8.57.1   →   9.12.0
+  eslint-plugin-formatjs                   4.13.3   →    5.0.0
+  eslint-plugin-jest                       28.8.0   →   28.8.3
+  eslint-plugin-react                      7.35.0   →   7.37.1
+  express                                  4.21.0   →   4.21.1
+  globals                                  15.9.0   →  15.11.0
+  ts-jest                                  29.2.4   →   29.2.5
+  webpack                                  5.94.0   →   5.95.0
+  webpack-dev-server                        5.0.4   →    5.1.0
+  ```
+
+- Moved `.env` to a `.env.template` and added to the `.gitignore`, a postinstall script now copies this locally.
+- Other minor improvements, cleanup and fixes of stale config.
+
 ## 2024-09-25
 
 ### 🔨 Breaking changes
@@ -154,7 +219,7 @@
 
   - Removed `/sdk/preview`, as all of our preview SDKs are now published to NPM with an `@beta` tag. e.g. to install the preview `@canva/design` SDK, run the following command
 
-    ```
+    ```bash
     npm install @canva/design@beta
     ```
 
@@ -560,7 +625,7 @@
 
   - Run the below command at the repo root to upgrade via [nvm](https://github.com/nvm-sh/nvm#intro)
 
-    ```
+    ```bash
     nvm install
     ```
 

README.md

@@ -66,7 +66,7 @@ To enable HMR:
 5. Set the `CANVA_APP_ORIGIN` environment variable to the value copied from the **App origin** field:
 
    ```bash
-   CANVA_APP_ORIGIN=# YOUR APP ORIGIN GOES HERE 
+   CANVA_APP_ORIGIN=# YOUR APP ORIGIN GOES HERE
    ```
 
 6. Set the `CANVA_HMR_ENABLED` environment variable to `true`:
@@ -81,38 +81,73 @@ To enable HMR:
 <details>
   <summary>Previewing apps in Safari</summary>
 
-  By default, the development server is not HTTPS-enabled. This is convenient, as there's no need for a security certificate, but it prevents apps from being previewed in Safari.
+By default, the development server is not HTTPS-enabled. This is convenient, as there's no need for a security certificate, but it prevents apps from being previewed in Safari.
 
-  **Why Safari requires the development server to be HTTPS-enabled?**
+**Why Safari requires the development server to be HTTPS-enabled?**
 
-  Canva itself is served via HTTPS and most browsers prevent HTTPS pages from loading scripts via non-HTTPS connections. Chrome and Firefox make exceptions for local servers, such as `localhost`, but Safari does not, so if you're using Safari, the development server must be HTTPS-enabled.
+Canva itself is served via HTTPS and most browsers prevent HTTPS pages from loading scripts via non-HTTPS connections. Chrome and Firefox make exceptions for local servers, such as `localhost`, but Safari does not, so if you're using Safari, the development server must be HTTPS-enabled.
 
-  To learn more, see [Loading mixed-content resources](https://developer.mozilla.org/en-US/docs/Web/Security/Mixed_content#loading_mixed-content_resources).
+To learn more, see [Loading mixed-content resources](https://developer.mozilla.org/en-US/docs/Web/Security/Mixed_content#loading_mixed-content_resources).
 
-  To preview apps in Safari:
+To preview apps in Safari:
 
-  1. Start the development server with HTTPS enabled:
+1. Start the development server with HTTPS enabled:
 
-  ```bash
-  # Run the main app
-  npm start --use-https
+```bash
+# Run the main app
+npm start --use-https
 
-  # Run an example
-  npm start <example-name> --use-https
-  ```
+# Run an example
+npm start <example-name> --use-https
+```
 
-  2. Navigate to <https://localhost:8080>.
-  3. Bypass the invalid security certificate warning:
-    1. Click **Show details**.
-    2. Click **Visit website**.
-  4. In the Developer Portal, set the app's **Development URL** to <https://localhost:8080>.
-  5. Click preview (or refresh your app if it's already open).
+2. Navigate to <https://localhost:8080>.
+3. Bypass the invalid security certificate warning:
+   1. Click **Show details**.
+   2. Click **Visit website**.
+4. In the Developer Portal, set the app's **Development URL** to <https://localhost:8080>.
+5. Click preview (or refresh your app if it's already open).
 
-  You need to bypass the invalid security certificate warning every time you start the local server. A similar warning will appear in other browsers (and will need to be bypassed) whenever HTTPS is enabled.
+You need to bypass the invalid security certificate warning every time you start the local server. A similar warning will appear in other browsers (and will need to be bypassed) whenever HTTPS is enabled.
+
+**Note**: If you are running your server on HTTPS (such as for testing on Safari) be sure to change the `CANVA_BACKEND_HOST` environment variable to `https://localhost:3001`.
 
-  **Note**: If you are running your server on HTTPS (such as for testing on Safari) be sure to change the `CANVA_BACKEND_HOST` environment variable to `https://localhost:3001`.
 </details>
 
+## Running an example
+
+The `examples` folder contains demonstration apps for a variety of Canva APIs.
+
+To see a list of all example apps, run the following command:
+
+```bash
+npm start examples
+```
+
+You can use arrow keys to navigate the list and press enter to run a specific example. It will look something like this:
+
+```bash
+   npm start examples
+
+   ? Which example would you like to run? ›
+   ❯   app element children
+       app embed elements
+       app image elements
+       app shape elements
+       app text elements
+       asset upload
+       authentication
+       color
+       design editing
+    ↓  design token
+```
+
+To start a specific example app, run the following command:
+
+```bash
+npm start <example-name>
+```
+
 ## Running an example's backend
 
 Some examples have a backend. This backend is defined in the example's `backend/server.ts` file, automatically starts when the `npm start` command is run, and becomes available at <http://localhost:3001>.

conf/eslint-general.mjs

@@ -179,6 +179,32 @@ export default [
             "Apps are currently not allowed to open popups, or new tabs via browser APIs. Please use `requestOpenExternalUrl` from `@canva/platform` to link to external URLs. To learn more, see https://www.canva.dev/docs/apps/api/platform-request-open-external-url/",
         },
       ],
+      "no-restricted-imports": [
+        "warn",
+        {
+          // Warn when importing static assets that increase bundle size
+          patterns: [
+            // Images
+            {
+              group: ["*.png", "*.jpg", "*.jpeg", "*.gif"],
+              message:
+                "Inline images increase app bundle size and degrade app performance. Wherever possible, please use a CDN or external hosting service to dynamically load assets.",
+            },
+            // Videos
+            {
+              group: ["*.mp4", "*.webm", "*.ogg"],
+              message:
+                "Inline videos increase app bundle size and degrade app performance. Wherever possible, please use a CDN or external hosting service to dynamically load assets.",
+            },
+            // Audio
+            {
+              group: ["*.mp3", "*.wav", "*.ogg"],
+              message:
+                "Inline audio files increase app bundle size and degrade app performance. Wherever possible, please use a CDN or external hosting service to dynamically load assets.",
+            },
+          ],
+        },
+      ],
       "no-return-await": "error",
       "no-throw-literal": "error",
       "no-undef-init": "error",

conf/eslint-i18n.mjs

@@ -7,7 +7,22 @@ export default [
     },
     rules: {
       "formatjs/no-invalid-icu": "error",
-      "formatjs/no-literal-string-in-jsx": "error",
+      "formatjs/no-literal-string-in-jsx": [
+        2,
+        {
+          props: {
+            // These rules are for @canva/app-ui-kit components.
+            // For your own components, suppress any false positives using eslint ignore comments.
+            include: [
+              ["*", "(*Label|label|alt)"],
+              ["*", "(title|description|name|text)"],
+              ["*", "(placeholder|additionalPlaceholder|defaultValue)"],
+              ["FormField", "error"],
+            ],
+            exclude: [["FormattedMessage", "description"]],
+          },
+        },
+      ],
       "formatjs/enforce-description": "error",
       "formatjs/enforce-default-message": "error",
       "formatjs/enforce-placeholders": "error",
@@ -18,6 +33,6 @@ export default [
       "formatjs/no-offset": "error",
       "formatjs/blocklist-elements": [2, ["selectordinal"]],
       "formatjs/no-complex-selectors": "error",
-    }
-  }
+    },
+  },
 ];

eslint.config.mjs

@@ -20,8 +20,6 @@ export default [
       "**/dist",
       "**/*.d.ts",
       "**/*.d.tsx",
-      "**/sdk",
-      "**/internal",
       "**/*.config.*",
     ],
   },
@@ -32,12 +30,17 @@ export default [
     "plugin:@typescript-eslint/strict",
     "plugin:@typescript-eslint/stylistic",
     "plugin:react/recommended",
-    "plugin:jest/recommended"
+    "plugin:jest/recommended",
   ),
   ...general,
-  ...i18n.map(config => ({
+  ...i18n.map((config) => ({
     ...config,
-    files: ["src/**/*", "examples/i18n/**/*", "cli/common/templates/gen_ai/**/*", "cli/common/templates/hello_world/**/*"],
+    files: [
+      "src/**/*",
+      // Currently only the 'i18n' example is localized and following the
+      // formatjs guidelines. If more examples are localized, this list
+      // should be updated:
+      "examples/i18n/**/*",
+    ],
   })),
-
 ];