docs: add imports to doc examples - closes callstack#223 (callstack#256)

Author: iamclaytonray

src/components/Button.js

@@ -80,6 +80,9 @@ type State = {
  *
  * ## Usage
  * ```js
+ * import * as React from 'react';
+ * import { Button } from 'react-native-paper';
+ *
  * const MyComponent = () => (
  *   <Button raised onPress={() => console.log('Pressed')}>
  *     Press me

src/components/Card/Card.js

@@ -47,6 +47,17 @@ type State = {
  *
  * ## Usage
  * ```js
+ * import * as React from 'react';
+ * import {
+ *   Button,
+ *   Card,
+ *   CardActions,
+ *   CardContent,
+ *   CardCover,
+ *   Title,
+ *   Paragraph
+ * } from 'react-native-paper';
+ *
  * const MyComponent = () => (
  *   <Card>
  *     <CardContent>

src/components/Card/CardActions.js

@@ -16,6 +16,9 @@ type Props = {
  *
  * ## Usage
  * ```js
+ * import * as React from 'react';
+ * import { Button, Card, CardActions } from 'react-native-paper';
+ *
  * const MyComponent = () => (
  *   <Card>
  *     <CardActions>

src/components/Card/CardContent.js

@@ -24,6 +24,9 @@ type Props = {
  *
  * ## Usage
  * ```js
+ * import * as React from 'react';
+ * import { Card, CardContent, Title, Paragraph } from 'react-native-paper';
+ *
  * const MyComponent = () => (
  *   <Card>
  *     <CardContent>

src/components/Card/CardCover.js

@@ -27,6 +27,9 @@ type Props = {
  *
  * ## Usage
  * ```js
+ * import * as React from 'react';
+ * import { Card, CardCover } from 'react-native-paper';
+ *
  * const MyComponent = () => (
  *   <Card>
  *     <CardCover source={{ uri: 'https://picsum.photos/700' }} />

src/components/Checkbox.js

@@ -59,7 +59,10 @@ type State = {
  *
  * ## Usage
  * ```js
- * export default class MyComponent extends Component {
+ * import * as React from 'react';
+ * import { Checkbox } from 'react-native-paper';
+ *
+ * export default class MyComponent extends React.Component {
  *   state = {
  *     checked: false,
  *   };

src/components/Dialog/Dialog.js

@@ -47,6 +47,10 @@ type Props = {
  *
  * ## Usage
  * ```js
+ * import * as React from 'react';
+ * import { Text, View } from 'react-native';
+ * import { Button, Dialog, DialogActions, DialogContent, DialogTitle, Paragraph } from 'react-native-paper';
+ *
  * export default class MyComponent extends React.Component {
  *   state = {
  *     visible: false,

src/components/Dialog/DialogActions.js

@@ -16,6 +16,9 @@ type Props = {
  *
  * ## Usage
  * ```js
+ * import * as React from 'react';
+ * import { Button, Dialog, DialogActions } from 'react-native-paper';
+ *
  * export default class MyComponent extends React.Component {
  *   state = {
  *     visible: false,

src/components/Dialog/DialogContent.js

@@ -16,6 +16,9 @@ type Props = {
  *
  * ## Usage
  * ```js
+ * import * as React from 'react';
+ * import { Dialog, DialogContent, Paragraph } from 'react-native-paper';
+ *
  * export default class MyComponent extends React.Component {
  *   state = {
  *     visible: false,

src/components/Dialog/DialogScrollArea.js

@@ -17,6 +17,10 @@ type Props = {
  *
  * ## Usage
  * ```js
+ * import * as React from 'react';
+ * import { ScrollView } from 'react-native';
+ * import { Dialog, DialogScrollArea } from 'react-native-paper';
+ *
  * export default class MyComponent extends React.Component {
  *   state = {
  *     visible: false,

src/components/Dialog/DialogTitle.js

@@ -23,6 +23,9 @@ type Props = {
  *
  * ## Usage
  * ```js
+ * import * as React from 'react';
+ * import { Dialog, DialogContent, DialogTitle, Paragraph } from 'react-native-paper';
+ *
  * export default class MyComponent extends React.Component {
  *   state = {
  *     visible: false,

src/components/Divider.js

@@ -24,6 +24,10 @@ type Props = {
  *
  * ## Usage
  * ```js
+ * import * as React from 'react';
+ * import { Text, View } from 'react-native';
+ * import { Divider } from 'react-native-paper';
+ *
  * const MyComponent = () => (
  *   <View>
  *     <Text>Apple</Text>

src/components/DrawerItem.js

@@ -45,6 +45,9 @@ type Props = {
  *
  * ## Usage
  * ```js
+ * import * as React from 'react';
+ * import { DrawerItem } from 'react-native-paper';
+ *
  * const MyComponent = () => (
  *   <DrawerItem label="First Item" />
  * );

src/components/DrawerSection.js

@@ -27,7 +27,10 @@ type Props = {
  *
  * ## Usage
  * ```js
- * export default class MyComponent extends Component {
+ * import * as React from 'react';
+ * import { DrawerSection, DrawerItem } from 'react-native-paper';
+ *
+ * export default class MyComponent extends React.Component {
  *   state = {
  *     active: 'First Item',
  *   };

src/components/FAB.js

@@ -51,6 +51,9 @@ type Props = {
  *
  * ## Usage
  * ```js
+ * import * as React from 'react';
+ * import { FAB } from 'react-native-paper';
+ *
  * const MyComponent = () => (
  *   <FAB
  *     small

src/components/Modal.js

@@ -40,6 +40,10 @@ type State = {
  *
  * ## Usage
  * ```js
+ * import * as React from 'react';
+ * import { Text } from 'react-native';
+ * import { Modal } from 'react-native-paper';
+ *
  * export default class MyComponent extends React.Component {
  *   state = {
  *     visible: false,

src/components/Paper.js

@@ -30,6 +30,10 @@ type Props = {
  *
  * ## Usage
  * ```js
+ * import * as React from 'react';
+ * import { Text } from 'react-native';
+ * import { Paper } from 'react-native-paper';
+ *
  * const MyComponent = () => (
  *   <Paper style={styles.paper}>
  *      <Text>Paper</Text>

src/components/ProgressBar.js

@@ -41,6 +41,9 @@ const ProgressBarComponent = Platform.select({
  *
  * ## Usage
  * ```js
+ * import * as React from 'react';
+ * import { ProgressBar } from 'react-native-paper';
+ *
  * const MyComponent = () => (
  *   <ProgressBar progress={0.5} color={Colors.red800} />
  * );

src/components/RadioButton.js

@@ -61,7 +61,11 @@ const BORDER_WIDTH = 2;
  *
  * ## Usage
  * ```js
- * export default class MyComponent extends Component {
+ * import * as React from 'react';
+ * import { View } from 'react-native';
+ * import { RadioButton } from 'react-native-paper';
+ *
+ * export default class MyComponent extends React.Component {
  *   state = {
  *     checked: 'firstOption',
  *   };

src/components/SearchBar.js

@@ -48,7 +48,10 @@ type Props = {
  *
  * ## Usage
  * ```js
- * export default class MyComponent extends Component {
+ * import React from 'react';
+ * import { SearchBar } from 'react-native-paper';
+ *
+ * export default class MyComponent extends React.Component {
  *   state = {
  *     firstQuery: '',
  *   };

src/components/Switch.js

@@ -55,7 +55,10 @@ type Props = {
  *
  * ## Usage
  * ```js
- * export default class MyComponent extends Component {
+ * import * as React from 'react';
+ * import { Switch } from 'react-native-paper';
+ *
+ * export default class MyComponent extends React.Component {
  *   state = {
  *     isSwitchOn: false,
  *   };

src/components/TextInput.js

@@ -82,6 +82,9 @@ type State = {
  *
  * ## Usage
  * ```js
+ * import * as React from 'react';
+ * import { TextInput } from 'react-native-paper';
+ *
  * class MyComponent extends React.Component {
  *   state = {
  *     text: ''

src/components/Toolbar/Toolbar.js

@@ -47,7 +47,10 @@ type Props = {
  *
  * ## Usage
  * ```js
- * export default class MyComponent extends Component {
+ * import * as React from 'react';
+ * import { Toolbar, ToolbarBackAction, ToolbarContent, ToolbarAction } from 'react-native-paper';
+ *
+ * export default class MyComponent extends React.Component {
  *   render() {
  *     return (
  *       <Toolbar>

src/components/TouchableRipple.js

@@ -55,6 +55,10 @@ type Props = {
  *
  * ## Usage
  * ```js
+ * import * as React from 'react';
+ * import { View } from 'react-native';
+ * import { Paragraph, TouchableRipple } from 'react-native-paper';
+ *
  * const MyComponent = () => (
  *   <TouchableRipple
  *     onPress={() => {}}

src/components/Typography/Caption.js

@@ -17,6 +17,9 @@ type Props = {
  *
  * ## Usage
  * ```js
+ * import * as React from 'react';
+ * import { Caption } from 'react-native-paper';
+ *
  * const MyComponent = () => (
  *   <Caption>Caption</Caption>
  * );

src/components/Typography/Headline.js

@@ -17,6 +17,9 @@ type Props = {
  *
  * ## Usage
  * ```js
+ * import * as React from 'react';
+ * import { Headline } from 'react-native-paper';
+ *
  * const MyComponent = () => (
  *   <Headline>Headline</Headline>
  * );

src/components/Typography/Paragraph.js

@@ -17,6 +17,9 @@ type Props = {
  *
  * ## Usage
  * ```js
+ * import * as React from 'react';
+ * import { Paragraph } from 'react-native-paper';
+ *
  * const MyComponent = () => (
  *   <Paragraph>Paragraph</Paragraph>
  * );

src/components/Typography/Subheading.js

@@ -17,6 +17,9 @@ type Props = {
  *
  * ## Usage
  * ```js
+ * import * as React from 'react';
+ * import { Subheading } from 'react-native-paper';
+ *
  * const MyComponent = () => (
  *   <Subheading>Subheading</Subheading>
  * );

src/components/Typography/Title.js

@@ -17,6 +17,9 @@ type Props = {
  *
  * ## Usage
  * ```js
+ * import * as React from 'react';
+ * import { Title } from 'react-native-paper';
+ *
  * const MyComponent = () => (
  *   <Title>Title</Title>
  * );