added js platform for testing perpose

gradle.properties

@@ -1,4 +1,7 @@
 org.gradle.jvmargs=-Xmx3g
 kotlin.code.style=official
+org.jetbrains.compose.experimental.jscanvas.enabled=true
+
 compose.wasm.version=1.4.0-dev-wasm09
+compose.version=1.4.0-dev-wasm09
 kotlin.version=1.9.0

web/build.gradle.kts

@@ -6,6 +6,11 @@ plugins {
 }
 
 kotlin {
+    js(IR) {
+        moduleName = "jamshedalamqaderi-portfolio"
+        browser()
+        binaries.executable()
+    }
     @Suppress("OPT_IN_USAGE")
     wasm {
         moduleName = "jamshedalamqaderi-portfolio"

web/src/jsMain/kotlin/com/jamshedalamqaderi/portfolio/Main.kt

@@ -0,0 +1,93 @@
+package com.jamshedalamqaderi.portfolio
+
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.width
+import androidx.compose.material.CircularProgressIndicator
+import androidx.compose.material.Icon
+import androidx.compose.material.MaterialTheme
+import androidx.compose.material.Scaffold
+import androidx.compose.material.Text
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.Email
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.ExperimentalComposeUiApi
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.window.CanvasBasedWindow
+import com.jamshedalamqaderi.portfolio.presentation.ui.components.Accordion
+import com.jamshedalamqaderi.portfolio.presentation.ui.theme.PortfolioTheme
+import org.jetbrains.skiko.wasm.onWasmReady
+
+@OptIn(ExperimentalComposeUiApi::class)
+fun main() {
+    onWasmReady {
+        CanvasBasedWindow("Jamshed Alam Qaderi - Portfolio", canvasElementId = "ComposeTarget") {
+            val loading = remember { mutableStateOf(true) }
+            LaunchedEffect(Unit) {
+                loading.value = false
+            }
+            if (loading.value) {
+                Column(
+                    modifier = Modifier.fillMaxSize(),
+                    horizontalAlignment = Alignment.CenterHorizontally,
+                    verticalArrangement = Arrangement.Center
+                ) {
+                    CircularProgressIndicator()
+                }
+                return@CanvasBasedWindow
+            }
+            PortfolioTheme {
+                Scaffold {
+                    Column(
+                        modifier = Modifier.fillMaxSize(),
+                        horizontalAlignment = Alignment.CenterHorizontally
+                    ) {
+                        Spacer(Modifier.height(100.dp))
+                        Accordion(
+                            modifier = Modifier.width(500.dp),
+                            header = {
+                                Row(verticalAlignment = Alignment.CenterVertically) {
+                                    Icon(
+                                        Icons.Default.Email,
+                                        "Email me",
+                                        tint = MaterialTheme.colors.onSecondary
+                                    )
+                                    Spacer(modifier = Modifier.width(8.dp))
+                                    Text(
+                                        "What is full stack development?",
+                                        color = MaterialTheme.colors.onSecondary
+                                    )
+                                }
+                            },
+                        ) {
+                            Column(modifier = Modifier.padding(20.dp)) {
+                                Text(
+                                    "Generally, it is accepted to use FlowBite in open-source projects, as long as it is not a UI library, a theme, a template, a page-builder that would be considered as an alternative to FlowBite itself.",
+                                    color = Color(0xff6B7280)
+                                )
+                                Text(
+                                    "With that being said, feel free to use this design kit for your open-source projects.",
+                                    color = Color(0xff6B7280)
+                                )
+                                Text(
+                                    "Find out more information by reading the license.",
+                                    color = Color(0xff6B7280)
+                                )
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}

web/src/jsMain/kotlin/com/jamshedalamqaderi/portfolio/presentation/ui/components/Accordion.kt

@@ -0,0 +1,55 @@
+package com.jamshedalamqaderi.portfolio.presentation.ui.components
+
+import androidx.compose.animation.AnimatedVisibility
+import androidx.compose.foundation.background
+import androidx.compose.foundation.border
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.*
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material.Icon
+import androidx.compose.material.MaterialTheme
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.KeyboardArrowDown
+import androidx.compose.material.icons.filled.KeyboardArrowUp
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.input.pointer.PointerIcon
+import androidx.compose.ui.input.pointer.pointerHoverIcon
+import androidx.compose.ui.unit.dp
+
+
+@Composable
+fun Accordion(modifier: Modifier = Modifier, header: @Composable () -> Unit = {}, body: @Composable () -> Unit = {}) {
+    val expanded = remember { mutableStateOf(false) }
+
+    Column(
+        modifier = modifier.border(1.dp, MaterialTheme.colors.primary.copy(alpha = 0.3f), RoundedCornerShape(2.dp))
+    ) {
+        Row(
+            horizontalArrangement = Arrangement.SpaceBetween,
+            verticalAlignment = Alignment.CenterVertically,
+            modifier = Modifier
+                .fillMaxWidth()
+                .height(56.dp)
+                .background(MaterialTheme.colors.secondary)
+                .clickable {
+                    expanded.value = !expanded.value
+                }
+                .pointerHoverIcon(PointerIcon.Hand)
+                .padding(horizontal = 20.dp)
+        ) {
+            header()
+            Icon(
+                if (expanded.value) Icons.Default.KeyboardArrowUp else Icons.Default.KeyboardArrowDown,
+                "accordion up arrow",
+                tint = MaterialTheme.colors.onSecondary
+            )
+        }
+        AnimatedVisibility(expanded.value) {
+            body()
+        }
+    }
+}

web/src/jsMain/kotlin/com/jamshedalamqaderi/portfolio/presentation/ui/theme/Colors.kt

@@ -0,0 +1,61 @@
+package com.jamshedalamqaderi.portfolio.presentation.ui.theme
+
+import androidx.compose.material.darkColors
+import androidx.compose.material.lightColors
+import androidx.compose.ui.graphics.Color
+
+val md_theme_light_primary = Color(0xFF5E6300)
+val md_theme_light_onPrimary = Color(0xFFFFFFFF)
+val md_theme_light_primaryVariant = Color(0xFFE3EA73)
+val md_theme_light_secondary = Color(0xFF006685)
+val md_theme_light_onSecondary = Color(0xFFFFFFFF)
+val md_theme_light_secondaryVariant = Color(0xFFBFE9FF)
+val md_theme_light_error = Color(0xFFBA1A1A)
+val md_theme_light_onError = Color(0xFFFFFFFF)
+val md_theme_light_background = Color(0xFFF3FEFF)
+val md_theme_light_onBackground = Color(0xFF002022)
+val md_theme_light_surface = Color(0xFFF3FEFF)
+val md_theme_light_onSurface = Color(0xFF002022)
+
+val md_theme_dark_primary = Color(0xFFC7CD5A)
+val md_theme_dark_onPrimary = Color(0xFF303300)
+val md_theme_dark_primaryVariant = Color(0xFF474A00)
+val md_theme_dark_secondary = Color(0xFF6CD2FF)
+val md_theme_dark_onSecondary = Color(0xFF003547)
+val md_theme_dark_secondaryVariant = Color(0xFF004D65)
+val md_theme_dark_error = Color(0xFFFFB4AB)
+val md_theme_dark_onError = Color(0xFF690005)
+val md_theme_dark_background = Color(0xFF002022)
+val md_theme_dark_onBackground = Color(0xFF70F5FF)
+val md_theme_dark_surface = Color(0xFF002022)
+val md_theme_dark_onSurface = Color(0xFF70F5FF)
+
+val LightColorPalette = lightColors(
+    primary = md_theme_light_primary,
+    primaryVariant = md_theme_light_primaryVariant,
+    onPrimary = md_theme_light_onPrimary,
+    secondary = md_theme_light_secondary,
+    secondaryVariant = md_theme_light_secondaryVariant,
+    onSecondary = md_theme_light_onSecondary,
+    background = md_theme_light_background,
+    onBackground = md_theme_light_onBackground,
+    surface = md_theme_light_surface,
+    onSurface = md_theme_light_onSurface,
+    error = md_theme_light_error,
+    onError = md_theme_light_onError
+)
+
+val DarkColorPalette = darkColors(
+    primary = md_theme_dark_primary,
+    primaryVariant = md_theme_dark_primaryVariant,
+    onPrimary = md_theme_dark_onPrimary,
+    secondary = md_theme_dark_secondary,
+    secondaryVariant = md_theme_dark_secondaryVariant,
+    onSecondary = md_theme_dark_onSecondary,
+    background = md_theme_dark_background,
+    onBackground = md_theme_dark_onBackground,
+    surface = md_theme_dark_surface,
+    onSurface = md_theme_dark_onSurface,
+    error = md_theme_dark_error,
+    onError = md_theme_dark_onError
+)

web/src/jsMain/kotlin/com/jamshedalamqaderi/portfolio/presentation/ui/theme/Shape.kt

@@ -0,0 +1,11 @@
+package com.jamshedalamqaderi.portfolio.presentation.ui.theme
+
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material.Shapes
+import androidx.compose.ui.unit.dp
+
+val PortfolioShapes = Shapes(
+    small = RoundedCornerShape(4.dp),
+    medium = RoundedCornerShape(4.dp),
+    large = RoundedCornerShape(0.dp)
+)

web/src/jsMain/kotlin/com/jamshedalamqaderi/portfolio/presentation/ui/theme/Theme.kt

@@ -0,0 +1,18 @@
+package com.jamshedalamqaderi.portfolio.presentation.ui.theme
+
+import androidx.compose.foundation.isSystemInDarkTheme
+import androidx.compose.material.MaterialTheme
+import androidx.compose.runtime.Composable
+
+@Composable
+fun PortfolioTheme(
+    darkTheme: Boolean = isSystemInDarkTheme(),
+    content: @Composable() () -> Unit
+) {
+    MaterialTheme(
+        colors = if (darkTheme) DarkColorPalette else LightColorPalette,
+        typography = PortfolioTypography,
+        shapes = PortfolioShapes,
+        content = content,
+    )
+}

web/src/jsMain/kotlin/com/jamshedalamqaderi/portfolio/presentation/ui/theme/Typography.kt

@@ -0,0 +1,20 @@
+package com.jamshedalamqaderi.portfolio.presentation.ui.theme
+
+import androidx.compose.material.Typography
+import androidx.compose.ui.text.TextStyle
+import androidx.compose.ui.text.font.FontFamily
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.unit.sp
+
+val PortfolioTypography = Typography(
+    body1 = TextStyle(
+        fontFamily = FontFamily.Default,
+        fontWeight = FontWeight.Normal,
+        fontSize = 16.sp
+    ),
+    h1 = TextStyle(
+        fontFamily = FontFamily.Monospace,
+        fontWeight = FontWeight.Bold,
+        fontSize = 30.sp
+    )
+)

web/src/jsMain/resources/index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>ImageViewer</title>
+  <script src="skiko.js"> </script>
+</head>
+<body>
+<canvas id="ComposeTarget"></canvas>
+<script type="module" src="jamshedalamqaderi-portfolio.js"> </script>
+</body>
+</html>

web/webpack.config.d/cleanupSourcemap.js

@@ -6,8 +6,7 @@
 
     const outDir = __dirname + "/kotlin/"
     const projecName = path.basename(__dirname);
-    const mapFile = outDir + projecName + ".map"
-
+    const mapFile = outDir + projecName + ".js.map"
     const sourcemap = JSON.parse(fs.readFileSync(mapFile))
     const sources = sourcemap["sources"]
     srcLoop: for (let i in sources) {
@@ -28,4 +27,4 @@
     }
 
     fs.writeFileSync(mapFile, JSON.stringify(sourcemap));
-})();
+})();