feat: Add Slider component (#5)

* chore(Slider): Setup slider module

* feat(Slider): Add basic slider track with disabled range and colors

* feat(Slider): add basic SliderLayout to position slider elements

* fix(Slider): Add requiredSize for the SliderLayout

* style: apply spotless

* feat(Slider): Add SliderState and basic computation

* style: apply spotless

* feat(Slider): Add Custom Value distribution and parabolic example

* style: apply spotless

* docs(Slider): Add kdoc for the public apis

* feat(Slider): Add Tap functionality

* feat(Slider): Add initial version of the disabled range feature

* refactor(Slider): Add extension function to interpolate the range

* refactor(Slider): Add another Slider fucntion that accepts SliderState

* docs(Slider): Add kdoc for the new slider function

* feat(Slider): Add slider semantics modifier for accesability

* feat: Add disabled state to the Slider, also refactor the state management

* docs(Slider): Add some more kdoc comments

* feat: Update demo for the Slider

* refactor: apply PR comments

* style: apply spotless

* build: put basic compose deps into bundle

* style(Slider): add FloatRange annotation to progress part

* fix: swap inverse interplote methods

* add LinearEquation and RangedLinearEquation classes

* implement SensitivityDistribution & its builder

* write tests for SensitivityDistribution

* add default sensitivity in the builder if no values were added

* make values normalized ( between 0 and 1 )

* rename variable

* add valueToFraction and fractionToValue functions

* update tests

* make FragmentedLinearDistribution implement the SliderValueDistribution interface

* update SliderState

* update Demo

* update coerceInDisabledRange function implementation

* create linear equation from 2 points

* implement ValueCheckPointDistribution

* implement tests ValueCheckPointDistribution

* remove unnecessary lateinit and add TODO

* refactor: move distribution related stuff to the separate package

* refactor: move distribution related stuff to the separate package

* chore: Delete FragmentedLinearDistribution.kt

* refactor: rename coerce function in state

* style: apply spotless

* refactor: move math things to the separate package

* style: apply spotless

* docs: add kdoc for CheckPointsValueDistribution

* feat: add SliderValue Distribution builder for checkpoint inside cmpanion object

* docs: add missing kdoc

---------

Co-authored-by: kamel.mohamad <[email protected]>

Author: levinzonr

.gitignore

@@ -1,6 +1,7 @@
 *.iml
 .gradle
 /local.properties
+/.idea/
 /.idea/caches
 /.idea/libraries
 /.idea/modules.xml

.idea/deploymentTargetDropDown.xml

@@ -29,7 +29,7 @@ android {
         compose = true
     }
     composeOptions {
-        kotlinCompilerExtensionVersion = "1.5.1"
+        kotlinCompilerExtensionVersion = libs.versions.composeCompiler.get()
     }
     packaging {
         resources {
@@ -43,14 +43,11 @@ kotlin {
 }
 
 dependencies {
-
+    implementation(project(":slider"))
     implementation(libs.androidx.core.ktx)
     implementation(libs.androidx.lifecycle.runtime.ktx)
     implementation(libs.androidx.activity.compose)
     implementation(platform(libs.compose.bom))
-    implementation(libs.compose.ui)
-    implementation(libs.compose.ui.graphics)
-    implementation(libs.compose.ui.tooling.preview)
     implementation(libs.compose.material3)
     testImplementation(libs.junit)
     androidTestImplementation(libs.androidx.junit)

.idea/deploymentTargetSelector.xml

@@ -4,13 +4,11 @@ import android.os.Bundle
 import androidx.activity.ComponentActivity
 import androidx.activity.compose.setContent
 import androidx.activity.enableEdgeToEdge
-import androidx.compose.foundation.layout.fillMaxSize
-import androidx.compose.foundation.layout.padding
-import androidx.compose.material3.Scaffold
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.tooling.preview.Preview
+import io.monstarlab.mosaic.features.SliderDemo
 import io.monstarlab.mosaic.ui.theme.MosaicTheme
 
 class MainActivity : ComponentActivity() {
@@ -19,12 +17,7 @@ class MainActivity : ComponentActivity() {
         enableEdgeToEdge()
         setContent {
             MosaicTheme {
-                Scaffold(modifier = Modifier.fillMaxSize()) { innerPadding ->
-                    Greeting(
-                        name = "Android",
-                        modifier = Modifier.padding(innerPadding),
-                    )
-                }
+                SliderDemo()
             }
         }
     }

.idea/gradle.xml

@@ -0,0 +1,210 @@
+package io.monstarlab.mosaic.features
+
+import androidx.compose.animation.animateColor
+import androidx.compose.animation.core.LinearEasing
+import androidx.compose.animation.core.RepeatMode
+import androidx.compose.animation.core.animateFloat
+import androidx.compose.animation.core.infiniteRepeatable
+import androidx.compose.animation.core.rememberInfiniteTransition
+import androidx.compose.animation.core.tween
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Scaffold
+import androidx.compose.material3.Switch
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableFloatStateOf
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.draw.rotate
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import io.monstarlab.mosaic.slider.Slider
+import io.monstarlab.mosaic.slider.SliderColors
+import io.monstarlab.mosaic.slider.distribution.CheckPointsValueDistribution
+import io.monstarlab.mosaic.slider.distribution.SliderValueDistribution
+import kotlin.math.roundToInt
+import androidx.compose.material3.Slider as MaterialSlider
+
+@Composable
+fun SliderDemo() = Scaffold(modifier = Modifier) {
+    Column(
+        modifier = Modifier
+            .padding(it)
+            .padding(16.dp),
+        verticalArrangement = Arrangement.spacedBy(32.dp),
+    ) {
+        MosaicSliderDemo()
+    }
+}
+
+@Composable
+fun MosaicSliderDemo() {
+    Column {
+        val colors = SliderColors(
+            activeTrackColor = Color.Black,
+            disabledRangeTrackColor = Color.Red,
+            thumbColor = Color.Yellow,
+        )
+        var enabled by remember { mutableStateOf(true) }
+        var isCustom by remember { mutableStateOf(false) }
+        var linearDistribution by remember { mutableStateOf(false) }
+        var sliderValue by remember { mutableFloatStateOf(500f) }
+
+        MaterialSlider(
+            value = sliderValue,
+            onValueChange = { sliderValue = it },
+            valueRange = 0f..1000f,
+        )
+
+        val modifier = if (isCustom) {
+            Modifier
+                .clip(RoundedCornerShape(16.dp))
+                .height(15.dp)
+        } else {
+            Modifier
+        }
+
+        val fragmentedDistribution: SliderValueDistribution = remember {
+            CheckPointsValueDistribution(
+                listOf(
+                    0f to 0f,
+                    0.2f to 500f,
+                    0.4f to 800f,
+                    1f to 1000f,
+                ),
+            )
+        }
+
+        Slider(
+            value = sliderValue,
+            onValueChange = { sliderValue = it },
+            modifier = modifier,
+            enabled = enabled,
+            colors = colors,
+            range = 0f..1000f,
+            disabledRange = 50f..300f,
+            valueDistribution = if (linearDistribution) {
+                SliderValueDistribution.Linear
+            } else {
+                fragmentedDistribution
+            },
+            thumb = {
+                if (isCustom) {
+                    val transition = rememberInfiniteTransition(label = "")
+                    val color = transition.animateColor(
+                        initialValue = Color.Red,
+                        targetValue = Color.Green,
+                        animationSpec = infiniteRepeatable(
+                            animation = tween(1000, easing = LinearEasing),
+                            repeatMode = RepeatMode.Reverse,
+                        ),
+                        label = "",
+                    )
+
+                    val rotation = transition.animateFloat(
+                        initialValue = 0f,
+                        targetValue = 360f,
+                        animationSpec = infiniteRepeatable(
+                            tween(5000, easing = LinearEasing),
+                            repeatMode = RepeatMode.Restart,
+                        ),
+                        label = "",
+                    )
+
+                    Box(
+                        modifier = Modifier
+                            .rotate(rotation.value)
+                            .size(48.dp)
+                            .background(color.value),
+                    )
+                } else {
+                    Box(
+                        modifier = Modifier
+                            .size(16.dp)
+                            .background(colors.thumbColor(enabled), CircleShape),
+                    )
+                }
+            },
+
+        )
+
+        Text(
+            text = "Current value: ${sliderValue.roundToInt()}",
+            modifier = Modifier.align(Alignment.CenterHorizontally),
+            textAlign = TextAlign.Center,
+            style = MaterialTheme.typography.bodyLarge,
+        )
+
+        Row(
+            horizontalArrangement = Arrangement.SpaceBetween,
+            modifier = Modifier
+                .fillMaxWidth()
+                .padding(top = 32.dp),
+        ) {
+            LabeledSwitch(
+                label = "Slider enabled",
+                checked = enabled,
+                onValueChange = { enabled = it },
+            )
+
+            LabeledSwitch(
+                label = "Customise",
+                checked = isCustom,
+                onValueChange = { isCustom = it },
+            )
+        }
+
+        LabeledSwitch(
+            label = "Use linear distribution or parabolic",
+            checked = linearDistribution,
+            onValueChange = { linearDistribution = it },
+            modifier = Modifier.align(Alignment.CenterHorizontally),
+        )
+    }
+}
+
+@Composable
+private fun LabeledSwitch(
+    label: String,
+    checked: Boolean,
+    onValueChange: (Boolean) -> Unit,
+    modifier: Modifier = Modifier,
+) {
+    Column(
+        modifier = modifier,
+        horizontalAlignment = Alignment.CenterHorizontally,
+
+    ) {
+        Text(text = label, textAlign = TextAlign.Center)
+        Spacer(modifier = Modifier.height(3.dp))
+        Switch(
+            checked = checked,
+            onCheckedChange = onValueChange,
+        )
+    }
+}
+
+@Preview
+@Composable
+private fun PreviewSliderDemo() {
+    SliderDemo()
+}

demo/build.gradle.kts

@@ -7,12 +7,14 @@ junitVersion = "1.1.5"
 espresso = "3.5.1"
 lifecyle = "2.7.0"
 activityCompose = "1.8.2"
+composeCompiler = "1.5.1"
 composeBom = "2024.02.00"
 spotless="6.25.0"
 detekt="1.23.5"
 gradle-maven-publsih ="0.28.0"
 
 [libraries]
+kotlin_gradle_plugin = { module = "org.jetbrains.kotlin:kotlin-gradle-plugin", version.ref = "kotlin"}
 android_gradle_plugin = { module = "com.android.tools.build:gradle", version.ref = "agp" }
 androidx-core-ktx = { module = "androidx.core:core-ktx", version.ref = "coreKtx" }
 junit = { module = "junit:junit", version.ref = "junit" }
@@ -24,6 +26,7 @@ androidx-activity-compose = { module = "androidx.activity:activity-compose", ver
 compose-bom = { module = "androidx.compose:compose-bom", version.ref = "composeBom" }
 compose-ui = { module = "androidx.compose.ui:ui" }
 compose-ui-graphics = { module = "androidx.compose.ui:ui-graphics" }
+compose-foundation = { module = "androidx.compose.foundation:foundation" }
 compose-ui-tooling = { module = "androidx.compose.ui:ui-tooling" }
 compose-ui-tooling-preview = { module = "androidx.compose.ui:ui-tooling-preview" }
 compose-ui-test-manifest = { module = "androidx.compose.ui:ui-test-manifest" }
@@ -41,5 +44,13 @@ mosaic-application = { id = "io.monstarlab.mosaic.application", version = "undef
 mosaic-library = { id = "io.monstarlab.mosaic.library", version = "undefined" }
 gradle-maven-publish = {id = "com.vanniktech.maven.publish", version.ref = "gradle-maven-publsih"}
 
+[bundles]
+compose_core = [
+    "compose-ui",
+    "compose-ui-graphics",
+    "compose-foundation",
+    "compose-ui-tooling",
+    "compose-ui-tooling-preview"
+]
 
 

demo/src/main/java/io/monstarlab/mosaic/MainActivity.kt

@@ -25,6 +25,7 @@ android {
         }
     }
 }
+
 mavenPublishing {
     configure(AndroidSingleVariantLibrary("release"))
     publishToMavenCentral(SonatypeHost.S01)
@@ -34,10 +35,11 @@ mavenPublishing {
 
 kotlin {
     jvmToolchain(17)
+    explicitApi()
 }
 
 dependencies {
     implementation(libs.androidx.core.ktx)
     androidTestImplementation(libs.androidx.junit)
     androidTestImplementation(libs.androidx.espresso.core)
-}
+}

demo/src/main/java/io/monstarlab/mosaic/features/SliderDemo.kt

@@ -23,3 +23,4 @@ dependencyResolutionManagement {
 rootProject.name = "Mosaic"
 include(":demo")
 include(":lib")
+include(":slider")