@dismissible/react-client 0.3.2 → 1.0.0-canary.4.a9fb4a5

package/README.md

@@ -1,24 +1,37 @@
-# @dismissible/react-client
+<p align="center">
+  <a href="https://dismissible.io" target="_blank"><img src="https://raw.githubusercontent.com/DismissibleIo/dismissible-api/main/docs/images/dismissible_logo.png" width="240" alt="Dismissible" /></a>
+</p>
+
+<p align="center">Never Show The Same Thing Twice!</p>
+<p align="center">
+    <a href="https://www.npmjs.com/package/@dismissible/react-client" target="_blank"><img src="https://img.shields.io/npm/v/@dismissible/react-client.svg" alt="NPM Version" /></a>
+    <a href="https://github.com/dismissibleio/dismissible-react-client/blob/main/LICENSE" target="_blank"><img src="https://img.shields.io/npm/l/@dismissible/react-client.svg" alt="Package License" /></a>
+    <a href="https://www.npmjs.com/package/@dismissible/react-client" target="_blank"><img src="https://img.shields.io/npm/dm/@dismissible/react-client.svg" alt="NPM Downloads" /></a>
+    <a href="https://github.com/dismissibleio/dismissible-react-client" target="_blank"><img alt="GitHub Actions Workflow Status" src="https://img.shields.io/github/actions/workflow/status/dismissibleio/dismissible-react-client/publish.yml" /></a>
+    <a href="https://paypal.me/joshstuartx" target="_blank"><img src="https://img.shields.io/badge/Donate-PayPal-ff3f59.svg" /></a>
+</p>
+
+Dismissible manages the state of your UI elements across sessions, so your users see what matters, once! No more onboarding messages reappearing on every tab, no more notifications haunting users across devices. Dismissible syncs dismissal state everywhere, so every message is intentional, never repetitive.
 
-A React component library for creating dismissible UI elements with persistent state management. 
+# @dismissible/react-client
 
