sanity-plugin-workflow 1.0.0-beta.1 → 1.0.0-beta.10

package/src/components/DocumentCard/index.tsx

@@ -1,92 +1,201 @@
 /* eslint-disable react/prop-types */
+import {DragHandleIcon} from '@sanity/icons'
+import {Box, Card, CardTone, Flex, Stack, useTheme} from '@sanity/ui'
+import {useCallback, useEffect, useMemo, useState} from 'react'
 import {
-  Box,
-  Button,
-  Card,
-  Flex,
-  Popover,
-  Stack,
-  useClickOutside,
-  useTheme,
-} from '@sanity/ui'
-import {AddIcon, DragHandleIcon} from '@sanity/icons'
-import React, {useState} from 'react'
-import {useSchema, SchemaType} from 'sanity'
-import {UserSelectMenu} from 'sanity-plugin-utils'
+  SchemaType,
+  useSchema,
+  ValidationStatus as ValidationStatusType,
+} from 'sanity'
 import {Preview} from 'sanity'
 
+import {SanityDocumentWithMetadata, State, User} from '../../types'
+import UserDisplay from '../UserDisplay'
+import CompleteButton from './CompleteButton'
+import {DraftStatus} from './core/DraftStatus'
+import {PublishedStatus} from './core/PublishedStatus'
 import EditButton from './EditButton'
