Merge branch 'main' into main

.devcontainer/devcontainer.json

@@ -19,7 +19,7 @@
     "ghcr.io/devcontainers/features/node:1": {
       // Match the Node.js version defined in `package.json`.
       // TODO: Automatically populate this.
-      "version": "16"
+      "version": "18.16.0"
     },
     "ghcr.io/devcontainers/features/docker-in-docker:2": {
       "dockerDashComposeVersion": "v2"

.dockerignore

@@ -4,3 +4,4 @@
 !.npmrc
 !.pnpmfile.cjs
 !pnpm-lock.yaml
+!tsconfig.json

.eslintignore

@@ -1,13 +1,14 @@
-dist/
-# eslint by default ignores hidden folders so we need to "un-ignore" it
-# https://github.com/eslint/eslint/issues/8429#issuecomment-292789858
-!.storybook
-nuxt-template-overrides/
-test/tapes
-coverage/
-node_modules
-.nuxt
-.nuxt-storybook
-!.github
-storybook-static
-.idea
+coverage
+
+frontend/test/tapes
+frontend/nuxt-template-overrides
+frontend/storybook-static
+# ESLint ignores hidden by default, so this must be explicity un-ignored
+!frontend/.storybook
+
+!.pnpmfile.cjs
+
+frontend/src/locales/*.json
+
+# Packages generate a `dist` output when built that should be linted
+**/*/dist

.eslintrc.js

@@ -9,6 +9,7 @@ const i18nDestructureRules = ["t", "tc", "te", "td", "d", "n"].map(
   })
 )
 
