refactor: pr feedback

searchspring · Sep 4, 2024 · 1bc890f · 1bc890f
1 parent bc5ade1
commit 1bc890f
Show file tree

Hide file tree

Showing 7 changed files with 55 additions and 59 deletions.
diff --git a/packages/snap-preact/src/Templates/SnapTemplate.tsx b/packages/snap-preact/src/Templates/SnapTemplate.tsx
@@ -97,7 +97,7 @@ export class SnapTemplates extends Snap {
 		const urlParams = url(window.location.href);
 		const editMode = Boolean(urlParams?.params?.query?.theme || cookies.get(THEME_EDIT_COOKIE));
 
-		const templatesStore = new TemplatesStore(config, { editMode });
+		const templatesStore = new TemplatesStore({ config, settings: { editMode } });
 
 		const snapConfig = createSnapConfig(config, templatesStore);
 

diff --git a/packages/snap-preact/src/Templates/Stores/TargetStore.test.ts b/packages/snap-preact/src/Templates/Stores/TargetStore.test.ts
@@ -16,10 +16,10 @@ describe('TargetStore', () => {
 	});
 
 	it('has expected defaults', () => {
-		const templateTarget = {
+		const target = {
 			component: '',
 		};
-		const store = new TargetStore({ templateTarget, dependencies, settings });
+		const store = new TargetStore({ target, dependencies, settings });
 		expect(store).toBeDefined();
 		expect(store.selector).toStrictEqual('');
 		expect(store.component).toStrictEqual('');
@@ -33,31 +33,31 @@ describe('TargetStore', () => {
 	});
 
 	it('can create a TargetStore', () => {
-		const templateTarget = {
+		const target = {
 			selector: '.test',
 			theme: 'customTheme',
 			component: 'Search',
 			resultComponent: 'CustomResult',
 		};
-		const store = new TargetStore({ templateTarget, dependencies, settings });
+		const store = new TargetStore({ target, dependencies, settings });
 		expect(store).toBeDefined();
-		expect(store.selector).toStrictEqual(templateTarget.selector);
-		expect(store.component).toStrictEqual(templateTarget.component);
-		expect(store.resultComponent).toStrictEqual(templateTarget.resultComponent);
+		expect(store.selector).toStrictEqual(target.selector);
+		expect(store.component).toStrictEqual(target.component);
+		expect(store.resultComponent).toStrictEqual(target.resultComponent);
 		expect(store.theme).toStrictEqual({
 			location: 'local',
-			name: templateTarget.theme,
+			name: target.theme,
 		});
 	});
 
 	it('can setComponent, setResultComponent, setTheme', () => {
-		const templateTarget = {
+		const target = {
 			selector: '.test',
 			theme: 'customTheme',
 			component: 'Search',
 			resultComponent: 'CustomResult',
 		};
-		const store = new TargetStore({ templateTarget, dependencies, settings });
+		const store = new TargetStore({ target, dependencies, settings });
 
 		expect(store.component).toStrictEqual('Search');
 		store.setComponent('NewSearch');

diff --git a/packages/snap-preact/src/Templates/Stores/TargetStore.ts b/packages/snap-preact/src/Templates/Stores/TargetStore.ts
@@ -4,7 +4,7 @@ import { TemplateTarget, type TemplatesStoreSettings, type TemplatesStoreDepende
 const GLOBAL_THEME_NAME = 'global';
 
 type TargetStoreConfig = {
-	templateTarget: TemplateTarget;
+	target: TemplateTarget;
 	dependencies: TemplatesStoreDependencies;
 	settings: TemplatesStoreSettings;
 };
@@ -19,15 +19,15 @@ export class TargetStore {
 	private dependencies: TemplatesStoreDependencies;
 
 	constructor(params: TargetStoreConfig) {
-		const { templateTarget, dependencies, settings } = params;
+		const { target, dependencies, settings } = params;
 		this.dependencies = dependencies;
-		this.selector = templateTarget.selector || '';
-		this.component = (settings.editMode && this.dependencies.storage.get(`templates.${this.selector}.component`)) || templateTarget.component;
+		this.selector = target.selector || '';
+		this.component = (settings.editMode && this.dependencies.storage.get(`templates.${this.selector}.component`)) || target.component;
 		this.resultComponent =
-			(settings.editMode && this.dependencies.storage.get(`templates.${this.selector}.resultComponent`)) || templateTarget.resultComponent;
+			(settings.editMode && this.dependencies.storage.get(`templates.${this.selector}.resultComponent`)) || target.resultComponent;
 		this.theme = (settings.editMode && this.dependencies.storage.get(`templates.${this.selector}.theme`)) || {
 			location: 'local',
-			name: templateTarget.theme || GLOBAL_THEME_NAME,
+			name: target.theme || GLOBAL_THEME_NAME,
 		};
 
 		makeObservable(this, {

diff --git a/packages/snap-preact/src/Templates/Stores/TemplateStore.ts b/packages/snap-preact/src/Templates/Stores/TemplateStore.ts
@@ -1,14 +1,13 @@
 import { observable, makeObservable } from 'mobx';
 import { StorageStore, StorageType } from '@searchspring/snap-store-mobx';
 import { SnapTemplatesConfig } from '../SnapTemplate';
-import { ThemeStore } from './ThemeStore';
+import { ThemeStore, ThemeStoreThemeConfig } from './ThemeStore';
 import { TargetStore } from './TargetStore';
 import { LibraryStore } from './LibraryStore';
 import { debounce } from '@searchspring/snap-toolbox';
 
-import type { ResultComponent, ThemeMinimal, ThemeOverrides, ThemePartial, ThemeVariablesPartial } from '../../../components/src';
+import type { ResultComponent, ThemeOverrides, ThemeVariablesPartial } from '../../../components/src';
 import type { GlobalThemeStyleScript } from '../../types';
-import type { Theme } from '../../../components/src';
 export type TemplateThemeTypes = 'library' | 'local';
 export type TemplateTypes = 'search' | 'autocomplete' | `recommendation/${RecsTemplateTypes}`;
 export type TemplateCustomComponentTypes = 'result' | 'badge';
@@ -61,6 +60,12 @@ export type TemplateStoreConfig = {
 };
 
 const RESIZE_DEBOUNCE = 100;
+
+type TemplatesStoreConfig = {
+	config: TemplateStoreConfig;
+	settings?: TemplatesStoreSettings;
+};
+
 export class TemplatesStore {
 	loading = false;
 	config: SnapTemplatesConfig;
@@ -91,7 +96,8 @@ export class TemplatesStore {
 
 	window: WindowProperties = { innerWidth: 0 };
 
-	constructor(config: TemplateStoreConfig, settings?: TemplatesStoreSettings) {
+	constructor(params: TemplatesStoreConfig) {
+		const { config, settings } = params || {};
 		this.config = config;
 		this.storage = new StorageStore({ type: StorageType.local, key: 'ss-templates' });
 
@@ -173,8 +179,8 @@ export class TemplatesStore {
 		});
 	}
 
-	public addTarget(type: TemplateTypes, templateTarget: TemplateTarget): string | undefined {
-		const targetId = templateTarget.selector || templateTarget.component;
+	public addTarget(type: TemplateTypes, target: TemplateTarget): string | undefined {
+		const targetId = target.selector || target.component;
 		if (targetId) {
 			const path = type.split('/');
 			let targetPath: any = this.targets;
@@ -185,7 +191,7 @@ export class TemplatesStore {
 				targetPath = targetPath[path[index]];
 			}
 			(targetPath as TargetMap)[targetId] = new TargetStore({
-				templateTarget,
+				target,
 				dependencies: this.dependencies,
 				settings: this.settings,
 			});
@@ -212,17 +218,7 @@ export class TemplatesStore {
 		return targetPath;
 	}
 
-	public addTheme(config: {
-		name: string;
-		type: TemplateThemeTypes;
-		base: Theme;
-		overrides?: ThemePartial;
-		variables?: ThemeVariablesPartial;
-		currency: ThemeMinimal;
-		language: ThemeMinimal;
-		innerWidth?: number;
-		style?: GlobalThemeStyleScript;
-	}) {
+	public addTheme(config: ThemeStoreThemeConfig) {
 		const theme = new ThemeStore({
 			config,
 			dependencies: this.dependencies,

diff --git a/packages/snap-preact/src/Templates/Stores/TemplatesStore.test.ts b/packages/snap-preact/src/Templates/Stores/TemplatesStore.test.ts
@@ -10,7 +10,7 @@ describe('TemplateStore', () => {
 				},
 			},
 		};
-		const store = new TemplatesStore(config, { editMode: true });
+		const store = new TemplatesStore({ config, settings: { editMode: true } });
 		expect(store).toBeDefined();
 		expect(store.loading).toBe(false);
 		expect(store.config).toBe(config);
@@ -33,7 +33,7 @@ describe('TemplateStore', () => {
 				language: 'fr',
 			},
 		};
-		const store = new TemplatesStore(config);
+		const store = new TemplatesStore({ config });
 		expect(store.config).toBe(config);
 		expect(store.language).toBe(config.config?.language);
 		expect(store.currency).toBe(config.config?.currency);
@@ -52,7 +52,7 @@ describe('TemplateStore', () => {
 				language: 'dne',
 			},
 		};
-		const store = new TemplatesStore(config);
+		const store = new TemplatesStore({ config });
 		expect(store.config).toBe(config);
 		expect(store.language).toBe('en');
 		expect(store.currency).toBe('usd');
@@ -69,7 +69,7 @@ describe('TemplateStore', () => {
 				siteId: '8uyt2m',
 			},
 		};
-		const store = new TemplatesStore(config);
+		const store = new TemplatesStore({ config });
 		expect(store.language).toBe('en');
 		expect(store.currency).toBe('usd');
 
@@ -91,7 +91,7 @@ describe('TemplateStore', () => {
 				siteId: '8uyt2m',
 			},
 		};
-		const store = new TemplatesStore(config);
+		const store = new TemplatesStore({ config });
 		expect(store.window.innerWidth).toBe(global.window.innerWidth);
 
 		const width = 1000;
@@ -110,7 +110,7 @@ describe('TemplateStore', () => {
 				},
 			},
 		};
-		const store = new TemplatesStore(config);
+		const store = new TemplatesStore({ config });
 
 		// addTheme from config
 		const spy = jest.spyOn(store, 'addTheme');
@@ -161,17 +161,17 @@ describe('TemplateStore', () => {
 				},
 			},
 		};
-		const store = new TemplatesStore(config);
+		const store = new TemplatesStore({ config });
 		const type = 'search';
-		const templateTarget = {
+		const target = {
 			selector: '.test',
 			theme: 'global',
 			component: 'Search',
 			resultComponent: 'Result',
 		};
-		const targetId = store.addTarget(type, templateTarget);
+		const targetId = store.addTarget(type, target);
 		expect(targetId).toBeDefined();
-		expect([templateTarget.selector, templateTarget.component]).toContain(targetId);
+		expect([target.selector, target.component]).toContain(targetId);
 		expect(store.targets[type][targetId!]).toBeDefined();
 		expect(store.getTarget(type, targetId!)).toBe(store.targets[type][targetId!]);
 	});

diff --git a/packages/snap-preact/src/Templates/Stores/ThemeStore.test.ts b/packages/snap-preact/src/Templates/Stores/ThemeStore.test.ts
@@ -2,7 +2,7 @@ import { configure as configureMobx } from 'mobx';
 import '@testing-library/jest-dom';
 import { waitFor } from '@testing-library/preact';
 
-import { ThemeStore, ThemeConfig, mergeThemeLayers } from './ThemeStore';
+import { ThemeStore, ThemeStoreThemeConfig, mergeThemeLayers } from './ThemeStore';
 import { StorageStore } from '@searchspring/snap-store-mobx';
 import type { TemplatesStoreDependencies, TemplateThemeTypes, TemplatesStoreSettings } from './TemplateStore';
 import type { Theme, ThemeVariables, ThemePartial } from '../../../components/src/providers/theme';
@@ -111,7 +111,7 @@ describe('ThemeStore', () => {
 	});
 
 	it('has expected defaults and can invoke methods', () => {
-		const config: ThemeConfig = {
+		const config: ThemeStoreThemeConfig = {
 			name: 'global',
 			type: 'local',
 			base: {
@@ -187,7 +187,7 @@ describe('ThemeStore', () => {
 	});
 
 	it('can get theme', () => {
-		const config: ThemeConfig = {
+		const config: ThemeStoreThemeConfig = {
 			name: 'global',
 			type: 'local',
 			base: testTheme,
@@ -215,7 +215,7 @@ describe('ThemeStore', () => {
 	});
 
 	it('can get theme with overrides applied', () => {
-		const config: ThemeConfig = {
+		const config: ThemeStoreThemeConfig = {
 			name: 'global',
 			type: 'local',
 			base: testTheme,
@@ -246,7 +246,7 @@ describe('ThemeStore', () => {
 	});
 
 	it('can get theme with overrides and variables applied', () => {
-		const config: ThemeConfig = {
+		const config: ThemeStoreThemeConfig = {
 			name: 'global',
 			type: 'local',
 			base: testTheme,
@@ -301,7 +301,7 @@ describe('ThemeStore', () => {
 	});
 
 	it('can get theme with currency and language applied', () => {
-		const config: ThemeConfig = {
+		const config: ThemeStoreThemeConfig = {
 			name: 'global',
 			type: 'local',
 			base: testTheme,
@@ -371,7 +371,7 @@ describe('ThemeStore', () => {
 		const bpIndex = 0; // simulate being at first breakpoint
 		expect(testTheme.variables?.breakpoints[bpIndex]).toBe(0);
 
-		const config: ThemeConfig = {
+		const config: ThemeStoreThemeConfig = {
 			name: 'global',
 			type: 'local',
 			base: testTheme,
@@ -414,7 +414,7 @@ describe('ThemeStore', () => {
 		const bpIndex = 3;
 		expect(testTheme.variables?.breakpoints[bpIndex]).toBeGreaterThan(0);
 
-		const config: ThemeConfig = {
+		const config: ThemeStoreThemeConfig = {
 			name: 'global',
 			type: 'local',
 			base: testTheme,
@@ -455,7 +455,7 @@ describe('ThemeStore', () => {
 		const bpIndex = 0; // simulate being at first breakpoint
 		expect(testTheme.variables?.breakpoints[bpIndex]).toBe(0);
 
-		const config: ThemeConfig = {
+		const config: ThemeStoreThemeConfig = {
 			name: 'global',
 			type: 'local',
 			base: testTheme,
@@ -516,7 +516,7 @@ describe('ThemeStore', () => {
 		const bpIndex = 0; // simulate being at first breakpoint
 		expect(testTheme.variables?.breakpoints[bpIndex]).toBe(0);
 
-		const config: ThemeConfig = {
+		const config: ThemeStoreThemeConfig = {
 			name: 'global',
 			type: 'local',
 			base: testTheme,
@@ -589,7 +589,7 @@ describe('ThemeStore', () => {
 
 	it('can select layoutOption', () => {
 		const bpIndex = 0;
-		const config: ThemeConfig = {
+		const config: ThemeStoreThemeConfig = {
 			name: 'global',
 			type: 'local',
 			base: testTheme,
@@ -644,7 +644,7 @@ describe('ThemeStore', () => {
 	});
 
 	it('adds a style sheet to the page when a style is provided', async () => {
-		const config: ThemeConfig = {
+		const config: ThemeStoreThemeConfig = {
 			name: 'globally',
 			type: 'local',
 			base: testTheme,

diff --git a/packages/snap-preact/src/Templates/Stores/ThemeStore.tsx b/packages/snap-preact/src/Templates/Stores/ThemeStore.tsx
@@ -12,7 +12,7 @@ import type { GlobalThemeStyleScript } from '../../types';
 import type { ListOption } from '../../../components/src/types';
 import { observer } from 'mobx-react';
 
-export type ThemeConfig = {
+export type ThemeStoreThemeConfig = {
 	name: string;
 	type: TemplateThemeTypes;
 	base: Theme;
@@ -48,7 +48,7 @@ class SelectedLayout {
 }
 
 type ThemeStoreConfig = {
-	config: ThemeConfig;
+	config: ThemeStoreThemeConfig;
 	dependencies: TemplatesStoreDependencies;
 	settings: TemplatesStoreSettings;
 };