Work on the UI has been continuously pushed off due the vast amount of refactoring of the domain (which is just a fancy way of saying all the types) of the application. As the domain has become more concrete and seems to be changing less and less, it is finally time to make things look pretty!
Currently the UI uses Feliz and Feliz.Bulma components since that is what came with the SafeStack template the app originated from. Moving forward, I'd instead like to build and style our UI with Feliz.DaisyUI, which builds off the popular DaisyUI library for the JS ecosystem.
Before we can leverage DasiyUI, we need to head to tailwind.config.js and change
plugins: []
to
plugins: [require('daisyui')]
which gives the DasiyUI css which tells tailwind to give the root html div DasiyUI css.
The above is going to basically break all the UI the next time you launch the app, but this is fine since we are gonna be fixing it in this ticket. Gotta break some eggs and all...
So for example, here is a simple example of converting Bulma to DaisyUI
Before:
open Feliz
open Feliz.Bulma
let view model dispatch =
Bulma.input.number [
prop.max (neg2To5ToInt Five)
prop.min (neg2To5ToInt NegTwo)
prop.value (neg2To5ToInt model)
prop.onChange (ChangedNeg2To5 >> dispatch)
]
After:
open Feliz
let view model dispatch =
Html.input [
prop.type' "number"
prop.className "input"
prop.max (neg2To5ToInt Five)
prop.min (neg2To5ToInt NegTwo)
prop.value (neg2To5ToInt model)
prop.onChange (ChangedNeg2To5 >> dispatch)
]
This is a super simple example, but conveys what we are trying to do. You could even argue that we should extract this into the ViewUtils.fs file for easy reuse since I see us needed number inputs all over the place. Good first task.
By default we will try and use components from the which can be accessed by declaring open Feliz.DaisyUI, then underneath calling Dasiy. which with Ionide (the intellisense for F# in vscode) shows you all the premade components. You can also look at the nice documentation provided on the Feliz.DaisyUI web page.
This task can be considered complete when Feliz.Bulma is remove as a depenecy and the UI is more or less usable. This is just an initial ticket to get our feet wet with DaisyUI.
Work on the UI has been continuously pushed off due the vast amount of refactoring of the domain (which is just a fancy way of saying all the types) of the application. As the domain has become more concrete and seems to be changing less and less, it is finally time to make things look pretty!
Currently the UI uses Feliz and Feliz.Bulma components since that is what came with the SafeStack template the app originated from. Moving forward, I'd instead like to build and style our UI with Feliz.DaisyUI, which builds off the popular DaisyUI library for the JS ecosystem.
Before we can leverage DasiyUI, we need to head to
tailwind.config.jsand changeplugins: []toplugins: [require('daisyui')]which gives the DasiyUI css which tells tailwind to give the root html div DasiyUI css.The above is going to basically break all the UI the next time you launch the app, but this is fine since we are gonna be fixing it in this ticket. Gotta break some eggs and all...
So for example, here is a simple example of converting Bulma to DaisyUI
Before:
After:
This is a super simple example, but conveys what we are trying to do. You could even argue that we should extract this into the
ViewUtils.fsfile for easy reuse since I see us needed number inputs all over the place. Good first task.By default we will try and use components from the which can be accessed by declaring
open Feliz.DaisyUI, then underneath callingDasiy.which with Ionide (the intellisense for F# in vscode) shows you all the premade components. You can also look at the nice documentation provided on the Feliz.DaisyUI web page.This task can be considered complete when Feliz.Bulma is remove as a depenecy and the UI is more or less usable. This is just an initial ticket to get our feet wet with DaisyUI.