finsignal-feed-explore 1.8.0 → 1.9.2

package/README.md

@@ -0,0 +1,308 @@
+# finsignal-feed-explore
+
+News feed explorer components for React web applications. A comprehensive library for displaying and interacting with financial news feeds.
+
+## Installation
+
+```bash
+npm install finsignal-feed-explore
+# or
+yarn add finsignal-feed-explore
+```
+
+## Quick Start
+
+```tsx
+import { NewsFeed } from 'finsignal-feed-explore';
+import 'finsignal-feed-explore/dist/newsfeed.css';
+
+function App() {
+  return (
+    <NewsFeed
+      onNewsClick={(news) => console.log('Clicked:', news)}
+      onFiltersApply={(filters) => console.log('Filters:', filters)}
+    />
+  );
+}
+```
+
+> **Note:** `apiUrl` is optional. If not provided, the component will use the default API URL: `https://explore-gateway.changesandbox.ru/`
+
+## Main Components
+
+### NewsFeed
+
+The main component for displaying a news feed with filtering, infinite scroll, and interactive actions.
+
+```tsx
+import { NewsFeed } from 'finsignal-feed-explore';
+import 'finsignal-feed-explore/dist/newsfeed.css';
+
+<NewsFeed
+  onNewsClick={(news) => handleNewsClick(news)}
+  onShowFilter={() => console.log('Filter button clicked')}
+  initialFilters={['earnings', 'ipo']}
+  enableInfiniteScroll={true}
+/>
+```
+
+### NewsSnippet
+
+Individual news item component that can be used standalone.
+
+```tsx
+import { NewsSnippet } from 'finsignal-feed-explore';
+
+<NewsSnippet
+  news={newsItem}
+  onShareClick={() => {}}
+  onBookmarkClick={() => {}}
+  showShareIcon={true}
+  showBookmarkIcon={true}
+/>
+```
+
+### FiltersOverlay
+
+Filter overlay component for market events selection.
+
+```tsx
+import { FiltersOverlay } from 'finsignal-feed-explore';
+
+<FiltersOverlay
+  isOpen={isOpen}
+  selectedFilters={filters}
+  onClose={() => setIsOpen(false)}
+  onApply={(filters) => handleFiltersApply(filters)}
+/>
+```
+
+## Features
+
+- ✅ Beautiful news snippets based on modern design system
+- ✅ Filter news by market events (earnings, IPO, M&A, etc.)
+- ✅ Configurable action buttons (share, bookmark, like, dislike, AI)
+- ✅ Callbacks for all user interactions
+- ✅ API integration with `/api/v1/content/search` endpoint
+- ✅ **Mock data fallback** - Shows 3 example news items when API is unavailable
+- ✅ Infinite scroll support
+- ✅ Light theme (web optimized)
+- ✅ Responsive design
+- ✅ TypeScript support
+- ✅ React Native Web compatible
+
+## API Reference
+
+### NewsFeed Props
+
+| Prop | Type | Required | Description |
+|------|------|----------|-------------|
+| `apiUrl` | `string` | No | Base API URL for fetching news (default: `https://explore-gateway.changesandbox.ru/`) |
+| `onNewsClick` | `(news: NewsItem) => void` | No | Called when news item is clicked |
+| `onShareClick` | `(news: NewsItem) => void` | No | Called when share button is clicked |
+| `onBookmarkClick` | `(news: NewsItem) => void` | No | Called when bookmark button is clicked |
+| `onLikeClick` | `(news: NewsItem) => void` | No | Called when like button is clicked |
+| `onDislikeClick` | `(news: NewsItem) => void` | No | Called when dislike button is clicked |
+| `onAIClick` | `(news: NewsItem) => void` | No | Called when AI button is clicked |
+| `onFiltersOpen` | `() => void` | No | Called when filters overlay opens |
+| `onFiltersClose` | `() => void` | No | Called when filters overlay closes |
+| `onFiltersApply` | `(filters: string[]) => void` | No | Called when filters are applied |
+| `onShowFilter` | `() => void` | No | Called when filter button is clicked (before opening internal overlay) |
+| `showShareIcon` | `boolean` | No | Show/hide share button (default: true) |
+| `showBookmarkIcon` | `boolean` | No | Show/hide bookmark button (default: true) |
+| `showLikeIcon` | `boolean` | No | Show/hide like button (default: true) |
+| `showDislikeIcon` | `boolean` | No | Show/hide dislike button (default: true) |
+| `showAIIcon` | `boolean` | No | Show/hide AI button (default: true) |
+| `showFilterIcon` | `boolean` | No | Show/hide filter button (default: true) |
+| `initialFilters` | `string[]` | No | Initial market events filters |
+| `enableInfiniteScroll` | `boolean` | No | Enable/disable infinite scroll (default: true) |
+| `marketEventsTaxonomy` | `MarketEventTaxonomyItem[]` | No | Custom market events taxonomy |
+
+## Types
+
+### NewsItem
+
+```typescript
+interface NewsItem {
+  id: string;
+  title: string;
+  content: string;
+  source?: string;
+  sourceUrl?: string;
+  sources?: Array<{
+    name: string;
+    url?: string;
+    logo?: string;
+  }>;
+  timestamp?: string;
+  cover?: string;
+  recommendation?: {
+    text: string;
+    priceRange?: string;
+  };
+  stocks?: Array<{
+    symbol: string;
+    price: string;
+    change: string;
+    changeType: 'positive' | 'negative';
+    logo?: string;
+  }>;
+  summary?: string;
+  tags?: string[];
+  personalizedKeyPoints?: string[];
+  market_events?: string[];
+}
+```
+
+## Hooks
+
+### useFeedData
+
+Hook for fetching and managing feed data.
+
+```tsx
+import { useFeedData } from 'finsignal-feed-explore';
+
+const { items, isLoading, hasMore, loadMore, refresh } = useFeedData({
+  filters: ['earnings'],
+  limit: 20
+});
+```
+
+### useFilters
+
+Hook for managing filter state.
+
+```tsx
+import { useFilters } from 'finsignal-feed-explore';
+
+const {
+  selectedMarketEvents,
+  isOpen,
+  toggleFilter,
+  clearFilters,
+  setFilters,
+  openFilters,
+  closeFilters
+} = useFilters(['earnings']);
+```
+
+## Constants
+
+### MARKET_EVENT_TAXONOMY
+
+Default market events taxonomy with categories like earnings, IPO, M&A, etc.
+
+```tsx
+import { MARKET_EVENT_TAXONOMY } from 'finsignal-feed-explore';
+```
+
+### MOCK_NEWS
+
+Mock news data for development and fallback scenarios.
+
+```tsx
+import { MOCK_NEWS } from 'finsignal-feed-explore';
+
+// Array of 3 example news items
+console.log(MOCK_NEWS);
+```
+
+### DEFAULT_API_URL
+
+Default API URL used when `apiUrl` is not provided.
+
+```tsx
+import { DEFAULT_API_URL } from 'finsignal-feed-explore';
+
+console.log(DEFAULT_API_URL); // 'https://explore-gateway.changesandbox.ru/'
+```
+
+## Utilities
+
+### formatTimestamp
+
+Utility function for formatting timestamps.
+
+```tsx
+import { formatTimestamp } from 'finsignal-feed-explore';
+
+const formatted = formatTimestamp('2024-01-15T10:30:00Z');
+```
+
+### theme
+
+Theme configuration object.
+
+```tsx
+import { theme } from 'finsignal-feed-explore';
+
+// Access theme colors, spacing, etc.
+console.log(theme.colors);
+```
+
+## API Integration
+
+The component expects the API to follow this structure:
+
+**Default API URL:** `https://explore-gateway.changesandbox.ru/`
+
+**Endpoint:** `POST {apiUrl}/api/v1/content/search`
+
+**Request:**
+```json
+{
+  "limit": 20,
+  "offset": 0,
+  "market_events": ["earnings", "ipo"]
+}
+```
+
+**Response:**
+```json
+{
+  "items": [...],
+  "next_offset": 20,
+  "total": 100,
+  "offset": 0,
+  "limit": 20
+}
+```
+
+## Mock Data
+
+The widget automatically displays 3 example news items when:
+- API is unavailable or returns an error
+- No real news data is loaded yet
+
+This ensures users always see content, even during development or API downtime.
+
+## Development
+
+```bash
+# Install dependencies
+npm install
+
+# Build
+npm run build
+
+# The build will automatically run before publishing
+npm publish
+```
+
+## Peer Dependencies
+
+- `react`: >=18.0.0
+
+## Dependencies
+
+- `lucide-react`: ^0.544.0 (for icons)
+- `react-native-web`: ^0.20.0 (for cross-platform compatibility)
+
+## License
+
+MIT
+
+## Repository
+
+[GitHub Repository](https://github.com/finsignal/segment-control)

package/dist/NewsFeed.d.ts

@@ -1,55 +1,9 @@
-import './newsfeed.css';
-export interface FeedItem {
-    content_id: string;
-    author_id?: string | null;
-    title?: string | null;
-    body?: string | null;
-    type: 'post' | 'signal' | 'news' | 'strategies' | 'trigger' | 'market_vibe' | 'guides';
-    source: 'user' | 'provider' | 'api';
-    created_at: string;
-    score: number;
-    thumbnail_url?: string | null;
-    metadata: {
-        ai_processed?: boolean;
-        processing_status?: string;
-        ai_processing?: {
-            status: string;
-            message: string;
-        };
-        news?: {
-            recommendation?: {
-                text: string;
-                priceRange: string;
-            };
-            stocks?: Array<{
-                symbol: string;
-                price: string;
-                change: string;
-                changeType: 'positive' | 'negative';
-            }>;
-        };
-        signal?: {
-            symbol: string;
-            companyName: string;
-            metrics: {
-                buy: string;
-                entry: string;
-                takeProfit: string;
-                stopLoss: string;
-            };
-        };
-        ai_categorization?: {
-            primaryCategory: string;
-            tags: string[];
-        };
-    };
+import React from 'react';
+import { WidgetConfig } from './types';
+import './NewsFeed.css';
+export interface NewsFeedProps extends WidgetConfig {
+    initialFilters?: string[];
+    enableInfiniteScroll?: boolean;
 }
-export interface FeedListProps {
-    feedType?: 'trending' | 'personal' | 'hot';
-    items?: FeedItem[];
-    onItemClick?: (item: FeedItem) => void;
-    className?: string;
-    feedApiUrl?: string;
-    useMockData?: boolean;
-}
-export declare function FeedList({ feedType, items: itemsProp, onItemClick, className, feedApiUrl, useMockData }: FeedListProps): import("react/jsx-runtime").JSX.Element;
+export declare const NewsFeed: React.FC<NewsFeedProps>;
+//# sourceMappingURL=NewsFeed.d.ts.map

package/dist/NewsFeed.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NewsFeed.d.ts","sourceRoot":"","sources":["../src/NewsFeed.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmD,MAAM,OAAO,CAAC;AAMxE,OAAO,EAAE,YAAY,EAAY,MAAM,SAAS,CAAC;AAIjD,OAAO,gBAAgB,CAAC;AAExB,MAAM,WAAW,aAAc,SAAQ,YAAY;IACjD,cAAc,CAAC,EAAE,MAAM,EAAE,CAAC;IAC1B,oBAAoB,CAAC,EAAE,OAAO,CAAC;CAChC;AAED,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CA8O5C,CAAC"}