finsignal-feed-explore 1.0.0

package/LICENSE

@@ -0,0 +1,22 @@
+MIT License
+
+Copyright (c) 2024 FinSignal
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+

package/README.md

@@ -0,0 +1,107 @@
+# FinSignal UI Components
+
+Набор UI компонентов для React веб-приложений: segment control и новостной фид.
+
+## Установка
+
+```bash
+npm install finsignal-segment-control
+```
+
+## Компоненты
+
+### SegmentControl
+
+Переключатель вкладок с плавной анимацией.
+
+```tsx
+import { SegmentControl } from 'finsignal-segment-control';
+
+function App() {
+  const [selectedValue, setSelectedValue] = React.useState('option1');
+
+  return (
+    <SegmentControl
+      options={[
+        { value: 'option1', label: 'Опция 1' },
+        { value: 'option2', label: 'Опция 2' },
+        { value: 'option3', label: 'Опция 3' },
+      ]}
+      value={selectedValue}
+      onValueChange={setSelectedValue}
+    />
+  );
+}
+```
+
+### NewsFeed
+
+Компонент новостной ленты с красивыми снипеттами.
+
+```tsx
+import { NewsFeed } from 'finsignal-segment-control';
+
+function App() {
+  return (
+    <NewsFeed 
+      onItemClick={(item) => console.log('Clicked:', item)}
+    />
+  );
+}
+```
+
+С кастомными новостями:
+
+```tsx
+const customNews = [
+  {
+    id: '1',
+    title: 'Заголовок новости',
+    snippet: 'Краткое описание новости...',
+    source: 'Источник',
+    time: '5 мин назад',
+    category: 'Категория'
+  }
+];
+
+<NewsFeed 
+  items={customNews}
+  onItemClick={(item) => console.log(item)}
+/>
+```
+
+## API
+
+### SegmentControlProps
+
+| Prop | Тип | Обязательно | Описание |
+|------|-----|-------------|----------|
+| `options` | `SegmentOption[]` | Да | Массив опций для отображения |
+| `value` | `string` | Да | Текущее выбранное значение |
+| `onValueChange` | `(value: string) => void` | Да | Callback при изменении значения |
+| `className` | `string` | Нет | Дополнительные CSS классы |
+
+### SegmentOption
+
+| Свойство | Тип | Описание |
+|----------|-----|----------|
+| `value` | `string` | Уникальное значение опции |
+| `label` | `string` | Отображаемый текст |
+
+## Стилизация
+
+Компонент использует CSS классы:
+- `.segment-control` - контейнер
+- `.segment-option` - кнопка опции
+- `.segment-option.active` - активная опция
+
+Можно переопределить стили или добавить свой className.
+
+## Требования
+
+- React >= 18.0.0
+
+## Лицензия
+
+MIT
+

package/dist/NewsFeed.d.ts

@@ -0,0 +1,49 @@
+import { SegmentOption } from './SegmentControl';
+import './newsfeed.css';
+export interface FeedItem {
+    content_id: string;
+    title?: string | null;
+    body?: string | null;
+    type: 'post' | 'signal' | 'news' | 'strategies' | 'trigger' | 'market_vibe' | 'guides';
+    source: 'user' | 'provider' | 'api';
+    created_at: string;
+    score: number;
+    metadata: {
+        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[];
+        };
+    };
+}
+export interface FeedListProps {
+    feedType?: 'trending' | 'personal' | 'hot';
+    items?: FeedItem[];
+    onItemClick?: (item: FeedItem) => void;
+    className?: string;
+    segments?: SegmentOption[];
+    showSegmentControl?: boolean;
+    onSegmentChange?: (value: string) => void;
+}
+export declare function FeedList({ feedType, items, onItemClick, className, segments, showSegmentControl, onSegmentChange }: FeedListProps): import("react/jsx-runtime").JSX.Element;

package/dist/NewsFeed.js

