From b441d6c9ec9daf91d48da4fe93d4000d9d872664 Mon Sep 17 00:00:00 2001 From: Charles de Dreuille Date: Tue, 29 Jul 2025 10:01:11 +0100 Subject: [PATCH] Explore RA Signed-off-by: Charles de Dreuille --- packages/ui/src/components/TableRA/Column.tsx | 44 +++++++++ .../src/components/TableRA/Table.stories.tsx | 92 +++++++++++++++++++ packages/ui/src/components/TableRA/Table.tsx | 24 +++++ .../ui/src/components/TableRA/TableBody.tsx | 24 +++++ .../ui/src/components/TableRA/TableHeader.tsx | 43 +++++++++ packages/ui/src/components/TableRA/index.ts | 20 ++++ packages/ui/src/components/TableRA/types.ts | 15 +++ 7 files changed, 262 insertions(+) create mode 100644 packages/ui/src/components/TableRA/Column.tsx create mode 100644 packages/ui/src/components/TableRA/Table.stories.tsx create mode 100644 packages/ui/src/components/TableRA/Table.tsx create mode 100644 packages/ui/src/components/TableRA/TableBody.tsx create mode 100644 packages/ui/src/components/TableRA/TableHeader.tsx create mode 100644 packages/ui/src/components/TableRA/index.ts create mode 100644 packages/ui/src/components/TableRA/types.ts diff --git a/packages/ui/src/components/TableRA/Column.tsx b/packages/ui/src/components/TableRA/Column.tsx new file mode 100644 index 0000000000..69ccc3b344 --- /dev/null +++ b/packages/ui/src/components/TableRA/Column.tsx @@ -0,0 +1,44 @@ +/* + * 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 { + Column as ReactAriaColumn, + type ColumnProps, +} from 'react-aria-components'; +import { Icon } from '../Icon'; + +export const Column = ( + props: Omit & { children?: React.ReactNode }, +) => { + return ( + + {({ allowsSorting, sortDirection }) => ( +
+ {props.children} + {allowsSorting && ( + + )} +
+ )} + + ); +}; diff --git a/packages/ui/src/components/TableRA/Table.stories.tsx b/packages/ui/src/components/TableRA/Table.stories.tsx new file mode 100644 index 0000000000..80ed60f382 --- /dev/null +++ b/packages/ui/src/components/TableRA/Table.stories.tsx @@ -0,0 +1,92 @@ +/* + * 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 type { Meta, StoryFn, StoryObj } from '@storybook/react'; +import { Table, TableHeader, Column, TableBody } from '.'; +import { MemoryRouter } from 'react-router-dom'; +import { + Table as ReactAriaTable, + TableHeader as ReactAriaTableHeader, + Column as ReactAriaColumn, + Cell, + Row as ReactAriaRow, + Cell as ReactAriaCell, + Row, + Checkbox, +} from 'react-aria-components'; + +const meta = { + title: 'Components/TableRA', + decorators: [ + (Story: StoryFn) => ( + + + + ), + ], +} satisfies Meta; + +export default meta; +type Story = StoryObj; + +export const Uncontrolled: Story = { + render: () => { + return ( + + + Name + Type + Size + Date Modified + + + + + + + Games + File folder + 6/7/2020 + + + + + + Program Files + File folder + 4/7/2021 + + + + + + bootmgr + System file + 11/20/2010 + + + + + + log.txt + Text Document + 1/18/2016 + + +
+ ); + }, +}; diff --git a/packages/ui/src/components/TableRA/Table.tsx b/packages/ui/src/components/TableRA/Table.tsx new file mode 100644 index 0000000000..21269cad8e --- /dev/null +++ b/packages/ui/src/components/TableRA/Table.tsx @@ -0,0 +1,24 @@ +/* + * 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 { + Table as ReactAriaTable, + type TableProps, +} from 'react-aria-components'; + +export const Table = (props: TableProps) => { + return ; +}; diff --git a/packages/ui/src/components/TableRA/TableBody.tsx b/packages/ui/src/components/TableRA/TableBody.tsx new file mode 100644 index 0000000000..0cdd71f9c7 --- /dev/null +++ b/packages/ui/src/components/TableRA/TableBody.tsx @@ -0,0 +1,24 @@ +/* + * 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 { + TableBody as ReactAriaTableBody, + type TableBodyProps, +} from 'react-aria-components'; + +export const TableBody = (props: TableBodyProps) => { + return ; +}; diff --git a/packages/ui/src/components/TableRA/TableHeader.tsx b/packages/ui/src/components/TableRA/TableHeader.tsx new file mode 100644 index 0000000000..2feb953939 --- /dev/null +++ b/packages/ui/src/components/TableRA/TableHeader.tsx @@ -0,0 +1,43 @@ +/* + * 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 { + TableHeader as ReactAriaTableHeader, + type TableHeaderProps, + Checkbox, +} from 'react-aria-components'; +import { Collection, useTableOptions } from 'react-aria-components'; +import { Column } from './Column'; + +export const TableHeader = ({ + columns, + children, +}: TableHeaderProps) => { + let { selectionBehavior, selectionMode, allowsDragging } = useTableOptions(); + + return ( + + {/* Add extra columns for drag and drop and selection. */} + {allowsDragging && } + {selectionBehavior === 'toggle' && ( + + {selectionMode === 'multiple' && } + + )} + {children} + + ); +}; diff --git a/packages/ui/src/components/TableRA/index.ts b/packages/ui/src/components/TableRA/index.ts new file mode 100644 index 0000000000..44fe35405a --- /dev/null +++ b/packages/ui/src/components/TableRA/index.ts @@ -0,0 +1,20 @@ +/* + * 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. + */ + +export { Table } from './Table'; +export { TableHeader } from './TableHeader'; +export { TableBody } from './TableBody'; +export { Column } from './Column'; diff --git a/packages/ui/src/components/TableRA/types.ts b/packages/ui/src/components/TableRA/types.ts new file mode 100644 index 0000000000..379ce77f52 --- /dev/null +++ b/packages/ui/src/components/TableRA/types.ts @@ -0,0 +1,15 @@ +/* + * 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. + */