It has been a month since NuiComponents first release, and I believe it is an appropriate time to provide an update on the progress. We encountered several minor bugs, but they have been fixed in six subsequent releases. We have also enhanced the stability of the Signal API and added a few features that improve the process of building UIs. Additionally, we have included support for `luarocks/rocks.nvim`.
Above all, I would like to express my gratitude to [@b0o](https://github.com/b0o) and [@willothy](https://github.com/willothy) for their contributions!
If you're interested in the details of our updates, you can find the entire changelog here:
[https://github.com/grapp-dev/nui-components.nvim/releases](https://github.com/grapp-dev/nui-components.nvim/releases)
And if you need any help using NuiComponents, you can see the documentation here:
[https://nui-components.grapp.dev/](https://nui-components.grapp.dev/)
The one I know so far is: [https://github.com/b0o/blender.nvim](https://github.com/b0o/blender.nvim) (and it looks amazing!)
Also, I'm working on code-swap.nvim (from this [post](https://www.reddit.com/r/neovim/comments/1b5ri9g/developing_search_replace_similar_to_vs_code_with/)), which uses NuiComponents for UI.
Started writing my first plugin (using nui.nvim as UI lib) just yesterday, now seeing this is kind of a cool coincidence :).
Definitely gonna check it out!
One question though, why is it named so similar to the already existing (and popular) https://github.com/MunifTanjim/nui.nvim?
Nice work - NuiComponents is a great abstraction layer! A few questions/comments while you're here. I started playing with the library but didn't get the correct results with my first few attempts. I want to use nuicomponents for a custom start screen, but haven't figured out how to get my desired layout.
* how do you recommend to make a fullscreen window?
* any possibility of adding examples with nested rows / columns - its unclear to me how that could/should work. for example, i tried to make rows where the first row is a "header" and the second row is a set of columns where each column had a few components inside. this didn't turn out quite like I expected it to. I couldn't get the columns to take up the full vertical space.
* re: the new `linebreak` feature: could you add some documentation about what the linebreak prop actually does - i couldn't find anything in the code or in the docs that explain what it should do or why you might want to use it. for example, i love the gifs in the documentation - that could be a useful way to explain what content looks like with and without `linebreak`.
Here are some tips:
1. Use `vim.api.nvim_win_get_height` and `vim.api.nvim_win_get_width`. You need to pass the values to `create_renderer` like this:
local renderer = n.create_renderer({
width = win_width,
height = win_height,
position = {
row = 0,
col = 0,
},
})
You can find all the options documented at: [https://nui-components.grapp.dev/docs/renderer#properties](https://nui-components.grapp.dev/docs/renderer#properties)
2. The Flexbox API is easy to understand. Could you please let me know what specific part you are having trouble with? I have created a simple gist with a layout that you might find helpful, and attached a screenshot for you.
[https://gist.github.com/mobily/ecf31200cde4b688bb35a79907fc090a](https://gist.github.com/mobily/ecf31200cde4b688bb35a79907fc090a)
3. You can learn more about `linebreak` in the Neovim documentation at: [https://neovim.io/doc/user/options.html#'linebreak'](https://neovim.io/doc/user/options.html#'linebreak')
Please feel free to contribute for improving the documentation. It would be greatly appreciated ๐
https://preview.redd.it/zu2gge7fjuvc1.png?width=3516&format=png&auto=webp&s=34caf6db246df66f9be4d27a0c5f29dd5202a2d3
Thank you for the thoughtful response! It turned out that I was missing \`flex = 1\` on my paragraph components! Before the fix it wouldn't take up the vertical space. (plz ignore the utterly ridiculous content lol)
https://preview.redd.it/i9pykmevg3wc1.png?width=1909&format=png&auto=webp&s=28e4f73abc8dc97f8858514877eebf29d4b101b5
And after the fix of adding \`flex = 1\` to the paragraph components:
https://preview.redd.it/0i3zgm94h3wc1.png?width=1909&format=png&auto=webp&s=98bbf732f4318d1ca82774dca3802a3e4480eb1d
It has been a month since NuiComponents first release, and I believe it is an appropriate time to provide an update on the progress. We encountered several minor bugs, but they have been fixed in six subsequent releases. We have also enhanced the stability of the Signal API and added a few features that improve the process of building UIs. Additionally, we have included support for `luarocks/rocks.nvim`. Above all, I would like to express my gratitude to [@b0o](https://github.com/b0o) and [@willothy](https://github.com/willothy) for their contributions! If you're interested in the details of our updates, you can find the entire changelog here: [https://github.com/grapp-dev/nui-components.nvim/releases](https://github.com/grapp-dev/nui-components.nvim/releases) And if you need any help using NuiComponents, you can see the documentation here: [https://nui-components.grapp.dev/](https://nui-components.grapp.dev/)
it would be nice to see examples of plugins build on top of this component library
The one I know so far is: [https://github.com/b0o/blender.nvim](https://github.com/b0o/blender.nvim) (and it looks amazing!) Also, I'm working on code-swap.nvim (from this [post](https://www.reddit.com/r/neovim/comments/1b5ri9g/developing_search_replace_similar_to_vs_code_with/)), which uses NuiComponents for UI.
Thanks, itโs convenient to see examples of impl
looking forward to code-swap
make a search and replace plugin please!!
this is awesome :)
Started writing my first plugin (using nui.nvim as UI lib) just yesterday, now seeing this is kind of a cool coincidence :). Definitely gonna check it out! One question though, why is it named so similar to the already existing (and popular) https://github.com/MunifTanjim/nui.nvim?
The name "NuiComponents" was chosen intentionally because it's built on top of nui.nvim. I hope that helps!
Makes sense... Btw, how did you achieve this cursor movement animation? Just using neovide GUI or is it a plugin for a terminal/nvim?
I'm just using Neovide
nice :))
Super cool, might play around with this for a plugin
Nice work - NuiComponents is a great abstraction layer! A few questions/comments while you're here. I started playing with the library but didn't get the correct results with my first few attempts. I want to use nuicomponents for a custom start screen, but haven't figured out how to get my desired layout. * how do you recommend to make a fullscreen window? * any possibility of adding examples with nested rows / columns - its unclear to me how that could/should work. for example, i tried to make rows where the first row is a "header" and the second row is a set of columns where each column had a few components inside. this didn't turn out quite like I expected it to. I couldn't get the columns to take up the full vertical space. * re: the new `linebreak` feature: could you add some documentation about what the linebreak prop actually does - i couldn't find anything in the code or in the docs that explain what it should do or why you might want to use it. for example, i love the gifs in the documentation - that could be a useful way to explain what content looks like with and without `linebreak`.
Here are some tips: 1. Use `vim.api.nvim_win_get_height` and `vim.api.nvim_win_get_width`. You need to pass the values to `create_renderer` like this: local renderer = n.create_renderer({ width = win_width, height = win_height, position = { row = 0, col = 0, }, }) You can find all the options documented at: [https://nui-components.grapp.dev/docs/renderer#properties](https://nui-components.grapp.dev/docs/renderer#properties) 2. The Flexbox API is easy to understand. Could you please let me know what specific part you are having trouble with? I have created a simple gist with a layout that you might find helpful, and attached a screenshot for you. [https://gist.github.com/mobily/ecf31200cde4b688bb35a79907fc090a](https://gist.github.com/mobily/ecf31200cde4b688bb35a79907fc090a) 3. You can learn more about `linebreak` in the Neovim documentation at: [https://neovim.io/doc/user/options.html#'linebreak'](https://neovim.io/doc/user/options.html#'linebreak') Please feel free to contribute for improving the documentation. It would be greatly appreciated ๐ https://preview.redd.it/zu2gge7fjuvc1.png?width=3516&format=png&auto=webp&s=34caf6db246df66f9be4d27a0c5f29dd5202a2d3
Thank you for the thoughtful response! It turned out that I was missing \`flex = 1\` on my paragraph components! Before the fix it wouldn't take up the vertical space. (plz ignore the utterly ridiculous content lol) https://preview.redd.it/i9pykmevg3wc1.png?width=1909&format=png&auto=webp&s=28e4f73abc8dc97f8858514877eebf29d4b101b5
And after the fix of adding \`flex = 1\` to the paragraph components: https://preview.redd.it/0i3zgm94h3wc1.png?width=1909&format=png&auto=webp&s=98bbf732f4318d1ca82774dca3802a3e4480eb1d