Refinements based on storybook

Author: jpbarela

src/DataTable/index.jsx

@@ -1,65 +1,90 @@
 // @flow
 import * as React from "react";
-import { Table, TableBody, TableHeader, TableRow } from "../Table";
-import { createUseStyles } from "react-jss";
+import {
+  Table,
+  TableBody,
+  TableData,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "../Table";
+import type { TextAlign } from "../commonTypes";
 
 type DataTableProps = {
-  columns: Array<ColumnProp>,
-  data: Array<Any>,
+  columns: Array<ColumnProps>,
+  data: Array<any>,
+  borderWidth?: string,
 };
 
 type ColumnProps = {
-  header: string,
-  textAlign: TextAlign,
-  width: string,
+  header?: string,
+  textAlign?: TextAlign,
+  width?: string,
 };
 
-type TextAlign = "left" | "right" | "center";
-
 type DataElementProps = {
-  textAlign: TextAlign,
-  width: string,
   item: string,
+  borderWidth?: string,
+  textAlign?: TextAlign,
+  width?: string,
 };
 
-export function DataTable({ columns, data }: DataTableProps) {
+export function DataTable({
+  borderWidth,
+  columns,
+  data,
+}: DataTableProps): React.Node {
   return (
     <Table>
-      <TableRow>
-        {columns.map((columnProps) => (
-          <ColumnHeader {...ColumnProps} />
-        ))}
-      </TableRow>
-      {data.map((row) => {
-        return (
-          <TableRow>
-            {row.map((element, index) => (
-              <DataElement
-                item={element.item}
-                textAlign={element.textAlign}
-                width={element.width}
-              />
-            ))}
-          </TableRow>
-        );
-      })}
+      <TableHead>
+        <TableRow>
+          {columns.map((column, index) => (
+            <ColumnHeader
+              key={column.header || index}
+              header={column.header}
+              width={column.width}
+            />
+          ))}
+        </TableRow>
+      </TableHead>
+      <TableBody>
+        {data.map((row, i) => {
+          return (
+            <TableRow key={i}>
+              {row.map((element, j) => (
+                <DataElement
+                  key={`${i}_${j}`}
+                  item={element}
+                  textAlign={columns[j].textAlign}
+                  width={columns[j].width}
+                  borderWidth={borderWidth}
+                />
+              ))}
+            </TableRow>
+          );
+        })}
+      </TableBody>
     </Table>
   );
 }
 
-function ColumnHeader({ header }: ColumnProps) {
-  return <TableHeader>{header}</TableHeader>;
+function ColumnHeader({ header, width }: ColumnProps) {
+  return (
+    <TableHeader textAlign="center" width={width}>
+      {header}
+    </TableHeader>
+  );
 }
 
-function DataElement({ item, textAlign, width }: DataTableProps) {
-  const useDataStyles = useDataTableStysles({ textAlign, width });
-
-  return <TableBody className={useDataStyles.tableData}>{item}</TableBody>;
+function DataElement({
+  borderWidth,
+  item,
+  textAlign,
+  width,
+}: DataElementProps) {
+  return (
+    <TableData borderWidth={borderWidth} textAlign={textAlign} width={width}>
+      {item}
+    </TableData>
+  );
 }
-
-const useDataTableStysles = createUseStyles({
-  tableData: {
-    textAlign: ({ textAlign }) => textAlign,
-    width: ({ width }) => width,
-  },
-});

src/Table/index.jsx

@@ -1,16 +1,19 @@
 // @flow
 import * as React from "react";
 import { createUseStyles } from "react-jss";
+import type { TextAlign } from "../commonTypes";
 
 type TableProps = {
   children?: React.Node,
 };
 
 type TableDataProps = {
-  center?: boolean,
+  borderWidth?: string,
   colSpan?: number,
   rowSpan?: number,
   styles?: any,
+  textAlign?: TextAlign,
+  width?: string,
   children?: React.Node,
 };
 
@@ -19,7 +22,7 @@ type TableHeaderProps = TableDataProps & {
 };
 
 export function Table({ children }: TableProps): React.Node {
-  const classes = useTableStyles();
+  const classes = useTableStyles({});
 
   return <table className={classes.table}>{children}</table>;
 }
@@ -37,18 +40,19 @@ export function TableHead({ children }: TableProps): React.Node {
 }
 
 export function TableHeader({
-  center,
   colSpan,
   rowSpan,
   scope,
+  textAlign,
+  width,
   children,
   styles,
 }: TableHeaderProps): React.Node {
-  const classes = useTableStyles();
+  const classes = useTableStyles({ textAlign, width });
 
   return (
     <th
-      className={center && classes.center}
+      className={classes.tableHeader}
       style={styles}
       colSpan={colSpan ? colSpan : 1}
       rowSpan={rowSpan ? rowSpan : 1}
@@ -59,18 +63,24 @@ export function TableHeader({
   );
 }
 
+TableHeader.defaultProps = {
+  textAlign: "center",
+};
+
 export function TableData({
-  center,
+  borderWidth,
   colSpan,
   rowSpan,
   children,
+  textAlign,
+  width,
   styles,
 }: TableDataProps): React.Node {
-  const classes = useTableStyles();
+  const classes = useTableStyles({ borderWidth, textAlign, width });
 
   return (
     <td
-      className={`${classes.tableData} ${center ? classes.center : ""}`}
+      className={classes.tableData}
       style={styles}
       colSpan={colSpan ? colSpan : 1}
       rowSpan={rowSpan ? rowSpan : 1}
@@ -80,17 +90,22 @@ export function TableData({
   );
 }
 
+TableData.defaultProps = { borderWidth: "1px", textAlign: "right" };
+
 const useTableStyles = createUseStyles({
-  center: {
-    textAlign: "center",
-  },
   table: {
     borderCollapse: "collapse",
   },
   tableData: {
-    border: "1px",
+    borderWidth: ({ borderWidth }) => borderWidth,
     borderStyle: "solid",
     margin: 0,
     padding: "5px 5px",
+    textAlign: ({ textAlign }) => textAlign,
+    width: ({ width }) => width,
+  },
+  tableHeader: {
+    textAlign: ({ textAlign }) => textAlign,
+    width: ({ width }) => width,
   },
 });

src/commonTypes.js

@@ -0,0 +1,2 @@
+// @flow
+export type TextAlign = "left" | "right" | "center";