Docs: Adjust Images to latest and moves to latest node lts

chromaui · Jan 9, 2025 · 1390965 · 1390965
1 parent 1557fe2
commit 1390965
Show file tree

Hide file tree

Showing 8 changed files with 70 additions and 73 deletions.
diff --git a/src/content/ci/azure-pipelines.mdx b/src/content/ci/azure-pipelines.mdx
@@ -36,10 +36,10 @@ To integrate Chromatic with your existing pipeline, you'll need to add the follo
               - checkout: self
                 displayName: "Get Full Git History"
                 fetchDepth: 0
-              - task: NodeTool@0
+              - task: UseNode@1
                 displayName: "Install Node.js"
                 inputs:
-                  versionSpec: "20.12.2"
+                  version: "22.12.0"
               - task: Cache@2
                 displayName: "Install and cache dependencies"
                 inputs:
@@ -71,15 +71,15 @@ To integrate Chromatic with your existing pipeline, you'll need to add the follo
         jobs:
           - job: Playwright
             displayName: "Run Playwright"
-            container: mcr.microsoft.com/playwright:v1.49.0-jammy
+            container: mcr.microsoft.com/playwright:v1.49.0-noble
             steps:
               - checkout: self
                 displayName: "Get Full Git History"
                 fetchDepth: 0
-              - task: NodeTool@0
+              - task: UseNode@1
                 displayName: "Install Node.js"
                 inputs:
-                  versionSpec: "20.12.2"
+                  version: "22.12.0"
               - task: Cache@2
                 displayName: "Install and cache dependencies"
                 inputs:
@@ -112,10 +112,10 @@ To integrate Chromatic with your existing pipeline, you'll need to add the follo
               - checkout: self
                 displayName: "Get Full Git History"
                 fetchDepth: 0
-              - task: NodeTool@0
+              - task: UseNode@1
                 displayName: "Install Node.js"
                 inputs:
-                  versionSpec: "20.12.2"
+                  version: "22.12.0"
               - task: Cache@2
                 displayName: "Install and cache dependencies"
                 inputs:
@@ -153,17 +153,17 @@ To integrate Chromatic with your existing pipeline, you'll need to add the follo
         jobs:
           - job: Cypress
             displayName: "Run Cypress"
-            container: cypress/browsers:node-20.18.0-chrome-130.0.6723.69-1-ff-131.0.3-edge-130.0.2849.52-1
+            container: cypress/browsers:node-22.12.0-chrome-131.0.6778.139-1-ff-133.0.3-edge-131.0.2903.99-1
             variables:
               npm_config_cache: $(Pipeline.Workspace)/.npm
             steps:
               - checkout: self
                 displayName: "Get Full Git History"
                 fetchDepth: 0
-              - task: NodeTool@0
+              - task: UseNode@1
                 displayName: "Install Node.js"
                 inputs:
-                  versionSpec: "20.12.2"
+                  version: "22.12.0"
               - task: Cache@2
                 displayName: "Install and cache dependencies"
                 inputs:
@@ -198,10 +198,10 @@ To integrate Chromatic with your existing pipeline, you'll need to add the follo
               - checkout: self
                 displayName: "Get Full Git History"
                 fetchDepth: 0
-              - task: NodeTool@0
+              - task: UseNode@1
                 displayName: "Install Node.js"
                 inputs:
-                  versionSpec: "20.12.2"
+                  version: "22.12.0"
               - task: Cache@2
                 displayName: "Install and cache dependencies"
                 inputs:

diff --git a/src/content/ci/bitbucket-pipelines.mdx b/src/content/ci/bitbucket-pipelines.mdx
@@ -20,7 +20,7 @@ To integrate Chromatic with your existing pipeline, you'll need to add the follo
 <IntegrationSnippets>
   <Fragment slot="storybook">
     ```yml title="bitbucket-pipelines.yml"
-    image: node:iron
+    image: node:jod
 
     definitions:
       caches:
@@ -44,7 +44,7 @@ To integrate Chromatic with your existing pipeline, you'll need to add the follo
   </Fragment>
   <Fragment slot="playwright">
     ```yml title="bitbucket-pipelines.yml"
