@streamoid/settings

Shared Settings module (Account, Workspace, Team, Billing, API Keys, Referral). The host application provides auth, workspace, API, navigation, toast, and image-upload implementations through a single adapter object — the package contains no host-specific code.

Install

npm install @streamoid/settings @streamoid/ui @streamoid/icons

react, react-dom, @streamoid/ui, and @streamoid/icons are peer deps.

Usage

import { SettingsContent, type SettingsAdapters } from "@streamoid/settings";

function MySettingsPage() {
  const adapters: SettingsAdapters = {
    auth: {
      user: currentUser,
      refreshProfile: async () => { /* ... */ },
      updateProfile: async (patch) => { /* PATCH /profile */ },
      clearAuth: () => { /* clear local auth state */ },
      logout: async () => { /* POST /logout */ },
    },
    workspace: {
      current: { id: currentWorkspaceId, name, role },
      list: async () => fetchWorkspaceList(),
      create: async ({ name, imageUrl }) => { /* POST /workspace */ },
      update: async (id, patch) => { /* PATCH /workspace/:id */ },
      switch: async (id) => { /* set active workspace */ },
      leave: async (id) => { /* DELETE /workspace/:id/leave */ },
      delete: async (id) => { /* DELETE /workspace/:id */ },
    },
    api: {
      fetchPlans: () => fetch("/billing/plans").then(r => r.json()),
      fetchCurrentPlan: () => fetch("/billing/subscription").then(r => r.json()),
      fetchCreditsUsage: async () => ({ used: 120, total: 500 }),
      fetchInvoices: () => fetch("/billing/invoices").then(r => r.json()),
      fetchUsageLogs: () => fetch("/billing/usage").then(r => r.json()),
      downloadInvoice: (id) => fetch(`/billing/invoices/${id}`).then(r => r.json()),
      exportAllInvoices: () => fetch(`/billing/invoices/export`).then(r => r.json()),
      buyCredits: ({ quantity }) => fetch("/billing/credits", { method: "POST", body: JSON.stringify({ quantity }) }),
      upgradePlan: (planId) => fetch(`/billing/upgrade/${planId}`, { method: "POST" }),
      fetchMembers: () => fetch("/team/members").then(r => r.json()),
      fetchPendingInvites: () => fetch("/team/invites").then(r => r.json()),
      inviteMember: ({ email, role }) => fetch("/team/invites", { method: "POST", body: JSON.stringify({ email, role }) }),
      updateMemberRole: (id, role) => fetch(`/team/members/${id}`, { method: "PATCH", body: JSON.stringify({ role }) }),
      removeMember: (id) => fetch(`/team/members/${id}`, { method: "DELETE" }).then(() => undefined),
      cancelInvite: (id) => fetch(`/team/invites/${id}`, { method: "DELETE" }).then(() => undefined),
      resendInvite: (id) => fetch(`/team/invites/${id}/resend`, { method: "POST" }).then(() => undefined),
      fetchTokens: () => fetch("/tokens").then(r => r.json()),
      createToken: ({ name, scopes, expiresAt }) => fetch("/tokens", { method: "POST", body: JSON.stringify({ name, scopes, expiresAt }) }).then(r => r.json()),
      revokeToken: (id) => fetch(`/tokens/${id}`, { method: "DELETE" }).then(() => undefined),
    },
    navigation: {
      navigateToTab: (tab) => router.push(`/settings/${TAB_TO_URL[tab]}`),
      openExternal: (url) => window.open(url, "_blank", "noopener"),
    },
    toast: {
      success: (msg) => toast.success(msg),
      error: (msg) => toast.error(msg),
      info: (msg) => toast(msg),
    },
    imageUpload: {
      upload: (file) => uploadToR2(file),
    },
  };

  return (
    <SettingsContent
      activeTab={resolveSettingsTabFromPath(location.pathname)}
      adapters={adapters}
    />
  );
}

Adapter surface

| Adapter | Purpose | |---|---| | auth | Current user + profile mutations + logout | | workspace | Current workspace + workspace CRUD + switch | | api | Billing, team management, and API token endpoints | | navigation | Imperative navigation between tabs and to external URLs | | toast | User-facing success / error / info notifications | | imageUpload | Single upload(file) for avatar / workspace image uploads |

See src/adapters.ts for full type definitions.

Status

• 0.1.0 — Adapter surface and package scaffold. Tab content lands in subsequent releases as files migrate from cxo-dashboard into the package.