@sanity/dashboard 5.0.0 → 6.0.0

package/sanity.json

@@ -1,8 +0,0 @@
-{
-  "parts": [
-    {
-      "implements": "part:@sanity/base/sanity-root",
-      "path": "./v2-incompatible.js"
-    }
-  ]
-}

package/src/components/DashboardLayout.tsx

@@ -1,10 +0,0 @@
-import React, {PropsWithChildren} from 'react'
-import {Container} from '@sanity/ui'
-
-export function DashboardLayout(props: PropsWithChildren<{}>) {
-  return (
-    <Container width={4} padding={4} sizing="border" style={{height: '100%', overflowY: 'auto'}}>
-      {props.children}
-    </Container>
-  )
-}

package/src/components/DashboardWidgetContainer.tsx

@@ -1,69 +0,0 @@
-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 DashboardWidgetContainer = forwardRef(function DashboardWidgetContainer(
-  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>
-  )
-})

package/src/components/NotFoundWidget.tsx

@@ -1,30 +0,0 @@
-import React, {PropsWithChildren, ReactNode} from 'react'
-import {Card, Stack, Heading, Box} from '@sanity/ui'
-import {styled} from 'styled-components'
-
-const Root = styled(Card)`
-  display: flex;
-  flex-direction: column;
-  justify-content: stretch;
-  height: 100%;
-`
-
-export type NotFoundWidgetProps = PropsWithChildren<{
-  title?: ReactNode
-}>
-
-export function NotFoundWidget(props: NotFoundWidgetProps) {
-  const {title, children} = props
-  return (
-    <Root radius={3} paddingX={3} paddingY={4} tone="critical">
-      <Stack space={2}>
-        {title && (
-          <Heading size={1} as="h2">
-            {title}
-          </Heading>
-        )}
-        {children && <Box>{children}</Box>}
-      </Stack>
-    </Root>
-  )
-}

package/src/components/WidgetGroup.tsx

