@patternfly/chatbot 2.2.0-prerelease.3 → 2.2.0-prerelease.31

package/dist/esm/ResponseActions/ResponseActions.test.js

@@ -13,25 +13,30 @@ import '@testing-library/jest-dom';
 import ResponseActions from './ResponseActions';
 import userEvent from '@testing-library/user-event';
 import { DownloadIcon, InfoCircleIcon, RedoIcon } from '@patternfly/react-icons';
+import Message from '../Message';
 const ALL_ACTIONS = [
-    { type: 'positive', label: 'Good response' },
-    { type: 'negative', label: 'Bad response' },
-    { type: 'copy', label: 'Copy' },
-    { type: 'share', label: 'Share' },
-    { type: 'listen', label: 'Listen' }
+    { type: 'positive', label: 'Good response', clickedLabel: 'Response recorded' },
+    { type: 'negative', label: 'Bad response', clickedLabel: 'Response recorded' },
+    { type: 'copy', label: 'Copy', clickedLabel: 'Copied' },
+    { type: 'share', label: 'Share', clickedLabel: 'Shared' },
+    { type: 'listen', label: 'Listen', clickedLabel: 'Listening' }
 ];
 const CUSTOM_ACTIONS = [
     {
         regenerate: {
             ariaLabel: 'Regenerate',
+            clickedAriaLabel: 'Regenerated',
             onClick: jest.fn(),
             tooltipContent: 'Regenerate',
+            clickedTooltipContent: 'Regenerated',
             icon: React.createElement(RedoIcon, null)
         },
         download: {
             ariaLabel: 'Download',
+            clickedAriaLabel: 'Downloaded',
             onClick: jest.fn(),
             tooltipContent: 'Download',
+            clickedTooltipContent: 'Downloaded',
             icon: React.createElement(DownloadIcon, null)
         },
         info: {
@@ -43,6 +48,59 @@ const CUSTOM_ACTIONS = [
     }
 ];
 describe('ResponseActions', () => {
+    afterEach(() => {
+        jest.clearAllMocks();
+    });
+    it('should handle click within group of buttons correctly', () => __awaiter(void 0, void 0, void 0, function* () {
+        render(React.createElement(ResponseActions, { actions: {
+                positive: { onClick: jest.fn() },
+                negative: { onClick: jest.fn() },
+                copy: { onClick: jest.fn() },
+                share: { onClick: jest.fn() },
+                listen: { onClick: jest.fn() }
+            } }));
+        const goodBtn = screen.getByRole('button', { name: 'Good response' });
+        const badBtn = screen.getByRole('button', { name: 'Bad response' });
+        const copyBtn = screen.getByRole('button', { name: 'Copy' });
+        const shareBtn = screen.getByRole('button', { name: 'Share' });
+        const listenBtn = screen.getByRole('button', { name: 'Listen' });
+        const buttons = [goodBtn, badBtn, copyBtn, shareBtn, listenBtn];
+        buttons.forEach((button) => {
+            expect(button).toBeTruthy();
+        });
+        yield userEvent.click(goodBtn);
+        expect(screen.getByRole('button', { name: 'Response recorded' })).toHaveClass('pf-chatbot__button--response-action-clicked');
+        let unclickedButtons = buttons.filter((button) => button !== goodBtn);
+        unclickedButtons.forEach((button) => {
+            expect(button).not.toHaveClass('pf-chatbot__button--response-action-clicked');
+        });
+        yield userEvent.click(badBtn);
+        expect(screen.getByRole('button', { name: 'Response recorded' })).toHaveClass('pf-chatbot__button--response-action-clicked');
+        unclickedButtons = buttons.filter((button) => button !== badBtn);
+        unclickedButtons.forEach((button) => {
+            expect(button).not.toHaveClass('pf-chatbot__button--response-action-clicked');
+        });
+    }));
+    it('should handle click outside of group of buttons correctly', () => __awaiter(void 0, void 0, void 0, function* () {
+        // using message just so we have something outside the group that's rendered
+        render(React.createElement(Message, { name: "Bot", role: "bot", avatar: "", content: "I updated your account with those settings. You're ready to set up your first dashboard!", actions: {
+                positive: {},
+                negative: {}
+            } }));
+        const goodBtn = screen.getByRole('button', { name: 'Good response' });
+        const badBtn = screen.getByRole('button', { name: 'Bad response' });
+        expect(goodBtn).toBeTruthy();
+        expect(badBtn).toBeTruthy();
+        yield userEvent.click(goodBtn);
+        expect(screen.getByRole('button', { name: 'Response recorded' })).toHaveClass('pf-chatbot__button--response-action-clicked');
+        expect(badBtn).not.toHaveClass('pf-chatbot__button--response-action-clicked');
+        yield userEvent.click(badBtn);
+        expect(screen.getByRole('button', { name: 'Response recorded' })).toHaveClass('pf-chatbot__button--response-action-clicked');
+        expect(goodBtn).not.toHaveClass('pf-chatbot__button--response-action-clicked');
+        yield userEvent.click(screen.getByText("I updated your account with those settings. You're ready to set up your first dashboard!"));
+        expect(goodBtn).not.toHaveClass('pf-chatbot__button--response-action-clicked');
+        expect(badBtn).not.toHaveClass('pf-chatbot__button--response-action-clicked');
+    }));
     it('should render buttons correctly', () => {
         ALL_ACTIONS.forEach(({ type, label }) => {
             render(React.createElement(ResponseActions, { actions: { [type]: { onClick: jest.fn() } } }));
@@ -57,6 +115,22 @@ describe('ResponseActions', () => {
             expect(spy).toHaveBeenCalledTimes(1);
         }));
     }));
+    it('should swap clicked and non-clicked aria labels on click', () => __awaiter(void 0, void 0, void 0, function* () {
+        ALL_ACTIONS.forEach((_a) => __awaiter(void 0, [_a], void 0, function* ({ type, label, clickedLabel }) {
+            render(React.createElement(ResponseActions, { actions: { [type]: { onClick: jest.fn() } } }));
+            expect(screen.getByRole('button', { name: label })).toBeTruthy();
+            yield userEvent.click(screen.getByRole('button', { name: label }));
+            expect(screen.getByRole('button', { name: clickedLabel })).toBeTruthy();
+        }));
+    }));
+    it('should swap clicked and non-clicked tooltips on click', () => __awaiter(void 0, void 0, void 0, function* () {
+        ALL_ACTIONS.forEach((_a) => __awaiter(void 0, [_a], void 0, function* ({ type, label, clickedLabel }) {
+            render(React.createElement(ResponseActions, { actions: { [type]: { onClick: jest.fn() } } }));
+            expect(screen.getByRole('button', { name: label })).toBeTruthy();
+            yield userEvent.click(screen.getByRole('button', { name: label }));
+            expect(screen.getByRole('tooltip', { name: clickedLabel })).toBeTruthy();
+        }));
+    }));
     it('should be able to change aria labels', () => {
         const actions = [
             { type: 'positive', ariaLabel: 'Thumbs up' },

package/dist/esm/Settings/SettingsForm.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+export interface SettingsFormProps {
+    /** Class applied to form container */
+    className?: string;
+    /** Array of fields to display in the settings layout */
+    fields?: {
+        id: string;
+        label: string;
+        field: React.ReactElement;
+    }[];
+}
+export declare const SettingsForm: React.FunctionComponent<SettingsFormProps>;
+export default SettingsForm;

package/dist/esm/Settings/SettingsForm.js

@@ -0,0 +1,20 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+export const SettingsForm = (_a) => {
+    var { className, fields = [] } = _a, props = __rest(_a, ["className", "fields"]);
+    return (React.createElement("div", Object.assign({ className: `pf-chatbot__settings-form-container ${className}` }, props),
+        React.createElement("form", { className: "pf-chatbot__settings-form" }, fields.map((field) => (React.createElement("div", { className: "pf-chatbot__settings-form-row", key: field.label },
+            React.createElement("label", { className: "pf-chatbot__settings-label", htmlFor: field.id }, field.label),
+            field.field))))));
+};
+export default SettingsForm;

package/dist/esm/Settings/SettingsForm.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/esm/Settings/SettingsForm.test.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import { Button } from '@patternfly/react-core';
+import { render, screen } from '@testing-library/react';
+import { SettingsForm } from './SettingsForm';
+describe('SettingsForm', () => {
+    it('should render settingsForm with custom classname', () => {
+        const { container } = render(React.createElement(SettingsForm, { className: "custom-settings" }));
+        expect(container.querySelector('.custom-settings')).toBeTruthy();
+    });
+    it('should render settingsForm with fields', () => {
+        const fields = [
+            {
+                id: 'archived-chat',
+                label: 'Archive chat',
+                field: (React.createElement(Button, { id: "archived-chat", variant: "secondary" }, "Archive chat"))
+            }
+        ];
+        render(React.createElement(SettingsForm, { fields: fields }));
+        expect(screen.getByRole('button', { name: 'Archive chat' })).toBeTruthy();
+    });
+});

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

@@ -0,0 +1,2 @@
+export { default } from './SettingsForm';
+export * from './SettingsForm';

package/dist/esm/Settings/index.js

@@ -0,0 +1,2 @@
+export { default } from './SettingsForm';
+export * from './SettingsForm';

package/dist/esm/TermsOfUse/TermsOfUse.d.ts

@@ -0,0 +1,34 @@
+import React from 'react';
+import { ModalProps } from '@patternfly/react-core';
+import { ChatbotDisplayMode } from '../Chatbot';
+export interface TermsOfUseProps extends ModalProps {
+    /** Class applied to modal */
+    className?: string;
+    /** Action assigned to primary modal button */
+    onPrimaryAction?: (event: React.MouseEvent | MouseEvent | KeyboardEvent) => void;
+    /** Action assigned to secondary modal button */
+    onSecondaryAction: (event: React.MouseEvent | MouseEvent | KeyboardEvent) => void;
+    /** Name of primary modal button */
+    primaryActionBtn?: string;
+    /** Name of secondary modal button */
+    secondaryActionBtn?: string;
+    /** Function that handles modal toggle */
+    handleModalToggle: (event: React.MouseEvent | MouseEvent | KeyboardEvent) => void;
+    /** Whether modal is open */
+    isModalOpen: boolean;
+    /** Title of modal */
+    title?: string;
+    /** Display mode for the Chatbot parent; this influences the styles applied */
+    displayMode?: ChatbotDisplayMode;
+    /** Optional image displayed in header */
+    image?: string;
+    /** Alt text for optional image displayed in header */
+    altText?: string;
+    /** Ref applied to modal */
+    innerRef?: React.Ref<HTMLDivElement>;
+    /** OuiaID applied to modal */
+    ouiaId?: string;
+}
+export declare const TermsOfUseBase: React.FunctionComponent<TermsOfUseProps>;
+declare const TermsOfUse: React.ForwardRefExoticComponent<Omit<TermsOfUseProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export default TermsOfUse;

package/dist/esm/TermsOfUse/TermsOfUse.js

@@ -0,0 +1,42 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+// ============================================================================
+// Terms of Use Modal - Chatbot Modal Extension
+// ============================================================================
+import React from 'react';
+import { Button, Content, ModalBody, ModalFooter, ModalHeader } from '@patternfly/react-core';
+import { ChatbotDisplayMode } from '../Chatbot';
+import ChatbotModal from '../ChatbotModal/ChatbotModal';
+export const TermsOfUseBase = (_a) => {
+    var { handleModalToggle, isModalOpen, onPrimaryAction, onSecondaryAction, primaryActionBtn = 'Accept', secondaryActionBtn = 'Decline', title = 'Terms of use', image, altText, displayMode = ChatbotDisplayMode.default, className, children, innerRef, ouiaId = 'TermsOfUse' } = _a, props = __rest(_a, ["handleModalToggle", "isModalOpen", "onPrimaryAction", "onSecondaryAction", "primaryActionBtn", "secondaryActionBtn", "title", "image", "altText", "displayMode", "className", "children", "innerRef", "ouiaId"]);
+    const handlePrimaryAction = (_event) => {
+        handleModalToggle(_event);
+        onPrimaryAction && onPrimaryAction(_event);
+    };
+    const handleSecondaryAction = (_event) => {
+        onSecondaryAction(_event);
+    };
+    const modal = (React.createElement(ChatbotModal, Object.assign({ isOpen: isModalOpen, ouiaId: ouiaId, "aria-labelledby": "terms-of-use-title", "aria-describedby": "terms-of-use-modal", className: `pf-chatbot__terms-of-use-modal pf-chatbot__terms-of-use-modal--${displayMode} ${className ? className : ''}`, displayMode: displayMode }, props),
+        React.createElement("section", { className: `pf-chatbot__terms-of-use--section`, "aria-label": title, tabIndex: -1, ref: innerRef },
+            React.createElement(ModalHeader, null,
+                React.createElement("div", { className: "pf-chatbot__terms-of-use--header" },
+                    image && altText && React.createElement("img", { src: image, className: "pf-chatbot__terms-of-use--image", alt: altText }),
+                    React.createElement("h1", { className: "pf-chatbot__terms-of-use--title" }, title))),
+            React.createElement(ModalBody, null,
+                React.createElement(Content, null, children)),
+            React.createElement(ModalFooter, { className: "pf-chatbot__terms-of-use--footer" },
+                React.createElement(Button, { isBlock: true, key: "terms-of-use-modal-primary", variant: "primary", onClick: handlePrimaryAction, form: "terms-of-use-form", size: "lg" }, primaryActionBtn),
+                React.createElement(Button, { isBlock: true, key: "terms-of-use-modal-secondary", variant: "secondary", onClick: handleSecondaryAction, size: "lg" }, secondaryActionBtn)))));
+    return modal;
+};
+const TermsOfUse = React.forwardRef((props, ref) => (React.createElement(TermsOfUseBase, Object.assign({ innerRef: ref }, props))));
+export default TermsOfUse;

package/dist/esm/TermsOfUse/TermsOfUse.test.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/dist/esm/TermsOfUse/TermsOfUse.test.js

@@ -0,0 +1,74 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import userEvent from '@testing-library/user-event';
+import TermsOfUse from './TermsOfUse';
+import { Content } from '@patternfly/react-core';
+const handleModalToggle = jest.fn();
+const onPrimaryAction = jest.fn();
+const onSecondaryAction = jest.fn();
+const body = (React.createElement(Content, null,
+    React.createElement("h1", null, "Heading 1"),
+    React.createElement("p", null, "Legal text")));
+describe('TermsOfUse', () => {
+    afterEach(() => {
+        jest.clearAllMocks();
+    });
+    it('should render modal correctly', () => {
+        render(React.createElement(TermsOfUse, { isModalOpen: true, onSecondaryAction: onSecondaryAction, handleModalToggle: handleModalToggle, ouiaId: "Terms" }, body));
+        expect(screen.getByRole('heading', { name: /Terms of use/i })).toBeTruthy();
+        expect(screen.getByRole('button', { name: /Accept/i })).toBeTruthy();
+        expect(screen.getByRole('button', { name: /Decline/i })).toBeTruthy();
+        expect(screen.getByRole('heading', { name: /Heading 1/i })).toBeTruthy();
+        expect(screen.getByText(/Legal text/i)).toBeTruthy();
+        expect(screen.getByRole('dialog')).toHaveClass('pf-chatbot__terms-of-use-modal');
+        expect(screen.getByRole('dialog')).toHaveClass('pf-chatbot__terms-of-use-modal--default');
+    });
+    it('should handle image and altText props', () => {
+        render(React.createElement(TermsOfUse, { isModalOpen: true, onSecondaryAction: onSecondaryAction, handleModalToggle: handleModalToggle, image: "./image.png", altText: "Test image" }, body));
+        expect(screen.getByRole('img')).toBeTruthy();
+        expect(screen.getByRole('img')).toHaveAttribute('alt', 'Test image');
+    });
+    it('should handle className prop', () => {
+        render(React.createElement(TermsOfUse, { isModalOpen: true, onSecondaryAction: onSecondaryAction, handleModalToggle: handleModalToggle, className: "test" }, body));
+        expect(screen.getByRole('dialog')).toHaveClass('pf-chatbot__terms-of-use-modal');
+        expect(screen.getByRole('dialog')).toHaveClass('pf-chatbot__terms-of-use-modal--default');
+        expect(screen.getByRole('dialog')).toHaveClass('test');
+    });
+    it('should handle title prop', () => {
+        render(React.createElement(TermsOfUse, { isModalOpen: true, onSecondaryAction: onSecondaryAction, handleModalToggle: handleModalToggle, title: "Updated title" }, body));
+        expect(screen.getByRole('heading', { name: /Updated title/i })).toBeTruthy();
+        expect(screen.queryByRole('heading', { name: /Terms of use/i })).toBeFalsy();
+    });
+    it('should handle primary button prop', () => {
+        render(React.createElement(TermsOfUse, { isModalOpen: true, onSecondaryAction: onSecondaryAction, handleModalToggle: handleModalToggle, primaryActionBtn: "First" }, body));
+        expect(screen.getByRole('button', { name: /First/i })).toBeTruthy();
+        expect(screen.queryByRole('button', { name: /Accept/i })).toBeFalsy();
+    });
+    it('should handle secondary button prop', () => {
+        render(React.createElement(TermsOfUse, { isModalOpen: true, onSecondaryAction: onSecondaryAction, handleModalToggle: handleModalToggle, secondaryActionBtn: "Second" }, body));
+        expect(screen.getByRole('button', { name: /Second/i })).toBeTruthy();
+        expect(screen.queryByRole('button', { name: /Deny/i })).toBeFalsy();
+    });
+    it('should handle primary button click', () => __awaiter(void 0, void 0, void 0, function* () {
+        render(React.createElement(TermsOfUse, { isModalOpen: true, onPrimaryAction: onPrimaryAction, onSecondaryAction: onSecondaryAction, handleModalToggle: handleModalToggle }, body));
+        yield userEvent.click(screen.getByRole('button', { name: /Accept/i }));
+        expect(onPrimaryAction).toHaveBeenCalledTimes(1);
+        expect(handleModalToggle).toHaveBeenCalledTimes(1);
+    }));
+    it('should handle secondary button click', () => __awaiter(void 0, void 0, void 0, function* () {
+        render(React.createElement(TermsOfUse, { isModalOpen: true, onSecondaryAction: onSecondaryAction, handleModalToggle: handleModalToggle }, body));
+        yield userEvent.click(screen.getByRole('button', { name: /Decline/i }));
+        expect(onSecondaryAction).toHaveBeenCalledTimes(1);
+        expect(handleModalToggle).not.toHaveBeenCalled();
+    }));
+});

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

@@ -0,0 +1,2 @@
+export { default } from './TermsOfUse';
+export * from './TermsOfUse';

package/dist/esm/TermsOfUse/index.js

@@ -0,0 +1,2 @@
+export { default } from './TermsOfUse';
+export * from './TermsOfUse';

package/dist/esm/__mocks__/rehype-external-links.d.ts

@@ -0,0 +1,2 @@
+declare const rehypeExternalLinks: jest.Mock<any, [children: any], any>;
+export default rehypeExternalLinks;

package/dist/esm/__mocks__/rehype-external-links.js

@@ -0,0 +1,2 @@
+const rehypeExternalLinks = jest.fn((children) => children);
+export default rehypeExternalLinks;

package/dist/esm/__mocks__/rehype-sanitize.d.ts

@@ -0,0 +1,2 @@
+declare const rehypeSanitize: jest.Mock<null, [], any>;
+export default rehypeSanitize;

package/dist/esm/__mocks__/rehype-sanitize.js

@@ -0,0 +1,2 @@
+const rehypeSanitize = jest.fn(() => null);
+export default rehypeSanitize;

package/dist/esm/__mocks__/rehype-unwrap-images.d.ts

@@ -0,0 +1,2 @@
+declare const rehypeUnwrapImages: jest.Mock<null, [], any>;
+export default rehypeUnwrapImages;

package/dist/esm/__mocks__/rehype-unwrap-images.js

@@ -0,0 +1,2 @@
+const rehypeUnwrapImages = jest.fn(() => null);
+export default rehypeUnwrapImages;

package/dist/esm/index.d.ts

@@ -24,6 +24,8 @@ export { default as ChatbotWelcomePrompt } from './ChatbotWelcomePrompt';
 export * from './ChatbotWelcomePrompt';
 export { default as CodeModal } from './CodeModal';
 export * from './CodeModal';
+export { default as Compare } from './Compare';
+export * from './Compare';
 export { default as FileDetails } from './FileDetails';
 export * from './FileDetails';
 export { default as FileDetailsLabel } from './FileDetailsLabel';
@@ -42,7 +44,13 @@ export { default as PreviewAttachment } from './PreviewAttachment';
 export * from './PreviewAttachment';
 export { default as ResponseActions } from './ResponseActions';
 export * from './ResponseActions';
+export { default as Settings } from './Settings';
+export * from './Settings';
 export { default as SourceDetailsMenuItem } from './SourceDetailsMenuItem';
 export * from './SourceDetailsMenuItem';
 export { default as SourcesCard } from './SourcesCard';
 export * from './SourcesCard';
+export { default as TermsOfUse } from './TermsOfUse';
+export * from './TermsOfUse';
+export { default as tracking } from './tracking';
+export * from './tracking';

package/dist/esm/index.js

@@ -25,6 +25,8 @@ export { default as ChatbotWelcomePrompt } from './ChatbotWelcomePrompt';
 export * from './ChatbotWelcomePrompt';
 export { default as CodeModal } from './CodeModal';
 export * from './CodeModal';
+export { default as Compare } from './Compare';
+export * from './Compare';
 export { default as FileDetails } from './FileDetails';
 export * from './FileDetails';
 export { default as FileDetailsLabel } from './FileDetailsLabel';
@@ -43,7 +45,13 @@ export { default as PreviewAttachment } from './PreviewAttachment';
 export * from './PreviewAttachment';
 export { default as ResponseActions } from './ResponseActions';
 export * from './ResponseActions';
+export { default as Settings } from './Settings';
+export * from './Settings';
 export { default as SourceDetailsMenuItem } from './SourceDetailsMenuItem';
 export * from './SourceDetailsMenuItem';
 export { default as SourcesCard } from './SourcesCard';
 export * from './SourcesCard';
+export { default as TermsOfUse } from './TermsOfUse';
+export * from './TermsOfUse';
+export { default as tracking } from './tracking';
+export * from './tracking';

package/dist/esm/tracking/console_tracking_provider.d.ts

@@ -0,0 +1,10 @@
+import { TrackingSpi } from './tracking_spi';
+import { TrackingApi, TrackingEventProperties } from './tracking_api';
+export declare class ConsoleTrackingProvider implements TrackingSpi, TrackingApi {
+    trackPageView(url: string | undefined): void;
+    registerProvider(): void;
+    initialize(): void;
+    identify(userID: string): void;
+    trackSingleItem(item: string, properties?: TrackingEventProperties): void;
+    getKey(): string;
+}

package/dist/esm/tracking/console_tracking_provider.js

@@ -0,0 +1,23 @@
+export class ConsoleTrackingProvider {
+    trackPageView(url) {
+        // eslint-disable-next-line no-console
+        console.log('ConsoleProvider pageView', url);
+    }
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    registerProvider() { }
+    initialize() {
+        // eslint-disable-next-line no-console
+        console.log('ConsoleProvider initialize');
+    }
+    identify(userID) {
+        // eslint-disable-next-line no-console
+        console.log('ConsoleProvider identify', userID);
+    }
+    trackSingleItem(item, properties) {
+        // eslint-disable-next-line no-console
+        console.log('ConsoleProvider: ' + item, properties);
+    }
+    getKey() {
+        return 'console';
+    }
+}

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

@@ -0,0 +1,2 @@
+export { default } from './tracking_registry';
+export * from './tracking_registry';

package/dist/esm/tracking/index.js

@@ -0,0 +1,2 @@
+export { default } from './tracking_registry';
+export * from './tracking_registry';

package/dist/esm/tracking/posthog_tracking_provider.d.ts

@@ -0,0 +1,9 @@
+import { TrackingApi, TrackingEventProperties } from './tracking_api';
+import { InitProps, TrackingSpi } from './tracking_spi';
+export declare class PosthogTrackingProvider implements TrackingSpi, TrackingApi {
+    getKey(): string;
+    initialize(props: InitProps): void;
+    identify(userID: string): void;
+    trackPageView(url: string | undefined): void;
+    trackSingleItem(item: string, properties?: TrackingEventProperties): void;
+}

package/dist/esm/tracking/posthog_tracking_provider.js

@@ -0,0 +1,33 @@
+import { posthog } from 'posthog-js';
+export class PosthogTrackingProvider {
+    getKey() {
+        return 'posthogKey';
+    }
+    initialize(props) {
+        // eslint-disable-next-line no-console
+        console.log('PosthogProvider initialize');
+        const posthogKey = props.posthogKey;
+        posthog.init(posthogKey, {
+            // eslint-disable-next-line camelcase
+            api_host: 'https://us.i.posthog.com',
+            // eslint-disable-next-line camelcase
+            person_profiles: 'identified_only' // or 'always' to create profiles for anonymous users as well
+        });
+    }
+    identify(userID) {
+        // eslint-disable-next-line no-console
+        console.log('PosthogProvider userID: ' + userID);
+        posthog.identify(userID);
+    }
+    trackPageView(url) {
+        // eslint-disable-next-line no-console
+        console.log('PostHogProvider url', url);
+        // TODO posthog seems to record that automatically.
+        //  How to not clash with this here? Just leave as no-op?
+    }
+    trackSingleItem(item, properties) {
+        // eslint-disable-next-line no-console
+        console.log('PosthogProvider: trackSingleItem' + item, properties);
+        posthog.capture(item, { properties });
+    }
+}

package/dist/esm/tracking/segment_tracking_provider.d.ts

@@ -0,0 +1,10 @@
+import { TrackingApi, TrackingEventProperties } from './tracking_api';
+import { InitProps, TrackingSpi } from './tracking_spi';
+export declare class SegmentTrackingProvider implements TrackingSpi, TrackingApi {
+    private analytics;
+    getKey(): string;
+    initialize(props: InitProps): void;
+    identify(userID: string): void;
+    trackPageView(url: string | undefined): void;
+    trackSingleItem(item: string, properties?: TrackingEventProperties): void;
+}

package/dist/esm/tracking/segment_tracking_provider.js

@@ -0,0 +1,46 @@
+import { AnalyticsBrowser } from '@segment/analytics-next';
+export class SegmentTrackingProvider {
+    getKey() {
+        return 'segmentKey';
+    }
+    initialize(props) {
+        // eslint-disable-next-line no-console
+        console.log('SegmentProvider initialize');
+        const segmentKey = props.segmentKey;
+        // We need to create an object here, as ts lint is unhappy otherwise
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const integrations = props.segmentIntegrations;
+        this.analytics = AnalyticsBrowser.load({
+            writeKey: segmentKey,
+            cdnURL: props.segmentCdn
+        }, {
+            integrations: Object.assign({}, integrations)
+        });
+    }
+    identify(userID) {
+        // eslint-disable-next-line no-console
+        console.log('SegmentProvider userID: ' + userID);
+        if (this.analytics) {
+            this.analytics.identify(userID);
+        }
+    }
+    trackPageView(url) {
+        // eslint-disable-next-line no-console
+        console.log('SegmentProvider url', url);
+        if (this.analytics) {
+            if (url) {
+                this.analytics.page(url);
+            }
+            else {
+                this.analytics.page(); // Uses window.url
+            }
+        }
+    }
+    trackSingleItem(item, properties) {
+        // eslint-disable-next-line no-console
+        console.log('SegmentProvider: trackSingleItem' + item, properties);
+        if (this.analytics) {
+            this.analytics.track(item, { properties });
+        }
+    }
+}

package/dist/esm/tracking/trackingProviderProxy.d.ts

@@ -0,0 +1,9 @@
+import { TrackingApi, TrackingEventProperties } from './tracking_api';
+declare class TrackingProviderProxy implements TrackingApi {
+    providers: TrackingApi[];
+    constructor(providers: TrackingApi[]);
+    identify(userID: string): void;
+    trackSingleItem(eventName: string, properties?: TrackingEventProperties): void;
+    trackPageView(url: string | undefined): void;
+}
+export default TrackingProviderProxy;

package/dist/esm/tracking/trackingProviderProxy.js

@@ -0,0 +1,22 @@
+class TrackingProviderProxy {
+    constructor(providers) {
+        this.providers = [];
+        this.providers = providers;
+    }
+    identify(userID) {
+        for (const provider of this.providers) {
+            provider.identify(userID);
+        }
+    }
+    trackSingleItem(eventName, properties) {
+        for (const provider of this.providers) {
+            provider.trackSingleItem(eventName, properties);
+        }
+    }
+    trackPageView(url) {
+        for (const provider of this.providers) {
+            provider.trackPageView(url);
+        }
+    }
+}
+export default TrackingProviderProxy;

package/dist/esm/tracking/tracking_api.d.ts

@@ -0,0 +1,8 @@
+export interface TrackingEventProperties {
+    [key: string]: string | number | boolean | undefined;
+}
+export interface TrackingApi {
+    identify: (userID: string) => void;
+    trackPageView: (url: string | undefined) => void;
+    trackSingleItem: (eventName: string, properties: TrackingEventProperties | undefined) => void;
+}

package/dist/esm/tracking/tracking_api.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/tracking/tracking_registry.d.ts

@@ -0,0 +1,4 @@
+import { InitProps } from './tracking_spi';
+import { TrackingApi } from './tracking_api';
+export declare const getTrackingProviders: (initProps: InitProps) => TrackingApi;
+export default getTrackingProviders;