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",
@@ -26,7 +27,6 @@
   "rules": {
     "no-console": "off",
     "react-hooks/exhaustive-deps": "off",
-    "react/jsx-max-props-per-line": [1, { "maximum": { "single": 2, "multi": 1 } }],
     "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/components/admin-top-bar/index.js

@@ -10,27 +10,39 @@ import ElementorLogo from '../../icons/elementor-logo';
 
 const AdminTopBar = () => {
 	return (
-		<AppBar position="static"
-			elevation={ 6 }
-			sx={ { boxShadow: '0px 3px 16px 0px rgba(35, 38, 42, 0.20)' } } >
-			<Toolbar direction="row"
-				sx={ { alignItems: 'center', backgroundColor: 'background.default', gap: '10px' } }
-				padding={ 2 }>
-				<Grid container={ true }
-					alignItems="center"
-					gap={ 1 }>
+		<AppBar
+			position="static"
+			elevation={6}
+			sx={{ boxShadow: '0px 3px 16px 0px rgba(35, 38, 42, 0.20)' }}
+		>
+			<Toolbar
+				direction="row"
+				sx={{
+					alignItems: 'center',
+					backgroundColor: 'background.default',
+					gap: '10px',
+				}}
+				padding={2}
+			>
+				<Grid container={true} alignItems="center" gap={1}>
 					<ElementorLogo size="large" />
 					<Typography color="text.primary">
-						{ __( 'Accessibility', 'pojo-accessibility' ) }
+						{__('Accessibility', 'pojo-accessibility')}
 					</Typography>
 				</Grid>
 
-				<Link color="secondary"
+				<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>

package.json

@@ -25,11 +25,14 @@
 		"@wordpress/eslint-plugin": "^21.3.0",
 		"@wordpress/scripts": "^30.3.0",
 		"eslint": "^8.57.1",
+		"eslint-config-prettier": "^9.1.0",
 		"eslint-plugin-babel": "^5.3.1",
 		"eslint-plugin-import": "^2.31.0",
 		"eslint-plugin-jsx-a11y": "^6.10.1",
+		"eslint-plugin-prettier": "^5.2.1",
 		"eslint-plugin-react": "^7.37.1",
-		"husky": "^9.1.6"
+		"husky": "^9.1.6",
+		"prettier": "^3.4.1"
 	},
 	"dependencies": {
 		"@elementor/icons": "^1.17.0",
@@ -42,7 +45,7 @@
 		"@wordpress/i18n": "^5.10.0",
 		"@wordpress/url": "^4.10.0",
 		"husky": "^9.1.6",
-		"react-colorful": "^5.6.1",
-		"prop-types": "^15.8.1"
+		"prop-types": "^15.8.1",
+		"react-colorful": "^5.6.1"
 	}
 }