Closed diegohaz closed 2 years ago
I will write some today.
Do you have any observations about what would be best for each component?
I've been mostly focusing on how they compose with other components (like CompositeWithTooltip
or TooltipWithToolbar
), but I guess anything that could be in the docs could be in examples. Toolbar
with Menu
, Toolbar
with Popover
etc.
Is there any reason not importing a relative path in the examples? 🤔
@frassinier Some of those examples will be eventually shown on the website.
It would lose a lot of context if it were import { Button } from "../../Button";
.
Hello @diegohaz, That’s a great initiative. Just a question, why Don’t you put stories files next to the components files ? This would scale better and it’s like tests files, while working on a component you have everything related next to it.
Nevermind, I misunderstood, I thought you were putting all the stories files in a unique example folder. @frassinier told me my mistake.
@diegohaz happy to help with this, it's been a while since I contributed to Reakit, would you like me to rescue https://github.com/reakit/reakit/pull/402 as well? ( it was close due to inactivity but have quite some free time now 👍🏻 )
@lluia Please! 😊I re-opened the PR and I'll comment there.
This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.
Closing in favor of #939
Opening this issue in case anyone wants to help. Recently, we've configured Storybook to import files from
__examples__
folders inside Reakit component folders. This is how we're doing it:https://github.com/reakit/reakit/blob/0b70f435673db13b75f82d69ac2760b485879674/.storybook/preview.js#L7-L22
Those files aren't specific to Storybook. They're generic component files that can be used for other things, like integration testing and, in the future, website live examples or browser testing.
The idea is to have a single place in the component folder to keep examples that will also work as test cases and stories on Storybook, so we can have a visual representation of the component while we write tests for it.
Also, it's easier to scale than within our test files with 2700 lines. If someone opens an issue with a reproduction case, we can easily create an example and test it, both in code and in Storybook.
In case you want to create examples, follow these steps:
yarn
to install dependenciesyarn storybook
to open storybookyarn test --watch
to watch test files