sanity-plugin-utils 0.0.1

package/src/components/UserSelectMenu/index.tsx

@@ -0,0 +1,133 @@
+import React, {useEffect, useRef} from 'react'
+import {Box, Text, Menu, MenuItem, TextInput, Flex, Badge} from '@sanity/ui'
+import {AddCircleIcon, RemoveCircleIcon, RestoreIcon} from '@sanity/icons'
+import {UserAvatar} from 'sanity/_unstable'
+
+import {UserExtended} from '../../hooks/useProjectUsers'
+
+function searchUsers(users: UserExtended[], searchString: string): UserExtended[] {
+  return users.filter((user) => {
+    const displayName = (user.displayName || '').toLowerCase()
+    if (displayName.startsWith(searchString)) return true
+    const givenName = (user.givenName || '').toLowerCase()
+    if (givenName.startsWith(searchString)) return true
+    const middleName = (user.middleName || '').toLowerCase()
+    if (middleName.startsWith(searchString)) return true
+    const familyName = (user.familyName || '').toLowerCase()
+    if (familyName.startsWith(searchString)) return true
+
+    return false
+  })
+}
+
+type UserSelectMenuProps = {
+  value: string[]
+  userList: UserExtended[]
+  onAdd: any
+  onRemove: any
+  onClear: any
+  open: boolean
+  style?: React.CSSProperties
+}
+
+export function UserSelectMenu(props: UserSelectMenuProps) {
+  const {value = [], userList = [], onAdd, onRemove, onClear, style = {}} = props
+  const [searchString, setSearchString] = React.useState('')
+  const searchResults = searchUsers(userList || [], searchString)
+
+  const me = userList.find((u) => u.isCurrentUser)
+  const meAssigned = me && value.includes(me.id)
+
+  // Focus input on open
+  // TODO: Fix focus, it gets immediately taken away
+  const input = useRef<HTMLInputElement>()
+  // useEffect(() => {
+  //   if (open && input?.current) {
+  //     input.current.focus()
+  //   }
+  // }, [open])
+
+  const handleSearchChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setSearchString(event.target.value)
+  }
+
+  const handleSelect = (isChecked: boolean, user: UserExtended) => {
+    if (!isChecked) {
+      if (onAdd) onAdd(user.id)
+    } else if (onRemove) onRemove(user.id)
+  }
+
+  const handleAssignMyself = () => {
+    if (me && onAdd) onAdd(me.id)
+  }
+
+  const handleUnassignMyself = () => {
+    if (me && onRemove) onRemove(me.id)
+  }
+
+  const handleClearAssigneesClick = () => {
+    if (onClear) onClear()
+  }
+
+  return (
+    <Menu style={style}>
+      {meAssigned ? (
+        <MenuItem
+          tone="caution"
+          disabled={!me}
+          onClick={handleUnassignMyself}
+          icon={RemoveCircleIcon}
+          text="Unassign myself"
+        />
+      ) : (
+        <MenuItem
+          tone="positive"
+          onClick={handleAssignMyself}
+          icon={AddCircleIcon}
+          text="Assign myself"
+        />
+      )}
+
+      <MenuItem
+        tone="critical"
+        disabled={value.length === 0}
+        onClick={handleClearAssigneesClick}
+        icon={RestoreIcon}
+        text="Clear assignees"
+      />
+
+      <Box padding={1}>
+        <TextInput
+          // @ts-ignore TODO: Satisfy ref
+          ref={input}
+          onChange={handleSearchChange}
+          placeholder="Search members"
+          value={searchString}
+        />
+      </Box>
+
+      {searchString && searchResults?.length === 0 && <MenuItem disabled text="No matches" />}
+
+      {searchResults &&
+        searchResults.map((user) => (
+          <MenuItem
+            key={user.id}
+            pressed={value.includes(user.id)}
+            onClick={() => handleSelect(value.indexOf(user.id) > -1, user)}
+          >
+            <Flex align="center">
+              <UserAvatar user={user} size={1} />
+              <Box paddingX={2} flex={1}>
+                <Text>{user.displayName}</Text>
+              </Box>
+              {user.isCurrentUser && (
+                <Badge fontSize={1} tone="positive" mode="outline">
+                  Me
+                </Badge>
+              )}
+            </Flex>
+          </MenuItem>
+        ))}
+    </Menu>
+  )
+}

package/src/hooks/useListeningQuery.tsx

