Knobs

[joshpetit]

List of issues which are fixed by the PR

#21

Checklist

• I signed the [CLA].
• I listed at least one issue that this PR fixes in the description above.
• I updated/added relevant documentation (doc comments with ///).
• I added new tests to check the change I am making].
• All existing and new tests are passing.

[joshpetit]

One bug I found is that if you change the label of the knob while running and it hot reloads, the previous knob won't clear. But when you hot reload again it'll disappear.

[jenshor]

Love the implementation. Once completed this will be great 💪🏻 Keep going, Josh 👍🏻

[jenshor]

Some minor problems i've found:

• Example does not use description. I think it would be great to showcase this functionality 👍🏻
• Some UI Elements within the Knobs Panel do not use the color scheme of Widgetbook. It would be great if you could check what's going wrong.

Regarding the design:

• It's currently hard to determine which knobs are defined since the UI does not clearly separate specific knobs from each other:

Code to reproduce the image:

            WidgetbookComponent(
              name: 'MealDetail',
              useCases: [
                WidgetbookUseCase(
                  name: 'Short name',
                  builder: (context) {
                    final randomValue = context.knobs.nullableBoolean(
                      label: 'Nullable - nulls stuff',
                      description: 'A description for a description',
                    );
                    final randomString = context.knobs.nullableText(
                      label: 'Nullable - nulls string stuff',
                      description: 'An amazing description',
                    );
                    return MealDetail(
                      meal: Meal(
                        title: context.knobs.text(
                          label: 'title',
                          description:
                              'Use this to set an amazing title to the $MealDetail widget',
                          initialValue: 'Bacon Burger',
                        ),
                        imagePath: 'assets/burger.jpg',
                        ingredients: [
                          if (context.knobs.boolean(
                            label: 'Tomato',
                            description:
                                'Shows if this can be a tomato (or not)',
                            initialValue: true,
                          ))
                            'tomato',
                          context.knobs
                              .slider(
                                  label: 'Slider value',
                                  description:
                                      'This is a vereeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeery long description',
                                  initialValue: 50,
                                  min: 0,
                                  max: 100,
                                  divisions: 100)
                              .toInt()
                              .toString(),
                          if (randomValue == null)
                            'its null!'
                          else
                            randomValue.toString(),
                          randomString ?? 'string value was null',
                          'onion',
                          '${context.knobs.nullableNumber(
                            label: 'How many apples?',
                          )} apples',
                        ],
                        price: 8.5,
                        weight: 320,
                      ),
                    );
                  },
                ),

I propose this design - left side shows the KnobsPanel, right side shows the PropertyPanel.
The x-ed out area indicates knob specific UI elements.

[joshpetit]

@jenshor I love the new design!

[joshpetit]

dope stuff lol