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

Add React Storybook for isolated debugging & roadmapping #455

Open
7 tasks
ramfox opened this issue Feb 13, 2019 · 1 comment
Open
7 tasks

Add React Storybook for isolated debugging & roadmapping #455

ramfox opened this issue Feb 13, 2019 · 1 comment
Labels
backlog feat ui issues around visual layout ux issues User Experience: flow from page-to-page, button behaviours, etc
Milestone

Comments

@ramfox
Copy link
Member

ramfox commented Feb 13, 2019

add stories for our chrome components:

  • Button
  • Dropdown
  • DropdownMenu
  • LoadMore
  • NavLinks
  • Spinner
  • TopBar
@ramfox ramfox added this to the 0.7.1 milestone Feb 13, 2019
@ramfox ramfox changed the title refactor(storybook): add storybook to our app for visual and isolated debugging feat(storybook): add storybook to our app for visual and isolated debugging Feb 13, 2019
@b5 b5 added the backlog label Feb 18, 2019
@b5 b5 changed the title feat(storybook): add storybook to our app for visual and isolated debugging Add React Storybook for isolated debugging & roadmapping May 13, 2019
@b5
Copy link
Member

b5 commented May 13, 2019

I'm hijacking this issue to plan our Store
We’re going to be overhauling our UI & UX in the coming months, and we really want to get something like storybook in place before we start code work. This would give us an environment to experiment with & extend components & a place to iterate on different flows.

I'd like to structure this as a collaborative project that spreads across a few PRs, starting with one bigger PR that introduces a storybook to our codebase with a simple story around our existing Button component.

After that PR the next step would be to turn our Stylesheet component into story, and remove the Stylesheet component. Those two PRs should be enough to close this issue, we can make others for stories we'd like to see created once we better understand "story writing".

@ramfox feel free to chime in with your notes if you have any

PR1: Steps to complete:

  • follow https://storybook.js.org/docs/guides/guide-react/
    • manually add the storybook dep to our dev dependencies
    • add an entry to package.json scripts, as outlined in the
    • follow the steps for adding a simple button, but use our button component instead
  • add a new section to README.md called "Qri Storybook" linking to what the storybook is, and give quick steps to open the storybook
  • open PR & 🎉

PR2:

  • if PR1 isn't merged, branch off of that branch to add PR 2.
  • port the contents of our current Stylesheet.js component over to a story, focusing on getting the contents of the render method into a form storybook is happy with
  • delete the Stylesheet.js
  • open PR2 & 🌮 🍕

@jlwaugh you'd mentioned interest in kicking this project off. We'd be happy to have you take point on PR 1 & 2 if you're up for it, then others can pile on with additional stories 😄.

@b5 b5 added feat ui issues around visual layout ux issues User Experience: flow from page-to-page, button behaviours, etc labels May 13, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
backlog feat ui issues around visual layout ux issues User Experience: flow from page-to-page, button behaviours, etc
Projects
None yet
Development

No branches or pull requests

2 participants