Loading component

README.md

@@ -108,6 +108,7 @@ List of available components.
 - [Text Input](https://daisyui.com/components/input) ✅
 - [Kbd](https://daisyui.com/components/kbd) ❌
 - [Link](https://daisyui.com/components/link) ❌
+- [Loading](https://daisyui.com/components/loading/) ✅
 - [Mask](https://daisyui.com/components/mask) ❌
 - [Menu](https://daisyui.com/components/menu) ❌
 - [Code mockup](https://daisyui.com/components/mockup-code) ❌

daisy_ui_components_site/assets/tailwind.config.js

@@ -12,7 +12,8 @@ module.exports = {
     "../lib/daisy_ui_components_site_web.ex",
     "../lib/daisy_ui_components_site_web/**/*.*ex",
     "../storybook/**/*.*exs",
-    "../deps/daisy_ui_components/**/*.*ex"
+    "../deps/daisy_ui_components/**/*.*ex",
+    "../../../daisy_ui_components/**/*.*ex",
   ],
   plugins: [
     require("@tailwindcss/forms"),
@@ -22,15 +23,15 @@ module.exports = {
     //
     //     <div class="phx-click-loading:animate-ping">
     //
-    plugin(({addVariant}) => addVariant("phx-no-feedback", [".phx-no-feedback&", ".phx-no-feedback &"])),
-    plugin(({addVariant}) => addVariant("phx-click-loading", [".phx-click-loading&", ".phx-click-loading &"])),
-    plugin(({addVariant}) => addVariant("phx-submit-loading", [".phx-submit-loading&", ".phx-submit-loading &"])),
-    plugin(({addVariant}) => addVariant("phx-change-loading", [".phx-change-loading&", ".phx-change-loading &"])),
+    plugin(({ addVariant }) => addVariant("phx-no-feedback", [".phx-no-feedback&", ".phx-no-feedback &"])),
+    plugin(({ addVariant }) => addVariant("phx-click-loading", [".phx-click-loading&", ".phx-click-loading &"])),
+    plugin(({ addVariant }) => addVariant("phx-submit-loading", [".phx-submit-loading&", ".phx-submit-loading &"])),
+    plugin(({ addVariant }) => addVariant("phx-change-loading", [".phx-change-loading&", ".phx-change-loading &"])),
 
     // Embeds Heroicons (https://heroicons.com) into your app.css bundle
     // See your `CoreComponents.icon/1` for more information.
     //
-    plugin(function({matchComponents, theme}) {
+    plugin(function ({ matchComponents, theme }) {
       let iconsDir = path.join(__dirname, "../deps/heroicons/optimized")
       let values = {}
       let icons = [
@@ -42,11 +43,11 @@ module.exports = {
       icons.forEach(([suffix, dir]) => {
         fs.readdirSync(path.join(iconsDir, dir)).forEach(file => {
           let name = path.basename(file, ".svg") + suffix
-          values[name] = {name, fullPath: path.join(iconsDir, dir, file)}
+          values[name] = { name, fullPath: path.join(iconsDir, dir, file) }
         })
       })
       matchComponents({
-        "hero": ({name, fullPath}) => {
+        "hero": ({ name, fullPath }) => {
           let content = fs.readFileSync(fullPath).toString().replace(/\r?\n|\r/g, "")
           let size = theme("spacing.6")
           if (name.endsWith("-mini")) {
@@ -66,7 +67,7 @@ module.exports = {
             "height": size
           }
         }
-      }, {values})
+      }, { values })
     })
   ],
   daisyui: {

daisy_ui_components_site/storybook/components/loading.story.exs

@@ -0,0 +1,58 @@
+defmodule Storybook.Components.Loading do
+  use PhoenixStorybook.Story, :component
+
+  alias DaisyUIComponents.Utils
+
+
+  def function, do: &DaisyUIComponents.Loading.loading/1
+
+  def variations do
+    [
+      %Variation{
+        id: :dots_warning_large,
+        attributes: %{
+          shape: "dots",
+          color: "warning",
+          size: "lg"
+        }
+      },
+      %VariationGroup{
+        id: :colors,
+        variations:
+          for color <- Utils.colors() ++ ["neutral"] do
+            %Variation{
+              id: String.to_atom(color),
+              attributes: %{
+                color: color
+              }
+            }
+          end
+      },
+
+      %VariationGroup{
+        id: :sizes,
+        variations:
+          for size <- Utils.sizes()  do
+            %Variation{
+              id: String.to_atom(size),
+              attributes: %{
+                size: size
+              }
+            }
+          end
+      },
+      %VariationGroup{
+        id: :shapes,
+        variations:
+          for shape <- ~w(spinner dots ring ball bars infinity) do
+            %Variation{
+              id: String.to_atom(shape),
+              attributes: %{
+                shape: shape
+              }
+            }
+          end
+      },
+    ]
+  end
+end

lib/daisy_ui_components.ex

@@ -31,6 +31,7 @@ defmodule DaisyUIComponents do
       import DaisyUIComponents.TextInput
       import DaisyUIComponents.Textarea
       import DaisyUIComponents.Tooltip
+      import DaisyUIComponents.Loading
     end
   end
 end

lib/daisy_ui_components/loading.ex

@@ -0,0 +1,66 @@
+defmodule DaisyUIComponents.Loading do
+  @moduledoc """
+  Loading component
+
+  https://daisyui.com/components/loading/
+
+
+  """
+  use DaisyUIComponents.Component
+
+  @doc """
+  Renders a loading.
+
+  ## Examples
+
+      <.loading></.loading>
+      <.loading phx-click="go" shape="infinity" color="warning" size="lg" ></.loading>
+  """
+  attr :class, :string, default: nil
+  attr :shape, :string, required: true, values: ~w(spinner dots ring ball bars infinity)
+  attr :color, :string, values: colors() ++ ["neutral"]
+  attr :size, :string, values: sizes()
+  attr :rest, :global, include: ~w(id)
+
+  def loading(assigns) do
+    assigns =
+      assign(assigns, :class, [
+        "loading",
+        loading_shape(assigns[:shape]),
+        loading_color(assigns[:color]),
+        loading_size(assigns[:size]),
+        assigns.class
+      ])
+
+    ~H"""
+    <span class={@class} {@rest}></span>
+    """
+  end
+
+  defp loading_color("neutral"), do: "text-neutral"
+  defp loading_color("primary"), do: "text-primary"
+  defp loading_color("secondary"), do: "text-secondary"
+  defp loading_color("accent"), do: "text-accent"
+  defp loading_color("info"), do: "text-info"
+  defp loading_color("success"), do: "text-success"
+  defp loading_color("warning"), do: "text-warning"
+  defp loading_color("error"), do: "text-error"
+  defp loading_color(_color), do: nil
+
+  # Size
+  defp loading_size("xs"), do: "loading-xs"
+  defp loading_size("sm"), do: "loading-sm"
+  defp loading_size("md"), do: "loading-md"
+  defp loading_size("lg"), do: "loading-lg"
+  defp loading_size(_size), do: nil
+
+  # Shapes
+
+  defp loading_shape("spinner"), do: "loading-spinner"
+  defp loading_shape("dots"), do: "loading-dots"
+  defp loading_shape("ring"), do: "loading-ring"
+  defp loading_shape("ball"), do: "loading-ball"
+  defp loading_shape("bars"), do: "loading-bars"
+  defp loading_shape("infinity"), do: "loading-infinity"
+  defp loading_shape(_shape), do: nil
+end

mix.exs

@@ -85,7 +85,8 @@ defmodule DaisyUIComponents.MixProject do
           DaisyUIComponents.Table,
           DaisyUIComponents.TextInput,
           DaisyUIComponents.Textarea,
-          DaisyUIComponents.Tooltip
+          DaisyUIComponents.Tooltip,
+          DaisyUIComponents.Loading
         ]
       ]
     ]

test/daisy_ui_components/loading.exs

@@ -0,0 +1,63 @@
+defmodule DaisyUIComponents.LoadingTest do
+  use ExUnit.Case
+
+  import Phoenix.Component
+  import Phoenix.LiveViewTest
+  import DaisyUIComponents.Loading
+
+  alias DaisyUIComponents.Utils
+
+  test "loading" do
+    assigns = %{}
+
+    button =
+      rendered_to_string(~H"""
+      <.loading></.loading>
+      """)
+
+    assert button =~ ~s(<span class="loading">)
+  end
+
+  test "loading colors" do
+    for color <- Utils.colors() ++ ["neutral"] do
+      assigns = %{color: color}
+
+      assert rendered_to_string(~H"""
+             <.loading color={@color}></.loading>
+             """) =~ ~s(<span class="loading text-#{color}">)
+    end
+  end
+
+  test "loading sizes" do
+    for size <- Utils.sizes() do
+      assigns = %{size: size}
+
+      assert rendered_to_string(~H"""
+             <.loading size={@size}></.loading>
+             """) =~ ~s(<span class="loading loading-#{size}">)
+    end
+  end
+
+  test "loading shapes" do
+    for shape <- ~w(spinner dots ring ball bars infinity) do
+      assigns = %{shape: shape}
+
+      assert rendered_to_string(~H"""
+             <.loading shape={@shape}></.loading>
+             """) =~ ~s(<span class="loading loading-#{shape}">)
+    end
+  end
+
+  test "combined size, color and shape" do
+    size = "lg"
+    shape = "infinity"
+    color = "warning"
+    id = "loading-lg-infinity-warn"
+    assigns = %{id: id, size: size, shape: shape, color: color}
+
+    assert rendered_to_string(~H"""
+           <.loading id={@id} shape={@shape} size={@size} color={@color}></.loading>
+           """) =~
+             ~s(<span class="loading loading-#{shape} text-#{color} loading-#{size}" id="#{id}">)
+  end
+end