Add boilerplate for react settings app

modules/ppcp-settings/composer.json

@@ -0,0 +1,16 @@
+{
+    "name": "woocommerce/ppcp-settings",
+    "type": "inpsyde-module",
+    "description": "Settings module",
+    "license": "GPL-2.0",
+    "require": {
+        "php": "^7.4 | ^8.0"
+    },
+    "autoload": {
+        "psr-4": {
+            "WooCommerce\\PayPalCommerce\\Settings\\": "src"
+        }
+    },
+    "minimum-stability": "dev",
+    "prefer-stable": true
+}

modules/ppcp-settings/module.php

@@ -0,0 +1,14 @@
+<?php
+/**
+ * The Settings module.
+ *
+ * @package WooCommerce\PayPalCommerce\Settings
+ */
+
+declare( strict_types = 1 );
+
+namespace WooCommerce\PayPalCommerce\Settings;
+
+return static function () : SettingsModule {
+	return new SettingsModule();
+};

modules/ppcp-settings/package.json

@@ -0,0 +1,12 @@
+{
+    "name": "ppcp-settings",
+    "version": "1.0.0",
+    "license": "GPL-3.0-or-later",
+    "scripts": {
+        "watch": "wp-scripts start --webpack-src-dir=resources/js --output-path=assets",
+        "build": "wp-scripts build --webpack-src-dir=resources/js --output-path=assets"
+    },
+    "devDependencies": {
+        "@wordpress/scripts": "^30.3.0"
+    }
+}

modules/ppcp-settings/resources/css/style.scss

@@ -0,0 +1 @@
+.red {color:red;}

modules/ppcp-settings/resources/js/App.js

@@ -0,0 +1,3 @@
+export function App() {
+	return <div className="red">App</div>;
+}

modules/ppcp-settings/resources/js/index.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import * as ReactDOM from 'react-dom/client';
+import { App } from './App';
+
+ReactDOM.createRoot(
+	document.getElementById( 'ppcp-settings-container' )
+).render( <App /> );
+
+/*
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+import { App } from './App';
+
+createRoot( document.getElementById( 'ppcp-settings-container' ) ).render(
+	<App />
+);
+
+ */

modules/ppcp-settings/services.php

@@ -0,0 +1,26 @@
+<?php
+/**
+ * The Settings module services.
+ *
+ * @package WooCommerce\PayPalCommerce\Settings
+ */
+
+declare( strict_types = 1 );
+
+namespace WooCommerce\PayPalCommerce\Settings;
+
+use WooCommerce\PayPalCommerce\Vendor\Psr\Container\ContainerInterface;
+
+return array(
+	'settings.url' => static function ( ContainerInterface $container ) : string {
+		/**
+		 * The path cannot be false.
+		 *
+		 * @psalm-suppress PossiblyFalseArgument
+		 */
+		return plugins_url(
+			'/modules/ppcp-settings/',
+			dirname( realpath( __FILE__ ), 3 ) . '/woocommerce-paypal-payments.php'
+		);
+	},
+);

modules/ppcp-settings/src/SettingsModule.php

@@ -0,0 +1,78 @@
+<?php
+/**
+ * The Settings module.
+ *
+ * @package WooCommerce\PayPalCommerce\AxoBlock
+ */
+
+declare(strict_types=1);
+namespace WooCommerce\PayPalCommerce\Settings;
+
+use WooCommerce\PayPalCommerce\Vendor\Inpsyde\Modularity\Module\ExecutableModule;
+use WooCommerce\PayPalCommerce\Vendor\Inpsyde\Modularity\Module\ModuleClassNameIdTrait;
+use WooCommerce\PayPalCommerce\Vendor\Inpsyde\Modularity\Module\ServiceModule;
+use WooCommerce\PayPalCommerce\Vendor\Psr\Container\ContainerInterface;
+use WooCommerce\PayPalCommerce\WcGateway\Gateway\PayPalGateway;
+
+/**
+ * Class SettingsModule
+ */
+class SettingsModule implements ServiceModule, ExecutableModule {
+	use ModuleClassNameIdTrait;
+
+	/**
+	 * {@inheritDoc}
+	 */
+	public function services(): array {
+		return require __DIR__ . '/../services.php';
+	}
+
+	/**
+	 * {@inheritDoc}
+	 */
+	public function run( ContainerInterface $container ): bool {
+		add_action(
+			'admin_enqueue_scripts',
+			function( $hook_suffix ) use ( $container ) {
+				if ( 'woocommerce_page_wc-settings' !== $hook_suffix ) {
+					return;
+				}
+
+				$script_asset_file = require dirname( realpath( __FILE__ ), 2 ) . '/assets/index.asset.php';
+				$module_url        = $container->get( 'settings.url' );
+
+				wp_register_script(
+					'ppcp-admin-settings',
+					$module_url . '/assets/index.js',
+					$script_asset_file['dependencies'],
+					$script_asset_file['version'],
+					true
+				);
+
+				wp_enqueue_script( 'ppcp-admin-settings' );
+
+				$stlye_asset_file = require dirname( realpath( __FILE__ ), 2 ) . '/assets/style.asset.php';
+				wp_register_style(
+					'ppcp-admin-settings',
+					$module_url . '/assets/style-style.css',
+					$stlye_asset_file['dependencies'],
+					$stlye_asset_file['version']
+				);
+
+				wp_enqueue_style( 'ppcp-admin-settings' );
+			}
+		);
+
+		add_action(
+			'woocommerce_paypal_payments_gateway_admin_options_wrapper',
+			function( PayPalGateway $gateway ) {
+				global $hide_save_button;
+				$hide_save_button = true;
+
+				echo '<div id="ppcp-settings-container"></div>';
+			}
+		);
+
+		return true;
+	}
+}

modules/ppcp-settings/webpack.config.js

@@ -0,0 +1,12 @@
+const defaultConfig = require( '@wordpress/scripts/config/webpack.config' );
+const path = require( 'path' );
+
+module.exports = {
+	...defaultConfig,
+	...{
+		entry: {
+			index: path.resolve( process.cwd(), 'resources/js', 'index.js' ),
+			style: path.resolve( process.cwd(), 'resources/css', 'style.scss' ),
+		},
+	},
+};