@athoscommerce/snap-preact 1.0.0

package/dist/esm/src/Templates/SnapTemplates.d.ts

@@ -0,0 +1,76 @@
+import { Snap } from '../Snap';
+import { TemplatesStore } from './Stores/TemplateStore';
+import { type SearchStoreConfigSettings, type AutocompleteStoreConfigSettings } from '@athoscommerce/snap-store-mobx';
+import type { UrlTranslatorConfig } from '@athoscommerce/snap-url-manager';
+import type { RecommendationInstantiatorConfigSettings, RecommendationComponentObject } from '../Instantiators/RecommendationInstantiator';
+import type { SnapFeatures } from '../types';
+import type { SnapConfig, ExtendedTarget } from '../Snap';
+import type { PluginsConfigs, TemplateStoreConfigConfig } from './Stores/TemplateStore';
+import { LibraryImports } from './Stores/LibraryStore';
+export declare const TEMPLATE_EDIT_COOKIE = "athosEditor";
+export type SearchTargetConfig = {
+    selector: string;
+    component: keyof LibraryImports['component']['search'];
+    resultComponent?: keyof LibraryImports['component']['result'] | (string & NonNullable<unknown>);
+};
+export type AutocompleteTargetConfig = {
+    selector: string;
+    inputSelector?: string;
+    component: keyof LibraryImports['component']['autocomplete'];
+    resultComponent?: keyof LibraryImports['component']['result'] | (string & NonNullable<unknown>);
+};
+export type RecommendationDefaultTargetConfig = {
+    component: keyof LibraryImports['component']['recommendation']['default'];
+    resultComponent?: keyof LibraryImports['component']['result'] | (string & NonNullable<unknown>);
+};
+export type RecommendationEmailTargetConfig = {
+    component: keyof LibraryImports['component']['recommendation']['email'];
+    resultComponent?: keyof LibraryImports['component']['result'] | (string & NonNullable<unknown>);
+};
+export type RecommendationBundleTargetConfig = {
+    component: keyof LibraryImports['component']['recommendation']['bundle'];
+    resultComponent?: keyof LibraryImports['component']['result'] | (string & NonNullable<unknown>);
+};
+export type SnapTemplatesConfig = TemplateStoreConfigConfig & {
+    url?: UrlTranslatorConfig;
+    features?: SnapFeatures;
+    search?: {
+        targets: SearchTargetConfig[];
+        settings?: SearchStoreConfigSettings;
+        plugins?: PluginsConfigs;
+    };
+    autocomplete?: {
+        targets: AutocompleteTargetConfig[];
+        settings?: AutocompleteStoreConfigSettings;
+        plugins?: PluginsConfigs;
+    };
+    recommendation?: {
+        email?: {
+            [profileComponentName: string]: RecommendationEmailTargetConfig;
+        };
+        default?: {
+            [profileComponentName: string]: RecommendationDefaultTargetConfig;
+        };
+        bundle?: {
+            [profileComponentName: string]: RecommendationBundleTargetConfig;
+        };
+        settings?: RecommendationInstantiatorConfigSettings;
+        plugins?: PluginsConfigs;
+    };
+};
+export declare const DEFAULT_FEATURES: SnapFeatures;
+export declare const DEFAULT_AUTOCOMPLETE_CONTROLLER_SETTINGS: AutocompleteStoreConfigSettings;
+export declare class SnapTemplates extends Snap {
+    templates: TemplatesStore;
+    constructor(config: SnapTemplatesConfig);
+}
+export declare function mapBreakpoints<ControllerConfigSettings>(breakpointsKeys: number[], breakpointSettings: ControllerConfigSettings[]): {
+    [key: string]: ControllerConfigSettings | Record<string, never>;
+};
+export declare const createSearchTargeters: (templateConfig: SnapTemplatesConfig, templatesStore: TemplatesStore) => ExtendedTarget[];
+export declare function createAutocompleteTargeters(templateConfig: SnapTemplatesConfig, templatesStore: TemplatesStore): ExtendedTarget[];
+export declare function createRecommendationComponentMapping(templateConfig: SnapTemplatesConfig, templatesStore: TemplatesStore): {
+    [name: string]: RecommendationComponentObject;
+};
+export declare function createSnapConfig(templateConfig: SnapTemplatesConfig, templatesStore: TemplatesStore): SnapConfig;
+//# sourceMappingURL=SnapTemplates.d.ts.map