-import {SanityDocumentWithMetadata, User} from '../../types'
-import AvatarGroup from './AvatarGroup'
-import UserAssignment from '../UserAssignment'
+import Validate from './Validate'
+import {ValidationStatus} from './ValidationStatus'
 
 type DocumentCardProps = {
-  userList: User[]
+  isDragDisabled: boolean
+  isPatching: boolean
+  userRoleCanDrop: boolean
   isDragging: boolean
   item: SanityDocumentWithMetadata
+  states: State[]
+  toggleInvalidDocumentId: (
+    documentId: string,
+    action: 'ADD' | 'REMOVE'
+  ) => void
+  userList: User[]
 }
 
 export function DocumentCard(props: DocumentCardProps) {
-  const {userList, isDragging, item} = props
+  const {
+    isDragDisabled,
+    isPatching,
+    userRoleCanDrop,
+    isDragging,
+    item,
+    states,
+    toggleInvalidDocumentId,
+    userList,
+  } = props
   const {assignees = [], documentId} = item._metadata ?? {}
   const schema = useSchema()
+  const state = states.find((s) => s.id === item._metadata?.state)
 
   const isDarkMode = useTheme().sanity.color.dark
-  const defaultCardTone = isDarkMode ? 'transparent' : 'default'
+  const defaultCardTone = isDarkMode ? `transparent` : `default`
+
+  // Validation only runs if the state requests it
+  // Because it's not performant to run it on many documents simultaneously
+  // So we fake it here, and maybe set it inside <Validate />
+  const [optimisticValidation, setOptimisticValidation] =
+    useState<ValidationStatusType>({
+      isValidating: state?.requireValidation ?? false,
+      validation: [],
+    })
+
+  const {isValidating, validation} = optimisticValidation
+
+  const handleValidation = useCallback((updates: ValidationStatusType) => {
+    setOptimisticValidation(updates)
+  }, [])
+
+  const cardTone = useMemo(() => {
+    let tone: CardTone = defaultCardTone
 
-  // Open/close handler
-  // const [popoverRef, setPopoverRef] = useState(null)
-  // const [openId, setOpenId] = useState<string | undefined>(``)
+    if (!userRoleCanDrop) return isDarkMode ? `default` : `transparent`
+    if (!documentId) return tone
+    if (isPatching) tone = isDarkMode ? `default` : `transparent`
+    if (isDragging) tone = `positive`
 
-  // useClickOutside(() => setOpenId(``), [popoverRef])
+    if (state?.requireValidation && !isValidating && validation.length > 0) {
+      if (validation.some((v) => v.level === 'error')) {
+        tone = `critical`
+      } else {
+        tone = `caution`
+      }
+    }
 
-  // const handleKeyDown = React.useCallback((e) => {
-  //   if (e.key === 'Escape') {
-  //     setOpenId(``)
-  //   }
-  // }, [])
+    return tone
+  }, [
+    defaultCardTone,
+    userRoleCanDrop,
+    isPatching,
+    isDarkMode,
+    documentId,
+    isDragging,
+    isValidating,
+    validation,
+    state?.requireValidation,
+  ])
+
+  // Update validation status
+  // Cannot be done in the above memo because it would set state during render
+  useEffect(() => {
+    if (!isValidating && validation.length > 0) {
+      if (validation.some((v) => v.level === 'error')) {
+        toggleInvalidDocumentId(documentId, 'ADD')
+      } else {
+        toggleInvalidDocumentId(documentId, 'REMOVE')
+      }
+    } else {
+      toggleInvalidDocumentId(documentId, 'REMOVE')
+    }
+  }, [documentId, isValidating, toggleInvalidDocumentId, validation])
+
+  const hasError = useMemo(
+    () => (isValidating ? false : validation.some((v) => v.level === 'error')),
+    [isValidating, validation]
+  )
+
+  const isLastState = useMemo(
+    () => states[states.length - 1].id === item._metadata?.state,
+    [states, item._metadata.state]
+  )
 
   return (
-    <Box paddingY={2} paddingX={3}>
-      <Card
-        radius={2}
-        shadow={isDragging ? 3 : 1}
-        tone={isDragging ? 'positive' : defaultCardTone}
-      >
-        <Stack>
-          <Card
-            borderBottom
-            radius={2}
-            padding={3}
-            paddingLeft={2}
-            tone="inherit"
-            style={{pointerEvents: 'none'}}
-          >
-            <Flex align="center" justify="space-between" gap={1}>
-              <Preview
-                layout="default"
-                value={item}
-                schemaType={schema.get(item._type) as SchemaType}
-              />
-              <DragHandleIcon style={{flexShrink: 0}} />
-            </Flex>
-          </Card>
-
-          <Card padding={2} radius={2} tone="inherit">
-            <Flex align="center" justify="space-between" gap={1}>
-              {documentId && (
-                <UserAssignment
-                  userList={userList}
-                  assignees={assignees}
-                  documentId={documentId}
+    <>
+      {state?.requireValidation ? (
+        <Validate
+          documentId={documentId}
+          type={item._type}
+          onChange={handleValidation}
+        />
+      ) : null}
+      <Box paddingBottom={3} paddingX={3}>
+        <Card radius={2} shadow={isDragging ? 3 : 1} tone={cardTone}>
+          <Stack>
+            <Card
+              borderBottom
+              radius={2}
+              padding={3}
+              paddingLeft={2}
+              tone={cardTone}
+              style={{pointerEvents: 'none'}}
+            >
+              <Flex align="center" justify="space-between" gap={1}>
+                <Box flex={1}>
+                  <Preview
+                    layout="default"
+                    skipVisibilityCheck
+                    value={item}
+                    schemaType={schema.get(item._type) as SchemaType}
+                  />
+                </Box>
+                <Box style={{flexShrink: 0}}>
+                  {hasError || isDragDisabled || isPatching ? null : (
+                    <DragHandleIcon />
+                  )}
+                </Box>
+              </Flex>
+            </Card>
+
+            <Card padding={2} radius={2} tone="inherit">
+              <Flex align="center" justify="space-between" gap={3}>
+                <Box flex={1}>
+                  {documentId && (
+                    <UserDisplay
+                      userList={userList}
+                      assignees={assignees}
+                      documentId={documentId}
+                      disabled={!userRoleCanDrop}
+                    />
+                  )}
+                </Box>
+                {validation.length > 0 ? (
+                  <ValidationStatus validation={validation} />
+                ) : null}
+                <DraftStatus document={item} />
+                <PublishedStatus document={item} />
+                <EditButton
+                  id={item._id}
+                  type={item._type}
+                  disabled={!userRoleCanDrop}
                 />
-              )}
-
-              <EditButton id={item._id} type={item._type} />
-            </Flex>
-          </Card>
-        </Stack>
-      </Card>
-    </Box>
+                {isLastState && states.length <= 3 ? (
+                  <CompleteButton
+                    documentId={documentId}
+                    disabled={!userRoleCanDrop}
+                  />
+                ) : null}
+              </Flex>
+              {isLastState && states.length > 3 ? (
+                <Stack paddingTop={2}>
+                  <CompleteButton
+                    documentId={documentId}
+                    disabled={!userRoleCanDrop}
+                  />
+                </Stack>
+              ) : null}
+            </Card>
+          </Stack>
+        </Card>
+      </Box>
+    </>
   )
 }

