+ react-native-web support

Fixed Storybook in current project

Dummy RNW Button

Grouped Button stories

Storybook 5.0.3

react-native alias

- material-ui requirement

Button test

tests and rnw notes

Fixed Button test

.storybook/webpack.config.js

@@ -0,0 +1,8 @@
+const path = require('path');
+
+module.exports = ({ config }) => {
+  config.resolve.alias = {
+    'react-native': 'react-native-web'
+  };
+  return config;
+};

README.md

@@ -9,3 +9,11 @@ First install dependencies:
 Then start the dev mode:
 
 `yarn storybook`
+
+Tests
+
+`yarn test`
+
+## Notes
+
+This project uses React Native Web, so to keep React Native compatibility [only available APIs](https://github.com/necolas/react-native-web#components) can be used cross platform.

package.json

@@ -7,6 +7,7 @@
     "polished": "^3.0.3",
     "react": "^16.8.4",
     "react-dom": "^16.8.4",
+    "react-native-web": "^0.11.1",
     "react-scripts": "2.1.8",
     "styled-components": "^4.1.3",
     "typeface-roboto": "0.0.54"
@@ -22,14 +23,14 @@
   },
   "devDependencies": {
     "@babel/core": "^7.3.4",
-    "@storybook/addon-actions": "^5.0.1",
+    "@storybook/addon-actions": "^5.0.3",
-    "@storybook/addon-backgrounds": "^5.0.1",
+    "@storybook/addon-backgrounds": "^5.0.3",
-    "@storybook/addon-knobs": "^5.0.1",
+    "@storybook/addon-knobs": "^5.0.3",
-    "@storybook/addon-links": "^5.0.1",
+    "@storybook/addon-links": "^5.0.3",
-    "@storybook/addon-options": "^5.0.1",
+    "@storybook/addon-options": "^5.0.3",
-    "@storybook/addon-viewport": "^5.0.1",
+    "@storybook/addon-viewport": "^5.0.3",
-    "@storybook/addons": "^5.0.1",
+    "@storybook/addons": "^5.0.3",
-    "@storybook/react": "^5.0.1",
+    "@storybook/react": "^5.0.3",
     "@storybook/storybook-deployer": "^2.8.1",
     "babel-loader": "^8.0.5"
   },

src/components/Button.jsx

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import { Button as Btn } from 'react-native';
+
+export class Button extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+
+  toggle = () => {
+    console.log('touched')
+  };
+
+  render() {
+    const { title, color } = this.props;
+    return (
+      <Btn
+        onPress={this.toggle}
+        title={title}
+        color={ color || "#841584"}
+        accessibilityLabel="Learn more about this purple button"
+      />
+    );
+  }
+}

src/components/Button.test.jsx

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import { Button as Btn } from 'react-native';
+
+import ReactDOM from 'react-dom';
+
+it('renders without crashing', () => {
+  const div = document.createElement('div');
+  ReactDOM.render(<Btn title="dai cazzo" onPress={() => {} } />, div);
+  ReactDOM.unmountComponentAtNode(div);
+});

src/components/Welcome.jsx

@@ -1,6 +1,4 @@
 import React from 'react';
-import Typography from '@material-ui/core/Typography';
-
 
 const styles = {
   main: {
@@ -39,10 +37,9 @@ export default class Welcome extends React.Component {
   render() {
     return (
       <div style={styles.main}>
-        <Typography variant="display3">Welcome to Stability</Typography>
+        <>
-        <Typography variant="subheading" gutterBottom>
           A reusable component library that is designed and engineered to help us build better product faster at Status.
-        </Typography>
+        </>
       </div>
     );
   }

src/stories/index.js

@@ -4,10 +4,14 @@ import 'typeface-roboto'
 import { storiesOf } from '@storybook/react'
 import { linkTo } from '@storybook/addon-links'
 
-import { Welcome } from '@storybook/react/demo'
+import StatusWelcome from '../components/Welcome'
+import { Button } from '../components/Button'
 // import MobileButton from '../components/MobileButton'
 
-storiesOf('Welcome', module)
-  .add('To Status-Storybook', () => <StatusWelcome />)
-  .add('to Storybook', () => <Welcome showApp={linkTo('Button')} />)
 
+storiesOf('Welcome', module)
+  .add('To Status-Welcome', () => <StatusWelcome showApp={linkTo('Button')} />)
+
+storiesOf('Button', module)
+  .add('To Status-Button', () => <Button title="Click Me" />)
+  .add('Red Button', () => <Button title="Click Me" color="red" />)