prime-holding / widget_toolkit Goto Github PK

In widget_toolkit_biometrics:

• Make BiometricsAuthDataSource an abstract class. Change its properties to getters. Remove the constructor.
• Create BiometricsAuthDataSourceImpl class which extends BiometricsAuthDataSource and define the getter as a public final property.
• In biometrics_switch.dart replace instantiation of BiometricsAuthDataSource with BiometricsAuthDataSourceImpl.
• Make BiometricsRepository an abstract class. Change its private properties to public getters. Remove the constructor.
• Create BiometricsRepositoryImpl class which extends BiometricsRepository and define 2 getters as a public final properties.
• In biometrics_switch.dart replace instantiation of BiometricsRepository with BiometricsRepositoryImpl.

In widget_toolkit_pin:

• Fix PinBiometricsAuthDataSource to implement properly the abstract class BiometricsAuthDataSource.
• Fix PinBiometricsRepository to implement properly the abstract class BiometricsRepository.
• Implement an internal implementation of BiometricsLocalDataSource which will return always false for areBiometricsEnabled
• Make biometricsLocalDataSource parameter of PinCodeKeyboard optional and inside DI if we are passing null for this parameter to make instance of the internal BiometricsLocalDataSource. In this way consumers of the package will be able to instantiate a PinCodeKeyboard without biometrics.

As a developer I want to open source the widget_toolkit_qr package as part of this mono-repo a.k.a packages/widget_toolkit_qr so that I can publish it in pub.dev

ACs

• The packages should be renamed from prime_qr_scanner to widget_tookit_qr
• The source code should be deleted from gitlab once is migrated to github
• An example project should be build to demonstrate the capabilities of this package
• The API of the package needs to be refined if needed
• The score should be 140/140. Note: the pana can be used locally to see the actual score
• The main read me file needs to be updated
• The package read me file needs to be updated
• Add CI/CD support
• Add gif images, similar to widget_toolkit

Merging the example project will decrease the code coverage with 0.1%.
Implement tests for the example.

Now the business logic of this widget is in two places: BLoC and widget's state. After the refactoring all business logic will be inside the BLoC.

Refactoring steps:

• BLoC refactoring:
  • Events:
  • addDigit(String digit) - triggered when the user tap on a digit
  • deleteDigit() - triggered when user delete a digit
  • biometricsButtonPressed() - triggered when user tap on biometrics button
  • States:
  • digitsCount - int state indicating how much dots to present
  • showBiometricsButton - boolean state indicating the biometrics button must be presented
  • requestBiometricsAuthentication - void state which emits when biometrics must be presented to the user
  • authenticated - void state which emits when user successfully authenticate (pin/biometrics)
  • isLoading and errors stays as they are at the moment
• Widgets refactoring:
  • Delete the AutoSubmitWidget
  • PinCodeKeyboard must have only one VoidCallback which will be called when user is authenticated - onAuthenticated. Remove isAuthenticatedWithBiometrics and isPinCodeVerified
  • PinCodeComponent:
    • link new bloc events to buttons
    • link bloc states requestBiometricsAuthentication to start biometrics authentication process
    • remove pin instance variable from its state. Currently entered digits from user must be stored inside the bloc.

One of the dependencies, of this package, pinout, had a major update going from version 2.3.0 to 3.0.1 with some breaking changes. This update lowered the score of widget_toolkit_otp to 130

• Update the dependencies of all widget_toolkit packages
• Migrate everywhere the deprecated AppSettings API for opening a specific app settings is used to the new one
• Use app_settings package for opening app's settings in widget_toolkit_qr_code package, just to use a consistent manner in all widget_toolkit packages

As a developer I want to have an ease to use API of the EditAddressWidget so that I can integrate that component with a minimal effort.

ACs

• All icons to be moved from the widget constructor to the theme extension
• Error mappers to be grouped in one abstract class
• All business logic to be consolidated in one service
• Update the documentation
  • Add an example with the minimal configuration
  • Add an example with the full configuration
• Update the package version as well as the CHANGELOG
• Add golden tests for the not-empty cases
• Add Edit address in the example project
• Add onChanged function receiving the changed address

Current API

