JonathonAshworth

import React from 'react'

import composeStyledComponent from '../utils/composeStyledComponent.jsx'

const HelloWorld = ({ styles }) =>
    <div>
        <h1 style={styles.header}>Hello World!</h1>
        <h2 style={styles.subheading}>How's it going?</h2>
    </div>

JonathonAshworth

import React from 'react'
import { string, object } from 'prop-types'

import styles from './AnimatedHeightContainer.css'

class AnimatedHeightContainer extends React.Component {

    static propTypes = {
        className: string,
        style: object,

JonathonAshworth

const fromIso = isoDate => {
    const intDiv = (l,r) => ~~(l/r)
    const [y, m, d] = isoDate.split('-').map(s => parseInt(s, 10))
    return intDiv(1461 * (y + 4800 + intDiv(m - 14, 12)), 4)
        + intDiv(367 * (m - 2 - 12 * intDiv(m - 14, 12)), 12)
        - intDiv(3 * intDiv(y + 4900 + intDiv(m - 14, 12), 100), 4)
        + d - 32075
}

const fromIsoInterval = isoInterval =>

JonathonAshworth

// The form can sit in the data store in it's most basic format, one property for each field
const initialState = {
    accountForm: {
        accountName: '',
        accountBsB: '',
        accountNumber: '',
    },
}

// We define a selector that validates the form and gives us the errors

JonathonAshworth

<LabelList labels={[
    { id: 3, text: "Baz" },
    { id: 1, text: "Foo" },
    { id: 2, text: "Bar" }
]} />

// result:
// <div>
//   <p>Foo</p>
//   <p>Bar</p>

JonathonAshworth

import React, { PropTypes, Component } from 'react'

import styles from './../styles/Collapse.scss'

class Collapse extends Component {

    static propTypes = {
        open: PropTypes.bool,
        className: PropTypes.string,
    }

JonathonAshworth

/*
	flattens nested objects, prefixing properties according to their place in the structure
 	
 	example:

 	origin: {
		planets: {
			earth: 1,
			mars: 2,
			jupiter: 3

JonathonAshworth

export default {
  colorBlue: "#0000FF",
  colorRed: "#FF0000",
  
  // Mobile first
  breakpointMedium: "@media screen and (min-width: 720px)",
  breakpointLarge: "@media screen and (min-width: 1024px)"
};

JonathonAshworth

.tab {
    background-color: #fff;
    text-align: center;
    padding: 10px;
    cursor: pointer;
    color: #000;
    border-color: #000;
}

.activeTab {

JonathonAshworth

// Fairly typical page layout

const Foo = props =>
    <div className="page">
        <div className="header">
            <Logo/>
            <Menu/>
            <AccountOptions/>
        </div>
        <div className="body">