PrimerLive (PrimerLive v0.1.3)

PrimerLive is a collection of function components that implements GitHub's Primer Design System. It is intended for usage in Phoenix LiveView pages and regular (non-LiveView) views in Phoenix applications.

Since this implementation closely adheres to the Primer CSS documentation, extending components with Primer's utility classes should be simple.

source-code

Source code

PrimerLive at GitHub

versioning

Versioning

Dependencies:

Included libraries:

installation

Installation

install-dependencies

Install dependencies

  • Edit mix.exs and add dependency primer_live
  • Run mix.deps get

dependency-setup-for-deploying

Dependency setup for deploying

To ensure that the assets are installed before your application has started, or before it has been deployed, add "npm install" to the scripts in mix.exs. For example:

defp aliases do
  [
    setup: ["deps.get", "cmd npm --prefix assets install"],
    "assets.deploy": [
      "cmd npm --prefix assets install",
      "esbuild default --minify",
      "phx.digest"
    ]
  ]
end

set-up-javascript-css

Set up JavaScript / CSS

Install primer-live

Inside your assets folder, do:

npm install primer-live --save

Add to your app.js:

import { Prompt } from "primer-live";
import "primer-live/primer-live.css";

In app.js, add Prompt to the hooks:

let liveSocket = new LiveSocket("/live", Socket, {
  params: { _csrf_token: csrfToken },
  hooks: {
    Prompt,
    // existing hooks ...
  },
});

usage-in-liveview-pages

Usage in LiveView pages

To use components, use module PrimerLive:

defmodule MyAppWeb.MyLiveView do
  use MyAppWeb, :live_view
  use PrimerLive

  def render(assigns) do
    ~H"""
    <.button>Click me</.button>
    """
  end

end

usage-in-regular-views

Usage in regular views

In view files, for example in page_view.ex, use module PrimerLive:

defmodule MyAppWeb.PageView do
  use MyAppWeb, :view
  use PrimerLive
end

Then call the component on a page, for example in templates/page/index.html.heex:

<.button>Click me</.button>

list-of-components

List of components

PrimerLive.Component