index.qmd

---
title: "blockr.ui"
format: md
---

<!-- index.md is generated from index.Rmd. Please edit that file -->

```{r, include = FALSE}
library(htmltools)
knitr::opts_chunk$set(
  collapse = TRUE,
  comment = "#>",
  fig.path = "man/figures/index-",
  out.width = "100%"
)
```

<!-- badges: start -->
[![Lifecycle: experimental](https://img.shields.io/badge/lifecycle-experimental-orange.svg)](https://lifecycle.r-lib.org/articles/stages.html#experimental)
[![ci](https://github.com/cynkra/blockr.ui/actions/workflows/ci.yml/badge.svg)](https://github.com/cynkra/blockr.ui/actions/workflows/ci.yml)
[![CRAN status](https://www.r-pkg.org/badges/version/blockr.ui)](https://CRAN.R-project.org/package=blockr.ui)
<!-- badges: end -->

The goal of blockr.ui is to provide an alternative user interface for [`{blockr.core}`](https://cynkra.github.io/blockr.core/).

## Installation

You can install the development version of blockr.ui from [GitHub](https://github.com/) with:

``` r
# install.packages("devtools")
devtools::install_github("cynkra/blockr.ui")
```

<p style="text-align: center;">
![](./man/figures/hex.png){width="50%"}
</p>

## Example

To run the demo app:

```{r blockr.ui-demo, eval=FALSE, echo = TRUE}
library(blockr.dplyr)
library(blockr.ui)
run_demo_app()
```

::: {.callout-note}
The demo below runs with shinylive. Not all feature may work as expected due to compatibility issues with webR.
:::

```{r shinylive_url, echo = FALSE, results = 'asis'}
# extract the code from knitr code chunks by ID
code <- paste0(
  c(
    "webr::install(\"blockr.ui\", repos = \"https://cynkra.github.io/blockr.webR/\")",
    "webr::install(\"blockr.dplyr\", repos = \"https://cynkra.github.io/blockr.webR/\")",
    knitr::knit_code$get("blockr.ui-demo")
  ),
  collapse = "\n"
)

url <- roxy.shinylive::create_shinylive_url(code, header = FALSE)
```

```{r shinylive_iframe, echo = FALSE, eval = TRUE}
tags$iframe(
  class = "border border-5 rounded shadow-lg",
  src = url,
  width = "150%",
  height = "900px"
)
```

## Development

JS code is managed by `esbuild` [`{charpente}`](https://github.com/RinteRface/charpente?tab=readme-ov-file#using-esbuild-and-mocha). To create a new JS file do and compile the entire project:

```r
charpente::create_js("file-name")
charpente::build_js()
```