feat(table): add table

README.md

@@ -123,7 +123,7 @@ plugins: [windmillPlugin()]
 - [x] Dropdown
 - [x] Form
 - [x] Modal
-- [ ] Table
+- [x] Table
 - [x] Avatar
 - [x] Transition
 - [x] Backdrop

__tests__/Table.test.js

@@ -0,0 +1,15 @@
+import React from 'react'
+import { mount } from 'enzyme'
+import Table from '../src/Table'
+
+describe('Table', () => {
+  it('should render without crashing', () => {
+    mount(<Table />)
+  })
+
+  it('should contain a table', () => {
+    const wrapper = mount(<Table />)
+
+    expect(wrapper.find('table')).toBeTruthy()
+  })
+})

__tests__/TableBody.test.js

@@ -0,0 +1,24 @@
+import React from 'react'
+import { mount } from 'enzyme'
+import TableBody from '../src/TableBody'
+
+describe('TableBody', () => {
+  it('should render without crashing', () => {
+    mount(
+      <table>
+        <TableBody />
+      </table>
+    )
+  })
+
+  it('should render with base styles', () => {
+    const expected = 'bg-white divide-y dark:divide-gray-700 dark:bg-gray-800'
+    const wrapper = mount(
+      <table>
+        <TableBody />
+      </table>
+    )
+
+    expect(wrapper.find('tbody').getDOMNode().getAttribute('class')).toContain(expected)
+  })
+})

__tests__/TableCell.test.js

@@ -0,0 +1,32 @@
+import React from 'react'
+import { mount } from 'enzyme'
+import TableCell from '../src/TableCell'
+
+describe('TableCell', () => {
+  it('should render without crashing', () => {
+    mount(
+      <table>
+        <tbody>
+          <tr>
+            <TableCell />
+          </tr>
+        </tbody>
+      </table>
+    )
+  })
+
+  it('should render with base styles', () => {
+    const expected = 'px-4 py-3'
+    const wrapper = mount(
+      <table>
+        <tbody>
+          <tr>
+            <TableCell />
+          </tr>
+        </tbody>
+      </table>
+    )
+
+    expect(wrapper.find('td').getDOMNode().getAttribute('class')).toContain(expected)
+  })
+})

__tests__/TableContainer.test.js

@@ -0,0 +1,16 @@
+import React from 'react'
+import { mount } from 'enzyme'
+import TableContainer from '../src/TableContainer'
+
+describe('TableContainer', () => {
+  it('should render without crashing', () => {
+    mount(<TableContainer />)
+  })
+
+  it('should render with base styles', () => {
+    const expected = 'w-full overflow-hidden rounded-lg shadow-xs'
+    const wrapper = mount(<TableContainer />)
+
+    expect(wrapper.find(TableContainer).getDOMNode().getAttribute('class')).toContain(expected)
+  })
+})

__tests__/TableHeader.test.js

@@ -0,0 +1,25 @@
+import React from 'react'
+import { mount } from 'enzyme'
+import TableHeader from '../src/TableHeader'
+
+describe('TableHeader', () => {
+  it('should render without crashing', () => {
+    mount(
+      <table>
+        <TableHeader />
+      </table>
+    )
+  })
+
+  it('should render with base styles', () => {
+    const expected =
+      'text-xs font-semibold tracking-wide text-left text-gray-500 uppercase border-b dark:border-gray-700 bg-gray-50 dark:text-gray-400 dark:bg-gray-800'
+    const wrapper = mount(
+      <table>
+        <TableHeader />
+      </table>
+    )
+
+    expect(wrapper.find('thead').getDOMNode().getAttribute('class')).toContain(expected)
+  })
+})

__tests__/TableRow.test.js

@@ -0,0 +1,28 @@
+import React from 'react'
+import { mount } from 'enzyme'
+import TableRow from '../src/TableRow'
+
+describe('TableRow', () => {
+  it('should render without crashing', () => {
+    mount(
+      <table>
+        <tbody>
+          <TableRow />
+        </tbody>
+      </table>
+    )
+  })
+
+  it('should render with base styles', () => {
+    const expected = 'text-gray-700 dark:text-gray-400'
+    const wrapper = mount(
+      <table>
+        <tbody>
+          <TableRow />
+        </tbody>
+      </table>
+    )
+
+    expect(wrapper.find('tr').getDOMNode().getAttribute('class')).toContain(expected)
+  })
+})

src/Table.js

@@ -0,0 +1,16 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+function Table({ children }) {
+  return (
+    <div className="w-full overflow-x-auto">
+      <table className="w-full whitespace-no-wrap">{children}</table>
+    </div>
+  )
+}
+
+Table.propTypes = {
+  children: PropTypes.node,
+}
+
+export default Table

src/TableBody.js

