implimenting simple table component

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'),
+};

ui/src/components/table/readme.md

@@ -0,0 +1,41 @@
+# `<Avatar>`
+
+## 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(
+  <Base>
+    <Row>
+      <Column>
+        <Avatar color='#35a8c0' name='Alex' />
+      </Column>
+      <Column>
+        <Avatar color='#ef6176' name='Alex' src='https://openclipart.org/image/2400px/svg_to_png/177482/ProfilePlaceholderSuit.png' />
+      </Column>
+    </Row>
+  </Base>
+);
+```
+
+## usage
+
+```js
+const React = require('react');
+const Avatar = require('ui/avatar');
+
+module.exports = () => {
+  return (
+    <Avatar color='#35a8c0' name='Alex' />
+    <Avatar color='#ef6176' name='Alex' src='path/to/image.png' />
+  );
+}
+```

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', () => (
+    <Base>
+      <Table>
+        <TableHead>
+          <TableItem>Member</TableItem>
+          <TableItem>Status</TableItem>
+          <TableItem>Role</TableItem>
+          <TableItem>{/*Empty last Column*/}</TableItem>
+        </TableHead>
+
+        <TableBody>
+          <TableRow>
+            <TableItem>
+              <h4>Nicola (You)</h4>
+              <p>nicola@biztech.com</p>
+            </TableItem>
+            <TableItem>Active</TableItem>
+            <TableItem>Owner</TableItem>
+            <TableItem>🗑️</TableItem>
+          </TableRow>
+          <TableRow>
+            <TableItem>
+              <h4>Nicola (You)</h4>
+              <p>nicola@biztech.com</p>
+            </TableItem>
+            <TableItem>Active</TableItem>
+            <TableItem>Owner</TableItem>
+            <TableItem>🗑️</TableItem>
+          </TableRow>
+        </TableBody>
+      </Table>
+    </Base>
+  ))
+  .add('Table New', () => (
+    <Base>
+      <Table
+        columns={columns}
+        data={data}
+      />
+    </Base>
+  ));

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 (
+    <StyledTableBody itemCount={itemCount}>
+      {children}
+    </StyledTableBody>
+  );
+};
+
+TableBody.propTypes = {
+  children: React.PropTypes.node
+};
+
+module.exports = StyledTableBody;

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 (
+    <StyledTableHead itemCount={itemCount}>
+      {children}
+    </StyledTableHead>
+  );
+};
+
+TableHead.propTypes = {
+  children: React.PropTypes.node
+};
+
+module.exports = TableHead;

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 (
+    <Item className="table-item">
+      {children}
+    </Item>
+  );
+};
+
+TableItem.propTypes = {
+  children: React.PropTypes.node
+};
+
+module.exports = TableItem;

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 (
+    <StyledTableRow itemCount={itemCount}>
+      {children}
+    </StyledTableRow>
+  );
+};
+
+TableRow.propTypes = {
+  children: React.PropTypes.node
+};
+
+module.exports = TableRow;

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 (
+    <StyledTable>
+      {children}
+    </StyledTable>
+  );
+};
+
+Table.propTypes = {
+  children: React.PropTypes.node
+};
+
+module.exports = Table;

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;
+    }
+  `,
 };