@@ -1,106 +0,0 @@
-import React from 'react'
-import {styled, css} from 'styled-components'
-import {Box, Card, Grid, Text} from '@sanity/ui'
-import {WidgetContainer} from '../containers/WidgetContainer'
-import {DashboardConfig, LayoutConfig, DashboardWidget} from '../types'
-
-const media = {
-  small: (...args: Parameters<typeof css>) => css`
-    @media (min-width: ${({theme}) => theme.sanity.media[0]}px) {
-      ${css(...args)}
-    }
-  `,
-  medium: (...args: Parameters<typeof css>) => 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;
-    `}
-  }
-`
-
-export interface WidgetGroupProps {
-  config: Partial<DashboardConfig>
-}
-
-const NO_WIDGETS: DashboardWidget[] = []
-const NO_LAYOUT: LayoutConfig = {}
-
-export function WidgetGroup(props: WidgetGroupProps) {
-  const {
-    config: {layout = NO_LAYOUT, widgets = NO_WIDGETS},
-  } = props
-  return (
-    <Root
-      autoFlow="row dense"
-      data-width={layout.width || 'auto'}
-      data-height={layout.height || 'auto'}
-      gap={4}
-    >
-      {widgets.length ? null : (
-        <Card padding={4} shadow={1} tone="primary">
-          <Text align="center">Add some widgets to populate this space.</Text>
-        </Card>
-      )}
-      {widgets.map((widgetConfig, index) => {
-        if (widgetConfig.type === '__experimental_group') {
-          return <WidgetGroup key={index} config={widgetConfig} />
-        }
-        if (widgetConfig.component) {
-          return <WidgetContainer key={index} {...widgetConfig} />
-        }
-        return <Box key={index}>{widgetConfig.name} is missing widget component</Box>
-      })}
-    </Root>
-  )
-}

package/src/containers/Dashboard.tsx

@@ -1,19 +0,0 @@
-import React from 'react'
-import {DashboardLayout} from '../components/DashboardLayout'
-import {WidgetGroup} from '../components/WidgetGroup'
-import {DashboardContext} from './DashboardContext'
-import {DashboardConfig} from '../types'
-
-export function Dashboard({config}: {config: DashboardConfig}) {
-  if (!config) {
-    return null
-  }
-
-  return (
-    <DashboardContext.Provider value={config}>
-      <DashboardLayout>
-        <WidgetGroup config={config} />
-      </DashboardLayout>
-    </DashboardContext.Provider>
-  )
-}

package/src/containers/DashboardContext.tsx

@@ -1,8 +0,0 @@
-import {createContext, useContext} from 'react'
-import {DashboardConfig} from '../types'
-
-export const DashboardContext = createContext<DashboardConfig>({widgets: []})
-
-export function useDashboardConfig(): DashboardConfig {
-  return useContext(DashboardContext)
-}

package/src/containers/WidgetContainer.tsx

@@ -1,21 +0,0 @@
-import React, {createElement, useMemo} from 'react'
-import {useDashboardConfig} from './DashboardContext'
-import {Card} from '@sanity/ui'
-import {DashboardWidget} from '../types'
-
-export function WidgetContainer(props: DashboardWidget) {
-  const config = useDashboardConfig()
-  const layout = useMemo(
-    () => ({
-      ...(props.layout || {}),
-      ...(config.layout || {}),
-    }),
-    [props.layout, config.layout],
-  )
-
-  return (
-    <Card shadow={1} data-width={layout.width} data-height={layout.height}>
-      {createElement(props.component, {})}
-    </Card>
-  )
-}

package/src/index.ts

@@ -1,7 +0,0 @@
-export * from './types'
-export * from './components/DashboardWidgetContainer'
-export * from './widgets/projectInfo'
-export * from './widgets/projectUsers'
-export * from './widgets/sanityTutorials'
-
-export {type DashboardPluginConfig, dashboardTool} from './plugin'

package/src/plugin.tsx

@@ -1,72 +0,0 @@
-import React, {ComponentType, CSSProperties} from 'react'
-import {Dashboard} from './containers/Dashboard'
-import {definePlugin} from 'sanity'
-import {DashboardConfig, DashboardWidget, LayoutConfig} from './types'
-
-const strokeStyle: CSSProperties = {
-  stroke: 'currentColor',
-  strokeWidth: 1.2,
-}
-
-const DashboardIcon = () => (
-  <svg
-    data-sanity-icon
-    viewBox="0 0 25 25"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    preserveAspectRatio="xMidYMid"
-    width="1em"
-    height="1em"
-  >
-    <path d="M19.5 19.5H5.5V5.5H19.5V19.5Z" style={strokeStyle} />
-    <path d="M5.5 12.5H19.5" style={strokeStyle} />
-    <path d="M14.5 19.5V12.5M10.5 12.5V5.5" style={strokeStyle} />
-  </svg>
-)
-
-export interface DashboardPluginConfig {
-  /**
-   * Dashboard tool title
-   */
-  title?: string
-  /**
-   * Dashboard tool name (used in url path)
-   */
-  name?: string
-  /**
-   * Dashboard tool icon
-   */
-  icon?: ComponentType
-  widgets?: DashboardWidget[]
-
-  /**
-   * Will be used for widgets that do not define a layout directly.
-   */
-  defaultLayout?: LayoutConfig
-}
-
-export const dashboardTool = definePlugin<DashboardPluginConfig>((config = {}) => {
-  const pluginConfig: DashboardConfig = {
-    layout: config.defaultLayout ?? {},
-    widgets: config.widgets ?? [],
-  }
-
-  const title = config.title ?? 'Dashboard'
-  const name = config.name ?? 'dashboard'
-  const icon = config.icon ?? DashboardIcon
-
-  return {
-    name: 'dashboard',
-    tools: (prev, context) => {
-      return [
-        ...prev,
-        {
-          title,
-          name,
-          icon,
-          component: () => <Dashboard config={pluginConfig} />,
-        },
-      ]
-    },
-  }
-})

package/src/types.ts

@@ -1,21 +0,0 @@
-import {ComponentClass, FunctionComponent} from 'react'
-
-export interface DashboardWidget {
-  name: string
-  type?: '__experimental_group'
-  component: FunctionComponent<any> | ComponentClass<any>
-  layout?: LayoutConfig
-  widgets?: DashboardWidget[]
-}
-
-export type LayoutSize = 'auto' | 'small' | 'medium' | 'large' | 'full'
-
-export interface LayoutConfig {
-  width?: LayoutSize
-  height?: LayoutSize
-}
-
-export interface DashboardConfig {
-  widgets: DashboardWidget[]
-  layout?: LayoutConfig
-}

package/src/versionedClient.ts

@@ -1,5 +0,0 @@
-import {useClient} from 'sanity'
-
-export function useVersionedClient() {
-  return useClient({apiVersion: '2024-08-01'})
-}

package/src/widgets/projectInfo/ProjectInfo.tsx

@@ -1,221 +0,0 @@
-import React, {useEffect, useMemo, useState} from 'react'
-import {Box, Card, Stack, Heading, Grid, Label, Text, Code, Button} from '@sanity/ui'
-import {useVersionedClient} from '../../versionedClient'
-import {Subscription} from 'rxjs'
-import {WidgetContainer} from '../../containers/WidgetContainer'
-import {DashboardWidgetContainer} from '../../components/DashboardWidgetContainer'
-import {type DashboardWidget} from '../../types'
-import {type App, type ProjectInfoProps, type ProjectData, UserApplication} from './types'
-
-function isUrl(url?: string) {
-  return url && /^https?:\/\//.test(`${url}`)
-}
-
-function getGraphQLUrl(projectId: string, dataset: string) {
-  return `https://${projectId}.api.sanity.io/v1/graphql/${dataset}/default`
-}
-
-function getGroqUrl(projectId: string, dataset: string) {
-  return `https://${projectId}.api.sanity.io/v1/groq/${dataset}`
-}
-
-function getManageUrl(projectId: string) {
-  return `https://manage.sanity.io/projects/${projectId}`
-}
-
-const NO_EXPERIMENTAL: DashboardWidget[] = []
-const NO_DATA: ProjectData[] = []
-
-export function ProjectInfo(props: ProjectInfoProps) {
-  const {__experimental_before = NO_EXPERIMENTAL, data = NO_DATA} = props
-  const [studioApps, setStudioApps] = useState<UserApplication[] | {error: string} | undefined>()
-  const [graphQLApi, setGraphQLApi] = useState<string | {error: string} | undefined>()
-  const versionedClient = useVersionedClient()
-  const {projectId = 'unknown', dataset = 'unknown'} = versionedClient.config()
-
-  useEffect(() => {
-    const subscriptions: Subscription[] = []
-
-    subscriptions.push(
-      versionedClient.observable
-        .request<UserApplication[]>({uri: '/user-applications', tag: 'dashboard.project-info'})
-        .subscribe({
-          next: (result) => setStudioApps(result.filter((app) => app.type === 'studio')),
-          error: (error) => {
-            console.error('Error while resolving user applications', error)
-            setStudioApps({
-              error: 'Something went wrong while resolving user applications. See console.',
-            })
-          },
-        }),
-    )
-
-    // ping assumed graphql endpoint
-    subscriptions.push(
-      versionedClient.observable
-        .request({
-          method: 'HEAD',
-          uri: `/graphql/${dataset}/default`,
-          tag: 'dashboard.project-info.graphql-api',
-        })
-        .subscribe({
-          next: () => setGraphQLApi(getGraphQLUrl(projectId, dataset)),
-          error: (error) => {
-            if (error.statusCode === 404) {
-              setGraphQLApi(undefined)
-            } else {
-              console.error('Error while looking for graphQLApi', error)
-              setGraphQLApi({
-                error: 'Something went wrong while looking up graphQLApi. See console.',
-              })
-            }
-          },
-        }),
-    )
-
-    return () => {
-      subscriptions.forEach((s) => s.unsubscribe())
-    }
-  }, [dataset, projectId, versionedClient, setGraphQLApi])
-
-  const assembleTableRows = useMemo(() => {
-    let result: App[] = [
-      {
-        title: 'Sanity project',
-        rows: [
-          {title: 'Project ID', value: projectId},
-          {title: 'Dataset', value: dataset},
-        ],
-      },
-    ]
-
-    const apps: App[] = data.filter((item) => item.category === 'apps')
-
-    // Handle studios
-    ;(Array.isArray(studioApps) ? studioApps : []).forEach((app) => {
-      apps.push({
-        title: app.title || 'Studio',
-        value: app.urlType === 'internal' ? `https://${app.appHost}.sanity.studio` : app.appHost,
-      })
-    })
-
-    if (apps.length > 0) {
-      result = result.concat([{title: 'Apps', rows: apps}])
-    }
-
-    // Handle APIs
-    result = result.concat(
-      [
-        {
-          title: 'APIs',
-          rows: [
-            {title: 'GROQ', value: getGroqUrl(projectId, dataset)},
-            {
-              title: 'GraphQL',
-              value: (typeof graphQLApi === 'object' ? 'Error' : graphQLApi) ?? 'Not deployed',
-            },
-          ],
-        },
-      ],
-      data.filter((item) => item.category === 'apis'),
-    )
-
-    // Handle whatever else there might be
-    const otherStuff: Record<string, ProjectData[]> = {}
-    data.forEach((item) => {
-      if (item.category && 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
-  }, [graphQLApi, studioApps, projectId, dataset, data])
-
-  return (
-    <>
-      {__experimental_before.map((widgetConfig, idx) => (
-        <WidgetContainer key={idx} {...widgetConfig} />
-      ))}
-      <Box height="fill" marginTop={__experimental_before?.length > 0 ? 4 : 0}>
-        <DashboardWidgetContainer
-          footer={
-            <Button
-              style={{width: '100%'}}
-              paddingX={2}
-              paddingY={4}
-              mode="bleed"
-              tone="primary"
-              text="Manage project"
-              as="a"
-              href={getManageUrl(projectId)}
-            />
-          }
-        >
-          <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>
-              {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.value}-${row.title}`} columns={2} role="row">
-                            <Text weight="medium" role="rowheader">
-                              {row.title}
-                            </Text>
-                            {typeof row.value === 'object' && (
-                              <Text size={1}>{row.value?.error}</Text>
-                            )}
-                            {typeof row.value === 'string' && (
-                              <>
-                                {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>
-        </DashboardWidgetContainer>
-      </Box>
-    </>
-  )
-}

package/src/widgets/projectInfo/index.ts

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

package/src/widgets/projectInfo/types.ts

@@ -1,28 +0,0 @@
-import {type DashboardWidget} from '../../types'
-
-export interface ProjectInfoProps {
-  __experimental_before?: DashboardWidget[]
-  data: ProjectData[]
-}
-
-export interface App {
-  title: string
-  rows?: App[]
-  value?: string | {error: string}
-}
-
-export interface ProjectData {
-  title: string
-  category?: string
-}
-
-export interface UserApplication {
-  id: string
-  projectId: string
-  title: string | null
-  type: string
-  urlType: 'internal' | 'external'
-  appHost: string
-
-  // … there are other props here, but we don't really care about them for our use case
-}