[Release] 0.1.0

.github/workflows/deploy-gh-pages.yml

@@ -34,6 +34,8 @@ jobs:
         with:
           cache-disabled: true
       - name: Build wasm target
+        env:
+          PROJECT_BUILD_TYPE: release
         run: ./gradlew :gallery:wasmJsBrowserDistribution
       - name: Setup Pages
         uses: actions/configure-pages@v5

.github/workflows/gradle-publish.yml

@@ -37,10 +37,10 @@ jobs:
     - name: Publish to Maven Central
       uses: gradle/gradle-build-action@67421db6bd0bf253fb4bd25b31ebb98943c375e1
       with:
-        arguments: publish
+        arguments: publishToMavenCentral --no-configuration-cache
       env:
-        OSSRH_USERNAME: ${{ secrets.OSSRH_USERNAME }}
-        OSSRH_PASSWORD: ${{ secrets.OSSRH_PASSWORD }}
-        SIGNING_KEY_ID: ${{ secrets.SIGNING_KEY_ID }}
-        SIGNING_KEY: ${{ secrets.SIGNING_KEY }}
-        SIGNING_PASSWORD: ${{ secrets.SIGNING_PASSWORD }}
+        ORG_GRADLE_PROJECT_mavenCentralUsername: ${{ secrets.MAVEN_CENTRAL_USERNAME }}
+        ORG_GRADLE_PROJECT_mavenCentralPassword: ${{ secrets.MAVEN_CENTRAL_PASSWORD }}
+        ORG_GRADLE_PROJECT_signingInMemoryKey: ${{ secrets.MAVEN_SIGNING_KEY }}
+        ORG_GRADLE_PROJECT_signingInMemoryKeyId: ${{ secrets.MAVEN_SIGNING_KEY_ID }}
+        ORG_GRADLE_PROJECT_signingInMemoryKeyPassword: ${{ secrets.MAVEN_SIGNING_PASSWORD }}

.github/workflows/multiplatform_snapshot_build.yml

