From 1207fe1b322a51878897f03e6075dbbd46309615 Mon Sep 17 00:00:00 2001 From: Marvin Frachet Date: Wed, 18 Oct 2017 07:57:44 +0200 Subject: [PATCH] refacto(prettier): Prettier format on root project & Example (#28) * Prettier shot * Remove ExampleExpo from packagejson --- Example/.eslintrc.json | 13 +++ Example/components/Card.js | 40 ++++----- Example/components/CustomPlaceholder.js | 1 - Example/components/data.js | 115 ++++++++++++++---------- Example/package.json | 7 ++ package.json | 22 ++--- src/animation/shine.js | 26 +++--- src/multiWords/multiWords.js | 27 +++--- 8 files changed, 138 insertions(+), 113 deletions(-) create mode 100644 Example/.eslintrc.json diff --git a/Example/.eslintrc.json b/Example/.eslintrc.json new file mode 100644 index 0000000..cd33d88 --- /dev/null +++ b/Example/.eslintrc.json @@ -0,0 +1,13 @@ +{ + "extends": "airbnb", + "plugins": ["react", "jsx-a11y", "import"], + "rules": { + "react/jsx-filename-extension": "off", + "jsx-a11y/img-has-alt": "off", + "jsx-a11y/href-no-hash": "off", + "import/no-extraneous-dependencies": "off" + }, + "env": { + "jest": true + } +} diff --git a/Example/components/Card.js b/Example/components/Card.js index ebcec4a..c300678 100644 --- a/Example/components/Card.js +++ b/Example/components/Card.js @@ -1,60 +1,60 @@ -import React, { PropTypes } from "react"; -import Placeholder from "rn-placeholder"; -import { View, Text, Image, StyleSheet } from "react-native"; +import React, { PropTypes } from 'react'; +import Placeholder from 'rn-placeholder'; +import { View, Text, Image, StyleSheet } from 'react-native'; const DEFAULT_SIZE = 12; const IMAGE_SIZE = 40; const styles = StyleSheet.create({ card: { padding: 20, - backgroundColor: "#ffffff", + backgroundColor: '#ffffff', borderRadius: 2, - shadowColor: "#000000", + shadowColor: '#000000', shadowOpacity: 0.3, shadowRadius: 1, shadowOffset: { height: 1, - width: 0.3 + width: 0.3, }, marginBottom: DEFAULT_SIZE, marginRight: DEFAULT_SIZE, - marginLeft: DEFAULT_SIZE + marginLeft: DEFAULT_SIZE, }, media: { height: IMAGE_SIZE, width: IMAGE_SIZE, - marginRight: DEFAULT_SIZE + marginRight: DEFAULT_SIZE, }, container: { flex: 1, - flexDirection: "row" + flexDirection: 'row', }, username: { flex: 1, - color: "#3F51B5", - fontSize: 16 + color: '#3F51B5', + fontSize: 16, }, date: { - color: "#aaaaaa", - fontSize: 12 + color: '#aaaaaa', + fontSize: 12, }, content: { marginTop: DEFAULT_SIZE, lineHeight: DEFAULT_SIZE * 2, - color: "#444444" - } + color: '#444444', + }, }); const words = [ { - width: "20%" + width: '20%', }, { - width: "40%" + width: '40%', }, { - width: "40%" - } + width: '40%', + }, ]; export default function Card({ image, username, content, isLoaded, date }) { @@ -82,5 +82,5 @@ Card.propTypes = { username: PropTypes.string.isRequired, content: PropTypes.string.isRequired, date: PropTypes.string.isRequired, - isLoaded: PropTypes.bool.isRequired + isLoaded: PropTypes.bool.isRequired, }; diff --git a/Example/components/CustomPlaceholder.js b/Example/components/CustomPlaceholder.js index 2cdf53a..b55d64d 100644 --- a/Example/components/CustomPlaceholder.js +++ b/Example/components/CustomPlaceholder.js @@ -7,7 +7,6 @@ const customPlaceholder = (props) => { return I m a custom loader with props bgColor = {props.bgColor}; }; - customPlaceholder.propTypes = { bgColor: PropTypes.string, }; diff --git a/Example/components/data.js b/Example/components/data.js index 159b145..124e1e9 100644 --- a/Example/components/data.js +++ b/Example/components/data.js @@ -1,49 +1,66 @@ -export default [{ - id: 1, - image: 'https://i.stack.imgur.com/Oe5c6.jpg?s=128&g=1', - content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt', - username: 'Marvin Frachet', - date: '21, June 2017', -}, { - id: 2, - image: 'https://i.stack.imgur.com/Oe5c6.jpg?s=128&g=1', - content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt', - username: 'Marvin Frachet', - date: '21, June 2017', -}, { - id: 3, - image: 'https://i.stack.imgur.com/Oe5c6.jpg?s=128&g=1', - content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt', - username: 'Marvin Frachet', - date: '21, June 2017', -}, { - id: 4, - image: 'https://i.stack.imgur.com/Oe5c6.jpg?s=128&g=1', - content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt', - username: 'Marvin Frachet', - date: '21, June 2017', -}, { - id: 5, - image: 'https://i.stack.imgur.com/Oe5c6.jpg?s=128&g=1', - content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt', - username: 'Marvin Frachet', - date: '21, June 2017', -}, { - id: 6, - image: 'https://i.stack.imgur.com/Oe5c6.jpg?s=128&g=1', - content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt', - username: 'Marvin Frachet', - date: '21, June 2017', -}, { - id: 7, - image: 'https://i.stack.imgur.com/Oe5c6.jpg?s=128&g=1', - content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt', - username: 'Marvin Frachet', - date: '21, June 2017', -}, { - id: 8, - image: 'https://i.stack.imgur.com/Oe5c6.jpg?s=128&g=1', - content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt', - username: 'Marvin Frachet', - date: '21, June 2017', -}]; +export default [ + { + id: 1, + image: 'https://i.stack.imgur.com/Oe5c6.jpg?s=128&g=1', + content: + 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt', + username: 'Marvin Frachet', + date: '21, June 2017', + }, + { + id: 2, + image: 'https://i.stack.imgur.com/Oe5c6.jpg?s=128&g=1', + content: + 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt', + username: 'Marvin Frachet', + date: '21, June 2017', + }, + { + id: 3, + image: 'https://i.stack.imgur.com/Oe5c6.jpg?s=128&g=1', + content: + 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt', + username: 'Marvin Frachet', + date: '21, June 2017', + }, + { + id: 4, + image: 'https://i.stack.imgur.com/Oe5c6.jpg?s=128&g=1', + content: + 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt', + username: 'Marvin Frachet', + date: '21, June 2017', + }, + { + id: 5, + image: 'https://i.stack.imgur.com/Oe5c6.jpg?s=128&g=1', + content: + 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt', + username: 'Marvin Frachet', + date: '21, June 2017', + }, + { + id: 6, + image: 'https://i.stack.imgur.com/Oe5c6.jpg?s=128&g=1', + content: + 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt', + username: 'Marvin Frachet', + date: '21, June 2017', + }, + { + id: 7, + image: 'https://i.stack.imgur.com/Oe5c6.jpg?s=128&g=1', + content: + 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt', + username: 'Marvin Frachet', + date: '21, June 2017', + }, + { + id: 8, + image: 'https://i.stack.imgur.com/Oe5c6.jpg?s=128&g=1', + content: + 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt', + username: 'Marvin Frachet', + date: '21, June 2017', + }, +]; diff --git a/Example/package.json b/Example/package.json index 1bba5b7..024f000 100644 --- a/Example/package.json +++ b/Example/package.json @@ -23,5 +23,12 @@ "react": "16.0.0-alpha.12", "react-native": "^0.48.4", "rn-placeholder": "file:../rn-placeholder" + }, + "devDependencies": { + "eslint": "^4.1.1", + "eslint-config-airbnb": "^15.0.2", + "eslint-plugin-import": "^2.2.0", + "eslint-plugin-jsx-a11y": "^6.0.2", + "eslint-plugin-react": "^7.1.0" } } diff --git a/package.json b/package.json index 4877f01..c8f5f1c 100644 --- a/package.json +++ b/package.json @@ -8,16 +8,13 @@ "type": "git", "url": "https://github.com/mfrachet/rn-placeholder" }, - "description": "Display some placeholder stuff before rendering your text or media content in React Native", - "keywords": [ - "react-native", - "ios", - "android", - "expo" - ], + "description": + "Display some placeholder stuff before rendering your text or media content in React Native", + "keywords": ["react-native", "ios", "android", "expo"], "author": "Marvin FRACHET (https://github.com/mfrachet)", "scripts": { - "format": "prettier-eslint --write \"src/**/*.js\"", + "format": + "prettier-eslint --write \"src/**/*.js\" && prettier-eslint --write \"Example/components/**/*.js\"", "lint": "eslint ./src", "test": "./node_modules/.bin/jest --coverage --no-cache", "test:auto": "./node_modules/.bin/jest --watch" @@ -46,12 +43,7 @@ }, "jest": { "preset": "react-native", - "setupFiles": [ - "./setup/test.setup.js" - ], - "modulePathIgnorePatterns": [ - "/Example/", - "/ExampleExpo/" - ] + "setupFiles": ["./setup/test.setup.js"], + "modulePathIgnorePatterns": ["/Example/"] } } diff --git a/src/animation/shine.js b/src/animation/shine.js index 2e0b6ab..4b17d79 100644 --- a/src/animation/shine.js +++ b/src/animation/shine.js @@ -1,15 +1,15 @@ -import React from "react"; -import { Animated, View, StyleSheet } from "react-native"; -import PropTypes from "prop-types"; +import React from 'react'; +import { Animated, View, StyleSheet } from 'react-native'; +import PropTypes from 'prop-types'; const styles = StyleSheet.create({ shine: { width: 30, - position: "absolute", - height: "100%", - backgroundColor: "#ffffff", - opacity: 0.4 - } + position: 'absolute', + height: '100%', + backgroundColor: '#ffffff', + opacity: 0.4, + }, }); /** * Create a repetitive Shine animation @@ -22,8 +22,8 @@ const Shine = ({ children }) => { Animated.sequence([ Animated.timing(animation, { toValue: 100, - duration: 750 - }) + duration: 750, + }), ]).start(() => { start(); }); @@ -33,7 +33,7 @@ const Shine = ({ children }) => { const marginLeft = animation.interpolate({ inputRange: [0, 100], - outputRange: ["0%", "100%"] + outputRange: ['0%', '100%'], }); return ( @@ -45,11 +45,11 @@ const Shine = ({ children }) => { }; Shine.propTypes = { - children: PropTypes.shape({}) + children: PropTypes.shape({}), }; Shine.defaultProps = { - children: null + children: null, }; export default Shine; diff --git a/src/multiWords/multiWords.js b/src/multiWords/multiWords.js index afe75a6..d7c44b7 100644 --- a/src/multiWords/multiWords.js +++ b/src/multiWords/multiWords.js @@ -1,18 +1,18 @@ -import React from "react"; -import { View, StyleSheet } from "react-native"; -import PropTypes from "prop-types"; -import Line from "./../line/line"; +import React from 'react'; +import { View, StyleSheet } from 'react-native'; +import PropTypes from 'prop-types'; +import Line from './../line/line'; const styles = StyleSheet.create({ container: { - flexDirection: "row" - } + flexDirection: 'row', + }, }); function MultiWords({ words, textSize }) { const borderStyle = { borderRightWidth: textSize, - borderRightColor: "transparent" + borderRightColor: 'transparent', }; const lastIndex = words.length - 1; @@ -20,10 +20,7 @@ function MultiWords({ words, textSize }) { return ( {words.map((word, index) => ( - + ))} @@ -35,15 +32,15 @@ MultiWords.propTypes = { words: PropTypes.arrayOf( PropTypes.shape({ color: PropTypes.string, - width: PropTypes.string.isRequired - }) + width: PropTypes.string.isRequired, + }), ), - textSize: PropTypes.number + textSize: PropTypes.number, }; MultiWords.defaultProps = { words: [], - textSize: 12 + textSize: 12, }; export default MultiWords;