@applicaster/zapp-react-native-utils 15.0.0-rc.48 → 15.0.0-rc.49

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -23,12 +23,9 @@ import {
23
23
  EntryResolver,
24
24
  resolveObjectValues,
25
25
  } from "../appUtils/contextKeysManager/contextResolver";
26
- import { useNavigation } from "../reactHooks";
26
+ import { useNavigation, useRivers } from "../reactHooks";
27
27
 
28
- import {
29
- useContentTypes,
30
- usePickFromState,
31
- } from "@applicaster/zapp-react-native-redux/hooks";
28
+ import { useContentTypes } from "@applicaster/zapp-react-native-redux/hooks";
32
29
  import { useSubscriberFor } from "../reactHooks/useSubscriberFor";
33
30
  import { APP_EVENTS } from "../appUtils/events";
34
31
  import {
@@ -278,7 +275,7 @@ export function withActionExecutor(Component) {
278
275
 
279
276
  return function ActionExecutorComponent(props: Props) {
280
277
  const navigator = useNavigation();
281
- const { rivers } = usePickFromState(["rivers"]);
278
+ const rivers = useRivers();
282
279
  const contentTypes = useContentTypes();
283
280
 
284
281
  const handlers = useMemo(() => {
@@ -388,7 +388,7 @@ export function AnalyticsProvider(props: ComponentWithChildrenProps) {
388
388
 
389
389
  ```ts
390
390
  export function useAnalytics(props: any): any {
391
- const { appData } = usePickFromState(["appData"]);
391
+ const appData = useAppData();
392
392
  const getAnalyticsFunctions = React.useContext(AnalyticsContext);
393
393
 
394
394
  const analyticsFunctions = React.useMemo(
@@ -1,5 +1,5 @@
1
1
  import * as ReactNative from "react-native";
2
- import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
2
+ import { useAppData } from "@applicaster/zapp-react-native-redux/hooks";
3
3
 
4
4
  import { isTV, platformSelect } from "../reactUtils";
5
5
  import { useIsTablet } from "../reactHooks";
@@ -184,9 +184,7 @@ export const getScreenOrientation = ({
184
184
 
185
185
  export const useGetScreenOrientation = (screenData) => {
186
186
  const isTablet = useIsTablet();
187
-
188
- const { appData } = usePickFromState(["appData"]);
189
- const isTabletPortrait = appData?.isTabletPortrait;
187
+ const { isTabletPortrait } = useAppData();
190
188
 
191
189
  return getScreenOrientation({
192
190
  screenData,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@applicaster/zapp-react-native-utils",
3
- "version": "15.0.0-rc.48",
3
+ "version": "15.0.0-rc.49",
4
4
  "description": "Applicaster Zapp React Native utilities package",
5
5
  "main": "index.js",
6
6
  "types": "index.d.ts",
@@ -27,7 +27,7 @@
27
27
  },
28
28
  "homepage": "https://github.com/applicaster/quickbrick#readme",
29
29
  "dependencies": {
30
- "@applicaster/applicaster-types": "15.0.0-rc.48",
30
+ "@applicaster/applicaster-types": "15.0.0-rc.49",
31
31
  "buffer": "^5.2.1",
32
32
  "camelize": "^1.0.0",
33
33
  "dayjs": "^1.11.10",
@@ -6,6 +6,7 @@ import { deprecationMessage } from "../appUtils";
6
6
 
7
7
  import { pluginUtilsLogger } from "./logger";
8
8
  import { platformSelect } from "../reactUtils";
9
+ import { get } from "../utils";
9
10
 
10
11
  type PluginModule = any;
11
12
  type Plugin = {
@@ -254,3 +255,6 @@ const getPluginType = R.pathOr("unknown_plugin_type", [
254
255
 
255
256
  export const isPlayerPlugin = (routeState): boolean =>
256
257
  getPluginType(routeState) === "player";
258
+
259
+ export const getPluginModuleUrlScheme = (plugin) =>
260
+ get(plugin, ["module", "urlScheme"]);
@@ -3,7 +3,7 @@ import { View } from "react-native";
3
3
  import * as R from "ramda";
4
4
 
5
5
  import { useNavigation } from "../navigation";
6
- import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
6
+ import { usePlugins } from "@applicaster/zapp-react-native-redux/hooks";
7
7
  import { platformSelect } from "@applicaster/zapp-react-native-utils/reactUtils";
8
8
  import { dismissModal, openModal } from "../../modalState";
9
9
 
@@ -16,7 +16,7 @@ const ModalContainer = platformSelect({
16
16
 
17
17
  export function useAdvertisingInterstitial() {
18
18
  const { screenData, currentRoute } = useNavigation();
19
- const { plugins } = usePickFromState();
19
+ const plugins = usePlugins();
20
20
 
21
21
  return useEffect(() => {
22
22
  // TODD: typing problem: fix any type
@@ -1,6 +1,6 @@
1
1
  import * as React from "react";
2
- import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
3
2
  import { useIsTablet } from "./useIsTablet";
3
+ import { useAppData } from "@applicaster/zapp-react-native-redux";
4
4
 
5
5
  export const useMemoizedIsTablet = () => {
6
6
  const isTablet = useIsTablet();
@@ -14,9 +14,9 @@ export const useMemoizedIsTablet = () => {
14
14
  };
15
15
 
16
16
  export const useIsTabletLandscape = (): boolean => {
17
- const { appData } = usePickFromState(["appData"]);
17
+ const { isTabletPortrait } = useAppData();
18
18
 
19
19
  const isTablet = useIsTablet();
20
20
 
21
- return isTablet && !appData.isTabletPortrait;
21
+ return isTablet && !isTabletPortrait;
22
22
  };
@@ -10,6 +10,9 @@ describe("useEntryScreenId", () => {
10
10
  const mappedScreenId = "mapped-id";
11
11
 
12
12
  const initialState = {
13
+ rivers: {
14
+ [mappedScreenId]: { id: mappedScreenId, type: "any" },
15
+ },
13
16
  contentTypes: { mappedEntry: { screen_id: mappedScreenId } },
14
17
  };
15
18
 
@@ -1,7 +1,7 @@
1
- import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
1
+ import { useContentTypes } from "@applicaster/zapp-react-native-redux";
2
2
 
3
3
  export const useEntryScreenId = (entry?: ZappEntry): string | undefined => {
4
- const { contentTypes } = usePickFromState("contentTypes");
4
+ const contentTypes = useContentTypes();
5
5
 
6
6
  if (!entry) {
7
7
  return;
@@ -1,16 +1,10 @@
1
- import { renderHook } from "@testing-library/react-hooks";
1
+ import React from "react";
2
+ import { renderHook } from "@testing-library/react-native";
2
3
  import { Dimensions, StatusBar } from "react-native";
3
4
  import { useDimensions } from "../useDimensions";
4
- import { usePickFromState } from "@applicaster/zapp-react-native-redux";
5
5
 
6
6
  import { useIsScreenActive } from "@applicaster/zapp-react-native-utils/reactHooks/navigation/useIsScreenActive";
7
-
8
- jest.mock("@applicaster/zapp-react-native-redux/hooks", () => {
9
- return {
10
- ...jest.requireActual("@applicaster/zapp-react-native-redux/hooks"),
11
- usePickFromState: jest.fn(),
12
- };
13
- });
7
+ import { WrappedWithProviders } from "@applicaster/zapp-react-native-utils/testUtils";
14
8
 
15
9
  jest.mock(
16
10
  "@applicaster/zapp-react-native-utils/reactHooks/navigation/useIsScreenActive",
@@ -42,12 +36,22 @@ describe("useDimensions", () => {
42
36
 
43
37
  beforeEach(() => {
44
38
  StatusBar.currentHeight = 20;
45
- (usePickFromState as jest.Mock).mockReturnValue({ appData: mockAppData });
46
39
  });
47
40
 
48
41
  it("returns correct initial dimensions", () => {
49
- const { result } = renderHook(() =>
50
- useDimensions("window", { fullDimensions: false })
42
+ const { result } = renderHook(
43
+ () => useDimensions("window", { fullDimensions: false }),
44
+ {
45
+ wrapper: ({ children }) => (
46
+ <WrappedWithProviders
47
+ store={{
48
+ appData: mockAppData,
49
+ }}
50
+ >
51
+ {children}
52
+ </WrappedWithProviders>
53
+ ),
54
+ }
51
55
  );
52
56
 
53
57
  expect(result.current).toMatchObject({
@@ -56,7 +60,17 @@ describe("useDimensions", () => {
56
60
  });
57
61
 
58
62
  it("calls handler on mount", () => {
59
- renderHook(() => useDimensions("window", { fullDimensions: false }));
63
+ renderHook(() => useDimensions("window", { fullDimensions: false }), {
64
+ wrapper: ({ children }) => (
65
+ <WrappedWithProviders
66
+ store={{
67
+ appData: mockAppData,
68
+ }}
69
+ >
70
+ {children}
71
+ </WrappedWithProviders>
72
+ ),
73
+ });
60
74
 
61
75
  expect(Dimensions.addEventListener).toHaveBeenCalledWith(
62
76
  "change",
@@ -65,12 +79,23 @@ describe("useDimensions", () => {
65
79
  });
66
80
 
67
81
  it("calls handler on isActive change", () => {
68
- const { rerender } = renderHook(() =>
69
- useDimensions("window", { fullDimensions: false })
82
+ const { rerender } = renderHook(
83
+ () => useDimensions("window", { fullDimensions: false }),
84
+ {
85
+ wrapper: ({ children }) => (
86
+ <WrappedWithProviders
87
+ store={{
88
+ appData: mockAppData,
89
+ }}
90
+ >
91
+ {children}
92
+ </WrappedWithProviders>
93
+ ),
94
+ }
70
95
  );
71
96
 
72
97
  (useIsScreenActive as jest.Mock).mockReturnValue(false);
73
- rerender();
98
+ rerender({});
74
99
 
75
100
  expect(Dimensions.addEventListener).toHaveBeenCalledWith(
76
101
  "change",
@@ -79,8 +104,19 @@ describe("useDimensions", () => {
79
104
  });
80
105
 
81
106
  it("handles fullDimensions option", () => {
82
- const { result } = renderHook(() =>
83
- useDimensions("window", { fullDimensions: true })
107
+ const { result } = renderHook(
108
+ () => useDimensions("window", { fullDimensions: true }),
109
+ {
110
+ wrapper: ({ children }) => (
111
+ <WrappedWithProviders
112
+ store={{
113
+ appData: mockAppData,
114
+ }}
115
+ >
116
+ {children}
117
+ </WrappedWithProviders>
118
+ ),
119
+ }
84
120
  );
85
121
 
86
122
  expect(result.current).toMatchObject({
@@ -91,8 +127,19 @@ describe("useDimensions", () => {
91
127
  });
92
128
 
93
129
  it("handles excludeStatusBar option", () => {
94
- const { result } = renderHook(() =>
95
- useDimensions("window", { excludeStatusBar: true })
130
+ const { result } = renderHook(
131
+ () => useDimensions("window", { excludeStatusBar: true }),
132
+ {
133
+ wrapper: ({ children }) => (
134
+ <WrappedWithProviders
135
+ store={{
136
+ appData: mockAppData,
137
+ }}
138
+ >
139
+ {children}
140
+ </WrappedWithProviders>
141
+ ),
142
+ }
96
143
  );
97
144
 
98
145
  expect(result.current.height).toBe(
@@ -101,8 +148,19 @@ describe("useDimensions", () => {
101
148
  });
102
149
 
103
150
  it("handles rounded option", () => {
104
- const { result } = renderHook(() =>
105
- useDimensions("window", { rounded: true })
151
+ const { result } = renderHook(
152
+ () => useDimensions("window", { rounded: true }),
153
+ {
154
+ wrapper: ({ children }) => (
155
+ <WrappedWithProviders
156
+ store={{
157
+ appData: mockAppData,
158
+ }}
159
+ >
160
+ {children}
161
+ </WrappedWithProviders>
162
+ ),
163
+ }
106
164
  );
107
165
 
108
166
  expect(result.current.width).toBe(Math.ceil(mockDimensions.width));
@@ -110,8 +168,19 @@ describe("useDimensions", () => {
110
168
  });
111
169
 
112
170
  it("handles deviceInfo option", () => {
113
- const { result } = renderHook(() =>
114
- useDimensions("window", { deviceInfo: true })
171
+ const { result } = renderHook(
172
+ () => useDimensions("window", { deviceInfo: true }),
173
+ {
174
+ wrapper: ({ children }) => (
175
+ <WrappedWithProviders
176
+ store={{
177
+ appData: mockAppData,
178
+ }}
179
+ >
180
+ {children}
181
+ </WrappedWithProviders>
182
+ ),
183
+ }
115
184
  );
116
185
 
117
186
  expect(result.current.deviceInfo).toMatchObject({
@@ -121,7 +190,18 @@ describe("useDimensions", () => {
121
190
 
122
191
  it("logs deprecation warning when fullDimensions is boolean", () => {
123
192
  const consoleWarnSpy = jest.spyOn(console, "warn").mockImplementation();
124
- renderHook(() => useDimensions("window", true));
193
+
194
+ renderHook(() => useDimensions("window", true), {
195
+ wrapper: ({ children }) => (
196
+ <WrappedWithProviders
197
+ store={{
198
+ appData: mockAppData,
199
+ }}
200
+ >
201
+ {children}
202
+ </WrappedWithProviders>
203
+ ),
204
+ });
125
205
 
126
206
  expect(consoleWarnSpy).toHaveBeenCalledWith(
127
207
  "Deprecation Warning\nSecond argument is now the options object. {fullDimensions: boolean, ...}"
@@ -3,7 +3,7 @@ import { useLayoutEffect, useMemo, useRef, useState } from "react";
3
3
  import * as R from "ramda";
4
4
 
5
5
  import { Dimensions, Platform, StatusBar } from "react-native";
6
- import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
6
+ import { useAppData } from "@applicaster/zapp-react-native-redux/hooks";
7
7
 
8
8
  import { isTV } from "../../../reactUtils";
9
9
 
@@ -37,7 +37,7 @@ export const useDimensions: UseDimensions = (
37
37
  ) => {
38
38
  const statusBarHeight = StatusBar?.currentHeight;
39
39
  const isActive = useIsScreenActive();
40
- const { appData } = usePickFromState(["appData"]);
40
+ const appData = useAppData();
41
41
 
42
42
  if (typeof fullDimensions === "boolean") {
43
43
  // eslint-disable-next-line no-console
@@ -3,7 +3,7 @@ import { BackHandler } from "react-native";
3
3
 
4
4
  import {
5
5
  useContentTypes,
6
- usePickFromState,
6
+ usePlugins,
7
7
  } from "@applicaster/zapp-react-native-redux/hooks";
8
8
  import { HooksManager } from "@applicaster/zapp-react-native-utils/appUtils/HooksManager";
9
9
 
@@ -16,6 +16,8 @@ import { useConnectionInfo } from "../connection";
16
16
 
17
17
  import { isTV, isWeb } from "@applicaster/zapp-react-native-utils/reactUtils";
18
18
  import { useNavbarState } from "../screen";
19
+ import { useRivers } from "../state";
20
+ import { useLayoutVersion } from "../layout";
19
21
 
20
22
  export { useNavigation } from "./useNavigation";
21
23
 
@@ -164,11 +166,10 @@ export const useZappHooksForEntry = (
164
166
  setIsRunningInBackground,
165
167
  }: HookModalContextT = useContext(ZappHookModalContext.ReactContext);
166
168
 
167
- const {
168
- appData: { layoutVersion },
169
- rivers,
170
- plugins,
171
- } = usePickFromState(["appData", "rivers", "plugins"]);
169
+ const plugins = usePlugins();
170
+ const rivers = useRivers();
171
+
172
+ const layoutVersion = useLayoutVersion();
172
173
 
173
174
  const contentTypes = useContentTypes();
174
175
 
@@ -3,7 +3,10 @@
3
3
 
4
4
  import { useContext } from "react";
5
5
 
6
- import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
6
+ import {
7
+ useContentTypes,
8
+ usePlugins,
9
+ } from "@applicaster/zapp-react-native-redux/hooks";
7
10
 
8
11
  import { legacyScreenData } from "@applicaster/quick-brick-core/App/NavigationProvider/utils";
9
12
 
@@ -14,6 +17,7 @@ import { useNavigation } from "./useNavigation";
14
17
  import { useModalStoreState } from "../../modalState";
15
18
  import { ScreenDataContext } from "@applicaster/zapp-react-native-ui-components/Contexts/ScreenDataContext";
16
19
  import { usePathname } from "./usePathname";
20
+ import { useRivers } from "../state";
17
21
 
18
22
  // starts with modal/
19
23
  const isModalPathname = (pathname: string) => /^modal\//.test(pathname);
@@ -42,11 +46,9 @@ export const useRoute = (
42
46
  ? legacyScreenData(screenContext)
43
47
  : screenContext;
44
48
 
45
- const { plugins, contentTypes, rivers } = usePickFromState([
46
- "plugins",
47
- "rivers",
48
- "contentTypes",
49
- ]);
49
+ const plugins = usePlugins();
50
+ const rivers = useRivers();
51
+ const contentTypes = useContentTypes();
50
52
 
51
53
  const modalState = useModalStoreState();
52
54
 
@@ -3,7 +3,10 @@ import memoizee from "memoizee";
3
3
  import * as R from "ramda";
4
4
 
5
5
  import { CellRendererResolver } from "@applicaster/zapp-react-native-ui-components/Components/CellRendererResolver";
6
- import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
6
+ import {
7
+ usePlugins,
8
+ useCellStyles,
9
+ } from "@applicaster/zapp-react-native-redux";
7
10
  import { useDimensions } from "../layout";
8
11
  import { useIsRTL } from "../../localizationUtils";
9
12
 
@@ -53,7 +56,8 @@ export function useCellResolver({
53
56
  updateForInactiveScreens: false,
54
57
  });
55
58
 
56
- const { plugins, cellStyles } = usePickFromState(["plugins", "cellStyles"]);
59
+ const plugins = usePlugins();
60
+ const cellStyles = useCellStyles();
57
61
  const isRTL = useIsRTL();
58
62
 
59
63
  const options = {
@@ -2,7 +2,11 @@
2
2
  import * as React from "react";
3
3
 
4
4
  import { findComponentByType } from "@applicaster/zapp-react-native-utils/pluginUtils";
5
- import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
5
+ import {
6
+ usePlugins,
7
+ useAppSelector,
8
+ selectComponents,
9
+ } from "@applicaster/zapp-react-native-redux";
6
10
 
7
11
  type Decorator = (component: React.Component<any>) => React.Component<any>;
8
12
  type Watcher = Array<any>;
@@ -15,7 +19,9 @@ export function useComponentResolver(
15
19
  { componentType, decorators }: Props,
16
20
  watchers?: Watcher
17
21
  ): React.ComponentType<any> {
18
- const { plugins, components } = usePickFromState(["plugins", "components"]);
22
+ const plugins = usePlugins();
23
+
24
+ const components = useAppSelector(selectComponents);
19
25
 
20
26
  return React.useMemo(
21
27
  () =>
@@ -9,8 +9,16 @@ const mockStore = configureStore([thunk]);
9
9
  import { useTargetScreenData } from "../useTargetScreenData";
10
10
 
11
11
  describe("useTargetScreenData", function () {
12
- const river_id_2 = {};
13
- const river_id_1 = {};
12
+ const river_id_2 = {
13
+ id: "river_id_2",
14
+ type: "any",
15
+ };
16
+
17
+ const river_id_1 = {
18
+ id: "river_id_1",
19
+ type: "any",
20
+ };
21
+
14
22
  const screenId = "river_id_2";
15
23
  const entry = { id: "test", type: { value: "video" } };
16
24
 
@@ -1,7 +1,8 @@
1
1
  import React from "react";
2
- import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
2
+ import { useContentTypes } from "@applicaster/zapp-react-native-redux/hooks";
3
3
  import * as R from "ramda";
4
4
  import { appStore } from "@applicaster/zapp-react-native-redux/AppStore";
5
+ import { useRivers } from "../state";
5
6
 
6
7
  export function getTargetScreenData(
7
8
  entry: ZappEntry,
@@ -43,7 +44,8 @@ export function getTargetScreenDataFromEntry(entry: ZappEntry): ZappRiver {
43
44
  }
44
45
 
45
46
  export const useTargetScreenData = (entry: ZappEntry) => {
46
- const { rivers, contentTypes } = usePickFromState(["rivers", "contentTypes"]);
47
+ const rivers = useRivers();
48
+ const contentTypes = useContentTypes();
47
49
 
48
50
  return React.useMemo(
49
51
  () => getTargetScreenData(entry, rivers, contentTypes),
@@ -3,6 +3,6 @@ import {
3
3
  selectRivers,
4
4
  } from "@applicaster/zapp-react-native-redux";
5
5
 
6
- export function useRivers(): Record<string, ZappRiver> {
6
+ export function useRivers() {
7
7
  return useAppSelector(selectRivers);
8
8
  }
@@ -1,7 +1,7 @@
1
1
  import * as R from "ramda";
2
2
  import { useMemo } from "react";
3
3
 
4
- import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
4
+ import { usePlugins } from "@applicaster/zapp-react-native-redux/hooks";
5
5
 
6
6
  // importing this way prevents typescript packages importing from this
7
7
  // file to go crazy reporting errors on JS
@@ -25,7 +25,7 @@ export function parsePluginConfiguration(plugin, manifest) {
25
25
  }
26
26
 
27
27
  export function usePluginConfiguration<T, S>(identifier, manifest) {
28
- const { plugins } = usePickFromState(["plugins"]);
28
+ const plugins = usePlugins();
29
29
 
30
30
  const plugin = useMemo(
31
31
  () => R.find(R.propEq("identifier", identifier), plugins),
@@ -56,9 +56,29 @@ const initialState = {
56
56
  contentTypes: null,
57
57
  };
58
58
 
59
+ const themeObjDefault = {
60
+ component_margin_top: 0,
61
+ component_margin_bottom: 0,
62
+ component_margin_left: 0,
63
+ component_margin_right: 0,
64
+ component_padding_top: 0,
65
+ component_padding_bottom: 0,
66
+ component_padding_left: 0,
67
+ component_padding_right: 0,
68
+ component_gutter_vertical: 0,
69
+ component_gutter_horizontal: 0,
70
+ component_corner_radius: 0,
71
+ app_background_color: "rgba(0,0,0,0)",
72
+ screen_margin_top: 0,
73
+ screen_margin_bottom: 0,
74
+ component_anchor_point_y: 0,
75
+ assets: "",
76
+ };
77
+
59
78
  export const WrappedWithProviders = ({
60
79
  children,
61
80
  store: storeObj = {},
81
+ theme: themeObj = themeObjDefault,
62
82
  }: any) => {
63
83
  const _store = configureStore([thunk])(
64
84
  R.mergeDeepRight(initialState, { ...storeObj })
@@ -70,24 +90,7 @@ export const WrappedWithProviders = ({
70
90
  <ThemeContext.Provider
71
91
  value={{
72
92
  themes: {
73
- light: {
74
- component_margin_top: 0,
75
- component_margin_bottom: 0,
76
- component_margin_left: 0,
77
- component_margin_right: 0,
78
- component_padding_top: 0,
79
- component_padding_bottom: 0,
80
- component_padding_left: 0,
81
- component_padding_right: 0,
82
- component_gutter_vertical: 0,
83
- component_gutter_horizontal: 0,
84
- component_corner_radius: 0,
85
- app_background_color: "rgba(0,0,0,0)",
86
- screen_margin_top: 0,
87
- screen_margin_bottom: 0,
88
- component_anchor_point_y: 0,
89
- assets: "",
90
- },
93
+ light: themeObj,
91
94
  },
92
95
  selectedThemeId: "light",
93
96
  setSelectedThemeId: () => {},
@@ -113,11 +116,17 @@ export const WrappedWithProviders = ({
113
116
  * @param store optional store to pass to the provider
114
117
  * @returns
115
118
  */
116
- export const renderWithProviders = (component, storeObj?: unknown) => {
119
+ export const renderWithProviders = (
120
+ component,
121
+ storeObj?: unknown,
122
+ themeObj?: unknown
123
+ ) => {
117
124
  return render(component, {
118
125
  wrapper: function TestWrapper({ children }: PropsWithChildren<any>) {
119
126
  return (
120
- <WrappedWithProviders store={storeObj}>{children}</WrappedWithProviders>
127
+ <WrappedWithProviders store={storeObj} theme={themeObj}>
128
+ {children}
129
+ </WrappedWithProviders>
121
130
  );
122
131
  },
123
132
  });
@@ -0,0 +1,124 @@
1
+ import {
2
+ createPluginsByPathSelector,
3
+ createPluginsByModuleSelector,
4
+ combinePluginSelectors,
5
+ } from "../selectors";
6
+
7
+ describe("Plugin Selectors", () => {
8
+ const mockPlugins = [
9
+ {
10
+ identifier: "plugin1",
11
+ module: {
12
+ urlScheme: { host: "test" },
13
+ player: { type: "default" },
14
+ },
15
+ customField: true,
16
+ },
17
+ {
18
+ identifier: "plugin2",
19
+ module: {
20
+ urlScheme: { host: "other" },
21
+ },
22
+ },
23
+ {
24
+ identifier: "plugin3",
25
+ module: {
26
+ player: { type: "custom" },
27
+ },
28
+ },
29
+ ];
30
+
31
+ const mockState = {
32
+ plugins: mockPlugins,
33
+ };
34
+
35
+ describe("createPluginsByPathSelector", () => {
36
+ it("filters plugins by string path", () => {
37
+ const selector = createPluginsByPathSelector("customField");
38
+ const result = selector(mockState);
39
+
40
+ expect(result).toHaveLength(1);
41
+ expect(result[0].identifier).toBe("plugin1");
42
+ });
43
+
44
+ it("filters plugins by array path", () => {
45
+ const selector = createPluginsByPathSelector(["module", "urlScheme"]);
46
+ const result = selector(mockState);
47
+
48
+ expect(result).toHaveLength(2);
49
+ expect(result.map((p) => p.identifier)).toEqual(["plugin1", "plugin2"]);
50
+ });
51
+
52
+ it("handles missing plugins array", () => {
53
+ const selector = createPluginsByPathSelector("customField");
54
+ const result = selector({});
55
+
56
+ expect(result).toEqual([]);
57
+ });
58
+
59
+ it("handles non-existent path", () => {
60
+ const selector = createPluginsByPathSelector("nonexistent");
61
+ const result = selector(mockState);
62
+
63
+ expect(result).toEqual([]);
64
+ });
65
+ });
66
+
67
+ describe("createPluginsByModuleSelector", () => {
68
+ it("filters plugins by module path", () => {
69
+ const selector = createPluginsByModuleSelector("player");
70
+ const result = selector(mockState);
71
+
72
+ expect(result).toHaveLength(2);
73
+ expect(result.map((p) => p.identifier)).toEqual(["plugin1", "plugin3"]);
74
+ });
75
+
76
+ it("handles non-existent module", () => {
77
+ const selector = createPluginsByModuleSelector("nonexistent");
78
+ const result = selector(mockState);
79
+
80
+ expect(result).toEqual([]);
81
+ });
82
+ });
83
+
84
+ describe("combinePluginSelectors", () => {
85
+ it("combines multiple selectors with AND logic", () => {
86
+ const urlSchemeSelector = createPluginsByModuleSelector("urlScheme");
87
+ const playerSelector = createPluginsByModuleSelector("player");
88
+
89
+ const combinedSelector = combinePluginSelectors(
90
+ urlSchemeSelector,
91
+ playerSelector
92
+ );
93
+
94
+ const result = combinedSelector(mockState);
95
+
96
+ expect(result).toHaveLength(1);
97
+ expect(result[0].identifier).toBe("plugin1");
98
+ });
99
+
100
+ it("returns empty array when no plugins match all conditions", () => {
101
+ const urlSchemeSelector = createPluginsByModuleSelector("urlScheme");
102
+ const customSelector = createPluginsByPathSelector("nonexistent");
103
+
104
+ const combinedSelector = combinePluginSelectors(
105
+ urlSchemeSelector,
106
+ customSelector
107
+ );
108
+
109
+ const result = combinedSelector(mockState);
110
+
111
+ expect(result).toEqual([]);
112
+ });
113
+
114
+ it("handles empty state", () => {
115
+ const selector = combinePluginSelectors(
116
+ createPluginsByModuleSelector("urlScheme")
117
+ );
118
+
119
+ const result = selector({});
120
+
121
+ expect(result).toEqual([]);
122
+ });
123
+ });
124
+ });
@@ -0,0 +1,46 @@
1
+ import { get } from "lodash";
2
+
3
+ export type Selector<T> = (state: any) => T;
4
+
5
+ /**
6
+ * Creates a selector for filtering plugins by path
7
+ * @param path - Path to check in plugin. Can be a dot notation string or array
8
+ * @returns A selector function that returns matching plugins
9
+ */
10
+ export const createPluginsByPathSelector = (
11
+ path: string | string[]
12
+ ): Selector<any[]> => {
13
+ return (state: any) => {
14
+ const plugins = state.plugins || [];
15
+
16
+ return plugins.filter((plugin: any) => get(plugin, path));
17
+ };
18
+ };
19
+
20
+ /**
21
+ * Creates a selector for filtering plugins by module path
22
+ * @param modulePath - Module path to check in plugin (e.g., "urlScheme", "player")
23
+ * @returns A selector function that returns plugins with specified module
24
+ */
25
+ export const createPluginsByModuleSelector = (
26
+ modulePath: string
27
+ ): Selector<any[]> => {
28
+ return createPluginsByPathSelector(["module", modulePath]);
29
+ };
30
+
31
+ /**
32
+ * Creates a selector that combines multiple plugin selectors
33
+ * @param selectors - Array of plugin selectors to combine
34
+ * @returns A selector function that returns plugins matching all conditions
35
+ */
36
+ export const combinePluginSelectors = (
37
+ ...selectors: Selector<any[]>[]
38
+ ): Selector<any[]> => {
39
+ return (state: any) => {
40
+ return selectors.reduce((filtered, selector) => {
41
+ const selected = selector(state);
42
+
43
+ return filtered.filter((plugin) => selected.includes(plugin));
44
+ }, state.plugins || []);
45
+ };
46
+ };