Merge pull request #635 from mike-n-jordan/setup_embedding_cake_app_i…

…n_landing Setup embedding cake app in landing
bumble-tech · Nov 22, 2023 · 9b24236 · 9b24236
2 parents 07ce12a + 2395918
commit 9b24236
Show file tree

Hide file tree

Showing 9 changed files with 122 additions and 26 deletions.
diff --git a/...n/common/src/commonMain/kotlin/com/bumble/appyx/navigation/node/cakes/CakeBackdropNode.kt b/...n/common/src/commonMain/kotlin/com/bumble/appyx/navigation/node/cakes/CakeBackdropNode.kt
@@ -5,14 +5,14 @@ import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.padding
+import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.alpha
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.unit.dp
-import androidx.compose.ui.unit.sp
 import com.bumble.appyx.interactions.core.ui.math.smoothstep
 import com.bumble.appyx.interactions.core.ui.property.motionPropertyRenderValue
 import com.bumble.appyx.navigation.modality.BuildContext
@@ -40,7 +40,7 @@ class CakeBackdropNode(
         ) {
             Text(
                 text = cake.name,
-                fontSize = 21.sp,
+                style = MaterialTheme.typography.headlineSmall,
                 color = Color.Black,
                 fontWeight = FontWeight.Bold,
                 modifier = Modifier

diff --git a/demos/appyx-navigation/common/src/commonMain/kotlin/com/bumble/appyx/navigation/ui/Theme.kt b/demos/appyx-navigation/common/src/commonMain/kotlin/com/bumble/appyx/navigation/ui/Theme.kt
@@ -2,6 +2,7 @@ package com.bumble.appyx.navigation.ui
 
 import androidx.compose.foundation.isSystemInDarkTheme
 import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Typography
 import androidx.compose.material3.darkColorScheme
 import androidx.compose.material3.lightColorScheme
 import androidx.compose.runtime.Composable
@@ -11,7 +12,11 @@ private val DarkColorPalette = darkColorScheme()
 private val LightColorPalette = lightColorScheme()
 
 @Composable
-fun AppyxSampleAppTheme(darkTheme: Boolean = isSystemInDarkTheme(), content: @Composable () -> Unit) {
+fun AppyxSampleAppTheme(
+    darkTheme: Boolean = isSystemInDarkTheme(),
+    themeTypography: Typography = typography,
+    content: @Composable () -> Unit
+) {
     val colors = if (darkTheme) {
         DarkColorPalette
     } else {
@@ -20,7 +25,7 @@ fun AppyxSampleAppTheme(darkTheme: Boolean = isSystemInDarkTheme(), content: @Co
 
     MaterialTheme(
         colorScheme = colors,
-        typography = typography,
+        typography = themeTypography,
         shapes = shapes,
         content = content
     )

diff --git a/demos/appyx-navigation/common/src/commonMain/kotlin/com/bumble/appyx/navigation/ui/Type.kt b/demos/appyx-navigation/common/src/commonMain/kotlin/com/bumble/appyx/navigation/ui/Type.kt
@@ -13,6 +13,11 @@ val typography = Typography(
         fontFamily = FontFamily.Default,
         fontWeight = FontWeight.Normal,
         fontSize = 16.sp
+    ),
+    headlineSmall = TextStyle(
+        fontFamily = FontFamily.Default,
+        fontWeight = FontWeight.Normal,
+        fontSize = 21.sp
     )
     /* Other default text styles to override
     button = TextStyle(

diff --git a/demos/appyx-navigation/web/build.gradle.kts b/demos/appyx-navigation/web/build.gradle.kts
@@ -18,6 +18,8 @@ kotlin {
                 implementation(project(":appyx-interactions:appyx-interactions"))
                 implementation(project(":appyx-navigation:appyx-navigation"))
                 implementation(project(":appyx-components:stable:backstack:backstack"))
+                implementation(project(":demos:mkdocs:appyx-components:common"))
+                implementation(project(":demos:mkdocs:common"))
                 api(compose.runtime)
                 api(compose.foundation)
                 api(compose.material)

diff --git a/demos/appyx-navigation/web/src/jsMain/kotlin/com/bumble/appyx/navigation/Main.kt b/demos/appyx-navigation/web/src/jsMain/kotlin/com/bumble/appyx/navigation/Main.kt
@@ -1,8 +1,12 @@
 package com.bumble.appyx.navigation
 
-import androidx.compose.foundation.ExperimentalFoundationApi
+import androidx.compose.foundation.border
 import androidx.compose.foundation.focusable
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.aspectRatio
 import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Surface
 import androidx.compose.runtime.Composable
@@ -12,8 +16,10 @@ import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.setValue
+import androidx.compose.ui.Alignment
 import androidx.compose.ui.ExperimentalComposeUiApi
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
 import androidx.compose.ui.focus.FocusRequester
 import androidx.compose.ui.focus.focusRequester
 import androidx.compose.ui.focus.onFocusChanged
@@ -26,6 +32,8 @@ import androidx.compose.ui.input.key.type
 import androidx.compose.ui.layout.onSizeChanged
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.window.CanvasBasedWindow
+import com.bumble.appyx.demos.appyxSample
+import com.bumble.appyx.demos.common.color_primary
 import com.bumble.appyx.navigation.integration.ScreenSize
 import com.bumble.appyx.navigation.integration.WebNodeHost
 import com.bumble.appyx.navigation.navigator.LocalNavigator
@@ -38,23 +46,23 @@ import kotlinx.coroutines.SupervisorJob
 import kotlinx.coroutines.channels.Channel
 import kotlinx.coroutines.flow.receiveAsFlow
 import kotlinx.coroutines.launch
-import org.jetbrains.skiko.wasm.onWasmReady
 
 @OptIn(ExperimentalComposeUiApi::class)
 fun main() {
     val events: Channel<Unit> = Channel()
     val navigator = Navigator()
-    onWasmReady {
+    appyxSample {
         CanvasBasedWindow("Appyx navigation demo") {
-            ForceChangeToCodeGen(events, navigator)
+            CakeApp(events, navigator)
         }
     }
 }
 
-@OptIn(ExperimentalFoundationApi::class)
+private val containerShape = RoundedCornerShape(8)
+
 @Composable
-private fun ForceChangeToCodeGen(events: Channel<Unit>, navigator: Navigator) {
-    AppyxSampleAppTheme {
+private fun CakeApp(events: Channel<Unit>, navigator: Navigator) {
+    AppyxSampleAppTheme(darkTheme = true, themeTypography = webTypography) {
         val requester = remember { FocusRequester() }
         var hasFocus by remember { mutableStateOf(false) }
 
@@ -74,14 +82,16 @@ private fun ForceChangeToCodeGen(events: Channel<Unit>, navigator: Navigator) {
             color = MaterialTheme.colorScheme.background,
         ) {
             CompositionLocalProvider(LocalNavigator provides navigator) {
-                WebNodeHost(
-                    screenSize = screenSize,
-                    onBackPressedEvents = events.receiveAsFlow(),
-                ) { buildContext ->
-                    RootNode(
-                        buildContext = buildContext,
-                        plugins = listOf(navigator)
-                    )
+                BlackContainer {
+                    WebNodeHost(
+                        screenSize = screenSize,
+                        onBackPressedEvents = events.receiveAsFlow(),
+                    ) { buildContext ->
+                        RootNode(
+                            buildContext = buildContext,
+                            plugins = listOf(navigator)
+                        )
+                    }
                 }
             }
         }
@@ -94,6 +104,25 @@ private fun ForceChangeToCodeGen(events: Channel<Unit>, navigator: Navigator) {
     }
 }
 
+@Composable
+private fun BlackContainer(content: @Composable () -> Unit) {
+    Box(
+        modifier = Modifier
+            .fillMaxSize()
+            .padding(16.dp),
+        contentAlignment = Alignment.Center
+    ) {
+        Box(
+            modifier = Modifier
+                .aspectRatio(0.56f)
+                .border(4.dp, color_primary, containerShape)
+                .clip(containerShape)
+        ) {
+            content()
+        }
+    }
+}
+
 private fun onKeyEvent(
     keyEvent: KeyEvent,
     events: Channel<Unit>,

diff --git a/demos/appyx-navigation/web/src/jsMain/kotlin/com/bumble/appyx/navigation/WebTypography.kt b/demos/appyx-navigation/web/src/jsMain/kotlin/com/bumble/appyx/navigation/WebTypography.kt
@@ -0,0 +1,44 @@
+package com.bumble.appyx.navigation
+
+import androidx.compose.ui.text.font.FontFamily
+import androidx.compose.ui.unit.sp
+import com.bumble.appyx.navigation.ui.typography
+
+internal val webTypography = typography.copy(
+    bodySmall = typography.bodySmall.copy(
+        fontSize = 4.sp,
+        fontFamily = FontFamily.SansSerif,
+    ),
+    bodyMedium = typography.bodyMedium.copy(
+        fontSize = 6.sp,
+        fontFamily = FontFamily.SansSerif,
+    ),
+    bodyLarge = typography.bodyLarge.copy(
+        fontSize = 8.sp,
+        fontFamily = FontFamily.SansSerif,
+    ),
+    titleSmall = typography.titleSmall.copy(
+        fontSize = 8.sp,
+        fontFamily = FontFamily.SansSerif,
+    ),
+    titleMedium = typography.titleMedium.copy(
+        fontSize = 10.sp,
+        fontFamily = FontFamily.SansSerif,
+    ),
+    titleLarge = typography.titleLarge.copy(
+        fontSize = 12.sp,
+        fontFamily = FontFamily.SansSerif,
+    ),
+    headlineSmall = typography.headlineSmall.copy(
+        fontSize = 12.sp,
+        fontFamily = FontFamily.SansSerif,
+    ),
+    headlineMedium = typography.headlineMedium.copy(
+        fontSize = 14.sp,
+        fontFamily = FontFamily.SansSerif,
+    ),
+    headlineLarge = typography.headlineLarge.copy(
+        fontSize = 16.sp,
+        fontFamily = FontFamily.SansSerif,
+    ),
+)
diff --git a/documentation/index.md b/documentation/index.md
@@ -40,14 +40,14 @@ Appyx is a collection of libraries:
 
 {{
     compose_mpp_sample(
-        project_output_directory="demos/mkdocs/appyx-components/backstack/parallax/web/build/dist/js/productionExecutable",
-        compile_task=":demos:mkdocs:appyx-components:backstack:parallax:web:jsBrowserDistribution",
+        project_output_directory="demos/appyx-navigation/web/build/dist/js/productionExecutable",
+        compile_task=":demos:appyx-navigation:web:jsBrowserDistribution",
         width=512,
-        height=384,
-        target_directory="samples/documentation-components-backstack-parallax",
+        height=500,
+        target_directory="samples/documentation-appyx-navigation",
         html_file_name="index.html",
-        classname="compose_mpp_sample",
-)
+        classname="compose_mpp_sample_app",
+    )
 }}
 
 

diff --git a/documentation/stylesheets/extra.css b/documentation/stylesheets/extra.css
@@ -41,6 +41,16 @@
     aspect-ratio: 4 / 3;
 }
 
+.compose_mpp_sample_app {
+    width: fit-content;
+    -moz-border-radius: 10px;
+    -webkit-border-radius: 10px;
+    border-radius: 10px;
+    overflow:hidden;
+    line-height: 0;
+    margin: auto;
+}
+
 @media (max-width: 543px) {
     .compose_mpp_sample {
         width: 256px;

diff --git a/utils/material3/src/commonMain/kotlin/com/bumble/appyx/utils/material3/AppyxNavItem.kt b/utils/material3/src/commonMain/kotlin/com/bumble/appyx/utils/material3/AppyxNavItem.kt
@@ -40,7 +40,8 @@ class AppyxNavItem(
         text = {
             Text(
                 text = text,
-                color = MaterialTheme.colorScheme.onPrimaryContainer
+                color = MaterialTheme.colorScheme.onPrimaryContainer,
+                style = MaterialTheme.typography.titleSmall
             )
         },
         icon = { isSelected ->