dzoukr / feliz.bulma Goto Github PK
View Code? Open in Web Editor NEWBulma UI (https://bulma.io) wrapper for amazing Feliz DSL
Home Page: https://dzoukr.github.io/Feliz.Bulma/
License: MIT License
Bulma UI (https://bulma.io) wrapper for amazing Feliz DSL
Home Page: https://dzoukr.github.io/Feliz.Bulma/
License: MIT License
Hi,
I'm relatively new at F#, so my apologies if the code in this repository is self-documenting to others.
I upgraded from Feliz.Bulma
1.14 to 2.3, and now my nav doesn't compile anymore.
Old code:
let private navbarStart dispatch user currentPage =
Bulma.navbarStart [
Bulma.navbarItemA [
// content
]
Bulma.navbarItemA [
// content
]
]
let private navbarEnd =
Bulma.navbarEnd [
Bulma.navbarItemDiv [
// content
]
]
let view dispatch user currentPage =
Bulma.navbar [
color.isPrimary
prop.children [
Bulma.container [
container.isFluid
prop.children [
Bulma.navbarBrand [
Bulma.navbarItemA [
// content
]
]
Bulma.navbarMenu [
navbarStart dispatch user currentPage
navbarEnd
]
]
]
]
]
Everything works except the Bulma.navbarStart
, Bulma.navbarEnd
and Bulma.navbarBrand
.
Could you give me any pointers on how to convert, or perhaps a basic template of what a nav should look like in the new version?
Using properties on a Bulma.select
element does not work due to the class name ending up on the inner <select>
tag rather than the surronding <div>
Example:
Bulma.field [
Bulma.select [
select.isDanger ] ]
generates the following HTML
<div class="field">
<div class="select">
<select class="is-danger"></select>
</div>
</div>
The dropdown is not styled correctly.
For the styling to work the following HTML should be generated
<div class="field">
<div class="select is-danger">
<select></select>
</div>
</div>
I think it is good to think about version 2 and API changes / breaking changes to make library better. Based on great summary written by @MangelMaxime at Zaid-Ajaj/Feliz#155 I think some (most) of Maxime's feedback issues should be fixed.
The things I fully agree and would love to fix them in v2.
Some of the components don't follow the same convention
There should be unified way of dealing with components. Most likely in a way Bulma.input.text
or Bulma.input.password
instead of Bulma.inputPassword
. Approach like this will also resolve another point I agree with:
Feliz.Bulma doesn't provide a way for controlling which HTML element we want to output.
Yes, mentioned API like Bulma.field.div
would resolve this, but I would not add it to every element - there must be sane defaults (based on Bulma docs). Otherwise the API would be too talky with low added value. Also, for elements like Button, I need to double think. Bulma.button.a
looks better than Bulma.buttonA
, but Bulma.button.button
(default with using button element) looks terrible. But generally fully agree and everyone can search for [<Obsolete>]
in current version to see that I have been already fighting with such design mistake. Fixing that in v2 is a must!
It is not easy to add new colour support.
That was my mistake with understanding Bulma documentation. Was not sure if I can add any defined color to every element so I added colors for each component type based on docs, but if so, then Fulma approach with having one list of colors should be the way. However on API level, I'd like to keep button.isDanger
. Maybe some kind of code generator would help for this. Another approach would be not having colors directly under element modifier, but use color.isDanger
everywhere. Not sure here, really.
The things I don't see as a big issue:
Feliz.Bulma is an exact mapping over Bulma - You need to know Bulma well enough or have Bulma documentation opened 🤔
Yes, that is correct. This library was created on two monitors going through Bulma docs and adding elements and modificators. I don't think it is the bad way - there is (almost) no added layer of abstraction. On the other hand, the Bulma.tabs
is a great example how ugly such approach can be at some cases. The way for v2 could be to identify the "troublemakers" (like tabs or select, which needs to be wrapped in div by default) and the tiniest abstraction possible over it.
Feliz.Bulma makes it easy to mix components behaviours. 🤔
As Maxime wrote: Is can be nice way to extend existing component behavior, but also can lead to creating invalid code. I think it is the price for full compatibility with Feliz. Not ideal, but not the biggest issue here.
This list is not finite and will be updated during discussion with @MangelMaxime.
Updated 9. 4. 2020
Major indentified points for v2.
I am getting a lot of warnings from webpack after adding Feliz.Bulma.Calendar.
I tried cloning this repo (Feliz.bulma) and tried to build it (dotnet fake build
which runs the "RunDocs" target) and I am getting the same warnings:
WARNING in ../Feliz.Bulma.Calendar/node_modules/date-fns/locale/ar/index.d.ts 1:8
Module parse failed: Unexpected token (1:8)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
declare module 'date-fns/locale/ar' { }
|
@ ../Feliz.Bulma.Calendar/node_modules/date-fns/locale sync ^./.*$ ./ar/index.d.ts
@ ../Feliz.Bulma.Calendar/node_modules/bulma-calendar/src/js/index.js
@ ../Feliz.Bulma.Calendar/Calendar.js
@ ../Feliz.Bulma.Calendar/Calendar.fs
@ ./Views.Calendar.fs
@ ./View.fs
@ ./App.fs
@ ./Docs.fsproj
@ multi ./Docs.fsproj
Any clues on what is causing this?
As agreed on #20, for some chosen elements like tabs
we should create tiny layer of abstraction to make work with it easier.
In Visual Studio, I get The module/namespace 'Fable.React' from compilation unit 'Fable.React' did not contain the namespace, module or type 'ReactElement'
whenever I try to autocomplete Bulma. In Visual Studio Code, I get this at the top of the module.
The project compiles fine despite this using dotnet run
.
What do I do about this? It might be due to me upgrading all the packages to the latest, but if so, I'd rather not resolve it by downgrading.
When trying to use the DateTimePicker extension, I get
error FSHARP: The type 'IRefValue' is not defined
using V2.3 of DatePicker and 2.18 of Bulma. Am I missing something?
Is it possible to support also spans as select?
I am thinking of something like this:
Bulma.select.span [ ]
//and
Bulma.select.div [ ]
I could send you a PR but that will break things. What do you think?
Is there an example showing use of Bulma.columns.isCentered? I tried following and it is not working
Bulma.columns [
columns.isCentered
Bulma.column [
Hello,
It is currently requiring FSharp.Core 5.0 but I don't think it is using any feature from that version. Feliz is still on 4.7.2
It is possible to apply the "rules" to all the packages in the directory by adding a Directory.Build.targets
like this one
At least, it is how we did it for Fable projects
Hi,
I cannot compile my project after trying to add and using Feliz.Bulma.Calendar. I have installed the dependencies manually using paket and yarn, and running femto
it reports that everything is ok.
But as soon as I add Calendar.calendar ...
to my view my project won't compile and I get this error:
error FS0192 : internal error : the anonymous record <>f__AnonymousType2118640243`6 has not been generated in the pre-phase of generating this module
It's not a very descriptive error message, it could very well be that I am doing something wrong on my side, I just can figure out what.
Is there a working sample using Feliz.Bulma.Calendar available?
Column is missing responsive version of is-1
... is-12
.
Bulma source code to show that it's supported.
Same for is-offset-1
... is-offset-12
Bulma source code all the screen size have something similar to that part.
I recently upgraded a project that use Feliz.Bulma to Webpack 5 and Fable 3 beta. After the upgrade I get lots of React warnings about duplicate className properties when running in development mode:
Error: Property className is duplicated
at createObjDebug (Util.js?e456:467)
at eval (DashBoard.js?807b:500)
at renderWithHooks (react-dom.development.js?61bb:14985)
...
I think this is due to Helpers.combineClasses not filtering out the duplicate className properties (it only combines them into a new classes property).
Hi,
if I copy paste the source from the documentation Felix.Bulma
which is:
Bulma.columns [ Bulma.column [ column.is2 // <-- note context helper here prop.children [ Bulma.button "Click me" ] ] ] ])
I get a
The type 'Bulma' does not define the field, constructor or member 'button'. Maybe you want one of the following: buttons
error.
I think it should be:
Bulma.columns [ Bulma.column [ column.is2 // <-- note context helper here prop.children [ Bulma.button
.button "Click me" ] ] ] ])
I'm trying to add a header to a panel like this:
Bulma.panel [
Bulma.panelHeading [
Html.text "Undo Redo Stack"
]
for e in (state |> UndoList.toTimedList) ->
match e with
| Past (s, m) ->
Bulma.panelBlock.a [
Html.text (m.Description + " (past)")
]
| Present (s, m) ->
Bulma.panelBlock.div [
Html.text (m.Description + " (present)")
]
| Future (s, m) ->
Bulma.panelBlock.a [
Html.text (m.Description + " (future)")
]
]
this gives me a warning:
The result of this expression has type 'Fable.React.ReactElement' and is implicitly ignored. Consider using 'ignore' to discard this value explicitly, e.g. 'expr |> ignore', or 'let' to bind the result to a name, e.g. 'let result = expr'.
And the header is not rendered:
What am I doing wrong?
As agreed with @MangelMaxime, we should have menu.item
instead of menuItem
and so on.
It feels like I am missing something when I am trying to use responsive helpers. I can't find them, or figure out how to conditionally hide/show content using media breakpoints.
https://bulma.io/documentation/modifiers/responsive-helpers/#hide
I expected them to be available on helpers
so I could do something like this:
Bulma.column [
helpers.isHiddenMobile
prop.text "My column for larger screens only"
]
But there is no helpers.isHiddenMobile
. Maybe there is another way to achieve what I am trying to do?
Of course, as workaround I can add the class with prop.classes [ "is-hidden-mobile" ]
. I was just thinking there is a type-safe way to do it from within Feliz.Bulma.
I think it is better have attributes that are coming from the same component.
for example:
Bulma.input [
input.isPrimary
input.hasTextBlack
input.isLarge
]
Bulma.button [
button.isPrimary
button.isLarge
button.text "Click"
]
is better than having to look in different types for the component properties
Bulma.button [
color.isPrimary
size.isLarge
prop.text "Click"
]
I know it requires a bit of duplication but the bundle size isn't impacted and it makes much much easier to look for properties on a per-component basis.
Please @Zaid-Ajaj,
this one needs your help. I'd like to have Feliz.Bulma
package correctly setup for Femto
- please could you check .fsproj
file (and probably .nuspec
) that I did it correctly? It's my first Fable package ever, so better ask for help someone skilled like you. 😉
I am most likely missing something, but I cannot figure out how to set values on the TagsInput
component.
I am using the TagsInput component in a form. By default, the list of tags is empty. When the form has been filled out and submitted, I would like the TagsInput component to become empty again. How do I do that? I cannot set the tags directly, and default values are only set when the page is initially loaded.
Here is the code I'm using to generate the TagsInput:
Bulma.field.div [
prop.children[
Bulma.label "Main ingredients"
TagsInput.input[
tagsInput.defaultValue model.MainIngredients
tagsInput.onTagsChanged (fun tags -> SetMainIngredients tags |> dispatch)
tagsInput.placeholder "e.g chicken, pasta"
tagsInput.allowDuplicates false
tagsInput.caseSensitive false
tagsInput.tagProperties[
tag.isRounded
color.isPrimary
]
]
]
]
Hi Roman, awesome work on the extensions of Feliz.Bulma ❤️ 🔥 I was wondering if it is a good idea to simplify the namespacing of the libraries from Feliz.Bulma.Extensions.{Library}
to just Feliz.Bulma.{Library}
? This format is easier to remember when installing and is less confusing when opening the namespace in source files. Since this is very early days of Feliz.Bulma, I think a change might be doable.
Fable ecosystem already has a bunch of these libraries with long namespaces that confuse the users all the time, even
Fable.Core
itself! why not justopen Fable
instead ofFable.Core
andFable.Core.JsInterop
where you essentially always need helpers from both (Emit
andjsNative
) but I digress 😄
I realise this is probably an obvious question for most people, but I know mostly F# stuff, not much web stuff.
Where is my style sheet? Do I just copy paste @import "~bulma-calendar";
into it?
Links to docs: https://dzoukr.github.io/Feliz.Bulma/#/datetimepicker
As agreed in #20, check API to don't mix conventions.
It is strange: the example of the documentation of Bulma works fine. Using timePicker in my project, it always displays all elements of the popup window into the page directly. It only works with display mode inline as expected. How is that possible? Can it be a problem when I use the Bulma.panel?
Is it possible to change the cursor to hand when hovering the buttons? It looks a bit strange with the edit line over them?
And maybe there could be a hint, that 'defaultValue' is the (start) value of the element :D
As agreed on #20, there should be (where it makes sense) something like [component].[control of the output].
Generate prop aliases for specific elements such that there is no need to fallback to prop
for "most commonly used" properties:
Before
Bulma.columns [
Bulma.column [
column.is2
prop.children [
Bulma.button [
button.isPrimary
prop.onClick (fun _ -> DoStuff)
prop.text "Do Stuff"
]
]
]
]
After
Bulma.columns [
Bulma.column [
column.is2
column.children [
Bulma.button [
button.isPrimary
button.onClick (fun _ -> DoStuff)
button.text "Do Stuff"
]
]
]
]
I think this looks much cleaner and symmetric. Users would only fallback to prop
when needing some exotic properties.
"Most common properties" are things like prop.text
, prop.children
, prop.onClick
(button), prop.onChange
(input), prop.valueOrDefault
(input), prop.key
, prop.src
(image) etc.
What do you think about this?
After running a paket update, any view with a DateTimePicker fails with a meaningless error:
I've confirmed that even just the following causes the error:
Feliz.Bulma.DateTimePicker.dateTimePicker []
Unfortunately, pinning Feliz.Bulma.DateTimePicker to version 2.3.0 (which was working previously) does not solve the problem. I plan to undergo tomorrow the laborious process of trying to identify which upstream package(s) may have caused the issue, but I thought I'd get this posted in case there's something obvious I might be missing.
FWIW, the call to the date picker is in a SAFE Stack application, which I'm running on Chrome in VS Code. Target framework is net6.0.
SEMI-UPDATE: The error specifically seems to be occurring with any call to functions on the "React" type in React.fs in the Feliz project. (I haven't yet figured out what and how far to roll back to get DateTimePicker back to working condition.)
UPDATE: Okay, I can get this error to go away by adding Feliz.CompilerPlugins to my packages and pinning it to version 1.10. Nothing else (including DateTimePicker) has to be pinned to an earlier version.
In Bulma is-gapless
is applied to columns
container and not column
<div class="columns is-gapless">
<div class="column">
No gap
</div>
<div class="column">
No gap
</div>
<div class="column">
No gap
</div>
<div class="column">
No gap
</div>
</div>
This issue originates from https://twitter.com/cognipla/status/1341314506723643392
It should actually be possible to have all the packages opened with a single open Feliz.Bulma
instruction. We are actually already doing it in Fulma for the extension module.
See how I have access to Checkradio
and Calendar
using only open Fulma.Extensions.Wikiki
.
All the package seems to create their own namespace under Feliz.Bulma.X
If we change all those declarations to namespace Feliz.Bulma
then the user should be able to just use open Feliz.Bulma
and then have access to all the prefixed modules:
open Feliz.Bulma
Checkradio.checkbox [ ]
Bulma.button.div [ ]
etc.
Things to check for the impact of such a change:
ElementLiterals
still works as expected because it will be declared several times under the same namespace. They are declared in private so perhaps it doesn't cause problemsAs agreed in #20, we should rethink how to work with colors.
One way would be having button.color color.isDanger
, or just have long list of possible colors and using it directly color.isDanger
(which I like more right now). Should discuss further.
I ask because I saw a completed PR (#42) mentioning version 0.9.0
Im struggling with finding correct abstractions for sub-items for Level (level -> heading + level -> title)
Hi there,
somehow the navbars don’t show the navbar links on mobile devices.
Any idea why?
Thanks,
Tim
Bulma.title.p [
Bulma.title.is5
prop.text title
]
should be
Bulma.title.p [
title.is5
prop.text title
]
Bulma v1 is out and has a few breaking changes that might be worth addressing.
Most notably, tile
has been replaced in favor of grid
, which I'm enjoying quite a bit already just using straight Html.div
s.
Today I was playing around with Bulma.Timeline and found that Bulma.Timeline has the possibility to set no-headers
to the timeline. This, however, is not possible with Feliz.Bulma.Timeline, could it be added?
missing classes:
no-headers
on the timelineis-first
on a timeline itemis-last
on a timeline item<header class="timeline no-headers">
<div class="timeline-item is-first">
<div class="timeline-marker"></div>
<div class="timeline-content">
<p class="heading">Start</p>
<p>My custom start position without heading</p>
</div>
</div>
<div class="timeline-item is-last">
<div class="timeline-marker"></div>
<div class="timeline-content">
<p class="heading">End</p>
<p>My custom end position without heading</p>
</div>
</div>
</header>
To be honest, I already have it implemented and will provide a pull request.
Hey Roman!
I couldn't find the right property to bind my calendar pickers value to my model's values so that if I change the dates in code or using another component theyre reflected in the input box of the calendar. Is that something you've mapped over?
Many thanks :)
This may be the worng place for this, so feel free to close.
I was wondering if this library provides support for dealing with multiple classes?
Html.div [
prop.classes [ "field"; "has-addons" ]
prop.children [
Html.div [
prop.classes [ "control"; "is-expanded"]
prop.children [
Html.input [
prop.classes [ "input"; "is-medium" ]
prop.valueOrDefault state.NewTodo
prop.onChange (SetNewTodo >> dispatch)
]
]
]
]
]
I am trying to convert this html block to use Feliz.Bulma instead, but have compilation issues when trying to write it in this way:
Bulma.field [
field.hasAddons
Bulma.control [
control.isExpanded
prop.children [
Bulma.textInput [
input.isMedium
prop.valueOrDefault state.NewTodo
prop.onChange (SetNewTodo >> dispatch)
]
]
]
]
I get this error:
This expression was expected to have type
'IReactProperty'
but here has type
'Fable.React.ReactElement'
In the Bulma docs, an image is defined as:
<figure class="image is-128x128">
<img src="https://bulma.io/images/placeholders/128x128.png">
</figure>
Feliz.Bulma.image code:
Bulma.image [
image.is96x96
image.isRounded
prop.src "https://bulma.io/images/placeholders/128x128.png"
]
... generates the following:
<figure class="image is-96x96 is-rounded" src="https://bulma.io/images/placeholders/128x128.png">
</figure>
Which makes doesn't render on the DOM.
Wrapping an Html.img with Bulma.image does work:
Bulma.image [
Html.img [
image.is96x96
image.isRounded
prop.src "https://bulma.io/images/placeholders/128x128.png"
prop.alt "Image"
]
]
Is this expected behaviour?
Hello, I am trying to use Bulma.Tabs, ut I get the error that no constructors are available for Bulma.tabs.
I copy pasted the example from https://dzoukr.github.io/Feliz.Bulma/#/documentation/tabs and get the same error.
With Feliz Bulma 1.x, using Bulma.subtitle2 would result in an <h2 class="subtitle is-2">
. After the upgrade to 2.0, Bulma.subtitle.h2 results in an <h2 class="subtitle">
, i.e. without the size modifier.
Using module members with [<Literal>]
for string constants makes them compile away as their value will be used inline in the generated bundle
Hello @Dzoukr,
I think the tabs modifier API is missing.
Bulma.tabs [
tabs.IsCentered // tabs is unkown
]
Hi,
I upgraded a SAFE-stack project to Feliz.Bulma v2.0.0 this morning but it no longer renders the "Running" page for some reason. I can't quite work out what the problem is, though.
This is the js code where the first error is thrown.
dispatchS(new _Shared_Shared_fs__WEBPACK_IMPORTED_MODULE_7__["MessageTypes$002ESysMsg"](3,"ChangeView",new _Shared_Shared_fs__WEBPACK_IMPORTED_MODULE_7__["TensTypes$002EViewState"](0,"SimpleView")));
}), (value$$46 = Object(_fable_fable_library_2_4_11_Util_js__WEBPACK_IMPORTED_MODULE_4__["equals"])(game.ViewState, new _Shared_Shared_fs__WEBPACK_IMPORTED_MODULE_7__["TensTypes$002EViewState"](0,"SimpleView")),
Object(_fable_Feliz_0_74_2_Interop_fs__WEBPACK_IMPORTED_MODULE_2__["mkAttr"])("checked", value$$46)), Object(_fable_Feliz_0_74_2_Interop_fs__WEBPACK_IMPORTED_MODULE_2__["mkAttr"])("key", "SimpleCR")]),
(typ = function() {
throw 1;
The upgraded version is on its own branch, with the still-working previous version on master.
Hi,
I'm probably doing something wrong but I'm getting an unexpected error which I don't understand.
I installed Feliz 1.13.0 and Feliz.Bulma 2.3.0 into a project generated by the SAFE template. The code I'm trying to write uses a navbar (parent html stripped out for brevity):
Bulma.navbar [
navbar.isPrimary
prop.children [
Bulma.container [
container.isFluid
prop.children [
Bulma.navbarBrand [
]
]
]
]
]
This code was taken from another example project on github.
At this point I get 2 exceptions when building the project:
The Bulma wrapper should be working because I have other code that generates columns and some buttons which works just fine:
Bulma.columns [
Bulma.column [
column.is2
prop.children [
Bulma.button.a [
prop.onClick (fun _ -> dispatch Decrement)
prop.text "-"
]
]
]
Bulma.column [
column.is2
prop.children [
Bulma.button.a [
prop.onClick (fun _ -> dispatch Increment)
prop.text "+"
]
]
]
]
Any idea what I'm doing wrong?
Probably related to #24
In Fulma, I added a special Text
component.
The idea was to have an easy way to customize the text using Fulma API.
I think that v1 of Feliz.Bulma expects you to use Html.*
and custom ++
operator for that.
Html.p [
text.isUppercase
++ text.isItalic
++ color.hasTextSuccess
prop.text "Hello Feliz"
]
If we add:
Bulma.text.p
Bulma.text.div
Bulma.text.span
Then we could just write:
Html.p [
text.isUppercase
text.isItalic
color.hasTextSuccess
prop.text "Hello Feliz"
]
Could we add this kind of component to Feliz.Bulma?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.