@forgecharts/sdk 1.1.27 → 1.1.28

package/src/react/workspace/SymbolSearchDialog.tsx

@@ -1,377 +0,0 @@
-import { useState, useEffect, useRef, useCallback } from 'react';
-import type { RefSymbol, ISymbolResolver, SymbolSearchResult } from '@forgecharts/types';
-
-const PAGE_SIZE = 100;
-
-const TABS = [
-  { label: 'All',     market: ''        },
-  { label: 'Stocks',  market: 'stocks'  },
-  { label: 'Funds',   market: 'etfs'    },
-  { label: 'Futures', market: 'futures' },
-  { label: 'Forex',   market: 'forex'   },
-  { label: 'Crypto',  market: 'crypto'  },
-  { label: 'Indices', market: 'indices' },
-  { label: 'Bonds',   market: 'bonds'   },
-  { label: 'Economy', market: 'economy' },
-  { label: 'Options', market: 'options' },
-];
-
-type SymbolEntry = {
-  symbol: string;
-  name: string;
-  symbolKey?: string;
-  exchange: string;
-  assetType: string;
-  market: string;
-  logoUrl?: string;
-};
-
-function refSymbolsToEntries(symbols: RefSymbol[]): SymbolEntry[] {
-  return symbols.map(s => ({
-    symbol:    s.symbol,
-    name:      s.displayName,
-    symbolKey: s.symbolKey,
-    exchange:  s.exchange,
-    assetType: s.assetType,
-    market:    s.market,
-    ...(s.logoUrl ? { logoUrl: s.logoUrl } : {}),
-  }));
-}
-
-function stringColor(str: string): string {
-  const palette = [
-    '#f7931a','#627eea','#2775ca','#26a17b','#e84142',
-    '#00adef','#e91e63','#9945ff','#00d4aa','#ff6b35',
-  ];
-  let h = 0;
-  for (let i = 0; i < str.length; i++) h = (Math.imul(31, h) + str.charCodeAt(i)) | 0;
-  return palette[Math.abs(h) % palette.length] ?? '#888888';
-}
-
-function badgeLabel(assetType: string, market: string): string {
-  const a = assetType?.toLowerCase() ?? '';
-  const m = market?.toLowerCase() ?? '';
-  if (a && m && a !== m) return `${a} ${m}`;
-  return a || m || '';
-}
-
-function SymbolIcon({ logoUrl, letter, color }: { logoUrl?: string; letter: string; color: string }) {
-  const [failed, setFailed] = useState(false);
-  return (
-    <span className="sym-row-icon" style={{ background: (logoUrl && !failed) ? 'transparent' : color }}>
-      {logoUrl && !failed
-        ? <img src={logoUrl} alt="" className="sym-logo-img" onError={() => setFailed(true)} />
-        : letter}
-    </span>
-  );
-}
-
-type Props = {
-  current: string;
-  onSelect: (symbol: string) => void;
-  onClose: () => void;
-  symbolResolver: ISymbolResolver;
-};
-
-export function SymbolSearchDialog({ current, onSelect, onClose, symbolResolver }: Props) {
-  const [query,           setQuery]           = useState('');
-  const [activeTab,       setActiveTab]       = useState(0);
-  const [tabSymbols,      setTabSymbols]      = useState<SymbolEntry[]>([]);
-  const [tabLoading,      setTabLoading]      = useState(false);
-  const [tabLoadingMore,  setTabLoadingMore]  = useState(false);
-  const [tabOffset,       setTabOffset]       = useState(0);
-  const [tabHasMore,      setTabHasMore]      = useState(false);
-  const [searchResults,   setSearchResults]   = useState<SymbolEntry[] | null>(null);
-  const [isSearching,     setIsSearching]     = useState(false);
-  const [searchingMore,   setSearchingMore]   = useState(false);
-  const [searchOffset,    setSearchOffset]    = useState(0);
-  const [searchHasMore,   setSearchHasMore]   = useState(false);
-  const inputRef    = useRef<HTMLInputElement>(null);
-  const dialogRef   = useRef<HTMLDivElement>(null);
-  const sentinelRef = useRef<HTMLDivElement>(null);
-  const searchTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
-  const queryRef    = useRef(query);
-  const activeTabRef = useRef(activeTab);
-  queryRef.current   = query;
-  activeTabRef.current = activeTab;
-
-  useEffect(() => { inputRef.current?.focus(); }, []);
-
-  useEffect(() => {
-    const h = (e: KeyboardEvent) => { if (e.key === 'Escape') onClose(); };
-    window.addEventListener('keydown', h);
-    return () => window.removeEventListener('keydown', h);
-  }, [onClose]);
-
-  // Tab browse: use getSymbols() for all tabs — supports offset pagination.
-  useEffect(() => {
-    const market = TABS[activeTab]?.market ?? '';
-    let cancelled = false;
-    setTabLoading(true);
-    setTabSymbols([]);
-    setTabOffset(0);
-    setTabHasMore(false);
-    symbolResolver.getSymbols({ ...(market ? { market } : {}), limit: PAGE_SIZE, offset: 0 })
-      .then((r: SymbolSearchResult) => {
-        if (!cancelled) {
-          setTabSymbols(refSymbolsToEntries(r.symbols));
-          setTabHasMore(r.symbols.length === PAGE_SIZE);
-          setTabOffset(PAGE_SIZE);
-        }
-      })
-      .catch(() => {})
-      .finally(() => { if (!cancelled) setTabLoading(false); });
-    return () => { cancelled = true; };
-  }, [activeTab]);
-
-  const loadMoreTab = useCallback(async () => {
-    if (tabLoadingMore || !tabHasMore) return;
-    const market = TABS[activeTabRef.current]?.market ?? '';
-    setTabLoadingMore(true);
-    try {
-      const r = await symbolResolver.getSymbols({ ...(market ? { market } : {}), limit: PAGE_SIZE, offset: tabOffset });
-      setTabSymbols(prev => [...prev, ...refSymbolsToEntries(r.symbols)]);
-      setTabHasMore(r.symbols.length === PAGE_SIZE);
-      setTabOffset(prev => prev + PAGE_SIZE);
-    } catch { /* ignore */ }
-    finally { setTabLoadingMore(false); }
-  }, [tabLoadingMore, tabHasMore, tabOffset]);
-
-  const loadMoreSearch = useCallback(async () => {
-    if (searchingMore || !searchHasMore) return;
-    const q = queryRef.current.trim();
-    if (!q) return;
-    const market = TABS[activeTabRef.current]?.market;
-    setSearchingMore(true);
-    try {
-      const res = await symbolResolver.searchSymbols(q, {
-        limit: PAGE_SIZE, offset: searchOffset,
-        ...(market ? { market } : {}),
-      });
-      setSearchResults(prev => prev ? [...prev, ...refSymbolsToEntries(res.symbols)] : refSymbolsToEntries(res.symbols));
-      setSearchHasMore(res.symbols.length === PAGE_SIZE);
-      setSearchOffset(prev => prev + PAGE_SIZE);
-    } catch { /* ignore */ }
-    finally { setSearchingMore(false); }
-  }, [searchingMore, searchHasMore, searchOffset]);
-
-  // Stable refs so the IntersectionObserver callback always calls the latest version
-  const loadMoreTabRef    = useRef(loadMoreTab);
-  const loadMoreSearchRef = useRef(loadMoreSearch);
-  loadMoreTabRef.current    = loadMoreTab;
-  loadMoreSearchRef.current = loadMoreSearch;
-
-  // Sentinel IntersectionObserver — fires loadMore when the bottom of the list enters view
-  useEffect(() => {
-    const sentinel = sentinelRef.current;
-    if (!sentinel) return;
-    const observer = new IntersectionObserver(entries => {
-      if (entries[0]?.isIntersecting) {
-        if (queryRef.current.trim()) {
-          void loadMoreSearchRef.current();
-        } else {
-          void loadMoreTabRef.current();
-        }
-      }
-    }, { threshold: 0.1 });
-    observer.observe(sentinel);
-    return () => observer.disconnect();
-  }, []); // eslint-disable-line react-hooks/exhaustive-deps
-
-  const doSearch = useCallback((q: string, tab: number) => {
-    if (searchTimer.current) clearTimeout(searchTimer.current);
-    if (!q.trim()) {
-      setSearchResults(null);
-      setSearchOffset(0);
-      setSearchHasMore(false);
-      return;
-    }
-    setIsSearching(true);
-    searchTimer.current = setTimeout(async () => {
-      try {
-        const market = TABS[tab]?.market;
-        const res = await symbolResolver.searchSymbols(q.trim(), {
-          limit: PAGE_SIZE, offset: 0,
-          ...(market ? { market } : {}),
-        });
-        setSearchResults(refSymbolsToEntries(res.symbols));
-        setSearchHasMore(res.symbols.length === PAGE_SIZE);
-        setSearchOffset(PAGE_SIZE);
-      } catch {
-        setSearchResults([]);
-        setSearchHasMore(false);
-      } finally {
-        setIsSearching(false);
-      }
-    }, 180);
-  }, []);
-
-  const handleQueryChange = (value: string) => {
-    setQuery(value);
-    doSearch(value, activeTab);
-  };
-
-  const handleTabChange = (i: number) => {
-    setActiveTab(i);
-    if (queryRef.current.trim()) doSearch(queryRef.current, i);
-  };
-
-  const handleBackdrop = (e: React.MouseEvent) => {
-    if (dialogRef.current && !dialogRef.current.contains(e.target as Node)) onClose();
-  };
-
-  const isSearch    = query.trim().length > 0;
-  const displayList = isSearch ? (searchResults ?? []) : tabSymbols;
-  // Use exchange:symbol format (strip market prefix from symbolKey) so the
-  // datafeed can pass it directly to the TV API, e.g. "BINANCE:BTCUSDT"
-  const toFeedSymbol = (entry: SymbolEntry): string => {
-    if (!entry.symbolKey) return entry.symbol;
-    const parts = entry.symbolKey.split(':');
-    // symbolKey is MARKET:EXCHANGE:SYMBOL → we want EXCHANGE:SYMBOL
-    return parts.length >= 3 ? parts.slice(1).join(':') : entry.symbolKey;
-  };
-  const pick = (entry: SymbolEntry) => { onSelect(toFeedSymbol(entry)); onClose(); };
-
-  const renderRow = (entry: SymbolEntry) => {
-    const iconColor = stringColor(entry.symbol);
-    const exchColor = stringColor(entry.exchange);
-    const letter    = entry.symbol.charAt(0).toUpperCase();
-    const exchAbbr  = entry.exchange.slice(0, 2).toUpperCase();
-    const badge     = badgeLabel(entry.assetType, entry.market);
-    return (
-      <button
-        key={entry.symbolKey ?? `${entry.exchange}:${entry.symbol}`}
-        className={`sym-row${entry.symbol === current ? ' active' : ''}`}
-        onClick={() => pick(entry)}
-      >
-        <SymbolIcon
-          letter={letter}
-          color={iconColor}
-          {...(entry.logoUrl ? { logoUrl: entry.logoUrl } : {})}
-        />
-        <span className="sym-row-info">
-          <span className="sym-row-ticker">{entry.symbol}</span>
-          <span className="sym-row-name">{entry.name}</span>
-        </span>
-        {badge && <span className="sym-row-badge">{badge}</span>}
-        <span className="sym-row-exchange">{entry.exchange}</span>
-        <span className="sym-row-exch-icon" style={{ background: exchColor }}>{exchAbbr}</span>
-      </button>
-    );
-  };
-
-  const renderDirectRow = () => {
-    const q = query.trim();
-    if (!q) return null;
-    return (
-      <button
-        className="sym-row"
-        onClick={() => { onSelect(q.toUpperCase()); onClose(); }}
-        style={{ borderTop: '1px solid var(--sym-border, rgba(255,255,255,.08))', marginTop: 4 }}
-      >
-        <span className="sym-row-icon" style={{ background: '#444', fontSize: 11, fontWeight: 700 }}>→</span>
-        <span className="sym-row-info">
-          <span className="sym-row-ticker">{q.toUpperCase()}</span>
-          <span className="sym-row-name">Use this symbol directly</span>
-        </span>
-      </button>
-    );
-  };
-
-  const renderBody = () => {
-    if (isSearch && isSearching)
-      return <div className="sym-list">{renderDirectRow()}</div>;
-    if (isSearch && searchResults !== null && searchResults.length === 0)
-      return <div className="sym-list">{renderDirectRow()}</div>;
-    if (!isSearch && tabLoading)
-      return <div className="sym-empty">Loading...</div>;
-    if (displayList.length === 0 && !isSearch && !tabLoading)
-      return <div className="sym-empty">No data — run a Symbol Sync from the Studio</div>;
-    const loadingMore = isSearch ? searchingMore : tabLoadingMore;
-    if (isSearch)
-      return (
-        <div className="sym-list">
-          {displayList.map(renderRow)}
-          {renderDirectRow()}
-          <div ref={sentinelRef} className="sym-sentinel" />
-          {loadingMore && <div className="sym-loading-more">Loading more…</div>}
-        </div>
-      );
-    return (
-      <div className="sym-list">
-        {displayList.map(renderRow)}
-        <div ref={sentinelRef} className="sym-sentinel" />
-        {loadingMore && <div className="sym-loading-more">Loading more…</div>}
-      </div>
-    );
-  };
-
-  return (
-    <div className="sym-backdrop" onMouseDown={handleBackdrop}>
-      <div className="sym-dialog" ref={dialogRef} role="dialog" aria-modal="true" aria-label="Symbol Search">
-
-        {/* Header */}
-        <div className="sym-header">
-          <span className="sym-header-title">Symbol Search</span>
-          <button className="sym-header-close" onClick={onClose} aria-label="Close">
-            <svg viewBox="0 0 14 14" width="13" height="13" stroke="currentColor"
-              strokeWidth="2.2" strokeLinecap="round" fill="none">
-              <line x1="2" y1="2" x2="12" y2="12" />
-              <line x1="12" y1="2" x2="2" y2="12" />
-            </svg>
-          </button>
-        </div>
-
-        {/* Search input */}
-        <div className="sym-search-row">
-          <svg className="sym-search-icon" viewBox="0 0 16 16" width="15" height="15"
-            stroke="currentColor" fill="none" strokeWidth="1.8" strokeLinecap="round">
-            <circle cx="6.5" cy="6.5" r="4.5" />
-            <line x1="10.5" y1="10.5" x2="14" y2="14" />
-          </svg>
-          <input
-            ref={inputRef}
-            className="sym-search-input"
-            type="text"
-            value={query}
-            onChange={(e) => handleQueryChange(e.target.value)}
-            placeholder="Search symbols or names..."
-            autoComplete="off"
-            spellCheck={false}
-          />
-          {query && (
-            <button className="sym-search-clear" onClick={() => { setQuery(''); setSearchResults(null); }} aria-label="Clear">
-              <svg viewBox="0 0 12 12" width="11" height="11" stroke="currentColor"
-                strokeWidth="2.2" strokeLinecap="round" fill="none">
-                <line x1="2" y1="2" x2="10" y2="10" />
-                <line x1="10" y1="2" x2="2" y2="10" />
-              </svg>
-            </button>
-          )}
-        </div>
-
-        {/* Category tabs */}
-        <div className="sym-tabs">
-          {TABS.map((tab, i) => (
-            <button
-              key={tab.label}
-              className={`sym-tab${i === activeTab ? ' active' : ''}`}
-              onClick={() => handleTabChange(i)}
-            >
-              {tab.label}
-            </button>
-          ))}
-        </div>
-
-        {/* Results */}
-        <div className="sym-list-wrap">
-          {renderBody()}
-        </div>
-
-        {/* Footer */}
-        <div className="sym-footer">Search using ISIN and CUSIP codes</div>
-
-      </div>
-    </div>
-  );
-}

