SFDigitalServices / formio-sfds

The form.io theme for sf.gov
https://formio-sfds.herokuapp.com/
MIT License
15 stars 2 forks source link

Set up Storybook #231

Closed shawnbot closed 1 year ago

shawnbot commented 2 years ago

This brings Storybook into the repo as a more feature-full environment for testing our form features and individual components. You can see it in action at on Heroku.

The setup was honestly kind of painful. Some notable pain points:

  1. I first tried the Storybook web components framework to see if we could use the <sfgov-form> component as the foundation for testing. Unfortunately, a lot of things were missing and I couldn't even get the controls or actions addons working.
  2. I wanted to use the official formio/react package, but I couldn't figure out (in Storybook's wacky webpack setup) how to bundle it and our theme in such a way that they share the same Formio reference. Instead, I built a new Form (React) component that uses state and effect hooks extensively, and it seems to work well; but it feels like a hack.

@JimBrodbeck Could you review this while I'm out? I'd love your thoughts on a couple of things:

  1. Are you able to npm install and then run Storybook with npm run storybook?
  2. Does the way that stories are written make sense?
github-actions[bot] commented 2 years ago

Size Change: -3.35 kB (-4%)

Total Size: 86.5 kB

Filename Size Change
dist/formio-sfds.standalone.js 66 kB -3.4 kB (-5%)
dist/portal.js 6.7 kB +53 B (+1%)
ℹ️ View Unchanged | Filename | Size | | :--- | :---: | | `dist/formio-sfds.css` | 13.8 kB |

compressed-size-action

shawnbot commented 1 year ago

We will not be doing this 😄