@integrantlabs/react

React component library for the Integrant AI document intelligence platform.

Installation

npm install @integrantlabs/react

Quick Start

import React from 'react';
import { useDocumentAPI, ThemeProvider } from '@integrantlabs/react';

function App() {
  return (
    <ThemeProvider defaultMode="auto">
      <DocumentSearch />
    </ThemeProvider>
  );
}

function DocumentSearch() {
  const { searchDocuments, isLoading, error } = useDocumentAPI({
    apiKey: 'your-api-key',
    baseUrl: '/api/v1'
  });

  const handleSearch = async (query: string) => {
    try {
      const results = await searchDocuments(query);
      console.log('Search results:', results);
    } catch (err) {
      console.error('Search failed:', err);
    }
  };

  return (
    <div>
      <button onClick={() => handleSearch('example query')}>
        {isLoading ? 'Searching...' : 'Search Documents'}
      </button>
      {error && <p>Error: {error.message}</p>}
    </div>
  );
}

Features

• useDocumentAPI Hook: Comprehensive hook for document search and Q&A functionality
• Theme System: Built-in light/dark theme support with CSS custom properties
• Error Handling: Robust error boundaries and error handling utilities
• TypeScript: Full TypeScript support with comprehensive type definitions
• Mock Data Support: Built-in mock data for development and testing
• Performance: Optimized with caching, retry logic, and memoization

Mock Mode

The library supports mock mode for development and testing:

# Enable mock mode via environment variable
REACT_APP_API_MODE=mock npm start

Or programmatically:

const client = new DocumentAPIClient({
  apiKey: 'test-key',
  baseUrl: 'mock://api' // Using mock:// protocol
});

API Reference

useDocumentAPI

const {
  searchDocuments,
  queryDocuments, 
  isLoading,
  error,
  clearError
} = useDocumentAPI(config, options);

Parameters:

• config: ApiClientConfig - API configuration
• options?: UseDocumentAPIOptions - Additional options

Returns:

• searchDocuments(query, options?) - Search function
• queryDocuments(query, options?) - Q&A function
• isLoading: boolean - Loading state
• error: Error | null - Error state
• clearError() - Clear error function

ThemeProvider

<ThemeProvider defaultMode="auto" storageKey="theme">
  <App />
</ThemeProvider>

Props:

• defaultMode?: 'light' | 'dark' | 'auto' - Default theme mode
• storageKey?: string - localStorage key for persistence

useTheme

const { theme, setTheme, toggleTheme, resolvedTheme } = useTheme();

Development

# Install dependencies
npm install

# Start development mode
npm run dev

# Build library
npm run build

# Type check
npm run typecheck

# Lint code  
npm run lint

License

MIT