[DLS-606] feat(storybook): add stories for Table, DataTable, Dialog and ListItem#655
Open
[DLS-606] feat(storybook): add stories for Table, DataTable, Dialog and ListItem#655
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
desirendr
force-pushed
the
DLS-606-storybook-table-actionbar-select-trigger
branch
from
68098c4 to
677d826
Compare
zel-kass
reviewed
Apr 23, 2026
desirendr
force-pushed
the
DLS-606-storybook-table-actionbar-select-trigger
branch
from
3f0898f to
ab903c9
Compare
desirendr
force-pushed
the
DLS-606-storybook-table-actionbar-select-trigger
branch
from
ab903c9 to
ac1a394
Compare
gamegee
reviewed
Apr 28, 2026
gamegee
reviewed
Apr 28, 2026
gamegee
reviewed
Apr 28, 2026
gamegee
reviewed
Apr 28, 2026
gamegee
reviewed
Apr 28, 2026
gamegee
reviewed
Apr 28, 2026
gamegee
reviewed
Apr 28, 2026
Contributor
There was a problem hiding this comment.
Pull request overview
Adds new Storybook examples to document richer usage patterns for core UI components (Table/DataTable filtering & action bars, Dialog “muted” info state, and ListItem leading icon patterns) within libs/ui-react.
Changes:
- Add Table stories demonstrating an action bar with a Select using a
MediaButtontrigger, plusTableCellContentleading-content icon patterns (CryptoIcon/MediaImage). - Add multiple DataTable stories showcasing client-side and server-side filtering patterns (TanStack
columnFilters,manualFiltering, and combined filters). - Extend Dialog stories with a “Muted” info-state variant using the
bg-gradient-mutedoverlay. - Add a ListItem story demonstrating network vs media icon leading patterns.
Reviewed changes
Copilot reviewed 4 out of 4 changed files in this pull request and generated 6 comments.
| File | Description |
|---|---|
| libs/ui-react/src/lib/Components/Table/Table.stories.tsx | Adds new Table stories for action bar + Select trigger and leading icon patterns. |
| libs/ui-react/src/lib/Components/DataTable/DataTable.stories.tsx | Adds new DataTable filtering stories (client-side, server-side, multiple filters) using Select triggers. |
| libs/ui-react/src/lib/Components/Dialog/Dialog.stories.tsx | Adds “Muted” info-state dialog variant with gradient overlay + docs snippet. |
| libs/ui-react/src/lib/Components/ListItem/ListItem.stories.tsx | Adds ListItem story demonstrating CryptoIcon vs MediaImage leading patterns. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
desirendr
force-pushed
the
DLS-606-storybook-table-actionbar-select-trigger
branch
from
ac1a394 to
3be226a
Compare
Contributor
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 4 out of 4 changed files in this pull request and generated 3 comments.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comment on lines
+388
to
+404
| <ListItem density='expanded' onClick={() => {}}> | ||
| <ListItemLeading> | ||
| <CryptoIcon ledgerId='bitcoin' ticker='BTC' size='48px' /> | ||
| <ListItemContent> | ||
| <ListItemTitle>Bitcoin</ListItemTitle> | ||
| <ListItemDescription>BTC · Layer 1</ListItemDescription> | ||
| </ListItemContent> | ||
| </ListItemLeading> | ||
| <ListItemTrailing> | ||
| <ListItemContent> | ||
| <ListItemTitle>$43,250.00</ListItemTitle> | ||
| <ListItemDescription className='text-success'> | ||
| +2.5% | ||
| </ListItemDescription> | ||
| </ListItemContent> | ||
| </ListItemTrailing> | ||
| </ListItem> |
Collaborator
There was a problem hiding this comment.
Not sure this is what was requested in the ticket, it might have not been clear but the exemple we needed to add is a list item with a description that has a crypto icon .
And I see that we already have it
so you can remove these two added exemples
gamegee
reviewed
Apr 30, 2026
Comment on lines
+877
to
+882
| /** | ||
| * Client-side column filtering powered by TanStack's built-in `columnFilters` state | ||
| * and `getFilteredRowModel`. The Select updates `columnFilters` via | ||
| * `onColumnFiltersChange`; TanStack handles matching rows automatically. | ||
| * Combine with `DataTableGlobalSearchInput` for full-text + column filtering. | ||
| */ |
|
|
||
| <Dialog> | ||
| <DialogTrigger asChild> | ||
| <Button appearance='base'>Muted</Button> |
Collaborator
There was a problem hiding this comment.
this sadly looks broken :/
gamegee
reviewed
Apr 30, 2026
Comment on lines
+966
to
+972
| /** | ||
| * Server-side filtering with `manualFiltering: true`. Filter state is owned by | ||
| * the component and synced to the backend via `onColumnFiltersChange` and | ||
| * `onGlobalFilterChange`. In this demo the "API call" is simulated locally, but | ||
| * the pattern is identical to a real fetch: change a filter → callback fires → | ||
| * you refetch with the new params → pass fresh data back as `data`. | ||
| */ |
| <DialogHeader density='compact' className='relative' /> | ||
| <DialogBody> | ||
| <div className='flex flex-col items-center gap-24 overflow-hidden'> | ||
| <div className='relative flex flex-col items-center gap-24 overflow-hidden'> |
Collaborator
There was a problem hiding this comment.
revert this it broke the story
| <DialogHeader density='compact' className='relative' /> | ||
| <DialogBody> | ||
| <div className='flex flex-col items-center gap-24 overflow-hidden'> | ||
| <div className='relative flex flex-col items-center gap-24 overflow-hidden'> |
Collaborator
There was a problem hiding this comment.
Suggested change
| <div className='relative flex flex-col items-center gap-24 overflow-hidden'> | |
| <div className='flex flex-col items-center gap-24 overflow-hidden'> |
gamegee
reviewed
Apr 30, 2026
Collaborator
gamegee
left a comment
gamegee
left a comment
There was a problem hiding this comment.
You should define a width to the SelectContent otherwise it will crop the content
- DataTable: add WithClientSideColumnFilter (tanstack columnFilters API), WithServerSideFilters (manualFiltering with simulated backend), and WithMultipleFilters (global search + two simultaneous column selects) - Dialog: add WithGradientMuted story (bg-gradient-muted overlay pattern) - ListItem: add WithNetworkAndMediaIcon story (CryptoIcon + MediaImage as primary leading elements) - Table: add WithNetworkAndMediaIcon story (CryptoIcon + MediaImage in TableCellContent leadingContent) Made-with: Cursor
- DataTable/Table WithActionBarAndSelectTrigger: wrap filteredData in useMemo to prevent infinite re-render loop (new array reference on every render was causing TanStack to reprocess and re-render in a loop) - Dialog: merge WithGradientMuted into InfoStateVariants alongside the existing error/success variants instead of a separate story Made-with: Cursor
Made-with: Cursor
- DataTable: remove WithActionBarAndSelectTrigger (filters already documented) - DataTable: rename WithMultipleFilters → WithClientSideFilters, drop JSDoc - Table: remove JSDoc comment above WithNetworkAndMediaIcon - ListItem: remove WithNetworkAndMediaIcon story; move CryptoIcon examples (BTC/ETH) into CompositionShowcase; remove MediaImage items per review Made-with: Cursor
…log gradient - Add '__all__' sentinel to Select items in Table and DataTable stories so selecting "All categories" / "All performance" is an explicit item rather than relying on clearing state; updates value binding and onValueChange accordingly across WithActionBarAndSelectTrigger, WithClientSideColumnFilter, WithServerSideFilters, and WithClientSideFilters - Add `relative` positioning to the gradient-overlay wrapper div in all six Dialog info-state stories (InfoStateVariants + standalone error/success/muted) so the absolute overlay is contained within its sibling block Made-with: Cursor
- Dialog: revert 'relative' from info-state gradient wrappers (aammami-ledger) - DataTable: remove JSDoc comments above new filter stories (gamegee) - DataTable: remove redundant WithClientSideFilters story (gamegee) - Table/DataTable: add w-208 to SelectContent to prevent content cropping (gamegee) Co-authored-by: Cursor <cursoragent@cursor.com>
desirendr
force-pushed
the
DLS-606-storybook-table-actionbar-select-trigger
branch
from
fa0c41c to
c9e9a35
Compare
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Closes DLS-606.
Changes
DataTable
Table
Dialog
ListItem