[Jetsnack] Add Previews

Jetsnack/app/src/main/java/com/example/jetsnack/ui/components/Button.kt

@@ -16,6 +16,7 @@
 
 package com.example.jetsnack.ui.components
 
+import android.content.res.Configuration.UI_MODE_NIGHT_YES
 import androidx.compose.foundation.BorderStroke
 import androidx.compose.foundation.background
 import androidx.compose.foundation.clickable
@@ -31,6 +32,7 @@ import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material.ButtonDefaults
 import androidx.compose.material.MaterialTheme
 import androidx.compose.material.ProvideTextStyle
+import androidx.compose.material.Text
 import androidx.compose.material.ripple.rememberRipple
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.remember
@@ -39,8 +41,10 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
 import androidx.compose.ui.graphics.Brush
 import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.RectangleShape
 import androidx.compose.ui.graphics.Shape
 import androidx.compose.ui.semantics.Role
+import androidx.compose.ui.tooling.preview.Preview
 import com.example.jetsnack.ui.theme.JetsnackTheme
 
 @Composable
@@ -99,3 +103,27 @@ fun JetsnackButton(
 }
 
 private val ButtonShape = RoundedCornerShape(percent = 50)
+
+@Preview("default", "round")
+@Preview("dark theme", "round", uiMode = UI_MODE_NIGHT_YES)
+@Preview("large font", "round", fontScale = 2f)
+@Composable
+private fun ButtonPreview() {
+    JetsnackTheme {
+        JetsnackButton(onClick = {}) {
+            Text(text = "Demo")
+        }
+    }
+}
+
+@Preview("default", "rectangle")
+@Preview("dark theme", "rectangle", uiMode = UI_MODE_NIGHT_YES)
+@Preview("large font", "rectangle", fontScale = 2f)
+@Composable
+private fun RectangleButtonPreview() {
+    JetsnackTheme {
+        JetsnackButton(onClick = {}, shape = RectangleShape) {
+            Text(text = "Demo")
+        }
+    }
+}

Jetsnack/app/src/main/java/com/example/jetsnack/ui/components/Card.kt

@@ -16,12 +16,16 @@
 
 package com.example.jetsnack.ui.components
 
+import android.content.res.Configuration
 import androidx.compose.foundation.BorderStroke
+import androidx.compose.foundation.layout.padding
 import androidx.compose.material.MaterialTheme
+import androidx.compose.material.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.Shape
+import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
 import com.example.jetsnack.ui.theme.JetsnackTheme
