Knobs to interact with stories

[andydean565]

have just come across this project and was wondering if you plan on adding any interactive "story" functionality ?

e.g change widget inputs within the widgetbook interface on the fly

[jenshor]

Hello Andrew,

that's a great question! We have heard this feature request from other developers as well. Right know we are thinking about implementing such a feature. But before we dive deep into the implementation we would love to understand better why you want this feature.

Could you elaborate on your use case and why you would love to see this in our widgetbook?

[andydean565]

Hi that’s great to hear, iv been looking to improve the collaboration between me and the design team for a current project

I have a few use cases in mind :

• a widget which uses a status to determine its styling (eg in_progress, successful, rejected) and it would be great being able to flip between easily to see all variations.
• a very generic widget which designers can add they’re own parameters too.
• For any widgets rely on backend data which could vary and to see its limits (mostly text)
• Animations which use param changes to run

Hopefully these use cases give you a better idea and I’m happy to even try help out but have limited open source project experience.

[jenshor]

I think for the first use case of toggling between specific stylings, it would be sufficient to use different stories for rendering the widget in different configuration. However, if these different statuses come with an animation this will currently be difficult to render in our tool.

For the second use case I am not sure if i understand the use case correctly. Are you asking for an option to create the knobs within the widgetbook UI?

The third solution could be solved by mocking the backend, but this requires the widgetbook maintainer to write a lot of code (if those mock do not exist yet).

We indeed see the use case of interacting with stories with knobs and are currently investigating different approaches to make this happen. Unfortunately these knobs require quite a lot of manual effort of the developer maintaining the widgetbook. Therefore, we are looking for a solution to make this as simple and low effort as possible.

If you have an idea of how this can be implemented, we are happy to collaborate 👍🏻

[jenshor]

We now have this feature on a rough timeline and are planning first implementation steps.

Related work:

See knobs implementation of storybook_flutter and its plugin implementation.

Ideation:

UseCases and Knobs are not the same thing. UseCases are for pre-defined (test) cases while knobs are for playing around and exploring a widget. The UI (especially the NavigationPanel) needs to address this. We could host the Playground in which a user can modify the widget based on knobs on the WidgetbookWidget navigation element if a builder with knobs has been defined for the widget.

In theory, a use-case could also be 'knobbed'. But this likely leads to a lot of redundant code since the knobs have to be defined for every use case. This could be improved by the generator, but this likely would be rather complex. In the end it's the user's choice to use knobs for use cases.

Requirements:

• knob implementations for String, num, bool?, selection (e.g. for enums)
• knobs need to be expandable by the developer to add custom data types
• A description for knobs is great as it adds additional documentation which is not hidden in the code base

Additional (optional) features

• knob for Color with ColorPicker
• knob for Icon/IconData with IconPicker - this also should work if e.g. font_awesome_flutter is used