Moon Liveview Library

Getting Started

Website
Moon Design System Website
HEX
View package HEX
GitHub
View repository GitHub

Moon is a multi-layered, scalable, customizable, and adaptable Design System.

Moon Liveview represents the third layer of the Moon Design System. The package relies on Moon UI CSS classes, which compose the second layer of Moon Design System.

Moon Liveview provides simple composable functional components.

Prerequisites

Ensure you have the following prerequisites in place before proceeding with the installation:

Step 1: Add a dependency

Add a private moon_live_view package to mix.exs file: 

  defp deps do
    [
      {:moon_live_view, "~> 0.0.1"},
    ]
  end

Step 2: Install dependencies

  mix deps.get

Step 3: Add static plug

Add a static plug to endpoint.ex file to serve static moon icons: 

  plug Plug.Static,
      at: "/moon_live_view/",
      from: :moon_live_view,
      gzip: true

Step 4: Add MoonLiveView

Add MoonLiveView to html_helpers function to make the package available globally: 

  defp html_helpers do
    quote do
      use MoonLiveView
    end
  end

Step 5: Add MoonHooks

Add moonHooks to app.js file to enable MoonLiveView components' functionality: 

  import moonHooks from "../../deps/moon_live_view/assets/js/hooks/";

  let liveSocket = new LiveSocket("/live", Socket, {
    hooks: {
      ...
      ...moonHooks,
    },
  });

Step 6. Update root HTML file

Update HTML and BODY tags in root.html.heex file. Add dir attribute to the HTML tag to fully enable the LTR/RTL feature of Tailwind. Additionally, add a main theme class to the BODY tag to enable theme support in your app: 

  <html dir="ltr">
  <body class="light-theme">

Happy coding!