feat: rebuild component-library using Vite

[michael-odonovan]

PR description

What is it doing?

Rebuild using Vite and native React/Javascript functionality.
Moves this repo off dependency on an unmaintained package and updates to React 18.

Why is this required?

Maintenance / Security updates.

link to Jira ticket:

https://comicrelief.atlassian.net/browse/ENG-4973

Quick Checklist:

• My PR title follows the Conventional Commit spec.

• I have filled out the PR description as per the template above.

• I have added tests to cover new or changed behaviour.

• I have updated any relevant documentation.

Important! - lastly, make sure to squash merge...

[AndyEPhipps]

Still working my way thru this matey; hoping I'll finish up tomorrow morn

[AndyEPhipps]

The alphabetising here makes the diff impossible to follow now, so I'm gonna just presume it's all okay haha

[AndyEPhipps]

🚀

[AndyEPhipps]

Aight: have gone through the code as much as my sanity will alllow for; gonna do some side-by-side stepping through the built application compared to current one for good measure, just to pre-empt anything else while we can do so in easily insolation.

Did you try boshing this into a local CR install yet, @michael-odonovan ?

[KrupaPammi]

@michael-odonovan I started reviewing this, from Playwright POV, config changes and tests are looking good.

But I need to test this branch's changes http://localhost:4173/ manually comparing it with https://cr-component-library.netlify.app/

The first issue I found is the ambient video controls just show a circle without a pause/play button inside.

I need to check other components too

[michael-odonovan]

Aight: have gone through the code as much as my sanity will alllow for; gonna do some side-by-side stepping through the built application compared to current one for good measure, just to pre-empt anything else while we can do so in easily insolation.

Did you try boshing this into a local CR install yet, @michael-odonovan ?

Do we have a way of testing these branches again now?
I have a PR setup and ready:
https://github.com/comicrelief/comicrelief-contentful/pull/2007

[AndyEPhipps]

Aight: have gone through the code as much as my sanity will alllow for; gonna do some side-by-side stepping through the built application compared to current one for good measure, just to pre-empt anything else while we can do so in easily insolation.
Did you try boshing this into a local CR install yet, @michael-odonovan ?

Do we have a way of testing these branches again now? I have a PR setup and ready: comicrelief/comicrelief-contentful#2007

Good point...

As it stands with currrent CL, you can import PR branches, but it'll only work locally; good enough a starting point to start mopping up import issues.

However, the build-pr and post-install scripts I added to the previous CL that did the "make me a dist folder plz" thing, look like they've been it's been removed here.

https://github.com/comicrelief/component-library/blob/master/package.json#L73

Since we don't have the same babel tooling here, this'll need updating to reflect the current build commands; will hopefully be very straightforward; just need to stick it in a post-install script directly (or as 'sub-script' like I did with with build-pr).

[AndyEPhipps]

Yeha, I saw seeing issues with icons too, think that 'mock.asset' thing is likely the cause; don't fully understand what that is or how its supposed to be used yet, but will pick over it next week.

Review list so far, just in case it's useful, will add to this later:

• Ambient Video missing play/pause icon missing
• Checkbox icon missing
• Input example formatting/layout (not a big deal, can totally be done later in another PR)
• Select icon missing
• Select background colour changed