Merge pull request #81 from bluzky/docs/update-post-init-message

Update document

.github/workflows/tests.yml

@@ -84,4 +84,4 @@ jobs:
 
     # Step: Execute the tests.
     - name: Run tests
-      run: mix test
+      run: mix test test/salad_ui

README.md

@@ -29,6 +29,9 @@
 
 1. **Using `salad_ui` as part of your project:**
 
+> This way you can install only components that you want to use or you want to edit SaladUI's component source code to fit your need.
+> If you just want to use SaladUI's components, see **Using as library** below.
+
 - Adding `salad_ui` to your list of dependencies in `mix.exs`:
 
 ```elixir
@@ -67,6 +70,20 @@ end
 #> mix salad.init --as-lib
 ```
 
+- Using in your project
+```
+defmodule MyModule do
+    # import any component you need
+    import SaladUI.Button
+
+    def render(_) do
+      ~H"""
+      <.button>Click me</.button>
+      """
+    end
+end
+```
+
 
 ## More configuration
 1. Custom error translate function
@@ -102,7 +119,7 @@ To run the failing tests only, just run `mix test.watch --stale`.
 
 - ✅ Accordion
 - ✅ Alert
-- 🚧 Alert Dialog
+- ✅ Alert Dialog
 - ✅ Avatar
 - ✅ Badge
 - ✅ Breadcrumb
@@ -111,7 +128,7 @@ To run the failing tests only, just run `mix test.watch --stale`.
 - [ ] Carousel
 - ✅ Chart
 - ✅ Checkbox
-- 🚧 Collapsible
+- ✅ Collapsible
 - [ ] Combobox
 - [ ] Command
 - [ ] Context Menu

lib/mix/tasks/salad.init.ex

@@ -49,7 +49,11 @@ defmodule Mix.Tasks.Salad.Init do
          :ok <- maybe_write_helpers_module(component_path, app_name, opts),
          :ok <- maybe_write_component_module(component_path, app_name, opts),
          :ok <- install_node_dependencies(node_opts) do
-      Mix.shell().info("Done. Now you can add components by running mix salad.add <component_name>")
+      if opts[:as_lib] do
+        Mix.shell().info("Done. Now you can use any component by importSaladUI.<ComponentName> in your project.")
+      else
+        Mix.shell().info("Done. Now you can add components by running mix salad.add <component_name>")
+      end
     else
       {:error, reason} -> Mix.shell().error("Error during setup: #{reason}")
     end

lib/salad_ui/accordion.ex

@@ -37,7 +37,6 @@ defmodule SaladUI.Accordion do
   slot :inner_block, required: true
 
   def accordion(assigns) do
-
     ~H"""
     <div class={classes(["", @class])}>
       <%= render_slot(@inner_block) %>
@@ -61,7 +60,6 @@ defmodule SaladUI.Accordion do
   attr :open, :boolean, default: false
   slot :inner_block, required: true
 
-
   def accordion_trigger(assigns) do
     ~H"""
     <details name={@group} class="group/accordion peer/accordion" open={@open}>

lib/salad_ui/alert_dialog.ex

@@ -253,9 +253,9 @@ defmodule SaladUI.AlertDialog do
   @doc """
   Show alert dialog
   """
-  def show_alert_dialog( js \\ %JS{}, %{id: id} = _builder) do
+  def show_alert_dialog(js \\ %JS{}, %{id: id} = _builder) do
     js
-    |> JS.set_attribute(    {"data-state", "open"}, to: "##{id} .alert-dialog-content")
+    |> JS.set_attribute({"data-state", "open"}, to: "##{id} .alert-dialog-content")
     |> JS.show(to: "##{id} .alert-dialog-content", transition: {"_", "_", "_"}, time: 150)
     |> JS.add_class("overflow-hidden", to: "body")
     |> JS.focus_first(to: "##{id} .alert-dialog-content")
@@ -266,7 +266,7 @@ defmodule SaladUI.AlertDialog do
   """
   def hide_alert_dialog(js \\ %JS{}, %{id: id} = _builder) do
     js
-    |> JS.set_attribute(    {"data-state", "closed"}, to: "##{id} .alert-dialog-content")
+    |> JS.set_attribute({"data-state", "closed"}, to: "##{id} .alert-dialog-content")
     |> JS.hide(to: "##{id} .alert-dialog-content", transition: {"_", "_", "_"}, time: 130)
     |> JS.remove_class("overflow-hidden", to: "body")
     |> JS.pop_focus()

lib/salad_ui/popover.ex

@@ -43,8 +43,11 @@ defmodule SaladUI.Popover do
   Render popover trigger
   """
   attr :class, :string, default: nil
-  attr :target, :string, required: true,
-       doc: "The id of target element to show popover"
+
+  attr :target, :string,
+    required: true,
+    doc: "The id of target element to show popover"
+
   attr :rest, :global
   slot :inner_block, required: true
 
@@ -77,9 +80,15 @@ defmodule SaladUI.Popover do
 
   def popover_content(assigns) do
     assigns =