EditAddressWidget({
    required this.cityErrorMapper,
    required this.addressErrorMapper,
    required this.validator,
    required this.searchCountryService,
    this.editAddressService = const _DefaultEditAddressService(),
    this.addressModel = _defaultAddressModel,
    this.editAddressLocalizedStrings,
    this.type = UserProfileCardTypes.mailingAddress,
    this.configuration = const EditAddressConfiguration(),
    this.countryCustomIcon,
    this.editCountryFieldType = EditFieldType.dropdown,
    this.cityCustomIcon,
    this.editCityFieldType = EditFieldType.editfield,
    this.addressCustomIcon,
    this.editAddressFieldType = EditFieldType.editfield,
    this.editContactAddressErrorBuilder,
    this.searchCountryCustomBuilders,
    Key? key,
  })

Improved API
edit_address_widget.dart

EditAddressWidget({
    required this.translateError,
    required this.service,
    this.onChanged, // Function (AddressModel?)
    this.initialAddress
    this.searchCountryBuilders,
    this.editContactAddressErrorBuilder,
    this.localizedStrings,
    this.configuration = const EditAddressConfiguration(),
    Key? key,
  })

edit_address_service.dart

abstract class EditAddressService<T> implements SearchPickerService<T>, TextFieldValidator<String> {
    Future<AddressModel> saveAddress(AddressModel addressModel);

    Future<List<T>> getCountries();

    List<T> getCountryPlaceholderList();

    // Default implementation
    Future<List<T>> filteredCountriesByName(List<T> list, String? searchParam);

    // Default implementation lengthIsNotEmpty
    Future<T> validateCityOnSubmit(String text);

    // Default implementation lengthIsNotEmpty
    Future<T> validateStreetOnSubmit(String text);
    
    // Default implementation lengthIsNotEmpty
    void validateCityOnType(String text);

    // Default implementation lengthIsNotEmpty
    void validateStreetOnType(String text);
}

edit_address_theme.dart

EditAddressTheme(
    this.countryIcon,
...
)
TextFieldDialogTheme(
    this.cityIcon,
    this.addressIcon,
)

Our package ecosystem widget_toolkit is using Theme Tailor under the hood. When the packages were implemented, they were using an earlier version of the theme_tailor. Ever since theme_tailor version 3.0.0 was published, the previous implementation started receiving analysis warnings/errors due to some deprecated annotations used by Theme Tailor.

The goal is to upgrade the widget_toolkit packages to support latest dependencies (including latest version of theme_tailor).

AC:

• Upgrade widget_toolkit themes and dependencies
  • Upgrade widget_toolkit package theme
  • Upgrade widget_toolkit_biometrics package theme
  • Upgrade widget_toolkit_otp package theme
  • Upgrade widget_toolkit_pin package theme
  • Upgrade widget_toolkit_qr package theme
  • Upgrade package dependencies (where applicable)
• Update documentation
  • Readme
  • Update golden tests
  • Change log

As a developer I want to open source the widget_toolkit_pin package as part of this mono-repo a.k.a packages/widget_toolkit_pin so that I can publish it in pub.dev

Blocking ticket

ACs

• The packages should be renamed from prime_pin_code to widget_tookit_pin
• The source code should be deleted from gitlab once is migrated to github
• An example project should be build to demonstrate the capabilities of this package
• The score should be 140/140. Note: the pana can be used locally to see the actual score
• The main read me file needs to be updated
• The package read me file needs to be updated
• Add gif images, similar to widget_toolkit
• Code coverage at least 80%

Functionalities:

branch feature/functionalities_for_initial_usage_of_pin_page:

• Add auto submit. When the pin code is inserted send it to the bloc and call PinCodeService verifyPinCode method.
• When I open the app for the first time and there is no pin code stored in local secure storage, there should not be an automatic prompt for enabling of permissions. This should happen when the user clicks on the biometrics button, which should not be visible on the page at that moment.
• The biometrics should not work and the biometrics button should not be visible if at least one pin is stored.
• The first time when the user opens the page there is no biometrics button. After he enters a pin code, then the biometrics button should show up. When it is pressed it asks for enabling of the biometrics for the app.
• The next time when open the app and I have already given permissions, it should automatically prompt for biometric authentication.
• When the user enters a pin, it is stored in the the device internal storage. Before saving the value locally there is encryption. For the next time when the biometrics is successful the pin is taken from the device internal storage.
• When the finger and iris of the eye are not recognised there should be an option to cancel the biometric authentication.
• Delete the PinCodeKeyboard.generic() and PinCodeKeyboard.withBiometrics() constructors.
• Delete the isConfirmPage parameter and related to it widgets - it will be in the brick
• Call PinCodeService verifyPin() method from the PinCodeBloc. Use it automatically instead of asking the user to use onAutoSubmit parameter. There is encryption of the pin, before it is sent to the backend API.
• Remove the submit button from the bottom right.
• Move the delete button from left to right corner

