How to use the @storybook/router.sanitize function in @storybook/router

To help you get started, we’ve selected a few @storybook/router examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github storybookjs / storybook / lib / api / src / modules / stories.ts View on Github external
const selectStory = (kindOrId: string, story?: string) => {
    const { viewMode = 'story', storyId, storiesHash } = store.getState();
    if (!story) {
      const s = storiesHash[sanitize(kindOrId)];
      // eslint-disable-next-line no-nested-ternary
      const id = s ? (s.children ? s.children[0] : s.id) : kindOrId;
      navigate(`/${viewMode}/${id}`);
    } else if (!kindOrId) {
      // This is a slugified version of the kind, but that's OK, our toId function is idempotent
      const kind = storyId.split('--', 2)[0];
      selectStory(toId(kind, story));
    } else {
      selectStory(toId(kindOrId, story));
    }
  };
github storybookjs / storybook / lib / api / src / modules / stories.ts View on Github external
(soFar, group, index, original) => {
            const { name } = group;
            const parent = index > 0 && soFar[index - 1].id;
            const id = sanitize(parent ? `${parent}-${name}` : name);
            if (parent === id) {
              throw new Error(
                `
Invalid part '${name}', leading to id === parentId ('${id}'), inside kind '${kind}'

Did you create a path that uses the separator char accidentally, such as 'Vue ' where '/' is a separator char? See https://github.com/storybooks/storybook/issues/6128
              `.trim()
              );
            }

            const result: Group = {
              ...group,
              id,
              parent,
              depth: index,
              children: [],