@sanity/dashboard 0.136.3-purple-unicorn-patch.5627

package/src/components/WidgetGroup.js

@@ -0,0 +1,97 @@
+/* eslint-disable react/prop-types */
+import React from 'react'
+import styled, {css} from 'styled-components'
+import {Grid} from '@sanity/ui'
+import {WidgetContainer} from '../legacyParts'
+
+const media = {
+  small: (...args) =>
+    css`
+      @media (min-width: ${({theme}) => theme.sanity.media[0]}px) {
+        ${css(...args)}
+      }
+    `,
+  medium: (...args) =>
+    css`
+      @media (min-width: ${({theme}) => theme.sanity.media[2]}px) {
+        ${css(...args)}
+      }
+    `,
+}
+
+const Root = styled(Grid)`
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+
+  & > div {
+    overflow: hidden;
+  }
+
+  & > div[data-width='medium'] {
+    ${media.small`
+      grid-column: span 2;
+    `}
+  }
+
+  & > div[data-width='large'] {
+    ${media.small`
+      grid-column: span 2;
+    `}
+
+    ${media.medium`
+      grid-column: span 3;
+    `}
+  }
+
+  & > div[data-width='full'] {
+    ${media.small`
+      grid-column: 1 / -1;
+    `}
+  }
+
+  & > div[data-height='medium'] {
+    ${media.small`
+      grid-row: span 2;
+    `}
+  }
+
+  & > div[data-height='large'] {
+    ${media.small`
+      grid-row: span 2;
+    `}
+
+    ${media.medium`
+      grid-row: span 3;
+    `}
+  }
+
+  & > div[data-height='full'] {
+    ${media.medium`
+      grid-row: 1 / -1;
+    `}
+  }
+`
+
+function WidgetGroup(props) {
+  const config = props.config || {}
+  const widgets = config.widgets || []
+  const layout = config.layout || {}
+
+  return (
+    <Root
+      autoFlow="dense"
+      data-width={layout.width || 'auto'}
+      data-height={layout.height || 'auto'}
+      gap={4}
+    >
+      {widgets.map((widgetConfig, index) => {
+        if (widgetConfig.type === '__experimental_group') {
+          return <WidgetGroup key={String(index)} config={widgetConfig} />
+        }
+
+        return <WidgetContainer key={String(index)} config={widgetConfig} />
+      })}
+    </Root>
+  )
+}
+
+export default WidgetGroup

package/src/components/dashboardWidget.tsx

@@ -0,0 +1,70 @@
+import React, {forwardRef} from 'react'
+import {Card, Box, Heading} from '@sanity/ui'
+import styled from 'styled-components'
+
+const Root = styled(Card)`
+  display: flex;
+  flex-direction: column;
+  justify-content: stretch;
+  height: 100%;
+  box-sizing: border-box;
+  position: relative;
+`
+
+const Header = styled(Card)`
+  position: sticky;
+  top: 0;
+  z-index: 2;
+  border-top-left-radius: inherit;
+  border-top-right-radius: inherit;
+`
+
+const Footer = styled(Card)`
+  position: sticky;
+  overflow: hidden;
+  bottom: 0;
+  z-index: 2;
+  border-bottom-right-radius: inherit;
+  border-bottom-left-radius: inherit;
+  margin-top: auto;
+`
+
+const Content = styled(Box)`
+  position: relative;
+  z-index: 1;
+  height: stretch;
+  min-height: 21.5em;
+
+  @media (min-width: ${({theme}) => theme.sanity.media[0]}px) {
+    overflow-y: auto;
+    outline: none;
+  }
+`
+
+interface DashboardWidgetProps {
+  header?: string
+  children: React.ReactNode
+  footer?: React.ReactNode
+}
+
+export const DashboardWidget = forwardRef(
+  (props: DashboardWidgetProps, ref: React.Ref<HTMLDivElement>) => {
+    const {header, children, footer} = props
+
+    return (
+      <Root radius={3} display="flex" ref={ref}>
+        {header && (
+          <Header borderBottom paddingX={3} paddingY={4}>
+            <Heading size={1} textOverflow="ellipsis">
+              {header}
+            </Heading>
+          </Header>
+        )}
+        {children && <Content>{children}</Content>}
+        {footer && <Footer borderTop>{footer}</Footer>}
+      </Root>
+    )
+  }
+)
+
+DashboardWidget.displayName = 'DashboardWidget'

