Update docs

README.md

@@ -6,10 +6,10 @@ A React SDK (~9KB gzipped) for creating web applications and toolkits. Inspired
 
 It includes the following components:
 
-* `View`: a flexbox primitive
-* `Text`: a text primitive
 * `Image`: an image primitive
-* (`Component`: base / implementation)
+* `Text`: a text primitive
+* `TextInput`: a text input primitive
+* `View`: a flexbox primitive
 
 And uses a [styling strategy](docs/styling-strategy.md) that maps inline styles
 to single-purpose CSS rules.
@@ -23,12 +23,6 @@ slightly larger CSS file and fewer inline styles.
 All components define explicit `style` PropTypes according to the [`StyleProp`
 spec](docs/StyleProp.spec.md).
 
-### Component
-
-TODO
-
-[`Component`](docs/Component.md)
-
 ### View
 
 TODO
@@ -43,19 +37,24 @@ See this [guide to flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexb
 
 TODO
 
-[`Text` spec](docs/View.spec.md)
+[`Text` spec](docs/Text.spec.md)
+
+### TextInput
+
+TODO
+
+[`Text` spec](docs/TextInput.spec.md)
 
 ### Image
 
 TODO
 
-[`Image` spec](docs/View.spec.md)
+[`Image` spec](docs/Image.spec.md)
 
 ## Styling
 
 Styling is identical to using inline styles in React, but most inline styles
-are converted to unique CSS classes. **This is only true for the SDK
-components**.
+are converted to unique CSS classes.
 
 The companion stylesheet can be referenced as an external resource, inlined, or
 injected by JS.
@@ -90,7 +89,7 @@ const style = {
 The `style` attribute is a simple API for creating element-scoped styles.
 
 ```js
-import {View} from 'react-web-sdk';
+import { View } from 'react-web-sdk';
 
 class Example extends React.Component {
   render() {
@@ -113,6 +112,25 @@ const buttonStyle = {
 }
 ```
 
+The styling strategy can be applied directly to non-SDK elements:
+
+```js
+import { stylingStrategy } from 'react-web-sdk';
+
+class Example extends React.Component {
+  render() {
+    return (
+      <div {...stylingStrategy({
+        style: {
+          opacity: 0.5
+        }
+      })} />
+    );
+  }
+}
+```
+
+
 ## Utilities
 
 #### `getOtherProps(reactComponentInstance)`

docs/TextInput.spec.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

example/example.js

@@ -1,10 +1,17 @@
 import React from 'react';
-import { Image, Text, TextInput, View } from '../dist/main';
+import { Image, Text, TextInput, View, stylingStrategy } from '../dist/main';
 
 class Example extends React.Component {
   render() {
     return (
       <View>
+        <div {...stylingStrategy({
+          style: {
+            backgroundColor: '#000',
+            height: '10px',
+            opacity: '0.5'
+          }
+        })} />
         <View style={styles.grid}>
           {[1,2,3,4,5,6].map((item, i) => {
             return (