Prima

prima (adj., Latin)

First; primary. – Used in alchemical texts denoting the original, undifferentiated substance from which all things are formed and upon which the alchemical work is based.

Prima is a Phoenix LiveView component library providing unstyled, accessible UI components. It's designed as a reusable library that developers can integrate into Phoenix applications and style according to their needs.

Installation

Add prima to your list of dependencies in mix.exs:

def deps do
  [
    {:prima, "~> 0.1.0"}
  ]
end

Include Prima's JavaScript hooks in your application:

// assets/js/app.js
import { PrimaHooks } from "prima"

let liveSocket = new LiveSocket("/live", Socket, {
  hooks: { ...PrimaHooks },
  // ... other options
})

Use components in your templates:

<Prima.Dropdown.dropdown id="demo-dropdown">
  <Prima.Dropdown.dropdown_trigger>
    Open Dropdown
  </Prima.Dropdown.dropdown_trigger>

  <Prima.Dropdown.dropdown_menu>
    <Prima.Dropdown.dropdown_item>Item 1</.dropdown_item>
    <Prima.Dropdown.dropdown_item>Item 2</.dropdown_item>
  </Prima.Dropdown.dropdown_menu>
</Prima.Dropdown.dropdown>

Development

This repository is structured with the library at the root and a demo application in the demo/ directory.

Library Development

# From root directory
mix deps.get           # Get library dependencies
mix compile            # Compile library
mix assets.build       # Build library JavaScript bundle
mix hex.build          # Build hex package

Running the Demo Application

# From demo/ directory
cd demo
mix setup              # Full setup (deps, assets setup, assets build)
mix phx.server         # Start development server

Visit http://localhost:4000 to see all components in action. The demo application automatically reloads when you make changes to library code.

Testing

# Library tests (from root)
mix test

# Demo/integration tests (from demo/)
cd demo
mix test               # Run all tests (includes ExUnit and Wallaby tests)

The test suite includes both unit tests and comprehensive browser-based integration tests using Wallaby to ensure all interactive behaviors work correctly.