🚀 JetCo Library

---

🎯 Your Ultimate Compose Companion

JetCo is a ready-to-go Compose library building awesome UI components for both Android and KMP (Kotlin Multiplatform). 💡

✨ Beautiful • ⚡ Fast • 🌍 Cross-Platform • 🎨 Customizable

Your ultimate Open-Source partner for crafting visually stunning, interactive, and efficient UI components across multiple platforms including Android, iOS, JVM, JS, and WASM. Designed specifically for Jetpack Compose enthusiasts, JetCo is here to make your life easier, your apps prettier, and your users happier. 😊

🚧 KMP Documentation Pipeline: Full Kotlin Multiplatform documentation is currently in development and will be live soon! For now, KMP projects work identically to Android projects with the same component functionality. The only differences are the Gradle implementation and import statements shown below. Stay tuned! 🚀

---

�️ Repository Structure

Understanding the JetCo ecosystem at a glance

graph TB
    A("JetCo Root Repository") --> B("JetCoKMP")
    A --> C("jetco-android")
    A --> D("assets")
    A --> E("LICENSE & README")
    
    B --> B1("composeApp")
    B --> B2("jetco - KMP Library")
    B --> B3("iosApp")
    B --> B4("gradle")
    
    B1 --> B1a("androidMain")
    B1 --> B1b("commonMain")
    B1 --> B1c("iosMain")
    B1 --> B1d("jvmMain")
    B1 --> B1e("jsMain")
    B1 --> B1f("wasmJsMain")
    
    B2 --> B2a("commonMain")
    B2 --> B2b("androidMain")
    B2 --> B2c("iosMain")
    B2 --> B2d("jvmMain")
    B2 --> B2e("Tests")
    
    B2a --> B2a1("Charts")
    B2a --> B2a2("Cards")
    B2a --> B2a3("Steppers")
    B2a --> B2a4("Controls")
    
    C --> C1("JetCoLibrary")
    C1 --> C1a("app")
    C1 --> C1b("jetco/ui")
    C1 --> C1c("assets/images")
    C1 --> C1d("gradle & build")
    
    C1b --> C1b1("Charts")
    C1b --> C1b2("Cards")
    C1b --> C1b3("Steppers")
    C1b --> C1b4("Controls")
    
    D --> D1("images")
    
    %% Styling with light blue theme, blue borders, and increased spacing
    classDef default fill:#E3F2FD,stroke:#1976D2,stroke-width:2px,color:#000000,rx:15,ry:15
    classDef rootStyle fill:#BBDEFB,stroke:#0D47A1,stroke-width:3px,color:#000000,rx:15,ry:15
    classDef kmpStyle fill:#E1F5FE,stroke:#0277BD,stroke-width:2px,color:#000000,rx:15,ry:15
    classDef androidStyle fill:#E8F5E8,stroke:#2E7D32,stroke-width:2px,color:#000000,rx:15,ry:15
    classDef libraryStyle fill:#FFF3E0,stroke:#E65100,stroke-width:2px,color:#000000,rx:15,ry:15
    classDef componentStyle fill:#F3E5F5,stroke:#6A1B9A,stroke-width:2px,color:#000000,rx:15,ry:15
    
    class A rootStyle
    class B,B1,B2,B3,B4 kmpStyle
    class C,C1,C1a,C1c,C1d androidStyle
    class B2a,B2b,B2c,B2d,C1b libraryStyle
    class B2a1,B2a2,B2a3,B2a4,C1b1,C1b2,C1b3,C1b4 componentStyle

Loading

🎨 JetCo in Action

✨ See the magic happen across all platforms! ✨

🥧 Pie Chart Interactive data visualization	📊 Column Bar Chart Beautiful data bars	🔥 Extended Bar Chart Advanced features	🤓 Group Bar Chart Multi-dataset comparison
🎟️ Ticket Card Custom card design	⬇️ Vertical Stepper Timeline progression	➡️ Horizontal Stepper Progress visualization	🔘 Switch Button Animated interactions

---

🌍 Platform Support

Write once, run everywhere! JetCo supports all major platforms through Kotlin Multiplatform

Platform	Status	Description	Target API
	✅ Full Support	Native Android with Jetpack Compose optimizations	API 21+
	✅ Full Support	Native iOS through Compose Multiplatform	iOS 11+
	✅ Full Support	Windows, macOS, Linux applications	JVM 11+
	✅ Full Support	Modern web applications with Compose for Web	ES2015+
	✅ Full Support	High-performance WebAssembly applications	WASM 1.0