@@ -33,7 +37,7 @@ fun JetsnackCard(
     color: Color = JetsnackTheme.colors.uiBackground,
     contentColor: Color = JetsnackTheme.colors.textPrimary,
     border: BorderStroke? = null,
-    elevation: Dp = 1.dp,
+    elevation: Dp = 4.dp,
     content: @Composable () -> Unit
 ) {
     JetsnackSurface(
@@ -46,3 +50,15 @@ fun JetsnackCard(
         content = content
     )
 }
+
+@Preview("default")
+@Preview("dark theme", uiMode = Configuration.UI_MODE_NIGHT_YES)
+@Preview("large font", fontScale = 2f)
+@Composable
+private fun CardPreview() {
+    JetsnackTheme {
+        JetsnackCard {
+            Text(text = "Demo", modifier = Modifier.padding(16.dp))
+        }
+    }
+}

Jetsnack/app/src/main/java/com/example/jetsnack/ui/components/Divider.kt

@@ -16,10 +16,15 @@
 
 package com.example.jetsnack.ui.components
 
+import android.content.res.Configuration
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.size
 import androidx.compose.material.Divider
 import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
 import com.example.jetsnack.ui.theme.JetsnackTheme
@@ -40,3 +45,14 @@ fun JetsnackDivider(
 }
 
 private const val DividerAlpha = 0.12f
+
+@Preview("default", showBackground = true)
+@Preview("dark theme", uiMode = Configuration.UI_MODE_NIGHT_YES, showBackground = true)
+@Composable
+private fun DividerPreview() {
+    JetsnackTheme {
+        Box(Modifier.size(height = 10.dp, width = 100.dp)) {
+            JetsnackDivider(Modifier.align(Alignment.Center))
+        }
+    }
+}

Jetsnack/app/src/main/java/com/example/jetsnack/ui/components/Filters.kt

@@ -16,6 +16,7 @@
 
 package com.example.jetsnack.ui.components
 
+import android.content.res.Configuration
 import androidx.compose.animation.animateColorAsState
 import androidx.compose.foundation.background
 import androidx.compose.foundation.interaction.MutableInteractionSource
@@ -44,14 +45,14 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.Shape
 import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import com.example.jetsnack.R
 import com.example.jetsnack.model.Filter
 import com.example.jetsnack.ui.theme.JetsnackTheme
 
 @Composable
 fun FilterBar(filters: List<Filter>) {
-
     LazyRow(
         verticalAlignment = Alignment.CenterVertically,
         horizontalArrangement = Arrangement.spacedBy(8.dp),
@@ -127,7 +128,6 @@ fun FilterChip(
                 .then(backgroundPressed)
                 .then(border),
         ) {
-
             Text(
                 text = filter.name,
                 style = MaterialTheme.typography.caption,
@@ -140,3 +140,23 @@ fun FilterChip(
         }
     }
 }
+
+@Preview("default")
+@Preview("dark theme", uiMode = Configuration.UI_MODE_NIGHT_YES)
+@Preview("large font", fontScale = 2f)
+@Composable
+private fun FilterDisabledPreview() {
+    JetsnackTheme {
+        FilterChip(Filter(name = "Demo", enabled = false), Modifier.padding(4.dp))
+    }
+}
+
+@Preview("default")
+@Preview("dark theme", uiMode = Configuration.UI_MODE_NIGHT_YES)
+@Preview("large font", fontScale = 2f)
+@Composable
+private fun FilterEnabledPreview() {
+    JetsnackTheme {
+        FilterChip(Filter(name = "Demo", enabled = true))
+    }
+}

Jetsnack/app/src/main/java/com/example/jetsnack/ui/components/GradientTintedIconButton.kt

@@ -16,13 +16,17 @@
 
 package com.example.jetsnack.ui.components
 
+import android.content.res.Configuration
 import androidx.compose.foundation.background
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.interaction.MutableInteractionSource
 import androidx.compose.foundation.interaction.collectIsPressedAsState
+import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.material.Icon
 import androidx.compose.material.Surface
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.Add
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.remember
@@ -31,6 +35,8 @@ import androidx.compose.ui.draw.clip
 import androidx.compose.ui.graphics.BlendMode
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.vector.ImageVector
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
 import com.example.jetsnack.ui.theme.JetsnackTheme
 
 @Composable
@@ -89,3 +95,17 @@ fun JetsnackGradientTintedIconButton(
         )
     }
 }
+
+@Preview("default")
+@Preview("dark theme", uiMode = Configuration.UI_MODE_NIGHT_YES)
+@Composable
+private fun GradientTintedIconButtonPreview() {
+    JetsnackTheme {
+        JetsnackGradientTintedIconButton(
+            imageVector = Icons.Default.Add,
+            onClick = {},
+            contentDescription = "Demo",
+            modifier = Modifier.padding(4.dp)
+        )
+    }
+}

Jetsnack/app/src/main/java/com/example/jetsnack/ui/components/QuantitySelector.kt

@@ -89,10 +89,9 @@ fun QuantitySelector(
     }
 }
 
