materialsproject · CopyDemon · Mar 2, 2026 · Mar 7, 2026 · Mar 10, 2026 · Jun 1, 2026
diff --git a/.github/workflows/jest_tests.yml b/.github/workflows/jest_tests.yml
@@ -20,9 +20,9 @@ jobs:
           BUILD_ID: ${{ steps.build_id.outputs.id }}
       - uses: actions/checkout@v2
       - name: Use Node.js
-        uses: actions/setup-node@v1
+        uses: actions/setup-node@v4
         with:
-          node-version: 18.x
+          node-version: 24.x
           registry-url: https://registry.npmjs.org/
           scope: '@mat-github-ci'
         env:

diff --git a/.github/workflows/publish-npm-manual.yml b/.github/workflows/publish-npm-manual.yml
@@ -27,11 +27,11 @@ jobs:
         uses: actions/setup-python@v1
         with:
           python-version: 3.7
-      - uses: actions/setup-node@v1
+      - uses: actions/setup-node@v4
         env:
           NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}
         with:
-          node-version: '12.x'
+          node-version: '24.x'
           registry-url: https://registry.npmjs.org/
           scope: '@mat-github-ci'
       - name: Install dependencies

diff --git a/.github/workflows/publish-npm.yml b/.github/workflows/publish-npm.yml
@@ -15,16 +15,16 @@ jobs:
         uses: actions/setup-python@v1
         with:
           python-version: 3.11
-      - uses: actions/setup-node@v1
+      - uses: actions/setup-node@v4
         env:
           NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}
         with:
-          node-version: '18'
+          node-version: '24.x'
           registry-url: https://registry.npmjs.org/
           scope: '@mat-github-ci'
       - name: Install dependencies
         run: |
-          npm install --legacy-peer-deps
+          npm install ci
       - name: Build project
         run: |
           npm run build-publish

diff --git a/.gitignore b/.gitignore
@@ -39,4 +39,6 @@ archive/
 # Assets used for local development only
 src/assets/fonts
 src/assets/styles.css
-src/assets/fonts.css
+src/assets/fonts.css
+
+.parcel-cache/
diff --git a/.nvmrc b/.nvmrc
@@ -0,0 +1 @@
+24
diff --git a/.storybook/main.js b/.storybook/main.js
@@ -1,14 +1,18 @@
 module.exports = {
-  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+
   addons: [
     '@storybook/addon-links',
+    '@storybook/addon-webpack5-compiler-babel',
     '@storybook/addon-essentials',
-    '@storybook/addon-interactions'
+    '@storybook/addon-docs'
   ],
-  framework: '@storybook/react',
-  core: {
-    builder: '@storybook/builder-webpack5'
+
+  framework: {
+    name: '@storybook/react-webpack5',
+    options: {}
   },
+
   webpackFinal: async (config) => {
     config.module.rules.push({
       test: /\.less$/,

diff --git a/.storybook/preview.js b/.storybook/preview.js
@@ -1,6 +1,6 @@
 import '../node_modules/bulma/css/bulma.min.css';
 import '../src/styles.less';
-import '../src/assets/fonts.css';
+// import '../src/assets/fonts.css';
 import '../src//stories/stories.css';
 
 export const parameters = {
@@ -46,3 +46,4 @@ export const parameters = {
     }
   }
 };
+export const tags = ['autodocs'];
diff --git a/Dockerfile b/Dockerfile
@@ -1,4 +1,4 @@
-FROM node:12.14.1
+FROM node:24
 # Setup the working directory
 RUN mkdir /srv/github-actions-app
 WORKDIR /srv/github-actions-app

diff --git a/README.md b/README.md
@@ -20,18 +20,18 @@ Clone the mp-react-components repo:
 git clone git@github.com:materialsproject/mp-react-components.git
 ```
 
-Ensure you're using Node.js version 12.x for compatibility.
+This project targets Node.js v24 (see `.nvmrc`). Node 20+ is the minimum supported version.
 If you don't have nvm (Node Version Manager) installed, you can install it using the following command:
 
 ```
 curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash
 ```
 
-Install and use Node.js version 12.x.
+Install and use the version pinned in `.nvmrc`:
 
 ```
-nvm install 18
-nvm use 18
+nvm install 24
+nvm use
 ```
 
 To check Node.js version

diff --git a/babel.config.js b/babel.config.js
diff --git a/demo/index.html b/demo/index.html
@@ -16,6 +16,6 @@
   </style>
   <body>
     <div id="app"></div>
-    <script src="app.tsx"></script>
+    <script type="module" src="app.tsx"></script>
   </body>
 </html>
diff --git a/jest.config.js b/jest.config.js
@@ -10,7 +10,7 @@ module.exports = {
    * This is necessary for node modules that distribute their source code as uncompiled JS.
    */
   transformIgnorePatterns: [
-    'node_modules/(?!(three|trim-lines|github-slugger|unist-.*|hast-.*|rehype-slug|remark-rehype|react-markdown|vfile.*|unified|bail|is-plain-obj|trough|remark-parse|mdast-.*|micromark.*|decode-named-character-reference|unist-.*|character-entities|property-information|space-separated-tokens|comma-separated-tokens)/)'
+    'node_modules/(?!(three|d3-.*|internmap|trim-lines|github-slugger|unist-.*|hast-.*|rehype-slug|remark-rehype|react-markdown|vfile.*|unified|bail|is-plain-obj|trough|remark-parse|mdast-.*|micromark.*|decode-named-character-reference|unist-.*|character-entities|property-information|space-separated-tokens|comma-separated-tokens)/)'
   ],
   modulePaths: ['<rootDir>'],
   moduleDirectories: ['node_modules', '<rootDir>'],