Fix error on install plugin, add prettier

.eslintrc

@@ -3,7 +3,8 @@
     "plugin:react/recommended",
     "plugin:@wordpress/eslint-plugin/recommended-with-formatting",
     "plugin:import/recommended",
-    "plugin:jsx-a11y/strict"
+    "plugin:jsx-a11y/strict",
+    "plugin:prettier/recommended"
   ],
   "plugins": [
     "babel",
@@ -36,8 +37,6 @@
   "rules": {
     "no-console": "off",
     "react-hooks/exhaustive-deps": "off",
-    "react/jsx-max-props-per-line": [1, { "maximum": { "single": 2, "multi": 1 } }],
-    "react/jsx-first-prop-new-line": ["error", "multiline"],
     "strict": [ "error", "global" ],
     "curly": "warn",
     "import/order": [

.prettierrc

@@ -0,0 +1,10 @@
+{
+  "useTabs": true,
+  "printWidth": 80,
+  "semi": true,
+  "singleQuote": true,
+  "endOfLine": "auto",
+  "arrowParens": "always",
+  "proseWrap": "always",
+  "bracketSpacing": true
+}

classes/module-base.php

@@ -190,7 +190,7 @@ public function add_route( string $id, $instance ) {
 	 * @access public
 	 * @return Module[]
 	 */
-	public function get_components() {
+	public function get_components(): array {
 		return $this->components;
 	}
 

modules/legacy/module.php

@@ -21,7 +21,7 @@ public static function component_list() : array {
 			'Frontend',
 			'Customizer',
 			'Settings',
-			'Admin'
+			'Admin',
 		];
 	}
 
@@ -30,7 +30,7 @@ public function backwards_compatibility() {
 			/**
 			 * @var Customizer $customizer
 			 */
-			$customizer = $this->get_components( 'Customizer' );
+			$customizer = $this->get_components()['Customizer'];
 			$customizer_fields = $customizer->get_customizer_fields();
 			$options = [];
 			$mods = get_theme_mods();

modules/settings/assets/js/admin.js

@@ -3,13 +3,13 @@ import { StrictMode, Fragment, createRoot } from '@wordpress/element';
 import App from './app';
 import { PluginSettingsProvider } from './contexts/plugin-settings';
 
-const rootNode = document.getElementById( 'ea11y-app' );
+const rootNode = document.getElementById('ea11y-app');
 
 // Can't use the settings hook in the global scope so accessing directly
 const isDevelopment = window?.ea11ySettingsData?.isDevelopment;
-const AppWrapper = Boolean( isDevelopment ) ? StrictMode : Fragment;
+const AppWrapper = Boolean(isDevelopment) ? StrictMode : Fragment;
 
-const root = createRoot( rootNode );
+const root = createRoot(rootNode);
 
 root.render(
 	<AppWrapper>

modules/settings/assets/js/api/exceptions/APIError.js

@@ -1,6 +1,6 @@
 class APIError extends Error {
-	constructor( message ) {
-		super( message );
+	constructor(message) {
+		super(message);
 
 		this.name = 'APIError';
 	}

modules/settings/assets/js/api/index.js

@@ -6,126 +6,126 @@ const wpV2Prefix = '/wp/v2';
 const v1Prefix = '/ea11y/v1';
 
 class API {
-	static async request( { path, data, method = 'POST' } ) {
+	static async request({ path, data, method = 'POST' }) {
 		try {
-			if ( 'GET' === method && ! path.startsWith( wpV2Prefix ) ) {
-				path = addQueryArgs( path, { sb_time: new Date().getTime() } );
+			if ('GET' === method && !path.startsWith(wpV2Prefix)) {
+				path = addQueryArgs(path, { sb_time: new Date().getTime() });
 			}
 
-			const response = await apiFetch( {
+			const response = await apiFetch({
 				path,
 				method,
 				data,
-			} );
+			});
 
-			if ( path.startsWith( wpV2Prefix ) ) {
+			if (path.startsWith(wpV2Prefix)) {
 				return response;
 			}
 
-			if ( ! response.success ) {
-				throw new APIError( response.data.message );
+			if (!response.success) {
+				throw new APIError(response.data.message);
 			}
 
 			return response.data;
-		} catch ( e ) {
-			if ( e instanceof APIError ) {
+		} catch (e) {
+			if (e instanceof APIError) {
 				throw e;
 			} else {
-				throw new APIError( e.message );
+				throw new APIError(e.message);
 			}
 		}
 	}
 
-	static async initConnect( context = 'new' ) {
+	static async initConnect(context = 'new') {
 		const data = {
 			wp_rest: window?.ea11ySettingsData?.wpRestNonce,
 		};
 
-		if ( 'update' === context ) {
+		if ('update' === context) {
 			data.update_redirect_uri = true;
 		}
 
-		return API.request( {
+		return API.request({
 			method: 'POST',
-			path: `${ v1Prefix }/connect/authorize`,
+			path: `${v1Prefix}/connect/authorize`,
 			data,
-		} );
+		});
 	}
 
 	static async clearSession() {
-		return API.request( {
+		return API.request({
 			method: 'POST',
-			path: `${ v1Prefix }/connect/deactivate_and_disconnect`,
+			path: `${v1Prefix}/connect/deactivate_and_disconnect`,
 			data: {
 				wp_rest: window?.ea11ySettingsData?.wpRestNonce,
 				clear_session: true,
 			},
-		} );
+		});
 	}
 
 	static async deactivateAndDisconnect() {
-		return API.request( {
+		return API.request({
 			method: 'POST',
-			path: `${ v1Prefix }/connect/deactivate_and_disconnect`,
+			path: `${v1Prefix}/connect/deactivate_and_disconnect`,
 			data: {
 				wp_rest: window?.ea11ySettingsData?.wpRestNonce,
 			},
-		} );
+		});
 	}
 
 	static async deactivate() {
-		return API.request( {
+		return API.request({
 			method: 'POST',
-			path: `${ v1Prefix }/connect/deactivate`,
+			path: `${v1Prefix}/connect/deactivate`,
 			data: {
 				wp_rest: window?.ea11ySettingsData?.wpRestNonce,
 			},
-		} );
+		});
 	}
 
 	static async disconnect() {
-		return API.request( {
+		return API.request({
 			method: 'POST',
-			path: `${ v1Prefix }/connect/disconnect`,
+			path: `${v1Prefix}/connect/disconnect`,
 			data: {
 				wp_rest: window?.ea11ySettingsData?.wpRestNonce,
 			},
-		} );
+		});
 	}
 
 	static async reconnect() {
-		return API.request( {
+		return API.request({
 			method: 'POST',
-			path: `${ v1Prefix }/connect/reconnect`,
+			path: `${v1Prefix}/connect/reconnect`,
 			data: {
 				wp_rest: window?.ea11ySettingsData?.wpRestNonce,
 			},
-		} );
+		});
 	}
 
 	static async getSettings() {
-		return API.request( {
+		return API.request({
 			method: 'GET',
-			path: `${ wpV2Prefix }/settings`,
-		} );
+			path: `${wpV2Prefix}/settings`,
+		});
 	}
 
-	static async updateSettings( data ) {
-		return API.request( {
+	static async updateSettings(data) {
+		return API.request({
 			method: 'PUT',
-			path: `${ wpV2Prefix }/settings`,
+			path: `${wpV2Prefix}/settings`,
 			data,
-		} );
+		});
 	}
 
 	/**
 	 * @return {Promise<any>} {}
 	 */
 	static async getPluginSettings() {
-		return API.request( {
+		return API.request({
 			method: 'GET',
-			path: `${ v1Prefix }/settings/get-settings`,
-		} );
+			path: `${v1Prefix}/settings/get-settings`,
+		});
 	}
 }
 

modules/settings/assets/js/app.js

@@ -3,30 +3,32 @@ import Box from '@elementor/ui/Box';
 import DirectionProvider from '@elementor/ui/DirectionProvider';
 import Grid from '@elementor/ui/Grid';
 import { ThemeProvider } from '@elementor/ui/styles';
-import { ConnectModal, Notifications, MenuItems, AdminTopBar, BottomBar } from '@ea11y/components';
+import {
+	ConnectModal,
+	Notifications,
+	MenuItems,
+	AdminTopBar,
+	BottomBar,
+} from '@ea11y/components';
 import { useNotificationSettings, useSettings } from '@ea11y/hooks';
 import { usePluginSettingsContext } from './contexts/plugin-settings';
 import { Sidebar } from './layouts/sidebar';
 
 const App = () => {
 	const { isConnected } = usePluginSettingsContext();
-	const {
-		notificationMessage,
-		notificationType,
-	} = useNotificationSettings();
+	const { notificationMessage, notificationType } = useNotificationSettings();
 	const { selectedMenu } = useSettings();
 
 	// Accessing the selected menu item
-	const selectedParent = MenuItems[ selectedMenu.parent ];
-	const selectedChild = selectedMenu.child ? selectedParent.children[ selectedMenu.child ] : null;
+	const selectedParent = MenuItems[selectedMenu.parent];
+	const selectedChild = selectedMenu.child
+		? selectedParent.children[selectedMenu.child]
+		: null;
 	return (
-		<DirectionProvider rtl={ false /* TODO:Add RTL detection in settings */ }>
+		<DirectionProvider rtl={false /* TODO:Add RTL detection in settings */}>
 			<ThemeProvider colorScheme="light">
-				{ ! isConnected && <ConnectModal /> }
-				<Grid
-					display="flex"
-					flexDirection="row"
-					height="100%">
+				{!isConnected && <ConnectModal />}
+				<Grid display="flex" flexDirection="row" height="100%">
 					<Sidebar />
 					<Box
 						width="100%"
@@ -35,13 +37,13 @@ const App = () => {
 						justifyContent="space-between"
 					>
 						<AdminTopBar />
-						<Box p={ 1 } height="100%">
-							{ selectedChild ? selectedChild.page : selectedParent?.page }
+						<Box p={1} height="100%">
+							{selectedChild ? selectedChild.page : selectedParent?.page}
 						</Box>
 						<BottomBar />
 					</Box>
 				</Grid>
-				<Notifications message={ notificationMessage } type={ notificationType } />
+				<Notifications message={notificationMessage} type={notificationType} />
 			</ThemeProvider>
 		</DirectionProvider>
 	);

modules/settings/assets/js/components/admin-top-bar/index.js

@@ -11,20 +11,19 @@ export const AdminTopBar = () => {
 		alignItems: 'center',
 		backgroundColor: 'background.default',
 		gap: '10px',
-		borderBottom: '1px solid rgba(0, 0, 0, 0.12)' };
+		borderBottom: '1px solid rgba(0, 0, 0, 0.12)',
+	};
 	return (
 		<AppBar position="static">
-			<Toolbar
-				direction="row"
-				sx={ toolBarStyle }
-				padding={ 2 }>
+			<Toolbar direction="row" sx={toolBarStyle} padding={2}>
 				<Link
 					color="secondary"
 					underline="hover"
-					href={ HELP_LINK }
+					href={HELP_LINK}
 					target="_blank"
-					sx={ { display: 'inline-flex', alignItems: 'center', gap: 1 } }
-					aria-label={ __( 'Help', 'pojo-accessibility' ) }>
+					sx={{ display: 'inline-flex', alignItems: 'center', gap: 1 }}
+					aria-label={__('Help', 'pojo-accessibility')}
+				>
 					<HelpIcon />
 				</Link>
 			</Toolbar>