[dashboard] Dashboard updates (#1248)

- Refactors dashboard’s framework components
- Adds support for grouped widgets
- Updates widgets
- Adds experimental support for rendering other widgets “inside” the project info widget
- Adjusts design of project info widget

packages/@sanity/dashboard/sanity.json

@@ -46,6 +46,14 @@
     {
       "implements": "part:@sanity/dashboard/widget-styles",
       "path": "widget.css"
+    },
+    {
+      "name": "part:@sanity/dashboard/widget-container",
+      "description": "A container component that resolves and renders widget components"
+    },
+    {
+      "implements": "part:@sanity/dashboard/widget-container",
+      "path": "containers/WidgetContainer"
     }
   ]
 }

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

@@ -1,5 +1,5 @@
 import React from 'react'
-import DashboardLayout from './components/DashboardLayout'
+import Dashboard from './containers/Dashboard'
 
 const Icon = () => (
   <svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -16,5 +16,5 @@ export default {
   title: 'Dashboard',
   name: 'dashboard',
   icon: Icon,
-  component: DashboardLayout
+  component: Dashboard
 }

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

@@ -1,6 +1,8 @@
 @import 'part:@sanity/base/theme/variables-style';
 
-.missingWidget {
-  padding: var(--medium-padding);
-  color: var(--state-danger-color);
+.root {
+  max-width: 100rem;
+  margin: 0 auto;
+  padding: var(--large-padding) var(--medium-padding);
+  box-sizing: border-box;
 }

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

@@ -1,53 +1,19 @@
-/* eslint-disable class-methods-use-this, no-console */
+import PropTypes from 'prop-types'
 import React from 'react'
-import {get} from 'lodash'
-import widgetDefinitions from 'all:part:@sanity/dashboard/widget?'
-import dashboardConfig from 'part:@sanity/dashboard/config?'
-import DashboardGrid from './DashboardGrid'
-import WidgetWrapper from './WidgetWrapper'
+
 import styles from './DashboardLayout.css'
 
 function DashboardLayout(props) {
-  if (!dashboardConfig) {
-    return null
-  }
-
-  const widgetConfigs = get(dashboardConfig, 'widgets', [])
-  return (
-    <DashboardGrid>
-      {widgetConfigs.map((widgetConfig, index) => {
-        const {name} = widgetConfig
-        const widgetDefinition = widgetDefinitions.find(wid => wid.name === name)
-        const key = `${name}_${index}`
+  return <div className={styles.root}>{props.children}</div>
+}
 
-        if (widgetDefinition) {
-          const widgetOptions = {
-            ...(widgetDefinition.options || {}),
-            ...(widgetConfig.options || {})
-          }
-          const widgetLayout = {...(widgetDefinition.layout || {}), ...(widgetConfig.layout || {})}
-          const Widget = widgetDefinition.component
-          return (
-            <WidgetWrapper key={key} {...widgetLayout}>
-              <Widget {...widgetOptions} />
-            </WidgetWrapper>
-          )
-        }
+DashboardLayout.propTypes = {
+  // eslint-disable-next-line react/forbid-prop-types
+  children: PropTypes.any
+}
 
-        return (
-          <WidgetWrapper key={key}>
-            <div className={styles.missingWidget}>
-              <h4>{`Could not find the Dashboard Widget named "${name}" `}</h4>
-              <p>
-                Make sure your <code>sanity.json</code> file mentions such a widget and that it's an
-                implementaion of <code>part:@sanity/dashboard/widget</code>
-              </p>
-            </div>
-          </WidgetWrapper>
-        )
-      })}
-    </DashboardGrid>
-  )
+DashboardLayout.defaultProps = {
+  children: 'Dummy'
 }
 
 export default DashboardLayout

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

@@ -0,0 +1,22 @@
+@import 'part:@sanity/base/theme/variables-style';
+
+.root {
+  composes: container from 'part:@sanity/dashboard/widget-styles';
+  background: #fcc;
+
+  @nest & > div {
+    padding: var(--medium-padding);
+  }
+}
+
+.title {
+  composes: heading4 from "part:@sanity/base/theme/typography/headings-style";
+  margin: 0 0 var(--small-padding);
+  padding: 0;
+}
+
+.content {
+  @nest & p {
+    margin: var(--small-padding) 0 0;
+  }
+}

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

@@ -0,0 +1,29 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+
+import styles from './NotFoundWidget.css'
+
+function NotFoundWidget(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>
+  )
+}
+
+NotFoundWidget.propTypes = {
+  // eslint-disable-next-line react/forbid-prop-types
+  children: PropTypes.any,
+  // eslint-disable-next-line react/forbid-prop-types
+  title: PropTypes.any
+}
+
+NotFoundWidget.defaultProps = {
+  children: null,
+  title: null
+}
+
+export default NotFoundWidget

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

@@ -0,0 +1,60 @@
+@import 'part:@sanity/base/theme/variables-style';
+
+@custom-media --grid-small-min (min-width: 520px);
+@custom-media --grid-medium-min (min-width: 820px);
+
+.root {
+  display: grid;
+  grid-gap: var(--medium-padding);
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  grid-template-rows: repeat(auto-fit, minmax(100px, 1fr));
+  grid-auto-flow: dense;
+
+  @nest & > div {
+    overflow: hidden;
+  }
+
+  @nest & > div[data-width="medium"] {
+    @media (--grid-small-min) {
+      grid-column: span 2;
+    }
+  }
+
+  @nest & > div[data-width="large"] {
+    @media (--grid-small-min) {
+      grid-column: span 2;
+    }
+
+    @media (--grid-medium-min) {
+      grid-column: span 3;
+    }
+  }
+
+  @nest & > div[data-width="full"] {
+    @media (--grid-small-min) {
+      grid-column: 1 / -1;
+    }
+  }
+
+  @nest & > div[data-height="medium"] {
+    @media (--grid-small-min) {
+      grid-row: span 2;
+    }
+  }
+
+  @nest & > div[data-height="large"] {
+    @media (--grid-small-min) {
+      grid-row: span 2;
+    }
+
+    @media (--grid-medium-min) {
+      grid-row: span 3;
+    }
+  }
+
+  @nest & > div[data-height="full"] {
+    @media (--grid-small-min) {
+      grid-row: 1 / -1;
+    }
+  }
+}

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

@@ -0,0 +1,29 @@
+/* eslint-disable react/prop-types */
+
+import React from 'react'
+import WidgetContainer from 'part:@sanity/dashboard/widget-container'
+
+import styles from './WidgetGroup.css'
+
+function WidgetGroup(props) {
+  const config = props.config || {}
+  const widgets = config.widgets || []
+  const layout = config.layout || {}
+  return (
+    <div
+      className={styles.root}
+      data-width={layout.width || 'auto'}
+      data-height={layout.height || 'auto'}
+    >
+      {widgets.map((widgetConfig, index) => {
+        if (widgetConfig.type === '__experimental_group') {
+          return <WidgetGroup key={String(index)} config={widgetConfig} />
+        }
+
+        return <WidgetContainer key={String(index)} config={widgetConfig} />
+      })}
+    </div>
+  )
+}
+
+export default WidgetGroup