Packrat UI - Enhance Reusable Components - Utilize Tamagui

[andrew-bierman]

My vision is we will have a ui folder with all our styled components, that can be easily reused throughout our app. this will make it much easier if we ever need to ditch tamagui, as our app will be relying on our 'own' components.

These should be highly reusable.

We can pull a lot of tamagui components into our packrat-ui folder, and just add basic wrappers.

Also https://tamagui-extras.vercel.app/

Our UI is really not that complex, i do not see a reason why all our screens are not utilizing basic layout and card components for most of their UI.

Progress being made here: https://github.com/andrew-bierman/PackRat/pull/487

When complete:

• [ ] We should have a packrat-ui folder that has subdirectories with all the components needed to create our screens, using tamagui. These will mostly be wrapper components, but will enable our app to be much easier to update going forward.
• [ ] The components will enhance our design consistency, as we can now make styling updates to these reusables and cascade changes

We can make a checklist of components here to keep track (please add to this)

• [x] Modal
• [x] Tooltip
• [x] Button
• [x] Card
• [x] Input
• [x] SearchInput
• [ ] Layout (page wrapper)
• [ ] Image
• [ ] Banner
• [x] Header text
• [ ] Body text
• [ ] DataTable (see our items table, consider tanstack table, react native paper)
• [x] Box or Container
• [x] Form
• [ ] + Form Inputs/Select/Checkbox, etc
• [ ] ... TODO, add more

Additional info: This ticket is primarily to convert our reusable components (card, dropdown, modal etc) to tamagui, and add in some additional ones for things like page layouts and such. The goal of this ticket is to be able to have our own component wrappers we can use across all our screens, so that we do not need to duplicate as much code and our project will be easier to update in the future.

I'm less worried about changing ALL components to tamagui at this moment, but we should probably swap a few of the screens to use the new reusable components to demonstrate it is working properly.