dzoukr / feliz.bulma Goto Github PK

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
			]
		]
	]
]

As agreed with @MangelMaxime, we should have menu.item instead of menuItem and so on.

Hi there,

somehow the navbars don’t show the navbar links on mobile devices.

Any idea why?

Thanks,

Tim

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'

As agreed on #20, for some chosen elements like tabs we should create tiny layer of abstraction to make work with it easier.

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?

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?

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.

Fulma documentation

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?

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:

• Namespace pollution only give access to the minimal stuff needed. Using private or internal modules should help here not exposed everything to the world.
• 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 problems

Using module members with [<Literal>] for string constants makes them compile away as their value will be used inline in the generated bundle

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).

I ask because I saw a completed PR (#42) mentioning version 0.9.0

Is there an example showing use of Bulma.columns.isCentered? I tried following and it is not working

    Bulma.columns [
        columns.isCentered
        Bulma.column [

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.

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.

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.

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?

As 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.

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 just open Fable instead of Fable.Core and Fable.Core.JsInterop where you essentially always need helpers from both (Emit and jsNative) but I digress 😄

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. 😉

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.

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>

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:

• error FSHARP: The type 'navbar' does not define the field, constructor or member 'isPrimary'. (code 39)
• error FSHARP: The value, constructor, namespace or type 'navbarBrand' is not defined.

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?

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.

• #21
• #22
• #23
• #24
• #28

Bulma.title.p [
    Bulma.title.is5
    prop.text title
]

should be

Bulma.title.p [
    title.is5
    prop.text title
]

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" ] ] ] ])

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 timeline
• is-first on a timeline item
• is-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.

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.

Im struggling with finding correct abstractions for sub-items for Level (level -> heading + level -> title)

https://bulma.io/documentation/layout/level/

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

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?

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?

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?

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

Hello @Dzoukr,

I think the tabs modifier API is missing.

    Bulma.tabs [
        tabs.IsCentered // tabs is unkown
    ]

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.

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.

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>

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?

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.

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 :)

As agreed on #20, there should be (where it makes sense) something like [component].[control of the output].

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.

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?