@@ -0,0 +1,160 @@
+# This workflow uses actions that are not certified by GitHub.
+# They are provided by a third-party and are governed by
+# separate terms of service, privacy policy, and support
+# documentation.
+# This workflow will build a package using Gradle and then publish it to GitHub packages when a release is created
+# For more information see: https://github.com/actions/setup-java/blob/main/docs/advanced-usage.md#Publishing-using-gradle
+
+name: Multiplatform Snapshot Build
+
+on:
+  push:
+    branches:
+      - dev
+    paths-ignore:
+      - 'assets/**'
+      - '**.md'
+      - 'LICENSE'
+      - '**.gitignore'
+
+  pull_request_review:
+    types: submitted
+
+jobs:
+  build:
+    strategy:
+      matrix:
+        type: [PublishLibrary, Android, Windows, Linux, macOS, iOS, WasmJs, Js]
+        include:
+          - type: PublishLibrary
+            publish: release
+            os: macos-latest
+          - type: Android
+            android: apk
+            os: ubuntu-latest
+          - type: Windows
+            desktop: msi
+            os: windows-latest
+          - type: Linux
+            desktop: deb
+            os: ubuntu-latest
+          - type: macOS
+            desktop: dmg
+            os: macos-latest
+          - type: iOS
+            iOS: ipa
+            # workaround runner version for iPhoneOS sdk 18.2
+            os: macos-15
+          - type: WasmJs
+            js: wasmJs
+            os: windows-latest
+          - type: Js
+            js: js
+            os: ubuntu-latest
+
+    runs-on: ${{ matrix.os }}
+    if: ${{ github.event_name != 'pull_request_review' || github.event.review.state == 'approved' }}
+    permissions:
+      contents: read
+      packages: write
+
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+          ref: ${{ github.ref }}
+      - name: Set up JDK 17
+        uses: actions/setup-java@v4
+        with:
+          java-version: '17'
+          distribution: 'temurin'
+
+      # Configure Gradle for optimal use in GitHub Actions, including caching of downloaded dependencies.
+      # See: https://github.com/gradle/actions/blob/main/setup-gradle/README.md
+      - name: Setup Gradle
+        uses: gradle/actions/setup-gradle@af1da67850ed9a4cedd57bfd976089dd991e2582 # v4.0.0
+
+      # Publish Snapshot Library
+      - name: Publish Library
+        if: ${{ github.ref == 'refs/heads/dev' && github.event_name == 'push' && matrix.type == 'PublishLibrary' }}
+        run: |
+          ./gradlew publishToMavenLocal
+          ./gradlew publishToMavenCentral --no-configuration-cache
+        env:
+          ORG_GRADLE_PROJECT_mavenCentralUsername: ${{ secrets.MAVEN_CENTRAL_USERNAME }}
+          ORG_GRADLE_PROJECT_mavenCentralPassword: ${{ secrets.MAVEN_CENTRAL_PASSWORD }}
+          ORG_GRADLE_PROJECT_signingInMemoryKey: ${{ secrets.MAVEN_SIGNING_KEY }}
+          ORG_GRADLE_PROJECT_signingInMemoryKeyId: ${{ secrets.MAVEN_SIGNING_KEY_ID }}
+          ORG_GRADLE_PROJECT_signingInMemoryKeyPassword: ${{ secrets.MAVEN_SIGNING_PASSWORD }}
+
+      - name: Upload Library Artifact
+        if: ${{ github.event_name == 'push' && matrix.type == 'PublishLibrary' }}
+        uses: actions/upload-artifact@v4
+        with:
+          name: Repository-${{ github.run_id }}
+          path: ~/.m2/repository
+
+      # Android Build Action
+      - name: Build Gallery for ${{ matrix.type }}
+        if: ${{ matrix.android }}
+        run: |
+          echo "$ANDROID_KEYSTORE" | base64 --decode > ${{ github.workspace }}/android_sign_key.jks
+          ./gradlew :gallery:assembleRelease
+        env:
+          ANDROID_KEYSTORE: ${{ secrets.ANDROID_KEYSTORE }}
+          ANDROID_SIGNING_FILE: ${{ github.workspace }}/android_sign_key.jks
+          ANDROID_SIGNING_PASSWORD: ${{ secrets.KEYSTORE_PASSWORD }}
+          ANDROID_SIGNING_KEY_ALIAS: ${{ secrets.KEY_ALIAS }}
+          ANDROID_SIGNING_KEY_PASSWORD: ${{ secrets.KEY_PASSWORD }}
+
+      - name: Upload android build artifacts
+        if: ${{ matrix.android }}
+        uses: actions/upload-artifact@v4
+        with:
+          name: Gallery-${{ matrix.type }}-${{ github.run_id }}
+          path: ${{github.workspace}}/gallery/build/outputs/**/*.${{ matrix.android }}
+
+      # Desktop Build Action
+      - name: Build Gallery for ${{ matrix.type }}
+        if: ${{ matrix.desktop }}
+        run: |
+          ./gradlew :gallery:packageReleaseDistributionForCurrentOS
+
+      - name: Upload desktop build artifacts
+        if: ${{ matrix.desktop }}
+        uses: actions/upload-artifact@v4
+        with:
+          name: Gallery-${{ matrix.type }}-${{ github.run_id }}
+          path: ${{github.workspace}}/gallery/build/compose/binaries/main-release/${{ matrix.desktop }}/*.${{ matrix.desktop }}
+
+      # iOS Build Action, Note: Due to the long build time, the iOS build only build the debug version.
+      - name: Set up Xcode
+        if: ${{ matrix.iOS }}
+        uses: maxim-lobanov/setup-xcode@v1
+        with:
+          xcode-version: 'latest-stable'
+
+      - name: Build Gallery for iOS
+        if: ${{ matrix.iOS }}
+        run: |
+          xcodebuild -scheme iosApp -configuration Debug -sdk iphoneos -archivePath gallery/iosApp/build/Gallery.xcarchive archive -workspace gallery/iosApp/iosApp.xcodeproj/project.xcworkspace CODE_SIGNING_REQUIRED=NO CODE_SIGNING_ALLOWED=NO
+
+      - name: Upload iOS Artifact
+        if: ${{ matrix.iOS }}
+        uses: actions/upload-artifact@v4
+        with:
+          name: Gallery-${{ matrix.type }}-${{ github.run_id }}
+          path: ${{ github.workspace }}/gallery/iosApp/build/
+
+      # Js and WasmJs Build Action
+      - name: Build Gallery for ${{ matrix.type }}
+        if: ${{ matrix.js }}
+        run: |
+          ./gradlew :gallery:${{ matrix.js }}BrowserDistribution
+
+      - name: Upload ${{ matrix.type }} build artifacts
+        if: ${{ matrix.js }}
+        uses: actions/upload-artifact@v4
+        with:
+          name: Gallery-${{ matrix.type }}-${{ github.run_id }}
+          path: ./gallery/build/dist/${{ matrix.js }}/productionExecutable

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 io.github.composefluent.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 io.github.composefluent.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 io.github.composefluent.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 io.github.composefluent.gallery.component
+
+object ComponentGroupInfo {
+    prival const val screenPackage: String = "io.github.composefluent.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!