Custom screenshot file name

[theKashey]

I would like to have customizable story2filename, to land target images, for example, next to .story file, not all in one directory.

[theKashey]

So - storybook provides a fileName in context for each story (currently broken in storybook4), and one could use it to generate a file name.
My proposal - let the user specify where to put a file, the only concert - how.
There are 2 possibilities - a function, or a pattern.

Pattern is a bit more common approach, and allow you do to a lot, but most complex cases are undoable. Meanwhile, function is much harder to use.

Pattern could look like

const DEFAULT_FILE_PATTERN = '{kind}-{story}{knobs}{ns}{vp}';
export const story2filename = (params: Story2FilenameParams) => {
  const ns = params.namespace ? `_${params.namespace}` : '';
  const vp = params.viewport ? `-${viewport2string(params.viewport)}` : '';
  const knobs = params.knobs ? `-${knobs2string(params.knobs)}` : '';

  const replacements = {
    kind: params.kind,
    story:params.story,
    knobs,
    ns,
    vp
  };

  const filename =
    (params.filePattern || DEFAULT_FILE_PATTERN)
     .replace(/\{\w+\}/g, key => replacements[key])

  return `${filenamify(filename)}.png`;
};

It could be useful, but it will not solve my task - place a storyshots next to storyfile, while function could.

Any thoughts?

[wadackel]

I agree with the generation of file names using patterns 👍

for example, next to .story file, not all in one directory.

In order to satisfy your task, you need to know the file path of each story.
But regarding that I have no correct answer ... 😭

Hmm...

[theKashey]

You could have it, it is a part of storyContext. see https://github.com/theKashey/storybook/blob/bdc9bed648a3316ece83764cbf8e800c0b4d6fc3/lib/core/src/client/preview/client_api.js#L91

If you like patterns - I could open a PR, it's ready already. I just found that I have no filename, and first have to fix storybook(v4).

[wadackel]

OMG ... How amazing !!

I could open a PR, it's ready already.

Thanks 🙏
I am looking forward.

[theKashey]

@tsuyoshiwada - done, but it is not complete - I dont touch CLI interface, and still looking forward to access fileName somehow.

[andre-brdoch]

Is this still possible nowadays? I had a look and couldn't find the filePattern option anymore 😃