feat: add table component

lib/src/components/Table/Table.css.ts

@@ -0,0 +1,32 @@
+import { globalStyle, style, createTheme } from "@vanilla-extract/css";
+import { ITableContainerThemeVars, ITableThemeVars } from "./Table.types";
+
+export const [
+  tableContainerThemeClass,
+  tableContainerThemeVars,
+]: ITableContainerThemeVars = createTheme({
+  customBorderRadius: "4px",
+  customBorderColor: "black",
+});
+
+export const [tableThemeClass, tableThemeVars]: ITableThemeVars = createTheme({
+  customRowHeight: "1",
+  headerAlignment: "left",
+  contentAlignment: "left",
+  customCellPadding: "10px",
+  customStripeColor: "#eee",
+});
+
+export const tableContainerDefaults = style({
+  border: `1px solid ${tableContainerThemeVars.customBorderColor}`,
+  borderRadius: tableContainerThemeVars.customBorderRadius,
+  display: "inline-block",
+  overflow: "auto",
+  maxWidth: "100%",
+  paddingBottom: "10px",
+});
+
+export const tableDefaults = style({
+  borderCollapse: "collapse",
+});
+

lib/src/components/Table/Table.global.styles.css.ts

@@ -0,0 +1,22 @@
+import { globalStyle } from "@vanilla-extract/css";
+import { tableDefaults, tableThemeVars } from "./Table.css";
+
+globalStyle(`${tableDefaults} tr`, {
+  lineHeight: tableThemeVars.customRowHeight,
+});
+
+globalStyle(`${tableDefaults} td, ${tableDefaults} thead th`, {
+  padding: tableThemeVars.customCellPadding,
+});
+
+globalStyle(`${tableDefaults} thead th`, {
+  textAlign: tableThemeVars.headerAlignment as "left" | "right" | "center",
+});
+
+globalStyle(`${tableDefaults} td`, {
+  textAlign: tableThemeVars.contentAlignment as "left" | "right" | "center",
+});
+
+globalStyle(`${tableDefaults}.striped tr:nth-child(even)`, {
+  backgroundColor: tableThemeVars.customStripeColor,
+});

lib/src/components/Table/Table.tsx

@@ -0,0 +1,71 @@
+import { assignInlineVars } from "@vanilla-extract/dynamic";
+import React, { ForwardRefRenderFunction } from "react";
+import {
+  tableContainerDefaults,
+  tableDefaults,
+  tableContainerThemeVars,
+  tableThemeVars,
+  tableContainerThemeClass,
+  tableThemeClass,
+} from "./Table.css";
+import "./Table.global.styles.css";
+import { InitialTableProps } from "./Table.types";
+
+const Table: ForwardRefRenderFunction<HTMLTableElement, InitialTableProps> = (
+  {
+    addBorder = false,
+    borderRadius = "4px",
+    borderColor = "black",
+    rowHeight = "1",
+    alignContent = "left",
+    alignHeading = "left",
+    overrideTableContainerClass = "",
+    overrideTableClass = "",
+    cellPadding = "10px",
+    striped = false,
+    stripeColor = "#eee",
+    children,
+    className,
+    style,
+    ...nativeProps
+  },
+  ref
+) => {
+  const tableContainerInlineVars = assignInlineVars({
+    [tableContainerThemeVars.customBorderRadius]: borderRadius,
+    [tableContainerThemeVars.customBorderColor]: addBorder
+      ? borderColor
+      : "transparent",
+  });
+
+  const tableInlineVars = assignInlineVars({
+    [tableThemeVars.customStripeColor]: striped ? stripeColor : "",
+    [tableThemeVars.customRowHeight]: rowHeight,
+    [tableThemeVars.contentAlignment]: alignContent,
+    [tableThemeVars.headerAlignment]: alignHeading,
+    [tableThemeVars.customCellPadding]: cellPadding,
+  });
+
+  return (
+    <div
+      style={{ ...tableContainerInlineVars, ...(style || {}) }}
+      className={`${tableContainerDefaults} ${tableContainerThemeClass} ${overrideTableContainerClass} ${
+        className || ""
+      }`}
+    >
+      <table
+        ref={ref}
+        style={{ ...tableInlineVars, ...(style || {}) }}
+        className={`${tableDefaults} ${
+          striped && "striped"
+        } ${tableThemeClass} ${overrideTableClass} ${className || ""}`}
+        {...nativeProps}
+      >
+        {children}
+      </table>
+    </div>
+  );
+};
+
+const TableWithRef = React.forwardRef(Table);
+export { TableWithRef as Table };

lib/src/components/Table/Table.types.ts