-@Preview("Default")
-@Preview("Large font", fontScale = 2f)
-@Preview("Small font", fontScale = 0.5f)
-@Preview("Dark theme", uiMode = UI_MODE_NIGHT_YES)
+@Preview("default")
+@Preview("dark theme", uiMode = UI_MODE_NIGHT_YES)
+@Preview("large font", fontScale = 2f)
 @Composable
 fun QuantitySelectorPreview() {
     JetsnackTheme {

Jetsnack/app/src/main/java/com/example/jetsnack/ui/components/Snacks.kt

@@ -16,6 +16,7 @@
 
 package com.example.jetsnack.ui.components
 
+import android.content.res.Configuration.UI_MODE_NIGHT_YES
 import androidx.compose.foundation.Image
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Arrangement
@@ -219,7 +220,6 @@ private fun HighlightSnackItem(
         (HighlightCardWidth + HighlightCardPadding).toPx()
     }
     JetsnackCard(
-        elevation = 4.dp,
         modifier = modifier
             .size(
                 width = 170.dp,
@@ -297,7 +297,9 @@ fun SnackImage(
     }
 }
 
-@Preview("Highlight snack card")
+@Preview("default")
+@Preview("dark theme", uiMode = UI_MODE_NIGHT_YES)
+@Preview("large font", fontScale = 2f)
 @Composable
 fun SnackCardPreview() {
     JetsnackTheme {
@@ -312,19 +314,3 @@ fun SnackCardPreview() {
         )
     }
 }
-
-@Preview("Highlight snack card • Dark Theme")
-@Composable
-fun SnackCardDarkPreview() {
-    JetsnackTheme(darkTheme = true) {
-        val snack = snacks.first()
-        HighlightSnackItem(
-            snack = snack,
-            onSnackClick = { },
-            index = 0,
-            gradient = JetsnackTheme.colors.gradient6_1,
-            gradientWidth = gradientWidth,
-            scroll = 0
-        )
-    }
-}

Jetsnack/app/src/main/java/com/example/jetsnack/ui/home/DestinationBar.kt

@@ -16,6 +16,7 @@
 
 package com.example.jetsnack.ui.home
 
+import android.content.res.Configuration
 import androidx.compose.foundation.layout.Column
 import androidx.compose.material.Icon
 import androidx.compose.material.IconButton
@@ -30,6 +31,7 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.text.style.TextOverflow
+import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import com.example.jetsnack.R
 import com.example.jetsnack.ui.components.JetsnackDivider
@@ -70,3 +72,13 @@ fun DestinationBar(modifier: Modifier = Modifier) {
         JetsnackDivider()
     }
 }
+
+@Preview("default")
+@Preview("dark theme", uiMode = Configuration.UI_MODE_NIGHT_YES)
+@Preview("large font", fontScale = 2f)
+@Composable
+fun PreviewDestinationBar() {
+    JetsnackTheme {
+        DestinationBar()
+    }
+}

Jetsnack/app/src/main/java/com/example/jetsnack/ui/home/Feed.kt

@@ -16,6 +16,7 @@
 
 package com.example.jetsnack.ui.home
 
+import android.content.res.Configuration
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxSize
@@ -91,18 +92,12 @@ private fun SnackCollectionList(
     }
 }
 
-@Preview("Home")
+@Preview("default")
+@Preview("dark theme", uiMode = Configuration.UI_MODE_NIGHT_YES)
+@Preview("large font", fontScale = 2f)
 @Composable
 fun HomePreview() {
     JetsnackTheme {
         Feed(onSnackClick = { })
     }
 }
-
-@Preview("Home • Dark Theme")
-@Composable
-fun HomeDarkPreview() {
-    JetsnackTheme(darkTheme = true) {
-        Feed(onSnackClick = { })
-    }
-}

Jetsnack/app/src/main/java/com/example/jetsnack/ui/home/Profile.kt

@@ -16,6 +16,7 @@
 
 package com.example.jetsnack.ui.home
 
+import android.content.res.Configuration
 import androidx.compose.foundation.Image
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Spacer
@@ -32,8 +33,10 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import com.example.jetsnack.R
+import com.example.jetsnack.ui.theme.JetsnackTheme
 
 @Composable
 fun Profile(modifier: Modifier = Modifier) {
@@ -64,3 +67,13 @@ fun Profile(modifier: Modifier = Modifier) {
         )
     }
 }
+
+@Preview("default")
+@Preview("dark theme", uiMode = Configuration.UI_MODE_NIGHT_YES)
+@Preview("large font", fontScale = 2f)
+@Composable
+fun ProfilePreview() {
+    JetsnackTheme {
+        Profile()
+    }
+}