@@ -0,0 +1,28 @@
+import React, { useContext } from 'react'
+import classNames from 'classnames'
+import PropTypes from 'prop-types'
+import { ThemeContext } from './context/ThemeContext'
+import defaultTheme from './themes/default'
+
+function TableBody(props) {
+  const { className, children, ...other } = props
+
+  const { tableBody } = useContext(ThemeContext) || defaultTheme
+
+  const baseStyle = tableBody.base
+
+  const cls = classNames(baseStyle, className)
+
+  return (
+    <tbody className={cls} {...other}>
+      {children}
+    </tbody>
+  )
+}
+
+TableBody.propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.string,
+}
+
+export default TableBody

src/TableCell.js

@@ -0,0 +1,28 @@
+import React, { useContext } from 'react'
+import classNames from 'classnames'
+import PropTypes from 'prop-types'
+import { ThemeContext } from './context/ThemeContext'
+import defaultTheme from './themes/default'
+
+function TableCell(props) {
+  const { className, children, ...other } = props
+
+  const { tableCell } = useContext(ThemeContext) || defaultTheme
+
+  const baseStyle = tableCell.base
+
+  const cls = classNames(baseStyle, className)
+
+  return (
+    <td className={cls} {...other}>
+      {children}
+    </td>
+  )
+}
+
+TableCell.propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.string,
+}
+
+export default TableCell

src/TableContainer.js

@@ -0,0 +1,28 @@
+import React, { useContext } from 'react'
+import classNames from 'classnames'
+import PropTypes from 'prop-types'
+import { ThemeContext } from './context/ThemeContext'
+import defaultTheme from './themes/default'
+
+function TableContainer(props) {
+  const { className, children, ...other } = props
+
+  const { tableContainer } = useContext(ThemeContext) || defaultTheme
+
+  const baseStyle = tableContainer.base
+
+  const cls = classNames(baseStyle, className)
+
+  return (
+    <div className={cls} {...other}>
+      {children}
+    </div>
+  )
+}
+
+TableContainer.propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.string,
+}
+
+export default TableContainer

src/TableHeader.js

@@ -0,0 +1,28 @@
+import React, { useContext } from 'react'
+import classNames from 'classnames'
+import PropTypes from 'prop-types'
+import { ThemeContext } from './context/ThemeContext'
+import defaultTheme from './themes/default'
+
+function TableHeader(props) {
+  const { className, children, ...other } = props
+
+  const { tableHeader } = useContext(ThemeContext) || defaultTheme
+
+  const baseStyle = tableHeader.base
+
+  const cls = classNames(baseStyle, className)
+
+  return (
+    <thead className={cls} {...other}>
+      {children}
+    </thead>
+  )
+}
+
+TableHeader.propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.string,
+}
+
+export default TableHeader

src/TableRow.js

@@ -0,0 +1,28 @@
+import React, { useContext } from 'react'
+import classNames from 'classnames'
+import PropTypes from 'prop-types'
+import { ThemeContext } from './context/ThemeContext'
+import defaultTheme from './themes/default'
+
+function TableRow(props) {
+  const { className, children, ...other } = props
+
+  const { tableRow } = useContext(ThemeContext) || defaultTheme
+
+  const baseStyle = tableRow.base
+
+  const cls = classNames(baseStyle, className)
+
+  return (
+    <tr className={cls} {...other}>
+      {children}
+    </tr>
+  )
+}
+
+TableRow.propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.string,
+}
+
+export default TableRow

src/index.js

@@ -16,3 +16,9 @@ export { default as ModalFooter } from './ModalFooter'
 export { default as ModalHeader } from './ModalHeader'
 export { default as Avatar } from './Avatar'
 export { default as Dropdown } from './Dropdown'
+export { default as Table } from './Table'
+export { default as TableBody } from './TableBody'
+export { default as TableCell } from './TableCell'
+export { default as TableContainer } from './TableContainer'
+export { default as TableHeader } from './TableHeader'
+export { default as TableRow } from './TableRow'

src/themes/default.js

@@ -1,4 +1,30 @@
 export default {
+  // TableFooter
+  tableFooter: {
+    base:
+      'flex flex-col justify-between px-4 py-3 text-xs font-semibold tracking-wide text-gray-500 uppercase border-t dark:border-gray-700 sm:flex-row bg-gray-50 dark:text-gray-400 dark:bg-gray-800',
+  },
+  // TableRow
+  tableRow: {
+    base: 'text-gray-700 dark:text-gray-400',
+  },
+  // TableHeader
+  tableHeader: {
+    base:
+      'text-xs font-semibold tracking-wide text-left text-gray-500 uppercase border-b dark:border-gray-700 bg-gray-50 dark:text-gray-400 dark:bg-gray-800',
+  },
+  // TableContainer
+  tableContainer: {
+    base: 'w-full overflow-hidden rounded-lg shadow-xs',
+  },
+  // TableCell
+  tableCell: {
+    base: 'px-4 py-3',
+  },
+  // TableBody
+  tableBody: {
+    base: 'bg-white divide-y dark:divide-gray-700 dark:bg-gray-800',
+  },
   // DropdownItem
   // this is the <li> that lives inside the Dropdown <ul>
   // you're probably looking for the dropdownItem style inside button