@cyguin/banner 0.1.0

package/dist/react.d.mts

@@ -0,0 +1,14 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+export { B as BannerAdapter, C as ConsentDecision, a as ConsentRecordData } from './types-pufIZ_FB.mjs';
+
+interface ConsentBannerProps {
+    apiBase?: string;
+    userId?: string;
+    theme?: 'light' | 'dark';
+    className?: string;
+    onAccept?: () => void;
+    onReject?: () => void;
+}
+declare function ConsentBanner({ apiBase, userId, theme, className, onAccept, onReject, }: ConsentBannerProps): react_jsx_runtime.JSX.Element | null;
+
+export { ConsentBanner, type ConsentBannerProps };

package/dist/react.d.ts

@@ -0,0 +1,14 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+export { B as BannerAdapter, C as ConsentDecision, a as ConsentRecordData } from './types-pufIZ_FB.js';
+
+interface ConsentBannerProps {
+    apiBase?: string;
+    userId?: string;
+    theme?: 'light' | 'dark';
+    className?: string;
+    onAccept?: () => void;
+    onReject?: () => void;
+}
+declare function ConsentBanner({ apiBase, userId, theme, className, onAccept, onReject, }: ConsentBannerProps): react_jsx_runtime.JSX.Element | null;
+
+export { ConsentBanner, type ConsentBannerProps };

package/dist/react.js

@@ -0,0 +1,7 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});
+
+var _chunkLI5BSLUAjs = require('./chunk-LI5BSLUA.js');
+require('./chunk-MCKGQKYU.js');
+
+
+exports.ConsentBanner = _chunkLI5BSLUAjs.ConsentBanner;

package/dist/react.mjs

@@ -0,0 +1,7 @@
+import {
+  ConsentBanner
+} from "./chunk-3R4HB5JY.mjs";
+import "./chunk-EBO3CZXG.mjs";
+export {
+  ConsentBanner
+};

package/dist/types-pufIZ_FB.d.mts

@@ -0,0 +1,14 @@
+type ConsentDecision = 'accept' | 'reject';
+interface ConsentRecordData {
+    id: string;
+    userId: string | null;
+    decision: ConsentDecision;
+    categories: string[];
+    createdAt: number;
+}
+interface BannerAdapter {
+    getConsent(userId?: string): Promise<ConsentRecordData | null>;
+    recordConsent(userId: string | undefined, decision: ConsentDecision, categories: string[]): Promise<ConsentRecordData>;
+}
+
+export type { BannerAdapter as B, ConsentDecision as C, ConsentRecordData as a };

package/dist/types-pufIZ_FB.d.ts

@@ -0,0 +1,14 @@
+type ConsentDecision = 'accept' | 'reject';
+interface ConsentRecordData {
+    id: string;
+    userId: string | null;
+    decision: ConsentDecision;
+    categories: string[];
+    createdAt: number;
+}
+interface BannerAdapter {
+    getConsent(userId?: string): Promise<ConsentRecordData | null>;
+    recordConsent(userId: string | undefined, decision: ConsentDecision, categories: string[]): Promise<ConsentRecordData>;
+}
+
+export type { BannerAdapter as B, ConsentDecision as C, ConsentRecordData as a };

package/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "@cyguin/banner",
+  "version": "0.1.0",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/cyguin/banner"
+  },
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "exports": {
+    ".": "./dist/index.js",
+    "./next": "./dist/handlers/route.js",
+    "./react": "./dist/components/index.js",
+    "./adapters/sqlite": "./dist/adapters/sqlite.js",
+    "./adapters/postgres": "./dist/adapters/postgres.js"
+  },
+  "types": "dist/index.d.ts",
+  "peerDependencies": {
+    "next": ">=14",
+    "react": ">=18",
+    "better-sqlite3": ">=11",
+    "postgres": ">=3"
+  },
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch"
+  },
+  "devDependencies": {
+    "@types/better-sqlite3": "^7.6.11",
+    "@types/node": "^22.0.0",
+    "@types/react": "^18.3.0",
+    "@types/react-dom": "^18.3.0",
+    "next": "^14.2.0",
+    "react": "^18.3.0",
+    "react-dom": "^18.3.0",
+    "tsup": "^8.3.0",
+    "typescript": "^5.5.0"
+  }
+}

package/src/adapters/postgres.ts