package/src/containers/Dashboard.js

@@ -0,0 +1,20 @@
+import React from 'react'
+import DashboardLayout from '../components/DashboardLayout'
+import WidgetGroup from '../components/WidgetGroup'
+import {dashboardConfig} from '../legacyParts'
+
+function Dashboard() {
+  if (!dashboardConfig) {
+    return null
+  }
+
+  const widgetConfigs = dashboardConfig.widgets || []
+
+  return (
+    <DashboardLayout>
+      <WidgetGroup config={{widgets: widgetConfigs}} />
+    </DashboardLayout>
+  )
+}
+
+export default Dashboard

package/src/containers/WidgetContainer.js

@@ -0,0 +1,52 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+import NotFoundWidget from '../components/NotFoundWidget'
+import {definitions} from '../legacyParts'
+
+function WidgetContainer(props) {
+  const config = props.config || {}
+  const definition = Array.isArray(definitions)
+    ? definitions.find((wid) => wid.name === config.name)
+    : null
+
+  if (definition) {
+    const options = {
+      ...(definition.options || {}),
+      ...(config.options || {}),
+    }
+    const layout = {
+      ...(definition.layout || {}),
+      ...(config.layout || {}),
+    }
+
+    return (
+      <div data-width={layout.width} data-height={layout.height}>
+        {React.createElement(definition.component, options)}
+      </div>
+    )
+  }
+
+  const layout = config.layout || {}
+
+  return (
+    <div data-width={layout.width} data-height={layout.height}>
+      <NotFoundWidget title={<>Not found: "{config.name}"</>}>
+        <p>
+          Make sure your <code>sanity.json</code> file mentions such a widget and that it’s an
+          implementation of <code>part:@sanity/dashboard/widget</code>.
+        </p>
+      </NotFoundWidget>
+    </div>
+  )
+}
+
+WidgetContainer.propTypes = {
+  // eslint-disable-next-line react/forbid-prop-types
+  config: PropTypes.any,
+}
+
+WidgetContainer.defaultProps = {
+  config: null,
+}
+
+export default WidgetContainer

package/src/dashboardConfig.js

@@ -0,0 +1,3 @@
+export default {
+  widgets: [{name: 'sanity-tutorials'}, {name: 'project-info'}, {name: 'project-users'}],
+}

package/src/legacyParts.ts

@@ -0,0 +1,11 @@
+// @todo: remove the following line when part imports has been removed from this file
+///<reference types="@sanity/types/parts" />
+
+import WidgetContainer from 'part:@sanity/dashboard/widget-container'
+import dashboardConfig from 'part:@sanity/dashboard/config?'
+import sanityClient from 'part:@sanity/base/client'
+import definitions from 'all:part:@sanity/dashboard/widget?'
+import DefaultPreview from 'part:@sanity/components/previews/default'
+import userStore from 'part:@sanity/base/user'
+
+export {WidgetContainer, dashboardConfig, sanityClient, definitions, DefaultPreview, userStore}

package/src/versionedClient.js

@@ -0,0 +1,9 @@
+import {sanityClient} from './legacyParts'
+
+/**
+ * Only for use inside of @sanity/dashboard
+ * Don't import this from external modules.
+ *
+ * @internal
+ */
+export const versionedClient = sanityClient.withConfig({apiVersion: '1'})

package/src/widget.css

