React storybook

STORYBOOK
&
REACT NATIVE
Jair Trejo

WHO AM I?
Jair Trejo
Full-stack developer at Chegg
@jairtrejo on Twitter
2

5
import React from 'react';
import { View } from 'react-native';
import { storiesOf, action } from '@kadira/react-native-storybook';
import { SpeechBubble } from ‘../../components/SpeechBubble’;
storiesOf(‘SpeechBubble');
.add('default view', () => (
<View style={{width: 300}}>
<SpeechBubble message="Default, explanatory bubble"
severity={ SpeechBubble.SEVERITY.INFO }
tailPosition={ 50 }/>
</View>
))
.add('warning', () => (
<SpeechBubble message="Watch out! Something unexpected just happened"
severity={ SpeechBubble.SEVERITY.WARNING }
tailPosition={ 50 }/>
));

7
A tight feedback loop for
developing new components and
new states for those components.

8
A clear, convenient place to
communicate and collaborate with
designers.

9
A place where you can visually
check that everything works and
looks as intended.

16
const simpleFavorite = new Favorite({
id: '1',
title: 'Learning React Native…’,
url: 'https://amzn.com/1491929006',
shortUrl: 'amazon.com/gp/product/149…',
source: new Source({
type: 'tweet',
id: '707050076170891264',
from: new Friend({
name: 'Bonnie Eisenman',
username: 'brindelle'
})
}),
});
storiesOf('FavoriteDetail')
<FavoriteDetail favorite={ simpleFavorite }
onBack={ action('Go back') }
onFavoritePress={ action('Favorite pressed') }
onShare={ action('Share') }/>
));

24
export default connectComponent(
(state$) => ({
favorites: state$.map('.getIn', ['feed', 'favorites']),
refreshing: state$.map('.getIn', ['feed', 'lastFetched'])
.map(d => d === null)
}),
() => ({
onFavoritePressed: asActionType('FAVORITE_SELECTED'),
onRefresh: asActionType('FETCH_FAVORITES'),
})
)(Feed);

25
export class Feed extends Component{
. . .
}
export default connectComponent(
. . .
)(Feed);

32
import { storiesOf, action } from '@kadira/react-native-storybook';
import { Favorite } from '../../components/Favorite';
storiesOf('Favorite')
<FavoriteComponent favorite={ simpleFavorite }
onPress={ action('Favorite pressed') }/>
));

33
storiesOf('Favorite')
.addDecorator((story) => (
<View style={{
flexDirection: 'column',
alignItems: 'stretch',
justifyContent: 'center',
flex: 1}}
>
{ story() }
</View>
));

37
A tight feedback loop for
developing new components
and new states for those
components.
A clear, convenient place to
communicate and collaborate
with designers.
A place where you can visually
check that everything works and
looks as intended.

THANK YOU!
Let’s stay in touch: @jairtrejo

React storybook

More Related Content

What's hot (20)

Viewers also liked (11)

Recently uploaded (20)

React storybook