ecki/modernjs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #4 from fkereki/Storybook-for-RN

Browse Source 
Storybook working
This commit is contained in:
Federico Kereki
2018-09-23 01:56:10 -03:00
committed by GitHub
parent 6159e3c5c3 4133bd644c
commit 6d8c44908a
13 changed files with 7739 additions and 299 deletions
Download Patch File Download Diff File Expand all files Collapse all files
chapter12/App.js
+1 -23
View File
@@ -1,23 +1 @@
/* @flow */
import React from "react";
import { Provider } from "react-redux";
import Reactotron from "reactotron-react-native";
import { store } from "./src/regionsStyledApp/store";
import { ConnectedMain } from "./src/regionsStyledApp/main.connected";
if (process.env.NODE_ENV === "development") {
Reactotron.configure({ port: 9090 })
.useReactNative()
.connect();
}
export default class App extends React.PureComponent<> {
render() {
return (
<Provider store={store}>
<ConnectedMain />
</Provider>
);
}
}
export default from './storybook';
chapter12/App.standard.js
+23
View File
@@ -0,0 +1,23 @@
/* @flow */
import React from "react";
import { Provider } from "react-redux";
import Reactotron from "reactotron-react-native";
import { store } from "./src/regionsStyledApp/store";
import { ConnectedMain } from "./src/regionsStyledApp/main.connected";
if (process.env.NODE_ENV === "development") {
Reactotron.configure({ port: 9090 })
.useReactNative()
.connect();
}
export default class App extends React.PureComponent<> {
render() {
return (
<Provider store={store}>
<ConnectedMain />
</Provider>
);
}
}
chapter12/App.storybook.js
+1
View File
@@ -0,0 +1 @@
export default from './storybook';
chapter12/package-lock.json
Generated
+7533 -223
View File
File diff suppressed because it is too large Load Diff
chapter12/package.json
+25 -10
View File
@@ -3,12 +3,16 @@
"version": "0.1.0",
"private": true,
"devDependencies": {
"@storybook/addon-actions": "^3.4.11",
"@storybook/addon-links": "^3.4.11",
"@storybook/cli": "^3.4.11",
"@storybook/react-native": "^3.4.11",
"enzyme": "^3.6.0",
"enzyme-adapter-react-16": "^1.5.0",
"eslint": "^5.6.0",
"eslint-config-recommended": "^3.0.0",
"eslint-plugin-babel": "^5.2.0",
"eslint-plugin-flowtype": "^2.50.0",
"eslint-plugin-flowtype": "^2.50.1",
"eslint-plugin-react": "^7.11.1",
"eslint-plugin-react-native": "^3.3.0",
"flow": "^0.2.3",
@@ -16,24 +20,35 @@
"flow-coverage-report": "^0.6.0",
"flow-typed": "^2.5.1",
"jest-expo": "~27.0.0",
"prettier": "^1.14.2",
"prettier": "^1.14.3",
"react-addons-test-utils": "^15.6.2",
"react-devtools": "^3.3.4",
"react-devtools": "^3.4.0",
"react-native-scripts": "1.14.0",
"react-test-renderer": "^16.5.1",
"react-native-storybook-loader": "^1.8.0",
"react-test-renderer": "^16.5.2",
"reactotron-react-native": "^2.1.0",
"remote-redux-devtools-sp": "^0.5.13"
"redux-devtools-extension": "^2.13.5"
},
"main": "./node_modules/react-native-scripts/build/bin/crna-entry.js",
"scripts": {
"start": "react-native-scripts start",
"start": "cp App.standard.js App.js && react-native-scripts start",
"eject": "react-native-scripts eject",
"android": "react-native-scripts android",
"ios": "react-native-scripts ios",
"test": "jest",
"coverage": "jest --coverage --no-cache",
"flow": "flow",
"addTypes": "flow-typed install"
"addTypes": "flow-typed install",
"storybook": "cp App.storybook.js App.js && rnstl && storybook start -p 7007"
},
"config": {
"react-native-storybook-loader": {
"searchDir": [
"./src"
],
"pattern": "**/*.story.js",
"outputFile": "./storybook/storyLoader.js"
}
},
"jest": {
"preset": "jest-expo"
@@ -42,10 +57,10 @@
"axios": "^0.18.0",
"expo": "^27.0.1",
"prop-types": "^15.6.2",
"react": "^16.5.1",
"react-dom": "^16.5.1",
"react": "^16.5.2",
"react-dom": "^16.5.2",
"react-native": "~0.55.2",
"react-navigation": "^2.14.2",
"react-navigation": "^2.16.0",
"react-redux": "^5.0.7",
"redux-mock-store": "^1.5.3",
"redux-thunk": "^2.3.0",
chapter12/src/regionsStyledApp/countrySelect.story.js
+53
View File
@@ -0,0 +1,53 @@
/* @flow */
import React from "react";
import { storiesOf } from "@storybook/react-native";
import { action } from "@storybook/addon-actions";
import { Centered } from "../../storybook/centered";
import { CountrySelect } from "./countrySelect.component";
const fakeDeviceData = {
isTablet: false,
isPortrait: true,
height: 1000,
width: 720,
scale: 1,
fontScale: 1
};
storiesOf("CountrySelect", module)
.addDecorator(getStory => <Centered>{getStory()}</Centered>)
.add("with no countries yet", () => (
<CountrySelect
deviceData={fakeDeviceData}
loading={true}
currentCountry={""}
onSelect={action("click:country")}
getCountries={action("call:getCountries")}
list={[]}
/>
))
.add("with three countries", () => (
<CountrySelect
deviceData={fakeDeviceData}
currentCountry={""}
loading={false}
onSelect={action("click:country")}
getCountries={action("call:getCountries")}
list={[
{
countryCode: "UY",
countryName: "Uruguay"
},
{
countryCode: "AR",
countryName: "Argentina"
},
{
countryCode: "BR",
countryName: "Brazil"
}
]}
/>
));
chapter12/src/regionsStyledApp/regionsTable.story.js
+44
View File
@@ -0,0 +1,44 @@
/* @flow */
import React from "react";
import { storiesOf } from "@storybook/react-native";
import { Centered } from "../../storybook/centered";
import { RegionsTable } from "./regionsTable.component";
const fakeDeviceData = {
isTablet: false,
isPortrait: true,
height: 1000,
width: 720,
scale: 1,
fontScale: 1
};
storiesOf("RegionsTable", module)
.addDecorator(getStory => <Centered>{getStory()}</Centered>)
.add("with no regions", () => (
<RegionsTable deviceData={fakeDeviceData} list={[]} />
))
.add("with some regions", () => (
<RegionsTable
deviceData={fakeDeviceData}
list={[
{
countryCode: "UY",
regionCode: "10",
regionName: "Montevideo"
},
{
countryCode: "UY",
regionCode: "9",
regionName: "Maldonado"
},
{
countryCode: "UY",
regionCode: "5",
regionName: "Cerro Largo"
}
]}
/>
));
chapter12/src/regionsStyledApp/store.js
+1 -1
View File
@@ -2,7 +2,7 @@
import { createStore, applyMiddleware } from "redux";
import thunk from "redux-thunk";
import { composeWithDevTools } from "remote-redux-devtools-sp";
import { composeWithDevTools } from "redux-devtools-extension"; // decia remote-redux-devtools-sp
import { reducer } from "./world.reducer";
chapter12/storybook/addons.js
+2
View File
@@ -0,0 +1,2 @@
import '@storybook/addon-actions/register';
import '@storybook/addon-links/register';
chapter12/storybook/centered.js
+25
View File
@@ -0,0 +1,25 @@
/* @flow */
import React from "react";
import { View, StyleSheet } from "react-native";
import PropTypes from "prop-types";
const centerColor = "white";
const styles = StyleSheet.create({
centered: {
flex: 1,
backgroundColor: centerColor,
alignItems: "center",
justifyContent: "center"
}
});
export class Centered extends React.Component<{ children: node }> {
static propTypes = {
children: PropTypes.node.isRequired
};
render() {
return <View style={styles.centered}>{this.props.children}</View>;
}
}
chapter12/storybook/index.js
+9
View File
@@ -0,0 +1,9 @@
import { getStorybookUI, configure } from "@storybook/react-native";
import { loadStories } from "./storyLoader";
configure(loadStories, module);
const StorybookUI = getStorybookUI({ port: 7007, onDeviceUI: true });
export default StorybookUI;
chapter12/storybook/storyLoader.js
+22
View File
@@ -0,0 +1,22 @@
// Auto-generated file created by react-native-storybook-loader
// Do not edit.
//
// https://github.com/elderfo/react-native-storybook-loader.git
function loadStories() {
require('../src/regionsStyledApp/countrySelect.story');
require('../src/regionsStyledApp/regionsTable.story');
}
const stories = [
'../src/regionsStyledApp/countrySelect.story',
'../src/regionsStyledApp/regionsTable.story',
];
module.exports = {
loadStories,
stories,
};
package-lock.json
Generated
-42
View File
@@ -1,42 +0,0 @@
{
"requires": true,
"lockfileVersion": 1,
"dependencies": {
"humps": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/humps/-/humps-2.0.1.tgz",
"integrity": "sha1-3QLqYIG9BWjcXQcxhEY5V7qe+ao=",
"dev": true
},
"lodash": {
"version": "4.17.11",
"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.11.tgz",
"integrity": "sha512-cQKh8igo5QUhZ7lg38DYWAxMvjSAKG0A8wGSVimP07SIUEK2UO+arSRKbRZWtelMtN5V0Hkwh5ryOto/SshYIg==",
"dev": true
},
"react-native-debugger": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/react-native-debugger/-/react-native-debugger-1.1.0.tgz",
"integrity": "sha512-ckFI3QztvmLUVE/TCA++V5apVWrsARejSXqSFdTtiKmTNOsHhF+KjiVzwBYk1TegiSCjDU0LHO4m5b+HjN0Ncg==",
"dev": true,
"requires": {
"humps": "^2.0.1",
"lodash": "^4.17.5",
"react-native-device-info": "^0.10.2",
"redux-create-reducer": "^1.1.1"
}
},
"react-native-device-info": {
"version": "0.10.2",
"resolved": "https://registry.npmjs.org/react-native-device-info/-/react-native-device-info-0.10.2.tgz",
"integrity": "sha1-NQzWjtQ4OQIt3qCjpCNDnxb6T7o=",
"dev": true
},
"redux-create-reducer": {
"version": "1.1.3",
"resolved": "https://registry.npmjs.org/redux-create-reducer/-/redux-create-reducer-1.1.3.tgz",
"integrity": "sha512-0K6wjFZRQfuzM2dT7CE4tnBNz+Bf6+e1bJKx+BI9HGZQeFMOwh4+vVTfj6kYaxGmjRRqC5deVs7Eu0ul9GiFvw==",
"dev": true
}
}
}