Git Product home page Git Product logo

calf's Introduction

Calf - Compose Adaptive Look & Feel

Calf is a library that allows you to easily create adaptive UIs for your Compose Multiplatform apps.

Kotlin MohamedRejeb Apache-2.0 BuildPassing Maven Central

Calf thumbnail

Calf stands for Compose Adaptive Look & Feel

Artifacts

Artifact Description Platforms Version
calf-ui Adaptive UI components Android, iOS, Desktop Maven Central
calf-file-picker Native File Picker wrapper Android, iOS, Desktop Maven Central
calf-permissions API that allows you to handle permissions Android, iOS Maven Central
calf-geo API that allows you to access geolocation Coming soon... ๐Ÿšง ๐Ÿšง Coming soon... ๐Ÿšง ๐Ÿšง
calf-navigation Native navigation wrapper Coming soon... ๐Ÿšง ๐Ÿšง Coming soon... ๐Ÿšง ๐Ÿšง
calf-map Native Maps wrapper Coming soon... ๐Ÿšง ๐Ÿšง Coming soon... ๐Ÿšง ๐Ÿšง
calf-media Video/Audio player Coming soon... ๐Ÿšง ๐Ÿšง Coming soon... ๐Ÿšง ๐Ÿšง
calf-notification Notification manager Coming soon... ๐Ÿšง ๐Ÿšง Coming soon... ๐Ÿšง ๐Ÿšง
calf-sf-symbols Apple SF Symbols icons Coming soon... ๐Ÿšง ๐Ÿšง Coming soon... ๐Ÿšง ๐Ÿšง

The main focus for now is Android and iOS, but more Desktop components are coming that allows you to create adaptive UIs for Desktop as well (Windows, macOS, Linux)

Installation

Maven Central

Add the following dependency to your module build.gradle.kts file:

// For Adaptive UI components
api("com.mohamedrejeb.calf:calf-ui:0.3.0")

// For Adaptive FilePicker
implementation("com.mohamedrejeb.calf:calf-file-picker:0.3.0")

If you are using calf-ui artifact, make sure to export it to binaries:

Regular Framewoek

...
kotlin {
    ...
    targets
        .filterIsInstance<KotlinNativeTarget>()
        .filter { it.konanTarget.family == Family.IOS }
        .forEach {
            it.binaries.framework {
                ...
                export("com.mohamedrejeb.calf:calf-ui:0.3.0")
            }
        }
    ...
}
...

CocoaPods

...
kotlin {
    ...
    cocoapods {
        ...
        framework {
            ...
            export("com.mohamedrejeb.calf:calf-ui:0.3.0")
        }
    }
    ...
}
...

Important: Exporting calf-ui to binaries is required to make it work on iOS.

Usage

Calf UI

AdaptiveAlertDialog

AdaptiveAlertDialog is a dialog that adapts to the platform it is running on. It is a wrapper around AlertDialog on Android and UIAlertController on iOS.

Android iOS
Alert Dialog Android Alert Dialog iOS
var showDialog by remember { mutableStateOf(false) }

Button(
    onClick = { showDialog = true },
) {
    Text("Show Alert Dialog")
}

if (showDialog) {
    AdaptiveAlertDialog(
        onConfirm = { showDialog = false },
        onDismiss = { showDialog = false },
        confirmText = "Ok",
        dismissText = "Cancel",
        title = "Alert Dialog",
        text = "This is a native alert dialog from Calf",
    )
}

AdaptiveBottomSheet

AdaptiveBottomSheet is a bottom sheet that adapts to the platform it is running on. It is a wrapper around ModalBottomSheet on Android and UIModalPresentationPopover on iOS.

Android iOS
Bottom Sheet Android Bottom Sheet iOS
val scope = rememberCoroutineScope()
val sheetState = rememberAdaptiveSheetState()
var openBottomSheet by remember { mutableStateOf(false) }

Box(
    modifier = Modifier.fillMaxSize()
) {
    Button(
        onClick = { openBottomSheet = true },
    ) {
        Text("Show Bottom Sheet")
    }

    if (openBottomSheet) {
        AdaptiveBottomSheet(
            onDismissRequest = { openBottomSheet = false },
            adaptiveSheetState = sheetState,
        ) {
            Button(
                onClick = {
                    scope.launch { sheetState.hide() }.invokeOnCompletion {
                        if (!sheetState.isVisible) {
                            openBottomSheet = false
                        }
                    }
                }
            ) {
                Text("Close")
            }
        }
    }
}

AdaptiveCircularProgressIndicator

AdaptiveCircularProgressIndicator is a circular progress indicator that adapts to the platform it is running on. It is a wrapper around CircularProgressIndicator on Android, and it implements similar look to UIActivityIndicatorView on iOS.

