@searchspring/snap-preact-components 0.40.0 → 0.41.0

package/dist/esm/components/Trackers/Recommendation/ProfileTracker/RecommendationProfileTracker.js

@@ -0,0 +1,40 @@
+/** @jsx jsx */
+import { Fragment, toChildArray } from 'preact';
+import { jsx, css } from '@emotion/react';
+import { useRef } from 'preact/hooks';
+import { observer } from 'mobx-react-lite';
+import { useTheme } from '../../../../providers';
+import { useIntersection } from '../../../../hooks';
+import classnames from 'classnames';
+const CSS = {
+    RecommendationProfileTracker: () => css({}),
+};
+export const RecommendationProfileTracker = observer((properties) => {
+    const globalTheme = useTheme();
+    const props = {
+        // default props
+        // global theme
+        ...globalTheme?.components?.RecommendationProfileTracker,
+        // props
+        ...properties,
+        ...properties.theme?.components?.RecommendationProfileTracker,
+    };
+    const { children, controller, className, style, disableStyles } = props;
+    const childs = toChildArray(children);
+    // do impression tracking for "profile"
+    const componentRef = useRef(null);
+    const inViewport = useIntersection(componentRef, '0px');
+    if (inViewport) {
+        controller.track.impression();
+    }
+    // takes care of rendering profile
+    childs.length && controller.track.render();
+    const styling = {};
+    if (!disableStyles) {
+        styling.css = [CSS.RecommendationProfileTracker(), style];
+    }
+    else if (style) {
+        styling.css = [style];
+    }
+    return childs.length ? (jsx("div", { className: classnames('ss__recommendation-profile-tracker', className), onClick: (e) => controller.track.click(e), ref: componentRef, ...styling }, children)) : (jsx(Fragment, null));
+});

package/dist/esm/components/Trackers/Recommendation/ProfileTracker/RecommendationProfileTracker.stories.d.ts

