Baseline Storybook stories

[joshwcomeau]

NOTE: We might switch to Docz. Please hold off on creating new stories for now

As discussed in #130, we want to use React Storybook to host a catalog of reusable components. The infrastructure work is complete, and now we need to write stories for existing components.

This issue tracks the progress we've made against our existing components.

Note that not every component will need a story; we should only create stories for components we anticipate being reused.

The goal for creating stories should be to show off how the component can be used; it's a tool for discoverability. This means that each component should have at least 1 story that mimics its in-app usage. We also want to create a variety of stories for each component to show off how its props can be used.

This is clearly too much work for a single person to take on, but I figure we can tick items in as they come in; just add a comment linking to a PR, and mention the component(s) it covers, and I'll add info to the list and tick the box.

Some components will have special requirements. I've given them different annotations. See the details below the list.

Components:

• BigClickableButton
• Button
• ButtonWithIcon
• Card
• CircularOutline
• ExternalLink¹
• FadeIn
• FadeOnChange²
• FormField
• FullWidth
• Heading
• HelpButton
• HoverableOutlineButton
• Icon (We use react-icons-kit, but we should still create a story to show how we use it!)
• Label
• LargeLED
• Logo
• Middot
• Modal²
• ModalHeader
• Module
• OnlyOn³
• OutlineButton
• Paragraph
• PixelShifter
• ProgressBar²
• ScrollDisabler²
• SelectableImage
• SelectableItem
• SmallLED
• Spacer (creativity needed to show what this one does, haha)
• Spinner
• Swimming
• TerminalOutput
• TextButton
• TextInput
• Titlebar
• Toggle
• TwoPaneModal²

¹ This component uses Electron methods, so it may be more trouble than it's worth to get it working in the browser.

² This component needs to have some state managed for it for the story to be useful. We'll need to build a little state-manager component for it, within the story. TODO: Add a link to an example.

³ This component is a screen-size helper. The story should make clear that the user has to resize their window to see its effect.

[joshwcomeau]

Hey @Leodau - created this issue. While it's not yet ready to be worked on, I figure you could get started (if you want) by picking a few components, learning about them, and thinking about how you'd create stories to best highlight them?

[joshwcomeau]

@Leodau and anyone else, this is good to be worked on!

Check out the example stories ProgressBar, Button, and ButtonWithIcon to use as templates for the future stories you write :)

[RodrigoCarvalhoCode]

I'm gonna make some of the stories 👍

[joshwcomeau]

@Futuro212 awesome, thanks!

Could be helpful to post the ones you're thinking of tackling, to make sure work isn't duplicated with someone else :)

[RodrigoCarvalhoCode]

I'm going by the order of the list :)

Should I submit pull requests after doing some stories? First time contributing :)

The ones I'm tackling:

• Card
• tbd

[superhawk610]

@Futuro212 great question! I would probably stick to 3 to 5 component stories per PR, that way it keeps your changes concise and easy to review in a single session (this is something I struggle with, as @joshwcomeau can attest 😁).

I would also update your comment with a checklist of the stories you're in progress on, that way if someone else wants to contribute they'll know which ones to skip so you're not duplicating each others' work.

[joshwcomeau]

Hi @Futuro212,

We're starting to think about moving from Storybook to Docz. If you've already done Card, I'd just open a PR with that one, and hold off from doing any more :)

We'd love to get your help adding stories in Docz instead! Let us know if you're interested in that. The process is quite similar, but Docz use a Markdown+JSX syntax that is much nicer to work with

[RodrigoCarvalhoCode]

hey @joshwcomeau, lately I didn't have much time to progress with the task and since the card was simple, ill try the Docz approach :)

[joshwcomeau]

Hi @Futuro212,

Ah, so we haven't actually merged Docz in yet (it's #254). I think we do want to switch to it, but the first task is to fix whatever's causing the tests to fail, and convert all existing stories (since I don't really wanna have two conflicting solutions).

If you're up for it, feel free to take over that task :) but otherwise, maybe just open a PR with the work you've already done (if anything's ready - I saw the "Card" checkbox was ticked, but no worries if it's not quite ready for merging yet), and hang on until that stuff's ready to go.