PhoenixKitWeb.Components.Core.IntegrationsUI (phoenix_kit v2.0.0)

Copy Markdown View Source

Shared UI for the integration setup screens — the provider picker, the provider/status header card, a single setup field, and the collapsible setup instructions, plus the small display helpers they need (status badge, relative timestamps, inline markdown).

Extracted so the website-wide integrations pages (Live.Settings.Integrations / IntegrationForm) and the personal pages (Live.Integrations.MyIntegrations / MyIntegrationForm) render the same markup instead of drifting apart. The personal screens use it today; the website screens carry their own equivalents pending a convergence pass.

Summary

Functions

Humanizes a UTC ISO8601 timestamp into a relative phrase like "2 hours ago" / "3 days ago" / "Apr 28 2026". nil/""nil; falls back to the raw string on parse failure.

Maps a connection status string to {daisyUI badge class, label}.

Provider picker — a card grid, one card per provider. Clicking a card pushes event (default "select_provider") with phx-value-provider.

Provider info / status header card. No badge is shown until the connection has actually been saved (name set) — a fresh /new flow has nothing to report yet.

Simple inline markdown: **bold**, [links](url), `code` and {variables}.

A single provider setup field, rendered from the field's :type.

Collapsible provider setup instructions (from the provider definition). open defaults closed; callers pass open={@name == nil} to keep it open during first-time setup.

Functions

format_relative(iso_string)

@spec format_relative(String.t() | nil) :: String.t() | nil

Humanizes a UTC ISO8601 timestamp into a relative phrase like "2 hours ago" / "3 days ago" / "Apr 28 2026". nil/""nil; falls back to the raw string on parse failure.

integration_status_badge(_)

@spec integration_status_badge(String.t() | nil) :: {String.t(), String.t()}

Maps a connection status string to {daisyUI badge class, label}.

provider_picker(assigns)

Provider picker — a card grid, one card per provider. Clicking a card pushes event (default "select_provider") with phx-value-provider.

Attributes

  • providers (:list) (required)
  • event (:string) - Defaults to "select_provider".

provider_status_card(assigns)

Provider info / status header card. No badge is shown until the connection has actually been saved (name set) — a fresh /new flow has nothing to report yet.

Attributes

  • provider (:map) (required)
  • data (:map) (required)
  • name (:string) - Defaults to nil.

render_markdown_inline(text, vars)

@spec render_markdown_inline(String.t(), map() | keyword()) :: String.t()

Simple inline markdown: **bold**, [links](url), `code` and {variables}.

setup_field(assigns)

A single provider setup field, rendered from the field's :type.

Credential-shaped fields stay type="text" on purpose — they're API keys / tokens, not site logins, and type="password" would trigger browsers' password-save heuristics. :select, :textarea and :number render as themselves; anything else falls back to a text input, so a provider that declares a type this component has never heard of still gets a usable field rather than a blank spot in the form.

A :select with no stored value falls to the first option, so a provider should list its default first (that is how the SMTP security / auth / verify_cert fields keep their historical behavior on connections created before they existed).

Attributes

  • field (:map) (required)
  • value (:string) - Defaults to "".

setup_instructions(assigns)

Collapsible provider setup instructions (from the provider definition). open defaults closed; callers pass open={@name == nil} to keep it open during first-time setup.

Attributes

  • provider (:map) (required)
  • redirect_uri (:string) - Defaults to nil.
  • open (:boolean) - Defaults to false.