Reorganize docs; rewrite README

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
+```