feat(tools): Implement basic functionality of table component

tools/ui-components/src/index.ts

@@ -2,3 +2,4 @@
 export { Button } from './button';
 export { Alert } from './alert';
 export { Image } from './image';
+export { Table } from './table';

tools/ui-components/src/table/index.ts

@@ -0,0 +1,2 @@
+export { Table } from './table';
+export type { TableProps } from './types';

tools/ui-components/src/table/table.stories.tsx

@@ -0,0 +1,83 @@
+import React from 'react';
+import { Story } from '@storybook/react';
+import { Table, TableProps } from '.';
+const exampleTable = (
+  <>
+    <thead>
+      <tr>
+        <th>#</th>
+        <th>First Name</th>
+        <th>Last Name</th>
+        <th>Username</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>1</td>
+        <td>Mark</td>
+        <td>Otto</td>
+        <td>@mdo</td>
+      </tr>
+      <tr>
+        <td>2</td>
+        <td>John</td>
+        <td>Loos</td>
+        <td>@mlos</td>
+      </tr>
+      <tr>
+        <td>3</td>
+        <td>Joe</td>
+        <td>Kot</td>
+        <td>@mko</td>
+      </tr>
+    </tbody>
+  </>
+);
+
+const story = {
+  title: 'Example/Table',
+  component: Table,
+  parameters: {
+    controls: {
+      include: [
+        'variant',
+        'size',
+        'bordered',
+        'borderless',
+        'hover',
+        'striped',
+        'condensed',
+        'responsive'
+      ]
+    }
+  },
+  argTypes: {
+    striped: {
+      options: [true, false],
+      control: { type: 'radio' }
+    },
+    condensed: {
+      options: [true, false],
+      control: { type: 'radio' }
+    }
+  }
+};
+
+const Template: Story<TableProps> = args => (
+  <Table {...args}>{exampleTable}</Table>
+);
+export const Default = Template.bind({});
+Default.args = {
+  condensed: false,
+  striped: false
+};
+export const Condensed = Template.bind({});
+Condensed.args = {
+  condensed: true
+};
+export const Striped = Template.bind({});
+Striped.args = {
+  striped: true
+};
+
+export default story;

tools/ui-components/src/table/table.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+
+import { TableProps } from './types';
+
+const defaultClassNames = [
+  'table',
+  'table-auto',
+  'w-full',
+  'max-w-full',
+  'border-collapse',
+  'text-left',
+  'text-foreground-tertiary',
+  '[&_th]:font-normal'
+];
+
+const computeClassNames = ({
+  condensed,
+  striped
+}: {
+  condensed: boolean;
+  striped: boolean;
+}) => {
+  const classNames = [...defaultClassNames];
+  if (condensed) classNames.push('[&_td]:p-1 [&_th]:p-1');
+  else classNames.push('[&_td]:p-2 [&_th]:p-2');
+  if (striped)
+    classNames.push('[&>tbody>tr:nth-of-type(odd)]:bg-background-tertiary');
+
+  return classNames.join(' ');
+};
+
+export const Table = React.forwardRef<HTMLTableElement, TableProps>(
+  ({ striped = false, condensed = false, ...props }, ref) => {
+    const classNames = React.useMemo(
+      () => computeClassNames({ condensed, striped }),
+      [condensed, striped]
+    );
+
+    const table = <table {...props} ref={ref} className={classNames} />;
+
+    return table;
+  }
+);
+
+Table.displayName = 'Table';

tools/ui-components/src/table/types.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+
+export interface TableProps
+  extends React.TableHTMLAttributes<HTMLTableElement> {
+  condensed?: boolean;
+  striped?: boolean;
+}