refactor(SimpleTable): drop BEM, use Mantine TASK-1377

jsapp/js/bemComponents.ts

@@ -179,15 +179,6 @@ bem.KDrawer__primaryIcons = makeBem(bem.KDrawer, 'primary-icons', 'nav');
 bem.KDrawer__secondaryIcons = makeBem(bem.KDrawer, 'secondary-icons', 'nav');
 bem.KDrawer__sidebar = makeBem(bem.KDrawer, 'sidebar', 'aside');
 
-bem.SimpleTable = makeBem(null, 'simple-table', 'table');
-bem.SimpleTable__header = makeBem(bem.SimpleTable, 'header', 'thead');
-bem.SimpleTable__body = makeBem(bem.SimpleTable, 'body', 'tbody');
-bem.SimpleTable__footer = makeBem(bem.SimpleTable, 'footer', 'tfoot');
-bem.SimpleTable__row = makeBem(bem.SimpleTable, 'row', 'tr');
-// NOTE: messageRow needs a __cell with colspan set
-bem.SimpleTable__messageRow = makeBem(bem.SimpleTable, 'message-row', 'tr');
-bem.SimpleTable__cell = makeBem(bem.SimpleTable, 'cell', 'td');
-
 bem.tagSelect = makeBem(null, 'tag-select');
 bem.collectionFilter = makeBem(null, 'collection-filter');
 

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;
+}

jsapp/js/components/common/SimpleTable.stories.tsx

@@ -0,0 +1,46 @@
+import type {Meta, StoryObj} from '@storybook/react';
+import SimpleTable from './SimpleTable';
+
+const meta: Meta<React.ComponentProps<typeof SimpleTable>> = {
+  title: 'common/SimpleTable',
+  component: SimpleTable,
+  argTypes: {},
+  args: {},
+  render: ({...args}) => (
+    <SimpleTable
+      {...args}
+      head={['Element position', 'Atomic mass', 'Symbol', 'Element name']}
+      body={
+        [
+          [6, 12.011, 'C', 'Carbon'],
+          [7, 14.007, 'N', 'Nitrogen'],
+          [39, 88.906, 'Y', 'Yttrium'],
+          [56, 137.33, 'Ba', 'Barium'],
+          [
+            'n/a',
+            'n/a',
+            '??',
+            (
+              <div key='test'>
+                This is just a DIV. It has a button and an input:
+                <br/><br/>
+                <button>button</button>
+                <br/><br/>
+                <input type='email'/>
+                <br/><br/>
+                It shows you can have any <code>React.ReactNode</code> here.
+              </div>
+            ),
+          ],
+          [58, 140.12, 'Ce', 'Cerium'],
+        ]
+      }
+    />
+  ),
+};
+
+export default meta;
+
+export const Primary: StoryObj<typeof SimpleTable> = {
+  args: {},
+};

jsapp/js/components/common/SimpleTable.tsx

@@ -0,0 +1,47 @@
+import {Table, type MantineStyleProps, type TableData} from '@mantine/core';
+import styles from './SimpleTable.module.scss';
+
+interface SimpleTableProps extends MantineStyleProps {
+  head: TableData['head'];
+  body: TableData['body'];
+  /**
+   * Passing minimum width enables contextual horizontal scrollbar (i.e. without
+   * it the table will never display scrollbar - regardless of how small
+   * the screen is).
+   */
+  minWidth?: number;
+}
+
+/**
+ * A wrapper component for `Table` from `@mantine/core`. It requires column
+ * 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(
+  {head, body, minWidth, ...styleProps}: SimpleTableProps
+) {
+  const table = (
+    <Table
+      {...styleProps}
+      classNames={{
+        table: styles.SimpleTableRoot,
+        thead: styles.SimpleTableThead,
+        th: styles.SimpleTableTh,
+        td: styles.SimpleTableTd,
+      }}
+      data={{head: head, body: body}}
+      horizontalSpacing='sm'
+      verticalSpacing='sm'
+    />
+  );
+
+  if (minWidth) {
+    return (
+      <Table.ScrollContainer minWidth={minWidth} type='native'>
+        {table}
+      </Table.ScrollContainer>
+    );
+  }
+
+  return table;
+}