Setup base (#110)

* Initial refactor commit

* ✅ Added build and tests CI/CD

* update: add src for admin settings

* update: incorrect constant names

* update: namespace

* add: accessibility settings

* update: webpack to output files inside a folder

* update: build output folders

* update: removed commented code

* update: npm scripts

* add: webpack config

* add: hooks

* update: move admin setting to the module folder

* update: assets loading logic

* update: settings variable

* update: removed duplicate css import

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

Co-authored-by: VasylD <[email protected]>

---------

Co-authored-by: Ohad <[email protected]>
Co-authored-by: VasylD <[email protected]>

classes/utils/assets.php

@@ -60,7 +60,7 @@ public static function enqueue_styles( string $handle, string $style_name, array
 	 * @return string
 	 */
 	private static function get_assets_version( string $version = '' ) : string {
-		return empty( $version ) ? EA11Y_VERSION : $version;
+		return empty( $version ) ? \EA11Y_VERSION : $version;
 	}
 
 	/**
@@ -95,7 +95,7 @@ private static function get_asset_version_and_suffix( string $version = '' ) : a
 	 * @return string
 	 */
 	private static function get_assets_path( string $asset_name, string $asset_type, string $suffix = '' ) : string {
-		return EA11Y_ASSETS_URL . '/build/' . $asset_name . $suffix . '.' . $asset_type;
+		return \EA11Y_ASSETS_URL . '/build/' . $asset_name . $suffix . '.' . $asset_type;
 	}
 
 	/**
@@ -105,8 +105,8 @@ private static function get_assets_path( string $asset_name, string $asset_type,
 	 * @param bool $with_css
 	 */
 	public static function enqueue_app_assets( string $handle = '', bool $with_css = true ) : void {
-		$dir = EA11Y_ASSETS_PATH . 'build/';
-		$url = EA11Y_ASSETS_URL . 'build/';
+		$dir = \EA11Y_ASSETS_PATH . 'build/';
+		$url = \EA11Y_ASSETS_URL . 'build/';
 
 		$script_asset_path = $dir . $handle . '.asset.php';
 		if ( ! file_exists( $script_asset_path ) ) {
@@ -133,7 +133,7 @@ public static function enqueue_app_assets( string $handle = '', bool $with_css =
 		}
 		// enqueue css
 		$css_file_name = 'style-' . $handle . '.css';
-		$css_version = ( defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG ) ? filemtime( $dir . $css_file_name ) : EA11Y_VERSION;
+		$css_version = ( defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG ) ? filemtime( $dir . $css_file_name ) : \EA11Y_VERSION;
 		wp_enqueue_style(
 			$handle,
 			$url . $css_file_name,

includes/manager.php

@@ -17,6 +17,7 @@ final class Manager {
 	public static function get_module_list(): array {
 		return [
 			'Legacy',
+			'Settings'
 		];
 	}
 

modules/settings/assets/css/style.css

@@ -0,0 +1,37 @@
+body {
+	background: #fff;
+}
+.wrap {
+	margin-top: 0;
+}
+
+html:not([dir='rtl']) #ea11y-app {
+    margin-left: -20px;
+    background: white;
+}
+
+html[dir='rtl'] #ea11y-app {
+	margin-right: -20px;
+    background: white;
+}
+
+html:not([dir='rtl']) #ea11y-app-top-bar {
+	margin-left: -20px;
+	margin-bottom: 20px;
+}
+
+html[dir='rtl'] #ea11y-app-top-bar {
+	margin-right: -20px;
+	margin-bottom: 20px;
+}
+
+#ea11y-app * {
+	box-sizing: border-box;
+}
+
+.ea11y-textfield .MuiInputBase-input {
+	height: 40px;
+	padding: 8px 12px;
+	box-shadow: none;
+	border-color: rgba(12, 13, 14, 0.23);
+}

modules/settings/assets/js/admin.js

@@ -0,0 +1,26 @@
+import { ThemeProvider } from '@elementor/ui/styles';
+import { StrictMode, Fragment, createRoot } from '@wordpress/element';
+import App from './app';
+import AdminTopBar from './components/admin-top-bar';
+
+const rootNode = document.getElementById( 'ea11y-app' );
+const topBarNode = document.getElementById( 'ea11y-app-top-bar' );
+
+// 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 root = createRoot( rootNode );
+const topBar = createRoot( topBarNode );
+
+topBar.render(
+	<ThemeProvider colorScheme="light">
+		<AdminTopBar />
+	</ThemeProvider>,
+);
+
+root.render(
+	<AppWrapper>
+		<App />
+	</AppWrapper>,
+);

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

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

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

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

modules/settings/assets/js/app.js

@@ -0,0 +1,14 @@
+import '../css/style.css';
+import DirectionProvider from '@elementor/ui/DirectionProvider';
+import { ThemeProvider } from '@elementor/ui/styles';
+
+const App = () => {
+	return (
+		<DirectionProvider rtl={ false /* Add RTL detection in settings */ }>
+			<ThemeProvider colorScheme="light">
+			</ThemeProvider>
+		</DirectionProvider>
+	);
+};
+
+export default App;

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

@@ -0,0 +1,35 @@
+import HelpIcon from '@elementor/icons/HelpIcon';
+import AppBar from '@elementor/ui/AppBar';
+import Grid from '@elementor/ui/Grid';
+import Link from '@elementor/ui/Link';
+import Toolbar from '@elementor/ui/Toolbar';
+import Typography from '@elementor/ui/Typography';
+import { __ } from '@wordpress/i18n';
+import { HELP_LINK } from '../../constants';
+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 }>
+					<ElementorLogo size="large" />
+					<Typography color="text.primary">
+						{ __( 'Accessibility', 'pojo-accessibility' ) }
+					</Typography>
+				</Grid>
+
+				<Link color="secondary"
+					underline="hover"
+					href={ HELP_LINK }
+					target="_blank"
+					sx={ { display: 'inline-flex', alignItems: 'center', gap: 1 } }
+					aria-label={ __( 'Help', 'pojo-accessibility' ) }>
+					<HelpIcon />
+				</Link>
+			</Toolbar>
+		</AppBar>
+	);
+};
+
+export default AdminTopBar;

