Installation

Set up Fluxon in your project.

Prerequisites

Before installing Fluxon, ensure you have the following prerequisites:

Setting up your project

1. Add the Hex Repository

   Fluxon is available as a Hex package. Follow these steps to integrate it into your Phoenix project:

   1. Obtain the FLUXON_KEY_FINGERPRINT and FLUXON_LICENSE_KEY from your account dashboard.

   2. Add the repository using the following command:

      sh terminal

      mix hex.repo add fluxon https://repo.fluxonui.com \
        --fetch-public-key $FLUXON_KEY_FINGERPRINT \
        --auth-key $FLUXON_LICENSE_KEY
      

2. Install Fluxon

   Once the repository is added, add Fluxon to your project dependencies:

   ex mix.exs

   {:fluxon, "~> 1.0.10", repo: :fluxon}
   

   Run mix deps.get to install the package.

3. Configure Your Project

   Several files need to be updated to fully integrate Fluxon into your project:

   1. Update the lib/[app_name]_web.ex file to include the Fluxon module.

      ex [app_name]_web.ex

      defp html_helpers do
        quote do
          import Phoenix.HTML
      
          use Fluxon
      
          # ...
        end
      end
      

   2. Update assets/tailwind.config.js to allow TailwindCSS to process the Fluxon component classes.

      js tailwind.config.js

      module.exports = {
        content: [
          '../deps/fluxon/**/*.*ex',
          "./js/**/*.js",
          // ...
        ],
        // ...
      }
      

   3. Update the assets/js/app.js file to include the Fluxon hooks and the onBeforeElUpdated function.

      js app.js

      import 'phoenix_html';
      import { Socket } from 'phoenix';
      import { LiveSocket } from 'phoenix_live_view';
      import { Hooks as FluxonHooks, DOM as FluxonDOM } from 'fluxon';
      
      let liveSocket = new LiveSocket("/live", Socket, {
        hooks: FluxonHooks,
        dom: { 
          onBeforeElUpdated(from, to) { 
            FluxonDOM.onBeforeElUpdated(from, to);
          },
        },
      });
      

Troubleshooting

If you encounter any issues during the installation process, please refer to the Troubleshooting section which contains a list of common issues and their solutions.

Conflicts with Phoenix's CoreComponents

Some Fluxon components share names with Phoenix's CoreComponents, which results in function definition conflicts.

If you're starting a brand new Phoenix project and plan to use only Fluxon components, you can remove the conflicting functions from the CoreComponents module:

def modal(assigns)
def button(assigns)
def input(assigns)
def label(assigns)
def error(assigns)
def table(assigns)

However, if you are already using CoreComponents in your project, you can import Fluxon while avoiding the components that would conflict:

defp html_helpers do
  quote do
    import Phoenix.HTML

    use Fluxon, avoid_conflicts: true

    # ...
  end
end

This configuration will prevent importing any Fluxon components that conflict with Phoenix's CoreComponents.

You can then access the specific components through the Fluxon.Components module, like this:

<Fluxon.Components.Input.input name="full_name" />
<Fluxon.Components.Button.button variant="solid">
  Click me
</Fluxon.Components.Button.button>