@hanzo/ui 5.7.1 → 8.0.0

package/docs/utils/use-copy-button.ts

@@ -1,39 +0,0 @@
-'use client';
-import {
-  type MouseEventHandler,
-  useCallback,
-  useEffect,
-  useRef,
-  useState,
-} from 'react';
-
-export function useCopyButton(
-  onCopy: () => void | Promise<void>,
-): [checked: boolean, onClick: MouseEventHandler] {
-  const [checked, setChecked] = useState(false);
-  const callbackRef = useRef(onCopy);
-  const timeoutRef = useRef<number | null>(null);
-
-  callbackRef.current = onCopy;
-
-  const onClick: MouseEventHandler = useCallback(() => {
-    if (timeoutRef.current) window.clearTimeout(timeoutRef.current);
-    const res = Promise.resolve(callbackRef.current());
-
-    void res.then(() => {
-      setChecked(true);
-      timeoutRef.current = window.setTimeout(() => {
-        setChecked(false);
-      }, 1500);
-    });
-  }, []);
-
-  // Avoid updates after being unmounted
-  useEffect(() => {
-    return () => {
-      if (timeoutRef.current) window.clearTimeout(timeoutRef.current);
-    };
-  }, []);
-
-  return [checked, onClick];
-}

package/docs/utils/use-footer-items.ts

@@ -1,27 +0,0 @@
-import { useTreeContext } from '@/contexts/tree';
-import type * as PageTree from '@hanzo/docs-core/page-tree';
-
-const footerCache = new Map<string, PageTree.Item[]>();
-
-/**
- * @returns a list of page tree items (linear), that you can obtain footer items
- */
-export function useFooterItems(): PageTree.Item[] {
-  const { root } = useTreeContext();
-  const cached = footerCache.get(root.$id);
-  if (cached) return cached;
-
-  const list: PageTree.Item[] = [];
-  function onNode(node: PageTree.Node) {
-    if (node.type === 'folder') {
-      if (node.index) onNode(node.index);
-      for (const child of node.children) onNode(child);
-    } else if (node.type === 'page' && !node.external) {
-      list.push(node);
-    }
-  }
-
-  for (const child of root.children) onNode(child);
-  footerCache.set(root.$id, list);
-  return list;
-}

package/docs/utils/use-is-scroll-top.ts

@@ -1,21 +0,0 @@
-import { useEffect, useState } from 'react';
-
-export function useIsScrollTop({ enabled = true }: { enabled?: boolean }) {
-  const [isTop, setIsTop] = useState<boolean | undefined>();
-
-  useEffect(() => {
-    if (!enabled) return;
-
-    const listener = () => {
-      setIsTop(window.scrollY < 10);
-    };
-
-    listener();
-    window.addEventListener('scroll', listener);
-    return () => {
-      window.removeEventListener('scroll', listener);
-    };
-  }, [enabled]);
-
-  return isTop;
-}

package/finance/README.md