@@ -0,0 +1,229 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import * as React from 'react';
+import { NewsSnippet } from './snippets/NewsSnippet';
+import { SegmentControl } from './SegmentControl';
+import './newsfeed.css';
+// Моковые данные в формате FinSignal Feed
+const mockFeedItems = [
+    {
+        content_id: '1',
+        title: 'Tesla планирует открыть новый завод в Европе',
+        body: 'Компания Tesla Motors объявила о планах строительства нового завода по производству электромобилей в Берлине. Ожидается создание более 10,000 рабочих мест.',
+        type: 'news',
+        source: 'provider',
+        created_at: new Date(Date.now() - 2 * 60 * 60 * 1000).toISOString(),
+        score: 95,
+        metadata: {
+            news: {
+                recommendation: {
+                    text: 'A breakout is expected at the resistance level of',
+                    priceRange: '$250-$260'
+                },
+                stocks: [
+                    {
+                        symbol: 'TSLA',
+                        price: '$242.50',
+                        change: '+5.2%',
+                        changeType: 'positive'
+                    }
+                ]
+            },
+            ai_categorization: {
+                primaryCategory: 'Automotive',
+                tags: ['Tesla', 'Electric Vehicles', 'Europe']
+            }
+        }
+    },
+    {
+        content_id: '2',
+        title: 'NVIDIA представила новую линейку графических процессоров',
+        body: 'Новая серия RTX 5000 обещает на 40% больше производительности в задачах искусственного интеллекта и машинного обучения.',
+        type: 'news',
+        source: 'api',
+        created_at: new Date(Date.now() - 4 * 60 * 60 * 1000).toISOString(),
+        score: 92,
+        metadata: {
+            news: {
+                stocks: [
+                    {
+                        symbol: 'NVDA',
+                        price: '$495.80',
+                        change: '+12.3%',
+                        changeType: 'positive'
+                    }
+                ]
+            },
+            ai_categorization: {
+                primaryCategory: 'Technology',
+                tags: ['NVIDIA', 'AI', 'Hardware']
+            }
+        }
+    },
+    {
+        content_id: '3',
+        title: 'Microsoft расширяет сотрудничество с OpenAI',
+        body: 'Microsoft объявила о дополнительных $10 млрд инвестиций в OpenAI для развития технологий искусственного интеллекта и интеграции GPT-4 в продукты.',
+        type: 'news',
+        source: 'provider',
+        created_at: new Date(Date.now() - 6 * 60 * 60 * 1000).toISOString(),
+        score: 90,
+        metadata: {
+            news: {
+                recommendation: {
+                    text: 'A breakout is expected at the resistance level of',
+                    priceRange: '$385-$395'
+                },
+                stocks: [
+                    {
+                        symbol: 'MSFT',
+                        price: '$378.90',
+                        change: '+3.5%',
+                        changeType: 'positive'
+                    }
+                ]
+            },
+            ai_categorization: {
+                primaryCategory: 'Technology',
+                tags: ['Microsoft', 'OpenAI', 'AI']
+            }
+        }
+    },
+    {
+        content_id: '4',
+        title: 'Amazon планирует IPO своего подразделения AWS',
+        body: 'По данным инсайдеров, Amazon рассматривает возможность выделения Amazon Web Services в отдельную публичную компанию.',
+        type: 'news',
+        source: 'api',
+        created_at: new Date(Date.now() - 8 * 60 * 60 * 1000).toISOString(),
+        score: 88,
+        metadata: {
+            news: {
+                stocks: [
+                    {
+                        symbol: 'AMZN',
+                        price: '$142.60',
+                        change: '-1.2%',
+                        changeType: 'negative'
+                    }
+                ]
+            },
+            ai_categorization: {
+                primaryCategory: 'Cloud Computing',
+                tags: ['Amazon', 'AWS', 'IPO']
+            }
+        }
+    },
+    {
+        content_id: '5',
+        title: 'Meta показала рекордный рост пользователей',
+        body: 'Количество активных пользователей социальных сетей Meta выросло на 12% за квартал, достигнув нового исторического максимума.',
+        type: 'news',
+        source: 'provider',
+        created_at: new Date(Date.now() - 12 * 60 * 60 * 1000).toISOString(),
+        score: 87,
+        metadata: {
+            news: {
+                stocks: [
+                    {
+                        symbol: 'META',
+                        price: '$312.40',
+                        change: '+8.7%',
+                        changeType: 'positive'
+                    }
+                ]
+            },
+            ai_categorization: {
+                primaryCategory: 'Social Media',
+                tags: ['Meta', 'Facebook', 'Growth']
+            }
+        }
+    },
+    {
+        content_id: '6',
+        title: 'Apple выпустит новую линейку MacBook Pro',
+        body: 'Apple готовится представить обновленные MacBook Pro с новыми процессорами M3 и улучшенными дисплеями ProMotion.',
+        type: 'news',
+        source: 'api',
+        created_at: new Date(Date.now() - 18 * 60 * 60 * 1000).toISOString(),
+        score: 85,
+        metadata: {
+            news: {
+                recommendation: {
+                    text: 'A breakout is expected at the resistance level of',
+                    priceRange: '$185-$190'
+                },
+                stocks: [
+                    {
+                        symbol: 'AAPL',
+                        price: '$178.25',
+                        change: '+2.1%',
+                        changeType: 'positive'
+                    }
+                ]
+            },
+            ai_categorization: {
+                primaryCategory: 'Technology',
+                tags: ['Apple', 'MacBook', 'Hardware']
+            }
+        }
+    }
+];
+function formatTimeAgo(dateString) {
+    const now = new Date();
+    const date = new Date(dateString);
+    const diff = Math.floor((now.getTime() - date.getTime()) / 1000);
+    if (diff < 60)
+        return 'только что';
+    if (diff < 3600)
+        return `${Math.floor(diff / 60)} мин назад`;
+    if (diff < 86400)
+        return `${Math.floor(diff / 3600)} ч назад`;
+    return `${Math.floor(diff / 86400)} дн назад`;
+}
+export function FeedList({ feedType = 'trending', items = mockFeedItems, onItemClick, className = '', segments = [
+    { value: 'all', label: 'Все новости' },
+    { value: 'markets', label: 'Рынки' },
+    { value: 'crypto', label: 'Крипто' }
+], showSegmentControl = true, onSegmentChange }) {
+    var _a;
+    const [selectedSegment, setSelectedSegment] = React.useState(((_a = segments[0]) === null || _a === void 0 ? void 0 : _a.value) || 'all');
+    const handleSegmentChange = (value) => {
+        setSelectedSegment(value);
+        onSegmentChange === null || onSegmentChange === void 0 ? void 0 : onSegmentChange(value);
+    };
+    const getTypeLabel = (type) => {
+        const labels = {
+            signal: 'Сигнал',
+            news: 'Новости',
+            trigger: 'Триггер',
+            market_vibe: 'Настроение',
+            strategies: 'Стратегия',
+            guides: 'Гайд',
+            post: 'Пост'
+        };
+        return labels[type] || type;
+    };
+    const getTypeColor = (type) => {
+        const colors = {
+            signal: '#10b981',
+            news: '#3b82f6',
+            trigger: '#f59e0b',
+            market_vibe: '#8b5cf6',
+            strategies: '#ec4899',
+            guides: '#06b6d4',
+            post: '#6b7280'
+        };
+        return colors[type] || colors.post;
+    };
+    return (_jsxs(_Fragment, { children: [showSegmentControl && (_jsx("div", { style: { marginBottom: '16px' }, children: _jsx(SegmentControl, { options: segments, value: selectedSegment, onValueChange: handleSegmentChange }) })), _jsx("div", { className: `feed-list ${className}`, children: items.map((item) => {
+                    var _a, _b, _c, _d;
+                    // Рендерим news items через NewsSnippet
+                    if (item.type === 'news' && item.title && item.body) {
+                        return (_jsx(NewsSnippet, { id: item.content_id, title: item.title, content: item.body, recommendation: (_a = item.metadata.news) === null || _a === void 0 ? void 0 : _a.recommendation, stocks: (_b = item.metadata.news) === null || _b === void 0 ? void 0 : _b.stocks, onPress: () => onItemClick === null || onItemClick === void 0 ? void 0 : onItemClick(item), draggable: true, onDragStart: () => {
+                                console.log('Dragging news:', item.title);
+                            } }, item.content_id));
+                    }
+                    // Для остальных типов оставляем обычный рендеринг
+                    return (_jsxs("div", { className: "feed-item", onClick: () => onItemClick === null || onItemClick === void 0 ? void 0 : onItemClick(item), children: [_jsxs("div", { className: "feed-item-header", children: [_jsx("span", { className: "feed-type-badge", style: { backgroundColor: getTypeColor(item.type) }, children: getTypeLabel(item.type) }), _jsx("span", { className: "feed-time", children: formatTimeAgo(item.created_at) })] }), item.title && _jsx("h3", { className: "feed-title", children: item.title }), item.body && _jsx("p", { className: "feed-body", children: item.body }), item.metadata.signal && (_jsxs("div", { className: "feed-signal-metrics", children: [_jsxs("div", { className: "signal-stock", children: [_jsx("span", { className: "signal-symbol", children: item.metadata.signal.symbol }), _jsx("span", { className: "signal-company", children: item.metadata.signal.companyName })] }), _jsxs("div", { className: "signal-prices", children: [_jsxs("div", { className: "signal-price-item", children: [_jsx("span", { className: "label", children: "Entry:" }), _jsx("span", { className: "value", children: item.metadata.signal.metrics.entry })] }), _jsxs("div", { className: "signal-price-item", children: [_jsx("span", { className: "label", children: "TP:" }), _jsx("span", { className: "value green", children: item.metadata.signal.metrics.takeProfit })] }), _jsxs("div", { className: "signal-price-item", children: [_jsx("span", { className: "label", children: "SL:" }), _jsx("span", { className: "value red", children: item.metadata.signal.metrics.stopLoss })] })] })] })), ((_c = item.metadata.news) === null || _c === void 0 ? void 0 : _c.stocks) && (_jsx("div", { className: "feed-stocks", children: item.metadata.news.stocks.map((stock, idx) => (_jsxs("div", { className: "stock-card", children: [_jsx("span", { className: "stock-symbol", children: stock.symbol }), _jsx("span", { className: "stock-price", children: stock.price }), _jsx("span", { className: `stock-change ${stock.changeType}`, children: stock.change })] }, idx))) })), ((_d = item.metadata.ai_categorization) === null || _d === void 0 ? void 0 : _d.tags) && (_jsx("div", { className: "feed-tags", children: item.metadata.ai_categorization.tags.map((tag, idx) => (_jsxs("span", { className: "feed-tag", children: ["#", tag] }, idx))) }))] }, item.content_id));
+                }) })] }));
+}

