RFC(slice-machine-ui): use/configure custom mocks

As most users have noted, created mocks are pretty limited at the moment, if not existent. This is a pretty tough subject for us, as we both want to:

• help developers test components quickly, without having to “care” about actual content
• create screenshots relevant enough to be understood by their content writers

I believe the chosen solution should take care of these 2 problems, that belong to different moments of the same flow. I’ve been building a small prototype that tries to address them:

Basically, it expects a .slicemachine/mocks.json file (that I create manually atm but could be handled by the builder) that can alter the way a mock will be generated. This configuration occurs per field and depends on the widget type the field points to.

A minimum example for a library containing a CallToAction slice with 2 fields would look like his:

{
  "CallToAction": {
    "title": {
      "config": {
		"sentencesPerParagraph": {
          "min": 12,
          "max": 44
        },
        "patternType": "PARAGRAPH_WITH_HEADING"
      }
    },
    "bool": {
      "content": true
    }
  }
}

For each widget type, 2 keys are available: config and content, where content takes priority on config. Of course, depending on widget type, different configurations are available.

So, taking this case as example: https://community.prismic.io/t/change-mock-images/2478/5, you could end up with one of these:

"image": {
      "content": {
		"alt": "My own alternative text",
        "src": "https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg"
      }
    }

👆 One image defined, thumbnails generated automatically

"image": {
      "config": { "imageType": "ICON" }
}

👆 Image of type icon, picked randomly

---

For most field types, I don’t see a real advantage in defining a config as these fields are pretty straightforward. For example, providing a configuration object to Boolean fields seems a bit overkill.

For others, I’ve started documenting things here: https://www.notion.so/prismic/Mocks-by-Widget-a8c441c7054d4c0598c265fc99302f0b

[ReeceM]

Additional Feedback

The mocks have been working great that I have been working with them again.

I have an interesting thought. So for paragraphs there is the option to pick the number of blocks like when it is for rich text.

But I have notice, and there is the pattern where the Text Content type is used for link button text and navbar links. No considering the normal design pattern is 1 - 2 words on a navbar, there are un-needed layout issues when a Text Content mock has 3 - 4 words, it causes some issues if you try use repeated types.

It would be nice to be able to say, give me random words, but no more than 2. (Or min max on it, possible?)

But then default to normal behaviour when no additional changes are made

What I have noticed would be nice, the Repeatable zone doesn’t have a way to adjust the number of repeated instances.

I think in some cases it might be nice to cap the number of repeated items that are mocked, as when it keeps changing, while doing the design layout, it goes from 6 to 2 to 3 back to 6 and so on, so there isn’t consistency, at least there.

I might be then making the point of repeatable zones pointless at that point 🤣

[ReeceM]

Hey @lihbr it must have been fixed then between the alpha.6 version and the release of 0.0.44, awesome then :)

Tried the update when checking if it was a version issue with the alpha (given I guess)

It was this error that doesn’t come up now: [sliceName].js:1 Warning: An unhandled error was caught from submitForm() TypeError: Cannot convert undefined or null to object