[structure] Add divider builder method (#1331)

* [structure] Add divider builder method

* [desk-tool] Add placeholder implementation for list divider

* [tet-studio] Add example of using divider

* [desk-tool] Hariline divider

packages/@sanity/components/src/lists/styles/DefaultList.css

@@ -1,5 +1,17 @@
+@import 'part:@sanity/base/theme/variables-style';
+
 .root {
   display: block;
   margin: 0;
   padding: 0;
 }
+
+.divider {
+  width: 100%;
+  height: 0;
+  padding: 0;
+  margin: 0;
+  background: none;
+  border-top: 1px solid var(--hairline-color);
+  border-bottom: none;
+}

packages/@sanity/desk-tool/src/pane/ListPane.js

@@ -2,6 +2,7 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import {withRouterHOC} from 'part:@sanity/base/router'
 import DefaultPane from 'part:@sanity/components/panes/default'
+import listStyles from 'part:@sanity/components/lists/default-style'
 import PaneItem from './PaneItem'
 import ListView from './ListView'
 
@@ -22,6 +23,7 @@ export default withRouterHOC(
       items: PropTypes.arrayOf(
         PropTypes.shape({
           id: PropTypes.string.isRequired,
+          type: PropTypes.string.isRequired,
           schemaType: PropTypes.shape({name: PropTypes.string})
         })
       ),
@@ -111,19 +113,23 @@ export default withRouterHOC(
           menuItemGroups={menuItemGroups}
         >
           <ListView layout={defaultLayout}>
-            {items.map(item => (
-              <PaneItem
-                key={item.id}
-                id={item.id}
-                index={index}
-                value={item}
-                icon={this.shouldShowIconForItem(item)}
-                layout={defaultLayout}
-                isSelected={this.itemIsSelected(item)}
-                getLinkState={this.getLinkStateForItem}
-                schemaType={item.schemaType}
-              />
-            ))}
+            {items.map(item =>
+              item.type === 'divider' ? (
+                <hr key={item.id} className={listStyles.divider} />
+              ) : (
+                <PaneItem
+                  key={item.id}
+                  id={item.id}
+                  index={index}
+                  value={item}
+                  icon={this.shouldShowIconForItem(item)}
+                  layout={defaultLayout}
+                  isSelected={this.itemIsSelected(item)}
+                  getLinkState={this.getLinkStateForItem}
+                  schemaType={item.schemaType}
+                />
+              )
+            )}
           </ListView>
         </DefaultPane>
       )

packages/@sanity/structure/src/List.ts

@@ -1,5 +1,5 @@
 import {find} from 'lodash'
-import {SerializePath, SerializeOptions} from './StructureNodes'
+import {SerializePath, SerializeOptions, Divider} from './StructureNodes'
 import {ChildResolverOptions, ChildResolver} from './ChildResolver'
 import {SerializeError, HELP_URL} from './SerializeError'
 import {ListItem, ListItemBuilder} from './ListItem'
@@ -14,9 +14,15 @@ const getArgType = (thing: ListItem) => {
   return Array.isArray(thing) ? 'array' : typeof thing
 }
 
+const isListItem = (item: ListItem | Divider): item is ListItem => {
+  return item.type === 'listItem'
+}
+
 const resolveChildForItem: ChildResolver = (itemId: string, options: ChildResolverOptions) => {
   const parentItem = options.parent as List
-  const target = (parentItem.items.find(item => item.id === itemId) || {child: undefined}).child
+  const items = parentItem.items.filter(isListItem)
+  const target = (items.find(item => item.id === itemId) || {child: undefined}).child
+
   if (!target || typeof target !== 'function') {
     return target
   }
@@ -25,15 +31,19 @@ const resolveChildForItem: ChildResolver = (itemId: string, options: ChildResolv
 }
 
 function maybeSerializeListItem(
-  item: ListItem | ListItemBuilder,
+  item: ListItem | ListItemBuilder | Divider,
   index: number,
   path: SerializePath
-): ListItem {
+): ListItem | Divider {
   if (item instanceof ListItemBuilder) {
     return item.serialize({path, index})
   }
 
   const listItem = item as ListItem
+  if (listItem && listItem.type === 'divider') {
+    return item as Divider
+  }
+
   if (!listItem || listItem.type !== 'listItem') {
     const gotWhat = (listItem && listItem.type) || getArgType(listItem)
     const helpText = gotWhat === 'array' ? ' - did you forget to spread (...moreItems)?' : ''
@@ -48,15 +58,15 @@ function maybeSerializeListItem(
 }
 
 export interface List extends GenericList {
-  items: ListItem[]
+  items: (ListItem | Divider)[]
 }
 
 export interface ListInput extends GenericListInput {
-  items?: (ListItem | ListItemBuilder)[]
+  items?: (ListItem | ListItemBuilder | Divider)[]
 }
 
 export interface BuildableList extends BuildableGenericList {
-  items?: (ListItem | ListItemBuilder)[]
+  items?: (ListItem | ListItemBuilder | Divider)[]
 }
 
 export class ListBuilder extends GenericListBuilder<BuildableList, ListBuilder> {
@@ -67,7 +77,7 @@ export class ListBuilder extends GenericListBuilder<BuildableList, ListBuilder>
     this.spec = spec ? spec : {}
   }
 
-  items(items: (ListItemBuilder | ListItem)[]): ListBuilder {
+  items(items: (ListItemBuilder | ListItem | Divider)[]): ListBuilder {
     return this.clone({items})
   }
 

packages/@sanity/structure/src/StructureNodes.ts

@@ -22,6 +22,11 @@ export interface EditorNode extends StructureNode {
   }
 }
 
+export interface Divider {
+  id: string
+  type: 'divider'
+}
+
 export type SerializePath = (string | number)[]
 
 export interface SerializeOptions {

packages/@sanity/structure/src/index.ts

@@ -1,3 +1,4 @@
+import {uniqueId} from 'lodash'
 import {ListBuilder, ListInput} from './List'
 import {
   getDocumentTypeListItems,
@@ -14,7 +15,7 @@ import {ListItemBuilder, ListItemInput} from './ListItem'
 import {MenuItemGroup, MenuItemGroupBuilder} from './MenuItemGroup'
 import {DocumentListBuilder, DocumentListInput} from './DocumentList'
 import {EditorBuilder} from './Editor'
-import {EditorNode} from './StructureNodes'
+import {EditorNode, Divider} from './StructureNodes'
 import {SerializeError} from './SerializeError'
 import {ComponentInput, ComponentBuilder} from './Component'
 import {DocumentListItemBuilder, DocumentListItemInput} from './DocumentListItem'
@@ -42,7 +43,9 @@ const StructureBuilder = {
     return typeof spec === 'function'
       ? new ComponentBuilder().component(spec)
       : new ComponentBuilder(spec)
-  }
+  },
+
+  divider: (): Divider => ({id: uniqueId('__divider__'), type: 'divider'})
 }
 
 export {StructureBuilder, SerializeError}

packages/test-studio/src/deskStructure.js

@@ -16,6 +16,8 @@ export default () =>
         .title('Singleton author')
         .schemaType('author'),
 
+      S.divider(),
+
       S.listItem()
         .title('Anything with a title')
         .icon(() => <span style={{fontSize: '2em'}}>T</span>)
@@ -104,5 +106,7 @@ export default () =>
             ])
         ),
 
+      S.divider(),
+
       ...S.documentTypeListItems()
     ])