Skip to main content

Frontend SDK

The Burdenoff Frontend SDK (@burdenoff/fe-sdk) provides shared components and utilities for all React-based frontends.

Package Visibility: Private (requires authentication)

Installation​

This package is private and requires npm authentication:

# Ensure you're authenticated
npm login

# Install the package
npm install @burdenoff/fe-sdk

Note: There is also an alpha version available as @burdenoff/alpha-fe-sdk for testing new features.

Features​

UI Components​

  • Common React components
  • Radix UI integrations
  • Form components with validation
  • Data tables and lists

State Management​

  • Zustand store helpers
  • React Query hooks
  • Context providers

Authentication​

  • JWT token management
  • OAuth integration helpers
  • Protected route components

API Client​

  • Configured axios/fetch instances
  • Request/response interceptors
  • Error handling
  • Type-safe endpoints

Usage Examples​

Using Components​

import { Button, Form, Input } from '@burdenoff/fe-sdk';

function MyComponent() {
  return (
    <Form>
      <Input name="email" type="email" />
      <Button type="submit">Submit</Button>
    </Form>
  );
}

Using API Client​

import { apiClient } from '@burdenoff/fe-sdk';

const data = await apiClient.get('/api/users');

Authentication​

import { useAuth } from '@burdenoff/fe-sdk';

function Dashboard() {
  const { user, logout } = useAuth();

  return (
    <div>
      <h1>Welcome, {user.name}</h1>
      <button onClick={logout}>Logout</button>
    </div>
  );
}

Development​

Building​

npm run build

Testing​

npm test
npm run test:coverage

Publishing​

npm run build
npm publish

Contributing​

See Development Guidelines for contribution guidelines.