@dismissible/react-client 0.3.0 → 0.3.2-canary.2.38782c4

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/contexts/DismissibleContext.d.ts

@@ -5,6 +5,7 @@ import { DismissibleContextValue } from '../types/dismissible.types';
 export declare const DismissibleContext: import('react').Context<DismissibleContextValue | null>;
 /**
  * Hook to consume the DismissibleContext
- * @returns The context value or null if not within a provider
+ * @throws Error if used outside of a DismissibleProvider
+ * @returns The context value
  */
-export declare const useDismissibleContext: () => DismissibleContextValue | null;
+export declare const useDismissibleContext: () => DismissibleContextValue;

package/dist/contexts/DismissibleProvider.d.ts

@@ -6,12 +6,13 @@ import { DismissibleProviderProps } from '../types/dismissible.types';
  * @example
  * ```tsx
  * // With static JWT
- * <DismissibleProvider jwt="eyJhbGciOiJ..." baseUrl="https://api.dismissible.io">
+ * <DismissibleProvider userId="user-123" jwt="eyJhbGciOiJ..." baseUrl="https://api.dismissible.io">
  *   <App />
  * </DismissibleProvider>
  *
  * // With synchronous JWT function
  * <DismissibleProvider
+ *   userId="user-123"
  *   jwt={() => getAccessToken()}
  *   baseUrl="https://api.dismissible.io"
  * >
@@ -20,6 +21,7 @@ import { DismissibleProviderProps } from '../types/dismissible.types';
  *
  * // With asynchronous JWT function
  * <DismissibleProvider
+ *   userId="user-123"
  *   jwt={async () => await fetchAccessToken()}
  *   baseUrl="https://api.dismissible.io"
  * >