chore: update yarn to v4 (#5010)

Author: rubencarvalho

.circleci/config.yml

@@ -22,15 +22,18 @@ commands:
     downstream:
         steps:
             - checkout
-            # - restore_cache:
-            #       keys:
-            #           - v4c-dependencies-{{ arch }}-{{ checksum "yarn.lock" }}
-            # - restore_cache:
-            #       keys:
-            #           - v4b-<< pipeline.parameters.wireit_cache_name >>-{{ arch }}-{{ checksum "package.json" }}-
+            - restore_cache:
+                  keys:
+                      - v4c-dependencies-{{ arch }}-{{ checksum "yarn.lock" }}
+            - restore_cache:
+                  keys:
+                      - v4b-<< pipeline.parameters.wireit_cache_name >>-{{ arch }}-{{ checksum "package.json" }}-
             - run:
                   name: Installing Dependencies
-                  command: yarn --frozen-lockfile --cache-folder ~/.cache/yarn
+                  command: |
+                      corepack enable
+                      yarn --immutable
+
             - save_cache:
                   paths:
                       - ~/.cache/yarn
@@ -85,14 +88,14 @@ commands:
                       if [[ $(cat count_start.txt) -eq $(cat count_end.txt) ]]; then exit 0; else exit 1; fi
             # build diff review site
             - run:
-                  when: on_fail
+                  when: always
                   name: Create review site
                   command: |
                       branch=$(git symbolic-ref --short HEAD)
                       node test/visual/review.js --branch=$branch --commit=<< pipeline.git.revision >> --system="<< parameters.regression_system >> << parameters.regression_color >> << parameters.regression_scale >> << parameters.regression_dir >>"
                       yarn rollup -c test/visual/rollup.config.js
             - run:
-                  when: on_fail
+                  when: always
                   name: Publish review site
                   command: |
                       cp projects/documentation/content/favicon.ico test/visual
@@ -123,18 +126,7 @@ jobs:
         executor: node
 
         steps:
-            - checkout
-            - restore_cache:
-                  keys:
-                      - v3b-dependencies-{{ arch }}-{{ checksum "yarn.lock" }}
-            - run:
-                  name: Installing Dependencies
-                  command: yarn --ignore-scripts --frozen-lockfile --cache-folder ~/.cache/yarn
-            - save_cache:
-                  paths:
-                      - ~/.cache/yarn
-                      - .wireit
-                  key: v3b-dependencies-{{ arch }}-{{ checksum "yarn.lock" }}
+            - downstream
             - run:
                   name: Define environment variable with lastest commit's message
                   command: |
@@ -211,12 +203,20 @@ jobs:
 
     preview-docs:
         executor: node
-
         steps:
             - downstream
             - run:
-                  name: Generate Docs
-                  command: yarn docs:preview
+                  name: Generate Custom Elements Manifest
+                  command: yarn docs:analyze
+            - run:
+                  name: Move CEM to Storybook directory
+                  command: cp projects/documentation/custom-elements.json storybook/
+            - run:
+                  name: Build documentation
+                  command: yarn docs:build
+            - run:
+                  name: Build Storybook
+                  command: yarn storybook:build
             - run: echo '/*    /index.html   200' > projects/documentation/dist/_redirects
             - run: |
                   branch=$(git symbolic-ref --short HEAD)
@@ -272,14 +272,14 @@ jobs:
                       if [[ $(cat count_start.txt) -eq $(cat count_end.txt) ]]; then exit 0; else exit 1; fi
             # build diff review site
             - run:
-                  when: on_fail
+                  when: always
                   name: Create review site
                   command: |
                       branch=$(git symbolic-ref --short HEAD)
                       node test/visual/review.js --branch=$branch --commit=<< pipeline.git.revision >> --system="hcm"
                       yarn rollup -c test/visual/rollup.config.js
             - run:
-                  when: on_fail
+                  when: always
                   name: Publish review site
                   command: |
                       cp projects/documentation/content/favicon.ico test/visual

.gitattributes

@@ -0,0 +1,5 @@
+README.md merge=ours
+
+# Treat yarn assets as binaries for diffing
+/.yarn/releases/** binary
+/.yarn/plugins/** binary

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

@@ -3,6 +3,10 @@ description: Common setup for all jobs
 runs:
     using: 'composite'
     steps:
+        - name: Enable Corepack
+          shell: bash
+          run: corepack enable
+
         - name: Setup Node 20
           uses: actions/setup-node@v4
           with:
@@ -12,4 +16,4 @@ runs:
 
         - name: Install dependencies
           shell: bash
-          run: yarn --frozen-lockfile
+          run: yarn --immutable

.github/workflows/chromatic-vrt.yml

@@ -32,15 +32,15 @@ jobs:
               with:
                   fetch-depth: 0
 
-            - name: Setup Node 18
+            - name: Setup Node 20
               uses: actions/setup-node@v4
               with:
-                  node-version: '18'
+                  node-version: '20'
                   cache: 'yarn'
                   registry-url: 'https://registry.npmjs.org'
 
             - name: Install dependencies
-              run: yarn --frozen-lockfile
+              run: yarn --immutable
 
             - name: Publish to Chromatic
               id: chromatic

.gitignore

@@ -103,3 +103,12 @@ chromatic.log
 chromatic-build-*.xml
 chromatic-diagnostics*.json
 chromatic.config.json
+
+# yarn
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/sdks
+!.yarn/versio;/

.yarn/releases/yarn-4.6.0.cjs

@@ -0,0 +1,5 @@
+cacheFolder: ~/.cache/yarn
+nodeLinker: node-modules
+yarnPath: .yarn/releases/yarn-4.6.0.cjs
+# @todo: Remove enableScripts once pre/post install commands are migrated to the new Yarn 4 recommended pattern.
+enableScripts: true

.yarnrc.yml

@@ -6,7 +6,7 @@
     "type": "module",
     "engines": {
         "node": ">=20",
-        "yarn": ">=1.16.0"
+        "yarn": ">=4.6.0"
     },
     "scripts": {
         "analyze": "lit-analyzer \"{packages,tools}/*/src/**/!(*.css).ts\"",
@@ -433,5 +433,5 @@
         "tools/*",
         "react/*"
     ],
