sharkdp / purescript-flare

A special-purpose UI library for Purescript

Flare

Flare is a special-purpose UI library for PureScript. It is built on top of purescript-signal and uses Applicative-style programming to combine predefined input fields to a reactive user interface. Flare is inspired by the Haskell library typed-spreadsheet. The main design-criterion of this library is ease of use.

• Tutorial - Introduction with many examples
• Try Flare - Write and compile Flare UIs in your browser
• Talk - A talk I gave about Flare and FlareCheck at LambdaConf 2016
• Tests - A lot of additional examples
• Quick start - Start a new Flare project
• Module documentation

Projects that use Flare

• purescript-sparkle - QuickCheck-style interactive tests
• purescript-flaredoc - Interactive documentation using FlareCheck (see -arrays, -strings, -colors)
• purescript-isometric - Interactive 3D rendering
• Nature invented it first - Blog post with interactive animation

Building

bower install
pulp build -O -I test -m Test.Main -t html/main.js

purescript-flare's Issues

Update to PureScript 0.13

Is there a plan to update to PureScript 0.13? I do see that this would require and update for purescript-drawing paf31/purescript-drawing#32

Add radio groups

Add radioGroup analogous to select

Add purescript-smolder as a backend

It would be nice to have Smolder as a backend for Flare to easily construct HTML output.

Add a way to structure the input fields

