diff --git a/ui/src/components/table-data-table/index.js b/ui/src/components/table-data-table/index.js new file mode 100644 index 00000000..a665420b --- /dev/null +++ b/ui/src/components/table-data-table/index.js @@ -0,0 +1,46 @@ +const React = require('react'); +const Styled = require('styled-components'); + +const TableContent = require('./table-content'); + +const { + default: styled +} = Styled; + +const StyledTitle = styled.h3` + text-align: center +`; + +const StyledTableWrapper = styled.section` + font-family: 'LibreFranklin', sans-serif; + font-style: normal; +`; + +const Table = ({ + children, + columns = [], + data = [], + title, +}) => { + + return ( + + + {title} + + + + ); +}; + +Table.propTypes = { + children: React.PropTypes.node, + columns: React.PropTypes.array, + data: React.PropTypes.array, + title: React.PropTypes.string, +}; + +module.exports = Table; diff --git a/ui/src/components/table-data-table/readme.md b/ui/src/components/table-data-table/readme.md new file mode 100644 index 00000000..cd285205 --- /dev/null +++ b/ui/src/components/table-data-table/readme.md @@ -0,0 +1,76 @@ +# `` + +## 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 Table = require('./index.js'); + +nmodule.exports = ReactDOM.renderToString( + + + +); +``` + +## usage + +```js +const React = require('react'); +const Avatar = require('ui/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: 'Owner', + key: 1 +}, { + name: 'Alex', + status: 'Inactive', + role: 'Read Only', + key: 2 +}]; + +module.exports = () => { + return ( + +
+ + ); +} +``` diff --git a/ui/src/components/table-data-table/story.js b/ui/src/components/table-data-table/story.js new file mode 100644 index 00000000..bdaaa917 --- /dev/null +++ b/ui/src/components/table-data-table/story.js @@ -0,0 +1,54 @@ +const React = require('react'); +const Base = require('../base'); + +const { + storiesOf +} = require('@kadira/storybook'); + +const Table = require('./'); + +const memberDetail = (name) => { + return ( +
+

{name}

+ {name}@biztech.com +
+ ); +}; + +const columns = [{ + title: 'Memeber', + width: '50%' +}, { + title: 'Status', + width: '10%' +}, { + title: 'Role', + width: '20%' +}, { + title: '', + width: '20%' +}]; + +const data = [{ + name: memberDetail('Nicola'), + status: 'Active', + role: 'Owner', + key: 1 +}, { + name: memberDetail('Alex'), + status: 'Inactive', + role: 'Read Only', + key: 2 +}]; + +storiesOf('Table - Data Table', module) + .add('Default', () => ( + +
+ + )); diff --git a/ui/src/components/table-data-table/table-body.js b/ui/src/components/table-data-table/table-body.js new file mode 100644 index 00000000..a1dbd7fd --- /dev/null +++ b/ui/src/components/table-data-table/table-body.js @@ -0,0 +1,25 @@ +const React = require('react'); + +const Row = require('./table-row'); + +const TableBody = ({ + columns, + data +}) => { + const rows = columns.map( (column, index) => { + return ; + }); + + return ( + + {rows} + + ); +}; + +TableBody.propTypes = { + columns: React.PropTypes.array, + data: React.PropTypes.array +}; + +module.exports = TableBody; \ No newline at end of file diff --git a/ui/src/components/table-data-table/table-content.js b/ui/src/components/table-data-table/table-content.js new file mode 100644 index 00000000..0bb3d16c --- /dev/null +++ b/ui/src/components/table-data-table/table-content.js @@ -0,0 +1,39 @@ +const React = require('react'); +const Styled = require('styled-components'); + +const TableBody = require('./table-body'); +const TableHeader = require('./table-head'); + +const { + default: styled +} = Styled; + +const StyledTable = styled.table` + width: 100%; +`; + +const TableContent = ({ + columns, + data, + hasHeader = columns.length >= 1, + hasBody = data.length >= 1, + width = '100%' +}) => { + + return ( + + {hasHeader ? : null} + {hasBody ? : null} + + ); +}; + +TableContent.propTypes = { + columns: React.PropTypes.array, + data: React.PropTypes.array, + hasBody: React.PropTypes.bool, + hasHeader: React.PropTypes.bool, + width: React.PropTypes.string, +}; + +module.exports = TableContent; diff --git a/ui/src/components/table-data-table/table-head.js b/ui/src/components/table-data-table/table-head.js new file mode 100644 index 00000000..6364b0f8 --- /dev/null +++ b/ui/src/components/table-data-table/table-head.js @@ -0,0 +1,57 @@ +const React = require('react'); +const Styled = require('styled-components'); + +const fns = require('../../shared/functions'); + +const { + remcalc +} = fns; + +const { + default: styled +} = Styled; + +const StyledTableHeadItem = styled.td` + ${props => `width: ${props.width}`} + border-bottom: none; + padding: ${remcalc(24)}; +`; + +const StyledTableHead = styled.thead` + background: #fafafa; + box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.05); + border: solid ${remcalc(1)} #d8d8d8; +`; + +const TableHeader = ({ + columns +}) => { + + const fallBackWidth = `${100 / parseInt(columns.length)}%`; + + const titles = columns.map( (column, i) => { + + return ( + + {column.title} + + ); + }); + + return ( + + + {titles} + + + ); +}; + +TableHeader.propTypes = { + columns: React.PropTypes.array +}; + +module.exports = TableHeader; \ No newline at end of file diff --git a/ui/src/components/table-data-table/table-row.js b/ui/src/components/table-data-table/table-row.js new file mode 100644 index 00000000..13590e2a --- /dev/null +++ b/ui/src/components/table-data-table/table-row.js @@ -0,0 +1,44 @@ +const React = require('react'); +const Styled = require('styled-components'); + +const fns = require('../../shared/functions'); + +const { + remcalc +} = fns; + +const { + default: styled +} = Styled; + +const StyledRow = styled.tr` + border: solid ${remcalc(1)} #d8d8d8; +`; + +const StyledTableItem = styled.td` + padding: ${remcalc(24)}; +`; + +const Row = ({ + dataItem = {} +}) => { + const _dataItem = dataItem; + + const rowItems = Object.keys(_dataItem).map( (item, i) => { + const value = _dataItem[item]; + + return {value}; + }); + + return ( + + {rowItems} + + ); +}; + +Row.propTypes = { + dataItem: React.PropTypes.object +}; + +module.exports = Row; \ No newline at end of file diff --git a/ui/src/components/table-simple-table/index.js b/ui/src/components/table-simple-table/index.js new file mode 100644 index 00000000..0a5e1d71 --- /dev/null +++ b/ui/src/components/table-simple-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-simple-table/readme.md b/ui/src/components/table-simple-table/readme.md new file mode 100644 index 00000000..13c2ad83 --- /dev/null +++ b/ui/src/components/table-simple-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-simple-table/story.js b/ui/src/components/table-simple-table/story.js new file mode 100644 index 00000000..9b3b48ff --- /dev/null +++ b/ui/src/components/table-simple-table/story.js @@ -0,0 +1,51 @@ +const React = require('react'); +const Base = require('../base'); + +const { + storiesOf +} = require('@kadira/storybook'); + +const _table = require('./'); + +const { + Table, + TableHead, + TableItem, + TableBody, + TableRow +} = _table; + +storiesOf('Table - Simple', module) + .add('Default', () => ( + +
+ + Member + Status + Role + {/*Empty last Column*/} + + + + + +

