fix: merge_class function improvements (#726)

lib/moon/helpers/merge_class.ex

@@ -5,16 +5,8 @@ defmodule Moon.Helpers.MergeClass do
 
   def merge(classes) do
     flatten(classes)
-    # |> Enum.filter(fn x -> x != "" end)
     |> Enum.reduce(%{}, fn class, groups ->
-      group =
-        class
-        # removing square brackets bc of "top-[-7px]"
-        |> String.replace(~r/\[.*\]$/, "")
-        # removing last value, e.g. "postion-top-1" => "position-top-"
-        |> String.replace(~r/-[^-]*$/, "-")
-
-      Map.put(groups, group, class)
+      Map.put(groups, group_name(class), class)
     end)
     |> Map.values()
   end
@@ -31,4 +23,18 @@ defmodule Moon.Helpers.MergeClass do
   defp flatten(classes) when is_binary(classes), do: classes |> String.split(" ")
   defp flatten(nil), do: []
   defp flatten(false), do: []
+
+  defp group_name(class) when class in ~w(absolute relative fixed static sticky),
+    do: "prop_position"
+
+  defp group_name(class) when class in ~w(block inline hidden flex grid),
+    do: "prop_display"
+
+  defp group_name(class) do
+    class
+    # removing square brackets bc of "top-[-7px]"
+    |> String.replace(~r/\[.*\]$/, "")
+    # removing last value, e.g. "postion-top-1" => "position-top-"
+    |> String.replace(~r/-[^-]*$/, "-")
+  end
 end

test/__snapshots__/moon/design/menu_item_test/test__menu_item_as_a.snap

@@ -1 +1 @@
-"<a phx-value-is-selected=\"true\" class=\"bg-transparent cursor-pointer flex focus:outline-none focus:shadow-focus gap-2 hover:bg-heles items-center justify-between p-2 rounded-moon-i-sm text-moon-14 transition w-full\">\nHello\n</a>"
+"<a phx-value-is-selected=\"true\" class=\"bg-transparent cursor-pointer focus:outline-none focus:shadow-focus gap-2 hover:bg-heles items-center justify-between p-2 flex rounded-moon-i-sm text-moon-14 transition w-full\">\nHello\n</a>"

test/__snapshots__/moon/design/menu_item_test/test__menu_item_as_button.snap

@@ -1 +1 @@
-"<button phx-value-is-selected=\"true\" class=\"bg-transparent cursor-pointer flex focus:outline-none focus:shadow-focus gap-2 hover:bg-heles items-center justify-between p-2 rounded-moon-i-sm text-moon-14 transition w-full\">\nHello\n</button>"
+"<button phx-value-is-selected=\"true\" class=\"bg-transparent cursor-pointer focus:outline-none focus:shadow-focus gap-2 hover:bg-heles items-center justify-between p-2 flex rounded-moon-i-sm text-moon-14 transition w-full\">\nHello\n</button>"

test/__snapshots__/moon/design/menu_item_test/test__menu_item_with_title_and_text.snap

@@ -1 +1 @@
-"<button phx-value-is-selected=\"true\" class=\"bg-transparent cursor-pointer flex focus:outline-none focus:shadow-focus gap-2 hover:bg-heles items-center justify-between p-2 rounded-moon-i-sm text-moon-14 transition w-full\">\n<span class=\"block grow text-start text-bulma overflow-hidden\">\n<span class=\"block text-bulma text-moon-14\">title</span>\n<span class=\"flex text-trunks text-moon-12\">\n<span class=\"flex-1 truncate\">some description here</span>\n</span>\n</span>\n</button>"
+"<button phx-value-is-selected=\"true\" class=\"bg-transparent cursor-pointer focus:outline-none focus:shadow-focus gap-2 hover:bg-heles items-center justify-between p-2 flex rounded-moon-i-sm text-moon-14 transition w-full\">\n<span class=\"block grow text-start text-bulma overflow-hidden\">\n<span class=\"block text-bulma text-moon-14\">title</span>\n<span class=\"flex text-trunks text-moon-12\">\n<span class=\"flex-1 truncate\">some description here</span>\n</span>\n</span>\n</button>"

test/__snapshots__/moon/design/menu_item_test/test_with__lego/checkbox_role_operates_the_same_as_content.snap

@@ -1 +1 @@
-"<button phx-value-is-selected=\"true\" class=\"bg-transparent cursor-pointer flex focus:outline-none focus:shadow-focus gap-2 hover:bg-heles items-center justify-between p-2 rounded-moon-i-sm text-moon-14 transition w-full\" role=\"checkbox\">\n<span class=\"flex w-6 h-6 justify-center items-center\">\n<div class=\"z-0 left-0 rounded-sm w-4 h-4 inline-block border border-trunks\">\n</div>\n</span>\n</button>"
+"<button phx-value-is-selected=\"true\" class=\"bg-transparent cursor-pointer focus:outline-none focus:shadow-focus gap-2 hover:bg-heles items-center justify-between p-2 flex rounded-moon-i-sm text-moon-14 transition w-full\" role=\"checkbox\">\n<span class=\"flex w-6 h-6 justify-center items-center\">\n<div class=\"z-0 left-0 rounded-sm w-4 h-4 inline-block border border-trunks\">\n</div>\n</span>\n</button>"

test/__snapshots__/moon/design/menu_item_test/test_with__lego/checkbox_selected.snap

@@ -1 +1 @@
-"<button phx-value-is-selected=\"false\" class=\"bg-heles cursor-pointer flex focus:outline-none focus:shadow-focus gap-2 hover:bg-heles items-center justify-between p-2 rounded-moon-i-sm text-moon-14 transition w-full\" role=\"checkbox\">\n<span class=\"flex w-6 h-6 justify-center items-center\">\n<div class=\"z-0 left-0 rounded-sm w-4 h-4 inline-block border border-piccolo bg-piccolo\">\n<div style=\"padding-left: 2px; padding-top: 4px\">\n<svg width=\"10\" height=\"7\" viewBox=\"0 0 10 7\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M9 0C8.72 0 8.47 0.11 8.29 0.29L4 4.59L1.71 2.29C1.53 2.11 1.28 2 1 2C0.45 2 0 2.45 0 3C0 3.28 0.11 3.53 0.29 3.71L3.29 6.71C3.47 6.89 3.72 7 4 7C4.28 7 4.53 6.89 4.71 6.71L9.71 1.71C9.89 1.53 10 1.28 10 1C10 0.45 9.55 0 9 0Z\" fill=\"white\"></path>\n</svg>\n</div>\n</div>\n</span>\n</button>"
+"<button phx-value-is-selected=\"false\" class=\"bg-heles cursor-pointer focus:outline-none focus:shadow-focus gap-2 hover:bg-heles items-center justify-between p-2 flex rounded-moon-i-sm text-moon-14 transition w-full\" role=\"checkbox\">\n<span class=\"flex w-6 h-6 justify-center items-center\">\n<div class=\"z-0 left-0 rounded-sm w-4 h-4 inline-block border border-piccolo bg-piccolo\">\n<div style=\"padding-left: 2px; padding-top: 4px\">\n<svg width=\"10\" height=\"7\" viewBox=\"0 0 10 7\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M9 0C8.72 0 8.47 0.11 8.29 0.29L4 4.59L1.71 2.29C1.53 2.11 1.28 2 1 2C0.45 2 0 2.45 0 3C0 3.28 0.11 3.53 0.29 3.71L3.29 6.71C3.47 6.89 3.72 7 4 7C4.28 7 4.53 6.89 4.71 6.71L9.71 1.71C9.89 1.53 10 1.28 10 1C10 0.45 9.55 0 9 0Z\" fill=\"white\"></path>\n</svg>\n</div>\n</div>\n</span>\n</button>"

test/__snapshots__/moon/design/menu_item_test/test_with__lego/chevron_up_down_role_operates_the_same_as_content.snap

@@ -1 +1 @@
-"<button phx-value-is-selected=\"true\" class=\"bg-transparent cursor-pointer flex focus:outline-none focus:shadow-focus gap-2 hover:bg-heles items-center justify-between p-2 rounded-moon-i-sm text-moon-14 transition w-full\" role=\"switch\">\n<span>\n<svg class=\"moon-icon transition-transform transition-200\">\n<use href=\"/moon_icons/svgs/icons_new/controls-chevron-down.svg#item\"></use>\n</svg>\n</span>\n</button>"
+"<button phx-value-is-selected=\"true\" class=\"bg-transparent cursor-pointer focus:outline-none focus:shadow-focus gap-2 hover:bg-heles items-center justify-between p-2 flex rounded-moon-i-sm text-moon-14 transition w-full\" role=\"switch\">\n<span>\n<svg class=\"moon-icon transition-transform transition-200\">\n<use href=\"/moon_icons/svgs/icons_new/controls-chevron-down.svg#item\"></use>\n</svg>\n</span>\n</button>"

test/__snapshots__/moon/design/menu_item_test/test_with__lego/chevron_up_down_selected.snap

@@ -1 +1 @@
-"<button phx-value-is-selected=\"false\" class=\"bg-heles cursor-pointer flex focus:outline-none focus:shadow-focus gap-2 hover:bg-heles items-center justify-between p-2 rounded-moon-i-sm text-moon-14 transition w-full\" role=\"switch\">\n<span>\n<svg class=\"moon-icon transition-transform transition-200 rotate-180\">\n<use href=\"/moon_icons/svgs/icons_new/controls-chevron-down.svg#item\"></use>\n</svg>\n</span>\n</button>"
+"<button phx-value-is-selected=\"false\" class=\"bg-heles cursor-pointer focus:outline-none focus:shadow-focus gap-2 hover:bg-heles items-center justify-between p-2 flex rounded-moon-i-sm text-moon-14 transition w-full\" role=\"switch\">\n<span>\n<svg class=\"moon-icon transition-transform transition-200 rotate-180\">\n<use href=\"/moon_icons/svgs/icons_new/controls-chevron-down.svg#item\"></use>\n</svg>\n</span>\n</button>"

test/__snapshots__/moon/design/menu_item_test/test_with__lego/radio_role_operates_the_same_as_content.snap

@@ -1 +1 @@
-"<button phx-value-is-selected=\"true\" class=\"bg-transparent cursor-pointer flex focus:outline-none focus:shadow-focus gap-2 hover:bg-heles items-center justify-between p-2 rounded-moon-i-sm text-moon-14 transition w-full\" role=\"radio\">\n<span class=\"flex w-6 h-6 justify-center items-center\">\n<span class=\"block h-4 relative rounded-full shadow-trunks w-4 shadow-[0_0_0_1px_inset]\">\n<span class=\"scale-0 h-2 w-2 rounded-full absolute top-1/2 left-1/2 translate-x-[-50%] translate-y-[-50%] bg-piccolo transition-transform\"></span>\n</span>\n</span>\n</button>"
+"<button phx-value-is-selected=\"true\" class=\"bg-transparent cursor-pointer focus:outline-none focus:shadow-focus gap-2 hover:bg-heles items-center justify-between p-2 flex rounded-moon-i-sm text-moon-14 transition w-full\" role=\"radio\">\n<span class=\"flex w-6 h-6 justify-center items-center\">\n<span class=\"h-4 block relative rounded-full shadow-trunks w-4 shadow-[0_0_0_1px_inset]\">\n<span class=\"scale-0 h-2 w-2 rounded-full absolute top-1/2 left-1/2 translate-x-[-50%] translate-y-[-50%] bg-piccolo transition-transform\"></span>\n</span>\n</span>\n</button>"

test/__snapshots__/moon/design/menu_item_test/test_with__lego/radio_selected.snap

@@ -1 +1 @@
-"<button phx-value-is-selected=\"false\" class=\"bg-heles cursor-pointer flex focus:outline-none focus:shadow-focus gap-2 hover:bg-heles items-center justify-between p-2 rounded-moon-i-sm text-moon-14 transition w-full\" role=\"radio\">\n<span class=\"flex w-6 h-6 justify-center items-center\">\n<span class=\"block h-4 relative rounded-full shadow-piccolo w-4 shadow-[0_0_0_1px_inset]\">\n<span class=\"scale h-2 w-2 rounded-full absolute top-1/2 left-1/2 translate-x-[-50%] translate-y-[-50%] bg-piccolo transition-transform\"></span>\n</span>\n</span>\n</button>"
+"<button phx-value-is-selected=\"false\" class=\"bg-heles cursor-pointer focus:outline-none focus:shadow-focus gap-2 hover:bg-heles items-center justify-between p-2 flex rounded-moon-i-sm text-moon-14 transition w-full\" role=\"radio\">\n<span class=\"flex w-6 h-6 justify-center items-center\">\n<span class=\"h-4 block relative rounded-full shadow-piccolo w-4 shadow-[0_0_0_1px_inset]\">\n<span class=\"scale h-2 w-2 rounded-full absolute top-1/2 left-1/2 translate-x-[-50%] translate-y-[-50%] bg-piccolo transition-transform\"></span>\n</span>\n</span>\n</button>"

test/__snapshots__/moon/design/menu_item_test/test_with__lego/title__title_operates_the_saqme_as_content.snap

@@ -1 +1 @@
-"<button phx-value-is-selected=\"true\" class=\"bg-transparent cursor-pointer flex focus:outline-none focus:shadow-focus gap-2 hover:bg-heles items-center justify-between p-2 rounded-moon-i-sm text-moon-14 transition w-full\">\n<span class=\"block grow text-start text-bulma overflow-hidden\">\nHere I am\n</span>\n</button>"
+"<button phx-value-is-selected=\"true\" class=\"bg-transparent cursor-pointer focus:outline-none focus:shadow-focus gap-2 hover:bg-heles items-center justify-between p-2 flex rounded-moon-i-sm text-moon-14 transition w-full\">\n<span class=\"block grow text-start text-bulma overflow-hidden\">\nHere I am\n</span>\n</button>"

test/moon/helpers/merge_class_test.exs

@@ -31,6 +31,11 @@ defmodule Moon.Helpers.MergeClassTest do
 
   test "flex & flex-1 are different groups" do
     merged = merge(["flex", "flex-1"])
-    assert merged == ["flex", "flex-1"]
+    assert merged == ["flex-1", "flex"]
+  end
+
+  test "positions should collapse" do
+    merged = merge(~w(absolute relative))
+    assert merged == ~w(relative)
   end
 end