🎯 Platform Highlights

Material Design 3 Native performance & gestures

Native iOS Feel Cupertino design system

Cross-platform UI Windows, macOS, Linux

Modern Web Apps PWA ready, responsive

---

🚀 Installation

Get started in minutes! Choose your platform and follow the simple setup

📱 For Android - Jetpack Compose Projects

Click to expand Android setup

Add this to your module's build.gradle.kts:

dependencies {
    implementation("com.developerstring.jetco:ui:1.0.0-beta.6")
}

🌍 For Kotlin Multiplatform Projects

🔥 Recommended - KMP Setup (Click to expand)

Add this to your commonMain dependencies in build.gradle.kts:

commonMain.dependencies {
    implementation("com.developerstring.jetco-kmp:ui:1.0.0-beta.7")
}

⚡ Quick Start: Use the same component examples below for both Android Native and Kotlin Multiplatform! All functionality is identical.

🛠️ Complete KMP Setup Example

Full configuration example

kotlin {
    // Android target
    androidTarget {
        compilations.all {
            kotlinOptions {
                jvmTarget = "1.8"
            }
        }
    }
    
    // iOS targets
    listOf(
        iosX64(),
        iosArm64(),
        iosSimulatorArm64()
    ).forEach { iosTarget ->
        iosTarget.binaries.framework {
            baseName = "ComposeApp"
            isStatic = true
        }
    }
    
    // Desktop target
    jvm("desktop")
    
    // Web target
    js(IR) {
        moduleName = "composeApp"
        browser {
            commonWebpackConfig {
                outputFileName = "composeApp.js"
            }
        }
        binaries.executable()
    }
    
    // WASM target
    wasmJs {
        moduleName = "composeApp"
        browser {
            commonWebpackConfig {
                outputFileName = "composeApp.js"
            }
        }
        binaries.executable()
    }

    sourceSets {
        commonMain.dependencies {
            implementation(compose.runtime)
            implementation(compose.foundation)
            implementation(compose.material3)
            implementation(compose.ui)
            implementation(compose.components.resources)
            
            // 🎨 Add JetCo KMP
            implementation("com.developerstring.jetco-kmp:ui:1.0.0-beta.7")
        }
        
        androidMain.dependencies {
            implementation(libs.compose.ui.tooling.preview)
            implementation(libs.androidx.activity.compose)
        }
        
        iosMain.dependencies {
            // iOS specific dependencies
        }
        
        desktopMain.dependencies {
            implementation(compose.desktop.currentOs)
        }
    }
}

---

📊 UI Components Gallery

🎨 Rich, customizable components for every need

📈 Charts & Data Visualization

Component	Description	Platforms	Status
🥧 Pie Chart	Interactive pie charts with customizable slices and animations		✅
📊 Column Bar Chart	Beautiful vertical bar charts with smooth transitions		✅
🔥 Extended Bar Chart	Advanced bar charts with multiple datasets and styling		✅
🤓 Group Bar Chart	Side-by-side comparison charts for multi-series data		✅

🎴 Cards & Layout

Component	Description	Platforms	Status
🎟️ Ticket Card	Cinema-style cards with cutout design and dashed dividers		✅

🔄 Navigation & Progress

Component	Description	Platforms	Status
⬇️ Vertical Stepper	Timeline-style stepper with images and descriptions		✅
➡️ Horizontal Stepper	Clean horizontal progress indicator		✅
⚡ Compact Stepper	Minimal icon-only stepper for mobile interfaces		✅

🎛️ Interactive Controls

Component	Description	Platforms	Status
🔘 Switch Button	Animated toggle switch with custom styling		✅

🚧 Coming Soon: Date Pickers, Floating Action Buttons, Bottom Sheets, and more!

---

🚀 Getting Started

⚡ From zero to awesome in 5 minutes!

🎯 Quick Start

📦 Import Components

📝 Import statements for different setups

// 🌍 For KMP projects (Recommended)
import com.developerstring.jetco_kmp.charts.piechart.PieChart
import com.developerstring.jetco_kmp.cards.ticket.TicketCard
import com.developerstring.jetco_kmp.components.stepper.VerticalStepper
import com.developerstring.jetco_kmp.components.button.SwitchButton

