Added jsx-a11y lint support and initial docz setup

.eslintrc

@@ -7,7 +7,8 @@
     "standard",
     "standard-react",
     "prettier",
-    "prettier/react"
+    "prettier/react",
+    "plugin:jsx-a11y/recommended"
   ],
   "parser": "babel-eslint",
   "parserOptions": {
@@ -17,7 +18,7 @@
     },
     "sourceType": "module"
   },
-  "plugins": ["prettier", "react", "import"],
+  "plugins": ["prettier", "react", "import", "jsx-a11y"],
   "rules": {
     "import/no-unresolved": ["error", { "ignore": ["^react$", "^styled-components$"] }],
     "prettier/prettier": [

.gitignore

@@ -3,3 +3,4 @@ node_modules
 yarn.lock
 privateKey.json
 package-lock.json
+.docz

components/Box.js

@@ -0,0 +1,28 @@
+import styled from 'styled-components'
+import {
+  height,
+  width,
+  space,
+  color,
+  flex,
+  flexDirection,
+  flexWrap,
+  display,
+  alignSelf,
+  alignItems,
+  justifyContent,
+} from 'styled-system'
+
+export default styled.div`
+  ${height}
+  ${width}
+  ${space}
+  ${color}
+  ${flex}
+  ${flexDirection}
+  ${flexWrap}
+  ${display}
+  ${alignSelf}
+  ${alignItems}
+  ${justifyContent}
+`

components/Card.js

@@ -0,0 +1,16 @@
+import styled from 'styled-components'
+import Box from './Box'
+
+const onHover = `
+  &:hover {
+    transform: translateY(-4px);
+    cursor: pointer;
+  }
+`
+
+export default styled(Box)`
+  box-shadow: 0px -2px 18px 0px rgba(72, 89, 102, 0.25);
+  border-radius: 4px;
+  transition: all 0.15s ease;
+  ${({ onClick }) => onClick && onHover};
+`

components/Card.mdx

@@ -0,0 +1,45 @@
+---
+name: Card
+---
+
+import { Playground, PropsTable } from 'docz'
+import Card from "../components/Card"
+import Text from "../components/Text"
+
+# Card
+<PropsTable of={Card} />
+
+## Default
+<Playground>
+  <Card p={3}>
+    <Text textAlign="center" fontWeight="500">Hello world!</Text>
+  </Card>
+</Playground>
+
+## Fixed
+<Playground>
+  <Card
+    width={200}
+    height={200}
+    display="flex"
+    alignItems="center"
+    justifyContent="center"
+  >
+    <Text fontWeight="500">Hello world!</Text>
+  </Card>
+</Playground>
+
+## Click action
+<Playground>
+  <Card
+    width={200}
+    height={100}
+    display="flex"
+    alignItems="center"
+    justifyContent="center"
+    onClick={() => alert('Action!')}
+  >
+    <Text fontWeight="500">Click me</Text>
+  </Card>
+</Playground>
+

components/Layout.js

@@ -0,0 +1,7 @@
+import styled from 'styled-components'
+import Box from './Box'
+
+export default styled(Box)`
+  max-width: 64em;
+  margin: 0 auto;
+`

components/Text.js

@@ -0,0 +1,12 @@
+import styled from 'styled-components'
+import { space, color, fontSize, fontWeight, textAlign } from 'styled-system'
+
+export default styled.p`
+  ${color}
+  ${space}
+  ${fontSize}
+  ${fontWeight}
+  ${textAlign}
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",Helvetica, Arial, sans-serif,"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+`

package.json

@@ -8,7 +8,9 @@
     "build": "next build",
     "start": "NODE_ENV=production node server.js",
     "lint": "eslint .",
-    "lint:fix": "eslint --fix ."
+    "lint:fix": "eslint --fix .",
+    "docz:dev": "docz dev",
+    "docz:build": "docz build"
   },
   "dependencies": {
     "express": "^4.16.3",
@@ -18,16 +20,22 @@
     "next-routes": "^1.4.2",
     "react": "^16.3.1",
     "react-dom": "^16.3.1",
-    "styled-components": "^3.2.5"
+    "react-spring": "^5.5.1",
+    "styled-components": "^3.2.5",
+    "styled-system": "^3.0.2",
+    "webpack": "^4.16.4",
+    "webpack-cli": "^3.1.0"
   },
   "devDependencies": {
     "babel-eslint": "^8.2.6",
     "babel-plugin-styled-components": "^1.5.1",
+    "docz": "^0.8.0",
     "eslint": "^4.10.0",
     "eslint-config-prettier": "^2.7.0",
     "eslint-config-standard": "^10.2.1",
     "eslint-config-standard-react": "^5.0.0",
     "eslint-plugin-import": "^2.8.0",
+    "eslint-plugin-jsx-a11y": "^6.1.1",
     "eslint-plugin-node": "^5.2.1",
     "eslint-plugin-prettier": "^2.3.1",
     "eslint-plugin-promise": "^3.6.0",

pages/_document.js

@@ -13,7 +13,7 @@ export default class MyDocument extends Document {
   }
   render() {
     return (
-      <html>
+      <html lang="en">
         <Head>
           <meta name="viewport" content="width=device-width, initial-scale=1" />
           <meta name="description" content="EIP0 - Signalling website" />

pages/index.js

@@ -1,17 +1,34 @@
 import React, { Component } from 'react'
 
+import { Spring } from 'react-spring'
+import Layout from '../components/Layout'
+import Card from '../components/Card'
+import Text from '../components/Text'
+
 export default class App extends Component {
   static async getInitialProps({ query }) {
     return query
   }
 
   state = {
-    hello: 'world',
+    world: 'world',
   }
 
   render() {
-    const { hello } = this.state
+    const { world } = this.state
 
-    return <div>{hello}</div>
+    return (
+      <Layout p={3}>
+        <Spring from={{ opacity: 0 }} to={{ opacity: 1 }}>
+          {styles => (
+            <Card p={3} style={styles}>
+              <Text textAlign="center" fontWeight="500">
+                Hello {world}!
+              </Text>
+            </Card>
+          )}
+        </Spring>
+      </Layout>
+    )
   }
 }