@sanity/dashboard 5.0.1 → 6.0.0

package/src/widgets/projectUsers/ProjectUser.tsx

@@ -1,45 +0,0 @@
-import React from 'react'
-import {Box, Flex, rem, Stack, Text} from '@sanity/ui'
-import {styled} from 'styled-components'
-import {useListFormat, type User, UserAvatar} from 'sanity'
-import {RobotIcon} from '@sanity/icons'
-
-const Root = styled(Flex)`
-  height: ${rem(33)}; // 33 = PREVIEW_SIZES.default.media.height
-  box-sizing: content-box;
-`
-
-export interface ProjectUserProps {
-  user: User
-  isRobot: boolean
-  roles: string[]
-}
-
-export function ProjectUser({user, isRobot, roles}: ProjectUserProps) {
-  const listFormat = useListFormat({style: 'narrow'})
-  return (
-    <Root align="center">
-      <Flex align="center" flex={1} gap={2}>
-        <Box flex="none">
-          {isRobot ? (
-            <Text size={2}>
-              <RobotIcon />
-            </Text>
-          ) : (
-            <UserAvatar user={user} />
-          )}
-        </Box>
-
-        <Stack flex={1} space={2}>
-          <Text size={1} style={{color: 'inherit'}} textOverflow="ellipsis" weight="medium">
-            {user.displayName}
-          </Text>
-
-          <Text muted size={1} textOverflow="ellipsis">
-            {listFormat.format(roles)}
-          </Text>
-        </Stack>
-      </Flex>
-    </Root>
-  )
-}

package/src/widgets/projectUsers/ProjectUsers.tsx

@@ -1,148 +0,0 @@
-import React, {useCallback, useEffect, useState} from 'react'
-import {from} from 'rxjs'
-import {map, switchMap} from 'rxjs/operators'
-import {Stack, Spinner, Box, Text, Button} from '@sanity/ui'
-import {Role, useUserStore} from 'sanity'
-import {useVersionedClient} from '../../versionedClient'
-import {User} from 'sanity'
-import {DashboardWidgetContainer} from '../../components/DashboardWidgetContainer'
-import {ProjectUser} from './ProjectUser'
-
-function getInviteUrl(projectId: string) {
-  return `https://manage.sanity.io/projects/${projectId}/members`
-}
-
-interface Member {
-  id: string
-  roles: Role[]
-  isRobot: boolean
-  isCurrentUser: boolean
-  createdAt: string
-}
-
-interface Project {
-  id: string
-  members: Member[]
-}
-
-export function ProjectUsers() {
-  const [project, setProject] = useState<Project | undefined>()
-  const [users, setUsers] = useState<User[] | undefined>()
-  const [error, setError] = useState<Error | undefined>()
-
-  const userStore = useUserStore()
-  const versionedClient = useVersionedClient()
-
-  const fetchData = useCallback(() => {
-    const {projectId} = versionedClient.config()
-    const subscription = versionedClient.observable
-      .request<Project>({
-        uri: `/projects/${projectId}`,
-        tag: 'dashboard.project-users',
-      })
-      .pipe(
-        switchMap((_project) =>
-          from(userStore.getUsers(_project.members.map((mem) => mem.id))).pipe(
-            map((_users) => ({project: _project, users: _users})),
-          ),
-        ),
-      )
-      .subscribe({
-        next: ({users: _users, project: _project}) => {
-          setProject(_project)
-          setUsers(
-            (Array.isArray(_users) ? _users : [_users]).sort((userA, userB) =>
-              sortUsersByRobotStatus(userA, userB, _project),
-            ),
-          )
-        },
-        error: (e: Error) => setError(e),
-      })
-
-    return () => subscription.unsubscribe()
-  }, [userStore, versionedClient])
-
-  useEffect(() => fetchData(), [fetchData])
-
-  const handleRetryFetch = useCallback(() => fetchData(), [fetchData])
-
-  const isLoading = !users || !project
-
-  if (error) {
-    return (
-      <DashboardWidgetContainer header="Project users">
-        <Box padding={4}>
-          <Text>
-            Something went wrong while fetching data. You could{' '}
-            <a onClick={handleRetryFetch} title="Retry users fetch" style={{cursor: 'pointer'}}>
-              retry
-            </a>
-            ..?
-          </Text>
-        </Box>
-      </DashboardWidgetContainer>
-    )
-  }
-
-  return (
-    <DashboardWidgetContainer
-      header="Project users"
-      footer={
-        <Button
-          style={{width: '100%'}}
-          paddingX={2}
-          paddingY={4}
-          mode="bleed"
-          tone="primary"
-          text="Manage members"
-          as="a"
-          loading={isLoading}
-          href={isLoading ? undefined : getInviteUrl(project.id)}
-        />
-      }
-    >
-      {isLoading && (
-        <Box paddingY={5} paddingX={2}>
-          <Stack space={4}>
-            <Text align="center" muted size={1}>
-              <Spinner />
-            </Text>
-            <Text align="center" size={1} muted>
-              Loading items…
-            </Text>
-          </Stack>
-        </Box>
-      )}
-
-      {!isLoading && (
-        <Stack space={3} padding={3}>
-          {users?.map((user) => {
-            const membership = project.members.find((member) => member.id === user.id)
-            return (
-              <ProjectUser
-                key={user.id}
-                user={user}
-                isRobot={membership?.isRobot ?? false}
-                roles={membership?.roles.map((role) => role.title) || []}
-              />
-            )
-          })}
-        </Stack>
-      )}
-    </DashboardWidgetContainer>
-  )
-}
-
-function sortUsersByRobotStatus(userA: User, userB: User, project: Project) {
-  const {members} = project
-  const membershipA = members.find((member) => member.id === userA?.id)
-  const membershipB = members.find((member) => member.id === userB?.id)
-
-  // On ties, sort by when the user was added
-  if (membershipA?.isRobot === membershipB?.isRobot) {
-    return (membershipA?.createdAt || '') > (membershipB?.createdAt || '') ? 1 : -1
-  }
-
-  // Robots go to the bottom
-  return membershipA?.isRobot ? 1 : -1
-}

