working on table by passing in js object

ui/src/components/table-new/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-new/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-new/story.js

@@ -0,0 +1,56 @@
+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: 'Owner',
+  key: 1
+}];
+
+storiesOf('Table New', module)
+  .add('Table New', () => (
+    <Base>
+      <Table
+        title="This is the table title"
+        columns={columns}
+        data={data}
+      />
+    </Base>
+  ));

ui/src/components/table-new/table-body.js

@@ -0,0 +1,57 @@
+const composers = require('../../shared/composers');
+
+const React = require('react');
+const Styled = require('styled-components');
+
+const {
+  default: styled,
+} = Styled;
+
+const {
+  clearfix
+} = composers;
+
+const Row = ({st
+  dataItem
+}) => {
+  const _dataItem = dataItem;
+
+
+  Object.keys(_dataItem).forEach( (item, i) => {
+    const value = _dataItem[item];
+
+    return <td key={i}>{value}</td>;
+  });
+};
+
+const TableRows = ({
+  columns,
+  data
+}) => {
+
+  const rows = columns.map( (column, index) => {
+    return <Row dataItem={data[index]} key={index} />
+  });
+
+  return (
+    <tbody>
+      {rows}
+    </tbody>
+  );
+};
+
+const TableBody = ({
+  columns,
+  data
+}) => {
+  return (
+    <TableRows data={data} columns={columns} />
+  );
+};
+
+TableBody.propTypes = {
+  columns: React.PropTypes.array,
+  data: React.PropTypes.array
+};
+
+module.exports = TableBody;

ui/src/components/table-new/table-head.js

@@ -0,0 +1,56 @@
+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 TableHeader = (columns) => {
+
+  columns.map( (column) => {
+    return (
+      <td>{column.title}</td>
+    )
+  });
+
+  return (
+    <thead></thead>
+  );
+};
+
+TableHeader.propTypes = {
+  children: React.PropTypes.node
+};
+
+module.exports = TableHeader;

ui/src/components/table-new/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-new/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-new/table.js

@@ -0,0 +1,66 @@
+const React = require('react');
+const Styled = require('styled-components');
+
+const TableBody = require('./table-body');
+const TableHeader = require('./table-head');
+
+const {
+  default: styled
+} = Styled;
+
+const StyledTableWrapper = styled.section`
+  font-family: 'LibreFranklin', sans-serif;
+	font-style: normal;
+`;
+
+const StyledTableHead = styled.thead``;
+const StyledTableBody = styled.tbody``;
+
+const StyledTitle = styled.h3`
+  text-align: center
+`;
+
+const TableContent = ({
+  columns,
+  data,
+  hasHeader = false,
+  hasBody = data.length >= 1,
+  width = '100%'
+}) => {
+
+  return (
+    <table>
+      {hasHeader ? <TableHeader columns={columns} /> : null}
+      {hasBody ? <TableBody data={data} columns={columns} /> : null}
+    </table>
+  )
+};
+
+const Table = ({
+  children,
+  columns = [],
+  data = [],
+  title,
+}) => {
+
+  return (
+
+    <StyledTableWrapper>
+      <StyledTitle>{title}</StyledTitle>
+
+      <TableContent
+        columns={columns}
+        data={data}
+      />
+    </StyledTableWrapper>
+  );
+};
+
+Table.propTypes = {
+  children: React.PropTypes.node,
+  columns: React.PropTypes.array,
+  data: React.PropTypes.array,
+  title: React.PropTypes.string,
+};
+
+module.exports = Table;

ui/src/components/table/table.js

@@ -5,25 +5,45 @@ const {
   default: styled
 } = Styled;
 
-const StyledTable = styled.section`
+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 (
+      <StyledTableBody />
+    )
+  }
+
+}
+
 const Table = ({
-  children
+  children,
+  title,
 }) => {
 
   return (
-    <StyledTable>
+    <StyledTableWrapper>
       {children}
-    </StyledTable>
+    </StyledTableWrapper>
   );
 };
 
 Table.propTypes = {
-  children: React.PropTypes.node
+  children: React.PropTypes.node,
+  title: React.PropTypes.string,
 };
 
 module.exports = Table;