package/src/components/DocumentList.tsx

@@ -0,0 +1,169 @@
+import {Draggable, DraggableStyle} from '@hello-pangea/dnd'
+import {useVirtualizer, VirtualItem} from '@tanstack/react-virtual'
+import {CSSProperties, useMemo, useRef} from 'react'
+import {CurrentUser} from 'sanity'
+import {UserExtended} from 'sanity-plugin-utils'
+
+import {filterItemsAndSort} from '../helpers/filterItemsAndSort'
+import {SanityDocumentWithMetadata, State} from '../types'
+import {DocumentCard} from './DocumentCard'
+
+type DocumentListProps = {
+  data: SanityDocumentWithMetadata[]
+  invalidDocumentIds: string[]
+  patchingIds: string[]
+  selectedSchemaTypes: string[]
+  selectedUserIds: string[]
+  state: State
+  states: State[]
+  toggleInvalidDocumentId: (
+    documentId: string,
+    action: 'ADD' | 'REMOVE'
+  ) => void
+  user: CurrentUser | null
+  userList: UserExtended[]
+  userRoleCanDrop: boolean
+}
+
+function getStyle(
+  draggableStyle: DraggableStyle | undefined,
+  virtualItem: VirtualItem
+): CSSProperties {
+  // Default transform required by tanstack virtual for positioning
+  let transform = `translateY(${virtualItem.start}px)`
+
+  // If a card is being dragged over, this card needs to move up or down
+  if (draggableStyle && draggableStyle.transform) {
+    // So get the transform value from beautiful-dnd
+    const draggableTransformY = parseInt(
+      draggableStyle.transform.split(',')[1].split('px')[0],
+      10
+    )
+
+    // And apply it to the card
+    transform = `translateY(${virtualItem.start + draggableTransformY}px)`
+  }
+
+  return {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    width: '100%',
+    height: `${virtualItem.size}px`,
+    transform,
+  }
+}
+
+export default function DocumentList(props: DocumentListProps) {
+  const {
+    data = [],
+    invalidDocumentIds,
+    patchingIds,
+    selectedSchemaTypes,
+    selectedUserIds,
+    state,
+    states,
+    toggleInvalidDocumentId,
+    user,
+    userList,
+    userRoleCanDrop,
+  } = props
+
+  const dataFiltered = useMemo(() => {
+    return data.length
+      ? filterItemsAndSort(data, state.id, selectedUserIds, selectedSchemaTypes)
+      : []
+  }, [data, selectedSchemaTypes, selectedUserIds, state.id])
+
+  const parentRef = useRef(null)
+
+  const virtualizer = useVirtualizer({
+    count: dataFiltered.length,
+    getScrollElement: () => parentRef.current,
+    getItemKey: (index) => dataFiltered[index]?._metadata?.documentId ?? index,
+    estimateSize: () => 115,
+    overscan: 7,
+    measureElement: (element) => {
+      return element.getBoundingClientRect().height || 115
+    },
+  })
+
+  if (!data.length || !dataFiltered.length) {
+    return null
+  }
+
+  return (
+    <div
+      ref={parentRef}
+      style={{
+        height: `100%`,
+        overflow: 'auto',
+        // Smooths scrollbar behaviour
+        overflowAnchor: 'none',
+        scrollBehavior: 'auto',
+        paddingTop: 1,
+      }}
+    >
+      <div
+        style={{
+          height: `${virtualizer.getTotalSize()}px`,
+          width: '100%',
+          position: 'relative',
+        }}
+      >
+        {virtualizer.getVirtualItems().map((virtualItem) => {
+          const item = dataFiltered[virtualItem.index]
+
+          const {documentId, assignees} = item?._metadata ?? {}
+
+          const isInvalid = invalidDocumentIds.includes(documentId)
+          const meInAssignees = user?.id ? assignees?.includes(user.id) : false
+          const isDragDisabled =
+            patchingIds.includes(documentId) ||
+            !userRoleCanDrop ||
+            isInvalid ||
+            !(state.requireAssignment
+              ? state.requireAssignment && meInAssignees
+              : true)
+
+          return (
+            <Draggable
+              key={virtualItem.key}
+              draggableId={documentId}
+              index={virtualItem.index}
+              isDragDisabled={isDragDisabled}
+            >
+              {(draggableProvided, draggableSnapshot) => (
+                <div
+                  ref={draggableProvided.innerRef}
+                  {...draggableProvided.draggableProps}
+                  {...draggableProvided.dragHandleProps}
+                  style={getStyle(
+                    draggableProvided.draggableProps.style,
+                    virtualItem
+                  )}
+                >
+                  <div
+                    ref={virtualizer.measureElement}
+                    data-index={virtualItem.index}
+                  >
+                    <DocumentCard
+                      userRoleCanDrop={userRoleCanDrop}
+                      isDragDisabled={isDragDisabled}
+                      isPatching={patchingIds.includes(documentId)}
+                      isDragging={draggableSnapshot.isDragging}
+                      item={item}
+                      toggleInvalidDocumentId={toggleInvalidDocumentId}
+                      userList={userList}
+                      states={states}
+                    />
+                  </div>
+                </div>
+              )}
+            </Draggable>
+          )
+        })}
+      </div>
+    </div>
+  )
+}

