fix: add prettier to example (#120)

armand1m · Jul 4, 2021 · 355538f · 355538f
1 parent 7b907e8
commit 355538f
Show file tree

Hide file tree

Showing 12 changed files with 97 additions and 111 deletions.
diff --git a/example/.prettierrc b/example/.prettierrc
@@ -0,0 +1,6 @@
+{
+  "jsxBracketSameLine": true,
+  "printWidth": 70,
+  "singleQuote": true,
+  "trailingComma": "es5"
+}
diff --git a/example/package.json b/example/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "example-ts",
+  "name": "react-with-firebase-auth-example-ts",
   "version": "0.1.0",
   "private": true,
   "dependencies": {
@@ -22,7 +22,9 @@
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "eject": "react-scripts eject",
+    "lint": "prettier --check './src/**/*.{tsx,ts}'",
+    "lint:fix": "prettier --write './src/**/*.{tsx,ts}'"
   },
   "eslintConfig": {
     "extends": [
@@ -43,6 +45,7 @@
     ]
   },
   "devDependencies": {
-    "@types/firebase": "^3.2.1"
+    "@types/firebase": "^3.2.1",
+    "prettier": "^2.3.2"
   }
 }
diff --git a/example/public/index.html b/example/public/index.html
@@ -7,7 +7,7 @@
     <meta name="theme-color" content="#000000" />
     <meta
       name="description"
-      content="Web site created using create-react-app"
+      content="Example on how to use the library react-with-firebase-auth in a CRA app"
     />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
     <!--
