WIP bonfire-networks/bonfire-app#1043

lib/components/core_components.swiftui.ex

@@ -1,4 +1,5 @@
 if Code.ensure_loaded?(LiveViewNative.Component) do
+
   defmodule Bonfire.UI.Common.CoreComponents.SwiftUI do
     @moduledoc """
     Provides core UI components built for SwiftUI.
@@ -18,9 +19,62 @@ if Code.ensure_loaded?(LiveViewNative.Component) do
     """
 
     use LiveViewNative.Component
+    use Bonfire.UI.Common
 
     import LiveViewNative.LiveForm.Component
 
+
+     @doc """
+     A special component that allows users to inject dynamic live components
+     """
+     attr :module, :atom, required: true
+     attr :id, :string, required: true
+     attr :function, :atom, default: :render
+     slot :default
+     def stateful_component(assigns) do
+       # TEMP: until LVN supports live components
+       stateless_component(with true <- module_enabled?(assigns[:module]),
+         {:ok, assigns} <- assigns
+         |> assign(module_default_assigns(assigns[:module])) 
+         |> assign(assigns) # again so we override defaults
+         |> assign_new(:myself, fn -> nil end)
+         |> assign_new(:streams, fn -> nil end)
+         |> apply(assigns[:module], :mount, [...]),
+         {:ok, assigns} <- apply(assigns[:module], :update, [assigns, assigns]) do
+            assign_new(assigns, :function, fn -> :render end)
+            |> debug("assi")
+            else e ->
+            error(e)
+            assigns
+            |> debug("erssi")
+            |> assign(:module, __MODULE__)
+            |> assign(:function, :error_msg)
+            |> assign(:text, "Could not render component")
+         end
+       )
+       # TODO: when LVN supports live components
+       # ~LVN"""
+       #  <Phoenix.Component.live_component module={@module} id={@id}><%= render_slot(@default) %></Phoenix.Component.live_component>
+       # """
+     end
+
+     @doc """
+     A special component that allows users to inject dynamic function components
+     """
+     attr :module, :atom, default: nil
+     attr :function, :atom, default: :render
+     attr :id, :string, default: nil
+     slot :default
+     def stateless_component(assigns) do
+       ~LVN"""
+       <%= Phoenix.LiveView.TagEngine.component(
+             &apply(@module || __MODULE__, @function || :render, [&1]),
+             assigns,
+             {__ENV__.module, __ENV__.function, __ENV__.file, __ENV__.line}
+           ) %>
+       """
+     end
+
     @doc """
     Renders an input with label and error messages.
 
@@ -124,7 +178,7 @@ if Code.ensure_loaded?(LiveViewNative.Component) do
             <%= @label %>
           </TextFieldLink>
         </LabeledContent>
-        <.error :for={msg <- @errors}><%= msg %></.error>
+        <.error_msg :for={msg <- @errors}><%= msg %></.error_msg>
       </VStack>
       """
     end
@@ -135,7 +189,7 @@ if Code.ensure_loaded?(LiveViewNative.Component) do
         <DatePicker id={@id} name={@name} selection={@value} {@rest}>
           <%= @label %>
         </DatePicker>
-        <.error :for={msg <- @errors}><%= msg %></.error>
+        <.error_msg :for={msg <- @errors}><%= msg %></.error_msg>
       </VStack>
       """
     end
@@ -147,7 +201,7 @@ if Code.ensure_loaded?(LiveViewNative.Component) do
           <Text template="label"><%= @label %></Text>
           <MultiDatePicker id={@id} name={@name} selection={@value} {@rest}><%= @label %></MultiDatePicker>
         </LabeledContent>
-        <.error :for={msg <- @errors}><%= msg %></.error>
+        <.error_msg :for={msg <- @errors}><%= msg %></.error_msg>
       </VStack>
       """
     end
@@ -164,7 +218,7 @@ if Code.ensure_loaded?(LiveViewNative.Component) do
             <%= name %>
           </Text>
         </Picker>
-        <.error :for={msg <- @errors}><%= msg %></.error>
+        <.error_msg :for={msg <- @errors}><%= msg %></.error_msg>
       </VStack>
       """
     end
@@ -176,7 +230,7 @@ if Code.ensure_loaded?(LiveViewNative.Component) do
           <Text template="label"><%= @label %></Text>
           <Slider id={@id} name={@name} value={@value} lowerBound={@min} upperBound={@max} {@rest}><%= @label %></Slider>
         </LabeledContent>
-        <.error :for={msg <- @errors}><%= msg %></.error>
+        <.error_msg :for={msg <- @errors}><%= msg %></.error_msg>
       </VStack>
       """
     end
@@ -188,7 +242,7 @@ if Code.ensure_loaded?(LiveViewNative.Component) do
           <Text template="label"><%= @label %></Text>
           <Stepper id={@id} name={@name} value={@value} {@rest}></Stepper>
         </LabeledContent>