@@ -1,164 +0,0 @@
-# @hanzo/finance
-
-Financial trading widgets and components powered by TradingView for React applications.
-
-## Features
-
-- 📊 **Advanced Charts** - Full-featured TradingView charts with symbol switching
-- 📈 **Market Overview** - Multi-asset market overview with indices, futures, bonds, and forex
-- 📰 **News Timeline** - Real-time financial news and market events
-- 🎯 **Market Screeners** - Pre-configured screeners for stocks, crypto, and forex
-- 📉 **Ticker Tape** - Scrolling ticker showing real-time prices
-- 💹 **Trading Panel** - Complete trading interface with buy/sell functionality
-
-## Installation
-
-```bash
-pnpm add @hanzo/finance
-```
-
-## Peer Dependencies
-
-```bash
-pnpm add react react-dom lucide-react next
-```
-
-## Usage
-
-### Advanced Chart
-
-Full-featured TradingView chart with symbol switching:
-
-```tsx
-import { AdvancedChart } from '@hanzo/finance'
-
-function TradingPage() {
-  return <AdvancedChart symbol="NASDAQ:AAPL" />
-}
-```
-
-### Market Overview
-
-Multi-asset market overview widget:
-
-```tsx
-import { MarketOverview } from '@hanzo/finance'
-
-function DashboardPage() {
-  return <MarketOverview />
-}
-```
-
-### Ticker Tape
-
-Scrolling ticker showing real-time prices:
-
-```tsx
-import { TickerTape } from '@hanzo/finance'
-
-function Layout() {
-  return (
-    <>
-      <TickerTape />
-      {/* Your content */}
-    </>
-  )
-}
-```
-
-### Market Screeners
-
-Pre-configured screeners for different asset classes:
-
-```tsx
-import { StockScreener, CryptoScreener, ForexScreener } from '@hanzo/finance'
-
-function ScreenersPage() {
-  return (
-    <div>
-      <h2>Stocks</h2>
-      <StockScreener />
-      
-      <h2>Crypto</h2>
-      <CryptoScreener />
-      
-      <h2>Forex</h2>
-      <ForexScreener />
-    </div>
-  )
-}
-```
-
-### News Timeline
-
-Financial news and market events:
-
-```tsx
-import { NewsTimeline } from '@hanzo/finance'
-
-function NewsPage() {
-  return <NewsTimeline />
-}
-```
-
-### Trading Panel
-
-Complete trading interface with buy/sell functionality:
-
-```tsx
-import { TradingPanel } from '@hanzo/finance'
-
-function TradePage() {
-  return (
-    <TradingPanel 
-      symbol="AAPL"
-      currentPrice={150.25}
-    />
-  )
-}
-```
-
-## Components
-
-### AdvancedChart
-
-Props:
-- `symbol` (string, optional): Symbol to display, default: "NASDAQ:AAPL"
-
-### MarketOverview
-
-No props required. Displays indices, futures, bonds, and forex markets.
-
-### TickerTape
-
-No props required. Shows major indices and popular stocks.
-
-### StockScreener
-
-No props required. Shows US stock market screener.
-
-### CryptoScreener
-
-No props required. Shows cryptocurrency screener.
-
-### ForexScreener
-
-No props required. Shows forex market screener.
-
-### NewsTimeline
-
-No props required. Shows latest financial news.
-
-### TradingPanel
-
-Props:
-- `symbol` (string, required): Trading symbol
-- `currentPrice` (number, required): Current price of the asset
-
-## Styling
-
-All components use dark mode by default and support Tailwind CSS classes. They are fully responsive and will adapt to their container size.
-
-## License
-
-BSD-3-Clause © Hanzo AI, Inc.

package/finance/components/AdvancedChart.tsx

@@ -1,58 +0,0 @@
-'use client'
-
-import { useEffect, useRef, memo } from 'react'
-
-function AdvancedChart({ symbol = 'NASDAQ:AAPL' }: { symbol?: string }) {
-  const container = useRef<HTMLDivElement>(null)
-
-  useEffect(() => {
-    if (!container.current) return
-
-    // Check if widget is already initialized using data attribute
-    if (container.current.dataset.initialized === 'true') {
-      return // Widget already initialized, skip
-    }
-
-    // Mark as initialized before adding script
-    container.current.dataset.initialized = 'true'
-
-    const script = document.createElement('script')
-    script.src = 'https://s3.tradingview.com/external-embedding/embed-widget-advanced-chart.js'
-    script.type = 'text/javascript'
-    script.async = true
-    script.innerHTML = JSON.stringify({
-      width: '100%',
-      height: '600',
-      symbol,
-      interval: 'D',
-      timezone: 'Etc/UTC',
-      theme: 'dark',
-      style: '1',
-      locale: 'en',
-      allow_symbol_change: true,
-      calendar: false,
-      support_host: 'https://www.tradingview.com',
-    })
-
-    container.current.appendChild(script)
-
-    // Cleanup function
-    return () => {
-      if (container.current) {
-        // Remove initialization flag on unmount
-        delete container.current.dataset.initialized
-        // Remove all scripts
-        const scripts = container.current.querySelectorAll('script')
-        scripts.forEach((s) => s.remove())
-      }
-    }
-  }, [symbol])
-
-  return (
-    <div className="tradingview-widget-container w-full h-[600px]" ref={container}>
-      <div className="tradingview-widget-container__widget h-full"></div>
-    </div>
-  )
-}
-
-export default memo(AdvancedChart)

