comicrelief · michael-odonovan · Apr 8, 2026 · Apr 8, 2026 · Apr 8, 2026 · Apr 8, 2026
diff --git a/.gitignore b/.gitignore
@@ -25,12 +25,16 @@ npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 
+checklist.md
+
 .idea
 .vscode
+.src-old
 
 # testing
 /coverage
 /tests_output
 /test-results/
 /playwright-report/
 /playwright/.cache/
+
diff --git a/.nvmrc b/.nvmrc
@@ -1 +1 @@
-v16.20.0
+v18.20.0
diff --git a/README.md b/README.md
@@ -1,14 +1,22 @@
-Comic Relief React Component Library
+
+Comic Relief Components Library
 --------------
 
 [![GitHub Actions](https://github.com/comicrelief/component-library/actions/workflows/main.yml/badge.svg)](https://github.com/comicrelief/component-library/actions)
 [![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)
 
-React components to be shared across Comic Relief applications
+### Recent Rebuild Notes (June 2026):
+- No more markdown importing Javascript faff in example files, just simple React component examples.
+- Only exception is the code examples visible below each of the components - they are built using a Vite-specific import feature:
+```import buttonExampleSrc from '../components/Atoms/Button/ButtonExample.jsx?raw';```
+- Styled-Components 5 => Styled Components 6 - slight syntax change. Previously usage of nested selector / "&" usage in nested CSS was assumed. It now needs to be explicit (like normal native CSS).
+- Removed _TriggerConfetti.js file. I couldn't find any usage, was likely a private helper no longer needed.
 
-### Use
 
-CR-CL has a dependency of Styled-components.
+### General Usage
+#### Main Dependencies
+- Vite
+- Styled Components
 
 #### Install the package
 ```
@@ -35,7 +43,7 @@ $ yarn install
 
 To start the dev build and server:
 ```
-$ yarn styleguide
+$ yarn dev
 ```
 
 To test:

diff --git a/babel.config.js b/babel.config.js
@@ -2,10 +2,12 @@
 module.exports = function (api) {
   api.cache(true);
 
-  const presets = [['react-app', { absoluteRuntime: false }]];
+  const presets = [
+    ['@babel/preset-env', { targets: { node: 'current' } }],
+    ['@babel/preset-react', { runtime: 'automatic' }]
+  ];
   const plugins = [
-    ['babel-plugin-styled-components'],
-    ['import', { libraryName: 'lodash', libraryDirectory: '', camel2DashComponentName: false }]
+    ['babel-plugin-styled-components']
   ];
 
   return {

diff --git a/docs/installation.md b/docs/installation.md
diff --git a/docs/introduction.md b/docs/introduction.md
diff --git a/docs/utils.md b/docs/utils.md
diff --git a/index.html b/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Component Library</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>
diff --git a/netlify.toml b/netlify.toml
@@ -0,0 +1,6 @@
+[build]
+  command = "yarn build:preview"
+  publish = "dist"
+
+[build.environment]
+  NODE_VERSION = "18"
diff --git a/package.json b/package.json
@@ -2,10 +2,19 @@
   "name": "@comicrelief/component-library",
   "author": "Comic Relief Engineering Team",
   "version": "0.0.0-see.readme.for.semantic.release.process",
-  "main": "dist/index.js",
+  "main": "dist/index.cjs.js",
+  "module": "dist/index.es.js",
+  "files": [
+    "dist"
+  ],
   "license": "ISC",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/comicrelief/component-library.git"
+  },
   "jest": {
     "verbose": true,
+    "testEnvironment": "jsdom",
     "testPathIgnorePatterns": [
       "<rootDir>/playwright/",
       "<rootDir>/dist/",
@@ -16,93 +25,75 @@
       "^axios$": "axios/dist/node/axios.cjs"
     }
   },
-  "module": "dist/index.js",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/comicrelief/component-library.git"
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "build:preview": "vite build --config vite.preview.config.mjs",
+    "preview": "vite preview",
+    "test:unit": "jest",
+    "test:unit:update": "jest -u",
+    "serve:preview": "vite preview --config vite.preview.config.mjs --port 4173",
+    "test:e2e": "playwright test --project=chromium",
+    "test:e2e--h": "playwright test --project=chromium --headed",
+    "test:e2e:ci": "playwright test --project=chromium",
+    "test:e2e:local": "playwright test --project=chromium; yarn playwright show-report",
+    "test:e2e:mac": "playwright test --project=chromium; yarn playwright show-report",
+    "test:e2e:mac:atoms": "playwright test playwright/components/atoms --project=chromium; yarn playwright show-report",
+    "test:e2e:mac:molecules": "playwright test playwright/components/molecules --project=chromium; yarn playwright show-report",
+    "test:e2e:mac:organisms": "playwright test playwright/components/organisms --project=chromium; yarn playwright show-report",
+    "test:e2e:mac:organisms:impactSlider:": "playwright test playwright/components/organisms/impactSlider.spec.js --project=chromium; yarn playwright show-report",
+    "lint": "eslint src",
+    "lint-fix": "yarn lint --fix"
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18",
+    "styled-components": ">=6"
   },
   "dependencies": {
-    "@babel/cli": "^7.21.5",
     "@hookform/resolvers": "^3.9.0",
     "@splidejs/react-splide": "^0.7.12",
-    "axios": "^1.7.2",
-    "babel-plugin-import": "^1.13.8",
+    "axios": "^1.7.7",
     "lazysizes": "^5.3.2",
-    "lodash": "^4.17.11",
-    "moment": "^2.29.4",
+    "lodash": "^4.17.21",
+    "moment": "^2.30.1",
     "prop-types": "^15.8.1",
-    "pure-react-carousel": "1.30.1",
-    "react": "^17.0.2",
-    "react-canvas-confetti": "^1.4.0",
+    "pure-react-carousel": "^1.30.1",
+    "react-canvas-confetti": "^2.0.7",
     "react-currency-format": "^1.1.0",
-    "react-dom": "^17.0.2",
-    "react-hook-form": "^7.52.1",
+    "react-hook-form": "^7.53.2",
     "react-modal": "^3.16.1",
     "react-range-slider-input": "^3.0.7",
-    "react-responsive": "^9.0.2",
-    "react-scripts": "4.0.3",
-    "react-spinners": "^0.11.0",
+    "react-responsive": "^10.0.0",
+    "react-spinners": "^0.14.1",
     "react-uid": "^2.3.3",
-    "styled-components": "^5.3.11",
     "youtube-player": "^5.6.0",
     "yup": "^1.4.0"
   },
-  "resolutions": {
-    "react-scripts/workbox-webpack-plugin/workbox-build/@surma/rollup-plugin-off-main-thread/ejs": "3.1.10",
-    "loader-utils": "2.0.3",
-    "unset-value": "2.0.1",
-    "shell-quote": "1.7.3",
-    "ansi-html": "0.0.9",
-    "semver": "7.5.2",
-    "braces": "3.0.3",
-    "node-forge": "1.3.2",
-    "nth-check": "2.0.1"
-  },
-  "scripts": {
-    "build": "rm -rf dist && NODE_ENV=production babel src --out-dir dist --copy-files --ignore __tests__,spec.js,test.js",
-    "test:unit": "yarn run jest",
-    "test:unit:update": "yarn jest -u",
-    "styleguide": "cross-env FAST_REFRESH=false styleguidist server",
-    "styleguide:build": "styleguidist build",
-    "test:e2e": "playwright test --project=chromium",
-    "test:e2e--h": "playwright test --project=chromium --headed",
-    "test:e2e:ci": "NODE_ENV=development; start-server-and-test styleguide http://localhost:6060 test:e2e",
-    "test:e2e:local": "export NODE_ENV=development; start-server-and-test styleguide http://localhost:6060 test:e2e",
-    "lint": "eslint src",
-    "lint-fix": "yarn lint --fix",
-    "build-pr": "rm -rf dist && NODE_ENV=development BABEL_ENV=development yarn babel src --out-dir dist --copy-files --ignore __tests__,spec.js,test.js",
-    "postinstall": "yarn build-pr"
-  },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
-  },
   "devDependencies": {
-    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
+    "@babel/core": "^7.24.0",
+    "@babel/preset-env": "^7.24.0",
+    "@babel/preset-react": "^7.24.0",
     "@playwright/test": "^1.38.1",
-    "cross-env": "^7.0.3",
-    "ejs": "^3.1.10",
+    "@vitejs/plugin-react": "^4.3.1",
+    "babel-jest": "^29.7.0",
+    "babel-plugin-styled-components": "^2.1.4",
+    "dotenv": "^17.4.2",
     "eslint": "^7.32.0",
     "eslint-config-airbnb": "^18.2.0",
     "eslint-plugin-import": "^2.27.5",
     "eslint-plugin-jsx-a11y": "^6.7.1",
     "eslint-plugin-react": "^7.32.2",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "jest": "^26.1.0",
-    "jest-styled-components": "^7.1.1",
-    "npm-run-all": "^4.1.5",
-    "prettier": "^2.8.8",
-    "react-styleguidist": "^11.1.7",
-    "react-test-renderer": "^17.0.2",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "jest-styled-components": "^7.4.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-test-renderer": "^18.3.1",
     "semantic-release": "^17.4.6",
-    "start-server-and-test": "^2.0.4"
+    "styled-components": "^6.1.13",
+    "vite": "^5.4.10",
+    "vite-plugin-dts": "^4.3.0"
   }
 }
diff --git a/playwright.config.js b/playwright.config.js
@@ -23,9 +23,11 @@ module.exports = defineConfig({
   },
   reporter: [
     ['list'],
-    ['html', { open: 'never' }]
+    ['html', { open: 'never' }],
+    ['json', { outputFile: '/tmp/pw-progress.json' }]
   ],
   use: {
+    baseURL: 'http://localhost:4173',
     actionTimeout: 0,
     /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
     trace: 'on-first-retry'
@@ -37,6 +39,7 @@ module.exports = defineConfig({
       name: 'chromium',
       use: {
         ...devices['Desktop Chrome'],
+        channel: process.platform === 'darwin' ? 'chrome' : undefined,
         viewport: {
           // Match our widest nav:
           width: 1300,
@@ -48,9 +51,9 @@ module.exports = defineConfig({
 
   /* Run your local dev server before starting the tests */
   webServer: {
-    command: 'yarn styleguide',
-    port: '6060',
+    command: 'yarn build:preview && yarn serve:preview',
+    url: 'http://localhost:4173',
     timeout: 120000,
-    reuseExistingServer: true
+    reuseExistingServer: !process.env.CI
   }
 });
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		v16.20.0
		v18.20.0
AndyEPhipps Jun 9, 2026 Copy link Copy Markdown Contributor Choose a reason for hiding this comment The reason will be displayed to describe this comment to others. Learn more. As per other comment re: Node 22+