Nicola (You)

+

nicola@biztech.com

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

Nicola (You)

+

nicola@biztech.com

+ + Active + Owner + 🗑️ + + +
+ + )); diff --git a/ui/src/components/table-simple-table/table-body.js b/ui/src/components/table-simple-table/table-body.js new file mode 100644 index 00000000..62066e6a --- /dev/null +++ b/ui/src/components/table-simple-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-simple-table/table-cell.js b/ui/src/components/table-simple-table/table-cell.js new file mode 100644 index 00000000..e69de29b diff --git a/ui/src/components/table-simple-table/table-head.js b/ui/src/components/table-simple-table/table-head.js new file mode 100644 index 00000000..2b80b85f --- /dev/null +++ b/ui/src/components/table-simple-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-simple-table/table-item.js b/ui/src/components/table-simple-table/table-item.js new file mode 100644 index 00000000..e43bc69b --- /dev/null +++ b/ui/src/components/table-simple-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-simple-table/table-row.js b/ui/src/components/table-simple-table/table-row.js new file mode 100644 index 00000000..3817b656 --- /dev/null +++ b/ui/src/components/table-simple-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-simple-table/table.js b/ui/src/components/table-simple-table/table.js new file mode 100644 index 00000000..434b0e3a --- /dev/null +++ b/ui/src/components/table-simple-table/table.js @@ -0,0 +1,49 @@ +const React = require('react'); +const Styled = require('styled-components'); + +const { + default: styled +} = Styled; + +const StyledTableWrapper = styled.section` + border: solid 1px #d8d8d8 + font-family: 'LibreFranklin', sans-serif; + font-style: normal; +`; + +// const StyledTableHead = styled.thead``; +// const StyledTableBody = styled.tbody``; + +// const renderTable = ({ +// hasHeader = false, +// hasBody = true, +// width = '100%' +// }) => { +// +// const tableBody = () => { +// +// return ( +// +// ) +// } +// +// } + +const Table = ({ + children, + title, +}) => { + + return ( + + {children} + + ); +}; + +Table.propTypes = { + children: React.PropTypes.node, + title: React.PropTypes.string, +}; + +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; + } + `, };