@uninspired/cookie-banner 0.0.4 → 0.0.6

package/dist/components/Banner/Banner.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
+import { useMemo, useState } from "react";
+import { cls, clx } from "../../utils/classes";
+import { Button } from "../Button";
+import { Text } from "../Text";
+import classes from "./Banner.module.css";
+import { BannerItem } from "../BannerItem";
+import { Root as AccordionRoot } from "@radix-ui/react-accordion";
+import { ChevronUp } from "lucide-react";
+import { SelectionProvider, useSelection, } from "../../contexts/SelectionContext";
+import { Root as DialogRoot, Content as DialogContent, Title as DialogTitle, Description as DialogDescription, Close as DialogClose, } from "@radix-ui/react-dialog";
+import { Root as CollapsibleRoot, Trigger as CollapsibleTrigger, Content as CollapsibleContent, } from "@radix-ui/react-collapsible";
+import "../../styles/variables.css";
+const BannerContent = ({ noTarget = true, heading = "We use cookies.", subheading = "Please define your selection below.", selectLabel = "Select", hideLabel = "Hide", saveLabel = "Save selection", declineLabel = "Decline all", defaultSettingsOpen = true, privacyPolicy, items, }) => {
+    const { onSave, onDeclineAll, selectionTaken } = useSelection();
+    const [openItem, setOpenItem] = useState(undefined);
+    const [settingsOpen, setSettingsOpen] = useState(defaultSettingsOpen);
+    return (_jsx(DialogRoot, { open: !selectionTaken, children: _jsx(DialogContent, { className: cls(classes.root, noTarget ? classes.noTarget : ""), children: _jsxs(CollapsibleRoot, { open: settingsOpen, onOpenChange: setSettingsOpen, className: classes.collapsible, children: [_jsxs("div", { className: classes.header, children: [_jsxs("div", { className: classes.heading, children: [_jsx(DialogTitle, { asChild: true, children: _jsx(Text, { weight: "bold", children: heading }) }), _jsx(DialogDescription, { asChild: true, children: _jsx(Text, { size: "caption", color: "muted", children: subheading }) })] }), _jsx(CollapsibleTrigger, { asChild: true, children: _jsxs(Button, { variant: "ghost", children: [settingsOpen ? hideLabel : selectLabel, "\u00A0", _jsx(ChevronUp, { size: 12, className: clx({
+                                                [classes.chevron]: true,
+                                                [classes.open]: settingsOpen,
+                                            }) })] }) })] }), _jsx(CollapsibleContent, { className: clx({
+                            [classes.settings]: true,
+                        }), children: _jsx(AccordionRoot, { type: "single", collapsible: true, value: openItem, onValueChange: setOpenItem, children: items.map((item) => (_jsx(BannerItem, { ...item, openItem: openItem }, item.value))) }) }), _jsxs("div", { className: classes.footer, children: [_jsx("div", { className: classes.legal, children: privacyPolicy && (_jsx(Text, { size: "caption", children: _jsx("a", { href: privacyPolicy.url, target: "_blank", children: privacyPolicy.label }) })) }), _jsxs("div", { className: classes.actions, children: [_jsx(DialogClose, { asChild: true, children: _jsx(Button, { variant: "neutral", onClick: () => onDeclineAll(), children: declineLabel }) }), _jsx(DialogClose, { asChild: true, children: _jsx(Button, { variant: "brand", onClick: () => onSave(), children: saveLabel }) })] })] })] }) }) }));
+};
+export const Banner = ({ localStorageKey = "cb-selection", items, ...rest }) => {
+    const selectionItems = useMemo(() => items
+        .filter((item) => !item.required)
+        .map((item) => ({
+        value: item.value,
+        script: item.script,
+        defaultSelected: item.defaultSelected,
+        required: item.required,
+    })), [items]);
+    return (_jsx(SelectionProvider, { items: selectionItems, localStorageKey: localStorageKey, children: _jsx(BannerContent, { items: items, ...rest }) }));
+};