// 🤖 For Android-only projects  
import com.developerstring.jetco.ui.charts.piechart.PieChart
import com.developerstring.jetco.ui.cards.ticket.TicketCard
import com.developerstring.jetco.ui.components.stepper.VerticalStepper
import com.developerstring.jetco.ui.components.button.SwitchButton

💡 Note: All components have identical functionality and API across both Android and KMP versions. Only the import path and Gradle dependency differ!

🎨 Few Quick Examples

Pie Chart

@Composable
fun MyAwesomeScreen() {
    // 🎨 Use any JetCo component across all platforms!
    PieChart(
        data = listOf(
            PieChartData(
                label = "Android", 
                value = 40f, 
                color = Color(0xFF3DDC84)
            ),
            PieChartData(
                label = "iOS", 
                value = 30f, 
                color = Color(0xFF007AFF)
            ), 
            PieChartData(
                label = "Web", 
                value = 20f, 
                color = Color(0xFFFF6B35)
            ),
            PieChartData(
                label = "Desktop", 
                value = 10f, 
                color = Color(0xFFFFD23F)
            )
        ),
        modifier = Modifier
            .size(300.dp)
            .padding(16.dp),
        animationDuration = 1000,
        showLabels = true,
        centerText = "JetCo"
    )
}

Ticket Card

@Composable
fun TicketExample() {
    TicketCard(
        modifier = Modifier
            .fillMaxWidth()
            .padding(16.dp),
        backgroundColor = Color(0xFF6200EE),
        cornerRadius = 16.dp,
        cutoutRadius = 24.dp
    ) {
        Column(
            modifier = Modifier.padding(20.dp),
            horizontalAlignment = Alignment.CenterHorizontally
        ) {
            Text(
                text = "🎬 Movie Ticket",
                style = MaterialTheme.typography.headlineSmall,
                color = Color.White
            )
            Spacer(modifier = Modifier.height(8.dp))
            Text(
                text = "JetCo: The Movie",
                style = MaterialTheme.typography.bodyLarge,
                color = Color.White.copy(alpha = 0.8f)
            )
        }
    }
}

Animated Switch Button

@Composable
fun SwitchExample() {
    var isChecked by remember { mutableStateOf(false) }
    
    SwitchButton(
        checked = isChecked,
        onCheckedChange = { isChecked = it },
        modifier = Modifier.padding(16.dp),
        colors = SwitchButtonColors(
            checkedColor = Color(0xFF4CAF50),
            uncheckedColor = Color(0xFFE0E0E0),
            thumbColor = Color.White
        ),
        animationDuration = 300
    )
}

📚 Learn More

🔥 Coming Soon: Dedicated KMP documentation with platform-specific examples and deployment guides!

---

---

� Why Choose JetCo?

🚀 The ultimate developer experience

Write Once, Run Everywhere Single codebase for Android, iOS, Web, Desktop & WASM	Blazing Performance Optimized for smooth 60fps animations	Stunning Components Pixel-perfect design with Material 3
Zero Learning Curve Intuitive API, comprehensive docs	Highly Flexible Theme every component to match your brand	Always Updated Regular updates with latest Compose features

🎯 Perfect For

---

🚀 What Makes JetCo Special?

✨ The features that set us apart

Feature	Description	Benefit
🌐 Kotlin Multiplatform	One codebase for Android, iOS, Web, Desktop, and WASM	50% less development time
🖌️ Modern UI Components	Charts, cards, steppers with beautiful animations	Professional look out-of-the-box
⚡ Compose Integration	Seamless with Jetpack Compose and Compose Multiplatform	Native performance everywhere
🛠️ Infinite Customization	Theme every pixel to match your brand identity	Unique, branded experiences
🚀 Performance Optimized	Lightweight, efficient, 60fps smooth animations	Happy users, better retention
📱 Platform-Specific	Tailored experiences respecting platform conventions	Feels native on every platform
🔄 Future-Ready	Built for the next generation of Compose	Investment protection
🆓 Open Source	MIT licensed, community-driven development	Free forever, transparent

---

🤝 Join the JetCo Community

🌟 Be part of something amazing!

🎉 Contributors Welcome!

We're always looking for passionate developers to join our mission of making beautiful UI accessible to everyone.

Check out our Contributing Guide and Good First Issues!

---

💝 Show Some Love

If JetCo helped you build something amazing, consider:

⭐ Starring the repo • 🐦 Sharing on Twitter • 💼 Sharing on LinkedIn

_{Made with ❤️ by the JetCo team}