Skip to content

Commit 7bcaa86

Browse files
dimaportenkodimaportenko
committed
refactoring Sanjeev commit
1 parent 55594f3 commit 7bcaa86

10 files changed

+285
-4
lines changed

‎index.js

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,13 @@
11
import { AppRegistry } from 'react-native';
22
import App from './src/App';
3+
// import StorybookUIRoot from './storybook';
4+
5+
// Should we show storybook instead of our app?
6+
//
7+
// ⚠️ Leave this as `false` when checking into git.
8+
// const SHOW_STORYBOOK = true;
9+
//
10+
// const RootComponent = SHOW_STORYBOOK && __DEV__ ? StorybookUIRoot : App;
11+
// AppRegistry.registerComponent('magento_mobile_app', () => RootComponent);
312

413
AppRegistry.registerComponent('magento_mobile_app', () => App);

‎package.json

Lines changed: 16 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,15 +4,17 @@
44
"private": true,
55
"scripts": {
66
"start": "node node_modules/react-native/local-cli/cli.js start",
7-
"test": "jest"
7+
"test": "jest",
8+
"prestorybook": "rnstl",
9+
"storybook": "(adb reverse tcp:7007 tcp:7007 || true) && start-storybook"
810
},
911
"dependencies": {
1012
"@react-native-community/async-storage": "^1.6.2",
1113
"bugsnag-react-native": "^2.23.2",
1214
"lodash": "^4.17.15",
1315
"metro-react-native-babel-preset": "0.51.0",
14-
"moment": "^2.24.0",
15-
"react-native-fast-image": "^7.0.2",
16+
"moment": "^2.24.0",
17+
"react-native-fast-image": "^7.0.2",
1618
"prop-types": "^15.6.0",
1719
"react": "16.9.0",
1820
"react-native": "0.61.2",
@@ -37,6 +39,7 @@
3739
"redux-thunk": "^2.3.0"
3840
},
3941
"devDependencies": {
42+
"@storybook/react-native": "^5.2.4",
4043
"babel-eslint": "^10.0.2",
4144
"babel-jest": "20.0.3",
4245
"babel-preset-react-native": "5.0.0",
@@ -48,9 +51,18 @@
4851
"eslint-plugin-react": "^7.14.2",
4952
"eslint-plugin-react-hooks": "^1.6.1",
5053
"jest": "20.0.4",
54+
"react-native-storybook-loader": "^1.8.1",
5155
"react-test-renderer": "16.0.0-alpha.12"
5256
},
5357
"jest": {
5458
"preset": "react-native"
55-
}
59+
},
60+
"config": {
61+
"react-native-storybook-loader": {
62+
"searchDir": [
63+
"./src"
64+
],
65+
"pattern": "**/*.stories.js"
66+
}
67+
}
5668
}

‎storybook/index.js

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import { getStorybookUI, configure } from '@storybook/react-native';
2+
import { loadStories } from './storyLoader';
3+
4+
import './rn-addons';
5+
6+
// import stories
7+
configure(() => {
8+
loadStories();
9+
}, module);
10+
11+
// Refer to https://github.com/storybookjs/storybook/tree/master/app/react-native#start-command-parameters
12+
// To find allowed options for getStorybookUI
13+
const StorybookUIRoot = getStorybookUI({});
14+
15+
export default StorybookUIRoot;

‎storybook/rn-addons.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
// import '@storybook/addon-ondevice-knobs/register';
2+
// import '@storybook/addon-ondevice-notes/register';

‎storybook/stories.js

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import React from 'react';
2+
import { storiesOf } from '@storybook/react-native';
3+
import { View, Text } from 'react-native';
4+
5+
const style = {
6+
flex: 1,
7+
justifyContent: 'center',
8+
alignItems: 'center',
9+
backgroundColor: '#F5FCFF',
10+
};
11+
12+
const CenteredView = ({ children }) => <View style={style}>{children}</View>;
13+
14+
storiesOf('CenteredView', module).add('default view', () => (
15+
<CenteredView>
16+
<Text>Hello Storybook</Text>
17+
</CenteredView>
18+
));