package/src/widgets/projectUsers/index.ts

@@ -1,10 +0,0 @@
-import {ProjectUsers} from './ProjectUsers'
-import {LayoutConfig, DashboardWidget} from '../../types'
-
-export function projectUsersWidget(config?: {layout?: LayoutConfig}): DashboardWidget {
-  return {
-    name: 'project-info',
-    component: ProjectUsers,
-    layout: config?.layout,
-  }
-}

package/src/widgets/sanityTutorials/SanityTutorials.tsx

@@ -1,77 +0,0 @@
-import React, {useEffect, useState} from 'react'
-import {Flex} from '@sanity/ui'
-import {Tutorial} from './Tutorial'
-import {FeedItem, Guide, useDataAdapter} from './dataAdapter'
-import {DashboardWidgetContainer} from '../../components/DashboardWidgetContainer'
-
-function createUrl(slug: {current: string}, type?: string) {
-  if (type === 'tutorial') {
-    return `https://www.sanity.io/docs/tutorials/${slug.current}`
-  } else if (type === 'guide') {
-    return `https://www.sanity.io/docs/guides/${slug.current}`
-  }
-  return false
-}
-
-export interface SanityTutorialsProps {
-  templateRepoId: string
-}
-
-export function SanityTutorials(props: SanityTutorialsProps) {
-  const {templateRepoId} = props
-  const [feedItems, setFeedItems] = useState<FeedItem[]>([])
-
-  const {getFeed, urlBuilder} = useDataAdapter()
-
-  useEffect(() => {
-    const subscription = getFeed(templateRepoId).subscribe((response) => {
-      setFeedItems(response.items)
-    })
-    return () => {
-      subscription.unsubscribe()
-    }
-  }, [setFeedItems, getFeed, templateRepoId])
-
-  const title = 'Learn about Sanity'
-
-  return (
-    <DashboardWidgetContainer header={title}>
-      <Flex as="ul" overflow="auto" align="stretch" paddingY={2}>
-        {feedItems?.map((feedItem, index) => {
-          if (!feedItem.title || (!feedItem.guideOrTutorial && !feedItem.externalLink)) {
-            return null
-          }
-          const presenter = feedItem.presenter || feedItem.guideOrTutorial?.presenter || {}
-          const subtitle = feedItem.category
-          const {guideOrTutorial = {} as Guide} = feedItem
-          const href =
-            (guideOrTutorial.slug
-              ? createUrl(guideOrTutorial.slug, guideOrTutorial._type)
-              : feedItem.externalLink) || feedItem.externalLink
-
-          return (
-            <Flex
-              as="li"
-              key={feedItem._id}
-              paddingRight={index < feedItems?.length - 1 ? 1 : 3}
-              paddingLeft={index === 0 ? 3 : 0}
-              align="stretch"
-              style={{minWidth: 272, width: '30%'}}
-            >
-              <Tutorial
-                title={feedItem.title}
-                href={href ?? ''}
-                presenterName={presenter.name}
-                presenterSubtitle={subtitle}
-                showPlayIcon={feedItem.hasVideo}
-                posterURL={
-                  feedItem.poster ? urlBuilder.image(feedItem.poster).height(360).url() : undefined
-                }
-              />
-            </Flex>
-          )
-        })}
-      </Flex>
-    </DashboardWidgetContainer>
-  )
-}