modules/settings/assets/js/constants/index.js

@@ -0,0 +1,2 @@
+export const HELP_LINK = 'https://go.elementor.com/';
+export const UPGRADE_LINK = 'https://go.elementor.com/';

modules/settings/assets/js/hooks/use-auth.js

@@ -0,0 +1,33 @@
+import API from '../api';
+import { UPGRADE_LINK } from '../constants';
+import { usePluginSettingsContext } from '../context/plugin-settings-context';
+
+const useAuth = () => {
+	const { subscriptionId } = 123;
+
+	const redirectToConnect = async () => {
+		const link = await getConnectLink();
+
+		window.open( link, '_self' ).focus();
+	};
+
+	const getConnectLink = async () => {
+		return API.initConnect();
+	};
+
+	const getUpgradeLink = () => {
+		const url = new URL( UPGRADE_LINK );
+
+		url.searchParams.append( 'subscription_id', subscriptionId );
+
+		return url.toString();
+	};
+
+	return {
+		redirectToConnect,
+		getConnectLink,
+		getUpgradeLink,
+	};
+};
+
+export default useAuth;

modules/settings/assets/js/hooks/use-modal.js

@@ -0,0 +1,22 @@
+import { useState } from '@wordpress/element';
+
+const useModal = ( defaultIsOpen = true ) => {
+	const [ isOpen, setIsOpen ] = useState( defaultIsOpen );
+
+	const open = () => {
+		setIsOpen( true );
+	};
+
+	const close = () => {
+		setIsOpen( false );
+	};
+
+	return {
+		isOpen,
+		setIsOpen,
+		open,
+		close,
+	};
+};
+
+export default useModal;

modules/settings/assets/js/icons/elementor-logo.js

@@ -0,0 +1,21 @@
+import SvgIcon from '@elementor/ui/SvgIcon';
+
+const ElementorLogo = ( { size } ) => {
+	return (
+		<SvgIcon viewBox="0 0 24 24" fontSize={ size }>
+			<g clipPath="url(#a)">
+				<path fill="#0C0D0E" fillRule="evenodd"
+					d="M2.022 18.667A12 12 0 1 1 21.977 5.333 12 12 0 0 1 2.022 18.667ZM9 7H7v10h2V7Zm8 0h-6v2h6V7Zm0 3.999h-6v2h6v-2ZM17 15h-6v2h6v-2Z"
+					clipRule="evenodd" />
+			</g>
+
+			<defs>
+				<clipPath id="a">
+					<path fill="#fff" d="M0 0h24v24H0z" />
+				</clipPath>
+			</defs>
+		</SvgIcon>
+	);
+};
+
+export default ElementorLogo;