Spec to KComponent -> ParentComponentMediator and ChildComponentSiblingCommunication

Summary:
Updating LithoDocs for Communicating between Components to have KComponent samples: https://fblitho.com/docs/mainconcepts/coordinate-state-actions/communicating-between-components/

- Will be updating the guidelines towards the end of the diff stack
- Not deleting the Spec files as they're used for Java Examples

Reviewed By: astreet

Differential Revision: D73106322

fbshipit-source-id: 2f0509641559faffa0cf085aa9bad98f75d17528

Author: aashay-gaikwad

docs/mainconcepts/coordinate-state-actions/communicating-between-components.md

@@ -61,15 +61,15 @@ Two sibling components (two child components of the same parent) cannot communic
 
 A child component that needs to send a signal to a sibling component will dispatch an event to the common parent component:
 
-```java file=sample/src/main/java/com/facebook/samples/litho/java/communicating/ChildComponentSiblingCommunicationSpec.java start=start_dispatch_to_parent end=end_dispatch_to_parent
+```java file=sample/src/main/java/com/facebook/samples/litho/java/communicating/ChildComponentSiblingCommunicationKComponent.kt start=start_dispatch_to_parent end=end_dispatch_to_parent
 ```
 
 As shown in the following code, the parent component can:
 
 * Perform a state update to recreate the sibling with new data (@OnUpdateState)
 * Trigger an event on the sibling using a reference (@OnEvent).
 
-```java file=sample/src/main/java/com/facebook/samples/litho/java/communicating/ParentComponentMediatorSpec.java start=start_parent_mediator end=end_parent_mediator
+```java file=sample/src/main/java/com/facebook/samples/litho/java/communicating/ParentComponentMediatorKComponent.kt start=start_parent_mediator end=end_parent_mediator
 ```
 
 ### Communicating externally to a component

sample/src/main/java/com/facebook/samples/litho/java/communicating/ChildComponentSiblingCommunicationKComponent.kt

@@ -0,0 +1,61 @@
+/*
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+package com.facebook.samples.litho.java.communicating
+
+import android.graphics.Color
+import com.facebook.litho.Component
+import com.facebook.litho.ComponentScope
+import com.facebook.litho.KComponent
+import com.facebook.litho.Row
+import com.facebook.litho.Style
+import com.facebook.litho.core.height
+import com.facebook.litho.core.margin
+import com.facebook.litho.core.width
+import com.facebook.litho.flexbox.border
+import com.facebook.litho.kotlin.widget.Border
+import com.facebook.litho.kotlin.widget.BorderEdge
+import com.facebook.litho.kotlin.widget.BorderRadius
+import com.facebook.litho.kotlin.widget.SolidColor
+import com.facebook.litho.kotlin.widget.Text
+import com.facebook.litho.view.onClick
+import com.facebook.rendercore.dp
+
+// start_dispatch_to_parent
+class ChildComponentSiblingCommunicationKComponent(
+    private val id: Int,
+    private val isSelected: Boolean,
+    private val onSelected: (Int) -> Unit,
+) : KComponent() {
+
+  override fun ComponentScope.render(): Component? {
+    return Row(style = Style.onClick { onSelected(id) }.margin(all = 30.dp)) {
+      child(
+          SolidColor(
+              color = if (isSelected) Color.BLUE else Color.WHITE,
+              style =
+                  Style.width(20.dp)
+                      .height(20.dp)
+                      .margin(top = 10.dp, end = 30.dp)
+                      .border(
+                          Border(
+                              edgeAll = BorderEdge(color = Color.BLUE, width = 1.dp),
+                              radius = BorderRadius(all = 2.dp)))))
+      child(Text(text = "ChildComponent $id", textSize = 20.dp))
+    }
+  }
+}
+// end_dispatch_to_parent

sample/src/main/java/com/facebook/samples/litho/java/communicating/ParentComponentMediatorKComponent.kt

@@ -0,0 +1,50 @@
+/*
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+package com.facebook.samples.litho.java.communicating
+
+import com.facebook.litho.Column
+import com.facebook.litho.Component
+import com.facebook.litho.ComponentScope
+import com.facebook.litho.KComponent
+import com.facebook.litho.Style
+import com.facebook.litho.core.padding
+import com.facebook.litho.kotlin.widget.Text
+import com.facebook.litho.useState
+import com.facebook.rendercore.dp
+
+// start_parent_mediator
+class ParentComponentMediatorKComponent : KComponent() {
+  override fun ComponentScope.render(): Component? {
+
+    val selectedPosition = useState { 0 }
+
+    return Column(style = Style.padding(all = 30.dp)) {
+      child(Text(text = "ChildComponent", textSize = 30.dp))
+      child(
+          ChildComponentSiblingCommunicationKComponent(
+              id = 0,
+              isSelected = selectedPosition.value == 0,
+              onSelected = { selectedPosition.update(0) }))
+      child(
+          ChildComponentSiblingCommunicationKComponent(
+              id = 1,
+              isSelected = selectedPosition.value == 1,
+              onSelected = { selectedPosition.update(1) }))
+    }
+  }
+}
+// end_parent_mediator