feat: Create skeleton component

Author: FDELAHA24

CONVENTIONS.md

@@ -36,7 +36,9 @@ project.
 
 For colors and sizes, functions for each variant shouldn't contains `Colors` and `Sizes` keywords.
 e.g. `Vitamin<Component>Colors.primary()` for colors and `Vitamin<Component>Sizes.medium()` for 
-sizes.
+sizes. Functions arguments should be suffixed with `Color`, e.g. `backgroundColor`
+
+
 
 ## Composable variants
 

buildSrc/src/main/kotlin/Libs.kt

@@ -4,6 +4,8 @@ object Libs {
 
     const val compose_ui =  "androidx.compose.ui:ui:_"
 
+    const val compose_ui_util =  "androidx.compose.ui:ui-util:_"
+
     const val core = "androidx.core:core-ktx:_"
     const val savedstate = "androidx.savedstate:savedstate-ktx:_"
     const val lifecycle_runtime = "androidx.lifecycle:lifecycle-runtime-ktx:_"

buildSrc/src/main/kotlin/com/decathlon/vitamin/compose/VitaminComposeLibraryPlugin.kt

@@ -30,6 +30,8 @@ class VitaminComposeLibraryPlugin : Plugin<Project> {
             add("debugImplementation", Libs.lifecycle_runtime)
             add("debugImplementation", Libs.savedstate)
             add("debugImplementation", Libs.core)
+            add("debugImplementation", Libs.compose_ui)
+            add("debugImplementation", Libs.compose_ui_util)
             add("debugImplementation", Libs.poolingcontainer)
 
             add("androidTestImplementation", Libs.junit)

gradle/wrapper/gradle-wrapper.properties

@@ -2,4 +2,4 @@ distributionBase=GRADLE_USER_HOME
 distributionPath=wrapper/dists
 distributionUrl=https\://services.gradle.org/distributions/gradle-7.4.2-bin.zip
 zipStoreBase=GRADLE_USER_HOME
-zipStorePath=wrapper/dists
+zipStorePath=wrapper/dists

sample/build.gradle.kts

@@ -61,6 +61,7 @@ dependencies {
     implementation(project(":appbars"))
     implementation(project(":dividers"))
     implementation(project(":tabs"))
+    implementation(project(":skeletons"))
     implementation(project(":tags"))
     implementation(project(":ratings"))
     implementation(project(":prices"))

sample/src/main/java/com/decathlon/compose/sample/MainActivity.kt

@@ -19,6 +19,7 @@ import com.decathlon.compose.sample.screens.Prices
 import com.decathlon.compose.sample.screens.Progress
 import com.decathlon.compose.sample.screens.RadioButtons
 import com.decathlon.compose.sample.screens.Ratings
+import com.decathlon.compose.sample.screens.Skeletons
 import com.decathlon.compose.sample.screens.Switches
 import com.decathlon.compose.sample.screens.Tabs
 import com.decathlon.compose.sample.screens.Tags
@@ -55,6 +56,7 @@ class MainActivity : AppCompatActivity() {
                         Progress,
                         RadioButtons,
                         AppBars,
+                        Skeletons,
                         Tabs,
                         Tags,
                         Ratings,

sample/src/main/java/com/decathlon/compose/sample/screens/Skeletons.kt

@@ -0,0 +1,214 @@
+package com.decathlon.compose.sample.screens
+
+import androidx.compose.foundation.ScrollState
+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.verticalScroll
+import androidx.compose.material.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.decathlon.compose.sample.components.SampleScaffold
+import com.decathlon.vitamin.compose.foundation.VitaminTheme
+import com.decathlon.vitamin.compose.foundation.vtmnTypography
+import com.decathlon.vitamin.compose.skeletons.VitaminSkeletons
+import com.decathlon.vitamin.compose.skeletons.vtmnSkeleton
+
+object Skeletons : Screen {
+
+    override val name: String
+        get() = "Skeletons"
+
+    override val navigationKey: String
+        get() = "skeletons"
+
+    private const val smallWeight: Float = 1f
+    private const val mediumWeight: Float = 2f
+    private const val bigWeight: Float = 8f
+
+    @SuppressWarnings("LongMethod")
+    @Composable
+    override fun Screen() {
+        SampleScaffold(title = name) {
+            Column(
+                modifier = Modifier
+                    .padding(top = 16.dp, start = 16.dp, end = 16.dp)
+                    .verticalScroll(
+                        ScrollState(initial = 0)
+                    )
+            ) {
+                Text(
+                    text = "Classic list examples",
+                    style = vtmnTypography.h6,
+                    modifier = Modifier.padding(bottom = 16.dp)
+                )
+
+                repeat((0..2).count()) {
+                    Row(Modifier.padding(top = 16.dp)) {
+                        VitaminSkeletons.Rounded(
+                            modifier = Modifier.size(80.dp, 80.dp)
+                        )
+                        SkeletonTextLines(modifier = Modifier.weight(1f))
+                    }
+                }
+
+                Spacer(modifier = Modifier.height(32.dp))
+
+                repeat((0..2).count()) {
+                    Row(Modifier.padding(top = 16.dp)) {
+                        VitaminSkeletons.Rectangular(
+                            modifier = Modifier.size(80.dp, 80.dp),
+                            cornerRadius = 4.dp
+                        )
+
+                        SkeletonTextLines(modifier = Modifier.weight(1f))
+                    }
+                }
+
+                Text(
+                    text = "Other shape examples",
+                    style = vtmnTypography.h6,
+                    modifier = Modifier.padding(top = 32.dp)
+                )
+
+                Row {
+                    VitaminSkeletons.Rectangular(
+                        modifier = Modifier
+                            .padding(top = 32.dp)
+                            .height(60.dp)
+                            .weight(smallWeight)
+                    )
+                    Spacer(modifier = Modifier.weight(1f))
+                }
+
+                Row {
+                    VitaminSkeletons.Rectangular(
+                        modifier = Modifier
+                            .padding(top = 16.dp)
+                            .size(80.dp, 60.dp)
+                            .weight(mediumWeight),
+                        cornerRadius = 8.dp
+                    )
+                    Spacer(modifier = Modifier.weight(1f))
+                }
+
+                Row {
+                    VitaminSkeletons.Rectangular(
+                        modifier = Modifier
+                            .padding(top = 16.dp)
+                            .size(80.dp, 60.dp)
+                            .weight(bigWeight),
+                        cornerRadius = 30.dp
+                    )
+                    Spacer(modifier = Modifier.weight(1f))
+                }
+                Row {
+                    VitaminSkeletons.Rounded(
+                        modifier = Modifier
+                            .padding(top = 16.dp)
+                            .size(50.dp, 50.dp)
+                    )
+
+                    VitaminSkeletons.Rounded(
+                        modifier = Modifier
+                            .padding(top = 16.dp, start = 16.dp)
+                            .size(20.dp, 50.dp)
+                    )
+
+                    Column {
+                        VitaminSkeletons.Rounded(
+                            modifier = Modifier
+                                .padding(top = 16.dp, start = 16.dp)
+                                .size(50.dp, 20.dp)
+                        )
+
+                        Row {
+                            VitaminSkeletons.Rounded(
+                                modifier = Modifier
+                                    .padding(top = 8.dp, start = 16.dp)
+                                    .size(25.dp, 25.dp)
+                            )
+                            VitaminSkeletons.Rounded(
+                                modifier = Modifier
+                                    .padding(top = 8.dp, start = 8.dp)
+                                    .size(15.dp, 15.dp)
+                            )
+                        }
+                    }
+
+                    VitaminSkeletons.Rectangular(
+                        modifier = Modifier
+                            .padding(top = 16.dp, start = 16.dp)
+                            .size(50.dp, 50.dp)
+                    )
+
+                    VitaminSkeletons.Rectangular(
+                        modifier = Modifier
+                            .padding(top = 16.dp, start = 16.dp)
+                            .size(50.dp, 50.dp),
+                        cornerRadius = 4.dp
+                    )
+
+                    VitaminSkeletons.Rectangular(
+                        modifier = Modifier
+                            .padding(top = 16.dp, start = 16.dp)
+                            .size(50.dp, 50.dp),
+                        cornerRadius = 10.dp
+                    )
+                }
+
+                Box(
+                    modifier = Modifier
+                        .padding(top = 16.dp)
+                        .height(200.dp)
+                        .fillMaxWidth()
+                        .vtmnSkeleton()
+                )
+            }
+        }
+    }
+}
+
+@Composable
+fun SkeletonTextLines(modifier: Modifier) {
+    Column(
+        modifier
+            .padding(start = 16.dp)
+            .height(80.dp),
+        verticalArrangement = Arrangement.Center
+    ) {
+        VitaminSkeletons.Rectangular(
+            modifier = Modifier
+                .height(20.dp)
+                .fillMaxWidth(),
+            cornerRadius = 4.dp
+        )
+        Row {
+            VitaminSkeletons.Rectangular(
+                modifier = Modifier
+                    .padding(top = 8.dp)
+                    .height(20.dp)
+                    .fillMaxWidth()
+                    .weight(1f),
+                cornerRadius = 4.dp
+            )
+            Spacer(modifier = Modifier.weight(1f))
+        }
+    }
+}
+
+@Preview(showBackground = true)
+@Composable
+fun SkeletonPreview() {
+    VitaminTheme {
+        Skeletons.Screen()
+    }
+}

settings.gradle.kts

@@ -27,6 +27,7 @@ include(":ratings")
 include(":modals")
 include(":sample")
 include(":dividers")
+include(":skeletons")
 include(":tabs")
 include(":tags")
 include(":prices")

skeletons/.gitignore

@@ -0,0 +1 @@
+/build

skeletons/README.md

@@ -0,0 +1,88 @@
+# Skeleton components
+
+## Skeleton design specs
+
+You can find the design specs on [decathlon.design](https://www.decathlon.design/).
+
+## Usage
+
+If you want to use components of this module in your android mobile application, you should
+first add the Gradle dependency in your Gradle file:
+
+```kotlin
+implementation("com.decathlon.vitamin.compose:skeletons:<versions>")
+```
+
+### Rectangular
+
+
+```kotlin
+object VitaminSkeleton {
+    @Composable
+    fun Rectangular(
+        modifier: Modifier = Modifier,
+        colors: SkeletonColors = VitaminSkeletonColors.primary(),
+        cornerRadius: Dp = 0.dp
+    )
+}
+```
+
+This component draw a rectangle. You can add a modifier, but you can also customize the colors and the corner radius of the shape.
+
+```kotlin
+VitaminSkeleton.Rectangular()
+```
+
+Parameters | Descriptions
+-- | --
+`modifier: Modifier = Modifier` | The `Modifier` to be applied to the component
+`colors: SkeletonColors = VitaminSkeletonColors.primary()` | The colors of the background and the highlight effect
+`cornerRadius: Dp = 0.dp` | size of the rectangle shape corner radius, no radius by default
+
+### Rounded
+
+```kotlin
+object VitaminSkeleton {
+    @Composable
+    fun Rounded(
+        modifier: Modifier = Modifier,
+        colors: SkeletonColors = VitaminSkeletonColors.primary(),
+    )
+}
+```
+
+This component draw a round. You can add a modifier, but you can also customize the colors.
+
+```kotlin
+VitaminSkeleton.Rounded()
+```
+
+Parameters | Descriptions
+-- | --
+`modifier: Modifier = Modifier` | The `Modifier` to be applied to the component
+`colors: SkeletonColors = VitaminSkeletonColors.primary()` | The colors of the background and the highlight effect
+
+### Modifier extension
+
+```kotlin
+fun Modifier.vtmnSkeleton(
+    visible: Boolean = true,
+    colors: SkeletonColors = VitaminSkeletonColors.primary(),
+    shape: Shape = RectangleShape
+): Modifier
+```
+
+This Modifier extension allow to apply the shimmer effect on any @Composable
+
+```kotlin
+Box(
+    modifier = Modifier
+        .vtmnSkeleton()
+)
+```
+
+Parameters | Descriptions
+-- | --
+`visible: Boolean = true` | visibility state of the shimmer effect
+`colors: SkeletonColors = VitaminSkeletonColors.primary()` | The colors of the background and the highlight effect
+`shape: Shape = RectangleShape` | shape of the skeleton