feat: Add support to feature flags (#1265)

Co-authored-by: Simon Marquis <[email protected]>
Co-authored-by: spark-ui-bot <[email protected]>

catalog/src/main/kotlin/com/adevinta/spark/catalog/CatalogApp.kt

@@ -58,9 +58,7 @@ import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.rememberCoroutineScope
 import androidx.compose.runtime.saveable.rememberSaveable
-import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
-import androidx.compose.ui.ExperimentalComposeUiApi
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.platform.LocalDensity
@@ -69,6 +67,7 @@ import androidx.compose.ui.unit.LayoutDirection
 import androidx.compose.ui.unit.dp
 import androidx.navigation.compose.NavHost
 import androidx.navigation.compose.rememberNavController
+import com.adevinta.spark.SparkFeatureFlag
 import com.adevinta.spark.SparkTheme
 import com.adevinta.spark.catalog.backdrop.BackdropScaffold
 import com.adevinta.spark.catalog.backdrop.BackdropScaffoldDefaults
@@ -99,10 +98,7 @@ import com.airbnb.android.showkase.models.ShowkaseBrowserComponent
 import com.google.accompanist.testharness.TestHarness
 import kotlinx.coroutines.launch
 
-@OptIn(
-    ExperimentalFoundationApi::class,
-    ExperimentalComposeUiApi::class,
-)
+@OptIn(ExperimentalFoundationApi::class)
 @Composable
 internal fun ComponentActivity.CatalogApp(
     theme: Theme,
@@ -130,7 +126,11 @@ internal fun ComponentActivity.CatalogApp(
         colors = colors,
         shapes = shapes,
         typography = typography,
-        useLegacyStyle = false,
+        sparkFeatureFlag = SparkFeatureFlag(
+            useLegacyStyle = theme.useLegacyTheme,
+            useSparkTokensHighlighter = theme.highlightSparkTokens,
+            useSparkComponentsHighlighter = theme.highlightSparkComponents,
+        ),
     ) {
         CompositionLocalProvider(LocalRippleTheme provides SparkRippleTheme) {
             val layoutDirection = when (theme.textDirection) {

catalog/src/main/kotlin/com/adevinta/spark/catalog/datastore/theme/ThemeProperties.kt

@@ -38,6 +38,9 @@ internal data class ThemeProperties(
     val brandMode: BrandMode,
     val fontScaleMode: FontScaleMode,
     val textDirection: TextDirection,
+    val highlightSparkComponents: Boolean,
+    val highlightSparkTokens: Boolean,
+    val useLegacyTheme: Boolean,
 ) {
     companion object {
         val DEFAULT = ThemeProperties(
@@ -48,7 +51,9 @@ internal data class ThemeProperties(
             colorMode = ColorMode.Baseline,
             textDirection = TextDirection.System,
             fontScaleMode = FontScaleMode.System,
-
+            highlightSparkComponents = false,
+            highlightSparkTokens = false,
+            useLegacyTheme = false,
         )
     }
 }

catalog/src/main/kotlin/com/adevinta/spark/catalog/datastore/theme/ThemePropertiesHandler.kt

@@ -78,6 +78,9 @@ private fun ThemeProperties.toTheme(): Theme = Theme(
     brandMode = brandMode,
     fontScaleMode = fontScaleMode,
     textDirection = textDirection,
+    highlightSparkComponents = highlightSparkComponents,
+    highlightSparkTokens = highlightSparkTokens,
+    useLegacyTheme = useLegacyTheme,
 )
 
 private fun Theme.toDataStoreThemeProperties(): ThemeProperties = ThemeProperties(
@@ -88,4 +91,7 @@ private fun Theme.toDataStoreThemeProperties(): ThemeProperties = ThemePropertie
     brandMode = brandMode,
     fontScaleMode = fontScaleMode,
     textDirection = textDirection,
+    highlightSparkComponents = highlightSparkComponents,
+    highlightSparkTokens = highlightSparkTokens,
+    useLegacyTheme = useLegacyTheme,
 )

catalog/src/main/kotlin/com/adevinta/spark/catalog/themes/Theme.kt

@@ -31,6 +31,9 @@ public data class Theme(
     val fontScale: Float = 1.0f,
     val fontScaleMode: FontScaleMode = FontScaleMode.System,
     val textDirection: TextDirection = TextDirection.System,
+    val highlightSparkComponents: Boolean = false,
+    val highlightSparkTokens: Boolean = false,
+    val useLegacyTheme: Boolean = false,
 )
 
 /**
@@ -109,6 +112,9 @@ public val ThemeSaver: Saver<Theme, Map<String, Int>> = Saver(
             UserModeKey to theme.userMode.ordinal,
             FontScaleKey to theme.fontScale.toInt(),
             TextDirectionKey to theme.textDirection.ordinal,
+            HighlightSparkComponentsKey to if (theme.highlightSparkComponents) 1 else 0,
+            HighlightSparkTokensKey to if (theme.highlightSparkTokens) 1 else 0,
+            UseLegacyThemeKey to if (theme.useLegacyTheme) 1 else 0,
         )
     },
     restore = { map ->
@@ -119,6 +125,9 @@ public val ThemeSaver: Saver<Theme, Map<String, Int>> = Saver(
             userMode = UserMode.entries[map.getValue(UserModeKey)],
             fontScale = map.getValue(FontScaleKey).toFloat(),
             textDirection = TextDirection.entries[map.getValue(TextDirectionKey)],
+            highlightSparkComponents = map.getValue(HighlightSparkComponentsKey) == 1,
+            highlightSparkTokens = map.getValue(HighlightSparkTokensKey) == 1,
+            useLegacyTheme = map.getValue(UseLegacyThemeKey) == 1,
         )
     },
 )
@@ -132,3 +141,6 @@ private const val BrandModeKey = "brandMode"
 private const val UserModeKey = "userMode"
 private const val FontScaleKey = "fontScale"
 private const val TextDirectionKey = "textDirection"
+private const val HighlightSparkComponentsKey = "highlightSparkComponents"
+private const val HighlightSparkTokensKey = "highlightSparkTokens"
+private const val UseLegacyThemeKey = "useLegacyTheme"

catalog/src/main/kotlin/com/adevinta/spark/catalog/themes/ThemePicker.kt

@@ -216,6 +216,48 @@ public fun ThemePicker(
                 )
             }
         }
+        item {
+            SwitchLabelled(
+                modifier = Modifier.padding(horizontal = ThemePickerPadding),
+                checked = theme.useLegacyTheme,
+                onCheckedChange = { checked ->
+                    onThemeChange(theme.copy(useLegacyTheme = checked))
+                },
+            ) {
+                Text(
+                    text = "Use LegacyTheme",
+                    modifier = Modifier.fillMaxWidth(),
+                )
+            }
+        }
+        item {
+            SwitchLabelled(
+                modifier = Modifier.padding(horizontal = ThemePickerPadding),
+                checked = theme.highlightSparkComponents,
+                onCheckedChange = { checked ->
+                    onThemeChange(theme.copy(highlightSparkComponents = checked))
+                },
+            ) {
+                Text(
+                    text = "Highlight Spark Components",
+                    modifier = Modifier.fillMaxWidth(),
+                )
+            }
+        }
+        item {
+            SwitchLabelled(
+                modifier = Modifier.padding(horizontal = ThemePickerPadding),
+                checked = theme.highlightSparkTokens,
+                onCheckedChange = { checked ->
+                    onThemeChange(theme.copy(highlightSparkTokens = checked))
+                },
+            ) {
+                Text(
+                    text = "Highlight Spark Tokens",
+                    modifier = Modifier.fillMaxWidth(),
+                )
+            }
+        }
     }
 }
 

catalog/src/main/kotlin/com/adevinta/spark/catalog/util/Previews.kt

@@ -67,9 +67,6 @@ internal fun PreviewTheme(
 internal fun SparkTenantTheme(
     // We don't want to automatically support dark theme in the app but still want it in the previews
     useDarkColors: Boolean = isSystemInDarkTheme(),
-    useSparkTokensHighlighter: Boolean = false,
-    useSparkComponentsHighlighter: Boolean = false,
-    useLegacyStyle: Boolean = false,
     content: @Composable () -> Unit,
 ) {
     val colors = if (useDarkColors) {
@@ -81,9 +78,6 @@ internal fun SparkTenantTheme(
         colors = colors,
         shapes = sparkShapes(),
         typography = sparkTypography(),
-        useSparkTokensHighlighter = useSparkTokensHighlighter,
-        useSparkComponentsHighlighter = useSparkComponentsHighlighter,
-        useLegacyStyle = useLegacyStyle,
         content = content,
     )
 }

spark-screenshot-testing/src/test/kotlin/com/adevinta/spark/PaparazziUtils.kt

@@ -42,7 +42,6 @@ internal fun Paparazzi.sparkSnapshot(
     // Behave like in Android Studio Preview renderer
     CompositionLocalProvider(LocalInspectionMode provides true) {
         SparkTheme(
-            useLegacyStyle = false,
             colors = if (isDark) darkSparkColors() else lightSparkColors(),
         ) {
             // The first box acts as a shield from ComposeView which forces the first layout node

spark-screenshot-testing/src/test/kotlin/com/adevinta/spark/icons/IconsScreenshot.kt

@@ -24,6 +24,7 @@ package com.adevinta.spark.icons
 import com.adevinta.spark.components.icons.Icon
 import com.adevinta.spark.components.icons.IconSize
 import com.adevinta.spark.paparazziRule
+import com.adevinta.spark.sparkSnapshot
 import com.google.testing.junit.testparameterinjector.TestParameter
 import com.google.testing.junit.testparameterinjector.TestParameterInjector
 import com.google.testing.junit.testparameterinjector.TestParameterValuesProvider
@@ -48,7 +49,7 @@ internal class IconsScreenshot {
     @Suppress("JUnitMalformedDeclaration")
     fun render(
         @TestParameter(valuesProvider = SparkIconProvider::class) icon: SparkIcon,
-    ) = paparazzi.snapshot {
+    ) = paparazzi.sparkSnapshot(drawBackground = false) {
         Icon(
             sparkIcon = icon,
             contentDescription = icon.toString(),