Fix Babel/Storybook Setup

[sareh]

Resolves #115

Storybook should work and all components should load in styles. Note: Reith font and normalise setup are not yet added. Those will be added in a separate PR.

Testing instructions

git checkout fix-babel-storybook-setup
npm install 

This installs initial dependencies & all individual packages

npm run storybook 

This runs clear_styled_components & then starts storybook

Visit http://localhost:8080

There should be no errors, and styles should be pulled in.

• Tests added for new features
• Test engineer approval

[bcmn]

So there's an interesting behaviour with this commit:
npm run storybook fails if .babelrc isn't present (with the exports read-only error)
npm run build fails if babel.config.js isn't present

It looks like Storybook simply doesn't support babel.config.js for the time being, so I guess we're stuck with working out how to make npm run build use the .babelrc file. Looking into this is my next move this morning.

[ChrisBAshton]

Can we create a .babelrc in the .storybook dir which has this:

{ "extends": "../babel.config.js" }

...?

[ChrisBAshton]

Just tried locally and this doesn't appear to be needed - perhaps because we have that plugin-transform-modules-commonjs plugin for Jest now 🤔

[ChrisBAshton]

Nope - wait - after running npm ci and then npm test, it fails "cannot find babel-core" so we do need it.

[radiocontrolled]

What is the reason for using the alpha of @storybook/react as opposed to something more recent - "^4.0.12"?

[bcmn]

Really good work hunting down all these issues, all!