Add Prettier and Husky (#57)

- Imp: already ranned prettier over all the files in src directory via npm run format.
- added format script for future reference
- now complete codebase is consistent with styling via prettier.
- and bad commits protected via husky.

.prettierignore

@@ -0,0 +1,3 @@
+node_modules
+/coverage
+/build

.prettierrc

@@ -0,0 +1,19 @@
+{
+  "arrowParens": "always",
+  "bracketSpacing": true,
+  "embeddedLanguageFormatting": "auto",
+  "htmlWhitespaceSensitivity": "css",
+  "insertPragma": false,
+  "jsxBracketSameLine": false,
+  "jsxSingleQuote": false,
+  "printWidth": 80,
+  "proseWrap": "preserve",
+  "quoteProps": "as-needed",
+  "requirePragma": false,
+  "semi": true,
+  "singleQuote": false,
+  "tabWidth": 2,
+  "trailingComma": "es5",
+  "useTabs": false,
+  "vueIndentScriptAndStyle": false
+}

.vscode/extensions.json

@@ -0,0 +1,5 @@
+{
+  "recommendations": [
+    "esbenp.prettier-vscode"
+  ]
+}

package.json

@@ -32,7 +32,8 @@
     "predeploy": "npm run build",
     "prepare": "node injectLatestProps.js",
     "deploy": "gh-pages -d build",
-    "postinstall": "patch-package"
+    "postinstall": "patch-package",
+    "format": "prettier --write \"./src\""
   },
   "eslintConfig": {
     "extends": "react-app"
@@ -53,8 +54,22 @@
     "@babel/plugin-proposal-class-properties": "^7.10.4",
     "customize-cra": "^1.0.0",
     "gh-pages": "^3.1.0",
+    "husky": "^4.3.8",
+    "lint-staged": "^10.5.4",
     "patch-package": "^6.2.2",
     "postinstall-postinstall": "^2.1.0",
+    "prettier": "^2.2.1",
     "react-app-rewired": "^2.1.6"
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged"
+    }
+  },
+  "lint-staged": {
+    "*.{js,jsx,css,md,json}": [
+      "prettier --write --ignore-unknown",
+      "git add"
+    ]
   }
 }

src/App.js

@@ -1,5 +1,8 @@
 import React from "react";
-import { SafeAreaInsetsContext, SafeAreaProvider } from 'react-native-safe-area-context';
+import {
+  SafeAreaInsetsContext,
+  SafeAreaProvider,
+} from "react-native-safe-area-context";
 
 import Root from "./containers";
 import "./App.css";

src/App.test.js

@@ -1,9 +1,9 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import App from './App';
+import React from "react";
+import ReactDOM from "react-dom";
+import App from "./App";
 
