pmndrs / react-three-flex

💪📦 Flexbox for react-three-fiber
MIT License
1.65k stars 42 forks source link

Added storybook and basic configuration and example #52

Closed saitonakamura closed 3 years ago

saitonakamura commented 3 years ago

Hi folks, I wanted to debug a parcular issue and didn't find any good way to do expect bring a storybook into project (I needed to change the source code so codesandbox wouldn't work, examples folder is hard to get rid of all stuff and isolate the issue and I was having problems with yarn link).

I think storybook works pretty well for drei so I kinda borrowed and adapted their config. It can be used for documentation purposes, live playground and potentially testing (say visual regression). What do you think?

talentlessguy commented 3 years ago

I don't like storybook and prefer having examples... you can always create a new page component and then debug the issue there

another option is Cypress integration tests

but probably other folks have a better opinion on that

so better ask @giulioz and @drcmda

saitonakamura commented 3 years ago

My problem with the examples is that doing things that goes beyond simple "drop a code here and see what happens" involves too much of a hassle. If I want multiple examples I need some kind of router. If I want to change props on the fly (without page reloading, which is useful when debugging reflow behaviour for instance) I need to setup some kind of ui knobs and hook it up with the props. For me it's essentially reinventing storybook (or any other such lib) but manually.

saitonakamura commented 3 years ago

Btw #53 is the issue I was debugging