feat: table component storybook #2600
There are no files selected for viewing
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
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
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
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
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,245 @@ | ||
| import { useEffect } from 'react' | ||
|
There was a problem hiding this comment. add story for generic info card |
||
| import { Meta, StoryObj } from '@storybook/react' | ||
| import { action } from '@storybook/addon-actions' | ||
| import { | ||
| Button, | ||
| ButtonComponentType, | ||
| ButtonStyleType, | ||
| ButtonVariantType, | ||
| ComponentSizeType, | ||
| FiltersTypeEnum, | ||
| PaginationEnum, | ||
| SearchBar, | ||
| SelectAllDialogStatus, | ||
| Table, | ||
| TableCellComponentProps, | ||
| TableProps, | ||
| TableViewWrapperProps, | ||
| TableSignalEnum, | ||
| } from '@devtron-labs/devtron-fe-common-lib' | ||
| import { ReactComponent as ICPlay } from '@Icons/ic-play-outline.svg' | ||
| import { ReactComponent as ICPause } from '@Icons/ic-pause.svg' | ||
| import { ReactComponent as ICWarning } from '@Icons/ic-warning-y6.svg' | ||
|
|
||
| const CellComponent = ({ field, value, signals, row, isRowActive }: TableCellComponentProps) => { | ||
| const handleButtonClick = () => { | ||
| action(`Row ${value} clicked`) | ||
| } | ||
|
|
||
| useEffect(() => { | ||
| const rowEnterPressedCallback = ({ | ||
| detail: { | ||
| activeRowData: { id }, | ||
| }, | ||
| }) => { | ||
| if (id === row.id && field === 'name') { | ||
| handleButtonClick() | ||
| } | ||
| } | ||
|
|
||
| const getCallback = | ||
| (text: string) => | ||
| ({ | ||
| detail: { | ||
| activeRowData: { id }, | ||
| }, | ||
| }) => { | ||
| if (id === row.id && field === 'name') { | ||
| action(text) | ||
| } | ||
| } | ||
|
|
||
| const deletePressedCallback = getCallback(`Delete pressed for ${value}`) | ||
| const openContextMenuCallback = getCallback(`Open context menu for ${value}`) | ||
|
|
||
| signals.addEventListener(TableSignalEnum.ENTER_PRESSED, rowEnterPressedCallback) | ||
| signals.addEventListener(TableSignalEnum.DELETE_PRESSED, deletePressedCallback) | ||
| signals.addEventListener(TableSignalEnum.OPEN_CONTEXT_MENU, openContextMenuCallback) | ||
|
|
||
| return () => { | ||
| signals.removeEventListener(TableSignalEnum.ENTER_PRESSED, rowEnterPressedCallback) | ||
| signals.removeEventListener(TableSignalEnum.DELETE_PRESSED, deletePressedCallback) | ||
| signals.removeEventListener(TableSignalEnum.OPEN_CONTEXT_MENU, openContextMenuCallback) | ||
| } | ||
| }, []) | ||
|
|
||
| if (field === 'name') { | ||
| return ( | ||
| <div className="flexbox dc__align-items-center"> | ||
| <Button | ||
| variant={ButtonVariantType.text} | ||
| text={value as string} | ||
| dataTestId={`${field}-${row.id}`} | ||
| style={isRowActive ? ButtonStyleType.default : ButtonStyleType.neutral} | ||
| onClick={handleButtonClick} | ||
| /> | ||
| </div> | ||
| ) | ||
| } | ||
|
|
||
| return ( | ||
| <div className="flexbox dc__gap-6 dc__align-items-center"> | ||
| <ICWarning className="dc__no-shrink icon-dim-18" /> | ||
|
|
||
| <span>{value}</span> | ||
| </div> | ||
| ) | ||
| } | ||
|
|
||
| const COLUMNS: TableProps['columns'] = [ | ||
| { | ||
| field: 'name', | ||
| size: { fixed: 300 }, | ||
| label: 'Name', | ||
| comparator: (a: string, b: string) => a.localeCompare(b), | ||
| isSortable: true, | ||
| CellComponent, | ||
| }, | ||
| { | ||
| field: 'value', | ||
| size: { | ||
| range: { | ||
| startWidth: 180, | ||
| minWidth: 100, | ||
| maxWidth: 600, | ||
| }, | ||
| }, | ||
| label: 'Value', | ||
| }, | ||
| { | ||
| field: 'message', | ||
| size: { | ||
| fixed: 200, | ||
| }, | ||
| label: 'Message', | ||
| CellComponent, | ||
| }, | ||
| ] | ||
|
|
||
| type RowDataType = { | ||
| name: string | ||
| value: string | ||
| message: string | ||
| } | ||
|
|
||
| const ROWS: TableProps['rows'] = [ | ||
| { id: '1', data: { name: 'Alice', value: '123', message: 'Something new' } }, | ||
| { id: '2', data: { name: 'Bob', value: '456', message: 'Another message' } }, | ||
| { id: '3', data: { name: 'Charlie', value: '789', message: 'Yet another one' } }, | ||
| { id: '4', data: { name: 'Diana', value: '101', message: 'Message here' } }, | ||
| { id: '5', data: { name: 'Eve', value: '202', message: 'Something else' } }, | ||
| { id: '6', data: { name: 'Frank', value: '303', message: 'New message' } }, | ||
| { id: '7', data: { name: 'Grace', value: '404', message: 'Important note' } }, | ||
| { id: '8', data: { name: 'Hank', value: '505', message: 'Final message' } }, | ||
| { id: '9', data: { name: 'Ivy', value: '606', message: 'Additional info' } }, | ||
| { id: '10', data: { name: 'Jack', value: '707', message: 'Critical update' } }, | ||
| { id: '11', data: { name: 'Karen', value: '808', message: 'New feature' } }, | ||
| { id: '12', data: { name: 'Leo', value: '909', message: 'Bug fix' } }, | ||
| { id: '13', data: { name: 'Mona', value: '1010', message: 'Performance improvement' } }, | ||
| { id: '14', data: { name: 'Nina', value: '1111', message: 'Security patch' } }, | ||
| { id: '15', data: { name: 'Oscar', value: '1212', message: 'UI enhancement' } }, | ||
| { id: '16', data: { name: 'Paul', value: '1313', message: 'Backend update' } }, | ||
| { id: '17', data: { name: 'Quinn', value: '1414', message: 'Database migration' } }, | ||
| { id: '18', data: { name: 'Rachel', value: '1515', message: 'API change' } }, | ||
| { id: '19', data: { name: 'Steve', value: '1616', message: 'Documentation update' } }, | ||
| { id: '20', data: { name: 'Tina', value: '1717', message: 'New integration' } }, | ||
| { id: '21', data: { name: 'Uma', value: '1818', message: 'Deprecated feature' } }, | ||
| { id: '22', data: { name: 'Victor', value: '1919', message: 'Hotfix applied' } }, | ||
| { id: '23', data: { name: 'Wendy', value: '2020', message: 'Code refactor' } }, | ||
| { id: '24', data: { name: 'Xander', value: '2121', message: 'New dependency' } }, | ||
| { id: '25', data: { name: 'Yara', value: '2222', message: 'Improved logging' } }, | ||
| { id: '26', data: { name: 'Zane', value: '2323', message: 'Monitoring added' } }, | ||
| { id: '27', data: { name: 'Amy', value: '2424', message: 'Analytics update' } }, | ||
| { id: '28', data: { name: 'Brian', value: '2525', message: 'Localization added' } }, | ||
| { id: '29', data: { name: 'Cathy', value: '2626', message: 'Accessibility fix' } }, | ||
| { id: '30', data: { name: 'David', value: '2727', message: 'New dashboard' } }, | ||
| { id: '31', data: { name: 'Ella', value: '2828', message: 'Improved UX' } }, | ||
| { id: '32', data: { name: 'Fred', value: '2929', message: 'Updated icons' } }, | ||
| { id: '33', data: { name: 'Gina', value: '3030', message: 'Enhanced security' } }, | ||
| { id: '34', data: { name: 'Harry', value: '3131', message: 'New theme' } }, | ||
| { id: '35', data: { name: 'Iris', value: '3232', message: 'Updated dependencies' } }, | ||
| { id: '36', data: { name: 'Jake', value: '3333', message: 'Improved performance' } }, | ||
| { id: '37', data: { name: 'Kara', value: '3434', message: 'New API endpoint' } }, | ||
| { id: '38', data: { name: 'Liam', value: '3535', message: 'Updated README' } }, | ||
| ] | ||
|
|
||
| const meta = { | ||
| component: Table, | ||
|
|
||
| } satisfies Meta<TableProps> | ||
|
|
||
| export default meta | ||
|
|
||
| type Story = StoryObj<typeof meta> | ||
|
|
||
| const BulkActionsComponent = () => ( | ||
| <div className="flexbox dc__gap-4"> | ||
| <Button | ||
| icon={<ICPause />} | ||
| dataTestId="rb-bulk-action__action-widget--cordon" | ||
| component={ButtonComponentType.button} | ||
| style={ButtonStyleType.negativeGrey} | ||
| variant={ButtonVariantType.borderLess} | ||
| ariaLabel="Pause" | ||
| size={ComponentSizeType.small} | ||
| onClick={() => action('Pause clicked')} | ||
| showAriaLabelInTippy | ||
| /> | ||
|
|
||
| <Button | ||
| icon={<ICPlay />} | ||
| dataTestId="rb-bulk-action__action-widget--uncordon" | ||
| component={ButtonComponentType.button} | ||
| style={ButtonStyleType.neutral} | ||
| variant={ButtonVariantType.borderLess} | ||
| ariaLabel="Play" | ||
| size={ComponentSizeType.small} | ||
| onClick={() => action('Play clicked!')} | ||
| showAriaLabelInTippy | ||
| /> | ||
| </div> | ||
| ) | ||
|
|
||
| const ViewWrapper = ({ children, handleSearch, searchKey }: TableViewWrapperProps) => ( | ||
| <div | ||
| style={{ height: '800px' }} | ||
| className="w-100 flexbox-col flex-grow-1 bg__primary dc__overflow-hidden dc__gap-16 py-12" | ||
| > | ||
| <div className="flexbox w-100 dc__align-start px-20"> | ||
| <SearchBar handleSearchChange={handleSearch} initialSearchText={searchKey} containerClassName="w-300" /> | ||
| </div> | ||
|
|
||
| {children} | ||
| </div> | ||
| ) | ||
|
|
||
| export const TableTemplate: Story = { | ||
| args: { | ||
| columns: COLUMNS, | ||
| rows: ROWS, | ||
| filtersVariant: FiltersTypeEnum.STATE, | ||
| id: 'table__story', | ||
| paginationVariant: PaginationEnum.PAGINATED, | ||
| emptyStateConfig: { | ||
| noRowsConfig: { | ||
| title: 'No rows to display', | ||
| description: 'There are no rows to display.', | ||
| }, | ||
| }, | ||
| filter: (row, filterData) => { | ||
| const lowerCasedSearchKey = filterData.searchKey.toLowerCase() | ||
| return (row.data as RowDataType).name.toLowerCase().includes(lowerCasedSearchKey) | ||
| }, | ||
| bulkSelectionConfig: { | ||
| BulkActionsComponent, | ||
| getSelectAllDialogStatus: () => SelectAllDialogStatus.CLOSED, | ||
| onBulkSelectionChanged: () => {}, | ||
| }, | ||
| stylesConfig: { | ||
| showSeparatorBetweenRows: true, | ||
| }, | ||
| ViewWrapper, | ||
| additionalFilterProps: { | ||
| initialSortKey: 'name', | ||
| }, | ||
| } as TableProps, | ||
| } | ||
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -1126,10 +1126,10 @@ | |
| dependencies: | ||
| "@jridgewell/trace-mapping" "0.3.9" | ||
|
|
||
| "@devtron-labs/[email protected].9": | ||
| version "1.10.9" | ||
| resolved "https://registry.yarnpkg.com/@devtron-labs/devtron-fe-common-lib/-/devtron-fe-common-lib-1.10.9.tgz#b64153a618c4ff0f4d13bca077a8ce24eda2af68" | ||
| integrity sha512-A/nXq/Y3AH1ULaBItEa+l+R5XjcdOjGHy4agurAdv/Zus/j6q3OD33zyuR7UwsghqPZMatO3O+Eew64l91D7xw== | ||
| dependencies: | ||
| "@codemirror/lang-json" "6.0.1" | ||
| "@codemirror/lang-yaml" "6.1.2" | ||
|
|
||
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.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Nice add-on!