From 81efae68c44f5341880d1f7bb1881e589a3446e8 Mon Sep 17 00:00:00 2001
From: coderwelsch <joseph.ribbe@abusix.com>
Date: Fri, 15 Nov 2024 15:20:13 +0100
Subject: [PATCH 1/4] feat: added table for key-value pair columns

---
 src/components/index.ts                       |  1 +
 src/components/table-key-value-pair/index.ts  |  1 +
 .../table-key-value-pair-body-key-cell.tsx    | 25 +++++
 .../table-key-value-pair-body-row.tsx         | 22 +++++
 .../table-key-value-pair-body-value-cell.tsx  | 25 +++++
 .../table-key-value-pair-body.tsx             | 16 +++
 .../table-key-value-pair-header.tsx           | 26 +++++
 .../table-key-value-pair.stories.tsx          | 97 +++++++++++++++++++
 .../table-key-value-pair.tsx                  | 28 ++++++
 9 files changed, 241 insertions(+)
 create mode 100644 src/components/table-key-value-pair/index.ts
 create mode 100644 src/components/table-key-value-pair/table-key-value-pair-body-key-cell.tsx
 create mode 100644 src/components/table-key-value-pair/table-key-value-pair-body-row.tsx
 create mode 100644 src/components/table-key-value-pair/table-key-value-pair-body-value-cell.tsx
 create mode 100644 src/components/table-key-value-pair/table-key-value-pair-body.tsx
 create mode 100644 src/components/table-key-value-pair/table-key-value-pair-header.tsx
 create mode 100644 src/components/table-key-value-pair/table-key-value-pair.stories.tsx
 create mode 100644 src/components/table-key-value-pair/table-key-value-pair.tsx

diff --git a/src/components/index.ts b/src/components/index.ts
index 84d51102..ab1e1fad 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -25,6 +25,7 @@ export { SpinnerOverlay } from "./spinner-overlay";
 export { Tab } from "./tab";
 export { TableUnvirtualized } from "./table-unvirtualized";
 export { TableVirtualized, TableVirtualizedProps } from "./table-virtualized";
+export { TableKeyValuePair } from "./table-key-value-pair";
 export { Tag } from "./tag";
 export { Toast } from "./toast";
 export { Toggle } from "./toggle";
diff --git a/src/components/table-key-value-pair/index.ts b/src/components/table-key-value-pair/index.ts
new file mode 100644
index 00000000..6b726d23
--- /dev/null
+++ b/src/components/table-key-value-pair/index.ts
@@ -0,0 +1 @@
+export { TableKeyValuePair } from "./table-key-value-pair";
diff --git a/src/components/table-key-value-pair/table-key-value-pair-body-key-cell.tsx b/src/components/table-key-value-pair/table-key-value-pair-body-key-cell.tsx
new file mode 100644
index 00000000..9fb0a012
--- /dev/null
+++ b/src/components/table-key-value-pair/table-key-value-pair-body-key-cell.tsx
@@ -0,0 +1,25 @@
+import React from "react";
+import { classNames } from "../../util/class-names";
+
+type TableKeyValuePairBodyKeyProps = React.DetailedHTMLProps<
+    React.TdHTMLAttributes<HTMLTableCellElement>,
+    HTMLTableCellElement
+>;
+
+export const TableKeyValuePairBodyKeyCell = ({
+    children,
+    className,
+    ...props
+}: TableKeyValuePairBodyKeyProps) => {
+    return (
+        <td
+            className={classNames(
+                "headline-400 border-b border-r border-neutral-300 px-2.5 text-neutral-900 first:border-l",
+                className
+            )}
+            {...props}
+        >
+            {children}
+        </td>
+    );
+};
diff --git a/src/components/table-key-value-pair/table-key-value-pair-body-row.tsx b/src/components/table-key-value-pair/table-key-value-pair-body-row.tsx
new file mode 100644
index 00000000..416ae4bf
--- /dev/null
+++ b/src/components/table-key-value-pair/table-key-value-pair-body-row.tsx
@@ -0,0 +1,22 @@
+import React from "react";
+import { classNames } from "../../util/class-names";
+
+type TableKeyValuePairBodyProps = React.TableHTMLAttributes<HTMLTableRowElement>;
+
+export const TableKeyValuePairBodyRow = ({
+    children,
+    className,
+    ...props
+}: TableKeyValuePairBodyProps) => {
+    return (
+        <tr
+            className={classNames(
+                "h-12 [&:last-child_>_td:first-child]:rounded-bl-md [&:last-child_>_td:first-child]:border-l [&:last-child_>_td:first-child]:border-neutral-300 [&:last-child_>_td:last-child]:rounded-br-md",
+                className
+            )}
+            {...props}
+        >
+            {children}
+        </tr>
+    );
+};
diff --git a/src/components/table-key-value-pair/table-key-value-pair-body-value-cell.tsx b/src/components/table-key-value-pair/table-key-value-pair-body-value-cell.tsx
new file mode 100644
index 00000000..52b166b5
--- /dev/null
+++ b/src/components/table-key-value-pair/table-key-value-pair-body-value-cell.tsx
@@ -0,0 +1,25 @@
+import React from "react";
+import { classNames } from "../../util/class-names";
+
+type TableKeyValuePairBodyValueProps = React.DetailedHTMLProps<
+    React.TdHTMLAttributes<HTMLTableCellElement>,
+    HTMLTableCellElement
+>;
+
+export const TableKeyValuePairBodyValueCell = ({
+    children,
+    className,
+    ...props
+}: TableKeyValuePairBodyValueProps) => {
+    return (
+        <td
+            className={classNames(
+                "border-b border-r border-neutral-300 px-2.5 text-neutral-900",
+                className
+            )}
+            {...props}
+        >
+            {children}
+        </td>
+    );
+};
diff --git a/src/components/table-key-value-pair/table-key-value-pair-body.tsx b/src/components/table-key-value-pair/table-key-value-pair-body.tsx
new file mode 100644
index 00000000..c59348bc
--- /dev/null
+++ b/src/components/table-key-value-pair/table-key-value-pair-body.tsx
@@ -0,0 +1,16 @@
+import React from "react";
+import { TableKeyValuePairBodyRow } from "./table-key-value-pair-body-row";
+import { TableKeyValuePairBodyValueCell } from "./table-key-value-pair-body-value-cell";
+import { TableKeyValuePairBodyKeyCell } from "./table-key-value-pair-body-key-cell";
+
+type TableKeyValuePairBodyProps = React.TableHTMLAttributes<HTMLTableSectionElement>;
+
+const TableKeyValuePairBody = ({ children, ...props }: TableKeyValuePairBodyProps) => {
+    return <tbody {...props}>{children}</tbody>;
+};
+
+TableKeyValuePairBody.Row = TableKeyValuePairBodyRow;
+TableKeyValuePairBody.Key = TableKeyValuePairBodyKeyCell;
+TableKeyValuePairBody.Value = TableKeyValuePairBodyValueCell;
+
+export { TableKeyValuePairBody };
diff --git a/src/components/table-key-value-pair/table-key-value-pair-header.tsx b/src/components/table-key-value-pair/table-key-value-pair-header.tsx
new file mode 100644
index 00000000..c6f0bad3
--- /dev/null
+++ b/src/components/table-key-value-pair/table-key-value-pair-header.tsx
@@ -0,0 +1,26 @@
+import React from "react";
+import { classNames } from "../../util/class-names";
+
+interface TableKeyValuePairHeaderProps extends React.HTMLAttributes<HTMLTableSectionElement> {
+    colSpan?: number;
+}
+
+export const TableKeyValuePairHeader = ({
+    children,
+    className,
+    colSpan,
+    ...props
+}: TableKeyValuePairHeaderProps) => {
+    return (
+        <thead className={classNames(className)} {...props}>
+            <tr>
+                <th
+                    className="headline-400 rounded-t-md border border-neutral-300 bg-neutral-50 px-2.5 py-4 text-left text-neutral-900"
+                    colSpan={colSpan}
+                >
+                    {children}
+                </th>
+            </tr>
+        </thead>
+    );
+};
diff --git a/src/components/table-key-value-pair/table-key-value-pair.stories.tsx b/src/components/table-key-value-pair/table-key-value-pair.stories.tsx
new file mode 100644
index 00000000..0c83d310
--- /dev/null
+++ b/src/components/table-key-value-pair/table-key-value-pair.stories.tsx
@@ -0,0 +1,97 @@
+import React from "react";
+import type { Meta } from "@storybook/react";
+import { TableKeyValuePair } from "./table-key-value-pair";
+import { FormField } from "../form-field";
+
+const meta: Meta<typeof TableKeyValuePair> = {
+    title: "Table / Key-Value Pairs",
+    component: TableKeyValuePair,
+};
+
+export default meta;
+
+interface Person {
+    id: number;
+    name: string;
+    isDead?: boolean;
+}
+
+const people: Person[] = [
+    { id: 1, name: "John Lennon", isDead: true },
+    { id: 2, name: "Kenton Towne" },
+    { id: 3, name: "Therese Wunsch" },
+    { id: 4, name: "Benedict Kessler" },
+    { id: 5, name: "Katelyn Rohan" },
+];
+
+const ExampleListbox = () => {
+    const [selectedPerson, setSelectedPerson] = React.useState<null | Person>(null);
+
+    return (
+        <FormField>
+            <FormField.Listbox value={selectedPerson} onChange={setSelectedPerson}>
+                <FormField.Listbox.Button>
+                    <FormField.Listbox.Button.TextValue
+                        value={selectedPerson?.name ?? null}
+                        placeholder="Select..."
+                    />
+                </FormField.Listbox.Button>
+
+                <FormField.Listbox.Options>
+                    {people.map((person) => (
+                        <FormField.Listbox.Option
+                            value={person}
+                            key={person.id}
+                            disabled={person.isDead}
+                        >
+                            <FormField.Listbox.Option.TextOption>
+                                {person.name}
+                            </FormField.Listbox.Option.TextOption>
+                        </FormField.Listbox.Option>
+                    ))}
+                </FormField.Listbox.Options>
+            </FormField.Listbox>
+        </FormField>
+    );
+};
+
+export const Default = () => {
+    return (
+        <div className="min-h-[30rem]">
+            <TableKeyValuePair>
+                <TableKeyValuePair.Header colSpan={4}>Details</TableKeyValuePair.Header>
+
+                <TableKeyValuePair.Body>
+                    <TableKeyValuePair.Body.Row>
+                        <TableKeyValuePair.Body.Key>First Name</TableKeyValuePair.Body.Key>
+                        <TableKeyValuePair.Body.Value>John</TableKeyValuePair.Body.Value>
+
+                        <TableKeyValuePair.Body.Key>Age</TableKeyValuePair.Body.Key>
+                        <TableKeyValuePair.Body.Value>John</TableKeyValuePair.Body.Value>
+                    </TableKeyValuePair.Body.Row>
+
+                    <TableKeyValuePair.Body.Row>
+                        <TableKeyValuePair.Body.Key>Last Name</TableKeyValuePair.Body.Key>
+                        <TableKeyValuePair.Body.Value>Doe</TableKeyValuePair.Body.Value>
+
+                        <TableKeyValuePair.Body.Key>Birth</TableKeyValuePair.Body.Key>
+                        <TableKeyValuePair.Body.Value>01.01.1970</TableKeyValuePair.Body.Value>
+                    </TableKeyValuePair.Body.Row>
+
+                    <TableKeyValuePair.Body.Row>
+                        <TableKeyValuePair.Body.Key>Status</TableKeyValuePair.Body.Key>
+                        <TableKeyValuePair.Body.Value>
+                            <ExampleListbox />
+                        </TableKeyValuePair.Body.Value>
+
+                        <TableKeyValuePair.Body.Value colSpan={2}>
+                            <a href="https://abusix.com" className="inline-link">
+                                Open Comments
+                            </a>
+                        </TableKeyValuePair.Body.Value>
+                    </TableKeyValuePair.Body.Row>
+                </TableKeyValuePair.Body>
+            </TableKeyValuePair>
+        </div>
+    );
+};
diff --git a/src/components/table-key-value-pair/table-key-value-pair.tsx b/src/components/table-key-value-pair/table-key-value-pair.tsx
new file mode 100644
index 00000000..b682efe0
--- /dev/null
+++ b/src/components/table-key-value-pair/table-key-value-pair.tsx
@@ -0,0 +1,28 @@
+import React from "react";
+import { classNames } from "../../util/class-names";
+import { TableKeyValuePairHeader } from "./table-key-value-pair-header";
+import { TableKeyValuePairBody } from "./table-key-value-pair-body";
+
+type TableKeyValuePairProps = React.DetailedHTMLProps<
+    React.TableHTMLAttributes<HTMLTableElement>,
+    HTMLTableElement
+>;
+
+const TableKeyValuePair = ({ children, className, ...props }: TableKeyValuePairProps) => {
+    return (
+        <table
+            className={classNames(
+                "w-full table-fixed border-separate border-spacing-0 text-sm",
+                className
+            )}
+            {...props}
+        >
+            {children}
+        </table>
+    );
+};
+
+TableKeyValuePair.Header = TableKeyValuePairHeader;
+TableKeyValuePair.Body = TableKeyValuePairBody;
+
+export { TableKeyValuePair };