Android iOS
Circular Progress Indicator Android Circular Progress Indicator iOS
AdaptiveCircularProgressIndicator(
    modifier = Modifier.size(50.dp),
    color = Color.Red,
)

AdaptiveDatePicker

AdaptiveDatePicker is a date picker that adapts to the platform it is running on. It is a wrapper around DatePicker on Android and UIDatePicker on iOS.

Android iOS
Date Picker Android Date Picker iOS
val state = rememberAdaptiveDatePickerState()

LaunchedEffect(state.selectedDateMillis) {
    // Do something with the selected date
}

AdaptiveDatePicker(
    state = state,
)

AdaptiveTimePicker

AdaptiveTimePicker is a time picker that adapts to the platform it is running on. It is a wrapper around TimePicker on Android and UIDatePicker on iOS.

Android iOS
Time Picker Android Time Picker iOS
val state = rememberAdaptiveTimePickerState()

LaunchedEffect(state.hour, state.minute) {
    // Do something with the selected time
}

AdaptiveTimePicker(
    state = state,
    modifier = Modifier
)

WebView

WebView is a view that adapts to the platform it is running on. It is a wrapper around WebView on Android, WKWebView on iOS and JavaFX WebView on Desktop.

Android iOS
Web View Android Web View iOS
val state = rememberWebViewState(
    url = "https://github.com/MohamedRejeb"
)

LaunchedEffect(state.isLoading) {
    // Get the current loading state
}

WebView(
    state = state,
    modifier = Modifier
        .fillMaxSize()
)

Web View Settings

You can customize the web view settings by changing the WebSettings object in the WebViewState:

val state = rememberWebViewState(
    url = "https://github.com/MohamedRejeb"
)

LaunchedEffect(Unit) {
    // Enable JavaScript
    state.settings.javaScriptEnabled = true

    // Enable Zoom in Android
    state.settings.androidSettings.supportZoom = true
}

Call JavaScript

You can call JavaScript functions from the web view by using the evaluateJavaScript function:

val state = rememberWebViewState(
    url = "https://github.com/MohamedRejeb"
)

LaunchedEffect(Unit) {
    val jsCode = """
        document.body.style.backgroundColor = "red";
        document.title
    """.trimIndent()

    // Evaluate the JavaScript code
    state.evaluateJavaScript(jsCode) {
        // Do something with the result
        println("JS Response: $it")
    }
}

Note: The evaluateJavaScript method only works when you enable JavaScript in the web view settings.

Calf File Picker

Calf File Picker allows you to pick files from the device storage.

Android iOS
Web View Android Web View iOS
val pickerLauncher = rememberFilePickerLauncher(
    type = FilePickerFileType.Image,
    selectionMode = FilePickerSelectionMode.Single,
    onResult = { files ->
        files.firstOrNull()?.let { file ->
            // Do something with the selected file
            // You can get the ByteArray of the file
            file.readByteArray()
        }
    }
)

Button(
    onClick = {
        pickerLauncher.launch()
    },
    modifier = Modifier.padding(16.dp)
) {
    Text("Open File Picker")
}

FilePickerFileType

FilePickerFileType allows you to specify the type of files you want to pick:

  • FilePickerFileType.Image - Allows you to pick images only
  • FilePickerFileType.Video - Allows you to pick videos only
  • FilePickerFileType.ImageView - Allows you to pick images and videos only
  • FilePickerFileType.Audio - Allows you to pick audio files only
  • FilePickerFileType.Document - Allows you to pick documents only
  • FilePickerFileType.Text - Allows you to pick text files only
  • FilePickerFileType.Pdf - Allows you to pick PDF files only
  • FilePickerFileType.Presentation - Allows you to pick presentation files only
  • FilePickerFileType.Spreadsheet - Allows you to pick spreadsheet files only
  • FilePickerFileType.Word - Allows you to pick compressed word only
  • FilePickerFileType.All - Allows you to pick all types of files
  • FilePickerFileType.Folder - Allows you to pick folders

You can also specify the file types you want to pick by using the FilePickerFileType.Custom type:

val type = FilePickerFileType.Custom(
    "text/plain"
)

FilePickerSelectionMode

FilePickerSelectionMode allows you to specify the selection mode of the file picker:

  • FilePickerSelectionMode.Single - Allows you to pick a single file
  • FilePickerSelectionMode.Multiple - Allows you to pick multiple files

Contribution

If you've found an error in this sample, please file an issue.
Feel free to help out by sending a pull request โค๏ธ.

Code of Conduct

Find this library useful? โค๏ธ

Support it by joining stargazers for this repository. โญ
Also, follow me on GitHub for more libraries! ๐Ÿคฉ

You can always

License

Copyright 2023 Mohamed Rejeb

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

   http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.

calf's People

Contributors

mohamedrejeb avatar iruizmar avatar onseok avatar zeeshanali-k avatar j-roskopf avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.