feat: Add stories, Part 2

.gitignore

@@ -1,7 +1,63 @@
-node_modules
+# build-storybook output folder
 .out
 
 .expo/*
 npm-debug.*
 
 /beta
+
+# OSX
+#
+.DS_Store
+
+# Xcode
+#
+build/
+*.pbxuser
+!default.pbxuser
+*.mode1v3
+!default.mode1v3
+*.mode2v3
+!default.mode2v3
+*.perspectivev3
+!default.perspectivev3
+xcuserdata
+*.xccheckout
+*.moved-aside
+DerivedData
+*.hmap
+*.ipa
+*.xcuserstate
+project.xcworkspace
+
+# Android/IntelliJ
+#
+build/
+.idea
+.gradle
+local.properties
+*.iml
+
+# node.js
+#
+node_modules/
+yarn-error.log
+
+# BUCK
+buck-out/
+\.buckd/
+*.keystore
+
+# fastlane
+#
+# It is recommended to not store the screenshots in the git repo. Instead, use fastlane to re-generate the
+# screenshots whenever they are needed.
+# For more information about the recommended setup visit:
+# https://docs.fastlane.tools/best-practices/source-control/
+
+*/fastlane/report.xml
+*/fastlane/Preview.html
+*/fastlane/screenshots
+
+# Bundle artifact
+*.jsbundle

package.json

@@ -32,10 +32,10 @@
  "@babel/plugin-proposal-optional-chaining": "^7.2.0",
  "@babel/plugin-transform-object-assign": "^7.2.0",
  "@babel/plugin-transform-react-jsx": "^7.3.0",
- "@storybook/addon-actions": "^5.0.6",
- "@storybook/addon-links": "^5.0.6",
- "@storybook/addons": "^5.0.6",
- "@storybook/react": "^5.0.6",
+ "@storybook/addon-actions": "^5.0.9",
+ "@storybook/addon-links": "^5.0.9",
+ "@storybook/addons": "^5.0.9",
+ "@storybook/react": "^5.0.9",
  "@svgr/webpack": "2.4.1",
  "babel-core": "7.0.0-bridge.0",
  "babel-eslint": "9.0.0",

stories/components/Badge/badge.stories.js

@@ -0,0 +1,48 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+
+import { Text, View } from 'react-native';
+import { Avatar, Badge, Icon, withBadge } from 'react-native-elements';
+
+storiesOf('Badge|Badge', module)
+
+ .add('Standard badge', () => (
+ <View>
+ <Badge value="99+" status="error" />
+ <Badge value={<Text>My Custom Badge</Text>}></Badge>
+ </View>
+ ))
+
+ .add('Mini badge', () => (
+ <View>
+ <Badge status="success" />
+ <Badge status="error" />
+ <Badge status="primary" />
+ <Badge status="warning" />
+ </View>
+ ))
+
+ .add('Avatar with mini badge', () => (
+ <View style={{ margin: 10, width: 50 }}>
+ <Avatar
+ rounded
+ source={{
+ uri: 'https://randomuser.me/api/portraits/men/41.jpg',
+ }}
+ size="large"
+ />
+
+ <Badge
+ status="success"
+ containerStyle={{ position: 'absolute', top: 10, right: -20 }}
+ />
+ </View>
+ ))
+
+ .add('withBadge HOC', () => {
+ const BadgedIcon = withBadge(1)(Icon)
+
+ return (
+ <BadgedIcon type="ionicon" name="ios-chatbubbles" />
+ )
+ });

stories/components/ButtonGroup/ButtonGroupComponents.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import { ButtonGroup, Text } from 'react-native-elements';
+
+const component1 = () => <Text>Hello</Text>
+const component2 = () => <Text>World</Text>
+const component3 = () => <Text>ButtonGroup</Text>
+
+class ButtonGroupComponents extends React.Component {
+ constructor() {
+ super()
+ this.state = {
+ selectedIndex: 2
+ }
+ this.updateIndex = this.updateIndex.bind(this)
+ }
+ updateIndex(selectedIndex) {
+ this.setState({ selectedIndex })
+ }
+
+ render() {
+ const buttons = [
+ { element: component1 },
+ { element: component2 },
+ { element: component3 }
+ ]
+
+ return (
+ <ButtonGroup
+ onPress={this.updateIndex}
+ selectedIndex={this.state.selectedIndex}
+ buttons={buttons}
+ containerStyle={{ height: 100 }} />
+ )
+ }
+}
+
+export default ButtonGroupComponents;

