chore: make next storefront send to next storybook (#2262)

resolves #2259

---------

Co-authored-by: Michael Marszalek <[email protected]>

apps/storefront/app/komponenter/component-list.ts

@@ -0,0 +1,157 @@
+export const data = [
+  {
+    title: 'Accordion',
+    image: 'Accordion.svg',
+    url: 'https://storybook.designsystemet.no/?path=/docs/komponenter-accordion--docs',
+  },
+  {
+    title: 'Alert',
+    image: 'Alert.svg',
+    url: 'https://storybook.designsystemet.no/?path=/docs/komponenter-alert--docs',
+  },
+  {
+    title: 'Button',
+    image: 'Button.svg',
+    url: 'https://storybook.designsystemet.no/?path=/docs/komponenter-button--docs',
+  },
+  {
+    title: 'Card',
+    image: 'Card.svg',
+    url: 'https://storybook.designsystemet.no/?path=/docs/komponenter-card--docs',
+  },
+  {
+    title: 'Checkbox',
+    image: 'Checkbox.svg',
+    url: 'https://storybook.designsystemet.no/?path=/docs/komponenter-checkbox--docs',
+  },
+  {
+    title: 'Chip',
+    image: 'Chip.svg',
+    url: 'https://storybook.designsystemet.no/?path=/docs/komponenter-chip--docs',
+  },
+  {
+    title: 'Combobox',
+    image: 'Combobox.svg',
+    url: 'https://storybook.designsystemet.no/?path=/docs/komponenter-combobox--docs',
+  },
+  {
+    title: 'Divider',
+    image: 'Divider.svg',
+    url: 'https://storybook.designsystemet.no/?path=/docs/komponenter-divider--docs',
+  },
+  {
+    title: 'Dropdown Menu',
+    image: 'DropdownMenu.svg',
+    url: 'https://storybook.designsystemet.no/?path=/docs/komponenter-dropdownmenu--docs',
+  },
+  {
+    title: 'Error Summary',
+    image: 'ErrorSummary.svg',
+    url: 'https://storybook.designsystemet.no/?path=/docs/komponenter-errorsummary--docs',
+  },
+  {
+    title: 'Fieldset',
+    image: 'Fieldset.svg',
+    url: 'https://storybook.designsystemet.no/?path=/docs/komponenter-fieldset--docs',
+  },
+  {
+    title: 'Help Text',
+    image: 'HelpText.svg',
+    url: 'https://storybook.designsystemet.no/?path=/docs/komponenter-helptext--docs',
+  },
+  {
+    title: 'Link',
+    image: 'Link.svg',
+    url: 'https://storybook.designsystemet.no/?path=/docs/komponenter-link--docs',
+  },
+  {
+    title: 'List',
+    image: 'List.svg',
+    url: 'https://storybook.designsystemet.no/?path=/docs/komponenter-list--docs',
+  },
+  {
+    title: 'Loaders',
+    image: 'Loaders.svg',
+    url: 'https://storybook.designsystemet.no/?path=/docs/komponenter-loaders-skeleton--docs',
+  },
+  {
+    title: 'Modal',
+    image: 'Modal.svg',
+    url: 'https://storybook.designsystemet.no/?path=/docs/komponenter-modal--docs',
+  },
+  {
+    title: 'Native Select',
+    image: 'Select.svg',
+    url: 'https://storybook.designsystemet.no/?path=/docs/komponenter-nativeselect--docs',
+  },
+  {
+    title: 'Pagination',
+    image: 'Pagination.svg',
+    url: 'https://storybook.designsystemet.no/?path=/docs/komponenter-pagination--docs',
+  },
+  {
+    title: 'Popover',
+    image: 'Popover.svg',
+    url: 'https://storybook.designsystemet.no/?path=/docs/komponenter-popover--docs',
+  },
+  {
+    title: 'Radio',
+    image: 'Radio.svg',
+    url: 'https://storybook.designsystemet.no/?path=/docs/komponenter-radio--docs',
+  },
+  {
+    title: 'Search',
+    image: 'Search.svg',
+    url: 'https://storybook.designsystemet.no/?path=/docs/komponenter-search--docs',
+  },
+  {
+    title: 'Skip Link',
+    image: 'SkipLink.svg',
+    url: 'https://storybook.designsystemet.no/?path=/docs/komponenter-skiplink--docs',
+  },
+  {
+    title: 'Switch',
+    image: 'Switch.svg',
+    url: 'https://storybook.designsystemet.no/?path=/docs/komponenter-switch--docs',
+  },
+  {
+    title: 'Table',
+    image: 'Table.svg',
+    url: 'https://storybook.designsystemet.no/?path=/docs/komponenter-table--docs',
+  },
+  {
+    title: 'Tabs',
+    image: 'Tabs.svg',
+    url: 'https://storybook.designsystemet.no/?path=/docs/komponenter-tabs--docs',
+  },
+  {
+    title: 'Tag',
+    image: 'Tag.svg',
+    url: 'https://storybook.designsystemet.no/?path=/docs/komponenter-tag--docs',
+  },
+  {
+    title: 'Textarea',
+    image: 'TextArea.svg',
+    url: 'https://storybook.designsystemet.no/?path=/docs/komponenter-textarea--docs',
+  },
+  {
+    title: 'Textfield',
+    image: 'Textfield.svg',
+    url: 'https://storybook.designsystemet.no/?path=/docs/komponenter-textfield--docs',
+  },
+  {
+    title: 'Tooltip',
+    image: 'Tooltip.svg',
+    url: 'https://storybook.designsystemet.no/?path=/docs/komponenter-tooltip--docs',
+  },
+  {
+    title: 'Typography',
+    image: 'Typography.svg',
+    url: 'https://storybook.designsystemet.no/?path=/docs/komponenter-typography--docs',
+  },
+  {
+    title: 'Toggle Group',
+    image: 'ToggleGroup.svg',
+    url: 'https://storybook.designsystemet.no/?path=/docs/komponenter-togglegroup--docs',
+  },
+];

apps/storefront/app/komponenter/page.tsx

@@ -0,0 +1,35 @@
+import { ComponentCard } from '@components';
+import React from 'react';
+
+import { data } from './component-list';
+
+const sortedData = data.sort((a, b) => a.title.localeCompare(b.title));
+
+const IS_NEXT_BRANCH = process.env.defaultenvironment === ('next' || 'preview');
+
+/* If we are in the next branch, send us to the next storybook */
+if (IS_NEXT_BRANCH) {
+  for (const component of sortedData) {
+    component.url = component.url.replace(
+      'storybook.designsystemet.no',
+      'next.storybook.designsystemet.no',
+    );
+  }
+}
+
+export default function page() {
+  return (
+    <>
+      {sortedData.map((component) => (
+        <ComponentCard key={component.title} {...component} />
+      ))}
+      <style>
+        {`
+    body {
+      background-color: var(--ds-color-neutral-background-subtle);
+    }
+  `}
+      </style>
+    </>
+  );
+}