After four months of trial and error in implementing and migrating all color schemes to CSS files, along with full support for Tailwind 4, we're excited to announce the release of Mishka Chelekom v0.0.8. Given the extensive updates across all components, we believe this is the largest update we've released for Phoenix and LiveView components to date.

It's worth noting that this version includes new CLIs for installing dependencies and defining custom configurations. Additionally, we've prioritized addressing new features and bugs reported by users on the project's GitHub repository.

As you know, the Mishka Chelekom project includes approximately 100 components and JsHooks for the Phoenix and Phoenix LiveView frameworks in Elixir, which adds everything you need to your project via CLI. Unfortunately, despite reaching version eight, we haven't yet received adequate financial support from users (currently receiving less than $55 per month 😔, which barely covers Mishka's website costs).

We hope the Elixir community will provide more support for this completely free and open-source project, which offers the most components compared to other libraries. This project needs your monthly financial support, even if it's just the price of a coffee per month.

If you work at a company with decision-making responsibilities and believe you could provide good funding or investment for this project, the Mishka team is always looking for such opportunities.

What's New in Mishka Chelekom v0.0.8:

(A detailed list of the new features follows...)

Support for Tailwind 4, Phoenix 1.8, and the Latest LiveView Version

Our biggest challenge in this version, which included approximately 21,000 lines of changes, was optimizing the entire library from the previous Tailwind version to version 4. As you know, this CSS utility framework has undergone significant changes that essentially deprecated much of our previous code, forcing us to identify and resolve these issues.

Thanks to Tailwind 4's new features, we decided to move all colors (in the first phase) to CSS files, which are built and added to your Phoenix project via CLI.

This feature was the most requested since version 0.0.1. Many users wanted to import their own color palettes into their projects, but in previous versions, this was unfortunately time-consuming and problematic as it required changes within the components.

Another issue was the Phoenix version change that caused our CLI to fail because the layout structure changed, and Phoenix's core components also underwent changes. With guidance from Steffen Deusch, one of Phoenix's main developers, these issues were resolved. We extend our thanks to him once again.

Addition of Phoenix and LiveView Collapse Component

In this version, we focused extensively on optimizing some Phoenix components at the infrastructure level to prevent numerous bugs and reduce heavy payloads. For this purpose, the Phoenix Collapse component was also added to the project. This component can be used independently in your project and includes a hook called collapsible, which has been utilized in components like menu and accordion.

For more information, please click here to learn about the Phoenix and LiveView Collapse component .

Addition of Basic Tests to Project CLIs

Since our testing process is somewhat different and the number of components is large with frequent changes, we fell behind on test writing. Therefore, in this version, we've added basic tests for the project's tools, which helped identify and resolve previously unknown bugs.

Addition of CLI for Installing npm Dependencies with npm/yarn/bun Support

We've always needed the ability to port larger projects into our components. This requires installing JavaScript packages, so in this version, you can experimentally install your JS packages using the following Mix command:

mix mishka.assets.deps lodash --mix-bun

Please refer to the documentation for more information.

Addition of CLI for Creating Custom Configuration to Override Colors and Other CSS Settings

As mentioned earlier, thanks to Tailwind 4's new features and extracting all colors (first phase) to CSS files, you can now override any color you need or all our settings. A good example is changing all colors to your organizational colors, which is easily activated by default in your project and created in the priv path after running the command.

The simplicity and practical features of this CLI help you revert a color to its previous version or change it to another color whenever needed. Everything is stored in Elixir format in a config.exs file in the mentioned path, and it's only for the development environment.

For more information, please refer to the documentation for the following command:

mix mishka.ui.css.config

Improvement of Community Version CLIs

As you know, in Mishka Chelekom version 0.0.4 , we added two new CLIs that help you easily create and transfer needed components as JSON between colleagues or different projects. These CLIs support GitHub repos, Gists, and direct domain links with or without custom headers, addressing most requirements. In this version, we've further optimized them and added basic tests.

