@netlib/widerrufsbutton 1.0.5

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 netlib-de
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,134 @@
+# Widerrufsbutton Widget
+
+Widerrufsformular einbettbares JavaScript-Widget (React + TypeScript, IIFE-Build).
+
+## Rechtliche Grundlage
+
+Pflichtfelder laut IT-Recht Kanzlei / § 356 BGB:
+- **Name** des Verbrauchers
+- **E-Mail-Adresse** (für die gesetzlich vorgeschriebene Eingangsbestätigung)
+- **Bestell- / Auftrags- / Vertragsnummer** (Vertragsidentifikation)
+- **Datum** der Widerrufserklärung (automatisch gesetzt)
+- **Widerrufsgrund** — optional, darf nicht als Pflichtfeld abgefragt werden
+
+Button-Beschriftung: `Vertrag widerrufen`  
+Bestätigungs-Button: `Widerruf bestätigen`
+
+## Installation
+
+```bash
+npm install @netlib-de/widerrufsbutton
+```
+
+## Build
+
+Benötigt Node.js ≥ 20 (`.nvmrc` auf `22` gesetzt).
+
+```bash
+nvm use
+npm install
+
+# Dev-Server (Demo unter http://localhost:5173)
+npm run dev
+
+# Produktions-Build (IIFE → dist/widerrufsbutton.iife.js)
+npm run build:lib
+```
+
+## API-Integration
+
+Das Widget schickt beim Absenden einen `PATCH`-Request:
+
+```
+PATCH /your-endpoint
+Content-Type: application/json
+
+{
+  "action": "widerruf_submit",
+  "payload": {
+    "name": "Max Mustermann",
+    "email": "max@beispiel.de",
+    "vertragId": "ORD-2026-001",
+    "widerrufsgrund": "",
+    "datum": "2026-06-07T10:00:00.000Z"
+  }
+}
+```
+
+## Konfigurationsparameter
+
+| Parameter | Typ | Pflicht | Beschreibung |
+|---|---|---|---|
+| `apiUrl` | string | ja | PATCH-Endpunkt |
+| `action` | string | ja | Action-Name, Default: `widerruf_submit` |
+| `introText` | string | – | Einleitungstext im Modal |
+| `companyName` | string | – | Firmenname im Modal-Titel |
+| `buttonLabel` | string | – | Button-Beschriftung, Default: `Vertrag widerrufen` |
+| `cancelLabel` | string | – | Abbrechen-Button, Default: `Abbrechen` |
+| `submitLabel` | string | – | Absenden-Button, Default: `Widerruf bestätigen` |
+| `buttonClass` | string | – | Zusätzliche CSS-Klassen am Button |
+| `authToken` | string | – | Bearer-Token für `Authorization`-Header |
+
+## Einbindung
+
+### Option A – React / Astro
+
+```tsx
+import { WiderrufsWidget } from '@netlib-de/widerrufsbutton'
+
+<WiderrufsWidget config={{
+  apiUrl: 'https://example.com/api',
+  action: 'widerruf_submit',
+  companyName: 'Muster GmbH',
+  introText: 'Hiermit erkläre ich den Widerruf...',
+}} />
+```
+
+### Option B – IIFE / Data-Attribute (kein Framework nötig)
+
+```html
+<script src="widerrufsbutton.iife.js" defer></script>
+
+<button
+  data-widerrufs
+  data-api-url="https://example.com/api"
+  data-action="widerruf_submit"
+  data-company-name="Muster GmbH"
+  data-intro-text="Hiermit erkläre ich den Widerruf..."
+>Vertrag widerrufen</button>
+```
+
+Das Script erkennt alle `[data-widerrufs]`-Elemente beim `DOMContentLoaded` automatisch.
+
+### Option C – IIFE / JavaScript-API
+
+```html
+<script src="widerrufsbutton.iife.js" defer></script>
+<div id="wrb-container"></div>
+<script>
+  document.addEventListener('DOMContentLoaded', function () {
+    WiderrufsButton.render('#wrb-container', {
+      apiUrl: 'https://example.com/api',
+      action: 'widerruf_submit',
+      companyName: 'Muster GmbH',
+    })
+  })
+</script>
+```
+
+## Projektstruktur
+
+```
+src/
+├── components/
+│   ├── WiderrufsModal.tsx   # Modal + Formular + Validierung
+│   └── WiderrufsWidget.tsx  # Button + Portal-Mount
+├── api.ts                   # PATCH-Request
+├── embed.tsx                # IIFE-Einstiegspunkt, window.WiderrufsButton
+├── styles.ts                # Scoped CSS (Prefix: wrb-)
+└── types.ts                 # WiderrufsConfig, WiderrufsFormData
+dist/
+├── index.es.js              # ES-Modul für React/Astro
+├── index.cjs.js             # CommonJS
+└── widerrufsbutton.iife.js  # Standalone-Bundle (~152 KB, gzip ~49 KB)
+```

