Merge pull request #524 from IQSS/configure-storybook-for-data-router

Configure storybook for data router

.storybook/preview.tsx

@@ -1,6 +1,7 @@
+import React from 'react'
 import type { Preview } from '@storybook/react'
 import { ThemeProvider } from '@iqss/dataverse-design-system'
-import { MemoryRouter } from 'react-router-dom'
+import { createBrowserRouter, RouteObject, RouterProvider } from 'react-router-dom'
 import { FakerHelper } from '../tests/component/shared/FakerHelper'
 import 'react-loading-skeleton/dist/skeleton.css'
 
@@ -17,11 +18,18 @@ const preview: Preview = {
   decorators: [
     (Story) => {
       FakerHelper.setFakerSeed()
+
+      const routes: RouteObject[] = [
+        {
+          element: <Story />,
+          path: '/*'
+        }
+      ]
+      const browserRouter = createBrowserRouter(routes)
+
       return (
         <ThemeProvider>
-          <MemoryRouter>
-            <Story />
-          </MemoryRouter>
+          <RouterProvider router={browserRouter} />
         </ThemeProvider>
       )
     }

cypress.config.ts

@@ -36,7 +36,7 @@ export default defineConfig({
   },
   env: {
     codeCoverage: {
-      exclude: 'tests/**/*.*'
+      exclude: ['tests/**/*.*', '**/ErrorPage.tsx']
     }
   }
 })

packages/design-system/.storybook/preview.tsx

@@ -1,3 +1,4 @@
+import React from 'react'
 import type { Preview } from '@storybook/react'
 import { ThemeProvider } from '../src/lib/components/theme/ThemeProvider'
 import DocumentationTemplate from '../src/lib/stories/DocumentationTemplate.mdx'

src/sections/error-page/ErrorPage.module.scss

@@ -31,4 +31,16 @@
   justify-content: center;
   width: 100%;
   padding-block: 2rem;
+
+  h1 {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    margin: 0;
+
+    span {
+      display: block;
+      font-size: 22px;
+    }
+  }
 }

src/sections/error-page/ErrorPage.tsx

@@ -24,10 +24,10 @@ export function ErrorPage({ fullViewport = false }: AppLoaderProps) {
       <div className={styles['middle-errorMessage-wrapper']}>
         <div className={styles['icon-layout']}>
           <ExclamationCircle color={theme.color.dangerColor} size={62} />
-          <div aria-label="error-page">
-            <h1>{t('message.heading')}</h1>
-            <h4>{t('message.errorText')}</h4>
-          </div>
+          <h1>
+            {t('message.heading')}
+            <span>{t('message.errorText')}</span>
+          </h1>
         </div>
 
         <Link to="/" className="btn btn-secondary">

src/stories/error-page/ErrorPage.stories.tsx

@@ -0,0 +1,20 @@
+import { Meta, StoryObj } from '@storybook/react'
+import { ErrorPage } from '@/sections/error-page/ErrorPage'
+import { WithI18next } from '../WithI18next'
+
+const meta: Meta<typeof ErrorPage> = {
+  title: 'Pages/ErrorPage',
+  component: ErrorPage,
+  decorators: [WithI18next],
+  parameters: {
+    // Sets the delay for all stories.
+    chromatic: { delay: 15000, pauseAnimationAtEnd: true }
+  }
+}
+
+export default meta
+type Story = StoryObj<typeof ErrorPage>
+
+export const Default: Story = {
+  render: () => <ErrorPage />
+}