@el7ven/cookie-kit 0.2.15

package/src/js/version.js

@@ -0,0 +1,29 @@
+/**
+ * Version metadata for package runtime.
+ */
+
+export const VERSION = '1.0.0-beta.0'
+export const PACKAGE_NAME = '@el7ven/cookie-consent/js'
+
+// JS adapter version metadata.
+export const VERSION_INFO = {
+  version: VERSION,
+  name: PACKAGE_NAME,
+  buildDate: new Date().toISOString(),
+  environment: 'production'
+}
+
+// Return package version.
+export function getVersion() {
+  return VERSION
+}
+
+// Return full version metadata.
+export function getVersionInfo() {
+  return VERSION_INFO
+}
+
+// Print runtime version in debug-friendly format.
+export function logVersion() {
+  console.log(`🍪 ${PACKAGE_NAME} v${VERSION}`)
+}

package/src/react/CookieConsent.tsx

@@ -0,0 +1,152 @@
+import React, { useState, useEffect, useRef, useCallback } from 'react'
+import { useCookieKit } from './index.js'
+import { CookieDrawer } from './CookieDrawer'
+import { CookieConfig } from './types'
+import '@el7ven/cookie-consent/dist/styles'
+
+interface CookieConsentProps {
+  config?: CookieConfig
+}
+
+export const CookieConsent: React.FC<CookieConsentProps> = ({ 
+  config = {
+    categories: {
+      necessary: { required: true, enabled: true, name: 'Essential Cookies' },
+      analytics: { required: false, enabled: true, name: 'Analytics Cookies' },
+      marketing: { required: false, enabled: false, name: 'Marketing Cookies' }
+    },
+    consentExpireDays: 365,
+    version: '0.2.0'
+  }
+}) => {
+  const {
+    consent,
+    acceptAll,
+    rejectAll,
+    acceptCategory,
+    hasConsent,
+    hasCategoryConsent
+  } = useCookieKit(config)
+
+  // Local state
+  const [isSettingsMode, setIsSettingsMode] = useState(false)
+  const [currentTab, setCurrentTab] = useState('privacy')
+  const [categories, setCategories] = useState(config.categories)
+  const drawerRef = useRef<HTMLDivElement>(null)
+
+  const isVisible = !consent?.hasConsented
+  const consentVersion = config.version || '0.2.0'
+  const isV2 = true
+  const themeVarsStyle = Object.fromEntries(
+    Object.entries(config.themeVars || {}).map(([key, value]) => [key.startsWith('--') ? key : `--${key}`, value])
+  ) as React.CSSProperties
+
+  const enabledSettingsTabs = Object.keys(config.categories || {}).filter(categoryId => {
+    return config.categories[categoryId]?.enabled
+  })
+
+  const openSettings = useCallback(() => {
+    setIsSettingsMode(true)
+  }, [])
+
+  const closeSettings = useCallback(() => {
+    if (consent?.hasConsented) {
+      return
+    }
+    setIsSettingsMode(false)
+  }, [consent])
+
+  const acceptSelection = useCallback(() => {
+    // Save current category states
+    Object.keys(categories).forEach(id => {
+      const isEnabled = categories[id]?.enabled
+      if (isEnabled !== undefined) {
+        acceptCategory(id, isEnabled)
+      }
+    })
+  }, [categories, acceptCategory])
+
+  const selectTab = useCallback((tabId: string) => {
+    setCurrentTab(tabId)
+  }, [])
+
+  // Event handlers
+  const handleAcceptAll = useCallback(() => {
+    acceptAll()
+  }, [acceptAll])
+
+  const handleRejectAll = useCallback(() => {
+    rejectAll()
+  }, [rejectAll])
+
+  const handleAcceptSelection = useCallback(() => {
+    acceptSelection()
+  }, [acceptSelection])
+
+  const handleOpenSettings = useCallback(() => {
+    openSettings()
+  }, [openSettings])
+
+  const handleSelectTab = useCallback((tabId: string) => {
+    selectTab(tabId)
+  }, [selectTab])
+
+  const handleToggleCategory = useCallback((categoryId: string) => {
+    const current = categories[categoryId]
+    if (current) {
+      setCategories(prev => ({
+        ...prev,
+        [categoryId]: { ...current, enabled: !current.enabled }
+      }))
+    }
+  }, [categories])
+
+  const handleClose = useCallback(() => {
+    if (isSettingsMode) {
+      closeSettings()
+    } else {
+      // Banner will auto-hide when consent is given
+    }
+  }, [isSettingsMode, closeSettings])
+
+  // Focus trap logic (simplified)
+  useEffect(() => {
+    if (isVisible && drawerRef.current && config.debug) {
+      console.log('[CookieConsent] Focus trap activated')
+    }
+  }, [isVisible, config.debug])
+
+  // Expose methods for external use
+  React.useImperativeHandle(React.createRef(), () => ({
+    acceptAll: handleAcceptAll,
+    rejectAll: handleRejectAll,
+    resetConsent: () => {
+      // Reset logic if needed
+    }
+  }))
+
+  return (
+    <div className="cookie-consent" data-cookie-kit-theme={config.theme || 'light'} style={themeVarsStyle}>
+      <CookieDrawer
+        ref={drawerRef}
+        isVisible={isVisible}
+        isSettingsMode={isSettingsMode}
+        currentTab={currentTab}
+        categories={categories}
+        config={config}
+        consentVersion={consentVersion}
+        capabilities={{}}
+        isV2={isV2}
+        onClose={handleClose}
+        onOpenSettings={handleOpenSettings}
+        onSelectTab={handleSelectTab}
+        onToggleCategory={handleToggleCategory}
+        onAcceptSelection={handleAcceptSelection}
+        onAcceptAll={handleAcceptAll}
+        onRejectAll={handleRejectAll}
+      />
+    </div>
+  )
+}
+
+export default CookieConsent