-    image: node:iron
+    image: node:jod
 
     definitions:
       caches:
@@ -57,7 +57,7 @@ To integrate Chromatic with your existing pipeline, you'll need to add the follo
             steps:
               - step:
                   name: "Playwright"
-                  image: mcr.microsoft.com/playwright:v1.49.0-jammy
+                  image: mcr.microsoft.com/playwright:v1.49.0-noble
                   caches:
                     - npm
                     - node
@@ -81,7 +81,7 @@ To integrate Chromatic with your existing pipeline, you'll need to add the follo
   </Fragment>
   <Fragment slot="cypress">
     ```yml title="bitbucket-pipelines.yml"    
-    image: node:iron
+    image: node:jod
 
     definitions:
       caches:
@@ -96,7 +96,7 @@ To integrate Chromatic with your existing pipeline, you'll need to add the follo
               - step:
                 name: "Cypress"
                 # Configure the ELECTRON_EXTRA_LAUNCH_ARGS environment variable in your project settings to run Cypress tests with Chromatic.
-                image: cypress/browsers:node-20.18.0-chrome-130.0.6723.69-1-ff-131.0.3-edge-130.0.2849.52-1
+                image: cypress/browsers:node-22.12.0-chrome-131.0.6778.139-1-ff-133.0.3-edge-131.0.2903.99-1
                 caches:
                   - npm
                   - node

diff --git a/src/content/ci/circleci.mdx b/src/content/ci/circleci.mdx
@@ -25,7 +25,7 @@ To integrate Chromatic with your existing workflow, you'll need to add the follo
     executors:
       chromatic-ui-testing:
         docker:
-          - image: cimg/node:20.12.2
+          - image: cimg/node:22.12.0
         working_directory: ~/repo
 
     jobs:
@@ -35,7 +35,7 @@ To integrate Chromatic with your existing workflow, you'll need to add the follo
           - checkout
           - restore_cache:
               keys:
-                - v1-dependencies-{{ checksum "package.json" }}
+                - v1-dependencies-{{ checksum "package-lock.json" }}
                 - v1-dependencies-
           # ⚠️ See your package manager's documentation for the correct command to install dependencies in a CI environment.
           - run: npm ci
@@ -44,7 +44,7 @@ To integrate Chromatic with your existing workflow, you'll need to add the follo
               name: Save NPM cache
               paths:
                 - ~/.npm
-              key: v1-dependencies-{{ checksum "package.json" }}
+              key: v1-dependencies-{{ checksum "package-lock.json" }}
 
     workflows:
       UI_Tests:
@@ -57,24 +57,24 @@ To integrate Chromatic with your existing workflow, you'll need to add the follo
     version: 2.1
 
     executors:
-      pw-jammy-development:
+      pw-noble-development:
         docker:
-          - image: mcr.microsoft.com/playwright:v1.49.0-jammy
+          - image: mcr.microsoft.com/playwright:v1.49.0-noble
         working_directory: ~/repo
       chromatic-ui-testing:
         docker:
-          - image: cimg/node:20.12.2
+          - image: cimg/node:22.12.0
         working_directory: ~/repo
 
     jobs:
       Playwright:
-        executor: pw-jammy-development
+        executor: pw-noble-development
         steps:
           - checkout
           - restore_cache:
               name: Restore NPM cache
               keys:
-                - v1-dependencies-{{ checksum "package.json" }}
+                - v1-dependencies-{{ checksum "package-lock.json" }}
                 - v1-dependencies-
           - run:
               name: "Install Playwright dependencies"
@@ -84,7 +84,7 @@ To integrate Chromatic with your existing workflow, you'll need to add the follo
               name: Save NPM cache
               paths:
                 - ~/.npm
-              key: v1-dependencies-{{ checksum "package.json" }}
+              key: v1-dependencies-{{ checksum "package-lock.json" }}
           - run:
               name: "Run Playwright tests"
               command: npx playwright test
@@ -104,7 +104,7 @@ To integrate Chromatic with your existing workflow, you'll need to add the follo
           - restore_cache:
               name: Restore NPM cache
               keys:
-                - v1-dependencies-{{ checksum "package.json" }}
+                - v1-dependencies-{{ checksum "package-lock.json" }}
                 - v1-dependencies-
           - run: npm ci
           - attach_workspace:
@@ -131,11 +131,11 @@ To integrate Chromatic with your existing workflow, you'll need to add the follo
     executors:
       cypress:
         docker:
-          - image: cypress/browsers:node-20.18.0-chrome-130.0.6723.69-1-ff-131.0.3-edge-130.0.2849.52-1
+          - image: cypress/browsers:node-22.12.0-chrome-131.0.6778.139-1-ff-133.0.3-edge-131.0.2903.99-1
         working_directory: ~/repo
       chromatic-ui-testing:
         docker:
-          - image: cimg/node:20.12.2
+          - image: cimg/node:22.12.0
         working_directory: ~/repo
 
     jobs:
@@ -146,7 +146,7 @@ To integrate Chromatic with your existing workflow, you'll need to add the follo
           - restore_cache:
               name: Restore NPM cache
               keys:
-                - v1-dependencies-{{ checksum "package.json" }}
+                - v1-dependencies-{{ checksum "package-lock.json" }}
                 - v1-dependencies-
           - run:
               name: "Install Cypress dependencies"
@@ -157,7 +157,7 @@ To integrate Chromatic with your existing workflow, you'll need to add the follo
               paths:
                 - ~/.npm
                 - ~/.cache
-              key: v1-dependencies-{{ checksum "package.json" }}
+              key: v1-dependencies-{{ checksum "package-lock.json" }}
           - run:
               name: "Run development server"
               command: npm run dev
@@ -183,7 +183,7 @@ To integrate Chromatic with your existing workflow, you'll need to add the follo
           - restore_cache:
               name: Restore NPM cache
               keys:
-                - v1-dependencies-{{ checksum "package.json" }}
+                - v1-dependencies-{{ checksum "package-lock.json" }}
                 - v1-dependencies-
           - run: npm ci
           - attach_workspace:

diff --git a/src/content/ci/custom-ci-provider.mdx b/src/content/ci/custom-ci-provider.mdx
@@ -20,7 +20,7 @@ To integrate Chromatic with your existing CI provider, you'll need to add the fo
 <IntegrationSnippets>
   <Fragment slot="storybook">
     ```yml title="your-workflow.yml"
