comicrelief · michael-odonovan · Apr 8, 2026 · Apr 8, 2026 · Apr 8, 2026 · Apr 8, 2026
diff --git a/.eslintrc b/.eslintrc
@@ -21,7 +21,7 @@
     "react/jsx-filename-extension": "off",
     "react/no-danger": "off",
     "import/no-extraneous-dependencies": ["error", {"devDependencies": ["importers/**/*.js"]}],
-    "react/jsx-curly-newline": "off", // already handled by prettier, but differently, so we have to disable one
+    "react/jsx-curly-newline": "off",
     "quotes": [
       2,
       "single",

diff --git a/.nvmrc b/.nvmrc
@@ -1 +1 @@
-v16.20.0
+v18.20.0
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/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,78 @@
       "^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",
+    "styleguide": "cross-env FAST_REFRESH=false styleguidist server",
+    "styleguide:build": "styleguidist build",
+    "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": "export NODE_ENV=development; start-server-and-test styleguide http://localhost:6060 test:e2e",
+    "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",
+    "@vitejs/plugin-react": "^4.3.1",
+    "babel-jest": "^29.7.0",
+    "babel-plugin-styled-components": "^2.1.4",
     "cross-env": "^7.0.3",
+    "dotenv": "^17.4.2",
     "ejs": "^3.1.10",
     "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",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "jest-styled-components": "^7.4.0",
     "npm-run-all": "^4.1.5",
     "prettier": "^2.8.8",
-    "react-styleguidist": "^11.1.7",
-    "react-test-renderer": "^17.0.2",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-styleguidist": "^12.0.0",
+    "react-test-renderer": "^18.3.1",
     "semantic-release": "^17.4.6",
-    "start-server-and-test": "^2.0.4"
+    "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
@@ -26,6 +26,7 @@ module.exports = defineConfig({
     ['html', { open: 'never' }]
   ],
   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'
@@ -48,9 +49,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
   }
 });
diff --git a/playwright/components/atoms/input.spec.js b/playwright/components/atoms/input.spec.js
@@ -39,7 +39,7 @@ test.describe('input component', () => {
     await page.locator('#input-example-2').type('This is test input text');
 
     // error message should be visible
-    await expect(page.locator('[data-preview="Input"] > div > label > span[data-test="error-message"]')).toBeVisible();
+    await expect(page.locator('[data-testid="Input-example-1"] span[data-test="error-message"]')).toBeVisible();
 
     await page.close();
   });
@@ -57,7 +57,7 @@ test.describe('input component', () => {
     const nameAttribute = await inputElement.getAttribute('name');
 
     // Verify the 'name' attribute
-    expect(nameAttribute).toBe('fullname');
+    expect(nameAttribute).toBe('fullname3');
 
     await page.locator('#input-example-3').type('This is test input text');
 
@@ -77,7 +77,7 @@ test.describe('input component', () => {
     const nameAttribute = await inputElement.getAttribute('name');
 
     // Verify the 'name' attribute
-    expect(nameAttribute).toBe('fullname');
+    expect(nameAttribute).toBe('fullname4');
 
     await page.locator('#input-example-4').type('This is test input text');
 
@@ -97,7 +97,7 @@ test.describe('input component', () => {
     const nameAttribute = await inputElement.getAttribute('name');
 
     // Verify the 'name' attribute
-    expect(nameAttribute).toBe('fullname');
+    expect(nameAttribute).toBe('fullname5');
 
     await page.locator('#input-example-5').type('This is test input text');
 

diff --git a/playwright/components/atoms/label.spec.js b/playwright/components/atoms/label.spec.js
@@ -6,7 +6,7 @@ test.describe('label component', () => {
     await page.goto('/#label');
 
     // select dropdown menu component-1 should be visible
-    const specificElement = page.locator('[data-testid="Label-example-0"]');
+    const specificElement = page.locator('[data-testid="Label-example-1"]');
     await expect(specificElement).toBeVisible();
 
     await page.locator('input[name="field-wrapper-test"]').type('This is test text');

diff --git a/playwright/components/atoms/link.spec.js b/playwright/components/atoms/link.spec.js
@@ -6,7 +6,7 @@ test.describe('link component', () => {
     await page.goto('/#link');
 
     // select dropdown menu component-1 should be visible
-    const specificElement = page.locator('[data-testid="Link-example-0"]');
+    const specificElement = page.locator('[data-testid="Link-example-1"]');
     await expect(specificElement).toBeVisible();
 
     const [popup] = await Promise.all([
@@ -27,7 +27,7 @@ test.describe('link component', () => {
     await page.goto('/#link');
 
     // select dropdown menu component-1 should be visible
-    const specificElement = page.locator('[data-testid="Link-example-0"]');
+    const specificElement = page.locator('[data-testid="Link-example-1"]');
     await expect(specificElement).toBeVisible();
 
     // link standard icon should be visible

diff --git a/playwright/components/molecules/searchInput.spec.js b/playwright/components/molecules/searchInput.spec.js
@@ -8,13 +8,13 @@ test.describe('search input component', () => {
     await expect(page.locator('[data-testid="SearchInput-example-1"]')).toBeVisible();
     await expect(page.locator('[data-preview="SearchInput"]')).toBeVisible();
 
-    const inputElement = page.locator('#school-lookup');
+    const inputElement = page.locator('#search');
 
     // Get the 'placeholder' attribute
     const placeholderAttribute = await inputElement.getAttribute('placeholder');
 
     // Verify the 'placeholder' attribute
-    expect(placeholderAttribute).toBe('Type to start search');
+    expect(placeholderAttribute).toBe('Search...');
 
     await page.locator('#search').type('Red Nose Day');
 

diff --git a/playwright/components/molecules/shareButton.spec.js b/playwright/components/molecules/shareButton.spec.js
@@ -6,7 +6,7 @@ test.describe('share button component', () => {
     await page.goto('/#sharebutton');
 
     // accordian elements should be visible
-    await expect(page.locator('[data-testid="ShareButton-example-0"]')).toBeVisible();
+    await expect(page.locator('[data-testid="ShareButton-example-1"]')).toBeVisible();
     await expect(page.locator('[data-preview="ShareButton"]')).toBeVisible();
 
     await expect(page.locator('[data-preview="ShareButton"] > div > div > div:nth-child(1) > ul > li:nth-child(1) > a > img')).toBeVisible();

diff --git a/playwright/components/molecules/simpleSchoolLookUp.spec.js b/playwright/components/molecules/simpleSchoolLookUp.spec.js
@@ -5,7 +5,7 @@ test.describe('simple school lookup component', () => {
     await page.goto('/#simpleschoollookup');
 
     // simple school lookup elements should be visible
-    await expect(page.locator('[data-testid="SimpleSchoolLookup-example-0"]')).toBeVisible();
+    await expect(page.locator('[data-testid="SimpleSchoolLookup-example-1"]')).toBeVisible();
     await expect(page.locator('[data-preview="SimpleSchoolLookup"]')).toBeVisible();
 
     const inputElement = page.locator('#school_lookup');