From 2b25582af0c60a131cef41972f072d8aa0a3d452 Mon Sep 17 00:00:00 2001 From: Alex Windett Date: Thu, 19 Jan 2017 14:59:59 +0000 Subject: [PATCH] implimenting simple table component --- ui/src/components/table/index.js | 8 +++ ui/src/components/table/readme.md | 41 +++++++++++++ ui/src/components/table/story.js | 87 +++++++++++++++++++++++++++ ui/src/components/table/table-body.js | 39 ++++++++++++ ui/src/components/table/table-cell.js | 0 ui/src/components/table/table-head.js | 58 ++++++++++++++++++ ui/src/components/table/table-item.js | 28 +++++++++ ui/src/components/table/table-row.js | 54 +++++++++++++++++ ui/src/components/table/table.js | 29 +++++++++ ui/src/shared/composers.js | 13 +++- 10 files changed, 356 insertions(+), 1 deletion(-) create mode 100644 ui/src/components/table/index.js create mode 100644 ui/src/components/table/readme.md create mode 100644 ui/src/components/table/story.js create mode 100644 ui/src/components/table/table-body.js create mode 100644 ui/src/components/table/table-cell.js create mode 100644 ui/src/components/table/table-head.js create mode 100644 ui/src/components/table/table-item.js create mode 100644 ui/src/components/table/table-row.js create mode 100644 ui/src/components/table/table.js diff --git a/ui/src/components/table/index.js b/ui/src/components/table/index.js new file mode 100644 index 00000000..0a5e1d71 --- /dev/null +++ b/ui/src/components/table/index.js @@ -0,0 +1,8 @@ +module.exports = { + Table: require('./table'), + TableHead: require('./table-head'), + TableBody: require('./table-body'), + TableCell: require('./table-cell'), + TableRow: require('./table-row'), + TableItem: require('./table-item'), +}; diff --git a/ui/src/components/table/readme.md b/ui/src/components/table/readme.md new file mode 100644 index 00000000..13c2ad83 --- /dev/null +++ b/ui/src/components/table/readme.md @@ -0,0 +1,41 @@ +# `` + +## demo + +```embed +const React = require('react'); +const ReactDOM = require('react-dom/server'); +const Base = require('../base'); +const Container = require('../container'); +const Row = require('../row'); +const Column = require('../column'); +const Avatar = require('./index.js'); +const styles = require('./style.css'); + +nmodule.exports = ReactDOM.renderToString( + + + + + + + + + + +); +``` + +## usage + +```js +const React = require('react'); +const Avatar = require('ui/avatar'); + +module.exports = () => { + return ( + + + ); +} +``` diff --git a/ui/src/components/table/story.js b/ui/src/components/table/story.js new file mode 100644 index 00000000..5bc35e02 --- /dev/null +++ b/ui/src/components/table/story.js @@ -0,0 +1,87 @@ +const React = require('react'); +const Base = require('../base'); + +const { + storiesOf +} = require('@kadira/storybook'); + +const _table = require('./'); + +const { + Table, + TableHead, + TableBody, + TableRow, + TableItem +} = _table; + +const columns = [{ + title: 'Memeber', + dataID: 'member', + dataKey: 'member', + width: '' +}, { + title: 'Status', + dataID: 'status', + dataKey: 'status', + width: '' +}, { + title: 'Role', + dataID: 'role', + dataKey: 'role', + width: '' +}, { + title: '', + dataID: 'delete', + dataKey: 'delete', + width: '' +}]; + +const data = [{ + name: 'Nicola', + status: 'Active', + role: 'Ownder', +}]; + +storiesOf('Table', module) + .add('Table', () => ( + + + + Member + Status + Role + {/*Empty last Column*/} + + + + + +

Nicola (You)

+

nicola@biztech.com

+ + Active + Owner + 🗑️ + + + +

Nicola (You)

+

nicola@biztech.com

