Merge pull request #5964 from storybooks/5876-unicode-story-ids

Core: support unicode chars in story IDs

examples/official-storybook/stories/core/__snapshots__/unicode.stories.storyshot

@@ -0,0 +1,19 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Core|Unicode Кнопки 1`] = `
+<p>
+  нормальный
+</p>
+`;
+
+exports[`Storyshots Core|Unicode 바보 1`] = `
+<p>
+  🤷🏻‍♂️
+</p>
+`;
+
+exports[`Storyshots Core|Unicode 😀 1`] = `
+<p>
+  ❤️
+</p>
+`;

examples/official-storybook/stories/core/unicode.stories.js

@@ -0,0 +1,7 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+
+storiesOf('Core|Unicode', module)
+  .add('😀', () => <p>❤️</p>)
+  .add('Кнопки', () => <p>нормальный</p>)
+  .add('바보', () => <p>🤷🏻‍♂️</p>);

lib/router/src/tests/id.test.js

@@ -4,10 +4,13 @@ describe('toId', () => {
   [
     // name, kind, story, output
     ['handles simple cases', 'kind', 'story', 'kind--story'],
-    ['handles basic substitution', 'a b$c?d😀e', '1-2:3', 'a-b-c-d-e--1-2-3'],
+    ['handles basic substitution', 'a b$c?d😀e', '1-2:3', 'a-b-c-d😀e--1-2-3'],
     ['handles runs of non-url chars', 'a?&*b', 'story', 'a-b--story'],
     ['removes non-url chars from start and end', '?ab-', 'story', 'ab--story'],
     ['downcases', 'KIND', 'STORY', 'kind--story'],
+    ['non-latin', 'Кнопки', 'нормальный', 'кнопки--нормальный'],
+    ['korean', 'kind', '바보 (babo)', 'kind--바보-babo'],
+    ['all punctuation', 'kind', 'unicorns,’–—―′¿`"<>()!.!!!{}[]%^&$*#&', 'kind--unicorns'],
   ].forEach(([name, kind, story, output]) => {
     it(name, () => {
       expect(toId(kind, story)).toBe(output);

lib/router/src/utils.ts

@@ -9,10 +9,11 @@ interface StoryData {
 const knownViewModesRegex = /(story|info)/;
 const splitPath = /\/([^/]+)\/([^/]+)?/;
 
+// Remove punctuation https://gist.github.com/davidjrice/9d2af51100e41c6c4b4a
 export const sanitize = (string: string) => {
   return string
     .toLowerCase()
-    .replace(/[^a-z0-9-]/g, '-')
+    .replace(/[ ’–—―′¿'`~!@#$%^&*()_|+\-=?;:'",.<>\{\}\[\]\\\/]/gi, '-')
     .replace(/-+/g, '-')
     .replace(/^-+/, '')
     .replace(/-+$/, '');