elcritch

elcritch

Bulma Widgets - LiveComponent wrappers using Bulma

Update Aug 2024:

I’ve been working on re-writing my previous bulma widgets library to modernize it. There’s basic components for most of the basic bulma elements. There are also a few initial stateful live components for dropdowns and menus.

The library also includes the necessary Bulma CSS files for easy setup.

A big part of the re-write focuses on changing how the state of widgets is handled. There’s an event system which provides out-of-the-box support for updating shared values from a parent liveview in child live components. There’s also support for cached values and broadcasting values. I’m still working on documenting the design, but the api’s in what I think is a useable state.

The goal is easy development for small scale app style UIs for Nerves devices.

https://github.com/elcritch/bulma_widgets2/

Here’s the examples I’ve been developing with:

https://github.com/elcritch/bulma_widgets2/blob/main/lib/bulma_widgets_web/live/widget_examples_live.ex


Original (Mar 2020):

BulmaWidgets – LiveComponent wrappers around Bulma CSS “widgets” for Phoenix LiveView. This library is intended to wrap the Bulma elements/components into mostly self-contained components. These components help make developing interactive UI’s in LiveView simpler.

Code is on Github at Bulma Widgets. An example server is running at http://lacritch.xyz/.

This is an early release being porting from an earlier internal pre-live-component UI library. I’d appreciate any feedback, ideas on implementing the component interactions with the parent LiveView. There is a little bit of interaction between the parent LiveView and the components, but it’s very minimal.

Currently only two elements have been ported, but show the overall usage. Future elements will be mostly focused on inputs / user selections useful for allowing users to select options or user components (such as tabs). Providing wrappers for elements like Cards requires a lot of API options, and so may not fit well into this library.

While this library is similar to Surface it’s much less ambitious in scope… I’d recommend Surface for those who want a full featured component library. This library focus’s on providing basic LiveView-only UI components without needing a separate template engine or tooling.

Most Liked

elcritch

elcritch

Oh yes, that’s correct. Nerves builds a firmware image with the system and code that can be uploaded via an Upload script by ./upload.sh lacritch.xyz. Easy as can be. The code for this server is on my GitHub at Cloud Server. I should probably fix the Phoenix signing keys so they’re not in the config.exs but this is a throw-away server so I made it public so you could see it. The whole process is programmable in a few dozen lines of Elixir as well. Bootstrapping the initial VPS image is a little fiddly but not too bad. I used a Knoppix image to write the initial Nerves firmware to a VPS disk and it worked like a charm.

Another note is that I don’t see why one couldn’t take a Nerves firmware image and create a container image by dumping the squashfs filesystem to a tarball. Then you don’t need to worry about library version compatibility since it’s all cross-compiled. :slight_smile: There’s more discussion on the topic Can you use nerves to deploy a cloud-based server? - #12 by axelson and Running Nerves on Amazon EC2

Honestly, when/if my company needs to deploy web services I’m going to use Nerves images. I don’t see the need for K8s unless you’re doing microservices and I plan to do everything in Elixir. Maybe make a nice LiveView dashboard, insta k8s alternative. :wink:

elcritch

elcritch

An interesting note on the lacritch.xyz server is that it’s using Nerves to build and deploy to a small Linux VPS. It currently takes ~5 seconds to come back up after rebooting. It doesn’t have a proxy in front, so if anyone any security issues I’d love to know!

elcritch

elcritch

I find making a library out of my internal widgets helps keep me a bit more disciplined in documenting them. Plus maybe others find them useful. :slight_smile: Not currently planning on adding Bulma extensions as I don’t use them currently, but I’d be willing to accept PR’s.

Great! I used yours to see how I could model something like a card component. I tried a few variations and ended up liking a pattern of using a case statement in a do block with the LiveComponents as the Source-of-Truth. Though I also provide a “default” setup using proplist options for cases where you would want standard buttons, like this:

    <%= live_component @socket, CardComponent, 
                   id: :card1, 
                   footers: ["Save Item": "card-1-save"] do %>
      <%= case @item do %>
        <% :content_item -> %>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit.
          Phasellus nec iaculis mauris. <a>@bulmaio</a>.
          <a href="#">#css</a> <a href="#">#responsive</a>
          <br>
          <time datetime="2016-1-1">11:09 PM - 1 Jan 2016</time>
        <% _other -> %>
      <% end %>
    <% end %>