package/dist/components/Banner/index.js

@@ -0,0 +1 @@
+export * from "./Banner";

package/dist/components/BannerItem/BannerItem.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
+import classes from "./BannerItem.module.css";
+import {} from "../../utils/scriptDefinition";
+import { Text } from "../Text";
+import { Item, Trigger, Content } from "@radix-ui/react-accordion";
+import { ChevronDown } from "lucide-react";
+import { clx } from "../../utils/classes";
+import { Switch } from "../Switch";
+import { useEffect, useMemo } from "react";
+import { useSelection } from "../../contexts/SelectionContext";
+export const BannerItem = ({ value, label, sublabel, required = false, description, openItem, }) => {
+    const { toggleSelection, selection } = useSelection();
+    const selected = useMemo(() => selection?.[value] ?? false, [selection, value]);
+    useEffect(() => {
+        toggleSelection(value, selected);
+    }, [value, selected]);
+    const checked = useMemo(() => (required ? true : selected), [required, selected]);
+    const onCheckedChange = useMemo(() => (checked) => required ? () => { } : toggleSelection(value, checked), [required, toggleSelection, value]);
+    const disabled = useMemo(() => required, [required]);
+    return (_jsxs(Item, { value: value, className: classes.root, children: [_jsxs("div", { className: classes.header, children: [_jsx(Trigger, { asChild: true, children: _jsxs("div", { className: classes.label, children: [_jsx(Text, { weight: "bold", children: label }), sublabel && (_jsx(Text, { size: "caption", color: "muted", children: sublabel }))] }) }), _jsxs("div", { className: classes.actions, children: [_jsx(Switch, { checked: checked, onCheckedChange: onCheckedChange, disabled: disabled }), _jsx(Trigger, { asChild: true, children: _jsx(ChevronDown, { size: 16, className: clx({
+                                        [classes.chevron]: true,
+                                        [classes.open]: openItem === value,
+                                    }) }) })] })] }), description && (_jsx(Content, { className: classes.description, children: _jsx(Text, { size: "caption", dangerouslySetInnerHTML: { __html: description } }) }))] }));
+};

package/dist/components/BannerItem/index.js

@@ -0,0 +1 @@
+export * from "./BannerItem";

package/dist/components/Button/Button.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "preact/jsx-runtime";
+import classes from "./Button.module.css";
+import { cls } from "../../utils/classes";
+export const Button = ({ variant = "neutral", ...rest }) => {
+    return _jsx("button", { className: cls(classes.root, classes[variant]), ...rest });
+};

package/dist/components/Button/index.js

@@ -0,0 +1 @@
+export * from "./Button";

package/dist/components/Switch/Switch.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
+import { Root, Thumb, } from "@radix-ui/react-switch";
+import classes from "./Switch.module.css";
+import { Text } from "../Text";
+export const Switch = ({ label, id, ...rest }) => {
+    return (_jsxs("div", { className: classes.root, children: [label && (_jsx(Text, { className: classes.label, as: "label", htmlFor: id, children: label })), _jsx(Root, { className: classes.switch, ...rest, children: _jsx(Thumb, { className: classes.thumb }) })] }));
+};

package/dist/components/Switch/index.js

@@ -0,0 +1 @@
+export * from "./Switch";

package/dist/components/Text/Text.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "preact/jsx-runtime";
+import { cls } from "../../utils/classes";
+import classes from "./Text.module.css";
+export const Text = ({ as = "span", size = "body", weight = "normal", color = "default", ...rest }) => {
+    const Component = as ?? "span";
+    return (
+    // @ts-ignore
+    _jsx(Component, { className: cls(classes.root, classes[size], classes[weight], classes[color]), ...rest }));
+};

package/dist/components/Text/index.js

@@ -0,0 +1 @@
+export * from "./Text";

package/dist/contexts/SelectionContext.js