package/src/react/CookieDrawer.tsx

@@ -0,0 +1,233 @@
+import React, { forwardRef, useRef, useEffect } from 'react'
+import { CookieConfig } from './types'
+
+interface CookieDrawerProps {
+  isVisible: boolean
+  isSettingsMode: boolean
+  currentTab: string
+  categories: Record<string, any>
+  config: CookieConfig
+  consentVersion: string
+  capabilities: Record<string, any>
+  isV2: boolean
+  onClose: () => void
+  onOpenSettings: () => void
+  onSelectTab: (tabId: string) => void
+  onToggleCategory: (categoryId: string) => void
+  onAcceptSelection: () => void
+  onAcceptAll: () => void
+  onRejectAll: () => void
+}
+
+export const CookieDrawer = forwardRef<HTMLDivElement, CookieDrawerProps>(({
+  isVisible,
+  isSettingsMode,
+  currentTab,
+  categories,
+  config,
+  consentVersion,
+  capabilities,
+  isV2,
+  onClose,
+  onOpenSettings,
+  onSelectTab,
+  onToggleCategory,
+  onAcceptSelection,
+  onAcceptAll,
+  onRejectAll
+}, ref) => {
+  const drawerRef = useRef<HTMLDivElement>(null)
+
+  const isEssentialBanner = config.mode === 'essential'
+
+  const drawerClasses = {
+    'cookie-drawer__content-wrapper--settings': isSettingsMode,
+    'cookie-drawer__content-wrapper--banner': !isSettingsMode
+  }
+
+  const rootClasses = {
+    'cookie-drawer__content-wrapper--bottom': true
+  }
+
+  const drawerAnimation = isSettingsMode ? 'drawer-slide-up' : 'banner-slide-up'
+
+  const enabledSettingsTabs = ['privacy', ...Object.keys(categories || {}).filter(id => 
+    categories[id]?.enabled
+  )]
+
+  const getCategoryTitle = (categoryId: string) => {
+    return categories[categoryId]?.name || categoryId
+  }
+
+  const getCategoryDescription = (categoryId: string) => {
+    return categories[categoryId]?.description || `Description for ${categoryId} cookies.`
+  }
+
+  const handleBackdropClick = () => {
+    if (!isSettingsMode) {
+      onClose()
+    }
+  }
+
+  // Expose dialog element for focus trap
+  useEffect(() => {
+    if (ref) {
+      if (typeof ref === 'function') {
+        ref(drawerRef.current)
+      } else {
+        ref.current = drawerRef.current
+      }
+    }
+  }, [ref])
+
+  return (
+    <>
+      {/* Backdrop with opacity animation */}
+      {isVisible && !isEssentialBanner && (
+        <div
+          className="cookie-drawer__backdrop"
+          onClick={handleBackdropClick}
+        />
+      )}
+
+      {/* Drawer with slide animation */}
+      {isVisible && (
+        <div
+          className={`cookie-drawer__content-wrapper ${drawerAnimation} ${Object.entries(drawerClasses).filter(([_, value]) => value).map(([key]) => key).join(' ')} ${Object.entries(rootClasses).filter(([_, value]) => value).map(([key]) => key).join(' ')}`}
+        >
+          <div ref={drawerRef} className="cookie-drawer__content" role="dialog" aria-modal="true" onClick={(e) => e.stopPropagation()}>
+            {/* Header */}
+            <div className="cookie-drawer__header">
+              <h3 className="cookie-drawer__title">
+                {isSettingsMode
+                  ? (config.texts?.settings?.title || 'Cookie Settings')
+                  : (config.mode === 'essential'
+                    ? (config.texts?.essential?.title || 'Essential Cookies')
+                    : (config.texts?.gdpr?.title || 'Cookie Consent'))
+                }
+              </h3>
+              {/* Message */}
+              {!isSettingsMode && !isEssentialBanner && (
+                <div className="cookie-drawer__message">
+                  {config.texts?.gdpr?.message || 'We use cookies to enhance your experience. By continuing to visit this site you agree to our use of cookies.'}
+                </div>
+              )}
+
+              {isSettingsMode && (
+                <button
+                  onClick={onClose}
+                  className="cookie-drawer__close"
+                  aria-label="Close"
+                >
+                  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M6.40013 18.3079L5.69238 17.6001L11.2924 12.0001L5.69238 6.40013L6.40013 5.69238L12.0001 11.2924L17.6001 5.69238L18.3079 6.40013L12.7079 12.0001L18.3079 17.6001L17.6001 18.3079L12.0001 12.7079L6.40013 18.3079Z" fill="#0D0B3D"/>
+                  </svg>
+                </button>
+              )}
+            </div>
+
+            {/* Essential Banner */}
+            {!isSettingsMode && isEssentialBanner && (
+              <div className="cookie-drawer__banner">
+                <div className="cookie-drawer__essential">
+                  <div className="cookie-drawer__message cookie-drawer__message--essential">
+                    {config.texts?.essential?.message || 'We use essential cookies to make our site work. By using our site, you accept our use of essential cookies.'}
+                  </div>
+                  <div className="cookie-drawer__actions">
+                    <button onClick={onAcceptAll} className="cookie-drawer__button cookie-drawer__button--primary">
+                      {config.texts?.essential?.accept || 'Accept'}
+                    </button>
+                  </div>
+                </div>
+              </div>
+            )}
+
+            {/* GDPR Banner/Settings */}
+            {(!isSettingsMode || !isEssentialBanner) && (
+              <div className="cookie-drawer__body">
+                {/* Banner Mode */}
+                {!isSettingsMode && (
+                  <div className="cookie-drawer__banner">
+                    <div className="cookie-drawer__message">
+                      {config.texts?.gdpr?.message || 'We use cookies to enhance your experience. By continuing to visit this site you agree to our use of cookies.'}
+                    </div>
+                    <div className="cookie-drawer__actions">
+                      <button onClick={onRejectAll} className="cookie-drawer__button cookie-drawer__button--secondary">
+                        {config.texts?.gdpr?.reject || 'Reject All'}
+                      </button>
+                      <button onClick={onAcceptAll} className="cookie-drawer__button cookie-drawer__button--primary">
+                        {config.texts?.gdpr?.accept || 'Accept All'}
+                      </button>
+                      <button onClick={onOpenSettings} className="cookie-drawer__button cookie-drawer__button--link">
+                        {config.texts?.gdpr?.settings || 'Customize'}
+                      </button>
+                    </div>
+                  </div>
+                )}
+
+                {/* Settings Mode */}
+                {isSettingsMode && (
+                  <div className="cookie-drawer__settings">
+                    {/* Tabs */}
+                    {enabledSettingsTabs.length > 1 && (
+                      <div className="cookie-drawer__tabs">
+                        {enabledSettingsTabs.map(tab => (
+                          <button
+                            key={tab}
+                            className={`cookie-drawer__tab ${currentTab === tab ? 'cookie-drawer__tab--active' : ''}`}
+                            onClick={() => onSelectTab(tab)}
+                          >
+                            {getCategoryTitle(tab)}
+                          </button>
+                        ))}
+                      </div>
+                    )}
+
+                    {/* Tab Content */}
+                    <div className="cookie-drawer__tab-content">
+                      {currentTab === 'privacy' ? (
+                        <div className="cookie-drawer__privacy">
+                          <h4>{config.texts?.settings?.privacy?.title || 'Privacy Policy'}</h4>
+                          <p>{config.texts?.settings?.privacy?.description || 'Learn about how we use cookies and protect your privacy.'}</p>
+                        </div>
+                      ) : (
+                        <div className="cookie-drawer__category">
+                          <div className="cookie-drawer__category-header">
+                            <h4>{getCategoryTitle(currentTab)}</h4>
+                            <label className="cookie-drawer__toggle">
+                              <input
+                                type="checkbox"
+                                checked={categories[currentTab]?.enabled || false}
+                                disabled={categories[currentTab]?.required}
+                                onChange={() => onToggleCategory(currentTab)}
+                              />
+                              <span className="cookie-drawer__toggle-slider"></span>
+                            </label>
+                          </div>
+                          <div className="cookie-drawer__category-description">
+                            {getCategoryDescription(currentTab)}
+                          </div>
+                        </div>
+                      )}
+                    </div>
+
+                    {/* Settings Actions */}
+                    <div className="cookie-drawer__settings-actions">
+                      <button onClick={onAcceptSelection} className="cookie-drawer__button cookie-drawer__button--primary">
+                        {config.texts?.settings?.save || 'Save Preferences'}
+                      </button>
+                    </div>
+                  </div>
+                )}
+              </div>
+            )}
+          </div>
+        </div>
+      )}
+    </>
+  )
+})
+
+CookieDrawer.displayName = 'CookieDrawer'
+
+export default CookieDrawer

