Use prettier instead xo

.vscode/settings.json

@@ -1,22 +1,20 @@
 {
   "editor.formatOnSave": true,
-  "xo.enable": true,
-  "xo.format.enable": true,
 
   "typescript.tsdk": "node_modules/typescript/lib",
   "typescript.preferences.importModuleSpecifier": "non-relative",
 
   // formatting
   "[typescript]": {
-    "editor.defaultFormatter": "samverschueren.linter-xo"
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
   },
   "[typescriptreact]": {
-    "editor.defaultFormatter": "samverschueren.linter-xo"
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
   },
   "[javascript]": {
-    "editor.defaultFormatter": "samverschueren.linter-xo"
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
   },
   "[javascriptreact]": {
-    "editor.defaultFormatter": "samverschueren.linter-xo"
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
   }
 }

packages/donate-button-v4/.babelrc

@@ -1,50 +1,46 @@
 {
-  "presets": [
-    [
-      "@babel/preset-env",
-      {
-        "loose": true,
-        "modules": false,
-        "targets": {
-          "browsers": [
-            "> 100%",
-            "last 200 versions",
-            "IE >= 19"
-          ]
-        },
-        "exclude": [
-          "@babel/plugin-transform-regenerator",
-          "@babel/plugin-transform-typeof-symbol"
-        ]
-      }
-    ],
-    "@babel/preset-typescript"
-  ],
-  "plugins": [
-    "@babel/plugin-syntax-dynamic-import",
-    "@babel/plugin-transform-object-assign",
-    [
-      "@babel/plugin-proposal-decorators",
-      {
-        "legacy": true
-      }
-    ],
-    "@babel/plugin-proposal-class-properties",
-    "@babel/plugin-transform-react-constant-elements",
-    "babel-plugin-transform-react-remove-prop-types",
-    [
-      "@babel/plugin-transform-react-jsx",
-      {
-        "pragma": "h"
-      }
-    ],
-    [
-      "babel-plugin-jsx-pragmatic",
-      {
-        "module": "preact",
-        "export": "h",
-        "import": "h"
-      }
-    ]
-  ]
-}
+	"presets": [
+		[
+			"@babel/preset-env",
+			{
+				"loose": true,
+				"modules": false,
+				"targets": {
+					"browsers": ["> 100%", "last 200 versions", "IE >= 19"]
+				},
+				"exclude": [
+					"@babel/plugin-transform-regenerator",
+					"@babel/plugin-transform-typeof-symbol"
+				]
+			}
+		],
+		"@babel/preset-typescript"
+	],
+	"plugins": [
+		"@babel/plugin-syntax-dynamic-import",
+		"@babel/plugin-transform-object-assign",
+		[
+			"@babel/plugin-proposal-decorators",
+			{
+				"legacy": true
+			}
+		],
+		"@babel/plugin-proposal-class-properties",
+		"@babel/plugin-transform-react-constant-elements",
+		"babel-plugin-transform-react-remove-prop-types",
+		[
+			"@babel/plugin-transform-react-jsx",
+			{
+				"pragma": "h"
+			}
+		],
+		[
+			"babel-plugin-jsx-pragmatic",
+			{
+				"module": "preact",
+				"export": "h",
+				"import": "h"
+			}
+		]
+	]
+}

packages/donate-button-v4/.eslintrc.cjs

@@ -0,0 +1,26 @@
+module.exports = {
+	parser: '@typescript-eslint/parser',
+	parserOptions: {
+		ecmaVersion: 2020,
+		sourceType: 'module',
+		ecmaFeatures: {jsx: true}
+	},
+	settings: {
+		react: {
+			pragma: 'h',
+			version: 'detect'
+		}
+	},
+	extends: [
+		'eslint:recommended',
+		'plugin:@typescript-eslint/recommended',
+		'plugin:react/recommended',
+		'plugin:react-hooks/recommended',
+		'prettier'
+	],
+	rules: {
+		'react/react-in-jsx-scope': 'off',
+		'react/prop-types': 'off',
+		'react/prefer-read-only-props': 'off'
+	}
+};

packages/donate-button-v4/.prettierignore

@@ -0,0 +1,3 @@
+dist/
+node_modules/
+.cache/

packages/donate-button-v4/.prettierrc

@@ -1,7 +1,7 @@
 {
-  "tabWidth": 2,
-  "useTabs": true,
-  "trailingComma": "none",
-  "bracketSpacing": false,
-  "singleQuote": true
-}
+	"tabWidth": 2,
+	"useTabs": true,
+	"trailingComma": "none",
+	"bracketSpacing": false,
+	"singleQuote": true
+}

packages/donate-button-v4/package.json

@@ -13,8 +13,8 @@
 		"postbuild": "cp dist/donate-button/0.4/index.js dist/donate-button/0.4/button.js",
 		"serve": "preact serve",
 		"dev": "preact watch -c ./preact.config.js --no-prerender --no-sw",
-		"lint": "xo",
-		"lint:fix": "xo --fix"
+		"lint": "eslint src --ext .ts,.tsx && prettier --check .",
+		"lint:fix": "eslint src --ext .ts,.tsx --fix && prettier --write ."
 	},
 	"keywords": [],
 	"author": "Every.org",
