chore(app): add prettier

app/.prettierrc.json

@@ -0,0 +1,6 @@
+{
+	"tabWidth": 2,
+	"singleQuote": true,
+	"trailingComma": "all",
+	"useTabs": false
+}

app/package-lock.json

@@ -22,7 +22,8 @@
 			},
 			"devDependencies": {
 				"@types/react-router-dom": "^5.1.8",
-				"@types/styled-components": "^5.1.11"
+				"@types/styled-components": "^5.1.11",
+				"prettier": "2.7.1"
 			}
 		},
 		"node_modules/@authorizerdev/authorizer-js": {
@@ -617,6 +618,21 @@
 			"resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
 			"integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ=="
 		},
+		"node_modules/prettier": {
+			"version": "2.7.1",
+			"resolved": "https://registry.npmjs.org/prettier/-/prettier-2.7.1.tgz",
+			"integrity": "sha512-ujppO+MkdPqoVINuDFDRLClm7D78qbDt0/NR+wp5FqEZOoTNAjPHWj17QRhu7geIHJfcNhRk1XVQmF8Bp3ye+g==",
+			"dev": true,
+			"bin": {
+				"prettier": "bin-prettier.js"
+			},
+			"engines": {
+				"node": ">=10.13.0"
+			},
+			"funding": {
+				"url": "https://github.com/prettier/prettier?sponsor=1"
+			}
+		},
 		"node_modules/prop-types": {
 			"version": "15.7.2",
 			"resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.7.2.tgz",
@@ -1329,6 +1345,12 @@
 			"resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
 			"integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ=="
 		},
+		"prettier": {
+			"version": "2.7.1",
+			"resolved": "https://registry.npmjs.org/prettier/-/prettier-2.7.1.tgz",
+			"integrity": "sha512-ujppO+MkdPqoVINuDFDRLClm7D78qbDt0/NR+wp5FqEZOoTNAjPHWj17QRhu7geIHJfcNhRk1XVQmF8Bp3ye+g==",
+			"dev": true
+		},
 		"prop-types": {
 			"version": "15.7.2",
 			"resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.7.2.tgz",

app/package.json

@@ -5,7 +5,8 @@
 	"main": "index.js",
 	"scripts": {
 		"build": "rm -rf build && NODE_ENV=production node ./esbuild.config.js",
-		"start": "NODE_ENV=development node ./esbuild.config.js"
+		"start": "NODE_ENV=development node ./esbuild.config.js",
+		"format": "prettier --write --use-tabs 'src/**/*.(ts|tsx|js|jsx)'"
 	},
 	"keywords": [],
 	"author": "Lakhan Samani",
@@ -19,11 +20,12 @@
 		"react-dom": "^17.0.2",
 		"react-is": "^17.0.2",
 		"react-router-dom": "^5.2.0",
-		"typescript": "^4.3.5",
+		"styled-components": "^5.3.0",
-		"styled-components": "^5.3.0"
+		"typescript": "^4.3.5"
 	},
 	"devDependencies": {
 		"@types/react-router-dom": "^5.1.8",
-		"@types/styled-components": "^5.1.11"
+		"@types/styled-components": "^5.1.11",
+		"prettier": "2.7.1"
 	}
 }

app/src/App.tsx

@@ -5,9 +5,9 @@ import Root from './Root';
 import { createRandomString } from './utils/common';
 
 declare global {
-  interface Window {
+	interface Window {
-    __authorizer__: any;
+		__authorizer__: any;
-  }
+	}
 }
 
 export default function App() {

app/src/Root.tsx

@@ -32,7 +32,7 @@ export default function Root({
 	const { token, loading, config } = useAuthorizer();
 
 	const searchParams = new URLSearchParams(
-		hasWindow() ? window.location.search : ``
+		hasWindow() ? window.location.search : ``,
 	);
 	const state = searchParams.get('state') || createRandomString();
 	const scope = searchParams.get('scope')

app/src/theme.ts

@@ -1,28 +1,28 @@
 // colors: https://tailwindcss.com/docs/customizing-colors
 
 export const theme = {
-  colors: {
+	colors: {
-    primary: '#3B82F6',
+		primary: '#3B82F6',
-    primaryDisabled: '#60A5FA',
+		primaryDisabled: '#60A5FA',
-    gray: '#D1D5DB',
+		gray: '#D1D5DB',
-    danger: '#DC2626',
+		danger: '#DC2626',
-    success: '#10B981',
+		success: '#10B981',
-    textColor: '#374151',
+		textColor: '#374151',
-  },
+	},
-  fonts: {
+	fonts: {
-    // typography
+		// typography
-    fontStack: '-apple-system, system-ui, sans-serif',
+		fontStack: '-apple-system, system-ui, sans-serif',
 
-    // font sizes
+		// font sizes
-    largeText: '18px',
+		largeText: '18px',
-    mediumText: '14px',
+		mediumText: '14px',
-    smallText: '12px',
+		smallText: '12px',
-    tinyText: '10px',
+		tinyText: '10px',
-  },
+	},
 
-  radius: {
+	radius: {
-    card: '5px',
+		card: '5px',
-    button: '5px',
+		button: '5px',
-    input: '5px',
+		input: '5px',
-  },
+	},
 };

app/src/utils/common.ts

@@ -8,7 +8,7 @@ export const createRandomString = () => {
 		'0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz-_~.';
 	let random = '';
 	const randomValues = Array.from(
-		getCrypto().getRandomValues(new Uint8Array(43))
+		getCrypto().getRandomValues(new Uint8Array(43)),
 	);
 	randomValues.forEach((v) => (random += charset[v % charset.length]));
 	return random;