package/src/react/components/index.js

@@ -0,0 +1,2 @@
+export { CookieConsent, default as CookieConsentComponent } from '../CookieConsent'
+export { CookieDrawer, default as CookieDrawerComponent } from '../CookieDrawer'

package/src/react/index.js

@@ -0,0 +1,89 @@
+import {
+  createContext,
+  createElement,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState
+} from 'react'
+import { createCookieKit, DEFAULT_CONFIG } from '../core/index.js'
+import { VERSION, getVersion, getVersionInfo, logVersion } from './version.js'
+
+const CookieKitContext = createContext(null)
+
+export { createCookieKit, DEFAULT_CONFIG, VERSION, getVersion, getVersionInfo, logVersion }
+
+export function useCookieKitReact(userConfig = {}) {
+  const coreRef = useRef(null)
+  if (!coreRef.current) {
+    coreRef.current = createCookieKit(userConfig)
+  }
+
+  const core = coreRef.current
+  const [consent, setConsent] = useState(null)
+  const [categories, setCategories] = useState(() => core.getDefaultCategoriesState())
+
+  useEffect(() => {
+    let active = true
+
+    core.getConsentAsync().then(current => {
+      if (!active) return
+      setConsent(current)
+      if (current?.categories) {
+        setCategories({ ...current.categories })
+      }
+    })
+
+    const offChanged = core.on('consentChanged', ({ consent: nextConsent, categories: nextCategories }) => {
+      if (!active) return
+      setConsent(nextConsent)
+      setCategories({ ...nextCategories })
+    })
+
+    const offCleared = core.on('consentCleared', () => {
+      if (!active) return
+      setConsent(null)
+      setCategories(core.getDefaultCategoriesState())
+    })
+
+    return () => {
+      active = false
+      offChanged()
+      offCleared()
+    }
+  }, [core])
+
+  const hasConsented = useMemo(() => consent?.hasConsented === true, [consent])
+
+  const acceptAll = async (source = 'banner') => core.acceptAll(source)
+  const rejectAll = async (source = 'banner') => core.rejectAll(source)
+  const acceptSelected = async (selectedIds, source = 'settings') => core.acceptSelected(selectedIds, source)
+  const resetConsent = async () => core.clearConsentAsync()
+
+  return {
+    core,
+    consent,
+    categories,
+    hasConsented,
+    acceptAll,
+    rejectAll,
+    acceptSelected,
+    resetConsent,
+    hasCategoryConsent: category => core.hasCategoryConsent(category),
+    hasCategoryConsentAsync: category => core.hasCategoryConsentAsync(category)
+  }
+}
+
+export function CookieKitProvider({ config = {}, children }) {
+  const value = useCookieKitReact(config)
+  return createElement(CookieKitContext.Provider, { value }, children)
+}
+
+export function useCookieKitContext() {
+  const value = useContext(CookieKitContext)
+  if (!value) {
+    throw new Error('useCookieKitContext must be used within CookieKitProvider')
+  }
+  return value
+}

