@dismissible/react-client 0.3.0 → 0.3.2

package/README.md

@@ -1,6 +1,10 @@
 # @dismissible/react-client
 
-A React component library for creating dismissible UI elements with persistent state management.
+A React component library for creating dismissible UI elements with persistent state management. 
+
+Use this in combination with [dismissible.io](https://dismissible.io). Get your free account now!
+
+🌐 **[dismissible.io](https://dismissible.io)** | 💰 **[View Pricing](https://dismissible.io/pricing)** | 📖 **[Documentation](https://docs.dismissible.io)**
 
 [![npm version](https://badge.fury.io/js/@dismissible%2Freact-client.svg)](https://badge.fury.io/js/@dismissible%2Freact-client)
 [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
@@ -9,7 +13,7 @@ A React component library for creating dismissible UI elements with persistent s
 
 - 🎯 **Easy to use** - Simple component API for dismissible content
 - 💾 **Persistent state** - Dismissal state is saved and restored across sessions
-- 🔐 **JWT Authentication** - Built-in support for JWT-based user authentication
+- 🔐 **JWT Authentication** - Built-in support for JWT-based user authentication (Enterprise only)
 - 🎨 **Customizable** - Custom loading, error, and dismiss button components
 - ♿ **Accessible** - Built with accessibility best practices
 - 🪝 **Hook-based** - Includes `useDismissibleItem` hook for custom implementations
@@ -54,11 +58,13 @@ function App() {
 
 Context provider for JWT authentication and configuration. Wrap your app or components that need JWT authentication.
 
+> **Note:** JWT authentication is only available for **Enterprise customers**. For standard usage, you can use the `<Dismissible>` component directly without a provider. [View pricing →](https://dismissible.io/pricing)
+
 #### Props
 
 | Prop | Type | Required | Description |
 |------|------|----------|-------------|
-| `jwt` | `string \| (() => string)` | ❌ | JWT token (static string or function) |
+| `jwt` | `string \| (() => string) \| (() => Promise<string>)` | ❌ | JWT token for user-specific dismissals (**Enterprise only**) |
 | `baseUrl` | `string` | ❌ | Custom API base URL override |
 | `children` | `ReactNode` | ✅ | Components that will use the dismissible functionality |
 
@@ -85,6 +91,15 @@ function AppWithDynamicAuth() {
   );
 }
 
+// With async JWT function
+function AppWithAsyncAuth() {
+  return (
+    <DismissibleProvider jwt={async () => await fetchAccessToken()}>
+      <YourApp />
+    </DismissibleProvider>
+  );
+}
+
 // Without JWT (anonymous/backwards compatible)
 function AppWithoutAuth() {
   return (
@@ -109,6 +124,7 @@ The main component for creating dismissible content.
 | `LoadingComponent` | `ComponentType<{id: string}>` | ❌ | Custom loading component |
 | `ErrorComponent` | `ComponentType<{id: string, error: Error}>` | ❌ | Custom error component |
 | `DismissButtonComponent` | `ComponentType<{id: string, onDismiss: () => Promise<void>, ariaLabel: string}>` | ❌ | Custom dismiss button |
+| `ignoreErrors` | `boolean` | ❌ | Ignore errors and display component anyway (default: false) |
 
 #### Example
 
@@ -177,7 +193,9 @@ function CustomDismissible({ id, children }) {
 
 ## Usage Examples
 
-### JWT Authentication Setup
+### JWT Authentication Setup (Enterprise Only)
+
+> **Enterprise Feature:** JWT authentication allows user-specific dismissible state management. This feature requires an Enterprise subscription. [Learn more about Enterprise features →](https://dismissible.io/pricing)
 
 For enterprise accounts that require user-specific dismissible state, wrap your app with the `DismissibleProvider`:
 
@@ -216,6 +234,7 @@ function Dashboard() {
 import { DismissibleProvider } from '@dismissible/react-client';
 import { useAuth } from './auth'; // Your auth context
 
+// Synchronous JWT function
 function App() {
   const { getAccessToken } = useAuth();
   
@@ -225,6 +244,17 @@ function App() {
     </DismissibleProvider>
   );
 }
+
+// Asynchronous JWT function
+function AppWithAsyncAuth() {
+  const { refreshAndGetToken } = useAuth();
+  
+  return (
+    <DismissibleProvider jwt={async () => await refreshAndGetToken()}>
+      <YourApp />
+    </DismissibleProvider>
+  );
+}
 ```
 
 ### Basic Dismissible Banner
@@ -341,36 +371,12 @@ function Dashboard() {
 }
 ```
 
-### Conditional Dismissible Content
-
-```tsx
-import { Dismissible } from '@dismissible/react-client';
-
-function ConditionalBanner({ user }) {
-  // Only show to new users
-  if (user.isReturning) {
-    return null;
-  }
-
-  return (
-    <Dismissible id={`onboarding-${user.id}`}>
-      <div className="onboarding-tips">
-        <h3>Getting Started</h3>
-        <ul>
-          <li>Complete your profile</li>
-          <li>Connect with friends</li>
-          <li>Explore our features</li>
-        </ul>
-      </div>
-    </Dismissible>
-  );
-}
-```
-
 ### User-Specific vs Anonymous Dismissible Items
 
 The behavior changes based on whether JWT authentication is configured:
 
+> **Enterprise vs Standard:** JWT authentication for user-specific dismissals is an Enterprise feature. Standard accounts use anonymous (account-level) dismissals. [Compare plans →](https://dismissible.io/pricing)
+
 ```tsx
 import { DismissibleProvider, Dismissible } from '@dismissible/react-client';
 
@@ -392,16 +398,82 @@ function AuthenticatedApp() {
     </DismissibleProvider>
   );
 }
+```
+
+### Error Handling with ignoreErrors
+
+```tsx
+import { Dismissible } from '@dismissible/react-client';
 
-// Without JWT - dismissible state is account-level (anonymous)
-function AnonymousApp() {
+// Show content even if API fails
+function RobustBanner() {
   return (
-    <div>
-      {/* These will be dismissed for all users of this account */}
-      <Dismissible id="general-announcement">
-        <div>Site maintenance scheduled</div>
-      </Dismissible>
-    </div>
+    <Dismissible
+      id="important-announcement"
+      ignoreErrors={true}
+    >
+      <div className="important-banner">
+        <h3>Critical System Update</h3>
+        <p>System maintenance scheduled for tonight. Please save your work.</p>
+      </div>
+    </Dismissible>
+  );
+}
+```
+
+### Async JWT Authentication Examples
+
+```tsx
+import { DismissibleProvider } from '@dismissible/react-client';
+
+// With token refresh logic
+function AppWithTokenRefresh() {
+  return (
+    <DismissibleProvider 
+      jwt={async () => {
+        try {
+          const token = await fetch('/api/auth/refresh', {
+            method: 'POST',
+            credentials: 'include'
+          });
+          const { accessToken } = await token.json();
+          return accessToken;
+        } catch (error) {
+          console.error('Failed to refresh token:', error);
+          throw error;
+        }
+      }}
+    >
+      <YourApp />
+    </DismissibleProvider>
+  );
+}
+
+// With Firebase Auth
+function AppWithFirebase() {
+  return (
+    <DismissibleProvider 
+      jwt={async () => {
+        const user = firebase.auth().currentUser;
+        if (user) {
+          return await user.getIdToken();
+        }
+        throw new Error('User not authenticated');
+      }}
+    >
+      <YourApp />
+    </DismissibleProvider>
+  );
+}
+
+// With Auth0
+function AppWithAuth0() {
+  const { getAccessTokenSilently } = useAuth0();
+  
+  return (
+    <DismissibleProvider jwt={async () => await getAccessTokenSilently()}>
+      <YourApp />
+    </DismissibleProvider>
   );
 }
 ```
@@ -446,10 +518,10 @@ function SmartNotification({ id, message, type = 'info' }) {
   );
 }
 
-// Usage with authentication
+// Usage with async authentication
 function App() {
   return (
-    <DismissibleProvider jwt={() => getUserToken()}>
+    <DismissibleProvider jwt={async () => await getUserToken()}>
       <SmartNotification 
         id="user-specific-notification" 
         message="Welcome back!" 
@@ -510,79 +582,6 @@ const AuthProvider: React.FC<DismissibleProviderProps> = ({ children, jwt }) =>
 };
 ```
 
-## Development
-
-### Prerequisites
-
-- Node.js 18+
-- npm or yarn
-
-### Setup
-
-```bash
-# Clone the repository
-git clone https://github.com/your-org/dismissible.git
-cd dismissible/react-client
-
-# Install dependencies
-npm install
-
-# Start development server
-npm run dev
-```
-
-### Available Scripts
-
-- `npm run dev` - Start development server with Vite
-- `npm run build` - Build the library for production
-- `npm run test` - Run tests with Vitest
-- `npm run test:watch` - Run tests in watch mode
-- `npm run lint` - Run ESLint
-- `npm run format` - Format code with Prettier
-- `npm run storybook` - Start Storybook development server
-- `npm run build-storybook` - Build Storybook for production
-
-### Testing
-
-```bash
-# Run all tests
-npm run test
-
-# Run tests in watch mode
-npm run test:watch
-
-# Run tests with coverage
-npm run test -- --coverage
-```
-
-### Storybook
-
-The library includes Storybook for component development and documentation:
-
-```bash
-npm run storybook
-```
-
-## Contributing
-
-We welcome contributions! Please see our [Contributing Guide](../CONTRIBUTING.md) for details.
-
-### Development Workflow
-
-1. Fork the repository
-2. Create a feature branch: `git checkout -b feature/my-new-feature`
-3. Make your changes
-4. Add tests for new functionality
-5. Run tests: `npm run test`
-6. Run linting: `npm run lint`
-7. Commit your changes: `git commit -am 'Add new feature'`
-8. Push to the branch: `git push origin feature/my-new-feature`
-9. Submit a pull request
-
-## License
-
-MIT © [Dismissible](https://github.com/joshystuart)
-
 ## Support
 
 - 📖 [Documentation](https://docs.dismissible.io)

package/dist/dismissible-client.es.js

@@ -1,22 +1,22 @@
 var de = Object.defineProperty, he = Object.defineProperties;
 var me = Object.getOwnPropertyDescriptors;
 var k = Object.getOwnPropertySymbols;
-var V = Object.prototype.hasOwnProperty, X = Object.prototype.propertyIsEnumerable;
-var Q = (e, r, t) => r in e ? de(e, r, { enumerable: !0, configurable: !0, writable: !0, value: t }) : e[r] = t, y = (e, r) => {
+var X = Object.prototype.hasOwnProperty, Y = Object.prototype.propertyIsEnumerable;
+var V = (e, r, t) => r in e ? de(e, r, { enumerable: !0, configurable: !0, writable: !0, value: t }) : e[r] = t, y = (e, r) => {
   for (var t in r || (r = {}))
-    V.call(r, t) && Q(e, t, r[t]);
+    X.call(r, t) && V(e, t, r[t]);
   if (k)
     for (var t of k(r))
-      X.call(r, t) && Q(e, t, r[t]);
+      Y.call(r, t) && V(e, t, r[t]);
   return e;
 }, R = (e, r) => he(e, me(r));
 var W = (e, r) => {
   var t = {};
   for (var n in e)
-    V.call(e, n) && r.indexOf(n) < 0 && (t[n] = e[n]);
+    X.call(e, n) && r.indexOf(n) < 0 && (t[n] = e[n]);
   if (e != null && k)
     for (var n of k(e))
-      r.indexOf(n) < 0 && X.call(e, n) && (t[n] = e[n]);
+      r.indexOf(n) < 0 && Y.call(e, n) && (t[n] = e[n]);
   return t;
 };
 var S = (e, r, t) => new Promise((n, i) => {
@@ -36,7 +36,7 @@ var S = (e, r, t) => new Promise((n, i) => {
   u((t = t.apply(e, r)).next());
 });
 import { jsx as x, jsxs as oe } from "react/jsx-runtime";
-import { createContext as ye, useContext as be, useMemo as B, useRef as M, useState as F, useCallback as Y, useEffect as Z } from "react";
+import { createContext as ye, useContext as be, useMemo as B, useRef as M, useState as F, useCallback as Z, useEffect as G } from "react";
 const pe = /\{[^{}]+\}/g, ge = () => {
   var e, r;
   return typeof process == "object" && Number.parseInt((r = (e = process == null ? void 0 : process.versions) == null ? void 0 : e.node) == null ? void 0 : r.substring(0, 2)) >= 18 && process.versions.undici;
@@ -66,8 +66,8 @@ function Re(e) {
   const h = [];
   function g(l, a) {
     return S(this, null, function* () {
-      var K;
-      const G = a || {}, {
+      var Q;
+      const K = a || {}, {
         baseUrl: E,
         fetch: C = n,
         Request: $ = t,
@@ -77,7 +77,7 @@ function Re(e) {
         querySerializer: U,
         bodySerializer: f = s != null ? s : Ee,
         body: d
-      } = G, v = W(G, [
+      } = K, v = W(K, [
         "baseUrl",
         "fetch",
         "Request",
@@ -89,7 +89,7 @@ function Re(e) {
         "body"
       ]);
       let w = r;
-      E && (w = (K = re(E)) != null ? K : r);
+      E && (w = (Q = re(E)) != null ? Q : r);
       let L = typeof i == "function" ? i : ee(i);
       U && (L = typeof U == "function" ? U : ee(y(y({}, typeof i == "object" ? i : {}), U)));
       const J = d === void 0 ? void 0 : f(
@@ -487,7 +487,7 @@ const Ae = {
       );
       if (f) return f;
     }
-  }), A = Y(() => S(void 0, null, function* () {
+  }), A = Z(() => S(void 0, null, function* () {
     var f;
     if (n) {
       const d = ne(
@@ -534,10 +534,10 @@ const Ae = {
     u,
     o
   ]);
-  Z(() => {
+  G(() => {
     const f = g.current !== e, d = j.current !== c;
     f || d ? (g.current = e, j.current = c, A()) : t || A();
-  }, [e, c, t]), Z(() => {
+  }, [e, c, t]), G(() => {
     const f = h.current;
     (f.enableCache !== n || f.cachePrefix !== i || f.cacheExpiration !== s) && (f.cachePrefix !== i && ie(c, f.cachePrefix), !n && f.enableCache && ie(c, i), h.current = {
       enableCache: n,
@@ -545,7 +545,7 @@ const Ae = {
       cacheExpiration: s
     }, A());
   }, [n, i, s, c]);
-  const q = Y(() => S(void 0, null, function* () {
+  const q = Z(() => S(void 0, null, function* () {
     var f;
     C(null);
     try {
@@ -607,7 +607,11 @@ const Ae = {
     enableCache: o,
     cachePrefix: u,
     cacheExpiration: c
-  }), [E, C] = F(!1), $ = () => S(void 0, null, function* () {
+  }), [E, C] = F(!1);
+  G(() => {
+    C(!1);
+  }, [e]);
+  const $ = () => S(void 0, null, function* () {
     C(!0);
     try {
       yield a(), t == null || t();
@@ -658,7 +662,7 @@ const Ae = {
     [e, r]
   );
   return /* @__PURE__ */ x(le.Provider, { value: n, children: t });
-}, Le = "0.3.0";
+}, Le = "0.3.1";
 export {
   ke as Dismissible,
   le as DismissibleContext,

package/dist/dismissible-client.umd.js

@@ -1 +1 @@
-(function(a,u){typeof exports=="object"&&typeof module!="undefined"?u(exports,require("react/jsx-runtime"),require("react")):typeof define=="function"&&define.amd?define(["exports","react/jsx-runtime","react"],u):(a=typeof globalThis!="undefined"?globalThis:a||self,u(a.DismissibleClient={},a.React.jsxRuntime,a.React))})(this,function(a,u,l){"use strict";var Te=Object.defineProperty,Ue=Object.defineProperties;var qe=Object.getOwnPropertyDescriptors;var W=Object.getOwnPropertySymbols;var de=Object.prototype.hasOwnProperty,he=Object.prototype.propertyIsEnumerable;var fe=(a,u,l)=>u in a?Te(a,u,{enumerable:!0,configurable:!0,writable:!0,value:l}):a[u]=l,p=(a,u)=>{for(var l in u||(u={}))de.call(u,l)&&fe(a,l,u[l]);if(W)for(var l of W(u))he.call(u,l)&&fe(a,l,u[l]);return a},S=(a,u)=>Ue(a,qe(u));var Y=(a,u)=>{var l={};for(var C in a)de.call(a,C)&&u.indexOf(C)<0&&(l[C]=a[C]);if(a!=null&&W)for(var C of W(a))u.indexOf(C)<0&&he.call(a,C)&&(l[C]=a[C]);return l};var O=(a,u,l)=>new Promise((C,L)=>{var V=I=>{try{T(l.next(I))}catch(k){L(k)}},B=I=>{try{T(l.throw(I))}catch(k){L(k)}},T=I=>I.done?C(I.value):Promise.resolve(I.value).then(V,B);T((l=l.apply(a,u)).next())});const C=/\{[^{}]+\}/g,L=()=>{var e,r;return typeof process=="object"&&Number.parseInt((r=(e=process==null?void 0:process.versions)==null?void 0:e.node)==null?void 0:r.substring(0,2))>=18&&process.versions.undici};function V(){return Math.random().toString(36).slice(2,11)}function B(e){let U=p({},e),{baseUrl:r="",Request:t=globalThis.Request,fetch:n=globalThis.fetch,querySerializer:i,bodySerializer:s,headers:o,requestInitExt:d=void 0}=U,h=Y(U,["baseUrl","Request","fetch","querySerializer","bodySerializer","headers","requestInitExt"]);d=L()?d:void 0,r=te(r);const g=[];function E(f,c){return O(this,null,function*(){var ue;const ce=c||{},{baseUrl:A,fetch:D=n,Request:H=t,headers:x,params:$={},parseAs:F="json",querySerializer:z,bodySerializer:m=s!=null?s:ye,body:y}=ce,j=Y(ce,["baseUrl","fetch","Request","headers","params","parseAs","querySerializer","bodySerializer","body"]);let R=r;A&&(R=(ue=te(A))!=null?ue:r);let K=typeof i=="function"?i:Z(i);z&&(K=typeof z=="function"?z:Z(p(p({},typeof i=="object"?i:{}),z)));const Q=y===void 0?void 0:m(y,ee(o,x,$.header)),De=ee(Q===void 0||Q instanceof FormData?{}:{"Content-Type":"application/json"},o,x,$.header),$e=S(p(p({redirect:"follow"},h),j),{body:Q,headers:De});let J,M,q=new t(be(f,{baseUrl:R,params:$,querySerializer:K}),$e),b;for(const v in j)v in q||(q[v]=j[v]);if(g.length){J=V(),M=Object.freeze({baseUrl:R,fetch:D,parseAs:F,querySerializer:K,bodySerializer:m});for(const v of g)if(v&&typeof v=="object"&&typeof v.onRequest=="function"){const w=yield v.onRequest({request:q,schemaPath:f,params:$,options:M,id:J});if(w)if(w instanceof t)q=w;else if(w instanceof Response){b=w;break}else throw new Error("onRequest: must return new Request() or Response() when modifying the request")}}if(!b){try{b=yield D(q,d)}catch(v){let w=v;if(g.length)for(let P=g.length-1;P>=0;P--){const _=g[P];if(_&&typeof _=="object"&&typeof _.onError=="function"){const N=yield _.onError({request:q,error:w,schemaPath:f,params:$,options:M,id:J});if(N){if(N instanceof Response){w=void 0,b=N;break}if(N instanceof Error){w=N;continue}throw new Error("onError: must return new Response() or instance of Error")}}}if(w)throw w}if(g.length)for(let v=g.length-1;v>=0;v--){const w=g[v];if(w&&typeof w=="object"&&typeof w.onResponse=="function"){const P=yield w.onResponse({request:q,response:b,schemaPath:f,params:$,options:M,id:J});if(P){if(!(P instanceof Response))throw new Error("onResponse: must return new Response() when modifying the response");b=P}}}}if(b.status===204||q.method==="HEAD"||b.headers.get("Content-Length")==="0")return b.ok?{data:void 0,response:b}:{error:void 0,response:b};if(b.ok)return F==="stream"?{data:b.body,response:b}:{data:yield b[F](),response:b};let X=yield b.text();try{X=JSON.parse(X)}catch(v){}return{error:X,response:b}})}return{request(f,c,A){return E(c,S(p({},A),{method:f.toUpperCase()}))},GET(f,c){return E(f,S(p({},c),{method:"GET"}))},PUT(f,c){return E(f,S(p({},c),{method:"PUT"}))},POST(f,c){return E(f,S(p({},c),{method:"POST"}))},DELETE(f,c){return E(f,S(p({},c),{method:"DELETE"}))},OPTIONS(f,c){return E(f,S(p({},c),{method:"OPTIONS"}))},HEAD(f,c){return E(f,S(p({},c),{method:"HEAD"}))},PATCH(f,c){return E(f,S(p({},c),{method:"PATCH"}))},TRACE(f,c){return E(f,S(p({},c),{method:"TRACE"}))},use(...f){for(const c of f)if(c){if(typeof c!="object"||!("onRequest"in c||"onResponse"in c||"onError"in c))throw new Error("Middleware must be an object with one of `onRequest()`, `onResponse() or `onError()`");g.push(c)}},eject(...f){for(const c of f){const A=g.indexOf(c);A!==-1&&g.splice(A,1)}}}}function T(e,r,t){if(r==null)return"";if(typeof r=="object")throw new Error("Deeply-nested arrays/objects aren’t supported. Provide your own `querySerializer()` to handle these.");return`${e}=${(t==null?void 0:t.allowReserved)===!0?r:encodeURIComponent(r)}`}function I(e,r,t){if(!r||typeof r!="object")return"";const n=[],i={simple:",",label:".",matrix:";"}[t.style]||"&";if(t.style!=="deepObject"&&t.explode===!1){for(const d in r)n.push(d,t.allowReserved===!0?r[d]:encodeURIComponent(r[d]));const o=n.join(",");switch(t.style){case"form":return`${e}=${o}`;case"label":return`.${o}`;case"matrix":return`;${e}=${o}`;default:return o}}for(const o in r){const d=t.style==="deepObject"?`${e}[${o}]`:o;n.push(T(d,r[o],t))}const s=n.join(i);return t.style==="label"||t.style==="matrix"?`${i}${s}`:s}function k(e,r,t){if(!Array.isArray(r))return"";if(t.explode===!1){const s={form:",",spaceDelimited:"%20",pipeDelimited:"|"}[t.style]||",",o=(t.allowReserved===!0?r:r.map(d=>encodeURIComponent(d))).join(s);switch(t.style){case"simple":return o;case"label":return`.${o}`;case"matrix":return`;${e}=${o}`;default:return`${e}=${o}`}}const n={simple:",",label:".",matrix:";"}[t.style]||"&",i=[];for(const s of r)t.style==="simple"||t.style==="label"?i.push(t.allowReserved===!0?s:encodeURIComponent(s)):i.push(T(e,s,t));return t.style==="label"||t.style==="matrix"?`${n}${i.join(n)}`:i.join(n)}function Z(e){return function(t){const n=[];if(t&&typeof t=="object")for(const i in t){const s=t[i];if(s!=null){if(Array.isArray(s)){if(s.length===0)continue;n.push(k(i,s,S(p({style:"form",explode:!0},e==null?void 0:e.array),{allowReserved:(e==null?void 0:e.allowReserved)||!1})));continue}if(typeof s=="object"){n.push(I(i,s,S(p({style:"deepObject",explode:!0},e==null?void 0:e.object),{allowReserved:(e==null?void 0:e.allowReserved)||!1})));continue}n.push(T(i,s,e))}}return n.join("&")}}function me(e,r){var n;let t=e;for(const i of(n=e.match(C))!=null?n:[]){let s=i.substring(1,i.length-1),o=!1,d="simple";if(s.endsWith("*")&&(o=!0,s=s.substring(0,s.length-1)),s.startsWith(".")?(d="label",s=s.substring(1)):s.startsWith(";")&&(d="matrix",s=s.substring(1)),!r||r[s]===void 0||r[s]===null)continue;const h=r[s];if(Array.isArray(h)){t=t.replace(i,k(s,h,{style:d,explode:o}));continue}if(typeof h=="object"){t=t.replace(i,I(s,h,{style:d,explode:o}));continue}if(d==="matrix"){t=t.replace(i,`;${T(s,h)}`);continue}t=t.replace(i,d==="label"?`.${encodeURIComponent(h)}`:encodeURIComponent(h))}return t}function ye(e,r){var t,n;return e instanceof FormData?e:r&&(r.get instanceof Function?(t=r.get("Content-Type"))!=null?t:r.get("content-type"):(n=r["Content-Type"])!=null?n:r["content-type"])==="application/x-www-form-urlencoded"?new URLSearchParams(e).toString():JSON.stringify(e)}function be(e,r){var i,s;let t=`${r.baseUrl}${e}`;(i=r.params)!=null&&i.path&&(t=me(t,r.params.path));let n=r.querySerializer((s=r.params.query)!=null?s:{});return n.startsWith("?")&&(n=n.substring(1)),n&&(t+=`?${n}`),t}function ee(...e){const r=new Headers;for(const t of e){if(!t||typeof t!="object")continue;const n=t instanceof Headers?t.entries():Object.entries(t);for(const[i,s]of n)if(s===null)r.delete(i);else if(Array.isArray(s))for(const o of s)r.append(i,o);else s!==void 0&&r.set(i,s)}return r}function te(e){return e.endsWith("/")?e.substring(0,e.length-1):e}const pe={baseUrl:"http://localhost:3200"},ge={development:{baseUrl:"http://localhost:3200"},staging:{baseUrl:"https://api.staging.dismissible.io"},production:{baseUrl:"https://api.dismissible.io"}},we=()=>ge["production"]||pe,re=(e,r,t)=>{try{const n=`${r}_${e}`,i=localStorage.getItem(n);if(!i)return null;const{data:s,timestamp:o}=JSON.parse(i);return t&&Date.now()-o>t?(localStorage.removeItem(n),null):s}catch(n){return null}},se=(e,r,t)=>{try{const n=`${t}_${e}`,i={data:r,timestamp:Date.now()};localStorage.setItem(n,JSON.stringify(i))}catch(n){console.warn("Failed to cache dismissible item:",n)}},ne=(e,r)=>{try{const t=`${r}_${e}`;localStorage.removeItem(t)}catch(t){console.warn("Failed to remove cached dismissible item:",t)}},G=l.createContext(null),ie=()=>l.useContext(G),ve="dismissible",oe=(e,r={})=>{var z;const{initialData:t,enableCache:n=!0,cachePrefix:i=ve,cacheExpiration:s}=r,o=ie(),d=l.useMemo(()=>{const m=we(),y=(o==null?void 0:o.baseUrl)||m.baseUrl;return B({baseUrl:y,headers:{}})},[o]),h=l.useMemo(()=>!!(o!=null&&o.jwt)?`${e}-auth`:e,[e,o==null?void 0:o.jwt]),g=l.useRef({enableCache:n,cachePrefix:i,cacheExpiration:s}),E=l.useRef(e),U=l.useRef(h),[f,c]=l.useState(!1),[A,D]=l.useState(null),[H,x]=l.useState(()=>{if(t)return t;if(n){const m=re(h,i,s);if(m)return m}}),$=l.useCallback(()=>O(this,null,function*(){var m;if(n){const y=re(h,i,s);if(y!=null&&y.dismissedAt){x(y),c(!1);return}}c(!0),D(null);try{const y=o!=null&&o.getAuthHeaders?yield o.getAuthHeaders():{},{data:j,error:R}=yield d.GET("/v1/dismissible/{itemId}",{params:{path:{itemId:e}},headers:y});if(R)throw new Error(((m=R==null?void 0:R.error)==null?void 0:m.message)||"Failed to fetch dismissible item");x(j.data),n&&j.data&&se(h,j.data,i)}catch(y){D(y instanceof Error?y:new Error("Unknown error occurred"))}finally{c(!1)}}),[e,h,n,i,s,d,o]);l.useEffect(()=>{const m=E.current!==e,y=U.current!==h;m||y?(E.current=e,U.current=h,$()):t||$()},[e,h,t]),l.useEffect(()=>{const m=g.current;(m.enableCache!==n||m.cachePrefix!==i||m.cacheExpiration!==s)&&(m.cachePrefix!==i&&ne(h,m.cachePrefix),!n&&m.enableCache&&ne(h,i),g.current={enableCache:n,cachePrefix:i,cacheExpiration:s},$())},[n,i,s,h]);const F=l.useCallback(()=>O(this,null,function*(){var m;D(null);try{const y=o!=null&&o.getAuthHeaders?yield o.getAuthHeaders():{},{data:j,error:R}=yield d.DELETE("/v1/dismissible/{itemId}",{params:{path:{itemId:e}},headers:y});if(R)throw new Error(((m=R==null?void 0:R.error)==null?void 0:m.message)||"Failed to dismiss item");x(j.data),n&&j.data&&se(h,j.data,i)}catch(y){throw D(y instanceof Error?y:new Error("Failed to dismiss item")),y}}),[h,n,i,d,o]);return{dismissedOn:(z=H==null?void 0:H.dismissedAt)!=null?z:null,dismiss:F,isLoading:f,error:A,item:H}},Ee=()=>u.jsx("div",{className:"dismissible-loading","aria-live":"polite",children:"Loading..."}),Ce=({error:e})=>u.jsxs("div",{className:"dismissible-error",role:"alert",children:["Error loading dismissible item: ",e.message]}),Re=({id:e,onDismiss:r,ariaLabel:t})=>u.jsx("button",{id:e,className:"dismissible-button",onClick:r,"aria-label":t,type:"button",children:"×"}),Se=({id:e,children:r,onDismiss:t,LoadingComponent:n=Ee,ErrorComponent:i=Ce,DismissButtonComponent:s=Re,enableCache:o,cachePrefix:d,cacheExpiration:h,ignoreErrors:g=!1})=>{const{dismissedOn:E,isLoading:U,error:f,dismiss:c}=oe(e,{enableCache:o,cachePrefix:d,cacheExpiration:h}),[A,D]=l.useState(!1),H=()=>O(this,null,function*(){D(!0);try{yield c(),t==null||t()}catch(x){D(!1)}});return U&&n?u.jsx(n,{id:e}):U&&!n?null:f&&i&&!g?u.jsx(i,{id:e,error:f}):E||A?null:u.jsxs("div",{className:"dismissible-container",children:[u.jsx("div",{className:"dismissible-content",children:r}),s?u.jsx(s,{id:e,onDismiss:H,ariaLabel:`Dismiss ${e}`}):null]})},ae=e=>O(this,null,function*(){if(typeof e=="function")try{const r=e();return yield Promise.resolve(r)}catch(r){console.warn("Failed to resolve JWT from function:",r);return}return e}),le=e=>O(this,null,function*(){const r=yield ae(e);return r?{Authorization:`Bearer ${r}`}:{}}),je=e=>{const r=e.split(".");return r.length===3&&r.every(t=>t.length>0)},Ae=({jwt:e,baseUrl:r,children:t})=>{const n=l.useMemo(()=>({jwt:e,baseUrl:r,getAuthHeaders:()=>O(this,null,function*(){return yield le(e)})}),[e,r]);return u.jsx(G.Provider,{value:n,children:t})},Ie="0.3.0";a.Dismissible=Se,a.DismissibleContext=G,a.DismissibleProvider=Ae,a.VERSION=Ie,a.getAuthHeaders=le,a.isValidJwtFormat=je,a.resolveJwt=ae,a.useDismissibleContext=ie,a.useDismissibleItem=oe,Object.defineProperty(a,Symbol.toStringTag,{value:"Module"})});
+(function(l,u){typeof exports=="object"&&typeof module!="undefined"?u(exports,require("react/jsx-runtime"),require("react")):typeof define=="function"&&define.amd?define(["exports","react/jsx-runtime","react"],u):(l=typeof globalThis!="undefined"?globalThis:l||self,u(l.DismissibleClient={},l.React.jsxRuntime,l.React))})(this,function(l,u,a){"use strict";var Te=Object.defineProperty,Ue=Object.defineProperties;var qe=Object.getOwnPropertyDescriptors;var W=Object.getOwnPropertySymbols;var de=Object.prototype.hasOwnProperty,he=Object.prototype.propertyIsEnumerable;var fe=(l,u,a)=>u in l?Te(l,u,{enumerable:!0,configurable:!0,writable:!0,value:a}):l[u]=a,p=(l,u)=>{for(var a in u||(u={}))de.call(u,a)&&fe(l,a,u[a]);if(W)for(var a of W(u))he.call(u,a)&&fe(l,a,u[a]);return l},S=(l,u)=>Ue(l,qe(u));var Y=(l,u)=>{var a={};for(var C in l)de.call(l,C)&&u.indexOf(C)<0&&(a[C]=l[C]);if(l!=null&&W)for(var C of W(l))u.indexOf(C)<0&&he.call(l,C)&&(a[C]=l[C]);return a};var O=(l,u,a)=>new Promise((C,L)=>{var V=D=>{try{T(a.next(D))}catch(k){L(k)}},B=D=>{try{T(a.throw(D))}catch(k){L(k)}},T=D=>D.done?C(D.value):Promise.resolve(D.value).then(V,B);T((a=a.apply(l,u)).next())});const C=/\{[^{}]+\}/g,L=()=>{var e,r;return typeof process=="object"&&Number.parseInt((r=(e=process==null?void 0:process.versions)==null?void 0:e.node)==null?void 0:r.substring(0,2))>=18&&process.versions.undici};function V(){return Math.random().toString(36).slice(2,11)}function B(e){let U=p({},e),{baseUrl:r="",Request:t=globalThis.Request,fetch:n=globalThis.fetch,querySerializer:i,bodySerializer:s,headers:o,requestInitExt:d=void 0}=U,h=Y(U,["baseUrl","Request","fetch","querySerializer","bodySerializer","headers","requestInitExt"]);d=L()?d:void 0,r=te(r);const g=[];function E(f,c){return O(this,null,function*(){var ue;const ce=c||{},{baseUrl:A,fetch:I=n,Request:H=t,headers:x,params:$={},parseAs:F="json",querySerializer:z,bodySerializer:m=s!=null?s:ye,body:y}=ce,j=Y(ce,["baseUrl","fetch","Request","headers","params","parseAs","querySerializer","bodySerializer","body"]);let R=r;A&&(R=(ue=te(A))!=null?ue:r);let K=typeof i=="function"?i:Z(i);z&&(K=typeof z=="function"?z:Z(p(p({},typeof i=="object"?i:{}),z)));const Q=y===void 0?void 0:m(y,ee(o,x,$.header)),De=ee(Q===void 0||Q instanceof FormData?{}:{"Content-Type":"application/json"},o,x,$.header),$e=S(p(p({redirect:"follow"},h),j),{body:Q,headers:De});let J,M,q=new t(be(f,{baseUrl:R,params:$,querySerializer:K}),$e),b;for(const v in j)v in q||(q[v]=j[v]);if(g.length){J=V(),M=Object.freeze({baseUrl:R,fetch:I,parseAs:F,querySerializer:K,bodySerializer:m});for(const v of g)if(v&&typeof v=="object"&&typeof v.onRequest=="function"){const w=yield v.onRequest({request:q,schemaPath:f,params:$,options:M,id:J});if(w)if(w instanceof t)q=w;else if(w instanceof Response){b=w;break}else throw new Error("onRequest: must return new Request() or Response() when modifying the request")}}if(!b){try{b=yield I(q,d)}catch(v){let w=v;if(g.length)for(let P=g.length-1;P>=0;P--){const _=g[P];if(_&&typeof _=="object"&&typeof _.onError=="function"){const N=yield _.onError({request:q,error:w,schemaPath:f,params:$,options:M,id:J});if(N){if(N instanceof Response){w=void 0,b=N;break}if(N instanceof Error){w=N;continue}throw new Error("onError: must return new Response() or instance of Error")}}}if(w)throw w}if(g.length)for(let v=g.length-1;v>=0;v--){const w=g[v];if(w&&typeof w=="object"&&typeof w.onResponse=="function"){const P=yield w.onResponse({request:q,response:b,schemaPath:f,params:$,options:M,id:J});if(P){if(!(P instanceof Response))throw new Error("onResponse: must return new Response() when modifying the response");b=P}}}}if(b.status===204||q.method==="HEAD"||b.headers.get("Content-Length")==="0")return b.ok?{data:void 0,response:b}:{error:void 0,response:b};if(b.ok)return F==="stream"?{data:b.body,response:b}:{data:yield b[F](),response:b};let X=yield b.text();try{X=JSON.parse(X)}catch(v){}return{error:X,response:b}})}return{request(f,c,A){return E(c,S(p({},A),{method:f.toUpperCase()}))},GET(f,c){return E(f,S(p({},c),{method:"GET"}))},PUT(f,c){return E(f,S(p({},c),{method:"PUT"}))},POST(f,c){return E(f,S(p({},c),{method:"POST"}))},DELETE(f,c){return E(f,S(p({},c),{method:"DELETE"}))},OPTIONS(f,c){return E(f,S(p({},c),{method:"OPTIONS"}))},HEAD(f,c){return E(f,S(p({},c),{method:"HEAD"}))},PATCH(f,c){return E(f,S(p({},c),{method:"PATCH"}))},TRACE(f,c){return E(f,S(p({},c),{method:"TRACE"}))},use(...f){for(const c of f)if(c){if(typeof c!="object"||!("onRequest"in c||"onResponse"in c||"onError"in c))throw new Error("Middleware must be an object with one of `onRequest()`, `onResponse() or `onError()`");g.push(c)}},eject(...f){for(const c of f){const A=g.indexOf(c);A!==-1&&g.splice(A,1)}}}}function T(e,r,t){if(r==null)return"";if(typeof r=="object")throw new Error("Deeply-nested arrays/objects aren’t supported. Provide your own `querySerializer()` to handle these.");return`${e}=${(t==null?void 0:t.allowReserved)===!0?r:encodeURIComponent(r)}`}function D(e,r,t){if(!r||typeof r!="object")return"";const n=[],i={simple:",",label:".",matrix:";"}[t.style]||"&";if(t.style!=="deepObject"&&t.explode===!1){for(const d in r)n.push(d,t.allowReserved===!0?r[d]:encodeURIComponent(r[d]));const o=n.join(",");switch(t.style){case"form":return`${e}=${o}`;case"label":return`.${o}`;case"matrix":return`;${e}=${o}`;default:return o}}for(const o in r){const d=t.style==="deepObject"?`${e}[${o}]`:o;n.push(T(d,r[o],t))}const s=n.join(i);return t.style==="label"||t.style==="matrix"?`${i}${s}`:s}function k(e,r,t){if(!Array.isArray(r))return"";if(t.explode===!1){const s={form:",",spaceDelimited:"%20",pipeDelimited:"|"}[t.style]||",",o=(t.allowReserved===!0?r:r.map(d=>encodeURIComponent(d))).join(s);switch(t.style){case"simple":return o;case"label":return`.${o}`;case"matrix":return`;${e}=${o}`;default:return`${e}=${o}`}}const n={simple:",",label:".",matrix:";"}[t.style]||"&",i=[];for(const s of r)t.style==="simple"||t.style==="label"?i.push(t.allowReserved===!0?s:encodeURIComponent(s)):i.push(T(e,s,t));return t.style==="label"||t.style==="matrix"?`${n}${i.join(n)}`:i.join(n)}function Z(e){return function(t){const n=[];if(t&&typeof t=="object")for(const i in t){const s=t[i];if(s!=null){if(Array.isArray(s)){if(s.length===0)continue;n.push(k(i,s,S(p({style:"form",explode:!0},e==null?void 0:e.array),{allowReserved:(e==null?void 0:e.allowReserved)||!1})));continue}if(typeof s=="object"){n.push(D(i,s,S(p({style:"deepObject",explode:!0},e==null?void 0:e.object),{allowReserved:(e==null?void 0:e.allowReserved)||!1})));continue}n.push(T(i,s,e))}}return n.join("&")}}function me(e,r){var n;let t=e;for(const i of(n=e.match(C))!=null?n:[]){let s=i.substring(1,i.length-1),o=!1,d="simple";if(s.endsWith("*")&&(o=!0,s=s.substring(0,s.length-1)),s.startsWith(".")?(d="label",s=s.substring(1)):s.startsWith(";")&&(d="matrix",s=s.substring(1)),!r||r[s]===void 0||r[s]===null)continue;const h=r[s];if(Array.isArray(h)){t=t.replace(i,k(s,h,{style:d,explode:o}));continue}if(typeof h=="object"){t=t.replace(i,D(s,h,{style:d,explode:o}));continue}if(d==="matrix"){t=t.replace(i,`;${T(s,h)}`);continue}t=t.replace(i,d==="label"?`.${encodeURIComponent(h)}`:encodeURIComponent(h))}return t}function ye(e,r){var t,n;return e instanceof FormData?e:r&&(r.get instanceof Function?(t=r.get("Content-Type"))!=null?t:r.get("content-type"):(n=r["Content-Type"])!=null?n:r["content-type"])==="application/x-www-form-urlencoded"?new URLSearchParams(e).toString():JSON.stringify(e)}function be(e,r){var i,s;let t=`${r.baseUrl}${e}`;(i=r.params)!=null&&i.path&&(t=me(t,r.params.path));let n=r.querySerializer((s=r.params.query)!=null?s:{});return n.startsWith("?")&&(n=n.substring(1)),n&&(t+=`?${n}`),t}function ee(...e){const r=new Headers;for(const t of e){if(!t||typeof t!="object")continue;const n=t instanceof Headers?t.entries():Object.entries(t);for(const[i,s]of n)if(s===null)r.delete(i);else if(Array.isArray(s))for(const o of s)r.append(i,o);else s!==void 0&&r.set(i,s)}return r}function te(e){return e.endsWith("/")?e.substring(0,e.length-1):e}const pe={baseUrl:"http://localhost:3200"},ge={development:{baseUrl:"http://localhost:3200"},staging:{baseUrl:"https://api.staging.dismissible.io"},production:{baseUrl:"https://api.dismissible.io"}},we=()=>ge["production"]||pe,re=(e,r,t)=>{try{const n=`${r}_${e}`,i=localStorage.getItem(n);if(!i)return null;const{data:s,timestamp:o}=JSON.parse(i);return t&&Date.now()-o>t?(localStorage.removeItem(n),null):s}catch(n){return null}},se=(e,r,t)=>{try{const n=`${t}_${e}`,i={data:r,timestamp:Date.now()};localStorage.setItem(n,JSON.stringify(i))}catch(n){console.warn("Failed to cache dismissible item:",n)}},ne=(e,r)=>{try{const t=`${r}_${e}`;localStorage.removeItem(t)}catch(t){console.warn("Failed to remove cached dismissible item:",t)}},G=a.createContext(null),ie=()=>a.useContext(G),ve="dismissible",oe=(e,r={})=>{var z;const{initialData:t,enableCache:n=!0,cachePrefix:i=ve,cacheExpiration:s}=r,o=ie(),d=a.useMemo(()=>{const m=we(),y=(o==null?void 0:o.baseUrl)||m.baseUrl;return B({baseUrl:y,headers:{}})},[o]),h=a.useMemo(()=>!!(o!=null&&o.jwt)?`${e}-auth`:e,[e,o==null?void 0:o.jwt]),g=a.useRef({enableCache:n,cachePrefix:i,cacheExpiration:s}),E=a.useRef(e),U=a.useRef(h),[f,c]=a.useState(!1),[A,I]=a.useState(null),[H,x]=a.useState(()=>{if(t)return t;if(n){const m=re(h,i,s);if(m)return m}}),$=a.useCallback(()=>O(this,null,function*(){var m;if(n){const y=re(h,i,s);if(y!=null&&y.dismissedAt){x(y),c(!1);return}}c(!0),I(null);try{const y=o!=null&&o.getAuthHeaders?yield o.getAuthHeaders():{},{data:j,error:R}=yield d.GET("/v1/dismissible/{itemId}",{params:{path:{itemId:e}},headers:y});if(R)throw new Error(((m=R==null?void 0:R.error)==null?void 0:m.message)||"Failed to fetch dismissible item");x(j.data),n&&j.data&&se(h,j.data,i)}catch(y){I(y instanceof Error?y:new Error("Unknown error occurred"))}finally{c(!1)}}),[e,h,n,i,s,d,o]);a.useEffect(()=>{const m=E.current!==e,y=U.current!==h;m||y?(E.current=e,U.current=h,$()):t||$()},[e,h,t]),a.useEffect(()=>{const m=g.current;(m.enableCache!==n||m.cachePrefix!==i||m.cacheExpiration!==s)&&(m.cachePrefix!==i&&ne(h,m.cachePrefix),!n&&m.enableCache&&ne(h,i),g.current={enableCache:n,cachePrefix:i,cacheExpiration:s},$())},[n,i,s,h]);const F=a.useCallback(()=>O(this,null,function*(){var m;I(null);try{const y=o!=null&&o.getAuthHeaders?yield o.getAuthHeaders():{},{data:j,error:R}=yield d.DELETE("/v1/dismissible/{itemId}",{params:{path:{itemId:e}},headers:y});if(R)throw new Error(((m=R==null?void 0:R.error)==null?void 0:m.message)||"Failed to dismiss item");x(j.data),n&&j.data&&se(h,j.data,i)}catch(y){throw I(y instanceof Error?y:new Error("Failed to dismiss item")),y}}),[h,n,i,d,o]);return{dismissedOn:(z=H==null?void 0:H.dismissedAt)!=null?z:null,dismiss:F,isLoading:f,error:A,item:H}},Ee=()=>u.jsx("div",{className:"dismissible-loading","aria-live":"polite",children:"Loading..."}),Ce=({error:e})=>u.jsxs("div",{className:"dismissible-error",role:"alert",children:["Error loading dismissible item: ",e.message]}),Re=({id:e,onDismiss:r,ariaLabel:t})=>u.jsx("button",{id:e,className:"dismissible-button",onClick:r,"aria-label":t,type:"button",children:"×"}),Se=({id:e,children:r,onDismiss:t,LoadingComponent:n=Ee,ErrorComponent:i=Ce,DismissButtonComponent:s=Re,enableCache:o,cachePrefix:d,cacheExpiration:h,ignoreErrors:g=!1})=>{const{dismissedOn:E,isLoading:U,error:f,dismiss:c}=oe(e,{enableCache:o,cachePrefix:d,cacheExpiration:h}),[A,I]=a.useState(!1);a.useEffect(()=>{I(!1)},[e]);const H=()=>O(this,null,function*(){I(!0);try{yield c(),t==null||t()}catch(x){I(!1)}});return U&&n?u.jsx(n,{id:e}):U&&!n?null:f&&i&&!g?u.jsx(i,{id:e,error:f}):E||A?null:u.jsxs("div",{className:"dismissible-container",children:[u.jsx("div",{className:"dismissible-content",children:r}),s?u.jsx(s,{id:e,onDismiss:H,ariaLabel:`Dismiss ${e}`}):null]})},ae=e=>O(this,null,function*(){if(typeof e=="function")try{const r=e();return yield Promise.resolve(r)}catch(r){console.warn("Failed to resolve JWT from function:",r);return}return e}),le=e=>O(this,null,function*(){const r=yield ae(e);return r?{Authorization:`Bearer ${r}`}:{}}),je=e=>{const r=e.split(".");return r.length===3&&r.every(t=>t.length>0)},Ae=({jwt:e,baseUrl:r,children:t})=>{const n=a.useMemo(()=>({jwt:e,baseUrl:r,getAuthHeaders:()=>O(this,null,function*(){return yield le(e)})}),[e,r]);return u.jsx(G.Provider,{value:n,children:t})},Ie="0.3.1";l.Dismissible=Se,l.DismissibleContext=G,l.DismissibleProvider=Ae,l.VERSION=Ie,l.getAuthHeaders=le,l.isValidJwtFormat=je,l.resolveJwt=ae,l.useDismissibleContext=ie,l.useDismissibleItem=oe,Object.defineProperty(l,Symbol.toStringTag,{value:"Module"})});

package/dist/root.d.ts

@@ -9,4 +9,4 @@ export * from './contexts/DismissibleContext';
 export * from './contexts/DismissibleProvider';
 export * from './types/dismissible.types';
 export * from './utils/auth.utils';
-export declare const VERSION = "0.3.0";
+export declare const VERSION = "0.3.1";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dismissible/react-client",
-  "version": "0.3.0",
+  "version": "0.3.2",
   "type": "module",
   "files": [
     "dist",