package/dist/esm/src/Templates/SnapTemplates.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SnapTemplates.d.ts","sourceRoot":"","sources":["../../../../src/Templates/SnapTemplates.tsx"],"names":[],"mappings":"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"}

package/dist/esm/src/Templates/SnapTemplates.js

@@ -0,0 +1,388 @@
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+import { render } from 'preact';
+import deepmerge from 'deepmerge';
+import { Snap } from '../Snap';
+import { TemplateSelect } from '../../components/src/components/Atoms/TemplateSelect';
+import { DomTargeter, url, cookies, getContext, version } from '@athoscommerce/snap-toolbox';
+import { TemplatesStore } from './Stores/TemplateStore';
+export const TEMPLATE_EDIT_COOKIE = 'athosEditor';
+const TEMPLATE_EDITOR_PARAM = 'athos-editor';
+export const DEFAULT_FEATURES = {};
+export const DEFAULT_AUTOCOMPLETE_CONTROLLER_SETTINGS = {
+    trending: {
+        limit: 5,
+    },
+};
+export class SnapTemplates extends Snap {
+    constructor(config) {
+        const urlParams = url(window.location.href);
+        const editMode = Boolean((urlParams?.params?.query && TEMPLATE_EDITOR_PARAM in urlParams.params.query) || cookies.get(TEMPLATE_EDIT_COOKIE));
+        const templatesStore = new TemplatesStore({ config, settings: { editMode } });
+        const snapConfig = createSnapConfig(config, templatesStore);
+        // get more context (all the things needed for the platform of choice as well as generic backgroundFilters)
+        let contextParams = ['backgroundFilters'];
+        switch (templatesStore.platform) {
+            case 'shopify':
+                contextParams = contextParams.concat(['collection', 'tags']);
+                break;
+            case 'bigCommerce':
+                contextParams = contextParams.concat(['category', 'brand']);
+                break;
+            case 'magento2':
+                contextParams = contextParams.concat(['category']);
+                break;
+            default:
+                break;
+        }
+        snapConfig.context = getContext(contextParams);
+        super(snapConfig, { templatesStore });
+        this.templates = templatesStore;
+        if (editMode) {
+            cookies.set(TEMPLATE_EDIT_COOKIE, 'true');
+            setTimeout(async () => {
+                // preload the library
+                await templatesStore.preLoad();
+                new DomTargeter([
+                    {
+                        selector: 'body',
+                        inject: {
+                            action: 'append',
+                            element: () => {
+                                const themeEditContainer = document.createElement('div');
+                                themeEditContainer.id = 'athos-template-editor';
+                                return themeEditContainer;
+                            },
+                        },
+                    },
+                ], async (target, elem) => {
+                    try {
+                        const TemplateEditor = (await import('../../components/src')).TemplatesEditor;
+                        const TemplateEditorStore = (await import('./Stores/TemplateEditor/TemplateEditorStore')).TemplateEditorStore;
+                        const templateEditorStore = new TemplateEditorStore({ templatesStore });
+                        const searchController = this.controllers['search'];
+                        const autocompleteController = this.controllers['autocomplete'];
+                        if (searchController) {
+                            templateEditorStore.registerController(searchController);
+                        }
+                        if (autocompleteController) {
+                            templateEditorStore.registerController(autocompleteController);
+                        }
+                        render(_jsx(TemplateEditor, { templatesStore: templatesStore, editorStore: templateEditorStore, snap: this, onRemoveClick: () => {
+                                cookies.unset(TEMPLATE_EDIT_COOKIE);
+                                const urlState = url(window.location.href);
+                                delete urlState?.params.query[TEMPLATE_EDITOR_PARAM];
+                                const newUrl = urlState?.url();
+                                if (newUrl && newUrl != window.location.href) {
+                                    window.location.href = newUrl;
+                                }
+                                else {
+                                    window.location.reload();
+                                }
+                            } }), elem);
+                    }
+                    catch (error) {
+                        console.error('Error rendering TemplateEditor:', error);
+                    }
+                });
+            });
+        }
+    }
+}
+export function mapBreakpoints(breakpointsKeys, breakpointSettings) {
+    return breakpointsKeys.reduce((mapping, width, index) => {
+        mapping[width.toString()] = breakpointSettings[index] || {};
+        return mapping;
+    }, {});
+}
+export const createSearchTargeters = (templateConfig, templatesStore) => {
+    const targets = templateConfig.search?.targets || [];
+    return targets.map((target) => {
+        // use theme provided resultComponent if specified
+        if (!target.resultComponent && templateConfig.theme.resultComponent) {
+            target.resultComponent = templateConfig.theme.resultComponent;
+        }
+        const targetId = templatesStore.addTarget('search', target);
+        const targeter = {
+            selector: target.selector,
+            hideTarget: true,
+            component: async () => {
+                const componentImportPromises = [];
+                componentImportPromises.push(templatesStore.library.import.component.search[target.component]());
+                if (target.resultComponent && templatesStore.library.import.component.result[target.resultComponent]) {
+                    componentImportPromises.push(templatesStore.library.import.component.result[target.resultComponent]());
+                }
+                await Promise.all(componentImportPromises);
+                return TemplateSelect;
+            },
+            props: { type: 'search', templatesStore, targetId },
+        };
+        return targeter;
+    });
+};
+export function createAutocompleteTargeters(templateConfig, templatesStore) {
+    const targets = templateConfig.autocomplete?.targets || [];
+    return targets.map((target) => {
+        // use theme provided resultComponent if specified
+        if (!target.resultComponent && templateConfig.theme.resultComponent) {
+            target.resultComponent = templateConfig.theme.resultComponent;
+        }
+        const targetId = templatesStore.addTarget('autocomplete', target);
+        const targeter = {
+            selector: target.selector,
+            component: async () => {
+                const componentImportPromises = [];
+                componentImportPromises.push(templatesStore.library.import.component.autocomplete[target.component]());
+                if (target.resultComponent && templatesStore.library.import.component.result[target.resultComponent]) {
+                    componentImportPromises.push(templatesStore.library.import.component.result[target.resultComponent]());
+                }
+                await Promise.all(componentImportPromises);
+                return TemplateSelect;
+            },
+            props: { type: 'autocomplete', templatesStore, targetId },
+            hideTarget: true,
+        };
+        if (target.inputSelector)
+            targeter.props.input = target.inputSelector;
+        return targeter;
+    });
+}
+export function createRecommendationComponentMapping(templateConfig, templatesStore) {
+    // TODO: throw a warning if keys match inside each recommendation type
+    return Object.keys(templateConfig.recommendation || {})
+        .filter((key) => ['default', 'email', 'bundle'].includes(key))
+        .reduce((mapping, type) => {
+        const recsType = type;
+        Object.keys(templateConfig.recommendation[recsType] || {}).forEach((targetName) => {
+            const type = `recommendation/${recsType}`;
+            const target = templateConfig.recommendation[recsType][targetName];
+            // use theme provided resultComponent if specified
+            if (!target.resultComponent && templateConfig.theme.resultComponent) {
+                target.resultComponent = templateConfig.theme.resultComponent;
+            }
+            const mappedConfig = {
+                component: async () => {
+                    const componentImportPromises = [];
+                    switch (recsType) {
+                        case 'default': {
+                            const importLocation = templatesStore.library.import.component.recommendation.default;
+                            componentImportPromises.push(importLocation[target.component]());
+                            break;
+                        }
+                        case 'bundle': {
+                            const importLocation = templatesStore.library.import.component.recommendation.bundle;
+                            componentImportPromises.push(importLocation[target.component]());
+                            break;
+                        }
+                        case 'email': {
+                            const importLocation = templatesStore.library.import.component.recommendation.email;
+                            componentImportPromises.push(importLocation[target.component]());
+                            break;
+                        }
+                    }
+                    if (target.resultComponent && templatesStore.library.import.component.result[target.resultComponent]) {
+                        componentImportPromises.push(templatesStore.library.import.component.result[target.resultComponent]());
+                    }
+                    await Promise.all(componentImportPromises);
+                    return TemplateSelect;
+                },
+                props: { type, templatesStore },
+                onTarget: function (domTarget, elem, injectedElem, controller) {
+                    target.selector = `#${controller.id}`;
+                    const targetId = templatesStore.addTarget(type, target);
+                    this.props = this.props || {};
+                    this.props.targetId = targetId;
+                },
+            };
+            mapping[targetName] = mappedConfig;
+        });
+        return mapping;
+    }, {});
+}
+export function createSnapConfig(templateConfig, templatesStore) {
+    const snapConfig = {
+        features: templateConfig.features || DEFAULT_FEATURES,
+        client: {
+            globals: {
+                siteId: templateConfig.config?.siteId,
+            },
+            config: {
+                ...(templateConfig.config?.client || {}),
+                initiator: `snap/templates/${version}`,
+            },
+        },
+        tracker: {
+            config: {
+                framework: 'snap/templates',
+            },
+        },
+        instantiators: {},
+        controllers: {},
+    };
+    // add url configuration if specified
+    if (templateConfig.url) {
+        snapConfig.url = templateConfig.url;
+    }
+    /* SEARCH CONTROLLER */
+    if (templateConfig.search && snapConfig.controllers) {
+        const searchControllerConfig = {
+            config: {
+                id: 'search',
+                plugins: createPlugins(templateConfig, templatesStore, 'search'),
+                settings: templateConfig.search.settings || {},
+            },
+            targeters: createSearchTargeters(templateConfig, templatesStore),
+        };
+        // merge the responsive settings if there are any
+        // if (templateConfig.config.theme.variables?.breakpoints && templateConfig.search.breakpointSettings) {
+        // 	const mappedBreakpoints = mapBreakpoints(templateConfig.config.theme.variables.breakpoints, templateConfig.search.breakpointSettings || []);
+        // 	const breakpointSettings = getDisplaySettings(mappedBreakpoints) as SearchStoreConfigSettings;
+        // 	searchControllerConfig.config.settings = deepmerge(searchControllerConfig.config.settings, breakpointSettings);
+        // }
+        snapConfig.controllers.search = [searchControllerConfig];
+    }
+    /* AUTOCOMPLETE CONTROLLER */
+    if (templateConfig.autocomplete && snapConfig.controllers) {
+        const autocompleteControllerSettings = deepmerge(DEFAULT_AUTOCOMPLETE_CONTROLLER_SETTINGS, templateConfig.autocomplete.settings || {});
+        const autocompleteControllerConfig = {
+            config: {
+                id: 'autocomplete',
+                plugins: createPlugins(templateConfig, templatesStore, 'autocomplete'),
+                selector: templateConfig.autocomplete.targets.map((target) => target.inputSelector || target.selector).join(', '),
+                settings: autocompleteControllerSettings,
+            },
+            targeters: createAutocompleteTargeters(templateConfig, templatesStore),
+        };
+        // merge the responsive settings if there are any
+        // if (templateConfig.config.theme.variables?.breakpoints && templateConfig.autocomplete.breakpointSettings) {
+        // 	const mappedBreakpoints = mapBreakpoints(
+        // 		templateConfig.config.theme.variables.breakpoints,
+        // 		templateConfig.autocomplete.breakpointSettings || []
+        // 	);
+        // 	const breakpointSettings = getDisplaySettings(mappedBreakpoints) as AutocompleteStoreConfigSettings;
+        // 	autocompleteControllerConfig.config.settings = deepmerge(autocompleteControllerConfig.config.settings, breakpointSettings);
+        // }
+        snapConfig.controllers.autocomplete = [autocompleteControllerConfig];
+    }
+    /* RECOMMENDATION INSTANTIATOR */
+    const originalRecsConfig = templateConfig.recommendation || {};
+    templateConfig.recommendation = deepmerge({
+        settings: {
+            branch: 'production',
+        },
+        bundle: {
+            SnapTemplatesBundleDefault: {
+                component: 'RecommendationBundle',
+            },
+            SnapTemplatesBundleEasyAdd: {
+                component: 'RecommendationBundleEasyAdd',
+            },
+            SnapTemplatesBundleList: {
+                component: 'RecommendationBundleList',
+            },
+            SnapTemplatesBundleVertical: {
+                component: 'RecommendationBundleVertical',
+            },
+        },
+        default: {
+            SnapTemplatesRecommendationCarousel: {
+                component: 'Recommendation',
+            },
+            SnapTemplatesRecommendationGrid: {
+                component: 'RecommendationGrid',
+            },
+        },
+        email: {
+            SnapTemplatesEmailDefault: {
+                component: 'RecommendationEmail',
+            },
+        },
+    }, originalRecsConfig);
+    if (templateConfig.recommendation && snapConfig.instantiators) {
+        const recommendationInstantiatorConfig = {
+            components: createRecommendationComponentMapping(templateConfig, templatesStore),
+            config: {
+                plugins: createPlugins(templateConfig, templatesStore, 'recommendation'),
+                ...templateConfig.recommendation?.settings,
+            },
+        };
+        // merge the responsive settings if there are any
+        // if (templateConfig.config.theme.variables?.breakpoints && templateConfig.recommendation.breakpointSettings) {
+        // 	const mappedBreakpoints = mapBreakpoints(
+        // 		templateConfig.config.theme.variables.breakpoints,
+        // 		templateConfig.recommendation.breakpointSettings || []
+        // 	);
+        // 	const breakpointSettings = getDisplaySettings(mappedBreakpoints);
+        // 	recommendationInstantiatorConfig.config = deepmerge(recommendationInstantiatorConfig.config, breakpointSettings);
+        // }
+        snapConfig.instantiators.recommendation = recommendationInstantiatorConfig;
+    }
+    return snapConfig;
+}
+// TODO: DRY up and support dynamic imports
+function createPlugins(templateConfig, templatesStore, controllerType) {
+    const plugins = [];
+    let controllerConfig;
+    if (controllerType) {
+        controllerConfig = templateConfig[controllerType] || {};
+    }
+    plugins.push([
+        templatesStore.library.import.plugins.common.backgroundFilters,
+        deepmerge(templateConfig.plugins?.common?.backgroundFilters || {}, controllerConfig?.plugins?.common?.backgroundFilters || {}),
+    ]);
+    plugins.push([
+        templatesStore.library.import.plugins.common.scrollToTop,
+        deepmerge(templateConfig.plugins?.common?.scrollToTop || {}, controllerConfig?.plugins?.common?.scrollToTop || {}),
+    ]);
+    plugins.push([
+        templatesStore.library.import.plugins.common.logger,
+        deepmerge(templateConfig.plugins?.common?.logger || {}, controllerConfig?.plugins?.common?.logger || {}),
+    ]);
+    switch (templatesStore.platform) {
+        case 'shopify':
+            plugins.push([
+                templatesStore.library.import.plugins.shopify.backgroundFilters,
+                deepmerge(templateConfig.plugins?.shopify?.backgroundFilters || {}, controllerConfig?.plugins?.shopify?.backgroundFilters || {}),
+            ]);
+            plugins.push([
+                templatesStore.library.import.plugins.shopify.mutateResults,
+                deepmerge(templateConfig.plugins?.shopify?.mutateResults || {}, controllerConfig?.plugins?.shopify?.mutateResults || {}),
+            ]);
+            plugins.push([
+                templatesStore.library.import.plugins.shopify.addToCart,
+                deepmerge(templateConfig.plugins?.shopify?.addToCart || {}, controllerConfig?.plugins?.shopify?.addToCart || {}),
+            ]);
+            break;
+        case 'bigCommerce':
+            plugins.push([
+                templatesStore.library.import.plugins.bigcommerce.backgroundFilters,
+                deepmerge(templateConfig.plugins?.bigCommerce?.backgroundFilters || {}, controllerConfig?.plugins?.bigCommerce?.backgroundFilters || {}),
+            ]);
+            plugins.push([
+                templatesStore.library.import.plugins.bigcommerce.addToCart,
+                deepmerge(templateConfig.plugins?.bigCommerce?.addToCart || {}, controllerConfig?.plugins?.bigCommerce?.addToCart || {}),
+            ]);
+            break;
+        case 'magento2':
+            plugins.push([
+                templatesStore.library.import.plugins.magento2.base,
+                deepmerge(templateConfig.plugins?.magento2?.base || {}, controllerConfig?.plugins?.magento2?.base || {}),
+            ]);
+            plugins.push([
+                templatesStore.library.import.plugins.magento2.backgroundFilters,
+                deepmerge(templateConfig.plugins?.magento2?.backgroundFilters || {}, controllerConfig?.plugins?.magento2?.backgroundFilters || {}),
+            ]);
+            plugins.push([
+                templatesStore.library.import.plugins.magento2.addToCart,
+                deepmerge(templateConfig.plugins?.magento2?.addToCart || {}, controllerConfig?.plugins?.magento2?.addToCart || {}),
+            ]);
+            break;
+        case 'other':
+            plugins.push([
+                templatesStore.library.import.plugins.common.addToCart,
+                deepmerge(templateConfig.plugins?.common?.addToCart || {}, controllerConfig?.plugins?.common?.addToCart || {}),
+            ]);
+        default:
+            break;
+    }
+    return plugins;
+}

