ZupIT/beagle

[Epic] Modify the ScreenComponent contract

Closed this issue · 0 comments

The problem

Today, the ScreenComponent JSON doesn't make much sense. See the example below:

{
  "_beagleComponent_": "beagle:screenComponent",
  "navigationBar": {
    "title": "Beagle NavigationBar",
    "showBackButton": true,
    "styleId": "DesignSystem.Navigationbar.Style.Default",
    "navigationBarItems": [
      {
        "_beagleComponent_": "beagle:navigationBarItem",
        "image": {
          "_beagleImagePath_": "local",
          "mobileId": "informationImage"
        },
        "action": {
          "_beagleAction_": "beagle:alert",
          "title": "NavigationBar",
          "message": "This component that allows to place titles and button action.",
          "labelOk": "OK"
        },
        "accessibility": {
          "accessible": true,
          "accessibilityLabel": "Content Description",
          "isHeader": false
        },
        "id": "nbiInformation"
      }
    ],
    "backButtonAccessibility": {
      "accessible": true,
      "accessibilityLabel": "Voltar",
      "isHeader": false
    }
  },
  "child": {
    "_beagleComponent_": "beagle:container"
  }
}
  1. The component doesn't really represent a tree, since there are two children array for this component: child and navigationBarItems.
  2. The navigationBarItems despite its resemblance with a component tree, is not really a component tree, the user can't include a "beagle:text", for instance. There must be only components of the type NavigationBarItem in this array. Because of this, it makes much more sense to receive a List of NavigationBarItem than a component tree.
  3. The image inside a NavigationBarItem can only be a Local Image. For some reason, the current contract lets it be any type of Image, giving the impression Remote Images can also be used. To clear this confusion, it's better to accept only the mobile Id and never the _beagleImagePath_.

Solution

  1. Remove the component "beagle:navigationBarItem" from Beagle.
  2. Create the class NavigationBarItem without the fields _beagleComponent_ and id (not a component, just a class).
  3. When creating the NavigationBarItem make sure it now accepts a String as the type of the parameter image and not an ImagePath. This string is equivalent to the mobileId of a local image. Attention: image must accept expressions, i.e. it must be bindable.
  4. Make NavigationBar.navigationItems a list of NavigationBarItem
  5. Render the components for the navigationItems inside the ScreenComponent.

Tasks

  • Implement in Android
  • Implement in iOS
  • Implement in the backend
  • Edit the documentation