Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 7a8498f

Browse files
Merge pull request #6 from haruelrovix/feature/writing-stories-part-2
feat: Add stories, Part 2
2 parents 076fd97 + 1192666 commit 7a8498f

30 files changed

+1106
-106
lines changed

‎.gitignore‎

Lines changed: 57 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,63 @@
1-
node_modules
1+
# build-storybook output folder
22
.out
33

44
.expo/*
55
npm-debug.*
66

77
/beta
8+
9+
# OSX
10+
#
11+
.DS_Store
12+
13+
# Xcode
14+
#
15+
build/
16+
*.pbxuser
17+
!default.pbxuser
18+
*.mode1v3
19+
!default.mode1v3
20+
*.mode2v3
21+
!default.mode2v3
22+
*.perspectivev3
23+
!default.perspectivev3
24+
xcuserdata
25+
*.xccheckout
26+
*.moved-aside
27+
DerivedData
28+
*.hmap
29+
*.ipa
30+
*.xcuserstate
31+
project.xcworkspace
32+
33+
# Android/IntelliJ
34+
#
35+
build/
36+
.idea
37+
.gradle
38+
local.properties
39+
*.iml
40+
41+
# node.js
42+
#
43+
node_modules/
44+
yarn-error.log
45+
46+
# BUCK
47+
buck-out/
48+
\.buckd/
49+
*.keystore
50+
51+
# fastlane
52+
#
53+
# It is recommended to not store the screenshots in the git repo. Instead, use fastlane to re-generate the
54+
# screenshots whenever they are needed.
55+
# For more information about the recommended setup visit:
56+
# https://docs.fastlane.tools/best-practices/source-control/
57+
58+
*/fastlane/report.xml
59+
*/fastlane/Preview.html
60+
*/fastlane/screenshots
61+
62+
# Bundle artifact
63+
*.jsbundle

‎.storybook/preview-head.html‎

Lines changed: 10 additions & 0 deletions
Large diffs are not rendered by default.

‎assets/checked.png‎

43.2 KB
Loading[フレーム]

‎assets/unchecked.png‎

25.2 KB
Loading[フレーム]

