Draft2

.eslintrc.json

@@ -36,6 +36,11 @@
 	},
 	"plugins": ["react", "jsx-a11y", "sonarjs", "cypress", "no-jquery", "compat"],
 	"settings": {
+		"import/resolver": {
+			"webpack": {
+				"config": "webpack.config.js"
+			}
+		},
 		"react": {
 			"pragma": "wp"
 		}

classes/views/form-templates/categories.php

@@ -12,7 +12,7 @@
 <ul class="frm-form-templates-categories frm-flex-col frm-gap-xs" aria-label="<?php esc_attr_e( 'Categories', 'formidable' ); ?>">
 	<?php foreach ( $categories as $category_slug => $category_data ) { ?>
 		<?php
-		$classes    = 'frm-form-templates-cat-item frm-flex-box frm-justify-between frm-font-medium';
+		$classes    = 'frm-page-sidebar-cat frm-form-templates-cat-item frm-flex-box frm-justify-between frm-font-medium';
 		$aria_label = sprintf(
 			// translators: %1$s: category name, %2$d: number of items in the category
 			esc_html__( '%1$s category, %2$d items', 'formidable' ),

classes/views/form-templates/index.php

@@ -21,7 +21,7 @@
 		?>
 
 		<div class="columns-2">
-			<div id="frm-form-templates-sidebar" class="frm-right-panel frm-flex-col frm-hide-js">
+			<div id="frm-page-sidebar-panel" class="frm-right-panel frm-flex-col frm-hide-js">
 				<div class="frm-scrollbar-wrapper frm-flex-col frm-gap-sm">
 					<?php
 					// Search box.

css/admin/page-sidebar.css

@@ -5,6 +5,20 @@
  * of the sidebar and content area for the page.
  */
 
+/**
+* Empty State Styles
+*
+* Provides styles for when the Sidebar Layout page is empty.
+*/
+#frm-page-sidebar-empty-state {
+	height: 100%;
+	margin-top: calc(-1 * var(--gap-md));
+}
+
+#frm-page-sidebar-empty-state .frm-page-sidebar-text {
+	max-width: 420px;
+}
+
 /**
  * Core Styles for the Page
  *
@@ -256,20 +270,6 @@ p.frm-form-templates-item-description {
 	cursor: pointer;
 }
 
-/**
-* Empty State Styles
-*
-* Provides styles for when the Sidebar Layout page is empty.
-*/
-#frm-form-templates-empty-state {
-	height: 100%;
-	margin-top: calc(-1 * var(--gap-md));
-}
-
-#frm-form-templates-empty-state .frm-form-templates-text {
-	max-width: 420px;
-}
-
 /**
 * Modal Styles
 *

js/src/common/utilities/index.js

@@ -1,7 +1,4 @@
-export const { onClickPreventDefault } = window.frmDom.util;
-
 export * from './visibility';
-export * from './animation';
 export * from './requestQueue';
 export * from './validation';
 export * from './uiUtils';

js/src/components/class-overlay.js

@@ -1,4 +1,7 @@
-import { frmAnimate } from '../common/utilities/animation';
+/**
+ * External dependencies
+ */
+import { frmAnimate } from 'core/utils';
 
 export class frmOverlay {
 

js/src/core/constants.js

@@ -0,0 +1,4 @@
+export const { url: PLUGIN_URL } = window.frmGlobal;
+export const HIDDEN_CLASS = 'frm_hidden';
+export const HIDE_JS_CLASS = 'frm-hide-js';
+export const CURRENT_CLASS = 'frm-current';

js/src/core/factory/createPageElements.js

@@ -0,0 +1,54 @@
+/**
+ * Creates a page elements manager.
+ *
+ * @param {Object} [initialElements={}] An object containing initial DOM elements.
+ * @throws {Error} Throws an error if the `initialElements` is not an object.
+ * @return {Object} An object with methods to get and add elements.
+ */
+export function createPageElements( initialElements = {} ) {
+	let elements = null;
+
+	/**
+	 * Initializes the page elements with the provided initial elements.
+	 *
+	 * @throws {Error} Throws an error if `initialElements` is not a plain object.
+	 * @return {void}
+	 */
+	const initializePageElements = () => {
+		if ( typeof initialElements !== 'object' || initialElements === null ) {
+			throw new Error(
+				'initializePageElements: initialElements must be a non-null object'
+			);
+		}
+
+		elements = initialElements;
+	};
+
+	/**
+	 * Retrieve the initialized essential DOM elements.
+	 *
+	 * @return {Object} The initialized elements object.
+	 */
+	function getElements() {
+		return elements;
+	}
+
+	/**
+	 * Add new elements to the elements object.
+	 *
+	 * @param {Object} newElements An object containing new elements to be added.
+	 * @throws {Error} Throws an error if the `newElements` is not a non-null object.
+	 * @return {void} Updates the elements object by merging the new elements into it.
+	 */
+	function addElements( newElements ) {
+		if ( typeof newElements !== 'object' || newElements === null ) {
+			throw new Error(
+				'addElements: newElements must be a non-null object'
+			);
+		}
+
+		elements = { ...elements, ...newElements };
+	}
+
+	return { initializePageElements, getElements, addElements };
+}

js/src/core/factory/createPageState.js

@@ -0,0 +1,78 @@
+/**
+ * Creates a page state manager.
+ *
+ * @param {Object} [initialState={}] An object containing the initial state.
+ * @throws {Error} Throws an error if the `initialState` is not a plain object.
+ * @return {Object} An object with methods to initialize, get, and set the page state.
+ */
+export function createPageState( initialState = {} ) {
+	let state = null;
+
+	/**
+	 * Initializes the page state with the provided initial state.
+	 *
+	 * @throws {Error} Throws an error if `initialState` is not a plain object.
+	 * @return {void}
+	 */
+	const initializePageState = () => {
+		if ( typeof initialState !== 'object' || initialState === null ) {
+			throw new Error(
+				'initializePageState: initialState must be a non-null object'
+			);
+		}
+
+		state = initialState;
+	};
+
+	/**
+	 * Returns the current page state.
+	 *
+	 * @return {Object|null} The current state of the page or null if not initialized.
+	 */
+	const getState = () => state;
+
+	/**
+	 * Returns a specific property from the current page state.
+	 *
+	 * @param {string} propertyName The name of the property to retrieve.
+	 * @return {*} The value of the specified property, or null if it doesn't exist.
+	 */
+	const getSingleState = ( propertyName ) =>
+		Reflect.get( state, propertyName ) ?? null;
+
+	/**
+	 * Updates the page state with new values.
+	 *
+	 * @param {Object} newState The new values to update the state with.
+	 * @throws {Error} Throws an error if `newState` is not a plain object.
+	 * @return {void}
+	 */
+	const setState = ( newState ) => {
+		if ( typeof newState !== 'object' || newState === null ) {
+			throw new Error( 'setState: newState must be a non-null object' );
+		}
+
+		state = { ...state, ...newState };
+	};
+
+	/**
+	 * Updates a specific property in the page state with a new value.
+	 *
+	 * @param {string} propertyName The name of the property to update.
+	 * @param {*}      value        The new value to set for the property.
+	 * @return {void}
+	 */
+	const setSingleState = ( propertyName, value ) => {
+		if ( Reflect.has( state, propertyName ) ) {
+			Reflect.set( state, propertyName, value );
+		}
+	};
+
+	return {
+		initializePageState,
+		getState,
+		getSingleState,
+		setState,
+		setSingleState,
+	};
+}

js/src/core/factory/index.js

@@ -0,0 +1,2 @@
+export * from './createPageElements';
+export * from './createPageState';

js/src/core/index.js

@@ -0,0 +1,3 @@
+export * from './constants';
+export * from './factory';
+export * from './utils';

js/src/core/layout/constants.js

@@ -0,0 +1,5 @@
+export const PREFIX = 'frm-page-sidebar';
+export const SEARCH_RESULT_ITEM = 'frm-card-item';
+export const VIEW_SLUGS = {
+	ALL_ITEMS: 'all-items',
+};

js/src/core/layout/elements/elements.js

@@ -0,0 +1,34 @@
+/**
+ * Internal dependencies
+ */
+import { createPageElements } from 'core/factory';
+
+/**
+ * Internal dependencies
+ */
+import { PREFIX, VIEW_SLUGS } from '../constants';
+import { createEmptyStateElement, getEmptyStateElements } from './emptyStateElement';
+
+const bodyContent = document.getElementById( 'post-body-content' );
+
+// Sidebar Elements
+const sidebar = document.getElementById( `${PREFIX}-panel` );
+const searchInput = sidebar.querySelector( '.frm-search-input' );
+const categoryItems = sidebar.querySelectorAll( `.${PREFIX}-cat` );
+const allItemsCategory = sidebar.querySelector(
+	`.${PREFIX}-cat[data-category="${VIEW_SLUGS.ALL_ITEMS}"]`
+);
+
+// Empty State Elements
+const emptyState = createEmptyStateElement();
+bodyContent?.appendChild( emptyState );
+const emptyStateElements = getEmptyStateElements();
+
+export const { getElements, addElements } = createPageElements({
+	bodyContent,
+	sidebar,
+	searchInput,
+	categoryItems,
+	allItemsCategory,
+	...emptyStateElements,
+});

js/src/page-sidebar/elements/emptyStateElement.js → js/src/core/layout/elements/emptyStateElement.js

@@ -3,10 +3,15 @@
  */
 import { __ } from '@wordpress/i18n';
 
+/**
+ * External dependencies
+ */
+import { PLUGIN_URL, HIDDEN_CLASS } from 'core';
+
 /**
  * Internal dependencies
  */
-import { PLUGIN_URL, PREFIX, HIDDEN_CLASS } from '../shared';
+import { PREFIX } from '../constants';
 
 const { tag, div, a, img } = window.frmDom;
 
@@ -57,6 +62,6 @@ export function getEmptyStateElements() {
 		emptyState,
 		emptyStateTitle: emptyState?.querySelector( `.${PREFIX}-title` ),
 		emptyStateText: emptyState?.querySelector( `.${PREFIX}-text` ),
-		emptyStateButton: emptyState?.querySelector( '.button' )
+		emptyStateButton: emptyState?.querySelector( '.button' ),
 	};
 }