Monorail 3 is an encapsulation of the SimSpace design language, backed by Material UI v5.
# Install dependencies
> yarn
# Run storybook site
> yarn storybook
The storybook site is currently organized similarly to the MUI docs, please try to put new components in reasonable places going forward.
Monorail 3 uses visual testing to assert that all component and theme changes are intentional. To accomplish this, we use Creevey, which can test in headless mode for CI and with a GUI to make comparisons easy. It is currently set up to be integrated with Storybook.
Creevey requires Docker to run. You can run it a few different ways:
localhost:3000
)
yarn creevey --ui
yarn test:visual
yarn creevey
yarn test:visual:ci
Once you have run the tests, if you see failures, you can inspect the differences in the snapshots in the Creevey GUI. If the new version looks good to you, you can use the Approve
button to accept the new image.
For setting up all tests from scratch, you can run tests the first time, and then use yarn creevey --update
to accept all the snapshots. DO NOT DO THIS IF YOU ARE MODIFYING THE COMPONENTS You want to compare images if to make sure there are no unwanted visual side-effects.
({...spread})
, and therefore any parameter options must be put on the story instead of spread through the story
helper function. e.g.export const MyStory = story(() => ..., {args: blah})
MyStory.parameters = {
docs: {...},
creevey: {
skip: true
}
}
Tabs
can sometimes not shift over correctly. These components will fail erroneously and should be skipped. They can also be given a higher threshold for failure using the threshold
option.We are currently setup to use the storybook-a11y
addon, so you can view a11y information for components and stories in storybook.
We also have a node-based jest
test running setup to run the a11y tests outside of storybook.
General comment: for issues with external libraries like storybook and docgen, the stance is that if there is a sensible/general fix for the problem that we can apply on our side, we can do it. If the fix requires non-trivial hacks, workarounds, or other unsavory code, we should not apply fixes on our side, and report the issue to the external repository. We are not looking to maintain all of these tools or super-custom setups ourselves.
ReactNode
props (e.g. children
) are rendered with a JSON editor, which is not usefulsx
props, or CSS-like props that you can set directly on components)children
props, Box
component, others