@wacht/jsx 1.0.0-beta.3 → 1.0.0-beta.30
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +49 -27
- package/dist/index.cjs.js +6032 -4541
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.d.ts +307 -148
- package/dist/index.es.js +22753 -18306
- package/dist/index.es.js.map +1 -1
- package/package.json +3 -3
package/README.md
CHANGED
|
@@ -1,13 +1,21 @@
|
|
|
1
|
-
|
|
2
|
-
<a href="https://wacht.dev" style="text-decoration:none;">@wacht/jsx</a>
|
|
3
|
-
</h1>
|
|
1
|
+
# @wacht/jsx
|
|
4
2
|
|
|
5
|
-
|
|
3
|
+
Shared React components and hooks for building Wacht-powered product surfaces.
|
|
6
4
|
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
5
|
+
Use `@wacht/jsx` when you want the core Wacht React layer without committing to a framework adapter. If you are using Next.js, React Router, or TanStack Router, you will usually install the adapter package instead and import the same primitives from there.
|
|
6
|
+
|
|
7
|
+
- Docs: https://docs.wacht.dev
|
|
8
|
+
- npm: https://www.npmjs.com/package/@wacht/jsx
|
|
9
|
+
|
|
10
|
+
## What it includes
|
|
11
|
+
|
|
12
|
+
`@wacht/jsx` contains the shared client-side building blocks behind the framework adapters:
|
|
13
|
+
|
|
14
|
+
- auth UI such as `SignInForm`, `SignUpForm`, `WaitlistForm`, `SSOCallback`, and `MagicLinkVerification`
|
|
15
|
+
- control components such as `SignedIn`, `SignedOut`, `SignedInAccounts`, and `NavigateToSignIn`
|
|
16
|
+
- account and tenancy components such as `UserButton`, `UserControls`, `ManageAccount`, `ManageOrganization`, `ManageWorkspace`, `CreateOrganizationForm`, and `CreateWorkspaceForm`
|
|
17
|
+
- notifications components such as `NotificationBell`, `NotificationPopover`, and `NotificationPanel`
|
|
18
|
+
- shared hooks for auth, session state, multi-tenancy, notifications, agents, webhooks, and API identity
|
|
11
19
|
|
|
12
20
|
## Install
|
|
13
21
|
|
|
@@ -15,15 +23,23 @@
|
|
|
15
23
|
pnpm add @wacht/jsx @wacht/types
|
|
16
24
|
```
|
|
17
25
|
|
|
18
|
-
##
|
|
26
|
+
## Basic usage
|
|
19
27
|
|
|
20
28
|
```tsx
|
|
21
|
-
import {
|
|
22
|
-
|
|
23
|
-
|
|
29
|
+
import {
|
|
30
|
+
DeploymentProvider,
|
|
31
|
+
SignedIn,
|
|
32
|
+
SignedOut,
|
|
33
|
+
SignInForm,
|
|
34
|
+
} from "@wacht/jsx";
|
|
35
|
+
|
|
36
|
+
export default function App() {
|
|
24
37
|
return (
|
|
25
38
|
<DeploymentProvider publicKey={import.meta.env.VITE_WACHT_PUBLISHABLE_KEY}>
|
|
26
|
-
<SignedIn>
|
|
39
|
+
<SignedIn>
|
|
40
|
+
<div>Signed in</div>
|
|
41
|
+
</SignedIn>
|
|
42
|
+
|
|
27
43
|
<SignedOut>
|
|
28
44
|
<SignInForm />
|
|
29
45
|
</SignedOut>
|
|
@@ -32,26 +48,32 @@ export function App() {
|
|
|
32
48
|
}
|
|
33
49
|
```
|
|
34
50
|
|
|
35
|
-
##
|
|
51
|
+
## What `DeploymentProvider` does
|
|
52
|
+
|
|
53
|
+
`DeploymentProvider` is the shared root for the client SDK. It:
|
|
54
|
+
|
|
55
|
+
- resolves deployment configuration from the `publicKey`
|
|
56
|
+
- exposes deployment-aware client state to the hooks
|
|
57
|
+
- powers navigation-aware auth components through the platform adapter
|
|
58
|
+
- lets you override deployment UI settings with `uiOverrides` when you are embedding auth UI inside your own app
|
|
36
59
|
|
|
37
|
-
|
|
60
|
+
## Main hook families
|
|
38
61
|
|
|
39
|
-
-
|
|
40
|
-
-
|
|
41
|
-
-
|
|
42
|
-
-
|
|
62
|
+
- state and context: `useDeployment`, `useClient`, `useSession`, `useUser`, `useNavigation`
|
|
63
|
+
- auth flows: `useSignIn`, `useSignUp`, `useSSOCallback`, `useMagicLinkVerification`, `useForgotPassword`, `useInvitation`, `useWaitlist`, `useUserSignins`
|
|
64
|
+
- multi tenancy: `useOrganizationList`, `useActiveOrganization`, `useWorkspaceList`, `useActiveWorkspace`, `useActiveTenancy`, `useOrganizationMemberships`, `useWorkspaceMemberships`
|
|
65
|
+
- notifications: `useNotifications`, `useNotificationStream`, `useNotificationUnreadCount`
|
|
66
|
+
- platform surfaces: agent, webhook, and API identity hooks
|
|
43
67
|
|
|
44
|
-
|
|
68
|
+
## Framework adapters
|
|
45
69
|
|
|
46
|
-
|
|
47
|
-
- Tenancy: `useActiveOrganization`, `useActiveWorkspace`, `useActiveTenancy`
|
|
48
|
-
- Notifications: `useNotifications`, `useNotificationStream`, `useScopeUnread`
|
|
49
|
-
- Agent/webhook/api-auth surfaces: `useAgentSession`, `useWebhookEndpoints`, `useApiAuthKeys`, and related hooks
|
|
70
|
+
If you are already using one of the supported router integrations, prefer importing from the adapter package instead of `@wacht/jsx` directly:
|
|
50
71
|
|
|
51
|
-
|
|
72
|
+
- `@wacht/nextjs`
|
|
73
|
+
- `@wacht/react-router`
|
|
74
|
+
- `@wacht/tanstack-router`
|
|
52
75
|
|
|
53
|
-
-
|
|
54
|
-
- URL safety helpers
|
|
76
|
+
Those packages re-export the shared JSX layer and add the framework-specific provider and server helpers.
|
|
55
77
|
|
|
56
78
|
## Build
|
|
57
79
|
|