letro/letro-authentication-service
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Upgrade to Storybook 9

Browse Source
This commit is contained in:
Quentin Gliech
2025-05-30 16:06:26 +02:00
parent 2734912bc8
commit f956557340
25 changed files with 175 additions and 1187 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
frontend/.storybook/main.ts
View File

@@ -9,34 +9,7 @@ import type { StorybookConfig } from "@storybook/react-vite";
const config: StorybookConfig = {
stories: ["../{src,stories}/**/*.stories.@(js|jsx|ts|tsx)"],
addons: [
// Automatic docs pages
"@storybook/addon-docs",
// Controls of components props
"@storybook/addon-controls",
// Document components actions
"@storybook/addon-actions",
// Helps measuring elements
"@storybook/addon-measure",
// Helps showing components boundaries
"@storybook/addon-outline",
// Quickly change viewport size
"@storybook/addon-viewport",
// Theme switch toolbar
"@storybook/addon-toolbars",
// Interactions
"@storybook/addon-interactions",
// i18next integration
"storybook-react-i18next",
],
addons: ["storybook-react-i18next", "@storybook/addon-docs"],
framework: "@storybook/react-vite",
@@ -48,10 +21,6 @@ const config: StorybookConfig = {
disableTelemetry: true,
},
docs: {
autodocs: true,
},
env: {
STORYBOOK: "true",
},

3
frontend/.storybook/preview.tsx
View File

@@ -9,7 +9,7 @@ import type {
Decorator,
Parameters,
Preview,
} from "@storybook/react";
} from "@storybook/react-vite";
import { TooltipProvider } from "@vector-im/compound-web";
import { initialize, mswLoader } from "msw-storybook-addon";
import { useLayoutEffect } from "react";
@@ -124,6 +124,7 @@ const preview: Preview = {
i18n,
},
loaders: [mswLoader],
tags: ["autodocs"],
};
export default preview;

1269
frontend/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

11
frontend/package.json
View File

@@ -47,11 +47,8 @@
"@graphql-codegen/cli": "^5.0.6",
"@graphql-codegen/client-preset": "^4.8.0",
"@graphql-codegen/typescript-msw": "^3.0.1",
"@storybook/addon-essentials": "^8.6.12",
"@storybook/addon-interactions": "^8.6.12",
"@storybook/react": "^8.6.12",
"@storybook/react-vite": "^8.6.12",
"@storybook/test": "^8.6.12",
"@storybook/addon-docs": "^9.0.1",
"@storybook/react-vite": "^9.0.1",
"@tanstack/react-query-devtools": "^5.77.2",
"@tanstack/react-router-devtools": "^1.120.3",
"@tanstack/router-plugin": "^1.120.3",
@@ -76,8 +73,8 @@
"postcss-import": "^16.1.0",
"postcss-nesting": "^13.0.1",
"rimraf": "^6.0.1",
"storybook": "^8.6.12",
"storybook-react-i18next": "^3.3.1",
"storybook": "^9.0.1",
"storybook-react-i18next": "^4.0.3",
"tailwindcss": "^3.4.17",
"typescript": "^5.8.3",
"vite": "6.3.5",

2
frontend/src/components/Collapsible/Collapsible.stories.tsx
View File

