From b6bd15b522161f5c86077f521b2e367f94e6702d Mon Sep 17 00:00:00 2001
From: Jordan Moore <jordanmooree1@gmail.com>
Date: Thu, 11 Aug 2022 18:32:03 +0000
Subject: [PATCH 1/9] feat: implement basic functionality of table component

---
 tools/ui-components/src/base.css              | 15 ++++
 tools/ui-components/src/table/index.ts        |  3 +
 .../ui-components/src/table/table.stories.tsx | 87 +++++++++++++++++++
 tools/ui-components/src/table/table.test.tsx  | 10 +++
 tools/ui-components/src/table/table.tsx       | 59 +++++++++++++
 tools/ui-components/src/table/types.ts        | 14 +++
 6 files changed, 188 insertions(+)
 create mode 100644 tools/ui-components/src/table/index.ts
 create mode 100644 tools/ui-components/src/table/table.stories.tsx
 create mode 100644 tools/ui-components/src/table/table.test.tsx
 create mode 100644 tools/ui-components/src/table/table.tsx
 create mode 100644 tools/ui-components/src/table/types.ts

diff --git a/tools/ui-components/src/base.css b/tools/ui-components/src/base.css
index 5ab1e20263e470..b431484a9bf787 100644
--- a/tools/ui-components/src/base.css
+++ b/tools/ui-components/src/base.css
@@ -7,6 +7,21 @@
     @apply underline;
   }
 }
+@layer components {
+  /* Table component */
+  .bordered > thead > tr > th,
+  .bordered > tbody > tr > th,
+  .bordered > tfoot > tr > th,
+  .bordered > thead > tr > td,
+  .bordered > tbody > tr > td,
+  .bordered > tfoot > tr > td {
+    border: 1px solid #ddd;
+  }
+  .table-hover > tbody > tr:hover {
+    background-color: #f5f5f5;
+    /* color: black; -- Used for storybook use case only */
+  }
+}
 
 @tailwind components;
 @tailwind utilities;
diff --git a/tools/ui-components/src/table/index.ts b/tools/ui-components/src/table/index.ts
new file mode 100644
index 00000000000000..6513d7ac4d49a3
--- /dev/null
+++ b/tools/ui-components/src/table/index.ts
@@ -0,0 +1,3 @@
+
+export { Table } from './table';
+export type { TableProps } from './types';
diff --git a/tools/ui-components/src/table/table.stories.tsx b/tools/ui-components/src/table/table.stories.tsx
new file mode 100644
index 00000000000000..9e6add4b719e51
--- /dev/null
+++ b/tools/ui-components/src/table/table.stories.tsx
@@ -0,0 +1,87 @@
+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']
+    }
+  },
+  argTypes: {
+    variant: {
+      options: ['light', 'dark']
+    },
+    bordered: {
+      options: [true, false],
+      control: { type: 'radio' }
+    },
+    striped: {
+      options: [true, false],
+      control: { type: 'radio' }
+    },
+    hover: {
+      options: [true, false],
+      control: { type: 'radio' }
+    },
+    borderless: {
+      options: [true, false],
+      control: { type: 'radio'}, 
+      // Used to avoid conflict with borders
+      if: {arg: 'bordered', truthy: false} 
+    },
+    size: {
+      options: ['small', 'medium', 'large']
+    }
+    
+  }
+  
+};
+
+const Template: Story<TableProps> = args => (
+  <Table {...args}>{exampleTable}</Table>
+);
+export const Default = Template.bind({});
+Default.args = {
+  // default props go here
+  bordered: true,
+  size: 'medium',
+  variant: 'light'
+};
+
+export default story;
diff --git a/tools/ui-components/src/table/table.test.tsx b/tools/ui-components/src/table/table.test.tsx
new file mode 100644
index 00000000000000..baa42904973b17
--- /dev/null
+++ b/tools/ui-components/src/table/table.test.tsx
@@ -0,0 +1,10 @@
+
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import { Table } from '.';
+
+describe('<Table />', () => {
+  it('should render correctly', () => {});
+});
diff --git a/tools/ui-components/src/table/table.tsx b/tools/ui-components/src/table/table.tsx
new file mode 100644
index 00000000000000..5b02c3c0ce3918
--- /dev/null
+++ b/tools/ui-components/src/table/table.tsx
@@ -0,0 +1,59 @@
+import React from 'react';
+import '../../../../client/src/components/layouts/global.css'
+
+import { TableProps, TableVariant } from './types';
+
+const defaultClassNames = ['table','table-auto', 'w-full', 'border-collapse',
+'text-left', 'bg-transparent'];
+const MAX_MOBILE_WIDTH = 767;
+
+const computeWindowSize = window.innerWidth <= MAX_MOBILE_WIDTH
+
+const variantClasses: Record<TableVariant, string> = {
+  light: 'bg-light-theme-background',
+  dark: 'bg-dark-theme-background text-gray-0'
+}
+
+const computeClassNames = (size: string) => {
+  switch (size) {
+    case 'large':
+      return 'text-lg'
+    case 'small':
+      return 'text-sm'
+    // default is medium
+    default:
+      return 'text-md'
+  }
+}
+
+export const Table = React.forwardRef<HTMLTableElement, TableProps>(
+  (
+    { borderless, bordered, className, hover, striped, responsive, variant, size, ...props },
+    ref
+  ) => {
+    props.cellPadding = 10 // Default cell padding for visual clarity in Storybook
+    
+    if (borderless && bordered) bordered = false;
+
+    const borderClass = bordered ? "bordered" : ""
+    const stripedClass = striped ? "table-striped" : ""
+    const hoverClass = hover ? "table-hover" : ""
+
+    const classes = [...defaultClassNames, borderClass, stripedClass, computeClassNames(size || ''), hoverClass].join(' ');
+
+
+    const table = <table {...props} ref={ref} className={classes}/>;
+
+    if (responsive) {
+      let responsiveClass = computeWindowSize ? 'sm' : 'lg';
+      return <div className={responsiveClass}>{table}</div>
+    }
+
+    // For storybook use cases. Table should remain transparent to the background color
+    // if (variant == 'light') {
+    //   return <div className={variantClasses[variant]}>{table}</div>
+    // } else return <div className={variantClasses[variant]}>{table}</div>
+
+    return table;
+  }
+);
diff --git a/tools/ui-components/src/table/types.ts b/tools/ui-components/src/table/types.ts
new file mode 100644
index 00000000000000..833e139c11dc3b
--- /dev/null
+++ b/tools/ui-components/src/table/types.ts
@@ -0,0 +1,14 @@
+import React from "react";
+
+export type TableVariant = 'light' | 'dark';
+
+export interface TableProps extends React.TableHTMLAttributes<HTMLTableElement> {
+  bordered?: boolean;
+  borderless?: boolean;
+  className?: string;
+  hover?: boolean;
+  size?: string;
+  striped?: boolean | string;
+  variant?: TableVariant;
+  responsive?: boolean;
+}

