Add basic @wordpress/data store with fullscreen mode state

[MAILPOET-4287]

mailpoet/assets/js/src/automation/editor/store/actions.ts

@@ -0,0 +1,8 @@
+import { store as preferencesStore } from '@wordpress/preferences';
+import { storeName } from './constants';
+import { Feature } from './types';
+
+export const toggleFeature =
+  (feature: Feature) =>
+  ({ registry }) =>
+    registry.dispatch(preferencesStore).toggle(storeName, feature);

mailpoet/assets/js/src/automation/editor/store/constants.ts

@@ -0,0 +1 @@
+export const storeName = 'mailpoet/automation-editor';

mailpoet/assets/js/src/automation/editor/store/index.ts

@@ -0,0 +1,29 @@
+import { createReduxStore, register, StoreDescriptor } from '@wordpress/data';
+import * as actions from './actions';
+import { storeName } from './constants';
+import { reducer } from './reducer';
+import * as selectors from './selectors';
+import { State } from './types';
+import { OmitFirstArgs } from '../../../types';
+
+export * from './constants';
+
+type StoreType = Omit<StoreDescriptor, 'name'> & {
+  name: typeof storeName;
+};
+
+export const store = createReduxStore<State>(storeName, {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- the "Action" type is missing thunks with "dispatch"
+  actions: actions as any,
+  selectors,
+  reducer,
+}) as StoreType;
+
+type StoreKey = typeof storeName | StoreType;
+
+declare module '@wordpress/data' {
+  function select(key: StoreKey): OmitFirstArgs<typeof selectors>;
+  function dispatch(key: StoreKey): typeof actions;
+}
+
+register(store);

mailpoet/assets/js/src/automation/editor/store/reducer.ts

@@ -0,0 +1,9 @@
+import { Action } from '@wordpress/data';
+import { State } from './types';
+
+export function reducer(state: State, action: Action): State {
+  switch (action.type) {
+    default:
+      return state;
+  }
+}

mailpoet/assets/js/src/automation/editor/store/selectors.ts

@@ -0,0 +1,10 @@
+import { createRegistrySelector } from '@wordpress/data';
+import { store as preferencesStore } from '@wordpress/preferences';
+import { storeName } from './constants';
+import { Feature } from './types';
+
+export const isFeatureActive = createRegistrySelector(
+  (select) =>
+    (_, feature: Feature): boolean =>
+      select(preferencesStore).get(storeName, feature),
+);

mailpoet/assets/js/src/automation/editor/store/types.ts

@@ -0,0 +1 @@
+export type Feature = 'fullscreenMode';

mailpoet/assets/js/src/types/index.ts

@@ -1,7 +1,12 @@
 import { ColorPalette, FontSizePicker } from '@wordpress/components';
+import { store as preferencesStore } from '@wordpress/preferences';
 
 import './wordpress_modules';
 
+/* eslint-disable @typescript-eslint/no-explicit-any -- some general types in this file need to use "any"  */
+/* eslint-disable @typescript-eslint/naming-convention -- we have no control over 3rd-party naming conventions */
+/* eslint-disable no-underscore-dangle -- we have no control over 3rd-party naming conventions */
+
 export * from '../segments/dynamic/types';
 
 // Inspired by: https://neliosoftware.com/blog/adding-typescript-to-wordpress-data-stores/
@@ -17,7 +22,6 @@ export type OmitFirstArgs<O extends object> = {
 };
 
 declare module '@wordpress/block-editor' {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any,@typescript-eslint/naming-convention,no-underscore-dangle
   export const __experimentalLibrary: any;
 
   // types for 'useSetting' are missing in @types/wordpress__block-editor
@@ -36,3 +40,18 @@ declare module '@wordpress/block-editor' {
     }[];
   }
 }
+
+declare module '@wordpress/data' {
+  type PreferencesStore = 'core/preferences' | typeof preferencesStore;
+
+  // there are no @types/wordpress__preferences yet
+  function select(key: PreferencesStore): {
+    get: <T>(scope: string, name: string) => T;
+  };
+
+  // types for "createRegistrySelector" are not correct
+  export function createRegistrySelector<
+    S extends typeof select,
+    T extends (state: any, ...args: any) => any,
+  >(registrySelector: (select: S) => T): T;
+}

mailpoet/assets/js/src/types/wordpress_modules.ts

@@ -4,3 +4,10 @@
 declare module '@wordpress/interface' {
   export const InterfaceSkeleton: any;
 }
+
+// there are no @types/wordpress__preferences yet
+declare module '@wordpress/preferences' {
+  import { StoreDescriptor } from '@wordpress/data';
+
+  export const store: { name: 'core/preferences' } & StoreDescriptor;
+}