Prepare for next Surface version 0.11.2 (#75)

* update deps

* fix warnings about using variables in template and undefined assigns (data)

* align with phx_new 1.7.10

* update to erlang 26.2.2 and elixir 1.16.1

* fix `negative steps are not supported in Enum.slice/2` warning

.github/workflows/ci.yml

@@ -14,8 +14,8 @@ jobs:
       fail-fast: false
       matrix:
         include:
-          - elixir: '1.14.5'
-            otp: '25.3.2.8'
+          - elixir: '1.16.1'
+            otp: '26.2.2'
     env:
       MIX_ENV: test
     steps:

.tool-versions

@@ -1,2 +1,2 @@
-erlang 25.3.2.8
-elixir 1.14.5-otp-25
+erlang 26.2.2
+elixir 1.16.1-otp-26

assets/tailwind.config.js

@@ -9,9 +9,9 @@
 // module.exports = {
 //   content: [
 //     "./js/**/*.js",
-//     "../lib/*_web.ex",
-//     "../lib/*_web/**/*.*ex",
-//     "../lib/*_web/**/*.sface",
+//     "../lib/surface_site_web.ex",
+//     "../lib/surface_site_web/**/*.*ex",
+//     "../lib/surface_site_web/**/*.sface",
 //     "../priv/catalogue/**/*.{ex,sface}"
 //   ],
 //   theme: {
@@ -45,7 +45,7 @@
 //         ["-mini", "/20/solid"]
 //       ]
 //       icons.forEach(([suffix, dir]) => {
-//         fs.readdirSync(path.join(iconsDir, dir)).map(file => {
+//         fs.readdirSync(path.join(iconsDir, dir)).forEach(file => {
 //           let name = path.basename(file, ".svg") + suffix
 //           values[name] = {name, fullPath: path.join(iconsDir, dir, file)}
 //         })

config/config.exs

@@ -27,6 +27,7 @@ config :surface, :components, [
 # Configures the endpoint
 config :surface_site, SurfaceSiteWeb.Endpoint,
   url: [host: "localhost"],
+  adapter: Phoenix.Endpoint.Cowboy2Adapter,
   render_errors: [
     formats: [html: SurfaceSiteWeb.ErrorHTML, json: SurfaceSiteWeb.ErrorJSON],
     layout: false

config/dev.exs

@@ -63,3 +63,6 @@ config :phoenix, :stacktrace_depth, 20
 
 # Initialize plugs at runtime for faster development compilation
 config :phoenix, :plug_init_mode, :runtime
+
+# Include HEEx debug annotations as HTML comments in rendered markup
+config :phoenix_live_view, :debug_heex_annotations, true

config/runtime.exs

@@ -36,6 +36,8 @@ if config_env() == :prod do
   host = System.get_env("PHX_HOST") || "surface-ui.org"
   port = String.to_integer(System.get_env("PORT") || "4000")
 
+  config :surface_site, :dns_cluster_query, System.get_env("DNS_CLUSTER_QUERY")
+
   config :surface_site, SurfaceSiteWeb.Endpoint,
     url: [host: host, port: 443, scheme: "https"],
     http: [

config/test.exs

@@ -7,9 +7,6 @@ config :surface_site, SurfaceSiteWeb.Endpoint,
   secret_key_base: "qick86rrt0cZHQpbf7BLKywNWLsT9FUWpg/f//xOmOw6ZD/rVBUd+f0KMzEw0jI+",
   server: false
 
-# In test we don't send emails.
-config :surface_site, SurfaceSite.Mailer, adapter: Swoosh.Adapters.Test
-
 # Print only warnings and errors during test
 config :logger, level: :warning
 

elixir_buildpack.config

@@ -1,2 +1,2 @@
-elixir_version=1.13.2
-erlang_version=24.2
+elixir_version=1.16.1
+erlang_version=26.2.2

lib/surface_site/application.ex

@@ -8,9 +8,9 @@ defmodule SurfaceSite.Application do
   @impl true
   def start(_type, _args) do
     children = [
-      # Start the PubSub system
+      {DNSCluster, query: Application.get_env(:surface_site, :dns_cluster_query) || :ignore},
       {Phoenix.PubSub, name: SurfaceSite.PubSub},
-      # Start the Endpoint (http/https)
+      # Start to serve requests, typically the last entry
       SurfaceSiteWeb.Endpoint
     ]
 

lib/surface_site_web/components/code.ex

@@ -138,7 +138,7 @@ defmodule SurfaceSiteWeb.Components.Code do
           raise "invalid line range. Ending line cannot be 0"
       end
 
-    index_from..index_to
+    index_from..index_to//1
   end
 
   defp normalize_line_range(value) do

lib/surface_site_web/components/component_info.ex

@@ -28,6 +28,12 @@ defmodule SurfaceSiteWeb.Components.ComponentInfo do
       :before_docs
     ]
 
+  data id, :string
+  data full_module_name, :string
+  data module_summary, :string
+  data module_doc, :string
+  data module_name, :string
+
   @doc "The examples for the component"
   slot examples
 
@@ -45,21 +51,29 @@ defmodule SurfaceSiteWeb.Components.ComponentInfo do
 
     id = "ComponentInfo_#{module_name}"
 
+    assigns =
+      assigns
+      |> assign(:id, id)
+      |> assign(:full_module_name, full_module_name)
+      |> assign(:module_summary, module_summary)
+      |> assign(:module_doc, module_doc)
+      |> assign(:module_name, module_name)
+
     ~F"""
-    <div id={id} class="ComponentInfo">
-      <h1 class="title">{@title || full_module_name}</h1>
-      {String.trim_trailing(module_summary || "", ".") |> Markdown.to_html(class: "subtitle")}
+    <div id={@id} class="ComponentInfo">
+      <h1 class="title">{@title || @full_module_name}</h1>
+      {String.trim_trailing(@module_summary || "", ".") |> Markdown.to_html(class: "subtitle")}
       <hr>
       <div :if={@examplesPosition == :before_docs}>
         <#slot {@examples} />
       </div>
-      {module_doc |> Markdown.to_html()}
+      {@module_doc |> Markdown.to_html()}
       <div :if={@examplesPosition == :after_docs}>
-        <hr :if={module_doc not in [nil, ""]}>
+        <hr :if={@module_doc not in [nil, ""]}>
         <#slot {@examples} />
       </div>
       <hr :if={assigns[:examples]}>
-      <SectionSeparator title="Public API" id={"#{module_name}-API"} />
+      <SectionSeparator title="Public API" id={"#{@module_name}-API"} />
       <ComponentAPI module={@module} />
     </div>
     """

lib/surface_site_web/components/core_components.ex

@@ -2,9 +2,9 @@ defmodule SurfaceSiteWeb.CoreComponents do
   @moduledoc """
   Provides core UI components.
 
-  At the first glance, this module may seem daunting, but its goal is
-  to provide some core building blocks in your application, such as modals,
-  tables, and forms. The components are mostly markup and well documented
+  At first glance, this module may seem daunting, but its goal is to provide
+  core building blocks for your application, such as modals, tables, and
+  forms. The components consist mostly of markup and are well-documented
   with doc strings and declarative assigns. You may customize and style
   them in any way you want, based on your application growth and needs.
 
@@ -96,7 +96,7 @@ defmodule SurfaceSiteWeb.CoreComponents do
       <.flash kind={:info} flash={@flash} />
       <.flash kind={:info} phx-mounted={show("#flash")}>Welcome Back!</.flash>
   """
-  attr :id, :string, default: "flash", doc: "the optional id of flash container"
+  attr :id, :string, doc: "the optional id of flash container"
   attr :flash, :map, default: %{}, doc: "the map of flash messages to display"
   attr :title, :string, default: nil
   attr :kind, :atom, values: [:info, :error], doc: "used for styling and flash lookup"
@@ -105,14 +105,16 @@ defmodule SurfaceSiteWeb.CoreComponents do
   slot :inner_block, doc: "the optional inner block that renders the flash message"
 
   def flash(assigns) do
+    assigns = assign_new(assigns, :id, fn -> "flash-#{assigns.kind}" end)
+
     ~H"""
     <div
       :if={msg = render_slot(@inner_block) || Phoenix.Flash.get(@flash, @kind)}
       id={@id}
       phx-click={JS.push("lv:clear-flash", value: %{key: @kind}) |> hide("##{@id}")}
       role="alert"
       class={[
-        "fixed top-2 right-2 w-80 sm:w-96 z-50 rounded-lg p-3 ring-1",
+        "fixed top-2 right-2 mr-2 w-80 sm:w-96 z-50 rounded-lg p-3 ring-1",
         @kind == :info && "bg-emerald-50 text-emerald-800 ring-emerald-500 fill-cyan-900",
         @kind == :error && "bg-rose-50 text-rose-900 shadow-md ring-rose-500 fill-rose-900"
       ]}
@@ -139,33 +141,36 @@ defmodule SurfaceSiteWeb.CoreComponents do
       <.flash_group flash={@flash} />
   """
   attr :flash, :map, required: true, doc: "the map of flash messages"
+  attr :id, :string, default: "flash-group", doc: "the optional id of flash container"
 
   def flash_group(assigns) do
     ~H"""
-    <.flash kind={:info} title="Success!" flash={@flash} />
-    <.flash kind={:error} title="Error!" flash={@flash} />
-    <.flash
-      id="client-error"
-      kind={:error}
-      title="We can't find the internet"
-      phx-disconnected={show(".phx-client-error #client-error")}
-      phx-connected={hide("#client-error")}
-      hidden
-    >
-      Attempting to reconnect <.icon name="hero-arrow-path" class="ml-1 h-3 w-3 animate-spin" />
-    </.flash>
-
-    <.flash
-      id="server-error"
-      kind={:error}
-      title="Something went wrong!"
-      phx-disconnected={show(".phx-server-error #server-error")}
-      phx-connected={hide("#server-error")}
-      hidden
-    >
-      Hang in there while we get back on track
-      <.icon name="hero-arrow-path" class="ml-1 h-3 w-3 animate-spin" />
-    </.flash>
+    <div id={@id}>
+      <.flash kind={:info} title="Success!" flash={@flash} />
+      <.flash kind={:error} title="Error!" flash={@flash} />
+      <.flash
+        id="client-error"
+        kind={:error}
+        title="We can't find the internet"
+        phx-disconnected={show(".phx-client-error #client-error")}
+        phx-connected={hide("#client-error")}
+        hidden
+      >
+        Attempting to reconnect <.icon name="hero-arrow-path" class="ml-1 h-3 w-3 animate-spin" />
+      </.flash>
+
+      <.flash
+        id="server-error"
+        kind={:error}
+        title="Something went wrong!"
+        phx-disconnected={show(".phx-server-error #server-error")}
+        phx-connected={hide("#server-error")}
+        hidden
+      >
+        Hang in there while we get back on track
+        <.icon name="hero-arrow-path" class="ml-1 h-3 w-3 animate-spin" />
+      </.flash>
+    </div>
     """
   end
 
@@ -293,9 +298,11 @@ defmodule SurfaceSiteWeb.CoreComponents do
     |> input()
   end
 
-  def input(%{type: "checkbox", value: value} = assigns) do
+  def input(%{type: "checkbox"} = assigns) do
     assigns =
-      assign_new(assigns, :checked, fn -> Phoenix.HTML.Form.normalize_value("checkbox", value) end)
+      assign_new(assigns, :checked, fn ->
+        Phoenix.HTML.Form.normalize_value("checkbox", assigns[:value])
+      end)
 
     ~H"""
     <div phx-feedback-for={@name}>
@@ -468,8 +475,10 @@ defmodule SurfaceSiteWeb.CoreComponents do
       <table class="w-[40rem] mt-11 sm:w-full">
         <thead class="text-sm text-left leading-6 text-zinc-500">
           <tr>
-            <th :for={col <- @col} class="p-0 pr-6 pb-4 font-normal"><%= col[:label] %></th>
-            <th class="relative p-0 pb-4"><span class="sr-only">Actions</span></th>
+            <th :for={col <- @col} class="p-0 pb-4 pr-6 font-normal"><%= col[:label] %></th>
+            <th :if={@action != []} class="relative p-0 pb-4">
+              <span class="sr-only">Actions</span>
+            </th>
           </tr>
         </thead>
         <tbody

mix.exs

@@ -33,17 +33,18 @@ defmodule SurfaceSite.MixProject do
   # Type `mix help deps` for examples and options.
   defp deps do
     [
-      {:surface, "~> 0.11.1"},
+      {:surface, "~> 0.11", github: "surface-ui/surface", override: true},
+      {:phoenix, "1.7.10"},
       {:surface_markdown, "~> 0.6.1"},
       {:nimble_publisher, "~> 0.1.2"},
       {:html_entities, "~> 0.5"},
-      {:phoenix, "1.7.7"},
       {:phoenix_live_reload, "~> 1.2", only: :dev},
       {:floki, ">= 0.30.0", only: :test},
-      {:esbuild, "~> 0.7", runtime: Mix.env() == :dev},
+      {:esbuild, "~> 0.8", runtime: Mix.env() == :dev},
       # TODO: Tailwind
       # {:tailwind, "~> 0.2.0", runtime: Mix.env() == :dev},
       {:jason, "~> 1.2"},
+      {:dns_cluster, "~> 0.1.1"},
       {:plug_cowboy, "~> 2.5"}
     ]
   end