diff --git a/README.md b/README.md index 69ce33f6..d71ad962 100644 --- a/README.md +++ b/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 ( +
+ ); + } +} +``` + + ## Utilities #### `getOtherProps(reactComponentInstance)` diff --git a/docs/TextInput.spec.md b/docs/TextInput.spec.md new file mode 100644 index 00000000..689be3cf --- /dev/null +++ b/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 diff --git a/example/example.js b/example/example.js index 8f67c1f1..3f8dc15d 100644 --- a/example/example.js +++ b/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 (