We've also added several community version components to the mishka_chelekom_community repo, which you can use. For more information, please refer to the documentation for the following mix tasks:

mix mishka.ui.add mix mishka.ui.export

Improvement of Component Building CLI

After implementing the mix command for creating custom CSS settings and integrating it with the component building CLI, it's now possible to build all components based on the pattern you have in mind, for example, only specific colors you want or variants you use in your project.

Another optimization was the addition of the exclude option. This option is useful when you want to build all components but exclude certain ones. It's worth noting that if you don't want to use this option when running the command, you can place it in config.exs . Both methods work equally well.

It's worth mentioning that other areas have also seen good improvements, which you can read about in the documentation for each Mix Task .

Update of IgniterJs JavaScript Parser and Formatter

As you know, the Mishka Chelekom library creates all necessary CLIs for users with the help of the Igniter library. This library is developed and maintained by Zach Daniel and the Ash team. The Mishka team needed practical tools for JavaScript modifications in the CLI. With Zach's consultation, we added the IgniterJS library to the Ash team's repo, which is a NIF tool for modifying JavaScript AST and includes a very fast formatter. During these 4 months, significant improvements occurred in the libraries used, prompting us to update them.

It's worth noting that with Igniter's improvements in recent versions, the speed of creating all components with a single command has become remarkably fast. We thank Zach once again.

Re-optimization of Accordion and Removal of Native Accordion in the New Version

Among the widely used Phoenix components is the Phoenix Accordion component , which has resolved minor and major bugs across several versions but has always had certain issues that necessitated a complete rewrite. This time, instead of using Pure CSS, it includes a hook to both reduce heavy payloads and provide excellent features. In this version, you can observe the smoothness of all operations and the addition of server events.

The added server event feature helps you become fully aware when an accordion is opened or closed, allowing you to execute any operation you have in mind.

For more information, please click here to learn about the Phoenix and LiveView Accordion component .

Complete Review of All Components to Fix Typos and Resolve Issues and Bugs

We spent about a week reviewing the entire project to fix typos and missing items, preventing a large volume of potential future problems. We're very grateful to those who helped us in this area.

During these 4 months, bugs were reported and features were suggested, and we tried to cover a good portion of them.

For example, in the Phoenix Dropdown component , you now have server-side update lifecycle support, which required improving the FloatingJS hook, now available in this version.

Complete Review for Ash Generator

We noticed that some conflicts were causing problems for users of the Ash generator. Therefore, we updated all dependencies to the latest versions and retested with the latest Phoenix version. You can now use it again.

Future Roadmap:

Since we've tried to stabilize all components in the last three versions to reach version 0.1.0 as soon as possible, we think we'll continue this path, focusing on optimization and solving user problems. After that, we won't see any obstacles to adding new components. Our commitment to the first 100 components is well on track.

Custom Support and Services

We understand that some companies and clients may have specific needs that either fall outside our current roadmap or require faster implementation. To address this, we've introduced a custom support and services section.

Through this service, you can:

• Request exclusive components tailored to your requirements
• Have your design systems and UI designs fully implemented using our component architecture
• Receive CLI-ready solutions designed specifically for your projects

For more details, feel free to explore our custom services section.

Final Words

We thank everyone who has provided financial support and participated in testing this project over the past months. Without them, we would have faced a much more difficult path. The Mishka Chelekom project is very young, and despite having many components, it needs the Elixir community's collaboration.

This includes:

• Talking about and creating content for social media
• Contributing to problem-solving and adding new components
• Minimal support worth a cup of coffee per month and subscribing to the project's GitHub sponsor section
• Creating videos and demos of this library in English on YouTube

And anything else you think would help the project.

Special thanks to our financial supporters in recent months ♥️

@SteffenDE | @axelson | @Dak425 | @snewcomer | @aldrin-ronco | @dev-guy | @maxmannen | @lamaarmy84 | @alisinabh | @zachdaniel | @damir | @anibal | @srinivasganti | @minidfx | @pcharbon70 | @RicoMoorman | @chazwatkins | @codylandry

Thank you, Mishka Team