Move Table component to components/ui, add Storybook

airbyte-webapp/src/components/EntityTable/ConnectionTable.tsx

@@ -5,7 +5,7 @@ import { useNavigate } from "react-router-dom";
 import { CellProps } from "react-table";
 import styled from "styled-components";
 
-import Table from "components/Table";
+import { Table } from "components/ui/Table";
 
 import { ConnectionScheduleType } from "core/request/AirbyteClient";
 import { FeatureItem, useFeature } from "hooks/services/Feature";

airbyte-webapp/src/components/EntityTable/ImplementationTable.tsx

@@ -4,7 +4,7 @@ import { FormattedMessage } from "react-intl";
 import { useNavigate } from "react-router-dom";
 import { CellProps } from "react-table";
 
-import Table from "components/Table";
+import { Table } from "components/ui/Table";
 
 import { useQuery } from "hooks/useQuery";
 

airbyte-webapp/src/components/Table/Table.tsx → airbyte-webapp/src/components/ui/Table/Table.tsx

@@ -9,24 +9,24 @@ interface PaddingProps {
   right?: number;
 }
 
-type IHeaderProps = {
+interface HeaderProps extends ColumnInstance<Record<string, unknown>> {
   headerHighlighted?: boolean;
   collapse?: boolean;
   customWidth?: number;
   customPadding?: PaddingProps;
-} & ColumnInstance<Record<string, unknown>>;
+}
 
-type ICellProps = {
-  column: IHeaderProps;
-} & Cell;
+interface CellProps extends Cell {
+  column: HeaderProps;
+}
 
-type IThProps = {
+interface TableHeaderProps extends React.ThHTMLAttributes<HTMLTableHeaderCellElement> {
   highlighted?: boolean;
   collapse?: boolean;
   customWidth?: number;
   customPadding?: PaddingProps;
   light?: boolean;
-} & React.ThHTMLAttributes<HTMLTableHeaderCellElement>;
+}
 
 const TableView = styled(Card).attrs({ as: "table" })<{ light?: boolean }>`
   border-spacing: 0;
@@ -77,7 +77,7 @@ const Td = styled.td<{
   }
 `;
 
-const Th = styled.th<IThProps>`
+const Th = styled.th<TableHeaderProps>`
   background: ${({ theme, light }) => (light ? "none" : theme.textColor)};
   padding: ${({ customPadding }) => `9px ${customPadding?.right ?? 13}px 10px ${customPadding?.left ?? 13}px`};
   text-align: left;
@@ -100,9 +100,9 @@ const Th = styled.th<IThProps>`
   }
 `;
 
-interface IProps {
+interface TableProps {
   light?: boolean;
-  columns: Array<IHeaderProps | Column<Record<string, unknown>>>;
+  columns: Array<HeaderProps | Column<Record<string, unknown>>>;
   erroredRows?: boolean;
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   data: any[];
@@ -112,7 +112,7 @@ interface IProps {
   sortBy?: Array<SortingRule<any>>;
 }
 
-const Table: React.FC<IProps> = ({ columns, data, onClickRow, erroredRows, sortBy, light }) => {
+export const Table: React.FC<TableProps> = memo(({ columns, data, onClickRow, erroredRows, sortBy, light }) => {
   const [plugins, config] = useMemo(() => {
     const pl = [];
     const plConfig: Record<string, unknown> = {};
@@ -137,7 +137,7 @@ const Table: React.FC<IProps> = ({ columns, data, onClickRow, erroredRows, sortB
       <thead>
         {headerGroups.map((headerGroup, key) => (
           <tr {...headerGroup.getHeaderGroupProps()} key={`table-header-${key}`}>
-            {headerGroup.headers.map((column: IHeaderProps, columnKey) => (
+            {headerGroup.headers.map((column: HeaderProps, columnKey) => (
               <Th
                 {...column.getHeaderProps()}
                 highlighted={column.headerHighlighted}
@@ -164,7 +164,7 @@ const Table: React.FC<IProps> = ({ columns, data, onClickRow, erroredRows, sortB
               onClick={() => onClickRow?.(row.original)}
               erroredRows={erroredRows && !!row.original.error}
             >
-              {row.cells.map((cell: ICellProps, key) => {
+              {row.cells.map((cell: CellProps, key) => {
                 return (
                   <Td
                     {...cell.getCellProps()}
@@ -183,6 +183,4 @@ const Table: React.FC<IProps> = ({ columns, data, onClickRow, erroredRows, sortB
       </tbody>
     </TableView>
   );
-};
-
-export default memo(Table);
+});

airbyte-webapp/src/components/ui/Table/index.stories.tsx

@@ -0,0 +1,44 @@
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+import { CellProps } from "react-table";
+
+import { Table } from "./Table";
+
+export default {
+  title: "UI/Table",
+  component: Table,
+  argTypes: {},
+} as ComponentMeta<typeof Table>;
+
+const Template: ComponentStory<typeof Table> = (args) => <Table {...args} />;
+
+interface Item {
+  name: string;
+  value: number;
+}
+
+const data: Item[] = [
+  { name: "2017", value: 100 },
+  { name: "2018", value: 300 },
+  { name: "2019", value: 500 },
+  { name: "2020", value: 400 },
+  { name: "2021", value: 200 },
+];
+
+const columns = [
+  {
+    Header: "Name",
+    accessor: "name",
+    Cell: ({ cell }: CellProps<Item>) => <strong>{cell.value}</strong>,
+  },
+  {
+    Header: "Value",
+    accessor: "value",
+    Cell: ({ cell }: CellProps<Item>) => <>{cell.value}</>,
+  },
+];
+
+export const Primary = Template.bind({});
+Primary.args = {
+  data,
+  columns,
+};

airbyte-webapp/src/components/ui/Table/index.ts

@@ -0,0 +1 @@
+export * from "./Table";

airbyte-webapp/src/packages/cloud/views/credits/CreditsPage/components/UsagePerConnectionTable.tsx

@@ -7,7 +7,7 @@ import styled from "styled-components";
 
 import SortButton from "components/EntityTable/components/SortButton";
 import { SortOrderEnum } from "components/EntityTable/types";
-import Table from "components/Table";
+import { Table } from "components/ui/Table";
 
 import { useQuery } from "hooks/useQuery";
 import { CreditConsumptionByConnector } from "packages/cloud/lib/domain/cloudWorkspaces/types";

airbyte-webapp/src/packages/cloud/views/users/UsersSettingsView/UsersSettingsView.tsx

@@ -4,7 +4,7 @@ import { CellProps } from "react-table";
 import { useToggle } from "react-use";
 
 import { Button, H5, LoadingButton } from "components";
-import Table from "components/Table";
+import { Table } from "components/ui/Table";
 
 import { useTrackPage, PageTrackingCodes } from "hooks/services/Analytics";
 import { useConfirmationModalService } from "hooks/services/ConfirmationModal";

airbyte-webapp/src/pages/SettingsPage/pages/ConnectorsPage/components/ConnectorsView.tsx

@@ -3,7 +3,7 @@ import { FormattedMessage } from "react-intl";
 import { CellProps } from "react-table";
 
 import HeadTitle from "components/HeadTitle";
-import Table from "components/Table";
+import { Table } from "components/ui/Table";
 
 import { Connector, ConnectorDefinition } from "core/domain/connector";
 import { DestinationDefinitionRead, SourceDefinitionRead } from "core/request/AirbyteClient";