-        <.error :for={msg <- @errors}><%= msg %></.error>
+        <.error_msg :for={msg <- @errors}><%= msg %></.error_msg>
       </VStack>
       """
     end
@@ -200,7 +254,7 @@ if Code.ensure_loaded?(LiveViewNative.Component) do
           <Text template="label"><%= @label %></Text>
           <TextEditor id={@id} name={@name} text={@value} {@rest} />
         </LabeledContent>
-        <.error :for={msg <- @errors}><%= msg %></.error>
+        <.error_msg :for={msg <- @errors}><%= msg %></.error_msg>
       </VStack>
       """
     end
@@ -209,7 +263,7 @@ if Code.ensure_loaded?(LiveViewNative.Component) do
       ~LVN"""
       <VStack alignment="leading">
         <TextField id={@id} name={@name} text={@value} prompt={@prompt} {@rest}><%= @placeholder || @label %></TextField>
-        <.error :for={msg <- @errors}><%= msg %></.error>
+        <.error_msg :for={msg <- @errors}><%= msg %></.error_msg>
       </VStack>
       """
     end
@@ -218,7 +272,7 @@ if Code.ensure_loaded?(LiveViewNative.Component) do
       ~LVN"""
       <VStack alignment="leading">
         <SecureField id={@id} name={@name} text={@value} prompt={@prompt} {@rest}><%= @placeholder || @label %></SecureField>
-        <.error :for={msg <- @errors}><%= msg %></.error>
+        <.error_msg :for={msg <- @errors}><%= msg %></.error_msg>
       </VStack>
       """
     end
@@ -230,7 +284,7 @@ if Code.ensure_loaded?(LiveViewNative.Component) do
           <Text template="label"><%= @label %></Text>
           <Toggle id={@id} name={@name} isOn={Map.get(assigns, :checked, Map.get(assigns, :value))} {@rest}></Toggle>
         </LabeledContent>
-        <.error :for={msg <- @errors}><%= msg %></.error>
+        <.error_msg :for={msg <- @errors}><%= msg %></.error_msg>
       </VStack>
       """
     end
@@ -239,12 +293,13 @@ if Code.ensure_loaded?(LiveViewNative.Component) do
     Generates a generic error message.
     """
     @doc type: :component
-    slot :inner_block, required: true
+    attr :text, :string, required: false, default: nil
+    slot :inner_block, required: false
 
-    def error(assigns) do
+    def error_msg(assigns) do
       ~LVN"""
       <Group style="font(.caption); foregroundStyle(.red)">
-        <%= render_slot(@inner_block) %>
+        <%= @text %> <%= render_slot(@inner_block) %>
       </Group>
       """
     end

lib/components/nav/header/guest_header_live.ex

@@ -4,5 +4,5 @@ defmodule Bonfire.UI.Common.GuestHeaderLive do
   prop page, :string, default: "home"
 
   # @decorate time()
-  render_sface_or_native()
+  # render_sface_or_native()
 end

lib/components/nav/user_menu/user_menu_links_live.sface

@@ -48,14 +48,14 @@
   </LinkLive>
 </li> -->
 
-<!-- <li>
+{!-- <li>
   <StatelessComponent
     module={maybe_component(Bonfire.UI.Groups.NewGroupLive, @__context__)}
     parent_id="user_menu_links"
     open_btn_wrapper_class="flex items-center gap-2 text-sm text-base-content"
     open_btn_class=""
   />
-</li> -->
+</li> --}
 
 <li>
   <LinkLive to={~p"/settings"} class="flex items-center gap-2 text-sm text-base-content">

lib/endpoint_live_reload.ex

@@ -15,7 +15,7 @@ defmodule Bonfire.UI.Common.Endpoint.LiveReload do
         plug(Phoenix.LiveReloader)
         plug(Phoenix.CodeReloader)
 
-        if unquote(System.get_env("NATIVE_ENABLED") in ["1", "true"]) do
+        if unquote(System.get_env("WITH_LV_NATIVE") in ["1", "true"]) do
           plug LiveViewNative.LiveReloader
         end
 

lib/layout/app.swiftui.neex

@@ -0,0 +1,2 @@
+<.flash_group flash={@flash} />
+<%= @inner_content %>

lib/layout/root.swiftui.neex

@@ -0,0 +1,5 @@
+<.csrf_token />
+<Style url={~p"/assets/app.swiftui.styles"} />
+<NavigationStack>
+  <%= @inner_content %>
+</NavigationStack>

lib/static_generator/static_generator_plug.ex

@@ -17,14 +17,30 @@ defmodule Bonfire.UI.Common.StaticGeneratorPlug do
     conn
   end
 