@@ -24,7 +24,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <title>react-with-firebase-auth</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/example/public/manifest.json b/example/public/manifest.json
@@ -1,6 +1,6 @@
 {
-  "short_name": "React App",
-  "name": "Create React App Sample",
+  "short_name": "react-with-firebase-auth",
+  "name": "react-with-firebase-auth",
   "icons": [
     {
       "src": "favicon.ico",

diff --git a/example/src/App.css b/example/src/App.css
diff --git a/example/src/App.tsx b/example/src/App.tsx
@@ -1,31 +1,33 @@
-import React from 'react'
+import React from 'react';
 import firebase from 'firebase';
-import withFirebaseAuth, {WrappedComponentProps} from 'react-with-firebase-auth'
+import withFirebaseAuth, {
+  WrappedComponentProps,
+} from 'react-with-firebase-auth';
 import firebaseConfig from './firebaseConfig';
 import UserForm from './UserForm';
 
-const firebaseApp = firebase.initializeApp(firebaseConfig); 
+const firebaseApp = firebase.initializeApp(firebaseConfig);
 
-const FormWrapper: React.FC = ({ children }) =>
+const FormWrapper: React.FC = ({ children }) => (
   <>
-    <div style={{ marginLeft: "1.34em" }}>
-      {children}
-    </div>
+    <div style={{ marginLeft: '1.34em' }}>{children}</div>
     <hr />
-  </>;
+  </>
+);
 
 const Loading = () => (
-  <div style={{
-    position: "fixed",
-    display: "flex",
-    top: 0,
-    alignItems: "center",
-    justifyContent: "center",
-    width: "100%",
-    height: "2.68em",
-    background: "green",
-    color: "white",
-  }}>
+  <div
+    style={{
+      position: 'fixed',
+      display: 'flex',
+      top: 0,
+      alignItems: 'center',
+      justifyContent: 'center',
+      width: '100%',
+      height: '2.68em',
+      background: 'green',
+      color: 'white',
+    }}>
     Loading..
   </div>
 );
@@ -90,7 +92,10 @@ const App: React.FC<WrappedComponentProps> = ({
 
     <FormWrapper>
       <h1>user data</h1>
-      <textarea style={{ width: 350, height: 200 }} value={JSON.stringify(user, null, 2)} />
+      <textarea
+        style={{ width: 350, height: 200 }}
+        value={JSON.stringify(user, null, 2)}
+      />
     </FormWrapper>
 
     <FormWrapper>

diff --git a/example/src/UserForm.tsx b/example/src/UserForm.tsx
@@ -1,50 +1,67 @@
-import React, { ButtonHTMLAttributes, DetailedHTMLProps, InputHTMLAttributes, useState } from 'react';
+import React, {
+  ButtonHTMLAttributes,
+  DetailedHTMLProps,
+  InputHTMLAttributes,
+  useState,
+} from 'react';
 
-const Field: React.FC = ({ children }) =>
+const Field: React.FC = ({ children }) => (
   <>
     {children}
     <br />
-  </>;
+  </>
+);
 
-type HTMLInputProps = DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;
+type HTMLInputProps = DetailedHTMLProps<
+  InputHTMLAttributes<HTMLInputElement>,
+  HTMLInputElement
+>;
 
 type InputProps = Omit<HTMLInputProps, 'onChange'> & {
   onChange: (value: string) => void;
-} 
+};
 
-const Input = ({ value, onChange, ...props }: InputProps) =>
+const Input = ({ value, onChange, ...props }: InputProps) => (
   <input
     {...props}
     value={value}
-    onChange={event => onChange(event.target.value)}
-  />;
+    onChange={(event) => onChange(event.target.value)}
+  />
+);
 
-type ButtonProps = DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>
+type ButtonProps = DetailedHTMLProps<
+  ButtonHTMLAttributes<HTMLButtonElement>,
+  HTMLButtonElement
+>;
 
-const SubmitButton = (props: ButtonProps) =>
-  <button {...props}>submit</button>;
+const SubmitButton = (props: ButtonProps) => (
+  <button {...props}>submit</button>
+);
 
 type UserFormProps = {
   onSubmit: (email: string, password: string) => void;
-}
+};
 
-const UserForm = ({
-  onSubmit,
-}: UserFormProps) => {
-  const [email, setEmail] = useState("");
-  const [password, setPassword] = useState("");
+const UserForm = ({ onSubmit }: UserFormProps) => {
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
 
   return (
     <React.Fragment>
       <Field>
         email: <Input value={email} onChange={setEmail} />
       </Field>
       <Field>
-        password: <Input value={password} onChange={setPassword} type="password" />
+        password:{' '}
+        <Input
+          value={password}
+          onChange={setPassword}
+          type="password"
+        />
       </Field>
       <SubmitButton onClick={() => onSubmit(email, password)} />
     </React.Fragment>
   );
-}
+};
 
 export default UserForm;
diff --git a/example/src/firebaseConfig.ts b/example/src/firebaseConfig.ts
@@ -1,10 +1,10 @@
 const firebaseConfig = {
-  apiKey: "AIzaSyC0hOjv4hqAvG-g7UxItugLuaj-6E2FOjI",
-  authDomain: "react-firebase-auth-9d938.firebaseapp.com",
-  databaseURL: "https://react-firebase-auth-9d938.firebaseio.com",
-  projectId: "react-firebase-auth-9d938",
-  storageBucket: "react-firebase-auth-9d938.appspot.com",
-  messagingSenderId: "975967064412"
+  apiKey: 'AIzaSyC0hOjv4hqAvG-g7UxItugLuaj-6E2FOjI',
+  authDomain: 'react-firebase-auth-9d938.firebaseapp.com',
+  databaseURL: 'https://react-firebase-auth-9d938.firebaseio.com',
+  projectId: 'react-firebase-auth-9d938',
+  storageBucket: 'react-firebase-auth-9d938.appspot.com',
+  messagingSenderId: '975967064412',
 };
 
 export default firebaseConfig;
diff --git a/example/src/index.css b/example/src/index.css
diff --git a/example/src/index.tsx b/example/src/index.tsx
@@ -1,6 +1,5 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import './index.css';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
 

diff --git a/example/src/reportWebVitals.ts b/example/src/reportWebVitals.ts
@@ -2,13 +2,15 @@ import { ReportHandler } from 'web-vitals';
 
 const reportWebVitals = (onPerfEntry?: ReportHandler) => {
   if (onPerfEntry && onPerfEntry instanceof Function) {
-    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
-      getCLS(onPerfEntry);
-      getFID(onPerfEntry);
-      getFCP(onPerfEntry);
-      getLCP(onPerfEntry);
-      getTTFB(onPerfEntry);
-    });
+    import('web-vitals').then(
+      ({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
+        getCLS(onPerfEntry);
+        getFID(onPerfEntry);
+        getFCP(onPerfEntry);
+        getLCP(onPerfEntry);
+        getTTFB(onPerfEntry);
+      }
+    );
   }
 };
 

diff --git a/example/yarn.lock b/example/yarn.lock
@@ -9113,6 +9113,11 @@ prepend-http@^1.0.0:
   resolved "https://registry.yarnpkg.com/prepend-http/-/prepend-http-1.0.4.tgz#d4f4562b0ce3696e41ac52d0e002e57a635dc6dc"
   integrity sha1-1PRWKwzjaW5BrFLQ4ALlemNdxtw=
 
+prettier@^2.3.2:
+  version "2.3.2"
+  resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.3.2.tgz#ef280a05ec253712e486233db5c6f23441e7342d"
+  integrity sha512-lnJzDfJ66zkMy58OL5/NY5zp70S7Nz6KqcKkXYzn2tMVrNxvbqaBpg7H3qHaLxCJ5lNMsGuM8+ohS7cZrthdLQ==
+
 pretty-bytes@^5.3.0:
   version "5.6.0"
   resolved "https://registry.yarnpkg.com/pretty-bytes/-/pretty-bytes-5.6.0.tgz#356256f643804773c82f64723fe78c92c62beaeb"