package/dist/api.d.ts

@@ -0,0 +1,2 @@
+import { WiderrufsConfig, WiderrufsFormData } from './types';
+export declare function submitWiderruf(config: WiderrufsConfig, formData: WiderrufsFormData): Promise<void>;

package/dist/components/WiderrufsModal.d.ts

@@ -0,0 +1,7 @@
+import { WiderrufsConfig } from '../types';
+interface Props {
+    config: WiderrufsConfig;
+    onClose: () => void;
+}
+export declare function WiderrufsModal({ config, onClose }: Props): import("react").JSX.Element;
+export {};

package/dist/components/WiderrufsWidget.d.ts

@@ -0,0 +1,6 @@
+import { WiderrufsConfig } from '../types';
+interface Props {
+    config: WiderrufsConfig;
+}
+export declare function WiderrufsWidget({ config }: Props): import("react").JSX.Element;
+export {};

package/dist/index.cjs.js

@@ -0,0 +1,203 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),s=require("react"),I=require("react-dom");async function W(r,a){const n={"Content-Type":"application/json"};r.authToken&&(n.Authorization=`Bearer ${r.authToken}`);const d={action:r.action,payload:{...a,datum:new Date().toISOString()}},i=await fetch(r.apiUrl,{method:"PATCH",headers:n,body:JSON.stringify(d)});if(!i.ok)throw new Error(`Server antwortete mit Status ${i.status}`)}const k=new Date().toLocaleDateString("de-DE",{day:"2-digit",month:"2-digit",year:"numeric"}),B={name:"",email:"",vertragId:"",widerrufsgrund:"",datum:k};function h(r){const a={};return r.name.trim()||(a.name="Bitte geben Sie Ihren Namen an."),r.email.trim()?/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(r.email)||(a.email="Bitte geben Sie eine gültige E-Mail-Adresse an."):a.email="Bitte geben Sie Ihre E-Mail-Adresse an.",r.vertragId.trim()||(a.vertragId="Bitte geben Sie die Bestellnummer oder Vertragsnummer an."),a}function N({config:r,onClose:a}){const[n,d]=s.useState(B),[i,x]=s.useState({}),[c,w]=s.useState({}),[p,f]=s.useState("idle"),[y,v]=s.useState(""),j=s.useRef(null);s.useEffect(()=>{var l;(l=j.current)==null||l.focus();const t=o=>o.key==="Escape"&&a();return document.addEventListener("keydown",t),()=>document.removeEventListener("keydown",t)},[a]);function m(t,l){const o={...n,[t]:l};if(d(o),c[t]){const b=h(o);x(z=>({...z,[t]:b[t]}))}}function g(t){w(o=>({...o,[t]:!0}));const l=h(n);x(o=>({...o,[t]:l[t]}))}async function S(t){t.preventDefault();const l=Object.fromEntries(Object.keys(n).map(b=>[b,!0]));w(l);const o=h(n);if(x(o),!(Object.keys(o).length>0)){f("loading"),v("");try{await W(r,n),f("success")}catch(b){v(b instanceof Error?b.message:"Ein unbekannter Fehler ist aufgetreten."),f("error")}}}const E=r.companyName?`Widerruf – ${r.companyName}`:"Widerrufsformular";return e.jsx("div",{className:"wrb-overlay",role:"dialog","aria-modal":"true","aria-labelledby":"wrb-title",onClick:t=>t.target===t.currentTarget&&a(),children:e.jsxs("div",{className:"wrb-modal",children:[e.jsxs("div",{className:"wrb-modal-header",children:[e.jsx("h2",{className:"wrb-modal-title",id:"wrb-title",children:E}),e.jsx("button",{className:"wrb-close-btn",onClick:a,"aria-label":"Schließen",type:"button",children:"✕"})]}),p==="success"?e.jsxs("div",{className:"wrb-success",children:[e.jsx("span",{className:"wrb-success-icon",children:"✓"}),e.jsx("h3",{children:"Widerruf eingegangen"}),e.jsxs("p",{children:["Ihr Widerruf wurde erfolgreich übermittelt. Sie erhalten in Kürze eine Bestätigung an ",e.jsx("strong",{children:n.email}),"."]})]}):e.jsxs("div",{className:"wrb-modal-body",children:[r.introText&&e.jsx("p",{className:"wrb-intro",children:r.introText}),p==="error"&&y&&e.jsx("div",{className:"wrb-alert wrb-alert-error",role:"alert",children:y}),e.jsxs("form",{onSubmit:S,noValidate:!0,children:[e.jsx(u,{label:"Name",required:!0,error:c.name?i.name:void 0,children:e.jsx("input",{ref:j,className:`wrb-input${c.name&&i.name?" wrb-error":""}`,type:"text",autoComplete:"name",value:n.name,onChange:t=>m("name",t.target.value),onBlur:()=>g("name"),placeholder:"Vor- und Nachname"})}),e.jsx(u,{label:"E-Mail-Adresse",required:!0,hint:"Hierüber erhalten Sie die Eingangsbestätigung.",error:c.email?i.email:void 0,children:e.jsx("input",{className:`wrb-input${c.email&&i.email?" wrb-error":""}`,type:"email",autoComplete:"email",value:n.email,onChange:t=>m("email",t.target.value),onBlur:()=>g("email"),placeholder:"name@beispiel.de"})}),e.jsx(u,{label:"Bestell- / Auftrags- / Vertragsnummer",required:!0,hint:"Zu finden in Ihrer Bestellbestätigung.",error:c.vertragId?i.vertragId:void 0,children:e.jsx("input",{className:`wrb-input${c.vertragId&&i.vertragId?" wrb-error":""}`,type:"text",value:n.vertragId,onChange:t=>m("vertragId",t.target.value),onBlur:()=>g("vertragId"),placeholder:"z.B. 10045678"})}),e.jsx(u,{label:"Widerrufsgrund",hint:"Freiwillige Angabe – ein Widerruf ist ohne Angabe von Gründen möglich.",children:e.jsx("textarea",{className:"wrb-textarea",value:n.widerrufsgrund,onChange:t=>m("widerrufsgrund",t.target.value),placeholder:"Optional",rows:3})}),e.jsx(u,{label:"Datum der Widerrufserklärung",children:e.jsx("div",{className:"wrb-date-display",children:k})}),e.jsxs("div",{className:"wrb-actions",children:[e.jsx("button",{type:"button",className:"wrb-cancel-btn",onClick:a,children:r.cancelLabel??"Abbrechen"}),e.jsx("button",{type:"submit",className:"wrb-submit-btn",disabled:p==="loading",children:p==="loading"?"Wird gesendet…":r.submitLabel??"Absenden"})]})]})]})]})})}function u({label:r,required:a,hint:n,error:d,children:i}){return e.jsxs("div",{className:"wrb-field",children:[e.jsxs("label",{className:"wrb-label",children:[r,a&&e.jsx("span",{className:"wrb-required","aria-hidden":"true",children:"*"})]}),i,n&&!d&&e.jsx("p",{className:"wrb-hint",children:n}),d&&e.jsx("p",{className:"wrb-field-error",role:"alert",children:d})]})}function C(){const r="wrb-styles";if(document.getElementById(r))return;const a=`
+/* Widerrufsbutton widget — prefix: wrb- */
+.wrb-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 10px 20px;
+  background: #c0392b;
+  color: #fff;
+  border: none;
+  border-radius: 6px;
+  font-size: 15px;
+  font-weight: 600;
+  cursor: pointer;
+  font-family: inherit;
+  transition: background 0.2s;
+  text-decoration: none;
+}
+.wrb-btn:hover { background: #a93226; }
+.wrb-btn:focus-visible { outline: 3px solid #e74c3c; outline-offset: 2px; }
+
+/* Overlay */
+.wrb-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0,0,0,0.55);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 99999;
+  padding: 16px;
+  animation: wrb-fade-in 0.15s ease;
+}
+@keyframes wrb-fade-in { from { opacity: 0 } to { opacity: 1 } }
+
+/* Modal box */
+.wrb-modal {
+  background: #fff;
+  border-radius: 10px;
+  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
+  width: 100%;
+  max-width: 540px;
+  max-height: 90vh;
+  overflow-y: auto;
+  animation: wrb-slide-up 0.2s ease;
+  font-family: system-ui, -apple-system, sans-serif;
+  font-size: 15px;
+  color: #1a1a1a;
+}
+@keyframes wrb-slide-up { from { transform: translateY(20px); opacity: 0 } to { transform: none; opacity: 1 } }
+
+.wrb-modal-header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  padding: 20px 24px 16px;
+  border-bottom: 1px solid #e5e7eb;
+  gap: 12px;
+}
+.wrb-modal-title {
+  margin: 0;
+  font-size: 18px;
+  font-weight: 700;
+  color: #111;
+  line-height: 1.3;
+}
+.wrb-close-btn {
+  background: none;
+  border: none;
+  cursor: pointer;
+  color: #6b7280;
+  padding: 4px;
+  border-radius: 4px;
+  font-size: 20px;
+  line-height: 1;
+  flex-shrink: 0;
+}
+.wrb-close-btn:hover { color: #111; background: #f3f4f6; }
+
+.wrb-modal-body {
+  padding: 20px 24px 24px;
+}
+
+.wrb-intro {
+  margin: 0 0 20px;
+  color: #4b5563;
+  line-height: 1.6;
+  font-size: 14px;
+}
+
+/* Form */
+.wrb-field {
+  margin-bottom: 16px;
+}
+.wrb-label {
+  display: block;
+  font-size: 13px;
+  font-weight: 600;
+  color: #374151;
+  margin-bottom: 5px;
+}
+.wrb-required {
+  color: #c0392b;
+  margin-left: 2px;
+}
+.wrb-input,
+.wrb-textarea {
+  width: 100%;
+  padding: 9px 12px;
+  border: 1.5px solid #d1d5db;
+  border-radius: 6px;
+  font-size: 15px;
+  font-family: inherit;
+  color: #111;
+  background: #fff;
+  box-sizing: border-box;
+  transition: border-color 0.15s;
+}
+.wrb-input:focus,
+.wrb-textarea:focus {
+  outline: none;
+  border-color: #c0392b;
+  box-shadow: 0 0 0 3px rgba(192,57,43,0.12);
+}
+.wrb-input.wrb-error,
+.wrb-textarea.wrb-error {
+  border-color: #c0392b;
+}
+.wrb-field-error {
+  color: #c0392b;
+  font-size: 12px;
+  margin-top: 4px;
+}
+.wrb-textarea { resize: vertical; min-height: 80px; }
+
+.wrb-hint {
+  font-size: 12px;
+  color: #6b7280;
+  margin-top: 4px;
+}
+
+.wrb-date-display {
+  padding: 9px 12px;
+  background: #f9fafb;
+  border: 1.5px solid #e5e7eb;
+  border-radius: 6px;
+  color: #6b7280;
+  font-size: 15px;
+}
+
+/* Actions */
+.wrb-actions {
+  display: flex;
+  gap: 10px;
+  justify-content: flex-end;
+  margin-top: 24px;
+  padding-top: 16px;
+  border-top: 1px solid #e5e7eb;
+}
+.wrb-submit-btn {
+  padding: 10px 22px;
+  background: #c0392b;
+  color: #fff;
+  border: none;
+  border-radius: 6px;
+  font-size: 15px;
+  font-weight: 600;
+  cursor: pointer;
+  font-family: inherit;
+  transition: background 0.2s;
+}
+.wrb-submit-btn:hover:not(:disabled) { background: #a93226; }
+.wrb-submit-btn:disabled { opacity: 0.6; cursor: not-allowed; }
+.wrb-cancel-btn {
+  padding: 10px 18px;
+  background: transparent;
+  color: #374151;
+  border: 1.5px solid #d1d5db;
+  border-radius: 6px;
+  font-size: 15px;
+  cursor: pointer;
+  font-family: inherit;
+  transition: background 0.15s;
+}
+.wrb-cancel-btn:hover { background: #f3f4f6; }
+
+/* Success / Error states */
+.wrb-success {
+  text-align: center;
+  padding: 32px 24px;
+}
+.wrb-success-icon { font-size: 48px; display: block; margin-bottom: 12px; }
+.wrb-success h3 { margin: 0 0 8px; font-size: 20px; color: #111; }
+.wrb-success p { margin: 0; color: #4b5563; line-height: 1.6; }
+
+.wrb-alert {
+  padding: 12px 16px;
+  border-radius: 6px;
+  margin-bottom: 16px;
+  font-size: 14px;
+}
+.wrb-alert-error { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; }
+`,n=document.createElement("style");n.id=r,n.textContent=a,document.head.appendChild(n)}function A({config:r}){const[a,n]=s.useState(!1);return s.useEffect(()=>{C()},[]),e.jsxs(e.Fragment,{children:[e.jsx("button",{type:"button",className:`wrb-btn${r.buttonClass?` ${r.buttonClass}`:""}`,onClick:()=>n(!0),children:r.buttonLabel??"Vertrag widerrufen"}),a&&I.createPortal(e.jsx(N,{config:r,onClose:()=>n(!1)}),document.body)]})}exports.WiderrufsModal=N;exports.WiderrufsWidget=A;

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export { WiderrufsWidget } from './components/WiderrufsWidget';
+export { WiderrufsModal } from './components/WiderrufsModal';
+export type { WiderrufsConfig, WiderrufsFormData, SubmitStatus } from './types';