shared-features 0.0.1 → 0.0.2

package/README.md

@@ -5,6 +5,9 @@ Centralized common features for Zaions projects. Manage ads, contacts, feature r
 ## Features
 
 - **Advertising Campaigns** - Cross-promote Zaions products across all projects
+  - 5 Ad Components (AdPanel, AdSlider, AdModal, AdUpdateModal, AdBanner)
+  - 10 Display Variants (5 small, 5 large)
+  - Frequency capping and analytics
 - **Products Catalog** - Centralized product information
 - **Contact Forms** - (Coming soon)
 - **Feature Requests** - (Coming soon)
@@ -23,7 +26,7 @@ yarn add shared-features
 This package requires the following peer dependencies:
 
 ```bash
-yarn add react react-dom firebase @radix-ui/themes zustand
+yarn add react react-dom firebase @radix-ui/themes zustand lucide-react
 # Optional for mobile:
 yarn add @capacitor/preferences
 ```
@@ -175,18 +178,92 @@ interface UseCampaignsResult {
 }
 ```
 
-### `AdPanel`
+### Components
 
-Component to display a single ad.
+#### `AdPanel`
+
+Simple single-ad panel for sidebars and footers.
+
+```tsx
+<AdPanel placement="sidebar_panel" variant="small_panel_2" className="my-ad" />
+```
+
+#### `AdSlider`
+
+Small promotional slider using small panel variants.
+
+```tsx
+<AdSlider placement="footer_slider" className="my-slider" />
+```
+
+#### `AdBanner`
+
+Permanent promotional banner with auto-rotation and progress indicators.
 
 ```tsx
-<AdPanel
-  placement="sidebar_panel"
-  variant="small_panel_2"
-  className="my-ad"
+<AdBanner
+  placement="home_banner"
+  rotationInterval={10000}
+  maxCampaigns={5}
 />
 ```
 
+#### `AdModal`
+
+One-time promotional modal shown on first visit.
+
+```tsx
+import { AdModal, useOneTimeAdModal } from 'shared-features';
+
+function App() {
+  const { shouldShow, markAsShown } = useOneTimeAdModal();
+
+  return (
+    <>
+      {shouldShow && <AdModal onClose={markAsShown} />}
+      {/* Your app content */}
+    </>
+  );
+}
+```
+
+#### `AdUpdateModal`
+
+Carousel modal shown when app version changes.
+
+```tsx
+import { AdUpdateModal, useUpdateAdModal } from 'shared-features';
+
+function App() {
+  const { shouldShow, currentVersion, markAsShown } = useUpdateAdModal();
+
+  return (
+    <>
+      {shouldShow && <AdUpdateModal onClose={markAsShown} />}
+      {/* Your app content */}
+    </>
+  );
+}
+```
+
+### Modal Hooks
+
+#### `useOneTimeAdModal()`
+
+Manages one-time modal visibility (first visit).
+
+```typescript
+const { shouldShow, markAsShown } = useOneTimeAdModal();
+```
+
+#### `useUpdateAdModal(currentVersion?)`
+
+Manages update modal visibility (version change).
+
+```typescript
+const { shouldShow, previousVersion, currentVersion, markAsShown } = useUpdateAdModal();
+```
+
 ## Frequency Capping
 
 Ads automatically respect frequency capping set in the admin panel. By default, each campaign is shown to a user once every 20 days. This is tracked locally using Capacitor Preferences (mobile) or localStorage (web).