Add components for buttons, icons, table and module for colors

lib/bulma_components.ex

@@ -1,55 +1,2 @@
 defmodule BulmaComponents do
-  @moduledoc """
-  Documentation for `BulmaComponents`.
-  """
-
-  @rgb [
-    :primary,
-    :link,
-    :info,
-    :success,
-    :warning,
-    :danger
-  ]
-
-  @monochrome [
-    :white,
-    :light,
-    :dark,
-    :black,
-    :text,
-    :ghost
-  ]
-
-  @colors @rgb ++ @monochrome
-
-  @doc """
-  Returns a list of Bulma `$colors` as atoms.
-
-  ## Examples
-
-      iex> BulmaComponents.colors()
-      #{inspect(@colors)}
-  """
-  def colors, do: @colors
-
-  @doc """
-  Returns a list of monochrome colors as atoms.
-
-  ## Examples
-
-      iex> BulmaComponents.monochrome()
-      #{inspect(@monochrome)}
-  """
-  def monochrome, do: @monochrome
-
-  @doc """
-  Returns a list of rgb colors as atoms.
-
-  ## Examples
-
-      iex> BulmaComponents.rgb()
-      #{inspect(@rgb)}
-  """
-  def rgb, do: @rgb
 end

lib/bulma_components/elements.ex → lib/bulma_components/button.ex

@@ -1,8 +1,11 @@
-defmodule BulmaComponents.Elements do
+defmodule BulmaComponents.Button do
   @moduledoc """
-  Element components.
+  Button component.
   """
   use Phoenix.Component