-Use this in combination with [dismissible.io](https://dismissible.io). Get your free account now!
+This is the React component library for creating dismissible UI elements with persistent state management.
 
-🌐 **[dismissible.io](https://dismissible.io)** | 💰 **[View Pricing](https://dismissible.io/pricing)** | 📖 **[Documentation](https://docs.dismissible.io)**
+This component is used with the [Dismissible API Server](https://github.com/DismissibleIo/dismissible-api), which you can self-host with Docker or integrate into your NestJS application.
 
-[![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)
+**[dismissible.io](https://dismissible.io)** | **[Documentation](https://dismissible.io/docs)** | **[API Server](https://github.com/DismissibleIo/dismissible-api)**
 
 ## Features
 
-- 🎯 **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 (Enterprise only)
-- 🎨 **Customizable** - Custom loading, error, and dismiss button components
-- ♿ **Accessible** - Built with accessibility best practices
-- 🪝 **Hook-based** - Includes `useDismissibleItem` hook for custom implementations
-- 📦 **Lightweight** - Minimal bundle size with tree-shaking support
-- 🔧 **TypeScript** - Full TypeScript support with complete type definitions
+- **Easy to use** - Simple component API for dismissible content
+- **Persistent state** - Dismissal state is saved and restored across sessions when using the [Dismissible API Server](https://github.com/DismissibleIo/dismissible-api)
+- **Restore support** - Restore previously dismissed items programmatically
+- **JWT Authentication** - Built-in support for secure JWT-based authentication
+- **Customizable** - Custom loading, error, and dismiss button components
+- **Accessible** - Built with accessibility best practices
+- **Hook-based** - Includes `useDismissibleItem` hook for custom implementations
+- **Lightweight** - Minimal bundle size with tree-shaking support
+- **TypeScript** - Full TypeScript support with complete type definitions
 
 ## Installation
 
@@ -36,13 +49,61 @@ npm install react react-dom
 
 ## Quick Start
 
+### 1. Set up the Dismissible API Server
+
+First, you need a [Dismissible API Server](https://github.com/DismissibleIo/dismissible-api). The easiest way is with Docker:
+
+```yaml
+# docker-compose.yml
+version: '3.8'
+services:
+  api:
+    image: dismissibleio/dismissible-api:latest
+    ports:
+      - '3001:3001'
+    environment:
+      DISMISSIBLE_PORT: 3001
+```
+
+```bash
+docker-compose up -d
+```
+
+OR
+
+```bash
+docker run -p 3001:3001 -e DISMISSIBLE_PORT=3001 dismissibleio/dismissible-api:latest
+```
+
+See the [API Server documentation](https://github.com/DismissibleIo/dismissible-api) for more deployment options including NestJS integration, public Docker image and more.
+
+### 2. Configure the Provider
+
+Wrap your app with `DismissibleProvider`. The `userId` prop is **required** to track all your dismissals per user:
+
 ```tsx
-import React from 'react';
-import { Dismissible } from '@dismissible/react-client';
+import { DismissibleProvider } from '@dismissible/react-client';
 
 function App() {
+  const userId = getCurrentUserId();
+  
   return (
-    <Dismissible id="welcome-banner-123-413-31-1">
+    <DismissibleProvider userId={userId} baseUrl="http://localhost:3001">
+      <YourApp />
+    </DismissibleProvider>
+  );
+}
+```
+
+### 3. Use Dismissible Components
+Now wrap any component you want to be dismissible with the `<Dismissible>` component, and the `itemId`, along with the `userId`, will become the unique key that is tracked across sessions and devices.
+
+```tsx
+import { Dismissible } from '@dismissible/react-client';
+
+function WelcomeBanner() {
+  return (
+    <Dismissible itemId="welcome-banner">
       <div className="banner">
         <h2>Welcome to our app!</h2>
         <p>This banner can be dismissed and won't show again.</p>
@@ -56,16 +117,15 @@ function App() {
 
 ### `<DismissibleProvider>` Component
 
-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)
+Context provider that configures authentication and API settings. **Required** - all `<Dismissible>` components must be wrapped in a provider.
 
 #### Props
 
 | Prop | Type | Required | Description |
 |------|------|----------|-------------|
-| `jwt` | `string \| (() => string) \| (() => Promise<string>)` | ❌ | JWT token for user-specific dismissals (**Enterprise only**) |
-| `baseUrl` | `string` | ❌ | Custom API base URL override |
+| `userId` | `string` | ✅ | User ID for tracking dismissals per user |
+| `jwt` | `string \| (() => string) \| (() => Promise<string>)` | ❌ | JWT token for secure authentication |
+| `baseUrl` | `string` | ❌ | API base URL (defaults to your self-hosted server) |
 | `children` | `ReactNode` | ✅ | Components that will use the dismissible functionality |
 
 #### Example
@@ -73,37 +133,53 @@ Context provider for JWT authentication and configuration. Wrap your app or comp
 ```tsx
 import { DismissibleProvider } from '@dismissible/react-client';
 
-// With static JWT
+// Basic setup with userId
 function App() {
   return (
-    <DismissibleProvider jwt="eyJhbGciOiJIUzI1NiIs...">
+    <DismissibleProvider userId="user-123" baseUrl="http://localhost:3001">
       <YourApp />
     </DismissibleProvider>
   );
 }
 
-// With dynamic JWT function
-function AppWithDynamicAuth() {
+// With static JWT
+function AppWithJWT() {
   return (
-    <DismissibleProvider jwt={() => getAccessToken()}>
+    <DismissibleProvider 
+      userId="user-123" 
+      jwt="eyJhbGciOiJIUzI1NiIs..."
+      baseUrl="https://api.yourapp.com"
+    >
       <YourApp />
     </DismissibleProvider>
   );
 }
 
-// With async JWT function
-function AppWithAsyncAuth() {
+// With dynamic JWT function
+function AppWithDynamicAuth() {
+  const { user, getAccessToken } = useAuth();
+  
   return (
-    <DismissibleProvider jwt={async () => await fetchAccessToken()}>
+    <DismissibleProvider 
+      userId={user.id} 
+      jwt={() => getAccessToken()}
+      baseUrl="https://api.yourapp.com"
+    >
       <YourApp />
     </DismissibleProvider>
   );
 }
 
-// Without JWT (anonymous/backwards compatible)
-function AppWithoutAuth() {
+// With async JWT function
+function AppWithAsyncAuth() {
+  const { user, refreshAndGetToken } = useAuth();
+  
   return (
-    <DismissibleProvider>
+    <DismissibleProvider 
+      userId={user.id} 
+      jwt={async () => await refreshAndGetToken()}
+      baseUrl="https://api.yourapp.com"
+    >
       <YourApp />
     </DismissibleProvider>
   );
@@ -114,25 +190,29 @@ function AppWithoutAuth() {
 
 The main component for creating dismissible content.
 
+> **Note:** The `<Dismissible>` component renders `null` when an item is dismissed. For restore functionality, use the `useDismissibleItem` hook directly in custom implementations.
+
 #### Props
 
 | Prop | Type | Required | Description |
 |------|------|----------|-------------|
-| `id` | `string` | ✅ | Unique identifier for the dismissible item |
+| `itemId` | `string` | ✅ | Unique identifier for the dismissible item |
 | `children` | `ReactNode` | ✅ | Content to render when not dismissed |
 | `onDismiss` | `() => void` | ❌ | Callback fired when item is dismissed |
-| `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 |
+| `LoadingComponent` | `ComponentType<{itemId: string}>` | ❌ | Custom loading component |
+| `ErrorComponent` | `ComponentType<{itemId: string, error: Error}>` | ❌ | Custom error component |
+| `DismissButtonComponent` | `ComponentType<{onDismiss: () => Promise<void>, ariaLabel: string}>` | ❌ | Custom dismiss button |
 | `ignoreErrors` | `boolean` | ❌ | Ignore errors and display component anyway (default: false) |
+| `enableCache` | `boolean` | ❌ | Enable localStorage caching (default: true) |
+| `cachePrefix` | `string` | ❌ | Cache key prefix (default: 'dismissible') |
+| `cacheExpiration` | `number` | ❌ | Cache expiration time in milliseconds |
 
 #### Example
 
 ```tsx
 <Dismissible
-  id="promo-banner"
+  itemId="promo-banner"
   onDismiss={() => console.log('Banner dismissed')}
-  onRestore={() => console.log('Banner restored')}
 >
   <div className="promo">
     <h3>Special Offer!</h3>
@@ -149,28 +229,36 @@ For custom implementations and advanced use cases.
 
 | Parameter | Type | Required | Description |
 |-----------|------|----------|-------------|
-| `id` | `string` | ✅ | Unique identifier for the dismissible item |
+| `itemId` | `string` | ✅ | Unique identifier for the dismissible item |
+| `options` | `object` | ❌ | Configuration options |
+
+#### Options
+
+| Option | Type | Required | Description |
+|--------|------|----------|-------------|
+| `enableCache` | `boolean` | ❌ | Enable localStorage caching (default: true) |
+| `cachePrefix` | `string` | ❌ | Cache key prefix (default: 'dismissible') |
+| `cacheExpiration` | `number` | ❌ | Cache expiration time in milliseconds |
+| `initialData` | `IDismissibleItem` | ❌ | Initial data for the dismissible item |
 
 #### Returns
 
 | Property | Type | Description |
 |----------|------|-------------|
-| `dismissedOn` | `string \| null` | ISO date string when item was dismissed, or null |
+| `dismissedAt` | `string \| undefined` | ISO date string when item was dismissed, or undefined |
 | `dismiss` | `() => Promise<void>` | Function to dismiss the item |
+| `restore` | `() => Promise<void>` | Function to restore a dismissed item |
 | `isLoading` | `boolean` | Loading state indicator |
-| `error` | `Error \| null` | Error state, if any |
+| `error` | `Error \| undefined` | Error state, if any |
+| `item` | `IDismissibleItem \| undefined` | The full dismissible item object |
 
 #### Example
 
 ```tsx
 import { useDismissibleItem } from '@dismissible/react-client';
 
-function CustomDismissible({ id, children }) {
-  const { dismissedOn, dismiss, isLoading, error } = useDismissibleItem(id);
-
-  if (dismissedOn) {
-    return null; // Item is dismissed
-  }
+function CustomDismissible({ itemId, children }) {
+  const { dismissedAt, dismiss, restore, isLoading, error } = useDismissibleItem(itemId);
 
   if (isLoading) {
     return <div>Loading...</div>;
@@ -180,6 +268,15 @@ function CustomDismissible({ id, children }) {
     return <div>Error: {error.message}</div>;
   }
 
+  if (dismissedAt) {
+    return (
+      <div>
+        <p>This item was dismissed.</p>
+        <button onClick={restore}>Restore</button>
+      </div>
+    );
+  }
+
   return (
     <div>
       {children}
@@ -193,21 +290,16 @@ function CustomDismissible({ id, children }) {
 
 ## Usage Examples
 
-### 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`:
+### Basic Dismissible Banner
 
 ```tsx
 import { DismissibleProvider, Dismissible } from '@dismissible/react-client';
 
 function App() {
-  // Example with static JWT token
-  const jwt = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...";
+  const userId = getCurrentUserId();
   
   return (
-    <DismissibleProvider jwt={jwt}>
+    <DismissibleProvider userId={userId} baseUrl="http://localhost:3001">
       <Dashboard />
     </DismissibleProvider>
   );
@@ -215,61 +307,47 @@ function App() {
 
 function Dashboard() {
   return (
-    <div>
-      {/* These dismissible items will be user-specific */}
-      <Dismissible id="user-welcome-banner">
-        <div className="alert alert-info">
-          <h4>Welcome back!</h4>
-          <p>You have 3 new notifications.</p>
-        </div>
-      </Dismissible>
-    </div>
+    <Dismissible itemId="welcome-banner">
+      <div className="alert alert-info">
+        <h4>Welcome!</h4>
+        <p>Thanks for joining our platform. Here are some quick tips to get started.</p>
+      </div>
+    </Dismissible>
   );
 }
 ```
 
-### Dynamic JWT with Authentication Provider
+### JWT Authentication Setup
+
+For secure environments, configure JWT authentication:
 
 ```tsx
-import { DismissibleProvider } from '@dismissible/react-client';
-import { useAuth } from './auth'; // Your auth context
+import { DismissibleProvider, Dismissible } from '@dismissible/react-client';
 
-// Synchronous JWT function
 function App() {
-  const { getAccessToken } = useAuth();
+  const { user, getAccessToken } = useAuth();
   
   return (
-    <DismissibleProvider jwt={() => getAccessToken()}>
-      <YourApp />
-    </DismissibleProvider>
-  );
-}
-
-// Asynchronous JWT function
-function AppWithAsyncAuth() {
-  const { refreshAndGetToken } = useAuth();
-  
-  return (
-    <DismissibleProvider jwt={async () => await refreshAndGetToken()}>
-      <YourApp />
+    <DismissibleProvider 
+      userId={user.id}
+      jwt={() => getAccessToken()}
+      baseUrl="https://api.yourapp.com"
+    >
+      <Dashboard />
     </DismissibleProvider>
   );
 }
-```
-
-### Basic Dismissible Banner
-
-```tsx
-import { Dismissible } from '@dismissible/react-client';
 
-function WelcomeBanner() {
+function Dashboard() {
   return (
-    <Dismissible id="welcome-banner-234-432-432-1">
-      <div className="alert alert-info">
-        <h4>Welcome!</h4>
-        <p>Thanks for joining our platform. Here are some quick tips to get started.</p>
-      </div>
-    </Dismissible>
+    <div>
+      <Dismissible itemId="user-welcome-banner">
+        <div className="alert alert-info">
+          <h4>Welcome back!</h4>
+          <p>You have 3 new notifications.</p>
+        </div>
+      </Dismissible>
+    </div>
   );
 }
 ```
@@ -292,7 +370,7 @@ const CustomDismissButton = ({ onDismiss, ariaLabel }) => (
 function CustomBanner() {
   return (
     <Dismissible
-      id="custom-banner"
+      itemId="custom-banner"
       DismissButtonComponent={CustomDismissButton}
     >
       <div className="banner">
@@ -308,7 +386,7 @@ function CustomBanner() {
 ```tsx
 import { Dismissible } from '@dismissible/react-client';
 
-const CustomLoader = ({ id }) => (
+const CustomLoader = ({ itemId }) => (
   <div className="spinner">
     <div className="bounce1"></div>
     <div className="bounce2"></div>
@@ -329,7 +407,7 @@ const CustomError = ({ error }) => (
 function AdvancedBanner() {
   return (
     <Dismissible
-      id="advanced-banner"
+      itemId="advanced-banner"
       LoadingComponent={CustomLoader}
       ErrorComponent={CustomError}
     >
@@ -349,21 +427,21 @@ import { Dismissible } from '@dismissible/react-client';
 function Dashboard() {
   return (
     <div>
-      <Dismissible id="feature-announcement-234-432-432-1">
+      <Dismissible itemId="feature-announcement">
         <div className="alert alert-success">
-          🎉 New feature: Dark mode is now available!
+          New feature: Dark mode is now available!
         </div>
       </Dismissible>
 
-      <Dismissible id="maintenance-notice-234-432-432-1">
+      <Dismissible itemId="maintenance-notice">
         <div className="alert alert-warning">
-          ⚠️ Scheduled maintenance: Sunday 2AM-4AM EST
+          Scheduled maintenance: Sunday 2AM-4AM EST
         </div>
       </Dismissible>
 
-      <Dismissible id="survey-request-234-432-432-1">
+      <Dismissible itemId="survey-request">
         <div className="alert alert-info">
-          📝 Help us improve! Take our 2-minute survey.
+          Help us improve! Take our 2-minute survey.
         </div>
       </Dismissible>
     </div>
@@ -371,35 +449,6 @@ function Dashboard() {
 }
 ```
 
-### 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';
-
-// With JWT - dismissible state is user-specific
-function AuthenticatedApp() {
-  return (
-    <DismissibleProvider jwt={() => getAccessToken()}>
-      <div>
-        {/* Each user will see this banner independently */}
-        <Dismissible id="feature-announcement">
-          <div>New feature available!</div>
-        </Dismissible>
-        
-        {/* User A dismissing this won't affect User B */}
-        <Dismissible id="survey-request">
-          <div>Please take our survey!</div>
-        </Dismissible>
-      </div>
-    </DismissibleProvider>
-  );
-}
-```
-
 ### Error Handling with ignoreErrors
 
 ```tsx
@@ -409,7 +458,7 @@ import { Dismissible } from '@dismissible/react-client';
 function RobustBanner() {
   return (
     <Dismissible
-      id="important-announcement"
+      itemId="important-announcement"
       ignoreErrors={true}
     >
       <div className="important-banner">
@@ -421,76 +470,19 @@ function RobustBanner() {
 }
 ```
 
-### 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>
-  );
-}
-```
-
 ### Using the Hook for Complex Logic
 
 ```tsx
-import { useDismissibleItem, DismissibleProvider } from '@dismissible/react-client';
+import { useDismissibleItem } from '@dismissible/react-client';
 import { useState, useEffect } from 'react';
 
-function SmartNotification({ id, message, type = 'info' }) {
-  const { dismissedOn, dismiss, isLoading } = useDismissibleItem(id);
+function SmartNotification({ itemId, message, type = 'info' }) {
+  const { dismissedAt, dismiss, isLoading } = useDismissibleItem(itemId);
   const [autoHide, setAutoHide] = useState(false);
 
   // Auto-hide after 10 seconds for info messages
   useEffect(() => {
-    if (type === 'info' && !dismissedOn) {
+    if (type === 'info' && !dismissedAt) {
       const timer = setTimeout(() => {
         setAutoHide(true);
         dismiss();
@@ -498,9 +490,9 @@ function SmartNotification({ id, message, type = 'info' }) {
       
       return () => clearTimeout(timer);
     }
-  }, [type, dismissedOn, dismiss]);
+  }, [type, dismissedAt, dismiss]);
 
-  if (dismissedOn || autoHide) {
+  if (dismissedAt || autoHide) {
     return null;
   }
 
@@ -517,17 +509,37 @@ function SmartNotification({ id, message, type = 'info' }) {
     </div>
   );
 }
+```
+
+### Restoring Dismissed Items
+
+Use the `restore` function to bring back previously dismissed content:
+
+```tsx
+import { useDismissibleItem } from '@dismissible/react-client';
+
+function RestorableBanner({ itemId }) {
+  const { dismissedAt, dismiss, restore, isLoading } = useDismissibleItem(itemId);
+
+  if (dismissedAt) {
+    return (
+      <div className="dismissed-placeholder">
+        <p>Banner was dismissed on {new Date(dismissedAt).toLocaleDateString()}</p>
+        <button onClick={restore} disabled={isLoading}>
+          {isLoading ? 'Restoring...' : 'Show Banner Again'}
+        </button>
+      </div>
+    );
+  }
 
-// Usage with async authentication
-function App() {
   return (
-    <DismissibleProvider jwt={async () => await getUserToken()}>
-      <SmartNotification 
-        id="user-specific-notification" 
-        message="Welcome back!" 
-        type="info" 
-      />
-    </DismissibleProvider>
+    <div className="banner">
+      <h3>Welcome!</h3>
+      <p>This is a restorable banner.</p>
+      <button onClick={dismiss} disabled={isLoading}>
+        Dismiss
+      </button>
+    </div>
   );
 }
 ```
@@ -555,37 +567,40 @@ The library includes minimal default styles. You can override them or provide yo
 }
 ```
 
-## TypeScript Support
+## Self-Hosting
 
-The library is written in TypeScript and exports all type definitions:
+Dismissible is designed to be self-hosted. You have full control over your data.
 
-```tsx
-import type { 
-  DismissibleProps,
-  DismissibleProviderProps,
-  JwtToken,
-  IDismissibleItem 
-} from '@dismissible/react-client';
-
-// Dismissible component with custom props
-const MyComponent: React.FC<DismissibleProps> = (props) => {
-  // Your component implementation
-};
-
-// Provider with JWT authentication
-const AuthProvider: React.FC<DismissibleProviderProps> = ({ children, jwt }) => {
-  return (
-    <DismissibleProvider jwt={jwt}>
-      {children}
-    </DismissibleProvider>
-  );
-};
+### Option 1: Docker (Recommended)
+
+The fastest way to get started:
+
+```bash
+docker run -p 3001:3001 dismissibleio/dismissible-api:latest
 ```
 
+See the [Docker documentation](https://dismissible.io/docs/docker) for production configuration.
+
+### Option 2: NestJS Module
+
+Integrate directly into your existing NestJS application:
+
+```bash
+npm install @dismissible/nestjs-api
+```
+
+See the [NestJS documentation](https://dismissible.io/docs/nestjs) for setup instructions.
+
 ## Support
 
-- 📖 [Documentation](https://docs.dismissible.io)
+- [Documentation](https://dismissible.io/docs)
+- [GitHub - React Client](https://github.com/DismissibleIo/dismissible-react-client)
+- [GitHub - API Server](https://github.com/DismissibleIo/dismissible-api)
+
+## License
+
+MIT © [Dismissible](https://dismissible.io)
 
 ## Changelog
 
-See [CHANGELOG.md](./CHANGELOG.md) for a detailed list of changes.
+See [CHANGELOG.md](./CHANGELOG.md) for a detailed list of changes.