Widgetbook 3: Migration Guide

It has been almost a year since our last stable release (v2.4.1). Today, we are happy to announce a NEW. STABLE. RELEASE. 🎉

We completely rethought Widgetbook from the ground up. This release is focused on creating a solid base that we can build more features onto, with Widgetbook Cloud in mind.

Highlights

1. Addons: allows tweaking use-cases. They are like knobs but global.
2. Better Knobs naming convention.
3. Remove code generation, except for use-cases.
4. Remove all builders (e.g. deviceFrameBuilder), except appBuilder.
5. Almost zero-dependencies, after removing dependency on provider, go_router, flutter_bloc and freezed.

How to Migrate

Annotations

This release comes with code generation support for use cases only. So the following changes were made:

1. @WidgetbookUseCase has been renamed to @UseCase.

2. @WidgetbookApp has been replaced with @App that takes no parameters. The new @App annotation generates a file containing a single variable called directories.

   Parameter	Alternative
   name	None
   foldersExpanded	None
   widgetsExpanded	None
   constructor	None
   devices	DeviceFrameAddon
   frames	DeviceFrameAddon
   themeType	ThemeAddon

3. Removed Annotations

   Annotation	Alternative
   @WidgetbookLocales	LocalizationAddon
   @WidgetbookLocalizationDelegates	LocalizationAddon
   @WidgetbookTheme	ThemeAddon
   @WidgetbookAppBuilder	Widgetbook's appBuilder parameter

Widgetbook Constructor

The following parameters were removed or renamed:

Knobs

Some knobs have been renamed:

Catalogs

WidgetbookCategory and WidgetbookFolder got their folders and widget properties refactor to a children property that can contain any structuring tree element.

Widgetbook.material(
  categories: [
    WidgetbookCategory(
      name: 'Category',
      folders: [
        WidgetbookFolder(
          name: 'widgets',
          widgets: [
            WidgetbookComponent(
              name: '$Container',
              useCases: [ ... ]
            )
          ]
        )
      ]
    )
  ],
  ...
)

Widgetbook.material(
  directories: [
    WidgetbookCategory(
      name: 'Category',
      children: [
        WidgetbookFolder(
          name: 'widgets',
          children: [
            WidgetbookComponent(
              name: '$Container',
              useCases: [ ... ]
            )
          ]
        )
      ]
    )
  ],
  ...
)