How to use @storybook/router - 10 common examples

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));
    }
  };

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));
    }
  };

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));
    }
  };

_init = async () => {
    // $FlowIgnore
    this.page = await __BROWSER_CONTEXT__.newPage();

    const story = this.story === 'default' ? 'default-story' : this.story;

    await this.page.goto(
      `${E2E_URL}/?path=/story/${toId(this.kind, story)}`, { waitUntil: 'networkidle2' },
    );

    // eslint-disable-next-line
    this.iframe = this.page.frames()[1];

    this.root = await this.iframe.waitForXPath('//*[@id="root"]');

    return this;
  }

viewports.push({ label: 'tablet', width: 1024, height: 768 });
  }
  let urlBase = 'http://web/';
  if (debug) {
    // Only use --debug when running backstop outside of docker for local
    // testing & debugging. Images will be generated with your host OS's browser
    // and will not match the images generated when running in CircleCI.
    urlBase = 'http://localhost:6006/';
  }
  // Backstop overrides.
  const overrides = [
    'GeneralTeaser',
    'Icon'
  ];
  const backstop = (overrides.indexOf(name) > -1) ? '&backstop=true' : '';
  const url = `${urlBase}iframe.html?id=${toId(kind, name)}${backstop}`;
  return makeScenario(
    `${kind}/${name}`,
    url,
    viewports
  );
});

export const constructUrl = (storybookUrl, kind, story) => {
  const id = toId(kind, story);

  const storyUrl = `/iframe.html?id=${id}`;
  const { protocol, host, pathname, search } = new URL(storybookUrl);
  const pname = pathname.replace(/\/$/, ''); // removes trailing /
  const query = search.replace('?', '&'); // convert leading ? to &
  return `${protocol}//${host}${pname}${storyUrl}${query}`;
};

const storiesHashOutOfOrder = Object.values(input).reduce((acc, item) => {
      const { kind, parameters } = item;
      // FIXME: figure out why parameters is missing when used with react-native-server
      const {
        hierarchyRootSeparator: rootSeparator,
        hierarchySeparator: groupSeparator,
      } = (parameters && parameters.options) || {
        hierarchyRootSeparator: '|',
        hierarchySeparator: '/',
      };

      const { root, groups } = parseKind(kind, { rootSeparator, groupSeparator });

      const rootAndGroups = []
        .concat(root || [])
        .concat(groups)
        .map(toGroup)
        // Map a bunch of extra fields onto the groups, collecting the path as we go (thus the reduce)
        .reduce(
          (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}'

function setCurrentStory(categorization, story) {
  clearCurrentStory();
  addons.getChannel().emit(Events.SET_CURRENT_STORY, {
    storyId: toId(categorization, story),
  });
  forceReRender();
}

export function getFrameworkName({ idsToFrameworks, story, kind }) {
  return (idsToFrameworks || {})[toId(kind || 'a', story || 'a')] || '';
}

export const getStoryProps = (
  { id, name, height }: StoryProps,
  { storyStore, parameters, mdxKind, selectedKind, selectedStory }: DocsContextProps
): PureStoryProps => {
  const previewId = id || (name && toId(mdxKind, name)) || toId(selectedKind, selectedStory);
  const data = storyStore.fromId(previewId);
  const props = { height, title: data && data.name };
  const { inlineStories } = (parameters && parameters.options && parameters.options.docs) || {
    inlineStories: false,
  };
  return {
    inline: inlineStories,
    id: previewId,
    storyFn: data.getDecorated(),
    height,
    title: data.name,
  };
};