refactoring, removing comments and unused files for new table

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

@@ -1,8 +1,46 @@
-module.exports = {
+const React = require('react');
-  Table: require('./table'),
+const Styled = require('styled-components');
-  TableHead: require('./table-head'),
+
-  TableBody: require('./table-body'),
+const TableContent = require('./table-content');
-  TableCell: require('./table-cell'),
+
-  TableRow: require('./table-row'),
+const {
-  TableItem: require('./table-item'),
+  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 (
+
+    <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-new/story.js

@@ -5,15 +5,7 @@ const {
   storiesOf
 } = require('@kadira/storybook');
 
-const _table = require('./');
+const Table = require('./');
-
-const {
-  Table,
-  // TableHead,
-  // TableBody,
-  // TableRow,
-  // TableItem
-} = _table;
 
 const columns = [{
   title: 'Memeber',

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

@@ -1,43 +1,11 @@
-// const composers = require('../../shared/composers');
-
 const React = require('react');
-// const Styled = require('styled-components');
-//
-// const {
-//   default: styled,
-// } = Styled;
 
-// const {
+const Row = require('./table-row');
-//   clearfix
-// } = composers;
 
-const Row = ({
+const TableBody = ({
-  dataItem = {}
-}) => {
-  const _dataItem = dataItem;
-
-  const rowItems = Object.keys(_dataItem).map( (item, i) => {
-    const value = _dataItem[item];
-
-    return <td key={i}>{value}</td>;
-  });
-
-  return (
-    <tr>
-      {rowItems}
-    </tr>
-  );
-};
-
-Row.propTypes = {
-  dataItem: React.PropTypes.object
-};
-
-const TableRows = ({
   columns,
   data
 }) => {
-
   const rows = columns.map( (column, index) => {
     return <Row dataItem={data[index]} key={index} />;
   });
@@ -49,20 +17,6 @@ const TableRows = ({
   );
 };
 
-TableRows.propTypes = {
-  columns: React.PropTypes.array,
-  data: React.PropTypes.array
-};
-
-const TableBody = ({
-  columns,
-  data
-}) => {
-  return (
-    <TableRows columns={columns} data={data} />
-  );
-};
-
 TableBody.propTypes = {
   columns: React.PropTypes.array,
   data: React.PropTypes.array

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

@@ -8,18 +8,6 @@ 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 StyledTable = styled.table`
   width: 100%;
 `;
@@ -48,31 +36,4 @@ TableContent.propTypes = {
   width: React.PropTypes.string,
 };
 
-const Table = ({
+module.exports = TableContent;
-  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-new/table-head.js

@@ -1,41 +1,10 @@
-// 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,
+  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 StyledTableHeadItem = styled.td`
   ${props => `width: ${props.width}`}
 `;

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

@@ -1,28 +0,0 @@
-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

@@ -1,54 +1,25 @@
-const fns = require('../../shared/functions');
-const composers = require('../../shared/composers');
-
 const React = require('react');
-const Styled = require('styled-components');
 
-const {
+const Row = ({
-  default: styled,
+  dataItem = {}
-  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;
+  const _dataItem = dataItem;
+
+  const rowItems = Object.keys(_dataItem).map( (item, i) => {
+    const value = _dataItem[item];
+
+    return <td key={i}>{value}</td>;
+  });
 
   return (
-    <StyledTableRow itemCount={itemCount}>
+    <tr>
-      {children}
+      {rowItems}
-    </StyledTableRow>
+    </tr>
   );
 };
 
-TableRow.propTypes = {
+Row.propTypes = {
-  children: React.PropTypes.node
+  dataItem: React.PropTypes.object
 };
 
-module.exports = TableRow;
+module.export = Row;