package/src/react/index.test.js

@@ -0,0 +1,62 @@
+import test from 'node:test'
+import assert from 'node:assert/strict'
+import { createElement } from 'react'
+import { renderToString } from 'react-dom/server'
+
+import {
+  createCookieKit,
+  DEFAULT_CONFIG,
+  useCookieKitReact,
+  CookieKitProvider,
+  useCookieKitContext
+} from './index.js'
+
+test('react package: exports expected public API', () => {
+  assert.equal(typeof createCookieKit, 'function')
+  assert.equal(typeof useCookieKitReact, 'function')
+  assert.equal(typeof CookieKitProvider, 'function')
+  assert.equal(typeof useCookieKitContext, 'function')
+  assert.equal(typeof DEFAULT_CONFIG, 'object')
+  assert.equal(typeof DEFAULT_CONFIG.storageKey, 'string')
+})
+
+test('react package: provider/context renders with initial categories via SSR', () => {
+  function Probe() {
+    const kit = useCookieKitContext()
+    return createElement('pre', null, JSON.stringify({
+      hasConsented: kit.hasConsented,
+      categories: kit.categories
+    }))
+  }
+
+  const html = renderToString(
+    createElement(
+      CookieKitProvider,
+      {
+        config: {
+          categories: {
+            necessary: { required: true, enabled: true },
+            analytics: { required: false, enabled: true }
+          }
+        }
+      },
+      createElement(Probe)
+    )
+  )
+
+  assert.match(html, /"hasConsented":false/)
+  assert.match(html, /"necessary":true/)
+  assert.match(html, /"analytics":false/)
+})
+
+test('react package: useCookieKitContext throws outside provider', () => {
+  function BrokenProbe() {
+    useCookieKitContext()
+    return createElement('div', null, 'ok')
+  }
+
+  assert.throws(
+    () => renderToString(createElement(BrokenProbe)),
+    /useCookieKitContext must be used within CookieKitProvider/
+  )
+})

