Mishka
Chelekom

Get Started

v0.0.10

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:

elixir
def deps do
  [
    {:mishka_chelekom, "~> 0.0.10", 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:

elixir
mix mishka.ui.gen.component alert
mix mishka.ui.gen.component alert --color info --variant default
# For Windows users please use `""` when you have more than
# one value for an argument
mix mishka.ui.gen.component alert --color "info,danger"

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

elixir
mix mishka.ui.gen.components

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

elixir
mix mishka.ui.gen.components --import --yes
# Or you want to install helpers too
mix mishka.ui.gen.components --import --helpers --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:

elixir
# use YourProjectWeb.Components.MishkaComponents
# lib/your_project_web.ex
defp html_helpers do
  quote do
    ...

    # Replace Phoenix core components with MishkaComponents
    use YourProjectWeb.Components.MishkaComponents

    # Shortcut for generating JS commands
    alias Phoenix.LiveView.JS

    # Routes generation with the ~p sigil
    unquote(verified_routes())
  end
end

Headless Components

Prefer to bring your own styling? You can generate headless components too - unstyled, accessible markup with full WAI-ARIA wiring, named slots, and behavior hooks, but no colors or sizes. See the headless CLI for every option.

elixir
mix mishka.ui.gen.headless dialog
mix mishka.ui.gen.headless.components

Mishka CMS installs the styled and the headless kits from its admin. See Install or upgrade a UI kit.

Mob Components

For a native app, you can generate Mob components too: the headless components rebuilt as native iOS and Android widgets for Mob, the framework that runs Elixir on the phone. Jetpack Compose and SwiftUI draw them, so there is no HTML, CSS or JavaScript. Run the commands in your Mob app, and write the components as tags in your screen's ~MOB markup. See the Mob components for each one, with screenshots and props.

bash
mix mishka.ui.gen.mob drawer
mix mishka.ui.gen.mob.components

One Command to install 🎉 🚀 🧨

After installing Mishka Chelekom in developer mode, you can simply run the following command. This command will generate all the components, add them to your project, and automatically import them, so no manual work is needed.

elixir
mix mishka.ui.gen.components --import --helpers --global --yes
# Or if you have Igniter in your project
# For more information: https://ash-hq.org/
mix igniter.new my_app --with phx.new --install mishka_chelekom

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, Erlang/OTP 27, Tailwind 4+, Phoenix 1.8+, and Phoenix LiveView 1.1+, guaranteeing that the library works seamlessly with the most recent versions of these essential tools.

Note on Custom Options for Components