docs: Preview for components in documentation website (#80)

Author: YuKongA

.github/workflows/docs.yml

@@ -35,6 +35,9 @@ jobs:
           ./gradlew :miuix:dokkaGenerate
           mkdir -p ./docs/public/dokka
           mv ./miuix/build/dokka/html/* ./docs/public/dokka
+          ./gradlew :docs:demo:jsBrowserDistribution
+          mkdir -p ./docs/public/compose
+          mv ./docs/demo/build/dist/js/productionExecutable/* ./docs/public/compose
           cd ./docs
           yarn install
           yarn docs:build

.gitignore

@@ -16,3 +16,4 @@ docs/node_modules
 docs/.vitepress/dist
 docs/.vitepress/cache
 docs/public/dokka
+docs/public/compose

docs/components/basiccomponent.md

@@ -4,6 +4,10 @@
 
 This project builds upon it to provide some extended components, enabling developers to quickly create UI components that conform to design specifications. See the usage of [Extended Components](../components/#extended-components) for details.
 
+<div style="position: relative; max-width: 700px; height: 350px; border-radius: 10px; overflow: hidden; border: 1px solid #777;">
+    <iframe id="demoIframe" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none;" src="../compose/index.html?id=basicComponent" title="Demo" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin"></iframe>
+</div>
+
 ## Import
 
 ```kotlin

docs/components/button.md

@@ -2,6 +2,10 @@
 
 `Button` is a basic interactive component in Miuix, used to trigger actions or events. It provides multiple style options, including primary buttons, secondary buttons, and text buttons.
 
+<div style="position: relative; max-width: 700px; height: 200px; border-radius: 10px; overflow: hidden; border: 1px solid #777;">
+    <iframe id="demoIframe" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none;" src="../compose/index.html?id=button" title="Demo" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin"></iframe>
+</div>
+
 ## Import
 
 ```kotlin

docs/components/card.md

@@ -2,6 +2,10 @@
 
 `Card` is a basic container component in Miuix, used to hold related content and actions. It provides a card container with Miuix style, suitable for scenarios such as information display and content grouping. Supports both static display and interactive modes.
 
+<div style="position: relative; max-width: 700px; height: 300px; border-radius: 10px; overflow: hidden; border: 1px solid #777;">
+    <iframe id="demoIframe" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none;" src="../compose/index.html?id=card" title="Demo" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin"></iframe>
+</div>
+
 ## Import
 
 ```kotlin

docs/components/checkbox.md

@@ -2,6 +2,10 @@
 
 `CheckBox` is a basic selection component in Miuix, used for toggling between checked and unchecked states. It provides an interactive selection control with animation effects, suitable for multiple selection scenarios and enabling/disabling configuration items.
 
+<div style="position: relative; max-width: 700px; height: 100px; border-radius: 10px; overflow: hidden; border: 1px solid #777;">
+    <iframe id="demoIframe" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none;" src="../compose/index.html?id=checkbox" title="Demo" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin"></iframe>
+</div>
+
 ## Import
 
 ```kotlin

docs/components/colorpicker.md

@@ -2,6 +2,10 @@
 
 `ColorPicker` is a color selection component in Miuix that allows users to pick colors by adjusting hue, saturation, brightness, and transparency. The component provides an intuitive slider interface with haptic feedback and real-time color preview.
 
+<div style="position: relative; max-width: 700px; height: 260px; border-radius: 10px; overflow: hidden; border: 1px solid #777;">
+    <iframe id="demoIframe" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none;" src="../compose/index.html?id=colorPicker" title="Demo" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin"></iframe>
+</div>
+
 ## Import
 
 ```kotlin

docs/components/divider.md

@@ -2,6 +2,10 @@
 
 `Divider` is a basic layout component in Miuix used to separate content in lists and layouts. It provides both horizontal and vertical divider styles.
 
+<div style="position: relative; max-width: 700px; height: 160px; border-radius: 10px; overflow: hidden; border: 1px solid #777;">
+    <iframe id="demoIframe" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none;" src="../compose/index.html?id=divider" title="Demo" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin"></iframe>
+</div>
+
 ## Import
 
 ```kotlin

docs/components/floatingactionbutton.md

@@ -4,6 +4,10 @@
 
 This component is typically used in conjunction with the `Scaffold` component to maintain consistent layout and behavior across different pages in the application.
 
+<div style="position: relative; max-width: 700px; height: 300px; border-radius: 10px; overflow: hidden; border: 1px solid #777;">
+    <iframe id="demoIframe" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none;" src="../compose/index.html?id=floatingActionButton" title="Demo" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin"></iframe>
+</div>
+
 ## Import
 
 ```kotlin

docs/components/floatingtoolbar.md

@@ -4,6 +4,10 @@
 
 This component is usually used in conjunction with `Scaffold`, placed in a specific position on the page to provide quick actions or display information.
 
+<div style="position: relative; max-width: 700px; height: 300px; border-radius: 10px; overflow: hidden; border: 1px solid #777;">
+    <iframe id="demoIframe" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none;" src="../compose/index.html?id=floatingToolbar" title="Demo" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin"></iframe>
+</div>
+
 ## Import
 
 ```kotlin
@@ -18,7 +22,10 @@ import top.yukonga.miuix.kmp.basic.ToolbarPosition // Used for Scaffold
 Scaffold(
     floatingToolbar = {
         FloatingToolbar {
-            Row { // or Column
+            Row(
+                modifier = Modifier.padding(8.dp),
+                horizontalArrangement = Arrangement.spacedBy(8.dp)
+            ) { // or Column
                 IconButton(onClick = { /* Action 1 */ }) {
                     Icon(MiuixIcons.Useful.Edit, contentDescription = "Edit")
                 }
@@ -70,7 +77,10 @@ FloatingToolbar(
     outSidePadding = PaddingValues(24.dp),
     showDivider = false
 ) {
-    Row(modifier = Modifier.padding(horizontal = 8.dp)) {
+    Row(
+        modifier = Modifier.padding(8.dp),
+        horizontalArrangement = Arrangement.spacedBy(8.dp)
+    ) { // or Column
         IconButton(onClick = { /* Action 1 */ }) {
             Icon(MiuixIcons.Useful.Edit, contentDescription = "Edit", tint = MiuixTheme.colorScheme.onPrimaryContainer)
         }
@@ -85,7 +95,10 @@ FloatingToolbar(
 
 ```kotlin
 FloatingToolbar {
-    Column(modifier = Modifier.padding(vertical = 8.dp)) {
+    Column(
+        modifier = Modifier.padding(vertical = 8.dp),
+        verticalArrangement = Arrangement.spacedBy(8.dp)
+    ) {
         IconButton(onClick = { /* Action 1 */ }) {
             Icon(MiuixIcons.Useful.Edit, contentDescription = "Edit")
         }