@@ -0,0 +1,40 @@
+import React from "react";
+
+export interface InitialTableProps
+  extends React.DetailedHTMLProps<
+    React.TableHTMLAttributes<HTMLTableElement>,
+    HTMLTableElement
+  > {
+  children: React.ReactNode;
+  addBorder?: boolean;
+  borderRadius?: string;
+  borderColor?: string;
+  rowHeight?: string;
+  alignContent?: string;
+  alignHeading?: string;
+  cellPadding?: string;
+  striped?: boolean;
+  stripeColor?: string;
+  overrideTableContainerClass?: string;
+  overrideTableClass?: string;
+  className?: string;
+}
+
+export type ITableThemeVars = [
+  string,
+  {
+    customRowHeight: string;
+    headerAlignment: string;
+    contentAlignment: string;
+    customCellPadding: string;
+    customStripeColor: string;
+  }
+];
+
+export type ITableContainerThemeVars = [
+  string,
+  {
+    customBorderRadius: string;
+    customBorderColor: string;
+  }
+];

lib/src/components/Table/TableCaption/TableCaption.tsx

@@ -0,0 +1,24 @@
+import React, { ForwardRefRenderFunction } from "react";
+import { TableCaptionProps } from "./TableCaption.types";
+
+const TableCaption: ForwardRefRenderFunction<
+  HTMLTableCaptionElement,
+  TableCaptionProps
+> = (
+  { children, className, placement = "bottom", style, ...nativeProps },
+  ref
+) => {
+  return (
+    <caption
+      ref={ref}
+      style={{ captionSide: placement, paddingTop: "10px", ...(style || {}) }}
+      className={className}
+      {...nativeProps}
+    >
+      {children}
+    </caption>
+  );
+};
+
+const TableCaptionWithRef = React.forwardRef(TableCaption);
+export { TableCaptionWithRef as TableCaption };

lib/src/components/Table/TableCaption/TableCaption.types.ts

@@ -0,0 +1,8 @@
+interface ITableCaptionProps {
+  children: React.ReactNode;
+  className?: string;
+  placement?: "top" | "bottom";
+}
+
+export type TableCaptionProps = ITableCaptionProps &
+  JSX.IntrinsicElements["caption"];

lib/src/components/Table/Tbody/Tbody.tsx

@@ -0,0 +1,16 @@
+import React, { ForwardRefRenderFunction } from "react";
+import { TBodyProps } from "./Tbody.types";
+
+const Tbody: ForwardRefRenderFunction<HTMLTableSectionElement, TBodyProps> = (
+  { className, children, ...nativeProps },
+  ref
+) => {
+  return (
+    <tbody ref={ref} className={className} {...nativeProps}>
+      {children}
+    </tbody>
+  );
+};
+
+const TBodyWithRef = React.forwardRef(Tbody);
+export { TBodyWithRef as Tbody };

lib/src/components/Table/Tbody/Tbody.types.ts

@@ -0,0 +1,6 @@
+interface ITbodyProps {
+  className?: string;
+  children: React.ReactNode;
+}
+
+export type TBodyProps = ITbodyProps & JSX.IntrinsicElements["tbody"];

lib/src/components/Table/Td/Td.tsx

@@ -0,0 +1,21 @@
+import React, { ForwardRefRenderFunction } from "react";
+import { TdProps } from "./Td.types";
+
+const Td: ForwardRefRenderFunction<HTMLTableCellElement, TdProps> = (
+  { className, alignContent, children, style, ...nativeProps },
+  ref
+) => {
+  return (
+    <td
+      ref={ref}
+      style={{ textAlign: alignContent, ...(style || {}) }}
+      className={className}
+      {...nativeProps}
+    >
+      {children}
+    </td>
+  );
+};
+
+const TdWithRef = React.forwardRef(Td);
+export { TdWithRef as Td };

lib/src/components/Table/Td/Td.types.ts

@@ -0,0 +1,7 @@
+interface ITdProps {
+  className?: string;
+  alignContent?: "left" | "right" | "center";
+  children: React.ReactNode;
+}
+
+export type TdProps = ITdProps & JSX.IntrinsicElements["td"];

lib/src/components/Table/Tfoot/Tfoot.css.ts

@@ -0,0 +1,9 @@
+import { createTheme, globalStyle, style } from "@vanilla-extract/css";
+import { ITfootThemeVars } from "./Tfoot.types";
+
+export const [tfootThemeClass, tfootThemeVars]: ITfootThemeVars = createTheme({
+  customBackgroundColor: "#ddd",
+});
+
+export const footerDefaults = style({});
+

lib/src/components/Table/Tfoot/Tfoot.global.styles.css.ts

