Moon liveview storybook Moon Liveview Storybook

Installation

If you are already using Moon DS v2, you can skip this installation guide, and follow the migration guide.

Installation guide for setting moon_live package up-and-running on your project.

Step 1: Add a dependency

Add a private moon_live package to mix.exs file: 

  defp deps do
    [
      {:moon_live, "~> 3.12", organization: "coingaming"},
    ]
  end

Step 2: Configure Tailwind

Ensure you have the latest Tailwind version installed in config.exs file: 

  config :tailwind,
    version: "3.4.17",

Step 3: Install dependencies

Ensure you are authenticated on hex under the coingaming organization. Install dependencies: 

  mix deps.get

Step 4: Add static plug

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

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

Step 5: Add MoonLive

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

  defp html_helpers do
    quote do
      use MoonLive
    end
  end

Step 6: Add MoonHooks

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

  import moonHooks from "../../deps/moon_live/assets/js/hooks/index";

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

Step 7: Update Tailwind configuration

Add moonBasePreset to tailwind.config.js file to extend the default Tailwind configuration. Additionally, update the content section to configure paths to MoonLive: 

  const moonBasePreset = require("../deps/moon_live/assets/js/moon-base-preset");

  module.exports = {
    content: [
      "../deps/moon_live/lib/**/*.*ex",
      "../deps/moon_live/assets/js/**/*.js",
    ],
    presets: [moonBasePreset],
  };

Step 8. Add theme CSS file

Add an import of a CSS theme to the app.css file to include all necessary CSS variables into your app. You may use moon-base.css as a starting point. Include also font imports to cover primary, secondary, and tertiary font families. To check exact names of the fonts, please review --text-font-family-primary , --text-font-family-secondary , and --text-font-family-tertiary variable values in the moon-base.css file. If you've got a Figma design with a variables file prepared by your designer, you would benefit of customization guide. 

  @import "tailwindcss/base";
  @import "tailwindcss/components";
  @import "tailwindcss/utilities";

  @import "../../deps/moon_live/assets/css/moon-base.css";

  @import url("https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap");
  @import url("https://fonts.googleapis.com/css2?family=DM+Mono:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&display=swap");
  @import url("https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&display=swap");

Step 9. 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">

Step 10. Happy coding!

Now you are ready to use MoonLive in your project. Enjoy! 

  mix phx.server