@reykjavik/webtools 0.0.0

package/CHANGELOG.md

@@ -0,0 +1,11 @@
+# Change Log for `es-in-css`
+
+## Upcoming...
+
+- ... <!-- Add new lines here. -->
+
+## 0.0.0
+
+_YYYY-MM-DD_
+
+- feat: Initial release

package/CookieHubConsent.d.ts

@@ -0,0 +1,231 @@
+import { ReactNode } from 'react';
+import { EitherObj } from '@reykjavik/hanna-utils';
+declare global {
+    interface Window {
+        cookiehub: CookieHub;
+    }
+}
+type CookieHub = {
+    /**
+     * Used to initialize, and configure, CookieHub.
+     *
+     * (Thin wrapper for `window.cookiehub.initialize`)
+     *
+     * @see https://support.cookiehub.com/article/86-methods-functions
+     */
+    load(options?: CookieHubOptions): void;
+    /**
+     * Used to initialize, and configure, CookieHub.
+     *
+     * @see https://support.cookiehub.com/article/86-methods-functions
+     */
+    initialize(options?: CookieHubOptions): void;
+    /**
+     * Used to check if the user has already made cookie choices.
+     *
+     * @see https://support.cookiehub.com/article/86-methods-functions
+     */
+    hasAnswered(): boolean;
+    /**
+     * Used to check if the user has allowed the cookie category specified in
+     * the category parameter.
+     *
+     * @see https://support.cookiehub.com/article/86-methods-functions
+     */
+    hasConsented(category: CookieHubCategory): boolean;
+    /**
+     * Used to check if the CookieHub script has been initialized
+     *
+     * @see https://support.cookiehub.com/article/86-methods-functions
+     */
+    hasInitialized(): boolean;
+    /**
+     * Open the CookieHub dialog.
+     *
+     * @see https://support.cookiehub.com/article/86-methods-functions
+     */
+    openDialog(): void;
+    /**
+     * Close the CookieHub dialog if it's still open.
+     *
+     * @see https://support.cookiehub.com/article/86-methods-functions
+     */
+    closeDialog(): void;
+    /**
+     * Open the CookieHub settings dialog. This may be useful if you choose to
+     * hide the settings icon which is usually used to open the CookieHub
+     * settings dialog and want to create a custom link or button to open the
+     * dialog instead.
+     *
+     * @see https://support.cookiehub.com/article/86-methods-functions
+     */
+    openSettings(): void;
+    /**
+     * Close the CookieHub settings dialog.
+     *
+     * @see https://support.cookiehub.com/article/86-methods-functions
+     */
+    closeSettings(): void;
+    /**
+     * Denys all cookie categories.
+     *
+     * @see https://support.cookiehub.com/article/86-methods-functions
+     */
+    denyAll(): void;
+    /**
+     * Allows all cookie categories.
+     *
+     * @see https://support.cookiehub.com/article/86-methods-functions
+     */
+    allowAll(): void;
+};
+type CookieHubCategory = 'necessary' | 'preferences' | 'analytics' | 'marketing' | 'uncategorized';
+type CookieHubOptions = {
+    /**
+     * Fired when CookieHub has finished loading.
+     *
+     * @see https://support.cookiehub.com/article/87-events
+     */
+    onInitialise?: (this: CookieHub, status: CookiehubState) => void;
+    /**
+     * Fired any time users make changes to cookie choices and click the
+     * Save Settings or if the Allow All Cookies button is clicked.
+     *
+     * @see https://support.cookiehub.com/article/87-events
+     */
+    onStatusChange?: (this: CookieHub, status: CookiehubState, previousStatus: CookiehubState) => void;
+    /**
+     * Fired any time a cookie category is allowed that was previously disallowed.
+     *
+     * @see https://support.cookiehub.com/article/87-events
+     */
+    onAllow?: (this: CookieHub, category: CookieHubCategory) => void;
+    /**
+     * Fired any time a cookie category consent is revoked for a category that
+     * was previously allowed.
+     *
+     * @see https://support.cookiehub.com/article/87-events
+     */
+    onRevoke?: (this: CookieHub, category: CookieHubCategory) => void;
+    dialog?: {
+        /**
+         * Controls the display of the action buttons in the popup dialog.
+         *
+         * @see https://support.cookiehub.com/article/128-changing-the-order-of-action-buttons
+         */
+        actions?: Array<'allow' | 'deny' | 'settings'>;
+    };
+    cookie?: {
+        /**
+         * Empty string (`''`) will instruct the browser to set the cookie on
+         * the current domain instead of the top level domain which is the
+         * default value.
+         *
+         * @see https://support.cookiehub.com/article/85-cookiehub-on-multiple-domains-hosts
+         */
+        domain?: string;
+        /**
+         * Controls the cookie behavior and access for the cookiehub cookie
+         *
+         * Possible values are:
+         *
+         *  - **Lax** (Default): Allows pages on the domain and third party links
+         *    to access the cookie. This is the default setting for CookieHub.
+         *  - **Strict**: Only allows pages on the domain that set the cookie to
+         *    access it. Links from third parties won’t be able to access the
+         *    cookie.
+         *  - **None**: No domain limitations and third-party cookies can fire.
+         *
+         * @see https://support.cookiehub.com/article/84-cookie-security-and-the-samesite-attribute
+         */
+        sameSite?: 'Strict' | 'Lax' | 'None';
+        /**
+         * If the Secure attribute is set to true, the cookie will only be accessible
+         * if the page being loaded is loaded over a secure connection.
+         *
+         * Defaults to `false` but it's recommended to set it to true
+         *
+         * @see https://support.cookiehub.com/article/84-cookie-security-and-the-samesite-attribute
+         */
+        secure?: boolean;
+    };
+};
+type CookiehubState = {
+    answered: boolean;
+    preconsent: boolean;
+    revision: number;
+    dnt: boolean;
+    allowSale: boolean;
+    implict: boolean;
+    region: string;
+    token: string;
+    timestamp: Date;
+    categories: Array<CookieHubCategoryState>;
+};
+type CookieHubCategoryState = {
+    cid: number;
+    id: CookieHubCategory;
+    value: boolean;
+    preconsent: boolean;
+    fired: boolean;
+};
+type CookieHubContextState = {
+    consent: Record<Exclude<CookieHubCategory, 'necessary'>, boolean>;
+};
+export type CookieHubProviderProps = EitherObj<{
+    /**
+     * Yuour CookieHub account ID.
+     *
+     * It's a random-looking alpha-numerical string, and it can usually be
+     * extracted from the script embed URL like this:
+     * `"https://cookiehub.net/c2/[ACCOUNT_ID].js"`
+     *
+     * @see https://support.cookiehub.com/article/155-manual-implementation-guide
+     */
+    accountId: string;
+}, {
+    /**
+     * The full CookieHub embed script URL.
+     *
+     * Something like `"https://cookiehub.net/c2/[ACCOUNT_ID].js"`
+     *
+     * @see https://support.cookiehub.com/article/155-manual-implementation-guide
+     */
+    scriptUrl: string;
+}> & {
+    children: ReactNode;
+    /**
+     * Custom callback that fires when CookieHub has initialized.
+     *
+     * To subscribe to other events run:
+     *
+     * ```js
+     * window.cookiehub.initialize({
+     *   // Event handlers other than `onInitialize`
+     * })
+     * ```
+     *
+     * @see https://support.cookiehub.com/article/87-events
+     */
+    options?: CookieHubOptions;
+    /**
+     * Error callback for if the CookieHub script fails to load.
+     */
+    onError?: OnErrorEventHandlerNonNull;
+};
+/**
+ * This context provider component loads and initialises the CookieHub consent
+ * management script and sets up a React state object with the relevant user
+ * consent flags.
+ *
+ * @see https://github.com/reykjavikcity/webtools/tree/v0.1##cookiehubprovider-component
+ */
+export declare const CookieHubProvider: (props: CookieHubProviderProps) => JSX.Element;
+/**
+ * Returns up-to-date cookie consent flags. For use in React components or hook
+ * functions.
+ *
+ * @see https://github.com/reykjavikcity/webtools/tree/v0.1##usecookiehubconsent
+ */
+export declare const useCookieHubConsent: () => Partial<CookieHubContextState['consent']>;
+export {};

