Mock images generated in NextJS for items array

[jjames.home (James Home)]

I am running the slice-machine-ui beta with NextJS (using the nextjs starter template) so I can play with the slice variations.

However, when adding an image field to the repeatable zone it always reverts to the desktop preset, even when I set it to a Prismic URL it seems to ignore it and use the desktop preset. This only happens on the items array, when I set a Prismic URL in non-repeatable zone the image is produced without a problem. Even when I edit the mock-config.json manually storybook seems to ignore it or when I try to use the animals preset it also ignores it.

Here is the generated mock-config.json:

{
  "slices": {
    "WideImageOverlay": {
      "default-slice": {
        "primary": {
          "description": {
            "config": {
              "patternType": "PARAGRAPH",
              "blocks": 2
            }
          },
          "title": {
            "config": {
              "patternType": "HEADING",
              "blocks": 1
            }
          },
          "image": {
            "content": "https://images.prismic.io/jameshome/bf2ddacc-71be-4a0e-8246-c67548d58dad_price.png"
          }
        },
        "items": {
          "image": {
            "content": "https://images.unsplash.com/photo-1437622368342-7a3d73a34c8f"
          },
          "heading": {
            "config": {
              "patternType": "HEADING",
              "blocks": 8
            }
          },
          "test": {
            "content": 1997
          }
        }
      }
    }
  }
}

What I found strange was that the image object just has "content", rather than having the "url" and "alt".

Other items in the items array seem to produce correctly. Although the numbers mock seem to act as a simple "suggestion". I set the mock numbers to 1997 but other numbers are produced instead. I think this is a minimal issue, however.

My first guess is because it is in beta, or I am missing something obvious. I might just use the default images for now but I would like if there's a solution. Really great that you guys have done this.

My git repo: GitHub - jrah/nextjsjameshome

My package.json:

{
  "name": "slice-library-starter-next",
  "version": "0.0.0",
  "description": "An awesome Slice Library made with Next.js",
  "author": "<author>",
  "license": "MIT",
  "main": "slices/index.js",
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "export": "next export",
    "prepublishOnly": "node ./node_modules/sm-commons/scripts/bundle",
    "slicemachine": "start-slicemachine --port 9999",
    "storybook": "start-storybook -p 8888",
    "build-storybook": "build-storybook"
  },
  "dependencies": {
    "@storybook/addon-essentials": "^6.3.4",
    "@storybook/addon-links": "^6.3.4",
    "@storybook/addon-postcss": "^2.0.0",
    "autoprefixer": "^9",
    "next": "^10.0.8",
    "next-slicezone": "^0.1.0-alpha.0",
    "next-transpile-modules": "^6.1.0",
    "postcss": "^7",
    "prismic-javascript": "^3.0.2",
    "prismic-reactjs": "^1.3.3",
    "react": "16.14.0",
    "react-dom": "16.14.0",
    "tailwindcss": "npm:@tailwindcss/postcss7-compat"
  },
  "devDependencies": {
    "@storybook/react": "6.3.4",
    "babel-loader": "^8.2.2",
    "babel-plugin-react-require": "^3.1.3",
    "shx": "^0.3.3",
    "slice-machine-ui": "beta",
    "sm-commons": "^0.0.23"
  }
}

Edit: I see why it wasn't changing. It is dependent on the slice object inside the index.stories.js.

[Priyanka (Priyanka Maheshwari)]

Hello @jjames.home

Thanks for posting this question to us.

1. Updating mock-config.json: Whenever you changed mocks, you always need to click on the save model to filesystem button. It will update the mock-config.json file. For ex: In my case, I have an image field in the repeatable zone and updating mock with prismic image URL (screenshot attached)
   
   

Storybook data will update when you add the suggested code in the slices/Myslice/index.js file. Did you update the code there?

2. That's true that the image object just has "content", in the mock-config.json file. Because this file is only for the mock configuration. You will find "url" and "alt" in the .slicemachine/assets.mock.json file.

3. Can you explain more questions related to the number field mock data?

Thanks,
Priyanka