package/dist/SegmentControl.d.ts

@@ -0,0 +1,13 @@
+import './styles.css';
+interface SegmentOption {
+    value: string;
+    label: string;
+}
+interface SegmentControlProps {
+    options: SegmentOption[];
+    value: string;
+    onValueChange: (value: string) => void;
+    className?: string;
+}
+export declare function SegmentControl({ options, value, onValueChange, className }: SegmentControlProps): import("react/jsx-runtime").JSX.Element;
+export type { SegmentControlProps, SegmentOption };

package/dist/SegmentControl.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import './styles.css';
+export function SegmentControl({ options, value, onValueChange, className = '' }) {
+    return (_jsx("div", { className: `segment-control ${className}`, children: options.map((option) => (_jsx("button", { onClick: () => onValueChange(option.value), className: `segment-option ${value === option.value ? 'active' : ''}`, type: "button", children: option.label }, option.value))) }));
+}

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+export { SegmentControl } from './SegmentControl';
+export type { SegmentControlProps, SegmentOption } from './SegmentControl';
+export { FeedList } from './NewsFeed';
+export type { FeedListProps, FeedItem } from './NewsFeed';
+export { NewsSnippet } from './snippets/NewsSnippet';

package/dist/index.js

@@ -0,0 +1,3 @@
+export { SegmentControl } from './SegmentControl';
+export { FeedList } from './NewsFeed';
+export { NewsSnippet } from './snippets/NewsSnippet';