It turns out that using the do-block actually makes composability pretty straightforward, even using the parent LiveView assigns (@modal_va is set in the parent LiveView) works! I’m pretty happy with the composability, even though you have to write a case statement. A macro would be nice to handle that but broke when I tried it.

You can also mix and match from default event handlers or custom ones like in this example. Note the save-button targets the parent LiveView while the cancel-button uses the default cancel handler:

    <%= live_component @socket, ModalComponent, id: :modal2 do %>
      <%= case @item do %>
        <% :header -> %>
          <p class="modal-card-title">Second Modal</p>
          <button class="delete" phx-click="delete" phx-target="<%= @target %>" aria-label="close">
        <% :footer -> %>
          <button class="button is-success" phx-click="modal-2-save" >
            Save changes
          </button>
          <button class="button" phx-click="cancel" phx-target="<%= @target %>">
            Cancel
          </button>
        <% _other -> %>
      <% end %>
    <% end %>

Originally I tried using the parent LiveView as the Source-of-Truth, but it seems you can’t define handle_event’s without providing an id and state in the LiveComponent (in LiveView v0.9.0). Between that and having two spots to define/configure the widgets felt confusing and a bit cumbersome. So having the widgets send events to the parent LiveView allows a pretty simple interaction between widgets that seems pretty simple and robust so far. Though documenting it well is the tricky part.

Also there are helper functions to do things like open/close/update a widget like:

  def handle_event("modal-1-save", _params, socket) do
    {:noreply, socket |> widget_close(:modal1)}
  end

Where Next?

Popular in Announcing Top

Flo0807
Hello everyone! I am excited to share our heart project Backpex with you. After building several Phoenix applications, we realized that...
New
kevinlang
Hey all, We have made an Ecto3 Adapter for SQLite3, ecto_sqlite3! We have successfully on-boarded the full suite of integration tests (...
New
ostinelli
Let’s write a database! Well not really, but I think it’s a little sad that there doesn’t seem to be a simple in-memory distributed KV da...
New
jakub-zawislak
Hi everyone, I’m coming from the Symfony (PHP) framework. I like Phoenix, but it has a one thing that was build much better in the Symfo...
New
bradley
I’ve been working with Claude Code extensively and absolutely love it. However, I’ve come across the challenge of managing configuration ...
New
mikehostetler
I’m excited to announce Jido, a framework providing foundational primitives for building autonomous agent systems in Elixir. While develo...
New
Eiji
ExApi is a library that I’m developing now and hope release soon This library will allow to: list all apis list all api implementation...
New
type1fool
WebAuthnLiveComponent WebAuthnComponents See this post about renaming the package. Passwordless authentication for Phoenix LiveView app...
New
sbs
Only 650 LOC, wrote for fun :slight_smile: https://github.com/sunboshan/qrcode
New
KronicDeth
Elixir plugin for JetBrain’s IntelliJ Platform (including Rubymine) This is a plugin that adds support for Elixir to JetBrains IntelliJ...
289 36432 110
New

Other popular topics Top

electic
Hi, I am new to Elixir. I am trying to use the DateTime component to insert a date into MySQL however the there seems to be no way to fo...
New
WestKeys
Currently suffering from paralysis by [HTTP client] analysis. This is rather unusual in Elixirland as there tends to be consensus on the ...
New
Emily
I have VueJS GUIs with the project generated using Webpack. I have Elixir modules that will need to be used by the VueJS GUIs. I forese...
New
jononomo
I am trying to figure out how Mix knows whether the environment is test, dev, or prod – where is this set? Thanks.
New
Lily
In templates/appointment/index.html.eex: &lt;%= for appointment &lt;- @appointments do %&gt; &lt;tr&gt; &lt;td&gt;&lt;%= appoi...
New
freewebwithme
Using vs code and installed ElixirLS: support and debugger. And I got an error popped up on start up says Failed to run ‘elixir’ comma...
New
grych
Hi folks, Few months ago I have announced the proof-of-concept of the library to manipulate the browsers DOM objects directly from Elixi...
639 52774 488
New
ashish173
I am using Ecto timestamps with postgres, I can see the timestamps() use the :naive_dateime but for my use case I wanted to store the ti...
New
saif
Hello everyone, Long time lurker first time poster here. I’ve recently begun working on Elixir full-time again! :raised_hands: It’s been...
New
hariharasudhan94
Lets say I have map like this fetching from my database %{"_id" =&gt; #BSON.ObjectId&lt;58eb1a7a9ad169198c3dXXXX&gt;, "email" =&gt; ...
New

We're in Beta

About us Mission Statement