@@ -33,15 +33,15 @@
 		"@babel/preset-typescript": "^7.13.0",
 		"@testing-library/react": "^11.2.5",
 		"@types/big.js": "^6.2.2",
+		"@typescript-eslint/eslint-plugin": "^5",
+		"@typescript-eslint/parser": "^5",
 		"ava": "^3.15.0",
 		"babel-core": "^7.0.0-bridge.0",
 		"babel-plugin-jsx-pragmatic": "^1.0.2",
 		"babel-plugin-transform-decorators-legacy": "^1.3.5",
 		"babel-plugin-transform-react-remove-prop-types": "^0.4.24",
-		"deepmerge": "^4.2.2",
 		"eslint": "^7.14.0",
-		"eslint-config-xo": "^0.34.0",
-		"eslint-config-xo-react": "^0.23.0",
+		"eslint-config-prettier": "^8",
 		"eslint-plugin-react": "^7.22.0",
 		"eslint-plugin-react-hooks": "^4.2.0",
 		"identity-obj-proxy": "^3.0.0",
@@ -54,8 +54,7 @@
 		"ts-node": "^9.1.1",
 		"tsconfig-paths": "^3.9.0",
 		"tsconfig-paths-webpack-plugin": "^4.1.0",
-		"typescript": "^4.1.3",
-		"xo": "^0.37.1"
+		"typescript": "^4.1.3"
 	},
 	"dependencies": {
 		"@stripe/stripe-js": "^1.53.0",

packages/donate-button-v4/src/components/widget/components/Checkbox/index.tsx

@@ -10,12 +10,12 @@
 import {useConfigContext} from 'src/components/widget/hooks/useConfigContext';
 import {CheckMarkIcon} from 'src/components/widget/icons/CheckMarkIcon';
 
-interface CheckboxProps extends JSXInternal.HTMLAttributes<HTMLInputElement> {}
+type CheckboxProps = JSXInternal.HTMLAttributes<HTMLInputElement>;
 
 export const Checkbox: FunctionComponent<CheckboxProps> = ({
 	children,
 	checked,
 	className,
 	...rest
 }) => {
 	const {primaryColor} = useConfigContext();

packages/donate-button-v4/src/components/widget/components/Footer/index.tsx

@@ -20,8 +20,7 @@ import {
 import {mailToLink} from 'src/helpers/mailToLink';
 
 const FEEDBACK_URL = mailToLink({address: SUPPORT_EMAIL});
-interface FooterLinkProps
-	extends JSXInternal.HTMLAttributes<HTMLAnchorElement> {}
+type FooterLinkProps = JSXInternal.HTMLAttributes<HTMLAnchorElement>;
 const FooterLink: FunctionComponent<FooterLinkProps> = ({
 	children,
 	...rest

packages/donate-button-v4/src/helpers/constructDonateUrl.ts

@@ -1,4 +1,3 @@
-/* eslint-disable unicorn/prevent-abbreviations */
 import {DonationFrequency} from 'src/components/widget/types/DonationFrequency';
 import {
 	AvailablePaymentMethods,

packages/donate-button-v4/src/helpers/css.ts

@@ -4,7 +4,6 @@
  */
 
 /* eslint-disable @typescript-eslint/restrict-plus-operands */
-/* eslint-disable unicorn/prefer-dom-node-append */
 /* eslint-disable @typescript-eslint/consistent-indexed-object-style */
 import * as CSS from 'csstype';
 import resetcss from 'src/resetCss';

packages/donate-button-v4/src/helpers/mailToLink.ts

@@ -11,13 +11,11 @@ function addParameters(
 	const queryString = Object.entries(parameters)
 		.map(([key, value]) => {
 			try {
-				// eslint-disable-next-line unicorn/no-array-callback-reference
 				return [key, value].map(encodeURIComponent).join('=');
 			} catch {
 				return null;
 			}
 		})
-		// eslint-disable-next-line unicorn/no-array-callback-reference
 		.filter(isPresent)
 		.join('&');
 	return queryString ? [link, queryString].join('?') : link;

packages/donate-button-v4/src/helpers/parseDonateUrl.ts

@@ -38,14 +38,11 @@ function frequencyFromString(string?: string | null) {
 
 function addAmountsFromString(string?: string | null) {
 	if (!string) return;
-	return (
-		string
-			.split(',')
-			// eslint-disable-next-line unicorn/no-array-callback-reference
-			.map(Number.parseFloat)
-			.filter(Boolean)
-			.slice(0, MAX_AMOUNT_SUGGESTIONS)
-	);
+	return string
+		.split(',')
+		.map(Number.parseFloat)
+		.filter(Boolean)
+		.slice(0, MAX_AMOUNT_SUGGESTIONS);
 }
 
 function intFromString(string?: string | null) {

packages/donate-button-v4/src/public/index.html

@@ -57,6 +57,7 @@
 				href="https://www.every.org/wphfund?frequency=once#/donate"
 				>Donate Once</a
 			>
+		</div>
 		<div>
 			<a
 				style="font-size: 30px; margin-top: 10px"