Storybook working

chapter12/App.js

@@ -1,23 +1 @@
-/* @flow */
+export default from './storybook';
-
-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.standard.js

@@ -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

@@ -0,0 +1 @@
+export default from './storybook';

chapter12/package.json

@@ -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": "^16.5.2",
-        "react-dom": "^16.5.1",
+        "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

@@ -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

@@ -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

@@ -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

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

chapter12/storybook/centered.js

@@ -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

@@ -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

@@ -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

@@ -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
-    }
-  }
-}