search

ariakit / ariakit

Toolkit for building accessible web apps with React
https://ariakit.org
MIT License
7.84k stars 370 forks source link

Examples #626

Closed diegohaz closed 2 years ago

diegohaz commented 4 years ago

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:

  1. Run yarn to install dependencies
  2. Run yarn storybook to open storybook
  3. Run yarn test --watch to watch test files
  4. Take a look at the other examples and start writing yours.
leonardoelias commented 4 years ago

I will write some today.

Do you have any observations about what would be best for each component?

diegohaz commented 4 years ago

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.

frassinier commented 4 years ago

Is there any reason not importing a relative path in the examples? 🤔

diegohaz commented 4 years ago

@frassinier Some of those examples will be eventually shown on the website.

image

It would lose a lot of context if it were import { Button } from "../../Button";.

jsomsanith commented 4 years ago

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.

jsomsanith-tlnd commented 4 years ago

Nevermind, I misunderstood, I thought you were putting all the stories files in a unique example folder. @frassinier told me my mistake.

ubbe-xyz commented 4 years ago

@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 👍🏻 )

diegohaz commented 4 years ago

@lluia Please! 😊I re-opened the PR and I'll comment there.

stale[bot] commented 4 years ago

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.

diegohaz commented 2 years ago

Closing in favor of #939