From 9a2dbc7b6561c52107c45dfe29617103c8a70954 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Germ=C3=A1n=20Saracca?= Date: Wed, 16 Oct 2024 15:24:45 -0300 Subject: [PATCH 1/6] chore: add sb tsx files to compiling process --- packages/design-system/tsconfig.json | 9 ++++++++- tsconfig.json | 3 ++- 2 files changed, 10 insertions(+), 2 deletions(-) diff --git a/packages/design-system/tsconfig.json b/packages/design-system/tsconfig.json index 757f3a260..01b25b1cd 100644 --- a/packages/design-system/tsconfig.json +++ b/packages/design-system/tsconfig.json @@ -17,6 +17,13 @@ "noEmit": true, "jsx": "react-jsx" }, - "include": ["src", "tests", "vite.config.ts", "cypress.config.ts", ".storybook/test-runner.ts"], + "include": [ + "src", + "tests", + "vite.config.ts", + "cypress.config.ts", + ".storybook/test-runner.ts", + ".storybook/*.tsx" + ], "exclude": ["tests/**/**.spec.ts", "tests/**/**.spec.tsx"] } diff --git a/tsconfig.json b/tsconfig.json index 7a25b67d2..5b8d8b3d0 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -28,7 +28,8 @@ "cypress.config.ts", "vite.config.ts", "packages/design-system/src/", - "public" + "public", + ".storybook/*.tsx" ], "exclude": ["tests/**/**.spec.ts", "tests/**/**.spec.tsx"] } From 654072a6e1fee280e2a7f3035e2e4179e836336b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Germ=C3=A1n=20Saracca?= Date: Wed, 16 Oct 2024 15:26:12 -0300 Subject: [PATCH 2/6] feat: replace MemoryRouter with Data Router --- .storybook/preview.tsx | 15 +++++++++++---- 1 file changed, 11 insertions(+), 4 deletions(-) diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx index 111133a25..dba36418e 100644 --- a/.storybook/preview.tsx +++ b/.storybook/preview.tsx @@ -1,6 +1,6 @@ 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 +17,18 @@ const preview: Preview = { decorators: [ (Story) => { FakerHelper.setFakerSeed() + + const routes: RouteObject[] = [ + { + element: , + path: '/*' + } + ] + const browserRouter = createBrowserRouter(routes) + return ( - - - + ) } From 614a6c269b5dc0a04b85a90ec3062837e64e9f52 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Germ=C3=A1n=20Saracca?= Date: Wed, 16 Oct 2024 16:17:16 -0300 Subject: [PATCH 3/6] feat: add story for error page --- src/stories/error-page/ErrorPage.stories.tsx | 20 ++++++++++++++++++++ 1 file changed, 20 insertions(+) create mode 100644 src/stories/error-page/ErrorPage.stories.tsx diff --git a/src/stories/error-page/ErrorPage.stories.tsx b/src/stories/error-page/ErrorPage.stories.tsx new file mode 100644 index 000000000..0467c852a --- /dev/null +++ b/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 = { + 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 + +export const Default: Story = { + render: () => +} From 28e652fdb002e5a0ffc27a51b68f3bf31ff36cc0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Germ=C3=A1n=20Saracca?= Date: Wed, 16 Oct 2024 16:48:46 -0300 Subject: [PATCH 4/6] chore: import react to avoid UMD typescript warning --- .storybook/preview.tsx | 1 + packages/design-system/.storybook/preview.tsx | 1 + packages/design-system/tsconfig.json | 9 +-------- tsconfig.json | 3 +-- 4 files changed, 4 insertions(+), 10 deletions(-) diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx index dba36418e..820dd4432 100644 --- a/.storybook/preview.tsx +++ b/.storybook/preview.tsx @@ -1,3 +1,4 @@ +import React from 'react' import type { Preview } from '@storybook/react' import { ThemeProvider } from '@iqss/dataverse-design-system' import { createBrowserRouter, RouteObject, RouterProvider } from 'react-router-dom' diff --git a/packages/design-system/.storybook/preview.tsx b/packages/design-system/.storybook/preview.tsx index 39e207401..e26e6e16b 100644 --- a/packages/design-system/.storybook/preview.tsx +++ b/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' diff --git a/packages/design-system/tsconfig.json b/packages/design-system/tsconfig.json index 01b25b1cd..757f3a260 100644 --- a/packages/design-system/tsconfig.json +++ b/packages/design-system/tsconfig.json @@ -17,13 +17,6 @@ "noEmit": true, "jsx": "react-jsx" }, - "include": [ - "src", - "tests", - "vite.config.ts", - "cypress.config.ts", - ".storybook/test-runner.ts", - ".storybook/*.tsx" - ], + "include": ["src", "tests", "vite.config.ts", "cypress.config.ts", ".storybook/test-runner.ts"], "exclude": ["tests/**/**.spec.ts", "tests/**/**.spec.tsx"] } diff --git a/tsconfig.json b/tsconfig.json index 5b8d8b3d0..7a25b67d2 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -28,8 +28,7 @@ "cypress.config.ts", "vite.config.ts", "packages/design-system/src/", - "public", - ".storybook/*.tsx" + "public" ], "exclude": ["tests/**/**.spec.ts", "tests/**/**.spec.tsx"] } From b0efbbc1e9a886adcf8d7820152ac7557ee96abb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Germ=C3=A1n=20Saracca?= Date: Thu, 17 Oct 2024 09:28:44 -0300 Subject: [PATCH 5/6] fix: error page accesibility heading order issue --- src/sections/error-page/ErrorPage.module.scss | 12 ++++++++++++ src/sections/error-page/ErrorPage.tsx | 8 ++++---- 2 files changed, 16 insertions(+), 4 deletions(-) diff --git a/src/sections/error-page/ErrorPage.module.scss b/src/sections/error-page/ErrorPage.module.scss index 2681008fc..668a4f3ec 100644 --- a/src/sections/error-page/ErrorPage.module.scss +++ b/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; + } + } } diff --git a/src/sections/error-page/ErrorPage.tsx b/src/sections/error-page/ErrorPage.tsx index a28eaafea..2eaf09da5 100644 --- a/src/sections/error-page/ErrorPage.tsx +++ b/src/sections/error-page/ErrorPage.tsx @@ -24,10 +24,10 @@ export function ErrorPage({ fullViewport = false }: AppLoaderProps) {
-
-

{t('message.heading')}

-

{t('message.errorText')}

-
+

+ {t('message.heading')} + {t('message.errorText')} +

From 0f1c66b5d1faa6272aef408e488ed941f3987f53 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Germ=C3=A1n=20Saracca?= Date: Thu, 17 Oct 2024 10:31:26 -0300 Subject: [PATCH 6/6] test: omit errorpage from code coverage --- cypress.config.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/cypress.config.ts b/cypress.config.ts index 106a068eb..630cc27ff 100644 --- a/cypress.config.ts +++ b/cypress.config.ts @@ -36,7 +36,7 @@ export default defineConfig({ }, env: { codeCoverage: { - exclude: 'tests/**/*.*' + exclude: ['tests/**/*.*', '**/ErrorPage.tsx'] } } })