How to use the @storybook/router.toId 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
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 8base / boost / e2e / setup / TestSuiter.js View on Github external
_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;
  }
github massgov / mayflower / react / backstop / storyBookBackstop.js View on Github external
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
  );
});
github Workday / canvas-kit / .storybook / config.js View on Github external
function setCurrentStory(categorization, story) {
  clearCurrentStory();
  addons.getChannel().emit(Events.SET_CURRENT_STORY, {
    storyId: toId(categorization, story),
  });
  forceReRender();
}
github storybookjs / storybook / addons / storysource / src / edition-state / frameworkOverridesReader.js View on Github external
export function getFrameworkName({ idsToFrameworks, story, kind }) {
  return (idsToFrameworks || {})[toId(kind || 'a', story || 'a')] || '';
}
github storybookjs / storybook / addons / docs / src / blocks / Story.tsx View on Github external
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,
  };
};