stories/components/ButtonGroup/ButtonGroupStrings.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import { ButtonGroup } from 'react-native-elements';
+
+class ButtonGroupStrings extends React.Component {
+ constructor() {
+ super()
+ this.state = {
+ selectedIndex: 2
+ }
+ this.updateIndex = this.updateIndex.bind(this)
+ }
+
+ updateIndex(selectedIndex) {
+ this.setState({ selectedIndex })
+ }
+
+ render() {
+ const buttons = ['Hello', 'World', 'Buttons']
+ const { selectedIndex } = this.state
+
+ return (
+ <ButtonGroup
+ onPress={this.updateIndex}
+ selectedIndex={selectedIndex}
+ buttons={buttons}
+ containerStyle={{ height: 100 }}
+ />
+ )
+ }
+}
+
+export default ButtonGroupStrings;

stories/components/ButtonGroup/buttonGroup.stories.js

@@ -0,0 +1,15 @@
+import React, { Component } from 'react';
+import { storiesOf } from '@storybook/react';
+
+import ButtonGroupComponents from './ButtonGroupComponents';
+import ButtonGroupStrings from './ButtonGroupStrings';
+
+storiesOf('Button|ButtonGroup', module)
+
+ .add('Using strings', () => (
+ <ButtonGroupStrings />
+ ))
+
+ .add('Using components', () => (
+ <ButtonGroupComponents />
+ ));

stories/components/Card/card.stories.js

@@ -0,0 +1,106 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+
+import { StyleSheet, View } from 'react-native';
+import { Button, Card, Icon, Image, ListItem, Text } from 'react-native-elements';
+
+const users = [
+ {
+ name: 'Johh Smith',
+ avatar: 'https://s3.amazonaws.com/uifaces/faces/twitter/brynn/128.jpg'
+ },
+ {
+ name: 'Sarah Parker',
+ avatar: 'https://s3.amazonaws.com/uifaces/faces/twitter/evagiselle/128.jpg'
+ },
+ {
+ name: 'Paul Allen',
+ avatar: 'https://s3.amazonaws.com/uifaces/faces/twitter/jsa/128.jpg'
+ },
+ {
+ name: 'Terry Andrews',
+ avatar: 'https://s3.amazonaws.com/uifaces/faces/twitter/talhaconcepts/128.jpg'
+ },
+ {
+ name: 'Andy Vitale',
+ avatar: 'https://s3.amazonaws.com/uifaces/faces/twitter/andyvitale/128.jpg'
+ },
+ {
+ name: 'Katy Friedson',
+ avatar: 'https://s3.amazonaws.com/uifaces/faces/twitter/kfriedson/128.jpg'
+ },
+];
+
+storiesOf('Card|Card', module)
+
+ .add('Implemented with header', () => {
+ const styles = StyleSheet.create({
+ image: {
+ height: 32,
+ width: 32
+ },
+ name: {
+ marginLeft: 4,
+ marginTop: 8
+ },
+ user: {
+ flexDirection: 'row',
+ marginBottom: 4
+ }
+ });
+
+ return (
+ <Card title="CARD WITH DIVIDER">
+ {
+ users.map((u, i) => {
+ return (
+ <View key={i} style={styles.user}>
+ <Image
+ style={styles.image}
+ resizeMode="cover"
+ source={{ uri: u.avatar }}
+ />
+ <Text style={styles.name}>{u.name}</Text>
+ </View>
+ );
+ })
+ }
+ </Card>
+ )
+ })
+
+ .add('Implemented without header, using ListItem component', () => (
+ <Card containerStyle={{ padding: 0 }} >
+ {
+ users.map((u, i) => {
+ return (
+ <ListItem
+ key={i}
+ roundAvatar
+ title={u.name}
+ leftAvatar={{ source: { uri: u.avatar } }}
+ bottomDivider
+ titleStyle={{ marginLeft: 8 }}
+ />
+ );
+ })
+ }
+ </Card>
+ ))
+
+ .add('Implemented with Text and Button as children', () => (
+ <Card
+ title='HELLO WORLD'
+ image={require('../../../src/logo.png')}
+ >
+ <Text style={{ marginBottom: 10 }}>
+ The idea with React Native Elements is more about component structure than actual design.
+ </Text>
+ <Button
+ icon={<Icon name='code' color='#ffffff' />}
+ backgroundColor='#03A9F4'
+ buttonStyle={{ borderRadius: 0, marginLeft: 0, marginRight: 0, marginBottom: 0 }}
+ title='VIEW NOW'
+ />
+ </Card>
+ ));

stories/components/CheckBox/CheckBoxContainer.js

@@ -0,0 +1,18 @@
+import React from 'react';
+
+class CheckBoxContainer extends React.Component {
+ constructor() {
+ super()
+ this.state = {
+ checked: true
+ }
+ }
+
+ onPress = () => this.setState({ checked: !this.state.checked })
+
+ render() {
+ return (this.props.children(this.state.checked, this.onPress))
+ }
+}
+
+export default CheckBoxContainer;