How to use the @storybook/router.parseKind 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 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}'
github storybookjs / storybook / addons / docs / src / blocks / DocsPage.tsx View on Github external
const getDocsPageProps = (context: DocsContextProps): DocsPageProps => {
  const { selectedKind, selectedStory, parameters } = context;
  const {
    hierarchyRootSeparator: rootSeparator,
    hierarchySeparator: groupSeparator,
  } = (parameters && parameters.options) || {
    hierarchyRootSeparator: '|',
    hierarchySeparator: '/',
  };

  const { groups } = parseKind(selectedKind, { rootSeparator, groupSeparator });
  const title = (groups && groups[groups.length - 1]) || selectedKind;

  return {
    title,
    subtitle: parameters && parameters.componentDescription,
  };
};