Migrate from DaisyUI to Shadcn-vue

[tonyaellie]

Migrate from DaisyUI to ShadCN

Description

We are currently using an outdated version of DaisyUI (v2). Instead of updating, I propose switching to ShadCN for better customizability, maintainability, and design consistency.

Reasons for Migration

• We are still on DaisyUI v2, which is significantly outdated. Updating would require substantial changes, so switching to an alternative is worth considering.
• ShadCN provides greater flexibility in styling, making it easier to maintain and customize components.
• The overall design and developer experience of ShadCN are preferable in terms of consistency and usability (subjective opinion, but worth noting).

Challenges & Considerations

• ShadCN is generally more verbose and does not abstract things as much as DaisyUI.
• Developers are already familiar with DaisyUI, so onboarding to ShadCN may take some time.
• DaisyUI themes are not directly compatible with ShadCN, so a solution needs to be found to ensure users can continue using their existing themes.

Migration Strategy

Since the codebase is relatively large, switching everything in a single pull request would be impractical and could conflict with other UI-related changes. To mitigate this, both DaisyUI and ShadCN will be used simultaneously for a transition period.

Migration Steps

• Install ShadCN (Begin switching from daisyui to shadcnui #492)
• Get the testing page (layout-only, no content) working without DaisyUI (except for colors). (Switch layouts to use shadcn #507)
• Convert each page to use ShadCN, replacing DaisyUI components:
  • General Pages
    • home/index.vue
    • profile.vue
    • tools.vue
    • reports/label-generator.vue
  • Item Pages
    • item.vue
    • item/new.vue
    • item/[id].vue
    • item/[id]/edit.vue
    • item/[id]/maintenance.vue
  • Location Pages
    • location.vue
    • location/[id].vue
  • Label Pages
    • label.vue
    • label/[id].vue
• Sort out themes and color compatibility.
• Remove DaisyUI once everything has been migrated.
• Sort inconsistencies with icons and import paths.

This staged approach will allow for a smoother transition while minimizing conflicts with ongoing development.

Would love to hear any thoughts or suggestions on this plan! 🚀

[Artiom97es]

sorry i dont understand about this things, but its not easier to update to latest daisyUI?

[tankerkiller125]

@Artiom97es the differences between DaisyUI v2 and v5 (which is getting released very soon), are so significantly different we basically have to do a UI rewrite anyway.

Simply updating to v5 results in the following: