Update README and some component previews

README.md

@@ -0,0 +1,72 @@
+# Adapt
+![badge][badge-android] ![badge][badge-ios] ![badge][badge-js] ![badge][badge-wasm] ![badge][badge-jvm]
+
+Adapt is a Compose-based UI component library that provides you components from various commonly
+used design systems on different platforms like Material 3 (for Android & Web), Cupertino (for
+iOS & macOS), and WinUI 3 (for Windows).
+
+Adapt provides a Flutter-like experience where you can mix-and-match UI components between platforms
+to achieve your desired UI/UX output(s) (e.g. using Cupertino components on Android devices and 
+Material components on Apple devices).
+
+## Types of components
+Adapt offers the following 2 types of composables/components:
+1. **Platform-specific** - These look the same on all platforms (e.g. `WindowsButton`, `CupertinoSpinner`)
+2. **Platform-agnostic** - These look native-like on every platform (e.g. `AdaptButton`, `AdaptCircularIndicator`)
+
+## Available Components ✅
+
+| Name                | Image                                                     | Platform-agnostic variant |
+|---------------------|-----------------------------------------------------------|---------------------------|
+| CupertinoSlider     | ![CupertinoSlider](/assets/cupertino_sliders.png)         | AdaptSlider               |
+| CupertinoSpinner    | ![CupertinoSpinner](/assets/cupertino_spinner.png)        | AdaptCircularIndicator    |
+| IOSButton           | ![IOSButton](/assets/iOS_button.png)                      | AdaptButton               |
+| IOSToggle           | ![IOSToggle](/assets/iOS_toggle.png)                      | AdaptSwitch               |
+| MacOSButton         | ![MacOSButton](/assets/macOS_button.png)                  | AdaptButton               |
+| MacOSSwitch         | ![MacOSSwitch](/assets/macOS_switch.png)                  | AdaptSwitch               |
+| WindowsButton       | ![WindowsButton](/assets/windows_button.png)              | AdaptButton               |
+| WindowsProgressRing | ![WindowsProgressRing](/assets/windows_progress_ring.png) | AdaptCircularIndicator    |
+| WindowsSlider       | ![WindowsSlider](/assets/windows_slider.png)              | AdaptSlider               |
+| WindowsToggleSwitch | ![WindowsToggleSwitch](/assets/windows_toggle_switch.png) | AdaptSwitch               |
+
+## Planned Components 🚧
+The long term goal of this library is to recreate all components from major design systems like
+`Material`, `Cupertino`, `WinUI`, etc. to allow developers to seamlessly create multiplatform apps 
+that look, feel, and behave native-like.
+
+Expected upcoming components are: `Checkbox`, `TextField`, and `Date/Time Pickers`.
+
+## Run Demo/Sample
+This repository also contains a sample Compose Multiplatform app that showcases the components
+provided by this library. You can check out this repository and simply run the app, but before you
+do that, please make sure to:
+
+ - check your system with [KDoctor](https://github.com/Kotlin/kdoctor)
+ - install JDK 17 on your machine
+ - add `local.properties` file to the project root and set a path to Android SDK there
+ - run `./gradlew podInstall` in the project root
+
+### Android
+To run the application on android device/emulator:  
+ - open project in Android Studio and run imported android run configuration
+
+To build the application bundle:
+ - run `./gradlew :sample:composeApp:assembleDebug`
+ - find `.apk` file in `sample/composeApp/build/outputs/apk/debug/composeApp-debug.apk`
+
+### Desktop
+Run the desktop application: `./gradlew :sample:composeApp:run`
+
+### iOS
+To run the application on iPhone device/simulator:
+ - Open `sample/iosApp/iosApp.xcworkspace` in Xcode and run standard configuration
+ - Or use [Kotlin Multiplatform Mobile plugin](https://plugins.jetbrains.com/plugin/14936-kotlin-multiplatform-mobile) for Android Studio
+
+### Browser
+Run the browser application: `./gradlew :sample:composeApp:jsBrowserDevelopmentRun`
+
+[badge-android]: http://img.shields.io/badge/-android-6EDB8D.svg?style=flat
+[badge-ios]: http://img.shields.io/badge/-ios-CDCDCD.svg?style=flat
+[badge-js]: http://img.shields.io/badge/-js-F8DB5D.svg?style=flat
+[badge-jvm]: http://img.shields.io/badge/-jvm-DB413D.svg?style=flat
+[badge-wasm]: https://img.shields.io/badge/-wasm-624FE8.svg?style=flat

adapt/build.gradle.kts

@@ -69,6 +69,7 @@ kotlin {
                 implementation(compose.components.resources)
                 implementation(compose.foundation)
                 implementation(compose.material3)
+                implementation(compose.materialIconsExtended)
                 implementation(compose.runtime)
                 implementation(compose.ui)
             }

adapt/src/androidMain/kotlin/design/adapt/previews/cupertino/CupertinoSlider.kt

@@ -19,18 +19,18 @@ package design.adapt.previews.cupertino
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
-import androidx.compose.foundation.layout.fillMaxSize
-import androidx.compose.foundation.layout.wrapContentSize
+import androidx.compose.foundation.layout.padding
 import androidx.compose.material.icons.Icons
-import androidx.compose.material.icons.filled.AddCircle
-import androidx.compose.material.icons.filled.Menu
+import androidx.compose.material.icons.automirrored.filled.VolumeMute
+import androidx.compose.material.icons.automirrored.filled.VolumeUp
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableFloatStateOf
 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.alpha
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
@@ -45,9 +45,8 @@ private fun CupertinoSliderPreview() {
     MacOSTheme {
         Column(
             modifier = Modifier
-                .fillMaxSize()
                 .background(Color.White)
-                .wrapContentSize(),
+                .padding(16.dp),
             horizontalAlignment = Alignment.CenterHorizontally,
             verticalArrangement = Arrangement.spacedBy(32.dp),
         ) {
@@ -57,13 +56,19 @@ private fun CupertinoSliderPreview() {
                 steps = 4,
                 leadingIcon = {
                     AdaptIcon(
-                        imageVector = Icons.Default.Menu,
+                        modifier = Modifier
+                            .padding(end = 8.dp)
+                            .alpha(0.7f),
+                        imageVector = Icons.AutoMirrored.Filled.VolumeMute,
                         contentDescription = null
                     )
                 },
                 trailingIcon = {
                     AdaptIcon(
-                        imageVector = Icons.Default.AddCircle,
+                        modifier = Modifier
+                            .padding(start = 8.dp)
+                            .alpha(0.7f),
+                        imageVector = Icons.AutoMirrored.Filled.VolumeUp,
                         contentDescription = null
                     )
                 },

adapt/src/androidMain/kotlin/design/adapt/previews/cupertino/IOSToggle.kt

@@ -16,9 +16,13 @@
 
 package design.adapt.previews.cupertino
 
+import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.padding
 import androidx.compose.runtime.Composable
+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 design.adapt.cupertino.IOSTheme
@@ -28,7 +32,12 @@ import design.adapt.cupertino.IOSToggle
 @Composable
 private fun IOSTogglePreview() {
     IOSTheme {
-        Column(verticalArrangement = Arrangement.spacedBy(16.dp)) {
+        Column(
+            modifier = Modifier
+                .background(Color.White)
+                .padding(8.dp),
+            verticalArrangement = Arrangement.spacedBy(16.dp)
+        ) {
             IOSToggle(checked = false, onCheckedChange = {})
             IOSToggle(checked = true, onCheckedChange = {})
         }

adapt/src/androidMain/kotlin/design/adapt/previews/cupertino/MacOSSwitch.kt

@@ -16,13 +16,15 @@
 
 package design.adapt.previews.cupertino
 
+import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.padding
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.setValue
 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 design.adapt.cupertino.MacOSSwitch
@@ -34,7 +36,9 @@ private fun MacOSSwitchPreview() {
     var checked by remember { mutableStateOf(true) }
     MacOSTheme {
         MacOSSwitch(
-            modifier = Modifier.padding(8.dp),
+            modifier = Modifier
+                .background(Color.White)
+                .padding(8.dp),
             checked = checked,
             onCheckedChange = { checked = it },
         )