Setup Widgetbook for Doctor App Component Library

[xkaper001]

Description

Set up Widgetbook for the Doctor app to create an interactive component library and design system showcase. This will help developers preview and test UI components in isolation.

What is Widgetbook?

Widgetbook is a Flutter package that creates a catalog of widgets, similar to Storybook for web development. It allows developers to:

• View all UI components in isolation
• Test different states and variations
• Document component usage
• Ensure design consistency
• Speed up development workflow

Requirements

• Add widgetbook package to docpilot_doctor/pubspec.yaml
• Add widgetbook_annotation and widgetbook_generator as dev dependencies
• Create widgetbook directory structure
• Configure widgetbook with themes and locales
• Add run configuration for widgetbook

Components to Showcase

Based on implemented components, create widgetbook entries for:

Form Components

• Text Field (various states: default, focused, error, disabled)
• Text Area (different sizes and validation states)
• Date Picker (with different date formats)
• Dropdown (with various options and states)
• Checkbox (checked, unchecked, disabled)

Buttons

• Primary Button (default, loading, disabled states)
• Secondary Button (all states)
• Tertiary Button (all states)
• FAB (Floating Action Button)

Navigation

• Bottom Navigation Bar (different selected tabs)
• Top App Bar (with/without back button)
• Progress Bar (different step counts)
• Pagination Dots (various page counts)

Display Components

• Banner Cards (different content types)
• Patient Cards (horizontal card variations)
• Avatar (different sizes, with/without image)
• Tags (various colors and text)
• Toast Messages (success, error, info, warning)
• List Items (with different icons and content)

Layout

• Dividers
• Filter Chips
• Weekly Calendar Component

Directory Structure

docpilot_doctor/
  ├── lib/
  │   └── ... (existing code)
  └── widgetbook/
      ├── main.dart (widgetbook app entry)
      ├── widgetbook.dart (generated file)
      └── components/
          ├── forms/
          │   ├── text_field.widgetbook.dart
          │   ├── dropdown.widgetbook.dart
          │   └── ...
          ├── buttons/
          │   ├── primary_button.widgetbook.dart
          │   └── ...
          └── display/
              └── ...

Implementation Steps

1. Install Dependencies

   dependencies:
     widgetbook_annotation: ^3.0.0
   
   dev_dependencies:
     widgetbook_generator: ^3.0.0
     build_runner: ^2.4.0

2. Create Widgetbook Main File

   • Setup widgetbook app with light/dark themes
   • Configure localization if needed
   • Add device frame options

3. Create Use Cases for Each Component

   • Default state
   • Loading state
   • Error state
   • Disabled state
   • Various sizes/variants

4. Add Knobs for Interactive Testing

   • Text knobs for content
   • Boolean knobs for states
   • Select knobs for variants
   • Color knobs for theming

5. Generate Widgetbook

   flutter pub run build_runner build

6. Run Widgetbook

   flutter run -t widgetbook/main.dart

Example Use Case

@UseCase(name: 'Default', type: PrimaryButton)
Widget buildPrimaryButtonDefault(BuildContext context) {
  return PrimaryButton(
    text: context.knobs.string(label: 'Text', initialValue: 'Click Me'),
    onPressed: context.knobs.boolean(label: 'Enabled', initialValue: true)
        ? () => print('Pressed')
        : null,
    isLoading: context.knobs.boolean(label: 'Loading', initialValue: false),
  );
}

Benefits

• Easier component development and testing
• Better documentation for developers
• Design consistency verification
• Faster UI debugging
• Component showcase for design reviews

Documentation

• Create README in widgetbook directory
• Document how to add new components
• Add screenshots to main docs
• Create contributing guidelines for widgetbook

Dependencies

• Requires: Create Form Input Components #16, Create Button and Navigation Components #17, Create Display and Layout Components #18 (UI components must be implemented first)

Priority

Low - Nice to have, but not blocking core features

Acceptance Criteria

• Widgetbook runs successfully
• All implemented components are showcased
• Each component has at least 3 use cases
• Knobs work for interactive testing
• Documentation is clear and complete
• Can run independently: flutter run -t widgetbook/main.dart

[github-actions]

👋 Thanks for opening this issue and contributing!

Our reviewers will check it soon 🚀

📘 If you’d like to know more about contributing, please read our CONTRIBUTING.md.