Skip to content

UI Kit migration #533

Description

@AustinChangLinksys

Migration Task: UI Kit Integration & Widget Consolidation

Objective

Fully integrate UI Kit Library into PrivacyGUI and consolidate duplicate Widget implementations across both projects.


Background

Currently, two Widget systems coexist:

  1. UI Kit Library (ui_kit_library) - Standalone package following Atomic Design with themed components
  2. PrivacyGUI Widgets (lib/page/components/) - In-app custom components

Some functionality is duplicated across both, increasing maintenance costs and causing inconsistencies.


Scope

In Scope

  1. Identify Duplicate Components

    • Compare UI Kit molecules/atoms with PrivacyGUI components
    • Tag components for consolidation
  2. Migrate to UI Kit (Generic UI Components)

    • Pure visual components without business logic
    • Reusable layout components
  3. Retain in PrivacyGUI (Business-Specific Components)

    • Components containing JNAP/USP business logic
    • PrivacyGUI-specific page framework components
  4. Update Dependencies & References

    • Replace legacy implementations with UI Kit components
    • Remove duplicate code

Out of Scope

  • New UI Kit feature development
  • New PrivacyGUI page development
  • Test case refactoring

Deliverables

Deliverable Description
Component Mapping List of all duplicate components with disposition (migrate/retain/delete)
UI Kit Update New version with migrated components (includes CHANGELOG)
PrivacyGUI Update Removed duplicate code, updated imports
Test Verification Confirm existing functionality is unaffected

Acceptance Criteria

  • flutter analyze passes with no errors on both projects
  • All existing functionality works correctly
  • No duplicate Widget implementations exist
  • UI Kit version is updated and released

Initial Assessment

Candidate Components for Migration to UI Kit

Source Location Candidate Components Migration Target
components/styled/ Generic styled components molecules/
components/composed/ Composed components molecules/ or organisms/
components/layouts/ Layout utilities layout/

Components to Retain in PrivacyGUI

Component Retention Reason
shared_widgets.dart Contains WiFi signal icons, router images, and business logic
ui_kit_page_view.dart PrivacyGUI-specific page framework
bottom_bar.dart, top_bar.dart Contains navigation logic and app state

Implementation Approach

Phase 1: Analysis

  1. Create complete component inventory
  2. Tag each component with disposition

Phase 2: Migration

  1. Move generic components to UI Kit
  2. Update API design (if needed)
  3. Add test cases

Phase 3: Integration

  1. Update PrivacyGUI dependency version
  2. Replace legacy imports with UI Kit imports
  3. Delete original duplicate code

Phase 4: Verification

  1. Run all tests
  2. Demo App functional verification
  3. Visual inspection

Related Links

#502

Metadata

Metadata

Labels

Type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions