Slice Machine + Storybook - Can you control the .stories.js title?

[kevinf (Kevin)]

Hey there,

I've set up Slice Machine into a Next.js project and would like to change the default title generated in each Slice Machine component's .stories file.

For example, by default it will be generated as something like this:

// AnotherSlice/index.stories.js

export default {
  title: 'src/modules/prismic/slices/AnotherSlice',
}

Which leads to StoryBook rendering its navigation like this:

Instead of a list of folders in StoryBook, I just want to have the title say "Prismic Slices", as this is something that might be shared with the client.

Is there a way to configure this? And if I change them manually, will they eventually be overwritten?

Thanks

[Priyanka (Priyanka Maheshwari)]

Hello @kevinf

Thanks for reaching out to us.

To make available all the Slice in the PrismicSlice folder you have to do these things:

1. First register libraries in the sm.json file. There is one library available by default @/slices but you can register more as you want. For example, I have added one more library @/PrismicSlices
   
   
   

2. Now you can move all your existing Slices from src/modules/prismic/slices' to PrismicSlices folder manually. And you need to update imports in index.stories.js file.
   If you are creating any new slices, select this PrismicSlices target library in the Slice builder.
   

   

All slices should appear in PrismicSlices folder in the storybook.

Give this a try and let me know.

Thanks,
Priyanka

[kevinf (Kevin)]

@kevinf

// AnotherSlice/index.stories.js

export default {
  title: 'src/modules/prismic/slices/AnotherSlice',
}

Thanks @Priyanka,

I don't think I explained it properly. I would like to keep the slices where I have them (src/modules/prismic/slices) and have already modified sm.json to put them there.

I'm only referring to the way Storybook names the category of components, which happens here:

// AnotherSlice/index.stories.js

export default {
  title: 'src/modules/prismic/slices/AnotherSlice',
}

title is auto-generated and visually results in:

I would like title to not be generated based on the location of the slice. Rather, I want it to just say "SLICES" if possible.

Thanks

[Priyanka (Priyanka Maheshwari)]

title in the index.stories.js file is autogenerated based upon the library of the Slices. You can try to modify it manually to change the preview in the Storybook. Give this a try:

export default {
  title: 'slices/AnotherSlice'',
};

Let me know if you have any further questions related to it.

Thanks,
Priyanka

[kevinf (Kevin)]

Ah okay, thanks. It sounds like there's not a way to configure the automation, but rather you need to adjust each slice manually.

Thanks for clarifying!

[Priyanka (Priyanka Maheshwari)]

I am happy to help you. Feel free to reach out to us if you have any questions.