feat(admin-ui): DataTable + Skeleton components

[leopuleo]

Changes

This PR introduces two new components and improves many others.

Skeleton

The Skeleton component displays the loading state throughout the admin app. It follows the shadcn/ui specifications and may be updated as we await the final designs.

The previous Skeleton component used the react-loading-skeleton package, now removed.

Table + DataTable

These two components are used to display data across multiple admin app views. The Table component provides the backbone components and is used internally by DataTable, which handles data and column definitions.

The DataTable component will receive improvements in the future, migrating it to a first-test architecture approach.

Other improvements

Checkbox
Integrating the Checkbox component within the DataTable revealed several enhancements:

• The label prop is no longer required, enhancing component alignment when not supplied.
• We are forcing the check icon size and color: while using it inside a DropdownMenu component, its size and color were slightly odd.
• Fixed the component display when the Checkbox is checked and indeterminate.

How Has This Been Tested?

Jest + Manual

[adrians5j]

First look over the PR, looks good. Was expecting it to be more complex initially hehe.

Besides the code review, here are just a couple of extra notes / questions.

1. Backlog - Resetting Sorters

Right now, the moment you click on a column, the sorter is applied. Cool.
If I click again on it, a reverse sorter is applied. Also cool.
Now, the third time I click, I would expect for the sorter to be dismissed. But what happens is the sorter again gets reversed.

This is most probably outside of the scope for this PR (it always worked like this), but I'd maybe still backlog this?

2. Backlog - Which Columns Are Sortable?

In the future, maybe we can see how to signal to the user which columns are sortable and which aren't. Just so the user does not need to hover over columns, and figure it out by just looking at the cursor. Maybe we check with Kreso?

3. Page Builder Issue

There's a bug here. If I open Page Builder (list of pages view), I get:

4. Backlog - Column Resizing UX

For me at least, the column resizing UX is good, but not the best.

It's fine when I resize the far left column, because the right ones just keep moving left/right as I'm doing it.

But when I resize a column in the middle, then, instead of just the right columns, the left columns also resize (shrink in their width).

Feels weird to me.

I believe you had a resizing-related chat with Kreso, and I saw he mentioned Notion. I tried column resizing in Notion, and for me that felt much better.

But yeah... the title of this point does mention "Backlog", so for now, I'd just backlog this and move on with higher P stuff.

[adrians5j]

Suggested change

	export { Resizer, ResizerProps };
	export { Resizer, type ResizerProps };

[adrians5j]

Did not go yet into details, but the first think I noticed is a solid amount of code in this file. Let's maybe extract some of the code (where possible) into separate files?