Reorganize docs; rewrite README

docs/components/Image.md

@@ -0,0 +1,66 @@
+# Image spec
+
+#### PropTypes
+
+All other props are transferred directly to the `element`.
+
++ `accessibilityLabel`: `string`
++ `async`: `bool` (TODO)
++ `className`: `string`
++ `source`: `string`
++ `style`: `ImageStylePropTypes`
+
+#### ImageStylePropTypes
+
++ `BackgroundPropTypes`
++ `BorderThemePropTypes`
++ `LayoutPropTypes`
++ `opacity`: `string`
+
+#### Examples
+
+```js
+import {Image} from 'react-web-sdk';
+import React, {PropTypes} from 'react';
+
+class Avatar extends React.Component {
+  static propTypes = {
+    size: PropTypes.oneOf(['small', 'normal', 'large']),
+    user: PropTypes.object
+  }
+
+  static defaultProps = {
+    size: 'normal'
+  }
+
+  render() {
+    return (
+      <Image
+        accessibilityLabel={`${user.name}'s profile picture`}
+        source={user.avatarUrl}
+        style={ ...style.base, ...style[this.props.size] }
+      />
+    );
+  }
+}
+
+const style = {
+  base: {
+    borderColor: 'white',
+    borderRadius: '5px',
+    borderWidth: '5px'
+  },
+  small: {
+    height: '32px',
+    width: '32px'
+  },
+  normal: {
+    height: '48px',
+    width: '48px'
+  },
+  large: {
+    height: '64px',
+    width: '32px'
+  }
+}
+```

docs/components/Text.md

@@ -0,0 +1,70 @@
+# Text spec
+
+Text layout and styles.
+
+#### PropTypes
+
+All other props are transferred directly to the `element`.
+
++ `element`: `func` or `string` (default `"div"`)
++ `style`: `TextStylePropTypes`
+
+#### TextStylePropTypes
+
++ ViewStylePropTypes
++ TypographicPropTypes
+
+## Examples
+
+```js
+import {Text} from 'react-web-sdk';
+import React, {PropTypes} from 'react';
+
+class PrettyText extends React.Component {
+  static propTypes = {
+    color: PropTypes.oneOf(['white', 'gray', 'red']),
+    size: PropTypes.oneOf(['small', 'normal', 'large']),
+    weight: PropTypes.oneOf(['light', 'normal', 'bold'])
+  }
+
+  static defaultProps = {
+    color: 'gray',
+    size: 'normal',
+    weight: 'normal'
+  }
+
+  render() {
+    const { color, size, style, weight, ...other } = this.props;
+
+    return (
+      <Text
+        ...other
+        style={{
+          ...style,
+          ...localStyle.color[color],
+          ...localStyle.size[size],
+          ...localStyle.weight[weight]
+        }}
+      />
+    );
+  }
+}
+
+const localStyle = {
+  color: {
+    white: { color: 'white' },
+    gray: { color: 'gray' },
+    red: { color: 'red' }
+  },
+  size: {
+    small: { fontSize: '0.85rem', padding: '0.5rem' },
+    normal: { fontSize: '1rem', padding: '0.75rem' },
+    large: { fontSize: '1.5rem', padding: '1rem' }
+  },
+  weight: {
+    light: { fontWeight: '300' },
+    normal: { fontWeight: '400' },
+    bold: { fontWeight: '700' }
+  }
+}
+```

docs/components/TextInput.md

@@ -0,0 +1,15 @@
+# TextInput spec
+
+Text input layout and styles.
+
+#### PropTypes
+
+All other props are transferred directly to the `element`.
+
++ `component`: `func` or `string` (default `"div"`)
++ `style`: `TextStylePropTypes`
+
+#### TextStylePropTypes
+
++ ViewStylePropTypes
++ TypographicPropTypes

docs/components/View.md

@@ -0,0 +1,66 @@
+# View spec
+
+`View` is a flexbox container and the fundamental building block for UI. It is
+designed to be nested inside other `View`'s and to have 0-to-many children of
+any type.
+
+## PropTypes
+
+All other props are transferred directly to the `element`.
+
++ `element`: `func` or `string` (default `"div"`)
++ `pointerEvents`: `oneOf('all', 'box-only', 'box-none', 'none')`
++ `style`: `ViewStylePropTypes`
+
+## ViewStylePropTypes
+
++ BackgroundPropTypes
++ BorderThemePropTypes
++ LayoutPropTypes
++ `boxShadow`: `string`
++ `color`: `string`
++ `opacity`: `number`
+
+## ViewStyleDefaultProps
+
+Implements the default styles from
+[facebook/css-layout](https://github.com/facebook/css-layout).
+
+1. All the flex elements are oriented from top-to-bottom, left-to-right and do
+   not shrink. This is how things are laid out using the default CSS settings
+   and what you'd expect.
+
+2. The most convenient way to express the relation between width and other
+   box-model properties.
+
+3. Everything is `display:flex` by default. All the behaviors of `block` and
+   `inline-block` can be expressed in term of flex but not the opposite.
+
+4. Everything is `position:relative`. This makes `position:absolute` target the
+   direct parent and not some parent which is either relative or absolute. If
+   you want to position an element relative to something else, you should move
+   it in the DOM instead of relying of CSS. It also makes `top`, `left`,
+   `right`, `bottom` do something when not specifying `position:absolute`.
+
+```js
+const ViewStyleDefaultProps = {
+  alignItems: 'stretch', // 1
+  borderWidth: 0,
+  borderStyle: 'solid',
+  boxSizing: 'border-box', // 2
+  display: 'flex', // 3
+  flexBasis: 'auto', // 1
+  flexDirection: 'column', // 1
+  flexShrink: 0, // 1
+  listStyle: 'none',
+  margin: 0,
+  padding: 0,
+  position: 'relative' // 4
+};
+```
+
+## Examples
+
+```js
+// TODO
+```