Skip to content

Commit 920e58b

Browse files
haruelrovixharuelrovix
authored
Merge pull request #5 from haruelrovix/feature/writing-stories
feat: Add stories for Button and Avatar
2 parents ae80059 + 7d32cb2 commit 920e58b

File tree

11 files changed

+267
-57
lines changed

11 files changed

+267
-57
lines changed

‎.gitignore‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
1-
!node_modules/
2-
3-
node_modules/*
1+
node_modules
2+
.out
43

54
.expo/*
65
npm-debug.*

‎.storybook/preview-head.html‎

Lines changed: 11 additions & 4 deletions
Large diffs are not rendered by default.

‎.storybook/webpack.config.js‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,16 +18,18 @@ module.exports = {
1818
{
1919
test: /\.js$/,
2020
include: [
21+
path.resolve(__dirname, '../node_modules/react-native/'),
2122
path.resolve(__dirname, '../node_modules/react-native-elements/'),
2223
path.resolve(__dirname, '../node_modules/react-native-ratings/'),
2324
path.resolve(__dirname, '../node_modules/react-native-vector-icons/'),
24-
path.resolve(__dirname, '../'),
2525
],
2626
use: {
2727
loader: 'babel-loader',
2828
options: {
2929
cacheDirectory: false,
30-
presets: ['module:metro-react-native-babel-preset'],
30+
presets: [
31+
['module:metro-react-native-babel-preset', { 'disableImportExportTransform': true }]
32+
],
3133
plugins: [
3234
// needed to support async/await
3335
'@babel/plugin-transform-runtime',

‎LICENSE‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
MIT License
2+
3+
Copyright (c) 2019 Havit Rovik
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in all
13+
copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21+
SOFTWARE.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
"build": "node scripts/build.js",
1414
"test": "node scripts/test.js",
1515
"storybook": "start-storybook -p 6006",
16-
"build-storybook": "build-storybook"
16+
"build-storybook": "build-storybook -c .storybook -o .out"
1717
},
1818
"dependencies": {
1919
"react": "^16.6.x",

‎stories/components/Avatar/avatar.icons.stories.js‎

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
import React from 'react';
2+
import { storiesOf } from '@storybook/react';
3+
4+
import { Avatar } from 'react-native-elements';
5+
6+
storiesOf('Avatar|Icons', module)
7+
8+
.add('default size', () => (
9+
<Avatar
10+
rounded
11+
icon={{ name: 'user', type: 'font-awesome' }}
12+
onPress={() => console.log("Works!")}
13+
activeOpacity={0.7}
14+
containerStyle={{ flex: 2, marginLeft: 20, marginTop: 115 }}
15+
/>
16+
))
17+
18+
.add('small size', () => (
19+
<Avatar
20+
size="small"
21+
rounded
22+
icon={{ name: 'cake', type: 'material' }}
23+
onPress={() => console.log("Works!")}
24+
activeOpacity={0.7}
25+
containerStyle={{ flex: 2, marginLeft: 20, marginTop: 115 }}
26+
/>
27+
))
28+
29+
.add('medium size', () => (
30+
<Avatar
31+
size="medium"
32+
overlayContainerStyle={{ backgroundColor: 'blue' }}
33+
icon={{ name: 'meetup', color: 'red', type: 'font-awesome' }}
34+
onPress={() => console.log("Works!")}
35+
activeOpacity={0.7}
36+
containerStyle={{ flex: 3, marginTop: 100 }}
37+
/>
38+
))
39+
40+
.add('large size', () => (
41+
<Avatar
42+
size="large"
43+
icon={{ name: 'rocket', color: 'orange', type: 'font-awesome' }}
44+
overlayContainerStyle={{ backgroundColor: 'white' }}
45+
onPress={() => console.log("Works!")}
46+
activeOpacity={0.7}
47+
containerStyle={{ flex: 4, marginTop: 75 }}
48+
/>
49+
))
50+
51+
.add('xlarge size', () => (
52+
<Avatar
53+
size="xlarge"
54+
rounded
55+
icon={{ name: 'home', type: 'font-awesome' }}
56+
onPress={() => console.log("Works!")}
57+
activeOpacity={0.7}
58+
containerStyle={{ flex: 5, marginRight: 60 }}
59+
/>
60+
))
61+
62+
.add('with fixed size', () => (
63+
<Avatar
64+
size={200}
65+
rounded
66+
icon={{ name: 'user', type: 'font-awesome' }}
67+
onPress={() => console.log("Works!")}
68+
activeOpacity={0.7}
69+
containerStyle={{ flex: 2, marginLeft: 20, marginTop: 115 }}
70+
/>
71+
));

‎stories/components/Avatar/avatar.initials.stories.js‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
import React from 'react';
2+
import { storiesOf } from '@storybook/react';
3+
4+
import { Avatar } from 'react-native-elements';
5+
6+
storiesOf('Avatar|Initials', module)
7+
8+
.add('rounded Avatar', () => (
9+
<Avatar
10+
size="small"
11+
rounded
12+
title="MT"
13+
onPress={() => console.log("Works!")}
14+
activeOpacity={0.7}
15+
/>
16+
))
17+
18+
.add('medium size', () => (
19+
<Avatar
20+
size="medium"
21+
title="BP"
22+
onPress={() => console.log("Works!")}
23+
activeOpacity={0.7}
24+
/>
25+
))
26+
27+
.add('large size', () => (
28+
<Avatar
29+
size="large"
30+
title="LW"
31+
onPress={() => console.log("Works!")}
32+
activeOpacity={0.7}
33+
/>
34+
))
35+
36+
.add('extra large and rounded', () => (
37+
<Avatar
38+
size="xlarge"
39+
rounded
40+
title="CR"
41+
onPress={() => console.log("Works!")}
42+
activeOpacity={0.7}
43+
/>
44+
));

‎stories/components/Avatar/avatar.placeholder.stories.js‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import React from 'react';
2+
import { storiesOf } from '@storybook/react';
3+
4+
import { ListItem } from 'react-native-elements';
5+
6+
storiesOf('Avatar|Placeholder', module)
7+
8+
.add('with title placeholder', () => (
9+
<ListItem
10+
leftAvatar={{
11+
title: "LG",
12+
source: { uri: 'https://s3.amazonaws.com/uifaces/faces/twitter/larrygerard/128.jpg' },
13+
showEditButton: true,
14+
}}
15+
title="Larry Gerrard"
16+
subtitle="CEO"
17+
chevron
18+
/>
19+
));

‎stories/components/Avatar/avatar.standard.stories.js‎

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 { storiesOf } from '@storybook/react';
3+
4+
import { Avatar } from 'react-native-elements';
5+
6+
storiesOf('Avatar|Standard', module)
7+
8+
.add('standard Avatar', () => (
9+
<Avatar
10+
rounded
11+
source={{
12+
uri: 'https://s3.amazonaws.com/uifaces/faces/twitter/ladylexy/128.jpg',
13+
}}
14+
/>
15+
))
16+
17+
.add('with Title', () => (
18+
<Avatar rounded title="MD" />
19+
))
20+
21+
.add('with Icon', () => (
22+
<Avatar rounded icon={{ name: 'home', type: 'font-awesome' }} />
23+
))
24+
25+
.add('with edit button', () => (
26+
<Avatar
27+
source={{
28+
uri: 'https://s3.amazonaws.com/uifaces/faces/twitter/adhamdannaway/128.jpg',
29+
}}
30+
showEditButton
31+
/>
32+
));

‎stories/components/Button/button.stories.js‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
import React from 'react';
2+
import { storiesOf } from '@storybook/react';
3+
4+
import { Button } from 'react-native-elements';
5+
import Icon from 'react-native-vector-icons/FontAwesome';
6+
7+
storiesOf('Button|Button', module)
8+
9+
.add('with title', () => (
10+
<Button title="Solid Button" />
11+
))
12+
13+
.add('with outline type', () => (
14+
<Button title="Outline Button" type="outline" />
15+
))
16+
17+
.add('with clear type', () => (
18+
<Button title="Clear Button" type="clear" />
19+
))
20+
21+
.add('with icon object', () => (
22+
<Button
23+
icon={{
24+
name: "arrow-right",
25+
size: 15,
26+
color: "white",
27+
type: "font-awesome"
28+
}}
29+
title="Button with icon object"
30+
/>
31+
))
32+
33+
.add('with icon component', () => (
34+
<Button
35+
icon={<Icon
36+
name="arrow-right"
37+
size={15}
38+
color="white"
39+
type="font-awesome"
40+
/>}
41+
title="Button with icon component"
42+
/>
43+
))
44+
45+
.add('with right icon', () => (
46+
<Button
47+
icon={
48+
<Icon
49+
name="arrow-right"
50+
size={15}
51+
color="white"
52+
type="font-awesome"
53+
/>
54+
}
55+
iconRight
56+
title="Button with right icon"
57+
/>
58+
))
59+
60+
.add('with loading', () => (
61+
<Button title="Loading button" loading />
62+
));

0 commit comments

Comments
 (0)