‎package.json‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -32,10 +32,10 @@
3232
"@babel/plugin-proposal-optional-chaining": "^7.2.0",
3333
"@babel/plugin-transform-object-assign": "^7.2.0",
3434
"@babel/plugin-transform-react-jsx": "^7.3.0",
35-
"@storybook/addon-actions": "^5.0.6",
36-
"@storybook/addon-links": "^5.0.6",
37-
"@storybook/addons": "^5.0.6",
38-
"@storybook/react": "^5.0.6",
35+
"@storybook/addon-actions": "^5.0.9",
36+
"@storybook/addon-links": "^5.0.9",
37+
"@storybook/addons": "^5.0.9",
38+
"@storybook/react": "^5.0.9",
3939
"@svgr/webpack": "2.4.1",
4040
"babel-core": "7.0.0-bridge.0",
4141
"babel-eslint": "9.0.0",
Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
import React from 'react';
2+
import { storiesOf } from '@storybook/react';
3+
4+
import { Text, View } from 'react-native';
5+
import { Avatar, Badge, Icon, withBadge } from 'react-native-elements';
6+
7+
storiesOf('Badge|Badge', module)
8+
9+
.add('Standard badge', () => (
10+
<View>
11+
<Badge value="99+" status="error" />
12+
<Badge value={<Text>My Custom Badge</Text>}></Badge>
13+
</View>
14+
))
15+
16+
.add('Mini badge', () => (
17+
<View>
18+
<Badge status="success" />
19+
<Badge status="error" />
20+
<Badge status="primary" />
21+
<Badge status="warning" />
22+
</View>
23+
))
24+
25+
.add('Avatar with mini badge', () => (
26+
<View style={{ margin: 10, width: 50 }}>
27+
<Avatar
28+
rounded
29+
source={{
30+
uri: 'https://randomuser.me/api/portraits/men/41.jpg',
31+
}}
32+
size="large"
33+
/>
34+
35+
<Badge
36+
status="success"
37+
containerStyle={{ position: 'absolute', top: 10, right: -20 }}
38+
/>
39+
</View>
40+
))
41+
42+
.add('withBadge HOC', () => {
43+
const BadgedIcon = withBadge(1)(Icon)
44+
45+
return (
46+
<BadgedIcon type="ionicon" name="ios-chatbubbles" />
47+
)
48+
});
Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import React from 'react';
2+
import { ButtonGroup, Text } from 'react-native-elements';
3+
4+
const component1 = () => <Text>Hello</Text>
5+
const component2 = () => <Text>World</Text>
6+
const component3 = () => <Text>ButtonGroup</Text>
7+
8+
class ButtonGroupComponents extends React.Component {
9+
constructor() {
10+
super()
11+
this.state = {
12+
selectedIndex: 2
13+
}
14+
this.updateIndex = this.updateIndex.bind(this)
15+
}
16+
updateIndex(selectedIndex) {
17+
this.setState({ selectedIndex })
18+
}
19+
20+
render() {
21+
const buttons = [
22+
{ element: component1 },
23+
{ element: component2 },
24+
{ element: component3 }
25+
]
26+
27+
return (
28+
<ButtonGroup
29+
onPress={this.updateIndex}
30+
selectedIndex={this.state.selectedIndex}
31+
buttons={buttons}
32+
containerStyle={{ height: 100 }} />
33+
)
34+
}
35+
}
36+
37+
export default ButtonGroupComponents;
Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
import React from 'react';
2+
import { ButtonGroup } from 'react-native-elements';
3+
4+
class ButtonGroupStrings extends React.Component {
5+
constructor() {
6+
super()
7+
this.state = {
8+
selectedIndex: 2
9+
}
10+
this.updateIndex = this.updateIndex.bind(this)
11+
}
12+
13+
updateIndex(selectedIndex) {
14+
this.setState({ selectedIndex })
15+
}
16+
17+
render() {
18+
const buttons = ['Hello', 'World', 'Buttons']
19+
const { selectedIndex } = this.state
20+
21+
return (
22+
<ButtonGroup
23+
onPress={this.updateIndex}
24+
selectedIndex={selectedIndex}
25+
buttons={buttons}
26+
containerStyle={{ height: 100 }}
27+
/>
28+
)
29+
}
30+
}
31+
32+
export default ButtonGroupStrings;
Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import React, { Component } from 'react';
2+
import { storiesOf } from '@storybook/react';
3+
4+
import ButtonGroupComponents from './ButtonGroupComponents';
5+
import ButtonGroupStrings from './ButtonGroupStrings';
6+
7+
storiesOf('Button|ButtonGroup', module)
8+
9+
.add('Using strings', () => (
10+
<ButtonGroupStrings />
11+
))
12+
13+
.add('Using components', () => (
14+
<ButtonGroupComponents />
15+
));
Lines changed: 106 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
1+
import React from 'react';
2+
import { storiesOf } from '@storybook/react';
3+
4+
import { StyleSheet, View } from 'react-native';
5+
import { Button, Card, Icon, Image, ListItem, Text } from 'react-native-elements';
6+
7+
const users = [
8+
{
9+
name: 'Johh Smith',
10+
avatar: 'https://s3.amazonaws.com/uifaces/faces/twitter/brynn/128.jpg'
11+
},
12+
{
13+
name: 'Sarah Parker',
14+
avatar: 'https://s3.amazonaws.com/uifaces/faces/twitter/evagiselle/128.jpg'
15+
},
16+
{
17+
name: 'Paul Allen',
18+
avatar: 'https://s3.amazonaws.com/uifaces/faces/twitter/jsa/128.jpg'
19+
},
20+
{
21+
name: 'Terry Andrews',
22+
avatar: 'https://s3.amazonaws.com/uifaces/faces/twitter/talhaconcepts/128.jpg'
23+
},
24+
{
25+
name: 'Andy Vitale',
26+
avatar: 'https://s3.amazonaws.com/uifaces/faces/twitter/andyvitale/128.jpg'
27+
},
28+
{
29+
name: 'Katy Friedson',
30+
avatar: 'https://s3.amazonaws.com/uifaces/faces/twitter/kfriedson/128.jpg'
31+
},
32+
];
33+
34+
storiesOf('Card|Card', module)
35+
36+
.add('Implemented with header', () => {
37+
const styles = StyleSheet.create({
38+
image: {
39+
height: 32,
40+
width: 32
41+
},
42+
name: {
43+
marginLeft: 4,
44+
marginTop: 8
45+
},
46+
user: {
47+
flexDirection: 'row',
48+
marginBottom: 4
49+
}
50+
});
51+
52+
return (
53+
<Card title="CARD WITH DIVIDER">
54+
{
55+
users.map((u, i) => {
56+
return (
57+
<View key={i} style={styles.user}>
58+
<Image
59+
style={styles.image}
60+
resizeMode="cover"
61+
source={{ uri: u.avatar }}
62+
/>
63+
<Text style={styles.name}>{u.name}</Text>
64+
</View>
65+
);
66+
})
67+
}
68+
</Card>
69+
)
70+
})
71+
72+
.add('Implemented without header, using ListItem component', () => (
73+
<Card containerStyle={{ padding: 0 }} >
74+
{
75+
users.map((u, i) => {
76+
return (
77+
<ListItem
78+
key={i}
79+
roundAvatar
80+
title={u.name}
81+
leftAvatar={{ source: { uri: u.avatar } }}
82+
bottomDivider
83+
titleStyle={{ marginLeft: 8 }}
84+
/>
85+
);
86+
})
87+
}
88+
</Card>
89+
))
90+
91+
.add('Implemented with Text and Button as children', () => (
92+
<Card
93+
title='HELLO WORLD'
94+
image={require('../../../src/logo.png')}
95+
>
96+
<Text style={{ marginBottom: 10 }}>
97+
The idea with React Native Elements is more about component structure than actual design.
98+
</Text>
99+
<Button
100+
icon={<Icon name='code' color='#ffffff' />}
101+
backgroundColor='#03A9F4'
102+
buttonStyle={{ borderRadius: 0, marginLeft: 0, marginRight: 0, marginBottom: 0 }}
103+
title='VIEW NOW'
104+
/>
105+
</Card>
106+
));

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /