TP-38837 | Added support for MVEL in Box,Column , ConstraintLayout , … (#153)

* TP-38837 | Added support for MVEL in Box,Column , ConstraintLayout , Row and SliderV2 renderer
2023-08-28 13:39:41 +05:30
parent 3cd5244daf
commit f92431b2d4
15 changed files with 749 additions and 59 deletions
--- a/navi-uitron/src/main/java/com/navi/uitron/model/data/SliderDataV2.kt
+++ b/navi-uitron/src/main/java/com/navi/uitron/model/data/SliderDataV2.kt
@@ -1,18 +1,34 @@
 package com.navi.uitron.model.data

 import android.os.Parcelable
+import com.google.gson.Gson
+import com.google.gson.reflect.TypeToken
 import kotlinx.parcelize.Parcelize
 import kotlinx.parcelize.RawValue


 data class SliderDataV2(
-    val sliderValue: String? = null,
-    val stepValues: List<StepValue>? = null
+    var sliderValue: String? = null,
+    var stepValues: Any? = null                 // Shadow field
 ) : UiTronData() {
-
    @Parcelize
    data class StepValue(
        val value: String? = null,
        val data: @RawValue Map<String, Any?>? = null
    ) : Parcelable
+
+    private var _stepValue: List<StepValue>? = null
+
+    val stepValue: List<StepValue>?
+        get() {
+            if (_stepValue == null) {
+                _stepValue = getStepValues()
+            }
+            return _stepValue
+        }
+
+    private fun getStepValues(): List<StepValue> {
+        val type = object : TypeToken<List<StepValue>>() {}.type
+        return Gson().fromJson(stepValues.toString(), type)
+    }
 }
--- a/navi-uitron/src/main/java/com/navi/uitron/model/ui/UiTronView.kt
+++ b/navi-uitron/src/main/java/com/navi/uitron/model/ui/UiTronView.kt
@@ -299,8 +299,8 @@ enum class BlurType {

@Parcelize
 data class BorderStrokeData(
-    val width: Int? = null,
-    val color: String? = null,
+    var width: Int? = null,
+    var color: String? = null,
    val brushData: BrushData? = null,
    val shape: UiTronShape? = null
 ) : Parcelable
--- a/navi-uitron/src/main/java/com/navi/uitron/render/AnimationRenderer.kt
+++ b/navi-uitron/src/main/java/com/navi/uitron/render/AnimationRenderer.kt
@@ -19,9 +19,12 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.scale
 import androidx.compose.ui.graphics.graphicsLayer
 import androidx.lifecycle.viewModelScope
+import com.navi.uitron.model.action.MvelAction
 import com.navi.uitron.model.data.UiTronData
 import com.navi.uitron.model.ui.AnimationProperty
 import com.navi.uitron.model.ui.UiTronView
+import com.navi.uitron.utils.KEY_MVEL_ACTION
+import com.navi.uitron.utils.KEY_PROPERTY
 import com.navi.uitron.utils.STOP
 import com.navi.uitron.viewmodel.UiTronViewModel
 import kotlinx.coroutines.delay
@@ -103,6 +106,16 @@ class AnimationRenderer(
            )
        )

+        val extrasState = uiTronViewModel.handle.getStateFlow<Map<String, Any?>?>(
+            property.getExtrasId(),
+            null
+        ).collectAsState()
+
+        handleMvelExtra(property.layoutId, extrasState.value, mapOf(
+            Pair(KEY_PROPERTY, property),
+            Pair(KEY_MVEL_ACTION, extrasState.value?.get(MvelAction.KEY_MVEL) as? MvelAction)
+        ))
+
        Box(modifier = Modifier
            .graphicsLayer {
                translationX = property.translationX?.let {
--- a/navi-uitron/src/main/java/com/navi/uitron/render/BoxRenderer.kt
+++ b/navi-uitron/src/main/java/com/navi/uitron/render/BoxRenderer.kt
@@ -13,10 +13,14 @@ import androidx.compose.runtime.collectAsState
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.alpha
 import androidx.compose.ui.layout.layoutId
+import com.navi.uitron.model.action.MvelAction
 import com.navi.uitron.model.data.EmptyData
 import com.navi.uitron.model.data.UiTronData
 import com.navi.uitron.model.ui.BoxProperty
 import com.navi.uitron.model.ui.UiTronView
+import com.navi.uitron.utils.KEY_MVEL_ACTION
+import com.navi.uitron.utils.KEY_PROPERTY
+import com.navi.uitron.utils.KEY_UI_TRON_DATA
 import com.navi.uitron.viewmodel.UiTronViewModel
 import customClickable
 import getContentAlignment
@@ -58,6 +62,17 @@ class BoxRenderer(
            updatedData = updatedDataState.value ?: updatedData
        }

+        val extrasState = uiTronViewModel.handle.getStateFlow<Map<String, Any?>?>(
+            property.getExtrasId(),
+            null
+        ).collectAsState()
+
+        handleMvelExtra(property.layoutId, extrasState.value, mapOf(
+            Pair(KEY_PROPERTY, property),
+            Pair(KEY_UI_TRON_DATA, uiTronData),
+            Pair(KEY_MVEL_ACTION, extrasState.value?.get(MvelAction.KEY_MVEL) as? MvelAction)
+        ))
+
        if (property.visible.orTrue()) {
            Box(
                contentAlignment = getContentAlignment(contentAlignment = property.contentAlignment),
--- a/navi-uitron/src/main/java/com/navi/uitron/render/ColumnRenderer.kt
+++ b/navi-uitron/src/main/java/com/navi/uitron/render/ColumnRenderer.kt
@@ -16,10 +16,14 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.alpha
 import androidx.compose.ui.layout.layoutId
 import androidx.compose.ui.unit.dp
+import com.navi.uitron.model.action.MvelAction
 import com.navi.uitron.model.data.ColumnData
 import com.navi.uitron.model.data.UiTronData
 import com.navi.uitron.model.ui.ColumnProperty
 import com.navi.uitron.model.ui.UiTronView
+import com.navi.uitron.utils.KEY_MVEL_ACTION
+import com.navi.uitron.utils.KEY_PROPERTY
+import com.navi.uitron.utils.KEY_UI_TRON_DATA
 import com.navi.uitron.viewmodel.UiTronViewModel
 import constraintsToModifier
 import customClickable
@@ -63,6 +67,18 @@ class ColumnRenderer(
            ).collectAsState()
            updatedData = updatedDataState.value ?: updatedData
        }
+
+        val extrasState = uiTronViewModel.handle.getStateFlow<Map<String, Any?>?>(
+            property.getExtrasId(),
+            null
+        ).collectAsState()
+
+        handleMvelExtra(property.layoutId, extrasState.value, mapOf(
+            Pair(KEY_PROPERTY, property),
+            Pair(KEY_UI_TRON_DATA, uiTronData),
+            Pair(KEY_MVEL_ACTION, extrasState.value?.get(MvelAction.KEY_MVEL) as? MvelAction)
+        ))
+
        if (property.visible.orTrue()) {
            Column(
                verticalArrangement = Arrangement.setVerticalArrangement(arrangementData = property.arrangementData),
--- a/navi-uitron/src/main/java/com/navi/uitron/render/ConstraintLayoutRenderer.kt
+++ b/navi-uitron/src/main/java/com/navi/uitron/render/ConstraintLayoutRenderer.kt
@@ -16,10 +16,14 @@ import androidx.compose.ui.draw.alpha
 import androidx.compose.ui.unit.dp
 import androidx.constraintlayout.compose.ConstraintLayout
 import androidx.constraintlayout.compose.layoutId
+import com.navi.uitron.model.action.MvelAction
 import com.navi.uitron.model.data.EmptyData
 import com.navi.uitron.model.data.UiTronData
 import com.navi.uitron.model.ui.ConstraintProperty
 import com.navi.uitron.model.ui.UiTronView
+import com.navi.uitron.utils.KEY_MVEL_ACTION
+import com.navi.uitron.utils.KEY_PROPERTY
+import com.navi.uitron.utils.KEY_UI_TRON_DATA
 import com.navi.uitron.viewmodel.UiTronViewModel
 import customClickable
 import orFalse
@@ -59,6 +63,18 @@ class ConstraintLayoutRenderer(
            ).collectAsState()
            updatedData = updatedDataState.value ?: updatedData
        }
+
+        val extrasState = uiTronViewModel.handle.getStateFlow<Map<String, Any?>?>(
+            property.getExtrasId(),
+            null
+        ).collectAsState()
+
+        handleMvelExtra(property.layoutId, extrasState.value, mapOf(
+            Pair(KEY_PROPERTY, property),
+            Pair(KEY_UI_TRON_DATA, uiTronData),
+            Pair(KEY_MVEL_ACTION, extrasState.value?.get(MvelAction.KEY_MVEL) as? MvelAction)
+        ))
+
        if (property.visible.orTrue()) {
            ConstraintLayout(
                constraintSet = RenderUtility.decoupledConstraints(childrenViews),
--- a/navi-uitron/src/main/java/com/navi/uitron/render/RowRenderer.kt
+++ b/navi-uitron/src/main/java/com/navi/uitron/render/RowRenderer.kt
@@ -16,10 +16,14 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.alpha
 import androidx.compose.ui.layout.layoutId
 import androidx.compose.ui.unit.dp
+import com.navi.uitron.model.action.MvelAction
 import com.navi.uitron.model.data.RowData
 import com.navi.uitron.model.data.UiTronData
 import com.navi.uitron.model.ui.RowProperty
 import com.navi.uitron.model.ui.UiTronView
+import com.navi.uitron.utils.KEY_MVEL_ACTION
+import com.navi.uitron.utils.KEY_PROPERTY
+import com.navi.uitron.utils.KEY_UI_TRON_DATA
 import com.navi.uitron.viewmodel.UiTronViewModel
 import constraintsToModifier
 import customClickable
@@ -59,6 +63,18 @@ class RowRenderer(
            ).collectAsState()
            rowData = updatedDataState.value ?: rowData
        }
+
+        val extrasState = uiTronViewModel.handle.getStateFlow<Map<String, Any?>?>(
+            property.getExtrasId(),
+            null
+        ).collectAsState()
+
+        handleMvelExtra(property.layoutId, extrasState.value, mapOf(
+            Pair(KEY_PROPERTY, property),
+            Pair(KEY_UI_TRON_DATA, rowData),
+            Pair(KEY_MVEL_ACTION, extrasState.value?.get(MvelAction.KEY_MVEL) as? MvelAction)
+        ))
+
        if (property.visible.orTrue()) {
            Row(
                horizontalArrangement = Arrangement.setHorizontalArrangement(arrangementData = property.arrangementData),
--- a/navi-uitron/src/main/java/com/navi/uitron/render/SliderRendererV2.kt
+++ b/navi-uitron/src/main/java/com/navi/uitron/render/SliderRendererV2.kt
@@ -10,6 +10,7 @@ import androidx.compose.material.Slider
 import androidx.compose.material.SliderDefaults
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.collectAsState
 import androidx.compose.runtime.derivedStateOf
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableFloatStateOf
@@ -46,43 +47,45 @@ import pxToDp
 import setHeight
 import setPadding
 import setWidth
+import toNearestInt
 import toPx
-import kotlin.math.roundToInt


 class SliderRendererV2(
-    private val uiTronRenderer: UiTronRenderer
+    private val uiTronRenderer: UiTronRenderer,
 ) : Renderer<SliderProperty> {

    private val LEFT_PADDING = 16.dp
    private val DEFAULT_PADDING = 2.dp
    private val DEFAULT_TOOLTIP_VERTICAL_OFFSET = 6.dp
    private val TOOLTIP_ZINDEX = 1f
-    private val DEFAULT_THUMB_WIDTH = 12f
-    private val stepToValue: MutableMap<Int, String> = mutableMapOf()
+    private val DEFAULT_THUMB_WIDTH = 20.dp
+    private val PREV_VALUE = "prev_value"

    @Composable
    override fun Render(
        property: SliderProperty,
        uiTronData: UiTronData?,
        uiTronViewModel: UiTronViewModel,
-        modifier: Modifier?
+        modifier: Modifier?,
    ) {
+        if (!property.visible.orTrue()) return
        super.Render(property, uiTronData, uiTronViewModel, modifier)
        var sliderUiTronData = uiTronData as? SliderDataV2 ?: return
-        val steps = sliderUiTronData.stepValues?.size.orVal(1) - 1
+        val steps = sliderUiTronData.stepValue?.size.orVal(1) - 1

        var absoluteSliderStartX by remember { mutableFloatStateOf(0f) }
        var absoluteSliderEndX by remember { mutableFloatStateOf(0f) }
+        val stepToValue = remember { mutableStateOf(mapOf<String, String>()) }

        var thumbX by remember { mutableFloatStateOf(0f) }
        var thumbY by remember { mutableFloatStateOf(0f) }

        fun saveSelectionToHandle(position: Int?) {
            if (position == null || position <= 0) return
-
-            uiTronViewModel.handle[property.layoutId.getInputId()] =
-                sliderUiTronData.stepValues?.get(position)
+            uiTronViewModel.handle["${property.layoutId.getInputId()}_${PREV_VALUE}"] =
+                uiTronViewModel.handle.get<String>(property.layoutId.getInputId())
+            uiTronViewModel.handle[property.layoutId.getInputId()] = stepToValue.value[position.toString()]
        }

        LaunchedEffect(property.isStateFul) {
@@ -105,41 +108,37 @@ class SliderRendererV2(
            }
        }

-        LaunchedEffect(property.isDataMutable) {
-            if (!property.isDataMutable.orFalse()) return@LaunchedEffect
-            uiTronViewModel.handle.getStateFlow<Map<String, Any?>?>(
-                property.getExtrasId(),
-                null
-            ).collect {
-                handleMvelExtra(
-                    property.layoutId, it, mapOf(
-                        Pair(KEY_PROPERTY, property),
-                        Pair(KEY_UI_TRON_DATA, sliderUiTronData),
-                        Pair(
-                            KEY_MVEL_ACTION,
-                            it?.get(MvelAction.KEY_MVEL) as? MvelAction
-                        )
-                    )
-                )
-            }
-        }
-
        val sliderPosition = remember { mutableStateOf(0f) }

        LaunchedEffect(Unit) {
-            sliderUiTronData.stepValues?.forEachIndexed { index, stepValue ->
-                stepToValue[index] = stepValue.value.orEmpty()
+            val stepMap = mutableMapOf<String, String>()
+            sliderUiTronData.stepValue?.forEachIndexed { index, stepValue ->
+                stepMap[index.toString()] = stepValue.value.orEmpty()
            }
            val positionIndex = getSliderPositionFromStepValues(
                sliderUiTronData,
                sliderUiTronData.sliderValue.orEmpty()
            )?.toFloat() ?: 0f
-
+            stepToValue.value = stepMap
            sliderPosition.value = positionIndex
-            thumbX = absoluteSliderStartX + (positionIndex / steps) * (absoluteSliderEndX - absoluteSliderStartX)
-            saveSelectionToHandle(positionIndex.roundToInt())
+            thumbX =
+                absoluteSliderStartX + (positionIndex / steps) * (absoluteSliderEndX - absoluteSliderStartX)
+            saveSelectionToHandle(positionIndex.toNearestInt())
        }

+        val extrasState = uiTronViewModel.handle.getStateFlow<Map<String, Any?>?>(
+            property.getExtrasId(),
+            null
+        ).collectAsState()
+
+        handleMvelExtra(
+            property.layoutId, extrasState.value, mapOf(
+                Pair(KEY_PROPERTY, property),
+                Pair(KEY_UI_TRON_DATA, sliderUiTronData),
+                Pair(KEY_MVEL_ACTION, extrasState.value?.get(MvelAction.KEY_MVEL) as? MvelAction)
+            )
+        )
+
        if (property.visible.orTrue()) {
            Column(
                modifier = (modifier ?: Modifier)
@@ -160,19 +159,21 @@ class SliderRendererV2(
                        sliderPosition.value = it
                        thumbX =
                            absoluteSliderStartX + (it / steps) * (absoluteSliderEndX - absoluteSliderStartX)
-                        emitSliderValueChange(
+                        updateValuesInMvelActionOnSliderChange(
                            uiTronViewModel,
                            sliderUiTronData,
-                            sliderPosition.value.roundToInt()
+                            sliderPosition.value.toNearestInt(),
+                            stepToValue.value
                        )
                    },
                    enabled = property.enabled.orTrue(),
                    onValueChangeFinished = {
-                        saveSelectionToHandle(sliderPosition.value.roundToInt())
-                        emitSliderValueChange(
+                        saveSelectionToHandle(sliderPosition.value.toNearestInt())
+                        updateValuesInMvelActionOnSliderFinish(
                            uiTronViewModel,
                            sliderUiTronData,
-                            sliderPosition.value.roundToInt()
+                            sliderPosition.value.toNearestInt(),
+                            stepToValue.value
                        )
                    },
                    valueRange = 0f..(steps.toFloat()),
@@ -229,15 +230,17 @@ class SliderRendererV2(
        tooltipView: UiTronView?
    ) {
        if (tooltipView == null) return
+        val triangleHeight = 6.dp.toPx()
+        val triangleWidth = 8.dp.toPx()

        var toolTipViewHeight by remember { mutableFloatStateOf(0f) }
        var toolTipViewWidth by remember { mutableFloatStateOf(0f) }

-        var containerStartX = thumbX - absoluteSliderStartX - LEFT_PADDING.toPx()
+        var containerStartX = thumbX - LEFT_PADDING.toPx() - absoluteSliderStartX
        val containerEndX = containerStartX + toolTipViewWidth + absoluteSliderStartX

-        containerStartX = if (containerStartX <= -LEFT_PADDING.toPx()) {
-            -LEFT_PADDING.toPx() + DEFAULT_PADDING.toPx()
+        containerStartX = if (containerStartX <= 0) {
+            -LEFT_PADDING.toPx() + 5F
        } else if (containerEndX >= (absoluteSliderEndX + 2 * LEFT_PADDING.toPx())) {
            absoluteSliderEndX - toolTipViewWidth - absoluteSliderStartX + LEFT_PADDING.toPx() - DEFAULT_PADDING.toPx()
        } else {
@@ -255,8 +258,10 @@ class SliderRendererV2(
        ) {
            uiTronRenderer.Render(composeViews = listOf(tooltipView))
            InvertedTriangle(
-                triangleStartX = (toolTipViewWidth - DEFAULT_THUMB_WIDTH.dp.toPx()) / 2,
-                triangleColorCode = tooltipView.property?.backgroundColor.orEmpty()
+                triangleStartX = (toolTipViewWidth - triangleWidth) / 2,
+                triangleColorCode = tooltipView.property?.backgroundColor.orEmpty(),
+                triangleWidth = triangleWidth,
+                triangleHeight = triangleHeight
            )
        }

@@ -265,10 +270,10 @@ class SliderRendererV2(
    @Composable
    private fun InvertedTriangle(
        triangleStartX: Float,
-        triangleColorCode: String
+        triangleColorCode: String,
+        triangleWidth: Float,
+        triangleHeight: Float
    ) {
-        val triangleHeight = 6.dp.toPx()
-        val triangleWidth = 8.dp.toPx()

        val triangleCenterCoordinate = Pair(triangleStartX + triangleWidth / 2, triangleHeight)
        val triangleLeftCoordinate = Pair(triangleCenterCoordinate.first - triangleWidth / 2, 0f)
@@ -292,18 +297,36 @@ class SliderRendererV2(
        }
    }

-    private fun emitSliderValueChange(
+    private fun updateValuesInMvelActionOnSliderChange(
        uiTronViewModel: UiTronViewModel,
        sliderData: SliderDataV2,
-        sliderPosition: Int
+        sliderPosition: Int,
+        stepToValue: Map<String, String>
    ) {
-
-        val sliderValue: String? = stepToValue[sliderPosition]
-
+        val sliderValue: String? = stepToValue[sliderPosition.toString()]
        sliderData.slideData?.onSlide?.let { uiTronClickData ->
-            val dataMap = sliderData.stepValues?.get(sliderPosition)?.data
+            val dataMap = sliderData.stepValue?.get(sliderPosition)?.data
                ?.toMutableMap() ?: mutableMapOf()
+            dataMap[VALUE] = sliderValue
+            dataMap.toMap().let {
+                updateMvelValuesInActions(
+                    uiTronClickData.actions, it
+                )
+                uiTronViewModel.handleActions(uiTronClickData)
+            }
+        }
+    }

+    private fun updateValuesInMvelActionOnSliderFinish(
+        uiTronViewModel: UiTronViewModel,
+        sliderData: SliderDataV2,
+        sliderPosition: Int,
+        stepToValue: Map<String, String>
+    ) {
+        val sliderValue: String? = stepToValue[sliderPosition.toString()]
+        sliderData.slideData?.onSlideFinish?.let { uiTronClickData ->
+            val dataMap = sliderData.stepValue?.get(sliderPosition)?.data
+                ?.toMutableMap() ?: mutableMapOf()
            dataMap[VALUE] = sliderValue
            dataMap.toMap().let {
                updateMvelValuesInActions(
@@ -319,7 +342,7 @@ class SliderRendererV2(
        sliderData: SliderDataV2,
        currentValue: String,
    ): Int? {
-        val index = sliderData.stepValues?.indexOfFirst { it.value == currentValue }
+        val index = sliderData.stepValue?.indexOfFirst { it.value == currentValue }
        return if (index == -1) {
            0
        } else {
--- a/navi-uitron/src/main/java/com/navi/uitron/serializer/BaseUiTronActionSerializer.kt
+++ b/navi-uitron/src/main/java/com/navi/uitron/serializer/BaseUiTronActionSerializer.kt
@@ -0,0 +1,103 @@
+package com.navi.uitron.serializer
+
+import com.google.gson.JsonElement
+import com.google.gson.JsonSerializationContext
+import com.google.gson.JsonSerializer
+import com.navi.uitron.model.action.AnalyticsAction
+import com.navi.uitron.model.action.BottomSheetAction
+import com.navi.uitron.model.action.CopyTextAction
+import com.navi.uitron.model.action.HandleMultiplePermissionsAction
+import com.navi.uitron.model.action.LaunchAppSettingsAction
+import com.navi.uitron.model.action.MvelAction
+import com.navi.uitron.model.action.SchedulerAction
+import com.navi.uitron.model.action.TriggerApiAction
+import com.navi.uitron.model.action.UpdateDataAction
+import com.navi.uitron.model.action.UpdateStateHandleAction
+import com.navi.uitron.model.action.UpdateViewStateAction
+import com.navi.uitron.model.action.ValidateDataAction
+import com.navi.uitron.model.action.ValidateMultipleUiTronComponent
+import com.navi.uitron.model.action.VibrationAction
+import com.navi.uitron.model.data.UiTronAction
+import com.navi.uitron.model.data.UiTronActionType
+import java.lang.reflect.Type
+
+open class BaseUiTronActionSerializer : JsonSerializer<UiTronAction> {
+    override fun serialize(
+        src: UiTronAction?,
+        typeOfSrc: Type?,
+        context: JsonSerializationContext?
+    ): JsonElement? {
+        return when (src?.type) {
+            UiTronActionType.UpdateViewState.name -> {
+                context?.serialize(src as UpdateViewStateAction, UpdateViewStateAction::class.java)
+            }
+
+            UiTronActionType.TriggerApiAction.name -> {
+                context?.serialize(src as TriggerApiAction, TriggerApiAction::class.java)
+            }
+
+            UiTronActionType.BottomSheetAction.name -> {
+                context?.serialize(src as BottomSheetAction, BottomSheetAction::class.java)
+            }
+
+            UiTronActionType.AnalyticsAction.name -> {
+                context?.serialize(src as AnalyticsAction, AnalyticsAction::class.java)
+            }
+
+            UiTronActionType.UpdateStateHandle.name -> {
+                context?.serialize(
+                    src as UpdateStateHandleAction,
+                    UpdateStateHandleAction::class.java
+                )
+            }
+
+            UiTronActionType.SchedulerAction.name -> {
+                context?.serialize(src as SchedulerAction, SchedulerAction::class.java)
+            }
+
+            UiTronActionType.HandleMultiplePermissions.name -> {
+                context?.serialize(
+                    src as HandleMultiplePermissionsAction,
+                    HandleMultiplePermissionsAction::class.java
+                )
+            }
+
+            UiTronActionType.LaunchAppSettings.name -> {
+                context?.serialize(
+                    src as LaunchAppSettingsAction,
+                    LaunchAppSettingsAction::class.java
+                )
+            }
+
+            UiTronActionType.ValidateDataAction.name -> {
+                context?.serialize(src as ValidateDataAction, ValidateDataAction::class.java)
+            }
+
+            UiTronActionType.UpdateDataAction.name -> {
+                context?.serialize(src as UpdateDataAction, UpdateDataAction::class.java)
+            }
+
+            UiTronActionType.VibrationAction.name -> {
+                context?.serialize(src as VibrationAction, VibrationAction::class.java)
+            }
+
+            UiTronActionType.MvelAction.name -> {
+                context?.serialize(src as MvelAction, MvelAction::class.java)
+            }
+
+            UiTronActionType.CopyTextAction.name -> {
+                context?.serialize(src as CopyTextAction, CopyTextAction::class.java)
+            }
+
+            UiTronActionType.ValidateMultipleUiTronComponent.name -> {
+                context?.serialize(
+                    src as ValidateMultipleUiTronComponent,
+                    ValidateMultipleUiTronComponent::class.java
+                )
+            }
+
+            else -> null
+        }
+    }
+
+}
--- a/navi-uitron/src/main/java/com/navi/uitron/serializer/BaseUiTronTriggerApiActionSerializer.kt
+++ b/navi-uitron/src/main/java/com/navi/uitron/serializer/BaseUiTronTriggerApiActionSerializer.kt
@@ -0,0 +1,17 @@
+package com.navi.uitron.serializer
+
+import com.google.gson.JsonElement
+import com.google.gson.JsonSerializationContext
+import com.google.gson.JsonSerializer
+import com.navi.uitron.model.action.TriggerApiAction
+import java.lang.reflect.Type
+
+open class BaseUiTronTriggerApiActionSerializer : JsonSerializer<TriggerApiAction> {
+    override fun serialize(
+        src: TriggerApiAction?,
+        typeOfSrc: Type?,
+        context: JsonSerializationContext?
+    ): JsonElement? {
+        return context?.serialize(src as Any, Any::class.java)
+    }
+}
--- a/navi-uitron/src/main/java/com/navi/uitron/serializer/ComposePropertySerializer.kt
+++ b/navi-uitron/src/main/java/com/navi/uitron/serializer/ComposePropertySerializer.kt
@@ -0,0 +1,216 @@
+package com.navi.uitron.serializer
+
+import com.google.gson.JsonElement
+import com.google.gson.JsonSerializationContext
+import com.google.gson.JsonSerializer
+import com.navi.uitron.model.ui.AnimationProperty
+import com.navi.uitron.model.ui.AutoScrollViewProperty
+import com.navi.uitron.model.ui.BaseProperty
+import com.navi.uitron.model.ui.BoxProperty
+import com.navi.uitron.model.ui.ButtonProperty
+import com.navi.uitron.model.ui.CardProperty
+import com.navi.uitron.model.ui.CheckBoxProperty
+import com.navi.uitron.model.ui.ColumnProperty
+import com.navi.uitron.model.ui.ComposeViewType
+import com.navi.uitron.model.ui.ConstraintProperty
+import com.navi.uitron.model.ui.CountDownTimerProperty
+import com.navi.uitron.model.ui.CustomTextFieldProperty
+import com.navi.uitron.model.ui.DialogProperty
+import com.navi.uitron.model.ui.DividerProperty
+import com.navi.uitron.model.ui.DropdownProperty
+import com.navi.uitron.model.ui.GridProperty
+import com.navi.uitron.model.ui.ImageProperty
+import com.navi.uitron.model.ui.LazyColumnProperty
+import com.navi.uitron.model.ui.LazyGridProperty
+import com.navi.uitron.model.ui.LazyRowProperty
+import com.navi.uitron.model.ui.LinearProgressIndicatorProperty
+import com.navi.uitron.model.ui.LottieProperty
+import com.navi.uitron.model.ui.MultiSectionTextFieldProperty
+import com.navi.uitron.model.ui.OtpBoxProperty
+import com.navi.uitron.model.ui.OutlinedTextFieldProperty
+import com.navi.uitron.model.ui.PagerIndicatorProperty
+import com.navi.uitron.model.ui.PagerProperty
+import com.navi.uitron.model.ui.RadioButtonProperty
+import com.navi.uitron.model.ui.RowProperty
+import com.navi.uitron.model.ui.SliderProperty
+import com.navi.uitron.model.ui.SpacerProperty
+import com.navi.uitron.model.ui.SpannableProperty
+import com.navi.uitron.model.ui.SwitchProperty
+import com.navi.uitron.model.ui.TextProperty
+import com.navi.uitron.model.ui.ToastProperty
+import java.lang.reflect.Type
+
+
+class ComposePropertySerializer : JsonSerializer<BaseProperty> {
+    override fun serialize(
+        src: BaseProperty?,
+        typeOfSrc: Type?,
+        context: JsonSerializationContext?
+    ): JsonElement? {
+        return when (src?.viewType) {
+            ComposeViewType.Image.name -> {
+                context?.serialize(src as ImageProperty, ImageProperty::class.java)
+            }
+
+            ComposeViewType.ConstraintLayout.name -> {
+                context?.serialize(src as ConstraintProperty, ConstraintProperty::class.java)
+            }
+
+            ComposeViewType.Text.name -> {
+                context?.serialize(src as TextProperty, TextProperty::class.java)
+            }
+
+            ComposeViewType.Divider.name -> {
+                context?.serialize(src as DividerProperty, DividerProperty::class.java)
+            }
+
+            ComposeViewType.LinearProgressIndicator.name -> {
+                context?.serialize(
+                    src as LinearProgressIndicatorProperty,
+                    LinearProgressIndicatorProperty::class.java
+                )
+            }
+
+            ComposeViewType.Column.name -> {
+                context?.serialize(src as ColumnProperty, ColumnProperty::class.java)
+            }
+
+            ComposeViewType.OutlinedTextField.name -> {
+                context?.serialize(
+                    src as OutlinedTextFieldProperty,
+                    OutlinedTextFieldProperty::class.java
+                )
+            }
+
+            ComposeViewType.Button.name -> {
+                context?.serialize(src as ButtonProperty, ButtonProperty::class.java)
+            }
+
+            ComposeViewType.Card.name -> {
+                context?.serialize(src as CardProperty, CardProperty::class.java)
+            }
+
+            ComposeViewType.Spacer.name -> {
+                context?.serialize(src as SpacerProperty, SpacerProperty::class.java)
+            }
+
+            ComposeViewType.Row.name -> {
+                context?.serialize(src as RowProperty, RowProperty::class.java)
+            }
+
+            ComposeViewType.Lottie.name -> {
+                context?.serialize(src as LottieProperty, LottieProperty::class.java)
+            }
+
+            ComposeViewType.Slider.name -> {
+                context?.serialize(src as SliderProperty, SliderProperty::class.java)
+            }
+
+            ComposeViewType.SliderV2.name -> {
+                context?.serialize(src as SliderProperty, SliderProperty::class.java)
+            }
+
+            ComposeViewType.Checkbox.name -> {
+                context?.serialize(src as CheckBoxProperty, CheckBoxProperty::class.java)
+            }
+
+            ComposeViewType.RadioButton.name -> {
+                context?.serialize(src as RadioButtonProperty, RadioButtonProperty::class.java)
+            }
+
+            ComposeViewType.Switch.name -> {
+                context?.serialize(src as SwitchProperty, SwitchProperty::class.java)
+            }
+
+            ComposeViewType.Dialog.name -> {
+                context?.serialize(src as DialogProperty, DialogProperty::class.java)
+            }
+
+            ComposeViewType.Dropdown.name -> {
+                context?.serialize(src as DropdownProperty, DropdownProperty::class.java)
+            }
+
+            ComposeViewType.CountDownTimer.name -> {
+                context?.serialize(
+                    src as CountDownTimerProperty,
+                    CountDownTimerProperty::class.java
+                )
+            }
+
+            ComposeViewType.Box.name -> {
+                context?.serialize(src as BoxProperty, BoxProperty::class.java)
+            }
+
+            ComposeViewType.Toast.name -> {
+                context?.serialize(src as ToastProperty, ToastProperty::class.java)
+            }
+
+            ComposeViewType.JackpotText.name -> {
+                context?.serialize(src as TextProperty, TextProperty::class.java)
+            }
+
+            ComposeViewType.Pager.name -> {
+                context?.serialize(src as PagerProperty, PagerProperty::class.java)
+            }
+
+            ComposeViewType.PagerIndicator.name -> {
+                context?.serialize(
+                    src as PagerIndicatorProperty,
+                    PagerIndicatorProperty::class.java
+                )
+            }
+
+            ComposeViewType.LazyColumn.name -> {
+                context?.serialize(src as LazyColumnProperty, LazyColumnProperty::class.java)
+            }
+
+            ComposeViewType.LazyRow.name -> {
+                context?.serialize(src as LazyRowProperty, LazyRowProperty::class.java)
+            }
+
+            ComposeViewType.LazyGrid.name -> {
+                context?.serialize(src as LazyGridProperty, LazyGridProperty::class.java)
+            }
+
+            ComposeViewType.SpannableText.name -> {
+                context?.serialize(src as SpannableProperty, SpannableProperty::class.java)
+            }
+
+            ComposeViewType.Grid.name -> {
+                context?.serialize(src as GridProperty, GridProperty::class.java)
+            }
+
+            ComposeViewType.DateTextField.name, ComposeViewType.MultiSectionTextField.name -> {
+                context?.serialize(
+                    src as MultiSectionTextFieldProperty,
+                    MultiSectionTextFieldProperty::class.java
+                )
+            }
+
+            ComposeViewType.Animation.name -> {
+                context?.serialize(src as AnimationProperty, AnimationProperty::class.java)
+            }
+
+            ComposeViewType.AutoScrollView.name -> {
+                context?.serialize(
+                    src as AutoScrollViewProperty,
+                    AutoScrollViewProperty::class.java
+                )
+            }
+
+            ComposeViewType.CustomTextField.name -> {
+                context?.serialize(
+                    src as CustomTextFieldProperty,
+                    CustomTextFieldProperty::class.java
+                )
+            }
+
+            ComposeViewType.OtpBox.name -> {
+                context?.serialize(src as OtpBoxProperty, OtpBoxProperty::class.java)
+            }
+
+            else -> null
+        }
+    }
+
+}
--- a/navi-uitron/src/main/java/com/navi/uitron/serializer/UiTronDataSerializer.kt
+++ b/navi-uitron/src/main/java/com/navi/uitron/serializer/UiTronDataSerializer.kt
@@ -0,0 +1,118 @@
+package com.navi.uitron.serializer
+
+import com.google.gson.JsonElement
+import com.google.gson.JsonSerializationContext
+import com.google.gson.JsonSerializer
+import com.navi.uitron.model.data.CheckBoxData
+import com.navi.uitron.model.data.ColumnData
+import com.navi.uitron.model.data.CountDownTimerData
+import com.navi.uitron.model.data.CustomTextFieldData
+import com.navi.uitron.model.data.DialogData
+import com.navi.uitron.model.data.EmptyData
+import com.navi.uitron.model.data.ImageData
+import com.navi.uitron.model.data.LazyColumnData
+import com.navi.uitron.model.data.LazyGridData
+import com.navi.uitron.model.data.LazyRowData
+import com.navi.uitron.model.data.LinearProgressIndicatorData
+import com.navi.uitron.model.data.LottieData
+import com.navi.uitron.model.data.MultiSectionTextFieldData
+import com.navi.uitron.model.data.OtpBoxData
+import com.navi.uitron.model.data.OutlinedTextFieldData
+import com.navi.uitron.model.data.PagerData
+import com.navi.uitron.model.data.RowData
+import com.navi.uitron.model.data.SliderDataV2
+import com.navi.uitron.model.data.SpannableTextData
+import com.navi.uitron.model.data.SwitchData
+import com.navi.uitron.model.data.TextData
+import com.navi.uitron.model.data.ToastData
+import com.navi.uitron.model.data.UiTronData
+import com.navi.uitron.model.data.UiTronSliderData
+import com.navi.uitron.model.ui.ComposeViewType
+import java.lang.reflect.Type
+
+
+class UiTronDataSerializer : JsonSerializer<UiTronData> {
+    override fun serialize(
+        src: UiTronData?,
+        typeOfSrc: Type?,
+        context: JsonSerializationContext?
+    ): JsonElement? {
+        return when (src?.viewType) {
+            ComposeViewType.Image.name -> {
+                context?.serialize(src as ImageData, ImageData::class.java)
+            }
+            ComposeViewType.Text.name -> {
+                context?.serialize(src as TextData, TextData::class.java)
+            }
+            ComposeViewType.OutlinedTextField.name -> {
+                context?.serialize(src as OutlinedTextFieldData, OutlinedTextFieldData::class.java)
+            }
+            ComposeViewType.LinearProgressIndicator.name -> {
+                context?.serialize(src as LinearProgressIndicatorData, LinearProgressIndicatorData::class.java)
+            }
+            ComposeViewType.Column.name -> {
+                context?.serialize(src as ColumnData, ColumnData::class.java)
+            }
+            ComposeViewType.Row.name -> {
+                context?.serialize(src as RowData, RowData::class.java)
+            }
+            ComposeViewType.Lottie.name -> {
+                context?.serialize(src as LottieData, LottieData::class.java)
+            }
+            ComposeViewType.Slider.name -> {
+                context?.serialize(src as UiTronSliderData, UiTronSliderData::class.java)
+            }
+            ComposeViewType.SliderV2.name -> {
+                context?.serialize(src as SliderDataV2, SliderDataV2::class.java)
+            }
+            ComposeViewType.Switch.name -> {
+                context?.serialize(src as SwitchData, SwitchData::class.java)
+            }
+            ComposeViewType.Dialog.name -> {
+                context?.serialize(src as DialogData, DialogData::class.java)
+            }
+            ComposeViewType.CountDownTimer.name -> {
+                context?.serialize(src as CountDownTimerData, CountDownTimerData::class.java)
+            }
+            ComposeViewType.Toast.name -> {
+                context?.serialize(src as ToastData, ToastData::class.java)
+            }
+            ComposeViewType.LazyColumn.name -> {
+                context?.serialize(src as LazyColumnData, LazyColumnData::class.java)
+            }
+            ComposeViewType.LazyRow.name -> {
+                context?.serialize(src as LazyRowData, LazyRowData::class.java)
+            }
+            ComposeViewType.Pager.name -> {
+                context?.serialize(src as PagerData, PagerData::class.java)
+            }
+            ComposeViewType.LazyGrid.name -> {
+                context?.serialize(src as LazyGridData, LazyGridData::class.java)
+            }
+            ComposeViewType.SpannableText.name -> {
+                context?.serialize(src as SpannableTextData, SpannableTextData::class.java)
+            }
+            ComposeViewType.Divider.name, ComposeViewType.Spacer.name, ComposeViewType.JackpotText.name,
+            ComposeViewType.PagerIndicator.name, ComposeViewType.Grid.name, ComposeViewType.Animation.name,
+            ComposeViewType.Box.name, ComposeViewType.Button.name, ComposeViewType.Card.name, ComposeViewType.ConstraintLayout.name,
+            ComposeViewType.Dropdown.name, ComposeViewType.RadioButton.name,
+            ComposeViewType.AutoScrollView.name -> {
+                context?.serialize(src as EmptyData, EmptyData::class.java)
+            }
+            ComposeViewType.DateTextField.name, ComposeViewType.MultiSectionTextField.name -> {
+                context?.serialize(src as MultiSectionTextFieldData, MultiSectionTextFieldData::class.java)
+            }
+            ComposeViewType.Checkbox.name -> {
+                context?.serialize(src as CheckBoxData, CheckBoxData::class.java)
+            }
+            ComposeViewType.CustomTextField.name -> {
+                context?.serialize(src as CustomTextFieldData, CustomTextFieldData::class.java)
+            }
+            ComposeViewType.OtpBox.name -> {
+                context?.serialize(src as OtpBoxData, OtpBoxData::class.java)
+            }
+            else -> null
+        }
+    }
+
+}
--- a/navi-uitron/src/main/java/com/navi/uitron/serializer/UiTronValidationSerializer.kt
+++ b/navi-uitron/src/main/java/com/navi/uitron/serializer/UiTronValidationSerializer.kt
@@ -0,0 +1,50 @@
+package com.navi.uitron.serializer
+
+import com.google.gson.JsonElement
+import com.google.gson.JsonSerializationContext
+import com.google.gson.JsonSerializer
+import com.navi.uitron.validation.DateFormatValidation
+import com.navi.uitron.validation.DateRangeValidation
+import com.navi.uitron.validation.LengthRangeValidation
+import com.navi.uitron.validation.NotBlankValidation
+import com.navi.uitron.validation.RegexValidation
+import com.navi.uitron.validation.UiTronBaseValidation
+import com.navi.uitron.validation.ValueRangeValidation
+import java.lang.reflect.Type
+
+class UiTronValidationSerializer : JsonSerializer<UiTronBaseValidation> {
+
+    override fun serialize(
+        src: UiTronBaseValidation?,
+        typeOfSrc: Type?,
+        context: JsonSerializationContext?
+    ): JsonElement? {
+        return when (src?.validationType) {
+            NotBlankValidation.VALIDATION_NAME -> {
+                context?.serialize(src as NotBlankValidation, NotBlankValidation::class.java)
+            }
+
+            RegexValidation.VALIDATION_NAME -> {
+                context?.serialize(src as RegexValidation, RegexValidation::class.java)
+            }
+
+            ValueRangeValidation.VALIDATION_NAME -> {
+                context?.serialize(src as ValueRangeValidation, ValueRangeValidation::class.java)
+            }
+
+            LengthRangeValidation.VALIDATION_NAME -> {
+                context?.serialize(src as LengthRangeValidation, LengthRangeValidation::class.java)
+            }
+
+            DateFormatValidation.VALIDATION_NAME -> {
+                context?.serialize(src as DateFormatValidation, DateFormatValidation::class.java)
+            }
+
+            DateRangeValidation.VALIDATION_NAME -> {
+                context?.serialize(src as DateRangeValidation, DateRangeValidation::class.java)
+            }
+
+            else -> null
+        }
+    }
+}
--- a/navi-uitron/src/main/java/com/navi/uitron/serializer/VisualTransformationDataSerializer.kt
+++ b/navi-uitron/src/main/java/com/navi/uitron/serializer/VisualTransformationDataSerializer.kt
@@ -0,0 +1,62 @@
+package com.navi.uitron.serializer
+
+import com.google.gson.JsonElement
+import com.google.gson.JsonSerializationContext
+import com.google.gson.JsonSerializer
+import com.navi.uitron.model.ui.VisualTransformationType
+import com.navi.uitron.model.visualtransformation.AllCapsTransformationData
+import com.navi.uitron.model.visualtransformation.CardNumberTransformationData
+import com.navi.uitron.model.visualtransformation.DateTransformationData
+import com.navi.uitron.model.visualtransformation.NumberCommaTransformationData
+import com.navi.uitron.model.visualtransformation.PasswordTransformationData
+import com.navi.uitron.model.visualtransformation.VisualTransformationData
+import java.lang.reflect.Type
+
+class VisualTransformationDataSerializer : JsonSerializer<VisualTransformationData> {
+
+    override fun serialize(
+        src: VisualTransformationData?,
+        typeOfSrc: Type?,
+        context: JsonSerializationContext?
+    ): JsonElement? {
+        return when (src?.type) {
+            VisualTransformationType.ALL_CAPS.name -> {
+                context?.serialize(
+                    src as AllCapsTransformationData,
+                    AllCapsTransformationData::class.java
+                )
+            }
+
+            VisualTransformationType.DOB.name -> {
+                context?.serialize(
+                    src as DateTransformationData,
+                    DateTransformationData::class.java
+                )
+            }
+
+            VisualTransformationType.MONEY.name -> {
+                context?.serialize(
+                    src as NumberCommaTransformationData,
+                    NumberCommaTransformationData::class.java
+                )
+            }
+
+            VisualTransformationType.PASSWORD.name -> {
+                context?.serialize(
+                    src as PasswordTransformationData,
+                    PasswordTransformationData::class.java
+                )
+            }
+
+            VisualTransformationType.CARD_NUMBER.name -> {
+                context?.serialize(
+                    src as CardNumberTransformationData,
+                    CardNumberTransformationData::class.java
+                )
+            }
+
+            else -> null
+        }
+    }
+
+}
--- a/navi-uitron/src/main/java/com/navi/uitron/utils/Ext.kt
+++ b/navi-uitron/src/main/java/com/navi/uitron/utils/Ext.kt
@@ -57,6 +57,7 @@ import java.text.SimpleDateFormat
 import java.util.*
 import java.util.concurrent.TimeUnit
 import java.util.regex.Pattern
+import kotlin.math.roundToInt

 fun Modifier.setHeight(height: String?): Modifier = this.then(
    when (height) {
@@ -643,7 +644,7 @@ fun ColumnScope.constraintsToModifier(columnConstraints: ColumnConstraints?): Mo

 fun getBorderStrokeBrushData(borderStrokeData: BorderStrokeData?): Brush {
    return when {
-        borderStrokeData?.color != null -> SolidColor(borderStrokeData.color.hexToComposeColor)
+        borderStrokeData?.color?.hexToComposeColor != null -> SolidColor(borderStrokeData.color?.hexToComposeColor ?: Color.White)
        borderStrokeData?.brushData != null -> getBrush(borderStrokeData.brushData)
        else -> SolidColor(Color.Transparent)
    }
@@ -693,4 +694,12 @@ fun String.isInvalidInput(invalidCharRegex: String?): Boolean {
    val regex = Pattern.compile(invalidCharRegex ?: defaultRegex)
    val matcher = regex.matcher(this)
    return matcher.find()
+}
+
+fun Float.toNearestInt(): Int {
+    return try {
+        roundToInt()
+    } catch (e: Exception) {
+        0
+    }
 }