@@ -0,0 +1,62 @@
+@import 'part:@sanity/base/theme/variables-style';
+
+.container {
+  display: flex;
+  flex-direction: column;
+  justify-content: stretch;
+  height: 100%;
+  border-radius: var(--border-radius-base);
+  background-color: var(--component-bg);
+  box-sizing: border-box;
+  position: relative;
+}
+
+.containerWithPadding {
+  composes: container;
+  padding: var(--medium-padding);
+}
+
+.header {
+  padding: var(--small-padding) 0;
+}
+
+.title {
+  composes: heading4 from 'part:@sanity/base/theme/typography/headings-style';
+  margin: var(--small-padding) var(--medium-padding);
+}
+
+.content {
+  display: block;
+  margin: 0;
+  padding: 0;
+  min-height: 21.5em;
+
+  @media (--screen-medium) {
+    height: stretch;
+    overflow-y: auto;
+  }
+}
+
+.footer {
+  display: flex;
+  text-align: center;
+  font-weight: 600;
+  min-height: 4em;
+  height: 4em;
+  margin-top: auto;
+  overflow: hidden;
+
+  @nest & > * {
+    width: 100%;
+  }
+}
+
+/* TODO: remove after changing document list plugin */
+.listContainer {
+  composes: content;
+}
+
+/* TODO: remove after changing document list plugin */
+.bottomButtonContainer {
+  composes: footer;
+}

package/src/widgets/projectInfo/ProjectInfo.js