From 2e140f8e7769a3b8277ea7fef4b823af4bb8e6b3 Mon Sep 17 00:00:00 2001
From: coderwelsch <joseph.ribbe@abusix.com>
Date: Fri, 15 Nov 2024 15:24:14 +0100
Subject: [PATCH 2/4] added exports

---
 .../table-key-value-pair-body-key-cell.tsx                     | 2 +-
 .../table-key-value-pair/table-key-value-pair-body-row.tsx     | 2 +-
 .../table-key-value-pair-body-value-cell.tsx                   | 2 +-
 .../table-key-value-pair/table-key-value-pair-body.tsx         | 2 +-
 .../table-key-value-pair/table-key-value-pair-header.tsx       | 3 ++-
 src/components/table-key-value-pair/table-key-value-pair.tsx   | 2 +-
 6 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/src/components/table-key-value-pair/table-key-value-pair-body-key-cell.tsx b/src/components/table-key-value-pair/table-key-value-pair-body-key-cell.tsx
index 9fb0a012..01eedefa 100644
--- a/src/components/table-key-value-pair/table-key-value-pair-body-key-cell.tsx
+++ b/src/components/table-key-value-pair/table-key-value-pair-body-key-cell.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import { classNames } from "../../util/class-names";
 
-type TableKeyValuePairBodyKeyProps = React.DetailedHTMLProps<
+export type TableKeyValuePairBodyKeyProps = React.DetailedHTMLProps<
     React.TdHTMLAttributes<HTMLTableCellElement>,
     HTMLTableCellElement
 >;