‎storybook/stories/Button.stories.js

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import React from 'react';
2+
import { storiesOf } from '@storybook/react-native';
3+
import { Button } from '../../src/components/common';
4+
import { ThemeProvider, theme } from '../../src/theme';
5+
6+
const onPress = () => console.log('On Press click!');
7+
8+
const styles = {
9+
customButton: {
10+
borderWidth: 2,
11+
backgroundColor: 'salmon',
12+
borderColor: 'red',
13+
height: 60,
14+
}
15+
};
16+
17+
storiesOf('Button', module)
18+
.addDecorator(getStory => (
19+
<ThemeProvider theme={theme}>{getStory()}</ThemeProvider>
20+
))
21+
.add('default', () => (
22+
<Button onPress={onPress}>Default Button</Button>
23+
))
24+
.add('disabled button', () => (
25+
<Button disabled onPress={onPress}>Disabled Button</Button>
26+
))
27+
.add('custom Button', () => (
28+
<Button style={styles.customButton} onPress={onPress}>Custom button</Button>
29+
));

‎storybook/stories/Input.stories.js

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
import React, { useState } from 'react';
2+
import { storiesOf } from '@storybook/react-native';
3+
import { Input } from '../../src/components/common';
4+
import { ThemeProvider, theme } from '../../src/theme';
5+
6+
const styles = {
7+
labelStyle: {
8+
color: 'orange',
9+
fontWeight: 'bold',
10+
fontSize: 22,
11+
},
12+
inputStyle: {
13+
color: 'green',
14+
},
15+
containerStyle: {
16+
height: 60,
17+
backgroundColor: '#444',
18+
borderBottomWidth: 5,
19+
borderTopWidth: 0,
20+
borderLeftWidth: 0,
21+
borderRightWidth: 0,
22+
borderBottomColor: '#000',
23+
flexDirection: 'row',
24+
alignItems: 'center',
25+
}
26+
};
27+
28+
storiesOf('Input', module)
29+
.addDecorator(getStory => (
30+
<ThemeProvider theme={theme}>{getStory()}</ThemeProvider>
31+
))
32+
.add('default', () => React.createElement(() => {
33+
const [value, setValue] = useState('');
34+
return (
35+
<Input
36+
value={value}
37+
onChangeText={setValue}
38+
placeholder="Type name..."
39+
/>
40+
)
41+
}))
42+
.add('with label', () => React.createElement(() => {
43+
const [value, setValue] = useState('');
44+
return (
45+
<Input
46+
value={value}
47+
onChangeText={setValue}
48+
label="Name"
49+
placeholder="Enter name"
50+
/>
51+
);
52+
}))
53+
.add('with custom input style', () => React.createElement(() => {
54+
const [value, setValue] = useState('');
55+
return (
56+
<Input
57+
value={value}
58+
onChangeText={setValue}
59+
inputStyle={styles.inputStyle}
60+
placeholder="Type name..."
61+
/>
62+
)
63+
}))
64+
.add('with custom label style', () => React.createElement(() => {
65+
const [value, setValue] = useState('');
66+
return (
67+
<Input
68+
value={value}
69+
onChangeText={setValue}
70+
label="label"
71+
labelStyle={styles.labelStyle}
72+
placeholder="Type name..." />
73+
)
74+
}))
75+
.add('with custom container style', () => React.createElement(() => {
76+
const [value, setValue] = useState('');
77+
return (
78+
<Input
79+
value={value}
80+
onChangeText={setValue}
81+
placeholderTextColor="#fff"
82+
inputStyle={{ color: '#fff' }}
83+
containerStyle={styles.containerStyle}
84+
placeholder="Type name..."
85+
/>
86+
)
87+
}));

