Compose

1. Create your ComponentPropertyClass with properties that you need

• In this example i used checkbox component

⚠️ Warning: Here we have some points to consider To avoid unnecessary recompositions at your component. We recommend use the @Immutable and @Stable annotations in your properties. More about it below

• @immutable: This guarantee the composition optimization based on the assumption that values read from the type will not change.

• @stable: this is used to communicate some guarantees to the compose compiler about how a certain type or function will behave and keep the compose compiler notified about changes

@JsonIgnoreProperties(ignoreUnknown = true)
@Immutable
@Stable
data class CheckBoxProperties(
    @JsonProperty("text") val text: String? = null,
    ... define your properties here
)

2. Add your Component json object in Dymanic.json

{
    "key": "CraftDCheckBox",
    "value": {
     ... define your properties here
     }
 }
  

3. Create your Component

:memo: Note: Your composable component must have three properties.

• componentProperties: The mapped properties from json

• modifier: Default for composable componets

• behaviour: This make reference to the component's behaviour, for example: onclick -> for buttons, onchange -> for checkbox etc...

@Composable
fun CraftDCheckBox(
    checkboxProperties: CheckBoxProperties,
    modifier: Modifier = Modifier,
    onChecked: (Boolean) -> Unit 
) {
   ... place your code
}

4. Create your Component Builder

:memo: Note: This Builder must extend CraftBuilder Class and override craft method.

class CraftDCheckBoxBuilder(
    override val key: String = CraftDComponentKey.CHECK_BOX_COMPONENT.key
) :
    CraftDBuilder {
    @Composable
    override fun craft(model: SimpleProperties, listener: CraftDViewListener) {
        val checkBoxProperties = model.value.convertToVO<CheckBoxProperties>()
        CraftDCheckBox(checkBoxProperties) {
            checkBoxProperties.actionProperties?.let { listener.invoke(it) }
        }
    }
}

5. In your screen you can add the builder inside of CraftBuilderManager

@Composable
fun InitialScreen(
    vm: SampleCraftDComposeViewModel
) {
    val properties by vm.properties.collectAsStateWithLifecycle()
    val dynamicBuilder = remember {
        CraftDBuilderManager().add(
           CraftDCheckBoxBuilder()
        )
    }
    LaunchedEffect(Unit) {
        vm.loadProperties()
    }

    CraftDynamic(
        properties = properties,
        dynamicBuilder = dynamicBuilder
    ) {
        //Component click return to do something
    }
}

So now enjoy your component!!!