Merge pull request #42 from dabapps/tables

Tables
dabapps · May 23, 2017 · ea4e15d · ea4e15d
2 parents a3c15fe + f0ecd5d
commit ea4e15d
Show file tree

Hide file tree

Showing 15 changed files with 839 additions and 12 deletions.
diff --git a/README.md b/README.md
@@ -10,3 +10,35 @@ Clone the repo and run the following to start all the watchers, and serve `docs/
 npm install
 npm start
 ```
+
+## Usage
+
+### Install
+
+You need to install Roe and its peer dependencies with npm. Npm should warn you if you haven't installed any peer dependencies.
+
+```shell
+npm i dabapps/roe#v0.0.0
+```
+
+See [releases](https://github.com/dabapps/roe/releases) for a full list of versions.
+
+### Less
+
+Include Roe in your main `index.less` file. Do not use `../` in the path.
+
+```less
+@import 'node_modules/roe/src/less/index.less';
+```
+
+### Components
+
+All components are exported, named, at the root level.
+
+```javascript
+import {
+  Column,
+  Container,
+  Row
+} from 'roe';
+```
diff --git a/docker/build.jenkins b/docker/build.jenkins
@@ -1,7 +1,12 @@
-#!/bin/bash -l
+#!/usr/bin/env bash
+
 . /root/.nvm/nvm.sh
+
+set -e
+
 nvm install
+
 npm install
+
 npm test
-npm run dist
 npm run build
diff --git a/docs/src/ts/index.tsx b/docs/src/ts/index.tsx
@@ -21,14 +21,15 @@ import { Hides } from './hides';
 import { Inputs } from './inputs';
 import { Ipsum } from './ipsum';
 import { Layout } from './layout';
+import { Tables } from './tables';
 import { Text } from './text';
 import { Wells } from './wells';
 
 const variables = fs.readFileSync(path.join(__dirname, '../../../src/less/variables.less'), 'utf8');
 
 const packageJson = require( '../../../package.json'); // tslint:disable-line:no-var-requires
 
-class App extends React.Component<void, void> {
+class App extends React.Component<{}, void> {
   public render () {
     return (
       <Container>
@@ -55,6 +56,7 @@ class App extends React.Component<void, void> {
         <Inputs />
         <Ipsum />
         <Layout />
+        <Tables />
         <Text />
         <Wells />
 
@@ -75,4 +77,7 @@ class App extends React.Component<void, void> {
   }
 }
 
-ReactDOM.render(<App />, document.getElementById('app'));
+ReactDOM.render(
+  <App />,
+  document.getElementById('app')
+);
diff --git a/docs/src/ts/inputs.tsx b/docs/src/ts/inputs.tsx
@@ -28,7 +28,7 @@ export const Inputs = () => (
         <p>
           Textarea
         </p>
-        <textarea value="Content" />
+        <textarea />
 
         <p>
           Input
@@ -144,7 +144,7 @@ export const Inputs = () => (
             <p>
               Textarea
             </p>
-            <textarea value="Content" />
+            <textarea />
 
             <p>
               Input

diff --git a/docs/src/ts/tables.tsx b/docs/src/ts/tables.tsx
@@ -0,0 +1,179 @@
+import * as React from 'react';
+
+import {
+  CodeBlock,
+  Column,
+  Row,
+  Section,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow
+} from '../../../src/ts';
+
+const data = [
+  ['', 'Column header 1', 'Column header 2', 'Column header 3', 'Column header 4', 'Column header 5'],
+  ['Row header 1', 'Cell 1', 'Cell 2', 'Cell 3', 'Cell 4', 'Cell 5'],
+  ['Row header 2', 'Cell 1', 'Cell 2', 'Cell 3', 'Cell 4', 'Cell 5'],
+  ['Row header 3', 'Cell 1', 'Cell 2', 'Cell 3', 'Cell 4', 'Cell 5'],
+  ['Row header 4', 'Cell 1', 'Cell 2', 'Cell 3', 'Cell 4', 'Cell 5'],
+  ['Row header 5', 'Cell 1', 'Cell 2', 'Cell 3', 'Cell 4', 'Cell 5']
+];
+
+const [ headers = [], ...body ] = data;
+const smallBody = [...body].splice(0, 2);
+
+const COLUMN_HEADER_WIDTH = 150;
+
+export const Tables = () => {
+  return (
+    <Section>
+      <Row>
+        <Column>
+          <h2>
+            Tables
+          </h2>
+        </Column>
+      </Row>
+      <Row>
+        <Column>
+          <h3>
+            Demo
+          </h3>
+          <Table bordered condensed>
+            <TableBody>
+              {
+                smallBody.map((row = [], rowIndex) => (
+                  <TableRow key={rowIndex + row.join()}>
+                    {
+                      row.map((cell) => (
+                        <TableCell key={cell}>
+                          {cell}
+                        </TableCell>
+                      ))
+                    }
+                  </TableRow>
+                ))
+              }
+            </TableBody>
+          </Table>
+
+          <Table striped hover fill fixColumnHeaders columnHeaderMaxWidth={COLUMN_HEADER_WIDTH}>
+            <TableHead>
+              <TableRow>
+                {
+                  headers.map((header, index) => index === 0 ? (
+                    <TableHeader key={header} maxWidth={COLUMN_HEADER_WIDTH} />
+                  ) : (
+                    <TableHeader key={header}>
+                      {header}
+                    </TableHeader>
+                  ))
+                }
+              </TableRow>
+            </TableHead>
+            <TableBody>
+              {
+                body.map((row = [], rowIndex) => (
+                  <TableRow key={rowIndex + row.join()}>
+                    {
+                      row.map((cell, index) => index === 0 ? (
+                        <TableHeader key={cell} maxWidth={COLUMN_HEADER_WIDTH}>
+                          {cell}
+                        </TableHeader>
+                      ) : (
+                        <TableCell key={cell}>
+                          {cell}
+                        </TableCell>
+                      ))
+                    }
+                  </TableRow>
+                ))
+              }
+            </TableBody>
+          </Table>
+        </Column>
+      </Row>
+      <Row>
+        <Column>
+          <h3>
+            Code
+          </h3>
+          <CodeBlock language="javascript">
+            {`
+              const data = [
+                ['', 'Column header 1', 'Column header 2', 'Column header 3', 'Column header 4', 'Column header 5'],
+                ['Row header 1', 'Cell 1', 'Cell 2', 'Cell 3', 'Cell 4', 'Cell 5'],
+                ['Row header 2', 'Cell 1', 'Cell 2', 'Cell 3', 'Cell 4', 'Cell 5'],
+                ['Row header 3', 'Cell 1', 'Cell 2', 'Cell 3', 'Cell 4', 'Cell 5'],
+                ['Row header 4', 'Cell 1', 'Cell 2', 'Cell 3', 'Cell 4', 'Cell 5'],
+                ['Row header 5', 'Cell 1', 'Cell 2', 'Cell 3', 'Cell 4', 'Cell 5']
+              ];
+
+              const [ headers = [], ...body ] = data;
+              const smallBody = [...body].splice(0, 2);
+            `}
+          </CodeBlock>
+          <CodeBlock language="javascript">
+            {`
+              <Table bordered condensed>
+                <TableBody>
+                  {
+                    smallBody.map((row = [], rowIndex) => (
+                      <TableRow key={rowIndex + row.join()}>
+                        {
+                          row.map((cell) => (
+                            <TableCell key={cell}>
+                              {cell}
+                            </TableCell>
+                          ))
+                        }
+                      </TableRow>
+                    ))
+                  }
+                </TableBody>
+              </Table>
+
+              <Table striped hover fill fixColumnHeaders columnHeaderMaxWidth={COLUMN_HEADER_WIDTH}>
+                <TableHead>
+                  <TableRow>
+                    {
+                      headers.map((header, index) => index === 0 ? (
+                        <TableHeader key={header} maxWidth={COLUMN_HEADER_WIDTH} />
+                      ) : (
+                        <TableHeader key={header}>
+                          {header}
+                        </TableHeader>
+                      ))
+                    }
+                  </TableRow>
+                </TableHead>
+                <TableBody>
+                  {
+                    body.map((row = [], rowIndex) => (
+                      <TableRow key={rowIndex + row.join()}>
+                        {
+                          row.map((cell, index) => index === 0 ? (
+                            <TableHeader key={cell} maxWidth={COLUMN_HEADER_WIDTH}>
+                              {cell}
+                            </TableHeader>
+                          ) : (
+                            <TableCell key={cell}>
+                              {cell}
+                            </TableCell>
+                          ))
+                        }
+                      </TableRow>
+                    ))
+                  }
+                </TableBody>
+              </Table>
+            `}
+          </CodeBlock>
+        </Column>
+      </Row>
+    </Section>
+  );
+};
diff --git a/package.json b/package.json
@@ -1,14 +1,14 @@
 {
   "name": "roe",
-  "version": "0.1.7",
+  "version": "0.2.0",
   "description": "A Collection of React Components for Project Development",
   "main": "dist/js/index.js",
   "types": "dist/js/index.d.ts",
   "scripts": {
     "start": "./scripts/start",
     "build": "./scripts/build",
     "dist": "./scripts/dist",
-    "lint-js": "tslint --project tsconfig.json --type-check '{src,tests,types,docs}/**/*.{ts,tsx}'",
+    "lint-js": "tslint --project tsconfig.json --type-check '@(src|tests|types|docs)/**/*.@(ts|tsx)'",
     "lint-less": "lesshint 'src/less/' 'docs/src/less/'",
     "lint": "npm run lint-js && npm run lint-less",
     "tests": "jest",
@@ -34,7 +34,7 @@
   },
   "homepage": "https://github.com/dabapps/roe#readme",
   "dependencies": {
-    "@types/classnames": "0.0.32",
+    "@types/classnames": "2.2.0",
     "@types/highlight.js": "9.1.9",
     "@types/random-seed": "0.3.2",
     "@types/react": "15.0.22",
@@ -52,7 +52,7 @@
     "react": "15.5.4",
     "react-dom": "15.5.4",
     "tsify": "3.0.1",
-    "typescript": "2.2.2"
+    "typescript": "2.3.3"
   },
   "devDependencies": {
     "@types/jest": "19.2.3",
@@ -62,7 +62,7 @@
     "concurrently": "3.4.0",
     "envify": "4.0.0",
     "http-server": "0.9.0",
-    "jest": "20.0.1",
+    "jest": "20.0.3",
     "lesshint": "3.3.1",
     "livereload": "0.6.2",
     "react-test-renderer": "15.5.4",

diff --git a/src/less/index.less b/src/less/index.less
@@ -8,6 +8,7 @@
 @import 'layout.less';
 @import 'text.less';
 @import 'well.less';
+@import 'tables.less';
 // NOTE: float and hide should remaing after other imports
 @import 'float.less';
 @import 'hide.less';
diff --git a/src/less/overrides.less b/src/less/overrides.less
@@ -127,3 +127,47 @@ form {
     opacity: 0.5;
   }
 }
+
+table,
+thead,
+tbody,
+tr,
+th,
+td {
+  border-collapse: collapse;
+  border: @border-none;
+}
+
+tr {
+  background-color: @white;
+}
+
+th,
+td {
+  padding: @padding-base;
+  background-color: @white;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  vertical-align: middle;
+  text-align: left;
+}
+
+thead tr {
+  border-bottom: @border-base;
+}
+
+thead,
+tbody {
+  tr {
+    border-bottom: @border-base;
+  }
+}
+
+tbody {
+  tr {
+    &:last-child {
+      border-bottom: @border-none;
+    }
+  }
+}