@sanity/sdk-react 0.0.0-alpha.8 → 0.0.0-chore-react-18-compat.0
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 +33 -126
- package/dist/index.d.ts +4811 -2
- package/dist/index.js +1069 -2
- package/dist/index.js.map +1 -1
- package/package.json +23 -45
- package/src/_exports/index.ts +66 -10
- package/src/components/Login/LoginLinks.test.tsx +90 -0
- package/src/components/Login/LoginLinks.tsx +58 -0
- package/src/components/SDKProvider.test.tsx +79 -0
- package/src/components/SDKProvider.tsx +42 -0
- package/src/components/SanityApp.test.tsx +104 -2
- package/src/components/SanityApp.tsx +54 -17
- package/src/components/auth/AuthBoundary.test.tsx +4 -4
- package/src/components/auth/AuthBoundary.tsx +13 -3
- package/src/components/auth/Login.test.tsx +1 -1
- package/src/components/auth/Login.tsx +11 -26
- package/src/components/auth/LoginCallback.test.tsx +3 -3
- package/src/components/auth/LoginCallback.tsx +8 -11
- package/src/components/auth/LoginError.tsx +12 -8
- package/src/components/auth/LoginFooter.tsx +13 -20
- package/src/components/auth/LoginLayout.tsx +8 -9
- package/src/components/auth/authTestHelpers.tsx +1 -8
- package/src/components/utils.ts +22 -0
- package/src/context/SanityInstanceContext.ts +4 -0
- package/src/context/SanityProvider.test.tsx +1 -1
- package/src/context/SanityProvider.tsx +10 -8
- package/src/hooks/_synchronous-groq-js.mjs +4 -0
- package/src/hooks/auth/useAuthState.tsx +0 -2
- package/src/hooks/auth/useCurrentUser.tsx +27 -20
- package/src/hooks/auth/useDashboardOrganizationId.test.tsx +42 -0
- package/src/hooks/auth/useDashboardOrganizationId.tsx +29 -0
- package/src/hooks/auth/useHandleAuthCallback.test.tsx +16 -0
- package/src/hooks/auth/{useHandleCallback.tsx → useHandleAuthCallback.tsx} +6 -6
- package/src/hooks/auth/useLogOut.test.tsx +2 -2
- package/src/hooks/client/useClient.ts +9 -30
- package/src/hooks/comlink/useFrameConnection.test.tsx +55 -10
- package/src/hooks/comlink/useFrameConnection.ts +39 -43
- package/src/hooks/comlink/useManageFavorite.test.ts +111 -0
- package/src/hooks/comlink/useManageFavorite.ts +130 -0
- package/src/hooks/comlink/useRecordDocumentHistoryEvent.test.ts +81 -0
- package/src/hooks/comlink/useRecordDocumentHistoryEvent.ts +106 -0
- package/src/hooks/comlink/useWindowConnection.test.ts +53 -12
- package/src/hooks/comlink/useWindowConnection.ts +69 -29
- package/src/hooks/context/useSanityInstance.test.tsx +1 -1
- package/src/hooks/context/useSanityInstance.ts +21 -5
- package/src/hooks/dashboard/useNavigateToStudioDocument.test.ts +178 -0
- package/src/hooks/dashboard/useNavigateToStudioDocument.ts +123 -0
- package/src/hooks/dashboard/useStudioWorkspacesByResourceId.test.tsx +278 -0
- package/src/hooks/dashboard/useStudioWorkspacesByResourceId.ts +92 -0
- package/src/hooks/datasets/useDatasets.ts +40 -0
- package/src/hooks/document/useApplyDocumentActions.test.ts +25 -0
- package/src/hooks/document/useApplyDocumentActions.ts +75 -0
- package/src/hooks/document/useDocument.test.ts +81 -0
- package/src/hooks/document/useDocument.ts +107 -0
- package/src/hooks/document/useDocumentEvent.test.ts +63 -0
- package/src/hooks/document/useDocumentEvent.ts +54 -0
- package/src/hooks/document/useDocumentPermissions.ts +84 -0
- package/src/hooks/document/useDocumentSyncStatus.test.ts +16 -0
- package/src/hooks/document/useDocumentSyncStatus.ts +33 -0
- package/src/hooks/document/useEditDocument.test.ts +179 -0
- package/src/hooks/document/useEditDocument.ts +195 -0
- package/src/hooks/documents/useDocuments.test.tsx +152 -0
- package/src/hooks/documents/useDocuments.ts +174 -0
- package/src/hooks/helpers/createCallbackHook.tsx +3 -2
- package/src/hooks/helpers/createStateSourceHook.test.tsx +66 -0
- package/src/hooks/helpers/createStateSourceHook.tsx +29 -10
- package/src/hooks/paginatedDocuments/usePaginatedDocuments.test.tsx +259 -0
- package/src/hooks/paginatedDocuments/usePaginatedDocuments.ts +290 -0
- package/src/hooks/preview/usePreview.test.tsx +6 -6
- package/src/hooks/preview/usePreview.tsx +12 -9
- package/src/hooks/projection/useProjection.test.tsx +218 -0
- package/src/hooks/projection/useProjection.ts +147 -0
- package/src/hooks/projects/useProject.ts +48 -0
- package/src/hooks/projects/useProjects.ts +45 -0
- package/src/hooks/query/useQuery.test.tsx +188 -0
- package/src/hooks/query/useQuery.ts +103 -0
- package/src/hooks/users/useUsers.test.ts +163 -0
- package/src/hooks/users/useUsers.ts +107 -0
- package/src/utils/getEnv.ts +21 -0
- package/src/version.ts +8 -0
- package/dist/_chunks-es/context.js +0 -8
- package/dist/_chunks-es/context.js.map +0 -1
- package/dist/_chunks-es/useLogOut.js +0 -44
- package/dist/_chunks-es/useLogOut.js.map +0 -1
- package/dist/components.d.ts +0 -111
- package/dist/components.js +0 -153
- package/dist/components.js.map +0 -1
- package/dist/context.d.ts +0 -45
- package/dist/context.js +0 -5
- package/dist/context.js.map +0 -1
- package/dist/hooks.d.ts +0 -3485
- package/dist/hooks.js +0 -167
- package/dist/hooks.js.map +0 -1
- package/src/_exports/components.ts +0 -2
- package/src/_exports/context.ts +0 -2
- package/src/_exports/hooks.ts +0 -27
- package/src/hooks/auth/useHandleCallback.test.tsx +0 -16
- package/src/hooks/client/useClient.test.tsx +0 -130
- package/src/hooks/documentCollection/useDocuments.test.ts +0 -130
- package/src/hooks/documentCollection/useDocuments.ts +0 -135
|
@@ -0,0 +1,103 @@
|
|
|
1
|
+
import {
|
|
2
|
+
getQueryKey,
|
|
3
|
+
getQueryState,
|
|
4
|
+
parseQueryKey,
|
|
5
|
+
type QueryOptions,
|
|
6
|
+
resolveQuery,
|
|
7
|
+
} from '@sanity/sdk'
|
|
8
|
+
import {useEffect, useMemo, useState, useSyncExternalStore, useTransition} from 'react'
|
|
9
|
+
|
|
10
|
+
import {useSanityInstance} from '../context/useSanityInstance'
|
|
11
|
+
|
|
12
|
+
/**
|
|
13
|
+
* Executes GROQ queries against a Sanity dataset.
|
|
14
|
+
*
|
|
15
|
+
* This hook provides a convenient way to fetch and subscribe to real-time updates
|
|
16
|
+
* for your Sanity content. Changes made to the dataset’s content will trigger
|
|
17
|
+
* automatic updates.
|
|
18
|
+
*
|
|
19
|
+
* @remarks
|
|
20
|
+
* The returned `isPending` flag indicates when a React transition is in progress,
|
|
21
|
+
* which can be used to show loading states for query changes.
|
|
22
|
+
*
|
|
23
|
+
* @beta
|
|
24
|
+
* @category GROQ
|
|
25
|
+
* @param query - GROQ query string to execute
|
|
26
|
+
* @param options - Optional configuration for the query
|
|
27
|
+
* @returns Object containing the query result and a pending state flag
|
|
28
|
+
*
|
|
29
|
+
* @example Basic usage
|
|
30
|
+
* ```tsx
|
|
31
|
+
* const {data, isPending} = useQuery<Movie[]>('*[_type == "movie"]')
|
|
32
|
+
* ```
|
|
33
|
+
*
|
|
34
|
+
* @example Using parameters
|
|
35
|
+
* ```tsx
|
|
36
|
+
* // With parameters
|
|
37
|
+
* const {data} = useQuery<Movie>('*[_type == "movie" && _id == $id][0]', {
|
|
38
|
+
* params: { id: 'movie-123' }
|
|
39
|
+
* })
|
|
40
|
+
* ```
|
|
41
|
+
*
|
|
42
|
+
* @example With a loading state for transitions
|
|
43
|
+
* ```tsx
|
|
44
|
+
* const {data, isPending} = useQuery<Movie[]>('*[_type == "movie"]')
|
|
45
|
+
* return (
|
|
46
|
+
* <div>
|
|
47
|
+
* {isPending && <div>Updating...</div>}
|
|
48
|
+
* <ul>
|
|
49
|
+
* {data.map(movie => <li key={movie._id}>{movie.title}</li>)}
|
|
50
|
+
* </ul>
|
|
51
|
+
* </div>
|
|
52
|
+
* )
|
|
53
|
+
* ```
|
|
54
|
+
*
|
|
55
|
+
*/
|
|
56
|
+
export function useQuery<T>(query: string, options?: QueryOptions): {data: T; isPending: boolean} {
|
|
57
|
+
const instance = useSanityInstance(options?.resourceId)
|
|
58
|
+
// Use React's useTransition to avoid UI jank when queries change
|
|
59
|
+
const [isPending, startTransition] = useTransition()
|
|
60
|
+
|
|
61
|
+
// Get the unique key for this query and its options
|
|
62
|
+
const queryKey = getQueryKey(query, options)
|
|
63
|
+
// Use a deferred state to avoid immediate re-renders when the query changes
|
|
64
|
+
const [deferredQueryKey, setDeferredQueryKey] = useState(queryKey)
|
|
65
|
+
// Parse the deferred query key back into a query and options
|
|
66
|
+
const deferred = useMemo(() => parseQueryKey(deferredQueryKey), [deferredQueryKey])
|
|
67
|
+
|
|
68
|
+
// Create an AbortController to cancel in-flight requests when needed
|
|
69
|
+
const [ref, setRef] = useState<AbortController>(new AbortController())
|
|
70
|
+
|
|
71
|
+
// When the query or options change, start a transition to update the query
|
|
72
|
+
useEffect(() => {
|
|
73
|
+
if (queryKey === deferredQueryKey) return
|
|
74
|
+
|
|
75
|
+
startTransition(() => {
|
|
76
|
+
// Abort any in-flight requests for the previous query
|
|
77
|
+
if (ref && !ref.signal.aborted) {
|
|
78
|
+
ref.abort()
|
|
79
|
+
setRef(new AbortController())
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
setDeferredQueryKey(queryKey)
|
|
83
|
+
})
|
|
84
|
+
}, [deferredQueryKey, queryKey, ref])
|
|
85
|
+
|
|
86
|
+
// Get the state source for this query from the query store
|
|
87
|
+
const {getCurrent, subscribe} = useMemo(
|
|
88
|
+
() => getQueryState(instance, deferred.query, deferred.options),
|
|
89
|
+
[instance, deferred],
|
|
90
|
+
)
|
|
91
|
+
|
|
92
|
+
// If data isn't available yet, suspend rendering until it is
|
|
93
|
+
// This is the React Suspense integration - throwing a promise
|
|
94
|
+
// will cause React to show the nearest Suspense fallback
|
|
95
|
+
if (getCurrent() === undefined) {
|
|
96
|
+
throw resolveQuery(instance, deferred.query, {...deferred.options, signal: ref.signal})
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
// Subscribe to updates and get the current data
|
|
100
|
+
// useSyncExternalStore ensures the component re-renders when the data changes
|
|
101
|
+
const data = useSyncExternalStore(subscribe, getCurrent) as T
|
|
102
|
+
return {data, isPending}
|
|
103
|
+
}
|
|
@@ -0,0 +1,163 @@
|
|
|
1
|
+
import {createUsersStore, type ResourceType, type SanityUser} from '@sanity/sdk'
|
|
2
|
+
import {act, renderHook} from '@testing-library/react'
|
|
3
|
+
import {afterEach, beforeEach, describe, expect, it, vi} from 'vitest'
|
|
4
|
+
|
|
5
|
+
import {useSanityInstance} from '../context/useSanityInstance'
|
|
6
|
+
import {useUsers} from './useUsers'
|
|
7
|
+
|
|
8
|
+
vi.mock('@sanity/sdk')
|
|
9
|
+
vi.mock('../context/useSanityInstance')
|
|
10
|
+
|
|
11
|
+
describe('useUsers', () => {
|
|
12
|
+
const mockInstance = {}
|
|
13
|
+
const mockUser: SanityUser = {
|
|
14
|
+
profile: {
|
|
15
|
+
id: 'user1',
|
|
16
|
+
displayName: 'Test User',
|
|
17
|
+
email: 'test@test.com',
|
|
18
|
+
provider: 'test',
|
|
19
|
+
createdAt: '2021-01-01',
|
|
20
|
+
},
|
|
21
|
+
sanityUserId: 'user1',
|
|
22
|
+
memberships: [],
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
const getCurrent = vi.fn().mockReturnValue({
|
|
26
|
+
users: [],
|
|
27
|
+
totalCount: 0,
|
|
28
|
+
nextCursor: null,
|
|
29
|
+
hasMore: false,
|
|
30
|
+
initialFetchCompleted: false,
|
|
31
|
+
options: {
|
|
32
|
+
resourceType: '' as ResourceType,
|
|
33
|
+
resourceId: '',
|
|
34
|
+
limit: 100,
|
|
35
|
+
},
|
|
36
|
+
})
|
|
37
|
+
const unsubscribe = vi.fn()
|
|
38
|
+
const subscribe = vi.fn().mockReturnValue(unsubscribe)
|
|
39
|
+
const dispose = vi.fn()
|
|
40
|
+
|
|
41
|
+
const mockUsersStore: ReturnType<typeof createUsersStore> = {
|
|
42
|
+
setOptions: vi.fn(),
|
|
43
|
+
loadMore: vi.fn(),
|
|
44
|
+
resolveUsers: vi.fn(),
|
|
45
|
+
getState: vi.fn().mockReturnValue({getCurrent, subscribe}),
|
|
46
|
+
dispose,
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
beforeEach(() => {
|
|
50
|
+
vi.mocked(useSanityInstance).mockReturnValue(
|
|
51
|
+
mockInstance as unknown as ReturnType<typeof useSanityInstance>,
|
|
52
|
+
)
|
|
53
|
+
vi.mocked(createUsersStore).mockReturnValue(
|
|
54
|
+
mockUsersStore as unknown as ReturnType<typeof createUsersStore>,
|
|
55
|
+
)
|
|
56
|
+
})
|
|
57
|
+
|
|
58
|
+
afterEach(() => {
|
|
59
|
+
vi.clearAllMocks()
|
|
60
|
+
})
|
|
61
|
+
|
|
62
|
+
it('should initialize with given params', () => {
|
|
63
|
+
renderHook(() =>
|
|
64
|
+
useUsers({
|
|
65
|
+
resourceType: 'project',
|
|
66
|
+
resourceId: 'proj1',
|
|
67
|
+
}),
|
|
68
|
+
)
|
|
69
|
+
|
|
70
|
+
expect(createUsersStore).toHaveBeenCalledWith(mockInstance)
|
|
71
|
+
expect(mockUsersStore.setOptions).toHaveBeenCalledWith({
|
|
72
|
+
resourceType: 'project',
|
|
73
|
+
resourceId: 'proj1',
|
|
74
|
+
})
|
|
75
|
+
})
|
|
76
|
+
|
|
77
|
+
it('should subscribe to users store changes', () => {
|
|
78
|
+
renderHook(() =>
|
|
79
|
+
useUsers({
|
|
80
|
+
resourceType: 'organization',
|
|
81
|
+
resourceId: 'org1',
|
|
82
|
+
}),
|
|
83
|
+
)
|
|
84
|
+
expect(subscribe).toHaveBeenCalledTimes(1)
|
|
85
|
+
})
|
|
86
|
+
|
|
87
|
+
it('should return current users state', () => {
|
|
88
|
+
const mockState = {users: [mockUser], hasMore: true}
|
|
89
|
+
getCurrent.mockReturnValue(mockState)
|
|
90
|
+
|
|
91
|
+
const {result} = renderHook(() =>
|
|
92
|
+
useUsers({
|
|
93
|
+
resourceType: 'project',
|
|
94
|
+
resourceId: 'proj1',
|
|
95
|
+
}),
|
|
96
|
+
)
|
|
97
|
+
expect(result.current).toMatchObject(mockState)
|
|
98
|
+
})
|
|
99
|
+
|
|
100
|
+
it('should call loadMore when loadMore is invoked', () => {
|
|
101
|
+
const {result} = renderHook(() =>
|
|
102
|
+
useUsers({
|
|
103
|
+
resourceType: 'project',
|
|
104
|
+
resourceId: 'proj1',
|
|
105
|
+
}),
|
|
106
|
+
)
|
|
107
|
+
|
|
108
|
+
act(() => {
|
|
109
|
+
result.current.loadMore()
|
|
110
|
+
})
|
|
111
|
+
|
|
112
|
+
expect(mockUsersStore.loadMore).toHaveBeenCalled()
|
|
113
|
+
})
|
|
114
|
+
|
|
115
|
+
it('should update options when params change', () => {
|
|
116
|
+
const initialParams = {resourceType: 'project' as ResourceType, resourceId: 'proj1'}
|
|
117
|
+
const {rerender} = renderHook(({params}) => useUsers(params), {
|
|
118
|
+
initialProps: {params: initialParams},
|
|
119
|
+
})
|
|
120
|
+
|
|
121
|
+
const newParams = {resourceType: 'organization' as ResourceType, resourceId: 'org1'}
|
|
122
|
+
rerender({params: newParams})
|
|
123
|
+
|
|
124
|
+
expect(mockUsersStore.setOptions).toHaveBeenCalledWith(newParams)
|
|
125
|
+
})
|
|
126
|
+
|
|
127
|
+
it('should resolve users if initial fetch not completed', () => {
|
|
128
|
+
getCurrent.mockReturnValue({initialFetchCompleted: false})
|
|
129
|
+
|
|
130
|
+
renderHook(() =>
|
|
131
|
+
useUsers({
|
|
132
|
+
resourceType: 'project',
|
|
133
|
+
resourceId: 'proj1',
|
|
134
|
+
}),
|
|
135
|
+
)
|
|
136
|
+
expect(mockUsersStore.resolveUsers).toHaveBeenCalled()
|
|
137
|
+
})
|
|
138
|
+
|
|
139
|
+
it('should not resolve users if initial fetch already completed', () => {
|
|
140
|
+
getCurrent.mockReturnValue({initialFetchCompleted: true})
|
|
141
|
+
|
|
142
|
+
renderHook(() =>
|
|
143
|
+
useUsers({
|
|
144
|
+
resourceType: 'project',
|
|
145
|
+
resourceId: 'proj1',
|
|
146
|
+
}),
|
|
147
|
+
)
|
|
148
|
+
expect(mockUsersStore.resolveUsers).not.toHaveBeenCalled()
|
|
149
|
+
})
|
|
150
|
+
|
|
151
|
+
it('should clean up store on unmount', () => {
|
|
152
|
+
const {unmount} = renderHook(() =>
|
|
153
|
+
useUsers({
|
|
154
|
+
resourceType: 'project',
|
|
155
|
+
resourceId: 'proj1',
|
|
156
|
+
}),
|
|
157
|
+
)
|
|
158
|
+
|
|
159
|
+
unmount()
|
|
160
|
+
expect(mockUsersStore.dispose).toHaveBeenCalled()
|
|
161
|
+
expect(unsubscribe).toHaveBeenCalled()
|
|
162
|
+
})
|
|
163
|
+
})
|
|
@@ -0,0 +1,107 @@
|
|
|
1
|
+
import {createUsersStore, type ResourceType, type SanityUser} from '@sanity/sdk'
|
|
2
|
+
import {useCallback, useEffect, useState, useSyncExternalStore} from 'react'
|
|
3
|
+
|
|
4
|
+
import {useSanityInstance} from '../context/useSanityInstance'
|
|
5
|
+
|
|
6
|
+
/**
|
|
7
|
+
* @public
|
|
8
|
+
* @category Types
|
|
9
|
+
*/
|
|
10
|
+
export interface UseUsersParams {
|
|
11
|
+
/**
|
|
12
|
+
* The type of resource to fetch users for.
|
|
13
|
+
*/
|
|
14
|
+
resourceType: ResourceType
|
|
15
|
+
/**
|
|
16
|
+
* The ID of the resource to fetch users for.
|
|
17
|
+
*/
|
|
18
|
+
resourceId: string
|
|
19
|
+
/**
|
|
20
|
+
* The limit of users to fetch.
|
|
21
|
+
*/
|
|
22
|
+
limit?: number
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
/**
|
|
26
|
+
* @public
|
|
27
|
+
* @category Types
|
|
28
|
+
*/
|
|
29
|
+
export interface UseUsersResult {
|
|
30
|
+
/**
|
|
31
|
+
* The users fetched.
|
|
32
|
+
*/
|
|
33
|
+
users: SanityUser[]
|
|
34
|
+
/**
|
|
35
|
+
* Whether there are more users to fetch.
|
|
36
|
+
*/
|
|
37
|
+
hasMore: boolean
|
|
38
|
+
/**
|
|
39
|
+
* Load more users.
|
|
40
|
+
*/
|
|
41
|
+
loadMore: () => void
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
/**
|
|
45
|
+
*
|
|
46
|
+
* @public
|
|
47
|
+
*
|
|
48
|
+
* Retrieves the users for a given resource (either a project or an organization).
|
|
49
|
+
*
|
|
50
|
+
* @category Users
|
|
51
|
+
* @param params - The resource type and its ID, and the limit of users to fetch
|
|
52
|
+
* @returns A list of users, a boolean indicating whether there are more users to fetch, and a function to load more users
|
|
53
|
+
*
|
|
54
|
+
* @example
|
|
55
|
+
* ```
|
|
56
|
+
* const { users, hasMore, loadMore } = useUsers({
|
|
57
|
+
* resourceType: 'organization',
|
|
58
|
+
* resourceId: 'my-org-id',
|
|
59
|
+
* limit: 10,
|
|
60
|
+
* })
|
|
61
|
+
*
|
|
62
|
+
* return (
|
|
63
|
+
* <div>
|
|
64
|
+
* {users.map(user => (
|
|
65
|
+
* <figure key={user.sanityUserId}>
|
|
66
|
+
* <img src={user.profile.imageUrl} alt='' />
|
|
67
|
+
* <figcaption>{user.profile.displayName}</figcaption>
|
|
68
|
+
* <address>{user.profile.email}</address>
|
|
69
|
+
* </figure>
|
|
70
|
+
* ))}
|
|
71
|
+
* {hasMore && <button onClick={loadMore}>Load More</button>}
|
|
72
|
+
* </div>
|
|
73
|
+
* )
|
|
74
|
+
* ```
|
|
75
|
+
*/
|
|
76
|
+
export function useUsers(params: UseUsersParams): UseUsersResult {
|
|
77
|
+
const instance = useSanityInstance(params.resourceId)
|
|
78
|
+
const [store] = useState(() => createUsersStore(instance))
|
|
79
|
+
|
|
80
|
+
useEffect(() => {
|
|
81
|
+
store.setOptions({
|
|
82
|
+
resourceType: params.resourceType,
|
|
83
|
+
resourceId: params.resourceId,
|
|
84
|
+
})
|
|
85
|
+
}, [params.resourceType, params.resourceId, store])
|
|
86
|
+
|
|
87
|
+
const subscribe = useCallback(
|
|
88
|
+
(onStoreChanged: () => void) => {
|
|
89
|
+
if (store.getState().getCurrent().initialFetchCompleted === false) {
|
|
90
|
+
store.resolveUsers()
|
|
91
|
+
}
|
|
92
|
+
const unsubscribe = store.getState().subscribe(onStoreChanged)
|
|
93
|
+
|
|
94
|
+
return () => {
|
|
95
|
+
unsubscribe()
|
|
96
|
+
store.dispose()
|
|
97
|
+
}
|
|
98
|
+
},
|
|
99
|
+
[store],
|
|
100
|
+
)
|
|
101
|
+
|
|
102
|
+
const getSnapshot = useCallback(() => store.getState().getCurrent(), [store])
|
|
103
|
+
|
|
104
|
+
const {users, hasMore} = useSyncExternalStore(subscribe, getSnapshot) || {}
|
|
105
|
+
|
|
106
|
+
return {users, hasMore, loadMore: store.loadMore}
|
|
107
|
+
}
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
// Local type declaration for Remix
|
|
2
|
+
type WindowWithEnv = Window &
|
|
3
|
+
typeof globalThis & {
|
|
4
|
+
ENV?: Record<string, unknown>
|
|
5
|
+
}
|
|
6
|
+
|
|
7
|
+
type KnownEnvVar = 'DEV' | 'PKG_VERSION'
|
|
8
|
+
|
|
9
|
+
export function getEnv(key: KnownEnvVar): unknown {
|
|
10
|
+
if (typeof import.meta !== 'undefined' && import.meta.env) {
|
|
11
|
+
// Vite environment variables
|
|
12
|
+
return (import.meta.env as unknown as Record<string, unknown>)[key]
|
|
13
|
+
} else if (typeof process !== 'undefined' && process.env) {
|
|
14
|
+
// Node.js or server-side environment variables
|
|
15
|
+
return process.env[key]
|
|
16
|
+
} else if (typeof window !== 'undefined' && (window as WindowWithEnv).ENV) {
|
|
17
|
+
// Remix-style client-side environment variables
|
|
18
|
+
return (window as WindowWithEnv).ENV?.[key]
|
|
19
|
+
}
|
|
20
|
+
return undefined
|
|
21
|
+
}
|
package/src/version.ts
ADDED
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
import { jsx } from "react/jsx-runtime";
|
|
2
|
-
import { createContext } from "react";
|
|
3
|
-
const SanityInstanceContext = createContext(null), SanityProvider = ({ children, sanityInstance }) => /* @__PURE__ */ jsx(SanityInstanceContext.Provider, { value: sanityInstance, children });
|
|
4
|
-
export {
|
|
5
|
-
SanityInstanceContext,
|
|
6
|
-
SanityProvider
|
|
7
|
-
};
|
|
8
|
-
//# sourceMappingURL=context.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"context.js","sources":["../../src/context/SanityProvider.tsx"],"sourcesContent":["import {type SanityInstance} from '@sanity/sdk'\nimport {createContext, type ReactElement} from 'react'\n\n/**\n * @public\n */\nexport interface SanityProviderProps {\n children: React.ReactNode\n sanityInstance: SanityInstance\n}\n\nexport const SanityInstanceContext = createContext<SanityInstance | null>(null)\n\n/**\n * Top-level context provider that provides access to the Sanity configuration instance.\n * This must wrap any components making use of the Sanity SDK React hooks.\n * @remarks In most cases, SanityApp should be used rather than SanityProvider directly; SanityApp bundles both SanityProvider and an authentication layer.\n * @internal\n * @param props - Sanity project and dataset configuration\n * @returns Rendered component\n * @example\n * ```tsx\n * import {createSanityInstance} from '@sanity/sdk'\n * import {SanityProvider} from '@sanity/sdk-react'\n *\n * import MyAppRoot from './Root'\n *\n * const sanityInstance = createSanityInstance({\n * projectId: 'your-project-id',\n * dataset: 'production',\n * })\n *\n * export default function MyApp() {\n * return (\n * <SanityProvider sanityInstance={sanityInstance}>\n * <MyAppRoot />\n * </SanityProvider>\n * )\n * }\n * ```\n */\nexport const SanityProvider = ({children, sanityInstance}: SanityProviderProps): ReactElement => {\n return (\n <SanityInstanceContext.Provider value={sanityInstance}>\n {children}\n </SanityInstanceContext.Provider>\n )\n}\n"],"names":[],"mappings":";;AAWO,MAAM,wBAAwB,cAAqC,IAAI,GA8BjE,iBAAiB,CAAC,EAAC,UAAU,eAAc,0BAEnD,sBAAsB,UAAtB,EAA+B,OAAO,gBACpC,SACH,CAAA;"}
|
|
@@ -1,44 +0,0 @@
|
|
|
1
|
-
import { getAuthState, handleCallback, getLoginUrlsState, fetchLoginUrls, logout } from "@sanity/sdk";
|
|
2
|
-
import { useContext, useMemo, useSyncExternalStore, useCallback } from "react";
|
|
3
|
-
import { SanityInstanceContext } from "./context.js";
|
|
4
|
-
const useSanityInstance = () => {
|
|
5
|
-
const sanityInstance = useContext(SanityInstanceContext);
|
|
6
|
-
if (!sanityInstance)
|
|
7
|
-
throw new Error("useSanityInstance must be called from within the SanityProvider");
|
|
8
|
-
return sanityInstance;
|
|
9
|
-
};
|
|
10
|
-
function createStateSourceHook(stateSourceFactory) {
|
|
11
|
-
function useHook(...params) {
|
|
12
|
-
const instance = useSanityInstance(), { subscribe, getCurrent } = useMemo(
|
|
13
|
-
() => stateSourceFactory(instance, ...params),
|
|
14
|
-
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
15
|
-
[instance, ...params]
|
|
16
|
-
);
|
|
17
|
-
return useSyncExternalStore(subscribe, getCurrent);
|
|
18
|
-
}
|
|
19
|
-
return useHook;
|
|
20
|
-
}
|
|
21
|
-
const useAuthState = createStateSourceHook(getAuthState);
|
|
22
|
-
function createCallbackHook(callback) {
|
|
23
|
-
function useHook() {
|
|
24
|
-
const instance = useSanityInstance();
|
|
25
|
-
return useCallback((...params) => callback(instance, ...params), [instance]);
|
|
26
|
-
}
|
|
27
|
-
return useHook;
|
|
28
|
-
}
|
|
29
|
-
const useHandleCallback = createCallbackHook(handleCallback);
|
|
30
|
-
function useLoginUrls() {
|
|
31
|
-
const instance = useSanityInstance(), { subscribe, getCurrent } = useMemo(() => getLoginUrlsState(instance), [instance]);
|
|
32
|
-
if (!getCurrent()) throw fetchLoginUrls(instance);
|
|
33
|
-
return useSyncExternalStore(subscribe, getCurrent);
|
|
34
|
-
}
|
|
35
|
-
const useLogOut = createCallbackHook(logout);
|
|
36
|
-
export {
|
|
37
|
-
createStateSourceHook,
|
|
38
|
-
useAuthState,
|
|
39
|
-
useHandleCallback,
|
|
40
|
-
useLogOut,
|
|
41
|
-
useLoginUrls,
|
|
42
|
-
useSanityInstance
|
|
43
|
-
};
|
|
44
|
-
//# sourceMappingURL=useLogOut.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"useLogOut.js","sources":["../../src/hooks/context/useSanityInstance.ts","../../src/hooks/helpers/createStateSourceHook.tsx","../../src/hooks/auth/useAuthState.tsx","../../src/hooks/helpers/createCallbackHook.tsx","../../src/hooks/auth/useHandleCallback.tsx","../../src/hooks/auth/useLoginUrls.tsx","../../src/hooks/auth/useLogOut.tsx"],"sourcesContent":["import {type SanityInstance} from '@sanity/sdk'\nimport {useContext} from 'react'\n\nimport {SanityInstanceContext} from '../../context/SanityProvider'\n\n/**\n * `useSanityInstance` returns the current Sanity instance from the application context.\n * This must be called from within a `SanityProvider` component.\n * @public\n * @returns The current Sanity instance\n * @example\n * ```tsx\n * const instance = useSanityInstance()\n * ```\n */\nexport const useSanityInstance = (): SanityInstance => {\n const sanityInstance = useContext(SanityInstanceContext)\n if (!sanityInstance) {\n throw new Error('useSanityInstance must be called from within the SanityProvider')\n }\n\n return sanityInstance\n}\n","import {type SanityInstance, type StateSource} from '@sanity/sdk'\nimport {useMemo, useSyncExternalStore} from 'react'\n\nimport {useSanityInstance} from '../context/useSanityInstance'\n\nexport function createStateSourceHook<TParams extends unknown[], TState>(\n stateSourceFactory: (instance: SanityInstance, ...params: TParams) => StateSource<TState>,\n): (...params: TParams) => TState {\n function useHook(...params: TParams) {\n const instance = useSanityInstance()\n const {subscribe, getCurrent} = useMemo(\n () => stateSourceFactory(instance, ...params),\n // eslint-disable-next-line react-hooks/exhaustive-deps\n [instance, ...params],\n )\n\n return useSyncExternalStore(subscribe, getCurrent)\n }\n\n return useHook\n}\n","import {type AuthState, getAuthState} from '@sanity/sdk'\n\nimport {createStateSourceHook} from '../helpers/createStateSourceHook'\n\n/**\n * @internal\n * A React hook that subscribes to authentication state changes.\n *\n * This hook provides access to the current authentication state type from the Sanity auth store.\n * It automatically re-renders when the authentication state changes.\n *\n * @remarks\n * The hook uses `useSyncExternalStore` to safely subscribe to auth state changes\n * and ensure consistency between server and client rendering.\n *\n * @returns The current authentication state type\n *\n * @example\n * ```tsx\n * function AuthStatus() {\n * const authState = useAuthState()\n * return <div>Current auth state: {authState}</div>\n * }\n * ```\n *\n * @public\n */\nexport const useAuthState: () => AuthState = createStateSourceHook(getAuthState)\n","import {type SanityInstance} from '@sanity/sdk'\nimport {useCallback} from 'react'\n\nimport {useSanityInstance} from '../context/useSanityInstance'\n\nexport function createCallbackHook<TParams extends unknown[], TReturn>(\n callback: (instance: SanityInstance, ...params: TParams) => TReturn,\n): () => (...params: TParams) => TReturn {\n function useHook() {\n const instance = useSanityInstance()\n return useCallback((...params: TParams) => callback(instance, ...params), [instance])\n }\n\n return useHook\n}\n","import {handleCallback} from '@sanity/sdk'\n\nimport {createCallbackHook} from '../helpers/createCallbackHook'\n\n/**\n * @internal\n * A React hook that returns a function for handling authentication callbacks.\n *\n * @remarks\n * This hook provides access to the authentication store's callback handler,\n * which processes auth redirects by extracting the session ID and fetching the\n * authentication token. If fetching the long-lived token is successful,\n * `handleCallback` will return a Promise that resolves a new location that\n * removes the short-lived token from the URL. Use this in combination with\n * `history.replaceState` or your own router's `replace` function to update the\n * current location without triggering a reload.\n *\n * @example\n * ```tsx\n * function AuthCallback() {\n * const handleCallback = useHandleCallback()\n * const router = useRouter() // Example router\n *\n * useEffect(() => {\n * async function processCallback() {\n * // Handle the callback and get the cleaned URL\n * const newUrl = await handleCallback(window.location.href)\n *\n * if (newUrl) {\n * // Replace URL without triggering navigation\n * router.replace(newUrl, {shallow: true})\n * }\n * }\n *\n * processCallback().catch(console.error)\n * }, [handleCallback, router])\n *\n * return <div>Completing login...</div>\n * }\n * ```\n *\n * @returns A callback handler function that processes OAuth redirects\n * @public\n */\nexport const useHandleCallback = createCallbackHook(handleCallback)\n","import {type AuthProvider, fetchLoginUrls, getLoginUrlsState} from '@sanity/sdk'\nimport {useMemo, useSyncExternalStore} from 'react'\n\nimport {useSanityInstance} from '../context/useSanityInstance'\n\n/**\n * @internal\n * A React hook that retrieves the available authentication provider URLs for login.\n *\n * @remarks\n * This hook fetches the login URLs from the Sanity auth store when the component mounts.\n * Each provider object contains information about an authentication method, including its URL.\n * The hook will suspend if the login URLs have not yet loaded.\n *\n * @example\n * ```tsx\n * // LoginProviders component that uses the hook\n * function LoginProviders() {\n * const providers = useLoginUrls()\n *\n * return (\n * <div>\n * {providers.map((provider) => (\n * <a key={provider.name} href={provider.url}>\n * Login with {provider.title}\n * </a>\n * ))}\n * </div>\n * )\n * }\n *\n * // Parent component with Suspense boundary\n * function LoginPage() {\n * return (\n * <Suspense fallback={<div>Loading authentication providers...</div>}>\n * <LoginProviders />\n * </Suspense>\n * )\n * }\n * ```\n *\n * @returns An array of {@link AuthProvider} objects containing login URLs and provider information\n * @public\n */\nexport function useLoginUrls(): AuthProvider[] {\n const instance = useSanityInstance()\n const {subscribe, getCurrent} = useMemo(() => getLoginUrlsState(instance), [instance])\n\n if (!getCurrent()) throw fetchLoginUrls(instance)\n\n return useSyncExternalStore(subscribe, getCurrent as () => AuthProvider[])\n}\n","import {logout} from '@sanity/sdk'\n\nimport {createCallbackHook} from '../helpers/createCallbackHook'\n\n/**\n * Hook to log out of the current session\n * @internal\n * @returns A function to log out of the current session\n */\nexport const useLogOut = createCallbackHook(logout)\n"],"names":[],"mappings":";;;AAeO,MAAM,oBAAoB,MAAsB;AAC/C,QAAA,iBAAiB,WAAW,qBAAqB;AACvD,MAAI,CAAC;AACG,UAAA,IAAI,MAAM,iEAAiE;AAG5E,SAAA;AACT;ACjBO,SAAS,sBACd,oBACgC;AAChC,WAAS,WAAW,QAAiB;AACnC,UAAM,WAAW,kBAAkB,GAC7B,EAAC,WAAW,WAAc,IAAA;AAAA,MAC9B,MAAM,mBAAmB,UAAU,GAAG,MAAM;AAAA;AAAA,MAE5C,CAAC,UAAU,GAAG,MAAM;AAAA,IACtB;AAEO,WAAA,qBAAqB,WAAW,UAAU;AAAA,EAAA;AAG5C,SAAA;AACT;ACOa,MAAA,eAAgC,sBAAsB,YAAY;ACtBxE,SAAS,mBACd,UACuC;AACvC,WAAS,UAAU;AACjB,UAAM,WAAW,kBAAkB;AAC5B,WAAA,YAAY,IAAI,WAAoB,SAAS,UAAU,GAAG,MAAM,GAAG,CAAC,QAAQ,CAAC;AAAA,EAAA;AAG/E,SAAA;AACT;AC8Ba,MAAA,oBAAoB,mBAAmB,cAAc;ACA3D,SAAS,eAA+B;AAC7C,QAAM,WAAW,qBACX,EAAC,WAAW,WAAU,IAAI,QAAQ,MAAM,kBAAkB,QAAQ,GAAG,CAAC,QAAQ,CAAC;AAErF,MAAI,CAAC,WAAA,EAAc,OAAM,eAAe,QAAQ;AAEzC,SAAA,qBAAqB,WAAW,UAAkC;AAC3E;AC1Ca,MAAA,YAAY,mBAAmB,MAAM;"}
|
package/dist/components.d.ts
DELETED
|
@@ -1,111 +0,0 @@
|
|
|
1
|
-
import {FallbackProps} from 'react-error-boundary'
|
|
2
|
-
import {ReactElement} from 'react'
|
|
3
|
-
import {SanityConfig} from '@sanity/sdk'
|
|
4
|
-
|
|
5
|
-
/**
|
|
6
|
-
* A component that handles authentication flow and error boundaries for a
|
|
7
|
-
* protected section of the application.
|
|
8
|
-
*
|
|
9
|
-
* @remarks
|
|
10
|
-
* This component manages different authentication states and renders the
|
|
11
|
-
* appropriate components based on that state.
|
|
12
|
-
*
|
|
13
|
-
* @example
|
|
14
|
-
* ```tsx
|
|
15
|
-
* function App() {
|
|
16
|
-
* return (
|
|
17
|
-
* <AuthBoundary header={<MyLogo />}>
|
|
18
|
-
* <ProtectedContent />
|
|
19
|
-
* </AuthBoundary>
|
|
20
|
-
* )
|
|
21
|
-
* }
|
|
22
|
-
* ```
|
|
23
|
-
*
|
|
24
|
-
* @internal
|
|
25
|
-
*/
|
|
26
|
-
export declare function AuthBoundary({
|
|
27
|
-
LoginErrorComponent,
|
|
28
|
-
...props
|
|
29
|
-
}: AuthBoundaryProps): React.ReactNode
|
|
30
|
-
|
|
31
|
-
/**
|
|
32
|
-
* @internal
|
|
33
|
-
*/
|
|
34
|
-
declare interface AuthBoundaryProps extends LoginLayoutProps {
|
|
35
|
-
/**
|
|
36
|
-
* Custom component to render the login screen.
|
|
37
|
-
* Receives all login layout props. Defaults to {@link Login}.
|
|
38
|
-
*/
|
|
39
|
-
LoginComponent?: React.ComponentType<LoginLayoutProps>
|
|
40
|
-
/**
|
|
41
|
-
* Custom component to render during OAuth callback processing.
|
|
42
|
-
* Receives all login layout props. Defaults to {@link LoginCallback}.
|
|
43
|
-
*/
|
|
44
|
-
CallbackComponent?: React.ComponentType<LoginLayoutProps>
|
|
45
|
-
/**
|
|
46
|
-
* Custom component to render when authentication errors occur.
|
|
47
|
-
* Receives login layout props and error boundary props. Defaults to
|
|
48
|
-
* {@link LoginError}
|
|
49
|
-
*/
|
|
50
|
-
LoginErrorComponent?: React.ComponentType<LoginErrorProps>
|
|
51
|
-
}
|
|
52
|
-
|
|
53
|
-
/**
|
|
54
|
-
* @alpha
|
|
55
|
-
*/
|
|
56
|
-
declare type LoginErrorProps = FallbackProps & LoginLayoutProps
|
|
57
|
-
|
|
58
|
-
/**
|
|
59
|
-
* @alpha
|
|
60
|
-
* @internal
|
|
61
|
-
*/
|
|
62
|
-
declare interface LoginLayoutProps {
|
|
63
|
-
/** Optional header content rendered at top of card */
|
|
64
|
-
header?: React.ReactNode
|
|
65
|
-
/** Optional footer content rendered below card. Defaults to an internal login footer */
|
|
66
|
-
footer?: React.ReactNode
|
|
67
|
-
/** Main content rendered in card body */
|
|
68
|
-
children?: React.ReactNode
|
|
69
|
-
}
|
|
70
|
-
|
|
71
|
-
/**
|
|
72
|
-
* @public
|
|
73
|
-
*
|
|
74
|
-
* The SanityApp component provides your Sanity application with access to your Sanity configuration,
|
|
75
|
-
* as well as application context and state which is used by the Sanity React hooks. Your application
|
|
76
|
-
* must be wrapped with the SanityApp component to function properly.
|
|
77
|
-
*
|
|
78
|
-
* @param props - Your Sanity configuration and the React children to render
|
|
79
|
-
* @returns Your Sanity application, integrated with your Sanity configuration and application context
|
|
80
|
-
*
|
|
81
|
-
* @example
|
|
82
|
-
* ```
|
|
83
|
-
* import { SanityApp } from '@sanity/sdk-react
|
|
84
|
-
*
|
|
85
|
-
* import MyAppRoot from './Root'
|
|
86
|
-
*
|
|
87
|
-
* const mySanityConfig = {
|
|
88
|
-
* procectId: 'my-project-id',
|
|
89
|
-
* dataset: 'production',
|
|
90
|
-
* }
|
|
91
|
-
*
|
|
92
|
-
* export default function MyApp() {
|
|
93
|
-
* return (
|
|
94
|
-
* <SanityApp sanityConfig={mySanityConfig}>
|
|
95
|
-
* <MyAppRoot />
|
|
96
|
-
* </SanityApp>
|
|
97
|
-
* )
|
|
98
|
-
* }
|
|
99
|
-
* ```
|
|
100
|
-
*/
|
|
101
|
-
export declare function SanityApp({sanityConfig, children}: SanityAppProps): ReactElement
|
|
102
|
-
|
|
103
|
-
/**
|
|
104
|
-
* @public
|
|
105
|
-
*/
|
|
106
|
-
export declare interface SanityAppProps {
|
|
107
|
-
sanityConfig: SanityConfig
|
|
108
|
-
children: React.ReactNode
|
|
109
|
-
}
|
|
110
|
-
|
|
111
|
-
export {}
|