Slice Machine libraries path breaks slice-machine-ui

[jesse (Jesse Winton)]

I'm rebuilding my existing slices for my Nextjs project using slice machine, primarily for the variations (great feature). However, I'm trying to maintain my current project structure, which has everything within different folders in src, however, in sm.json, if I try and define my libraries path as anything other than @/slices with slices in the root directory then my variations don't swap. In other words, I can create new variations, but when I try and navigate between them to make changes it doesn't actually swap between them.

I'm using slice-machine-ui@0.1.0-alpha.7. Any ideas how to fix this?

[Phil (Phil Snow)]

Hi Jesse,

I'm not 100% sure what you mean here.

What do the files you're trying to link contain? How does the sm.json look with your updated info?

What exactly do you mean when you say the "my variations don't swap"?

Thanks.

[jesse (Jesse Winton)]

Yeah, I can definitely clarify.

So, if I change my sm.json to use a different path for the library, like so:

{
  "apiEndpoint": "https://my-endpoint.prismic.io/api/v2",
  "pathToLibrary": "src",
  "libraries": ["@/src/slices", "essential-slices"],
  "_latest": "0.1.0",
  "storybook": "http://localhost:6006"
}

I can still launch slice machine and see my slices.

But if I navigate into my HeroSlice for example, with two variations, when I use the select to swap between the variations and make edits the route doesn't change, nor does the variant that I'm trying to edit.

This problem only happens if I don't have my slices in the root directory.

[hugo.villain]

Thanks for your detailed answer!
Would you mind sharing the model of your slice?

[jesse (Jesse Winton)]

You got it, thanks for the assistance!

{
  "id": "hero_slice",
  "type": "SharedSlice",
  "name": "HeroSlice",
  "description": "HeroSlice",
  "variations": [
    {
      "id": "heroWithImage",
      "name": "Hero - With Image",
      "docURL": "...",
      "version": "sktwi1xtmkfgx8626",
      "description": "HeroSlice",
      "primary": {
        "includeLocation": {
          "config": {
            "label": "Include Location",
            "placeholder_false": "false",
            "placeholder_true": "true",
            "default_value": true
          },
          "type": "Boolean"
        },
        "title": {
          "config": {
            "label": "Title",
            "placeholder": "This is where it all begins...",
            "allowTargetBlank": true,
            "single": "heading1"
          },
          "type": "StructuredText"
        },
        "description": {
          "type": "StructuredText",
          "config": {
            "single": "paragraph",
            "label": "Description",
            "placeholder": "A nice description of your feature"
          }
        },
        "defaultButtonLabel": {
          "config": {
            "label": "Default Button Label",
            "placeholder": "Enter default button label..."
          },
          "type": "Text"
        },
        "defaultButtonLink": {
          "config": {
            "label": "Default Button Link",
            "placeholder": "Select default link...",
            "allowTargetBlank": true
          },
          "type": "Link"
        },
        "image": {
          "config": {
            "label": "Image",
            "constraint": {
              "width": 2500,
              "height": 1800
            },
            "thumbnails": []
          },
          "type": "Image"
        }
      },
      "items": {}
    },
    {
      "id": "heroWithVideo",
      "name": "Hero - With Video",
      "docURL": "...",
      "version": "sktwi1xtmkfgx8626",
      "description": "HeroSlice",
      "primary": {
        "includeLocation": {
          "config": {
            "label": "Include Location",
            "placeholder_false": "false",
            "placeholder_true": "true",
            "default_value": true
          },
          "type": "Boolean"
        },
        "title": {
          "type": "StructuredText",
          "config": {
            "single": "heading1",
            "label": "Title",
            "placeholder": "This is where it all begins..."
          }
        },
        "description": {
          "type": "StructuredText",
          "config": {
            "single": "paragraph",
            "label": "Description",
            "placeholder": "A nice description of your feature"
          }
        },
        "defaultButtonLabel": {
          "config": {
            "label": "Default Button Label",
            "placeholder": "Enter default button label..."
          },
          "type": "Text"
        },
        "defaultButtonLink": {
          "config": {
            "label": "Default Button Link",
            "placeholder": "Select default link...",
            "allowTargetBlank": true
          },
          "type": "Link"
        },
        "videoPoster": {
          "config": {
            "label": "Video Poster",
            "constraint": {
              "width": 1920,
              "height": 1080
            },
            "thumbnails": []
          },
          "type": "Image"
        },
        "video": {
          "config": {
            "label": "Video",
            "placeholder": "Select the video...",
            "allowTargetBlank": true
          },
          "type": "Link"
        },
        "backgroundVideo": {
          "config": {
            "label": "Background Video",
            "placeholder": "Select background video...",
            "allowTargetBlank": true
          },
          "type": "Link"
        }
      },
      "items": {}
    }
  ]
}

[Phil (Phil Snow)]

Hi Jesse,

So Hugo looked at this and the Variation link in the Popover didn't take into account sub-routes. He updated and is currently publishing slice-machine-ui@0.1.0-alpha.11

[hugo.villain]

Hey @jesse can you give 0.1.0-beta.1 a try?

[jesse (Jesse Winton)]

I can indeed, thank you!