The Chelekom library is fully powered by the Igniter project, providing a zero-configuration experience. With its helper tools for Elixir mix tasks, it enables developers to easily create a suitable generator for building components in minimal time.

Providing a seamless developer environment, removing dependencies, and reducing configuration to zero are among the strengths of the Chelekom project, which was our primary goal from the start. Many of us know that backend developers often prefer not to get involved in frontend work. Therefore, the Mishka team aimed to create a structure that meets developer needs in the shortest possible time.

Unified Naming and Customizable Properties

At the beginning of the project, we aimed to unify the naming conventions and properties of all components within a consistent design system, enabling developers to customize parts of each component during creation.

Customizing Components

You can customize each component with the following options:

* --variant or -v - Specifies component variant

* --color or -c - Specifies component color

* --size or -s - Specifies component size

* --padding or -p - Specifies component padding

* --space or -sp - Specifies component space

* --type or -t - Specifies component type

* --rounded or -r - Specifies component type

* --no-sub-config - Creates dependent components with default settings

* --module or -m - Specifies a custom name for the component module

* --sub - Specifies this task is a sub task

* --no-deps - Specifies this task is created without sub task

* --yes - Makes directly without questions

For example, the alert component can be generated with a specific type and color, ensuring no extra code is added to your project. This helps reduce the volume of Tailwind CSS classes, which is especially beneficial when building complex components. Consider a simple example: a poorly optimized loop in a carousel component could result in an 800KB payload being sent from the server for a single component. Imagine a dashboard with multiple options, including 4 paginations and several forms on the same page. Based on Mishka's experience, you could be sending several megabytes of payload to the client, so controlling the component creation layer with a top-down approach helps ensure efficient project structure.

mix mishka.ui.gen.component alert
mix mishka.ui.gen.component button --size large -c primary

Batch Creation of Components

The Mishka library effectively replaces Phoenix's core components. You can generate all components at once with the --import option, creating a file that imports all components, which can then be used throughout your project, particularly in the YourProjectWeb file, making the components accessible across your entire application.

mix mishka.ui.gen.components
mix mishka.ui.gen.components alert,divider,footer
mix mishka.ui.gen.components --import --yes

Future Plans for Mix Task Enhancements

The good news is that we have special plans for enhancing the mix task structure of this project, which will be implemented in future versions.

Note on Custom Options for Components

Each component comes with customizable options, allowing you to execute more dynamic commands based on your needs.

Using Chelekom for Improved Performance

The Chelekom library, with its roots in the Igniter project, was designed to create components with a minimal configuration environment. By providing helper functions for Elixir's mix task, Chelekom allows developers to easily generate highly optimized components in a short time frame.

Our goal from the start has been to streamline the development environment, eliminate unnecessary dependencies, and reduce configuration overhead to zero. Backend developers, who typically prefer not to get involved with frontend tasks, will find this particularly useful. The Mishka team has focused on providing a solution that meets the developer's needs with minimal effort.

Component Generation Commands

With Mishka replacing Phoenix's default core components, you can generate all the components at once using the --import option. This allows you to create an import file that includes all components, which you can use wherever needed, particularly within the YourProjectWeb file, ensuring that components are accessible throughout your entire application.

mix mishka.ui.gen.components
mix mishka.ui.gen.components alert,divider,footer
mix mishka.ui.gen.components --import --yes

What's Next for Chelekom?

We are excited to share that there are special plans for improving the mix task structure of Chelekom in upcoming versions. These future enhancements will make it even easier to work with the library and build robust, efficient applications.

Installation and Usage Video

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