From 4c3072ed50722d88a26788375fa089cc63e03bb4 Mon Sep 17 00:00:00 2001
From: Vivian Phung <dev+github@vivianphung.com>
Date: Tue, 14 May 2024 18:45:38 -0400
Subject: [PATCH] [19/n][Storybook] basic Table uses themes

---
 .../components/shared/Table/Table.theme.ts    | 80 +++++++++++--------
 .../src/components/shared/Table/Table.tsx     | 49 +++++-------
 2 files changed, 67 insertions(+), 62 deletions(-)

diff --git a/packages/frontend/src/components/shared/Table/Table.theme.ts b/packages/frontend/src/components/shared/Table/Table.theme.ts
index 664433a..1cbefd8 100644
--- a/packages/frontend/src/components/shared/Table/Table.theme.ts
+++ b/packages/frontend/src/components/shared/Table/Table.theme.ts
@@ -1,35 +1,49 @@
-interface ThemeProps {
-  base: string;
-  header: string;
-  row: string;
-  columnHeaderCell: string;
-  rowHeaderCell: string;
-  cell: string;
-}
+import { tv, VariantProps } from 'tailwind-variants';
 
-const primaryTheme: ThemeProps = {
-  base: 'min-w-full border-collapse',
-  header: 'border-b border-sky-950/opacity-5 font-medium leading-tight',
-  row: 'border-b border-sky-950/opacity-5',
-  columnHeaderCell:
-    'p-4 text-sky-950 text-sm font-medium uppercase tracking-wider text-left',
-  rowHeaderCell:
-    'p-4 text-slate-600 text-sm font-normal leading-tight text-left',
-  cell: 'p-4 whitespace-nowrap text-sm text-slate-600 font-normal text-left',
-};
+export const tableTheme = tv({
+  slots: {
+    root: ['min-w-full', 'border-collapse'],
+    header: [
+      'p-2',
+      'border-b',
+      'border-sky-950/opacity-5',
+      'text-sky-950',
+      'text-sm',
+      'font-medium',
+      'leading-tight',
+    ],
+    body: [],
+    row: ['border-b', 'border-sky-950/opacity-5'],
+    columnHeaderCell: [
+      'p-4',
+      'text-sky-950',
+      'text-sm',
+      'font-medium',
+      'uppercase',
+      'tracking-wider',
+      'text-left',
+    ],
+    rowHeaderCell: [
+      'p-4',
+      'text-slate-600',
+      'text-sm',
+      'font-normal',
+      'leading-tight',
+      'text-left',
+    ],
+    cell: [
+      'p-4',
+      'whitespace-nowrap',
+      'text-sm',
+      'text-slate-600',
+      'font-normal',
+      'text-left',
+    ],
+  },
+  variants: {},
+  defaultVariants: {
+    orientation: 'vertical',
+  },
+});
 
-const secondaryTheme: ThemeProps = {
-  base: 'min-w-full border-collapse',
-  header:
-    'p-2 border-b border-sky-950/5 text-sky-950 text-sm font-medium leading-tight',
-  row: 'text-left border-b border-gray-300/50',
-  columnHeaderCell:
-    'px-6 py-3 text-xs font-medium uppercase tracking-wider text-gray-800',
-  rowHeaderCell: 'px-6 py-4 font-medium whitespace-nowrap text-gray-800',
-  cell: 'px-6 py-4 whitespace-nowrap text-sm text-gray-600',
-};
-
-export const tableTheme = {
-  primary: primaryTheme,
-  secondary: secondaryTheme,
-};
+export type TableTheme = VariantProps<typeof tableTheme>;
diff --git a/packages/frontend/src/components/shared/Table/Table.tsx b/packages/frontend/src/components/shared/Table/Table.tsx
index b04128f..258676c 100644
--- a/packages/frontend/src/components/shared/Table/Table.tsx
+++ b/packages/frontend/src/components/shared/Table/Table.tsx
@@ -3,12 +3,8 @@ import { tableTheme } from './Table.theme';
 
 type TableComponentProps = {
   children: React.ReactNode;
-  variant?: keyof typeof tableTheme;
 };
 
-const useTheme = (variant: 'primary' | 'secondary' = 'primary') =>
-  tableTheme[variant];
-
 const Table: React.FC<TableComponentProps> & {
   Header: typeof Header;
   Body: typeof Body;
@@ -16,44 +12,39 @@ const Table: React.FC<TableComponentProps> & {
   ColumnHeaderCell: typeof ColumnHeaderCell;
   RowHeaderCell: typeof RowHeaderCell;
   Cell: typeof Cell;
-} = ({ children, variant = 'primary' }) => {
-  const theme = useTheme(variant);
-  return <table className={theme.base}>{children}</table>;
+} = ({ children }) => {
+  const theme = tableTheme();
+  return <table className={theme.root()}>{children}</table>;
 };
 
-const Header: React.FC<TableComponentProps> = ({ children, variant }) => {
-  const theme = useTheme(variant);
-  return <thead className={theme.header}>{children}</thead>;
+const Header: React.FC<TableComponentProps> = ({ children }) => {
+  const theme = tableTheme();
+  return <thead className={theme.header()}>{children}</thead>;
 };
 
 const Body: React.FC<TableComponentProps> = ({ children }) => {
-  return <tbody>{children}</tbody>;
+  const theme = tableTheme();
+  return <tbody className={theme.body()}>{children}</tbody>;
 };
 
-const Row: React.FC<TableComponentProps> = ({ children, variant }) => {
-  const theme = useTheme(variant);
-  return <tr className={theme.row}>{children}</tr>;
+const Row: React.FC<TableComponentProps> = ({ children }) => {
+  const theme = tableTheme();
+  return <tr className={theme.row()}>{children}</tr>;
 };
 
-const ColumnHeaderCell: React.FC<TableComponentProps> = ({
-  children,
-  variant,
-}) => {
-  const theme = useTheme(variant);
-  return <th className={theme.columnHeaderCell}>{children}</th>;
+const ColumnHeaderCell: React.FC<TableComponentProps> = ({ children }) => {
+  const theme = tableTheme();
+  return <th className={theme.columnHeaderCell()}>{children}</th>;
 };
 
-const RowHeaderCell: React.FC<TableComponentProps> = ({
-  children,
-  variant,
-}) => {
-  const theme = useTheme(variant);
-  return <th className={theme.rowHeaderCell}>{children}</th>;
+const RowHeaderCell: React.FC<TableComponentProps> = ({ children }) => {
+  const theme = tableTheme();
+  return <th className={theme.rowHeaderCell()}>{children}</th>;
 };
 
-const Cell: React.FC<TableComponentProps> = ({ children, variant }) => {
-  const theme = useTheme(variant);
-  return <td className={theme.cell}>{children}</td>;
+const Cell: React.FC<TableComponentProps> = ({ children }) => {
+  const theme = tableTheme();
+  return <td className={theme.cell()}>{children}</td>;
 };
 
 Table.Header = Header;