package/finance/components/CompanyProfile.tsx

@@ -1,65 +0,0 @@
-'use client'
-
-import { useEffect, useRef } from 'react'
-
-export interface CompanyProfileProps {
-  symbol?: string
-  width?: string | number
-  height?: string | number
-  locale?: string
-  colorTheme?: 'light' | 'dark'
-  isTransparent?: boolean
-}
-
-export default function CompanyProfile({
-  symbol = 'NASDAQ:AAPL',
-  width = '100%',
-  height = '100%',
-  locale = 'en',
-  colorTheme = 'dark',
-  isTransparent = false
-}: CompanyProfileProps) {
-  const containerRef = useRef<HTMLDivElement>(null)
-
-  useEffect(() => {
-    if (!containerRef.current) return
-
-    // Check if widget is already initialized using data attribute
-    if (containerRef.current.dataset.initialized === 'true') {
-      return // Widget already initialized, skip
-    }
-
-    // Mark as initialized before adding script
-    containerRef.current.dataset.initialized = 'true'
-
-    const script = document.createElement('script')
-    script.src = 'https://s3.tradingview.com/external-embedding/embed-widget-symbol-profile.js'
-    script.async = true
-    script.innerHTML = JSON.stringify({
-      width,
-      height,
-      colorTheme,
-      isTransparent,
-      symbol,
-      locale,
-    })
-
-    containerRef.current.appendChild(script)
-
-    return () => {
-      if (containerRef.current) {
-        // Remove initialization flag on unmount
-        delete containerRef.current.dataset.initialized
-        // Remove all scripts
-        const scripts = containerRef.current.querySelectorAll('script')
-        scripts.forEach((s) => s.remove())
-      }
-    }
-  }, [symbol, width, height, locale, colorTheme, isTransparent])
-
-  return (
-    <div className="tradingview-widget-container" ref={containerRef}>
-      <div className="tradingview-widget-container__widget"></div>
-    </div>
-  )
-}

package/finance/components/CryptoScreener.tsx

@@ -1,55 +0,0 @@
-'use client'
-
-import { useEffect, useRef, memo } from 'react'
-
-function CryptoScreener() {
-  const container = useRef<HTMLDivElement>(null)
-
-  useEffect(() => {
-    if (!container.current) return
-
-    // Check if widget is already initialized using data attribute
-    if (container.current.dataset.initialized === 'true') {
-      return // Widget already initialized, skip
-    }
-
-    // Mark as initialized before adding script
-    container.current.dataset.initialized = 'true'
-
-    const script = document.createElement('script')
-    script.src = 'https://s3.tradingview.com/external-embedding/embed-widget-screener.js'
-    script.type = 'text/javascript'
-    script.async = true
-    script.innerHTML = JSON.stringify({
-      defaultColumn: 'overview',
-      screener_type: 'crypto_mkt',
-      displayCurrency: 'USD',
-      colorTheme: 'dark',
-      isTransparent: false,
-      locale: 'en',
-      width: '100%',
-      height: 550,
-    })
-
-    container.current.appendChild(script)
-
-    // Cleanup function
-    return () => {
-      if (container.current) {
-        // Remove initialization flag on unmount
-        delete container.current.dataset.initialized
-        // Remove all scripts
-        const scripts = container.current.querySelectorAll('script')
-        scripts.forEach((s) => s.remove())
-      }
-    }
-  }, [])
-
-  return (
-    <div className="tradingview-widget-container w-full" ref={container}>
-      <div className="tradingview-widget-container__widget"></div>
-    </div>
-  )
-}
-
-export default memo(CryptoScreener)

package/finance/components/Financials.tsx

