Merge pull request #39 from meriadec/master

Integration stuff.

.eslintrc

@@ -7,6 +7,7 @@
     "__DEV__": false,
     "__PROD__": false,
     "__static": false,
+    "window": false,
   },
   "rules": {
     "camelcase": 0,

src/components/SettingsPage.js → src/components/SettingsPage/Profile.js

@@ -16,7 +16,7 @@ import type { Settings } from 'types/common'
 import { saveSettings } from 'actions/settings'
 import { unlock } from 'reducers/application'
 
-import Box from 'components/base/Box'
+import Box, { Card } from 'components/base/Box'
 import Input from 'components/base/Input'
 import Button from 'components/base/Button'
 
@@ -93,11 +93,9 @@ class SettingsPage extends PureComponent<Props, State> {
 
   render() {
     const { inputValue } = this.state
-
     return (
       <form onSubmit={this.handleSubmit}>
-        <Box p={3}>
-          <Box>{'settings'}</Box>
+        <Card>
           <Box horizontal>
             <input
               type="checkbox"
@@ -119,7 +117,7 @@ class SettingsPage extends PureComponent<Props, State> {
           <Box>
             <Button type="submit">Save</Button>
           </Box>
-        </Box>
+        </Card>
       </form>
     )
   }

src/components/SettingsPage/index.js

@@ -0,0 +1,76 @@
+// @flow
+
+import React, { PureComponent } from 'react'
+
+import Box from 'components/base/Box'
+import Text from 'components/base/Text'
+import Tabs from 'components/base/Tabs'
+
+import TabProfile from './Profile'
+
+type Props = {}
+
+type State = {
+  tab: number,
+}
+
+class SettingsPage extends PureComponent<Props, State> {
+  state = {
+    tab: 6,
+  }
+
+  handleChangeTab = (tab: number) => this.setState({ tab })
+
+  render() {
+    const { tab } = this.state
+
+    return (
+      <Box p={3} flow={4}>
+        <Text fontSize={5}>{'Settings'}</Text>
+        <Tabs
+          index={tab}
+          onTabClick={this.handleChangeTab}
+          items={[
+            {
+              key: 'display',
+              title: 'Affichage',
+              render: () => <div>{'Affichage'}</div>,
+            },
+            {
+              key: 'money',
+              title: 'Monnaie',
+              render: () => <div>{'Monnaie'}</div>,
+            },
+            {
+              key: 'material',
+              title: 'Matériel',
+              render: () => <div>{'Matériel'}</div>,
+            },
+            {
+              key: 'app',
+              title: 'App (beta)',
+              render: () => <div>{'App (beta)'}</div>,
+            },
+            {
+              key: 'tools',
+              title: 'Outils',
+              render: () => <div>{'Outils'}</div>,
+            },
+            {
+              key: 'blockchain',
+              title: 'Blockchain',
+              render: () => <div>{'Blockchain'}</div>,
+            },
+            {
+              key: 'profile',
+              title: 'Profil',
+              render: () => <TabProfile />,
+            },
+          ]}
+        />
+      </Box>
+    )
+  }
+}
+
+export default SettingsPage

src/components/SideBar/Item.js

@@ -46,7 +46,11 @@ const Container = styled(Box).attrs({
   p: 2,
 })`
   cursor: pointer;
-  color: ${p => (p.active ? p.theme.colors.white : '')};
+  color: ${p => (p.isActive ? p.theme.colors.white : '')};
+  background: ${p => (p.isActive ? 'rgba(255, 255, 255, 0.05)' : '')};
+  box-shadow: ${p =>
+    p.isActive ? `${p.theme.colors.blue} 4px 0 0 inset` : `${p.theme.colors.blue} 0 0 0 inset`};
+  transition: ease-in-out 100ms box-shadow;
 
   &:hover {
     background: rgba(255, 255, 255, 0.05);
@@ -54,9 +58,9 @@ const Container = styled(Box).attrs({
 `
 
 const IconWrapper = styled(Box)`
-  width: 30px;
-  height: 30px;
-  border: 2px solid rgba(255, 255, 255, 0.1);
+  width: 25px;
+  height: 25px;
+  border: 2px solid ${p => (p.isActive ? p.theme.colors.blue : 'rgba(255, 255, 255, 0.1)')};
 `
 
 function Item({
@@ -71,15 +75,19 @@ function Item({
   isModalOpened,
 }: Props) {
   const { pathname } = location
-  const active = pathname === linkTo || isModalOpened
+  const isActive = pathname === linkTo || isModalOpened
   return (
     <Container
       onClick={
-        linkTo ? (active ? undefined : () => push(linkTo)) : modal ? () => openModal(modal) : void 0
+        linkTo
+          ? isActive ? undefined : () => push(linkTo)
+          : modal ? () => openModal(modal) : void 0
       }
-      active={active}
+      isActive={isActive}
     >
-      <IconWrapper mr={2}>{icon || null}</IconWrapper>
+      <IconWrapper isActive={isActive} mr={2}>
+        {icon || null}
+      </IconWrapper>
       <div>
         <Text fontWeight="bold" fontSize={1}>
           {children}

src/components/base/Box/index.js

@@ -1,6 +1,6 @@
 // @flow
 
-import React from 'react'
+import React, { PureComponent } from 'react'
 import styled from 'styled-components'
 import {
   alignItems,
@@ -59,7 +59,7 @@ const RawCard = styled(Box).attrs({ bg: 'white', p: 3 })`
   border-radius: 5px;
 `
 
-export const Card = ({ title, ...props }: { title: string }) => {
+export const Card = ({ title, ...props }: { title?: string }) => {
   if (title) {
     return (
       <Box flow={2}>
@@ -73,10 +73,31 @@ export const Card = ({ title, ...props }: { title: string }) => {
   return <RawCard {...props} />
 }
 
+Card.defaultProps = {
+  title: undefined,
+}
+
 export const GrowScroll = (props: *) => (
   <Box grow relative>
     <Box sticky scroll {...props} />
   </Box>
 )
 
+export class Tabbable extends PureComponent<any> {
+  componentDidMount() {
+    window.addEventListener('keydown', this.handleKeydown)
+  }
+  componentWillUnmount() {
+    window.removeEventListener('keydown', this.handleKeydown)
+  }
+  handleKeydown = (e: SyntheticKeyboardEvent<any>) => {
+    if (e.which === 13 && this.props.onClick) {
+      this.props.onClick(e)
+    }
+  }
+  render() {
+    return <Box tabIndex={0} {...this.props} />
+  }
+}
+
 export default Box

src/components/base/Tabs/index.js

@@ -0,0 +1,51 @@
+// @flow
+
+import React, { Fragment } from 'react'
+import styled from 'styled-components'
+
+import type { Element } from 'react'
+
+import Box, { Tabbable } from 'components/base/Box'
+
+const Tab = styled(Tabbable).attrs({
+  flex: 1,
+  pb: 1,
+  align: 'center',
+  justify: 'center',
+  fontSize: 1,
+})`
+  border-bottom: 2px solid transparent;
+  border-bottom-color: ${p => (p.isActive ? p.theme.colors.blue : '')};
+  color: ${p => (p.isActive ? p.theme.colors.blue : p.theme.colors.steel)};
+  font-weight: ${p => (p.isActive ? 'bold' : '')};
+  margin-bottom: -1px;
+  outline: none;
+  cursor: ${p => (p.isActive ? 'default' : 'pointer')};
+`
+
+type Item = {
+  key: string | number,
+  title: string | Element<any>,
+  render: () => Element<any>,
+}
+
+type Props = {
+  items: Array<Item>,
+  index: number,
+  onTabClick: number => void,
+}
+
+const Tabs = ({ items, index, onTabClick }: Props) => (
+  <Fragment>
+    <Box horizontal borderBottom borderWidth={1} borderColor="argile">
+      {items.map((item, i) => (
+        <Tab key={item.key} isActive={index === i} onClick={() => onTabClick(i)}>
+          {item.title}
+        </Tab>
+      ))}
+    </Box>
+    {items[index] && items[index].render()}
+  </Fragment>
+)
+
+export default Tabs

src/components/base/Tabs/stories.js

@@ -0,0 +1,28 @@
+import React from 'react'
+
+import { number } from '@storybook/addon-knobs'
+import { action } from '@storybook/addon-actions'
+import { storiesOf } from '@storybook/react'
+
+import Tabs from 'components/base/Tabs'
+
+const stories = storiesOf('Tabs', module)
+
+stories.add('basic', () => (
+  <Tabs
+    index={number('index', 0)}
+    onTabClick={action('onTabClick')}
+    items={[
+      {
+        key: 'first',
+        title: 'first tab',
+        render: () => <div>{'first tab content'}</div>,
+      },
+      {
+        key: 'second',
+        title: 'second tab',
+        render: () => <div>{'second tab content'}</div>,
+      },
+    ]}
+  />
+))

src/styles/theme.js

@@ -6,6 +6,7 @@ export default {
     white: '#ffffff',
 
     argile: '#eeeeee',
+    blue: '#6193ff',
     cream: '#f9f9f9',
     grenade: '#ea2e49',
     lead: '#999999',