-    image: node:iron
+    image: node:jod
 
     - run:
         # ⚠️ See your package manager's documentation for the correct command to install dependencies in a CI environment.
@@ -34,15 +34,15 @@ To integrate Chromatic with your existing CI provider, you'll need to add the fo
   </Fragment>
   <Fragment slot="playwright">
     ```yml title="your-workflow.yml"
-    image: node:iron
+    image: node:jod
 
     - run:
         # ⚠️ See your package manager's documentation for the correct command to install dependencies in a CI environment.
         command: npm ci 
     - run:
         name: "Playwright"
         displayName: "Run Playwright tests"
-        container: mcr.microsoft.com/playwright:v1.49.0-jammy
+        container: mcr.microsoft.com/playwright:v1.49.0-noble
         options:
           artifacts:
             # Chromatic automatically defaults to the test-results directory.
@@ -60,15 +60,15 @@ To integrate Chromatic with your existing CI provider, you'll need to add the fo
 </Fragment>
 <Fragment slot="cypress">
     ```yml title="your-workflow.yml"
-    image: node:iron
+    image: node:jod
 
     - run:
         # ⚠️ See your package manager's documentation for the correct command to install dependencies in a CI environment.
         command: npm ci 
     - run:
         name: "Cypress"
         displayName: "Run Cypress tests"
