console: add CardedTable component

PR-URL: https://github.com/hasura/graphql-engine-mono/pull/3398
GitOrigin-RevId: f0c6bc8f95a49a6544216c0764fa633ac724e5c6

console/src/new-components/CardedTable/CardedTable.stories.tsx

@@ -0,0 +1,85 @@
+import React from 'react';
+import { ComponentMeta } from '@storybook/react';
+import { CardedTable } from './CardedTable';
+
+export default {
+  title: 'components/CardedTable',
+  component: CardedTable,
+} as ComponentMeta<typeof CardedTable>;
+
+const columns = ['name', 'title', 'email', 'role'];
+
+const action = (
+  <a href="#!" className="text-secondary">
+    Edit
+  </a>
+);
+
+const data = [
+  [
+    <a href="!#" className="text-secondary">
+      Jane Cooper
+    </a>,
+    'Regional Paradigm Technician',
+    'jane.cooper@example.com',
+    'Admin',
+  ],
+  [
+    <a href="!#" className="text-secondary">
+      Jane Cooper
+    </a>,
+    'Regional Paradigm Technician',
+    'jane.cooper@example.com',
+    'Admin',
+  ],
+  [
+    <a href="!#" className="text-secondary">
+      Jane Cooper
+    </a>,
+    'Regional Paradigm Technician',
+    'jane.cooper@example.com',
+    'Admin',
+  ],
+];
+
+const dataWithActions = data.map(row => [...row, action]);
+
+export const withActions = () => (
+  <CardedTable
+    columns={[...columns, null]}
+    data={dataWithActions}
+    showActionCell
+  />
+);
+
+export const withoutActions = () => (
+  <CardedTable columns={columns} data={data} />
+);
+
+export const withHelperComponents = () => (
+  <CardedTable.Table>
+    <CardedTable.Header columns={columns} />
+    <CardedTable.Body data={data} />
+  </CardedTable.Table>
+);
+
+export const withIndividualComponents = () => (
+  <CardedTable.Table>
+    <CardedTable.TableHead>
+      <CardedTable.TableHeadRow>
+        {columns.map(column => (
+          <CardedTable.TableHeadCell>{column}</CardedTable.TableHeadCell>
+        ))}
+      </CardedTable.TableHeadRow>
+    </CardedTable.TableHead>
+    <CardedTable.TableBody>
+      {data.map(row => (
+        <CardedTable.TableBodyRow>
+          {row.map(cell => (
+            <CardedTable.TableBodyCell>{cell}</CardedTable.TableBodyCell>
+          ))}
+        </CardedTable.TableBodyRow>
+      ))}
+    </CardedTable.TableBody>
+  </CardedTable.Table>
+);

console/src/new-components/CardedTable/CardedTable.tsx

@@ -0,0 +1,117 @@
+import React, { ReactNode } from 'react';
+
+interface ChildrenProps {
+  children?: ReactNode;
+}
+
+const Table = ({ children }: ChildrenProps) => {
+  return (
+    <div className="overflow-x-auto border border-gray-300 rounded mb-md">
+      <table className="min-w-full divide-y divide-gray-200 text-left">
+        {children}
+      </table>
+    </div>
+  );
+};
+
+const TableHead = ({ children }: ChildrenProps) => {
+  return <thead>{children}</thead>;
+};
+
+const TableHeadRow = ({ children }: ChildrenProps) => {
+  return <tr>{children}</tr>;
+};
+
+const TableHeadCell = ({ children }: ChildrenProps) => {
+  return (
+    <th
+      scope="col"
+      className="bg-gray-50 px-sm py-sm text-sm font-semibold text-muted uppercase tracking-wider"
+    >
+      {children}
+    </th>
+  );
+};
+
+interface HeaderProps {
+  columns: Array<ReactNode>;
+}
+const Header = ({ columns }: HeaderProps) => {
+  return (
+    <TableHead>
+      <TableHeadRow>
+        {columns.map(column => (
+          <TableHeadCell>{column}</TableHeadCell>
+        ))}
+      </TableHeadRow>
+    </TableHead>
+  );
+};
+
+const TableBody = ({ children }: ChildrenProps) => {
+  return (
+    <tbody className="bg-white divide-y divide-gray-200">{children}</tbody>
+  );
+};
+
+const TableBodyRow = ({ children }: ChildrenProps) => {
+  return <tr className="group">{children}</tr>;
+};
+
+const TableBodyCell = ({ children }: ChildrenProps) => {
+  return <td className="p-sm whitespace-nowrap text-muted">{children}</td>;
+};
+
+const TableBodyActionCell = ({ children }: ChildrenProps) => {
+  return (
+    <td className="p-sm whitespace-nowrap text-right font-semibold opacity-0 group-hover:opacity-100">
+      {children}
+    </td>
+  );
+};
+
+interface BodyProps {
+  data: ReactNode[][];
+  showActionCell?: boolean;
+}
+
+const Body = ({ data, showActionCell = false }: BodyProps) => {
+  return (
+    <TableBody>
+      {data.map(row => {
+        return (
+          <TableBodyRow>
+            {row.map((cell, index) => {
+              if (showActionCell && index + 1 === row.length) {
+                return <TableBodyActionCell>{cell}</TableBodyActionCell>;
+              }
+              return <TableBodyCell>{cell}</TableBodyCell>;
+            })}
+          </TableBodyRow>
+        );
+      })}
+    </TableBody>
+  );
+};
+
+type CardedTableProps = HeaderProps & BodyProps;
+
+export const CardedTable = (props: CardedTableProps) => {
+  return (
+    <Table>
+      <Header columns={props.columns} />
+      <Body data={props.data} showActionCell={props.showActionCell} />
+    </Table>
+  );
+};
+
+CardedTable.Header = Header;
+CardedTable.Body = Body;
+CardedTable.Table = Table;
+CardedTable.TableHead = TableHead;
+CardedTable.TableHeadRow = TableHeadRow;
+CardedTable.TableHeadCell = TableHeadCell;
+CardedTable.TableBody = TableBody;
+CardedTable.TableBodyRow = TableBodyRow;
+CardedTable.TableBodyCell = TableBodyCell;
+CardedTable.TableBodyActionCell = TableBodyActionCell;

console/src/new-components/CardedTable/index.ts

@@ -0,0 +1 @@
+export * from './CardedTable';