@@ -0,0 +1,77 @@
+import type { BannerAdapter, ConsentDecision, ConsentRecordData } from '../types'
+
+export interface PostgresAdapterOptions {
+  connectionString: string
+}
+
+export function PostgresAdapter(options: PostgresAdapterOptions): BannerAdapter {
+  let db: any
+  try {
+    const postgres = require('porsager/postgres')
+    db = postgres(options.connectionString)
+  } catch {
+    throw new Error('porsager/postgres is required. Install with: npm install porsager/postgres')
+  }
+
+  return {
+    async getConsent(userId?: string): Promise<ConsentRecordData | null> {
+      let result: any
+      if (userId) {
+        result = await db`
+          SELECT * FROM consent_records
+          WHERE user_id = ${userId}
+          ORDER BY created_at DESC
+          LIMIT 1
+        `
+      } else {
+        result = await db`
+          SELECT * FROM consent_records
+          ORDER BY created_at DESC
+          LIMIT 1
+        `
+      }
+
+      const row = result[0]
+      if (!row) return null
+
+      return {
+        id: row.id,
+        userId: row.user_id,
+        decision: row.decision as ConsentDecision,
+        categories: row.categories,
+        createdAt: row.created_at,
+      }
+    },
+
+    async recordConsent(
+      userId: string | undefined,
+      decision: ConsentDecision,
+      categories: string[]
+    ): Promise<ConsentRecordData> {
+      const { nanoid } = require('nanoid')
+      const id = nanoid()
+      const createdAt = Date.now()
+
+      const result = await db`
+        INSERT INTO consent_records (id, user_id, decision, categories, created_at)
+        VALUES (
+          ${id},
+          ${userId ?? null},
+          ${decision},
+          ${categories},
+          ${createdAt}
+        )
+        RETURNING *
+      `
+
+      const row = result[0]
+      return {
+        id: row.id,
+        userId: row.user_id,
+        decision: row.decision as ConsentDecision,
+        categories: row.categories,
+        createdAt: row.created_at,
+      }
+    },
+  }
+}

package/src/adapters/sqlite.ts

@@ -0,0 +1,84 @@
+import type { BannerAdapter, ConsentDecision, ConsentRecordData } from '../types'
+
+export interface SQLiteAdapterOptions {
+  path?: string
+}
+
+export function SQLiteAdapter(options: SQLiteAdapterOptions = {}): BannerAdapter {
+  let db: any
+  try {
+    const Database = require('better-sqlite3')
+    const dbPath = (options as any).path ?? './data/banner.db'
+    db = new Database(dbPath)
+    db.pragma('journal_mode = WAL')
+  } catch {
+    throw new Error('better-sqlite3 is required. Install with: npm install better-sqlite3')
+  }
+
+  db.exec(`
+    CREATE TABLE IF NOT EXISTS consent_records (
+      id TEXT PRIMARY KEY,
+      user_id TEXT,
+      decision TEXT NOT NULL,
+      categories TEXT NOT NULL DEFAULT '[]',
+      created_at INTEGER NOT NULL
+    )
+  `)
+
+  return {
+    async getConsent(userId?: string): Promise<ConsentRecordData | null> {
+      let stmt: any
+      if (userId) {
+        stmt = db.prepare(
+          'SELECT * FROM consent_records WHERE user_id = ? ORDER BY created_at DESC LIMIT 1'
+        )
+        const row: any = stmt.get(userId)
+        if (!row) return null
+        return {
+          id: row.id,
+          userId: row.user_id,
+          decision: row.decision as ConsentDecision,
+          categories: JSON.parse(row.categories),
+          createdAt: row.created_at,
+        }
+      } else {
+        stmt = db.prepare(
+          'SELECT * FROM consent_records ORDER BY created_at DESC LIMIT 1'
+        )
+        const row: any = stmt.get()
+        if (!row) return null
+        return {
+          id: row.id,
+          userId: row.user_id,
+          decision: row.decision as ConsentDecision,
+          categories: JSON.parse(row.categories),
+          createdAt: row.created_at,
+        }
+      }
+    },
+
+    async recordConsent(
+      userId: string | undefined,
+      decision: ConsentDecision,
+      categories: string[]
+    ): Promise<ConsentRecordData> {
+      const { nanoid } = require('nanoid')
+      const id = nanoid()
+      const createdAt = Date.now()
+
+      const stmt = db.prepare(`
+        INSERT INTO consent_records (id, user_id, decision, categories, created_at)
+        VALUES (?, ?, ?, ?, ?)
+      `)
+      stmt.run(id, userId ?? null, decision, JSON.stringify(categories), createdAt)
+
+      return {
+        id,
+        userId: userId ?? null,
+        decision,
+        categories,
+        createdAt,
+      }
+    },
+  }
+}

package/src/components/ConsentBanner.tsx