package/src/react/workspace/TabBar.tsx

@@ -1,87 +0,0 @@
-import React, { useRef, useState } from 'react';
-
-export type TabItem = {
-  id: string;
-  label: string;
-  /** Whether this tab has been saved to the DB (shows a saved indicator). */
-  isSaved?: boolean;
-};
-
-type Props = {
-  tabs: TabItem[];
-  activeId: string;
-  onSelect: (id: string) => void;
-  onAdd: () => void;
-  onClose: (id: string) => void;
-  onRename: (id: string, label: string) => void;
-};
-
-export function TabBar({ tabs, activeId, onSelect, onAdd, onClose, onRename }: Props) {
-  const [editingId, setEditingId] = useState<string | null>(null);
-  const [editValue, setEditValue] = useState('');
-  const inputRef = useRef<HTMLInputElement>(null);
-
-  function startEdit(tab: TabItem, e: React.MouseEvent) {
-    e.stopPropagation();
-    setEditingId(tab.id);
-    setEditValue(tab.label);
-    setTimeout(() => inputRef.current?.select(), 0);
-  }
-
-  function commitEdit() {
-    if (editingId && editValue.trim()) {
-      onRename(editingId, editValue.trim());
-    }
-    setEditingId(null);
-  }
-
-  return (
-    <div className="tab-bar">
-      {tabs.map((tab) => (
-        <div
-          key={tab.id}
-          className={`tab-item${tab.id === activeId ? ' active' : ''}`}
-          onClick={() => onSelect(tab.id)}
-          onDoubleClick={(e) => startEdit(tab, e)}
-          title="Double-click to rename"
-        >
-          {editingId === tab.id ? (
-            <input
-              ref={inputRef}
-              className="tab-rename-input"
-              value={editValue}
-              onChange={(e) => setEditValue(e.target.value)}
-              onBlur={commitEdit}
-              onKeyDown={(e) => {
-                if (e.key === 'Enter') commitEdit();
-                if (e.key === 'Escape') setEditingId(null);
-              }}
-              onClick={(e) => e.stopPropagation()}
-              autoFocus
-            />
-          ) : (
-            <span className="tab-label">
-              {tab.label}
-              {tab.isSaved && <span className="tab-saved-dot" title="Saved layout" />}
-            </span>
-          )}
-          {tabs.length > 1 && (
-            <button
-              className="tab-close"
-              title="Close tab"
-              onClick={(e) => {
-                e.stopPropagation();
-                onClose(tab.id);
-              }}
-            >
-              ×
-            </button>
-          )}
-        </div>
-      ))}
-      <button className="tab-add" onClick={onAdd} title="New chart tab">
-        +
-      </button>
-    </div>
-  );
-}