package/dist/newsfeed.css

@@ -0,0 +1,205 @@
+.feed-list {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  max-height: 600px;
+  overflow-y: auto;
+  padding: 4px;
+}
+
+/* Кастомный скроллбар */
+.feed-list::-webkit-scrollbar {
+  width: 6px;
+}
+
+.feed-list::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.feed-list::-webkit-scrollbar-thumb {
+  background: #d1d5db;
+  border-radius: 3px;
+}
+
+.feed-list::-webkit-scrollbar-thumb:hover {
+  background: #9ca3af;
+}
+
+/* Feed Item */
+.feed-item {
+  padding: 16px;
+  background: #ffffff;
+  border-radius: 12px;
+  border: 1px solid #e5e7eb;
+  cursor: pointer;
+  transition: all 200ms ease;
+}
+
+.feed-item:hover {
+  border-color: #d1d5db;
+  transform: translateY(-1px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+}
+
+.feed-item-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 10px;
+}
+
+.feed-type-badge {
+  display: inline-block;
+  padding: 4px 10px;
+  color: white;
+  font-size: 11px;
+  font-weight: 600;
+  border-radius: 6px;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.feed-time {
+  font-size: 11px;
+  color: #9ca3af;
+  font-weight: 500;
+}
+
+.feed-title {
+  margin: 0 0 8px 0;
+  font-size: 15px;
+  font-weight: 600;
+  color: #111827;
+  line-height: 1.4;
+}
+
+.feed-body {
+  margin: 0 0 12px 0;
+  font-size: 13px;
+  color: #4b5563;
+  line-height: 1.5;
+}
+
+/* Signal Metrics */
+.feed-signal-metrics {
+  margin-top: 12px;
+  padding: 12px;
+  background: #f9fafb;
+  border-radius: 8px;
+}
+
+.signal-stock {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 8px;
+}
+
+.signal-symbol {
+  font-size: 15px;
+  font-weight: 700;
+  color: #111827;
+}
+
+.signal-company {
+  font-size: 12px;
+  color: #6b7280;
+}
+
+.signal-prices {
+  display: flex;
+  gap: 16px;
+}
+
+.signal-price-item {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.signal-price-item .label {
+  font-size: 10px;
+  color: #9ca3af;
+  text-transform: uppercase;
+  font-weight: 600;
+}
+
+.signal-price-item .value {
+  font-size: 13px;
+  font-weight: 600;
+  color: #111827;
+}
+
+.signal-price-item .value.green {
+  color: #10b981;
+}
+
+.signal-price-item .value.red {
+  color: #ef4444;
+}
+
+/* News Stocks */
+.feed-stocks {
+  display: flex;
+  gap: 8px;
+  margin-top: 12px;
+  flex-wrap: wrap;
+}
+
+.stock-card {
+  display: flex;
+  flex-direction: column;
+  padding: 8px 12px;
+  background: #f9fafb;
+  border-radius: 8px;
+  border: 1px solid #e5e7eb;
+  gap: 4px;
+}
+
+.stock-symbol {
+  font-size: 12px;
+  font-weight: 700;
+  color: #111827;
+}
+
+.stock-price {
+  font-size: 14px;
+  font-weight: 600;
+  color: #111827;
+}
+
+.stock-change {
+  font-size: 11px;
+  font-weight: 600;
+}
+
+.stock-change.positive {
+  color: #10b981;
+}
+
+.stock-change.negative {
+  color: #ef4444;
+}
+
+/* Tags */
+.feed-tags {
+  display: flex;
+  gap: 6px;
+  flex-wrap: wrap;
+  margin-top: 12px;
+}
+
+.feed-tag {
+  font-size: 11px;
+  color: #6b7280;
+  background: #f3f4f6;
+  padding: 4px 8px;
+  border-radius: 6px;
+  font-weight: 500;
+}
+
+.feed-tag:hover {
+  background: #e5e7eb;
+  color: #374151;
+}
+

package/dist/snippets/NewsSnippet.d.ts

@@ -0,0 +1,31 @@
+import * as React from 'react';
+interface NewsSnippetProps {
+    id: string;
+    title: string;
+    content: string;
+    recommendation?: {
+        text: string;
+        priceRange: string;
+    };
+    stocks?: Array<{
+        symbol: string;
+        price: string;
+        change: string;
+        changeType: 'positive' | 'negative';
+        logo?: string;
+    }>;
+    onPress?: () => void;
+    onShare?: () => void;
+    onBookmark?: () => void;
+    onAI?: () => void;
+    onDislike?: () => void;
+    onLike?: () => void;
+    isLiked?: boolean;
+    isDisliked?: boolean;
+    isBookmarked?: boolean;
+    draggable?: boolean;
+    onDragStart?: (e: React.DragEvent) => void;
+    onDragEnd?: (e: React.DragEvent) => void;
+}
+export declare const NewsSnippet: React.FC<NewsSnippetProps>;
+export {};

package/dist/snippets/NewsSnippet.js

@@ -0,0 +1,121 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// @ts-nocheck
+import * as React from 'react';
+import { View, Text, Pressable, Platform, ScrollView } from 'react-native';
+import { Share2, Bookmark, MessageCircle, ThumbsDown, ThumbsUp, Sparkles } from 'lucide-react';
+// Простая замена useThemeStyles для npm пакета
+function useThemeStyles() {
+    return {
+        colors: {
+            card: '#ffffff',
+            text: '#111827',
+            textSecondary: '#6b7280'
+        }
+    };
+}
+export const NewsSnippet = ({ id, title, content, recommendation, stocks = [], onPress, onShare, onBookmark, onAI, onDislike, onLike, isLiked = false, isDisliked = false, isBookmarked = false, draggable = true, onDragStart, onDragEnd }) => {
+    const { colors } = useThemeStyles();
+    const [isDragging, setIsDragging] = React.useState(false);
+    const handleDragStart = (e) => {
+        console.log('🚀 NewsSnippet: Drag started', title);
+        setIsDragging(true);
+        // Сохраняем данные новости для drop
+        const newsData = {
+            id,
+            title,
+            content,
+            recommendation,
+            stocks
+        };
+        console.log('📦 NewsSnippet: Setting data', newsData);
+        e.dataTransfer.setData('application/news-data', JSON.stringify(newsData));
+        e.dataTransfer.effectAllowed = 'copy';
+        onDragStart === null || onDragStart === void 0 ? void 0 : onDragStart(e);
+    };
+    const handleDragEnd = (e) => {
+        console.log('🏁 NewsSnippet: Drag ended', title);
+        setIsDragging(false);
+        onDragEnd === null || onDragEnd === void 0 ? void 0 : onDragEnd(e);
+    };
+    const containerStyle = Object.assign({ backgroundColor: colors.card, borderRadius: 16, padding: 16, marginBottom: 12, shadowColor: '#000', shadowOffset: { width: 0, height: 2 }, shadowOpacity: 0.1, shadowRadius: 4, elevation: 3, opacity: isDragging ? 0.5 : 1, transition: 'opacity 0.2s ease' }, (Platform.OS === 'web' && {
+        cursor: isDragging ? 'grabbing' : (draggable ? 'grab' : 'pointer')
+    }));
+    const stockItemStyle = (changeType) => ({
+        backgroundColor: changeType === 'positive' ? '#F0FDF4' : '#FEF2F2',
+        paddingHorizontal: 12,
+        paddingVertical: 8,
+        borderRadius: 12,
+        flexDirection: 'row',
+        alignItems: 'center',
+        alignSelf: 'flex-start'
+    });
+    // Для web используем нативный div для поддержки HTML5 drag & drop
+    const ContainerComponent = Platform.OS === 'web' ? 'div' : Pressable;
+    return (_jsxs(ContainerComponent, Object.assign({}, (Platform.OS === 'web'
+        ? {
+            draggable: draggable,
+            onDragStart: handleDragStart,
+            onDragEnd: handleDragEnd,
+            onClick: onPress,
+            style: containerStyle
+        }
+        : {
+            onPress: onPress,
+            style: containerStyle
+        }), { children: [_jsx(Text, { style: {
+                    fontSize: 18,
+                    fontWeight: '700',
+                    color: colors.text,
+                    marginBottom: 12,
+                    lineHeight: 24
+                }, children: title }), _jsx(Text, { style: {
+                    fontSize: 14,
+                    color: colors.textSecondary,
+                    lineHeight: 20,
+                    marginBottom: 16
+                }, children: content }), recommendation && (_jsxs(View, { style: {
+                    backgroundColor: '#F3E8FF',
+                    padding: 12,
+                    borderRadius: 16,
+                    marginBottom: 16,
+                    flexDirection: 'row',
+                    alignItems: 'flex-start'
+                }, children: [_jsx(Sparkles, { size: 16, color: "#8B5CF6", style: { marginRight: 8 } }), _jsxs(Text, { style: {
+                            fontSize: 14,
+                            color: '#111827',
+                            flex: 1,
+                            lineHeight: 20
+                        }, children: ["A breakout is expected at the resistance level of", ' ', _jsx(Text, { style: { fontWeight: '700' }, children: recommendation.priceRange }), ". It is recommended to consider long positions"] })] })), stocks.length > 0 && (_jsx(ScrollView, { horizontal: true, showsHorizontalScrollIndicator: false, style: { marginBottom: 16, borderRadius: 16 }, contentContainerStyle: { paddingRight: 16 }, children: _jsx(View, { style: { flexDirection: 'row', gap: 8 }, children: stocks.map((stock, index) => (_jsxs(View, { style: stockItemStyle(stock.changeType), children: [_jsx(View, { style: {
+                                    width: 24,
+                                    height: 24,
+                                    borderRadius: 16,
+                                    backgroundColor: stock.changeType === 'positive' ? '#10B981' : '#EF4444',
+                                    marginRight: 8,
+                                    justifyContent: 'center',
+                                    alignItems: 'center'
+                                }, children: _jsx(Text, { style: {
+                                        color: 'white',
+                                        fontSize: 10,
+                                        fontWeight: '600'
+                                    }, children: stock.symbol.charAt(0) }) }), _jsx(Text, { style: {
+                                    fontSize: 12,
+                                    fontWeight: '600',
+                                    color: '#111827',
+                                    marginRight: 8
+                                }, children: stock.symbol }), _jsx(Text, { style: {
+                                    fontSize: 14,
+                                    fontWeight: '700',
+                                    color: '#111827',
+                                    marginRight: 8
+                                }, children: stock.price }), _jsx(Text, { style: {
+                                    fontSize: 12,
+                                    fontWeight: '600',
+                                    color: stock.changeType === 'positive' ? '#10B981' : '#EF4444',
+                                    marginRight: 2
+                                }, children: stock.change }), stock.changeType === 'positive' ? (_jsx(Text, { style: { color: '#10B981', fontSize: 10 }, children: "\u2197" })) : (_jsx(Text, { style: { color: '#EF4444', fontSize: 10 }, children: "\u2198" }))] }, index))) }) })), _jsxs(View, { style: {
+                    flexDirection: 'row',
+                    justifyContent: 'space-around',
+                    alignItems: 'center',
+                    paddingTop: 12
+                }, children: [_jsx(Pressable, { onPress: onShare, style: { padding: 8 }, children: _jsx(Share2, { size: 20, color: "#6B7280" }) }), _jsx(Pressable, { onPress: onBookmark, style: { padding: 8 }, children: _jsx(Bookmark, { size: 20, color: isBookmarked ? "#0B69FF" : "#6B7280", fill: isBookmarked ? "#0B69FF" : "none" }) }), _jsx(Pressable, { onPress: onAI, style: { padding: 8 }, children: _jsx(MessageCircle, { size: 20, color: "#6B7280" }) }), _jsx(Pressable, { onPress: onDislike, style: { padding: 8 }, children: _jsx(ThumbsDown, { size: 20, color: isDisliked ? "#EF4444" : "#6B7280", fill: isDisliked ? "#EF4444" : "none" }) }), _jsx(Pressable, { onPress: onLike, style: { padding: 8 }, children: _jsx(ThumbsUp, { size: 20, color: isLiked ? "#10B981" : "#6B7280", fill: isLiked ? "#10B981" : "none" }) })] })] })));
+};

package/dist/styles.css

@@ -0,0 +1,33 @@
+.segment-control {
+  display: flex;
+  background-color: #f3f4f6;
+  border-radius: 9999px;
+  padding: 4px;
+  gap: 4px;
+  width: fit-content;
+}
+
+.segment-option {
+  flex: 1;
+  padding: 12px 24px;
+  border-radius: 9999px;
+  border: none;
+  background-color: transparent;
+  color: #6b7280;
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 200ms ease;
+  white-space: nowrap;
+}
+
+.segment-option:hover:not(.active) {
+  background-color: #e5e7eb;
+}
+
+.segment-option.active {
+  background-color: #ffffff;
+  color: #111827;
+  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
+}
+

package/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "finsignal-feed-explore",
+  "version": "1.0.0",
+  "description": "News feed and segment control components for React web applications",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "tsc && cp src/styles.css dist/styles.css && cp src/newsfeed.css dist/newsfeed.css",
+    "prepublishOnly": "npm run build"
+  },
+  "keywords": [
+    "react",
+    "segment-control",
+    "tabs",
+    "ui",
+    "component",
+    "web"
+  ],
+  "author": "FinSignal",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/finsignal/segment-control.git"
+  },
+  "homepage": "https://github.com/finsignal/segment-control#readme",
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-native-web": ">=0.19.0",
+    "lucide-react": ">=0.294.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.0",
+    "@types/react-native": "^0.72.0",
+    "typescript": "^5.0.0",
+    "react-native-web": "^0.20.0",
+    "lucide-react": "^0.544.0"
+  }
+}