[schema] Make the output from the fallback preview.prepare more human friendly (#174)

* [schema] Make the output from the fallback preview.prepare more human-friendly

* [schema] Remove dangling comma in fallback preview output

Author: bjoerge

packages/@sanity/schema/src/preview/JSONStringifyHuman.js

@@ -0,0 +1,54 @@
+import {pick} from 'lodash'
+
+function isEmpty(object) {
+  for (const key in object) {
+    if (object.hasOwnProperty(key)) {
+      return false
+    }
+  }
+  return true
+}
+
+function _stringify(value, options, depth) {
+  if (depth > options.maxDepth) {
+    return '...'
+  }
+  if (Array.isArray(value)) {
+    if (value.length === 0) {
+      return '[empty]'
+    }
+    const capLength = Math.max(value.length - options.maxBreadth)
+    const asString = value.slice(0, options.maxBreadth)
+      .map((item, index) => _stringify(item, options, depth + 1))
+      .concat(capLength > 0 ? `…+${capLength}` : [])
+      .join(', ')
+
+    return depth === 0 ? asString : `[${asString}]`
+  }
+  if (typeof value === 'object' && value !== null) {
+    const keys = Object.keys(value)
+      .filter(key => !options.ignoreKeys.includes(key) && typeof value[key] !== 'undefined')
+
+    if (isEmpty(pick(value, keys))) {
+      return '{empty}'
+    }
+
+    const asString = keys
+      .slice(0, options.maxBreadth)
+      .map(key => `${key}: ${_stringify(value[key], options, depth + 1)}`)
+      .join(', ')
+
+    return depth === 0 ? asString : `{${asString}}`
+  }
+  const asString = String(value)
+  return asString === '' ? '""' : asString
+}
+
+export default function stringify(value, options = {}) {
+  const opts = {
+    maxDepth: 'maxDepth' in options ? options.maxDepth : 2,
+    maxBreadth: 'maxBreadth' in options ? options.maxBreadth : 2,
+    ignoreKeys: 'ignoreKeys' in options ? options.ignoreKeys : []
+  }
+  return _stringify(value, opts, 0)
+}

packages/@sanity/schema/src/preview/fallbackPrepare.js

@@ -0,0 +1,15 @@
+import {pick} from 'lodash'
+import stringify from './JSONStringifyHuman'
+
+const OPTIONS = {
+  maxEntries: 2,
+  maxDepth: 2,
+  maxBreadth: 2,
+  ignoreKeys: ['_id', '_type', '_key', '_ref']
+}
+
+export function createFallbackPrepare(fieldNames) {
+  return value => ({
+    title: stringify(pick(value, fieldNames), OPTIONS)
+  })
+}

packages/@sanity/schema/src/preview/guessPreviewConfig.js

@@ -1,5 +1,6 @@
 import {omitBy, isUndefined} from 'lodash'
 import arrify from 'arrify'
+import {createFallbackPrepare} from './fallbackPrepare'
 
 const TITLE_CANDIDATES = ['title', 'name', 'label', 'heading', 'header', 'caption']
 const DESCRIPTION_CANDIDATES = ['description', ...TITLE_CANDIDATES]
@@ -50,11 +51,7 @@ export default function guessPreviewFields(objectTypeDef) {
 
     return {
       select: fieldMapping,
-      prepare(data) {
-        return {
-          title: fieldNames.map(name => `${name}: ${JSON.stringify(data[name])}`).join(' / ')
-        }
-      }
+      prepare: createFallbackPrepare(fieldNames)
     }
   }
 

packages/test-studio/schemas/notitle.js

@@ -0,0 +1,46 @@
+// Example type that has no obvious candidate fields for sort or preview
+export default {
+  name: 'noTitleField',
+  type: 'object',
+  title: 'No title field',
+  fields: [
+    {
+      name: 'isChecked',
+      type: 'boolean',
+      title: 'Is checked?'
+    },
+    {
+      name: 'somethings',
+      title: 'Some things',
+      type: 'array',
+      of: [
+        {type: 'string'}
+      ]
+    },
+    {
+      name: 'something',
+      type: 'object',
+      title: 'Some thing',
+      fields: [
+        {name: 'first', type: 'string'},
+        {name: 'second', type: 'string'}
+      ]
+    },
+    {
+      name: 'arrayOfBooks',
+      type: 'array',
+      title: 'Array of books',
+      of: [
+        {type: 'book', title: 'Book'}
+      ]
+    },
+    {
+      name: 'arrayOfMyself',
+      type: 'array',
+      title: 'Array of my own type',
+      of: [
+        {type: 'noTitleField', title: 'My own type'}
+      ]
+    }
+  ]
+}

packages/test-studio/schemas/schema.js

@@ -19,6 +19,7 @@ import dates from './dates'
 import slugs from './slugs'
 import geopoint from './geopoint'
 import customInputs from './customInputs'
+import notitle from './notitle'
 
 export default createSchema({
   name: 'test-examples',
@@ -42,6 +43,7 @@ export default createSchema({
     myImage,
     recursive,
     myObject,
-    codeInputType
+    codeInputType,
+    notitle
   ]
 })