# Owlet

Owlet is a Typed Spreadsheet UI library for ScalaJS. It is built on top of Monix and Typelevel Cats to combine predefined input fields to a reactive user interface, just like what you would done in spreadsheet. Owlet is inspired by the PureScript library Flare.

## Get Started

### 1. add dependency in your `build.sbt`

#### Stable

```
libraryDependencies += "us.oyanglul" %%% "owlet" % "<maven version>"
```

#### RC

```
resolvers += "jitpack" at "https://jitpack.io"
libraryDependencies += "com.github.jcouyang" % "owlet" % "<jitpact version>"
```

### 2. Now programming UI is just like using spreadsheet

```
import us.oyanglul.owlet._
import DOM._
val a1 = number("a1", 1)
val a2 = number("a2", 2)
val a3 = number("a3", 3)
val sum = fx[Double, Double](_.sum, List(a1, a2, a3))
render(a1 &> a2 &> a3 &> sum, "#app")
```

or

```
val a1 = number("a1", 1)
val a2 = number("a2", 2)
val a3 = number("a3", 3)
val sum = a1 |+| a2 |+| a3
renderOutput(sum, "#app")
```

### eh… Ready for 3D spreadsheet programming?

You know spreadsheet is 2D, when we have monad, it became 3D

!!!Monad Warning!!!

```
val numOfItem = int("noi", 3)
val items = numOfItem
.flatMap(
no => (0 to no).toList.parTraverse(i => string("inner", i.toString))
)
```

- imagine that
`numOfItem`

lives in dimension (x=1, y=1, z=0) - then
`items`

live in dimension (x=1,y=1,z=1)

you can render either `numOfItem`

or `items`

seperatly, for they live in diffenrent z axis (which means render `items`

you won’t able to see `numOfItem`

even it’s flatMap from there

but you can some how connect the dots with magic `&>`

```
renderOutput(numOfItem &> items, "#output")
```

Anyway, just keep in mind that monad ops `map`

`ap`

`flatMap`

… will lift your z axis
`parMap`

`parAp`

`parXXX`

instead, will keep them in the same z axis