Storybook: Invalid kind 'Кнопки', must include alphanumeric characters

[MerrickGit]

Describe the bug
When i use cyrillic symbols in the storiesOf, getting the bug.

Code snippets
If applicable, add code samples to help explain your problem.

storiesOf('Кнопки', module)
  .addDecorator(withKnobs)
  .add(
    'Button',
    withInfo(info)(() => (
      <React.Fragment>
        <Button type="primary" label="primary" />
      </React.Fragment>
    ))
  );

Additional context

exports.sanitize = function (string) {
    return string
        .toLowerCase()
        .replace(/[^a-z0-9-]/g, '-')
        .replace(/-+/g, '-')
        .replace(/^-+/, '')
        .replace(/-+$/, '');
};

Error in .replace(/[^a-z0-9-]/g, '-'). We can use only latin titles.

[shilman]

This is a good one! Any interest in contributing a PR with the fix?

[tmeasday]

This is a tricky one! I'm quite sure what the best fix is. Should we:

A) allow non-latin characters in storyIds? (part of the idea was to restrict them to make them simpler to work with, certainly want to restrict them in some ways)
B) transliterate non-latin chars to latin equivalents?
C) something else?

What did you have in mind @MerrickGit?

[MerrickGit]

This is a tricky one! I'm quite sure what the best fix is. Should we:

A) allow non-latin characters in storyIds? (part of the idea was to restrict them to make them simpler to work with, certainly want to restrict them in some ways)
B) transliterate non-latin chars to latin equivalents?
C) something else?

What did you have in mind @MerrickGit?

We are creating a banking app and our customers interested in сyrillic stories. I think others company which use storybook also need non-latin symbols, for example, chinese companies.

My vision, Storybook need to allow non-latin characters otherwise these companies will not be able to update to new version.

What do you think about it? @tmeasday @shilman

[Armanio]

Fully support comrade @MerrickGit.
It's weird. I get empty string instead of 'сторис'.
If SB not support non-latin symbols must throw error.

[tmeasday]

Of course! We need to support non-latin story names of course! This was just an oversight in the design 🤦‍♂️

I just was wondering because your comment implied you had a solution in mind. But we'll figure something out very soon.

[shilman]

Discussed with @tmeasday:

• Change from whitelist chars to blacklist? Expand whitelist? Technically a breaking change.
• Allow specifying an ID separately from the story name? Probably inconvenient.

==> Find list of chars to expand to

[ndelangen]

Maybe this:

.replace(/['`~!@#$%^&*()_|+-=?;:'",.<>\{\}\[\]\\\/]/gi, "")

[Armanio]

@ndelangen like a good solution.

[ndelangen]

@Armanio I'm not sure if you mean my suggestion is good or bad 😿

@shilman suggested using slugify, which seems top make a lot of sense to me too.

[Armanio]

@ndelangen sorry for implicit message. It's not sarcasm, good solution.
Blacklist is better than whitelist.
Of course it's only my opinion.

[shilman]

ZOMG!! I just released https://github.com/storybooks/storybook/releases/tag/v5.1.0-alpha.2 containing PR #5964 that references this issue. Upgrade today to try it out!

Because it's a pre-release you can find it on the @next NPM tag.

Closing this issue. Please re-open if you think there's still more to do.

[shilman]

Yay!! I just released https://github.com/storybooks/storybook/releases/tag/v5.0.1 containing PR #5964 that references this issue. Upgrade today to try it out!