package/src/react/types.ts

@@ -0,0 +1,47 @@
+export interface CookieConfig {
+  theme?: 'light' | 'dark'
+  themeVars?: Record<string, string>
+  categories: Record<string, {
+    required?: boolean
+    enabled?: boolean
+    name?: string
+    description?: string
+  }>
+  consentExpireDays?: number
+  version?: string
+  mode?: 'gdpr' | 'essential'
+  debug?: boolean
+  texts?: {
+    gdpr?: {
+      title?: string
+      message?: string
+      accept?: string
+      reject?: string
+      settings?: string
+    }
+    essential?: {
+      title?: string
+      message?: string
+      accept?: string
+    }
+    settings?: {
+      title?: string
+      save?: string
+      privacy?: {
+        title?: string
+        description?: string
+      }
+    }
+  }
+}
+
+export interface ConsentState {
+  consentId: string
+  timestamp: string
+  expiresAt: string
+  status: string
+  version: string
+  source: string
+  hasConsented: boolean
+  categories: Record<string, boolean>
+}

package/src/react/version.js

@@ -0,0 +1,29 @@
+/**
+ * Version metadata for package runtime.
+ */
+
+export const VERSION = '1.0.0-beta.0'
+export const PACKAGE_NAME = '@el7ven/cookie-consent/react'
+
+// React adapter version metadata.
+export const VERSION_INFO = {
+  version: VERSION,
+  name: PACKAGE_NAME,
+  buildDate: new Date().toISOString(),
+  environment: 'production'
+}
+
+// Return package version.
+export function getVersion() {
+  return VERSION
+}
+
+// Return full version metadata.
+export function getVersionInfo() {
+  return VERSION_INFO
+}
+
+// Print runtime version in debug-friendly format.
+export function logVersion() {
+  console.log(`⚛️ ${PACKAGE_NAME} v${VERSION}`)
+}