@@ -0,0 +1,6 @@
+import { globalStyle } from "@vanilla-extract/css";
+import { footerDefaults, tfootThemeVars } from "./Tfoot.css";
+
+globalStyle(`${footerDefaults} tr th, ${footerDefaults} tr td`, {
+  backgroundColor: tfootThemeVars.customBackgroundColor,
+});

lib/src/components/Table/Tfoot/Tfoot.tsx

@@ -0,0 +1,28 @@
+import { assignInlineVars } from "@vanilla-extract/dynamic";
+import React, { ForwardRefRenderFunction } from "react";
+import { footerDefaults, tfootThemeClass, tfootThemeVars } from "./Tfoot.css";
+import { TfootProps } from "./Tfoot.types";
+import "./Tfoot.global.styles.css";
+
+const Tfoot: ForwardRefRenderFunction<HTMLTableSectionElement, TfootProps> = (
+  { children, backgroundColor = "#ddd", className, style, ...nativeProps },
+  ref
+) => {
+  const assignVars = assignInlineVars({
+    [tfootThemeVars.customBackgroundColor]: backgroundColor,
+  });
+
+  return (
+    <tfoot
+      ref={ref}
+      style={{ ...assignVars, ...(style || {}) }}
+      className={`${footerDefaults} ${tfootThemeClass} ${className || ""}`}
+      {...nativeProps}
+    >
+      {children}
+    </tfoot>
+  );
+};
+
+const TFootWithRef = React.forwardRef(Tfoot);
+export { TFootWithRef as Tfoot };

lib/src/components/Table/Tfoot/Tfoot.types.ts

@@ -0,0 +1,14 @@
+interface ITfootProps {
+  children: React.ReactNode;
+  backgroundColor?: string;
+  className?: string;
+}
+
+export type TfootProps = ITfootProps & JSX.IntrinsicElements["tfoot"];
+
+export type ITfootThemeVars = [
+  string,
+  {
+    customBackgroundColor: string;
+  }
+];

lib/src/components/Table/Th/Th.tsx

@@ -0,0 +1,21 @@
+import React, { ForwardRefRenderFunction } from "react";
+import { ThProps } from "./Th.types";
+
+const Th: ForwardRefRenderFunction<HTMLTableCellElement, ThProps> = (
+  { className, alignHeading, children, ...nativeProps },
+  ref
+) => {
+  return (
+    <th
+      ref={ref}
+      style={{ textAlign: alignHeading }}
+      className={className}
+      {...nativeProps}
+    >
+      {children}
+    </th>
+  );
+};
+
+const ThWithRef = React.forwardRef(Th);
+export { ThWithRef as Th };

lib/src/components/Table/Th/Th.types.ts

@@ -0,0 +1,7 @@
+interface IThProps {
+  className?: string;
+  alignHeading?: "left" | "right" | "center";
+  children: React.ReactNode;
+}
+
+export type ThProps = IThProps & JSX.IntrinsicElements["th"];

lib/src/components/Table/Thead/Thead.css.ts

@@ -0,0 +1,9 @@
+import { createTheme, globalStyle, style } from "@vanilla-extract/css";
+import { ITheadThemeVars } from "./Thead.types";
+
+export const [theadThemeClass, theadThemeVars]: ITheadThemeVars = createTheme({
+  customBackgroundColor: "#ddd",
+});
+
+export const headerDefaults = style({});
+

lib/src/components/Table/Thead/Thead.global.styles.css.ts

@@ -0,0 +1,6 @@
+import { globalStyle } from "@vanilla-extract/css";
+import { headerDefaults, theadThemeVars } from "./Thead.css";
+
+globalStyle(`${headerDefaults} tr th`, {
+  backgroundColor: theadThemeVars.customBackgroundColor,
+});

lib/src/components/Table/Thead/Thead.tsx

@@ -0,0 +1,28 @@
+import { assignInlineVars } from "@vanilla-extract/dynamic";
+import React, { ForwardRefRenderFunction } from "react";
+import { headerDefaults, theadThemeClass, theadThemeVars } from "./Thead.css";
+import { TheadProps } from "./Thead.types";
+import "./Thead.global.styles.css";
+
+const Thead: ForwardRefRenderFunction<HTMLTableSectionElement, TheadProps> = (
+  { children, backgroundColor = "#ddd", className, style, ...nativeProps },
+  ref
+) => {
+  const assignVars = assignInlineVars({
+    [theadThemeVars.customBackgroundColor]: backgroundColor,
+  });
+
+  return (
+    <thead
+      ref={ref}
+      style={{ ...assignVars, ...(style || {}) }}
+      className={`${headerDefaults} ${theadThemeClass} ${className || ""}`}
+      {...nativeProps}
+    >
+      {children}
+    </thead>
+  );
+};
+
+const THeadWithRef = React.forwardRef(Thead);
+export { THeadWithRef as Thead };