@ausdata/ui

Official React component library for searching Australian businesses using the Ausdata API. This package provides a ready-to-use BusinessSearch component that allows users to search for Australian businesses by name or ABN (Australian Business Number).

Note: @ausdata/ui is designed to work together with @ausdata/sdk. The UI components use the SDK internally to communicate with the Ausdata API.

Features

• 🔍 Business Search: Search Australian businesses by name or 11-digit ABN
• 📊 Multiple Display Modes: Table and card layout variants
• 🎨 Customizable Themes: Multiple visual themes (minimal, brand, light, dark, eye care)
• 📄 Pagination: Built-in pagination with configurable page sizes (10, 25, 50 results per page)
• 📱 Responsive Design: Works across different screen sizes
• ♿ Accessible: Built with accessibility in mind (ARIA labels, semantic HTML)
• ⚡ TypeScript: Fully typed with TypeScript for better developer experience

Installation

@ausdata/ui requires @ausdata/sdk as a peer dependency. Install both packages together:

npm install @ausdata/ui @ausdata/sdk

Usage

Basic Example

import { BusinessSearch } from '@ausdata/ui';

function App() {
  const API_KEY = import.meta.env.VITE_AUSDATA_API_KEY ?? '';
  
  return (
    <div>
      <BusinessSearch apiKey={API_KEY} />
    </div>
  );
}

With Custom Configuration

import { BusinessSearch } from '@ausdata/ui';

function App() {
  const API_KEY = import.meta.env.VITE_AUSDATA_API_KEY ?? '';
  
  return (
    <BusinessSearch
      apiKey={API_KEY}
      variant="table"      // 'table' | 'card'
      tone="minimal"       // 'minimal' | 'brand' | 'light' | 'dark' | 'eye'
      dense={false}        // Compact mode
    />
  );
}

Component Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | apiKey | string | required | Your Ausdata API key | | baseUrl | string | '/api' | API base URL. Use full URL (e.g., 'https://api.ausdata.app/api/v1') for direct API calls, or /api if using a proxy | | variant | 'table' \| 'card' | 'table' | Layout style: table or card view | | tone | 'minimal' \| 'brand' \| 'light' \| 'dark' \| 'eye' | 'minimal' | Visual theme style | | dense | boolean | false | Compact mode with reduced spacing and font sizes |

Search Results

The component displays the following business information:

• Name: Business name
• ABN: 11-digit Australian Business Number
• Status: Active, Cancelled, or Inactive
• Type: Business entity type
• Location: State and postcode
• Industry: Business industry classification
• ABN Status: ABN registration status
• GST: GST registration status
• Score: Match score (0-100) for search relevance

API Configuration

The component uses the @ausdata/sdk package internally to communicate with the Ausdata API. Both packages work together seamlessly—the UI component handles the presentation layer while the SDK manages all API interactions.

Base URL Configuration

The component automatically detects the environment and uses the appropriate base URL:

• Next.js: Automatically uses /api (requires API route setup, see below)
• Vite: Automatically uses /api (requires proxy configuration in vite.config.ts)
• Other frameworks: Defaults to /api, but you can specify a full URL if needed

// Automatic (recommended) - component detects environment
<BusinessSearch apiKey={API_KEY} />

// Manual override if needed
<BusinessSearch 
  apiKey={API_KEY} 
  baseUrl="https://api.ausdata.app/api/v1" 
/>

Next.js Setup

For Next.js projects, create an API route at src/app/api/[...path]/route.ts:

import { NextRequest, NextResponse } from 'next/server';

export async function GET(
  request: NextRequest,
  { params }: { params: Promise<{ path: string[] }> }
) {
  return handleRequest(request, params, 'GET');
}

export async function POST(
  request: NextRequest,
  { params }: { params: Promise<{ path: string[] }> }
) {
  return handleRequest(request, params, 'POST');
}

async function handleRequest(
  request: NextRequest,
  params: Promise<{ path: string[] }>,
  method: string
) {
  const { path } = await params;
  const apiKey = process.env.AUSDATA_API_KEY || process.env.NEXT_PUBLIC_AUSDATA_API_KEY;
  const baseUrl = process.env.AUSDATA_BASE_URL || 'https://api.ausdata.app/api/v1';

  if (!apiKey) {
    return NextResponse.json(
      { success: false, error: { code: 'AUTH_001', message: 'API key is required' } },
      { status: 401 }
    );
  }

  const cleanPath = path.filter(p => p !== 'api').join('/');
  const apiPath = `/${cleanPath}`;
  const searchParams = request.nextUrl.searchParams.toString();
  const url = `${baseUrl}${apiPath}${searchParams ? `?${searchParams}` : ''}`;

  let body: string | undefined;
  if (method === 'POST') {
    try {
      body = await request.text();
    } catch {}
  }

  const response = await fetch(url, {
    method,
    headers: {
      'Content-Type': 'application/json',
      'Authorization': `Bearer ${apiKey}`,
      'X-API-Key': apiKey,
    },
    body: body || undefined,
  });

  const contentType = response.headers.get('content-type');
  if (contentType?.includes('application/json')) {
    const data = await response.json();
    return NextResponse.json(data, { status: response.status });
  } else {
    const text = await response.text();
    return NextResponse.json(
      { success: false, error: { code: `HTTP_${response.status}`, message: text || response.statusText } },
      { status: response.status }
    );
  }
}

Vite Setup

For Vite projects, add proxy configuration to vite.config.ts:

export default defineConfig({
  server: {
    proxy: {
      '/api': {
        target: 'https://api.ausdata.app',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '/api/v1'),
      },
    },
  },
});

Environment Variables

Set your API key via environment variable:

# For Vite projects
VITE_AUSDATA_API_KEY=your_api_key_here

# For Next.js projects
NEXT_PUBLIC_AUSDATA_API_KEY=your_api_key_here
NEXT_PUBLIC_AUSDATA_BASE_URL=https://api.ausdata.app/api/v1

Development

# Install dependencies
npm install

# Run development server
npm run dev

# Build for production
npm run build

# Preview production build
npm run preview

# Run linter
npm run lint

Project Structure

src/
  ├── App.tsx              # Main application component
  ├── BusinessSearch.tsx   # Business search component
  ├── main.tsx            # Application entry point
  └── App.css             # Component styles

Technologies

• React 19: UI library
• TypeScript: Type safety
• Vite: Build tool and dev server
• @ausdata/sdk: Ausdata API client

License

MIT © Ausdata Science

Support

• Publisher: Ausdata Science — [email protected]
• Technical Support: Ausdata Lab — [email protected]