From 25141baa69673c65d66c846ed2e706a7d98ba5b9 Mon Sep 17 00:00:00 2001
From: Jordan Moore <jordanmooree1@gmail.com>
Date: Fri, 12 Aug 2022 18:13:43 +0000
Subject: [PATCH 2/9] fix: update unused vars in component

---
 tools/ui-components/src/table/index.ts        |  1 -
 .../ui-components/src/table/table.stories.tsx |  6 +-
 tools/ui-components/src/table/table.test.tsx  | 10 ---
 tools/ui-components/src/table/table.tsx       | 64 +++++++++++--------
 tools/ui-components/src/table/types.ts        |  5 +-
 5 files changed, 44 insertions(+), 42 deletions(-)
 delete mode 100644 tools/ui-components/src/table/table.test.tsx

diff --git a/tools/ui-components/src/table/index.ts b/tools/ui-components/src/table/index.ts
index 6513d7ac4d49a3..083de52f9917a9 100644
--- a/tools/ui-components/src/table/index.ts
+++ b/tools/ui-components/src/table/index.ts
@@ -1,3 +1,2 @@
-
 export { Table } from './table';
 export type { TableProps } from './types';
diff --git a/tools/ui-components/src/table/table.stories.tsx b/tools/ui-components/src/table/table.stories.tsx
index 9e6add4b719e51..bbeb14d0841366 100644
--- a/tools/ui-components/src/table/table.stories.tsx
+++ b/tools/ui-components/src/table/table.stories.tsx
@@ -61,16 +61,14 @@ const story = {
     },
     borderless: {
       options: [true, false],
-      control: { type: 'radio'}, 
+      control: { type: 'radio' },
       // Used to avoid conflict with borders
-      if: {arg: 'bordered', truthy: false} 
+      if: { arg: 'bordered', truthy: false }
     },
     size: {
       options: ['small', 'medium', 'large']
     }
-    
   }
