[issue-59] - update doc kmp

Author: rviannaoliveira

docs/how-to-use/compose.md

@@ -1,29 +1,50 @@
-# Jetpack Compose
+# Jetpack Compose / CMP
 
-- Create your ComponentPropertyClass with properties that you need. In this example, I used checkbox component:
+- Create your `ComponentPropertyClass` with all the properties your component needs.  
+  In this example, we’re using a **checkbox component**.
 
 !!! warning "Immutable and Stable annotations"
-    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.
+To avoid unnecessary recompositions in your component,  
+we recommend using the `@Immutable` and `@Stable` annotations in your properties.
+
+---
+
+### 1. Enable Kotlin Serialization
+In your **root build.gradle.kts**, add the Kotlin serialization plugin (version **2.2.21** or higher):
+
+```gradle
+id("org.jetbrains.kotlin.plugin.serialization") version "2.2.21"
+```
+
+In your **module  build.gradle.kts** add
+
+```gradle
+   implementation(libs.kotlinx.serialization.json)
+```
+
+2. Create your owner object that has the same field in your json like: (This class must match the structure of the JSON that will be parsed:)
 
 ```kotlin
-@JsonIgnoreProperties(ignoreUnknown = true)
-@Immutable
 @Stable
+@Immutable
+@Serializable
 data class CheckBoxProperties(
-    @JsonProperty("text") val text: String? = null,
+    @SerialName("text") val text: String? = null,
     ... define your properties here
 )
 ```
 
-- Add your Component json object in `Dymanic.json`:
+!!! tip "Note"
+
+    You can use your component object in dynamic.json inside the sample project [app-sample-android](https://github.com/CodandoTV/CraftD/tree/issue-59/convert-to-kmp/android_kmp/app-sample-android) or [KMP-sample](https://github.com/CodandoTV/CraftD/tree/issue-59/convert-to-kmp/android_kmp/KMP-Sample):
 
 ```json
 {
-    "key": "CraftDCheckBox",
-    "value": {
-     ... define your properties here
-     }
- }
+  "key": "CraftDCheckBox",
+  "value": {
+    ... define your properties here
+  }
+}
 ```
 
 - Create your Component
@@ -53,7 +74,7 @@ class CraftDCheckBoxBuilder(
 
 !!! tip "Note"
 
-   This Builder must extend CraftBuilder Class and override craft method.
+This Builder must extend CraftBuilder Class and override craft method.
 
 ```kotlin
 class CraftDCheckBoxBuilder(
@@ -80,7 +101,7 @@ fun InitialScreen(
     val properties by vm.properties.collectAsStateWithLifecycle()
     val dynamicBuilder = remember {
         CraftDBuilderManager().add(
-           CraftDCheckBoxBuilder()
+            CraftDCheckBoxBuilder()
         )
     }
     LaunchedEffect(Unit) {

docs/index.md

@@ -4,66 +4,28 @@
 
 ### 🔗 Compatibility
 
-| Tech                       | Support          |
-|----------------------------|------------------|
-| View System - Android      | ✅ Supported     |
-| Jetpack Compose - Android  | ✅ Supported     |
-| Widgets Flutter            | ✅ Supported     |
-| SwiftUI - iOS              | ✅ Supported     |
-| Compose Multiplatform      | ⚒️ In Progress   |
+| Tech                       | Support         |
+|----------------------------|-----------------|
+| View System - Android      | ✅ Supported    |
+| Jetpack Compose - Android  | ✅ Supported    |
+| Widgets Flutter            | ✅ Supported    |
+| SwiftUI - iOS              | ✅ Supported    |
+| Compose Multiplatform      | ✅ Supported    |
 
 ### Components that already exist in the library
 
-| Component         | Android Compose | Android View | Flutter | SwiftUI |
-|-------------------|-----------------|--------------|---------|---------|
-| Button            |        X        |       X      |    X    |   -     |
-| Text              |        X        |       X      |    X    |   X     |
-| Checkbox          |        X        |       -      |    -    |   -     |
-
-### How to create a custom component?
-
-- Create a data structure to represent your component:
-
-```kotlin
-@JsonIgnoreProperties(ignoreUnknown = true)
-@Immutable
-@Stable
-data class CheckBoxProperties(
-    @JsonProperty("text") val text: String? = null,
-    ... rest of your properties
-)
-```
-
-- Add your Component json object in _Dymanic.json_
-
-```json
-{
-  "key": "CraftDCheckBox",
-  "value": {
-    ... rest of your properties
-  }
-}
-```
-
-- Create your component:
-
-```kotlin
-@Composable
-fun CraftDCheckBox(
-    checkboxProperties: CheckBoxProperties,
-    modifier: Modifier = Modifier,
-    onChecked: (Boolean) -> Unit
-) {
-    ... Rest of your code
-}
-```
+| Component         | Jetpack Compose / CMP | Android View | Flutter | SwiftUI |
+|-------------------|-----------------------|--------------|---------|---------|
+| Button            | X                     |       X      |    X    |   -     |
+| Text              | X                     |       X      |    X    |   X     |
+| Checkbox          | X                     |       -      |    -    |   -     |
 
 ### Screen recordings
 
 <div class="grid cards" markdown>
   <figure markdown="span">
     ![Compose Android](./assets/video/compose-android.gif){ width="300" }
-    <figcaption>Compose Android</figcaption>
+    <figcaption>JetPack Compose / CMP</figcaption>
   </figure>
 
   <figure markdown="span">
@@ -86,5 +48,4 @@ fun CraftDCheckBox(
 !!! info "Credits"
 
     A Server Driven UI library for Android.
-    Inspired by the [_DynamicView_](https://github.com/rviannaoliveira/DynamicView).
-
+    Inspired by the [_DynamicView_](https://github.com/rviannaoliveira/DynamicView).

docs/setup.md

@@ -1,6 +1,6 @@
 # Setup
 
-## Android
+## Android / CMP
 
 - Add in your settings.gradle mavenCetral:
 
@@ -29,7 +29,7 @@ dependencyResolutionManagement {
     ```
 
 !!! example "Core"
-    Core - Is meant to be used for you to customize even the craftD mechanism
+Core - Is meant to be used for you to customize even the craftD mechanism
 
     ```kotlin
     implementation("io.github.codandotv:craftd-core:${last_version}")
@@ -40,7 +40,7 @@ dependencyResolutionManagement {
 - Add your pod ‘CraftDSwiftUI’
 
 !!! warning "In Progress"
-    This section is in progress...
+This section is in progress...
 
 ## Flutter
 
@@ -53,7 +53,7 @@ flutter pub add craftd_widget
 This will add a line like this to your package's pubspec.yaml (and run an implicit flutter pub get):
 
 !!! example "pubspec.yml"
-    ```yaml
-    dependencies:
-        craftd_widget: $last_version
-    ```
+```yaml
+dependencies:
+    craftd_widget: $last_version
+```