@@ -0,0 +1,232 @@
+/* eslint-disable react/forbid-prop-types, no-console */
+import React from 'react'
+import {isPlainObject} from 'lodash'
+import PropTypes from 'prop-types'
+import {Box, Card, Stack, Heading, Grid, Label, Text, Code, Button} from '@sanity/ui'
+import {versionedClient} from '../../versionedClient'
+import {DashboardWidget} from '../../DashboardTool'
+import {WidgetContainer} from '../../legacyParts'
+
+const {projectId, dataset} = versionedClient.config()
+
+function isUrl(url) {
+  return /^https?:\/\//.test(`${url}`)
+}
+
+function getGraphQlUrl() {
+  return `https://${projectId}.api.sanity.io/v1/graphql/${dataset}/default`
+}
+
+function getGroqUrl() {
+  return `https://${projectId}.api.sanity.io/v1/groq/${dataset}`
+}
+
+function getManageUrl() {
+  return `https://manage.sanity.io/projects/${projectId}`
+}
+
+class ProjectInfo extends React.PureComponent {
+  static propTypes = {
+    // eslint-disable-next-line camelcase
+    __experimental_before: PropTypes.array,
+    data: PropTypes.array,
+  }
+  static defaultProps = {
+    // eslint-disable-next-line camelcase
+    __experimental_before: [],
+    data: [],
+  }
+
+  state = {
+    studioHost: null,
+    graphqlApi: null,
+  }
+
+  componentDidMount() {
+    // fetch project data
+    this.subscriptions = []
+
+    this.subscriptions.push(
+      versionedClient.observable.request({uri: `/projects/${projectId}`}).subscribe({
+        next: (result) => {
+          const {studioHost} = result
+          this.setState({studioHost: studioHost ? `https://${studioHost}.sanity.studio` : null})
+        },
+        error: (error) => {
+          console.log('Error while looking for studioHost', error)
+          this.setState({
+            studioHost: {
+              error: 'Something went wrong while looking up studioHost. See console.',
+            },
+          })
+        },
+      })
+    )
+
+    // ping assumed graphql endpoint
+    this.subscriptions.push(
+      versionedClient.observable
+        .request({
+          method: 'HEAD',
+          uri: `/graphql/${dataset}/default`,
+        })
+        .subscribe({
+          next: () => this.setState({graphqlApi: getGraphQlUrl()}),
+          error: (error) => {
+            if (error.statusCode === 404) {
+              this.setState({graphqlApi: null})
+            } else {
+              console.log('Error while looking for graphqlApi', error)
+              this.setState({
+                graphqlApi: {
+                  error: 'Something went wrong while looking up graphqlApi. See console.',
+                },
+              })
+            }
+          },
+        })
+    )
+  }
+
+  componentWillUnmount() {
+    this.subscriptions.forEach((sub) => sub.unsubscribe())
+  }
+
+  assembleTableRows() {
+    const {graphqlApi, studioHost} = this.state
+    const propsData = this.props.data
+
+    let result = [
+      {
+        title: 'Sanity project',
+        rows: [
+          {title: 'Project ID', value: projectId},
+          {title: 'Dataset', value: dataset},
+        ],
+      },
+    ]
+
+    // Handle any apps
+    const apps = [studioHost ? {title: 'Studio', value: studioHost} : null]
+      .concat(propsData.filter((item) => item.category === 'apps'))
+      .filter(Boolean)
+    if (apps.length > 0) {
+      result = result.concat([{title: 'Apps', rows: apps}])
+    }
+
+    // Handle APIs
+    result = result.concat(
+      [
+        {
+          title: 'APIs',
+          rows: [
+            {title: 'GROQ', value: getGroqUrl()},
+            {title: 'GraphQL', value: graphqlApi || 'Not deployed'},
+          ],
+        },
+      ],
+      propsData.filter((item) => item.category === 'apis')
+    )
+
+    // Handle whatever else there might be
+    const otherStuff = {}
+    propsData.forEach((item) => {
+      if (item.category !== 'apps' && item.category !== 'apis') {
+        if (!otherStuff[item.category]) {
+          otherStuff[item.category] = []
+        }
+        otherStuff[item.category].push(item)
+      }
+    })
+    Object.keys(otherStuff).forEach((category) => {
+      result.push({title: category, rows: otherStuff[category]})
+    })
+
+    return result
+  }
+
+  render() {
+    return (
+      <>
+        {this.props.__experimental_before &&
+          this.props.__experimental_before.map((widgetConfig, idx) => (
+            <WidgetContainer key={String(idx)} config={widgetConfig} />
+          ))}
+        <Box height="fill" marginTop={this.props.__experimental_before?.length > 0 ? 4 : 0}>
+          <DashboardWidget
+            footer={
+              <Button
+                style={{width: '100%'}}
+                paddingX={2}
+                paddingY={4}
+                mode="bleed"
+                tone="primary"
+                text="Manage project"
+                as="a"
+                href={getManageUrl()}
+              />
+            }
+          >
+            <Card
+              paddingY={4}
+              radius={2}
+              role="table"
+              aria-label="Project info"
+              aria-describedby="project_info_table"
+            >
+              <Stack space={4}>
+                <Box paddingX={3} as="header">
+                  <Heading size={1} as="h2" id="project_info_table">
+                    Project info
+                  </Heading>
+                </Box>
+                {this.assembleTableRows().map((item) => {
+                  if (!item || !item.rows) {
+                    return null
+                  }
+
+                  return (
+                    <Stack key={item.title} space={3}>
+                      <Card borderBottom padding={3}>
+                        <Label size={0} muted role="columnheader">
+                          {item.title}
+                        </Label>
+                      </Card>
+                      <Stack space={4} paddingX={3} role="rowgroup">
+                        {item.rows.map((row) => {
+                          return (
+                            <Grid key={row.title} columns={2} role="row">
+                              <Text weight="medium" role="rowheader">
+                                {row.title}
+                              </Text>
+                              {isPlainObject(row.value) && <Text size={1}>{row.value.error}</Text>}
+                              {!isPlainObject(row.value) && (
+                                <>
+                                  {isUrl(row.value) ? (
+                                    <Text size={1} role="cell" style={{wordBreak: 'break-word'}}>
+                                      <a href={row.value}>{row.value}</a>
+                                    </Text>
+                                  ) : (
+                                    <Code size={1} role="cell" style={{wordBreak: 'break-word'}}>
+                                      {row.value}
+                                    </Code>
+                                  )}
+                                </>
+                              )}
+                            </Grid>
+                          )
+                        })}
+                      </Stack>
+                    </Stack>
+                  )
+                })}
+              </Stack>
+            </Card>
+          </DashboardWidget>
+        </Box>
+      </>
+    )
+  }
+}
+
+export default ProjectInfo

package/src/widgets/projectInfo/index.js

@@ -0,0 +1,7 @@
+import ProjectInfo from './ProjectInfo'
+
+export default {
+  name: 'project-info',
+  component: ProjectInfo,
+  layout: {width: 'medium'},
+}