Merge pull request #29 from Automattic/update/lint-hovercards

Hovercards: Format files

Author: wellyshen

web/packages/hovercards/.eslintrc.js

@@ -3,8 +3,10 @@ module.exports = {
 		ecmaVersion: 'latest',
 		sourceType: 'module',
 	},
-	extends: ['plugin:@wordpress/eslint-plugin/recommended'],
+	extends: [ 'plugin:@wordpress/eslint-plugin/recommended' ],
+	plugins: [ 'prettier' ],
 	rules: {
+		'prettier/prettier': [ 'error', require( './.prettierrc.js' ) ], // Uses our .prettierrc.js config
 		'@wordpress/i18n-no-variables': 'off',
 	},
 };

web/packages/hovercards/.markdownlint.json

@@ -13,7 +13,7 @@
 		"allow_different_nesting": true
 	},
 	"MD033": {
-		"allowed_elements": ["img"]
+		"allowed_elements": [ "img" ]
 	},
 	"MD041": false,
 	"no-hard-tabs": false,

web/packages/hovercards/.prettierrc.js

@@ -1,4 +1,4 @@
 module.exports = {
-	...require('@wordpress/prettier-config'),
+	...require( '@wordpress/prettier-config' ),
 	printWidth: 120,
 };

web/packages/hovercards/.release-it.json

@@ -8,7 +8,7 @@
 	},
 	"github": {
 		"release": true,
-		"assets": ["release/hovercards.zip"]
+		"assets": [ "release/hovercards.zip" ]
 	},
 	"npm": {
 		"publish": true

web/packages/hovercards/babel.config.js

@@ -1,3 +1,3 @@
 module.exports = {
-	presets: [['@babel/env', { loose: true }], ['@babel/react', { runtime: 'automatic' }], '@babel/typescript'],
+	presets: [ [ '@babel/env', { loose: true } ], [ '@babel/react', { runtime: 'automatic' } ], '@babel/typescript' ],
 };

web/packages/hovercards/lint-staged.config.js

@@ -1,5 +1,5 @@
 module.exports = {
-	'*.{js,jsx,ts,tsx}': [() => 'npm run type-check', 'npm run lint:js'],
+	'*.{js,jsx,ts,tsx}': [ () => 'npm run type-check', 'npm run lint:js' ],
 	'*.{css,scss}': 'npm run lint:style',
 	'*.md': 'npm run lint:md:docs',
 	'*.{js,jsx,ts,tsx,json,yaml,yml}': 'npm run format',

web/packages/hovercards/package.json

@@ -60,7 +60,7 @@
 		"type-check": "tsc --noEmit",
 		"lint:js": "wp-scripts lint-js",
 		"lint:style": "wp-scripts lint-style",
-		"lint:md:docs": "wp-scripts lint-md-docs",
+		"lint:md": "wp-scripts lint-md-docs",
 		"lint": "run-p 'lint:*'",
 		"clean:dist": "rimraf dist",
 		"clean:release": "rimraf release",

web/packages/hovercards/playground/core.ts

@@ -3,7 +3,7 @@
 import type { Options, Attach } from '../dist';
 import { Hovercards } from '../dist';
 
-addEventListener('DOMContentLoaded', () => {
+addEventListener( 'DOMContentLoaded', () => {
 	// To test types
 	const options: Options = {
 		placement: 'right',
@@ -13,23 +13,23 @@ addEventListener('DOMContentLoaded', () => {
 			'View profile': 'View profile 😜',
 		},
 	};
-	const hovercards = new Hovercards(options);
+	const hovercards = new Hovercards( options );
 
 	// To test type
-	const attach: Attach = (target, opts) => {
-		hovercards.attach(target, opts);
+	const attach: Attach = ( target, opts ) => {
+		hovercards.attach( target, opts );
 	};
-	attach(document.body, { ignoreSelector: '' });
+	attach( document.body, { ignoreSelector: '' } );
 
 	// To test sanitization
-	document.getElementById('inline-hovercard')?.appendChild(
-		Hovercards.createHovercard({
+	document.getElementById( 'inline-hovercard' )?.appendChild(
+		Hovercards.createHovercard( {
 			hash: '99c3338797c95c418d9996bd39931506',
 			avatarUrl: 'https://www.gravatar.com/avatar/99c3338797c95c418d9996bd39931506?s=60&d=retro&r=g&esc=^^',
 			profileUrl: 'https://gravatar.com/wellyshen',
 			displayName: '<i>gyp</i>',
 			location: '<i>Earth</i>',
 			description: '<i>Test</i>, &amp;, &lt;, &gt;, &quot;, &#39;, &#x60;',
-		})
+		} )
 	);
-});
+} );

web/packages/hovercards/playground/react.tsx

@@ -15,19 +15,19 @@ const props: HovercardsProps = {
 
 function App() {
 	// eslint-disable-next-line no-console
-	const { attach } = useHovercards({ onFetchProfileSuccess: (hash) => console.log(hash) });
-	const containerRef = useRef(null);
+	const { attach } = useHovercards( { onFetchProfileSuccess: ( hash ) => console.log( hash ) } );
+	const containerRef = useRef( null );
 
-	useEffect(() => {
-		if (containerRef.current) {
-			attach(containerRef.current);
+	useEffect( () => {
+		if ( containerRef.current ) {
+			attach( containerRef.current );
 		}
-	}, [attach]);
+	}, [ attach ] );
 
 	return (
-		<div style={{ display: 'flex', flexDirection: 'column', gap: '5rem' }}>
+		<div style={ { display: 'flex', flexDirection: 'column', gap: '5rem' } }>
 			<div>
-				<div ref={containerRef} style={{ display: 'flex', flexDirection: 'column', gap: '5rem' }}>
+				<div ref={ containerRef } style={ { display: 'flex', flexDirection: 'column', gap: '5rem' } }>
 					<img
 						src="https://www.gravatar.com/avatar/33252cd1f33526af53580fcb1736172f06e6716f32afdd1be19ec3096d15dea5?s=60&d=retro&r=g"
 						width="60"
@@ -42,7 +42,7 @@ function App() {
 					/>
 				</div>
 			</div>
-			<Hovercards style={{ display: 'flex', flexDirection: 'column', gap: '5rem' }} {...props}>
+			<Hovercards style={ { display: 'flex', flexDirection: 'column', gap: '5rem' } } { ...props }>
 				<img
 					src="https://www.gravatar.com/avatar/33252cd1f33526af53580fcb1736172f06e6716f32afdd1be19ec3096d15dea5?s=60&d=retro&r=g"
 					width="60"
@@ -66,5 +66,5 @@ function App() {
 	);
 }
 
-const root = createRoot(document.getElementById('react-app')!);
-root.render(<App />);
+const root = createRoot( document.getElementById( 'react-app' )! );
+root.render( <App /> );

web/packages/hovercards/postcss.config.js

@@ -1,5 +1,5 @@
 module.exports = {
 	// Add you postcss configuration here
 	// Learn more about it at https://github.com/webpack-contrib/postcss-loader#config-files
-	plugins: [['autoprefixer']],
+	plugins: [ [ 'autoprefixer' ] ],
 };