react-component-variations
This project is:
- A format called "variations" for specifying React component examples and providing documentation for them.
- Tools for finding, validating, and iterating over variations.
A variation looks like:
// ButtonVariationProvider.jsx
import React from 'react';
import Button from '../components/Button';
export default function ButtonVariationProvider({ action }) {
return {
component: Button,
usage: 'Buttons are things you click on!',
variations: [
{
title: 'Default',
render: () => <Button onClick={() => action('onClick')}>click me!</Button>,
},
{
title: 'Disabled',
render: () => <Button disabled>Nope</Button>
}
],
};
}
We also have "consumers" that use the variation provider to perform tasks. Example consumers are:
- Rendering variations in Storybook
- Running in tests with Enzyme
- Taking screenshots with Happo
- Checking for accessibility violations with Axe
Contribution Guidelines:
- Fork this Repo
- Install dependencies by running
npm install
in the root of the project directory. - To run lint and test run locally, in the project root run
npm test
. To run tests only,npm run tests-only
.
Make sure new helpers and traversal functions have related tests.