Initial Commit

2026-02-12 17:10:03 -06:00
commit 6992a06105
135 changed files with 18014 additions and 0 deletions
@@ -0,0 +1,72 @@
+defmodule RiverConnectWeb.Components.UI.LiveView do
+  @moduledoc """
+  Helper functions for integrating SaladUI with Phoenix LiveView.
+  """
+
+  @doc """
+  Send a command to a SaladUI component.
+  This is useful for programmatically controlling components from server-side code.
+  ## Parameters
+  - `socket`: The LiveView socket.
+  - `component_id`: The ID of the component to send the command to.
+  - `command`: The name of the command to send. Command could be any transitions that component state machine support or custom commands that supported by component.
+  - `params`: Optional parameters for the command.
+
+  ## Example
+  ```elixir
+  send_command(socket, "dialog", "open")
+  ```
+  """
+  def send_command(socket, component_id, command, params \\ %{}) do
+    Phoenix.LiveView.push_event(socket, "saladui:command", %{
+      command: command,
+      params: params,
+      target: component_id
+    })
+  end
+end
+
+defmodule RiverConnectWeb.Components.UI.JS do
+  @moduledoc """
+  Helper functions for integrating SaladUI with Phoenix LiveView using JavaScript commands.
+  """
+
+  @doc """
+  Dispatch a command to a SaladUI component using JavaScript.
+  This is useful for programmatically controlling components from client-side code.
+
+  ## Parameters
+  - `js`: The JavaScript object.
+  - `command_name`: The name of the command to dispatch.
+  - `opts`: Options for the command, including `:detail` for additional parameters.
+
+  ## How it works
+  This function use JS.dispatch to send a command to the component similar to `send_command/4`.
+
+  Each component listens for the `salad_ui:command` event and executes the corresponding command similar to the way it handle `send_command/4` from server side .
+
+  ## Example
+  ```elixir
+  <button
+    phx-click={%JS{} |> RiverConnectWeb.Components.UI.JS.dispatch_command("open", to: "#dialog")}> Click me </button>
+  ```
+  """
+  def dispatch_command(js \\ %Phoenix.LiveView.JS{}, command_name, opts \\ []) do
+    details = %{
+      command: command_name,
+      params: opts[:detail]
+    }
+
+    Phoenix.LiveView.JS.dispatch(
+      js,
+      "salad_ui:command",
+      opts |> Keyword.put(:detail, details) |> IO.inspect(label: "dispatch_command")
+    )
+  end
+end
+
+defimpl Jason.Encoder, for: Phoenix.LiveView.JS do
+  def encode(value, opts) do
+    Jason.Encode.list(value.ops, opts)
+  end
+end