@uninspired/cookie-banner 0.0.12 → 0.0.14

package/README.md

@@ -0,0 +1,206 @@
+# Cookie Banner
+
+Cookie banner for all Uninspired products. Available as React component or HTML embed script.
+
+## Theming
+
+Default theme:
+
+```css
+:root {
+  /* Colors */
+  /* Base */
+  --cb-color-neutral-0: rgb(255, 255, 255);
+  --cb-color-neutral-50: rgb(250, 250, 250);
+  --cb-color-neutral-100: rgb(245, 245, 245);
+  --cb-color-neutral-200: rgb(229, 229, 229);
+  --cb-color-neutral-300: rgb(212, 212, 212);
+  --cb-color-neutral-400: rgb(163, 163, 163);
+  --cb-color-neutral-500: rgb(115, 115, 115);
+  --cb-color-neutral-600: rgb(82, 82, 82);
+  --cb-color-neutral-700: rgb(64, 64, 64);
+  --cb-color-neutral-800: rgb(38, 38, 38);
+  --cb-color-neutral-900: rgb(23, 23, 23);
+  --cb-color-neutral-950: rgb(10, 10, 10);
+
+  --cb-color-brand-50: rgb(236, 253, 245);
+  --cb-color-brand-100: rgb(209, 250, 229);
+  --cb-color-brand-200: rgb(167, 243, 208);
+  --cb-color-brand-300: rgb(110, 231, 183);
+  --cb-color-brand-400: rgb(52, 211, 153);
+  --cb-color-brand-500: rgb(16, 185, 129);
+  --cb-color-brand-600: rgb(5, 150, 105);
+  --cb-color-brand-700: rgb(4, 120, 87);
+  --cb-color-brand-800: rgb(6, 95, 70);
+  --cb-color-brand-900: rgb(6, 78, 59);
+
+  --cb-space-base: 4px;
+  --cb-space-xs: calc(var(--cb-space-base) * 1);
+  --cb-space-sm: calc(var(--cb-space-base) * 2);
+  --cb-space-md: calc(var(--cb-space-base) * 4);
+  --cb-space-lg: calc(var(--cb-space-base) * 6);
+  --cb-space-xl: calc(var(--cb-space-base) * 12);
+
+  /* Typography */
+  --cb-font-family-body: "Nunito Sans", sans-serif;
+  --cb-font-size-body: 14px;
+  --cb-font-weight-body-normal: 400;
+  --cb-font-weight-body-bold: 500;
+  --cb-line-height-body: 20px;
+  --cb-letter-spacing-body: 0em;
+
+  --cb-font-family-caption: "Nunito Sans", sans-serif;
+  --cb-font-size-caption: 12px;
+  --cb-font-weight-caption-normal: 400;
+  --cb-font-weight-caption-bold: 500;
+  --cb-line-height-caption: 16px;
+  --cb-letter-spacing-caption: 0em;
+
+  /* Radius */
+  --cb-radius-base: 6px;
+  --cb-radius-sm: calc(var(--cb-radius-base) * 1);
+  --cb-radius-md: calc(var(--cb-radius-base) * 2);
+  --cb-radius-lg: calc(var(--cb-radius-base) * 3);
+
+  /* Shadow */
+  --cb-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --cb-shadow-md:
+    0 4px 16px -2px rgb(0 0 0 / 0.08), 0 2px 4px -1px rgb(0 0 0 / 0.08);
+  --cb-shadow-lg:
+    0 12px 32px -4px rgb(0 0 0 / 0.08), 0 4px 8px -2px rgb(0 0 0 / 0.08);
+
+  /* Sizes */
+  --cb-size-banner-max-width: 448px;
+  --cb-size-settings-max-height: 448px;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --cb-color-neutral-0: rgb(10, 10, 10);
+    --cb-color-neutral-50: rgb(23, 23, 23);
+    --cb-color-neutral-100: rgb(38, 38, 38);
+    --cb-color-neutral-200: rgb(64, 64, 64);
+    --cb-color-neutral-300: rgb(82, 82, 82);
+    --cb-color-neutral-400: rgb(115, 115, 115);
+    --cb-color-neutral-500: rgb(163, 163, 163);
+    --cb-color-neutral-600: rgb(212, 212, 212);
+    --cb-color-neutral-700: rgb(229, 229, 229);
+    --cb-color-neutral-800: rgb(245, 245, 245);
+    --cb-color-neutral-900: rgb(250, 250, 250);
+    --cb-color-neutral-950: rgb(255, 255, 255);
+
+    --cb-color-brand-50: rgb(15, 41, 30);
+    --cb-color-brand-100: rgb(17, 49, 35);
+    --cb-color-brand-200: rgb(19, 57, 41);
+    --cb-color-brand-300: rgb(22, 68, 48);
+    --cb-color-brand-400: rgb(27, 84, 58);
+    --cb-color-brand-500: rgb(35, 110, 74);
+    --cb-color-brand-600: rgb(48, 164, 108);
+    --cb-color-brand-700: rgb(60, 177, 121);
+    --cb-color-brand-800: rgb(76, 195, 138);
+    --cb-color-brand-900: rgb(229, 251, 235);
+  }
+}
+```
+
+## React component
+
+Install
+
+```bash
+npm install @uninspired/cookie-banner
+```
+
+Use
+
+```tsx
+import "@uninspired/cookie-banner/react/style.css";
+import "@uninspired/cookie-banner/react/theme.css";
+import { Banner } from "@uninspired/cookie-banner/react";
+
+function App() {
+  return <Banner noTarget items={[]} />;
+}
+```
+
+## Embed script
+
+Add this to the document head:
+
+```html
+<link
+  rel="stylesheet"
+  href="https://esm.sh/@uninspired/cookie-banner/script/theme.css"
+/>
+<link
+  rel="stylesheet"
+  href="https://esm.sh/@uninspired/cookie-banner/script/style.css"
+/>
+```
+
+Add this to the end of the document body:
+
+```html
+<script type="module" async defer>
+  import { mountBanner } from "https://esm.sh/@uninspired/cookie-banner/script/index.js";
+  mountBanner({
+    cookie: {
+      domain: ".uninspired.studio",
+      sameSite: "strict",
+      secure: true,
+    },
+    items: [
+      {
+        value: "functional",
+        label: "Functional",
+        sublabel: "The site would break if you disabled these.",
+        required: true,
+        description: `<b>Authentication</b><br/>
+                    <p>Keeps you logged into your account across sessions. These cookies are essential for the app to work correctly and cannot be disabled.</p>
+                    <b>Payments</b><br/>
+                    <p>Required to process purchases and manage your subscription. Used by Paddle to handle transactions, tax calculation, and order management. These cannot be disabled as they're essential to completing and maintaining purchases.</p><b>Referral Tracking</b><br/>
+      <p>Ensures visits and sign-ups via our referral program are attributed correctly. Used by Tolt to credit partners or affiliates when you arrive through a referral link.</p>`,
+        scripts: [],
+      },
+      {
+        value: "analytics",
+        label: "Analytics",
+        sublabel: "Help us make our products better.",
+        defaultSelected: true,
+        description: `<b>Web & Product Analytics</b><br/>
+            <p>Helps us understand how visitors navigate the site and how customers interact with the product — including page views, feature usage, and session flows. Used by PostHog to improve the experience and inform what gets built next.</p>
+            <b>Error Tracking</b><br/>
+            <p>Captures technical errors and crashes to help us diagnose and resolve bugs quickly. Used by PostHog to collect error context without storing personally identifiable information.</p>`,
+        scripts: [
+          {
+            id: "web-analytics",
+            variant: "inline",
+            type: "text/javascript",
+            content: `!function(t,e){var o,n,p,r;e.__SV||(window.posthog=e,e._i=[],e.init=function(i,s,a){function g(t,e){var o=e.split(".");2==o.length&&(t=t[o[0]],e=o[1]),t[e]=function(){t.push([e].concat(Array.prototype.slice.call(arguments,0)))}}(p=t.createElement("script")).type="text/javascript",p.async=!0,p.src=s.api_host.replace(".i.posthog.com","-assets.i.posthog.com")+"/static/array.js",(r=t.getElementsByTagName("script")[0]).parentNode.insertBefore(p,r);var u=e;for(void 0!==a?u=e[a]=[]:a="posthog",u.people=u.people||[],u.toString=function(t){var e="posthog";return"posthog"!==a&&(e+="."+a),t||(e+=" (stub)"),e},u.people.toString=function(){return u.toString(1)+".people (stub)"},o="init capture register register_once register_for_session unregister opt_out_capturing has_opted_out_capturing opt_in_capturing reset isFeatureEnabled getFeatureFlag getFeatureFlagPayload reloadFeatureFlags group identify setPersonProperties setPersonPropertiesForFlags resetPersonPropertiesForFlags setGroupPropertiesForFlags resetGroupPropertiesForFlags resetGroups onFeatureFlags addFeatureFlagsHandler onSessionId getSurveys getActiveMatchingSurveys renderSurvey canRenderSurvey getNextSurveyStep".split(" "),n=0;n<o.length;n++)g(u,o[n]);e._i.push([i,s,a])},e.__SV=1)}(document,window.posthog||[]);
+          posthog.init('phc_hHdoTl2tu6OCEGksFIpD3PYmE8jVIeVOkwe97ebNQAa', {
+              api_host: 'https://eu.i.posthog.com',
+              defaults: '2026-01-30'
+          })`,
+          },
+        ],
+      },
+      {
+        value: "marketing",
+        label: "Marketing",
+        defaultSelected: true,
+        sublabel: "Help us measure the effectiveness of our marketing.",
+        description: `<b>Conversion Tracking</b><br/>
+            <p>Tracks actions taken after interacting with our ads, such as visiting a page or starting a trial. Used by Meta Pixel to measure campaign effectiveness and avoid spending budget on underperforming ads.</p>`,
+        scripts: [
+          {
+            id: "log",
+            variant: "inline",
+            type: "text/javascript",
+            content: "console.log('marketing');",
+          },
+        ],
+      },
+    ],
+  });
+</script>
+```