package/src/widgets/sanityTutorials/Tutorial.tsx

@@ -1,111 +0,0 @@
-import React from 'react'
-import {Card, Box, Heading, Flex, Text, Stack} from '@sanity/ui'
-import {PlayIcon} from '@sanity/icons'
-import {styled} from 'styled-components'
-
-const PlayIconBox = styled(Box)`
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-
-  &:before {
-    content: '';
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    width: 2.75em;
-    height: 2.75em;
-    border-radius: 50%;
-    background: ${({theme}) => theme.sanity.color.card.enabled.bg};
-    opacity: 0.75;
-  }
-`
-
-const Root = styled(Flex)`
-  &:hover {
-    ${PlayIconBox} {
-      &:before {
-        opacity: 1;
-      }
-    }
-  }
-`
-
-const PosterCard = styled(Card)`
-  width: 100%;
-  padding-bottom: calc(9 / 16 * 100%);
-  position: relative;
-`
-
-const Poster = styled.img`
-  position: absolute;
-  top: 0;
-  left: 0;
-  height: 100%;
-  width: 100%;
-  object-fit: cover;
-  display: block;
-
-  &:not([src]) {
-    display: none;
-  }
-`
-
-export interface TutorialProps {
-  title: string
-  posterURL?: string
-  href: string
-  showPlayIcon?: boolean
-  presenterName?: string
-  presenterSubtitle?: string
-}
-
-export function Tutorial(props: TutorialProps) {
-  const {title, posterURL, showPlayIcon, href, presenterName, presenterSubtitle} = props
-
-  return (
-    <Root flex={1}>
-      <Card
-        sizing="border"
-        flex={1}
-        padding={2}
-        radius={2}
-        as="a"
-        href={href}
-        target="_blank"
-        rel="noopener noreferrer"
-        style={{position: 'relative'}}
-      >
-        <Flex direction="column" style={{height: '100%'}}>
-          {posterURL && (
-            <PosterCard marginBottom={1}>
-              <Poster src={posterURL} />
-              {showPlayIcon && (
-                <PlayIconBox display="flex">
-                  <Text align="center">
-                    <PlayIcon />
-                  </Text>
-                </PlayIconBox>
-              )}
-            </PosterCard>
-          )}
-          <Flex direction="column" justify="space-between" paddingY={2} flex={1}>
-            <Heading as="h3" size={1}>
-              {title}
-            </Heading>
-            <Box marginTop={4}>
-              <Stack space={2} flex={1}>
-                <Text size={1}>{presenterName}</Text>
-                <Text size={0} style={{opacity: 0.7}}>
-                  {presenterSubtitle}
-                </Text>
-              </Stack>
-            </Box>
-          </Flex>
-        </Flex>
-      </Card>
-    </Root>
-  )
-}

package/src/widgets/sanityTutorials/dataAdapter.ts

@@ -1,49 +0,0 @@
-import {useMemo} from 'react'
-import {useVersionedClient} from '../../versionedClient'
-import imageUrlBuilder from '@sanity/image-url'
-
-const tutorialsProjectConfig = {
-  projectId: '3do82whm',
-  dataset: 'next',
-}
-
-export interface Guide {
-  _type?: string
-  slug?: {current: string}
-  presenter?: {
-    name?: string
-  }
-}
-
-export interface FeedItem {
-  _id: string
-  title?: string
-  poster?: string
-  category?: string
-  guideOrTutorial?: Guide
-  externalLink?: string
-  presenter?: {
-    name?: string
-  }
-  hasVideo?: boolean
-}
-
-export function useDataAdapter() {
-  const versionedClient = useVersionedClient()
-  return useMemo(
-    () => ({
-      getFeed: (templateRepoId: string) => {
-        const uri = templateRepoId
-          ? `/addons/dashboard?templateRepoId=${templateRepoId}`
-          : '/addons/dashboard'
-        return versionedClient.observable.request<{items: FeedItem[]}>({
-          uri,
-          tag: 'dashboard.sanity-tutorials',
-          withCredentials: false,
-        })
-      },
-      urlBuilder: imageUrlBuilder(tutorialsProjectConfig),
-    }),
-    [versionedClient],
-  )
-}

package/src/widgets/sanityTutorials/index.ts

@@ -1,10 +0,0 @@
-import {SanityTutorials} from './SanityTutorials'
-import {LayoutConfig, DashboardWidget} from '../../types'
-
-export function sanityTutorialsWidget(config?: {layout?: LayoutConfig}): DashboardWidget {
-  return {
-    name: 'sanity-tutorials',
-    component: SanityTutorials,
-    layout: config?.layout ?? {width: 'full'},
-  }
-}

package/v2-incompatible.js

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