Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Storybook: Next steps for better experience when developing UI components #17973

Open
gziolo opened this issue Oct 16, 2019 · 3 comments

Comments

@gziolo
Copy link
Member

@gziolo gziolo commented Oct 16, 2019

Storybook was introduced in #17475. The idea was to have a tool for developing UI components in isolation for React. It is integrated with GitHub pages and folks can see how this tool works in action at http://wordpress.github.io/gutenberg/design-system/components/.

Next steps

  • Add React Native version of Storybook (#17829)
  • Add stories for all @wordpress/components which contain examples in their README files
  • Add knobs extension to allow dynamic modifications of props directly in Storybook (#17891)
  • Explore whether it's possible and makes sense to integrate the playground into the Storybook (#18191)
  • Investigate StoryShots addon which adds automatic Jest Snapshot Testing for Storybook (#18031)
  • Investigate options for visual testing

Tweaks

  • Include knobs integration to all existing stories
  • Ensure all exported constants with components start with upper-case to make it easier to use React hooks inside without triggering lint errors Move out all React hooks from the exported story functions to their own components (#18030)
@ItsJonQ

This comment has been minimized.

Copy link
Contributor

@ItsJonQ ItsJonQ commented Oct 16, 2019

@gziolo 👋
Here's a checklist for the components to help with the Storybook effort. I've noticed @mkaz adding a bunch (which is amazing!). I think this will help

Stories for Components

  • Animate
  • Autocomplete
  • BaseControl
  • Button
  • ButtonGroup
  • CheckboxControl (#17891)
  • CircularOptionPicker
  • ClipboardButton
  • ColorIndicator
  • ColorPalette (#17997)
  • ColorPicker (#18013)
  • Dashicon (#18027)
  • DateTime
  • Disabled
  • Draggable (#18070)
  • DropZone
  • Dropdown
  • DropdownMenu
  • ExternalLink (#18084)
  • FocalPointPicker
  • FocusableIframe
  • FontSizePicker (#18149)
  • FormFileUpload
  • FormToggle (#18085)
  • FormTokenField
  • GradientPicker
  • HigherOrder
  • Icon
  • IconButton
  • IsolatedEventContainer
  • KeyboardShortcuts
  • MenuGroup
  • MenuItem
  • MenuItemsChoice
  • Mobile
    • BottomSheet
    • HTMLTextInput
    • KeyboardAvoidingView
    • KeyboardAwareFlatList
    • Picker
    • ReadableContentView
    • Slider
  • Modal (#18083)
  • NavigableContainer
  • Notice
  • Panel (#18541)
  • Placeholder
  • Popover (#18096)
  • Primitives
    • BlockQuotation
    • HorizontalRule
    • SVG
  • QueryControls
  • RadioControl (#18474)
  • RangeControl (#18146)
  • ResizableBox (#18097)
  • ResponsiveWrapper
  • Sandbox
  • ScrollLock
  • SelectControl
  • Shortcut
  • SlotFill
  • Snackbar (#18386)
  • Spinner (#18145)
  • TabPanel (#18402)
  • TextControl
  • TextareaControl
  • Tip (#18542)
  • ToggleControl (#18388)
  • Toolbar (#18534)
  • ToolbarButton (#18534)
  • Tooltip
  • TreeSelect
@gziolo

This comment has been minimized.

Copy link
Member Author

@gziolo gziolo commented Oct 22, 2019

Here's a checklist for the components to help with the Storybook effort. I've noticed @mkaz adding a bunch (which is amazing!). I think this will help

Thanks @ItsJonQ! For those who would like to help, @mkaz posted more details about how to add a story for the existing component: https://mkaz.blog/code/coding-a-storybook-story/. It includes also a live coding demo

@enejb

This comment has been minimized.

Copy link
Contributor

@enejb enejb commented Oct 23, 2019

Just added one for FormToggle Component #18085

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
3 participants
You can’t perform that action at this time.