Setup Widgetbook for Patient App Component Library

[xkaper001]

Description

Set up Widgetbook for the Patient 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_patient/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 shared/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)

Navigation

• Bottom Navigation Bar (different selected tabs)
• Top App Bar (with/without back button)
• Status Bar component

Display Components

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

Patient-Specific Components

• Appointment cards
• Health record cards
• Prescription cards
• Any patient-specific UI elements

Directory Structure

docpilot_patient/
  ├── 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 (mobile focus)

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: 'Book Appointment'),
    onPressed: context.knobs.boolean(label: 'Enabled', initialValue: true)
        ? () => print('Pressed')
        : null,
    isLoading: context.knobs.boolean(label: 'Loading', initialValue: false),
  );
}

Code Reuse Strategy

• Since both apps may share many UI components, consider:
  • Creating a shared component package
  • Importing common components from doctor app
  • Documenting which components are shared vs patient-specific

Benefits

• Easier component development and testing
• Better documentation for developers
• Design consistency between patient and doctor apps
• 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
• Document shared components vs patient-specific
• 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)
• Can coordinate with: Add GoRouter to both apps #30 (Doctor app widgetbook for consistency)

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
• Consistent with doctor app widgetbook where components are shared

[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.