setup storybooks web

package.json

@@ -20,7 +20,8 @@
 		"build": "rm -rf dist && tsc",
 		"prestorybook": "rnstl",
 		"storybook": "start-storybook -p 7007",
-		"build-storybook": "npm run prestorybook && build-storybook"
+		"build-storybook": "npm run prestorybook && build-storybook",
+		"storybook:web": "ln -s ../@storybook/react/bin/index.js storybookweb && mv storybookweb node_modules/.bin && storybookweb -p 6006 --config-dir storybook-web"
 	},
 	"repository": {
 		"type": "git",
@@ -51,6 +52,7 @@
 		"@storybook/addon-ondevice-actions": "^5.3.23",
 		"@storybook/addon-ondevice-knobs": "^5.3.26",
 		"@storybook/addon-react-native-web": "0.0.20",
+		"@storybook/react": "^5.3.21",
 		"@storybook/react-native": "^5.3.27",
 		"@storybook/react-native-server": "^5.3.23",
 		"@testing-library/react-native": "^7.2.0",

storybook_old/addons.js → storybook-web/addons.js

@@ -1,4 +1,3 @@
 import '@storybook/addon-actions/register';
 import '@storybook/addon-links/register';
 import '@storybook/addon-knobs/register';
-import '@storybook/addon-react-native-web';

storybook-web/main.js

@@ -0,0 +1,15 @@
+module.exports = {
+	stories: ['./stories/**/*.stories.js'],
+	webpackFinal: (config) => {
+		config.resolve.alias = {
+			...(config.resolve.alias || {}),
+			// Transform all direct `react-native` imports to `react-native-web`
+			'react-native$': 'react-native-web',
+			'@storybook/react-native': '@storybook/react',
+		};
+		config.resolve.extensions = ['.web.js', '.js', '.json'];
+		// mutate babel-loader
+		config.module.rules[0].use[0].options.plugins.push(['react-native-web', {commonjs: true}]);
+		return config;
+	},
+};

storybookold/addons.js

@@ -0,0 +1,3 @@
+import '@storybook/addon-actions/register';
+import '@storybook/addon-links/register';
+import '@storybook/addon-knobs/register';

storybookold/main.js

@@ -0,0 +1,15 @@
+module.exports = {
+	stories: ['../stories/**/*.stories.js'],
+	webpackFinal: (config) => {
+		config.resolve.alias = {
+			...(config.resolve.alias || {}),
+			// Transform all direct `react-native` imports to `react-native-web`
+			'react-native$': 'react-native-web',
+			'@storybook/react-native': '@storybook/react',
+		};
+		config.resolve.extensions = ['.web.js', '.js', '.json'];
+		// mutate babel-loader
+		config.module.rules[0].use[0].options.plugins.push(['react-native-web', {commonjs: true}]);
+		return config;
+	},
+};

storybookold/stories/Avatar/Avatar.stories.js

@@ -0,0 +1,27 @@
+import {storiesOf} from '@storybook/react-native';
+import {text, select, number, color} from '@storybook/addon-knobs';
+import Avatar from '../../../src/components/Avatar';
+import CenterView from '../CenterView';
+import React from 'react';
+
+storiesOf('Avatar', module)
+	.addDecorator((getStory) => <CenterView>{getStory()}</CenterView>)
+	.add('with image', () => (
+		<Avatar
+			size={select('size', ['sm', 'md', 'lg'], 'sm')}
+			textColor={color('textColor', '#FFFFFF')}
+			bgColor={color('bgColor', '#E8EAF6')}
+			imageUrl={text('imageUrl', 'https://avatars.githubusercontent.com/u/49998302?s=200&v=4')}
+			placeholder={text('placeholder', 'Janis Commerce')}
+			customSize={number('customSize', '')}
+		/>
+	))
+	.add('with only placeholder', () => (
+		<Avatar
+			size={select('size', ['sm', 'md', 'lg'], 'sm')}
+			textColor={color('textColor', '#FFFFFF')}
+			bgColor={color('bgColor', '#E8EAF6')}
+			placeholder={text('placeholder', 'Janis Commerce')}
+			customSize={number('customSize', '')}
+		/>
+	));

storybookold/stories/Button/Button.stories.js

@@ -0,0 +1,20 @@
+import {action} from '@storybook/addon-actions';
+import {text} from '@storybook/addon-knobs';
+import {storiesOf} from '@storybook/react-native';
+import React from 'react';
+import {Text} from 'react-native';
+import Button from '.';
+import CenterView from '../CenterView';
+
+storiesOf('Button', module)
+	.addDecorator((getStory) => <CenterView>{getStory()}</CenterView>)
+	.add('with text', () => (
+		<Button onPress={action('clicked-text')}>
+			<Text>{text('Button text', 'Hello Button')}</Text>
+		</Button>
+	))
+	.add('with some emoji', () => (
+		<Button onPress={action('clicked-emoji')}>
+			<Text>😀 😎 👍 💯</Text>
+		</Button>
+	));

storybookold/stories/Button/index.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {TouchableHighlight} from 'react-native';
+
+export default function Button({onPress, children}) {
+	return <TouchableHighlight onPress={onPress}>{children}</TouchableHighlight>;
+}
+
+Button.defaultProps = {
+	children: null,
+	onPress: () => {},
+};
+
+Button.propTypes = {
+	children: PropTypes.node,
+	onPress: PropTypes.func,
+};

storybookold/stories/CenterView/index.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {View} from 'react-native';
+import style from './style';
+
+export default function CenterView({children}) {
+	return <View style={style.main}>{children}</View>;
+}
+
+CenterView.defaultProps = {
+	children: null,
+};
+
+CenterView.propTypes = {
+	children: PropTypes.node,
+};

storybookold/stories/CenterView/style.js

@@ -0,0 +1,8 @@
+export default {
+	main: {
+		flex: 1,
+		justifyContent: 'center',
+		alignItems: 'center',
+		backgroundColor: '#F5FCFF',
+	},
+};

storybookold/stories/CheckBox/CheckBox.stories.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import {storiesOf} from '@storybook/react-native';
+import {boolean, number, color} from '@storybook/addon-knobs';
+import CheckBox from '../../../src/components/CheckBox';
+import CenterView from '../CenterView';
+import {action} from '@storybook/addon-actions';
+
+storiesOf('CheckBox', module)
+	.addDecorator((getStory) => <CenterView>{getStory()}</CenterView>)
+	.add('default props', () => (
+		<CheckBox
+			checked={boolean('checked', true)}
+			onValueChange={action('onValueChange')}
+			customSize={number('customSize', 16)}
+			checkOnColor={color('checkOnColor', '#2979FF')}
+			checkOffColor={color('checkOffColor', '#939598')}
+			iconCheckColor={color('iconCheckColor', '#FFF')}
+			borderRadius={number('borderRadius', 4)}
+			disabled={boolean('disabld', false)}
+		/>
+	));

storybookold/stories/index.js

@@ -0,0 +1,3 @@
+import './Button/Button.stories';
+import './Avatar/Avatar.stories';
+import './CheckBox/CheckBox.stories';