8000 [ui-lib] Switching to a custom ui lib and get rid of naive-ui · Issue #400 · CorentinTh/it-tools · GitHub
[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
9 of 20 tasks
CorentinTh opened this issue May 14, 2023 · 1 comment
Open
9 of 20 tasks

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

CorentinTh opened this issue May 14, 2023 · 1 comment

Comments

@CorentinTh
Copy link
Owner
CorentinTh commented May 14, 2023 •
edited
Loading

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
  • Card
    • create the component src/ui/c-card
    • replace all the naive-ui card
  • Input text
  • Input group
    • create the component
    • replace all the naive-ui input group
  • Space
    • Replace all the n-space by a div and unocss directives (ex: <n-space justify="center"> -> <div flex justify-center>)
  • Text
    • 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
    • Tooltips
    • Icons
    • n-p and n-text
    • n-h
  • ...
    I plan to update this issue with the progress of the task.
@CorentinTh CorentinTh mentioned this issue May 14, 2023
Merged
@CorentinTh CorentinTh changed the title [ui-lib] Switching to a custom ui lib follow up issue [ui-lib] Switching to a custom ui lib May 14, 2023
@CorentinTh CorentinTh changed the title [ui-lib] Switching to a custom ui lib [ui-lib] Switching to a custom ui lib and get rid of naive-ui May 14, 2023
@CorentinTh CorentinTh mentioned this issue May 27, 2023
Merged
This was referenced Jun 19, 2023
Open
Merged
Merged
@CorentinTh CorentinTh mentioned this issue Aug 7, 2023
Merged
@CorentinTh CorentinTh mentioned this issue Sep 4, 2023
Merged
This was referenced Oct 14, 2023
Open
Merged
Merged
@adarsh4d
Copy link
adarsh4d commented Jul 4, 2024

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...

image

A few other tool sections:
image
image
image

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@CorentinTh @adarsh4d
0