sanity-plugin-workflow 1.0.6 → 2.0.0

package/src/components/DocumentCard/index.tsx

@@ -1,200 +0,0 @@
-/* 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 {
-  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 Validate from './Validate'
-import {ValidationStatus} from './ValidationStatus'
-
-type DocumentCardProps = {
-  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 {
-    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`
-
-  // 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
-
-    if (!userRoleCanDrop) return isDarkMode ? `default` : `transparent`
-    if (!documentId) return tone
-    if (isPatching) tone = isDarkMode ? `default` : `transparent`
-    if (isDragging) tone = `positive`
-
-    if (state?.requireValidation && !isValidating && validation.length > 0) {
-      if (validation.some((v) => v.level === 'error')) {
-        tone = `critical`
-      } else {
-        tone = `caution`
-      }
-    }
-
-    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 (
-    <>
-      {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}
-              paddingRight={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}
-                />
-                {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

@@ -1,169 +0,0 @@
-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

@@ -1,174 +0,0 @@
-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
-                    padding={3}
-                    fontSize={1}
-                    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
-                  padding={3}
-                  fontSize={1}
-                  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
-                  padding={3}
-                  fontSize={1}
-                  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

@@ -1,36 +0,0 @@
-import {Card, Grid} from '@sanity/ui'
-import {AnimatePresence, motion} from 'framer-motion'
-import {PropsWithChildren} from 'react'
-import {css, styled} from 'styled-components'
-
-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

@@ -1,27 +0,0 @@
-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>
-  )
-}

package/src/components/StateTitle/index.tsx

@@ -1,78 +0,0 @@
-import {InfoOutlineIcon, UserIcon} from '@sanity/icons'
-import {Badge, BadgeTone, Box, Card, Flex, Text} from '@sanity/ui'
-import {css, styled} from 'styled-components'
-
-import {State} from '../../types'
-import {Status} from './Status'
-
-const StyledStickyCard = styled(Card)(
-  () => css`
-    position: sticky;
-    top: 0;
-    z-index: 1;
-  `
-)
-
-type StateTitleProps = {
-  state: State
-  requireAssignment: boolean
-  userRoleCanDrop: boolean
-  isDropDisabled: boolean
-  draggingFrom: string
-  documentCount: number
-}
-
-export default function StateTitle(props: StateTitleProps) {
-  const {
-    state,
-    requireAssignment,
-    userRoleCanDrop,
-    isDropDisabled,
-    draggingFrom,
-    documentCount,
-  } = props
-
-  let tone: BadgeTone = 'default'
-  const isSource = draggingFrom === state.id
-
-  if (draggingFrom) {
-    tone = isDropDisabled || isSource ? 'default' : 'positive'
-  }
-
-  return (
-    <StyledStickyCard paddingY={4} padding={3} tone="inherit">
-      <Flex gap={3} align="center">
-        <Badge
-          mode={
-            (draggingFrom && !isDropDisabled) || isSource
-              ? 'default'
-              : 'outline'
-          }
-          tone={tone}
-          muted={!userRoleCanDrop || isDropDisabled}
-        >
-          {state.title}
-        </Badge>
-        {userRoleCanDrop ? null : (
-          <Status
-            text="You do not have permissions to move documents to this State"
-            icon={InfoOutlineIcon}
-          />
-        )}
-        {requireAssignment ? (
-          <Status
-            text="You must be assigned to the document to move documents to this State"
-            icon={UserIcon}
-          />
-        ) : null}
-        <Box flex={1}>
-          {documentCount > 0 ? (
-            <Text weight="semibold" align="right" size={1}>
-              {documentCount}
-            </Text>
-          ) : null}
-        </Box>
-      </Flex>
-    </StyledStickyCard>
-  )
-}