feat: rebuild component-library using Vite

.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",

.nvmrc

@@ -1 +1 @@
-v16.20.0
+v18.20.0

README.md

@@ -4,7 +4,20 @@ Comic Relief React Component 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
+
+
+
+# Rebuild notes:
+### All diffs in main exported files are non-functional:
+- Styled-components & syntax updates => CSS output is identical, issues are around assumed "&" in nested CSS.
+- Confetti updated to newer react-canvas-confetti API => new prop names to activate confetti.
+- _TriggerConfetti.js removed => was likely a private helper no longer needed.
+
+### Have added a couple of scripts I worked on to make deving playwright locally less insanity inducing.
+
+
+
+# React components to be shared across Comic Relief applications
 
 ### Use
 

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 {

component-checks-Atoms.md

@@ -0,0 +1,131 @@
+
+### Notes:
+- styled-components v6 the "&" in "&:hover" is no longer implicit
+- haven't replaced axios remember...
+
+# Gotchas:
+- new prop names for confetti usage no needed in CR.com
+
+
+## Atoms
+
+- [ ] AmbientVideo
+  - [X] Diff check
+  - [X] Visual check of dev server
+  - [X] Example functionality check
+  - [X] code manual lint
+
+- [ ] Button
+  - [X] Diff check
+  - [X] Visual check of dev server
+  - [X] Example functionality check
+  - [ ] code manual lint
+
+- [ ] ButtonWithStates
+  - [X] Diff check
+  - [X] Visual check of dev server
+  - [X] Example functionality check
+  - [X] code manual lint
+
+- [ ] Checkbox
+  - [X] Diff check
+  - [X] Visual check of dev server
+  - [X] Example functionality check
+  - [X] code manual lint
+
+- [ ] Confetti
+  - [X] Diff check
+  - [X] Visual check of dev server
+  - [X] Example functionality check
+  - [X] code manual lint
+
+- [ ] ErrorText
+  - [X] Diff check
+  - [X] Visual check of dev server
+  - [X] Example functionality check
+  - [X] code manual lint
+
+- [ ] InfoMessage
+  - [X] Diff check
+  - [X] Visual check of dev server
+  - [X] Example functionality check
+  - [X] code manual lint
+
+- [ ] Input
+  - [X] Diff check
+  - [X] Visual check of dev server
+  - [X] Example functionality check
+  - [X] code manual lint
+
+- [ ] Label
+  - [X] Diff check
+  - [X] Visual check of dev server
+  - [X] Example functionality check
+  - [X] code manual lint
+
+- [ ] Link
+  - [X] Diff check
+  - [X] Visual check of dev server
+  - [X] Example functionality check
+  - [X] code manual lint
+
+- [ ] Logo
+  - [X] Diff check
+  - [X] Visual check of dev server
+  - [X] Example functionality check
+  - [X] code manual lint
+
+- [ ] Pagination
+  - [X] Diff check
+  - [X] Visual check of dev server
+  - [X] Example functionality check
+  - [X] code manual lint
+
+- [ ] Picture
+  - [X] Diff check
+  - [X] Visual check of dev server
+  - [X] Example functionality check
+  - [X] code manual lint
+
+- [ ] RadioButton
+  - [X] Diff check
+  - [X] Visual check of dev server
+  - [X] Example functionality check
+  - [X] code manual lint
+
+- [ ] RichText
+  - [X] Diff check
+  - [X] Visual check of dev server
+  - [X] Example functionality check
+  - [X] code manual lint
+
+- [ ] Select
+  - [X] Diff check
+  - [X] Visual check of dev server
+  - [X] Example functionality check
+  - [X] code manual lint
+
+- [X] SocialIcons
+  - [X] Diff check
+  - [X] Visual check of dev server
+  - [X] Example functionality check
+  - [X] code manual lint
+
+- [ ] Text
+  - [X] Diff check
+  - [X] Visual check of dev server
+  - [X] Example functionality check
+  - [X] code manual lint
+
+- [ ] TextArea
+  - [X] Diff check
+  - [X] Visual check of dev server
+  - [X] Example functionality check
+  - [X] code manual lint
+
+- [ ] TextInputWithDropdown
+  - [X] Diff check
+  - [X] Visual check of dev server
+  - [X] Example functionality check
+  - [X] code manual lint
+

component-checks-Molecules.md

@@ -0,0 +1,169 @@
+
+### Notes:
+- styled-components v6 the "&" in "&:hover" is no longer implicit
+- removing Axios as conflict
+
+## Molecules
+
+- [ ] Accordion
+  - [ ] Diff check
+  - [ ] Visual check of dev server
+  - [ ] Example functionality check
+  - [ ] code manual lint
+
+- [ ] ArticleTeaser
+  - [ ] Diff check
+  - [ ] Visual check of dev server
+  - [ ] Example functionality check
+  - [ ] code manual lint
+
+- [ ] Banner
+  - [ ] Diff check
+  - [ ] Visual check of dev server
+  - [ ] Example functionality check
+  - [ ] code manual lint
+
+- [ ] Box
+  - [ ] Diff check
+  - [ ] Visual check of dev server
+  - [ ] Example functionality check
+  - [ ] code manual lint
+
+- [ ] Card
+  - [ ] Diff check
+  - [ ] Visual check of dev server
+  - [ ] Example functionality check
+  - [ ] code manual lint
+
+- [ ] CardDs
+  - [ ] Diff check
+  - [ ] Visual check of dev server
+  - [ ] Example functionality check
+  - [ ] code manual lint
+
+- [ ] Chip
+  - [ ] Diff check
+  - [ ] Visual check of dev server
+  - [ ] Example functionality check
+  - [ ] code manual lint
+
+- [ ] Countdown
+  - [ ] Diff check
+  - [ ] Visual check of dev server
+  - [ ] Example functionality check
+  - [ ] code manual lint
+
+- [ ] CTAMultiCard
+  - [ ] Diff check
+  - [ ] Visual check of dev server
+  - [ ] Example functionality check
+  - [ ] code manual lint
+
+- [ ] CTASingleCard
+  - [ ] Diff check
+  - [ ] Visual check of dev server
+  - [ ] Example functionality check
+  - [ ] code manual lint
+
+- [ ] Descriptor
+  - [ ] Diff check
+  - [ ] Visual check of dev server
+  - [ ] Example functionality check
+  - [ ] code manual lint
+
+- [ ] DoubleCopy
+  - [ ] Diff check
+  - [ ] Visual check of dev server
+  - [ ] Example functionality check
+  - [ ] code manual lint
+
+- [ ] HeroBanner
+  - [ ] Diff check
+  - [ ] Visual check of dev server
+  - [ ] Example functionality check
+  - [ ] code manual lint
+
+- [ ] InfoBanner
+  - [ ] Diff check
+  - [ ] Visual check of dev server
+  - [ ] Example functionality check
+  - [ ] code manual lint
+
+- [ ] Lookup
+  - [ ] Diff check
+  - [ ] Visual check of dev server
+  - [ ] Example functionality check
+  - [ ] code manual lint
+
+- [ ] PartnerLink
+  - [ ] Diff check
+  - [ ] Visual check of dev server
+  - [ ] Example functionality check
+  - [ ] code manual lint
+
+- [ ] Promo
+  - [ ] Diff check
+  - [ ] Visual check of dev server
+  - [ ] Example functionality check
+  - [ ] code manual lint
+
+- [ ] QuoteSlice
+  - [ ] Diff check
+  - [ ] Visual check of dev server
+  - [ ] Example functionality check
+  - [ ] code manual lint
+
+- [ ] SchoolLookup
+  - [ ] Diff check
+  - [ ] Visual check of dev server
+  - [ ] Example functionality check
+  - [ ] code manual lint
+
+- [ ] SearchInput
+  - [ ] Diff check
+  - [ ] Visual check of dev server
+  - [ ] Example functionality check
+  - [ ] code manual lint
+
+- [ ] SearchResult
+  - [ ] Diff check
+  - [ ] Visual check of dev server
+  - [ ] Example functionality check
+  - [ ] code manual lint
+
+- [ ] ShareButton
+  - [ ] Diff check
+  - [ ] Visual check of dev server
+  - [ ] Example functionality check
+  - [ ] code manual lint
+
+- [ ] SimpleSchoolLookup
+  - [ ] Diff check
+  - [ ] Visual check of dev server
+  - [ ] Example functionality check
+  - [ ] code manual lint
+
+- [ ] SingleMessage
+  - [ ] Diff check
+  - [ ] Visual check of dev server
+  - [ ] Example functionality check
+  - [ ] code manual lint
+
+- [ ] SingleMessageDs
+  - [ ] Diff check
+  - [ ] Visual check of dev server
+  - [ ] Example functionality check
+  - [ ] code manual lint
+
+- [ ] Typeahead
+  - [ ] Diff check
+  - [ ] Visual check of dev server
+  - [ ] Example functionality check
+  - [ ] code manual lint
+
+- [ ] VideoBanner
+  - [ ] Diff check
+  - [ ] Visual check of dev server
+  - [ ] Example functionality check
+  - [ ] code manual lint
+