Chelekom Library: Zero-Configuration Components for Phoenix

The Chelekom library is fully zero-configuration, meaning you don't need to install anything other than the library itself, which is used only in the development environment. This project consists of various templates, which allow developers to add any required component to their Phoenix project using a mix task.

It is worth noting that these components can be configured with the necessary options provided by the user, allowing for a more lightweight project. For example, you can limit a component to only use a specific color.

You only add what you need to the project, and in the production environment, there will be no trace of the Chelekom library. Instead, all components will be placed in your Phoenix project's components path.

::: Installing the Chelekom Library :::

Step 1: Add Dependency to mix.exs

Open your Phoenix project's mix.exs file and add the following dependency to deps:

def deps do
  [
    {:mishka_chelekom, "~> 0.0.1", only: :dev}
  ]
end

Step 2: Using the Generator to Create Components

You can use the following command to generate a specific component, such as an alert, within your project directory:

mix mishka.ui.gen.component alert
mix mishka.ui.gen.component alert --color info --variant default

If you want to add all components at once to your components folder, use the following command:

mix mishka.ui.gen.components

If you need to generate all components along with an import file, you can do so as follows:

mix mishka.ui.gen.components --import --yes

Note that at this point, you no longer need the core component file of Phoenix.

You can simply replace it with the import file generated by the mix task in the lib/myproject_web.ex file.

For example, you can do it like this:

# use YourProjectWeb.Components.MishkaComponents
# lib/your_project_web.ex
def live_view do
  quote do
    use Phoenix.LiveView,
      layout: {YourProjectWeb.Layouts, :app}

      # Put your imported components here
      use YourProjectWeb.Components.MishkaComponents
    unquote(html_helpers())
  end
end

Prerequisites

Soon as they are released, so you can update your projects with ease and avoid potential issues.

This includes comprehensive testing with Elixir 1.17.2, Erlang/OTP 27, Tailwind 3.4.3, Phoenix 1.7.14, and Phoenix LiveView 1.0.0, guaranteeing that the library works seamlessly with the most recent versions of these essential tools.

Installation and Usage Video

You can watch the video on installing and using this project below:

Note on Custom Options for Components