[Discussion] [Ideas] Story definition API

[sterlingwes]

Hello! We love Storybooks at Wealthsimple and use it regularly as part of our React Native development. I'm excited for opportunities to contribute and thought I'd share our workflow for discussion and to see if there's interest in my efforts in any area.

There's a few things we've enjoyed doing:

• writing our stories alongside our components
• providing a more declarative way of defining stories
• diffing snapshots off of a base component story

An example:

import React from 'react';
import Button from './index';

module.exports = {
  storyGroup: 'Button',
  layout: {
    type: 'PageView',
    props: { title: 'My Navbar' }
  },
  stories: {
    default: () => (
      <Button text={'Tap Me'} onTap={() => {}} />
    ),
    slim: () => (
      <Button text={'Tap Me'} slim onTap={() => {}} />
    ),
    shareIcon: () => (
      <Button icon={'share'} text={'Share my link'}onTap={() => {}} />
    ),
};

The object format maps to current API methods:

• storyGroup => storiesOf(storyGroup)
• layout => addDecorator(() => {})
• stories[story variant] => add('story variant', () => {})

Where the default variant exists, we're using diff-react to only commit the snapshot diff between the default and the variant.

As far as organizing stories goes, we still explicitly define all our requires and wrap each with the module that makes the object definition possible. I've seen the separate add-on for generating those requires but feel like a glob syntax for the storybook start cli may be useful as well.

I'm not looking to add to your issue queue, just seeking guidance on areas worth pursuing before I start on a PR, so hopefully we can close this soon 😬

I'm excited for some of the upcoming changes focused on React Native (like the in-simulator UI in the 3.2 alpha)! Thanks for all of your efforts 🎉

[shilman]

@sterlingwes Nice!! We're excited to learn from your workflow. Are you proposing a single PR, or a handful of PR's for:

• glob syntax for storybook start
• use of diff-react for improving storyshots
• built-in support for a more declarative form of story definition?

Happy to provide feedback here, or if you're up for it our slack is a great place to get more realtime feedback: https://now-examples-slackin-nqnzoygycp.now.sh/

[sterlingwes]

Oh nice, I'll join in on Slack 👍

Yes was looking to split up the work for sure. Your first two suggestions I think I could tackle quickly. I might tread more carefully on the third being a fairly big API change. Thanks for the feedback!