Merge pull request #87 from Lavmee/update-docs

Update docs

docs/component/navigation.md

@@ -108,21 +108,33 @@ Optional syntax is also supported for regex path variable: `/user/{id:[0-9]+}?`:
  - matches `/user`
  - matches `/user/123`
 
+### Group
+```kotlin
+group(route = "/group", initialRoute = "/nestedScreen1") {
+    scene(route = "/nestedScreen1") {
+
+    }
+    scene(route = "/nestedScreen2") {
+
+    }
+}
+```
+
  ## QueryString
 
  **DO NOT** define your query string in scene route, this will have no effect on both navigation route and query string.
 
  You can pass your query string as to `Navigator.navigate(route: String)`, like: `Navigator.navigate("/detail/123?my=query")`
 
-And you can retrive query string from `BackStackEntry.query(name: String)`
+And you can retrieve query string from `BackStackEntry.query(name: String)`
 
 ```kotlin
 scene(route = "/detail/{id}") { backStackEntry ->
     val my: String? = backStackEntry.query<String>("my")
 }
 ```
 
-If your query string is a list, you can retrive by `BackStackEntry.queryList(name: String)`
+If your query string is a list, you can retrieve by `BackStackEntry.queryList(name: String)`
 
 ## Navigation transition
 You can define a `NavTransition` for both `NavHost` and `scene`, PreCompose will use the `scene`'s `NavTransition` if the `scene` define a `NavTransition`, otherwise will fall back to `NavHost`'s `NavTransition`.
@@ -132,7 +144,7 @@ There are 4 transition type for `NavTransition`
  Transition the scene that about to appear for the first time, similar to activity onCreate
 
   - `destroyTransition`  
-Transition the scene that abou t to disappear forever, similar to activity onDestroy
+Transition the scene that about to disappear forever, similar to activity onDestroy
 
  - `pauseTransition`  
  Transition the scene that will be pushed into back stack, similar to activity onPause

docs/component/view_model.md

@@ -33,4 +33,28 @@ NOTE: If you're using Kotlin/Native target, please use viewModel with modelClass
 val viewModel = viewModel(modelClass = SomeViewModel::class, keys = listOf(someKey)) {
     SomeViewModel(someKey)
 }
+```
+
+If you need to save and restore state in the ViewModel, you can use SavedStateHolder.
+```kotlin
+val viewModel = viewModel(modelClass = SomeViewModel::class, keys = listOf(someKey)) { savedStateHolder ->
+    SomeViewModel(someKey, savedStateHolder)
+}
+```
+
+Then the ViewModel might look like this:
+```kotlin
+class SomeViewModel(private val someKey: Int?, savedStateHolder: SavedStateHolder) : ViewModel() {
+    val someSavedValue = MutableStateFlow(savedStateHolder.consumeRestored("someValue") as String? ?: "")
+
+    init {
+        savedStateHolder.registerProvider("someValue") {
+            someSavedValue.value
+        }
+    }
+
+    fun setSomeValue(value: String) {
+        someSavedValue.value = value
+    }
+}
 ```

docs/sample.md

@@ -86,4 +86,77 @@ class HomeViewModel : ViewModel() {
     }
 }
 ```
-<img src="../media/greeting_app.gif" height="400">
+<img src="../media/greeting_app.gif" height="400">
+
+## Greetings App with ViewModel using StateFlow in 100 lines!
+
+```kotlin
+@Composable
+fun App() {
+    val navigator = rememberNavigator()
+    MaterialTheme {
+        NavHost(
+            navigator = navigator,
+            initialRoute = "/home"
+        ) {
+            scene(route = "/home") {
+                val homeViewModel = viewModel {
+                    HomeViewModel()
+                }
+                val name by homeViewModel.name.collectAsStateWithLifecycle()
+                Column(
+                    modifier = Modifier.fillMaxSize(),
+                    horizontalAlignment = Alignment.CenterHorizontally,
+                    verticalArrangement = Arrangement.Center
+                ) {
+                    Text(
+                        text = "Greet Me!",
+                        style = MaterialTheme.typography.h6
+                    )
+                    Spacer(modifier = Modifier.height(30.dp))
+                    TextField(
+                        value = name,
+                        maxLines = 1,
+                        label = { Text(text = "Enter your name") },
+                        onValueChange = homeViewModel::setName
+                    )
+                    Spacer(modifier = Modifier.height(30.dp))
+                    Button(
+                        onClick = {
+                            navigator.navigate(route = "/greeting/$name")
+                        }
+                    ) {
+                        Text(text = "GO!")
+                    }
+                }
+            }
+            scene(route = "/greeting/{name}") { backStackEntry ->
+                backStackEntry.path<String>("name")?.let { name ->
+                    Column(
+                        modifier = Modifier.fillMaxSize(),
+                        horizontalAlignment = Alignment.CenterHorizontally,
+                        verticalArrangement = Arrangement.Center
+                    ) {
+                        Text(
+                            text = name,
+                            style = MaterialTheme.typography.h6
+                        )
+                        Spacer(modifier = Modifier.height(30.dp))
+                        Button(onClick = navigator::goBack) {
+                            Text(text = "GO BACK!")
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+
+class HomeViewModel : ViewModel() {
+    val name = MutableStateFlow("")
+    fun setName(value: String) {
+        name.update { value }
+    }
+}
+```
+