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.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,36 @@
+import {Table, type TableData} from '@mantine/core';
+
+interface SimpleTableProps {
+  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.
+ */
+export default function SimpleTable(props: SimpleTableProps) {
+  const table = (
+    <Table
+      data={{head: props.head, body: props.body}}
+      horizontalSpacing='sm'
+      verticalSpacing='sm'
+    />
+  );
+
+  if (props.minWidth) {
+    return (
+      <Table.ScrollContainer minWidth={props.minWidth} type='native'>
+        {table}
+      </Table.ScrollContainer>
+    );
+  }
+
+  return table;
+}