Fix props table for docs

Stop using the built-in Props table from Storybook (which wasn't working.)

packages/docs/src/components/ActivityIndicator/ActivityIndicator.stories.js

@@ -1,29 +0,0 @@
-import PropTypes from 'prop-types';
-
-const ofProps = () => null;
-
-ofProps.propTypes = {
-  '...ViewPropTypes': PropTypes.any,
-  animating: PropTypes.bool,
-  color: PropTypes.string,
-  hidesWhenStopped: PropTypes.bool,
-  size: PropTypes.oneOfType([PropTypes.oneOf(['small', 'large']), PropTypes.number])
-};
-
-ofProps.defaultProps = {
-  animating: true,
-  color: '#1976D2',
-  hidesWhenStopped: true,
-  size: 'small'
-};
-
-export default {
-  title: 'Components|ActivityIndicator',
-  includeStories: []
-};
-
-export { ofProps };
-export { default as animating } from './examples/Animating';
-export { default as color } from './examples/Color';
-export { default as hidesWhenStopped } from './examples/HidesWhenStopped';
-export { default as size } from './examples/Size';

packages/docs/src/components/ActivityIndicator/ActivityIndicator.stories.mdx

@@ -1,5 +1,5 @@
-import { Meta, Props, Story, Preview } from '@storybook/addon-docs/blocks';
-import * as Stories from './ActivityIndicator.stories.js';
+import { Meta, Story, Preview } from '@storybook/addon-docs/blocks';
+import * as Stories from './examples';
 
 <Meta title="Components|ActivityIndicator" />
 
@@ -9,7 +9,13 @@ Displays a customizable activity indicator.
 
 ## Props
 
-<Props of={Stories.ofProps} />
+| Name                      | Type      | Default |
+| ------------------------- | --------- | ------- |
+| ...ViewProps              | | |
+| animating                 | ?boolean  | true |
+| color                     | ?string   | '#1976D2' |
+| hidesWhenStopped          | ?boolean  | true |
+| size                      | 'small' \| 'large' \| number | 'small' |
 
 ### animating
 

packages/docs/src/components/ActivityIndicator/examples/index.js

@@ -0,0 +1,4 @@
+export { default as animating } from './Animating';
+export { default as color } from './Color';
+export { default as hidesWhenStopped } from './HidesWhenStopped';
+export { default as size } from './Size';

packages/docs/src/components/Button/Button.stories.js

@@ -1,27 +0,0 @@
-import PropTypes from 'prop-types';
-
-const ofProps = () => {};
-
-ofProps.propTypes = {
-  accessibilityLabel: PropTypes.string,
-  color: PropTypes.string,
-  disabled: PropTypes.bool,
-  onPress: PropTypes.func,
-  testID: PropTypes.string,
-  title: PropTypes.string
-};
-
-ofProps.defaultProps = {
-  color: '#2196F3',
-  disabled: false
-};
-
-export default {
-  title: 'Components|Button',
-  includeStories: []
-};
-
-export { ofProps };
-export { default as color } from './examples/Color';
-export { default as disabled } from './examples/Disabled';
-export { default as onPress } from './examples/OnPress';

packages/docs/src/components/Button/Button.stories.mdx

@@ -1,5 +1,5 @@
-import { Meta, Props, Story, Preview } from '@storybook/addon-docs/blocks';
-import * as Stories from './Button.stories.js';
+import { Meta, Story, Preview } from '@storybook/addon-docs/blocks';
+import * as Stories from './examples';
 
 <Meta title="Components|Button" />
 
@@ -10,7 +10,14 @@ build your own custom button using `TouchableOpacity` or `TouchableHighlight`.
 
 ## Props
 
-<Props of={Stories.ofProps} />
+| Name                      | Type      | Default |
+| ------------------------- | --------- | ------- |
+| accessibilityLabel        | ?string | |
+| color                     | ?string   | '#2196F3' |
+| disabled                  | ?boolean  | false |
+| onPress                   | ?Function | |
+| testID                    | ?string   | |
+| title                     | ?string   | |
 
 ### color
 

packages/docs/src/components/Button/examples/index.js

@@ -0,0 +1,3 @@
+export { default as color } from './Color';
+export { default as disabled } from './Disabled';
+export { default as onPress } from './OnPress';

packages/docs/src/components/CheckBox/CheckBox.stories.js

@@ -1,29 +0,0 @@
-import PropTypes from 'prop-types';
-
-const ofProps = () => {};
-
-ofProps.propTypes = {
-  '...ViewPropTypes': PropTypes.any,
-  color: PropTypes.string,
-  disabled: PropTypes.bool,
-  onChange: PropTypes.func,
-  onValueChange: PropTypes.func,
-  value: PropTypes.bool
-};
-
-ofProps.defaultProps = {
-  disabled: false,
-  value: false
-};
-
-export default {
-  title: 'Components|CheckBox',
-  includeStories: []
-};
-
-export { ofProps };
-export { default as color } from './examples/Color';
-export { default as disabled } from './examples/Disabled';
-export { default as onValueChange } from './examples/OnValueChange';
-export { default as value } from './examples/Value';
-export { default as customSize } from './examples/CustomSize';

packages/docs/src/components/CheckBox/CheckBox.stories.mdx

@@ -1,5 +1,5 @@
-import { Meta, Props, Story, Preview } from '@storybook/addon-docs/blocks';
-import * as Stories from './CheckBox.stories.js';
+import { Meta, Story, Preview } from '@storybook/addon-docs/blocks';
+import * as Stories from './examples';
 
 <Meta title="Components|CheckBox" />
 
@@ -12,7 +12,14 @@ supplied `value` prop instead of the expected result of any user actions.
 
 ## Props
 
-<Props of={Stories.ofProps} />
+| Name                      | Type      | Default |
+| ------------------------- | --------- | ------- |
+| ...ViewProps              | | |
+| color                     | ?Color    | '#AAB8C2' |
+| disabled                  | ?boolean  | false |
+| onChange                  | ?Function | |
+| onValueChange             | ?Function | |
+| value                     | ?boolean  | false |
 
 ### color
 

packages/docs/src/components/CheckBox/examples/index.js

@@ -0,0 +1,5 @@
+export { default as color } from './Color';
+export { default as disabled } from './Disabled';
+export { default as onValueChange } from './OnValueChange';
+export { default as value } from './Value';
+export { default as customSize } from './CustomSize';

packages/docs/src/components/FlatList/FlatList.stories.js

@@ -1,7 +0,0 @@
-export default {
-  title: 'Components|FlatList',
-  includeStories: []
-};
-
-export { default as singleColumn } from './examples/SingleColumn';
-export { default as multiColumn } from './examples/MultiColumn';

packages/docs/src/components/FlatList/FlatList.stories.mdx

@@ -1,5 +1,5 @@
 import { Meta, Props, Story, Preview } from '@storybook/addon-docs/blocks';
-import * as Stories from './FlatList.stories.js';
+import * as Stories from './examples';
 
 <Meta title="Components|FlatList" />
 

packages/docs/src/components/FlatList/examples/index.js

@@ -0,0 +1,2 @@
+export { default as singleColumn } from './SingleColumn';
+export { default as multiColumn } from './MultiColumn';

packages/docs/src/components/Image/Image.stories.js

@@ -1,48 +0,0 @@
-import PropTypes from 'prop-types';
-
-const ofProps = () => {};
-
-ofProps.propTypes = {
-  '...ViewPropTypes': PropTypes.any,
-  blurRadius: PropTypes.number,
-  defaultSource: PropTypes.object, // ImageSourcePropType,
-  draggable: PropTypes.bool,
-  onError: PropTypes.func,
-  onLoad: PropTypes.func,
-  onLoadEnd: PropTypes.func,
-  onLoadStart: PropTypes.func,
-  resizeMode: PropTypes.oneOf(['contain', 'cover']),
-  source: PropTypes.object, ///ImageSourcePropType,
-  style: PropTypes.any
-};
-
-ofProps.defaultProps = {};
-
-const ofStatics = () => {};
-
-// hack to display instance methods
-ofStatics.propTypes = {
-  getSize: PropTypes.func,
-  prefetch: PropTypes.func,
-  queryCache: PropTypes.func
-};
-
-export default {
-  title: 'Components|Image',
-  includeStories: []
-};
-
-export { ofProps, ofStatics };
-export { default as defaultSource } from './examples/DefaultSource';
-export { default as draggable } from './examples/Draggable';
-export { default as onError } from './examples/OnError';
-export { default as onLoad } from './examples/OnLoad';
-export { default as onLoadEnd } from './examples/OnLoadEnd';
-export { default as onLoadStart } from './examples/OnLoadStart';
-export { default as resizeMode } from './examples/ResizeMode';
-export { default as source } from './examples/Source';
-export { default as styleBoxShadow } from './examples/StyleBoxShadow';
-export { default as styleTintColor } from './examples/StyleTintColor';
-
-export { default as getSize } from './examples/StaticGetSize';
-export { default as prefetch } from './examples/StaticPrefetch';

packages/docs/src/components/Image/Image.stories.mdx

@@ -1,5 +1,5 @@
-import { Meta, Props, Story, Preview } from '@storybook/addon-docs/blocks';
-import * as Stories from './Image.stories.js';
+import { Meta, Story, Preview } from '@storybook/addon-docs/blocks';
+import * as Stories from './examples';
 
 <Meta title="Components|Image" />
 
@@ -9,7 +9,19 @@ An accessible and responsive image component.
 
 ## Props
 
-<Props of={Stories.ofProps} />
+| Name                      | Type      | Default |
+| ------------------------- | --------- | ------- |
+| ...ViewProps              | | |
+| blurRadius                | ?number   | |
+| defaultSource             | ?Source   | |
+| draggable                 | ?boolean  | false |
+| onError                   | ?Function | |
+| onLoad                    | ?Function | false |
+| onLoadEnd                 | ?Function | false |
+| onLoadStart               | ?Function | false |
+| resizeMode                | ?ResizeMode | 'cover' |
+| source                    | Source    | false |
+| style                     | ?Style    | |
 
 ### blurRadius
 
@@ -120,8 +132,6 @@ Tint color is applied to all opaque pixels.
 
 ## Static methods
 
-<Props of={Stories.ofStatics} />
-
 ### getSize(url, callback)
 
 ```js

packages/docs/src/components/Image/examples/index.js

@@ -0,0 +1,13 @@
+export { default as defaultSource } from './DefaultSource';
+export { default as draggable } from './Draggable';
+export { default as onError } from './OnError';
+export { default as onLoad } from './OnLoad';
+export { default as onLoadEnd } from './OnLoadEnd';
+export { default as onLoadStart } from './OnLoadStart';
+export { default as resizeMode } from './ResizeMode';
+export { default as source } from './Source';
+export { default as styleBoxShadow } from './StyleBoxShadow';
+export { default as styleTintColor } from './StyleTintColor';
+
+export { default as getSize } from './StaticGetSize';
+export { default as prefetch } from './StaticPrefetch';

packages/docs/src/components/ImageBackground/ImageBackground.stories.js

@@ -1,19 +0,0 @@
-import PropTypes from 'prop-types';
-
-const ofProps = () => {};
-
-ofProps.propTypes = {
-  '...ImagePropTypes': PropTypes.any,
-  children: PropTypes.number,
-  imageStyle: PropTypes.any
-};
-
-ofProps.defaultProps = {};
-
-export default {
-  title: 'Components|ImageBackground',
-  includeStories: []
-};
-
-export { ofProps };
-export { default as children } from './examples/Children';

packages/docs/src/components/ImageBackground/ImageBackground.stories.mdx

@@ -1,5 +1,5 @@
-import { Meta, Props, Story, Preview } from '@storybook/addon-docs/blocks';
-import * as Stories from './ImageBackground.stories.js';
+import { Meta, Story, Preview } from '@storybook/addon-docs/blocks';
+import * as Stories from './examples';
 
 <Meta title="Components|ImageBackground" />
 
@@ -9,7 +9,11 @@ A image component with support for child content.
 
 ## Props
 
-<Props of={Stories.ofProps} />
+| Name                      | Type      | Default |
+| ------------------------- | --------- | ------- |
+| ...ImagePropTypes         | | |
+| children                  | ?any   | |
+| imageStyle                | ?Style  | |
 
 ### children
 

packages/docs/src/components/ImageBackground/examples/index.js

@@ -0,0 +1 @@
+export { default as children } from './Children';

packages/docs/src/components/Picker/Picker.stories.js

@@ -1,42 +0,0 @@
-import PropTypes from 'prop-types';
-
-const ofProps = () => {};
-
-ofProps.propTypes = {
-  '...ViewPropTypes': PropTypes.any,
-  children: PropTypes.any,
-  enabled: PropTypes.bool,
-  onValueChange: PropTypes.func,
-  selectedValue: PropTypes.string,
-  style: PropTypes.any
-};
-
-ofProps.defaultProps = {};
-
-const ofPropsItem = () => {};
-
-ofPropsItem.propTypes = {
-  color: PropTypes.any,
-  label: PropTypes.string,
-  testID: PropTypes.string,
-  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
-};
-
-export default {
-  title: 'Components|ImageBackground',
-  includeStories: []
-};
-
-export { ofProps, ofPropsItem };
-
-/*
-<PickerExample enabled={false} />
-
-<PickerExample
-  onValueChange={(itemValue, itemPosition) => {
-    window.alert(`itemValue: ${itemValue}, itemPosition: ${itemPosition}`);
-  }}
-/>
-
-<PickerExample selectedValue="book-3" />
-*/

packages/docs/src/components/Picker/Picker.stories.mdx

@@ -1,5 +1,5 @@
 import { Meta, Props, Story, Preview } from '@storybook/addon-docs/blocks';
-import * as Stories from './Picker.stories.js';
+import * as Stories from './examples';
 
 <Meta title="Components|Picker" />
 
@@ -9,7 +9,14 @@ Renders the native `<select>` component.
 
 ## Props
 
-<Props of={Stories.ofProps} />
+| Name                      | Type      | Default |
+| ------------------------- | --------- | ------- |
+| ...ViewProps              |           | |
+| children                  | ?any      | |
+| enabled                   | ?boolean  | true |
+| onValueChange             | ?Function | |
+| selectedValue             | ?string   | |
+| style                     | ?Style    | |
 
 ### children
 
@@ -51,7 +58,12 @@ Individual selectable item in a `Picker`.
 
 ## Props
 
-<Props of={Stories.ofPropsItem} />
+| Name                      | Type      | Default |
+| ------------------------- | --------- | ------- |
+| color                     | ?any      | |
+| label                     | ?string   | |
+| testID                    | ?string   | |
+| value                     | ?string  \| ?number | |
 
 ### color
 

packages/docs/src/components/Picker/examples/index.js

@@ -0,0 +1,11 @@
+/*
+<PickerExample enabled={false} />
+
+<PickerExample
+  onValueChange={(itemValue, itemPosition) => {
+    window.alert(`itemValue: ${itemValue}, itemPosition: ${itemPosition}`);
+  }}
+/>
+
+<PickerExample selectedValue="book-3" />
+*/

packages/docs/src/components/ProgressBar/ProgressBar.stories.js

@@ -1,32 +0,0 @@
-import PropTypes from 'prop-types';
-
-const ofProps = () => {};
-
-ofProps.propTypes = {
-  '...ViewProps': PropTypes.any,
-  color: PropTypes.any,
-  indeterminate: PropTypes.bool,
-  progress: PropTypes.number,
-  trackColor: PropTypes.any
-};
-
-ofProps.defaultProps = {
-  color: '#1976D2',
-  indeterminate: false,
-  progress: 0,
-  trackColor: 'transparent'
-};
-
-export default {
-  title: 'Components|ProgressBar',
-  includeStories: []
-};
-
-export { ofProps };
-
-export { default as color } from './examples/Color';
-export { default as indeterminate } from './examples/Indeterminate';
-export { default as progress } from './examples/Progress';
-export { default as trackColor } from './examples/TrackColor';
-
-export { default as customSize } from './examples/CustomSize';

packages/docs/src/components/ProgressBar/ProgressBar.stories.mdx

@@ -1,5 +1,5 @@
 import { Meta, Props, Story, Preview } from '@storybook/addon-docs/blocks';
-import * as Stories from './ProgressBar.stories.js';
+import * as Stories from './examples';
 
 <Meta title="Components|ProgressBar" />
 
@@ -9,7 +9,13 @@ Display an activity progress bar.
 
 ## Props
 
-<Props of={Stories.ofProps} />
+| Name                      | Type      | Default |
+| ------------------------- | --------- | ------- |
+| ...ViewProps              | | |
+| color                     | ?Color   | '#1976D2' |
+| indeterminate             | ?boolean  | false |
+| progress                  | ?number  | 0 |
+| trackColor                | ?Color | 'transparent' |
 
 ### color
 

packages/docs/src/components/ProgressBar/examples/index.js

@@ -0,0 +1,6 @@
+export { default as color } from './Color';
+export { default as indeterminate } from './Indeterminate';
+export { default as progress } from './Progress';
+export { default as trackColor } from './TrackColor';
+
+export { default as customSize } from './CustomSize';

packages/docs/src/components/ScrollView/ScrollView.stories.js

@@ -1,20 +0,0 @@
-import PropTypes from 'prop-types';
-
-const ofProps = () => {};
-
-ofProps.propTypes = {
-  '...ViewPropTypes': PropTypes.any
-};
-
-ofProps.defaultProps = {};
-
-export default {
-  title: 'Components|ScrollView',
-  includeStories: []
-};
-
-export { ofProps };
-export { default as horizontal } from './examples/Horizontal';
-export { default as onScroll } from './examples/OnScroll';
-export { default as scrollEnabled } from './examples/ScrollEnabled';
-export { default as vertical } from './examples/Vertical';

packages/docs/src/components/ScrollView/ScrollView.stories.mdx

@@ -1,5 +1,5 @@
-import { Meta, Props, Story, Preview } from '@storybook/addon-docs/blocks';
-import * as Stories from './ScrollView.stories.js';
+import { Meta, Story, Preview } from '@storybook/addon-docs/blocks';
+import * as Stories from './examples';
 
 <Meta title="Components|ScrollView" />
 
@@ -12,7 +12,18 @@ view directly (discouraged) or make sure all parent views have bounded height
 
 ## Props
 
-<Props of={Stories.ofProps} />
+| Name                      | Type      | Default |
+| ------------------------- | --------- | ------- |
+| ...ViewProps              | | |
+| contentContainerStyle     | ?Style    | '#AAB8C2' |
+| horizontal                | ?boolean  | false |
+| keyboardDismissMode       | 'none' \| 'on-drag' \| 'interactive' | |
+| onContentSizeChange       | ?Function | |
+| onScroll                  | ?Function  | false |
+| pagingEnabled             | ?boolean  | false |
+| scrollEnabled             | ?boolean  | true |
+| scrollEventThrottle       | ?boolean  | 0 |
+| stickyHeaderIndices       | ?Array<number\>  | |
 
 ### contentContainerStyle
 

packages/docs/src/components/ScrollView/examples/index.js

@@ -0,0 +1,4 @@
+export { default as horizontal } from './Horizontal';
+export { default as onScroll } from './OnScroll';
+export { default as scrollEnabled } from './ScrollEnabled';
+export { default as vertical } from './Vertical';

packages/docs/src/components/Switch/Switch.stories.js

@@ -1,40 +0,0 @@
-import PropTypes from 'prop-types';
-
-const ofProps = () => {};
-
-ofProps.propTypes = {
-  '...ViewPropTypes': PropTypes.any,
-  activeThumbColor: PropTypes.any,
-  activeTrackColor: PropTypes.any,
-  disabled: PropTypes.bool,
-  onValueChange: PropTypes.func,
-  thumbColor: PropTypes.any,
-  trackColor: PropTypes.any,
-  value: PropTypes.bool
-};
-
-ofProps.defaultProps = {
-  activeThumbColor: '#009688',
-  activeTrackColor: '#A3D3CF',
-  disabled: false,
-  thumbColor: '#FAFAFA',
-  trackColor: '#939393',
-  value: false
-};
-
-export default {
-  title: 'Components|Switch',
-  includeStories: []
-};
-
-export { ofProps };
-
-export { default as activeThumbColor } from './examples/ActiveThumbColor';
-export { default as activeTrackColor } from './examples/ActiveTrackColor';
-export { default as disabled } from './examples/Disabled';
-export { default as onValueChange } from './examples/OnValueChange';
-export { default as thumbColor } from './examples/ThumbColor';
-export { default as trackColor } from './examples/TrackColor';
-export { default as value } from './examples/Value';
-
-export { default as customSize } from './examples/CustomSize';

packages/docs/src/components/Switch/Switch.stories.mdx

@@ -1,5 +1,5 @@
-import { Meta, Props, Story, Preview } from '@storybook/addon-docs/blocks';
-import * as Stories from './Switch.stories.js';
+import { Meta, Story, Preview } from '@storybook/addon-docs/blocks';
+import * as Stories from './examples';
 
 <Meta title="Components|Switch" />
 
@@ -12,7 +12,16 @@ supplied value prop instead of the expected result of any user actions.
 
 ## Props
 
-<Props of={Stories.ofProps} />
+| Name                      | Type      | Default |
+| ------------------------- | --------- | ------- |
+| ...ViewProps              | | |
+| activeThumbColor          | ?Color    | '#009688' |
+| activeTrackColor          | ?Color    | '#A3D3CF' |
+| disabled                  | ?boolean  | false |
+| onValueChange             | ?Function | |
+| thumbColor                | ?Color    | '#FAFAFA' |
+| trackColor                | ?Color    | '#939393' |
+| value                     | ?boolean  | false |
 
 ### activeThumbColor
 

packages/docs/src/components/Switch/examples/index.js

@@ -0,0 +1,9 @@
+export { default as activeThumbColor } from './ActiveThumbColor';
+export { default as activeTrackColor } from './ActiveTrackColor';
+export { default as disabled } from './Disabled';
+export { default as onValueChange } from './OnValueChange';
+export { default as thumbColor } from './ThumbColor';
+export { default as trackColor } from './TrackColor';
+export { default as value } from './Value';
+
+export { default as customSize } from './CustomSize';

packages/docs/src/components/Text/Text.stories.js

@@ -1,23 +0,0 @@
-import PropTypes from 'prop-types';
-
-const ofProps = () => {};
-
-ofProps.propTypes = {
-  '...ViewPropTypes': PropTypes.any,
-  numberOfLines: PropTypes.number,
-  onPress: PropTypes.func,
-  selectable: PropTypes.bool
-};
-
-export default {
-  title: 'Components|Text',
-  includeStories: []
-};
-
-export { ofProps };
-
-export { default as children } from './examples/Children';
-export { default as numberOfLines } from './examples/NumberOfLines';
-export { default as onPress } from './examples/OnPress';
-export { default as selectable } from './examples/Selectable';
-export { default as style } from './examples/Style';

packages/docs/src/components/Text/Text.stories.mdx

@@ -1,5 +1,5 @@
-import { Meta, Props, Story, Preview } from '@storybook/addon-docs/blocks';
-import * as Stories from './Text.stories.js';
+import { Meta, Story, Preview } from '@storybook/addon-docs/blocks';
+import * as Stories from './examples';
 
 <Meta title="Components|Text" />
 
@@ -12,11 +12,16 @@ Text is unique relative to layout: child elements use text layout ("inline")
 rather than flexbox layout. This means that elements inside of a Text are not
 rectangles, as they wrap when reaching the edge of their container.
 
-NOTE: Text currently transfers all other props to the rendered HTML element.
-
 ## Props
 
-<Props of={Stories.ofProps} />
+| Name                      | Type      | Default |
+| ------------------------- | --------- | ------- |
+| ...ViewProps              |           | |
+| dir                       | ?string   | 'auto' |
+| numberOfLines             | ?number   | |
+| onPress                   | ?Function | |
+| selectable                | ?boolean  | true |
+| style                     | ?Style    | |
 
 ### children
 

packages/docs/src/components/Text/examples/index.js

@@ -0,0 +1,5 @@
+export { default as children } from './Children';
+export { default as numberOfLines } from './NumberOfLines';
+export { default as onPress } from './OnPress';
+export { default as selectable } from './Selectable';
+export { default as style } from './Style';

packages/docs/src/components/TextInput/TextInput.stories.js

@@ -1,66 +0,0 @@
-import PropTypes from 'prop-types';
-
-const ofProps = () => {};
-
-ofProps.propTypes = {
-  '...ViewPropTypes': PropTypes.any,
-  autoCapitalize: PropTypes.string,
-  autoComplete: PropTypes.string,
-  autoCorrect: PropTypes.bool,
-  autoFocus: PropTypes.bool,
-  blurOnSubmit: PropTypes.bool,
-  clearTextOnFocus: PropTypes.bool,
-  defaultValue: PropTypes.string,
-  disabled: PropTypes.bool,
-  editable: PropTypes.bool,
-  keyboardType: PropTypes.string,
-  maxLength: PropTypes.number,
-  multiline: PropTypes.bool,
-  numberOfLines: PropTypes.number,
-  onChange: PropTypes.func,
-  onChangeText: PropTypes.func,
-  onContentSizeChange: PropTypes.func,
-  onKeyPress: PropTypes.func,
-  onSelectionChange: PropTypes.func,
-  onSubmitEditing: PropTypes.func,
-  placeholder: PropTypes.string,
-  placeholderTextColor: PropTypes.string,
-  returnKeyType: PropTypes.string,
-  secureTextEntry: PropTypes.bool,
-  selectTextOnFocus: PropTypes.bool,
-  selection: PropTypes.object,
-  spellCheck: PropTypes.bool,
-  value: PropTypes.string
-};
-
-const ofMethods = () => {};
-
-ofMethods.propTypes = {
-  blur: PropTypes.func,
-  clear: PropTypes.func,
-  focus: PropTypes.func,
-  isFocused: PropTypes.func
-};
-
-export default {
-  title: 'Components|TextInput',
-  includeStories: []
-};
-
-export { ofProps, ofMethods };
-
-export { default as autoCapitalize } from './examples/AutoCapitalize';
-export { default as blurOnSubmit } from './examples/BlurOnSubmit';
-export { default as clearButtonMode } from './examples/ClearButtonMode';
-export { default as clearTextOnFocus } from './examples/ClearTextOnFocus';
-export { default as disabled } from './examples/Disabled';
-export { default as editable } from './examples/Editable';
-export { default as keyboardType } from './examples/KeyboardType';
-export { default as maxLength } from './examples/MaxLength';
-export { default as multiline } from './examples/Multiline';
-export { default as numberOfLines } from './examples/NumberOfLines';
-export { default as onSelectionChange } from './examples/OnSelectionChange';
-export { default as placeholder } from './examples/Placeholder';
-export { default as placeholderTextColor } from './examples/PlaceholderTextColor';
-export { default as secureTextEntry } from './examples/SecureTextEntry';
-export { default as selectTextOnFocus } from './examples/SelectTextOnFocus';

packages/docs/src/components/TextInput/TextInput.stories.mdx

@@ -1,5 +1,5 @@
-import { Meta, Props, Story, Preview } from '@storybook/addon-docs/blocks';
-import * as Stories from './TextInput.stories.js';
+import { Meta, Story, Preview } from '@storybook/addon-docs/blocks';
+import * as Stories from './examples';
 
 <Meta title="Components|TextInput" />
 
@@ -11,7 +11,47 @@ some props are exclusive to or excluded from `multiline`.
 
 ## Props
 
-<Props of={Stories.ofProps} />
+| Name                      | Type      | Default |
+| ------------------------- | --------- | ------- |
+| accessibilityLabel        | ?string   | |
+| accessibilityRelationship | ?Object   | |
+| accessibilityState        | ?Object   | |
+| autoCapitalize            | ?string   | 'sentences' |
+| autoComplete              | ?string   | 'on' |
+| autoCorrect               | ?boolean  | true |
+| autoFocus                 | ?boolean  | false |
+| blurOnSubmit              | ?boolean  | false |
+| clearTextOnFocus          | ?boolean  | false |
+| defaultValue              | ?string   | |
+| disabled                  | ?boolean  | false |
+| editable                  | ?boolean  | true |
+| forwardedRef              | ?Ref      | |
+| importantForAccessibility | ?boolean  | true |
+| keyboardType              | ?string   | 'default' |
+| maxLength                 | ?number   | |
+| multiline                 | ?boolean  | false |
+| nativeID                  | ?string   | |
+| numberOfLines             | ?number   | 1 |
+| onBlur                    | ?Function | |
+| onChange                  | ?Function | |
+| onChangeText              | ?Function | |
+| onContentSizeChange       | ?Function | |
+| onContextMenu             | ?Function | |
+| onFocus                   | ?Function | |
+| onKeyPress                | ?Function | |
+| onLayout                  | ?Function | |
+| onScroll                  | ?Function | |
+| onSubmitEditing           | ?Function | |
+| placeholder               | ?string   | |
+| placeholderTextColor      | ?Color    | |
+| pointerEvents             | ?string   | |
+| returnKeyType             | ?string   | |
+| secureTextEntry           | ?boolean  | false |
+| selection                 | ?Object   | |
+| selectTextOnFocus         | ?boolean  | false |
+| spellCheck                | ?boolean  | |
+| testID                    | ?string   | |
+| value                     | ?string   | |
 
 ### autoCapitalize
 
@@ -247,8 +287,6 @@ The value to show for the text input. TextInput is a controlled component, which
 
 ## Instance methods
 
-<Props of={Stories.ofMethods} />
-
 ### blur()
 
 Blur the underlying DOM input.

packages/docs/src/components/TextInput/examples/index.js

@@ -0,0 +1,15 @@
+export { default as autoCapitalize } from './AutoCapitalize';
+export { default as blurOnSubmit } from './BlurOnSubmit';
+export { default as clearButtonMode } from './ClearButtonMode';
+export { default as clearTextOnFocus } from './ClearTextOnFocus';
+export { default as disabled } from './Disabled';
+export { default as editable } from './Editable';
+export { default as keyboardType } from './KeyboardType';
+export { default as maxLength } from './MaxLength';
+export { default as multiline } from './Multiline';
+export { default as numberOfLines } from './NumberOfLines';
+export { default as onSelectionChange } from './OnSelectionChange';
+export { default as placeholder } from './Placeholder';
+export { default as placeholderTextColor } from './PlaceholderTextColor';
+export { default as secureTextEntry } from './SecureTextEntry';
+export { default as selectTextOnFocus } from './SelectTextOnFocus';

packages/docs/src/components/TouchableHighlight/TouchableHighlight.stories.js

@@ -1,27 +0,0 @@
-import PropTypes from 'prop-types';
-
-const ofProps = () => {};
-
-ofProps.propTypes = {
-  '...TouchableWithoutFeedbackPropTypes': PropTypes.any,
-  activeOpacity: PropTypes.number,
-  onHideUnderlay: PropTypes.func,
-  onShowUnderlay: PropTypes.func,
-  underlayColor: PropTypes.string
-};
-
-ofProps.defaultProps = {
-  activeOpacity: '0.85',
-  underlayColor: 'black'
-};
-
-export default {
-  title: 'Components|TouchableHighlight',
-  includeStories: []
-};
-
-export { ofProps };
-export { default as delayEvents } from './examples/DelayEvents';
-export { default as disabled } from './examples/Disabled';
-export { default as feedbackEvents } from './examples/FeedbackEvents';
-export { default as styleOverrides } from './examples/StyleOverrides';

packages/docs/src/components/TouchableHighlight/TouchableHighlight.stories.mdx

@@ -1,5 +1,5 @@
-import { Meta, Props, Story, Preview } from '@storybook/addon-docs/blocks';
-import * as Stories from './TouchableHighlight.stories.js';
+import { Meta, Story, Preview } from '@storybook/addon-docs/blocks';
+import * as Stories from './examples';
 
 <Meta title="Components|TouchableHighlight" />
 
@@ -19,7 +19,13 @@ to have several child components, wrap them in a View.
 
 ## Props
 
-<Props of={Stories.ofProps} />
+| Name                      | Type      | Default |
+| ------------------------- | --------- | ------- |
+| ...TouchableWithoutFeedbackProps      | |
+| activeOpacity             | ?number   | 0.85 |
+| onHideUnderlay            | ?Function | |
+| onShowUnderlay            | ?Function | |
+| underlayColor             | ?Color    | 'black' |
 
 ### activeOpacity
 

packages/docs/src/components/TouchableHighlight/examples/index.js

@@ -0,0 +1,4 @@
+export { default as delayEvents } from './DelayEvents';
+export { default as disabled } from './Disabled';
+export { default as feedbackEvents } from './FeedbackEvents';
+export { default as styleOverrides } from './StyleOverrides';

packages/docs/src/components/TouchableOpacity/TouchableOpacity.stories.js

@@ -1,32 +0,0 @@
-import PropTypes from 'prop-types';
-
-const ofProps = () => {};
-
-ofProps.propTypes = {
-  '...TouchableWithoutFeedbackPropTypes': PropTypes.any,
-  activeOpacity: PropTypes.number,
-  focusedOpacity: PropTypes.func,
-  onShowUnderlay: PropTypes.func,
-  underlayColor: PropTypes.string
-};
-
-ofProps.defaultProps = {
-  activeOpacity: '0.2',
-  focusedOpacity: '0.7'
-};
-
-const ofMethods = () => {};
-
-ofMethods.propTypes = {
-  setOpacityTo: PropTypes.func
-};
-
-export default {
-  title: 'Components|TouchableOpacity',
-  includeStories: []
-};
-
-export { ofMethods, ofProps };
-//export { default as color } from './examples/Color';
-export { default as disabled } from './examples/Disabled';
-//export { default as onPress } from './examples/OnPress';

packages/docs/src/components/TouchableOpacity/TouchableOpacity.stories.mdx

@@ -1,5 +1,5 @@
-import { Meta, Props, Story, Preview } from '@storybook/addon-docs/blocks';
-import * as Stories from './TouchableOpacity.stories.js';
+import { Meta, Story, Preview } from '@storybook/addon-docs/blocks';
+import * as Stories from './examples';
 
 <Meta title="Components|TouchableOpacity" />
 
@@ -13,16 +13,17 @@ added to the view hierarchy. Be aware that this can affect layout.
 
 ## Props
 
-<Props of={Stories.ofProps} />
+| Name                      | Type      | Default |
+| ------------------------- | --------- | ------- |
+| ...TouchableWithoutFeedbackProps      | |
+| activeOpacity             | ?number   | 0.2 |
 
 ### activeOpacity
 
 Determines what the opacity of the wrapped view should be when active.
 
-### focusedOpacity
-
-Determines what the opacity of the wrapped view should be when it is focused.
-
 ## Instance methods
 
-<Props of={Stories.ofMethods} />
+### setOpacityTo(number)
+
+Sets the opacity.

packages/docs/src/components/TouchableOpacity/examples/index.js

@@ -0,0 +1,3 @@
+//export { default as color } from './Color';
+export { default as disabled } from './Disabled';
+//export { default as onPress } from './OnPress';

packages/docs/src/components/TouchableWithoutFeedback/TouchableWithoutFeedback.stories.js

@@ -1,26 +0,0 @@
-import PropTypes from 'prop-types';
-
-const ofProps = () => {};
-
-ofProps.propTypes = {
-  '...ViewPropsTypes': PropTypes.any,
-  delayLongPress: PropTypes.number,
-  delayPressIn: PropTypes.number,
-  delayPressOut: PropTypes.number,
-  disabled: PropTypes.bool,
-  onLongPress: PropTypes.func,
-  onPress: PropTypes.func,
-  onPressIn: PropTypes.func,
-  onPressOut: PropTypes.func,
-  pressRetentionOffset: PropTypes.object
-};
-
-export default {
-  title: 'Components|TouchableWithoutFeedback',
-  includeStories: []
-};
-
-export { ofProps };
-export { default as delayEvents } from './examples/DelayEvents';
-export { default as disabled } from './examples/Disabled';
-export { default as feedbackEvents } from './examples/FeedbackEvents';

packages/docs/src/components/TouchableWithoutFeedback/TouchableWithoutFeedback.stories.mdx

@@ -1,5 +1,5 @@
 import { Meta, Props, Story, Preview } from '@storybook/addon-docs/blocks';
-import * as Stories from './TouchableWithoutFeedback.stories.js';
+import * as Stories from './examples';
 
 <Meta title="Components|TouchableWithoutFeedback" />
 
@@ -14,7 +14,18 @@ several child components, wrap them in a `View`.
 
 ## Props
 
-<Props of={Stories.ofProps} />
+| Name                      | Type      | Default |
+| ------------------------- | --------- | ------- |
+| ...ViewProps              |           | |
+| delayLongPress            | ?number   | 500 |
+| delayPressIn              | ?number   | 0 |
+| delayPressOut             | ?number   | 0 |
+| disabled                  | ?boolean  | false |
+| onLongPress               | ?Function | |
+| onPress                   | ?Function | |
+| onPressIn                 | ?Function | |
+| onPressOut                | ?Function | |
+| pressRetentionOffset      | ?Object   | |
 
 ### delayLongPress
 

packages/docs/src/components/TouchableWithoutFeedback/examples/index.js

@@ -0,0 +1,3 @@
+export { default as delayEvents } from './DelayEvents';
+export { default as disabled } from './Disabled';
+export { default as feedbackEvents } from './FeedbackEvents';

packages/docs/src/components/View/View.stories.js

@@ -1,56 +0,0 @@
-import PropTypes, { any, bool, func, object, oneOf, string } from 'prop-types';
-
-const ofProps = () => {};
-
-ofProps.propTypes = {
-  accessibilityLabel: PropTypes.string,
-  accessibilityLiveRegion: oneOf(['assertive', 'none', 'polite']),
-  accessibilityRelationship: object,
-  accessibilityRole: string,
-  accessibilityState: object,
-  accessibilityValue: object,
-  accessible: bool,
-  children: any,
-  forwardedRef: any,
-  hitSlop: object,
-  importantForAccessibility: oneOf(['auto', 'no', 'no-hide-descendants', 'yes']),
-  itemID: string,
-  itemProp: string,
-  itemRef: string,
-  itemScope: string,
-  itemType: string,
-  nativeID: string,
-  onBlur: func,
-  onContextMenu: func,
-  onFocus: func,
-  onKeyDown: func,
-  onKeyUp: func,
-  onLayout: func,
-  onMoveShouldSetResponder: func,
-  onMoveShouldSetResponderCapture: func,
-  onResponderGrant: func,
-  onResponderMove: func,
-  onResponderReject: func,
-  onResponderRelease: func,
-  onResponderTerminate: func,
-  onResponderTerminationRequest: func,
-  onStartShouldSetResponder: func,
-  onStartShouldSetResponderCapture: func,
-  onWheel: func,
-  pointerEvents: oneOf(['auto', 'box-none', 'box-only', 'none']),
-  style: object,
-  testID: string
-};
-
-export default {
-  title: 'Components|View',
-  includeStories: []
-};
-
-export { ofProps };
-export { default as onLayout } from './examples/OnLayout';
-export { default as pointerEvents } from './examples/PointerEvents';
-export { default as styleBorder } from './examples/StyleBorder';
-export { default as styleBoxShadow } from './examples/StyleBoxShadow';
-export { default as styleFlexbox } from './examples/StyleFlexbox';
-export { default as styleZIndex } from './examples/StyleZIndex';

packages/docs/src/components/View/View.stories.mdx

@@ -1,5 +1,5 @@
 import { Meta, Props, Story, Preview } from '@storybook/addon-docs/blocks';
-import * as Stories from './View.stories.js';
+import * as Stories from './examples';
 
 <Meta title="Components|View" />
 
@@ -13,7 +13,42 @@ another View and has zero-to-many children of any type.
 
 Please also refer to the in-depth "Accessibility" and "Style" guides.
 
-<Props of={Stories.ofProps} />
+| Name                      | Type      | Default |
+| ------------------------- | --------- | ------- |
+| accessibilityLabel        | ?string   | |
+| accessibilityLiveRegion   | ?string   | |
+| accessibilityRelationship | ?Object   | |
+| accessibilityRole         | ?string   | |
+| accessibilityState        | ?Object   | |
+| accessibilityValue        | ?Object   | |
+| accessible                | ?boolean  | |
+| children                  | ?any      | |
+| forwardedRef              | ?Ref      | |
+| hitSlop                   | ?Object   | |
+| importantForAccessibility | ?string   | |
+| nativeID                  | ?string   | |
+| onBlur                    | ?Function | |
+| onFocus                   | ?Function | |
+| onLayout                  | ?Function | |
+| onMoveShouldSetResponder  | ?Function | |
+| onMoveShouldSetResponderCapture | ?Function | |
+| onResponderEnd            | ?Function | |
+| onResponderGrant          | ?Function | |
+| onResponderMove           | ?Function | |
+| onResponderReject         | ?Function | |
+| onResponderRelease        | ?Function | |
+| onResponderStart          | ?Function | |
+| onResponderTerminate      | ?Function | |
+| onResponderTerminationRequest | ?Function | |
+| onScrollShouldSetResponder | ?Function | |
+| onScrollShouldSetResponderCapture | ?Function | |
+| onSelectionChangeShouldSetResponder | ?Function | |
+| onSelectionChangeShouldSetResponderCapture | ?Function | |
+| onStartShouldSetResponder | ?Function | |
+| onStartShouldSetResponderCapture | ?Function | |
+| pointerEvents             | ?string | 'auto' |
+| style                     | ?Style | |
+| testID                    | ?string | |
 
 ### hitSlop
 

packages/docs/src/components/View/examples/index.js

@@ -0,0 +1,6 @@
+export { default as onLayout } from './OnLayout';
+export { default as pointerEvents } from './PointerEvents';
+export { default as styleBorder } from './StyleBorder';
+export { default as styleBoxShadow } from './StyleBoxShadow';
+export { default as styleFlexbox } from './StyleFlexbox';
+export { default as styleZIndex } from './StyleZIndex';

packages/react-native-web/src/exports/TextInput/index.js

@@ -78,9 +78,6 @@ const TextInput = forwardRef<TextInputProps, *>((props, ref) => {
     onFocus,
     onKeyPress,
     onLayout,
-    onScroll,
-    onSelectionChange,
-    onSubmitEditing,
     onMoveShouldSetResponder,
     onMoveShouldSetResponderCapture,
     onResponderEnd,
@@ -91,12 +88,15 @@ const TextInput = forwardRef<TextInputProps, *>((props, ref) => {
     onResponderStart,
     onResponderTerminate,
     onResponderTerminationRequest,
+    onScroll,
     onScrollShouldSetResponder,
     onScrollShouldSetResponderCapture,
+    onSelectionChange,
     onSelectionChangeShouldSetResponder,
     onSelectionChangeShouldSetResponderCapture,
     onStartShouldSetResponder,
     onStartShouldSetResponderCapture,
+    onSubmitEditing,
     placeholder,
     placeholderTextColor,
     pointerEvents,