@@ -1,71 +0,0 @@
-'use client'
-
-import { useEffect, useRef } from 'react'
-
-export interface FinancialsProps {
-  symbol?: string
-  width?: string | number
-  height?: string | number
-  locale?: string
-  colorTheme?: 'light' | 'dark'
-  isTransparent?: boolean
-  displayMode?: 'regular' | 'compact' | 'adaptive'
-  largeChartUrl?: string
-}
-
-export default function Financials({
-  symbol = 'NASDAQ:AAPL',
-  width = '100%',
-  height = '500',
-  locale = 'en',
-  colorTheme = 'dark',
-  isTransparent = false,
-  displayMode = 'adaptive',
-  largeChartUrl = ''
-}: FinancialsProps) {
-  const containerRef = useRef<HTMLDivElement>(null)
-
-  useEffect(() => {
-    if (!containerRef.current) return
-
-    // Check if widget is already initialized using data attribute
-    if (containerRef.current.dataset.initialized === 'true') {
-      return // Widget already initialized, skip
-    }
-
-    // Mark as initialized before adding script
-    containerRef.current.dataset.initialized = 'true'
-
-    const script = document.createElement('script')
-    script.src = 'https://s3.tradingview.com/external-embedding/embed-widget-financials.js'
-    script.async = true
-    script.innerHTML = JSON.stringify({
-      colorTheme,
-      isTransparent,
-      largeChartUrl,
-      displayMode,
-      width,
-      height,
-      symbol,
-      locale,
-    })
-
-    containerRef.current.appendChild(script)
-
-    return () => {
-      if (containerRef.current) {
-        // Remove initialization flag on unmount
-        delete containerRef.current.dataset.initialized
-        // Remove all scripts
-        const scripts = containerRef.current.querySelectorAll('script')
-        scripts.forEach((s) => s.remove())
-      }
-    }
-  }, [symbol, width, height, locale, colorTheme, isTransparent, displayMode, largeChartUrl])
-
-  return (
-    <div className="tradingview-widget-container w-full h-[500px]" ref={containerRef}>
-      <div className="tradingview-widget-container__widget h-full"></div>
-    </div>
-  )
-}

package/finance/components/ForexScreener.tsx

@@ -1,56 +0,0 @@
-'use client'
-
-import { useEffect, useRef, memo } from 'react'
-
-function ForexScreener() {
-  const container = useRef<HTMLDivElement>(null)
-
-  useEffect(() => {
-    if (!container.current) return
-
-    // Check if widget is already initialized using data attribute
-    if (container.current.dataset.initialized === 'true') {
-      return // Widget already initialized, skip
-    }
-
-    // Mark as initialized before adding script
-    container.current.dataset.initialized = 'true'
-
-    const script = document.createElement('script')
-    script.src = 'https://s3.tradingview.com/external-embedding/embed-widget-screener.js'
-    script.type = 'text/javascript'
-    script.async = true
-    script.innerHTML = JSON.stringify({
-      market: 'forex',
-      showToolbar: true,
-      defaultColumn: 'overview',
-      defaultScreen: 'general',
-      isTransparent: false,
-      locale: 'en',
-      colorTheme: 'dark',
-      width: '100%',
-      height: 550,
-    })
-
-    container.current.appendChild(script)
-
-    // Cleanup function
-    return () => {
-      if (container.current) {
-        // Remove initialization flag on unmount
-        delete container.current.dataset.initialized
-        // Remove all scripts
-        const scripts = container.current.querySelectorAll('script')
-        scripts.forEach((s) => s.remove())
-      }
-    }
-  }, [])
-
-  return (
-    <div className="tradingview-widget-container w-full" ref={container}>
-      <div className="tradingview-widget-container__widget"></div>
-    </div>
-  )
-}
-
-export default memo(ForexScreener)

package/finance/components/MarketOverview.tsx

@@ -1,114 +0,0 @@
-'use client'
-
-import { useEffect, useRef, memo } from 'react'
-
-function MarketOverview() {
-  const container = useRef<HTMLDivElement>(null)
-
-  useEffect(() => {
-    if (!container.current) return
-
-    // Check if widget is already initialized using data attribute
-    if (container.current.dataset.initialized === 'true') {
-      return // Widget already initialized, skip
-    }
-
-    // Mark as initialized before adding script
-    container.current.dataset.initialized = 'true'
-
-    const script = document.createElement('script')
-    script.src = 'https://s3.tradingview.com/external-embedding/embed-widget-market-overview.js'
-    script.type = 'text/javascript'
-    script.async = true
-    script.innerHTML = JSON.stringify({
-      colorTheme: 'dark',
-      dateRange: '12M',
-      locale: 'en',
-      largeChartUrl: '',
-      isTransparent: false,
-      showFloatingTooltip: false,
-      plotLineColorGrowing: 'rgba(41, 98, 255, 1)',
-      plotLineColorFalling: 'rgba(41, 98, 255, 1)',
-      gridLineColor: 'rgba(240, 243, 250, 0)',
-      scaleFontColor: '#DBDBDB',
-      belowLineFillColorGrowing: 'rgba(41, 98, 255, 0.12)',
-      belowLineFillColorFalling: 'rgba(41, 98, 255, 0.12)',
-      belowLineFillColorGrowingBottom: 'rgba(41, 98, 255, 0)',
-      belowLineFillColorFallingBottom: 'rgba(41, 98, 255, 0)',
-      symbolActiveColor: 'rgba(41, 98, 255, 0.12)',
-      tabs: [
-        {
-          title: 'Indices',
-          symbols: [
-            { s: 'FOREXCOM:SPXUSD', d: 'S&P 500 Index' },
-            { s: 'FOREXCOM:NSXUSD', d: 'US 100 Cash CFD' },
-            { s: 'FOREXCOM:DJI', d: 'Dow Jones Industrial Average Index' },
-            { s: 'INDEX:NKY', d: 'Japan 225' },
-            { s: 'INDEX:DEU40', d: 'DAX Index' },
-            { s: 'FOREXCOM:UKXGBP', d: 'FTSE 100 Index' },
-          ],
-          originalTitle: 'Indices',
-        },
-        {
-          title: 'Futures',
-          symbols: [
-            { s: 'BMFBOVESPA:ISP1!', d: 'S&P 500' },
-            { s: 'BMFBOVESPA:EUR1!', d: 'Euro' },
-            { s: 'CMCMARKETS:GOLD', d: 'Gold' },
-            { s: 'PYTH:WTI3!', d: 'WTI Crude Oil' },
-            { s: 'BMFBOVESPA:CCM1!', d: 'Corn' },
-          ],
-          originalTitle: 'Futures',
-        },
-        {
-          title: 'Bonds',
-          symbols: [
-            { s: 'EUREX:FGBL1!', d: 'Euro Bund' },
-            { s: 'EUREX:FBTP1!', d: 'Euro BTP' },
-            { s: 'EUREX:FGBM1!', d: 'Euro BOBL' },
-          ],
-          originalTitle: 'Bonds',
-        },
-        {
-          title: 'Forex',
-          symbols: [
-            { s: 'FX:EURUSD', d: 'EUR to USD' },
-            { s: 'FX:GBPUSD', d: 'GBP to USD' },
-            { s: 'FX:USDJPY', d: 'USD to JPY' },
-            { s: 'FX:USDCHF', d: 'USD to CHF' },
-            { s: 'FX:AUDUSD', d: 'AUD to USD' },
-            { s: 'FX:USDCAD', d: 'USD to CAD' },
-          ],
-          originalTitle: 'Forex',
-        },
-      ],
-      support_host: 'https://www.tradingview.com',
-      backgroundColor: '#0f0f0f',
-      width: '100%',
-      height: '550',
-      showSymbolLogo: true,
-      showChart: true,
-    })
-
-    container.current.appendChild(script)
-
-    // Cleanup function
-    return () => {
-      if (container.current) {
-        // Remove initialization flag on unmount
-        delete container.current.dataset.initialized
-        // Remove all scripts
-        const scripts = container.current.querySelectorAll('script')
-        scripts.forEach((s) => s.remove())
-      }
-    }
-  }, [])
-
-  return (
-    <div className="tradingview-widget-container w-full" ref={container}>
-      <div className="tradingview-widget-container__widget"></div>
-    </div>
-  )
-}
-
-export default memo(MarketOverview)