+  def make_request_path_static(%{query_params: %{"_format" => format}} = conn, _) do
+    # for LVN
+    debug("skip cache")
+    conn
+    # do_make_request_path_static(conn, format)
+  end
+
+  def make_request_path_static(%{query_params: %{"_email_format" => format}} = conn, _) do
+    # for email templates
+    do_make_request_path_static(conn, format)
+  end
+
   def make_request_path_static(conn, _) do
-    filename = "index.html"
+    do_make_request_path_static(conn)
+  end
+
+  defp do_make_request_path_static(conn, ext \\ "html") do
+    filename = "index.#{ext}"
 
     request_path = conn.request_path || "/"
 
     #  only generate expired or non-existing caches if on demand mode is enabled (vs for example cron mode)
     with true <- Config.get([__MODULE__, :generate_mode]) == :on_demand,
-         %{error: _} <- Bonfire.UI.Common.StaticGenerator.maybe_generate(request_path) do
+         %{error: _} <- Bonfire.UI.Common.StaticGenerator.maybe_generate(request_path, ext: ext) do
       error("Could not find or generate a static cache at #{request_path}")
       conn
     else

lib/themes/default/app.swiftui.ex

@@ -0,0 +1,70 @@
+defmodule Bonfire.UI.Common.Themes.Default.App.SwiftUI do
+  use LiveViewNative.Stylesheet, :swiftui
+
+  # Add your styles here
+  # Refer to your client's documentation on what the proper syntax
+  # is for defining rules within classes
+  ~SHEET"""
+  
+  """
+
+  def class("main_header") do
+    ~RULES"""
+      toolbar(content: :toolbar)
+      navigationTitle(:title)
+      toolbarTitleMenu(content: :content)
+      navigationBarTitleDisplayMode(.inline)
+      toolbarBackgroundVisibility(.visible, for: .navigationBar)
+      toolbarBackground(.ultraThinMaterial, for: .navigationBar)
+    """
+  end
+
+  def class("simple_header") do
+    ~RULES"""
+      toolbar(content: :toolbar)
+      navigationTitle(:title)
+      navigationBarTitleDisplayMode(.inline)
+    """
+  end
+
+  def class("detents:" <> props) do
+    [height, size] = String.split(props, ":")
+
+    # {height, _} = Integer.parse(height)
+
+    ~RULES"""
+    presentationDetents([.{height}, .{size}])
+    """
+ end
+
+ def class("dragindicator:" <> props) do
+
+    ~RULES"""
+    presentationDragIndicator(.{props})
+    """
+ end
+
+
+ def class("ultrathinmaterial") do
+  ~RULES"""
+  presentationBackground(.ultraThinMaterial)
+  """
+ end
+
+  # If you need to have greater control over how your style rules are created
+  # you can use the function defintion style which is more verbose but allows
+  # for more fine-grained controled
+  #
+  # This example shows what is not possible within the more concise ~SHEET
+  # use `<Text class="frame:w100:h200" />` allows for a setting
+  # of both the `width` and `height` values.
+
+  # def class("frame:" <> dims) do
+  #   [width] = Regex.run(~r/w(\d+)/, dims, capture: :all_but_first)
+  #   [height] = Regex.run(~r/h(\d+)/, dims, capture: :all_but_first)
+
+  #   ~RULES"""
+  #   frame(width: {width}, height: {height})
+  #   """
+  # end
+end

lib/ui_common.ex

@@ -1334,6 +1334,16 @@ defmodule Bonfire.UI.Common do
   Inserts one or many items in an existing stream.
   See `Phoenix.LiveView.stream_insert/4` for opts.
   """
+  def maybe_stream_insert(%{assigns: %{streams: streams}} = socket, name, items, _opts) when is_nil(streams) or streams==%{} do
+    error(
+      assigns(socket),
+      "Invalid stream '#{name}' to render data in. Will set as regular assign instead"
+    )
+
+    socket
+    |> assign_generic(name, items)
+  end
+
   def maybe_stream_insert(%{assigns: %{streams: _}} = socket, name, items, opts)
       when is_list(items) do
     Phoenix.LiveView.stream(socket, name, items, opts)
@@ -1424,4 +1434,22 @@ defmodule Bonfire.UI.Common do
   end
 
   def assigns(_), do: %{}
+
+  def component_props(module) do
+    component_attr(module, :prop)
+  end
+  def component_data(module) do
+    component_attr(module, :data)
+  end
+  defp component_attr(module, key) do
+    apply(Bonfire.UI.Social.FeedLive, :__info__, [:attributes])
+    |> Keyword.get_values(key)
+    |> Enum.flat_map(&(&1))
+  end
+
+  def module_default_assigns(module) do
+    for %{name: name, opts: opts} <- component_props(module) ++ component_data(module), Keyword.has_key?(opts, :default) do
+      {name, opts[:default]}
+    end
+  end
 end