@@ -0,0 +1,186 @@
+import React, { useEffect, useState } from 'react'
+import type { ConsentDecision, ConsentRecordData, BannerAdapter } from '../types'
+
+export type { ConsentDecision, ConsentRecordData, BannerAdapter }
+
+export interface ConsentBannerProps {
+  apiBase?: string
+  userId?: string
+  theme?: 'light' | 'dark'
+  className?: string
+  onAccept?: () => void
+  onReject?: () => void
+}
+
+export function ConsentBanner({
+  apiBase = '/api/banner',
+  userId,
+  theme = 'light',
+  className = '',
+  onAccept,
+  onReject,
+}: ConsentBannerProps) {
+  const [visible, setVisible] = useState(false)
+  const [loading, setLoading] = useState(true)
+
+  useEffect(() => {
+    const checkConsent = async () => {
+      try {
+        const url = new URL(`${apiBase}/[...cyguin]`)
+        url.searchParams.set('cyguin', '')
+        if (userId) url.searchParams.set('userId', userId)
+        const res = await fetch(`${apiBase}/[...cyguin]${url.search}`)
+        if (res.ok) {
+          const data: ConsentRecordData | null = await res.json()
+          if (data) {
+            setLoading(false)
+            return
+          }
+        }
+      } catch {
+        // proceed to show banner
+      }
+      setVisible(true)
+      setLoading(false)
+    }
+    checkConsent()
+  }, [apiBase, userId])
+
+  const handleDecision = async (decision: ConsentDecision) => {
+    try {
+      await fetch(`${apiBase}/[...cyguin]`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ userId, decision, categories: [] }),
+      })
+    } catch {
+      // best-effort
+    }
+    setVisible(false)
+    if (decision === 'accept') {
+      onAccept?.()
+    } else {
+      onReject?.()
+    }
+  }
+
+  if (loading || !visible) return null
+
+  return (
+    <div
+      className={`cyguin-banner ${className}`}
+      data-theme={theme}
+      role="region"
+      aria-label="Cookie consent"
+    >
+      <style>{`
+        .cyguin-banner {
+          --cyguin-bg: #ffffff;
+          --cyguin-bg-subtle: #f5f5f5;
+          --cyguin-border: #e5e5e5;
+          --cyguin-border-focus: #f5a800;
+          --cyguin-fg: #0a0a0a;
+          --cyguin-fg-muted: #888888;
+          --cyguin-accent: #f5a800;
+          --cyguin-accent-dark: #c47f00;
+          --cyguin-accent-fg: #0a0a0a;
+          --cyguin-radius: 6px;
+          --cyguin-shadow: 0 1px 4px rgba(0,0,0,0.08);
+          position: fixed;
+          bottom: 0;
+          left: 0;
+          right: 0;
+          z-index: 99999;
+          background: var(--cyguin-bg);
+          border-top: 1px solid var(--cyguin-border);
+          box-shadow: var(--cyguin-shadow);
+          padding: 16px 24px;
+          font-family: system-ui, -apple-system, sans-serif;
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          gap: 16px;
+          flex-wrap: wrap;
+        }
+        .cyguin-banner[data-theme="dark"] {
+          --cyguin-bg: #0a0a0a;
+          --cyguin-bg-subtle: #1a1a1a;
+          --cyguin-border: #2a2a2a;
+          --cyguin-border-focus: #f5a800;
+          --cyguin-fg: #f5f5f5;
+          --cyguin-fg-muted: #888888;
+          --cyguin-accent: #f5a800;
+          --cyguin-accent-dark: #c47f00;
+          --cyguin-accent-fg: #0a0a0a;
+          --cyguin-radius: 6px;
+          --cyguin-shadow: 0 1px 4px rgba(0,0,0,0.4);
+        }
+        .cyguin-banner__text {
+          color: var(--cyguin-fg);
+          font-size: 14px;
+          line-height: 1.5;
+          margin: 0;
+          flex: 1;
+          min-width: 200px;
+        }
+        .cyguin-banner__text a {
+          color: var(--cyguin-accent);
+          text-decoration: underline;
+        }
+        .cyguin-banner__actions {
+          display: flex;
+          gap: 8px;
+          flex-shrink: 0;
+        }
+        .cyguin-banner__btn {
+          padding: 8px 16px;
+          border-radius: var(--cyguin-radius);
+          font-size: 14px;
+          font-weight: 500;
+          cursor: pointer;
+          border: 1px solid transparent;
+          transition: background 0.15s, border-color 0.15s;
+        }
+        .cyguin-banner__btn--accept {
+          background: var(--cyguin-accent);
+          color: var(--cyguin-accent-fg);
+          border-color: var(--cyguin-accent);
+        }
+        .cyguin-banner__btn--accept:hover {
+          background: var(--cyguin-accent-dark);
+          border-color: var(--cyguin-accent-dark);
+        }
+        .cyguin-banner__btn--reject {
+          background: transparent;
+          color: var(--cyguin-fg-muted);
+          border-color: var(--cyguin-border);
+        }
+        .cyguin-banner__btn--reject:hover {
+          border-color: var(--cyguin-fg-muted);
+          color: var(--cyguin-fg);
+        }
+      `}</style>
+      <p className="cyguin-banner__text">
+        We use cookies to improve your experience. By continuing to browse you agree to our cookie policy.
+      </p>
+      <div className="cyguin-banner__actions">
+        <button
+          className="cyguin-banner__btn cyguin-banner__btn--reject"
+          onClick={() => handleDecision('reject')}
+          type="button"
+        >
+          Reject
+        </button>
+        <button
+          className="cyguin-banner__btn cyguin-banner__btn--accept"
+          onClick={() => handleDecision('accept')}
+          type="button"
+        >
+          Accept
+        </button>
+      </div>
+    </div>
+  )
+}
+
+export default ConsentBanner

