KHAKRA (WIP)

Kotlin React bindings for ChakraUI

Using

The API is for the most part identical to the JS version, so have a look at official docs for each component's usage samples.

Installation

The library is not yet published to Maven Central, so you'll need to add a private repository.

// build.gradle.kts
repositories {
  // Either
  maven("https://jitpack.io")
  // Or
  maven("https://maven.pkg.github.com/mpetuska/khakra") {
    credentials {
      username = project.properties["gpr.username"]?.toString() ?: System.getenv("GH_PKG_USER")
      password = project.properties["gpr.password"]?.toString() ?: System.getenv("GH_PKG_PASSWORD")
    }
  }
}

You'll also need to enable new IR JS compiler backend. You can do this by adding the following in your gradle.properties.

# gradle.properties
kotlin.js.compiler=ir

Finally, add the dependency itself.

// build.gradle.kts
dependencies {
  implementation("com.github.mpetuska:khakra:$khakraVersion")
}

DSL

In addition to JS API, each component has a dedicated builder DSL taking two optional parameters - props builder lambda and child layout builder lambda. These DSLs are also marked with @DslMarker (named @KhakraDSL) so IntelliJ should colour them nicely for you. Sample usage:

fun main() {
  render(document.getElementById("root")) {
    ChakraProvider {
      Image({
        src = "https://bit.ly/2Z4KKcF"
        alt = "Rear view of modern home with pool"
      })
      Box({
        `as` = "button"
        borderRadius = "md"
        bg = "tomato"
        color = "white"
        px = 4
        h = 8
      }) {
        +"Button"
      }
    }
  }
}

Utilities

If you encounter some missing properties, please report them via github issue. However, to avoid blocking your flows, the library provides get and set operator extensions on Any type. This allows you to set and get any property on any object.

NOTE: This is completely unsafe, so make sure you know what you're doing!

fun RBuilder.Example() {
  Image({
    src = "https://bit.ly/2Z4KKcF" // Known property

    this["nonExistingProperty"] = 69 // <--------------------------------
    this["anotherNonExisting"] = this["nonExistingProperty"] // <--------
    val retrieved: Int = this["nonExistingProperty"] // Autocasted to Int
    println(this["nonExistingProperty"]) // 69
    println(this["nonExistingProperty"] == this["anotherNonExisting"]) // true
  })
}

Implementation Progress

The bellow is a tracker list of chakra-ui modules (55) that are being or have been ported.

• accordion
• alert
• breadcrumb
• button
• checkbox
• clickable
• close-button
• color-mode
• control-box
• counter
• css-reset
• descendant
• editable
• focus-lock
• form-control
• hooks
• icon
• icons
• image
• images
• input
• layout
• live-region
• media-query
• menu
• modal
• number-input
• pin-input
• popover
• popper
• portal
• progress
• radio
• react
• select
• skeleton
• skip-nav
• slider
• spinner
• stat
• styled-system
• switch
• system
• table
• tabs
• tag
• test-utils
• textarea
• theme
• theme-tools
• toast
• tooltip
• transition
• utils
• visually-hidden

Getting Help

If you get stuck or have some general feedback/suggestions, you have three options to proceed:

1. Post your issue in GitHub Discussions
2. Raise a GitHub Issue
3. Post a message in #khakra Slack channel

Developing

Run the sandbox to get components rendered:

./gradlew sandbox:browserDevelopmentRun -t

Publish to your local maven repository:

./gradlew lib:publishToMavenLocal -Pversion=0.0.0