refactor(dashboard): migrate to @sanity/ui (#2590)

* refactor(dashboard): migrate `DashboardLayout` to `@sanity/ui`

* refactor(dashboard): add `DashboardWidget` component

* refactor(dashboard): export parts from `legacyParts` file

* refactor(dashboard): migrate `sanityTutorials` widget to `@sanity/ui`

* refactor(dashboard): migrate `NotFoundWidget` to `@sanity/ui`

* refactor(dashboard): migrate `WidgetGroup` to `@sanity/ui`

* refactor(dashboard): migrate `ProjectUsers` to `@sanity/ui`

* refactor(dashboard): migrate `ProjectInfo` to `@sanity/ui`

* refactor(dashboard): add `@babel/typescript` to `.babelrc`

* chore(dashboard): update dependencies in package.json

* refactor(dashboard): remove storybook story

* refactor(dashboard): update `Dashboard` parts import

* refactor(dashboard): update `WidgetContainer` parts import

* refactor(dashboard): update `versionedClient` parts import

Author: Herman Wikner

packages/@sanity/dashboard/.babelrc

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

packages/@sanity/dashboard/package.json

@@ -19,9 +19,12 @@
     "sanity-tool"
   ],
   "dependencies": {
+    "@sanity/icons": "1.1.2",
     "@sanity/image-url": "^0.140.19",
+    "@sanity/ui": "0.34.4",
     "lodash": "^4.17.15",
-    "rxjs": "^6.5.3"
+    "rxjs": "^6.5.3",
+    "styled-components": "^5.2.1"
   },
   "devDependencies": {
     "prop-types": "^15.6.0",

packages/@sanity/dashboard/src/DashboardTool.js

@@ -22,6 +22,8 @@ const DashboardIcon = () => (
   </svg>
 )
 
+export * from './components/dashboardWidget'
+
 export default {
   title: 'Dashboard',
   name: 'dashboard',

packages/@sanity/dashboard/src/components/DashboardLayout.css

@@ -1,13 +1,12 @@
 import PropTypes from 'prop-types'
 import React from 'react'
-
-import styles from './DashboardLayout.css'
+import {Container} from '@sanity/ui'
 
 function DashboardLayout(props) {
   return (
-    <div className={styles.root}>
-      <div className={styles.inner}>{props.children}</div>
-    </div>
+    <Container width={4} padding={4} sizing="border" style={{minHeight: '100%'}}>
+      {props.children}
+    </Container>
   )
 }
 

packages/@sanity/dashboard/src/components/DashboardLayout.js

@@ -1,16 +1,28 @@
 import PropTypes from 'prop-types'
 import React from 'react'
+import {Card, Stack, Heading, Box} from '@sanity/ui'
+import styled from 'styled-components'
 
-import styles from './NotFoundWidget.css'
+const Root = styled(Card)`
+  display: flex;
+  flex-direction: column;
+  justify-content: stretch;
+  height: 100%;
+`
 
 function NotFoundWidget(props) {
+  const {title, children} = props
   return (
-    <div className={styles.root}>
-      <div>
-        {props.title && <h2 className={styles.title}>{props.title}</h2>}
-        <div className={styles.content}>{props.children}</div>
-      </div>
-    </div>
+    <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>
   )
 }
 

packages/@sanity/dashboard/src/components/NotFoundWidget.css

@@ -1,19 +1,87 @@
 /* eslint-disable react/prop-types */
-
 import React from 'react'
-import WidgetContainer from 'part:@sanity/dashboard/widget-container'
+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;
+    `}
 
-import styles from './WidgetGroup.css'
+    ${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 (
-    <div
-      className={styles.root}
+    <Root
+      autoFlow="dense"
       data-width={layout.width || 'auto'}
       data-height={layout.height || 'auto'}
+      gap={4}
     >
       {widgets.map((widgetConfig, index) => {
         if (widgetConfig.type === '__experimental_group') {
@@ -22,7 +90,7 @@ function WidgetGroup(props) {
 
         return <WidgetContainer key={String(index)} config={widgetConfig} />
       })}
-    </div>
+    </Root>
   )
 }
 

packages/@sanity/dashboard/src/components/NotFoundWidget.js

@@ -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'