package/src/components/index.ts

@@ -0,0 +1,3 @@
+export { ConsentBanner } from './ConsentBanner'
+export type { ConsentBannerProps } from './ConsentBanner'
+export type { ConsentDecision, ConsentRecordData, BannerAdapter } from '../types'

package/src/handlers/route.ts

@@ -0,0 +1,51 @@
+import { NextRequest, NextResponse } from 'next/server'
+import type { BannerAdapter, ConsentDecision } from '../types'
+
+export interface BannerHandlerOptions {
+  adapter: BannerAdapter
+}
+
+export function createBannerHandler(options: BannerHandlerOptions) {
+  const { adapter } = options
+
+  return async function handler(
+    request: NextRequest,
+    { params }: { params: { cyguin: string[] } }
+  ): Promise<NextResponse> {
+    const method = request.method
+
+    if (method === 'GET') {
+      const userId = request.nextUrl.searchParams.get('userId') ?? undefined
+      const record = await adapter.getConsent(userId)
+      if (!record) {
+        return NextResponse.json(null, { status: 200 })
+      }
+      return NextResponse.json(record, { status: 200 })
+    }
+
+    if (method === 'POST') {
+      const body = await request.json()
+      const { userId, decision, categories } = body as {
+        userId?: string
+        decision: ConsentDecision
+        categories?: string[]
+      }
+
+      if (!decision || !['accept', 'reject'].includes(decision)) {
+        return NextResponse.json(
+          { error: 'Invalid decision. Must be "accept" or "reject".' },
+          { status: 400 }
+        )
+      }
+
+      const record = await adapter.recordConsent(
+        userId,
+        decision,
+        categories ?? []
+      )
+      return NextResponse.json(record, { status: 201 })
+    }
+
+    return NextResponse.json({ error: 'Method not allowed' }, { status: 405 })
+  }
+}

package/src/index.ts

@@ -0,0 +1,17 @@
+export type {
+  ConsentDecision,
+  ConsentRecordData,
+  BannerAdapter,
+} from './types'
+
+export { ConsentBanner } from './components/ConsentBanner'
+export type { ConsentBannerProps } from './components/ConsentBanner'
+
+export { SQLiteAdapter } from './adapters/sqlite'
+export type { SQLiteAdapterOptions } from './adapters/sqlite'
+
+export { PostgresAdapter } from './adapters/postgres'
+export type { PostgresAdapterOptions } from './adapters/postgres'
+
+export { createBannerHandler } from './handlers/route'
+export type { BannerHandlerOptions } from './handlers/route'

package/src/types.ts

@@ -0,0 +1,18 @@
+export type ConsentDecision = 'accept' | 'reject'
+
+export interface ConsentRecordData {
+  id: string
+  userId: string | null
+  decision: ConsentDecision
+  categories: string[]
+  createdAt: number
+}
+
+export interface BannerAdapter {
+  getConsent(userId?: string): Promise<ConsentRecordData | null>
+  recordConsent(
+    userId: string | undefined,
+    decision: ConsentDecision,
+    categories: string[]
+  ): Promise<ConsentRecordData>
+}

package/tsconfig.json

@@ -0,0 +1,18 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "lib": ["ES2020", "DOM"],
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "jsx": "react-jsx",
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "declaration": true,
+    "outDir": "dist",
+    "rootDir": "src",
+    "forceConsistentCasingInFileNames": true
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules", "dist"]
+}

package/tsup.config.ts

@@ -0,0 +1,14 @@
+import { defineConfig } from 'tsup'
+
+export default defineConfig({
+  entry: {
+    index: 'src/index.ts',
+    next: 'src/handlers/route.ts',
+    react: 'src/components/index.ts',
+    'adapters/sqlite': 'src/adapters/sqlite.ts',
+    'adapters/postgres': 'src/adapters/postgres.ts',
+  },
+  format: ['esm', 'cjs'],
+  dts: true,
+  splitting: true,
+})