Merge pull request #26 from LinX64/develop

Release v1.1.2
LinX64 · Apr 5, 2024 · 60b24e6 · 60b24e6
2 parents 0649c4f + ef0d26f
commit 60b24e6
Show file tree

Hide file tree

Showing 15 changed files with 171 additions and 70 deletions.
diff --git a/README.md b/README.md
@@ -2,18 +2,44 @@
 
 ![master CI](https://github.com/LinX64/Reusable/actions/workflows/publish.yaml/badge.svg)
 ![develop CI](https://github.com/LinX64/Reusable/actions/workflows/ci.yaml/badge.svg)
+[![Maven Central](https://img.shields.io/maven-central/v/io.github.linx64/reusablecomponents.svg)](https://central.sonatype.com/artifact/io.github.linx64/reusablecomponents/overview)
 
-This library is a treasure trove of reusable components tailored for Jetpack Compose, designed to simplify the creation of complex interfaces. It's your go-to toolkit for crafting visually stunning UIs effortlessly. So, let's cut to the chase and unleash the magic! 😃
+This library is a treasure trove of reusable components tailored for Jetpack Compose, designed to
+simplify the creation of complex interfaces. It's your go-to toolkit for crafting visually stunning
+UIs effortlessly. So, let's cut to the chase and unleash the magic! 😃
+
+## Installation
+
+To use the library, add the following line of code to your `build.gradle` file if you are using
+Kotlin DSL:
+
+```Kotlin
+implementation("io.github.linx64:reusablecomponents:<version>")
+```
+
+Or this for Groovy:
+
+```Groovy
+implementation 'io.github.linx64:reusablecomponents:<version>'
+```
+
+Version Catalog:
+
+```Kotlin-dsl
+reusablecomponents_version = <version>
+reusableComponents = { group = "io.github.linx64", name = "reusablecomponents", version.ref = "reuseableComponents" }
+```
 
 ## Components
 
 Currently, the library contains the following components:
 
-- Containers
-- Buttons
-- Columns
-- TODO: Preview
-- TODO: Spacers
+- [Containers](https://github.com/LinX64/Reusable/tree/develop/reusablecomponents/src/main/kotlin/com/client/reusablecomponents/containers)
+- [Buttons](https://github.com/LinX64/Reusable/tree/develop/reusablecomponents/src/main/kotlin/com/client/reusablecomponents/buttons)
+- [Columns](https://github.com/LinX64/Reusable/blob/develop/reusablecomponents/src/main/kotlin/com/client/reusablecomponents/containers/CenteredColumn.kt)
+- [Preview](https://github.com/LinX64/Reusable/tree/develop/reusablecomponents/src/main/kotlin/com/client/reusablecomponents/previews)
+- [Spacers](https://github.com/LinX64/Reusable/tree/develop/reusablecomponents/src/main/kotlin/com/client/reusablecomponents/spacers)
+- Other necessary components will be added soon.
 
 ## Usage
 
@@ -23,32 +49,16 @@ let's say you want to have a Scrollable screen with a few Buttons:
 ```kotlin
 ScrollableScreen {
     PrimaryButton(text = R.string.app_name, onClick = {})
-
-    Spacer(modifier = Modifier.height(16.dp))
-
-    PrimaryButton(text = R.string.app_name, onClick = {})
-
-    Spacer(modifier = Modifier.height(16.dp))
-
-    PrimaryButton(text = R.string.app_name, onClick = {})
-
     Spacer(modifier = Modifier.height(16.dp))
-
-    PrimaryButton(text = R.string.app_name, onClick = {})
 }
 ```
 
 And that's it! You have a scrollable screen with a few buttons. You can customize the container by
 passing your own `modifier` to it. The same goes for the buttons, you can pass your own `modifier`
 to it.
 
-This is how it will look like:
-
-<img src="https://i.imgur.com/9AfnPTk.png" width="250" />
-
-## Installation
-
-...I will add this section once it is published to Maven Central.
+**Important note:** To use the Preview components, you'll nned to add your own theme first, then use the
+components to create your UI.
 
 ## License
 

diff --git a/app/build.gradle.kts b/app/build.gradle.kts
@@ -65,8 +65,6 @@ android {
 }
 
 dependencies {
-    implementation(projects.reusablecomponents)
-
     implementation(libs.androidx.core.ktx)
     implementation(libs.androidx.lifecycle.runtime.ktx)
     implementation(libs.androidx.activity.compose)
@@ -77,6 +75,10 @@ dependencies {
     implementation(libs.androidx.compose.material3)
     implementation(libs.androidx.compose.material.iconsExtended)
 
+    // The library
+    //implementation(libs.reusableComponents)
+    implementation(project(":reusablecomponents"))
+
     detektPlugins(libs.detekt.formatting)
 
     debugImplementation(libs.androidx.ui.test.manifest)

diff --git a/app/src/main/java/com/client/reusable/ui/screens/HomeScreen.kt b/app/src/main/java/com/client/reusable/ui/screens/HomeScreen.kt
@@ -6,12 +6,14 @@ import androidx.compose.foundation.layout.height
 import androidx.compose.material3.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.client.reusable.R
+import com.client.reusable.ui.theme.ReusableTheme
 import com.client.reusablecomponents.buttons.PrimaryButton
 import com.client.reusablecomponents.containers.CenteredColumn
-import com.client.reusablecomponents.preview.AppScreenComponent
+import com.client.reusablecomponents.previews.AppScreenComponent
+import com.client.reusablecomponents.previews.MultiThemePreviews
+import com.client.reusablecomponents.spacers.FillHeightSpacer
 
 @Composable
 fun HomeScreen() {
@@ -21,15 +23,19 @@ fun HomeScreen() {
 
             Spacer(modifier = Modifier.height(16.dp))
 
+            FillHeightSpacer()
+
             PrimaryButton(text = R.string.app_name, onClick = {})
         }
     }
 }
 
-@Preview(showBackground = true)
+@MultiThemePreviews
 @Composable
 private fun HomePreview() {
-    AppScreenComponent {
-        HomeScreen()
+    ReusableTheme {
+        AppScreenComponent {
+            HomeScreen()
+        }
     }
 }
diff --git a/app/src/main/java/com/client/reusable/ui/screens/MyApp.kt b/app/src/main/java/com/client/reusable/ui/screens/MyApp.kt
@@ -8,7 +8,7 @@ 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 com.client.reusablecomponents.previews.DevicePreviews
 
 @OptIn(ExperimentalMaterial3Api::class)
 @Composable
@@ -30,7 +30,7 @@ internal fun MyApp() {
     }
 }
 
-@Preview
+@DevicePreviews
 @Composable
 private fun MyAppPreview() {
     MyApp()

diff --git a/gradle/libs.versions.toml b/gradle/libs.versions.toml
@@ -8,6 +8,7 @@ composeBom = "2024.04.00"
 material-3 = "1.2.1"
 detekt = "1.23.6"
 mavenPublish = "0.28.0"
+reuseableComponents = "1.1.1"
 
 [libraries]
 androidx-core-ktx = { group = "androidx.core", name = "core-ktx", version.ref = "coreKtx" }
@@ -22,6 +23,7 @@ androidx-ui-test-manifest = { group = "androidx.compose.ui", name = "ui-test-man
 androidx-compose-material-iconsExtended = { group = "androidx.compose.material", name = "material-icons-extended" }
 androidx-compose-material3 = { group = "androidx.compose.material3", name = "material3", version.ref = "material-3" }
 detekt-formatting = { group = "io.gitlab.arturbosch.detekt", name = "detekt-formatting", version.ref = "detekt" }
+reusableComponents = { group = "io.github.linx64", name = "reusablecomponents", version.ref = "reuseableComponents" }
 
 [plugins]
 android-application = { id = "com.android.application", version.ref = "agp" }

diff --git a/reusablecomponents/src/main/kotlin/com/client/reusablecomponents/buttons/PrimaryButton.kt b/reusablecomponents/src/main/kotlin/com/client/reusablecomponents/buttons/PrimaryButton.kt
@@ -10,9 +10,9 @@ import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.font.FontWeight
-import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import com.client.reusablecomponents.containers.CenteredColumn
+import com.client.reusablecomponents.previews.MultiThemePreviews
 import io.github.linx64.reusablecomponents.R
 
 @Composable
@@ -34,8 +34,8 @@ fun PrimaryButton(
     }
 }
 
+@MultiThemePreviews
 @Composable
-@Preview(showBackground = true)
 private fun PrimaryButtonPreview() {
     CenteredColumn {
         PrimaryButton(

diff --git a/reusablecomponents/src/main/kotlin/com/client/reusablecomponents/buttons/SecondaryButton.kt b/reusablecomponents/src/main/kotlin/com/client/reusablecomponents/buttons/SecondaryButton.kt
@@ -12,10 +12,7 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.font.FontWeight
-import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
-import com.client.reusablecomponents.containers.CenteredColumn
-import io.github.linx64.reusablecomponents.R
 
 @Composable
 fun SecondaryButton(
@@ -45,14 +42,3 @@ fun SecondaryButton(
         )
     }
 }
-
-@Composable
-@Preview(showBackground = true)
-private fun SecondaryButtonPreview() {
-    CenteredColumn {
-        SecondaryButton(
-            text = R.string.cancel,
-            onClick = {}
-        )
-    }
-}
diff --git a/...ablecomponents/src/main/kotlin/com/client/reusablecomponents/containers/CenteredColumn.kt b/...ablecomponents/src/main/kotlin/com/client/reusablecomponents/containers/CenteredColumn.kt
@@ -10,7 +10,7 @@ import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
-import com.client.reusablecomponents.preview.AppScreenComponent
+import com.client.reusablecomponents.previews.AppScreenComponent
 
 @Composable
 fun CenteredColumn(

diff --git a/reusablecomponents/src/main/kotlin/com/client/reusablecomponents/containers/Screen.kt b/reusablecomponents/src/main/kotlin/com/client/reusablecomponents/containers/Screen.kt
@@ -16,7 +16,7 @@ import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
-import com.client.reusablecomponents.preview.AppScreenComponent
+import com.client.reusablecomponents.previews.AppScreenComponent
 
 @Composable
 fun Screen(

diff --git a/...lecomponents/src/main/kotlin/com/client/reusablecomponents/containers/ScrollableScreen.kt b/...lecomponents/src/main/kotlin/com/client/reusablecomponents/containers/ScrollableScreen.kt
@@ -18,7 +18,7 @@ import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
-import com.client.reusablecomponents.preview.AppScreenComponent
+import com.client.reusablecomponents.previews.AppScreenComponent
 
 @Composable
 fun ScrollableScreen(

diff --git a/...eusablecomponents/preview/AppComponent.kt → ...usablecomponents/previews/AppComponent.kt b/...eusablecomponents/preview/AppComponent.kt → ...usablecomponents/previews/AppComponent.kt
@@ -1,29 +1,36 @@
-package com.client.reusablecomponents.preview
+package com.client.reusablecomponents.previews
 
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.padding
+import androidx.compose.material3.Surface
 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.client.reusablecomponents.buttons.PrimaryButton
 import io.github.linx64.reusablecomponents.R
 
+/**
+ * A component that wraps the content in a [Surface] and applies padding.
+ * The content is placed in a [Column].
+ * IMPORTANT: Remember to add your own Theme while using this component.
+ */
 @Composable
 fun AppComponent(
     modifier: Modifier = Modifier,
     content: @Composable () -> Unit,
 ) {
-    Column(
-        modifier = Modifier
-            .padding(16.dp)
-            .then(modifier),
-    ) {
-        content()
+    Surface {
+        Column(
+            modifier = Modifier
+                .padding(16.dp)
+                .then(modifier),
+        ) {
+            content()
+        }
     }
 }
 
-@Preview(showBackground = true)
+@MultiThemePreviews
 @Composable
 private fun AppPreview() {
     AppComponent {

diff --git a/...ecomponents/preview/AppScreenComponent.kt → ...components/previews/AppScreenComponent.kt b/...ecomponents/preview/AppScreenComponent.kt → ...components/previews/AppScreenComponent.kt
@@ -1,31 +1,40 @@
-package com.client.reusablecomponents.preview
+package com.client.reusablecomponents.previews
 
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.material3.Surface
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.tooling.preview.Preview
 import com.client.reusablecomponents.buttons.PrimaryButton
 import com.client.reusablecomponents.containers.CenteredColumn
 import io.github.linx64.reusablecomponents.R
 
+/**
+ * A component that wraps the content in a [Surface] and centers the content.
+ * The content is placed in a [Column].
+ * IMPORTANT: Remember to add your own Theme while using this component.
+ */
 @Composable
 fun AppScreenComponent(
     modifier: Modifier = Modifier,
     content: @Composable () -> Unit,
 ) {
-    Column(
-        modifier = Modifier
-            .fillMaxSize()
-            .then(modifier),
+    Surface(
+        modifier = Modifier.fillMaxSize(),
     ) {
-        CenteredColumn {
-            content()
+        Column(
+            modifier = Modifier
+                .fillMaxSize()
+                .then(modifier),
+        ) {
+            CenteredColumn {
+                content()
+            }
         }
     }
 }
 
-@Preview(showBackground = true)
+@MultiThemePreviews
 @Composable
 private fun AppScreenComponentPreview() {
     AppScreenComponent {

diff --git a/reusablecomponents/src/main/kotlin/com/client/reusablecomponents/previews/DevicePreviews.kt b/reusablecomponents/src/main/kotlin/com/client/reusablecomponents/previews/DevicePreviews.kt
@@ -0,0 +1,26 @@
+package com.client.reusablecomponents.previews
+
+import androidx.compose.ui.tooling.preview.Preview
+
+/**
+ * Multi preview annotation that represents various device sizes.
+ * Add this annotation to a composable to render various devices.
+ */
+
+@Preview(
+    name = "phone",
+    device = "spec:shape=Normal,width=360,height=640,unit=dp,dpi=480"
+)
+@Preview(
+    name = "landscape",
+    device = "spec:shape=Normal,width=640,height=360,unit=dp,dpi=480"
+)
+@Preview(
+    name = "foldable",
+    device = "spec:shape=Normal,width=673,height=841,unit=dp,dpi=480"
+)
+@Preview(
+    name = "tablet",
+    device = "spec:shape=Normal,width=1280,height=800,unit=dp,dpi=480"
+)
+annotation class DevicePreviews