+ + Active + Owner + 🗑️ + + +
+ + )) + .add('Table New', () => ( + + + + )); diff --git a/ui/src/components/table/table-body.js b/ui/src/components/table/table-body.js new file mode 100644 index 00000000..62066e6a --- /dev/null +++ b/ui/src/components/table/table-body.js @@ -0,0 +1,39 @@ +const composers = require('../../shared/composers'); + +const React = require('react'); +const Styled = require('styled-components'); + +const { + default: styled, +} = Styled; + +const { + clearfix +} = composers; + +const StyledTableBody = styled.article` + box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.05); + + ${clearfix} +`; + +const TableBody = ({ + children +}) => { + + const itemCount = children.length; + + if (itemCount <= 1) return; + + return ( + + {children} + + ); +}; + +TableBody.propTypes = { + children: React.PropTypes.node +}; + +module.exports = StyledTableBody; \ No newline at end of file diff --git a/ui/src/components/table/table-cell.js b/ui/src/components/table/table-cell.js new file mode 100644 index 00000000..e69de29b diff --git a/ui/src/components/table/table-head.js b/ui/src/components/table/table-head.js new file mode 100644 index 00000000..2b80b85f --- /dev/null +++ b/ui/src/components/table/table-head.js @@ -0,0 +1,58 @@ +const fns = require('../../shared/functions'); +const composers = require('../../shared/composers'); + +const React = require('react'); +const Styled = require('styled-components'); + +const { + remcalc +} = fns; + +const { + default: styled, + css +} = Styled; + +const { + clearfix +} = composers; + +const StyledTableHead = styled.header` + background: #fafafa; + box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.05); + padding: ${remcalc(24)} 0; + + ${clearfix} + + & > .table-item { + text-align: center; + + ${props => { + const width = 100 / props.itemCount; + return css` + width: ${width}%; + `; + }} + } +`; + +const TableHead = ({ + children +}) => { + + const itemCount = children.length; + + if (itemCount <= 1) return; + + return ( + + {children} + + ); +}; + +TableHead.propTypes = { + children: React.PropTypes.node +}; + +module.exports = TableHead; \ No newline at end of file diff --git a/ui/src/components/table/table-item.js b/ui/src/components/table/table-item.js new file mode 100644 index 00000000..e43bc69b --- /dev/null +++ b/ui/src/components/table/table-item.js @@ -0,0 +1,28 @@ +const React = require('react'); +const Styled = require('styled-components'); + +const { + default: styled +} = Styled; + +const Item = styled.div` + display: inline-block; + float: left; +`; + +const TableItem = ({ + children +}) => { + + return ( + + {children} + + ); +}; + +TableItem.propTypes = { + children: React.PropTypes.node +}; + +module.exports = TableItem; \ No newline at end of file diff --git a/ui/src/components/table/table-row.js b/ui/src/components/table/table-row.js new file mode 100644 index 00000000..3817b656 --- /dev/null +++ b/ui/src/components/table/table-row.js @@ -0,0 +1,54 @@ +const fns = require('../../shared/functions'); +const composers = require('../../shared/composers'); + +const React = require('react'); +const Styled = require('styled-components'); + +const { + default: styled, + css +} = Styled; + +const { + clearfix +} = composers; + +const { + remcalc +} = fns; + +const StyledTableRow = styled.div` + ${clearfix} + + padding: ${remcalc(24)} 0; + border-bottom: solid 1px #d8d8d8; + + & > .table-item { + text-align: center; + + ${props => { + const width = 100 / props.itemCount; + return css` + width: ${width}%; + `; + }} + } +`; + +const TableRow = ({ + children +}) => { + const itemCount = children.length; + + return ( + + {children} + + ); +}; + +TableRow.propTypes = { + children: React.PropTypes.node +}; + +module.exports = TableRow; \ No newline at end of file diff --git a/ui/src/components/table/table.js b/ui/src/components/table/table.js new file mode 100644 index 00000000..b77c2207 --- /dev/null +++ b/ui/src/components/table/table.js @@ -0,0 +1,29 @@ +const React = require('react'); +const Styled = require('styled-components'); + +const { + default: styled +} = Styled; + +const StyledTable = styled.section` + border: solid 1px #d8d8d8 + font-family: 'LibreFranklin', sans-serif; + font-style: normal; +`; + +const Table = ({ + children +}) => { + + return ( + + {children} + + ); +}; + +Table.propTypes = { + children: React.PropTypes.node +}; + +module.exports = Table; diff --git a/ui/src/shared/composers.js b/ui/src/shared/composers.js index 517b2eeb..457975c4 100644 --- a/ui/src/shared/composers.js +++ b/ui/src/shared/composers.js @@ -47,5 +47,16 @@ module.exports = { right: ${positions.right || 'auto'}; bottom: ${positions.bottom || 'auto'}; left: ${positions.left || 'auto'}; - ` + `, + clearfix: css` + &:before, + &:after { + content:""; + display:table; + } + + &:after { + clear:both; + } + `, };