refactor: Add storybook + initial story #118
Conversation
Codecov Report
@@ Coverage Diff @@
## main #118 +/- ##
==========================================
- Coverage 67.72% 67.57% -0.16%
==========================================
Files 101 103 +2
Lines 5125 5132 +7
Branches 68 68
==========================================
- Hits 3471 3468 -3
- Misses 1343 1353 +10
Partials 311 311
Continue to review full report at Codecov.
|
package.json
Outdated
| @@ -12,13 +12,20 @@ | |||
| "format:write": "prettier --write '**/*.{css,html,js,json,jsx,md,ts,tsx,yaml,yml}' && sql-formatter -l postgresql ./database/query.sql -o ./database/query.sql", | |||
| "lint": "jest --selectProjects lint", | |||
| "lint:fix": "FIX=true yarn lint", | |||
| "storybook": "start-storybook -p 6006 -s ./site/static", | |||
There was a problem hiding this comment.
Should we put storybook and the package.json inside of site? Seems a bit weird to have at the root now that I look, especially because npm run X competes with Makefile.
There was a problem hiding this comment.
Good question, there was a blocker I ran into when I tried that on initially porting code over - due to differences in TypeScript compile requirements for nextjs and jest - different requirements for the jsx option. However turns it out wasn't too hard to fix in #128
I've now rebased this PR on top of that change so storybook lives completely in site now, too
#128) This refactors the front-end collateral to all live within `site` - so no `package.json` at the root. The reason we had this initially is that the jest test run and NextJS actually require having _two_ different `tsconfig`s - Next needs `jsx:"preserve"`, while jest needs `jsx:"react"` - we were using `tsconfig`s at different levels at the hierarchy to manage this. I changed this behavior to still use two different `tsconfig.json`s, which is mandatory - but just side-by-side in `site`. Once that's fixed, it was easy to move everything into `site` Follow up from: #118 (comment)
fc533b1 to
f72ccb9
Compare
This hooks up
storybook, which the front-end team has enjoyed using in the v1 codebase - it makes it quick and easy to view and test components in isolation.The
<LoadingButton />has a simple story added now, so if you runyarn storybook, you can preview it in various states:This will be helpful as we bring more front-end devs to help build v2 out.