branch/pin_code_error_handling:

• Add a parameter _addDependencies like in this file : https://github.com/Prime-Holding/widget_toolkit/blob/develop/packages/widget_toolkit_biometrics/lib/src/views/biometrics_switch.dart
  by default it should be set to true and if someone wants not to have dependencies, he can set it to false
• Add onError function parameter as in here: https://github.com/Prime-Holding/widget_toolkit/blob/develop/packages/widget_toolkit_biometrics/lib/src/views/biometrics_switch.dart
• Remove the bottom sheet usage for the error, instead ask the user to provide onError callback.
• Add in the readme file of the package a new section called: Functional specification with notes for how the package works.
• Add blue background colour by default, which should be able to be overriden.
• replace keyLength parameter with getPinLength() service method.
• Add a diagram for encryption in the README file
• Add encryption of the pin code in the encryptPinCode() PinCodeService method in the README file example

PinCodeKeyboard({
    required PinCodeService pinCodeService,
    required BiometricsLocalDataSource biometricsLocalDataSource,
    required String Function(Object error) translateError, 
    PinLocalizedStrings? translatableStrings,
    Function(Object error)? onError,
    Key? key,
});

extension PinCodeThemeContextExtension on BuildContext {
  /// Returns a reference to the [PinCodeTheme] theme extension of the current [Theme]
  PinCodeTheme get pinCodeTheme {
    final theme = Theme.of(this).extension<PinCodeTheme>();
    if (theme == null) {
      throw UnimplementedError(
        'Not Implemented PinCodeTheme. '
        'Please add it as extension to the MaterialApp -> ThemeData',
      );
    }

    return theme;
  }
}
themeExtension
   PinCodeCustomKey? bottomLeftKeyboardButton,
   PinCodeCustomKey? bottomRightKeyboardButton,

abstract class PinCodeService{
   // reads from device internal storage and returns the stored pin code to the bloc
   Future<String?> getPinCode();
  
   //pinCode from user input, whether it was verified by the server 
   Future<bool> verifyPinCode(String pinCode);

   // the servers returns the correct length
   Future<int> getPinLength(); 
  
   // encrypt the string and store it in the device secure storage, add a default implementation to 
   store what is the input
   // returns the encrypted pinCode 
   String encyptPinCode(String pinCode) => pinCode;
}

As a developer I want to open source the widget_toolkit_biometrics package as part of this mono-repo a.k.a packages/widget_toolkit_biometrics so that I can publish it in pub.dev

ACs

• The packages should be renamed from prime_biometrics to widget_tookit_biometrics
• The source code should be deleted from gitlab once is migrated to github
• An example project should be build to demonstrate the capabilities of this package
  • It should include the biometrics switch widget that demonstrates all capabilities such as a permission prompt, permission denial including a button that leads the user to the proper place in the OS for enabling the biometrics
• The score should be 140/140. Note: the pana can be used locally to see the actual score
• The main read me file needs to be updated
• The package read me file needs to be updated
• Add CI/CD support
• Add gif images, similar to widget_toolkit

As a developer, I would like to be able to update golden master images inside the correct directory.

Currently, golden tests are generated in a nested directory:

// Current
goldens/light_theme/goldens/light_theme/{image_name}.png

// Correct
goldens/light_theme/{image_name}.png

This appears to be caused by the WidgetToolkitFileComparator.

• Override the update method of the WidgetToolkitFileComparator to ensure golden master images are generated in the correct directory.

• Rename class to UnknownErrorModel to be consistent with other ErrorModel classes and to follow the Dart's convention
• Rename its dart file name to unknown_error_model.dart
• Fix imports which are referencing this file in all packages
• Copy the implementation of ErrorModel and GenericErrorModel from rx_bloc_cli

As a developer I want each individual README file located in the doc folder to be represented as TOPIC as part of the documentation section.

Example: https://pub.dev/documentation/go_router/latest/