package/src/components/Filters.tsx

@@ -0,0 +1,168 @@
+import {ResetIcon, UserIcon} from '@sanity/icons'
+import {Button, Card, Flex, Menu, MenuButton} from '@sanity/ui'
+import {useCallback} from 'react'
+import {useCurrentUser, UserAvatar, useSchema} from 'sanity'
+import {UserExtended, UserSelectMenu} from 'sanity-plugin-utils'
+
+type FiltersProps = {
+  uniqueAssignedUsers: UserExtended[]
+  selectedUserIds: string[]
+  schemaTypes: string[]
+  selectedSchemaTypes: string[]
+  toggleSelectedUser: (userId: string) => void
+  resetSelectedUsers: () => void
+  toggleSelectedSchemaType: (schemaType: string) => void
+}
+
+export default function Filters(props: FiltersProps) {
+  const {
+    uniqueAssignedUsers = [],
+    selectedUserIds,
+    schemaTypes,
+    selectedSchemaTypes,
+    toggleSelectedUser,
+    resetSelectedUsers,
+    toggleSelectedSchemaType,
+  } = props
+
+  const currentUser = useCurrentUser()
+  const schema = useSchema()
+
+  const onAdd = useCallback(
+    (id: string) => {
+      if (!selectedUserIds.includes(id)) {
+        toggleSelectedUser(id)
+      }
+    },
+    [selectedUserIds, toggleSelectedUser]
+  )
+
+  const onRemove = useCallback(
+    (id: string) => {
+      if (selectedUserIds.includes(id)) {
+        toggleSelectedUser(id)
+      }
+    },
+    [selectedUserIds, toggleSelectedUser]
+  )
+
+  const onClear = useCallback(() => {
+    resetSelectedUsers()
+  }, [resetSelectedUsers])
+
+  if (uniqueAssignedUsers.length === 0 && schemaTypes.length < 2) {
+    return null
+  }
+
+  const meInUniqueAssignees =
+    currentUser?.id && uniqueAssignedUsers.find((u) => u.id === currentUser.id)
+  const uniqueAssigneesNotMe = uniqueAssignedUsers.filter(
+    (u) => u.id !== currentUser?.id
+  )
+
+  return (
+    <Card tone="primary" padding={2} borderBottom style={{overflowX: 'hidden'}}>
+      <Flex align="center">
+        <Flex align="center" gap={1} flex={1}>
+          {uniqueAssignedUsers.length > 5 ? (
+            <Card tone="default">
+              <MenuButton
+                button={
+                  <Button
+                    text="Filter Assignees"
+                    tone="primary"
+                    icon={UserIcon}
+                  />
+                }
+                id="user-filters"
+                menu={
+                  <Menu>
+                    <UserSelectMenu
+                      value={selectedUserIds}
+                      userList={uniqueAssignedUsers}
+                      onAdd={onAdd}
+                      onRemove={onRemove}
+                      onClear={onClear}
+                      labels={{
+                        addMe: 'Filter mine',
+                        removeMe: 'Clear mine',
+                        clear: 'Clear filters',
+                      }}
+                    />
+                  </Menu>
+                }
+                popover={{portal: true}}
+              />
+            </Card>
+          ) : (
+            <>
+              {meInUniqueAssignees ? (
+                <>
+                  <Button
+                    padding={0}
+                    mode={
+                      selectedUserIds.includes(currentUser.id)
+                        ? `default`
+                        : `bleed`
+                    }
+                    onClick={() => toggleSelectedUser(currentUser.id)}
+                  >
+                    <Flex padding={1} align="center" justify="center">
+                      <UserAvatar user={currentUser.id} size={1} withTooltip />
+                    </Flex>
+                  </Button>
+                  <Card borderRight style={{height: 30}} tone="inherit" />
+                </>
+              ) : null}
+              {uniqueAssigneesNotMe.map((user) => (
+                <Button
+                  key={user.id}
+                  padding={0}
+                  mode={selectedUserIds.includes(user.id) ? `default` : `bleed`}
+                  onClick={() => toggleSelectedUser(user.id)}
+                >
+                  <Flex padding={1} align="center" justify="center">
+                    <UserAvatar user={user} size={1} withTooltip />
+                  </Flex>
+                </Button>
+              ))}
+
+              {selectedUserIds.length > 0 ? (
+                <Button
+                  text="Clear"
+                  onClick={resetSelectedUsers}
+                  mode="ghost"
+                  icon={ResetIcon}
+                />
+              ) : null}
+            </>
+          )}
+        </Flex>
+
+        {schemaTypes.length > 1 ? (
+          <Flex align="center" gap={1}>
+            {schemaTypes.map((typeName) => {
+              const schemaType = schema.get(typeName)
+
+              if (!schemaType) {
+                return null
+              }
+
+              return (
+                <Button
+                  key={typeName}
+                  text={schemaType?.title ?? typeName}
+                  icon={schemaType?.icon ?? undefined}
+                  mode={
+                    selectedSchemaTypes.includes(typeName) ? `default` : `ghost`
+                  }
+                  onClick={() => toggleSelectedSchemaType(typeName)}
+                />
+              )
+            })}
+          </Flex>
+        ) : null}
+      </Flex>
+    </Card>
+  )
+}

package/src/components/FloatingCard.tsx

@@ -0,0 +1,29 @@
+import {PropsWithChildren} from 'react'
+import styled, {css} from 'styled-components'
+import {Card, Grid} from '@sanity/ui'
+import {motion, AnimatePresence} from 'framer-motion'
+
+const StyledFloatingCard = styled(Card)(
+  () => css`
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    z-index: 1000;
+  `
+)
+
+export default function FloatingCard({children}: PropsWithChildren) {
+  const childrenHaveValues = Array.isArray(children) ? children.some(Boolean) : Boolean(children)
+
+  return (
+    <AnimatePresence>
+      {childrenHaveValues ? (
+        <motion.div key="floater" initial={{opacity: 0}} animate={{opacity: 1}} exit={{opacity: 0}}>
+          <StyledFloatingCard shadow={3} padding={3} margin={3} radius={3}>
+            <Grid gap={2}>{children}</Grid>
+          </StyledFloatingCard>
+        </motion.div>
+      ) : null}
+    </AnimatePresence>
+  )
+}

package/src/components/StateTitle/Status.tsx

@@ -0,0 +1,27 @@
+import React from 'react'
+import {Box, Text, Tooltip} from '@sanity/ui'
+
+type StatusProps = {
+  text: string
+  icon: React.ComponentType
+}
+
+export function Status(props: StatusProps) {
+  const {text, icon} = props
+  const Icon = icon
+
+  return (
+    <Tooltip
+      portal
+      content={
+        <Box padding={2}>
+          <Text size={1}>{text}</Text>
+        </Box>
+      }
+    >
+      <Text size={1}>
+        <Icon />
+      </Text>
+    </Tooltip>
+  )
+}