@uninspired/cookie-banner 0.0.11 → 0.0.13

package/dist/react/index.js

@@ -1,4 +1,4 @@
-import require$$0, { useMemo, useState, useEffect, useCallback, createContext, useContext } from "react";
+import require$$0, { useState, useEffect, useMemo, useCallback, createContext, useContext } from "react";
 import { Item, Trigger, Content, Root as Root$3 } from "@radix-ui/react-accordion";
 import { ChevronDown, ChevronUp } from "lucide-react";
 import { Root as Root$1, Content as Content$1, Title, Description, Close } from "@radix-ui/react-dialog";
@@ -962,25 +962,25 @@ const Text = ({
     )
   );
 };
-const root$2 = "_root_2wcp0_53";
-const open$1 = "_open_2wcp0_66";
-const noTarget = "_noTarget_2wcp0_72";
-const collapsible = "_collapsible_2wcp0_81";
-const header$1 = "_header_2wcp0_84";
-const heading = "_heading_2wcp0_91";
-const chevron$1 = "_chevron_2wcp0_97";
-const settings = "_settings_2wcp0_108";
-const footer = "_footer_2wcp0_122";
-const legal = "_legal_2wcp0_129";
-const actions$1 = "_actions_2wcp0_132";
+const root$2 = "_root_12udu_53";
+const noTarget = "_noTarget_12udu_65";
+const collapsible = "_collapsible_12udu_74";
+const header$1 = "_header_12udu_77";
+const heading = "_heading_12udu_84";
+const chevron$1 = "_chevron_12udu_90";
+const open$1 = "_open_12udu_95";
+const settings = "_settings_12udu_101";
+const footer = "_footer_12udu_115";
+const legal = "_legal_12udu_122";
+const actions$1 = "_actions_12udu_125";
 const classes$2 = {
   root: root$2,
-  open: open$1,
   noTarget,
   collapsible,
   header: header$1,
   heading,
   chevron: chevron$1,
+  open: open$1,
   settings,
   footer,
   legal,
@@ -1949,6 +1949,7 @@ function optional(innerType) {
   });
 }
 const remoteScriptDefinitionSchema = /* @__PURE__ */ object({
+  id: /* @__PURE__ */ string(),
   variant: /* @__PURE__ */ literal("remote"),
   type: /* @__PURE__ */ optional(/* @__PURE__ */ string()),
   src: /* @__PURE__ */ string(),
@@ -1958,6 +1959,7 @@ const remoteScriptDefinitionSchema = /* @__PURE__ */ object({
   integrity: /* @__PURE__ */ optional(/* @__PURE__ */ string())
 });
 const inlineScriptDefinitionSchema = /* @__PURE__ */ object({
+  id: /* @__PURE__ */ string(),
   variant: /* @__PURE__ */ literal("inline"),
   type: /* @__PURE__ */ optional(/* @__PURE__ */ string()),
   async: /* @__PURE__ */ optional(/* @__PURE__ */ boolean()),
@@ -1982,14 +1984,59 @@ const Switch = ({ label: label2, id, ...rest }) => {
   ] });
 };
 const selectionSchema = /* @__PURE__ */ record(/* @__PURE__ */ string(), /* @__PURE__ */ boolean());
+class Cookies {
+  #domain;
+  #prefix;
+  #sameSite;
+  #secure;
+  constructor(options) {
+    this.#domain = options.domain;
+    this.#prefix = options.prefix ?? "us-cookie-banner-";
+    this.#sameSite = options.sameSite ?? "lax";
+    this.#secure = options.secure ?? true;
+  }
+  #serialize = (data) => {
+    return btoa(String.fromCharCode(...new TextEncoder().encode(data)));
+  };
+  #deserialize = (data) => {
+    return new TextDecoder().decode(
+      Uint8Array.from(atob(data), (c) => c.charCodeAt(0))
+    );
+  };
+  set = (key, value, ttl = 365) => {
+    const expires = new Date(Date.now() + ttl * 24 * 60 * 60 * 1e3);
+    const cookie = `${this.#prefix}${key}=${this.#serialize(value)}; expires=${expires}; path=/; domain=${this.#domain}; SameSite=${this.#sameSite}; ${this.#secure ? "secure" : ""}`;
+    document.cookie = cookie;
+  };
+  get = (key) => {
+    const match = document.cookie.match(
+      new RegExp(`(?:^|; )${this.#prefix}${key}=([^;]*)`)
+    );
+    if (!match) return null;
+    const [_, serializedValue] = match;
+    if (!serializedValue) return null;
+    return this.#deserialize(serializedValue);
+  };
+  remove = (key) => {
+    this.set(key, "", -1);
+  };
+}
+const SELECTION_KEY = "selection";
 const SelectionContext = createContext(null);
 const SelectionProvider = ({
   children,
   items,
-  localStorageKey
+  cookie
 }) => {
-  function getLsSelection(localStorageKey2) {
-    const storedSelection = localStorage.getItem(localStorageKey2);
+  const { domain, prefix, sameSite, secure } = cookie;
+  const [cookies, setCookies] = useState(
+    new Cookies({ domain, prefix, sameSite, secure })
+  );
+  useEffect(() => {
+    setCookies(new Cookies({ domain, prefix, sameSite, secure }));
+  }, [domain, prefix, sameSite, secure]);
+  function getCookieSelection() {
+    const storedSelection = cookies.get(SELECTION_KEY);
     if (!storedSelection) return null;
     const { success, data } = selectionSchema.safeParse(
       JSON.parse(storedSelection)
@@ -2004,10 +2051,10 @@ const SelectionProvider = ({
     [items]
   );
   const [selection, setSelection] = useState(
-    getLsSelection(localStorageKey) ?? defaultSelection
+    getCookieSelection() ?? defaultSelection
   );
   const [savedSelection, setSavedSelection] = useState(
-    getLsSelection(localStorageKey)
+    getCookieSelection()
   );
   function toggleSelection(key, value) {
     const newSelection = selection ? { ...selection, [key]: value } : { [key]: value };
@@ -2022,47 +2069,51 @@ const SelectionProvider = ({
       (item) => selectedValues.includes(item.value)
     );
     for (const item of items) {
-      const elem = document.head.querySelector(`#${item.value}`);
-      if (!elem) continue;
-      elem.remove();
+      if (!item.scripts) continue;
+      for (const script of item.scripts) {
+        const elem = document.head.querySelector(`#${item.value}-${script.id}`);
+        if (!elem) continue;
+        elem.remove();
+      }
     }
     for (const item of mountedItems) {
-      const elem = document.createElement("script");
-      elem.id = item.value;
-      if (!item.script) {
+      if (!item.scripts) {
         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;
+      for (const script of item.scripts) {
+        if (!script) continue;
+        const elem = document.createElement("script");
+        elem.id = `${item.value}-${script.id}`;
+        const { success, data } = scriptDefinitionSchema.safeParse(script);
+        if (!success) {
+          console.error(
+            "CookieBanner: Invalid script definition for",
+            item.value
+          );
+          continue;
+        }
+        elem.type = data.type ?? "text/javascript";
+        elem.async = data.async ?? false;
+        elem.defer = data.defer ?? false;
+        switch (data.variant) {
+          case "inline":
+            elem.textContent = data.content;
+            break;
+          case "remote":
+            elem.src = data.src;
+            elem.crossOrigin = data.crossorigin ?? null;
+            elem.integrity = data.integrity ?? "";
+            break;
+        }
+        document.head.appendChild(elem);
       }
-      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));
+    cookies.set(SELECTION_KEY, JSON.stringify(newSelection));
   }
   const onDeclineAll = useCallback(() => {
     const newSelection = Object.fromEntries(
@@ -2244,21 +2295,17 @@ const BannerContent = ({
     }
   ) });
 };
-const Banner = ({
-  localStorageKey = "cb-selection",
-  items,
-  ...rest
-}) => {
+const Banner = ({ cookie, items, ...rest }) => {
   const selectionItems = useMemo(
     () => items.filter((item) => !item.required).map((item) => ({
       value: item.value,
-      script: item.script,
+      scripts: item.scripts,
       defaultSelected: item.defaultSelected,
       required: item.required
     })),
     [items]
   );
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(SelectionProvider, { items: selectionItems, localStorageKey, children: /* @__PURE__ */ jsxRuntimeExports.jsx(BannerContent, { items, ...rest }) });
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(SelectionProvider, { items: selectionItems, cookie, children: /* @__PURE__ */ jsxRuntimeExports.jsx(BannerContent, { items, cookie, ...rest }) });
 };
 export {
   Banner

package/dist/react/style.css

@@ -102,7 +102,7 @@
     }
   }
 }
-@keyframes _contentShow_2wcp0_1 {
+@keyframes _contentShow_12udu_1 {
   from {
     opacity: 0;
     transform: translateX(-100px);
@@ -113,7 +113,7 @@
   }
 }
 
-@keyframes _contentHide_2wcp0_1 {
+@keyframes _contentHide_12udu_1 {
   from {
     opacity: 1;
     transform: translateX(0px);
@@ -124,7 +124,7 @@
   }
 }
 
-@keyframes _slideDown_2wcp0_1 {
+@keyframes _slideDown_12udu_1 {
   0% {
     max-height: var(--cb-size-settings-max-height);
     overflow: auto;
@@ -139,7 +139,7 @@
   }
 }
 
-@keyframes _slideUp_2wcp0_1 {
+@keyframes _slideUp_12udu_1 {
   0% {
     max-height: 0;
     overflow: hidden;
@@ -154,9 +154,8 @@
   }
 }
 
-._root_2wcp0_53 {
-  display: none;
-  visibility: hidden;
+._root_12udu_53 {
+  display: flex;
   flex-direction: column;
   gap: var(--cb-space-md);
   padding: var(--cb-space-md);
@@ -165,15 +164,9 @@
   border-radius: var(--cb-radius-md);
   overflow: hidden;
   will-change: opacity, transform;
-  animation: _contentHide_2wcp0_1 150ms cubic-bezier(0.16, 1, 0.3, 1);
-
-  &._open_2wcp0_66 {
-    visibility: visible;
-    display: flex;
-    animation: _contentShow_2wcp0_1 150ms cubic-bezier(0.16, 1, 0.3, 1);
-  }
+  animation: _contentShow_12udu_1 150ms cubic-bezier(0.16, 1, 0.3, 1);
 
-  &._noTarget_2wcp0_72 {
+  &._noTarget_12udu_65 {
     position: fixed;
     bottom: var(--cb-space-md);
     left: var(--cb-space-md);
@@ -182,58 +175,58 @@
     max-width: var(--cb-size-banner-max-width);
   }
 
-  ._collapsible_2wcp0_81 {
+  ._collapsible_12udu_74 {
     display: contents;
 
-    ._header_2wcp0_84 {
+    ._header_12udu_77 {
       display: flex;
       flex-direction: row;
       align-items: flex-start;
       justify-content: space-between;
       gap: var(--cb-space-md);
 
-      ._heading_2wcp0_91 {
+      ._heading_12udu_84 {
         display: flex;
         flex-direction: column;
         align-items: flex-start;
       }
 
-      ._chevron_2wcp0_97 {
+      ._chevron_12udu_90 {
         transform: rotate(0deg);
         will-change: transform;
         transition: transform 150ms ease-out;
 
-        &._open_2wcp0_66 {
+        &._open_12udu_95 {
           transform: rotate(180deg);
         }
       }
     }
 
-    ._settings_2wcp0_108 {
+    ._settings_12udu_101 {
       display: flex;
       flex-direction: column;
       background-color: var(--cb-color-background-muted);
       border-radius: var(--cb-radius-md);
       overflow: hidden;
       will-change: max-height, overflow;
-      animation: _slideDown_2wcp0_1 250ms ease-out;
+      animation: _slideDown_12udu_1 250ms ease-out;
 
       &[data-state="open"] {
-        animation: _slideUp_2wcp0_1 250ms ease-out;
+        animation: _slideUp_12udu_1 250ms ease-out;
       }
     }
 
-    ._footer_2wcp0_122 {
+    ._footer_12udu_115 {
       display: flex;
       flex-direction: row;
       align-items: center;
       justify-content: space-between;
       gap: var(--cb-space-md);
 
-      ._legal_2wcp0_129 {
+      ._legal_12udu_122 {
       }
 
-      ._actions_2wcp0_132 {
+      ._actions_12udu_125 {
         display: flex;
         flex-direction: row;
         align-items: center;