-        container: cypress/browsers:node-20.18.0-chrome-130.0.6723.69-1-ff-131.0.3-edge-130.0.2849.52-1
+        container: cypress/browsers:node-22.12.0-chrome-131.0.6778.139-1-ff-133.0.3-edge-131.0.2903.99-1
         environment:
           ELECTRON_EXTRA_LAUNCH_ARGS: "--remote-debugging-port=9222"
         options:

diff --git a/src/content/ci/github-actions.mdx b/src/content/ci/github-actions.mdx
@@ -35,7 +35,7 @@ In your `.github/workflows` directory, create a new file called `chromatic.yml`
               fetch-depth: 0
           - uses: actions/setup-node@v4
             with:
-              node-version: 20
+              node-version: 22.12.0
           - name: Install dependencies
             # ⚠️ See your package manager's documentation for the correct command to install dependencies in a CI environment.
             run: npm ci
@@ -56,14 +56,14 @@ In your `.github/workflows` directory, create a new file called `chromatic.yml`
       playwright:
         runs-on: ubuntu-latest
         container:
-          image: mcr.microsoft.com/playwright:v1.49.0-jammy
+          image: mcr.microsoft.com/playwright:v1.49.0-noble
         steps:
           - uses: actions/checkout@v4
             with:
               fetch-depth: 0
           - uses: actions/setup-node@v4
             with:
-              node-version: 20
+              node-version: 22.12.0
           - name: Install dependencies
             # ⚠️ See your package manager's documentation for the correct command to install dependencies in a CI environment.
             run: npm ci
@@ -89,7 +89,7 @@ In your `.github/workflows` directory, create a new file called `chromatic.yml`
               fetch-depth: 0
           - uses: actions/setup-node@v4
             with:
-              node-version: 20
+              node-version: 22.12.0
           - name: Install dependencies
              # ⚠️ See your package manager's documentation for the correct command to install dependencies in a CI environment.
             run: npm ci
@@ -120,15 +120,15 @@ In your `.github/workflows` directory, create a new file called `chromatic.yml`
         name: Run Cypress
         runs-on: ubuntu-latest
         container:
-          image: cypress/browsers:node-20.18.0-chrome-130.0.6723.69-1-ff-131.0.3-edge-130.0.2849.52-1
+          image: cypress/browsers:node-22.12.0-chrome-131.0.6778.139-1-ff-133.0.3-edge-131.0.2903.99-1
           options: --user 1001
         steps:
           - uses: actions/checkout@v4
             with:
               fetch-depth: 0
           - uses: actions/setup-node@v4
             with:
-              node-version: 20
+              node-version: 22.12.0
           - name: Install dependencies
             # ⚠️ See your package manager's documentation for the correct command to install dependencies in a CI environment.
             run: npm ci
@@ -156,7 +156,7 @@ In your `.github/workflows` directory, create a new file called `chromatic.yml`
               fetch-depth: 0
           - uses: actions/setup-node@v4
             with:
-              node-version: 20
+              node-version: 22.12.0
           - name: Install dependencies
             # ⚠️ See your package manager's documentation for the correct command to install dependencies in a CI environment.
             run: npm ci
@@ -508,7 +508,7 @@ This means the latest build on main will be an ancestor of this ephemeral branch
 If you decide to use the `pull_request` event, we recommend creating a separate workflow for Chromatic using the following strategy for the checkout step:
 
 ```yml
-- uses: actions/checkout@v3
+- uses: actions/checkout@v4
   with:
     fetch-depth: 0
     # 👇 Tells the checkout which commit hash to reference
@@ -696,13 +696,12 @@ jobs:
         uses: actions/checkout@v4
         with:
           fetch-depth: 0
-
       - name: ⎔ Setup node
         uses: actions/setup-node@v4
         with:
           cache: npm
           cache-dependency-path: ./package.json
-          node-version: 20
+          node-version: 22.12.0
       - name: 📥 Install deps
         run: npm install
       - name: Build Storybook