@@ -0,0 +1,73 @@
+import {useEffect, useState, useRef} from 'react'
+import {catchError, distinctUntilChanged} from 'rxjs/operators'
+import isEqual from 'react-fast-compare'
+import {useDocumentStore} from 'sanity/_unstable'
+import {Subscription} from 'rxjs'
+
+type Params = Record<string, string | number | boolean | string[]>
+
+interface ListenQueryOptions {
+  tag?: string
+  apiVersion?: string
+}
+
+type Value = any
+
+interface Config<V> {
+  params: Params
+  options?: ListenQueryOptions
+  initialValue?: null | V
+}
+
+interface Return<V> {
+  loading: boolean
+  error: boolean
+  data: null | V
+  initialValue?: Value
+}
+
+const DEFAULT_PARAMS = {}
+const DEFAULT_OPTIONS = {apiVersion: `v2022-05-09`}
+const DEFAULT_INITIAL_VALUE = null
+
+export function useListeningQuery<V>(
+  query: string | {fetch: string; listen: string},
+  {
+    params = DEFAULT_PARAMS,
+    options = DEFAULT_OPTIONS,
+    initialValue = DEFAULT_INITIAL_VALUE,
+  }: Config<V>
+): Return<V> {
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState(false)
+  const [data, setData] = useState(initialValue)
+  const subscription = useRef<null | Subscription>(null)
+  const documentStore = useDocumentStore()
+
+  useEffect(() => {
+    if (query) {
+      subscription.current = documentStore
+        .listenQuery(query, params, options)
+        .pipe(
+          distinctUntilChanged(isEqual),
+          catchError((err) => {
+            console.error(err)
+            setError(err)
+            setLoading(false)
+            setData(null)
+
+            return err
+          })
+        )
+        .subscribe((documents) => {
+          setData((current: Value) => (isEqual(current, documents) ? current : documents))
+          setLoading(false)
+          setError(false)
+        })
+    }
+
+    return () => subscription?.current?.unsubscribe()
+  }, [query, params, options, documentStore])
+
+  return {data, loading, error}
+}

package/src/hooks/useProjectUsers.tsx

@@ -0,0 +1,73 @@
+import {useState, useEffect} from 'react'
+import {useClient, useWorkspace} from 'sanity'
+
+export type UserExtended = {
+  createdAt: string
+  displayName: string
+  email: string
+  familyName: string
+  givenName: string
+  id: string
+  imageUrl: string
+  isCurrentUser: boolean
+  middleName: string
+  projectId: string
+  provider: string
+  sanityUserId: string
+  updatedAt: string
+}
+
+type UserRole = {
+  name: string
+  title: string
+}
+
+type UserResponse = {
+  isRobot: boolean
+  projectUserId: string
+  roles: UserRole[]
+}
+
+// Custom hook to fetch user details
+// Built-in hook doesn't fetch all user details
+export function useProjectUsers(): UserExtended[] {
+  const {currentUser} = useWorkspace()
+  const client = useClient()
+  const [users, setUsers] = useState([])
+
+  useEffect(() => {
+    const {projectId} = client.config()
+
+    async function getUser(id: string) {
+      const userDetails = await client.request({
+        url: `/projects/${projectId}/users/${id}`,
+      })
+
+      return userDetails
+    }
+
+    async function getUsersWithRoles() {
+      const userRoles = await client
+        .request({
+          url: `/projects/${projectId}/acl`,
+        })
+        .then(async (res) =>
+          Promise.all(
+            res.map(async (user: UserResponse) => ({
+              isCurrentUser: user.projectUserId === currentUser?.id,
+              ...(await getUser(user.projectUserId)),
+            }))
+          )
+        )
+        .catch((err) => err)
+
+      setUsers(userRoles)
+    }
+
+    if (!users.length) {
+      getUsersWithRoles()
+    }
+  }, [client, currentUser?.id, users.length])
+
+  return users
+}

package/src/index.ts

@@ -0,0 +1,6 @@
+export {useListeningQuery} from './hooks/useListeningQuery'
+export {useProjectUsers} from './hooks/useProjectUsers'
+
+export {Feedback} from './components/Feedback'
+export {Table, Row, Cell} from './components/Table'
+export {UserSelectMenu} from './components/UserSelectMenu/index'

package/v2-incompatible.js

@@ -0,0 +1,11 @@
+const {showIncompatiblePluginDialog} = require('@sanity/incompatible-plugin')
+const {name, version, sanityExchangeUrl} = require('./package.json')
+
+export default showIncompatiblePluginDialog({
+  name: name,
+  versions: {
+    v3: version,
+    v2: undefined,
+  },
+  sanityExchangeUrl,
+})