Mishka Chelekom - Phoenix and LiveView UI kit and components

[shahryarjb]

Hey dear friends! We’ve implemented basic accessibility across all our components!
You can now access it in version 0.0.5-alpha.12. Plus, we’ve squashed a lot of bugs!

Please help us to test before releasing!

First install/update

{:mishka_chelekom, "~> 0.0.5-alpha.12", only: :dev}

After that run

mix mishka.ui.gen.components --import --helpers --global

[shahryarjb]

Hey Elixir friends, This is a Huge Update !!

Excited to announce Mishka Chelekom v0.0.5 is out! 5 new components, improved custom classes support, and accessibility across all components.

Support the project please

Blog post

Introducing Mishka Chelekom v0.0.5 - Now with Accessibility Support

First install/update

{:mishka_chelekom, "~> 0.0.5", only: :dev}

After that run

mix mishka.ui.gen.components --import --helpers --global

[shahryarjb]

Next version of Mishka Chelekom with support for dynamic design system (including daisyUI) will start from next week and this version might take a bit longer. We’re trying to convert all the currently hard-coded sections into Tailwind configs and CSS variables!

[DaAnalyst]

Not sure if anyone asked this before, but is there also a standard way (i.e. a dependency “hassle” based one) to use the components (instead of letting the installer do it automatically)?

Thanks

[shahryarjb]

Hello dear friend. I’m not entirely sure I understand your question. If my explanation doesn’t fully address your issue, please provide more details or an example.

Generally, there are several ways to install components, as mentioned in our documentation:

Install each component separately:

mix mishka.ui.gen.component alert

Limiting a specific component, for example:

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 install all components with helpers macro (easy import):

mix mishka.ui.gen.components --import --yes
# Or you want to install helpers too
mix mishka.ui.gen.components --import --helpers --yes

If you want the CLI to do everything for you without needing anything else, simply run:

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

This will even handle the replacement process with Phoenix components for you. The last method, installation with a single command, is my personal recommendation if you want to use all of our components.

Thank you in advance

Ref:

Document - Chelekom Phoenix UIKit and components

[DaAnalyst]

What I am asking is whether there’s a way to use the components without running the generators, i.e. simply add a certain dependency or dependencies to the web app in the project?

Thanks

[shahryarjb]

I’m sorry, I just realized. For now unfortunately No,
Our entire approach is based on CLI so that you can install whatever you need and easily customize it.
I think this is one of the features of this library makes it specific.

The quick and easy way is for you to create a project, put all the components in it, and install it. This is a temporary solution.

I will try to add an installable package to the project in future versions so that you won’t need the CLI.
I think this will be added in a few more versions.

Thank you.

[shahryarjb]

A first draft of mix assets has been added to the Mishka Chelekom project using igniter and the bun library in elixir— our first step toward bigger components like an editor.

Try out version 0.0.6-alpha.2 and use:

{:mishka_chelekom, "~> 0.0.6-alpha.2", only: :dev}

Example

# install
mix mishka.assets.deps axios 
mix mishka.assets.deps axios,lodash

# uninstall
mix mishka.assets.deps axios --remove
mix mishka.assets.deps axios,lodash --remove

If you have any of npm, yarn, or bun installed, the system will automatically use the first available one in that order—unless you specify otherwise. To choose a specific package manager, use an option like:

mix mishka.assets.deps axios --npm --yes

Note: You must also specify the package manager when removing a dependency.

If none of the three are available, bun will be used by default, and its binary will be placed in your build folder.

Road to add bigger components

[shahryarjb]

Mishka Chelekom just passed 10K downloads — and it’s only used in dev, not in prod! Hope elixir community support us more .
The next release will be our biggest yet, packed with optimizations.
It’ll take time, but it’s worth the wait.

[shahryarjb]

Hi my friends, it is not out long term update for Mishka Chelekom but this version fixes Phoenix 1.8 errors.

Download mishka_chelekom | Hex

We still working on our next version that will be our biggest one

{:mishka_chelekom, "~> 0.0.7", only: :dev}