@@ -0,0 +1,94 @@
+/// <reference types="react" />
+import { h } from 'preact';
+import { RecommendationProfileTrackerProps } from './RecommendationProfileTracker';
+import type { RecommendationController } from '@searchspring/snap-controller';
+declare const _default: {
+    title: string;
+    component: ((properties: RecommendationProfileTrackerProps) => JSX.Element) & {
+        displayName: string;
+    };
+    parameters: {
+        docs: {
+            page: () => h.JSX.Element;
+        };
+    };
+    argTypes: {
+        className: {
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
+        disableStyles: {
+            defaultValue: boolean;
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: boolean;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
+        style: {
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
+        theme: {
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
+        controller: {
+            description: string;
+            type: {
+                required: boolean;
+            };
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
+    };
+};
+export default _default;
+export declare const Default: {
+    (props: RecommendationProfileTrackerProps, { loaded: { controller } }: {
+        loaded: {
+            controller: RecommendationController;
+        };
+    }): h.JSX.Element;
+    loaders: (() => Promise<{
+        controller: RecommendationController;
+    }>)[];
+};
+//# sourceMappingURL=RecommendationProfileTracker.stories.d.ts.map

package/dist/esm/components/Trackers/Recommendation/ProfileTracker/RecommendationProfileTracker.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RecommendationProfileTracker.stories.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Trackers/Recommendation/ProfileTracker/RecommendationProfileTracker.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAI3B,OAAO,EAAgC,iCAAiC,EAAE,MAAM,gCAAgC,CAAC;AAIjH,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,+BAA+B,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAI9E,wBA2BE;AAIF,eAAO,MAAM,OAAO;YACZ,iCAAiC;;wBACY,wBAAwB;;;;;;CAY5E,CAAC"}

package/dist/esm/components/Trackers/Recommendation/ProfileTracker/RecommendationProfileTracker.stories.js

@@ -0,0 +1,48 @@
+import { h } from 'preact';
+import { ArgsTable, PRIMARY_STORY } from '@storybook/addon-docs/blocks';
+import { RecommendationProfileTracker } from './RecommendationProfileTracker';
+import { componentArgs } from '../../../../utilities';
+import Readme from '../ProfileTracker/readme.md';
+import { Snapify } from '../../../../utilities/snapify';
+import { Carousel } from '../../../Molecules/Carousel';
+import { Result } from '../../../Molecules/Result';
+export default {
+    title: `Trackers/Recommendation/Profile`,
+    component: RecommendationProfileTracker,
+    parameters: {
+        docs: {
+            page: () => (h("div", null,
+                h(Readme, null),
+                h(ArgsTable, { story: PRIMARY_STORY }))),
+        },
+    },
+    argTypes: {
+        controller: {
+            description: 'Recommendation Controller reference',
+            type: { required: true },
+            table: {
+                type: {
+                    summary: 'Controller',
+                },
+            },
+            control: { type: 'none' },
+        },
+        ...componentArgs,
+    },
+};
+const snapInstance = Snapify.recommendation({ id: 'Recommendation', tag: 'trending', globals: { siteId: '8uyt2m' } });
+export const Default = (props, { loaded: { controller } }) => {
+    return (h(RecommendationProfileTracker, { ...props, controller: controller },
+        h("h2", null, "Recommended for You"),
+        h(Carousel, null, controller.store.results.map((result, idx) => {
+            return h(Result, { result: result, key: idx });
+        }))));
+};
+Default.loaders = [
+    async () => {
+        await snapInstance.search();
+        return {
+            controller: snapInstance,
+        };
+    },
+];

package/dist/esm/components/Trackers/Recommendation/ProfileTracker/index.d.ts

@@ -0,0 +1,2 @@
+export * from './RecommendationProfileTracker';
+//# sourceMappingURL=index.d.ts.map

package/dist/esm/components/Trackers/Recommendation/ProfileTracker/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Trackers/Recommendation/ProfileTracker/index.ts"],"names":[],"mappings":"AAAA,cAAc,gCAAgC,CAAC"}

package/dist/esm/components/Trackers/Recommendation/ProfileTracker/index.js

@@ -0,0 +1 @@
+export * from './RecommendationProfileTracker';

package/dist/esm/components/Trackers/Recommendation/ResultTracker/RecommendationResultTracker.d.ts

@@ -0,0 +1,12 @@
+import type { RecommendationController } from '@searchspring/snap-controller';
+import { ComponentProps } from '../../../../types';
+import type { Product } from '@searchspring/snap-store-mobx';
+export declare const RecommendationResultTracker: ((properties: RecommendationResultTrackerProps) => JSX.Element) & {
+    displayName: string;
+};
+export interface RecommendationResultTrackerProps extends ComponentProps {
+    children: any;
+    result: Product;
+    controller: RecommendationController;
+}
+//# sourceMappingURL=RecommendationResultTracker.d.ts.map

package/dist/esm/components/Trackers/Recommendation/ResultTracker/RecommendationResultTracker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RecommendationResultTracker.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Trackers/Recommendation/ResultTracker/RecommendationResultTracker.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,+BAA+B,CAAC;AAC9E,OAAO,EAAE,cAAc,EAAc,MAAM,mBAAmB,CAAC;AAC/D,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,+BAA+B,CAAC;AAO7D,eAAO,MAAM,2BAA2B,gBAAyB,gCAAgC,KAAG,WAAW;;CAiD7G,CAAC;AAEH,MAAM,WAAW,gCAAiC,SAAQ,cAAc;IACvE,QAAQ,EAAE,GAAG,CAAC;IACd,MAAM,EAAE,OAAO,CAAC;IAChB,UAAU,EAAE,wBAAwB,CAAC;CACrC"}

package/dist/esm/components/Trackers/Recommendation/ResultTracker/RecommendationResultTracker.js

@@ -0,0 +1,43 @@
+import { jsx, css } from '@emotion/react';
+import { useRef } from 'preact/hooks';
+import { observer } from 'mobx-react-lite';
+import { useTheme } from '../../../../providers';
+import { useIntersection } from '../../../../hooks';
+import classnames from 'classnames';
+const CSS = {
+    RecommendationResultTracker: () => css({}),
+};
+export const RecommendationResultTracker = observer((properties) => {
+    const globalTheme = useTheme();
+    const props = {
+        // default props
+        // global theme
+        ...globalTheme?.components?.RecommendationResultTracker,
+        // props
+        ...properties,
+        ...properties.theme?.components?.RecommendationResultTracker,
+    };
+    const { children, result, controller, className, disableStyles, style } = props;
+    const resultRef = useRef(null);
+    const resultInViewport = useIntersection(resultRef, '0px');
+    if (!controller.events.render) {
+        controller.log.warn('<RecommendationResultTracker> used without <RecommendationProfileTracker>');
+    }
+    controller.track.product.render(result);
+    if (resultInViewport) {
+        // intersection observer can trigger in any random order,
+        // so we need to check if profile impression has been sent and send if not.
+        if (!controller.events.impression) {
+            controller.track.impression();
+        }
+        controller.track.product.impression(result);
+    }
+    const styling = {};
+    if (!disableStyles) {
+        styling.css = [CSS.RecommendationResultTracker(), style];
+    }
+    else if (style) {
+        styling.css = [style];
+    }
+    return (jsx("div", { className: classnames('ss__recommendation-result-tracker', className), onClick: (e) => controller.track.product.click(e, result), ref: resultRef, ...styling }, children));
+});

package/dist/esm/components/Trackers/Recommendation/ResultTracker/RecommendationResultTracker.stories.d.ts

@@ -0,0 +1,109 @@
+/// <reference types="react" />
+import { h } from 'preact';
+import { RecommendationResultTrackerProps } from './RecommendationResultTracker';
+import type { RecommendationController } from '@searchspring/snap-controller';
+declare const _default: {
+    title: string;
+    component: ((properties: RecommendationResultTrackerProps) => JSX.Element) & {
+        displayName: string;
+    };
+    parameters: {
+        docs: {
+            page: () => h.JSX.Element;
+        };
+    };
+    decorators: ((Story: any) => h.JSX.Element)[];
+    argTypes: {
+        className: {
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
+        disableStyles: {
+            defaultValue: boolean;
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: boolean;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
+        style: {
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
+        theme: {
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
+        controller: {
+            description: string;
+            type: {
+                required: boolean;
+            };
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
+        result: {
+            description: string;
+            type: {
+                required: boolean;
+            };
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
+    };
+};
+export default _default;
+export declare const Default: {
+    (props: RecommendationResultTrackerProps, { loaded: { controller } }: {
+        loaded: {
+            controller: RecommendationController;
+        };
+    }): h.JSX.Element;
+    loaders: (() => Promise<{
+        controller: RecommendationController;
+    }>)[];
+};
+//# sourceMappingURL=RecommendationResultTracker.stories.d.ts.map

package/dist/esm/components/Trackers/Recommendation/ResultTracker/RecommendationResultTracker.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RecommendationResultTracker.stories.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Trackers/Recommendation/ResultTracker/RecommendationResultTracker.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAI3B,OAAO,EAA+B,gCAAgC,EAAE,MAAM,+BAA+B,CAAC;AAI9G,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,+BAA+B,CAAC;;;;;;;;;;;yBAiBpE,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAdb,wBA4CE;AAIF,eAAO,MAAM,OAAO;YACZ,gCAAgC;;wBACa,wBAAwB;;;;;;CAO5E,CAAC"}

package/dist/esm/components/Trackers/Recommendation/ResultTracker/RecommendationResultTracker.stories.js

@@ -0,0 +1,58 @@
+import { h } from 'preact';
+import { ArgsTable, PRIMARY_STORY } from '@storybook/addon-docs/blocks';
+import { RecommendationResultTracker } from './RecommendationResultTracker';
+import { componentArgs } from '../../../../utilities';
+import Readme from '../ResultTracker/readme.md';
+import { Snapify } from '../../../../utilities/snapify';
+import { Result } from '../../../Molecules/Result';
+export default {
+    title: `Trackers/Recommendation/Result`,
+    component: RecommendationResultTracker,
+    parameters: {
+        docs: {
+            page: () => (h("div", null,
+                h(Readme, null),
+                h(ArgsTable, { story: PRIMARY_STORY }))),
+        },
+    },
+    decorators: [
+        (Story) => (h("div", { style: { maxWidth: '250px' } },
+            h(Story, null))),
+    ],
+    argTypes: {
+        controller: {
+            description: 'Recommendation Controller reference',
+            type: { required: true },
+            table: {
+                type: {
+                    summary: 'Controller',
+                },
+            },
+            control: { type: 'none' },
+        },
+        result: {
+            description: 'Result store Product reference',
+            type: { required: true },
+            table: {
+                type: {
+                    summary: 'result store Product object',
+                },
+            },
+            control: { type: 'none' },
+        },
+        ...componentArgs,
+    },
+};
+const snapInstance = Snapify.recommendation({ id: 'Recommendation', tag: 'trending', globals: { siteId: '8uyt2m' } });
+export const Default = (props, { loaded: { controller } }) => {
+    return (h(RecommendationResultTracker, { ...props, controller: controller, result: controller?.store?.results[0] },
+        h(Result, { result: controller?.store?.results[0] })));
+};
+Default.loaders = [
+    async () => {
+        await snapInstance.search();
+        return {
+            controller: snapInstance,
+        };
+    },
+];

package/dist/esm/components/Trackers/Recommendation/ResultTracker/index.d.ts

@@ -0,0 +1,2 @@
+export * from './RecommendationResultTracker';
+//# sourceMappingURL=index.d.ts.map

package/dist/esm/components/Trackers/Recommendation/ResultTracker/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Trackers/Recommendation/ResultTracker/index.ts"],"names":[],"mappings":"AAAA,cAAc,+BAA+B,CAAC"}

package/dist/esm/components/Trackers/Recommendation/ResultTracker/index.js

@@ -0,0 +1 @@
+export * from './RecommendationResultTracker';

package/dist/esm/index.d.ts

@@ -10,6 +10,8 @@ export * from './components/Atoms/Merchandising';
 export * from './components/Atoms/Overlay';
 export * from './components/Atoms/Price';
 export * from './components/Atoms/Skeleton';
+export * from './components/Trackers/Recommendation/ResultTracker';
+export * from './components/Trackers/Recommendation/ProfileTracker';
 export * from './components/Molecules/Carousel';
 export * from './components/Molecules/Checkbox';
 export * from './components/Molecules/ErrorHandler';

package/dist/esm/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AACA,cAAc,0BAA0B,CAAC;AACzC,cAAc,gCAAgC,CAAC;AAC/C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,oCAAoC,CAAC;AACnD,cAAc,yBAAyB,CAAC;AACxC,cAAc,0BAA0B,CAAC;AACzC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,kCAAkC,CAAC;AACjD,cAAc,4BAA4B,CAAC;AAC3C,cAAc,0BAA0B,CAAC;AACzC,cAAc,6BAA6B,CAAC;AAG5C,cAAc,iCAAiC,CAAC;AAChD,cAAc,iCAAiC,CAAC;AAChD,cAAc,qCAAqC,CAAC;AACpD,cAAc,yCAAyC,CAAC;AACxD,cAAc,8CAA8C,CAAC;AAC7D,cAAc,yCAAyC,CAAC;AACxD,cAAc,4CAA4C,CAAC;AAC3D,cAAc,+BAA+B,CAAC;AAC9C,cAAc,mCAAmC,CAAC;AAClD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,+BAA+B,CAAC;AAC9C,cAAc,iCAAiC,CAAC;AAChD,cAAc,oCAAoC,CAAC;AAGnD,cAAc,qCAAqC,CAAC;AACpD,cAAc,uCAAuC,CAAC;AACtD,cAAc,8BAA8B,CAAC;AAC7C,cAAc,+BAA+B,CAAC;AAC9C,cAAc,sCAAsC,CAAC;AACrD,cAAc,uCAAuC,CAAC;AACtD,cAAc,gCAAgC,CAAC;AAG/C,cAAc,SAAS,CAAC;AAGxB,cAAc,aAAa,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AACA,cAAc,0BAA0B,CAAC;AACzC,cAAc,gCAAgC,CAAC;AAC/C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,oCAAoC,CAAC;AACnD,cAAc,yBAAyB,CAAC;AACxC,cAAc,0BAA0B,CAAC;AACzC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,kCAAkC,CAAC;AACjD,cAAc,4BAA4B,CAAC;AAC3C,cAAc,0BAA0B,CAAC;AACzC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,oDAAoD,CAAC;AACnE,cAAc,qDAAqD,CAAC;AAGpE,cAAc,iCAAiC,CAAC;AAChD,cAAc,iCAAiC,CAAC;AAChD,cAAc,qCAAqC,CAAC;AACpD,cAAc,yCAAyC,CAAC;AACxD,cAAc,8CAA8C,CAAC;AAC7D,cAAc,yCAAyC,CAAC;AACxD,cAAc,4CAA4C,CAAC;AAC3D,cAAc,+BAA+B,CAAC;AAC9C,cAAc,mCAAmC,CAAC;AAClD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,+BAA+B,CAAC;AAC9C,cAAc,iCAAiC,CAAC;AAChD,cAAc,oCAAoC,CAAC;AAGnD,cAAc,qCAAqC,CAAC;AACpD,cAAc,uCAAuC,CAAC;AACtD,cAAc,8BAA8B,CAAC;AAC7C,cAAc,+BAA+B,CAAC;AAC9C,cAAc,sCAAsC,CAAC;AACrD,cAAc,uCAAuC,CAAC;AACtD,cAAc,gCAAgC,CAAC;AAG/C,cAAc,SAAS,CAAC;AAGxB,cAAc,aAAa,CAAC"}

package/dist/esm/index.js

@@ -11,6 +11,8 @@ export * from './components/Atoms/Merchandising';
 export * from './components/Atoms/Overlay';
 export * from './components/Atoms/Price';
 export * from './components/Atoms/Skeleton';
+export * from './components/Trackers/Recommendation/ResultTracker';
+export * from './components/Trackers/Recommendation/ProfileTracker';
 // MOLECULES
 export * from './components/Molecules/Carousel';
 export * from './components/Molecules/Checkbox';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@searchspring/snap-preact-components",
-	"version": "0.40.0",
+	"version": "0.41.0",
 	"description": "Snap Preact Component Library",
 	"author": "Searchspring",
 	"license": "MIT",
@@ -26,7 +26,7 @@
 	},
 	"dependencies": {
 		"@emotion/react": "11.9.0",
-		"@searchspring/snap-toolbox": "^0.40.0",
+		"@searchspring/snap-toolbox": "^0.41.0",
 		"classnames": "^2.3.2",
 		"deepmerge": "4.2.2",
 		"mobx-react-lite": "3.4.0",
@@ -37,14 +37,14 @@
 		"preact": "10.9.0"
 	},
 	"devDependencies": {
-		"@searchspring/snap-client": "^0.40.0",
-		"@searchspring/snap-controller": "^0.40.0",
-		"@searchspring/snap-event-manager": "^0.40.0",
-		"@searchspring/snap-logger": "^0.40.0",
-		"@searchspring/snap-profiler": "^0.40.0",
-		"@searchspring/snap-store-mobx": "^0.40.0",
-		"@searchspring/snap-tracker": "^0.40.0",
-		"@searchspring/snap-url-manager": "^0.40.0",
+		"@searchspring/snap-client": "^0.41.0",
+		"@searchspring/snap-controller": "^0.41.0",
+		"@searchspring/snap-event-manager": "^0.41.0",
+		"@searchspring/snap-logger": "^0.41.0",
+		"@searchspring/snap-profiler": "^0.41.0",
+		"@searchspring/snap-store-mobx": "^0.41.0",
+		"@searchspring/snap-tracker": "^0.41.0",
+		"@searchspring/snap-url-manager": "^0.41.0",
 		"@storybook/addon-actions": "6.4.22",
 		"@storybook/addon-controls": "6.4.22",
 		"@storybook/addon-docs": "6.4.22",
@@ -66,5 +66,5 @@
 		"ts-loader": "9.3.0"
 	},
 	"sideEffects": false,
-	"gitHead": "ab543649e56e547374715ad0f018db29d72a0d8e"
+	"gitHead": "6407e4cb50b8845bf38528e9ed742f6ca97cc2a7"
 }