Open KnobsBuilder for extension

[Maatteogekko]

I wanted to add a custom color picker knob and I figured I could extend the KnobsBuilder and/or KnobsNotifier. But this is not possible at the moment since KnobsNotifier uses a private method to register the knobs

storybook_flutter/packages/storybook_flutter/lib/src/plugins/knobs.dart

Line 130 in ce34908

T _addKnob<T>(Knob<T> value) {

I think it would be really cool to allow users to define their own knobs, just like the plugins. It also looks like it would be pretty easy to make the changes needed to allow that.

[ookami-kb]

Hey, I made this private because all the built-in knobs are available through methods like boolean, text etc. External knobs would break this convention. Still, a good idea to think about.

At the same time, color picker seems like a commonly used knob, it would be good to have it out of the box, so feel free to add this as a PR into the library itself.

[divyanshuk10]

added a PR for color knob with preview - color knob support

[Maatteogekko]

@divyanshuk10 I took a look at the PR. I was thinking more about showing a color wheel and letting the user pick the color on the fly, and possibly specifying a predefined list of colors to choose from.
Something like this package (minus all the cosmetic options, and embedded in the side panel)

[divyanshuk10]

@Maatteogekko , Thanks for reviewing the PR. i created this knob in the case of user defined color options only. Going forward i am thinking to open a PR for a separate color palette knob for per-defined color options using a color picker. @ookami-kb Please help review & approve the PR. thanks!

[ookami-kb]

I agree with @Maatteogekko that color picker makes more sense in the context of the color knob. The list of predefined colors is just a select knob with custom renderer of the list tile. If it's needed, it's better to add support for this custom renderer to the select knob.

[buehler]

Hey @ookami-kb

I still think that opening _addKnob would be a cool addition. I just tried to add a button knob by myself, just as a plugin / extension because it serves a pretty special usecase. However, without having access to the _addKnob method, I do not have any chance to add something.

Even when opening this add knob method, the convention still holds since people can just write extensions:

extension CustomKnobs on KnobsNotifier {
  ButtonKnobValue button(
          {required String label, String? description, bool enabled = true}) =>
      throw UnimplementedError();
}

It would be cool to have this, such that custom knobs can be implemented and even shared (thinking #52 and the color knob).

Cheers

[ookami-kb]

Hey, yeah, that makes sense. But the button looks like a valid core functionality, we should add it to the library itself. Would it be enough for your use case?

[buehler]

While I think it can be a good idea for the core library, I still think you should open the _addKnob method. I can still think of other potential additions to the knobs which are pretty project specific.

Since everything else tries to be pluggable, this should as well.

[buehler]

Hey @ookami-kb, should I make a PR to open up _addKnob?

It would be the most open addition to truly customize flutter storybook 😊

[ookami-kb]

Hey @buehler, yep, go ahead 👍

[buehler]

Done in #130

[bramp]

Thanks for #130 I think making KnobListTile public would also be useful, otherwise any custom knob you add is not styled correctly.