-      assign(assigns, :variant_class, side_variant(assigns.side, assigns.align))
-   |> assign_new(:state, fn -> if assigns[:open] in ["true", true] do "open" else "closed" end  end)
-
+      assigns
+      |> assign(:variant_class, side_variant(assigns.side, assigns.align))
+      |> assign_new(:state, fn ->
+        if assigns[:open] in ["true", true] do
+          "open"
+        else
+          "closed"
+        end
+      end)
 
     ~H"""
     <div
@@ -105,8 +114,7 @@ defmodule SaladUI.Popover do
     JS.toggle_attribute({"data-state", "open", "closed"}, to: "##{id}")
   end
 
-  defp hide() do
+  defp hide do
     JS.set_attribute({"data-state", "closed"})
   end
-
 end

test/salad_ui/chart_test.exs

@@ -1,5 +1,6 @@
 defmodule SaladUI.ChartTest do
   use ComponentCase
+
   alias SaladUI.LiveChart
 
   @sample_config %{

test/salad_ui/collapsible_test.exs

@@ -1,8 +1,8 @@
 defmodule SaladUI.CollapsibleTest do
   use ExUnit.Case
   use Phoenix.Component
-  import Phoenix.LiveViewTest
 
+  import Phoenix.LiveViewTest
   import SaladUI.Collapsible
 
   describe "collapsible/1" do
@@ -86,6 +86,7 @@ defmodule SaladUI.CollapsibleTest do
       for class <- ~w(collapsible-content hidden transition-all duration-200 ease-in-out) do
         assert html =~ class
       end
+
       assert html =~ "Hidden content"
     end
 
@@ -122,13 +123,16 @@ defmodule SaladUI.CollapsibleTest do
       js = toggle_collapsible(%Phoenix.LiveView.JS{}, %{id: "test-collapsible"})
 
       assert js.ops == [
-        ["toggle", %{
-          to: "#test-collapsible .collapsible-content",
-ins: [["ease-out", "duration-200"], ["opacity-0"], ["opacity-100"]],
-                  outs: [["ease-out"], ["opacity-100"], ["opacity-70"]],
-          time: 200
-        }]
-      ]
+               [
+                 "toggle",
+                 %{
+                   to: "#test-collapsible .collapsible-content",
+                   ins: [["ease-out", "duration-200"], ["opacity-0"], ["opacity-100"]],
+                   outs: [["ease-out"], ["opacity-100"], ["opacity-70"]],
+                   time: 200
+                 }
+               ]
+             ]
     end
   end
 
@@ -137,7 +141,7 @@ ins: [["ease-out", "duration-200"], ["opacity-0"], ["opacity-100"]],
 
     html =
       rendered_to_string(~H"""
-      <.collapsible id="test-collapsible" :let={builder} open={false}>
+      <.collapsible :let={builder} id="test-collapsible" open={false}>
         <.collapsible_trigger builder={builder}>
           <button>Toggle</button>
         </.collapsible_trigger>

test/salad_ui/popover_test.exs

@@ -80,7 +80,8 @@ defmodule SaladUI.PopoverTest do
         |> rendered_to_string()
         |> clean_string()
 
-      assert html =~ "div class=\"relative inline-block\"><div class=\"\" phx-click=\"[[&quot;toggle_attr&quot;,{&quot;attr&quot;:[&quot;data-state&quot;,&quot;open&quot;,&quot;closed&quot;],&quot;to&quot;:&quot;#content-id&quot;}]]\"><button class=\"inline-flex px-4 py-2 rounded-md text-primary transition-colors whitespace-nowrap items-center justify-center font-medium underline-offset-4 text-sm h-9 hover:underline focus-visible:ring-ring focus-visible:outline-none focus-visible:ring-1 disabled:pointer-events-none disabled:opacity-50\">@salad_ui</button></div><div data-side=\"top\" data-state=\"closed\" phx-click-away=\"[[&quot;set_attr&quot;,{&quot;attr&quot;:[&quot;data-state&quot;,&quot;closed&quot;]}]]\" class=\"absolute block p-4 mb-2 rounded-md bg-popover text-popover-foreground outline-none shadow-md z-50 left-1/2 bottom-full w-72 -translate-x-1/2 animate-in border data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:hidden fade-in-0 slide-in-from-left-1/2 zoom-in-95\" id=\"content-id\">Hover card content</div></div>"
+      assert html =~
+               "div class=\"relative inline-block\"><div class=\"\" phx-click=\"[[&quot;toggle_attr&quot;,{&quot;attr&quot;:[&quot;data-state&quot;,&quot;open&quot;,&quot;closed&quot;],&quot;to&quot;:&quot;#content-id&quot;}]]\"><button class=\"inline-flex px-4 py-2 rounded-md text-primary transition-colors whitespace-nowrap items-center justify-center font-medium underline-offset-4 text-sm h-9 hover:underline focus-visible:ring-ring focus-visible:outline-none focus-visible:ring-1 disabled:pointer-events-none disabled:opacity-50\">@salad_ui</button></div><div data-side=\"top\" data-state=\"closed\" phx-click-away=\"[[&quot;set_attr&quot;,{&quot;attr&quot;:[&quot;data-state&quot;,&quot;closed&quot;]}]]\" class=\"absolute block p-4 mb-2 rounded-md bg-popover text-popover-foreground outline-none shadow-md z-50 left-1/2 bottom-full w-72 -translate-x-1/2 animate-in border data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:hidden fade-in-0 slide-in-from-left-1/2 zoom-in-95\" id=\"content-id\">Hover card content</div></div>"
     end
   end
 end