Add JS target (#58)

* Add JS target

* fix jvm target on Android

* remove old gradle properties that no longer have an effect

* make dokka work on multiplatform

* remove compose.foundation api

.gitignore

@@ -1,4 +1,4 @@
 /.idea/
 /.gradle
 /local.properties
-/build/*
+**/build

color-picker/build.gradle.kts

@@ -1,5 +1,3 @@
-import org.jetbrains.compose.compose
-
 plugins {
     kotlin("multiplatform")
     id("org.jetbrains.dokka") version "1.7.20"
@@ -13,17 +11,15 @@ kotlin {
     android("android") {
         publishLibraryVariants("release")
     }
-    jvm {
-        compilations.all {
-            kotlinOptions.jvmTarget = "11"
-        }
+    jvm()
+    js(IR) {
+        browser()
     }
 
     sourceSets {
         val commonMain by getting {
             dependencies {
                 api(compose.runtime)
-                api(compose.foundation)
                 implementation(compose.material)
                 implementation("com.github.ajalt.colormath:colormath:3.2.0")
             }
@@ -45,29 +41,40 @@ kotlin {
         }
         val jvmTest by getting
     }
+
+    tasks.withType<org.jetbrains.kotlin.gradle.tasks.KotlinCompile> {
+        kotlinOptions.jvmTarget = "11"
+    }
 }
 
 android {
     namespace = "com.godaddy.common.colorpicker"
     compileSdk = 33
-    sourceSets["main"].manifest.srcFile("src/androidMain/AndroidManifest.xml")
     defaultConfig {
         minSdk = 21
-        targetSdk = 33
     }
     compileOptions {
         sourceCompatibility = JavaVersion.VERSION_11
         targetCompatibility = JavaVersion.VERSION_11
     }
 }
 
-tasks {
-    create<Jar>("javadocJar") {
-        dependsOn(dokkaJavadoc)
-        archiveClassifier.set("javadoc")
-        from(dokkaJavadoc.get().outputDirectory)
-    }
+val dokkaOutputDir = buildDir.resolve("dokka")
+
+tasks.dokkaHtml.configure {
+    outputDirectory.set(dokkaOutputDir)
 }
+
+val deleteDokkaOutputDir by tasks.register<Delete>("deleteDokkaOutputDirectory") {
+    delete(dokkaOutputDir)
+}
+
+val javadocJar = tasks.register<Jar>("javadocJar") {
+    dependsOn(deleteDokkaOutputDir, tasks.dokkaHtml)
+    archiveClassifier.set("javadoc")
+    from(dokkaOutputDir)
+}
+
 val sonatypeUsername: String? = System.getenv("ORG_GRADLE_PROJECT_mavenCentralUsername")
 val sonatypePassword: String? = System.getenv("ORG_GRADLE_PROJECT_mavenCentralPassword")
 

gradle.properties

@@ -20,6 +20,5 @@ android.enableJetifier=true
 # Kotlin code style for this project: "official" or "obsolete":
 kotlin.code.style=official
 
-
-kotlin.mpp.enableGranularSourceSetsMetadata=true
-kotlin.native.enableDependencyPropagation=false
+kotlin.jvm.target.validation.mode=error
+org.jetbrains.compose.experimental.jscanvas.enabled=true

jsApp/build.gradle.kts

@@ -0,0 +1,22 @@
+plugins {
+    kotlin("multiplatform")
+    id("org.jetbrains.compose") version "1.2.2"
+}
+
+kotlin {
+    js(IR) {
+        browser()
+        binaries.executable()
+    }
+    sourceSets {
+        val jsMain by getting  {
+            dependencies {
+                implementation(project(":color-picker"))
+            }
+        }
+    }
+}
+
+compose.experimental {
+    web.application {}
+}

jsApp/src/jsMain/kotlin/ClassicColorPickerScreen.kt

@@ -0,0 +1,33 @@
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.height
+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.unit.dp
+import com.godaddy.android.colorpicker.ClassicColorPicker
+import com.godaddy.android.colorpicker.HsvColor
+
+@Composable
+fun ClassicColorPickerScreen() {
+    Column {
+        var currentColor by remember {
+            mutableStateOf(HsvColor.from(Color.Red))
+        }
+        ColorPreviewInfo(currentColor = currentColor.toColor())
+        ClassicColorPicker(
+            modifier = Modifier
+                .height(300.dp)
+                .padding(16.dp),
+            color = currentColor,
+            onColorChanged = { hsvColor: HsvColor ->
+                // Triggered when the color changes, do something with the newly picked color here!
+                currentColor = hsvColor
+            }
+        )
+    }
+}

jsApp/src/jsMain/kotlin/HarmonyColorPickerScreen.kt

@@ -0,0 +1,95 @@
+import androidx.compose.foundation.Canvas
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.PaddingValues
+import androidx.compose.foundation.layout.defaultMinSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.wrapContentHeight
+import androidx.compose.foundation.lazy.grid.GridCells
+import androidx.compose.foundation.lazy.grid.LazyVerticalGrid
+import androidx.compose.foundation.lazy.grid.items
+import androidx.compose.material.Text
+import androidx.compose.material.TextButton
+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.unit.dp
+import com.godaddy.android.colorpicker.HsvColor
+import com.godaddy.android.colorpicker.harmony.ColorHarmonyMode
+import com.godaddy.android.colorpicker.harmony.HarmonyColorPicker
+
+@Composable
+fun HarmonyColorPickerScreen() {
+    Column(modifier = Modifier.padding(8.dp)) {
+        var currentColor by remember {
+            mutableStateOf(HsvColor.from(Color.Red))
+        }
+        var extraColors by remember {
+            mutableStateOf(emptyList<HsvColor>())
+        }
+        ColorPaletteBar(
+            modifier = Modifier.fillMaxWidth().wrapContentHeight(),
+            colors = listOf(currentColor).plus(extraColors)
+        )
+        var expanded by remember {
+            mutableStateOf(false)
+        }
+        var harmonyMode by remember {
+            mutableStateOf(ColorHarmonyMode.ANALOGOUS)
+        }
+        TextButton(onClick = {
+            expanded = true
+        }) {
+            Text(harmonyMode.name)
+        }
+//        DropdownMenu(expanded, onDismissRequest = {
+//            expanded = false
+//        }) {
+//            ColorHarmonyMode.values().forEach {
+//                DropdownMenuItem(onClick = {
+//                    harmonyMode = it
+//                    expanded = false
+//                }) {
+//                    Text(it.name)
+//                }
+//            }
+//        }
+        HarmonyColorPicker(
+            harmonyMode = harmonyMode,
+            modifier = Modifier.defaultMinSize(minHeight = 300.dp, minWidth = 300.dp),
+            color = currentColor,
+            onColorChanged = { hsvColor ->
+                currentColor = hsvColor
+                extraColors = hsvColor.getColors(harmonyMode)
+            }
+        )
+    }
+}
+
+@Composable
+fun ColorPaletteBar(
+    modifier: Modifier = Modifier,
+    colors: List<HsvColor>
+) {
+    LazyVerticalGrid(
+        horizontalArrangement = Arrangement.spacedBy(4.dp),
+        verticalArrangement = Arrangement.spacedBy(4.dp),
+        columns = GridCells.Adaptive(48.dp),
+        modifier = modifier
+            .fillMaxWidth(),
+        contentPadding = PaddingValues(16.dp),
+        content = {
+            items(colors) { color ->
+                Canvas(modifier = Modifier.size(48.dp)) {
+                    drawCircle(color.toColor())
+                }
+            }
+        }
+    )
+}

jsApp/src/jsMain/kotlin/Main.js.kt

@@ -0,0 +1,107 @@
+/*
+* Copyright 2020-2021 JetBrains s.r.o. and respective authors and developers.
+* Use of this source code is governed by the Apache 2.0 license that can be found in the LICENSE.txt file.
+*/
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Column
+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.material.MaterialTheme
+import androidx.compose.material.Surface
+import androidx.compose.material.TabRow
+import androidx.compose.material.Text
+import androidx.compose.material.TopAppBar
+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.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.window.Window
+import org.jetbrains.skiko.wasm.onWasmReady
+
+fun main() {
+    onWasmReady {
+        Window("Compose Color Picker") {
+            MaterialTheme {
+                Surface(color = MaterialTheme.colors.background) {
+                    Column {
+                        TopAppBar(title = {
+                            Text("Compose Desktop Color Pickers")
+                        })
+                        // Here is how to add a Color Picker to your compose tree:
+
+                        var currentColorPicker by remember { mutableStateOf(ColorPicker.CLASSIC) }
+                        TabRow(
+                            currentColorPicker.ordinal,
+                            tabs = {
+                                Text(
+                                    "Classic Picker",
+                                    modifier =
+                                    Modifier.clickable {
+                                        currentColorPicker = ColorPicker.CLASSIC
+                                    }.padding(16.dp),
+                                    textAlign = TextAlign.Center
+                                )
+                                Text(
+                                    "Harmony Picker",
+                                    modifier = Modifier.clickable {
+                                        currentColorPicker = ColorPicker.HARMONY
+                                    }.padding(16.dp),
+                                    textAlign = TextAlign.Center
+                                )
+                            },
+                            contentColor = Color.White
+                        )
+                        when (currentColorPicker) {
+                            ColorPicker.CLASSIC -> {
+                                ClassicColorPickerScreen()
+                            }
+                            ColorPicker.HARMONY -> {
+                                HarmonyColorPickerScreen()
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+
+@Composable
+fun ColorPreviewInfo(currentColor: Color) {
+    Column(modifier = Modifier.fillMaxWidth()) {
+        Text(
+            modifier = Modifier.padding(16.dp),
+            text = "a: ${currentColor.alpha} \n" +
+                "r: ${currentColor.red} \n" +
+                "g: ${currentColor.green} \n" +
+                "b: ${currentColor.blue}"
+        )
+        Spacer(
+            modifier = Modifier
+                .background(
+                    currentColor,
+                    shape = CircleShape
+                )
+                .size(48.dp)
+                .align(Alignment.CenterHorizontally)
+        )
+        Spacer(Modifier.height(16.dp))
+    }
+}
+
+enum class ColorPicker {
+    CLASSIC,
+    HARMONY;
+}

jsApp/src/jsMain/resources/index.html

@@ -0,0 +1,32 @@
+<!--
+  ~ Copyright 2021 The Android Open Source Project
+  ~
+  ~ Licensed under the Apache License, Version 2.0 (the "License");
+  ~ you may not use this file except in compliance with the License.
+  ~ You may obtain a copy of the License at
+  ~
+  ~      http://www.apache.org/licenses/LICENSE-2.0
+  ~
+  ~ Unless required by applicable law or agreed to in writing, software
+  ~ distributed under the License is distributed on an "AS IS" BASIS,
+  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  ~ See the License for the specific language governing permissions and
+  ~ limitations under the License.
+  -->
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>compose color picker web demo</title>
+    <script src="skiko.js"> </script>
+    <link type="text/css" rel="stylesheet" href="styles.css" />
+</head>
+<body>
+<h1>compose color picker web demo</h1>
+<div>
+    <canvas id="ComposeTarget" width="800" height="600"></canvas>
+</div>
+<script src="jsApp.js"> </script>
+</body>
+</html>

jsApp/src/jsMain/resources/style.css

@@ -0,0 +1,8 @@
+#root {
+    width: 100%;
+    height: 100vh;
+}
+
+#root > .compose-web-column > div {
+    position: relative;
+}