Storybook v7 URL params

preview-head.html

<script>
  function slugify(str) {
    return str
      .toLowerCase()
      .replace(/[^a-z0-9]+/g, '-')
      .replace(/(^-|-$)+/g, '');
  }

  // screener-storybook is not compatible with storybook 7.
  // It uses `selectedKind` and `selectedStory` query params to determine which story to render.
  // Storybook 7 uses `id` query param instead.
  // https://github.com/storybookjs/storybook/blob/e01d876314e7fc1f02d065a93a690f4787f58cec/MIGRATION.md#new-url-structure
  const url = new URL(window.location.href);
  const params = new URLSearchParams(window.location.search);
  if (params.has('selectedKind') && params.has('selectedStory')) {
    url.search = (new URLSearchParams({
      id: `${slugify(params.get('selectedKind'))}--${slugify(params.get('selectedStory'))}`,
    })).toString();
    window.location.replace(url.toString())
  }
</script>