Skip to content
This repository has been archived by the owner on Jun 17, 2021. It is now read-only.

Baseline Storybook stories #131

Open
5 of 39 tasks
joshwcomeau opened this issue Aug 14, 2018 · 9 comments
Open
5 of 39 tasks

Baseline Storybook stories #131

joshwcomeau opened this issue Aug 14, 2018 · 9 comments
Labels
help wanted Extra attention is needed upcoming feature New feature or request

Comments

@joshwcomeau
Copy link
Owner

joshwcomeau commented Aug 14, 2018

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 joshwcomeau added the upcoming feature New feature or request label Aug 14, 2018
@joshwcomeau
Copy link
Owner Author

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
Copy link
Owner Author

@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 :)

@joshwcomeau joshwcomeau added the help wanted Extra attention is needed label Aug 21, 2018
@joshwcomeau joshwcomeau added the good first issue Good for newcomers label Aug 29, 2018
@RodrigoCarvalhoCode
Copy link
Contributor

I'm gonna make some of the stories 👍

@joshwcomeau
Copy link
Owner Author

@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
Copy link
Contributor

RodrigoCarvalhoCode commented Sep 2, 2018

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
Copy link
Collaborator

@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
Copy link
Owner Author

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

@joshwcomeau joshwcomeau removed the good first issue Good for newcomers label Sep 23, 2018
@RodrigoCarvalhoCode
Copy link
Contributor

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
Copy link
Owner Author

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.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
help wanted Extra attention is needed upcoming feature New feature or request
Projects
None yet
Development

No branches or pull requests

3 participants