As a developer I want to open source the widget_toolkit_otp package as part of this mono-repo a.k.a packages/widget_toolkit_otp so that I can publish it in pub.dev

ACs

• The packages should be renamed from prime_sms_code to widget_tookit_otp
• The source code should be deleted from gitlab once is migrated to github
• An example project should be build to demonstrate the capabilities of this package
• The score should be 140/140. Note: the pana can be used locally to see the actual score
• The main read me file needs to be updated
• The package read me file needs to be updated
• Add CI/CD support
• Add gif images, similar to widget_toolkit

As a developer I want all project specific names to be removed from the source code of the widget_toolkit

• Rename the project specific names from the design system
• Change to color to use the blue accent
• Change the gif file to reflect the change

In the diagram section of the package the image is not loading:
https://pub.dev/packages/widget_toolkit_pin
The file is not loading in pub.dev from this path:
(doc/assets/pin_biometrics_diagram.png)
even though it is loading on github : https://github.com/Prime-Holding/widget_toolkit/tree/master/packages/widget_toolkit_pin,
Probably this url should be used:
https://raw.githubusercontent.com/Prime-Holding/widget_toolkit/master/packages/widget_toolkit_pin/doc/assets/pin_biometrics_diagram.png

As a developer I want to use the github repo as mono-repo so that I can add more packages such as widget_toolkit_pin, widget_toolkit_qr etc

ACs

• Move the widget_toolkit to packages/widget_tookit and fix all broken links
• Update the repo read me file
• Update the package read me file
• Integrate pubspec_overrides.xml so that all packages can be connected via relative paths during the product development, but they should be connected only through the official repo (pub.dev) when they are published
• Implement auto-publishing to pub.dev when a tag is created on the master branch using the official automated publishing GitHub Action

It's a requirement each published package to provide an example project, which demonstrate the capabilities of the package itself.

ACs

• Each widget should be added to a Page of a PageView
  • Item picker (single and multi select)
  • Search picker
  • Text field dialog
  • Common components
    • URL Launcher
    • Shimmer
    • Error bottom sheet
    • Buttons
  • UX Improvements
• The example should be built in a way that later could be turned to a brick of the rx_bloc_cli

References:

• https://dart.dev/tools/pub/package-layout#examples
• https://github.com/felangel/bloc/blob/master/packages/flutter_bloc/example/lib/main.dart

As a developer I want to open source the widget_toolkit_debug package as part of this mono-repo a.k.a packages/widget_toolkit_debug so that I can publish it in pub.dev

ACs

• The packages should be renamed from prime_dev_menu to widget_tookit_debug
• The source code should be deleted from gitlab once is migrated to github
• An example project should be build to demonstrate the capabilities of this package
• The score should be 140/140. Note: the pana can be used locally to see the actual score
• The main read me file needs to be updated
• The package read me file needs to be updated
• Add gif images, similar to widget_toolkit

As a developer I want to have an ease to use API of the чshowChangeLanguageBottomSheetч so that I can integrate that component with a minimal effort.

ACs

• All icons to be moved from the widget constructor to the theme extension
• Add an item builder closure
• Update the documentation
  • Add an example with the minimal configuration
  • Add an example with the full configuration
  • Add example of the LanguageService implementation (similar to this doc)
• Update the package version as well as the CHANGELOG

Current API

void showChangeLanguageBottomSheet({
  required BuildContext context,
  Widget Function(ErrorModel?)? errorBuilder,
  required Widget Function(BuildContext)? headerBuilder,
  dynamic iconRight,
  LanguagePickerConfiguration configuration = const LanguagePickerConfiguration(),
  final MessagePanelState messageState = MessagePanelState.important,
  dynamic errorPanelIcon,
})

Improved API

void showChangeLanguageBottomSheet({
  required BuildContext context,
  required Function(LanguageModel language) onChanged,
  required Function(LanguageModel language) translate,
  required LanguageService service,
  Widget Function(BuildContext)? headerBuilder,
  Widget Function(ErrorModel?)? errorBuilder,
  Widget Function(SelectedLanguageModel model, bool loading)? itemBuilder,
  LanguagePickerConfiguration configuration = const LanguagePickerConfiguration(),
  MessagePanelState messageState = MessagePanelState.important,
})

Theme extension

 ...
  dynamic iconRight,
  dynamic errorPanelIcon,