+  alias BulmaComponents.Colors
+
+  def imports, do: [{BulmaComponents.Icon, [icon: 1]}]
 
   @doc """
   Renders a button element.
@@ -35,7 +38,7 @@ defmodule BulmaComponents.Elements do
   attr :size, :atom, default: nil, values: [nil, :small, :normal, :medium, :large]
   attr :responsive, :boolean, default: false, doc: "Different sizes for each breakpoint"
   # Colors
-  attr :color, :atom, default: nil, values: [nil | BulmaComponents.colors()]
+  attr :color, :atom, default: nil, values: [nil | Colors.colors()]
   attr :light, :boolean, default: false, doc: "Light color variant"
   # States
   attr :hovered, :boolean, default: false

lib/bulma_components/colors.ex

@@ -0,0 +1,51 @@
+defmodule BulmaComponents.Colors do
+  @rgb [
+    :primary,
+    :link,
+    :info,
+    :success,
+    :warning,
+    :danger
+  ]
+
+  @monochrome [
+    :white,
+    :light,
+    :dark,
+    :black,
+    :text,
+    :ghost
+  ]
+
+  @colors @rgb ++ @monochrome
+
+  @doc """
+  Returns a list of Bulma `$colors` as atoms.
+
+  ## Examples
+
+      iex> CoreComponents.colors()
+      #{inspect(@colors)}
+  """
+  def colors, do: @colors
+
+  @doc """
+  Returns a list of monochrome colors as atoms.
+
+  ## Examples
+
+      iex> CoreComponents.monochrome()
+      #{inspect(@monochrome)}
+  """
+  def monochrome, do: @monochrome
+
+  @doc """
+  Returns a list of rgb colors as atoms.
+
+  ## Examples
+
+      iex> CoreComponents.rgb()
+      #{inspect(@rgb)}
+  """
+  def rgb, do: @rgb
+end

lib/bulma_components/icon.ex

@@ -0,0 +1,64 @@
+defmodule BulmaComponents.Icon do
+  use Phoenix.Component
+
+  @doc """
+  Renders a [FontAwesome Icon](https://fontawesome.com).
+
+  ## Examples
+
+      <.icon name="home" />
+      <.icon name="spinner" class="fas fa-spinner fa-pulse" />
+  """
+  attr :name, :string, required: true
+  attr :class, :string, default: nil
+  attr :color, :string, default: nil
+  attr :size, :atom, default: nil, values: [nil, :small, :normal, :medium, :large]
+  attr :title, :string, default: nil
+  attr :fixed_width, :boolean, default: false
+  attr :bordered, :boolean, default: false
+  attr :spin, :boolean, default: false
+
+  def icon(%{title: nil} = assigns) do
+    ~H"""
+    <span class={icon_classes(assigns)}>
+      <i class={["fas", "fa-#{@name}"]}></i>
+    </span>
+    """
+  end
+
+  def icon(%{title: title} = assigns) when title != nil do
+    ~H"""
+    <span class={["icon-text"] ++ container_size_class(@size)}>
+      <span class={icon_classes(assigns)}>
+        <i class={["fas", "fa-#{@name}"]}></i>
+      </span>
+      <span><%= @title %></span>
+    </span>
+    """
+  end
+
+  def icon_classes(assigns) do
+    ["icon"] ++
+      color_class(assigns.color) ++
+      icon_size_class(assigns.size) ++
+      fixed_width_class(assigns.fixed_width) ++
+      bordered_class(assigns.bordered) ++
+      spin_class(assigns.spin)
+  end
+
+  def spin_class(false), do: []
+  def spin_class(true), do: ["fa-pulse"]
+  def bordered_class(false), do: []
+  def bordered_class(true), do: ["fa-border"]
+  def fixed_width_class(false), do: []
+  def fixed_width_class(true), do: ["fa-fw"]
+  def color_class(nil), do: []
+  def color_class(color), do: ["has-text-#{color}"]
+  def icon_size_class(nil), do: ["fa-lg"]
+  def icon_size_class(:small), do: []
+  def icon_size_class(:normal), do: ["fa-lg"]
+  def icon_size_class(:medium), do: ["fa-2x"]
+  def icon_size_class(:large), do: ["fa-3x"]
+  def container_size_class(nil), do: []
+  def container_size_class(size), do: ["is-#{size}"]
+end

lib/bulma_components/modal.ex

@@ -0,0 +1,118 @@
+defmodule BulmaComponents.Modal do
+  @moduledoc """
+  Modal component.
+  """
+  use Phoenix.Component
+  alias Phoenix.LiveView.JS
+  import BulmaComponents.Icon
+
+  @doc """
+  Renders a modal.
+
+  ## Examples
+
+      <.modal id="confirm-modal">
+        This is a modal.
+      </.modal>
+
+  JS commands may be passed to the `:on_cancel` to configure
+  the closing/cancel event, for example:
+
+      <.modal id="confirm" on_cancel={JS.navigate(~p"/posts")}>
+        This is another modal.
+      </.modal>
+
+  """
+  attr :id, :string, required: true
+  attr :show, :boolean, default: false
+  attr :on_cancel, JS, default: %JS{}
+  slot :inner_block, required: true
+
+  def modal(assigns) do
+    ~H"""
+    <div
+      class="modal"
+      id={@id}
+      phx-mounted={@show && show_modal(@id)}
+      phx-remove={hide_modal(@id)}
+      data-cancel={JS.exec(@on_cancel, "phx-remove")}
+    >
+      <div id={"#{@id}-bg"} aria-hidden="true" class="modal-background"></div>
+      <.focus_wrap
+        id={"#{@id}-container"}
+        phx-window-keydown={JS.exec("data-cancel", to: "##{@id}")}
+        phx-key="escape"
+        phx-click-away={JS.exec("data-cancel", to: "##{@id}")}
+      >
+        <div
+          class="modal-content"
+          id={"#{@id}-content"}
+          aria-labelledby={"#{@id}-title"}
+          aria-describedby={"#{@id}-description"}
+          role="dialog"
+          aria-modal="true"
+          tabindex="0"
+        >
+          <%= render_slot(@inner_block) %>
+        </div>
+      </.focus_wrap>
+      <button
+        class="modal-close is-large"
+        phx-click={JS.exec("data-cancel", to: "##{@id}")}
+        aria-label="close"
+        type="button"
+        aria-label="close"
+      >
+        <.icon name="hero-x-mark-solid" class="h-5 w-5" />
+      </button>
+    </div>
+    """
+  end
+
+  ## JS Commands
+
+  def show(js \\ %JS{}, selector) do
+    JS.show(js,
+      to: selector,
+      transition:
+        {"transition-all transform ease-out duration-300",
+         "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95",
+         "opacity-100 translate-y-0 sm:scale-100"}
+    )
+  end
+
+  def hide(js \\ %JS{}, selector) do
+    JS.hide(js,
+      to: selector,
+      time: 200,
+      transition:
+        {"transition-all transform ease-in duration-200",
+         "opacity-100 translate-y-0 sm:scale-100",
+         "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"}
+    )
+  end
+
+  def show_modal(js \\ %JS{}, id) when is_binary(id) do
+    js
+    |> JS.show(to: "##{id}")
+    |> JS.show(
+      to: "##{id}-bg",
+      transition: {"transition-all transform ease-out duration-300", "opacity-0", "opacity-100"}
+    )
+    |> show("##{id}-container")
+    |> JS.add_class("overflow-hidden", to: "body")
+    |> JS.focus_first(to: "##{id}-content")
+  end
+
+  def hide_modal(js \\ %JS{}, id) do
+    js
+    |> JS.hide(
+      to: "##{id}-bg",
+      transition: {"transition-all transform ease-in duration-200", "opacity-100", "opacity-0"}
+    )
+    |> hide("##{id}-container")
+    |> JS.hide(to: "##{id}", transition: {"block", "block", "hidden"})
+    |> JS.remove_class("overflow-hidden", to: "body")
+    |> JS.pop_focus()
+  end
+end

lib/bulma_components/table.ex

@@ -0,0 +1,46 @@
+defmodule BulmaComponents.Table do
+  use Phoenix.Component
+
+  attr :rows, :list, doc: "Data you want to list", required: true
+  attr :bordered, :boolean, default: false
+  attr :striped, :boolean, default: false
+  attr :narrow, :boolean, default: false
+  attr :hoverable, :boolean, default: false
+  attr :fullwidth, :boolean, default: false
+
+  slot :col, doc: "Describe one of your table columns" do
+    attr :label, :string, doc: "Column label", required: true
+  end
+
+  @doc """
+  Simple table component.
+
+  """
+  def table(assigns) do
+    ~H"""
+    <table class={modifier_classes(assigns) ++ ["table"]}>
+      <thead>
+        <tr>
+          <th :for={col <- @col}><%= col.label %></th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr :for={row <- @rows} class={selected_class(row)}>
+          <td :for={col <- @col}>
+            <%= render_slot(col, row) %>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+    """
+  end
+
+  def modifier_classes(assigns) do
+    Enum.filter([:bordered, :striped, :narrow, :hoverable, :fullwidth], fn key -> assigns[key] end)
+    |> Enum.map(fn key -> "is-#{key}" end)
+  end
+
+  def selected_class(row) do
+    if row[:selected], do: "is-selected", else: ""
+  end
+end