From f86b0bba93f4f41740b3c2e9536ac16dc916244b Mon Sep 17 00:00:00 2001 From: Charles de Dreuille Date: Wed, 30 Jul 2025 18:24:31 +0100 Subject: [PATCH] Adding new table with react-aria Signed-off-by: Charles de Dreuille --- .../TablePagination.stories.tsx | 58 + .../TablePagination.styles.css | 23 + .../TablePagination/TablePagination.tsx | 126 ++ .../src/components/TablePagination/index.ts | 18 + .../src/components/TablePagination/types.ts | 29 + .../src/components/TableRA/Table.stories.tsx | 169 ++- .../src/components/TableRA/Table.styles.css | 145 ++ .../components/TableRA/components/Cell.tsx | 67 + .../TableRA/components/CellProfile.tsx | 78 + .../TableRA/{ => components}/Column.tsx | 13 +- .../src/components/TableRA/components/Row.tsx | 47 + .../TableRA/{ => components}/Table.tsx | 11 +- .../TableRA/{ => components}/TableBody.tsx | 5 +- .../TableRA/{ => components}/TableHeader.tsx | 5 +- packages/ui/src/components/TableRA/index.ts | 11 +- .../ui/src/components/TableRA/mocked-data1.ts | 1289 +++++++++++++++++ .../ui/src/components/TableRA/mocked-data2.ts | 46 + .../ui/src/components/TableRA/mocked-data3.ts | 59 + packages/ui/src/components/TableRA/types.ts | 22 +- packages/ui/src/css/components.css | 2 + packages/ui/src/index.ts | 3 +- packages/ui/src/utils/componentDefinitions.ts | 20 + 22 files changed, 2188 insertions(+), 58 deletions(-) create mode 100644 packages/ui/src/components/TablePagination/TablePagination.stories.tsx create mode 100644 packages/ui/src/components/TablePagination/TablePagination.styles.css create mode 100644 packages/ui/src/components/TablePagination/TablePagination.tsx create mode 100644 packages/ui/src/components/TablePagination/index.ts create mode 100644 packages/ui/src/components/TablePagination/types.ts create mode 100644 packages/ui/src/components/TableRA/Table.styles.css create mode 100644 packages/ui/src/components/TableRA/components/Cell.tsx create mode 100644 packages/ui/src/components/TableRA/components/CellProfile.tsx rename packages/ui/src/components/TableRA/{ => components}/Column.tsx (79%) create mode 100644 packages/ui/src/components/TableRA/components/Row.tsx rename packages/ui/src/components/TableRA/{ => components}/Table.tsx (76%) rename packages/ui/src/components/TableRA/{ => components}/TableBody.tsx (81%) rename packages/ui/src/components/TableRA/{ => components}/TableHeader.tsx (89%) create mode 100644 packages/ui/src/components/TableRA/mocked-data1.ts create mode 100644 packages/ui/src/components/TableRA/mocked-data2.ts create mode 100644 packages/ui/src/components/TableRA/mocked-data3.ts diff --git a/packages/ui/src/components/TablePagination/TablePagination.stories.tsx b/packages/ui/src/components/TablePagination/TablePagination.stories.tsx new file mode 100644 index 0000000000..b0e841ec15 --- /dev/null +++ b/packages/ui/src/components/TablePagination/TablePagination.stories.tsx @@ -0,0 +1,58 @@ +/* + * Copyright 2024 The Backstage Authors + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import { useArgs } from '@storybook/preview-api'; +import type { Meta, StoryObj } from '@storybook/react'; +import { TablePagination } from './TablePagination'; + +const meta = { + title: 'Components/TablePagination', + component: TablePagination, + argTypes: { + pageIndex: { control: 'number' }, + pageSize: { control: 'radio', options: [5, 10, 20, 30, 40, 50] }, + rowCount: { control: 'number' }, + showPageSizeOptions: { control: 'boolean', defaultValue: true }, + setPageIndex: { action: 'setPageIndex' }, + setPageSize: { action: 'setPageSize' }, + }, +} satisfies Meta; + +export default meta; +type Story = StoryObj; + +export const Default: Story = { + args: { + pageIndex: 0, + pageSize: 10, + rowCount: 100, + }, + render: args => { + const [{}, updateArgs] = useArgs(); + + return ( + { + updateArgs({ pageIndex: value }); + }} + setPageSize={value => { + updateArgs({ pageSize: value }); + }} + /> + ); + }, +}; diff --git a/packages/ui/src/components/TablePagination/TablePagination.styles.css b/packages/ui/src/components/TablePagination/TablePagination.styles.css new file mode 100644 index 0000000000..f7cbb44fc2 --- /dev/null +++ b/packages/ui/src/components/TablePagination/TablePagination.styles.css @@ -0,0 +1,23 @@ +.bui-DataTablePagination { + display: flex; + align-items: center; + justify-content: space-between; + padding-top: var(--bui-space-5); +} + +.bui-DataTablePagination--left { + display: flex; + align-items: center; + justify-content: space-between; +} + +.bui-DataTablePagination--right { + display: flex; + align-items: center; + justify-content: space-between; + gap: var(--bui-space-2); +} + +.bui-DataTablePagination--select { + min-width: 10.5rem; +} diff --git a/packages/ui/src/components/TablePagination/TablePagination.tsx b/packages/ui/src/components/TablePagination/TablePagination.tsx new file mode 100644 index 0000000000..9fc9ee7207 --- /dev/null +++ b/packages/ui/src/components/TablePagination/TablePagination.tsx @@ -0,0 +1,126 @@ +/* + * Copyright 2025 The Backstage Authors + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import clsx from 'clsx'; +import { Text, ButtonIcon, Select, Icon } from '../..'; +import type { TablePaginationProps } from './types'; + +/** + * Pagination controls for Table components with page navigation and size selection. + * + * @public + */ +export function TablePagination(props: TablePaginationProps) { + const { + className, + pageIndex, + pageSize, + rowCount, + onNextPage, + onPreviousPage, + onPageSizeChange, + setPageIndex, + setPageSize, + showPageSizeOptions = true, + ...rest + } = props; + + const fromCount = (pageIndex ?? 0) * (pageSize ?? 10) + 1; + const toCount = Math.min( + ((pageIndex ?? 0) + 1) * (pageSize ?? 10), + rowCount ?? 0, + ); + + const nextPage = () => { + const currentPageIndex = pageIndex ?? 0; + const currentPageSize = pageSize ?? 10; + const totalRows = rowCount ?? 0; + + // Check if there are more pages to navigate to + const maxPageIndex = Math.ceil(totalRows / currentPageSize) - 1; + + if (currentPageIndex < maxPageIndex) { + onNextPage?.(); // Analytics tracking + setPageIndex?.(currentPageIndex + 1); // Navigate to next page + } + }; + + const previousPage = () => { + const currentPageIndex = pageIndex ?? 0; + + // Check if we can go to previous page + if (currentPageIndex > 0) { + onPreviousPage?.(); // Analytics tracking + setPageIndex?.(currentPageIndex - 1); // Navigate to previous page + } + }; + + return ( +
+
+ {showPageSizeOptions && ( +