-    "packageManager": "yarn@1.22.22"
+    "packageManager": "yarn@4.6.0"
 }

package.json

@@ -85,7 +85,7 @@
         "@spectrum-web-components/iconset": "^1.0.1"
     },
     "devDependencies": {
-        "@spectrum-css/icon": "8.0.0-s2-foundations.17"
+        "@spectrum-css/icon": "8.0.0-s2-foundations.16"
     },
     "types": "./src/index.d.ts",
     "customElements": "custom-elements.json",

packages/icon/package.json

@@ -11,6 +11,7 @@ governing permissions and limitations under the License.
 */
 import { setCustomElementsManifest } from '@storybook/web-components';
 import { swcThemeDecorator } from '@spectrum-web-components/story-decorator/decorator.js';
+
 import cem from './custom-elements.json';
 
 setCustomElementsManifest(cem);

storybook/preview.js

@@ -13,7 +13,6 @@ governing permissions and limitations under the License.
 
 import slugify from '@sindresorhus/slugify';
 import crypto from 'crypto';
-import { getChangedPackages } from './get-changed-packages.js';
 
 const createHash = (context) => {
     const md5 = crypto.createHash('md5');
@@ -22,8 +21,6 @@ const createHash = (context) => {
 };
 
 export const buildPreviewURLComment = (ref) => {
-    const packages = getChangedPackages();
-
     // Extract the branch name from the ref and slugify it for URL usage
     const branch = ref.replace('refs/heads/', '');
     const branchSlug = slugify(branch);
@@ -82,11 +79,8 @@ export const buildPreviewURLComment = (ref) => {
     let comment = `## Branch preview
 
 - [Documentation Site](https://${branchSlug}--spectrum-web-components.netlify.app/)
-- [Storybook](https://${branchSlug}--spectrum-web-components.netlify.app/storybook/)`;
+- [Storybook](https://${branchSlug}--spectrum-web-components.netlify.app/storybook/)
 
-    // If there are changed packages, add a section with visual regression test results
-    if (packages.length > 0) {
-        comment += `
 
 
 <h3><strong>Review the following VRT differences</strong></h3>
@@ -98,8 +92,6 @@ ${previewLinks.join('')}
 If the changes are expected, update the <code>current_golden_images_cache</code> hash in the circleci config to accept the new images. Instructions are included in that file. 
 If the changes are unexpected, you can investigate the cause of the differences and update the code accordingly.
 `;
-    }
-
     return comment;
 };