Storybook Controls

[supryan]

Is your feature request related to a problem? Please describe.

Our team uses Storybook along with Prismic and our designers and collaborators love using Storybook controls to input their own data and test the components themselves.

Describe the solution you'd like

We would like to see controls added to the stories that are automatically generated from Slice Machine. You're basically already there! We love that Slice Machine auto-generates the stories. All this would involve is adding a Component.args = {} object and add a property for each field name with the mock data for each field rather than including the mock data directly on the component.

Describe alternatives you've considered

Because of this, we're forced to not use the Slice Machine UI after the slice is automatically generated and add the controls manually in the *.stories.js files. Of course any new data edited in the Slice Machine UI overwrites this behavior which is very annoying to say the least. Example of how this can be done:

import MyComponent from '../../../../slices/Hero'

export default {
  title: 'slices/Hero',
}

export const _Default = (args) => (
  <MyComponent
    slice={{
      variation: 'default',
      name: 'Default',
      slice_type: 'hero',
      primary: {
        title: [
          {
            type: 'heading2',
            text: args.title, // Title gets pulled in here
            spans: [],
          },
        ],
      },
      id: '_Default',
    }}
  />
)
_Default.storyName = 'Default'
// This is where you would append args as props, Storybook controls are added
_Default.args = {
  title: 'Mock data that gets generated from Slice Machine can go here.'
}

Additional context

https://user-images.githubusercontent.com/6980704/162073588-d096f9e5-1347-4eff-a207-136849a4e3fa.mp4

Storybook Controls Documentation: https://storybook.js.org/docs/react/essentials/controls

[comeprismic]

Hi!

Thanks for sharing this request. We are not planning on adding any more features related to StoryBook as we focus and invest on our Slice Simulator, but if you want to contribute and make a PR we will gladly consider and review it.