@uninspired/cookie-banner 0.0.11 → 0.0.13

package/README.md

@@ -0,0 +1,202 @@
+# 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: "log",
+            variant: "inline",
+            type: "text/javascript",
+            content: "console.log('analytics');",
+          },
+        ],
+      },
+      {
+        value: "marketing",
+        label: "Marketing",
+        defaultSelected: true,
+        sublabel: "Oops, something broke!",
+        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

@@ -964,25 +964,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,
@@ -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(
@@ -2246,20 +2297,16 @@ 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,25 @@
 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;
+    cookie: {
+        domain: string;
+        prefix?: string;
+        sameSite?: "lax" | "strict" | "none";
+        secure?: boolean;
+    };
     heading?: string;
     subheading?: string;
     selectLabel?: string;
@@ -47,6 +41,7 @@ export declare interface BannerProps extends BannerOptions {
 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>>;