From 63117eca71b198f1ac917b607e778e9464ecc697 Mon Sep 17 00:00:00 2001 From: Satyajit Sahoo Date: Tue, 16 May 2017 20:39:34 +0530 Subject: [PATCH] wip: improve dev workflow --- .flowconfig | 73 +++++++++---------- example/.babelrc | 22 ++++-- example/.gitignore | 2 +- example/exp.json | 15 ++-- example/main.js | 6 +- example/package.json | 19 +++-- example/rn-cli.config.js | 24 ++++++ example/src/Router.js | 2 +- .../@expo-vector-icons/package.json | 6 ++ package.json | 37 +++++----- src/components/Button.js | 8 +- src/components/Checkbox.js | 4 +- src/components/Drawer/DrawerItem.js | 6 +- src/components/Drawer/DrawerSection.js | 4 +- src/components/HelperText.js | 47 ++++++++++++ src/components/Icon.js | 2 +- src/components/RadioButton.js | 4 +- src/components/SearchBar.js | 4 +- .../TouchableRipple/TouchableRipple.js | 4 +- src/components/Typography/StyledText.js | 4 +- src/styles/DefaultTheme.js | 8 +- 21 files changed, 193 insertions(+), 108 deletions(-) create mode 100644 example/rn-cli.config.js create mode 100644 example/third-party/@expo-vector-icons/package.json create mode 100644 src/components/HelperText.js diff --git a/.flowconfig b/.flowconfig index 01c8e6bfcb..19ef3c2c95 100644 --- a/.flowconfig +++ b/.flowconfig @@ -1,43 +1,40 @@ [ignore] - -# We fork some components by platform. +; We fork some components by platform .*/*[.]android.js -# Ignore templates with `@flow` in header -.*/local-cli/generator.* - -# Ignore malformed json -.*/node_modules/y18n/test/.*\.json +; Ignore templates for 'react-native init' +.*/local-cli/templates/.* -# Ignore the website subdir +; Ignore the website subdir /website/.* -# Ignore BUCK generated dirs +; Ignore "BUCK" generated dirs /\.buckd/ -# Ignore unexpected extra @providesModule -.*/node_modules/commoner/test/source/widget/share.js +; Ignore unexpected extra "@providesModule" +.*/node_modules/.*/node_modules/fbjs/.* ++.*/node_modules/react-dom/.* -# Ignore duplicate module providers -# For RN Apps installed via npm, "Libraries" folder is inside node_modules/react-native but in the source repo it is in the root +; Ignore duplicate module providers +; For RN Apps installed via npm, "Libraries" folder is inside +; "node_modules/react-native" but in the source repo it is in the root .*/Libraries/react-native/React.js .*/Libraries/react-native/ReactNative.js -.*/node_modules/jest-runtime/build/__tests__/.* -.*/node_modules/glamor/es6/CSSPropertyOperations/ - -.*/example/node_modules/fbjs/ -.*/example/node_modules/react/ -.*/example/node_modules/react-static-container/ -.*/example/node_modules/react-native/ -.*/example/node_modules/exponent/ -.*/example/node_modules/@exponent/ -.*/example/node_modules/fbemitter/ +; Ignore duplicate modules under example/ +.*/example/node_modules/fbjs +.*/example/node_modules/fbemitter +.*/example/node_modules/react +.*/example/node_modules/react-native +.*/example/node_modules/expo +.*/example/node_modules/@expo/ex-navigation .*/example/\.buckd/ -.*/docs/node_modules/fbjs/ -.*/docs/node_modules/react/ -.*/docs/node_modules/fbemitter/ +[include] + +[libs] +node_modules/react-native/Libraries/react-native/react-native-interface.js +node_modules/react-native/flow [include] @@ -46,32 +43,28 @@ node_modules/react-native/Libraries/react-native/react-native-interface.js node_modules/react-native/flow [options] -module.system=haste +emoji=true -esproposal.decorators=ignore -esproposal.class_static_fields=enable -esproposal.class_instance_fields=enable -esproposal.export_star_as=enable - -unsafe.enable_getters_and_setters=true +module.system=haste experimental.strict_type_args=true munge_underscores=true -module.name_mapper='^exponent$' -> 'emptyObject' -module.name_mapper='^@exponent/ex-navigation$' -> 'emptyObject' -module.name_mapper='^react-native-vector-icons/MaterialIcons$' -> 'emptyObject' -module.name_mapper='^image![a-zA-Z0-9$_-]+$' -> 'GlobalImageStub' +module.name_mapper='^expo$' -> 'emptyObject' +module.name_mapper='^@expo/ex-navigation$' -> 'emptyObject' module.name_mapper='^[./a-zA-Z0-9$_-]+\.\(bmp\|gif\|jpg\|jpeg\|png\|psd\|svg\|webp\|m4v\|mov\|mp4\|mpeg\|mpg\|webm\|aac\|aiff\|caf\|m4a\|mp3\|wav\|html\|pdf\)$' -> 'RelativeImageStub' suppress_type=$FlowIssue suppress_type=$FlowFixMe suppress_type=$FixMe -suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(>=0\\.\\(3[0-2]\\|[1-2][0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\) -suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(>=0\\.\\(3[0-2]\\|1[0-9]\\|[1-2][0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)?:? #[0-9]+ +suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(>=0\\.\\(4[0-2]\\|[1-3][0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native_oss[a-z,_]*\\)?)\\) +suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(>=0\\.\\(4[0-2]\\|[1-3][0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native_oss[a-z,_]*\\)?)\\)?:? #[0-9]+ suppress_comment=\\(.\\|\n\\)*\\$FlowFixedInNextDeploy +suppress_comment=\\(.\\|\n\\)*\\$FlowExpectedError + +unsafe.enable_getters_and_setters=true [version] -^0.33.0 +^0.42.0 diff --git a/example/.babelrc b/example/.babelrc index 2e76127ea7..e4a7bdea9e 100644 --- a/example/.babelrc +++ b/example/.babelrc @@ -1,8 +1,18 @@ { - "presets": ["react-native-stage-0/decorator-support"], - "env": { - "development": { - "plugins": ["transform-react-jsx-source"] - } - } + "presets": [ + "expo" + ], + "plugins": [ + ["module-resolver", { + "alias": { + "react-native-paper": "..", + "react-native-vector-icons": "@expo-vector-icons", + "@expo-vector-icons/lib/create-icon-set": "react-native-vector-icons/lib/create-icon-set", + "@expo-vector-icons/lib/icon-button": "react-native-vector-icons/lib/icon-button", + "@expo-vector-icons/lib/create-icon-set-from-fontello": "react-native-vector-icons/lib/create-icon-set-from-fontello", + "@expo-vector-icons/lib/create-icon-set-from-icomoon": "react-native-vector-icons/lib/create-icon-set-from-icomoon", + "@expo-vector-icons/glyphmaps": "react-native-vector-icons/glyphmaps" + } + }] + ] } diff --git a/example/.gitignore b/example/.gitignore index 5e66ba6eab..9f9e17e078 100644 --- a/example/.gitignore +++ b/example/.gitignore @@ -1,3 +1,3 @@ node_modules/**/* -.exponent/* +.expo/* npm-debug.* diff --git a/example/exp.json b/example/exp.json index e301acd2c8..ec18be5634 100644 --- a/example/exp.json +++ b/example/exp.json @@ -2,20 +2,19 @@ "name": "React Native Paper Example", "description": "Example for React Native Paper", "slug": "react-native-paper-example", - "sdkVersion": "11.0.0", + "sdkVersion": "16.0.0", "version": "1.0.0", "orientation": "default", "primaryColor": "#cccccc", - "iconUrl": "https://s3.amazonaws.com/exp-brand-assets/ExponentEmptyManifest_192.png", "notification": { - "iconUrl": "https://s3.amazonaws.com/exp-us-standard/placeholder-push-icon-blue-circle.png", + "icon": "https://s3.amazonaws.com/exp-us-standard/placeholder-push-icon-blue-circle.png", "color": "#000000" }, - "loading": { - "iconUrl": "https://s3.amazonaws.com/exp-brand-assets/ExponentEmptyManifest_192.png", - "hideExponentText": false - }, "packagerOpts": { - "assetExts": ["ttf", "mp4"] + "assetExts": [ + "ttf" + ], + "config": "./rn-cli.config.js", + "projectRoots": "" } } diff --git a/example/main.js b/example/main.js index d1bdd1fe52..683122dc81 100644 --- a/example/main.js +++ b/example/main.js @@ -1,6 +1,6 @@ /* @flow */ -import Exponent from 'exponent'; +import Expo from 'expo'; import React, { Component } from 'react'; import { View, @@ -10,7 +10,7 @@ import { import { NavigationProvider, StackNavigation, -} from '@exponent/ex-navigation'; +} from '@expo/ex-navigation'; import { Colors, Drawer, @@ -89,4 +89,4 @@ const styles = StyleSheet.create({ }, }); -Exponent.registerRootComponent(App); +Expo.registerRootComponent(App); diff --git a/example/package.json b/example/package.json index d20226ee90..d8d457e3b8 100644 --- a/example/package.json +++ b/example/package.json @@ -6,12 +6,17 @@ "private": true, "main": "main.js", "dependencies": { - "@exponent/ex-navigation": "^2.0.0", - "@exponent/vector-icons": "^2.0.3", - "exponent": "^11.0.2", - "react": "~15.3.2", - "react-native": "github:exponentjs/react-native#sdk-11.0.3", - "react-native-paper": "file:../", - "react-native-vector-icons": "git+https://github.com/exponentjs/react-native-vector-icons.git" + "@expo/ex-navigation": "^2.0.0", + "@expo/vector-icons": "^4.0.0", + "escape-string-regexp": "^1.0.5", + "expo": "~16.0.0", + "polished": "^1.1.2", + "react": "16.0.0-alpha.6", + "react-native": "git+https://github.com/expo/react-native.git#sdk-16.0.0", + "react-native-drawer": "^2.3.0" + }, + "devDependencies": { + "babel-plugin-module-resolver": "^2.7.0", + "babel-preset-expo": "^1.0.0" } } diff --git a/example/rn-cli.config.js b/example/rn-cli.config.js new file mode 100644 index 0000000000..18c7beef31 --- /dev/null +++ b/example/rn-cli.config.js @@ -0,0 +1,24 @@ +/* eslint-disable import/no-commonjs */ + +const path = require('path'); +const escape = require('escape-string-regexp'); +const blacklist = require('react-native/packager/blacklist'); + +module.exports = { + getProjectRoots() { + return [__dirname, path.resolve(__dirname, '..')]; + }, + getProvidesModuleNodeModules() { + return ['react-native', 'react', 'prop-types', 'react-native-drawer', 'polished']; + }, + getBlacklistRE() { + return blacklist([ + new RegExp( + `^${escape(path.resolve(__dirname, '..', 'node_modules'))}\\/.*$` // eslint-disable-line prettier/prettier + ), + new RegExp( + `^${escape(path.resolve(__dirname, '..', 'docs', 'node_modules'))}\\/.*$` // eslint-disable-line prettier/prettier + ), + ]); + }, +}; diff --git a/example/src/Router.js b/example/src/Router.js index 4211939706..bf45205991 100644 --- a/example/src/Router.js +++ b/example/src/Router.js @@ -3,7 +3,7 @@ import React from 'react'; import { createRouter, -} from '@exponent/ex-navigation'; +} from '@expo/ex-navigation'; import ExampleList, { examples } from './ExampleList'; const routes = Object.keys(examples) diff --git a/example/third-party/@expo-vector-icons/package.json b/example/third-party/@expo-vector-icons/package.json new file mode 100644 index 0000000000..875a3db300 --- /dev/null +++ b/example/third-party/@expo-vector-icons/package.json @@ -0,0 +1,6 @@ +{ + "name": "@expo-vector-icons", + "version": "1.0.0", + "main": "../../node_modules/@expo/vector-icons/index.js", + "license": "MIT" +} diff --git a/package.json b/package.json index 01d100f37b..21dbd08e56 100644 --- a/package.json +++ b/package.json @@ -3,44 +3,43 @@ "version": "0.0.1", "description": "", "main": "src/index.js", - "scripts": { - "flow": "flow", - "lint": "eslint .", - "test": "echo \"Error: no test specified\" && exit 1" - }, "files": [ "src/" ], "repository": { "type": "git", - "url": "git+https://github.com/ahmedlhanafy/react-native-paper.git" + "url": "git+https://github.com/callstackio/react-native-paper.git" }, "author": "", "license": "MIT", "bugs": { - "url": "https://github.com/ahmedlhanafy/react-native-paper/issues" + "url": "https://github.com/callstackio/react-native-paper/issues" }, - "homepage": "https://github.com/ahmedlhanafy/react-native-paper#readme", + "homepage": "https://github.com/callstackio/react-native-paper#readme", "peerDependencies": { "react": "*", "react-native": "*", "react-native-vector-icons": "*" }, "devDependencies": { - "babel-eslint": "^7.1.0", - "eslint": "^3.9.1", - "eslint-plugin-babel": "^3.3.0", + "babel-eslint": "^7.2.3", + "eslint": "^3.19.0", + "eslint-plugin-babel": "^4.1.1", "eslint-plugin-import": "^2.2.0", - "eslint-plugin-react": "^6.6.0", - "eslint-plugin-react-native": "^2.0.0", - "flow-bin": "^0.33.0", - "react": "~15.3.2", - "react-native": "~0.37.0", - "react-native-vector-icons": "~3.0.0" + "eslint-plugin-react": "^7.0.0", + "eslint-plugin-react-native": "^2.3.2", + "flow-bin": "~0.42.0", + "react": "16.0.0-alpha.6", + "react-native": "~0.44.0", + "react-native-vector-icons": "~4.1.1" }, "dependencies": { - "color": "^0.11.4", - "highlight.js": "^9.8.0", + "polished": "^1.1.2", "react-native-drawer": "^2.3.0" + }, + "scripts": { + "flow": "flow", + "lint": "eslint .", + "test": "echo \"Error: no test specified\" && exit 1" } } diff --git a/src/components/Button.js b/src/components/Button.js index 41ce80dca9..ed48b01c32 100644 --- a/src/components/Button.js +++ b/src/components/Button.js @@ -1,6 +1,6 @@ /* @flow */ -import color from 'color'; +import { transparentize } from 'polished'; import React, { PureComponent, PropTypes, @@ -166,7 +166,9 @@ class Button extends PureComponent { if (typeof dark === 'boolean') { isDark = dark; } else { - isDark = backgroundColor === 'transparent' ? false : !color(backgroundColor).light(); + // TODO: determine if color id dark + // isDark = backgroundColor === 'transparent' ? false : isColorDark(backgroundColor); + isDark = backgroundColor === 'transparent'; } if (disabled) { @@ -187,7 +189,7 @@ class Button extends PureComponent { } } - const rippleColor = color(textColor).alpha(0.32).rgbaString(); + const rippleColor = transparentize(0.32, textColor); const buttonStyle = { backgroundColor, borderRadius: roundness }; const touchableStyle = { borderRadius: roundness }; const textStyle = { color: textColor, fontFamily }; diff --git a/src/components/Checkbox.js b/src/components/Checkbox.js index afcd4e6cdc..96230cf981 100644 --- a/src/components/Checkbox.js +++ b/src/components/Checkbox.js @@ -10,7 +10,7 @@ import { View, StyleSheet, } from 'react-native'; -import color from 'color'; +import { transparentize } from 'polished'; import Icon from './Icon'; import TouchableRipple from './TouchableRipple'; import withTheme from '../core/withTheme'; @@ -104,7 +104,7 @@ class Checkbox extends Component { rippleColor = 'rgba(0, 0, 0, .16)'; checkboxColor = 'rgba(0, 0, 0, .26)'; } else { - rippleColor = color(checkedColor).clearer(0.32).rgbaString(); + rippleColor = transparentize(0.32, checkedColor); checkboxColor = checked ? checkedColor : uncheckedColor; } diff --git a/src/components/Drawer/DrawerItem.js b/src/components/Drawer/DrawerItem.js index a8f097134a..15fbe07eaf 100644 --- a/src/components/Drawer/DrawerItem.js +++ b/src/components/Drawer/DrawerItem.js @@ -1,6 +1,6 @@ /* @flow */ -import color from 'color'; +import { transparentize } from 'polished'; import React, { PropTypes, } from 'react'; @@ -21,8 +21,8 @@ type Props = { const DrawerItem = ({ icon, label, active, onPress, theme, ...props }: Props) => { const { colors } = theme; - const labelColor = active ? colors.primary : color(colors.text).alpha(0.87).rgbaString(); - const iconColor = active ? colors.primary : color(colors.text).alpha(0.54).rgbaString(); + const labelColor = active ? colors.primary : transparentize(0.87, colors.text); + const iconColor = active ? colors.primary : transparentize(0.54, colors.text); const fontFamily = theme.fonts.medium; const labelMargin = icon ? 32 : 0; return ( diff --git a/src/components/Drawer/DrawerSection.js b/src/components/Drawer/DrawerSection.js index 4d84f7f0bd..8480a61ddd 100644 --- a/src/components/Drawer/DrawerSection.js +++ b/src/components/Drawer/DrawerSection.js @@ -1,6 +1,6 @@ /* @flow */ -import color from 'color'; +import { transparentize } from 'polished'; import React, { PropTypes } from 'react'; import { View, Text } from 'react-native'; import Divider from '../Divider'; @@ -15,7 +15,7 @@ type Props = { const DrawerSection = ({ children, label, theme, ...props }: Props) => { const { colors, fonts } = theme; - const labelColor = color(colors.text).alpha(0.54).rgbaString(); + const labelColor = transparentize(0.54, colors.text); const fontFamily = fonts.medium; return ( diff --git a/src/components/HelperText.js b/src/components/HelperText.js new file mode 100644 index 0000000000..68368f3176 --- /dev/null +++ b/src/components/HelperText.js @@ -0,0 +1,47 @@ +/* @flow */ + +import React from 'react'; +import { + StyleSheet, +} from 'react-native'; +import Text from './Typography/Text'; +import { red500, orange500, green500 } from '../styles/colors'; + +type Props = { + type?: 'error' | 'warning' | 'success'; + style?: any; +} + +/** + * Helper texts are used to show hints, warnings or error messages in form elements + */ +const HelperText = (props: Props) => { + const { type, style } = props; + return ( + + ); +}; + +HelperText.propTypes = { + style: Text.propTypes.style, +}; + +const styles = StyleSheet.create({ + text: { + fontSize: 11, + }, + error: { + color: red500, + }, + warning: { + color: orange500, + }, + success: { + color: green500, + }, +}); + +export default Text; diff --git a/src/components/Icon.js b/src/components/Icon.js index 6b8a7717da..346368215d 100644 --- a/src/components/Icon.js +++ b/src/components/Icon.js @@ -1,4 +1,4 @@ /* @flow */ -export { default as default } from 'react-native-vector-icons/MaterialIcons'; +export default () => null; diff --git a/src/components/RadioButton.js b/src/components/RadioButton.js index 9fd0d9ad61..32a5eb7669 100644 --- a/src/components/RadioButton.js +++ b/src/components/RadioButton.js @@ -10,7 +10,7 @@ import { Platform, StyleSheet, } from 'react-native'; -import color from 'color'; +import { transparentize } from 'polished'; import TouchableRipple from './TouchableRipple'; import withTheme from '../core/withTheme'; import type { Theme } from '../types/Theme'; @@ -96,7 +96,7 @@ class RadioButton extends Component { rippleColor = 'rgba(0, 0, 0, .16)'; radioColor = 'rgba(0, 0, 0, .26)'; } else { - rippleColor = color(checkedColor).clearer(0.32).rgbaString(); + rippleColor = transparentize(0.32, checkedColor); radioColor = checked ? checkedColor : uncheckedColor; } diff --git a/src/components/SearchBar.js b/src/components/SearchBar.js index c56cd06754..2e7fcaa49c 100644 --- a/src/components/SearchBar.js +++ b/src/components/SearchBar.js @@ -8,7 +8,7 @@ import { StyleSheet, TextInput, } from 'react-native'; -import color from 'color'; +import { transparentize } from 'polished'; import withTheme from '../core/withTheme'; import Icon from './Icon'; @@ -108,7 +108,7 @@ const styles = StyleSheet.create({ padding: 16, }, icon: { - color: color('black').alpha(0.54).rgbaString(), + color: transparentize(0.54, 'black'), }, }); diff --git a/src/components/TouchableRipple/TouchableRipple.js b/src/components/TouchableRipple/TouchableRipple.js index 5c551e0f9c..328d16cffa 100644 --- a/src/components/TouchableRipple/TouchableRipple.js +++ b/src/components/TouchableRipple/TouchableRipple.js @@ -8,7 +8,7 @@ import { TouchableHighlight, View, } from 'react-native'; -import color from 'color'; +import { transparentize } from 'polished'; type Props = { borderless: boolean; @@ -58,7 +58,7 @@ export default class TouchableRipple extends PureComponent { render() { const { theme, alpha, family, style, ...rest } = this.props; - const textColor = color(theme.colors.text).alpha(alpha).rgbaString(); + const textColor = transparentize(alpha, theme.colors.text); const fontFamily = theme.fonts[family]; return ( diff --git a/src/styles/DefaultTheme.js b/src/styles/DefaultTheme.js index d977cf75ce..37827da897 100644 --- a/src/styles/DefaultTheme.js +++ b/src/styles/DefaultTheme.js @@ -1,6 +1,6 @@ /* @flow */ -import color from 'color'; +import { transparentize } from 'polished'; import { indigo500, indigo700, @@ -16,9 +16,9 @@ export default { primaryDark: indigo700, accent: pinkA200, text: black, - secondaryText: color(black).alpha(0.7).rgbaString(), - disabled: color(black).alpha(0.5).rgbaString(), - placeholder: color(black).alpha(0.38).rgbaString(), + secondaryText: transparentize(0.7, black), + disabled: transparentize(0.5, black), + placeholder: transparentize(0.38, black), }, fonts, };