package/dist/esm/src/Templates/Stores/LibraryStore.d.ts

@@ -0,0 +1,121 @@
+import type { JSXComponent, ThemeComplete, ThemeMinimal } from '../../../components/src';
+import { type TemplateCustomComponentTypes, type TemplateTypes } from './TemplateStore';
+import type { TemplateStoreComponentConfig } from './TemplateStore';
+import type { PluginFunction } from '@athoscommerce/snap-controller';
+import { pluginBackgroundFilters as shopifyPluginBackgroundFilters } from './library/plugins/shopify/pluginBackgroundFilters';
+import { pluginMutateResults as shopifyPluginMutateResults } from './library/plugins/shopify/pluginMutateResults';
+import { pluginAddToCart as shopifyPluginAddToCart } from './library/plugins/shopify/pluginAddToCart';
+import { pluginAddToCart as bigCommercePluginAddToCart } from './library/plugins/bigCommerce/pluginAddToCart';
+import { pluginAddToCart as magento2PluginAddToCart } from './library/plugins/magento2/pluginAddToCart';
+import { pluginAddToCart as commonPluginAddToCart } from './library/plugins/common/pluginAddToCart';
+import { pluginBase as magento2PluginBase } from './library/plugins/magento2/pluginBase';
+import { pluginBackgroundFilters } from './library/plugins/common/pluginBackgroundFilters';
+import { pluginScrollToTop } from './library/plugins/common/pluginScrollToTop';
+import { pluginLogger } from './library/plugins/common/pluginLogger';
+type LibraryComponentMap = {
+    [componentName: string]: JSXComponent;
+};
+export type LibraryImports = {
+    theme: {
+        base: (args?: any) => Promise<ThemeComplete>;
+        pike: (args?: any) => Promise<ThemeComplete>;
+    };
+    plugins: {
+        shopify: {
+            backgroundFilters: typeof shopifyPluginBackgroundFilters;
+            mutateResults: typeof shopifyPluginMutateResults;
+            addToCart: typeof shopifyPluginAddToCart;
+        };
+        bigcommerce: {
+            backgroundFilters: PluginFunction;
+            addToCart: typeof bigCommercePluginAddToCart;
+        };
+        magento2: {
+            base: typeof magento2PluginBase;
+            backgroundFilters: PluginFunction;
+            addToCart: typeof magento2PluginAddToCart;
+        };
+        common: {
+            backgroundFilters: typeof pluginBackgroundFilters;
+            scrollToTop: typeof pluginScrollToTop;
+            logger: typeof pluginLogger;
+            addToCart: typeof commonPluginAddToCart;
+        };
+    };
+    component: {
+        search: {
+            Search: (args?: any) => Promise<JSXComponent>;
+            SearchCollapsible: (args?: any) => Promise<JSXComponent>;
+            SearchHorizontal: (args?: any) => Promise<JSXComponent>;
+        };
+        autocomplete: {
+            AutocompleteFixed: (args?: any) => Promise<JSXComponent>;
+            AutocompleteModal: (args?: any) => Promise<JSXComponent>;
+            AutocompleteSlideout: (args?: any) => Promise<JSXComponent>;
+        };
+        recommendation: {
+            bundle: {
+                RecommendationBundle: (args?: any) => Promise<JSXComponent>;
+                RecommendationBundleEasyAdd: (args?: any) => Promise<JSXComponent>;
+                RecommendationBundleList: (args?: any) => Promise<JSXComponent>;
+                RecommendationBundleVertical: (args?: any) => Promise<JSXComponent>;
+            };
+            default: {
+                Recommendation: (args?: any) => Promise<JSXComponent>;
+                RecommendationGrid: (args?: any) => Promise<JSXComponent>;
+            };
+            email: {
+                RecommendationEmail: (args?: any) => Promise<JSXComponent>;
+            };
+        };
+        badge: {
+            [componentName: string]: (args?: any) => Promise<JSXComponent>;
+        };
+        result: {
+            Result: (args?: any) => Promise<JSXComponent>;
+            [componentName: string]: (args?: any) => Promise<JSXComponent>;
+        };
+    };
+    language: {
+        [languageName in LanguageCodes]: () => Promise<ThemeMinimal>;
+    };
+    currency: {
+        [currencyName in CurrencyCodes]: () => Promise<ThemeMinimal>;
+    };
+};
+type LibraryStoreConfig = {
+    components?: TemplateStoreComponentConfig;
+};
+export type CurrencyCodes = 'usd' | 'eur' | 'aud';
+export type LanguageCodes = 'en' | 'fr' | 'es';
+export declare class LibraryStore {
+    themes: {
+        [themeName: string]: ThemeComplete;
+    };
+    components: {
+        search: LibraryComponentMap;
+        autocomplete: LibraryComponentMap;
+        recommendation: {
+            bundle: LibraryComponentMap;
+            default: LibraryComponentMap;
+            email: LibraryComponentMap;
+        };
+        badge: LibraryComponentMap;
+        result: LibraryComponentMap;
+    };
+    locales: {
+        currencies: {
+            [currencyName in CurrencyCodes]?: ThemeMinimal;
+        };
+        languages: {
+            [languageName in LanguageCodes]?: ThemeMinimal;
+        };
+    };
+    import: LibraryImports;
+    constructor(params?: LibraryStoreConfig);
+    getComponent(type: TemplateTypes, name: string): JSXComponent | undefined;
+    addComponentImport(type: TemplateCustomComponentTypes, name: string, componentFn: (args?: any) => Promise<JSXComponent> | JSXComponent): Promise<void>;
+    preLoad(): Promise<any[]>;
+}
+export {};
+//# sourceMappingURL=LibraryStore.d.ts.map

package/dist/esm/src/Templates/Stores/LibraryStore.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LibraryStore.d.ts","sourceRoot":"","sources":["../../../../../src/Templates/Stores/LibraryStore.ts"],"names":[],"mappings":"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"}