introduce Product Editor store

packages/js/product-editor/src/store/product-editor-ai/Readme.md

@@ -0,0 +1,29 @@
+# WooCommerce Product Editor UI Store
+
+This module provides a @wordpress/data store for managing the UI state of a WooCommerce Product Editor.
+
+## Structure
+
+Defines action types for the UI state:
+- `ACTION_MODAL_EDITOR_OPEN`
+- `ACTION_MODAL_EDITOR_CLOSE`
+
+### Actions
+
+- `openModalEditor`
+- `closeModalEditor`
+
+### Selectors
+
+Selector function:
+
+- `isModalEditorOpen`
+
+
+### Store
+
+Registers the WooCommerce Product Editor UI store with the following:
+
+- Store Name: `woo/product-editor-ui`
+
+## Usage

packages/js/product-editor/src/store/product-editor-ai/actions.ts

@@ -0,0 +1,20 @@
+/**
+ * Internal dependencies
+ */
+import {
+	ACTION_MODAL_EDITOR_CLOSE,
+	ACTION_MODAL_EDITOR_OPEN,
+} from './constants';
+
+const modalEditorActions = {
+	openModalEditor: () => ( {
+		type: ACTION_MODAL_EDITOR_OPEN,
+	} ),
+	closeModalEditor: () => ( {
+		type: ACTION_MODAL_EDITOR_CLOSE,
+	} ),
+};
+
+export default {
+	...modalEditorActions,
+};

packages/js/product-editor/src/store/product-editor-ai/constants.ts

@@ -0,0 +1,5 @@
+/**
+ * Full editor actions
+ */
+export const ACTION_MODAL_EDITOR_OPEN = 'MODAL_EDITOROPEN';
+export const ACTION_MODAL_EDITOR_CLOSE = 'MODAL_EDITORCLOSE';

packages/js/product-editor/src/store/product-editor-ai/index.ts

@@ -0,0 +1,26 @@
+/**
+ * External dependencies
+ */
+import { createReduxStore, register } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import actions from './actions';
+import selectors from './selectors';
+import reducer from './reducer';
+/**
+ * Types
+ */
+
+export const store = 'woo/product-editor-ui';
+
+const wooProductEditorUiStore = createReduxStore( store, {
+	actions,
+	selectors,
+	reducer,
+} );
+
+export default function registerProductEditorUiStore() {
+	register( wooProductEditorUiStore );
+}

packages/js/product-editor/src/store/product-editor-ai/reducer.ts

@@ -0,0 +1,44 @@
+/**
+ * Internal dependencies
+ */
+import {
+	ACTION_MODAL_EDITOR_CLOSE,
+	ACTION_MODAL_EDITOR_OPEN,
+} from './constants';
+import type {
+	ProductEditorModalEditorAction,
+	ProductEditorUIStateProps,
+} from './types';
+
+/**
+ * Types & Constants
+ */
+const INITIAL_STATE: ProductEditorUIStateProps = {
+	modalEditor: {
+		isOpen: false,
+	},
+};
+
+export default function reducer(
+	state = INITIAL_STATE,
+	action: ProductEditorModalEditorAction
+) {
+	switch ( action.type ) {
+		case ACTION_MODAL_EDITOR_OPEN:
+			return {
+				...state,
+				modalEditor: {
+					isOpen: true,
+				},
+			};
+		case ACTION_MODAL_EDITOR_CLOSE:
+			return {
+				...state,
+				modalEditor: {
+					isOpen: false,
+				},
+			};
+	}
+
+	return state;
+}

packages/js/product-editor/src/store/product-editor-ai/selectors.ts

@@ -0,0 +1,13 @@
+/**
+ * Internal dependencies
+ */
+
+import type { ProductEditorUIStateProps } from './types';
+
+export default {
+	isModalEditorOpen: function isModalEditorOpen(
+		state: ProductEditorUIStateProps
+	) {
+		return state.modalEditor.isOpen;
+	},
+};

packages/js/product-editor/src/store/product-editor-ai/types.ts

@@ -0,0 +1,17 @@
+/**
+ * Internal dependencies
+ */
+import {
+	ACTION_MODAL_EDITOR_CLOSE,
+	ACTION_MODAL_EDITOR_OPEN,
+} from './constants';
+
+export type ProductEditorUIStateProps = {
+	modalEditor: {
+		isOpen: boolean;
+	};
+};
+
+export type ProductEditorModalEditorAction = {
+	type: typeof ACTION_MODAL_EDITOR_OPEN | typeof ACTION_MODAL_EDITOR_CLOSE;
+};