package/dist/react/index.cjs

@@ -1951,6 +1951,7 @@ function optional(innerType) {
   });
 }
 const remoteScriptDefinitionSchema = /* @__PURE__ */ object({
+  id: /* @__PURE__ */ string(),
   variant: /* @__PURE__ */ literal("remote"),
   type: /* @__PURE__ */ optional(/* @__PURE__ */ string()),
   src: /* @__PURE__ */ string(),
@@ -1960,6 +1961,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()),
@@ -1984,14 +1986,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 = require$$0.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] = require$$0.useState(
+    new Cookies({ domain, prefix, sameSite, secure })
+  );
+  require$$0.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)
@@ -2006,10 +2053,10 @@ const SelectionProvider = ({
     [items]
   );
   const [selection, setSelection] = require$$0.useState(
-    getLsSelection(localStorageKey) ?? defaultSelection
+    getCookieSelection() ?? defaultSelection
   );
   const [savedSelection, setSavedSelection] = require$$0.useState(
-    getLsSelection(localStorageKey)
+    getCookieSelection()
   );
   function toggleSelection(key, value) {
     const newSelection = selection ? { ...selection, [key]: value } : { [key]: value };
@@ -2024,47 +2071,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 = require$$0.useCallback(() => {
     const newSelection = Object.fromEntries(
@@ -2167,7 +2218,7 @@ const BannerItem = ({
   ] });
 };
 const BannerContent = ({
-  noTarget: noTarget2 = true,
+  container,
   heading: heading2 = "We use cookies.",
   subheading = "Please define your selection below.",
   selectLabel = "Select",
@@ -2181,12 +2232,12 @@ const BannerContent = ({
   const { onSave, onDeclineAll, selectionTaken } = useSelection();
   const [openItem, setOpenItem] = require$$0.useState(void 0);
   const [settingsOpen, setSettingsOpen] = require$$0.useState(defaultSettingsOpen);
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(reactDialog.Root, { open: !selectionTaken, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(reactDialog.Root, { open: !selectionTaken, children: /* @__PURE__ */ jsxRuntimeExports.jsx(reactDialog.Portal, { container, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
     reactDialog.Content,
     {
       className: clx({
         [classes$2.root]: true,
-        [classes$2.noTarget]: noTarget2
+        [classes$2.noTarget]: !container
       }),
       children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
         reactCollapsible.Root,
@@ -2244,22 +2295,18 @@ const BannerContent = ({
         }
       )
     }
-  ) });
+  ) }) });
 };
-const Banner = ({
-  localStorageKey = "cb-selection",
-  items,
-  ...rest
-}) => {
+const Banner = ({ cookie, items, ...rest }) => {
   const selectionItems = require$$0.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 }) });
 };
 exports.Banner = Banner;

package/dist/react/index.d.ts

@@ -1,31 +1,26 @@
 import { JSX as JSX_2 } from 'react/jsx-runtime';
 import * as z from 'zod/mini';
 
-export declare const Banner: ({ localStorageKey, items, ...rest }: BannerProps) => JSX_2.Element;
+export declare const Banner: ({ cookie, items, ...rest }: BannerProps) => JSX_2.Element;
 
-declare type BannerItemOptions = BannerItemOptionsRequired | BannerItemOptionsOptional;
-
-declare interface BannerItemOptionsBase {
+declare interface BannerItemOptions {
     value: string;
     label: string;
     defaultSelected?: boolean;
     sublabel?: string;
     required?: boolean;
     description?: string;
-}
-
-declare interface BannerItemOptionsOptional extends BannerItemOptionsBase {
-    required: false;
-    script: ScriptDefinition;
-}
-
-declare interface BannerItemOptionsRequired extends BannerItemOptionsBase {
-    required: true;
-    script: undefined;
+    scripts: ScriptDefinition[];
 }
 
 declare interface BannerOptions {
-    localStorageKey?: string;
+    container?: HTMLElement;
+    cookie: {
+        domain: string;
+        prefix?: string;
+        sameSite?: "lax" | "strict" | "none";
+        secure?: boolean;
+    };
     heading?: string;
     subheading?: string;
     selectLabel?: string;
@@ -41,12 +36,12 @@ declare interface BannerOptions {
 }
 
 export declare interface BannerProps extends BannerOptions {
-    noTarget?: boolean;
 }
 
 declare type ScriptDefinition = z.infer<typeof scriptDefinitionSchema>;
 
 declare const scriptDefinitionSchema: z.ZodMiniDiscriminatedUnion<[z.ZodMiniObject<{
+    id: z.ZodMiniString<string>;
     variant: z.ZodMiniLiteral<"remote">;
     type: z.ZodMiniOptional<z.ZodMiniString<string>>;
     src: z.ZodMiniString<string>;
@@ -55,6 +50,7 @@ declare const scriptDefinitionSchema: z.ZodMiniDiscriminatedUnion<[z.ZodMiniObje
     crossorigin: z.ZodMiniOptional<z.ZodMiniString<string>>;
     integrity: z.ZodMiniOptional<z.ZodMiniString<string>>;
 }, z.core.$strip>, z.ZodMiniObject<{
+    id: z.ZodMiniString<string>;
     variant: z.ZodMiniLiteral<"inline">;
     type: z.ZodMiniOptional<z.ZodMiniString<string>>;
     async: z.ZodMiniOptional<z.ZodMiniBoolean<boolean>>;