There could be a group :: UI _ a -> UI _ a function which would not affect the output, but structure the control fields (maybe with HTML5's <fieldset>).

Question about extending the library

Hi!
Thanks for taking the time to develop this project. I really like it.

I was wondering what would be the most straightforward way to extend the existing collection of components? For example I would like to add <input type="file"> one.

Use purescript-nonempty

The API for select and radioGroup would be much nicer with NonEmpty a instead of .. -> a -> Array a -> ...

Support situations where the state depends on input and vice versa

I have been browsing around for creating user interfaces in purescript, and I think I like this library the most because of its simplicity, good job!

I have run into a problem that I can't resolve on my own. I have a situation in which I have a past dependent state that is modified by the input. That is no problem except the state also influences what kinds of controls appear on the screen. That is the tricky part.

For a concrete example, I want to make a program that visualizes a JSON file, by drawing shapes, and the shapes can be dragged around and stuff. This already works, I have used the signals from purescript-signal. However, I can't really do what I want.

The only way I can think of doing it is by creating a channel for the state, subscribing and creating a signal, and combining it with the input signal, and using innerFlare to hide and make elements appear. I think this would work, but I would need to perform effects inside the foldp function. I have found a function that would allow me to do what I want in Signal.Effect. It is called foldEffect, and it does exactly what I want.

I could implement it, but I need to deconstruct the UI and Flare types. The implementation would be something like

foldEffect :: forall a b. (a -> b -> Effect b) -> b -> UI a -> UI b
foldEffect f b (UI eff) = lift $ do
    (Flare _ signal) <- eff
    SE.foldEffect f b signal

Will you accept a pull request with this new feature?

If you know of a simpler way of doing what I want, please let me know. For a simpler example of my problem, consider the following simplified use case:

You have a button that says "INC" and a number. If you press "INC" the number will increase. When the number hits 10, a new button will appear that says "RESET". If you press it the number will reset to 0, and the "RESET" button will disappear.

Thanks

Use dom attributes.

Hello @sharkdp Awesome work! But sometime we need use specific class, type, id, etc. Will be better have support for this ability in purescript-flare. Thanks.

Try Flare link is broken

The Try Flare link in the README still links to Try PureScript, but it doesn't load the flare backend.

I realize this is probably more to do with Try PureScript no longer providing that backend, or perhaps this library needs to be updated or added to some package set, but I thought it was worth creating an issue here.

Can we use free applicative functors for Flare?

Right now, we use the 'effectful' type

newtype UI e a = UI (Eff (dom :: DOM, chan :: Chan | e) (Flare a))

as our main applicative functor to create the user interfaces. Here, Flare is defined as

data Flare a = Flare (Array Element) (Signal a)

It seems unnecessary that we have to include the effects at this stage already. It would be much nicer to work with a 'pure' data type similar to Flare and only introduce the effects when actually running the UI (Flare itself is also an applicative functor).

My initial thinking was that it is necessary to include the effects, because we have to construct the HTML Elements (DOM) and set up the channels for the corresponding signals (Chan). It was very easy to do these things inside the Eff monad.

But if we are able to defer the actual setup, we could get rid of the effects. This would involve two things:

1. An ADT for Element which simply remembers the components which we have to set up (something like data Element = InputInt Label Int | InputBool Label Bool | .. which stores the label and default values). This is the easy part [*].
2. A structure which remembers the transformations to the actual data (maps and applys).

@paf31 @ethul: I'm not experienced enough to see this right away, but if one of you has some free time to have a short look, this would be great. My idea was that free applicative functors from purescript-freeap could actually be a good fit for point 2. As far as I understand, the free applicative functor 'remembers' all the transformations and I could run it via foldFreeAp at the point when I actually want to set up the UI (via a natural transformation from Flare to Signal??).

[*] Actually, this would make things like #2 much simpler to implement.

Custom input fields

I'm about to give it a shot, but some insights on how to proceed would be great! I'll report back on my progress in this issue.

Here's a vague roadmap of what I want to try:

1. to get me started, a number slider with the number displayed on the side of the slider.
2. maybe I'll try a number slider which can controlled both by a slider and a text input.
3. then creating field groups to have some visual cues about which fields go with others. I guess that would be a HOC. fieldset already does this.
4. allowing fields to be hidden (also a HOC)

Add color input?

HTML5 supports <input type="color" ..>, so we could add a color input that returns a Drawing.Color.

Generate unique (and valid) IDs

Generate unique IDs for the DOM elements. Currently, we use the Label as ID in the DOM which causes problems if the Label contains a space or if several input elements use the same Label. In the latter case, the for-argument in <label for="ID">..</label> does not work as expected.

Support for advanced input fields

• A slider with (editable) value: http://rangeslider.js.org/
• A slider with multiple values http://leaverou.github.io/multirange/

Support list components

I don't know if this is possible but something like

many :: forall a. a -> UI a -> UI (List a)

might be nice. It could be rendered as a list of items, each with its own Remove button, and an Add button at the top.

Consider prettier default theme for 'purescript-flare'

I would like to use purescript-flare as main library for for my frontend! But it's also would be good to have some pretty theme. Something like colorful material design.. Or something simpler 🙂 I'm a CSS guru, so I can't do this... But this would be really great to have!

Here is my question about similar library on Reddit:

• https://www.reddit.com/r/purescript/comments/8nprkr/looking_for_a_library_to_create_pretty_webpages/

SVG support

Is there a plan to support vector graphics as well? I can't seem to find any standalone SVG lib for Purescript however..

dat-gui - style UIs with Flare?

We could render Flare components in a way similar to:

https://code.google.com/archive/p/dat-gui/
http://workshop.chromeexperiments.com/examples/gui/#1--Basic-Usage
https://github.com/dataarts/dat.gui

Try Flare is down

Apparently because compile.purescript.org is down?

Add date/time inputs

Support textarea in addition to text field

I am using purescript-flare to transform data entered into a textfield into an HTML table, applying some processing on the way (time-sheet data). It would be cool to be able to use a textarea instead so that users see their raw input with newlines and all.

(It is my understanding that this would mean adding a foreign function that creates a textarea component. Unfortunately my JS know-how is practically zero otherwise I would try it myself.)

Add char input

Possibility to combine Signals with UI components

There should be a way to wrap a Signal a inside UI e a, such that we can combine UI elements with Signals like

mousePos :: forall e. Eff (dom :: DOM | e) (Signal CoordinatePair)

Why UI is not an instance of Monad?

I am new to PS, so please forgive me if I am asking a silly question.

Given that UI is already an instance of Functor with a candidate implementation for bind, namely innerFlare. Why UI is not a Monad instance?

Allow to specify id of generated controls

Hi there,

Trying to workaround #22 I'm looking at trying to create a layer of mirrored controls that I'll layer in the output to have more possibilities for layout. However, right now I have to select controls using their generated numerical html ids such as flare-component-2.

It would be great if it was possible to control the html id of flare components!

Cheers,

Jun

how to sequence effects with flare UI?

Say I would like a slider to choose a number n and then plot n random points.

I can do this easily if the points are deterministic, but once they're random I need to generate them in an Eff (random :: RANDOM | e) context, and it's not obvious to me how to sequence that with the UI applicative. (I tried a number of things, but none of them worked.)

See example (and non-example): https://gist.github.com/joelgrus/b27c12fc159367ea2440

I hope this is the right venue to ask this kind of question. Thanks!