From dcfe75a90774a45692a702ce113d348ac8ab207c Mon Sep 17 00:00:00 2001
From: Stefano Pigozzi <me@steffo.eu>
Date: Wed, 18 Aug 2021 16:16:51 +0200
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Add=20tables?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/tables/Table.stories.jsx | 178 ++++++++++++++++++++++++
 src/components/tables/Table.tsx         | 114 +++++++++++++++
 2 files changed, 292 insertions(+)
 create mode 100644 src/components/tables/Table.stories.jsx
 create mode 100644 src/components/tables/Table.tsx

diff --git a/src/components/tables/Table.stories.jsx b/src/components/tables/Table.stories.jsx
new file mode 100644
index 0000000..48f6016
--- /dev/null
+++ b/src/components/tables/Table.stories.jsx
@@ -0,0 +1,178 @@
+import * as React from "react"
+import * as ReactDOM from "react-dom"
+import * as Decorators from "../../utils/Decorators"
+import { Table } from "./Table"
+
+
+export default {
+    component: Table,
+    title: "Tables/Table",
+    decorators: [Decorators.Bluelib],
+    argTypes: {
+        customColor: {
+            control: {type: "color"},
+        },
+    },
+}
+
+
+export const Brothers = props => (
+    <Table {...props}>
+        <Table.Caption position={"top"}>
+            What do the brothers think of the following elements?
+        </Table.Caption>
+        <Table.Header>
+            <Table.Row>
+                <Table.Cell head={true}>
+
+                </Table.Cell>
+                <Table.Cell head={true}>
+                    Mario
+                </Table.Cell>
+                <Table.Cell head={true}>
+                    Luigi
+                </Table.Cell>
+            </Table.Row>
+        </Table.Header>
+        <Table.Body>
+            <Table.Row>
+                <Table.Cell head={true}>
+                    Tables
+                </Table.Cell>
+                <Table.Cell>
+                    They're cool and allow you to do cool stuff
+                </Table.Cell>
+                <Table.Cell>
+                    They need chairs to be useful
+                </Table.Cell>
+            </Table.Row>
+            <Table.Row>
+                <Table.Cell head={true}>
+                    Flexboxes
+                </Table.Cell>
+                <Table.Cell>
+                    They're very versatile
+                </Table.Cell>
+                <Table.Cell>
+                    Not flexible enough for me
+                </Table.Cell>
+            </Table.Row>
+            <Table.Row>
+                <Table.Cell head={true}>
+                    Grids
+                </Table.Cell>
+                <Table.Cell>
+                    They are useful to make layouts
+                </Table.Cell>
+                <Table.Cell>
+                    Is this Matrix?
+                </Table.Cell>
+            </Table.Row>
+        </Table.Body>
+        <Table.Footer>
+            <Table.Row>
+                <Table.Cell head={true}>
+                    Overall
+                </Table.Cell>
+                <Table.Cell>
+                    10/10 would display again
+                </Table.Cell>
+                <Table.Cell>
+                    -1/10 pls uninstall dota
+                </Table.Cell>
+            </Table.Row>
+        </Table.Footer>
+    </Table>
+)
+Brothers.args = {}
+
+
+export const TicTacToe = props => (
+    <Table {...props}>
+        <Table.Caption position={"top"}>
+            A game of tic-tac-toe.
+        </Table.Caption>
+        <Table.Body>
+            <Table.Row>
+                <Table.Cell>
+                    O
+                </Table.Cell>
+                <Table.Cell>
+
+                </Table.Cell>
+                <Table.Cell mark={true}>
+                    X
+                </Table.Cell>
+            </Table.Row>
+            <Table.Row>
+                <Table.Cell>
+                    X
+                </Table.Cell>
+                <Table.Cell mark={true}>
+                    X
+                </Table.Cell>
+                <Table.Cell>
+                    O
+                </Table.Cell>
+            </Table.Row>
+            <Table.Row>
+                <Table.Cell mark={true}>
+                    X
+                </Table.Cell>
+                <Table.Cell>
+                    O
+                </Table.Cell>
+                <Table.Cell>
+
+                </Table.Cell>
+            </Table.Row>
+        </Table.Body>
+    </Table>
+)
+TicTacToe.args = {}
+
+
+export const TierList = props => (
+    <Table {...props}>
+        <Table.Caption position={"bottom"}>
+            HTML elements tier list
+        </Table.Caption>
+        <Table.Body>
+            <Table.Row>
+                <Table.Cell head={true}>
+                    S
+                </Table.Cell>
+                <Table.Cell>
+                    span
+                </Table.Cell>
+            </Table.Row>
+            <Table.Row>
+                <Table.Cell head={true}>
+                    A
+                </Table.Cell>
+                <Table.Cell>
+                    a
+                </Table.Cell>
+            </Table.Row>
+            <Table.Row>
+                <Table.Cell head={true}>
+                    B
+                </Table.Cell>
+                <Table.Cell>
+                    body
+                </Table.Cell>
+            </Table.Row>
+            <Table.Row>
+                <Table.Cell head={true}>
+                    C
+                </Table.Cell>
+                <Table.Cell>
+                    caption
+                </Table.Cell>
+            </Table.Row>
+        </Table.Body>
+    </Table>
+)
+TicTacToe.args = {}
+
+
diff --git a/src/components/tables/Table.tsx b/src/components/tables/Table.tsx
new file mode 100644
index 0000000..52fcbe9
--- /dev/null
+++ b/src/components/tables/Table.tsx
@@ -0,0 +1,114 @@
+import * as React from "react"
+import * as ReactDOM from "react-dom"
+import * as Types from "../../types"
+import {BaseElement} from "../BaseElement"
+import mergeClassNames from "classnames"
+
+
+interface TableProps {
+    [props: string]: any,
+}
+
+
+export function Table({...props}: TableProps): JSX.Element {
+    props.bluelibClassNames = mergeClassNames(props.bluelibClassNames, "table")
+
+    return (
+        <BaseElement kind={"table"} {...props}/>
+    )
+}
+
+
+interface TableCaptionProps {
+    position: "top" | "bottom",
+
+    [props: string]: any,
+}
+
+
+const TABLE_CAPTION_CLASSES = {
+    top: "table-caption-top",
+    bottom: "table-caption-bottom",
+}
+
+
+Table.Caption = function({position, ...props}: TableCaptionProps): JSX.Element {
+    props.bluelibClassNames = mergeClassNames(props.bluelibClassNames, "table-caption", TABLE_CAPTION_CLASSES[position])
+
+    return (
+        <BaseElement kind={"caption"} {...props}/>
+    )
+}
+
+
+interface TableHeaderProps {
+    [props: string]: any,
+}
+
+
+Table.Header = function ({position, ...props}: TableHeaderProps): JSX.Element {
+    props.bluelibClassNames = mergeClassNames(props.bluelibClassNames, "table-header")
+
+    return (
+        <BaseElement kind={"thead"} {...props}/>
+    )
+}
+
+
+interface TableBodyProps {
+    [props: string]: any,
+}
+
+
+Table.Body = function ({position, ...props}: TableBodyProps): JSX.Element {
+    props.bluelibClassNames = mergeClassNames(props.bluelibClassNames, "table-body")
+
+    return (
+        <BaseElement kind={"tbody"} {...props}/>
+    )
+}
+
+
+interface TableFooterProps {
+    [props: string]: any,
+}
+
+
+Table.Footer = function ({position, ...props}: TableFooterProps): JSX.Element {
+    props.bluelibClassNames = mergeClassNames(props.bluelibClassNames, "table-footer")
+
+    return (
+        <BaseElement kind={"tfoot"} {...props}/>
+    )
+}
+
+
+interface TableRowProps {
+    [props: string]: any,
+}
+
+
+Table.Row = function ({...props}: TableRowProps): JSX.Element {
+    props.bluelibClassNames = mergeClassNames(props.bluelibClassNames, "table-row")
+
+    return (
+        <BaseElement kind={"tr"} {...props}/>
+    )
+}
+
+
+interface TableCellProps {
+    head?: boolean,
+    mark?: boolean,
+
+    [props: string]: any,
+}
+
+
+Table.Cell = function ({head = false, mark = false, ...props}: TableCellProps): JSX.Element {
+    props.bluelibClassNames = mergeClassNames(props.bluelibClassNames, head ? "table-head" : "table-data", mark ? "table-mark" : "")
+
+    return (
+        <BaseElement kind={head ? "th" : "td"} {...props}/>
+    )
+}