feat: add docs app and color picker, index.html

4 files changed, 452 insertions, 0 deletions

diff --git a/docs/src/wasmJsMain/kotlin/docs/DocsApp.kt b/docs/src/wasmJsMain/kotlin/docs/DocsApp.kt
new file mode 100644
index 0000000..419b14a
--- /dev/null
+++ b/docs/src/wasmJsMain/kotlin/docs/DocsApp.kt
@@ -0,0 +1,91 @@
+/*
+ * Designed and developed by 2022 skydoves (Jaewoong Eum)
+ *
+ * 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.
+ */
+package docs
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxSize
+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 docs.component.DocsSidebar
+import docs.component.ThemeColorPickerDialog
+import docs.navigation.DocsRoute
+import docs.screen.ApiAlphaSliderScreen
+import docs.screen.ApiAlphaTileScreen
+import docs.screen.ApiBrightnessSliderScreen
+import docs.screen.ApiControllerScreen
+import docs.screen.ApiHsvColorPickerScreen
+import docs.screen.ApiImageColorPickerScreen
+import docs.screen.GettingStartedScreen
+import docs.screen.HomeScreen
+import docs.screen.InstallationScreen
+import docs.screen.PlatformSupportScreen
+import docs.screen.PlaygroundScreen
+import docs.theme.DefaultPrimaryColor
+import docs.theme.DocsTheme
+
+@Composable
+fun DocsApp() {
+  var isDarkTheme by remember { mutableStateOf(true) }
+  var primaryColor by remember { mutableStateOf(DefaultPrimaryColor) }
+  var showColorPicker by remember { mutableStateOf(false) }
+  var currentRoute by remember { mutableStateOf<DocsRoute>(DocsRoute.Home) }
+
+  DocsTheme(darkTheme = isDarkTheme, primaryColor = primaryColor) {
+    Row(modifier = Modifier.fillMaxSize().background(DocsTheme.colors.background)) {
+      DocsSidebar(
+        currentRoute = currentRoute,
+        onNavigate = { currentRoute = it },
+        isDarkTheme = isDarkTheme,
+        onToggleTheme = { isDarkTheme = !isDarkTheme },
+        primaryColor = primaryColor,
+        onOpenColorPicker = { showColorPicker = true },
+      )
+
+      Box(modifier = Modifier.weight(1f).fillMaxSize()) {
+        when (currentRoute) {
+          DocsRoute.Home -> HomeScreen(onNavigate = { currentRoute = it })
+          DocsRoute.GettingStarted -> GettingStartedScreen()
+          DocsRoute.Installation -> InstallationScreen()
+          DocsRoute.PlatformSupport -> PlatformSupportScreen()
+          DocsRoute.ApiHsvColorPicker -> ApiHsvColorPickerScreen()
+          DocsRoute.ApiImageColorPicker -> ApiImageColorPickerScreen()
+          DocsRoute.ApiAlphaSlider -> ApiAlphaSliderScreen()
+          DocsRoute.ApiBrightnessSlider -> ApiBrightnessSliderScreen()
+          DocsRoute.ApiAlphaTile -> ApiAlphaTileScreen()
+          DocsRoute.ApiController -> ApiControllerScreen()
+          DocsRoute.Playground -> PlaygroundScreen()
+        }
+      }
+    }
+
+    if (showColorPicker) {
+      ThemeColorPickerDialog(
+        currentColor = primaryColor,
+        onColorChanged = { primaryColor = it },
+        onDismiss = { finalColor ->
+          primaryColor = finalColor
+          showColorPicker = false
+        },
+      )
+    }
+  }
+}
diff --git a/docs/src/wasmJsMain/kotlin/docs/Main.kt b/docs/src/wasmJsMain/kotlin/docs/Main.kt
new file mode 100644
index 0000000..60e2a34
--- /dev/null
+++ b/docs/src/wasmJsMain/kotlin/docs/Main.kt
@@ -0,0 +1,28 @@
+/*
+ * Designed and developed by 2022 skydoves (Jaewoong Eum)
+ *
+ * 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.
+ */
+package docs
+
+import androidx.compose.ui.ExperimentalComposeUiApi
+import androidx.compose.ui.window.ComposeViewport
+import kotlinx.browser.document
+
+@OptIn(ExperimentalComposeUiApi::class)
+fun main() {
+  val body = document.body ?: return
+  ComposeViewport(body) {
+    DocsApp()
+  }
+}
diff --git a/docs/src/wasmJsMain/kotlin/docs/component/ThemeColorPickerDialog.kt b/docs/src/wasmJsMain/kotlin/docs/component/ThemeColorPickerDialog.kt
new file mode 100644
index 0000000..60c5717
--- /dev/null
+++ b/docs/src/wasmJsMain/kotlin/docs/component/ThemeColorPickerDialog.kt
@@ -0,0 +1,237 @@
+/*
+ * Designed and developed by 2022 skydoves (Jaewoong Eum)
+ *
+ * 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.
+ */
+package docs.component
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.border
+import androidx.compose.foundation.clickable
+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.layout.width
+import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.Button
+import androidx.compose.material3.ButtonDefaults
+import androidx.compose.material3.Card
+import androidx.compose.material3.CardDefaults
+import androidx.compose.material3.Text
+import androidx.compose.material3.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.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.window.Dialog
+import com.github.skydoves.colorpicker.compose.BrightnessSlider
+import com.github.skydoves.colorpicker.compose.HsvColorPicker
+import com.github.skydoves.colorpicker.compose.rememberColorPickerController
+import docs.theme.DefaultPrimaryColor
+import docs.theme.DocsTheme
+
+private val PresetColors = listOf(
+  Color(0xFF7C4DFF), // Purple (default)
+  Color(0xFF2196F3), // Blue
+  Color(0xFF00BCD4), // Cyan
+  Color(0xFF4CAF50), // Green
+  Color(0xFFFF9800), // Orange
+  Color(0xFFE91E63), // Pink
+  Color(0xFFF44336), // Red
+  Color(0xFF9C27B0), // Deep Purple
+)
+
+@Composable
+fun ThemeColorPickerDialog(
+  currentColor: Color,
+  onColorChanged: (Color) -> Unit,
+  onDismiss: (Color) -> Unit,
+) {
+  val controller = rememberColorPickerController()
+  val initialColor = remember { currentColor }
+  var selectedColor by remember { mutableStateOf(currentColor) }
+
+  Dialog(onDismissRequest = { onDismiss(initialColor) }) {
+    Card(
+      modifier = Modifier.width(340.dp),
+      colors = CardDefaults.cardColors(containerColor = DocsTheme.colors.surface),
+      shape = RoundedCornerShape(16.dp),
+    ) {
+      Column(
+        modifier = Modifier.padding(24.dp),
+        horizontalAlignment = Alignment.CenterHorizontally,
+      ) {
+        Text(
+          text = "Theme Color",
+          style = DocsTheme.typography.h2,
+          color = DocsTheme.colors.onSurface,
+        )
+
+        Spacer(modifier = Modifier.height(8.dp))
+
+        Text(
+          text = "Pick a color for the documentation theme",
+          style = DocsTheme.typography.bodySmall,
+          color = DocsTheme.colors.onSurfaceVariant,
+        )
+
+        Spacer(modifier = Modifier.height(20.dp))
+
+        // Preset Colors
+        Text(
+          text = "Presets",
+          style = DocsTheme.typography.bodySmall,
+          color = DocsTheme.colors.onSurfaceVariant,
+          modifier = Modifier.fillMaxWidth(),
+        )
+
+        Spacer(modifier = Modifier.height(8.dp))
+
+        Row(
+          modifier = Modifier.fillMaxWidth(),
+          horizontalArrangement = Arrangement.SpaceEvenly,
+        ) {
+          PresetColors.forEach { color ->
+            Box(
+              modifier = Modifier
+                .size(32.dp)
+                .clip(CircleShape)
+                .background(color)
+                .then(
+                  if (selectedColor == color) {
+                    Modifier.border(2.dp, DocsTheme.colors.onSurface, CircleShape)
+                  } else {
+                    Modifier
+                  },
+                )
+                .clickable {
+                  selectedColor = color
+                  onColorChanged(color)
+                  controller.selectByColor(color, false)
+                },
+            )
+          }
+        }
+
+        Spacer(modifier = Modifier.height(20.dp))
+
+        // Custom Color Picker
+        Text(
+          text = "Custom",
+          style = DocsTheme.typography.bodySmall,
+          color = DocsTheme.colors.onSurfaceVariant,
+          modifier = Modifier.fillMaxWidth(),
+        )
+
+        Spacer(modifier = Modifier.height(8.dp))
+
+        HsvColorPicker(
+          modifier = Modifier.size(200.dp),
+          controller = controller,
+          onColorChanged = { envelope ->
+            selectedColor = envelope.color
+            onColorChanged(envelope.color)
+          },
+        )
+
+        Spacer(modifier = Modifier.height(12.dp))
+
+        BrightnessSlider(
+          modifier = Modifier
+            .fillMaxWidth()
+            .height(30.dp)
+            .clip(RoundedCornerShape(8.dp)),
+          controller = controller,
+        )
+
+        Spacer(modifier = Modifier.height(16.dp))
+
+        // Preview
+        Row(
+          modifier = Modifier.fillMaxWidth(),
+          verticalAlignment = Alignment.CenterVertically,
+        ) {
+          Text(
+            text = "Preview:",
+            style = DocsTheme.typography.bodySmall,
+            color = DocsTheme.colors.onSurfaceVariant,
+          )
+          Spacer(modifier = Modifier.width(12.dp))
+          Box(
+            modifier = Modifier
+              .size(40.dp)
+              .clip(RoundedCornerShape(8.dp))
+              .background(selectedColor)
+              .border(1.dp, DocsTheme.colors.divider, RoundedCornerShape(8.dp)),
+          )
+        }
+
+        Spacer(modifier = Modifier.height(24.dp))
+
+        // Buttons
+        Row(
+          modifier = Modifier.fillMaxWidth(),
+          horizontalArrangement = Arrangement.spacedBy(12.dp),
+        ) {
+          TextButton(
+            onClick = {
+              selectedColor = DefaultPrimaryColor
+              onColorChanged(DefaultPrimaryColor)
+              controller.selectByColor(DefaultPrimaryColor, false)
+            },
+            modifier = Modifier.weight(1f),
+          ) {
+            Text(
+              text = "Reset",
+              color = DocsTheme.colors.onSurfaceVariant,
+            )
+          }
+          TextButton(
+            onClick = { onDismiss(initialColor) },
+            modifier = Modifier.weight(1f),
+          ) {
+            Text(
+              text = "Cancel",
+              color = DocsTheme.colors.onSurfaceVariant,
+            )
+          }
+          Button(
+            onClick = { onDismiss(selectedColor) },
+            modifier = Modifier.weight(1f),
+            colors = ButtonDefaults.buttonColors(
+              containerColor = selectedColor,
+            ),
+          ) {
+            Text(
+              text = "Apply",
+              color = Color.White,
+            )
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/docs/src/wasmJsMain/resources/index.html b/docs/src/wasmJsMain/resources/index.html
new file mode 100644
index 0000000..d6a5538
--- /dev/null
+++ b/docs/src/wasmJsMain/resources/index.html
@@ -0,0 +1,96 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="ColorPicker Compose - Kotlin Multiplatform color picker library for Jetpack Compose. Interactive documentation and playground.">
+    <meta name="keywords" content="ColorPicker, Compose, Multiplatform, Kotlin, Color, Android, iOS, WASM">
+    <meta name="author" content="skydoves">
+
+    <!-- Open Graph -->
+    <meta property="og:title" content="ColorPicker Compose Documentation">
+    <meta property="og:description" content="Kotlin Multiplatform color picker library for Jetpack Compose">
+    <meta property="og:type" content="website">
+
+    <title>ColorPicker Compose - Color Picker for Compose Multiplatform</title>
+
+    <style>
+        html, body {
+            margin: 0;
+            padding: 0;
+            width: 100%;
+            height: 100%;
+            overflow: hidden;
+            background-color: #121212;
+        }
+
+        #loading {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            background-color: #121212;
+            color: #E0E0E0;
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
+            z-index: 9999;
+        }
+
+        #loading h1 {
+            font-size: 2rem;
+            margin-bottom: 1rem;
+            background: linear-gradient(135deg, #BB86FC, #7C4DFF);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+        }
+
+        #loading p {
+            color: #9E9E9E;
+            font-size: 0.9rem;
+        }
+
+        .spinner {
+            width: 40px;
+            height: 40px;
+            border: 3px solid #333;
+            border-top-color: #7C4DFF;
+            border-radius: 50%;
+            animation: spin 1s linear infinite;
+            margin-bottom: 1rem;
+        }
+
+        @keyframes spin {
+            to { transform: rotate(360deg); }
+        }
+    </style>
+</head>
+<body>
+    <div id="loading">
+        <div class="spinner"></div>
+        <h1>ColorPicker Compose</h1>
+        <p>Loading documentation...</p>
+    </div>
+
+    <script>
+        // Hide loading when Compose is ready
+        window.addEventListener('load', function() {
+            setTimeout(function() {
+                var loading = document.getElementById('loading');
+                if (loading) {
+                    loading.style.opacity = '0';
+                    loading.style.transition = 'opacity 0.3s ease';
+                    setTimeout(function() {
+                        loading.style.display = 'none';
+                    }, 300);
+                }
+            }, 100);
+        });
+    </script>
+    <script src="colorpicker-docs.js"></script>
+</body>
+</html>