@@ -0,0 +1,101 @@
+import { jsx as _jsx } from "preact/jsx-runtime";
+import { createContext, useCallback, useContext, useEffect, useMemo, useState, } from "react";
+import { selectionSchema } from "../utils/selection";
+import { scriptDefinitionSchema } from "../utils/scriptDefinition";
+export const SelectionContext = createContext(null);
+export const SelectionProvider = ({ children, items, localStorageKey, }) => {
+    function getLsSelection(localStorageKey) {
+        const storedSelection = localStorage.getItem(localStorageKey);
+        if (!storedSelection)
+            return null;
+        const { success, data } = selectionSchema.safeParse(JSON.parse(storedSelection));
+        if (!success)
+            return null;
+        return data;
+    }
+    const defaultSelection = useMemo(() => Object.fromEntries(items.map((item) => [item.value, item.defaultSelected ?? false])), [items]);
+    const [selection, setSelection] = useState(getLsSelection(localStorageKey) ?? defaultSelection);
+    const [savedSelection, setSavedSelection] = useState(getLsSelection(localStorageKey));
+    function toggleSelection(key, value) {
+        const newSelection = selection
+            ? { ...selection, [key]: value }
+            : { [key]: value };
+        setSelection(newSelection);
+    }
+    useEffect(() => {
+        let selectedValues = [];
+        if (savedSelection !== null) {
+            selectedValues = Object.entries(savedSelection)
+                .filter(([_, value]) => value)
+                .map(([key]) => key);
+        }
+        const mountedItems = items.filter((item) => selectedValues.includes(item.value));
+        for (const item of items) {
+            const elem = document.head.querySelector(`#${item.value}`);
+            if (!elem)
+                continue;
+            elem.remove();
+        }
+        for (const item of mountedItems) {
+            const elem = document.createElement("script");
+            elem.id = item.value;
+            if (!item.script) {
+                if (!item.required)
+                    console.warn("CookieBanner: Missing script for", item.value);
+                continue;
+            }
+            const { success, data: script } = scriptDefinitionSchema.safeParse(item.script);
+            if (!success) {
+                console.error("CookieBanner: Invalid script definition for", item.value);
+                continue;
+            }
+            elem.type = script.type ?? "text/javascript";
+            elem.async = script.async ?? false;
+            elem.defer = script.defer ?? false;
+            switch (script.variant) {
+                case "inline":
+                    elem.textContent = script.content;
+                    break;
+                case "remote":
+                    elem.src = script.src;
+                    elem.crossOrigin = script.crossorigin ?? null;
+                    elem.integrity = script.integrity ?? "";
+                    break;
+            }
+            document.head.appendChild(elem);
+        }
+    }, [savedSelection, items]);
+    function saveSelection(newSelection) {
+        setSavedSelection(newSelection);
+        localStorage.setItem(localStorageKey, JSON.stringify(newSelection));
+    }
+    const onDeclineAll = useCallback(() => {
+        const newSelection = Object.fromEntries(items.map((item) => [item.value, false]));
+        setSelection(newSelection);
+        saveSelection(newSelection);
+    }, [items]);
+    const onSave = useCallback(() => {
+        saveSelection(selection);
+    }, [selection]);
+    const selectionTaken = useMemo(() => {
+        if (!savedSelection)
+            return false;
+        const selectedKeys = Object.keys(savedSelection);
+        const itemKeys = items.map((item) => item.value);
+        return itemKeys.every((key) => selectedKeys.includes(key));
+    }, [savedSelection, items]);
+    return (_jsx(SelectionContext.Provider, { value: {
+            selection,
+            toggleSelection,
+            onDeclineAll,
+            onSave,
+            selectionTaken,
+        }, children: children }));
+};
+export function useSelection() {
+    const context = useContext(SelectionContext);
+    if (!context) {
+        throw new Error("useSelection must be used within a SelectionProvider");
+    }
+    return context;
+}