Feature request: Allow screenshots to be located right next to their components & stories

[andre-brdoch]

Hi! It would be awesome if loki would work with a folder structure where screenshots are being kept right next to their component and stories:

| Button
  |-- Button.vue
  |-- Button.stories.js
  |-- tests
     |-- screenshots

Right now when there is an issue with the screenshots, we have to scroll through a folder with hundreds of images, and a lot of attention must be paid to the filenames. When it comes to all other files (stories, styles, tests etc), we keep them right next to the component, screenshots are the only exception for this 😃

---

I tried it brute force using custom fileNameFormatter and our components directory set as output folder, however loki will clear the whole directory 😬

// loki.config.js
{
fileNameFormatter: ({ configurationName, kind, story }) => {
    // this will delete our components directory 🙈 
    const name = `${kind}/__tests__/screenshots/${kebabCase(story)}.${configurationName}`;
    console.log(name);
    return name;
  },
  // ...
}

$ loki test --port 5001 --output ./components

[tompuric]

I had a go at this and was able to co-locate screenshots with loki's current feature set.

--reference . will re-route referenced images to the project root instead of /.loki/reference

fileNameFormatter can then be arranged to follow your storybook structure:

fileNameFormatter: ({ story, parameters }) =>
        `${parameters.fileName.replace('/examples.tsx', '')}/__snapshots/${story}`.toLowerCase(),