@@ -3,7 +3,7 @@
// SPDX-License-Identifier: AGPL-3.0-only
// Please see LICENSE in the repository root for full details.
import type { Meta, StoryObj } from "@storybook/react";
import type { Meta, StoryObj } from "@storybook/react-vite";
import * as Collapsible from "./Collapsible";
const meta = {

2
frontend/src/components/DateTime.stories.tsx
View File

@@ -4,7 +4,7 @@
// SPDX-License-Identifier: AGPL-3.0-only
// Please see LICENSE in the repository root for full details.
import type { Meta, StoryObj } from "@storybook/react";
import type { Meta, StoryObj } from "@storybook/react-vite";
import { sub } from "date-fns";
import DateTime from "./DateTime";

4
frontend/src/components/Dialog/Dialog.stories.tsx
View File

@@ -4,8 +4,8 @@
// SPDX-License-Identifier: AGPL-3.0-only
// Please see LICENSE in the repository root for full details.
import { action } from "@storybook/addon-actions";
import type { Meta, StoryObj } from "@storybook/react";
import type { Meta, StoryObj } from "@storybook/react-vite";
import { action } from "storybook/actions";
import { Description, Dialog, Title } from "./Dialog";

2
frontend/src/components/EmptyState/EmptyState.stories.tsx
View File

@@ -4,7 +4,7 @@
// SPDX-License-Identifier: AGPL-3.0-only
// Please see LICENSE in the repository root for full details.
import type { Meta, StoryObj } from "@storybook/react";
import type { Meta, StoryObj } from "@storybook/react-vite";
import { EmptyState } from "./EmptyState";

2
frontend/src/components/Filter/Filter.stories.tsx
View File

@@ -4,7 +4,7 @@
// SPDX-License-Identifier: AGPL-3.0-only
// Please see LICENSE in the repository root for full details.
import type { Meta, StoryObj } from "@storybook/react";
import type { Meta, StoryObj } from "@storybook/react-vite";
import { Filter } from "./Filter";

2
frontend/src/components/Footer/Footer.stories.tsx
View File

@@ -4,7 +4,7 @@
// SPDX-License-Identifier: AGPL-3.0-only
// Please see LICENSE in the repository root for full details.
import type { Meta, StoryObj } from "@storybook/react";
import type { Meta, StoryObj } from "@storybook/react-vite";
import { makeFragmentData } from "../../gql";

2
frontend/src/components/LoadingScreen/LoadingScreen.stories.tsx
View File

@@ -4,7 +4,7 @@
// SPDX-License-Identifier: AGPL-3.0-only
// Please see LICENSE in the repository root for full details.
import type { Meta, StoryObj } from "@storybook/react";
import type { Meta, StoryObj } from "@storybook/react-vite";
import LoadingScreen from "./LoadingScreen";

2
frontend/src/components/LoadingSpinner/LoadingSpinner.stories.tsx
View File

@@ -4,7 +4,7 @@
// SPDX-License-Identifier: AGPL-3.0-only
// Please see LICENSE in the repository root for full details.
import type { Meta, StoryObj } from "@storybook/react";
import type { Meta, StoryObj } from "@storybook/react-vite";
import LoadingSpinner from "./LoadingSpinner";

2
frontend/src/components/NavBar/NavBar.stories.tsx
View File

@@ -4,7 +4,7 @@
// SPDX-License-Identifier: AGPL-3.0-only
// Please see LICENSE in the repository root for full details.
import type { Meta, StoryObj } from "@storybook/react";
import type { Meta, StoryObj } from "@storybook/react-vite";
import NavItem from "../NavItem";

2
frontend/src/components/Session/DeviceTypeIcon.stories.tsx
View File

@@ -4,7 +4,7 @@
// SPDX-License-Identifier: AGPL-3.0-only
// Please see LICENSE in the repository root for full details.
import type { Meta, StoryObj } from "@storybook/react";
import type { Meta, StoryObj } from "@storybook/react-vite";
import DeviceTypeIcon from "./DeviceTypeIcon";

2
frontend/src/components/Session/DeviceTypeIcon.test.tsx
View File

@@ -6,7 +6,7 @@
// @vitest-environment happy-dom
import { composeStory } from "@storybook/react";
import { composeStory } from "@storybook/react-vite";
import { render } from "@testing-library/react";
import { describe, expect, it } from "vitest";

2
frontend/src/components/Session/LastActive.stories.tsx
View File

@@ -4,7 +4,7 @@
// SPDX-License-Identifier: AGPL-3.0-only
// Please see LICENSE in the repository root for full details.
import type { Meta, StoryObj } from "@storybook/react";
import type { Meta, StoryObj } from "@storybook/react-vite";
import { parseISO, subDays, subHours } from "date-fns";
import LastActive from "./LastActive";

2
frontend/src/components/Session/LastActive.test.tsx
View File

@@ -6,7 +6,7 @@
// @vitest-environment happy-dom
import { composeStory } from "@storybook/react";
import { composeStory } from "@storybook/react-vite";
import { render } from "@testing-library/react";
import { beforeAll, describe, expect, it } from "vitest";

2
frontend/src/components/SessionCard/SessionCard.stories.tsx
View File

@@ -4,7 +4,7 @@
// SPDX-License-Identifier: AGPL-3.0-only
// Please see LICENSE in the repository root for full details.
import type { Meta, StoryObj } from "@storybook/react";
import type { Meta, StoryObj } from "@storybook/react-vite";
import IconSignOut from "@vector-im/compound-design-tokens/assets/web/icons/sign-out";
import { Button } from "@vector-im/compound-web";
import { useTranslation } from "react-i18next";

2
frontend/src/components/SessionDetail/SessionHeader.stories.tsx
View File

@@ -4,7 +4,7 @@
// SPDX-License-Identifier: AGPL-3.0-only
// Please see LICENSE in the repository root for full details.
import type { Meta, StoryObj } from "@storybook/react";
import type { Meta, StoryObj } from "@storybook/react-vite";
import type { PropsWithChildren } from "react";
import SessionHeader from "./SessionHeader";

2
frontend/src/components/SessionDetail/SessionHeader.test.tsx
View File

@@ -6,7 +6,7 @@
// @vitest-environment happy-dom
import { composeStory } from "@storybook/react";
import { composeStory } from "@storybook/react-vite";
import { render } from "@testing-library/react";
import { describe, expect, it } from "vitest";

2
frontend/src/components/Typography.stories.tsx
View File

@@ -4,7 +4,7 @@
// SPDX-License-Identifier: AGPL-3.0-only
// Please see LICENSE in the repository root for full details.
import type { Meta, StoryObj } from "@storybook/react";
import type { Meta, StoryObj } from "@storybook/react-vite";
import Typography from "./Typography";

2
frontend/src/components/UserGreeting/UserGreeting.stories.tsx
View File

@@ -4,7 +4,7 @@
// SPDX-License-Identifier: AGPL-3.0-only
// Please see LICENSE in the repository root for full details.
import type { Meta, StoryObj } from "@storybook/react";
import type { Meta, StoryObj } from "@storybook/react-vite";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { makeFragmentData } from "../../gql";
import UserGreeting, { CONFIG_FRAGMENT, FRAGMENT } from "./UserGreeting";

2
frontend/src/components/UserSessionsOverview/BrowserSessionsOverview.stories.tsx
View File

@@ -4,7 +4,7 @@
// SPDX-License-Identifier: AGPL-3.0-only
// Please see LICENSE in the repository root for full details.
import type { Meta, StoryObj } from "@storybook/react";
import type { Meta, StoryObj } from "@storybook/react-vite";
import { makeFragmentData } from "../../gql";
import { DummyRouter } from "../../test-utils/router";

4
frontend/stories/routes/index.stories.tsx
View File

@@ -3,10 +3,10 @@
// SPDX-License-Identifier: AGPL-3.0-only
// Please see LICENSE in the repository root for full details.
import type { Meta, StoryObj } from "@storybook/react";
import { expect, userEvent, waitFor, within } from "@storybook/test";
import type { Meta, StoryObj } from "@storybook/react-vite";
import i18n from "i18next";
import { type GraphQLHandler, HttpResponse } from "msw";
import { expect, userEvent, waitFor, within } from "storybook/test";
import {
CONFIG_FRAGMENT as ACCOUNT_DELETE_BUTTON_CONFIG_FRAGMENT,
USER_FRAGMENT as ACCOUNT_DELETE_BUTTON_USER_FRAGMENT,

2
frontend/stories/routes/reset-cross-signing.stories.tsx
View File

@@ -3,7 +3,7 @@
// SPDX-License-Identifier: AGPL-3.0-only
// Please see LICENSE in the repository root for full details.
import type { Meta, StoryObj } from "@storybook/react";
import type { Meta, StoryObj } from "@storybook/react-vite";
import { HttpResponse, delay } from "msw";
import {
mockAllowCrossSigningResetMutation,