Skip to content

Commit

Permalink
Update docs
Browse files Browse the repository at this point in the history
  • Loading branch information
MohamedRejeb committed Jun 22, 2024
1 parent 7e2ad58 commit 684c6b9
Show file tree
Hide file tree
Showing 9 changed files with 122 additions and 89 deletions.
4 changes: 2 additions & 2 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -59,5 +59,5 @@ site
### Python ###
venv/

./calf/
./calf/*
.calf
.calf/*
23 changes: 20 additions & 3 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
# Calf - Compose Adaptive Look & Feel

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

Calf is a library that allows you to easily create adaptive UIs and access platform specific APIs from your Compose Multiplatform apps.

[![Kotlin](https://img.shields.io/badge/kotlin-2.0.0-blue.svg?logo=kotlin)](http://kotlinlang.org)
[![Kotlin](https://img.shields.io/badge/compose-1.6.11-blue.svg?logo=jetpackcompose)](https://www.jetbrains.com/lp/compose-multiplatform)
Expand Down Expand Up @@ -229,14 +228,23 @@ AdaptiveTimePicker(
)
```

#### WebView
### 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](docs/images/WebView-android.png) | ![Web View iOS](docs/images/WebView-ios.png) |

#### Installation

Add the following dependency to your module `build.gradle.kts` file:
```kotlin
implementation("com.mohamedrejeb.calf:calf-webview:0.5.0")
```

#### Usage

```kotlin
val state = rememberWebViewState(
url = "https://github.com/MohamedRejeb"
Expand Down Expand Up @@ -308,6 +316,15 @@ Calf File Picker allows you to pick files from the device storage.
|--------------------------------------------------------------------|------------------------------------------------------------|
| ![File Picker Desktop](docs/images/AdaptiveFilePicker-desktop.png) | ![File Picker Web](docs/images/AdaptiveFilePicker-web.png) |

#### Installation

Add the following dependency to your module `build.gradle.kts` file:
```kotlin
implementation("com.mohamedrejeb.calf:calf-file-picker:0.5.0")
```

#### Usage

```kotlin
val scope = rememberCoroutineScope()
val context = LocalPlatformContext.current
Expand Down
2 changes: 1 addition & 1 deletion docs/filepicker.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
Add the following dependency to your module `build.gradle.kts` file:

```kotlin
implementation("com.mohamedrejeb.calf:calf-file-picker:0.4.0")
implementation("com.mohamedrejeb.calf:calf-file-picker:0.5.0")
```

## Usage
Expand Down
7 changes: 4 additions & 3 deletions docs/index.md
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
# Calf - Compose Adaptive Look & Feel

Calf is a library that allows you to easily create adaptive UIs for your Compose Multiplatform apps.
Calf is a library that allows you to easily create adaptive UIs and access platform specific APIs from your Compose Multiplatform apps.


[![Kotlin](https://img.shields.io/badge/kotlin-1.9.22-blue.svg?logo=kotlin)](http://kotlinlang.org)
[![Kotlin](https://img.shields.io/badge/kotlin-2.0.0-blue.svg?logo=kotlin)](http://kotlinlang.org)
[![Kotlin](https://img.shields.io/badge/compose-1.6.11-blue.svg?logo=jetpackcompose)](https://www.jetbrains.com/lp/compose-multiplatform)
[![MohamedRejeb](https://raw.githubusercontent.com/MohamedRejeb/MohamedRejeb/main/badges/mohamedrejeb.svg)](https://github.com/MohamedRejeb)
[![Apache-2.0](https://img.shields.io/badge/License-Apache%202.0-green.svg)](https://opensource.org/licenses/Apache-2.0)
[![BuildPassing](https://shields.io/badge/build-passing-brightgreen)](https://github.com/MohamedRejeb/ksoup/actions)
Expand All @@ -19,6 +19,7 @@ Calf stands for **C**ompose **A**daptive **L**ook & **F**eel
|-----------------------|-------------------------------------------|--------------------------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| **calf-ui** | Adaptive UI components | Android, iOS, Desktop, Web(Js, Wasm) | [![Maven Central](https://img.shields.io/maven-central/v/com.mohamedrejeb.calf/calf-ui)](https://search.maven.org/search?q=g:%22com.mohamedrejeb.calf%22%20AND%20a:%calf-ui%22) |
| **calf-file-picker** | Native File Picker wrapper | Android, iOS, Desktop, Web(Js, Wasm) | [![Maven Central](https://img.shields.io/maven-central/v/com.mohamedrejeb.calf/calf-file-picker)](https://search.maven.org/search?q=g:%22com.mohamedrejeb.calf%22%20AND%20a:%calf-file-picker%22) |
| **calf-webview** | WebView component | Android, iOS, Desktop | [![Maven Central](https://img.shields.io/maven-central/v/com.mohamedrejeb.calf/calf-webview)](https://search.maven.org/search?q=g:%22com.mohamedrejeb.calf%22%20AND%20a:%calf-webview%22) |
| **calf-permissions** | API that allows you to handle permissions | Android, iOS | [![Maven Central](https://img.shields.io/maven-central/v/com.mohamedrejeb.calf/calf-file-picker)](https://search.maven.org/search?q=g:%22com.mohamedrejeb.calf%22%20AND%20a:%calf-file-picker%22) |
| **calf-geo** | API that allows you to access geolocation | Coming soon... 🚧 🚧 | Coming soon... 🚧 🚧 |
| **calf-navigation** | Native navigation wrapper | Coming soon... 🚧 🚧 | Coming soon... 🚧 🚧 |
Expand Down
17 changes: 10 additions & 7 deletions docs/installation.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@

| Kotlin version | Compose version | Calf version |
|----------------|-----------------|--------------|
| 1.9.22 | 1.6.0 | 0.4.0 |
| 1.9.22 | 1.6.0 | 0.5.0 |
| 1.9.21 | 1.5.11 | 0.3.1 |
| 1.9.20 | 1.5.10 | 0.2.0 |
| 1.9.0 | 1.5.0 | 0.1.1 |
Expand All @@ -13,13 +13,16 @@ Add the following dependencies to your module `build.gradle.kts` file:

```kotlin
// For Adaptive UI components
api("com.mohamedrejeb.calf:calf-ui:0.4.0")
api("com.mohamedrejeb.calf:calf-ui:0.5.0")

// For Adaptive FilePicker
implementation("com.mohamedrejeb.calf:calf-file-picker:0.4.0")
// For WebView
implementation("com.mohamedrejeb.calf:calf-webview:0.5.0")

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

// For Permissions
implementation("com.mohamedrejeb.calf:calf-permissions:0.4.0")
implementation("com.mohamedrejeb.calf:calf-permissions:0.5.0")
```

If you are using `calf-ui` artifact, make sure to export it to binaries:
Expand All @@ -35,7 +38,7 @@ kotlin {
.forEach {
it.binaries.framework {
...
export("com.mohamedrejeb.calf:calf-ui:0.4.0")
export("com.mohamedrejeb.calf:calf-ui:0.5.0")
}
}
...
Expand All @@ -52,7 +55,7 @@ kotlin {
...
framework {
...
export("com.mohamedrejeb.calf:calf-ui:0.4.0")
export("com.mohamedrejeb.calf:calf-ui:0.5.0")
}
}
...
Expand Down
2 changes: 1 addition & 1 deletion docs/permissions.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
Add the following dependency to your module `build.gradle.kts` file:

```kotlin
implementation("com.mohamedrejeb.calf:calf-permissions:0.4.0")
implementation("com.mohamedrejeb.calf:calf-permissions:0.5.0")
```

## Usage
Expand Down
73 changes: 3 additions & 70 deletions docs/ui.md
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
Add the following dependency to your module `build.gradle.kts` file:

```kotlin
api("com.mohamedrejeb.calf:calf-ui:0.4.0")
api("com.mohamedrejeb.calf:calf-ui:0.5.0")
```

If you are using `calf-ui` artifact, make sure to export it to binaries:
Expand All @@ -30,7 +30,7 @@ kotlin {
.forEach {
it.binaries.framework {
...
export("com.mohamedrejeb.calf:calf-ui:0.4.0")
export("com.mohamedrejeb.calf:calf-ui:0.5.0")
}
}
...
Expand All @@ -47,7 +47,7 @@ kotlin {
...
framework {
...
export("com.mohamedrejeb.calf:calf-ui:0.4.0")
export("com.mohamedrejeb.calf:calf-ui:0.5.0")
}
}
...
Expand Down Expand Up @@ -186,70 +186,3 @@ AdaptiveTimePicker(
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](images/WebView-android.png) | ![Web View iOS](images/WebView-ios.png) |

```kotlin
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`:

```kotlin
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:

```kotlin
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.
78 changes: 78 additions & 0 deletions docs/webview.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,78 @@
# File Picker

## Installation

[![Maven Central](https://img.shields.io/maven-central/v/com.mohamedrejeb.calf/calf-webview)](https://search.maven.org/search?q=g:%22com.mohamedrejeb.calf%22%20AND%20a:%calf-webview%22)

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

```kotlin
implementation("com.mohamedrejeb.calf:calf-webview:0.5.0")
```

## Usage

`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](images/WebView-android.png) | ![Web View iOS](images/WebView-ios.png) |

```kotlin
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`:

```kotlin
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:

```kotlin
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.
5 changes: 3 additions & 2 deletions mkdocs.yml
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
# Project information
site_name: 'Calf'
site_description: 'A library that allows you to easily create adaptive UIs for your Compose Multiplatform apps.'
site_description: 'A library that allows you to easily create adaptive UIs and access platform specific APIs from your Compose Multiplatform apps.'
site_author: 'Mohamed Rejeb'
site_url: 'https://github.com/MohamedRejeb/Calf'
remote_branch: gh-pages
Expand Down Expand Up @@ -48,6 +48,7 @@ nav:
- 'Overview': index.md
- 'Installation': installation.md
- 'Adaptive UI': ui.md
- 'WebView': webview.md
- 'File Picker': filepicker.md
- 'Permissions': permissions.md
#- 'Change Log': changelog.md
Expand Down Expand Up @@ -86,4 +87,4 @@ plugins:

# Copyright
copyright: |
&copy; 2023 <a href="https://github.com/MohamedRejeb" target="_blank" rel="noopener">Mohamed Rejeb</a>
&copy; 2024 <a href="https://github.com/MohamedRejeb" target="_blank" rel="noopener">Mohamed Rejeb</a>

0 comments on commit 684c6b9

Please sign in to comment.