Compose Fluent UI

Icon generation is a multi-step build process:

1. Download: Vector drawables are downloaded via the Google Fonts API using a script in the generator module and stored in raw-icons.
2. Processing & API Tracking: During compilation of core and extended modules, icons are processed to remove incompatible theme attributes and verified for theme consistency. An API tracking file is generated; if the generated API differs from the checked-in version, the build fails to ensure API stability.
3. Parsing & Code Generation: Processed XML files are parsed into a VectorAssetBuilder representation. This is converted into Kotlin source files where each icon is represented as a by lazy property. These files are written to the output directory and compiled as part of the module's source code.

To use the generated icons in your code, refer to androidx.compose.material.icons.Icons.

The Gallery app uses KSP and KotlinPoet to automatically generate navigation and example code. To add a new component page, follow these steps:

1. Create a Screen file: Create [YourComponent]Screen.kt in the package corresponding to the component group.
2. Annotate the Screen method: Create a @Composable function named [YourComponent]Screen and annotate it with @Component(index = ..., description = "...").
3. Implement GalleryPage: Use the GalleryPage method within your screen. It requires componentPath (from FluentSourceFile) and galleryPath (from ComponentPagePath).
4. Define Sections: Inside GalleryPage, use the Section method for each example.
   • title: String title of the section.
   • content: The @Composable code for the example.
   • output: (Optional) A @Composable block to display state changes.
   • options: (Optional) A @Composable block for user controls (e.g., CheckBoxes).
   • sourceCode: The global variable generated by the @Sample annotation.
5. Create the @Sample method: Create a private @Composable method named [YourComponentCase]Sample and annotate it with @Sample. This generates the sourceCodeOf[YourComponentCase]Sample variable used in the Section.

Example implementation:

// ButtonScreen.kt
package io.github.composefluent.gallery.screen.basicinput

@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
        )
    }
}

@Sample
@Composable
private fun ButtonSample(enabled: Boolean = true, onClick: () -> Unit) {
    Button(disabled = !enabled, onClick = onClick) {
        Text("Standard Compose Button")
    }
}

The fluent-icons-generator module provides a workflow to convert Fluent UI icons from the web catalog into usable Kotlin code for Compose. The process involves three main stages: extracting SVGs from a saved HTML catalog, converting those SVGs to Android XML Vector Drawables, and finally converting the XML into Kotlin code.

Workflow Steps

1. Extract SVGs from Catalog

   • Access the Fluent UI Catalog.
   • Save the page as an HTML file named icons-catalog.html.
   • Run the ExtractSvgFromCatalogKt task/script.

2. Convert to XML

   • Run the ConvertToXmlKt task/script to transform the extracted SVGs into XML Vector Drawables (using logic derived from Android Studio's vector tools).

3. Convert to Kotlin Code

   • Run the ConvertToCodeKt task/script to generate the final Kotlin icon implementations (using logic derived from Jetpack Compose icon generators).

# Workflow Summary
1. Save page as html to `icons-catalog.html`
2. Run `ExtractSvgFromCatalogKt`
3. Run `ConvertToXmlKt`
4. Run `ConvertToCodeKt`