-  
 };
 
 const Template: Story<TableProps> = args => (
diff --git a/tools/ui-components/src/table/table.test.tsx b/tools/ui-components/src/table/table.test.tsx
deleted file mode 100644
index baa42904973b17..00000000000000
--- a/tools/ui-components/src/table/table.test.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-
-import React from 'react';
-import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-
-import { Table } from '.';
-
-describe('<Table />', () => {
-  it('should render correctly', () => {});
-});
diff --git a/tools/ui-components/src/table/table.tsx b/tools/ui-components/src/table/table.tsx
index 5b02c3c0ce3918..ff491b33b15f5c 100644
--- a/tools/ui-components/src/table/table.tsx
+++ b/tools/ui-components/src/table/table.tsx
@@ -1,55 +1,67 @@
 import React from 'react';
-import '../../../../client/src/components/layouts/global.css'
+import '../../../../client/src/components/layouts/global.css';
 
-import { TableProps, TableVariant } from './types';
+import { TableProps } from './types';
 
-const defaultClassNames = ['table','table-auto', 'w-full', 'border-collapse',
-'text-left', 'bg-transparent'];
+const defaultClassNames = [
+  'table',
+  'table-auto',
+  'w-full',
+  'border-collapse',
+  'text-left',
+  'bg-transparent'
+];
 const MAX_MOBILE_WIDTH = 767;
 
-const computeWindowSize = window.innerWidth <= MAX_MOBILE_WIDTH
+const computeWindowSize = window.innerWidth <= MAX_MOBILE_WIDTH;
 
-const variantClasses: Record<TableVariant, string> = {
-  light: 'bg-light-theme-background',
-  dark: 'bg-dark-theme-background text-gray-0'
-}
+// const variantClasses: Record<TableVariant, string> = {
+//   light: 'bg-light-theme-background',
+//   dark: 'bg-dark-theme-background text-gray-0'
+// }
 
 const computeClassNames = (size: string) => {
   switch (size) {
     case 'large':
-      return 'text-lg'
+      return 'text-lg';
     case 'small':
-      return 'text-sm'
+      return 'text-sm';
     // default is medium
     default:
-      return 'text-md'
+      return 'text-md';
   }
-}
+};
 
 export const Table = React.forwardRef<HTMLTableElement, TableProps>(
   (
-    { borderless, bordered, className, hover, striped, responsive, variant, size, ...props },
+    { borderless, bordered, hover, striped, responsive, size, ...props },
     ref
   ) => {
-    props.cellPadding = 10 // Default cell padding for visual clarity in Storybook
-    
-    if (borderless && bordered) bordered = false;
+    props.cellPadding = 10; // Default cell padding for visual clarity in Storybook
 
-    const borderClass = bordered ? "bordered" : ""
-    const stripedClass = striped ? "table-striped" : ""
-    const hoverClass = hover ? "table-hover" : ""
+    if (borderless && bordered) bordered = false;
 
-    const classes = [...defaultClassNames, borderClass, stripedClass, computeClassNames(size || ''), hoverClass].join(' ');
+    const borderClass = bordered ? 'bordered' : '';
+    const stripedClass = striped ? 'table-striped' : '';
+    const hoverClass = hover ? 'table-hover' : '';
 
+    const classes = [
+      ...defaultClassNames,
+      borderClass,
+      stripedClass,
+      computeClassNames(size || ''),
+      hoverClass
+    ].join(' ');
 
-    const table = <table {...props} ref={ref} className={classes}/>;
+    const table = <table {...props} ref={ref} className={classes} />;
 
     if (responsive) {
-      let responsiveClass = computeWindowSize ? 'sm' : 'lg';
-      return <div className={responsiveClass}>{table}</div>
+      const responsiveClass = computeWindowSize ? 'sm' : 'lg';
+      return <div className={responsiveClass}>{table}</div>;
     }
 
-    // For storybook use cases. Table should remain transparent to the background color
+    // For storybook use cases. Table should remain transparent to the background color add @param of 'variant'
+
     // if (variant == 'light') {
     //   return <div className={variantClasses[variant]}>{table}</div>
     // } else return <div className={variantClasses[variant]}>{table}</div>
@@ -57,3 +69,5 @@ export const Table = React.forwardRef<HTMLTableElement, TableProps>(
     return table;
   }
 );
+
+Table.displayName = 'Table';
diff --git a/tools/ui-components/src/table/types.ts b/tools/ui-components/src/table/types.ts
index 833e139c11dc3b..c5897d430ca95e 100644
--- a/tools/ui-components/src/table/types.ts
+++ b/tools/ui-components/src/table/types.ts
@@ -1,8 +1,9 @@
-import React from "react";
+import React from 'react';
 
 export type TableVariant = 'light' | 'dark';
 
-export interface TableProps extends React.TableHTMLAttributes<HTMLTableElement> {
+export interface TableProps
+  extends React.TableHTMLAttributes<HTMLTableElement> {
   bordered?: boolean;
   borderless?: boolean;
   className?: string;

From 1718f8d1d74e87c997093482e018632baa3b1bf8 Mon Sep 17 00:00:00 2001
From: Jordan Moore <jordanmooree1@gmail.com>
Date: Mon, 15 Aug 2022 20:00:58 +0000
Subject: [PATCH 3/9] fix: add missing props and fix striped and size props

---
 tools/ui-components/src/base.css              | 15 -----
 .../ui-components/src/table/table.stories.tsx | 13 +++-
 tools/ui-components/src/table/table.tsx       | 64 ++++++++++++-------
 tools/ui-components/src/table/types.ts        |  6 +-
 tools/ui-components/tailwind.config.js        |  3 +
 5 files changed, 57 insertions(+), 44 deletions(-)

diff --git a/tools/ui-components/src/base.css b/tools/ui-components/src/base.css
index b431484a9bf787..5ab1e20263e470 100644
--- a/tools/ui-components/src/base.css
+++ b/tools/ui-components/src/base.css
@@ -7,21 +7,6 @@
     @apply underline;
   }
 }
-@layer components {
-  /* Table component */
-  .bordered > thead > tr > th,
-  .bordered > tbody > tr > th,
-  .bordered > tfoot > tr > th,
-  .bordered > thead > tr > td,
-  .bordered > tbody > tr > td,
-  .bordered > tfoot > tr > td {
-    border: 1px solid #ddd;
-  }
-  .table-hover > tbody > tr:hover {
-    background-color: #f5f5f5;
-    /* color: black; -- Used for storybook use case only */
-  }
-}
 
 @tailwind components;
 @tailwind utilities;
diff --git a/tools/ui-components/src/table/table.stories.tsx b/tools/ui-components/src/table/table.stories.tsx
index bbeb14d0841366..320d6218ee8735 100644
--- a/tools/ui-components/src/table/table.stories.tsx
+++ b/tools/ui-components/src/table/table.stories.tsx
@@ -40,12 +40,13 @@ const story = {
   component: Table,
   parameters: {
     controls: {
-      include: ['variant', 'size', 'bordered', 'borderless', 'hover', 'striped']
+      include: ['variant', 'size', 'bordered', 'borderless', 'hover', 'striped', 'condensed']
     }
   },
   argTypes: {
     variant: {
-      options: ['light', 'dark']
+      options: ['light', 'dark'],
+      control: { type: 'radio' }
     },
     bordered: {
       options: [true, false],
@@ -55,6 +56,10 @@ const story = {
       options: [true, false],
       control: { type: 'radio' }
     },
+    condensed: {
+      options: [true, false],
+      control: { type: 'radio' }
+    },
     hover: {
       options: [true, false],
       control: { type: 'radio' }
@@ -79,7 +84,9 @@ Default.args = {
   // default props go here
   bordered: true,
   size: 'medium',
-  variant: 'light'
+  variant: 'light',
+  condensed: false,
+  striped: false
 };
 
 export default story;
diff --git a/tools/ui-components/src/table/table.tsx b/tools/ui-components/src/table/table.tsx
index ff491b33b15f5c..9206bfcb3abbb5 100644
--- a/tools/ui-components/src/table/table.tsx
+++ b/tools/ui-components/src/table/table.tsx
@@ -15,42 +15,66 @@ const MAX_MOBILE_WIDTH = 767;
 
 const computeWindowSize = window.innerWidth <= MAX_MOBILE_WIDTH;
 
-// const variantClasses: Record<TableVariant, string> = {
-//   light: 'bg-light-theme-background',
-//   dark: 'bg-dark-theme-background text-gray-0'
-// }
+const variantClasses: Record<string, string> = {
+  light: 'table-children:bg-light-theme-background',
+  dark: 'table-children:bg-dark-theme-background text-gray-0'
+};
 
-const computeClassNames = (size: string) => {
+const computeSizeName = (size: string) => {
   switch (size) {
     case 'large':
-      return 'text-lg';
+      return 'table-children:text-lg';
     case 'small':
-      return 'text-sm';
+      return 'table-children:text-sm';
     // default is medium
     default:
-      return 'text-md';
+      return 'table-children:text-md';
   }
 };
 
+    // TODO: Handle hover colors for striped in light and dark mode
+const stripedClass = (hover: boolean, striped: boolean, variant: string) => {
+  if (hover && striped && variant == 'light')
+    return 'table-striped:bg-gray-100';
+  else if (hover && striped && variant == 'dark')
+    return 'table-striped:bg-gray-150';
+  else return striped ? 'table-striped:bg-gray-450' : '';
+};
+
 export const Table = React.forwardRef<HTMLTableElement, TableProps>(
   (
-    { borderless, bordered, hover, striped, responsive, size, ...props },
+    {
+      borderless,
+      bordered,
+      hover,
+      striped,
+      responsive,
+      size,
+      condensed,
+      variant,
+      ...props
+    },
     ref
   ) => {
-    props.cellPadding = 10; // Default cell padding for visual clarity in Storybook
-
     if (borderless && bordered) bordered = false;
 
-    const borderClass = bordered ? 'bordered' : '';
-    const stripedClass = striped ? 'table-striped' : '';
-    const hoverClass = hover ? 'table-hover' : '';
+    const borderClass = bordered ? 'table-children:border-1' : '';
+    const hoverClass =
+      hover && variant == 'dark'
+        ? 'table-hover:bg-gray-450'
+        : hover && variant == 'light'
+        ? 'table-hover:bg-gray-150'
+        : '';
+    const condensedClass = condensed ? 'table-children:p-1.5' : 'table-children:p-2.5';
 
     const classes = [
       ...defaultClassNames,
       borderClass,
-      stripedClass,
-      computeClassNames(size || ''),
-      hoverClass
+      condensedClass,
+      stripedClass(hover || false, striped || false, variant || ''),
+      computeSizeName(size || ''),
+      hoverClass,
+      variantClasses[variant || '']
     ].join(' ');
 
     const table = <table {...props} ref={ref} className={classes} />;
@@ -60,12 +84,6 @@ export const Table = React.forwardRef<HTMLTableElement, TableProps>(
       return <div className={responsiveClass}>{table}</div>;
     }
 
-    // For storybook use cases. Table should remain transparent to the background color add @param of 'variant'
-
-    // if (variant == 'light') {
-    //   return <div className={variantClasses[variant]}>{table}</div>
-    // } else return <div className={variantClasses[variant]}>{table}</div>
-
     return table;
   }
 );
diff --git a/tools/ui-components/src/table/types.ts b/tools/ui-components/src/table/types.ts
index c5897d430ca95e..dc6592f3f8d4b4 100644
--- a/tools/ui-components/src/table/types.ts
+++ b/tools/ui-components/src/table/types.ts
@@ -1,15 +1,15 @@
 import React from 'react';
 
-export type TableVariant = 'light' | 'dark';
 
 export interface TableProps
   extends React.TableHTMLAttributes<HTMLTableElement> {
   bordered?: boolean;
   borderless?: boolean;
   className?: string;
+  variant?: 'light' | 'dark';
+  condensed?: boolean;
   hover?: boolean;
   size?: string;
-  striped?: boolean | string;
-  variant?: TableVariant;
+  striped?: boolean;
   responsive?: boolean;
 }
diff --git a/tools/ui-components/tailwind.config.js b/tools/ui-components/tailwind.config.js
index b41d099b8968fb..333123ed5170ce 100644
--- a/tools/ui-components/tailwind.config.js
+++ b/tools/ui-components/tailwind.config.js
@@ -97,6 +97,9 @@ module.exports = {
   plugins: [
     plugin(({ addVariant }) => {
       addVariant('aria-disabled', '&[aria-disabled="true"]');
+      addVariant('table-children', '& *');
+      addVariant('table-hover', '& > tbody > tr:hover > td');
+      addVariant('table-striped', '& > tbody > tr:nth-of-type(odd) > td');
     })
   ]
 };

From a1e8b130b0c0becf5b51072225e425cafee28c7f Mon Sep 17 00:00:00 2001
From: Jordan Moore <jordanmooree1@gmail.com>
Date: Tue, 16 Aug 2022 20:26:26 +0000
Subject: [PATCH 4/9] fix: refactoring, add string for responsive prop

---
 .../ui-components/src/table/table.stories.tsx |  6 ++++-
 tools/ui-components/src/table/table.tsx       | 26 ++++++++++++-------
 tools/ui-components/src/table/types.ts        |  2 +-
 3 files changed, 23 insertions(+), 11 deletions(-)

diff --git a/tools/ui-components/src/table/table.stories.tsx b/tools/ui-components/src/table/table.stories.tsx
index 320d6218ee8735..68e30df6613a7b 100644
--- a/tools/ui-components/src/table/table.stories.tsx
+++ b/tools/ui-components/src/table/table.stories.tsx
@@ -40,7 +40,7 @@ const story = {
   component: Table,
   parameters: {
     controls: {
-      include: ['variant', 'size', 'bordered', 'borderless', 'hover', 'striped', 'condensed']
+      include: ['variant', 'size', 'bordered', 'borderless', 'hover', 'striped', 'condensed', 'responsive']
     }
   },
   argTypes: {
@@ -64,6 +64,10 @@ const story = {
       options: [true, false],
       control: { type: 'radio' }
     },
+    responsive: {
+      options: [true, false],
+      control: { type: 'radio' }
+    },
     borderless: {
       options: [true, false],
       control: { type: 'radio' },
diff --git a/tools/ui-components/src/table/table.tsx b/tools/ui-components/src/table/table.tsx
index 9206bfcb3abbb5..c3da1447fca78e 100644
--- a/tools/ui-components/src/table/table.tsx
+++ b/tools/ui-components/src/table/table.tsx
@@ -32,7 +32,7 @@ const computeSizeName = (size: string) => {
   }
 };
 
-    // TODO: Handle hover colors for striped in light and dark mode
+// TODO: Handle hover colors for striped in light and dark mode
 const stripedClass = (hover: boolean, striped: boolean, variant: string) => {
   if (hover && striped && variant == 'light')
     return 'table-striped:bg-gray-100';
@@ -56,16 +56,21 @@ export const Table = React.forwardRef<HTMLTableElement, TableProps>(
     },
     ref
   ) => {
+    const hoverVariantDark = hover && variant == 'dark';
+    const hoverVariantLight = hover && variant == 'light';
+
     if (borderless && bordered) bordered = false;
 
     const borderClass = bordered ? 'table-children:border-1' : '';
-    const hoverClass =
-      hover && variant == 'dark'
-        ? 'table-hover:bg-gray-450'
-        : hover && variant == 'light'
-        ? 'table-hover:bg-gray-150'
-        : '';
-    const condensedClass = condensed ? 'table-children:p-1.5' : 'table-children:p-2.5';
+
+    const hoverClass = hoverVariantDark
+      ? 'table-hover:bg-gray-450'
+      : hoverVariantLight
+      ? 'table-hover:bg-gray-150'
+      : '';
+    const condensedClass = condensed
+      ? 'table-children:p-1.5'
+      : 'table-children:p-2.5';
 
     const classes = [
       ...defaultClassNames,
@@ -80,7 +85,10 @@ export const Table = React.forwardRef<HTMLTableElement, TableProps>(
     const table = <table {...props} ref={ref} className={classes} />;
 
     if (responsive) {
-      const responsiveClass = computeWindowSize ? 'sm' : 'lg';
+      let responsiveClass = computeWindowSize ? 'sm:block' : 'lg:flex-auto';
+      if (typeof responsive === 'string') {
+        responsiveClass = `${responsiveClass}-${responsive}`;
+      }
       return <div className={responsiveClass}>{table}</div>;
     }
 
diff --git a/tools/ui-components/src/table/types.ts b/tools/ui-components/src/table/types.ts
index dc6592f3f8d4b4..9e37c4bbbbdb13 100644
--- a/tools/ui-components/src/table/types.ts
+++ b/tools/ui-components/src/table/types.ts
@@ -11,5 +11,5 @@ export interface TableProps
   hover?: boolean;
   size?: string;
   striped?: boolean;
-  responsive?: boolean;
+  responsive?: boolean | string;
 }

From 22fa77f4873d2391b8a57cd1635bfa5ca8617a48 Mon Sep 17 00:00:00 2001
From: Jordan Moore <jordanmooree1@gmail.com>
Date: Fri, 19 Aug 2022 21:46:23 +0000
Subject: [PATCH 5/9] fix: clean code up a bit

---
 tools/ui-components/src/table/table.tsx | 54 +++++++++++--------------
 1 file changed, 23 insertions(+), 31 deletions(-)

diff --git a/tools/ui-components/src/table/table.tsx b/tools/ui-components/src/table/table.tsx
index c3da1447fca78e..0bc6461ed6edc1 100644
--- a/tools/ui-components/src/table/table.tsx
+++ b/tools/ui-components/src/table/table.tsx
@@ -32,15 +32,6 @@ const computeSizeName = (size: string) => {
   }
 };
 
-// TODO: Handle hover colors for striped in light and dark mode
-const stripedClass = (hover: boolean, striped: boolean, variant: string) => {
-  if (hover && striped && variant == 'light')
-    return 'table-striped:bg-gray-100';
-  else if (hover && striped && variant == 'dark')
-    return 'table-striped:bg-gray-150';
-  else return striped ? 'table-striped:bg-gray-450' : '';
-};
-
 export const Table = React.forwardRef<HTMLTableElement, TableProps>(
   (
     {
@@ -56,33 +47,34 @@ export const Table = React.forwardRef<HTMLTableElement, TableProps>(
     },
     ref
   ) => {
+    const classNames = [...defaultClassNames, variantClasses[variant || ''], computeSizeName(size || '')];
     const hoverVariantDark = hover && variant == 'dark';
     const hoverVariantLight = hover && variant == 'light';
 
     if (borderless && bordered) bordered = false;
 
-    const borderClass = bordered ? 'table-children:border-1' : '';
-
-    const hoverClass = hoverVariantDark
-      ? 'table-hover:bg-gray-450'
-      : hoverVariantLight
-      ? 'table-hover:bg-gray-150'
-      : '';
-    const condensedClass = condensed
-      ? 'table-children:p-1.5'
-      : 'table-children:p-2.5';
-
-    const classes = [
-      ...defaultClassNames,
-      borderClass,
-      condensedClass,
-      stripedClass(hover || false, striped || false, variant || ''),
-      computeSizeName(size || ''),
-      hoverClass,
-      variantClasses[variant || '']
-    ].join(' ');
-
-    const table = <table {...props} ref={ref} className={classes} />;
+    if (bordered) classNames.push('table-children:border-1');
+
+    if (condensed) classNames.push('table-children:p-1.5');
+    else classNames.push('table-children:p-2.5');
+
+    if (hoverVariantDark) classNames.push('table-hover:bg-gray-450');
+    else if (hoverVariantLight) classNames.push('table-hover:bg-gray-150');
+
+    // TODO: Handle hover colors for striped in light and dark mode
+    if (hover && striped && variant == 'light')
+      classNames.push('table-striped:bg-gray-100');
+    else if (hover && striped && variant == 'dark')
+      classNames.push('table-striped:bg-gray-150');
+    else
+      striped
+        ? classNames.push('table-striped:bg-gray-450')
+        : classNames.push('');
+
+
+    const table = (
+      <table {...props} ref={ref} className={classNames.join(' ')} />
+    );
 
     if (responsive) {
       let responsiveClass = computeWindowSize ? 'sm:block' : 'lg:flex-auto';

From 9b1517490a1b44b74eec20a9de15b1042b6d29e0 Mon Sep 17 00:00:00 2001
From: Jordan Moore <jordanmooree1@gmail.com>
Date: Sat, 20 Aug 2022 18:33:23 +0000
Subject: [PATCH 6/9] chore: add additional storybook stories

---
 .../ui-components/src/table/table.stories.tsx | 35 +++++++++++++++----
 1 file changed, 28 insertions(+), 7 deletions(-)

diff --git a/tools/ui-components/src/table/table.stories.tsx b/tools/ui-components/src/table/table.stories.tsx
index 68e30df6613a7b..9bd7d0659720e9 100644
--- a/tools/ui-components/src/table/table.stories.tsx
+++ b/tools/ui-components/src/table/table.stories.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import { Story } from '@storybook/react';
 import { Table, TableProps } from '.';
-
 const exampleTable = (
   <>
     <thead>
@@ -40,7 +39,16 @@ const story = {
   component: Table,
   parameters: {
     controls: {
-      include: ['variant', 'size', 'bordered', 'borderless', 'hover', 'striped', 'condensed', 'responsive']
+      include: [
+        'variant',
+        'size',
+        'bordered',
+        'borderless',
+        'hover',
+        'striped',
+        'condensed',
+        'responsive'
+      ]
     }
   },
   argTypes: {
@@ -81,16 +89,29 @@ const story = {
 };
 
 const Template: Story<TableProps> = args => (
-  <Table {...args}>{exampleTable}</Table>
+  <Table {...args} >{exampleTable}</Table>
 );
 export const Default = Template.bind({});
 Default.args = {
-  // default props go here
-  bordered: true,
   size: 'medium',
+};
+export const Large = Template.bind({});
+Large.args = {
+  size: 'large',
+};
+export const Dark = Template.bind({});
+Dark.args = {
+  variant: 'dark',
+  bordered: true
+};
+export const Light = Template.bind({});
+Light.args = {
   variant: 'light',
-  condensed: false,
-  striped: false
+  bordered: true
+};
+export const Hover = Template.bind({});
+Hover.args = {
+  hover: true
 };
 
 export default story;

From c00eeebd676dc50b192d9f6ce19123b363701035 Mon Sep 17 00:00:00 2001
From: Jordan Moore <jordanmooree1@gmail.com>
Date: Tue, 6 Sep 2022 00:49:30 +0000
Subject: [PATCH 7/9] fix: bring down component to 2 props and update
 background color for striped

---
 tools/ui-components/src/index.ts              |  1 +
 .../ui-components/src/table/table.stories.tsx | 52 +++----------
 tools/ui-components/src/table/table.tsx       | 74 ++-----------------
 tools/ui-components/src/table/types.ts        |  8 --
 tools/ui-components/tailwind.config.js        |  3 +-
 5 files changed, 18 insertions(+), 120 deletions(-)

diff --git a/tools/ui-components/src/index.ts b/tools/ui-components/src/index.ts
index 346caa9d144a22..3adb1653e3b2ac 100644
--- a/tools/ui-components/src/index.ts
+++ b/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';
diff --git a/tools/ui-components/src/table/table.stories.tsx b/tools/ui-components/src/table/table.stories.tsx
index 9bd7d0659720e9..f955b620a65fa9 100644
--- a/tools/ui-components/src/table/table.stories.tsx
+++ b/tools/ui-components/src/table/table.stories.tsx
@@ -52,14 +52,6 @@ const story = {
     }
   },
   argTypes: {
-    variant: {
-      options: ['light', 'dark'],
-      control: { type: 'radio' }
-    },
-    bordered: {
-      options: [true, false],
-      control: { type: 'radio' }
-    },
     striped: {
       options: [true, false],
       control: { type: 'radio' }
@@ -67,51 +59,25 @@ const story = {
     condensed: {
       options: [true, false],
       control: { type: 'radio' }
-    },
-    hover: {
-      options: [true, false],
-      control: { type: 'radio' }
-    },
-    responsive: {
-      options: [true, false],
-      control: { type: 'radio' }
-    },
-    borderless: {
-      options: [true, false],
-      control: { type: 'radio' },
-      // Used to avoid conflict with borders
-      if: { arg: 'bordered', truthy: false }
-    },
-    size: {
-      options: ['small', 'medium', 'large']
     }
   }
 };
 
 const Template: Story<TableProps> = args => (
-  <Table {...args} >{exampleTable}</Table>
+  <Table {...args}>{exampleTable}</Table>
 );
 export const Default = Template.bind({});
 Default.args = {
-  size: 'medium',
-};
-export const Large = Template.bind({});
-Large.args = {
-  size: 'large',
-};
-export const Dark = Template.bind({});
-Dark.args = {
-  variant: 'dark',
-  bordered: true
+  condensed: false,
+  striped: false
 };
-export const Light = Template.bind({});
-Light.args = {
-  variant: 'light',
-  bordered: true
+export const Condensed = Template.bind({});
+Condensed.args = {
+  condensed: true
 };
-export const Hover = Template.bind({});
-Hover.args = {
-  hover: true
+export const Striped = Template.bind({});
+Striped.args = {
+  striped: true
 };
 
 export default story;
diff --git a/tools/ui-components/src/table/table.tsx b/tools/ui-components/src/table/table.tsx
index 0bc6461ed6edc1..cfbd26f46419d9 100644
--- a/tools/ui-components/src/table/table.tsx
+++ b/tools/ui-components/src/table/table.tsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import '../../../../client/src/components/layouts/global.css';
 
 import { TableProps } from './types';
 
@@ -7,83 +6,24 @@ const defaultClassNames = [
   'table',
   'table-auto',
   'w-full',
+  'max-w-full',
   'border-collapse',
-  'text-left',
-  'bg-transparent'
+  'text-left'
 ];
-const MAX_MOBILE_WIDTH = 767;
-
-const computeWindowSize = window.innerWidth <= MAX_MOBILE_WIDTH;
-
-const variantClasses: Record<string, string> = {
-  light: 'table-children:bg-light-theme-background',
-  dark: 'table-children:bg-dark-theme-background text-gray-0'
-};
-
-const computeSizeName = (size: string) => {
-  switch (size) {
-    case 'large':
-      return 'table-children:text-lg';
-    case 'small':
-      return 'table-children:text-sm';
-    // default is medium
-    default:
-      return 'table-children:text-md';
-  }
-};
 
 export const Table = React.forwardRef<HTMLTableElement, TableProps>(
-  (
-    {
-      borderless,
-      bordered,
-      hover,
-      striped,
-      responsive,
-      size,
-      condensed,
-      variant,
-      ...props
-    },
-    ref
-  ) => {
-    const classNames = [...defaultClassNames, variantClasses[variant || ''], computeSizeName(size || '')];
-    const hoverVariantDark = hover && variant == 'dark';
-    const hoverVariantLight = hover && variant == 'light';
-
-    if (borderless && bordered) bordered = false;
+  ({ striped, condensed, ...props }, ref) => {
+    const classNames = [...defaultClassNames];
 
-    if (bordered) classNames.push('table-children:border-1');
-
-    if (condensed) classNames.push('table-children:p-1.5');
-    else classNames.push('table-children:p-2.5');
-
-    if (hoverVariantDark) classNames.push('table-hover:bg-gray-450');
-    else if (hoverVariantLight) classNames.push('table-hover:bg-gray-150');
-
-    // TODO: Handle hover colors for striped in light and dark mode
-    if (hover && striped && variant == 'light')
-      classNames.push('table-striped:bg-gray-100');
-    else if (hover && striped && variant == 'dark')
-      classNames.push('table-striped:bg-gray-150');
-    else
-      striped
-        ? classNames.push('table-striped:bg-gray-450')
-        : classNames.push('');
+    if (condensed) classNames.push('table-children:p-1');
+    else classNames.push('table-children:p-2');
 
+    if (striped) classNames.push('table-striped:bg-background-tertiary');
 
     const table = (
       <table {...props} ref={ref} className={classNames.join(' ')} />
     );
 
-    if (responsive) {
-      let responsiveClass = computeWindowSize ? 'sm:block' : 'lg:flex-auto';
-      if (typeof responsive === 'string') {
-        responsiveClass = `${responsiveClass}-${responsive}`;
-      }
-      return <div className={responsiveClass}>{table}</div>;
-    }
-
     return table;
   }
 );
diff --git a/tools/ui-components/src/table/types.ts b/tools/ui-components/src/table/types.ts
index 9e37c4bbbbdb13..c8d8f56d0b667f 100644
--- a/tools/ui-components/src/table/types.ts
+++ b/tools/ui-components/src/table/types.ts
@@ -1,15 +1,7 @@
 import React from 'react';
 
-
 export interface TableProps
   extends React.TableHTMLAttributes<HTMLTableElement> {
-  bordered?: boolean;
-  borderless?: boolean;
-  className?: string;
-  variant?: 'light' | 'dark';
   condensed?: boolean;
-  hover?: boolean;
-  size?: string;
   striped?: boolean;
-  responsive?: boolean | string;
 }
diff --git a/tools/ui-components/tailwind.config.js b/tools/ui-components/tailwind.config.js
index 333123ed5170ce..5aea190aa7c6a5 100644
--- a/tools/ui-components/tailwind.config.js
+++ b/tools/ui-components/tailwind.config.js
@@ -98,8 +98,7 @@ module.exports = {
     plugin(({ addVariant }) => {
       addVariant('aria-disabled', '&[aria-disabled="true"]');
       addVariant('table-children', '& *');
-      addVariant('table-hover', '& > tbody > tr:hover > td');
-      addVariant('table-striped', '& > tbody > tr:nth-of-type(odd) > td');
+      addVariant('table-striped', '& > tbody > tr:nth-of-type(odd)');
     })
   ]
 };

From 339f3af4334489f084c1897b02ca9890768726a7 Mon Sep 17 00:00:00 2001
From: Jordan Moore <jordanmooree1@gmail.com>
Date: Sun, 2 Oct 2022 18:28:38 +0000
Subject: [PATCH 8/9] fix: simplify arbitrary variants

---
 tools/ui-components/src/table/table.tsx | 32 +++++++++++++++++--------
 tools/ui-components/tailwind.config.js  |  2 --
 2 files changed, 22 insertions(+), 12 deletions(-)

diff --git a/tools/ui-components/src/table/table.tsx b/tools/ui-components/src/table/table.tsx
index cfbd26f46419d9..a757e6ebcf5c49 100644
--- a/tools/ui-components/src/table/table.tsx
+++ b/tools/ui-components/src/table/table.tsx
@@ -11,19 +11,31 @@ const defaultClassNames = [
   'text-left'
 ];
 
-export const Table = React.forwardRef<HTMLTableElement, TableProps>(
-  ({ striped, condensed, ...props }, ref) => {
-    const classNames = [...defaultClassNames];
-
-    if (condensed) classNames.push('table-children:p-1');
-    else classNames.push('table-children:p-2');
-
-    if (striped) classNames.push('table-striped:bg-background-tertiary');
+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(' ');
+};
 
-    const table = (
-      <table {...props} ref={ref} className={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;
   }
 );
diff --git a/tools/ui-components/tailwind.config.js b/tools/ui-components/tailwind.config.js
index 5aea190aa7c6a5..b41d099b8968fb 100644
--- a/tools/ui-components/tailwind.config.js
+++ b/tools/ui-components/tailwind.config.js
@@ -97,8 +97,6 @@ module.exports = {
   plugins: [
     plugin(({ addVariant }) => {
       addVariant('aria-disabled', '&[aria-disabled="true"]');
-      addVariant('table-children', '& *');
-      addVariant('table-striped', '& > tbody > tr:nth-of-type(odd)');
     })
   ]
 };

From 644c48e17eb70b62e5c8095132428a775498769a Mon Sep 17 00:00:00 2001
From: ahmad abdolsaheb <ahmad.abdolsaheb@gmail.com>
Date: Thu, 27 Oct 2022 17:02:36 +0300
Subject: [PATCH 9/9] feat: clean-up styles

---
 tools/ui-components/src/table/table.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/tools/ui-components/src/table/table.tsx b/tools/ui-components/src/table/table.tsx
index a757e6ebcf5c49..2bb717cea57212 100644
--- a/tools/ui-components/src/table/table.tsx
+++ b/tools/ui-components/src/table/table.tsx
@@ -8,7 +8,9 @@ const defaultClassNames = [
   'w-full',
   'max-w-full',
   'border-collapse',
-  'text-left'
+  'text-left',
+  'text-foreground-tertiary',
+  '[&_th]:font-normal'
 ];
 
 const computeClassNames = ({