Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Start Storybook and react components additions #334

Closed
wants to merge 74 commits into from

Conversation

dalecreativ
Copy link
Contributor

Storybook and react additions

What we've done:

  • Added react and react-dom
  • Added Storybook react, for react component development
  • Downgraded PostCSS from v8 to v7. See NOTES
  • Updated babel.config.js for react builds
  • Updated the component-template package to help start new react components.
  • Added a component-blockquote, includes a react component, styles and jest tests.

To test:

Start the storybook app

npm ci
npm run storybook

confirm working with stories at localhost:6006

Run a build

npm run build

Should build all packages without error.

NOTES:

Storybook react 6.1 > 6.2 has had known issues around its dependencies.

This has caused issues with builds for storybook when using packages like postcss v8 in your own projects that use storybook. As a temporary measure, we've downgraded the postcss version to 7, until an official patch has been released.
Issues and discussions from storybook:

UPDATE: Storybook are currently on beta release of 6.2. With some updates and a additional addon @storybook/addon-postcss. We're now able to build without error.
I've set up a branch to help track beta to production release here : https://github.com/coopdigital/coop-frontend/tree/storybook-beta-with-postcss8

…r, followed dir pattern from foundation-forms
@mchadwickweb
Copy link
Contributor

@dalecreativ everything is looking great. I think as a first pass for getting React into here this is great.

We have already spoken about the use of React Testing Library over Enzyme for integration level testing.

I think some next steps would be:

  1. Test the E2E flow of development, test, publish, consume for the component.
  2. Look into how we can ring fence our build configuration from Storybook and remove the current coupling to it.

@dalecreativ
Copy link
Contributor Author

@mchadwickweb I've updated the dependencies for react-testing-library and removed deps on enzyme and react-test-renderer. Made sure to update the tests and snapshots for the components too. 👍

@mchadwickweb mchadwickweb deleted the pcss7-storybook-test branch December 30, 2021 14:29
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants