@hanzo/react 0.1.2 → 1.0.0

package/package.json

@@ -1,108 +1,101 @@
 {
   "name": "@hanzo/react",
-  "version": "0.1.2",
-  "description": "Hanzo React Components",
-  "keywords": [
-    "hanzo",
-    "react"
-  ],
-  "author": "David Tai <david@verus.io>",
-  "homepage": "http://hanzo.ai",
-  "license": "ISC",
-  "main": "dist/index.cjs.js",
-  "module": "dist/index.esm.js",
-  "browser": "dist/index.umd.js",
-  "directories": {
-    "src": "src",
-    "dist": "dist"
+  "version": "1.0.0",
+  "description": "React package for building AI-powered applications with generative UI",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/",
+    "access": "public",
+    "scope": "@hanzo"
   },
+  "author": "Hanzo AI, Inc.",
+  "license": "BSD-3-Clause",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "sideEffects": false,
   "files": [
+    "dist",
     "src",
-    "dist"
+    "README.md",
+    "LICENSE"
   ],
-  "publishConfig": {
-    "access": "public"
-  },
   "repository": {
     "type": "git",
-    "url": "https://github.com/hanzoai/hanzo"
+    "url": "git+https://github.com/hanzoai/ui.git",
+    "directory": "pkg/react"
   },
+  "keywords": [
+    "ai",
+    "react",
+    "generative-ui",
+    "llm",
+    "chat",
+    "copilot",
+    "hanzo",
+    "mcp",
+    "model-context-protocol"
+  ],
   "scripts": {
-    "audit": "node_modules/.bin/source-map-explorer dist/index.umd.js",
-    "prepare": "install-peers && npm run build",
-    "clean": "rm -rf dist",
-    "build": "npm run clean && node_modules/.bin/rollup -c",
-    "build:watch": "node_modules/.bin/rollup -c -w",
-    "watch": "node_modules/.bin/concurrently 'npm run build:watch' 'node_modules/.bin/serve -l tcp://127.0.0.1'",
-    "test": "node_modules/.bin/jest && npm run build",
-    "test:coverage": "node_modules/.bin/jest --collect-coverage",
-    "storybook": "start-storybook -p 6006",
-    "build-storybook": "build-storybook"
-  },
-  "bugs": {
-    "url": "https://github.com/hanzoai/hanzo/issues"
-  },
-  "devDependencies": {
-    "@babel/core": "7.11.1",
-    "@babel/plugin-proposal-class-properties": "7.10.4",
-    "@babel/plugin-proposal-decorators": "7.10.5",
-    "@babel/plugin-transform-react-jsx": "7.10.4",
-    "@babel/preset-env": "7.11.0",
-    "@storybook/addon-actions": "^5.3.19",
-    "@storybook/addon-links": "^5.3.19",
-    "@storybook/addons": "^5.3.19",
-    "@storybook/react": "^5.3.19",
-    "autoprefixer": "9.8.6",
-    "babel-core": "7.0.0-bridge.0",
-    "babel-jest": "26.2.2",
-    "babel-loader": "^8.1.0",
-    "babel-plugin-transform-react-pug": "7.0.1",
-    "concurrently": "5.3.0",
-    "install-peers-cli": "^2.2.0",
-    "jest": "26.2.2",
-    "node-eval": "2.0.0",
-    "postcss-assets": "5.0.0",
-    "postcss-url": "8.0.0",
-    "rollup": "2.23.1",
-    "rollup-plugin-babel": "4.4.0",
-    "rollup-plugin-commonjs": "10.1.0",
-    "rollup-plugin-filesize": "9.0.2",
-    "rollup-plugin-json": "4.0.0",
-    "rollup-plugin-node-resolve": "5.2.0",
-    "rollup-plugin-peer-deps-external": "2.2.3",
-    "rollup-plugin-postcss": "3.1.4",
-    "rollup-plugin-visualizer": "4.1.0",
-    "serve": "11.3.2",
-    "source-map-explorer": "2.4.2",
-    "styled-jsx": "3.3.0",
-    "styled-jsx-plugin-stylus": "0.0.4"
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "test": "vitest",
+    "test:coverage": "vitest --coverage",
+    "typecheck": "tsc --noEmit",
+    "lint": "eslint src",
+    "clean": "rm -rf dist"
   },
-  "renovate": {
-    "extends": [
-      "config:js-lib"
-    ],
-    "automerge": true,
-    "major": {
-      "automerge": false
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
     },
-    "automergeType": "branch"
+    "./hooks": {
+      "types": "./dist/hooks/index.d.ts",
+      "import": "./dist/hooks/index.mjs",
+      "require": "./dist/hooks/index.js"
+    },
+    "./components": {
+      "types": "./dist/components/index.d.ts",
+      "import": "./dist/components/index.mjs",
+      "require": "./dist/components/index.js"
+    },
+    "./tools": {
+      "types": "./dist/tools/index.d.ts",
+      "import": "./dist/tools/index.mjs",
+      "require": "./dist/tools/index.js"
+    },
+    "./mcp": {
+      "types": "./dist/mcp/index.d.ts",
+      "import": "./dist/mcp/index.mjs",
+      "require": "./dist/mcp/index.js"
+    }
   },
-  "browserslist": "> 0.25%, not dead",
   "dependencies": {
-    "@date-io/moment": "2.8.0",
-    "@hanzo/utils": "^0.1.2",
-    "@material-ui/pickers": "3.2.10",
-    "classnames": "2.2.6",
-    "fast-memoize": "2.5.2",
-    "flag-icon-css": "3.5.0",
-    "raf": "^3.4.1",
-    "react-number-format": "4.4.1"
+    "@modelcontextprotocol/sdk": "^1.10.2",
+    "clsx": "^2.1.1",
+    "nanoid": "^5.0.0",
+    "openai": "^4.0.0",
+    "swr": "^2.3.0",
+    "tailwind-merge": "^3.3.1",
+    "zod": "^3.25.0",
+    "zustand": "^5.0.0"
   },
   "peerDependencies": {
-    "@material-ui/core": "^4.11.0",
-    "moment-timezone": "^0.5.31",
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1"
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
   },
-  "gitHead": "3274694b7821dac896bd13f3bd7fc347c745ec9b"
-}
+  "devDependencies": {
+    "@testing-library/react": "^16.3.0",
+    "@types/node": "^20.14.15",
+    "@types/react": "^18.3.1",
+    "@types/react-dom": "^18.3.1",
+    "@vitest/coverage-v8": "^4.0.6",
+    "@vitest/ui": "^4.0.6",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "tsup": "^8.5.0",
+    "typescript": "^5.6.3",
+    "vitest": "^4.0.6"
+  }
+}

package/src/components/HanzoProvider.test.tsx

@@ -0,0 +1,346 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { render, screen, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import React from 'react'
+import { HanzoProvider, useHanzo } from './HanzoProvider'
+import { z } from 'zod'
+
+// Mock fetch
+global.fetch = vi.fn()
+
+describe('HanzoProvider', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+  
+  it('should provide context to children', () => {
+    const TestComponent = () => {
+      const context = useHanzo()
+      return <div>Context: {context ? 'Available' : 'Not Available'}</div>
+    }
+    
+    render(
+      <HanzoProvider apiKey="test-key">
+        <TestComponent />
+      </HanzoProvider>
+    )
+    
+    expect(screen.getByText('Context: Available')).toBeInTheDocument()
+  })
+  
+  it('should throw error when useHanzo is used outside provider', () => {
+    const TestComponent = () => {
+      const context = useHanzo()
+      return <div>{context}</div>
+    }
+    
+    // Suppress console.error for this test
+    const spy = vi.spyOn(console, 'error').mockImplementation(() => {})
+    
+    expect(() => render(<TestComponent />)).toThrow(
+      'useHanzo must be used within HanzoProvider'
+    )
+    
+    spy.mockRestore()
+  })
+  
+  it('should initialize with default thread', async () => {
+    const TestComponent = () => {
+      const { threads, activeThreadId } = useHanzo()
+      return (
+        <div>
+          <div>Threads: {threads.size}</div>
+          <div>Active: {activeThreadId || 'none'}</div>
+        </div>
+      )
+    }
+    
+    render(
+      <HanzoProvider apiKey="test-key">
+        <TestComponent />
+      </HanzoProvider>
+    )
+    
+    await waitFor(() => {
+      expect(screen.getByText(/Threads: 1/)).toBeInTheDocument()
+      expect(screen.getByText(/Active: /)).toBeInTheDocument()
+    })
+  })
+  
+  it('should register components', () => {
+    const TestComponent = () => <div>Test Component</div>
+    const components = [
+      {
+        name: 'test',
+        component: TestComponent,
+        description: 'Test component'
+      }
+    ]
+    
+    const ConsumerComponent = () => {
+      const { components: registeredComponents } = useHanzo()
+      return <div>Components: {registeredComponents.size}</div>
+    }
+    
+    render(
+      <HanzoProvider apiKey="test-key" components={components}>
+        <ConsumerComponent />
+      </HanzoProvider>
+    )
+    
+    expect(screen.getByText('Components: 1')).toBeInTheDocument()
+  })
+  
+  it('should register tools', () => {
+    const tools = [
+      {
+        name: 'calculator',
+        description: 'Calculate math',
+        parameters: z.object({ expression: z.string() }),
+        execute: async ({ expression }: any) => ({ result: eval(expression) })
+      }
+    ]
+    
+    const ConsumerComponent = () => {
+      const { tools: registeredTools } = useHanzo()
+      return <div>Tools: {registeredTools.size}</div>
+    }
+    
+    render(
+      <HanzoProvider apiKey="test-key" tools={tools}>
+        <ConsumerComponent />
+      </HanzoProvider>
+    )
+    
+    expect(screen.getByText('Tools: 1')).toBeInTheDocument()
+  })
+  
+  it('should send message to API', async () => {
+    const mockResponse = {
+      choices: [{
+        message: {
+          content: 'AI response'
+        }
+      }]
+    }
+    
+    ;(global.fetch as any).mockResolvedValueOnce({
+      ok: true,
+      json: async () => mockResponse
+    })
+    
+    const TestComponent = () => {
+      const { sendMessage } = useHanzo()
+      const [response, setResponse] = React.useState<any>(null)
+      
+      const handleSend = async () => {
+        const msg = await sendMessage('Hello')
+        setResponse(msg)
+      }
+      
+      return (
+        <div>
+          <button onClick={handleSend}>Send</button>
+          {response && <div>Response: {response.content}</div>}
+        </div>
+      )
+    }
+    
+    render(
+      <HanzoProvider apiKey="test-key">
+        <TestComponent />
+      </HanzoProvider>
+    )
+    
+    const button = screen.getByText('Send')
+    await userEvent.click(button)
+    
+    await waitFor(() => {
+      expect(screen.getByText('Response: AI response')).toBeInTheDocument()
+    })
+    
+    expect(global.fetch).toHaveBeenCalledWith(
+      'https://api.hanzo.ai/v1/chat/completions',
+      expect.objectContaining({
+        method: 'POST',
+        headers: expect.objectContaining({
+          'Content-Type': 'application/json',
+          'Authorization': 'Bearer test-key'
+        })
+      })
+    )
+  })
+  
+  it('should handle API errors', async () => {
+    ;(global.fetch as any).mockRejectedValueOnce(new Error('Network error'))
+    
+    const onError = vi.fn()
+    
+    const TestComponent = () => {
+      const { sendMessage } = useHanzo()
+      const [error, setError] = React.useState<any>(null)
+      
+      const handleSend = async () => {
+        try {
+          await sendMessage('Hello')
+        } catch (err) {
+          setError(err)
+        }
+      }
+      
+      return (
+        <div>
+          <button onClick={handleSend}>Send</button>
+          {error && <div>Error: {error.message}</div>}
+        </div>
+      )
+    }
+    
+    render(
+      <HanzoProvider apiKey="test-key" onError={onError}>
+        <TestComponent />
+      </HanzoProvider>
+    )
+    
+    const button = screen.getByText('Send')
+    await userEvent.click(button)
+    
+    await waitFor(() => {
+      expect(screen.getByText('Error: Network error')).toBeInTheDocument()
+    })
+    
+    expect(onError).toHaveBeenCalledWith(expect.any(Error))
+  })
+  
+  it('should execute tools', async () => {
+    const mockExecute = vi.fn().mockResolvedValue({ result: 42 })
+    
+    const tools = [
+      {
+        name: 'calculator',
+        description: 'Calculate',
+        parameters: z.object({ expression: z.string() }),
+        execute: mockExecute
+      }
+    ]
+    
+    const TestComponent = () => {
+      const { executeTool } = useHanzo()
+      const [result, setResult] = React.useState<any>(null)
+      
+      const handleExecute = async () => {
+        const res = await executeTool('calculator', { expression: '2+2' })
+        setResult(res)
+      }
+      
+      return (
+        <div>
+          <button onClick={handleExecute}>Execute</button>
+          {result && <div>Result: {result.result}</div>}
+        </div>
+      )
+    }
+    
+    render(
+      <HanzoProvider apiKey="test-key" tools={tools}>
+        <TestComponent />
+      </HanzoProvider>
+    )
+    
+    const button = screen.getByText('Execute')
+    await userEvent.click(button)
+    
+    await waitFor(() => {
+      expect(screen.getByText('Result: 42')).toBeInTheDocument()
+    })
+    
+    expect(mockExecute).toHaveBeenCalledWith({ expression: '2+2' })
+  })
+  
+  it('should render components dynamically', () => {
+    const CustomComponent = ({ text }: { text: string }) => (
+      <div>Custom: {text}</div>
+    )
+    
+    const components = [
+      {
+        name: 'custom',
+        component: CustomComponent,
+        description: 'Custom component'
+      }
+    ]
+    
+    const TestComponent = () => {
+      const { renderComponent } = useHanzo()
+      const rendered = renderComponent('custom', { text: 'Hello' })
+      
+      return <div>{rendered}</div>
+    }
+    
+    render(
+      <HanzoProvider apiKey="test-key" components={components}>
+        <TestComponent />
+      </HanzoProvider>
+    )
+    
+    expect(screen.getByText('Custom: Hello')).toBeInTheDocument()
+  })
+  
+  it('should manage thread operations', async () => {
+    const TestComponent = () => {
+      const { 
+        threads, 
+        createThread, 
+        switchThread, 
+        deleteThread,
+        activeThreadId 
+      } = useHanzo()
+      
+      const handleCreate = () => {
+        const thread = createThread({ name: 'New Thread' })
+        switchThread(thread.id)
+      }
+      
+      const handleDelete = () => {
+        if (activeThreadId) {
+          deleteThread(activeThreadId)
+        }
+      }
+      
+      return (
+        <div>
+          <div>Thread Count: {threads.size}</div>
+          <button onClick={handleCreate}>Create Thread</button>
+          <button onClick={handleDelete}>Delete Thread</button>
+        </div>
+      )
+    }
+    
+    render(
+      <HanzoProvider apiKey="test-key">
+        <TestComponent />
+      </HanzoProvider>
+    )
+    
+    // Initially should have 1 thread
+    await waitFor(() => {
+      expect(screen.getByText('Thread Count: 1')).toBeInTheDocument()
+    })
+    
+    // Create a new thread
+    const createButton = screen.getByText('Create Thread')
+    await userEvent.click(createButton)
+    
+    await waitFor(() => {
+      expect(screen.getByText('Thread Count: 2')).toBeInTheDocument()
+    })
+    
+    // Delete current thread
+    const deleteButton = screen.getByText('Delete Thread')
+    await userEvent.click(deleteButton)
+    
+    await waitFor(() => {
+      expect(screen.getByText('Thread Count: 1')).toBeInTheDocument()
+    })
+  })
+})