[ui-lib] Switching to a custom ui lib and get rid of naive-ui

[CorentinTh]

I want to get ride of the naive-ui library and make a custom internal mini ui library. This issue is to track the progress of this task and give the reason why I want to do it.

Why ?

• naive-ui components are not customizable enough
• to make component that perfectly fit the needs of the project (like input level validation)
• increase the accessibility of the app and ease the tests (add labels, test ids)
• lighter components -> smaller bundle size
• have more control on the style of the components
• and the most important to me : make the app ssg, currently it's not possible because of some of the naive-ui library

How ?

The idea is to make a custom ui library in the src/ui folder, and use it in the app (the devx is really pleasing thanks to auto import and auto complete). A preview of the components can be found at localhost:3000/c-lib/c-button (only in dev mode, it's not deployed on the website or in the bundles).

So we need to replace all the naive-ui components by the custom ones. Naive-ui is used in the whole app, it's a big task and I don't want a big bang change, so we'll iterate until the dependency can be removed.

And as naive-ui components are prefixed by an n (like n-button), I will prefix the custom components by a c (like c-button).

Follow up

• Button
  • [x] create the component src/ui/c-button
  • [x] replace all the naive-ui button
• Card
  • [x] create the component src/ui/c-card
  • [x] replace all the naive-ui card
• Input text
  • [x] create the component src/ui/c-input-text
  • [x] replace all the naive-ui input text
• Input group
  • [ ] create the component
  • [ ] replace all the naive-ui input group
• Space
  • [x] Replace all the n-space by a div and unocss directives (ex: <n-space justify="center"> -> <div flex justify-center>)
• Text
  • [x] Replace all the n-text by a div and unocss directives
• Input number
  • [ ] create the component
  • [ ] replace all the naive-ui input number
• Switch
  • [ ] create the component
  • [ ] replace all the naive-ui switch
• Select
  • [ ] create the component
  • [ ] replace all the naive-ui select
• Typography
  • [x] Tooltips
  • [ ] Icons
  • [ ] n-p and n-text
  • [ ] n-h
• ... I plan to update this issue with the progress of the task.

[adarsh4d]

Would you be interested in standardizing the UI of all the tools?

Reason for the proposal

Given there are a large number of tools, the same functionality in different tools is implemented differently. For example,

• To copy the output there are two buttons, one on the input field and a separate button
• When paired with the refresh button, sometimes the copy button is on the right, sometimes on the left
• The option to change the output quantity is in different positions for each tool.

Design change

The following design tries to improve the overall usability of the app by separating the information into two sections,

1. The first section is to configure the input for the tool
2. The second section is where we get the output, it is where we can change the quantity, refresh, copy, etc...

A few other tool sections:

The side panel is updated to match the new design style, if it is not needed, can be ignored.

Figma prototype link: https://www.figma.com/proto/CY4DPc3p8kWGFwVjaAusl1/Untitled?page-id=0%3A1&node-id=21-2431&t=TIW1xDQp8uliCuJq-0&scaling=contain&content-scaling=responsive&starting-point-node-id=14%3A323&hide-ui=1

I am happy to contribute both in the design and development of components and organizing the layout. Please check here if you would like to see the components I built earlier https://koladesign.netlify.app. Happy to discuss if you have any questions.