From fdfafb589b98fb6ddb235843d754aad55a0351e5 Mon Sep 17 00:00:00 2001
From: Tobias Barsnes <tobias.barsnes@digdir.no>
Date: Thu, 15 Aug 2024 12:18:19 +0200
Subject: [PATCH] chore: make next storefront send to next storybook (#2262)

resolves #2259

---------

Co-authored-by: Michael Marszalek <mimarz@gmail.com>
---
 .../app/komponenter/component-list.ts         | 157 ++++++++++++++
 apps/storefront/app/komponenter/page.mdx      | 195 ------------------
 apps/storefront/app/komponenter/page.tsx      |  35 ++++
 3 files changed, 192 insertions(+), 195 deletions(-)
 create mode 100644 apps/storefront/app/komponenter/component-list.ts
 delete mode 100644 apps/storefront/app/komponenter/page.mdx
 create mode 100644 apps/storefront/app/komponenter/page.tsx

diff --git a/apps/storefront/app/komponenter/component-list.ts b/apps/storefront/app/komponenter/component-list.ts
new file mode 100644
index 0000000000..b5a3c74980
--- /dev/null
+++ b/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',
+  },
+];
diff --git a/apps/storefront/app/komponenter/page.mdx b/apps/storefront/app/komponenter/page.mdx
deleted file mode 100644
index bf2c9fee8a..0000000000
--- a/apps/storefront/app/komponenter/page.mdx
+++ /dev/null
@@ -1,195 +0,0 @@
-import { ComponentFillIcon } from '@navikt/aksel-icons';
-
-import { ComponentsLayout } from '@layouts';
-import { ComponentCard } from '@components';
-
-export default ({ children }) => <>{children}</>;
-
-<ComponentCard
-  title='Accordion'
-  image='Accordion.svg'
-  url='https://storybook.designsystemet.no/?path=/docs/komponenter-accordion--docs'
-/>
-
-<ComponentCard
-  title='Alert'
-  image='Alert.svg'
-  url='https://storybook.designsystemet.no/?path=/docs/komponenter-alert--docs'
-/>
-
-<ComponentCard
-  title='Button'
-  image='Button.svg'
-  url='https://storybook.designsystemet.no/?path=/docs/komponenter-button--docs'
-/>
-
-<ComponentCard
-  title='Card'
-  image='Card.svg'
-  url='https://storybook.designsystemet.no/?path=/docs/komponenter-card--docs'
-/>
-
-<ComponentCard
-  title='Checkbox'
-  image='Checkbox.svg'
-  url='https://storybook.designsystemet.no/?path=/docs/komponenter-checkbox--docs'
-/>
-
-<ComponentCard
-  title='Chip'
-  image='Chip.svg'
-  url='https://storybook.designsystemet.no/?path=/docs/komponenter-chip--docs'
-/>
-
-<ComponentCard
-  title='Combobox'
-  image='Combobox.svg'
-  url='https://storybook.designsystemet.no/?path=/docs/komponenter-combobox--docs'
-/>
-
-<ComponentCard
-  title='Divider'
-  image='Divider.svg'
-  url='https://storybook.designsystemet.no/?path=/docs/komponenter-divider--docs'
-/>
-
-<ComponentCard
-  title='Dropdown Menu'
-  image='DropdownMenu.svg'
-  url='https://storybook.designsystemet.no/?path=/docs/komponenter-dropdownmenu--docs'
-/>
-
-<ComponentCard
-  title='Error Summary'
-  image='ErrorSummary.svg'
-  url='https://storybook.designsystemet.no/?path=/docs/komponenter-errorsummary--docs'
-/>
-
-<ComponentCard
-  title='Fieldset'
-  image='Fieldset.svg'
-  url='https://storybook.designsystemet.no/?path=/docs/komponenter-fieldset--docs'
-/>
-
-<ComponentCard
-  title='Help Text'
-  image='HelpText.svg'
-  url='https://storybook.designsystemet.no/?path=/docs/komponenter-helptext--docs'
-/>
-
-<ComponentCard
-  title='Link'
-  image='Link.svg'
-  url='https://storybook.designsystemet.no/?path=/docs/komponenter-link--docs'
-/>
-
-<ComponentCard
-  title='List'
-  image='List.svg'
-  url='https://storybook.designsystemet.no/?path=/docs/komponenter-list--docs'
-/>
-
-<ComponentCard
-  title='Loaders'
-  image='Loaders.svg'
-  url='https://storybook.designsystemet.no/?path=/docs/komponenter-loaders-skeleton--docs'
-/>
-
-<ComponentCard
-  title='Modal'
-  image='Modal.svg'
-  url='https://storybook.designsystemet.no/?path=/docs/komponenter-modal--docs'
-/>
-
-<ComponentCard
-  title='Native Select'
-  image='Select.svg'
-  url='https://storybook.designsystemet.no/?path=/docs/komponenter-nativeselect--docs'
-/>
-
-<ComponentCard
-  title='Pagination'
-  image='Pagination.svg'
-  url='https://storybook.designsystemet.no/?path=/docs/komponenter-pagination--docs'
-/>
-
-<ComponentCard
-  title='Popover'
-  image='Popover.svg'
-  url='https://storybook.designsystemet.no/?path=/docs/komponenter-popover--docs'
-/>
-
-<ComponentCard
-  title='Radio'
-  image='Radio.svg'
-  url='https://storybook.designsystemet.no/?path=/docs/komponenter-radio--docs'
-/>
-<ComponentCard
-  title='Search'
-  image='Search.svg'
-  url='https://storybook.designsystemet.no/?path=/docs/komponenter-search--docs'
-/>
-
-<ComponentCard
-  title='Skip Link'
-  image='SkipLink.svg'
-  url='https://storybook.designsystemet.no/?path=/docs/komponenter-skiplink--docs'
-/>
-
-<ComponentCard
-  title='Switch'
-  image='Switch.svg'
-  url='https://storybook.designsystemet.no/?path=/docs/komponenter-switch--docs'
-/>
-
-<ComponentCard
-  title='Table'
-  image='Table.svg'
-  url='https://storybook.designsystemet.no/?path=/docs/komponenter-table--docs'
-/>
-
-<ComponentCard
-  title='Tabs'
-  image='Tabs.svg'
-  url='https://storybook.designsystemet.no/?path=/docs/komponenter-tabs--docs'
-/>
-
-<ComponentCard
-  title='Tag'
-  image='Tag.svg'
-  url='https://storybook.designsystemet.no/?path=/docs/komponenter-tag--docs'
-/>
-
-<ComponentCard
-  title='Textarea'
-  image='Textarea.svg'
-  url='https://storybook.designsystemet.no/?path=/docs/komponenter-textarea--docs'
-/>
-<ComponentCard
-  title='Textfield'
-  image='Textfield.svg'
-  url='https://storybook.designsystemet.no/?path=/docs/komponenter-textfield--docs'
-/>
-<ComponentCard
-  title='Toggle Group'
-  image='ToggleGroup.svg'
-  url='https://storybook.designsystemet.no/?path=/docs/komponenter-togglegroup--docs'
-/>
-<ComponentCard
-  title='Tooltip'
-  image='Tooltip.svg'
-  url='https://storybook.designsystemet.no/?path=/docs/komponenter-tooltip--docs'
-/>
-<ComponentCard
-  title='Typography'
-  image='Typography.svg'
-  url='https://storybook.designsystemet.no/?path=/docs/komponenter-typography--docs'
-/>
-
-<style>
-  {`
-    body {
-      background-color: var(--ds-color-neutral-background-subtle);
-    }
-  `}
-</style>
diff --git a/apps/storefront/app/komponenter/page.tsx b/apps/storefront/app/komponenter/page.tsx
new file mode 100644
index 0000000000..56923a4a9f
--- /dev/null
+++ b/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>
+    </>
+  );
+}