PrimerLive (PrimerLive v0.1.2)
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
versioning
Versioning
Included dependencies:
- primer-live:
0.1.11
- Includes:
- @primer/css:
20.5.1
- dialogic-js:
0.2.8
- @primer/css:
- Includes:
Included libraries:
- Octicons:
17.9.0
installation
Installation
install-dependencies
Install dependencies
- Edit
mix.exs
and add dependencyprimer_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>