README Update

CONTRIBUTION.md

@@ -0,0 +1,149 @@
+# Contributing to Compose-Fluent-UI
+
+Hello and welcome! 🎉
+
+**Our project components are designed using the [Windows UI Kit Figma guidelines](https://www.figma.com/community/file/1440832812269040007/windows-ui-kit). Therefore, the layout and style of the components must strictly adhere to this design guide. Additionally, the components showcased in the Gallery should align as closely as possible with this design guide.**
+
+We are thrilled to have you considering contributing to Compose-Fluent-UI. Contributions are what make the open-source community such an incredible place to learn, inspire, and create. Here are some guidelines to help you get started:
+
+## Getting Started
+
+- **Fork this repository**: Click on the "Fork" button at the top right of this page. This will create a copy of the repository in your account.
+- **Select the Dev branch**: Choose the `dev` branch as your base branch.
+- **Create a new branch**: Create a new branch from `dev` for your feature or bug fix using `git checkout -b your-branch-name`.
+- **Base all development work on your new branch**: Ensure that all your development work is committed to the branch you just created from `dev`.
+
+## Developing Components
+
+- **Create the source code**: In the `fluent/components` directory, create the source code for the component that corresponds to the Windows UI Kit.
+```Kotlin
+//Button.kt
+package com.konyaco.fluent.components
+```
+- **Handle internal classes**: If your component involves internal classes that may be used by other components (such as `OverflowRow`), create the relevant classes in the appropriate package (e.g., `/layout`).
+```Kotlin
+//OverflowRow.kt
+package com.konyaco.fluent.layout.overflow
+
+@Composable
+internal fun OverflowRow(
+    modifier: Modifier = Modifier,
+    overflow: OverflowPosition = OverflowPosition.End,
+    state: OverflowRowState = rememberOverflowRowState(),
+    horizontalArrangement: Arrangement.Horizontal = Arrangement.Start,
+    verticalAlignment: Alignment.Vertical = Alignment.CenterVertically,
+    overflowAction: @Composable OverflowActionScope.() -> Unit = {},
+    contentPadding: PaddingValues = PaddingValues(),
+    alwaysShowOverflowAction: Boolean = false,
+    content: OverflowRowScope.() -> Unit
+)
+```
+- **Adhere to guidelines**: When developing, strictly follow the Windows UI Kit for layout, typography, and color.
+- **Include TODOs for animations**: If your component involves animations and you're unsure of the specific parameters to use, add a `TODO` note.
+
+## Testing and Showcasing Components
+
+The Gallery app uses KSP and KotlinPoet to automatically generate a navigation tree and Kotlin example source code. Below are the steps to add a component example page in the Gallery:
+
+1. **Create [YourComponent]Screen.kt**: In the package corresponding to the component group, create a `[YourComponent]Screen.kt` file.
+```Kotlin
+// ButtonScreen.kt
+package com.konyaco.fluent.gallery.screen.basicinput
+```
+2. **Create a method with @Component annotation**: Create a method named `[YourComponent]Screen` and annotate it with `@Component`, providing the relevant `description` and `index`.
+```Kotlin
+// ButtonScreen.kt
+@Component(index = 0, description = "A control that responds to user input")
+@Composable
+fun ButtonScreen() {
+
+}
+```
+
+3. **Use GalleryPage method**: In this method, use the `GalleryPage` method to create a uniform component example page layout. The `GalleryPage` method takes `componentPath` and `galleryPath` as parameters, which are provided by the `FluentSourceFile` and `ComponentPagePath` classes generated by KSP, indicating the source code path of the component and the corresponding Gallery example code path.
+```Kotlin
+// ButtonScreen.kt
+@Component(index = 0, description = "A control that responds to user input")
+@Composable
+fun ButtonScreen() {
+    GalleryPage(
+        componentPath = FluentSourceFile.Button,
+        galleryPath = ComponentPagePath.ButtonScreen,
+    ) {
+        // Sample sections.
+    }
+}
+```
+4. **Use Section method in GalleryPage**: Within `GalleryPage`, use the `Section` method for each component example. The `Section` method provides `output` and `options` parameters for adjusting options and display output. The `sourceCode` parameter should be the global variable generated by the `@Sample` annotation (which contains the component source code).
+```Kotlin
+// ButtonScreen.kt
+@Component(index = 0, description = "A control that responds to user input")
+@Composable
+fun ButtonScreen() {
+    GalleryPage(
+        componentPath = FluentSourceFile.Button,
+        galleryPath = ComponentPagePath.ButtonScreen,
+    ) {
+        val clickTextContent = remember { mutableStateOf("") }
+        val buttonEnabled = remember { mutableStateOf(true) }
+        Section(
+            title = "A simple Button with text content.",
+            content = {
+                ButtonSample(enabled = buttonEnabled.value) { clickTextContent.value = "You clicked: Button 1" }
+            },
+            output = {
+                if (clickTextContent.value.isNotBlank()) {
+                    Text(clickTextContent.value)
+                }
+            },
+            options = {
+                CheckBox(
+                    checked = !buttonEnabled.value,
+                    onCheckStateChange = { buttonEnabled.value = !it },
+                    label = "Disable button"
+                )
+            },
+            sourceCode = sourceCodeOfButtonSample
+        )
+    }
+}
+```
+5. **Create an example**: In the `[YourComponent]Screen.kt` file, add a new method named `[YourComponentCase]Sample` with a private visibility modifier, and annotate this method with `@Sample`. This will generate a global variable `sourceCodeOf[YourComponentCase]Sample`, which should be assigned to the `sourceCode` parameter in the corresponding `Section`.
+```Kotlin
+//ButtonScreen.kt
+@Sample
+@Composable
+private fun ButtonSample(enabled: Boolean = true, onClick: () -> Unit) {
+    Button(disabled = !enabled, onClick = onClick) {
+        Text("Standard Compose Button")
+    }
+}
+```
+6. **Add new groups if needed**: If you cannot find the appropriate group for the component, add a new group in the `ComponentGroupInfo` object, following the format of the existing groups. After adding the group, place the Screen file in the corresponding package.
+```Kotlin
+// ComponentGrupInfo.kt
+package com.konyaco.fluent.gallery.component
+
+object ComponentGroupInfo {
+    prival const val screenPackage: String = "com.konyaco.fluent.gallery.screen"
+
+    // Basic Input is group name, ChckboxChecked is icon, packageMap is the component screens under this group were placed, like ButtonScreen
+    @ComponentGroup("CheckboxChecked", index = 2, packageMap = "$screenPackage.basicinput")
+    const val BasicInput = "Basic input"
+
+    //other groups
+    //....
+}
+```
+
+7. At the end, you should see the component example page you've created in the Gallery, ready for demonstration and testing.
+![Sample Page](/assets/sample_page_screenshot.png)
+
+8. **Debugging components with scale mode if needed**: If you need to debug your component with scale mode, you can test it in `TestComponentScreen`. Navigate to this test page in the Gallery app through `Settings > Test Component`.
+![Test Component Screen](/assets/test_component_screenshot.png)
+
+## Need Help?
+
+If you have any questions or need assistance, feel free to open an issue or reach out to the maintainers. We’re here to help!
+
+Thank you for considering contributing to **Compose-Fluent-UI**. We can’t wait to see what you’ll create!

README.md

@@ -3,7 +3,7 @@
 [![License](https://img.shields.io/github/license/Konyaco/compose-fluent-ui)](LICENSE)
 [![Version](https://img.shields.io/github/v/release/Konyaco/compose-fluent-ui?include_prereleases)](https://github.com/Konyaco/compose-fluent-ui/releases)
 [![Maven Central](https://img.shields.io/maven-central/v/com.konyaco/fluent)](https://central.sonatype.com/artifact/com.konyaco/fluent/)
-
+[![Snapshot](https://img.shields.io/nexus/s/com.konyaco/fluent?server=https%3A%2F%2Fs01.oss.sonatype.org%2F&label=snapshot)](https://s01.oss.sonatype.org/content/repositories/snapshots/com/konyaco/fluent)
 
 **Fluent Design** UI library for **Compose Multiplatform**
 
@@ -17,6 +17,16 @@ Please note that there are lots of hard-coding and workarounds in our source cod
 
 Thank you for using our library. We look forward to receiving your feedback and contributions!
 
+### Supported Kotlin Targets
+| Target | Platform |
+| :--- | :--- |
+| desktop | Linux, macOS, Windows |
+| iosX64 | iPhone, iPad |
+| iosArm64 | iPhone, iPad |
+| iosSimulatorArm64 | iOS Simulator |
+| androidTarget | Android devices |
+| wasmJs | Web browsers |
+| js | Web browsers |
 
 ## Quick Start
 
@@ -27,6 +37,17 @@ implementation("com.konyaco:fluent:0.0.1-dev.8")
 implementation("com.konyaco:fluent-icons-extended:0.0.1-dev.8") // If you want to use full fluent icons.
 ```
 
+### Snapshot Repository
+If you want to use the snapshot version, please add the snapshot maven repository.
+```
+dependencyResolutionManagement {
+    repositories {
+        // Add this repository
+        maven(https://s01.oss.sonatype.org/content/repositories/snapshots/)
+    }
+}
+```
+
 ### Example
 
 ```kotlin
@@ -60,62 +81,86 @@ The copyright of the icon assets (in `com.konyaco.fluent.icons` package) belongs
 ## Components
 
 ### Layers
-
+- Materials
+  - [x] App Layer Mica
+  - [x] App Layer Mica Alt
+  - [x] App Layer Acrylic Default
+  - [x] App Layer Acrylic Base
+  - [x] App Layer Accent Acrylic Default
+  - [x] App Layer Accent Acrylic Base
+  - [x] App Layer Thin Acrylic
+  - [ ] Window Layer Mica
+  - [ ] Window Layer Acrylic
 - Mica
   - [x] Simple Mica
   - [ ] Real Mica
 - Layer
   - [x] Simple Layer
   - [ ] Real Layer
-- [x] Acrylic
 - [x] Card
 
 ### Basic Components
 
 - [x] Buttons
   - [x] Button
-  - [x] AccentButton
-  - [x] SubtleButton
-  - [x] DropdownButton
-  - [x] HyperlinkButton
-  - [x] RepeatButton
-  - [x] ToggleButton
-  - [x] SplitButton
-  - [x] ToggleSplitButton
-- [x] RadioButton
-- [x] ToggleSwitch
-- [x] CheckBox
-  - [ ] TriStateCheckBox
-- [x] ComboBox (Simple)
-- [x] ProgressBar
-- [x] ProgressRing
+  - [x] Accent Button
+  - [x] Subtle Button
+  - [x] Dropdown Button
+  - [x] Hyperlink Button
+  - [x] Repeat Button
+  - [x] Toggle Button
+  - [x] Split Button
+  - [x] Toggle Split Button
+- [x] Radio Button
+- [x] Toggle Switch
+- [x] Check Box
+  - [ ] TriState Check Box
+- [x] Combo Box (Simple)
+- [x] Progress Bar
+- [x] Progress Ring
 - [x] Slider
-- [x] TextField
+- [x] Text Field
+- [X] Text
 
-- [x] ColorPicker
-- [x] RatingControl
-- [ ] Pill Button
+- [x] Color Picker
+- [x] Rating Control
+- [x] Pill Button
+- [x] Segmented Button
+- [x] Lite Filter
+- [x] List Item
+- [x] Grid View Item
+- [x] Flip View
+- [x] Pips Pager 
 
 ### Compound Components
 
-- [x] CalendarView (Simple)
+- [x] Calendar View (Simple)
   > If you need running on the Android 7.1 and below, you should enable [core library desugar](https://developer.android.com/studio/write/java8-support#library-desugaring) to avoid crash.
-- [x] DateTimePicker (Simple)
+- [x] Date Time Picker (Simple)
 - [x] Color Picker
 - [ ] Navigation
-  - [x] SideNav
-  - [ ] BreadcrumbBar
+  - [x] Side Nav
+  - [x] Top Nav
+  - [x] Navigation View
+  - [x] Breadcrumb Bar
   - [ ] Pivot
-  - [ ] TabView
-- [ ] Tooltip
-- [ ] InfoBar
-- [ ] FilePicker
-- [ ] Menu
+  - [x] Tab View
+  - [x] Selector Bar 
+- [x] Tooltip
+- [x] Info Bar
+- [x] Badge 
+- [ ] File Picker
+- [ ] Menu Bar
+- [x] MenuFlyout (Simple)
+- [x] Expander
+- [x] Command Bar
+- [x] Command Bar Flyout
+- [x] Auto Suggest Box
 
 ### Dialogs
 
-- [x] FluentDialog
-- [x] ContentDialog
+- [x] Fluent Dialog
+- [x] Content Dialog
 - [x] Flyout (Simple)
 
 ### Animations
@@ -130,3 +175,36 @@ The copyright of the icon assets (in `com.konyaco.fluent.icons` package) belongs
 ### Accessibility
 
 - [ ] Accessibility Semantics
+
+## Contribution
+See [CONTRIBUTION.md](CONTRIBUTION.md)
+
+## Credits
+
+This project is built upon the foundations laid by several remarkable open-source projects. We extend our sincere gratitude to the developers and maintainers of these projects for their invaluable contributions to the open-source community.
+
+### Fluent
+| Project | Description | License |
+|---|---|---|
+| **[Windows UI Kit (Figma)](https://www.figma.com/community/file/1440832812269040007/windows-ui-kit)** | Provided design mockups for controls. | [CC BY 4.0](https://creativecommons.org/licenses/by/4.0/) |
+| [JetBrains/compose-multiplatform](https://github.com/JetBrains/compose-multiplatform) | Provides the fundamental framework for Compose Multiplatform development. | [Apache License 2.0](https://github.com/JetBrains/compose-multiplatform/blob/master/LICENSE.txt) |
+| [Kotlin/kotlinx-datetime](https://github.com/Kotlin/kotlinx-datetime) | Provides a unified clock API. | [Apache License 2.0](https://github.com/Kotlin/kotlinx-datetime/blob/master/LICENSE.txt) |
+| [chrisbanes/haze](https://github.com/chrisbanes/haze) | Offers essential implementations for acrylic and mica effects. | [Apache License 2.0](https://github.com/chrisbanes/haze/blob/main/LICENSE) |
+
+### Fluent-Icons
+| Project | Description | License |
+|---|---|---|
+| [microsoft/fluentui-system-icons](https://github.com/microsoft/fluentui-system-icons) | Supplies the icon assets used in the project. | [MIT License](https://github.com/microsoft/fluentui-system-icons/blob/main/LICENSE) |
+| [DevSrSouza/svg-to-compose](https://github.com/DevSrSouza/svg-to-compose) | Facilitates the conversion of SVG icons to Compose icons, aiding in the implementation of Fluent icons. | [MIT License](https://github.com/DevSrSouza/svg-to-compose/blob/master/LICENSE) |
+
+### Gallery
+| Project | Description | License |
+|---|---|---|
+| [lhwdev/compose-window](https://github.com/lhwdev/compose-window) | Provides guidance on passing pointer events back to the parent window. | [Apache License 2.0](https://github.com/lhwdev/compose-window/blob/main/LICENSE) |
+| [grassator/win32-window-custom-titlebar](https://github.com/grassator/win32-window-custom-titlebar) | Demonstrates how to hide the Windows title bar. | [MIT License](https://github.com/grassator/win32-window-custom-titlebar/blob/master/LICENSE) |
+| [MayakaApps/ComposeWindowStyler](https://github.com/MayakaApps/ComposeWindowStyler) | Enables mica window backgrounds on Windows. | [MIT License](https://github.com/MayakaApps/ComposeWindowStyler/blob/main/LICENSE) |
+| [java-native-access/jna](https://github.com/java-native-access/jna) | Provides the capability to interact with Win32 APIs, enabling title bar customization. | [Apache License 2.0](https://github.com/java-native-access/jna/blob/master/LICENSE) |
+| [google/ksp](https://github.com/google/ksp) | Along with KotlinPoet, helps with source code generation for examples and navigation logic. | [Apache License 2.0](https://github.com/google/ksp/blob/main/LICENSE) |
+| [square/kotlinpoet](https://github.com/square/kotlinpoet) | Along with KSP, helps with source code generation for examples and navigation logic. | [Apache License 2.0](https://github.com/square/kotlinpoet/blob/main/LICENSE.txt) |
+| [SnipMeDev/Highlights](https://github.com/SnipMeDev/Highlights) | Enables syntax highlighting for example code. | [Apache License 2.0](https://github.com/SnipMeDev/Highlights/blob/main/LICENSE) |
+| [yshrsmz/BuildKonfig](https://github.com/yshrsmz/BuildKonfig) | Facilitates the generation of build configuration parameter classes. | [Apache License 2.0](https://github.com/yshrsmz/BuildKonfig/blob/master/LICENSE) |