@sanity/dashboard 2.35.0 → 2.36.0-v2-studio.1

package/src/widgets/projectUsers/ProjectUsers.js

@@ -0,0 +1,176 @@
+// @todo: remove the following line when part imports has been removed from this file
+///<reference types="@sanity/types/parts" />
+
+import React from 'react'
+import {map, switchMap} from 'rxjs/operators'
+import {Stack, Card, Box, Text, Button} from '@sanity/ui'
+import {RobotIcon} from '@sanity/icons'
+import styled from 'styled-components'
+import {DefaultPreview} from '@sanity/base/components'
+import Spinner from 'part:@sanity/components/loading/spinner'
+import {versionedClient} from '../../versionedClient'
+import {DashboardWidget} from '../../'
+import {userStore} from '../../legacyParts'
+
+const AvatarWrapper = styled(Card)`
+  box-sizing: border-box;
+  border-radius: 50%;
+  border-color: transparent;
+  overflow: hidden;
+  width: 100%;
+  height: 100%;
+
+  & > img {
+    width: 100%;
+    height: auto;
+  }
+`
+
+function getInviteUrl(projectId) {
+  return `https://manage.sanity.io/projects/${projectId}/team/invite`
+}
+
+function sortUsersByRobotStatus(userA, userB, project) {
+  const {members} = project
+  const membershipA = members.find((member) => member.id === userA.id)
+  const membershipB = members.find((member) => member.id === userB.id)
+  if (membershipA.isRobot) {
+    return 1
+  }
+  if (membershipB.isRobot) {
+    return -1
+  }
+  return 0
+}
+
+class ProjectUsers extends React.PureComponent {
+  static propTypes = {}
+  static defaultProps = {}
+
+  state = {
+    project: null,
+    users: null,
+    error: null,
+  }
+
+  componentDidMount() {
+    this.fetchData()
+  }
+
+  componentWillUnmount() {
+    if (this.subscription) {
+      this.subscription.unsubscribe()
+    }
+  }
+
+  fetchData() {
+    if (this.subscription) {
+      this.subscription.unsubscribe()
+    }
+
+    const {projectId} = versionedClient.config()
+    this.subscription = versionedClient.observable
+      .request({
+        uri: `/projects/${projectId}`,
+      })
+      .pipe(
+        switchMap((project) =>
+          userStore.observable
+            .getUsers(project.members.map((mem) => mem.id))
+            .pipe(map((users) => ({project, users})))
+        )
+      )
+      .subscribe({
+        next: ({users, project}) =>
+          this.setState({
+            project,
+            users: (Array.isArray(users) ? users : [users]).sort((userA, userB) =>
+              sortUsersByRobotStatus(userA, userB, project)
+            ),
+          }),
+        error: (error) => this.setState({error}),
+      })
+  }
+
+  handleRetryFetch = () => {
+    this.fetchData()
+  }
+
+  render() {
+    const {error, project, users} = this.state
+    const isLoading = !users || !project
+
+    if (error) {
+      return (
+        <DashboardWidget header="Project users">
+          <Box padding={4}>
+            <Text>
+              Something went wrong while fetching data. You could{' '}
+              <a
+                onClick={this.handleRetryFetch}
+                title="Retry users fetch"
+                style={{cursor: 'pointer'}}
+              >
+                retry
+              </a>
+              ..?
+            </Text>
+          </Box>
+        </DashboardWidget>
+      )
+    }
+
+    return (
+      <DashboardWidget
+        header="Project users"
+        footer={
+          <Button
+            style={{width: '100%'}}
+            paddingX={2}
+            paddingY={4}
+            mode="bleed"
+            tone="primary"
+            text="Invite members"
+            as="a"
+            loading={isLoading}
+            href={isLoading ? undefined : getInviteUrl(project.id)}
+          />
+        }
+      >
+        {isLoading && (
+          <Card padding={4}>
+            <Spinner center message="Loading..." />
+          </Card>
+        )}
+
+        {!isLoading && (
+          <Stack space={3} padding={3}>
+            {users.map((user) => {
+              const membership = project.members.find((member) => member.id === user.id)
+              const media = membership.isRobot ? (
+                <Text size={3}>
+                  <RobotIcon />
+                </Text>
+              ) : (
+                <AvatarWrapper tone="transparent">
+                  {user?.imageUrl && <img src={user.imageUrl} alt={user?.displayName} />}
+                </AvatarWrapper>
+              )
+              return (
+                <Box key={user.id}>
+                  <DefaultPreview
+                    title={user.displayName}
+                    subtitle={membership.role}
+                    media={media}
+                  />
+                </Box>
+              )
+            })}
+          </Stack>
+        )}
+      </DashboardWidget>
+    )
+  }
+}
+
+export default ProjectUsers