‎storybook/stories/Spinner.stories.js

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import React from 'react';
2+
import { storiesOf } from '@storybook/react-native';
3+
import { Spinner } from '../../src/components/common';
4+
import { ThemeProvider, theme } from '../../src/theme';
5+
6+
const styles = {
7+
container: {
8+
backgroundColor: 'pink',
9+
}
10+
};
11+
12+
storiesOf('Spinner', module)
13+
.addDecorator(getStory => (
14+
<ThemeProvider theme={theme}>{getStory()}</ThemeProvider>
15+
))
16+
.add('default', () => (
17+
<Spinner />
18+
))
19+
.add('small size', () => (
20+
<Spinner size="small" />
21+
))
22+
.add('large size', () => (
23+
<Spinner size="large" />
24+
))
25+
.add('custom style', () => (
26+
<Spinner style={styles.container} />
27+
));

‎storybook/stories/Text.stories.js

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
export * from '../../src/components/common/Text';
2+
import React from 'react';
3+
import { storiesOf } from '@storybook/react-native';
4+
import { Text } from '../../src/components/common';
5+
import { ThemeProvider, theme } from '../../src/theme';
6+
7+
const styles = {
8+
customText: {
9+
fontFamily: 'Roboto',
10+
color: 'green',
11+
fontSize: 28,
12+
fontStyle: 'italic',
13+
fontWeight: '600',
14+
}
15+
};
16+
17+
storiesOf('Text', module)
18+
.addDecorator(getStory => (
19+
<ThemeProvider theme={theme}>{getStory()}</ThemeProvider>
20+
))
21+
.add('default', () => (
22+
<Text>Hello I am a default text!</Text>
23+
))
24+
.add('default with bold', () => (
25+
<Text bold>Hello I am a default bold text!</Text>
26+
))
27+
.add('heading', () => (
28+
<Text type="heading">Hello I am a heading text!</Text>
29+
))
30+
.add('heading with bold', () => (
31+
<Text type="heading" bold>Hello I am a heading bold text!</Text>
32+
))
33+
.add('subHeading', () => (
34+
<Text type="subheading">Hello I am a subHeading text!</Text>
35+
))
36+
.add('subHeading with bold', () => (
37+
<Text type="subheading" bold>Hello I am a subHeading bold text!</Text>
38+
))
39+
.add('body', () => (
40+
<Text type="body">Hello I am a body text!</Text>
41+
))
42+
.add('body with bold', () => (
43+
<Text type="body" bold>Hello I am a body bold text!</Text>
44+
))
45+
.add('label', () => (
46+
<Text type="label">Hello I am a label text!</Text>
47+
))
48+
.add('label with bold', () => (
49+
<Text type="label" bold>Hello I am a label bold text!</Text>
50+
))
51+
.add('caption', () => (
52+
<Text type="caption">Hello I am a caption text!</Text>
53+
))
54+
.add('caption with bold', () => (
55+
<Text type="caption" bold>Hello I am a caption bold text!</Text>
56+
))
57+
.add('custom style text', () => (
58+
<Text type="subheading" bold style={styles.customText}>Hello I am a custom styled text, with fontFamily = Roboto, color = green, fontSize = 28, fontStyle = italic and fontWeight 600</Text>
59+
));

‎storybook/storyLoader.js

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
// Auto-generated file created by react-native-storybook-loader
2+
// Do not edit.
3+
//
4+
// https://github.com/elderfo/react-native-storybook-loader.git
5+
6+
function loadStories() {
7+
require('./stories/Button.stories');
8+
require('./stories/Input.stories');
9+
require('./stories/Spinner.stories');
10+
require('./stories/Text.stories');
11+
}
12+
13+
const stories = [
14+
'../src/components/common/Button/Button.stories',
15+
'../src/components/common/Input/Input.stories',
16+
'../src/components/common/Spinner/Spinner.stories',
17+
'../src/components/common/Text/Text.stories'
18+
];
19+
20+
module.exports = {
21+
loadStories,
22+
stories,
23+
};

0 commit comments

Comments
 (0)