From 45b7fc4a4e2aa383c30218976f2a40be2beae8ac Mon Sep 17 00:00:00 2001 From: Leszek Date: Mon, 16 Dec 2024 15:04:04 +0100 Subject: [PATCH 01/14] create initial files --- .../components/common/SimpleTable.stories.tsx | 0 jsapp/js/components/common/SimpleTable.tsx | 18 ++++++++++++++++++ 2 files changed, 18 insertions(+) create mode 100644 jsapp/js/components/common/SimpleTable.stories.tsx create mode 100644 jsapp/js/components/common/SimpleTable.tsx diff --git a/jsapp/js/components/common/SimpleTable.stories.tsx b/jsapp/js/components/common/SimpleTable.stories.tsx new file mode 100644 index 0000000000..e69de29bb2 diff --git a/jsapp/js/components/common/SimpleTable.tsx b/jsapp/js/components/common/SimpleTable.tsx new file mode 100644 index 0000000000..665e65309f --- /dev/null +++ b/jsapp/js/components/common/SimpleTable.tsx @@ -0,0 +1,18 @@ +// Libraries +import {Table, TableData} from '@mantine/core'; + +// Partial components + +// Stores, hooks and utilities +// Constants and types +// Styles + +import React from 'react'; + +interface SimpleTableProps { + data: TableData; +} + +export default function SimpleTable(props: SimpleTableProps) { + return ; +} From 583bba3d6eb0a179ad63b3dc47e8738b979f1435 Mon Sep 17 00:00:00 2001 From: Leszek Date: Mon, 16 Dec 2024 16:03:55 +0100 Subject: [PATCH 02/14] prepare initial stories --- .../components/common/SimpleTable.stories.tsx | 42 +++++++++++++++++++ jsapp/js/components/common/SimpleTable.tsx | 2 +- 2 files changed, 43 insertions(+), 1 deletion(-) diff --git a/jsapp/js/components/common/SimpleTable.stories.tsx b/jsapp/js/components/common/SimpleTable.stories.tsx index e69de29bb2..42adf40baa 100644 --- a/jsapp/js/components/common/SimpleTable.stories.tsx +++ b/jsapp/js/components/common/SimpleTable.stories.tsx @@ -0,0 +1,42 @@ +import type {Meta, StoryObj} from '@storybook/react'; +import {MantineProvider} from '@mantine/core'; +import {themeKobo} from 'jsapp/js/theme'; +import SimpleTable from './SimpleTable'; + +interface CustomArgs {} +type SimpleTablePropsAndCustomArgs = React.ComponentProps & CustomArgs; + +const meta: Meta = { + title: 'common/SimpleTable', + component: SimpleTable, + argTypes: {}, + args: {}, + render: ({...args}) => { + return ( + + + + ); + }, +}; + +export default meta; + +type Story = StoryObj; + +export const Primary: Story = { + args: {}, +}; diff --git a/jsapp/js/components/common/SimpleTable.tsx b/jsapp/js/components/common/SimpleTable.tsx index 665e65309f..b2acf538c0 100644 --- a/jsapp/js/components/common/SimpleTable.tsx +++ b/jsapp/js/components/common/SimpleTable.tsx @@ -14,5 +14,5 @@ interface SimpleTableProps { } export default function SimpleTable(props: SimpleTableProps) { - return
; + return (
); } From 67471a4badd0d09f68bf8da448ed8e281e5d0ec0 Mon Sep 17 00:00:00 2001 From: Leszek Date: Tue, 17 Dec 2024 15:34:48 +0100 Subject: [PATCH 03/14] add Table theme overrides --- .../components/common/SimpleTable.stories.tsx | 11 +++--- jsapp/js/components/common/SimpleTable.tsx | 28 ++++++++++++--- jsapp/js/theme/kobo/Table.ts | 34 +++++++++++++++++++ jsapp/js/theme/kobo/index.ts | 2 ++ 4 files changed, 64 insertions(+), 11 deletions(-) create mode 100644 jsapp/js/theme/kobo/Table.ts diff --git a/jsapp/js/components/common/SimpleTable.stories.tsx b/jsapp/js/components/common/SimpleTable.stories.tsx index 42adf40baa..61ed60ebfd 100644 --- a/jsapp/js/components/common/SimpleTable.stories.tsx +++ b/jsapp/js/components/common/SimpleTable.stories.tsx @@ -16,17 +16,16 @@ const meta: Meta = { ); diff --git a/jsapp/js/components/common/SimpleTable.tsx b/jsapp/js/components/common/SimpleTable.tsx index b2acf538c0..d0a31254b1 100644 --- a/jsapp/js/components/common/SimpleTable.tsx +++ b/jsapp/js/components/common/SimpleTable.tsx @@ -1,5 +1,6 @@ // Libraries -import {Table, TableData} from '@mantine/core'; +import type React from 'react'; +import {Table, type TableData} from '@mantine/core'; // Partial components @@ -7,12 +8,29 @@ import {Table, TableData} from '@mantine/core'; // Constants and types // Styles -import React from 'react'; - interface SimpleTableProps { - data: TableData; + head: TableData['head']; + body: TableData['body']; + /** Passing min width enables contextual horizontal scrollbar. */ + minWidth?: number; } export default function SimpleTable(props: SimpleTableProps) { - return (
); + const table = ( +
+ ); + + if (props.minWidth) { + return ( + + {table} + + ); + } + + return table; } diff --git a/jsapp/js/theme/kobo/Table.ts b/jsapp/js/theme/kobo/Table.ts new file mode 100644 index 0000000000..0b09eaa37e --- /dev/null +++ b/jsapp/js/theme/kobo/Table.ts @@ -0,0 +1,34 @@ +import {Table} from '@mantine/core'; + +export const TableThemeKobo = Table.extend({ + defaultProps: { + withTableBorder: true, + // Disabled default row borders, because `borderCollapse` override broke + // them, and they will be added in some custom way. + withRowBorders: false, + captionSide: 'top', + }, + styles: (theme) => { + return { + table: { + borderCollapse: 'separate', + borderRadius: theme.radius.md, + }, + thead: { + backgroundColor: theme.colors.gray[8], + }, + td: { + borderTopWidth: '1px', + borderTopColor: theme.colors.gray[7], + borderTopStyle: 'solid', + }, + }; + }, + vars: (theme) => { + return { + table: { + '--table-border-color': theme.colors.gray[7], + }, + }; + }, +}); diff --git a/jsapp/js/theme/kobo/index.ts b/jsapp/js/theme/kobo/index.ts index b3efca6e28..4f028cdac1 100644 --- a/jsapp/js/theme/kobo/index.ts +++ b/jsapp/js/theme/kobo/index.ts @@ -1,5 +1,6 @@ import {createTheme, rem} from '@mantine/core'; import {ButtonThemeKobo} from './Button'; +import {TableThemeKobo} from './Table'; import {TooltipThemeKobo} from './Tooltip'; export const themeKobo = createTheme({ @@ -87,5 +88,6 @@ export const themeKobo = createTheme({ components: { Button: ButtonThemeKobo, Tooltip: TooltipThemeKobo, + Table: TableThemeKobo, }, }); From a0ff7288f9dea6b205b2befa27995b923e16052f Mon Sep 17 00:00:00 2001 From: Leszek Date: Wed, 18 Dec 2024 11:57:02 +0100 Subject: [PATCH 04/14] adjust SimpleTable styles --- jsapp/js/theme/kobo/Table.ts | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/jsapp/js/theme/kobo/Table.ts b/jsapp/js/theme/kobo/Table.ts index 0b09eaa37e..6099a5af66 100644 --- a/jsapp/js/theme/kobo/Table.ts +++ b/jsapp/js/theme/kobo/Table.ts @@ -11,13 +11,20 @@ export const TableThemeKobo = Table.extend({ styles: (theme) => { return { table: { + backgroundColor: theme.colors.gray[9], borderCollapse: 'separate', borderRadius: theme.radius.md, }, thead: { backgroundColor: theme.colors.gray[8], }, + th: { + fontSize: theme.fontSizes.sm, + color: theme.colors.gray[2], + fontWeight: '400', + }, td: { + fontSize: theme.fontSizes.md, borderTopWidth: '1px', borderTopColor: theme.colors.gray[7], borderTopStyle: 'solid', From 63d9a73bd1ab125097faa0534b2c7fbc0efee618 Mon Sep 17 00:00:00 2001 From: Leszek Date: Wed, 18 Dec 2024 11:57:14 +0100 Subject: [PATCH 05/14] use SimpleTable in ProjectExportsList --- .../projectDownloads/projectExportsList.es6 | 98 +++++++------------ 1 file changed, 35 insertions(+), 63 deletions(-) diff --git a/jsapp/js/components/projectDownloads/projectExportsList.es6 b/jsapp/js/components/projectDownloads/projectExportsList.es6 index b020b029ac..879dc5987b 100644 --- a/jsapp/js/components/projectDownloads/projectExportsList.es6 +++ b/jsapp/js/components/projectDownloads/projectExportsList.es6 @@ -16,6 +16,8 @@ import exportsStore from 'js/components/projectDownloads/exportsStore'; import ExportFetcher from 'js/components/projectDownloads/exportFetcher'; import {userCan} from 'js/components/permissions/utils'; import Button from 'js/components/common/button'; +import SimpleTable from 'js/components/common/SimpleTable'; +import {Text, Flex} from '@mantine/core'; /** * Component that displays all available downloads (for logged in user only). @@ -186,30 +188,26 @@ export default class ProjectExportsList extends React.Component { return languageDisplay; } - renderRow(exportData) { - return ( - - - {EXPORT_TYPES[exportData.data.type]?.label} - - - - {formatTime(exportData.date_created)} - - - - {this.renderLanguage(exportData.data.lang)} - - - + getRows() { + return this.state.rows.map((exportData) => ( + [ + EXPORT_TYPES[exportData.data.type]?.label, + formatTime(exportData.date_created), + this.renderLanguage(exportData.data.lang), + {this.renderBooleanAnswer(exportData.data.hierarchy_in_labels)} - - - + , + {this.renderBooleanAnswer(exportData.data.fields_from_all_versions)} - - - + , + {exportData.status === EXPORT_STATUSES.complete &&
Date: Wed, 18 Dec 2024 14:32:04 +0100 Subject: [PATCH 12/14] improve SimpleTable story example --- .../js/components/common/SimpleTable.stories.tsx | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/jsapp/js/components/common/SimpleTable.stories.tsx b/jsapp/js/components/common/SimpleTable.stories.tsx index 349a1f85cf..fa412fe58f 100644 --- a/jsapp/js/components/common/SimpleTable.stories.tsx +++ b/jsapp/js/components/common/SimpleTable.stories.tsx @@ -19,6 +19,22 @@ const meta: Meta> = { [7, 14.007, 'N', 'Nitrogen'], [39, 88.906, 'Y', 'Yttrium'], [56, 137.33, 'Ba', 'Barium'], + [ + 'n/a', + 'n/a', + '??', + ( +
+ This is just a DIV. It has a button and an input: +

+ +

+ +

+ It shows you can have any React.ReactNode here. +
+ ), + ], [58, 140.12, 'Ce', 'Cerium'], ] } From ad2e5a73fa0a784a6b5fbe5feaa70fae60a5c9a2 Mon Sep 17 00:00:00 2001 From: Leszek Date: Wed, 18 Dec 2024 14:45:26 +0100 Subject: [PATCH 13/14] update SimpleTable stories to use global Mantine setup --- .../components/common/SimpleTable.stories.tsx | 60 +++++++++---------- 1 file changed, 28 insertions(+), 32 deletions(-) diff --git a/jsapp/js/components/common/SimpleTable.stories.tsx b/jsapp/js/components/common/SimpleTable.stories.tsx index fa412fe58f..176c2d78b7 100644 --- a/jsapp/js/components/common/SimpleTable.stories.tsx +++ b/jsapp/js/components/common/SimpleTable.stories.tsx @@ -1,6 +1,4 @@ import type {Meta, StoryObj} from '@storybook/react'; -import {MantineProvider} from '@mantine/core'; -import {themeKobo} from 'jsapp/js/theme'; import SimpleTable from './SimpleTable'; const meta: Meta> = { @@ -9,37 +7,35 @@ const meta: Meta> = { argTypes: {}, args: {}, render: ({...args}) => ( - - - This is just a DIV. It has a button and an input: -

- -

- -

- It shows you can have any React.ReactNode here. - - ), - ], - [58, 140.12, 'Ce', 'Cerium'], - ] - } - /> - + 'n/a', + 'n/a', + '??', + ( +
+ This is just a DIV. It has a button and an input: +

+ +

+ +

+ It shows you can have any React.ReactNode here. +
+ ), + ], + [58, 140.12, 'Ce', 'Cerium'], + ] + } + /> ), }; From c4e9f276fe12af8c60fe1628b19f6de47d12d012 Mon Sep 17 00:00:00 2001 From: Leszek Date: Mon, 23 Dec 2024 15:59:22 +0100 Subject: [PATCH 14/14] code review fixes --- .../components/common/SimpleTable.module.scss | 25 +++++++++++++++++++ jsapp/js/components/common/SimpleTable.tsx | 25 +++++++++++++------ .../modalForms/bulkEditSubmissionsForm.es6 | 25 +++++++++---------- jsapp/js/theme/kobo/Table.ts | 23 ----------------- 4 files changed, 55 insertions(+), 43 deletions(-) create mode 100644 jsapp/js/components/common/SimpleTable.module.scss diff --git a/jsapp/js/components/common/SimpleTable.module.scss b/jsapp/js/components/common/SimpleTable.module.scss new file mode 100644 index 0000000000..2c804a8de3 --- /dev/null +++ b/jsapp/js/components/common/SimpleTable.module.scss @@ -0,0 +1,25 @@ +// We need bigger specificity in each selector to ensure we do overwrite default +// styles + +table.SimpleTableRoot { + background-color: var(--mantine-color-gray-9); + border-collapse: separate; + border-radius: var(--mantine-radius-md); +} + +thead.SimpleTableThead { + background-color: var(--mantine-color-gray-8); +} + +th.SimpleTableTh { + font-size: var(--mantine-font-size-sm); + color: var(--mantine-color-gray-2); + font-weight: 400; +} + +td.SimpleTableTd { + font-size: var(--mantine-font-size-md); + border-top-width: 1px; + border-top-color: var(--mantine-color-gray-7); + border-top-style: solid; +} diff --git a/jsapp/js/components/common/SimpleTable.tsx b/jsapp/js/components/common/SimpleTable.tsx index 28c0cfb998..4680131556 100644 --- a/jsapp/js/components/common/SimpleTable.tsx +++ b/jsapp/js/components/common/SimpleTable.tsx @@ -1,6 +1,7 @@ -import {Table, type TableData} from '@mantine/core'; +import {Table, type MantineStyleProps, type TableData} from '@mantine/core'; +import styles from './SimpleTable.module.scss'; -interface SimpleTableProps { +interface SimpleTableProps extends MantineStyleProps { head: TableData['head']; body: TableData['body']; /** @@ -13,20 +14,30 @@ interface SimpleTableProps { /** * A wrapper component for `Table` from `@mantine/core`. It requires column - * headings, column data, and has optional minimum width. + * headings, column data, and has optional minimum width. You can pass all + * standard Mantine style props down to the inner `Table`. */ -export default function SimpleTable(props: SimpleTableProps) { +export default function SimpleTable( + {head, body, minWidth, ...styleProps}: SimpleTableProps +) { const table = (
); - if (props.minWidth) { + if (minWidth) { return ( - + {table} ); diff --git a/jsapp/js/components/modalForms/bulkEditSubmissionsForm.es6 b/jsapp/js/components/modalForms/bulkEditSubmissionsForm.es6 index 320c43564b..644ef28c15 100644 --- a/jsapp/js/components/modalForms/bulkEditSubmissionsForm.es6 +++ b/jsapp/js/components/modalForms/bulkEditSubmissionsForm.es6 @@ -16,7 +16,7 @@ import {actions} from 'js/actions'; import TextBox from 'js/components/common/textBox'; import Button from 'js/components/common/button'; import SimpleTable from 'js/components/common/SimpleTable'; -import {Text, Box} from '@mantine/core'; +import {Text} from '@mantine/core'; import envStore from 'js/envStore'; // we need a text to display when we need to say "this question has no answer" @@ -550,18 +550,17 @@ class BulkEditRowForm extends React.Component { - - {t('Action')}, - ]} - body={this.getRows()} - minWidth={600} - /> - + {t('Action')}, + ]} + body={this.getRows()} + minWidth={600} + /> ); } diff --git a/jsapp/js/theme/kobo/Table.ts b/jsapp/js/theme/kobo/Table.ts index 6099a5af66..8cc2685f8c 100644 --- a/jsapp/js/theme/kobo/Table.ts +++ b/jsapp/js/theme/kobo/Table.ts @@ -8,29 +8,6 @@ export const TableThemeKobo = Table.extend({ withRowBorders: false, captionSide: 'top', }, - styles: (theme) => { - return { - table: { - backgroundColor: theme.colors.gray[9], - borderCollapse: 'separate', - borderRadius: theme.radius.md, - }, - thead: { - backgroundColor: theme.colors.gray[8], - }, - th: { - fontSize: theme.fontSizes.sm, - color: theme.colors.gray[2], - fontWeight: '400', - }, - td: { - fontSize: theme.fontSizes.md, - borderTopWidth: '1px', - borderTopColor: theme.colors.gray[7], - borderTopStyle: 'solid', - }, - }; - }, vars: (theme) => { return { table: {