package/src/widgets/projectUsers/index.js

@@ -0,0 +1,6 @@
+import ProjectUsers from './ProjectUsers'
+
+export default {
+  name: 'project-users',
+  component: ProjectUsers,
+}

package/src/widgets/sanityTutorials/SanityTutorials.js

@@ -0,0 +1,152 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import {Flex, Grid, Stack, Heading, Container, Card, Text, Button} from '@sanity/ui'
+import Tutorial from './Tutorial'
+import dataAdapter from './dataAdapter'
+
+const FeedItem = ({feedItem}) => {
+  // Check to see if the feed item has the content needed to render an item with a link and poster image
+  const isEmpty =
+    !feedItem.title || (!feedItem.guideOrTutorial && !feedItem.externalLink && !feedItem.feedItems)
+
+  if (isEmpty) {
+    return null
+  }
+  const subtitle = feedItem.description
+  const {guideOrTutorial = {}} = feedItem
+  return (
+    <Tutorial
+      title={feedItem.title}
+      href={createUrl(guideOrTutorial.slug, guideOrTutorial._type) || feedItem.externalLink}
+      presenterSubtitle={subtitle}
+      showPlayIcon={feedItem.hasVideo}
+      posterURL={feedItem.poster ? urlBuilder.image(feedItem.poster).height(360).url() : undefined}
+    />
+  )
+}
+
+const {urlBuilder, getFeed} = dataAdapter
+
+function createUrl(slug, type) {
+  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
+}
+
+class SanityTutorials extends React.Component {
+  static propTypes = {
+    templateRepoId: PropTypes.string,
+  }
+
+  static defaultProps = {
+    templateRepoId: null,
+  }
+
+  state = {
+    feedItems: [],
+  }
+
+  componentDidMount() {
+    const {templateRepoId} = this.props
+    this.subscription = getFeed(templateRepoId).subscribe((response) => {
+      this.setState({
+        title: response.title,
+        feedItems: response.items,
+      })
+    })
+  }
+
+  componentWillUnmount() {
+    if (this.subscription) {
+      this.subscription.unsubscribe()
+    }
+  }
+
+  render() {
+    const {title = 'Learn about Sanity', feedItems} = this.state
+
+    // Filter out items and sections for layout purposes
+    const sections = feedItems.filter((i) => i._type === 'feedSection')
+    const items = feedItems.filter((i) => i._type === 'feedItem')
+
+    const columns = (length) => (length < 4 ? [1, 2, 3] : [1, 2, 3, 4])
+
+    return (
+      <Container width={4}>
+        <Stack space={6} paddingBottom={4}>
+          <Card
+            tone="primary"
+            padding={4}
+            radius={2}
+            border
+            marginTop={4}
+            data-name="sanity-tutorials-widget-docs-link"
+          >
+            <Flex direction={['column', 'column', 'row']}>
+              <Stack space={4} flex={1} paddingRight={[0, 0, 4]}>
+                <Heading as="h2">Getting started guide</Heading>
+                <Text as="p">
+                  {`It's time to learn how to build schemas, create content, and connect it to other
+                  applications.`}
+                </Text>
+              </Stack>
+              <Flex paddingTop={[4, 4, 0]} align="center">
+                <Stack flex={1}>
+                  <Button
+                    paddingY={3}
+                    paddingX={5}
+                    tone="primary"
+                    as="a"
+                    target="_blank"
+                    href="https://www.sanity.io/docs?ref=studio-dashboard"
+                    text="Go to docs"
+                  />
+                </Stack>
+              </Flex>
+            </Flex>
+          </Card>
+          {sections &&
+            sections?.length > 0 &&
+            sections.map((section) => {
+              return (
+                section?.sectionItems && (
+                  <Stack space={4} key={section._id}>
+                    <Heading>{section.title}</Heading>
+                    <Grid
+                      as="ul"
+                      columns={columns(section?.sectionItems?.length)}
+                      gap={4}
+                      data-name="sanity-dashboard-widget-tutorials-section"
+                    >
+                      {section?.sectionItems.map((item) => (
+                        <Flex as="li" key={item._id}>
+                          <FeedItem feedItem={item} />
+                        </Flex>
+                      ))}
+                    </Grid>
+                  </Stack>
+                )
+              )
+            })}
+          {items && items.length > 0 && (
+            <Stack space={4}>
+              <Heading>{title}</Heading>
+              <Grid as="ul" columns={columns(items?.length)} gap={4}>
+                {items.map((feedItem) => (
+                  <Flex as="li" key={feedItem._id}>
+                    <FeedItem feedItem={feedItem} />
+                  </Flex>
+                ))}
+              </Grid>
+            </Stack>
+          )}
+        </Stack>
+      </Container>
+    )
+  }
+}
+
+export default SanityTutorials