+/** @type {import('eslint').Linter.Config} */
 module.exports = {
   root: true,
   env: {
@@ -27,13 +28,16 @@ module.exports = {
     "plugin:@intlify/vue-i18n/recommended",
     "plugin:import/recommended",
     "plugin:eslint-comments/recommended",
+    "plugin:jsonc/recommended-with-jsonc",
+    "plugin:@openverse/recommended",
   ],
   plugins: [
     "@typescript-eslint",
     "eslint-plugin-tsdoc",
     "vue",
     "vuejs-accessibility",
     "unicorn",
+    "@openverse",
   ],
   rules: {
     semi: [2, "never"],
@@ -95,16 +99,7 @@ module.exports = {
         message: "Use the <VLink> component instead of <RouterLink>.",
       },
     ],
-    "no-restricted-syntax": [
-      "error",
-      ...i18nDestructureRules,
-      {
-        selector:
-          "ImportDeclaration[source.value='@vue/test-utils']:has(ImportSpecifier[local.name='shallowMount'])",
-        message:
-          "Do not use @vue/test-utils' `shallowMount`. Use @testing-library/vue's `render` instead.",
-      },
-    ],
+    "no-restricted-syntax": ["error", ...i18nDestructureRules],
     "unicorn/filename-case": ["error", { case: "kebabCase" }],
     "@typescript-eslint/no-var-requires": ["off"],
     "import/no-unresolved": [
@@ -194,9 +189,106 @@ module.exports = {
       },
     },
     {
-      files: ["*.spec.js"],
+      env: { jest: true },
+      files: ["packages/**/*/test", "frontend/test/unit/**"],
+      plugins: ["jest"],
+      extends: ["plugin:jest/recommended"],
       rules: {
+        "import/no-named-as-default-member": ["off"],
         "@intlify/vue-i18n/no-raw-text": ["off"],
+        "no-restricted-imports": [
+          "error",
+          {
+            name: "pinia",
+            message:
+              "Please import pinia test utils from `~~/test/unit/test-utils/pinia`. The test-utils version ensures proper setup of universally necessary Nuxt context mocks.",
+          },
+        ],
+        "no-restricted-syntax": [
+          "error",
+          {
+            selector:
+              "ImportDeclaration[source.value='@vue/test-utils']:has(ImportSpecifier[local.name='shallowMount'])",
+            message:
+              "Do not use @vue/test-utils' `shallowMount`. Use `~~/test/unit/test-utils/render` instead which includes helpful context setup or @testing-library/vue's `render` directly.",
+          },
+        ],
+      },
+    },
+    {
+      files: ["frontend/test/{playwright,storybook}/**"],
+      plugins: ["playwright"],
+      extends: ["plugin:playwright/recommended"],
+      rules: {
+        // Enable once https://github.com/playwright-community/eslint-plugin-playwright/issues/154 is resolved
+        "playwright/expect-expect": ["off"],
+      },
+    },
+    {
+      files: [
+        "automations/js/src/**",
+        "frontend/test/**",
+        "frontend/src/**/**.json",
+      ],
+      rules: {
+        "unicorn/filename-case": "off",
+      },
+    },
+    {
+      files: ["frontend/.storybook/**"],
+      rules: {
+        /**
+         * `.nuxt-storybook` doesn't exist in the CI when it
+         * lints files unless we ran the storybook build before linting,
+         * meaning that the imports used in the modules in this directory
+         * are mostly unavailable.
+         *
+         * To avoid turning these rules off we'd have to run the storybook
+         * build in CI before linting (or even instruct people to run
+         * storybook build locally before trying to lint) and that's just too
+         * heavy a lift when we can instead disable the rules for just this
+         * directory.
+         */
+        "import/extensions": "off",
+        "import/export": "off",
+        "import/no-unresolved": "off",
+      },
+    },
+    {
+      files: ["frontend/src/components/**"],
+      rules: {
+        "unicorn/filename-case": [
+          "error",
+          // Allow things like `Component.stories.js` and `Component.types.js`
+          {
+            case: "pascalCase",
+            ignore: [".eslintrc.js", ".*\\..*\\.js", ".*\\.json"],
+          },
+        ],
+      },
+    },
+    {
+      files: [
+        "frontend/src/locales/scripts/en.json5",
+        "frontend/test/locales/*.json",
+      ],
+      rules: {
+        "jsonc/key-name-casing": [
+          "error",
+          {
+            camelCase: true,
+            "kebab-case": false,
+            snake_case: true, // for err_* keys
+            ignores: ["ncSampling+", "sampling+"],
+          },
+        ],
+      },
+    },
+    {
+      files: ["frontend/src/locales/scripts/en.json5"],
+      rules: {
+        "jsonc/quote-props": "off",
+        "jsonc/quotes": "off",
       },
     },
   ],
@@ -206,17 +298,9 @@ module.exports = {
       messageSyntaxVersion: "^8.24.3",
     },
     "import/resolver": {
-      "eslint-import-resolver-custom-alias": {
-        alias: {
-          "~": "./frontend/src",
-          "~~": "./frontend",
-        },
-        /**
-         * SVG imports are excluded for the import/no-unresolved
-         * rule above due to lack of support for `?inline` suffix
-         *
-         * Therefore, there's no need to configure them here
-         */
+      typescript: {
+        // This plugin automatically pulls paths from tsconfig
+        // so we don't need to redefine Nuxt and package aliases
         extensions: [".js", ".ts", ".vue", ".png"],
       },
     },

.github/GITHUB.md

@@ -61,23 +61,14 @@ truth, it creates PRs to resolve any differences.
 
 ### New issue automation
 
-This workflow adds issues to the "Backlog" column in the [(old) Openverse project](https://github.com/orgs/WordPress/projects/3/) as
-soon as they are created.
-This workflow also adds issues to the "Backlog" column in the
- [Openverse project](https://github.com/orgs/WordPress/projects/75/) as soon as they are created. It also adds a priority field
-value to the project item based on the priority label applied to the issue.
+This workflow adds issues to the "Backlog" column in the
+[Openverse project](https://github.com/orgs/WordPress/projects/75/) as soon as
+they are created. It also adds a priority field value to the project item based
+on the priority label applied to the issue.
 
 **Issue:** opened  
 **Dispatch:** disabled
 
-### New PR automation
-
-This workflow adds PRs to the "In progress" or "Needs review" columns in the
-Openverse PRs project, based on whether they are marked as draft or ready.
-
-**PR:** opened, converted_to_draft, ready_for_review  
-**Dispatch:** disabled
-
 ### PR label check
 
 This workflow ensures that all PRs have one label from each of the groups

.github/actions/load-img/action.yml

@@ -12,16 +12,18 @@ runs:
     - name: Checkout repository
       uses: actions/checkout@v3
 
-    # Doesn't use `setup-env` because the next step uses `npm`, not `pnpm`.
-    - name: Setup Node.js
-      uses: actions/setup-node@v3
+    - name: Setup `pnpm`
+      uses: ./.github/actions/setup-env
       with:
-        node-version: "16"
+        # We just need to be able to use `pnpm`. `npm` will fail on
+        # any `workspace:*` dependency which we have in the root `package.json`
+        setup_python: false
+        install_deps: false
 
     - name: Install `@actions/artifact`
       shell: bash
       run: |
-        npm install @actions/artifact
+        pnpm install @actions/artifact -w
 
     - name: Download images
       uses: actions/github-script@v6

.github/actions/setup-env/action.yml

@@ -57,9 +57,7 @@ runs:
       if: inputs.setup_nodejs == 'true'
       uses: actions/setup-node@v3
       with:
-        # Ensure that it matches `engines` field in the following files:
-        # - `package.json`
-        node-version: "16"
+        node-version-file: "package.json"
         cache: pnpm
         cache-dependency-path: |
           **/pnpm-lock.yaml

.github/filters.yml

@@ -23,12 +23,15 @@ ingestion_server:
   - load_sample_data.sh
 frontend:
   - frontend/**
+  - packages/**
   - package.json
   - pnpm-lock.yaml
   - pnpm-workspace.yaml
   - tsconfig.json
   - .npmrc
   - .pnpmfile.cjs
+packages:
+  - packages/**
 analytics:
   - docker/clickhouse/**
   - docker/plausible/**
@@ -37,7 +40,7 @@ analytics:
   - setup_plausible.sh
 documentation:
   - documentation/**
-  - frontend/**.mdx
+  - frontend/**/*.mdx
   - frontend/.storybook/**
   - frontend/nuxt.config.ts
   - frontend/tailwind.config.js

.github/workflows/bundle_size.yml

@@ -54,6 +54,7 @@ jobs:
           pattern: "./frontend/.nuxt/dist/client/**/*.{modern.js,js,css}"
           exclude: "{./frontend/.nuxt/dist/client/lang-*.json.js,./frontend/.nuxt/dist/client/lang-*.json.modern.js}"
           minimum-change-threshold: 10
+          build-script: --filter frontend build
 
       - name: Checkout repository # again, to enable cleaning
         if: always()