diff --git a/src/components/table-key-value-pair/table-key-value-pair-body-row.tsx b/src/components/table-key-value-pair/table-key-value-pair-body-row.tsx
index 416ae4bf..ff68a9f7 100644
--- a/src/components/table-key-value-pair/table-key-value-pair-body-row.tsx
+++ b/src/components/table-key-value-pair/table-key-value-pair-body-row.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import { classNames } from "../../util/class-names";
 
-type TableKeyValuePairBodyProps = React.TableHTMLAttributes<HTMLTableRowElement>;
+export type TableKeyValuePairBodyProps = React.TableHTMLAttributes<HTMLTableRowElement>;
 
 export const TableKeyValuePairBodyRow = ({
     children,
diff --git a/src/components/table-key-value-pair/table-key-value-pair-body-value-cell.tsx b/src/components/table-key-value-pair/table-key-value-pair-body-value-cell.tsx
index 52b166b5..5b79f3be 100644
--- a/src/components/table-key-value-pair/table-key-value-pair-body-value-cell.tsx
+++ b/src/components/table-key-value-pair/table-key-value-pair-body-value-cell.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import { classNames } from "../../util/class-names";
 
-type TableKeyValuePairBodyValueProps = React.DetailedHTMLProps<
+export type TableKeyValuePairBodyValueProps = React.DetailedHTMLProps<
     React.TdHTMLAttributes<HTMLTableCellElement>,
     HTMLTableCellElement
 >;
diff --git a/src/components/table-key-value-pair/table-key-value-pair-body.tsx b/src/components/table-key-value-pair/table-key-value-pair-body.tsx
index c59348bc..f70c4e78 100644
--- a/src/components/table-key-value-pair/table-key-value-pair-body.tsx
+++ b/src/components/table-key-value-pair/table-key-value-pair-body.tsx
@@ -3,7 +3,7 @@ import { TableKeyValuePairBodyRow } from "./table-key-value-pair-body-row";
 import { TableKeyValuePairBodyValueCell } from "./table-key-value-pair-body-value-cell";
 import { TableKeyValuePairBodyKeyCell } from "./table-key-value-pair-body-key-cell";
 
-type TableKeyValuePairBodyProps = React.TableHTMLAttributes<HTMLTableSectionElement>;
+export type TableKeyValuePairBodyProps = React.TableHTMLAttributes<HTMLTableSectionElement>;
 
 const TableKeyValuePairBody = ({ children, ...props }: TableKeyValuePairBodyProps) => {
     return <tbody {...props}>{children}</tbody>;
diff --git a/src/components/table-key-value-pair/table-key-value-pair-header.tsx b/src/components/table-key-value-pair/table-key-value-pair-header.tsx
index c6f0bad3..8571bbec 100644
--- a/src/components/table-key-value-pair/table-key-value-pair-header.tsx
+++ b/src/components/table-key-value-pair/table-key-value-pair-header.tsx
@@ -1,7 +1,8 @@
 import React from "react";
 import { classNames } from "../../util/class-names";
 
-interface TableKeyValuePairHeaderProps extends React.HTMLAttributes<HTMLTableSectionElement> {
+export interface TableKeyValuePairHeaderProps
+    extends React.HTMLAttributes<HTMLTableSectionElement> {
     colSpan?: number;
 }
 
diff --git a/src/components/table-key-value-pair/table-key-value-pair.tsx b/src/components/table-key-value-pair/table-key-value-pair.tsx
index b682efe0..c6637ef9 100644
--- a/src/components/table-key-value-pair/table-key-value-pair.tsx
+++ b/src/components/table-key-value-pair/table-key-value-pair.tsx
@@ -3,7 +3,7 @@ import { classNames } from "../../util/class-names";
 import { TableKeyValuePairHeader } from "./table-key-value-pair-header";
 import { TableKeyValuePairBody } from "./table-key-value-pair-body";
 
-type TableKeyValuePairProps = React.DetailedHTMLProps<
+export type TableKeyValuePairProps = React.DetailedHTMLProps<
     React.TableHTMLAttributes<HTMLTableElement>,
     HTMLTableElement
 >;

From a8a6baaafa4862f54116cd91a22b4c2b8f030f8d Mon Sep 17 00:00:00 2001
From: coderwelsch <joseph.ribbe@abusix.com>
Date: Fri, 15 Nov 2024 15:24:47 +0100
Subject: [PATCH 3/4] fixed formats

---
 .../table-body-placeholder/table-body-placeholder.tsx           | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/table-unvirtualized/table-body/table-body-placeholder/table-body-placeholder.tsx b/src/components/table-unvirtualized/table-body/table-body-placeholder/table-body-placeholder.tsx
index 6932ef65..874ea9a7 100644
--- a/src/components/table-unvirtualized/table-body/table-body-placeholder/table-body-placeholder.tsx
+++ b/src/components/table-unvirtualized/table-body/table-body-placeholder/table-body-placeholder.tsx
@@ -18,7 +18,7 @@ export const TableEmptyPlaceholder = ({
     return (
         <TableBodyRow aria-label="No data available in this table">
             <TableBodyCell colSpan={colSpan} className="h-80">
-                <div className="flex min-h-96 flex-col items-center justify-center">
+                <div className="min-h-96 flex flex-col items-center justify-center">
                     <h5 className="headline-300 mb-1">{title}</h5>
 
                     <p className="paragraph-100 mb-2">{description}</p>

From 7986ab50c35a58d0d2afe499a2ce1dd846c56be8 Mon Sep 17 00:00:00 2001
From: coderwelsch <joseph.ribbe@abusix.com>
Date: Fri, 15 Nov 2024 15:26:47 +0100
Subject: [PATCH 4/4] fixed formats

---
 .../table-body-placeholder/table-body-placeholder.tsx           | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/table-unvirtualized/table-body/table-body-placeholder/table-body-placeholder.tsx b/src/components/table-unvirtualized/table-body/table-body-placeholder/table-body-placeholder.tsx
index 874ea9a7..6932ef65 100644
--- a/src/components/table-unvirtualized/table-body/table-body-placeholder/table-body-placeholder.tsx
+++ b/src/components/table-unvirtualized/table-body/table-body-placeholder/table-body-placeholder.tsx
@@ -18,7 +18,7 @@ export const TableEmptyPlaceholder = ({
     return (
         <TableBodyRow aria-label="No data available in this table">
             <TableBodyCell colSpan={colSpan} className="h-80">
-                <div className="min-h-96 flex flex-col items-center justify-center">
+                <div className="flex min-h-96 flex-col items-center justify-center">
                     <h5 className="headline-300 mb-1">{title}</h5>
 
                     <p className="paragraph-100 mb-2">{description}</p>