-it('renders without crashing', () => {
-  const div = document.createElement('div');
+it("renders without crashing", () => {
+  const div = document.createElement("div");
   ReactDOM.render(<App />, div);
   ReactDOM.unmountComponentAtNode(div);
 });

src/components/Footer/index.jsx

@@ -17,7 +17,10 @@ function Footer() {
       <Grid container spacing={5} justify="center">
         <Grid item xs={12} md={6} lg={4}>
           <Typography variant="h4" style={{ marginBottom: 10 }}>
-           Playground <span role="img" aria-label="playground">🚀</span>
+            Playground{" "}
+            <span role="img" aria-label="playground">
+              🚀
+            </span>
           </Typography>
 
           <Divider />
@@ -30,12 +33,20 @@ function Footer() {
             <Typography>GitHub Repositoy</Typography>
           </a>
 
-          <a href="https://reactnativeelements.com/" target="_blank" rel="noopener noreferrer">
+          <a
+            href="https://reactnativeelements.com/"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
             <Typography>Official Docs</Typography>
           </a>
           <br />
 
-          <a href="https://www.netlify.com" target="_blank" rel="noopener noreferrer">
+          <a
+            href="https://www.netlify.com"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
             <img
               src="https://www.netlify.com/img/global/badges/netlify-color-accent.svg"
               alt="Deploys by Netlify"

src/components/playground/index.jsx

@@ -15,7 +15,7 @@ export default ({ params }) => {
       <div
         style={{
           border: "1px dashed #ccc",
-          position:'relative'
+          position: "relative",
         }}
       >
         <Compiler

src/containers/Drawer/index.jsx

@@ -77,7 +77,7 @@ function ResponsiveDrawer(props) {
   const [selectedIndex, setSelectedIndex] = React.useState(-1);
 
   const handleDrawerToggle = (value) => {
-    if(value === false){
+    if (value === false) {
       setMobileOpen(false);
     } else {
       setMobileOpen(true);
@@ -92,7 +92,12 @@ function ResponsiveDrawer(props) {
     <div>
       <div style={{ padding: "0.5rem" }}>
         <Link to="/" onClick={() => handleDrawerToggle(false)}>
-          <Typography variant="h5">Playground <span role="img" aria-label="playground" >🚀</span></Typography>
+          <Typography variant="h5">
+            Playground{" "}
+            <span role="img" aria-label="playground">
+              🚀
+            </span>
+          </Typography>
         </Link>
       </div>
       <List>
@@ -140,7 +145,11 @@ function ResponsiveDrawer(props) {
             </Typography>
           </Link>
           <div style={{ marginLeft: "auto" }}>
-            <a href="https://reactnativeelements.com/" target="_blank" rel="noopener noreferrer">
+            <a
+              href="https://reactnativeelements.com/"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
               <Button color="inherit">Docs</Button>
             </a>
             <IconButton

src/containers/Navigation/index.jsx

@@ -186,7 +186,13 @@ export default function App() {
         })}
         <Route exact path="/explore">
           <Helmet>
-            <title>Explore | Playground <span role="img" aria-label="playground">🚀</span> - React Native Elements</title>
+            <title>
+              Explore | Playground{" "}
+              <span role="img" aria-label="playground">
+                🚀
+              </span>{" "}
+              - React Native Elements
+            </title>
           </Helmet>
           <ExplorePage />
         </Route>

src/content/BottomSheet/bottomsheet.playground.jsx

@@ -26,7 +26,7 @@ const BottomSheetPlayground = () => {
       containerStyle: {
         value: `{}`,
         type: PropTypes.Object,
-      }
+      },
     },
     scope: {
       BottomSheet,

src/content/Rating/searchbar.playground.jsx

@@ -36,7 +36,7 @@ const RatingPlayground = () => {
       },
       tintColor: {
         type: PropTypes.String,
-        value: '',
+        value: "",
       },
       ratingColor: {
         type: PropTypes.String,

src/content/Slider/slider.playground.jsx

@@ -11,7 +11,6 @@ import {
 import Playground from "../../components/playground";
 import { useView, PropTypes } from "react-view";
 
-
 const SliderPlayground = () => {
   const params = useView({
     componentName: "Slider",

src/content/Text/index.jsx

@@ -9,12 +9,12 @@ const Content = lazy(() => importMDX("../Props/text.md"));
 export default function TextPlayground() {
   return (
     <div>
-    <Playground />
-    <Suspense fallback={<div>Loading...</div>}>
-      <PropDrawer>
-        <Content />
-      </PropDrawer>
-    </Suspense>
-  </div>
+      <Playground />
+      <Suspense fallback={<div>Loading...</div>}>
+        <PropDrawer>
+          <Content />
+        </PropDrawer>
+      </Suspense>
+    </div>
   );
 }

src/content/ToolTip/tooltip.playground.jsx

@@ -36,7 +36,7 @@ const ToolTipPlayground = () => {
         type: PropTypes.Number,
       },
       highlightColor: {
-        value: 'transparent',
+        value: "transparent",
         type: PropTypes.String,
       },
       ModalComponent: {

src/content/utils/createReactViewBaseConfig.js

@@ -1,9 +1,11 @@
 export default function createReactViewBaseConfig(componentName, RNComponent) {
   if (!componentName || !RNComponent) {
-    throw new Error('createBaseComponent needs a componentName name and RNComponent');
+    throw new Error(
+      "createBaseComponent needs a componentName name and RNComponent"
+    );
   }
 
-  return ({
+  return {
     componentName,
     scope: {
       RNComponent,
@@ -13,5 +15,5 @@ export default function createReactViewBaseConfig(componentName, RNComponent) {
         named: [componentName],
       },
     },
-  });
+  };
 }

src/index.js

@@ -1,11 +1,11 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import './index.css';
-import App from './App';
-import * as serviceWorker from './serviceWorker';
-import 'react-native-safe-area-context';
+import React from "react";
+import ReactDOM from "react-dom";
+import "./index.css";
+import App from "./App";
+import * as serviceWorker from "./serviceWorker";
+import "react-native-safe-area-context";
 
-ReactDOM.render(<App />, document.getElementById('root'));
+ReactDOM.render(<App />, document.getElementById("root"));
 
 // If you want your app to work offline and load faster, you can change
 // unregister() to register() below. Note this comes with some pitfalls.

src/pages/home/index.jsx

@@ -33,7 +33,12 @@ function HomePage() {
       <div style={{ width: "100%", textAlign: "center", marginBottom: "2rem" }}>
         <Link to="/explore">
           <Button variant="outlined" color="secondary">
-            <Typography variant="h6">Explore Now <span role="img" aria-label="explore">🌇</span></Typography>
+            <Typography variant="h6">
+              Explore Now{" "}
+              <span role="img" aria-label="explore">
+                🌇
+              </span>
+            </Typography>
           </Button>
         </Link>
       </div>