From da683b8cdbce7edf8c2e4c50a57b781f66ded648 Mon Sep 17 00:00:00 2001 From: Luigi Maselli Date: Mon, 18 Mar 2019 17:42:59 +0100 Subject: [PATCH] + 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 | 8 + README.md | 8 + package.json | 17 +- src/components/Button.jsx | 24 ++ src/components/Button.test.jsx | 10 + src/components/Welcome.jsx | 7 +- src/stories/index.js | 12 +- yarn.lock | 752 ++++++++++++++++++++++----------- 8 files changed, 584 insertions(+), 254 deletions(-) create mode 100644 .storybook/webpack.config.js create mode 100644 src/components/Button.jsx create mode 100644 src/components/Button.test.jsx diff --git a/.storybook/webpack.config.js b/.storybook/webpack.config.js new file mode 100644 index 0000000..711a9d5 --- /dev/null +++ b/.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; +}; \ No newline at end of file diff --git a/README.md b/README.md index 9489054..990aa33 100644 --- a/README.md +++ b/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. \ No newline at end of file diff --git a/package.json b/package.json index 65e7dda..9eb4c46 100644 --- a/package.json +++ b/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-backgrounds": "^5.0.1", - "@storybook/addon-knobs": "^5.0.1", - "@storybook/addon-links": "^5.0.1", - "@storybook/addon-options": "^5.0.1", - "@storybook/addon-viewport": "^5.0.1", - "@storybook/addons": "^5.0.1", - "@storybook/react": "^5.0.1", + "@storybook/addon-actions": "^5.0.3", + "@storybook/addon-backgrounds": "^5.0.3", + "@storybook/addon-knobs": "^5.0.3", + "@storybook/addon-links": "^5.0.3", + "@storybook/addon-options": "^5.0.3", + "@storybook/addon-viewport": "^5.0.3", + "@storybook/addons": "^5.0.3", + "@storybook/react": "^5.0.3", "@storybook/storybook-deployer": "^2.8.1", "babel-loader": "^8.0.5" }, diff --git a/src/components/Button.jsx b/src/components/Button.jsx new file mode 100644 index 0000000..a3929b5 --- /dev/null +++ b/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 ( + + ); + } +} \ No newline at end of file diff --git a/src/components/Button.test.jsx b/src/components/Button.test.jsx new file mode 100644 index 0000000..4810096 --- /dev/null +++ b/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( {} } />, div); + ReactDOM.unmountComponentAtNode(div); +}); diff --git a/src/components/Welcome.jsx b/src/components/Welcome.jsx index 1e03c56..bd317e4 100644 --- a/src/components/Welcome.jsx +++ b/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 (
- Welcome to Stability - + <> A reusable component library that is designed and engineered to help us build better product faster at Status. - +
); } diff --git a/src/stories/index.js b/src/stories/index.js index 983793b..3e3a299 100644 --- a/src/stories/index.js +++ b/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', () => ) - .add('to Storybook', () => ) +storiesOf('Welcome', module) + .add('To Status-Welcome', () => ) + +storiesOf('Button', module) + .add('To Status-Button', () =>