package/src/widgets/sanityTutorials/Tutorial.js

@@ -0,0 +1,158 @@
+import React from 'react'
+import {Card, Box, Flex, Text, Stack} from '@sanity/ui'
+import styled from 'styled-components'
+
+// eslint-disable-next-line no-useless-escape
+const youtubeRegex = /youtu(?:.*\/v\/|.*v\=|\.be\/)([A-Za-z0-9_-]{11})/
+
+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;
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+`
+
+const Poster = styled.img`
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+  object-fit: cover;
+  display: block;
+  border-radius: inherit;
+
+  &:not([src]) {
+    display: none;
+  }
+`
+const YoutubeContainer = styled(Card)`
+  position: relative;
+  padding-bottom: 56.25%;
+  overflow: hidden;
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+
+  iframe {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+  }
+`
+const YoutubeEmbed = ({embedId}) => (
+  <YoutubeContainer radius={3}>
+    <iframe
+      width="853"
+      height="480"
+      src={`https://www.youtube.com/embed/${embedId}`}
+      frameBorder="0"
+      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+      allowFullScreen
+    />
+  </YoutubeContainer>
+)
+class Tutorial extends React.PureComponent {
+  static defaultProps = {
+    posterURL: null,
+    showPlayIcon: false,
+  }
+
+  render() {
+    const {title, posterURL, showPlayIcon, href, presenterSubtitle} = this.props
+
+    const isYoutube = showPlayIcon && href && href.match(youtubeRegex)
+
+    return isYoutube ? (
+      <Card
+        space={2}
+        sizing="border"
+        flex={1}
+        radius={3}
+        style={{position: 'relative'}}
+        border
+        paddingBottom={2}
+      >
+        <Stack space={2} height="fill">
+          <YoutubeEmbed embedId={href.match(youtubeRegex)[1]} />
+          <Stack space={3} flex={1} padding={2}>
+            <Text as="h3" size={1} weight="bold">
+              {title}
+            </Text>
+            {presenterSubtitle && (
+              <Text size={1} muted>
+                {presenterSubtitle}
+              </Text>
+            )}
+          </Stack>
+        </Stack>
+      </Card>
+    ) : (
+      <Root flex={1}>
+        <Card
+          sizing="border"
+          flex={1}
+          radius={3}
+          as="a"
+          href={href}
+          target="_blank"
+          style={{position: 'relative'}}
+          border
+          paddingBottom={2}
+        >
+          <Stack space={2} height="fill">
+            {posterURL && (
+              <PosterCard radius={3}>
+                <Poster src={posterURL} />
+              </PosterCard>
+            )}
+            <Stack space={3} flex={1} padding={2}>
+              <Text as="h3" size={1} weight="bold">
+                {title}
+              </Text>
+              {presenterSubtitle && (
+                <Text size={1} muted>
+                  {presenterSubtitle}
+                </Text>
+              )}
+            </Stack>
+          </Stack>
+        </Card>
+      </Root>
+    )
+  }
+}
+
+export default Tutorial

package/src/widgets/sanityTutorials/dataAdapter.js

@@ -0,0 +1,17 @@
+import imageUrlBuilder from '@sanity/image-url'
+import {versionedClient} from '../../versionedClient'
+
+const tutorialsProjectConfig = {
+  projectId: '3do82whm',
+  dataset: 'next',
+}
+
+export default {
+  getFeed: (templateRepoId) => {
+    const uri = templateRepoId
+      ? `/addons/dashboard?templateRepoId=${templateRepoId}`
+      : '/addons/dashboard'
+    return versionedClient.observable.request({uri, withCredentials: false})
+  },
+  urlBuilder: imageUrlBuilder(tutorialsProjectConfig),
+}

package/src/widgets/sanityTutorials/index.js

@@ -0,0 +1,7 @@
+import SanityTutorials from './SanityTutorials'
+
+export default {
+  name: 'sanity-tutorials',
+  component: SanityTutorials,
+  layout: {width: 'full'},
+}

package/.babelrc

@@ -1,4 +0,0 @@
-{
-  "extends": "../../../.babelrc",
-  "presets": ["@babel/react", "@babel/typescript"]
-}

package/tsconfig.json

@@ -1,17 +0,0 @@
-{
-    "extends": "../../../tsconfig",
-    "include": ["src"],
-    "compilerOptions": {
-      "composite": true,
-      "outDir": "./dist/dts",
-      "rootDir": "./src",
-      "jsx": "react",
-      "noImplicitAny": false
-    },
-    "references": [
-      {
-        "path": "../base"
-      },
-    ]
-  }
-