SystemForge Web

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

Packages

Alphabetical; see Packages for how they depend on each other.

Package	Description	npm
@plexusone/api-client	HTTP client
@plexusone/auth	Authentication primitives
@plexusone/chat	Chat components
@plexusone/console	Organization console pages
@plexusone/design-tokens	Design system tokens
@plexusone/host	App and shell contracts, createHost
@plexusone/invites	Invite-gated sign-up pages
@plexusone/pages	Pre-built pages
@plexusone/shell	Application shell
@plexusone/telemetry	Event instrumentation
@plexusone/tenant	Multi-tenant context
@plexusone/ui	UI components

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>
  );
}

Invite-gated sign-up

@plexusone/invites adds the pages for launching invite-only with SystemForge: operators issue invite codes and email invites and work through the waitlist, and members invite people from their allowance.

import { createInvitesApi, InviteAdminPage, InvitePeoplePage } from '@plexusone/invites';

const invites = createInvitesApi('/invites/api');

<Route path="/invite" element={<InvitePeoplePage api={invites} />} />
<Route path="/admin/invites" element={<InviteAdminPage api={invites} />} />

See Adding invite pages.

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