package/CookieHubConsent.js

@@ -0,0 +1,127 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useCookieHubConsent = exports.CookieHubProvider = void 0;
+const react_1 = __importStar(require("react"));
+// END: Mock typing of CookieHub's script API
+// --------------------------------------------------------------------------
+//
+// ---------------------------------------------------------------------------
+const idToken = '[ACCOUNT_ID]';
+const scriptUrlTemplate = process.env.NODE_ENV === 'production'
+    ? `https://cookiehub.net/c2/${idToken}.js`
+    : `https://cookiehub.net/dev/${idToken}.js`;
+const CookieHubContext = (0, react_1.createContext)(undefined);
+/**
+ * Used as the initial/default state when CookieHubProvider mounts and
+ * prepares to load the script
+ */
+const initialConsentState = {
+    consent: {
+        analytics: false,
+        preferences: false,
+        marketing: false,
+        uncategorized: false,
+    },
+};
+/**
+ * Moves the CookieHub `<div/>` to the bottom of the dom tree
+ * for better accessability in screen readers.
+ */
+const moveCookiehubScriptInDomTree = () => {
+    const cookieHubPromptElm = document.querySelector('.ch2');
+    if (cookieHubPromptElm) {
+        document.body.append(cookieHubPromptElm);
+    }
+};
+/**
+ * This context provider component loads and initialises the CookieHub consent
+ * management script and sets up a React state object with the relevant user
+ * consent flags.
+ *
+ * @see https://github.com/reykjavikcity/webtools/tree/v0.1##cookiehubprovider-component
+ */
+const CookieHubProvider = (props) => {
+    const [state, setState] = (0, react_1.useState)(initialConsentState);
+    (0, react_1.useEffect)(() => {
+        const script = document.createElement('script');
+        script.async = true;
+        const opts = props.options || {};
+        script.src =
+            props.scriptUrl != null
+                ? props.scriptUrl
+                : scriptUrlTemplate.replace(idToken, props.accountId);
+        script.onload = () => {
+            window.cookiehub.load(Object.assign(Object.assign({}, opts), { onInitialise(status) {
+                    const analytics = this.hasConsented('analytics');
+                    const preferences = this.hasConsented('preferences');
+                    const marketing = this.hasConsented('marketing');
+                    const uncategorized = this.hasConsented('uncategorized');
+                    // only trigger re-render if the consent is different from the default (all false)
+                    if (analytics || preferences || marketing || uncategorized) {
+                        setState({
+                            consent: {
+                                analytics,
+                                preferences,
+                                marketing,
+                                uncategorized,
+                            },
+                        });
+                    }
+                    opts.onInitialise && opts.onInitialise.call(this, status);
+                },
+                onAllow(category) {
+                    if (category === 'necessary') {
+                        return;
+                    }
+                    setState((state) => (Object.assign(Object.assign({}, state), { consent: Object.assign(Object.assign({}, state.consent), { [category]: true }) })));
+                    opts.onAllow && opts.onAllow.call(this, category);
+                },
+                onRevoke(category) {
+                    if (category === 'necessary') {
+                        return;
+                    }
+                    setState((state) => (Object.assign(Object.assign({}, state), { consent: Object.assign(Object.assign({}, state.consent), { [category]: false }) })));
+                    opts.onAllow && opts.onAllow.call(this, category);
+                }, cookie: Object.assign({ secure: true }, opts.cookie) }));
+            moveCookiehubScriptInDomTree();
+        };
+        props.onError && (script.onerror = props.onError);
+        document.body.append(script);
+    }, 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []);
+    return (react_1.default.createElement(CookieHubContext.Provider, { value: state }, props.children));
+};
+exports.CookieHubProvider = CookieHubProvider;
+// ---------------------------------------------------------------------------
+/**
+ * Returns up-to-date cookie consent flags. For use in React components or hook
+ * functions.
+ *
+ * @see https://github.com/reykjavikcity/webtools/tree/v0.1##usecookiehubconsent
+ */
+const useCookieHubConsent = () => { var _a; return ((_a = (0, react_1.useContext)(CookieHubContext)) === null || _a === void 0 ? void 0 : _a.consent) || {}; };
+exports.useCookieHubConsent = useCookieHubConsent;