SystemForge Web

React framework for building multi-tenant SaaS applications with SystemForge.

Packages

Package	Description	npm
@plexusone/auth	Authentication primitives
@plexusone/tenant	Multi-tenant context
@plexusone/api-client	HTTP client
@plexusone/telemetry	Event instrumentation
@plexusone/shell	Application shell
@plexusone/pages	Pre-built pages
@plexusone/design-tokens	Design system tokens

Quick Start

# Install packages
pnpm add @plexusone/shell @plexusone/auth @plexusone/tenant

# Wrap your app
import { AuthProvider } from '@plexusone/auth';
import { TenantProvider } from '@plexusone/tenant';
import { AppShell } from '@plexusone/shell';

function App() {
  return (
    <AuthProvider>
      <TenantProvider>
        <AppShell>
          <YourApp />
        </AppShell>
      </TenantProvider>
    </AuthProvider>
  );
}

Telemetry with ProductGraph

Track user behavior, journeys, and performance with ProductGraph integration:

import { TelemetryProvider, ProductGraphAdapter, usePageView, useJourneyStep } from '@plexusone/telemetry';

const adapter = new ProductGraphAdapter({
  projectId: 'my-project',
  endpoint: 'https://api.productgraph.io/v1/events',
});

function App() {
  return (
    <TelemetryProvider config={{ adapters: [adapter] }}>
      <Router />
    </TelemetryProvider>
  );
}

function CheckoutPage() {
  usePageView('/checkout');
  const { enterStep, completeStep } = useJourneyStep('payment', 'Enter Payment');

  useEffect(() => {
    enterStep();
    return () => completeStep();
  }, []);

  return <PaymentForm />;
}

Documentation

• API Documentation
• ProductGraph Integration
• Changelog

Development

# Install dependencies
pnpm install

# Build all packages
pnpm build

# Run development mode
pnpm dev

# Run tests
pnpm test

# Lint
pnpm lint

License

MIT