This repository has been archived by the owner on Apr 15, 2019. It is now read-only.
Add react storybook - Closes #496 #497
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Proof of concept for React Storybook.
Closes #496
Fonts aren't working currently, and I didn't want to go too deep into your webpack config to figure out why.
You can run
npm run storybookto host storybook atlocalhost:6006to see a catalogue of stories. Then you can select components down the side (and in the case ofAddressthere are two different "stories"). InDialogif you click on "Close modal" you will see an action logged via a prop passed to the component.Once you've selected the component/story you're interested in, going to
localhost:6006/iframe.html?[your params]will show you just the component, which is really nice to develop with.Structure
Storybook config is in
./.storybook, stories related to components are in./stories.Extending
Follow the pattern in
./stories/index.js. Obviously it would be nice to split this up into different files, and you could even have story files next to components like your test files.Further steps
We could host this so internal and external contributors can browse our library of components to see what can be reused or modified, to see expected behaviour, which actions are fired when etc. Ideally we would separate the components into a separate module for reuse in other projects (e.g. explorer).