Source-loader: Handle template strings in CSF title

[atanasster]

Issue: #7932

What I did

Handle case for template string while parsing CSF ast
Added template string example to story

How to test

const stories = 'Stories';
export default {
  title: `Addons/Docs/${stories}`,
};

[vercel]

This pull request is being automatically deployed with ZEIT Now (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://zeit.co/storybook/monorepo/hxwf1ve3e
🌍 Preview: https://monorepo-git-fork-atanasster-csf-title-template-string.storybook.now.sh

[ndelangen]

I suppose the support is actually quite limited?

import mdxNotes from '../notes/notes.mdx';
import { DocgenButton } from '../../components/DocgenButton';


const stories = () => 'Stories';

export default {
  title: `Addons/Docs/${stories()}`,
  component: DocgenButton,
};

wouldn't actually work?

[atanasster]

works, I tried the following more real-life examples:

const docsTitle = title => `Docs/${title}`;
export default {
  title: `Addons/${docsTitle('Stories')}`,
};

or

import { DocgenButton } from '../../components/DocgenButton';
export default {
  title: `Addons/Docs/${DocgenButton.displayName}`,
};

and similar.

For other cases like expressions, dynamic functions etc - I assume there is some library that does ast node value evaluation, but I couldn't find one.

I checked in a better example and made the behavior backwards compatible for non-strings

[thebuilder]

What about paths.macro? Can it evaluate that correctly?

import * as React from 'react'
import base from 'paths.macro'

export default {
  title: `${base}`
}

export const example = () => <div />

[atanasster]

The evaluation itself works fine. However there are some rules for titles - it can not finish in /.

for example we have:
import base from 'paths.macro'

that evaluates to /stories/addon-docs/

In the case those will work:

title: `Docs${base}Story`,
title: `${base}Story`,

However currently this will not work directly (ends in /):
title: `Docs${base}`

[shilman]

@atanasster can you check the failing snapshot?

[atanasster]

@shilman - I reverted the snapshot and it works now.

[shilman]

@atanasster @tmeasday Any idea why these are showing up as new stories in Chromatic? I tried modifying the capitalization to match the previous version, but it didn't seem to change anything.

[atanasster]

@shilman sorry, I don't know chromatic. can I run it locally on my machine and see the errors?

[tmeasday]

@shilman it's because the previous build didn't have the stories with the old capitalisation. Try merging in the latest next build.